fix: s3 issue and add demo page

src/pages/demo/s3-tracks/index.astro

···
+---
+import Page from "../../../layouts/page.astro";
+import "@styles/pico.scss";
+---
+
+<Page title="Diffuse">
+  <main class="container">
+    <h1>Add sample S3 bucket to inputs</h1>
+
+    <p>
+      Clicking the button below will add some sample music, which you can then play using the
+      various <a href="/#themes" target="_blank">themes, abstractions and constituents</a>.
+
+      <br />
+      <br />
+
+      <button>Add sample content</button>
+    </p>
+  </main>
+
+  <style is:global>
+    iframe {
+      display: none;
+    }
+  </style>
+
+  <script>
+    import { applet } from "@scripts/applet/common";
+    import type { Bucket } from "@scripts/input/s3/types";
+
+    document.querySelector("button")?.addEventListener("click", clickHandler);
+
+    async function clickHandler() {
+      const p = document.body.querySelector("p");
+      const s3 = await applet("/input/s3");
+
+      // Credentials are read-only, no worries.
+      const bucket: Bucket = {
+        accessKey: "AKIA6OQ3EVMAXVCDQH6B",
+        bucketName: "ongaku-ryoho-demo",
+        host: "s3.amazonaws.com",
+        path: "/",
+        region: "us-east-1",
+        secretKey: "gHOBGGG55iw4kDCn7cZTIa5SP4YZzDFDsBqBab82",
+      };
+
+      await s3.sendAction("mount", bucket, { timeoutDuration: 60000 });
+
+      // Finished
+      if (p)
+        p.innerHTML = `
+          Content added! Try it out using the <a href="/constituent/blur/artwork-controller/" target="_blank">blur artwork controller</a> or any other <a href="/#themes" target="_blank">theme, abstraction or constituent</a>.
+        `;
+
+      // Additionally process inputs automatically
+      applet("/orchestrator/process-tracks");
+    }
+  </script>
+</Page>

src/pages/index.astro

···
   { url: "processor/metadata/", title: "Metadata retrieval" },
   { url: "processor/search/", title: "Search" },
 ];
+
+// Demos
+const demos = [{ url: "demo/s3-tracks/", title: "Add sample S3 music" }];
 ---
 
 <Page title="Diffuse">
···
 
         <Applet title="Supplements" list={[]}>Additional applets, such as scrobblers.</Applet>
       </div>
+    </section>
+
+    <!-- DEMOS -->
+    <section>
+      <h2 id="demos">Demos</h2>
+
+      <p>Just some utility web pages to help demo the system.</p>
+
+      <List items={demos} />
     </section>
 
     <!-- BUILD YOUR OWN -->

src/pages/input/s3/_applet.astro

···
 </style>
 
 <script>
+  import type { Track } from "@applets/core/types.d.ts";
   import type { Tasks } from "@scripts/input/s3/worker";
-  import type { Track } from "@applets/core/types.d.ts";
+  import type { Bucket } from "@scripts/input/s3/types";
   import { register } from "@scripts/applet/common";
-  import { endpoint, inIframe, SharedWorker, transfer } from "@scripts/common";
+  import { endpoint, inIframe, transfer } from "@scripts/common";
   import manifest from "./_manifest.json";
+  import { bucketId, loadBuckets, saveBuckets } from "@scripts/input/s3/common";
 
   ////////////////////////////////////////////
   // SETUP
···
     return await worker.resolve(args);
   };
 
-  const mount = async () => {};
+  const mount = async (bucket: Bucket) => {
+    // NOTE: This may, or may not, be a good idea.
+    const buckets = await loadBuckets();
+    const id = bucketId(bucket);
+
+    if (!buckets[id]) {
+      await saveBuckets({ ...buckets, [bucketId(bucket)]: bucket });
+    }
+  };
 
   const unmount = async () => {};
 

src/scripts/input/s3/worker.ts

···
     return list
       .filter((l) => isAudioFile(l.key))
       .map((l) => {
-        const cachedTrack = cache[bid][l.key];
+        const cachedTrack = cache[bid]?.[l.key];
 
         const id = cachedTrack?.id || crypto.randomUUID();
         const stats = cachedTrack?.stats;