@hypersocial/decks-cli 0.9.9 → 0.9.10

package/README.md

@@ -58,6 +58,7 @@ whoami [--json]
 deck list [--json]
 deck stats <slug> [--json]
 deck open <slug>
+deck link <slug> [--json]   # the owner link: present or check your own deck, untracked
 
 share new <slug> <recipient> [--email e] [--note n] [--require-email] [--expires iso] [--limit n] [--qa] [--no-notify]
 share list <slug> [--json]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypersocial/decks-cli",
-  "version": "0.9.9",
+  "version": "0.9.10",
   "description": "Command-line client for Hypersocial Decks live analytics and share management.",
   "type": "module",
   "main": "./src/commands.mjs",

package/skills/hyperdecks/SKILL.md

@@ -146,14 +146,22 @@ Hyperdecks server; use the CLI where you have a shell and the tool otherwise.
 | PDF for a data room or attachment | `hyperdecks export <slug> --pdf [--notes] --out deck.pdf`, `hyperdecks export list` | `export_deck`, `list_exports` |
 | Video (MP4) for YouTube, LinkedIn or an attachment | `hyperdecks export <slug\|deck-dir> --video [--size 1080p\|720p\|4k] [--shape 16:9\|9:16\|1:1] [--title-card] [--end-card] [--no-captions] [--no-avatar] [--upload] --out deck.mp4`: records the narrated player in real time (a 4-minute deck takes about 5), avatar, voice and captions, no player chrome; a slug records the released copy, a deck folder its working copy; `--upload` lists it with the deck's exports | `export_deck { kind: "mp4" }` renders it on our render worker (the dashboard's Export → Video); poll `check_export`, or `hyperdecks export status <exportId>` |
 | Import only | `hyperdecks import <file> --slug <slug>` | `import_deck_from_url` |
-| One more link | `hyperdecks share new <slug> "<name>" [--no-forward]` | `create_share` (`allowForward`) |
+| One more link | `hyperdecks share new <slug> "<name>" [--no-forward] [--pace auto\|slide\|step]` | `create_share` (`allowForward`, `pace`) |
 | Forwarding, one link | `hyperdecks share forward on\|off\|default <token>` | `set_share_forwarding` |
 | Forwarding, whole deck | `hyperdecks deck forward on\|off <slug>` | `set_deck_forwarding` |
 | Slides or scroll, viewer toggle, pace, AI-readable version | `hyperdecks deck view <slug> [slides\|scroll\|default] [--toggle on\|off] [--pace auto\|slide\|step\|default] [--ai-readable on\|off]` | `set_deck_view` |
+| Present or check your own deck (owner link) | `hyperdecks deck link <slug>` (`deck open` opens it) | `ownerUrl` from `list_decks` or `check_deck` |
 | Who watched | `hyperdecks deck stats <slug>` | `deck_stats` |
 | All activity | `hyperdecks activity --deck <slug>` | `activity_overview` |
 | What one person watched | `hyperdecks engagement "<name>" --deck <slug> --json` | `recipient_engagement` |
 
+To present or check your own deck, use the owner link (`deck link`,
+`ownerUrl`): the released deck as recipients get it, for the owner only
+(signed in), with nothing tracked. Anyone else gets a sign-in notice, so a
+leaked owner link shows nothing. Its toolbar's Present (or H) hides the owner
+tools for a screen share. QA links are only for testing what a recipient sees;
+never make one to present on a call.
+
 Forwarding is on by default: a viewer can forward the deck to someone, which
 makes a child link tracked on its own ("Dana via Peter"; `share list` shows it
 indented under Peter's, `list_shares` gives `parentToken` and `forwardedBy`).
@@ -266,17 +274,27 @@ The deck contract (`check` enforces or warns on each line):
 <!-- topic: presenter -->
 #### Which presenter style
 
-**Who presents is set at release; leave the tag alone.** `deck new --narrated`
-writes `data-presenter="none"` on the player tag, and `release` (and
-`release_deck`) puts the narrator's face on the copy it publishes: your own
-narrator's avatar, or D.A.S.H.'s live head for a deck in D.A.S.H.'s voice. It
-says `presented by …` only when the published page has that face; otherwise
-it warns `releasing captions only` with the reason. To pick the face by hand,
-set both attributes: `data-presenter="head" data-avatar="…"`. D.A.S.H.'s is
+**The CLI writes the face into the tag; leave it alone.** `deck new --narrated`
+writes the narrator's face on the player tag (`data-presenter="head"
+data-avatar="…" data-presenter-from="narrator"`): the account's default
+narrator's, else D.A.S.H.'s. `deck narrator <slug> <name>` and `narrate`
+rewrite it to the narrator's face and print `presenter: …, written to
+index.html`; `deck narrator <slug> none` (or `deck new --captions-only`)
+writes captions only on purpose. So the file plays with its face however it is
+opened, a static server included. `release` (and `release_deck`) follows the
+narrator: a `data-presenter-from="narrator"` face is replaced by the current
+narrator's (your own narrator's avatar, or D.A.S.H.'s live head for a deck in
+D.A.S.H.'s voice). It says `presented by …` only when the published page has
+that face; otherwise it warns `releasing captions only` with the reason. To pick
+the face by hand, set both attributes and no `data-presenter-from`:
+`data-presenter="head" data-avatar="…"`. D.A.S.H.'s is
 `data-presenter="head" data-avatar="https://hyperdecks.ai/player/v1/dash-avatar.json"`
 (it loads from any host). `data-presenter="head"` with no `data-avatar` plays
-captions only, and so does a `data-avatar` beside `data-presenter="none"`.
-`check` warns on both, and `release` leaves a hand-set `data-avatar` alone.
+captions only, and so does a `data-avatar` beside `data-presenter="none"`, and
+so does a plain `data-presenter="none"` from an older scaffold.
+`check` warns on all three, and `release` leaves a hand-set `data-avatar` alone.
+A hosted draft (`new_deck`) stores the tag as the template wrote it; its draft
+link and `release_deck` add the narrator's face, so `check_deck` does not warn on its plain none.
 
 Set the deck's on the player tag (`data-presenter-style="stage"`) or in
 script.md's front matter (`presenterStyle: stage`); override one slide with
@@ -492,7 +510,7 @@ suit it.
 
 **Phones and backgrounds.** One phone: `product`'s `.frame.card`; a flow of
 two to four: `phones` (`--tilt`, `--shadow` on a card). A few slides at most:
-`bg-dots` (never under text), a `.deco` of inked tiles.
+`bg-stage` (never under text), a `.deco` of inked tiles.
 
 Presenter style follows the deck (step 2): `stage` when the presenter carries
 the story (the layouts keep the slot's corner clear); `corner` where a big
@@ -552,7 +570,8 @@ still.
 - `[go]` when the narration walks through items (cards, milestones, people,
   the action on the closer): one `go` per item at the word that starts it,
   then `[go: slot]` before the slide ends. Never more than one `go` per
-  sentence; never a `go` on a slide in `corner` style.
+  sentence; never a `go` on a slide in `corner` style. A `go` keeps off
+  the picture; with no room it stays home.
 - `[look]` for a glance: the title as it is read, a number as it is said, a
   screenshot as the narration turns to it.
 - `[reveal]` for the one detail that should not be read before it is said (a
@@ -564,8 +583,8 @@ still.
 <!-- topic: look -->
 #### Look: textures, icons, pictures
 
-What the house decks do that a plain agent deck doesn't. Decide these three
-once per deck, before writing slides, and say them in your plan.
+What the house decks do. Decide these three once per deck, before writing
+slides, and say them in your plan.
 
 **1. A picture on at least every other slide**, the most real one you have:
 
@@ -579,18 +598,22 @@ once per deck, before writing slides, and say them in your plan.
 No product to show (a plan, a strategy)? Make the slides visual with type
 and the kit below: a `number` slide, stickers, ticks on a `panel`.
 
-**2. One texture**, on two or three slides (an opener, a closer, a slide
-with a visual), never under body text. On the section:
+**2. Plain grounds; texture only behind objects.** Alternate plain,
+`on-tint`, `on-tint-2`, `on-tint-3`, `on-accent`, `on-ink`. On the section:
 
 | Class | Looks like | For |
 |---|---|---|
-| `bg-lines` | diagonal speed lines fading toward `--fade-at` | product slides, beside a picture |
-| `bg-halftone` | a corner of halftone dots | openers, numbers |
-| `bg-rays` | rays from `--rays-at` | an opener or a closer |
-| `bg-dots` | a fading dot grid | a phones row |
-
-Grounds carry the rest: alternate `on-accent`, plain, `on-ink` and the soft
-washes `on-tint`, `on-tint-2`, `on-tint-3` so each slide change reads.
+| `bg-pool` | a soft light behind the picture | any picture |
+| `bg-corner` | a halftone quarter-disc, top-right | cover, closer |
+| `bg-stage` | a dot plate under a mockup | product, phones |
+| `bg-mark` | the slide number, huge, faint (`--mark:'04'`) | cover, opener, closer |
+
+- One signature per deck (`bg-corner` or `bg-mark`), on three slides at
+  most: the cover, an opener or the ask, the closer.
+- `bg-pool` and `bg-stage` are picture helpers: only beside an image.
+- Nothing under text, a chart or a photo; the presenter's corner stays clear.
+- Your own is fine in the deck's `<style>`: tokens only, behind the content
+  in an isolated slide, off with nothing to back.
 
 **3. One icon set.** Pick one source and keep it for every icon in the deck:
 Lucide (`search_icons`, same `strokeWidth` throughout); or one
@@ -610,7 +633,7 @@ palette <ink hex> <accent hex> <paper hex>, no text, no logos`
 (`generate_image { brand: true }` adds the palette and the "no text" for
 you). Generate at the slide's shape (wide for a hero), in one batch.
 
-**Slide recipes.** Opener: `on-accent` + `bg-rays` or `bg-halftone`, the logo
+**Slide recipes.** Opener: `on-accent` + `bg-corner`, the logo
 or a few app-icon stickers, one display line. Product or feature: `split`
 with a real screen. Proof: `number` (huge, sourced) or `chart`. Plan:
 `timeline` on a tint. People: `team` with real faces. Closer: `on-ink`, the
@@ -840,6 +863,10 @@ browser (an agent reads the URL; `--json` prints it as one line).
 `release --qa` is not a preview: it needs a commit, and it changes what every
 link to this deck plays.
 
+Watch a draft with `hyperdecks play`: it shows the face the deck will ship
+with. A plain static server shows the file as written: the face named in the
+tag (the narrator's, since `deck new`, `deck narrator` and `narrate` write it
+there), or none for a tag that says `data-presenter="none"` (`check` warns).
 For the layout pass, serve the folder (`npx serve decks/<slug>` or `python3 -m http.server -d decks/<slug>`)
 and screenshot it with Playwright at 1440×900 and 390×844, every slide
 (`#scene=<id>`). Look at both: nothing clipped, the presenter and its captions

package/skills/hyperdecks/chat.md

@@ -90,6 +90,11 @@ makes the hello deck; continue from step 5 below.
    only, when nobody chose that, is refused: hand the person its Add narrator
    link, or offer D.A.S.H., and pass `captionsOnly: true` only if they say so.
    The result's `presenter` names who presents.
+   To present or check your own deck (on a call, say), give the user its
+   owner link, `ownerUrl` from `list_decks` or `check_deck`: only they can
+   open it, signed in, and nothing is tracked; Present (or H) hides their
+   owner tools for a screen share. QA links are only for testing what a
+   recipient sees, not for presenting.
 10. Later: `list_shares` and `deck_stats` (both show the card),
    `activity_overview`; `email_embed { token }` for the HTML that pastes into an
    email as the deck's moving preview (it needs a recipient's link, not a QA

package/src/brand.mjs

@@ -8,7 +8,8 @@
 // only the tokens here touch the deck.
 
 // Weights each role loads: the templates set body text at 500, titles at 700
-// and labels in mono at 400/700. Every family below has these on Google Fonts.
+// and labels in mono at 400/700. Every pairing family has these on Google Fonts;
+// a display family outside the pairings loads what displayFace says it has.
 const ROLE_WEIGHTS = { display: "600;700", body: "400;500;700", mono: "400;700" };
 
 // 16 pairings, display + body + mono, each a family Google Fonts serves at the
@@ -32,8 +33,35 @@ export const FONT_PAIRINGS = [
   { id: "grotesk", display: "Schibsted Grotesk", body: "Work Sans", mono: "Roboto Mono", use: "Marketplaces and media brands; confident and newsy." },
 ];
 
-// Weights for families that do not have every role weight (load what exists).
-const FAMILY_WEIGHTS = { "Space Mono": "400;700", "DM Mono": "400;500", "Libre Baskerville": "400;700", "Courier Prime": "400;700", "Syne": "600;700" };
+// Weights for families that do not have every role weight (load what exists),
+// including single-weight display faces a brand may name (Google Fonts refuses
+// a stylesheet that asks for a weight the family lacks).
+const SINGLE_WEIGHT = ["Bangers", "Bebas Neue", "Anton", "Luckiest Guy", "Permanent Marker", "Pacifico", "Lobster", "Abril Fatface", "Alfa Slab One", "Righteous", "Press Start 2P", "Black Ops One", "Bungee", "Russo One", "Shrikhand", "Monoton", "Creepster", "Special Elite"];
+const FAMILY_WEIGHTS = {
+  "Space Mono": "400;700", "DM Mono": "400;500", "Libre Baskerville": "400;700", "Courier Prime": "400;700", "Syne": "600;700",
+  ...Object.fromEntries(SINGLE_WEIGHT.map((f) => [f, "400"])),
+};
+
+// The template's titles (700, -.045em) were tuned for the pairings' sans
+// display faces. Any other display face gets tracking 0; a face with a known
+// weight table is set at its heaviest weight. A face we know nothing about stays
+// at 700 and loads 400;700: Google Fonts' css2 serves whichever of the asked
+// weights exist (it fails only when none do), and the templates' font-synthesis:
+// none means a face without a 700 draws its real 400, never a faked bold.
+const SERIF_DISPLAY = new Set(["Fraunces", "Playfair Display", "Newsreader", "Libre Baskerville"]);
+const TUNED_DISPLAY = new Set(FONT_PAIRINGS.map((p) => p.display).filter((f) => !SERIF_DISPLAY.has(f)));
+// Any family a pairing names (display or body) has the display weights.
+const PAIRED_DISPLAY = new Set(FONT_PAIRINGS.flatMap((p) => [p.display, p.body]));
+
+// { weights, weight, tracking } for a display family: the weights to load, and
+// the --display-weight / --display-tracking to write (null: the template's).
+export function displayFace(family) {
+  const f = String(family ?? "").trim();
+  const weights = FAMILY_WEIGHTS[f] ?? (PAIRED_DISPLAY.has(f) ? ROLE_WEIGHTS.display : "400;700");
+  if (TUNED_DISPLAY.has(f)) return { weights, weight: null, tracking: null };
+  const heaviest = Math.max(...weights.split(";").map(Number));
+  return { weights, weight: heaviest === 700 ? null : String(heaviest), tracking: "0" };
+}
 
 const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
 // A Google Fonts family name: letters, digits and spaces (e.g. "Source Sans 3").
@@ -54,7 +82,7 @@ export function findPairing(id) {
 // The Google Fonts stylesheet URL for one family at the weights its roles use
 // (a family that is both display and body loads both roles' weights).
 export function googleFontsUrl(family, roles = "body") {
-  const wanted = [roles].flat().flatMap((r) => (ROLE_WEIGHTS[r] ?? "400;700").split(";"));
+  const wanted = [roles].flat().flatMap((r) => (r === "display" ? displayFace(family).weights : ROLE_WEIGHTS[r] ?? "400;700").split(";"));
   const weights = FAMILY_WEIGHTS[family] ?? [...new Set(wanted)].sort().join(";");
   return `https://fonts.googleapis.com/css2?family=${family.trim().replace(/ /g, "+")}:wght@${weights}&display=swap`;
 }
@@ -115,7 +143,12 @@ export function applyBrand(html, brand) {
   for (const [k, v] of Object.entries(b.colors)) set(CSS_VAR[k], v);
   if (b.fonts.body) set("--font", fontStack(b.fonts.body, "body"));
   if (b.fonts.mono) set("--mono", fontStack(b.fonts.mono, "mono"));
-  if (b.fonts.display) set("--display", fontStack(b.fonts.display, "display"));
+  if (b.fonts.display) {
+    set("--display", fontStack(b.fonts.display, "display"));
+    const face = displayFace(b.fonts.display);
+    if (face.weight) set("--display-weight", face.weight);
+    if (face.tracking) set("--display-tracking", face.tracking);
+  }
   let out = html.slice(0, root.index) + block + html.slice(root.index + root[0].length);
 
   const families = FONT_ROLES.filter((r) => b.fonts[r]).map((r) => [b.fonts[r], r]);

package/src/checkRules.mjs

@@ -63,6 +63,7 @@ export const MESSAGES = {
   gesture: (line, id) => `script.md line ${line}: [gesture: ${id}] is not one of the head's gestures: ${GESTURES.join(", ")}`,
   presenterUnfilled: (mode) => `the player tag says data-presenter="${mode}" but names no face (${mode === "head" ? "data-avatar" : "data-presenter-image"}), so as written it plays captions only. release puts the narrator's face on it; to set one by hand, D.A.S.H. is data-presenter="head" data-avatar="${DASH_AVATAR}" (deck_guide topic presenter)`,
   presenterKept: (mode) => `the player tag has a data-avatar but data-presenter="${mode ?? "none"}", so it plays captions only and release leaves it that way: set data-presenter="head" to show that face, or remove data-avatar so release adds the narrator's`,
+  presenterCaptions: () => `the player tag plays captions only as written (data-presenter="none" or none set), so the file served as is (npx serve, python3 -m http.server, the screenshot pass) shows no face: run \`hyperdecks deck narrator <slug> <name>\` (or narrate again) to write the narrator's face into index.html, or watch it with \`hyperdecks play <deck>\`; release adds the face either way. Captions only on purpose: \`hyperdecks deck narrator <slug> none\``,
   presenterSize: (where, value) => `${where}: data-presenter-size "${value}" is not one of ${PRESENTER_SIZES.join(", ")}; the presenter keeps its default size`,
   presenterStyle: (where, value) => `${where}: presenter style "${value}" is not one of ${PRESENTER_STYLES.join(", ")}`,
   transition: (where, value) => `${where}: transition "${value}" is not one of ${TRANSITIONS.join(", ")} (zoom takes a selector: "zoom #row")`,
@@ -74,6 +75,9 @@ export const MESSAGES = {
   fewPictures: (shown, total) => `only ${shown} of ${total} slides show a picture (a screenshot, a recording, a photo, a chart); aim for a real one on every other slide (deck_guide topic look)`,
   presenterGutter: (where, decl) => `${where}: ${decl} keeps a right gutter for the presenter; leave that corner to the slide's .narration-slot so a deck without a presenter can use it (deck_guide topic look)`,
   mixedIcons: (sets) => `the deck mixes icon sets (${sets.join(" and ")}); keep one set per deck (deck_guide topic look)`,
+  retiredTexture: (where, cls, instead, inlined) => `${where}: ${cls} is a whole-slide texture the kit no longer ships ${inlined ? "(this deck still carries its rule, so it runs under the text)" : "(it ran under the text), so it paints nothing"}; ${instead} (deck_guide topic look)`,
+  tooManySignatures: (n) => `${n} slides carry a signature background (bg-corner or bg-mark); keep it to three at most: the cover, one opener or the ask, the closer (deck_guide topic look)`,
+  textureOff: (where, cls, layout) => `${where}: ${cls} does nothing on ${layout} (the shell switches it off there: nothing to back); remove it, or use bg-pool behind the picture (deck_guide topic look)`,
   // A layout's stand-in left in: `how` is the tool (hosted) or command (CLI) that makes the real file.
   placeholder: (id, what, el, how, img) => `slide ${id}: ${what} is still the layout's placeholder (${el}); ${how}, then put it in as ${img}`,
   // Warnings (check --layout): the deck still passes.
@@ -810,6 +814,44 @@ export function lookWarnings(html) {
     if (iconImg(tag)) sets.add("image icons");
   }
   if (sets.size > 1) out.push(MESSAGES.mixedIcons([...sets].sort()));
+  out.push(...textureWarnings(all, html));
+  return out;
+}
+
+// Backgrounds (the look topic): the kit's textures are confined to the object they
+// back. The retired whole-slide textures warn rather than vanish silently (a deck made
+// before keeps their rules in its own inlined shell, where they still paint). Read from each slide's class attribute; a texture on a layout whose shell
+// rule switches it off (TEXTURE_OFF, pinned to _deck.html by lib/deckLayouts.test.ts) did nothing, and a custom
+// slide (no l-* class) is never judged on that. Commented-out slides do not count.
+const RETIRED_TEXTURES = {
+  "bg-rays": "use a plain ground, or bg-corner on the cover and the closer",
+  "bg-lines": "use a plain ground, or bg-pool behind the picture",
+  "bg-halftone": "use bg-corner on the cover and the closer",
+  "bg-dots": "use bg-stage under the mockup or the phones",
+};
+const SIGNATURES = ["bg-corner", "bg-mark"];
+export const MAX_SIGNATURE_SLIDES = 3;
+const BUSY_LAYOUTS = ["l-number", "l-features", "l-team", "l-timeline", "l-compare"]; // full-width content: nothing to back
+export const TEXTURE_OFF = {
+  "bg-corner": ["l-split", "l-product", "l-chart", "l-quote", ...BUSY_LAYOUTS],
+  "bg-stage": ["l-split", "l-chart", "l-quote", "l-closer", ...BUSY_LAYOUTS],
+  "bg-mark": ["l-split", "l-product", "l-chart", "l-phones", ...BUSY_LAYOUTS],
+};
+function textureWarnings(all, html) {
+  const css = [...uncommented(html).matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)].map((m) => m[1].replace(/\/\*[\s\S]*?\*\//g, "")).join("\n");
+  const inlined = (c) => new RegExp(`\\.${c}(?![\\w-])[^{}]*\\{`).test(css);
+  const out = [];
+  let signatures = 0;
+  all.forEach((s, i) => {
+    const where = `slide ${s.id || i + 1}`;
+    const cls = classes(s.tag);
+    for (const [c, instead] of Object.entries(RETIRED_TEXTURES)) if (cls.includes(c)) out.push(MESSAGES.retiredTexture(where, c, instead, inlined(c)));
+    if (SIGNATURES.some((c) => cls.includes(c))) signatures++;
+    const layout = cls.find((c) => /^l-[\w-]+$/.test(c));
+    if (!layout) return;
+    for (const [c, off] of Object.entries(TEXTURE_OFF)) if (cls.includes(c) && off.includes(layout)) out.push(MESSAGES.textureOff(where, c, layout));
+  });
+  if (signatures > MAX_SIGNATURE_SLIDES) out.push(MESSAGES.tooManySignatures(signatures));
   return out;
 }
 
@@ -970,8 +1012,14 @@ export async function checkSources({ html, script = "" }, opts = {}, { fetch: fe
   }
   warnings.push(...transitionWarnings(html, script, manifest), ...presenterSizeWarnings(html));
   // A narrated deck's tag that shows no face and says otherwise (a silent deck has no presenter).
-  const tagIssue = silent ? null : presenterTagIssue(html);
-  if (tagIssue) warnings.push(tagIssue.kind === "kept" ? MESSAGES.presenterKept(tagIssue.presenter) : MESSAGES.presenterUnfilled(tagIssue.presenter));
+  // A hosted draft plays only through its draft link and release_deck, which add the face, so a plain none is no issue there.
+  const found = silent ? null : presenterTagIssue(html);
+  const tagIssue = found?.kind === "captions" && opts.hosted ? null : found;
+  if (tagIssue) {
+    warnings.push(tagIssue.kind === "kept" ? MESSAGES.presenterKept(tagIssue.presenter)
+      : tagIssue.kind === "captions" ? MESSAGES.presenterCaptions()
+      : MESSAGES.presenterUnfilled(tagIssue.presenter));
+  }
   for (const t of walked.templates) warnings.push(MESSAGES.scriptTemplate(t.from, t.samples));
   for (const c of walked.computed) warnings.push(MESSAGES.scriptComputed(c.from, c.calls));
   if (opts.hosted) {

package/src/commands.mjs

@@ -72,12 +72,23 @@ async function deckStats(pos, opts) {
   }
 }
 
+// The owner link: present or check your own deck (untracked, owner-only).
+function deckLink(pos, opts) {
+  const [slug] = pos;
+  if (!slug) throw new Error("usage: deck link <slug> [--json]");
+  const out = ops.ownerLink(opts, slug);
+  if (opts.json) return console.log(JSON.stringify(out, null, 2));
+  console.log(out.ownerUrl);
+  if (out.backupUrl) console.log(`backup (other domain): ${out.backupUrl}`);
+  console.log("Only you can open it, signed in; nothing is tracked. Present (or H) hides your owner tools for a screen share.");
+}
+
 function deckOpen(pos, opts) {
   const [slug] = pos;
   if (!slug) throw new Error("usage: deck open <slug>");
-  const url = `${target(opts).brokerBase}/d/${slug}`;
-  console.log(url);
-  openBrowser(url);
+  const { ownerUrl } = ops.ownerLink(opts, slug);
+  console.log(ownerUrl);
+  openBrowser(ownerUrl);
 }
 
 async function deckRemove(pos, opts) {
@@ -89,8 +100,11 @@ async function deckRemove(pos, opts) {
 
 async function shareNew(pos, opts) {
   const [slug, recipient] = pos;
-  if (!slug || !recipient) throw new Error("usage: share new <slug> <recipient> [--email e] [--note n] [--require-email] [--expires iso] [--limit n] [--qa] [--no-notify] [--allow-forward|--no-forward]");
+  const usage = "usage: share new <slug> <recipient> [--email e] [--note n] [--require-email] [--expires iso] [--limit n] [--qa] [--no-notify] [--allow-forward|--no-forward] [--pace auto|slide|step]";
+  if (!slug || !recipient) throw new Error(usage);
   if (opts["allow-forward"] && opts["no-forward"]) throw new Error("pick one of --allow-forward and --no-forward");
+  // The link's own pace; without it the link follows the deck's.
+  if ("pace" in opts && !ops.DECK_PACES.includes(opts.pace)) throw new Error(usage);
   const { token } = await ops.createShare(opts, {
     slug,
     recipient,
@@ -100,6 +114,7 @@ async function shareNew(pos, opts) {
     qa: opts.qa || undefined,
     notify: opts["no-notify"] ? false : undefined,
     allowForward: opts["allow-forward"] ? true : opts["no-forward"] ? false : undefined,
+    pace: opts.pace,
     expires: opts.expires,
     limit: opts.limit,
   });
@@ -123,7 +138,7 @@ async function shareList(pos, opts) {
   // Rows arrive with each link's forwards right after it; indent those.
   for (const r of rows) {
     const who = r.parentToken ? `  ↳ ${r.recipient} via ${r.forwardedBy ?? "?"}` : r.recipient;
-    console.log(`${r.enabled ? "on " : "off"}\t${r.token}\t${who}\topens:${r.opens}\tfwd:${r.allowForward ? "on" : "off"}${r.qa ? "\tQA (untracked)" : ""}${r.notify === false ? "\tmuted" : ""}${r.probablyForwarded ? "\tprobably forwarded" : ""}${r.archived ? "\t(archived)" : ""}`);
+    console.log(`${r.enabled ? "on " : "off"}\t${r.token}\t${who}\topens:${r.opens}\tfwd:${r.allowForward ? "on" : "off"}${r.pace ? `\tpace:${r.pace}` : ""}${r.qa ? "\tQA (untracked)" : ""}${r.notify === false ? "\tmuted" : ""}${r.probablyForwarded ? "\tprobably forwarded" : ""}${r.archived ? "\t(archived)" : ""}`);
   }
   if (!rows.length) console.log("(no shares)");
 }
@@ -348,7 +363,10 @@ commands:
   login [--token <pat>] [--broker <url>] [--dev]
   logout [--dev]
   whoami [--json] [--dev]
-  deck list|stats|open|rm|forward|view
+  deck list|stats|open|link|rm|forward|view
+  deck link <slug> [--json]
+                   the owner link: present or check your own deck (only you, signed in; untracked;
+                   Present or H hides your owner tools). Use it instead of a QA link. deck open opens it.
   deck forward on|off <slug>
                    whether viewers can forward the deck's links (on by default; a link's own setting wins)
   deck view <slug> [slides|scroll|default] [--toggle on|off] [--pace auto|slide|step|default] [--ai-readable on|off]
@@ -378,7 +396,7 @@ commands:
   release <slug|deck-dir> [--to "<name>" [--email <e>]]... [--qa] [--no-notify] [--title t] [--voice v] [--captions-only (--hosted)]
                    on a committed deck: check → narrate → import → share new per --to
   share new|list|on|off|forward|mute|unmute|rm|url
-    share new <slug> <recipient> [--qa] [--no-notify] [--allow-forward|--no-forward]
+    share new <slug> <recipient> [--qa] [--no-notify] [--allow-forward|--no-forward] [--pace auto|slide|step]
     share forward on|off|default <token>
                    let this link's viewer forward it as their own tracked link ("Dana via Peter",
                    one hop); default follows the deck. share off on a link also turns off its forwards.
@@ -972,9 +990,20 @@ function commandTable(pos, rest, opts) {
       console.log(opts.json ? JSON.stringify(out, null, 2) : `"${out.caption}"\n  ${out.url}`);
     },
     "deck narrator": async () => {
-      if (rest.length < 2) throw new Error("usage: deck narrator <slug> <name|id|none|default>");
+      if (rest.length < 2) throw new Error("usage: deck narrator <slug> <name|id|none|default> [--dir <deck folder>]");
       const out = await ops.setDeckNarrator(opts, rest[0], rest.slice(1).join(" "));
-      console.log(opts.json ? JSON.stringify(out, null, 2) : `OK ${out.slug} → ${out.narrator} (voice at its next narrate; face in play and the draft link now, on share links at its next release)`);
+      const log = opts.json ? (line) => console.error(line) : (line) => console.log(line);
+      log(`OK ${out.slug} → ${out.narrator} (voice at its next narrate; face in play and the draft link now, on share links at its next release)`);
+      // The local file names the face too, so the draft opened from disk shows it.
+      const { writeDraftFace } = await import("./draftFace.mjs");
+      const dir = resolve(typeof opts.dir === "string" ? opts.dir : join("decks", out.slug));
+      let local = { wrote: false };
+      try {
+        local = await writeDraftFace(opts, out.slug, join(dir, "index.html"), { log });
+      } catch (e) {
+        log(`⚠ presenter: the server was updated but index.html was not (${e.message})`);
+      }
+      if (opts.json) console.log(JSON.stringify({ ...out, indexHtml: local.wrote ? join(dir, "index.html") : null }, null, 2));
     },
     "preview setup": async () => {
       const { setupCapture } = await import("./preview-capture.mjs");
@@ -986,6 +1015,7 @@ function commandTable(pos, rest, opts) {
     "deck list": () => deckList(opts),
     "deck stats": () => deckStats(rest, opts),
     "deck open": () => deckOpen(rest, opts),
+    "deck link": () => deckLink(rest, opts),
     "deck rm": () => deckRemove(rest, opts),
     "deck forward": () => deckForward(rest, opts),
     "deck view": () => deckView(rest, opts),

package/src/draftFace.mjs

@@ -0,0 +1,56 @@
+// The narrator's face written into a draft's index.html on disk (roadmap:
+// a-narrated-draft-shows-its-narrator-s-face-from-the-file-on-), so the file
+// plays with its face however it is opened, not only through play and release.
+// deck new, deck narrator and narrate use it.
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import * as ops from "./ops.mjs";
+import { DASH_PRESENTER, withNarrator, writeNarratorFace } from "./presenter.mjs";
+
+// What to write for `slug`: { face } (null: captions only on purpose), or
+// { face: undefined, why } when the narrator has no face and nobody chose captions
+// only (writeDraftFace then takes a CLI-written face off), or the lookup failed
+// (`failed`: nothing is decided, the file stays).
+export async function draftFace(opts, slug) {
+  let found;
+  try {
+    found = await ops.presenterWithReason(opts, slug, undefined, { draft: true });
+  } catch (e) {
+    return { face: undefined, why: `could not look up the narrator's face (${e.message})`, failed: true };
+  }
+  if (found?.presenter) return { face: found.presenter, name: found.who?.face ?? null };
+  // Captions only on purpose only when the deck says so; faces off or a missing face stays unwritten.
+  if (!found?.presenter && found?.captionsOnly) return { face: null, name: null };
+  return { face: undefined, why: found?.who?.reason ?? "no narrator with a face" };
+}
+
+// Write `slug`'s face into `htmlPath`. `fallback`: the face to write when the
+// lookup fails (deck new writes D.A.S.H.). Logs one line; returns what it wrote.
+export async function writeDraftFace(opts, slug, htmlPath, { log = () => {}, fallback } = {}) {
+  if (!existsSync(htmlPath)) {
+    log(`⚠ presenter: ${htmlPath} not found, so the file was not updated (the server was); pass --dir <deck folder>`);
+    return { wrote: false };
+  }
+  const got = await draftFace(opts, slug);
+  const face = got.face === undefined && got.failed && fallback ? fallback : got.face;
+  const html = readFileSync(htmlPath, "utf8");
+  if (face === undefined) {
+    // The narrator has no face now: a face the CLI wrote for an earlier one comes off, as play and release do.
+    const off = got.failed ? html : withNarrator(html, null, { face: null });
+    if (off !== html) {
+      writeFileSync(htmlPath, off);
+      log(`⚠ presenter: no face (${got.why}); the earlier narrator's face was taken off index.html`);
+      return { wrote: true, face: null, why: got.why };
+    }
+    log(`⚠ presenter: index.html left as written: ${got.why}`);
+    return { wrote: false, why: got.why };
+  }
+  const out = writeNarratorFace(html, face);
+  if (!out.wrote) {
+    log(`⚠ presenter: index.html left as written: ${out.why}`);
+    return { wrote: false, why: out.why };
+  }
+  if (out.html !== html) writeFileSync(htmlPath, out.html);
+  const who = face === null ? "captions only" : face === DASH_PRESENTER && got.failed ? `D.A.S.H. (${got.why}; deck narrator <name> fixes it)` : got.name ?? "the narrator's face";
+  log(`  presenter: ${who}, written to index.html`);
+  return { wrote: true, face };
+}

package/src/narrate.mjs

@@ -9,6 +9,7 @@ import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { basename, join, resolve } from "node:path";
 import * as ops from "./ops.mjs";
 import { presenterLine } from "./presenter.mjs";
+import { writeDraftFace } from "./draftFace.mjs";
 export { sectionIds, setManifestUrl } from "./checkRules.mjs";
 import { sectionIds, setManifestUrl } from "./checkRules.mjs";
 
@@ -39,7 +40,8 @@ export function narrationRequest(pos, opts) {
   };
 }
 
-export async function narrate(pos, opts = {}, { log = (line) => console.log(line) } = {}) {
+// writeFace false: leave the presenter as written (release narrates, then puts the face on the upload itself).
+export async function narrate(pos, opts = {}, { log = (line) => console.log(line), writeFace = true } = {}) {
   const { deckDir, fields } = narrationRequest(pos, opts);
   if (opts["dry-run"]) {
     const preview = await ops.previewNarration(opts, fields);
@@ -85,6 +87,9 @@ export async function narrate(pos, opts = {}, { log = (line) => console.log(line
       writeFileSync(htmlPath, next);
       log(`  index.html: data-manifest → ${job.manifestUrl}`);
     }
+    // The narrator's face too, so the file opened as written shows what play and release show.
+    // The narration is paid for and saved: a failed face write warns and never fails narrate.
+    if (writeFace) await writeDraftFace(opts, fields.slug, htmlPath, { log }).catch((e) => log(`⚠ presenter: index.html not updated (${e?.message ?? e})`));
   }
   log(`✓ ${job.manifest.clips.length} clips, ${job.manifest.spokenDuration}s spoken, ${job.manifest.totalDuration}s with holds; ${job.renderedChars} characters rendered`);
   log(`  manifest: ${job.manifestUrl}\n  saved:    ${join(out, "manifest.json")}`);

package/src/ops.mjs

@@ -3,7 +3,7 @@ import { zipSync } from "fflate";
 import { SPECIES } from "./species.mjs";
 import { COLOR_KEYS, FONT_PAIRINGS, FONT_ROLES, findPairing, googleFontsUrl } from "./brand.mjs";
 import { MAX_IMPORT_FILE_BYTES, draftArgs, extractFile } from "./brandImport.mjs";
-import { api, client, linkBase, target, uploadBytes as runtimeUploadBytes } from "./runtime.mjs";
+import { api, backupLinkUrl, client, linkBase, target, uploadBytes as runtimeUploadBytes } from "./runtime.mjs";
 import {
   bytesFromText,
   isTextAsset,
@@ -21,6 +21,17 @@ export async function whoami(opts = {}) {
 }
 
 // Your own decks. `all: true` lists every deck, for admins only (support tools).
+// The owner link (/d/<slug>, app/d/[slug]): the released deck for its owner
+// only, untracked, with the owner toolbar (Present hides it for a screen
+// share). How an owner or their agent presents or checks a deck; anyone else
+// gets a sign-in notice. QA links are only for testing what a recipient sees.
+// `backupUrl`: the same link on the other app host (null in dev).
+export function ownerLink(opts, slug) {
+  if (!slug) throw new Error("slug is required");
+  const url = `${target(opts).brokerBase}/d/${encodeURIComponent(slug)}`;
+  return { slug, ownerUrl: url, backupUrl: backupLinkUrl(url) };
+}
+
 export async function listDecks(opts = {}, { all = false } = {}) {
   const rows = await (await client(opts)).query(all ? api.decks.listAll : api.decks.listForViewer, {});
   return rows.map((d) => ({
@@ -39,6 +50,9 @@ export async function listDecks(opts = {}, { all = false } = {}) {
     // false: the deck runs its own player, so view/viewToggle do not apply
     // (null: not known yet, treated as on).
     usesPlayer: d.usesPlayer ?? null,
+    // Present or check it yourself here (owner-only, untracked); not a link to
+    // send. Null with nothing released, or on someone else's deck (admins' all).
+    ownerUrl: !all && (d.html || d.htmlStorageId || d.hasHtml) ? ownerLink(opts, d.slug).ownerUrl : null,
   }));
 }
 
@@ -568,6 +582,8 @@ export async function listShares(opts, slug) {
     // viewer who forwarded it. Rows come back with each link's forwards after it.
     allowForward: !!r.allowForward,
     allowForwardOverride: r.allowForwardOverride ?? null,
+    // The link's own pace (auto, slide, step); null = it follows the deck.
+    pace: r.pace ?? null,
     parentToken: r.parentToken ?? null,
     forwardedBy: r.forwardedBy ?? null,
     probablyForwarded: !!r.probablyForwarded,
@@ -584,6 +600,11 @@ export async function createShare(opts, fields) {
   if (fields.note) args.note = fields.note;
   if (fields.requireEmail) args.requireEmail = true;
   if (fields.allowForward !== undefined) args.allowForward = !!fields.allowForward;
+  // The link's own pace; absent = it follows the deck's.
+  if (fields.pace !== undefined) {
+    if (!DECK_PACES.includes(fields.pace)) throw new Error(`pace must be auto, slide or step (got ${JSON.stringify(fields.pace)})`);
+    args.pace = fields.pace;
+  }
   if (fields.expires) {
     const t = Date.parse(fields.expires);
     if (Number.isNaN(t)) throw new Error(`expires must be an ISO date; got ${fields.expires}`);
@@ -1191,8 +1212,9 @@ export async function presenterFor(opts, slug, voice) {
 }
 
 // The same answer as presenterFor plus who presents in words: { presenter, who }.
-export async function presenterWithReason(opts, slug, voice) {
-  return (await client(opts)).query(api.avatars.presenterWithReason, { slug, ...(voice ? { voice: String(voice) } : {}) });
+// `draft`: also answer for a deck not narrated yet, from the voice its narrate would use.
+export async function presenterWithReason(opts, slug, voice, { draft = false } = {}) {
+  return (await client(opts)).query(api.avatars.presenterWithReason, { slug, ...(voice ? { voice: String(voice) } : {}), ...(draft ? { draft: true } : {}) });
 }
 
 // ---- narrators (convex/narrators.ts) ------------------------------------------

package/src/play.mjs

@@ -12,7 +12,7 @@ import { basename, join, relative } from "node:path";
 import { playerScript, sectionIds } from "./checkRules.mjs";
 import { resolveDeckDir } from "./check.mjs";
 import * as ops from "./ops.mjs";
-import { playsCaptionsOnly, presenterLine, withAvatar } from "./presenter.mjs";
+import { playsCaptionsOnly, presenterLine, withNarrator } from "./presenter.mjs";
 import { serveSource } from "./preview-capture.mjs";
 import { openBrowser } from "./runtime.mjs";
 
@@ -88,7 +88,7 @@ export async function startPlay(pos, opts = {}, { log = (line) => console.log(li
   const html = readFileSync(file, "utf8");
 
   const { presenter, who } = await lookUpPresenter(opts, { slug, path, html, log });
-  const page = presenter ? withAvatar(html, presenter) : html;
+  const page = withNarrator(html, presenter, who);
   sayWhoPresents({ html, page, presenter, who, log });
   // --voice names the voice it was narrated in, so there is nothing to compare it to.
   if (who && !opts.voice) await warnIfScriptChanged(opts, { slug, deckDir, path, html, who, log });

package/src/presenter.mjs

@@ -3,8 +3,10 @@
 // captions-only (data-presenter="none"); at release, when the owner has an
 // avatar, its player tag gets that face instead. Shared by both releases
 // (convex/deckSources.ts, release.mjs), `hyperdecks play` and the /p draft
-// preview, so all rewrite the tag the same way; only a release stores it. A tag that already names a presenter (D.A.S.H.
-// on a character-voice deck, or one set by hand) is left alone.
+// preview, so all rewrite the tag the same way; only a release stores it. A tag
+// that already names a presenter by hand is left alone. deck new, deck narrator
+// and narrate write the narrator's face into the file itself (writeNarratorFace),
+// marked, so a draft on disk shows its face and release still follows the narrator.
 
 // D.A.S.H.'s face: the head doc and still that ship with the player. A deck
 // narrated in its character voice gets this face at release, even when the
@@ -59,36 +61,98 @@ export function playsCaptionsOnly(html) {
   return !!found && !tagFace(found.tag);
 }
 
+// Who wrote the tag's face: data-presenter-from="narrator" is a face the CLI
+// (deck new, deck narrator, narrate) wrote from the deck's narrator,
+// so it follows the narrator at release and in play; "captions-only" is captions
+// only on purpose (deck new --captions-only, deck narrator none). No marker: the
+// tag is as its author wrote it, and a face there is hand-set. The player ignores it.
+export const PRESENTER_FROM = "data-presenter-from";
+const FACE_ATTRS = ["data-presenter", "data-avatar", "data-presenter-image", PRESENTER_FROM];
+const attrRe = (name) => new RegExp(`\\s${name}\\s*=\\s*(?:"[^"]*"|'[^']*'|[^\\s"'=<>\`]+)`);
+
+// The tag with its face attributes replaced by `face` (an ordered [name, value] list), in place of
+// the first one it had (else before the closing >), leaving every other attribute as written.
+function setFace(tag, face) {
+  const at = FACE_ATTRS.map((n) => attrRe(n).exec(tag)).filter(Boolean).sort((a, b) => a.index - b.index)[0];
+  let next = tag;
+  for (const n of FACE_ATTRS) next = next.replace(attrRe(n), at && attrRe(n).exec(tag)?.index === at.index ? "\u0000" : "");
+  const text = face.map(([n, v]) => ` ${n}="${attr(v)}"`).join("");
+  return next.includes("\u0000") ? next.replace("\u0000", text) : next.replace(/\s*\/?>$/, (end) => `${text}${end}`);
+}
+
+const replaceTag = (html, found, tag) => (tag === found.tag ? html : html.slice(0, found.index) + tag + html.slice(found.index + found.tag.length));
+
 // html with the player tag set to present `avatarUrl` (the /avatar/<token> doc
 // the player loads) and `imageUrl` (its still, for thumbnails and no-WebGL), or
 // html unchanged when there is no such tag, the tag already shows a face, or it
 // names a non-empty data-avatar of its own (set by hand: left alone even beside "none").
 // Anything else the player would play captions only (data-presenter none or
-// missing, head with no data-avatar, static with no still) gets the face.
+// missing, head with no data-avatar, static with no still) gets the face. A face
+// the CLI wrote from the narrator (data-presenter-from="narrator") is replaced by
+// this one, so a narrator changed since follows; captions only on purpose stays.
 export function withAvatar(html, { avatarUrl, imageUrl }) {
   const found = playerTag(html);
   if (!found) return html;
-  const { tag, index } = found;
+  const { tag } = found;
+  const from = value(tag, PRESENTER_FROM);
+  if (from === "captions-only") return html;
+  if (from === "narrator") return replaceTag(html, found, setFace(tag, narratorFace({ avatarUrl, imageUrl })));
   if (tagFace(tag) || value(tag, "data-avatar")) return html;
   const image = imageUrl && value(tag, "data-presenter-image") === null ? ` data-presenter-image="${attr(imageUrl)}"` : "";
   const face = ` data-presenter="head" data-avatar="${attr(avatarUrl)}"${image}`;
-  const named = /\sdata-presenter\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'=<>`]+)/;
+  const named = attrRe("data-presenter");
   const next = named.test(tag) ? tag.replace(named, face) : tag.replace(/\s*\/?>$/, (end) => `${face}${end}`);
-  return html.slice(0, index) + next + html.slice(index + tag.length);
+  return replaceTag(html, found, next);
+}
+
+// The page as its narrator presents it, for play, /p and both releases: the
+// resolved face put on (withAvatar), or, when the narration is on record and
+// resolves to no face (`who.face` null: narrator none, faces off, a face
+// removed), a face the CLI wrote from an earlier narrator taken off again, so
+// it never shows someone who no longer presents. A hand-set face is kept.
+export function withNarrator(html, presenter, who) {
+  if (presenter) return withAvatar(html, presenter);
+  const found = playerTag(html);
+  if (!who || who.face || !found || value(found.tag, PRESENTER_FROM) !== "narrator") return html;
+  return replaceTag(html, found, setFace(found.tag, [["data-presenter", "none"], [PRESENTER_FROM, "narrator"]]));
+}
+
+const narratorFace = ({ avatarUrl, imageUrl }) => [
+  ["data-presenter", "head"], ["data-avatar", avatarUrl], ...(imageUrl ? [["data-presenter-image", imageUrl]] : []), [PRESENTER_FROM, "narrator"],
+];
+
+// Write the narrator's face into the page as a file on disk plays it: `face`
+// ({ avatarUrl, imageUrl }) as a marked head, or null for captions only on
+// purpose. For deck new, deck narrator and narrate, so a draft opened with any
+// static server shows what play and release show. A face set by hand (a face or
+// data-avatar with no marker) is left alone. Returns { html, wrote }, and with
+// wrote false a `why`.
+export function writeNarratorFace(html, face) {
+  const found = playerTag(html);
+  if (!found) return { html, wrote: false, why: "the page has no live player tag" };
+  const { tag } = found;
+  if (!value(tag, PRESENTER_FROM) && (tagFace(tag) || value(tag, "data-avatar"))) {
+    return { html, wrote: false, why: "the player tag names a face of its own (set by hand), so it is left as written" };
+  }
+  const next = setFace(tag, face ? narratorFace(face) : [["data-presenter", "none"], [PRESENTER_FROM, "captions-only"]]);
+  return { html: replaceTag(html, found, next), wrote: true };
 }
 
 // What is wrong with the player tag's presenter as written, for check: null, or
 // { kind, presenter }. "unfilled": it asks for a face (head or static) but names
 // none, so it plays captions only until release fills it in. "kept": it has a
 // data-avatar the player ignores (data-presenter="none"), and release leaves it.
-// A plain "none" or no data-presenter is not an issue: release adds the face.
+// "captions": data-presenter none or missing, so a file opened as written (a
+// static server, the screenshot pass) plays captions only though release adds a
+// face. Captions only on purpose (data-presenter-from="captions-only") is not an issue.
 export function presenterTagIssue(html) {
   const found = playerTag(html);
   if (!found || tagFace(found.tag)) return null;
   const presenter = value(found.tag, "data-presenter");
   if (value(found.tag, "data-avatar")) return { kind: "kept", presenter };
   if (presenter === "head" || presenter === "static") return { kind: "unfilled", presenter };
-  return null;
+  if (value(found.tag, PRESENTER_FROM) === "captions-only") return null;
+  return { kind: "captions", presenter };
 }
 
 // Why a resolved face did not land on the page: withAvatar leaves a tag with
@@ -109,7 +173,7 @@ function keptOutReason(html) {
 // Both releases use it: release.mjs and convex/deckSources.ts.
 export const TAG_FACE = "the face set on the player tag";
 export function releasedPresenter(html, presenter, who, { lookupError } = {}) {
-  const page = presenter ? withAvatar(html, presenter) : html;
+  const page = withNarrator(html, presenter, who);
   const captions = (reason) => ({ page, line: `⚠ releasing captions only: ${reason}`, summary: who ? { ...who, face: null, reason } : null });
   const shown = presentedFace(page);
   if (shown) {

package/src/release.mjs

@@ -17,7 +17,7 @@ import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { zipSync } from "fflate";
 import * as ops from "./ops.mjs";
-import { releasedPresenter, withAvatar } from "./presenter.mjs";
+import { releasedPresenter, withNarrator } from "./presenter.mjs";
 import { linkBase } from "./runtime.mjs";
 import { checkDeck, deckFiles, deckFolder, deckPathResolver, resolveDeckDir } from "./check.mjs";
 import { mediaRefs, withMediaPreviews } from "./mediaPreviews.mjs";
@@ -56,15 +56,16 @@ export function deckCommit(deckDir) {
 // turn (deckFiles). `added` maps each bundled script or stylesheet to the files
 // it brought in, so release can say what came from where.
 // `presenter` (from avatars.presenterFor) puts the owner's avatar on the
-// uploaded page's player tag; the committed index.html is never changed.
+// uploaded page's player tag; the committed index.html is never changed. `who`
+// (narrate's presenter summary) takes a CLI-written face off when nobody presents now.
 // `media` (from mediaPreviewsFor) writes the blur previews onto the uploaded
 // page and adds the posters it made; like the avatar, never to the commit.
-export function releaseBundle(deckDir, presenter = null, media = null) {
+export function releaseBundle(deckDir, presenter = null, media = null, who = null) {
   const raw = readFileSync(join(deckDir, "index.html"));
-  const page = presenter ? withAvatar(raw.toString("utf8"), presenter) : raw.toString("utf8");
+  const page = withNarrator(raw.toString("utf8"), presenter, who);
   // check has already refused refs that leave the folder or do not resolve.
   const found = deckFiles(page, deckFolder(deckDir)).files.filter((f) => f.path !== "index.html");
-  const html = media ? Buffer.from(withMediaPreviews(page, media.previews).html) : presenter ? Buffer.from(page) : raw;
+  const html = media ? Buffer.from(withMediaPreviews(page, media.previews).html) : page !== raw.toString("utf8") ? Buffer.from(page) : raw;
   const made = Object.entries(media?.files ?? {});
   const added = {};
   for (const f of found) if (f.from !== "html") (added[f.from] ??= []).push(f.path);
@@ -174,7 +175,7 @@ export async function release(pos, opts = {}, io = {}) {
   const narrateOpts = { ...opts, slug };
   for (const k of ["slide", "json", "dry-run", "to", "email", "recipients"]) delete narrateOpts[k];
   if (narrateOpts.voice === undefined) delete narrateOpts.voice;
-  const job = await narrate([deckDir], narrateOpts, { log });
+  const job = await narrate([deckDir], narrateOpts, { log, writeFace: false });
   if (!job?.manifestUrl) throw new Error(`narration finished without a manifest (${job?.notice || "no manifest URL"}); fix it and release again`);
   const after = changes(deckDir);
   if (after) {
@@ -189,7 +190,7 @@ export async function release(pos, opts = {}, io = {}) {
   } catch (e) {
     lookupError = ops.errorText(e);
   }
-  const released = releaseBundle(deckDir, presenter, media);
+  const released = releaseBundle(deckDir, presenter, media, job.presenter);
   // Say who presents from the page that ships, never from the lookup alone: a
   // resolved face that did not land on the player tag must not be claimed, and
   // a failed lookup is captions only only when the tag names no face of its own.

package/src/runtime.mjs

@@ -8,7 +8,7 @@ import { fileURLToPath } from "node:url";
 import { ConvexHttpClient } from "convex/browser";
 import { makeFunctionReference } from "convex/server";
 
-export const VERSION = "0.9.9";
+export const VERSION = "0.9.10";
 const UPLOAD_TIMEOUT_MS = 125_000;
 
 // The app's home. HYPERDECKS_HOST points the prod target's broker and share

package/src/scaffold.mjs

@@ -1,21 +1,25 @@
-// hyperdecks deck new <slug> "<title>" --narrated [--layouts hero,product,…] [--presenter-style stage|bubble|glass|corner] [--dir <path>]
+// hyperdecks deck new <slug> "<title>" --narrated [--layouts hero,product,…] [--presenter-style stage|bubble|glass|corner] [--captions-only] [--dir <path>]
 //
 // Writes decks/<slug>/ (or --dir) from the packaged templates: index.html (eight
 // slides for the hosted player/v1, or one slide per --layouts entry from
 // templates/layouts/), script.md (the narration) and evidence.md (where each
 // fact comes from), then registers the deck as a draft you own so narrate can
-// render into it.
-import { existsSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+// render into it. The player tag gets the narrator's face (the account's default
+// narrator, else D.A.S.H.), so the file plays with a face however it is opened;
+// --captions-only writes data-presenter="none" on purpose instead.
+import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 import * as ops from "./ops.mjs";
 import { PRESENTER_STYLES } from "./checkRules.mjs";
 import { LAYOUTS, NARRATED_FILES, assembleLayoutDeck, fillTemplate, parseLayouts } from "./layouts.mjs";
 import { applyBrand, brandForNewDeck, brandSummary } from "./brand.mjs";
+import { writeDraftFace } from "./draftFace.mjs";
+import { DASH_PRESENTER, writeNarratorFace } from "./presenter.mjs";
 
 export { LAYOUTS, NARRATED_FILES, assembleLayoutDeck, fillTemplate, parseLayouts, readLayout } from "./layouts.mjs";
 
 const SLUG = /^[a-z0-9][a-z0-9-]{0,63}$/;
-const USAGE = 'usage: deck new <slug> "<title>" --narrated [--layouts hero,product,number,closer] [--presenter-style <stage|bubble|glass|corner>] [--no-brand] [--dir <path>]';
+const USAGE = 'usage: deck new <slug> "<title>" --narrated [--layouts hero,product,number,closer] [--presenter-style <stage|bubble|glass|corner>] [--captions-only] [--no-brand] [--dir <path>]';
 
 export async function deckNew(pos, opts = {}, { log = (line) => console.log(line), cwd = process.cwd() } = {}) {
   const [slug, title] = pos;
@@ -46,7 +50,24 @@ export async function deckNew(pos, opts = {}, { log = (line) => console.log(line
     rmSync(dir, { recursive: true, force: true });
     throw new Error(`deck ${slug} is registered but its files could not be written (${e.message}); remove the draft with \`hyperdecks deck rm ${slug}\` and run deck new again`);
   }
+  // The face goes into the file now the deck is registered (the server answers whose).
+  const htmlPath = join(/*turbopackIgnore: true*/ dir, "index.html");
+  const lines = [];
+  let presenter;
+  if (opts["captions-only"]) {
+    writeFileSync(htmlPath, writeNarratorFace(readFileSync(htmlPath, "utf8"), null).html);
+    // The server too, so release, play and /p agree the deck has no face.
+    try {
+      await ops.setDeckNarrator(opts, slug, "none");
+      lines.push("  presenter: captions only (--captions-only), written to index.html and set on the deck");
+    } catch (e) {
+      lines.push(`⚠ presenter: captions only written to index.html, but the deck could not be set to none (${e.message}): run \`hyperdecks deck narrator ${slug} none\``);
+    }
+    presenter = { face: null };
+  } else {
+    presenter = await writeDraftFace(opts, slug, htmlPath, { log: (line) => lines.push(line), fallback: DASH_PRESENTER });
+  }
   const summary = brandSummary(brand, readError);
-  log(`✓ created deck "${slug}" → ${dir}\n  files: ${Object.keys(NARRATED_FILES).join(", ")}\n  brand: ${summary.error ? `could not read it (${summary.error}); template look` : summary.applied.length ? summary.applied.join(", ") : "none applied (hyperdecks brand set)"}\n  next:  hyperdecks narrate ${dir} --dry-run`);
-  return { slug, title, dir, files: Object.keys(NARRATED_FILES), brand: summary };
+  log(`✓ created deck "${slug}" → ${dir}\n  files: ${Object.keys(NARRATED_FILES).join(", ")}\n  brand: ${summary.error ? `could not read it (${summary.error}); template look` : summary.applied.length ? summary.applied.join(", ") : "none applied (hyperdecks brand set)"}\n${lines.map((l) => (l.startsWith(" ") ? l : `  ${l}`)).join("\n")}\n  next:  hyperdecks narrate ${dir} --dry-run`);
+  return { slug, title, dir, files: Object.keys(NARRATED_FILES), brand: summary, presenter: presenter.face ?? null };
 }

package/templates/layouts/_deck.html

@@ -55,20 +55,26 @@
     --font: "Space Grotesk", system-ui, sans-serif; --mono: "Space Mono", ui-monospace, monospace;
     /* The type scale: one display size per slide at most, then title, sub (a title beside a visual), lead, body, label. */
     --t-display: 128px; --t-title: 84px; --t-sub: 56px; --t-lead: 30px; --t-body: 24px; --t-label: 17px;
+    /* The text colour on an accent ground. A brand with a dark accent sets it to its paper. */
+    --accent-ink: var(--ink);
     --hd-ground: var(--accent); --hd-ground-ink: var(--ink); /* the loading state: the first slide's colours */
     /* Soft grounds (on-tint, on-tint-2, on-tint-3): washes of the accents, so slide changes read without going loud. */
     --tint-1: color-mix(in srgb, var(--accent) 18%, var(--paper)); --tint-2: color-mix(in srgb, var(--accent-2) 20%, var(--paper)); --tint-3: color-mix(in srgb, var(--accent-3, var(--accent)) 24%, var(--paper));
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body { color: var(--ink); font-family: var(--font); font-weight: 500; -webkit-font-smoothing: antialiased; --hd-font: var(--font); --hd-mono: var(--mono); }
-  .slide { display: flex; flex-direction: column; gap: 24px; padding: 64px 72px 56px; background: var(--paper); color: var(--ink); --hd-speech: #f3c9dc; }
-  .slide.on-accent { background: var(--accent); --hd-speech: var(--card); }
+  /* The caption bubble is always a fixed light fill with dark ink, so it reads whatever the
+     brand's --card or --ink (a dark brand's card is dark). A slide can still set its own. */
+  .slide { display: flex; flex-direction: column; gap: 24px; padding: 64px 72px 56px; background: var(--paper); color: var(--ink); --hd-speech: #f3c9dc; --hd-speech-ink: #0b0b0f; }
+  .slide.on-accent { background: var(--accent); color: var(--accent-ink); --hd-speech: #ffffff; }
   .slide.on-ink { background: var(--ink); color: var(--paper); --hd-speech: #d9ccff; }
-  .slide.on-tint { background: var(--tint-1); --hd-speech: var(--card); }
-  .slide.on-tint-2 { background: var(--tint-2); --hd-speech: var(--card); }
-  .slide.on-tint-3 { background: var(--tint-3); --hd-speech: var(--card); }
+  .slide.on-tint { background: var(--tint-1); --hd-speech: #ffffff; }
+  .slide.on-tint-2 { background: var(--tint-2); --hd-speech: #ffffff; }
+  .slide.on-tint-3 { background: var(--tint-3); --hd-speech: #ffffff; }
   .kicker { font: var(--t-label) var(--mono); letter-spacing: .16em; text-transform: uppercase; }
-  .tt { font-family: var(--display, var(--font)); font-weight: 700; font-size: var(--t-title); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
+  /* Titles take the display face's weight and tracking (brand.mjs sets them for a face the
+     template was not tuned for) and never fake a weight the face lacks. */
+  .tt { font-family: var(--display, var(--font)); font-weight: var(--display-weight, 700); font-synthesis: none; font-size: var(--t-title); line-height: .95; letter-spacing: var(--display-tracking, -.045em); text-wrap: balance; }
   .lead { font-size: var(--t-lead); line-height: 1.3; max-width: 28em; text-wrap: pretty; }
   .muted { opacity: .65; }
   /* The presenter glides to each slide's slot: bottom-right by default,
@@ -98,26 +104,57 @@
       linear-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 0 0) 14% 67% / 44% 2.4% no-repeat,
       linear-gradient(var(--accent) 0 0) 50% 90% / 84% 6% no-repeat,
       var(--paper); }
-  /* Backgrounds, optional and for a few slides a deck. bg-dots on the section:
-     a dot grid in the slide's text colour, faded in from the side away from the text
-     (--dots-fade is the fade's direction: 90deg puts the dots on the right,
-     270deg on the left). A <div class="deco" aria-hidden="true"> in the slide
-     holds small inked tiles, each a <span> placed by its inline left/top (and
-     background, rotate). Both sit behind the slide's content. */
-  .slide.bg-dots, .slide:has(> .deco) { isolation: isolate; }
-  .slide.bg-dots::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(color-mix(in srgb, currentColor 24%, transparent) 3px, transparent 3.6px) 0 0 / 36px 36px; -webkit-mask-image: linear-gradient(var(--dots-fade, 90deg), transparent 40%, #000 80%); mask-image: linear-gradient(var(--dots-fade, 90deg), transparent 40%, #000 80%); }
+  /* Decorations: a <div class="deco" aria-hidden="true"> in the slide holds small
+     inked tiles, each a <span> placed by its inline left/top (and background, rotate),
+     behind the slide's content. */
+  .slide:has(> .deco) { isolation: isolate; }
   .slide > .deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
   .slide > .deco > span { position: absolute; display: grid; place-items: center; width: 80px; height: 80px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card); box-shadow: 8px 8px 0 var(--ink); color: var(--ink); font: 700 34px var(--font); }
-  /* The look kit (deck_guide topic look): one texture per deck, one icon set, real pictures.
-     Textures go on the section, behind the content, on a few slides: bg-lines, diagonal
-     speed lines fading out towards the text (--fade-at: where they are strongest, default
-     the right); bg-halftone, a corner of halftone dots (--fade-at, default top right);
-     bg-rays, rays from a point (--rays-at), for an opener or a closer. */
-  .slide:is(.bg-lines, .bg-halftone, .bg-rays) { isolation: isolate; overflow: hidden; }
-  .slide:is(.bg-lines, .bg-halftone, .bg-rays)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
-  .slide.bg-lines::before { background: repeating-linear-gradient(-22deg, transparent 0 30px, color-mix(in srgb, currentColor 10%, transparent) 30px 32px); -webkit-mask-image: radial-gradient(1000px 780px at var(--fade-at, 82% 52%), #000 12%, transparent 70%); mask-image: radial-gradient(1000px 780px at var(--fade-at, 82% 52%), #000 12%, transparent 70%); }
-  .slide.bg-halftone::before { background: radial-gradient(color-mix(in srgb, currentColor 22%, transparent) 2.6px, transparent 3px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(640px 640px at var(--fade-at, 88% 14%), #000 25%, transparent 70%); mask-image: radial-gradient(640px 640px at var(--fade-at, 88% 14%), #000 25%, transparent 70%); }
-  .slide.bg-rays::before { background: repeating-conic-gradient(from 0deg at var(--rays-at, 72% 50%), color-mix(in srgb, currentColor 9%, transparent) 0deg 2.2deg, transparent 2.2deg 9deg); -webkit-mask-image: radial-gradient(circle at var(--rays-at, 72% 50%), transparent 10%, #000 45%); mask-image: radial-gradient(circle at var(--rays-at, 72% 50%), transparent 10%, #000 45%); }
+  /* Backgrounds (deck_guide topic look). Four classes on the section, tokens only, each painted
+     behind the content (a ::before at z-index -1 in an isolated slide) and confined to the object
+     it backs, never under the text. Each carries its own per-layout rules (.l-<layout>.bg-<name>),
+     so on a layout with nothing to back it paints nothing. Plain grounds come first; one signature
+     (bg-corner or bg-mark) per deck on three slides at most; bg-pool and bg-stage only on a slide
+     with a picture. A deck may add its own in its <style> under the same contract. */
+  .slide:is(.bg-pool, .bg-corner, .bg-stage, .bg-mark) { isolation: isolate; overflow: hidden; }
+  .slide:is(.bg-pool, .bg-corner, .bg-stage, .bg-mark)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
+  /* bg-pool: one soft light of the next accent (accent-2 on paper, accent on a tint, a screened
+     accent-3 on an accent ground, accent on ink), placed per layout as the spotlight of the picture. */
+  .slide.bg-pool { --pool: color-mix(in srgb, var(--accent-2) 34%, transparent); }
+  .slide:is(.on-tint, .on-tint-2, .on-tint-3).bg-pool { --pool: color-mix(in srgb, var(--accent) 38%, transparent); }
+  .slide.on-accent.bg-pool { --pool: color-mix(in srgb, var(--accent-3, var(--accent-2)) 55%, transparent); }
+  .slide.on-accent.bg-pool::before { mix-blend-mode: screen; }
+  .slide.on-ink.bg-pool { --pool: color-mix(in srgb, var(--accent) 32%, transparent); }
+  .slide.bg-pool::before { background: radial-gradient(var(--pw, 760px) var(--ph, 600px) at var(--px, 82%) var(--py, 28%), var(--pool), transparent 70%); }
+  .l-hero.bg-pool { --px: 82%; --py: 28%; --pw: 760px; --ph: 600px; }
+  .l-split.bg-pool { --px: 73%; --py: 50%; --pw: 900px; --ph: 860px; }
+  .l-product.bg-pool { --px: 34%; --py: 50%; --pw: 1180px; --ph: 860px; }
+  .l-phones.bg-pool { --px: 68%; --py: 50%; --pw: 900px; --ph: 760px; }
+  .l-chart.bg-pool { --px: 84%; --py: 40%; --pw: 640px; --ph: 520px; }
+  .l-quote.bg-pool { --px: 10%; --py: 14%; --pw: 760px; --ph: 560px; }
+  .l-closer.bg-pool { --px: 90%; --py: 4%; --pw: 820px; --ph: 640px; }
+  /* bg-corner: a hard-edged quarter-disc of halftone, top-right, behind the stickers. A signature: cover, closer. */
+  .slide.bg-corner::before {
+    --corner-r: 580px; --corner-dot: color-mix(in srgb, currentColor var(--corner-a, 15%), transparent);
+    inset: auto; right: 0; top: 0; width: var(--corner-r); height: var(--corner-r); border-bottom-left-radius: 100%;
+    background: radial-gradient(var(--corner-dot) 2.8px, transparent 3.3px) 0 0 / 20px 20px;
+    -webkit-mask-image: radial-gradient(circle at 100% 0, #000 45%, rgba(0,0,0,.4) 100%); mask-image: radial-gradient(circle at 100% 0, #000 45%, rgba(0,0,0,.4) 100%); }
+  .l-closer.bg-corner::before { --corner-r: 460px; }
+  .on-ink.bg-corner::before { --corner-a: 22%; }
+  :is(.l-split, .l-product, .l-chart, .l-quote, .l-number, .l-features, .l-team, .l-timeline, .l-compare).bg-corner::before { content: none; }
+  /* bg-stage: a rounded dot plate exactly the picture's column plus 32px, so the frame or the phones stand on it; on the hero a tile behind the stickers. */
+  .slide.bg-stage::before { inset: auto; background: radial-gradient(color-mix(in srgb, currentColor var(--stage-a, 24%), transparent) 2.4px, transparent 2.9px) 0 0 / 22px 22px; border-radius: 40px; }
+  .l-product.bg-stage::before { position: relative; grid-area: frame; align-self: stretch; margin: var(--stage-m, -32px -24px -32px -40px); }
+  .l-phones.bg-stage::before { position: relative; grid-area: row; align-self: stretch; margin: var(--stage-m, -32px); }
+  .l-hero.bg-stage::before { right: 110px; top: 110px; width: 410px; height: 350px; }
+  :is(.l-split, .l-chart, .l-quote, .l-closer, .l-number, .l-features, .l-team, .l-timeline, .l-compare).bg-stage::before { content: none; }
+  /* bg-mark: the slide number, set as style="--mark:'04'" on the section, huge in --display, faint,
+     cropped by the top edge; right on the hero, in the indent on slot-left slides. A signature: cover, an opener, closer. */
+  .slide.bg-mark::before { content: var(--mark, ""); inset: auto; right: 24px; top: -.26em; font: var(--display-weight, 700) var(--mark-size, 560px)/1 var(--display, var(--font)); font-synthesis: none; letter-spacing: var(--display-tracking, -.05em); white-space: nowrap;
+    color: color-mix(in srgb, currentColor var(--mark-a, 8%), transparent); }
+  .slide.on-ink.bg-mark::before { --mark-a: 6%; }
+  .slide.slot-left.bg-mark::before { right: auto; left: -.08em; font-size: var(--mark-size, 440px); } /* ends inside the 500px indent, clear of the title */
+  :is(.l-split, .l-product, .l-chart, .l-phones, .l-number, .l-features, .l-team, .l-timeline, .l-compare).bg-mark::before { content: none; }
   /* Pieces. .sticker: a logo or icon tile, tilted (--tilt), ink edge, hard offset
      shadow (.sticker.photo for a face or an app icon that fills it). .ticks: a short
      list with accent-square bullets. .panel: a quiet card. .pill: a small tag. */
@@ -128,10 +165,10 @@
   .ticks { list-style: none; display: flex; flex-direction: column; gap: 14px; }
   .ticks li { position: relative; padding-left: 34px; font-size: var(--t-body); line-height: 1.3; font-weight: 600; }
   .ticks li::before { content: ""; position: absolute; left: 0; top: .4em; width: 16px; height: 16px; border-radius: 5px; background: var(--accent); }
-  .on-accent .ticks li::before { background: var(--ink); }
+  .on-accent .ticks li::before { background: var(--accent-ink); }
   .panel { padding: 24px 28px; border-radius: 22px; background: color-mix(in srgb, currentColor 6%, transparent); }
   .pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 16px; border-radius: 999px; background: var(--card); color: var(--ink); font: 700 var(--t-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--accent); }
-  .on-accent .pill { box-shadow: 4px 4px 0 var(--ink); }
+  .on-accent .pill { box-shadow: 4px 4px 0 var(--accent-ink); }
   /* A laptop for a desktop screenshot or clip: a .frame.laptop holding an img.shot or video.shot. */
   .slide .frame.laptop { position: relative; width: 860px; max-width: 100%; padding: 14px 14px 22px; border-radius: 20px 20px 6px 6px; background: #1a1a1d; box-shadow: 0 30px 70px color-mix(in srgb, var(--ink) 22%, transparent); }
   .slide .frame.laptop::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -16px; height: 16px; border-radius: 0 0 16px 16px; background: linear-gradient(#d9d9de, #a9a9b0); }
@@ -145,12 +182,12 @@
     :root.hd-no-presenter .slide { padding-bottom: 28px; }
     .slide .frame.card { width: 160px; padding: 5px; border-width: 2px; border-radius: 24px; box-shadow: 8px 8px 0 var(--shadow); }
     .slide .frame.card > .shot { border-radius: 19px; border-width: 1px; }
-    /* The text fills the card's width: the dots fade in towards the bottom, and the tiles stay off. */
-    .slide.bg-dots::before { background-size: 22px 22px; background-image: radial-gradient(color-mix(in srgb, currentColor 24%, transparent) 2px, transparent 2.5px); -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 85%); mask-image: linear-gradient(180deg, transparent 45%, #000 85%); }
+    /* The text fills the card's width, so the backgrounds keep off it: the corner fades in
+       towards the bottom, under the presenter, at a finer pitch; the stage and the mark hide;
+       the pool (a soft light) stays as it is; the tiles stay off. */
+    .slide.bg-corner::before { inset: 0; width: auto; height: auto; border-radius: 0; background-size: 14px 14px; background-image: radial-gradient(var(--corner-dot) 1.6px, transparent 2px); -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 90%); mask-image: linear-gradient(180deg, transparent 40%, #000 90%); }
+    .slide:is(.bg-stage, .bg-mark)::before { content: none; }
     .slide > .deco { display: none; }
-    /* Textures fade in towards the bottom, under the presenter, away from the text. */
-    .slide:is(.bg-lines, .bg-halftone)::before { -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 90%); mask-image: linear-gradient(180deg, transparent 40%, #000 90%); }
-    .slide.bg-halftone::before { background-size: 14px 14px; background-image: radial-gradient(color-mix(in srgb, currentColor 22%, transparent) 1.6px, transparent 2px); }
     .sticker { width: 48px; height: 48px; padding: 9px; border-width: 2px; border-radius: 13px; box-shadow: 3px 3px 0 var(--ink); }
     .ticks { gap: 6px; }
     .ticks li { padding-left: 18px; }
@@ -175,7 +212,9 @@
 
 <!-- `hyperdecks narrate decks/__SLUG__` fills data-manifest with the manifest
      URL it writes. data-presenter: head (live Minimoji, needs data-avatar),
-     static (data-presenter-image) or none (captions only). -->
+     static (data-presenter-image) or none (captions only). deck new, deck
+     narrator and narrate write the narrator's face here
+     (data-presenter-from="narrator", so release follows a later narrator). -->
 <script type="module" src="https://hyperdecks.ai/player/v1/player.js"
         data-manifest="" data-stage="1600x900" data-presenter="none" data-presenter-style="__PRESENTER_STYLE__"></script>
 </body>

package/templates/layouts/closer.html

@@ -11,7 +11,7 @@ script: That's it. [go: #__ID__-cta] Here is the one thing to do next. Thanks [g
 <style>
   .l-closer .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding-left: 500px; }
   .l-closer .tt { font-size: var(--t-display); line-height: .9; }
-  .l-closer .cta { display: inline-flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; padding: 22px 34px; border-radius: 22px; background: var(--accent); color: var(--ink); font: 700 34px var(--mono); letter-spacing: -.01em; text-decoration: none; }
+  .l-closer .cta { display: inline-flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; padding: 22px 34px; border-radius: 22px; background: var(--accent); color: var(--accent-ink); font: 700 34px var(--mono); letter-spacing: -.01em; text-decoration: none; }
   .l-closer .contact { font: var(--t-label) var(--mono); letter-spacing: .12em; text-transform: uppercase; }
   @media (max-width: 650px) {
     .l-closer .content { padding-left: 0; justify-content: flex-start; gap: 16px; }

package/templates/layouts/phones.html

@@ -1,6 +1,6 @@
 <!--
 layout: phones
-summary: A fanned row of two to four phone cards (the inner ones larger and in front, the outer ones tilted out), the point in the column beside it.
+summary: A fanned row of two to four phone cards (the inner ones larger and in front, the outer ones tilted out), the point in the column beside it. The row stands on a dot plate (bg-stage).
 use: a phone app's flow or its key screens. Each card's .shot is a placeholder check fails on: put in a phone-size screenshot (`hyperdecks screenshot <url> --width 390 --height 844`, capture_url) as <img class="shot">, or a screen recording as <video class="shot" autoplay muted loop playsinline>. Two to four cards: the row spaces and tilts them (on phones only the first three show); change one card's --tilt or --shadow on it. One phone only: use product with .frame.card.
 slot: bottom-left
 presenter: stage
@@ -18,7 +18,7 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
   .l-phones .row { grid-area: row; display: flex; justify-content: center; align-items: center; padding: 0 0 40px; }
   .l-phones .row > .frame.card { --tilt: 0deg; flex: none; width: 260px; margin: 0 -14px; }
   .l-phones .row > .frame.card:first-child { --tilt: -7deg; --shadow: var(--accent-2); translate: 0 36px; }
-  .l-phones .row > .frame.card:last-child { --tilt: 7deg; --shadow: var(--accent-3); translate: 0 36px; }
+  .l-phones .row > .frame.card:last-child { --tilt: 7deg; --shadow: var(--accent-3, var(--accent-2)); translate: 0 36px; }
   .l-phones .row > .frame.card:not(:first-child, :last-child) { width: 300px; z-index: 1; }
   .l-phones .row:has(> :nth-child(4)) > .frame.card { width: 220px; }
   .l-phones .row:has(> :nth-child(4)) > .frame.card:not(:first-child, :last-child) { width: 250px; }
@@ -31,14 +31,14 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
     .l-phones .row > .frame.card:is(:first-child, :last-child) { translate: 0 16px; }
     /* Four do not fit the phone card: the row keeps the first three, the third as its end. */
     .l-phones .row > .frame.card:nth-child(n + 4) { display: none; }
-    .l-phones .row:has(> :nth-child(4)) > .frame.card:nth-child(3) { --tilt: 7deg; --shadow: var(--accent-3); width: 108px; translate: 0 16px; }
+    .l-phones .row:has(> :nth-child(4)) > .frame.card:nth-child(3) { --tilt: 7deg; --shadow: var(--accent-3, var(--accent-2)); width: 108px; translate: 0 16px; }
   }
   /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
   @media (min-width: 651px) {
     :root.hd-no-presenter .l-phones .text { align-self: center; }
   }
 </style>
-<section class="slide l-phones slot-left bg-dots" id="__ID__" data-chapter="On a phone" data-note="Phone screens: name the app build and the date they were captured.">
+<section class="slide l-phones slot-left bg-stage" id="__ID__" data-chapter="On a phone" data-note="Phone screens: name the app build and the date they were captured.">
   <div class="text">
     <div class="kicker">On a phone</div>
     <h2 class="tt" data-title-mobile="Three taps.">Three taps, start to finish.</h2>
@@ -53,7 +53,7 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
   <div class="deco" aria-hidden="true">
     <span style="left: 52%; top: 8%; background: var(--accent); rotate: -10deg;">★</span>
     <span style="left: 92%; top: 42%; background: var(--accent-2); rotate: 12deg;">♪</span>
-    <span style="left: 48%; top: 78%; background: var(--accent-3); rotate: 8deg;">☺</span>
+    <span style="left: 48%; top: 78%; background: var(--accent-3, var(--accent-2)); rotate: 8deg;">☺</span>
   </div> -->
   <div class="narration-slot"></div>
 </section>

package/templates/layouts/split.html

@@ -1,6 +1,6 @@
 <!--
 layout: split
-summary: Image plus copy: the copy on the left (a sticker for the logo or icon, kicker, title, one line, three ticks), a real picture on the right in a phone card, on speed lines.
+summary: Image plus copy: the copy on the left (a sticker for the logo or icon, kicker, title, one line, three ticks), a real picture on the right in a phone card (the picture is the background; add bg-pool to light it).
 use: the workhorse for a product, a feature or an app: most slides of a good deck are this one. The phone's .shot is a placeholder check fails on: put in a phone screenshot (capture_url at 390×844) or a screen recording (upload_deck_asset) as <img class="shot"> or <video class="shot" autoplay muted loop playsinline>. For a desktop app, replace the card with <div class="frame laptop" id="__ID__-frame"><img class="shot" src="…" alt="…"></div>; for a 16:9 clip or photo, <img class="shot wide" src="…" alt="…" id="__ID__-frame">. Swap the sticker's icon for the product's logo (<span class="sticker photo"><img src="…" alt=""></span>) or one icon from the deck's set.
 slot: bottom-left
 presenter: stage
@@ -32,7 +32,7 @@ script: Here it is, doing the job. [look: #__ID__-frame] It starts with [go: #__
     :root.hd-no-presenter .l-split .text { align-self: center; padding-top: 0; }
   }
 </style>
-<section class="slide l-split slot-left bg-lines" id="__ID__" data-chapter="The product" data-note="Picture: name the screen or clip and the date it was captured.">
+<section class="slide l-split slot-left" id="__ID__" data-chapter="The product" data-note="Picture: name the screen or clip and the date it was captured.">
   <div class="text">
     <div class="head">
       <span class="sticker" id="__ID__-logo"><svg class="lucide-smartphone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg></span>

package/templates/narrated-deck.html

@@ -54,7 +54,7 @@
   .slide { display: flex; flex-direction: column; gap: 28px; padding: 64px 72px 56px; background: var(--paper); }
   .slide.accent { background: var(--accent); }
   .kicker { font: 18px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
-  .tt { font-family: var(--display, var(--font)); font-size: 104px; line-height: .95; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
+  .tt { font-family: var(--display, var(--font)); font-weight: var(--display-weight, 700); font-synthesis: none; font-size: 104px; line-height: .95; letter-spacing: var(--display-tracking, -.045em); margin: 0; text-wrap: balance; }
   .lead { font-size: 32px; line-height: 1.3; max-width: 30em; margin: 0; }
   .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-right: 500px; }
   /* The presenter glides to each slide's slot; slots alternate sides so the
@@ -156,6 +156,8 @@
 <!-- `hyperdecks narrate decks/__SLUG__` fills data-manifest with the manifest
      URL it writes. data-presenter: head (live Minimoji, needs
      data-avatar), static (data-presenter-image) or none (captions only).
+     deck new, deck narrator and narrate write the narrator's face here
+     (data-presenter-from="narrator", so release follows a later narrator).
      data-presenter-style: stage (large head, lower-third captions), bubble,
      glass (frosted panel) or corner (small head, subtitles). -->
 <script type="module" src="https://hyperdecks.ai/player/v1/player.js"