@openvidstudio/mcp-server 0.1.0 → 1.3.1

package/dist/scenes/templates.js

@@ -24,10 +24,19 @@
  * 2. Real captures get their frame size from the file on disk, not from a guess.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.captionLine = captionLine;
 exports.pickTemplate = pickTemplate;
 exports.renderTemplate = renderTemplate;
-/** Content wider or taller than this gets cropped once the camera pushes in. */
-const SAFE_W = 1560;
+/** The 1920x1080 stage every template was first laid out for. */
+const DEFAULT_STAGE_W = 1920;
+const DEFAULT_STAGE_H = 1080;
+function stageOf(ctx) {
+    const w = ctx.stageWidth ?? DEFAULT_STAGE_W;
+    const h = ctx.stageHeight ?? DEFAULT_STAGE_H;
+    return { w, h, portrait: h > w, safeW: Math.round(w * 0.8125) };
+}
+/** A fixed width from the landscape layout, never wider than the safe box of the real stage. */
+const fitW = (stage, landscapeWidth) => Math.min(landscapeWidth, stage.safeW);
 const HEADER = (beatId, template, direction = "") => `// Scene for beat "${beatId}", generated by scaffold_scene from the "${template}" template.
 //
 // This renders as-is. Edit the copy and the timings; the structure, camera and
@@ -57,41 +66,137 @@ function esc(s) {
     return s.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, " ");
 }
 /** Caption timing: in after the opening settle, out before the cut. */
+/**
+ * The caption line for a beat, taken from its narration.
+ *
+ * A caption is not the whole VO line: it is the phrase a viewer reads while hearing it,
+ * and a long sentence does not fit on one line at 30px. The old rule was a hard
+ * `slice(0, 70)`, which cut mid-word and put "This is their real installer, rec" on screen.
+ *
+ * So: prefer the first complete sentence when there is one short enough, otherwise cut at
+ * the last word boundary that fits. Either way the line on screen is a whole thought, and
+ * the rest of the sentence is still spoken.
+ */
+function captionLine(vo, max = 82) {
+    const text = vo.trim();
+    if (text.length <= max)
+        return text;
+    const firstStop = text.search(/[.!?](\s|$)/);
+    if (firstStop > 0 && firstStop + 1 <= max)
+        return text.slice(0, firstStop + 1);
+    const cut = text.slice(0, max);
+    const lastSpace = cut.lastIndexOf(" ");
+    return (lastSpace > max * 0.5 ? cut.slice(0, lastSpace) : cut).replace(/[,;:]$/, "");
+}
 function captionWindow(frames) {
     return { at: Math.round(frames * 0.18), out: Math.max(24, Math.round(frames * 0.82)) };
 }
+const CAPTION_SPOTS = ["bottom", "top", "right", "left"];
+/**
+ * Which edge a scaffolded scene's caption sits on.
+ *
+ * Every scene used to put its caption in the same place, so the card covered the same part of
+ * the product in every beat. The spot now comes from a hash of the beat id: different beats land
+ * on different edges, and re-scaffolding the same beat gives the same file. It is a starting
+ * point; a scene that knows where its product sits should pass `position="auto"` with `avoid`.
+ */
+function captionPosition(beatId) {
+    let h = 2166136261;
+    for (let i = 0; i < beatId.length; i++) {
+        h ^= beatId.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return CAPTION_SPOTS[(h >>> 0) % CAPTION_SPOTS.length];
+}
+/** Text on a capture has to stay readable through the push: no template goes past this zoom. */
+const MAX_CAPTURE_PUSH = 1.6;
+/**
+ * Builds a <CursorActor> element from real cursor points, already frame-assigned by
+ * scaffold_scene, transformed from the CSS-pixel capture viewport into whatever stage
+ * coordinate space `toStage` describes. Null when there's nothing to draw, so callers can
+ * splice the result straight into a template without an extra existence check at every
+ * call site.
+ */
+function cursorActorJsx(points, viewport, toStage) {
+    if (!points || points.length === 0 || !viewport)
+        return null;
+    const path = points
+        .map((p) => {
+        const s = toStage(p.x, p.y);
+        return `{ frame: ${p.frame}, x: ${Math.round(s.x)}, y: ${Math.round(s.y)} }`;
+    })
+        .join(", ");
+    const clicks = points.filter((p) => p.click).map((p) => p.frame);
+    return `<CursorActor path={[${path}]} clicks={[${clicks.join(", ")}]} />`;
+}
 /* ------------------------------------------------------------------ capture */
 function browserCapture(ctx) {
     const w = ctx.captureWidth ?? 1440;
     const h = ctx.captureHeight ?? 900;
     // BrowserFrame adds a chrome bar above the page.
-    const frameW = Math.min(1600, w + 80);
+    //
+    // 1200 rather than 1600: the frame has to leave the camera somewhere to go. A 1440x900
+    // capture at the old cap produced a 1520x1006 frame, which very nearly fills the
+    // 1920x1080 stage, and the camera then pushed to 1.78 anyway. That crops the page at the
+    // frame edge with no error at render time, which is precisely what validate_scenes
+    // exists to catch, so scaffold_scene was generating scenes its own sibling tool rejected
+    // on the single commonest path there is (CAPTURE.md's own default viewport). The push is also
+    // capped at MAX_CAPTURE_PUSH: a heavier push on a capture is where the product text gets soft.
+    const stage = stageOf(ctx);
+    const frameW = Math.min(stage.portrait ? Math.round(stage.w * 0.85) : 1200, w + 80);
     const frameH = Math.round(frameW * (h / w)) + 56;
+    // Camera derived from the frame rather than hardcoded. The push-in can only go as far as
+    // the point where the frame still fits inside the visible box, on both axes: the visible
+    // stage is 1920/scale by 1080/scale, so the binding limit is whichever runs out first.
+    const floor2 = (n) => Math.floor(n * 100) / 100;
+    const maxScale = Math.min(MAX_CAPTURE_PUSH, floor2(stage.w / frameW), floor2(stage.h / frameH));
+    const startScale = Math.max(1.02, floor2(maxScale - 0.24));
+    const midScale = floor2((startScale + maxScale) / 2);
     const mid = Math.round(ctx.durationFrames * 0.55);
     const cap = captionWindow(ctx.durationFrames);
+    // Cursor overlay, in the same stage-space math LEFT/TOP below use, computed here (not in
+    // the generated source) because only Node has the real numbers to transform with -- the
+    // generated file gets the already-computed pixel positions baked in as literals, same as
+    // FRAME_W/FRAME_H themselves. Scale is against cursorViewport (the CSS-pixel viewport the
+    // points were measured in), never against w/h (the capture PNG's raw pixel dimensions,
+    // which are deviceScaleFactor times larger) -- using the PNG's pixel size here would
+    // silently misplace every point by exactly deviceScaleFactor.
+    const left = (stage.w - frameW) / 2;
+    const top = (stage.h - frameH) / 2;
+    const cx = Math.round(stage.w / 2);
+    const cy = Math.round(stage.h / 2);
+    const cursorJsx = ctx.cursorViewport
+        ? cursorActorJsx(ctx.cursorPoints, ctx.cursorViewport, (x, y) => ({
+            x: left + x * (frameW / ctx.cursorViewport.width),
+            y: top + 56 + y * ((frameH - 56) / ctx.cursorViewport.height),
+        }))
+        : null;
+    const coreImports = ["CinematicScene", "Layer", "BrowserFrame", "Caption", "E"];
+    if (cursorJsx)
+        coreImports.push("CursorActor");
     return `${HEADER(ctx.beatId, "browser-capture", ctx.description)}
 //
 // Frame size comes from the real capture on disk (${w}x${h}), not a guess, so the
 // page is not letterboxed or stretched. Camera sits inside the UI and keeps moving.
-
+${cursorJsx ? "//\n// Cursor path is real: measured from each interaction's DOM target during capture, not\n// hand-picked. Re-run scaffold_scene with overwrite: true after re-capturing to refresh it.\n" : ""}
 import React from "react";
 import { Img, staticFile } from "remotion";
-import { CinematicScene, Layer, BrowserFrame, Caption, E } from "@openvidstudio/core";
+import { ${coreImports.join(", ")} } from "@openvidstudio/core";
 
 const FRAME_W = ${frameW};
 const FRAME_H = ${frameH};
-const LEFT = (1920 - FRAME_W) / 2;
-const TOP = (1080 - FRAME_H) / 2;
+const LEFT = (${stage.w} - FRAME_W) / 2;
+const TOP = (${stage.h} - FRAME_H) / 2;
 
 export const ${ctx.componentName}: React.FC = () => {
   return (
     <CinematicScene
       camera={[
-        { frame: 0, x: 960, y: 470, scale: 1.35, rotZ: -0.5 },
-        { frame: ${mid}, x: 960, y: 560, scale: 1.62, rotZ: 0.4, easing: E.cinematic },
-        { frame: ${ctx.durationFrames}, x: 985, y: 620, scale: 1.78, rotZ: 0.8, easing: E.drift },
+        { frame: 0, x: ${cx}, y: ${cy - 70}, scale: ${startScale}, rotZ: -0.3 },
+        { frame: ${mid}, x: ${cx}, y: ${cy + 20}, scale: ${midScale}, rotZ: 0.2, easing: E.cinematic },
+        { frame: ${ctx.durationFrames}, x: ${cx + 25}, y: ${cy + 80}, scale: ${maxScale}, rotZ: 0.4, easing: E.drift },
       ]}
-      overlay={<Caption text="${esc(ctx.vo).slice(0, 70)}" at={${cap.at}} out={${cap.out}} fontSize={30} />}
+      overlay={<Caption text="${esc(captionLine(ctx.vo))}" at={${cap.at}} out={${cap.out}} fontSize={30} position="${captionPosition(ctx.beatId)}" />}
     >
       <Layer depth={0}>
         <div style={{ position: "absolute", left: LEFT, top: TOP }}>
@@ -102,6 +207,7 @@ export const ${ctx.componentName}: React.FC = () => {
             />
           </BrowserFrame>
         </div>
+        ${cursorJsx ?? ""}
       </Layer>
     </CinematicScene>
   );
@@ -116,28 +222,84 @@ function recording(ctx, higgsfield) {
         : `// Composited as a bare Layer and OffthreadVideo, per STYLE.md's convention for
 // recordings. The camera moves over the recording exactly as it would over a still.`;
     const cap = captionWindow(ctx.durationFrames);
+    const stage = stageOf(ctx);
+    const cx = Math.round(stage.w / 2);
+    const cy = Math.round(stage.h / 2);
+    const holdFrames = ctx.recordingDurationFrames;
+    // A beat's duration is planned; a recording's is whatever the real interaction actually
+    // took. When the two differ (almost always) and OffthreadVideo is simply asked to keep
+    // playing past the source's own end, what lands on screen for the remainder is whatever
+    // frame Remotion happens to have, not deliberately the final one. Freeze pins playback at
+    // the last real frame instead, so a beat that runs long past its recording holds on the
+    // product's actual end state rather than an arbitrary mid-point.
+    const videoTag = holdFrames
+        ? `<Freeze frame={Math.min(useCurrentFrame(), ${holdFrames - 1})}>
+          <OffthreadVideo
+            src={staticFile("video/${ctx.beatId}.mp4")}
+            style={{ width: "100%", height: "100%", objectFit: "cover" }}
+          />
+        </Freeze>`
+        : `<OffthreadVideo
+          src={staticFile("video/${ctx.beatId}.mp4")}
+          style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        />`;
+    const remotionImports = holdFrames
+        ? `import { Freeze, OffthreadVideo, staticFile, useCurrentFrame } from "remotion";`
+        : `import { OffthreadVideo, staticFile } from "remotion";`;
+    const holdNote = holdFrames
+        ? `//
+// The real recording is ${holdFrames} frames; this beat is ${ctx.durationFrames}. Frame is
+// clamped to the recording's own last frame (Remotion's documented pattern for holding a
+// video's end state) rather than left to play past the source, which is whatever frame
+// OffthreadVideo happens to have at that point, not deliberately the final one. Re-run
+// scaffold_scene with overwrite: true if the recording is re-captured at a different length.`
+        : "";
+    // The video fills the full 1920x1080 stage at objectFit: cover (Layer depth={0} is
+    // position: absolute, inset: 0 over the whole stage), so the cursor transform is
+    // standard CSS object-fit: cover math -- scale to cover both axes, then center-crop --
+    // against cursorViewport (the CSS-pixel viewport the points were measured in), not
+    // against any pixel dimension of the encoded mp4 itself.
+    const cursorJsx = ctx.cursorViewport
+        ? (() => {
+            const vw = ctx.cursorViewport.width;
+            const vh = ctx.cursorViewport.height;
+            const scale = Math.max(stage.w / vw, stage.h / vh);
+            const offsetX = (stage.w - vw * scale) / 2;
+            const offsetY = (stage.h - vh * scale) / 2;
+            return cursorActorJsx(ctx.cursorPoints, ctx.cursorViewport, (x, y) => ({
+                x: offsetX + x * scale,
+                y: offsetY + y * scale,
+            }));
+        })()
+        : null;
+    const coreImports = ["CinematicScene", "Layer", "Caption", "E"];
+    if (cursorJsx)
+        coreImports.push("CursorActor");
+    const cursorNote = cursorJsx
+        ? "//\n// Cursor path is real: measured from each interaction's DOM target during capture, timed\n" +
+            "// to when it actually happened in this recording (not evenly spread), so it stays in sync\n" +
+            "// with the video. Re-run scaffold_scene with overwrite: true after re-capturing to refresh it.\n"
+        : "";
     return `${HEADER(ctx.beatId, "recording", ctx.description)}
 //
 ${note}
-
+${holdFrames ? `${holdNote}\n` : ""}${cursorNote}
 import React from "react";
-import { OffthreadVideo, staticFile } from "remotion";
-import { CinematicScene, Layer, Caption, E } from "@openvidstudio/core";
+${remotionImports}
+import { ${coreImports.join(", ")} } from "@openvidstudio/core";
 
 export const ${ctx.componentName}: React.FC = () => {
   return (
     <CinematicScene
       camera={[
-        { frame: 0, x: 960, y: 520, scale: 1.28, rotZ: 0.4 },
-        { frame: ${ctx.durationFrames}, x: 960, y: 560, scale: 1.5, rotZ: -0.3, easing: E.drift },
+        { frame: 0, x: ${cx}, y: ${cy - 20}, scale: 1.28, rotZ: 0.4 },
+        { frame: ${ctx.durationFrames}, x: ${cx}, y: ${cy + 20}, scale: 1.5, rotZ: -0.3, easing: E.drift },
       ]}
-      overlay={<Caption text="${esc(ctx.vo).slice(0, 70)}" at={${cap.at}} out={${cap.out}} fontSize={30} />}
+      overlay={<Caption text="${esc(captionLine(ctx.vo))}" at={${cap.at}} out={${cap.out}} fontSize={30} position="${captionPosition(ctx.beatId)}" />}
     >
       <Layer depth={0}>
-        <OffthreadVideo
-          src={staticFile("video/${ctx.beatId}.mp4")}
-          style={{ width: "100%", height: "100%", objectFit: "cover" }}
-        />
+        ${videoTag}
+        ${cursorJsx ?? ""}
       </Layer>
     </CinematicScene>
   );
@@ -145,7 +307,7 @@ export const ${ctx.componentName}: React.FC = () => {
 `;
 }
 /* ------------------------------------------------------------- constructed */
-const SAFE_WRAP = (inner) => `      <Layer depth={0}>
+const SAFE_WRAP = (stage, inner) => `      <Layer depth={0}>
         <div
           style={{
             position: "absolute",
@@ -153,17 +315,18 @@ const SAFE_WRAP = (inner) => `      <Layer depth={0}>
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            padding: "0 ${(1920 - SAFE_W) / 2}px",
+            padding: "0 ${Math.round((stage.w - stage.safeW) / 2)}px",
           }}
         >
 ${inner}
         </div>
       </Layer>`;
-const GENTLE_CAMERA = (frames, a = 1.04, b = 1.15) => `      camera={[
-        { frame: 0, x: 960, y: 540, scale: ${a}, rotZ: -0.4 },
-        { frame: ${frames}, x: 960, y: 548, scale: ${b}, rotZ: 0.35, easing: E.drift },
+const GENTLE_CAMERA = (stage, frames, a = 1.04, b = 1.15) => `      camera={[
+        { frame: 0, x: ${Math.round(stage.w / 2)}, y: ${Math.round(stage.h / 2)}, scale: ${a}, rotZ: -0.4 },
+        { frame: ${frames}, x: ${Math.round(stage.w / 2)}, y: ${Math.round(stage.h / 2) + 8}, scale: ${b}, rotZ: 0.35, easing: E.drift },
       ]}`;
 function terminal(ctx) {
+    const stage = stageOf(ctx);
     return `${HEADER(ctx.beatId, "terminal", ctx.description)}
 
 import React from "react";
@@ -172,11 +335,11 @@ import { CinematicScene, Layer, TerminalReplay, color, E } from "@openvidstudio/
 export const ${ctx.componentName}: React.FC = () => {
   return (
     <CinematicScene
-${GENTLE_CAMERA(ctx.durationFrames, 1.05, 1.16)}
+${GENTLE_CAMERA(stage, ctx.durationFrames, 1.05, 1.16)}
     >
-${SAFE_WRAP(`          <TerminalReplay
+${SAFE_WRAP(stage, `          <TerminalReplay
             title="Project"
-            width={1400}
+            width={${fitW(stage, 1400)}}
             fontSize={27}
             cps={24}
             steps={[
@@ -195,42 +358,142 @@ ${SAFE_WRAP(`          <TerminalReplay
 };
 `;
 }
+/**
+ * Replays a real recorded session captured by capture_terminal.
+ *
+ * The steps are inlined rather than loaded at render time. capture_terminal always runs
+ * before scaffold_scene, so the cast exists on disk by now, and baking it in keeps the
+ * scene a pure function of its props: no fetch, no delayRender, and the same frame
+ * every render. stderr keeps its own colour so a real error in a real run stays legible
+ * as an error rather than blending into the output.
+ */
+function terminalCast(ctx) {
+    const stage = stageOf(ctx);
+    const cap = captionWindow(ctx.durationFrames);
+    return `${HEADER(ctx.beatId, "terminal-cast", ctx.description)}
+//
+// Steps below are the REAL recorded session from public/terminal/${ctx.beatId}.json,
+// with the original inter-chunk timing preserved as pause steps. Re-run
+// capture_terminal and re-scaffold to refresh them; editing them by hand makes the
+// video stop matching the recording.
+
+import React from "react";
+import { CinematicScene, Layer, TerminalReplay, Caption, color, E } from "@openvidstudio/core";
+
+export const ${ctx.componentName}: React.FC = () => {
+  return (
+    <CinematicScene
+${GENTLE_CAMERA(stage, ctx.durationFrames, 1.05, 1.16)}
+      overlay={<Caption text="${esc(captionLine(ctx.vo))}" at={${cap.at}} out={${cap.out}} fontSize={30} position="${captionPosition(ctx.beatId)}" />}
+    >
+${SAFE_WRAP(stage, `          <TerminalReplay
+            title="${esc(ctx.termTitle ?? "terminal")}"
+            width={${fitW(stage, 1560)}}
+            fontSize={30}
+            cps={34}
+            steps={${ctx.termSteps ?? "[]"}}
+          />`)}
+    </CinematicScene>
+  );
+};
+`;
+}
+/**
+ * Shows a real asset the project already published, which this pipeline did not capture.
+ *
+ * The credit is rendered for the beat's whole duration, not flashed. validate_beats makes
+ * `attribution` mandatory precisely so this can be on screen; a borrowed frame without a
+ * visible source reads to a viewer as a capture of the running product, which is the one
+ * thing the honesty rules exist to prevent.
+ */
+function existingAsset(ctx) {
+    const stage = stageOf(ctx);
+    const w = ctx.captureWidth ?? 1440;
+    const h = ctx.captureHeight ?? 900;
+    const frameW = Math.min(stage.portrait ? Math.round(stage.w * 0.85) : 1500, w);
+    const frameH = Math.round(frameW * (h / w));
+    const cap = captionWindow(ctx.durationFrames);
+    return `${HEADER(ctx.beatId, "existing-asset", ctx.description)}
+//
+// This frame was NOT captured by this pipeline. It is an asset the project already
+// publishes, sized from the real file on disk (${w}x${h}). The credit below is
+// required, not decorative: it is what keeps a borrowed frame honest on screen.
+
+import React from "react";
+import { Img, staticFile } from "remotion";
+import { CinematicScene, Layer, Caption, color, font, radius, E } from "@openvidstudio/core";
+
+const FRAME_W = ${frameW};
+const FRAME_H = ${frameH};
+const LEFT = (${stage.w} - FRAME_W) / 2;
+const TOP = (${stage.h} - FRAME_H) / 2;
+
+export const ${ctx.componentName}: React.FC = () => {
+  return (
+    <CinematicScene
+${GENTLE_CAMERA(stage, ctx.durationFrames, 1.03, 1.12)}
+      overlay={<Caption text="${esc(captionLine(ctx.vo))}" at={${cap.at}} out={${cap.out}} fontSize={30} position="${captionPosition(ctx.beatId)}" />}
+    >
+      <Layer depth={0}>
+        <div style={{ position: "absolute", left: LEFT, top: TOP, width: FRAME_W }}>
+          <Img
+            src={staticFile("${esc(ctx.assetStaticPath ?? `images/${ctx.beatId}.png`)}")}
+            style={{ width: FRAME_W, height: FRAME_H, objectFit: "contain", borderRadius: radius.card }}
+          />
+          <div
+            style={{
+              marginTop: 14,
+              fontFamily: font.mono,
+              fontSize: 20,
+              letterSpacing: 0.4,
+              color: color.textSecondary,
+              textAlign: "right",
+            }}
+          >
+            ${esc(ctx.attribution ?? "source not stated")}
+          </div>
+        </div>
+      </Layer>
+    </CinematicScene>
+  );
+};
+`;
+}
 function splitPanel(ctx) {
+    const stage = stageOf(ctx);
     return `${HEADER(ctx.beatId, "split-panel", ctx.description)}
 
 import React from "react";
-import { CinematicScene, Layer, color, font, radius, panelShadow, E } from "@openvidstudio/core";
+import { CinematicScene, Layer, color, radius, panelShadow, monoStack, uiStack, E } from "@openvidstudio/core";
 
-const MONO = \`"\${font.mono}", ui-monospace, monospace\`;
-const UI = \`"\${font.ui}", system-ui, sans-serif\`;
 
 export const ${ctx.componentName}: React.FC = () => {
   return (
     <CinematicScene
-${GENTLE_CAMERA(ctx.durationFrames)}
+${GENTLE_CAMERA(stage, ctx.durationFrames)}
     >
-${SAFE_WRAP(`          <div style={{ display: "flex", alignItems: "center", gap: 72, width: "100%" }}>
-            <div style={{ display: "flex", flexDirection: "column", gap: 20, flex: "0 0 560px" }}>
-              <span style={{ fontFamily: MONO, fontSize: 20, letterSpacing: 4, textTransform: "uppercase", color: color.accent }}>
+${SAFE_WRAP(stage, `          <div style={{ display: "flex", ${stage.portrait ? 'flexDirection: "column", ' : ""}alignItems: "center", gap: ${stage.portrait ? 48 : 72}, width: "100%" }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: 20, flex: "${stage.portrait ? "0 0 auto" : "0 0 560px"}"${stage.portrait ? ", width: \"100%\"" : ""} }}>
+              <span style={{ fontFamily: monoStack(), fontSize: 20, letterSpacing: 4, textTransform: "uppercase", color: color.accent }}>
                 ${esc(ctx.beatId.replace(/[-_]/g, " "))}
               </span>
-              <h2 style={{ margin: 0, fontFamily: MONO, fontSize: 60, fontWeight: 700, lineHeight: 1.1, color: color.textPrimary }}>
+              <h2 style={{ margin: 0, fontFamily: monoStack(), fontSize: 60, fontWeight: 700, lineHeight: 1.1, color: color.textPrimary }}>
                 ${headline(ctx)}
               </h2>
-              <p style={{ margin: 0, fontFamily: UI, fontSize: 26, lineHeight: 1.5, color: color.textSecondary }}>
+              <p style={{ margin: 0, fontFamily: uiStack(), fontSize: 26, lineHeight: 1.5, color: color.textSecondary }}>
                 ${leadLine(ctx, 150)}
               </p>
             </div>
             <div
               style={{
-                flex: 1,
+                flex: 1,${stage.portrait ? "\n                width: \"100%\"," : ""}
                 minHeight: 460,
                 borderRadius: radius.window,
                 background: "#10141D",
                 border: \`1px solid \${color.panelBorder}\`,
                 boxShadow: panelShadow(true),
                 padding: 30,
-                fontFamily: UI,
+                fontFamily: uiStack(),
                 fontSize: 24,
                 color: color.textSecondary,
               }}
@@ -244,6 +507,7 @@ ${SAFE_WRAP(`          <div style={{ display: "flex", alignItems: "center", gap:
 `;
 }
 function checklist(ctx) {
+    const stage = stageOf(ctx);
     const step = Math.max(20, Math.floor(ctx.durationFrames / 6));
     return `${HEADER(ctx.beatId, "checklist", ctx.description)}
 
@@ -253,11 +517,11 @@ import { CinematicScene, Layer, ChecklistPanel, E } from "@openvidstudio/core";
 export const ${ctx.componentName}: React.FC = () => {
   return (
     <CinematicScene
-${GENTLE_CAMERA(ctx.durationFrames)}
+${GENTLE_CAMERA(stage, ctx.durationFrames)}
     >
-${SAFE_WRAP(`          <ChecklistPanel
+${SAFE_WRAP(stage, `          <ChecklistPanel
             title="${headline(ctx)}"
-            width={860}
+            width={${fitW(stage, 860)}}
             fontSize={27}
             items={[
               { label: "First item", flipAt: ${step} },
@@ -272,23 +536,23 @@ ${SAFE_WRAP(`          <ChecklistPanel
 `;
 }
 function stat(ctx) {
+    const stage = stageOf(ctx);
     return `${HEADER(ctx.beatId, "stat", ctx.description)}
 
 import React from "react";
-import { CinematicScene, Layer, color, font, glow, E } from "@openvidstudio/core";
+import { CinematicScene, Layer, color, glow, monoStack, E } from "@openvidstudio/core";
 
-const MONO = \`"\${font.mono}", ui-monospace, monospace\`;
 
 export const ${ctx.componentName}: React.FC = () => {
   return (
     <CinematicScene
-${GENTLE_CAMERA(ctx.durationFrames, 1.06, 1.18)}
+${GENTLE_CAMERA(stage, ctx.durationFrames, 1.06, 1.18)}
     >
-${SAFE_WRAP(`          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 24 }}>
-            <span style={{ fontFamily: MONO, fontSize: 190, fontWeight: 700, lineHeight: 1, color: color.accent, ...glow(color.accent, 0.8) }}>
+${SAFE_WRAP(stage, `          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 24 }}>
+            <span style={{ fontFamily: monoStack(), fontSize: 190, fontWeight: 700, lineHeight: 1, color: color.accent, ...glow(color.accent, 0.8) }}>
               0
             </span>
-            <span style={{ fontFamily: MONO, fontSize: 34, color: color.textSecondary, textAlign: "center", maxWidth: 900 }}>
+            <span style={{ fontFamily: monoStack(), fontSize: 34, color: color.textSecondary, textAlign: "center", maxWidth: ${fitW(stage, 900)} }}>
               ${headline(ctx)}
             </span>
           </div>`)}
@@ -298,6 +562,7 @@ ${SAFE_WRAP(`          <div style={{ display: "flex", flexDirection: "column", a
 `;
 }
 function code(ctx) {
+    const stage = stageOf(ctx);
     return `${HEADER(ctx.beatId, "code", ctx.description)}
 
 import React from "react";
@@ -306,11 +571,11 @@ import { CinematicScene, Layer, CodePanel, E } from "@openvidstudio/core";
 export const ${ctx.componentName}: React.FC = () => {
   return (
     <CinematicScene
-${GENTLE_CAMERA(ctx.durationFrames)}
+${GENTLE_CAMERA(stage, ctx.durationFrames)}
     >
-${SAFE_WRAP(`          <CodePanel
+${SAFE_WRAP(stage, `          <CodePanel
             title="${esc(ctx.beatId)}"
-            width={1000}
+            width={${fitW(stage, 1000)}}
             height={560}
             fontSize={24}
             highlight={[1]}
@@ -326,13 +591,12 @@ ${SAFE_WRAP(`          <CodePanel
 `;
 }
 function comparison(ctx) {
+    const stage = stageOf(ctx);
     return `${HEADER(ctx.beatId, "comparison", ctx.description)}
 
 import React from "react";
-import { CinematicScene, Layer, color, font, radius, panelShadow, E } from "@openvidstudio/core";
+import { CinematicScene, Layer, color, radius, panelShadow, monoStack, uiStack, E } from "@openvidstudio/core";
 
-const MONO = \`"\${font.mono}", ui-monospace, monospace\`;
-const UI = \`"\${font.ui}", system-ui, sans-serif\`;
 
 const Side: React.FC<{ tag: string; title: string; accent: string; body: string }> = ({
   tag, title, accent, body,
@@ -350,18 +614,18 @@ const Side: React.FC<{ tag: string; title: string; accent: string; body: string
       gap: 16,
     }}
   >
-    <span style={{ fontFamily: MONO, fontSize: 20, color: accent }}>{tag}</span>
-    <span style={{ fontFamily: MONO, fontSize: 34, color: color.textPrimary }}>{title}</span>
-    <span style={{ fontFamily: UI, fontSize: 24, lineHeight: 1.45, color: color.textSecondary }}>{body}</span>
+    <span style={{ fontFamily: monoStack(), fontSize: 20, color: accent }}>{tag}</span>
+    <span style={{ fontFamily: monoStack(), fontSize: 34, color: color.textPrimary }}>{title}</span>
+    <span style={{ fontFamily: uiStack(), fontSize: 24, lineHeight: 1.45, color: color.textSecondary }}>{body}</span>
   </div>
 );
 
 export const ${ctx.componentName}: React.FC = () => {
   return (
     <CinematicScene
-${GENTLE_CAMERA(ctx.durationFrames)}
+${GENTLE_CAMERA(stage, ctx.durationFrames)}
     >
-${SAFE_WRAP(`          <div style={{ display: "flex", gap: 44, width: "100%", alignItems: "stretch" }}>
+${SAFE_WRAP(stage, `          <div style={{ display: "flex", ${stage.portrait ? 'flexDirection: "column", ' : ""}gap: ${stage.portrait ? 32 : 44}, width: "100%", alignItems: "stretch" }}>
             <Side tag="option one" title="Replace me" accent={color.danger} body="Replace with the first option" />
             <Side tag="option two" title="Replace me" accent={color.accent} body="${leadLine(ctx, 110)}" />
           </div>`)}
@@ -371,20 +635,27 @@ ${SAFE_WRAP(`          <div style={{ display: "flex", gap: 44, width: "100%", al
 `;
 }
 function cta(ctx) {
+    const owner = ctx.repo?.owner ?? "your-org";
+    const name = ctx.repo?.name ?? "your-repo";
+    const chips = [ctx.repo?.language ?? "code", ctx.repo?.license ?? "source available"];
     return `${HEADER(ctx.beatId, "cta", ctx.description)}
 //
 // RepoCta ships without a star action by default, per OVERVIEW.md.
-
+${ctx.repo && !ctx.repo.isFallback
+        ? "//\n// owner/name/chips read from the real git remote (or package.json's \"repository\" field) and\n" +
+            "// package.json's \"license\" field -- re-run scaffold_scene with overwrite: true if either changes.\n"
+        : "//\n// No git remote or package.json \"repository\" field found, so this still ships the your-org/\n" +
+            "// your-repo placeholders. Fix package.json or the remote, then re-run with overwrite: true.\n"}
 import React from "react";
 import { RepoCta } from "@openvidstudio/core";
 
 export const ${ctx.componentName}: React.FC = () => {
   return (
     <RepoCta
-      owner="your-org"
-      name="your-repo"
+      owner="${owner}"
+      name="${name}"
       description="${leadLine(ctx, 110)}"
-      chips={["open source", "MIT"]}
+      chips={${JSON.stringify(chips)}}
       titleText="${headline(ctx)}"
       durationInFrames={${ctx.durationFrames}}
     />
@@ -393,24 +664,23 @@ export const ${ctx.componentName}: React.FC = () => {
 `;
 }
 function title(ctx) {
+    const stage = stageOf(ctx);
     return `${HEADER(ctx.beatId, "title", ctx.description)}
 
 import React from "react";
-import { CinematicScene, Layer, color, font, E } from "@openvidstudio/core";
+import { CinematicScene, Layer, color, monoStack, uiStack, E } from "@openvidstudio/core";
 
-const MONO = \`"\${font.mono}", ui-monospace, monospace\`;
-const UI = \`"\${font.ui}", system-ui, sans-serif\`;
 
 export const ${ctx.componentName}: React.FC = () => {
   return (
     <CinematicScene
-${GENTLE_CAMERA(ctx.durationFrames, 1.05, 1.17)}
+${GENTLE_CAMERA(stage, ctx.durationFrames, 1.05, 1.17)}
     >
-${SAFE_WRAP(`          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 28, textAlign: "center" }}>
-            <h2 style={{ margin: 0, fontFamily: MONO, fontSize: 72, fontWeight: 700, lineHeight: 1.1, color: color.textPrimary, maxWidth: 1300 }}>
+${SAFE_WRAP(stage, `          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 28, textAlign: "center" }}>
+            <h2 style={{ margin: 0, fontFamily: monoStack(), fontSize: 72, fontWeight: 700, lineHeight: 1.1, color: color.textPrimary, maxWidth: ${fitW(stage, 1300)} }}>
               ${headline(ctx)}
             </h2>
-            <p style={{ margin: 0, fontFamily: UI, fontSize: 30, lineHeight: 1.5, color: color.textSecondary, maxWidth: 1000 }}>
+            <p style={{ margin: 0, fontFamily: uiStack(), fontSize: 30, lineHeight: 1.5, color: color.textSecondary, maxWidth: ${fitW(stage, 1000)} }}>
               ${leadLine(ctx, 160)}
             </p>
           </div>`)}
@@ -435,6 +705,10 @@ function pickTemplate(kind, description) {
         return "browser-capture";
     if (kind === "real-recording" || kind === "higgsfield-clip")
         return "recording";
+    if (kind === "terminal-cast")
+        return "terminal-cast";
+    if (kind === "existing-asset")
+        return "existing-asset";
     for (const [re, name] of KEYWORDS) {
         if (re.test(description))
             return name;
@@ -449,6 +723,10 @@ function renderTemplate(template, ctx, kind) {
             return recording(ctx, kind === "higgsfield-clip");
         case "terminal":
             return terminal(ctx);
+        case "terminal-cast":
+            return terminalCast(ctx);
+        case "existing-asset":
+            return existingAsset(ctx);
         case "split-panel":
             return splitPanel(ctx);
         case "checklist":