@vosjs/studio-core 0.4.1 → 0.5.1

package/dist/index.js

@@ -153,6 +153,7 @@ var DEFAULT_FRAME_STYLE = BASE_FRAME_STYLE;
 var FRAME_BORDER_DEFAULT = 0.35;
 var FRAME_BORDER_WIDTH_DEFAULT = 1.5;
 var FRAME_BORDER_COLOR_DEFAULT = "#ffffff";
+var CARD_EDGE_OVERDRAW = 1;
 function platformBarKind(platform) {
   return platform === "windows" || platform === "linux" ? "windows-light" : "mac-light";
 }
@@ -1099,7 +1100,7 @@ import {
   lerpArray,
   sample,
   segmentRate as segmentRate2,
-  sortKeyframes,
+  sortKeyframes as sortKeyframes2,
   sourceToTimeline as sourceToTimeline2,
   splitBySpeed,
   totalDuration
@@ -1107,27 +1108,33 @@ import {
 import { timelineRuntimeCode as timelineRuntimeCode2 } from "@vosjs/timeline/bundle";
 
 // src/layout.ts
-function computeCardLayout(frame, video, W, H) {
+function computeCardLayout(frame, video, W, H, zoomFocus) {
   const s = H / 1080;
   const pad = (frame.padding || 0) * s;
+  const ins = frame.inset ?? {};
+  const padL = ins.left == null ? pad : ins.left * W;
+  const padR = ins.right == null ? pad : ins.right * W;
+  const padT = ins.top == null ? pad : ins.top * H;
+  const padB = ins.bottom == null ? pad : ins.bottom * H;
   const bar = frame.browserBar;
   const vw = video.width || 16;
   const vh = video.height || 9;
   const fitCover = frame.fit === "cover";
   const cf = fitCover ? 1 : Math.min(1, W / H / (vw / vh));
   const barH = bar.kind !== "none" ? (bar.height || 44) * s * cf : 0;
-  const availW = Math.max(1, W - pad * 2);
-  const availH = Math.max(1, H - pad * 2 - barH);
+  const availW = Math.max(1, W - padL - padR);
+  const availH = Math.max(1, H - padT - padB - barH);
   if (fitCover) {
     const sc2 = Math.max(availW / vw, availH / vh);
     const dw2 = vw * sc2;
     const dh2 = vh * sc2;
-    const fcx = clamp013(frame.focus?.cx ?? 0.5);
-    const fcy = clamp013(frame.focus?.cy ?? 0.5);
-    const vTop = pad + barH;
+    const follow = frame.focusFollow === "camera" && zoomFocus ? zoomFocus : null;
+    const fcx = clamp013(follow ? follow.cx : frame.focus?.cx ?? 0.5);
+    const fcy = clamp013(follow ? follow.cy : frame.focus?.cy ?? 0.5);
+    const vTop = padT + barH;
     const dx2 = Math.min(
-      pad,
-      Math.max(pad + availW - dw2, pad + availW / 2 - fcx * dw2)
+      padL,
+      Math.max(padL + availW - dw2, padL + availW / 2 - fcx * dw2)
     );
     const dy2 = Math.min(
       vTop,
@@ -1140,8 +1147,8 @@ function computeCardLayout(frame, video, W, H) {
       dy: dy2,
       dw: dw2,
       dh: dh2,
-      cardX: pad,
-      cardY: pad,
+      cardX: padL,
+      cardY: padT,
       cardW: availW,
       cardH: availH + barH
     };
@@ -1149,8 +1156,8 @@ function computeCardLayout(frame, video, W, H) {
   const sc = Math.min(availW / vw, availH / vh);
   const dw = vw * sc;
   const dh = vh * sc;
-  const dx = (W - dw) / 2;
-  const dy = (H - dh + barH) / 2;
+  const dx = padL + (availW - dw) / 2;
+  const dy = padT + barH + (availH - dh) / 2;
   return {
     W,
     H,
@@ -2741,6 +2748,117 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
 
 }`;
 
+// src/lower/motion.ts
+import { sortKeyframes } from "@vosjs/timeline";
+var ENTRANCE_SECONDS = 1.2;
+var END_CARD_SECONDS = 2.5;
+var END_CARD_RECEDE = 0.7;
+var TILT_IN_POSE = [-9, 14];
+var PULL_OUT_LEVEL = 1.32;
+var HOLD_SOURCE_SPAN = 2e-3;
+function entranceSeconds(e) {
+  if (!e || e.kind === "none") return 0;
+  return Math.max(0.2, Math.min(3, e.seconds ?? ENTRANCE_SECONDS));
+}
+function withHolds(docSegments, rated) {
+  const out = [];
+  const pending = docSegments.filter((s) => typeof s.hold === "number" && s.hold > 0).map((s) => ({ out: s.out, hold: s.hold, used: false }));
+  for (let i = 0; i < rated.length; i++) {
+    const piece = rated[i];
+    out.push(piece);
+    const next = rated[i + 1];
+    for (const p of pending) {
+      if (p.used) continue;
+      const endsHere = Math.abs(piece.out - p.out) < 1e-9;
+      const nextContinues = next && Math.abs(next.in - p.out) < 1e-9 && next.out > p.out;
+      if (endsHere && !nextContinues) {
+        out.push({
+          in: p.out - HOLD_SOURCE_SPAN,
+          out: p.out,
+          rate: HOLD_SOURCE_SPAN / p.hold
+        });
+        p.used = true;
+      }
+    }
+  }
+  return out;
+}
+function entranceTiltKeyframes(e) {
+  const s = entranceSeconds(e);
+  if (!s || e?.kind !== "tilt-in") return [];
+  return [
+    { t: 0, value: [...TILT_IN_POSE], ease: "none" },
+    { t: s, value: [0, 0], ease: "power3.out" }
+  ];
+}
+function entranceZoomKeyframes(e) {
+  const s = entranceSeconds(e);
+  if (!s) return [];
+  if (e?.kind === "pull-out")
+    return [
+      { t: 0, value: [PULL_OUT_LEVEL, 0.5, 0.42], ease: "none" },
+      { t: s, value: [1, 0.5, 0.5], ease: "power3.out" }
+    ];
+  return [
+    { t: 0, value: [1, 0.5, 0.5], ease: "none" },
+    { t: s, value: [1, 0.5, 0.5], ease: "none" }
+  ];
+}
+function prependEntrance(track, head) {
+  if (!head.length) return track;
+  const end = head[head.length - 1].t;
+  const rest = (track?.keyframes ?? []).filter((k) => k.t > end + 0.1);
+  return { keyframes: sortKeyframes([...head, ...rest]) };
+}
+function cardPoseTrack(e, endStart, endSeconds) {
+  const keyframes = [];
+  const s = entranceSeconds(e);
+  if (s) {
+    const from = e?.kind === "rise" ? [0.96, 0.08, 0.7] : e?.kind === "pull-out" ? [1, 0, 1] : [0.94, 0.05, 0.7];
+    keyframes.push({ t: 0, value: from, ease: "none" });
+    keyframes.push({ t: s, value: [1, 0, 1], ease: "power3.out" });
+  }
+  if (endStart !== null && endSeconds > 0) {
+    const t0 = Math.max(endStart, s);
+    keyframes.push({ t: t0, value: [1, 0, 1], ease: "none" });
+    keyframes.push({
+      t: t0 + Math.min(END_CARD_RECEDE, endSeconds * 0.4),
+      value: [0.9, -0.02, 0.22],
+      ease: "power2.out"
+    });
+  }
+  if (!keyframes.length) return void 0;
+  return { keyframes: sortKeyframes(keyframes) };
+}
+function expandEndCard(doc, outputDuration) {
+  const card = doc.endCard;
+  if (!card || !doc.segments.length) return { doc, endStart: null, seconds: 0 };
+  const seconds = Math.max(1, Math.min(8, card.seconds ?? END_CARD_SECONDS));
+  const segments = doc.segments.map(
+    (s, i) => i === doc.segments.length - 1 ? { ...s, hold: (s.hold ?? 0) + seconds } : s
+  );
+  const endStart = outputDuration;
+  const clips = [];
+  const text = (id, body, preset, y, delay) => ({
+    id,
+    kind: "text",
+    text: body,
+    preset,
+    start: endStart + delay,
+    duration: Math.max(0.3, seconds - delay),
+    transform: { x: 0.5, y, scale: 1, rotation: 0 },
+    enter: "rise",
+    exit: "none",
+    align: "center",
+    ...card.ink ? { color: card.ink } : {}
+  });
+  if (card.headline?.trim()) clips.push(text("endcard-title", card.headline.trim(), "title", 0.44, 0.35));
+  if (card.sub?.trim()) clips.push(text("endcard-sub", card.sub.trim(), "caption", 0.57, 0.5));
+  if (card.wordmark?.trim()) clips.push(text("endcard-mark", card.wordmark.trim(), "label", 0.88, 0.65));
+  const overlays = [...doc.overlays ?? [], ...clips];
+  return { doc: { ...doc, segments, overlays }, endStart, seconds };
+}
+
 // src/lower/extractClicks.ts
 import { segmentRate, sourceToTimeline } from "@vosjs/timeline";
 var CLICK_FX_PRE = 0.06;
@@ -2845,7 +2963,7 @@ var CAM_PAN_EASE = ZOOM_PAN_EASE;
 var PROGRAM_DURATION = 1;
 function ratedSegments(doc) {
   const segs = isRecordingDoc(doc) ? doc.segments.length ? doc.segments : [{ in: 0, out: doc.source.meta.durationMs / 1e3 }] : [{ in: 0, out: programDuration(doc) }];
-  return splitBySpeed(segs, doc.speed ?? []);
+  return withHolds(segs, splitBySpeed(segs, doc.speed ?? []));
 }
 function durationSec(doc, rated) {
   const trimmed = totalDuration(rated);
@@ -2937,7 +3055,7 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
       chained = false;
     }
   }
-  return { keyframes: sortKeyframes(keyframes) };
+  return { keyframes: sortKeyframes2(keyframes) };
 }
 function sameVec(a, b) {
   return a.length === b.length && a.every((v, i) => Math.abs(v - b[i]) < 1e-6);
@@ -2978,7 +3096,7 @@ function tiltTrackFromDoc(tilt, segments, motion = {}) {
       chained = false;
     }
   }
-  return { keyframes: sortKeyframes(keyframes) };
+  return { keyframes: sortKeyframes2(keyframes) };
 }
 function camRestPose(cam, W, H = 1080) {
   const r = camBubbleRect(cam, W, H);
@@ -3020,7 +3138,7 @@ function camTrackFromDoc(cam, spans, segments, W, H = 1080) {
       chained = false;
     }
   }
-  return { keyframes: sortKeyframes(keyframes) };
+  return { keyframes: sortKeyframes2(keyframes) };
 }
 function camRectFromPose(pose, cam, W, H = 1080) {
   const s = H / 1080;
@@ -3060,7 +3178,7 @@ function motionTrack(base, keys, dur) {
       spanEase(k.ease, MOTION_EASE)
     );
   }
-  return { keyframes: sortKeyframes(keyframes) };
+  return { keyframes: sortKeyframes2(keyframes) };
 }
 function overlayMotionBase(o) {
   return [
@@ -3750,6 +3868,14 @@ var ON_FRAME = `(ctx, content, dt) => {
   // strip is part of the card: it takes barH from the available height and the video
   // sits below it \u2014 bar + video share the rounded clip and zoom together.
   var pad = (frame.padding || 0) * s
+  // Per-side placement (frame.inset: fractions of the frame, a negative side
+  // bleeds the card past the edge) overrides the symmetric padding on the
+  // sides it names; absent sides keep pad, so the old math falls out.
+  var ipIns = frame.inset || {}
+  var ipL = ipIns.left == null ? pad : ipIns.left * W
+  var ipR = ipIns.right == null ? pad : ipIns.right * W
+  var ipT = ipIns.top == null ? pad : ipIns.top * H
+  var ipB = ipIns.bottom == null ? pad : ipIns.bottom * H
   var bar = frame.browserBar || {}
   // Window takes carry a viewport crop (drawImage source rect, capture px) that
   // removes the real browser chrome \u2014 the card's source dims are then the CROP
@@ -3775,35 +3901,48 @@ var ON_FRAME = `(ctx, content, dt) => {
   var fitCover = frame.fit === 'cover'
   var cf = fitCover ? 1 : Math.min(1, (W / H) / (vw / vh))
   var s2 = s * cf
+  // current zoom \u2014 a standard keyframe track in OUTPUT time (hold + arrival pairs
+  // expanded by the lowering), sampled with the shared deterministic interpolator.
+  // Sampled here, before the rect math, so a cover crop can follow it.
+  var lvl = 1, zx = 0.5, zy = 0.5
+  var zt = d.zoomTrack
+  if (zt && zt.keyframes && zt.keyframes.length) {
+    var z = TL.sample(zt, t, TL.lerpArray)
+    lvl = z[0]; zx = z[1]; zy = z[2]
+  }
   var barH = bar.kind && bar.kind !== 'none' ? (bar.height || 44) * s2 : 0
-  var availW = Math.max(1, W - pad * 2), availH = Math.max(1, H - pad * 2 - barH)
+  var availW = Math.max(1, W - ipL - ipR), availH = Math.max(1, H - ipT - ipB - barH)
   var sc, dw, dh, dx, dy, cardX, cardY, cardW, cardH
   if (fitCover) {
     sc = Math.max(availW / vw, availH / vh)
     dw = vw * sc; dh = vh * sc
-    cardX = pad; cardY = pad; cardW = availW; cardH = availH + barH
+    cardX = ipL; cardY = ipT; cardW = availW; cardH = availH + barH
     var fcv = frame.focus || {}
     var fcx = fcv.cx == null ? 0.5 : Math.max(0, Math.min(1, fcv.cx))
     var fcy = fcv.cy == null ? 0.5 : Math.max(0, Math.min(1, fcv.cy))
-    var vTop = pad + barH
+    // focusFollow: the crop keeps the camera's focus in frame (a 9:16 cut).
+    if (frame.focusFollow === 'camera' && zt && zt.keyframes && zt.keyframes.length) { fcx = zx; fcy = zy }
+    var vTop = ipT + barH
     dx = Math.min(cardX, Math.max(cardX + availW - dw, cardX + availW / 2 - fcx * dw))
     dy = Math.min(vTop, Math.max(vTop + availH - dh, vTop + availH / 2 - fcy * dh))
   } else {
     sc = Math.min(availW / vw, availH / vh)
     dw = vw * sc; dh = vh * sc
-    dx = (W - dw) / 2; dy = (H - dh + barH) / 2
+    // Centred inside the inset area (equal to (W - dw) / 2 when no side is
+    // inset, the old formula).
+    dx = ipL + (availW - dw) / 2; dy = ipT + barH + (availH - dh) / 2
     cardX = dx; cardY = dy - barH; cardW = dw; cardH = dh + barH
   }
   var radius = (frame.radius || 0) * s2
   var shadow = frame.shadow || 0
-
-  // current zoom \u2014 a standard keyframe track in OUTPUT time (hold + arrival pairs
-  // expanded by the lowering), sampled with the shared deterministic interpolator.
-  var lvl = 1, zx = 0.5, zy = 0.5
-  var zt = d.zoomTrack
-  if (zt && zt.keyframes && zt.keyframes.length) {
-    var z = TL.sample(zt, t, TL.lerpArray)
-    lvl = z[0]; zx = z[1]; zy = z[2]
+  // The shadow's colour (a #rrggbb; the strengths are its alpha) and the
+  // optional tight CONTACT layer that makes a light card sit on a light
+  // ground.
+  var shC = frame.shadowContact || 0
+  var shRgb = '0,0,0'
+  var shHex = frame.shadowColor
+  if (typeof shHex === 'string' && /^#[0-9a-fA-F]{6}$/.test(shHex)) {
+    shRgb = parseInt(shHex.slice(1, 3), 16) + ',' + parseInt(shHex.slice(3, 5), 16) + ',' + parseInt(shHex.slice(5, 7), 16)
   }
 
   function rr(x, y, w, h, rd, cx) {
@@ -3815,19 +3954,49 @@ var ON_FRAME = `(ctx, content, dt) => {
   c.save()
   // d.zoomSuppressed = editor aiming mode: the host merges it into ctx.data
   // while the focus overlay is up so the full frame renders. Never persisted.
+  // ceZs = the zoom transform's device scale, for the two values below that
+  // are sized in DEVICE pixels inside a scaled user space.
+  var ceZs = 1
   if (lvl > 1.001 && !d.zoomSuppressed) {
     var fx = dx + zx * dw, fy = dy + zy * dh
     c.translate(fx, fy); c.scale(lvl, lvl); c.translate(-fx, -fy)
-  }
+    ceZs = lvl
+  }
+  // The card's shadows are cast by a body drawn OFF-CANVAS and brought back
+  // by shadowOffsetX alone. Shadow offsets are device space, untouched by
+  // the transform, so the body moves by shD / ceZs in user space and the
+  // offset is shD; shD clears the canvas by the card's own device size, so
+  // no part of the body lands on it at any zoom. Painting the body in place
+  // (opaque black under the footage) left a 1px dark seam along every
+  // straight card edge at a fractional coordinate: the fill's anti-aliased
+  // rim showed through where the clipped footage did not cover it, and the
+  // corners, drawn by the clip alone, hid theirs inside the arc.
+  var shD = ceZs * (cardW + cardH) + 2 * (W + H)
+  var shX = cardX - shD / ceZs
   // soft shadow behind the card (bar strip + video)
   if (shadow > 0) {
     c.save()
-    c.shadowColor = 'rgba(0,0,0,' + shadow + ')'
-    c.shadowBlur = 60 * s2; c.shadowOffsetY = 24 * s2
+    c.shadowColor = 'rgba(' + shRgb + ',' + shadow + ')'
+    c.shadowBlur = 60 * s2; c.shadowOffsetX = shD; c.shadowOffsetY = 24 * s2
     c.fillStyle = '#000'
-    rr(cardX, cardY, cardW, cardH, radius); c.fill()
+    rr(shX, cardY, cardW, cardH, radius); c.fill()
     c.restore()
   }
+  // contact shadow: tight and close, over the ambient layer
+  if (shC > 0) {
+    c.save()
+    c.shadowColor = 'rgba(' + shRgb + ',' + shC + ')'
+    c.shadowBlur = 10 * s2; c.shadowOffsetX = shD; c.shadowOffsetY = 3 * s2
+    c.fillStyle = '#000'
+    rr(shX, cardY, cardW, cardH, radius); c.fill()
+    c.restore()
+  }
+  // The footage and the bar fill overdraw the clip by one device pixel
+  // (CARD_EDGE_OVERDRAW) so the clip is the only edge: a destination rect
+  // that lands exactly on the clip path anti-aliases the edge twice at a
+  // fractional coordinate and leaves a half-covered seam pixel.
+  var ceOv = ${CARD_EDGE_OVERDRAW} / ceZs
+  var ceX = dx - ceOv, ceY = dy - ceOv, ceW = dw + 2 * ceOv, ceH = dh + 2 * ceOv
   // video, then bar, clipped to the card's rounded corners. The bar draws
   // AFTER the footage: under cover the video rect can overflow ABOVE the
   // bar strip (a vertical crop), and bar-first let the footage paint over
@@ -3840,9 +4009,9 @@ var ON_FRAME = `(ctx, content, dt) => {
     // dimension-checked at attach); false \u21D2 element path (pre-first-seek,
     // or the provider never attached).
     var wcp3 = video.__voilaWc
-    if (!(wcp3 && wcp3.draw(c, crp, dx, dy, dw, dh))) {
-      if (crp) c.drawImage(video, crp.x, crp.y, crp.w, crp.h, dx, dy, dw, dh)
-      else c.drawImage(video, dx, dy, dw, dh)
+    if (!(wcp3 && wcp3.draw(c, crp, ceX, ceY, ceW, ceH))) {
+      if (crp) c.drawImage(video, crp.x, crp.y, crp.w, crp.h, ceX, ceY, ceW, ceH)
+      else c.drawImage(video, ceX, ceY, ceW, ceH)
     }
   } catch (e) {}
   if (barH > 0) {
@@ -3852,7 +4021,7 @@ var ON_FRAME = `(ctx, content, dt) => {
     // absent = the built-in graphite look
     var thm = (minimal && bar.theme) || null
     c.fillStyle = minimal ? (thm ? thm.bar : '#141417') : dark ? '#2a2a2e' : '#e9e9eb'
-    c.fillRect(cardX, cardY, cardW, barH)
+    c.fillRect(cardX - ceOv, cardY - ceOv, cardW + 2 * ceOv, barH + ceOv)
     c.fillStyle = dark || (minimal && !(thm && thm.light)) ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'
     c.fillRect(cardX, cardY + barH - s2, cardW, s2) // hairline above the video
     var midY = cardY + barH / 2
@@ -4191,6 +4360,20 @@ var ON_FRAME = `(ctx, content, dt) => {
     }
     card.mesh.rotation.x = rx
     card.mesh.rotation.y = ry
+    // The card's pose through an entrance or an end card: [scale, dy,
+    // opacity]; absent = the rest pose, exactly as before the track existed.
+    var cpk = d.cardPoseTrack
+    var cpH = card.mesh.geometry && card.mesh.geometry.parameters ? card.mesh.geometry.parameters.height : 0
+    if (cpk && cpk.keyframes && cpk.keyframes.length && card.mesh.scale && card.mesh.position) {
+      var cpv = TL.sample(cpk, t, TL.lerpArray)
+      card.mesh.scale.x = cpv[0]; card.mesh.scale.y = cpv[0]
+      card.mesh.position.y = cpv[1] * cpH
+      if (card.mesh.material) card.mesh.material.opacity = cpv[2]
+    } else if (card.mesh.scale && card.mesh.position && ((card.mesh.scale.x !== undefined && card.mesh.scale.x !== 1) || (card.mesh.position.y !== undefined && card.mesh.position.y !== 0))) {
+      card.mesh.scale.x = 1; card.mesh.scale.y = 1
+      card.mesh.position.y = 0
+      if (card.mesh.material) card.mesh.material.opacity = 1
+    }
     var tilted = rx * rx + ry * ry > 1e-6
     if (card.texture && card.texture.generateMipmaps !== tilted) {
       var THREE2 = ctx.THREE
@@ -4372,7 +4555,10 @@ function studioLayerData(layers, duration) {
     } : {}
   };
 }
-function lowerToComposition(doc) {
+function lowerToComposition(input) {
+  const before = durationSec(input, ratedSegments(input));
+  const expanded = expandEndCard(input, before);
+  const doc = expanded.doc;
   const rated = ratedSegments(doc);
   const duration = durationSec(doc, rated);
   const fx = doc.cursor.clickFx;
@@ -4445,15 +4631,33 @@ function lowerToComposition(doc) {
     // intensities/colors become numbers HERE — ON_FRAME reads no registry).
     ...clickFxData(doc, rated),
     // Rated segments so zoom spans land at their speed-adjusted output times.
-    zoomTrack: zoomTrackFromDoc(zoomSpans, rated, zoomStyle),
+    // A pull-out entrance writes the track's head.
+    zoomTrack: prependEntrance(
+      zoomTrackFromDoc(zoomSpans, rated, zoomStyle),
+      entranceZoomKeyframes(doc.frame.entrance)
+    ),
     // Tilt spans: OUTPUT-time [rx, ry] degree track. The rest pose is
     // FLAT — there is no static card tilt any more — and the motion constants
     // come from the camera style's tilt personality ('drift' slows its
     // leans, 'keynote' matches the zoom ramps). Omitted when the doc has no
-    // spans — byte parity.
-    ...doc.tilt && doc.tilt.length ? {
-      tiltTrack: tiltTrackFromDoc(doc.tilt, rated, zoomStyle.tilt)
-    } : {}
+    // spans and no tilt-in entrance — byte parity. The entrance is a
+    // producer of this track, never a second pose.
+    ...(() => {
+      const head = entranceTiltKeyframes(doc.frame.entrance);
+      const spans = doc.tilt && doc.tilt.length ? tiltTrackFromDoc(doc.tilt, rated, zoomStyle.tilt) : void 0;
+      const track = prependEntrance(spans, head);
+      return track ? { tiltTrack: track } : {};
+    })(),
+    // The card's pose through the entrance and the end card: [scale, dy,
+    // opacity] in output seconds. Absent when neither exists.
+    ...(() => {
+      const track = cardPoseTrack(
+        doc.frame.entrance,
+        expanded.endStart,
+        expanded.seconds
+      );
+      return track ? { cardPoseTrack: track } : {};
+    })()
   };
   const entryData = {
     lights: true,
@@ -5230,7 +5434,7 @@ function lowerProgramDoc(doc, opts = {}) {
 
 // src/destinations.ts
 var CHANNEL_SPECS_VERIFIED = "2026-08-04";
-var CHANNEL_SPECS_HASH = "7a3ad4301f96507ec471a35fa37f367dcaf4bd405b008f551d0ac4cd395d61f7";
+var CHANNEL_SPECS_HASH = "e48926c22737b5dfaabf5cb33916a50a5eccd4b93498c2059a1468bd963a0a86";
 var DESTINATIONS = [
   {
     id: "youtube-main-demo",
@@ -5248,6 +5452,13 @@ var DESTINATIONS = [
     format: "mp4",
     accepts: "mp4 (H.264+AAC)",
     fit: "contain",
+    text: "allowed",
+    safe: {
+      x: 0.05,
+      y: 0.08,
+      w: 0.9,
+      h: 0.84
+    },
     notes: "Captions burned in. The same public upload serves the Chrome Web Store promo video and Product Hunt video (both take YouTube URLs only)."
   },
   {
@@ -5267,6 +5478,13 @@ var DESTINATIONS = [
     format: "mp4",
     accepts: "mp4 (H.264+AAC ONLY \u2014 HEVC/VP9/AV1 rejected)",
     fit: "contain",
+    text: "allowed",
+    safe: {
+      x: 0.05,
+      y: 0.08,
+      w: 0.9,
+      h: 0.84
+    },
     notes: "30\u201360s plays best; 140s/512MB is the free-tier ceiling. 1:1 also allowed. Native upload, never a link post."
   },
   {
@@ -5285,6 +5503,13 @@ var DESTINATIONS = [
     format: "mp4",
     accepts: "mp4 (H.264+AAC)",
     fit: "contain",
+    text: "expected",
+    safe: {
+      x: 0.0833,
+      y: 0.1979,
+      w: 0.8333,
+      h: 0.6042
+    },
     notes: "Critical text inside a centered ~900\xD71160 safe zone \u2014 platform chrome covers the rest. Serves YouTube Shorts and LinkedIn native vertical."
   },
   {
@@ -5304,6 +5529,13 @@ var DESTINATIONS = [
     format: "mp4",
     accepts: "mp4 (H.264)",
     fit: "contain",
+    text: "none",
+    safe: {
+      x: 0.05,
+      y: 0.08,
+      w: 0.9,
+      h: 0.84
+    },
     notes: "\u226410MB is the free-plan attachment ceiling; two-pass target bitrate from duration."
   },
   {
@@ -5322,6 +5554,14 @@ var DESTINATIONS = [
     format: "png",
     accepts: "png|jpg",
     fit: "cover",
+    text: "expected",
+    safe: {
+      x: 0.05,
+      y: 0.08,
+      w: 0.9,
+      h: 0.84
+    },
+    template: "split-cover",
     notes: ""
   },
   {
@@ -5343,6 +5583,13 @@ var DESTINATIONS = [
     format: "png",
     accepts: "png|jpg",
     fit: "cover",
+    text: "none",
+    safe: {
+      x: 0,
+      y: 0,
+      w: 1,
+      h: 1
+    },
     notes: "Real UX only \u2014 misleading listing images are a removal-grade violation. Full bleed, square corners."
   },
   {
@@ -5360,6 +5607,14 @@ var DESTINATIONS = [
     format: "png",
     accepts: "png|jpg",
     fit: "cover",
+    text: "none",
+    safe: {
+      x: 0,
+      y: 0,
+      w: 1,
+      h: 1
+    },
+    template: "card-on-gradient",
     notes: "Listings without one rank lower. No text; fill the region; subject centered."
   },
   {
@@ -5377,6 +5632,14 @@ var DESTINATIONS = [
     format: "png",
     accepts: "png|jpg",
     fit: "cover",
+    text: "allowed",
+    safe: {
+      x: 0.05,
+      y: 0.08,
+      w: 0.9,
+      h: 0.84
+    },
+    template: "split-cover",
     notes: "Carousel eligibility."
   },
   {
@@ -5393,6 +5656,13 @@ var DESTINATIONS = [
     format: "png",
     accepts: "png",
     fit: "cover",
+    text: "none",
+    safe: {
+      x: 0,
+      y: 0,
+      w: 1,
+      h: 1
+    },
     notes: "96\xD796 art + 16px transparent padding."
   },
   {
@@ -5411,6 +5681,14 @@ var DESTINATIONS = [
     format: "png",
     accepts: "gif|png",
     fit: "cover",
+    text: "none",
+    safe: {
+      x: 0.06,
+      y: 0.06,
+      w: 0.88,
+      h: 0.88
+    },
+    template: "card-on-gradient",
     notes: "GIF animates on hover only \u2014 the first frame must stand alone."
   },
   {
@@ -5432,6 +5710,13 @@ var DESTINATIONS = [
     format: "png",
     accepts: "png|jpg|gif",
     fit: "cover",
+    text: "none",
+    safe: {
+      x: 0,
+      y: 0,
+      w: 1,
+      h: 1
+    },
     notes: "First image is the hero."
   },
   {
@@ -5449,6 +5734,14 @@ var DESTINATIONS = [
     format: "png",
     accepts: "png|jpg",
     fit: "cover",
+    text: "allowed",
+    safe: {
+      x: 0.05,
+      y: 0.08,
+      w: 0.9,
+      h: 0.84
+    },
+    template: "split-cover",
     notes: ""
   },
   {
@@ -5466,6 +5759,14 @@ var DESTINATIONS = [
     format: "png",
     accepts: "png|jpg",
     fit: "cover",
+    text: "expected",
+    safe: {
+      x: 0.05,
+      y: 0.08,
+      w: 0.9,
+      h: 0.84
+    },
+    template: "split-cover",
     notes: "1080\xD71350 vertical also performs in the mobile feed."
   },
   {
@@ -5484,6 +5785,14 @@ var DESTINATIONS = [
     format: "png",
     accepts: "png|jpg",
     fit: "cover",
+    text: "expected",
+    safe: {
+      x: 0.05,
+      y: 0.0238,
+      w: 0.9,
+      h: 0.9524
+    },
+    template: "split-cover",
     notes: "Text in the center ~1080\xD7600. Set twitter:card=summary_large_image explicitly \u2014 og:image alone gets the small card."
   },
   {
@@ -5502,6 +5811,14 @@ var DESTINATIONS = [
     format: "png",
     accepts: "png|jpg",
     fit: "cover",
+    text: "expected",
+    safe: {
+      x: 0.0391,
+      y: 0.0781,
+      w: 0.9219,
+      h: 0.8438
+    },
+    template: "card-on-gradient",
     notes: "Key text \u226550px from every edge."
   }
 ];
@@ -5556,6 +5873,131 @@ function studioAudioPlan(clips, duckEnv, duration, step = AUDIO_PLAN_STEP) {
   return { duration, step, tracks };
 }
 
+// src/look.ts
+var HOUSE_GRADIENT = "linear-gradient(135deg, #ff5148, #ffb03a)";
+var PLATE_GROUND = "#f0f2f4";
+var DARK_GROUND = "radial-gradient(ellipse at 82% 0%, #2a1d16, #07080b)";
+var LOOKS = {
+  plate: {
+    kind: "plate",
+    ground: PLATE_GROUND,
+    cardWidth: 0.84,
+    headroom: 0.16,
+    radius: 12,
+    shadow: 0.22,
+    shadowContact: 0.16,
+    border: 0.08,
+    borderColor: "#000000"
+  },
+  gradient: {
+    kind: "gradient",
+    ground: HOUSE_GRADIENT,
+    cardWidth: 0.84,
+    headroom: 0.16,
+    radius: 12,
+    shadow: 0.35,
+    shadowContact: 0.2,
+    border: 0
+  },
+  dark: {
+    kind: "dark",
+    ground: DARK_GROUND,
+    cardWidth: 0.86,
+    headroom: 0.14,
+    radius: 12,
+    shadow: 0.5,
+    shadowContact: 0.3,
+    shadowColor: "#000000",
+    border: 0.12,
+    borderColor: "#ffffff"
+  }
+};
+var LOOK_KINDS = ["plate", "gradient", "dark"];
+function isLookKind(v) {
+  return typeof v === "string" && LOOK_KINDS.includes(v);
+}
+function houseLook(kind) {
+  return { ...LOOKS[kind] };
+}
+var HEX = /^#([0-9a-f]{6})$/i;
+function luma(hex) {
+  const m = HEX.exec(hex.trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  const r = n >> 16 & 255;
+  const g = n >> 8 & 255;
+  const b = n & 255;
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+}
+function lookKindForGround(bgA) {
+  const l = bgA ? luma(bgA) : null;
+  if (l === null) return "gradient";
+  if (l >= 0.85) return "plate";
+  if (l <= 0.2) return "dark";
+  return "gradient";
+}
+function lookFromBrand(brand) {
+  const b = brand ?? {};
+  const kind = isLookKind(b.look) ? b.look : lookKindForGround(b.bgA);
+  const look = houseLook(kind);
+  if (kind === "plate" && b.bgB && HEX.test(b.bgB)) look.ground = b.bgB;
+  if (kind === "gradient" && b.accent && b.bgC && HEX.test(b.accent)) {
+    look.ground = `linear-gradient(135deg, ${b.accent}, ${b.bgC})`;
+  }
+  if (kind === "dark" && b.bgA && HEX.test(b.bgA)) {
+    look.ground = `radial-gradient(ellipse at 82% 0%, ${mix(b.bgA, b.accent ?? "#ffffff", 0.18)}, ${b.bgA})`;
+  }
+  if (b.ground && b.ground.trim()) look.ground = b.ground.trim();
+  return look;
+}
+function mix(a, b, t) {
+  const pa = HEX.exec(a);
+  const pb = HEX.exec(b);
+  if (!pa || !pb) return a;
+  const na = parseInt(pa[1], 16);
+  const nb = parseInt(pb[1], 16);
+  const ch = (sh) => {
+    const x = na >> sh & 255;
+    const y = nb >> sh & 255;
+    return Math.round(x + (y - x) * t);
+  };
+  return `#${(ch(16) << 16 | ch(8) << 8 | ch(0)).toString(16).padStart(6, "0")}`;
+}
+function cardInset(look, frame, video, placement) {
+  const R = frame.w / Math.max(1, frame.h);
+  const V = video.w / Math.max(1, video.h);
+  const cw = look.cardWidth;
+  const ch = cw * R / V;
+  const side = (1 - cw) / 2;
+  if (placement === "card" && ch <= 1 - look.headroom) {
+    const v = (1 - ch) / 2;
+    return { left: side, right: side, top: v, bottom: v };
+  }
+  const top = look.headroom;
+  const bottom = Math.min(-0.02, 1 - top - ch);
+  return { left: side, right: side, top, bottom };
+}
+function applyLook(frame, look, size, video, placement) {
+  const out = {
+    ...frame,
+    background: look.ground,
+    fit: "contain",
+    inset: cardInset(look, size, video, placement),
+    radius: look.radius,
+    shadow: look.shadow,
+    shadowContact: look.shadowContact,
+    border: look.border
+  };
+  delete out.focus;
+  if (look.shadowColor) out.shadowColor = look.shadowColor;
+  else delete out.shadowColor;
+  if (look.border > 0) {
+    out.borderWidth = 1;
+    out.borderColor = look.borderColor ?? "#000000";
+  }
+  return out;
+}
+
 // src/timeline/lanes.ts
 import {
   mapTime as mapTime2,
@@ -6811,6 +7253,7 @@ export {
   CAM_SIZE_MIN,
   CAM_SPAN_MIN,
   CAPTURE_COVERAGE_MIN,
+  CARD_EDGE_OVERDRAW,
   CARD_FOV,
   CARD_Z,
   CHANNEL_SPECS_HASH,
@@ -6831,6 +7274,7 @@ export {
   CURSOR_IDLE_FADE_IN,
   CURSOR_IDLE_FADE_OUT,
   CURSOR_IDLE_HOLD,
+  DARK_GROUND,
   DEFAULT_BROWSER_BAR,
   DEFAULT_CAM_POSE,
   DEFAULT_CAM_STYLE,
@@ -6848,6 +7292,8 @@ export {
   DIGEST_VERSION,
   DOC_SCHEMA_VERSION,
   DRAG_FIT_LEVEL,
+  END_CARD_SECONDS,
+  ENTRANCE_SECONDS,
   EXPORT_RESOLUTION_OPTIONS,
   EXPORT_SHORT_EDGE,
   FOLLOW_RECENTER,
@@ -6855,6 +7301,8 @@ export {
   FRAME_BORDER_COLOR_DEFAULT,
   FRAME_BORDER_DEFAULT,
   FRAME_BORDER_WIDTH_DEFAULT,
+  HOUSE_GRADIENT,
+  LOOK_KINDS,
   MINIMAL_BAR_THEMES,
   MOTION_DELTA,
   MOTION_EASE,
@@ -6869,6 +7317,7 @@ export {
   OVERLAY_SIZE_MIN,
   OVERLAY_TRANSITION_DUR,
   OVERLAY_Z,
+  PLATE_GROUND,
   PLAYBACK_ACTIVITY,
   PROGRAM_RETIME,
   REJECT_OVERLAP,
@@ -6912,6 +7361,7 @@ export {
   ZOOM_STYLE_OPTIONS,
   anchorKindOf,
   anchorSourceDuration,
+  applyLook,
   aspectRatioValue,
   audioLane,
   backdropMedia,
@@ -6923,7 +7373,9 @@ export {
   camRectFromPose,
   camRestPose,
   camTrackFromDoc,
+  cardInset,
   cardPointToScreen,
+  cardPoseTrack,
   clampCamFrac,
   clampCamSize,
   clampFocus,
@@ -6947,8 +7399,10 @@ export {
   docToFullSpace,
   duckCurve,
   effectiveSegments,
+  entranceSeconds,
   envelopeAt,
   envelopeValueAt,
+  expandEndCard,
   expectedFrameSize,
   exportSizeFor,
   extractClicks,
@@ -6956,13 +7410,17 @@ export {
   followFocusEvents,
   frameGeometry,
   hexToRgbTriplet,
+  houseLook,
   idleGaps,
+  isLookKind,
   isMusicBed,
   isPlayback,
   isProgramDoc,
   isRecordingDoc,
   isRejected,
   levelForFocusFraction,
+  lookFromBrand,
+  lookKindForGround,
   lowerProgramDoc,
   lowerStudioDoc,
   lowerToComposition,
@@ -7024,6 +7482,7 @@ export {
   videoLane,
   voiceKey,
   withBackdrop,
+  withHolds,
   withoutRejected,
   wrapProgramLength,
   zoomCoversRect,