@bendyline/squisq-react 1.3.2 → 1.4.0

package/dist/index.js

@@ -1,8 +1,158 @@
 // src/DocPlayer.tsx
-import { Fragment as Fragment2, useRef as useRef5, useState as useState7, useEffect as useEffect7, useCallback as useCallback5, useMemo as useMemo7 } from "react";
-import { isTemplateBlock as isTemplateBlock2, getCaptionAtTime as getCaptionAtTime2 } from "@bendyline/squisq/schemas";
+import { Fragment as Fragment3, useRef as useRef6, useState as useState6, useEffect as useEffect7, useCallback as useCallback5, useMemo as useMemo9 } from "react";
+import {
+  isTemplateBlock as isTemplateBlock2,
+  getCaptionAtTime as getCaptionAtTime2,
+  resolveMediaSchedule,
+  getDocPlaybackDuration
+} from "@bendyline/squisq/schemas";
+
+// src/MediaClipLayer.tsx
+import { useEffect as useEffect2, useRef } from "react";
+
+// src/hooks/MediaContext.tsx
+import { createContext, useContext, useState, useEffect, useMemo } from "react";
+var MediaContext = createContext(null);
+function useMediaProvider() {
+  return useContext(MediaContext);
+}
+function useMediaUrl(relativePath, basePath) {
+  const provider = useMediaProvider();
+  const safePath = typeof relativePath === "string" ? relativePath : "";
+  const isAbsolute = !safePath || safePath.startsWith("http") || safePath.startsWith("/") || safePath.startsWith("data:") || safePath.startsWith("blob:");
+  const fallback = useMemo(
+    () => isAbsolute ? safePath : `${basePath}/${safePath}`,
+    [isAbsolute, safePath, basePath]
+  );
+  const needsProvider = !isAbsolute && !!provider;
+  const [url, setUrl] = useState(fallback);
+  useEffect(() => {
+    if (!needsProvider) {
+      setUrl(fallback);
+      return;
+    }
+    let cancelled = false;
+    provider.resolveUrl(safePath).then((resolved) => {
+      if (!cancelled) setUrl(resolved);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [needsProvider, provider, safePath, fallback]);
+  return needsProvider ? url : fallback;
+}
+
+// src/hooks/useMediaSchedule.ts
+import { useMemo as useMemo2 } from "react";
+function useMediaSchedule(schedule, currentTime) {
+  const activeIds = useMemo2(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const c of schedule) {
+      if (currentTime >= c.absoluteStart && currentTime < c.absoluteEnd) ids.add(c.id);
+    }
+    return ids;
+  }, [schedule, currentTime]);
+  return { renderClips: schedule, activeIds };
+}
+
+// src/MediaClipLayer.tsx
+import { jsx } from "react/jsx-runtime";
+var DRIFT = 0.25;
+function MediaClipLayer({
+  schedule,
+  currentTime,
+  isPlaying,
+  basePath,
+  renderMode = false
+}) {
+  const { renderClips, activeIds } = useMediaSchedule(schedule, currentTime);
+  if (renderClips.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "doc-player__media-clips", "aria-hidden": true, children: renderClips.map((clip) => /* @__PURE__ */ jsx(
+    MediaClipElement,
+    {
+      clip,
+      active: activeIds.has(clip.id),
+      currentTime,
+      isPlaying,
+      basePath,
+      renderMode
+    },
+    clip.id
+  )) });
+}
+function MediaClipElement({
+  clip,
+  active,
+  currentTime,
+  isPlaying,
+  basePath,
+  renderMode
+}) {
+  const ref = useRef(null);
+  const src = useMediaUrl(clip.src, basePath);
+  useEffect2(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (!active) {
+      if (!el.paused) el.pause();
+      return;
+    }
+    const target = Math.max(0, clip.sourceIn + (currentTime - clip.absoluteStart));
+    if (renderMode || Math.abs(el.currentTime - target) > DRIFT) {
+      try {
+        el.currentTime = target;
+      } catch {
+      }
+    }
+    if (isPlaying && !renderMode) {
+      const p = el.play();
+      if (p) p.catch(() => {
+      });
+    } else {
+      el.pause();
+    }
+  }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart]);
+  const isVideo = clip.kind === "video";
+  const common = {
+    ref,
+    src,
+    preload: "auto",
+    "data-clip-id": clip.id,
+    "data-abs-start": clip.absoluteStart,
+    "data-abs-end": clip.absoluteEnd,
+    "data-source-in": clip.sourceIn
+  };
+  if (isVideo) {
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        ...common,
+        muted: true,
+        playsInline: true,
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          zIndex: 0,
+          pointerEvents: "none"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("audio", { ...common, muted: renderMode, style: { position: "absolute", width: 0, height: 0 } });
+}
+
+// src/DocPlayer.tsx
 import { applySurface as applySurface2 } from "@bendyline/squisq/schemas";
 
+// src/BlockRenderer.tsx
+import { resolveTransitionDuration } from "@bendyline/squisq/schemas";
+
+// src/layers/ImageLayer.tsx
+import { cssFilterForTreatment } from "@bendyline/squisq/doc";
+
 // src/utils/animationUtils.ts
 import {
   getAnimationStyle,
@@ -38,40 +188,8 @@ function getAnchorOffset(anchor, width, height) {
   }
 }
 
-// src/hooks/MediaContext.tsx
-import { createContext, useContext, useState, useEffect, useMemo } from "react";
-var MediaContext = createContext(null);
-function useMediaProvider() {
-  return useContext(MediaContext);
-}
-function useMediaUrl(relativePath, basePath) {
-  const provider = useMediaProvider();
-  const safePath = typeof relativePath === "string" ? relativePath : "";
-  const isAbsolute = !safePath || safePath.startsWith("http") || safePath.startsWith("/") || safePath.startsWith("data:") || safePath.startsWith("blob:");
-  const fallback = useMemo(
-    () => isAbsolute ? safePath : `${basePath}/${safePath}`,
-    [isAbsolute, safePath, basePath]
-  );
-  const needsProvider = !isAbsolute && !!provider;
-  const [url, setUrl] = useState(fallback);
-  useEffect(() => {
-    if (!needsProvider) {
-      setUrl(fallback);
-      return;
-    }
-    let cancelled = false;
-    provider.resolveUrl(safePath).then((resolved) => {
-      if (!cancelled) setUrl(resolved);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [needsProvider, provider, safePath, fallback]);
-  return needsProvider ? url : fallback;
-}
-
 // src/layers/ImageLayer.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function ImageLayer({ layer, basePath, viewport, blockTime }) {
   const { content, position, animation } = layer;
   const x = resolveValue(position.x, viewport.width);
@@ -83,13 +201,14 @@ function ImageLayer({ layer, basePath, viewport, blockTime }) {
   const finalY = y + offset.y;
   const src = useMediaUrl(content.src, basePath);
   const animStyle = getAnimationStyle(animation, blockTime);
+  const filter = cssFilterForTreatment(content.treatment, content.blur);
   const preserveAspectRatio = getPreserveAspectRatio(content.fit);
   const isCover = content.fit === "cover";
   const isSpatialAnim = animation && SPATIAL_ANIMATION_TYPES.has(animation.type);
   if (isCover && isSpatialAnim && animation) {
     const kbAnim = remapToKenBurns(animation);
     const kbStyle = getAnimationStyle(kbAnim, blockTime);
-    return /* @__PURE__ */ jsx("g", { className: "block-layer block-layer--image", "data-layer-id": layer.id, children: /* @__PURE__ */ jsx("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2("g", { className: "block-layer block-layer--image", "data-layer-id": layer.id, children: /* @__PURE__ */ jsx2("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx2(
       "div",
       {
         style: {
@@ -97,7 +216,7 @@ function ImageLayer({ layer, basePath, viewport, blockTime }) {
           height: `${height}px`,
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx2(
           "img",
           {
             src,
@@ -111,6 +230,7 @@ function ImageLayer({ layer, basePath, viewport, blockTime }) {
               display: "block",
               pointerEvents: "none",
               transformOrigin: "center center",
+              ...filter ? { filter } : {},
               ...kbStyle.style
             }
           }
@@ -119,13 +239,13 @@ function ImageLayer({ layer, basePath, viewport, blockTime }) {
     ) }) });
   }
   if (isCover) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       "g",
       {
         className: `block-layer block-layer--image ${animStyle.className}`,
         style: animStyle.style,
         "data-layer-id": layer.id,
-        children: /* @__PURE__ */ jsx("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx2("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx2(
           "img",
           {
             src,
@@ -136,20 +256,24 @@ function ImageLayer({ layer, basePath, viewport, blockTime }) {
               objectFit: "cover",
               objectPosition: "center",
               display: "block",
-              pointerEvents: "none"
+              pointerEvents: "none",
+              ...filter ? { filter } : {},
+              // Over-scan blurred imagery so the soft edges never reveal
+              // the frame behind the layer.
+              ...content.blur && content.blur > 0 ? { transform: "scale(1.06)" } : {}
             }
           }
         ) })
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "g",
     {
       className: `block-layer block-layer--image ${animStyle.className}`,
       style: animStyle.style,
       "data-layer-id": layer.id,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx2(
         "image",
         {
           href: src,
@@ -158,7 +282,7 @@ function ImageLayer({ layer, basePath, viewport, blockTime }) {
           width,
           height,
           preserveAspectRatio,
-          style: { pointerEvents: "none" }
+          style: { pointerEvents: "none", ...filter ? { filter } : {} }
         }
       )
     }
@@ -192,16 +316,207 @@ function remapToKenBurns(anim) {
 }
 
 // src/layers/TextLayer.tsx
+import { useMemo as useMemo3 } from "react";
 import { DEFAULT_DOC_FONT } from "@bendyline/squisq/schemas";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function TextLayer({ layer, viewport, blockTime }) {
+import {
+  parseHtmlToNodes,
+  sanitizeHtmlNodes,
+  stringifyHtmlNodes
+} from "@bendyline/squisq/markdown";
+import {
+  hasIconMarker,
+  splitIconMarkers,
+  stripIconMarkers,
+  iconClass
+} from "@bendyline/squisq/icon-marker";
+
+// src/utils/fillStyle.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function borderDashArray(style, strokeWidth) {
+  if (!style || style === "solid") return void 0;
+  const w = Math.max(1, strokeWidth ?? 1);
+  if (style === "dotted") return `${w} ${w * 2}`;
+  return `${w * 3} ${w * 2}`;
+}
+function gradientVector(angle = 0) {
+  const a = angle * Math.PI / 180;
+  const dx = Math.sin(a);
+  const dy = Math.cos(a);
+  return { x1: 0.5 - dx / 2, y1: 0.5 - dy / 2, x2: 0.5 + dx / 2, y2: 0.5 + dy / 2 };
+}
+function gradientDefId(layerId) {
+  return `squisq-grad-${layerId}`;
+}
+function resolveFill(layerId, color, gradient, pattern) {
+  if (pattern) {
+    const id = `squisq-pattern-${layerId}`;
+    return { fill: `url(#${id})`, def: patternDef(id, pattern) };
+  }
+  if (gradient) {
+    const id = gradientDefId(layerId);
+    const v = gradientVector(gradient.angle);
+    return {
+      fill: `url(#${id})`,
+      def: /* @__PURE__ */ jsxs("linearGradient", { id, x1: v.x1, y1: v.y1, x2: v.x2, y2: v.y2, children: [
+        /* @__PURE__ */ jsx3("stop", { offset: "0%", stopColor: gradient.from }),
+        /* @__PURE__ */ jsx3("stop", { offset: "100%", stopColor: gradient.to })
+      ] })
+    };
+  }
+  return { fill: color, def: null };
+}
+function patternDef(id, pattern) {
+  const size = pattern.size ?? 24;
+  const opacity = pattern.opacity ?? 1;
+  const color = pattern.color;
+  return /* @__PURE__ */ jsxs(
+    "pattern",
+    {
+      id,
+      width: size,
+      height: size,
+      patternUnits: "userSpaceOnUse",
+      patternTransform: pattern.kind === "diagonal" ? "rotate(45)" : void 0,
+      children: [
+        pattern.kind === "dots" && /* @__PURE__ */ jsx3(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: Math.max(1, size / 12),
+            fill: color,
+            opacity
+          }
+        ),
+        pattern.kind === "grid" && /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: `M ${size} 0 L 0 0 0 ${size}`,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1,
+            opacity
+          }
+        ),
+        pattern.kind === "diagonal" && /* @__PURE__ */ jsx3("line", { x1: 0, y1: 0, x2: 0, y2: size, stroke: color, strokeWidth: 1, opacity })
+      ]
+    }
+  );
+}
+function resolveShapeFilter(layerId, filter) {
+  if (!filter || filter.type !== "noise") return { filterAttr: void 0, def: null };
+  const id = `squisq-noise-${layerId}`;
+  const opacity = filter.opacity ?? 0.05;
+  return {
+    filterAttr: `url(#${id})`,
+    def: /* @__PURE__ */ jsxs("filter", { id, x: "0%", y: "0%", width: "100%", height: "100%", children: [
+      /* @__PURE__ */ jsx3(
+        "feTurbulence",
+        {
+          type: "fractalNoise",
+          baseFrequency: filter.baseFrequency ?? 0.8,
+          numOctaves: 2,
+          stitchTiles: "stitch",
+          result: "noise"
+        }
+      ),
+      /* @__PURE__ */ jsx3("feColorMatrix", { in: "noise", type: "saturate", values: "0", result: "mono" }),
+      /* @__PURE__ */ jsx3("feComponentTransfer", { in: "mono", result: "faded", children: /* @__PURE__ */ jsx3("feFuncA", { type: "linear", slope: opacity, intercept: 0 }) }),
+      /* @__PURE__ */ jsx3("feComposite", { in: "faded", in2: "SourceGraphic", operator: "in" })
+    ] })
+  };
+}
+
+// src/layers/TextLayer.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function TextLayer(props) {
+  if (props.layer.content.html?.trim()) return /* @__PURE__ */ jsx4(RichTextLayer, { ...props });
+  if (hasIconMarker(props.layer.content.text ?? "")) return /* @__PURE__ */ jsx4(IconTextLayer, { ...props });
+  return /* @__PURE__ */ jsx4(PlainTextLayer, { ...props });
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function iconRunsToHtml(text) {
+  return splitIconMarkers(text).map(
+    (run) => run.type === "icon" ? `<i class="${iconClass(run.family, run.name)}" aria-hidden="true"></i>` : escapeHtml(run.text).replace(/\n/g, "<br>")
+  ).join("");
+}
+function IconTextLayer({ layer, viewport, blockTime }) {
   const { content, position, animation } = layer;
   const { text, style } = content;
-  const x = resolveValue(position.x, viewport.width);
-  const y = resolveValue(position.y, viewport.height);
-  const maxWidth = position.width ? resolveValue(position.width, viewport.width) : void 0;
+  const rawX = resolveValue(position.x, viewport.width);
+  const rawY = resolveValue(position.y, viewport.height);
+  const boxWidth = position.width != null ? resolveValue(position.width, viewport.width) : viewport.width;
+  const anchor = position.anchor ?? "top-left";
+  const lineHeight = style.lineHeight || 1.4;
+  const lineHeightPx = style.fontSize * lineHeight;
+  const padding = style.padding ?? 0;
+  const plain = stripIconMarkers(text ?? "");
+  const lines = plain.split("\n").flatMap((line) => wrapText(line, style.fontSize, boxWidth));
+  const boxHeight = position.height != null ? resolveValue(position.height, viewport.height) : Math.max(lineHeightPx, lines.length * lineHeightPx) + padding * 2;
+  const boxX = rawX - anchorAxis(anchor, boxWidth, "x");
+  const boxY = rawY - anchorAxis(anchor, boxHeight, "y");
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const html = useMemo3(() => iconRunsToHtml(text ?? ""), [text]);
+  const verticalJustify = style.verticalAlign === "top" ? "flex-start" : style.verticalAlign === "bottom" ? "flex-end" : "center";
+  const boxStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: verticalJustify,
+    padding,
+    color: style.color,
+    fontSize: `${style.fontSize}px`,
+    fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
+    fontWeight: style.fontWeight || "normal",
+    fontStyle: style.fontStyle || "normal",
+    lineHeight,
+    textAlign: style.textAlign ?? "left",
+    ...style.shadow ? { textShadow: "0 2px 3px rgba(0,0,0,0.7)" } : {},
+    ...animStyle.style
+  };
+  return /* @__PURE__ */ jsx4("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: /* @__PURE__ */ jsx4(
+    "foreignObject",
+    {
+      x: boxX,
+      y: boxY,
+      width: boxWidth,
+      height: boxHeight,
+      style: { overflow: "visible" },
+      children: /* @__PURE__ */ jsx4(
+        "div",
+        {
+          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          style: boxStyle,
+          children: /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: { width: "100%", whiteSpace: "pre-wrap", wordBreak: "break-word" },
+              "aria-label": plain,
+              dangerouslySetInnerHTML: { __html: html }
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+function PlainTextLayer({ layer, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const { text, style } = content;
+  const rawX = resolveValue(position.x, viewport.width);
+  const rawY = resolveValue(position.y, viewport.height);
+  const boxWidth = position.width != null ? resolveValue(position.width, viewport.width) : void 0;
+  const boxHeight = position.height != null ? resolveValue(position.height, viewport.height) : void 0;
+  const maxWidth = boxWidth;
   const textAnchor = getTextAnchor(style.textAlign, position.anchor);
-  const dominantBaseline = getDominantBaseline(position.anchor);
+  const dominantBaseline = getDominantBaseline(style.verticalAlign, position.anchor);
+  const anchor = position.anchor ?? "top-left";
+  const x = pivotX(rawX, boxWidth, anchor, textAnchor);
+  const y = pivotY(rawY, boxHeight, anchor, dominantBaseline);
   const animStyle = getAnimationStyle(animation, blockTime);
   const rawLines = (text ?? "").split("\n");
   let lines = maxWidth ? rawLines.reduce(
@@ -219,25 +534,32 @@ function TextLayer({ layer, viewport, blockTime }) {
     fontSize: `${style.fontSize}px`,
     fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
     fontWeight: style.fontWeight || "normal",
+    fontStyle: style.fontStyle || "normal",
     fill: style.color,
     ...animStyle.style
   };
   const filterId = style.shadow ? `shadow-${layer.id}` : void 0;
-  return /* @__PURE__ */ jsxs("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: [
-    style.shadow && /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx2("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "rgba(0,0,0,0.7)" }) }) }),
-    style.background && /* @__PURE__ */ jsx2(
-      "rect",
+  return /* @__PURE__ */ jsxs2("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: [
+    style.shadow && /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsx4("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx4("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "rgba(0,0,0,0.7)" }) }) }),
+    /* @__PURE__ */ jsx4(
+      TextBox,
       {
-        x: x - (style.padding || 16),
-        y: y - style.fontSize - (style.padding || 16),
-        width: getTextBoxWidth(lines, style) + (style.padding || 16) * 2,
-        height: lines.length * lineHeightPx + (style.padding || 16) * 2,
-        fill: style.background,
-        rx: 4,
-        ry: 4
+        layerId: layer.id,
+        style,
+        box: boxWidth != null && boxHeight != null ? {
+          x: rawX - anchorAxis(anchor, boxWidth, "x"),
+          y: rawY - anchorAxis(anchor, boxHeight, "y"),
+          width: boxWidth,
+          height: boxHeight
+        } : {
+          x: x - (style.padding || 16),
+          y: y - style.fontSize - (style.padding || 16),
+          width: getTextBoxWidth(lines, style) + (style.padding || 16) * 2,
+          height: lines.length * lineHeightPx + (style.padding || 16) * 2
+        }
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx4(
       "text",
       {
         x,
@@ -246,7 +568,7 @@ function TextLayer({ layer, viewport, blockTime }) {
         dominantBaseline,
         style: textStyles,
         filter: filterId ? `url(#${filterId})` : void 0,
-        children: lines.map((line, i) => /* @__PURE__ */ jsxs("tspan", { x, dy: i === 0 ? 0 : lineHeightPx, children: [
+        children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tspan", { x, dy: i === 0 ? 0 : lineHeightPx, children: [
           line || "\xA0",
           " "
         ] }, i))
@@ -254,6 +576,102 @@ function TextLayer({ layer, viewport, blockTime }) {
     )
   ] });
 }
+function RichTextLayer({ layer, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const { html, style } = content;
+  const rawX = resolveValue(position.x, viewport.width);
+  const rawY = resolveValue(position.y, viewport.height);
+  const boxWidth = position.width != null ? resolveValue(position.width, viewport.width) : viewport.width;
+  const boxHeight = position.height != null ? resolveValue(position.height, viewport.height) : style.fontSize * (style.lineHeight || 1.4) * 2;
+  const anchor = position.anchor ?? "top-left";
+  const boxX = rawX - anchorAxis(anchor, boxWidth, "x");
+  const boxY = rawY - anchorAxis(anchor, boxHeight, "y");
+  const safeHtml = useMemo3(
+    () => stringifyHtmlNodes(sanitizeHtmlNodes(parseHtmlToNodes(html ?? ""))),
+    [html]
+  );
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const verticalJustify = style.verticalAlign === "middle" ? "center" : style.verticalAlign === "bottom" ? "flex-end" : "flex-start";
+  const hasBorder = !!(style.borderColor && (style.borderWidth ?? 0) > 0);
+  const boxStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: verticalJustify,
+    padding: style.padding ?? 0,
+    color: style.color,
+    fontSize: `${style.fontSize}px`,
+    fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
+    fontWeight: style.fontWeight || "normal",
+    fontStyle: style.fontStyle || "normal",
+    lineHeight: style.lineHeight || 1.4,
+    textAlign: style.textAlign ?? "left",
+    overflow: "hidden",
+    ...style.background ? { background: style.background } : {},
+    ...hasBorder ? {
+      border: `${style.borderWidth}px ${style.borderStyle ?? "solid"} ${style.borderColor}`,
+      borderRadius: 4
+    } : {},
+    ...style.shadow ? { textShadow: "0 2px 3px rgba(0,0,0,0.7)" } : {},
+    ...animStyle.style
+  };
+  const cls = `squisq-rich-text-${cssId(layer.id)}`;
+  const scopedCss = `.${cls}{margin:0}.${cls} p{margin:0 0 .4em}.${cls} h1,.${cls} h2,.${cls} h3,.${cls} h4,.${cls} h5,.${cls} h6{margin:0 0 .3em;line-height:1.2}.${cls} ul,.${cls} ol{margin:0 0 .4em;padding-left:1.2em;list-style-position:inside}.${cls} li{margin:0}.${cls} li>p{display:inline;margin:0}.${cls} *:first-child{margin-top:0}.${cls} *:last-child{margin-bottom:0}.${cls} a{color:inherit;text-decoration:underline}`;
+  return /* @__PURE__ */ jsx4("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: /* @__PURE__ */ jsx4("foreignObject", { x: boxX, y: boxY, width: boxWidth, height: boxHeight, children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+      style: boxStyle,
+      children: [
+        /* @__PURE__ */ jsx4("style", { children: scopedCss }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: cls,
+            "aria-label": content.text,
+            style: { width: "100%", whiteSpace: "pre-wrap", wordBreak: "break-word" },
+            dangerouslySetInnerHTML: { __html: safeHtml }
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+function cssId(id) {
+  return id.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+function TextBox({
+  layerId,
+  style,
+  box
+}) {
+  const hasFill = !!(style.background || style.backgroundGradient);
+  const hasBorder = !!(style.borderColor && (style.borderWidth ?? 0) > 0);
+  if (!hasFill && !hasBorder) return null;
+  const { fill, def } = resolveFill(layerId, style.background, style.backgroundGradient);
+  const dash = borderDashArray(style.borderStyle, style.borderWidth);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    def && /* @__PURE__ */ jsx4("defs", { children: def }),
+    /* @__PURE__ */ jsx4(
+      "rect",
+      {
+        x: box.x,
+        y: box.y,
+        width: box.width,
+        height: box.height,
+        fill: hasFill ? fill : "none",
+        fillOpacity: hasFill ? style.backgroundOpacity : void 0,
+        stroke: hasBorder ? style.borderColor : void 0,
+        strokeWidth: hasBorder ? style.borderWidth : void 0,
+        strokeDasharray: hasBorder ? dash : void 0,
+        rx: 4,
+        ry: 4
+      }
+    )
+  ] });
+}
 function getTextAnchor(align, anchor) {
   if (align === "center") return "middle";
   if (align === "right") return "end";
@@ -262,11 +680,33 @@ function getTextAnchor(align, anchor) {
   if (anchor === "center") return "middle";
   return "start";
 }
-function getDominantBaseline(anchor) {
+function getDominantBaseline(verticalAlign, anchor) {
+  if (verticalAlign === "top") return "text-before-edge";
+  if (verticalAlign === "middle") return "middle";
+  if (verticalAlign === "bottom") return "text-after-edge";
   if (anchor?.includes("bottom")) return "text-after-edge";
   if (anchor === "center") return "middle";
   return "text-before-edge";
 }
+function pivotX(rawX, width, anchor, textAnchor) {
+  if (width == null) return rawX;
+  const boxLeft = rawX - anchorAxis(anchor, width, "x");
+  if (textAnchor === "middle") return boxLeft + width / 2;
+  if (textAnchor === "end") return boxLeft + width;
+  return boxLeft;
+}
+function pivotY(rawY, height, anchor, dominantBaseline) {
+  if (height == null) return rawY;
+  const boxTop = rawY - anchorAxis(anchor, height, "y");
+  if (dominantBaseline === "middle") return boxTop + height / 2;
+  if (dominantBaseline === "text-after-edge") return boxTop + height;
+  return boxTop;
+}
+function anchorAxis(anchor, size, axis) {
+  if (anchor === "center") return size / 2;
+  if (axis === "x") return anchor.includes("right") ? size : 0;
+  return anchor.includes("bottom") ? size : 0;
+}
 function getTextBoxWidth(lines, style) {
   const maxLineLength = Math.max(...lines.map((l) => l.length));
   return maxLineLength * style.fontSize * 0.55;
@@ -306,7 +746,7 @@ function wrapText(text, fontSize, maxWidth) {
 }
 
 // src/layers/ShapeLayer.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function ShapeLayer({ layer, viewport, blockTime }) {
   const { content, position, animation } = layer;
   const rawX = resolveValue(position.x, viewport.width);
@@ -319,14 +759,14 @@ function ShapeLayer({ layer, viewport, blockTime }) {
   const animStyle = getAnimationStyle(animation, blockTime);
   const fill = content.fill || "none";
   const isCSSGradient = typeof fill === "string" && fill.includes("gradient(");
-  if (content.shape === "rect" && isCSSGradient) {
-    return /* @__PURE__ */ jsx3(
+  if (content.shape === "rect" && isCSSGradient && !content.gradient) {
+    return /* @__PURE__ */ jsx5(
       "g",
       {
         className: `block-layer block-layer--shape ${animStyle.className}`,
         style: animStyle.style,
         "data-layer-id": layer.id,
-        children: /* @__PURE__ */ jsx3("foreignObject", { x, y, width, height, children: /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx5("foreignObject", { x, y, width, height, children: /* @__PURE__ */ jsx5(
           "div",
           {
             style: {
@@ -341,19 +781,34 @@ function ShapeLayer({ layer, viewport, blockTime }) {
       }
     );
   }
-  const shapeProps = {
+  const { fill: fillValue, def: fillDef } = resolveFill(
+    layer.id,
     fill,
+    content.gradient,
+    content.pattern
+  );
+  const { filterAttr, def: filterDef } = resolveShapeFilter(layer.id, content.filter);
+  const dash = borderDashArray(content.borderStyle, content.strokeWidth);
+  const shapeProps = {
+    fill: fillValue,
+    fillOpacity: content.fillOpacity,
     stroke: content.stroke,
-    strokeWidth: content.strokeWidth
+    strokeWidth: content.strokeWidth,
+    strokeDasharray: dash,
+    ...filterAttr ? { filter: filterAttr } : {}
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "g",
     {
       className: `block-layer block-layer--shape ${animStyle.className}`,
       style: animStyle.style,
       "data-layer-id": layer.id,
       children: [
-        content.shape === "rect" && /* @__PURE__ */ jsx3(
+        (fillDef || filterDef) && /* @__PURE__ */ jsxs3("defs", { children: [
+          fillDef,
+          filterDef
+        ] }),
+        content.shape === "rect" && /* @__PURE__ */ jsx5(
           "rect",
           {
             x,
@@ -365,7 +820,7 @@ function ShapeLayer({ layer, viewport, blockTime }) {
             ...shapeProps
           }
         ),
-        content.shape === "circle" && /* @__PURE__ */ jsx3(
+        content.shape === "circle" && /* @__PURE__ */ jsx5(
           "circle",
           {
             cx: x + width / 2,
@@ -374,7 +829,7 @@ function ShapeLayer({ layer, viewport, blockTime }) {
             ...shapeProps
           }
         ),
-        content.shape === "line" && /* @__PURE__ */ jsx3(
+        content.shape === "line" && /* @__PURE__ */ jsx5(
           "line",
           {
             x1: x,
@@ -382,16 +837,108 @@ function ShapeLayer({ layer, viewport, blockTime }) {
             x2: x + width,
             y2: y + height,
             stroke: content.stroke || "#ffffff",
-            strokeWidth: content.strokeWidth || 2
+            strokeWidth: content.strokeWidth || 2,
+            strokeDasharray: dash
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/layers/PathLayer.tsx
+import { markerPath, shapePath } from "@bendyline/squisq/doc";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function effectivePath(layer, viewport) {
+  const { content, position } = layer;
+  if (!content.shapeKind) return content.d;
+  const w = position.width ? resolveValue(position.width, viewport.width) : 0;
+  const h = position.height ? resolveValue(position.height, viewport.height) : 0;
+  const rawX = resolveValue(position.x, viewport.width);
+  const rawY = resolveValue(position.y, viewport.height);
+  const anchor = getAnchorOffset(position.anchor, w, h);
+  const derived = shapePath(content.shapeKind, rawX + anchor.x, rawY + anchor.y, w, h);
+  return derived ?? content.d;
+}
+function effectiveMarker(explicit, arrow, end) {
+  if (explicit) return explicit;
+  const wants = arrow === "both" || arrow === end;
+  return wants ? "arrow" : "none";
+}
+function PathLayer({ layer, viewport, blockTime }) {
+  const { content, animation, id } = layer;
+  const d = effectivePath(layer, viewport);
+  const stroke = content.stroke ?? "#1e293b";
+  const strokeWidth = content.strokeWidth ?? 2;
+  const { fill, def: fillDef } = resolveFill(id, content.fill ?? "none", content.gradient);
+  const dash = content.borderStyle ? borderDashArray(content.borderStyle, strokeWidth) : content.dasharray;
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const startId = `marker-start-${id}`;
+  const endId = `marker-end-${id}`;
+  const start = markerPath(effectiveMarker(content.startMarker, content.arrow, "start"), "start");
+  const end = markerPath(effectiveMarker(content.endMarker, content.arrow, "end"), "end");
+  return /* @__PURE__ */ jsxs4(
+    "g",
+    {
+      className: `block-layer block-layer--path ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": id,
+      children: [
+        /* @__PURE__ */ jsxs4("defs", { children: [
+          fillDef,
+          end && /* @__PURE__ */ jsx6(MarkerDef, { id: endId, dir: "end", d: end.d, filled: end.filled, stroke }),
+          start && /* @__PURE__ */ jsx6(MarkerDef, { id: startId, dir: "start", d: start.d, filled: start.filled, stroke })
+        ] }),
+        /* @__PURE__ */ jsx6(
+          "path",
+          {
+            d,
+            stroke,
+            strokeWidth,
+            fill,
+            fillOpacity: content.fillOpacity,
+            strokeDasharray: dash,
+            markerStart: start ? `url(#${startId})` : void 0,
+            markerEnd: end ? `url(#${endId})` : void 0
           }
         )
       ]
     }
   );
 }
+function MarkerDef({
+  id,
+  dir,
+  d,
+  filled,
+  stroke
+}) {
+  return /* @__PURE__ */ jsx6(
+    "marker",
+    {
+      id,
+      viewBox: "0 0 10 10",
+      refX: dir === "end" ? 9 : 1,
+      refY: 5,
+      markerWidth: 4,
+      markerHeight: 4,
+      orient: "auto-start-reverse",
+      markerUnits: "strokeWidth",
+      children: /* @__PURE__ */ jsx6(
+        "path",
+        {
+          d,
+          fill: filled ? stroke : "none",
+          stroke: filled ? "none" : stroke,
+          strokeWidth: filled ? void 0 : 1.5
+        }
+      )
+    }
+  );
+}
 
 // src/layers/MapLayer.tsx
-import { useState as useState2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useEffect as useEffect3 } from "react";
 
 // src/utils/mapTileUtils.ts
 var TILE_PROVIDERS = {
@@ -574,7 +1121,7 @@ function drawAttribution(ctx, text, width, height) {
 }
 
 // src/layers/MapLayer.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function MapLayer({ layer, basePath, viewport, blockTime }) {
   const { content, position, animation } = layer;
   const [mapImageUrl, setMapImageUrl] = useState2(null);
@@ -587,7 +1134,7 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
   const offset = getAnchorOffset(position.anchor, width, height);
   const finalX = x + offset.x;
   const finalY = y + offset.y;
-  useEffect2(() => {
+  useEffect3(() => {
     let cancelled = false;
     if (content.staticSrc) {
       const src = content.staticSrc.startsWith("http") ? content.staticSrc : `${basePath}/${content.staticSrc}`;
@@ -632,15 +1179,15 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
   ]);
   const animStyle = getAnimationStyle(animation, blockTime);
   if (isLoading) {
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs5(
       "g",
       {
         className: `block-layer block-layer--map ${animStyle.className}`,
         style: animStyle.style,
         "data-layer-id": layer.id,
         children: [
-          /* @__PURE__ */ jsx4("rect", { x: finalX, y: finalY, width, height, fill: "#e5e7eb" }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx7("rect", { x: finalX, y: finalY, width, height, fill: "#e5e7eb" }),
+          /* @__PURE__ */ jsx7(
             "text",
             {
               x: finalX + width / 2,
@@ -658,15 +1205,15 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
     );
   }
   if (error || !mapImageUrl) {
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs5(
       "g",
       {
         className: `block-layer block-layer--map ${animStyle.className}`,
         style: animStyle.style,
         "data-layer-id": layer.id,
         children: [
-          /* @__PURE__ */ jsx4("rect", { x: finalX, y: finalY, width, height, fill: "#fef2f2" }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx7("rect", { x: finalX, y: finalY, width, height, fill: "#fef2f2" }),
+          /* @__PURE__ */ jsx7(
             "text",
             {
               x: finalX + width / 2,
@@ -683,15 +1230,15 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "g",
     {
       className: `block-layer block-layer--map ${animStyle.className}`,
       style: animStyle.style,
       "data-layer-id": layer.id,
       children: [
-        /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsx4("clipPath", { id: `clip-${layer.id}`, children: /* @__PURE__ */ jsx4("rect", { x: finalX, y: finalY, width, height }) }) }),
-        /* @__PURE__ */ jsx4("g", { clipPath: `url(#clip-${layer.id})`, children: /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: `clip-${layer.id}`, children: /* @__PURE__ */ jsx7("rect", { x: finalX, y: finalY, width, height }) }) }),
+        /* @__PURE__ */ jsx7("g", { clipPath: `url(#clip-${layer.id})`, children: /* @__PURE__ */ jsx7(
           "image",
           {
             href: mapImageUrl,
@@ -709,18 +1256,14 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
 }
 
 // src/layers/VideoLayer.tsx
-import { useRef, useEffect as useEffect3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function VideoLayer({
-  layer,
-  basePath,
-  viewport,
-  blockTime: _blockTime,
-  isPlaying
-}) {
+import { useRef as useRef2, useEffect as useEffect4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying }) {
   const { content, position } = layer;
-  const videoRef = useRef(null);
-  const hasStartedRef = useRef(false);
+  const videoRef = useRef2(null);
+  const hasStartedRef = useRef2(false);
+  const startAt = content.startAt ?? 0;
+  const gated = blockTime < startAt;
   const x = resolveValue(position.x, viewport.width);
   const y = resolveValue(position.y, viewport.height);
   const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
@@ -731,7 +1274,7 @@ function VideoLayer({
   const src = useMediaUrl(content.src, basePath);
   const resolvedPoster = useMediaUrl(content.posterSrc || "", basePath);
   const posterSrc = content.posterSrc ? resolvedPoster : void 0;
-  useEffect3(() => {
+  useEffect4(() => {
     const video = videoRef.current;
     if (!video) return;
     video.currentTime = content.clipStart;
@@ -755,9 +1298,14 @@ function VideoLayer({
       video.pause();
     };
   }, [content.src, content.clipStart, content.clipEnd]);
-  useEffect3(() => {
+  useEffect4(() => {
     const video = videoRef.current;
     if (!video || !hasStartedRef.current) return;
+    if (gated) {
+      video.pause();
+      video.currentTime = content.clipStart;
+      return;
+    }
     if (video.currentTime >= content.clipEnd) return;
     if (isPlaying) {
       const playPromise = video.play();
@@ -768,8 +1316,8 @@ function VideoLayer({
     } else {
       video.pause();
     }
-  }, [isPlaying, content.clipEnd]);
-  return /* @__PURE__ */ jsx5("g", { className: "block-layer block-layer--video", "data-layer-id": layer.id, children: /* @__PURE__ */ jsx5("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx5(
+  }, [isPlaying, gated, content.clipStart, content.clipEnd]);
+  return /* @__PURE__ */ jsx8("g", { className: "block-layer block-layer--video", "data-layer-id": layer.id, children: /* @__PURE__ */ jsx8("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx8(
     "video",
     {
       ref: videoRef,
@@ -780,6 +1328,7 @@ function VideoLayer({
       preload: "auto",
       "data-clip-start": content.clipStart,
       "data-clip-end": content.clipEnd,
+      "data-start-at": startAt,
       style: {
         width: `${width}px`,
         height: `${height}px`,
@@ -793,7 +1342,7 @@ function VideoLayer({
 }
 
 // src/layers/TableLayer.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function TableLayer({ layer, viewport, blockTime }) {
   const { content, position, animation } = layer;
   const { headers, rows, align, style } = content;
@@ -810,7 +1359,7 @@ function TableLayer({ layer, viewport, blockTime }) {
     return a ? { textAlign: a } : void 0;
   };
   const borderRadius = style.borderRadius ?? 8;
-  return /* @__PURE__ */ jsx6("foreignObject", { x: finalX, y: finalY, width, height, style: animStyle, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx9("foreignObject", { x: finalX, y: finalY, width, height, style: animStyle, children: /* @__PURE__ */ jsx9(
     "div",
     {
       ...{ xmlns: "http://www.w3.org/1999/xhtml" },
@@ -823,7 +1372,7 @@ function TableLayer({ layer, viewport, blockTime }) {
         padding: "16px",
         boxSizing: "border-box"
       },
-      children: /* @__PURE__ */ jsxs4(
+      children: /* @__PURE__ */ jsxs6(
         "table",
         {
           style: {
@@ -837,7 +1386,7 @@ function TableLayer({ layer, viewport, blockTime }) {
             border: `1px solid ${style.borderColor}`
           },
           children: [
-            headers.length > 0 && /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsx6("tr", { children: headers.map((header, ci) => /* @__PURE__ */ jsx6(
+            headers.length > 0 && /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { children: headers.map((header, ci) => /* @__PURE__ */ jsx9(
               "th",
               {
                 style: {
@@ -854,7 +1403,7 @@ function TableLayer({ layer, viewport, blockTime }) {
               },
               ci
             )) }) }),
-            rows.length > 0 && /* @__PURE__ */ jsx6("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsx6("tr", { children: row.map((cell, ci) => /* @__PURE__ */ jsx6(
+            rows.length > 0 && /* @__PURE__ */ jsx9("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsx9("tr", { children: row.map((cell, ci) => /* @__PURE__ */ jsx9(
               "td",
               {
                 style: {
@@ -877,7 +1426,7 @@ function TableLayer({ layer, viewport, blockTime }) {
 }
 
 // src/BlockRenderer.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var VIEWPORT = {
   width: 1920,
   height: 1080
@@ -888,20 +1437,22 @@ function BlockRenderer({
   basePath,
   isEntering = false,
   isExiting = false,
+  transition,
   viewport = VIEWPORT,
   isPlaying
 }) {
   let transitionClass = "";
   const transitionStyle = {};
-  if (block.transition && isEntering) {
-    transitionClass = getTransitionClass(block.transition.type, true);
-    transitionStyle["--transition-duration"] = `${block.transition.duration}s`;
-  } else if (block.transition && isExiting) {
-    transitionClass = getTransitionClass(block.transition.type, false);
-    transitionStyle["--transition-duration"] = `${block.transition.duration}s`;
+  const activeTransition = transition ?? block.transition;
+  if (activeTransition && isEntering) {
+    transitionClass = getTransitionClass(activeTransition.type, true, activeTransition.direction);
+    transitionStyle["--transition-duration"] = `${resolveTransitionDuration(activeTransition)}s`;
+  } else if (activeTransition && isExiting) {
+    transitionClass = getTransitionClass(activeTransition.type, false, activeTransition.direction);
+    transitionStyle["--transition-duration"] = `${resolveTransitionDuration(activeTransition)}s`;
   }
   const clipId = `vb-clip-${block.id}`;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "svg",
     {
       className: `block-svg ${transitionClass}`,
@@ -911,8 +1462,8 @@ function BlockRenderer({
       overflow: "hidden",
       "data-block-id": block.id,
       children: [
-        /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: clipId, children: /* @__PURE__ */ jsx7("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }),
-        /* @__PURE__ */ jsx7("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx10("defs", { children: /* @__PURE__ */ jsx10("clipPath", { id: clipId, children: /* @__PURE__ */ jsx10("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }),
+        /* @__PURE__ */ jsx10("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => /* @__PURE__ */ jsx10(
           LayerRenderer,
           {
             layer,
@@ -930,15 +1481,17 @@ function BlockRenderer({
 function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }) {
   switch (layer.type) {
     case "image":
-      return /* @__PURE__ */ jsx7(ImageLayer, { layer, basePath, viewport, blockTime });
+      return /* @__PURE__ */ jsx10(ImageLayer, { layer, basePath, viewport, blockTime });
     case "text":
-      return /* @__PURE__ */ jsx7(TextLayer, { layer, viewport, blockTime });
+      return /* @__PURE__ */ jsx10(TextLayer, { layer, viewport, blockTime });
     case "shape":
-      return /* @__PURE__ */ jsx7(ShapeLayer, { layer, viewport, blockTime });
+      return /* @__PURE__ */ jsx10(ShapeLayer, { layer, viewport, blockTime });
+    case "path":
+      return /* @__PURE__ */ jsx10(PathLayer, { layer, viewport, blockTime });
     case "map":
-      return /* @__PURE__ */ jsx7(MapLayer, { layer, basePath, viewport, blockTime });
+      return /* @__PURE__ */ jsx10(MapLayer, { layer, basePath, viewport, blockTime });
     case "video":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx10(
         VideoLayer,
         {
           layer,
@@ -949,7 +1502,7 @@ function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }) {
         }
       );
     case "table":
-      return /* @__PURE__ */ jsx7(TableLayer, { layer, viewport, blockTime });
+      return /* @__PURE__ */ jsx10(TableLayer, { layer, viewport, blockTime });
     default:
       console.warn(`Unknown layer type: ${layer.type}`);
       return null;
@@ -960,9 +1513,9 @@ function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }) {
 import { getCaptionAtTime } from "@bendyline/squisq/schemas";
 
 // src/SocialCaptionOverlay.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo4 } from "react";
 import { resolveFontFamily } from "@bendyline/squisq/schemas";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var TARGET_CHUNK_SIZE = 4;
 var MIN_CHUNK_SIZE = 2;
 var MAX_CHUNK_SIZE = 6;
@@ -1016,12 +1569,12 @@ function SocialCaptionOverlay({
   theme,
   viewport
 }) {
-  const { chunks } = useMemo2(
+  const { chunks } = useMemo4(
     () => captions ? buildWordStream(captions) : { words: [], chunks: [] },
     [captions]
   );
   if (!enabled || chunks.length === 0) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx11(
       "div",
       {
         className: "social-caption-overlay",
@@ -1083,7 +1636,7 @@ function SocialCaptionOverlay({
   const viewportHeight = viewport?.height ?? 720;
   const baseFontSize = Math.round(viewportHeight * 0.055);
   const fontSize = Math.max(24, Math.min(72, baseFontSize));
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       className: "social-caption-overlay",
@@ -1100,7 +1653,7 @@ function SocialCaptionOverlay({
         opacity: 1,
         transition: "opacity 0.15s ease-in-out"
       },
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -1109,7 +1662,7 @@ function SocialCaptionOverlay({
           },
           children: activeChunk.words.map((word, i) => {
             const isActive = i === activeWordIndex;
-            return /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsx11(
               "span",
               {
                 style: {
@@ -1134,7 +1687,7 @@ function SocialCaptionOverlay({
 }
 
 // src/CaptionOverlay.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function CaptionOverlay({
   captions,
   currentTime,
@@ -1145,7 +1698,7 @@ function CaptionOverlay({
   viewport
 }) {
   if (captionStyle === "social") {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx12(
       SocialCaptionOverlay,
       {
         captions,
@@ -1158,7 +1711,7 @@ function CaptionOverlay({
   }
   const phrase = enabled && captions ? getCaptionAtTime(captions, currentTime) : null;
   const captionText = phrase?.text ?? null;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: "caption-overlay",
@@ -1177,7 +1730,7 @@ function CaptionOverlay({
         padding: "0 4px",
         boxSizing: "border-box"
       },
-      children: captionText && /* @__PURE__ */ jsx9(
+      children: captionText && /* @__PURE__ */ jsx12(
         "div",
         {
           style: {
@@ -1187,7 +1740,7 @@ function CaptionOverlay({
             borderRadius: "4px",
             backdropFilter: "blur(4px)"
           },
-          children: /* @__PURE__ */ jsx9(
+          children: /* @__PURE__ */ jsx12(
             "span",
             {
               style: {
@@ -1210,12 +1763,12 @@ function CaptionOverlay({
 }
 
 // src/hooks/useAutoSurface.ts
-import { useCallback, useMemo as useMemo3, useSyncExternalStore } from "react";
+import { useCallback, useMemo as useMemo5, useSyncExternalStore } from "react";
 import { DARK_SURFACE, LIGHT_SURFACE } from "@bendyline/squisq/schemas";
 var DARK_QUERY = "(prefers-color-scheme: dark)";
 var getServerSnapshot = () => LIGHT_SURFACE;
 function useAutoSurface(enabled) {
-  const mql = useMemo3(
+  const mql = useMemo5(
     () => enabled && typeof window !== "undefined" ? window.matchMedia(DARK_QUERY) : null,
     [enabled]
   );
@@ -1233,7 +1786,7 @@ function useAutoSurface(enabled) {
 }
 
 // src/hooks/useAudioSync.ts
-import { useState as useState3, useEffect as useEffect4, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { useState as useState3, useEffect as useEffect5, useRef as useRef3, useCallback as useCallback2 } from "react";
 function useAudioSync(audioRef, audioTrack, basePath = "") {
   const [currentTime, setCurrentTime] = useState3(0);
   const [isPlaying, setIsPlaying] = useState3(false);
@@ -1241,13 +1794,13 @@ function useAudioSync(audioRef, audioTrack, basePath = "") {
   const [isEnded, setIsEnded] = useState3(false);
   const [isAudioReady, setIsAudioReady] = useState3(false);
   const [totalDuration, setTotalDuration] = useState3(0);
-  const segmentStarts = useRef2([]);
-  const pendingSeekTime = useRef2(null);
-  const shouldPlayAfterLoad = useRef2(false);
-  const blobUrls = useRef2(/* @__PURE__ */ new Map());
-  const loadingPromises = useRef2(/* @__PURE__ */ new Map());
-  const fallbackMode = useRef2(false);
-  useEffect4(() => {
+  const segmentStarts = useRef3([]);
+  const pendingSeekTime = useRef3(null);
+  const shouldPlayAfterLoad = useRef3(false);
+  const blobUrls = useRef3(/* @__PURE__ */ new Map());
+  const loadingPromises = useRef3(/* @__PURE__ */ new Map());
+  const fallbackMode = useRef3(false);
+  useEffect5(() => {
     if (!audioTrack?.segments) {
       return;
     }
@@ -1287,7 +1840,7 @@ function useAudioSync(audioRef, audioTrack, basePath = "") {
     },
     [basePath]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!audioTrack?.segments) return;
     audioTrack.segments.forEach((segment) => {
       preloadAudio(segment.src);
@@ -1300,16 +1853,16 @@ function useAudioSync(audioRef, audioTrack, basePath = "") {
       currentBlobUrls.clear();
     };
   }, [audioTrack, preloadAudio]);
-  useEffect4(() => {
+  useEffect5(() => {
     const audio = audioRef.current;
     if (!audio) return;
     const handleTimeUpdate = () => {
+      if (fallbackMode.current) return;
       const segmentStart = segmentStarts.current[currentSegment] || 0;
       const overallTime = segmentStart + audio.currentTime;
       setCurrentTime(overallTime);
     };
     const handlePlay = () => {
-      fallbackMode.current = false;
       setIsPlaying(true);
     };
     const handlePause = () => setIsPlaying(false);
@@ -1338,7 +1891,7 @@ function useAudioSync(audioRef, audioTrack, basePath = "") {
       audio.removeEventListener("error", handleError);
     };
   }, [audioRef, currentSegment, audioTrack]);
-  useEffect4(() => {
+  useEffect5(() => {
     const audio = audioRef.current;
     if (!audio || !audioTrack?.segments) return;
     const segment = audioTrack.segments[currentSegment];
@@ -1461,7 +2014,7 @@ function useAudioSync(audioRef, audioTrack, basePath = "") {
     await new Promise((resolve) => setTimeout(resolve, 50));
     play();
   }, [seekTo, play]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isPlaying || !fallbackMode.current || !totalDuration) return;
     let lastTime = performance.now();
     let raf;
@@ -1505,27 +2058,34 @@ function useAudioSync(audioRef, audioTrack, basePath = "") {
 }
 
 // src/hooks/useDocPlayback.ts
-import { useState as useState4, useEffect as useEffect5, useMemo as useMemo4, useCallback as useCallback3, useRef as useRef3 } from "react";
-import { getBlockAtTime } from "@bendyline/squisq/schemas";
+import { useMemo as useMemo6, useCallback as useCallback3, useRef as useRef4 } from "react";
+import {
+  DEFAULT_THEME,
+  getBlockAtTime,
+  resolveBlockTransition,
+  resolveTransitionDuration as resolveTransitionDuration2
+} from "@bendyline/squisq/schemas";
 import {
   expandDocBlocks,
-  flattenBlocks,
+  flattenRenderableBlocks,
   isTemplateBlock,
+  resolvePersistentLayers,
   VIEWPORT_PRESETS
 } from "@bendyline/squisq/doc";
 function useDocPlayback(script, currentTime, viewport = VIEWPORT_PRESETS.landscape, renderMode = false, theme) {
-  const [transitionState, setTransitionState] = useState4({
-    entering: false,
-    exiting: false,
-    previousBlock: null
-  });
-  const blocks = useMemo4(() => {
+  void renderMode;
+  const blocks = useMemo6(() => {
     if (!script?.blocks) {
       return [];
     }
     const hasChildren = script.blocks.some((b) => b.children && b.children.length > 0);
-    const flatBlocks = hasChildren ? flattenBlocks(script.blocks) : script.blocks;
+    const flatBlocks = hasChildren ? flattenRenderableBlocks(script.blocks) : script.blocks;
     const hasTemplates = flatBlocks.some(isTemplateBlock);
+    const resolvedTheme = theme ?? DEFAULT_THEME;
+    const persistentLayers = resolvePersistentLayers(
+      { persistentLayers: script.persistentLayers },
+      resolvedTheme
+    );
     if (hasTemplates) {
       const audioSegments = script.audio?.segments?.map((seg) => ({
         startTime: seg.startTime,
@@ -1534,78 +2094,58 @@ function useDocPlayback(script, currentTime, viewport = VIEWPORT_PRESETS.landsca
       const expanded = expandDocBlocks(flatBlocks, {
         audioSegments,
         viewport,
-        persistentLayers: script.persistentLayers,
-        theme
+        persistentLayers,
+        theme,
+        // Custom (user-defined) templates inlined into the doc's
+        // frontmatter — see CustomTemplates.ts. Merged onto the
+        // built-in registry so blocks annotated with `{[myhero]}`
+        // resolve through the user's design.
+        customTemplates: script.customTemplates
       });
       return expanded;
     }
-    return flatBlocks;
-  }, [script?.blocks, script?.audio?.segments, script?.persistentLayers, viewport, theme]);
-  const currentBlock = useMemo4(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
-  const currentBlockIndex = useMemo4(
+    return flatBlocks.map((block, index) => {
+      const transition = resolveBlockTransition(block, resolvedTheme, index);
+      return transition !== block.transition ? { ...block, transition } : block;
+    });
+  }, [
+    script?.blocks,
+    script?.audio?.segments,
+    script?.persistentLayers,
+    script?.customTemplates,
+    viewport,
+    theme
+  ]);
+  const currentBlock = useMemo6(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
+  const currentBlockIndex = useMemo6(
     () => currentBlock ? blocks.indexOf(currentBlock) : -1,
     [blocks, currentBlock]
   );
-  const blockTime = useMemo4(() => {
+  const blockTime = useMemo6(() => {
     if (!currentBlock) return 0;
     return Math.max(0, currentTime - currentBlock.startTime);
   }, [currentBlock, currentTime]);
-  const blockProgress = useMemo4(() => {
+  const blockProgress = useMemo6(() => {
     if (!currentBlock || currentBlock.duration === 0) return 0;
     return Math.min(1, blockTime / currentBlock.duration);
   }, [currentBlock, blockTime]);
-  const docProgress = useMemo4(() => {
+  const docProgress = useMemo6(() => {
     if (!script || script.duration === 0) return 0;
     return Math.min(1, currentTime / script.duration);
   }, [script, currentTime]);
-  const _prevBlockRef = useMemo4(
-    () => currentBlock,
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally keyed on index, not block reference
-    [currentBlockIndex]
-  );
-  useEffect5(() => {
-    if (!currentBlock || renderMode) return;
-    if (transitionState.previousBlock?.id !== currentBlock.id) {
-      const transition = currentBlock.transition;
-      const transitionDuration = transition?.duration || 0;
-      if (transitionDuration > 0) {
-        setTransitionState({
-          entering: true,
-          exiting: true,
-          previousBlock: transitionState.previousBlock
-        });
-        const timer = setTimeout(() => {
-          setTransitionState({
-            entering: false,
-            exiting: false,
-            previousBlock: currentBlock
-          });
-        }, transitionDuration * 1e3);
-        return () => clearTimeout(timer);
-      } else {
-        setTransitionState({
-          entering: false,
-          exiting: false,
-          previousBlock: currentBlock
-        });
-      }
-    }
-  }, [currentBlock?.id, renderMode]);
-  const renderPrevBlockRef = useRef3(null);
-  useEffect5(() => {
-    if (!renderMode || !currentBlock) return;
-    if (transitionState.previousBlock?.id !== currentBlock.id) {
-      const oldPrev = transitionState.previousBlock;
-      renderPrevBlockRef.current = oldPrev;
-      setTransitionState((prev) => ({
-        ...prev,
-        previousBlock: currentBlock
-      }));
-    }
-  }, [currentBlock?.id, renderMode]);
-  const renderTransitionDuration = currentBlock?.transition?.duration || 0;
-  const renderIsEntering = renderMode && renderTransitionDuration > 0 && blockTime < renderTransitionDuration;
-  const renderIsExiting = renderIsEntering && renderPrevBlockRef.current !== null;
+  const outgoingBlockRef = useRef4(null);
+  const activeBlockIdRef = useRef4(null);
+  const lastRenderedBlockRef = useRef4(null);
+  if (currentBlock && currentBlock.id !== activeBlockIdRef.current) {
+    outgoingBlockRef.current = lastRenderedBlockRef.current;
+    activeBlockIdRef.current = currentBlock.id;
+  }
+  lastRenderedBlockRef.current = currentBlock;
+  const transitionDuration = currentBlock?.transition ? resolveTransitionDuration2(currentBlock.transition) : 0;
+  const isEntering = !!currentBlock && transitionDuration > 0 && blockTime < transitionDuration;
+  const outgoingBlock = outgoingBlockRef.current;
+  const isExiting = isEntering && outgoingBlock != null && outgoingBlock.id !== currentBlock?.id;
+  const previousBlock = isExiting ? outgoingBlock : null;
   const goToBlock = useCallback3(
     (index) => {
       if (!script || index < 0 || index >= blocks.length) return;
@@ -1629,9 +2169,9 @@ function useDocPlayback(script, currentTime, viewport = VIEWPORT_PRESETS.landsca
   return {
     currentBlock,
     currentBlockIndex,
-    previousBlock: renderMode ? renderIsExiting ? renderPrevBlockRef.current : null : transitionState.exiting ? transitionState.previousBlock : null,
-    isEntering: renderMode ? renderIsEntering : transitionState.entering,
-    isExiting: renderMode ? renderIsExiting : transitionState.exiting,
+    previousBlock,
+    isEntering,
+    isExiting,
     blockTime,
     blockProgress,
     docProgress,
@@ -1644,7 +2184,7 @@ function useDocPlayback(script, currentTime, viewport = VIEWPORT_PRESETS.landsca
 }
 
 // src/hooks/useViewportOrientation.ts
-import { useState as useState5, useEffect as useEffect6, useMemo as useMemo5 } from "react";
+import { useState as useState4, useEffect as useEffect6, useMemo as useMemo7 } from "react";
 import {
   VIEWPORT_PRESETS as VIEWPORT_PRESETS2
 } from "@bendyline/squisq/doc";
@@ -1670,7 +2210,7 @@ function getViewportForOrientation(orientation) {
   }
 }
 function useViewportOrientation() {
-  const [windowSize, setWindowSize] = useState5(() => ({
+  const [windowSize, setWindowSize] = useState4(() => ({
     width: typeof window !== "undefined" ? window.innerWidth : 1920,
     height: typeof window !== "undefined" ? window.innerHeight : 1080
   }));
@@ -1693,11 +2233,11 @@ function useViewportOrientation() {
       clearTimeout(timeoutId);
     };
   }, []);
-  const orientation = useMemo5(
+  const orientation = useMemo7(
     () => getOrientationFromWindow(windowSize.width, windowSize.height),
     [windowSize.width, windowSize.height]
   );
-  const viewport = useMemo5(() => getViewportForOrientation(orientation), [orientation]);
+  const viewport = useMemo7(() => getViewportForOrientation(orientation), [orientation]);
   return {
     viewport,
     orientation,
@@ -1709,12 +2249,12 @@ function useViewportOrientation() {
 import {
   expandCoverBlock,
   createTemplateContext,
-  DEFAULT_THEME as DEFAULT_THEME2,
+  DEFAULT_THEME as DEFAULT_THEME3,
   VIEWPORT_PRESETS as VIEWPORT_PRESETS4
 } from "@bendyline/squisq/doc";
 
 // src/DocProgressBar.tsx
-import { useRef as useRef4, useState as useState6, useCallback as useCallback4 } from "react";
+import { useRef as useRef5, useState as useState5, useCallback as useCallback4 } from "react";
 
 // src/types.ts
 function formatTime(seconds) {
@@ -1724,7 +2264,7 @@ function formatTime(seconds) {
 }
 
 // src/DocProgressBar.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function DocProgressBar({
   state,
   actions,
@@ -1732,8 +2272,9 @@ function DocProgressBar({
   expandedBlocks,
   getBlockTitle
 }) {
-  const progressBarRef = useRef4(null);
-  const [hoverPosition, setHoverPosition] = useState6(null);
+  const progressBarRef = useRef5(null);
+  const [hoverPosition, setHoverPosition] = useState5(null);
+  const playProgress = state.totalDuration > 0 ? Math.max(0, Math.min(1, state.currentTime / state.totalDuration)) : 0;
   const handleProgressHover = useCallback4((e) => {
     const bar = progressBarRef.current;
     if (!bar) return;
@@ -1757,7 +2298,7 @@ function DocProgressBar({
     },
     [expandedBlocks]
   );
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       ref: progressBarRef,
@@ -1778,7 +2319,7 @@ function DocProgressBar({
       onMouseMove: handleProgressHover,
       onMouseLeave: handleProgressLeave,
       children: [
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx13(
           "div",
           {
             style: {
@@ -1791,21 +2332,21 @@ function DocProgressBar({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx13(
           "div",
           {
+            "data-testid": "doc-progress-fill",
             style: {
               position: "absolute",
               left: 0,
-              width: `${state.docProgress * 100}%`,
+              width: `${playProgress * 100}%`,
               height: "6px",
               background: "#5b9bd5",
-              borderRadius: "3px",
-              transition: "width 0.1s"
+              borderRadius: "3px"
             }
           }
         ),
-        blockMarkers.map((marker, i) => /* @__PURE__ */ jsx10(
+        blockMarkers.map((marker, i) => /* @__PURE__ */ jsx13(
           "div",
           {
             style: {
@@ -1835,7 +2376,7 @@ function DocProgressBar({
           },
           `${marker.block.id}-${i}`
         )),
-        hoverPosition !== null && /* @__PURE__ */ jsxs6(
+        hoverPosition !== null && /* @__PURE__ */ jsxs8(
           "div",
           {
             style: {
@@ -1852,19 +2393,19 @@ function DocProgressBar({
               zIndex: 10
             },
             children: [
-              /* @__PURE__ */ jsx10("div", { style: { color: "white", fontSize: "12px", fontFamily: "monospace" }, children: formatTime(hoverPosition * state.totalDuration) }),
+              /* @__PURE__ */ jsx13("div", { style: { color: "white", fontSize: "12px", fontFamily: "monospace" }, children: formatTime(hoverPosition * state.totalDuration) }),
               (() => {
                 const hoverTime = hoverPosition * state.totalDuration;
                 const slideInfo = getBlockAtTimeLocal(hoverTime);
                 if (slideInfo && getBlockTitle) {
-                  return /* @__PURE__ */ jsx10("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "11px", marginTop: "2px" }, children: getBlockTitle(slideInfo.block) });
+                  return /* @__PURE__ */ jsx13("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "11px", marginTop: "2px" }, children: getBlockTitle(slideInfo.block) });
                 }
                 return null;
               })()
             ]
           }
         ),
-        hoverPosition !== null && /* @__PURE__ */ jsx10(
+        hoverPosition !== null && /* @__PURE__ */ jsx13(
           "div",
           {
             style: {
@@ -1886,7 +2427,7 @@ function DocProgressBar({
 }
 
 // src/DocControlsOverlay.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function DocControlsOverlay({
   state,
   actions,
@@ -1894,7 +2435,7 @@ function DocControlsOverlay({
   expandedBlocks,
   getBlockTitle
 }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: "doc-player__controls",
@@ -1911,7 +2452,7 @@ function DocControlsOverlay({
         zIndex: 100
       },
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx14(
           "button",
           {
             onClick: actions.restart,
@@ -1927,10 +2468,10 @@ function DocControlsOverlay({
             },
             title: "Restart",
             "aria-label": "Restart from beginning",
-            children: /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx11("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+            children: /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx14("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx14(
           "button",
           {
             onClick: actions.toggle,
@@ -1949,15 +2490,15 @@ function DocControlsOverlay({
               height: "40px"
             },
             "aria-label": state.isPlaying ? "Pause" : "Play",
-            children: state.isPlaying ? /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx11("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx11("path", { d: "M8 5v14l11-7z" }) })
+            children: state.isPlaying ? /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx14("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx14("path", { d: "M8 5v14l11-7z" }) })
           }
         ),
-        /* @__PURE__ */ jsxs7("span", { style: { color: "white", fontSize: "12px", minWidth: "80px", fontFamily: "monospace" }, children: [
+        /* @__PURE__ */ jsxs9("span", { style: { color: "white", fontSize: "12px", minWidth: "80px", fontFamily: "monospace" }, children: [
           formatTime(state.currentTime),
           " / ",
           formatTime(state.totalDuration)
         ] }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx14(
           DocProgressBar,
           {
             state,
@@ -1967,12 +2508,12 @@ function DocControlsOverlay({
             getBlockTitle
           }
         ),
-        /* @__PURE__ */ jsxs7("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: "11px", whiteSpace: "nowrap" }, children: [
+        /* @__PURE__ */ jsxs9("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: "11px", whiteSpace: "nowrap" }, children: [
           state.currentBlockIndex + 1,
           "/",
           state.totalBlocks
         ] }),
-        state.hasCaptions && /* @__PURE__ */ jsxs7(
+        state.hasCaptions && /* @__PURE__ */ jsxs9(
           "button",
           {
             onClick: () => actions.cycleCaptionMode(),
@@ -1991,12 +2532,12 @@ function DocControlsOverlay({
             title: state.captionMode === "off" ? "Captions: Off (click for Standard)" : state.captionMode === "standard" ? "Captions: Standard (click for Social)" : "Captions: Social (click to turn off)",
             "aria-label": "Cycle caption style",
             children: [
-              /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx11("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) }),
-              state.captionMode !== "off" && /* @__PURE__ */ jsx11("span", { style: { fontSize: "10px", textTransform: "uppercase", letterSpacing: "0.5px" }, children: state.captionMode === "standard" ? "CC" : "SM" })
+              /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx14("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) }),
+              state.captionMode !== "off" && /* @__PURE__ */ jsx14("span", { style: { fontSize: "10px", textTransform: "uppercase", letterSpacing: "0.5px" }, children: state.captionMode === "standard" ? "CC" : "SM" })
             ]
           }
         ),
-        actions.toggleFullscreen && /* @__PURE__ */ jsx11(
+        actions.toggleFullscreen && /* @__PURE__ */ jsx14(
           "button",
           {
             onClick: actions.toggleFullscreen,
@@ -2012,7 +2553,7 @@ function DocControlsOverlay({
             },
             title: state.isFullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)",
             "aria-label": state.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-            children: state.isFullscreen ? /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx11("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx11("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+            children: state.isFullscreen ? /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx14("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx14("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
           }
         )
       ]
@@ -2021,12 +2562,12 @@ function DocControlsOverlay({
 }
 
 // src/DocControlsSlideshow.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function DocControlsSlideshow({ state, slideNav }) {
   const { currentBlockIndex, totalBlocks } = state;
   const isFirst = currentBlockIndex <= 0;
   const isLast = currentBlockIndex >= totalBlocks - 1;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: "doc-controls-slideshow",
@@ -2047,7 +2588,7 @@ function DocControlsSlideshow({ state, slideNav }) {
         WebkitBackdropFilter: "blur(8px)"
       },
       children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx15(
           "button",
           {
             onClick: (e) => {
@@ -2076,10 +2617,10 @@ function DocControlsSlideshow({ state, slideNav }) {
             onMouseLeave: (e) => {
               e.currentTarget.style.background = "none";
             },
-            children: /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx12("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
+            children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx15("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx15(
           "span",
           {
             "data-testid": "slide-counter",
@@ -2096,7 +2637,7 @@ function DocControlsSlideshow({ state, slideNav }) {
             children: totalBlocks > 0 ? `${currentBlockIndex + 1} / ${totalBlocks}` : "\u2014"
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx15(
           "button",
           {
             onClick: (e) => {
@@ -2125,7 +2666,7 @@ function DocControlsSlideshow({ state, slideNav }) {
             onMouseLeave: (e) => {
               e.currentTarget.style.background = "none";
             },
-            children: /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx12("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) })
+            children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx15("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) })
           }
         )
       ]
@@ -2134,20 +2675,24 @@ function DocControlsSlideshow({ state, slideNav }) {
 }
 
 // src/LinearDocView.tsx
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo8 } from "react";
 import {
   applySurface,
   resolveFontFamily as resolveFontFamily2
 } from "@bendyline/squisq/schemas";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS3 } from "@bendyline/squisq/schemas";
-import { getLayers, hasTemplate, DEFAULT_THEME } from "@bendyline/squisq/doc";
+import { getLayers, hasTemplate, DEFAULT_THEME as DEFAULT_THEME2, deriveTemplateInputs } from "@bendyline/squisq/doc";
 import { extractPlainText } from "@bendyline/squisq/markdown";
 
 // src/MarkdownRenderer.tsx
-import { Fragment } from "react";
+import { Fragment as Fragment2 } from "react";
+import {
+  sanitizeHtmlNodes as sanitizeHtmlNodes2,
+  sanitizeUrl
+} from "@bendyline/squisq/markdown";
 
 // src/InlineVideoPlayer.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function InlineVideoPlayer({
   src,
   basePath = "",
@@ -2162,7 +2707,7 @@ function InlineVideoPlayer({
   const resolvedPoster = useMediaUrl(poster ?? "", basePath);
   const posterUrl = poster ? resolvedPoster : void 0;
   if (!resolvedSrc) return null;
-  return /* @__PURE__ */ jsx13("span", { className: `squisq-inline-video-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16("span", { className: `squisq-inline-video-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx16(
     "video",
     {
       src: resolvedSrc,
@@ -2177,7 +2722,7 @@ function InlineVideoPlayer({
 }
 
 // src/InlineAudioPlayer.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function InlineAudioPlayer({
   src,
   basePath = "",
@@ -2187,55 +2732,61 @@ function InlineAudioPlayer({
 }) {
   const resolvedSrc = useMediaUrl(src, basePath);
   if (!resolvedSrc) return null;
-  return /* @__PURE__ */ jsx14("span", { className: `squisq-inline-audio-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx14("audio", { src: resolvedSrc, controls, preload }) });
+  return /* @__PURE__ */ jsx17("span", { className: `squisq-inline-audio-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx17("audio", { src: resolvedSrc, controls, preload }) });
 }
 
 // src/MarkdownRenderer.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-function renderInline(nodes, keyPrefix = "") {
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function renderInline(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
   return nodes.map((node, i) => {
     const key = `${keyPrefix}i${i}`;
     switch (node.type) {
       case "text": {
         if (!node.value.includes("\n")) {
-          return /* @__PURE__ */ jsx15(Fragment, { children: node.value }, key);
+          return /* @__PURE__ */ jsx18(Fragment2, { children: node.value }, key);
         }
         const parts = node.value.split("\n");
-        return /* @__PURE__ */ jsx15(Fragment, { children: parts.map((part, j) => /* @__PURE__ */ jsxs9(Fragment, { children: [
-          j > 0 && /* @__PURE__ */ jsx15("br", {}),
+        return /* @__PURE__ */ jsx18(Fragment2, { children: parts.map((part, j) => /* @__PURE__ */ jsxs11(Fragment2, { children: [
+          j > 0 && /* @__PURE__ */ jsx18("br", {}),
           part
         ] }, j)) }, key);
       }
       case "emphasis":
-        return /* @__PURE__ */ jsx15("em", { className: "squisq-md-em", children: renderInline(node.children, key) }, key);
+        return /* @__PURE__ */ jsx18("em", { className: "squisq-md-em", children: renderInline(node.children, key, htmlPolicy) }, key);
       case "strong":
-        return /* @__PURE__ */ jsx15("strong", { className: "squisq-md-strong", children: renderInline(node.children, key) }, key);
+        return /* @__PURE__ */ jsx18("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, htmlPolicy) }, key);
       case "delete":
-        return /* @__PURE__ */ jsx15("del", { className: "squisq-md-del", children: renderInline(node.children, key) }, key);
+        return /* @__PURE__ */ jsx18("del", { className: "squisq-md-del", children: renderInline(node.children, key, htmlPolicy) }, key);
       case "inlineCode":
-        return /* @__PURE__ */ jsx15("code", { className: "squisq-md-inline-code", children: node.value }, key);
-      case "link":
-        return /* @__PURE__ */ jsx15(
+        return /* @__PURE__ */ jsx18("code", { className: "squisq-md-inline-code", children: node.value }, key);
+      case "link": {
+        const href = sanitizeUrl(node.url, "link");
+        if (!href) {
+          return /* @__PURE__ */ jsx18("span", { className: "squisq-md-link squisq-md-link--blocked", children: renderInline(node.children, key, htmlPolicy) }, key);
+        }
+        return /* @__PURE__ */ jsx18(
           "a",
           {
             className: "squisq-md-link",
-            href: node.url,
+            href,
             title: node.title ?? void 0,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: renderInline(node.children, key)
+            children: renderInline(node.children, key, htmlPolicy)
           },
           key
         );
+      }
       case "image":
-        return /* @__PURE__ */ jsx15(MdImage, { src: node.url, alt: node.alt ?? "", title: node.title ?? void 0 }, key);
+        return /* @__PURE__ */ jsx18(MdImage, { src: node.url, alt: node.alt ?? "", title: node.title ?? void 0 }, key);
       case "break":
-        return /* @__PURE__ */ jsx15("br", {}, key);
+        return /* @__PURE__ */ jsx18("br", {}, key);
       case "inlineMath":
-        return /* @__PURE__ */ jsx15("code", { className: "squisq-md-inline-math", children: node.value }, key);
+        return /* @__PURE__ */ jsx18("code", { className: "squisq-md-inline-math", children: node.value }, key);
       case "htmlInline":
-        if (!containsMediaTag(node.htmlChildren)) {
-          return /* @__PURE__ */ jsx15(
+        if (htmlPolicy === "strip") return null;
+        if (htmlPolicy === "trusted" && !containsMediaTag(node.htmlChildren) && !containsDangerousTag(node.htmlChildren) && !hasDangerousRawHtml(node.rawHtml)) {
+          return /* @__PURE__ */ jsx18(
             "span",
             {
               className: "squisq-md-html-inline",
@@ -2244,25 +2795,25 @@ function renderInline(nodes, keyPrefix = "") {
             key
           );
         }
-        return /* @__PURE__ */ jsx15("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(node.htmlChildren, `${key}h`) }, key);
+        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, htmlPolicy), `${key}h`) }, key);
       case "footnoteReference":
-        return /* @__PURE__ */ jsx15("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs9("a", { href: `#fn-${node.identifier}`, children: [
+        return /* @__PURE__ */ jsx18("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs11("a", { href: `#fn-${node.identifier}`, children: [
           "[",
           node.label ?? node.identifier,
           "]"
         ] }) }, key);
       case "linkReference":
-        return /* @__PURE__ */ jsx15("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key) }, key);
+        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, htmlPolicy) }, key);
       case "imageReference":
-        return /* @__PURE__ */ jsxs9("span", { className: "squisq-md-image-ref", children: [
+        return /* @__PURE__ */ jsxs11("span", { className: "squisq-md-image-ref", children: [
           "[",
           node.alt ?? node.identifier,
           "]"
         ] }, key);
       case "textDirective":
-        return /* @__PURE__ */ jsx15("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key) }, key);
+        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, htmlPolicy) }, key);
       case "mention":
-        return /* @__PURE__ */ jsxs9(
+        return /* @__PURE__ */ jsxs11(
           "span",
           {
             className: "squisq-md-mention mention",
@@ -2282,30 +2833,31 @@ function renderInline(nodes, keyPrefix = "") {
     }
   });
 }
-function renderBlock(node, key) {
+function renderBlock(node, key, htmlPolicy = "sanitize") {
   switch (node.type) {
     case "paragraph":
-      return /* @__PURE__ */ jsx15("p", { className: "squisq-md-p", children: renderInline(node.children, key) }, key);
+      return /* @__PURE__ */ jsx18("p", { className: "squisq-md-p", children: renderInline(node.children, key, htmlPolicy) }, key);
     case "heading": {
       const Tag = `h${node.depth}`;
-      return /* @__PURE__ */ jsx15(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key) }, key);
+      return /* @__PURE__ */ jsx18(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, htmlPolicy) }, key);
     }
     case "blockquote":
-      return /* @__PURE__ */ jsx15("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key) }, key);
+      return /* @__PURE__ */ jsx18("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, htmlPolicy) }, key);
     case "list":
       if (node.ordered) {
-        return /* @__PURE__ */ jsx15("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`)) }, key);
+        return /* @__PURE__ */ jsx18("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, htmlPolicy)) }, key);
       }
-      return /* @__PURE__ */ jsx15("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`)) }, key);
+      return /* @__PURE__ */ jsx18("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, htmlPolicy)) }, key);
     case "code":
-      return /* @__PURE__ */ jsx15("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx15("code", { className: node.lang ? `language-${node.lang}` : void 0, children: node.value }) }, key);
+      return /* @__PURE__ */ jsx18("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx18("code", { className: node.lang ? `language-${node.lang}` : void 0, children: node.value }) }, key);
     case "thematicBreak":
-      return /* @__PURE__ */ jsx15("hr", { className: "squisq-md-hr" }, key);
+      return /* @__PURE__ */ jsx18("hr", { className: "squisq-md-hr" }, key);
     case "table":
-      return renderTable(node.children, node.align, key);
+      return renderTable(node.children, node.align, key, htmlPolicy);
     case "htmlBlock":
-      if (!containsMediaTag(node.htmlChildren)) {
-        return /* @__PURE__ */ jsx15(
+      if (htmlPolicy === "strip") return null;
+      if (htmlPolicy === "trusted" && !containsMediaTag(node.htmlChildren) && !containsDangerousTag(node.htmlChildren) && !hasDangerousRawHtml(node.rawHtml)) {
+        return /* @__PURE__ */ jsx18(
           "div",
           {
             className: "squisq-md-html-block",
@@ -2314,95 +2866,126 @@ function renderBlock(node, key) {
           key
         );
       }
-      return /* @__PURE__ */ jsx15("div", { className: "squisq-md-html-block", children: renderHtmlNodes(node.htmlChildren, `${key}h`) }, key);
+      return /* @__PURE__ */ jsx18("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, htmlPolicy), `${key}h`) }, key);
     case "math":
-      return /* @__PURE__ */ jsx15("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx15("code", { children: node.value }) }, key);
+      return /* @__PURE__ */ jsx18("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx18("code", { children: node.value }) }, key);
     case "definition":
       return null;
     case "footnoteDefinition":
-      return /* @__PURE__ */ jsxs9("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
-        /* @__PURE__ */ jsx15("sup", { children: node.label ?? node.identifier }),
-        renderBlocks(node.children, key)
+      return /* @__PURE__ */ jsxs11("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
+        /* @__PURE__ */ jsx18("sup", { children: node.label ?? node.identifier }),
+        renderBlocks(node.children, key, htmlPolicy)
       ] }, key);
     case "containerDirective":
-      return /* @__PURE__ */ jsxs9(
+      return /* @__PURE__ */ jsxs11(
         "div",
         {
           className: `squisq-md-directive squisq-md-directive-${node.name}`,
           "data-directive": node.name,
           children: [
-            node.label && /* @__PURE__ */ jsx15("div", { className: "squisq-md-directive-label", children: node.label }),
-            renderBlocks(node.children, key)
+            node.label && /* @__PURE__ */ jsx18("div", { className: "squisq-md-directive-label", children: node.label }),
+            renderBlocks(node.children, key, htmlPolicy)
           ]
         },
         key
       );
     case "leafDirective":
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx18(
         "div",
         {
           className: `squisq-md-directive squisq-md-directive-${node.name}`,
           "data-directive": node.name,
-          children: renderInline(node.children, key)
+          children: renderInline(node.children, key, htmlPolicy)
         },
         key
       );
     case "definitionList":
-      return /* @__PURE__ */ jsx15("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
+      return /* @__PURE__ */ jsx18("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
         if (child.type === "definitionTerm") {
-          return /* @__PURE__ */ jsx15("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`) }, `${key}dt${i}`);
+          return /* @__PURE__ */ jsx18("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, htmlPolicy) }, `${key}dt${i}`);
         }
-        return /* @__PURE__ */ jsx15("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`) }, `${key}dd${i}`);
+        return /* @__PURE__ */ jsx18("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`, htmlPolicy) }, `${key}dd${i}`);
       }) }, key);
     default:
       return null;
   }
 }
-function renderListItem(item, key) {
+function renderListItem(item, key, htmlPolicy = "sanitize") {
   const isTask = item.checked !== null && item.checked !== void 0;
-  return /* @__PURE__ */ jsxs9("li", { className: `squisq-md-li${isTask ? " squisq-md-task" : ""}`, children: [
-    isTask && /* @__PURE__ */ jsx15("input", { type: "checkbox", checked: !!item.checked, readOnly: true, className: "squisq-md-checkbox" }),
-    renderBlocks(item.children, key)
+  return /* @__PURE__ */ jsxs11("li", { className: `squisq-md-li${isTask ? " squisq-md-task" : ""}`, children: [
+    isTask && /* @__PURE__ */ jsx18("input", { type: "checkbox", checked: !!item.checked, readOnly: true, className: "squisq-md-checkbox" }),
+    renderBlocks(item.children, key, htmlPolicy)
   ] }, key);
 }
-function renderTable(rows, align, key) {
+function renderTable(rows, align, key, htmlPolicy = "sanitize") {
   const [headerRow, ...bodyRows] = rows;
-  return /* @__PURE__ */ jsxs9("table", { className: "squisq-md-table", children: [
-    headerRow && /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { children: headerRow.children.map((cell, ci) => /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11("table", { className: "squisq-md-table", children: [
+    headerRow && /* @__PURE__ */ jsx18("thead", { children: /* @__PURE__ */ jsx18("tr", { children: headerRow.children.map((cell, ci) => /* @__PURE__ */ jsx18(
       "th",
       {
         className: "squisq-md-th",
         style: align?.[ci] ? { textAlign: align[ci] } : void 0,
-        children: renderInline(cell.children, `${key}th${ci}`)
+        children: renderInline(cell.children, `${key}th${ci}`, htmlPolicy)
       },
       `${key}th${ci}`
     )) }) }),
-    bodyRows.length > 0 && /* @__PURE__ */ jsx15("tbody", { children: bodyRows.map((row, ri) => /* @__PURE__ */ jsx15("tr", { children: row.children.map((cell, ci) => /* @__PURE__ */ jsx15(
+    bodyRows.length > 0 && /* @__PURE__ */ jsx18("tbody", { children: bodyRows.map((row, ri) => /* @__PURE__ */ jsx18("tr", { children: row.children.map((cell, ci) => /* @__PURE__ */ jsx18(
       "td",
       {
         className: "squisq-md-td",
         style: align?.[ci] ? { textAlign: align[ci] } : void 0,
-        children: renderInline(cell.children, `${key}td${ri}-${ci}`)
+        children: renderInline(cell.children, `${key}td${ri}-${ci}`, htmlPolicy)
       },
       `${key}td${ri}-${ci}`
     )) }, `${key}tr${ri}`)) })
   ] }, key);
 }
-function renderBlocks(nodes, keyPrefix = "") {
-  return nodes.map((node, i) => renderBlock(node, `${keyPrefix}b${i}`));
+function renderBlocks(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
+  return nodes.map((node, i) => renderBlock(node, `${keyPrefix}b${i}`, htmlPolicy));
 }
 function MdImage({ src, alt, title }) {
-  const resolved = useMediaUrl(src, ".");
-  return /* @__PURE__ */ jsx15("img", { className: "squisq-md-image", src: resolved, alt, title });
+  const safeSrc = sanitizeUrl(src, "media");
+  const resolved = useMediaUrl(safeSrc ?? "", ".");
+  if (!safeSrc) return null;
+  return /* @__PURE__ */ jsx18("img", { className: "squisq-md-image", src: resolved, alt, title });
+}
+function resolveHtmlNodes(nodes, htmlPolicy) {
+  if (htmlPolicy === "strip") return [];
+  if (htmlPolicy === "trusted") return nodes;
+  return sanitizeHtmlNodes2(nodes);
 }
 function containsMediaTag(nodes) {
   for (const node of nodes) {
     if (node.type !== "htmlElement") continue;
-    if (node.tagName === "video" || node.tagName === "audio") return true;
+    const tagName = node.tagName.toLowerCase();
+    if (tagName === "video" || tagName === "audio") return true;
     if (containsMediaTag(node.children)) return true;
   }
   return false;
 }
+var DANGEROUS_HTML_TAGS = /* @__PURE__ */ new Set([
+  "base",
+  "embed",
+  "iframe",
+  "link",
+  "meta",
+  "object",
+  "script",
+  "style",
+  "title"
+]);
+function containsDangerousTag(nodes) {
+  for (const node of nodes) {
+    if (node.type !== "htmlElement") continue;
+    if (DANGEROUS_HTML_TAGS.has(node.tagName.toLowerCase())) return true;
+    if (containsDangerousTag(node.children)) return true;
+  }
+  return false;
+}
+var DANGEROUS_RAW_HTML_RE = /<\s*\/?\s*(?:base|embed|iframe|link|meta|object|script|style|title)\b/i;
+function hasDangerousRawHtml(rawHtml) {
+  return DANGEROUS_RAW_HTML_RE.test(rawHtml);
+}
 var PASSTHROUGH_ATTRS = {
   // common
   class: "className",
@@ -2412,6 +2995,10 @@ var PASSTHROUGH_ATTRS = {
   // media-adjacent (used when video/audio appear inside other wrappers)
   width: "width",
   height: "height",
+  src: "src",
+  alt: "alt",
+  loading: "loading",
+  decoding: "decoding",
   // anchor
   href: "href",
   target: "target",
@@ -2431,8 +3018,10 @@ function reactPropsFromAttrs(attrs) {
   return out;
 }
 function renderHtmlElement(el, key) {
-  if (el.tagName === "video") {
-    return /* @__PURE__ */ jsx15(
+  const tagName = el.tagName.toLowerCase();
+  if (DANGEROUS_HTML_TAGS.has(tagName)) return null;
+  if (tagName === "video") {
+    return /* @__PURE__ */ jsx18(
       InlineVideoPlayer,
       {
         src: el.attributes.src ?? "",
@@ -2445,8 +3034,8 @@ function renderHtmlElement(el, key) {
       key
     );
   }
-  if (el.tagName === "audio") {
-    return /* @__PURE__ */ jsx15(
+  if (tagName === "audio") {
+    return /* @__PURE__ */ jsx18(
       InlineAudioPlayer,
       {
         src: el.attributes.src ?? "",
@@ -2456,12 +3045,12 @@ function renderHtmlElement(el, key) {
       key
     );
   }
-  const Tag = el.tagName;
+  const Tag = tagName;
   const props = reactPropsFromAttrs(el.attributes);
   if (el.selfClosing) {
-    return /* @__PURE__ */ jsx15(Tag, { ...props }, key);
+    return /* @__PURE__ */ jsx18(Tag, { ...props }, key);
   }
-  return /* @__PURE__ */ jsx15(Tag, { ...props, children: renderHtmlNodes(el.children, `${key}c`) }, key);
+  return /* @__PURE__ */ jsx18(Tag, { ...props, children: renderHtmlNodes(el.children, `${key}c`) }, key);
 }
 function renderHtmlNodes(nodes, keyPrefix) {
   return nodes.map((node, i) => {
@@ -2470,7 +3059,7 @@ function renderHtmlNodes(nodes, keyPrefix) {
       case "htmlElement":
         return renderHtmlElement(node, key);
       case "htmlText":
-        return /* @__PURE__ */ jsx15(Fragment, { children: node.value }, key);
+        return /* @__PURE__ */ jsx18(Fragment2, { children: node.value }, key);
       case "htmlComment":
         return null;
       default:
@@ -2478,13 +3067,17 @@ function renderHtmlNodes(nodes, keyPrefix) {
     }
   });
 }
-function MarkdownRenderer({ nodes, className }) {
+function MarkdownRenderer({
+  nodes,
+  className,
+  htmlPolicy = "sanitize"
+}) {
   if (!nodes || nodes.length === 0) return null;
-  return /* @__PURE__ */ jsx15("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes) });
+  return /* @__PURE__ */ jsx18("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", htmlPolicy) });
 }
 
 // src/LinearDocView.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function isAnnotatedBlock(block) {
   const annotation = block.sourceHeading?.templateAnnotation;
   if (!annotation) return false;
@@ -2500,11 +3093,10 @@ function countAll(blocks) {
 }
 function BlockSection({ block, basePath, viewport, renderContext, blockIndex }) {
   const isAnnotated = isAnnotatedBlock(block);
-  const visualBlock = useMemo6(() => {
+  const visualBlock = useMemo8(() => {
     if (!isAnnotated) return null;
     const annotation = block.sourceHeading.templateAnnotation;
     const headingText = extractPlainText(block.sourceHeading);
-    const bodyText = extractBodyPlainText(block.contents);
     const templateBlock = {
       id: block.id,
       template: annotation.template,
@@ -2512,12 +3104,14 @@ function BlockSection({ block, basePath, viewport, renderContext, blockIndex })
       duration: 1,
       audioSegment: 0,
       title: headingText,
-      ...getTemplateDefaults(
+      ...deriveTemplateInputs(
         annotation.template ?? "sectionHeader",
         headingText,
-        bodyText,
-        block.contents
-      ),
+        block.contents,
+        {
+          placeholders: true
+        }
+      ) ?? {},
       ...annotation.params,
       ...block.templateOverrides
     };
@@ -2532,15 +3126,15 @@ function BlockSection({ block, basePath, viewport, renderContext, blockIndex })
       template: annotation.template
     };
   }, [block, isAnnotated, renderContext, blockIndex]);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: "squisq-linear-section",
       "data-block-id": block.id,
       "data-template": isAnnotated ? block.sourceHeading?.templateAnnotation?.template : void 0,
       children: [
-        block.sourceHeading && !isAnnotated && /* @__PURE__ */ jsx16(MarkdownRenderer, { nodes: [block.sourceHeading] }),
-        isAnnotated && visualBlock && /* @__PURE__ */ jsx16("div", { className: "squisq-linear-card", children: /* @__PURE__ */ jsx16(
+        block.sourceHeading && !isAnnotated && /* @__PURE__ */ jsx19(MarkdownRenderer, { nodes: [block.sourceHeading] }),
+        isAnnotated && visualBlock && /* @__PURE__ */ jsx19("div", { className: "squisq-linear-card", children: /* @__PURE__ */ jsx19(
           "div",
           {
             className: "squisq-linear-card-svg",
@@ -2550,7 +3144,7 @@ function BlockSection({ block, basePath, viewport, renderContext, blockIndex })
               overflow: "hidden",
               marginBottom: "1em"
             },
-            children: /* @__PURE__ */ jsx16(
+            children: /* @__PURE__ */ jsx19(
               BlockRenderer,
               {
                 block: visualBlock,
@@ -2561,8 +3155,8 @@ function BlockSection({ block, basePath, viewport, renderContext, blockIndex })
             )
           }
         ) }),
-        !isAnnotated && block.contents && block.contents.length > 0 && /* @__PURE__ */ jsx16(MarkdownRenderer, { nodes: block.contents }),
-        block.children && block.children.length > 0 && /* @__PURE__ */ jsx16("div", { className: "squisq-linear-children", children: block.children.map((child, i) => /* @__PURE__ */ jsx16(
+        !isAnnotated && block.contents && block.contents.length > 0 && /* @__PURE__ */ jsx19(MarkdownRenderer, { nodes: block.contents }),
+        block.children && block.children.length > 0 && /* @__PURE__ */ jsx19("div", { className: "squisq-linear-children", children: block.children.map((child, i) => /* @__PURE__ */ jsx19(
           BlockSection,
           {
             block: child,
@@ -2577,139 +3171,6 @@ function BlockSection({ block, basePath, viewport, renderContext, blockIndex })
     }
   );
 }
-function extractBodyPlainText(contents) {
-  if (!contents || contents.length === 0) return "";
-  return contents.map((n) => extractPlainText(n)).join("\n").trim();
-}
-function extractListItems(contents) {
-  if (!contents) return [];
-  const items = [];
-  for (const node of contents) {
-    if (node.type === "list") {
-      for (const item of node.children) {
-        const text = extractPlainText(item).trim();
-        if (text) items.push(text);
-      }
-    }
-  }
-  return items;
-}
-function extractFirstImage(contents) {
-  if (!contents || contents.length === 0) return null;
-  function fromHtml(nodes) {
-    for (const node of nodes) {
-      if (!node || typeof node !== "object") continue;
-      const n = node;
-      if (n.type === "htmlElement" && n.tagName === "img") {
-        const attrs = n.attributes;
-        if (attrs && typeof attrs.src === "string" && attrs.src) {
-          return {
-            src: attrs.src,
-            alt: typeof attrs.alt === "string" ? attrs.alt : "",
-            width: parseDim(attrs.width),
-            height: parseDim(attrs.height)
-          };
-        }
-      }
-      if (Array.isArray(n.children)) {
-        const found = fromHtml(n.children);
-        if (found) return found;
-      }
-    }
-    return null;
-  }
-  function walk(node) {
-    if (!node || typeof node !== "object") return null;
-    const n = node;
-    if (n.type === "image" && typeof n.url === "string" && n.url) {
-      return { src: n.url, alt: typeof n.alt === "string" ? n.alt : "" };
-    }
-    if ((n.type === "htmlBlock" || n.type === "htmlInline") && Array.isArray(n.htmlChildren)) {
-      const found = fromHtml(n.htmlChildren);
-      if (found) return found;
-    }
-    if (Array.isArray(n.children)) {
-      for (const child of n.children) {
-        const found = walk(child);
-        if (found) return found;
-      }
-    }
-    return null;
-  }
-  for (const node of contents) {
-    const found = walk(node);
-    if (found) return found;
-  }
-  return null;
-}
-function parseDim(raw) {
-  if (raw === void 0) return void 0;
-  const n = parseFloat(raw);
-  return Number.isFinite(n) && n > 0 ? n : void 0;
-}
-function extractTableData(contents) {
-  if (!contents) return null;
-  for (const node of contents) {
-    if (node.type === "table") {
-      const table = node;
-      const [headerRow, ...bodyRows] = table.children;
-      if (!headerRow) return null;
-      const headers = headerRow.children.map((cell) => extractPlainText(cell).trim());
-      const rows = bodyRows.map((row) => row.children.map((cell) => extractPlainText(cell).trim()));
-      return { headers, rows, align: table.align };
-    }
-  }
-  return null;
-}
-function getTemplateDefaults(templateName, headingText, bodyText, contents) {
-  switch (templateName) {
-    case "statHighlight":
-      return { stat: headingText, description: bodyText || headingText };
-    case "quote":
-    case "fullBleedQuote":
-    case "pullQuote":
-      return { quote: bodyText || headingText };
-    case "factCard":
-      return { fact: headingText, explanation: bodyText || headingText };
-    case "comparisonBar":
-      return { leftLabel: "A", leftValue: 60, rightLabel: "B", rightValue: 40 };
-    case "list": {
-      const items = extractListItems(contents);
-      return { items: items.length > 0 ? items : ["Item 1", "Item 2", "Item 3"] };
-    }
-    case "definitionCard":
-      return { term: headingText, definition: bodyText || headingText };
-    case "dateEvent":
-      return { date: headingText, description: bodyText || headingText };
-    case "dataTable": {
-      const tableData = extractTableData(contents);
-      return tableData ?? { headers: ["Column"], rows: [["Data"]] };
-    }
-    case "imageWithCaption": {
-      const img = extractFirstImage(contents);
-      if (!img) return { caption: headingText };
-      return {
-        imageSrc: img.src,
-        imageAlt: img.alt || headingText,
-        caption: headingText
-      };
-    }
-    case "leftFeature":
-    case "rightFeature": {
-      const img = extractFirstImage(contents);
-      return {
-        imageSrc: img?.src ?? "",
-        imageAlt: img?.alt || headingText,
-        imageWidth: img?.width,
-        imageHeight: img?.height,
-        title: headingText,
-        body: bodyText
-      };
-    }
-    default:
-      return {};
-  }
-}
 function LinearDocView({
   doc,
   basePath = "/",
@@ -2721,15 +3182,19 @@ function LinearDocView({
   imageDisplayMode = "inline"
 }) {
   const activeViewport = viewport ?? VIEWPORT_PRESETS3.landscape;
-  const totalBlocks = useMemo6(() => countAll(doc.blocks), [doc.blocks]);
+  const totalBlocks = useMemo8(() => countAll(doc.blocks), [doc.blocks]);
   const autoSurface = useAutoSurface(surface === "auto");
   const resolvedSurface = surface === "auto" ? autoSurface : surface;
-  const renderContext = useMemo6(() => {
-    const baseTheme = theme ?? DEFAULT_THEME;
+  const renderContext = useMemo8(() => {
+    const baseTheme = theme ?? DEFAULT_THEME2;
+    const effectiveTheme = resolvedSurface ? applySurface(baseTheme, resolvedSurface) : baseTheme;
     return {
-      theme: resolvedSurface ? applySurface(baseTheme, resolvedSurface) : baseTheme,
+      theme: effectiveTheme,
       viewport: activeViewport,
-      totalBlocks
+      totalBlocks,
+      // Theme atmosphere (vignette/grain/gradient persistent layers) shows
+      // on the inline template cards so they match the player's look.
+      persistentLayers: effectiveTheme.persistentLayers
     };
   }, [activeViewport, totalBlocks, theme, resolvedSurface]);
   const activeTheme = renderContext.theme;
@@ -2740,7 +3205,7 @@ function LinearDocView({
   const bodyFont = resolveFontFamily2(activeTheme.typography.bodyFont, "system-ui, sans-serif");
   const titleFont = resolveFontFamily2(activeTheme.typography.titleFont, "Georgia, serif");
   const lineHt = activeTheme.typography.lineHeight ?? 1.7;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: `squisq-linear ${className || ""}`,
@@ -2756,7 +3221,7 @@ function LinearDocView({
         overflowX: "hidden",
         background: bgColor
       },
-      children: /* @__PURE__ */ jsxs10(
+      children: /* @__PURE__ */ jsxs12(
         "div",
         {
           className: `squisq-linear-content squisq-md${thinMargins ? " squisq-linear-content--thin" : ""}${imageDisplayMode === "thumbnail" ? " squisq-linear-content--thumbnail-images" : ""}`,
@@ -2781,7 +3246,7 @@ function LinearDocView({
             "--squisq-linear-bg": bgColor
           },
           children: [
-            /* @__PURE__ */ jsx16("style", { children: `
+            /* @__PURE__ */ jsx19("style", { children: `
           .squisq-linear-content h1,
           .squisq-linear-content h2,
           .squisq-linear-content h3,
@@ -2893,7 +3358,7 @@ function LinearDocView({
             background: color-mix(in srgb, var(--squisq-linear-primary) 8%, transparent);
           }
         ` }),
-            doc.blocks.map((block, i) => /* @__PURE__ */ jsx16(
+            doc.blocks.map((block, i) => /* @__PURE__ */ jsx19(
               BlockSection,
               {
                 block,
@@ -2912,7 +3377,7 @@ function LinearDocView({
 }
 
 // src/DocPlayer.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var SMALL_WORDS = /* @__PURE__ */ new Set([
   "a",
   "an",
@@ -2984,13 +3449,13 @@ function DocPlayer({
 }) {
   const isSlideshowMode = displayMode === "slideshow";
   const isLinearMode = displayMode === "linear";
-  const audioRef = useRef5(null);
-  const containerRef = useRef5(null);
-  const [tapFeedback, setTapFeedback] = useState7(null);
-  const tapFeedbackTimer = useRef5();
+  const audioRef = useRef6(null);
+  const containerRef = useRef6(null);
+  const [tapFeedback, setTapFeedback] = useState6(null);
+  const tapFeedbackTimer = useRef6();
   const { viewport, orientation } = useViewportOrientation();
   const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS4.landscape : viewport);
-  const isDebugMode = useMemo7(() => {
+  const isDebugMode = useMemo9(() => {
     if (typeof window === "undefined") return false;
     const params = new URLSearchParams(window.location.search);
     return params.get("debug") === "true";
@@ -3013,11 +3478,12 @@ function DocPlayer({
     skipToSegment: _skipToSegment,
     restart
   } = audio;
-  const currentTimeRef = useRef5(currentTime);
+  const mediaSchedule = useMemo9(() => resolveMediaSchedule(script), [script]);
+  const currentTimeRef = useRef6(currentTime);
   currentTimeRef.current = currentTime;
-  const totalDurationRef = useRef5(totalDuration);
+  const totalDurationRef = useRef6(totalDuration);
   totalDurationRef.current = totalDuration;
-  const expandedBlocksLenRef = useRef5(0);
+  const expandedBlocksLenRef = useRef6(0);
   const handleContainerClick = useCallback5(
     (e) => {
       if (renderMode || isSlideshowMode || isLinearMode) return;
@@ -3036,8 +3502,8 @@ function DocPlayer({
   );
   const autoSurface = useAutoSurface(surface === "auto");
   const resolvedSurface = surface === "auto" ? autoSurface : surface;
-  const effectiveTheme = useMemo7(() => {
-    const base = theme ?? DEFAULT_THEME2;
+  const effectiveTheme = useMemo9(() => {
+    const base = theme ?? DEFAULT_THEME3;
     return resolvedSurface ? applySurface2(base, resolvedSurface) : base;
   }, [theme, resolvedSurface]);
   const {
@@ -3053,7 +3519,7 @@ function DocPlayer({
     prevBlock: _prevBlock,
     blocks: expandedBlocks
   } = useDocPlayback(script, currentTime, activeViewport, renderMode, effectiveTheme);
-  const coverBlock = useMemo7(() => {
+  const coverBlock = useMemo9(() => {
     const startBlockConfig = script.startBlock;
     if (!startBlockConfig) return null;
     const context = createTemplateContext(effectiveTheme, 0, 1, activeViewport);
@@ -3068,11 +3534,11 @@ function DocPlayer({
       layers
     };
   }, [script.startBlock, activeViewport, effectiveTheme]);
-  const [coverForced, setCoverForced] = useState7(false);
-  const [coverGraceActive, setCoverGraceActive] = useState7(false);
-  const coverGraceTimer = useRef5();
-  const coverWasShowing = useRef5(false);
-  const hasPlayedOnce = useRef5(false);
+  const [coverForced, setCoverForced] = useState6(false);
+  const [coverGraceActive, setCoverGraceActive] = useState6(false);
+  const coverGraceTimer = useRef6();
+  const coverWasShowing = useRef6(false);
+  const hasPlayedOnce = useRef6(false);
   const atRest = !!(coverBlock && !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
   if (atRest) coverWasShowing.current = true;
   useEffect7(() => {
@@ -3085,7 +3551,7 @@ function DocPlayer({
   }, [isPlaying, coverBlock, renderMode]);
   useEffect7(() => () => clearTimeout(coverGraceTimer.current), []);
   const showCoverBlock = !isSlideshowMode && !isLinearMode && coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
-  const hasAutoPlayed = useRef5(false);
+  const hasAutoPlayed = useRef6(false);
   useEffect7(() => {
     if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
       hasAutoPlayed.current = true;
@@ -3133,7 +3599,11 @@ function DocPlayer({
                 const video = el;
                 const clipStart = parseFloat(video.dataset.clipStart || "0");
                 const clipEnd = parseFloat(video.dataset.clipEnd || "0");
-                const targetTime = Math.min(clipStart + Math.max(0, blockElapsed), clipEnd);
+                const startAt = parseFloat(video.dataset.startAt || "0");
+                const targetTime = Math.min(
+                  clipStart + Math.max(0, blockElapsed - startAt),
+                  clipEnd
+                );
                 video.pause();
                 video.currentTime = targetTime;
                 videoSeekPromises.push(
@@ -3148,6 +3618,26 @@ function DocPlayer({
                 );
               });
             }
+            document.querySelectorAll("video[data-clip-id]").forEach((el) => {
+              const video = el;
+              const absStart = parseFloat(video.dataset.absStart || "0");
+              const absEnd = parseFloat(video.dataset.absEnd || "0");
+              const sourceIn = parseFloat(video.dataset.sourceIn || "0");
+              video.pause();
+              if (time < absStart || time >= absEnd) return;
+              const targetTime = sourceIn + (time - absStart);
+              video.currentTime = targetTime;
+              videoSeekPromises.push(
+                new Promise((r) => {
+                  if (Math.abs(video.currentTime - targetTime) < 0.1) {
+                    r();
+                  } else {
+                    video.addEventListener("seeked", () => r(), { once: true });
+                    setTimeout(r, 200);
+                  }
+                })
+              );
+            });
             Promise.all(videoSeekPromises).then(() => {
               requestAnimationFrame(() => resolve());
             });
@@ -3155,12 +3645,9 @@ function DocPlayer({
         });
       };
       w.getDuration = () => {
-        if (totalDuration > 0) return totalDuration;
-        if (expandedBlocks.length > 0) {
-          const last = expandedBlocks[expandedBlocks.length - 1];
-          return last.startTime + last.duration;
-        }
-        return 0;
+        const mediaDuration = getDocPlaybackDuration(script);
+        if (totalDuration > 0) return Math.max(totalDuration, mediaDuration);
+        return mediaDuration;
       };
       w.getBlocks = () => expandedBlocks.map((s) => ({
         id: s.id,
@@ -3213,7 +3700,7 @@ function DocPlayer({
     };
   }, [renderMode, isDebugMode, seekTo, totalDuration, expandedBlocks, coverBlock]);
   const defaultMode = captionsEnabledProp === false ? "off" : captionStyle || "standard";
-  const [captionMode, setCaptionMode] = useState7(defaultMode);
+  const [captionMode, setCaptionMode] = useState6(defaultMode);
   const captionsEnabled = captionMode !== "off";
   const activeCaptionStyle = captionMode === "social" ? "social" : "standard";
   const setCaptionsEnabled = useCallback5(
@@ -3231,8 +3718,8 @@ function DocPlayer({
     });
   }, [onCaptionsToggle]);
   const hasCaptions = script.captions && script.captions.phrases.length > 0;
-  const segmentTitleMap = useMemo7(() => buildSegmentTitleMap(script), [script]);
-  const playbackState = useMemo7(
+  const segmentTitleMap = useMemo9(() => buildSegmentTitleMap(script), [script]);
+  const playbackState = useMemo9(
     () => ({
       isPlaying,
       currentTime,
@@ -3265,7 +3752,7 @@ function DocPlayer({
       currentBlock
     ]
   );
-  const playbackActions = useMemo7(
+  const playbackActions = useMemo9(
     () => ({
       toggle,
       restart,
@@ -3276,7 +3763,7 @@ function DocPlayer({
     }),
     [toggle, restart, seekTo, setCaptionsEnabled, cycleCaptionMode, onFullscreenToggle]
   );
-  const slideNavActions = useMemo7(
+  const slideNavActions = useMemo9(
     () => ({
       nextSlide: () => {
         if (currentBlockIndex < expandedBlocks.length - 1) {
@@ -3338,7 +3825,7 @@ function DocPlayer({
     }
     return block.id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
   }, []);
-  const blockMarkers = useMemo7(() => {
+  const blockMarkers = useMemo9(() => {
     if (!totalDuration || !expandedBlocks.length) return [];
     let prevSegment = -1;
     return expandedBlocks.map((block, index) => {
@@ -3411,7 +3898,7 @@ function DocPlayer({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [handleKeyDown, renderMode]);
   if (isLinearMode) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx20(
       "div",
       {
         ref: containerRef,
@@ -3422,7 +3909,7 @@ function DocPlayer({
           height: "100%",
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx20(
           LinearDocView,
           {
             doc: script,
@@ -3435,7 +3922,7 @@ function DocPlayer({
       }
     );
   }
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       ref: containerRef,
@@ -3450,9 +3937,19 @@ function DocPlayer({
         cursor: renderMode ? void 0 : "pointer"
       },
       children: [
-        /* @__PURE__ */ jsx17("audio", { ref: audioRef, preload: "auto", muted }),
-        /* @__PURE__ */ jsxs11("div", { className: "doc-player__viewport", children: [
-          showCoverBlock && coverBlock && /* @__PURE__ */ jsx17("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx20("audio", { ref: audioRef, preload: "auto", muted }),
+        /* @__PURE__ */ jsx20(
+          MediaClipLayer,
+          {
+            schedule: mediaSchedule,
+            currentTime,
+            isPlaying,
+            basePath,
+            renderMode
+          }
+        ),
+        /* @__PURE__ */ jsxs13("div", { className: "doc-player__viewport", children: [
+          showCoverBlock && coverBlock && /* @__PURE__ */ jsx20("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx20(
             BlockRenderer,
             {
               block: coverBlock,
@@ -3462,17 +3959,22 @@ function DocPlayer({
               viewport: activeViewport
             }
           ) }),
-          !showCoverBlock && previousBlock && isExiting && /* @__PURE__ */ jsx17("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx17(
+          !showCoverBlock && previousBlock && isExiting && // Keyed by block id so each block is its own DOM subtree: React never
+          // reconciles one block's layers onto another's (templates reuse layer
+          // ids like `title`/`background`), which would otherwise reuse stale
+          // DOM / skip entrance animations mid-transition.
+          /* @__PURE__ */ jsx20("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx20(
             BlockRenderer,
             {
               block: previousBlock,
               blockTime,
               basePath,
               isExiting: true,
+              transition: currentBlock?.transition,
               viewport: activeViewport
             }
-          ) }),
-          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx17("div", { className: "doc-player__block doc-player__block--active", children: /* @__PURE__ */ jsx17(
+          ) }, previousBlock.id),
+          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx20("div", { className: "doc-player__block doc-player__block--active", children: /* @__PURE__ */ jsx20(
             BlockRenderer,
             {
               block: currentBlock,
@@ -3482,8 +3984,8 @@ function DocPlayer({
               viewport: activeViewport,
               isPlaying
             }
-          ) }),
-          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx17(
+          ) }, currentBlock.id),
+          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx20(
             CaptionOverlay,
             {
               captions: script.captions,
@@ -3495,7 +3997,7 @@ function DocPlayer({
               viewport: activeViewport
             }
           ),
-          isDebugMode && /* @__PURE__ */ jsxs11(
+          isDebugMode && /* @__PURE__ */ jsxs13(
             "div",
             {
               className: "doc-player__debug",
@@ -3516,27 +4018,27 @@ function DocPlayer({
                 textAlign: "left"
               },
               children: [
-                /* @__PURE__ */ jsx17("div", { style: { color: "#ffcc00", fontWeight: "bold", marginBottom: "4px" }, children: "DEBUG MODE" }),
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "template:" }),
+                /* @__PURE__ */ jsx20("div", { style: { color: "#ffcc00", fontWeight: "bold", marginBottom: "4px" }, children: "DEBUG MODE" }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "template:" }),
                   " ",
-                  /* @__PURE__ */ jsx17("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "block:" }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "block:" }),
                   " ",
                   currentBlockIndex + 1,
                   "/",
                   expandedBlocks.length,
                   " ",
-                  /* @__PURE__ */ jsxs11("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
                     "(",
                     currentBlock?.id || "none",
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "time:" }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "time:" }),
                   " ",
                   currentTime.toFixed(2),
                   "s /",
@@ -3544,7 +4046,7 @@ function DocPlayer({
                   totalDuration.toFixed(1),
                   "s",
                   " ",
-                  /* @__PURE__ */ jsxs11("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
                     "(progress: ",
                     (docProgress * 100).toFixed(1),
                     "%, scriptDur:",
@@ -3553,8 +4055,8 @@ function DocPlayer({
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "blockTime:" }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "blockTime:" }),
                   " ",
                   blockTime.toFixed(2),
                   "s /",
@@ -3562,58 +4064,58 @@ function DocPlayer({
                   (currentBlock?.duration || 0).toFixed(1),
                   "s"
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "segment:" }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "segment:" }),
                   " ",
                   currentSegment,
                   "/",
                   script.audio.segments.length - 1,
                   " ",
-                  /* @__PURE__ */ jsxs11("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
                     "(",
                     script.audio.segments[currentSegment]?.name || "none",
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "viewport:" }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "viewport:" }),
                   " ",
                   activeViewport.name || `${activeViewport.width}x${activeViewport.height}`,
                   " ",
-                  /* @__PURE__ */ jsxs11("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
                     "(",
                     orientation,
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "playing:" }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "playing:" }),
                   " ",
-                  /* @__PURE__ */ jsx17("span", { style: { color: isPlaying ? "#4ade80" : "#f87171" }, children: isPlaying ? "yes" : "no" }),
-                  showCoverBlock && /* @__PURE__ */ jsx17("span", { style: { color: "#60a5fa" }, children: " (cover)" })
+                  /* @__PURE__ */ jsx20("span", { style: { color: isPlaying ? "#4ade80" : "#f87171" }, children: isPlaying ? "yes" : "no" }),
+                  showCoverBlock && /* @__PURE__ */ jsx20("span", { style: { color: "#60a5fa" }, children: " (cover)" })
                 ] }),
                 hasCaptions && (() => {
                   const debugPhrase = getCaptionAtTime2(script.captions, currentTime);
                   const debugEnabled = captionsEnabled && (isPlaying || currentTime > 0);
-                  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
-                    /* @__PURE__ */ jsxs11("div", { children: [
-                      /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "captions:" }),
+                  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+                    /* @__PURE__ */ jsxs13("div", { children: [
+                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "captions:" }),
                       " ",
                       script.captions?.phrases.length || 0,
                       " phrases",
                       " ",
-                      /* @__PURE__ */ jsxs11("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
+                      /* @__PURE__ */ jsxs13("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
                         "(",
                         captionsEnabled ? "on" : "off",
                         ")"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs11("div", { children: [
-                      /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "cc.enabled:" }),
+                    /* @__PURE__ */ jsxs13("div", { children: [
+                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "cc.enabled:" }),
                       " ",
-                      /* @__PURE__ */ jsx17("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
+                      /* @__PURE__ */ jsx20("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
                       " ",
-                      /* @__PURE__ */ jsxs11("span", { style: { color: "#666" }, children: [
+                      /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
                         "(playing=",
                         String(isPlaying),
                         " t>0=",
@@ -3621,15 +4123,15 @@ function DocPlayer({
                         ")"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs11("div", { children: [
-                      /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "cc.phrase:" }),
+                    /* @__PURE__ */ jsxs13("div", { children: [
+                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "cc.phrase:" }),
                       " ",
-                      /* @__PURE__ */ jsx17("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
+                      /* @__PURE__ */ jsx20("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
                     ] }),
-                    debugPhrase && /* @__PURE__ */ jsxs11("div", { children: [
-                      /* @__PURE__ */ jsx17("span", { style: { color: "#888" }, children: "cc.range:" }),
+                    debugPhrase && /* @__PURE__ */ jsxs13("div", { children: [
+                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "cc.range:" }),
                       " ",
-                      /* @__PURE__ */ jsxs11("span", { style: { color: "#60a5fa" }, children: [
+                      /* @__PURE__ */ jsxs13("span", { style: { color: "#60a5fa" }, children: [
                         debugPhrase.startTime.toFixed(2),
                         "-",
                         debugPhrase.endTime.toFixed(2)
@@ -3641,7 +4143,7 @@ function DocPlayer({
             }
           )
         ] }),
-        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs11(
+        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs13(
           "div",
           {
             className: "doc-player__unavailable",
@@ -3662,12 +4164,12 @@ function DocPlayer({
               zIndex: 50
             },
             children: [
-              /* @__PURE__ */ jsx17("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
-              /* @__PURE__ */ jsx17("span", { children: unavailableMessage })
+              /* @__PURE__ */ jsx20("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
+              /* @__PURE__ */ jsx20("span", { children: unavailableMessage })
             ]
           }
         ),
-        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx17(
+        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx20(
           DocControlsOverlay,
           {
             state: playbackState,
@@ -3677,7 +4179,7 @@ function DocPlayer({
             getBlockTitle
           }
         ),
-        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx17(
+        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx20(
           "div",
           {
             className: "doc-player__scrubber",
@@ -3692,7 +4194,7 @@ function DocPlayer({
               alignItems: "center",
               zIndex: 100
             },
-            children: /* @__PURE__ */ jsx17(
+            children: /* @__PURE__ */ jsx20(
               DocProgressBar,
               {
                 state: playbackState,
@@ -3704,15 +4206,15 @@ function DocPlayer({
             )
           }
         ),
-        !renderMode && isSlideshowMode && /* @__PURE__ */ jsx17(DocControlsSlideshow, { state: playbackState, slideNav: slideNavActions }),
-        !isSlideshowMode && tapFeedback && /* @__PURE__ */ jsx17("div", { className: "doc-player__tap-feedback", children: /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 24 24", fill: "white", width: "48", height: "48", children: tapFeedback === "pause" ? /* @__PURE__ */ jsx17("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) : /* @__PURE__ */ jsx17("path", { d: "M8 5v14l11-7z" }) }) }, Date.now())
+        !renderMode && isSlideshowMode && /* @__PURE__ */ jsx20(DocControlsSlideshow, { state: playbackState, slideNav: slideNavActions }),
+        !isSlideshowMode && tapFeedback && /* @__PURE__ */ jsx20("div", { className: "doc-player__tap-feedback", children: /* @__PURE__ */ jsx20("svg", { viewBox: "0 0 24 24", fill: "white", width: "48", height: "48", children: tapFeedback === "pause" ? /* @__PURE__ */ jsx20("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) : /* @__PURE__ */ jsx20("path", { d: "M8 5v14l11-7z" }) }) }, Date.now())
       ]
     }
   );
 }
 
 // src/DocControlsBottom.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function DocControlsBottom({
   state,
   actions,
@@ -3720,32 +4222,32 @@ function DocControlsBottom({
   expandedBlocks,
   getBlockTitle
 }) {
-  return /* @__PURE__ */ jsxs12("div", { className: "doc-controls-bottom", children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs14("div", { className: "doc-controls-bottom", children: [
+    /* @__PURE__ */ jsx21(
       "button",
       {
         className: "bottom-ctrl-btn",
         onClick: actions.restart,
         title: "Restart",
         "aria-label": "Restart from beginning",
-        children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx18("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+        children: /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx21("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx21(
       "button",
       {
         className: "bottom-ctrl-btn bottom-play-btn",
         onClick: actions.toggle,
         "aria-label": state.isPlaying ? "Pause" : "Play",
-        children: state.isPlaying ? /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx18("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx18("path", { d: "M8 5v14l11-7z" }) })
+        children: state.isPlaying ? /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx21("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx21("path", { d: "M8 5v14l11-7z" }) })
       }
     ),
-    /* @__PURE__ */ jsxs12("span", { className: "bottom-time", children: [
+    /* @__PURE__ */ jsxs14("span", { className: "bottom-time", children: [
       formatTime(state.currentTime),
       " / ",
       formatTime(state.totalDuration)
     ] }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx21(
       DocProgressBar,
       {
         state,
@@ -3755,82 +4257,82 @@ function DocControlsBottom({
         getBlockTitle
       }
     ),
-    /* @__PURE__ */ jsxs12("span", { className: "bottom-segment", children: [
+    /* @__PURE__ */ jsxs14("span", { className: "bottom-segment", children: [
       state.currentBlockIndex + 1,
       "/",
       state.totalBlocks
     ] }),
-    state.hasCaptions && /* @__PURE__ */ jsx18(
+    state.hasCaptions && /* @__PURE__ */ jsx21(
       "button",
       {
         className: `bottom-ctrl-btn ${state.captionMode !== "off" ? "bottom-ctrl-btn--active" : ""}`,
         onClick: () => actions.cycleCaptionMode(),
         title: state.captionMode === "off" ? "Captions: Off" : state.captionMode === "standard" ? "Captions: Standard" : "Captions: Social",
         "aria-label": "Cycle caption style",
-        children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx18("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) })
+        children: /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx21("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) })
       }
     )
   ] });
 }
 
 // src/DocControlsSidebar.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function DocControlsSidebar({ state, actions }) {
-  return /* @__PURE__ */ jsxs13("div", { className: "doc-controls-sidebar", children: [
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs15("div", { className: "doc-controls-sidebar", children: [
+    /* @__PURE__ */ jsx22(
       "button",
       {
         className: "sidebar-ctrl-btn",
         onClick: actions.restart,
         title: "Restart",
         "aria-label": "Restart from beginning",
-        children: /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx19("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+        children: /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx22("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
       }
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx22(
       "button",
       {
         className: "sidebar-ctrl-btn sidebar-play-btn",
         onClick: actions.toggle,
         "aria-label": state.isPlaying ? "Pause" : "Play",
-        children: state.isPlaying ? /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx19("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx19("path", { d: "M8 5v14l11-7z" }) })
+        children: state.isPlaying ? /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx22("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx22("path", { d: "M8 5v14l11-7z" }) })
       }
     ),
-    /* @__PURE__ */ jsxs13("div", { className: "sidebar-time", children: [
-      /* @__PURE__ */ jsx19("div", { children: formatTime(state.currentTime) }),
-      /* @__PURE__ */ jsx19("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })
+    /* @__PURE__ */ jsxs15("div", { className: "sidebar-time", children: [
+      /* @__PURE__ */ jsx22("div", { children: formatTime(state.currentTime) }),
+      /* @__PURE__ */ jsx22("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })
     ] }),
-    /* @__PURE__ */ jsxs13("div", { className: "sidebar-segment", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "sidebar-segment", children: [
       state.currentBlockIndex + 1,
       "/",
       state.totalBlocks
     ] }),
-    state.hasCaptions && /* @__PURE__ */ jsx19(
+    state.hasCaptions && /* @__PURE__ */ jsx22(
       "button",
       {
         className: `sidebar-ctrl-btn ${state.captionMode !== "off" ? "sidebar-ctrl-btn--active" : ""}`,
         onClick: () => actions.cycleCaptionMode(),
         title: state.captionMode === "off" ? "Captions: Off" : state.captionMode === "standard" ? "Captions: Standard" : "Captions: Social",
         "aria-label": "Cycle caption style",
-        children: /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx19("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) })
+        children: /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx22("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) })
       }
     ),
-    actions.toggleFullscreen && /* @__PURE__ */ jsx19(
+    actions.toggleFullscreen && /* @__PURE__ */ jsx22(
       "button",
       {
         className: `sidebar-ctrl-btn ${state.isFullscreen ? "sidebar-ctrl-btn--active" : ""}`,
         onClick: actions.toggleFullscreen,
         title: state.isFullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)",
         "aria-label": state.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-        children: state.isFullscreen ? /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx19("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx19("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+        children: state.isFullscreen ? /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx22("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx22("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
       }
     )
   ] });
 }
 
 // src/DocPlayerWithSidebar.tsx
-import { useRef as useRef6, useState as useState8, useCallback as useCallback6, useEffect as useEffect8 } from "react";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useRef as useRef7, useState as useState7, useCallback as useCallback6, useEffect as useEffect8 } from "react";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_STATE = {
   isPlaying: false,
   currentTime: 0,
@@ -3859,10 +4361,10 @@ function DocPlayerWithSidebar({
   forceViewport,
   onPlayingChange
 }) {
-  const stateRef = useRef6(DEFAULT_STATE);
-  const actionsRef = useRef6(null);
-  const wasPlayingRef = useRef6(false);
-  const [, setTick] = useState8(0);
+  const stateRef = useRef7(DEFAULT_STATE);
+  const actionsRef = useRef7(null);
+  const wasPlayingRef = useRef7(false);
+  const [, setTick] = useState7(0);
   const handleStateChange = useCallback6(
     (state) => {
       stateRef.current = state;
@@ -3887,8 +4389,8 @@ function DocPlayerWithSidebar({
     }, 250);
     return () => clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ jsxs14("div", { className: "doc-player-sidebar-layout", children: [
-    /* @__PURE__ */ jsx20("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs16("div", { className: "doc-player-sidebar-layout", children: [
+    /* @__PURE__ */ jsx23("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx23(
       DocPlayer,
       {
         script,
@@ -3908,22 +4410,22 @@ function DocPlayerWithSidebar({
         forceViewport
       }
     ) }),
-    actionsRef.current && /* @__PURE__ */ jsx20(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
+    actionsRef.current && /* @__PURE__ */ jsx23(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
   ] });
 }
 
 // src/jsonView/useJsonViewTokens.ts
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo10 } from "react";
 import {
   applySurface as applySurface3,
   resolveFontFamily as resolveFontFamily3
 } from "@bendyline/squisq/schemas";
-import { DEFAULT_THEME as DEFAULT_THEME3 } from "@bendyline/squisq/doc";
+import { DEFAULT_THEME as DEFAULT_THEME4 } from "@bendyline/squisq/doc";
 function useJsonViewTokens(theme, surface) {
   const auto = useAutoSurface(surface === "auto");
   const effectiveSurface = surface === "auto" ? auto : surface ?? void 0;
-  return useMemo8(() => {
-    const baseTheme = theme ?? DEFAULT_THEME3;
+  return useMemo10(() => {
+    const baseTheme = theme ?? DEFAULT_THEME4;
     const finalTheme = effectiveSurface ? applySurface3(baseTheme, effectiveSurface) : baseTheme;
     const titleFont = resolveFontFamily3(finalTheme.typography.titleFont, "system-ui, sans-serif");
     const bodyFont = resolveFontFamily3(finalTheme.typography.bodyFont, "system-ui, sans-serif");
@@ -3955,26 +4457,26 @@ import {
 } from "@bendyline/squisq/jsonForm";
 
 // src/jsonView/viewers.tsx
-import { Fragment as Fragment3, useMemo as useMemo9 } from "react";
+import { Fragment as Fragment4, useMemo as useMemo11 } from "react";
 import {
   arrayItemKind
 } from "@bendyline/squisq/jsonForm";
 import { parseMarkdown } from "@bendyline/squisq/markdown";
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function TextViewer({ value }) {
   if (value === void 0 || value === null || value === "") {
-    return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-value", children: String(value) });
+  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: String(value) });
 }
 function MultilineViewer({ value }) {
   if (value === void 0 || value === null || value === "") {
-    return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-value squisq-jv-value--multiline", children: String(value) });
+  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value squisq-jv-value--multiline", children: String(value) });
 }
 function RichTextViewer({ value }) {
-  const nodes = useMemo9(() => {
+  const nodes = useMemo11(() => {
     if (typeof value !== "string" || value === "") return null;
     try {
       const doc = parseMarkdown(value);
@@ -3983,39 +4485,39 @@ function RichTextViewer({ value }) {
       return null;
     }
   }, [value]);
-  if (!nodes) return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-empty", children: "\u2014" });
-  return /* @__PURE__ */ jsx21("div", { className: "squisq-jv-richtext", children: /* @__PURE__ */ jsx21(MarkdownRenderer, { nodes }) });
+  if (!nodes) return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+  return /* @__PURE__ */ jsx24("div", { className: "squisq-jv-richtext", children: /* @__PURE__ */ jsx24(MarkdownRenderer, { nodes }) });
 }
 function NumberViewer({ value }) {
   if (value === void 0 || value === null) {
-    return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-value", children: String(value) });
+  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: String(value) });
 }
 function BooleanViewer({ value }) {
   const on = Boolean(value);
-  return /* @__PURE__ */ jsx21("span", { className: `squisq-jv-toggle squisq-jv-toggle--${on ? "on" : "off"}`, children: on ? "On" : "Off" });
+  return /* @__PURE__ */ jsx24("span", { className: `squisq-jv-toggle squisq-jv-toggle--${on ? "on" : "off"}`, children: on ? "On" : "Off" });
 }
 function EnumViewer({ value, schema }) {
   if (value === void 0 || value === null || value === "") {
-    return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
   const labels = schema.squisq?.enumLabels;
   const display = labels && typeof value === "string" ? labels[value] ?? value : String(value);
-  return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-value", children: display });
+  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: display });
 }
 function ColorViewer({ value }) {
   if (typeof value !== "string" || value === "") {
-    return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsxs15("span", { className: "squisq-jv-color", children: [
-    /* @__PURE__ */ jsx21("span", { className: "squisq-jv-color__swatch", style: { background: value }, "aria-hidden": true }),
-    /* @__PURE__ */ jsx21("span", { className: "squisq-jv-color__hex", children: value })
+  return /* @__PURE__ */ jsxs17("span", { className: "squisq-jv-color", children: [
+    /* @__PURE__ */ jsx24("span", { className: "squisq-jv-color__swatch", style: { background: value }, "aria-hidden": true }),
+    /* @__PURE__ */ jsx24("span", { className: "squisq-jv-color__hex", children: value })
   ] });
 }
 function DateViewer({ value, schema }) {
   if (typeof value !== "string" || value === "") {
-    return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
   const fmt = schema.format;
   let display = value;
@@ -4032,31 +4534,31 @@ function DateViewer({ value, schema }) {
     }
   } catch {
   }
-  return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-value", children: display });
+  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: display });
 }
 function ChipBinViewer({ value, schema }) {
   if (!Array.isArray(value) || value.length === 0) {
-    return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
   const itemSchema = Array.isArray(schema.items) ? schema.items[0] : schema.items;
   const labels = itemSchema?.squisq?.enumLabels;
-  return /* @__PURE__ */ jsx21("div", { className: "squisq-jv-chip-bin", children: value.map((item, i) => {
+  return /* @__PURE__ */ jsx24("div", { className: "squisq-jv-chip-bin", children: value.map((item, i) => {
     const label = labels && typeof item === "string" ? labels[item] ?? String(item) : String(item);
-    return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-chip", children: label }, i);
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-chip", children: label }, i);
   }) });
 }
 function CardStackViewer(props) {
   const { value, schema, rootSchema, rootData, pointer, density } = props;
   if (!Array.isArray(value) || value.length === 0) {
-    return /* @__PURE__ */ jsx21("span", { className: "squisq-jv-empty", children: "No items" });
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "No items" });
   }
   const itemSchema = (Array.isArray(schema.items) ? schema.items[0] : schema.items) ?? {};
   const itemLabel = itemSchema.squisq?.itemLabel;
-  return /* @__PURE__ */ jsx21("div", { className: "squisq-jv-card-stack", children: value.map((item, i) => {
+  return /* @__PURE__ */ jsx24("div", { className: "squisq-jv-card-stack", children: value.map((item, i) => {
     const title = resolveItemTitle(itemLabel, item, i);
-    return /* @__PURE__ */ jsxs15("div", { className: "squisq-jv-card", children: [
-      title ? /* @__PURE__ */ jsx21("h4", { className: "squisq-jv-card__title", children: title }) : null,
-      /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsxs17("div", { className: "squisq-jv-card", children: [
+      title ? /* @__PURE__ */ jsx24("h4", { className: "squisq-jv-card__title", children: title }) : null,
+      /* @__PURE__ */ jsx24(
         RenderNode,
         {
           value: item,
@@ -4087,16 +4589,16 @@ function GroupViewer(props) {
   const help = schema.squisq?.help ?? schema.description;
   const obj = (value && typeof value === "object" ? value : {}) ?? {};
   const propEntries = Object.entries(schema.properties ?? {});
-  return /* @__PURE__ */ jsxs15("section", { className: "squisq-jv-group", children: [
-    title ? /* @__PURE__ */ jsx21("h3", { className: "squisq-jv-group__title", children: title }) : null,
-    help ? /* @__PURE__ */ jsx21("p", { className: "squisq-jv-group__help", children: help }) : null,
-    propEntries.map(([key, propSchema]) => /* @__PURE__ */ jsx21(Fragment3, { children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs17("section", { className: "squisq-jv-group", children: [
+    title ? /* @__PURE__ */ jsx24("h3", { className: "squisq-jv-group__title", children: title }) : null,
+    help ? /* @__PURE__ */ jsx24("p", { className: "squisq-jv-group__help", children: help }) : null,
+    propEntries.map(([key, propSchema]) => /* @__PURE__ */ jsx24(Fragment4, { children: /* @__PURE__ */ jsx24(
       RowOrSection,
       {
         label: propSchema.squisq?.label ?? propSchema.title ?? key,
         help: propSchema.squisq?.help ?? propSchema.description,
         kindHint: propSchema,
-        children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx24(
           RenderNode,
           {
             value: obj[key],
@@ -4120,11 +4622,11 @@ function RowOrSection({
 }) {
   const composite = isCompositeKind(kindHint);
   if (composite) {
-    return /* @__PURE__ */ jsx21(Fragment4, { children });
+    return /* @__PURE__ */ jsx24(Fragment5, { children });
   }
-  return /* @__PURE__ */ jsxs15("div", { className: "squisq-jv-row", children: [
-    /* @__PURE__ */ jsx21("div", { className: "squisq-jv-label", title: help, children: label }),
-    /* @__PURE__ */ jsx21("div", { children })
+  return /* @__PURE__ */ jsxs17("div", { className: "squisq-jv-row", children: [
+    /* @__PURE__ */ jsx24("div", { className: "squisq-jv-label", title: help, children: label }),
+    /* @__PURE__ */ jsx24("div", { children })
   ] });
 }
 function isCompositeKind(schema) {
@@ -4145,11 +4647,11 @@ function TabsViewer(props) {
   const matchedIndex = pickMatchingBranch(branches, value);
   const branch = branches[matchedIndex];
   if (!branch) {
-    return /* @__PURE__ */ jsx21(TextViewer, { ...props });
+    return /* @__PURE__ */ jsx24(TextViewer, { ...props });
   }
-  return /* @__PURE__ */ jsxs15("div", { className: "squisq-jv-tabs", children: [
-    /* @__PURE__ */ jsx21("span", { className: "squisq-jv-tabs__discriminator", children: branch.squisq?.label ?? branch.title ?? `Option ${matchedIndex + 1}` }),
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs17("div", { className: "squisq-jv-tabs", children: [
+    /* @__PURE__ */ jsx24("span", { className: "squisq-jv-tabs__discriminator", children: branch.squisq?.label ?? branch.title ?? `Option ${matchedIndex + 1}` }),
+    /* @__PURE__ */ jsx24(
       RenderNode,
       {
         value,
@@ -4213,7 +4715,7 @@ var VIEWERS = {
 };
 
 // src/jsonView/RenderNode.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function RenderNode(props) {
   const resolved = resolveRef(props.schema, props.rootSchema) ?? props.schema;
   if (resolveFlag(resolved.squisq?.hidden, props.rootData)) return null;
@@ -4229,18 +4731,18 @@ function RenderNode(props) {
   };
   if (kind === "group" || kind === "card") {
     const Group = Viewer;
-    return /* @__PURE__ */ jsx22(Group, { ...viewerProps, suppressTitle: props.suppressTopGroupTitle });
+    return /* @__PURE__ */ jsx25(Group, { ...viewerProps, suppressTitle: props.suppressTopGroupTitle });
   }
-  return /* @__PURE__ */ jsx22(Viewer, { ...viewerProps });
+  return /* @__PURE__ */ jsx25(Viewer, { ...viewerProps });
 }
 
 // src/jsonView/JsonView.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function JsonView(props) {
   const { schema, value, theme, surface, density = "comfortable", className } = props;
   const { style } = useJsonViewTokens(theme, surface);
   const cls = "squisq-json-view" + (density === "compact" ? " squisq-json-view--compact" : "") + (className ? ` ${className}` : "");
-  return /* @__PURE__ */ jsx23("div", { className: cls, style, children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26("div", { className: cls, style, children: /* @__PURE__ */ jsx26(
     RenderNode,
     {
       value,
@@ -4269,7 +4771,9 @@ export {
   LinearDocView,
   MapLayer,
   MarkdownRenderer,
+  MediaClipLayer,
   MediaContext,
+  PathLayer,
   ShapeLayer,
   SocialCaptionOverlay,
   TableLayer,
@@ -4283,6 +4787,7 @@ export {
   useAutoSurface,
   useDocPlayback,
   useMediaProvider,
+  useMediaSchedule,
   useMediaUrl,
   useViewportOrientation
 };