@cueframe/kernel 0.2.52 → 0.2.54

package/dist/mcp/server.js

@@ -8,26 +8,26 @@ import {
   registerRawTools,
   registerSkillPrompts,
   titleCase
-} from "../chunk-WZ22ZYXD.js";
-import "../chunk-3OG2674K.js";
-import "../chunk-JWW54N24.js";
+} from "../chunk-C3ARYFN6.js";
+import "../chunk-ZDE5S3DE.js";
+import "../chunk-VYSBZUXZ.js";
 import "../chunk-4WBSXHQA.js";
-import "../chunk-2M65KQNG.js";
-import "../chunk-IHXMBXXL.js";
-import "../chunk-3I43W7DP.js";
+import "../chunk-V6GL37RZ.js";
+import "../chunk-SIGKJOSF.js";
+import "../chunk-GZMKTLO3.js";
 import "../chunk-QH3YI3ND.js";
 import "../chunk-JPMVNMF3.js";
 import "../chunk-IMIUHG2E.js";
 import "../chunk-VZ7TYX6Z.js";
 import "../chunk-T56BK7NS.js";
-import "../chunk-5JCLZPMV.js";
-import "../chunk-MBSQKRDF.js";
-import "../chunk-CV3QQUMK.js";
+import "../chunk-T7WKIMTB.js";
+import "../chunk-QCGT3M7M.js";
+import "../chunk-VKZTGD5Z.js";
 import "../chunk-WPZKOVYF.js";
 import "../chunk-B7J5UUUV.js";
 import "../chunk-KYRDKK2D.js";
-import "../chunk-6WQHVYJD.js";
-import "../chunk-Z6NY6MCL.js";
+import "../chunk-G7ZSFSQG.js";
+import "../chunk-RMLGMYEJ.js";
 import "../chunk-WREYUH2E.js";
 import "../chunk-ILO4NEZ3.js";
 import "../chunk-E63UEO5C.js";
@@ -35,7 +35,7 @@ import "../chunk-7PA7FGLD.js";
 import "../chunk-VG2ND6PX.js";
 import "../chunk-CL5Y6V6K.js";
 import "../chunk-2L7PYYJK.js";
-import "../chunk-AVTEPAWI.js";
+import "../chunk-7RGDRDAR.js";
 import "../chunk-2ESYSVXG.js";
 export {
   RAW_EXCLUDED_OPERATION_IDS,

package/dist/mcp.js

@@ -8,26 +8,26 @@ import {
   buildServer,
   registerCuratedTools,
   registerRawTools
-} from "./chunk-WZ22ZYXD.js";
-import "./chunk-3OG2674K.js";
-import "./chunk-JWW54N24.js";
+} from "./chunk-C3ARYFN6.js";
+import "./chunk-ZDE5S3DE.js";
+import "./chunk-VYSBZUXZ.js";
 import "./chunk-4WBSXHQA.js";
-import "./chunk-2M65KQNG.js";
-import "./chunk-IHXMBXXL.js";
-import "./chunk-3I43W7DP.js";
+import "./chunk-V6GL37RZ.js";
+import "./chunk-SIGKJOSF.js";
+import "./chunk-GZMKTLO3.js";
 import "./chunk-QH3YI3ND.js";
 import "./chunk-JPMVNMF3.js";
 import "./chunk-IMIUHG2E.js";
 import "./chunk-VZ7TYX6Z.js";
 import "./chunk-T56BK7NS.js";
-import "./chunk-5JCLZPMV.js";
-import "./chunk-MBSQKRDF.js";
-import "./chunk-CV3QQUMK.js";
+import "./chunk-T7WKIMTB.js";
+import "./chunk-QCGT3M7M.js";
+import "./chunk-VKZTGD5Z.js";
 import "./chunk-WPZKOVYF.js";
 import "./chunk-B7J5UUUV.js";
 import "./chunk-KYRDKK2D.js";
-import "./chunk-6WQHVYJD.js";
-import "./chunk-Z6NY6MCL.js";
+import "./chunk-G7ZSFSQG.js";
+import "./chunk-RMLGMYEJ.js";
 import "./chunk-WREYUH2E.js";
 import "./chunk-ILO4NEZ3.js";
 import "./chunk-E63UEO5C.js";
@@ -35,7 +35,7 @@ import "./chunk-7PA7FGLD.js";
 import "./chunk-VG2ND6PX.js";
 import "./chunk-CL5Y6V6K.js";
 import "./chunk-2L7PYYJK.js";
-import "./chunk-AVTEPAWI.js";
+import "./chunk-7RGDRDAR.js";
 import "./chunk-2ESYSVXG.js";
 export {
   API_URLS,

package/dist/primitives/captions.js

@@ -1,6 +1,6 @@
 import {
   Marker
-} from "../chunk-D2EG7J7X.js";
+} from "../chunk-DFB7UFZD.js";
 import {
   fillStyle
 } from "../chunk-XLIPPLG3.js";
@@ -13,13 +13,13 @@ import {
 } from "../chunk-W2245F6G.js";
 import {
   resolveCaptionFaces
-} from "../chunk-AVTEPAWI.js";
+} from "../chunk-7RGDRDAR.js";
 import "../chunk-2ESYSVXG.js";
 
 // ../execution/primitives/src/captions/Captions.tsx
 import { useMemo } from "react";
 import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, Easing } from "remotion";
-import { fillTextBox } from "@remotion/layout-utils";
+import { fillTextBox, measureText } from "@remotion/layout-utils";
 
 // ../execution/primitives/src/captions/paginate.ts
 import { createTikTokStyleCaptions } from "@remotion/captions";
@@ -154,7 +154,32 @@ function plateStyleFor(kind, backgroundColor) {
 }
 var COMBINE_TOKENS_MS = 1500;
 var CAPTION_LINGER_MS = 600;
-function addTokenToBox(box, token, fontFamily, fontSize, fontWeight, emphasis) {
+function measuredTextBox(maxWidth, maxLines, gapPx) {
+  const lineWidths = [0];
+  return {
+    add: (word) => {
+      const widthOf = (text) => measureText({ ...word, text }).width;
+      const current = lineWidths.length - 1;
+      const width = widthOf(lineWidths[current] === 0 ? word.text.trimStart() : word.text);
+      const nextWidth = lineWidths[current] + (lineWidths[current] ? gapPx : 0) + width;
+      if (Math.ceil(nextWidth) < maxWidth) {
+        lineWidths[current] = nextWidth;
+        return { exceedsBox: false, newLine: false };
+      }
+      const firstWidth = widthOf(word.text.trimStart());
+      if (current + 1 >= maxLines || Math.ceil(firstWidth) >= maxWidth) {
+        return { exceedsBox: true, newLine: false };
+      }
+      lineWidths.push(firstWidth);
+      return { exceedsBox: false, newLine: true };
+    }
+  };
+}
+function tokenBox(maxWidth, maxLines, fontSize, letterSpacing, wordGapEm, textTransform, emphasis) {
+  const needsMeasured = emphasis?.emphasisFontStyle === "italic" || letterSpacing !== 0 || (emphasis?.emphasisLetterSpacing ?? 0) !== 0 || wordGapEm !== void 0 || textTransform !== void 0 && textTransform !== "none" || emphasis?.emphasisTextTransform !== void 0 && emphasis.emphasisTextTransform !== "none";
+  return needsMeasured ? measuredTextBox(maxWidth, maxLines, fontSize * (wordGapEm ?? 0.35)) : fillTextBox({ maxBoxWidth: maxWidth, maxLines });
+}
+function addTokenToBox(box, token, fontFamily, fontSize, fontWeight, letterSpacing, textTransform, emphasis) {
   const isEmp = emphasis?.emphasisSet.has(token.fromMs) ?? false;
   const tokenSize = isEmp ? Math.round(fontSize * (emphasis?.emphasisScale ?? 1.2)) : fontSize;
   const tokenWeight = emphasis && isEmp ? emphasis.emphasisFontWeight : fontWeight;
@@ -163,22 +188,25 @@ function addTokenToBox(box, token, fontFamily, fontSize, fontWeight, emphasis) {
     text: token.text,
     fontFamily: tokenFamily,
     fontSize: tokenSize,
-    fontWeight: String(tokenWeight)
+    fontWeight: String(tokenWeight),
+    ...(isEmp ? emphasis?.emphasisLetterSpacing : letterSpacing) ? { letterSpacing: `${isEmp ? emphasis?.emphasisLetterSpacing : letterSpacing}px` } : {},
+    ...isEmp ? { textTransform: emphasis?.emphasisTextTransform } : { textTransform },
+    ...isEmp && emphasis?.emphasisFontStyle === "italic" ? { additionalStyles: { fontStyle: "italic" } } : {}
   });
 }
-function makeBoxFactory(maxWidth, maxLines, fontFamily, fontSize, fontWeight, emphasis) {
+function makeBoxFactory(maxWidth, maxLines, fontFamily, fontSize, fontWeight, letterSpacing, wordGapEm, textTransform, emphasis) {
   return () => {
-    const box = fillTextBox({ maxBoxWidth: maxWidth, maxLines });
+    const box = tokenBox(maxWidth, maxLines, fontSize, letterSpacing, wordGapEm, textTransform, emphasis);
     return {
-      add: (token) => !addTokenToBox(box, token, fontFamily, fontSize, fontWeight, emphasis).exceedsBox
+      add: (token) => !addTokenToBox(box, token, fontFamily, fontSize, fontWeight, letterSpacing, textTransform, emphasis).exceedsBox
     };
   };
 }
-function layoutTokensIntoLines(tokens, maxWidth, maxLines, fontFamily, fontSize, fontWeight, emphasis) {
-  const box = fillTextBox({ maxBoxWidth: maxWidth, maxLines });
+function layoutTokensIntoLines(tokens, maxWidth, maxLines, fontFamily, fontSize, fontWeight, letterSpacing, wordGapEm, textTransform, emphasis) {
+  const box = tokenBox(maxWidth, maxLines, fontSize, letterSpacing, wordGapEm, textTransform, emphasis);
   const lines = [[]];
   for (const token of tokens) {
-    const result = addTokenToBox(box, token, fontFamily, fontSize, fontWeight, emphasis);
+    const result = addTokenToBox(box, token, fontFamily, fontSize, fontWeight, letterSpacing, textTransform, emphasis);
     if (result.newLine) {
       lines.push([token]);
     } else {
@@ -187,10 +215,73 @@ function layoutTokensIntoLines(tokens, maxWidth, maxLines, fontFamily, fontSize,
   }
   return lines.filter((line) => line.length > 0);
 }
+function layoutFitError(label, detail) {
+  const error = new Error(`Caption layout${label ? ` ${label}` : " word range"} does not fit one page in its region${detail ? ` (${detail})` : ""}; enlarge the region or split the range`);
+  error.name = "CaptionLayoutFitError";
+  return error;
+}
+function tokenRuns(tokens, emphasisSet, emphasisPlate) {
+  const runs = [];
+  for (const token of tokens) {
+    const emph = emphasisSet.has(token.fromMs);
+    const last = runs[runs.length - 1];
+    if (emphasisPlate && emph && last?.emph) last.tokens.push(token);
+    else runs.push({ tokens: [token], emph });
+  }
+  return runs;
+}
+function measureVisualRun(run, fontSize, style, faces) {
+  const plate = style.emphasisPlate ?? false;
+  const emph = run.emph;
+  const text = emph && plate ? run.tokens.map((token) => token.text.trim()).join(" ") : plate ? run.tokens[0].text.trim() : run.tokens[0].text;
+  const size = emph ? Math.round(fontSize * (style.emphasisScale ?? 1.08)) : fontSize;
+  const transform = emph ? style.emphasisTextTransform ?? style.textTransform : style.textTransform;
+  const letterSpacing = emph ? style.emphasisLetterSpacing ?? style.letterSpacing : style.letterSpacing;
+  return measureText({
+    text,
+    fontFamily: emph ? faces.emphasis.stack : faces.base.stack,
+    fontSize: size,
+    fontWeight: String(emph ? faces.emphasis.weight : faces.base.weight),
+    ...transform ? { textTransform: transform } : {},
+    ...letterSpacing !== void 0 ? { letterSpacing: `${letterSpacing}px` } : {},
+    ...emph && faces.emphasis.style === "italic" ? { additionalStyles: { fontStyle: "italic" } } : {}
+  }).width + (emph && plate ? 2 * Math.round(size * (style.emphasisPlatePadX ?? 0.16)) : 0);
+}
+function layoutAuthoredTokensIntoLines(tokens, maxWidth, maxLines, fontSize, style, emphasisSet, faces, label) {
+  const lines = [[]];
+  let lineWidth = 0;
+  const plate = style.emphasisPlate ?? false;
+  const runGap = fontSize * (style.wordGapEm ?? 0.35);
+  for (const run of tokenRuns(tokens, emphasisSet, plate)) {
+    const width = measureVisualRun(run, fontSize, style, faces);
+    if (Math.ceil(width) > maxWidth) {
+      throw layoutFitError(label, `run needs ${Math.ceil(width)}px, box has ${Math.floor(maxWidth)}px`);
+    }
+    const current = lines[lines.length - 1];
+    const nextWidth = lineWidth + (current.length ? runGap : 0) + width;
+    if (Math.ceil(nextWidth) > maxWidth) {
+      if (lines.length >= maxLines) {
+        throw layoutFitError(label, `needs ${lines.length + 1} lines, box allows ${maxLines}`);
+      }
+      lines.push([...run.tokens]);
+      lineWidth = width;
+    } else {
+      current.push(...run.tokens);
+      lineWidth = nextWidth;
+    }
+  }
+  return lines.filter((line) => line.length > 0);
+}
 function Captions({
   segments,
   style: userStyle,
-  region
+  region,
+  holdUntilMs,
+  scale,
+  rotation,
+  syncWordVisibility,
+  singlePageRequired,
+  layoutLabel
 }) {
   const frame = useCurrentFrame();
   const { fps, width, height } = useVideoConfig();
@@ -206,7 +297,8 @@ function Captions({
   const emphasisFontFamily = faces.emphasis.stack;
   const emphasisFontWeight = faces.emphasis.weight;
   const emphasisTextTransform = style.emphasisTextTransform ?? style.textTransform;
-  const emphasisLetterSpacing = style.emphasisLetterSpacing ?? 0;
+  const letterSpacing = style.letterSpacing ?? 0;
+  const emphasisLetterSpacing = style.emphasisLetterSpacing ?? letterSpacing;
   const emphasisFontStyle = faces.emphasis.style;
   const entrance = style.entrance ?? "none";
   const entranceFrames = Math.max(1, Math.round((style.entranceMs ?? 160) / 1e3 * fps));
@@ -220,17 +312,25 @@ function Captions({
   const plateRadius = style.emphasisPlateRadius ?? 6;
   const platePadX = style.emphasisPlatePadX ?? 0.16;
   const platePadY = style.emphasisPlatePadY ?? 0.04;
+  const plateReveal = style.emphasisPlateReveal ?? false;
   const annotationColor = style.annotationColor ?? VIOLET;
+  const annotationStrokeWidth = style.annotationStrokeWidth ?? 4;
   const maxWidthPercent = style.maxWidthPercent ?? 80;
   const plateStyle = plateStyleFor(style.plate ?? "glass", style.backgroundColor);
   const fontSize = Math.round(height * (style.fontSize / 100));
+  const wordGapPx = fontSize * (style.wordGapEm ?? 0.35);
+  const lineGapPx = fontSize * (style.lineGapEm ?? 0.25);
   const authoredRegion = userStyle?.region;
   const regionWidth = authoredRegion ? width * authoredRegion.w : width;
   const maxTextWidth = authoredRegion ? Math.min(width * (maxWidthPercent / 100), regionWidth - fontSize * 1.6) : width * (maxWidthPercent / 100);
   const availableHeight = authoredRegion ? height * authoredRegion.h - fontSize * 0.8 : Infinity;
   const lineHeight = fontSize * Math.max(1, emphasisScale) * 1.2;
-  const maxLines = authoredRegion ? Math.min(3, Math.floor((availableHeight + fontSize * 0.25) / (lineHeight + fontSize * 0.25))) : 3;
+  const maxLines = authoredRegion ? Math.min(3, Math.floor((availableHeight + lineGapPx) / (lineHeight + lineGapPx))) : 3;
   if (authoredRegion && (maxTextWidth <= 0 || maxLines < 1)) {
+    if (singlePageRequired) throw layoutFitError(
+      layoutLabel,
+      maxTextWidth <= 0 ? `box has ${Math.floor(maxTextWidth)}px text width` : "box allows no complete line"
+    );
     throw new Error("Caption style.region is too small for one caption line at the authored font size");
   }
   const { emphasisStartMs, annotateKind } = useMemo(() => {
@@ -243,16 +343,78 @@ function Captions({
     return { emphasisStartMs: emph, annotateKind: ann };
   }, [segments]);
   const emphasisLayout = useMemo(
-    () => emphasisStartMs.size > 0 ? { emphasisSet: emphasisStartMs, emphasisScale, emphasisFontFamily, emphasisFontWeight } : void 0,
-    [emphasisStartMs, emphasisScale, emphasisFontFamily, emphasisFontWeight]
+    () => emphasisStartMs.size > 0 ? {
+      emphasisSet: emphasisStartMs,
+      emphasisScale,
+      emphasisFontFamily,
+      emphasisFontWeight,
+      emphasisFontStyle,
+      emphasisLetterSpacing,
+      emphasisTextTransform
+    } : void 0,
+    [
+      emphasisStartMs,
+      emphasisScale,
+      emphasisFontFamily,
+      emphasisFontWeight,
+      emphasisFontStyle,
+      emphasisLetterSpacing,
+      emphasisTextTransform
+    ]
   );
   const pages = useMemo(
-    () => paginateCaptionSegments(segments, {
-      combineMs: COMBINE_TOKENS_MS,
-      makeBox: makeBoxFactory(maxTextWidth, maxLines, style.fontFamily, fontSize, style.fontWeight, emphasisLayout),
-      lingerMs: CAPTION_LINGER_MS
-    }),
-    [segments, maxTextWidth, maxLines, fontSize, style.fontFamily, style.fontWeight, emphasisLayout]
+    () => {
+      const makeBox = makeBoxFactory(
+        maxTextWidth,
+        maxLines,
+        style.fontFamily,
+        fontSize,
+        style.fontWeight,
+        letterSpacing,
+        style.wordGapEm,
+        style.textTransform,
+        emphasisLayout
+      );
+      const paginated = paginateCaptionSegments(segments, {
+        combineMs: singlePageRequired ? Number.MAX_SAFE_INTEGER : COMBINE_TOKENS_MS,
+        makeBox: singlePageRequired ? () => ({ add: () => true }) : makeBox,
+        lingerMs: CAPTION_LINGER_MS
+      });
+      if (singlePageRequired) {
+        if (paginated.length !== 1) {
+          throw layoutFitError(layoutLabel);
+        }
+        layoutAuthoredTokensIntoLines(
+          paginated[0].tokens,
+          maxTextWidth,
+          maxLines,
+          fontSize,
+          style,
+          emphasisStartMs,
+          faces,
+          layoutLabel
+        );
+      }
+      if (holdUntilMs !== void 0 && paginated.length > 0) {
+        const last = paginated[paginated.length - 1];
+        last.durationMs = Math.max(1, holdUntilMs - last.startMs);
+      }
+      return paginated;
+    },
+    [
+      segments,
+      maxTextWidth,
+      maxLines,
+      fontSize,
+      style,
+      emphasisStartMs,
+      faces,
+      emphasisLayout,
+      letterSpacing,
+      holdUntilMs,
+      singlePageRequired,
+      layoutLabel
+    ]
   );
   if (pages.length === 0) return null;
   const currentTimeMs = frame / fps * 1e3;
@@ -277,16 +439,32 @@ function Captions({
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   }) : 1;
-  const lines = layoutTokensIntoLines(
+  const lines = singlePageRequired ? layoutAuthoredTokensIntoLines(
+    currentPage.tokens,
+    maxTextWidth,
+    maxLines,
+    fontSize,
+    style,
+    emphasisStartMs,
+    faces,
+    layoutLabel
+  ) : layoutTokensIntoLines(
     currentPage.tokens,
     maxTextWidth,
     maxLines,
     style.fontFamily,
     fontSize,
     style.fontWeight,
+    letterSpacing,
+    style.wordGapEm,
+    style.textTransform,
     emphasisLayout
   );
   const wrapperStyle = resolveCaptionPlacement(userStyle?.position, region, authoredRegion);
+  if (scale !== void 0 || rotation !== void 0) {
+    wrapperStyle.transform = `${wrapperStyle.transform ?? ""} rotate(${rotation ?? 0}deg) scale(${scale ?? 1})`.trim();
+    wrapperStyle.transformOrigin = "top left";
+  }
   return /* @__PURE__ */ React.createElement(AbsoluteFill, { style: { pointerEvents: "none" } }, /* @__PURE__ */ React.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -295,7 +473,7 @@ function Captions({
         display: "flex",
         flexDirection: "column",
         alignItems: authoredRegion ? "flex-start" : "center",
-        gap: `${fontSize * 0.25}px`,
+        gap: `${lineGapPx}px`,
         padding: `${fontSize * 0.4}px ${fontSize * 0.8}px`,
         borderRadius: fontSize * 0.5,
         ...plateStyle,
@@ -315,8 +493,8 @@ function Captions({
         if (entrance === "none") return { opacity: 1, scale: 1, y: 0 };
         const start = tokenStartFrame.get(first) ?? 0;
         if (entrance === "word-pop") {
-          const { opacity, scale } = wordPop(frame, fps, start, entranceFrames, isEmph ? 0.86 : 0.92);
-          return { opacity, scale, y: 0 };
+          const { opacity, scale: scale2 } = wordPop(frame, fps, start, entranceFrames, isEmph ? 0.86 : 0.92);
+          return { opacity, scale: scale2, y: 0 };
         }
         if (entrance === "stagger-up") {
           const y = interpolate(frame, [start, start + entranceFrames], [RISE_PX, 0], {
@@ -332,21 +510,18 @@ function Captions({
         return { opacity: 1, scale: 1, y: 0 };
       };
       return lines.map((line, lineIdx) => {
-        const segs = [];
-        for (const t of line) {
-          const e = emphasisStartMs.has(t.fromMs);
-          const last = segs[segs.length - 1];
-          if (emphasisPlate && e && last && last.emph) last.tokens.push(t);
-          else segs.push({ tokens: [t], emph: e });
-        }
-        return /* @__PURE__ */ React.createElement("div", { key: lineIdx, style: { display: "flex", justifyContent: authoredRegion ? "flex-start" : "center", alignItems: "baseline", gap: `${fontSize * 0.35}px` } }, segs.map((seg, si) => {
+        const segs = tokenRuns(line, emphasisStartMs, emphasisPlate);
+        return /* @__PURE__ */ React.createElement("div", { key: lineIdx, style: { display: "flex", justifyContent: authoredRegion ? "flex-start" : "center", alignItems: "baseline", gap: `${wordGapPx}px` } }, segs.map((seg, si) => {
           const first = seg.tokens[0];
-          const { opacity, scale, y } = entranceOf(first, seg.emph);
-          const entranceTransform = `translateY(${y}px) scale(${scale})`;
-          const annKind = seg.tokens.map((t) => annotateKind.get(t.fromMs)).find(Boolean);
+          const entered = entranceOf(first, seg.emph);
+          const opacity = syncWordVisibility && currentTimeMs < first.fromMs ? 0 : entered.opacity;
+          const { scale: scale2, y } = entered;
+          const entranceTransform = `translateY(${y}px) scale(${scale2})`;
+          const annotatedToken = seg.tokens.find((token2) => annotateKind.has(token2.fromMs));
+          const annKind = annotatedToken ? annotateKind.get(annotatedToken.fromMs) : void 0;
           let markerP = 1;
-          if (annKind && entrance !== "none") {
-            const ms = (tokenStartFrame.get(first) ?? 0) + Math.round(fps * 0.14);
+          if (annKind && annotatedToken && entrance !== "none") {
+            const ms = (tokenStartFrame.get(annotatedToken) ?? 0) + Math.round(fps * 0.14);
             markerP = interpolate(frame, [ms, ms + Math.round(fps * 0.32)], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
           }
           if (seg.emph && emphasisPlate) {
@@ -354,7 +529,16 @@ function Captions({
             const bg = idx % 2 === 0 ? plateColor : plateAltColor;
             const fg = idx % 2 === 0 ? plateTextColor : plateAltTextColor;
             const efs = Math.round(fontSize * emphasisScale);
-            return /* @__PURE__ */ React.createElement("span", { key: si, style: { position: "relative", display: "inline-block", opacity, transform: entranceTransform, transformOrigin: "center" } }, /* @__PURE__ */ React.createElement(
+            const plateTokens = plateReveal ? seg.tokens.filter((token2) => currentTimeMs >= token2.fromMs) : seg.tokens;
+            const reservedWidth = plateReveal ? measureVisualRun(seg, fontSize, style, faces) : void 0;
+            return /* @__PURE__ */ React.createElement("span", { key: si, style: {
+              position: "relative",
+              display: "inline-block",
+              ...reservedWidth !== void 0 ? { width: reservedWidth } : {},
+              opacity,
+              transform: entranceTransform,
+              transformOrigin: "center"
+            } }, /* @__PURE__ */ React.createElement(
               "span",
               {
                 style: {
@@ -373,8 +557,10 @@ function Captions({
                   whiteSpace: "nowrap"
                 }
               },
-              seg.tokens.map((t) => t.text.trim()).join(" ")
-            ), annKind ? /* @__PURE__ */ React.createElement(Marker, { spec: { kind: annKind, color: annotationColor }, progress: markerP }) : null);
+              plateTokens.map((token2, tokenIndex) => /* @__PURE__ */ React.createElement("span", { key: token2.fromMs, style: {
+                opacity: syncWordVisibility && tokenIndex > 0 ? currentTimeMs < token2.fromMs ? 0 : entranceOf(token2, true).opacity : 1
+              } }, tokenIndex > 0 ? " " : "", token2.text.trim()))
+            ), annKind && annotatedToken && currentTimeMs >= annotatedToken.fromMs ? /* @__PURE__ */ React.createElement(Marker, { spec: { kind: annKind, color: annotationColor, strokeWidth: annotationStrokeWidth }, progress: markerP }) : null);
           }
           const token = first;
           const isActive = token === activeToken;
@@ -383,7 +569,7 @@ function Captions({
           const tokenWeight = isEmphasis ? emphasisFontWeight : style.fontWeight;
           const tokenFamily = isEmphasis ? emphasisFontFamily : style.fontFamily;
           const tokenTransform = isEmphasis ? emphasisTextTransform : style.textTransform;
-          const tokenLetterSpacing = isEmphasis && emphasisLetterSpacing ? `${emphasisLetterSpacing}px` : void 0;
+          const tokenLetterSpacing = isEmphasis ? emphasisLetterSpacing ? `${emphasisLetterSpacing}px` : void 0 : letterSpacing ? `${letterSpacing}px` : void 0;
           const tokenFontStyle = isEmphasis ? emphasisFontStyle : "normal";
           let tokenColor = style.color;
           if (isActive && !emphasisPlate) tokenColor = style.highlightColor;
@@ -406,12 +592,58 @@ function Captions({
             },
             emphasisPlate ? token.text.trim() : token.text
           );
-          return /* @__PURE__ */ React.createElement("span", { key: si, style: { position: "relative", display: "inline-block", opacity, transform: entranceTransform, transformOrigin: "center" } }, inner, annKind ? /* @__PURE__ */ React.createElement(Marker, { spec: { kind: annKind, color: annotationColor }, progress: markerP }) : null);
+          return /* @__PURE__ */ React.createElement("span", { key: si, style: { position: "relative", display: "inline-block", opacity, transform: entranceTransform, transformOrigin: "center" } }, inner, annKind && annotatedToken && currentTimeMs >= annotatedToken.fromMs ? /* @__PURE__ */ React.createElement(Marker, { spec: { kind: annKind, color: annotationColor, strokeWidth: annotationStrokeWidth }, progress: markerP }) : null);
         }));
       });
     })()
   )));
 }
+function CaptionLayoutLayer({
+  segments,
+  layouts,
+  style,
+  region
+}) {
+  if (!layouts?.length) return /* @__PURE__ */ React.createElement(Captions, { segments, style, region });
+  const placed = /* @__PURE__ */ new Set();
+  for (const layout of layouts) {
+    for (let word = layout.wordStartIndex; word < layout.wordEndIndex; word++) {
+      placed.add(`${layout.segmentIndex}:${word}`);
+    }
+  }
+  const remaining = segments.map((words, segmentIndex) => words.filter((_, wordIndex) => !placed.has(`${segmentIndex}:${wordIndex}`)));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Captions, { segments: remaining, style, region }), layouts.map((layout) => {
+    const source = segments[layout.segmentIndex];
+    if (!source) return null;
+    const marks = new Map((layout.wordMarks ?? []).map((mark) => [mark.wordIndex, mark]));
+    const words = source.slice(layout.wordStartIndex, layout.wordEndIndex).map((word, offset) => {
+      const mark = marks.get(layout.wordStartIndex + offset);
+      if (!mark) return word;
+      const updated = { ...word };
+      if (mark.emphasis !== void 0) updated.emphasis = mark.emphasis;
+      if (mark.annotate === null) delete updated.annotate;
+      else if (mark.annotate !== void 0) updated.annotate = mark.annotate;
+      return updated;
+    });
+    const hold = source[layout.holdThroughWordIndex ?? layout.wordEndIndex - 1];
+    return /* @__PURE__ */ React.createElement(
+      Captions,
+      {
+        key: `${layout.segmentIndex}:${layout.wordStartIndex}:${layout.wordEndIndex}`,
+        segments: [words],
+        style: { ...style, ...layout.style, region: layout.region },
+        region,
+        holdUntilMs: hold?.endMs,
+        scale: layout.scale,
+        rotation: layout.rotation,
+        syncWordVisibility: true,
+        singlePageRequired: true,
+        layoutLabel: `segment ${layout.segmentIndex} words ${layout.wordStartIndex}..${layout.wordEndIndex - 1}`
+      }
+    );
+  }));
+}
 export {
+  CaptionLayoutLayer,
   Captions
 };

package/dist/primitives/effects.js

@@ -12,15 +12,15 @@ import {
   Vignette,
   catalog,
   laneDepths
-} from "../chunk-5ZQLMPDY.js";
+} from "../chunk-GAACUQAB.js";
 import "../chunk-MFHXCHRI.js";
 import "../chunk-XHGZ2E77.js";
 import "../chunk-W2245F6G.js";
-import "../chunk-2PU2TSUG.js";
+import "../chunk-D5E5XFHK.js";
 import "../chunk-XV2K3AQT.js";
 import "../chunk-CL5Y6V6K.js";
 import "../chunk-2L7PYYJK.js";
-import "../chunk-AVTEPAWI.js";
+import "../chunk-7RGDRDAR.js";
 import "../chunk-2ESYSVXG.js";
 export {
   Blur,

package/dist/primitives/layouts.js

@@ -8,14 +8,14 @@ import {
   SplitScreen,
   StaggeredBentoGrid,
   catalog
-} from "../chunk-CZOVEX2D.js";
+} from "../chunk-CR3G2JQP.js";
 import "../chunk-XHGZ2E77.js";
 import "../chunk-W2245F6G.js";
-import "../chunk-2PU2TSUG.js";
+import "../chunk-D5E5XFHK.js";
 import "../chunk-XV2K3AQT.js";
 import "../chunk-CL5Y6V6K.js";
 import "../chunk-2L7PYYJK.js";
-import "../chunk-AVTEPAWI.js";
+import "../chunk-7RGDRDAR.js";
 import "../chunk-2ESYSVXG.js";
 export {
   ChatToPreviewLayout,

package/dist/primitives/lib/text/marker.js

@@ -1,6 +1,6 @@
 import {
   Marker
-} from "../../../chunk-D2EG7J7X.js";
+} from "../../../chunk-DFB7UFZD.js";
 import "../../../chunk-2ESYSVXG.js";
 export {
   Marker

package/dist/primitives/scenes.js

@@ -8,17 +8,17 @@ import {
   ProductLaunchTrailer,
   TerminalToBrowserDeploy,
   catalog
-} from "../chunk-4B4V3HYW.js";
+} from "../chunk-C6ONUJIO.js";
 import "../chunk-S5H6GH6M.js";
 import "../chunk-QAGGJHAF.js";
 import "../chunk-MFHXCHRI.js";
 import "../chunk-QGAWDLYX.js";
 import "../chunk-W2245F6G.js";
-import "../chunk-2PU2TSUG.js";
+import "../chunk-D5E5XFHK.js";
 import "../chunk-XV2K3AQT.js";
 import "../chunk-CL5Y6V6K.js";
 import "../chunk-2L7PYYJK.js";
-import "../chunk-AVTEPAWI.js";
+import "../chunk-7RGDRDAR.js";
 import "../chunk-2ESYSVXG.js";
 export {
   ChangelogBite,