@bendyline/squisq-react 2.0.1 → 2.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/DocPlayer.tsx
-import { Fragment as Fragment3, useId as useId7, useRef as useRef9, useState as useState9, useEffect as useEffect10, useCallback as useCallback7, useMemo as useMemo9 } from "react";
+import { Fragment as Fragment4, useId as useId7, useRef as useRef9, useState as useState10, useEffect as useEffect11, useCallback as useCallback7, useMemo as useMemo10 } from "react";
 import {
   isTemplateBlock as isTemplateBlock3,
   getCaptionAtTime as getCaptionAtTime2,
@@ -12,18 +12,29 @@ import { useEffect as useEffect2, useRef } from "react";
 
 // src/hooks/MediaContext.tsx
 import { createContext, useContext, useState, useEffect, useMemo } from "react";
+import {
+  DEFAULT_INTERACTIVE_RESOURCE_POLICY,
+  isResourceUrlAllowed
+} from "@bendyline/squisq/markdown";
 var MediaContext = createContext(null);
+var ResourcePolicyContext = createContext(
+  DEFAULT_INTERACTIVE_RESOURCE_POLICY
+);
+function useResourcePolicy() {
+  return useContext(ResourcePolicyContext);
+}
 function useMediaProvider() {
   return useContext(MediaContext);
 }
 function useMediaUrl(relativePath, basePath) {
   const provider = useMediaProvider();
+  const resourcePolicy = useResourcePolicy();
   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 isAbsolute = !safePath || /^(?:[a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(safePath);
+  const fallback = useMemo(() => {
+    const candidate = isAbsolute ? safePath : `${basePath.replace(/\/$/, "")}/${safePath}`;
+    return isResourceUrlAllowed(candidate, resourcePolicy) ? candidate : "";
+  }, [isAbsolute, safePath, basePath, resourcePolicy]);
   const needsProvider = !isAbsolute && !!provider;
   const [url, setUrl] = useState(fallback);
   useEffect(() => {
@@ -35,7 +46,9 @@ function useMediaUrl(relativePath, basePath) {
     setUrl(fallback);
     provider.resolveUrl(safePath).then(
       (resolved) => {
-        if (!cancelled) setUrl(resolved);
+        if (!cancelled) {
+          setUrl(isResourceUrlAllowed(resolved, resourcePolicy) ? resolved : "");
+        }
       },
       () => {
         if (!cancelled) setUrl(fallback);
@@ -44,7 +57,7 @@ function useMediaUrl(relativePath, basePath) {
     return () => {
       cancelled = true;
     };
-  }, [needsProvider, provider, safePath, fallback]);
+  }, [needsProvider, provider, safePath, fallback, resourcePolicy]);
   return needsProvider ? url : fallback;
 }
 
@@ -1039,8 +1052,13 @@ function MarkerDef({
 
 // src/layers/MapLayer.tsx
 import { useId as useId4, useState as useState2, useEffect as useEffect3 } from "react";
+import { ResourcePolicyError as ResourcePolicyError2 } from "@bendyline/squisq/markdown";
 
 // src/utils/mapTileUtils.ts
+import {
+  isResourceUrlAllowed as isResourceUrlAllowed2,
+  ResourcePolicyError
+} from "@bendyline/squisq/markdown";
 var TILE_PROVIDERS = {
   terrain: {
     url: "https://tile.opentopomap.org/{z}/{x}/{y}.png",
@@ -1123,6 +1141,13 @@ async function composeMapImage(options) {
   const provider = TILE_PROVIDERS[style];
   const tileSize = provider.tileSize || 256;
   const clampedZoom = Math.min(zoom, provider.maxZoom);
+  const probeUrl = buildTileUrl(provider, 0, 0, clampedZoom);
+  if (!isResourceUrlAllowed2(probeUrl, options.policy)) {
+    throw new ResourcePolicyError(
+      "RESOURCE_BLOCKED",
+      `Map tiles for style "${style}" are blocked by the resource policy (${provider.url}). Composing a map contacts the tile host; supply the map as \`staticSrc\` to render it without any remote request.`
+    );
+  }
   const canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
@@ -1228,6 +1253,7 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
   const [mapImageUrl, setMapImageUrl] = useState2(null);
   const [isLoading, setIsLoading] = useState2(true);
   const [error, setError] = useState2(null);
+  const [blockedByPolicy, setBlockedByPolicy] = useState2(false);
   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;
@@ -1235,16 +1261,18 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
   const offset = getAnchorOffset(position.anchor, width, height);
   const finalX = x + offset.x;
   const finalY = y + offset.y;
+  const staticSrc = useMediaUrl(content.staticSrc ?? "", basePath);
+  const resourcePolicy = useResourcePolicy();
   useEffect3(() => {
     let cancelled = false;
     if (content.staticSrc) {
-      const src = content.staticSrc.startsWith("http") ? content.staticSrc : `${basePath}/${content.staticSrc}`;
-      setMapImageUrl(src);
+      setMapImageUrl(staticSrc || null);
       setIsLoading(false);
       return;
     }
     setIsLoading(true);
     setError(null);
+    setBlockedByPolicy(false);
     composeMapImage({
       center: content.center,
       zoom: content.zoom,
@@ -1252,7 +1280,8 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
       width,
       height,
       markers: content.markers,
-      showAttribution: content.showAttribution !== false
+      showAttribution: content.showAttribution !== false,
+      policy: resourcePolicy
     }).then((dataUrl) => {
       if (!cancelled) {
         setMapImageUrl(dataUrl);
@@ -1260,8 +1289,10 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
       }
     }).catch((err) => {
       if (!cancelled) {
-        console.error("Failed to compose map:", err);
+        const blocked = err instanceof ResourcePolicyError2;
+        if (!blocked) console.error("Failed to compose map:", err);
         setError(err instanceof Error ? err.message : String(err));
+        setBlockedByPolicy(blocked);
         setIsLoading(false);
       }
     });
@@ -1273,11 +1304,13 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
     content.zoom,
     content.style,
     content.staticSrc,
+    staticSrc,
     content.markers,
     content.showAttribution,
     width,
     height,
-    basePath
+    basePath,
+    resourcePolicy
   ]);
   const animStyle = getAnimationStyle(animation, blockTime);
   if (isLoading) {
@@ -1314,7 +1347,16 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
         style: animStyle.style,
         "data-layer-id": layer.id,
         children: [
-          /* @__PURE__ */ jsx7("rect", { x: finalX, y: finalY, width, height, fill: "#fef2f2" }),
+          /* @__PURE__ */ jsx7(
+            "rect",
+            {
+              x: finalX,
+              y: finalY,
+              width,
+              height,
+              fill: blockedByPolicy ? "#f3f4f6" : "#fef2f2"
+            }
+          ),
           /* @__PURE__ */ jsx7(
             "text",
             {
@@ -1322,10 +1364,10 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
               y: finalY + height / 2,
               textAnchor: "middle",
               dominantBaseline: "middle",
-              fill: "#dc2626",
+              fill: blockedByPolicy ? "#6b7280" : "#dc2626",
               fontSize: "18",
               fontFamily: "system-ui, sans-serif",
-              children: "Map failed to load"
+              children: blockedByPolicy ? "Map unavailable offline" : "Map failed to load"
             }
           )
         ]
@@ -1462,76 +1504,84 @@ function TableLayer({ layer, viewport, blockTime }) {
   const offset = getAnchorOffset(position.anchor, width, height);
   const finalX = x + offset.x;
   const finalY = y + offset.y;
-  const animStyle = animation ? getAnimationStyle(animation, blockTime) : {};
+  const animStyle = 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",
+  return /* @__PURE__ */ jsx9(
+    "g",
     {
-      ...{ 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",
+      className: `block-layer block-layer--table ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: /* @__PURE__ */ jsx9("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx9(
+        "div",
         {
+          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
           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}`
+            width: `${width}px`,
+            height: `${height}px`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "16px",
+            boxSizing: "border-box"
           },
-          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
+          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}`
               },
-              ci
-            )) }, ri)) })
-          ]
+              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/layers/TreeLayer.tsx
@@ -1554,16 +1604,14 @@ function TreeLayer({ layer, viewport, blockTime }) {
   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 animStyle = animation ? getAnimationStyle(animation, blockTime) : {};
+  const animStyle = getAnimationStyle(animation, blockTime);
   return /* @__PURE__ */ jsx10(
-    "foreignObject",
+    "g",
     {
-      x: x + offset.x,
-      y: y + offset.y,
-      width,
-      height,
-      style: animStyle,
-      children: /* @__PURE__ */ jsx10(
+      className: `block-layer block-layer--tree ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: /* @__PURE__ */ jsx10("foreignObject", { x: x + offset.x, y: y + offset.y, width, height, children: /* @__PURE__ */ jsx10(
         "div",
         {
           ...{ xmlns: "http://www.w3.org/1999/xhtml" },
@@ -1583,7 +1631,7 @@ function TreeLayer({ layer, viewport, blockTime }) {
           },
           children: /* @__PURE__ */ jsx10(TreeList, { items, depth: 0, style })
         }
-      )
+      ) })
     }
   );
 }
@@ -1662,8 +1710,146 @@ function TreeRow({
   ] });
 }
 
-// src/BlockRenderer.tsx
+// src/mermaid/MermaidDiagram.tsx
+import { useEffect as useEffect5, useState as useState4 } from "react";
+
+// src/mermaid/mermaidRuntime.ts
+var mermaidPromise = null;
+async function loadMermaid() {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid").then(({ default: mermaid }) => {
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: "strict",
+        suppressErrorRendering: true,
+        deterministicIds: false,
+        logLevel: "error"
+      });
+      return mermaid;
+    }).catch((error) => {
+      mermaidPromise = null;
+      throw error;
+    });
+  }
+  return mermaidPromise;
+}
+function enqueue(run) {
+  const host = globalThis;
+  const previous = host.__squisqMermaidWorkQueue ?? Promise.resolve();
+  const result = previous.then(run, run);
+  host.__squisqMermaidWorkQueue = result.then(
+    () => void 0,
+    () => void 0
+  );
+  return result;
+}
+function renderMermaidSvg(id, source, container) {
+  return enqueue(async () => {
+    const mermaid = await loadMermaid();
+    const { svg, diagramType } = await mermaid.render(id, source, container);
+    return { svg, diagramType };
+  });
+}
+function mermaidRenderErrorMessage(error) {
+  const raw = error instanceof Error ? error.message : String(error);
+  return raw.split(/\r?\n/).map((line) => line.trimEnd()).filter(Boolean).slice(0, 6).join("\n") || "Unknown Mermaid rendering error.";
+}
+
+// src/mermaid/MermaidDiagram.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var renderSequence = 0;
+function MermaidDiagram({
+  source,
+  className,
+  ariaLabel = "Mermaid diagram"
+}) {
+  const [svg, setSvg] = useState4("");
+  const [error, setError] = useState4("");
+  const [rendering, setRendering] = useState4(true);
+  useEffect5(() => {
+    let current = true;
+    const id = `squisq-rich-mermaid-${++renderSequence}`;
+    setRendering(true);
+    setError("");
+    void renderMermaidSvg(id, source).then((result) => {
+      if (!current) return;
+      setSvg(result.svg);
+    }).catch((caught) => {
+      if (!current) return;
+      setSvg("");
+      setError(mermaidRenderErrorMessage(caught));
+    }).finally(() => {
+      if (current) setRendering(false);
+    });
+    return () => {
+      current = false;
+    };
+  }, [source]);
+  const classes = ["squisq-mermaid-rendered", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs8("div", { className: classes, role: "img", "aria-label": ariaLabel, children: [
+    rendering && /* @__PURE__ */ jsx11("div", { className: "squisq-mermaid-render-status", children: "Rendering diagram\u2026" }),
+    !rendering && error && /* @__PURE__ */ jsxs8("div", { className: "squisq-mermaid-render-error", role: "alert", children: [
+      /* @__PURE__ */ jsx11("strong", { children: "Mermaid could not render this diagram." }),
+      /* @__PURE__ */ jsx11("pre", { children: error })
+    ] }),
+    !rendering && !error && svg && /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: "squisq-mermaid-render-svg",
+        dangerouslySetInnerHTML: { __html: svg }
+      }
+    )
+  ] });
+}
+
+// src/layers/MermaidLayer.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function MermaidLayer({ layer, viewport, blockTime }) {
+  const { position, content, animation } = layer;
+  const width = resolveValue(position.width ?? viewport.width, viewport.width);
+  const height = resolveValue(position.height ?? viewport.height, viewport.height);
+  let x = resolveValue(position.x, viewport.width);
+  let y = resolveValue(position.y, viewport.height);
+  const anchor = position.anchor ?? "top-left";
+  if (anchor === "center") {
+    x -= width / 2;
+    y -= height / 2;
+  } else {
+    if (anchor.endsWith("right")) x -= width;
+    if (anchor.startsWith("bottom")) y -= height;
+  }
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const panelStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
+    padding: content.padding ?? 16,
+    borderRadius: 16,
+    background: content.background,
+    color: content.foreground,
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ jsx12(
+    "g",
+    {
+      className: `block-layer block-layer--mermaid ${animStyle.className}`,
+      "data-layer-id": layer.id,
+      style: animStyle.style,
+      children: /* @__PURE__ */ jsx12("foreignObject", { x, y, width, height, children: /* @__PURE__ */ jsx12(
+        "div",
+        {
+          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          className: "squisq-mermaid-layer-frame",
+          style: panelStyle,
+          children: /* @__PURE__ */ jsx12(MermaidDiagram, { source: content.source, ariaLabel: "Mermaid diagram on slide" })
+        }
+      ) })
+    }
+  );
+}
+
+// src/BlockRenderer.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_VIEWPORT = {
   width: 1920,
   height: 1080
@@ -1691,7 +1877,7 @@ function BlockRenderer({
   }
   const instanceId = useId5().replace(/:/g, "");
   const clipId = `vb-clip-${instanceId}-${block.id}`;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "svg",
     {
       className: `block-svg ${transitionClass}`,
@@ -1701,8 +1887,8 @@ function BlockRenderer({
       overflow: "hidden",
       "data-block-id": block.id,
       children: [
-        /* @__PURE__ */ jsx11("defs", { children: /* @__PURE__ */ jsx11("clipPath", { id: clipId, children: /* @__PURE__ */ jsx11("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }),
-        /* @__PURE__ */ jsx11("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsx13("clipPath", { id: clipId, children: /* @__PURE__ */ jsx13("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }),
+        /* @__PURE__ */ jsx13("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => /* @__PURE__ */ jsx13(
           LayerRenderer,
           {
             layer,
@@ -1729,7 +1915,7 @@ function LayerRenderer({
   const renderedLayer = animationsEnabled || !layer.animation ? layer : { ...layer, animation: void 0 };
   switch (renderedLayer.type) {
     case "image":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx13(
         ImageLayer,
         {
           layer: renderedLayer,
@@ -1740,13 +1926,13 @@ function LayerRenderer({
         }
       );
     case "text":
-      return /* @__PURE__ */ jsx11(TextLayer, { layer: renderedLayer, viewport, blockTime });
+      return /* @__PURE__ */ jsx13(TextLayer, { layer: renderedLayer, viewport, blockTime });
     case "shape":
-      return /* @__PURE__ */ jsx11(ShapeLayer, { layer: renderedLayer, viewport, blockTime });
+      return /* @__PURE__ */ jsx13(ShapeLayer, { layer: renderedLayer, viewport, blockTime });
     case "path":
-      return /* @__PURE__ */ jsx11(PathLayer, { layer: renderedLayer, viewport, blockTime });
+      return /* @__PURE__ */ jsx13(PathLayer, { layer: renderedLayer, viewport, blockTime });
     case "map":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx13(
         MapLayer,
         {
           layer: renderedLayer,
@@ -1756,7 +1942,7 @@ function LayerRenderer({
         }
       );
     case "video":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx13(
         VideoLayer,
         {
           layer: renderedLayer,
@@ -1767,9 +1953,11 @@ function LayerRenderer({
         }
       );
     case "table":
-      return /* @__PURE__ */ jsx11(TableLayer, { layer: renderedLayer, viewport, blockTime });
+      return /* @__PURE__ */ jsx13(TableLayer, { layer: renderedLayer, viewport, blockTime });
     case "tree":
-      return /* @__PURE__ */ jsx11(TreeLayer, { layer: renderedLayer, viewport, blockTime });
+      return /* @__PURE__ */ jsx13(TreeLayer, { layer: renderedLayer, viewport, blockTime });
+    case "mermaid":
+      return /* @__PURE__ */ jsx13(MermaidLayer, { layer: renderedLayer, viewport, blockTime });
     default:
       console.warn(`Unknown layer type: ${renderedLayer.type}`);
       return null;
@@ -1782,7 +1970,7 @@ import { getCaptionAtTime } from "@bendyline/squisq/schemas";
 // src/SocialCaptionOverlay.tsx
 import { useMemo as useMemo4 } from "react";
 import { resolveFontFamily } from "@bendyline/squisq/schemas";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var TARGET_CHUNK_SIZE = 4;
 var MIN_CHUNK_SIZE = 2;
 var MAX_CHUNK_SIZE = 6;
@@ -1841,7 +2029,7 @@ function SocialCaptionOverlay({
     [captions]
   );
   if (!enabled || chunks.length === 0) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx14(
       "div",
       {
         className: "social-caption-overlay",
@@ -1903,7 +2091,7 @@ function SocialCaptionOverlay({
   const viewportHeight = viewport?.height ?? 720;
   const baseFontSize = Math.round(viewportHeight * 0.055);
   const fontSize = Math.max(24, Math.min(72, baseFontSize));
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       className: "social-caption-overlay",
@@ -1920,7 +2108,7 @@ function SocialCaptionOverlay({
         opacity: 1,
         transition: "opacity 0.15s ease-in-out"
       },
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx14(
         "div",
         {
           style: {
@@ -1929,7 +2117,7 @@ function SocialCaptionOverlay({
           },
           children: activeChunk.words.map((word, i) => {
             const isActive = i === activeWordIndex;
-            return /* @__PURE__ */ jsx12(
+            return /* @__PURE__ */ jsx14(
               "span",
               {
                 style: {
@@ -1954,7 +2142,7 @@ function SocialCaptionOverlay({
 }
 
 // src/CaptionOverlay.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function CaptionOverlay({
   captions,
   currentTime,
@@ -1965,7 +2153,7 @@ function CaptionOverlay({
   viewport
 }) {
   if (captionStyle === "social") {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx15(
       SocialCaptionOverlay,
       {
         captions,
@@ -1978,7 +2166,7 @@ function CaptionOverlay({
   }
   const phrase = enabled && captions ? getCaptionAtTime(captions, currentTime) : null;
   const captionText = phrase?.text ?? null;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       className: "caption-overlay",
@@ -1997,7 +2185,7 @@ function CaptionOverlay({
         padding: "0 4px",
         boxSizing: "border-box"
       },
-      children: captionText && /* @__PURE__ */ jsx13(
+      children: captionText && /* @__PURE__ */ jsx15(
         "div",
         {
           style: {
@@ -2007,7 +2195,7 @@ function CaptionOverlay({
             borderRadius: "4px",
             backdropFilter: "blur(4px)"
           },
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx15(
             "span",
             {
               style: {
@@ -2053,55 +2241,109 @@ function useAutoSurface(enabled) {
 }
 
 // src/hooks/useAudioSync.ts
-import { useState as useState4, useEffect as useEffect5, useRef as useRef3, useCallback as useCallback2 } from "react";
+import { useState as useState5, useEffect as useEffect6, useRef as useRef3, useCallback as useCallback2 } from "react";
+import { fetchResourceBytes, isResourceUrlAllowed as isResourceUrlAllowed3 } from "@bendyline/squisq/markdown";
+
+// src/hooks/AudioController.ts
+function calculateSegmentTiming(segments) {
+  if (!segments?.length) {
+    return { segmentStarts: [], totalDuration: 0 };
+  }
+  let time = 0;
+  const segmentStarts = segments.map((seg) => {
+    const start = time;
+    time += seg.duration;
+    return start;
+  });
+  return { segmentStarts, totalDuration: time };
+}
+function findSegmentAtTime(time, segments, segmentStarts) {
+  if (!segments?.length) {
+    return { segmentIndex: 0, segmentStart: 0 };
+  }
+  let segmentIndex = 0;
+  let segmentStart = 0;
+  for (let i = 0; i < segments.length; i++) {
+    const segEnd = segmentStarts[i] + segments[i].duration;
+    if (time < segEnd) {
+      segmentIndex = i;
+      segmentStart = segmentStarts[i];
+      break;
+    }
+    if (i === segments.length - 1) {
+      segmentIndex = i;
+      segmentStart = segmentStarts[i];
+    }
+  }
+  return { segmentIndex, segmentStart };
+}
+
+// src/hooks/useAudioSync.ts
+var SEEK_COMPLETION_TIMEOUT_MS = 15e3;
+var UNLOADABLE_MESSAGE = "Audio could not be loaded. Check that the media file is available.";
 function resolveAudioUrl(src, basePath) {
   if (!src || /^(?:[a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(src)) return src;
   if (!basePath) return src;
   return `${basePath.replace(/\/$/, "")}/${src.replace(/^\//, "")}`;
 }
-function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
-  const [currentTime, setCurrentTime] = useState4(0);
-  const [isPlaying, setIsPlaying] = useState4(false);
-  const [currentSegment, setCurrentSegment] = useState4(0);
-  const [isEnded, setIsEnded] = useState4(false);
-  const [isAudioReady, setIsAudioReady] = useState4(false);
-  const [totalDuration, setTotalDuration] = useState4(0);
+function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true, mode = "media") {
+  const resourcePolicy = useResourcePolicy();
+  const [currentTime, setCurrentTime] = useState5(0);
+  const [isPlaying, setIsPlaying] = useState5(false);
+  const [currentSegment, setCurrentSegment] = useState5(0);
+  const [isEnded, setIsEnded] = useState5(false);
+  const [isAudioReady, setIsAudioReady] = useState5(false);
+  const [totalDuration, setTotalDuration] = useState5(0);
+  const [isAvailable, setIsAvailable] = useState5(true);
+  const [unavailableMessage, setUnavailableMessage] = useState5();
   const segmentStarts = useRef3([]);
   const pendingSeekTime = useRef3(null);
+  const pendingSeekCompletion = useRef3(null);
   const shouldPlayAfterLoad = useRef3(false);
   const blobUrls = useRef3(/* @__PURE__ */ new Map());
   const loadingPromises = useRef3(/* @__PURE__ */ new Map());
   const abortControllers = useRef3(/* @__PURE__ */ new Set());
   const loadGeneration = useRef3(0);
+  const activeSegmentSrc = useRef3(void 0);
+  activeSegmentSrc.current = audioTrack?.segments[currentSegment]?.src;
+  const boundSource = useRef3(null);
+  const currentSegmentRef = useRef3(0);
+  currentSegmentRef.current = currentSegment;
   const fallbackMode = useRef3(false);
-  useEffect5(() => {
+  useEffect6(() => {
     loadGeneration.current += 1;
     pendingSeekTime.current = null;
+    pendingSeekCompletion.current?.();
+    pendingSeekCompletion.current = null;
     shouldPlayAfterLoad.current = false;
     fallbackMode.current = false;
+    boundSource.current = null;
     setCurrentTime(0);
     setCurrentSegment(0);
     setIsPlaying(false);
     setIsEnded(false);
     setIsAudioReady(false);
+    setIsAvailable(true);
+    setUnavailableMessage(void 0);
     if (!enabled || !audioTrack?.segments) {
       segmentStarts.current = [];
       setTotalDuration(0);
       return;
     }
-    let time = 0;
-    segmentStarts.current = audioTrack.segments.map((seg) => {
-      const start = time;
-      time += seg.duration;
-      return start;
-    });
-    setTotalDuration(time);
-  }, [audioTrack, enabled]);
+    const timing = calculateSegmentTiming(audioTrack.segments);
+    segmentStarts.current = timing.segmentStarts;
+    setTotalDuration(timing.totalDuration);
+    if (mode === "synthetic") setIsAudioReady(true);
+  }, [audioTrack, enabled, mode]);
   const preloadAudio = useCallback2(
     async (src) => {
       const audioUrl = resolveAudioUrl(src, basePath);
+      if (!isResourceUrlAllowed3(audioUrl, resourcePolicy)) return "";
       if (blobUrls.current.has(src)) {
-        return blobUrls.current.get(src);
+        const cached = blobUrls.current.get(src);
+        blobUrls.current.delete(src);
+        blobUrls.current.set(src, cached);
+        return cached;
       }
       if (loadingPromises.current.has(src)) {
         return loadingPromises.current.get(src);
@@ -2111,33 +2353,44 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
       const generation = loadGeneration.current;
       const loadPromise = (async () => {
         try {
-          const response = await fetch(audioUrl, { signal: controller.signal });
-          if (!response.ok) throw new Error(`HTTP ${response.status}`);
-          const blob = await response.blob();
+          const resource = await fetchResourceBytes(audioUrl, {
+            policy: resourcePolicy,
+            signal: controller.signal,
+            contentTypePrefixes: ["audio/", "video/", "application/octet-stream"]
+          });
+          const blob = new Blob([resource.bytes.slice().buffer], {
+            type: resource.contentType || "application/octet-stream"
+          });
           const blobUrl = URL.createObjectURL(blob);
           if (controller.signal.aborted || generation !== loadGeneration.current) {
             URL.revokeObjectURL(blobUrl);
             return audioUrl;
           }
           blobUrls.current.set(src, blobUrl);
+          while (blobUrls.current.size > 2) {
+            const oldest = [...blobUrls.current.entries()].find(([key]) => key !== activeSegmentSrc.current) ?? blobUrls.current.entries().next().value;
+            if (!oldest) break;
+            blobUrls.current.delete(oldest[0]);
+            URL.revokeObjectURL(oldest[1]);
+          }
           return blobUrl;
         } catch {
-          return audioUrl;
-        } finally {
-          abortControllers.current.delete(controller);
-          loadingPromises.current.delete(src);
+          return "";
         }
       })();
       loadingPromises.current.set(src, loadPromise);
+      void loadPromise.then(() => {
+        abortControllers.current.delete(controller);
+        if (loadingPromises.current.get(src) === loadPromise) {
+          loadingPromises.current.delete(src);
+        }
+      });
       return loadPromise;
     },
-    [basePath]
+    [basePath, resourcePolicy]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!enabled || !audioTrack?.segments) return;
-    audioTrack.segments.forEach((segment) => {
-      preloadAudio(segment.src);
-    });
     const currentBlobUrls = blobUrls.current;
     const currentAbortControllers = abortControllers.current;
     const currentLoadingPromises = loadingPromises.current;
@@ -2152,8 +2405,13 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
       currentBlobUrls.clear();
     };
   }, [audioTrack, preloadAudio, enabled]);
-  useEffect5(() => {
-    if (!enabled) return;
+  useEffect6(() => {
+    if (!enabled || mode === "synthetic") return;
+    const segment = audioTrack?.segments[currentSegment];
+    if (segment) void preloadAudio(segment.src);
+  }, [audioTrack, currentSegment, enabled, mode, preloadAudio]);
+  useEffect6(() => {
+    if (!enabled || mode === "synthetic") return;
     const audio = audioRef.current;
     if (!audio) return;
     const handleTimeUpdate = () => {
@@ -2168,6 +2426,16 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
     const handlePause = () => setIsPlaying(false);
     const handleError = () => {
       setIsAudioReady(true);
+      setIsPlaying(false);
+      setIsAvailable(false);
+      setUnavailableMessage(UNLOADABLE_MESSAGE);
+      shouldPlayAfterLoad.current = false;
+      if (pendingSeekTime.current !== null) {
+        setCurrentTime(pendingSeekTime.current);
+        pendingSeekTime.current = null;
+      }
+      pendingSeekCompletion.current?.();
+      pendingSeekCompletion.current = null;
     };
     const handleEnded = () => {
       if (audioTrack && currentSegment < audioTrack.segments.length - 1) {
@@ -2190,9 +2458,9 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
       audio.removeEventListener("ended", handleEnded);
       audio.removeEventListener("error", handleError);
     };
-  }, [audioRef, currentSegment, audioTrack, enabled]);
-  useEffect5(() => {
-    if (!enabled) return;
+  }, [audioRef, currentSegment, audioTrack, enabled, mode]);
+  useEffect6(() => {
+    if (!enabled || mode === "synthetic") return;
     const audio = audioRef.current;
     if (!audio || !audioTrack?.segments) return;
     const segment = audioTrack.segments[currentSegment];
@@ -2204,22 +2472,48 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
         audio.currentTime = Math.max(0, segmentTime);
         setCurrentTime(pendingSeekTime.current);
         pendingSeekTime.current = null;
+        pendingSeekCompletion.current?.();
+        pendingSeekCompletion.current = null;
       }
       if (shouldPlayAfterLoad.current) {
-        audio.play().catch(() => {
+        audio.play().catch((error) => {
+          setIsPlaying(false);
+          if (!(error instanceof Error && error.name === "NotAllowedError")) {
+            setIsAvailable(false);
+            setUnavailableMessage(
+              "Audio playback failed. Check that the media file is supported and available."
+            );
+          }
         });
         shouldPlayAfterLoad.current = false;
       }
     };
     const currentSrc = audio.src;
-    const cachedBlobUrl = blobUrls.current.get(segment.src);
-    const isSameSource = currentSrc && (currentSrc === cachedBlobUrl || currentSrc.endsWith(segment.src));
+    const bound = boundSource.current;
+    const isSameSource = !!currentSrc && bound?.key === segment.src && bound.url === currentSrc;
     let cancelled = false;
     let handleCanPlay = null;
     if (!isSameSource) {
       const loadAndPlay = async () => {
         const blobUrl = await preloadAudio(segment.src);
         if (cancelled) return;
+        if (!blobUrl) {
+          audio.removeAttribute("src");
+          audio.load();
+          boundSource.current = null;
+          shouldPlayAfterLoad.current = false;
+          setIsAudioReady(true);
+          setIsPlaying(false);
+          setIsAvailable(false);
+          setUnavailableMessage(UNLOADABLE_MESSAGE);
+          if (pendingSeekTime.current !== null) {
+            setCurrentTime(pendingSeekTime.current);
+            pendingSeekTime.current = null;
+          }
+          pendingSeekCompletion.current?.();
+          pendingSeekCompletion.current = null;
+          return;
+        }
         handleCanPlay = () => {
           if (cancelled) return;
           setIsAudioReady(true);
@@ -2228,6 +2522,7 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
         };
         audio.addEventListener("canplay", handleCanPlay);
         audio.src = blobUrl;
+        boundSource.current = { key: segment.src, url: audio.src };
         audio.load();
         await Promise.resolve();
         if (audio.readyState >= 3) {
@@ -2244,22 +2539,86 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
       cancelled = true;
       if (handleCanPlay) audio.removeEventListener("canplay", handleCanPlay);
     };
-  }, [audioRef, currentSegment, audioTrack, preloadAudio, enabled]);
-  const play = useCallback2(() => {
+  }, [audioRef, currentSegment, audioTrack, preloadAudio, enabled, mode]);
+  const seekTo = useCallback2(
+    async (time) => {
+      const audio = audioRef.current;
+      if (!audioTrack?.segments) return;
+      const clampedTime = totalDuration > 0 ? Math.max(0, Math.min(time, totalDuration)) : Math.max(0, time);
+      const starts = segmentStarts.current.length === audioTrack.segments.length ? segmentStarts.current : calculateSegmentTiming(audioTrack.segments).segmentStarts;
+      const { segmentIndex, segmentStart } = findSegmentAtTime(
+        clampedTime,
+        audioTrack.segments,
+        starts
+      );
+      const wasPlaying = mode === "synthetic" ? isPlaying : !audio?.paused;
+      setIsEnded(false);
+      if (!audio && mode === "media") {
+        setCurrentSegment(segmentIndex);
+        setCurrentTime(clampedTime);
+        return;
+      }
+      if (segmentIndex !== currentSegmentRef.current) {
+        pendingSeekTime.current = clampedTime;
+        shouldPlayAfterLoad.current = wasPlaying;
+        const completion = new Promise((resolve) => {
+          pendingSeekCompletion.current?.();
+          let settled = false;
+          const settle = () => {
+            if (settled) return;
+            settled = true;
+            clearTimeout(timer);
+            if (pendingSeekCompletion.current === settle) pendingSeekCompletion.current = null;
+            resolve();
+          };
+          const timer = setTimeout(settle, SEEK_COMPLETION_TIMEOUT_MS);
+          pendingSeekCompletion.current = settle;
+        });
+        setCurrentSegment(segmentIndex);
+        if (mode === "synthetic") {
+          setCurrentTime(clampedTime);
+          pendingSeekTime.current = null;
+          pendingSeekCompletion.current?.();
+          pendingSeekCompletion.current = null;
+        }
+        await completion;
+      } else {
+        const segmentTime = clampedTime - segmentStart;
+        if (audio && mode === "media") audio.currentTime = Math.max(0, segmentTime);
+        setCurrentTime(clampedTime);
+      }
+    },
+    [audioRef, audioTrack, isPlaying, mode, totalDuration]
+  );
+  const play = useCallback2(async () => {
+    if (mode === "synthetic") {
+      fallbackMode.current = true;
+      setIsPlaying(true);
+      return;
+    }
     const audio = audioRef.current;
     if (audio) {
       if (isEnded) {
-        setCurrentSegment(0);
-        setIsEnded(false);
+        await seekTo(0);
       }
-      audio.play().then(() => {
+      try {
+        await audio.play();
         fallbackMode.current = false;
-      }).catch(() => {
-        fallbackMode.current = true;
-        setIsPlaying(true);
-      });
+        setIsAvailable(true);
+        setUnavailableMessage(void 0);
+      } catch (error) {
+        fallbackMode.current = false;
+        setIsPlaying(false);
+        const name = error instanceof Error ? error.name : "";
+        if (name !== "NotAllowedError") {
+          setIsAvailable(false);
+          setUnavailableMessage(
+            "Audio playback failed. Check that the media file is supported and available."
+          );
+        }
+      }
     }
-  }, [audioRef, isEnded]);
+  }, [audioRef, isEnded, mode, seekTo]);
   const pause = useCallback2(() => {
     const audio = audioRef.current;
     if (audio) {
@@ -2269,45 +2628,13 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
   }, [audioRef]);
   const toggle = useCallback2(() => {
     const audio = audioRef.current;
-    if (!audio) return;
+    if (!audio && mode === "media") 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]
-  );
+  }, [audioRef, isPlaying, mode, play, pause]);
   const skipToSegment = useCallback2(
     (index) => {
       if (!audioTrack?.segments || index < 0 || index >= audioTrack.segments.length) {
@@ -2319,11 +2646,10 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
     [audioTrack]
   );
   const restart = useCallback2(async () => {
-    seekTo(0);
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    play();
+    await seekTo(0);
+    await play();
   }, [seekTo, play]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isPlaying || !fallbackMode.current || !totalDuration) return;
     let lastTime = performance.now();
     let raf;
@@ -2354,13 +2680,13 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true) {
     totalDuration,
     isEnded,
     isReady: isAudioReady,
-    isAvailable: true,
-    // HTML5 audio is always available in browsers
+    isAvailable,
+    unavailableMessage,
     // Actions
-    play: async () => play(),
+    play,
     pause: async () => pause(),
     toggle: async () => toggle(),
-    seekTo: async (time) => seekTo(time),
+    seekTo,
     skipToSegment: async (index) => skipToSegment(index),
     restart
   };
@@ -2505,7 +2831,7 @@ function useDocPlayback(script, currentTime, options = {}) {
 }
 
 // src/hooks/useViewportOrientation.ts
-import { useState as useState5, useEffect as useEffect6, useMemo as useMemo7 } from "react";
+import { useState as useState6, useEffect as useEffect7, useMemo as useMemo7 } from "react";
 import {
   VIEWPORT_PRESETS as VIEWPORT_PRESETS2
 } from "@bendyline/squisq/doc";
@@ -2531,11 +2857,11 @@ function getViewportForOrientation(orientation) {
   }
 }
 function useViewportOrientation() {
-  const [windowSize, setWindowSize] = useState5(() => ({
+  const [windowSize, setWindowSize] = useState6(() => ({
     width: typeof window !== "undefined" ? window.innerWidth : 1920,
     height: typeof window !== "undefined" ? window.innerHeight : 1080
   }));
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       setWindowSize({
@@ -2567,7 +2893,7 @@ function useViewportOrientation() {
 }
 
 // src/hooks/useSlideSwipe.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect8, useRef as useRef5, useState as useState7 } from "react";
 var DISTANCE_RATIO = 0.3;
 var FLICK_VELOCITY = 0.5;
 var MIN_FLICK_DISTANCE = 12;
@@ -2591,8 +2917,8 @@ function decideSwipe({
 }
 function useSlideSwipe(opts) {
   const settleMs = opts.settleMs ?? DEFAULT_SETTLE_MS;
-  const [offsetPx, setOffsetPx] = useState6(0);
-  const [phase, setPhase] = useState6("idle");
+  const [offsetPx, setOffsetPx] = useState7(0);
+  const [phase, setPhase] = useState7("idle");
   const optsRef = useRef5(opts);
   optsRef.current = opts;
   const dragRef = useRef5(null);
@@ -2630,7 +2956,7 @@ function useSlideSwipe(opts) {
     setPhase("dragging");
     setOffsetPx(0);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     function currentWidth() {
       return optsRef.current.containerRef.current?.getBoundingClientRect().width ?? 0;
     }
@@ -2700,7 +3026,7 @@ function useSlideSwipe(opts) {
       window.removeEventListener("pointercancel", onCancel);
     };
   }, [settleMs]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!opts.enabled) {
       dragRef.current = null;
       clearPending();
@@ -2708,7 +3034,7 @@ function useSlideSwipe(opts) {
       setOffsetPx(0);
     }
   }, [opts.enabled, clearPending]);
-  useEffect7(() => clearPending, [clearPending]);
+  useEffect8(() => clearPending, [clearPending]);
   return { offsetPx, phase, onPointerDown };
 }
 
@@ -2717,13 +3043,13 @@ import {
   expandCoverBlock,
   createTemplateContext,
   markdownToDoc as markdownToDoc2,
-  DEFAULT_THEME as DEFAULT_THEME3,
-  VIEWPORT_PRESETS as VIEWPORT_PRESETS4
+  DEFAULT_THEME as DEFAULT_THEME4,
+  VIEWPORT_PRESETS as VIEWPORT_PRESETS5
 } from "@bendyline/squisq/doc";
 import { parseMarkdown as parseMarkdown2 } from "@bendyline/squisq/markdown";
 
 // src/DocProgressBar.tsx
-import { useRef as useRef6, useState as useState7, useCallback as useCallback5 } from "react";
+import { useRef as useRef6, useState as useState8, useCallback as useCallback5 } from "react";
 
 // src/types.ts
 function formatTime(seconds) {
@@ -2733,7 +3059,7 @@ function formatTime(seconds) {
 }
 
 // src/DocProgressBar.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function DocProgressBar({
   state,
   actions,
@@ -2742,7 +3068,7 @@ function DocProgressBar({
   getBlockTitle
 }) {
   const progressBarRef = useRef6(null);
-  const [hoverPosition, setHoverPosition] = useState7(null);
+  const [hoverPosition, setHoverPosition] = useState8(null);
   const playProgress = state.totalDuration > 0 ? Math.max(0, Math.min(1, state.currentTime / state.totalDuration)) : 0;
   const handleProgressHover = useCallback5((e) => {
     const bar = progressBarRef.current;
@@ -2792,7 +3118,7 @@ function DocProgressBar({
     },
     [expandedBlocks]
   );
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       ref: progressBarRef,
@@ -2815,7 +3141,7 @@ function DocProgressBar({
       onMouseMove: handleProgressHover,
       onMouseLeave: handleProgressLeave,
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           "div",
           {
             role: "slider",
@@ -2836,7 +3162,7 @@ function DocProgressBar({
             }
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           "div",
           {
             "data-testid": "doc-progress-fill",
@@ -2850,7 +3176,7 @@ function DocProgressBar({
             }
           }
         ),
-        blockMarkers.map((marker, i) => /* @__PURE__ */ jsx14(
+        blockMarkers.map((marker, i) => /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -2883,7 +3209,7 @@ function DocProgressBar({
           },
           `${marker.block.id}-${i}`
         )),
-        hoverPosition !== null && /* @__PURE__ */ jsxs9(
+        hoverPosition !== null && /* @__PURE__ */ jsxs10(
           "div",
           {
             style: {
@@ -2900,19 +3226,19 @@ function DocProgressBar({
               zIndex: 10
             },
             children: [
-              /* @__PURE__ */ jsx14("div", { style: { color: "white", fontSize: "12px", fontFamily: "monospace" }, children: formatTime(hoverPosition * state.totalDuration) }),
+              /* @__PURE__ */ jsx16("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__ */ jsx14("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "11px", marginTop: "2px" }, children: getBlockTitle(slideInfo.block) });
+                  return /* @__PURE__ */ jsx16("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "11px", marginTop: "2px" }, children: getBlockTitle(slideInfo.block) });
                 }
                 return null;
               })()
             ]
           }
         ),
-        hoverPosition !== null && /* @__PURE__ */ jsx14(
+        hoverPosition !== null && /* @__PURE__ */ jsx16(
           "div",
           {
             style: {
@@ -2934,7 +3260,7 @@ function DocProgressBar({
 }
 
 // src/DocControlsOverlay.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function DocControlsOverlay({
   state,
   actions,
@@ -2942,7 +3268,7 @@ function DocControlsOverlay({
   expandedBlocks,
   getBlockTitle
 }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: "doc-player__controls",
@@ -2959,7 +3285,7 @@ function DocControlsOverlay({
         zIndex: 100
       },
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "button",
           {
             onClick: actions.restart,
@@ -2975,10 +3301,10 @@ function DocControlsOverlay({
             },
             title: "Restart",
             "aria-label": "Restart from beginning",
-            children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx15("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+            children: /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx17("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__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "button",
           {
             onClick: actions.toggle,
@@ -2997,15 +3323,15 @@ function DocControlsOverlay({
               height: "40px"
             },
             "aria-label": state.isPlaying ? "Pause" : "Play",
-            children: state.isPlaying ? /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx15("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx15("path", { d: "M8 5v14l11-7z" }) })
+            children: state.isPlaying ? /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx17("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx17("path", { d: "M8 5v14l11-7z" }) })
           }
         ),
-        /* @__PURE__ */ jsxs10("span", { style: { color: "white", fontSize: "12px", minWidth: "80px", fontFamily: "monospace" }, children: [
+        /* @__PURE__ */ jsxs11("span", { style: { color: "white", fontSize: "12px", minWidth: "80px", fontFamily: "monospace" }, children: [
           formatTime(state.currentTime),
           " / ",
           formatTime(state.totalDuration)
         ] }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           DocProgressBar,
           {
             state,
@@ -3015,12 +3341,12 @@ function DocControlsOverlay({
             getBlockTitle
           }
         ),
-        /* @__PURE__ */ jsxs10("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: "11px", whiteSpace: "nowrap" }, children: [
+        /* @__PURE__ */ jsxs11("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: "11px", whiteSpace: "nowrap" }, children: [
           state.currentBlockIndex + 1,
           "/",
           state.totalBlocks
         ] }),
-        state.hasCaptions && /* @__PURE__ */ jsxs10(
+        state.hasCaptions && /* @__PURE__ */ jsxs11(
           "button",
           {
             onClick: () => actions.cycleCaptionMode(),
@@ -3039,12 +3365,12 @@ function DocControlsOverlay({
             title: state.captionMode === "off" ? "Captions: Off (click for Standard)" : state.captionMode === "standard" ? "Captions: Standard (click for Social)" : "Captions: Social (click to turn off)",
             "aria-label": "Cycle caption style",
             children: [
-              /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx15("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__ */ jsx15("span", { style: { fontSize: "10px", textTransform: "uppercase", letterSpacing: "0.5px" }, children: state.captionMode === "standard" ? "CC" : "SM" })
+              /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx17("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__ */ jsx17("span", { style: { fontSize: "10px", textTransform: "uppercase", letterSpacing: "0.5px" }, children: state.captionMode === "standard" ? "CC" : "SM" })
             ]
           }
         ),
-        actions.toggleFullscreen && /* @__PURE__ */ jsx15(
+        actions.toggleFullscreen && /* @__PURE__ */ jsx17(
           "button",
           {
             onClick: actions.toggleFullscreen,
@@ -3060,7 +3386,7 @@ function DocControlsOverlay({
             },
             title: state.isFullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)",
             "aria-label": state.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-            children: state.isFullscreen ? /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx15("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx15("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+            children: state.isFullscreen ? /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx17("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx17("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
           }
         )
       ]
@@ -3069,8 +3395,8 @@ function DocControlsOverlay({
 }
 
 // src/DocControlsSlideshow.tsx
-import { useCallback as useCallback6, useEffect as useEffect8, useId as useId6, useLayoutEffect, useRef as useRef7, useState as useState8 } from "react";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect9, useId as useId6, useLayoutEffect, useRef as useRef7, useState as useState9 } from "react";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function DocControlsSlideshow({
   state,
   slideNav,
@@ -3078,7 +3404,7 @@ function DocControlsSlideshow({
   pickerOpen,
   onPickerOpenChange
 }) {
-  const [uncontrolledPickerOpen, setUncontrolledPickerOpen] = useState8(false);
+  const [uncontrolledPickerOpen, setUncontrolledPickerOpen] = useState9(false);
   const isPickerOpen = pickerOpen ?? uncontrolledPickerOpen;
   const setPickerOpen = useCallback6(
     (open) => {
@@ -3087,7 +3413,7 @@ function DocControlsSlideshow({
     },
     [pickerOpen, onPickerOpenChange]
   );
-  const [pickerMaxHeight, setPickerMaxHeight] = useState8(280);
+  const [pickerMaxHeight, setPickerMaxHeight] = useState9(280);
   const controlsRef = useRef7(null);
   const triggerRef = useRef7(null);
   const menuRef = useRef7(null);
@@ -3102,7 +3428,7 @@ function DocControlsSlideshow({
   const isFirst = currentBlockIndex <= 0;
   const isLast = currentBlockIndex >= totalBlocks - 1;
   const counterText = totalBlocks > 0 ? currentSlideLabel ?? `${currentSlideNumber ?? currentBlockIndex + 1} / ${totalSlideNumber ?? totalBlocks}` : "\u2014";
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isPickerOpen) return;
     const handlePointerDown = (event) => {
       if (!controlsRef.current?.contains(event.target)) setPickerOpen(false);
@@ -3141,7 +3467,7 @@ function DocControlsSlideshow({
       window.removeEventListener("resize", updateMaxHeight);
     };
   }, [isPickerOpen]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isPickerOpen) return;
     menuRef.current?.querySelector('[aria-current="true"]')?.focus();
   }, [isPickerOpen]);
@@ -3160,7 +3486,7 @@ function DocControlsSlideshow({
     else nextIndex = (focusedIndex - 1 + items.length) % items.length;
     items[nextIndex]?.focus();
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref: controlsRef,
@@ -3182,7 +3508,7 @@ function DocControlsSlideshow({
         WebkitBackdropFilter: "blur(8px)"
       },
       children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             onClick: (e) => {
@@ -3211,10 +3537,10 @@ function DocControlsSlideshow({
             onMouseLeave: (e) => {
               e.currentTarget.style.background = "none";
             },
-            children: /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx16("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
+            children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx18("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             ref: triggerRef,
@@ -3248,7 +3574,7 @@ function DocControlsSlideshow({
             children: counterText
           }
         ),
-        isPickerOpen && /* @__PURE__ */ jsx16(
+        isPickerOpen && /* @__PURE__ */ jsx18(
           "div",
           {
             ref: menuRef,
@@ -3275,7 +3601,7 @@ function DocControlsSlideshow({
             },
             children: slides.map((slide, index) => {
               const isCurrent = index === currentBlockIndex;
-              return /* @__PURE__ */ jsxs11(
+              return /* @__PURE__ */ jsxs12(
                 "button",
                 {
                   type: "button",
@@ -3308,7 +3634,7 @@ function DocControlsSlideshow({
                     event.currentTarget.style.background = isCurrent ? "rgba(255,255,255,0.14)" : "transparent";
                   },
                   children: [
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx18(
                       "span",
                       {
                         style: {
@@ -3320,7 +3646,7 @@ function DocControlsSlideshow({
                         children: slide.label
                       }
                     ),
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx18(
                       "span",
                       {
                         style: {
@@ -3342,7 +3668,7 @@ function DocControlsSlideshow({
             })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             onClick: (e) => {
@@ -3371,7 +3697,7 @@ function DocControlsSlideshow({
             onMouseLeave: (e) => {
               e.currentTarget.style.background = "none";
             },
-            children: /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx16("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) })
+            children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx18("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) })
           }
         )
       ]
@@ -3380,20 +3706,85 @@ function DocControlsSlideshow({
 }
 
 // src/LinearDocView.tsx
-import { useEffect as useEffect9, useMemo as useMemo8, useRef as useRef8 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo9, useRef as useRef8 } from "react";
 import {
   applySurface,
   resolveFontFamily as resolveFontFamily2
 } from "@bendyline/squisq/schemas";
-import { VIEWPORT_PRESETS as VIEWPORT_PRESETS3 } from "@bendyline/squisq/schemas";
+import { VIEWPORT_PRESETS as VIEWPORT_PRESETS4 } from "@bendyline/squisq/schemas";
 import {
-  materializeBlockLayers,
   markdownToDoc,
-  DEFAULT_THEME as DEFAULT_THEME2,
-  deriveTemplateInputs,
-  isTemplateBlock as isTemplateBlock2
+  materializePageSections,
+  resolvePageStyle as resolvePageStyle2,
+  buildPageCssVars,
+  pageStyleDataAttributes,
+  PAGE_BASE_CSS,
+  DEFAULT_THEME as DEFAULT_THEME3
 } from "@bendyline/squisq/doc";
-import { extractPlainText, parseMarkdown } from "@bendyline/squisq/markdown";
+import { parseMarkdown } from "@bendyline/squisq/markdown";
+
+// src/page/PageViewContext.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { DEFAULT_THEME as DEFAULT_THEME2, resolvePageStyle } from "@bendyline/squisq/doc";
+import { VIEWPORT_PRESETS as VIEWPORT_PRESETS3 } from "@bendyline/squisq/schemas";
+var defaultValue = {
+  theme: DEFAULT_THEME2,
+  pageStyle: resolvePageStyle(DEFAULT_THEME2),
+  basePath: "/",
+  viewport: VIEWPORT_PRESETS3.landscape,
+  renderContext: { theme: DEFAULT_THEME2 },
+  animationsEnabled: true,
+  imageDisplayMode: "inline"
+};
+var PageViewContext = createContext2(defaultValue);
+function usePageView() {
+  return useContext2(PageViewContext);
+}
+
+// src/page/CanvasSection.tsx
+import { useMemo as useMemo8 } from "react";
+import { materializeBlockLayers } from "@bendyline/squisq/doc";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function CanvasSection({ section }) {
+  const { renderContext, basePath, animationsEnabled } = usePageView();
+  const media = section.slots.media;
+  const canvas = media?.type === "canvas" ? media : void 0;
+  const visualBlock = useMemo8(() => {
+    if (!canvas) return null;
+    const { layers } = materializeBlockLayers(canvas.block, {
+      ...renderContext,
+      blockIndex: section.index
+    });
+    return { ...canvas.block, layers };
+  }, [canvas, renderContext, section.index]);
+  if (!canvas || !visualBlock) return null;
+  const aspect = canvas.aspect;
+  const frame = section.hints?.frame;
+  const frameClass = frame === "terminal" ? " squisq-page-canvas--terminal squisq-page-canvas--framed" : " squisq-page-canvas--framed";
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: `squisq-page-canvas${frameClass}`,
+      style: {
+        aspectRatio: `${aspect.width} / ${aspect.height}`,
+        // Clamp tall canvases; derive the width cap from the aspect so a
+        // portrait viewport doesn't produce a page-height skyscraper.
+        maxHeight: "min(70vh, 720px)",
+        maxWidth: `calc(min(70vh, 720px) * ${(aspect.width / Math.max(1, aspect.height)).toFixed(4)})`
+      },
+      children: /* @__PURE__ */ jsx19(
+        BlockRenderer,
+        {
+          block: visualBlock,
+          blockTime: 0,
+          basePath,
+          viewport: { width: aspect.width, height: aspect.height },
+          animationsEnabled
+        }
+      )
+    }
+  );
+}
 
 // src/MarkdownRenderer.tsx
 import { Fragment as Fragment2 } from "react";
@@ -3403,7 +3794,7 @@ import {
 } from "@bendyline/squisq/markdown";
 
 // src/InlineVideoPlayer.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function InlineVideoPlayer({
   src,
   basePath = "",
@@ -3418,7 +3809,7 @@ function InlineVideoPlayer({
   const resolvedPoster = useMediaUrl(poster ?? "", basePath);
   const posterUrl = poster ? resolvedPoster : void 0;
   if (!resolvedSrc) return null;
-  return /* @__PURE__ */ jsx17("span", { className: `squisq-inline-video-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20("span", { className: `squisq-inline-video-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx20(
     "video",
     {
       src: resolvedSrc,
@@ -3433,7 +3824,7 @@ function InlineVideoPlayer({
 }
 
 // src/InlineAudioPlayer.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function InlineAudioPlayer({
   src,
   basePath = "",
@@ -3443,11 +3834,11 @@ function InlineAudioPlayer({
 }) {
   const resolvedSrc = useMediaUrl(src, basePath);
   if (!resolvedSrc) return null;
-  return /* @__PURE__ */ jsx18("span", { className: `squisq-inline-audio-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx18("audio", { src: resolvedSrc, controls, preload }) });
+  return /* @__PURE__ */ jsx21("span", { className: `squisq-inline-audio-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx21("audio", { src: resolvedSrc, controls, preload }) });
 }
 
 // src/MarkdownRenderer.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var DEFAULT_CTX = { htmlPolicy: "sanitize" };
 function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
   return nodes.map((node, i) => {
@@ -3455,28 +3846,28 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
     switch (node.type) {
       case "text": {
         if (!node.value.includes("\n")) {
-          return /* @__PURE__ */ jsx19(Fragment2, { children: node.value }, key);
+          return /* @__PURE__ */ jsx22(Fragment2, { children: node.value }, key);
         }
         const parts = node.value.split("\n");
-        return /* @__PURE__ */ jsx19(Fragment2, { children: parts.map((part, j) => /* @__PURE__ */ jsxs12(Fragment2, { children: [
-          j > 0 && /* @__PURE__ */ jsx19("br", {}),
+        return /* @__PURE__ */ jsx22(Fragment2, { children: parts.map((part, j) => /* @__PURE__ */ jsxs13(Fragment2, { children: [
+          j > 0 && /* @__PURE__ */ jsx22("br", {}),
           part
         ] }, j)) }, key);
       }
       case "emphasis":
-        return /* @__PURE__ */ jsx19("em", { className: "squisq-md-em", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx22("em", { className: "squisq-md-em", children: renderInline(node.children, key, ctx) }, key);
       case "strong":
-        return /* @__PURE__ */ jsx19("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx22("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, ctx) }, key);
       case "delete":
-        return /* @__PURE__ */ jsx19("del", { className: "squisq-md-del", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx22("del", { className: "squisq-md-del", children: renderInline(node.children, key, ctx) }, key);
       case "inlineCode":
-        return /* @__PURE__ */ jsx19("code", { className: "squisq-md-inline-code", children: node.value }, key);
+        return /* @__PURE__ */ jsx22("code", { className: "squisq-md-inline-code", children: node.value }, key);
       case "link": {
         const href = sanitizeUrl(node.url, "link", { extraLinkSchemes: ctx.linkSchemes });
         if (!href) {
-          return /* @__PURE__ */ jsx19("span", { className: "squisq-md-link squisq-md-link--blocked", children: renderInline(node.children, key, ctx) }, key);
+          return /* @__PURE__ */ jsx22("span", { className: "squisq-md-link squisq-md-link--blocked", children: renderInline(node.children, key, ctx) }, key);
         }
-        return /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx22(
           "a",
           {
             className: "squisq-md-link",
@@ -3490,32 +3881,32 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
         );
       }
       case "image":
-        return /* @__PURE__ */ jsx19(MdImage, { src: node.url, alt: node.alt ?? "", title: node.title ?? void 0 }, key);
+        return /* @__PURE__ */ jsx22(MdImage, { src: node.url, alt: node.alt ?? "", title: node.title ?? void 0 }, key);
       case "break":
-        return /* @__PURE__ */ jsx19("br", {}, key);
+        return /* @__PURE__ */ jsx22("br", {}, key);
       case "inlineMath":
-        return /* @__PURE__ */ jsx19("code", { className: "squisq-md-inline-math", children: node.value }, key);
+        return /* @__PURE__ */ jsx22("code", { className: "squisq-md-inline-math", children: node.value }, key);
       case "htmlInline":
         if (ctx.htmlPolicy === "strip") return null;
-        return /* @__PURE__ */ jsx19("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
+        return /* @__PURE__ */ jsx22("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
       case "footnoteReference":
-        return /* @__PURE__ */ jsx19("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs12("a", { href: `#fn-${node.identifier}`, children: [
+        return /* @__PURE__ */ jsx22("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs13("a", { href: `#fn-${node.identifier}`, children: [
           "[",
           node.label ?? node.identifier,
           "]"
         ] }) }, key);
       case "linkReference":
-        return /* @__PURE__ */ jsx19("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx22("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, ctx) }, key);
       case "imageReference":
-        return /* @__PURE__ */ jsxs12("span", { className: "squisq-md-image-ref", children: [
+        return /* @__PURE__ */ jsxs13("span", { className: "squisq-md-image-ref", children: [
           "[",
           node.alt ?? node.identifier,
           "]"
         ] }, key);
       case "textDirective":
-        return /* @__PURE__ */ jsx19("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx22("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, ctx) }, key);
       case "mention":
-        return /* @__PURE__ */ jsxs12(
+        return /* @__PURE__ */ jsxs13(
           "span",
           {
             className: "squisq-md-mention mention",
@@ -3538,51 +3929,62 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
 function renderBlock(node, key, ctx = DEFAULT_CTX) {
   switch (node.type) {
     case "paragraph":
-      return /* @__PURE__ */ jsx19("p", { className: "squisq-md-p", children: renderInline(node.children, key, ctx) }, key);
+      return /* @__PURE__ */ jsx22("p", { className: "squisq-md-p", children: renderInline(node.children, key, ctx) }, key);
     case "heading": {
       const Tag = `h${node.depth}`;
-      return /* @__PURE__ */ jsx19(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, ctx) }, key);
+      return /* @__PURE__ */ jsx22(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, ctx) }, key);
     }
     case "blockquote":
-      return /* @__PURE__ */ jsx19("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, ctx) }, key);
+      return /* @__PURE__ */ jsx22("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, ctx) }, key);
     case "list":
       if (node.ordered) {
-        return /* @__PURE__ */ jsx19("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
+        return /* @__PURE__ */ jsx22("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
       }
-      return /* @__PURE__ */ jsx19("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
+      return /* @__PURE__ */ jsx22("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
     case "code":
-      return /* @__PURE__ */ jsx19("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx19("code", { className: node.lang ? `language-${node.lang}` : void 0, children: node.value }) }, key);
+      if (node.lang?.trim().toLowerCase() === "mermaid") {
+        return /* @__PURE__ */ jsx22(
+          MermaidDiagram,
+          {
+            source: node.value,
+            className: "squisq-md-mermaid",
+            ariaLabel: "Mermaid diagram"
+          },
+          key
+        );
+      }
+      return /* @__PURE__ */ jsx22("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx22("code", { className: node.lang ? `language-${node.lang}` : void 0, children: node.value }) }, key);
     case "thematicBreak":
-      return /* @__PURE__ */ jsx19("hr", { className: "squisq-md-hr" }, key);
+      return /* @__PURE__ */ jsx22("hr", { className: "squisq-md-hr" }, key);
     case "table":
       return renderTable(node.children, node.align, key, ctx);
     case "htmlBlock":
       if (ctx.htmlPolicy === "strip") return null;
-      return /* @__PURE__ */ jsx19("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
+      return /* @__PURE__ */ jsx22("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
     case "math":
-      return /* @__PURE__ */ jsx19("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx19("code", { children: node.value }) }, key);
+      return /* @__PURE__ */ jsx22("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx22("code", { children: node.value }) }, key);
     case "definition":
       return null;
     case "footnoteDefinition":
-      return /* @__PURE__ */ jsxs12("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
-        /* @__PURE__ */ jsx19("sup", { children: node.label ?? node.identifier }),
+      return /* @__PURE__ */ jsxs13("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
+        /* @__PURE__ */ jsx22("sup", { children: node.label ?? node.identifier }),
         renderBlocks(node.children, key, ctx)
       ] }, key);
     case "containerDirective":
-      return /* @__PURE__ */ jsxs12(
+      return /* @__PURE__ */ jsxs13(
         "div",
         {
           className: `squisq-md-directive squisq-md-directive-${node.name}`,
           "data-directive": node.name,
           children: [
-            node.label && /* @__PURE__ */ jsx19("div", { className: "squisq-md-directive-label", children: node.label }),
+            node.label && /* @__PURE__ */ jsx22("div", { className: "squisq-md-directive-label", children: node.label }),
             renderBlocks(node.children, key, ctx)
           ]
         },
         key
       );
     case "leafDirective":
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx22(
         "div",
         {
           className: `squisq-md-directive squisq-md-directive-${node.name}`,
@@ -3592,11 +3994,11 @@ function renderBlock(node, key, ctx = DEFAULT_CTX) {
         key
       );
     case "definitionList":
-      return /* @__PURE__ */ jsx19("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
+      return /* @__PURE__ */ jsx22("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
         if (child.type === "definitionTerm") {
-          return /* @__PURE__ */ jsx19("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, ctx) }, `${key}dt${i}`);
+          return /* @__PURE__ */ jsx22("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, ctx) }, `${key}dt${i}`);
         }
-        return /* @__PURE__ */ jsx19("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`, ctx) }, `${key}dd${i}`);
+        return /* @__PURE__ */ jsx22("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`, ctx) }, `${key}dd${i}`);
       }) }, key);
     default:
       return null;
@@ -3604,15 +4006,15 @@ function renderBlock(node, key, ctx = DEFAULT_CTX) {
 }
 function renderListItem(item, key, ctx = DEFAULT_CTX) {
   const isTask = item.checked !== null && item.checked !== void 0;
-  return /* @__PURE__ */ jsxs12("li", { className: `squisq-md-li${isTask ? " squisq-md-task" : ""}`, children: [
-    isTask && /* @__PURE__ */ jsx19("input", { type: "checkbox", checked: !!item.checked, readOnly: true, className: "squisq-md-checkbox" }),
+  return /* @__PURE__ */ jsxs13("li", { className: `squisq-md-li${isTask ? " squisq-md-task" : ""}`, children: [
+    isTask && /* @__PURE__ */ jsx22("input", { type: "checkbox", checked: !!item.checked, readOnly: true, className: "squisq-md-checkbox" }),
     renderBlocks(item.children, key, ctx)
   ] }, key);
 }
 function renderTable(rows, align, key, ctx = DEFAULT_CTX) {
   const [headerRow, ...bodyRows] = rows;
-  return /* @__PURE__ */ jsxs12("table", { className: "squisq-md-table", children: [
-    headerRow && /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { children: headerRow.children.map((cell, ci) => /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs13("table", { className: "squisq-md-table", children: [
+    headerRow && /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsx22("tr", { children: headerRow.children.map((cell, ci) => /* @__PURE__ */ jsx22(
       "th",
       {
         className: "squisq-md-th",
@@ -3621,7 +4023,7 @@ function renderTable(rows, align, key, ctx = DEFAULT_CTX) {
       },
       `${key}th${ci}`
     )) }) }),
-    bodyRows.length > 0 && /* @__PURE__ */ jsx19("tbody", { children: bodyRows.map((row, ri) => /* @__PURE__ */ jsx19("tr", { children: row.children.map((cell, ci) => /* @__PURE__ */ jsx19(
+    bodyRows.length > 0 && /* @__PURE__ */ jsx22("tbody", { children: bodyRows.map((row, ri) => /* @__PURE__ */ jsx22("tr", { children: row.children.map((cell, ci) => /* @__PURE__ */ jsx22(
       "td",
       {
         className: "squisq-md-td",
@@ -3639,7 +4041,7 @@ function MdImage({ src, alt, title }) {
   const safeSrc = sanitizeUrl(src, "media");
   const resolved = useMediaUrl(safeSrc ?? "", ".");
   if (!safeSrc) return null;
-  return /* @__PURE__ */ jsx19("img", { className: "squisq-md-image", src: resolved, alt, title });
+  return /* @__PURE__ */ jsx22("img", { className: "squisq-md-image", src: resolved, alt, title });
 }
 function resolveHtmlNodes(nodes, htmlPolicy) {
   if (htmlPolicy === "strip") return [];
@@ -3675,6 +4077,7 @@ var PASSTHROUGH_ATTRS = {
   target: "target",
   rel: "rel"
 };
+var RE_USED_TARGETS = /* @__PURE__ */ new Set(["", "_self", "_parent", "_top"]);
 function reactPropsFromAttrs(attrs, ctx) {
   const out = {};
   for (const [name, value] of Object.entries(attrs)) {
@@ -3696,6 +4099,12 @@ function reactPropsFromAttrs(attrs, ctx) {
     }
     out[propName] = value;
   }
+  if (typeof out.target === "string" && !RE_USED_TARGETS.has(out.target.toLowerCase())) {
+    const rel = typeof out.rel === "string" ? out.rel : "";
+    const tokens = rel.split(/\s+/).filter((t) => t && t.toLowerCase() !== "opener");
+    if (!tokens.some((t) => t.toLowerCase() === "noopener")) tokens.push("noopener");
+    out.rel = tokens.join(" ");
+  }
   return out;
 }
 function renderHtmlElement(el, key, ctx) {
@@ -3704,7 +4113,7 @@ function renderHtmlElement(el, key, ctx) {
   if (tagName === "video") {
     const src = sanitizeUrl(el.attributes.src ?? "", "media") ?? "";
     const poster = sanitizeUrl(el.attributes.poster ?? "", "media") ?? void 0;
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx22(
       InlineVideoPlayer,
       {
         src,
@@ -3719,7 +4128,7 @@ function renderHtmlElement(el, key, ctx) {
   }
   if (tagName === "audio") {
     const src = sanitizeUrl(el.attributes.src ?? "", "media") ?? "";
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx22(
       InlineAudioPlayer,
       {
         src,
@@ -3732,9 +4141,9 @@ function renderHtmlElement(el, key, ctx) {
   const Tag = tagName;
   const props = reactPropsFromAttrs(el.attributes, ctx);
   if (el.selfClosing) {
-    return /* @__PURE__ */ jsx19(Tag, { ...props }, key);
+    return /* @__PURE__ */ jsx22(Tag, { ...props }, key);
   }
-  return /* @__PURE__ */ jsx19(Tag, { ...props, children: renderHtmlNodes(el.children, `${key}c`, ctx) }, key);
+  return /* @__PURE__ */ jsx22(Tag, { ...props, children: renderHtmlNodes(el.children, `${key}c`, ctx) }, key);
 }
 function renderHtmlNodes(nodes, keyPrefix, ctx = DEFAULT_CTX) {
   return nodes.map((node, i) => {
@@ -3743,7 +4152,7 @@ function renderHtmlNodes(nodes, keyPrefix, ctx = DEFAULT_CTX) {
       case "htmlElement":
         return renderHtmlElement(node, key, ctx);
       case "htmlText":
-        return /* @__PURE__ */ jsx19(Fragment2, { children: node.value }, key);
+        return /* @__PURE__ */ jsx22(Fragment2, { children: node.value }, key);
       case "htmlComment":
         return null;
       default:
@@ -3758,123 +4167,362 @@ function MarkdownRenderer({
   linkSchemes
 }) {
   if (!nodes || nodes.length === 0) return null;
-  return /* @__PURE__ */ jsx19("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", { htmlPolicy, linkSchemes }) });
+  return /* @__PURE__ */ jsx22("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", { htmlPolicy, linkSchemes }) });
 }
 
-// src/LinearDocView.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
-function isAnnotatedBlock(block) {
-  return !!block.sourceHeading?.templateAnnotation?.template || !block.sourceHeading && isTemplateBlock2(block);
-}
-function visualTemplateName(block) {
-  return block.sourceHeading?.templateAnnotation?.template ?? block.template;
-}
-function countAll(blocks) {
-  let count = 0;
-  for (const b of blocks) {
-    count++;
-    if (b.children) count += countAll(b.children);
+// src/page/sections.tsx
+import { sanitizeUrl as sanitizeUrl2 } from "@bendyline/squisq/markdown";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+function PageImg({
+  media,
+  eager,
+  className
+}) {
+  const { basePath } = usePageView();
+  const safeSrc = sanitizeUrl2(media.src, "media");
+  const resolved = useMediaUrl(safeSrc ?? "", basePath);
+  if (!safeSrc) return null;
+  return /* @__PURE__ */ jsx23(
+    "img",
+    {
+      className,
+      src: resolved,
+      alt: media.alt,
+      loading: eager ? "eager" : "lazy",
+      decoding: "async",
+      width: media.width,
+      height: media.height
+    }
+  );
+}
+function BackdropVideo({ media }) {
+  const { basePath } = usePageView();
+  const safeSrc = sanitizeUrl2(media.src, "media");
+  const resolvedSrc = useMediaUrl(safeSrc ?? "", basePath);
+  const safePoster = media.posterSrc ? sanitizeUrl2(media.posterSrc, "media") : void 0;
+  const resolvedPoster = useMediaUrl(safePoster ?? "", basePath);
+  if (!safeSrc) return null;
+  return /* @__PURE__ */ jsx23(
+    "video",
+    {
+      src: resolvedSrc,
+      poster: safePoster ? resolvedPoster : void 0,
+      muted: true,
+      loop: true,
+      autoPlay: true,
+      playsInline: true,
+      preload: "metadata"
+    }
+  );
+}
+function Eyebrow({ section }) {
+  if (!section.slots.eyebrow) return null;
+  return /* @__PURE__ */ jsx23("span", { className: "squisq-page-eyebrow", children: section.slots.eyebrow });
+}
+function MediaCredit({ media }) {
+  if (!media || media.type === "canvas" || !media.credit) return null;
+  return /* @__PURE__ */ jsxs14("span", { className: "squisq-page-media-credit", children: [
+    media.credit,
+    media.license ? ` \xB7 ${media.license}` : ""
+  ] });
+}
+function HeroSection({ section }) {
+  const { pageStyle } = usePageView();
+  const media = section.slots.media;
+  const image = media?.type === "image" ? media : void 0;
+  const heroStyle = pageStyle.tokens.heroStyle;
+  const body = /* @__PURE__ */ jsxs14("div", { className: "squisq-page-hero-body", children: [
+    /* @__PURE__ */ jsx23(Eyebrow, { section }),
+    /* @__PURE__ */ jsx23("h1", { className: "squisq-page-hero-title", children: section.slots.title }),
+    section.slots.subtitle && /* @__PURE__ */ jsx23("p", { className: "squisq-page-hero-subtitle", children: section.slots.subtitle })
+  ] });
+  if (image && heroStyle === "split") {
+    return /* @__PURE__ */ jsxs14("div", { className: "squisq-page-hero-grid", children: [
+      body,
+      /* @__PURE__ */ jsxs14("div", { className: "squisq-page-hero-media squisq-page-media-frame", children: [
+        /* @__PURE__ */ jsx23(PageImg, { media: image, eager: true }),
+        /* @__PURE__ */ jsx23(MediaCredit, { media: image })
+      ] })
+    ] });
   }
-  return count;
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    image && section.background === "media" && /* @__PURE__ */ jsx23("div", { className: "squisq-page-hero-backdrop", children: /* @__PURE__ */ jsx23(PageImg, { media: image, eager: true }) }),
+    body
+  ] });
 }
-function BlockSection({
-  block,
-  basePath,
-  viewport,
-  renderContext,
-  blockIndex,
-  blockIndices,
-  animationsEnabled
+function BannerSection({ section }) {
+  const media = section.slots.media;
+  const image = media?.type === "image" ? media : void 0;
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    image && section.background === "media" && /* @__PURE__ */ jsx23("div", { className: "squisq-page-hero-backdrop", children: /* @__PURE__ */ jsx23(PageImg, { media: image }) }),
+    /* @__PURE__ */ jsxs14("div", { className: "squisq-page-banner-body", children: [
+      /* @__PURE__ */ jsx23(Eyebrow, { section }),
+      /* @__PURE__ */ jsx23("h2", { className: "squisq-page-section-title squisq-page-banner-title", children: section.slots.title })
+    ] })
+  ] });
+}
+function StatBandSection({ section }) {
+  const items = section.slots.items ?? [];
+  const comparison = section.variant === "comparison";
+  const numericValues = items.map(
+    (item) => typeof item.value === "number" ? item.value : Number.parseFloat(String(item.value ?? ""))
+  );
+  const maxValue = Math.max(1, ...numericValues.filter((value) => Number.isFinite(value)));
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsx23("div", { className: "squisq-page-stats", children: items.map((item, i) => /* @__PURE__ */ jsxs14("div", { className: `squisq-page-stat${comparison ? " squisq-page-stat--bars" : ""}`, children: [
+      /* @__PURE__ */ jsx23("span", { className: "squisq-page-stat-value", children: item.value }),
+      comparison && Number.isFinite(numericValues[i]) && /* @__PURE__ */ jsx23(
+        "div",
+        {
+          className: "squisq-page-stat-bar",
+          style: { width: `${Math.max(4, numericValues[i] / maxValue * 100)}%` }
+        }
+      ),
+      item.title && /* @__PURE__ */ jsx23("span", { className: "squisq-page-stat-title", children: item.title }),
+      item.body && /* @__PURE__ */ jsx23("span", { className: "squisq-page-stat-body", children: item.body })
+    ] }, i)) }),
+    section.slots.meta && /* @__PURE__ */ jsx23("div", { className: "squisq-page-stat-meta", children: section.slots.meta })
+  ] });
+}
+function QuoteBandSection({ section }) {
+  const media = section.slots.media;
+  const backdrop = section.background === "media" && media && media.type !== "canvas";
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    backdrop && /* @__PURE__ */ jsx23("div", { className: "squisq-page-quote-backdrop", children: media.type === "image" ? /* @__PURE__ */ jsx23(PageImg, { media }) : /* @__PURE__ */ jsx23(BackdropVideo, { media }) }),
+    /* @__PURE__ */ jsxs14("figure", { className: "squisq-page-quote-figure", style: { margin: 0 }, children: [
+      /* @__PURE__ */ jsx23("blockquote", { className: "squisq-page-quote", children: section.slots.body?.text }),
+      section.slots.attribution && /* @__PURE__ */ jsx23("figcaption", { className: "squisq-page-quote-attribution", children: section.slots.attribution })
+    ] })
+  ] });
+}
+function FeatureSplitSection({
+  section,
+  flip
 }) {
-  const isAnnotated = isAnnotatedBlock(block);
-  const visualBlock = useMemo8(() => {
-    if (!isAnnotated) return null;
-    const annotation = block.sourceHeading?.templateAnnotation;
-    const templateName = visualTemplateName(block) ?? "sectionHeader";
-    const templateBlock = annotation ? (() => {
-      const headingText = extractPlainText(block.sourceHeading);
-      return {
-        id: block.id,
-        template: templateName,
-        startTime: 0,
-        duration: 1,
-        audioSegment: 0,
-        title: headingText,
-        contents: block.contents,
-        children: block.children,
-        ...deriveTemplateInputs(templateName, headingText, block.contents, {
-          placeholders: true
-        }) ?? {},
-        ...annotation.params,
-        ...block.templateOverrides
-      };
-    })() : {
-      ...block,
-      startTime: block.startTime ?? 0,
-      duration: block.duration ?? 1,
-      audioSegment: block.audioSegment ?? 0,
-      template: templateName
-    };
-    const ctx = {
-      ...renderContext,
-      blockIndex
-    };
-    const { layers } = materializeBlockLayers(templateBlock, ctx);
-    return {
-      ...block,
-      layers,
-      template: templateName
-    };
-  }, [block, isAnnotated, renderContext, blockIndex]);
-  return /* @__PURE__ */ jsxs13(
+  const media = section.slots.media;
+  const image = media?.type === "image" ? media : void 0;
+  const mediaRight = flip ? section.variant !== "media-right" : section.variant === "media-right";
+  return /* @__PURE__ */ jsxs14("div", { className: `squisq-page-feature${mediaRight ? " squisq-page-feature--media-right" : ""}`, children: [
+    /* @__PURE__ */ jsxs14("div", { className: "squisq-page-feature-media squisq-page-media-frame", children: [
+      image && /* @__PURE__ */ jsx23(PageImg, { media: image }),
+      /* @__PURE__ */ jsx23(MediaCredit, { media: image })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "squisq-page-feature-text", children: [
+      /* @__PURE__ */ jsx23(Eyebrow, { section }),
+      section.slots.title && /* @__PURE__ */ jsx23("h3", { className: "squisq-page-section-title squisq-page-feature-title", children: section.slots.title }),
+      section.slots.body?.text && /* @__PURE__ */ jsx23("p", { className: "squisq-page-feature-body", children: section.slots.body.text })
+    ] })
+  ] });
+}
+function MediaFigureSection({ section }) {
+  const { basePath } = usePageView();
+  const media = section.slots.media;
+  if (!media || media.type === "canvas") return null;
+  return /* @__PURE__ */ jsxs14("figure", { className: "squisq-page-figure", children: [
+    /* @__PURE__ */ jsx23("div", { className: "squisq-page-media-frame", children: media.type === "image" ? /* @__PURE__ */ jsx23(PageImg, { media }) : /* @__PURE__ */ jsx23(InlineVideoPlayer, { src: media.src, poster: media.posterSrc, basePath }) }),
+    (section.slots.caption || media.credit) && /* @__PURE__ */ jsxs14("figcaption", { children: [
+      section.slots.caption,
+      media.credit && /* @__PURE__ */ jsxs14(Fragment3, { children: [
+        section.slots.caption ? " " : "",
+        /* @__PURE__ */ jsx23(MediaCredit, { media })
+      ] })
+    ] })
+  ] });
+}
+function GallerySection({ section }) {
+  const items = section.slots.items ?? [];
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxs14("div", { className: "squisq-page-gallery-empty", children: [
+      section.slots.title && /* @__PURE__ */ jsx23("h2", { className: "squisq-page-section-title", children: section.slots.title }),
+      section.slots.body?.text && /* @__PURE__ */ jsx23("p", { children: section.slots.body.text }),
+      section.slots.caption && /* @__PURE__ */ jsx23("div", { className: "squisq-page-gallery-caption", children: section.slots.caption })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsx23("div", { className: "squisq-page-gallery", children: items.map(
+      (item, i) => item.media?.type === "image" ? /* @__PURE__ */ jsx23("div", { className: "squisq-page-media-frame", children: /* @__PURE__ */ jsx23(PageImg, { media: item.media }) }, i) : null
+    ) }),
+    section.slots.caption && /* @__PURE__ */ jsx23("div", { className: "squisq-page-gallery-caption", children: section.slots.caption })
+  ] });
+}
+function CalloutSection({ section }) {
+  const media = section.slots.media;
+  const image = media?.type === "image" ? media : void 0;
+  const framing = section.hints?.framing;
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: "squisq-linear-section",
-      "data-block-id": block.id,
-      "data-block-index": blockIndex,
-      "data-template": isAnnotated ? visualTemplateName(block) : void 0,
+      className: "squisq-page-callout",
+      "data-hint-framing": typeof framing === "string" ? framing : void 0,
       children: [
-        block.sourceHeading && !isAnnotated && /* @__PURE__ */ jsx20(MarkdownRenderer, { nodes: [block.sourceHeading] }),
-        isAnnotated && visualBlock && /* @__PURE__ */ jsx20("div", { className: "squisq-linear-card", children: /* @__PURE__ */ jsx20(
-          "div",
-          {
-            className: "squisq-linear-card-svg",
-            style: {
-              width: "100%",
-              aspectRatio: `${viewport.width} / ${viewport.height}`,
-              overflow: "hidden",
-              marginBottom: "1em"
-            },
-            children: /* @__PURE__ */ jsx20(
-              BlockRenderer,
-              {
-                block: visualBlock,
-                blockTime: 0,
-                basePath,
-                viewport,
-                animationsEnabled
-              }
-            )
-          }
-        ) }),
-        !isAnnotated && block.contents && block.contents.length > 0 && /* @__PURE__ */ jsx20(MarkdownRenderer, { nodes: block.contents }),
-        block.children && block.children.length > 0 && /* @__PURE__ */ jsx20("div", { className: "squisq-linear-children", children: block.children.map((child, i) => /* @__PURE__ */ jsx20(
-          BlockSection,
-          {
-            block: child,
-            basePath,
-            viewport,
-            renderContext,
-            blockIndex: blockIndices.get(child) ?? blockIndex + i + 1,
-            blockIndices,
-            animationsEnabled
-          },
-          child.id
-        )) })
+        image && /* @__PURE__ */ jsx23("div", { className: "squisq-page-media-frame", children: /* @__PURE__ */ jsx23(PageImg, { media: image }) }),
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx23(Eyebrow, { section }),
+          section.slots.title && /* @__PURE__ */ jsx23("h3", { className: "squisq-page-callout-title", children: section.slots.title }),
+          section.slots.body?.text && /* @__PURE__ */ jsx23("p", { className: "squisq-page-callout-body", children: section.slots.body.text }),
+          section.slots.meta && /* @__PURE__ */ jsx23("div", { className: "squisq-page-callout-meta", children: section.slots.meta })
+        ] })
       ]
     }
   );
 }
+function CardGridSection({ section }) {
+  const { theme } = usePageView();
+  const items = section.slots.items ?? [];
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    section.slots.title && /* @__PURE__ */ jsx23("h2", { className: "squisq-page-section-title squisq-page-cards-title", children: section.slots.title }),
+    /* @__PURE__ */ jsx23("div", { className: "squisq-page-cards", children: items.map((item, i) => {
+      const scheme = item.accentScheme ? theme.colorSchemes?.[item.accentScheme] : void 0;
+      return /* @__PURE__ */ jsxs14(
+        "div",
+        {
+          className: "squisq-page-card",
+          style: scheme ? { "--squisq-page-card-accent": scheme.accent } : void 0,
+          children: [
+            item.title && /* @__PURE__ */ jsx23("h3", { className: "squisq-page-card-title", children: item.title }),
+            item.body && /* @__PURE__ */ jsx23("p", { className: "squisq-page-card-body", children: item.body })
+          ]
+        },
+        i
+      );
+    }) })
+  ] });
+}
+function ItemListSection({ section }) {
+  const items = section.slots.items ?? [];
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    section.slots.title && /* @__PURE__ */ jsx23("h2", { className: "squisq-page-section-title squisq-page-items-title", children: section.slots.title }),
+    /* @__PURE__ */ jsx23("ol", { className: "squisq-page-items", children: items.map((item, i) => /* @__PURE__ */ jsx23("li", { children: item.body }, i)) })
+  ] });
+}
+function TimelineRailSection({ section }) {
+  const milestone = section.slots.milestone;
+  if (!milestone) return null;
+  return /* @__PURE__ */ jsxs14("div", { className: "squisq-page-milestone", "data-mood": milestone.mood, children: [
+    /* @__PURE__ */ jsx23("div", { className: "squisq-page-milestone-date", children: milestone.date }),
+    /* @__PURE__ */ jsx23("div", { className: "squisq-page-milestone-rail", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs14("div", { className: "squisq-page-milestone-body", children: [
+      milestone.description,
+      milestone.footer && /* @__PURE__ */ jsx23("div", { className: "squisq-page-milestone-footer", children: milestone.footer })
+    ] })
+  ] });
+}
+function TableSection({ section }) {
+  const table = section.slots.table;
+  if (!table) return null;
+  const alignFor = (i) => table.align?.[i] ?? void 0;
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    section.slots.title && /* @__PURE__ */ jsx23("h2", { className: "squisq-page-section-title squisq-page-table-title", children: section.slots.title }),
+    /* @__PURE__ */ jsx23("div", { className: "squisq-page-table-scroll", children: /* @__PURE__ */ jsxs14("table", { className: "squisq-page-table", children: [
+      /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsx23("tr", { children: table.headers.map((header, i) => /* @__PURE__ */ jsx23("th", { style: { textAlign: alignFor(i) }, children: header }, i)) }) }),
+      /* @__PURE__ */ jsx23("tbody", { children: table.rows.map((row, r) => /* @__PURE__ */ jsx23("tr", { children: row.map((cell, c) => /* @__PURE__ */ jsx23("td", { style: { textAlign: alignFor(c) }, children: cell }, c)) }, r)) })
+    ] }) })
+  ] });
+}
+function ProseSection({ section, block }) {
+  const heading = section.slots.title !== void 0 && block?.sourceHeading ? /* @__PURE__ */ jsx23(MarkdownRenderer, { nodes: [block.sourceHeading] }) : null;
+  const bodyNodes = section.slots.body?.markdown ?? block?.contents;
+  return /* @__PURE__ */ jsxs14("div", { className: "squisq-page-prose", children: [
+    heading,
+    bodyNodes && bodyNodes.length > 0 && /* @__PURE__ */ jsx23(MarkdownRenderer, { nodes: bodyNodes })
+  ] });
+}
+function FooterSection({ section }) {
+  return /* @__PURE__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsx23(Eyebrow, { section }),
+    section.slots.title && /* @__PURE__ */ jsx23("h2", { className: "squisq-page-section-title", children: section.slots.title }),
+    section.slots.body?.text && /* @__PURE__ */ jsx23("p", { children: section.slots.body.text })
+  ] });
+}
+
+// src/page/PageSectionView.tsx
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+function heroHasBackdrop(section, heroStyle) {
+  return section.kind === "hero" && section.background === "media" && section.slots.media?.type === "image" && heroStyle !== "split";
+}
+function accentVars(section) {
+  const scheme = section.accent.scheme;
+  if (!scheme) return void 0;
+  return {
+    "--squisq-page-accent": scheme.accent,
+    "--squisq-page-accent-bg": scheme.bg,
+    "--squisq-page-accent-text": scheme.text
+  };
+}
+function sectionBody(entry, featureFlip) {
+  const { section, block } = entry;
+  switch (section.kind) {
+    case "hero":
+      return /* @__PURE__ */ jsx24(HeroSection, { section, block });
+    case "banner":
+      return /* @__PURE__ */ jsx24(BannerSection, { section, block });
+    case "stat-band":
+      return /* @__PURE__ */ jsx24(StatBandSection, { section, block });
+    case "quote-band":
+      return /* @__PURE__ */ jsx24(QuoteBandSection, { section, block });
+    case "feature-split":
+      return /* @__PURE__ */ jsx24(FeatureSplitSection, { section, block, flip: featureFlip });
+    case "media-figure":
+      return /* @__PURE__ */ jsx24(MediaFigureSection, { section, block });
+    case "gallery":
+      return /* @__PURE__ */ jsx24(GallerySection, { section, block });
+    case "callout":
+      return /* @__PURE__ */ jsx24(CalloutSection, { section, block });
+    case "card-grid":
+      return /* @__PURE__ */ jsx24(CardGridSection, { section, block });
+    case "item-list":
+      return /* @__PURE__ */ jsx24(ItemListSection, { section, block });
+    case "timeline-rail":
+      return /* @__PURE__ */ jsx24(TimelineRailSection, { section, block });
+    case "table-section":
+      return /* @__PURE__ */ jsx24(TableSection, { section, block });
+    case "canvas-embed":
+      return /* @__PURE__ */ jsx24(CanvasSection, { section });
+    case "footer":
+      return /* @__PURE__ */ jsx24(FooterSection, { section, block });
+    case "prose":
+    default:
+      return /* @__PURE__ */ jsx24(ProseSection, { section, block });
+  }
+}
+function PageSectionView({ entry, featureFlip, isLeadProse }) {
+  const { pageStyle } = usePageView();
+  const { section } = entry;
+  const richContent = section.slots.richContent?.markdown;
+  const classes = [
+    "squisq-linear-section",
+    "squisq-page-section",
+    `squisq-page-section--${section.kind}`,
+    `squisq-page-section--bg-${section.background}`,
+    `squisq-page-section--em-${section.emphasis}`
+  ];
+  if (section.variant) classes.push(`squisq-page-section--v-${section.variant}`);
+  if (heroHasBackdrop(section, pageStyle.tokens.heroStyle)) {
+    classes.push("squisq-page-section--hero-media");
+  }
+  const hintAttrs = {};
+  if (section.hints?.vignette) hintAttrs["data-hint-vignette"] = "";
+  if (section.hints?.dropCap && isLeadProse) hintAttrs["data-hint-drop-cap"] = "";
+  return /* @__PURE__ */ jsx24(
+    "section",
+    {
+      className: classes.join(" "),
+      "data-section-kind": section.kind,
+      "data-block-id": section.blockId,
+      "data-block-index": section.index,
+      "data-template": section.template,
+      style: accentVars(section),
+      ...hintAttrs,
+      children: /* @__PURE__ */ jsxs15("div", { className: "squisq-page-section-inner", children: [
+        sectionBody(entry, featureFlip),
+        richContent && richContent.length > 0 && /* @__PURE__ */ jsx24("div", { className: "squisq-page-rich-content", children: /* @__PURE__ */ jsx24(MarkdownRenderer, { nodes: richContent }) })
+      ] })
+    }
+  );
+}
+
+// src/LinearDocView.tsx
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function LinearDocView({
   doc,
   markdown,
@@ -3886,48 +4534,82 @@ function LinearDocView({
   animationsEnabled = true,
   thinMargins = false,
   imageDisplayMode = "inline",
-  globalKeyboardShortcuts = false
+  globalKeyboardShortcuts = false,
+  showCover = true,
+  transformPage
 }) {
   const scrollRef = useRef8(null);
-  const activeViewport = viewport ?? VIEWPORT_PRESETS3.landscape;
-  const markdownDoc = useMemo8(
+  const activeViewport = viewport ?? VIEWPORT_PRESETS4.landscape;
+  const markdownDoc = useMemo9(
     () => !doc && markdown !== void 0 ? markdownToDoc(parseMarkdown(markdown)) : void 0,
     [doc, markdown]
   );
   const resolvedDoc = doc ?? markdownDoc;
-  const totalBlocks = useMemo8(
-    () => resolvedDoc ? countAll(resolvedDoc.blocks) : 0,
-    [resolvedDoc]
-  );
-  const blockIndices = useMemo8(() => {
-    const indices = /* @__PURE__ */ new Map();
-    let index = 0;
-    const visit = (blocks) => {
-      for (const block of blocks) {
-        indices.set(block, index++);
-        if (block.children) visit(block.children);
-      }
-    };
-    if (resolvedDoc) visit(resolvedDoc.blocks);
-    return indices;
-  }, [resolvedDoc]);
   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,
+  const activeTheme = useMemo9(() => {
+    const baseTheme = theme ?? DEFAULT_THEME3;
+    return resolvedSurface ? applySurface(baseTheme, resolvedSurface) : baseTheme;
+  }, [theme, resolvedSurface]);
+  const pageStyle = useMemo9(
+    () => resolvePageStyle2(activeTheme, transformPage),
+    [activeTheme, transformPage]
+  );
+  const sections = useMemo9(() => {
+    if (!resolvedDoc) return [];
+    return materializePageSections(resolvedDoc, {
+      theme: activeTheme,
       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,
+      customTemplates: resolvedDoc.customTemplates,
+      cover: showCover !== false ? resolvedDoc.startBlock : false,
+      transformPage
+    });
+  }, [resolvedDoc, activeTheme, activeViewport, showCover, transformPage]);
+  const renderContext = useMemo9(
+    () => ({
+      theme: activeTheme,
+      viewport: activeViewport,
+      totalBlocks: sections.length,
+      persistentLayers: activeTheme.persistentLayers,
       customTemplates: resolvedDoc?.customTemplates
-    };
-  }, [activeViewport, resolvedDoc?.customTemplates, totalBlocks, theme, resolvedSurface]);
-  const activeTheme = renderContext.theme;
-  useEffect9(() => {
+    }),
+    [activeTheme, activeViewport, sections.length, resolvedDoc?.customTemplates]
+  );
+  const pageContext = useMemo9(
+    () => ({
+      theme: activeTheme,
+      pageStyle,
+      basePath,
+      viewport: activeViewport,
+      renderContext,
+      animationsEnabled,
+      imageDisplayMode
+    }),
+    [
+      activeTheme,
+      pageStyle,
+      basePath,
+      activeViewport,
+      renderContext,
+      animationsEnabled,
+      imageDisplayMode
+    ]
+  );
+  const { featureOrdinals, leadProseIndex } = useMemo9(() => {
+    const ordinals = /* @__PURE__ */ new Map();
+    let featureCount = 0;
+    let firstProse = -1;
+    for (const entry of sections) {
+      if (entry.section.kind === "feature-split") {
+        ordinals.set(entry.section.index, featureCount++);
+      }
+      if (firstProse < 0 && entry.section.kind === "prose") {
+        firstProse = entry.section.index;
+      }
+    }
+    return { featureOrdinals: ordinals, leadProseIndex: firstProse };
+  }, [sections]);
+  useEffect10(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -3952,7 +4634,7 @@ function LinearDocView({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [globalKeyboardShortcuts]);
   if (!resolvedDoc) {
-    return /* @__PURE__ */ jsx20("div", { ref: scrollRef, className: `squisq-linear squisq-linear--empty ${className || ""}` });
+    return /* @__PURE__ */ jsx25("div", { ref: scrollRef, className: `squisq-linear squisq-linear--empty ${className || ""}` });
   }
   const bgColor = activeTheme.colors.background;
   const textColor = activeTheme.colors.text;
@@ -3960,12 +4642,22 @@ function LinearDocView({
   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__ */ jsx20(
+  const lineHt = activeTheme.typography.lineHeight ?? 1.65;
+  const contentClasses = [
+    "squisq-linear-content",
+    "squisq-md",
+    "squisq-page",
+    thinMargins ? "squisq-linear-content--thin squisq-page--thin" : "",
+    imageDisplayMode === "thumbnail" ? "squisq-linear-content--thumbnail-images squisq-page--thumbnail-images" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ref: scrollRef,
       className: `squisq-linear ${className || ""}`,
+      role: "region",
+      "aria-label": "Document page",
+      tabIndex: thinMargins ? void 0 : 0,
       style: {
         width: "100%",
         // Thin-margins mode is the "embedded in someone else's container"
@@ -3976,25 +4668,26 @@ function LinearDocView({
         height: thinMargins ? "auto" : "100%",
         overflowY: thinMargins ? "visible" : "auto",
         overflowX: "hidden",
-        background: bgColor
+        background: bgColor,
+        // Container queries drive the responsive page layout — the page
+        // often lives inside editor panes / chat bubbles where viewport
+        // media queries lie about the available width.
+        containerType: "inline-size",
+        containerName: "squisq-page"
       },
-      children: /* @__PURE__ */ jsxs13(
+      children: /* @__PURE__ */ jsxs16(
         "div",
         {
-          className: `squisq-linear-content squisq-md${thinMargins ? " squisq-linear-content--thin" : ""}${imageDisplayMode === "thumbnail" ? " squisq-linear-content--thumbnail-images" : ""}`,
+          className: contentClasses,
+          ...pageStyleDataAttributes(pageStyle),
           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
+            ...buildPageCssVars(activeTheme, pageStyle),
+            // Legacy custom properties kept for one release so host CSS
+            // and MarkdownRenderer content keyed on them keep working.
             "--squisq-linear-title-font": titleFont,
             "--squisq-linear-body-font": bodyFont,
             "--squisq-linear-text": textColor,
@@ -4003,134 +4696,20 @@ function LinearDocView({
             "--squisq-linear-bg": bgColor
           },
           children: [
-            /* @__PURE__ */ jsx20("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 p + p {
-            margin-top: 1.25em;
-          }
-          .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);
-          }
-        ` }),
-            resolvedDoc.blocks.map((block, i) => /* @__PURE__ */ jsx20(
-              BlockSection,
-              {
-                block,
-                basePath,
-                viewport: activeViewport,
-                renderContext,
-                blockIndex: blockIndices.get(block) ?? i,
-                blockIndices,
-                animationsEnabled
-              },
-              block.id
-            ))
+            /* @__PURE__ */ jsx25("style", { "data-squisq-page": "", children: PAGE_BASE_CSS }),
+            /* @__PURE__ */ jsx25(PageViewContext.Provider, { value: pageContext, children: sections.map((entry) => {
+              const ordinal = featureOrdinals.get(entry.section.index) ?? 0;
+              const flip = !!entry.section.hints?.alternate && ordinal % 2 === 1;
+              return /* @__PURE__ */ jsx25(
+                PageSectionView,
+                {
+                  entry,
+                  featureFlip: flip,
+                  isLeadProse: entry.section.index === leadProseIndex
+                },
+                `${entry.section.blockId}-${entry.section.index}`
+              );
+            }) })
           ]
         }
       )
@@ -4138,8 +4717,8 @@ function LinearDocView({
   );
 }
 
-// src/DocPlayer.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+// src/docPlayer/segmentTitles.ts
+import { isTemplateBlock as isTemplateBlock2 } from "@bendyline/squisq/schemas";
 var SMALL_WORDS = /* @__PURE__ */ new Set([
   "a",
   "an",
@@ -4160,31 +4739,30 @@ var SMALL_WORDS = /* @__PURE__ */ new Set([
 function buildSegmentTitleMap(doc) {
   const map = /* @__PURE__ */ new Map();
   for (const block of doc.blocks) {
-    if (isTemplateBlock3(block) && block.template === "sectionHeader" && "title" in block) {
-      const segIdx = block.audioSegment;
-      if (!map.has(segIdx)) {
-        map.set(segIdx, block.title);
-      }
+    if (isTemplateBlock2(block) && block.template === "sectionHeader" && "title" in block) {
+      const segmentIndex = block.audioSegment;
+      if (!map.has(segmentIndex)) map.set(segmentIndex, block.title);
     }
   }
-  for (let i = 0; i < doc.audio.segments.length; i++) {
-    if (!map.has(i)) {
-      const name = doc.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);
-      }
+  for (let index = 0; index < doc.audio.segments.length; index++) {
+    if (map.has(index)) continue;
+    const name = doc.audio.segments[index].name;
+    if (name.includes("intro")) {
+      map.set(index, "Introduction");
+    } else if (name.includes("flight-context")) {
+      map.set(index, "Flight Context");
+    } else {
+      const title = name.split("-").map(
+        (word, wordIndex) => wordIndex === 0 || !SMALL_WORDS.has(word) ? word.charAt(0).toUpperCase() + word.slice(1) : word
+      ).join(" ");
+      map.set(index, title);
     }
   }
   return map;
 }
+
+// src/DocPlayer.tsx
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 function isDevEnvironment() {
   try {
     return typeof process !== "undefined" && process.env.NODE_ENV !== "production";
@@ -4195,15 +4773,15 @@ function isDevEnvironment() {
 var warnedMissingStyles = false;
 function DocPlayer(props) {
   const { doc, markdown } = props;
-  const markdownDoc = useMemo9(
+  const markdownDoc = useMemo10(
     () => !doc && markdown !== void 0 ? markdownToDoc2(parseMarkdown2(markdown)) : void 0,
     [doc, markdown]
   );
   const resolvedDoc = doc ?? markdownDoc;
   if (!resolvedDoc) {
-    return /* @__PURE__ */ jsx21("div", { className: "doc-player doc-player--empty" });
+    return /* @__PURE__ */ jsx26("div", { className: "doc-player doc-player--empty" });
   }
-  return /* @__PURE__ */ jsx21(DocPlayerContent, { ...props, doc: resolvedDoc });
+  return /* @__PURE__ */ jsx26(DocPlayerContent, { ...props, doc: resolvedDoc });
 }
 function DocPlayerContent({
   doc,
@@ -4214,6 +4792,7 @@ function DocPlayerContent({
   onEnded,
   onTimeUpdate,
   audioController: externalAudioController,
+  audioMode = "media",
   showControls = true,
   showScrubber = false,
   muted = false,
@@ -4240,18 +4819,24 @@ function DocPlayerContent({
   const audioRef = useRef9(null);
   const containerRef = useRef9(null);
   const playerId = `squisq-player-${useId7().replace(/:/g, "")}`;
-  const [tapFeedback, setTapFeedback] = useState9(null);
+  const [tapFeedback, setTapFeedback] = useState10(null);
   const tapFeedbackTimer = useRef9();
   const { viewport, orientation } = useViewportOrientation();
-  const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS4.landscape : viewport);
-  const isDebugMode = useMemo9(() => {
+  const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS5.landscape : viewport);
+  const isDebugMode = useMemo10(() => {
     if (typeof window === "undefined") return false;
     const params = new URLSearchParams(window.location.search);
     return params.get("debug") === "true";
   }, []);
-  const internalAudio = useAudioSync(audioRef, doc.audio, basePath, !externalAudioController);
+  const internalAudio = useAudioSync(
+    audioRef,
+    doc.audio,
+    basePath,
+    !externalAudioController,
+    audioMode
+  );
   const audio = externalAudioController || internalAudio;
-  useEffect10(() => {
+  useEffect11(() => {
     if (warnedMissingStyles || !isDevEnvironment()) return;
     const el = containerRef.current;
     if (!el || typeof getComputedStyle !== "function") return;
@@ -4279,7 +4864,7 @@ function DocPlayerContent({
     skipToSegment: _skipToSegment,
     restart
   } = audio;
-  const mediaSchedule = useMemo9(() => resolveMediaSchedule(doc), [doc]);
+  const mediaSchedule = useMemo10(() => resolveMediaSchedule(doc), [doc]);
   const currentTimeRef = useRef9(currentTime);
   currentTimeRef.current = currentTime;
   const totalDurationRef = useRef9(totalDuration);
@@ -4310,8 +4895,8 @@ function DocPlayerContent({
   );
   const autoSurface = useAutoSurface(surface === "auto");
   const resolvedSurface = surface === "auto" ? autoSurface : surface;
-  const effectiveTheme = useMemo9(() => {
-    const base = theme ?? DEFAULT_THEME3;
+  const effectiveTheme = useMemo10(() => {
+    const base = theme ?? DEFAULT_THEME4;
     return resolvedSurface ? applySurface2(base, resolvedSurface) : base;
   }, [theme, resolvedSurface]);
   const {
@@ -4332,7 +4917,7 @@ function DocPlayerContent({
     theme: effectiveTheme,
     onSeek: seekTo
   });
-  const coverBlock = useMemo9(() => {
+  const coverBlock = useMemo10(() => {
     const startBlockConfig = doc.startBlock;
     if (!showCoverSlide) return null;
     if (!startBlockConfig) return null;
@@ -4349,13 +4934,13 @@ function DocPlayerContent({
     };
   }, [doc.startBlock, activeViewport, effectiveTheme, showCoverSlide]);
   const hasManagedCover = !!coverBlock;
-  const [slideshowCoverVisible, setSlideshowCoverVisible] = useState9(false);
-  const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState9(false);
+  const [slideshowCoverVisible, setSlideshowCoverVisible] = useState10(false);
+  const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState10(false);
   const slideshowCoverInitKeyRef = useRef9("");
-  useEffect10(() => {
+  useEffect11(() => {
     slideshowCoverInitKeyRef.current = "";
   }, [doc]);
-  useEffect10(() => {
+  useEffect11(() => {
     const initKey = `${isSlideshowMode}:${hasManagedCover}:${renderMode}`;
     if (slideshowCoverInitKeyRef.current === initKey) return;
     slideshowCoverInitKeyRef.current = initKey;
@@ -4366,12 +4951,12 @@ function DocPlayerContent({
       setSlideshowCoverVisible(false);
     }
   }, [isSlideshowMode, hasManagedCover, renderMode, pause]);
-  const [coverForced, setCoverForced] = useState9(false);
-  const [coverGraceActive, setCoverGraceActive] = useState9(false);
+  const [coverForced, setCoverForced] = useState10(false);
+  const [coverGraceActive, setCoverGraceActive] = useState10(false);
   const coverGraceTimer = useRef9();
   const coverWasShowing = useRef9(false);
   const hasPlayedOnce = useRef9(false);
-  useEffect10(() => {
+  useEffect11(() => {
     hasPlayedOnce.current = false;
     coverWasShowing.current = false;
     clearTimeout(coverGraceTimer.current);
@@ -4380,7 +4965,7 @@ function DocPlayerContent({
   }, [doc]);
   const atRest = !!(coverBlock && !isSlideshowMode && !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
   if (atRest) coverWasShowing.current = true;
-  useEffect10(() => {
+  useEffect11(() => {
     if (isPlaying && coverWasShowing.current && coverBlock && !renderMode && !isSlideshowMode) {
       coverWasShowing.current = false;
       hasPlayedOnce.current = true;
@@ -4388,7 +4973,8 @@ function DocPlayerContent({
       coverGraceTimer.current = setTimeout(() => setCoverGraceActive(false), 3e3);
     }
   }, [isPlaying, coverBlock, renderMode, isSlideshowMode]);
-  useEffect10(() => () => clearTimeout(coverGraceTimer.current), []);
+  useEffect11(() => () => clearTimeout(coverGraceTimer.current), []);
+  useEffect11(() => () => clearTimeout(tapFeedbackTimer.current), []);
   const showVideoCoverBlock = !isSlideshowMode && !isLinearMode && !!coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
   const effectiveSlideshowCoverVisible = coverVisible ?? slideshowCoverVisible;
   const showSlideshowCover = !!(isSlideshowMode && !isLinearMode && !renderMode && coverBlock && effectiveSlideshowCoverVisible);
@@ -4397,19 +4983,19 @@ function DocPlayerContent({
   const slideshowSlideIndex = slideshowHasCover ? effectiveSlideshowCoverVisible ? 0 : currentBlockIndex + 1 : currentBlockIndex;
   const slideshowTotalSlides = slideshowHasCover ? expandedBlocks.length + 1 : expandedBlocks.length;
   const hasAutoPlayed = useRef9(false);
-  useEffect10(() => {
+  useEffect11(() => {
     hasAutoPlayed.current = false;
   }, [doc]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
       hasAutoPlayed.current = true;
       play();
     }
   }, [isAudioReady, autoPlay, play]);
-  useEffect10(() => {
+  useEffect11(() => {
     onTimeUpdate?.(currentTime);
   }, [currentTime, onTimeUpdate]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (isEnded) {
       onEnded?.();
     }
@@ -4435,7 +5021,7 @@ function DocPlayerContent({
     };
   }
   const stableRenderAPI = stableRenderAPIRef.current;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!renderMode && !isDebugMode) {
       liveRenderAPIRef.current = null;
       return;
@@ -4572,7 +5158,7 @@ function DocPlayerContent({
       if (liveRenderAPIRef.current === api) liveRenderAPIRef.current = null;
     };
   }, [renderMode, isDebugMode, seekTo, totalDuration, expandedBlocks, coverBlock, doc]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!renderMode && !isDebugMode || !containerRef.current) {
       onRenderAPIReady?.(null);
       return;
@@ -4581,8 +5167,8 @@ function DocPlayerContent({
     return () => onRenderAPIReady?.(null);
   }, [renderMode, isDebugMode, onRenderAPIReady, stableRenderAPI]);
   const defaultMode = captionsEnabledProp === false ? "off" : captionStyle || "standard";
-  const [captionMode, setCaptionMode] = useState9(defaultMode);
-  useEffect10(() => {
+  const [captionMode, setCaptionMode] = useState10(defaultMode);
+  useEffect11(() => {
     setCaptionMode(defaultMode);
   }, [defaultMode]);
   const captionsEnabled = captionMode !== "off";
@@ -4602,8 +5188,8 @@ function DocPlayerContent({
     });
   }, [onCaptionsToggle]);
   const hasCaptions = doc.captions && doc.captions.phrases.length > 0;
-  const segmentTitleMap = useMemo9(() => buildSegmentTitleMap(doc), [doc]);
-  const playbackState = useMemo9(
+  const segmentTitleMap = useMemo10(() => buildSegmentTitleMap(doc), [doc]);
+  const playbackState = useMemo10(
     () => ({
       isPlaying,
       currentTime,
@@ -4646,7 +5232,7 @@ function DocPlayerContent({
       expandedBlocks.length
     ]
   );
-  const playbackActions = useMemo9(
+  const playbackActions = useMemo10(
     () => ({
       toggle,
       restart,
@@ -4657,7 +5243,7 @@ function DocPlayerContent({
     }),
     [toggle, restart, seekTo, setCaptionsEnabled, cycleCaptionMode, onFullscreenToggle]
   );
-  const slideNavActions = useMemo9(
+  const slideNavActions = useMemo10(
     () => ({
       nextSlide: () => {
         if (slideshowHasCover && slideshowCoverVisible) {
@@ -4746,10 +5332,10 @@ function DocPlayerContent({
     onNext: handleSwipeNext,
     onPrev: handleSwipePrev
   });
-  useEffect10(() => {
+  useEffect11(() => {
     onPlaybackStateChange?.(playbackState);
   }, [playbackState, onPlaybackStateChange]);
-  useEffect10(() => {
+  useEffect11(() => {
     onControlsReady?.({ play, pause, ...playbackActions });
   }, [play, pause, playbackActions, onControlsReady]);
   const getBlockTitle = useCallback7((block) => {
@@ -4776,7 +5362,7 @@ function DocPlayerContent({
     }
     return block.id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
   }, []);
-  const slideshowPickerItems = useMemo9(() => {
+  const slideshowPickerItems = useMemo10(() => {
     const blockItems = expandedBlocks.map((block, index) => ({
       id: block.id,
       label: String(index + 1),
@@ -4792,7 +5378,7 @@ function DocPlayerContent({
       ...blockItems
     ];
   }, [coverBlock, expandedBlocks, getBlockTitle, slideshowHasCover]);
-  const blockMarkers = useMemo9(() => {
+  const blockMarkers = useMemo10(() => {
     if (!totalDuration || !expandedBlocks.length) return [];
     let prevSegment = -1;
     return expandedBlocks.map((block, index) => {
@@ -4807,7 +5393,7 @@ function DocPlayerContent({
       };
     });
   }, [expandedBlocks, totalDuration, getBlockTitle]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (blockMarkers.length > 0) {
       onBlockMarkers?.(blockMarkers);
     }
@@ -4830,6 +5416,12 @@ function DocPlayerContent({
         return;
       }
       if (isLinearMode) return;
+      if (e.key === "f" || e.key === "F") {
+        if (!onFullscreenToggle) return;
+        e.preventDefault();
+        onFullscreenToggle();
+        return;
+      }
       if (isSlideshowMode) {
         switch (e.key) {
           case "ArrowRight":
@@ -4872,13 +5464,13 @@ function DocPlayerContent({
         }
       }
     },
-    [isSlideshowMode, isLinearMode, toggle, seekTo, slideNavActions]
+    [isSlideshowMode, isLinearMode, toggle, seekTo, slideNavActions, onFullscreenToggle]
   );
   const handleKeyDown = useCallback7(
     (e) => handleKeyboardShortcut(e, false),
     [handleKeyboardShortcut]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (!globalKeyboardShortcuts || renderMode || isLinearMode) return;
     const handleDocumentKeyDown = (event) => {
       handleKeyboardShortcut(event, true);
@@ -4887,7 +5479,7 @@ function DocPlayerContent({
     return () => document.removeEventListener("keydown", handleDocumentKeyDown);
   }, [globalKeyboardShortcuts, handleKeyboardShortcut, isLinearMode, renderMode]);
   if (isLinearMode) {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx26(
       "div",
       {
         ref: containerRef,
@@ -4899,7 +5491,7 @@ function DocPlayerContent({
           height: "100%",
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx26(
           LinearDocView,
           {
             doc,
@@ -4913,7 +5505,7 @@ function DocPlayerContent({
       }
     );
   }
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: containerRef,
@@ -4936,8 +5528,8 @@ function DocPlayerContent({
         touchAction: swipeEnabled ? "pan-y" : void 0
       },
       children: [
-        /* @__PURE__ */ jsx21("audio", { ref: audioRef, preload: "auto", muted }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx26("audio", { ref: audioRef, preload: "auto", muted }),
+        /* @__PURE__ */ jsx26(
           MediaClipLayer,
           {
             schedule: mediaSchedule,
@@ -4948,8 +5540,8 @@ function DocPlayerContent({
             muted
           }
         ),
-        /* @__PURE__ */ jsxs14("div", { className: "doc-player__viewport", children: [
-          showCoverBlock && coverBlock && /* @__PURE__ */ jsx21("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsxs17("div", { className: "doc-player__viewport", children: [
+          showCoverBlock && coverBlock && /* @__PURE__ */ jsx26("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx26(
             BlockRenderer,
             {
               block: coverBlock,
@@ -4964,7 +5556,7 @@ function DocPlayerContent({
           // 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__ */ jsx21("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx26("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx26(
             BlockRenderer,
             {
               block: previousBlock,
@@ -4976,12 +5568,12 @@ function DocPlayerContent({
               animationsEnabled
             }
           ) }, previousBlock.id),
-          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx21(
+          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx26(
             "div",
             {
               className: `doc-player__block doc-player__block--active${swipe.phase !== "idle" ? ` doc-player__block--${swipe.phase}` : ""}`,
               style: swipe.phase !== "idle" ? { transform: `translateX(${swipe.offsetPx}px)` } : void 0,
-              children: /* @__PURE__ */ jsx21(
+              children: /* @__PURE__ */ jsx26(
                 BlockRenderer,
                 {
                   block: currentBlock,
@@ -4996,7 +5588,7 @@ function DocPlayerContent({
             },
             currentBlock.id
           ),
-          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx21(
+          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx26(
             CaptionOverlay,
             {
               captions: doc.captions,
@@ -5008,7 +5600,7 @@ function DocPlayerContent({
               viewport: activeViewport
             }
           ),
-          isDebugMode && /* @__PURE__ */ jsxs14(
+          isDebugMode && /* @__PURE__ */ jsxs17(
             "div",
             {
               className: "doc-player__debug",
@@ -5029,27 +5621,27 @@ function DocPlayerContent({
                 textAlign: "left"
               },
               children: [
-                /* @__PURE__ */ jsx21("div", { style: { color: "#ffcc00", fontWeight: "bold", marginBottom: "4px" }, children: "DEBUG MODE" }),
-                /* @__PURE__ */ jsxs14("div", { children: [
-                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "template:" }),
+                /* @__PURE__ */ jsx26("div", { style: { color: "#ffcc00", fontWeight: "bold", marginBottom: "4px" }, children: "DEBUG MODE" }),
+                /* @__PURE__ */ jsxs17("div", { children: [
+                  /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "template:" }),
                   " ",
-                  /* @__PURE__ */ jsx21("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
+                  /* @__PURE__ */ jsx26("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
                 ] }),
-                /* @__PURE__ */ jsxs14("div", { children: [
-                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "block:" }),
+                /* @__PURE__ */ jsxs17("div", { children: [
+                  /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "block:" }),
                   " ",
                   currentBlockIndex + 1,
                   "/",
                   expandedBlocks.length,
                   " ",
-                  /* @__PURE__ */ jsxs14("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs17("span", { style: { color: "#666" }, children: [
                     "(",
                     currentBlock?.id || "none",
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs14("div", { children: [
-                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "time:" }),
+                /* @__PURE__ */ jsxs17("div", { children: [
+                  /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "time:" }),
                   " ",
                   currentTime.toFixed(2),
                   "s /",
@@ -5057,7 +5649,7 @@ function DocPlayerContent({
                   totalDuration.toFixed(1),
                   "s",
                   " ",
-                  /* @__PURE__ */ jsxs14("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs17("span", { style: { color: "#666" }, children: [
                     "(progress: ",
                     (docProgress * 100).toFixed(1),
                     "%, scriptDur: ",
@@ -5065,8 +5657,8 @@ function DocPlayerContent({
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs14("div", { children: [
-                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "blockTime:" }),
+                /* @__PURE__ */ jsxs17("div", { children: [
+                  /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "blockTime:" }),
                   " ",
                   blockTime.toFixed(2),
                   "s /",
@@ -5074,58 +5666,58 @@ function DocPlayerContent({
                   (currentBlock?.duration || 0).toFixed(1),
                   "s"
                 ] }),
-                /* @__PURE__ */ jsxs14("div", { children: [
-                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "segment:" }),
+                /* @__PURE__ */ jsxs17("div", { children: [
+                  /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "segment:" }),
                   " ",
                   currentSegment,
                   "/",
                   doc.audio.segments.length - 1,
                   " ",
-                  /* @__PURE__ */ jsxs14("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs17("span", { style: { color: "#666" }, children: [
                     "(",
                     doc.audio.segments[currentSegment]?.name || "none",
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs14("div", { children: [
-                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "viewport:" }),
+                /* @__PURE__ */ jsxs17("div", { children: [
+                  /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "viewport:" }),
                   " ",
                   activeViewport.name || `${activeViewport.width}x${activeViewport.height}`,
                   " ",
-                  /* @__PURE__ */ jsxs14("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs17("span", { style: { color: "#666" }, children: [
                     "(",
                     orientation,
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs14("div", { children: [
-                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "playing:" }),
+                /* @__PURE__ */ jsxs17("div", { children: [
+                  /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "playing:" }),
                   " ",
-                  /* @__PURE__ */ jsx21("span", { style: { color: isPlaying ? "#4ade80" : "#f87171" }, children: isPlaying ? "yes" : "no" }),
-                  showCoverBlock && /* @__PURE__ */ jsx21("span", { style: { color: "#60a5fa" }, children: " (cover)" })
+                  /* @__PURE__ */ jsx26("span", { style: { color: isPlaying ? "#4ade80" : "#f87171" }, children: isPlaying ? "yes" : "no" }),
+                  showCoverBlock && /* @__PURE__ */ jsx26("span", { style: { color: "#60a5fa" }, children: " (cover)" })
                 ] }),
                 hasCaptions && (() => {
                   const debugPhrase = getCaptionAtTime2(doc.captions, currentTime);
                   const debugEnabled = captionsEnabled && (isPlaying || currentTime > 0);
-                  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
-                    /* @__PURE__ */ jsxs14("div", { children: [
-                      /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "captions:" }),
+                  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+                    /* @__PURE__ */ jsxs17("div", { children: [
+                      /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "captions:" }),
                       " ",
                       doc.captions?.phrases.length || 0,
                       " phrases",
                       " ",
-                      /* @__PURE__ */ jsxs14("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
+                      /* @__PURE__ */ jsxs17("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
                         "(",
                         captionsEnabled ? "on" : "off",
                         ")"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs14("div", { children: [
-                      /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "cc.enabled:" }),
+                    /* @__PURE__ */ jsxs17("div", { children: [
+                      /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "cc.enabled:" }),
                       " ",
-                      /* @__PURE__ */ jsx21("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
+                      /* @__PURE__ */ jsx26("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
                       " ",
-                      /* @__PURE__ */ jsxs14("span", { style: { color: "#666" }, children: [
+                      /* @__PURE__ */ jsxs17("span", { style: { color: "#666" }, children: [
                         "(playing=",
                         String(isPlaying),
                         " t>0=",
@@ -5133,15 +5725,15 @@ function DocPlayerContent({
                         ")"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs14("div", { children: [
-                      /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "cc.phrase:" }),
+                    /* @__PURE__ */ jsxs17("div", { children: [
+                      /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "cc.phrase:" }),
                       " ",
-                      /* @__PURE__ */ jsx21("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
+                      /* @__PURE__ */ jsx26("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
                     ] }),
-                    debugPhrase && /* @__PURE__ */ jsxs14("div", { children: [
-                      /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "cc.range:" }),
+                    debugPhrase && /* @__PURE__ */ jsxs17("div", { children: [
+                      /* @__PURE__ */ jsx26("span", { style: { color: "#888" }, children: "cc.range:" }),
                       " ",
-                      /* @__PURE__ */ jsxs14("span", { style: { color: "#60a5fa" }, children: [
+                      /* @__PURE__ */ jsxs17("span", { style: { color: "#60a5fa" }, children: [
                         debugPhrase.startTime.toFixed(2),
                         "-",
                         debugPhrase.endTime.toFixed(2)
@@ -5153,7 +5745,7 @@ function DocPlayerContent({
             }
           )
         ] }),
-        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs14(
+        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs17(
           "div",
           {
             className: "doc-player__unavailable",
@@ -5174,12 +5766,12 @@ function DocPlayerContent({
               zIndex: 50
             },
             children: [
-              /* @__PURE__ */ jsx21("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
-              /* @__PURE__ */ jsx21("span", { children: unavailableMessage })
+              /* @__PURE__ */ jsx26("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
+              /* @__PURE__ */ jsx26("span", { children: unavailableMessage })
             ]
           }
         ),
-        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx21(
+        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx26(
           DocControlsOverlay,
           {
             state: playbackState,
@@ -5189,7 +5781,7 @@ function DocPlayerContent({
             getBlockTitle
           }
         ),
-        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx21(
+        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx26(
           "div",
           {
             className: "doc-player__scrubber",
@@ -5204,7 +5796,7 @@ function DocPlayerContent({
               alignItems: "center",
               zIndex: 100
             },
-            children: /* @__PURE__ */ jsx21(
+            children: /* @__PURE__ */ jsx26(
               DocProgressBar,
               {
                 state: playbackState,
@@ -5216,7 +5808,7 @@ function DocPlayerContent({
             )
           }
         ),
-        !renderMode && isSlideshowMode && showControls && /* @__PURE__ */ jsx21(
+        !renderMode && isSlideshowMode && showControls && /* @__PURE__ */ jsx26(
           DocControlsSlideshow,
           {
             state: playbackState,
@@ -5226,14 +5818,14 @@ function DocPlayerContent({
             onPickerOpenChange: setIsSlideshowPickerOpen
           }
         ),
-        !isSlideshowMode && tapFeedback && /* @__PURE__ */ jsx21("div", { className: "doc-player__tap-feedback", children: /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", fill: "white", width: "48", height: "48", children: tapFeedback === "pause" ? /* @__PURE__ */ jsx21("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) : /* @__PURE__ */ jsx21("path", { d: "M8 5v14l11-7z" }) }) }, tapFeedback)
+        !isSlideshowMode && tapFeedback && /* @__PURE__ */ jsx26("div", { className: "doc-player__tap-feedback", children: /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 24 24", fill: "white", width: "48", height: "48", children: tapFeedback === "pause" ? /* @__PURE__ */ jsx26("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) : /* @__PURE__ */ jsx26("path", { d: "M8 5v14l11-7z" }) }) }, tapFeedback)
       ]
     }
   );
 }
 
 // src/DocControlsBottom.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 function DocControlsBottom({
   state,
   actions,
@@ -5241,32 +5833,32 @@ function DocControlsBottom({
   expandedBlocks,
   getBlockTitle
 }) {
-  return /* @__PURE__ */ jsxs15("div", { className: "doc-controls-bottom", children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs18("div", { className: "doc-controls-bottom", children: [
+    /* @__PURE__ */ jsx27(
       "button",
       {
         className: "bottom-ctrl-btn",
         onClick: actions.restart,
         title: "Restart",
         "aria-label": "Restart from beginning",
-        children: /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", 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" }) })
+        children: /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx27("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(
+    /* @__PURE__ */ jsx27(
       "button",
       {
         className: "bottom-ctrl-btn bottom-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: "20", height: "20", children: /* @__PURE__ */ jsx22("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx22("path", { d: "M8 5v14l11-7z" }) })
+        children: state.isPlaying ? /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx27("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx27("path", { d: "M8 5v14l11-7z" }) })
       }
     ),
-    /* @__PURE__ */ jsxs15("span", { className: "bottom-time", children: [
+    /* @__PURE__ */ jsxs18("span", { className: "bottom-time", children: [
       formatTime(state.currentTime),
       " / ",
       formatTime(state.totalDuration)
     ] }),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx27(
       DocProgressBar,
       {
         state,
@@ -5276,82 +5868,92 @@ function DocControlsBottom({
         getBlockTitle
       }
     ),
-    /* @__PURE__ */ jsxs15("span", { className: "bottom-segment", children: [
+    /* @__PURE__ */ jsxs18("span", { className: "bottom-segment", children: [
       state.currentBlockIndex + 1,
       "/",
       state.totalBlocks
     ] }),
-    state.hasCaptions && /* @__PURE__ */ jsx22(
+    state.hasCaptions && /* @__PURE__ */ jsx27(
       "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__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", 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" }) })
+        children: /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx27("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__ */ jsx27(
+      "button",
+      {
+        className: `bottom-ctrl-btn ${state.isFullscreen ? "bottom-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__ */ jsx27("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx27("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx27("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
       }
     )
   ] });
 }
 
 // src/DocControlsSidebar.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 function DocControlsSidebar({ state, actions }) {
-  return /* @__PURE__ */ jsxs16("div", { className: "doc-controls-sidebar", children: [
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs19("div", { className: "doc-controls-sidebar", children: [
+    /* @__PURE__ */ jsx28(
       "button",
       {
         className: "sidebar-ctrl-btn",
         onClick: actions.restart,
         title: "Restart",
         "aria-label": "Restart from beginning",
-        children: /* @__PURE__ */ jsx23("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx23("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+        children: /* @__PURE__ */ jsx28("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx28("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__ */ jsx23(
+    /* @__PURE__ */ jsx28(
       "button",
       {
         className: "sidebar-ctrl-btn sidebar-play-btn",
         onClick: actions.toggle,
         "aria-label": state.isPlaying ? "Pause" : "Play",
-        children: state.isPlaying ? /* @__PURE__ */ jsx23("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx23("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx23("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx23("path", { d: "M8 5v14l11-7z" }) })
+        children: state.isPlaying ? /* @__PURE__ */ jsx28("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx28("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx28("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx28("path", { d: "M8 5v14l11-7z" }) })
       }
     ),
-    /* @__PURE__ */ jsxs16("div", { className: "sidebar-time", children: [
-      /* @__PURE__ */ jsx23("div", { children: formatTime(state.currentTime) }),
-      /* @__PURE__ */ jsx23("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })
+    /* @__PURE__ */ jsxs19("div", { className: "sidebar-time", children: [
+      /* @__PURE__ */ jsx28("div", { children: formatTime(state.currentTime) }),
+      /* @__PURE__ */ jsx28("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "sidebar-segment", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "sidebar-segment", children: [
       state.currentBlockIndex + 1,
       "/",
       state.totalBlocks
     ] }),
-    state.hasCaptions && /* @__PURE__ */ jsx23(
+    state.hasCaptions && /* @__PURE__ */ jsx28(
       "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__ */ jsx23("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx23("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) })
+        children: /* @__PURE__ */ jsx28("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx28("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__ */ jsx23(
+    actions.toggleFullscreen && /* @__PURE__ */ jsx28(
       "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__ */ jsx23("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx23("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx23("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx23("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+        children: state.isFullscreen ? /* @__PURE__ */ jsx28("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx28("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx28("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx28("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
       }
     )
   ] });
 }
 
 // src/DocPlayerWithSidebar.tsx
-import { useRef as useRef10, useState as useState10, useCallback as useCallback8, useEffect as useEffect11 } from "react";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useRef as useRef10, useState as useState11, useCallback as useCallback8, useEffect as useEffect12 } from "react";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 var DEFAULT_STATE = {
   isPlaying: false,
   currentTime: 0,
@@ -5385,7 +5987,7 @@ function DocPlayerWithSidebar({
   const stateRef = useRef10(DEFAULT_STATE);
   const actionsRef = useRef10(null);
   const wasPlayingRef = useRef10(false);
-  const [, setTick] = useState10(0);
+  const [, setTick] = useState11(0);
   const handleStateChange = useCallback8(
     (state) => {
       stateRef.current = state;
@@ -5393,6 +5995,7 @@ function DocPlayerWithSidebar({
         wasPlayingRef.current = state.isPlaying;
         onPlayingChange(state.isPlaying);
       }
+      if (!state.isPlaying) setTick((t) => t + 1);
     },
     [onPlayingChange]
   );
@@ -5404,14 +6007,15 @@ function DocPlayerWithSidebar({
     },
     []
   );
-  useEffect11(() => {
+  useEffect12(() => {
     const interval = setInterval(() => {
+      if (!stateRef.current.isPlaying) return;
       setTick((t) => t + 1);
     }, 250);
     return () => clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ jsxs17("div", { className: "doc-player-sidebar-layout", children: [
-    /* @__PURE__ */ jsx24("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs20("div", { className: "doc-player-sidebar-layout", children: [
+    /* @__PURE__ */ jsx29("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx29(
       DocPlayer,
       {
         doc,
@@ -5433,17 +6037,106 @@ function DocPlayerWithSidebar({
         forceViewport
       }
     ) }),
-    actionsRef.current && /* @__PURE__ */ jsx24(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
+    actionsRef.current && /* @__PURE__ */ jsx29(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
   ] });
 }
 
+// src/hooks/useModalDialog.ts
+import { useEffect as useEffect13, useRef as useRef11 } from "react";
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function isolateModal(root) {
+  const snapshots = [];
+  let branch = root;
+  while (branch?.parentElement) {
+    for (const sibling of branch.parentElement.children) {
+      if (sibling === branch || !(sibling instanceof HTMLElement)) continue;
+      snapshots.push({
+        element: sibling,
+        inert: sibling.inert === true,
+        ariaHidden: sibling.getAttribute("aria-hidden")
+      });
+      sibling.inert = true;
+      sibling.setAttribute("aria-hidden", "true");
+    }
+    branch = branch.parentElement;
+    if (branch === document.body) break;
+  }
+  return snapshots;
+}
+function useModalDialog({
+  rootRef,
+  dialogRef,
+  initialFocusRef,
+  returnFocusRef,
+  onClose
+}) {
+  const onCloseRef = useRef11(onClose);
+  onCloseRef.current = onClose;
+  useEffect13(() => {
+    const root = rootRef.current;
+    const dialog = dialogRef.current;
+    if (!root || !dialog) return;
+    const previousFocus = returnFocusRef?.current ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null);
+    const inertSnapshots = isolateModal(root);
+    const activeWithinDialog = document.activeElement instanceof HTMLElement && dialog.contains(document.activeElement) ? document.activeElement : null;
+    const focusTarget = initialFocusRef?.current ?? activeWithinDialog ?? dialog.querySelector(FOCUSABLE_SELECTOR) ?? dialog;
+    focusTarget.focus();
+    if (focusTarget instanceof HTMLInputElement || focusTarget instanceof HTMLTextAreaElement) {
+      focusTarget.select();
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        onCloseRef.current();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const focusable = [...dialog.querySelectorAll(FOCUSABLE_SELECTOR)].filter(
+        (element) => !element.hidden && element.getAttribute("aria-hidden") !== "true" && element.getAttribute("aria-disabled") !== "true"
+      );
+      if (focusable.length === 0) {
+        event.preventDefault();
+        dialog.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && (document.activeElement === first || !dialog.contains(document.activeElement))) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (document.activeElement === last || !dialog.contains(document.activeElement))) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      for (const snapshot of inertSnapshots) {
+        snapshot.element.inert = snapshot.inert;
+        if (snapshot.ariaHidden === null) snapshot.element.removeAttribute("aria-hidden");
+        else snapshot.element.setAttribute("aria-hidden", snapshot.ariaHidden);
+      }
+      if (previousFocus?.isConnected) previousFocus.focus();
+    };
+  }, [dialogRef, initialFocusRef, returnFocusRef, rootRef]);
+}
+
 // src/jsonView/useJsonViewTokens.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { buildJsonFormTokens, resolveJsonFormTheme } from "@bendyline/squisq/jsonForm";
 function useJsonViewTokens(theme, surface) {
   const auto = useAutoSurface(surface === "auto");
   const effectiveSurface = surface === "auto" ? auto : surface ?? void 0;
-  return useMemo10(() => {
+  return useMemo11(() => {
     const style = buildJsonFormTokens(theme, effectiveSurface, {
       prefix: "--squisq-json"
     });
@@ -5459,26 +6152,26 @@ import {
 } from "@bendyline/squisq/jsonForm";
 
 // src/jsonView/viewers.tsx
-import { Fragment as Fragment4, useMemo as useMemo11 } from "react";
+import { Fragment as Fragment5, useMemo as useMemo12 } from "react";
 import {
   arrayItemKind
 } from "@bendyline/squisq/jsonForm";
 import { parseMarkdown as parseMarkdown3 } from "@bendyline/squisq/markdown";
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function TextViewer({ value }) {
   if (value === void 0 || value === null || value === "") {
-    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-value", children: String(value) });
+  return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-value", children: String(value) });
 }
 function MultilineViewer({ value }) {
   if (value === void 0 || value === null || value === "") {
-    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-value squisq-jv-value--multiline", children: String(value) });
+  return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-value squisq-jv-value--multiline", children: String(value) });
 }
 function RichTextViewer({ value }) {
-  const nodes = useMemo11(() => {
+  const nodes = useMemo12(() => {
     if (typeof value !== "string" || value === "") return null;
     try {
       const doc = parseMarkdown3(value);
@@ -5487,39 +6180,39 @@ function RichTextViewer({ value }) {
       return null;
     }
   }, [value]);
-  if (!nodes) return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
-  return /* @__PURE__ */ jsx25("div", { className: "squisq-jv-richtext", children: /* @__PURE__ */ jsx25(MarkdownRenderer, { nodes }) });
+  if (!nodes) return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-empty", children: "\u2014" });
+  return /* @__PURE__ */ jsx30("div", { className: "squisq-jv-richtext", children: /* @__PURE__ */ jsx30(MarkdownRenderer, { nodes }) });
 }
 function NumberViewer({ value }) {
   if (value === void 0 || value === null) {
-    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-value", children: String(value) });
+  return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-value", children: String(value) });
 }
 function BooleanViewer({ value }) {
   const on = Boolean(value);
-  return /* @__PURE__ */ jsx25("span", { className: `squisq-jv-toggle squisq-jv-toggle--${on ? "on" : "off"}`, children: on ? "On" : "Off" });
+  return /* @__PURE__ */ jsx30("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__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx30("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__ */ jsx25("span", { className: "squisq-jv-value", children: display });
+  return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-value", children: display });
 }
 function ColorViewer({ value }) {
   if (typeof value !== "string" || value === "") {
-    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsxs18("span", { className: "squisq-jv-color", children: [
-    /* @__PURE__ */ jsx25("span", { className: "squisq-jv-color__swatch", style: { background: value }, "aria-hidden": true }),
-    /* @__PURE__ */ jsx25("span", { className: "squisq-jv-color__hex", children: value })
+  return /* @__PURE__ */ jsxs21("span", { className: "squisq-jv-color", children: [
+    /* @__PURE__ */ jsx30("span", { className: "squisq-jv-color__swatch", style: { background: value }, "aria-hidden": true }),
+    /* @__PURE__ */ jsx30("span", { className: "squisq-jv-color__hex", children: value })
   ] });
 }
 function DateViewer({ value, schema }) {
   if (typeof value !== "string" || value === "") {
-    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
   const fmt = schema.format;
   let display = value;
@@ -5536,31 +6229,31 @@ function DateViewer({ value, schema }) {
     }
   } catch {
   }
-  return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-value", children: display });
+  return /* @__PURE__ */ jsx30("span", { className: "squisq-jv-value", children: display });
 }
 function ChipBinViewer({ value, schema }) {
   if (!Array.isArray(value) || value.length === 0) {
-    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx30("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__ */ jsx25("div", { className: "squisq-jv-chip-bin", children: value.map((item, i) => {
+  return /* @__PURE__ */ jsx30("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__ */ jsx25("span", { className: "squisq-jv-chip", children: label }, i);
+    return /* @__PURE__ */ jsx30("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__ */ jsx25("span", { className: "squisq-jv-empty", children: "No items" });
+    return /* @__PURE__ */ jsx30("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__ */ jsx25("div", { className: "squisq-jv-card-stack", children: value.map((item, i) => {
+  return /* @__PURE__ */ jsx30("div", { className: "squisq-jv-card-stack", children: value.map((item, i) => {
     const title = resolveItemTitle(itemLabel, item, i);
-    return /* @__PURE__ */ jsxs18("div", { className: "squisq-jv-card", children: [
-      title ? /* @__PURE__ */ jsx25("h4", { className: "squisq-jv-card__title", children: title }) : null,
-      /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsxs21("div", { className: "squisq-jv-card", children: [
+      title ? /* @__PURE__ */ jsx30("h4", { className: "squisq-jv-card__title", children: title }) : null,
+      /* @__PURE__ */ jsx30(
         RenderNode,
         {
           value: item,
@@ -5591,16 +6284,16 @@ function GroupViewer(props) {
   const help = schema.squisq?.help ?? schema.description;
   const obj = (value && typeof value === "object" ? value : {}) ?? {};
   const propEntries = Object.entries(schema.properties ?? {});
-  return /* @__PURE__ */ jsxs18("section", { className: "squisq-jv-group", children: [
-    title ? /* @__PURE__ */ jsx25("h3", { className: "squisq-jv-group__title", children: title }) : null,
-    help ? /* @__PURE__ */ jsx25("p", { className: "squisq-jv-group__help", children: help }) : null,
-    propEntries.map(([key, propSchema]) => /* @__PURE__ */ jsx25(Fragment4, { children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs21("section", { className: "squisq-jv-group", children: [
+    title ? /* @__PURE__ */ jsx30("h3", { className: "squisq-jv-group__title", children: title }) : null,
+    help ? /* @__PURE__ */ jsx30("p", { className: "squisq-jv-group__help", children: help }) : null,
+    propEntries.map(([key, propSchema]) => /* @__PURE__ */ jsx30(Fragment5, { children: /* @__PURE__ */ jsx30(
       RowOrSection,
       {
         label: propSchema.squisq?.label ?? propSchema.title ?? key,
         help: propSchema.squisq?.help ?? propSchema.description,
         kindHint: propSchema,
-        children: /* @__PURE__ */ jsx25(
+        children: /* @__PURE__ */ jsx30(
           RenderNode,
           {
             value: obj[key],
@@ -5624,11 +6317,11 @@ function RowOrSection({
 }) {
   const composite = isCompositeKind(kindHint);
   if (composite) {
-    return /* @__PURE__ */ jsx25(Fragment5, { children });
+    return /* @__PURE__ */ jsx30(Fragment6, { children });
   }
-  return /* @__PURE__ */ jsxs18("div", { className: "squisq-jv-row", children: [
-    /* @__PURE__ */ jsx25("div", { className: "squisq-jv-label", title: help, children: label }),
-    /* @__PURE__ */ jsx25("div", { children })
+  return /* @__PURE__ */ jsxs21("div", { className: "squisq-jv-row", children: [
+    /* @__PURE__ */ jsx30("div", { className: "squisq-jv-label", title: help, children: label }),
+    /* @__PURE__ */ jsx30("div", { children })
   ] });
 }
 function isCompositeKind(schema) {
@@ -5649,11 +6342,11 @@ function TabsViewer(props) {
   const matchedIndex = pickMatchingBranch(branches, value);
   const branch = branches[matchedIndex];
   if (!branch) {
-    return /* @__PURE__ */ jsx25(TextViewer, { ...props });
+    return /* @__PURE__ */ jsx30(TextViewer, { ...props });
   }
-  return /* @__PURE__ */ jsxs18("div", { className: "squisq-jv-tabs", children: [
-    /* @__PURE__ */ jsx25("span", { className: "squisq-jv-tabs__discriminator", children: branch.squisq?.label ?? branch.title ?? `Option ${matchedIndex + 1}` }),
-    /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs21("div", { className: "squisq-jv-tabs", children: [
+    /* @__PURE__ */ jsx30("span", { className: "squisq-jv-tabs__discriminator", children: branch.squisq?.label ?? branch.title ?? `Option ${matchedIndex + 1}` }),
+    /* @__PURE__ */ jsx30(
       RenderNode,
       {
         value,
@@ -5717,7 +6410,7 @@ var VIEWERS = {
 };
 
 // src/jsonView/RenderNode.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx31 } 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;
@@ -5733,18 +6426,18 @@ function RenderNode(props) {
   };
   if (kind === "group" || kind === "card") {
     const Group = Viewer;
-    return /* @__PURE__ */ jsx26(Group, { ...viewerProps, suppressTitle: props.suppressTopGroupTitle });
+    return /* @__PURE__ */ jsx31(Group, { ...viewerProps, suppressTitle: props.suppressTopGroupTitle });
   }
-  return /* @__PURE__ */ jsx26(Viewer, { ...viewerProps });
+  return /* @__PURE__ */ jsx31(Viewer, { ...viewerProps });
 }
 
 // src/jsonView/JsonView.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx32 } 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__ */ jsx27("div", { className: cls, style, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx32("div", { className: cls, style, children: /* @__PURE__ */ jsx32(
     RenderNode,
     {
       value,
@@ -5758,6 +6451,7 @@ function JsonView(props) {
 }
 export {
   BlockRenderer,
+  CanvasSection,
   CaptionOverlay,
   DocControlsBottom,
   DocControlsOverlay,
@@ -5775,7 +6469,12 @@ export {
   MarkdownRenderer,
   MediaClipLayer,
   MediaContext,
+  MermaidDiagram,
+  MermaidLayer,
+  PageSectionView,
+  PageViewContext,
   PathLayer,
+  ResourcePolicyContext,
   ShapeLayer,
   SocialCaptionOverlay,
   TableLayer,
@@ -5791,6 +6490,8 @@ export {
   useMediaProvider,
   useMediaSchedule,
   useMediaUrl,
+  useModalDialog,
+  usePageView,
+  useResourcePolicy,
   useViewportOrientation
 };
-//# sourceMappingURL=index.js.map