retake-demos 0.2.0 → 0.2.1

package/README.md

@@ -78,7 +78,7 @@ Exit codes: `0` good · `2` a step failed or the video is a raw fallback · `3`
 name: first-project
 title: "Creating your first project"
 url: http://localhost:3000
-preset: post-landscape            # 1080p @ 30fps · `retake presets`
+preset: post-landscape            # `retake presets` — 1920×1080 page + caption band
 viewport: { width: 1440, height: 1080 }
 scale: 1.8                        # page drawn at 1.8× so text stays crisp
 reducedMotion: true
@@ -113,15 +113,17 @@ The full template is [`demos/example.yaml`](demos/example.yaml); `retake init` c
 
 Think in the publishing format, not the browser window.
 
-| Preset | Canvas | For |
-|---|---:|---|
-| `draft` | 960×540 @ 15fps | iterating — same layout as the finals at a quarter of the pixels, fastest |
-| `preview-fast` | 1920×1080 @ 24fps | checking timing and framing, hardware-encoded |
-| `post-landscape` *(default)* | 1920×1080 @ 30fps | the general-purpose demo, plus a CRF-14 master |
-| `post-square` | 1080×1080 @ 30fps | feeds |
-| `post-vertical` | 1080×1920 @ 30fps | shorts and reels |
-| `docs-gif` | 1440×900 @ 24fps | README and docs GIFs |
-| `master` | 1920×1080 @ 30fps | archive, CRF 12 |
+| Preset | Video | Page area | For |
+|---|---:|---:|---|
+| `draft` | 960×616 | 960×540 | iterating — the finals' layout at a quarter of the pixels, fastest |
+| `preview-fast` | 1920×1230 | 1920×1080 | checking timing and framing, hardware-encoded |
+| `post-landscape` *(default)* | 1920×1230 | 1920×1080 | the general-purpose demo, plus a CRF-14 master |
+| `post-square` | 1080×1080 | 1080×950 | feeds — a true square |
+| `post-vertical` | 1080×1920 | 1080×1750 | shorts and reels — a true 9:16 |
+| `docs-gif` | 1440×1000 | 1440×900 | README and docs GIFs |
+| `master` | 1920×1230 | 1920×1080 | archive, CRF 12 |
+
+**The video is the page area plus the caption band.** Landscape keeps a full 1920×1080 page and the band goes under it (1920×1230) — the captions never cover the app. Square and vertical fit the band inside the canvas, because a feed that wants 1:1 or 9:16 will letterbox anything else. A manifest's `viewport` replaces the page area and the video follows it, so a 1240×1080 viewport gives a 1240×1230 video. `retake presets` prints this table, and `retake validate` tells you the exact size of the video a manifest will produce before you record it.
 
 **Page scale** is what makes it crisp: the page lays out as if the viewport were smaller and every glyph is drawn at 2×, so 1080p text reads on a phone. **Camera** eases toward whatever the demo just touched, at render time, clamped so it can never crop the thing it points at — per scene: `camera: static` or `camera: { focus: ".result", zoom: 1.3 }`. Captions, camera, speed, trim, format and layout are all render-time: change them and `retake render` takes seconds, never touches the browser.
 

package/dist/cli.js

@@ -384,15 +384,26 @@ program
     .description("list quality presets")
     .action(async () => {
     const { PRESETS } = await import("./presets.js");
-    for (const p of Object.values(PRESETS))
-        say(`${p.name.padEnd(16)} ${String(p.width + "×" + p.height).padEnd(10)} ${p.fps}fps  scale ${p.scale}×  ${p.layout.padEnd(5)} — ${p.description}`);
+    say(`${"preset".padEnd(16)} ${"video".padEnd(11)} ${"page".padEnd(11)} fps  layout`);
+    for (const p of Object.values(PRESETS)) {
+        const video = p.layout === "card" ? `${p.width}×${p.height}` : `${p.width}×${p.height + (p.layout === "band" ? p.bandHeight : 0)}`;
+        say(`${p.name.padEnd(16)} ${video.padEnd(11)} ${String(p.width + "×" + p.height).padEnd(11)} ${String(p.fps).padEnd(4)} ${p.layout.padEnd(5)} — ${p.description}`);
+    }
+    say(`\nvideo = page + caption band. A manifest's \`viewport\` replaces the page size (the video follows it).`);
 });
 program
     .command("validate")
     .argument("<manifest>")
-    .action((file) => {
+    .action(async (file) => {
     const { manifest } = loadManifest(file);
+    const { resolve } = await import("./manifest.js");
+    const q = resolve(manifest);
+    // The video is the page area plus the caption band, so say the real number
+    // here rather than letting it surprise someone after a two-minute take.
+    const outW = q.layout === "card" ? q.width : q.viewport.width;
+    const outH = (q.layout === "card" ? q.height : q.viewport.height) + (q.layout === "band" ? q.bandHeight : 0);
     say(`ok: ${manifest.name} · ${manifest.steps.length} steps · ${manifest.steps.filter((s) => s.action === "scene").length} scenes`);
+    say(`   ${q.name} · video ${outW}×${outH}${q.layout === "band" ? ` (page ${q.viewport.width}×${q.viewport.height} + ${q.bandHeight}px caption band)` : ""} @ ${q.fps}fps${q.gif ? ` · gif ${q.gif.width}px` : ""}`);
     for (const w of warnings(manifest))
         say(`⚠ ${w}`);
 });

package/dist/manifest.js

@@ -339,7 +339,14 @@ export function resolve(m) {
     const p = PRESETS[m.preset] ?? PRESETS[DEFAULT_PRESET];
     const viewport = { width: m.viewport?.width ?? p.width, height: m.viewport?.height ?? p.height };
     const gifOverride = m.outputs.gif;
-    const gif = gifOverride === false ? false : gifOverride === true ? p.gif : p.gif === false ? { width: gifOverride.width ?? 720, fps: gifOverride.fps ?? 15 } : { width: gifOverride.width ?? p.gif.width, fps: gifOverride.fps ?? p.gif.fps };
+    /* `gif: true` means "yes, a GIF" on any preset. Only docs-gif carries GIF
+       settings, so asking for one anywhere else used to resolve to the preset's
+       `false` and produce nothing, silently. */
+    const GIF_DEFAULT = { width: 900, fps: 15 };
+    const gif = gifOverride === false ? false
+        : gifOverride === true ? (p.gif === false ? GIF_DEFAULT : p.gif)
+            : p.gif === false ? { width: gifOverride.width ?? GIF_DEFAULT.width, fps: gifOverride.fps ?? GIF_DEFAULT.fps }
+                : { width: gifOverride.width ?? p.gif.width, fps: gifOverride.fps ?? p.gif.fps };
     const cursor = m.cursor === false ? false : { style: (m.cursor === true ? "default" : m.cursor.style ?? "default"), size: m.cursor === true ? p.cursorSize : m.cursor.size ?? p.cursorSize, idleHideMs: m.cursor === true ? 2000 : m.cursor.idleHideMs ?? 2000, idleHide: m.cursor === true ? undefined : m.cursor.idleHide };
     const captions = m.captions === false ? false : { fontSize: m.captions === true ? p.captionFontSize : m.captions.fontSize ?? p.captionFontSize, color: m.captions === true ? undefined : m.captions.color };
     return {

package/dist/presets.js

@@ -38,19 +38,22 @@ export const PRESETS = {
     },
     "post-square": {
         name: "post-square",
-        width: 1080, height: 1080, scale: 1.6, fps: 30, crf: 17,
+        /* The page area is the canvas minus the caption band, so the file really
+           is 1080×1080 — a square preset that produced 1080×1210 got letterboxed
+           by every feed. Landscape keeps its full-height page on purpose. */
+        width: 1080, height: 950, scale: 1.6, fps: 30, crf: 17,
         gif: false, layout: "band", cameraZoom: 1.25,
         cursorSize: 60, captionFontSize: 40, bandHeight: 130,
         encoder: "x264", master: true,
-        description: "1080×1080, feed-friendly.",
+        description: "A true 1080×1080 (page 1080×950 + caption band), feed-friendly.",
     },
     "post-vertical": {
         name: "post-vertical",
-        width: 1080, height: 1920, scale: 2, fps: 30, crf: 17,
+        width: 1080, height: 1750, scale: 2, fps: 30, crf: 17,
         gif: false, layout: "band", cameraZoom: 1.3,
         cursorSize: 60, captionFontSize: 44, bandHeight: 170,
         encoder: "x264", master: true,
-        description: "9:16 for shorts/reels. Apps with a narrow column suit it best.",
+        description: "A true 1080×1920 (page 1080×1750 + caption band) for shorts/reels. Narrow-column apps suit it best.",
     },
     "docs-gif": {
         name: "docs-gif",

package/dist/ui/index.html

@@ -381,7 +381,9 @@ function saveDraftSoon() { clearTimeout(draftTimer); draftTimer = setTimeout(asy
 }, 500); }
 
 // ---------- demo view ----------
-const PRESET_LABEL = { 'post-landscape': '1080p', 'post-square': 'square', 'post-vertical': 'vertical', 'docs-gif': 'docs', 'proof-fast': 'small', 'master': 'master', 'preview-fast': 'preview' };
+// Shape, not a resolution: the video is the page plus the caption band, so
+// "1080p" was never true of what post-landscape actually writes (1920×1230).
+const PRESET_LABEL = { 'post-landscape': 'landscape', 'post-square': 'square', 'post-vertical': 'vertical', 'docs-gif': 'docs', 'proof-fast': 'small', 'master': 'master', 'preview-fast': 'preview', 'draft': 'draft' };
 async function select(name) {
   if (dirty && !confirm('Discard unsaved manifest edits?')) return;
   current = name; dirty = false; setMsg('');
@@ -708,7 +710,7 @@ document.addEventListener('keydown', (e) => {
 // ---------- boot ----------
 (async () => {
   setQuality(quality);
-  try { const ps = await api('/api/presets'); $('sPreset').innerHTML = ps.filter((p) => p.name !== 'preview-fast').map((p) => `<option value="${p.name}">${p.name} — ${p.width}×${p.height}</option>`).join(''); } catch {}
+  try { const ps = await api('/api/presets'); $('sPreset').innerHTML = ps.filter((p) => p.name !== 'preview-fast').map((p) => { const h = p.layout === 'card' ? p.height : p.height + (p.layout === 'band' ? p.bandHeight : 0); return `<option value="${p.name}">${p.name} — ${p.width}×${h}</option>`; }).join(''); } catch {}
   try { settings = await api('/api/settings'); $('modelTag').textContent = settings.active ? 'model: ' + settings.active : 'no model — set one in Settings'; } catch {}
   const list = await loadDemos();
   // Arriving from the review page's Edit link: /classic#<demo> opens that demo.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "retake-demos",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Demo-as-code for coding agents: a YAML manifest in, a product walkthrough video out. Rerun the demo instead of re-recording it.",
   "keywords": [
     "demo",