@hypersocial/decks-cli 0.9.6 → 0.9.7

package/package.json

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

package/skills/hyperdecks/SKILL.md

@@ -448,11 +448,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 +460,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 +474,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 +491,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 +541,61 @@ 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.
+
 <!-- 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

package/src/checkRules.mjs

@@ -65,6 +65,9 @@ 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)`,
+  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 +529,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 +761,35 @@ 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;
+}
+
 // 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 +809,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));
   // 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));

package/src/commands.mjs

@@ -376,8 +376,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 +391,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]
@@ -477,7 +479,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 +492,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 +631,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,

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

package/src/layouts.mjs

@@ -5,8 +5,8 @@ import { packageText } from "./files.mjs";
 
 export const NARRATED_FILES = { "index.html": "narrated-deck.html", "script.md": "script.md", "evidence.md": "evidence.md" };
 // The library, in a sensible deck order; `--layouts` takes any order and repeats.
-export const LAYOUTS = ["hero", "number", "product", "phones", "quote", "compare", "timeline", "features", "chart", "team", "closer"];
-const LAYOUT_ALIASES = { "big-number": "number", "product-shot": "product", "phone-row": "phones", comparison: "compare", "three-up": "features" };
+export const LAYOUTS = ["hero", "number", "product", "split", "phones", "quote", "compare", "timeline", "features", "chart", "team", "closer"];
+const LAYOUT_ALIASES = { "big-number": "number", "product-shot": "product", "phone-row": "phones", comparison: "compare", "three-up": "features", "image-copy": "split", "image-text": "split" };
 
 const escapeHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 

package/src/loadingBlock.mjs

@@ -49,24 +49,55 @@ const STYLE = /<style\b[^>]*\sdata-hd-loading(?=[\s>=])[^>]*>[\s\S]*?<\/style>/i
 const HEAD = /<head\b[^>]*>[\s\S]*?<\/head>/i;
 const PLAYER = /<script\b[^>]*\/player\/v\d+\/player\.js"[^>]*>/;
 const LOADING_STYLE = STYLE.exec(LOADING_BLOCK)[0];
+// The block's pieces besides its style, on any player host: the two preloads and
+// the frame flag (each kept once), and its own comment (matched only as a whole
+// comment, so a person's comments in <head> are never touched).
+const PIECES = [
+  /<link rel="modulepreload" href="[^"]*\/player\/v\d+\/player\.js">[ \t]*\n?/g,
+  /<link rel="preload" as="style" href="[^"]*\/player\/v\d+\/player\.css">[ \t]*\n?/g,
+  /<script>if \(self !== top \|\| [^<]*document\.documentElement\.dataset\.hdFrame = "";<\/script>[ \t]*\n?/g,
+  new RegExp(`${STYLE.source}[ \\t]*\\n?`, "gi"),
+];
+const BLOCK_COMMENT = /^<!-- Loading state \(keep verbatim/;
 
-// The page with its loading state put right: inserted after <title> (or at the
-// top of <head>) when <head> has none, or its <style data-hd-loading> replaced
-// when it differs from the template's. Only a page with the player script, as
-// the check asks only those. Returns { html, fixed: "inserted" | "refreshed" | null,
+// <head>'s text with each piece kept `keep` times (0: all out, 1: the first stays),
+// working outside comments only; the block's own comment counts as a piece too.
+function trimPieces(head, keep) {
+  const seen = new Array(PIECES.length + 1).fill(0);
+  return head
+    .split(/(<!--[\s\S]*?-->[ \t]*\n?)/)
+    .map((part, i) => {
+      if (i % 2) return BLOCK_COMMENT.test(part) && ++seen[PIECES.length] > keep ? "" : part;
+      return PIECES.reduce((text, re, k) => text.replace(re, (m) => (++seen[k] > keep ? "" : m)), part);
+    })
+    .join("");
+}
+
+// The page with its loading state put right. Only a page with the player script,
+// as the check asks only those. With no <style data-hd-loading> in <head>, the
+// block goes in after <title> (or at the top of <head>), any of its pieces already
+// there taken out first. With one, it becomes the template's (refreshed) and any
+// second copy of the style or a piece goes (deduped). A person's comments are left
+// alone. Returns { html, fixed: "inserted" | "refreshed" | "deduped" | null,
 // skipped? }: a player page with no <head>…</head> is left alone, with `skipped` saying why.
 export function withLoadingBlock(html) {
   const live = html.replace(/<!--[\s\S]*?-->/g, (c) => " ".repeat(c.length)); // same offsets, comments blanked
   const head = HEAD.exec(live);
   if (!PLAYER.test(live)) return { html, fixed: null };
   if (!head) return { html, fixed: null, skipped: "no <head>…</head> to put the loading state in" };
-  const style = STYLE.exec(head[0]);
-  if (style) {
-    const at = head.index + style.index;
-    if (html.slice(at, at + style[0].length) === LOADING_STYLE) return { html, fixed: null };
-    return { html: html.slice(0, at) + LOADING_STYLE + html.slice(at + style[0].length), fixed: "refreshed" };
+  const rawHead = html.slice(head.index, head.index + head[0].length);
+  const splice = (text) => html.slice(0, head.index) + text + html.slice(head.index + head[0].length);
+  if (!STYLE.test(head[0])) {
+    const cleaned = trimPieces(rawHead, 0);
+    const title = /<\/title>/i.exec(cleaned);
+    const at = title ? title.index + title[0].length : /^<head\b[^>]*>/i.exec(cleaned)[0].length;
+    return { html: splice(`${cleaned.slice(0, at)}\n${LOADING_BLOCK}${cleaned.slice(at)}`), fixed: "inserted" };
   }
-  const title = /<\/title>/i.exec(head[0]);
-  const at = head.index + (title ? title.index + title[0].length : /^<head\b[^>]*>/i.exec(head[0])[0].length);
-  return { html: `${html.slice(0, at)}\n${LOADING_BLOCK}${html.slice(at)}`, fixed: "inserted" };
+  const deduped = trimPieces(rawHead, 1);
+  // The one style left, outside comments, made the template's.
+  const blank = deduped.replace(/<!--[\s\S]*?-->/g, (c) => " ".repeat(c.length));
+  const style = STYLE.exec(blank);
+  const fresh = deduped.slice(0, style.index) + LOADING_STYLE + deduped.slice(style.index + style[0].length);
+  if (fresh === rawHead) return { html, fixed: null };
+  return { html: splice(fresh), fixed: deduped !== rawHead ? "deduped" : "refreshed" };
 }

package/src/ops.mjs

@@ -78,6 +78,7 @@ export async function generateImage(opts, fields = {}) {
   if (fields.format) args.format = String(fields.format);
   if (fields.model) args.model = String(fields.model);
   if (fields.seed != null && fields.seed !== "") args.seed = Number(fields.seed);
+  if (fields.brand) args.brand = true;
   // Returns { images } for fast requests, or { jobId, status, count } for slow ones
   // (high/auto quality, transparent, count>1). The MCP tool returns this as-is so it
   // never blocks; the CLI polls with pollImageJob to stay one-command (see commands).
@@ -179,8 +180,10 @@ export async function renderChart(opts, spec = {}) {
 export async function generateIconSet(opts, fields = {}) {
   const subjects = (fields.subjects || []).map(String).filter(Boolean);
   if (!subjects.length) throw new Error("subjects is required (one or more things to draw)");
-  if (!fields.style) throw new Error("style is required");
-  const args = { subjects, style: String(fields.style) };
+  if (!fields.style && !fields.preset) throw new Error("style or preset is required");
+  const args = { subjects };
+  if (fields.style) args.style = String(fields.style);
+  if (fields.preset) args.preset = String(fields.preset);
   if (fields.palette?.length) args.palette = fields.palette.map(String);
   if (fields.slug) args.slug = String(fields.slug);
   if (fields.name) args.name = String(fields.name);
@@ -229,7 +232,7 @@ export async function requestVideoExport(opts, fields = {}) {
   const c = await client(opts);
   try {
     const out = await c.mutation(api.videoExports.requestVideo, { slug, options });
-    return { ...out, next: `poll check_export { exportId: "${out.exportId}" } (or \`hyperdecks export status ${out.exportId}\`) every 20-30 s; a deck renders in about its own length` };
+    return { ...out, next: `poll check_export { exportId: "${out.exportId}" } (or \`hyperdecks export status ${out.exportId}\`) every 20-30 s; a 4-minute deck takes about 12 minutes` };
   } catch (e) {
     // A backend from before the render worker has no requestVideo.
     if (/Could not find public function/i.test(errorText(e))) throw new Error(videoFromCli(slug));

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.6";
+export const VERSION = "0.9.7";
 const UPLOAD_TIMEOUT_MS = 125_000;
 
 // The app's home. HYPERDECKS_HOST points the prod target's broker and share
@@ -191,7 +191,7 @@ export const api = {
   },
 };
 
-const BOOL = new Set(["prod", "dev", "admin", "json", "require-email", "qa", "no-notify", "allow-forward", "no-forward", "help", "version", "all-agents", "global", "project", "transparent", "loop", "upload", "dry-run", "narrated", "layout", "strict", "fix", "full-page", "force", "hosted", "yes", "no-voice", "no-skill", "no-release", "no-open", "save-to-minimoji", "captions-only", "no-brand", "no-logo", "pdf", "notes", "mp4", "gif", "video", "no-captions", "no-avatar", "title-card", "end-card"]);
+const BOOL = new Set(["prod", "dev", "admin", "json", "require-email", "qa", "no-notify", "allow-forward", "no-forward", "help", "version", "all-agents", "global", "project", "transparent", "loop", "upload", "dry-run", "narrated", "layout", "strict", "fix", "full-page", "force", "hosted", "yes", "no-voice", "no-skill", "no-release", "no-open", "save-to-minimoji", "captions-only", "no-brand", "brand", "no-logo", "pdf", "notes", "mp4", "gif", "video", "no-captions", "no-avatar", "title-card", "end-card"]);
 // release's recipients, in order: each --to starts one, and an --email right
 // after it belongs to it (`--to A --email a --to B`). Collected as opts.recipients;
 // opts.email stays the last --email for the other commands (share new).

package/templates/layouts/_deck.html

@@ -56,12 +56,17 @@
     /* 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;
     --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); }
   .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); }
   .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; }
   .lead { font-size: var(--t-lead); line-height: 1.3; max-width: 28em; text-wrap: pretty; }
@@ -97,6 +102,34 @@
   .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%); }
   .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%); }
+  /* 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. */
+  .sticker { --tilt: -3deg; display: inline-grid; place-items: center; flex: none; width: 96px; height: 96px; padding: 18px; border: 4px solid var(--ink); border-radius: 26px; background: var(--card); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: rotate(var(--tilt)); }
+  .sticker > :is(img, svg) { width: 100%; height: 100%; object-fit: contain; }
+  .sticker.photo { padding: 0; overflow: hidden; }
+  .sticker.photo > img { object-fit: cover; }
+  .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); }
+  .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); }
+  /* 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); }
+  .slide .frame.laptop > .shot { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; object-fit: cover; object-position: top; background: var(--paper); }
   /* Phones: the slide is the 374×736 card; the presenter is a small head in
      the corner, so keep the bottom 170px clear. */
   @media (max-width: 650px) {
@@ -108,6 +141,17 @@
     /* 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%); }
     .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; }
+    .ticks li::before { width: 9px; height: 9px; border-radius: 3px; }
+    .panel { padding: 10px 12px; border-radius: 12px; }
+    .pill { padding: 4px 10px; box-shadow: 2px 2px 0 var(--accent); }
+    .slide .frame.laptop { padding: 5px 5px 9px; border-radius: 10px 10px 3px 3px; }
+    .slide .frame.laptop::after { bottom: -7px; height: 7px; border-radius: 0 0 8px 8px; }
   }
 </style>
 <!-- LAYOUT STYLES -->

package/templates/layouts/split.html

@@ -0,0 +1,48 @@
+<!--
+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.
+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
+cues: [look: #__ID__-frame] when the narration turns to the picture; [go: #__ID__-t1], [go: #__ID__-t2], [go: #__ID__-t3] at the word that starts each tick, then [go: slot].
+script: Here it is, doing the job. [look: #__ID__-frame] It starts with [go: #__ID__-t1] the first thing. Then [go: #__ID__-t2] the second. And [go: #__ID__-t3] the third. [go: slot]
+-->
+<style>
+  .l-split { display: grid; grid-template-columns: 680px 1fr; column-gap: 64px; align-items: center; }
+  .l-split .text { align-self: start; display: flex; flex-direction: column; gap: 22px; padding-top: 24px; }
+  .l-split .head { display: flex; align-items: center; gap: 22px; }
+  .l-split .tt { font-size: var(--t-sub); line-height: 1.02; }
+  .l-split .lead { font-size: var(--t-body); }
+  .l-split .ticks { margin-top: 6px; }
+  .l-split .media { display: grid; place-items: center; height: 100%; }
+  .l-split .frame.card { width: 300px; --tilt: 4deg; }
+  .l-split .shot.wide { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; object-fit: cover; box-shadow: 14px 14px 0 var(--accent); }
+  .on-accent.l-split .shot.wide { box-shadow: 14px 14px 0 var(--ink); }
+  @media (max-width: 650px) {
+    .l-split { display: flex; flex-direction: column; align-items: stretch; }
+    .l-split .text { gap: 10px; padding-top: 0; }
+    .l-split .head { gap: 12px; }
+    .l-split .media { height: auto; }
+    .l-split .frame.card { width: 128px; }
+    .l-split .shot.wide { border-radius: 10px; box-shadow: 6px 6px 0 var(--accent); }
+  }
+</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.">
+  <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>
+      <div class="kicker">The product · Live</div>
+    </div>
+    <h2 class="tt" data-title-mobile="Here it is.">Here it is, doing the job.</h2>
+    <p class="lead">One line on what the picture shows.</p>
+    <ul class="ticks">
+      <li id="__ID__-t1">The first thing it does</li>
+      <li id="__ID__-t2">The second thing</li>
+      <li id="__ID__-t3">The third thing</li>
+    </ul>
+  </div>
+  <div class="media">
+    <div class="frame card" id="__ID__-frame"><div class="shot" role="img" aria-label="Phone screen placeholder"></div></div>
+  </div>
+  <div class="narration-slot"></div>
+</section>