feat: initial work for constituents loader

src/common/constituents/default.js

···
+import ArtworkProcessor from "@components/processor/artwork/element.js";
+import AudioEngine from "@components/engine/audio/element.js";
 import Queue from "@components/engine/queue/element.js";
 import InputOrchestrator from "@components/orchestrator/input/element.js";
 import OutputOrchestrator from "@components/orchestrator/output/element.js";
 import MetadataProcessor from "@components/processor/metadata/element.js";
 import ProcessTracksOrchestrator from "@components/orchestrator/process-tracks/element.js";
+import QueueAudioOrchestrator from "@components/orchestrator/queue-audio/element.js";
 import QueueTracksOrchestrator from "@components/orchestrator/queue-tracks/element.js";
 import RepeatShuffleOrchestrator from "@components/orchestrator/repeat-shuffle/element.js";
 import SearchProcessor from "@components/processor/search/element.js";
 import SearchTracksOrchestrator from "@components/orchestrator/search-tracks/element.js";
 import SourcesOrchestrator from "@components/orchestrator/sources/element.js";
 
+/**
+ * @import { DiffuseElement } from "@toko/diffuse/common/element.js";
+ */
+
 export const GROUP = "constituents";
 
 /**
  * Default config for constituents.
  */
 export function config() {
-  // Queue
-  const queue = new Queue();
-  queue.setAttribute("group", GROUP);
-
-  document.body.append(queue);
-
   // Input
   const input = new InputOrchestrator();
   input.setAttribute("group", GROUP);
···
 
   document.body.append(metadata);
 
-  const search = new SearchProcessor();
-  search.setAttribute("group", GROUP);
-
-  document.body.append(search);
-
   // Orchestrators
   const opt = new ProcessTracksOrchestrator();
   opt.setAttribute("group", GROUP);
···
   opt.setAttribute("metadata-processor-selector", metadata.selector);
   opt.toggleAttribute("process-when-ready");
 
-  const oqt = new QueueTracksOrchestrator();
-  oqt.setAttribute("group", GROUP);
-  oqt.setAttribute("input-selector", input.selector);
-  oqt.setAttribute("output-selector", output.selector);
-  oqt.setAttribute("queue-engine-selector", queue.selector);
+  document.body.append(opt);
+
+  // LAZY
+  // ----
+
+  // Engines
+  function audio() {
+    const a = new AudioEngine();
+    a.setAttribute("group", GROUP);
+
+    addToBodyIfNeeded(a);
+    return a;
+  }
+
+  function queue() {
+    const q = new Queue();
+    q.setAttribute("group", GROUP);
+
+    addToBodyIfNeeded(q);
+    return q;
+  }
+
+  // Processors
+  function artwork() {
+    const a = new ArtworkProcessor();
+    a.setAttribute("group", GROUP);
+
+    addToBodyIfNeeded(a);
+    return a;
+  }
+
+  function search() {
+    const s = new SearchProcessor();
+    s.setAttribute("group", GROUP);
+
+    addToBodyIfNeeded(s);
+    return s;
+  }
+
+  // Orchestrators
+  function queueAudio() {
+    const a = audio();
+    const q = queue();
+
+    const oqa = new QueueAudioOrchestrator();
+    oqa.setAttribute("group", GROUP);
+    oqa.setAttribute("audio-engine-selector", a.selector);
+    oqa.setAttribute("input-selector", input.selector);
+    oqa.setAttribute("queue-engine-selector", q.selector);
+
+    addToBodyIfNeeded(oqa);
+    return oqa;
+  }
+
+  function queueTracks() {
+    const q = queue();
+
+    const oqt = new QueueTracksOrchestrator();
+    oqt.setAttribute("group", GROUP);
+    oqt.setAttribute("input-selector", input.selector);
+    oqt.setAttribute("output-selector", output.selector);
+    oqt.setAttribute("queue-engine-selector", q.selector);
+
+    addToBodyIfNeeded(oqt);
+    return oqt;
+  }
 
-  const ors = new RepeatShuffleOrchestrator();
-  ors.setAttribute("group", GROUP);
-  ors.setAttribute("queue-engine-selector", queue.selector);
+  function repeatShuffle() {
+    const q = queue();
 
-  const ost = new SearchTracksOrchestrator();
-  ost.setAttribute("group", GROUP);
-  ost.setAttribute("input-selector", input.selector);
-  ost.setAttribute("output-selector", output.selector);
-  ost.setAttribute("search-processor-selector", search.selector);
+    const ors = new RepeatShuffleOrchestrator();
+    ors.setAttribute("group", GROUP);
+    ors.setAttribute("queue-engine-selector", q.selector);
 
-  const osr = new SourcesOrchestrator();
-  osr.setAttribute("group", GROUP);
-  osr.setAttribute("input-selector", input.selector);
-  osr.setAttribute("output-selector", output.selector);
+    addToBodyIfNeeded(ors);
+    return ors;
+  }
+
+  function searchTracks() {
+    const s = search();
+
+    const ost = new SearchTracksOrchestrator();
+    ost.setAttribute("group", GROUP);
+    ost.setAttribute("input-selector", input.selector);
+    ost.setAttribute("output-selector", output.selector);
+    ost.setAttribute("search-processor-selector", s.selector);
+
+    addToBodyIfNeeded(ost);
+    return ost;
+  }
+
+  function sources() {
+    const so = new SourcesOrchestrator();
+    so.setAttribute("group", GROUP);
+    so.setAttribute("input-selector", input.selector);
+    so.setAttribute("output-selector", output.selector);
 
-  document.body.append(opt, oqt, ors, ost, osr);
+    addToBodyIfNeeded(so);
+    return so;
+  }
 
   // Return elements
   return {
     GROUP,
 
-    engine: {
-      queue,
-    },
+    engine: {},
     orchestrator: {
       input,
       output,
       processTracks: opt,
-      queueTracks: oqt,
-      repeatShuffle: ors,
-      searchTracks: ost,
-      sources: osr,
     },
     processor: {
       metadata,
-      search,
+    },
+
+    lazy: {
+      engine: {
+        audio,
+        queue,
+      },
+      orchestrator: {
+        queueAudio,
+        queueTracks,
+        repeatShuffle,
+        searchTracks,
+        sources,
+      },
+      processor: {
+        artwork,
+        search,
+      },
     },
   };
 }
+
+/**
+ * @param {DiffuseElement} element
+ */
+export function addToBodyIfNeeded(element) {
+  const alreadyAdded = document.body.querySelector(element.selector);
+  if (!alreadyAdded) document.body.append(element);
+}

src/components/orchestrator/repeat-shuffle/element.js

···
   async connectedCallback() {
     // Broadcast if needed
     if (this.hasAttribute("group")) {
+      // TODO: Replicate state (repeat & shuffle)
       this.broadcast(this.nameWithGroup, {});
     }
 

src/index.vto

···
     title: "Blur / Artwork controller"
     desc: >
       Audio playback controller with artwork display.
-  - title: "Loader"
+  - url: "themes/loader/constituent/"
+    title: "Loader"
     desc: >
       **A constituent that loads other constituents!** Load a constituent from a URL, text snippet or from your user data output.
     todo: true
···
 # DEFINITIONS
 
 definitions:
+  - title: "Output / Constituent"
+    desc: >
+      Custom constituents to keep around.
+    todo: true
   - title: "Output / Favourites"
-    desc: "Indicate a user's favourite audio. Not a property of a track because tracks are associated with a specific source. Favourites may match with multiple tracks. Specified using the audio's title and artist."
+    desc: >
+      Indicate a user's favourite audio. Not a property of a track because tracks are associated with a specific source. Favourites may match with multiple tracks. Specified using the audio's title and artist.
     todo: true
   - title: "Output / Playlist"
-    desc: "Just like favourites, does not refer to specific tracks. Unlike favourites, must also specify the album. Can also be considered a collection which is basically an unordered playlist."
+    desc: >
+      Just like favourites, does not refer to specific tracks. Unlike favourites, must also specify the album. Can also be considered a collection which is basically an unordered playlist.
     todo: true
   - title: "Output / Progress"
-    desc: "Used to track progress of (long) audio playback."
+    desc: >
+      Used to track progress of (long) audio playback.
+    todo: true
+  - title: "Output / Theme"
+    desc: >
+      Custom theme to keep around.
     todo: true
   - title: "Output / Tracks"
-    desc: "Represents audio that can be played, or a placeholder for a source of tracks. Contains a URI that will resolve to the audio. This object may be cached if convenient."
+    desc: >
+      Represents audio that can be played, or a placeholder for a source of tracks. Contains a URI that will resolve to the audio. This object may be cached if convenient.
     url: "definitions/output/tracks.json"
 
 ---
 
 <header>
-  <h1>
-    {{ await comp.diffuse.logo() }}
-  </h1>
-  <p class="construct dither-mask">
-    Construct your audio player.
-  </p>
-  <p>
-    Diffuse is a collection of components and software that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital
-    audio listening experience for you.
-  </p>
-  <p style="align-items: center; display: flex; gap: var(--space-2xs); opacity: 0.55;">
-    <i class="ph-fill ph-crane"></i>
-    <strong style="font-weight: 700;">WORK IN PROGRESS</strong>
-  </p>
-  <ul class="table-of-contents">
-    <li><a href="#usage">Usage</a></li>
-    <li><a href="#demo">Demo</a></li>
-    <li><a href="#themes">Themes</a></li>
-    <li><a href="#constituents">Constituents</a></li>
-    <li><a href="#take-control">Take control</a></li>
-    <li><a href="#elements">Elements</a></li>
-    <li><a href="#definitions">Definitions</a></li>
-  </ul>
-  <p>
-    <small>Built by <a href="https://tokono.ma">tokono.ma</a></small>
-  </p>
+  <div>
+    <h1 class="diffuse-logo">
+      {{ await comp.diffuse.logo() }}
+    </h1>
+    <p class="construct dither-mask">
+      Construct your audio player.
+    </p>
+    <p>
+      Diffuse is a collection of components and software that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital
+      audio listening experience for you.
+    </p>
+    <p style="align-items: center; display: flex; gap: var(--space-2xs); opacity: 0.55;">
+      <i class="ph-fill ph-crane"></i>
+      <strong style="font-weight: 700;">WORK IN PROGRESS</strong>
+    </p>
+    <ul class="table-of-contents">
+      <li><a href="#usage">Usage</a></li>
+      <li><a href="#demo">Demo</a></li>
+      <li><a href="#themes">Themes</a></li>
+      <li><a href="#constituents">Constituents</a></li>
+      <li><a href="#take-control">Take control</a></li>
+      <li><a href="#elements">Elements</a></li>
+      <li><a href="#definitions">Definitions</a></li>
+    </ul>
+    <p>
+      <small>Built by <a href="https://tokono.ma">tokono.ma</a></small>
+    </p>
+  </div>
+  <div class="dither-mask filler"></div>
 </header>
 <main>
   <div class="columns">

src/styles/base.css

···
 @import "./reset.css";
 @import "./variables.css";
-@import "./fonts.css";
+@import "./font-faces.css";
 @import "./animations.css";
 
 @import "./diffuse/colors.css";

src/styles/diffuse/fonts.css

···
     font-optical-sizing: auto;
   }
 }
+
+.monospace-font,
+code {
+  font-family: CommitMonoVariable, "Commit Mono", monospace;
+}

src/styles/diffuse/page.css

···
   scroll-margin-top: var(--space-md);
 }
 
+/**
+ * Containers
+ */
+
+p,
+ul,
+ol {
+  margin: var(--space-sm) 0;
+  max-width: var(--container-sm);
+}
+
+header {
+  display: flex;
+  gap: var(--space-lg);
+}
+
 header,
 main {
-  margin: var(--space-md) var(--space-lg);
+  margin: var(--space-md) auto;
+  max-width: var(--container-7xl);
+  padding: 0 var(--space-lg);
 }
 
-a {
-  color: inherit;
-  text-underline-offset: 6px;
+main {
+  margin-bottom: var(--space-lg);
 }
 
-button {
-  background: var(--accent);
-  border: 0;
-  border-radius: var(--radius-md);
-  color: var(--bg-color);
-  cursor: pointer;
-  font-family: inherit;
-  font-weight: 500;
-  line-height: var(--leading-tight);
-  padding: var(--space-2xs) var(--space-xs);
-  transition-duration: 500ms;
-  transition-property: opacity;
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 var(--space-3xl);
+}
+
+ul.columns {
+  list-style: none;
+  padding: 0;
+  max-width: 100%;
+
+  li {
+    margin-bottom: var(--space-xl);
+  }
 
-  &[disabled] {
-    opacity: 0.5;
+  li::marker {
+    content: none;
   }
 
-  & > span {
-    align-items: center;
-    display: inline-flex;
-    gap: var(--space-3xs);
-    padding-top: 1px;
+  li i.ph-fill {
+    opacity: 0.4;
   }
 }
 
-h1 {
-  margin: var(--space-lg) 0 var(--space-xl);
-  padding-top: var(--space-2xs);
+.filler {
+  background: oklch(from var(--accent) l c h / 0.2);
+  flex: 1;
 }
 
-h1 svg {
-  fill: oklch(from var(--bg-color) calc(l - 0.5) c h);
-  opacity: 0.2;
-  width: 4.25em;
+.flex {
+  flex: 1;
+  margin-bottom: var(--space-xs);
+  min-width: var(--container-3xs);
+}
+
+/**
+ * Forms
+ */
 
-  @media (prefers-color-scheme: dark) {
-    & {
-      fill: var(--text-color);
-      opacity: 0.25;
-    }
-  }
+textarea {
+  background: transparent;
+  border: 3px solid oklch(from currentColor l c h / 0.25);
+  border-radius: var(--radius-md);
+  color: inherit;
+  font-size: var(--fs-sm);
+  height: var(--container-xs);
+  padding: var(--space-xs);
+  resize: none;
+  width: 100%;
+}
+
+/**
+ * Headers
+ */
+
+.construct {
+  color: var(--accent);
+  font-size: var(--fs-3xl);
+  font-weight: 900;
+  image-rendering: pixelated;
+  letter-spacing: -0.0125em;
+  line-height: 0.775em;
+  line-height: 1.05cap;
+  margin-bottom: var(--space-md);
+  max-width: var(--container-xl);
+  text-transform: uppercase;
 }
 
 h2 {
···
   margin-top: var(--space-md);
 }
 
-ul,
-ol {
-  padding-left: var(--space-md);
+/**
+ * Inline
+ */
+
+a {
+  color: inherit;
+  text-underline-offset: 6px;
 }
 
-p,
-ul,
-ol {
-  margin: var(--space-sm) 0;
-  max-width: var(--container-sm);
+button {
+  background: var(--accent);
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--bg-color);
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  padding: var(--space-2xs) var(--space-xs);
+  transition-duration: 500ms;
+  transition-property: opacity;
+
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  & > span {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--space-3xs);
+    padding-top: 1px;
+  }
 }
 
 small {
   font-size: var(--fs-xs);
 }
 
-ul li::marker {
-  color: oklch(from currentColor l c h / 0.4);
-  content: "◦  ";
+.button-row {
+  display: inline-flex;
+  gap: var(--space-2xs);
 }
 
-.columns {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0 var(--space-3xl);
+.todo {
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  opacity: 0.4;
 }
 
-ul.columns {
-  list-style: none;
-  padding: 0;
-  max-width: 100%;
-
-  li {
-    margin-bottom: var(--space-xl);
-  }
-
-  li::marker {
-    content: none;
-  }
-
-  li i.ph-fill {
-    opacity: 0.4;
-  }
+.with-icon {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-3xs);
 }
 
-.construct {
-  color: var(--accent);
-  font-size: var(--fs-3xl);
-  font-weight: 900;
-  image-rendering: pixelated;
-  letter-spacing: -0.0125em;
-  line-height: 0.775em;
-  line-height: 1.05cap;
-  margin-bottom: var(--space-md);
-  max-width: var(--container-xl);
-  text-transform: uppercase;
+/**
+ * Lists
+ */
+
+ul,
+ol {
+  padding-left: var(--space-md);
 }
 
-.dither-mask,
-h2 {
-  mask:
-    url("data:image/png;base64,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"),
-    radial-gradient(circle at 50% 0, transparent 45%, oklab(0 0 0 / 0.65) 85%) 0 0/50% 100%;
+ul li::marker {
+  color: oklch(from currentColor l c h / 0.4);
+  content: "◦  ";
 }
 
 .element {
···
   }
 }
 
-.todo {
-  font-size: var(--fs-sm);
-  font-weight: 600;
-  opacity: 0.4;
+/**
+ * Logo
+ */
+
+.diffuse-logo {
+  font-size: var(--fs-lg);
+  margin: var(--space-lg) 0 var(--space-xl);
+  padding-top: var(--space-2xs);
+
+  svg {
+    fill: oklch(from var(--bg-color) calc(l - 0.5) c h);
+    opacity: 0.2;
+    width: 4.25em;
+
+    @media (prefers-color-scheme: dark) {
+      fill: var(--text-color);
+      opacity: 0.25;
+    }
+  }
 }
 
-.with-icon {
-  align-items: center;
-  display: inline-flex;
-  gap: var(--space-3xs);
+/**
+ * 😶‍🌫️
+ */
+
+.dither-mask,
+h2 {
+  mask:
+    url("data:image/png;base64,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"),
+    radial-gradient(circle at 50% 0, transparent 45%, oklab(0 0 0 / 0.65) 85%) 0 0/50% 100%;
 }

src/styles/fonts.css src/styles/font-faces.css

···
+@font-face {
+  font-display: swap;
+  font-family: CommitMonoVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url("../fonts/CommitMonoVariable.woff2") format("woff2");
+}
+
 @font-face {
   font-display: swap;
   font-family: InterVariable;

src/styles/variables.css

···
   --container-5xl: 64rem;
   --container-6xl: 72rem;
   --container-7xl: 80rem;
+  --container-8xl: 88rem;
+  --container-9xl: 96rem;
 
   /* Letter-spacing */
   --tracking-tighter: -0.05em;

src/themes/blur/artwork-controller/index.js

···
 import defaults from "@common/constituents/default/config.js";
 import { effect } from "@common/signal.js";
 
-import AudioEngine from "@components/engine/audio/element.js";
-import ArtworkProcessor from "@components/processor/artwork/element.js";
-import QueueAudioOrchestrator from "@components/orchestrator/queue-audio/element.js";
-
 import ArtworkController from "@themes/blur/artwork-controller/element.js";
 
 // Prerequisites
-const aud = new AudioEngine();
-aud.setAttribute("group", defaults.GROUP);
+const aud = defaults.lazy.engine.audio();
+const queue = defaults.lazy.engine.queue();
 
-const art = new ArtworkProcessor();
-const oqa = new QueueAudioOrchestrator();
-oqa.setAttribute("group", defaults.GROUP);
-oqa.setAttribute("input-selector", defaults.orchestrator.input.selector);
-oqa.setAttribute("audio-engine-selector", "de-audio");
-oqa.setAttribute("queue-engine-selector", defaults.engine.queue.selector);
+const art = defaults.lazy.processor.artwork();
+
+const oqa = defaults.lazy.orchestrator.queueAudio();
+const rso = defaults.lazy.orchestrator.repeatShuffle();
+
+defaults.lazy.orchestrator.queueTracks();
+defaults.lazy.orchestrator.repeatShuffle();
 
 // Controller
 const dac = new ArtworkController();
 dac.setAttribute("artwork-processor-selector", art.selector);
 dac.setAttribute("audio-engine-selector", aud.selector);
 dac.setAttribute("input-selector", defaults.orchestrator.input.selector);
-dac.setAttribute("queue-engine-selector", defaults.engine.queue.selector);
+dac.setAttribute("queue-engine-selector", queue.selector);
 
 // Add to DOM
-document.body.append(aud, art, oqa, dac);
+document.body.append(dac);
 
 // Effect - Link the repeat/shuffle & queue-audio orchestrators
 effect(() => {
-  const rso = defaults.orchestrator.repeatShuffle;
   const repeat = rso.repeat();
 
   if (repeat && !oqa.hasAttribute("repeat")) {

src/themes/loader/constituent/index.vto

···
+---
+layout: layouts/constituent.vto
+base: ../../../
+
+styles:
+  - styles/base.css
+  - styles/diffuse/page.css
+  - styles/vendor/phosphor/fill/style.css
+
+scripts:
+  - index.js
+---
+
+<header>
+  <div>
+    <div>
+      <a class="diffuse-logo" href="./" style="display: inline-block;">
+        {{ await comp.diffuse.logo() }}
+      </a>
+    </div>
+    <p class="construct dither-mask" style="margin-top: 0;">
+      Constituent loader ❈
+    </p>
+    <p>
+      This tool allows you to load a custom <a href="#constituents">constituent</a> besides the <a href="#constituents">existing ones</a>. <strong>If you're missing a feature in Diffuse, this is the place to be!</strong>
+    </p>
+  </div>
+  <div class="dither-mask filler"></div>
+</header>
+<main>
+  <!-- COMMUNITY -->
+  <div class="columns">
+    <section>
+      <h2 id="generate">Generate</h2>
+      <p>
+        TODO: Explain how to instruct AI to generate a constituent for you. For example, "I want a nice album overview grouped by the month they were added to my collection"
+      </p>
+    </section>
+
+    <section>
+      <h2 id="community">Community</h2>
+      <p>
+        Check out some constituents from the community and load them here.
+      </p>
+      <p>
+        <small><i class="ph-fill ph-info"></i> Nothing here yet, we're still in alpha.</small>
+      </p>
+    </section>
+  </div>
+
+  <!-- CONSTRUCT -->
+  <section>
+    <h2 id="construct">Build it yourself</h2>
+    <!--<p></p>-->
+
+    <div class="columns">
+      <div class="flex">
+        <p style="margin-top: 0; max-width: 100%;">
+          If you know a bit of HTML & Javascript, you can write your own or plug in some code you found elsewhere (be careful what to copy/paste though):
+        </p>
+
+        <form>
+          <textarea class="monospace-font" placeholder="<code>goes here</code>"></textarea>
+        </form>
+      </div>
+
+      <div class="flex">
+        <p style="margin-top: 0">
+          Your code here builds on the <a href="themes/loader/constituent/#foundation">foundation</a> listed below, it'll be injected into a <code>&lt;body&gt;</code> element.
+        </p>
+        <p style="margin-bottom: 0;">
+          <small>Some tips:</small>
+        </p>
+        <ul style="margin-top: var(--space-3xs);">
+          <li><small>Use <code>type="module"</code> when writing scripts.</small></li>
+        </ul>
+        <p>
+          <span class="button-row">
+            <button disabled>Save</button>
+            <button disabled>Preview</button>
+            <button disabled>Open in new tab</button>
+          </span>
+        </p>
+        <p>
+          Add dependencies for:
+        </p>
+        <form>
+          <select>
+            <option>Playing audio</option>
+            <option>Adding items to the queue</option>
+            <option>Browsing collection</option>
+          </select>
+        </form>
+        <p>
+          <span class="button-row">
+            <button disabled>Add code</button>
+          </span>
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- FOUNDATION -->
+  <section>
+    <h2 id="foundation">Foundation</h2>
+    <p>
+      The default configuration for constituents includes the following elements which are loaded automatically:
+    </p>
+    <ul>
+      <li>orchestrator / input</li>
+      <li>orchestrator / output</li>
+      <li>orchestrator / process-tracks <small>(process on launch)</small></li>
+      <li>processor / metadata</li>
+    </ul>
+    <p>
+      Besides this the foundation provides most other elements preconfigured. These are lazy loaded so you do need to call the method in order to load it. For example:
+    </p>
+    <pre><code>{{-
+      "import defaults from \"@common/constituents/default/config.js\"\ndefaults.lazy.engine.audio()"
+    }}</code></pre>
+  </section>
+</main>

src/themes/loader/constituent/s/index.vto

···
+---
+layout: layouts/constituent.vto
+base: ../../../../
+
+styles:
+  - styles/base.css
+---

src/themes/webamp/browser/index.js

···
 import defaults from "@common/constituents/default/config.js";
 import BrowserElement from "@themes/webamp/browser/element.js";
 
+const queue = defaults.lazy.engine.queue();
+const search = defaults.lazy.processor.search();
+
+defaults.lazy.orchestrator.queueTracks();
+defaults.lazy.orchestrator.searchTracks();
+
 const el = new BrowserElement();
 el.setAttribute("input-selector", defaults.orchestrator.input.selector);
 el.setAttribute("output-selector", defaults.orchestrator.output.selector);
-el.setAttribute("queue-engine-selector", defaults.engine.queue.selector);
-el.setAttribute(
-  "search-processor-selector",
-  defaults.processor.search.selector,
-);
+el.setAttribute("queue-engine-selector", queue.selector);
+el.setAttribute("search-processor-selector", search.selector);
 
 document.querySelector("#placeholder")?.replaceWith(el);

src/themes/webamp/configurators/input/index.js

···
 import defaults from "@common/constituents/default/config.js";
 import InputConfigElement from "@themes/webamp/configurators/input/element.js";
 
+const sources = defaults.lazy.orchestrator.sources();
+
 const el = new InputConfigElement();
 el.setAttribute("input-selector", defaults.orchestrator.input.selector);
 el.setAttribute("output-selector", defaults.orchestrator.output.selector);
-el.setAttribute(
-  "sources-orchestrator-selector",
-  defaults.orchestrator.sources.selector,
-);
+el.setAttribute("sources-orchestrator-selector", sources.selector);
 
 document.querySelector("#placeholder")?.replaceWith(el);