tinywebui 0.1.0

package/public/themes/README.md

@@ -0,0 +1,178 @@
+# Themes
+
+A theme is a folder drop, not a patch. Nothing in `app.js` or `styles.css`
+knows any theme exists, and adding one never changes either file.
+
+```
+public/themes/
+  manifest.json       the list. one line per theme
+  theme-loader.js     the only bridge to the app
+  drivers/
+    scene-kit.js      the runtime a moving theme is built on
+  fall-fairy/
+    fall-fairy.css    a theme
+    fall-fairy.js     ...and its scenery
+```
+
+## The smallest theme
+
+Drop a folder with a CSS file in it and add a line to `manifest.json`:
+
+```json
+{ "id": "dusk", "name": "Dusk", "file": "dusk/dusk.css" }
+```
+
+The file reassigns the variables `styles.css` already reads. That is the whole
+API:
+
+```css
+:root[data-theme="dusk"] {
+  --bg: #12131a; --panel: #1a1c26; --line: #2e3142; --fg: #e9eaf2;
+  --muted: #a3a7bd; --faint: #878ba4; --accent: #7c6cff; --tool: #4fd6b8; --err: #ff8093;
+  --mono: "Space Mono", ui-monospace, monospace;
+}
+```
+
+Anything past that is yours, on one condition: **scope every rule under
+`[data-theme="<id>"]`.** A theme that leaks outside its own attribute is a
+fork of the stylesheet wearing a theme's clothes.
+
+The picker in settings → appearance is built from the manifest, and the choice
+is remembered in `localStorage`. Removing a theme's files is a complete
+uninstall.
+
+## A theme that moves
+
+Name a module and it is mounted while your theme is selected, unmounted when it
+is not:
+
+```json
+{ "id": "dusk", "name": "Dusk", "file": "dusk/dusk.css", "js": "dusk/dusk.js" }
+```
+
+```js
+export function mount() {
+  // ...
+  return () => { /* leave no trace */ };
+}
+```
+
+`mount()` returns its own teardown. If the module throws or fails to load, the
+loader swallows it and your theme is still a theme — the CSS half always stands
+on its own.
+
+## scene-kit
+
+Don't write that module by hand. Every moving theme needs the same six
+unglamorous parts — canvases at the right depth, a device-pixel-correct resize,
+a frame loop that pauses itself when the tab is hidden, the reduced-motion
+path, the app's current state, and a teardown that leaves nothing behind.
+`drivers/scene-kit.js` is those parts, so your theme is only ever its own
+artwork. It is a driver, not a theme: nothing about it is specific to any one
+skin, and a new theme imports it rather than copying it.
+
+```js
+import { createScene } from '../drivers/scene-kit.js';
+
+export function mount() {
+  let dots = [];
+  return createScene({
+    layers: [{ name: 'bg', z: -1 }, { name: 'fg', z: 5 }],
+    vars:      { glow: '--dusk-glow', ink: ['--dusk-a', '--dusk-b'] },
+    fallbacks: { glow: '#ffd98a',     ink: ['#7c6cff', '#4fd6b8'] },
+
+    setup(ctx)      { dots = seed(ctx.w, ctx.h); },   // mount, resize, palette change
+    update(ctx, dt) { for (const d of dots) d.y += d.v * dt; },
+    draw(ctx)       { ctx.clear('fg'); /* ... */ },
+  });
+}
+```
+
+`createScene` returns the unmount function, so `return createScene({...})` is
+the whole of `mount()`.
+
+### What `ctx` gives you
+
+| | |
+|---|---|
+| `ctx.w` `ctx.h` | viewport, in CSS pixels |
+| `ctx.t` `ctx.dt` | seconds since mount, seconds this frame |
+| `ctx.layer(name)` | that layer's 2d context, already DPR-scaled |
+| `ctx.clear(name)` | clear a layer |
+| `ctx.pal` | your `vars`, resolved against the live palette |
+| `fallbacks` | a value per `vars` key, used when a property reads back empty |
+| `ctx.mode` | `empty` · `idle` · `busy` · `done` |
+| `ctx.modeAge` | seconds in the current mode |
+| `ctx.pointer` | `{ x, y, inside, vx, vy, speed, downFor }` |
+| `ctx.anchor(what)` | `transcript` · `scroller` · `composer` · `viewport` → DOMRect\|null |
+| `ctx.words(n)` | up to n perchable word handles in the transcript |
+| `ctx.reduced` | true when the viewer asked for less motion |
+| `ctx.on(evt, fn)` | `mode` · `pointerdown` · `resize` |
+
+### The modes
+
+All four are read from markup the app already produces for its own reasons. No
+hook was added anywhere for a theme to read, and a theme never queries the app
+itself — that coupling lives in `scene-kit.js`, once, for every theme at once.
+
+| mode | what the app is doing | where it comes from |
+|---|---|---|
+| `empty` | a fresh chat, nothing asked yet | `#wrap` has no children |
+| `busy` | a turn is running | `#send` carries `.stop` |
+| `done` | an answer just landed (transient, ~2.4s) | `.stop` came off |
+| `idle` | a transcript, sitting there | anything else |
+
+### Words
+
+`ctx.words(n)` returns handles onto real text in the transcript. Each keeps a
+live `Range`, so ask for the box when you need it rather than caching it:
+
+```js
+const w = pick(ctx.words(60));
+const r = w.rect();     // DOMRect, or null if edited away or scrolled out
+```
+
+Because the box is read back per frame, anything you park on a word rides it as
+the transcript scrolls, and lets go by itself when the word is re-rendered. The
+harvest is the expensive half, so it is sampled, capped, cached for a beat, and
+thrown away whenever the transcript changes or scrolls.
+
+## House rules
+
+These are not the loader's to enforce. They are what keeps a theme a theme.
+
+- **Decorative only.** Layers are `pointer-events: none`. Nothing a theme draws
+  may be the only way to see or do something.
+- **Read, never write.** A theme reads state; it never dispatches an event,
+  sets a class on app markup, or touches the transcript.
+- **Stay under the app's ceiling.** Settings sits at `z-index: 10`, the mobile
+  drawer at `19`/`20`. A foreground layer above those covers the UI.
+- **Text first.** If your scene sits behind the transcript, put a scrim on the
+  reading surfaces. `fall-fairy.css` does this with `color-mix` and a blur; the
+  forest is never allowed behind a raw paragraph.
+- **Honour `prefers-reduced-motion`.** The kit already does — it draws one still
+  frame and keeps the observers running, so state still changes without
+  animating. Don't defeat it.
+- **Offline is the default.** TinyWebUI runs on a laptop with no network. A
+  theme reaching for a CDN needs a fallback that is genuinely fine
+  (`fall-fairy.css` ships full local font stacks behind its `@import`).
+- **Clean up.** Whatever `mount()` added, its teardown removes. The kit handles
+  this for everything it created; anything you add yourself is yours to undo.
+
+## fall-fairy
+
+The worked example, and the stress test for all of the above: a procedural
+autumn forest on two canvases, a flock with flight behaviour, cursor reactions,
+and fairies that land on the words of your transcript and read them.
+
+- `empty` — she waits in the clearing, on a pumpkin, chin on hand
+- `busy` — the flock goes out with lanterns, quartering the window
+- `done` — they come home to the answer and light it up
+- the cursor — a still one gets orbited, a fast one scatters them, and moving
+  through falling leaves shoves them aside
+- perching — a fairy picks a word, stands on it, dusts it with light, and rides
+  it while you scroll
+
+It also re-voices the app: Grandstander for headings, Quicksand for everything
+you read, Space Mono for the machine's own voice, and Caveat for the one
+handwritten line in the clearing.

package/public/themes/cyber-grid/cyber-grid.css

@@ -0,0 +1,59 @@
+/*
+ * Cyber Grid — minimalist, utilitarian cyberpunk skin.
+ * Near-black terminal surface, one hot accent, hard corners, monospace
+ * everywhere. No scenery module: the palette and a few sharp-edge overrides
+ * are the whole theme.
+ */
+
+:root[data-theme="cyber-grid"] {
+  --bg: #08090a;
+  --panel: #101214;
+  --line: #262b2e;
+  --fg: #d8fdf2;
+  --muted: #7a8a87;
+  --faint: #58635f;
+  --accent: #ff1f6d;
+  --tool: #00e5c7;
+  --err: #ff4d4d;
+  --mono: "JetBrains Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* Hard, square edges everywhere — no rounded utilitarian hardware. */
+:root[data-theme="cyber-grid"] * {
+  border-radius: 0 !important;
+}
+
+/* Everything reads as terminal output, not prose. */
+:root[data-theme="cyber-grid"] body {
+  font-family: var(--mono);
+}
+
+:root[data-theme="cyber-grid"] ::selection {
+  background: var(--accent);
+  color: #08090a;
+}
+
+/* Focus ring reads as a targeting reticle, not a soft glow. */
+:root[data-theme="cyber-grid"] :focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+/* Panels and inputs get a hairline-only look; no shadows, no gradients. */
+:root[data-theme="cyber-grid"] .tool-group,
+:root[data-theme="cyber-grid"] .steps,
+:root[data-theme="cyber-grid"] pre,
+:root[data-theme="cyber-grid"] textarea,
+:root[data-theme="cyber-grid"] input {
+  background: var(--panel);
+  border-color: var(--line);
+}
+
+/* Accent stays functional: status dots, tool names, links — never decorative. */
+:root[data-theme="cyber-grid"] a {
+  color: var(--tool);
+}
+
+:root[data-theme="cyber-grid"] .tool-group .dot {
+  background: var(--tool);
+}

package/public/themes/drivers/scene-kit.js

@@ -0,0 +1,422 @@
+/* ============================================================================
+   scene-kit — the runtime behind a scenery skin.
+
+   A skin that only recolours things needs nothing but CSS. A skin that wants
+   to put something moving on the page needs the same six unglamorous parts
+   every time: canvases at the right depth, a device-pixel-correct resize, a
+   frame loop that pauses itself, the reduced-motion path, the app's current
+   state, and a teardown that leaves no trace. This module is those parts, so a
+   skin is only ever its own artwork.
+
+   It is also the single place that knows TinyWebUI's markup. A skin never
+   queries the app: it reads ctx.mode, ctx.anchor() and ctx.words(), and if the
+   app's DOM changes one day, it changes here, once, for every skin at once.
+
+   Contract, in full:
+
+     import { createScene } from '../drivers/scene-kit.js';
+
+     export function mount() {
+       return createScene({
+         layers: [{ name: 'bg', z: -1 }, { name: 'fg', z: 5 }],
+         vars:   { glow: '--my-glow' },          // read from CSS custom props
+         setup(ctx) { },                          // mount, resize, theme change
+         update(ctx, dt) { },                     // once per frame
+         draw(ctx) { },                           // once per frame, after update
+       });
+     }
+
+   createScene returns the unmount function the loader expects.
+
+   What ctx carries:
+     ctx.w, ctx.h        viewport, in css pixels
+     ctx.t, ctx.dt       seconds since mount, seconds this frame
+     ctx.layer(name)     that layer's 2d context, already dpr-scaled
+     ctx.clear(name)     clear a layer
+     ctx.pal             `vars` resolved against the current palette
+     ctx.mode            'empty' | 'idle' | 'busy' | 'done'
+     ctx.modeAge         seconds in the current mode
+     ctx.pointer         { x, y, inside, vx, vy, speed, downFor }
+     ctx.anchor(what)    'transcript' | 'composer' | 'viewport' -> DOMRect|null
+     ctx.words(n)        up to n perchable word handles in the transcript
+     ctx.reduced         true when the viewer asked for less motion
+     ctx.on(evt, fn)     'mode' | 'pointerdown' | 'resize'
+
+   The modes, and where they come from — all of it markup the app already
+   produces for its own reasons, none of it a hook added for a skin:
+
+     empty   #wrap has no children      a fresh chat, nothing asked yet
+     busy    #send carries .stop        a turn is running
+     done    .stop just came off        transient, ~2.4s, then idle
+     idle    anything else              a transcript, sitting there
+   ========================================================================== */
+
+const DONE_FOR = 2.4;
+
+export function createScene(spec) {
+  const {
+    layers = [{ name: 'fg', z: 5 }],
+    vars = {},
+    fallbacks = {},
+    setup = () => {},
+    update = () => {},
+    draw = () => {},
+  } = spec;
+
+  const reducedQ = matchMedia('(prefers-reduced-motion: reduce)');
+  const darkQ = matchMedia('(prefers-color-scheme: dark)');
+
+  const canvases = new Map();
+  for (const l of layers) {
+    const c = document.createElement('canvas');
+    c.className = 'scene-layer';
+    c.dataset.layer = l.name;
+    c.setAttribute('aria-hidden', 'true');
+    // Inline, so a skin needs no CSS at all to get its layers placed right,
+    // and so the app's own stacking (settings 10, drawer 19/20) is respected
+    // by default rather than by each skin remembering to.
+    c.style.cssText =
+      `position:fixed;inset:0;width:100%;height:100%;pointer-events:none;` +
+      `user-select:none;z-index:${l.z ?? 0}`;
+    document.body.appendChild(c);
+    canvases.set(l.name, { el: c, ctx: c.getContext('2d') });
+  }
+
+  const listeners = { mode: [], pointerdown: [], resize: [] };
+  const emit = (evt, arg) => {
+    for (const fn of listeners[evt] || []) {
+      try { fn(ctx, arg); } catch { /* one bad handler must not kill the loop */ }
+    }
+  };
+
+  const pointer = { x: -1e4, y: -1e4, inside: false, vx: 0, vy: 0, speed: 0, downFor: 0 };
+
+  const ctx = {
+    w: 0, h: 0, t: 0, dt: 0,
+    pal: {},
+    mode: 'idle',
+    modeAge: 0,
+    pointer,
+    reduced: reducedQ.matches,
+    layer: (name) => canvases.get(name)?.ctx,
+    clear(name) {
+      const c = canvases.get(name);
+      if (c) c.ctx.clearRect(0, 0, this.w, this.h);
+    },
+    anchor,
+    words,
+    on(evt, fn) { (listeners[evt] ||= []).push(fn); },
+  };
+
+  /* ========================================================= palette ==== */
+
+  /* Custom properties are read raw — the browser does not resolve them for us
+     — so a skin's scene tokens should be plain values, not expressions.
+
+     A property can also read back as the empty string, which is the trap this
+     guards: it happens whenever the skin's stylesheet has not applied yet, and
+     an empty string handed to addColorStop() or a gradient throws, killing the
+     frame without killing the loop. The result is two blank canvases and no
+     error anywhere. So every value has a fallback, and a palette that came
+     back incomplete is re-read on the next frame until it is whole. */
+
+  let paletteStale = false;
+
+  function resolveVar(cs, prop, fb) {
+    const v = cs.getPropertyValue(prop).trim();
+    if (v) return v;
+    paletteStale = true;
+    return fb || '#8a8a8a';
+  }
+
+  function readPalette() {
+    const cs = getComputedStyle(document.documentElement);
+    paletteStale = false;
+    const out = {};
+    for (const [key, prop] of Object.entries(vars)) {
+      const fb = fallbacks[key];
+      if (Array.isArray(prop)) {
+        out[key] = prop.map((p, i) => resolveVar(cs, p, Array.isArray(fb) ? fb[i] : fb));
+      } else {
+        out[key] = resolveVar(cs, prop, Array.isArray(fb) ? fb[0] : fb);
+      }
+    }
+    ctx.pal = out;
+  }
+
+  /* ========================================================== layout ==== */
+
+  let dpr = 1;
+
+  function resize() {
+    dpr = Math.min(Math.max(devicePixelRatio || 1, 1), 2);
+    ctx.w = Math.max(innerWidth, 1);
+    ctx.h = Math.max(innerHeight, 1);
+    for (const { el, ctx: c } of canvases.values()) {
+      el.width = Math.round(ctx.w * dpr);
+      el.height = Math.round(ctx.h * dpr);
+      c.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+    readPalette();
+    setup(ctx);
+    emit('resize');
+    if (ctx.reduced) renderOnce();
+  }
+
+  /** The places on screen a skin might want to aim something at. A skin asks
+   *  for a role, not a selector, so this stays the only file coupled to the
+   *  app's ids. */
+  function anchor(what) {
+    const el =
+      what === 'transcript' ? document.getElementById('wrap') :
+      what === 'scroller' ? document.getElementById('log') :
+      what === 'composer' ? document.getElementById('input') :
+      what === 'viewport' ? document.documentElement : null;
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    return r.width > 0 || r.height > 0 ? r : null;
+  }
+
+  /* =========================================================== words ==== */
+
+  /* Perchable text. Each handle keeps a live Range, so a word's box is read
+     back at the moment it is needed rather than cached: scrolling the
+     transcript therefore carries whatever is sitting on that word along with
+     it, for free, and a word that is deleted, re-rendered or scrolled out of
+     the log simply stops having a box. The harvest itself is the expensive
+     half, so it is capped and cached for a beat. */
+
+  let wordCache = [];
+  let wordsAt = -1e4;
+
+  function harvest(limit) {
+    const root = document.getElementById('wrap');
+    const scroller = document.getElementById('log');
+    if (!root || !scroller) return [];
+    const clip = scroller.getBoundingClientRect();
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const out = [];
+    let node;
+    while ((node = walker.nextNode())) {
+      if (out.length >= limit) break;
+      const text = node.nodeValue;
+      if (!text || text.length > 4000 || !/\S/.test(text)) continue;
+      // A quick reject before touching layout: a text node whose own parent is
+      // off screen has no word worth measuring.
+      const parent = node.parentElement;
+      if (!parent) continue;
+      const pr = parent.getBoundingClientRect();
+      if (pr.bottom < clip.top || pr.top > clip.bottom || pr.width < 8) continue;
+
+      const re = /[^\s]{4,}/g;
+      let m;
+      while ((m = re.exec(text)) && out.length < limit) {
+        // Sampling: on a long answer every word is a candidate, and a fairy
+        // only ever needs a few dozen to choose between.
+        if (Math.random() > 0.35) continue;
+        const range = document.createRange();
+        range.setStart(node, m.index);
+        range.setEnd(node, m.index + m[0].length);
+        const r = range.getBoundingClientRect();
+        if (r.width < 18 || r.height < 8) continue;
+        if (r.top < clip.top + 4 || r.bottom > clip.bottom - 4) continue;
+        out.push(makeWord(range, clip));
+      }
+    }
+    return out;
+  }
+
+  function makeWord(range, clip) {
+    return {
+      range,
+      /** The word's box right now, or null if it is gone or scrolled away. */
+      rect() {
+        const n = range.startContainer;
+        if (!n || !n.isConnected) return null;
+        let r;
+        try { r = range.getBoundingClientRect(); } catch { return null; }
+        if (!r || r.width < 2) return null;
+        const c = document.getElementById('log')?.getBoundingClientRect() || clip;
+        if (r.bottom < c.top + 2 || r.top > c.bottom - 2) return null;
+        return r;
+      },
+    };
+  }
+
+  function words(limit = 60) {
+    if (ctx.t - wordsAt > 1.2 || !wordCache.length) {
+      wordCache = harvest(limit);
+      wordsAt = ctx.t;
+    }
+    return wordCache;
+  }
+
+  /* ============================================================ mode ==== */
+
+  function readMode() {
+    const send = document.getElementById('send');
+    const wrap = document.getElementById('wrap');
+    if (send && send.classList.contains('stop')) return 'busy';
+    if (wrap && wrap.childElementCount === 0) return 'empty';
+    return 'idle';
+  }
+
+  function syncMode() {
+    const next = readMode();
+    if (ctx.mode === 'done') {
+      if (next === 'busy') setMode('busy');
+      else if (ctx.modeAge > DONE_FOR) setMode('idle');
+      return;
+    }
+    if (next === ctx.mode) return;
+    setMode(ctx.mode === 'busy' && next !== 'busy' ? 'done' : next);
+  }
+
+  function setMode(m) {
+    const prev = ctx.mode;
+    ctx.mode = m;
+    ctx.modeAge = 0;
+    wordCache = [];
+    wordsAt = -1e4;
+    emit('mode', prev);
+    if (ctx.reduced) renderOnce();
+  }
+
+  /* ========================================================= pointer ==== */
+
+  let lastPointer = 0;
+
+  function onPointerMove(e) {
+    const now = performance.now();
+    const dt = Math.min(Math.max((now - lastPointer) / 1000, 1 / 240), 0.1);
+    lastPointer = now;
+    pointer.vx = (e.clientX - pointer.x) / dt;
+    pointer.vy = (e.clientY - pointer.y) / dt;
+    if (!pointer.inside) { pointer.vx = pointer.vy = 0; }
+    pointer.speed = Math.hypot(pointer.vx, pointer.vy);
+    pointer.x = e.clientX;
+    pointer.y = e.clientY;
+    pointer.inside = true;
+  }
+  function onPointerDown(e) {
+    pointer.x = e.clientX; pointer.y = e.clientY; pointer.inside = true;
+    pointer.downFor = 0.0001;
+    emit('pointerdown', { x: e.clientX, y: e.clientY });
+    if (ctx.reduced) renderOnce();
+  }
+  function onPointerUp() { pointer.downFor = 0; }
+  function onPointerOut(e) {
+    if (e.relatedTarget === null) {
+      pointer.inside = false;
+      pointer.vx = pointer.vy = pointer.speed = 0;
+    }
+  }
+
+  /* ============================================================= run ==== */
+
+  let raf = 0, last = 0;
+
+  function frame(now) {
+    raf = requestAnimationFrame(frame);
+    const dt = Math.min(Math.max((now - (last || now)) / 1000, 0), 0.05);
+    last = now;
+    ctx.t += dt;
+    ctx.dt = dt;
+    ctx.modeAge += dt;
+    // A palette read before the skin's stylesheet applied comes back empty and
+    // marks itself stale; re-read until it is whole, then leave it alone.
+    if (paletteStale) { readPalette(); if (!paletteStale) setup(ctx); }
+    syncMode();
+
+    // The pointer decays toward rest rather than stopping dead, so "is the
+    // cursor moving" is a question a skin can ask on any frame, not only on
+    // the ones a pointermove happened to land in.
+    pointer.vx -= pointer.vx * Math.min(dt * 6, 1);
+    pointer.vy -= pointer.vy * Math.min(dt * 6, 1);
+    pointer.speed = Math.hypot(pointer.vx, pointer.vy);
+    if (pointer.downFor) pointer.downFor += dt;
+
+    update(ctx, dt);
+    draw(ctx);
+  }
+
+  function start() {
+    if (raf || ctx.reduced || document.hidden) return;
+    last = 0;
+    raf = requestAnimationFrame(frame);
+  }
+  function stop() {
+    if (raf) cancelAnimationFrame(raf);
+    raf = 0;
+  }
+  /** The still-motion path: one frame, on demand, with no time passing. */
+  function renderOnce() {
+    ctx.dt = 0;
+    update(ctx, 0);
+    draw(ctx);
+  }
+
+  /* ========================================================== wiring ==== */
+
+  const onResize = () => resize();
+  const onVisible = () => (document.hidden ? stop() : start());
+  const onScheme = () => { readPalette(); resize(); };
+  const onMotion = () => {
+    ctx.reduced = reducedQ.matches;
+    stop();
+    if (ctx.reduced) renderOnce(); else start();
+  };
+
+  addEventListener('resize', onResize, { passive: true });
+  addEventListener('pointermove', onPointerMove, { passive: true });
+  addEventListener('pointerdown', onPointerDown, { passive: true });
+  addEventListener('pointerup', onPointerUp, { passive: true });
+  addEventListener('pointercancel', onPointerUp, { passive: true });
+  document.addEventListener('pointerout', onPointerOut, { passive: true });
+  document.addEventListener('visibilitychange', onVisible);
+  darkQ.addEventListener('change', onScheme);
+  reducedQ.addEventListener('change', onMotion);
+
+  // The transcript's own box moves when the sidebar is dragged, the drawer
+  // opens, or the composer grows a line — all of which change where a skin's
+  // anchors are without the window ever resizing.
+  const ro = new ResizeObserver(() => { emit('resize'); if (ctx.reduced) renderOnce(); });
+  for (const el of [document.getElementById('wrap'), document.querySelector('main')]) {
+    if (el) ro.observe(el);
+  }
+
+  // Word boxes go stale the instant the transcript changes or scrolls; the
+  // handles re-measure themselves, but the harvest has to be thrown away.
+  const invalidate = () => { wordCache = []; wordsAt = -1e4; };
+  const mo = new MutationObserver(() => { invalidate(); syncMode(); if (ctx.reduced) renderOnce(); });
+  const wrapEl = document.getElementById('wrap');
+  const sendEl = document.getElementById('send');
+  if (wrapEl) mo.observe(wrapEl, { childList: true, subtree: true, characterData: true });
+  if (sendEl) mo.observe(sendEl, { attributes: true, attributeFilter: ['class'] });
+  const scroller = document.getElementById('log');
+  if (scroller) scroller.addEventListener('scroll', invalidate, { passive: true });
+
+  resize();
+  ctx.mode = readMode();
+  if (ctx.reduced) renderOnce(); else start();
+
+  /* Teardown. The loader calls this when another skin is picked, and what it
+     leaves behind has to be indistinguishable from never having run. */
+  return () => {
+    stop();
+    removeEventListener('resize', onResize);
+    removeEventListener('pointermove', onPointerMove);
+    removeEventListener('pointerdown', onPointerDown);
+    removeEventListener('pointerup', onPointerUp);
+    removeEventListener('pointercancel', onPointerUp);
+    document.removeEventListener('pointerout', onPointerOut);
+    document.removeEventListener('visibilitychange', onVisible);
+    darkQ.removeEventListener('change', onScheme);
+    reducedQ.removeEventListener('change', onMotion);
+    scroller?.removeEventListener('scroll', invalidate);
+    ro.disconnect();
+    mo.disconnect();
+    for (const { el } of canvases.values()) el.remove();
+    canvases.clear();
+  };
+}