storyink 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # Changelog
 
+## 0.3.2
+
+- **Fix: clicking the transport's play/pause did nothing** (space worked). The stage's native
+  `pointerdown` listener, which starts a pan, ran before React's root listener, so the controls'
+  React `stopPropagation` came too late: the stage captured the pointer and the button's `click`
+  never fired. Pans now start only on the diagram surface (not on buttons, the scrubber, the
+  toolbar, the transport, the gate or `[data-no-pan]`) and capture the pointer only after 3 px of
+  movement, so a still click on the surface stays a click. Quick repeated −/+ clicks now compound.
+- **Follow camera.** While a story plays on a large diagram, the viewer zooms to a readable scale
+  (labels ≈ 12.4 px, when fit would render them below 10 px) and pans to each step, moving only
+  when the step's focus leaves the inner 80 % of the view (bounce-free spring, 0.75 s), then eases
+  back to fit at the end. Manual zoom is kept (follow pans); a drag suspends follow until the next
+  out-of-view step; reduced motion jumps; scrubbing and ←/→ move the camera too.
+  - Toolbar **Follow** toggle (`aria-pressed`, `F`), saved in `localStorage["storyink-follow"]`.
+  - `story.camera: "follow" | "fit"` (default follow), `render --camera`, tool `storyink_render`
+    `camera`; `#camera=follow|fit`; `window.__storyink.camera()`.
+  - Core: `stepFocus`, `cameraAt` (pure: t + stage + scale → camera), `followStep`,
+    `readableScale`, `fitCamera`, `inView`, `stepAt`, `CAMERA`.
+  - `storyink snapshot --camera follow --at …` (tool `camera`) captures the followed view in a
+    16:9 stage, with a `follow-deterministic` gate. Default snapshots and beat sheets stay at fit.
+- `bun run verify:viewer` drives every control with real mouse input (CDP
+  `Input.dispatchMouseEvent`) in full and reduced motion, and checks the follow camera on a
+  25-node diagram (readable zoom, pans, drag suspend/resume, end at fit, toggle persistence,
+  reduced jumps).
+- Not in the animated SVG (SMIL): a follow camera there would need an animated `viewBox`; a
+  possible follow-up.
+
+## 0.3.1
+
+- **Fix: Play did nothing under reduced motion.** With Reduce Motion on (OS or `#motion=reduced`),
+  Play now walks the story step by step ("Play steps"): each step's settled state at once (reveals,
+  landed pulses, counters, the whole caption), held for its reading time (caption read time or
+  1.5 s), then the next, ending on the final frame. No pulses, trails, glows or tweens. Pause, ←/→,
+  Shift+←/→, R (restart from step 1, no rewind) and the scrubber work on settled steps. The page
+  loads on the final frame with a static play button; `autoplay` is ignored.
+- **`story.motion`: `"full"` (default) | `"reduced"` | `"system"`.** Full motion is the default and
+  **ignores the reader's OS reduced-motion setting**; `"system"` restores the 0.3.0 behaviour
+  (follow `prefers-reduced-motion`), `"reduced"` always steps. Auto stories:
+  `{ "steps": "auto", "motion": … }`, `render --motion …`, tool `storyink_render` `motion`.
+  Precedence: `#motion=` > the reader's toolbar choice > `story.motion` > OS (only for `"system"`).
+- Viewer toolbar: **Motion: full / reduced** toggle (`aria-pressed`, shortcut `M`), saved in
+  `localStorage`; `#motion=` still wins. Switching mid-playback continues from the current step.
+- Core: `steppedSchedule`, `steppedTime`, `steppedIndex`, `steppedStop`, `STEP_BEAT` and
+  `storyState(…, { stepped: true })`.
+- Snapshot: `--motion reduced` (tool `motion`) captures stepped `at` frames; new gate `reduced=stepped`.
+- Fix: live counter reels were placed at the node-local position (top-left of the diagram) and
+  shown before their node was revealed; they now sit on their node and follow its reveal.
+  `bun run verify:viewer` checks this in headless Chrome (full play, reduced → full, reload,
+  resize, theme toggle) along with stepped playback.
+
 ## 0.3.0
 
 - **Animated SVG (SMIL):** the story plays inside a plain `<img>`, so in GitHub READMEs and PR

package/README.md

@@ -48,11 +48,12 @@ both and has the OpenCode plugin as its default export. Runs on Node ≥ 20 and
 
 ```
 storyink render <in.json|in.mmd|-> [-o out.html] [--svg out.svg] [--theme light|dark] [--story auto]
+                [--motion full|reduced|system] [--camera follow|fit]
                 [--animated-svg out.svg [--theme light|dark|both] [--once] [--font system|embed]]
 storyink mermaid <in.mmd> [-o out.json]
 storyink validate <in> [--json]
 storyink snapshot <out.html> [--theme light,dark] [--width N] [--sheet [themes|beats]|--no-sheet] [--at 0.5,1.2,end] [--scale 2] [-o dir] [--json]
-                  [--preview out.jpg [--preview-size 1024]]
+                  [--preview out.jpg [--preview-size 1024]] [--motion reduced] [--camera follow]
 storyink skill
 ```
 
@@ -122,7 +123,22 @@ Add a `story` to play a diagram as a sequence of beats in the HTML viewer:
 
 `"story": "auto"` (or `--story auto`) derives the beats from the graph or message order. Playback
 has a click-to-play gate, play/pause, a tape-rewind replay and a scrubber with step and chapter
-ticks. Space, ←/→ and R control it. When reduced motion is on, the viewer jumps to the final frame.
+ticks. Space, ←/→ and R control it.
+
+Motion is **full by default, even when the reader's system asks for reduced motion**. Authors can
+set `"story": { "motion": "reduced" }` (always step by step) or `"motion": "system"` (follow
+`prefers-reduced-motion`); `--motion full|reduced|system` on `render` does the same, including
+for auto stories. Readers switch with the toolbar's **Motion** toggle (`M`, remembered), and
+`#motion=full|reduced` overrides everything. In reduced mode Play walks the story step by step:
+each step's settled state shown at once and held for its reading time, with no travelling pulses
+or tweens, and the page opens on the final frame.
+
+The camera **follows the story** while it plays. When the whole diagram would render its labels
+too small, Play zooms to a readable scale and pans from step to step, moving only when the active
+step leaves the middle 80 % of the view, then eases back to fit at the end. Your own zoom is kept
+and a drag pauses following until the next step that is out of view. Toggle it with **Follow**
+(`F`, remembered), `#camera=fit`, or `"story": { "camera": "fit" }` / `--camera fit`.
+`storyink snapshot --camera follow --at …` captures the followed view.
 
 The final frame is always the static diagram. Every frame is a pure function of time
 (`storyState(scene, timeline, t)`), so `#t=2.5` seeks exactly and

package/dist/chunks/{index-zjyrjkn6.js → index-5qmjsg8w.js}

@@ -6,7 +6,7 @@ import {
   renderHtml,
   renderSvg,
   validate
-} from "./index-060cd52n.js";
+} from "./index-n3gf4fyb.js";
 
 // src/node/index.ts
 import fs3 from "node:fs";
@@ -193,10 +193,14 @@ async function snapshot(htmlPath, opts = {}) {
   const headerH = (scene.subtitle ? 128 : 100) + (tl ? 54 : 0);
   const ats = opts.at?.length ? opts.at : opts.t ? [opts.t === "end" ? "end" : Number(opts.t)] : ["end"];
   const tq = (at) => tl ? `&t=${at === "end" ? "end" : +at.toFixed(3)}` : "";
+  const mq = opts.motion ? `&motion=${opts.motion}` : "";
+  const follow = opts.camera === "follow" && !!tl;
+  const cq = follow ? "&camera=follow" : "";
   const sheetMode = opts.sheet === false ? false : opts.sheet === "beats" ? "beats" : "themes";
   const W = Math.round(Math.max(500, opts.width ?? Math.min(1600, vb.w + 64)));
   const s = Math.min(1, (W - 64) / vb.w);
   const H = Math.round(headerH + vb.h * s + 64 + 8);
+  const FW = Math.round(Math.max(500, opts.width ?? 1280));
   const url = (hash) => `${pathToFileURL(abs).href}#${hash}`;
   const baseFlags = [
     ...browser.flavor === "chrome" ? ["--headless=new"] : [],
@@ -320,10 +324,11 @@ async function snapshot(htmlPath, opts = {}) {
   try {
     for (const theme of themes)
       for (const at of ats) {
-        const tag = at === "end" ? "" : `.t${+at.toFixed(2)}`;
+        const tag = `${at === "end" ? "" : `.t${+at.toFixed(2)}`}${opts.motion === "reduced" ? ".reduced" : ""}${follow ? ".follow" : ""}`;
         const png = path2.join(outDir, `${base}.${theme}${tag}.png`);
-        const ms = await shoot(`theme=${theme}&chrome=0${tq(at)}`, png, W, H);
-        captures.push({ theme, at, png, sha256: sha256(png), bytes: fs2.statSync(png).size, width: W * scale, height: H * scale, ms });
+        const [cw, ch] = follow ? [FW, Math.round(FW * 0.5625)] : [W, H];
+        const ms = await shoot(`theme=${theme}&chrome=0${tq(at)}${mq}${cq}`, png, cw, ch);
+        captures.push({ theme, at, png, sha256: sha256(png), bytes: fs2.statSync(png).size, width: cw * scale, height: ch * scale, ms });
       }
     const first = captures[0];
     const midT = tl ? ats.find((a) => a !== "end") ?? +(tl.duration / 2).toFixed(3) : "end";
@@ -333,6 +338,12 @@ async function snapshot(htmlPath, opts = {}) {
     await shoot(`theme=${first.theme}&chrome=0${tq(midT)}`, a2, W, H);
     const same = sha256(a1) === sha256(a2);
     gates.push({ name: "deterministic", pass: same, detail: same ? `${first.theme} at t=${midT} captured twice: identical` : `${first.theme} at t=${midT} differs between runs` });
+    if (follow) {
+      const f2 = path2.join(tmpRoot, "follow-2.png");
+      await shoot(`theme=${first.theme}&chrome=0${tq(first.at ?? "end")}${mq}${cq}`, f2, FW, Math.round(FW * 0.5625));
+      const ok = sha256(f2) === first.sha256;
+      gates.push({ name: "follow-deterministic", pass: ok, detail: ok ? `camera=follow at t=${first.at} captured twice: identical` : `camera=follow at t=${first.at} differs between runs` });
+    }
     if (tl) {
       const stat = path2.join(tmpRoot, "static.png");
       const end = path2.join(tmpRoot, "end.png");
@@ -343,6 +354,14 @@ async function snapshot(htmlPath, opts = {}) {
       const sStat = sha256(stat);
       gates.push({ name: "end=static", pass: sha256(end) === sStat, detail: sha256(end) === sStat ? "t=end matches the static diagram" : "t=end differs from the static diagram" });
       gates.push({ name: "reduced=static", pass: sha256(red) === sStat, detail: sha256(red) === sStat ? "reduced motion shows the static diagram" : "reduced motion differs from the static diagram" });
+      const probes = tl.steps.map((st) => +(st.t0 / 2 + st.t1 / 2).toFixed(3)).filter((_, i, a) => i % Math.max(1, Math.ceil(a.length / 3)) === 0);
+      let inFlight = 0;
+      for (const pt of probes) {
+        const d = await run(browser.path, [...baseFlags, fresh(), `--window-size=${W},${H}`, "--dump-dom", url(`theme=${first.theme}&chrome=0&motion=reduced&t=${pt}`)], { timeoutMs, untilStdout: /<\/html>\s*$/, signal: opts.signal });
+        if (/data-si="pulse:/.test(d.stdout))
+          inFlight++;
+      }
+      gates.push({ name: "reduced=stepped", pass: inFlight === 0, detail: inFlight === 0 ? `reduced motion at t=${probes.join(",")}: settled steps, no pulse in flight` : `${inFlight} reduced frame(s) show a pulse in flight` });
     }
     const beats = [];
     if (sheetMode === "beats" && tl) {
@@ -482,6 +501,18 @@ function writeDiagram(input, out) {
   }
   return res;
 }
+function setStoryMotion(spec, motion) {
+  if (spec.story === undefined)
+    return false;
+  spec.story = spec.story === "auto" ? { steps: "auto", motion } : { ...spec.story, motion };
+  return true;
+}
+function setStoryCamera(spec, camera) {
+  if (spec.story === undefined)
+    return false;
+  spec.story = spec.story === "auto" ? { steps: "auto", camera } : { ...spec.story, camera };
+  return true;
+}
 function pictureSnippet(light, dark, alt) {
   const a = alt.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
   return `<picture>
@@ -510,4 +541,4 @@ function writeAnimatedSvg(input, out, opts = {}) {
   return { ok: true, diagnostics: v.diagnostics, files, autoStory, snippet };
 }
 
-export { browserVersion, findBrowser, snapshot, screenshotPage, parseSource, loadSpec, writeDiagram, pictureSnippet, writeAnimatedSvg };
+export { browserVersion, findBrowser, snapshot, screenshotPage, parseSource, loadSpec, writeDiagram, setStoryMotion, setStoryCamera, pictureSnippet, writeAnimatedSvg };