feat: facet kinds + load facet preludes

src/_components/facets/grid.vto

···
 <ul class="grid" style="margin-top: var(--space-lg);">
   {{ for index, item of items }}
-    <li class="grid-item" data-uri="{{ item.url |> facetOrThemeURI }}" data-name="{{item.title}}">
+    {{ set color = (() => {
+      switch (item.kind) {
+        case "prelude": return "var(--accent-twist-4)";
+        default: return "var(--accent-twist-2)";
+      }
+    })() }}
+
+    {{ set kind = (() => {
+      // return item.kind ?? "interactive"
+      switch (item.kind) {
+        case "prelude": return "feature";
+        default: return "interface";
+      }
+    })() }}
+
+    <li
+      class="grid-item"
+      data-active-color="{{color}}"
+      data-name="{{item.title}}"
+      data-uri="{{ item.url |> facetOrThemeURI }}"
+    >
       <div class="grid-item__contents">
         <div class="grid-item__title">
           <a href="{{ item.url |> facetLoaderURL }}" style="padding: var(--space-3xs) 0">
             {{item.title}}
           </a>
+          <span style="flex: 1"></span>
+          <span class="grid-item__kind" style="color: {{ color }};">{{ kind }}</span>
         </div>
         <div class="list-description">
           {{ item.desc |> md(true) }}

src/common/facets/category.js

···
+/**
+ * @import { Facet } from "~/definitions/types.d.ts";
+ */
+
+/**
+ * @param {Facet} facet
+ * @returns {string}
+ */
+export function color(facet) {
+  switch (facet.kind) {
+    case "prelude":
+      return "var(--accent-twist-4)";
+    default:
+      return "var(--accent-twist-2)";
+  }
+}
+
+/**
+ * @param {Facet} facet
+ * @returns {string}
+ */
+export function name(facet) {
+  // return facet.kind ?? "interactive";
+  switch (facet.kind) {
+    case "prelude":
+      return "feature";
+    default:
+      return "interface";
+  }
+}

src/common/facets/foundation.js

···
 }
 
 async function playAudioFromQueue() {
-  const [sc, a, q, ms, qa, sca] = await Promise.all([
-    // configurator
-    scrobbles(),
-
+  const [a, q, ms, qa, sca] = await Promise.all([
     // engine
     audio(),
     queue(),
···
   ]);
 
   return {
-    configurator: {
-      scrobbles: sc,
-    },
     engine: {
       audio: a,
       queue: q,

src/definitions/output/facet.json

···
             "type": "string",
             "description": "The UTF8 HTML string that makes up the facet"
           },
+          "kind": {
+            "type": "string",
+            "default": "interactive",
+            "enum": ["interactive", "prelude"],
+            "description": "A facet is by default interactive, but headless 'prelude' facets may also be created, these run before any main interactive facet is loaded."
+          },
           "name": { "type": "string" },
           "updatedAt": { "type": "string", "format": "datetime" },
           "uri": {

src/facets/build.vto

···
         <input id="name-input" type="text" placeholder="Name" name="name" required />
       </p>
       <p>
+        <select id="kind-input" name="kind">
+          <option value="interactive" selected>Interactive</option>
+          <option value="prelude">Prelude</option>
+        </select>
+      </p>
+      <p>
         <textarea id="description-input" placeholder="Description" name="description" rows="5"></textarea>
       </p>
       <p>
···
         {{- echo -}}
           import foundation from "common/facets/foundation.js"
         {{ /echo }}
+{{ echo -}}await foundation.configurator.scrobbles(){{- /echo }}
+
 {{ echo -}}await foundation.engine.audio(){{- /echo }}
 {{ echo -}}await foundation.engine.queue(){{- /echo }}
 {{ echo -}}await foundation.engine.repeatShuffle(){{- /echo }}
···
 {{ echo -}}await foundation.orchestrator.autoQueue(){{- /echo }}
 {{ echo -}}await foundation.orchestrator.favourites(){{- /echo }}
 {{ echo -}}await foundation.orchestrator.input(){{- /echo }}
+{{ echo -}}await foundation.orchestrator.mediaSession(){{- /echo }}
 {{ echo -}}await foundation.orchestrator.output(){{- /echo }}
 {{ echo -}}await foundation.orchestrator.queueAudio(){{- /echo }}
 {{ echo -}}await foundation.orchestrator.processTracks(){{- /echo }}
 {{ echo -}}await foundation.orchestrator.scopedTracks(){{- /echo }}
+{{ echo -}}await foundation.orchestrator.scrobbleAudio(){{- /echo }}
 {{ echo -}}await foundation.orchestrator.sources(){{- /echo }}
 
 {{ echo -}}await foundation.processor.artwork(){{- /echo }}

src/facets/common/build.js

···
     document.querySelector("#description-input")
   );
 
+  const kindEl = /** @type {HTMLSelectElement | null} */ (
+    document.querySelector("#kind-input")
+  );
+
   const html = editor.state.doc.toString();
   const cid = await CID.create(0x55, new TextEncoder().encode(html));
   const name = nameEl?.value ?? "nameless";
   const description = descriptionEl?.value ?? "";
+  const kind = /** @type {"interactive" | "prelude"} */ (kindEl?.value ?? "interactive");
 
   /** @type {Facet} */
   const facet = $editingFacet.value
···
       cid,
       description,
       html,
+      kind,
       name,
     }
     : {
···
       cid,
       description,
       html,
+      kind,
       name,
     };
 
···
     document.querySelector("#description-input")
   );
 
+  const kindEl = /** @type {HTMLSelectElement | null} */ (
+    document.querySelector("#kind-input")
+  );
+
   if (!nameEl) return;
 
   // Reset url — remove `id` param if not matching the facet
···
 
   $editingFacet.value = facet;
   nameEl.value = facet.name;
+
+  if (kindEl) {
+    kindEl.value = facet.kind ?? "interactive";
+  }
 
   if (descriptionEl) {
     descriptionEl.value = facet.description ?? "";

src/facets/common/grid.js

···
         ? "ph-fill ph-toggle-right"
         : "ph-fill ph-toggle-left";
       /** @type {HTMLElement} */ (icon).style.color = isActive
-        ? "var(--accent-twist-2)"
+        ? li.getAttribute("data-active-color") ?? "var(--accent-twist-2)"
         : "";
     }
   });

src/facets/common/you.js

···
 import { marked } from "marked";
 import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 
+import * as FacetCategory from "~/common/facets/category.js";
 import foundation from "~/common/facets/foundation.js";
 import { effect } from "~/common/signal.js";
 import { facetFromURI } from "~/common/facets/utils.js";
···
   const h = col.length
     ? html`
       <ul class="grid" style="margin: 0">
-        ${col.map((c, index) =>
-          keyed(
+        ${col.map((c, index) => {
+          const color = FacetCategory.color(c);
+          const kind = FacetCategory.name(c);
+
+          return keyed(
             c.id,
             html`
               <li class="grid-item">
                 <div class="grid-item__contents">
-                  <div>
+                  <div class="grid-item__title">
                     <a
                       href="facets/l/?id=${c
                         .id}"
···
                     >
                       ${c.name}
                     </a>
+                    <span class="grid-item__kind" style="color: ${color};"
+                    >${kind}</span>
                   </div>
                   <div class="list-description">
                     <div>
···
                 </div>
               </li>
             `,
-          )
-        )} ${ADD_FROM_URI_ITEM}
+          );
+        })} ${ADD_FROM_URI_ITEM}
       </ul>
     `
     : html`

src/facets/l/index.js

···
 import foundation from "~/common/facets/foundation.js";
 import * as CID from "~/common/cid.js";
-import { createLoader, renderError } from "~/common/loader.js";
+import * as Output from "~/common/output.js";
+import { createLoader, loadURI, renderError } from "~/common/loader.js";
 
+// Output element
 const output = await foundation.orchestrator.output();
 
+// Contaienr
+const container = /** @type {HTMLDivElement} */ (
+  document.querySelector("#container")
+);
+
+// Preludes
+const facets = await Output.data(output.facets);
+
+// Load
 createLoader({
   $type: "sh.diffuse.output.facet",
   label: "Facet",
   source: () => output.facets,
   async render(facet) {
-    const container = /** @type {HTMLDivElement} */ (
-      document.querySelector("#container")
-    );
-
     if (facet.cid) {
       const valid = await CID.verify(
         new TextEncoder().encode(facet.html ?? ""),
···
       }
     }
 
+    container.innerHTML = "";
+
     const range = document.createRange();
     range.selectNode(container);
     const documentFragment = range.createContextualFragment(facet.html ?? "");
 
-    container.innerHTML = "";
+    const preludes = facets
+      .filter((f) => f.kind === "prelude")
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    for (const prelude of preludes) {
+      const html = prelude.html ??
+        (prelude.uri ? await loadURI(prelude.uri) : "");
+      if (!html) continue;
+      const preludeFragment = range.createContextualFragment(html);
+      container.append(preludeFragment);
+    }
+
     container.append(documentFragment);
   },
 });

src/styles/diffuse/page.css

···
   width: 100%;
 }
 
+select {
+  appearance: none;
+  background: transparent;
+  border: 2px solid var(--form-color);
+  border-radius: var(--radius-md);
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--fs-sm);
+  padding: var(--space-2xs) var(--space-xs);
+  transition-duration: 250ms;
+  transition-property: border-color;
+  width: 100%;
+
+  option,
+  optgroup {
+    color: black;
+  }
+}
+
 textarea {
   padding: var(--space-xs);
   resize: none;
···
   .grid-item__contents {
     flex: 1;
     padding: var(--space-md);
+    position: relative;
   }
 
   .grid-item__menu {
···
     justify-content: center;
   }
 
+  .grid-item__kind {
+    border: 1.5px solid currentColor;
+    border-radius: 9999px;
+    display: inline-block;
+    font-size: var(--fs-2xs);
+    font-weight: 500;
+    padding: 1px var(--space-3xs);
+    vertical-align: middle;
+  }
+
   .grid-item__title {
     align-items: center;
     display: flex;
-    gap: var(--space-xs);
-    justify-content: space-between;
+    gap: var(--space-2xs);
   }
 }