@bendyline/squisq-react 1.3.1 → 1.4.0

package/dist/index.js

@@ -1,34 +1,4794 @@
-// Main components
-export { DocPlayer } from './DocPlayer.js';
-export { BlockRenderer, VIEWPORT } from './BlockRenderer.js';
-export { CaptionOverlay } from './CaptionOverlay.js';
-export { SocialCaptionOverlay } from './SocialCaptionOverlay.js';
-export { DocControlsOverlay } from './DocControlsOverlay.js';
-export { DocControlsBottom } from './DocControlsBottom.js';
-export { DocControlsSidebar } from './DocControlsSidebar.js';
-export { DocControlsSlideshow } from './DocControlsSlideshow.js';
-export { DocPlayerWithSidebar } from './DocPlayerWithSidebar.js';
-export { DocProgressBar } from './DocProgressBar.js';
-export { MarkdownRenderer } from './MarkdownRenderer.js';
-export { LinearDocView } from './LinearDocView.js';
-export { InlineVideoPlayer } from './InlineVideoPlayer.js';
-export { InlineAudioPlayer } from './InlineAudioPlayer.js';
-// Layer components
-export { ImageLayer } from './layers/ImageLayer.js';
-export { TextLayer } from './layers/TextLayer.js';
-export { ShapeLayer } from './layers/ShapeLayer.js';
-export { VideoLayer } from './layers/VideoLayer.js';
-export { TableLayer } from './layers/TableLayer.js';
-export { MapLayer } from './layers/MapLayer.js';
-// Hooks
-export { useAudioSync } from './hooks/useAudioSync.js';
-export { useDocPlayback } from './hooks/useDocPlayback.js';
-export { useViewportOrientation } from './hooks/useViewportOrientation.js';
-export { MediaContext, useMediaProvider, useMediaUrl } from './hooks/MediaContext.js';
-export { useAutoSurface } from './hooks/useAutoSurface.js';
-export { formatTime } from './types.js';
-// Utilities
-export { getAnimationStyle, getTransitionClass } from './utils/animationUtils.js';
-// JSON Form — read-only viewer
-export { JsonView } from './jsonView/index.js';
+// src/DocPlayer.tsx
+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,
+  getDefaultAnimationDuration,
+  getTransitionClass,
+  getAnimationProgress
+} from "@bendyline/squisq/doc";
+
+// src/utils/layerUtils.ts
+function resolveValue(value, dimension) {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (value.endsWith("%")) {
+    const percent = parseFloat(value);
+    return percent / 100 * dimension;
+  }
+  return parseFloat(value);
+}
+function getAnchorOffset(anchor, width, height) {
+  switch (anchor) {
+    case "center":
+      return { x: -width / 2, y: -height / 2 };
+    case "top-right":
+      return { x: -width, y: 0 };
+    case "bottom-left":
+      return { x: 0, y: -height };
+    case "bottom-right":
+      return { x: -width, y: -height };
+    case "top-left":
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+
+// src/layers/ImageLayer.tsx
+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);
+  const y = resolveValue(position.y, viewport.height);
+  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const finalX = x + offset.x;
+  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__ */ 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: {
+          width: `${width}px`,
+          height: `${height}px`,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx2(
+          "img",
+          {
+            src,
+            alt: content.alt || "",
+            className: kbStyle.className,
+            style: {
+              width: `${width}px`,
+              height: `${height}px`,
+              objectFit: "cover",
+              objectPosition: "center",
+              display: "block",
+              pointerEvents: "none",
+              transformOrigin: "center center",
+              ...filter ? { filter } : {},
+              ...kbStyle.style
+            }
+          }
+        )
+      }
+    ) }) });
+  }
+  if (isCover) {
+    return /* @__PURE__ */ jsx2(
+      "g",
+      {
+        className: `block-layer block-layer--image ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        children: /* @__PURE__ */ jsx2("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx2(
+          "img",
+          {
+            src,
+            alt: content.alt || "",
+            style: {
+              width: `${width}px`,
+              height: `${height}px`,
+              objectFit: "cover",
+              objectPosition: "center",
+              display: "block",
+              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__ */ jsx2(
+    "g",
+    {
+      className: `block-layer block-layer--image ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: /* @__PURE__ */ jsx2(
+        "image",
+        {
+          href: src,
+          x: finalX,
+          y: finalY,
+          width,
+          height,
+          preserveAspectRatio,
+          style: { pointerEvents: "none", ...filter ? { filter } : {} }
+        }
+      )
+    }
+  );
+}
+function getPreserveAspectRatio(fit) {
+  switch (fit) {
+    case "cover":
+      return "xMidYMid slice";
+    case "fill":
+      return "none";
+    case "contain":
+    default:
+      return "xMidYMid meet";
+  }
+}
+var SPATIAL_ANIMATION_TYPES = /* @__PURE__ */ new Set(["panLeft", "panRight", "slowZoom", "zoomIn", "zoomOut"]);
+function remapToKenBurns(anim) {
+  switch (anim.type) {
+    case "panLeft":
+      return { ...anim, type: "slowZoom", panDirection: "left" };
+    case "panRight":
+      return { ...anim, type: "slowZoom", panDirection: "right" };
+    case "zoomIn":
+      return { ...anim, type: "slowZoom", direction: "in" };
+    case "zoomOut":
+      return { ...anim, type: "slowZoom", direction: "out" };
+    default:
+      return anim;
+  }
+}
+
+// src/layers/TextLayer.tsx
+import { useMemo as useMemo3 } from "react";
+import { DEFAULT_DOC_FONT } from "@bendyline/squisq/schemas";
+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 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(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(
+    (acc, line) => acc.concat(wrapText(line, style.fontSize, maxWidth)),
+    []
+  ) : rawLines;
+  if (style.maxLines && lines.length > style.maxLines) {
+    lines = lines.slice(0, style.maxLines);
+    const last = lines[lines.length - 1];
+    lines[lines.length - 1] = last.replace(/\s*$/, "") + "...";
+  }
+  const lineHeight = style.lineHeight || 1.4;
+  const lineHeightPx = style.fontSize * lineHeight;
+  const textStyles = {
+    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__ */ 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,
+      {
+        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__ */ jsx4(
+      "text",
+      {
+        x,
+        y,
+        textAnchor,
+        dominantBaseline,
+        style: textStyles,
+        filter: filterId ? `url(#${filterId})` : void 0,
+        children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tspan", { x, dy: i === 0 ? 0 : lineHeightPx, children: [
+          line || "\xA0",
+          " "
+        ] }, i))
+      }
+    )
+  ] });
+}
+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";
+  if (align === "left") return "start";
+  if (anchor?.includes("right")) return "end";
+  if (anchor === "center") return "middle";
+  return "start";
+}
+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;
+}
+function wrapText(text, fontSize, maxWidth) {
+  if (!text.trim()) return [""];
+  const avgCharWidth = fontSize * 0.5;
+  const charsPerLine = Math.floor(maxWidth / avgCharWidth);
+  if (charsPerLine <= 0) return [text];
+  const words = text.split(/\s+/);
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    const testLine = currentLine ? `${currentLine} ${word}` : word;
+    if (testLine.length <= charsPerLine) {
+      currentLine = testLine;
+    } else {
+      if (currentLine) {
+        lines.push(currentLine);
+      }
+      if (word.length > charsPerLine) {
+        let remaining = word;
+        while (remaining.length > charsPerLine) {
+          lines.push(remaining.slice(0, charsPerLine));
+          remaining = remaining.slice(charsPerLine);
+        }
+        currentLine = remaining;
+      } else {
+        currentLine = word;
+      }
+    }
+  }
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return lines.length > 0 ? lines : [""];
+}
+
+// src/layers/ShapeLayer.tsx
+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);
+  const rawY = resolveValue(position.y, viewport.height);
+  const width = position.width ? resolveValue(position.width, viewport.width) : 100;
+  const height = position.height ? resolveValue(position.height, viewport.height) : 100;
+  const anchorOffset = getAnchorOffset(position.anchor, width, height);
+  const x = rawX + anchorOffset.x;
+  const y = rawY + anchorOffset.y;
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const fill = content.fill || "none";
+  const isCSSGradient = typeof fill === "string" && fill.includes("gradient(");
+  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__ */ jsx5("foreignObject", { x, y, width, height, children: /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: {
+              width: `${width}px`,
+              height: `${height}px`,
+              background: fill,
+              borderRadius: content.borderRadius ? `${content.borderRadius}px` : void 0,
+              pointerEvents: "none"
+            }
+          }
+        ) })
+      }
+    );
+  }
+  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,
+    strokeDasharray: dash,
+    ...filterAttr ? { filter: filterAttr } : {}
+  };
+  return /* @__PURE__ */ jsxs3(
+    "g",
+    {
+      className: `block-layer block-layer--shape ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: [
+        (fillDef || filterDef) && /* @__PURE__ */ jsxs3("defs", { children: [
+          fillDef,
+          filterDef
+        ] }),
+        content.shape === "rect" && /* @__PURE__ */ jsx5(
+          "rect",
+          {
+            x,
+            y,
+            width,
+            height,
+            rx: content.borderRadius,
+            ry: content.borderRadius,
+            ...shapeProps
+          }
+        ),
+        content.shape === "circle" && /* @__PURE__ */ jsx5(
+          "circle",
+          {
+            cx: x + width / 2,
+            cy: y + height / 2,
+            r: Math.min(width, height) / 2,
+            ...shapeProps
+          }
+        ),
+        content.shape === "line" && /* @__PURE__ */ jsx5(
+          "line",
+          {
+            x1: x,
+            y1: y,
+            x2: x + width,
+            y2: y + height,
+            stroke: content.stroke || "#ffffff",
+            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 useEffect3 } from "react";
+
+// src/utils/mapTileUtils.ts
+var TILE_PROVIDERS = {
+  terrain: {
+    url: "https://tile.opentopomap.org/{z}/{x}/{y}.png",
+    attribution: "Map: OpenTopoMap (CC-BY-SA)",
+    maxZoom: 17
+  },
+  road: {
+    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: "\xA9 OpenStreetMap contributors",
+    maxZoom: 19
+  },
+  satellite: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    attribution: "Imagery: Esri, Maxar, Earthstar",
+    maxZoom: 18
+  },
+  toner: {
+    url: "https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}.png",
+    attribution: "Map: Stadia Maps, Stamen Design",
+    maxZoom: 20
+  },
+  watercolor: {
+    url: "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg",
+    attribution: "Map: Stadia Maps, Stamen Design",
+    maxZoom: 16
+  }
+};
+function latLngToTile(lat, lng, zoom) {
+  const n = Math.pow(2, zoom);
+  const x = Math.floor((lng + 180) / 360 * n);
+  const latRad = lat * Math.PI / 180;
+  const y = Math.floor((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n);
+  return { x, y };
+}
+function getPixelOffset(lat, lng, zoom, tileSize = 256) {
+  const n = Math.pow(2, zoom);
+  const xTile = (lng + 180) / 360 * n;
+  const latRad = lat * Math.PI / 180;
+  const yTile = (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n;
+  return {
+    x: (xTile - Math.floor(xTile)) * tileSize,
+    y: (yTile - Math.floor(yTile)) * tileSize
+  };
+}
+function getTilesForViewport(centerLat, centerLng, zoom, viewportWidth, viewportHeight, tileSize = 256) {
+  const centerTile = latLngToTile(centerLat, centerLng, zoom);
+  const pixelOffset = getPixelOffset(centerLat, centerLng, zoom, tileSize);
+  const tilesX = Math.ceil(viewportWidth / tileSize) + 1;
+  const tilesY = Math.ceil(viewportHeight / tileSize) + 1;
+  const startX = centerTile.x - Math.floor(tilesX / 2);
+  const startY = centerTile.y - Math.floor(tilesY / 2);
+  const centerScreenX = viewportWidth / 2 - pixelOffset.x;
+  const centerScreenY = viewportHeight / 2 - pixelOffset.y;
+  const tiles = [];
+  for (let dy = 0; dy < tilesY; dy++) {
+    for (let dx = 0; dx < tilesX; dx++) {
+      const tileX = startX + dx;
+      const tileY = startY + dy;
+      const screenX = centerScreenX + (tileX - centerTile.x) * tileSize;
+      const screenY = centerScreenY + (tileY - centerTile.y) * tileSize;
+      tiles.push({ x: tileX, y: tileY, screenX, screenY });
+    }
+  }
+  return tiles;
+}
+function buildTileUrl(provider, x, y, z) {
+  return provider.url.replace("{z}", String(z)).replace("{x}", String(x)).replace("{y}", String(y));
+}
+async function fetchTileImage(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error(`Failed to load tile: ${url}`));
+    img.src = url;
+  });
+}
+async function composeMapImage(options) {
+  const { center, zoom, style, width, height, markers = [], showAttribution = true } = options;
+  const provider = TILE_PROVIDERS[style];
+  const tileSize = provider.tileSize || 256;
+  const clampedZoom = Math.min(zoom, provider.maxZoom);
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Failed to get canvas context");
+  ctx.fillStyle = style === "toner" ? "#ffffff" : "#e5e7eb";
+  ctx.fillRect(0, 0, width, height);
+  const tiles = getTilesForViewport(center.lat, center.lng, clampedZoom, width, height, tileSize);
+  const tilePromises = tiles.map(async (tile) => {
+    const url = buildTileUrl(provider, tile.x, tile.y, clampedZoom);
+    try {
+      const img = await fetchTileImage(url);
+      ctx.drawImage(img, tile.screenX, tile.screenY, tileSize, tileSize);
+    } catch (err) {
+      console.warn(`Tile load failed: ${url}`, err);
+    }
+  });
+  await Promise.all(tilePromises);
+  for (const marker of markers) {
+    drawMarker(ctx, marker, center, clampedZoom, width, height, tileSize);
+  }
+  if (showAttribution) {
+    drawAttribution(ctx, provider.attribution, width, height);
+  }
+  return canvas.toDataURL("image/png");
+}
+function drawMarker(ctx, marker, center, zoom, width, height, tileSize) {
+  const centerTile = latLngToTile(center.lat, center.lng, zoom);
+  const markerTile = latLngToTile(marker.lat, marker.lng, zoom);
+  const centerOffset = getPixelOffset(center.lat, center.lng, zoom, tileSize);
+  const markerOffset = getPixelOffset(marker.lat, marker.lng, zoom, tileSize);
+  const dx = (markerTile.x - centerTile.x) * tileSize + (markerOffset.x - centerOffset.x);
+  const dy = (markerTile.y - centerTile.y) * tileSize + (markerOffset.y - centerOffset.y);
+  const screenX = width / 2 + dx;
+  const screenY = height / 2 + dy;
+  const color = marker.color || "#ef4444";
+  const icon = marker.icon || "pin";
+  ctx.save();
+  if (icon === "pin") {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(screenX, screenY - 12, 8, Math.PI, 0, false);
+    ctx.lineTo(screenX, screenY);
+    ctx.closePath();
+    ctx.fill();
+    ctx.fillStyle = "#ffffff";
+    ctx.beginPath();
+    ctx.arc(screenX, screenY - 12, 3, 0, Math.PI * 2);
+    ctx.fill();
+  } else if (icon === "circle") {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(screenX, screenY, 8, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = 2;
+    ctx.stroke();
+  } else if (icon === "star") {
+    ctx.fillStyle = color;
+    drawStar(ctx, screenX, screenY, 5, 10, 5);
+    ctx.fill();
+  }
+  if (marker.label) {
+    ctx.fillStyle = "#1f2937";
+    ctx.font = "bold 12px system-ui, sans-serif";
+    ctx.textAlign = "center";
+    ctx.fillText(marker.label, screenX, screenY + 20);
+  }
+  ctx.restore();
+}
+function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
+  let rot = Math.PI / 2 * 3;
+  const step = Math.PI / spikes;
+  ctx.beginPath();
+  ctx.moveTo(cx, cy - outerRadius);
+  for (let i = 0; i < spikes; i++) {
+    ctx.lineTo(cx + Math.cos(rot) * outerRadius, cy + Math.sin(rot) * outerRadius);
+    rot += step;
+    ctx.lineTo(cx + Math.cos(rot) * innerRadius, cy + Math.sin(rot) * innerRadius);
+    rot += step;
+  }
+  ctx.lineTo(cx, cy - outerRadius);
+  ctx.closePath();
+}
+function drawAttribution(ctx, text, width, height) {
+  ctx.save();
+  ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
+  const padding = 4;
+  ctx.font = "10px system-ui, sans-serif";
+  const textWidth = ctx.measureText(text).width;
+  ctx.fillRect(width - textWidth - padding * 2 - 4, height - 16, textWidth + padding * 2, 14);
+  ctx.fillStyle = "#374151";
+  ctx.textAlign = "right";
+  ctx.fillText(text, width - padding - 4, height - 5);
+  ctx.restore();
+}
+
+// src/layers/MapLayer.tsx
+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);
+  const [isLoading, setIsLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  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;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const finalX = x + offset.x;
+  const finalY = y + offset.y;
+  useEffect3(() => {
+    let cancelled = false;
+    if (content.staticSrc) {
+      const src = content.staticSrc.startsWith("http") ? content.staticSrc : `${basePath}/${content.staticSrc}`;
+      setMapImageUrl(src);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    composeMapImage({
+      center: content.center,
+      zoom: content.zoom,
+      style: content.style,
+      width,
+      height,
+      markers: content.markers,
+      showAttribution: content.showAttribution !== false
+    }).then((dataUrl) => {
+      if (!cancelled) {
+        setMapImageUrl(dataUrl);
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        console.error("Failed to compose map:", err);
+        setError(err instanceof Error ? err.message : String(err));
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    content.center.lat,
+    content.center.lng,
+    content.zoom,
+    content.style,
+    content.staticSrc,
+    width,
+    height,
+    basePath
+  ]);
+  const animStyle = getAnimationStyle(animation, blockTime);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs5(
+      "g",
+      {
+        className: `block-layer block-layer--map ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        children: [
+          /* @__PURE__ */ jsx7("rect", { x: finalX, y: finalY, width, height, fill: "#e5e7eb" }),
+          /* @__PURE__ */ jsx7(
+            "text",
+            {
+              x: finalX + width / 2,
+              y: finalY + height / 2,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              fill: "#9ca3af",
+              fontSize: "24",
+              fontFamily: "system-ui, sans-serif",
+              children: "Loading map..."
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (error || !mapImageUrl) {
+    return /* @__PURE__ */ jsxs5(
+      "g",
+      {
+        className: `block-layer block-layer--map ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        children: [
+          /* @__PURE__ */ jsx7("rect", { x: finalX, y: finalY, width, height, fill: "#fef2f2" }),
+          /* @__PURE__ */ jsx7(
+            "text",
+            {
+              x: finalX + width / 2,
+              y: finalY + height / 2,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              fill: "#dc2626",
+              fontSize: "18",
+              fontFamily: "system-ui, sans-serif",
+              children: "Map failed to load"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(
+    "g",
+    {
+      className: `block-layer block-layer--map ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: [
+        /* @__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,
+            x: finalX,
+            y: finalY,
+            width,
+            height,
+            preserveAspectRatio: "xMidYMid slice",
+            style: { pointerEvents: "none" }
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/layers/VideoLayer.tsx
+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 = 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;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const finalX = x + offset.x;
+  const finalY = y + offset.y;
+  const src = useMediaUrl(content.src, basePath);
+  const resolvedPoster = useMediaUrl(content.posterSrc || "", basePath);
+  const posterSrc = content.posterSrc ? resolvedPoster : void 0;
+  useEffect4(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = content.clipStart;
+    hasStartedRef.current = true;
+    if (isPlaying) {
+      const playPromise = video.play();
+      if (playPromise) {
+        playPromise.catch(() => {
+        });
+      }
+    }
+    const handleTimeUpdate = () => {
+      if (video.currentTime >= content.clipEnd) {
+        video.pause();
+        video.currentTime = content.clipEnd;
+      }
+    };
+    video.addEventListener("timeupdate", handleTimeUpdate);
+    return () => {
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.pause();
+    };
+  }, [content.src, content.clipStart, content.clipEnd]);
+  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();
+      if (playPromise) {
+        playPromise.catch(() => {
+        });
+      }
+    } else {
+      video.pause();
+    }
+  }, [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,
+      src,
+      poster: posterSrc,
+      muted: true,
+      playsInline: true,
+      preload: "auto",
+      "data-clip-start": content.clipStart,
+      "data-clip-end": content.clipEnd,
+      "data-start-at": startAt,
+      style: {
+        width: `${width}px`,
+        height: `${height}px`,
+        objectFit: content.fit || "cover",
+        objectPosition: "center",
+        display: "block",
+        pointerEvents: "none"
+      }
+    }
+  ) }) });
+}
+
+// src/layers/TableLayer.tsx
+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;
+  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;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const finalX = x + offset.x;
+  const finalY = y + offset.y;
+  const animStyle = animation ? getAnimationStyle(animation, blockTime) : {};
+  const cellAlign = (ci) => {
+    const a = align?.[ci];
+    return a ? { textAlign: a } : void 0;
+  };
+  const borderRadius = style.borderRadius ?? 8;
+  return /* @__PURE__ */ jsx9("foreignObject", { x: finalX, y: finalY, width, height, style: animStyle, children: /* @__PURE__ */ jsx9(
+    "div",
+    {
+      ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+      style: {
+        width: `${width}px`,
+        height: `${height}px`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "16px",
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ jsxs6(
+        "table",
+        {
+          style: {
+            width: "100%",
+            borderCollapse: "separate",
+            borderSpacing: 0,
+            fontSize: `${style.fontSize}px`,
+            fontFamily: style.fontFamily ?? "system-ui, sans-serif",
+            overflow: "hidden",
+            borderRadius: `${borderRadius}px`,
+            border: `1px solid ${style.borderColor}`
+          },
+          children: [
+            headers.length > 0 && /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { children: headers.map((header, ci) => /* @__PURE__ */ jsx9(
+              "th",
+              {
+                style: {
+                  background: style.headerBackground,
+                  color: style.headerColor,
+                  fontFamily: style.headerFontFamily ?? style.fontFamily ?? "system-ui, sans-serif",
+                  fontWeight: 600,
+                  padding: "12px 16px",
+                  borderBottom: `2px solid ${style.borderColor}`,
+                  borderRight: ci < headers.length - 1 ? `1px solid ${style.borderColor}` : void 0,
+                  ...cellAlign(ci)
+                },
+                children: header
+              },
+              ci
+            )) }) }),
+            rows.length > 0 && /* @__PURE__ */ jsx9("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsx9("tr", { children: row.map((cell, ci) => /* @__PURE__ */ jsx9(
+              "td",
+              {
+                style: {
+                  background: style.cellBackground,
+                  color: style.cellColor,
+                  padding: "10px 16px",
+                  borderBottom: ri < rows.length - 1 ? `1px solid ${style.borderColor}` : void 0,
+                  borderRight: ci < row.length - 1 ? `1px solid ${style.borderColor}` : void 0,
+                  ...cellAlign(ci)
+                },
+                children: cell
+              },
+              ci
+            )) }, ri)) })
+          ]
+        }
+      )
+    }
+  ) });
+}
+
+// src/BlockRenderer.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var VIEWPORT = {
+  width: 1920,
+  height: 1080
+};
+function BlockRenderer({
+  block,
+  blockTime,
+  basePath,
+  isEntering = false,
+  isExiting = false,
+  transition,
+  viewport = VIEWPORT,
+  isPlaying
+}) {
+  let transitionClass = "";
+  const transitionStyle = {};
+  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__ */ jsxs7(
+    "svg",
+    {
+      className: `block-svg ${transitionClass}`,
+      style: transitionStyle,
+      viewBox: `0 0 ${viewport.width} ${viewport.height}`,
+      preserveAspectRatio: "xMidYMid meet",
+      overflow: "hidden",
+      "data-block-id": block.id,
+      children: [
+        /* @__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,
+            basePath,
+            viewport,
+            blockTime,
+            isPlaying
+          },
+          layer.id
+        )) })
+      ]
+    }
+  );
+}
+function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }) {
+  switch (layer.type) {
+    case "image":
+      return /* @__PURE__ */ jsx10(ImageLayer, { layer, basePath, viewport, blockTime });
+    case "text":
+      return /* @__PURE__ */ jsx10(TextLayer, { layer, viewport, blockTime });
+    case "shape":
+      return /* @__PURE__ */ jsx10(ShapeLayer, { layer, viewport, blockTime });
+    case "path":
+      return /* @__PURE__ */ jsx10(PathLayer, { layer, viewport, blockTime });
+    case "map":
+      return /* @__PURE__ */ jsx10(MapLayer, { layer, basePath, viewport, blockTime });
+    case "video":
+      return /* @__PURE__ */ jsx10(
+        VideoLayer,
+        {
+          layer,
+          basePath,
+          viewport,
+          blockTime,
+          isPlaying
+        }
+      );
+    case "table":
+      return /* @__PURE__ */ jsx10(TableLayer, { layer, viewport, blockTime });
+    default:
+      console.warn(`Unknown layer type: ${layer.type}`);
+      return null;
+  }
+}
+
+// src/CaptionOverlay.tsx
+import { getCaptionAtTime } from "@bendyline/squisq/schemas";
+
+// src/SocialCaptionOverlay.tsx
+import { useMemo as useMemo4 } from "react";
+import { resolveFontFamily } from "@bendyline/squisq/schemas";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var TARGET_CHUNK_SIZE = 4;
+var MIN_CHUNK_SIZE = 2;
+var MAX_CHUNK_SIZE = 6;
+function resolvePhraseTiming(phrase) {
+  if (phrase.words && phrase.words.length > 0) {
+    return phrase.words.map((w) => ({
+      text: w.text,
+      startTime: w.startTime,
+      endTime: w.endTime
+    }));
+  }
+  const rawWords = phrase.text.split(/\s+/).filter((w) => w.length > 0);
+  if (rawWords.length === 0) return [];
+  const duration = phrase.endTime - phrase.startTime;
+  const wordDuration = duration / rawWords.length;
+  return rawWords.map((text, i) => ({
+    text,
+    startTime: phrase.startTime + i * wordDuration,
+    endTime: phrase.startTime + (i + 1) * wordDuration
+  }));
+}
+function buildWordStream(captions) {
+  const allWords = [];
+  for (const phrase of captions.phrases) {
+    allWords.push(...resolvePhraseTiming(phrase));
+  }
+  if (allWords.length === 0) return { words: [], chunks: [] };
+  let chunkSize = TARGET_CHUNK_SIZE;
+  if (allWords.length > chunkSize) {
+    const numChunks = Math.ceil(allWords.length / chunkSize);
+    chunkSize = Math.ceil(allWords.length / numChunks);
+    chunkSize = Math.min(MAX_CHUNK_SIZE, Math.max(MIN_CHUNK_SIZE, chunkSize));
+  } else {
+    chunkSize = Math.max(MIN_CHUNK_SIZE, allWords.length);
+  }
+  const chunks = [];
+  for (let i = 0; i < allWords.length; i += chunkSize) {
+    const chunkWords = allWords.slice(i, i + chunkSize);
+    chunks.push({
+      words: chunkWords,
+      startTime: chunkWords[0].startTime,
+      endTime: chunkWords[chunkWords.length - 1].endTime
+    });
+  }
+  return { words: allWords, chunks };
+}
+function SocialCaptionOverlay({
+  captions,
+  currentTime,
+  enabled = true,
+  theme,
+  viewport
+}) {
+  const { chunks } = useMemo4(
+    () => captions ? buildWordStream(captions) : { words: [], chunks: [] },
+    [captions]
+  );
+  if (!enabled || chunks.length === 0) {
+    return /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: "social-caption-overlay",
+        style: {
+          position: "absolute",
+          bottom: "18%",
+          left: 0,
+          right: 0,
+          zIndex: 50,
+          pointerEvents: "none",
+          opacity: 0,
+          transition: "opacity 0.15s ease-in-out"
+        }
+      }
+    );
+  }
+  let activeChunk = null;
+  let activeWordIndex = -1;
+  for (const chunk of chunks) {
+    if (currentTime >= chunk.startTime && currentTime < chunk.endTime) {
+      activeChunk = chunk;
+      break;
+    }
+  }
+  if (!activeChunk) {
+    for (let i = 0; i < chunks.length - 1; i++) {
+      if (currentTime >= chunks[i].endTime && currentTime < chunks[i + 1].startTime) {
+        activeChunk = chunks[i];
+        activeWordIndex = activeChunk.words.length - 1;
+        break;
+      }
+    }
+    if (!activeChunk && chunks.length > 0 && currentTime >= chunks[chunks.length - 1].startTime) {
+      activeChunk = chunks[chunks.length - 1];
+      activeWordIndex = activeChunk.words.length - 1;
+    }
+  }
+  if (!activeChunk) return null;
+  if (activeWordIndex === -1) {
+    for (let i = 0; i < activeChunk.words.length; i++) {
+      const word = activeChunk.words[i];
+      if (currentTime >= word.startTime && currentTime < word.endTime) {
+        activeWordIndex = i;
+        break;
+      }
+    }
+    if (activeWordIndex === -1) {
+      for (let i = activeChunk.words.length - 1; i >= 0; i--) {
+        if (currentTime >= activeChunk.words[i].startTime) {
+          activeWordIndex = i;
+          break;
+        }
+      }
+    }
+    if (activeWordIndex === -1) activeWordIndex = 0;
+  }
+  const primaryColor = theme?.colors?.primary ?? "#5b9bd5";
+  const fontFamily = theme?.typography?.titleFont ? resolveFontFamily(theme.typography.titleFont, '"PT Serif", Georgia, serif') : '"PT Serif", Georgia, serif';
+  const viewportHeight = viewport?.height ?? 720;
+  const baseFontSize = Math.round(viewportHeight * 0.055);
+  const fontSize = Math.max(24, Math.min(72, baseFontSize));
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: "social-caption-overlay",
+      style: {
+        position: "absolute",
+        bottom: "18%",
+        left: 0,
+        right: 0,
+        zIndex: 50,
+        pointerEvents: "none",
+        textAlign: "center",
+        padding: "0 8%",
+        boxSizing: "border-box",
+        opacity: 1,
+        transition: "opacity 0.15s ease-in-out"
+      },
+      children: /* @__PURE__ */ jsx11(
+        "div",
+        {
+          style: {
+            display: "inline-block",
+            lineHeight: 1.3
+          },
+          children: activeChunk.words.map((word, i) => {
+            const isActive = i === activeWordIndex;
+            return /* @__PURE__ */ jsx11(
+              "span",
+              {
+                style: {
+                  fontFamily,
+                  fontSize: `${fontSize}px`,
+                  fontWeight: isActive ? 800 : 600,
+                  color: isActive ? primaryColor : "rgba(255, 255, 255, 0.9)",
+                  textShadow: "0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.4)",
+                  marginRight: i < activeChunk.words.length - 1 ? "0.3em" : void 0,
+                  transition: "color 0.1s ease, font-weight 0.1s ease",
+                  textTransform: "uppercase"
+                },
+                children: word.text
+              },
+              `${word.startTime}-${i}`
+            );
+          })
+        }
+      )
+    }
+  );
+}
+
+// src/CaptionOverlay.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function CaptionOverlay({
+  captions,
+  currentTime,
+  enabled = true,
+  fontSize = 16,
+  captionStyle = "standard",
+  theme,
+  viewport
+}) {
+  if (captionStyle === "social") {
+    return /* @__PURE__ */ jsx12(
+      SocialCaptionOverlay,
+      {
+        captions,
+        currentTime,
+        enabled,
+        theme,
+        viewport
+      }
+    );
+  }
+  const phrase = enabled && captions ? getCaptionAtTime(captions, currentTime) : null;
+  const captionText = phrase?.text ?? null;
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: "caption-overlay",
+      style: {
+        position: "absolute",
+        top: "6px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 50,
+        pointerEvents: "none",
+        maxWidth: "100%",
+        width: "100%",
+        textAlign: "center",
+        opacity: captionText ? 1 : 0,
+        transition: "opacity 0.15s ease-in-out",
+        padding: "0 4px",
+        boxSizing: "border-box"
+      },
+      children: captionText && /* @__PURE__ */ jsx12(
+        "div",
+        {
+          style: {
+            display: "inline-block",
+            padding: "3px 10px",
+            background: "rgba(0, 0, 0, 0.65)",
+            borderRadius: "4px",
+            backdropFilter: "blur(4px)"
+          },
+          children: /* @__PURE__ */ jsx12(
+            "span",
+            {
+              style: {
+                color: "#ffffff",
+                fontSize: `${fontSize}px`,
+                fontFamily: "'Hanken Grotesk', system-ui, sans-serif",
+                fontWeight: 500,
+                lineHeight: 1.25,
+                textShadow: "0 1px 3px rgba(0,0,0,0.5)",
+                whiteSpace: "pre-wrap",
+                wordWrap: "break-word"
+              },
+              children: captionText
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/hooks/useAutoSurface.ts
+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 = useMemo5(
+    () => enabled && typeof window !== "undefined" ? window.matchMedia(DARK_QUERY) : null,
+    [enabled]
+  );
+  const subscribe = useCallback(
+    (cb) => {
+      if (!mql) return () => {
+      };
+      mql.addEventListener("change", cb);
+      return () => mql.removeEventListener("change", cb);
+    },
+    [mql]
+  );
+  const getSnapshot = useCallback(() => mql?.matches ? DARK_SURFACE : LIGHT_SURFACE, [mql]);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/hooks/useAudioSync.ts
+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);
+  const [currentSegment, setCurrentSegment] = useState3(0);
+  const [isEnded, setIsEnded] = useState3(false);
+  const [isAudioReady, setIsAudioReady] = useState3(false);
+  const [totalDuration, setTotalDuration] = useState3(0);
+  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;
+    }
+    let time = 0;
+    segmentStarts.current = audioTrack.segments.map((seg) => {
+      const start = time;
+      time += seg.duration;
+      return start;
+    });
+    setTotalDuration(time);
+  }, [audioTrack]);
+  const preloadAudio = useCallback2(
+    async (src) => {
+      const audioUrl = basePath ? `${basePath}/${src}` : src;
+      if (blobUrls.current.has(src)) {
+        return blobUrls.current.get(src);
+      }
+      if (loadingPromises.current.has(src)) {
+        return loadingPromises.current.get(src);
+      }
+      const loadPromise = (async () => {
+        try {
+          const response = await fetch(audioUrl);
+          if (!response.ok) throw new Error(`HTTP ${response.status}`);
+          const blob = await response.blob();
+          const blobUrl = URL.createObjectURL(blob);
+          blobUrls.current.set(src, blobUrl);
+          return blobUrl;
+        } catch {
+          return audioUrl;
+        } finally {
+          loadingPromises.current.delete(src);
+        }
+      })();
+      loadingPromises.current.set(src, loadPromise);
+      return loadPromise;
+    },
+    [basePath]
+  );
+  useEffect5(() => {
+    if (!audioTrack?.segments) return;
+    audioTrack.segments.forEach((segment) => {
+      preloadAudio(segment.src);
+    });
+    const currentBlobUrls = blobUrls.current;
+    return () => {
+      currentBlobUrls.forEach((url) => {
+        URL.revokeObjectURL(url);
+      });
+      currentBlobUrls.clear();
+    };
+  }, [audioTrack, preloadAudio]);
+  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 = () => {
+      setIsPlaying(true);
+    };
+    const handlePause = () => setIsPlaying(false);
+    const handleError = () => {
+      setIsAudioReady(true);
+    };
+    const handleEnded = () => {
+      if (audioTrack && currentSegment < audioTrack.segments.length - 1) {
+        shouldPlayAfterLoad.current = true;
+        setCurrentSegment((prev) => prev + 1);
+      } else {
+        setIsEnded(true);
+        setIsPlaying(false);
+      }
+    };
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("play", handlePlay);
+    audio.addEventListener("pause", handlePause);
+    audio.addEventListener("ended", handleEnded);
+    audio.addEventListener("error", handleError);
+    return () => {
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("play", handlePlay);
+      audio.removeEventListener("pause", handlePause);
+      audio.removeEventListener("ended", handleEnded);
+      audio.removeEventListener("error", handleError);
+    };
+  }, [audioRef, currentSegment, audioTrack]);
+  useEffect5(() => {
+    const audio = audioRef.current;
+    if (!audio || !audioTrack?.segments) return;
+    const segment = audioTrack.segments[currentSegment];
+    if (!segment) return;
+    const applyPendingSeek = () => {
+      if (pendingSeekTime.current !== null) {
+        const segmentStart = segmentStarts.current[currentSegment] || 0;
+        const segmentTime = pendingSeekTime.current - segmentStart;
+        audio.currentTime = Math.max(0, segmentTime);
+        setCurrentTime(pendingSeekTime.current);
+        pendingSeekTime.current = null;
+      }
+      if (shouldPlayAfterLoad.current) {
+        audio.play().catch(() => {
+        });
+        shouldPlayAfterLoad.current = false;
+      }
+    };
+    const currentSrc = audio.src;
+    const cachedBlobUrl = blobUrls.current.get(segment.src);
+    const isSameSource = currentSrc && (currentSrc === cachedBlobUrl || currentSrc.endsWith(segment.src));
+    if (!isSameSource) {
+      const loadAndPlay = async () => {
+        const blobUrl = await preloadAudio(segment.src);
+        const handleCanPlay = () => {
+          setIsAudioReady(true);
+          applyPendingSeek();
+          audio.removeEventListener("canplay", handleCanPlay);
+        };
+        audio.addEventListener("canplay", handleCanPlay);
+        audio.src = blobUrl;
+        audio.load();
+        await Promise.resolve();
+        if (audio.readyState >= 3) {
+          audio.removeEventListener("canplay", handleCanPlay);
+          setIsAudioReady(true);
+          applyPendingSeek();
+        }
+      };
+      loadAndPlay();
+    } else {
+      applyPendingSeek();
+    }
+  }, [audioRef, currentSegment, audioTrack, preloadAudio]);
+  const play = useCallback2(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      if (isEnded) {
+        setCurrentSegment(0);
+        setIsEnded(false);
+      }
+      audio.play().then(() => {
+        fallbackMode.current = false;
+      }).catch(() => {
+        fallbackMode.current = true;
+        setIsPlaying(true);
+      });
+    }
+  }, [audioRef, isEnded]);
+  const pause = useCallback2(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.pause();
+    }
+    setIsPlaying(false);
+  }, [audioRef]);
+  const toggle = useCallback2(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (!isPlaying) {
+      play();
+    } else {
+      pause();
+    }
+  }, [audioRef, isPlaying, play, pause]);
+  const seekTo = useCallback2(
+    (time) => {
+      const audio = audioRef.current;
+      if (!audio || !audioTrack?.segments) return;
+      const clampedTime = totalDuration > 0 ? Math.max(0, Math.min(time, totalDuration)) : Math.max(0, time);
+      let segmentIndex = 0;
+      let segmentStart = 0;
+      for (let i = 0; i < audioTrack.segments.length; i++) {
+        const segEnd = segmentStart + audioTrack.segments[i].duration;
+        if (clampedTime < segEnd) {
+          segmentIndex = i;
+          break;
+        }
+        segmentStart = segEnd;
+        if (i === audioTrack.segments.length - 1) {
+          segmentIndex = i;
+        }
+      }
+      const wasPlaying = !audio.paused;
+      setIsEnded(false);
+      if (segmentIndex !== currentSegment) {
+        pendingSeekTime.current = clampedTime;
+        shouldPlayAfterLoad.current = wasPlaying;
+        setCurrentSegment(segmentIndex);
+      } else {
+        const segmentTime = clampedTime - segmentStart;
+        audio.currentTime = Math.max(0, segmentTime);
+        setCurrentTime(clampedTime);
+      }
+    },
+    [audioRef, audioTrack, currentSegment, totalDuration]
+  );
+  const skipToSegment = useCallback2(
+    (index) => {
+      if (!audioTrack?.segments || index < 0 || index >= audioTrack.segments.length) {
+        return;
+      }
+      setCurrentSegment(index);
+      setIsEnded(false);
+    },
+    [audioTrack]
+  );
+  const restart = useCallback2(async () => {
+    seekTo(0);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    play();
+  }, [seekTo, play]);
+  useEffect5(() => {
+    if (!isPlaying || !fallbackMode.current || !totalDuration) return;
+    let lastTime = performance.now();
+    let raf;
+    const tick = (now) => {
+      if (!fallbackMode.current) return;
+      const dt = (now - lastTime) / 1e3;
+      lastTime = now;
+      setCurrentTime((prev) => {
+        const next = prev + dt;
+        if (next >= totalDuration) {
+          fallbackMode.current = false;
+          setIsEnded(true);
+          setIsPlaying(false);
+          return totalDuration;
+        }
+        return next;
+      });
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [isPlaying, totalDuration]);
+  return {
+    // State
+    currentTime,
+    isPlaying,
+    currentSegment,
+    totalDuration,
+    isEnded,
+    isReady: isAudioReady,
+    isAvailable: true,
+    // HTML5 audio is always available in browsers
+    // Actions
+    play: async () => play(),
+    pause: async () => pause(),
+    toggle: async () => toggle(),
+    seekTo: async (time) => seekTo(time),
+    skipToSegment: async (index) => skipToSegment(index),
+    restart
+  };
+}
+
+// src/hooks/useDocPlayback.ts
+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,
+  flattenRenderableBlocks,
+  isTemplateBlock,
+  resolvePersistentLayers,
+  VIEWPORT_PRESETS
+} from "@bendyline/squisq/doc";
+function useDocPlayback(script, currentTime, viewport = VIEWPORT_PRESETS.landscape, renderMode = false, theme) {
+  void renderMode;
+  const blocks = useMemo6(() => {
+    if (!script?.blocks) {
+      return [];
+    }
+    const hasChildren = script.blocks.some((b) => b.children && b.children.length > 0);
+    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,
+        duration: seg.duration
+      }));
+      const expanded = expandDocBlocks(flatBlocks, {
+        audioSegments,
+        viewport,
+        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.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 = useMemo6(() => {
+    if (!currentBlock) return 0;
+    return Math.max(0, currentTime - currentBlock.startTime);
+  }, [currentBlock, currentTime]);
+  const blockProgress = useMemo6(() => {
+    if (!currentBlock || currentBlock.duration === 0) return 0;
+    return Math.min(1, blockTime / currentBlock.duration);
+  }, [currentBlock, blockTime]);
+  const docProgress = useMemo6(() => {
+    if (!script || script.duration === 0) return 0;
+    return Math.min(1, currentTime / script.duration);
+  }, [script, currentTime]);
+  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;
+      const targetBlock = blocks[index];
+      if (targetBlock) {
+        return targetBlock.startTime;
+      }
+    },
+    [script, blocks]
+  );
+  const nextBlock = useCallback3(() => {
+    if (currentBlockIndex < blocks.length - 1) {
+      return goToBlock(currentBlockIndex + 1);
+    }
+  }, [currentBlockIndex, blocks.length, goToBlock]);
+  const prevBlock = useCallback3(() => {
+    if (currentBlockIndex > 0) {
+      return goToBlock(currentBlockIndex - 1);
+    }
+  }, [currentBlockIndex, goToBlock]);
+  return {
+    currentBlock,
+    currentBlockIndex,
+    previousBlock,
+    isEntering,
+    isExiting,
+    blockTime,
+    blockProgress,
+    docProgress,
+    nextBlock,
+    prevBlock,
+    goToBlock,
+    /** Expanded blocks (templates converted to full blocks with layers) */
+    blocks
+  };
+}
+
+// src/hooks/useViewportOrientation.ts
+import { useState as useState4, useEffect as useEffect6, useMemo as useMemo7 } from "react";
+import {
+  VIEWPORT_PRESETS as VIEWPORT_PRESETS2
+} from "@bendyline/squisq/doc";
+function getOrientationFromWindow(width, height) {
+  const ratio = width / height;
+  if (ratio > 1.2) {
+    return "landscape";
+  } else if (ratio < 0.83) {
+    return "portrait";
+  } else {
+    return "landscape";
+  }
+}
+function getViewportForOrientation(orientation) {
+  switch (orientation) {
+    case "portrait":
+      return VIEWPORT_PRESETS2.portrait;
+    case "square":
+      return VIEWPORT_PRESETS2.square;
+    case "landscape":
+    default:
+      return VIEWPORT_PRESETS2.landscape;
+  }
+}
+function useViewportOrientation() {
+  const [windowSize, setWindowSize] = useState4(() => ({
+    width: typeof window !== "undefined" ? window.innerWidth : 1920,
+    height: typeof window !== "undefined" ? window.innerHeight : 1080
+  }));
+  useEffect6(() => {
+    if (typeof window === "undefined") return;
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    let timeoutId;
+    const debouncedResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(handleResize, 100);
+    };
+    window.addEventListener("resize", debouncedResize);
+    return () => {
+      window.removeEventListener("resize", debouncedResize);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  const orientation = useMemo7(
+    () => getOrientationFromWindow(windowSize.width, windowSize.height),
+    [windowSize.width, windowSize.height]
+  );
+  const viewport = useMemo7(() => getViewportForOrientation(orientation), [orientation]);
+  return {
+    viewport,
+    orientation,
+    windowSize
+  };
+}
+
+// src/DocPlayer.tsx
+import {
+  expandCoverBlock,
+  createTemplateContext,
+  DEFAULT_THEME as DEFAULT_THEME3,
+  VIEWPORT_PRESETS as VIEWPORT_PRESETS4
+} from "@bendyline/squisq/doc";
+
+// src/DocProgressBar.tsx
+import { useRef as useRef5, useState as useState5, useCallback as useCallback4 } from "react";
+
+// src/types.ts
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+// src/DocProgressBar.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+function DocProgressBar({
+  state,
+  actions,
+  blockMarkers,
+  expandedBlocks,
+  getBlockTitle
+}) {
+  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;
+    const rect = bar.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const progress = Math.max(0, Math.min(1, x / rect.width));
+    setHoverPosition(progress);
+  }, []);
+  const handleProgressLeave = useCallback4(() => {
+    setHoverPosition(null);
+  }, []);
+  const getBlockAtTimeLocal = useCallback4(
+    (time) => {
+      for (let i = expandedBlocks.length - 1; i >= 0; i--) {
+        const blk = expandedBlocks[i];
+        if (time >= blk.startTime) {
+          return { block: blk, index: i };
+        }
+      }
+      return expandedBlocks.length > 0 ? { block: expandedBlocks[0], index: 0 } : null;
+    },
+    [expandedBlocks]
+  );
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      ref: progressBarRef,
+      style: {
+        flex: 1,
+        height: "24px",
+        cursor: "pointer",
+        position: "relative",
+        display: "flex",
+        alignItems: "center"
+      },
+      onClick: (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const progress = x / rect.width;
+        actions.seekTo(progress * state.totalDuration);
+      },
+      onMouseMove: handleProgressHover,
+      onMouseLeave: handleProgressLeave,
+      children: [
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              height: "6px",
+              background: "rgba(255,255,255,0.2)",
+              borderRadius: "3px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            "data-testid": "doc-progress-fill",
+            style: {
+              position: "absolute",
+              left: 0,
+              width: `${playProgress * 100}%`,
+              height: "6px",
+              background: "#5b9bd5",
+              borderRadius: "3px"
+            }
+          }
+        ),
+        blockMarkers.map((marker, i) => /* @__PURE__ */ jsx13(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${marker.position}%`,
+              transform: "translateX(-50%)",
+              width: "10px",
+              height: "10px",
+              borderRadius: "50%",
+              background: marker.index === state.currentBlockIndex ? "#ffffff" : "rgba(255,255,255,0.5)",
+              border: "2px solid #5b9bd5",
+              cursor: "pointer",
+              zIndex: 2,
+              transition: "transform 0.15s, background 0.15s"
+            },
+            title: marker.title,
+            onClick: (e) => {
+              e.stopPropagation();
+              actions.seekTo(marker.block.startTime);
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "translateX(-50%)";
+            }
+          },
+          `${marker.block.id}-${i}`
+        )),
+        hoverPosition !== null && /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${hoverPosition * 100}%`,
+              bottom: "100%",
+              transform: "translateX(-50%)",
+              marginBottom: "8px",
+              padding: "6px 10px",
+              background: "rgba(0,0,0,0.9)",
+              borderRadius: "4px",
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 10
+            },
+            children: [
+              /* @__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__ */ jsx13("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "11px", marginTop: "2px" }, children: getBlockTitle(slideInfo.block) });
+                }
+                return null;
+              })()
+            ]
+          }
+        ),
+        hoverPosition !== null && /* @__PURE__ */ jsx13(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${hoverPosition * 100}%`,
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "2px",
+              height: "16px",
+              background: "rgba(255,255,255,0.6)",
+              pointerEvents: "none",
+              zIndex: 1
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DocControlsOverlay.tsx
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function DocControlsOverlay({
+  state,
+  actions,
+  blockMarkers,
+  expandedBlocks,
+  getBlockTitle
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: "doc-player__controls",
+      style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: "12px 16px",
+        background: "linear-gradient(transparent, rgba(0,0,0,0.8))",
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        zIndex: 100
+      },
+      children: [
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            onClick: actions.restart,
+            style: {
+              background: "none",
+              border: "none",
+              color: "rgba(255,255,255,0.7)",
+              cursor: "pointer",
+              padding: "8px",
+              fontSize: "14px",
+              display: "flex",
+              alignItems: "center"
+            },
+            title: "Restart",
+            "aria-label": "Restart from beginning",
+            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__ */ jsx14(
+          "button",
+          {
+            onClick: actions.toggle,
+            style: {
+              background: "rgba(255,255,255,0.2)",
+              border: "none",
+              borderRadius: "50%",
+              color: "white",
+              cursor: "pointer",
+              padding: "10px",
+              fontSize: "16px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "40px",
+              height: "40px"
+            },
+            "aria-label": state.isPlaying ? "Pause" : "Play",
+            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__ */ jsxs9("span", { style: { color: "white", fontSize: "12px", minWidth: "80px", fontFamily: "monospace" }, children: [
+          formatTime(state.currentTime),
+          " / ",
+          formatTime(state.totalDuration)
+        ] }),
+        /* @__PURE__ */ jsx14(
+          DocProgressBar,
+          {
+            state,
+            actions,
+            blockMarkers,
+            expandedBlocks,
+            getBlockTitle
+          }
+        ),
+        /* @__PURE__ */ jsxs9("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: "11px", whiteSpace: "nowrap" }, children: [
+          state.currentBlockIndex + 1,
+          "/",
+          state.totalBlocks
+        ] }),
+        state.hasCaptions && /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            onClick: () => actions.cycleCaptionMode(),
+            style: {
+              background: state.captionMode !== "off" ? "rgba(255,255,255,0.2)" : "none",
+              border: "none",
+              color: state.captionMode !== "off" ? "white" : "rgba(255,255,255,0.5)",
+              cursor: "pointer",
+              padding: "8px",
+              fontSize: "12px",
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              borderRadius: "4px"
+            },
+            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__ */ 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__ */ jsx14(
+          "button",
+          {
+            onClick: actions.toggleFullscreen,
+            style: {
+              background: state.isFullscreen ? "rgba(255,255,255,0.2)" : "none",
+              border: "none",
+              color: state.isFullscreen ? "white" : "rgba(255,255,255,0.5)",
+              cursor: "pointer",
+              padding: "8px",
+              display: "flex",
+              alignItems: "center",
+              borderRadius: "4px"
+            },
+            title: state.isFullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)",
+            "aria-label": state.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+            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" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DocControlsSlideshow.tsx
+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__ */ jsxs10(
+    "div",
+    {
+      className: "doc-controls-slideshow",
+      "data-testid": "slideshow-controls",
+      style: {
+        position: "absolute",
+        bottom: "16px",
+        right: "16px",
+        display: "flex",
+        alignItems: "center",
+        gap: "2px",
+        background: "rgba(0, 0, 0, 0.65)",
+        borderRadius: "8px",
+        padding: "4px 6px",
+        zIndex: 100,
+        userSelect: "none",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)"
+      },
+      children: [
+        /* @__PURE__ */ jsx15(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              slideNav.prevSlide();
+            },
+            disabled: isFirst,
+            "data-testid": "slide-prev",
+            "aria-label": "Previous slide",
+            title: "Previous slide",
+            style: {
+              background: "none",
+              border: "none",
+              color: isFirst ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.9)",
+              cursor: isFirst ? "default" : "pointer",
+              padding: "6px 8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "4px",
+              transition: "background 0.15s"
+            },
+            onMouseEnter: (e) => {
+              if (!isFirst) e.currentTarget.style.background = "rgba(255,255,255,0.1)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "none";
+            },
+            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__ */ jsx15(
+          "span",
+          {
+            "data-testid": "slide-counter",
+            style: {
+              color: "rgba(255,255,255,0.9)",
+              fontSize: "13px",
+              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              fontVariantNumeric: "tabular-nums",
+              minWidth: "48px",
+              textAlign: "center",
+              padding: "0 4px",
+              letterSpacing: "0.02em"
+            },
+            children: totalBlocks > 0 ? `${currentBlockIndex + 1} / ${totalBlocks}` : "\u2014"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              slideNav.nextSlide();
+            },
+            disabled: isLast,
+            "data-testid": "slide-next",
+            "aria-label": "Next slide",
+            title: "Next slide",
+            style: {
+              background: "none",
+              border: "none",
+              color: isLast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.9)",
+              cursor: isLast ? "default" : "pointer",
+              padding: "6px 8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "4px",
+              transition: "background 0.15s"
+            },
+            onMouseEnter: (e) => {
+              if (!isLast) e.currentTarget.style.background = "rgba(255,255,255,0.1)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "none";
+            },
+            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" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/LinearDocView.tsx
+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 as DEFAULT_THEME2, deriveTemplateInputs } from "@bendyline/squisq/doc";
+import { extractPlainText } from "@bendyline/squisq/markdown";
+
+// src/MarkdownRenderer.tsx
+import { Fragment as Fragment2 } from "react";
+import {
+  sanitizeHtmlNodes as sanitizeHtmlNodes2,
+  sanitizeUrl
+} from "@bendyline/squisq/markdown";
+
+// src/InlineVideoPlayer.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function InlineVideoPlayer({
+  src,
+  basePath = "",
+  width,
+  height,
+  poster,
+  controls = true,
+  preload = "metadata",
+  className
+}) {
+  const resolvedSrc = useMediaUrl(src, basePath);
+  const resolvedPoster = useMediaUrl(poster ?? "", basePath);
+  const posterUrl = poster ? resolvedPoster : void 0;
+  if (!resolvedSrc) return null;
+  return /* @__PURE__ */ jsx16("span", { className: `squisq-inline-video-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx16(
+    "video",
+    {
+      src: resolvedSrc,
+      poster: posterUrl,
+      controls,
+      preload,
+      width,
+      height,
+      playsInline: true
+    }
+  ) });
+}
+
+// src/InlineAudioPlayer.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function InlineAudioPlayer({
+  src,
+  basePath = "",
+  controls = true,
+  preload = "metadata",
+  className
+}) {
+  const resolvedSrc = useMediaUrl(src, basePath);
+  if (!resolvedSrc) return null;
+  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 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__ */ jsx18(Fragment2, { children: node.value }, key);
+        }
+        const parts = node.value.split("\n");
+        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__ */ jsx18("em", { className: "squisq-md-em", children: renderInline(node.children, key, htmlPolicy) }, key);
+      case "strong":
+        return /* @__PURE__ */ jsx18("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, htmlPolicy) }, key);
+      case "delete":
+        return /* @__PURE__ */ jsx18("del", { className: "squisq-md-del", children: renderInline(node.children, key, htmlPolicy) }, key);
+      case "inlineCode":
+        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,
+            title: node.title ?? void 0,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: renderInline(node.children, key, htmlPolicy)
+          },
+          key
+        );
+      }
+      case "image":
+        return /* @__PURE__ */ jsx18(MdImage, { src: node.url, alt: node.alt ?? "", title: node.title ?? void 0 }, key);
+      case "break":
+        return /* @__PURE__ */ jsx18("br", {}, key);
+      case "inlineMath":
+        return /* @__PURE__ */ jsx18("code", { className: "squisq-md-inline-math", children: node.value }, key);
+      case "htmlInline":
+        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",
+              dangerouslySetInnerHTML: { __html: node.rawHtml }
+            },
+            key
+          );
+        }
+        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, htmlPolicy), `${key}h`) }, key);
+      case "footnoteReference":
+        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__ */ jsx18("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, htmlPolicy) }, key);
+      case "imageReference":
+        return /* @__PURE__ */ jsxs11("span", { className: "squisq-md-image-ref", children: [
+          "[",
+          node.alt ?? node.identifier,
+          "]"
+        ] }, key);
+      case "textDirective":
+        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, htmlPolicy) }, key);
+      case "mention":
+        return /* @__PURE__ */ jsxs11(
+          "span",
+          {
+            className: "squisq-md-mention mention",
+            "data-mention": "true",
+            "data-kind": node.targetKind,
+            "data-id": node.targetId,
+            "data-label": node.displayName,
+            children: [
+              "@",
+              node.displayName
+            ]
+          },
+          key
+        );
+      default:
+        return null;
+    }
+  });
+}
+function renderBlock(node, key, htmlPolicy = "sanitize") {
+  switch (node.type) {
+    case "paragraph":
+      return /* @__PURE__ */ jsx18("p", { className: "squisq-md-p", children: renderInline(node.children, key, htmlPolicy) }, key);
+    case "heading": {
+      const Tag = `h${node.depth}`;
+      return /* @__PURE__ */ jsx18(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, htmlPolicy) }, key);
+    }
+    case "blockquote":
+      return /* @__PURE__ */ jsx18("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, htmlPolicy) }, key);
+    case "list":
+      if (node.ordered) {
+        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__ */ 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__ */ 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__ */ jsx18("hr", { className: "squisq-md-hr" }, key);
+    case "table":
+      return renderTable(node.children, node.align, key, htmlPolicy);
+    case "htmlBlock":
+      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",
+            dangerouslySetInnerHTML: { __html: node.rawHtml }
+          },
+          key
+        );
+      }
+      return /* @__PURE__ */ jsx18("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, htmlPolicy), `${key}h`) }, key);
+    case "math":
+      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__ */ 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__ */ jsxs11(
+        "div",
+        {
+          className: `squisq-md-directive squisq-md-directive-${node.name}`,
+          "data-directive": node.name,
+          children: [
+            node.label && /* @__PURE__ */ jsx18("div", { className: "squisq-md-directive-label", children: node.label }),
+            renderBlocks(node.children, key, htmlPolicy)
+          ]
+        },
+        key
+      );
+    case "leafDirective":
+      return /* @__PURE__ */ jsx18(
+        "div",
+        {
+          className: `squisq-md-directive squisq-md-directive-${node.name}`,
+          "data-directive": node.name,
+          children: renderInline(node.children, key, htmlPolicy)
+        },
+        key
+      );
+    case "definitionList":
+      return /* @__PURE__ */ jsx18("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
+        if (child.type === "definitionTerm") {
+          return /* @__PURE__ */ jsx18("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, htmlPolicy) }, `${key}dt${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, htmlPolicy = "sanitize") {
+  const isTask = item.checked !== null && item.checked !== void 0;
+  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, htmlPolicy = "sanitize") {
+  const [headerRow, ...bodyRows] = rows;
+  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}`, htmlPolicy)
+      },
+      `${key}th${ci}`
+    )) }) }),
+    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}`, htmlPolicy)
+      },
+      `${key}td${ri}-${ci}`
+    )) }, `${key}tr${ri}`)) })
+  ] }, key);
+}
+function renderBlocks(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
+  return nodes.map((node, i) => renderBlock(node, `${keyPrefix}b${i}`, htmlPolicy));
+}
+function MdImage({ src, 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;
+    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",
+  id: "id",
+  title: "title",
+  style: "style",
+  // 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",
+  rel: "rel"
+};
+function reactPropsFromAttrs(attrs) {
+  const out = {};
+  for (const [name, value] of Object.entries(attrs)) {
+    const propName = PASSTHROUGH_ATTRS[name];
+    if (!propName) continue;
+    if (propName === "style") {
+      out["data-style"] = value;
+      continue;
+    }
+    out[propName] = value;
+  }
+  return out;
+}
+function renderHtmlElement(el, key) {
+  const tagName = el.tagName.toLowerCase();
+  if (DANGEROUS_HTML_TAGS.has(tagName)) return null;
+  if (tagName === "video") {
+    return /* @__PURE__ */ jsx18(
+      InlineVideoPlayer,
+      {
+        src: el.attributes.src ?? "",
+        width: el.attributes.width,
+        height: el.attributes.height,
+        poster: el.attributes.poster,
+        controls: "controls" in el.attributes,
+        preload: el.attributes.preload === "none" || el.attributes.preload === "metadata" || el.attributes.preload === "auto" ? el.attributes.preload : void 0
+      },
+      key
+    );
+  }
+  if (tagName === "audio") {
+    return /* @__PURE__ */ jsx18(
+      InlineAudioPlayer,
+      {
+        src: el.attributes.src ?? "",
+        controls: "controls" in el.attributes,
+        preload: el.attributes.preload === "none" || el.attributes.preload === "metadata" || el.attributes.preload === "auto" ? el.attributes.preload : void 0
+      },
+      key
+    );
+  }
+  const Tag = tagName;
+  const props = reactPropsFromAttrs(el.attributes);
+  if (el.selfClosing) {
+    return /* @__PURE__ */ jsx18(Tag, { ...props }, key);
+  }
+  return /* @__PURE__ */ jsx18(Tag, { ...props, children: renderHtmlNodes(el.children, `${key}c`) }, key);
+}
+function renderHtmlNodes(nodes, keyPrefix) {
+  return nodes.map((node, i) => {
+    const key = `${keyPrefix}${i}`;
+    switch (node.type) {
+      case "htmlElement":
+        return renderHtmlElement(node, key);
+      case "htmlText":
+        return /* @__PURE__ */ jsx18(Fragment2, { children: node.value }, key);
+      case "htmlComment":
+        return null;
+      default:
+        return null;
+    }
+  });
+}
+function MarkdownRenderer({
+  nodes,
+  className,
+  htmlPolicy = "sanitize"
+}) {
+  if (!nodes || nodes.length === 0) return null;
+  return /* @__PURE__ */ jsx18("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", htmlPolicy) });
+}
+
+// src/LinearDocView.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function isAnnotatedBlock(block) {
+  const annotation = block.sourceHeading?.templateAnnotation;
+  if (!annotation) return false;
+  return !!annotation.template && hasTemplate(annotation.template);
+}
+function countAll(blocks) {
+  let count = 0;
+  for (const b of blocks) {
+    count++;
+    if (b.children) count += countAll(b.children);
+  }
+  return count;
+}
+function BlockSection({ block, basePath, viewport, renderContext, blockIndex }) {
+  const isAnnotated = isAnnotatedBlock(block);
+  const visualBlock = useMemo8(() => {
+    if (!isAnnotated) return null;
+    const annotation = block.sourceHeading.templateAnnotation;
+    const headingText = extractPlainText(block.sourceHeading);
+    const templateBlock = {
+      id: block.id,
+      template: annotation.template,
+      startTime: 0,
+      duration: 1,
+      audioSegment: 0,
+      title: headingText,
+      ...deriveTemplateInputs(
+        annotation.template ?? "sectionHeader",
+        headingText,
+        block.contents,
+        {
+          placeholders: true
+        }
+      ) ?? {},
+      ...annotation.params,
+      ...block.templateOverrides
+    };
+    const ctx = {
+      ...renderContext,
+      blockIndex
+    };
+    const layers = getLayers(templateBlock, ctx);
+    return {
+      ...block,
+      layers,
+      template: annotation.template
+    };
+  }, [block, isAnnotated, renderContext, blockIndex]);
+  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__ */ jsx19(MarkdownRenderer, { nodes: [block.sourceHeading] }),
+        isAnnotated && visualBlock && /* @__PURE__ */ jsx19("div", { className: "squisq-linear-card", children: /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: "squisq-linear-card-svg",
+            style: {
+              width: "100%",
+              aspectRatio: `${viewport.width} / ${viewport.height}`,
+              overflow: "hidden",
+              marginBottom: "1em"
+            },
+            children: /* @__PURE__ */ jsx19(
+              BlockRenderer,
+              {
+                block: visualBlock,
+                blockTime: 0,
+                basePath,
+                viewport
+              }
+            )
+          }
+        ) }),
+        !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,
+            basePath,
+            viewport,
+            renderContext,
+            blockIndex: blockIndex + i + 1
+          },
+          child.id
+        )) })
+      ]
+    }
+  );
+}
+function LinearDocView({
+  doc,
+  basePath = "/",
+  viewport,
+  className,
+  theme,
+  surface,
+  thinMargins = false,
+  imageDisplayMode = "inline"
+}) {
+  const activeViewport = viewport ?? VIEWPORT_PRESETS3.landscape;
+  const totalBlocks = useMemo8(() => countAll(doc.blocks), [doc.blocks]);
+  const autoSurface = useAutoSurface(surface === "auto");
+  const resolvedSurface = surface === "auto" ? autoSurface : surface;
+  const renderContext = useMemo8(() => {
+    const baseTheme = theme ?? DEFAULT_THEME2;
+    const effectiveTheme = resolvedSurface ? applySurface(baseTheme, resolvedSurface) : baseTheme;
+    return {
+      theme: effectiveTheme,
+      viewport: activeViewport,
+      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;
+  const bgColor = activeTheme.colors.background;
+  const textColor = activeTheme.colors.text;
+  const mutedColor = activeTheme.colors.textMuted;
+  const primaryColor = activeTheme.colors.primary;
+  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__ */ jsx19(
+    "div",
+    {
+      className: `squisq-linear ${className || ""}`,
+      style: {
+        width: "100%",
+        // Thin-margins mode is the "embedded in someone else's container"
+        // signal (chat bubble, sidebar preview). Fit to content there so
+        // the host's bubble doesn't render a tall empty box when the doc
+        // is short. Standalone mode keeps height:100% for full-viewport
+        // scrolling.
+        height: thinMargins ? "auto" : "100%",
+        overflowY: thinMargins ? "visible" : "auto",
+        overflowX: "hidden",
+        background: bgColor
+      },
+      children: /* @__PURE__ */ jsxs12(
+        "div",
+        {
+          className: `squisq-linear-content squisq-md${thinMargins ? " squisq-linear-content--thin" : ""}${imageDisplayMode === "thumbnail" ? " squisq-linear-content--thumbnail-images" : ""}`,
+          style: {
+            // Thin-margins mode drops the 720px reading column + generous
+            // page padding (right for standalone docs) in favor of a tight
+            // layout that hugs its container (right for chat bubbles and
+            // sidebar previews).
+            maxWidth: thinMargins ? "none" : "720px",
+            margin: thinMargins ? "0" : "0 auto",
+            padding: thinMargins ? "0" : "24px 16px",
+            lineHeight: lineHt,
+            fontSize: "16px",
+            fontFamily: bodyFont,
+            color: textColor,
+            // CSS custom properties for MarkdownRenderer / nested elements
+            "--squisq-linear-title-font": titleFont,
+            "--squisq-linear-body-font": bodyFont,
+            "--squisq-linear-text": textColor,
+            "--squisq-linear-muted": mutedColor,
+            "--squisq-linear-primary": primaryColor,
+            "--squisq-linear-bg": bgColor
+          },
+          children: [
+            /* @__PURE__ */ jsx19("style", { children: `
+          .squisq-linear-content h1,
+          .squisq-linear-content h2,
+          .squisq-linear-content h3,
+          .squisq-linear-content h4,
+          .squisq-linear-content h5,
+          .squisq-linear-content h6 {
+            font-family: var(--squisq-linear-title-font);
+            color: var(--squisq-linear-text);
+            margin-top: 1.2em;
+            margin-bottom: 0.4em;
+          }
+          .squisq-linear-content h1 { font-size: 2em; }
+          .squisq-linear-content h2 { font-size: 1.5em; }
+          .squisq-linear-content h3 { font-size: 1.25em; }
+          .squisq-linear-content p {
+            margin-bottom: 0.75em;
+          }
+          .squisq-linear-content ul,
+          .squisq-linear-content ol {
+            padding-left: 2em;
+            margin-bottom: 0.75em;
+          }
+          .squisq-linear-content li {
+            margin-bottom: 0.3em;
+          }
+          .squisq-linear-content a {
+            /* Blend the theme's primary toward the body text color so
+               links stay theme-flavored but always have enough contrast
+               against the background. Some themes (e.g. Gezellig) pick a
+               mid-tone primary that's nearly invisible on a dark page
+               without this lift. */
+            color: color-mix(in srgb, var(--squisq-linear-primary) 65%, var(--squisq-linear-text));
+            text-decoration: underline;
+            text-decoration-thickness: 1px;
+            text-underline-offset: 2px;
+          }
+          .squisq-linear-content a:hover {
+            color: var(--squisq-linear-primary);
+          }
+          .squisq-linear-content code {
+            color: var(--squisq-linear-primary);
+            font-size: 0.9em;
+            padding: 0.15em 0.3em;
+            border-radius: 3px;
+            background: rgba(128, 128, 128, 0.15);
+          }
+          .squisq-linear-content pre {
+            padding: 1em;
+            border-radius: 6px;
+            background: rgba(0, 0, 0, 0.2);
+            overflow-x: auto;
+            margin-bottom: 0.75em;
+          }
+          .squisq-linear-content pre code {
+            padding: 0;
+            background: none;
+          }
+          .squisq-linear-content blockquote {
+            border-left: 3px solid var(--squisq-linear-muted);
+            color: var(--squisq-linear-muted);
+            padding-left: 1em;
+            margin-left: 0;
+            margin-bottom: 0.75em;
+          }
+          .squisq-linear-content hr {
+            border: none;
+            border-top: 1px solid var(--squisq-linear-muted);
+            margin: 1.5em 0;
+          }
+          .squisq-linear-content img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 6px;
+            margin: 0.5em 0;
+          }
+          .squisq-linear-content--thumbnail-images img {
+            max-width: 100px;
+            max-height: 100px;
+            width: auto;
+            height: auto;
+            object-fit: contain;
+            display: block;
+          }
+          .squisq-linear-content strong {
+            font-weight: 700;
+          }
+          .squisq-linear-content em {
+            font-style: italic;
+          }
+          .squisq-linear-content table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 1em 0;
+            font-size: 0.95em;
+          }
+          .squisq-linear-content thead th {
+            background: var(--squisq-linear-primary);
+            color: var(--squisq-linear-bg);
+            font-family: var(--squisq-linear-title-font);
+            font-weight: 600;
+            padding: 10px 14px;
+            text-align: left;
+          }
+          .squisq-linear-content tbody td {
+            padding: 8px 14px;
+            border-bottom: 1px solid color-mix(in srgb, var(--squisq-linear-muted) 30%, transparent);
+          }
+          .squisq-linear-content tbody tr:hover {
+            background: color-mix(in srgb, var(--squisq-linear-primary) 8%, transparent);
+          }
+        ` }),
+            doc.blocks.map((block, i) => /* @__PURE__ */ jsx19(
+              BlockSection,
+              {
+                block,
+                basePath,
+                viewport: activeViewport,
+                renderContext,
+                blockIndex: i
+              },
+              block.id
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/DocPlayer.tsx
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var SMALL_WORDS = /* @__PURE__ */ new Set([
+  "a",
+  "an",
+  "the",
+  "and",
+  "but",
+  "or",
+  "for",
+  "nor",
+  "on",
+  "at",
+  "to",
+  "in",
+  "of",
+  "by",
+  "is"
+]);
+function buildSegmentTitleMap(script) {
+  const map = /* @__PURE__ */ new Map();
+  for (const block of script.blocks) {
+    if (isTemplateBlock2(block) && block.template === "sectionHeader" && "title" in block) {
+      const segIdx = block.audioSegment;
+      if (!map.has(segIdx)) {
+        map.set(segIdx, block.title);
+      }
+    }
+  }
+  for (let i = 0; i < script.audio.segments.length; i++) {
+    if (!map.has(i)) {
+      const name = script.audio.segments[i].name;
+      if (name === "intro" || name.includes("intro")) {
+        map.set(i, "Introduction");
+      } else if (name === "flight-context" || name.includes("flight-context")) {
+        map.set(i, "Flight Context");
+      } else {
+        const words = name.split("-");
+        const titled = words.map(
+          (w, idx) => idx === 0 || !SMALL_WORDS.has(w) ? w.charAt(0).toUpperCase() + w.slice(1) : w
+        ).join(" ");
+        map.set(i, titled);
+      }
+    }
+  }
+  return map;
+}
+function DocPlayer({
+  script,
+  basePath,
+  renderMode = false,
+  autoPlay = false,
+  onEnded,
+  onTimeUpdate,
+  audioProvider: externalAudioProvider,
+  showControls = true,
+  showScrubber = false,
+  muted = false,
+  captionsEnabled: captionsEnabledProp,
+  onCaptionsToggle,
+  onPlaybackStateChange,
+  onControlsReady,
+  isFullscreen = false,
+  onFullscreenToggle,
+  onBlockMarkers,
+  forceViewport,
+  displayMode = "video",
+  theme,
+  surface,
+  captionStyle = "standard"
+}) {
+  const isSlideshowMode = displayMode === "slideshow";
+  const isLinearMode = displayMode === "linear";
+  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 = useMemo9(() => {
+    if (typeof window === "undefined") return false;
+    const params = new URLSearchParams(window.location.search);
+    return params.get("debug") === "true";
+  }, []);
+  const internalAudio = useAudioSync(audioRef, script.audio, basePath);
+  const audio = externalAudioProvider || internalAudio;
+  const {
+    currentTime,
+    isPlaying,
+    currentSegment,
+    totalDuration,
+    isEnded,
+    isReady: isAudioReady,
+    isAvailable,
+    unavailableMessage,
+    play,
+    pause,
+    toggle,
+    seekTo,
+    skipToSegment: _skipToSegment,
+    restart
+  } = audio;
+  const mediaSchedule = useMemo9(() => resolveMediaSchedule(script), [script]);
+  const currentTimeRef = useRef6(currentTime);
+  currentTimeRef.current = currentTime;
+  const totalDurationRef = useRef6(totalDuration);
+  totalDurationRef.current = totalDuration;
+  const expandedBlocksLenRef = useRef6(0);
+  const handleContainerClick = useCallback5(
+    (e) => {
+      if (renderMode || isSlideshowMode || isLinearMode) return;
+      const target = e.target;
+      if (target.closest(
+        "button, a, input, .doc-player__controls, .doc-player__scrubber, .doc-controls-sidebar, .doc-controls-slideshow"
+      ))
+        return;
+      toggle();
+      const nextState = isPlaying ? "play" : "pause";
+      setTapFeedback(nextState);
+      clearTimeout(tapFeedbackTimer.current);
+      tapFeedbackTimer.current = setTimeout(() => setTapFeedback(null), 600);
+    },
+    [renderMode, toggle, isPlaying, isSlideshowMode, isLinearMode]
+  );
+  const autoSurface = useAutoSurface(surface === "auto");
+  const resolvedSurface = surface === "auto" ? autoSurface : surface;
+  const effectiveTheme = useMemo9(() => {
+    const base = theme ?? DEFAULT_THEME3;
+    return resolvedSurface ? applySurface2(base, resolvedSurface) : base;
+  }, [theme, resolvedSurface]);
+  const {
+    currentBlock,
+    currentBlockIndex,
+    previousBlock,
+    isEntering,
+    isExiting,
+    blockTime,
+    blockProgress: _blockProgress,
+    docProgress,
+    nextBlock: _nextBlock,
+    prevBlock: _prevBlock,
+    blocks: expandedBlocks
+  } = useDocPlayback(script, currentTime, activeViewport, renderMode, effectiveTheme);
+  const coverBlock = useMemo9(() => {
+    const startBlockConfig = script.startBlock;
+    if (!startBlockConfig) return null;
+    const context = createTemplateContext(effectiveTheme, 0, 1, activeViewport);
+    const layers = expandCoverBlock(startBlockConfig, context);
+    return {
+      id: "cover-block",
+      startTime: -1,
+      // Not part of timeline
+      duration: 0,
+      // Static
+      audioSegment: -1,
+      layers
+    };
+  }, [script.startBlock, activeViewport, effectiveTheme]);
+  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(() => {
+    if (isPlaying && coverWasShowing.current && coverBlock && !renderMode) {
+      coverWasShowing.current = false;
+      hasPlayedOnce.current = true;
+      setCoverGraceActive(true);
+      coverGraceTimer.current = setTimeout(() => setCoverGraceActive(false), 3e3);
+    }
+  }, [isPlaying, coverBlock, renderMode]);
+  useEffect7(() => () => clearTimeout(coverGraceTimer.current), []);
+  const showCoverBlock = !isSlideshowMode && !isLinearMode && coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
+  const hasAutoPlayed = useRef6(false);
+  useEffect7(() => {
+    if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
+      hasAutoPlayed.current = true;
+      play();
+    }
+  }, [isAudioReady, autoPlay, play]);
+  useEffect7(() => {
+    onTimeUpdate?.(currentTime);
+  }, [currentTime, onTimeUpdate]);
+  useEffect7(() => {
+    if (isEnded) {
+      onEnded?.();
+    }
+  }, [isEnded, onEnded]);
+  useEffect7(() => {
+    if ((renderMode || isDebugMode) && typeof window !== "undefined") {
+      const w = window;
+      w.seekTo = (time) => {
+        seekTo(time);
+        return new Promise((resolve) => {
+          requestAnimationFrame(() => {
+            let blockStartTime = 0;
+            for (let i = expandedBlocks.length - 1; i >= 0; i--) {
+              if (time >= expandedBlocks[i].startTime) {
+                blockStartTime = expandedBlocks[i].startTime;
+                break;
+              }
+            }
+            const elapsedMs = (time - blockStartTime) * 1e3;
+            document.getAnimations().forEach((anim) => {
+              const target = anim.effect?.target;
+              if (!target) return;
+              if (target.closest(".doc-player__block--active")) {
+                anim.currentTime = Math.max(0, elapsedMs);
+              } else if (target.closest(".doc-player__block--previous")) {
+                anim.currentTime = Math.max(0, elapsedMs);
+              }
+            });
+            const blockElapsed = time - blockStartTime;
+            const videoSeekPromises = [];
+            const activeBlockEl = document.querySelector(".doc-player__block--active");
+            if (activeBlockEl) {
+              const videos = activeBlockEl.querySelectorAll("video[data-clip-start]");
+              videos.forEach((el) => {
+                const video = el;
+                const clipStart = parseFloat(video.dataset.clipStart || "0");
+                const clipEnd = parseFloat(video.dataset.clipEnd || "0");
+                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(
+                  new Promise((r) => {
+                    if (Math.abs(video.currentTime - targetTime) < 0.1) {
+                      r();
+                    } else {
+                      video.addEventListener("seeked", () => r(), { once: true });
+                      setTimeout(r, 200);
+                    }
+                  })
+                );
+              });
+            }
+            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());
+            });
+          });
+        });
+      };
+      w.getDuration = () => {
+        const mediaDuration = getDocPlaybackDuration(script);
+        if (totalDuration > 0) return Math.max(totalDuration, mediaDuration);
+        return mediaDuration;
+      };
+      w.getBlocks = () => expandedBlocks.map((s) => ({
+        id: s.id,
+        template: s.template ?? "raw",
+        startTime: s.startTime,
+        duration: s.duration
+      }));
+      w.getAudioSegments = () => script.audio.segments.map((seg) => ({
+        src: seg.src,
+        name: seg.name,
+        duration: seg.duration,
+        startTime: seg.startTime
+      }));
+      w.getCaptions = () => script.captions?.phrases?.map((p) => ({
+        text: p.text,
+        startTime: p.startTime,
+        endTime: p.endTime
+      })) || [];
+      w.getChapters = () => {
+        const titleMap = buildSegmentTitleMap(script);
+        return script.audio.segments.map((seg, i) => ({
+          title: titleMap.get(i) || seg.name,
+          startTime: seg.startTime,
+          duration: seg.duration
+        }));
+      };
+      w.showCover = () => {
+        setCoverForced(true);
+        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+      };
+      w.hideCover = () => {
+        setCoverForced(false);
+        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+      };
+      w.hasCoverBlock = () => !!coverBlock;
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        const w = window;
+        delete w.seekTo;
+        delete w.getDuration;
+        delete w.getBlocks;
+        delete w.getAudioSegments;
+        delete w.getCaptions;
+        delete w.getChapters;
+        delete w.showCover;
+        delete w.hideCover;
+        delete w.hasCoverBlock;
+      }
+    };
+  }, [renderMode, isDebugMode, seekTo, totalDuration, expandedBlocks, coverBlock]);
+  const defaultMode = captionsEnabledProp === false ? "off" : captionStyle || "standard";
+  const [captionMode, setCaptionMode] = useState6(defaultMode);
+  const captionsEnabled = captionMode !== "off";
+  const activeCaptionStyle = captionMode === "social" ? "social" : "standard";
+  const setCaptionsEnabled = useCallback5(
+    (enabled) => {
+      setCaptionMode(enabled ? captionStyle || "standard" : "off");
+      onCaptionsToggle?.(enabled);
+    },
+    [onCaptionsToggle, captionStyle]
+  );
+  const cycleCaptionMode = useCallback5(() => {
+    setCaptionMode((prev) => {
+      const next = prev === "off" ? "standard" : prev === "standard" ? "social" : "off";
+      onCaptionsToggle?.(next !== "off");
+      return next;
+    });
+  }, [onCaptionsToggle]);
+  const hasCaptions = script.captions && script.captions.phrases.length > 0;
+  const segmentTitleMap = useMemo9(() => buildSegmentTitleMap(script), [script]);
+  const playbackState = useMemo9(
+    () => ({
+      isPlaying,
+      currentTime,
+      totalDuration,
+      currentBlockIndex,
+      totalBlocks: expandedBlocks.length,
+      docProgress,
+      hasCaptions: !!hasCaptions,
+      captionsEnabled,
+      captionMode,
+      isFullscreen,
+      currentSegmentIndex: currentSegment,
+      currentSegmentName: segmentTitleMap.get(currentSegment) ?? script.audio.segments[currentSegment]?.name ?? null,
+      currentBlock: currentBlock ?? null
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- script.audio.segments is stable within a given script
+    [
+      isPlaying,
+      currentTime,
+      totalDuration,
+      currentBlockIndex,
+      expandedBlocks.length,
+      docProgress,
+      hasCaptions,
+      captionsEnabled,
+      captionMode,
+      isFullscreen,
+      currentSegment,
+      segmentTitleMap,
+      currentBlock
+    ]
+  );
+  const playbackActions = useMemo9(
+    () => ({
+      toggle,
+      restart,
+      seekTo,
+      setCaptionsEnabled,
+      cycleCaptionMode,
+      toggleFullscreen: onFullscreenToggle
+    }),
+    [toggle, restart, seekTo, setCaptionsEnabled, cycleCaptionMode, onFullscreenToggle]
+  );
+  const slideNavActions = useMemo9(
+    () => ({
+      nextSlide: () => {
+        if (currentBlockIndex < expandedBlocks.length - 1) {
+          const target = expandedBlocks[currentBlockIndex + 1];
+          if (target) {
+            seekTo(target.startTime);
+            pause();
+          }
+        }
+      },
+      prevSlide: () => {
+        if (currentBlockIndex > 0) {
+          const target = expandedBlocks[currentBlockIndex - 1];
+          if (target) {
+            seekTo(target.startTime);
+            pause();
+          }
+        }
+      },
+      goToSlide: (index) => {
+        if (index >= 0 && index < expandedBlocks.length) {
+          const target = expandedBlocks[index];
+          if (target) {
+            seekTo(target.startTime);
+            pause();
+          }
+        }
+      }
+    }),
+    [currentBlockIndex, expandedBlocks, seekTo, pause]
+  );
+  useEffect7(() => {
+    onPlaybackStateChange?.(playbackState);
+  }, [playbackState, onPlaybackStateChange]);
+  useEffect7(() => {
+    onControlsReady?.({ play, pause, ...playbackActions });
+  }, [play, pause, playbackActions, onControlsReady]);
+  const getBlockTitle = useCallback5((block) => {
+    const docBlock = block;
+    if (isTemplateBlock2(docBlock)) {
+      const props = docBlock;
+      if (typeof props.title === "string") return props.title;
+      if (typeof props.stat === "string") return props.stat;
+      if (typeof props.quote === "string") {
+        const firstLine = props.quote.split("\n")[0];
+        if (firstLine.length <= 30) return firstLine;
+        return firstLine.slice(0, 27) + "...";
+      }
+      if (typeof props.date === "string") return props.date;
+      if (typeof props.fact === "string") return props.fact;
+    }
+    if (block.layers && Array.isArray(block.layers)) {
+      const textLayer = block.layers.find((l) => l.type === "text");
+      if (textLayer?.content?.text) {
+        const firstLine = textLayer.content.text.split("\n")[0];
+        if (firstLine.length <= 30) return firstLine;
+        return firstLine.slice(0, 27) + "...";
+      }
+    }
+    return block.id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  }, []);
+  const blockMarkers = useMemo9(() => {
+    if (!totalDuration || !expandedBlocks.length) return [];
+    let prevSegment = -1;
+    return expandedBlocks.map((block, index) => {
+      const isSectionStart = block.audioSegment !== prevSegment;
+      prevSegment = block.audioSegment;
+      return {
+        block,
+        index,
+        position: block.startTime / totalDuration * 100,
+        title: getBlockTitle(block),
+        isSectionStart
+      };
+    });
+  }, [expandedBlocks, totalDuration, getBlockTitle]);
+  useEffect7(() => {
+    if (blockMarkers.length > 0) {
+      onBlockMarkers?.(blockMarkers);
+    }
+  }, [blockMarkers, onBlockMarkers]);
+  expandedBlocksLenRef.current = expandedBlocks.length;
+  const handleKeyDown = useCallback5(
+    (e) => {
+      const activeEl = document.activeElement;
+      if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.tagName === "SELECT")) {
+        return;
+      }
+      if (isLinearMode) return;
+      if (isSlideshowMode) {
+        switch (e.key) {
+          case "ArrowRight":
+          case "ArrowDown":
+          case " ":
+            e.preventDefault();
+            slideNavActions.nextSlide();
+            break;
+          case "ArrowLeft":
+          case "ArrowUp":
+            e.preventDefault();
+            slideNavActions.prevSlide();
+            break;
+          case "Home":
+            e.preventDefault();
+            slideNavActions.goToSlide(0);
+            break;
+          case "End":
+            e.preventDefault();
+            slideNavActions.goToSlide(expandedBlocksLenRef.current - 1);
+            break;
+        }
+      } else {
+        switch (e.key) {
+          case " ":
+            e.preventDefault();
+            toggle();
+            break;
+          case "ArrowRight":
+            seekTo(Math.min(currentTimeRef.current + 10, totalDurationRef.current));
+            break;
+          case "ArrowLeft":
+            seekTo(Math.max(currentTimeRef.current - 10, 0));
+            break;
+        }
+      }
+    },
+    [isSlideshowMode, isLinearMode, toggle, seekTo, slideNavActions]
+  );
+  useEffect7(() => {
+    if (renderMode) return;
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown, renderMode]);
+  if (isLinearMode) {
+    return /* @__PURE__ */ jsx20(
+      "div",
+      {
+        ref: containerRef,
+        className: "doc-player doc-player--linear",
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx20(
+          LinearDocView,
+          {
+            doc: script,
+            basePath,
+            viewport: activeViewport,
+            theme,
+            surface
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      ref: containerRef,
+      className: "doc-player",
+      onClick: handleContainerClick,
+      style: {
+        position: "relative",
+        width: "100%",
+        aspectRatio: `${activeViewport.width} / ${activeViewport.height}`,
+        margin: "0 auto",
+        overflow: "hidden",
+        cursor: renderMode ? void 0 : "pointer"
+      },
+      children: [
+        /* @__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,
+              blockTime: 0,
+              basePath,
+              isEntering: false,
+              viewport: activeViewport
+            }
+          ) }),
+          !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
+            }
+          ) }, previousBlock.id),
+          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx20("div", { className: "doc-player__block doc-player__block--active", children: /* @__PURE__ */ jsx20(
+            BlockRenderer,
+            {
+              block: currentBlock,
+              blockTime,
+              basePath,
+              isEntering,
+              viewport: activeViewport,
+              isPlaying
+            }
+          ) }, currentBlock.id),
+          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx20(
+            CaptionOverlay,
+            {
+              captions: script.captions,
+              currentTime,
+              enabled: captionsEnabled && (renderMode || isPlaying || currentTime > 0),
+              fontSize: 16,
+              captionStyle: activeCaptionStyle,
+              theme: effectiveTheme,
+              viewport: activeViewport
+            }
+          ),
+          isDebugMode && /* @__PURE__ */ jsxs13(
+            "div",
+            {
+              className: "doc-player__debug",
+              style: {
+                position: "absolute",
+                top: "8px",
+                right: "8px",
+                padding: "8px 12px",
+                background: "rgba(0, 0, 0, 0.85)",
+                borderRadius: "6px",
+                color: "#00ff00",
+                fontFamily: "monospace",
+                fontSize: "11px",
+                lineHeight: "1.5",
+                zIndex: 200,
+                maxWidth: "280px",
+                pointerEvents: "none",
+                textAlign: "left"
+              },
+              children: [
+                /* @__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__ */ jsx20("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
+                ] }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "block:" }),
+                  " ",
+                  currentBlockIndex + 1,
+                  "/",
+                  expandedBlocks.length,
+                  " ",
+                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
+                    "(",
+                    currentBlock?.id || "none",
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "time:" }),
+                  " ",
+                  currentTime.toFixed(2),
+                  "s /",
+                  " ",
+                  totalDuration.toFixed(1),
+                  "s",
+                  " ",
+                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
+                    "(progress: ",
+                    (docProgress * 100).toFixed(1),
+                    "%, scriptDur:",
+                    " ",
+                    script.duration.toFixed(1),
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "blockTime:" }),
+                  " ",
+                  blockTime.toFixed(2),
+                  "s /",
+                  " ",
+                  (currentBlock?.duration || 0).toFixed(1),
+                  "s"
+                ] }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "segment:" }),
+                  " ",
+                  currentSegment,
+                  "/",
+                  script.audio.segments.length - 1,
+                  " ",
+                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
+                    "(",
+                    script.audio.segments[currentSegment]?.name || "none",
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "viewport:" }),
+                  " ",
+                  activeViewport.name || `${activeViewport.width}x${activeViewport.height}`,
+                  " ",
+                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
+                    "(",
+                    orientation,
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "playing:" }),
+                  " ",
+                  /* @__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__ */ jsxs13(Fragment3, { children: [
+                    /* @__PURE__ */ jsxs13("div", { children: [
+                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "captions:" }),
+                      " ",
+                      script.captions?.phrases.length || 0,
+                      " phrases",
+                      " ",
+                      /* @__PURE__ */ jsxs13("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
+                        "(",
+                        captionsEnabled ? "on" : "off",
+                        ")"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs13("div", { children: [
+                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "cc.enabled:" }),
+                      " ",
+                      /* @__PURE__ */ jsx20("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
+                      " ",
+                      /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
+                        "(playing=",
+                        String(isPlaying),
+                        " t>0=",
+                        String(currentTime > 0),
+                        ")"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs13("div", { children: [
+                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "cc.phrase:" }),
+                      " ",
+                      /* @__PURE__ */ jsx20("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
+                    ] }),
+                    debugPhrase && /* @__PURE__ */ jsxs13("div", { children: [
+                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "cc.range:" }),
+                      " ",
+                      /* @__PURE__ */ jsxs13("span", { style: { color: "#60a5fa" }, children: [
+                        debugPhrase.startTime.toFixed(2),
+                        "-",
+                        debugPhrase.endTime.toFixed(2)
+                      ] })
+                    ] })
+                  ] });
+                })()
+              ]
+            }
+          )
+        ] }),
+        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            className: "doc-player__unavailable",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+              gap: "16px",
+              background: "rgba(0, 0, 0, 0.7)",
+              color: "rgba(255, 255, 255, 0.9)",
+              fontSize: "14px",
+              zIndex: 50
+            },
+            children: [
+              /* @__PURE__ */ jsx20("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
+              /* @__PURE__ */ jsx20("span", { children: unavailableMessage })
+            ]
+          }
+        ),
+        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx20(
+          DocControlsOverlay,
+          {
+            state: playbackState,
+            actions: playbackActions,
+            blockMarkers,
+            expandedBlocks,
+            getBlockTitle
+          }
+        ),
+        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "doc-player__scrubber",
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              padding: "12px 16px 8px",
+              background: "linear-gradient(transparent, rgba(0,0,0,0.6))",
+              display: "flex",
+              alignItems: "center",
+              zIndex: 100
+            },
+            children: /* @__PURE__ */ jsx20(
+              DocProgressBar,
+              {
+                state: playbackState,
+                actions: playbackActions,
+                blockMarkers,
+                expandedBlocks,
+                getBlockTitle
+              }
+            )
+          }
+        ),
+        !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 jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+function DocControlsBottom({
+  state,
+  actions,
+  blockMarkers,
+  expandedBlocks,
+  getBlockTitle
+}) {
+  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__ */ 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__ */ jsx21(
+      "button",
+      {
+        className: "bottom-ctrl-btn bottom-play-btn",
+        onClick: actions.toggle,
+        "aria-label": state.isPlaying ? "Pause" : "Play",
+        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__ */ jsxs14("span", { className: "bottom-time", children: [
+      formatTime(state.currentTime),
+      " / ",
+      formatTime(state.totalDuration)
+    ] }),
+    /* @__PURE__ */ jsx21(
+      DocProgressBar,
+      {
+        state,
+        actions,
+        blockMarkers,
+        expandedBlocks,
+        getBlockTitle
+      }
+    ),
+    /* @__PURE__ */ jsxs14("span", { className: "bottom-segment", children: [
+      state.currentBlockIndex + 1,
+      "/",
+      state.totalBlocks
+    ] }),
+    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__ */ 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 jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+function DocControlsSidebar({ state, actions }) {
+  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__ */ 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__ */ jsx22(
+      "button",
+      {
+        className: "sidebar-ctrl-btn sidebar-play-btn",
+        onClick: actions.toggle,
+        "aria-label": state.isPlaying ? "Pause" : "Play",
+        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__ */ 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__ */ jsxs15("div", { className: "sidebar-segment", children: [
+      state.currentBlockIndex + 1,
+      "/",
+      state.totalBlocks
+    ] }),
+    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__ */ 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__ */ 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__ */ 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 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,
+  totalDuration: 0,
+  currentBlockIndex: 0,
+  totalBlocks: 0,
+  docProgress: 0,
+  hasCaptions: false,
+  captionsEnabled: false,
+  captionMode: "off",
+  currentSegmentIndex: 0,
+  currentSegmentName: null,
+  currentBlock: null
+};
+function DocPlayerWithSidebar({
+  script,
+  basePath,
+  autoPlay = false,
+  onEnded,
+  onTimeUpdate,
+  audioProvider,
+  muted,
+  captionsEnabled,
+  isFullscreen,
+  onFullscreenToggle,
+  forceViewport,
+  onPlayingChange
+}) {
+  const stateRef = useRef7(DEFAULT_STATE);
+  const actionsRef = useRef7(null);
+  const wasPlayingRef = useRef7(false);
+  const [, setTick] = useState7(0);
+  const handleStateChange = useCallback6(
+    (state) => {
+      stateRef.current = state;
+      if (onPlayingChange && state.isPlaying !== wasPlayingRef.current) {
+        wasPlayingRef.current = state.isPlaying;
+        onPlayingChange(state.isPlaying);
+      }
+    },
+    [onPlayingChange]
+  );
+  const handleControlsReady = useCallback6(
+    (controls) => {
+      const isFirst = !actionsRef.current;
+      actionsRef.current = controls;
+      if (isFirst) setTick((t) => t + 1);
+    },
+    []
+  );
+  useEffect8(() => {
+    const interval = setInterval(() => {
+      setTick((t) => t + 1);
+    }, 250);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsxs16("div", { className: "doc-player-sidebar-layout", children: [
+    /* @__PURE__ */ jsx23("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx23(
+      DocPlayer,
+      {
+        script,
+        basePath,
+        autoPlay,
+        onEnded,
+        onTimeUpdate,
+        audioProvider,
+        muted,
+        captionsEnabled,
+        showControls: isFullscreen,
+        showScrubber: !isFullscreen,
+        onPlaybackStateChange: handleStateChange,
+        onControlsReady: handleControlsReady,
+        isFullscreen,
+        onFullscreenToggle,
+        forceViewport
+      }
+    ) }),
+    actionsRef.current && /* @__PURE__ */ jsx23(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
+  ] });
+}
+
+// src/jsonView/useJsonViewTokens.ts
+import { useMemo as useMemo10 } from "react";
+import {
+  applySurface as applySurface3,
+  resolveFontFamily as resolveFontFamily3
+} from "@bendyline/squisq/schemas";
+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 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");
+    const monoFont = resolveFontFamily3(
+      finalTheme.typography.monoFont,
+      "ui-monospace, Consolas, monospace"
+    );
+    const style = {
+      ["--squisq-json-bg"]: finalTheme.colors.background,
+      ["--squisq-json-text"]: finalTheme.colors.text,
+      ["--squisq-json-muted"]: finalTheme.colors.textMuted,
+      ["--squisq-json-primary"]: finalTheme.colors.primary,
+      ["--squisq-json-accent"]: finalTheme.colors.secondary,
+      ["--squisq-json-border"]: `color-mix(in srgb, ${finalTheme.colors.textMuted} 35%, transparent)`,
+      ["--squisq-json-title-font"]: titleFont,
+      ["--squisq-json-body-font"]: bodyFont,
+      ["--squisq-json-mono-font"]: monoFont,
+      ["--squisq-json-radius"]: `${finalTheme.style.borderRadius ?? 8}px`
+    };
+    return { style, theme: finalTheme };
+  }, [theme, effectiveSurface]);
+}
+
+// src/jsonView/RenderNode.tsx
+import {
+  chooseControl,
+  resolveFlag,
+  resolveRef
+} from "@bendyline/squisq/jsonForm";
+
+// src/jsonView/viewers.tsx
+import { Fragment as Fragment4, useMemo as useMemo11 } from "react";
+import {
+  arrayItemKind
+} from "@bendyline/squisq/jsonForm";
+import { parseMarkdown } from "@bendyline/squisq/markdown";
+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__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: String(value) });
+}
+function MultilineViewer({ value }) {
+  if (value === void 0 || value === null || value === "") {
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value squisq-jv-value--multiline", children: String(value) });
+}
+function RichTextViewer({ value }) {
+  const nodes = useMemo11(() => {
+    if (typeof value !== "string" || value === "") return null;
+    try {
+      const doc = parseMarkdown(value);
+      return doc.children;
+    } catch {
+      return null;
+    }
+  }, [value]);
+  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__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: String(value) });
+}
+function BooleanViewer({ value }) {
+  const on = Boolean(value);
+  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__ */ 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__ */ jsx24("span", { className: "squisq-jv-value", children: display });
+}
+function ColorViewer({ value }) {
+  if (typeof value !== "string" || value === "") {
+    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  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__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  const fmt = schema.format;
+  let display = value;
+  try {
+    const date = new Date(value);
+    if (!Number.isNaN(date.getTime())) {
+      if (fmt === "time") {
+        display = date.toLocaleTimeString();
+      } else if (fmt === "date") {
+        display = date.toLocaleDateString();
+      } else {
+        display = date.toLocaleString();
+      }
+    }
+  } catch {
+  }
+  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: display });
+}
+function ChipBinViewer({ value, schema }) {
+  if (!Array.isArray(value) || value.length === 0) {
+    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__ */ 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__ */ 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__ */ 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__ */ jsx24("div", { className: "squisq-jv-card-stack", children: value.map((item, i) => {
+    const title = resolveItemTitle(itemLabel, item, i);
+    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,
+          schema: itemSchema,
+          rootSchema,
+          rootData,
+          pointer: `${pointer}/${i}`,
+          density,
+          suppressTopGroupTitle: true
+        }
+      )
+    ] }, i);
+  }) });
+}
+function resolveItemTitle(spec, item, index) {
+  if (!spec) return `Item ${index + 1}`;
+  if (typeof spec === "string") return spec;
+  if (item && typeof item === "object") {
+    const v = item[spec.fromField];
+    if (typeof v === "string" && v !== "") return v;
+    if (typeof v === "number") return String(v);
+  }
+  return `Item ${index + 1}`;
+}
+function GroupViewer(props) {
+  const { value, schema, rootSchema, rootData, pointer, density, suppressTitle } = props;
+  const title = !suppressTitle ? schema.squisq?.label ?? schema.title : void 0;
+  const help = schema.squisq?.help ?? schema.description;
+  const obj = (value && typeof value === "object" ? value : {}) ?? {};
+  const propEntries = Object.entries(schema.properties ?? {});
+  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__ */ jsx24(
+          RenderNode,
+          {
+            value: obj[key],
+            schema: propSchema,
+            rootSchema,
+            rootData,
+            pointer: `${pointer}/${key}`,
+            density,
+            suppressTopGroupTitle: true
+          }
+        )
+      }
+    ) }, key))
+  ] });
+}
+function RowOrSection({
+  label,
+  help,
+  kindHint,
+  children
+}) {
+  const composite = isCompositeKind(kindHint);
+  if (composite) {
+    return /* @__PURE__ */ jsx24(Fragment5, { 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) {
+  const t = schema.type;
+  const arrayLike = t === "array" || Array.isArray(t) && t.includes("array");
+  if (arrayLike) {
+    return arrayItemKind(schema) === "object";
+  }
+  const objectLike = t === "object" || Array.isArray(t) && t.includes("object");
+  if (objectLike) return true;
+  if (schema.oneOf || schema.anyOf) return true;
+  if (schema.format === "markdown" || schema.squisq?.control === "richtext") return true;
+  return false;
+}
+function TabsViewer(props) {
+  const { value, schema, rootSchema, rootData, pointer, density } = props;
+  const branches = (schema.oneOf ?? schema.anyOf ?? []).slice();
+  const matchedIndex = pickMatchingBranch(branches, value);
+  const branch = branches[matchedIndex];
+  if (!branch) {
+    return /* @__PURE__ */ jsx24(TextViewer, { ...props });
+  }
+  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,
+        schema: branch,
+        rootSchema,
+        rootData,
+        pointer,
+        density
+      }
+    )
+  ] });
+}
+function pickMatchingBranch(branches, value) {
+  for (let i = 0; i < branches.length; i++) {
+    if (matchesShape(branches[i], value)) return i;
+  }
+  return 0;
+}
+function matchesShape(schema, value) {
+  const t = schema.type;
+  const target = Array.isArray(t) ? t.find((x) => x !== "null") : t;
+  if (!target) return true;
+  switch (target) {
+    case "string":
+      return typeof value === "string";
+    case "number":
+    case "integer":
+      return typeof value === "number";
+    case "boolean":
+      return typeof value === "boolean";
+    case "null":
+      return value === null;
+    case "array":
+      return Array.isArray(value);
+    case "object":
+      return value !== null && typeof value === "object" && !Array.isArray(value);
+    default:
+      return false;
+  }
+}
+var VIEWERS = {
+  text: TextViewer,
+  multiline: MultilineViewer,
+  richtext: RichTextViewer,
+  color: ColorViewer,
+  date: DateViewer,
+  time: DateViewer,
+  datetime: DateViewer,
+  slider: NumberViewer,
+  stepper: NumberViewer,
+  segmented: EnumViewer,
+  radio: EnumViewer,
+  combobox: EnumViewer,
+  toggle: BooleanViewer,
+  checkbox: BooleanViewer,
+  card: GroupViewer,
+  group: GroupViewer,
+  "card-stack": CardStackViewer,
+  "chip-bin": ChipBinViewer,
+  tabs: TabsViewer
+};
+
+// src/jsonView/RenderNode.tsx
+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;
+  const kind = chooseControl(resolved);
+  const Viewer = VIEWERS[kind];
+  const viewerProps = {
+    value: props.value,
+    schema: resolved,
+    rootSchema: props.rootSchema,
+    rootData: props.rootData,
+    pointer: props.pointer,
+    density: props.density
+  };
+  if (kind === "group" || kind === "card") {
+    const Group = Viewer;
+    return /* @__PURE__ */ jsx25(Group, { ...viewerProps, suppressTitle: props.suppressTopGroupTitle });
+  }
+  return /* @__PURE__ */ jsx25(Viewer, { ...viewerProps });
+}
+
+// src/jsonView/JsonView.tsx
+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__ */ jsx26("div", { className: cls, style, children: /* @__PURE__ */ jsx26(
+    RenderNode,
+    {
+      value,
+      schema,
+      rootSchema: schema,
+      rootData: value,
+      pointer: "",
+      density
+    }
+  ) });
+}
+export {
+  BlockRenderer,
+  CaptionOverlay,
+  DocControlsBottom,
+  DocControlsOverlay,
+  DocControlsSidebar,
+  DocControlsSlideshow,
+  DocPlayer,
+  DocPlayerWithSidebar,
+  DocProgressBar,
+  ImageLayer,
+  InlineAudioPlayer,
+  InlineVideoPlayer,
+  JsonView,
+  LinearDocView,
+  MapLayer,
+  MarkdownRenderer,
+  MediaClipLayer,
+  MediaContext,
+  PathLayer,
+  ShapeLayer,
+  SocialCaptionOverlay,
+  TableLayer,
+  TextLayer,
+  VIEWPORT,
+  VideoLayer,
+  formatTime,
+  getAnimationStyle,
+  getTransitionClass,
+  useAudioSync,
+  useAutoSurface,
+  useDocPlayback,
+  useMediaProvider,
+  useMediaSchedule,
+  useMediaUrl,
+  useViewportOrientation
+};
 //# sourceMappingURL=index.js.map