storyink 0.3.6 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.4.0
+
+- **Rich nodes** (architecture, dataflow, workflow): `panel` (window with rows: `tag`, `icon`,
+  `text`, `detail`, `status`, `indent`, `muted`), `code` (syntax-coloured program, `lang`
+  ts|js|json|text) and `chip` (icon + label, `stack` 1..3); `size: { cols, lines }` reserves body
+  space; `icon` set (wrench plug file terminal search globe bolt user spark); `muted` nodes; bare
+  groups (`bare: true`, heading only).
+- **Anchors**: edges and story targets may name a panel row (`node#row`) or a code line
+  (`node#3`); wires attach at that row/line.
+- **Content steps**: `type` (char typing with caret for code, `cps` / `duration`; word typing for
+  rows), `set` / `clear` (crossfade), `line` (active-line bar), `status` (spinner + shimmer, check,
+  cross), `dim` / `undim` (levels, independent of `hide` / `show`), `wire` / `unwire`, `glow` /
+  `unglow`, `focus`. Pulses gain `reverse` and `delay`. Story options `spotlight` and
+  `rewind: "glitch"` (HTML only). Typing speed is not scaled by `pace`. Warnings when the end state
+  still shows a spinner or a glow.
+- **Animated SVG** covers the new content (typing clips, caret, crossfades, line bar, status,
+  shimmer, levels, wire/unwire, glows, spotlight) with the final frame still the static diagram.
+  Checked in headless Chrome (frame parity, `<img>` playback, loop return); Firefox plays it;
+  Safari untested.
+- Four examples: `code-mode.architecture`, `retry-helper.architecture`,
+  `agent-session.architecture`, `failover.dataflow`; animated SVGs in `docs/gallery/`.
+- Fix: with reading holds (pace > 0), a step with an absolute `at` inside a beat stayed at its
+  authored time while its beat was pushed later, so it ran out of order and → / ← could stop with
+  pulses mid-wire. It now keeps its authored offset from the previous step.
+- Docs: `story` is no longer described as reserved; `#t=` documented as a seek.
+
 ## 0.3.6
 
 - **Default `story.pace` is 0.6** (was 1): shorter reading holds after each beat. `pace: 1` gives

package/README.md

@@ -148,7 +148,26 @@ and a drag pauses following until the next step that is out of view. Toggle it w
 (`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
+### Rich nodes and content steps (0.4.0)
+
+For agent sessions, generated code and tool servers, graph diagrams take `panel` (a window of
+rows), `code` (a syntax-coloured program) and `chip` nodes, with wires anchored to a row
+(`session#exec`) or a code line (`code#1`). Stories can then `type` code and rows, swap content
+(`set` / `clear`), move an active-line bar (`line`), show row `status` (spinner and shimmer,
+check, cross), `dim` / `hide` / `show`, draw or retract wires (`wire` / `unwire`), keep nodes lit
+(`glow`), follow the action with a `spotlight`, send reverse and staggered pulses, and reset with
+a `glitch` rewind (HTML only). Examples:
+[code-mode](examples/code-mode.architecture.json),
+[retry-helper](examples/retry-helper.architecture.json),
+[agent-session](examples/agent-session.architecture.json),
+[failover](examples/failover.dataflow.json). Details: [docs/spec.md](docs/spec.md#rich-nodes-panel-code-chip).
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/gallery/code-mode.architecture.animated.dark.svg">
+  <img alt="Code mode: a session runs a program that calls MCP servers (animated)" src="docs/gallery/code-mode.architecture.animated.light.svg">
+</picture>
+
+The final frame is the static diagram (with content steps: the story's end state). Every frame is a pure function of time
 (`storyState(scene, timeline, t)`), so `#t=2.5` seeks exactly and
 `storyink snapshot --at 1,2.5,end --sheet beats` renders stills and a beat contact sheet. The
 receipt gates check that the end frame and the reduced-motion page match the static diagram. See
@@ -184,12 +203,19 @@ storyink render examples/checkout.architecture.json --animated-svg docs/checkout
 - Library: `renderAnimatedSvg(spec, { theme, once, font })` from `storyink/core`; plugin:
   `storyink_render` with `animatedSvg: true | "both"`, `once`, `font`.
 - GitHub's image proxy caches by URL: when a diagram changes, give it a new file name (or URL).
+- Rich content (typing, status glyphs, line bars, spotlight) animates too. Frame parity is checked
+  in headless Chrome; Firefox plays it in `<img>`; Safari is untested. The glitch rewind and the
+  follow camera are HTML-only.
 
 ## Gallery
 
 `bun run gallery` renders every example and Mermaid sample and writes one light and one dark PNG per
 example to `docs/gallery/`. `bun run gallery:animated` writes the animated SVGs of the story
-examples (`*.animated.light.svg` / `*.animated.dark.svg`); `bun run verify:smil` checks them in
+examples (`*.animated.light.svg` / `*.animated.dark.svg`; `--only name,…` writes just those);
+animated: [code-mode](docs/gallery/code-mode.architecture.animated.light.svg),
+[failover](docs/gallery/failover.dataflow.animated.light.svg),
+[retry-helper](docs/gallery/retry-helper.architecture.animated.light.svg),
+[agent-session](docs/gallery/agent-session.architecture.animated.light.svg). `bun run verify:smil` checks them in
 headless Chrome (frame parity with the viewer's frames, `<img>` playback, embedded font).
 
 | | |