@vosjs/cli 0.14.0 → 0.16.0

package/dist/{chunk-MMKDYE57.js → chunk-PKHORUJ2.js}

@@ -2359,8 +2359,13 @@ function parseTranscript(raw) {
 
 // src/plugin/framesTake.ts
 var VIDEO_TOKEN = "__VOILA_CLI_VIDEO__";
+function stillSupersample(w, h) {
+  return Math.min(3, Math.max(1, Math.ceil(1800 / Math.max(1, w, h))));
+}
 async function stillsInPage(opts) {
   const w = window;
+  const RW = opts.W * opts.ss;
+  const RH = opts.H * opts.ss;
   try {
     const vblob = await (await fetch(opts.videoUrl)).blob();
     const vurl = URL.createObjectURL(vblob);
@@ -2377,11 +2382,11 @@ async function stillsInPage(opts) {
       THREE: w.__THREE__,
       gsap: w.__gsap__,
       resolution: {
-        width: opts.W,
-        height: opts.H,
+        width: RW,
+        height: RH,
         pixelRatio: 1,
-        drawingBufferWidth: opts.W,
-        drawingBufferHeight: opts.H
+        drawingBufferWidth: RW,
+        drawingBufferHeight: RH
       },
       preserveDrawingBuffer: true
     };
@@ -2391,32 +2396,44 @@ async function stillsInPage(opts) {
     timeline.pause();
     timeline.seek(0, false);
     const canvas = document.querySelector("canvas");
-    canvas.width = opts.W;
-    canvas.height = opts.H;
-    canvas.style.width = opts.W + "px";
-    canvas.style.height = opts.H + "px";
+    canvas.width = RW;
+    canvas.height = RH;
+    canvas.style.width = RW + "px";
+    canvas.style.height = RH + "px";
+    const out = document.createElement("canvas");
+    out.width = opts.W;
+    out.height = opts.H;
     const raf = () => new Promise((r) => requestAnimationFrame(r));
     const wvr = () => w.__vos__?.waitForVideosReady ? w.__vos__.waitForVideosReady() : null;
     const pending = () => w.__vos__?.pendingDecodes?.size ?? 0;
-    const toPng = () => new Promise(
-      (res, rej) => canvas.toBlob(
+    const toPng = () => new Promise((res, rej) => {
+      let src = canvas;
+      if (opts.ss > 1) {
+        const g = out.getContext("2d");
+        g.imageSmoothingEnabled = true;
+        g.imageSmoothingQuality = "high";
+        g.clearRect(0, 0, opts.W, opts.H);
+        g.drawImage(canvas, 0, 0, opts.W, opts.H);
+        src = out;
+      }
+      src.toBlob(
         (b) => b ? res(b) : rej(new Error("toBlob failed")),
         "image/png"
-      )
-    );
+      );
+    });
     const collectVideos = () => {
-      const out = /* @__PURE__ */ new Set();
+      const out2 = /* @__PURE__ */ new Set();
       const cache = w.__vos__?.videoCache;
       if (cache) {
         const vals = cache instanceof Map ? [...cache.values()] : Object.values(cache);
         for (const v of vals) {
-          if (v?.tagName === "VIDEO") out.add(v);
-          else if (v?.el?.tagName === "VIDEO") out.add(v.el);
-          else if (v?.video?.tagName === "VIDEO") out.add(v.video);
+          if (v?.tagName === "VIDEO") out2.add(v);
+          else if (v?.el?.tagName === "VIDEO") out2.add(v.el);
+          else if (v?.video?.tagName === "VIDEO") out2.add(v.video);
         }
       }
-      document.querySelectorAll("video").forEach((v) => out.add(v));
-      return [...out];
+      document.querySelectorAll("video").forEach((v) => out2.add(v));
+      return [...out2];
     };
     const videosSettled = () => collectVideos().every((v) => !v.seeking && v.readyState >= 2);
     const waitVideosSettled = async (maxMs) => {
@@ -2502,7 +2519,10 @@ async function framesTake(browser, dir, opts) {
   const server = await startTakeServer(dir, {
     "/render.html": renderPageHtml()
   });
-  const context = await browser.newContext({ viewport: { width, height } });
+  const ss = stillSupersample(width, height);
+  const context = await browser.newContext({
+    viewport: { width: width * ss, height: height * ss }
+  });
   try {
     const page = await context.newPage();
     page.on("console", (m) => {
@@ -2522,6 +2542,7 @@ async function framesTake(browser, dir, opts) {
       videoUrl: `/${RECORDING_NAME}`,
       W: width,
       H: height,
+      ss,
       shots: named.map(({ time, name }) => ({ time, name }))
     }).catch(() => {
     });
@@ -2592,14 +2613,7 @@ async function writeIndexJson(result) {
 }
 
 // src/plugin/deliver.ts
-import {
-  mkdir as mkdir4,
-  mkdtemp,
-  rename as rename4,
-  rm as rm3,
-  stat,
-  writeFile as writeFile6
-} from "fs/promises";
+import { mkdir as mkdir4, mkdtemp, rename as rename4, rm as rm3, stat, writeFile as writeFile6 } from "fs/promises";
 import { tmpdir } from "os";
 import { join as join5, relative, resolve as resolve3 } from "path";
 import { totalDuration } from "@vosjs/timeline";
@@ -2720,6 +2734,8 @@ async function renderTake(browser, dir, outFile, opts) {
 import { compileVosConfig as compileVosConfig3 } from "@vosjs/core";
 async function posterStillInPage(opts) {
   const w = window;
+  const RW = opts.W * opts.ss;
+  const RH = opts.H * opts.ss;
   try {
     const mod = await import(
       /* @vite-ignore */
@@ -2733,11 +2749,11 @@ async function posterStillInPage(opts) {
       THREE: w.__THREE__,
       gsap: w.__gsap__,
       resolution: {
-        width: opts.W,
-        height: opts.H,
+        width: RW,
+        height: RH,
         pixelRatio: 1,
-        drawingBufferWidth: opts.W,
-        drawingBufferHeight: opts.H
+        drawingBufferWidth: RW,
+        drawingBufferHeight: RH
       },
       preserveDrawingBuffer: true
     };
@@ -2747,16 +2763,27 @@ async function posterStillInPage(opts) {
     timeline.pause();
     timeline.seek(opts.time, false);
     const canvas = document.querySelector("canvas");
-    canvas.width = opts.W;
-    canvas.height = opts.H;
-    canvas.style.width = opts.W + "px";
-    canvas.style.height = opts.H + "px";
+    canvas.width = RW;
+    canvas.height = RH;
+    canvas.style.width = RW + "px";
+    canvas.style.height = RH + "px";
     const raf = () => new Promise((r) => requestAnimationFrame(r));
     await raf();
     await raf();
     await raf();
+    let src = canvas;
+    if (opts.ss > 1) {
+      const out = document.createElement("canvas");
+      out.width = opts.W;
+      out.height = opts.H;
+      const g = out.getContext("2d");
+      g.imageSmoothingEnabled = true;
+      g.imageSmoothingQuality = "high";
+      g.drawImage(canvas, 0, 0, opts.W, opts.H);
+      src = out;
+    }
     const png = await new Promise(
-      (res) => canvas.toBlob((b) => res(b), "image/png")
+      (res) => src.toBlob((b) => res(b), "image/png")
     );
     if (!png) throw new Error("toBlob returned null");
     await fetch("/save?name=" + opts.outName, { method: "POST", body: png });
@@ -2774,8 +2801,9 @@ async function renderPosterStills(browser, config, serveDir, shots, time) {
   });
   try {
     for (const shot of shots) {
+      const ss = stillSupersample(shot.width, shot.height);
       const context = await browser.newContext({
-        viewport: { width: shot.width, height: shot.height }
+        viewport: { width: shot.width * ss, height: shot.height * ss }
       });
       try {
         const page = await context.newPage();
@@ -2794,6 +2822,7 @@ async function renderPosterStills(browser, config, serveDir, shots, time) {
           animationCode,
           W: shot.width,
           H: shot.height,
+          ss,
           time,
           outName: shot.name
         }).catch(() => {
@@ -3325,7 +3354,8 @@ function blurPlane(src, w, h, r, passes = 3) {
     for (let y = 0; y < h; y++) {
       let acc = 0;
       const row = y * w;
-      for (let x = -r; x <= r; x++) acc += src[row + Math.min(w - 1, Math.max(0, x))];
+      for (let x = -r; x <= r; x++)
+        acc += src[row + Math.min(w - 1, Math.max(0, x))];
       for (let x = 0; x < w; x++) {
         tmp[row + x] = acc / (2 * r + 1);
         const add = src[row + Math.min(w - 1, x + r + 1)];
@@ -3335,7 +3365,8 @@ function blurPlane(src, w, h, r, passes = 3) {
     }
     for (let x = 0; x < w; x++) {
       let acc = 0;
-      for (let y = -r; y <= r; y++) acc += tmp[Math.min(h - 1, Math.max(0, y)) * w + x];
+      for (let y = -r; y <= r; y++)
+        acc += tmp[Math.min(h - 1, Math.max(0, y)) * w + x];
       for (let y = 0; y < h; y++) {
         src[y * w + x] = acc / (2 * r + 1);
         const add = tmp[Math.min(h - 1, y + r + 1) * w + x];
@@ -3351,7 +3382,8 @@ function roundedCoverage(x, y, rect, r) {
     for (const dx of [0.25, 0.75]) {
       const px = x + dx;
       const py = y + dy;
-      if (px < rect.x || py < rect.y || px > rect.x + rect.w || py > rect.y + rect.h) continue;
+      if (px < rect.x || py < rect.y || px > rect.x + rect.w || py > rect.y + rect.h)
+        continue;
       const cx = Math.min(Math.max(px, rect.x + r), rect.x + rect.w - r);
       const cy = Math.min(Math.max(py, rect.y + r), rect.y + rect.h - r);
       if ((px - cx) ** 2 + (py - cy) ** 2 <= r * r) inside++;
@@ -3362,24 +3394,34 @@ function roundedCoverage(x, y, rect, r) {
 function bakeShot(shot, opts = {}) {
   const margin = Math.round(shot.w * (opts.margin ?? 0.06));
   const radius = shot.w * (opts.radius ?? 0.014);
-  const shadowA = opts.shadow ?? 0.38;
-  const blur = Math.round(shot.w * (opts.blur ?? 0.03));
-  const offsetY = Math.round(shot.w * (opts.offsetY ?? 0.012));
+  const shadowA = opts.shadow ?? 0.3;
+  const blur = Math.round(shot.w * (opts.blur ?? 0.05));
+  const offsetY = Math.round(shot.w * (opts.offsetY ?? 0.02));
   const hair = opts.hairline ?? 0;
   const w = shot.w + margin * 2;
   const h = shot.h + margin * 2;
   const out = new Uint8Array(w * h * 4);
   const rect = { x: margin, y: margin, w: shot.w, h: shot.h };
   if (shadowA > 0) {
-    const mask = new Float32Array(w * h);
-    for (let y = 0; y < h; y++)
-      for (let x = 0; x < w; x++) {
-        const c = roundedCoverage(x, y - offsetY, rect, radius);
-        if (c > 0) mask[y * w + x] = c;
-      }
-    blurPlane(mask, w, h, Math.max(1, Math.round(blur / 2)));
+    const layers = [
+      [Math.max(1, Math.round(blur / 4)), Math.round(offsetY / 5), 0.4],
+      [blur, offsetY, 0.6]
+    ];
+    const acc = new Float32Array(w * h);
+    for (const [lb, lo, share] of layers) {
+      const mask = new Float32Array(w * h);
+      for (let y = 0; y < h; y++)
+        for (let x = 0; x < w; x++) {
+          const c = roundedCoverage(x, y - lo, rect, radius);
+          if (c > 0) mask[y * w + x] = c;
+        }
+      blurPlane(mask, w, h, Math.max(1, Math.round(lb / 2)));
+      const a = shadowA * share;
+      for (let i = 0; i < w * h; i++)
+        acc[i] = 1 - (1 - acc[i]) * (1 - mask[i] * a);
+    }
     for (let i = 0; i < w * h; i++) {
-      const a = mask[i] * shadowA;
+      const a = acc[i];
       if (a <= 2e-3) continue;
       out[i * 4] = 0;
       out[i * 4 + 1] = 0;
@@ -3399,7 +3441,12 @@ function bakeShot(shot, opts = {}) {
       let g = shot.data[si + 1];
       let b = shot.data[si + 2];
       if (hair > 0) {
-        const edge = Math.min(x - rect.x, rect.x + rect.w - x, y - rect.y, rect.y + rect.h - y);
+        const edge = Math.min(
+          x - rect.x,
+          rect.x + rect.w - x,
+          y - rect.y,
+          rect.y + rect.h - y
+        );
         if (edge < 1.5) {
           r = Math.round(r * (1 - hair));
           g = Math.round(g * (1 - hair));
@@ -3924,12 +3971,18 @@ var rgb = (hex2) => {
   const n = parseInt(m[1], 16);
   return [n >> 16 & 255, n >> 8 & 255, n & 255];
 };
-var toHex = (c) => "#" + c.map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0")).join("");
+var toHex = (c) => "#" + c.map(
+  (v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0")
+).join("");
 function mixHex(a, b, t) {
   const pa = rgb(a);
   const pb = rgb(b);
   if (!pa || !pb) return a;
-  return toHex([pa[0] + (pb[0] - pa[0]) * t, pa[1] + (pb[1] - pa[1]) * t, pa[2] + (pb[2] - pa[2]) * t]);
+  return toHex([
+    pa[0] + (pb[0] - pa[0]) * t,
+    pa[1] + (pb[1] - pa[1]) * t,
+    pa[2] + (pb[2] - pa[2]) * t
+  ]);
 }
 function rgba(hex2, alpha) {
   const c = rgb(hex2) ?? [255, 255, 255];
@@ -3945,12 +3998,14 @@ function resolveFace(family, weights) {
   const first = family.split(",")[0].replace(/['"]/g, "").replace(/\s+variable$/i, "").trim();
   const entry = findFontFamily2(first);
   if (!entry) return null;
-  const fonts = [...new Set(weights.map((w) => nearestFontWeight(entry, w)))].map((w) => ({
+  const fonts = [
+    ...new Set(weights.map((w) => nearestFontWeight(entry, w)))
+  ].map((w) => ({
     family: entry.family,
     url: fontFaceUrl(entry.slug, w),
     weight: w
   }));
-  return { stack: fontStack(entry), fonts };
+  return { stack: fontStack(entry), category: entry.category, fonts };
 }
 function posterValues(brand, words) {
   const b = brand ?? {};
@@ -3973,7 +4028,11 @@ function posterValues(brand, words) {
   if (bgA) values.grain = lightGround ? 10 : 22;
   if (accent) values.blobA = rgba(accent, lightGround ? 0.28 : 0.4);
   if (bgC) values.blobB = rgba(bgC, 0.75);
-  if (accent) values.blobC = rgba(mixHex(accent, "#ffffff", 0.55), lightGround ? 0.35 : 0.25);
+  if (accent)
+    values.blobC = rgba(
+      mixHex(accent, "#ffffff", 0.55),
+      lightGround ? 0.35 : 0.25
+    );
   if (wordmark) values.brand = wordmark;
   const headline = (words.headline ?? "").trim();
   if (headline) values.headline = headline;
@@ -3993,6 +4052,224 @@ function posterValues(brand, words) {
   return { values, fonts, lightGround };
 }
 
+// src/plugin/stages.ts
+var str = (v, fallback) => typeof v === "string" && v.trim() ? v.trim() : fallback;
+var firstFamily = (stack) => stack.split(",")[0].replace(/['"]/g, "").trim();
+function stageSplitCover(input) {
+  const R = input.size.w / Math.max(1, input.size.h);
+  const portrait = R < 0.87;
+  const square = !portrait && R <= 1.15;
+  const v = input.values;
+  const ground = `linear-gradient(135deg, ${str(v.bgA, "#8a3d2a")}, ${str(v.bgC, str(v.bgB, "#5c5a2e"))})`;
+  const ink = str(v.ink, "#fff6ec");
+  const inkSoft = str(v.inkSoft, ink);
+  const display = firstFamily(str(v.fontDisplay, "Lexend"));
+  const body = firstFamily(str(v.fontBody, "Lexend"));
+  const headline = str(v.headline, "");
+  const kicker = str(v.kicker, "");
+  const brand = str(v.brand, "");
+  const inset = portrait ? { left: 0.08, right: -0.08, top: 0.44, bottom: -0.1 } : square ? { left: 0.1, right: -0.1, top: 0.5, bottom: -0.12 } : { left: 0.44, right: -0.06, top: 0.3, bottom: -0.12 };
+  const shot = {
+    x: inset.left,
+    y: inset.top,
+    w: 1 - inset.left - inset.right,
+    h: 1 - inset.top - inset.bottom
+  };
+  const set = [
+    `frame.background=${JSON.stringify(ground)}`,
+    "frame.backgroundMedia=null",
+    "frame.fit=cover",
+    `frame.inset=${JSON.stringify(inset)}`,
+    'frame.focus={"cx":0,"cy":0}',
+    "frame.radius=16",
+    "frame.shadow=0.5",
+    "frame.shadowContact=0",
+    "frame.border=0",
+    "zoom=[]",
+    `tilt=[{"id":"stage","in":0,"out":${input.sourceSeconds.toFixed(3)},"rx":3,"ry":${portrait || square ? 0 : 10}}]`,
+    "cursor.visible=false",
+    "cursor.clickFx.style=none"
+  ];
+  const designW = 1080 * input.size.w / input.size.h;
+  const boxes = [];
+  const clips = [];
+  const column = portrait || square ? 0.84 : 0.36;
+  const left = portrait || square ? 0.08 : 0.07;
+  const size = portrait ? 60 : square ? 68 : 84;
+  const word = (id, text, preset, family, px, y, color, extra, role) => {
+    if (!text) return;
+    const lines = text.split("\n");
+    const longest = Math.max(...lines.map((l) => l.length));
+    const widest = Math.min(
+      column,
+      longest * px * (preset === "title" ? 0.5 : 0.62) / designW
+    );
+    const lh = preset === "title" ? 1.05 : 1.2;
+    const h = lines.length * px * lh / 1080;
+    clips.push({
+      id,
+      kind: "text",
+      text,
+      preset,
+      family,
+      size: px,
+      color,
+      align: "left",
+      maxWidth: column,
+      lineHeight: lh,
+      transform: { x: left + widest / 2, y, scale: 1, rotation: 0 },
+      // Words on the ground carry no footage shadow: a drop shadow under a
+      // headline on a plate is the old-web tell.
+      shadow: 0,
+      start: 0,
+      duration: +input.outputSeconds.toFixed(3),
+      enter: "none",
+      exit: "none",
+      ...extra
+    });
+    boxes.push({
+      x: left,
+      y: y - h / 2,
+      w: widest,
+      h,
+      color,
+      role,
+      label: text.length > 24 ? `${text.slice(0, 24)}\u2026` : text
+    });
+  };
+  const kickerY = portrait ? 0.1 : square ? 0.12 : 0.24;
+  const titleY = portrait ? 0.24 : square ? 0.28 : 0.46;
+  const brandY = portrait ? 0.94 : square ? 0.94 : 0.86;
+  word(
+    "stage-kicker",
+    kicker,
+    "label",
+    "JetBrains Mono",
+    19,
+    kickerY,
+    inkSoft,
+    { letterSpacing: 6, weight: 400 },
+    "body"
+  );
+  word(
+    "stage-title",
+    headline,
+    "title",
+    display,
+    size,
+    titleY,
+    ink,
+    { weight: 600, letterSpacing: -Math.round(size * 0.02) },
+    "headline"
+  );
+  word(
+    "stage-brand",
+    brand,
+    "label",
+    body,
+    25,
+    brandY,
+    ink,
+    { weight: 700, letterSpacing: 1 },
+    "body"
+  );
+  set.push(`overlays=${JSON.stringify(clips)}`);
+  return { set, text: boxes, shot };
+}
+var TILE_MAX_PX = 700;
+function isTileSize(size) {
+  return Math.max(size.w, size.h) < TILE_MAX_PX;
+}
+function stageTile(input) {
+  const R = input.size.w / Math.max(1, input.size.h);
+  const square = R <= 1.15;
+  const v = input.values;
+  const ground = `linear-gradient(135deg, ${str(v.bgA, "#8a3d2a")}, ${str(v.bgC, str(v.bgB, "#5c5a2e"))})`;
+  const ink = str(v.ink, "#fff6ec");
+  const display = firstFamily(str(v.fontDisplay, "Lexend"));
+  const headline = str(v.headline, "") || str(v.brand, "Release");
+  const wordless = input.text === "none";
+  const aspect = input.footageAspect && input.footageAspect > 0 ? input.footageAspect : 16 / 9;
+  const left = square ? 0.08 : 0.07;
+  const top = wordless ? square ? 0.1 : 0.12 : square ? 0.42 : 0.47;
+  const visible = wordless ? square ? 0.66 : 0.8 : square ? 0.56 : 0.62;
+  const cardW = (1 - left) / visible;
+  const cardH = cardW * R / aspect;
+  const inset = {
+    left,
+    right: +(1 - left - cardW).toFixed(4),
+    top,
+    bottom: +(1 - top - cardH).toFixed(4)
+  };
+  const shot = {
+    x: inset.left,
+    y: inset.top,
+    w: 1 - inset.left - inset.right,
+    h: 1 - inset.top - inset.bottom
+  };
+  const set = [
+    `frame.background=${JSON.stringify(ground)}`,
+    "frame.backgroundMedia=null",
+    "frame.fit=cover",
+    `frame.inset=${JSON.stringify(inset)}`,
+    'frame.focus={"cx":0,"cy":0}',
+    "frame.radius=24",
+    "frame.shadow=0.5",
+    "frame.shadowContact=0",
+    "frame.border=0",
+    "zoom=[]",
+    "tilt=[]",
+    "cursor.visible=false",
+    "cursor.clickFx.style=none"
+  ];
+  const designW = 1080 * input.size.w / input.size.h;
+  const column = square ? 0.84 : 0.86;
+  const px = square ? 96 : 108;
+  const lines = headline.split("\n");
+  const longest = Math.max(...lines.map((l) => l.length));
+  const widest = Math.min(column, longest * px * 0.5 / designW);
+  const lh = 1.05;
+  const h = lines.length * px * lh / 1080;
+  const y = square ? 0.2 : 0.24;
+  const clip = {
+    id: "stage-title",
+    kind: "text",
+    text: headline,
+    preset: "title",
+    family: display,
+    size: px,
+    color: ink,
+    align: "left",
+    maxWidth: column,
+    lineHeight: lh,
+    weight: 600,
+    letterSpacing: -Math.round(px * 0.02),
+    transform: { x: left + widest / 2, y, scale: 1, rotation: 0 },
+    shadow: 0,
+    start: 0,
+    duration: +input.outputSeconds.toFixed(3),
+    enter: "none",
+    exit: "none"
+  };
+  if (wordless) {
+    set.push("overlays=[]");
+    return { set, text: [], shot };
+  }
+  set.push(`overlays=${JSON.stringify([clip])}`);
+  const text = [
+    {
+      x: left,
+      y: y - h / 2,
+      w: widest,
+      h,
+      color: ink,
+      role: "headline",
+      label: headline.length > 24 ? `${headline.slice(0, 24)}\u2026` : headline
+    }
+  ];
+  return { set, text, shot };
+}
+
 // src/plugin/motionPlan.ts
 import { ratedSegments as ratedSegments4, spanOutputExtent as spanOutputExtent4 } from "@vosjs/studio-core";
 var SOUND_DESTINATIONS = /* @__PURE__ */ new Set([
@@ -4208,6 +4485,10 @@ function templateForCard(d, opts) {
   if (opts.poster === null) return null;
   if (opts.poster) return { config: opts.poster.config, from: opts.poster.from };
   if (!d.template) return null;
+  if (isTileSize(d.px)) {
+    const config2 = templateByName(d.template) ?? templateByName("card-on-gradient");
+    if (config2) return { config: config2, from: "stage tile", stage: "tile" };
+  }
   let name = d.template;
   let note;
   const wants = templateOf(templateByName(name) ?? {});
@@ -4218,6 +4499,8 @@ function templateForCard(d, opts) {
   }
   const config = templateByName(name);
   if (!config) return null;
+  if (name === "split-cover")
+    return { config, from: "stage split-cover", note, stage: "split-cover" };
   return { config, from: `template ${name}`, note };
 }
 function lookOverrides(look, placement, size, video, opts) {
@@ -4238,7 +4521,12 @@ function lookOverrides(look, placement, size, video, opts) {
   }
   if (!opts.keepMedia) set.push("frame.backgroundMedia=null");
   if (opts.still) {
-    set.push("zoom=[]", "tilt=[]", "cursor.visible=false", "cursor.clickFx.style=none");
+    set.push(
+      "zoom=[]",
+      "tilt=[]",
+      "cursor.visible=false",
+      "cursor.clickFx.style=none"
+    );
   }
   return set;
 }
@@ -4410,9 +4698,14 @@ async function deliverTake(browser, dir, opts) {
     if (!set.length) return opts.overrides;
     return { ...opts.overrides, set };
   };
-  const cardPlans = destinations.filter((d) => d.kind !== "video" && d.genre === "card" && !NOT_FROM_FOOTAGE[d.id]).map((d) => ({ d, plan: templateForCard(d, opts) })).filter((p) => p.plan !== null);
+  const cardPlans = destinations.filter(
+    (d) => d.kind !== "video" && d.genre === "card" && !NOT_FROM_FOOTAGE[d.id]
+  ).map((d) => ({ d, plan: templateForCard(d, opts) })).filter(
+    (p) => p.plan !== null
+  );
   const posterCardIds = new Set(cardPlans.map((p) => p.d.id));
-  for (const p of cardPlans) if (p.plan.note) skipped.push(`note: ${p.plan.note}`);
+  for (const p of cardPlans)
+    if (p.plan.note) skipped.push(`note: ${p.plan.note}`);
   if (cardPlans.length) {
     const meta = doc.source.meta;
     const heroTime = opts.shotTime ?? (stillTimes.length ? stillTimes[0] : duration / 2);
@@ -4448,11 +4741,66 @@ async function deliverTake(browser, dir, opts) {
       const baked = bakeShot(raw, {
         margin: PAD,
         hairline: fill.lightGround ? 0.14 : 0,
-        shadow: fill.lightGround ? 0.32 : 0.45
+        shadow: fill.lightGround ? 0.28 : 0.4
       });
       await writeFile6(join5(serveDir, "shot.png"), encodePng(baked));
       const shotAspect = raw.w / raw.h;
       for (const { d, plan } of cardPlans) {
+        if (plan.stage) {
+          const stageInput = {
+            size: d.px,
+            values: fill.values,
+            sourceSeconds: meta.durationMs / 1e3,
+            outputSeconds: duration,
+            text: d.text,
+            footageAspect: (meta.captureWidth ?? meta.width) / (meta.captureHeight ?? meta.height)
+          };
+          const staged = plan.stage === "tile" ? stageTile(stageInput) : stageSplitCover(stageInput);
+          opts.onPhase?.(
+            `${d.channel} ${d.asset} (${specWords(d)}) from ${plan.from}`
+          );
+          const shotDir = await mkdtemp(join5(tmpdir(), "vos-stage-"));
+          try {
+            const captured = await framesTake(browser, dir, {
+              times: [heroTime],
+              width: d.px.w,
+              height: d.px.h,
+              outDir: shotDir,
+              overrides: {
+                ...opts.overrides,
+                set: [...staged.set, ...opts.overrides?.set ?? []]
+              }
+            });
+            const to2 = join5(outDir, `${d.id}.png`);
+            await rename4(captured.frames[0].file, to2);
+            const bytes2 = (await stat(to2)).size;
+            if (d.maxBytes !== void 0 && bytes2 > d.maxBytes) {
+              skipped.push(
+                `${d.channel} ${d.asset}: ${overCeiling(bytes2, d.maxBytes)} (kept at ${to2})`
+              );
+              continue;
+            }
+            assets.push({
+              channel: d.channel,
+              asset: d.asset,
+              destination: d.id,
+              path: relative(outDir, to2),
+              w: d.px.w,
+              h: d.px.h,
+              bytes: bytes2,
+              seconds: null,
+              frameTime: heroTime,
+              source: "stage",
+              template: `${plan.stage}-stage`,
+              text: staged.text,
+              shot: staged.shot,
+              ...plan.stage === "tile" ? { crop: true } : {}
+            });
+          } finally {
+            await rm3(shotDir, { recursive: true, force: true });
+          }
+          continue;
+        }
         const problems = templateProblems(plan.config);
         if (problems.length) {
           skipped.push(
@@ -4485,7 +4833,9 @@ async function deliverTake(browser, dir, opts) {
           opts.posterTime ?? posterDuration * 0.9,
           Math.max(0, posterDuration - 0.05)
         );
-        opts.onPhase?.(`${d.channel} ${d.asset} (${specWords(d)}) from ${plan.from}, ${filled.aspect}`);
+        opts.onPhase?.(
+          `${d.channel} ${d.asset} (${specWords(d)}) from ${plan.from}, ${filled.aspect}`
+        );
         await renderPosterStills(
           browser,
           config,
@@ -4677,7 +5027,8 @@ var RUBRIC = [
   "Name three ways this asset acknowledges THIS product (its data, its state, its brand), not a generic window."
 ];
 function rolesFor(asset) {
-  if (asset.source === "poster" && asset.template) return [asset.template];
+  if ((asset.source === "poster" || asset.source === "stage") && asset.template)
+    return [asset.template.replace(/-stage$/, "")];
   const spec = DESTINATIONS2.find((d) => d.id === asset.destination);
   if (spec?.kind === "video") {
     const portrait = spec.px.w < spec.px.h;
@@ -4844,9 +5195,11 @@ async function judgeKit(kitPath, manifestPath, outDir) {
   return { sheets, skipped, outDir: out, verdictFile };
 }
 function winRate(verdicts) {
-  const judged = verdicts.filter((v) => v.win !== null).length;
-  const wins = verdicts.filter((v) => v.win === true).length;
-  return { wins, judged, rate: judged ? wins / judged : null };
+  const judgedList = verdicts.filter((v) => v.win !== null || (v.reasons?.length ?? 0) > 0);
+  const wins = judgedList.filter((v) => v.win === true).length;
+  const ties = judgedList.filter((v) => v.win === null).length;
+  const judged = judgedList.length;
+  return { wins, ties, judged, rate: judged ? (wins + ties / 2) / judged : null };
 }
 
 // src/plugin/kitPicture.ts
@@ -4897,7 +5250,7 @@ function stillFindings(a, img, m) {
     const sh = Math.min(1, a.shot.y + a.shot.h) * img.h - sy;
     const rect = { x: sx, y: sy, w: Math.max(1, sw), h: Math.max(1, sh) };
     const ink = inkCoverage(img, rect);
-    if (ink < BLANK_INK) {
+    if (ink < (a.crop ? BLANK_INK / 2 : BLANK_INK)) {
       out.push({
         code: "blank",
         severity: "error",
@@ -4907,7 +5260,7 @@ function stillFindings(a, img, m) {
         bbox: rect
       });
     }
-    if (a.shot.w < 0.5 || a.shot.w > 1.2) {
+    if (!a.crop && (a.shot.w < 0.5 || a.shot.w > 1.2)) {
       out.push({
         code: "subject",
         severity: "error",
@@ -4995,7 +5348,12 @@ function stillFindings(a, img, m) {
 function textFindings(a, img) {
   const out = [];
   for (const t of a.text ?? []) {
-    const box = { x: t.x * img.w, y: t.y * img.h, w: t.w * img.w, h: t.h * img.h };
+    const box = {
+      x: t.x * img.w,
+      y: t.y * img.h,
+      w: t.w * img.w,
+      h: t.h * img.h
+    };
     const name = t.label ? `"${t.label}"` : "a text box";
     if (box.x < 0 || box.y < 0 || box.x + box.w > img.w + 0.5 || box.y + box.h > img.h + 0.5) {
       out.push({
@@ -5069,19 +5427,38 @@ function duplicateFindings(stills) {
     }
     if (g.length > 1) groups.push(g);
   }
-  return groups.map((g) => ({
-    code: "duplicate",
-    severity: g.length >= 3 ? "error" : "warning",
-    asset: g.map((s) => s.destination).join(", "),
-    message: `${g.length} assets share one frame${g[0].time !== null ? ` (${g[0].time.toFixed(2)}s)` : ""}: ${g.map((s) => s.destination).join(", ")}`,
-    fixHint: "a kit is many moments: let deliver pick from the step timeline, or pass --times with one step per still; a poster template composes each card differently from one shot"
-  }));
+  return groups.map((g) => {
+    const composed = g.every(
+      (s) => stills.find((x) => x.destination === s.destination)?.composed
+    );
+    return {
+      code: "duplicate",
+      severity: composed ? "info" : g.length >= 3 ? "error" : "warning",
+      asset: g.map((s) => s.destination).join(", "),
+      message: composed ? `${g.length} channels share one cover: ${g.map((s) => s.destination).join(", ")}` : `${g.length} assets share one frame${g[0].time !== null ? ` (${g[0].time.toFixed(2)}s)` : ""}: ${g.map((s) => s.destination).join(", ")}`,
+      fixHint: "a kit is many moments: let deliver pick from the step timeline, or pass --times with one step per still; a poster template composes each card differently from one shot"
+    };
+  });
 }
 async function videoFrame(file, at2, ffmpeg) {
   try {
     const { stdout } = await execFileP(
       ffmpeg,
-      ["-v", "error", "-ss", at2.toFixed(3), "-i", file, "-frames:v", "1", "-f", "image2pipe", "-vcodec", "png", "-"],
+      [
+        "-v",
+        "error",
+        "-ss",
+        at2.toFixed(3),
+        "-i",
+        file,
+        "-frames:v",
+        "1",
+        "-f",
+        "image2pipe",
+        "-vcodec",
+        "png",
+        "-"
+      ],
       { encoding: "buffer", maxBuffer: 64 * 1024 * 1024 }
     );
     return decodePng(new Uint8Array(stdout));
@@ -5124,7 +5501,8 @@ async function pictureChecks(assets) {
           destination: a.destination,
           hash: m.hash,
           time: null,
-          genre: a.spec?.genre
+          genre: a.spec?.genre,
+          composed: !!a.shot
         });
       continue;
     }
@@ -5143,14 +5521,19 @@ async function pictureChecks(assets) {
       }
       const seconds = a.seconds ?? 0;
       const first = await videoFrame(a.file, 0, "ffmpeg");
-      const last = await videoFrame(a.file, Math.max(0, seconds - 0.1), "ffmpeg");
+      const last = await videoFrame(
+        a.file,
+        Math.max(0, seconds - 0.1),
+        "ffmpeg"
+      );
       for (const [name, img] of [
         ["first", first],
         ["last", last]
       ]) {
         if (!img) continue;
         const m = measureStill(img);
-        if (name === "first") measured.push({ destination: a.destination, measure: m });
+        if (name === "first")
+          measured.push({ destination: a.destination, measure: m });
         const subject = m.card ?? { x: 0, y: 0, w: img.w, h: img.h };
         const ink = inkCoverage(img, subject);
         if (ink < BLANK_INK) {
@@ -5176,7 +5559,11 @@ async function pictureChecks(assets) {
     }
   }
   findings.push(...duplicateFindings(stills));
-  const order = { error: 0, warning: 1, info: 2 };
+  const order = {
+    error: 0,
+    warning: 1,
+    info: 2
+  };
   findings.sort((a, b) => order[a.severity] - order[b.severity]);
   return { findings, measured };
 }
@@ -5328,7 +5715,8 @@ async function validateKit(kitPath, opts = {}) {
       text: a.text,
       seconds,
       composed: a.composed,
-      shot: a.source === "poster" ? a.shot : void 0
+      shot: a.source === "poster" || a.source === "stage" ? a.shot : void 0,
+      crop: a.crop
     });
     if (!spec) {
       if (a.channel !== "demo")
@@ -7900,7 +8288,7 @@ function mostCommon(values) {
     }
   return best;
 }
-function firstFamily(fontFamily) {
+function firstFamily2(fontFamily) {
   const first = fontFamily.split(",")[0]?.trim() ?? "";
   return first.replace(/^["']|["']$/g, "");
 }
@@ -8032,10 +8420,10 @@ function composeBrand(input) {
   const bgC = mixHex2(bgA, accent, 0.14);
   p.bgC = `bgA tinted 14% toward the accent (a highlight ground)`;
   p.ink = w.h1 ? `the h1's colour` : `the body's colour`;
-  const fontDisplay = design?.fonts[0] ?? (w.h1 ? firstFamily(w.h1.fontFamily) : firstFamily(w.body.fontFamily));
+  const fontDisplay = design?.fonts[0] ?? (w.h1 ? firstFamily2(w.h1.fontFamily) : firstFamily2(w.body.fontFamily));
   p.fontDisplay = design?.fonts[0] ? `named in design.md` : w.h1 ? `the h1's computed face` : `the body's computed face (no h1)`;
   const designBody = design?.fonts.slice(1).find((f) => !/\bmono\b/i.test(f));
-  const fontBody = designBody ?? firstFamily(w.body.fontFamily);
+  const fontBody = designBody ?? firstFamily2(w.body.fontFamily);
   p.fontBody = designBody ? `named in design.md` : `the body's computed face`;
   const logoUrl = design?.logos.find((u) => /wordmark|logo/i.test(u)) ?? null;
   const iconUrl = w.icons.find((u) => /apple-touch/i.test(u)) ?? (w.icons.length ? w.icons[0] : null);
@@ -8847,9 +9235,10 @@ ground (a paper site is a plate, a dark site is dark), and with no brand
 the house gradient. Screenshot-genre stills never take a look.
 Card-genre destinations (OG, LinkedIn, X, YouTube thumbnail, the CWS
 tile + marquee, GitHub social preview) COMPOSE by default: each renders
-from its destination's poster TEMPLATE (split-cover carries a headline
-column beside the shot; card-on-gradient is the shot alone on a mesh, the
-store's tile rule), filled with BRAND.md's colours and faces and the
+from its destination's poster TEMPLATE (split-cover is a STAGE, the
+take's own card leaning in perspective with its chrome and shadow beside
+a serif headline column, on the brand's ground; card-on-gradient is the
+shot alone on a mesh, the store's tile rule), filled with BRAND.md's colours and faces and the
 release's words, the shot baked as an object (padded, rounded, shadowed,
 a hairline on a light ground), PNG at exact pixels; kit.json records the
 template and the text boxes. The headline is LAUNCH.md's headline role
@@ -9717,7 +10106,7 @@ async function cmdJudge(argv) {
   ${lines.join("\n  ")}` : "") + (result.skipped.length ? `
   skipped: ${result.skipped.join("\n  skipped: ")}` : "") + `
 Judge each pair both ways (the rubric is beside it) and fill ${result.verdictFile}` + (rate.judged ? `
-Win rate so far: ${rate.wins}/${rate.judged} (${(rate.rate * 100).toFixed(0)}%); parity with the references is 50%, the marketability bar is 40%` : "")
+Win rate so far: ${rate.wins} win(s), ${rate.ties} tie(s) of ${rate.judged} judged (${(rate.rate * 100).toFixed(0)}%; a tie counts a half); parity with the references is 50%, the marketability bar is 40%` : "")
   );
   return EXIT_OK;
 }
@@ -10008,4 +10397,4 @@ export {
   convertAgentBrowser,
   run
 };
-//# sourceMappingURL=chunk-MMKDYE57.js.map
+//# sourceMappingURL=chunk-PKHORUJ2.js.map