@hypersocial/decks-cli 0.9.6 → 0.9.8

package/README.md

@@ -64,7 +64,7 @@ share list <slug> [--json]
 share on|off <token>
 share mute|unmute <token>
 share rm <token>
-share url <token>
+share url <token> [--backup]
 
 recipient archive|unarchive <name>
 import <html-or-zip-or-url> --slug <slug> [--title title] [--status draft|live|archived]

package/package.json

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

package/skills/hyperdecks/SKILL.md

@@ -149,7 +149,7 @@ Hyperdecks server; use the CLI where you have a shell and the tool otherwise.
 | One more link | `hyperdecks share new <slug> "<name>" [--no-forward]` | `create_share` (`allowForward`) |
 | 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 | `hyperdecks deck view <slug> [slides\|scroll\|default] [--toggle on\|off]` | `set_deck_view` |
+| Slides or scroll, viewer toggle, pace | `hyperdecks deck view <slug> [slides\|scroll\|default] [--toggle on\|off] [--pace auto\|slide\|step\|default]` | `set_deck_view` |
 | 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` |
@@ -169,7 +169,15 @@ HTML says. Viewers get a slides/scroll toggle in the player, remembered per
 link, unless you turn it off (`--toggle off`, `viewToggle: false`). A viewer
 who already switched keeps their own choice while the toggle is on; turn the
 toggle off to make every viewer see the deck's view.
-`deck list --json` / `list_decks` and `deck stats` / `deck_stats` show both.
+Pace is the third: `--pace auto` (`pace: "auto"`, the default) plays itself,
+`slide` waits for Next (the Continue pill, →, a swipe) after each slide's
+narration, and `step` also stops the narration before each `[reveal]` cue,
+so a slide's reveals are the steps the viewer clicks through: group what
+belongs together at one word, so each stop is a meaningful step. Viewers can
+switch pace (and slides/scroll) in the player's Preferences, in its top bar
+(remembered per link); a video export always plays straight through. Pace
+waits apply side to side (slides) only: scroll keeps its own flow.
+`deck list --json` / `list_decks` and `deck stats` / `deck_stats` show all three.
 
 ### 1. Ground it in the user's own material
 
@@ -258,6 +266,18 @@ 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
+`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.
+
 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
 `data-presenter-style` on its `<section>` or `presenter-style: corner` under
@@ -448,11 +468,8 @@ saves one.
 
 <!-- font pairings -->
 
-**Icons: real ones first.** `hyperdecks icons search <word>` (`search_icons`)
-returns Lucide line icons as inline SVG stroked in `currentColor`, so they take
-the deck's colours: paste the `<svg>` in place of a features card's icon. Use
-`icons <subject...> --style` (`generate_icon_set`) only for illustrated icons
-in a style of your own.
+**Textures, icons, pictures:** the `look` topic (one texture, one icon set
+from `search_icons` or `generate_icon_set`, a picture on every other slide).
 
 **Pick the layout from what the slide says.** Each layout's file in
 `templates/layouts/` opens with its slot side, presenter and the cues that
@@ -463,6 +480,7 @@ suit it.
 | `hero` | the opening, a section opener; the presenter is the visual, no `.art` unless it shows the real subject (check fails while the placeholder `<div class="art">` is in: swap it for an `<img class="art">` or delete it) | stage, bottom-right; `[wave]`, `[look: h1]` |
 | `number` | one number with its source: proof, traction, a delta | stage; `[look: #<id>-figure]` as it is said |
 | `product` | a screenshot in a browser frame (`.frame.card` for a phone) with the point beside it | stage; `[look: #<id>-frame]`, `[reveal: #<id>-callout]` |
+| `split` | the workhorse: a real picture (phone, laptop, 16:9) beside sticker, title, three ticks | stage, bottom-left; `[look: #<id>-frame]`, `[go: #<id>-t1]` … `t3` |
 | `phones` | a phone app's flow: a fanned row of phone cards | stage, bottom-left; `[go: #<id>-p1]` … `p3`, `[go: slot]` |
 | `quote` | a customer or user in their own words, quoted exactly | stage, bottom-left; `[look: #<id>-quote]` |
 | `compare` | before/after, them/us, three parallel lines each | stage; `[look: #<id>-before]`, `[go: #<id>-after]` |
@@ -476,12 +494,10 @@ suit it.
 two to four: `phones` (`--tilt`, `--shadow` on a card). A few slides at most:
 `bg-dots` (never under text), a `.deco` of inked tiles.
 
-Presenter style follows the deck (step 2, *Which presenter style*): `stage`
-when the presenter carries the story, which is what the layouts are drawn for
-(they keep the slot's corner clear); `corner` on a slide where a big
-visual is the point and moves are not needed; `glass` on a dark or busy
-picture. Three layouts (`quote`, `phones`, `closer`) sit left; put a `slot-left` on others
-where there is room so slide changes move the presenter.
+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
+visual is the point; `glass` on a dark or busy picture. `quote`, `split`,
+`phones` and `closer` sit left; add `slot-left` elsewhere where there is room.
 
 **Visuals: real first, generated second.**
 
@@ -495,10 +511,12 @@ where there is room so slide changes move the presenter.
   floating shapes, abstract "tech" art, clip-art metaphors) makes a deck look
   cheap. A visual earns its place only if it shows something real from the
   story: the product, the data, a concrete situation or object. When in doubt,
-  leave it out: one big statement in type beats a picture of nothing. The
-  presenter is the hero of the opening slide; don't put art behind it.
-- Icons: only when they label something the viewer must tell apart at a
-  glance. Three short statements set large usually beat three icon cards.
+  leave it out: one big statement in type beats a picture of nothing. But a
+  deck of nothing but type is not the answer: reach for the real things
+  first (`look` topic). The presenter is the hero of the opening slide;
+  don't put generated art behind it.
+- Icons: from the deck's one set (`look` topic), labelling things or in a
+  `.sticker`; not one per sentence. Bullets are `.ticks`.
 - Images: `gen-image` (`generate_image`) only for a concrete subject the
   deck is about (a product in use, a place, a real object), never a metaphor.
   One style per deck, described the same way every time (subject, medium,
@@ -543,6 +561,75 @@ still.
 - No CSS animation on slides beyond `.reveal`; the player animates the slide
   change.
 
+<!-- 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.
+
+**1. A picture on at least every other slide**, the most real one you have:
+
+1. the product itself: `capture_url` (phone: width 390, height 844), or a
+   screen recording or photo the person gives you (`upload_deck_asset`);
+2. their people, logos and app icons (with permission);
+3. real data drawn with `render_chart`;
+4. only then `generate_image`, of a concrete subject (a place, an object,
+   the product in use), never a metaphor or abstract "tech" art.
+
+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:
+
+| 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.
+
+**3. One icon set.** Pick one source and keep it for every icon in the deck:
+Lucide (`search_icons`, same `strokeWidth` throughout); or one
+`generate_icon_set` call with every subject you need and one `preset`
+(`line`, `duotone`, `sticker`, `clay`; the palette defaults to the brand's);
+or the product's own app icons and logos. Never mix two.
+Put an icon or logo in a `.sticker` (tilted tile, hard shadow) on openers
+and product slides; use `.ticks` (accent squares) for lists, not icons.
+
+**Kit (in every layout deck's shell):** `.sticker` (`--tilt`; `.photo` for
+an app icon or a face), `.ticks`, `.panel`, `.pill`, `.frame.card` (a phone),
+`.frame.laptop` (a desktop shot). The `split` layout is image plus copy.
+
+**Image prompts.** One recipe per deck, the same every time:
+`<concrete subject>, <setting>, <medium: e.g. editorial photo, soft daylight>,
+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
+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
+one action, stickers again.
+
+**No presenter.** When nothing stands in the corner, no face (presenter
+`none`) *and* no captions (`data-silent`, or an export with captions off), or
+when a host calls `window.hyperdecks.setPresenterOff(true)`, the player puts
+`hd-no-presenter` on `<html>` and hides every `.narration-slot`. Each layout
+has a variant for that in its own `<style>` (`deck_guide layouts` says what
+each does): compare and chart widen; features, team and timeline centre
+vertically; split, product and phones centre their copy; number, quote,
+closer and a hero without art re-centre. Type sizes stay. A deck with
+captions keeps the slot (the bubble lives there). For a custom slide, keep it
+compatible: the presenter's corner is the slide's `.narration-slot`, never a
+hard-coded gutter (`padding-right: 400px`); if it needs one, override it in a
+`:root.hd-no-presenter .l-yours …` rule (check warns on a right gutter until
+you do).
+
 <!-- topic: script -->
 ### 3. Write slides and script
 

package/skills/hyperdecks/chat.md

@@ -4,7 +4,7 @@ You are building a narrated deck through the Hyperdecks connector: no terminal,
 no git, no folder. The deck's files (`index.html`, `script.md`, `evidence.md`)
 live on Hyperdecks as a draft; you read and edit them with tools, and nothing
 reaches a recipient until `release_deck`. Topics: call `deck_guide` with
-`format`, `script`, `scripts`, `design`, `layouts`, `presenter`, `transitions` or `check`
+`format`, `script`, `scripts`, `design`, `look`, `layouts`, `presenter`, `transitions` or `check`
 before the step that needs it.
 
 ## First time here?
@@ -21,7 +21,8 @@ makes the hello deck; continue from step 5 below.
 
 ## The loop
 
-1. `deck_guide` (this page), then `deck_guide { topic: "layouts" }` to pick slides.
+1. `deck_guide` (this page), then `deck_guide { topic: "layouts" }` to pick slides
+   and `deck_guide { topic: "look" }` to pick the deck's texture, icon set and pictures.
    `get_brand` for the person's saved brand: write in its designMd's voice.
    None yet? Offer to import it from what they have: `import_brand` with
    their website (`url`), a PowerPoint or PDF they attach (`file`) or one of
@@ -46,8 +47,8 @@ makes the hello deck; continue from step 5 below.
    layouts' stand-ins (hero's `<div class="art">`, product's
    `<div class="shot">`, chart's placeholder `<svg>`) fail `check_deck` until
    you swap each for an `<img>` of its real file, or delete the hero's art.
-   Icons: `search_icons { query }` returns real line icons as inline `<svg>`
-   in `currentColor`; paste one where a features card has its icon.
+   Icons: one set per deck (`look` topic): `search_icons { query }` for real
+   line icons as inline `<svg>` in `currentColor`, or one `generate_icon_set`.
    For motion, `generate_video` (poll `check_video_job`): `loop: true` for a
    clip that repeats with no jump, `transparent: true` for a moving cut-out
    over the slide. Paste the finished job's `markup` as is (a transparent
@@ -90,9 +91,11 @@ makes the hello deck; continue from step 5 below.
 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
-   one); `set_deck_view { slug, view: "scroll" | "slides" | null, viewToggle }`
-   for how the deck opens and whether viewers may switch (every link, next
-   load, no re-release); `set_share_notify` to mute a link's "opened" alerts;
+   one); `set_deck_view { slug, view: "scroll" | "slides" | null, viewToggle, pace }`
+   for how the deck opens, whether viewers may switch, and its pace (`auto`
+   plays itself, `slide` waits for Next after each slide, `step` also stops
+   before each `[reveal]`, so group a slide's reveals into meaningful steps)
+   (every link, next load, no re-release); `set_share_notify` to mute a link's "opened" alerts;
    `set_recipient_archived` to tidy the activity feed; `credits` for the
    balance. `remove_deck` deletes a deck and breaks every link to it: confirm
    with the user first.

package/src/checkRules.mjs

@@ -5,6 +5,8 @@
 // the deck's index.html and script.md as text, with the manifest and clip fetches
 // injected.
 
+import { DASH_AVATAR, presenterTagIssue } from "./presenter.mjs";
+
 export const PLAYER_V1 = "https://hyperdecks.ai/player/v1/player.js";
 // Decks released before the app moved to hyperdecks.ai load the same player
 // from the old host, which serves it forever; both pass.
@@ -58,6 +60,8 @@ export const MESSAGES = {
   selector: (line, cue, selector, id) => `script.md line ${line}: [${cue}: ${selector}] matches nothing in slide ${id}`,
   gestureColon: (line, id) => `script.md line ${line}: [gesture ${id}] needs a colon: [gesture: ${id}]`,
   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`,
   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")`,
@@ -65,6 +69,10 @@ export const MESSAGES = {
   morphPair: (id, prev) => `slide ${id}: morph needs an element with the same data-morph="<name>" on this slide and the one before it (${prev})`,
   transitionStale: (where, script, manifest) => `${where}: script.md says transition "${script}" but the manifest has "${manifest}": run \`hyperdecks narrate\` so the player gets it`,
   flyTwice: (ids) => `fly is for the deck's one big moment, but slides ${ids.join(", ")} all use it`,
+  // Warnings from the look topic (deck_guide look): the deck passes, but a person should look.
+  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)`,
   // 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.
@@ -526,6 +534,10 @@ const PLACEHOLDERS = [
     layout: "l-product", tag: "div", cls: "shot", what: "the product screenshot", img: '<img class="shot" src="…" alt="…">',
     how: { hosted: "capture the real page with capture_url", cli: "capture the real page with `hyperdecks screenshot <url>`" },
   },
+  {
+    layout: "l-split", tag: "div", cls: "shot", what: "the picture", img: '<img class="shot" src="…" alt="…"> (or <video class="shot" src="…" autoplay muted loop playsinline>)',
+    how: { hosted: "capture the app at phone size with capture_url (width 390, height 844), or upload a screen recording or photo with upload_deck_asset", cli: "capture the app at phone size with `hyperdecks screenshot <url> --width 390 --height 844`, or add a screen recording or photo with `hyperdecks asset add`" },
+  },
   {
     layout: "l-phones", tag: "div", cls: "shot", what: "each phone screen", img: '<img class="shot" src="…" alt="…"> (or <video class="shot" src="…" autoplay muted loop playsinline>) in each card',
     how: { hosted: "capture the app at phone size with capture_url (width 390, height 844), or upload a screen recording with upload_deck_asset", cli: "capture the app at phone size with `hyperdecks screenshot <url> --width 390 --height 844`, or add a screen recording with `hyperdecks asset add`" },
@@ -754,6 +766,97 @@ const isHostedAsset = (url) => {
   }
 };
 
+// The look topic as warnings. A slide shows a picture when it holds an <img>
+// (not the brand logo or an icon), <video>, <canvas>, <iframe>, a chart <svg> or an
+// inline-style url() background (not a stylesheet's: that is usually a texture); a deck of three or more slides with fewer than a third that do
+// reads as all type (the topic aims for every other slide; a plan with no
+// product to show may have fewer). Icons count as one set each: inline Lucide <svg> (by stroke width),
+// and <img> icons (class icon, or a generated icon-* asset).
+const iconImg = (tag) => /\bicon\b/.test(attr(tag, "class") ?? "") || /\/icon-[\w-]+\.(png|webp|svg)\b/i.test(attr(tag, "src") ?? "");
+export function lookWarnings(html) {
+  const all = slides(html);
+  const out = [];
+  const picture = (body) =>
+    /<(video|canvas|iframe)\b/i.test(body) ||
+    /<svg\b[^>]*class=["'][^"']*\bchart\b/i.test(body) ||
+    [...body.matchAll(/\bstyle=("[^"]*"|'[^']*')/gi)].some(([, v]) => /\burl\(/i.test(v)) ||
+    [...body.matchAll(/<img\b[^>]*>/gi)].some(([tag]) => !/\bbrand-logo\b/.test(attr(tag, "class") ?? "") && !iconImg(tag));
+  const shown = all.filter((s) => picture(uncommented(s.body)) || /\burl\(/i.test(attr(s.tag, "style") ?? "")).length;
+  if (all.length >= 3 && shown * 3 < all.length) out.push(MESSAGES.fewPictures(shown, all.length));
+  const body = uncommented(all.map((s) => s.body).join("\n"));
+  const sets = new Set();
+  for (const [tag] of body.matchAll(/<svg\b[^>]*>/gi)) {
+    if (/\blucide/.test(attr(tag, "class") ?? "")) sets.add(`Lucide at stroke-width ${attr(tag, "stroke-width") ?? "2"}`);
+  }
+  for (const [tag] of body.matchAll(/<img\b[^>]*>/gi)) {
+    if (iconImg(tag)) sets.add("image icons");
+  }
+  if (sets.size > 1) out.push(MESSAGES.mixedIcons([...sets].sort()));
+  return out;
+}
+
+// A wide right padding or margin (PRESENTER_GUTTER px or more, and wider than
+// the left: a centred column is not a gutter) is a gutter held for the
+// presenter outside its .narration-slot: without a presenter
+// (:root.hd-no-presenter) it stays empty. Read from inline styles on a slide
+// and its elements, and from the deck's <style> rules (by selector). Skipped:
+// rules in a phone media query (max-width, no min-width), in @keyframes and
+// the like, on the slot itself, the no-presenter rules, and a selector whose
+// gutter a :root.hd-no-presenter rule overrides (the variant the guide asks for).
+// One linear pass over the text: a malformed paste must not stall check.
+export const PRESENTER_GUTTER = 240;
+const sides = (prop, value) => {
+  const px = (v) => { const m = /^(\d+(?:\.\d+)?)(px|rem|em)$/i.exec(v ?? ""); return m ? Number(m[1]) * (m[2].toLowerCase() === "px" ? 1 : 16) : 0; };
+  const parts = value.trim().split(/\s+/);
+  if (/-(right|inline-end)$/i.test(prop)) return { right: px(parts[0]), left: 0 };
+  return { right: px(parts[1] ?? parts[0]), left: px(parts[3] ?? parts[1] ?? parts[0]) };
+};
+const gutters = (decls) => decls.split(";").map((d) => /^\s*((?:padding|margin)(?:-right|-inline-end)?)\s*:\s*([^!]+)/i.exec(d)).filter(Boolean)
+  .filter(([, prop, value]) => { const { right, left } = sides(prop, value); return right >= PRESENTER_GUTTER && right > left; })
+  .map(([, prop, value]) => `${prop.toLowerCase()}: ${value.trim()}`);
+// Each style rule of a stylesheet: { selector, decls, at } where `at` lists the
+// @-rule preludes around it. Comments drop out; braces nest.
+function cssRules(css) {
+  const out = [], stack = [];
+  let start = 0, i = 0;
+  let text = "";
+  while (i < css.length) {
+    if (css.startsWith("/*", i)) { const end = css.indexOf("*/", i + 2); text += css.slice(start, i); i = start = end === -1 ? css.length : end + 2; continue; }
+    const ch = css[i];
+    if (ch === "{" || ch === "}") {
+      text += css.slice(start, i);
+      if (ch === "{") stack.push(text.trim());
+      else {
+        const head = stack.pop();
+        if (head !== undefined && !head.startsWith("@")) out.push({ selector: head, decls: text, at: stack.filter((h) => h.startsWith("@")) });
+      }
+      text = "";
+      start = i + 1;
+    }
+    i++;
+  }
+  return out;
+}
+const phoneOnly = (at) => at.some((h) => /^@media\b/i.test(h) && /max-width/i.test(h) && !/min-width/i.test(h));
+const NO_PRESENTER = /^:root\.hd-no-presenter\s+/;
+export function presenterGutterWarnings(html) {
+  const out = [];
+  for (const [i, s] of slides(html).entries()) {
+    const where = `slide ${s.id || i + 1}`;
+    for (const [, value] of `${s.tag}\n${uncommented(s.body)}`.matchAll(/\sstyle\s*=\s*("[^"]*"|'[^']*')/gi)) {
+      for (const decl of gutters(value.slice(1, -1))) out.push(MESSAGES.presenterGutter(where, decl));
+    }
+  }
+  const rules = [...uncommented(html).matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)].flatMap(([, css]) => cssRules(css));
+  const overridden = new Set(rules.filter((r) => NO_PRESENTER.test(r.selector) && /(padding|margin)/i.test(r.decls)).map((r) => r.selector.replace(NO_PRESENTER, "")));
+  for (const r of rules) {
+    if (r.at.some((h) => !/^@(media|supports|layer|container)\b/i.test(h)) || phoneOnly(r.at)) continue;
+    if (NO_PRESENTER.test(r.selector) || /\.narration-slot\b/.test(r.selector) || overridden.has(r.selector)) continue;
+    for (const decl of gutters(r.decls)) out.push(MESSAGES.presenterGutter(`rule ${r.selector}`, decl));
+  }
+  return out;
+}
+
 // Every rule on the deck's text. `exists(ref)` answers whether a local reference
 // resolves (true, false or "outside"); `hosted: true` means there is no folder,
 // so every local reference is an error naming upload_deck_asset, a hotlinked
@@ -773,6 +876,7 @@ export async function checkSources({ html, script = "" }, opts = {}, { fetch: fe
   const errors = htmlErrors(html, { exists, forbid, script, hosted: !!opts.hosted, strict });
   const warnings = [];
   if (!notesRequired(html, { strict })) for (const id of slidesWithoutNotes(html)) warnings.push(MESSAGES.noteSoft(id));
+  warnings.push(...lookWarnings(html), ...presenterGutterWarnings(html));
   // Without a folder (hosted, or a caller that passes no reader) only the inline scripts are read.
   const walked = deckFiles(html, opts.hosted ? {} : { pathExists: opts.pathExists, read: opts.read, isDir: opts.isDir });
   for (const m of walked.missing) errors.push(MESSAGES.scriptRef(m.ref, m.from));
@@ -836,6 +940,9 @@ 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));
   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

@@ -1,10 +1,12 @@
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
 import { basename, join, resolve } from "node:path";
 import {
+  backupLinkUrl,
   installHyperdecksSkill,
   login,
   logout,
   openBrowser,
+  linkBase,
   parse,
   target,
   VERSION,
@@ -60,7 +62,7 @@ async function deckStats(pos, opts) {
   console.log(`  unique viewers: ${s.viewers}`);
   console.log(`  avg engaged:    ${fmtMs(s.avgMs)}`);
   console.log(`  total engaged:  ${fmtMs(s.totalMs)}`);
-  if (s.view !== undefined) console.log(`  plays as:       ${s.view ?? "as its HTML says"}${s.viewToggle === false ? " (viewer toggle off)" : ""}${s.usesPlayer === false ? " (won't apply: the deck doesn't load player/v1)" : ""}`);
+  if (s.view !== undefined) console.log(`  plays as:       ${s.view ?? "as its HTML says"}${s.viewToggle === false ? " (viewer toggle off)" : ""}${s.pace ? `, pace ${s.pace}` : ""}${s.usesPlayer === false ? " (won't apply: the deck doesn't load player/v1)" : ""}`);
   if (s.recent?.length) {
     console.log("  recent:");
     for (const r of s.recent) {
@@ -85,10 +87,6 @@ async function deckRemove(pos, opts) {
   console.log(`OK removed deck ${slug}`);
 }
 
-function shareBase(opts) {
-  return target(opts).shareBase;
-}
-
 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]");
@@ -105,9 +103,13 @@ async function shareNew(pos, opts) {
     expires: opts.expires,
     limit: opts.limit,
   });
-  const url = `${shareBase(opts)}/v/${token}`;
-  if (opts.json) console.log(JSON.stringify({ token, url }, null, 2));
-  else console.log(`OK share for "${recipient}" -> ${url}`);
+  const url = `${await linkBase(opts)}/v/${token}`;
+  const backupUrl = backupLinkUrl(url);
+  if (opts.json) console.log(JSON.stringify({ token, url, backupUrl }, null, 2));
+  else {
+    console.log(`OK share for "${recipient}" -> ${url}`);
+    if (backupUrl) console.log(`   backup link (same link, other domain, if their network blocks it): ${backupUrl}`);
+  }
 }
 
 async function shareList(pos, opts) {
@@ -156,23 +158,28 @@ async function deckForward(pos, opts) {
   console.log(`OK forwarding ${mode} for deck ${slug} (links with their own setting keep it)`);
 }
 
-const VIEW_USAGE = "usage: deck view <slug> [slides|scroll|default] [--toggle on|off]";
+const VIEW_USAGE = "usage: deck view <slug> [slides|scroll|default] [--toggle on|off] [--pace auto|slide|step|default]";
 const VIEWS = { slides: "slides", scroll: "scroll", default: null };
+const PACES = { auto: "auto", slide: "slide", step: "step", default: null };
 async function deckView(pos, opts) {
   const [slug, mode] = pos;
   const toggle = opts.toggle;
-  if (!slug || (mode === undefined && !Object.hasOwn(opts, "toggle"))) throw new Error(VIEW_USAGE);
+  const pace = opts.pace;
+  if (!slug || (mode === undefined && !Object.hasOwn(opts, "toggle") && !Object.hasOwn(opts, "pace"))) throw new Error(VIEW_USAGE);
   if (mode !== undefined && !Object.hasOwn(VIEWS, mode)) throw new Error(VIEW_USAGE);
   // A trailing --toggle with no value is a mistake, not "leave it".
   if (Object.hasOwn(opts, "toggle") && toggle !== "on" && toggle !== "off") throw new Error(VIEW_USAGE);
+  if (Object.hasOwn(opts, "pace") && !Object.hasOwn(PACES, pace)) throw new Error(VIEW_USAGE);
   const out = await ops.setDeckView(opts, slug, {
     view: mode === undefined ? undefined : VIEWS[mode],
     viewToggle: toggle === undefined ? undefined : toggle === "on",
+    pace: pace === undefined ? undefined : PACES[pace],
   });
   if (opts.json) return void console.log(JSON.stringify(out, null, 2));
   const said = [];
   if (mode !== undefined) said.push(mode === "default" ? "opens as its HTML says" : `opens as ${mode}`);
   if (toggle !== undefined) said.push(`viewer toggle ${toggle}`);
+  if (pace !== undefined) said.push(pace === "default" ? "paces as its HTML says" : `pace ${pace}`);
   if (out.applies === false) {
     console.log(`OK deck ${slug} ${said.join(", ")} (saved)`);
     console.warn(`warning: ${out.warning}`);
@@ -181,10 +188,14 @@ async function deckView(pos, opts) {
   console.log(`OK deck ${slug} ${said.join(", ")} (every link, on its next load)`);
 }
 
-function shareUrl(pos, opts) {
+async function shareUrl(pos, opts) {
   const [token] = pos;
-  if (!token) throw new Error("usage: share url <token>");
-  console.log(`${shareBase(opts)}/v/${token}`);
+  if (!token) throw new Error("usage: share url <token> [--backup]");
+  const url = `${await linkBase(opts)}/v/${token}`;
+  console.log(url);
+  // Second line: the same link on the other domain (stdout stays one URL per line).
+  const backupUrl = backupLinkUrl(url);
+  if (backupUrl && opts.backup) console.log(backupUrl);
 }
 
 async function recipientArchive(pos, opts, archived) {
@@ -336,7 +347,7 @@ commands:
   deck list|stats|open|rm|forward|view
   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]
+  deck view <slug> [slides|scroll|default] [--toggle on|off] [--pace auto|slide|step|default]
                    how the deck opens in the player (default: as its HTML says, data-view or slides) and
                    whether viewers get the slides/scroll toggle (on by default). Every link, next load; no re-release.
   deck new <slug> "<title>" --narrated [--layouts hero,product,number,closer] [--presenter-style stage|bubble|glass|corner] [--no-brand] [--dir <path>]
@@ -376,8 +387,9 @@ commands:
   engagement <recipient|token> [--deck <slug>] [--json]
                    what one recipient watched per deck: narration heard, replays, drop-off, visits
   gen-image "<prompt>" [--model gpt-image-2.5|nano-banana-2.1|gpt-image-2] [--transparent] [--image <url>] [--size <s>]
-            [--quality <q>] [--count <n>] [--seed <n>] [--slug <deck>] [--download <file>]
-                   default model gpt-image-2.5; --seed applies to nano-banana-2.1
+            [--quality <q>] [--count <n>] [--seed <n>] [--brand] [--slug <deck>] [--download <file>]
+                   default model gpt-image-2.5; --seed applies to nano-banana-2.1;
+                   --brand adds your brand's colours and "no text, no logos" to the prompt
   image-job <jobId> [--json]
   gen-video "<prompt>" [--model h3-max|kling-v3] [--image <url>] [--seconds 5] [--aspect 16:9|9:16] [--loop] [--transparent] [--slug <deck>] [--name <name>] [--download <file>]
                    a 3–10s clip via fal (default MiniMax H3 Max); --image animates that still and keeps its aspect
@@ -390,8 +402,9 @@ commands:
                    a branded SVG: { "kind": "bar|line|donut|number", "labels", "series", "values", "value", "palette" }
   icons search <word...> [--limit 8] [--stroke-width 2] [--json]
                    real icons from the Lucide library as inline SVG in currentColor (free, offline)
-  icons <subject...> --style "<style>" [--palette "#hex,#hex"] [--slug <deck>] [--name <prefix>]
-                   a style-consistent set of generated (illustrated) icons, one per subject (max 12)
+  icons <subject...> --preset line|duotone|sticker|clay | --style "<style>" [--palette "#hex,#hex"] [--slug <deck>] [--name <prefix>]
+                   a style-consistent set of generated (illustrated) icons, one per subject (max 12);
+                   palette defaults to your brand's colours
   brand [show]     your saved brand (colours, fonts, logo, design.md) that every new deck starts from
   brand set [--accent "#hex"] [--ink|--paper|--accent-2|--card "#hex"] [--fonts <pairing>]
             [--display|--body|--mono "<Google Fonts family>"] [--logo <url|file>] [--no-logo]
@@ -439,7 +452,7 @@ commands:
 
   narrate <deck-dir> [--slide <id>] [--voice <name|id>] [--slug <slug>] [--dry-run] [--json]
                    script.md → voiced clips, timelines and a manifest, rendered server-side; only changed slides re-render
-  voice list [--json]   your voices and their status
+  voice list [--json]   your voices and their status, then the built-in voices anyone can narrate with
   voice clone <file...> --name <name>
                    clone your voice from 1-3 mp3/m4a/wav recordings (30 s to 3 min in total, 10 MB each);
                    asks you to type "I consent" before anything is uploaded
@@ -477,7 +490,7 @@ async function genImage(pos, opts) {
   const prompt = pos.join(" ").trim() || opts.prompt;
   if (!prompt) {
     throw new Error(
-      'usage: gen-image "<prompt>" [--model gpt-image-2.5|nano-banana-2.1|gpt-image-2] [--image <url>] [--transparent] [--size <s>] [--quality <q>] [--count <n>] [--format png|jpeg|webp] [--seed <n>] [--slug <deck>] [--name <name>] [--download <file>]',
+      'usage: gen-image "<prompt>" [--model gpt-image-2.5|nano-banana-2.1|gpt-image-2] [--image <url>] [--transparent] [--size <s>] [--quality <q>] [--count <n>] [--format png|jpeg|webp] [--seed <n>] [--brand] [--slug <deck>] [--name <name>] [--download <file>]',
     );
   }
   let out = await ops.generateImage(opts, {
@@ -490,6 +503,7 @@ async function genImage(pos, opts) {
     format: opts.format,
     model: opts.model,
     seed: opts.seed,
+    brand: opts.brand,
     slug: opts.slug,
     name: opts.name,
   });
@@ -628,12 +642,13 @@ async function chart(pos, opts) {
 }
 
 async function icons(pos, opts) {
-  if (!pos.length || !opts.style) {
-    throw new Error('usage: icons <subject...> --style "<style>" [--palette "#hex,#hex"] [--model nano-banana-2.1|gpt-image-2.5|gpt-image-2] [--slug <deck>] [--name <prefix>]');
+  if (!pos.length || (!opts.style && !opts.preset)) {
+    throw new Error('usage: icons <subject...> --preset line|duotone|sticker|clay | --style "<style>" [--palette "#hex,#hex"] [--model nano-banana-2.1|gpt-image-2.5|gpt-image-2] [--slug <deck>] [--name <prefix>]');
   }
   const queued = await ops.generateIconSet(opts, {
     subjects: pos,
     style: opts.style,
+    preset: opts.preset,
     palette: opts.palette ? String(opts.palette).split(",").map((c) => c.trim()).filter(Boolean) : undefined,
     model: opts.model,
     slug: opts.slug,
@@ -847,10 +862,12 @@ function commandTable(pos, rest, opts) {
       if (opts.json) console.log(JSON.stringify(out, null, 2));
     },
     "voice list": async () => {
-      const voices = await ops.listVoices(opts);
+      const voices = await ops.listAllVoices(opts);
       if (opts.json) return void console.log(JSON.stringify(voices, null, 2));
-      for (const x of voices) console.log(`${x.name}\t${x.status}\t${x.handle ?? "-"}\t${x.id}${x.error ? `\t${x.error}` : ""}`);
-      if (!voices.length) console.log("(no voices; voice clone <file...> --name <name> makes one)");
+      const own = voices.filter((x) => !x.builtin);
+      for (const x of own) console.log(`${x.name}\t${x.status}\t${x.handle ?? "-"}\t${x.id}${x.error ? `\t${x.error}` : ""}`);
+      if (!own.length) console.log("(no voices of your own; voice clone <file...> --name <name> makes one)");
+      for (const x of voices.filter((x) => x.builtin)) console.log(`${x.name}\tbuilt in\t${x.description}\t${x.id}`);
     },
     "voice clone": async () => {
       const { voiceClone } = await import("./voice.mjs");

package/src/files.mjs

@@ -17,6 +17,7 @@ const FILES = {
   "templates/layouts/number.html": () => new URL("../templates/layouts/number.html", import.meta.url),
   "templates/layouts/product.html": () => new URL("../templates/layouts/product.html", import.meta.url),
   "templates/layouts/phones.html": () => new URL("../templates/layouts/phones.html", import.meta.url),
+  "templates/layouts/split.html": () => new URL("../templates/layouts/split.html", import.meta.url),
   "templates/layouts/quote.html": () => new URL("../templates/layouts/quote.html", import.meta.url),
   "templates/layouts/team.html": () => new URL("../templates/layouts/team.html", import.meta.url),
   "templates/layouts/timeline.html": () => new URL("../templates/layouts/timeline.html", import.meta.url),

package/src/guide.mjs

@@ -8,7 +8,7 @@ import { packageText } from "./files.mjs";
 import { LAYOUTS, readLayout } from "./layouts.mjs";
 import { fontPairingsMarkdown } from "./brand.mjs";
 
-export const GUIDE_TOPICS = ["workflow", "format", "script", "scripts", "design", "layouts", "presenter", "transitions", "check"];
+export const GUIDE_TOPICS = ["workflow", "format", "script", "scripts", "design", "look", "layouts", "presenter", "transitions", "check"];
 const CLI_NOTE = "_Written for the CLI. On the hosted MCP there is no folder: use the tool names in `deck_guide` (workflow), hosted URLs for every file, and write_deck_source for edits._\n\n";
 
 // One <!-- topic: name --> section of SKILL.md: its heading and body, up to the
@@ -29,7 +29,7 @@ export function skillSection(skill, topic) {
 function layoutsTopic() {
   const rows = LAYOUTS.map((name) => {
     const { meta } = readLayout(name);
-    return [`### ${name}`, meta.summary, meta.use && `Use: ${meta.use}`, meta.slot && `Slots: ${meta.slot}`, meta.cues && `Cues: ${meta.cues}`].filter(Boolean).join("\n");
+    return [`### ${name}`, meta.summary, meta.use && `Use: ${meta.use}`, meta.slot && `Slots: ${meta.slot}`, meta.nopresenter && `Without a presenter: ${meta.nopresenter}`, meta.cues && `Cues: ${meta.cues}`].filter(Boolean).join("\n");
   });
   return `# Layouts\n\nPass any of these, in order, as new_deck's \`layouts\` (repeat one for more of the same: number, number gives slides number and number-2).\n\n${rows.join("\n\n")}`;
 }