@vosjs/cli 0.15.0 → 0.16.0

package/dist/{chunk-HGLKXIXH.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,14 +3998,15 @@ 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), category: entry.category, fonts };
 }
-var HOUSE_SERIF = "Fraunces";
 function posterValues(brand, words) {
   const b = brand ?? {};
   const bgA = b.bgA && HEX.test(b.bgA) ? b.bgA : null;
@@ -3974,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;
@@ -3982,10 +4040,9 @@ function posterValues(brand, words) {
   values.kicker = kicker ? kicker : [wordmark, release].filter(Boolean).join("  ").toUpperCase();
   const fonts = [];
   const display = resolveFace(b.fontDisplay, [600, 700]);
-  const serif = display && display.category === "serif" ? display : resolveFace(HOUSE_SERIF, [600, 700]);
-  if (serif) {
-    values.fontDisplay = serif.stack;
-    fonts.push(...serif.fonts);
+  if (display) {
+    values.fontDisplay = display.stack;
+    fonts.push(...display.fonts);
   }
   const body = resolveFace(b.fontBody, [700]);
   if (body) {
@@ -3996,7 +4053,6 @@ function posterValues(brand, words) {
 }
 
 // src/plugin/stages.ts
-var HOUSE_SERIF2 = "Fraunces";
 var str = (v, fallback) => typeof v === "string" && v.trim() ? v.trim() : fallback;
 var firstFamily = (stack) => stack.split(",")[0].replace(/['"]/g, "").trim();
 function stageSplitCover(input) {
@@ -4007,7 +4063,7 @@ function stageSplitCover(input) {
   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 serif = firstFamily(str(v.fontDisplay, HOUSE_SERIF2));
+  const display = firstFamily(str(v.fontDisplay, "Lexend"));
   const body = firstFamily(str(v.fontBody, "Lexend"));
   const headline = str(v.headline, "");
   const kicker = str(v.kicker, "");
@@ -4026,8 +4082,8 @@ function stageSplitCover(input) {
     `frame.inset=${JSON.stringify(inset)}`,
     'frame.focus={"cx":0,"cy":0}',
     "frame.radius=16",
-    "frame.shadow=0.45",
-    "frame.shadowContact=0.25",
+    "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}}]`,
@@ -4044,7 +4100,10 @@ function stageSplitCover(input) {
     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 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({
@@ -4059,24 +4118,157 @@ function stageSplitCover(input) {
       maxWidth: column,
       lineHeight: lh,
       transform: { x: left + widest / 2, y, scale: 1, rotation: 0 },
-      shadow: "none",
+      // 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 });
+    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", serif, size, titleY, ink, { weight: 600 }, "headline");
-  word("stage-brand", brand, "label", body, 25, brandY, ink, { weight: 700, letterSpacing: 1 }, "body");
+  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";
@@ -4293,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) ?? {});
@@ -4303,7 +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: true };
+  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) {
@@ -4324,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;
 }
@@ -4496,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);
@@ -4534,19 +4741,24 @@ 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 staged = stageSplitCover({
+          const stageInput = {
             size: d.px,
             values: fill.values,
             sourceSeconds: meta.durationMs / 1e3,
-            outputSeconds: duration
-          });
-          opts.onPhase?.(`${d.channel} ${d.asset} (${specWords(d)}) from ${plan.from}`);
+            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, {
@@ -4563,7 +4775,9 @@ async function deliverTake(browser, dir, opts) {
             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})`);
+              skipped.push(
+                `${d.channel} ${d.asset}: ${overCeiling(bytes2, d.maxBytes)} (kept at ${to2})`
+              );
               continue;
             }
             assets.push({
@@ -4577,9 +4791,10 @@ async function deliverTake(browser, dir, opts) {
               seconds: null,
               frameTime: heroTime,
               source: "stage",
-              template: "split-cover-stage",
+              template: `${plan.stage}-stage`,
               text: staged.text,
-              shot: staged.shot
+              shot: staged.shot,
+              ...plan.stage === "tile" ? { crop: true } : {}
             });
           } finally {
             await rm3(shotDir, { recursive: true, force: true });
@@ -4618,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,
@@ -5033,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",
@@ -5043,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",
@@ -5131,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({
@@ -5206,7 +5428,9 @@ function duplicateFindings(stills) {
     if (g.length > 1) groups.push(g);
   }
   return groups.map((g) => {
-    const composed = g.every((s) => stills.find((x) => x.destination === s.destination)?.composed);
+    const composed = g.every(
+      (s) => stills.find((x) => x.destination === s.destination)?.composed
+    );
     return {
       code: "duplicate",
       severity: composed ? "info" : g.length >= 3 ? "error" : "warning",
@@ -5220,7 +5444,21 @@ 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));
@@ -5283,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) {
@@ -5316,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 };
 }
@@ -5468,7 +5715,8 @@ async function validateKit(kitPath, opts = {}) {
       text: a.text,
       seconds,
       composed: a.composed,
-      shot: a.source === "poster" || a.source === "stage" ? a.shot : void 0
+      shot: a.source === "poster" || a.source === "stage" ? a.shot : void 0,
+      crop: a.crop
     });
     if (!spec) {
       if (a.channel !== "demo")
@@ -10149,4 +10397,4 @@ export {
   convertAgentBrowser,
   run
 };
-//# sourceMappingURL=chunk-HGLKXIXH.js.map
+//# sourceMappingURL=chunk-PKHORUJ2.js.map