@bendyline/squisq-react 1.4.2 → 2.0.1

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/DocPlayer.tsx
-import { Fragment as Fragment3, useRef as useRef7, useState as useState7, useEffect as useEffect8, useCallback as useCallback6, useMemo as useMemo9 } from "react";
+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 {
-  isTemplateBlock as isTemplateBlock2,
+  isTemplateBlock as isTemplateBlock3,
   getCaptionAtTime as getCaptionAtTime2,
   resolveMediaSchedule,
   getDocPlaybackDuration
@@ -32,9 +32,15 @@ function useMediaUrl(relativePath, basePath) {
       return;
     }
     let cancelled = false;
-    provider.resolveUrl(safePath).then((resolved) => {
-      if (!cancelled) setUrl(resolved);
-    });
+    setUrl(fallback);
+    provider.resolveUrl(safePath).then(
+      (resolved) => {
+        if (!cancelled) setUrl(resolved);
+      },
+      () => {
+        if (!cancelled) setUrl(fallback);
+      }
+    );
     return () => {
       cancelled = true;
     };
@@ -63,7 +69,8 @@ function MediaClipLayer({
   currentTime,
   isPlaying,
   basePath,
-  renderMode = false
+  renderMode = false,
+  muted = false
 }) {
   const { renderClips, activeIds } = useMediaSchedule(schedule, currentTime);
   if (renderClips.length === 0) return null;
@@ -75,7 +82,8 @@ function MediaClipLayer({
       currentTime,
       isPlaying,
       basePath,
-      renderMode
+      renderMode,
+      muted
     },
     clip.id
   )) });
@@ -86,7 +94,8 @@ function MediaClipElement({
   currentTime,
   isPlaying,
   basePath,
-  renderMode
+  renderMode,
+  muted
 }) {
   const ref = useRef(null);
   const src = useMediaUrl(clip.src, basePath);
@@ -111,7 +120,7 @@ function MediaClipElement({
     } else {
       el.pause();
     }
-  }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart]);
+  }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart, src]);
   const isVideo = clip.kind === "video";
   const common = {
     ref,
@@ -141,13 +150,21 @@ function MediaClipElement({
       }
     );
   }
-  return /* @__PURE__ */ jsx("audio", { ...common, muted: renderMode, style: { position: "absolute", width: 0, height: 0 } });
+  return /* @__PURE__ */ jsx(
+    "audio",
+    {
+      ...common,
+      muted: renderMode || muted,
+      style: { position: "absolute", width: 0, height: 0 }
+    }
+  );
 }
 
 // src/DocPlayer.tsx
 import { applySurface as applySurface2 } from "@bendyline/squisq/schemas";
 
 // src/BlockRenderer.tsx
+import { useId as useId5 } from "react";
 import { resolveTransitionDuration } from "@bendyline/squisq/schemas";
 
 // src/layers/ImageLayer.tsx
@@ -190,7 +207,13 @@ function getAnchorOffset(anchor, width, height) {
 
 // src/layers/ImageLayer.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-function ImageLayer({ layer, basePath, viewport, blockTime }) {
+function ImageLayer({
+  layer,
+  basePath,
+  viewport,
+  blockTime,
+  animationsEnabled = true
+}) {
   const { content, position, animation } = layer;
   const x = resolveValue(position.x, viewport.width);
   const y = resolveValue(position.y, viewport.height);
@@ -205,6 +228,50 @@ function ImageLayer({ layer, basePath, viewport, blockTime }) {
   const preserveAspectRatio = getPreserveAspectRatio(content.fit);
   const isCover = content.fit === "cover";
   const isSpatialAnim = animation && SPATIAL_ANIMATION_TYPES.has(animation.type);
+  const usesPortraitPan = isCover && shouldUsePortraitPan(viewport, width, height, animationsEnabled, animation);
+  if (usesPortraitPan) {
+    const panClass = getPortraitPanClass(animation);
+    const panStyle = getPortraitPanStyle(isSpatialAnim ? animation : void 0);
+    const containerAnim = isSpatialAnim ? { className: "", style: {} } : animStyle;
+    return /* @__PURE__ */ jsx2(
+      "g",
+      {
+        className: `block-layer block-layer--image ${containerAnim.className}`,
+        style: containerAnim.style,
+        "data-layer-id": layer.id,
+        "data-image-framing": "portrait-pan",
+        children: /* @__PURE__ */ jsx2("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              width: `${width}px`,
+              height: `${height}px`,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx2(
+              "img",
+              {
+                src,
+                alt: content.alt || "",
+                className: panClass,
+                style: {
+                  width: `${width}px`,
+                  height: `${height}px`,
+                  objectFit: "cover",
+                  objectPosition: "center",
+                  display: "block",
+                  pointerEvents: "none",
+                  ...filter ? { filter } : {},
+                  ...content.blur && content.blur > 0 ? { transform: "scale(1.06)" } : {},
+                  ...panStyle
+                }
+              }
+            )
+          }
+        ) })
+      }
+    );
+  }
   if (isCover && isSpatialAnim && animation) {
     const kbAnim = remapToKenBurns(animation);
     const kbStyle = getAnimationStyle(kbAnim, blockTime);
@@ -300,6 +367,23 @@ function getPreserveAspectRatio(fit) {
   }
 }
 var SPATIAL_ANIMATION_TYPES = /* @__PURE__ */ new Set(["panLeft", "panRight", "slowZoom", "zoomIn", "zoomOut"]);
+var PORTRAIT_ASPECT_CUTOFF = 0.83;
+function shouldUsePortraitPan(viewport, layerWidth, layerHeight, animationsEnabled, animation) {
+  if (!animationsEnabled || animation?.type === "none") return false;
+  if (viewport.width / viewport.height >= PORTRAIT_ASPECT_CUTOFF) return false;
+  return layerWidth >= viewport.width * 0.7 && layerHeight >= viewport.height * 0.7;
+}
+function getPortraitPanClass(animation) {
+  const pansBack = animation?.type === "panRight" || animation?.type === "slowZoom" && animation.panDirection === "right";
+  return pansBack ? "squisq-image--portrait-pan-left" : "squisq-image--portrait-pan-right";
+}
+function getPortraitPanStyle(animation) {
+  return {
+    "--portrait-pan-duration": `${animation?.duration ?? 12}s`,
+    "--portrait-pan-delay": `${animation?.delay ?? 0}s`,
+    "--portrait-pan-easing": animation?.easing ?? "ease-in-out"
+  };
+}
 function remapToKenBurns(anim) {
   switch (anim.type) {
     case "panLeft":
@@ -316,7 +400,7 @@ function remapToKenBurns(anim) {
 }
 
 // src/layers/TextLayer.tsx
-import { useMemo as useMemo3 } from "react";
+import { useId, useMemo as useMemo3 } from "react";
 import { DEFAULT_DOC_FONT } from "@bendyline/squisq/schemas";
 import {
   parseHtmlToNodes,
@@ -505,6 +589,7 @@ function IconTextLayer({ layer, viewport, blockTime }) {
   ) });
 }
 function PlainTextLayer({ layer, viewport, blockTime }) {
+  const defsId = `${useId().replace(/:/g, "")}-${layer.id}`;
   const { content, position, animation } = layer;
   const { text, style } = content;
   const rawX = resolveValue(position.x, viewport.width);
@@ -538,13 +623,13 @@ function PlainTextLayer({ layer, viewport, blockTime }) {
     fill: style.color,
     ...animStyle.style
   };
-  const filterId = style.shadow ? `shadow-${layer.id}` : void 0;
+  const filterId = style.shadow ? `shadow-${defsId}` : void 0;
   return /* @__PURE__ */ jsxs2("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: [
     style.shadow && /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsx4("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx4("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "rgba(0,0,0,0.7)" }) }) }),
     /* @__PURE__ */ jsx4(
       TextBox,
       {
-        layerId: layer.id,
+        layerId: defsId,
         style,
         box: boxWidth != null && boxHeight != null ? {
           x: rawX - anchorAxis(anchor, boxWidth, "x"),
@@ -746,9 +831,12 @@ function wrapText(text, fontSize, maxWidth) {
 }
 
 // src/layers/ShapeLayer.tsx
+import { useId as useId2 } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var FULL_BLEED_OVERSCAN = 1;
 function ShapeLayer({ layer, viewport, blockTime }) {
   const { content, position, animation } = layer;
+  const defsId = `${useId2().replace(/:/g, "")}-${layer.id}`;
   const rawX = resolveValue(position.x, viewport.width);
   const rawY = resolveValue(position.y, viewport.height);
   const width = position.width ? resolveValue(position.width, viewport.width) : 100;
@@ -756,6 +844,12 @@ function ShapeLayer({ layer, viewport, blockTime }) {
   const anchorOffset = getAnchorOffset(position.anchor, width, height);
   const x = rawX + anchorOffset.x;
   const y = rawY + anchorOffset.y;
+  const isUnborderedFullBleedRect = content.shape === "rect" && x === 0 && y === 0 && width === viewport.width && height === viewport.height && !content.stroke && !content.borderRadius;
+  const overscan = isUnborderedFullBleedRect ? FULL_BLEED_OVERSCAN : 0;
+  const paintX = x - overscan;
+  const paintY = y - overscan;
+  const paintWidth = width + overscan * 2;
+  const paintHeight = height + overscan * 2;
   const animStyle = getAnimationStyle(animation, blockTime);
   const fill = content.fill || "none";
   const isCSSGradient = typeof fill === "string" && fill.includes("gradient(");
@@ -766,12 +860,12 @@ function ShapeLayer({ layer, viewport, blockTime }) {
         className: `block-layer block-layer--shape ${animStyle.className}`,
         style: animStyle.style,
         "data-layer-id": layer.id,
-        children: /* @__PURE__ */ jsx5("foreignObject", { x, y, width, height, children: /* @__PURE__ */ jsx5(
+        children: /* @__PURE__ */ jsx5("foreignObject", { x: paintX, y: paintY, width: paintWidth, height: paintHeight, children: /* @__PURE__ */ jsx5(
           "div",
           {
             style: {
-              width: `${width}px`,
-              height: `${height}px`,
+              width: `${paintWidth}px`,
+              height: `${paintHeight}px`,
               background: fill,
               borderRadius: content.borderRadius ? `${content.borderRadius}px` : void 0,
               pointerEvents: "none"
@@ -782,12 +876,12 @@ function ShapeLayer({ layer, viewport, blockTime }) {
     );
   }
   const { fill: fillValue, def: fillDef } = resolveFill(
-    layer.id,
+    defsId,
     fill,
     content.gradient,
     content.pattern
   );
-  const { filterAttr, def: filterDef } = resolveShapeFilter(layer.id, content.filter);
+  const { filterAttr, def: filterDef } = resolveShapeFilter(defsId, content.filter);
   const dash = borderDashArray(content.borderStyle, content.strokeWidth);
   const shapeProps = {
     fill: fillValue,
@@ -811,10 +905,10 @@ function ShapeLayer({ layer, viewport, blockTime }) {
         content.shape === "rect" && /* @__PURE__ */ jsx5(
           "rect",
           {
-            x,
-            y,
-            width,
-            height,
+            x: paintX,
+            y: paintY,
+            width: paintWidth,
+            height: paintHeight,
             rx: content.borderRadius,
             ry: content.borderRadius,
             ...shapeProps
@@ -847,6 +941,7 @@ function ShapeLayer({ layer, viewport, blockTime }) {
 }
 
 // src/layers/PathLayer.tsx
+import { useId as useId3 } from "react";
 import { markerPath, shapePath } from "@bendyline/squisq/doc";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function effectivePath(layer, viewport) {
@@ -860,23 +955,28 @@ function effectivePath(layer, viewport) {
   const derived = shapePath(content.shapeKind, rawX + anchor.x, rawY + anchor.y, w, h);
   return derived ?? content.d;
 }
-function effectiveMarker(explicit, arrow, end) {
+function readLegacyArrow(content) {
+  return content.arrow;
+}
+function effectiveMarker(explicit, legacyArrow, end) {
   if (explicit) return explicit;
-  const wants = arrow === "both" || arrow === end;
+  const wants = legacyArrow === "both" || legacyArrow === end;
   return wants ? "arrow" : "none";
 }
 function PathLayer({ layer, viewport, blockTime }) {
   const { content, animation, id } = layer;
+  const defsId = `${useId3().replace(/:/g, "")}-${id}`;
   const d = effectivePath(layer, viewport);
   const stroke = content.stroke ?? "#1e293b";
   const strokeWidth = content.strokeWidth ?? 2;
-  const { fill, def: fillDef } = resolveFill(id, content.fill ?? "none", content.gradient);
+  const { fill, def: fillDef } = resolveFill(defsId, content.fill ?? "none", content.gradient);
   const dash = content.borderStyle ? borderDashArray(content.borderStyle, strokeWidth) : content.dasharray;
   const animStyle = getAnimationStyle(animation, blockTime);
-  const startId = `marker-start-${id}`;
-  const endId = `marker-end-${id}`;
-  const start = markerPath(effectiveMarker(content.startMarker, content.arrow, "start"), "start");
-  const end = markerPath(effectiveMarker(content.endMarker, content.arrow, "end"), "end");
+  const startId = `marker-start-${defsId}`;
+  const endId = `marker-end-${defsId}`;
+  const legacyArrow = readLegacyArrow(content);
+  const start = markerPath(effectiveMarker(content.startMarker, legacyArrow, "start"), "start");
+  const end = markerPath(effectiveMarker(content.endMarker, legacyArrow, "end"), "end");
   return /* @__PURE__ */ jsxs4(
     "g",
     {
@@ -938,7 +1038,7 @@ function MarkerDef({
 }
 
 // src/layers/MapLayer.tsx
-import { useState as useState2, useEffect as useEffect3 } from "react";
+import { useId as useId4, useState as useState2, useEffect as useEffect3 } from "react";
 
 // src/utils/mapTileUtils.ts
 var TILE_PROVIDERS = {
@@ -1124,6 +1224,7 @@ function drawAttribution(ctx, text, width, height) {
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function MapLayer({ layer, basePath, viewport, blockTime }) {
   const { content, position, animation } = layer;
+  const clipId = `map-clip-${useId4().replace(/:/g, "")}-${layer.id}`;
   const [mapImageUrl, setMapImageUrl] = useState2(null);
   const [isLoading, setIsLoading] = useState2(true);
   const [error, setError] = useState2(null);
@@ -1168,11 +1269,12 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
       cancelled = true;
     };
   }, [
-    content.center.lat,
-    content.center.lng,
+    content.center,
     content.zoom,
     content.style,
     content.staticSrc,
+    content.markers,
+    content.showAttribution,
     width,
     height,
     basePath
@@ -1237,8 +1339,8 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
       style: animStyle.style,
       "data-layer-id": layer.id,
       children: [
-        /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: `clip-${layer.id}`, children: /* @__PURE__ */ jsx7("rect", { x: finalX, y: finalY, width, height }) }) }),
-        /* @__PURE__ */ jsx7("g", { clipPath: `url(#clip-${layer.id})`, children: /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: clipId, children: /* @__PURE__ */ jsx7("rect", { x: finalX, y: finalY, width, height }) }) }),
+        /* @__PURE__ */ jsx7("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx7(
           "image",
           {
             href: mapImageUrl,
@@ -1258,6 +1360,7 @@ function MapLayer({ layer, basePath, viewport, blockTime }) {
 // src/layers/VideoLayer.tsx
 import { useRef as useRef2, useEffect as useEffect4 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
+var VIDEO_SYNC_DRIFT_SECONDS = 0.2;
 function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying }) {
   const { content, position } = layer;
   const videoRef = useRef2(null);
@@ -1297,16 +1400,22 @@ function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying }) {
       video.removeEventListener("timeupdate", handleTimeUpdate);
       video.pause();
     };
-  }, [content.src, content.clipStart, content.clipEnd]);
+  }, [src, content.clipStart, content.clipEnd]);
   useEffect4(() => {
     const video = videoRef.current;
     if (!video || !hasStartedRef.current) return;
+    const targetTime = gated ? content.clipStart : Math.min(content.clipEnd, content.clipStart + Math.max(0, blockTime - startAt));
+    if (Math.abs(video.currentTime - targetTime) > VIDEO_SYNC_DRIFT_SECONDS) {
+      video.currentTime = targetTime;
+    }
     if (gated) {
       video.pause();
-      video.currentTime = content.clipStart;
       return;
     }
-    if (video.currentTime >= content.clipEnd) return;
+    if (targetTime >= content.clipEnd) {
+      video.pause();
+      return;
+    }
     if (isPlaying) {
       const playPromise = video.play();
       if (playPromise) {
@@ -1316,7 +1425,7 @@ function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying }) {
     } else {
       video.pause();
     }
-  }, [isPlaying, gated, content.clipStart, content.clipEnd]);
+  }, [isPlaying, gated, blockTime, startAt, src, content.clipStart, content.clipEnd]);
   return /* @__PURE__ */ jsx8("g", { className: "block-layer block-layer--video", "data-layer-id": layer.id, children: /* @__PURE__ */ jsx8("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx8(
     "video",
     {
@@ -1425,9 +1534,137 @@ function TableLayer({ layer, viewport, blockTime }) {
   ) });
 }
 
-// src/BlockRenderer.tsx
+// src/layers/TreeLayer.tsx
+import { useState as useState3 } from "react";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var VIEWPORT = {
+function faClass(token, fallback) {
+  const name = token && token.trim() ? token.trim() : fallback;
+  const colon = name.indexOf(":");
+  if (colon > 0) {
+    const family = name.slice(0, colon).replace(/^fa-/, "");
+    return `fa-${family} fa-${name.slice(colon + 1)}`;
+  }
+  return `fa-solid fa-${name}`;
+}
+function TreeLayer({ layer, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const { items, style } = content;
+  const x = resolveValue(position.x, viewport.width);
+  const y = resolveValue(position.y, viewport.height);
+  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const animStyle = animation ? getAnimationStyle(animation, blockTime) : {};
+  return /* @__PURE__ */ jsx10(
+    "foreignObject",
+    {
+      x: x + offset.x,
+      y: y + offset.y,
+      width,
+      height,
+      style: animStyle,
+      children: /* @__PURE__ */ jsx10(
+        "div",
+        {
+          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          className: "squisq-treelayer",
+          style: {
+            width: `${width}px`,
+            height: `${height}px`,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            padding: "24px 32px",
+            boxSizing: "border-box",
+            fontFamily: style.fontFamily ?? "system-ui, sans-serif",
+            fontSize: `${style.fontSize}px`,
+            lineHeight: 1.7,
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx10(TreeList, { items, depth: 0, style })
+        }
+      )
+    }
+  );
+}
+function TreeList({
+  items,
+  depth,
+  style
+}) {
+  return /* @__PURE__ */ jsx10(
+    "ul",
+    {
+      style: {
+        listStyle: "none",
+        margin: 0,
+        padding: 0,
+        paddingLeft: depth === 0 ? 0 : `${style.indentPx}px`,
+        borderLeft: depth === 0 ? "none" : `1px solid ${style.connectorColor}`
+      },
+      children: items.map((item) => /* @__PURE__ */ jsx10(TreeRow, { item, style }, item.id))
+    }
+  );
+}
+function TreeRow({
+  item,
+  style
+}) {
+  const hasChildren = item.children.length > 0;
+  const [collapsed, setCollapsed] = useState3(false);
+  const isDir = item.isDir || hasChildren;
+  const iconCls = isDir ? faClass(style.folderIcon, collapsed ? "folder" : "folder-open") : faClass(style.fileIcon, "file");
+  return /* @__PURE__ */ jsxs7("li", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "baseline", gap: "8px", padding: "1px 0" }, children: [
+      hasChildren ? /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          "aria-label": collapsed ? "Expand" : "Collapse",
+          onClick: () => setCollapsed((c) => !c),
+          style: {
+            flex: "0 0 auto",
+            width: "1em",
+            border: "none",
+            background: "transparent",
+            cursor: "pointer",
+            color: style.connectorColor,
+            padding: 0,
+            fontSize: "0.8em"
+          },
+          children: /* @__PURE__ */ jsx10(
+            "i",
+            {
+              className: `fa-solid ${collapsed ? "fa-chevron-right" : "fa-chevron-down"}`,
+              "aria-hidden": "true"
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx10("span", { style: { flex: "0 0 auto", width: "1em" } }),
+      /* @__PURE__ */ jsx10(
+        "i",
+        {
+          className: iconCls,
+          "aria-hidden": "true",
+          style: { flex: "0 0 auto", color: style.iconColor, width: "1.2em", textAlign: "center" }
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "span",
+        {
+          style: { color: isDir ? style.dirColor : style.rowColor, fontWeight: isDir ? 600 : 400 },
+          children: item.label
+        }
+      ),
+      item.comment ? /* @__PURE__ */ jsx10("span", { style: { color: style.commentColor, fontSize: "0.85em", fontStyle: "italic" }, children: item.comment }) : null
+    ] }),
+    hasChildren && !collapsed ? /* @__PURE__ */ jsx10(TreeList, { items: item.children, depth: 1, style }) : null
+  ] });
+}
+
+// src/BlockRenderer.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_VIEWPORT = {
   width: 1920,
   height: 1080
 };
@@ -1438,12 +1675,13 @@ function BlockRenderer({
   isEntering = false,
   isExiting = false,
   transition,
-  viewport = VIEWPORT,
-  isPlaying
+  viewport = DEFAULT_VIEWPORT,
+  isPlaying,
+  animationsEnabled = true
 }) {
   let transitionClass = "";
   const transitionStyle = {};
-  const activeTransition = transition ?? block.transition;
+  const activeTransition = animationsEnabled ? transition ?? block.transition : void 0;
   if (activeTransition && isEntering) {
     transitionClass = getTransitionClass(activeTransition.type, true, activeTransition.direction);
     transitionStyle["--transition-duration"] = `${resolveTransitionDuration(activeTransition)}s`;
@@ -1451,8 +1689,9 @@ function BlockRenderer({
     transitionClass = getTransitionClass(activeTransition.type, false, activeTransition.direction);
     transitionStyle["--transition-duration"] = `${resolveTransitionDuration(activeTransition)}s`;
   }
-  const clipId = `vb-clip-${block.id}`;
-  return /* @__PURE__ */ jsxs7(
+  const instanceId = useId5().replace(/:/g, "");
+  const clipId = `vb-clip-${instanceId}-${block.id}`;
+  return /* @__PURE__ */ jsxs8(
     "svg",
     {
       className: `block-svg ${transitionClass}`,
@@ -1462,15 +1701,16 @@ function BlockRenderer({
       overflow: "hidden",
       "data-block-id": block.id,
       children: [
-        /* @__PURE__ */ jsx10("defs", { children: /* @__PURE__ */ jsx10("clipPath", { id: clipId, children: /* @__PURE__ */ jsx10("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }),
-        /* @__PURE__ */ jsx10("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => /* @__PURE__ */ jsx10(
+        /* @__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(
           LayerRenderer,
           {
             layer,
             basePath,
             viewport,
             blockTime,
-            isPlaying
+            isPlaying,
+            animationsEnabled
           },
           layer.id
         )) })
@@ -1478,23 +1718,48 @@ function BlockRenderer({
     }
   );
 }
-function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }) {
-  switch (layer.type) {
+function LayerRenderer({
+  layer,
+  basePath,
+  viewport,
+  blockTime,
+  isPlaying,
+  animationsEnabled
+}) {
+  const renderedLayer = animationsEnabled || !layer.animation ? layer : { ...layer, animation: void 0 };
+  switch (renderedLayer.type) {
     case "image":
-      return /* @__PURE__ */ jsx10(ImageLayer, { layer, basePath, viewport, blockTime });
+      return /* @__PURE__ */ jsx11(
+        ImageLayer,
+        {
+          layer: renderedLayer,
+          basePath,
+          viewport,
+          blockTime,
+          animationsEnabled
+        }
+      );
     case "text":
-      return /* @__PURE__ */ jsx10(TextLayer, { layer, viewport, blockTime });
+      return /* @__PURE__ */ jsx11(TextLayer, { layer: renderedLayer, viewport, blockTime });
     case "shape":
-      return /* @__PURE__ */ jsx10(ShapeLayer, { layer, viewport, blockTime });
+      return /* @__PURE__ */ jsx11(ShapeLayer, { layer: renderedLayer, viewport, blockTime });
     case "path":
-      return /* @__PURE__ */ jsx10(PathLayer, { layer, viewport, blockTime });
+      return /* @__PURE__ */ jsx11(PathLayer, { layer: renderedLayer, viewport, blockTime });
     case "map":
-      return /* @__PURE__ */ jsx10(MapLayer, { layer, basePath, viewport, blockTime });
+      return /* @__PURE__ */ jsx11(
+        MapLayer,
+        {
+          layer: renderedLayer,
+          basePath,
+          viewport,
+          blockTime
+        }
+      );
     case "video":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         VideoLayer,
         {
-          layer,
+          layer: renderedLayer,
           basePath,
           viewport,
           blockTime,
@@ -1502,9 +1767,11 @@ function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }) {
         }
       );
     case "table":
-      return /* @__PURE__ */ jsx10(TableLayer, { layer, viewport, blockTime });
+      return /* @__PURE__ */ jsx11(TableLayer, { layer: renderedLayer, viewport, blockTime });
+    case "tree":
+      return /* @__PURE__ */ jsx11(TreeLayer, { layer: renderedLayer, viewport, blockTime });
     default:
-      console.warn(`Unknown layer type: ${layer.type}`);
+      console.warn(`Unknown layer type: ${renderedLayer.type}`);
       return null;
   }
 }
@@ -1515,7 +1782,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 jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var TARGET_CHUNK_SIZE = 4;
 var MIN_CHUNK_SIZE = 2;
 var MAX_CHUNK_SIZE = 6;
@@ -1574,7 +1841,7 @@ function SocialCaptionOverlay({
     [captions]
   );
   if (!enabled || chunks.length === 0) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "div",
       {
         className: "social-caption-overlay",
@@ -1636,7 +1903,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__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: "social-caption-overlay",
@@ -1653,7 +1920,7 @@ function SocialCaptionOverlay({
         opacity: 1,
         transition: "opacity 0.15s ease-in-out"
       },
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx12(
         "div",
         {
           style: {
@@ -1662,7 +1929,7 @@ function SocialCaptionOverlay({
           },
           children: activeChunk.words.map((word, i) => {
             const isActive = i === activeWordIndex;
-            return /* @__PURE__ */ jsx11(
+            return /* @__PURE__ */ jsx12(
               "span",
               {
                 style: {
@@ -1687,7 +1954,7 @@ function SocialCaptionOverlay({
 }
 
 // src/CaptionOverlay.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function CaptionOverlay({
   captions,
   currentTime,
@@ -1698,7 +1965,7 @@ function CaptionOverlay({
   viewport
 }) {
   if (captionStyle === "social") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       SocialCaptionOverlay,
       {
         captions,
@@ -1711,7 +1978,7 @@ function CaptionOverlay({
   }
   const phrase = enabled && captions ? getCaptionAtTime(captions, currentTime) : null;
   const captionText = phrase?.text ?? null;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       className: "caption-overlay",
@@ -1730,7 +1997,7 @@ function CaptionOverlay({
         padding: "0 4px",
         boxSizing: "border-box"
       },
-      children: captionText && /* @__PURE__ */ jsx12(
+      children: captionText && /* @__PURE__ */ jsx13(
         "div",
         {
           style: {
@@ -1740,7 +2007,7 @@ function CaptionOverlay({
             borderRadius: "4px",
             backdropFilter: "blur(4px)"
           },
-          children: /* @__PURE__ */ jsx12(
+          children: /* @__PURE__ */ jsx13(
             "span",
             {
               style: {
@@ -1786,22 +2053,40 @@ function useAutoSurface(enabled) {
 }
 
 // src/hooks/useAudioSync.ts
-import { useState as useState3, useEffect as useEffect5, useRef as useRef3, useCallback as useCallback2 } from "react";
-function useAudioSync(audioRef, audioTrack, basePath = "") {
-  const [currentTime, setCurrentTime] = useState3(0);
-  const [isPlaying, setIsPlaying] = useState3(false);
-  const [currentSegment, setCurrentSegment] = useState3(0);
-  const [isEnded, setIsEnded] = useState3(false);
-  const [isAudioReady, setIsAudioReady] = useState3(false);
-  const [totalDuration, setTotalDuration] = useState3(0);
+import { useState as useState4, useEffect as useEffect5, useRef as useRef3, useCallback as useCallback2 } from "react";
+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);
   const segmentStarts = useRef3([]);
   const pendingSeekTime = 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 fallbackMode = useRef3(false);
   useEffect5(() => {
-    if (!audioTrack?.segments) {
+    loadGeneration.current += 1;
+    pendingSeekTime.current = null;
+    shouldPlayAfterLoad.current = false;
+    fallbackMode.current = false;
+    setCurrentTime(0);
+    setCurrentSegment(0);
+    setIsPlaying(false);
+    setIsEnded(false);
+    setIsAudioReady(false);
+    if (!enabled || !audioTrack?.segments) {
+      segmentStarts.current = [];
+      setTotalDuration(0);
       return;
     }
     let time = 0;
@@ -1811,27 +2096,35 @@ function useAudioSync(audioRef, audioTrack, basePath = "") {
       return start;
     });
     setTotalDuration(time);
-  }, [audioTrack]);
+  }, [audioTrack, enabled]);
   const preloadAudio = useCallback2(
     async (src) => {
-      const audioUrl = basePath ? `${basePath}/${src}` : src;
+      const audioUrl = resolveAudioUrl(src, basePath);
       if (blobUrls.current.has(src)) {
         return blobUrls.current.get(src);
       }
       if (loadingPromises.current.has(src)) {
         return loadingPromises.current.get(src);
       }
+      const controller = new AbortController();
+      abortControllers.current.add(controller);
+      const generation = loadGeneration.current;
       const loadPromise = (async () => {
         try {
-          const response = await fetch(audioUrl);
+          const response = await fetch(audioUrl, { signal: controller.signal });
           if (!response.ok) throw new Error(`HTTP ${response.status}`);
           const blob = await response.blob();
           const blobUrl = URL.createObjectURL(blob);
+          if (controller.signal.aborted || generation !== loadGeneration.current) {
+            URL.revokeObjectURL(blobUrl);
+            return audioUrl;
+          }
           blobUrls.current.set(src, blobUrl);
           return blobUrl;
         } catch {
           return audioUrl;
         } finally {
+          abortControllers.current.delete(controller);
           loadingPromises.current.delete(src);
         }
       })();
@@ -1841,19 +2134,26 @@ function useAudioSync(audioRef, audioTrack, basePath = "") {
     [basePath]
   );
   useEffect5(() => {
-    if (!audioTrack?.segments) return;
+    if (!enabled || !audioTrack?.segments) return;
     audioTrack.segments.forEach((segment) => {
       preloadAudio(segment.src);
     });
     const currentBlobUrls = blobUrls.current;
+    const currentAbortControllers = abortControllers.current;
+    const currentLoadingPromises = loadingPromises.current;
     return () => {
+      loadGeneration.current += 1;
+      currentAbortControllers.forEach((controller) => controller.abort());
+      currentAbortControllers.clear();
+      currentLoadingPromises.clear();
       currentBlobUrls.forEach((url) => {
         URL.revokeObjectURL(url);
       });
       currentBlobUrls.clear();
     };
-  }, [audioTrack, preloadAudio]);
+  }, [audioTrack, preloadAudio, enabled]);
   useEffect5(() => {
+    if (!enabled) return;
     const audio = audioRef.current;
     if (!audio) return;
     const handleTimeUpdate = () => {
@@ -1890,8 +2190,9 @@ function useAudioSync(audioRef, audioTrack, basePath = "") {
       audio.removeEventListener("ended", handleEnded);
       audio.removeEventListener("error", handleError);
     };
-  }, [audioRef, currentSegment, audioTrack]);
+  }, [audioRef, currentSegment, audioTrack, enabled]);
   useEffect5(() => {
+    if (!enabled) return;
     const audio = audioRef.current;
     if (!audio || !audioTrack?.segments) return;
     const segment = audioTrack.segments[currentSegment];
@@ -1913,29 +2214,37 @@ function useAudioSync(audioRef, audioTrack, basePath = "") {
     const currentSrc = audio.src;
     const cachedBlobUrl = blobUrls.current.get(segment.src);
     const isSameSource = currentSrc && (currentSrc === cachedBlobUrl || currentSrc.endsWith(segment.src));
+    let cancelled = false;
+    let handleCanPlay = null;
     if (!isSameSource) {
       const loadAndPlay = async () => {
         const blobUrl = await preloadAudio(segment.src);
-        const handleCanPlay = () => {
+        if (cancelled) return;
+        handleCanPlay = () => {
+          if (cancelled) return;
           setIsAudioReady(true);
           applyPendingSeek();
-          audio.removeEventListener("canplay", handleCanPlay);
+          if (handleCanPlay) audio.removeEventListener("canplay", handleCanPlay);
         };
         audio.addEventListener("canplay", handleCanPlay);
         audio.src = blobUrl;
         audio.load();
         await Promise.resolve();
         if (audio.readyState >= 3) {
-          audio.removeEventListener("canplay", handleCanPlay);
+          if (handleCanPlay) audio.removeEventListener("canplay", handleCanPlay);
           setIsAudioReady(true);
           applyPendingSeek();
         }
       };
-      loadAndPlay();
+      void loadAndPlay();
     } else {
       applyPendingSeek();
     }
-  }, [audioRef, currentSegment, audioTrack, preloadAudio]);
+    return () => {
+      cancelled = true;
+      if (handleCanPlay) audio.removeEventListener("canplay", handleCanPlay);
+    };
+  }, [audioRef, currentSegment, audioTrack, preloadAudio, enabled]);
   const play = useCallback2(() => {
     const audio = audioRef.current;
     if (audio) {
@@ -2072,8 +2381,8 @@ import {
   resolvePersistentLayers,
   VIEWPORT_PRESETS
 } from "@bendyline/squisq/doc";
-function useDocPlayback(script, currentTime, viewport = VIEWPORT_PRESETS.landscape, renderMode = false, theme) {
-  void renderMode;
+function useDocPlayback(script, currentTime, options = {}) {
+  const { viewport = VIEWPORT_PRESETS.landscape, theme, onSeek } = options;
   const blocks = useMemo6(() => {
     if (!script?.blocks) {
       return [];
@@ -2136,8 +2445,19 @@ function useDocPlayback(script, currentTime, viewport = VIEWPORT_PRESETS.landsca
   const outgoingBlockRef = useRef4(null);
   const activeBlockIdRef = useRef4(null);
   const lastRenderedBlockRef = useRef4(null);
+  const suppressOutgoingTargetRef = useRef4(null);
+  const suppressOutgoingForNextBlock = useCallback3((blockId) => {
+    if (activeBlockIdRef.current === blockId) {
+      outgoingBlockRef.current = null;
+      suppressOutgoingTargetRef.current = null;
+      return;
+    }
+    suppressOutgoingTargetRef.current = blockId;
+  }, []);
   if (currentBlock && currentBlock.id !== activeBlockIdRef.current) {
-    outgoingBlockRef.current = lastRenderedBlockRef.current;
+    const suppressOutgoing = suppressOutgoingTargetRef.current === currentBlock.id;
+    outgoingBlockRef.current = suppressOutgoing ? null : lastRenderedBlockRef.current;
+    suppressOutgoingTargetRef.current = null;
     activeBlockIdRef.current = currentBlock.id;
   }
   lastRenderedBlockRef.current = currentBlock;
@@ -2151,10 +2471,10 @@ function useDocPlayback(script, currentTime, viewport = VIEWPORT_PRESETS.landsca
       if (!script || index < 0 || index >= blocks.length) return;
       const targetBlock = blocks[index];
       if (targetBlock) {
-        return targetBlock.startTime;
+        onSeek?.(targetBlock.startTime);
       }
     },
-    [script, blocks]
+    [script, blocks, onSeek]
   );
   const nextBlock = useCallback3(() => {
     if (currentBlockIndex < blocks.length - 1) {
@@ -2178,13 +2498,14 @@ function useDocPlayback(script, currentTime, viewport = VIEWPORT_PRESETS.landsca
     nextBlock,
     prevBlock,
     goToBlock,
+    suppressOutgoingForNextBlock,
     /** Expanded blocks (templates converted to full blocks with layers) */
     blocks
   };
 }
 
 // src/hooks/useViewportOrientation.ts
-import { useState as useState4, useEffect as useEffect6, useMemo as useMemo7 } from "react";
+import { useState as useState5, useEffect as useEffect6, useMemo as useMemo7 } from "react";
 import {
   VIEWPORT_PRESETS as VIEWPORT_PRESETS2
 } from "@bendyline/squisq/doc";
@@ -2195,7 +2516,7 @@ function getOrientationFromWindow(width, height) {
   } else if (ratio < 0.83) {
     return "portrait";
   } else {
-    return "landscape";
+    return "square";
   }
 }
 function getViewportForOrientation(orientation) {
@@ -2210,7 +2531,7 @@ function getViewportForOrientation(orientation) {
   }
 }
 function useViewportOrientation() {
-  const [windowSize, setWindowSize] = useState4(() => ({
+  const [windowSize, setWindowSize] = useState5(() => ({
     width: typeof window !== "undefined" ? window.innerWidth : 1920,
     height: typeof window !== "undefined" ? window.innerHeight : 1080
   }));
@@ -2246,7 +2567,7 @@ function useViewportOrientation() {
 }
 
 // src/hooks/useSlideSwipe.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState6 } from "react";
 var DISTANCE_RATIO = 0.3;
 var FLICK_VELOCITY = 0.5;
 var MIN_FLICK_DISTANCE = 12;
@@ -2270,8 +2591,8 @@ function decideSwipe({
 }
 function useSlideSwipe(opts) {
   const settleMs = opts.settleMs ?? DEFAULT_SETTLE_MS;
-  const [offsetPx, setOffsetPx] = useState5(0);
-  const [phase, setPhase] = useState5("idle");
+  const [offsetPx, setOffsetPx] = useState6(0);
+  const [phase, setPhase] = useState6("idle");
   const optsRef = useRef5(opts);
   optsRef.current = opts;
   const dragRef = useRef5(null);
@@ -2402,7 +2723,7 @@ import {
 import { parseMarkdown as parseMarkdown2 } from "@bendyline/squisq/markdown";
 
 // src/DocProgressBar.tsx
-import { useRef as useRef6, useState as useState6, useCallback as useCallback5 } from "react";
+import { useRef as useRef6, useState as useState7, useCallback as useCallback5 } from "react";
 
 // src/types.ts
 function formatTime(seconds) {
@@ -2412,7 +2733,7 @@ function formatTime(seconds) {
 }
 
 // src/DocProgressBar.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function DocProgressBar({
   state,
   actions,
@@ -2421,7 +2742,7 @@ function DocProgressBar({
   getBlockTitle
 }) {
   const progressBarRef = useRef6(null);
-  const [hoverPosition, setHoverPosition] = useState6(null);
+  const [hoverPosition, setHoverPosition] = useState7(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;
@@ -2434,6 +2755,31 @@ function DocProgressBar({
   const handleProgressLeave = useCallback5(() => {
     setHoverPosition(null);
   }, []);
+  const handleProgressKeyDown = useCallback5(
+    (e) => {
+      let next = null;
+      switch (e.key) {
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = state.currentTime - 5;
+          break;
+        case "ArrowRight":
+        case "ArrowUp":
+          next = state.currentTime + 5;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = state.totalDuration;
+          break;
+      }
+      if (next == null) return;
+      e.preventDefault();
+      actions.seekTo(Math.max(0, Math.min(state.totalDuration, next)));
+    },
+    [actions, state.currentTime, state.totalDuration]
+  );
   const getBlockAtTimeLocal = useCallback5(
     (time) => {
       for (let i = expandedBlocks.length - 1; i >= 0; i--) {
@@ -2446,10 +2792,12 @@ function DocProgressBar({
     },
     [expandedBlocks]
   );
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: progressBarRef,
+      role: "group",
+      "aria-label": "Playback timeline",
       style: {
         flex: 1,
         height: "24px",
@@ -2467,9 +2815,17 @@ function DocProgressBar({
       onMouseMove: handleProgressHover,
       onMouseLeave: handleProgressLeave,
       children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "div",
           {
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": "Playback position",
+            "aria-valuemin": 0,
+            "aria-valuemax": state.totalDuration,
+            "aria-valuenow": Math.max(0, Math.min(state.totalDuration, state.currentTime)),
+            "aria-valuetext": `${formatTime(state.currentTime)} of ${formatTime(state.totalDuration)}`,
+            onKeyDown: handleProgressKeyDown,
             style: {
               position: "absolute",
               left: 0,
@@ -2480,7 +2836,7 @@ function DocProgressBar({
             }
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "div",
           {
             "data-testid": "doc-progress-fill",
@@ -2494,9 +2850,10 @@ function DocProgressBar({
             }
           }
         ),
-        blockMarkers.map((marker, i) => /* @__PURE__ */ jsx13(
-          "div",
+        blockMarkers.map((marker, i) => /* @__PURE__ */ jsx14(
+          "button",
           {
+            type: "button",
             style: {
               position: "absolute",
               left: `${marker.position}%`,
@@ -2506,11 +2863,13 @@ function DocProgressBar({
               borderRadius: "50%",
               background: marker.index === state.currentBlockIndex ? "#ffffff" : "rgba(255,255,255,0.5)",
               border: "2px solid #5b9bd5",
+              padding: 0,
               cursor: "pointer",
               zIndex: 2,
               transition: "transform 0.15s, background 0.15s"
             },
             title: marker.title,
+            "aria-label": `Seek to ${marker.title}`,
             onClick: (e) => {
               e.stopPropagation();
               actions.seekTo(marker.block.startTime);
@@ -2524,7 +2883,7 @@ function DocProgressBar({
           },
           `${marker.block.id}-${i}`
         )),
-        hoverPosition !== null && /* @__PURE__ */ jsxs8(
+        hoverPosition !== null && /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -2541,19 +2900,19 @@ function DocProgressBar({
               zIndex: 10
             },
             children: [
-              /* @__PURE__ */ jsx13("div", { style: { color: "white", fontSize: "12px", fontFamily: "monospace" }, children: formatTime(hoverPosition * state.totalDuration) }),
+              /* @__PURE__ */ jsx14("div", { style: { color: "white", fontSize: "12px", fontFamily: "monospace" }, children: formatTime(hoverPosition * state.totalDuration) }),
               (() => {
                 const hoverTime = hoverPosition * state.totalDuration;
                 const slideInfo = getBlockAtTimeLocal(hoverTime);
                 if (slideInfo && getBlockTitle) {
-                  return /* @__PURE__ */ jsx13("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "11px", marginTop: "2px" }, children: getBlockTitle(slideInfo.block) });
+                  return /* @__PURE__ */ jsx14("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "11px", marginTop: "2px" }, children: getBlockTitle(slideInfo.block) });
                 }
                 return null;
               })()
             ]
           }
         ),
-        hoverPosition !== null && /* @__PURE__ */ jsx13(
+        hoverPosition !== null && /* @__PURE__ */ jsx14(
           "div",
           {
             style: {
@@ -2575,7 +2934,7 @@ function DocProgressBar({
 }
 
 // src/DocControlsOverlay.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function DocControlsOverlay({
   state,
   actions,
@@ -2583,7 +2942,7 @@ function DocControlsOverlay({
   expandedBlocks,
   getBlockTitle
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: "doc-player__controls",
@@ -2600,7 +2959,7 @@ function DocControlsOverlay({
         zIndex: 100
       },
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "button",
           {
             onClick: actions.restart,
@@ -2616,10 +2975,10 @@ function DocControlsOverlay({
             },
             title: "Restart",
             "aria-label": "Restart from beginning",
-            children: /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx14("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+            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" }) })
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "button",
           {
             onClick: actions.toggle,
@@ -2638,15 +2997,15 @@ function DocControlsOverlay({
               height: "40px"
             },
             "aria-label": state.isPlaying ? "Pause" : "Play",
-            children: state.isPlaying ? /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx14("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx14("path", { d: "M8 5v14l11-7z" }) })
+            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" }) })
           }
         ),
-        /* @__PURE__ */ jsxs9("span", { style: { color: "white", fontSize: "12px", minWidth: "80px", fontFamily: "monospace" }, children: [
+        /* @__PURE__ */ jsxs10("span", { style: { color: "white", fontSize: "12px", minWidth: "80px", fontFamily: "monospace" }, children: [
           formatTime(state.currentTime),
           " / ",
           formatTime(state.totalDuration)
         ] }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           DocProgressBar,
           {
             state,
@@ -2656,12 +3015,12 @@ function DocControlsOverlay({
             getBlockTitle
           }
         ),
-        /* @__PURE__ */ jsxs9("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: "11px", whiteSpace: "nowrap" }, children: [
+        /* @__PURE__ */ jsxs10("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: "11px", whiteSpace: "nowrap" }, children: [
           state.currentBlockIndex + 1,
           "/",
           state.totalBlocks
         ] }),
-        state.hasCaptions && /* @__PURE__ */ jsxs9(
+        state.hasCaptions && /* @__PURE__ */ jsxs10(
           "button",
           {
             onClick: () => actions.cycleCaptionMode(),
@@ -2680,12 +3039,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__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx14("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) }),
-              state.captionMode !== "off" && /* @__PURE__ */ jsx14("span", { style: { fontSize: "10px", textTransform: "uppercase", letterSpacing: "0.5px" }, children: state.captionMode === "standard" ? "CC" : "SM" })
+              /* @__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" })
             ]
           }
         ),
-        actions.toggleFullscreen && /* @__PURE__ */ jsx14(
+        actions.toggleFullscreen && /* @__PURE__ */ jsx15(
           "button",
           {
             onClick: actions.toggleFullscreen,
@@ -2701,7 +3060,7 @@ function DocControlsOverlay({
             },
             title: state.isFullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)",
             "aria-label": state.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-            children: state.isFullscreen ? /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx14("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx14("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+            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" }) })
           }
         )
       ]
@@ -2710,8 +3069,29 @@ function DocControlsOverlay({
 }
 
 // src/DocControlsSlideshow.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
-function DocControlsSlideshow({ state, slideNav }) {
+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";
+function DocControlsSlideshow({
+  state,
+  slideNav,
+  slides = [],
+  pickerOpen,
+  onPickerOpenChange
+}) {
+  const [uncontrolledPickerOpen, setUncontrolledPickerOpen] = useState8(false);
+  const isPickerOpen = pickerOpen ?? uncontrolledPickerOpen;
+  const setPickerOpen = useCallback6(
+    (open) => {
+      if (pickerOpen === void 0) setUncontrolledPickerOpen(open);
+      onPickerOpenChange?.(open);
+    },
+    [pickerOpen, onPickerOpenChange]
+  );
+  const [pickerMaxHeight, setPickerMaxHeight] = useState8(280);
+  const controlsRef = useRef7(null);
+  const triggerRef = useRef7(null);
+  const menuRef = useRef7(null);
+  const menuId = useId6();
   const {
     currentBlockIndex,
     currentSlideLabel,
@@ -2722,9 +3102,68 @@ function DocControlsSlideshow({ state, slideNav }) {
   const isFirst = currentBlockIndex <= 0;
   const isLast = currentBlockIndex >= totalBlocks - 1;
   const counterText = totalBlocks > 0 ? currentSlideLabel ?? `${currentSlideNumber ?? currentBlockIndex + 1} / ${totalSlideNumber ?? totalBlocks}` : "\u2014";
-  return /* @__PURE__ */ jsxs10(
+  useEffect8(() => {
+    if (!isPickerOpen) return;
+    const handlePointerDown = (event) => {
+      if (!controlsRef.current?.contains(event.target)) setPickerOpen(false);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      setPickerOpen(false);
+      triggerRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isPickerOpen, setPickerOpen]);
+  useLayoutEffect(() => {
+    if (!isPickerOpen) return;
+    const controls = controlsRef.current;
+    const player = controls?.closest(".doc-player") ?? controls?.parentElement;
+    if (!controls || !player) return;
+    const updateMaxHeight = () => {
+      const controlsBounds = controls.getBoundingClientRect();
+      const playerBounds = player.getBoundingClientRect();
+      const availableHeight = Math.floor(controlsBounds.top - playerBounds.top - 8 - 16);
+      setPickerMaxHeight(Math.max(72, availableHeight));
+    };
+    updateMaxHeight();
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updateMaxHeight);
+    resizeObserver?.observe(player);
+    resizeObserver?.observe(controls);
+    window.addEventListener("resize", updateMaxHeight);
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", updateMaxHeight);
+    };
+  }, [isPickerOpen]);
+  useEffect8(() => {
+    if (!isPickerOpen) return;
+    menuRef.current?.querySelector('[aria-current="true"]')?.focus();
+  }, [isPickerOpen]);
+  const handleMenuKeyDown = (event) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    const items = Array.from(
+      menuRef.current?.querySelectorAll('[role="menuitem"]') ?? []
+    );
+    if (items.length === 0) return;
+    event.preventDefault();
+    const focusedIndex = items.indexOf(document.activeElement);
+    let nextIndex = focusedIndex;
+    if (event.key === "Home") nextIndex = 0;
+    else if (event.key === "End") nextIndex = items.length - 1;
+    else if (event.key === "ArrowDown") nextIndex = (focusedIndex + 1) % items.length;
+    else nextIndex = (focusedIndex - 1 + items.length) % items.length;
+    items[nextIndex]?.focus();
+  };
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
+      ref: controlsRef,
       className: "doc-controls-slideshow",
       "data-testid": "slideshow-controls",
       style: {
@@ -2743,7 +3182,7 @@ function DocControlsSlideshow({ state, slideNav }) {
         WebkitBackdropFilter: "blur(8px)"
       },
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           "button",
           {
             onClick: (e) => {
@@ -2772,27 +3211,138 @@ function DocControlsSlideshow({ state, slideNav }) {
             onMouseLeave: (e) => {
               e.currentTarget.style.background = "none";
             },
-            children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx15("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
+            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" }) })
           }
         ),
-        /* @__PURE__ */ jsx15(
-          "span",
+        /* @__PURE__ */ jsx16(
+          "button",
           {
+            ref: triggerRef,
+            type: "button",
             "data-testid": "slide-counter",
+            "aria-label": `Choose slide, current ${counterText}`,
+            "aria-haspopup": "menu",
+            "aria-expanded": isPickerOpen,
+            "aria-controls": isPickerOpen ? menuId : void 0,
+            title: "Choose slide",
+            disabled: slides.length === 0,
+            onClick: (event) => {
+              event.stopPropagation();
+              setPickerOpen(!isPickerOpen);
+            },
             style: {
+              background: isPickerOpen ? "rgba(255,255,255,0.12)" : "none",
+              border: "none",
               color: "rgba(255,255,255,0.9)",
+              cursor: slides.length > 0 ? "pointer" : "default",
               fontSize: "13px",
               fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
               fontVariantNumeric: "tabular-nums",
               minWidth: "48px",
               textAlign: "center",
-              padding: "0 4px",
-              letterSpacing: "0.02em"
+              padding: "6px 4px",
+              letterSpacing: "0.02em",
+              borderRadius: "4px",
+              transition: "background 0.15s"
             },
             children: counterText
           }
         ),
-        /* @__PURE__ */ jsx15(
+        isPickerOpen && /* @__PURE__ */ jsx16(
+          "div",
+          {
+            ref: menuRef,
+            id: menuId,
+            role: "menu",
+            "aria-label": "Choose a slide",
+            "data-testid": "slide-picker",
+            onClick: (event) => event.stopPropagation(),
+            onKeyDown: handleMenuKeyDown,
+            style: {
+              position: "absolute",
+              right: 0,
+              bottom: "calc(100% + 8px)",
+              width: "min(280px, calc(100vw - 32px))",
+              maxHeight: `${pickerMaxHeight}px`,
+              overflowY: "auto",
+              padding: "6px",
+              background: "rgba(20, 20, 20, 0.94)",
+              border: "1px solid rgba(255,255,255,0.14)",
+              borderRadius: "8px",
+              boxShadow: "0 10px 30px rgba(0,0,0,0.38)",
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)"
+            },
+            children: slides.map((slide, index) => {
+              const isCurrent = index === currentBlockIndex;
+              return /* @__PURE__ */ jsxs11(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  "aria-current": isCurrent ? "true" : void 0,
+                  "data-testid": `slide-picker-item-${index}`,
+                  onClick: () => {
+                    slideNav.goToSlide(index);
+                    setPickerOpen(false);
+                  },
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: "42px minmax(0, 1fr)",
+                    alignItems: "center",
+                    gap: "8px",
+                    width: "100%",
+                    padding: "8px 10px",
+                    background: isCurrent ? "rgba(255,255,255,0.14)" : "transparent",
+                    border: "none",
+                    borderRadius: "5px",
+                    color: "rgba(255,255,255,0.94)",
+                    cursor: "pointer",
+                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                    textAlign: "left"
+                  },
+                  onMouseEnter: (event) => {
+                    event.currentTarget.style.background = "rgba(255,255,255,0.1)";
+                  },
+                  onMouseLeave: (event) => {
+                    event.currentTarget.style.background = isCurrent ? "rgba(255,255,255,0.14)" : "transparent";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx16(
+                      "span",
+                      {
+                        style: {
+                          color: isCurrent ? "#fff" : "rgba(255,255,255,0.58)",
+                          fontSize: "12px",
+                          fontVariantNumeric: "tabular-nums",
+                          textAlign: "right"
+                        },
+                        children: slide.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx16(
+                      "span",
+                      {
+                        style: {
+                          minWidth: 0,
+                          overflow: "hidden",
+                          color: isCurrent ? "#fff" : "rgba(255,255,255,0.82)",
+                          fontSize: "13px",
+                          lineHeight: 1.3,
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: slide.summary
+                      }
+                    )
+                  ]
+                },
+                `${slide.id}-${index}`
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx16(
           "button",
           {
             onClick: (e) => {
@@ -2821,7 +3371,7 @@ function DocControlsSlideshow({ state, slideNav }) {
             onMouseLeave: (e) => {
               e.currentTarget.style.background = "none";
             },
-            children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx15("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) })
+            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" }) })
           }
         )
       ]
@@ -2830,18 +3380,18 @@ function DocControlsSlideshow({ state, slideNav }) {
 }
 
 // src/LinearDocView.tsx
-import { useMemo as useMemo8 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo8, 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 {
-  getLayers,
-  hasTemplate,
+  materializeBlockLayers,
   markdownToDoc,
   DEFAULT_THEME as DEFAULT_THEME2,
-  deriveTemplateInputs
+  deriveTemplateInputs,
+  isTemplateBlock as isTemplateBlock2
 } from "@bendyline/squisq/doc";
 import { extractPlainText, parseMarkdown } from "@bendyline/squisq/markdown";
 
@@ -2853,7 +3403,7 @@ import {
 } from "@bendyline/squisq/markdown";
 
 // src/InlineVideoPlayer.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function InlineVideoPlayer({
   src,
   basePath = "",
@@ -2868,7 +3418,7 @@ function InlineVideoPlayer({
   const resolvedPoster = useMediaUrl(poster ?? "", basePath);
   const posterUrl = poster ? resolvedPoster : void 0;
   if (!resolvedSrc) return null;
-  return /* @__PURE__ */ jsx16("span", { className: `squisq-inline-video-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17("span", { className: `squisq-inline-video-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx17(
     "video",
     {
       src: resolvedSrc,
@@ -2883,7 +3433,7 @@ function InlineVideoPlayer({
 }
 
 // src/InlineAudioPlayer.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function InlineAudioPlayer({
   src,
   basePath = "",
@@ -2893,11 +3443,11 @@ function InlineAudioPlayer({
 }) {
   const resolvedSrc = useMediaUrl(src, basePath);
   if (!resolvedSrc) return null;
-  return /* @__PURE__ */ jsx17("span", { className: `squisq-inline-audio-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx17("audio", { src: resolvedSrc, controls, preload }) });
+  return /* @__PURE__ */ jsx18("span", { className: `squisq-inline-audio-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx18("audio", { src: resolvedSrc, controls, preload }) });
 }
 
 // src/MarkdownRenderer.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_CTX = { htmlPolicy: "sanitize" };
 function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
   return nodes.map((node, i) => {
@@ -2905,28 +3455,28 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
     switch (node.type) {
       case "text": {
         if (!node.value.includes("\n")) {
-          return /* @__PURE__ */ jsx18(Fragment2, { children: node.value }, key);
+          return /* @__PURE__ */ jsx19(Fragment2, { children: node.value }, key);
         }
         const parts = node.value.split("\n");
-        return /* @__PURE__ */ jsx18(Fragment2, { children: parts.map((part, j) => /* @__PURE__ */ jsxs11(Fragment2, { children: [
-          j > 0 && /* @__PURE__ */ jsx18("br", {}),
+        return /* @__PURE__ */ jsx19(Fragment2, { children: parts.map((part, j) => /* @__PURE__ */ jsxs12(Fragment2, { children: [
+          j > 0 && /* @__PURE__ */ jsx19("br", {}),
           part
         ] }, j)) }, key);
       }
       case "emphasis":
-        return /* @__PURE__ */ jsx18("em", { className: "squisq-md-em", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx19("em", { className: "squisq-md-em", children: renderInline(node.children, key, ctx) }, key);
       case "strong":
-        return /* @__PURE__ */ jsx18("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx19("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, ctx) }, key);
       case "delete":
-        return /* @__PURE__ */ jsx18("del", { className: "squisq-md-del", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx19("del", { className: "squisq-md-del", children: renderInline(node.children, key, ctx) }, key);
       case "inlineCode":
-        return /* @__PURE__ */ jsx18("code", { className: "squisq-md-inline-code", children: node.value }, key);
+        return /* @__PURE__ */ jsx19("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__ */ jsx18("span", { className: "squisq-md-link squisq-md-link--blocked", children: renderInline(node.children, key, ctx) }, key);
+          return /* @__PURE__ */ jsx19("span", { className: "squisq-md-link squisq-md-link--blocked", children: renderInline(node.children, key, ctx) }, key);
         }
-        return /* @__PURE__ */ jsx18(
+        return /* @__PURE__ */ jsx19(
           "a",
           {
             className: "squisq-md-link",
@@ -2940,42 +3490,32 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
         );
       }
       case "image":
-        return /* @__PURE__ */ jsx18(MdImage, { src: node.url, alt: node.alt ?? "", title: node.title ?? void 0 }, key);
+        return /* @__PURE__ */ jsx19(MdImage, { src: node.url, alt: node.alt ?? "", title: node.title ?? void 0 }, key);
       case "break":
-        return /* @__PURE__ */ jsx18("br", {}, key);
+        return /* @__PURE__ */ jsx19("br", {}, key);
       case "inlineMath":
-        return /* @__PURE__ */ jsx18("code", { className: "squisq-md-inline-math", children: node.value }, key);
+        return /* @__PURE__ */ jsx19("code", { className: "squisq-md-inline-math", children: node.value }, key);
       case "htmlInline":
         if (ctx.htmlPolicy === "strip") return null;
-        if (ctx.htmlPolicy === "trusted" && !containsMediaTag(node.htmlChildren) && !containsDangerousTag(node.htmlChildren) && !hasDangerousRawHtml(node.rawHtml)) {
-          return /* @__PURE__ */ jsx18(
-            "span",
-            {
-              className: "squisq-md-html-inline",
-              dangerouslySetInnerHTML: { __html: node.rawHtml }
-            },
-            key
-          );
-        }
-        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`) }, key);
+        return /* @__PURE__ */ jsx19("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
       case "footnoteReference":
-        return /* @__PURE__ */ jsx18("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs11("a", { href: `#fn-${node.identifier}`, children: [
+        return /* @__PURE__ */ jsx19("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs12("a", { href: `#fn-${node.identifier}`, children: [
           "[",
           node.label ?? node.identifier,
           "]"
         ] }) }, key);
       case "linkReference":
-        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx19("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, ctx) }, key);
       case "imageReference":
-        return /* @__PURE__ */ jsxs11("span", { className: "squisq-md-image-ref", children: [
+        return /* @__PURE__ */ jsxs12("span", { className: "squisq-md-image-ref", children: [
           "[",
           node.alt ?? node.identifier,
           "]"
         ] }, key);
       case "textDirective":
-        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx19("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, ctx) }, key);
       case "mention":
-        return /* @__PURE__ */ jsxs11(
+        return /* @__PURE__ */ jsxs12(
           "span",
           {
             className: "squisq-md-mention mention",
@@ -2998,61 +3538,51 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
 function renderBlock(node, key, ctx = DEFAULT_CTX) {
   switch (node.type) {
     case "paragraph":
-      return /* @__PURE__ */ jsx18("p", { className: "squisq-md-p", children: renderInline(node.children, key, ctx) }, key);
+      return /* @__PURE__ */ jsx19("p", { className: "squisq-md-p", children: renderInline(node.children, key, ctx) }, key);
     case "heading": {
       const Tag = `h${node.depth}`;
-      return /* @__PURE__ */ jsx18(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, ctx) }, key);
+      return /* @__PURE__ */ jsx19(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, ctx) }, key);
     }
     case "blockquote":
-      return /* @__PURE__ */ jsx18("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, ctx) }, key);
+      return /* @__PURE__ */ jsx19("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, ctx) }, key);
     case "list":
       if (node.ordered) {
-        return /* @__PURE__ */ jsx18("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
+        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__ */ jsx18("ul", { className: "squisq-md-list squisq-md-ul", 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);
     case "code":
-      return /* @__PURE__ */ jsx18("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx18("code", { className: node.lang ? `language-${node.lang}` : void 0, children: node.value }) }, key);
+      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);
     case "thematicBreak":
-      return /* @__PURE__ */ jsx18("hr", { className: "squisq-md-hr" }, key);
+      return /* @__PURE__ */ jsx19("hr", { className: "squisq-md-hr" }, key);
     case "table":
       return renderTable(node.children, node.align, key, ctx);
     case "htmlBlock":
       if (ctx.htmlPolicy === "strip") return null;
-      if (ctx.htmlPolicy === "trusted" && !containsMediaTag(node.htmlChildren) && !containsDangerousTag(node.htmlChildren) && !hasDangerousRawHtml(node.rawHtml)) {
-        return /* @__PURE__ */ jsx18(
-          "div",
-          {
-            className: "squisq-md-html-block",
-            dangerouslySetInnerHTML: { __html: node.rawHtml }
-          },
-          key
-        );
-      }
-      return /* @__PURE__ */ jsx18("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`) }, key);
+      return /* @__PURE__ */ jsx19("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
     case "math":
-      return /* @__PURE__ */ jsx18("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx18("code", { children: node.value }) }, key);
+      return /* @__PURE__ */ jsx19("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx19("code", { children: node.value }) }, key);
     case "definition":
       return null;
     case "footnoteDefinition":
-      return /* @__PURE__ */ jsxs11("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
-        /* @__PURE__ */ jsx18("sup", { children: node.label ?? node.identifier }),
+      return /* @__PURE__ */ jsxs12("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
+        /* @__PURE__ */ jsx19("sup", { children: node.label ?? node.identifier }),
         renderBlocks(node.children, key, ctx)
       ] }, key);
     case "containerDirective":
-      return /* @__PURE__ */ jsxs11(
+      return /* @__PURE__ */ jsxs12(
         "div",
         {
           className: `squisq-md-directive squisq-md-directive-${node.name}`,
           "data-directive": node.name,
           children: [
-            node.label && /* @__PURE__ */ jsx18("div", { className: "squisq-md-directive-label", children: node.label }),
+            node.label && /* @__PURE__ */ jsx19("div", { className: "squisq-md-directive-label", children: node.label }),
             renderBlocks(node.children, key, ctx)
           ]
         },
         key
       );
     case "leafDirective":
-      return /* @__PURE__ */ jsx18(
+      return /* @__PURE__ */ jsx19(
         "div",
         {
           className: `squisq-md-directive squisq-md-directive-${node.name}`,
@@ -3062,11 +3592,11 @@ function renderBlock(node, key, ctx = DEFAULT_CTX) {
         key
       );
     case "definitionList":
-      return /* @__PURE__ */ jsx18("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
+      return /* @__PURE__ */ jsx19("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
         if (child.type === "definitionTerm") {
-          return /* @__PURE__ */ jsx18("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, ctx) }, `${key}dt${i}`);
+          return /* @__PURE__ */ jsx19("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, ctx) }, `${key}dt${i}`);
         }
-        return /* @__PURE__ */ jsx18("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`, ctx) }, `${key}dd${i}`);
+        return /* @__PURE__ */ jsx19("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`, ctx) }, `${key}dd${i}`);
       }) }, key);
     default:
       return null;
@@ -3074,15 +3604,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__ */ jsxs11("li", { className: `squisq-md-li${isTask ? " squisq-md-task" : ""}`, children: [
-    isTask && /* @__PURE__ */ jsx18("input", { type: "checkbox", checked: !!item.checked, readOnly: true, className: "squisq-md-checkbox" }),
+  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" }),
     renderBlocks(item.children, key, ctx)
   ] }, key);
 }
 function renderTable(rows, align, key, ctx = DEFAULT_CTX) {
   const [headerRow, ...bodyRows] = rows;
-  return /* @__PURE__ */ jsxs11("table", { className: "squisq-md-table", children: [
-    headerRow && /* @__PURE__ */ jsx18("thead", { children: /* @__PURE__ */ jsx18("tr", { children: headerRow.children.map((cell, ci) => /* @__PURE__ */ jsx18(
+  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(
       "th",
       {
         className: "squisq-md-th",
@@ -3091,7 +3621,7 @@ function renderTable(rows, align, key, ctx = DEFAULT_CTX) {
       },
       `${key}th${ci}`
     )) }) }),
-    bodyRows.length > 0 && /* @__PURE__ */ jsx18("tbody", { children: bodyRows.map((row, ri) => /* @__PURE__ */ jsx18("tr", { children: row.children.map((cell, ci) => /* @__PURE__ */ jsx18(
+    bodyRows.length > 0 && /* @__PURE__ */ jsx19("tbody", { children: bodyRows.map((row, ri) => /* @__PURE__ */ jsx19("tr", { children: row.children.map((cell, ci) => /* @__PURE__ */ jsx19(
       "td",
       {
         className: "squisq-md-td",
@@ -3109,22 +3639,13 @@ function MdImage({ src, alt, title }) {
   const safeSrc = sanitizeUrl(src, "media");
   const resolved = useMediaUrl(safeSrc ?? "", ".");
   if (!safeSrc) return null;
-  return /* @__PURE__ */ jsx18("img", { className: "squisq-md-image", src: resolved, alt, title });
+  return /* @__PURE__ */ jsx19("img", { className: "squisq-md-image", src: resolved, alt, title });
 }
 function resolveHtmlNodes(nodes, htmlPolicy) {
   if (htmlPolicy === "strip") return [];
   if (htmlPolicy === "trusted") return nodes;
   return sanitizeHtmlNodes2(nodes);
 }
-function containsMediaTag(nodes) {
-  for (const node of nodes) {
-    if (node.type !== "htmlElement") continue;
-    const tagName = node.tagName.toLowerCase();
-    if (tagName === "video" || tagName === "audio") return true;
-    if (containsMediaTag(node.children)) return true;
-  }
-  return false;
-}
 var DANGEROUS_HTML_TAGS = /* @__PURE__ */ new Set([
   "base",
   "embed",
@@ -3136,18 +3657,6 @@ var DANGEROUS_HTML_TAGS = /* @__PURE__ */ new Set([
   "style",
   "title"
 ]);
-function containsDangerousTag(nodes) {
-  for (const node of nodes) {
-    if (node.type !== "htmlElement") continue;
-    if (DANGEROUS_HTML_TAGS.has(node.tagName.toLowerCase())) return true;
-    if (containsDangerousTag(node.children)) return true;
-  }
-  return false;
-}
-var DANGEROUS_RAW_HTML_RE = /<\s*\/?\s*(?:base|embed|iframe|link|meta|object|script|style|title)\b/i;
-function hasDangerousRawHtml(rawHtml) {
-  return DANGEROUS_RAW_HTML_RE.test(rawHtml);
-}
 var PASSTHROUGH_ATTRS = {
   // common
   class: "className",
@@ -3166,7 +3675,7 @@ var PASSTHROUGH_ATTRS = {
   target: "target",
   rel: "rel"
 };
-function reactPropsFromAttrs(attrs) {
+function reactPropsFromAttrs(attrs, ctx) {
   const out = {};
   for (const [name, value] of Object.entries(attrs)) {
     const propName = PASSTHROUGH_ATTRS[name];
@@ -3175,21 +3684,33 @@ function reactPropsFromAttrs(attrs) {
       out["data-style"] = value;
       continue;
     }
+    if (propName === "href") {
+      const href = sanitizeUrl(value, "link", { extraLinkSchemes: ctx.linkSchemes });
+      if (href) out.href = href;
+      continue;
+    }
+    if (propName === "src") {
+      const src = sanitizeUrl(value, "media");
+      if (src) out.src = src;
+      continue;
+    }
     out[propName] = value;
   }
   return out;
 }
-function renderHtmlElement(el, key) {
+function renderHtmlElement(el, key, ctx) {
   const tagName = el.tagName.toLowerCase();
   if (DANGEROUS_HTML_TAGS.has(tagName)) return null;
   if (tagName === "video") {
-    return /* @__PURE__ */ jsx18(
+    const src = sanitizeUrl(el.attributes.src ?? "", "media") ?? "";
+    const poster = sanitizeUrl(el.attributes.poster ?? "", "media") ?? void 0;
+    return /* @__PURE__ */ jsx19(
       InlineVideoPlayer,
       {
-        src: el.attributes.src ?? "",
+        src,
         width: el.attributes.width,
         height: el.attributes.height,
-        poster: el.attributes.poster,
+        poster,
         controls: "controls" in el.attributes,
         preload: el.attributes.preload === "none" || el.attributes.preload === "metadata" || el.attributes.preload === "auto" ? el.attributes.preload : void 0
       },
@@ -3197,10 +3718,11 @@ function renderHtmlElement(el, key) {
     );
   }
   if (tagName === "audio") {
-    return /* @__PURE__ */ jsx18(
+    const src = sanitizeUrl(el.attributes.src ?? "", "media") ?? "";
+    return /* @__PURE__ */ jsx19(
       InlineAudioPlayer,
       {
-        src: el.attributes.src ?? "",
+        src,
         controls: "controls" in el.attributes,
         preload: el.attributes.preload === "none" || el.attributes.preload === "metadata" || el.attributes.preload === "auto" ? el.attributes.preload : void 0
       },
@@ -3208,20 +3730,20 @@ function renderHtmlElement(el, key) {
     );
   }
   const Tag = tagName;
-  const props = reactPropsFromAttrs(el.attributes);
+  const props = reactPropsFromAttrs(el.attributes, ctx);
   if (el.selfClosing) {
-    return /* @__PURE__ */ jsx18(Tag, { ...props }, key);
+    return /* @__PURE__ */ jsx19(Tag, { ...props }, key);
   }
-  return /* @__PURE__ */ jsx18(Tag, { ...props, children: renderHtmlNodes(el.children, `${key}c`) }, key);
+  return /* @__PURE__ */ jsx19(Tag, { ...props, children: renderHtmlNodes(el.children, `${key}c`, ctx) }, key);
 }
-function renderHtmlNodes(nodes, keyPrefix) {
+function renderHtmlNodes(nodes, keyPrefix, ctx = DEFAULT_CTX) {
   return nodes.map((node, i) => {
     const key = `${keyPrefix}${i}`;
     switch (node.type) {
       case "htmlElement":
-        return renderHtmlElement(node, key);
+        return renderHtmlElement(node, key, ctx);
       case "htmlText":
-        return /* @__PURE__ */ jsx18(Fragment2, { children: node.value }, key);
+        return /* @__PURE__ */ jsx19(Fragment2, { children: node.value }, key);
       case "htmlComment":
         return null;
       default:
@@ -3236,25 +3758,16 @@ function MarkdownRenderer({
   linkSchemes
 }) {
   if (!nodes || nodes.length === 0) return null;
-  return /* @__PURE__ */ jsx18("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", { htmlPolicy, linkSchemes }) });
+  return /* @__PURE__ */ jsx19("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", { htmlPolicy, linkSchemes }) });
 }
 
 // src/LinearDocView.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
-var warnedUnknownTemplates = /* @__PURE__ */ new Set();
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function isAnnotatedBlock(block) {
-  const annotation = block.sourceHeading?.templateAnnotation;
-  if (!annotation?.template) return false;
-  if (!hasTemplate(annotation.template)) {
-    if (!warnedUnknownTemplates.has(annotation.template)) {
-      warnedUnknownTemplates.add(annotation.template);
-      console.warn(
-        `[squisq] Unknown template "${annotation.template}" \u2014 rendering the block as plain markdown.`
-      );
-    }
-    return false;
-  }
-  return true;
+  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;
@@ -3264,50 +3777,65 @@ function countAll(blocks) {
   }
   return count;
 }
-function BlockSection({ block, basePath, viewport, renderContext, blockIndex }) {
+function BlockSection({
+  block,
+  basePath,
+  viewport,
+  renderContext,
+  blockIndex,
+  blockIndices,
+  animationsEnabled
+}) {
   const isAnnotated = isAnnotatedBlock(block);
   const visualBlock = useMemo8(() => {
     if (!isAnnotated) return null;
-    const annotation = block.sourceHeading.templateAnnotation;
-    const headingText = extractPlainText(block.sourceHeading);
-    const templateBlock = {
-      id: block.id,
-      template: annotation.template,
-      startTime: 0,
-      duration: 1,
-      audioSegment: 0,
-      title: headingText,
-      ...deriveTemplateInputs(
-        annotation.template ?? "sectionHeader",
-        headingText,
-        block.contents,
-        {
+    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
+        }) ?? {},
+        ...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 = getLayers(templateBlock, ctx);
+    const { layers } = materializeBlockLayers(templateBlock, ctx);
     return {
       ...block,
       layers,
-      template: annotation.template
+      template: templateName
     };
   }, [block, isAnnotated, renderContext, blockIndex]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: "squisq-linear-section",
       "data-block-id": block.id,
-      "data-template": isAnnotated ? block.sourceHeading?.templateAnnotation?.template : void 0,
+      "data-block-index": blockIndex,
+      "data-template": isAnnotated ? visualTemplateName(block) : void 0,
       children: [
-        block.sourceHeading && !isAnnotated && /* @__PURE__ */ jsx19(MarkdownRenderer, { nodes: [block.sourceHeading] }),
-        isAnnotated && visualBlock && /* @__PURE__ */ jsx19("div", { className: "squisq-linear-card", children: /* @__PURE__ */ jsx19(
+        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",
@@ -3317,26 +3845,29 @@ function BlockSection({ block, basePath, viewport, renderContext, blockIndex })
               overflow: "hidden",
               marginBottom: "1em"
             },
-            children: /* @__PURE__ */ jsx19(
+            children: /* @__PURE__ */ jsx20(
               BlockRenderer,
               {
                 block: visualBlock,
                 blockTime: 0,
                 basePath,
-                viewport
+                viewport,
+                animationsEnabled
               }
             )
           }
         ) }),
-        !isAnnotated && block.contents && block.contents.length > 0 && /* @__PURE__ */ jsx19(MarkdownRenderer, { nodes: block.contents }),
-        block.children && block.children.length > 0 && /* @__PURE__ */ jsx19("div", { className: "squisq-linear-children", children: block.children.map((child, i) => /* @__PURE__ */ jsx19(
+        !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: blockIndex + i + 1
+            blockIndex: blockIndices.get(child) ?? blockIndex + i + 1,
+            blockIndices,
+            animationsEnabled
           },
           child.id
         )) })
@@ -3352,9 +3883,12 @@ function LinearDocView({
   className,
   theme,
   surface,
+  animationsEnabled = true,
   thinMargins = false,
-  imageDisplayMode = "inline"
+  imageDisplayMode = "inline",
+  globalKeyboardShortcuts = false
 }) {
+  const scrollRef = useRef8(null);
   const activeViewport = viewport ?? VIEWPORT_PRESETS3.landscape;
   const markdownDoc = useMemo8(
     () => !doc && markdown !== void 0 ? markdownToDoc(parseMarkdown(markdown)) : void 0,
@@ -3365,6 +3899,18 @@ function LinearDocView({
     () => 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(() => {
@@ -3376,12 +3922,37 @@ function LinearDocView({
       totalBlocks,
       // Theme atmosphere (vignette/grain/gradient persistent layers) shows
       // on the inline template cards so they match the player's look.
-      persistentLayers: effectiveTheme.persistentLayers
+      persistentLayers: effectiveTheme.persistentLayers,
+      customTemplates: resolvedDoc?.customTemplates
     };
-  }, [activeViewport, totalBlocks, theme, resolvedSurface]);
+  }, [activeViewport, resolvedDoc?.customTemplates, totalBlocks, theme, resolvedSurface]);
   const activeTheme = renderContext.theme;
+  useEffect9(() => {
+    if (!globalKeyboardShortcuts) return;
+    const handleKeyDown = (event) => {
+      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
+        return;
+      }
+      const target = event.target instanceof Element ? event.target : null;
+      if (target?.closest(
+        'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"], [role="combobox"], [role="listbox"], [role="menu"], [role="dialog"], [aria-modal="true"], .monaco-editor'
+      )) {
+        return;
+      }
+      const scroller = scrollRef.current;
+      if (!scroller) return;
+      event.preventDefault();
+      const distance = Math.max(64, Math.round(scroller.clientHeight * 0.12));
+      scroller.scrollBy({
+        top: event.key === "ArrowDown" ? distance : -distance,
+        behavior: "smooth"
+      });
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [globalKeyboardShortcuts]);
   if (!resolvedDoc) {
-    return /* @__PURE__ */ jsx19("div", { className: `squisq-linear squisq-linear--empty ${className || ""}` });
+    return /* @__PURE__ */ jsx20("div", { ref: scrollRef, className: `squisq-linear squisq-linear--empty ${className || ""}` });
   }
   const bgColor = activeTheme.colors.background;
   const textColor = activeTheme.colors.text;
@@ -3390,9 +3961,10 @@ function LinearDocView({
   const bodyFont = resolveFontFamily2(activeTheme.typography.bodyFont, "system-ui, sans-serif");
   const titleFont = resolveFontFamily2(activeTheme.typography.titleFont, "Georgia, serif");
   const lineHt = activeTheme.typography.lineHeight ?? 1.7;
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
+      ref: scrollRef,
       className: `squisq-linear ${className || ""}`,
       style: {
         width: "100%",
@@ -3406,7 +3978,7 @@ function LinearDocView({
         overflowX: "hidden",
         background: bgColor
       },
-      children: /* @__PURE__ */ jsxs12(
+      children: /* @__PURE__ */ jsxs13(
         "div",
         {
           className: `squisq-linear-content squisq-md${thinMargins ? " squisq-linear-content--thin" : ""}${imageDisplayMode === "thumbnail" ? " squisq-linear-content--thumbnail-images" : ""}`,
@@ -3431,7 +4003,7 @@ function LinearDocView({
             "--squisq-linear-bg": bgColor
           },
           children: [
-            /* @__PURE__ */ jsx19("style", { children: `
+            /* @__PURE__ */ jsx20("style", { children: `
           .squisq-linear-content h1,
           .squisq-linear-content h2,
           .squisq-linear-content h3,
@@ -3449,6 +4021,9 @@ function LinearDocView({
           .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;
@@ -3543,14 +4118,16 @@ function LinearDocView({
             background: color-mix(in srgb, var(--squisq-linear-primary) 8%, transparent);
           }
         ` }),
-            resolvedDoc.blocks.map((block, i) => /* @__PURE__ */ jsx19(
+            resolvedDoc.blocks.map((block, i) => /* @__PURE__ */ jsx20(
               BlockSection,
               {
                 block,
                 basePath,
                 viewport: activeViewport,
                 renderContext,
-                blockIndex: i
+                blockIndex: blockIndices.get(block) ?? i,
+                blockIndices,
+                animationsEnabled
               },
               block.id
             ))
@@ -3562,7 +4139,7 @@ function LinearDocView({
 }
 
 // src/DocPlayer.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var SMALL_WORDS = /* @__PURE__ */ new Set([
   "a",
   "an",
@@ -3583,7 +4160,7 @@ var SMALL_WORDS = /* @__PURE__ */ new Set([
 function buildSegmentTitleMap(doc) {
   const map = /* @__PURE__ */ new Map();
   for (const block of doc.blocks) {
-    if (isTemplateBlock2(block) && block.template === "sectionHeader" && "title" in block) {
+    if (isTemplateBlock3(block) && block.template === "sectionHeader" && "title" in block) {
       const segIdx = block.audioSegment;
       if (!map.has(segIdx)) {
         map.set(segIdx, block.title);
@@ -3624,14 +4201,15 @@ function DocPlayer(props) {
   );
   const resolvedDoc = doc ?? markdownDoc;
   if (!resolvedDoc) {
-    return /* @__PURE__ */ jsx20("div", { className: "doc-player doc-player--empty" });
+    return /* @__PURE__ */ jsx21("div", { className: "doc-player doc-player--empty" });
   }
-  return /* @__PURE__ */ jsx20(DocPlayerContent, { ...props, doc: resolvedDoc });
+  return /* @__PURE__ */ jsx21(DocPlayerContent, { ...props, doc: resolvedDoc });
 }
 function DocPlayerContent({
   doc,
   basePath = ".",
   renderMode = false,
+  animationsEnabled = true,
   autoPlay = false,
   onEnded,
   onTimeUpdate,
@@ -3643,23 +4221,27 @@ function DocPlayerContent({
   onCaptionsToggle,
   onPlaybackStateChange,
   onControlsReady,
+  onRenderAPIReady,
   isFullscreen = false,
   onFullscreenToggle,
   onBlockMarkers,
   forceViewport,
   displayMode = "video",
   showCoverSlide = true,
+  coverVisible,
   theme,
   surface,
   captionStyle = "standard",
-  enableSwipe = true
+  enableSwipe = true,
+  globalKeyboardShortcuts = false
 }) {
   const isSlideshowMode = displayMode === "slideshow";
   const isLinearMode = displayMode === "linear";
-  const audioRef = useRef7(null);
-  const containerRef = useRef7(null);
-  const [tapFeedback, setTapFeedback] = useState7(null);
-  const tapFeedbackTimer = useRef7();
+  const audioRef = useRef9(null);
+  const containerRef = useRef9(null);
+  const playerId = `squisq-player-${useId7().replace(/:/g, "")}`;
+  const [tapFeedback, setTapFeedback] = useState9(null);
+  const tapFeedbackTimer = useRef9();
   const { viewport, orientation } = useViewportOrientation();
   const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS4.landscape : viewport);
   const isDebugMode = useMemo9(() => {
@@ -3667,9 +4249,9 @@ function DocPlayerContent({
     const params = new URLSearchParams(window.location.search);
     return params.get("debug") === "true";
   }, []);
-  const internalAudio = useAudioSync(audioRef, doc.audio, basePath);
+  const internalAudio = useAudioSync(audioRef, doc.audio, basePath, !externalAudioController);
   const audio = externalAudioController || internalAudio;
-  useEffect8(() => {
+  useEffect10(() => {
     if (warnedMissingStyles || !isDevEnvironment()) return;
     const el = containerRef.current;
     if (!el || typeof getComputedStyle !== "function") return;
@@ -3698,21 +4280,28 @@ function DocPlayerContent({
     restart
   } = audio;
   const mediaSchedule = useMemo9(() => resolveMediaSchedule(doc), [doc]);
-  const currentTimeRef = useRef7(currentTime);
+  const currentTimeRef = useRef9(currentTime);
   currentTimeRef.current = currentTime;
-  const totalDurationRef = useRef7(totalDuration);
+  const totalDurationRef = useRef9(totalDuration);
   totalDurationRef.current = totalDuration;
-  const expandedBlocksLenRef = useRef7(0);
-  const handleContainerClick = useCallback6(
+  const expandedBlocksLenRef = useRef9(0);
+  const handleContainerClick = useCallback7(
     (e) => {
-      if (renderMode || isSlideshowMode || isLinearMode) return;
+      if (renderMode || isLinearMode) return;
       const target = e.target;
+      if (isSlideshowMode) {
+        if (!target.closest('button, a, input, textarea, select, [contenteditable="true"]')) {
+          containerRef.current?.focus({ preventScroll: true });
+        }
+        return;
+      }
       if (target.closest(
-        "button, a, input, .doc-player__controls, .doc-player__scrubber, .doc-controls-sidebar, .doc-controls-slideshow"
+        'button, a, input, textarea, select, [contenteditable="true"], .doc-player__controls, .doc-player__scrubber, .doc-controls-sidebar, .doc-controls-slideshow'
       ))
         return;
+      containerRef.current?.focus({ preventScroll: true });
       toggle();
-      const nextState = isPlaying ? "play" : "pause";
+      const nextState = isPlaying ? "pause" : "play";
       setTapFeedback(nextState);
       clearTimeout(tapFeedbackTimer.current);
       tapFeedbackTimer.current = setTimeout(() => setTapFeedback(null), 600);
@@ -3736,8 +4325,13 @@ function DocPlayerContent({
     docProgress,
     nextBlock: _nextBlock,
     prevBlock: _prevBlock,
-    blocks: expandedBlocks
-  } = useDocPlayback(doc, currentTime, activeViewport, renderMode, effectiveTheme);
+    blocks: expandedBlocks,
+    suppressOutgoingForNextBlock
+  } = useDocPlayback(doc, currentTime, {
+    viewport: activeViewport,
+    theme: effectiveTheme,
+    onSeek: seekTo
+  });
   const coverBlock = useMemo9(() => {
     const startBlockConfig = doc.startBlock;
     if (!showCoverSlide) return null;
@@ -3755,9 +4349,13 @@ function DocPlayerContent({
     };
   }, [doc.startBlock, activeViewport, effectiveTheme, showCoverSlide]);
   const hasManagedCover = !!coverBlock;
-  const [slideshowCoverVisible, setSlideshowCoverVisible] = useState7(false);
-  const slideshowCoverInitKeyRef = useRef7("");
-  useEffect8(() => {
+  const [slideshowCoverVisible, setSlideshowCoverVisible] = useState9(false);
+  const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState9(false);
+  const slideshowCoverInitKeyRef = useRef9("");
+  useEffect10(() => {
+    slideshowCoverInitKeyRef.current = "";
+  }, [doc]);
+  useEffect10(() => {
     const initKey = `${isSlideshowMode}:${hasManagedCover}:${renderMode}`;
     if (slideshowCoverInitKeyRef.current === initKey) return;
     slideshowCoverInitKeyRef.current = initKey;
@@ -3768,14 +4366,21 @@ function DocPlayerContent({
       setSlideshowCoverVisible(false);
     }
   }, [isSlideshowMode, hasManagedCover, renderMode, pause]);
-  const [coverForced, setCoverForced] = useState7(false);
-  const [coverGraceActive, setCoverGraceActive] = useState7(false);
-  const coverGraceTimer = useRef7();
-  const coverWasShowing = useRef7(false);
-  const hasPlayedOnce = useRef7(false);
+  const [coverForced, setCoverForced] = useState9(false);
+  const [coverGraceActive, setCoverGraceActive] = useState9(false);
+  const coverGraceTimer = useRef9();
+  const coverWasShowing = useRef9(false);
+  const hasPlayedOnce = useRef9(false);
+  useEffect10(() => {
+    hasPlayedOnce.current = false;
+    coverWasShowing.current = false;
+    clearTimeout(coverGraceTimer.current);
+    setCoverGraceActive(false);
+    setCoverForced(false);
+  }, [doc]);
   const atRest = !!(coverBlock && !isSlideshowMode && !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
   if (atRest) coverWasShowing.current = true;
-  useEffect8(() => {
+  useEffect10(() => {
     if (isPlaying && coverWasShowing.current && coverBlock && !renderMode && !isSlideshowMode) {
       coverWasShowing.current = false;
       hasPlayedOnce.current = true;
@@ -3783,88 +4388,96 @@ function DocPlayerContent({
       coverGraceTimer.current = setTimeout(() => setCoverGraceActive(false), 3e3);
     }
   }, [isPlaying, coverBlock, renderMode, isSlideshowMode]);
-  useEffect8(() => () => clearTimeout(coverGraceTimer.current), []);
+  useEffect10(() => () => clearTimeout(coverGraceTimer.current), []);
   const showVideoCoverBlock = !isSlideshowMode && !isLinearMode && !!coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
-  const showSlideshowCover = !!(isSlideshowMode && !isLinearMode && !renderMode && coverBlock && slideshowCoverVisible);
-  const showCoverBlock = showVideoCoverBlock || showSlideshowCover;
+  const effectiveSlideshowCoverVisible = coverVisible ?? slideshowCoverVisible;
+  const showSlideshowCover = !!(isSlideshowMode && !isLinearMode && !renderMode && coverBlock && effectiveSlideshowCoverVisible);
+  const showCoverBlock = coverVisible === void 0 ? showVideoCoverBlock || showSlideshowCover : !!coverBlock && coverVisible;
   const slideshowHasCover = !!(isSlideshowMode && !renderMode && coverBlock);
-  const slideshowSlideIndex = slideshowHasCover ? slideshowCoverVisible ? 0 : currentBlockIndex + 1 : currentBlockIndex;
+  const slideshowSlideIndex = slideshowHasCover ? effectiveSlideshowCoverVisible ? 0 : currentBlockIndex + 1 : currentBlockIndex;
   const slideshowTotalSlides = slideshowHasCover ? expandedBlocks.length + 1 : expandedBlocks.length;
-  const hasAutoPlayed = useRef7(false);
-  useEffect8(() => {
+  const hasAutoPlayed = useRef9(false);
+  useEffect10(() => {
+    hasAutoPlayed.current = false;
+  }, [doc]);
+  useEffect10(() => {
     if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
       hasAutoPlayed.current = true;
       play();
     }
   }, [isAudioReady, autoPlay, play]);
-  useEffect8(() => {
+  useEffect10(() => {
     onTimeUpdate?.(currentTime);
   }, [currentTime, onTimeUpdate]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (isEnded) {
       onEnded?.();
     }
   }, [isEnded, onEnded]);
-  useEffect8(() => {
-    if ((renderMode || isDebugMode) && typeof window !== "undefined") {
-      const w = window;
-      w.seekTo = (time) => {
-        seekTo(time);
-        return new Promise((resolve) => {
-          requestAnimationFrame(() => {
-            let blockStartTime = 0;
-            for (let i = expandedBlocks.length - 1; i >= 0; i--) {
-              if (time >= expandedBlocks[i].startTime) {
-                blockStartTime = expandedBlocks[i].startTime;
-                break;
-              }
+  const liveRenderAPIRef = useRef9(null);
+  const stableRenderAPIRef = useRef9(null);
+  if (!stableRenderAPIRef.current) {
+    const current = () => {
+      const api = liveRenderAPIRef.current;
+      if (!api) throw new Error("Squisq render API is not currently available.");
+      return api;
+    };
+    stableRenderAPIRef.current = {
+      seekTo: (time) => current().seekTo(time),
+      getDuration: () => current().getDuration(),
+      getBlocks: () => current().getBlocks(),
+      getAudioSegments: () => current().getAudioSegments(),
+      getCaptions: () => current().getCaptions(),
+      getChapters: () => current().getChapters(),
+      showCover: () => current().showCover(),
+      hideCover: () => current().hideCover(),
+      hasCoverBlock: () => current().hasCoverBlock()
+    };
+  }
+  const stableRenderAPI = stableRenderAPIRef.current;
+  useEffect10(() => {
+    if (!renderMode && !isDebugMode) {
+      liveRenderAPIRef.current = null;
+      return;
+    }
+    const root = containerRef.current;
+    if (!root) {
+      liveRenderAPIRef.current = null;
+      return;
+    }
+    const renderSeekTo = (time) => {
+      seekTo(time);
+      return new Promise((resolve) => {
+        requestAnimationFrame(() => {
+          let blockStartTime = 0;
+          for (let i = expandedBlocks.length - 1; i >= 0; i--) {
+            if (time >= expandedBlocks[i].startTime) {
+              blockStartTime = expandedBlocks[i].startTime;
+              break;
             }
-            const elapsedMs = (time - blockStartTime) * 1e3;
-            document.getAnimations().forEach((anim) => {
-              const target = anim.effect?.target;
-              if (!target) return;
-              if (target.closest(".doc-player__block--active")) {
-                anim.currentTime = Math.max(0, elapsedMs);
-              } else if (target.closest(".doc-player__block--previous")) {
-                anim.currentTime = Math.max(0, elapsedMs);
-              }
-            });
-            const blockElapsed = time - blockStartTime;
-            const videoSeekPromises = [];
-            const activeBlockEl = document.querySelector(".doc-player__block--active");
-            if (activeBlockEl) {
-              const videos = activeBlockEl.querySelectorAll("video[data-clip-start]");
-              videos.forEach((el) => {
-                const video = el;
-                const clipStart = parseFloat(video.dataset.clipStart || "0");
-                const clipEnd = parseFloat(video.dataset.clipEnd || "0");
-                const startAt = parseFloat(video.dataset.startAt || "0");
-                const targetTime = Math.min(
-                  clipStart + Math.max(0, blockElapsed - startAt),
-                  clipEnd
-                );
-                video.pause();
-                video.currentTime = targetTime;
-                videoSeekPromises.push(
-                  new Promise((r) => {
-                    if (Math.abs(video.currentTime - targetTime) < 0.1) {
-                      r();
-                    } else {
-                      video.addEventListener("seeked", () => r(), { once: true });
-                      setTimeout(r, 200);
-                    }
-                  })
-                );
-              });
+          }
+          const elapsedMs = (time - blockStartTime) * 1e3;
+          (root.getAnimations?.() ?? []).forEach((anim) => {
+            const target = anim.effect?.target;
+            if (!target) return;
+            if (target.closest(".doc-player__block--active")) {
+              anim.currentTime = Math.max(0, elapsedMs);
+            } else if (target.closest(".doc-player__block--previous")) {
+              anim.currentTime = Math.max(0, elapsedMs);
             }
-            document.querySelectorAll("video[data-clip-id]").forEach((el) => {
+          });
+          const blockElapsed = time - blockStartTime;
+          const videoSeekPromises = [];
+          const activeBlockEl = root.querySelector(".doc-player__block--active");
+          if (activeBlockEl) {
+            const videos = activeBlockEl.querySelectorAll("video[data-clip-start]");
+            videos.forEach((el) => {
               const video = el;
-              const absStart = parseFloat(video.dataset.absStart || "0");
-              const absEnd = parseFloat(video.dataset.absEnd || "0");
-              const sourceIn = parseFloat(video.dataset.sourceIn || "0");
+              const clipStart = parseFloat(video.dataset.clipStart || "0");
+              const clipEnd = parseFloat(video.dataset.clipEnd || "0");
+              const startAt = parseFloat(video.dataset.startAt || "0");
+              const targetTime = Math.min(clipStart + Math.max(0, blockElapsed - startAt), clipEnd);
               video.pause();
-              if (time < absStart || time >= absEnd) return;
-              const targetTime = sourceIn + (time - absStart);
               video.currentTime = targetTime;
               videoSeekPromises.push(
                 new Promise((r) => {
@@ -3877,82 +4490,111 @@ function DocPlayerContent({
                 })
               );
             });
-            Promise.all(videoSeekPromises).then(() => {
-              requestAnimationFrame(() => resolve());
-            });
+          }
+          root.querySelectorAll("video[data-clip-id]").forEach((el) => {
+            const video = el;
+            const absStart = parseFloat(video.dataset.absStart || "0");
+            const absEnd = parseFloat(video.dataset.absEnd || "0");
+            const sourceIn = parseFloat(video.dataset.sourceIn || "0");
+            video.pause();
+            if (time < absStart || time >= absEnd) return;
+            const targetTime = sourceIn + (time - absStart);
+            video.currentTime = targetTime;
+            videoSeekPromises.push(
+              new Promise((r) => {
+                if (Math.abs(video.currentTime - targetTime) < 0.1) {
+                  r();
+                } else {
+                  video.addEventListener("seeked", () => r(), { once: true });
+                  setTimeout(r, 200);
+                }
+              })
+            );
+          });
+          Promise.all(videoSeekPromises).then(() => {
+            requestAnimationFrame(() => resolve());
           });
         });
-      };
-      w.getDuration = () => {
-        const mediaDuration = getDocPlaybackDuration(doc);
-        if (totalDuration > 0) return Math.max(totalDuration, mediaDuration);
-        return mediaDuration;
-      };
-      w.getBlocks = () => expandedBlocks.map((s) => ({
-        id: s.id,
-        template: s.template ?? "raw",
-        startTime: s.startTime,
-        duration: s.duration
-      }));
-      w.getAudioSegments = () => doc.audio.segments.map((seg) => ({
-        src: seg.src,
-        name: seg.name,
-        duration: seg.duration,
-        startTime: seg.startTime
+      });
+    };
+    const getDuration = () => {
+      const mediaDuration = getDocPlaybackDuration(doc);
+      if (totalDuration > 0) return Math.max(totalDuration, mediaDuration);
+      return mediaDuration;
+    };
+    const getBlocks = () => expandedBlocks.map((s) => ({
+      id: s.id,
+      template: s.template ?? "raw",
+      startTime: s.startTime,
+      duration: s.duration
+    }));
+    const getAudioSegments = () => doc.audio.segments.map((seg) => ({
+      src: seg.src,
+      name: seg.name,
+      duration: seg.duration,
+      startTime: seg.startTime
+    }));
+    const getCaptions = () => doc.captions?.phrases?.map((p) => ({
+      text: p.text,
+      startTime: p.startTime,
+      endTime: p.endTime
+    })) || [];
+    const getChapters = () => {
+      const titleMap = buildSegmentTitleMap(doc);
+      return doc.audio.segments.map((seg, i) => ({
+        title: titleMap.get(i) || seg.name,
+        startTime: seg.startTime,
+        duration: seg.duration
       }));
-      w.getCaptions = () => doc.captions?.phrases?.map((p) => ({
-        text: p.text,
-        startTime: p.startTime,
-        endTime: p.endTime
-      })) || [];
-      w.getChapters = () => {
-        const titleMap = buildSegmentTitleMap(doc);
-        return doc.audio.segments.map((seg, i) => ({
-          title: titleMap.get(i) || seg.name,
-          startTime: seg.startTime,
-          duration: seg.duration
-        }));
-      };
-      w.showCover = () => {
-        setCoverForced(true);
-        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
-      };
-      w.hideCover = () => {
-        setCoverForced(false);
-        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
-      };
-      w.hasCoverBlock = () => !!coverBlock;
-    }
+    };
+    const showCover = () => {
+      setCoverForced(true);
+      return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    };
+    const hideCover = () => {
+      setCoverForced(false);
+      return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    };
+    const hasCoverBlock = () => !!coverBlock;
+    const api = {
+      seekTo: renderSeekTo,
+      getDuration,
+      getBlocks,
+      getAudioSegments,
+      getCaptions,
+      getChapters,
+      showCover,
+      hideCover,
+      hasCoverBlock
+    };
+    liveRenderAPIRef.current = api;
     return () => {
-      if (typeof window !== "undefined") {
-        const w = window;
-        delete w.seekTo;
-        delete w.getDuration;
-        delete w.getBlocks;
-        delete w.getAudioSegments;
-        delete w.getCaptions;
-        delete w.getChapters;
-        delete w.showCover;
-        delete w.hideCover;
-        delete w.hasCoverBlock;
-      }
+      if (liveRenderAPIRef.current === api) liveRenderAPIRef.current = null;
     };
-  }, [renderMode, isDebugMode, seekTo, totalDuration, expandedBlocks, coverBlock]);
+  }, [renderMode, isDebugMode, seekTo, totalDuration, expandedBlocks, coverBlock, doc]);
+  useEffect10(() => {
+    if (!renderMode && !isDebugMode || !containerRef.current) {
+      onRenderAPIReady?.(null);
+      return;
+    }
+    onRenderAPIReady?.(stableRenderAPI);
+    return () => onRenderAPIReady?.(null);
+  }, [renderMode, isDebugMode, onRenderAPIReady, stableRenderAPI]);
   const defaultMode = captionsEnabledProp === false ? "off" : captionStyle || "standard";
-  const [captionMode, setCaptionMode] = useState7(defaultMode);
-  useEffect8(() => {
+  const [captionMode, setCaptionMode] = useState9(defaultMode);
+  useEffect10(() => {
     setCaptionMode(defaultMode);
   }, [defaultMode]);
   const captionsEnabled = captionMode !== "off";
   const activeCaptionStyle = captionMode === "social" ? "social" : "standard";
-  const setCaptionsEnabled = useCallback6(
+  const setCaptionsEnabled = useCallback7(
     (enabled) => {
       setCaptionMode(enabled ? captionStyle || "standard" : "off");
       onCaptionsToggle?.(enabled);
     },
     [onCaptionsToggle, captionStyle]
   );
-  const cycleCaptionMode = useCallback6(() => {
+  const cycleCaptionMode = useCallback7(() => {
     setCaptionMode((prev) => {
       const next = prev === "off" ? "standard" : prev === "standard" ? "social" : "off";
       onCaptionsToggle?.(next !== "off");
@@ -3966,6 +4608,7 @@ function DocPlayerContent({
       isPlaying,
       currentTime,
       totalDuration,
+      isCoverVisible: showCoverBlock,
       currentBlockIndex: slideshowSlideIndex,
       totalBlocks: slideshowTotalSlides,
       docProgress,
@@ -3985,6 +4628,7 @@ function DocPlayerContent({
       isPlaying,
       currentTime,
       totalDuration,
+      showCoverBlock,
       slideshowSlideIndex,
       slideshowTotalSlides,
       docProgress,
@@ -4078,23 +4722,39 @@ function DocPlayerContent({
     [currentBlockIndex, expandedBlocks, seekTo, pause, slideshowHasCover, slideshowCoverVisible]
   );
   const swipeEnabled = isSlideshowMode && !isLinearMode && !renderMode && enableSwipe;
+  const armContextFreeSwipeEntry = useCallback7(
+    (destinationSlideIndex) => {
+      const destinationBlockIndex = destinationSlideIndex - (slideshowHasCover ? 1 : 0);
+      const destinationBlock = expandedBlocks[destinationBlockIndex];
+      if (destinationBlock) suppressOutgoingForNextBlock(destinationBlock.id);
+    },
+    [expandedBlocks, slideshowHasCover, suppressOutgoingForNextBlock]
+  );
+  const handleSwipeNext = useCallback7(() => {
+    armContextFreeSwipeEntry(slideshowSlideIndex + 1);
+    slideNavActions.nextSlide();
+  }, [armContextFreeSwipeEntry, slideshowSlideIndex, slideNavActions]);
+  const handleSwipePrev = useCallback7(() => {
+    armContextFreeSwipeEntry(slideshowSlideIndex - 1);
+    slideNavActions.prevSlide();
+  }, [armContextFreeSwipeEntry, slideshowSlideIndex, slideNavActions]);
   const swipe = useSlideSwipe({
     enabled: swipeEnabled,
     containerRef,
     canGoNext: slideshowSlideIndex < slideshowTotalSlides - 1,
     canGoPrev: slideshowSlideIndex > 0,
-    onNext: slideNavActions.nextSlide,
-    onPrev: slideNavActions.prevSlide
+    onNext: handleSwipeNext,
+    onPrev: handleSwipePrev
   });
-  useEffect8(() => {
+  useEffect10(() => {
     onPlaybackStateChange?.(playbackState);
   }, [playbackState, onPlaybackStateChange]);
-  useEffect8(() => {
+  useEffect10(() => {
     onControlsReady?.({ play, pause, ...playbackActions });
   }, [play, pause, playbackActions, onControlsReady]);
-  const getBlockTitle = useCallback6((block) => {
+  const getBlockTitle = useCallback7((block) => {
     const docBlock = block;
-    if (isTemplateBlock2(docBlock)) {
+    if (isTemplateBlock3(docBlock)) {
       const props = docBlock;
       if (typeof props.title === "string") return props.title;
       if (typeof props.stat === "string") return props.stat;
@@ -4116,6 +4776,22 @@ function DocPlayerContent({
     }
     return block.id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
   }, []);
+  const slideshowPickerItems = useMemo9(() => {
+    const blockItems = expandedBlocks.map((block, index) => ({
+      id: block.id,
+      label: String(index + 1),
+      summary: getBlockTitle(block)
+    }));
+    if (!slideshowHasCover || !coverBlock) return blockItems;
+    return [
+      {
+        id: "__cover__",
+        label: "Cover",
+        summary: getBlockTitle(coverBlock)
+      },
+      ...blockItems
+    ];
+  }, [coverBlock, expandedBlocks, getBlockTitle, slideshowHasCover]);
   const blockMarkers = useMemo9(() => {
     if (!totalDuration || !expandedBlocks.length) return [];
     let prevSegment = -1;
@@ -4131,16 +4807,26 @@ function DocPlayerContent({
       };
     });
   }, [expandedBlocks, totalDuration, getBlockTitle]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (blockMarkers.length > 0) {
       onBlockMarkers?.(blockMarkers);
     }
   }, [blockMarkers, onBlockMarkers]);
   expandedBlocksLenRef.current = isSlideshowMode ? slideshowTotalSlides : expandedBlocks.length;
-  const handleKeyDown = useCallback6(
-    (e) => {
-      const activeEl = document.activeElement;
-      if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.tagName === "SELECT")) {
+  const handleKeyboardShortcut = useCallback7(
+    (e, global) => {
+      if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+      const target = e.target instanceof Element ? e.target : null;
+      const isEditableTarget = !!target?.closest(
+        'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"], [role="combobox"], [role="listbox"], [role="slider"], [role="spinbutton"], .monaco-editor'
+      );
+      const isOpenInteractionTarget = !!target?.closest(
+        '[role="menu"], [role="dialog"], [aria-modal="true"]'
+      );
+      const isSlideshowToolbarTarget = isSlideshowMode && !!target?.closest(".doc-controls-slideshow") && !target.closest('[role="menu"]');
+      if (isEditableTarget || global && isOpenInteractionTarget || !global && !!target?.closest(
+        'input, textarea, select, button, a, [contenteditable]:not([contenteditable="false"]), [role="textbox"]'
+      ) && !isSlideshowToolbarTarget) {
         return;
       }
       if (isLinearMode) return;
@@ -4153,10 +4839,13 @@ function DocPlayerContent({
             slideNavActions.nextSlide();
             break;
           case "ArrowLeft":
-          case "ArrowUp":
             e.preventDefault();
             slideNavActions.prevSlide();
             break;
+          case "ArrowUp":
+            e.preventDefault();
+            setIsSlideshowPickerOpen(true);
+            break;
           case "Home":
             e.preventDefault();
             slideNavActions.goToSlide(0);
@@ -4173,9 +4862,11 @@ function DocPlayerContent({
             toggle();
             break;
           case "ArrowRight":
+            e.preventDefault();
             seekTo(Math.min(currentTimeRef.current + 10, totalDurationRef.current));
             break;
           case "ArrowLeft":
+            e.preventDefault();
             seekTo(Math.max(currentTimeRef.current - 10, 0));
             break;
         }
@@ -4183,16 +4874,24 @@ function DocPlayerContent({
     },
     [isSlideshowMode, isLinearMode, toggle, seekTo, slideNavActions]
   );
-  useEffect8(() => {
-    if (renderMode) return;
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown, renderMode]);
+  const handleKeyDown = useCallback7(
+    (e) => handleKeyboardShortcut(e, false),
+    [handleKeyboardShortcut]
+  );
+  useEffect10(() => {
+    if (!globalKeyboardShortcuts || renderMode || isLinearMode) return;
+    const handleDocumentKeyDown = (event) => {
+      handleKeyboardShortcut(event, true);
+    };
+    document.addEventListener("keydown", handleDocumentKeyDown);
+    return () => document.removeEventListener("keydown", handleDocumentKeyDown);
+  }, [globalKeyboardShortcuts, handleKeyboardShortcut, isLinearMode, renderMode]);
   if (isLinearMode) {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       "div",
       {
         ref: containerRef,
+        "data-player-id": playerId,
         className: "doc-player doc-player--linear",
         style: {
           position: "relative",
@@ -4200,23 +4899,28 @@ function DocPlayerContent({
           height: "100%",
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx20(
+        children: /* @__PURE__ */ jsx21(
           LinearDocView,
           {
             doc,
             basePath,
             viewport: activeViewport,
             theme,
-            surface
+            surface,
+            animationsEnabled
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       ref: containerRef,
+      "data-player-id": playerId,
+      tabIndex: renderMode ? -1 : 0,
+      "aria-label": "Document player",
+      onKeyDown: renderMode ? void 0 : handleKeyDown,
       className: `doc-player${swipeEnabled ? " doc-player--swipe" : ""}${swipe.phase === "dragging" ? " doc-player--grabbing" : ""}`,
       onClick: handleContainerClick,
       onPointerDown: swipe.onPointerDown,
@@ -4232,33 +4936,35 @@ function DocPlayerContent({
         touchAction: swipeEnabled ? "pan-y" : void 0
       },
       children: [
-        /* @__PURE__ */ jsx20("audio", { ref: audioRef, preload: "auto", muted }),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21("audio", { ref: audioRef, preload: "auto", muted }),
+        /* @__PURE__ */ jsx21(
           MediaClipLayer,
           {
             schedule: mediaSchedule,
             currentTime,
             isPlaying,
             basePath,
-            renderMode
+            renderMode,
+            muted
           }
         ),
-        /* @__PURE__ */ jsxs13("div", { className: "doc-player__viewport", children: [
-          showCoverBlock && coverBlock && /* @__PURE__ */ jsx20("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs14("div", { className: "doc-player__viewport", children: [
+          showCoverBlock && coverBlock && /* @__PURE__ */ jsx21("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx21(
             BlockRenderer,
             {
               block: coverBlock,
               blockTime: 0,
               basePath,
               isEntering: false,
-              viewport: activeViewport
+              viewport: activeViewport,
+              animationsEnabled
             }
           ) }),
-          !showCoverBlock && previousBlock && isExiting && // Keyed by block id so each block is its own DOM subtree: React never
+          animationsEnabled && !showCoverBlock && previousBlock && isExiting && // Keyed by block id so each block is its own DOM subtree: React never
           // reconciles one block's layers onto another's (templates reuse layer
           // ids like `title`/`background`), which would otherwise reuse stale
           // DOM / skip entrance animations mid-transition.
-          /* @__PURE__ */ jsx20("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx21(
             BlockRenderer,
             {
               block: previousBlock,
@@ -4266,29 +4972,31 @@ function DocPlayerContent({
               basePath,
               isExiting: true,
               transition: currentBlock?.transition,
-              viewport: activeViewport
+              viewport: activeViewport,
+              animationsEnabled
             }
           ) }, previousBlock.id),
-          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx20(
+          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx21(
             "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__ */ jsx20(
+              children: /* @__PURE__ */ jsx21(
                 BlockRenderer,
                 {
                   block: currentBlock,
                   blockTime,
                   basePath,
-                  isEntering,
+                  isEntering: animationsEnabled && isEntering,
                   viewport: activeViewport,
-                  isPlaying
+                  isPlaying,
+                  animationsEnabled
                 }
               )
             },
             currentBlock.id
           ),
-          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx20(
+          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx21(
             CaptionOverlay,
             {
               captions: doc.captions,
@@ -4300,7 +5008,7 @@ function DocPlayerContent({
               viewport: activeViewport
             }
           ),
-          isDebugMode && /* @__PURE__ */ jsxs13(
+          isDebugMode && /* @__PURE__ */ jsxs14(
             "div",
             {
               className: "doc-player__debug",
@@ -4321,27 +5029,27 @@ function DocPlayerContent({
                 textAlign: "left"
               },
               children: [
-                /* @__PURE__ */ jsx20("div", { style: { color: "#ffcc00", fontWeight: "bold", marginBottom: "4px" }, children: "DEBUG MODE" }),
-                /* @__PURE__ */ jsxs13("div", { children: [
-                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "template:" }),
+                /* @__PURE__ */ 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__ */ jsx20("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
+                  /* @__PURE__ */ jsx21("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
                 ] }),
-                /* @__PURE__ */ jsxs13("div", { children: [
-                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "block:" }),
+                /* @__PURE__ */ jsxs14("div", { children: [
+                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "block:" }),
                   " ",
                   currentBlockIndex + 1,
                   "/",
                   expandedBlocks.length,
                   " ",
-                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs14("span", { style: { color: "#666" }, children: [
                     "(",
                     currentBlock?.id || "none",
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs13("div", { children: [
-                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "time:" }),
+                /* @__PURE__ */ jsxs14("div", { children: [
+                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "time:" }),
                   " ",
                   currentTime.toFixed(2),
                   "s /",
@@ -4349,7 +5057,7 @@ function DocPlayerContent({
                   totalDuration.toFixed(1),
                   "s",
                   " ",
-                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs14("span", { style: { color: "#666" }, children: [
                     "(progress: ",
                     (docProgress * 100).toFixed(1),
                     "%, scriptDur: ",
@@ -4357,8 +5065,8 @@ function DocPlayerContent({
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs13("div", { children: [
-                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "blockTime:" }),
+                /* @__PURE__ */ jsxs14("div", { children: [
+                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "blockTime:" }),
                   " ",
                   blockTime.toFixed(2),
                   "s /",
@@ -4366,58 +5074,58 @@ function DocPlayerContent({
                   (currentBlock?.duration || 0).toFixed(1),
                   "s"
                 ] }),
-                /* @__PURE__ */ jsxs13("div", { children: [
-                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "segment:" }),
+                /* @__PURE__ */ jsxs14("div", { children: [
+                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "segment:" }),
                   " ",
                   currentSegment,
                   "/",
                   doc.audio.segments.length - 1,
                   " ",
-                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs14("span", { style: { color: "#666" }, children: [
                     "(",
                     doc.audio.segments[currentSegment]?.name || "none",
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs13("div", { children: [
-                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "viewport:" }),
+                /* @__PURE__ */ jsxs14("div", { children: [
+                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "viewport:" }),
                   " ",
                   activeViewport.name || `${activeViewport.width}x${activeViewport.height}`,
                   " ",
-                  /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs14("span", { style: { color: "#666" }, children: [
                     "(",
                     orientation,
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs13("div", { children: [
-                  /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "playing:" }),
+                /* @__PURE__ */ jsxs14("div", { children: [
+                  /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "playing:" }),
                   " ",
-                  /* @__PURE__ */ jsx20("span", { style: { color: isPlaying ? "#4ade80" : "#f87171" }, children: isPlaying ? "yes" : "no" }),
-                  showCoverBlock && /* @__PURE__ */ jsx20("span", { style: { color: "#60a5fa" }, children: " (cover)" })
+                  /* @__PURE__ */ jsx21("span", { style: { color: isPlaying ? "#4ade80" : "#f87171" }, children: isPlaying ? "yes" : "no" }),
+                  showCoverBlock && /* @__PURE__ */ jsx21("span", { style: { color: "#60a5fa" }, children: " (cover)" })
                 ] }),
                 hasCaptions && (() => {
                   const debugPhrase = getCaptionAtTime2(doc.captions, currentTime);
                   const debugEnabled = captionsEnabled && (isPlaying || currentTime > 0);
-                  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-                    /* @__PURE__ */ jsxs13("div", { children: [
-                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "captions:" }),
+                  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+                    /* @__PURE__ */ jsxs14("div", { children: [
+                      /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "captions:" }),
                       " ",
                       doc.captions?.phrases.length || 0,
                       " phrases",
                       " ",
-                      /* @__PURE__ */ jsxs13("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
+                      /* @__PURE__ */ jsxs14("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
                         "(",
                         captionsEnabled ? "on" : "off",
                         ")"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs13("div", { children: [
-                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "cc.enabled:" }),
+                    /* @__PURE__ */ jsxs14("div", { children: [
+                      /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "cc.enabled:" }),
                       " ",
-                      /* @__PURE__ */ jsx20("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
+                      /* @__PURE__ */ jsx21("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
                       " ",
-                      /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
+                      /* @__PURE__ */ jsxs14("span", { style: { color: "#666" }, children: [
                         "(playing=",
                         String(isPlaying),
                         " t>0=",
@@ -4425,15 +5133,15 @@ function DocPlayerContent({
                         ")"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs13("div", { children: [
-                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "cc.phrase:" }),
+                    /* @__PURE__ */ jsxs14("div", { children: [
+                      /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "cc.phrase:" }),
                       " ",
-                      /* @__PURE__ */ jsx20("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
+                      /* @__PURE__ */ jsx21("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
                     ] }),
-                    debugPhrase && /* @__PURE__ */ jsxs13("div", { children: [
-                      /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "cc.range:" }),
+                    debugPhrase && /* @__PURE__ */ jsxs14("div", { children: [
+                      /* @__PURE__ */ jsx21("span", { style: { color: "#888" }, children: "cc.range:" }),
                       " ",
-                      /* @__PURE__ */ jsxs13("span", { style: { color: "#60a5fa" }, children: [
+                      /* @__PURE__ */ jsxs14("span", { style: { color: "#60a5fa" }, children: [
                         debugPhrase.startTime.toFixed(2),
                         "-",
                         debugPhrase.endTime.toFixed(2)
@@ -4445,7 +5153,7 @@ function DocPlayerContent({
             }
           )
         ] }),
-        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs13(
+        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs14(
           "div",
           {
             className: "doc-player__unavailable",
@@ -4466,12 +5174,12 @@ function DocPlayerContent({
               zIndex: 50
             },
             children: [
-              /* @__PURE__ */ jsx20("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
-              /* @__PURE__ */ jsx20("span", { children: unavailableMessage })
+              /* @__PURE__ */ jsx21("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
+              /* @__PURE__ */ jsx21("span", { children: unavailableMessage })
             ]
           }
         ),
-        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx20(
+        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx21(
           DocControlsOverlay,
           {
             state: playbackState,
@@ -4481,7 +5189,7 @@ function DocPlayerContent({
             getBlockTitle
           }
         ),
-        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx20(
+        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx21(
           "div",
           {
             className: "doc-player__scrubber",
@@ -4496,7 +5204,7 @@ function DocPlayerContent({
               alignItems: "center",
               zIndex: 100
             },
-            children: /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx21(
               DocProgressBar,
               {
                 state: playbackState,
@@ -4508,15 +5216,24 @@ function DocPlayerContent({
             )
           }
         ),
-        !renderMode && isSlideshowMode && /* @__PURE__ */ jsx20(DocControlsSlideshow, { state: playbackState, slideNav: slideNavActions }),
-        !isSlideshowMode && tapFeedback && /* @__PURE__ */ jsx20("div", { className: "doc-player__tap-feedback", children: /* @__PURE__ */ jsx20("svg", { viewBox: "0 0 24 24", fill: "white", width: "48", height: "48", children: tapFeedback === "pause" ? /* @__PURE__ */ jsx20("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) : /* @__PURE__ */ jsx20("path", { d: "M8 5v14l11-7z" }) }) }, Date.now())
+        !renderMode && isSlideshowMode && showControls && /* @__PURE__ */ jsx21(
+          DocControlsSlideshow,
+          {
+            state: playbackState,
+            slideNav: slideNavActions,
+            slides: slideshowPickerItems,
+            pickerOpen: isSlideshowPickerOpen,
+            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)
       ]
     }
   );
 }
 
 // src/DocControlsBottom.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function DocControlsBottom({
   state,
   actions,
@@ -4524,32 +5241,32 @@ function DocControlsBottom({
   expandedBlocks,
   getBlockTitle
 }) {
-  return /* @__PURE__ */ jsxs14("div", { className: "doc-controls-bottom", children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs15("div", { className: "doc-controls-bottom", children: [
+    /* @__PURE__ */ jsx22(
       "button",
       {
         className: "bottom-ctrl-btn",
         onClick: actions.restart,
         title: "Restart",
         "aria-label": "Restart from beginning",
-        children: /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx21("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+        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" }) })
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       "button",
       {
         className: "bottom-ctrl-btn bottom-play-btn",
         onClick: actions.toggle,
         "aria-label": state.isPlaying ? "Pause" : "Play",
-        children: state.isPlaying ? /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx21("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx21("path", { d: "M8 5v14l11-7z" }) })
+        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" }) })
       }
     ),
-    /* @__PURE__ */ jsxs14("span", { className: "bottom-time", children: [
+    /* @__PURE__ */ jsxs15("span", { className: "bottom-time", children: [
       formatTime(state.currentTime),
       " / ",
       formatTime(state.totalDuration)
     ] }),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       DocProgressBar,
       {
         state,
@@ -4559,82 +5276,82 @@ function DocControlsBottom({
         getBlockTitle
       }
     ),
-    /* @__PURE__ */ jsxs14("span", { className: "bottom-segment", children: [
+    /* @__PURE__ */ jsxs15("span", { className: "bottom-segment", children: [
       state.currentBlockIndex + 1,
       "/",
       state.totalBlocks
     ] }),
-    state.hasCaptions && /* @__PURE__ */ jsx21(
+    state.hasCaptions && /* @__PURE__ */ jsx22(
       "button",
       {
         className: `bottom-ctrl-btn ${state.captionMode !== "off" ? "bottom-ctrl-btn--active" : ""}`,
         onClick: () => actions.cycleCaptionMode(),
         title: state.captionMode === "off" ? "Captions: Off" : state.captionMode === "standard" ? "Captions: Standard" : "Captions: Social",
         "aria-label": "Cycle caption style",
-        children: /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx21("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) })
+        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" }) })
       }
     )
   ] });
 }
 
 // src/DocControlsSidebar.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function DocControlsSidebar({ state, actions }) {
-  return /* @__PURE__ */ jsxs15("div", { className: "doc-controls-sidebar", children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs16("div", { className: "doc-controls-sidebar", children: [
+    /* @__PURE__ */ jsx23(
       "button",
       {
         className: "sidebar-ctrl-btn",
         onClick: actions.restart,
         title: "Restart",
         "aria-label": "Restart from beginning",
-        children: /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx22("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+        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" }) })
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       "button",
       {
         className: "sidebar-ctrl-btn sidebar-play-btn",
         onClick: actions.toggle,
         "aria-label": state.isPlaying ? "Pause" : "Play",
-        children: state.isPlaying ? /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx22("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx22("path", { d: "M8 5v14l11-7z" }) })
+        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" }) })
       }
     ),
-    /* @__PURE__ */ jsxs15("div", { className: "sidebar-time", children: [
-      /* @__PURE__ */ jsx22("div", { children: formatTime(state.currentTime) }),
-      /* @__PURE__ */ jsx22("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })
+    /* @__PURE__ */ 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__ */ jsxs15("div", { className: "sidebar-segment", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "sidebar-segment", children: [
       state.currentBlockIndex + 1,
       "/",
       state.totalBlocks
     ] }),
-    state.hasCaptions && /* @__PURE__ */ jsx22(
+    state.hasCaptions && /* @__PURE__ */ jsx23(
       "button",
       {
         className: `sidebar-ctrl-btn ${state.captionMode !== "off" ? "sidebar-ctrl-btn--active" : ""}`,
         onClick: () => actions.cycleCaptionMode(),
         title: state.captionMode === "off" ? "Captions: Off" : state.captionMode === "standard" ? "Captions: Standard" : "Captions: Social",
         "aria-label": "Cycle caption style",
-        children: /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx22("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) })
+        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" }) })
       }
     ),
-    actions.toggleFullscreen && /* @__PURE__ */ jsx22(
+    actions.toggleFullscreen && /* @__PURE__ */ jsx23(
       "button",
       {
         className: `sidebar-ctrl-btn ${state.isFullscreen ? "sidebar-ctrl-btn--active" : ""}`,
         onClick: actions.toggleFullscreen,
         title: state.isFullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)",
         "aria-label": state.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-        children: state.isFullscreen ? /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx22("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx22("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+        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" }) })
       }
     )
   ] });
 }
 
 // src/DocPlayerWithSidebar.tsx
-import { useRef as useRef8, useState as useState8, useCallback as useCallback7, useEffect as useEffect9 } from "react";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+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";
 var DEFAULT_STATE = {
   isPlaying: false,
   currentTime: 0,
@@ -4656,6 +5373,7 @@ function DocPlayerWithSidebar({
   onEnded,
   onTimeUpdate,
   audioController,
+  animationsEnabled = true,
   muted,
   captionsEnabled,
   isFullscreen,
@@ -4664,11 +5382,11 @@ function DocPlayerWithSidebar({
   onPlayingChange,
   theme
 }) {
-  const stateRef = useRef8(DEFAULT_STATE);
-  const actionsRef = useRef8(null);
-  const wasPlayingRef = useRef8(false);
-  const [, setTick] = useState8(0);
-  const handleStateChange = useCallback7(
+  const stateRef = useRef10(DEFAULT_STATE);
+  const actionsRef = useRef10(null);
+  const wasPlayingRef = useRef10(false);
+  const [, setTick] = useState10(0);
+  const handleStateChange = useCallback8(
     (state) => {
       stateRef.current = state;
       if (onPlayingChange && state.isPlaying !== wasPlayingRef.current) {
@@ -4678,7 +5396,7 @@ function DocPlayerWithSidebar({
     },
     [onPlayingChange]
   );
-  const handleControlsReady = useCallback7(
+  const handleControlsReady = useCallback8(
     (controls) => {
       const isFirst = !actionsRef.current;
       actionsRef.current = controls;
@@ -4686,14 +5404,14 @@ function DocPlayerWithSidebar({
     },
     []
   );
-  useEffect9(() => {
+  useEffect11(() => {
     const interval = setInterval(() => {
       setTick((t) => t + 1);
     }, 250);
     return () => clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ jsxs16("div", { className: "doc-player-sidebar-layout", children: [
-    /* @__PURE__ */ jsx23("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs17("div", { className: "doc-player-sidebar-layout", children: [
+    /* @__PURE__ */ jsx24("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx24(
       DocPlayer,
       {
         doc,
@@ -4703,6 +5421,7 @@ function DocPlayerWithSidebar({
         onEnded,
         onTimeUpdate,
         audioController,
+        animationsEnabled,
         muted,
         captionsEnabled,
         showControls: isFullscreen,
@@ -4714,7 +5433,7 @@ function DocPlayerWithSidebar({
         forceViewport
       }
     ) }),
-    actionsRef.current && /* @__PURE__ */ jsx23(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
+    actionsRef.current && /* @__PURE__ */ jsx24(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
   ] });
 }
 
@@ -4745,18 +5464,18 @@ import {
   arrayItemKind
 } from "@bendyline/squisq/jsonForm";
 import { parseMarkdown as parseMarkdown3 } from "@bendyline/squisq/markdown";
-import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function TextViewer({ value }) {
   if (value === void 0 || value === null || value === "") {
-    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: String(value) });
+  return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-value", children: String(value) });
 }
 function MultilineViewer({ value }) {
   if (value === void 0 || value === null || value === "") {
-    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value squisq-jv-value--multiline", children: String(value) });
+  return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-value squisq-jv-value--multiline", children: String(value) });
 }
 function RichTextViewer({ value }) {
   const nodes = useMemo11(() => {
@@ -4768,39 +5487,39 @@ function RichTextViewer({ value }) {
       return null;
     }
   }, [value]);
-  if (!nodes) return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
-  return /* @__PURE__ */ jsx24("div", { className: "squisq-jv-richtext", children: /* @__PURE__ */ jsx24(MarkdownRenderer, { nodes }) });
+  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 }) });
 }
 function NumberViewer({ value }) {
   if (value === void 0 || value === null) {
-    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: String(value) });
+  return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-value", children: String(value) });
 }
 function BooleanViewer({ value }) {
   const on = Boolean(value);
-  return /* @__PURE__ */ jsx24("span", { className: `squisq-jv-toggle squisq-jv-toggle--${on ? "on" : "off"}`, children: on ? "On" : "Off" });
+  return /* @__PURE__ */ jsx25("span", { className: `squisq-jv-toggle squisq-jv-toggle--${on ? "on" : "off"}`, children: on ? "On" : "Off" });
 }
 function EnumViewer({ value, schema }) {
   if (value === void 0 || value === null || value === "") {
-    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
   const labels = schema.squisq?.enumLabels;
   const display = labels && typeof value === "string" ? labels[value] ?? value : String(value);
-  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: display });
+  return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-value", children: display });
 }
 function ColorViewer({ value }) {
   if (typeof value !== "string" || value === "") {
-    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
-  return /* @__PURE__ */ jsxs17("span", { className: "squisq-jv-color", children: [
-    /* @__PURE__ */ jsx24("span", { className: "squisq-jv-color__swatch", style: { background: value }, "aria-hidden": true }),
-    /* @__PURE__ */ jsx24("span", { className: "squisq-jv-color__hex", children: value })
+  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 })
   ] });
 }
 function DateViewer({ value, schema }) {
   if (typeof value !== "string" || value === "") {
-    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
   const fmt = schema.format;
   let display = value;
@@ -4817,31 +5536,31 @@ function DateViewer({ value, schema }) {
     }
   } catch {
   }
-  return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-value", children: display });
+  return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-value", children: display });
 }
 function ChipBinViewer({ value, schema }) {
   if (!Array.isArray(value) || value.length === 0) {
-    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "\u2014" });
+    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "\u2014" });
   }
   const itemSchema = Array.isArray(schema.items) ? schema.items[0] : schema.items;
   const labels = itemSchema?.squisq?.enumLabels;
-  return /* @__PURE__ */ jsx24("div", { className: "squisq-jv-chip-bin", children: value.map((item, i) => {
+  return /* @__PURE__ */ jsx25("div", { className: "squisq-jv-chip-bin", children: value.map((item, i) => {
     const label = labels && typeof item === "string" ? labels[item] ?? String(item) : String(item);
-    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-chip", children: label }, i);
+    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-chip", children: label }, i);
   }) });
 }
 function CardStackViewer(props) {
   const { value, schema, rootSchema, rootData, pointer, density } = props;
   if (!Array.isArray(value) || value.length === 0) {
-    return /* @__PURE__ */ jsx24("span", { className: "squisq-jv-empty", children: "No items" });
+    return /* @__PURE__ */ jsx25("span", { className: "squisq-jv-empty", children: "No items" });
   }
   const itemSchema = (Array.isArray(schema.items) ? schema.items[0] : schema.items) ?? {};
   const itemLabel = itemSchema.squisq?.itemLabel;
-  return /* @__PURE__ */ jsx24("div", { className: "squisq-jv-card-stack", children: value.map((item, i) => {
+  return /* @__PURE__ */ jsx25("div", { className: "squisq-jv-card-stack", children: value.map((item, i) => {
     const title = resolveItemTitle(itemLabel, item, i);
-    return /* @__PURE__ */ jsxs17("div", { className: "squisq-jv-card", children: [
-      title ? /* @__PURE__ */ jsx24("h4", { className: "squisq-jv-card__title", children: title }) : null,
-      /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsxs18("div", { className: "squisq-jv-card", children: [
+      title ? /* @__PURE__ */ jsx25("h4", { className: "squisq-jv-card__title", children: title }) : null,
+      /* @__PURE__ */ jsx25(
         RenderNode,
         {
           value: item,
@@ -4872,16 +5591,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__ */ jsxs17("section", { className: "squisq-jv-group", children: [
-    title ? /* @__PURE__ */ jsx24("h3", { className: "squisq-jv-group__title", children: title }) : null,
-    help ? /* @__PURE__ */ jsx24("p", { className: "squisq-jv-group__help", children: help }) : null,
-    propEntries.map(([key, propSchema]) => /* @__PURE__ */ jsx24(Fragment4, { children: /* @__PURE__ */ jsx24(
+  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(
       RowOrSection,
       {
         label: propSchema.squisq?.label ?? propSchema.title ?? key,
         help: propSchema.squisq?.help ?? propSchema.description,
         kindHint: propSchema,
-        children: /* @__PURE__ */ jsx24(
+        children: /* @__PURE__ */ jsx25(
           RenderNode,
           {
             value: obj[key],
@@ -4905,11 +5624,11 @@ function RowOrSection({
 }) {
   const composite = isCompositeKind(kindHint);
   if (composite) {
-    return /* @__PURE__ */ jsx24(Fragment5, { children });
+    return /* @__PURE__ */ jsx25(Fragment5, { children });
   }
-  return /* @__PURE__ */ jsxs17("div", { className: "squisq-jv-row", children: [
-    /* @__PURE__ */ jsx24("div", { className: "squisq-jv-label", title: help, children: label }),
-    /* @__PURE__ */ jsx24("div", { children })
+  return /* @__PURE__ */ jsxs18("div", { className: "squisq-jv-row", children: [
+    /* @__PURE__ */ jsx25("div", { className: "squisq-jv-label", title: help, children: label }),
+    /* @__PURE__ */ jsx25("div", { children })
   ] });
 }
 function isCompositeKind(schema) {
@@ -4930,11 +5649,11 @@ function TabsViewer(props) {
   const matchedIndex = pickMatchingBranch(branches, value);
   const branch = branches[matchedIndex];
   if (!branch) {
-    return /* @__PURE__ */ jsx24(TextViewer, { ...props });
+    return /* @__PURE__ */ jsx25(TextViewer, { ...props });
   }
-  return /* @__PURE__ */ jsxs17("div", { className: "squisq-jv-tabs", children: [
-    /* @__PURE__ */ jsx24("span", { className: "squisq-jv-tabs__discriminator", children: branch.squisq?.label ?? branch.title ?? `Option ${matchedIndex + 1}` }),
-    /* @__PURE__ */ jsx24(
+  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(
       RenderNode,
       {
         value,
@@ -4998,7 +5717,7 @@ var VIEWERS = {
 };
 
 // src/jsonView/RenderNode.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } 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;
@@ -5014,18 +5733,18 @@ function RenderNode(props) {
   };
   if (kind === "group" || kind === "card") {
     const Group = Viewer;
-    return /* @__PURE__ */ jsx25(Group, { ...viewerProps, suppressTitle: props.suppressTopGroupTitle });
+    return /* @__PURE__ */ jsx26(Group, { ...viewerProps, suppressTitle: props.suppressTopGroupTitle });
   }
-  return /* @__PURE__ */ jsx25(Viewer, { ...viewerProps });
+  return /* @__PURE__ */ jsx26(Viewer, { ...viewerProps });
 }
 
 // src/jsonView/JsonView.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function JsonView(props) {
   const { schema, value, theme, surface, density = "comfortable", className } = props;
   const { style } = useJsonViewTokens(theme, surface);
   const cls = "squisq-json-view" + (density === "compact" ? " squisq-json-view--compact" : "") + (className ? ` ${className}` : "");
-  return /* @__PURE__ */ jsx26("div", { className: cls, style, children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27("div", { className: cls, style, children: /* @__PURE__ */ jsx27(
     RenderNode,
     {
       value,
@@ -5061,7 +5780,7 @@ export {
   SocialCaptionOverlay,
   TableLayer,
   TextLayer,
-  VIEWPORT,
+  TreeLayer,
   VideoLayer,
   formatTime,
   getAnimationStyle,