From 00ae173496ec68284c088309e3d0b568d46ab1a5 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Sat, 31 May 2025 14:42:47 +0200
Subject: [PATCH] wip

---
 deno.lock                                     |   2 +-
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 src/pages/configurator/input/_applet.astro    |   6 +-
 src/pages/configurator/output/_applet.astro   |   5 +-
 src/pages/engine/audio/_applet.astro          |  25 ++--
 src/pages/engine/queue/_applet.astro          |   4 +-
 src/pages/input/native-fs/_applet.astro       |   4 +-
 src/pages/input/s3/_applet.astro              |   7 +-
 .../orchestrator/input-cache/_applet.astro    |  31 ++--
 .../output-management/_applet.astro           |  28 ++--
 .../orchestrator/single-queue/_applet.astro   |  22 +--
 src/pages/output/indexed-db/_applet.astro     |   4 +-
 src/pages/output/native-fs/_applet.astro      |   4 +-
 .../processor/metadata-fetcher/_applet.astro  |   5 +-
 src/scripts/{theme.ts => applets/common.ts}   | 134 ++++++++++++++++--
 src/scripts/themes/pilot/index.ts             |  12 +-
 src/scripts/themes/webamp/index.ts            |   2 +-
 18 files changed, 197 insertions(+), 108 deletions(-)
 rename src/scripts/{theme.ts => applets/common.ts} (50%)

diff --git a/deno.lock b/deno.lock
index 64ef574..cf0a94b 100644
--- a/deno.lock
+++ b/deno.lock
@@ -22,7 +22,7 @@
     "packageJson": {
       "dependencies": [
         "npm:98.css@~0.1.21",
-        "npm:@automerge/automerge@^2.2.9",
+        "npm:@automerge/automerge@^3.0.0-beta.0",
         "npm:@jsr/bradenmacdonald__s3-lite-client@0.9",
         "npm:@jsr/std__media-types@^1.1.0",
         "npm:@picocss/pico@^2.1.1",
diff --git a/package-lock.json b/package-lock.json
index 555b076..3b594a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "@automerge/automerge": "^2.2.9",
+        "@automerge/automerge": "^3.0.0-beta.0",
         "@bradenmacdonald/s3-lite-client": "npm:@jsr/bradenmacdonald__s3-lite-client@^0.9.0",
         "@picocss/pico": "^2.1.1",
         "@std/media-types": "npm:@jsr/std__media-types@^1.1.0",
@@ -112,9 +112,9 @@
       }
     },
     "node_modules/@automerge/automerge": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@automerge/automerge/-/automerge-2.2.9.tgz",
-      "integrity": "sha512-6HM52Ops79hAQBWMg/t0MNfGOdEiXyenQjO9F1hKZq0RWDsMLpPa1SzRy/C4/4UyX67sTHuA5CwBpH34SpfZlA==",
+      "version": "3.0.0-preview.13",
+      "resolved": "https://registry.npmjs.org/@automerge/automerge/-/automerge-3.0.0-preview.13.tgz",
+      "integrity": "sha512-1r7ggaTqsQ4PHGv45QjVOxPOvJIKjSrHY+HTiFxCU04Qlx3kvXxDLVyBbZeN1jg2I+Y8tpuG0eVtC4QxL9wGIg==",
       "license": "MIT",
       "dependencies": {
         "uuid": "^9.0.0"
diff --git a/package.json b/package.json
index f6c7c25..4d0b3a5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@automerge/automerge": "^2.2.9",
+    "@automerge/automerge": "^3.0.0-beta.0",
     "@bradenmacdonald/s3-lite-client": "npm:@jsr/bradenmacdonald__s3-lite-client@^0.9.0",
     "@picocss/pico": "^2.1.1",
     "@std/media-types": "npm:@jsr/std__media-types@^1.1.0",
diff --git a/src/pages/configurator/input/_applet.astro b/src/pages/configurator/input/_applet.astro
index 7e61ae0..1397ebb 100644
--- a/src/pages/configurator/input/_applet.astro
+++ b/src/pages/configurator/input/_applet.astro
@@ -30,15 +30,13 @@
 </style>
 
 <script>
-  import { applets } from "@web-applets/sdk";
-
   import type { Track } from "@applets/core/types.d.ts";
-  import { applet } from "@scripts/theme";
+  import { applet, register } from "@scripts/applets/common";
 
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
-  const context = applets.register<{ ready: boolean }>();
+  const context = register<{ ready: boolean }>();
 
   // Initial state
   context.data = {
diff --git a/src/pages/configurator/output/_applet.astro b/src/pages/configurator/output/_applet.astro
index 6d3e561..5bf1aff 100644
--- a/src/pages/configurator/output/_applet.astro
+++ b/src/pages/configurator/output/_applet.astro
@@ -39,9 +39,8 @@
   import scope from "astro:scope";
   import { type Signal, computed, effect, signal } from "spellcaster/spellcaster.js";
   import { type ElementConfigurator, repeat, text } from "spellcaster/hyperscript.js";
-  import { applets } from "@web-applets/sdk";
 
-  import { applet, hs } from "@src/scripts/theme";
+  import { applet, hs, register } from "@scripts/applets/common";
   import type { OutputGetter, OutputSetter } from "@applets/core/types.d.ts";
 
   const METHODS = ["browser", "custom", "device"] as const;
@@ -63,7 +62,7 @@
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
-  const context = applets.register<{ ready: boolean }>();
+  const context = register<{ ready: boolean }>();
 
   // Applets container
   const container = document.createElement("div");
diff --git a/src/pages/engine/audio/_applet.astro b/src/pages/engine/audio/_applet.astro
index 7909746..1c38cab 100644
--- a/src/pages/engine/audio/_applet.astro
+++ b/src/pages/engine/audio/_applet.astro
@@ -1,6 +1,6 @@
 <script>
-  import { applets } from "@web-applets/sdk";
-  import { State, Track, TrackState } from "./types";
+  import type { State, Track, TrackState } from "./types";
+  import { register } from "@scripts/applets/common";
 
   ////////////////////////////////////////////
   // CONSTANTS
@@ -11,9 +11,10 @@
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
-  const context = applets.register<State>();
-  const container = document.createElement("div");
+  const context = register<State>();
 
+  // Audio elements container
+  const container = document.createElement("div");
   container.id = "container";
   document.body.appendChild(container);
 
@@ -40,17 +41,10 @@
   ////////////////////////////////////////////
   // ACTIONS
   ////////////////////////////////////////////
-  context.setActionHandler(
-    "render",
-    async (args: { play?: { trackId: string; volume?: number }; tracks: Track[] }) => {
-      await render(args.tracks);
-      if (args.play) play({ trackId: args.play.trackId, volume: args.play.volume });
-    },
-  );
-
   context.setActionHandler("pause", pause);
   context.setActionHandler("play", play);
   context.setActionHandler("reload", reload);
+  context.setActionHandler("render", render);
   context.setActionHandler("seek", seek);
   context.setActionHandler("volume", volume);
 
@@ -102,6 +96,11 @@
     });
   }
 
+  async function render(args: { play?: { trackId: string; volume?: number }; tracks: Track[] }) {
+    await renderTracks(args.tracks);
+    if (args.play) play({ trackId: args.play.trackId, volume: args.play.volume });
+  }
+
   function seek({ percentage, trackId }: { percentage: number; trackId: string }) {
     withAudioNode(trackId, (audio) => {
       if (!isNaN(audio.duration)) {
@@ -122,7 +121,7 @@
   ////////////////////////////////////////////
   // RENDER
   ////////////////////////////////////////////
-  async function render(tracks: Array<Track>) {
+  async function renderTracks(tracks: Array<Track>) {
     const ids = tracks.map((e) => e.id);
     const existingNodes: Record<string, HTMLAudioElement> = {};
 
diff --git a/src/pages/engine/queue/_applet.astro b/src/pages/engine/queue/_applet.astro
index e427383..b84bc50 100644
--- a/src/pages/engine/queue/_applet.astro
+++ b/src/pages/engine/queue/_applet.astro
@@ -1,11 +1,11 @@
 <script>
-  import { applets } from "@web-applets/sdk";
   import { QueueItem, State } from "./types";
+  import { register } from "@scripts/applets/common";
 
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
-  const context = applets.register<State>();
+  const context = register<State>();
 
   // Initial state
   context.data = {
diff --git a/src/pages/input/native-fs/_applet.astro b/src/pages/input/native-fs/_applet.astro
index f8c7b58..deae055 100644
--- a/src/pages/input/native-fs/_applet.astro
+++ b/src/pages/input/native-fs/_applet.astro
@@ -16,7 +16,6 @@
 </main>
 
 <script>
-  import { applets } from "@web-applets/sdk";
   import { computed, effect, Signal, signal } from "spellcaster";
   import { repeat, tags, text } from "spellcaster/hyperscript.js";
   import { type FileSystemDirectoryHandle, showDirectoryPicker } from "native-file-system-adapter";
@@ -26,6 +25,7 @@
 
   import type { Track } from "@applets/core/types.d.ts";
   import { isAudioFile } from "@scripts/inputs/common";
+  import { register } from "@scripts/applets/common";
 
   import manifest from "./_manifest.json";
 
@@ -41,7 +41,7 @@
   const SCHEME = manifest.input_properties.scheme;
 
   // Register applet
-  const context = applets.register();
+  const context = register();
 
   ////////////////////////////////////////////
   // UI
diff --git a/src/pages/input/s3/_applet.astro b/src/pages/input/s3/_applet.astro
index 75b6741..9c5e9c3 100644
--- a/src/pages/input/s3/_applet.astro
+++ b/src/pages/input/s3/_applet.astro
@@ -38,7 +38,6 @@
 
 <script>
   import { S3Client } from "@bradenmacdonald/s3-lite-client";
-  import { applets } from "@web-applets/sdk";
   import { computed, effect, Signal, signal } from "spellcaster";
   import { type Props, repeat, tags, text } from "spellcaster/hyperscript.js";
   import * as IDB from "idb-keyval";
@@ -46,9 +45,9 @@
   import QS from "query-string";
 
   import type { Track } from "@applets/core/types.d.ts";
-
-  import manifest from "./_manifest.json";
   import { isAudioFile } from "@scripts/inputs/common";
+  import { register } from "@scripts/applets/common";
+  import manifest from "./_manifest.json";
 
   type Bucket = {
     accessKey: string;
@@ -86,7 +85,7 @@
   const SCHEME = manifest.input_properties.scheme;
 
   // Register applet
-  const context = applets.register();
+  const context = register();
 
   ////////////////////////////////////////////
   // UI
diff --git a/src/pages/orchestrator/input-cache/_applet.astro b/src/pages/orchestrator/input-cache/_applet.astro
index 19bf23c..0b73e56 100644
--- a/src/pages/orchestrator/input-cache/_applet.astro
+++ b/src/pages/orchestrator/input-cache/_applet.astro
@@ -1,16 +1,19 @@
 <script>
-  import { applets } from "@web-applets/sdk";
-
   import type { ResolvedUri, Track } from "@applets/core/types.d.ts";
-  import { applet, waitUntilAppletData, waitUntilAppletIsReady } from "@scripts/theme";
+
+  import {
+    applet,
+    register,
+    waitUntilAppletData,
+    waitUntilAppletIsReady,
+  } from "@scripts/applets/common";
 
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
   import type * as OutputOrchestrator from "@applets/orchestrator/output-management/types.d.ts";
 
-  const context = applets.register<{ isProcessing: boolean; ready: boolean }>();
-  const topContext = self.top || self.parent;
+  const context = register<{ isProcessing: boolean; ready: boolean }>();
 
   // Initial data
   context.data = {
@@ -20,19 +23,15 @@
 
   // Applet connections
   const configurator = {
-    input: await applet("../../configurator/input", { context: topContext }),
+    input: await applet("../../configurator/input"),
   };
 
   const orchestrator = {
-    output: await applet<OutputOrchestrator.State>("../../orchestrator/output-management", {
-      context: topContext,
-    }),
+    output: await applet<OutputOrchestrator.State>("../../orchestrator/output-management"),
   };
 
   const processor = {
-    metadataFetcher: await applet("../../processor/metadata-fetcher", {
-      context: topContext,
-    }),
+    metadataFetcher: await applet("../../processor/metadata-fetcher"),
   };
 
   // 🚀
@@ -68,7 +67,7 @@
           "resolve",
           { method: "GET", uri: track.uri },
           {
-            timeoutDuration: 60000,
+            timeoutDuration: 60000 * 5,
           },
         );
 
@@ -76,7 +75,7 @@
           "resolve",
           { method: "HEAD", uri: track.uri },
           {
-            timeoutDuration: 60000,
+            timeoutDuration: 60000 * 5,
           },
         );
 
@@ -86,7 +85,7 @@
           "extract",
           { urls: { get: resGet.url, head: resHead?.url || resGet.url } },
           {
-            timeoutDuration: 60000,
+            timeoutDuration: 60000 * 15,
           },
         );
 
@@ -99,7 +98,7 @@
 
     // Save
     await orchestrator.output.sendAction("tracks", tracksWithMetadata, {
-      timeoutDuration: 60000 * 2,
+      timeoutDuration: 60000 * 5,
     });
 
     // Fin
diff --git a/src/pages/orchestrator/output-management/_applet.astro b/src/pages/orchestrator/output-management/_applet.astro
index 08c3922..fbfbf1a 100644
--- a/src/pages/orchestrator/output-management/_applet.astro
+++ b/src/pages/orchestrator/output-management/_applet.astro
@@ -1,21 +1,20 @@
 <!-- TODO: Button to export all user/output data. --><!-- TODO: Button to import data? -->
 <script>
-  import { applets } from "@web-applets/sdk";
   import { debounce } from "throttle-debounce";
   import * as Automerge from "@automerge/automerge";
 
   import type { Track } from "@applets/core/types.d.ts";
   import type { State } from "./types.d.ts";
-  import { applet, waitUntilAppletIsReady } from "@scripts/theme";
+  import { applet, register, waitUntilAppletIsReady } from "@scripts/applets/common";
 
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
-  const context = applets.register<State>();
+  const context = register<State>();
 
   // Initial data
   context.data = {
-    tracks: Automerge.from({ collection: [] }, {}),
+    tracks: Automerge.from({ collection: [] }),
 
     hasSyncedTracks: false,
 
@@ -24,18 +23,19 @@
 
   // Applet connections
   const configurator = {
-    output: await applet("../../configurator/output", { context: self.top || self.parent }),
+    output: await applet("../../configurator/output"),
   };
 
-  // Load tracks
-  loadTracks().then((doc) => {
-    if (doc) {
-      const mergedDoc = Automerge.merge(doc, context.data.tracks);
-      update({ tracks: mergedDoc });
-    }
+  // Load tracks if needed
+  if (context.isMainInstance())
+    loadTracks().then((doc) => {
+      if (doc) {
+        const mergedDoc = Automerge.merge(doc, context.data.tracks);
+        update({ tracks: mergedDoc });
+      }
 
-    update({ hasSyncedTracks: true });
-  });
+      update({ hasSyncedTracks: true });
+    });
 
   // State helpers
   function update(partial: Partial<State>): void {
@@ -43,6 +43,8 @@
   }
 
   function updateTracks(tracks: Track[]): Automerge.Doc<{ collection: Track[] }> {
+    console.log(context.data.tracks);
+
     const doc = Automerge.change(context.data.tracks, (d) => {
       d.collection = cleanUndefinedValuesForTracks(tracks);
     });
diff --git a/src/pages/orchestrator/single-queue/_applet.astro b/src/pages/orchestrator/single-queue/_applet.astro
index 6ac8e8f..8a57f89 100644
--- a/src/pages/orchestrator/single-queue/_applet.astro
+++ b/src/pages/orchestrator/single-queue/_applet.astro
@@ -1,8 +1,6 @@
 <script>
-  import { applets } from "@web-applets/sdk";
-
   import type { ResolvedUri, Track } from "@applets/core/types.d.ts";
-  import { applet, comparable, reactive } from "@scripts/theme";
+  import { applet, comparable, reactive, register } from "@scripts/applets/common";
 
   ////////////////////////////////////////////
   // SETUP
@@ -12,28 +10,20 @@
   import type * as OutputOrchestrator from "@applets/orchestrator/output-management/types.d.ts";
 
   // Register applet
-  const context = applets.register<unknown>();
+  const context = register<unknown>();
 
   // Applet connections
   const configurator = {
-    input: await applet("../../configurator/input", {
-      context: self.top || self.parent,
-    }),
+    input: await applet("../../configurator/input"),
   };
 
   const engine = {
-    audio: await applet<AudioEngine.State>("../../engine/audio", {
-      context: self.top || self.parent,
-    }),
-    queue: await applet<QueueEngine.State>("../../engine/queue", {
-      context: self.top || self.parent,
-    }),
+    audio: await applet<AudioEngine.State>("../../engine/audio"),
+    queue: await applet<QueueEngine.State>("../../engine/queue"),
   };
 
   const orchestrator = {
-    output: await applet<OutputOrchestrator.State>("../../orchestrator/output-management", {
-      context: self.top || self.parent,
-    }),
+    output: await applet<OutputOrchestrator.State>("../../orchestrator/output-management"),
   };
 
   ////////////////////////////////////////////
diff --git a/src/pages/output/indexed-db/_applet.astro b/src/pages/output/indexed-db/_applet.astro
index 0e69af1..86d053d 100644
--- a/src/pages/output/indexed-db/_applet.astro
+++ b/src/pages/output/indexed-db/_applet.astro
@@ -1,14 +1,14 @@
 <script>
   import * as IDB from "idb-keyval";
-  import { applets } from "@web-applets/sdk";
 
   import type { OutputGetter, OutputSetter } from "@applets/core/types.d.ts";
+  import { register } from "@scripts/applets/common";
 
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
   const IDB_PREFIX = "@applets/output/indexed-db";
-  const context = applets.register();
+  const context = register();
 
   ////////////////////////////////////////////
   // ACTIONS
diff --git a/src/pages/output/native-fs/_applet.astro b/src/pages/output/native-fs/_applet.astro
index 361419d..e7a8a71 100644
--- a/src/pages/output/native-fs/_applet.astro
+++ b/src/pages/output/native-fs/_applet.astro
@@ -1,9 +1,9 @@
 <script>
   import * as IDB from "idb-keyval";
-  import { applets } from "@web-applets/sdk";
   import { type FileSystemDirectoryHandle, showDirectoryPicker } from "native-file-system-adapter";
 
   import type { OutputGetter, OutputSetter } from "@applets/core/types.d.ts";
+  import { register } from "@scripts/applets/common";
 
   ////////////////////////////////////////////
   // SETUP
@@ -11,7 +11,7 @@
   const IDB_PREFIX = "@applets/output/native-fs";
   const IDB_DEVICE_KEY = `${IDB_PREFIX}/device`;
 
-  const context = applets.register();
+  const context = register();
 
   ////////////////////////////////////////////
   // ACTIONS
diff --git a/src/pages/processor/metadata-fetcher/_applet.astro b/src/pages/processor/metadata-fetcher/_applet.astro
index 4c39f95..9166b66 100644
--- a/src/pages/processor/metadata-fetcher/_applet.astro
+++ b/src/pages/processor/metadata-fetcher/_applet.astro
@@ -24,7 +24,10 @@
   async function extract(args: { mimeType?: string; stream?: ReadableStream; urls?: Urls }) {
     // Construct records
     // TODO: Use other metadata lib as fallback: https://github.com/buzz/mediainfo.js
-    const { stats, tags } = await musicMetadataTags(args, false);
+    const { stats, tags } = await musicMetadataTags(args, false).catch(() => ({
+      stats: undefined,
+      tags: undefined,
+    }));
 
     // Fin
     return { stats, tags };
diff --git a/src/scripts/theme.ts b/src/scripts/applets/common.ts
similarity index 50%
rename from src/scripts/theme.ts
rename to src/scripts/applets/common.ts
index a167d4d..ff3f160 100644
--- a/src/scripts/theme.ts
+++ b/src/scripts/applets/common.ts
@@ -6,13 +6,12 @@ import { effect, isSignal, Signal, signal } from "spellcaster/spellcaster.js";
 import { xxh32 } from "xxh32";
 
 ////////////////////////////////////////////
-// 🪟 Applet initialiser
+// 🪟 Applet connector
 ////////////////////////////////////////////
 export async function applet<D>(
   src: string,
   opts: {
     addSlashSuffix?: boolean;
-    context?: Window;
     container?: HTMLElement | Element;
     id?: string;
     setHeight?: boolean;
@@ -26,9 +25,7 @@ export async function applet<D>(
         : ""
   }`;
 
-  const existingFrame: HTMLIFrameElement | null = (opts.context || window).document.querySelector(
-    `[src="${src}"]`,
-  );
+  const existingFrame: HTMLIFrameElement | null = window.document.querySelector(`[src="${src}"]`);
 
   let frame;
 
@@ -42,7 +39,7 @@ export async function applet<D>(
     if (opts.container) {
       opts.container.appendChild(frame);
     } else {
-      (opts.context || window).document.body.appendChild(frame);
+      window.document.body.appendChild(frame);
     }
   }
 
@@ -50,14 +47,10 @@ export async function applet<D>(
     throw new Error("iframe does not have a contentWindow");
   }
 
-  const applet = await applets
-    .connect<D>(frame.contentWindow, {
-      context: opts.context,
-    })
-    .catch((err) => {
-      console.error("Error connecting to " + src, err);
-      throw err;
-    });
+  const applet = await applets.connect<D>(frame.contentWindow).catch((err) => {
+    console.error("Error connecting to " + src, err);
+    throw err;
+  });
 
   if (opts.setHeight) {
     applet.onresize = () => {
@@ -77,6 +70,104 @@ export async function applet<D>(
   return applet;
 }
 
+////////////////////////////////////////////
+// 🪟 Applet registration
+////////////////////////////////////////////
+export function register<DataType = any>() {
+  const id = `${location.host}${location.pathname}`;
+  const scope = applets.register<DataType>();
+
+  let isMainInstance = true;
+  let waitingForPong = true;
+
+  // One instance to rule them all
+  //
+  // Ping other instances to see if there are any.
+  // As long as there aren't any, it is considered the main instance.
+  //
+  // Actions are performed on the main instance,
+  // and data is replicated from main to the other instances.
+  const channel = new BroadcastChannel(id);
+
+  channel.addEventListener("message", async (event) => {
+    if (event.data === "PING") {
+      channel.postMessage("PONG");
+    } else if (event.data?.type === "data") {
+      scope.data = event.data.data;
+    } else if (waitingForPong && event.data === "PONG") {
+      waitingForPong = false;
+      isMainInstance = false;
+    } else if (isMainInstance && event.data?.type === "action" && event.data?.actionId) {
+      const result = await scope.actionHandlers[event.data.actionId]?.(...event.data.arguments);
+      channel.postMessage({
+        type: "actioncomplete",
+        id: event.data.id,
+        result,
+      });
+    }
+  });
+
+  setTimeout(() => (waitingForPong = false), 1000);
+
+  channel.postMessage("PING");
+
+  scope.ondata = (event) => {
+    if (isMainInstance) {
+      channel.postMessage({
+        type: "data",
+        data: event.data,
+      });
+    }
+  };
+
+  return {
+    get id() {
+      return id;
+    },
+
+    get data() {
+      return scope.data;
+    },
+
+    set data(data: DataType) {
+      scope.data = data;
+    },
+
+    isMainInstance() {
+      return isMainInstance;
+    },
+
+    setActionHandler: <H extends Function>(actionId: string, actionHandler: H) => {
+      const handler = (...args: any) => {
+        if (isMainInstance) {
+          return actionHandler(...args);
+        }
+
+        const actionMessage = {
+          id: crypto.randomUUID(),
+          type: "action",
+          actionId,
+          arguments: args,
+        };
+
+        return new Promise((resolve) => {
+          const actionCallback = (event: MessageEvent) => {
+            if (event.data?.type === "actioncomplete" && event.data?.id === actionMessage.id) {
+              channel.removeEventListener("message", actionCallback);
+              resolve(event.data.result);
+            }
+          };
+
+          channel.addEventListener("message", actionCallback);
+          channel.postMessage(actionMessage);
+        });
+      };
+
+      scope.setActionHandler(actionId, handler);
+    },
+  };
+}
+
 ////////////////////////////////////////////
 // 🔮 Reactive state management
 ////////////////////////////////////////////
@@ -110,6 +201,21 @@ export function addScope<O extends object>(astroScope: string, object: O): O {
   };
 }
 
+export function appletScopePort() {
+  let port: MessagePort | undefined;
+
+  function connection(event: AppletEvent) {
+    if (event.data?.type === "appletconnect") {
+      window.removeEventListener("message", connection);
+      port = (event as any).ports[0];
+    }
+  }
+
+  window.addEventListener("message", connection);
+
+  return () => port;
+}
+
 export function comparable(value: unknown) {
   return xxh32(JSON.stringify(value));
 }
diff --git a/src/scripts/themes/pilot/index.ts b/src/scripts/themes/pilot/index.ts
index 3887763..348a3da 100644
--- a/src/scripts/themes/pilot/index.ts
+++ b/src/scripts/themes/pilot/index.ts
@@ -1,5 +1,4 @@
-import type { Output, Track } from "@applets/core/types.d.ts";
-import { applet, reactive } from "../../theme.ts";
+import { applet, reactive } from "@scripts/applets/common";
 
 ////////////////////////////////////////////
 // 🎨 Styles
@@ -14,19 +13,14 @@ import type * as QueueEngine from "@applets/engine/queue/types.d.ts";
 
 import type * as AudioUI from "@applets/themes/pilot/ui/audio/types.d.ts";
 
-const _configurator = {
-  input: await applet("../../configurator/input"),
-  output: await applet("../../configurator/output"),
-};
-
 const engine = {
   audio: await applet<AudioEngine.State>("../../engine/audio"),
   queue: await applet<QueueEngine.State>("../../engine/queue"),
 };
 
 const _orchestrator = {
-  input: await applet<Output>("../../orchestrator/input-cache"),
-  output: await applet<Output>("../../orchestrator/output-management"),
+  input: await applet("../../orchestrator/input-cache"),
+  output: await applet("../../orchestrator/output-management"),
   queue: await applet("../../orchestrator/single-queue"),
 };
 
diff --git a/src/scripts/themes/webamp/index.ts b/src/scripts/themes/webamp/index.ts
index bc62c37..0861980 100644
--- a/src/scripts/themes/webamp/index.ts
+++ b/src/scripts/themes/webamp/index.ts
@@ -2,7 +2,7 @@ import Webamp from "webamp";
 import { URLTrack } from "webamp";
 
 import type { ResolvedUri, Track } from "@applets/core/types.d.ts";
-import { applet } from "../../theme.ts";
+import { applet } from "@scripts/applets/common";
 
 ////////////////////////////////////////////
 // 🎨 Styles
-- 
2.43.0


From 9a5b62c409591833571aeaee139248f8be40349b Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Sat, 31 May 2025 17:15:03 +0200
Subject: [PATCH] wip

---
 astro.config.js                               |  3 +
 deno.lock                                     |  1 +
 package-lock.json                             | 16 +++++
 package.json                                  |  1 +
 .../orchestrator/input-cache/_applet.astro    |  6 ++
 .../output-management/_applet.astro           | 66 ++++++++++++++-----
 src/scripts/applets/common.ts                 | 15 ++++-
 7 files changed, 89 insertions(+), 19 deletions(-)

diff --git a/astro.config.js b/astro.config.js
index bc81414..6b4428d 100644
--- a/astro.config.js
+++ b/astro.config.js
@@ -11,5 +11,8 @@ export default defineConfig({
   },
   vite: {
     plugins: [wasm()],
+    server: {
+      hmr: false,
+    },
   },
 });
diff --git a/deno.lock b/deno.lock
index cf0a94b..9644d04 100644
--- a/deno.lock
+++ b/deno.lock
@@ -41,6 +41,7 @@
         "npm:sass@^1.87.0",
         "npm:spellcaster@6",
         "npm:throttle-debounce@^5.0.2",
+        "npm:uint8arrays@^5.1.0",
         "npm:uri-js@^4.4.1",
         "npm:vite-plugin-wasm@^3.4.1",
         "npm:webamp@^1.5.0",
diff --git a/package-lock.json b/package-lock.json
index 3b594a7..4d2855c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "query-string": "^9.1.2",
         "spellcaster": "^6.0.0",
         "throttle-debounce": "^5.0.2",
+        "uint8arrays": "^5.1.0",
         "uri-js": "^4.4.1",
         "webamp": "^1.5.0",
         "xxh32": "^2.0.5"
@@ -4876,6 +4877,12 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
+    "node_modules/multiformats": {
+      "version": "13.3.6",
+      "resolved": "https://registry.npmjs.org/multiformats/-/multiformats-13.3.6.tgz",
+      "integrity": "sha512-yakbt9cPYj8d3vi/8o/XWm61MrOILo7fsTL0qxNx6zS0Nso6K5JqqS2WV7vK/KSuDBvrW3KfCwAdAgarAgOmww==",
+      "license": "Apache-2.0 OR MIT"
+    },
     "node_modules/music-metadata": {
       "version": "11.2.3",
       "resolved": "https://registry.npmjs.org/music-metadata/-/music-metadata-11.2.3.tgz",
@@ -6480,6 +6487,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/uint8arrays": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-5.1.0.tgz",
+      "integrity": "sha512-vA6nFepEmlSKkMBnLBaUMVvAC4G3CTmO58C12y4sq6WPDOR7mOFYOi7GlrQ4djeSbP6JG9Pv9tJDM97PedRSww==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "multiformats": "^13.0.0"
+      }
+    },
     "node_modules/ultrahtml": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.6.0.tgz",
diff --git a/package.json b/package.json
index 4d0b3a5..ab6ed5d 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "query-string": "^9.1.2",
     "spellcaster": "^6.0.0",
     "throttle-debounce": "^5.0.2",
+    "uint8arrays": "^5.1.0",
     "uri-js": "^4.4.1",
     "webamp": "^1.5.0",
     "xxh32": "^2.0.5"
diff --git a/src/pages/orchestrator/input-cache/_applet.astro b/src/pages/orchestrator/input-cache/_applet.astro
index 0b73e56..b4341b1 100644
--- a/src/pages/orchestrator/input-cache/_applet.astro
+++ b/src/pages/orchestrator/input-cache/_applet.astro
@@ -49,13 +49,19 @@
 
     await waitUntilAppletIsReady(configurator.input);
 
+    console.log("Ready.");
+
     const cachedTracks = orchestrator.output.data.tracks.collection;
     await configurator.input.sendAction("contextualize", cachedTracks);
 
+    console.log("Start list.");
+
     const tracks = await configurator.input.sendAction<Track[]>("list", cachedTracks, {
       timeoutDuration: 60000 * 60 * 24,
     });
 
+    console.log("Got tracks", tracks);
+
     // Process
     const tracksWithMetadata = await tracks.reduce(
       async (promise: Promise<Track[]>, track: Track) => {
diff --git a/src/pages/orchestrator/output-management/_applet.astro b/src/pages/orchestrator/output-management/_applet.astro
index fbfbf1a..0519cdd 100644
--- a/src/pages/orchestrator/output-management/_applet.astro
+++ b/src/pages/orchestrator/output-management/_applet.astro
@@ -2,19 +2,52 @@
 <script>
   import { debounce } from "throttle-debounce";
   import * as Automerge from "@automerge/automerge";
+  import * as Uint8 from "uint8arrays";
 
   import type { Track } from "@applets/core/types.d.ts";
   import type { State } from "./types.d.ts";
   import { applet, register, waitUntilAppletIsReady } from "@scripts/applets/common";
 
+  type TracksDoc = { collection: Track[] };
+
+  const TRACKS_INITIAL_DOC = Automerge.load<TracksDoc>(
+    Uint8.fromString(
+      "hW9Kg5qsIsEAeAEQkb+c0IkXTSWyGqZ6jXtFxgETwM42fL3CMN78UZ4Qa3a9RfOrJu5qKzlM7IxwAUXelQYBAgMCEwIjBkACVgIHFQwhAiMCNAFCAlYCgAECfwB/AX8Bf+ub7MEGfwB/B38KY29sbGVjdGlvbn8AfwEBfwJ/AH8AAA",
+      "base64",
+    ),
+  );
+
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
   const context = register<State>();
 
+  // Data codec
+  const codec = {
+    decode(data: any) {
+      return {
+        hasSyncedTracks: data.hasSyncedTracks,
+        ready: context.data.ready,
+        tracks: Automerge.load<TracksDoc>(data.tracks),
+      };
+    },
+
+    encode(data: State) {
+      return {
+        hasSyncedTracks: true,
+        ready: context.data.ready,
+        tracks: Automerge.save(data.tracks),
+      };
+    },
+  };
+
+  context.codec = codec;
+
   // Initial data
   context.data = {
-    tracks: Automerge.from({ collection: [] }),
+    // Empty tracks collection, DO NOT CHANGE.
+    // (avoids the initial sync problem with Automerge)
+    tracks: TRACKS_INITIAL_DOC,
 
     hasSyncedTracks: false,
 
@@ -29,8 +62,11 @@
   // Load tracks if needed
   if (context.isMainInstance())
     loadTracks().then((doc) => {
+      console.log("LOADED DOC", doc);
+
       if (doc) {
-        const mergedDoc = Automerge.merge(doc, context.data.tracks);
+        const mergedDoc = Automerge.merge(context.data.tracks, doc);
+        console.log("MERGED DOC", doc);
         update({ tracks: mergedDoc });
       }
 
@@ -42,8 +78,9 @@
     context.data = { ...context.data, ...partial };
   }
 
-  function updateTracks(tracks: Track[]): Automerge.Doc<{ collection: Track[] }> {
+  function updateTracks(tracks: Track[]): Automerge.Doc<TracksDoc> {
     console.log(context.data.tracks);
+    console.log(context.isMainInstance());
 
     const doc = Automerge.change(context.data.tracks, (d) => {
       d.collection = cleanUndefinedValuesForTracks(tracks);
@@ -76,7 +113,7 @@
       return undefined;
     }
 
-    return Automerge.load<{ collection: Track[] }>(data as Uint8Array);
+    return Automerge.load<TracksDoc>(data as Uint8Array);
   }
 
   ////////////////////////////////////////////
@@ -92,21 +129,18 @@
     saveTracksToOutput(doc);
   };
 
-  const saveTracksToOutput = debounce(
-    5000,
-    async function (doc: Automerge.Doc<{ collection: Track[] }>) {
-      const data = Automerge.save(doc);
+  const saveTracksToOutput = debounce(5000, async function (doc: Automerge.Doc<TracksDoc>) {
+    const data = Automerge.save(doc);
 
-      console.log("🔮 Saving tracks");
+    console.log("🔮 Saving tracks");
 
-      await configurator.output.sendAction("put", {
-        name: "tracks.json",
-        data,
-      });
+    await configurator.output.sendAction("put", {
+      name: "tracks.json",
+      data,
+    });
 
-      console.log("🔮 Tracks saved to output");
-    },
-  );
+    console.log("🔮 Tracks saved to output");
+  });
 
   context.setActionHandler("tracks", tracksHandler);
 
diff --git a/src/scripts/applets/common.ts b/src/scripts/applets/common.ts
index ff3f160..f689d88 100644
--- a/src/scripts/applets/common.ts
+++ b/src/scripts/applets/common.ts
@@ -93,7 +93,7 @@ export function register<DataType = any>() {
     if (event.data === "PING") {
       channel.postMessage("PONG");
     } else if (event.data?.type === "data") {
-      scope.data = event.data.data;
+      scope.data = context.codec.decode(event.data.data);
     } else if (waitingForPong && event.data === "PONG") {
       waitingForPong = false;
       isMainInstance = false;
@@ -115,12 +115,14 @@ export function register<DataType = any>() {
     if (isMainInstance) {
       channel.postMessage({
         type: "data",
-        data: event.data,
+        data: context.codec.encode(event.data),
       });
     }
   };
 
-  return {
+  const context = {
+    scope,
+
     get id() {
       return id;
     },
@@ -133,6 +135,11 @@ export function register<DataType = any>() {
       scope.data = data;
     },
 
+    codec: {
+      decode: (data: any) => data as DataType,
+      encode: (data: DataType) => data as any,
+    },
+
     isMainInstance() {
       return isMainInstance;
     },
@@ -166,6 +173,8 @@ export function register<DataType = any>() {
       scope.setActionHandler(actionId, handler);
     },
   };
+
+  return context;
 }
 
 ////////////////////////////////////////////
-- 
2.43.0


From a914ab1dae67d776a6b8395f0acedfd5b79fcd8e Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Sat, 31 May 2025 23:28:57 +0200
Subject: [PATCH] wip

---
 src/pages/index.astro                            | 6 +++---
 src/pages/orchestrator/input-cache/_applet.astro | 6 ------
 src/scripts/applets/common.ts                    | 6 ++++++
 src/scripts/themes/pilot/index.ts                | 6 +++++-
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4e4fa5a..d247dd0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -141,9 +141,9 @@ const processors = [
         </Applet>
 
         <Applet title="Orchestrators" list={orchestrators}>
-          These too are applet compositions. However, unlike themes, these are purely logical, and
-          reuse applet instances from the parent context (when available). Mostly exist in order to
-          construct sensible defaults to use across themes and abstractions.
+          These too are applet compositions. However, unlike themes, these are purely logical.
+          Mostly exist in order to construct sensible defaults to use across themes and
+          abstractions.
         </Applet>
 
         <Applet title="Output" list={output}>
diff --git a/src/pages/orchestrator/input-cache/_applet.astro b/src/pages/orchestrator/input-cache/_applet.astro
index b4341b1..0b73e56 100644
--- a/src/pages/orchestrator/input-cache/_applet.astro
+++ b/src/pages/orchestrator/input-cache/_applet.astro
@@ -49,19 +49,13 @@
 
     await waitUntilAppletIsReady(configurator.input);
 
-    console.log("Ready.");
-
     const cachedTracks = orchestrator.output.data.tracks.collection;
     await configurator.input.sendAction("contextualize", cachedTracks);
 
-    console.log("Start list.");
-
     const tracks = await configurator.input.sendAction<Track[]>("list", cachedTracks, {
       timeoutDuration: 60000 * 60 * 24,
     });
 
-    console.log("Got tracks", tracks);
-
     // Process
     const tracksWithMetadata = await tracks.reduce(
       async (promise: Promise<Track[]>, track: Track) => {
diff --git a/src/scripts/applets/common.ts b/src/scripts/applets/common.ts
index f689d88..c07b9ba 100644
--- a/src/scripts/applets/common.ts
+++ b/src/scripts/applets/common.ts
@@ -1,5 +1,6 @@
 import type { Applet, AppletEvent } from "@web-applets/sdk";
 
+import QS from "query-string";
 import { applets } from "@web-applets/sdk";
 import { type ElementConfigurator, h } from "spellcaster/hyperscript.js";
 import { effect, isSignal, Signal, signal } from "spellcaster/spellcaster.js";
@@ -12,6 +13,7 @@ export async function applet<D>(
   src: string,
   opts: {
     addSlashSuffix?: boolean;
+    applets?: Record<string, string>;
     container?: HTMLElement | Element;
     id?: string;
     setHeight?: boolean;
@@ -25,6 +27,10 @@ export async function applet<D>(
         : ""
   }`;
 
+  if (opts.applets) {
+    src = QS.stringifyUrl({ url: src, query: opts.applets });
+  }
+
   const existingFrame: HTMLIFrameElement | null = window.document.querySelector(`[src="${src}"]`);
 
   let frame;
diff --git a/src/scripts/themes/pilot/index.ts b/src/scripts/themes/pilot/index.ts
index 348a3da..34a4b87 100644
--- a/src/scripts/themes/pilot/index.ts
+++ b/src/scripts/themes/pilot/index.ts
@@ -13,13 +13,17 @@ import type * as QueueEngine from "@applets/engine/queue/types.d.ts";
 
 import type * as AudioUI from "@applets/themes/pilot/ui/audio/types.d.ts";
 
+// TODO: Themes
+
 const engine = {
   audio: await applet<AudioEngine.State>("../../engine/audio"),
   queue: await applet<QueueEngine.State>("../../engine/queue"),
 };
 
 const _orchestrator = {
-  input: await applet("../../orchestrator/input-cache"),
+  input: await applet("../../orchestrator/input-cache", {
+    applets: { input: "todo" },
+  }),
   output: await applet("../../orchestrator/output-management"),
   queue: await applet("../../orchestrator/single-queue"),
 };
-- 
2.43.0