@remixmate/template-core 1.3.0

package/dist/index.js

@@ -0,0 +1,2153 @@
+import React3, { useState, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+import { useCurrentFrame, AbsoluteFill, Video, Img, useVideoConfig, interpolate, Easing, Sequence, Audio, spring, OffthreadVideo, Loop, Freeze, delayRender, continueRender } from 'remotion';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/primitives/Background.tsx
+
+// src/utils/diagnostics.ts
+var SAFE_ID = /^[a-zA-Z0-9_.:-]{1,128}$/;
+var reported = /* @__PURE__ */ new Set();
+function sanitizeDiagnosticSrc(src) {
+  if (src.startsWith("data:")) {
+    const end = src.indexOf(";");
+    return src.slice(0, end > 0 ? end : 32);
+  }
+  return src.split(/[?#]/)[0] ?? src;
+}
+function reportSceneDegraded(report) {
+  const { templateId, reason, sceneId, slideId, dedupeKey, detail } = report;
+  const key = [templateId ?? "", sceneId ?? "", slideId ?? "", reason, dedupeKey ?? ""].join("|");
+  if (reported.has(key)) return;
+  reported.add(key);
+  const extra = {};
+  for (const [k, v] of Object.entries(detail ?? {})) {
+    if (v === void 0) continue;
+    extra[k] = k === "src" && typeof v === "string" ? sanitizeDiagnosticSrc(v) : v;
+  }
+  if (!SAFE_ID.test(reason)) {
+    console.warn(
+      `[core] degraded reason ${JSON.stringify(reason)} is not a safe id; the server will drop it`
+    );
+  }
+  console.warn(
+    "__diagnostic_v1__ " + JSON.stringify({
+      ...extra,
+      event: "template.scene.degraded",
+      ...templateId !== void 0 ? { template_id: templateId } : {},
+      ...sceneId !== void 0 ? { scene_id: sceneId } : {},
+      ...slideId !== void 0 ? { slide_id: slideId } : {},
+      reason
+    })
+  );
+}
+function resetSceneDegradedReports() {
+  reported.clear();
+}
+function useVideoProbe(src) {
+  const [status, setStatus] = useState({
+    src: null,
+    value: "pending"
+  });
+  useLayoutEffect(() => {
+    if (!src) return;
+    const handle = delayRender(`Probing background video ${src.split(/[?#]/)[0]}`);
+    let released = false;
+    const release = () => {
+      if (released) return;
+      released = true;
+      continueRender(handle);
+    };
+    const probe = document.createElement("video");
+    probe.preload = "metadata";
+    probe.muted = true;
+    const onLoaded = () => {
+      setStatus({ src, value: "ok" });
+      release();
+    };
+    const onError = () => {
+      setStatus({ src, value: "error" });
+      release();
+    };
+    probe.addEventListener("loadedmetadata", onLoaded, { once: true });
+    probe.addEventListener("error", onError, { once: true });
+    probe.src = src;
+    return () => {
+      probe.removeEventListener("loadedmetadata", onLoaded);
+      probe.removeEventListener("error", onError);
+      probe.removeAttribute("src");
+      probe.load();
+      release();
+    };
+  }, [src]);
+  return status.src === src ? status.value : "pending";
+}
+var PAN_AMPLITUDE_PCT = 5;
+var PAN_SCALE = 1.12;
+function backgroundMotionStyle(motion, progress) {
+  const p = Math.min(Math.max(progress, 0), 1);
+  switch (motion) {
+    case "kenburns-in":
+      return { transform: `scale(${1 + p * 0.15})` };
+    case "kenburns-out":
+      return { transform: `scale(${1 + (1 - p) * 0.15})` };
+    case "pan-left": {
+      const tx = PAN_AMPLITUDE_PCT - p * PAN_AMPLITUDE_PCT * 2;
+      return { transform: `translateX(${tx}%) scale(${PAN_SCALE})` };
+    }
+    case "pan-right": {
+      const tx = -PAN_AMPLITUDE_PCT + p * PAN_AMPLITUDE_PCT * 2;
+      return { transform: `translateX(${tx}%) scale(${PAN_SCALE})` };
+    }
+    default:
+      return {};
+  }
+}
+var FALLBACK_COLOR = "#1a1a2e";
+function warnBackgroundLoadFailed(src, type) {
+  reportSceneDegraded({
+    reason: "background_load_failed",
+    dedupeKey: src,
+    detail: { component: "Background", media_type: type, src }
+  });
+}
+var Background = ({
+  src,
+  type = "image",
+  color,
+  gradient,
+  motion = "static",
+  durationFrames,
+  fallbackColor = FALLBACK_COLOR
+}) => {
+  const frame = useCurrentFrame();
+  const progress = Math.min(frame / Math.max(durationFrames, 1), 1);
+  const motionStyle = backgroundMotionStyle(motion, progress);
+  const [failedSrc, setFailedSrc] = useState(null);
+  const handleError = useCallback(() => {
+    if (!src) return;
+    warnBackgroundLoadFailed(src, type === "video" ? "video" : "image");
+    setFailedSrc(src);
+  }, [src, type]);
+  const videoProbe = useVideoProbe(type === "video" && src ? src : null);
+  const videoFailed = type === "video" && videoProbe === "error";
+  useEffect(() => {
+    if (videoFailed && src) warnBackgroundLoadFailed(src, "video");
+  }, [videoFailed, src]);
+  if (color || gradient) {
+    return /* @__PURE__ */ jsx(
+      AbsoluteFill,
+      {
+        style: {
+          background: gradient || color || "#000"
+        }
+      }
+    );
+  }
+  if (!src || failedSrc === src || videoFailed) {
+    return /* @__PURE__ */ jsx(AbsoluteFill, { style: { backgroundColor: fallbackColor } });
+  }
+  if (type === "video") {
+    if (videoProbe !== "ok") return null;
+    return /* @__PURE__ */ jsx(AbsoluteFill, { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+      Video,
+      {
+        src,
+        muted: true,
+        loop: true,
+        onError: handleError,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          ...motionStyle
+        }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(AbsoluteFill, { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+    Img,
+    {
+      src,
+      onError: handleError,
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        ...motionStyle
+      }
+    }
+  ) });
+};
+function useAssetUrl(assetId, resolvedAssets) {
+  return useMemo(() => {
+    if (!assetId) return null;
+    const asset = resolvedAssets.find((a) => a.assetId === assetId);
+    if (!asset) return null;
+    return asset.url || asset.localPath || null;
+  }, [assetId, resolvedAssets]);
+}
+function resolveAssetUrl(assetId, resolvedAssets) {
+  if (!assetId) return null;
+  const asset = resolvedAssets.find((a) => a.assetId === assetId);
+  return asset?.url || asset?.localPath || null;
+}
+function resolveAsset(assetId, resolvedAssets) {
+  if (!assetId) return void 0;
+  return resolvedAssets.find((a) => a.assetId === assetId);
+}
+var MEDIA_OVERLAY_MASK = "linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.75) 45%, rgba(0,0,0,1) 78%, rgba(0,0,0,1) 100%)";
+function grainDataUri(blend) {
+  const tint = blend === "screen" ? 1 : 0;
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 ${tint} 0 0 0 0 ${tint} 0 0 0 0 ${tint} 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(#n)' opacity='0.55'/></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+function resolveSceneBackground(background, signaturePreset, defaultMediaMotion = "kenburns-in", defaultOverlayOpacity = 0.35) {
+  const preset = background?.preset ?? signaturePreset;
+  const isMedia = preset === "image" || preset === "video";
+  return {
+    preset,
+    isSignaturePreset: preset === signaturePreset,
+    isMedia,
+    paintCanvas: preset !== "none",
+    motion: background?.motion ?? defaultMediaMotion,
+    blurPx: Math.max(0, background?.blurPx ?? 0),
+    overlayOpacity: background?.overlayOpacity ?? (isMedia ? defaultOverlayOpacity : 0)
+  };
+}
+var SceneBackgroundLayer = ({
+  background,
+  resolvedAssets,
+  durationFrames,
+  canvasBg,
+  noiseBlend,
+  signaturePreset,
+  defaultGradient,
+  defaultMediaMotion = "kenburns-in",
+  defaultOverlayColor = "rgba(8, 10, 28, 1)",
+  defaultOverlayOpacity = 0.35,
+  signature,
+  depth
+}) => {
+  const { preset, isSignaturePreset, isMedia, paintCanvas, motion, blurPx, overlayOpacity } = resolveSceneBackground(
+    background,
+    signaturePreset,
+    defaultMediaMotion,
+    defaultOverlayOpacity
+  );
+  const imageSrc = preset === "image" ? resolveAssetUrl(background?.assetRef, resolvedAssets) || background?.imageUrl || null : null;
+  const videoSrc = preset === "video" ? resolveAssetUrl(background?.videoAssetRef, resolvedAssets) || background?.videoUrl || null : null;
+  const videoProbe = useVideoProbe(videoSrc);
+  const videoFailed = !!videoSrc && videoProbe === "error";
+  useEffect(() => {
+    if (videoFailed && videoSrc) warnBackgroundLoadFailed(videoSrc, "video");
+  }, [videoFailed, videoSrc]);
+  const overlayColor = background?.overlayColor ?? defaultOverlayColor;
+  const slotCtx = { preset, isSignaturePreset, isMedia };
+  return /* @__PURE__ */ jsxs(AbsoluteFill, { children: [
+    paintCanvas && /* @__PURE__ */ jsx(AbsoluteFill, { style: { backgroundColor: canvasBg } }),
+    preset === "solid" && /* @__PURE__ */ jsx(
+      AbsoluteFill,
+      {
+        style: {
+          background: background?.cssBackground || background?.color || canvasBg
+        }
+      }
+    ),
+    preset === "gradient" && /* @__PURE__ */ jsx(
+      AbsoluteFill,
+      {
+        style: {
+          background: background?.cssBackground || (background?.color ? `linear-gradient(160deg, ${background.color} 0%, ${canvasBg} 100%)` : defaultGradient)
+        }
+      }
+    ),
+    preset === "image" && imageSrc && /* @__PURE__ */ jsx(AbsoluteFill, { style: { overflow: "hidden" }, children: blurPx > 0 ? /* @__PURE__ */ jsx(AbsoluteFill, { style: { filter: `blur(${blurPx}px)` }, children: /* @__PURE__ */ jsx(
+      Background,
+      {
+        src: imageSrc,
+        type: "image",
+        motion,
+        durationFrames
+      }
+    ) }) : /* @__PURE__ */ jsx(
+      Background,
+      {
+        src: imageSrc,
+        type: "image",
+        motion,
+        durationFrames
+      }
+    ) }),
+    preset === "video" && videoFailed && /* @__PURE__ */ jsx(AbsoluteFill, { style: { backgroundColor: canvasBg } }),
+    preset === "video" && videoSrc && videoProbe === "ok" && /* @__PURE__ */ jsx(AbsoluteFill, { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+      Video,
+      {
+        src: videoSrc,
+        muted: background?.videoMuted ?? true,
+        loop: background?.videoLoop ?? true,
+        onError: () => void 0,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          filter: blurPx > 0 ? `blur(${blurPx}px)` : void 0
+        }
+      }
+    ) }),
+    preset === "noise" && /* @__PURE__ */ jsx(
+      AbsoluteFill,
+      {
+        style: {
+          opacity: background?.noiseOpacity ?? 0.4,
+          backgroundImage: grainDataUri(noiseBlend),
+          mixBlendMode: noiseBlend
+        }
+      }
+    ),
+    isMedia && overlayOpacity > 0 && /* @__PURE__ */ jsx(
+      AbsoluteFill,
+      {
+        style: {
+          // 平铺一色即可。html-slide 原本写成 linear-gradient(C 0%, C 100%)，
+          // 两种写法实测逐像素相同（2026-09-10，1920×1080 image preset），
+          // 取简洁的这一种。
+          background: overlayColor,
+          opacity: overlayOpacity,
+          maskImage: MEDIA_OVERLAY_MASK,
+          WebkitMaskImage: MEDIA_OVERLAY_MASK
+        }
+      }
+    ),
+    signature?.(slotCtx),
+    paintCanvas && depth?.(slotCtx)
+  ] });
+};
+var REFERENCE_LONG_EDGE = 1920;
+function useCanvasScale() {
+  const { width, height } = useVideoConfig();
+  return Math.max(width, height) / REFERENCE_LONG_EDGE;
+}
+
+// src/utils/fontStack.ts
+var WEIGHT_SUFFIXES = [
+  "Thin",
+  "ExtraLight",
+  "UltraLight",
+  "Light",
+  "Regular",
+  "Normal",
+  "Medium",
+  "Semibold",
+  "SemiBold",
+  "DemiBold",
+  "Bold",
+  "ExtraBold",
+  "UltraBold",
+  "Black",
+  "Heavy"
+];
+function deWeighted(family) {
+  for (const suffix of WEIGHT_SUFFIXES) {
+    if (family.length > suffix.length + 1 && family.endsWith(" " + suffix)) {
+      return family.slice(0, -(suffix.length + 1)).trim();
+    }
+  }
+  return void 0;
+}
+var CJK_FALLBACKS = ['"Noto Sans SC"', '"Noto Sans CJK SC"'];
+var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+  "sans-serif",
+  "serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-sans-serif",
+  "ui-serif",
+  "ui-monospace",
+  "ui-rounded"
+]);
+function quote(family) {
+  if (/^".*"$/.test(family) || /^'.*'$/.test(family)) return family;
+  if (/^[a-z-]+$/.test(family)) return family;
+  return `"${family}"`;
+}
+function fontStack(font) {
+  const entries = [];
+  const seen = /* @__PURE__ */ new Set();
+  let generic;
+  const push = (family) => {
+    const quoted = quote(family);
+    const key = quoted.toLowerCase();
+    if (seen.has(key)) return;
+    seen.add(key);
+    entries.push(quoted);
+  };
+  for (const raw of (font ?? "").split(",")) {
+    const family = raw.trim().replace(/^["']|["']$/g, "");
+    if (family.length === 0) continue;
+    if (GENERIC_FAMILIES.has(family.toLowerCase())) {
+      generic ??= family.toLowerCase();
+      continue;
+    }
+    push(family);
+    const bare = deWeighted(family);
+    if (bare) push(bare);
+  }
+  if (entries.length === 0) push("PingFang SC");
+  for (const fallback of CJK_FALLBACKS) push(fallback);
+  entries.push(generic ?? "sans-serif");
+  return entries.join(", ");
+}
+
+// src/utils/subtitleChunks.ts
+var DEFAULT_SPLIT_MAX_UNITS = 20;
+var DEFAULT_MIN_CHUNK_UNITS = 7;
+var LINE_FILL_LIMIT = 0.9;
+var BREAK_LEVELS = [
+  /[。！？!?]/,
+  // 句末
+  /[：:；;]/,
+  // 子句
+  /[，,]/,
+  // 逗号
+  /[、]/,
+  // 顿号（并列项之间，最弱）
+  / /
+  // 空格 —— 只为保护英文单词不被硬切
+];
+var TRAILING_PUNCT = /[。！？；，,、：:．.…]+$/;
+var ASCII_EM = {
+  // 小写
+  a: 0.572,
+  b: 0.602,
+  c: 0.561,
+  d: 0.602,
+  e: 0.567,
+  f: 0.346,
+  g: 0.602,
+  h: 0.577,
+  i: 0.275,
+  j: 0.276,
+  k: 0.553,
+  l: 0.254,
+  m: 0.884,
+  n: 0.581,
+  o: 0.6,
+  p: 0.602,
+  q: 0.602,
+  r: 0.374,
+  s: 0.525,
+  t: 0.362,
+  u: 0.582,
+  v: 0.506,
+  w: 0.777,
+  x: 0.537,
+  y: 0.526,
+  z: 0.506,
+  // 大写
+  A: 0.679,
+  B: 0.69,
+  C: 0.732,
+  D: 0.72,
+  E: 0.642,
+  F: 0.582,
+  G: 0.756,
+  H: 0.736,
+  I: 0.257,
+  J: 0.538,
+  K: 0.714,
+  L: 0.592,
+  M: 0.903,
+  N: 0.732,
+  O: 0.775,
+  P: 0.655,
+  Q: 0.775,
+  R: 0.697,
+  S: 0.651,
+  T: 0.615,
+  U: 0.734,
+  V: 0.659,
+  W: 0.953,
+  X: 0.664,
+  Y: 0.691,
+  Z: 0.639,
+  // 数字
+  "0": 0.6,
+  "1": 0.41,
+  "2": 0.6,
+  "3": 0.6,
+  "4": 0.6,
+  "5": 0.6,
+  "6": 0.6,
+  "7": 0.553,
+  "8": 0.6,
+  "9": 0.6,
+  // 标点与符号
+  " ": 0.333,
+  "!": 0.333,
+  '"': 0.488,
+  "#": 0.6,
+  $: 0.6,
+  "%": 0.996,
+  "&": 0.751,
+  "'": 0.281,
+  "(": 0.333,
+  ")": 0.333,
+  "*": 0.516,
+  "+": 0.605,
+  ",": 0.275,
+  "-": 0.605,
+  ".": 0.275,
+  "/": 0.5,
+  ":": 0.275,
+  ";": 0.275,
+  "<": 0.605,
+  "=": 0.605,
+  ">": 0.605,
+  "?": 0.558,
+  "@": 0.866,
+  "[": 0.333,
+  "\\": 0.5,
+  "]": 0.333,
+  "^": 0.545,
+  _: 0.5,
+  "`": 0.333,
+  "{": 0.333,
+  "|": 0.214,
+  "}": 0.333,
+  "~": 0.5
+};
+var FALLBACK_NARROW_EM = 0.55;
+function displayWidth(text) {
+  let width = 0;
+  for (const ch of text) {
+    if ((ch.codePointAt(0) ?? 0) >= 4352) {
+      width += 1;
+      continue;
+    }
+    width += ASCII_EM[ch] ?? FALLBACK_NARROW_EM;
+  }
+  return width;
+}
+var LATIN_RUN = /[A-Za-z]+/g;
+var CJK_PUNCT = new RegExp(
+  "[\\u3000-\\u303F\\uFF01-\\uFF0F\\uFF1A-\\uFF20\\uFF3B-\\uFF40\\uFF5B-\\uFF65]"
+);
+function spokenWeight(text) {
+  if (!text) return 0;
+  let weight = 0;
+  for (const ch of text) {
+    const cp = ch.codePointAt(0) ?? 0;
+    if (cp >= 4352) {
+      if (!CJK_PUNCT.test(ch)) weight += 1;
+    } else if (ch >= "0" && ch <= "9") weight += 1.2;
+  }
+  for (const [run] of text.matchAll(LATIN_RUN)) {
+    const isAcronym = run.length <= 5 && run === run.toUpperCase();
+    weight += isAcronym ? run.length : run.length * 0.33;
+  }
+  return weight;
+}
+function estimateLineCapacity(availableWidthPx, fontSizePx, letterSpacingPx = 0) {
+  const advance = fontSizePx + letterSpacingPx;
+  if (!(advance > 0) || !(availableWidthPx > 0)) return DEFAULT_SPLIT_MAX_UNITS;
+  return Math.max(1, Math.floor(availableWidthPx / advance));
+}
+function tokenize(text, breakAfter) {
+  const tokens = [];
+  let current = "";
+  for (const ch of text) {
+    current += ch;
+    if (breakAfter.test(ch)) {
+      tokens.push(current);
+      current = "";
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+function hardSplit(token, maxUnits) {
+  const total = displayWidth(token);
+  if (total <= maxUnits) return [token];
+  const out = [];
+  let current = "";
+  let width = 0;
+  let remainingWidth = total;
+  let remainingPieces = Math.ceil(total / maxUnits);
+  for (const ch of token) {
+    const w = displayWidth(ch);
+    const target = remainingWidth / remainingPieces;
+    const exceedsMax = width + w > maxUnits;
+    const exceedsTarget = width + w > target && remainingPieces > 1;
+    if (current && (exceedsMax || exceedsTarget)) {
+      out.push(current);
+      remainingWidth -= width;
+      remainingPieces = Math.max(1, remainingPieces - 1);
+      current = "";
+      width = 0;
+    }
+    current += ch;
+    width += w;
+  }
+  if (current) out.push(current);
+  return out;
+}
+function packTokens(tokens, target, maxUnits) {
+  const parts = [];
+  let current = "";
+  let width = 0;
+  for (const token of tokens) {
+    const w = displayWidth(token);
+    if (!current) {
+      current = token;
+      width = w;
+      continue;
+    }
+    const merged = width + w;
+    const worseThanStopping = Math.abs(merged - target) > Math.abs(width - target);
+    if (merged > maxUnits || worseThanStopping) {
+      parts.push(current);
+      current = token;
+      width = w;
+    } else {
+      current = current + token;
+      width = merged;
+    }
+  }
+  if (current) parts.push(current);
+  return parts;
+}
+function mergeShort(parts, minChunkUnits, splitMaxUnits) {
+  if (parts.length <= 1) return parts;
+  const out = [parts[0]];
+  for (let i = 1; i < parts.length; i++) {
+    const part = parts[i];
+    const prev = out[out.length - 1];
+    const prevWidth = displayWidth(prev);
+    const partWidth = displayWidth(part);
+    const tooShort = prevWidth < minChunkUnits || partWidth < minChunkUnits;
+    if (tooShort && prevWidth + partWidth <= splitMaxUnits) {
+      out[out.length - 1] = prev + part;
+    } else {
+      out.push(part);
+    }
+  }
+  return out;
+}
+function resolveThresholds(options) {
+  const maxUnitsPerLine = Math.max(1, options.maxUnitsPerLine);
+  const splitMax = Math.max(
+    1,
+    Math.min(
+      options.splitMaxUnits ?? DEFAULT_SPLIT_MAX_UNITS,
+      Math.floor(maxUnitsPerLine * LINE_FILL_LIMIT)
+    )
+  );
+  const minChunk = Math.min(
+    options.minChunkUnits ?? DEFAULT_MIN_CHUNK_UNITS,
+    splitMax
+  );
+  return { maxUnitsPerLine, splitMax, minChunk };
+}
+function splitSubtitleText(text, options) {
+  const trimmed = (text ?? "").trim();
+  if (!trimmed) return [];
+  const { splitMax, minChunk } = resolveThresholds(options);
+  const finish = (parts2) => parts2.map((part) => part.trim().replace(TRAILING_PUNCT, "").trim()).filter(Boolean);
+  if (displayWidth(trimmed) <= splitMax) return finish([trimmed]);
+  const tooWide = (part) => displayWidth(part) > splitMax;
+  const packAtLevel = (part, breakAfter) => {
+    const total = displayWidth(part);
+    const pieces = Math.max(1, Math.ceil(total / splitMax));
+    return packTokens(tokenize(part, breakAfter), total / pieces, splitMax);
+  };
+  let parts = [trimmed];
+  for (const breakAfter of BREAK_LEVELS) {
+    parts = parts.flatMap(
+      (part) => tooWide(part) ? packAtLevel(part, breakAfter) : [part]
+    );
+  }
+  parts = parts.flatMap(
+    (part) => tooWide(part) ? hardSplit(part, splitMax) : [part]
+  );
+  return finish(mergeShort(parts, minChunk, splitMax));
+}
+function chunkSubtitleSegments(segments, options) {
+  const { minFrames = 0 } = options;
+  const out = [];
+  for (const segment of segments) {
+    const span = segment.endFrame - segment.startFrame;
+    const parts = splitSubtitleText(segment.text, options);
+    if (parts.length === 0) continue;
+    if (parts.length === 1 || span < minFrames * parts.length) {
+      const whole = parts.length === 1 ? parts[0] : segment.text.trim().replace(TRAILING_PUNCT, "").trim();
+      out.push(whole === segment.text ? segment : { ...segment, text: whole });
+      continue;
+    }
+    const spoken = parts.map(spokenWeight);
+    const totalSpoken = spoken.reduce((sum, w) => sum + w, 0);
+    const weights = totalSpoken > 0 ? spoken : parts.map((part) => displayWidth(part));
+    const totalWeight = weights.reduce((sum, w) => sum + w, 0) || 1;
+    let cursor = segment.startFrame;
+    parts.forEach((part, i) => {
+      const remaining = parts.length - 1 - i;
+      let end;
+      if (remaining === 0) {
+        end = segment.endFrame;
+      } else {
+        const frames = Math.round(span * weights[i] / totalWeight);
+        end = Math.min(
+          Math.max(cursor + 1, cursor + frames),
+          segment.endFrame - remaining
+        );
+      }
+      out.push({ text: part, startFrame: cursor, endFrame: end });
+      cursor = end;
+    });
+  }
+  return out;
+}
+function resolveRunFadeOpacity(frame, runStart, runEnd, capFrames) {
+  const runLength = Math.max(0, runEnd - runStart);
+  const fade = Math.min(
+    Math.max(0, Math.floor(capFrames)),
+    Math.floor((runLength - 1) / 2)
+  );
+  if (fade < 1) return 1;
+  if (frame <= runStart || frame >= runEnd) return 0;
+  if (frame < runStart + fade) return (frame - runStart) / fade;
+  if (frame > runEnd - fade) return (runEnd - frame) / fade;
+  return 1;
+}
+function resolveChunkFadeOpacity(framesIntoChunk) {
+  const FLOOR = 0.35;
+  const FRAMES = 4;
+  if (framesIntoChunk <= 0) return FLOOR;
+  if (framesIntoChunk >= FRAMES) return 1;
+  return FLOOR + (1 - FLOOR) * (framesIntoChunk / FRAMES);
+}
+function resolveActiveChunk(chunks, frame, holdFrames) {
+  for (let i = 0; i < chunks.length; i++) {
+    const chunk = chunks[i];
+    if (frame >= chunk.startFrame && frame < chunk.endFrame) return chunk;
+    const next = chunks[i + 1];
+    if (next && frame >= chunk.endFrame && frame < next.startFrame && next.startFrame - chunk.endFrame <= holdFrames) {
+      return chunk;
+    }
+  }
+  return void 0;
+}
+var AUTO_BRIGHT_THRESHOLD = 0.55;
+var AUTO_DARK_THRESHOLD = 0.35;
+var SCRIM_HEIGHT_RATIO = 0.28;
+var DEFAULT_MAX_WIDTH_PCT = {
+  dark: 85,
+  light: 85,
+  scrim: 88,
+  stroke: 90,
+  none: 85
+};
+var HOLD_SEC = 0.5;
+var MIN_DWELL_SEC = 0.6;
+function resolveFontSize(mode, baseSize, scale, fontScale) {
+  const size = mode === "stroke" ? Math.max(baseSize + 2, 30) : baseSize;
+  return size * scale * fontScale;
+}
+var DEFAULT_BOTTOM_PX = {
+  dark: 80,
+  light: 80,
+  scrim: 80,
+  stroke: 80,
+  none: 0
+};
+var REFERENCE_HEIGHT = 1920;
+function resolveSubtitleBottomPx(mode, canvas, bottomRatio) {
+  if (bottomRatio !== void 0) return canvas.height * bottomRatio;
+  return DEFAULT_BOTTOM_PX[mode] * (canvas.height / REFERENCE_HEIGHT);
+}
+function resolveSubtitleMode(mode, captionStyle, backgroundLuma) {
+  const requested = mode ?? (captionStyle === "stroke" ? "stroke" : captionStyle === "pill" ? "dark" : void 0);
+  if (requested === void 0) return "dark";
+  if (requested !== "auto") return requested;
+  if (typeof backgroundLuma !== "number" || !Number.isFinite(backgroundLuma)) {
+    return "scrim";
+  }
+  if (backgroundLuma > AUTO_BRIGHT_THRESHOLD) return "dark";
+  if (backgroundLuma < AUTO_DARK_THRESHOLD) return "light";
+  return "scrim";
+}
+var SubtitleBar = ({
+  segments,
+  style = "bottom",
+  typography,
+  captionStyle,
+  mode,
+  bottomRatio,
+  fontScale = 1,
+  maxWidthPct,
+  backgroundLuma
+}) => {
+  const frame = useCurrentFrame();
+  const scale = useCanvasScale();
+  const { width, height, fps } = useVideoConfig();
+  const resolved = resolveSubtitleMode(mode, captionStyle, backgroundLuma);
+  const bodyFamily = fontStack(typography?.bodyFont);
+  const baseSize = typography?.bodySize || 32;
+  const fontSize = resolveFontSize(resolved, baseSize, scale, fontScale);
+  const widthPct = maxWidthPct ?? DEFAULT_MAX_WIDTH_PCT[resolved];
+  const chunks = React3.useMemo(
+    () => chunkSubtitleSegments(segments, {
+      maxUnitsPerLine: estimateLineCapacity(
+        width * widthPct / 100,
+        fontSize
+      ),
+      minFrames: Math.round(fps * MIN_DWELL_SEC)
+    }),
+    [segments, width, widthPct, fontSize, fps]
+  );
+  const active = resolveActiveChunk(
+    chunks,
+    frame,
+    Math.round(fps * HOLD_SEC)
+  );
+  if (resolved === "none" || !active) return null;
+  const runStart = chunks[0].startFrame;
+  const runEnd = chunks[chunks.length - 1].endFrame;
+  const scrimOpacity = resolveRunFadeOpacity(frame, runStart, runEnd, 8);
+  const plateOpacity = scrimOpacity;
+  const textOpacity = resolveChunkFadeOpacity(frame - active.startFrame);
+  const paddingBottom = resolveSubtitleBottomPx(resolved, { height }, bottomRatio);
+  const positionStyle = style === "center" ? { justifyContent: "center", alignItems: "center" } : { justifyContent: "flex-end", alignItems: "center", paddingBottom };
+  const plate = (background, color, shadow) => ({
+    backgroundColor: background,
+    color,
+    fontWeight: 600,
+    fontSize,
+    fontFamily: bodyFamily,
+    padding: `${16 * scale}px ${32 * scale}px`,
+    borderRadius: 12 * scale,
+    maxWidth: `${widthPct}%`,
+    textAlign: "center",
+    lineHeight: 1.4,
+    textShadow: shadow
+  });
+  let captionBoxStyle;
+  switch (resolved) {
+    case "light":
+      captionBoxStyle = plate(
+        "rgba(255, 255, 255, 0.85)",
+        "#1A1A1A",
+        // Weaker than the dark plate's: a light plate on a light photo still
+        // needs an edge, but a heavy shadow reads as dirty.
+        "0 1px 4px rgba(0,0,0,0.18)"
+      );
+      break;
+    case "scrim":
+      captionBoxStyle = {
+        ...plate("transparent", "#FFFFFF", "0 2px 10px rgba(0,0,0,0.7)"),
+        borderRadius: 0,
+        padding: `0 ${32 * scale}px`
+      };
+      break;
+    case "stroke":
+      captionBoxStyle = {
+        backgroundColor: "transparent",
+        color: "#FFFFFF",
+        fontSize,
+        fontWeight: 700,
+        fontFamily: bodyFamily,
+        padding: `${8 * scale}px ${16 * scale}px`,
+        maxWidth: `${widthPct}%`,
+        textAlign: "center",
+        lineHeight: 1.45,
+        textShadow: "1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 10px rgba(0,0,0,0.75)"
+      };
+      break;
+    case "dark":
+    default:
+      captionBoxStyle = plate(
+        "rgba(0, 0, 0, 0.65)",
+        "#FFFFFF",
+        "0 2px 8px rgba(0,0,0,0.55)"
+      );
+      break;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    resolved === "scrim" && style !== "center" && /* @__PURE__ */ jsx(AbsoluteFill, { style: { zIndex: 10, pointerEvents: "none" }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: `${SCRIM_HEIGHT_RATIO * 100}%`,
+          opacity: scrimOpacity,
+          background: "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 100%)"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AbsoluteFill, { style: { display: "flex", zIndex: 11, ...positionStyle }, children: /* @__PURE__ */ jsx("div", { style: { ...captionBoxStyle, opacity: plateOpacity }, children: /* @__PURE__ */ jsx("span", { style: { opacity: textOpacity }, children: active.text }) }) })
+  ] });
+};
+var TextLayer = ({
+  role,
+  content,
+  animation = "fade-in",
+  typography,
+  startFrame,
+  endFrame,
+  verticalLayout = "center",
+  offsetY = 0,
+  textShadow
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const scale = useCanvasScale();
+  const localFrame = frame - startFrame;
+  if (frame < startFrame || frame > endFrame) return null;
+  const animDuration = 20;
+  const getAnimationStyle = () => {
+    switch (animation) {
+      case "fade-in": {
+        const opacity = interpolate(localFrame, [0, animDuration], [0, 1], {
+          extrapolateRight: "clamp"
+        });
+        return { opacity };
+      }
+      case "slide-up": {
+        const opacity = interpolate(localFrame, [0, animDuration], [0, 1], {
+          extrapolateRight: "clamp"
+        });
+        const translateY = interpolate(
+          localFrame,
+          [0, animDuration],
+          [40, 0],
+          { extrapolateRight: "clamp" }
+        );
+        return { opacity, transform: `translateY(${translateY}px)` };
+      }
+      case "zoom-in": {
+        const s = spring({ fps, frame: localFrame, durationInFrames: animDuration });
+        return { transform: `scale(${0.5 + s * 0.5})`, opacity: s };
+      }
+      case "typewriter": {
+        const charsToShow = Math.floor(
+          interpolate(localFrame, [0, animDuration * 2], [0, content.length], {
+            extrapolateRight: "clamp"
+          })
+        );
+        return { clipPath: `inset(0 ${100 - charsToShow / content.length * 100}% 0 0)` };
+      }
+      default:
+        return {};
+    }
+  };
+  const getRoleStyle = () => {
+    const primary = typography?.primaryColor || "#FFFFFF";
+    const secondary = typography?.secondaryColor || "#E0E0E0";
+    const accent = typography?.accentColor || typography?.primaryColor || "#6C5CE7";
+    switch (role) {
+      case "title":
+        return {
+          fontSize: (typography?.titleSize || 56) * scale,
+          fontWeight: 700,
+          color: primary,
+          fontFamily: fontStack(typography?.titleFont),
+          textShadow: "0 2px 12px rgba(0,0,0,0.5)"
+        };
+      case "subtitle":
+        return {
+          fontSize: (typography?.bodySize || 32) * scale,
+          fontWeight: 500,
+          color: secondary,
+          fontFamily: fontStack(typography?.bodyFont),
+          textShadow: "0 1px 6px rgba(0,0,0,0.4)"
+        };
+      case "badge":
+        return {
+          fontSize: 24 * scale,
+          fontWeight: 600,
+          color: "#FFFFFF",
+          backgroundColor: accent,
+          fontFamily: fontStack(typography?.bodyFont),
+          padding: `${6 * scale}px ${18 * scale}px`,
+          borderRadius: 20 * scale,
+          display: "inline-block"
+        };
+      case "caption":
+        return {
+          fontSize: 28 * scale,
+          fontWeight: 500,
+          color: "#FFFFFF",
+          backgroundColor: "rgba(0,0,0,0.6)",
+          fontFamily: fontStack(typography?.bodyFont),
+          padding: `${8 * scale}px ${16 * scale}px`,
+          borderRadius: 6 * scale
+        };
+      case "callout":
+        return {
+          fontSize: 36 * scale,
+          fontWeight: 600,
+          color: primary,
+          fontFamily: fontStack(typography?.bodyFont),
+          borderLeft: `${4 * scale}px solid ${accent}`,
+          paddingLeft: 16 * scale
+        };
+    }
+  };
+  const getPositionStyle = () => {
+    switch (role) {
+      case "title":
+        if (verticalLayout === "top") {
+          return {
+            justifyContent: "flex-start",
+            alignItems: "center",
+            paddingTop: 88 * scale,
+            paddingLeft: 40 * scale,
+            paddingRight: 40 * scale
+          };
+        }
+        return {
+          justifyContent: "center",
+          alignItems: "center"
+        };
+      case "subtitle":
+        if (verticalLayout === "top") {
+          return {
+            justifyContent: "flex-start",
+            alignItems: "center",
+            paddingTop: 168 * scale,
+            paddingLeft: 40 * scale,
+            paddingRight: 40 * scale
+          };
+        }
+        return {
+          justifyContent: "center",
+          alignItems: "center"
+        };
+      case "badge":
+        return {
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+          padding: `${80 * scale}px ${40 * scale}px`
+        };
+      default:
+        return {
+          justifyContent: "center",
+          alignItems: "center"
+        };
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    AbsoluteFill,
+    {
+      style: {
+        display: "flex",
+        zIndex: 10,
+        ...getPositionStyle(),
+        ...offsetY ? { transform: `translateY(${offsetY * scale}px)` } : null
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            ...getRoleStyle(),
+            // 放在 getRoleStyle() 之后:显式传入的阴影要盖掉 role 的默认阴影。
+            // 用 !== undefined 而不是真值判断,这样传 "" 能真的去掉阴影。
+            ...textShadow !== void 0 ? { textShadow } : null,
+            ...getAnimationStyle(),
+            textAlign: "center"
+          },
+          children: content
+        }
+      )
+    }
+  );
+};
+var SceneTransition = ({
+  type,
+  durationFrames,
+  direction,
+  children
+}) => {
+  const frame = useCurrentFrame();
+  if (type === "flip-corner" && durationFrames > 0) {
+    const progress = interpolate(
+      frame,
+      [0, durationFrames],
+      [0, 1],
+      { extrapolateRight: "clamp", easing: Easing.inOut(Easing.ease) }
+    );
+    const t = progress * 2;
+    const foldCenterX = (1 - progress) * 100;
+    const foldCenterY = (1 - progress) * 100;
+    let clipPath;
+    if (t <= 1) {
+      const ry = (1 - t) * 100;
+      const bx = (1 - t) * 100;
+      clipPath = `polygon(100% ${ry}%, 100% 100%, ${bx}% 100%)`;
+    } else {
+      const tx = (2 - t) * 100;
+      const ly = (2 - t) * 100;
+      clipPath = `polygon(${tx}% 0%, 100% 0%, 100% 100%, 0% 100%, 0% ${ly}%)`;
+    }
+    if (direction === "in") {
+      return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { clipPath, overflow: "hidden" }, children: [
+        children,
+        /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          left: `${foldCenterX}%`,
+          top: `${foldCenterY}%`,
+          width: "250%",
+          height: 70,
+          transform: "translate(-50%, -50%) rotate(-45deg)",
+          background: "linear-gradient(to bottom, transparent, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.08) 70%, transparent)",
+          pointerEvents: "none"
+        } })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { overflow: "hidden" }, children: [
+      children,
+      /* @__PURE__ */ jsx("div", { style: {
+        position: "absolute",
+        left: `${foldCenterX}%`,
+        top: `${foldCenterY}%`,
+        width: "250%",
+        height: 36,
+        transform: "translate(-50%, -50%) rotate(-45deg)",
+        background: "linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(200,200,200,0.5) 18%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.96) 58%, rgba(210,210,210,0.45) 82%, rgba(0,0,0,0.08))",
+        pointerEvents: "none"
+      } }),
+      /* @__PURE__ */ jsx("div", { style: {
+        position: "absolute",
+        left: `${foldCenterX}%`,
+        top: `${foldCenterY}%`,
+        width: "250%",
+        height: 80,
+        transform: "translate(-50%, 0) rotate(-45deg)",
+        background: "linear-gradient(to bottom, transparent, rgba(0,0,0,0.12))",
+        pointerEvents: "none"
+      } })
+    ] });
+  }
+  const getStyle = () => {
+    if (durationFrames <= 0) return {};
+    switch (type) {
+      case "fade": {
+        const opacity = direction === "in" ? interpolate(frame, [0, durationFrames], [0, 1], {
+          extrapolateRight: "clamp"
+        }) : 1;
+        return { opacity };
+      }
+      case "slide-left": {
+        const tx = direction === "in" ? interpolate(frame, [0, durationFrames], [100, 0], {
+          extrapolateRight: "clamp"
+        }) : 0;
+        return { transform: `translateX(${tx}%)` };
+      }
+      case "slide-right": {
+        const tx = direction === "in" ? interpolate(frame, [0, durationFrames], [-100, 0], {
+          extrapolateRight: "clamp"
+        }) : 0;
+        return { transform: `translateX(${tx}%)` };
+      }
+      case "zoom": {
+        const scale = direction === "in" ? interpolate(frame, [0, durationFrames], [0.5, 1], {
+          extrapolateRight: "clamp"
+        }) : 1;
+        const opacity = direction === "in" ? interpolate(frame, [0, durationFrames], [0, 1], {
+          extrapolateRight: "clamp"
+        }) : 1;
+        return { transform: `scale(${scale})`, opacity };
+      }
+      case "wipe": {
+        const pct = direction === "in" ? interpolate(frame, [0, durationFrames], [0, 100], {
+          extrapolateRight: "clamp"
+        }) : 100;
+        return { clipPath: `inset(0 ${100 - pct}% 0 0)` };
+      }
+      case "flip": {
+        if (direction === "in") {
+          const rotateY = interpolate(frame, [0, durationFrames], [-120, 0], {
+            extrapolateRight: "clamp"
+          });
+          const opacity = interpolate(
+            frame,
+            [0, durationFrames * 0.2],
+            [0, 1],
+            { extrapolateRight: "clamp" }
+          );
+          const scale = interpolate(
+            frame,
+            [0, durationFrames * 0.5, durationFrames],
+            [0.92, 0.96, 1],
+            { extrapolateRight: "clamp" }
+          );
+          return {
+            transform: `perspective(1200px) rotateY(${rotateY}deg) scale(${scale})`,
+            transformOrigin: "left center",
+            opacity,
+            backfaceVisibility: "hidden"
+          };
+        }
+        return {};
+      }
+      default:
+        return {};
+    }
+  };
+  return /* @__PURE__ */ jsx(AbsoluteFill, { style: getStyle(), children });
+};
+var DEFAULT_GRID_PARTICLE_TUNING = {
+  particleCount: 32,
+  vignetteCenterY: "45%",
+  topBand: { height: "22%", strength: 0.8 },
+  bottomBand: { height: "30%", strength: 1.08, midStrength: 0.42 },
+  noiseFilterId: "ki-noise"
+};
+var MEDIA_OVERLAY_MASK2 = "linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.75) 45%, rgba(0,0,0,1) 78%, rgba(0,0,0,1) 100%)";
+var GridParticleBackground = ({
+  theme,
+  config,
+  resolvedAssets,
+  hasBottomText = true,
+  tuning: tuningOverride,
+  templateId
+}) => {
+  const frame = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+  const time = frame / fps;
+  const tuning = { ...DEFAULT_GRID_PARTICLE_TUNING, ...tuningOverride };
+  const [failedBgSrc, setFailedBgSrc] = useState(null);
+  const preset = config?.preset ?? "grid-particles";
+  const intensity = Math.max(0, Math.min(1.5, config?.intensity ?? 1));
+  const showGrid = preset === "grid-particles" || preset === "grid-only";
+  const showParticles = preset === "grid-particles" || preset === "particles-only";
+  const showNoise = preset === "noise";
+  if (preset === "solid") {
+    const bg = config?.cssBackground || config?.color || theme.bgGradient;
+    return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { overflow: "hidden", background: bg }, children: [
+      /* @__PURE__ */ jsx(CornerHalos, { theme, time, width, height, dim: 0.55 }),
+      /* @__PURE__ */ jsx(ReadabilityScrim, { theme, hasBottomText, tuning })
+    ] });
+  }
+  if (preset === "image") {
+    const resolved = resolveAssetUrl(config?.assetRef, resolvedAssets ?? []);
+    const url = resolved && resolved !== failedBgSrc ? resolved : null;
+    const overlay = config?.overlayOpacity ?? 0.35;
+    return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx(AbsoluteFill, { style: { background: theme.bgGradient } }),
+      url ? /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: url,
+          onError: () => {
+            reportSceneDegraded({
+              templateId,
+              reason: "background_load_failed",
+              dedupeKey: url,
+              detail: { component: "GridParticleBackground", src: url }
+            });
+            setFailedBgSrc(url);
+          },
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            filter: "saturate(0.95)"
+          }
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        AbsoluteFill,
+        {
+          style: {
+            background: `rgba(6,9,31,${overlay})`,
+            maskImage: MEDIA_OVERLAY_MASK2,
+            WebkitMaskImage: MEDIA_OVERLAY_MASK2
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(CornerHalos, { theme, time, width, height, dim: 0.6 }),
+      /* @__PURE__ */ jsx(ReadabilityScrim, { theme, hasBottomText, tuning })
+    ] });
+  }
+  const bgStyle = preset === "gradient" && config?.cssBackground ? config.cssBackground : theme.bgGradient;
+  return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx(AbsoluteFill, { style: { background: bgStyle } }),
+    /* @__PURE__ */ jsx(CornerHalos, { theme, time, width, height }),
+    showGrid && /* @__PURE__ */ jsx(Grid, { theme, intensity }),
+    showParticles && /* @__PURE__ */ jsx(
+      Particles,
+      {
+        theme,
+        time,
+        width,
+        height,
+        intensity,
+        count: tuning.particleCount
+      }
+    ),
+    showNoise && /* @__PURE__ */ jsx(NoiseOverlay, { theme, opacity: 0.2 * intensity, id: tuning.noiseFilterId }),
+    /* @__PURE__ */ jsx(ReadabilityScrim, { theme, hasBottomText, tuning })
+  ] });
+};
+var ReadabilityScrim = ({ theme, hasBottomText, tuning }) => {
+  const { vignetteCenterY, topBand, bottomBand } = tuning;
+  const s = theme.scrimRGB;
+  const a = theme.vignetteAlpha;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AbsoluteFill,
+      {
+        style: {
+          background: `radial-gradient(ellipse 72% 62% at 50% ${vignetteCenterY}, rgba(${s},0) 0%, rgba(${s},${(a * 0.3).toFixed(3)}) 62%, rgba(${s},${a.toFixed(3)}) 100%)`,
+          pointerEvents: "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: topBand.height,
+          background: `linear-gradient(180deg, rgba(${s},${(a * topBand.strength).toFixed(3)}) 0%, rgba(${s},0) 100%)`,
+          pointerEvents: "none"
+        }
+      }
+    ),
+    hasBottomText && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: bottomBand.height,
+          background: `linear-gradient(0deg, rgba(${s},${(a * bottomBand.strength).toFixed(3)}) 0%, rgba(${s},${(a * bottomBand.midStrength).toFixed(3)}) 45%, rgba(${s},0) 100%)`,
+          pointerEvents: "none"
+        }
+      }
+    )
+  ] });
+};
+var Grid = ({ theme, intensity }) => {
+  const { width, height } = useVideoConfig();
+  const spacing = 72;
+  const thickEvery = 4;
+  const cols = Math.ceil(width / spacing) + 2;
+  const rows = Math.ceil(height / spacing) + 2;
+  const w = (cols + 1) * spacing;
+  const h = (rows + 1) * spacing;
+  const cx = w / 2;
+  const cy = h / 2;
+  const maxDist = Math.sqrt(cx * cx + cy * cy);
+  const [cR, cG, cB] = parseRGB(theme.gridCenterRGB);
+  const [eR, eG, eB] = parseRGB(theme.gridEdgeRGB);
+  const lines = [];
+  for (let i = 0; i <= cols; i++) {
+    const x = i * spacing;
+    const distRatio = Math.abs(x - cx) / maxDist;
+    const isThick = i % thickEvery === 0;
+    const r = Math.round(cR + (eR - cR) * distRatio);
+    const g = Math.round(cG + (eG - cG) * distRatio);
+    const b = Math.round(cB + (eB - cB) * distRatio);
+    const baseA = isThick ? 0.32 - 0.12 * distRatio : 0.16 - 0.06 * distRatio;
+    const a = Math.max(0, baseA * intensity).toFixed(3);
+    lines.push(
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: x,
+          y1: 0,
+          x2: x,
+          y2: h,
+          stroke: `rgba(${r},${g},${b},${a})`,
+          strokeWidth: isThick ? 1.6 : 0.7
+        },
+        `v${i}`
+      )
+    );
+  }
+  for (let j = 0; j <= rows; j++) {
+    const y = j * spacing;
+    const distRatio = Math.abs(y - cy) / maxDist;
+    const isThick = j % thickEvery === 0;
+    const r = Math.round(cR + (eR - cR) * distRatio);
+    const g = Math.round(cG + (eG - cG) * distRatio);
+    const b = Math.round(cB + (eB - cB) * distRatio);
+    const baseA = isThick ? 0.32 - 0.12 * distRatio : 0.16 - 0.06 * distRatio;
+    const a = Math.max(0, baseA * intensity).toFixed(3);
+    lines.push(
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 0,
+          y1: y,
+          x2: w,
+          y2: y,
+          stroke: `rgba(${r},${g},${b},${a})`,
+          strokeWidth: isThick ? 1.6 : 0.7
+        },
+        `h${j}`
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        width: w,
+        height: h,
+        transform: "translate(-50%, -50%) perspective(1400px) rotateX(6deg)",
+        transformOrigin: "center center"
+      },
+      children: /* @__PURE__ */ jsx("svg", { width: w, height: h, xmlns: "http://www.w3.org/2000/svg", children: lines })
+    }
+  );
+};
+var Particles = ({ theme, time, width, height, intensity, count }) => {
+  const dots = [];
+  for (let i = 0; i < count; i++) {
+    const seed = (i * 9301 + 49297) % 233280;
+    const sx = seed / 233280 * width;
+    const sy = seed * 13 % 233280 / 233280 * height;
+    const driftAmpX = 14 + seed * 7 % 22;
+    const driftAmpY = 18 + seed * 11 % 28;
+    const phase = seed % 1e3 / 1e3 * Math.PI * 2;
+    const speed = 0.18 + seed * 17 % 100 / 600;
+    const x = sx + Math.sin(time * speed + phase) * driftAmpX;
+    const y = sy + Math.cos(time * speed * 0.8 + phase) * driftAmpY;
+    const pulse = 0.35 + 0.45 * Math.sin(time * 1.6 + phase);
+    const radius = 1.2 + seed * 23 % 30 / 14;
+    const a = Math.max(0, pulse * intensity).toFixed(3);
+    dots.push(
+      /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: radius, fill: `rgba(${theme.particleRGB},${a})` }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: x,
+            cy: y,
+            r: radius * 2.4,
+            fill: "none",
+            stroke: `rgba(${theme.particleRGB},${(Number(a) * 0.25).toFixed(3)})`,
+            strokeWidth: 0.6
+          }
+        )
+      ] }, `p${i}`)
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width,
+      height,
+      xmlns: "http://www.w3.org/2000/svg",
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none"
+      },
+      children: dots
+    }
+  );
+};
+var CornerHalos = ({ theme, time, width, height, dim = 1 }) => {
+  const size = Math.min(width, height) * 0.75;
+  const corners = [
+    { x: 0, y: 0, color: theme.haloColors[0], phase: 0 },
+    { x: width, y: 0, color: theme.haloColors[1], phase: 1.5 },
+    { x: 0, y: height, color: theme.haloColors[2], phase: 3 },
+    { x: width, y: height, color: theme.haloColors[3], phase: 4.5 }
+  ];
+  return /* @__PURE__ */ jsx(Fragment, { children: corners.map((halo, idx) => {
+    const haloOpacity = (0.18 + 0.1 * Math.sin(time * 1 + halo.phase)) * dim;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: halo.x - size / 2,
+          top: halo.y - size / 2,
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          background: `radial-gradient(circle, rgba(${halo.color},${haloOpacity.toFixed(3)}) 0%, transparent 70%)`,
+          pointerEvents: "none",
+          // 半径变大后 70% 那道停靠会露出可辨认的圆边，糊掉它。
+          filter: "blur(24px)"
+        }
+      },
+      idx
+    );
+  }) });
+};
+var NoiseOverlay = ({ theme, opacity, id }) => {
+  const tint = theme.noiseBlend === "screen" ? 1 : 0;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        opacity,
+        pointerEvents: "none",
+        mixBlendMode: theme.noiseBlend
+      },
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxs("filter", { id, children: [
+          /* @__PURE__ */ jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.6", numOctaves: "2", stitchTiles: "stitch" }),
+          /* @__PURE__ */ jsx("feColorMatrix", { values: `0 0 0 0 ${tint} 0 0 0 0 ${tint} 0 0 0 0 ${tint} 0 0 0 0.6 0` })
+        ] }),
+        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", filter: `url(#${id})` })
+      ]
+    }
+  );
+};
+function parseRGB(rgb) {
+  const parts = rgb.split(",").map(Number);
+  return [parts[0] ?? 255, parts[1] ?? 255, parts[2] ?? 255];
+}
+var FADE_IN_FRAMES = 5;
+var FADE_OUT_FRAMES = 12;
+var AudioLayer = ({
+  src,
+  startFrame,
+  durationFrames,
+  volume = 1,
+  fadeIn = FADE_IN_FRAMES,
+  fadeOut = FADE_OUT_FRAMES
+}) => {
+  const volumeFn = useCallback(
+    (f) => {
+      const inVal = interpolate(f, [0, fadeIn], [0, volume], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      const outVal = interpolate(
+        f,
+        [durationFrames - fadeOut, durationFrames],
+        [volume, 0],
+        { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+      );
+      return Math.min(inVal, outVal);
+    },
+    [fadeIn, fadeOut, durationFrames, volume]
+  );
+  if (!src) return null;
+  return /* @__PURE__ */ jsx(Sequence, { from: startFrame, durationInFrames: durationFrames, children: /* @__PURE__ */ jsx(Audio, { src, volume: volumeFn }) });
+};
+var TimelineSequencer = ({
+  timeline,
+  resolvedAssets,
+  resolve,
+  globalTypography,
+  variantId,
+  bgm,
+  spreadEntryProps = false
+}) => {
+  const entries = timeline ?? [];
+  const totalFrames = entries[entries.length - 1]?.endFrame ?? 0;
+  return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { backgroundColor: "#000" }, children: [
+    entries.map((entry) => {
+      const Comp = resolve(entry.compositionId);
+      return /* @__PURE__ */ jsx(
+        Sequence,
+        {
+          from: entry.startFrame,
+          durationInFrames: entry.durationFrames,
+          name: entry.sceneId,
+          children: Comp ? /* @__PURE__ */ jsx(
+            Comp,
+            {
+              entry,
+              resolvedAssets: resolvedAssets ?? [],
+              typography: globalTypography,
+              variantId,
+              ...spreadEntryProps ? entry.props : void 0
+            }
+          ) : null
+        },
+        entry.sceneId
+      );
+    }),
+    bgm?.url ? /* @__PURE__ */ jsx(
+      AudioLayer,
+      {
+        src: bgm.url,
+        startFrame: 0,
+        durationFrames: totalFrames,
+        volume: bgm.volume ?? 0.15,
+        fadeIn: 30,
+        fadeOut: 45
+      }
+    ) : null
+  ] });
+};
+function useActiveSubtitle(segments) {
+  const frame = useCurrentFrame();
+  return useMemo(() => {
+    const active = segments.find(
+      (s) => frame >= s.startFrame && frame < s.endFrame
+    );
+    return active?.text ?? "";
+  }, [frame, segments]);
+}
+function useActiveSubtitleIndex(segments) {
+  const frame = useCurrentFrame();
+  return useMemo(() => {
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      if (frame >= seg.startFrame && frame < seg.endFrame) {
+        return i;
+      }
+    }
+    return -1;
+  }, [frame, segments]);
+}
+function localizeSubtitles(entry, options = {}) {
+  const { leadFrames = 0 } = options;
+  const sceneStart = entry.startFrame;
+  return (entry.subtitleSegments ?? []).map((seg) => {
+    const localStart = seg.startFrame - sceneStart - leadFrames;
+    return {
+      ...seg,
+      // 只有在提前量把起点推到负数时才夹到 0。leadFrames=0 时保持原样：
+      // ppt-to-video / math-principles-expl 会把 startFrame 当作「旁白起拍
+      // 帧」直接消费，无条件夹 0 会悄悄改掉它们的节拍时间轴。
+      startFrame: leadFrames > 0 ? Math.max(0, localStart) : localStart,
+      endFrame: seg.endFrame - sceneStart
+    };
+  });
+}
+function useLocalSubtitles(entry, options = {}) {
+  const { leadFrames = 0 } = options;
+  const segments = entry.subtitleSegments;
+  const sceneStart = entry.startFrame;
+  return useMemo(
+    () => localizeSubtitles({ subtitleSegments: segments, startFrame: sceneStart }, { leadFrames }),
+    [segments, sceneStart, leadFrames]
+  );
+}
+function sentenceStartFrames(segments) {
+  if (segments.length === 0) return [];
+  if (segments.some((s) => typeof s.sentenceIndex !== "number")) return null;
+  const firstFrameOf = /* @__PURE__ */ new Map();
+  for (const seg of segments) {
+    const idx = seg.sentenceIndex;
+    if (!firstFrameOf.has(idx)) firstFrameOf.set(idx, seg.startFrame);
+  }
+  return [...firstFrameOf.entries()].sort((a, b) => a[0] - b[0]).map(([, frame]) => frame);
+}
+
+// src/digitalHuman/resolve.ts
+var DIGITAL_HUMAN_ANCHORS = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "center-left",
+  "center",
+  "center-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right"
+];
+var POSITIONS = [...DIGITAL_HUMAN_ANCHORS, "custom"];
+var SHAPES = ["rect", "rounded", "circle"];
+var LAYOUTS = ["overlay", "reserve"];
+var ON_END = ["freeze", "hide", "loop"];
+var ENTER = ["none", "fade", "pop", "slide"];
+var ROLES = ["only", "first", "middle", "last"];
+var DIGITAL_HUMAN_SIZE_PRESETS = {
+  small: 0.28,
+  medium: 0.42,
+  large: 0.62,
+  full: 0.92
+};
+var RANGES = {
+  x: [0, 1],
+  y: [0, 1],
+  margin: [0, 0.5],
+  offsetX: [-1, 1],
+  offsetY: [-1, 1],
+  size: [0.1, 1],
+  aspectRatio: [0.2, 5],
+  cornerRadius: [0, 0.5],
+  borderWidth: [0, 40],
+  focusX: [0, 1],
+  focusY: [0, 1],
+  zoom: [1, 3],
+  startFromSec: [0, 86400]
+};
+var AVATAR_SCALE_RANGE = [0.2, 3];
+var DSL_POSITION_MAP = {
+  center: "center",
+  left: "center-left",
+  right: "center-right",
+  "bottom-left": "bottom-left",
+  "bottom-right": "bottom-right"
+};
+var DIGITAL_HUMAN_PROP_KEYS = [
+  "digitalHuman",
+  "avatarAssetId",
+  "avatarPosition",
+  "avatarScale",
+  "avatarOffsetFrames",
+  "avatarSegmentRole"
+];
+var MAX_UNWRAP_DEPTH = 8;
+function isRecord(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function isPresent(v) {
+  return v !== void 0 && v !== null && v !== "";
+}
+function oneOf(v, options) {
+  return typeof v === "string" && options.includes(v) ? v : void 0;
+}
+function clamp(v, lo, hi) {
+  return Math.min(hi, Math.max(lo, v));
+}
+function pickDigitalHumanInput(props) {
+  const out = {};
+  let layer = props;
+  const seen = /* @__PURE__ */ new Set();
+  for (let depth = 0; depth < MAX_UNWRAP_DEPTH && isRecord(layer) && !seen.has(layer); depth++) {
+    seen.add(layer);
+    for (const key of DIGITAL_HUMAN_PROP_KEYS) {
+      if (out[key] === void 0 && isPresent(layer[key])) out[key] = layer[key];
+    }
+    layer = layer.templateData;
+  }
+  return out;
+}
+function isLegacyAvatarInput(input) {
+  return isPresent(input.avatarAssetId) && input.digitalHuman === void 0 && input.avatarOffsetFrames === void 0 && input.avatarSegmentRole === void 0 && input.avatarPosition === void 0 && input.avatarScale === void 0;
+}
+function sanitizeDigitalHumanConfig(raw) {
+  const issues = [];
+  const config = {};
+  if (raw === void 0 || raw === null) return { config, issues };
+  if (!isRecord(raw)) return { config, issues: ["digitalHuman"] };
+  const takeEnum = (key, options) => {
+    const v = raw[key];
+    if (v === void 0) return;
+    const ok = oneOf(v, options);
+    if (ok === void 0) issues.push(key);
+    else config[key] = ok;
+  };
+  const takeNumber = (key) => {
+    const v = raw[key];
+    if (v === void 0) return;
+    if (typeof v !== "number" || !Number.isFinite(v)) {
+      issues.push(key);
+      return;
+    }
+    const [lo, hi] = RANGES[key];
+    const c = clamp(v, lo, hi);
+    if (c !== v) issues.push(key);
+    config[key] = c;
+  };
+  const takeBoolean = (key) => {
+    const v = raw[key];
+    if (v === void 0) return;
+    if (typeof v !== "boolean") issues.push(key);
+    else config[key] = v;
+  };
+  const takeString = (key) => {
+    const v = raw[key];
+    if (v === void 0) return;
+    if (typeof v !== "string" || v.trim() === "") issues.push(key);
+    else config[key] = v;
+  };
+  takeBoolean("enabled");
+  takeEnum("position", POSITIONS);
+  takeNumber("x");
+  takeNumber("y");
+  takeNumber("margin");
+  takeNumber("offsetX");
+  takeNumber("offsetY");
+  const size = raw.size;
+  if (size !== void 0) {
+    if (typeof size === "string") {
+      const preset = oneOf(size, Object.keys(DIGITAL_HUMAN_SIZE_PRESETS));
+      if (preset) config.size = preset;
+      else issues.push("size");
+    } else {
+      takeNumber("size");
+    }
+  }
+  takeNumber("aspectRatio");
+  takeEnum("shape", SHAPES);
+  takeNumber("cornerRadius");
+  takeNumber("borderWidth");
+  takeString("borderColor");
+  takeBoolean("shadow");
+  takeNumber("focusX");
+  takeNumber("focusY");
+  takeNumber("zoom");
+  takeEnum("layout", LAYOUTS);
+  takeEnum("onEnd", ON_END);
+  takeEnum("enter", ENTER);
+  takeBoolean("useVideoAudio");
+  takeString("src");
+  takeNumber("startFromSec");
+  takeString("posterAssetRef");
+  takeString("posterUrl");
+  if (config.position === "custom" && (config.x === void 0 || config.y === void 0)) {
+    issues.push("position");
+  }
+  return { config, issues };
+}
+function sizeToRatio(size) {
+  if (size === void 0) return void 0;
+  return typeof size === "number" ? size : DIGITAL_HUMAN_SIZE_PRESETS[size];
+}
+function mergeDigitalHumanConfig(config, defaults, dsl = {}) {
+  const shape = config.shape ?? defaults.shape ?? "rounded";
+  const defaultRatio = sizeToRatio(defaults.size) ?? DIGITAL_HUMAN_SIZE_PRESETS.medium;
+  const explicitRatio = sizeToRatio(config.size);
+  const sizeRatio = clamp(
+    explicitRatio ?? defaultRatio * (dsl.scale ?? 1),
+    RANGES.size[0],
+    RANGES.size[1]
+  );
+  return {
+    position: config.position ?? dsl.position ?? defaults.position ?? "bottom-right",
+    x: config.x ?? 0.5,
+    y: config.y ?? 0.5,
+    margin: config.margin ?? defaults.margin ?? 0.03,
+    offsetX: config.offsetX ?? 0,
+    offsetY: config.offsetY ?? 0,
+    sizeRatio,
+    aspectRatio: shape === "circle" ? 1 : config.aspectRatio,
+    shape,
+    cornerRadius: config.cornerRadius ?? 0.08,
+    borderWidth: config.borderWidth ?? (shape === "rect" ? 0 : 4),
+    borderColor: config.borderColor ?? defaults.borderColor,
+    shadow: config.shadow ?? true,
+    focusX: config.focusX ?? defaults.focusX ?? 0.5,
+    focusY: config.focusY ?? defaults.focusY ?? 0.3,
+    zoom: config.zoom ?? 1,
+    layout: config.layout ?? defaults.layout ?? "overlay",
+    onEnd: config.onEnd ?? defaults.onEnd ?? "freeze",
+    enter: config.enter ?? defaults.enter ?? "fade",
+    useVideoAudio: config.useVideoAudio ?? false
+  };
+}
+function resolveDigitalHuman(props, resolvedAssets, options) {
+  const input = pickDigitalHumanInput(props);
+  const { config: raw, issues } = sanitizeDigitalHumanConfig(input.digitalHuman);
+  let dslPosition;
+  if (input.avatarPosition !== void 0) {
+    dslPosition = typeof input.avatarPosition === "string" ? DSL_POSITION_MAP[input.avatarPosition] ?? oneOf(input.avatarPosition, DIGITAL_HUMAN_ANCHORS) : void 0;
+    if (!dslPosition) issues.push("avatarPosition");
+  }
+  let dslScale;
+  if (input.avatarScale !== void 0) {
+    if (typeof input.avatarScale === "number" && Number.isFinite(input.avatarScale)) {
+      dslScale = clamp(input.avatarScale, AVATAR_SCALE_RANGE[0], AVATAR_SCALE_RANGE[1]);
+      if (dslScale !== input.avatarScale) issues.push("avatarScale");
+    } else {
+      issues.push("avatarScale");
+    }
+  }
+  const config = mergeDigitalHumanConfig(raw, options.defaults ?? {}, {
+    position: dslPosition,
+    scale: dslScale
+  });
+  const assetId = typeof input.avatarAssetId === "string" ? input.avatarAssetId : void 0;
+  if (input.avatarAssetId !== void 0 && assetId === void 0) issues.push("avatarAssetId");
+  const asset = assetId ? resolvedAssets.find((a) => a.assetId === assetId) : void 0;
+  const assetUrl = asset?.url || asset?.localPath || null;
+  const src = assetUrl || raw.src || null;
+  const unresolvedAssetId = assetId && !assetUrl ? assetId : void 0;
+  const posterAsset = raw.posterAssetRef ? resolvedAssets.find((a) => a.assetId === raw.posterAssetRef) : void 0;
+  const posterSrc = posterAsset?.url || posterAsset?.localPath || raw.posterUrl || null;
+  let startFrame = 0;
+  if (raw.startFromSec !== void 0) {
+    startFrame = Math.round(raw.startFromSec * options.fps);
+  } else if (input.avatarOffsetFrames !== void 0) {
+    const v = input.avatarOffsetFrames;
+    if (typeof v === "number" && Number.isFinite(v) && v >= 0) startFrame = Math.round(v);
+    else issues.push("avatarOffsetFrames");
+  }
+  let role = "only";
+  if (input.avatarSegmentRole !== void 0) {
+    const r = oneOf(input.avatarSegmentRole, ROLES);
+    if (r) role = r;
+    else issues.push("avatarSegmentRole");
+  }
+  const videoFrames = typeof asset?.duration === "number" && asset.duration > 0 ? Math.round(asset.duration / 1e3 * options.fps) : void 0;
+  const videoSize = typeof asset?.width === "number" && typeof asset?.height === "number" && asset.width > 0 && asset.height > 0 ? { width: asset.width, height: asset.height } : void 0;
+  return {
+    active: !!src && raw.enabled !== false,
+    enabled: raw.enabled !== false,
+    src,
+    asset,
+    posterSrc,
+    config,
+    startFrame,
+    role,
+    videoFrames,
+    videoSize,
+    issues,
+    unresolvedAssetId
+  };
+}
+
+// src/digitalHuman/box.ts
+var DEFAULT_DIGITAL_HUMAN_ASPECT = 3 / 4;
+function resolveDigitalHumanBox(config, canvas, options = {}) {
+  const W = canvas.width;
+  const H = canvas.height;
+  const short = Math.min(W, H);
+  const aspect = config.aspectRatio ?? (options.videoSize ? options.videoSize.width / options.videoSize.height : DEFAULT_DIGITAL_HUMAN_ASPECT);
+  let height = config.sizeRatio * short;
+  let width = height * aspect;
+  const fit = Math.min(1, W / width, H / height);
+  height *= fit;
+  width *= fit;
+  const inset = {
+    top: options.insets?.top ?? 0,
+    right: options.insets?.right ?? 0,
+    bottom: options.insets?.bottom ?? 0,
+    left: options.insets?.left ?? 0
+  };
+  const m = config.margin * short;
+  let left;
+  let top;
+  if (config.position === "custom") {
+    left = config.x * W - width / 2;
+    top = config.y * H - height / 2;
+  } else {
+    const [v, h] = splitAnchor(config.position);
+    left = h === "left" ? inset.left + m : h === "right" ? W - inset.right - m - width : (W - width) / 2;
+    top = v === "top" ? inset.top + m : v === "bottom" ? H - inset.bottom - m - height : (H - height) / 2;
+  }
+  left += config.offsetX * W;
+  top += config.offsetY * H;
+  const clampedLeft = Math.min(Math.max(left, 0), W - width);
+  const clampedTop = Math.min(Math.max(top, 0), H - height);
+  const clamped = Math.abs(clampedLeft - left) > 1 || Math.abs(clampedTop - top) > 1;
+  const cx = clampedLeft + width / 2;
+  const side = cx < W * 0.4 ? "left" : cx > W * 0.6 ? "right" : "none";
+  const borderRadius = config.shape === "circle" ? Math.min(width, height) / 2 : config.shape === "rounded" ? config.cornerRadius * Math.min(width, height) : 0;
+  return {
+    left: clampedLeft,
+    top: clampedTop,
+    width,
+    height,
+    borderRadius,
+    side,
+    clamped
+  };
+}
+function splitAnchor(anchor) {
+  if (anchor === "center") return ["center", "center"];
+  const [v, h] = anchor.split("-");
+  return [v, h];
+}
+function resolveSubtitleMaxWidthPct(box, canvas, opts) {
+  const { bandTop, baseMaxWidthPct } = opts;
+  if (!box || box.side === "none") return baseMaxWidthPct;
+  if (box.top + box.height <= bandTop) return baseMaxWidthPct;
+  const gap = opts.gap ?? 0;
+  const half = canvas.width / 2;
+  const free = box.side === "right" ? box.left - gap - half : half - (box.left + box.width) - gap;
+  const pct = 2 * Math.max(0, free) / canvas.width * 100;
+  return Math.max(opts.minMaxWidthPct ?? 40, Math.min(baseMaxWidthPct, pct));
+}
+function resolveReservedRegion(box, canvas, gap = 0) {
+  if (!box || box.side === "none") return { left: 0, width: canvas.width };
+  if (box.side === "right") {
+    return { left: 0, width: Math.max(0, box.left - gap) };
+  }
+  const left = Math.min(canvas.width, box.left + box.width + gap);
+  return { left, width: Math.max(0, canvas.width - left) };
+}
+var ENTER_FRAMES_AT_30 = 12;
+var DEFAULT_BORDER_COLOR = "rgba(255,255,255,0.85)";
+function reportDigitalHumanIssues(dh, box, templateId, sceneId) {
+  if (dh.unresolvedAssetId) {
+    reportSceneDegraded({
+      templateId,
+      sceneId,
+      reason: "digital_human_unresolved",
+      detail: { asset_id: dh.unresolvedAssetId }
+    });
+  }
+  if (dh.issues.length > 0) {
+    reportSceneDegraded({
+      templateId,
+      sceneId,
+      reason: "digital_human_config_out_of_range",
+      detail: { fields: dh.issues.join(",") }
+    });
+  }
+  if (box?.clamped) {
+    reportSceneDegraded({ templateId, sceneId, reason: "digital_human_box_clamped" });
+  }
+  if (dh.active && dh.videoFrames !== void 0 && dh.startFrame >= dh.videoFrames) {
+    reportSceneDegraded({
+      templateId,
+      sceneId,
+      reason: "digital_human_offset_beyond_video",
+      detail: { start_frame: dh.startFrame, video_frames: dh.videoFrames }
+    });
+  }
+  if (dh.active && dh.videoFrames === void 0 && dh.config.onEnd !== "freeze") {
+    reportSceneDegraded({ templateId, sceneId, reason: "digital_human_duration_unknown" });
+  }
+}
+function frameStyle(dh, box, scale) {
+  const { config } = dh;
+  const borderWidth = config.borderWidth * scale;
+  return {
+    position: "absolute",
+    left: box.left,
+    top: box.top,
+    width: box.width,
+    height: box.height,
+    borderRadius: box.borderRadius,
+    overflow: "hidden",
+    boxSizing: "border-box",
+    border: borderWidth > 0 ? `${borderWidth}px solid ${config.borderColor ?? DEFAULT_BORDER_COLOR}` : void 0,
+    boxShadow: config.shadow ? `0 ${12 * scale}px ${36 * scale}px rgba(0,0,0,0.35)` : void 0,
+    // 圆角裁切在部分 Chromium 版本里对视频层不生效，强制独立合成层。
+    transform: "translateZ(0)"
+  };
+}
+function mediaStyle(dh) {
+  const { focusX, focusY, zoom } = dh.config;
+  const origin = `${focusX * 100}% ${focusY * 100}%`;
+  return {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    objectPosition: origin,
+    transform: zoom !== 1 ? `scale(${zoom})` : void 0,
+    transformOrigin: origin
+  };
+}
+var DigitalHumanLayer = ({
+  dh,
+  box,
+  zIndex = 12
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const scale = useCanvasScale();
+  if (!dh.active || !dh.src) return null;
+  const { config } = dh;
+  const playEnter = config.enter !== "none" && (dh.role === "only" || dh.role === "first");
+  const enterFrames = Math.max(1, Math.round(ENTER_FRAMES_AT_30 * fps / 30));
+  let opacity = 1;
+  let transform;
+  if (playEnter) {
+    opacity = interpolate(frame, [0, enterFrames], [0, 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    if (config.enter === "pop") {
+      const s = spring({ frame, fps, config: { damping: 14, stiffness: 160 } });
+      transform = `scale(${0.85 + 0.15 * s})`;
+    } else if (config.enter === "slide") {
+      const dir = box.side === "left" ? -1 : 1;
+      const dx = interpolate(frame, [0, enterFrames], [40 * scale * dir, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      transform = `translateX(${dx}px)`;
+    }
+  }
+  const playable = dh.videoFrames !== void 0 ? dh.videoFrames - dh.startFrame : void 0;
+  const ended = playable !== void 0 && frame >= playable;
+  if (ended && config.onEnd === "hide") return null;
+  const video = /* @__PURE__ */ jsx(
+    OffthreadVideo,
+    {
+      src: dh.src,
+      startFrom: dh.startFrame,
+      volume: config.useVideoAudio ? 1 : 0,
+      muted: !config.useVideoAudio,
+      style: mediaStyle(dh)
+    }
+  );
+  let media = video;
+  if (playable !== void 0 && playable > 0) {
+    if (config.onEnd === "loop") {
+      media = /* @__PURE__ */ jsx(Loop, { durationInFrames: playable, layout: "none", children: video });
+    } else if (ended) {
+      media = /* @__PURE__ */ jsx(Freeze, { frame: playable - 1, children: video });
+    }
+  }
+  const base = frameStyle(dh, box, scale);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex,
+        pointerEvents: "none",
+        opacity
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            ...base,
+            transform: transform ? `${transform} translateZ(0)` : base.transform
+          },
+          children: media
+        }
+      )
+    }
+  );
+};
+var DigitalHumanPoster = ({ dh, box, zIndex = 12 }) => {
+  const scale = useCanvasScale();
+  if (!dh.posterSrc || !dh.enabled) return null;
+  return /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, zIndex, pointerEvents: "none" }, children: /* @__PURE__ */ jsx("div", { style: frameStyle(dh, box, scale), children: /* @__PURE__ */ jsx(Img, { src: dh.posterSrc, style: mediaStyle(dh) }) }) });
+};
+var ReservedContentScaler = ({ regionWidth, width, height, children }) => {
+  if (regionWidth === void 0 || regionWidth >= width) return /* @__PURE__ */ jsx(Fragment, { children });
+  const scale = Math.max(0, regionWidth) / width;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: (regionWidth - width) / 2,
+        width,
+        height,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transform: `scale(${scale})`,
+        transformOrigin: "center center"
+      },
+      children
+    }
+  );
+};
+
+export { AudioLayer, Background, DEFAULT_DIGITAL_HUMAN_ASPECT, DEFAULT_GRID_PARTICLE_TUNING, DEFAULT_MIN_CHUNK_UNITS, DEFAULT_SPLIT_MAX_UNITS, DIGITAL_HUMAN_ANCHORS, DIGITAL_HUMAN_PROP_KEYS, DIGITAL_HUMAN_SIZE_PRESETS, DigitalHumanLayer, DigitalHumanPoster, GridParticleBackground, LINE_FILL_LIMIT, ReservedContentScaler, SceneBackgroundLayer, SceneTransition, SubtitleBar, TextLayer, TimelineSequencer, chunkSubtitleSegments, displayWidth, estimateLineCapacity, fontStack, grainDataUri, isLegacyAvatarInput, localizeSubtitles, mergeDigitalHumanConfig, pickDigitalHumanInput, reportDigitalHumanIssues, reportSceneDegraded, resetSceneDegradedReports, resolveActiveChunk, resolveAsset, resolveAssetUrl, resolveChunkFadeOpacity, resolveDigitalHuman, resolveDigitalHumanBox, resolveReservedRegion, resolveRunFadeOpacity, resolveSceneBackground, resolveSubtitleBottomPx, resolveSubtitleMaxWidthPct, resolveSubtitleMode, sanitizeDiagnosticSrc, sanitizeDigitalHumanConfig, sentenceStartFrames, splitSubtitleText, spokenWeight, useActiveSubtitle, useActiveSubtitleIndex, useAssetUrl, useCanvasScale, useLocalSubtitles };