wand-kit 0.2.0 → 0.3.0

package/lib/talk.js

@@ -0,0 +1,620 @@
+/**
+ * lib/talk.js — the runtime a slide deck carries in its one-file HTML.
+ *
+ * Ported from the BofA talk (runs/2026-10-07-bofa-agentic-age-html/src/deck.js
+ * and deck.css), generalised from that deck's markup to the studio's `.page`
+ * and from its colours to the brand's: the controls read `--ui-*`, which
+ * brand.js writes on :root from the brand's dark roles, so the same runtime
+ * dresses itself in either brand.
+ *
+ * What it adds to the pages, none of which the PDF, the PNGs or the .pptx see
+ * (they are read from the static render):
+ *   - a crossfade between slides, the slide being left kept under the next;
+ *   - entrances: `data-a` (rise, fade, pop, grow, widen, draw, count) with `--i` as
+ *     the stagger, played going forward; with `motion: "auto"` a slide that
+ *     marks nothing has its blocks staggered in for it;
+ *   - steps: `data-step="n"` holds an element back until the presenter moves
+ *     on, a group per number; going back undoes the last group;
+ *   - media: a `.media.video` plays while its slide is on, a `.media.demo`
+ *     mounts its page in a frame (the next one preloads), posters until then;
+ *   - the presenter's tools: the dock, the talk clock and its pace against
+ *     each slide's `seconds`, speaker notes (N), the overview (G), the
+ *     presenter view in a second window kept in step by postMessage (P),
+ *     full screen (F), blank screen (B), shortcuts (?), a number then Enter
+ *     to jump, click and swipe to move, `#n` deep links, print as pages.
+ * Reduced motion turns every entrance and transition off.
+ */
+
+const ICON = {
+  prev: '<path d="M15 18l-6-6 6-6"/>',
+  next: '<path d="M9 18l6-6-6-6"/>',
+  grid: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>',
+  more: '<circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/>',
+  play: '<path d="M7 4.5v15l12-7.5z"/>',
+  pause: '<path d="M8 4.5v15M16 4.5v15"/>',
+  reset: '<path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/>',
+};
+const svg = (k) => `<svg viewBox="0 0 24 24" aria-hidden="true">${ICON[k]}</svg>`;
+
+const KEYS = [
+  ["Next, or the next step", ["→", "Space", "PgDn"]], ["Back", ["←", "PgUp"]], ["First, last", ["Home", "End"]],
+  ["Go to a slide", ["3", "Enter"]], ["All slides", ["G"]], ["Speaker notes", ["N"]], ["Presenter view", ["P"]],
+  ["Full screen", ["F"]], ["Blank the screen", ["B"]], ["Talk clock", ["T"]], ["Play or pause media", ["D"]], ["Restart media", ["R"]],
+];
+
+/** The controls around the stage. */
+export function talkShell(total) {
+  return {
+    before: `<div class="viewport"><div class="stage-cell"><div class="stage" role="region" aria-roledescription="slide deck">`,
+    after: `</div></div>
+  <aside class="notes-panel" hidden aria-label="Speaker notes">
+    <div class="notes-head"><h2></h2><div class="window"></div></div>
+    <div class="notes-text"></div>
+    <div class="notes-next"><span></span><div class="mini"></div></div>
+  </aside>
+  <aside class="presenter-side" hidden aria-label="Presenter">
+    <div class="p-times"><div><span>Talk clock</span><b class="p-elapsed">00:00</b></div><div><span>Pace</span><b class="p-pace">Not started</b></div><div><span>Time</span><b class="p-clock">--:--</b></div></div>
+    <div class="p-next"><span></span><div class="mini"></div></div>
+    <div class="p-notes"></div>
+    <div class="p-ctl">
+      <button class="ib" type="button" data-p="prev">${svg("prev")} Back</button>
+      <button class="ib" type="button" data-p="next">Next ${svg("next")}</button>
+      <button class="ib" type="button" data-p="clock">${svg("play")} Start or pause clock</button>
+      <button class="ib" type="button" data-p="reset-clock">${svg("reset")} Reset clock</button>
+      <button class="ib p-media" type="button" data-p="media" hidden>${svg("play")} Play or pause media</button>
+    </div>
+  </aside>
+</div>
+<nav class="dock" aria-label="Deck controls">
+  <button class="ib" type="button" data-ui="prev" aria-label="Back">${svg("prev")}</button>
+  <span class="counter" aria-hidden="true"><b>01</b> <i>/ ${String(total).padStart(2, "0")}</i></span>
+  <button class="ib" type="button" data-ui="next" aria-label="Next">${svg("next")}</button>
+  <span class="sep"></span>
+  <button class="clock" type="button" data-ui="clock" aria-label="Talk clock: start or pause (T)"><span class="dot"></span><b>00:00</b></button>
+  <span class="media-ctl" hidden><button class="ib" type="button" data-ui="media" aria-label="Play or pause media (D)">${svg("play")}</button><button class="ib" type="button" data-ui="media-reset" aria-label="Restart media (R)">${svg("reset")}</button></span>
+  <button class="ib" type="button" data-ui="overview" aria-label="All slides (G)">${svg("grid")}</button>
+  <span class="more">
+    <button class="ib" type="button" data-ui="more" aria-haspopup="menu" aria-expanded="false" aria-label="More">${svg("more")}</button>
+    <span class="menu" role="menu" hidden>
+      <button type="button" role="menuitem" data-ui="notes">Speaker notes <kbd>N</kbd></button>
+      <button type="button" role="menuitem" data-ui="presenter">Presenter view <kbd>P</kbd></button>
+      <button type="button" role="menuitem" data-ui="full">Full screen <kbd>F</kbd></button>
+      <button type="button" role="menuitem" data-ui="help">Shortcuts <kbd>?</kbd></button>
+    </span>
+  </span>
+</nav>
+<div class="progress" aria-hidden="true"><i></i></div>
+<div class="overlay overview" role="dialog" aria-modal="true" aria-label="All slides" hidden>
+  <header><h2>All slides</h2><span class="hint">Arrows to move · Enter to open · G or Esc to close</span></header>
+  <div class="thumbs"></div>
+</div>
+<div class="overlay help" role="dialog" aria-modal="true" aria-label="Shortcuts" hidden>
+  <div class="help-card"><h2>Shortcuts</h2><p>Click the slide to move on; Shift-click to go back.</p>
+  <dl class="keys">${KEYS.map(([d, ks]) => `<div><dt>${d}</dt><dd>${ks.map((k) => `<kbd>${k}</kbd>`).join("")}</dd></div>`).join("")}</dl></div>
+</div>
+<div class="blackout" hidden></div>
+<div id="announce" class="sr-only" aria-live="polite"></div>`,
+  };
+}
+
+export const TALK_CSS = `<style id="wand-talk">
+:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--t-fast:160ms;--t-mid:320ms;
+  --ui-glass:color-mix(in srgb,var(--ui-bg) 86%,transparent);--ui-line:color-mix(in srgb,var(--ui-stroke) 60%,transparent);--ui-shadow:color-mix(in srgb,var(--ui-bg) 75%,transparent);color-scheme:dark}
+html,body{margin:0;height:100%}
+body.talk-on{background:var(--ui-bg);color:var(--ui-text);font-family:var(--ui-face),system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
+body.talk-on button{font:inherit;color:inherit}
+body.talk-on :focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px;border-radius:6px}
+.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+[hidden]{display:none!important}
+
+/* the stage: the pages at their own size, scaled to the window by --k */
+.talk-on .viewport{position:fixed;inset:0;display:grid;grid-template-columns:1fr;transition:grid-template-columns var(--t-mid) var(--ease)}
+body.notes-open .viewport{grid-template-columns:1fr min(440px,34vw)}
+.talk-on .stage-cell{container-type:size;display:grid;place-items:center;min-width:0}
+.talk-on .stage{position:relative;width:min(100cqw,100cqh * var(--ar));aspect-ratio:var(--ar);overflow:hidden;box-shadow:0 0 0 1px var(--ui-line)}
+.talk-on .stage>.page,.mini>.page{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--k,1))}
+.talk-on .stage>.page{opacity:0;visibility:hidden;z-index:0;transition:opacity 340ms var(--ease-io),visibility 0s linear 340ms}
+/* a true crossfade: the slide being left stays opaque under the next until it has faded in */
+.talk-on .stage>.page.is-current{opacity:1;visibility:visible;z-index:2;transition:opacity 340ms var(--ease-io),visibility 0s}
+.talk-on .stage>.page.is-leaving{opacity:1;visibility:visible;z-index:1;transition:none}
+
+/* entrances, played going forward */
+.page.play [data-a]{animation:wa-rise 600ms var(--ease) both;animation-delay:calc(min(var(--i,0),12) * 70ms + 60ms)}
+.page.play [data-a="fade"]{animation-name:wa-fade}
+.page.play [data-a="pop"]{animation-name:wa-pop}
+.page.play [data-a="grow"]{animation-name:wa-grow;transform-box:fill-box;transform-origin:center bottom}
+.page.play [data-a="widen"]{animation-name:wa-widen;transform-box:fill-box;transform-origin:left center}
+.page.play [data-a="draw"]{stroke-dasharray:1;animation-name:wa-draw;animation-duration:1100ms}
+.page.play [data-a="count"]{animation-name:wa-fade}
+/* steps: held back on the stage until the presenter moves on */
+.talk-on .stage [data-step]:not(.shown){opacity:0;visibility:hidden}
+.talk-on .stage [data-step].shown{animation:wa-rise 520ms var(--ease) both}
+.talk-on .stage [data-step][data-a="fade"].shown{animation-name:wa-fade}
+.talk-on .stage [data-step][data-a="pop"].shown{animation-name:wa-pop}
+@keyframes wa-rise{from{opacity:0;transform:translateY(18px)}}
+@keyframes wa-fade{from{opacity:0}}
+@keyframes wa-pop{from{opacity:0;transform:scale(.6)}}
+@keyframes wa-grow{from{transform:scaleY(0)}}
+@keyframes wa-widen{from{transform:scaleX(0)}}
+@keyframes wa-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
+
+/* media: posters until the slide is on and the media is ready */
+.talk-on .stage .media.video.playing>.poster,.talk-on .stage .media.demo.is-ready>.poster{opacity:0;transition:opacity 400ms var(--ease-io)}
+.talk-on .stage .media.video>video{display:block}
+.talk-on .stage .media.demo>.screen>iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:transparent}
+
+/* the dock: back, where you are, next, the clock, media, the overview, a menu */
+.dock{position:fixed;left:50%;bottom:12px;z-index:30;display:flex;align-items:center;gap:2px;padding:4px;transform:translate(-50%,8px);opacity:0;pointer-events:none;
+  background:var(--ui-glass);backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--ui-line);border-radius:12px;box-shadow:0 12px 34px -12px var(--ui-shadow);
+  font-size:12.5px;color:var(--ui-text);transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
+body.ui-visible .dock,.dock:focus-within,.dock:hover{opacity:1;transform:translate(-50%,0);pointer-events:auto}
+body.notes-open .dock{left:calc((100vw - min(440px,34vw)) / 2)}
+.dock .sep{width:1px;height:18px;background:var(--ui-line);margin:0 4px}
+.ib{display:inline-grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;cursor:pointer;color:var(--ui-text);transition:background var(--t-fast),color var(--t-fast)}
+.ib:hover{background:var(--ui-card);color:var(--ui-ink)}
+.ib[aria-pressed="true"],.ib[aria-expanded="true"]{background:var(--ui-card);color:var(--ui-accent)}
+.ib svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
+.counter{padding:0 6px;min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
+.counter b{font-weight:600;color:var(--ui-ink)}
+.counter i{font-style:normal;color:var(--ui-label)}
+.clock{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px;border:0;border-radius:8px;background:transparent;cursor:pointer;font-variant-numeric:tabular-nums;color:var(--ui-text)}
+.clock:hover{background:var(--ui-card)}
+.clock b{color:var(--ui-ink);font-weight:600}
+.clock .dot{width:7px;height:7px;border-radius:50%;background:var(--ui-stroke)}
+.clock .dot.on{background:var(--ui-accent)}
+.clock .dot.behind{background:var(--ui-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-ink) 18%,transparent)}
+.clock.is-paused b{color:var(--ui-label)}
+.media-ctl{display:inline-flex;gap:2px}
+.more{position:relative}
+.menu{position:absolute;right:0;bottom:calc(100% + 8px);min-width:210px;padding:6px;background:var(--ui-card);border:1px solid var(--ui-stroke);border-radius:12px;box-shadow:0 18px 40px -12px var(--ui-shadow);display:grid;animation:wa-fade 160ms var(--ease)}
+.menu button{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;font-size:13px;color:var(--ui-text);text-align:left}
+.menu button:hover,.menu button:focus-visible{background:var(--ui-bg);color:var(--ui-ink);outline:none}
+.progress{position:fixed;left:0;right:0;bottom:0;height:3px;z-index:25;background:color-mix(in srgb,var(--ui-stroke) 55%,transparent)}
+.progress i{position:absolute;inset:0 auto 0 0;width:var(--fill,0%);background:var(--ui-accent);transition:width var(--t-mid) var(--ease)}
+body:not(.talk-on) .dock,body:not(.talk-on) .progress{display:none}
+
+.overlay{position:fixed;inset:0;z-index:40;display:grid;background:color-mix(in srgb,var(--ui-bg) 92%,transparent);backdrop-filter:blur(10px);animation:wa-fade var(--t-mid) var(--ease)}
+.overview{grid-template-rows:auto 1fr;padding:28px 40px 40px}
+.overview>header{display:flex;align-items:baseline;justify-content:space-between;color:var(--ui-ink)}
+.overview>header>h2{margin:0 0 18px;font-size:18px;font-weight:600}
+.overview>header>.hint{font-size:13px;color:var(--ui-label)}
+.thumbs{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px 18px;align-content:start;padding:4px}
+.thumb{border:0;padding:0;background:none;cursor:pointer;text-align:left;color:var(--ui-text)}
+.mini{position:relative;aspect-ratio:var(--ar);overflow:hidden;border-radius:10px;box-shadow:0 0 0 1px var(--ui-line);transition:box-shadow var(--t-fast),transform var(--t-mid) var(--ease)}
+.thumb:hover .mini,.thumb:focus-visible .mini{transform:translateY(-2px);box-shadow:0 0 0 2px var(--ui-accent)}
+.thumb.is-here .mini{box-shadow:0 0 0 3px var(--ui-accent)}
+.thumb>figure{margin:0}
+.thumb>figure>figcaption{display:flex;gap:8px;align-items:baseline;margin-top:8px;font-size:13px}
+.thumb>figure>figcaption>b{color:var(--ui-ink);font-variant-numeric:tabular-nums}
+.thumb:focus-visible{outline:none}
+.help{place-items:center}
+.help-card{width:min(720px,92vw);padding:30px 34px;background:var(--ui-card);border:1px solid var(--ui-stroke);border-radius:20px;box-shadow:0 30px 80px -20px var(--ui-shadow)}
+.help-card h2{margin:0 0 6px;font-size:20px;color:var(--ui-ink)}
+.help-card p{margin:0 0 20px;font-size:14px;color:var(--ui-label)}
+.keys{display:grid;grid-template-columns:1fr 1fr;gap:10px 34px;margin:0}
+.keys div{display:flex;justify-content:space-between;gap:16px;font-size:14px}
+.keys dt{color:var(--ui-text)}
+.keys dd{margin:0;display:flex;gap:4px}
+kbd{font:600 12px var(--ui-face),sans-serif;padding:3px 7px;border-radius:6px;background:var(--ui-bg);border:1px solid var(--ui-stroke);color:var(--ui-ink);min-width:22px;text-align:center}
+.notes-panel{min-width:0;display:grid;grid-template-rows:auto 1fr auto;gap:16px;padding:26px 26px 20px;background:var(--ui-bg);border-left:1px solid var(--ui-line);overflow:hidden}
+.notes-head>h2{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ui-label)}
+.notes-head>.window{margin-top:6px;color:var(--ui-ink);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
+.notes-text{overflow:auto;font-size:16px;line-height:1.6;color:var(--ui-text);padding-right:6px}
+.notes-text p{margin:0 0 12px}
+.notes-next>span,.p-next>span{font-size:12px;color:var(--ui-label)}
+.notes-next>.mini,.p-next>.mini{margin-top:8px}
+.blackout{position:fixed;inset:0;z-index:50;background:var(--ui-bg);cursor:none}
+.toast{position:fixed;left:50%;top:22px;transform:translateX(-50%);z-index:60;padding:10px 16px;border-radius:12px;background:var(--ui-card);border:1px solid var(--ui-stroke);color:var(--ui-ink);font-size:14px;box-shadow:0 16px 40px -12px var(--ui-shadow);animation:wa-fade var(--t-mid) var(--ease)}
+body.idle,body.idle *{cursor:none!important}
+
+/* the presenter's window: the slide, and beside it the clock, the next slide and the notes */
+body.presenter .viewport{grid-template-columns:1.7fr 1fr}
+body.presenter .dock,body.presenter .progress{display:none}
+body.presenter .stage-cell{padding:24px}
+.presenter-side{display:grid;grid-template-rows:auto auto 1fr auto;gap:18px;padding:24px 26px;background:var(--ui-bg);border-left:1px solid var(--ui-line);min-width:0;overflow:hidden}
+.p-times{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
+.p-times div{padding:12px 14px;border-radius:12px;background:var(--ui-card);border:1px solid var(--ui-stroke)}
+.p-times span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ui-label)}
+.p-times b{display:block;margin-top:4px;font-size:22px;font-weight:600;color:var(--ui-ink);font-variant-numeric:tabular-nums}
+.p-notes{overflow:auto;font-size:19px;line-height:1.6;color:var(--ui-ink);padding-right:8px}
+.p-notes h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ui-label)}
+.p-notes p{margin:0 0 14px}
+.p-ctl{display:flex;gap:6px;flex-wrap:wrap}
+.p-ctl .ib{width:auto;padding:0 14px;gap:8px;display:inline-flex;font-size:14px;background:var(--ui-card)}
+
+@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}}
+
+@media print{
+  html,body,body.talk-on{height:auto;overflow:visible;background:none}
+  .talk-on .viewport{position:static;display:block}
+  .talk-on .stage-cell,.talk-on .stage{display:block;width:auto;aspect-ratio:auto;overflow:visible;box-shadow:none;container-type:normal}
+  .talk-on .stage>.page{position:relative;transform:none;opacity:1!important;visibility:visible!important;break-after:page}
+  .talk-on .stage [data-step]{opacity:1!important;visibility:visible!important}
+  .page *,.page{animation:none!important;transition:none!important}
+  .dock,.progress,.overlay,.notes-panel,.presenter-side,.toast,.blackout,.media video,.media iframe{display:none!important}
+  .media>.poster{opacity:1!important}
+}
+</style>`;
+
+export const TALK_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, H = +B.dataset.h;
+  const DATA = JSON.parse($("#deck-data").textContent);
+  const stage = $(".stage");
+  const slides = $$(".stage > .page");
+  const total = slides.length;
+  const PRESENTER = new URLSearchParams(location.search).get("view") === "presenter";
+  const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const KEY = "wand-talk:" + (DATA.title || "deck") + ":";
+  const store = { get(k) { try { return JSON.parse(sessionStorage.getItem(KEY + k)); } catch { return null; } },
+                  set(k, v) { try { sessionStorage.setItem(KEY + k, JSON.stringify(v)); } catch {} } };
+  const pad = (n) => String(n).padStart(2, "0");
+  const mmss = (s) => { const a = Math.abs(Math.round(s)); return (s < 0 ? "-" : "") + pad(Math.floor(a / 60)) + ":" + pad(a % 60); };
+  const escH = (t) => String(t).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  B.classList.add("talk-on");
+  document.documentElement.style.setProperty("--ar", W + " / " + H);
+
+  /* ------------------------------------------------------ the slides' own facts */
+  // a slide's name: its heading, a closing's title, then its label or eyebrow
+  const titleOf = (s) => { const h = ["h1", "h2", ".lockup .title", ".label", ".eyebrow"].map((q) => $(q, s)).find((e) => e && e.textContent.trim()); return (h ? h.textContent : "").replace(/\s*\|\s*/g, " · ").replace(/\s+/g, " ").trim().slice(0, 80) || "Slide " + s.dataset.n; };
+  const META = slides.map((s) => ({ title: titleOf(s), notes: s.dataset.notes || "", seconds: +s.dataset.seconds || 0 }));
+  const timed = META.some((m) => m.seconds);
+  const plan = META.reduce((a, m, i) => (a.push(a[i] + (m.seconds || 0)), a), [0]);
+  const PLANNED = DATA.minutes ? DATA.minutes * 60 : plan[total];
+
+  /* a slide that marks nothing has its blocks staggered in, when the deck asks */
+  const GROUPS = ".cols, .strip, .stats, .steps, .flow, .list, ul, ol";
+  if (DATA.motion === "auto") slides.forEach((s) => {
+    if (s.dataset.motion === "none" || $('[data-a]:not([data-a="count"]), [data-step]', s)) return;
+    const content = $(".content", s); if (!content) return;
+    let i = 0;
+    const mark = (el) => { if (el.classList.contains("deco") || el.matches("script, style")) return; if (!el.hasAttribute("data-a")) el.setAttribute("data-a", ""); el.style.setProperty("--i", i++); };
+    const walk = (el) => { for (const ch of el.children) { if (ch.matches(GROUPS) && ch.children.length > 1) { for (const g of ch.children) mark(g); } else if (ch.matches(".top, .bottom") ) walk(ch); else mark(ch); } };
+    walk(content);
+  });
+
+  /* ------------------------------------------------------------- the scale */
+  function fit(box) { const k = box.clientWidth / W; if (k) box.style.setProperty("--k", k); }
+  new ResizeObserver(() => { fit(stage); $$(".mini").forEach(fit); }).observe(stage);
+  fit(stage);
+
+  /* -------------------------------------------------------------- the steps */
+  const stepsOf = (s) => [...new Set($$("[data-step]", s).map((e) => +e.dataset.step))].sort((a, b) => a - b);
+  let shown = 0;
+  function reveal(k) {
+    const st = stepsOf(slides[cur]); shown = Math.max(0, Math.min(st.length, k));
+    $$("[data-step]", slides[cur]).forEach((e) => e.classList.toggle("shown", st.indexOf(+e.dataset.step) < shown));
+  }
+
+  /* ------------------------------------------------------------- counting */
+  function count(s) {
+    $$('[data-a="count"]', s).forEach((el) => {
+      const raw = el.dataset.final || (el.dataset.final = el.textContent);
+      const m = raw.match(/^(\D*?)(-?[\d,]*\.?\d+)(.*)$/s); if (!m) return;
+      const dec = (m[2].split(".")[1] || "").length, comma = m[2].includes(","), to = parseFloat(m[2].replace(/,/g, ""));
+      const fmt = (v) => { let t = v.toFixed(dec); if (comma) t = Number(t).toLocaleString("en-US", { minimumFractionDigits: dec, maximumFractionDigits: dec }); return m[1] + t + m[3]; };
+      const t0 = performance.now(), D = 1100, delay = 60 + Math.min(+getComputedStyle(el).getPropertyValue("--i") || 0, 12) * 70;
+      el.textContent = fmt(0);
+      const tick = (t) => { const p = Math.min(1, Math.max(0, (t - t0 - delay) / D)); el.textContent = fmt(to * (1 - Math.pow(1 - p, 3))); if (p < 1) requestAnimationFrame(tick); else el.textContent = raw; };
+      requestAnimationFrame(tick);
+    });
+  }
+
+  /* --------------------------------------------------------- navigation */
+  let cur = 0, leaveT = null;
+  const announce = $("#announce");
+  function go(n, { from = "local", animate, steps } = {}) {
+    n = Math.max(0, Math.min(total - 1, n));
+    const prevN = cur, forward = n > prevN, leaving = slides[prevN], sl = slides[n];
+    if (n !== prevN || !sl.classList.contains("is-current")) {
+      slides.forEach((s) => s.classList.remove("is-leaving"));
+      if (leaving !== sl) { leaving.classList.add("is-leaving"); clearTimeout(leaveT); leaveT = setTimeout(() => leaving.classList.remove("is-leaving"), 380); }
+      slides.forEach((s, i) => { const on = i === n; s.classList.toggle("is-current", on); s.inert = !on; s.setAttribute("aria-hidden", on ? "false" : "true"); });
+      sl.classList.remove("play");
+      if ((animate ?? forward) && !reduced) { void sl.offsetWidth; sl.classList.add("play"); count(sl); }
+      if (leaving !== sl) leaving.classList.remove("play");
+    }
+    cur = n;
+    reveal(steps ?? (forward || animate ? 0 : Infinity));
+    if (!talkStart && n > 0 && from !== "init" && !PRESENTER) startTalk();
+    media.sync();
+    paint();
+    try { history.replaceState(null, "", location.search + "#" + (n + 1)); } catch {}
+    announce.textContent = "Slide " + (n + 1) + " of " + total + ": " + META[n].title;
+    if (from !== "remote") link.send({ type: "go", n, s: shown });
+  }
+  function next() {
+    if (shown < stepsOf(slides[cur]).length) { reveal(shown + 1); paint(); link.send({ type: "go", n: cur, s: shown }); return; }
+    go(cur + 1);
+  }
+  function prev() {
+    if (shown > 0) { reveal(shown - 1); paint(); link.send({ type: "go", n: cur, s: shown }); return; }
+    go(cur - 1);
+  }
+
+  /* ---------------------------------------------------------- the clock */
+  let talkStart = store.get("talkStart"), talkPaused = store.get("talkPaused");
+  const elapsed = () => (talkStart ? (talkPaused ?? (Date.now() - talkStart)) / 1000 : 0);
+  function startTalk() { talkStart = Date.now(); talkPaused = null; persistClock(); paint(); }
+  function toggleTalk() {
+    if (!talkStart) return startTalk();
+    if (talkPaused != null) { talkStart = Date.now() - talkPaused; talkPaused = null; } else talkPaused = Date.now() - talkStart;
+    persistClock(); paint();
+  }
+  function resetTalk() { talkStart = null; talkPaused = null; persistClock(); paint(); }
+  function persistClock() { store.set("talkStart", talkStart); store.set("talkPaused", talkPaused); link.send({ type: "clock", talkStart, talkPaused }); }
+  function pace() {
+    if (!talkStart) return { text: "Ready", cls: "" };
+    if (!timed) return { text: PLANNED ? mmss(PLANNED - elapsed()) + " left" : "Running", cls: "on" };
+    const d = elapsed() - plan[cur], span = plan[cur + 1] - plan[cur];
+    if (d > span) return { text: mmss(d - span) + " behind", cls: "behind" };
+    if (d < -45) return { text: mmss(-d) + " ahead", cls: "on" };
+    return { text: "On pace", cls: "on" };
+  }
+
+  /* -------------------------------------------------------------- paint */
+  const dock = $(".dock");
+  function paint() {
+    $(".counter b").textContent = pad(cur + 1);
+    const p = pace(), clock = $(".clock");
+    $("b", clock).textContent = mmss(elapsed());
+    $(".dot", clock).className = "dot " + (talkPaused != null ? "" : p.cls);
+    clock.classList.toggle("is-paused", talkPaused != null);
+    clock.title = (talkPaused != null ? "Paused" : p.text) + (PLANNED ? " · " + mmss(PLANNED) + " planned" : "") + " · T to start or pause";
+    $(".media-ctl").hidden = !media.here();
+    $(".progress i").style.setProperty("--fill", ((cur + 1) / total) * 100 + "%");
+    if (notesOpen) paintNotes();
+    if (PRESENTER) paintPresenter();
+  }
+  setInterval(() => { if (talkStart && talkPaused == null) paint(); }, 1000);
+
+  /* -------------------------------------------------------------- notes */
+  let notesOpen = false;
+  const notesEl = $(".notes-panel");
+  const window_ = (i) => (timed ? mmss(plan[i]) + " to " + mmss(plan[i + 1]) : "");
+  const notesHTML = (i) => (META[i].notes || "No notes on this slide.").split("\n").map((t) => "<p>" + escH(t) + "</p>").join("");
+  function paintNotes() {
+    $(":scope > .notes-head > h2", notesEl).textContent = pad(cur + 1) + " · " + META[cur].title;
+    $(":scope > .notes-head > .window", notesEl).textContent = window_(cur);
+    $(":scope > .notes-text", notesEl).innerHTML = notesHTML(cur);
+    $(":scope > .notes-next > .mini", notesEl).replaceChildren(...(cur + 1 < total ? [mini(cur + 1)] : []));
+    $(":scope > .notes-next > span", notesEl).textContent = cur + 1 < total ? "Next · " + META[cur + 1].title : "End of the deck";
+    $$(".mini", notesEl).forEach(fit);
+  }
+  function toggleNotes(on = !notesOpen) {
+    notesOpen = on; notesEl.hidden = !on; B.classList.toggle("notes-open", on);
+    if (on) paintNotes();
+    setTimeout(() => fit(stage), 360);
+  }
+
+  /* ------------------------------------------------------- thumbnails */
+  const minis = new Map();
+  function mini(i) {
+    let c = minis.get(i);
+    if (!c) {
+      c = slides[i].cloneNode(true);
+      c.inert = true; c.classList.remove("play", "is-leaving"); c.classList.add("is-current");
+      c.querySelectorAll("[id]").forEach((e) => e.removeAttribute("id"));
+      c.querySelectorAll("iframe, video").forEach((f) => f.remove());
+      c.querySelectorAll(".is-ready, .playing").forEach((l) => l.classList.remove("is-ready", "playing"));
+      c.querySelectorAll('[data-a="count"]').forEach((e) => { if (e.dataset.final) e.textContent = e.dataset.final; });
+      c.setAttribute("aria-hidden", "true");
+      minis.set(i, c);
+    }
+    return c.cloneNode(true);
+  }
+  function miniBox(i) { const d = document.createElement("div"); d.className = "mini"; d.append(mini(i)); return d; }
+
+  /* ----------------------------------------------------------- overview */
+  const ov = $(".overview"), helpEl = $(".help");
+  let ovCols = 4;
+  function openOverview() {
+    const grid = $(".thumbs", ov);
+    if (!grid.childElementCount) META.forEach((m, i) => {
+      const b = document.createElement("button");
+      b.className = "thumb"; b.type = "button"; b.dataset.n = i; b.setAttribute("aria-label", "Slide " + (i + 1) + ": " + m.title);
+      const f = document.createElement("figure"); f.append(miniBox(i));
+      const cap = document.createElement("figcaption"); cap.innerHTML = "<b>" + pad(i + 1) + "</b>" + escH(m.title); f.append(cap);
+      b.append(f); b.onclick = () => { closeOverlays(); go(i, { animate: true }); };
+      grid.append(b);
+    });
+    ov.hidden = false;
+    $$(".mini", ov).forEach(fit);
+    $$(".thumb", ov).forEach((t, i) => t.classList.toggle("is-here", i === cur));
+    const here = $$(".thumb", ov)[cur]; here.focus(); here.scrollIntoView({ block: "nearest" });
+    const r = $$(".thumb", ov).map((t) => t.getBoundingClientRect().top);
+    ovCols = Math.max(1, r.filter((t) => t === r[0]).length);
+  }
+  function closeOverlays() { ov.hidden = true; helpEl.hidden = true; slides[cur].focus({ preventScroll: true }); }
+  const overlayOpen = () => !ov.hidden || !helpEl.hidden;
+
+  /* ---------------------------------------------------------- media */
+  const media = (() => {
+    const frames = new Map(), sources = new Map();
+    async function load(id) {
+      if (sources.has(id)) return sources.get(id);
+      const el = document.getElementById("wand-demo-" + id);
+      const bin = Uint8Array.from(atob(el.textContent.trim()), (c) => c.charCodeAt(0));
+      const p = new Response(new Blob([bin]).stream().pipeThrough(new DecompressionStream("gzip"))).text();
+      sources.set(id, p); return p;
+    }
+    // the keys a clicker sends, and Escape, reach the deck while a demo has focus
+    const bridge = '<script>addEventListener("keydown",function(e){if(["PageDown","PageUp","Escape"].indexOf(e.key)>-1){e.preventDefault();parent.postMessage({wand:"key",key:e.key},"*")}},true);<\/script>';
+    function size(box, fr, min) {
+      const r = box.getBoundingClientRect(); if (!r.width) return;
+      const k = Math.min(1, r.width / min[0], r.height / min[1]);
+      Object.assign(fr.style, { width: r.width / k + "px", height: r.height / k + "px", transform: "scale(" + k + ")" });
+    }
+    async function mount(fig) {
+      const id = fig.dataset.demo; if (!id || frames.has(fig) || PRESENTER) return;
+      const screen = $(".screen", fig), min = (fig.dataset.min || "1280x720").split("x").map(Number);
+      const fr = document.createElement("iframe");
+      // no allow="fullscreen": the deck goes full screen, not the demo, and
+      // Chromium 141 (the chat sandbox's) logs the request as a policy error
+      fr.title = fig.getAttribute("aria-label") || "Live demo";
+      frames.set(fig, fr);
+      // the deck's brand, for a demo that dresses itself: bg, card, stroke, ink, text, label, accent
+      const cs = getComputedStyle(document.documentElement), brand = {};
+      ["bg", "card", "stroke", "ink", "text", "label", "accent"].forEach((k) => { brand[k] = cs.getPropertyValue("--ui-" + k).trim(); });
+      const cfg = { motion: !reduced, brand };
+      const doc = (await load(id)).replace(/<head[^>]*>/i, (m) => m + "<script>window.wandEmbed=" + JSON.stringify(cfg) + ";<\/script>" + bridge);
+      fr.addEventListener("load", () => fig.classList.add("is-ready"), { once: true });
+      fr.srcdoc = doc; screen.append(fr);
+      size(screen, fr, min); new ResizeObserver(() => size(screen, fr, min)).observe(screen);
+    }
+    const win = (fig) => { try { return frames.get(fig)?.contentWindow; } catch { return null; } };
+    const call = (fig, what) => { const w = win(fig); if (!w) return; const api = w.wandDemo || {}; (api[what] || w["bofa" + what[0].toUpperCase() + what.slice(1)])?.call(api); };
+    let playing = false;
+    const here = () => $$(".media", slides[cur]);
+    function sync() {
+      slides.forEach((s, i) => { if (i === cur) return; $$(".media.video video", s).forEach((v) => { v.pause(); v.closest(".media").classList.remove("playing"); }); $$(".media.demo", s).forEach((f) => call(f, "pause")); });
+      playing = false;
+      here().forEach((m) => {
+        if (m.classList.contains("demo")) mount(m);
+        if (m.classList.contains("video") && m.dataset.autoplay && !PRESENTER) { const v = $("video", m); v.muted = true; v.play().then(() => { m.classList.add("playing"); playing = true; paintMedia(); }).catch(() => {}); }
+      });
+      const nx = slides[cur + 1]; if (nx) $$(".media.demo", nx).forEach(mount);
+      paintMedia();
+    }
+    function paintMedia() { const b = $('[data-ui="media"]'); b.innerHTML = playing ? '${svg("pause")}' : '${svg("play")}'; $(".p-media").hidden = !here().length; }
+    function act(what) {
+      here().forEach((m) => {
+        if (m.classList.contains("video")) { const v = $("video", m); if (what === "reset") { v.currentTime = 0; v.pause(); m.classList.remove("playing"); playing = false; } else if (v.paused) { v.play().catch(() => {}); m.classList.add("playing"); playing = true; } else { v.pause(); playing = false; } }
+        if (m.classList.contains("demo")) { if (what === "reset") { call(m, "reset"); playing = false; } else { call(m, playing ? "pause" : "play"); playing = !playing; } }
+      });
+      paintMedia(); link.send({ type: "media", playing });
+    }
+    return { sync, act, here: () => here().length > 0, get playing() { return playing; }, set playing(v) { playing = v; paintMedia(); } };
+  })();
+
+  /* ------------------------------------------------------- the room link */
+  // the presenter view is this same file in a second window; the two keep the
+  // same slide, step and clock by postMessage, which works from file://
+  const link = (() => {
+    let peer = PRESENTER ? window.opener : null;
+    return {
+      send(msg) { try { peer && !peer.closed && peer.postMessage({ wand: "sync", ...msg }, "*"); } catch {} },
+      open() {
+        if (peer && !peer.closed) { peer.focus(); return; }
+        const p = new URLSearchParams(location.search); p.set("view", "presenter");
+        peer = window.open(location.pathname + "?" + p + "#" + (cur + 1), "wand-presenter", "popup,width=1440,height=900");
+        if (!peer) toast("Allow pop-ups to open the presenter view");
+      },
+      set(p) { peer = p; },
+      get peer() { return peer && !peer.closed ? peer : null; },
+    };
+  })();
+  addEventListener("message", (e) => {
+    const d = e.data || {};
+    if (d.wand === "key") { if (d.key === "PageDown") next(); else if (d.key === "PageUp") prev(); else slides[cur].focus({ preventScroll: true }); return; }
+    if (d.wand !== "sync") return;
+    if (!PRESENTER && e.source && !link.peer) link.set(e.source);
+    if (d.type === "hello") { link.send({ type: "go", n: cur, s: shown }); link.send({ type: "clock", talkStart, talkPaused }); link.send({ type: "media", playing: media.playing }); }
+    if (d.type === "go") { if (d.n !== cur) go(d.n, { from: "remote", animate: d.n > cur, steps: d.s }); else { reveal(d.s); paint(); } }
+    if (d.type === "clock") { talkStart = d.talkStart; talkPaused = d.talkPaused; store.set("talkStart", talkStart); store.set("talkPaused", talkPaused); paint(); }
+    if (d.type === "media-act" && !PRESENTER) media.act(d.act);
+    if (d.type === "media" && PRESENTER) media.playing = d.playing;
+  });
+
+  /* ----------------------------------------------------- presenter view */
+  function paintPresenter() {
+    const side = $(".presenter-side"), p = pace();
+    $(".p-elapsed", side).textContent = mmss(elapsed());
+    $(".p-pace", side).textContent = talkStart ? (talkPaused != null ? "Paused" : p.text) : "Not started";
+    $(".p-clock", side).textContent = new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    const st = stepsOf(slides[cur]).length;
+    $(".p-notes", side).innerHTML = "<h3>" + pad(cur + 1) + " · " + escH(META[cur].title) + (st ? " · step " + shown + " of " + st : "") + (timed ? " · " + window_(cur) : "") + "</h3>" + notesHTML(cur);
+    $(":scope > .p-next > span", side).textContent = cur + 1 < total ? "Next · " + pad(cur + 2) + " " + META[cur + 1].title : "End of the deck";
+    $(":scope > .p-next > .mini", side)?.replaceWith(cur + 1 < total ? miniBox(cur + 1) : Object.assign(document.createElement("div"), { className: "mini" }));
+    $$(".mini", side).forEach(fit);
+  }
+  if (PRESENTER) {
+    B.classList.add("presenter"); $(".presenter-side").hidden = false;
+    document.title = "Presenter · " + document.title;
+    setInterval(paintPresenter, 1000);
+    link.send({ type: "hello" });
+    $(".presenter-side").addEventListener("click", (e) => {
+      const b = e.target.closest("[data-p]"); if (!b) return;
+      ({ prev, next, clock: toggleTalk, "reset-clock": resetTalk, media: () => link.send({ type: "media-act", act: "toggle" }) })[b.dataset.p]?.();
+    });
+  }
+
+  /* ------------------------------------------------------------- input */
+  let digits = "", digitT = null;
+  const menu = $(".menu"), moreBtn = $('[data-ui="more"]');
+  const openMenu = () => { menu.hidden = false; moreBtn.setAttribute("aria-expanded", "true"); $("button", menu).focus(); };
+  const closeMenu = () => { menu.hidden = true; moreBtn.setAttribute("aria-expanded", "false"); };
+  const blackout = $(".blackout");
+  addEventListener("keydown", (e) => {
+    if (e.metaKey || e.ctrlKey || e.altKey) return;
+    const k = e.key;
+    if (k === "Escape") { if (!menu.hidden) closeMenu(); else if (overlayOpen()) closeOverlays(); else if (!blackout.hidden) blackout.hidden = true; else if (notesOpen) toggleNotes(false); return; }
+    if (!ov.hidden) {
+      const ts = $$(".thumb", ov), i = ts.indexOf(document.activeElement);
+      const mv = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: ovCols, ArrowUp: -ovCols }[k];
+      if (mv && i > -1) { e.preventDefault(); ts[Math.max(0, Math.min(ts.length - 1, i + mv))].focus(); }
+      if (k === "g" || k === "o") closeOverlays();
+      return;
+    }
+    if (!helpEl.hidden) { if (k === "?") closeOverlays(); return; }
+    if (/^[0-9]$/.test(k)) { digits += k; clearTimeout(digitT); digitT = setTimeout(() => (digits = ""), 1500); return; }
+    if (k === "Enter" && digits) { go(+digits - 1, { animate: true }); digits = ""; return; }
+    const map = {
+      ArrowRight: next, ArrowDown: next, PageDown: next, " ": next, ArrowLeft: prev, ArrowUp: prev, PageUp: prev,
+      Home: () => go(0), End: () => go(total - 1), g: openOverview, o: openOverview, n: () => toggleNotes(), p: () => link.open(),
+      f: fullscreen, b: () => { blackout.hidden = !blackout.hidden; }, ".": () => { blackout.hidden = !blackout.hidden; }, t: toggleTalk,
+      "?": () => { helpEl.hidden = false; },
+      d: () => (PRESENTER ? link.send({ type: "media-act", act: "toggle" }) : media.act("toggle")),
+      r: () => (PRESENTER ? link.send({ type: "media-act", act: "reset" }) : media.act("reset")),
+    };
+    const fn = map[k] || map[k.toLowerCase()]; if (!fn) return;
+    if (k === " " && document.activeElement && document.activeElement.matches("button, a, [role=button]")) return;
+    e.preventDefault(); fn();
+  });
+  document.addEventListener("click", (e) => {
+    if (!e.target.closest(".more")) closeMenu();
+    if (e.target.closest(".stage") && !e.target.closest("a, button, iframe, video, .media, input, select, textarea, [data-go]") && !overlayOpen() && !PRESENTER && !String(getSelection?.() || "").length) { e.shiftKey ? prev() : next(); return; }
+    const g = e.target.closest("[data-go]"); if (g) { e.preventDefault(); go(+g.dataset.go - 1, { animate: true }); return; }
+    const u = e.target.closest("[data-ui]"); if (!u) return;
+    if (u.closest(".menu")) closeMenu();
+    ({ prev, next, overview: openOverview, notes: () => toggleNotes(), presenter: () => link.open(), full: fullscreen,
+       more: () => (menu.hidden ? openMenu() : closeMenu()), help: () => { helpEl.hidden = false; }, clock: toggleTalk,
+       media: () => media.act("toggle"), "media-reset": () => media.act("reset") })[u.dataset.ui]?.();
+  });
+  let wheelX = 0, wheelLock = 0;
+  addEventListener("wheel", (e) => {
+    if (overlayOpen() || Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
+    e.preventDefault(); if (Date.now() < wheelLock) return;
+    wheelX += e.deltaX; if (Math.abs(wheelX) > 60) { wheelX > 0 ? next() : prev(); wheelX = 0; wheelLock = Date.now() + 650; }
+  }, { passive: false });
+  let sx = null;
+  stage.addEventListener("pointerdown", (e) => { if (e.pointerType !== "mouse") sx = [e.clientX, e.clientY]; });
+  stage.addEventListener("pointerup", (e) => { if (!sx) return; const dx = e.clientX - sx[0], dy = e.clientY - sx[1]; sx = null; if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.4) dx < 0 ? next() : prev(); });
+  let idleT = null;
+  function wake() {
+    B.classList.add("ui-visible"); B.classList.remove("idle"); clearTimeout(idleT);
+    idleT = setTimeout(() => { if (!dock.matches(":hover, :focus-within")) B.classList.remove("ui-visible"); if (document.fullscreenElement) B.classList.add("idle"); }, 2400);
+  }
+  addEventListener("mousemove", wake, { passive: true });
+  let wakeLock = null;
+  async function fullscreen() {
+    if (!document.fullscreenElement) { await document.documentElement.requestFullscreen?.().catch(() => {}); try { wakeLock = await navigator.wakeLock?.request("screen"); } catch {} }
+    else { await document.exitFullscreen?.(); wakeLock?.release?.(); wakeLock = null; }
+  }
+  let toastT = null;
+  function toast(msg) {
+    let t = $(".toast"); if (!t) { t = document.createElement("div"); t.className = "toast"; t.setAttribute("role", "status"); B.append(t); }
+    t.textContent = msg; t.hidden = false; clearTimeout(toastT); toastT = setTimeout(() => (t.hidden = true), 2600);
+  }
+  addEventListener("hashchange", () => { const n = parseInt(location.hash.slice(1), 10) - 1; if (n >= 0 && n !== cur) go(n, { animate: true }); });
+
+  /* -------------------------------------------------------------- start */
+  slides.forEach((s) => s.setAttribute("tabindex", "-1"));
+  const start = Math.max(0, Math.min(total - 1, (parseInt(location.hash.slice(1), 10) || 1) - 1));
+  cur = start;
+  go(start, { from: "init", animate: true });
+  window.wandTalk = { go, next, prev, get cur() { return cur; }, get shown() { return shown; }, total };
+  if (!PRESENTER) { wake(); if (!store.get("helped")) { toast("Press ? for shortcuts · P opens the presenter view"); store.set("helped", true); } }
+})();`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wand-kit",
-  "version": "0.2.0",
-  "description": "One HTML design surface for every sales and marketing material, on either Wand brand: decks, documents, one-pagers, case studies, social cards. Every export (PDF, PNG, PowerPoint, one-file HTML) is read from the page that was reviewed.",
+  "version": "0.3.0",
+  "description": "One HTML design surface for every sales and marketing material, on either Wand brand: decks that animate and present, documents, one-pagers, case studies, storyboards from a script, social cards. Every export (PDF, PNG, PowerPoint, one-file HTML) is read from the page that was reviewed.",
   "license": "SEE LICENSE IN PROMPT.md",
   "bin": {
     "wand-kit": "./wand.js"