wand-kit 0.1.0 → 0.3.0

package/PROMPT.md

@@ -37,8 +37,11 @@ strokes) and `art` (which file plays which role). A component asks for a role
 `tokens.json` and `BRAND.md` differ, `BRAND.md` is right and `tokens.json` has
 drifted.
 
-The new brand is for internal testing until the FK Roman Standard licence for
-documents is settled (`brand-next/fonts/LICENSE-FONTS.md`).
+`current` is the default while the two overlap; a job is on `next` when the
+user asks for the new brand. The default is one constant, `DEFAULT_BRAND` in
+`kit/lib/brand.js`, and `doctor` prints the rule from it. The FK Roman
+Standard licence for documents is still to be confirmed
+(`brand-next/fonts/LICENSE-FONTS.md`).
 
 ## 1. Surfaces — locked
 
@@ -140,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
@@ -181,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
@@ -199,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
@@ -245,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,19 +1,19 @@
 ---
-name: wand-studio
-description: Design any Wand sales or marketing material on either brand - a deck, a document, a one-pager, a case study, social cards - as PDF, PowerPoint and one-file HTML, with gates. Use when a .pptx, .docx or .pdf is attached, or branded output is wanted from a brief.
+name: wand-design
+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.1.0"
+  version: "0.3.0"
 ---
 
 
-# Wand studio
+# Wand design
 
 ## First: find the kit and stand in it
 
 1. **Installed from npm** (the usual way): it is at `node_modules/wand-kit/`.
-   If it is not there yet: `npm install wand-kit@next --no-audit --no-fund`.
+   If it is not there yet: `npm install wand-kit@latest --no-audit --no-fund`.
 2. **Attached to the chat as a zip**: unzip it and enter the folder it makes.
 3. **You are already inside it**: `wand.js` is next to this file.
 
@@ -35,16 +35,28 @@ PDF, the PNGs, the PowerPoint and the one-file HTML are all read from it.
 `PROMPT.md` is the design system: read it once for design decisions, not per
 page. `node wand.js components` lists the vocabulary.
 
-Two brands: `current` (Geist, the default) and `next` (the website's; for
-internal testing until its font licence is settled). Use `next` only when the
-user says *new brand*, *new guidelines* or *website look*.
+## Which brand
+
+Two brands, one kit: `current` (Geist) and `next` (the website's). `doctor`
+ends with the brand rule: which one is the default, and the words that ask
+for the other. Follow it as printed. When the user names no brand, build on
+the default without asking; when their words ask for the other, pass
+`--brand` to `new`. One brand per piece, never a mix, and the review note
+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` |
 
@@ -57,8 +69,8 @@ user says *new brand*, *new guidelines* or *website look*.
    text runs in order, or use the decks kit's `tools/extract.py` if present.
 2. **Write the page list in the chat before any markup**: one line per page
    with the claim it carries and which source lines it takes. Then compose.
-3. `node wand.js new work/<name> --surface letter|slide --brand current`,
-   write `pages(c)` with `c.L(n)` for every string, declare every departure
+3. `node wand.js new work/<name> --surface letter|slide` (plus `--brand` only
+   when the brand rule says so), write `pages(c)` with `c.L(n)` for every string, declare every departure
    in `edits` (no em dashes: swap them for commas or semicolons there) and
    every line left out in `cut`.
 4. `node wand.js build work/<name>/job.mjs` until every hard gate is ok. Look
@@ -79,22 +91,64 @@ 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
 the deliverables.
 
+### Older Wand work
+
+A deck or document made before this kit has no `job.mjs`. Treat it as a
+source and rebuild it (the first job above), on the brand the rule gives.
+One exception: a small edit (a date, a word, a figure) to a deck the old
+decks kit built, where they want the file otherwise untouched. For that edit
+only, `npm install wand-decks-kit@0.11.0 --no-audit --no-fund` and follow
+that kit's SKILL.md on editing (`node wand.js show`, then `edit --set`).
+An older copy of this skill may describe that kit, a routing table between
+two kits, or `edit --set`; none of it applies to anything else.
+
 ## The review note, always
 
-What was changed from the source and why (every edit, every cut); the gate
-table as printed; what a human still has to decide (a figure to confirm, a
+Which brand it is on; what was changed from the source and why (every edit,
+every cut); the gate table as printed; what a human still has to decide (a figure to confirm, a
 quote to clear, a claim legal should see). A file delivered without the gate
 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

@@ -2,12 +2,18 @@
 
 ```bash
 node wand.js doctor                                   # what works here; chromium must name a binary
-node wand.js new work/acme --surface letter --brand current
+node wand.js new work/acme --surface letter            # the default brand; doctor prints the rule
 #   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/gallery/job.mjs

@@ -4,7 +4,9 @@
  * It is the regression for the component library: a change to components.js
  * or to a brand's tokens is reviewed here once, on one sheet, before any job.
  */
-const brand = process.env.WAND_GALLERY_BRAND || "current";
+import { DEFAULT_BRAND } from "../../lib/brand.js";
+
+const brand = process.env.WAND_GALLERY_BRAND || DEFAULT_BRAND;
 
 export default {
   name: `Gallery ${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" }),
+  ],
+};