@moood/render 0.0.0-stage → 0.0.0

package/engine/render.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <title>moood · render</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="scene.css">
+  <style>html, body { margin: 0; height: 100%; overflow: hidden; background: #000; } #scene { position: fixed; inset: 0; width: 100%; height: 100%; } .titles { right: 0; }</style>
+</head>
+<body>
+  <!-- A scene from its starting viewpoint, no UI — what the render service (services/render)
+       screenshots for the artist's look at its own work, the pictures of scenes and assistants (MCP).
+       The service hands the
+       spec in as window.__mooodSpec; errors the scene's code threw end up in
+       window.__mooodRenderErrors; the title turns "ready" when it is time to take the picture. -->
+  <canvas id="scene"></canvas>
+  <header class="titles"><h1 id="title"></h1><p id="caption"></p></header>
+  <script src="kit.js"></script>
+  <script src="engine.js"></script>
+  <script src="gl.js"></script>
+  <script src="captions.js"></script>
+  <script src="widgets.js"></script>
+  <script src="scenestate.js"></script>
+  <script>
+    (async () => {
+      const errors = [];
+      addEventListener('error', e => errors.push(String(e.message)));
+      try {
+        const spec = window.__mooodSpec;
+        const bare = new URLSearchParams(location.search).has('bare');  // a picture for the list: no text
+        if (!bare) {
+          document.getElementById('title').textContent = spec.title || '';
+          document.getElementById('caption').textContent = spec.caption || '';
+        }
+        const modules = { texts: window.__mooodModules || {} }; // the modules the scene lists, given (kit.js)
+        const canvas = document.getElementById('scene'), stage = Moood.mount(canvas);
+        stage.show(spec, modules);
+        MooodState.start(spec, {}, { stage, modules }); // the starting state, scripts running (their errors are reported)
+        if (!bare) MooodWidgets.create({ canvas, stage }).show({ ...spec, widgets: (spec.widgets || []).map(w => ({ ...w, at: 0, for: 0 })) });
+        // show every caption at once, so the reviewer reads them all
+        if (!bare) MooodCaptions.show((spec.captions || []).map(c => ({ ...c, at: 0, for: 0 })));
+      } catch (e) { errors.push(String(e.message || e)); }
+      await new Promise(r => setTimeout(r, 1500));
+      errors.push(...(window.__mooodErrors || []));
+      window.__mooodRenderErrors = errors;
+      document.title = 'ready';
+    })();
+  </script>
+</body>
+</html>

package/engine/scene.css

@@ -0,0 +1,124 @@
+/* Any page with a scene (web/scene, shared by every game): the living scene full-screen, its title,
+   timed captions, widgets, the lines said over whoever says them, the selection's glow, what can be
+   done with a thing picked, a strip of
+   the theme's scenes. Each page adds its own (its panels, the microphone). */
+html, body { margin: 0; height: 100%; overflow: hidden; background: #07080c; color: #e6e8ee; font-family: Georgia, "Times New Roman", serif;
+  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 1.4s ease; }
+#scene.away { opacity: 0; }
+a { color: inherit; }
+
+.titles { position: fixed; top: 5vh; left: 0; right: 0; padding: 0 16px; text-align: center; pointer-events: none; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
+  transition: opacity 3s ease; }
+.titles.gone { opacity: 0; }
+/* in the Android app the app's own bar is over the top (--app-top) */
+body.app .titles { top: calc(var(--app-top, 0px) + 2vh); }
+.titles h1 { margin: 0; font-weight: normal; font-style: italic; font-size: clamp(1.6rem, 4vw, 2.8rem); letter-spacing: 0.04em; }
+.titles p { margin: 0.6em 0 0; font-style: italic; opacity: 0.75; font-size: clamp(0.95rem, 1.6vw, 1.15rem); }
+
+/* the selection's glow (select.js) */
+#select-overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+
+/* what can be done with the thing picked (actions.js): beside it */
+#actions { position: fixed; left: 0; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 3px; min-width: 150px; max-width: 280px;
+  padding: 8px; border-radius: 12px; background: rgba(10, 12, 18, 0.86); font: 15px/1.35 Georgia, 'Times New Roman', serif; color: #eee7da;
+  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45); }
+#actions[hidden] { display: none; }
+#actions b { padding: 2px 8px 4px; font-weight: normal; font-style: italic; font-size: 13px; opacity: 0.6; }
+#actions button { border: 0; border-radius: 8px; padding: 6px 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+#actions button:hover, #actions button:focus-visible { background: rgba(255, 228, 170, 0.14); outline: none; }
+
+/* timed captions (spec.captions) */
+#captions { position: fixed; left: 0; right: 0; bottom: 14vh; z-index: 2; pointer-events: none; text-align: center; }
+#captions p { margin: 0.4em auto; max-width: 42em; padding: 0 16px; font: italic 400 clamp(17px, 2.1vw, 26px)/1.4 Georgia, 'Times New Roman', serif;
+  color: rgba(240, 236, 228, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 2.4s ease; }
+#captions p:not(.on) { position: absolute; left: 0; right: 0; }
+#captions p.on { opacity: 1; }
+
+/* widgets (spec.widgets) */
+#widgets { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
+#widgets .widget { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; transition: opacity 1.2s ease; }
+#widgets .widget.on { opacity: 1; }
+
+/* lines said (speech.js): over the one who says it, glimmering while heard; the narrator's low in
+   the middle */
+#speech { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
+#speech .bubble { position: absolute; left: 0; top: 0; max-width: min(340px, 40vw); display: flex; gap: 6px; align-items: flex-start;
+  padding: 8px 12px; border-radius: 14px; background: rgba(12, 14, 22, 0.78); border: 1px solid rgba(255, 255, 255, 0.14);
+  color: rgba(244, 240, 232, 0.95); font: 15px/1.4 Georgia, 'Times New Roman', serif; transition: opacity 1.2s ease, box-shadow 0.3s; }
+#speech .bubble.narrator { max-width: min(640px, 80vw); background: rgba(12, 14, 22, 0.55); border-color: transparent; font-style: italic; font-size: 17px; }
+#speech .bubble p { margin: 0; }
+#speech .bubble button { pointer-events: auto; flex: none; border: 0; background: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 12px; padding: 2px; }
+#speech .bubble button:hover { opacity: 1; }
+#speech .bubble.speaking { animation: speaking 1.4s ease-in-out infinite; }
+#speech .bubble.fading { opacity: 0; }
+#speech .bubble.pending { padding: 4px 12px; letter-spacing: 0.2em; animation: working 1.2s ease-in-out infinite; }
+@keyframes speaking { 50% { box-shadow: 0 0 18px rgba(255, 220, 160, 0.45); border-color: rgba(255, 220, 160, 0.6); } }
+@keyframes working { 50% { opacity: 0.55; } }
+
+/* the microphone over what the player pressed on: hold to speak */
+#mic { position: fixed; left: 0; top: 0; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
+  border: 1px solid rgba(255, 228, 160, 0.6); background: rgba(12, 14, 22, 0.72); color: rgba(255, 236, 200, 0.95);
+  display: grid; place-items: center; cursor: pointer; touch-action: none; transition: transform 0.2s, background 0.2s, opacity 0.3s; }
+#mic svg { width: 26px; height: 26px; }
+#mic[hidden] { display: none; }
+#mic.on { transform: scale(1.18); background: rgba(150, 40, 30, 0.75); border-color: rgba(255, 170, 140, 0.9); animation: listening 1.1s ease-in-out infinite; }
+#mic.busy { opacity: 0.5; }
+@keyframes listening { 50% { box-shadow: 0 0 0 12px rgba(255, 140, 110, 0.15); } }
+
+/* what the player said, as it is heard */
+#heard { position: fixed; left: 50%; bottom: 6vh; z-index: 3; transform: translateX(-50%); max-width: min(640px, 86vw); padding: 8px 16px;
+  border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.92); font: 16px/1.4 Georgia, serif;
+  pointer-events: none; opacity: 0; transition: opacity 0.4s; }
+#heard.on { opacity: 1; }
+#heard.partial { color: rgba(255, 255, 255, 0.6); font-style: italic; }
+
+/* the theme's scenes and what is being drawn (strip.js), low on the right */
+#strip { position: fixed; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 6px; max-width: 46vw; overflow-x: auto; padding: 4px; }
+#strip[hidden] { display: none; }
+#strip a { flex: none; display: block; width: 80px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(12, 14, 22, 0.6); opacity: 0.75; transition: opacity 0.2s, border-color 0.2s; }
+#strip a:hover { opacity: 1; }
+#strip a.here { opacity: 1; border-color: rgba(255, 228, 170, 0.85); }
+#strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
+#strip img[hidden] { display: none; }
+/* a scene being drawn: its sketch as it is now, marked; waiting ones dashed */
+#strip a.sketch { position: relative; opacity: 1; border-color: rgba(255, 196, 120, 0.85); animation: drawing 1.6s ease-in-out infinite; }
+#strip a.sketch.waiting { border-style: dashed; animation: none; opacity: 0.75; }
+#strip .badge { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; font: italic 10px/1.3 Georgia, serif; color: #ffe3c0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }
+@keyframes drawing { 50% { box-shadow: 0 0 0 2px rgba(255, 176, 100, 0.35); } }
+
+/* around a scene on a page (the crumbs top-left: nav.css): the game stumbling, what a scene was
+   asked for, a drawing's work */
+
+/* the master stumbled (an error in its turn) */
+#trouble { position: fixed; left: 14px; bottom: 12px; z-index: 3; max-width: 60vw; font: italic 13px/1.4 Georgia, serif; color: rgba(255, 170, 150, 0.85);
+  pointer-events: none; opacity: 0; transition: opacity 0.6s; }
+#trouble.on { opacity: 1; }
+
+#about { position: fixed; left: 14px; top: 12px; z-index: 4; max-width: min(520px, 80vw); max-height: 70vh; overflow: auto; padding: 8px 12px;
+  border-radius: 12px; background: rgba(12, 14, 22, 0.78); font: 13px/1.45 Georgia, serif; color: rgba(240, 236, 228, 0.9); }
+#about summary { cursor: pointer; font-style: italic; opacity: 0.8; }
+#about .note { white-space: pre-wrap; opacity: 0.75; font-size: 12px; }
+#crumbs ~ #about, #crumbs ~ #work { top: 48px; }
+
+/* a scene being drawn (drawing.html): what was asked, its state, what the artist says as it works */
+#work { position: fixed; left: 14px; top: 12px; z-index: 4; width: min(420px, 80vw); max-height: 60vh; display: flex; flex-direction: column; gap: 6px;
+  padding: 10px 14px; border-radius: 12px; background: rgba(12, 14, 22, 0.8); font: 13px/1.45 Georgia, serif; color: rgba(240, 236, 228, 0.92); }
+#work .state { margin: 0; font-style: italic; color: #ffcf9a; }
+#work.drawing .state::before { content: '● '; animation: working 1.2s ease-in-out infinite; }
+#work .asked { margin: 0; opacity: 0.8; max-height: 9em; overflow: auto; }
+#work ol { margin: 0; padding: 0; list-style: none; overflow: auto; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
+#work li { opacity: 0.85; }
+#work li.tool { opacity: 0.45; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
+
+/* the ways the scene can change (directions.js): a panel to try them */
+#directions { position: fixed; left: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
+  border-radius: 12px; background: rgba(8, 10, 16, 0.78); font-size: 13px; -webkit-user-select: none; user-select: none; }
+#directions[hidden] { display: none; }
+#directions .direction { white-space: nowrap; display: grid; grid-template-columns: 15em auto 10em auto; align-items: center; gap: 6px; }
+#directions .direction.blocked { opacity: 0.4; }
+#directions button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 12px; opacity: 0.75; }
+#directions button:hover:not(:disabled) { opacity: 1; }
+#directions input { width: 100%; accent-color: #e8b86a; }

package/engine/scenestate.js

@@ -0,0 +1,220 @@
+// The scene's state and its scripts — the scene's own mechanics, knowing nothing of the game
+// played on it. The state is a set of values (spec.state holds where they start: "time": "20:00",
+// "dawn": 0, "girl": "waiting" …) — the scene's parameters. Whatever changes them, the scene reacts:
+//   scripts — spec.script and any element's `script`: JS run in the page (a clock that ticks, a
+//     ship that passes at 00:50, someone walking to where the state says);
+//   the game — whatever runs on the scene sets them (its agents, its master): the page passes them on;
+//   widgets — MooodState is global: get / set / on.
+// The painting code reads the current values as e.state and is repainted when they change. A
+// number may be set to move there over some seconds, along an easing curve (kit.js: smooth by
+// default — it starts and stops gently; linear, in, out, back, spring, anticipate…). What a value
+// was a moment ago stays known for a while (was): what lags behind — a coat's tail, hair, a
+// head that follows — reads it. A script may tell that something happened (scene.tell): the
+// game decides what it means.
+const MooodState = (() => {
+  let stage = null, tell = null, save = null, t0 = performance.now();
+  let values = {}, cur = {}, tweens = new Map(), listeners = [], timers = [], raf = 0, pending = {}, flushTimer = 0;
+  // each number's recent moves, to say what it was a moment ago: key → [{start, end, from, to, curve}]
+  // (a jump: start = end); kept for PAST seconds
+  const PAST = 10;
+  // the engine's own values (engine.js, gl.js: the camera a film moves, its fade): 0 until set
+  const ENGINE = { camera_x: 0, camera_h: 0, camera_z: 0, camera_look: 0, fade: 0 };
+  let past = new Map();
+  const report = (who, err) => (window.__mooodErrors = window.__mooodErrors || []).push(`script ${who}: ${err && err.message || err}`);
+
+  // where a move is at `now` (a move along a path: where its path is, `way` 0…1 of it)
+  const along = (m, now) => {
+    if (now >= m.end) return m.to;
+    if (now <= m.start) return m.from;
+    const u = m.curve((now - m.start) / (m.end - m.start));
+    return m.way ? m.way(u) : m.from + (m.to - m.from) * u;
+  };
+  // what a number was `ago` seconds ago (as it is now if it hasn't moved since)
+  function was(key, ago = 0) {
+    const now = performance.now(), at = now - ago * 1000, moves = past.get(key);
+    if (!moves || !moves.length) return cur[key];
+    for (let i = moves.length - 1; i >= 0; i--) if (moves[i].start <= at) return along(moves[i], at);
+    return moves[0].from;
+  }
+  function remember(key, move) {
+    const moves = past.get(key) || [], gone = move.start - PAST * 1000;
+    while (moves.length > 1 && moves[1].end < gone) moves.shift();
+    moves.push(move);
+    past.set(key, moves);
+  }
+
+  function publish() { cur = { ...values }; for (const [k, tw] of tweens) cur[k] = along(tw, performance.now()); stage?.setState(cur, was, sample); }
+  // the moving values, where they are now (the stage asks as it paints a frame)
+  function sample() {
+    if (!tweens.size) return;
+    const now = performance.now();
+    for (const [k, tw] of tweens) if (now >= tw.end) tweens.delete(k);
+    publish();
+  }
+  function tick() {
+    raf = 0;
+    sample();
+    if (tweens.size) raf = requestAnimationFrame(tick);
+  }
+  function emit(ev, key, ...args) {
+    for (const l of listeners.slice()) {
+      if (l.ev !== ev || (l.key != null && l.key !== key)) continue;
+      try { l.fn(...args); } catch (err) { report(l.who, err); }
+    }
+  }
+  // changes go to the game's keeping (if it keeps them), a few at a time
+  function keep(changes) {
+    if (!save) return;
+    Object.assign(pending, changes);
+    clearTimeout(flushTimer);
+    flushTimer = setTimeout(() => { const body = pending; pending = {}; save(body); }, 500);
+  }
+  // set a value; a number with `over` seconds moves there along `ease` (a curve's name, or u → u);
+  // null removes it. kept: false — the game set it and keeps it itself
+  function set(key, value, over = 0, ease = 'smooth', { kept = true } = {}) {
+    key = String(key);
+    const old = key in cur ? cur[key] : key in values ? values[key] : ENGINE[key];
+    if (value === undefined) value = null;
+    const now = performance.now();
+    if (typeof value === 'number' && typeof old === 'number' && over > 0 && value !== old) {
+      const move = { start: now, end: now + over * 1000, from: old, to: value, curve: MooodKit.anim.easeOf(ease) };
+      tweens.set(key, move);
+      remember(key, move);
+      if (!raf) raf = requestAnimationFrame(tick);
+    } else {
+      tweens.delete(key);
+      if (typeof value === 'number') remember(key, { start: now, end: now, from: typeof old === 'number' ? old : value, to: value, curve: MooodKit.anim.ease.linear });
+    }
+    if (value === null) delete values[key]; else values[key] = value;
+    publish();
+    if (kept) keep({ [key]: value });
+    if (JSON.stringify(old) !== JSON.stringify(value)) emit('change', key, value, old, key);
+  }
+  // several numbers moved together through points, as one movement: keys ['cart_a', 'cart_d'], points
+  // [[a, d], …] (from where they are now); over `over` seconds or at `speed` (their units a second,
+  // along the way), along `ease` — so it slows nowhere but where the curve says (a path cut into
+  // set()s stops at every corner). Returns its seconds.
+  function path(keys, points, { over = 0, speed = 0, ease = 'smooth' } = {}) {
+    keys = keys.map(String);
+    const from = keys.map(k => Number(k in cur ? cur[k] : k in values ? values[k] : ENGINE[k]) || 0);
+    const pts = [from, ...points.map(p => keys.map((_, i) => Number(p[i]) || 0))], to = pts[pts.length - 1];
+    const ends = [0];
+    for (let i = 1; i < pts.length; i++) ends.push(ends[i - 1] + Math.hypot(...pts[i].map((v, j) => v - pts[i - 1][j])));
+    const length = ends[ends.length - 1], seconds = over > 0 ? over : speed > 0 ? length / speed : 0;
+    if (!(seconds > 0 && length > 0)) { keys.forEach((k, i) => set(k, to[i])); return 0; }
+    const at = (u, j) => {
+      const d = u * length;
+      let i = 1;
+      while (i < ends.length - 1 && ends[i] < d) i++;
+      const f = (d - ends[i - 1]) / ((ends[i] - ends[i - 1]) || 1);
+      return pts[i - 1][j] + (pts[i][j] - pts[i - 1][j]) * f;
+    };
+    const now = performance.now(), curve = MooodKit.anim.easeOf(ease), old = keys.map(k => cur[k]);
+    keys.forEach((k, j) => {
+      const move = { start: now, end: now + seconds * 1000, from: from[j], to: to[j], curve, way: u => at(u, j) };
+      tweens.set(k, move);
+      remember(k, move);
+      values[k] = to[j];
+    });
+    if (!raf) raf = requestAnimationFrame(tick);
+    publish();
+    keep(Object.fromEntries(keys.map((k, j) => [k, to[j]])));
+    keys.forEach((k, j) => { if (old[j] !== to[j]) emit('change', k, to[j], old[j], k); });
+    return seconds;
+  }
+  // an angle in degrees, turned the short way round (from 170 to −170 is 20°, not 340°)
+  function turn(key, degrees, over = 0, ease = 'smooth') {
+    const old = Number(key in cur ? cur[key] : values[key]) || 0;
+    set(key, old + ((((degrees - old) % 360) + 540) % 360 - 180), over, ease);
+  }
+
+  // the API a script gets: for the scene (id null) or for one element
+  function api(who, id, element, shared) {
+    const own = fn => (...a) => { try { fn(...a); } catch (err) { report(who, err); } };
+    const after = (seconds, fn) => { const h = setTimeout(own(fn), Math.max(0, seconds) * 1000); timers.push(() => clearTimeout(h)); };
+    return {
+      id, element,
+      anim: MooodKit.anim, kit: shared.kit, lib: shared.lib,
+      get state() { return cur; },
+      get time() { return (performance.now() - t0) / 1000; },   // seconds since the scene opened
+      get: key => cur[key],
+      set: (key, value, over, ease) => set(key, value, over, ease),
+      turn: (key, degrees, over, ease) => turn(key, degrees, over, ease),
+      path: (keys, points, opts) => path(keys, points, opts),
+      was: (key, ago) => was(key, ago),
+      // a platformer's hero now: { across, elevation (metres), ground } — or null
+      hero: () => stage?.hero?.() ?? null,
+      // something happened in the scene (about one of its elements, if `about`): the game hears it
+      tell: (text, about = null) => tell?.(String(text), about),
+      every(seconds, fn) { const h = setInterval(own(fn), Math.max(0.05, seconds) * 1000); timers.push(() => clearInterval(h)); },
+      after,
+      // a timeline: rows [at, key, value, over?, ease?] — or [at, fn] — where `at` is the second it
+      // starts (from now), or '+s': s seconds after the row before it ends ('+0': as it ends); a
+      // key in degrees turned the short way: [at, key, {turn: degrees}, over?, ease?]; numbers
+      // moved together through points (path, above): [at, [keys], {path: points}, over, ease?].
+      // Returns when the last row ends (seconds from now).
+      play(rows) {
+        let end = 0, last = 0;
+        for (const row of rows) {
+          const [at, a, b, over = 0, ease] = row;
+          const start = typeof at === 'string' && at.startsWith('+') ? last + Number(at.slice(1)) : Number(at);
+          if (typeof a === 'function') after(start, a);
+          else if (Array.isArray(a) && b && typeof b === 'object' && Array.isArray(b.path)) after(start, () => path(a, b.path, { over, ease }));
+          else if (b && typeof b === 'object' && 'turn' in b) after(start, () => turn(a, b.turn, over, ease));
+          else after(start, () => set(a, b, over, ease));
+          last = start + (typeof a === 'function' ? 0 : over);
+          end = Math.max(end, last);
+        }
+        return end;
+      },
+      // on('change', fn(value, old, key)) · on('change', key, fn) · on('load', fn(state))
+      on(ev, a, b) {
+        const fn = typeof a === 'function' ? a : b, key = typeof a === 'function' ? null : String(a);
+        listeners.push({ ev, key, fn, who });
+      },
+    };
+  }
+
+  // (re)starts the scene: its starting values, `state` on top (what the game kept), then the
+  // scripts — once what they share (the world's modules, the scene's lib) is here. opts: stage;
+  // modules — where the spec's modules come from (kit.js: {world, refs} or {texts});
+  // tell(text, about) — what the scripts tell; save(changes) — the game keeps the values the scene
+  // changes (none: they live as long as the page)
+  let run = 0;
+  function start(spec, state = {}, opts = {}) {
+    stop();
+    stage = opts.stage || stage;
+    tell = opts.tell || null;
+    save = opts.save || null;
+    values = { ...(spec?.state && typeof spec.state === 'object' ? spec.state : {}), ...state };
+    past = new Map();
+    t0 = performance.now();
+    publish();
+    emit('load', null, cur);
+    const mine = ++run;
+    const go = shared => {
+      if (mine !== run) return; // started again meanwhile
+      const exec = (code, who, id, element) => {
+        if (typeof code !== 'string' || !code.trim()) return;
+        try { new Function('scene', code)(api(who, id, element, shared)); } catch (err) { report(who, err); }
+      };
+      exec(spec?.script, 'scene', null, null);
+      for (const o of spec?.objects || []) exec(o.script, o.name || o.id, o.id || null, o);
+    };
+    const shared = MooodKit.shared(spec, opts.modules);
+    if (shared instanceof Promise) shared.then(go); else go(shared);
+  }
+  function stop() {
+    for (const off of timers) off();
+    // the scripts' listeners go; widgets' stay (a widget lives on while its html is the same)
+    timers = []; listeners = listeners.filter(l => l.who === 'widget'); tweens.clear();
+    cancelAnimationFrame(raf); raf = 0;
+  }
+
+  return {
+    start, stop, set, turn, path, was,
+    get: key => cur[key],
+    all: () => cur,
+    on: (ev, a, b) => api('widget', null, null, { kit: {}, lib: {} }).on(ev, a, b),
+  };
+})();