@moood/render 0.0.0 → 0.1.2

package/engine/speech.js

@@ -1,150 +1,150 @@
-// Lines said in the scene — whatever runs the game has someone say them: a line appears over the
-// one who says it (following it as the viewer walks: stage.screenOf; the narrator's low in the
-// middle), and is heard in its voice (Gemini, /speak — made once, kept for good); words and voice come together.
-// Lines are said one after another. While a line is heard its bubble glimmers; a bubble keeps a ▶
-// to hear it again, and the page is told (the "moood:speech" event: {id, text, on}) so it can light
-// the line up elsewhere too. While someone is about to speak — the one who answers thinking, the
-// voice being made — a "…" glimmers over them (thinking()).
-const MooodSpeech = (() => {
-  let stage = null, canvas = null, layer = null, voiceless = null, raf = 0, queue = Promise.resolve();
-  const bubbles = new Map(); // element id → { el, text, until, pending }
-  const waiting = new Map(); // element id → how many things it is about to say
-  let current = null; // the voice being heard right now
-  let said = 0;       // lines said before the player last spoke up: those not begun yet are dropped
-  const NARRATOR = 'narrator';
-  MooodVolume.on((kind, v) => { if (kind === 'voice' && current) current.volume = v; });
-
-  function init(opts) {
-    ({ stage, canvas, voiceless } = opts); // voiceless(why): a line couldn't be voiced
-    layer = document.createElement('div');
-    layer.id = 'speech';
-    canvas.after(layer);
-  }
-
-  const told = (id, text, on) => dispatchEvent(new CustomEvent('moood:speech', { detail: { id, text, on } }));
-
-  // a line's voice, loaded and ready to play (made by /speak once — kept for good); null if it can't
-  // be, or not in time — then the line is shown without it, and the lines after it aren't held up
-  const MAKING = 45000, LOADING = 15000;
-  async function voiced(text, voice, how, who) {
-    try {
-      const r = await fetch('/speak', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ text, voice, how, who }),
-        signal: AbortSignal.timeout(MAKING) });
-      if (!r.ok) throw new Error((await r.json().catch(() => ({}))).detail || `speech ${r.status}`);
-      const a = new Audio((await r.json()).url);
-      await new Promise((ok, fail) => {
-        const late = setTimeout(() => fail(new Error('the audio took too long to load')), LOADING);
-        a.oncanplaythrough = () => { clearTimeout(late); ok(); };
-        a.onerror = () => { clearTimeout(late); fail(new Error('the audio would not load')); };
-        a.load();
-      });
-      return a;
-    } catch (err) {
-      (window.__mooodErrors = window.__mooodErrors || []).push(`speech: ${err.message || err}`);
-      voiceless?.(err.name === 'TimeoutError' ? 'голос не успел' : err.message || String(err));
-      return null;
-    }
-  }
-
-  // plays a line's voice, the bubble glimmering; resolves when it has been heard
-  async function hear(id, text, a, bubble) {
-    bubble?.el.classList.add('speaking'); told(id, text, true);
-    current = a;
-    a.volume = MooodVolume.get('voice');
-    // (an audio that never says it ended — a stalled stream — is let go after its length)
-    try { await new Promise(done => { a.onended = a.onerror = done; a.currentTime = 0; a.play().catch(done); setTimeout(done, (a.duration || 30) * 1000 + 3000); }); }
-    finally { if (current === a) current = null; bubble?.el.classList.remove('speaking'); told(id, text, false); }
-  }
-
-  // the player started to speak: the voice being heard stops (its words stay on screen), and what
-  // was still to be said is dropped — the world listens to them now
-  function hush() {
-    said++;
-    if (!current) return;
-    current.pause();
-    current.onended();
-  }
-
-  function bubbleFor(id, text, voice, how, who) {
-    const old = bubbles.get(id);
-    if (old) old.el.remove();
-    const el = document.createElement('div');
-    el.className = id === NARRATOR ? 'bubble narrator' : 'bubble';
-    const p = document.createElement('p');
-    p.textContent = text;
-    el.append(p);
-    if (voice) {
-      const again = document.createElement('button');
-      again.type = 'button'; again.textContent = '▶'; again.title = 'ещё раз';
-      again.onclick = () => replay(id, text, voice, how, who);
-      el.append(again);
-    }
-    layer.append(el);
-    const b = { el, text, until: Infinity, pending: false };
-    bubbles.set(id, b);
-    if (!raf) raf = requestAnimationFrame(place);
-    return b;
-  }
-
-  function place() {
-    raf = 0;
-    const now = performance.now();
-    for (const [id, b] of bubbles) {
-      if (now > b.until) { b.el.remove(); bubbles.delete(id); if (waiting.get(id)) pend(id); continue; }
-      const at = id === NARRATOR ? [innerWidth / 2, innerHeight * 0.86] : stage.screenOf(id, 0.25, true);
-      b.el.style.visibility = at ? '' : 'hidden';
-      if (at) b.el.style.transform = `translate(${Math.round(at[0])}px, ${Math.round(at[1])}px) translate(-50%, -100%)`;
-      b.el.classList.toggle('fading', now > b.until - 1200);
-    }
-    if (bubbles.size) raf = requestAnimationFrame(place);
-  }
-
-  // someone is about to speak (on) — or no longer (off): a glimmering "…" over them meanwhile
-  function pend(id) {
-    const b = bubbleFor(id, '…');
-    b.pending = true;
-    b.el.classList.add('pending');
-  }
-  function thinking(id, on) {
-    const n = (waiting.get(id) || 0) + (on ? 1 : -1);
-    if (n > 0) waiting.set(id, n); else waiting.delete(id);
-    const b = bubbles.get(id);
-    if (n > 0 && (!b || b.until !== Infinity)) pend(id);
-    if (n <= 0 && b?.pending) { b.el.remove(); bubbles.delete(id); }
-  }
-
-  // id: who says it (an element of the scene); voice/how: heard in that voice, that way, played as
-  // `who` ("Savely, the old keeper"). A line with
-  // a voice appears when it can be heard — its words and its voice together; its voice is made
-  // while the lines before it are said.
-  function say(id, text, { voice, how, who } = {}) {
-    text = String(text || '').trim();
-    if (!text) return Promise.resolve();
-    const ready = voice ? voiced(text, voice, how, who) : Promise.resolve(null);
-    const turn = said;
-    const line = queue.then(async () => {
-      if (turn !== said) return;
-      if (voice) thinking(id, true);
-      const a = await ready;
-      if (voice) thinking(id, false);
-      const b = bubbleFor(id, text, voice, how, who);
-      const t0 = performance.now();
-      if (a) await hear(id, text, a, b);
-      // a line stays a while to be read: longer for a longer line, at least after it was heard
-      b.until = Math.max(performance.now() + 2500, t0 + 1500 + text.length * 60);
-    });
-    queue = line.catch(() => {});
-    return line;
-  }
-
-  async function replay(id, text, voice, how, who) {
-    const a = await voiced(text, voice, how, who);
-    if (!a) return;
-    const b = bubbles.get(id);
-    if (b) b.until = Infinity;
-    await hear(id, text, a, b);
-    if (b) b.until = performance.now() + 2500;
-  }
-
-  return { init, say, replay, thinking, hush };
-})();
+// Lines said in the scene — whatever runs the game has someone say them: a line appears over the
+// one who says it (following it as the viewer walks: stage.screenOf; the narrator's low in the
+// middle), and is heard in its voice (Gemini, /speak — made once, kept for good); words and voice come together.
+// Lines are said one after another. While a line is heard its bubble glimmers; a bubble keeps a ▶
+// to hear it again, and the page is told (the "moood:speech" event: {id, text, on}) so it can light
+// the line up elsewhere too. While someone is about to speak — the one who answers thinking, the
+// voice being made — a "…" glimmers over them (thinking()).
+const MooodSpeech = (() => {
+  let stage = null, canvas = null, layer = null, voiceless = null, raf = 0, queue = Promise.resolve();
+  const bubbles = new Map(); // element id → { el, text, until, pending }
+  const waiting = new Map(); // element id → how many things it is about to say
+  let current = null; // the voice being heard right now
+  let said = 0;       // lines said before the player last spoke up: those not begun yet are dropped
+  const NARRATOR = 'narrator';
+  MooodVolume.on((kind, v) => { if (kind === 'voice' && current) current.volume = v; });
+
+  function init(opts) {
+    ({ stage, canvas, voiceless } = opts); // voiceless(why): a line couldn't be voiced
+    layer = document.createElement('div');
+    layer.id = 'speech';
+    canvas.after(layer);
+  }
+
+  const told = (id, text, on) => dispatchEvent(new CustomEvent('moood:speech', { detail: { id, text, on } }));
+
+  // a line's voice, loaded and ready to play (made by /speak once — kept for good); null if it can't
+  // be, or not in time — then the line is shown without it, and the lines after it aren't held up
+  const MAKING = 45000, LOADING = 15000;
+  async function voiced(text, voice, how, who) {
+    try {
+      const r = await fetch('/speak', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ text, voice, how, who }),
+        signal: AbortSignal.timeout(MAKING) });
+      if (!r.ok) throw new Error((await r.json().catch(() => ({}))).detail || `speech ${r.status}`);
+      const a = new Audio((await r.json()).url);
+      await new Promise((ok, fail) => {
+        const late = setTimeout(() => fail(new Error('the audio took too long to load')), LOADING);
+        a.oncanplaythrough = () => { clearTimeout(late); ok(); };
+        a.onerror = () => { clearTimeout(late); fail(new Error('the audio would not load')); };
+        a.load();
+      });
+      return a;
+    } catch (err) {
+      (window.__mooodErrors = window.__mooodErrors || []).push(`speech: ${err.message || err}`);
+      voiceless?.(err.name === 'TimeoutError' ? 'голос не успел' : err.message || String(err));
+      return null;
+    }
+  }
+
+  // plays a line's voice, the bubble glimmering; resolves when it has been heard
+  async function hear(id, text, a, bubble) {
+    bubble?.el.classList.add('speaking'); told(id, text, true);
+    current = a;
+    a.volume = MooodVolume.get('voice');
+    // (an audio that never says it ended — a stalled stream — is let go after its length)
+    try { await new Promise(done => { a.onended = a.onerror = done; a.currentTime = 0; a.play().catch(done); setTimeout(done, (a.duration || 30) * 1000 + 3000); }); }
+    finally { if (current === a) current = null; bubble?.el.classList.remove('speaking'); told(id, text, false); }
+  }
+
+  // the player started to speak: the voice being heard stops (its words stay on screen), and what
+  // was still to be said is dropped — the world listens to them now
+  function hush() {
+    said++;
+    if (!current) return;
+    current.pause();
+    current.onended();
+  }
+
+  function bubbleFor(id, text, voice, how, who) {
+    const old = bubbles.get(id);
+    if (old) old.el.remove();
+    const el = document.createElement('div');
+    el.className = id === NARRATOR ? 'bubble narrator' : 'bubble';
+    const p = document.createElement('p');
+    p.textContent = text;
+    el.append(p);
+    if (voice) {
+      const again = document.createElement('button');
+      again.type = 'button'; again.textContent = '▶'; again.title = 'ещё раз';
+      again.onclick = () => replay(id, text, voice, how, who);
+      el.append(again);
+    }
+    layer.append(el);
+    const b = { el, text, until: Infinity, pending: false };
+    bubbles.set(id, b);
+    if (!raf) raf = requestAnimationFrame(place);
+    return b;
+  }
+
+  function place() {
+    raf = 0;
+    const now = performance.now();
+    for (const [id, b] of bubbles) {
+      if (now > b.until) { b.el.remove(); bubbles.delete(id); if (waiting.get(id)) pend(id); continue; }
+      const at = id === NARRATOR ? [innerWidth / 2, innerHeight * 0.86] : stage.screenOf(id, 0.25, true);
+      b.el.style.visibility = at ? '' : 'hidden';
+      if (at) b.el.style.transform = `translate(${Math.round(at[0])}px, ${Math.round(at[1])}px) translate(-50%, -100%)`;
+      b.el.classList.toggle('fading', now > b.until - 1200);
+    }
+    if (bubbles.size) raf = requestAnimationFrame(place);
+  }
+
+  // someone is about to speak (on) — or no longer (off): a glimmering "…" over them meanwhile
+  function pend(id) {
+    const b = bubbleFor(id, '…');
+    b.pending = true;
+    b.el.classList.add('pending');
+  }
+  function thinking(id, on) {
+    const n = (waiting.get(id) || 0) + (on ? 1 : -1);
+    if (n > 0) waiting.set(id, n); else waiting.delete(id);
+    const b = bubbles.get(id);
+    if (n > 0 && (!b || b.until !== Infinity)) pend(id);
+    if (n <= 0 && b?.pending) { b.el.remove(); bubbles.delete(id); }
+  }
+
+  // id: who says it (an element of the scene); voice/how: heard in that voice, that way, played as
+  // `who` ("Savely, the old keeper"). A line with
+  // a voice appears when it can be heard — its words and its voice together; its voice is made
+  // while the lines before it are said.
+  function say(id, text, { voice, how, who } = {}) {
+    text = String(text || '').trim();
+    if (!text) return Promise.resolve();
+    const ready = voice ? voiced(text, voice, how, who) : Promise.resolve(null);
+    const turn = said;
+    const line = queue.then(async () => {
+      if (turn !== said) return;
+      if (voice) thinking(id, true);
+      const a = await ready;
+      if (voice) thinking(id, false);
+      const b = bubbleFor(id, text, voice, how, who);
+      const t0 = performance.now();
+      if (a) await hear(id, text, a, b);
+      // a line stays a while to be read: longer for a longer line, at least after it was heard
+      b.until = Math.max(performance.now() + 2500, t0 + 1500 + text.length * 60);
+    });
+    queue = line.catch(() => {});
+    return line;
+  }
+
+  async function replay(id, text, voice, how, who) {
+    const a = await voiced(text, voice, how, who);
+    if (!a) return;
+    const b = bubbles.get(id);
+    if (b) b.until = Infinity;
+    await hear(id, text, a, b);
+    if (b) b.until = performance.now() + 2500;
+  }
+
+  return { init, say, replay, thinking, hush };
+})();

package/engine/volume.js

@@ -1,56 +1,56 @@
-// How loud the site is for whoever listens here: one setting for all of it, every scene — the
-// music and the voices, each 0..1, kept in this browser (and followed by its other tabs). The 🔊 in
-// the crumbs (any [data-volume] button) opens two sliders; the players ask get() and listen on().
-const MooodVolume = (() => {
-  const DEFAULT = { music: 0.4, voice: 1 };
-  const NAMES = { music: 'музыка', voice: 'голоса' };
-  const key = k => `moood:volume:${k}`;
-  const listeners = new Set();
-
-  function get(k) {
-    try { const v = parseFloat(localStorage.getItem(key(k))); if (v >= 0 && v <= 1) return v; } catch {}
-    return DEFAULT[k];
-  }
-  function set(k, v) {
-    try { localStorage.setItem(key(k), String(v)); } catch {}
-    tell(k);
-  }
-  function tell(k) { for (const f of listeners) f(k, get(k)); }
-  // f(kind, value): kind 'music' or 'voice' changed
-  function on(f) { listeners.add(f); }
-  addEventListener('storage', e => { for (const k in DEFAULT) if (e.key === key(k)) tell(k); });
-
-  // ── the sliders ──────────────────────────────────────────────────────────
-  let panel = null;
-  function build() {
-    panel = document.createElement('div');
-    panel.id = 'volume';
-    panel.hidden = true;
-    for (const k in DEFAULT) {
-      const row = document.createElement('label');
-      const name = document.createElement('span');
-      name.textContent = NAMES[k];
-      const r = document.createElement('input');
-      r.type = 'range'; r.min = 0; r.max = 1; r.step = 0.01; r.value = get(k); r.dataset.kind = k;
-      r.oninput = () => set(k, Number(r.value));
-      row.append(name, r);
-      panel.append(row);
-    }
-    document.body.append(panel);
-  }
-  function open(button) {
-    if (!panel) build();
-    for (const r of panel.querySelectorAll('input')) r.value = get(r.dataset.kind);
-    const at = button.getBoundingClientRect();
-    panel.style.left = `${Math.max(8, Math.min(at.left, innerWidth - 228))}px`;
-    panel.style.top = `${at.bottom + 8}px`;
-    panel.hidden = false;
-  }
-  document.addEventListener('click', e => {
-    const b = e.target.closest?.('[data-volume]');
-    if (b) { panel && !panel.hidden ? (panel.hidden = true) : open(b); return; }
-    if (panel && !panel.hidden && !panel.contains(e.target)) panel.hidden = true;
-  });
-
-  return { get, set, on };
-})();
+// How loud the site is for whoever listens here: one setting for all of it, every scene — the
+// music and the voices, each 0..1, kept in this browser (and followed by its other tabs). The 🔊 in
+// the crumbs (any [data-volume] button) opens two sliders; the players ask get() and listen on().
+const MooodVolume = (() => {
+  const DEFAULT = { music: 0.4, voice: 1 };
+  const NAMES = { music: 'музыка', voice: 'голоса' };
+  const key = k => `moood:volume:${k}`;
+  const listeners = new Set();
+
+  function get(k) {
+    try { const v = parseFloat(localStorage.getItem(key(k))); if (v >= 0 && v <= 1) return v; } catch {}
+    return DEFAULT[k];
+  }
+  function set(k, v) {
+    try { localStorage.setItem(key(k), String(v)); } catch {}
+    tell(k);
+  }
+  function tell(k) { for (const f of listeners) f(k, get(k)); }
+  // f(kind, value): kind 'music' or 'voice' changed
+  function on(f) { listeners.add(f); }
+  addEventListener('storage', e => { for (const k in DEFAULT) if (e.key === key(k)) tell(k); });
+
+  // ── the sliders ──────────────────────────────────────────────────────────
+  let panel = null;
+  function build() {
+    panel = document.createElement('div');
+    panel.id = 'volume';
+    panel.hidden = true;
+    for (const k in DEFAULT) {
+      const row = document.createElement('label');
+      const name = document.createElement('span');
+      name.textContent = NAMES[k];
+      const r = document.createElement('input');
+      r.type = 'range'; r.min = 0; r.max = 1; r.step = 0.01; r.value = get(k); r.dataset.kind = k;
+      r.oninput = () => set(k, Number(r.value));
+      row.append(name, r);
+      panel.append(row);
+    }
+    document.body.append(panel);
+  }
+  function open(button) {
+    if (!panel) build();
+    for (const r of panel.querySelectorAll('input')) r.value = get(r.dataset.kind);
+    const at = button.getBoundingClientRect();
+    panel.style.left = `${Math.max(8, Math.min(at.left, innerWidth - 228))}px`;
+    panel.style.top = `${at.bottom + 8}px`;
+    panel.hidden = false;
+  }
+  document.addEventListener('click', e => {
+    const b = e.target.closest?.('[data-volume]');
+    if (b) { panel && !panel.hidden ? (panel.hidden = true) : open(b); return; }
+    if (panel && !panel.hidden && !panel.contains(e.target)) panel.hidden = true;
+  });
+
+  return { get, set, on };
+})();

package/engine/widgets.js

@@ -1,88 +1,88 @@
-// Widgets — the scene's own bits of interface over the picture: a sign over someone's head,
-// a clock, a letter, a scoreboard, a panel with buttons (spec.widgets). Each is the artist's
-// HTML + CSS + JS, living right in the page: its markup and styles in a shadow root (so its CSS
-// and the page's don't mix), its scripts run as the page's own, given `root` (that shadow root:
-// root.getElementById, root.querySelector) and `widget` (its element). A widget is laid out in px
-// for a 1080-px-tall screen and scaled with the screen, so it looks the same everywhere. It
-// stands at a point of the frame (interface: a corner, the middle), or follows an element of the scene (hovering `lift` metres
-// over its anchor) as the viewer walks. Errors its scripts throw land in window.__mooodErrors.
-const MooodWidgets = (() => {
-  const REF = 1080;
-  const ANCHORS = { center: [0.5, 0.5], top: [0.5, 0], bottom: [0.5, 1], left: [0, 0.5], right: [1, 0.5],
-    'top-left': [0, 0], 'top-right': [1, 0], 'bottom-left': [0, 1], 'bottom-right': [1, 1] };
-  const report = (key, err) => (window.__mooodErrors = window.__mooodErrors || []).push(`widget ${key}: ${err && err.message || err}`);
-
-  // builds a widget's element: markup into its shadow root, then its scripts, in order
-  function make(w, key) {
-    const el = document.createElement('div');
-    el.className = 'widget';
-    el.dataset.id = key;
-    const root = el.attachShadow({ mode: 'open' });
-    root.innerHTML = `<style>:host{display:block;overflow:hidden}</style>${w.html}`;
-    // markup set as HTML doesn't run its scripts: run them ourselves (after the element is in the page)
-    const scripts = [...root.querySelectorAll('script')];
-    for (const s of scripts) s.remove();
-    el.start = () => {
-      for (const s of scripts) {
-        if (s.src) { const n = document.createElement('script'); n.src = s.src; n.onerror = () => report(key, `can't load ${s.src}`); document.head.append(n); continue; }
-        try { new Function('root', 'widget', s.textContent)(root, el); } catch (err) { report(key, err); }
-      }
-    };
-    return el;
-  }
-
-  function create({ canvas, stage }) {
-    let spec = null, items = [], timers = [], raf = 0, gen = 0;
-    const box = document.createElement('div');
-    box.id = 'widgets';
-    canvas.after(box);
-
-    function show(next) {
-      spec = next;
-      for (const t of timers) clearTimeout(t);
-      timers = [];
-      const list = (Array.isArray(spec?.widgets) ? spec.widgets : []).filter(w => w && typeof w.html === 'string');
-      // keep a widget (and its state) when only its placement changed
-      const old = new Map(items.map(it => [it.src, it]));
-      const fresh = [];
-      items = list.map((w, i) => {
-        const key = w.id || `widget${i}`, src = `${key}\n${w.html}`;
-        let it = old.get(src);
-        if (it) old.delete(src);
-        else { it = { src, el: make(w, key) }; fresh.push(it); }
-        it.w = w;
-        const el = it.el;
-        el.style.width = `${Math.max(1, w.width || 320)}px`;
-        el.style.height = `${Math.max(1, w.height || 120)}px`;
-        el.style.pointerEvents = w.interactive ? 'auto' : 'none';
-        el.classList.toggle('on', !(w.at > 0));
-        if (w.at > 0) timers.push(setTimeout(() => el.classList.add('on'), w.at * 1000));
-        if (w.for > 0) timers.push(setTimeout(() => el.classList.remove('on'), (Math.max(0, w.at || 0) + w.for) * 1000));
-        box.append(el); // in spec order: later ones on top
-        return it;
-      });
-      for (const it of old.values()) it.el.remove();
-      for (const it of fresh) it.el.start();
-      cancelAnimationFrame(raf);
-      const g = ++gen;
-      const loop = () => { if (g !== gen) return; place(); raf = requestAnimationFrame(loop); };
-      if (items.length) loop();
-    }
-
-    function place() {
-      // in the frame (engine.js): bars around it on screens too narrow or wide for it
-      const f = stage.frame(), k = f.h / REF;
-      for (const { w, el } of items) {
-        const [ax, ay] = ANCHORS[w.anchor] || (w.follow ? ANCHORS.bottom : ANCHORS.center);
-        const at = w.follow ? stage.screenOf(w.follow, w.lift ?? 0) : [f.x + (w.x ?? 0.5) * f.w, f.y + (w.y ?? 0.5) * f.h];
-        el.style.visibility = at ? '' : 'hidden';
-        if (!at) continue;
-        const fw = Math.max(1, w.width || 320), fh = Math.max(1, w.height || 120);
-        el.style.transform = `translate(${at[0] - ax * fw * k}px, ${at[1] - ay * fh * k}px) scale(${k})`;
-      }
-    }
-
-    return { show };
-  }
-  return { create };
-})();
+// Widgets — the scene's own bits of interface over the picture: a sign over someone's head,
+// a clock, a letter, a scoreboard, a panel with buttons (spec.widgets). Each is the artist's
+// HTML + CSS + JS, living right in the page: its markup and styles in a shadow root (so its CSS
+// and the page's don't mix), its scripts run as the page's own, given `root` (that shadow root:
+// root.getElementById, root.querySelector) and `widget` (its element). A widget is laid out in px
+// for a 1080-px-tall screen and scaled with the screen, so it looks the same everywhere. It
+// stands at a point of the frame (interface: a corner, the middle), or follows an element of the scene (hovering `lift` metres
+// over its anchor) as the viewer walks. Errors its scripts throw land in window.__mooodErrors.
+const MooodWidgets = (() => {
+  const REF = 1080;
+  const ANCHORS = { center: [0.5, 0.5], top: [0.5, 0], bottom: [0.5, 1], left: [0, 0.5], right: [1, 0.5],
+    'top-left': [0, 0], 'top-right': [1, 0], 'bottom-left': [0, 1], 'bottom-right': [1, 1] };
+  const report = (key, err) => (window.__mooodErrors = window.__mooodErrors || []).push(`widget ${key}: ${err && err.message || err}`);
+
+  // builds a widget's element: markup into its shadow root, then its scripts, in order
+  function make(w, key) {
+    const el = document.createElement('div');
+    el.className = 'widget';
+    el.dataset.id = key;
+    const root = el.attachShadow({ mode: 'open' });
+    root.innerHTML = `<style>:host{display:block;overflow:hidden}</style>${w.html}`;
+    // markup set as HTML doesn't run its scripts: run them ourselves (after the element is in the page)
+    const scripts = [...root.querySelectorAll('script')];
+    for (const s of scripts) s.remove();
+    el.start = () => {
+      for (const s of scripts) {
+        if (s.src) { const n = document.createElement('script'); n.src = s.src; n.onerror = () => report(key, `can't load ${s.src}`); document.head.append(n); continue; }
+        try { new Function('root', 'widget', s.textContent)(root, el); } catch (err) { report(key, err); }
+      }
+    };
+    return el;
+  }
+
+  function create({ canvas, stage }) {
+    let spec = null, items = [], timers = [], raf = 0, gen = 0;
+    const box = document.createElement('div');
+    box.id = 'widgets';
+    canvas.after(box);
+
+    function show(next) {
+      spec = next;
+      for (const t of timers) clearTimeout(t);
+      timers = [];
+      const list = (Array.isArray(spec?.widgets) ? spec.widgets : []).filter(w => w && typeof w.html === 'string');
+      // keep a widget (and its state) when only its placement changed
+      const old = new Map(items.map(it => [it.src, it]));
+      const fresh = [];
+      items = list.map((w, i) => {
+        const key = w.id || `widget${i}`, src = `${key}\n${w.html}`;
+        let it = old.get(src);
+        if (it) old.delete(src);
+        else { it = { src, el: make(w, key) }; fresh.push(it); }
+        it.w = w;
+        const el = it.el;
+        el.style.width = `${Math.max(1, w.width || 320)}px`;
+        el.style.height = `${Math.max(1, w.height || 120)}px`;
+        el.style.pointerEvents = w.interactive ? 'auto' : 'none';
+        el.classList.toggle('on', !(w.at > 0));
+        if (w.at > 0) timers.push(setTimeout(() => el.classList.add('on'), w.at * 1000));
+        if (w.for > 0) timers.push(setTimeout(() => el.classList.remove('on'), (Math.max(0, w.at || 0) + w.for) * 1000));
+        box.append(el); // in spec order: later ones on top
+        return it;
+      });
+      for (const it of old.values()) it.el.remove();
+      for (const it of fresh) it.el.start();
+      cancelAnimationFrame(raf);
+      const g = ++gen;
+      const loop = () => { if (g !== gen) return; place(); raf = requestAnimationFrame(loop); };
+      if (items.length) loop();
+    }
+
+    function place() {
+      // in the frame (engine.js): bars around it on screens too narrow or wide for it
+      const f = stage.frame(), k = f.h / REF;
+      for (const { w, el } of items) {
+        const [ax, ay] = ANCHORS[w.anchor] || (w.follow ? ANCHORS.bottom : ANCHORS.center);
+        const at = w.follow ? stage.screenOf(w.follow, w.lift ?? 0) : [f.x + (w.x ?? 0.5) * f.w, f.y + (w.y ?? 0.5) * f.h];
+        el.style.visibility = at ? '' : 'hidden';
+        if (!at) continue;
+        const fw = Math.max(1, w.width || 320), fh = Math.max(1, w.height || 120);
+        el.style.transform = `translate(${at[0] - ax * fw * k}px, ${at[1] - ay * fh * k}px) scale(${k})`;
+      }
+    }
+
+    return { show };
+  }
+  return { create };
+})();