refactor: Easier reactive state + some other improvements

src/pages/engines/audio/index.astro src/pages/engine/audio/index.astro

···
 import Applet from "../../../layouts/applet.astro";
 ---
 
-<Applet title="Diffuse engines/audio applet">
+<Applet title="Diffuse engine/audio applet">
   <div id="container">
     <audio
       src="https://archive.org/download/lp_moonlight-sonata_ludwig-van-beethoven-frdric-chopin-alexand/disc1%2F01.02.%20Moonlight%20Sonata%20Op.%2027%2C%20No.%202%20In%20C%20Sharp%20Minor%3A%20Allegretto.mp3?tunnel=1"

src/pages/engines/audio/manifest.json.ts src/pages/engine/audio/manifest.json.ts

···
 import { manifest } from "../../../common/pages/manifest.ts";
 
 export const GET = manifest({
-  name: "diffuse/engines/audio",
+  name: "diffuse/engine/audio",
   entrypoint: "index.html",
   actions: {
     load: {

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="engine/audio/" frameborder="0" height="0" width="0"></iframe>
+  <iframe src="ui/audio/" frameborder="0" style="width: 100%"></iframe>
 </Page>
 
 <style>
   body {
-    background: darkgray;
+    background: darkgrey;
   }
 </style>
 
···
   import { effect, signal } from "spellcaster/spellcaster.js";
 
   ////////////////////////////////////////////
-  // 🗂️ Applet index
+  // 🗂️ Applets
   ////////////////////////////////////////////
-  const index = {
-    engines: {
-      audio: await applet("engines/audio"),
-    },
-    interface: {
-      audio: await applet("interface/audio", { setHeight: true }),
-    },
+  const engine = {
+    audio: await applet("engine/audio"),
+  };
+
+  const ui = {
+    audio: await applet("ui/audio", { setHeight: true }),
   };
 
   ////////////////////////////////////////////
   // ⚡ Connect applets
   ////////////////////////////////////////////
-  index.interface.audio.ondata = (event) => {
-    if (event.data.isPlaying) {
-      index.engines.audio.sendAction("play", null);
-    } else {
-      index.engines.audio.sendAction("pause", null);
-    }
-  };
-
-  reactive(index.engines.audio, "isPlaying", (isPlaying: boolean) =>
-    index.interface.audio.sendAction("set_is_playing", isPlaying),
+  reactive(ui.audio, (isPlaying: boolean) =>
+    engine.audio.sendAction(isPlaying ? "play" : "pause", null),
   );
 
-  reactive(index.engines.audio, "progress", (progress: number) =>
-    index.interface.audio.sendAction("set_progress", progress),
-  );
+  reactive(engine.audio, (isPlaying: boolean) => ui.audio.sendAction("set_is_playing", isPlaying));
+  reactive(engine.audio, (progress: number) => ui.audio.sendAction("set_progress", progress));
 
   ////////////////////////////////////////////
   // 🪟 Applet initialiser
···
       `[src="${src}${src.endsWith("/") ? "" : "/"}"]`,
     );
 
-    if (opts.setHeight) {
-      frame.addEventListener(
-        "load",
-        () => {
-          frame.height = frame.contentWindow.document.body.scrollHeight + "px";
-        },
-        { once: true },
-      );
-    }
+    const applet = await applets.connect(frame.contentWindow);
+    if (opts.setHeight) applet.onresize = () => (frame.height = `${applet.height}px`);
 
-    return await applets.connect(frame.contentWindow);
+    return applet;
   }
 
   ////////////////////////////////////////////
   // 🔮 Reactive state management
   ////////////////////////////////////////////
-  function reactive<P extends string, T>(applet: Applet, property: P, effectFn: (t: T) => void) {
+  function reactive<P extends string, T>(applet: Applet, effectFn: (t: T) => void) {
+    const property = effectFn
+      .toString()
+      .slice(1)
+      .match(/([^(\)|,|\s)]+)/)[1];
+
     const [getter, setter] = signal(applet.data[property] as T);
 
     effect(() => effectFn(getter()));

src/pages/interface/audio/index.astro src/pages/ui/audio/index.astro

···
 import Applet from "../../../layouts/applet.astro";
 ---
 
-<Applet title="Diffuse interface/audio applet">
+<Applet title="Diffuse ui/audio applet">
   <div
     style="background: dimgray; color: white; height: 100px; line-height: 100px; text-align: center;"
   >

src/pages/interface/audio/manifest.json.ts src/pages/ui/audio/manifest.json.ts

···
 import { manifest } from "../../../common/pages/manifest.ts";
 
 export const GET = manifest({
-  name: "diffuse/interface/audio",
+  name: "diffuse/ui/audio",
   entrypoint: "index.html",
   actions: {
     set_is_playing: {