Add multi-file playground imports

site/decodal-site/src/pages/playground.astro

@@ -6,19 +6,32 @@ import ManualLayout from '../layouts/ManualLayout.astro';
     <div class="playground-header">
       <div>
         <h1>Playground</h1>
-        <p>Evaluate Decodal directly in your browser through WebAssembly.</p>
+        <p>Virtual files are evaluated in the browser through WebAssembly. Use import paths such as <code>./schemas/service.dcdl</code>.</p>
+      </div>
+      <div class="playground-actions">
+        <p id="status" class="status">Loading WASM...</p>
+        <button id="run" disabled>Run</button>
       </div>
-      <button id="run" disabled>Run</button>
     </div>
-    <p id="status" class="status">Loading WASM...</p>
-    <div class="playground-grid">
+
+    <div class="playground-shell">
+      <aside class="file-panel">
+        <div class="panel-header">
+          <span>Files</span>
+          <button id="new-file" type="button">New</button>
+        </div>
+        <div id="file-tree" class="file-tree"></div>
+        <button id="delete-file" class="danger-button" type="button">Delete file</button>
+      </aside>
+
       <label class="pane input-pane">
-        <span>Input</span>
+        <span id="active-file">Input</span>
         <div class="editor-wrap">
           <pre id="source-highlight" aria-hidden="true"></pre>
           <textarea id="source" spellcheck="false"></textarea>
         </div>
       </label>
+
       <section class="pane output-pane">
         <span>Output</span>
         <pre id="output"></pre>