From e98a3a5d4ab88ec6e2297479245adffcc24b4a74 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Wed, 11 Feb 2026 17:02:04 +0100
Subject: [PATCH] feat: save or fork facets

---
 deno.jsonc                                    |   1 +
 src/_components/facets.vto                    |   8 +-
 src/common/facets/utils.js                    |  80 +++++++++
 src/definitions/output/facet.json             |   8 +-
 src/definitions/output/theme.json             |   8 +-
 src/facets/index.js                           | 157 ++++++++++++++----
 src/facets/index.vto                          |  43 +++--
 src/facets/l/index.js                         |  26 ++-
 src/styles/diffuse/page.css                   |  32 +++-
 .../blur/artwork-controller/facet.html.txt    |  33 +++-
 src/themes/blur/artwork-controller/facet.js   |  24 ---
 src/themes/webamp/browser/facet.html.txt      |  28 +++-
 src/themes/webamp/browser/facet.js            |  19 ---
 .../webamp/configurators/input/facet.html.txt |  35 +++-
 .../webamp/configurators/input/facet.js       |  26 ---
 15 files changed, 371 insertions(+), 157 deletions(-)
 create mode 100644 src/common/facets/utils.js
 delete mode 100644 src/themes/blur/artwork-controller/facet.js
 delete mode 100644 src/themes/webamp/browser/facet.js
 delete mode 100644 src/themes/webamp/configurators/input/facet.js

diff --git a/deno.jsonc b/deno.jsonc
index 8e8b681a..88a1f8e3 100644
--- a/deno.jsonc
+++ b/deno.jsonc
@@ -13,6 +13,7 @@
     "@codemirror/lang-css": "npm:@codemirror/lang-css@^6.3.1",
     "@codemirror/lang-html": "npm:@codemirror/lang-html@^6.4.11",
     "@codemirror/lang-javascript": "npm:@codemirror/lang-javascript@^6.2.4",
+    "@fcrozatier/htmlcrunch": "jsr:@fcrozatier/htmlcrunch@^1.5.1",
     "@fry69/deep-diff": "jsr:@fry69/deep-diff@^0.1.10",
     "@js-temporal/polyfill": "npm:@js-temporal/polyfill@^0.5.1",
     "@kunkun/kkrpc": "jsr:@kunkun/kkrpc@^0.6.0",
diff --git a/src/_components/facets.vto b/src/_components/facets.vto
index b9ceadd7..4dabde0a 100644
--- a/src/_components/facets.vto
+++ b/src/_components/facets.vto
@@ -1,12 +1,12 @@
 <ul>
   {{ for item of items }}
-    <li>
+    <li data-url="{{item.url}}" data-name="{{item.title}}">
       <span>{{item.title}}</span>
       <div class="list-description">
         <div class="button-row">
-          <a href="facets/l/?url={{encodeURIComponent(item.url)}}" class="button">Try</a>
-          <!--<button style="background-color: var(--accent-twist-1);">Save</button>-->
-          <!--<button style="background-color: var(--accent-twist-2);">Fork</button>-->
+          <a href="facets/l/?url={{encodeURIComponent(item.url)}}" class="button button--bg-twist-1">Try</a>
+          <button rel="save" class="button--bg-twist-2">Save</button>
+          <button rel="fork" class="button--bg-twist-4">Fork</button>
         </div>
         <div>
           {{item.desc |> md(true)}}
diff --git a/src/common/facets/utils.js b/src/common/facets/utils.js
new file mode 100644
index 00000000..a4cd5465
--- /dev/null
+++ b/src/common/facets/utils.js
@@ -0,0 +1,80 @@
+// import { fragments, serializeFragments } from "@fcrozatier/htmlcrunch";
+
+import * as CID from "@atcute/cid";
+import { Temporal } from "@js-temporal/polyfill";
+
+/**
+ * @import {Facet} from "@definitions/types.d.ts"
+ */
+
+/**
+ * @param {{ name: string; url: string }} _args
+ * @param {{ fetchHTML: boolean }} options
+ */
+export async function facetFromUrl({ name, url }, { fetchHTML }) {
+  const html = fetchHTML
+    ? await fetch(url).then((res) => res.text())
+    : undefined;
+  const cid = html
+    ? await CID.create(0x55, new TextEncoder().encode(html))
+    : undefined;
+  const timestamp = Temporal.Now.zonedDateTimeISO().toString();
+
+  /** @type {Facet} */
+  const facet = {
+    $type: "sh.diffuse.output.facet",
+    createdAt: timestamp,
+    id: crypto.randomUUID(),
+    cid: cid ? CID.toString(cid) : undefined,
+    html,
+    name,
+    updatedAt: timestamp,
+    url,
+  };
+
+  return facet;
+}
+
+// /**
+//  * @param {string} html
+//  */
+// export async function inlineModuleScripts(html) {
+//   const docPromises = fragments.parseOrThrow(html).map(async (frag) => {
+//     if ("tagName" in frag && frag.tagName === "script") {
+//       const isModScript = frag.attributes.find((a) =>
+//         a[0] === "type"
+//       )?.[1] === "module";
+//       if (!isModScript) return frag;
+//
+//       const src = frag.attributes.find((a) => a[0] === "src")?.[1];
+//       if (!src) return frag;
+//
+//       const scriptContents = await fetch(src).then((r) => r.text()).catch(() =>
+//         null
+//       );
+//
+//       if (!scriptContents) return frag;
+//
+//       /**
+//        * @type {import("@fcrozatier/htmlcrunch").MTextNode}
+//        */
+//       const child = {
+//         kind: "TEXT",
+//         text: "\n" + scriptContents.split("\n").map((l) =>
+//           `  ${l}`
+//         ).join("\n") + "\n",
+//       };
+//
+//       return {
+//         ...frag,
+//         attributes: frag.attributes.filter((a) => a[0] !== "src"),
+//         children: [child],
+//       };
+//     }
+//
+//     return frag;
+//   });
+//
+//   const doc = await Promise.all(docPromises);
+//   return serializeFragments(doc);
+// }
diff --git a/src/definitions/output/facet.json b/src/definitions/output/facet.json
index 39d2e422..50a46a03 100644
--- a/src/definitions/output/facet.json
+++ b/src/definitions/output/facet.json
@@ -6,18 +6,24 @@
       "type": "record",
       "record": {
         "type": "object",
-        "required": ["cid", "html", "name"],
+        "required": ["id", "name"],
         "properties": {
+          "id": {
+            "type": "string",
+            "description": "A unique identifier"
+          },
           "cid": {
             "type": "string",
             "description": "A DASL CID representing the UTF8 encoded HTML (raw 0x55 codec)"
           },
+          "createdAt": { "type": "string", "format": "datetime" },
           "description": { "type": "string" },
           "html": {
             "type": "string",
             "description": "The UTF8 HTML string that makes up the facet"
           },
           "name": { "type": "string" },
+          "updatedAt": { "type": "string", "format": "datetime" },
           "url": {
             "type": "string",
             "description": "An optional URL that points at the facet; can be used to update this artifact"
diff --git a/src/definitions/output/theme.json b/src/definitions/output/theme.json
index 5e977b10..9eeebe46 100644
--- a/src/definitions/output/theme.json
+++ b/src/definitions/output/theme.json
@@ -6,18 +6,24 @@
       "type": "record",
       "record": {
         "type": "object",
-        "required": ["cid", "html", "name"],
+        "required": ["id", "name"],
         "properties": {
+          "id": {
+            "type": "string",
+            "description": "A unique identifier"
+          },
           "cid": {
             "type": "string",
             "description": "A DASL CID representing the UTF8 encoded HTML (raw 0x55 codec)"
           },
+          "createdAt": { "type": "string", "format": "datetime" },
           "description": { "type": "string" },
           "html": {
             "type": "string",
             "description": "The UTF8 HTML string that makes up the theme"
           },
           "name": { "type": "string" },
+          "updatedAt": { "type": "string", "format": "datetime" },
           "url": {
             "type": "string",
             "description": "An optional URL that points at the theme; can be used to update this artifact"
diff --git a/src/facets/index.js b/src/facets/index.js
index 86244deb..bf2459e1 100644
--- a/src/facets/index.js
+++ b/src/facets/index.js
@@ -1,4 +1,5 @@
 import * as CID from "@atcute/cid";
+import { Temporal } from "@js-temporal/polyfill";
 import { html, render } from "lit-html";
 
 import { basicSetup, EditorView } from "codemirror";
@@ -8,14 +9,56 @@ import { javascript as langJs } from "@codemirror/lang-javascript";
 import { autocompletion } from "@codemirror/autocomplete";
 
 import foundation from "@common/facets/foundation.js";
-import { effect } from "@common/signal.js";
+import { effect, signal } from "@common/signal.js";
+import { facetFromUrl } from "@common/facets/utils.js";
 
 /**
  * @import {Facet} from "@definitions/types.d.ts"
  */
 
 ////////////////////////////////////////////
-// LIST
+// SAVE & FORK
+////////////////////////////////////////////
+
+document.body.addEventListener(
+  "click",
+  /**
+   * @param {MouseEvent} event
+   */
+  async (event) => {
+    const target = /** @type {HTMLElement} */ (event.target);
+    const rel = target.getAttribute("rel");
+    if (!rel) return;
+
+    const url = target.closest("li")?.getAttribute("data-url");
+    if (!url) return;
+
+    const name = target.closest("li")?.getAttribute("data-name");
+    if (!name) return;
+
+    switch (rel) {
+      case "fork": {
+        const facet = await facetFromUrl({ name, url }, { fetchHTML: true });
+        editFacet(facet);
+        document.querySelector("#build")?.scrollIntoView();
+        break;
+      }
+      case "save": {
+        const facet = await facetFromUrl({ name, url }, { fetchHTML: false });
+        const out = foundation.orchestrator.output();
+
+        out.facets.save([
+          ...out.facets.collection(),
+          facet,
+        ]);
+        break;
+      }
+    }
+  },
+);
+
+////////////////////////////////////////////
+// YOUR COLLECTION
 ////////////////////////////////////////////
 
 /** @type {HTMLElement | null} */
@@ -37,19 +80,38 @@ effect(() => {
             <li style="margin-bottom: var(--space-2xs)">
               <span>${c.name}</span>
               <div class="list-description">
+                <div style="margin-bottom: var(--space-2xs)">
+                  ${c.url && !c.html
+                    ? html`
+                      <span class="with-icon">
+                        <i class="ph-fill ph-binoculars"></i>
+                        <span>Tracking the original <a href="${c
+                          .url}">URL</a></span>
+                      </span>
+                    `
+                    : html`
+                      <span class="with-icon">
+                        <i class="ph-fill ph-code"></i>
+                        <span>Custom code</span>
+                      </span>
+                    `}
+                </div>
                 <div class="button-row">
-                  <a href="facets/l/?cid=${c.cid}" class="button">Open</a>
+                  <a href="facets/l/?id=${c.id}" class="button">Open</a>
+                  <button
+                    style="background-color: var(--accent-twist-4);"
+                    @click="${() => editFacet(c)}"
+                  >
+                    Edit
+                  </button>
                   <button
                     style="background-color: var(--accent-twist-2);"
                     @click="${deleteFacet({
-                      cid: c.cid,
-                      name: c.name,
+                      id: c.id,
                     })}"
                   >
                     Delete
                   </button>
-                  <!--<button style="background-color: var(--accent-twist-1);">Save</button>-->
-                  <!--<button style="background-color: var(--accent-twist-2);">Fork</button>-->
                 </div>
               </div>
             </li>
@@ -73,17 +135,15 @@ const emptyFacetsList = html`
 `;
 
 /**
- * @param {{ cid: string; name: string }} _
+ * @param {{ id: string }} _
  */
-function deleteFacet({ cid, name }) {
+function deleteFacet({ id }) {
   return () => {
     const c = confirm("Are you sure you want to delete this facet?");
     if (!c) return;
 
     output.facets.save(
-      output.facets.collection().filter((c) =>
-        !(c.name === name && c.cid === cid)
-      ),
+      output.facets.collection().filter((c) => !(c.id === id)),
     );
   };
 }
@@ -92,6 +152,8 @@ function deleteFacet({ cid, name }) {
 // BUILD
 ////////////////////////////////////////////
 
+const $editingFacet = signal(/** @type {Facet | null} */ (null));
+
 // Code editor
 const editorContainer = document.body.querySelector("#html-input-container");
 if (!editorContainer) throw new Error("Editor container not found");
@@ -155,43 +217,70 @@ async function onBuildSubmit(event) {
   const name = nameEl?.value ?? "nameless";
 
   /** @type {Facet} */
-  const facet = {
-    $type: "sh.diffuse.output.facet",
-    cid: CID.toString(cid),
-    html,
-    name,
-  };
+  const facet = $editingFacet.value
+    ? {
+      ...$editingFacet.value,
+      cid: CID.toString(cid),
+      html,
+      name,
+    }
+    : {
+      $type: "sh.diffuse.output.facet",
+      id: crypto.randomUUID(),
+      cid: CID.toString(cid),
+      html,
+      name,
+    };
 
   switch (/** @type {any} */ (event).submitter.name) {
-    case "load-example": {
-      /** @type {HTMLSelectElement | null} */
-      const selected = document.body.querySelector("#example-select");
-
-      if (selected?.value) {
-        const text = await fetch(selected.value).then((r) => r.text());
-
-        editor.dispatch({
-          changes: { from: 0, to: editor.state.doc.length, insert: text },
-        });
-      }
-      break;
-    }
     case "save":
       await saveFacet(facet);
       break;
     case "save+open":
       await saveFacet(facet);
-      window.open(`./facets/l/?cid=${facet.cid}`, "blank");
+      globalThis.open(`./facets/l/?cid=${facet.cid}`, "blank");
       break;
   }
 }
 
+/**
+ * @param {Facet} ogFacet
+ */
+async function editFacet(ogFacet) {
+  const facet = { ...ogFacet };
+  const nameEl = /** @type {HTMLInputElement | null} */ (document.querySelector(
+    "#name-input",
+  ));
+
+  if (!nameEl) return;
+
+  // Make sure HTML is loaded
+  if (!facet.html && facet.url) {
+    const html = await fetch(facet.url).then((res) => res.text());
+    const cid = await CID.create(0x55, new TextEncoder().encode(html));
+
+    facet.html = html;
+    facet.cid = CID.toString(cid);
+  }
+
+  $editingFacet.value = facet;
+  nameEl.value = facet.name;
+
+  editor.dispatch({
+    changes: { from: 0, to: editor.state.doc.length, insert: facet.html },
+  });
+}
+
 /**
  * @param {Facet} facet
  */
 async function saveFacet(facet) {
   const col = output.facets.collection();
-  const colWithoutName = col.filter((c) => c.name !== facet.name);
+  const colWithoutId = col.filter((c) => c.id !== facet.id);
+  const timestamp = Temporal.Now.zonedDateTimeISO().toString();
 
-  await output.facets.save([...colWithoutName, facet]);
+  await output.facets.save([...colWithoutId, {
+    ...facet,
+    updatedAt: timestamp,
+  }]);
 }
diff --git a/src/facets/index.vto b/src/facets/index.vto
index 63da34cf..c6f00e54 100644
--- a/src/facets/index.vto
+++ b/src/facets/index.vto
@@ -5,7 +5,6 @@ base: ../
 styles:
   - styles/base.css
   - styles/diffuse/page.css
-  - styles/vendor/phosphor/bold/style.css
   - styles/vendor/phosphor/fill/style.css
 
 scripts:
@@ -13,7 +12,7 @@ scripts:
 
 # FACETS
 
-facets:
+builtIn:
   - url: "themes/blur/artwork-controller/facet.html.txt"
     title: "Blur / Artwork controller"
     desc: >
@@ -26,6 +25,16 @@ facets:
     title: "Webamp / Input Configurator"
     desc: >
       Windows 98 styled input configurator where you can add music sources.
+
+examples:
+  - url: "facets/examples/now-playing.html.txt"
+    title: "Now playing"
+    desc: >
+      Shows what's currently set to "now playing" in the queue, along with a button to shift the queue to the next track.
+  - url: "facets/examples/generate-playlist.html.txt"
+    title: "Generate playlist"
+    desc: >
+      Make a list of what previously played in the queue.
 ---
 
 <header>
@@ -59,9 +68,7 @@ facets:
     <section class="flex">
       <h2 id="built-in">Built-in</h2>
 
-      <div style="margin-top: var(--space-lg);">
-        {{ await comp.facets({ items: facets }) }}
-      </div>
+      {{ await comp.facets({ items: builtIn }) }}
     </section>
 
     <section class="flex">
@@ -84,6 +91,12 @@ facets:
 
     <section class="flex">
       <h2 id="examples">Examples</h2>
+
+      <p>
+        Some simple examples to help you understand how to build your own facet. Fork them to load them into the code editor below (or save → edit).
+      </p>
+
+      {{ await comp.facets({ items: examples }) }}
     </section>
   </div>
 
@@ -108,31 +121,13 @@ facets:
         <p style="margin-top: 0">
           Your code here builds on the <a href="facets/#foundation">foundation</a> listed below, it'll be injected into a <code>&lt;div id="container"&gt;</code> element in the body.
         </p>
-        <input id="name-input" type="text" placeholder="Unique name" name="name" value="Unique name" required />
+        <input id="name-input" type="text" placeholder="Name" name="name" required />
         <p>
           <span class="button-row">
             <button name="save">Save</button>
             <button name="save+open">Save &amp; Open</button>
           </span>
         </p>
-        <p>
-          Browse examples:
-        </p>
-        <div>
-          <select id="example-select">
-            <button>
-              <selectedcontent></selectedcontent>
-            </button>
-
-            <option value="facets/examples/now-playing.html.txt" selected>Now playing & next queue item</option>
-            <option value="facets/examples/generate-playlist.html.txt">Generate playlist from queue</option>
-          </select>
-        </div>
-        <p>
-          <span class="button-row">
-            <button name="load-example">Load example</button>
-          </span>
-        </p>
       </div>
     </form>
   </section>
diff --git a/src/facets/l/index.js b/src/facets/l/index.js
index f63eb354..076e79ff 100644
--- a/src/facets/l/index.js
+++ b/src/facets/l/index.js
@@ -19,6 +19,7 @@ const output = foundation.orchestrator.output();
 
 const docUrl = new URL(document.location.href);
 
+const id = docUrl.searchParams.get("id");
 const cid = docUrl.searchParams.get("cid");
 const name = docUrl.searchParams.get("name");
 const url = docUrl.searchParams.get("url");
@@ -38,21 +39,19 @@ effect(async () => {
 
   let facet;
 
-  if (cid) {
+  if (id) {
+    facet = collection.find((c) => c.id === id);
+  } else if (cid) {
     facet = collection.find((c) => c.cid === cid);
   } else if (name) {
     facet = collection.find((c) => c.name === name);
   } else if (url) {
-    const html = await fetch(url).then((res) => res.text());
-    const cid = await CID.create(0x55, new TextEncoder().encode(html));
-    const name = "tryout";
-
     /** @type {Facet} */
     const c = {
       $type: "sh.diffuse.output.facet",
-      cid: CID.toString(cid),
-      html,
-      name,
+      id: crypto.randomUUID(),
+      name: "tryout",
+      url,
     };
 
     facet = c;
@@ -61,6 +60,15 @@ effect(async () => {
   // TODO: Message that facet was not found
   if (!facet) return;
 
+  // Make sure HTML is loaded
+  if (!facet.html && facet.url) {
+    const html = await fetch(facet.url).then((res) => res.text());
+    const cid = await CID.create(0x55, new TextEncoder().encode(html));
+
+    facet.html = html;
+    facet.cid = CID.toString(cid);
+  }
+
   loadIntoContainer(facet);
 });
 
@@ -72,7 +80,7 @@ function loadIntoContainer(facet) {
 
   const range = document.createRange();
   range.selectNode(container);
-  const documentFragment = range.createContextualFragment(facet.html);
+  const documentFragment = range.createContextualFragment(facet.html ?? "");
 
   container.innerHTML = "";
   container.append(documentFragment);
diff --git a/src/styles/diffuse/page.css b/src/styles/diffuse/page.css
index e7ad9830..89a8fe86 100644
--- a/src/styles/diffuse/page.css
+++ b/src/styles/diffuse/page.css
@@ -277,7 +277,8 @@ a {
 
 button,
 a.button {
-  background: var(--accent);
+  --button-bg-opacity: 0.6;
+  background: oklch(from var(--accent) l c h / var(--button-bg-opacity));
   border: 0;
   border-radius: var(--radius-md);
   color: var(--bg-color);
@@ -288,11 +289,36 @@ a.button {
   line-height: var(--leading-tight);
   padding: var(--space-2xs) var(--space-xs);
   transition-duration: 500ms;
-  transition-property: opacity;
+  transition-property: background-color opacity;
 
   &[disabled] {
+    --button-bg-opacity: 0.4;
     cursor: not-allowed;
-    opacity: 0.5;
+  }
+
+  &:hover:not([disabled]),
+  &:focus:not([disabled]) {
+    --button-bg-opacity: 1;
+  }
+
+  &.button--bg-twist-1 {
+    background-color: oklch(from var(--accent-twist-1) l c h / var(--button-bg-opacity));
+  }
+
+  &.button--bg-twist-2 {
+    background-color: oklch(from var(--accent-twist-2) l c h / var(--button-bg-opacity));
+  }
+
+  &.button--bg-twist-3 {
+    background-color: oklch(from var(--accent-twist-3) l c h / var(--button-bg-opacity));
+  }
+
+  &.button--bg-twist-4 {
+    background-color: oklch(from var(--accent-twist-4) l c h / var(--button-bg-opacity));
+  }
+
+  &.button--bg-twist-5 {
+    background-color: oklch(from var(--accent-twist-5) l c h / var(--button-bg-opacity));
   }
 
   & > span {
diff --git a/src/themes/blur/artwork-controller/facet.html.txt b/src/themes/blur/artwork-controller/facet.html.txt
index cc494409..a78f6755 100644
--- a/src/themes/blur/artwork-controller/facet.html.txt
+++ b/src/themes/blur/artwork-controller/facet.html.txt
@@ -1,7 +1,32 @@
 <style>
-  @import "styles/vendor/phosphor/bold/style.css";
-  @import "styles/vendor/phosphor/fill/style.css";
-  @import "styles/base.css";
+  @import "./styles/vendor/phosphor/bold/style.css";
+  @import "./styles/vendor/phosphor/fill/style.css";
+  @import "./styles/base.css";
 </style>
 
-<script type="module" src="themes/blur/artwork-controller/facet.js"></script>
+<script type="module">
+  import foundation from "./common/facets/foundation.js";
+  import ArtworkController from "./themes/blur/artwork-controller/element.js";
+
+  // Setup the prerequisite elements
+  foundation.features.fillQueueAutomatically();
+  foundation.features.playAudioFromQueue();
+  foundation.features.processInputs();
+
+  const aud = foundation.engine.audio();
+  const art = foundation.processor.artwork();
+  const inp = foundation.orchestrator.input();
+  const que = foundation.engine.queue();
+  const rse = foundation.engine.repeatShuffle();
+
+  // Controller
+  const dac = new ArtworkController();
+  dac.setAttribute("artwork-processor-selector", art.selector);
+  dac.setAttribute("audio-engine-selector", aud.selector);
+  dac.setAttribute("input-selector", inp.selector);
+  dac.setAttribute("queue-engine-selector", que.selector);
+  dac.setAttribute("repeat-shuffle-engine-selector", rse.selector);
+
+  // Add to DOM
+  document.body.append(dac);
+</script>
diff --git a/src/themes/blur/artwork-controller/facet.js b/src/themes/blur/artwork-controller/facet.js
deleted file mode 100644
index 03a29957..00000000
--- a/src/themes/blur/artwork-controller/facet.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import foundation from "@common/facets/foundation.js";
-import ArtworkController from "@themes/blur/artwork-controller/element.js";
-
-// Setup the prerequisite elements
-foundation.features.fillQueueAutomatically();
-foundation.features.playAudioFromQueue();
-foundation.features.processInputs();
-
-const aud = foundation.engine.audio();
-const art = foundation.processor.artwork();
-const inp = foundation.orchestrator.input();
-const que = foundation.engine.queue();
-const rse = foundation.engine.repeatShuffle();
-
-// Controller
-const dac = new ArtworkController();
-dac.setAttribute("artwork-processor-selector", art.selector);
-dac.setAttribute("audio-engine-selector", aud.selector);
-dac.setAttribute("input-selector", inp.selector);
-dac.setAttribute("queue-engine-selector", que.selector);
-dac.setAttribute("repeat-shuffle-engine-selector", rse.selector);
-
-// Add to DOM
-document.body.append(dac);
diff --git a/src/themes/webamp/browser/facet.html.txt b/src/themes/webamp/browser/facet.html.txt
index d151512d..3bffd440 100644
--- a/src/themes/webamp/browser/facet.html.txt
+++ b/src/themes/webamp/browser/facet.html.txt
@@ -18,9 +18,29 @@
 </div>
 
 <style>
-  @import "styles/vendor/98.css";
-  @import "themes/webamp/fonts.css";
-  @import "themes/webamp/facet.css";
+  @import "./styles/vendor/98.css";
+  @import "./themes/webamp/fonts.css";
+  @import "./themes/webamp/facet.css";
 </style>
 
-<script type="module" src="themes/webamp/browser/facet.js"></script>
+<script type="module">
+  import foundation from "./common/facets/foundation.js";
+  import BrowserElement from "./themes/webamp/browser/element.js";
+
+  foundation.features.fillQueueAutomatically();
+  foundation.features.processInputs();
+  foundation.features.searchThroughCollection();
+
+  const inp = foundation.orchestrator.input();
+  const out = foundation.orchestrator.output();
+  const que = foundation.engine.queue();
+  const sea = foundation.processor.search();
+
+  const el = new BrowserElement();
+  el.setAttribute("input-selector", inp.selector);
+  el.setAttribute("output-selector", out.selector);
+  el.setAttribute("queue-engine-selector", que.selector);
+  el.setAttribute("search-processor-selector", sea.selector);
+
+  document.querySelector("#placeholder")?.replaceWith(el);
+</script>
diff --git a/src/themes/webamp/browser/facet.js b/src/themes/webamp/browser/facet.js
deleted file mode 100644
index 6db28030..00000000
--- a/src/themes/webamp/browser/facet.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import foundation from "@common/facets/foundation.js";
-import BrowserElement from "@themes/webamp/browser/element.js";
-
-foundation.features.fillQueueAutomatically();
-foundation.features.processInputs();
-foundation.features.searchThroughCollection();
-
-const inp = foundation.orchestrator.input();
-const out = foundation.orchestrator.output();
-const que = foundation.engine.queue();
-const sea = foundation.processor.search();
-
-const el = new BrowserElement();
-el.setAttribute("input-selector", inp.selector);
-el.setAttribute("output-selector", out.selector);
-el.setAttribute("queue-engine-selector", que.selector);
-el.setAttribute("search-processor-selector", sea.selector);
-
-document.querySelector("#placeholder")?.replaceWith(el);
diff --git a/src/themes/webamp/configurators/input/facet.html.txt b/src/themes/webamp/configurators/input/facet.html.txt
index 8b726293..2484c4ed 100644
--- a/src/themes/webamp/configurators/input/facet.html.txt
+++ b/src/themes/webamp/configurators/input/facet.html.txt
@@ -18,9 +18,36 @@
 </div>
 
 <style>
-  @import "styles/vendor/98.css";
-  @import "themes/webamp/fonts.css";
-  @import "themes/webamp/facet.css";
+  @import "./styles/vendor/98.css";
+  @import "./themes/webamp/fonts.css";
+  @import "./themes/webamp/facet.css";
 </style>
 
-<script type="module" src="themes/webamp/configurators/input/facet.js"></script>
+<script type="module">
+  import foundation from "./common/facets/foundation.js";
+  import InputConfigElement from "./themes/webamp/configurators/input/element.js";
+  import { effect } from "./common/signal.js";
+
+  const inp = foundation.orchestrator.input();
+  const out = foundation.orchestrator.output();
+  const pro = foundation.orchestrator.processTracks({ disableWhenReady: true });
+  const sou = foundation.orchestrator.sources();
+
+  const el = new InputConfigElement();
+  el.setAttribute("input-selector", inp.selector);
+  el.setAttribute("output-selector", out.selector);
+  el.setAttribute("sources-orchestrator-selector", sou.selector);
+
+  document.querySelector("#placeholder")?.replaceWith(el);
+
+  // EFFECTS
+
+  let initEffect = false;
+
+  effect(() => {
+    const _trigger = sou.sources();
+    if (out.tracks.state() !== "loaded") return;
+    if (initEffect) pro.process();
+    initEffect = true;
+  });
+</script>
diff --git a/src/themes/webamp/configurators/input/facet.js b/src/themes/webamp/configurators/input/facet.js
deleted file mode 100644
index c707b733..00000000
--- a/src/themes/webamp/configurators/input/facet.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import foundation from "@common/facets/foundation.js";
-import InputConfigElement from "@themes/webamp/configurators/input/element.js";
-import { effect } from "@common/signal.js";
-
-const inp = foundation.orchestrator.input();
-const out = foundation.orchestrator.output();
-const pro = foundation.orchestrator.processTracks({ disableWhenReady: true });
-const sou = foundation.orchestrator.sources();
-
-const el = new InputConfigElement();
-el.setAttribute("input-selector", inp.selector);
-el.setAttribute("output-selector", out.selector);
-el.setAttribute("sources-orchestrator-selector", sou.selector);
-
-document.querySelector("#placeholder")?.replaceWith(el);
-
-// EFFECTS
-
-let initEffect = false;
-
-effect(() => {
-  const _trigger = sou.sources();
-  if (out.tracks.state() !== "loaded") return;
-  if (initEffect) pro.process();
-  initEffect = true;
-});
-- 
2.51.2