feat: add artwork/input component

src/components/artwork/input/element.js

···
+import { DiffuseElement, query } from "~/common/element.js";
+
+/**
+ * @import {ProxiedActions} from "~/common/worker.d.ts"
+ * @import {InputElement} from "~/components/input/types.d.ts"
+ * @import {Actions} from "~/components/artwork/types.d.ts"
+ */
+
+////////////////////////////////////////////
+// ELEMENT
+////////////////////////////////////////////
+
+/**
+ * @implements {ProxiedActions<Actions>}
+ */
+class InputArtwork extends DiffuseElement {
+  static NAME = "diffuse/artwork/input";
+  static WORKER_URL = "components/artwork/input/worker.js";
+
+  constructor() {
+    super();
+
+    /** @type {ProxiedActions<Actions>} */
+    const p = this.workerProxy();
+
+    this.get = p.get;
+  }
+
+  // LIFECYCLE
+
+  /** @override */
+  async connectedCallback() {
+    super.connectedCallback();
+
+    /** @type {InputElement} */
+    this.input = query(this, "input-selector");
+
+    await customElements.whenDefined(this.input.localName);
+  }
+
+  // WORKERS
+
+  /**
+   * @override
+   */
+  dependencies() {
+    if (!this.input) throw new Error("Input element not defined yet");
+    return { input: this.input };
+  }
+}
+
+export default InputArtwork;
+
+////////////////////////////////////////////
+// REGISTER
+////////////////////////////////////////////
+
+export const CLASS = InputArtwork;
+export const NAME = "da-input";
+
+customElements.define(NAME, InputArtwork);

src/components/artwork/input/worker.js

···
+import { ostiary, rpc, workerProxy } from "~/common/worker.js";
+
+/**
+ * @import {ActionsWithTunnel, ProxiedActions} from "~/common/worker.d.ts"
+ * @import {InputActions} from "~/components/input/types.d.ts"
+ * @import {Actions} from "~/components/artwork/types.d.ts"
+ */
+
+////////////////////////////////////////////
+// ACTIONS
+////////////////////////////////////////////
+
+/**
+ * @type {ActionsWithTunnel<Actions>['get']}
+ */
+export async function get({ data: track, ports }) {
+  /** @type {ProxiedActions<InputActions>} */
+  const input = workerProxy(() => {
+    ports.input.start();
+    return ports.input;
+  });
+
+  return await input.artwork(track.uri);
+}
+
+////////////////////////////////////////////
+// ⚡️
+////////////////////////////////////////////
+
+ostiary((context) => {
+  rpc(context, { get });
+});

src/components/configurator/input/element.js

···
     /** @type {ProxiedActions<Actions>} */
     const proxy = this.workerProxy();
 
+    this.artwork = proxy.artwork;
     this.consult = proxy.consult;
     this.detach = proxy.detach;
     this.groupConsult = proxy.groupConsult;

src/components/input/https/element.js

···
     /** @type {ProxiedActions<InputActions>} */
     this.proxy = this.workerProxy();
 
+    this.artwork = this.proxy.artwork;
     this.consult = this.proxy.consult;
     this.detach = this.proxy.detach;
     this.groupConsult = this.proxy.groupConsult;

src/components/input/icecast/element.js

···
     /** @type {ProxiedActions<InputActions>} */
     this.proxy = this.workerProxy();
 
+    this.artwork = this.proxy.artwork;
     this.consult = this.proxy.consult;
     this.detach = this.proxy.detach;
     this.groupConsult = this.proxy.groupConsult;

src/components/input/local/element.js

···
     /** @type {ProxiedActions<InputActions>} */
     this.proxy = this.workerProxy();
 
+    this.artwork = this.proxy.artwork;
     this.consult = this.proxy.consult;
     this.detach = this.proxy.detach;
     this.groupConsult = this.proxy.groupConsult;

src/components/input/opensubsonic/element.js

···
     /** @type {ProxiedActions<InputActions>} */
     this.proxy = this.workerProxy();
 
+    this.artwork = this.proxy.artwork;
     this.consult = this.proxy.consult;
     this.detach = this.proxy.detach;
     this.groupConsult = this.proxy.groupConsult;

src/components/input/s3/element.js

···
     /** @type {ProxiedActions<InputActions & { demo: () => Demo }>} */
     this.proxy = this.workerProxy();
 
+    this.artwork = this.proxy.artwork;
     this.consult = this.proxy.consult;
     this.detach = this.proxy.detach;
     this.groupConsult = this.proxy.groupConsult;

tests/components/artwork/input/test.ts

···
+import { describe, it } from "@std/testing/bdd";
+import { expect } from "@std/expect";
+
+import { testWeb } from "@tests/common/index.ts";
+
+describe("components/artwork/input", () => {
+  it("delegates to input.artwork and returns null when input has no artwork", async () => {
+    const result = await testWeb(async () => {
+      const HttpsInput = await import("~/components/input/https/element.js");
+      const InputArtwork = await import(
+        "~/components/artwork/input/element.js"
+      );
+
+      const input = new HttpsInput.CLASS();
+      input.id = "test-https-input-artwork";
+      document.body.append(input);
+
+      const artwork = new InputArtwork.CLASS();
+      artwork.setAttribute("input-selector", "#test-https-input-artwork");
+      document.body.append(artwork);
+
+      await customElements.whenDefined(input.localName);
+      await customElements.whenDefined(artwork.localName);
+
+      const blob = await fetch("http://localhost:3000/testing/sample/audio.mp3")
+        .then((r) => r.blob());
+      const blobUri = URL.createObjectURL(blob);
+
+      const result = await artwork.get({
+        $type: "sh.diffuse.output.track" as const,
+        id: "input-artwork-test",
+        uri: blobUri,
+      });
+
+      URL.revokeObjectURL(blobUri);
+
+      return result ?? null;
+    });
+
+    expect(result).toBe(null);
+  });
+});