@hypersocial/decks-cli 0.2.1 → 0.2.2

package/src/ops.mjs

@@ -36,7 +36,8 @@ export async function activityOverview(opts = {}) {
   return (await client(opts)).query(api.activity.overview, {});
 }
 
-// Generate an image via fal (GPT Image 2 t2i/i2i, optional BiRefNet transparency),
+// Generate an image via fal (GPT Image 2.5 by default, or Nano Banana 2.1 / GPT
+// Image 2 with `model`; t2i/i2i, optional BiRefNet transparency),
 // store it in Convex, and return the hosted URL. Runs the imagegen action as the
 // authenticated user (injected client supported via opts.client).
 export async function generateImage(opts, fields = {}) {
@@ -51,6 +52,8 @@ export async function generateImage(opts, fields = {}) {
   if (fields.quality) args.quality = String(fields.quality);
   if (fields.count != null && fields.count !== "") args.count = Number(fields.count);
   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);
   // 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).
@@ -99,8 +102,9 @@ export async function pollImageJob(opts, jobId, { intervalMs = 3000, timeoutMs =
 
 // ---- video (convex/videogen.ts) ------------------------------------------
 
-// Generate a short clip via fal (Kling v3: text→video, or image→video when an image
-// URL is given as the first frame). Always a background job: returns
+// Generate a short clip via fal (MiniMax H3 Max by default, Kling v3 with
+// model "kling-v3": text→video, or image→video when an image URL is given as the
+// first frame). Always a background job: returns
 // { jobId, status, seconds, aspect?, creditsRemaining? } without waiting, so the MCP
 // tool never blocks; the CLI polls with pollVideoJob.
 export async function generateVideo(opts, fields = {}) {
@@ -110,11 +114,99 @@ export async function generateVideo(opts, fields = {}) {
   if (img) args.imageUrl = String(img);
   if (fields.seconds != null && fields.seconds !== "") args.seconds = Number(fields.seconds);
   if (fields.aspect) args.aspect = String(fields.aspect);
+  if (fields.model) args.model = String(fields.model);
   if (fields.slug) args.slug = String(fields.slug);
   if (fields.name) args.name = String(fields.name);
   return (await client(opts)).action(api.videogen.generateVideo, args);
 }
 
+// ---- deck assets: screenshots, charts, icon sets --------------------------
+
+// Screenshot a public URL (convex/screenshots.ts) and store it as a PNG asset.
+// Returns { url, storageId, contentType, name?, width, height, creditsRemaining? }.
+export async function captureUrl(opts, fields = {}) {
+  if (!fields.url) throw new Error("url is required");
+  const args = { url: String(fields.url) };
+  if (fields.width != null && fields.width !== "") args.width = Number(fields.width);
+  if (fields.height != null && fields.height !== "") args.height = Number(fields.height);
+  if (fields.fullPage) args.fullPage = true;
+  if (fields.slug) args.slug = String(fields.slug);
+  if (fields.name) args.name = String(fields.name);
+  return (await client(opts)).action(api.screenshots.captureUrl, args);
+}
+
+const CHART_FIELDS = ["kind", "title", "subtitle", "labels", "series", "values", "value", "label", "delta", "prefix", "suffix", "palette", "width", "height", "slug", "name"];
+
+// Render a chart spec (convex/charts.ts) to a branded SVG asset. Unknown keys are
+// dropped so a spec file may carry notes of its own.
+export async function renderChart(opts, spec = {}) {
+  if (!spec.kind) throw new Error("kind is required (bar, line, donut or number)");
+  const args = {};
+  for (const k of CHART_FIELDS) if (spec[k] !== undefined && spec[k] !== null) args[k] = spec[k];
+  return (await client(opts)).action(api.charts.renderChart, args);
+}
+
+// Queue a style-consistent transparent icon set (convex/imagegen.ts
+// generateIconSet). Returns { jobId, status, count, subjects }; poll it like any
+// image job (checkImageJob / pollImageJob).
+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.palette?.length) args.palette = fields.palette.map(String);
+  if (fields.slug) args.slug = String(fields.slug);
+  if (fields.name) args.name = String(fields.name);
+  if (fields.model) args.model = String(fields.model);
+  return (await client(opts)).action(api.imagegen.generateIconSet, args);
+}
+
+// ---- share-link poster (convex/posters.ts) -------------------------------
+
+// Regenerate the deck's share-link poster (release and import already make
+// one). Returns { slug, url, unchanged }: unchanged when the poster already
+// shows the deck's current HTML, unless `force`.
+export async function generatePoster(opts, fields = {}) {
+  if (!fields.slug) throw new Error("slug is required");
+  const args = { slug: String(fields.slug) };
+  if (fields.force) args.force = true;
+  return (await client(opts)).action(api.posters.generatePoster, args);
+}
+
+// ---- deck review (convex/review.ts) --------------------------------------
+
+// Queue a GPT-6 Luna review of every slide (desktop + phone screenshots of the
+// deck's QA share). Returns { jobId, status, slides, shareToken, creditsRequired }.
+export async function reviewDeck(opts, fields = {}) {
+  if (!fields.slug) throw new Error("slug is required");
+  const args = { slug: String(fields.slug) };
+  if (fields.script) args.script = String(fields.script);
+  return (await client(opts)).action(api.review.reviewDeck, args);
+}
+
+export async function checkReviewJob(opts, jobId) {
+  if (!jobId) throw new Error("jobId is required");
+  return (await client(opts)).query(api.review.checkReviewJob, { jobId: String(jobId) });
+}
+
+// Poll a review job until it finishes; returns the job (findings and all).
+// Throws on job error or timeout.
+export async function pollReviewJob(opts, jobId, { intervalMs = 4000, timeoutMs = 1_800_000, onProgress } = {}) {
+  const c = await client(opts);
+  const start = Date.now();
+  for (;;) {
+    const job = await c.query(api.review.checkReviewJob, { jobId: String(jobId) });
+    if (job.status === "done") return job;
+    if (job.status === "error") {
+      const done = job.findings?.length ? ` (${job.progress} slides reviewed, ${job.findings.length} finding(s) so far: review-job ${jobId})` : "";
+      throw new Error(`${job.error || "review failed"}${done}`);
+    }
+    if (Date.now() - start > timeoutMs) throw new Error(`review ${jobId} is still running; check it later with: review-job ${jobId}`);
+    if (onProgress) onProgress(job);
+    await new Promise((r) => setTimeout(r, intervalMs));
+  }
+}
+
 // Read one video job's status (and the hosted MP4 once done). Shared by the MCP
 // check_video_job tool and the CLI poller.
 export async function checkVideoJob(opts, jobId) {
@@ -613,7 +705,7 @@ function designServeUrl(projectId, token, path) {
 }
 
 // Pull every local asset path a deck file references (HTML or CSS): the
-// ext-resource-dependency manifest, src/href/poster, srcset, <script>/<link>,
+// ext-resource-dependency manifest, src/href/poster/data-presenter-image, srcset, <script>/<link>,
 // and CSS url(). Mirrors the importer's rewrite surface so we fetch the same set
 // it will later rewrite. External/data/blob refs are skipped.
 function extractDesignRefs(text) {
@@ -625,7 +717,7 @@ function extractDesignRefs(text) {
     if (clean) out.add(clean);
   };
   for (const m of text.matchAll(/ext-resource-dependency"\s+content="([^"]+)"/gi)) add(m[1]);
-  for (const m of text.matchAll(/\b(?:src|href|poster)\s*=\s*["']([^"']+)["']/gi)) add(m[1]);
+  for (const m of text.matchAll(/\b(?:src|href|poster|data-presenter-image)\s*=\s*["']([^"']+)["']/gi)) add(m[1]);
   for (const m of text.matchAll(/\bsrcset\s*=\s*["']([^"']+)["']/gi)) {
     for (const part of m[1].split(",")) add(part.trim().split(/\s+/)[0]);
   }

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.1.12";
+export const VERSION = "0.2.2";
 const UPLOAD_TIMEOUT_MS = 125_000;
 
 export const PROD = {
@@ -50,6 +50,20 @@ export const api = {
   imagegen: {
     generateImage: makeFunctionReference("imagegen:generateImage"),
     checkImageJob: makeFunctionReference("imagegen:checkImageJob"),
+    generateIconSet: makeFunctionReference("imagegen:generateIconSet"),
+  },
+  screenshots: {
+    captureUrl: makeFunctionReference("screenshots:captureUrl"),
+  },
+  charts: {
+    renderChart: makeFunctionReference("charts:renderChart"),
+  },
+  posters: {
+    generatePoster: makeFunctionReference("posters:generatePoster"),
+  },
+  review: {
+    reviewDeck: makeFunctionReference("review:reviewDeck"),
+    checkReviewJob: makeFunctionReference("review:checkReviewJob"),
   },
   videogen: {
     generateVideo: makeFunctionReference("videogen:generateVideo"),
@@ -75,7 +89,7 @@ export const api = {
   },
 };
 
-const BOOL = new Set(["prod", "dev", "admin", "json", "require-email", "qa", "no-notify", "help", "version", "all-agents", "global", "project", "transparent", "upload", "dry-run", "narrated"]);
+const BOOL = new Set(["prod", "dev", "admin", "json", "require-email", "qa", "no-notify", "help", "version", "all-agents", "global", "project", "transparent", "upload", "dry-run", "narrated", "layout", "full-page", "force"]);
 // 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/src/scaffold.mjs

@@ -1,35 +1,101 @@
-// hyperdecks deck new <slug> "<title>" --narrated [--dir <path>]
+// hyperdecks deck new <slug> "<title>" --narrated [--layouts hero,product,…] [--presenter-style stage|bubble|glass|corner] [--dir <path>]
 //
 // Writes decks/<slug>/ (or --dir) from the packaged templates: index.html (eight
-// slides for the hosted player/v1), 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.
+// 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, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import * as ops from "./ops.mjs";
+import { PRESENTER_STYLES } from "./check.mjs";
 
 export const TEMPLATE_DIR = join(dirname(fileURLToPath(import.meta.url)), "..", "templates");
 export const NARRATED_FILES = { "index.html": "narrated-deck.html", "script.md": "script.md", "evidence.md": "evidence.md" };
 const SLUG = /^[a-z0-9][a-z0-9-]{0,63}$/;
+export const LAYOUT_DIR = join(TEMPLATE_DIR, "layouts");
+// The library, in a sensible deck order; `--layouts` takes any order and repeats.
+export const LAYOUTS = ["hero", "number", "product", "quote", "compare", "timeline", "features", "chart", "team", "closer"];
+const LAYOUT_ALIASES = { "big-number": "number", "product-shot": "product", comparison: "compare", "three-up": "features" };
+const USAGE = 'usage: deck new <slug> "<title>" --narrated [--layouts hero,product,number,closer] [--presenter-style <stage|bubble|glass|corner>] [--dir <path>]';
 
 const escapeHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 
 // Template text with __SLUG__ / __TITLE__ filled; HTML gets an escaped title.
-export function fillTemplate(file, { slug, title }) {
+// Without a presenter style the player tag carries none (the player's default).
+export function fillTemplate(file, { slug, title, presenterStyle }) {
   const text = readFileSync(join(TEMPLATE_DIR, file), "utf8");
   const t = /\.html$/.test(file) ? escapeHtml(title) : title;
-  return text.split("__SLUG__").join(slug).split("__TITLE__").join(t);
+  const styled = presenterStyle ? text.split("__PRESENTER_STYLE__").join(presenterStyle) : text.replace(/\s*data-presenter-style="__PRESENTER_STYLE__"/g, "");
+  return styled.split("__SLUG__").join(slug).split("__TITLE__").join(t);
+}
+
+// One layout file: a leading comment of `key: value` lines (layout, summary,
+// use, slot, presenter, cues, script), its <style> and its <section>.
+export function readLayout(name) {
+  const text = readFileSync(join(LAYOUT_DIR, `${name}.html`), "utf8");
+  const head = /^<!--([\s\S]*?)-->/.exec(text);
+  const style = /<style>[\s\S]*?<\/style>/.exec(text);
+  const section = /<section\b[\s\S]*<\/section>/.exec(text);
+  if (!head || !style || !section) throw new Error(`layout ${name}: needs a leading comment, a <style> and a <section>`);
+  const meta = {};
+  for (const line of head[1].split("\n")) {
+    const m = /^([a-z]+):\s*(.*)$/.exec(line.trim());
+    if (m) meta[m[1]] = m[2];
+  }
+  return { name, meta, style: style[0], section: section[0] };
+}
+
+export function parseLayouts(list) {
+  const names = String(list).split(",").map((n) => n.trim().toLowerCase()).filter(Boolean).map((n) => LAYOUT_ALIASES[n] ?? n);
+  const unknown = names.filter((n) => !LAYOUTS.includes(n));
+  if (unknown.length) throw new Error(`unknown layout${unknown.length > 1 ? "s" : ""} ${unknown.join(", ")}: pick from ${LAYOUTS.join(", ")}`);
+  if (!names.length) throw new Error(`--layouts needs at least one of ${LAYOUTS.join(", ")}`);
+  return names;
+}
+
+// index.html, script.md and evidence.md for a deck of `layouts`, one slide
+// each, in order. A layout used twice gets ids hero, hero-2, …; ids inside a
+// slide start with its id, so its cues stay unique.
+export function assembleLayoutDeck({ slug, title, presenterStyle, layouts }) {
+  const names = parseLayouts(layouts);
+  const used = new Map();
+  const slides = names.map((name) => {
+    const n = (used.get(name) ?? 0) + 1;
+    used.set(name, n);
+    return { layout: readLayout(name), id: n === 1 ? name : `${name}-${n}` };
+  });
+  const fill = (text, id, t) => text.split("__ID__").join(id).split("__SLUG__").join(slug).split("__TITLE__").join(t);
+  const sections = slides.map(({ layout, id }, i) => {
+    let html = fill(layout.section, id, escapeHtml(title));
+    if (i === 0 && !/\sdata-intro=/.test(html.slice(0, html.indexOf(">")))) html = html.replace("<section ", '<section data-intro="Hi! Press play." ');
+    return `<!-- layout: ${layout.name}. ${layout.meta.summary ?? ""} -->\n${html}`;
+  });
+  const styles = [...new Set(names)].map((name) => `<!-- layout: ${name} -->\n${readLayout(name).style}`);
+  const shell = fillTemplate("layouts/_deck.html", { slug, title, presenterStyle });
+  // Function replacements: a "$" in the title or a layout is text, not a replacement pattern.
+  const html = shell.replace("<!-- LAYOUT STYLES -->", () => styles.join("\n")).replace("<!-- SLIDES -->", () => sections.join("\n\n"));
+  const intro = fillTemplate("script.md", { slug, title }).split(/\n## /)[0].trimEnd();
+  const script = `${intro}\n\n${slides.map(({ layout, id }) => `## ${id}\n${fill(layout.meta.script ?? "", id, title)}`).join("\n\n")}\n`;
+  return { "index.html": html, "script.md": script, "evidence.md": fillTemplate("evidence.md", { slug, title }) };
 }
 
 export async function deckNew(pos, opts = {}, { log = (line) => console.log(line), cwd = process.cwd() } = {}) {
   const [slug, title] = pos;
-  if (!slug || !title) throw new Error('usage: deck new <slug> "<title>" --narrated [--dir <path>]');
+  if (!slug || !title) throw new Error(USAGE);
   if (!opts.narrated) throw new Error("the published CLI scaffolds narrated decks only: add --narrated");
+  const presenterStyle = opts["presenter-style"];
+  if (presenterStyle !== undefined && !PRESENTER_STYLES.includes(presenterStyle)) {
+    throw new Error(`--presenter-style must be one of ${PRESENTER_STYLES.join(", ")}`);
+  }
   if (!SLUG.test(slug)) throw new Error("slug must be lowercase letters, digits and dashes (max 64)");
   const dir = resolve(cwd, typeof opts.dir === "string" ? opts.dir : join("decks", slug));
   if (existsSync(dir)) throw new Error(`${dir} already exists; pick another slug or --dir`);
-  const files = Object.entries(NARRATED_FILES).map(([out, file]) => [out, fillTemplate(file, { slug, title })]);
+  if (opts.layouts === true) throw new Error(`--layouts needs a list, e.g. --layouts ${LAYOUTS.slice(0, 3).join(",")},closer`);
+  const files = opts.layouts !== undefined
+    ? Object.entries(assembleLayoutDeck({ slug, title, presenterStyle, layouts: opts.layouts }))
+    : Object.entries(NARRATED_FILES).map(([out, file]) => [out, fillTemplate(file, { slug, title, presenterStyle })]);
   await ops.createDeck(opts, { slug, title });
   try {
     mkdirSync(dir, { recursive: true });

package/templates/layouts/_deck.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>__TITLE__</title>
+<!-- Loading state (keep verbatim; `hyperdecks check` requires it). Until the
+     player marks body[data-hd-ready] the page shows only the slide card, at its
+     final size, in the deck's --hd-ground (its first slide's colour) on the
+     page's brand colour, with a quiet loader in --hd-ground-ink; then the
+     slides fade in. If the player never arrives, the slides show after 10 s
+     rather than never. Put data-layout="overlay" on <html> for the overlay. -->
+<link rel="modulepreload" href="https://decks.hypersocial.ai/player/v1/player.js">
+<link rel="preload" as="style" href="https://decks.hypersocial.ai/player/v1/player.css">
+<script>if (self !== top || /[?&]thumb\b/.test(location.search)) document.documentElement.dataset.hdFrame = "";</script>
+<style data-hd-loading>
+  body:not([data-hd-ready]) { overflow: hidden; background: var(--hd-frame, var(--hd-ground, var(--hd-accent, #ffda1b))); animation: hd-fail-open 0s 10s forwards; }
+  body:not([data-hd-ready]) > * { visibility: hidden; animation: hd-fail-open 0s 10s forwards; }
+  body[data-hd-ready] > * { animation: hd-in .2s ease-out; }
+  body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; transition: opacity .2s ease-out; }
+  /* The card as the player draws it (player.css, framed): 16:9, scaled to fit
+     between the 64px masthead and the 56px dock, 24px in from the sides. */
+  body::before { inset: 64px 24px 56px; margin: auto; width: min(100vw - 48px, (100dvh - 120px) * 16 / 9); height: min(100dvh - 120px, (100vw - 48px) * 9 / 16); border-radius: calc(min(100vw - 48px, (100dvh - 120px) * 16 / 9) * .01125); background: var(--hd-ground, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hd-ground-ink, #0b0b0f) 16%, transparent); }
+  body::after { left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; color: var(--hd-ground-ink, #0b0b0f); background: currentColor; box-shadow: -24px 0 currentColor, 24px 0 currentColor; opacity: 0; animation: hd-dots .7s ease-in-out .6s infinite alternate; }
+  body[data-hd-ready]::before, body[data-hd-ready]::after { opacity: 0; animation: none; }
+  /* The overlay (embedded, ?thumb, or data-layout="overlay"): the stage fills the window. */
+  :is([data-hd-frame], [data-layout="overlay"]) body::before { inset: 0; width: min(100vw, 100dvh * 16 / 9); height: min(100dvh, 100vw * 9 / 16); border-radius: calc(min(100vw, 100dvh * 16 / 9) * .01125); box-shadow: none; }
+  [data-layout="overlay"] body:not([data-hd-ready]) { background: var(--hd-backdrop, #16161c); }
+  [data-hd-frame] body:not([data-hd-ready]) { background: transparent; }
+  [data-hd-frame] body::before { border-radius: 0; }
+  /* Phones: the card fills the space between a 52px masthead and the dock, 8px in. */
+  @media (max-width: 650px) {
+    body::before { inset: 52px 8px calc(56px + env(safe-area-inset-bottom)); width: auto; height: auto; border-radius: 14px; }
+    :is([data-hd-frame], [data-layout="overlay"]) body::before { inset: 0; width: auto; height: auto; border-radius: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    body::before, body::after { transition: none; }
+    body:not([data-hd-ready])::after { animation: none; opacity: .4; }
+    body[data-hd-ready] > * { animation: none; }
+  }
+  @keyframes hd-in { from { opacity: 0; } }
+  @keyframes hd-dots { from { opacity: .15; } to { opacity: .6; } }
+  @keyframes hd-fail-open { to { visibility: visible; overflow: auto; } }
+</style>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Space+Mono:wght@400;700&display=swap">
+<style>
+  /* A narrated deck assembled from the layout library (`deck new --layouts`).
+     The hosted player (player/v1) scales the 1600×900 stage, draws the chrome
+     and the presenter, and plays the narration. Change the palette and fonts
+     here; every layout reads them. */
+  :root {
+    --ink: #0b0b0f; --paper: #fafaf7; --accent: #ffda1b; --accent-2: #27ceff; --card: #ffffff;
+    --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;
+    --hd-ground: var(--accent); --hd-ground-ink: var(--ink); /* the loading state: the first slide's colours */
+  }
+  * { 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; }
+  .kicker { font: var(--t-label) var(--mono); letter-spacing: .16em; text-transform: uppercase; }
+  .tt { 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; }
+  .muted { opacity: .65; }
+  /* The presenter glides to each slide's slot: bottom-right by default,
+     bottom-left on .slot-left, top-right on .slot-top. */
+  .narration-slot { position: absolute; right: 56px; bottom: 64px; }
+  .slot-left .narration-slot { right: auto; left: 56px; }
+  .slot-top .narration-slot { top: 96px; bottom: auto; }
+  .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
+  .reveal.is-revealed { opacity: 1; transform: none; }
+  /* 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) {
+    :root { --t-display: 54px; --t-title: 38px; --t-sub: 28px; --t-lead: 17px; --t-body: 15px; --t-label: 12px; }
+    .slide { padding: 28px 20px 170px; gap: 14px; }
+    .narration-slot { right: 12px; left: 12px; bottom: 64px; }
+  }
+</style>
+<!-- LAYOUT STYLES -->
+</head>
+<body>
+
+<!-- One <section class="slide" id> per slide, one idea each, from
+     packages/decks-cli/templates/layouts/. The id joins the slide to its
+     narration (`## <id>` in script.md); ids inside a slide start with its id
+     so the [go]/[look] cues in script.md stay unique. Every slide needs a
+     data-note (where its facts come from) and, over 28 characters, a
+     data-title-mobile on its title. -->
+<!-- SLIDES -->
+
+<!-- `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). -->
+<script type="module" src="https://decks.hypersocial.ai/player/v1/player.js"
+        data-manifest="" data-stage="1600x900" data-presenter="none" data-presenter-style="__PRESENTER_STYLE__"></script>
+</body>
+</html>

package/templates/layouts/chart.html

@@ -0,0 +1,39 @@
+<!--
+layout: chart
+summary: A chart of real numbers with its takeaway in one line; the presenter beside it.
+use: a trend or a comparison in numbers. Draw it with `hyperdecks chart` (never a generated picture of a chart) and name the data's source.
+slot: bottom-right
+presenter: stage
+cues: [look: #__ID__-chart] when the narration turns to it; [reveal: #__ID__-takeaway] at the point.
+script: Here are the numbers. [look: #__ID__-chart] The last bar is the one to see. [reveal: #__ID__-takeaway]
+-->
+<style>
+  .l-chart { display: grid; grid-template-columns: 960px 1fr; grid-template-rows: auto auto 1fr; column-gap: 56px; row-gap: 20px; }
+  .l-chart .kicker, .l-chart .tt { grid-column: 1; }
+  .l-chart .tt { font-size: var(--t-sub); line-height: 1.02; }
+  /* Swap the svg for an <img class="chart"> of your file (hyperdecks chart). */
+  .l-chart .chart { grid-column: 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: left bottom; }
+  .l-chart .chart .bar { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
+  .l-chart .chart .bar.hi { fill: var(--accent); stroke: var(--ink); stroke-width: 3; }
+  .l-chart .chart text { font: 22px var(--mono); fill: currentColor; }
+  .l-chart .chart .v { font: 700 30px var(--font); }
+  .l-chart .takeaway { grid-column: 2; grid-row: 1 / 3; align-self: start; font-size: var(--t-lead); line-height: 1.25; font-weight: 700; padding-left: 20px; border-left: 6px solid var(--accent); }
+  @media (max-width: 650px) {
+    .l-chart { display: flex; flex-direction: column; }
+    .l-chart .chart { height: 210px; flex: none; }
+    .l-chart .takeaway { padding-left: 12px; border-left-width: 4px; }
+  }
+</style>
+<section class="slide l-chart" id="__ID__" data-chapter="The numbers" data-note="Data: name the source of the numbers and the period they cover.">
+  <div class="kicker">The numbers</div>
+  <h2 class="tt" data-title-mobile="The trend.">The trend, in one line.</h2>
+  <svg class="chart" id="__ID__-chart" viewBox="0 0 960 470" role="img" aria-label="Bar chart placeholder: four periods, the last highest">
+    <line x1="0" y1="420" x2="960" y2="420" stroke="currentColor" stroke-opacity=".25" stroke-width="2"/>
+    <rect class="bar" x="20" y="300" width="180" height="120" rx="10"/><text class="v" x="110" y="285" text-anchor="middle">12</text><text x="110" y="458" text-anchor="middle">Q1</text>
+    <rect class="bar" x="260" y="250" width="180" height="170" rx="10"/><text class="v" x="350" y="235" text-anchor="middle">17</text><text x="350" y="458" text-anchor="middle">Q2</text>
+    <rect class="bar" x="500" y="190" width="180" height="230" rx="10"/><text class="v" x="590" y="175" text-anchor="middle">23</text><text x="590" y="458" text-anchor="middle">Q3</text>
+    <rect class="bar hi" x="740" y="60" width="180" height="360" rx="10"/><text class="v" x="830" y="45" text-anchor="middle">36</text><text x="830" y="458" text-anchor="middle">Q4</text>
+  </svg>
+  <p class="takeaway reveal" id="__ID__-takeaway">The takeaway, in one sentence a listener could repeat.</p>
+  <div class="narration-slot"></div>
+</section>

package/templates/layouts/closer.html

@@ -0,0 +1,28 @@
+<!--
+layout: closer
+summary: The last slide. One line, the one action to take (a command, a link) and the presenter's goodbye.
+use: the end. One call to action, never three. Label an ask that is not agreed as Proposed.
+slot: bottom-left
+presenter: stage
+cues: [go: #__ID__-cta] at the action, [go: slot] and [wave] at the goodbye.
+script: That's it. [go: #__ID__-cta] Here is the one thing to do next. Thanks [go: slot] for watching! [wave]
+-->
+<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 .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; }
+    .l-closer .cta { padding: 12px 16px; border-radius: 14px; font-size: 15px; }
+  }
+</style>
+<section class="slide on-ink l-closer slot-left" id="__ID__" data-chapter="Next" data-note="Closing slide: the link or command is the deck's own call to action.">
+  <div class="content">
+    <h2 class="tt" data-title-mobile="Thanks.">Thanks.</h2>
+    <p class="lead">One sentence on the one thing to do next.</p>
+    <a class="cta" id="__ID__-cta" href="https://example.com" target="_blank" rel="noopener">example.com →</a>
+    <div class="contact muted">your@email · your.site</div>
+  </div>
+  <div class="narration-slot"></div>
+</section>

package/templates/layouts/compare.html

@@ -0,0 +1,33 @@
+<!--
+layout: compare
+summary: Before and after (or them and us) side by side, three short lines each.
+use: the change your idea makes. Keep the rows parallel so each line has its counterpart.
+slot: bottom-right
+presenter: stage
+cues: [look: #__ID__-before] on the old way, [go: #__ID__-after] on the new; [go: slot] to come home.
+script: Today it looks like this. [look: #__ID__-before] With us, [go: #__ID__-after] it looks like this. [go: slot]
+-->
+<style>
+  .l-compare .cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; align-content: center; }
+  .l-compare .col { border-radius: 28px; padding: 32px 34px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
+  .l-compare .col.is-after { background: var(--ink); color: var(--paper); }
+  .l-compare .label { font: 700 var(--t-label) var(--mono); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; }
+  .l-compare .is-after .label { color: var(--accent); }
+  .l-compare li { list-style: none; font-size: var(--t-body); line-height: 1.3; padding: 14px 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
+  .l-compare .tt { max-width: 11em; }
+  @media (max-width: 650px) {
+    .l-compare .cols { flex: none; grid-template-columns: 1fr; gap: 10px; }
+    .l-compare .col { border-radius: 16px; padding: 12px 16px; }
+    .l-compare .label { margin-bottom: 4px; }
+    .l-compare li { padding: 5px 0; }
+  }
+</style>
+<section class="slide l-compare" id="__ID__" data-chapter="Before and after" data-note="Source: name where each side's facts come from.">
+  <div class="kicker">Before and after</div>
+  <h2 class="tt" data-title-mobile="Before, after.">What changes.</h2>
+  <div class="cols">
+    <div class="col" id="__ID__-before"><div class="label">Before</div><ul><li>The old way, step one</li><li>Where it hurts</li><li>What it costs</li></ul></div>
+    <div class="col is-after" id="__ID__-after"><div class="label">After</div><ul><li>The new way, step one</li><li>What stops hurting</li><li>What it saves</li></ul></div>
+  </div>
+  <div class="narration-slot"></div>
+</section>

package/templates/layouts/features.html

@@ -0,0 +1,35 @@
+<!--
+layout: features
+summary: Three features side by side, an icon, a name and one line each; the presenter flies under each card.
+use: what it does, the three reasons, the three parts. Fill the icons with `hyperdecks icons` in the deck's palette.
+slot: bottom-right
+presenter: stage
+cues: [go: #__ID__-f1], [go: #__ID__-f2], [go: #__ID__-f3] at the word that starts each, then [go: slot].
+script: It does three things. First, [go: #__ID__-f1] it writes. Then [go: #__ID__-f2] it speaks. Last, [go: #__ID__-f3] it sends. [go: slot]
+-->
+<style>
+  .l-features .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
+  .l-features .card { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 28px 30px; border-radius: 28px; background: var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
+  /* Swap each svg for an <img class="icon"> of your file (hyperdecks icons). */
+  .l-features .icon { width: 64px; height: 64px; object-fit: contain; color: var(--ink); }
+  .l-features .icon .fill { fill: var(--accent); }
+  .l-features b { font-size: 32px; letter-spacing: -.02em; line-height: 1.05; }
+  .l-features p { font-size: 20px; line-height: 1.3; opacity: .7; }
+  @media (max-width: 650px) {
+    .l-features .cards { grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
+    .l-features .card { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 2px; padding: 12px 14px; border-radius: 16px; }
+    .l-features .icon { width: 40px; height: 40px; grid-row: span 2; }
+    .l-features b { font-size: 18px; }
+    .l-features p { font-size: 13px; }
+  }
+</style>
+<section class="slide l-features" id="__ID__" data-chapter="What it does" data-note="Source: name the spec, docs or repo each feature is described in.">
+  <div class="kicker">What it does</div>
+  <h2 class="tt" data-title-mobile="Three things.">It does three things.</h2>
+  <ul class="cards">
+    <li class="card" id="__ID__-f1"><svg class="icon" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect class="fill" x="10" y="10" width="44" height="44" rx="12" stroke="none"/><path d="M22 42l4-12 16-16 8 8-16 16-12 4z"/></svg><b>It writes</b><p>One line on the first feature.</p></li>
+    <li class="card" id="__ID__-f2"><svg class="icon" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle class="fill" cx="32" cy="32" r="24" stroke="none"/><rect x="26" y="14" width="12" height="24" rx="6"/><path d="M18 32a14 14 0 0 0 28 0M32 46v6"/></svg><b>It speaks</b><p>One line on the second feature.</p></li>
+    <li class="card" id="__ID__-f3"><svg class="icon" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="fill" d="M10 54L32 8l22 46z" stroke="none"/><path d="M14 32l38-16-12 36-8-14z"/></svg><b>It sends</b><p>One line on the third feature.</p></li>
+  </ul>
+  <div class="narration-slot"></div>
+</section>

package/templates/layouts/hero.html

@@ -0,0 +1,35 @@
+<!--
+layout: hero
+summary: The opening. One display-size line, a visual on the right, the presenter's hello.
+use: the first slide; a section opener. Pair with a generated illustration (gen-image) in .art.
+slot: bottom-right
+presenter: stage
+cues: [wave] at the hello, [look: h1] when the narration says the title.
+script: Hi, [wave] this is __TITLE__. [look: h1] One idea, in a few minutes.
+-->
+<style>
+  .l-hero { overflow: hidden; }
+  .l-hero .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 980px; position: relative; z-index: 1; }
+  .l-hero .tt { font-size: var(--t-display); line-height: .9; }
+  /* Swap the div for an <img class="art"> of your file (gen-image, wide). */
+  .l-hero .art { position: absolute; top: 0; right: 0; width: 820px; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent, #000 32%); mask-image: linear-gradient(to right, transparent, #000 32%); }
+  .l-hero div.art { background:
+      radial-gradient(circle at 64% 36%, var(--paper) 0 168px, transparent 169px),
+      radial-gradient(circle at 64% 36%, var(--ink) 0 176px, transparent 177px),
+      radial-gradient(circle at 34% 78%, var(--accent-2) 0 92px, transparent 93px),
+      repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 2px, transparent 2px 22px); }
+  @media (max-width: 650px) {
+    .l-hero .content { justify-content: flex-start; gap: 16px; padding-top: 200px; }
+    .l-hero .art { width: 100%; height: 230px; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
+    .l-hero div.art { background-size: 180% 180%; background-position: 70% 30%; }
+  }
+</style>
+<section class="slide on-accent l-hero" id="__ID__" data-chapter="Hello" data-note="Title slide: no facts.">
+  <div class="art" role="presentation"></div>
+  <div class="content">
+    <div class="kicker">__SLUG__</div>
+    <h1 class="tt" data-title-mobile="__TITLE__">__TITLE__</h1>
+    <p class="lead">One sentence on what this deck is about.</p>
+  </div>
+  <div class="narration-slot"></div>
+</section>

package/templates/layouts/number.html

@@ -0,0 +1,29 @@
+<!--
+layout: number
+summary: One big number, what it measures and its source. The number is the slide.
+use: proof, traction, a before/after delta. Never an estimate shown as fact: the source line is required.
+slot: bottom-right
+presenter: stage
+cues: [look: #__ID__-figure] as the narration says the number; [reveal: #__ID__-source] optional.
+script: Here is the number that matters. [look: #__ID__-figure] Three times faster.
+-->
+<style>
+  .l-number .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; max-width: 980px; }
+  .l-number .figure { font-weight: 700; font-size: 300px; line-height: .82; letter-spacing: -.06em; color: var(--accent); }
+  .l-number .figure small { font-size: .45em; letter-spacing: -.02em; margin-left: 8px; }
+  .l-number .tt { font-size: var(--t-sub); line-height: 1.02; max-width: 15em; }
+  .l-number .source { font: var(--t-label)/1.4 var(--mono); }
+  @media (max-width: 650px) {
+    .l-number .content { justify-content: flex-start; gap: 12px; }
+    .l-number .figure { font-size: 120px; }
+  }
+</style>
+<section class="slide on-ink l-number" id="__ID__" data-chapter="The number" data-note="Source: name the dashboard, report or email the number comes from, with its date.">
+  <div class="content">
+    <div class="kicker">Proof</div>
+    <div class="figure" id="__ID__-figure">3<small>×</small></div>
+    <h2 class="tt" data-title-mobile="What it measures.">What the number measures, in one line.</h2>
+    <p class="source muted" id="__ID__-source">Source: the report, with its date.</p>
+  </div>
+  <div class="narration-slot"></div>
+</section>