feat: input configurator

src/pages/configurator/input/_applet.astro

···
+<main class="container">
+  <h1>Input configuration</h1>
+  <p>
+    Here you can add your audio from various places.
+    <br />Add audio from:
+  </p>
+  <div id="options">
+    <p>
+      <a href="../../input/native-fs/" class="with-icon">
+        <i class="iconoir-open-in-window"></i>
+        <strong>My device</strong>
+      </a>
+    </p>
+  </div>
+  <p>
+    <small
+      ><em><strong>More options coming soon!</strong><br />S3-compatible APIs, Dropbox, etc.</em
+      ></small
+    >
+  </p>
+</main>
+
+<div id="iframes"></div>
+
+<style>
+  #iframes {
+    display: none;
+  }
+</style>
+
+<script>
+  import { applets } from "@web-applets/sdk";
+
+  import type { Output, Track } from "@applets/core/types.d.ts";
+  import { applet } from "@scripts/theme";
+
+  ////////////////////////////////////////////
+  // SETUP
+  ////////////////////////////////////////////
+  const container = document.querySelector("#iframes") || undefined;
+
+  // Applet connections
+  const input = {
+    nativeFs: await applet("../../input/native-fs", { container }),
+  };
+
+  // Register applet
+  const context = applets.register<Output>();
+
+  ////////////////////////////////////////////
+  // ACTIONS
+  ////////////////////////////////////////////
+
+  const list = async (cachedTracks: Track[] = []) => {
+    const groups = cachedTracks.reduce(
+      (acc: Record<string, Track[]>, track: Track) => {
+        const scheme = track.uri.split(":", 1)[0];
+        return { ...acc, [scheme]: [...(acc.scheme || []), track] };
+      },
+      {
+        [input.nativeFs.manifest.input_properties.scheme]: [],
+      },
+    );
+
+    const promises = Object.entries(groups).map(
+      async ([scheme, cachedTracks]: [string, Track[]]) => {
+        switch (scheme) {
+          case input.nativeFs.manifest.input_properties.scheme:
+            await input.nativeFs.sendAction("list", cachedTracks);
+            return input.nativeFs.data;
+
+          default:
+            return cachedTracks;
+        }
+      },
+    );
+
+    const nested = await Promise.all(promises);
+    const tracks = nested.flat(1);
+
+    // TODO: Ideally promise returns data
+    context.data = tracks as any;
+
+    return tracks;
+  };
+
+  const resolve = async (fileUri: string) => {
+    const scheme = fileUri.split(":", 1)[0];
+
+    switch (scheme) {
+      case input.nativeFs.manifest.input_properties.scheme:
+        await input.nativeFs.sendAction("resolve", fileUri);
+        // TODO: Ideally promise returns data
+        context.data = input.nativeFs.data as any;
+        return input.nativeFs.data;
+
+      default:
+        // TODO: Ideally promise returns data
+        context.data = undefined as any;
+        return undefined;
+    }
+  };
+
+  context.setActionHandler("list", list);
+  context.setActionHandler("resolve", resolve);
+</script>

src/pages/configurator/input/_manifest.json

···
+{
+  "name": "diffuse/configurator/input",
+  "title": "Diffuse Configurator | Input",
+  "entrypoint": "index.html",
+  "actions": {
+    "list": {
+      "title": "List",
+      "description": "List tracks from all inputs.",
+      "params_schema": {
+        "type": "object",
+        "properties": {
+          "tracks": {
+            "type": "array",
+            "description": "A list of (cached) tracks",
+            "items": {
+              "type": "object"
+            }
+          }
+        }
+      }
+    },
+    "resolve": {
+      "title": "Resolve",
+      "description": "Potentially translates a track uri with a matching scheme into a URL pointing at the audio bytes. If it can be resolved that is, otherwise you'll get `undefined`.",
+      "params_schema": {
+        "type": "string",
+        "description": "The uri to resolve"
+      }
+    }
+  }
+}

src/pages/configurator/input/index.astro

···
+---
+import Layout from "@layouts/applet-pico-ui.astro";
+import Applet from "./_applet.astro";
+import { title } from "./_manifest.json";
+---
+
+<Layout title={title}>
+  <Applet />
+</Layout>

src/pages/index.astro

···
 // TODO
 
 // Applets
-const configurators = [{ url: "configurator/output/", title: "Output" }];
+const configurators = [
+  { url: "configurator/input/", title: "Input" },
+  { url: "configurator/output/", title: "Output" },
+];
 
 const engines = [
   { url: "engine/audio/", title: "Audio" },
···
         <Applet title="Configurators" list={configurators}>
           Applets that serve as an intermediate in order to make a particular kind of applet
           configurable. In other words, these allow for an applet to be swapped out with another
-          that takes the same actions and data output.
+          that takes the same, or a subset of the actions and data output.
         </Applet>
 
         <Applet title="Engines" list={engines}>

src/pages/input/native-fs/_applet.astro

···
 <main class="container">
-  <h1>Native File System Input</h1>
-  <p>Add music from your device.</p>
+  <h1>Native file system input</h1>
+  <p>
+    Add music from your device.
+    <br />Music added so far:
+  </p>
   <div id="directories">
     <p>
       <span class="with-icon">
···
   import * as IDB from "idb-keyval";
 
   import { applets } from "@web-applets/sdk";
-  import { computed, Signal, signal } from "spellcaster";
+  import { computed, effect, Signal, signal } from "spellcaster";
   import { repeat, tags, text } from "spellcaster/hyperscript.js";
   import { type FileSystemDirectoryHandle, showDirectoryPicker } from "native-file-system-adapter";
   import * as URI from "uri-js";
···
   ////////////////////////////////////////////
   const IDB_PREFIX = "@applets/input/native-fs";
   const IDB_HANDLES = `${IDB_PREFIX}/handles`;
-  const INPUT_SCHEME = manifest.input_properties.scheme;
+  const SCHEME = manifest.input_properties.scheme;
 
   const context = applets.register();
 
···
   };
 
   const Directories = computed(() => {
+    if (mounts().length === 0) {
+      return tags.p({ id: "directories" }, [
+        tags.small({}, [
+          tags.em({}, text("No audio added yet, click the button below to add some.")),
+        ]),
+      ]);
+    }
+
     return tags.ul({ id: "directories" }, repeat(dirList, Item));
   });
 
   // Add to DOM
-  document.getElementById("directories")?.replaceWith(Directories());
+  effect(() => {
+    document.getElementById("directories")?.replaceWith(Directories());
+  });
 
   ////////////////////////////////////////////
   // ACTIONS
   ////////////////////////////////////////////
-  const isAvailable = async (fileUri: string) => {
+  const consult = async (fileUriOrScheme: string) => {
     const isSupported = !!(globalThis as any).showDirectoryPicker;
     if (!isSupported) {
-      console.warn(
-        "`input/native-fs` is not supported on this platform, missing File System Access API.",
-      );
-      return false;
+      return { supported: false, reason: "File System Access API is not supported" };
+    }
+
+    if (!fileUriOrScheme.includes(":")) {
+      if (fileUriOrScheme !== SCHEME) return { supported: false, reason: "Scheme does not match" };
+      return { supported: true };
     }
 
     const handles = await fetchHandles();
-    const uri = URI.parse(fileUri);
-    return uri.host && !!handles[uri.host];
+    const uri = URI.parse(fileUriOrScheme);
+    if (uri.scheme !== SCHEME) return { supported: false, reason: "Scheme does not match" };
+    return { supported: true, consultation: uri.host && !!handles[uri.host] };
   };
 
   const list = async (cachedTracks: Track[] = []) => {
···
   };
 
   const resolve = async (fileUri: string) => {
+    const isSupported = !!(globalThis as any).showDirectoryPicker;
+    if (!isSupported) return undefined;
+
     const uri = URI.parse(fileUri);
-    if (uri.scheme !== INPUT_SCHEME) return undefined;
+    if (uri.scheme !== SCHEME) return undefined;
     if (!uri.host || !uri.path) return undefined;
 
     const handles = await fetchHandles();
···
     setMounts(await fetchHandlesList());
   };
 
-  context.setActionHandler("isAvailable", isAvailable);
+  context.setActionHandler("consult", consult);
   context.setActionHandler("list", list);
   context.setActionHandler("resolve", resolve);
   context.setActionHandler("mount", mount);
···
     for await (const item of dir.values()) {
       if (item.kind === "file" && isAudioFile(item.name)) {
         const uri = URI.serialize({
-          scheme: INPUT_SCHEME,
+          scheme: SCHEME,
           host: rootHandleId,
           path: `${path.length ? "/" + path.join("/") : ""}/${item.name}`,
         });

src/pages/input/native-fs/_manifest.json

···
     },
     "resolve": {
       "title": "Resolve",
-      "description": "Potentially translates a track uri with a matching scheme into a URL pointing at the audio bytes. If it can be resolved that is, otherwise you'll get `undefined`.",
+      "description": "Potentially translates a track uri with a matching scheme into a URL pointing at the audio bytes. If it can be resolved that is, otherwise you'll get `undefined`. Use the `consult` action to get a more detailed answer.",
       "params_schema": {
         "type": "string",
         "description": "The uri to resolve"

src/pages/orchestrator/input-cache/_applet.astro

···
+<script>
+  import { applets } from "@web-applets/sdk";
+
+  import type { Output, Track } from "@applets/core/types.d.ts";
+  import { applet } from "@scripts/theme";
+
+  ////////////////////////////////////////////
+  // SETUP
+  ////////////////////////////////////////////
+  // Register applet
+  const context = applets.register<Output>();
+
+  // Applet connections
+  const orchestrator = {
+    output: await applet("../../configurator/output", { context: self.parent }),
+  };
+
+  ////////////////////////////////////////////
+  // ACTIONS
+  ////////////////////////////////////////////
+
+  ////////////////////////////////////////////
+  // 🛠️
+  ////////////////////////////////////////////
+</script>

src/pages/orchestrator/input-cache/_manifest.json

···
+{
+  "name": "diffuse/orchestrator/input-cache",
+  "title": "Diffuse Orchestrator | Input cache",
+  "entrypoint": "index.html",
+  "actions": {}
+}

src/pages/orchestrator/input-cache/index.astro

···
+---
+import Layout from "@layouts/applet.astro";
+import Applet from "./_applet.astro";
+import { title } from "./_manifest.json";
+---
+
+<Layout title={title}>
+  <Applet />
+</Layout>

src/pages/themes/webamp/index.astro

···
     <main>
       <div class="desktop">
         <!-- INPUT -->
-        <a href="/input/native-fs/" target="_blank" class="button desktop__item">
-          <img src="/images/icons/windows_98/directory_open_cool-0.png" width="32" />
-          <label>Manage input (music)</label>
+        <a href="/configurator/input/" target="_blank" class="button desktop__item">
+          <img src="/images/icons/windows_98/cd_audio_cd_a-4.png" width="32" />
+          <label>Manage audio inputs</label>
         </a>
 
         <!-- OUTPUT -->
         <a href="/configurator/output/" target="_blank" class="button desktop__item">
           <img src="/images/icons/windows_98/directory_open_file_mydocs_2k-2.png" width="32" />
-          <label>Manage output (data)</label>
+          <label>Manage user data</label>
         </a>
       </div>
     </main>

src/scripts/theme.ts

···
   opts: {
     addSlashSuffix?: boolean;
     context?: Window;
-    container?: HTMLElement;
+    container?: HTMLElement | Element;
     id?: string;
     setHeight?: boolean;
   } = {},

src/scripts/themes/webamp/index.ts

···
 // 🗂️ Applets
 ////////////////////////////////////////////
 
-// const _configurator = {
-//   output: await applet("../../configurator/output"),
-// };
-
-const input = {
-  nativeFs: await applet("../../input/native-fs"),
+const configurator = {
+  input: await applet("../../configurator/input"),
 };
 
-const _orchestrator = {
-  output: await applet<Output>("../../orchestrator/output-management"),
-};
+// const orchestrator = {
+//   output: await applet<Output>("../../orchestrator/output-management"),
+// };
 
 ////////////////////////////////////////////
 // ⚡
 ////////////////////////////////////////////
 const amp = new Webamp({
-  filePickers: [
-    {
-      contextMenuName: "(applet) Mount directory",
-      filePicker: async () => {
-        try {
-          await input.nativeFs.sendAction("mount");
-        } catch (_err) {}
-        amp.setTracksToPlay(await listMountDirectories());
-        return [];
-      },
-      requiresNetwork: false,
-    },
-  ],
-
-  // Tracks
-  initialTracks: await listMountDirectories(),
+  initialTracks: await makeList(),
 });
 
 const ampNode = document.createElement("div");
···
 // 🛠️
 ////////////////////////////////////////////
 
-async function listMountDirectories() {
-  await input.nativeFs.sendAction("list");
-  const list = input.nativeFs.data as Track[];
+async function makeList() {
+  await configurator.input.sendAction("list");
+  const list = configurator.input.data as Track[];
 
   return list.reduce(async (acc: Promise<Array<{ url: string }>>, track: Track) => {
-    await input.nativeFs.sendAction("resolve", track.uri);
-    const url = input.nativeFs.data as string;
-    return [...(await acc), { url }];
+    await configurator.input.sendAction("resolve", track.uri);
+    const url = configurator.input.data as string | undefined;
+    if (url) return [...(await acc), { url }];
+    return await acc;
   }, Promise.resolve([]));
 }