feat: Better applet connective tissue

astro.config.mjs

···
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  trailingSlash: "always",
+});

deno.json

···
 {
   "imports": {
-    "@web-applets/sdk": "npm:@web-applets/sdk@0.2.0-alpha.8",
-    "astro": "npm:astro@^5.4.1"
+    "@web-applets/sdk": "npm:@web-applets/sdk@0.2.0-alpha.12",
+    "astro": "npm:astro@^5.4.1",
+    "spellcaster": "npm:spellcaster@^5.0.2"
   },
   "tasks": {
     "build": "astro build",
-    "dev": "astro preview"
+    "dev": "astro dev"
   },
   "compilerOptions": {
     "lib": ["dom", "dom.iterable", "dom.asynciterable", "deno.ns"]

deno.lock

···
 {
   "version": "4",
   "specifiers": {
-    "npm:@web-applets/sdk@0.2.0-alpha.8": "0.2.0-alpha.8",
+    "npm:@web-applets/sdk@0.2.0-alpha.12": "0.2.0-alpha.12",
     "npm:asto@*": "0.1.0",
     "npm:asto@0.1.0": "0.1.0",
     "npm:astro@5.4.2": "5.4.2_vite@6.2.1_zod@3.24.2",
     "npm:astro@^5.4.1": "5.4.2_vite@6.2.1_zod@3.24.2",
-    "npm:create-astro@latest": "4.11.1"
+    "npm:create-astro@latest": "4.11.1",
+    "npm:spellcaster@^5.0.2": "5.0.2"
   },
   "npm": {
     "@astrojs/cli-kit@0.4.1": {
···
     "@ungap/structured-clone@1.3.0": {
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="
     },
-    "@web-applets/sdk@0.2.0-alpha.8": {
-      "integrity": "sha512-rEAAUlWy9IN8lNh7SGbnOPVGEOhtC7rfsCHK8Sc/sNhqTWY1Vwwiq6tsb+O2xHjibfWq3aJAQ7G8roR1Rcmzlg=="
+    "@web-applets/sdk@0.2.0-alpha.12": {
+      "integrity": "sha512-LCGHB/7q3h5EZReZAK9zrrODBDsFbJaNXhEhGFF8ga2JKXKnBCkeF3fYg7tTVsIOLY52dG7JkUo2911hEABfhw=="
     },
     "acorn@8.14.1": {
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg=="
···
     "signal-exit@3.0.7": {
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "signal-polyfill@0.1.2": {
+      "integrity": "sha512-HT9d+L9NMiTzMxb/tU2Baym6129ROyRETSjvchvSkQa7wN0+SrG/IUlsaBLqKn2c+4mlze6CgQBEvgBjxOpiaQ=="
+    },
     "simple-swizzle@0.2.2": {
       "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
       "dependencies": [
···
     },
     "space-separated-tokens@2.0.2": {
       "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="
+    },
+    "spellcaster@5.0.2": {
+      "integrity": "sha512-suCHnQlCyXAV1OCrL0jEjE8lCK+f2bfmnvBfIqkG6Q3fNiQ7mAaeXtSyEKCI5p2ifSieC5bS/59EcIfDh5PWMA==",
+      "dependencies": [
+        "signal-polyfill"
+      ]
     },
     "sprintf-js@1.0.3": {
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
···
   },
   "workspace": {
     "dependencies": [
-      "npm:@web-applets/sdk@0.2.0-alpha.8",
-      "npm:astro@^5.4.1"
+      "npm:@web-applets/sdk@0.2.0-alpha.12",
+      "npm:astro@^5.4.1",
+      "npm:spellcaster@^5.0.2"
     ]
   }
 }

src/pages/engines/audio/index.astro

···
   <script>
     import { applets } from "@web-applets/sdk";
 
-    const context = applets.register();
+    interface State {
+      isPlaying: boolean;
+      progress: number;
+    }
+
+    const context = applets.register<State>();
     const container = document.querySelector("#container");
     const audio = document.querySelector("audio");
 
+    ////////////////////////////////////////////
+    // Initial state
+    ////////////////////////////////////////////
+    context.data = {
+      isPlaying: false,
+      progress: 0,
+    };
+
+    ////////////////////////////////////////////
+    // Audio events
+    ////////////////////////////////////////////
     audio.ontimeupdate = (event) => {
-      context.data = {
-        progress:
-          isNaN(audio.duration) || audio.duration === 0 ? 0 : audio.currentTime / audio.duration,
-      };
+      const progress =
+        isNaN(audio.duration) || audio.duration === 0 ? 0 : audio.currentTime / audio.duration;
+      context.data = { ...context.data, progress };
     };
 
+    audio.onpause = () => (context.data = { ...context.data, isPlaying: false });
+    audio.onplay = () => (context.data = { ...context.data, isPlaying: true });
+
+    ////////////////////////////////////////////
+    // Actions
+    ////////////////////////////////////////////
     context.setActionHandler("load", (src: string) => {
       audio.src = src;
     });

src/pages/index.astro

···
 ---
 
 <Page title="Diffuse Applets Usage Example">
-  <iframe src="engines/audio" frameborder="0" height="0" width="0"></iframe>
-  <iframe src="interface/audio" frameborder="0" style="width: 100%"></iframe>
+  <iframe src="engines/audio/" frameborder="0" height="0" width="0"></iframe>
+  <iframe src="interface/audio/" frameborder="0" style="width: 100%"></iframe>
 </Page>
+
+<style>
+  body {
+    background: darkgray;
+  }
+</style>
 
 <script>
   import { applets } from "@web-applets/sdk";
+  import { effect, signal } from "spellcaster/spellcaster.js";
 
-  async function applet(src: string, opts: { setHeight?: boolean } = {}) {
-    const frame: HTMLIFrameElement = document.querySelector(`[src="${src}"]`);
-
-    if (opts.setHeight) {
-      frame.addEventListener(
-        "load",
-        () => {
-          frame.height = frame.contentWindow.document.body.scrollHeight + "px";
-        },
-        { once: true },
-      );
-    }
-
-    return await applets.connect(frame.contentWindow);
-  }
-
+  ////////////////////////////////////////////
+  // 🗂️ Applet index
+  ////////////////////////////////////////////
   const index = {
     engines: {
       audio: await applet("engines/audio"),
···
     },
   };
 
-  // Connect the applets
+  ////////////////////////////////////////////
+  // 🔮 Signals & effects
+  ////////////////////////////////////////////
+  const [progress, setProgress] = signal(0);
+  const [isPlaying, setIsPlaying] = signal(false);
+
+  effect(() => index.interface.audio.sendAction("set_is_playing", isPlaying()));
+  effect(() => index.interface.audio.sendAction("set_progress", progress()));
+
+  ////////////////////////////////////////////
+  // ⚡ Connect applets
+  ////////////////////////////////////////////
+  index.engines.audio.ondata = (event) => {
+    // NOTE: Instead of sending actions to the audio interface every time
+    //       this event is dispatched, which is at least every second when
+    //       audio is playing, we use signals and effects to manage that.
+    setIsPlaying(event.data.isPlaying);
+    setProgress(event.data.progress);
+  };
+
   index.interface.audio.ondata = (event) => {
     if (event.data.isPlaying) {
       index.engines.audio.sendAction("play", null);
···
     }
   };
 
-  index.engines.audio.ondata = (event) => {
-    index.interface.audio.sendAction("set_progress", event.data.progress);
-  };
+  ////////////////////////////////////////////
+  // 🛠️ Applet initialiser
+  ////////////////////////////////////////////
+  async function applet(src: string, opts: { setHeight?: boolean } = {}) {
+    const frame: HTMLIFrameElement = document.querySelector(
+      `[src="${src}${src.endsWith("/") ? "" : "/"}"]`,
+    );
+
+    if (opts.setHeight) {
+      frame.addEventListener(
+        "load",
+        () => {
+          frame.height = frame.contentWindow.document.body.scrollHeight + "px";
+        },
+        { once: true },
+      );
+    }
+
+    return await applets.connect(frame.contentWindow);
+  }
 </script>

src/pages/interface/audio/index.astro

···
 
     const context = applets.register<State>();
 
+    ////////////////////////////////////////////
+    // Initial state
+    ////////////////////////////////////////////
+    context.data = {
+      isPlaying: false,
+    };
+
+    ////////////////////////////////////////////
+    // Actions
+    ////////////////////////////////////////////
     context.setActionHandler("set_is_playing", (isPlaying: boolean) => {
-      context.data = { ...context.data, isPlaying };
+      context.data.isPlaying = isPlaying;
+      render();
     });
 
     context.setActionHandler("set_progress", (progress: number) => {
       document.body.querySelector("progress").value = Math.round(progress * 100);
+      render();
     });
 
-    context.ondata = () => {
-      document.body.querySelector("button").innerText = context.data.isPlaying ? "⏸️" : "▶️";
-    };
-
+    ////////////////////////////////////////////
+    // DOM
+    ////////////////////////////////////////////
     document.body.querySelector("button").onclick = () => {
       context.data = { isPlaying: !(context.data?.isPlaying ?? false) };
     };
+
+    function render() {
+      document.body.querySelector("button").innerText = context.data.isPlaying ? "⏸️" : "▶️";
+    }
+
+    render();
   </script>
 </Applet>