feat: local file upload for ephemeral tracks

src/components/configurator/input/element.js

···
     this.resolve = proxy.resolve;
 
     this.cache = proxy.cache;
+    this.cacheBlob = proxy.cacheBlob;
     this.listCached = proxy.listCached;
     this.removeFromCache = proxy.removeFromCache;
   }

src/components/configurator/input/types.d.ts

···
 
 export type Actions = InputActions & {
   cache(uris: string[]): Promise<void>
+  cacheBlob(blob: Blob): Promise<string>
   listCached(): Promise<string[]>
   removeFromCache(uris: string[]): Promise<void>
 };

src/components/configurator/input/worker.js

···
 import * as IDB from "idb-keyval";
 import * as URI from "fast-uri";
+import * as Cid from "~/common/cid.js";
 
 import { groupTracksPerScheme, groupUrisPerScheme } from "~/common/utils.js";
 import { ostiary, rpc, workerProxy } from "~/common/worker.js";
···
 ////////////////////////////////////////////
 
 const CACHE_KEY_PREFIX = "diffuse/components/configurator/input/cache/";
-
-/** @type {Map<string, string>} */
-const blobUrls = new Map();
 
 ////////////////////////////////////////////
 // INPUT ACTIONS
···
  * @type {ActionsWithTunnel<Actions>['detach']}
  */
 export async function detach({ data, ports }) {
-  const cachedTracks = data.tracks;
-  const groups = groupTracks(cachedTracks, ports);
+  const currentTracks = data.tracks;
+  const groups = groupTracks(currentTracks, ports);
 
   const promises = Object.entries(groups).map(
     async ([scheme, tracksGroup]) => {
···
 export async function resolve({ data, ports }) {
   const uri = data.uri;
 
-  const cachedBlob =
-    /** @type {Blob | undefined} */ (await IDB.get(CACHE_KEY_PREFIX + uri));
-  if (cachedBlob) {
-    let blobUrl = blobUrls.get(uri);
-
-    if (!blobUrl) {
-      blobUrl = URL.createObjectURL(cachedBlob);
-      blobUrls.set(uri, blobUrl);
-    }
-
-    return { expiresAt: Infinity, url: blobUrl };
-  }
-
   const scheme = uri.split(":", 1)[0];
   const input = grabInput(scheme, ports);
   if (!input) return undefined;
···
 export async function removeFromCache({ data }) {
   const uris = data;
 
-  await Promise.all(uris.map(async (uri) => {
-    const blobUrl = blobUrls.get(uri);
-    if (blobUrl) {
-      URL.revokeObjectURL(blobUrl);
-      blobUrls.delete(uri);
-    }
-    await IDB.del(CACHE_KEY_PREFIX + uri);
-  }));
+  await Promise.all(uris.map((uri) => IDB.del(CACHE_KEY_PREFIX + uri)));
+}
+
+/**
+ * @type {ActionsWithTunnel<Actions>['cacheBlob']}
+ */
+export async function cacheBlob({ data }) {
+  const blob = data;
+  const buffer = await blob.arrayBuffer();
+  const bytes = new Uint8Array(buffer);
+  const cid = await Cid.create(0x55, bytes);
+  const uri = `ephemeral+cache://${cid}`;
+  if (await IDB.get(CACHE_KEY_PREFIX + uri) === undefined) {
+    await IDB.set(CACHE_KEY_PREFIX + uri, blob);
+  }
+  return uri;
 }
 
 ////////////////////////////////////////////
···
     resolve,
 
     cache,
+    cacheBlob,
     listCached,
     removeFromCache,
   });

src/components/input/ephemeral-cache/constants.js

···
+export const SCHEME = "ephemeral+cache";
+export const CACHE_KEY_PREFIX = "diffuse/components/configurator/input/cache/";

src/components/input/ephemeral-cache/element.js

···
+import { DiffuseElement } from "~/common/element.js";
+import { SCHEME } from "./constants.js";
+
+/**
+ * @import { InputActions, InputSchemeProvider } from "~/components/input/types.d.ts"
+ * @import { ProxiedActions } from "~/common/worker.d.ts"
+ * @import { Track } from "~/definitions/types.d.ts"
+ */
+
+////////////////////////////////////////////
+// ELEMENT
+////////////////////////////////////////////
+
+/**
+ * @implements {ProxiedActions<InputActions>}
+ * @implements {InputSchemeProvider}
+ */
+class EphemeralCacheInput extends DiffuseElement {
+  static NAME = "diffuse/input/ephemeral-cache";
+  static WORKER_URL = "components/input/ephemeral-cache/worker.js";
+
+  SCHEME = SCHEME;
+
+  constructor() {
+    super();
+
+    /** @type {ProxiedActions<InputActions>} */
+    const proxy = this.workerProxy();
+
+    this.artwork = proxy.artwork;
+    this.consult = proxy.consult;
+    this.detach = proxy.detach;
+    this.groupConsult = proxy.groupConsult;
+    this.list = proxy.list;
+    this.resolve = proxy.resolve;
+  }
+
+  // 🛠️
+
+  /** @param {Track[]} tracks */
+  sources(tracks) {
+    return tracks.map((t) => ({
+      label: t.uri,
+      uri: t.uri,
+    }));
+  }
+}
+
+export default EphemeralCacheInput;
+
+////////////////////////////////////////////
+// REGISTER
+////////////////////////////////////////////
+
+export const CLASS = EphemeralCacheInput;
+export const NAME = "di-ephemeral-cache";
+
+customElements.define(NAME, CLASS);

src/components/input/ephemeral-cache/worker.js

···
+import * as IDB from "idb-keyval";
+
+import { ostiary, rpc } from "~/common/worker.js";
+import { CACHE_KEY_PREFIX, SCHEME } from "./constants.js";
+
+/**
+ * @import { InputActions as Actions } from "~/components/input/types.d.ts"
+ * @import { Track } from "~/definitions/types.d.ts"
+ */
+
+////////////////////////////////////////////
+// STATE
+////////////////////////////////////////////
+
+/** @type {Map<string, string>} */
+const blobUrls = new Map();
+
+////////////////////////////////////////////
+// ACTIONS
+////////////////////////////////////////////
+
+/**
+ * @type {Actions['artwork']}
+ */
+export async function artwork(_uri) {
+  return null;
+}
+
+/**
+ * @type {Actions['consult']}
+ */
+export async function consult(uriOrScheme) {
+  if (!uriOrScheme.includes("://")) {
+    return { supported: true, consult: "undetermined" };
+  }
+
+  const cached = await IDB.get(CACHE_KEY_PREFIX + uriOrScheme);
+  return { supported: true, consult: cached !== undefined };
+}
+
+/**
+ * @type {Actions['detach']}
+ */
+export async function detach({ fileUriOrScheme, tracks }) {
+  if (!fileUriOrScheme.includes("://")) {
+    if (fileUriOrScheme === SCHEME) {
+      await removeBlobs(tracks.map((t) => t.uri));
+      return [];
+    }
+    return tracks;
+  }
+
+  const remaining = tracks.filter((t) => t.uri !== fileUriOrScheme);
+  await removeBlobs([fileUriOrScheme]);
+  return remaining;
+}
+
+/**
+ * @type {Actions['groupConsult']}
+ */
+export async function groupConsult(uris) {
+  const cached = await Promise.all(
+    uris.map((uri) => IDB.get(CACHE_KEY_PREFIX + uri)),
+  );
+
+  return {
+    [SCHEME]: {
+      available: true,
+      scheme: SCHEME,
+      uris: uris.filter((_, i) => cached[i] !== undefined),
+    },
+  };
+}
+
+/**
+ * @type {Actions['list']}
+ */
+export async function list(tracks) {
+  return tracks;
+}
+
+/**
+ * @type {Actions['resolve']}
+ */
+export async function resolve({ uri }) {
+  const blob = /** @type {Blob | undefined} */ (await IDB.get(CACHE_KEY_PREFIX + uri));
+  if (!blob) return undefined;
+
+  let blobUrl = blobUrls.get(uri);
+
+  if (!blobUrl) {
+    blobUrl = URL.createObjectURL(blob);
+    blobUrls.set(uri, blobUrl);
+  }
+
+  return { expiresAt: Infinity, url: blobUrl };
+}
+
+////////////////////////////////////////////
+// 🛠️
+////////////////////////////////////////////
+
+/**
+ * @param {string[]} uris
+ */
+async function removeBlobs(uris) {
+  await Promise.all(uris.map(async (uri) => {
+    const blobUrl = blobUrls.get(uri);
+    if (blobUrl) {
+      URL.revokeObjectURL(blobUrl);
+      blobUrls.delete(uri);
+    }
+    await IDB.del(CACHE_KEY_PREFIX + uri);
+  }));
+}
+
+////////////////////////////////////////////
+// ⚡️
+////////////////////////////////////////////
+
+ostiary((context) => {
+  rpc(context, {
+    artwork,
+    consult,
+    detach,
+    groupConsult,
+    list,
+    resolve,
+  });
+});

src/components/orchestrator/output/element.js

···
       <dtor-default
         id="do-output__output"
         output-selector="#do-output__dtor-initial-contents"
+        group="${ifDefined(group)}"
       ></dtor-default>
     `;
   }

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

···
         untracked(() => this.process());
       });
     }
+
   }
 
   // WORKERS

src/components/orchestrator/sources/element.js

···
           }
         } else {
           const dep = deps[scheme];
-          if (!dep) sources = [];
+          if (!dep) sources = tracks.map((t) => ({ label: t.uri, uri: t.uri }));
           else sources = dep.sources(tracks);
         }
 

src/components/transformer/output/refiner/default/element.js

···
 
     const base = this.base();
 
-    // Ephemeral signals
-    const ephemeralPlaylistItems = signal(/** @type {any[]} */ ([]));
-    const ephemeralTracks = signal(/** @type {any[]} */ ([]));
-
     // Restore stored ephemeral items
     IDB.get(IDB_KEY_PLAYLISTS).then((items) => {
-      if (items) ephemeralPlaylistItems.set(items);
+      if (items) this.#ephemeralPlaylistItems.set(items);
     });
 
     IDB.get(IDB_KEY_TRACKS).then((items) => {
-      if (items) ephemeralTracks.set(items);
+      if (items) this.#ephemeralTracks.set(items);
     });
 
     /** @type {OutputManagerDeputy} */
···
           if (col.state !== "loaded") return col;
           return {
             state: "loaded",
-            data: [...col.data, ...ephemeralPlaylistItems.get()],
+            data: [...col.data, ...this.#ephemeralPlaylistItems.get()],
           };
         }),
         save: async (newPlaylists) => {
···
           });
 
           await IDB.set(IDB_KEY_PLAYLISTS, ephemeral);
-          ephemeralPlaylistItems.set(ephemeral);
+          this.#ephemeralPlaylistItems.set(ephemeral);
 
           await base.playlistItems.save(filtered);
         },
···
           if (col.state !== "loaded") return col;
           return {
             state: "loaded",
-            data: [...col.data, ...ephemeralTracks.get()],
+            data: [...col.data, ...this.#ephemeralTracks.get()],
           };
         }),
         save: async (newTracks) => {
···
           });
 
           await IDB.set(IDB_KEY_TRACKS, ephemeral);
-          ephemeralTracks.set(ephemeral);
+          this.#ephemeralTracks.set(ephemeral);
 
           await base.tracks.save(filtered);
         },
···
     this.playlistItems = manager.playlistItems;
     this.tracks = manager.tracks;
     this.ready = manager.ready;
+  }
+
+  // SIGNALS
+
+  #ephemeralPlaylistItems = signal(/** @type {PlaylistItem[]} */ ([]));
+  #ephemeralTracks = signal(/** @type {Track[]} */ ([]));
+
+  // LIFECYCLE
+
+  /** @override */
+  connectedCallback() {
+    if (this.hasAttribute("group")) {
+      const actions = this.broadcast(IDB_KEY_TRACKS, {
+        getEphemeralPlaylistItems: {
+          strategy: "leaderOnly",
+          fn: this.#ephemeralPlaylistItems.get,
+        },
+        setEphemeralPlaylistItems: {
+          strategy: "replicate",
+          fn: this.#ephemeralPlaylistItems.set,
+        },
+        getEphemeralTracks: {
+          strategy: "leaderOnly",
+          fn: this.#ephemeralTracks.get,
+        },
+        setEphemeralTracks: {
+          strategy: "replicate",
+          fn: this.#ephemeralTracks.set,
+        },
+      });
+
+      if (actions) {
+        this.#ephemeralPlaylistItems.set = actions.setEphemeralPlaylistItems;
+        this.#ephemeralTracks.set = actions.setEphemeralTracks;
+
+        actions.getEphemeralPlaylistItems().then((items) => {
+          this.#ephemeralPlaylistItems.value = items;
+        });
+
+        actions.getEphemeralTracks().then((tracks) => {
+          this.#ephemeralTracks.value = tracks;
+        });
+      }
+    }
+
+    super.connectedCallback();
   }
 }
 

src/facets/connect/common.css

···
   flex-shrink: 0;
 }
 
+.dropzone {
+  align-items: center;
+  border: 2px dashed var(--wa-color-neutral-border-quiet);
+  border-radius: var(--wa-border-radius-m);
+  color: var(--wa-color-text-quiet);
+  display: flex;
+  flex-direction: column;
+  gap: var(--wa-space-xs);
+  font-size: var(--wa-font-size-s);
+  justify-content: center;
+  padding: var(--wa-space-l);
+  transition:
+    background-color 150ms,
+    border-color 150ms,
+    color 150ms;
+
+  &.dropzone--active {
+    background-color: var(--wa-color-surface-sunken);
+    border-color: var(--wa-color-brand-500);
+    color: var(--wa-color-text-normal);
+  }
+}
+
 [hidden] {
   display: none !important;
 }

src/facets/connect/local/index.inline.js

···
 import * as TID from "@atcute/tid";
-import { html } from "lit-html";
+import { html, nothing } from "lit-html";
 
 import * as Output from "~/common/output.js";
 import { SCHEME } from "~/components/input/local/constants.js";
···
 
   description: html`
     <p>Add local directories or files as audio input.</p>
+
+    <label class="dropzone" id="local-dropzone">
+      <input id="local-dropzone-input" type="file" multiple hidden />
+      <wa-icon library="phosphor/bold" name="upload-simple"></wa-icon>
+      <span>Drop or click to select files</span>
+    </label>
+
+    <wa-divider id="local-ephemeral-divider" hidden></wa-divider>
+    <div id="local-ephemeral-row" class="button-row" hidden>
+      <wa-button
+        id="local-clear-ephemeral-btn"
+        variant="danger"
+        appearance="outlined"
+        size="small"
+        style="width: 100%"
+      >
+        <wa-icon slot="start" library="phosphor/bold" name="trash"></wa-icon>
+        Clear files
+      </wa-button>
+    </div>
+
     ${supported
       ? html`
+        <wa-divider></wa-divider>
+
         <div class="button-row">
           <wa-button id="local-add-dir-btn" variant="neutral" appearance="filled">
             <wa-icon slot="start" library="phosphor/fill" name="folder-open"></wa-icon>
···
           </wa-button>
         </div>
       `
-      : html`
-        <wa-callout variant="warning">
-          Your browser does not support the File System Access API. Use a Chromium-based
-          browser to add local files.
-        </wa-callout>
-      `}
+      : nothing}
   `,
 
   formFields: html`
···
   .querySelector("#local-add-files-btn")
   ?.addEventListener("click", () => addFiles());
 
+document
+  .querySelector("#local-clear-ephemeral-btn")
+  ?.addEventListener("click", () => clearEphemeral());
+
+const dropzone = document.querySelector("#local-dropzone");
+const dropzoneInput =
+  /** @type {HTMLInputElement | null} */ (document.querySelector(
+    "#local-dropzone-input",
+  ));
+
+dropzoneInput?.addEventListener("change", async () => {
+  const files = Array.from(dropzoneInput.files ?? []);
+  dropzoneInput.value = "";
+  if (files.length === 0) return;
+  await cacheFiles(files);
+});
+
+dropzone?.addEventListener("dragover", (e) => {
+  e.preventDefault();
+  dropzone.classList.add("dropzone--active");
+});
+
+dropzone?.addEventListener("dragleave", () => {
+  dropzone.classList.remove("dropzone--active");
+});
+
+dropzone?.addEventListener("drop", async (e) => {
+  e.preventDefault();
+  dropzone.classList.remove("dropzone--active");
+
+  const dragEvent = /** @type {DragEvent} */ (e);
+  const items = Array.from(dragEvent.dataTransfer?.items ?? []);
+  const files = await collectFiles(items);
+  if (files.length === 0) return;
+
+  await cacheFiles(files);
+});
+
 ////////////////////////////////////////////
 // REACTIVE LIST
 ////////////////////////////////////////////
+
+const ephemeralDivider =
+  /** @type {HTMLElement | null} */ (document.querySelector(
+    "#local-ephemeral-divider",
+  ));
+const ephemeralRow =
+  /** @type {HTMLElement | null} */ (document.querySelector(
+    "#local-ephemeral-row",
+  ));
 
 effect(() => {
   const tracksCol = outputOrchestrator.tracks.collection();
   const tracks = tracksCol.state === "loaded" ? tracksCol.data : [];
+  const hasEphemeral = tracks.some((t) =>
+    t.uri.startsWith("ephemeral+cache://")
+  );
+
+  if (ephemeralDivider) ephemeralDivider.hidden = !hasEphemeral;
+  if (ephemeralRow) ephemeralRow.hidden = !hasEphemeral;
+
   const entries = localInput?.sources(tracks) ?? [];
 
   setItems(
···
     if (detachedTracks) await outputOrchestrator.tracks.save(detachedTracks);
   } catch (err) {
     setError(err instanceof Error ? err.message : "Failed to remove entry");
+  }
+}
+
+async function clearEphemeral() {
+  setError(null);
+  try {
+    const tracks = await Output.data(outputOrchestrator.tracks);
+    const ephemeralUris = tracks
+      .filter((t) => t.uri.startsWith("ephemeral+cache://"))
+      .map((t) => t.uri);
+
+    await inputConfigurator.removeFromCache(ephemeralUris);
+    await outputOrchestrator.tracks.save(
+      tracks.filter((t) => !t.uri.startsWith("ephemeral+cache://")),
+    );
+  } catch (err) {
+    setError(
+      err instanceof Error ? err.message : "Failed to clear cached files",
+    );
   }
 }
 
···
     }
   }
 }
+
+/**
+ * @param {File[]} files
+ */
+async function cacheFiles(files) {
+  setError(null);
+  try {
+    const uris = await Promise.all(
+      files.map((file) => inputConfigurator.cacheBlob(file)),
+    );
+    const now = new Date().toISOString();
+    const existingTracks = await Output.data(outputOrchestrator.tracks);
+    const existingUris = new Set(existingTracks.map((t) => t.uri));
+    const newUris = uris.filter((uri) => !existingUris.has(uri));
+    await outputOrchestrator.tracks.save([
+      ...existingTracks,
+      ...newUris.map((uri) => {
+        /** @type {Track} */
+        const track = {
+          $type: "sh.diffuse.output.track",
+          id: TID.now(),
+          createdAt: now,
+          updatedAt: now,
+          ephemeral: true,
+          uri,
+        };
+        return track;
+      }),
+    ]);
+  } catch (err) {
+    setError(err instanceof Error ? err.message : "Failed to cache files");
+  }
+}
+
+/**
+ * @param {DataTransferItem[]} items
+ * @returns {Promise<File[]>}
+ */
+async function collectFiles(items) {
+  const files = /** @type {File[]} */ ([]);
+
+  await Promise.all(
+    items.map(async (item) => {
+      if (item.kind !== "file") return;
+
+      const entry = item.webkitGetAsEntry?.();
+      if (entry?.isDirectory) {
+        const dirFiles = await readDirectoryEntry(
+          /** @type {FileSystemDirectoryEntry} */ (entry),
+        );
+        files.push(...dirFiles);
+      } else {
+        const file = item.getAsFile();
+        if (file) files.push(file);
+      }
+    }),
+  );
+
+  return files;
+}
+
+/**
+ * @param {FileSystemDirectoryEntry} dir
+ * @returns {Promise<File[]>}
+ */
+async function readDirectoryEntry(dir) {
+  const reader = dir.createReader();
+
+  return new Promise((resolve, reject) => {
+    /** @type {File[]} */
+    const files = [];
+
+    const readBatch = () => {
+      reader.readEntries(async (entries) => {
+        if (entries.length === 0) {
+          resolve(files);
+          return;
+        }
+
+        await Promise.all(
+          entries.map(async (entry) => {
+            if (entry.isDirectory) {
+              const nested = await readDirectoryEntry(
+                /** @type {FileSystemDirectoryEntry} */ (entry),
+              );
+              files.push(...nested);
+            } else {
+              const file = await new Promise(
+                /** @param {(f: File) => void} res */
+                (res, rej) =>
+                  /** @type {FileSystemFileEntry} */ (entry).file(res, rej),
+              );
+              files.push(file);
+            }
+          }),
+        );
+
+        readBatch();
+      }, reject);
+    };
+
+    readBatch();
+  });
+}

src/facets/data/input-bundle/index.inline.js

···
 import foundation from "~/common/foundation.js";
 import { effect } from "~/common/signal.js";
 
+import { NAME as EPHEMERAL_CACHE_NAME } from "~/components/input/ephemeral-cache/element.js";
 import { NAME as HTTPS_NAME } from "~/components/input/https/element.js";
 import { NAME as ICECAST_NAME } from "~/components/input/icecast/element.js";
 import { NAME as LOCAL_NAME } from "~/components/input/local/element.js";
···
   const input = foundation.signals.configurator.input();
   if (!input) return;
 
+  ephemeralCache(input);
   https(input);
   icecast(input);
   local(input);
   opensubsonic(input);
   s3(input);
 });
+
+////////////////////////////////////////////
+// EPHEMERAL CACHE
+////////////////////////////////////////////
+
+/**
+ * @param {InputConfigurator} input
+ */
+export function ephemeralCache(input) {
+  input.append(document.createElement(EPHEMERAL_CACHE_NAME));
+}
 
 ////////////////////////////////////////////
 // HTTPS

tests/components/configurator/input/test.ts

···
     expect(result.supported).toBe(true);
   });
 
+  it("cacheBlob stores a blob and returns an ephemeral+cache:// URI", async () => {
+    const result = await testWeb(async () => {
+      const mod = await import(
+        "~/components/configurator/input/element.js"
+      );
+      const configurator = new mod.CLASS();
+      document.body.append(configurator);
+
+      const blob = new Blob(["audio data"], { type: "audio/mpeg" });
+      return configurator.cacheBlob(blob);
+    });
+
+    expect(result).toMatch(/^ephemeral\+cache:\/\//);
+  });
+
+  it("cacheBlob returns the same URI for identical blobs", async () => {
+    const [uri1, uri2] = await testWeb(async () => {
+      const mod = await import(
+        "~/components/configurator/input/element.js"
+      );
+      const configurator = new mod.CLASS();
+      document.body.append(configurator);
+
+      const uri1 = await configurator.cacheBlob(
+        new Blob(["same content"], { type: "audio/mpeg" }),
+      );
+      const uri2 = await configurator.cacheBlob(
+        new Blob(["same content"], { type: "audio/mpeg" }),
+      );
+      return [uri1, uri2];
+    });
+
+    expect(uri1).toBe(uri2);
+  });
+
+  it("cacheBlob returns different URIs for different blobs", async () => {
+    const [uri1, uri2] = await testWeb(async () => {
+      const mod = await import(
+        "~/components/configurator/input/element.js"
+      );
+      const configurator = new mod.CLASS();
+      document.body.append(configurator);
+
+      const uri1 = await configurator.cacheBlob(
+        new Blob(["content A"], { type: "audio/mpeg" }),
+      );
+      const uri2 = await configurator.cacheBlob(
+        new Blob(["content B"], { type: "audio/mpeg" }),
+      );
+      return [uri1, uri2];
+    });
+
+    expect(uri1).not.toBe(uri2);
+  });
+
+  it("removeFromCache deletes a previously cached blob", async () => {
+    const result = await testWeb(async () => {
+      const IDB = await import("idb-keyval");
+      const { CACHE_KEY_PREFIX } = await import(
+        "~/components/input/ephemeral-cache/constants.js"
+      );
+      const mod = await import(
+        "~/components/configurator/input/element.js"
+      );
+      const configurator = new mod.CLASS();
+      document.body.append(configurator);
+
+      const uri = await configurator.cacheBlob(
+        new Blob(["to be removed"], { type: "audio/mpeg" }),
+      );
+      await configurator.removeFromCache([uri]);
+
+      const stored = await IDB.get(CACHE_KEY_PREFIX + uri);
+      return stored ?? null;
+    });
+
+    expect(result).toBe(null);
+  });
+
   it("resolve with an HTTPS URI returns a url via the HTTPS input", async () => {
     const result = await testWeb(async () => {
       const mod = await import(

tests/components/input/ephemeral-cache/test.ts

···
+import { describe, it } from "@std/testing/bdd";
+import { expect } from "@std/expect";
+
+import { testWeb } from "@tests/common/index.ts";
+import type { Track } from "~/definitions/types.d.ts";
+
+describe("components/input/ephemeral-cache", () => {
+  it("has correct SCHEME property", async () => {
+    const scheme = await testWeb(async () => {
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+      return input.SCHEME;
+    });
+
+    expect(scheme).toBe("ephemeral+cache");
+  });
+
+  it("artwork returns null", async () => {
+    const result = await testWeb(async () => {
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+      return await input.artwork("ephemeral+cache://bafktest");
+    });
+
+    expect(result).toBe(null);
+  });
+
+  it("consult returns undetermined for scheme only", async () => {
+    const result = await testWeb(async () => {
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+      return await input.consult("ephemeral+cache");
+    });
+
+    expect(result.supported).toBe(true);
+    if (result.supported) {
+      expect(result.consult).toBe("undetermined");
+    }
+  });
+
+  it("consult returns false for an uncached URI", async () => {
+    const result = await testWeb(async () => {
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+      return await input.consult("ephemeral+cache://bafknotcached");
+    });
+
+    expect(result.supported).toBe(true);
+    if (result.supported) {
+      expect(result.consult).toBe(false);
+    }
+  });
+
+  it("consult returns true for a cached URI", async () => {
+    const result = await testWeb(async () => {
+      const IDB = await import("idb-keyval");
+      const { CACHE_KEY_PREFIX } = await import(
+        "~/components/input/ephemeral-cache/constants.js"
+      );
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+
+      const uri = "ephemeral+cache://bafkcacheduri";
+      await IDB.set(
+        CACHE_KEY_PREFIX + uri,
+        new Blob(["audio"], { type: "audio/mpeg" }),
+      );
+
+      const result = await input.consult(uri);
+      await IDB.del(CACHE_KEY_PREFIX + uri);
+      return result;
+    });
+
+    expect(result.supported).toBe(true);
+    if (result.supported) {
+      expect(result.consult).toBe(true);
+    }
+  });
+
+  it("groupConsult returns only cached URIs as available", async () => {
+    const result = await testWeb(async () => {
+      const IDB = await import("idb-keyval");
+      const { CACHE_KEY_PREFIX } = await import(
+        "~/components/input/ephemeral-cache/constants.js"
+      );
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+
+      const cachedUri = "ephemeral+cache://bafkgroupcached";
+      const uncachedUri = "ephemeral+cache://bafkgroupuncached";
+      await IDB.set(
+        CACHE_KEY_PREFIX + cachedUri,
+        new Blob(["audio"], { type: "audio/mpeg" }),
+      );
+
+      const result = await input.groupConsult([cachedUri, uncachedUri]);
+      await IDB.del(CACHE_KEY_PREFIX + cachedUri);
+      return result;
+    });
+
+    expect(result["ephemeral+cache"]?.available).toBe(true);
+    expect(result["ephemeral+cache"]?.uris).toEqual([
+      "ephemeral+cache://bafkgroupcached",
+    ]);
+  });
+
+  it("groupConsult with no cached URIs returns empty uris list", async () => {
+    const result = await testWeb(async () => {
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+
+      return await input.groupConsult([
+        "ephemeral+cache://bafkuncached1",
+        "ephemeral+cache://bafkuncached2",
+      ]);
+    });
+
+    expect(result["ephemeral+cache"]?.available).toBe(true);
+    expect(result["ephemeral+cache"]?.uris).toEqual([]);
+  });
+
+  it("resolve returns undefined for an uncached URI", async () => {
+    const result = await testWeb(async () => {
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+      const r = await input.resolve({ uri: "ephemeral+cache://bafknotcached" });
+      return r ?? null;
+    });
+
+    expect(result).toBe(null);
+  });
+
+  it("resolve returns a blob URL with Infinity expiry for a cached URI", async () => {
+    const result = await testWeb(async () => {
+      const IDB = await import("idb-keyval");
+      const { CACHE_KEY_PREFIX } = await import(
+        "~/components/input/ephemeral-cache/constants.js"
+      );
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+
+      const uri = "ephemeral+cache://bafkresolvetest";
+      await IDB.set(
+        CACHE_KEY_PREFIX + uri,
+        new Blob(["audio"], { type: "audio/mpeg" }),
+      );
+
+      const resolved = await input.resolve({ uri });
+      await IDB.del(CACHE_KEY_PREFIX + uri);
+      if (!resolved || !("url" in resolved)) return null;
+      return { url: resolved.url, neverExpires: resolved.expiresAt === Infinity };
+    });
+
+    expect(result).not.toBe(null);
+    if (result) {
+      expect(result.url).toMatch(/^blob:/);
+      expect(result.neverExpires).toBe(true);
+    }
+  });
+
+  it("resolve returns the same blob URL on repeated calls", async () => {
+    const [url1, url2] = await testWeb(async () => {
+      const IDB = await import("idb-keyval");
+      const { CACHE_KEY_PREFIX } = await import(
+        "~/components/input/ephemeral-cache/constants.js"
+      );
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+
+      const uri = "ephemeral+cache://bafkresolvetwice";
+      await IDB.set(
+        CACHE_KEY_PREFIX + uri,
+        new Blob(["audio"], { type: "audio/mpeg" }),
+      );
+
+      const r1 = await input.resolve({ uri });
+      const r2 = await input.resolve({ uri });
+      await IDB.del(CACHE_KEY_PREFIX + uri);
+      return [
+        r1 && "url" in r1 ? r1.url : null,
+        r2 && "url" in r2 ? r2.url : null,
+      ];
+    });
+
+    expect(url1).not.toBe(null);
+    expect(url1).toBe(url2);
+  });
+
+  it("list returns tracks unchanged", async () => {
+    const result = await testWeb(async () => {
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+
+      const tracks: Track[] = [
+        {
+          $type: "sh.diffuse.output.track",
+          id: "t1",
+          uri: "ephemeral+cache://bafktrack1",
+        },
+        {
+          $type: "sh.diffuse.output.track",
+          id: "t2",
+          uri: "ephemeral+cache://bafktrack2",
+        },
+      ];
+
+      return await input.list(tracks);
+    });
+
+    expect(result.map((t) => t.id)).toEqual(["t1", "t2"]);
+  });
+
+  it("detaches all tracks when given the scheme", async () => {
+    const remaining = await testWeb(async () => {
+      const IDB = await import("idb-keyval");
+      const { CACHE_KEY_PREFIX } = await import(
+        "~/components/input/ephemeral-cache/constants.js"
+      );
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+
+      const tracks: Track[] = [
+        {
+          $type: "sh.diffuse.output.track",
+          id: "t1",
+          uri: "ephemeral+cache://bafkdetach1",
+        },
+        {
+          $type: "sh.diffuse.output.track",
+          id: "t2",
+          uri: "ephemeral+cache://bafkdetach2",
+        },
+      ];
+
+      for (const t of tracks) {
+        await IDB.set(CACHE_KEY_PREFIX + t.uri, new Blob(["audio"]));
+      }
+
+      return await input.detach({ fileUriOrScheme: "ephemeral+cache", tracks });
+    });
+
+    expect(remaining.length).toBe(0);
+  });
+
+  it("detaches a specific track when given a URI", async () => {
+    const remaining = await testWeb(async () => {
+      const IDB = await import("idb-keyval");
+      const { CACHE_KEY_PREFIX } = await import(
+        "~/components/input/ephemeral-cache/constants.js"
+      );
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+
+      const tracks: Track[] = [
+        {
+          $type: "sh.diffuse.output.track",
+          id: "t1",
+          uri: "ephemeral+cache://bafkremove",
+        },
+        {
+          $type: "sh.diffuse.output.track",
+          id: "t2",
+          uri: "ephemeral+cache://bafkkeep",
+        },
+      ];
+
+      for (const t of tracks) {
+        await IDB.set(CACHE_KEY_PREFIX + t.uri, new Blob(["audio"]));
+      }
+
+      return await input.detach({
+        fileUriOrScheme: "ephemeral+cache://bafkremove",
+        tracks,
+      });
+    });
+
+    expect(remaining.length).toBe(1);
+    expect(remaining[0].id).toBe("t2");
+  });
+
+  it("detach with non-matching scheme returns tracks unchanged", async () => {
+    const remaining = await testWeb(async () => {
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+
+      const tracks: Track[] = [
+        {
+          $type: "sh.diffuse.output.track",
+          id: "t1",
+          uri: "ephemeral+cache://bafk1",
+        },
+        {
+          $type: "sh.diffuse.output.track",
+          id: "t2",
+          uri: "ephemeral+cache://bafk2",
+        },
+      ];
+
+      return await input.detach({ fileUriOrScheme: "https", tracks });
+    });
+
+    expect(remaining.map((t) => t.id)).toEqual(["t1", "t2"]);
+  });
+
+  it("sources returns tracks mapped by URI as label", async () => {
+    const sources = await testWeb(async () => {
+      const mod = await import(
+        "~/components/input/ephemeral-cache/element.js"
+      );
+      const input = new mod.CLASS();
+      document.body.append(input);
+
+      const tracks: Track[] = [
+        {
+          $type: "sh.diffuse.output.track",
+          id: "t1",
+          uri: "ephemeral+cache://bafksrc1",
+        },
+        {
+          $type: "sh.diffuse.output.track",
+          id: "t2",
+          uri: "ephemeral+cache://bafksrc2",
+          tags: { title: "My Song" },
+        },
+      ];
+
+      return input.sources(tracks);
+    });
+
+    expect(sources.length).toBe(2);
+    expect(sources[0].uri).toBe("ephemeral+cache://bafksrc1");
+    expect(sources[0].label).toBe("ephemeral+cache://bafksrc1");
+    // label is always the URI regardless of tags, to keep sources stable across processing
+    expect(sources[1].uri).toBe("ephemeral+cache://bafksrc2");
+    expect(sources[1].label).toBe("ephemeral+cache://bafksrc2");
+  });
+});