wand-kit 0.2.0 → 0.3.0

package/PROMPT.md

@@ -143,6 +143,9 @@ The components (`node wand.js components`; `kit/lib/components.js`):
 | `stats`, `delta(from, to)` | figures, before-and-after |
 | `steps(items)` | next steps with arrows |
 | `callout`, `list`, `chapter`, `img`, `icon`, `tile` | the rest |
+| `enter(kind, i)`, `step(n, html)`, `countup(text)`, `stat({ count })` | motion in a talk (§12) |
+| `video({ src, poster })`, `demo({ src, poster })` | a clip or a live page on a slide (§12) |
+| `storyboard({ title, shots })`, `sketch({ people, apps, agents })` | a board from a script, and a quick frame for it (§13) |
 
 **Composition is free.** A job writes the markup it needs from these, adds its
 own CSS on top (custom properties only) and may write raw markup where no
@@ -184,7 +187,9 @@ new ─▶ argue ─▶ content ─▶ compose ─▶ build ─▶ review ─▶
 6. **review** — look at `out/sheet.png`, then at any page the gates named.
    Read the pages as the reader will: does each carry its claim?
 7. **ship** — `node wand.js ship <job> [--pptx]`: the build, the one-file HTML,
-   the PowerPoint. The review note says what was changed from the source and
+   the PowerPoint. A deck's HTML is a talk (§12), a storyboard's plays (§13),
+   and either runtime is driven before it ships. `--brand next` (or `current`)
+   builds the same job on the other brand into `out-<brand>/`. The review note says what was changed from the source and
    why, which gates ran, and what a human still has to decide.
 
 ## 7. Gates — every build, every job
@@ -202,7 +207,13 @@ new ─▶ argue ─▶ content ─▶ compose ─▶ build ─▶ review ─▶
 | pdf text | the PDF's text misses a line, or carries an em dash | |
 | contrast (warn) | text under WCAG AA against its background, chrome excepted | |
 | measure (warn) | a paragraph over the surface's characters-per-line | |
+| images | an image did not load | an image that loaded and is the wrong one |
+| media | a demo, a clip or its poster is missing | a demo that loads and misbehaves |
 | console | a page error | |
+| runtime (ship, decks) | a slide or step the keyboard cannot reach, the overview or notes not opening, the presenter view out of step, a demo that never loads | how the motion feels |
+| timing (warn, boards) | the board is more than 10% off its `target` | the real voiceover's pace |
+| frames (warn, boards) | a frame is still to draw | a frame that is drawn and wrong |
+| player (ship, boards) | the player does not run, scrub, or caption | |
 
 The gates read the DOM Chromium laid out for the PDF; nothing is inferred from
 the spec. What no gate sees: the argument, the pacing, and whether the right
@@ -248,8 +259,78 @@ component was chosen. That is the review.
 1. **DOCX export.** Declined for now: Word cannot hold these pages. If needed,
    a semantic export (headings, prose, tables) as an editable-text version,
    labelled as such.
-2. **The sandbox's browser.** Confirm Chromium is present where sellers work
-   before the kit replaces `decks` and `docs`.
-3. **The chapter panel and the talk runtime** (presenter view, demos) from the
-   BofA deck: carry into the slide surface when a talk needs them.
+2. **The sandbox's browser.** Confirmed 2026-10-19: claude.ai's sandbox carries
+   Playwright's Chromium in `/opt/pw-browsers`, which `findChrome()` reads, and
+   a page renders there exactly as it does on the Mac.
+3. **The talk runtime** from the BofA deck: carried into every slide deck's HTML
+   in 0.3.0 (§12). The chapter panel is still a component for a job to draw.
+4. **A scratch voice.** The Wand OS film timed its board against a voice from
+   macOS `say`; the chat sandbox has none, so timing here is words at `wpm`.
+   A recorded voiceover passed as `audio` leads the player.
 4. **Email and banner surfaces**: declared in §1's spirit, not yet in the table.
+
+## 12. Talks: motion and the presenter
+
+Every slide deck's one-file HTML is a talk, with the runtime ported from the
+BofA deck (`kit/lib/talk.js`): a crossfade between slides, entrances, steps,
+media, the presenter view in a second window kept in step, the talk clock and
+its pace, notes, the overview. The PDF, the PNGs and the PowerPoint never see
+any of it: they show every slide at its end state, every step in, every
+figure final, every poster.
+
+- **Entrances, not effects.** By default (`talk: { motion: "auto" }`) a slide
+  that marks nothing has its blocks rise in, staggered. Mark a slide yourself
+  when one thing should lead: `enter("pop", 0)` on it and the rest follow.
+  `talk: { motion: "none" }` stills a deck; `motion: "none"` on a page stills
+  one slide. One orchestrated moment a slide; nothing loops, nothing bounces.
+- **Kinds.** `rise` (the default), `fade`, `pop` for a mark or a figure,
+  `grow` for a bar going up, `widen` for a bar going across, `draw` for a
+  line that tells a trend (an SVG path with `pathLength="1"`), `count` for a
+  figure the room should watch arrive (`stat({ count: true })`, `countup()`).
+- **Steps** when the order of the argument is the point: `step(1, html)`, then
+  2, then 3. Never more than four on a slide. Going back undoes the last step.
+- **Notes on every slide of a talk**, and `seconds` on each when the talk has a
+  slot: the presenter view shows the slide's window and whether you are on
+  pace. `talk: { minutes }` gives the clock a total when slides carry none.
+- **A demo** is one self-contained HTML file (no network, no relative assets),
+  mounted in a frame when its slide comes up and the next one preloaded. It
+  may expose `window.wandDemo = { play, pause, reset }` for the D and R keys,
+  and dress itself from `window.wandEmbed.brand` (bg, card, stroke, ink, text,
+  label, accent), which the deck fills from its brand. Its poster is required:
+  `node wand.js poster demo.html --play 3 --brand <the deck's>`.
+- **A clip** plays muted and looping while its slide is on; MP4 (H.264) plays
+  in every browser. The HTML carries it, so it carries its size: over 60 MB
+  warns.
+- **The presenter's keys:** arrows, Space and PgUp/PgDn move (a clicker works),
+  P opens the presenter view, N the notes, G the overview, T the clock, B
+  blanks the screen, F goes full screen, D and R play and restart media, a
+  number then Enter jumps, ? lists them.
+
+## 13. Storyboards
+
+A storyboard turns a script into a film's plan (`storyboard()`, generalised
+from the Wand OS film in `runs/2026-10-06-wand-os-video`): a cover, the run
+of show, then a page a shot with its number, name and timecode, the
+voiceover word for word, one to four frames on their cue words, and the
+direction (the line, camera, motion, on screen, sound, into next).
+
+- **The script is the content file**, one voiceover line a shot. Split a long
+  paragraph where the edit will cut. Coverage then proves every word of the
+  script is on the board.
+- **Timing is scratch timing:** each line lasts its words at `wpm` (150 for a
+  conversational read, 160 to 170 for a promo), with `lead` before and `tail`
+  after; a shot without voiceover `hold`s; `seconds` on a shot overrides the
+  estimate once a real read exists. `target` warns when the board is more
+  than 10% off. `timing.csv` and `captions.srt` ship with the board.
+- **A frame is drawn four ways:** `sketch` (people as dots, software as
+  labelled boxes, agents as sparks: the script's own vocabulary, in the
+  brand's colours), the job's own SVG on brand roles, an image (a product
+  screen, a demo poster), or left to draw, which the frames gate counts. The
+  first frame is on screen from the cut; the others land on their cues.
+- **The HTML plays the board:** the pages to read, and a player (P, or the
+  button) that cross-fades the frames on their cues with the voiceover as the
+  caption, a track of every shot to scrub, and a title-safe overlay. An
+  `audio` file, a scratch or final read, leads the clock when given.
+- **Both brands:** the board is one job; `--brand next` builds it on the
+  website's brand beside the first. Frames drawn as sketches or on brand roles
+  follow; an image frame is per brand when it shows the brand.

package/SKILL.md

@@ -1,10 +1,10 @@
 ---
 name: wand-design
-description: Rebrand or create Wand material on the current or the new brand - decks, documents, one-pagers, case studies, social cards. Use when a .pptx, .docx or .pdf is attached, or branded work is wanted.
+description: Rebrand or create Wand material on the current or new brand - decks and talks, documents, case studies, storyboards from a script, social cards. Use when a file is attached or branded work is wanted.
 compatibility: Requires Node.js 18+, code execution enabled in claude.ai (Settings > Features), and a Chromium the kit can find (Playwright's cache or the system). No network needed once installed. Python 3 embeds fonts in the .pptx; without it the deck ships with the faces named, not embedded.
 license: Proprietary - Wand AI
 metadata:
-  version: "0.2.0"
+  version: "0.3.0"
 ---
 
 
@@ -45,12 +45,18 @@ the default without asking; when their words ask for the other, pass
 says which. The rule lives in the kit, not here, so it can change without
 anyone reinstalling the skill.
 
+**The same piece on the other brand:** `node wand.js ship <job> --brand next`
+(or `current`) builds the job again on that brand, into `out-<brand>/`
+beside the first. Nothing in the job changes.
+
 ## Read only what the job needs
 
 | Job | Read |
 |---|---|
 | A document, a two-pager, a case study | `PROMPT.md` §5 and `templates/page.mjs`; `examples/overview/job.mjs` for a finished one |
-| A deck or a talk | §5 and `templates/slide.mjs` |
+| A deck | §5 and `templates/slide.mjs` |
+| An animated deck, a talk, a live demo | §12 and `templates/slide.mjs`; `examples/talk/job.mjs` for a finished one |
+| A storyboard from a script | §13 and `templates/storyboard.mjs`; `examples/storyboard/job.mjs` |
 | Social cards, a banner | `templates/card.mjs` |
 | Edit a job this kit built | the job's `job.mjs` only, then `build` |
 
@@ -85,6 +91,35 @@ Author from the client piece: remove the client's figures, names, quotes and
 vendors; put the client's name and its people in `denylist` so the gate proves
 they are gone. Say in the note what was cut and what was generalised.
 
+### An animated deck or a talk
+
+Every deck's HTML already animates: blocks rise in, slides crossfade, and the
+presenter has notes, a clock, an overview and a presenter view (P). What a
+talk adds:
+
+1. Notes on every slide, and `seconds` on each when the talk has a slot.
+2. Motion where it carries the argument (PROMPT.md §12): `step(n, html)` for
+   a reveal in order, `stat({ count: true })` for a figure to watch arrive,
+   `enter("draw")` on a trend line, `enter("grow", i)` on bars. Restraint: one
+   moment a slide.
+3. A live demo: one self-contained HTML file, then its poster on the deck's
+   brand: `node wand.js poster demo.html --play 3 --brand <brand>`, and
+   `c.demo({ src, poster })` on the slide. A clip: `c.video({ src, poster })`.
+4. `ship` drives the HTML like a presenter before it ships (the runtime row).
+   Deliver the HTML as the deck to present, with the PDF and .pptx beside it.
+
+### A storyboard from a script
+
+1. The script into `content.txt`, one voiceover line a shot (split where the
+   edit will cut). `node wand.js new work/<name> --surface storyboard`.
+2. **Write the shot list in the chat first**: act, name, the line, and what
+   each frame shows. Then the job: `c.storyboard({ title, wpm, target, shots })`.
+3. Frames: `sketch` for a quick one in the brand's colours, the job's own SVG,
+   an image, or left to draw (the frames gate counts them).
+4. `ship`: the board as PDF and .pptx, `timing.csv`, `captions.srt`, and the
+   HTML with its player. Say in the note that timing is scratch timing at the
+   `wpm` given until a real read exists, and which frames are still to draw.
+
 ### Social cards
 
 `--surface square` or `og`; one `c.page()` per card; `out/pages/pNN.png` are
@@ -110,8 +145,10 @@ table has been checked by nobody.
 
 ## Available scripts
 
-- **`wand.js`** — doctor, new, build, check, ship, watch, gallery, components, brands
+- **`wand.js`** — doctor, new, build, check, ship, watch, poster, gallery, components, brands
 - **`lib/engine.js`** — the render and the gates
 - **`lib/components.js`** — the vocabulary and its CSS
 - **`lib/pptx.js`**, **`tools/embed_fonts.py`** — the PowerPoint export
 - **`lib/html_export.js`** — the one-file HTML with its runtime
+- **`lib/talk.js`**, **`lib/board.js`** — the talk and the storyboard runtimes
+- **`lib/runtime_check.js`** — the HTML driven like a presenter, at ship

package/START-HERE.md

@@ -6,8 +6,14 @@ node wand.js new work/acme --surface letter            # the default brand; doct
 #   write work/acme/job.mjs (pages(c)) and, for a rebuild, work/acme/content.txt
 node wand.js build work/acme/job.mjs                  # gates, PDF, a PNG per page, out/sheet.png
 node wand.js ship  work/acme/job.mjs --pptx           # + one-file HTML, PowerPoint
+node wand.js ship  work/acme/job.mjs --brand next     # the same job on the other brand, in out-next/
 ```
 
+A deck's HTML is a talk: entrances, steps, a presenter view (P). A demo needs
+a poster: `node wand.js poster demo.html --play 3`. A storyboard starts from
+`node wand.js new work/film --surface storyboard`; its HTML plays the board.
+`examples/talk/` and `examples/storyboard/` are finished ones.
+
 `node wand.js components` lists the vocabulary; `examples/overview/job.mjs` is
 a finished document and `examples/gallery/job.mjs` every component on one
 sheet (`node wand.js gallery --brand next` draws it on the website's brand).

package/examples/storyboard/job.mjs

@@ -0,0 +1,72 @@
+/**
+ * The storyboard example — a 30-second film from a six-line script, the
+ * regression for the storyboard component and lib/board.js.
+ *
+ * The script is the content file, one voiceover line a shot, so coverage
+ * proves every word of it is on the board. Frames show each way a frame can
+ * be drawn: a sketch in the brand's colours (people, software, agents), the
+ * job's own SVG, an image (the talk example's demo poster), and one left to
+ * draw, which the frames gate counts.
+ *
+ *   node wand.js ship examples/storyboard/job.mjs                  the current brand
+ *   node wand.js ship examples/storyboard/job.mjs --brand next     the website's, in out-next/
+ *
+ * Outputs: the board as PDF and PNGs, timing.csv, captions.srt, and one HTML
+ * file with the board to read and a player that runs it against the clock.
+ */
+export default {
+  name: "The dual workforce, a 30-second film",
+  file: "Wand_Dual_Workforce_Storyboard",
+  brand: "current",
+  surface: "slide",
+  tag: "Wand · Storyboard",
+  footer: "Wand AI · Draft for review",
+  content: "script.txt",
+  css: `
+    .frame-art .own .ring{fill:none;stroke:var(--stroke);stroke-width:6}
+    .frame-art .own .core{fill:var(--accent)}
+    .frame-art .own text{fill:var(--ink);font-family:var(--face-display);font-size:96px}
+  `,
+  pages: (c) => c.storyboard({
+    title: "The dual workforce",
+    lede: "A 30-second film for the website and LinkedIn. Six shots, three acts.",
+    wpm: 160,
+    target: 30,
+    shots: [
+      { act: "Today", name: "Two things", vo: c.L(1),
+        line: "Every company is people plus software; we show both, plainly.",
+        camera: "Locked off, wide.", motion: "People dots settle in; three app boxes slide up.", sound: "Low pad comes in.", next: "Cut on 'software'.",
+        frames: [
+          { sketch: { people: 6, label: "People" }, caption: "The team, as the script draws it: dots." },
+          { cue: "software", sketch: { people: 6, apps: ["CRM", "ERP", "Email"], label: "People and software" }, caption: "The systems arrive beside them." },
+        ] },
+      { act: "Today", name: "Software waits", vo: c.L(2),
+        line: "Software only moves when a person moves it.",
+        camera: "Slow push in on the boxes.", motion: "An arrow from the people to each box, one at a time.", onscreen: "30 years", sound: "A single click per arrow.", next: "Hold, then dip.",
+        frames: [{ cue: "waited", sketch: { people: 3, apps: ["CRM", "ERP"], label: "Every task starts with a person" } }] },
+      { act: "The arrival", name: "A new kind of worker", vo: c.L(3),
+        line: "The turn of the film: something new enters the frame.",
+        camera: "Pull out to reveal the right third.", motion: "A spark draws itself in, then pulses once.", sound: "Rising tone, then silence.", next: "Match cut on the spark.",
+        frames: [{ cue: "worker", art: `<svg class="own" viewBox="0 0 1920 1080"><circle class="ring" cx="960" cy="500" r="230"/><circle class="ring" cx="960" cy="500" r="330"/><path class="core" d="M960 380Q990 470 1080 500Q990 530 960 620Q930 530 840 500Q930 470 960 380Z"/><text x="960" y="930" text-anchor="middle">A new worker</text></svg>`, caption: "The job's own SVG, on brand roles." }] },
+      { act: "The arrival", name: "Agents at work", vo: c.L(4),
+        line: "Agents do the work inside the systems people already use.",
+        camera: "Over the shoulder of the boxes.", motion: "Sparks move into the boxes; the boxes light up.", onscreen: "Read · Decide · Act", sound: "Three soft ticks.", next: "Cut.",
+        frames: [
+          { sketch: { apps: ["CRM", "ERP", "Email"], agents: 3, label: "Agents inside the systems" } },
+          { cue: "act", img: c.brand === "next" ? "../talk/agents-demo.poster-next.png" : "../talk/agents-demo.poster.png", caption: "The live product, as it looks on screen." },
+        ] },
+      { act: "Wand", name: "A place in the organisation", vo: c.L(5),
+        line: "Wand is what makes an agent a colleague: identity, manager, budget, record.",
+        camera: "Locked off.", motion: "Four labels type in under the spark, one per beat of the voiceover.", onscreen: "Identity · Manager · Budget · Record", sound: "One tick per label.", next: "Dissolve.",
+        frames: [
+          { cue: "identity", sketch: { agents: 1, apps: ["Identity", "Manager"], label: "An agent, provisioned" } },
+          { cue: "budget", sketch: { agents: 1, apps: ["Budget", "Record"], label: "Governed like a person" } },
+          { cue: "record", caption: "End card for the governance beat: to draw." },
+        ] },
+      { act: "Wand", name: "One workforce", vo: c.L(6),
+        line: "The close: people and agents in one picture, then the wordmark.",
+        camera: "Slow pull out to the full frame.", motion: "Dots and sparks gather into one grid; the wordmark fades up.", sound: "Pad resolves.", next: "End.",
+        frames: [{ cue: "workforce", sketch: { people: 6, agents: 4, label: "One workforce", arrows: false } }] },
+    ],
+  }),
+};

package/examples/storyboard/script.txt

@@ -0,0 +1,6 @@
+Every company runs on two things: people and software.
+For thirty years, software waited for people to tell it what to do.
+Now a new kind of worker has arrived.
+AI agents that read, decide and act, inside the systems you already run.
+Wand gives each one a place in your organisation: an identity, a manager, a budget, a record.
+One workforce. People and agents, working as one.

package/examples/talk/agents-demo.html

@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Agents at work</title>
+<!--
+  A live demo for a talk deck: requests arrive, agents take them, a person
+  approves the ones that need a person. Self-contained, as a demo must be to
+  travel inside the deck. It dresses itself in the brand the deck hands it
+  (window.wandEmbed.brand) and answers the deck's D and R keys through
+  window.wandDemo = { play, pause, reset }.
+-->
+<style>
+  :root { --bg:#1A1033; --card:#291D5A; --stroke:#5B4BB0; --ink:#FFFFFF; --text:#F5F5F5; --label:#746B98; --accent:#9481FF; }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; height: 100%; }
+  body { background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
+  main { height: 100%; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 18px; padding: 26px; }
+  section { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--stroke); border-radius: 14px; background: color-mix(in srgb, var(--card) 55%, transparent); }
+  h2 { margin: 0 0 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); display: flex; justify-content: space-between; }
+  h2 b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
+  .lane { display: flex; flex-direction: column; gap: 8px; overflow: hidden; flex: 1; }
+  .task { padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--stroke); color: var(--ink); font-size: 14px; display: flex; justify-content: space-between; gap: 10px; animation: in 380ms cubic-bezier(.16,1,.3,1) both; }
+  .task i { font-style: normal; color: var(--label); font-size: 12px; white-space: nowrap; }
+  .task.agent { border-color: var(--accent); }
+  .task.agent i { color: var(--accent); }
+  .task.human i { color: var(--ink); }
+  .bar { height: 3px; border-radius: 2px; background: var(--stroke); overflow: hidden; margin-top: 6px; }
+  .bar > span { display: block; height: 100%; width: 0; background: var(--accent); }
+  @keyframes in { from { opacity: 0; transform: translateY(8px); } }
+</style>
+</head>
+<body>
+<main>
+  <section><h2>Incoming <b id="n-in">0</b></h2><div class="lane" id="in"></div></section>
+  <section><h2>Agents working <b id="n-work">0</b></h2><div class="lane" id="work"></div></section>
+  <section><h2>Done <b id="n-done">0</b></h2><div class="lane" id="done"></div></section>
+</main>
+<script>
+(() => {
+  const E = window.wandEmbed || {}, B = E.brand || {};
+  for (const k of ["bg", "card", "stroke", "ink", "text", "label", "accent"]) if (B[k]) document.documentElement.style.setProperty("--" + k, B[k]);
+  const KINDS = ["Invoice match", "Refund request", "Address change", "Claim review", "Contract renewal", "Access request", "Vendor onboarding", "Policy question"];
+  const lanes = { in: document.getElementById("in"), work: document.getElementById("work"), done: document.getElementById("done") };
+  let seq = 0, timer = null, tick = 0, done = 0;
+  const count = () => { for (const k of ["in", "work", "done"]) document.getElementById("n-" + k).textContent = k === "done" ? done : lanes[k].children.length; };
+  const card = (txt, cls, tag) => { const d = document.createElement("div"); d.className = "task " + cls; d.innerHTML = "<span>" + txt + "</span><i>" + tag + "</i>"; return d; };
+  function step() {
+    tick++;
+    if (lanes.in.children.length < 6) lanes.in.append(card(KINDS[seq++ % KINDS.length] + " #" + (1040 + seq), "", "queued"));
+    if (tick % 2 === 0 && lanes.in.firstElementChild && lanes.work.children.length < 4) {
+      const t = lanes.in.firstElementChild, name = t.firstElementChild.textContent, human = seq % 5 === 0;
+      t.remove(); const w = card(name, human ? "human" : "agent", human ? "needs a person" : "agent"); const bar = document.createElement("div"); bar.className = "bar"; bar.innerHTML = "<span></span>"; w.firstElementChild.append(bar); lanes.work.append(w);
+    }
+    [...lanes.work.children].forEach((w) => { const s = w.querySelector(".bar > span"); const v = (parseFloat(s.style.width) || 0) + (w.classList.contains("human") ? 9 : 22); s.style.width = Math.min(100, v) + "%"; if (v >= 100) { w.remove(); done++; lanes.done.prepend(card(w.firstElementChild.firstChild.textContent, w.classList.contains("human") ? "human" : "agent", w.classList.contains("human") ? "approved" : "resolved")); if (lanes.done.children.length > 7) lanes.done.lastElementChild.remove(); } });
+    count();
+  }
+  const api = {
+    play() { if (!timer) timer = setInterval(step, E.motion === false ? 900 : 450); },
+    pause() { clearInterval(timer); timer = null; },
+    reset() { api.pause(); for (const l of Object.values(lanes)) l.replaceChildren(); seq = 0; tick = 0; done = 0; for (let i = 0; i < 8; i++) step(); },
+  };
+  window.wandDemo = api;
+  api.reset();
+  if (E.motion !== false) api.play();
+})();
+</script>
+</body>
+</html>

package/examples/talk/job.mjs

@@ -0,0 +1,85 @@
+/**
+ * The talk example — an animated deck, the regression for lib/talk.js.
+ *
+ * Every motion the runtime knows, once: entrances staggered in for a slide
+ * that marks nothing (`talk.motion: "auto"`), figures that count up, a chart
+ * whose line draws and whose bars grow, steps the presenter brings in one at
+ * a time, and a live demo in a frame with its poster for the static exports.
+ * `seconds` on each slide gives the presenter's clock a pace to keep.
+ *
+ *   node wand.js ship examples/talk/job.mjs --pptx                 the current brand
+ *   node wand.js ship examples/talk/job.mjs --pptx --brand next    the website's, in out-next/
+ *   node wand.js poster examples/talk/agents-demo.html --play 3 [--brand next]
+ *
+ * The demo's poster is per brand, because the demo dresses itself in the
+ * deck's colours: agents-demo.poster.png and agents-demo.poster-next.png.
+ */
+import { DEFAULT_BRAND } from "../../lib/brand.js";
+
+const brandOf = (c) => c.brand || DEFAULT_BRAND;
+
+export default {
+  name: "Agents at work",
+  file: "Wand_Agents_at_Work_Talk",
+  brand: "current",
+  surface: "slide",
+  tag: "Wand",
+  footer: "Wand AI · Example talk",
+  talk: { motion: "auto", minutes: 8 },
+  css: `
+    .chart{width:100%;height:auto;display:block}
+    .chart .axis{stroke:var(--rule);stroke-width:2}
+    .chart .line{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
+    .chart .bar{fill:var(--emph)}
+    .chart text{fill:var(--soft);font-family:var(--face-body);font-size:22px}
+    .demo-wrap{margin-top:calc(var(--m-gap) * .6);width:66%}
+  `,
+  pages: (c) => [
+    c.cover({
+      label: "Example talk",
+      title: `Agents at <em>work</em>`,
+      lede: "What changes when software stops waiting to be told.",
+      meta: "An animated deck from the Wand studio",
+      notes: "Open on the question. Nothing on this slide needs explaining; let the title land.",
+    }),
+
+    c.page({ eyebrow: "The shift", seconds: 60, notes: "Left is every company today. Right is what we deploy. Pause on the word 'colleagues'.", body: `
+      ${c.h1(`Two <em>models</em>`)}
+      ${c.cols(2, [
+        c.card({ tag: "Today", title: "Software waits", level: "h3", body: [`People read, decide and act. Software holds the records and waits to be told.`] }),
+        c.card({ tag: "With agents", title: "Software works", level: "h3", emph: true, body: [`Agents read, decide and act inside the same systems, and people manage them like colleagues.`] }),
+      ])}
+    ` }),
+
+    c.page({ eyebrow: "What it adds up to", seconds: 50, notes: "The three figures count up as the slide arrives. Read the first one out; the room reads the rest.", body: `
+      ${c.h1("In the first year")}
+      ${c.stats([{ v: "62%", k: "of routine requests closed by agents", hero: true, count: true }, { v: "4,800", k: "hours a month back to the team", count: true }, { v: "3.5x", k: "faster from request to resolution", count: true }])}
+    ` }),
+
+    c.page({ eyebrow: "How it rolls out", seconds: 90, notes: "Three steps; press once for each. Do not jump ahead: each step is the reason for the next.", body: `
+      ${c.h1("One step at a time")}
+      ${c.cols(3, [
+        c.step(1, c.card({ tag: "Step 1", title: "Give agents an identity", body: ["Every agent is provisioned like a person: an owner, access, a record."] })),
+        c.step(2, c.card({ tag: "Step 2", title: "Start where the volume is", body: ["Pick the work that is high in volume and low in judgement."] })),
+        c.step(3, c.card({ tag: "Step 3", title: "Widen what they may decide", body: ["Raise the limits as the record earns it."], emph: true })),
+      ])}
+    ` }),
+
+    c.page({ eyebrow: "The curve", seconds: 60, notes: "The line draws itself: resolution time falling as agents take the volume. The bars are the agents' share.", body: `
+      ${c.h1("Time to resolve, month by month")}
+      <svg class="chart" viewBox="0 0 1600 520" role="img" aria-label="Resolution time falls while the agents' share of requests rises">
+        <line class="axis" x1="60" y1="460" x2="1560" y2="460"/>
+        ${[18, 26, 35, 44, 52, 58, 62].map((v, i) => `<rect class="bar"${c.enter("grow", i)} x="${120 + i * 205}" y="${460 - v * 5}" width="110" height="${v * 5}"/>`).join("")}
+        <path class="line" pathLength="1"${c.enter("draw", 2)} d="M175 120 L380 170 L585 230 L790 300 L995 350 L1200 385 L1405 400"/>
+        ${["M1", "M2", "M3", "M4", "M5", "M6", "M7"].map((m, i) => `<text x="${175 + i * 205}" y="500" text-anchor="middle">${m}</text>`).join("")}
+      </svg>
+    ` }),
+
+    c.page({ eyebrow: "Live", seconds: 120, notes: "The demo is live: press D to pause or play it, R to restart. Esc gives the keys back to the deck.", body: `
+      ${c.h1(`Watch them <em>work</em>`, "md")}
+      <div class="demo-wrap">${c.demo({ src: "agents-demo.html", poster: brandOf(c) === "next" ? "agents-demo.poster-next.png" : "agents-demo.poster.png", label: "Agents at work, live" })}</div>
+    ` }),
+
+    c.closing({ pair: "Wand", title: "Agents at work", url: "www.wand.ai", eyebrow: "Thank you" }),
+  ],
+};

package/lib/board.js

@@ -0,0 +1,152 @@
+/**
+ * lib/board.js — the runtime a storyboard carries in its one-file HTML.
+ *
+ * Generalised from the Wand OS film's board-o-matic
+ * (runs/2026-10-06-wand-os-video/storyboard/build.mjs): the shot pages stay
+ * readable as a scroll, and a player runs the frames against the timeline the
+ * storyboard component computed, cross-fading on each frame's cue, with the
+ * shot's voiceover as the caption and a track of every shot to scrub. With an
+ * audio file (a scratch or final voiceover) the sound leads and the frames
+ * follow it; without one, the clock does.
+ *
+ * Its controls read `--ui-*`, the brand's dark roles, so it dresses itself in
+ * whichever brand the board is on.
+ */
+
+export function boardShell(board) {
+  return {
+    before: `<button class="board-play" type="button" data-ui="play-board" aria-label="Play the storyboard (P)"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4.5v15l12-7.5z"/></svg>Play the board</button><div class="board-pages">`,
+    after: `</div>
+<div class="player" role="dialog" aria-modal="true" aria-label="Storyboard player" hidden>
+  <div class="pl-stage"><div class="pl-frames"></div><div class="pl-shot"></div><div class="pl-safe" hidden></div></div>
+  <p class="pl-vo" aria-live="off"></p>
+  <div class="pl-bar">
+    <button class="pl-btn" type="button" data-pl="toggle" aria-label="Play or pause (Space)"></button>
+    <span class="pl-tc"><b>0:00.0</b> / <i></i></span>
+    <div class="pl-track" role="slider" aria-label="Timeline" tabindex="0"></div>
+    <button class="pl-btn txt" type="button" data-pl="safe" aria-pressed="false">Safe area</button>
+    <button class="pl-btn txt" type="button" data-pl="close">Close</button>
+  </div>
+  ${board.audio ? `<audio class="pl-audio" preload="auto" src="${board.audio}"></audio>` : ""}
+</div>`,
+  };
+}
+
+export const BOARD_CSS = `<style id="wand-board">
+html,body{margin:0}
+body.board-on{background:var(--ui-bg);color:var(--ui-text);font-family:var(--ui-face),system-ui,sans-serif;-webkit-font-smoothing:antialiased}
+body.board-on button{font:inherit;color:inherit}
+[hidden]{display:none!important}
+.board-pages{padding:72px 0 32px}
+.board-pages>.page{margin:0 auto 24px;transform-origin:top center;transform:scale(var(--k,1));box-shadow:0 2px 24px color-mix(in srgb,var(--ui-bg) 70%,transparent)}
+.board-play{position:fixed;top:16px;right:20px;z-index:20;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ui-stroke);border-radius:10px;background:var(--ui-card);color:var(--ui-ink);cursor:pointer;font-weight:600;font-size:14px}
+.board-play svg{width:14px;height:14px;fill:currentColor}
+.board-play:hover{border-color:var(--ui-accent)}
+.player{position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:1fr auto auto;gap:14px;padding:24px 28px 18px;background:var(--ui-bg)}
+.pl-stage{position:relative;container-type:size;min-height:0;display:grid;place-items:center}
+.pl-frames{position:relative;width:min(100cqw,100cqh * 16 / 9);aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:var(--ui-card);box-shadow:0 0 0 1px var(--ui-stroke)}
+.pl-frames>.pf{position:absolute;inset:0;opacity:0;transition:opacity 380ms cubic-bezier(.65,0,.35,1)}
+.pl-frames>.pf.on{opacity:1}
+.pl-frames>.pf>.frame-art{position:absolute;inset:0;border:0;border-radius:0;aspect-ratio:auto}
+.pl-shot{position:absolute;left:calc(50% - min(100cqw,100cqh * 16 / 9) / 2 + 16px);top:calc(50% - min(100cqw,100cqh * 16 / 9) * 9 / 32 + 14px);padding:5px 10px;border-radius:8px;background:color-mix(in srgb,var(--ui-bg) 78%,transparent);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-label);font-variant-numeric:tabular-nums}
+.pl-safe{position:absolute;width:min(100cqw,100cqh * 16 / 9);aspect-ratio:16/9;pointer-events:none;background:
+  linear-gradient(var(--ui-accent),var(--ui-accent)) 5% 5%/90% 1px no-repeat,linear-gradient(var(--ui-accent),var(--ui-accent)) 5% 95%/90% 1px no-repeat,
+  linear-gradient(var(--ui-accent),var(--ui-accent)) 5% 5%/1px 90% no-repeat,linear-gradient(var(--ui-accent),var(--ui-accent)) 95% 5%/1px 90% no-repeat;opacity:.7}
+.pl-vo{margin:0 auto;max-width:min(1100px,92vw);min-height:3.2em;text-align:center;font-size:clamp(15px,1.6vw,22px);line-height:1.5;color:var(--ui-ink);transition:opacity 200ms}
+.pl-vo.off{opacity:.35}
+.pl-bar{display:flex;align-items:center;gap:12px}
+.pl-btn{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border:1px solid var(--ui-stroke);border-radius:9px;background:var(--ui-card);color:var(--ui-ink);cursor:pointer}
+.pl-btn svg{width:14px;height:14px;fill:currentColor}
+.pl-btn.txt{font-size:13px}
+.pl-btn[aria-pressed="true"]{border-color:var(--ui-accent);color:var(--ui-accent)}
+.pl-tc{font-size:13px;color:var(--ui-label);font-variant-numeric:tabular-nums;white-space:nowrap}
+.pl-tc b{color:var(--ui-ink);font-weight:600}
+.pl-tc i{font-style:normal}
+.pl-track{position:relative;flex:1;display:flex;gap:2px;height:34px;cursor:pointer;outline-offset:3px}
+.pl-track>.seg{position:relative;flex:var(--d) 1 0;min-width:2px;border-radius:4px;background:var(--ui-card);border:1px solid var(--ui-stroke);overflow:hidden}
+.pl-track>.seg.act{border-left:2px solid var(--ui-accent)}
+.pl-track>.seg>span{position:absolute;left:5px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--ui-label);white-space:nowrap;pointer-events:none}
+.pl-track>.seg.here{background:color-mix(in srgb,var(--ui-accent) 22%,var(--ui-card))}
+.pl-track>.head{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ui-ink);left:var(--x,0%);pointer-events:none}
+.pl-track:focus-visible,.pl-btn:focus-visible,.board-play:focus-visible{outline:3px solid var(--ui-accent)}
+@media (prefers-reduced-motion:reduce){.pl-frames>.pf{transition:none}}
+@media print{.board-play,.player{display:none!important}.board-pages{padding:0}.board-pages>.page{margin:0;transform:none;box-shadow:none;break-after:page}body.board-on{background:none}}
+</style>`;
+
+export const BOARD_JS = String.raw`(() => {
+  "use strict";
+  const $ = (s, r = document) => r.querySelector(s);
+  const $$ = (s, r = document) => [...r.querySelectorAll(s)];
+  const B = document.body, W = +B.dataset.w;
+  const D = JSON.parse($("#deck-data").textContent);
+  const shots = D.shots, total = D.total;
+  const pages = $$(".board-pages > .page");
+  B.classList.add("board-on");
+  const fit = () => { const k = Math.min(1, (innerWidth - 48) / W); pages.forEach((p) => { p.style.setProperty("--k", k); p.style.marginBottom = 24 - p.offsetHeight * (1 - k) + "px"; }); };
+  addEventListener("resize", fit); fit();
+
+  const tc = (t) => Math.floor(t / 60) + ":" + (t % 60).toFixed(1).padStart(4, "0");
+  const player = $(".player"), framesEl = $(".pl-frames"), voEl = $(".pl-vo"), shotEl = $(".pl-shot"), track = $(".pl-track");
+  const audio = $(".pl-audio");
+  const PLAY = '<svg viewBox="0 0 24 24"><path d="M7 4.5v15l12-7.5z"/></svg>', PAUSE = '<svg viewBox="0 0 24 24"><path d="M6 4.5h4v15H6zM14 4.5h4v15h-4z"/></svg>';
+
+  // every frame, in time order, cloned from its shot page
+  const FR = [];
+  shots.forEach((s, si) => s.frames.forEach((f) => {
+    const src = $('.frame[data-frame="' + f.id + '"] .frame-art');
+    const pf = document.createElement("div"); pf.className = "pf"; pf.dataset.id = f.id;
+    if (src) pf.append(src.cloneNode(true));
+    framesEl.append(pf); FR.push({ ...f, si, el: pf });
+  }));
+  FR.sort((a, b) => a.t - b.t);
+  $(".pl-tc i").textContent = tc(total);
+  shots.forEach((s, i) => {
+    const seg = document.createElement("div"); seg.className = "seg" + (i === 0 || s.act !== shots[i - 1].act ? " act" : "");
+    seg.style.setProperty("--d", Math.max(0.1, s.dur)); seg.title = String(s.n).padStart(2, "0") + " " + s.name;
+    seg.innerHTML = "<span>" + String(s.n).padStart(2, "0") + "</span>"; track.append(seg);
+  });
+  const head = document.createElement("i"); head.className = "head"; track.append(head);
+
+  let t = 0, playing = false, t0 = 0, last = -1;
+  const shotAt = (x) => { let i = shots.findIndex((s) => x < s.out); return i < 0 ? shots.length - 1 : i; };
+  function paint() {
+    const si = shotAt(t), s = shots[si];
+    let fi = -1; for (let i = 0; i < FR.length; i++) if (FR[i].t <= t + 1e-6) fi = i;
+    if (fi < 0) fi = 0;
+    if (fi !== last) { FR.forEach((f, i) => f.el.classList.toggle("on", i === fi)); last = fi; }
+    shotEl.textContent = "Shot " + String(s.n).padStart(2, "0") + (s.name ? " · " + s.name : "");
+    if (voEl.dataset.n !== String(s.n)) { voEl.textContent = s.vo || ""; voEl.dataset.n = s.n; }
+    voEl.classList.toggle("off", !(t >= s.voIn && t <= s.voOut));
+    $(".pl-tc b").textContent = tc(t);
+    head.style.setProperty("--x", (t / total) * 100 + "%");
+    $$(".seg", track).forEach((g, i) => g.classList.toggle("here", i === si));
+  }
+  function frame() {
+    if (!playing) return;
+    t = audio && !audio.paused ? audio.currentTime : (performance.now() - t0) / 1000;
+    if (t >= total) { t = total; pause(); }
+    paint(); if (playing) requestAnimationFrame(frame);
+  }
+  function play() { if (t >= total) t = 0; playing = true; t0 = performance.now() - t * 1000; if (audio) { audio.currentTime = t; audio.play().catch(() => {}); } $('[data-pl="toggle"]').innerHTML = PAUSE; requestAnimationFrame(frame); }
+  function pause() { playing = false; audio?.pause(); $('[data-pl="toggle"]').innerHTML = PLAY; paint(); }
+  function seek(x) { t = Math.max(0, Math.min(total, x)); t0 = performance.now() - t * 1000; if (audio) audio.currentTime = t; paint(); }
+  function open() { player.hidden = false; seek(t); $('[data-pl="toggle"]').innerHTML = PLAY; $('[data-pl="toggle"]').focus(); }
+  function close() { pause(); player.hidden = true; }
+  track.addEventListener("click", (e) => { const r = track.getBoundingClientRect(); seek(((e.clientX - r.left) / r.width) * total); });
+  document.addEventListener("click", (e) => {
+    if (e.target.closest('[data-ui="play-board"]')) { open(); play(); return; }
+    const b = e.target.closest("[data-pl]"); if (!b) return;
+    const a = b.dataset.pl;
+    if (a === "toggle") playing ? pause() : play();
+    if (a === "close") close();
+    if (a === "safe") { const s = $(".pl-safe"); s.hidden = !s.hidden; b.setAttribute("aria-pressed", String(!s.hidden)); }
+  });
+  addEventListener("keydown", (e) => {
+    if (e.metaKey || e.ctrlKey || e.altKey) return;
+    if (player.hidden) { if (e.key === "p" || e.key === "P") { e.preventDefault(); open(); play(); } return; }
+    const si = shotAt(t);
+    const map = { " ": () => (playing ? pause() : play()), Escape: close, ArrowRight: () => seek(shots[Math.min(shots.length - 1, si + 1)].in), ArrowLeft: () => seek(t - shots[si].in > 0.6 ? shots[si].in : shots[Math.max(0, si - 1)].in), Home: () => seek(0), End: () => seek(total) };
+    const fn = map[e.key]; if (!fn) return; e.preventDefault(); fn();
+  });
+  window.wandBoard = { open, close, play, pause, seek, get t() { return t; }, get playing() { return playing; }, total, frames: FR.length };
+})();`;

package/lib/brand.js

@@ -128,7 +128,10 @@ function brandCss(tokens, roles, fonts, extras = {}) {
     `@font-face{font-family:"${f.family}";font-weight:${f.weight};font-style:${f.italic ? "italic" : "normal"};src:url("${url(path.join(fonts, f.file))}")}`).join("\n");
   const F = tokens.faces, S = tokens.shape;
   const face = (k) => `--face-${k}:"${F[k].family}";--w-${k}:${F[k].weight};--tr-${k}:${F[k].tracking}em;--lh-${k}:${F[k].leading}`;
+  // the talk and board runtimes' own controls, dressed in the brand's dark roles
+  const d = roles.dark, ui = { bg: d.track, card: d.paper, stroke: d.stroke, ink: d.ink, text: d.text, label: d.muted, accent: d.accent };
   return `${faces}
+:root{${Object.entries(ui).map(([k, v]) => `--ui-${k}:#${v}`).join(";")};--ui-face:"${F.body.family}"}
 .page{${vars(roles.light)};${Object.keys(extras).length ? vars(extras) + ";" : ""}${face("display")};${face("body")};${face("label")};--caps-label:${F.label.caps ? "uppercase" : "none"};
   --radius-k:${S.radius};--card-stroke:${S.cardStroke}px;--emph-stroke:${S.emphStroke}px}
 .page.dark{${vars(roles.dark)}}`;