@hypersocial/decks-cli 0.9.7 → 0.9.9

package/src/preview.mjs

@@ -1,7 +1,7 @@
 import { mkdir, readFile, writeFile, stat } from "node:fs/promises";
 import { resolve, extname } from "node:path";
 import { randomUUID } from "node:crypto";
-import { api, client, target, uploadBytes } from "./runtime.mjs";
+import { api, client, linkBase, target, uploadBytes } from "./runtime.mjs";
 
 const escapeHtml = (s) => String(s).replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 export function httpUrl(value) {
@@ -58,7 +58,7 @@ export async function createPreview(pos, opts, adapters = {}) {
     if (opts.share) {
       if (deck.status === 'archived') throw new Error('Archived deck cannot provide a sendable share preview');
       validateShare(await c.query(api.shares.listForDeck, { deckSlug: config.slug }), config.slug, opts.share);
-      shareUrl = httpUrl(`${target(opts).shareBase}/v/${opts.share}`);
+      shareUrl = httpUrl(`${await linkBase(opts)}/v/${opts.share}`);
     }
     html = deck.html;
     if (!html && deck.htmlUrl) {

package/src/release.mjs

@@ -12,13 +12,16 @@
 //      folder: script.md, evidence.md and narration/ stay private);
 //   5. creates one share per --to (paired in order with --email) and prints the URLs.
 import { execFileSync } from "node:child_process";
+import { createHash } from "node:crypto";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { zipSync } from "fflate";
 import * as ops from "./ops.mjs";
-import { withAvatar } from "./presenter.mjs";
-import { target } from "./runtime.mjs";
-import { checkDeck, deckFiles, deckFolder, resolveDeckDir } from "./check.mjs";
+import { releasedPresenter, withAvatar } from "./presenter.mjs";
+import { linkBase } from "./runtime.mjs";
+import { checkDeck, deckFiles, deckFolder, deckPathResolver, resolveDeckDir } from "./check.mjs";
+import { mediaRefs, withMediaPreviews } from "./mediaPreviews.mjs";
+import { bundledFfmpeg, HTTPS_TOO, makePreview } from "./mediaPreviewMake.mjs";
 import { narrate as runNarrate } from "./narrate.mjs";
 
 const SLUG = /^[a-z0-9][a-z0-9-]{0,63}$/;
@@ -54,19 +57,79 @@ export function deckCommit(deckDir) {
 // it brought in, so release can say what came from where.
 // `presenter` (from avatars.presenterFor) puts the owner's avatar on the
 // uploaded page's player tag; the committed index.html is never changed.
-export function releaseBundle(deckDir, presenter = null) {
+// `media` (from mediaPreviewsFor) writes the blur previews onto the uploaded
+// page and adds the posters it made; like the avatar, never to the commit.
+export function releaseBundle(deckDir, presenter = null, media = null) {
   const raw = readFileSync(join(deckDir, "index.html"));
-  const html = presenter ? Buffer.from(withAvatar(raw.toString("utf8"), presenter)) : raw;
+  const page = presenter ? withAvatar(raw.toString("utf8"), presenter) : raw.toString("utf8");
   // check has already refused refs that leave the folder or do not resolve.
-  const found = deckFiles(html.toString("utf8"), deckFolder(deckDir)).files.filter((f) => f.path !== "index.html");
+  const found = deckFiles(page, deckFolder(deckDir)).files.filter((f) => f.path !== "index.html");
+  const html = media ? Buffer.from(withMediaPreviews(page, media.previews).html) : presenter ? Buffer.from(page) : raw;
+  const made = Object.entries(media?.files ?? {});
   const added = {};
   for (const f of found) if (f.from !== "html") (added[f.from] ??= []).push(f.path);
-  if (!found.length) return { bytes: html, filename: "index.html", files: ["index.html"], added };
+  if (!found.length && !made.length) return { bytes: html, filename: "index.html", files: ["index.html"], added };
   const files = { "index.html": html };
   for (const f of found) files[f.path] = readFileSync(join(deckDir, f.path));
+  for (const [path, bytes] of made) files[path] = bytes;
   return { bytes: Buffer.from(zipSync(files)), filename: "deck.zip", htmlFile: "index.html", files: Object.keys(files), added };
 }
 
+// Blur previews (and posters for videos without one) for the media the page
+// shows: local files inside the deck folder and https URLs, read by ffmpeg.
+// Returns { previews, files, failed }: previews keyed by src as written, the
+// poster files to bundle (hd-media/<hash>.jpg), and what could not be read. A
+// preview is an extra, never a reason to stop a release.
+export async function mediaPreviewsFor(deckDir, html, { make = makePreview, ffmpeg } = {}) {
+  const { images, videos } = mediaRefs(html);
+  const previews = {}, files = {}, failed = [];
+  if (!images.length && !videos.length) return { previews, files, failed };
+  let bin = ffmpeg;
+  try {
+    bin ??= await bundledFfmpeg();
+  } catch (e) {
+    return { previews, files, failed: [...images, ...videos].map((src) => ({ src, why: `no ffmpeg (${e.message})` })) };
+  }
+  const inside = deckPathResolver(deckDir);
+  const inputOf = (src) => {
+    if (/^https:\/\//i.test(src)) return src;
+    if (/^[a-z][a-z0-9+.-]*:|^\/\//i.test(src)) return null; // http:, file:, protocol-relative: not read
+    let path;
+    try {
+      path = decodeURIComponent(src.split(/[?#]/)[0]).replace(/^\.\//, "");
+    } catch {
+      return null;
+    }
+    return inside(path) === true ? join(deckDir, path) : null;
+  };
+  const jobs = [...images.map((src) => ({ src, video: false })), ...videos.map((src) => ({ src, video: true }))];
+  const work = async ({ src, video }) => {
+    const input = inputOf(src);
+    if (!input) return failed.push({ src, why: "not a file in the deck folder or an https URL" });
+    try {
+      // A URL input may use https (the user's own machine reads it); a file stays local-only.
+      const p = await make(bin, input, { video, ...(input === src ? { allow: HTTPS_TOO } : {}) });
+      if (p.poster) {
+        const path = `hd-media/${createHash("sha256").update(src).digest("hex").slice(0, 16)}.jpg`;
+        files[path] = p.poster;
+        p.poster = path;
+      }
+      previews[src] = p;
+    } catch (e) {
+      failed.push({ src, why: e.message });
+    }
+  };
+  // A few at a time: each is an ffmpeg process.
+  for (let i = 0; i < jobs.length; i += 4) await Promise.all(jobs.slice(i, i + 4).map(work));
+  return { previews, files, failed };
+}
+
+function logPreviews(log, media) {
+  const n = Object.keys(media.previews).length;
+  if (n) log(`✓ blur previews for ${n} image(s)/video(s)${Object.keys(media.files).length ? `, ${Object.keys(media.files).length} poster(s) made` : ""}`);
+  for (const f of media.failed) log(`  ⚠ no blur preview for ${f.src}: ${f.why}`);
+}
+
 // From the CLI, parse() collects opts.recipients in order (each --email follows
 // its --to); MCP passes the same shape.
 export function recipients(opts) {
@@ -77,7 +140,7 @@ export function recipients(opts) {
 }
 
 export async function release(pos, opts = {}, io = {}) {
-  const { log = (line) => console.log(line), changes = deckChanges, untracked = untrackedFiles, commit = deckCommit, narrate = runNarrate, fetch, cwd, measure, measureFit } = io;
+  const { log = (line) => console.log(line), changes = deckChanges, untracked = untrackedFiles, commit = deckCommit, narrate = runNarrate, previews = mediaPreviewsFor, fetch, cwd, measure, measureFit } = io;
   const deckDir = resolveDeckDir(pos[0], cwd);
   const to = recipients(opts);
 
@@ -97,7 +160,15 @@ export async function release(pos, opts = {}, io = {}) {
   for (const w of checked.warnings) log(`  ⚠ ${w}`);
   for (const [from, paths] of Object.entries(bundle.added)) log(`  +${paths.length} file(s) referenced from ${from}: ${paths.join(", ")}`);
 
-  if (checked.silent) return publish({ opts, io: { log, commit }, deckDir, slug, to, checked, bundle, released: bundle, summary: null });
+  let media;
+  try {
+    media = await previews(deckDir, readFileSync(join(deckDir, "index.html"), "utf8"));
+    logPreviews(log, media);
+  } catch (e) {
+    media = null; // a preview is an extra: the release goes on without them
+    log(`  ⚠ no blur previews: ${e.message}`);
+  }
+  if (checked.silent) return publish({ opts, io: { log, commit }, deckDir, slug, to, checked, bundle, released: releaseBundle(deckDir, null, media), summary: null });
   // Cached slides cost nothing, so this only renders what changed since the commit.
   // Only the options narrate understands: an undefined --slide/--voice key would fail its flag check.
   const narrateOpts = { ...opts, slug };
@@ -112,16 +183,20 @@ export async function release(pos, opts = {}, io = {}) {
   }
   // The released page gets the narrator's face: your avatar, or D.A.S.H.'s for its voice.
   let presenter = null;
+  let lookupError;
   try {
     presenter = await ops.presenterFor(opts, slug, opts.voice);
   } catch (e) {
-    log(`⚠ could not look up your avatar (${ops.errorText(e)}); releasing captions only`);
+    lookupError = ops.errorText(e);
   }
-  const released = presenter ? releaseBundle(deckDir, presenter) : bundle;
-  if (presenter) log(`✓ presented by ${job.presenter?.face ?? "your avatar"}`);
+  const released = releaseBundle(deckDir, presenter, media);
+  // Say who presents from the page that ships, never from the lookup alone: a
+  // resolved face that did not land on the player tag must not be claimed, and
+  // a failed lookup is captions only only when the tag names no face of its own.
+  const said = releasedPresenter(readFileSync(join(deckDir, "index.html"), "utf8"), presenter, job.presenter, { lookupError });
   // A terminal user sees this before it ships, so the CLI warns rather than refuses.
-  else if (job.presenter && !job.presenter.face) log(`⚠ releasing captions only: ${job.presenter.reason ?? "no face"}`);
-  return publish({ opts, io: { log, commit }, deckDir, slug, to, checked, bundle, released, summary: job.presenter ?? null });
+  if (said.line) log(said.line);
+  return publish({ opts, io: { log, commit }, deckDir, slug, to, checked, bundle, released, summary: said.summary });
 }
 
 // Import the checked bundle and make the links: the end of every release.
@@ -137,7 +212,7 @@ async function publish({ opts, io: { log, commit }, deckDir, slug, to, checked,
   const sha = commit(deckDir);
   log(`✓ imported "${imported.title}" as ${imported.slug} (${bundle.files.length} file(s), commit ${sha})\n  deck: ${imported.deckUrl}`);
 
-  const base = target(opts).shareBase;
+  const base = await linkBase(opts);
   const shares = [];
   for (const r of to) {
     let token;

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.7";
+export const VERSION = "0.9.9";
 const UPLOAD_TIMEOUT_MS = 125_000;
 
 // The app's home. HYPERDECKS_HOST points the prod target's broker and share
@@ -117,7 +117,9 @@ export const api = {
   },
   decks: {
     get: makeFunctionReference("decks:get"),
+    slugTaken: makeFunctionReference("decks:slugTaken"),
     listForViewer: makeFunctionReference("decks:listForViewer"),
+    listAll: makeFunctionReference("decks:listAll"),
     remove: makeFunctionReference("decks:remove"),
     setAllowForward: makeFunctionReference("decks:setAllowForward"),
     setView: makeFunctionReference("decks:setView"),
@@ -135,6 +137,7 @@ export const api = {
     setAllowForward: makeFunctionReference("shares:setAllowForward"),
     setEnabled: makeFunctionReference("shares:setEnabled"),
     setNotify: makeFunctionReference("shares:setNotify"),
+    linkOrigins: makeFunctionReference("shares:linkOrigins"),
   },
   imagegen: {
     generateImage: makeFunctionReference("imagegen:generateImage"),
@@ -191,7 +194,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", "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", "backup"]);
 // 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).
@@ -259,6 +262,63 @@ export function target(opts = {}) {
   };
 }
 
+// Where recipient links (/v/<token>) are printed: the server says
+// (shares:linkOrigins, RECIPIENT_LINK_ORIGIN in lib/linkOrigin.ts), so links
+// follow the deployment rather than a default baked into this version. Both app
+// hosts serve every link; this only picks the one a new link names.
+// HYPERDECKS_LINK_ORIGIN overrides it; the dev target keeps its share base.
+export const DEFAULT_LINK_ORIGIN = "https://decks.hypersocial.ai";
+const LINK_HOSTS = ["https://decks.hypersocial.ai", "https://hyperdecks.ai"];
+let linkOriginPin = null;
+const linkOriginCache = new Map();
+
+// The hosted MCP pins it to the server's own setting (lib/serverCliHost.ts).
+export function pinLinkOrigin(origin) {
+  linkOriginPin = origin ? normalizeBase(origin) : null;
+  linkOriginCache.clear();
+}
+
+const isLinkHost = (o) => typeof o === "string" && LINK_HOSTS.includes(normalizeBase(o.trim()).toLowerCase());
+
+async function askLinkOrigin(c) {
+  try {
+    const out = await c.query(api.shares.linkOrigins, {});
+    // The server only ever names one of the two app hosts; print nothing else.
+    if (isLinkHost(out?.origin)) return normalizeBase(out.origin.trim()).toLowerCase();
+    console.warn(`warning: the server named no usable link origin; printing links on ${DEFAULT_LINK_ORIGIN}`);
+  } catch (e) {
+    // An older server without shares:linkOrigins stays quiet: links on the
+    // established host open everywhere. Anything else is worth a line.
+    const msg = String(e?.message ?? e);
+    if (!/Could not find public function/.test(msg)) console.warn(`warning: could not ask where to print links (${msg}); printing them on ${DEFAULT_LINK_ORIGIN}`);
+  }
+  return DEFAULT_LINK_ORIGIN;
+}
+
+export async function linkBase(opts = {}) {
+  const t = target(opts);
+  if (t.name === "dev") return t.shareBase;
+  const env = process.env.HYPERDECKS_LINK_ORIGIN?.trim();
+  if (env) {
+    if (isLinkHost(env) || /^http:\/\/(localhost|127\.0\.0\.1)(:\d+)?\/?$/.test(env)) return normalizeBase(env).toLowerCase();
+    console.warn(`warning: HYPERDECKS_LINK_ORIGIN must be ${LINK_HOSTS.join(" or ")} (or a localhost URL); ignoring ${JSON.stringify(env)}`);
+  }
+  if (linkOriginPin) return linkOriginPin;
+  // A caller's own client (the hosted MCP, tests) is asked each time.
+  if (opts.client) return askLinkOrigin(opts.client);
+  if (!linkOriginCache.has(t.convexUrl)) linkOriginCache.set(t.convexUrl, askLinkOrigin(new ConvexHttpClient(t.convexUrl)));
+  return linkOriginCache.get(t.convexUrl);
+}
+
+// The same link on the other app host, for a recipient whose network blocks
+// the printed one; null for a link that is not on an app host (dev).
+export function backupLinkUrl(url) {
+  const m = /^(https?:\/\/[^/]+)(\/.*)$/.exec(String(url || ""));
+  if (!m) return null;
+  const i = LINK_HOSTS.indexOf(m[1].toLowerCase());
+  return i < 0 ? null : `${LINK_HOSTS[1 - i]}${m[2]}`;
+}
+
 export function loadCreds() {
   if (!existsSync(CRED_FILE)) return {};
   try {

package/src/source.mjs

@@ -112,7 +112,7 @@ export async function sourcePush(pos, opts = {}, { log = (line) => console.log(l
   return { slug, rev, files };
 }
 
-const TYPES = { ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".gif": "image/gif", ".webp": "image/webp", ".avif": "image/avif", ".svg": "image/svg+xml", ".mp4": "video/mp4", ".webm": "video/webm", ".woff2": "font/woff2", ".woff": "font/woff" };
+const TYPES = { ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".gif": "image/gif", ".webp": "image/webp", ".avif": "image/avif", ".svg": "image/svg+xml", ".mp4": "video/mp4", ".webm": "video/webm", ".woff2": "font/woff2", ".woff": "font/woff", ".mp3": "audio/mpeg", ".m4a": "audio/mp4", ".json": "application/json" };
 
 export async function assetAdd(pos, opts = {}, { log = (line) => console.log(line), cwd = process.cwd() } = {}) {
   const [slug, from] = pos;
@@ -122,7 +122,7 @@ export async function assetAdd(pos, opts = {}, { log = (line) => console.log(lin
   else {
     const path = resolve(/*turbopackIgnore: true*/ cwd, from);
     const contentType = TYPES[extname(path).toLowerCase()];
-    if (!contentType) throw new Error(`${from}: asset add takes images, video and fonts (${Object.keys(TYPES).join(" ")})`);
+    if (!contentType) throw new Error(`${from}: asset add takes images, video, audio, fonts and JSON (${Object.keys(TYPES).join(" ")})`);
     const c = await client(opts);
     const bytes = readFileSync(path);
     const storageId = await uploadBytes(c, bytes, contentType);

package/templates/layouts/_deck.html

@@ -76,6 +76,12 @@
   .narration-slot { position: absolute; right: 56px; bottom: 64px; }
   .slot-left .narration-slot { right: auto; left: 56px; }
   .slot-top .narration-slot { top: 96px; bottom: auto; }
+  /* No presenter (no face AND no captions, e.g. presenter none on a
+     data-silent deck; or forced off by setPresenterOff): the player puts
+     .hd-no-presenter on the root and hides the slot, each layout's
+     no-presenter variant (:root.hd-no-presenter .l-…) uses the corner, and on
+     phones the slide drops its 170px bottom padding (below). Keep custom slides
+     compatible: leave the corner to .narration-slot, no hard-coded right gutter. */
   .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
   .reveal.is-revealed { opacity: 1; transform: none; }
   /* The phone card (product's .frame.card, the phones row): a frameless phone,
@@ -136,6 +142,7 @@
     :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; }
+    :root.hd-no-presenter .slide { padding-bottom: 28px; }
     .slide .frame.card { width: 160px; padding: 5px; border-width: 2px; border-radius: 24px; box-shadow: 8px 8px 0 var(--shadow); }
     .slide .frame.card > .shot { border-radius: 19px; border-width: 1px; }
     /* The text fills the card's width: the dots fade in towards the bottom, and the tiles stay off. */

package/templates/layouts/chart.html

@@ -4,6 +4,7 @@ summary: A chart of real numbers with its takeaway in one line; the presenter be
 use: a trend or a comparison in numbers. Its svg is a placeholder of made-up numbers check fails on: draw the real data with `hyperdecks chart` (render_chart; never a generated picture of a chart) as <img class="chart"> and name the data's source.
 slot: bottom-right
 presenter: stage
+nopresenter: The chart spans both columns, under the takeaway.
 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]
 -->
@@ -23,6 +24,10 @@ script: Here are the numbers. [look: #__ID__-chart] The last bar is the one to s
     .l-chart .chart { height: 210px; flex: none; }
     .l-chart .takeaway { padding-left: 12px; border-left-width: 4px; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-chart .chart { grid-column: 1 / -1; }
+  }
 </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>

package/templates/layouts/closer.html

@@ -4,6 +4,7 @@ summary: The last slide. One line, the one action to take (a command, a link) an
 use: the end. One call to action, never three. Label an ask that is not agreed as Proposed.
 slot: bottom-left
 presenter: stage
+nopresenter: The line and the action drop the left gutter and re-centre in the full frame.
 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]
 -->
@@ -16,6 +17,10 @@ script: That's it. [go: #__ID__-cta] Here is the one thing to do next. Thanks [g
     .l-closer .content { padding-left: 0; justify-content: flex-start; gap: 16px; }
     .l-closer .cta { padding: 12px 16px; border-radius: 14px; font-size: 15px; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-closer .content { padding-left: 0; align-self: center; align-items: center; text-align: center; }
+  }
 </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">

package/templates/layouts/compare.html

@@ -4,6 +4,7 @@ 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
+nopresenter: The two columns widen to the full frame.
 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]
 -->
@@ -21,6 +22,10 @@ script: Today it looks like this. [look: #__ID__-before] With us, [go: #__ID__-a
     .l-compare .label { margin-bottom: 4px; }
     .l-compare li { padding: 5px 0; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-compare .cols { max-width: none; }
+  }
 </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>

package/templates/layouts/features.html

@@ -4,6 +4,7 @@ summary: Three features side by side, an icon, a name and one line each; the pre
 use: what it does, the three reasons, the three parts. Swap each icon for a real one: `hyperdecks icons search <word>` (search_icons) gives inline SVG in currentColor.
 slot: bottom-right
 presenter: stage
+nopresenter: The title and cards centre vertically and the cards grow a little, instead of leaving a strip below for the presenter.
 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]
 -->
@@ -22,6 +23,11 @@ script: It does three things. First, [go: #__ID__-f1] it writes. Then [go: #__ID
     .l-features b { font-size: 18px; }
     .l-features p { font-size: 13px; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-features { justify-content: center; }
+    :root.hd-no-presenter .l-features .card { padding: 36px 34px; }
+  }
 </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>

package/templates/layouts/hero.html

@@ -4,6 +4,7 @@ summary: The opening. One display-size line, a visual on the right, the presente
 use: the first slide; a section opener. Its .art is a placeholder check fails on: put in a picture of the real subject (gen-image / generate_image) as <img class="art">, or delete the div and let the presenter be the visual.
 slot: bottom-right
 presenter: stage
+nopresenter: With art (the placeholder div counts), unchanged: the art already fills the right. Delete the art and the line re-centres in the full frame.
 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.
 -->
@@ -21,6 +22,10 @@ script: Hi, [wave] this is __TITLE__. [look: h1] One idea, in a few minutes.
     .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::after { left: 50%; top: 45%; padding: 8px 14px; border-width: 2px; font-size: 13px; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-hero:not(:has(> .art)) .content { align-self: center; align-items: center; text-align: center; max-width: 1200px; }
+  }
 </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>

package/templates/layouts/number.html

@@ -4,6 +4,7 @@ summary: One big number, what it measures and its source. The number is the slid
 use: proof, traction, a before/after delta. Never an estimate shown as fact: the source line is required.
 slot: bottom-right
 presenter: stage
+nopresenter: The figure, title and source re-centre in the full frame.
 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.
 -->
@@ -17,6 +18,10 @@ script: Here is the number that matters. [look: #__ID__-figure] Three times fast
     .l-number .content { justify-content: flex-start; gap: 12px; }
     .l-number .figure { font-size: 120px; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-number .content { align-self: center; align-items: center; text-align: center; max-width: 1200px; }
+  }
 </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">

package/templates/layouts/phones.html

@@ -4,6 +4,7 @@ summary: A fanned row of two to four phone cards (the inner ones larger and in f
 use: a phone app's flow or its key screens. Each card's .shot is a placeholder check fails on: put in a phone-size screenshot (`hyperdecks screenshot <url> --width 390 --height 844`, capture_url) as <img class="shot">, or a screen recording as <video class="shot" autoplay muted loop playsinline>. Two to four cards: the row spaces and tilts them (on phones only the first three show); change one card's --tilt or --shadow on it. One phone only: use product with .frame.card.
 slot: bottom-left
 presenter: stage
+nopresenter: The copy centres vertically beside the row instead of leaving the bottom-left free.
 cues: [look: #__ID__-row] when the narration turns to the app; [go: #__ID__-p1] … [go: #__ID__-p3] to walk the screens, then [go: slot].
 script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__ID__-p1] you pick one, [go: #__ID__-p2] and it is done. [go: #__ID__-p3] [go: slot]
 -->
@@ -32,6 +33,10 @@ script: Here is the app on a phone. [look: #__ID__-row] You start here, [go: #__
     .l-phones .row > .frame.card:nth-child(n + 4) { display: none; }
     .l-phones .row:has(> :nth-child(4)) > .frame.card:nth-child(3) { --tilt: 7deg; --shadow: var(--accent-3); width: 108px; translate: 0 16px; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-phones .text { align-self: center; }
+  }
 </style>
 <section class="slide l-phones slot-left bg-dots" id="__ID__" data-chapter="On a phone" data-note="Phone screens: name the app build and the date they were captured.">
   <div class="text">

package/templates/layouts/product.html

@@ -4,6 +4,7 @@ summary: A product screenshot in a browser frame (for a phone shot, .frame.card:
 use: a demo moment. Its .shot is a placeholder check fails on: put in `hyperdecks screenshot <url>` (capture_url) output as <img class="shot">; a callout chip names what to look at. For a phone app, make the frame `<div class="frame card" id="__ID__-frame">` holding only the shot (a phone screenshot or a `<video class="shot" autoplay muted loop playsinline>` clip) and the callout; tilt and shadow colour are `--tilt` and `--shadow` on it. `.frame.phone` (the black bezel) stays for older decks.
 slot: bottom-right
 presenter: stage
+nopresenter: The copy centres vertically beside the screenshot instead of leaving the bottom-right free.
 cues: [look: #__ID__-frame] when the narration turns to the product; [reveal: #__ID__-callout] for the detail.
 script: This is the product. [look: #__ID__-frame] Look at this part. [reveal: #__ID__-callout]
 -->
@@ -45,6 +46,10 @@ script: This is the product. [look: #__ID__-frame] Look at this part. [reveal: #
     .l-product .frame.card { align-self: center; }
     .l-product .callout { left: 10px; bottom: 10px; padding: 6px 12px; font-size: 12px; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-product .text { align-self: center; }
+  }
 </style>
 <section class="slide l-product" id="__ID__" data-chapter="The product" data-note="Screenshot: name the page and the date it was captured.">
   <div class="text">

package/templates/layouts/quote.html

@@ -4,6 +4,7 @@ summary: One quote, large, with who said it. The quote is the title.
 use: a customer or user in their own words. Quote them exactly and name the source in data-note.
 slot: bottom-left
 presenter: stage
+nopresenter: The quote drops its left gutter and re-centres in the full frame.
 cues: [look: #__ID__-quote] as the narration reads it.
 script: In their words. [look: #__ID__-quote] Here is what they told us.
 -->
@@ -20,6 +21,11 @@ script: In their words. [look: #__ID__-quote] Here is what they told us.
     .l-quote .quote { font-size: 32px; }
     .l-quote .avatar { width: 44px; height: 44px; font-size: 16px; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-quote .content { padding-left: 0; align-self: center; align-items: center; text-align: center; max-width: 1240px; }
+    :root.hd-no-presenter .l-quote .quote { text-indent: 0; }
+  }
 </style>
 <section class="slide on-accent l-quote slot-left" id="__ID__" data-chapter="In their words" data-note="Quote: name who said it, where (email, call, review) and when.">
   <figure class="content">

package/templates/layouts/split.html

@@ -4,6 +4,7 @@ summary: Image plus copy: the copy on the left (a sticker for the logo or icon,
 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
+nopresenter: The copy centres vertically beside the picture instead of leaving the bottom-left free.
 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]
 -->
@@ -26,6 +27,10 @@ script: Here it is, doing the job. [look: #__ID__-frame] It starts with [go: #__
     .l-split .frame.card { width: 128px; }
     .l-split .shot.wide { border-radius: 10px; box-shadow: 6px 6px 0 var(--accent); }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-split .text { align-self: center; padding-top: 0; }
+  }
 </style>
 <section class="slide l-split slot-left bg-lines" id="__ID__" data-chapter="The product" data-note="Picture: name the screen or clip and the date it was captured.">
   <div class="text">

package/templates/layouts/team.html

@@ -4,6 +4,7 @@ summary: Up to four people, a face, a name and a role each; the presenter flies
 use: who is behind it, who to talk to. Use real photos only with permission; initials otherwise.
 slot: bottom-right
 presenter: stage
+nopresenter: The title and people centre vertically and the cards grow a little, instead of leaving a strip below for the presenter.
 cues: [go: #__ID__-p1] … [go: #__ID__-p4] at each name, then [go: slot].
 script: Meet the team. [go: #__ID__-p1] Ana builds it. [go: #__ID__-p2] Sam sells it. [go: #__ID__-p3] Lee runs it. [go: #__ID__-p4] Kai designs it. [go: slot]
 -->
@@ -23,6 +24,11 @@ script: Meet the team. [go: #__ID__-p1] Ana builds it. [go: #__ID__-p2] Sam sell
     .l-team b { font-size: 16px; }
     .l-team small { font-size: 10px; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-team { justify-content: center; }
+    :root.hd-no-presenter .l-team .person { padding: 32px 30px; }
+  }
 </style>
 <section class="slide l-team" id="__ID__" data-chapter="The team" data-note="People: names and roles as they gave them; photos only with their permission.">
   <div class="kicker">The team</div>

package/templates/layouts/timeline.html

@@ -4,6 +4,7 @@ summary: Four milestones on a line, left to right, the presenter flying under ea
 use: history, a roadmap, a process over time. Label future steps "Proposed" if not agreed.
 slot: bottom-right
 presenter: stage
+nopresenter: The title and milestones centre vertically instead of leaving a strip below for the presenter.
 cues: [go: #__ID__-m1] … [go: #__ID__-m4] at the word that starts each milestone, then [go: slot].
 script: It started [go: #__ID__-m1] with a sketch. Then [go: #__ID__-m2] a first user. Then [go: #__ID__-m3] a launch. Next, [go: #__ID__-m4] the plan. [go: slot]
 -->
@@ -25,6 +26,10 @@ script: It started [go: #__ID__-m1] with a sketch. Then [go: #__ID__-m2] a first
     .l-timeline b { font-size: 18px; margin-bottom: 2px; }
     .l-timeline p { font-size: 13px; }
   }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-timeline { justify-content: center; }
+  }
 </style>
 <section class="slide l-timeline" id="__ID__" data-chapter="How we got here" data-note="Source: name where each date comes from.">
   <div class="kicker">How we got here</div>