feat: queue-tracks orchestrator

src/layouts/applet-pico-ui.astro

···
 import "@styles/fonts.css";
 import "@styles/icons/iconoir.css";
 import "@styles/pico.scss";
-import "@styles/applets/common.css";
+import "@styles/applet/common.css";
 
 const { title } = Astro.props;
 ---

src/pages/configurator/input/_applet.astro

···
 
 <script>
   import type { Track } from "@applets/core/types.d.ts";
-  import { applet, register } from "@scripts/applets/common";
+  import { applet, register } from "@scripts/applet/common";
 
   ////////////////////////////////////////////
   // SETUP

src/pages/configurator/output/_applet.astro

···
   import { type ElementConfigurator, repeat, text } from "spellcaster/hyperscript.js";
 
   import type { ManagedOutput } from "@applets/core/types";
-  import { applet, hs, register } from "@scripts/applets/common";
+  import { applet, hs, register } from "@scripts/applet/common";
   import { INITIAL_MANAGED_OUTPUT } from "@scripts/output/common";
 
   const METHODS = ["browser", "custom", "device"] as const;

src/pages/constituents/blur/artwork-controller/_applet.astro src/pages/constituent/blur/artwork-controller/_applet.astro

···
     reactive,
     register,
     trackArtworkCacheId,
-  } from "@scripts/applets/common";
+  } from "@scripts/applet/common";
   import scope from "astro:scope";
 
   ////////////////////////////////////////////
···
 
   const _orchestrator = {
     inputCache: await applet("../../../orchestrator/input-cache"),
-    queueAudioTracks: await applet("../../../orchestrator/queue-audio-tracks", {
+    queueAudio: await applet("../../../orchestrator/queue-audio", {
       groupId: groupId(),
     }),
+    queueTracks:
+      context.groupId === undefined || context.groupId === "main"
+        ? applet("../../../orchestrator/queue-tracks")
+        : undefined,
   };
 
   const processor = {

src/pages/constituents/blur/artwork-controller/_manifest.json src/pages/constituent/blur/artwork-controller/_manifest.json

···
 {
-  "name": "diffuse/constituents/blur/artwork-controller",
+  "name": "diffuse/constituent/blur/artwork-controller",
   "title": "Diffuse Blur Theme | Artwork Controller",
   "entrypoint": "index.html",
   "actions": {

src/pages/constituents/pilot/audio/_applet.astro src/pages/constituent/pilot/audio/_applet.astro

···
 import "@styles/variables.css";
 import "@styles/fonts.css";
 import "@styles/icons/iconoir.css";
-import "@styles/themes/pilot/variables.css";
+import "@styles/theme/pilot/variables.css";
 ---
 
 <main>
···
   import scope from "astro:scope";
 
   import type { State } from "./types.d.ts";
-  import { register } from "@scripts/applets/common";
+  import { register } from "@scripts/applet/common";
 
   ////////////////////////////////////////////
   // SETUP

src/pages/constituents/pilot/audio/_manifest.json src/pages/constituent/pilot/audio/_manifest.json

···
 {
-  "name": "diffuse/constituents/pilot/audio",
+  "name": "diffuse/constituent/pilot/audio",
   "title": "",
   "entrypoint": "index.html",
   "actions": {

src/pages/engine/audio/_applet.astro

···
   import { effect, signal } from "spellcaster";
 
   import type { State, Audio, AudioState } from "./types";
-  import { register } from "@scripts/applets/common";
+  import { register } from "@scripts/applet/common";
   import type { AppletEvent } from "@web-applets/sdk";
 
   ////////////////////////////////////////////

src/pages/engine/queue/_applet.astro

···
   import type { Track } from "@applets/core/types";
   import type { State } from "./types.d.ts";
 
-  import { register } from "@scripts/applets/common";
+  import { register } from "@scripts/applet/common";
 
   ////////////////////////////////////////////
   // SETUP
···
   // ACTIONS
   ////////////////////////////////////////////
   context.setActionHandler("add", add);
+  context.setActionHandler("fill", fill);
   context.setActionHandler("shift", shift);
   context.setActionHandler("unshift", unshift);
 
   function add(items: Track[]) {
     update({ future: [...context.data.future, ...items] });
+  }
+
+  // TODO: Shuffle, limit track amount, etc.
+  function fill(availableItems: Track[]) {
+    add(availableItems);
+
+    // Automatically insert track if there isn't any
+    if (!context.data.now) shift();
   }
 
   function shift() {

src/pages/index.astro

···
 import List from "../components/List.astro";
 import Page from "../layouts/page.astro";
 
-import "../styles/pages/index.css";
+import "../styles/page/index.css";
 
 // Types
 type Ref = {
···
 
 // Themes
 const themes = [
-  { url: "themes/blur/", title: "(WIP) Blur" },
-  { url: "themes/pilot/", title: "(WIP) Pilot" },
-  { url: "themes/webamp/", title: "Webamp" },
+  { url: "theme/blur/", title: "(WIP) Blur" },
+  { url: "theme/pilot/", title: "(WIP) Pilot" },
+  { url: "theme/webamp/", title: "Webamp" },
 ];
 
 // Abstractions
···
 
 // Constituents
 const constituents = [
-  { url: "constituents/blur/artwork-controller", title: "(WIP) Blur ⦚ Artwork Controller" },
+  { url: "constituent/blur/artwork-controller", title: "(WIP) Blur ⦚ Artwork Controller" },
 ];
 
 // Applets
···
 
 const orchestrators = [
   { url: "orchestrator/input-cache/", title: "Input caching" },
-  { url: "orchestrator/queue-audio-tracks/", title: "Queue ⭤ Audio ⭤ Tracks" },
+  { url: "orchestrator/queue-audio/", title: "Queue ⭤ Audio" },
 ];
 
 const output = [

src/pages/input/native-fs/_applet.astro

···
 
   import type { Track } from "@applets/core/types.d.ts";
   import { isAudioFile } from "@scripts/input/common";
-  import { register } from "@scripts/applets/common";
+  import { register } from "@scripts/applet/common";
 
   import manifest from "./_manifest.json";
 

src/pages/input/s3/_applet.astro

···
 
   import type { Track } from "@applets/core/types.d.ts";
   import { isAudioFile } from "@scripts/input/common";
-  import { register } from "@scripts/applets/common";
+  import { register } from "@scripts/applet/common";
   import manifest from "./_manifest.json";
 
   type Bucket = {

src/pages/orchestrator/input-cache/_applet.astro

···
 <script>
   import type { ManagedOutput, ResolvedUri, Track } from "@applets/core/types.d.ts";
-  import { applet, register, wait } from "@scripts/applets/common";
+  import { applet, register, wait } from "@scripts/applet/common";
 
   ////////////////////////////////////////////
   // SETUP

src/pages/orchestrator/queue-audio-tracks/_applet.astro src/pages/orchestrator/queue-audio/_applet.astro

···
 <script>
   import type { ManagedOutput } from "@applets/core/types.d.ts";
-  import { applet, inputUrl, makeConnect, register } from "@scripts/applets/common";
+  import { applet, inputUrl, makeConnect, register } from "@scripts/applet/common";
 
   ////////////////////////////////////////////
   // SETUP

src/pages/orchestrator/queue-audio-tracks/_manifest.json

···
-{
-  "name": "diffuse/orchestrator/queue-audio-tracks",
-  "title": "Diffuse Orchestrator | Queue Audio Tracks",
-  "entrypoint": "index.html",
-  "actions": {}
-}

src/pages/orchestrator/queue-audio/_manifest.json

···
+{
+  "name": "diffuse/orchestrator/queue-audio",
+  "title": "Diffuse Orchestrator | Queue Audio",
+  "entrypoint": "index.html",
+  "actions": {}
+}

src/pages/orchestrator/queue-audio/index.astro

···
+---
+import Layout from "@layouts/applet.astro";
+import Applet from "./_applet.astro";
+import { title } from "./_manifest.json";
+---
+
+<Layout title={title}>
+  <Applet />
+</Layout>

src/pages/orchestrator/queue-tracks/_applet.astro

···
+<script>
+  import type { ManagedOutput } from "@applets/core/types.d.ts";
+  import { applet, makeConnect, register, wait } from "@scripts/applet/common";
+
+  ////////////////////////////////////////////
+  // SETUP
+  ////////////////////////////////////////////
+  import type * as QueueEngine from "@applets/engine/queue/types.d.ts";
+
+  // Register applet
+  const context = register();
+  const connect = makeConnect(context);
+
+  // Applet connections
+  const configurator = {
+    output: await applet<ManagedOutput>("../../configurator/output"),
+  };
+
+  const engine = {
+    queue: await applet<QueueEngine.State>("../../engine/queue", { groupId: context.groupId }),
+  };
+
+  ////////////////////////////////////////////
+  // Connections
+  ////////////////////////////////////////////
+  await context.settled();
+
+  // Add tracks to the queue once the tracks have been loaded;
+  // and every time the collection changes.
+
+  wait(configurator.output, (d) => d?.tracks.state === "loaded").then(() => {
+    connect(
+      configurator.output,
+      (data) => data.tracks.cacheId,
+      () => engine.queue.sendAction("fill", configurator.output.data.tracks.collection),
+    );
+  });
+</script>

src/pages/orchestrator/queue-tracks/_manifest.json

···
+{
+  "name": "diffuse/orchestrator/queue-tracks",
+  "title": "Diffuse Orchestrator | Queue Tracks",
+  "entrypoint": "index.html",
+  "actions": {}
+}

src/pages/output/indexed-db/_applet.astro

···
   import * as IDB from "idb-keyval";
 
   import type { ManagedOutput, Track } from "@applets/core/types.d.ts";
-  import { jsonDecode, jsonEncode, register } from "@scripts/applets/common";
+  import { jsonDecode, jsonEncode, register } from "@scripts/applet/common";
   import { INITIAL_MANAGED_OUTPUT, outputManager } from "@scripts/output/common";
 
   ////////////////////////////////////////////

src/pages/output/native-fs/_applet.astro

···
   import type * as FSA from "wicg-file-system-access";
 
   import type { ManagedOutput, Track } from "@applets/core/types";
-  import { jsonDecode, jsonEncode, register } from "@scripts/applets/common";
+  import { jsonDecode, jsonEncode, register } from "@scripts/applet/common";
   import { INITIAL_MANAGED_OUTPUT, outputManager } from "@scripts/output/common";
 
   ////////////////////////////////////////////

src/pages/output/storacha-automerge/_applet.astro

···
   import * as Uint8 from "uint8arrays";
 
   import type { ManagedOutput, Track } from "@applets/core/types.d.ts";
-  import { cleanUndefinedValuesForTracks, register } from "@scripts/applets/common";
+  import { cleanUndefinedValuesForTracks, register } from "@scripts/applet/common";
   import { INITIAL_MANAGED_OUTPUT } from "@scripts/output/common";
 
   ////////////////////////////////////////////

src/pages/processor/artwork/_applet.astro

···
   import type { IPicture } from "music-metadata";
   import * as IDB from "idb-keyval";
 
-  import { applet, register } from "@scripts/applets/common";
+  import { applet, register } from "@scripts/applet/common";
   import type { ArtworkRequest, State, Artwork } from "./types.d.ts";
   import type { Extraction } from "../metadata/types.d.ts";
 

src/pages/processor/metadata/_applet.astro

···
 
   import type { TrackStats, TrackTags } from "@applets/core/types";
   import type { Extraction, Urls } from "./types.d.ts";
-  import { register } from "@scripts/applets/common";
+  import { register } from "@scripts/applet/common";
 
   ////////////////////////////////////////////
   // SETUP

src/pages/processor/search/_applet.astro

···
 
   import type { Track } from "@applets/core/types";
   import type { State } from "./types.d.ts";
-  import { register } from "@scripts/applets/common";
+  import { register } from "@scripts/applet/common";
 
   ////////////////////////////////////////////
   // SETUP

src/pages/themes/blur/index.astro src/pages/theme/blur/index.astro

···
 ---
 
 <Page title="Diffuse">
-  <script src="../../../scripts/themes/blur/index.js"></script>
+  <script src="../../../scripts/theme/blur/index.js"></script>
 
   <main></main>
 </Page>

src/pages/themes/pilot/index.astro src/pages/theme/pilot/index.astro

···
 ---
 
 <Page title="Diffuse">
-  <script src="../../../scripts/themes/pilot/index.js"></script>
+  <script src="../../../scripts/theme/pilot/index.js"></script>
 
   <!-- Temporary filler to push audio UI down to the bottom -->
   <div class="filler" style="flex: 1;"></div>
 
   <!-- Theme applets -->
-  <iframe id="applet__ui__audio" src="../../constituents/pilot/audio/"></iframe>
+  <iframe id="applet__ui__audio" src="../../constituent/pilot/audio/"></iframe>
 </Page>

src/pages/themes/webamp/index.astro src/pages/theme/webamp/index.astro

···
         </a>
       </div>
     </main>
-    <script src="../../../scripts/themes/webamp/index.js"></script>
+    <script src="../../../scripts/theme/webamp/index.js"></script>
   </body>
 </html>

src/scripts/output/common.ts

···
 import type { ManagedOutput, Track } from "@applets/core/types";
-import type { BroadcastedApplet } from "@scripts/applets/common";
+import type { BroadcastedApplet } from "@scripts/applet/common";
 
 export const INITIAL_MANAGED_OUTPUT: ManagedOutput = {
   tracks: {

src/scripts/theme/blur/index.ts

···
+import type { Applet } from "@web-applets/sdk";
+
+import type { ManagedOutput } from "@applets/core/types";
+import { applet, reactive, wait } from "@scripts/applet/common";
+
+////////////////////////////////////////////
+// 🎨 Styles
+////////////////////////////////////////////
+import "@styles/theme/blur/index.css";
+
+////////////////////////////////////////////
+// 🗂️ Applets
+////////////////////////////////////////////
+import type * as QueueEngine from "@applets/engine/queue/types.d.ts";
+
+const container = document.querySelector("main");
+if (!container) throw new Error("Missing container");
+
+const labelA = "Deck A";
+const labelB = "Deck B";
+
+const configurator = {
+  output: await applet<ManagedOutput>("../../configurator/output"),
+};
+
+const _constituent = {
+  a: applet("../../constituent/blur/artwork-controller", { container, groupId: labelA }),
+  b: applet("../../constituent/blur/artwork-controller", { container, groupId: labelB }),
+};
+
+const _orchestrator = {
+  queueTracks: applet("../../orchestrator/queue-tracks", { groupId: labelA }),
+};
+
+// const engine = {
+//   queue: {
+//     a: await applet<QueueEngine.State>("../../engine/queue", { groupId: labelA }),
+//     b: await applet<QueueEngine.State>("../../engine/queue", { groupId: labelB }),
+//   },
+// };
+
+// const deckA = engine.queue.a;
+// const deckB = engine.queue.b;

src/scripts/themes/blur/index.ts

···
-import type { Applet } from "@web-applets/sdk";
-
-import type { ManagedOutput } from "@applets/core/types";
-import { applet, reactive, wait } from "@scripts/applets/common";
-
-////////////////////////////////////////////
-// 🎨 Styles
-////////////////////////////////////////////
-import "@styles/themes/blur/index.css";
-
-////////////////////////////////////////////
-// 🗂️ Applets
-////////////////////////////////////////////
-import type * as QueueEngine from "@applets/engine/queue/types.d.ts";
-
-const container = document.querySelector("main");
-if (!container) throw new Error("Missing container");
-
-const labelA = "Deck A";
-const labelB = "Deck B";
-
-const configurator = {
-  output: await applet<ManagedOutput>("../../configurator/output"),
-};
-
-const constituents = {
-  a: applet("../../constituents/blur/artwork-controller", { container, groupId: labelA }),
-  b: applet("../../constituents/blur/artwork-controller", { container, groupId: labelB }),
-};
-
-const engine = {
-  queue: {
-    a: await applet<QueueEngine.State>("../../engine/queue", { groupId: labelA }),
-    b: await applet<QueueEngine.State>("../../engine/queue", { groupId: labelB }),
-  },
-};
-
-const deckA = engine.queue.a;
-const deckB = engine.queue.b;
-
-// TODO: Shuffle, limit track amount, etc.
-async function fill(deck: Applet<QueueEngine.State>) {
-  const tracks = configurator.output.data.tracks.collection;
-
-  await deck.sendAction("add", tracks, {
-    timeoutDuration: 60000,
-  });
-
-  // Automatically insert track if there isn't any
-  if (!deck.data.now) {
-    await deck.sendAction("shift");
-  }
-}
-
-// Add tracks to the queue once the tracks have been loaded;
-// and every time the collection changes.
-
-wait(configurator.output, (d) => d?.tracks.state === "loaded").then(() => {
-  reactive(
-    configurator.output,
-    (data) => data.tracks.cacheId,
-    () => fill(deckA),
-  );
-});

src/scripts/themes/pilot/index.ts src/scripts/theme/pilot/index.ts

···
-import { applet, reactive } from "@scripts/applets/common";
+import { applet, reactive } from "@scripts/applet/common";
 
 ////////////////////////////////////////////
 // 🎨 Styles
 ////////////////////////////////////////////
-import "@styles/themes/pilot/index.css";
+import "@styles/theme/pilot/index.css";
 
 ////////////////////////////////////////////
 // 🗂️ Applets
···
 import type * as AudioEngine from "@applets/engine/audio/types.d.ts";
 import type * as QueueEngine from "@applets/engine/queue/types.d.ts";
 
-import type * as AudioUI from "@applets/constituents/pilot/audio/types.d.ts";
+import type * as AudioUI from "@applets/constituent/pilot/audio/types";
 
 const engine = {
   audio: await applet<AudioEngine.State>("../../engine/audio"),
   queue: await applet<QueueEngine.State>("../../engine/queue"),
 };
 
-const orchestrator = {
+const _orchestrator = {
   input: await applet("../../orchestrator/input-cache"),
-  queue: await applet("../../orchestrator/queue-audio-tracks"),
+  queue: await applet("../../orchestrator/queue-audio"),
 };
 
 const ui = {
-  audio: await applet<AudioUI.State>("../../constituents/pilot/audio/", { setHeight: true }),
+  audio: await applet<AudioUI.State>("../../constituent/pilot/audio/", { setHeight: true }),
 };
 
 ////////////////////////////////////////////

src/scripts/themes/webamp/index.ts src/scripts/theme/webamp/index.ts

···
 import Webamp from "webamp";
 
 import type { ManagedOutput, ResolvedUri, Track } from "@applets/core/types.d.ts";
-import { applet, wait } from "@scripts/applets/common";
+import { applet, wait } from "@scripts/applet/common";
 
 ////////////////////////////////////////////
 // 🎨 Styles
 ////////////////////////////////////////////
-import "@styles/themes/webamp/index.css";
+import "@styles/theme/webamp/index.css";
 
 ////////////////////////////////////////////
 // 🗂️ Applets