feat: add demo

_config.ts

···
+import { builtinModules } from "node:module";
 import lume from "lume/mod.ts";
 
 import esbuild from "lume/plugins/esbuild.ts";

src/components/configurator/input/worker.js

···
     Object.keys(groups).map(async (scheme) => {
       const input = grabInput(scheme, ports);
 
+      console.log("🔮", scheme);
+
       if (!input) {
         return {
           [scheme]: {
             available: false,
             reason: "Unsupported scheme",
+            scheme,
             tracks: groups[scheme] ?? [],
           },
         };
···
 export async function list({ data, ports }) {
   const groups = await groupConsult({ data, ports });
 
-  Object.keys(ports).forEach((scheme) => {
-    if (!groups[scheme]) groups[scheme] = { available: true, tracks: [] };
-  });
-
-  const promises = Object.entries(groups).map(
-    async ([scheme, { available, tracks }]) => {
+  const promises = Object.values(groups).map(
+    async ({ available, scheme, tracks }) => {
       if (!available) return tracks;
 
       const input = grabInput(scheme, ports);

src/components/input/common.js

···
+import { base64url } from "iso-base/rfc4648";
+
+/**
+ * @param {string} scheme
+ * @param {string} groupId
+ */
+export async function groupKeyHash(scheme, groupId) {
+  const rawBytes = new TextEncoder().encode(`${scheme}://${groupId}`);
+  const hashedBytes = await crypto.subtle.digest("SHA-256", rawBytes);
+  return base64url.encode(new Uint8Array(hashedBytes));
+}
+
 /**
  * @param {string} filename
  */

src/components/input/opensubsonic/worker.js

···
   serverId,
   serversFromTracks,
 } from "./common.js";
+import { groupKeyHash } from "../common.js";
 
 /**
  * @import {Child, SubsonicAPI} from "subsonic-api"
···
 
       /** @type {ConsultGrouping} */
       const grouping = available
-        ? { available, tracks }
-        : { available, reason: "Server ping failed", tracks };
+        ? { available, scheme: SCHEME, tracks }
+        : { available, reason: "Server ping failed", scheme: SCHEME, tracks };
 
       return {
-        // key: `${SCHEME}:${serverId}`,
-        key: SCHEME,
+        key: await groupKeyHash(SCHEME, serverId),
         grouping,
       };
     },
···
   /** @type {Record<string, Record<string, Track>>} */
   const cache = {};
 
+  /** @type {Record<string, Server>} */
+  const servers = {};
+
   cachedTracks.forEach((t) => {
     const parsed = parseURI(t.uri);
     if (!parsed || !parsed.path) return;
 
-    const sid = serverId(parsed?.server);
+    const sid = serverId(parsed.server);
+    servers[sid] = parsed.server;
 
     cache[sid] ??= {};
     cache[sid][URI.unescapeComponent(parsed.path)] = t;
···
     return songs;
   }
 
-  const servers = await loadServers();
   const promises = Object.values(servers).map(async (server) => {
     const client = createClient(server);
     const sid = serverId(server);

src/components/input/s3/worker.js

···
-import { isAudioFile } from "@components/input/common.js";
+import { groupKeyHash, isAudioFile } from "@components/input/common.js";
 import {
   bucketId,
   bucketsFromTracks,
···
 import { saveBuckets } from "./common.js";
 
 /**
- * @import { InputActions as Actions } from "@components/input/types.d.ts";
+ * @import { InputActions as Actions, ConsultGrouping } from "@components/input/types.d.ts";
  * @import { Track } from "@definitions/types.d.ts"
  * @import { Bucket } from "./types.d.ts"
  */
···
   const promises = Object.entries(groups).map(
     async ([bucketId, { bucket, tracks }]) => {
       const available = await consultBucket(bucket);
+
+      /** @type {ConsultGrouping} */
       const grouping = available
-        ? { available, tracks }
-        : { available, reason: "Bucket unavailable", tracks };
+        ? { available, scheme: SCHEME, tracks }
+        : { available, reason: "Bucket unavailable", scheme: SCHEME, tracks };
 
       return {
-        key: `${SCHEME}:${bucketId}`,
+        key: await groupKeyHash(SCHEME, bucketId),
         grouping,
       };
     },
···
   const entries = (await Promise.all(promises)).map((
     entry,
   ) => [entry.key, entry.grouping]);
+
   return Object.fromEntries(entries);
 }
 
···
 export async function list(cachedTracks = []) {
   /** @type {Record<string, Record<string, Track>>} */
   const cache = {};
+
+  /** @type {Record<string, Bucket>} */
+  const buckets = {};
 
   cachedTracks.forEach((t) => {
     const parsed = parseURI(t.uri);
     if (!parsed) return;
 
-    const bid = bucketId(parsed?.bucket);
+    const bid = bucketId(parsed.bucket);
+    buckets[bid] = parsed.bucket;
 
     if (cache[bid]) {
       cache[bid][parsed.path] = t;
···
     }
   });
 
-  const buckets = await loadBuckets();
   const promises = Object.values(buckets).map(async (bucket) => {
     const client = createClient(bucket);
     const bid = bucketId(bucket);
···
     secretKey: atob("Z0hPQkdHRzU1aXc0a0RDbjdjWlRJYTVTUDRZWnpERkRzQnFCYWI4Mg=="),
   };
 
-  const uri = buildURI(bucket, "");
+  const uri = buildURI(bucket);
 
   /** @type {Track} */
   const track = {

src/components/input/types.d.ts

···
   | { supported: true; consult: "undetermined" | boolean };
 
 export type ConsultGrouping =
-  | { available: false; reason: string; tracks: Track[] }
-  | { available: true; tracks: Track[] };
+  | { available: false; reason: string; scheme: string; tracks: Track[] }
+  | { available: true; scheme: string; tracks: Track[] };
 
 export type GroupConsult = Record<string, ConsultGrouping>;
 

src/components/orchestrator/process-tracks/element.js

···
     await customElements.whenDefined(output.localName);
 
     // Process whenever tracks are initially loaded
-    this.effect(() => {
-      const state = output.tracks.state();
-      if (state !== "loaded") return;
+    if (this.hasAttribute("process-when-ready")) {
+      this.effect(() => {
+        const state = output.tracks.state();
+        if (state !== "loaded") return;
 
-      untracked(() => this.process());
-    });
+        untracked(() => this.process());
+      });
+    }
   }
 
   // WORKERS

src/components/orchestrator/process-tracks/worker.js

···
      */
     async (promise, track) => {
       const acc = await promise;
-
       if (track.tags && track.stats) return [...acc, track];
 
       const resGet = await input.resolve({

src/components/processor/metadata/worker.js

···
      * @returns {Extraction}
      */
     (err) => {
-      console.warn("Metadata processor error:", err);
-      console.log(args);
-
+      console.warn("Metadata processor error:", err, args);
       return {};
     },
   );

src/index.vto

···
       <p>Diffuse is not your typical streaming service, you have to add sources of audio. This button here adds a few sample audio files.</p>
 
       <p>
-        <small>
-          <strong>TODO:</strong>
-          Implement button
-        </small>
+        <button id="add-sample-content">
+          <span>Add sample content</span>
+        </button>
       </p>
 
       <p>
···
 
 -->
 
+<di-s3></di-s3>
+<do-input></do-input>
+<do-output></do-output>
+<dp-metadata></dp-metadata>
 
+<do-process-tracks
+  input-selector="do-input"
+  output-selector="do-output"
+  metadata-processor-selector="dp-metadata"
+></do-process-tracks>
 
 <!--
 
 ###################################
-# COMPONENTS
+# SCRIPTS
 ###################################
 
 -->
+
+<script type="module">
+  import "./components/processor/metadata/element.js"
+
+  import * as S3Input from "./components/input/s3/element.js";
+  import * as Input from "./components/orchestrator/input/element.js";
+  import * as Output from "./components/orchestrator/output/element.js";
+  import * as ProcessTracks from "./components/orchestrator/process-tracks/element.js";
+
+  import { component } from "./common/element.js";
+
+  const s3Input = component(S3Input)
+  const output = component(Output)
+  const processTracks = component(ProcessTracks)
+
+  async function addSampleContent() {
+    const demo = await s3Input.demo()
+    const tracks = await output.tracks.collection()
+
+    await output.tracks.save([ ...tracks, demo.track ])
+    await processTracks.process()
+  }
+
+  document.querySelector("#add-sample-content")?.addEventListener("click", addSampleContent)
+</script>

src/styles/diffuse/colors.css

···
   --color-1: oklch(4.1308% 0.25306 109.22);
   --color-2: oklch(98.369% 0.01834 67.664);
   --color-3: oklch(26.787% 0.00168 186.65);
-  --accent: oklch(86.947% 0.25527 28.789);
+
+  /* Orange/Red */
+  /*--accent: oklch(86.947% 0.25527 28.789);*/
+  /*--accent: hsl(51, 100%, 50%);*/
+  /*--accent: #9e86b8;*/
+
+  /* Green */
+  /*--accent: hsl(120, 73.4%, 74.9%);*/
+  --accent: hsl(82, 39%, 30.2%);
   /*--accent: hsl(80, 60.5%, 34.7%);*/
+
+  /* Blue */
+  /*--accent: hsl(203, 92%, 75.5%);*/
 
   --bg-color: var(--color-2);
   --text-color: var(--color-1);
···
   :root {
     --bg-color: var(--color-3);
     --text-color: var(--color-2);
+
+    --accent: #9e86b8;
   }
 }

src/styles/diffuse/page.css

···
   text-underline-offset: 6px;
 }
 
+button {
+  background: var(--accent);
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--bg-color);
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  padding: var(--space-2xs) var(--space-xs);
+
+  & > span {
+    display: inline-block;
+    padding-top: 1px;
+  }
+}
+
 h1 {
   margin: var(--space-lg) 0 var(--space-xl);
   padding-top: var(--space-2xs);

src/themes/webamp/index.js

···
 import "@components/input/s3/element.js";
 import "@components/orchestrator/input/element.js";
 import "@components/orchestrator/output/element.js";
-// import "@components/orchestrator/process-tracks/element.js";
+import "@components/orchestrator/process-tracks/element.js";
 import "@components/orchestrator/queue-tracks/element.js";
 import "@components/orchestrator/search-tracks/element.js";
 import "@components/processor/metadata/element.js";

src/themes/webamp/index.vto

···
   input-selector="#input"
   metadata-processor-selector="dp-metadata"
   output-selector="#output"
+
+  process-when-ready
 ></do-process-tracks>
 
 <do-queue-tracks