@bendyline/squisq-react 2.2.0 → 2.3.1

package/dist/chunk-7FVQ7T3I.js

@@ -0,0 +1,2529 @@
+import {
+  BlockRenderer,
+  LinearDocView
+} from "./chunk-TQH6RTTV.js";
+import {
+  useAudioSync,
+  useDocPlayback,
+  useMediaSchedule,
+  useViewportOrientation
+} from "./chunk-NWZQGZIJ.js";
+import {
+  useAutoSurface
+} from "./chunk-TT6ENR6T.js";
+import {
+  useMediaUrl
+} from "./chunk-LR3AIGDD.js";
+
+// src/MediaClipLayer.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var DRIFT = 0.25;
+function MediaClipLayer({
+  schedule,
+  currentTime,
+  isPlaying,
+  basePath,
+  renderMode = false,
+  muted = false
+}) {
+  const { renderClips, activeIds } = useMediaSchedule(schedule, currentTime);
+  if (renderClips.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "doc-player__media-clips", "aria-hidden": true, children: renderClips.map((clip) => /* @__PURE__ */ jsx(
+    MediaClipElement,
+    {
+      clip,
+      active: activeIds.has(clip.id),
+      currentTime,
+      isPlaying,
+      basePath,
+      renderMode,
+      muted
+    },
+    clip.id
+  )) });
+}
+function MediaClipElement({
+  clip,
+  active,
+  currentTime,
+  isPlaying,
+  basePath,
+  renderMode,
+  muted
+}) {
+  const ref = useRef(null);
+  const src = useMediaUrl(clip.src, basePath);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (!active) {
+      if (!el.paused) el.pause();
+      return;
+    }
+    const target = Math.max(0, clip.sourceIn + (currentTime - clip.absoluteStart));
+    if (renderMode || Math.abs(el.currentTime - target) > DRIFT) {
+      try {
+        el.currentTime = target;
+      } catch {
+      }
+    }
+    if (isPlaying && !renderMode) {
+      const p = el.play();
+      if (p) p.catch(() => {
+      });
+    } else {
+      el.pause();
+    }
+  }, [active, currentTime, isPlaying, renderMode, clip.sourceIn, clip.absoluteStart, src]);
+  const isVideo = clip.kind === "video";
+  const common = {
+    ref,
+    src,
+    preload: "auto",
+    "data-clip-id": clip.id,
+    "data-abs-start": clip.absoluteStart,
+    "data-abs-end": clip.absoluteEnd,
+    "data-source-in": clip.sourceIn
+  };
+  if (isVideo) {
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        ...common,
+        muted: true,
+        playsInline: true,
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          zIndex: 0,
+          pointerEvents: "none"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "audio",
+    {
+      ...common,
+      muted: renderMode || muted,
+      style: { position: "absolute", width: 0, height: 0 }
+    }
+  );
+}
+
+// src/SocialCaptionOverlay.tsx
+import { useMemo } from "react";
+import { resolveFontFamily } from "@bendyline/squisq/schemas";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TARGET_CHUNK_SIZE = 4;
+var MIN_CHUNK_SIZE = 2;
+var MAX_CHUNK_SIZE = 6;
+function resolvePhraseTiming(phrase) {
+  if (phrase.words && phrase.words.length > 0) {
+    return phrase.words.map((w) => ({
+      text: w.text,
+      startTime: w.startTime,
+      endTime: w.endTime
+    }));
+  }
+  const rawWords = phrase.text.split(/\s+/).filter((w) => w.length > 0);
+  if (rawWords.length === 0) return [];
+  const duration = phrase.endTime - phrase.startTime;
+  const wordDuration = duration / rawWords.length;
+  return rawWords.map((text, i) => ({
+    text,
+    startTime: phrase.startTime + i * wordDuration,
+    endTime: phrase.startTime + (i + 1) * wordDuration
+  }));
+}
+function buildWordStream(captions) {
+  const allWords = [];
+  for (const phrase of captions.phrases) {
+    allWords.push(...resolvePhraseTiming(phrase));
+  }
+  if (allWords.length === 0) return { words: [], chunks: [] };
+  let chunkSize = TARGET_CHUNK_SIZE;
+  if (allWords.length > chunkSize) {
+    const numChunks = Math.ceil(allWords.length / chunkSize);
+    chunkSize = Math.ceil(allWords.length / numChunks);
+    chunkSize = Math.min(MAX_CHUNK_SIZE, Math.max(MIN_CHUNK_SIZE, chunkSize));
+  } else {
+    chunkSize = Math.max(MIN_CHUNK_SIZE, allWords.length);
+  }
+  const chunks = [];
+  for (let i = 0; i < allWords.length; i += chunkSize) {
+    const chunkWords = allWords.slice(i, i + chunkSize);
+    chunks.push({
+      words: chunkWords,
+      startTime: chunkWords[0].startTime,
+      endTime: chunkWords[chunkWords.length - 1].endTime
+    });
+  }
+  return { words: allWords, chunks };
+}
+function SocialCaptionOverlay({
+  captions,
+  currentTime,
+  enabled = true,
+  theme,
+  viewport
+}) {
+  const { chunks } = useMemo(
+    () => captions ? buildWordStream(captions) : { words: [], chunks: [] },
+    [captions]
+  );
+  if (!enabled || chunks.length === 0) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "social-caption-overlay",
+        style: {
+          position: "absolute",
+          bottom: "18%",
+          left: 0,
+          right: 0,
+          zIndex: 50,
+          pointerEvents: "none",
+          opacity: 0,
+          transition: "opacity 0.15s ease-in-out"
+        }
+      }
+    );
+  }
+  let activeChunk = null;
+  let activeWordIndex = -1;
+  for (const chunk of chunks) {
+    if (currentTime >= chunk.startTime && currentTime < chunk.endTime) {
+      activeChunk = chunk;
+      break;
+    }
+  }
+  if (!activeChunk) {
+    for (let i = 0; i < chunks.length - 1; i++) {
+      if (currentTime >= chunks[i].endTime && currentTime < chunks[i + 1].startTime) {
+        activeChunk = chunks[i];
+        activeWordIndex = activeChunk.words.length - 1;
+        break;
+      }
+    }
+    if (!activeChunk && chunks.length > 0 && currentTime >= chunks[chunks.length - 1].startTime) {
+      activeChunk = chunks[chunks.length - 1];
+      activeWordIndex = activeChunk.words.length - 1;
+    }
+  }
+  if (!activeChunk) return null;
+  if (activeWordIndex === -1) {
+    for (let i = 0; i < activeChunk.words.length; i++) {
+      const word = activeChunk.words[i];
+      if (currentTime >= word.startTime && currentTime < word.endTime) {
+        activeWordIndex = i;
+        break;
+      }
+    }
+    if (activeWordIndex === -1) {
+      for (let i = activeChunk.words.length - 1; i >= 0; i--) {
+        if (currentTime >= activeChunk.words[i].startTime) {
+          activeWordIndex = i;
+          break;
+        }
+      }
+    }
+    if (activeWordIndex === -1) activeWordIndex = 0;
+  }
+  const primaryColor = theme?.colors?.primary ?? "#5b9bd5";
+  const fontFamily = theme?.typography?.titleFont ? resolveFontFamily(theme.typography.titleFont, '"PT Serif", Georgia, serif') : '"PT Serif", Georgia, serif';
+  const viewportHeight = viewport?.height ?? 720;
+  const baseFontSize = Math.round(viewportHeight * 0.055);
+  const fontSize = Math.max(24, Math.min(72, baseFontSize));
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "social-caption-overlay",
+      style: {
+        position: "absolute",
+        bottom: "18%",
+        left: 0,
+        right: 0,
+        zIndex: 50,
+        pointerEvents: "none",
+        textAlign: "center",
+        padding: "0 8%",
+        boxSizing: "border-box",
+        opacity: 1,
+        transition: "opacity 0.15s ease-in-out"
+      },
+      children: /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            display: "inline-block",
+            lineHeight: 1.3
+          },
+          children: activeChunk.words.map((word, i) => {
+            const isActive = i === activeWordIndex;
+            return /* @__PURE__ */ jsx2(
+              "span",
+              {
+                style: {
+                  fontFamily,
+                  fontSize: `${fontSize}px`,
+                  fontWeight: isActive ? 800 : 600,
+                  color: isActive ? primaryColor : "rgba(255, 255, 255, 0.9)",
+                  textShadow: "0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.4)",
+                  marginRight: i < activeChunk.words.length - 1 ? "0.3em" : void 0,
+                  transition: "color 0.1s ease, font-weight 0.1s ease",
+                  textTransform: "uppercase"
+                },
+                children: word.text
+              },
+              `${word.startTime}-${i}`
+            );
+          })
+        }
+      )
+    }
+  );
+}
+
+// src/CaptionOverlay.tsx
+import { getCaptionAtTime } from "@bendyline/squisq/schemas";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function CaptionOverlay({
+  captions,
+  currentTime,
+  enabled = true,
+  fontSize = 16,
+  captionStyle = "standard",
+  theme,
+  viewport
+}) {
+  if (captionStyle === "social") {
+    return /* @__PURE__ */ jsx3(
+      SocialCaptionOverlay,
+      {
+        captions,
+        currentTime,
+        enabled,
+        theme,
+        viewport
+      }
+    );
+  }
+  const phrase = enabled && captions ? getCaptionAtTime(captions, currentTime) : null;
+  const captionText = phrase?.text ?? null;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "caption-overlay",
+      style: {
+        position: "absolute",
+        top: "6px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 50,
+        pointerEvents: "none",
+        maxWidth: "100%",
+        width: "100%",
+        textAlign: "center",
+        opacity: captionText ? 1 : 0,
+        transition: "opacity 0.15s ease-in-out",
+        padding: "0 4px",
+        boxSizing: "border-box"
+      },
+      children: captionText && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            display: "inline-block",
+            padding: "3px 10px",
+            background: "rgba(0, 0, 0, 0.65)",
+            borderRadius: "4px",
+            backdropFilter: "blur(4px)"
+          },
+          children: /* @__PURE__ */ jsx3(
+            "span",
+            {
+              style: {
+                color: "#ffffff",
+                fontSize: `${fontSize}px`,
+                fontFamily: "'Hanken Grotesk', system-ui, sans-serif",
+                fontWeight: 500,
+                lineHeight: 1.25,
+                textShadow: "0 1px 3px rgba(0,0,0,0.5)",
+                whiteSpace: "pre-wrap",
+                wordWrap: "break-word"
+              },
+              children: captionText
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/types.ts
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+// src/DocProgressBar.tsx
+import { useRef as useRef2, useState, useCallback } from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function DocProgressBar({
+  state,
+  actions,
+  blockMarkers,
+  expandedBlocks,
+  getBlockTitle
+}) {
+  const progressBarRef = useRef2(null);
+  const [hoverPosition, setHoverPosition] = useState(null);
+  const playProgress = state.totalDuration > 0 ? Math.max(0, Math.min(1, state.currentTime / state.totalDuration)) : 0;
+  const handleProgressHover = useCallback((e) => {
+    const bar = progressBarRef.current;
+    if (!bar) return;
+    const rect = bar.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const progress = Math.max(0, Math.min(1, x / rect.width));
+    setHoverPosition(progress);
+  }, []);
+  const handleProgressLeave = useCallback(() => {
+    setHoverPosition(null);
+  }, []);
+  const handleProgressKeyDown = useCallback(
+    (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 = useCallback(
+    (time) => {
+      for (let i = expandedBlocks.length - 1; i >= 0; i--) {
+        const blk = expandedBlocks[i];
+        if (time >= blk.startTime) {
+          return { block: blk, index: i };
+        }
+      }
+      return expandedBlocks.length > 0 ? { block: expandedBlocks[0], index: 0 } : null;
+    },
+    [expandedBlocks]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: progressBarRef,
+      role: "group",
+      "aria-label": "Playback timeline",
+      style: {
+        flex: 1,
+        height: "24px",
+        cursor: "pointer",
+        position: "relative",
+        display: "flex",
+        alignItems: "center"
+      },
+      onClick: (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const progress = x / rect.width;
+        actions.seekTo(progress * state.totalDuration);
+      },
+      onMouseMove: handleProgressHover,
+      onMouseLeave: handleProgressLeave,
+      children: [
+        /* @__PURE__ */ jsx4(
+          "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,
+              right: 0,
+              height: "6px",
+              background: "rgba(255,255,255,0.2)",
+              borderRadius: "3px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-testid": "doc-progress-fill",
+            style: {
+              position: "absolute",
+              left: 0,
+              width: `${playProgress * 100}%`,
+              height: "6px",
+              background: "#5b9bd5",
+              borderRadius: "3px"
+            }
+          }
+        ),
+        blockMarkers.map((marker, i) => /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            style: {
+              position: "absolute",
+              left: `${marker.position}%`,
+              transform: "translateX(-50%)",
+              width: "10px",
+              height: "10px",
+              borderRadius: "50%",
+              background: marker.index === state.currentBlockIndex ? "#ffffff" : "rgba(255,255,255,0.5)",
+              border: "2px solid #5b9bd5",
+              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);
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "translateX(-50%)";
+            }
+          },
+          `${marker.block.id}-${i}`
+        )),
+        hoverPosition !== null && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${hoverPosition * 100}%`,
+              bottom: "100%",
+              transform: "translateX(-50%)",
+              marginBottom: "8px",
+              padding: "6px 10px",
+              background: "rgba(0,0,0,0.9)",
+              borderRadius: "4px",
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 10
+            },
+            children: [
+              /* @__PURE__ */ jsx4("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__ */ jsx4("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "11px", marginTop: "2px" }, children: getBlockTitle(slideInfo.block) });
+                }
+                return null;
+              })()
+            ]
+          }
+        ),
+        hoverPosition !== null && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${hoverPosition * 100}%`,
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "2px",
+              height: "16px",
+              background: "rgba(255,255,255,0.6)",
+              pointerEvents: "none",
+              zIndex: 1
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DocControlsOverlay.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function DocControlsOverlay({
+  state,
+  actions,
+  blockMarkers,
+  expandedBlocks,
+  getBlockTitle
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "doc-player__controls",
+      style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: "12px 16px",
+        background: "linear-gradient(transparent, rgba(0,0,0,0.8))",
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        zIndex: 100
+      },
+      children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: actions.restart,
+            style: {
+              background: "none",
+              border: "none",
+              color: "rgba(255,255,255,0.7)",
+              cursor: "pointer",
+              padding: "8px",
+              fontSize: "14px",
+              display: "flex",
+              alignItems: "center"
+            },
+            title: "Restart",
+            "aria-label": "Restart from beginning",
+            children: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx5("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__ */ jsx5(
+          "button",
+          {
+            onClick: actions.toggle,
+            style: {
+              background: "rgba(255,255,255,0.2)",
+              border: "none",
+              borderRadius: "50%",
+              color: "white",
+              cursor: "pointer",
+              padding: "10px",
+              fontSize: "16px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "40px",
+              height: "40px"
+            },
+            "aria-label": state.isPlaying ? "Pause" : "Play",
+            children: state.isPlaying ? /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M8 5v14l11-7z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { style: { color: "white", fontSize: "12px", minWidth: "80px", fontFamily: "monospace" }, children: [
+          formatTime(state.currentTime),
+          " / ",
+          formatTime(state.totalDuration)
+        ] }),
+        /* @__PURE__ */ jsx5(
+          DocProgressBar,
+          {
+            state,
+            actions,
+            blockMarkers,
+            expandedBlocks,
+            getBlockTitle
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: "11px", whiteSpace: "nowrap" }, children: [
+          state.currentBlockIndex + 1,
+          "/",
+          state.totalBlocks
+        ] }),
+        state.hasCaptions && /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: () => actions.cycleCaptionMode(),
+            style: {
+              background: state.captionMode !== "off" ? "rgba(255,255,255,0.2)" : "none",
+              border: "none",
+              color: state.captionMode !== "off" ? "white" : "rgba(255,255,255,0.5)",
+              cursor: "pointer",
+              padding: "8px",
+              fontSize: "12px",
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              borderRadius: "4px"
+            },
+            title: state.captionMode === "off" ? "Captions: Off (click for Standard)" : state.captionMode === "standard" ? "Captions: Standard (click for Social)" : "Captions: Social (click to turn off)",
+            "aria-label": "Cycle caption style",
+            children: [
+              /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx5("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__ */ jsx5("span", { style: { fontSize: "10px", textTransform: "uppercase", letterSpacing: "0.5px" }, children: state.captionMode === "standard" ? "CC" : "SM" })
+            ]
+          }
+        ),
+        actions.toggleFullscreen && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: actions.toggleFullscreen,
+            style: {
+              background: state.isFullscreen ? "rgba(255,255,255,0.2)" : "none",
+              border: "none",
+              color: state.isFullscreen ? "white" : "rgba(255,255,255,0.5)",
+              cursor: "pointer",
+              padding: "8px",
+              display: "flex",
+              alignItems: "center",
+              borderRadius: "4px"
+            },
+            title: state.isFullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)",
+            "aria-label": state.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+            children: state.isFullscreen ? /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx5("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx5("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DocControlsSlideshow.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useId, useLayoutEffect, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function DocControlsSlideshow({
+  state,
+  slideNav,
+  slides = [],
+  pickerOpen,
+  onPickerOpenChange
+}) {
+  const [uncontrolledPickerOpen, setUncontrolledPickerOpen] = useState2(false);
+  const isPickerOpen = pickerOpen ?? uncontrolledPickerOpen;
+  const setPickerOpen = useCallback2(
+    (open) => {
+      if (pickerOpen === void 0) setUncontrolledPickerOpen(open);
+      onPickerOpenChange?.(open);
+    },
+    [pickerOpen, onPickerOpenChange]
+  );
+  const [pickerMaxHeight, setPickerMaxHeight] = useState2(280);
+  const controlsRef = useRef3(null);
+  const triggerRef = useRef3(null);
+  const menuRef = useRef3(null);
+  const menuId = useId();
+  const {
+    currentBlockIndex,
+    currentSlideLabel,
+    currentSlideNumber,
+    totalBlocks,
+    totalSlideNumber
+  } = state;
+  const isFirst = currentBlockIndex <= 0;
+  const isLast = currentBlockIndex >= totalBlocks - 1;
+  const counterText = totalBlocks > 0 ? currentSlideLabel ?? `${currentSlideNumber ?? currentBlockIndex + 1} / ${totalSlideNumber ?? totalBlocks}` : "\u2014";
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    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__ */ jsxs3(
+    "div",
+    {
+      ref: controlsRef,
+      className: "doc-controls-slideshow",
+      "data-testid": "slideshow-controls",
+      style: {
+        position: "absolute",
+        bottom: "16px",
+        right: "16px",
+        display: "flex",
+        alignItems: "center",
+        gap: "2px",
+        background: "rgba(0, 0, 0, 0.65)",
+        borderRadius: "8px",
+        padding: "4px 6px",
+        zIndex: 100,
+        userSelect: "none",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)"
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              slideNav.prevSlide();
+            },
+            disabled: isFirst,
+            "data-testid": "slide-prev",
+            "aria-label": "Previous slide",
+            title: "Previous slide",
+            style: {
+              background: "none",
+              border: "none",
+              color: isFirst ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.9)",
+              cursor: isFirst ? "default" : "pointer",
+              padding: "6px 8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "4px",
+              transition: "background 0.15s"
+            },
+            onMouseEnter: (e) => {
+              if (!isFirst) e.currentTarget.style.background = "rgba(255,255,255,0.1)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "none";
+            },
+            children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx6("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "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: "6px 4px",
+              letterSpacing: "0.02em",
+              borderRadius: "4px",
+              transition: "background 0.15s"
+            },
+            children: counterText
+          }
+        ),
+        isPickerOpen && /* @__PURE__ */ jsx6(
+          "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__ */ jsxs3(
+                "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__ */ jsx6(
+                      "span",
+                      {
+                        style: {
+                          color: isCurrent ? "#fff" : "rgba(255,255,255,0.58)",
+                          fontSize: "12px",
+                          fontVariantNumeric: "tabular-nums",
+                          textAlign: "right"
+                        },
+                        children: slide.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(
+                      "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__ */ jsx6(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              slideNav.nextSlide();
+            },
+            disabled: isLast,
+            "data-testid": "slide-next",
+            "aria-label": "Next slide",
+            title: "Next slide",
+            style: {
+              background: "none",
+              border: "none",
+              color: isLast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.9)",
+              cursor: isLast ? "default" : "pointer",
+              padding: "6px 8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "4px",
+              transition: "background 0.15s"
+            },
+            onMouseEnter: (e) => {
+              if (!isLast) e.currentTarget.style.background = "rgba(255,255,255,0.1)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "none";
+            },
+            children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx6("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DocPlayer.tsx
+import { Fragment, useId as useId2, useRef as useRef5, useState as useState4, useEffect as useEffect4, useCallback as useCallback4, useMemo as useMemo2 } from "react";
+import {
+  isTemplateBlock as isTemplateBlock2,
+  getCaptionAtTime as getCaptionAtTime2,
+  resolveMediaSchedule,
+  getDocPlaybackDuration
+} from "@bendyline/squisq/schemas";
+import { applySurface } from "@bendyline/squisq/schemas";
+
+// src/hooks/useSlideSwipe.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+var DISTANCE_RATIO = 0.3;
+var FLICK_VELOCITY = 0.5;
+var MIN_FLICK_DISTANCE = 12;
+var RUBBER_BAND = 0.35;
+var DEFAULT_SETTLE_MS = 260;
+function decideSwipe({
+  dx,
+  width,
+  elapsedMs,
+  canNext,
+  canPrev
+}) {
+  const distanceThreshold = width > 0 ? width * DISTANCE_RATIO : Infinity;
+  const velocity = elapsedMs > 0 ? Math.abs(dx) / elapsedMs : 0;
+  const passesDistance = Math.abs(dx) >= distanceThreshold;
+  const passesFlick = velocity >= FLICK_VELOCITY && Math.abs(dx) >= MIN_FLICK_DISTANCE;
+  if (!passesDistance && !passesFlick) return "snap";
+  if (dx < 0) return canNext ? "next" : "snap";
+  if (dx > 0) return canPrev ? "prev" : "snap";
+  return "snap";
+}
+function useSlideSwipe(opts) {
+  const settleMs = opts.settleMs ?? DEFAULT_SETTLE_MS;
+  const [offsetPx, setOffsetPx] = useState3(0);
+  const [phase, setPhase] = useState3("idle");
+  const optsRef = useRef4(opts);
+  optsRef.current = opts;
+  const dragRef = useRef4(null);
+  const phaseRef = useRef4("idle");
+  phaseRef.current = phase;
+  const settleTimer = useRef4(null);
+  const settleRaf = useRef4(null);
+  const clearPending = useCallback3(() => {
+    if (settleTimer.current != null) {
+      clearTimeout(settleTimer.current);
+      settleTimer.current = null;
+    }
+    if (settleRaf.current != null) {
+      cancelAnimationFrame(settleRaf.current);
+      settleRaf.current = null;
+    }
+  }, []);
+  const onPointerDown = useCallback3((e) => {
+    const o = optsRef.current;
+    if (!o.enabled) return;
+    if (phaseRef.current === "settling") return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    const target = e.target;
+    if (target.closest?.("button, a, input, textarea, select, [data-no-swipe]")) return;
+    dragRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startTime: performance.now(),
+      target
+    };
+    try {
+      target.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+    setPhase("dragging");
+    setOffsetPx(0);
+  }, []);
+  useEffect3(() => {
+    function currentWidth() {
+      return optsRef.current.containerRef.current?.getBoundingClientRect().width ?? 0;
+    }
+    function endDrag(drag) {
+      dragRef.current = null;
+      try {
+        drag.target.releasePointerCapture?.(drag.pointerId);
+      } catch {
+      }
+    }
+    function settleTo(target, onArrive) {
+      setPhase("settling");
+      settleRaf.current = requestAnimationFrame(() => {
+        settleRaf.current = null;
+        setOffsetPx(target);
+        settleTimer.current = setTimeout(() => {
+          settleTimer.current = null;
+          onArrive?.();
+          setOffsetPx(0);
+          setPhase("idle");
+        }, settleMs);
+      });
+    }
+    function onMove(e) {
+      const drag = dragRef.current;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      const o = optsRef.current;
+      const raw = e.clientX - drag.startX;
+      const blocked = raw > 0 && !o.canGoPrev || raw < 0 && !o.canGoNext;
+      setOffsetPx(blocked ? raw * RUBBER_BAND : raw);
+    }
+    function onUp(e) {
+      const drag = dragRef.current;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      endDrag(drag);
+      const o = optsRef.current;
+      const rawDx = e.clientX - drag.startX;
+      const width = currentWidth();
+      const elapsedMs = performance.now() - drag.startTime;
+      const decision = decideSwipe({
+        dx: rawDx,
+        width,
+        elapsedMs,
+        canNext: o.canGoNext,
+        canPrev: o.canGoPrev
+      });
+      if (decision === "snap") {
+        settleTo(0);
+        return;
+      }
+      const distance = Math.max(width, Math.abs(rawDx));
+      const target = decision === "next" ? -distance : distance;
+      settleTo(target, decision === "next" ? o.onNext : o.onPrev);
+    }
+    function onCancel(e) {
+      const drag = dragRef.current;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      endDrag(drag);
+      settleTo(0);
+    }
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onCancel);
+    };
+  }, [settleMs]);
+  useEffect3(() => {
+    if (!opts.enabled) {
+      dragRef.current = null;
+      clearPending();
+      setPhase("idle");
+      setOffsetPx(0);
+    }
+  }, [opts.enabled, clearPending]);
+  useEffect3(() => clearPending, [clearPending]);
+  return { offsetPx, phase, onPointerDown };
+}
+
+// src/DocPlayer.tsx
+import {
+  expandCoverBlock,
+  createTemplateContext,
+  markdownToDoc,
+  DEFAULT_THEME,
+  VIEWPORT_PRESETS
+} from "@bendyline/squisq/doc";
+import { parseMarkdown } from "@bendyline/squisq/markdown";
+
+// src/docPlayer/segmentTitles.ts
+import { isTemplateBlock } from "@bendyline/squisq/schemas";
+var SMALL_WORDS = /* @__PURE__ */ new Set([
+  "a",
+  "an",
+  "the",
+  "and",
+  "but",
+  "or",
+  "for",
+  "nor",
+  "on",
+  "at",
+  "to",
+  "in",
+  "of",
+  "by",
+  "is"
+]);
+function buildSegmentTitleMap(doc) {
+  const map = /* @__PURE__ */ new Map();
+  for (const block of doc.blocks) {
+    if (isTemplateBlock(block) && block.template === "sectionHeader" && "title" in block) {
+      const segmentIndex = block.audioSegment;
+      if (!map.has(segmentIndex)) map.set(segmentIndex, block.title);
+    }
+  }
+  for (let index = 0; index < doc.audio.segments.length; index++) {
+    if (map.has(index)) continue;
+    const name = doc.audio.segments[index].name;
+    if (name.includes("intro")) {
+      map.set(index, "Introduction");
+    } else if (name.includes("flight-context")) {
+      map.set(index, "Flight Context");
+    } else {
+      const title = name.split("-").map(
+        (word, wordIndex) => wordIndex === 0 || !SMALL_WORDS.has(word) ? word.charAt(0).toUpperCase() + word.slice(1) : word
+      ).join(" ");
+      map.set(index, title);
+    }
+  }
+  return map;
+}
+
+// src/DocPlayer.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function isDevEnvironment() {
+  try {
+    return typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+var warnedMissingStyles = false;
+function DocPlayer(props) {
+  const { doc, markdown } = props;
+  const markdownDoc = useMemo2(
+    () => !doc && markdown !== void 0 ? markdownToDoc(parseMarkdown(markdown)) : void 0,
+    [doc, markdown]
+  );
+  const resolvedDoc = doc ?? markdownDoc;
+  if (!resolvedDoc) {
+    return /* @__PURE__ */ jsx7("div", { className: "doc-player doc-player--empty" });
+  }
+  return /* @__PURE__ */ jsx7(DocPlayerContent, { ...props, doc: resolvedDoc });
+}
+function DocPlayerContent({
+  doc,
+  basePath = ".",
+  renderMode = false,
+  animationsEnabled = true,
+  autoPlay = false,
+  onEnded,
+  onTimeUpdate,
+  audioController: externalAudioController,
+  audioMode = "media",
+  showControls = true,
+  showScrubber = false,
+  muted = false,
+  captionsEnabled: captionsEnabledProp,
+  onCaptionsToggle,
+  onPlaybackStateChange,
+  onControlsReady,
+  onRenderAPIReady,
+  isFullscreen = false,
+  onFullscreenToggle,
+  onBlockMarkers,
+  forceViewport,
+  displayMode = "video",
+  showCoverSlide = true,
+  coverVisible,
+  theme,
+  surface,
+  captionStyle = "standard",
+  enableSwipe = true,
+  globalKeyboardShortcuts = false
+}) {
+  const isSlideshowMode = displayMode === "slideshow";
+  const isLinearMode = displayMode === "linear";
+  const audioRef = useRef5(null);
+  const containerRef = useRef5(null);
+  const playerId = `squisq-player-${useId2().replace(/:/g, "")}`;
+  const [tapFeedback, setTapFeedback] = useState4(null);
+  const tapFeedbackTimer = useRef5();
+  const { viewport, orientation } = useViewportOrientation();
+  const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS.landscape : viewport);
+  const isDebugMode = useMemo2(() => {
+    if (typeof window === "undefined") return false;
+    const params = new URLSearchParams(window.location.search);
+    return params.get("debug") === "true";
+  }, []);
+  const internalAudio = useAudioSync(
+    audioRef,
+    doc.audio,
+    basePath,
+    !externalAudioController,
+    audioMode
+  );
+  const audio = externalAudioController || internalAudio;
+  useEffect4(() => {
+    if (warnedMissingStyles || !isDevEnvironment()) return;
+    const el = containerRef.current;
+    if (!el || typeof getComputedStyle !== "function") return;
+    const value = getComputedStyle(el).getPropertyValue("--squisq-styles-loaded");
+    if (!value.trim()) {
+      warnedMissingStyles = true;
+      console.warn(
+        '[squisq] @bendyline/squisq-react/styles is not loaded \u2014 import "@bendyline/squisq-react/styles"'
+      );
+    }
+  }, []);
+  const {
+    currentTime,
+    isPlaying,
+    currentSegment,
+    totalDuration,
+    isEnded,
+    isReady: isAudioReady,
+    isAvailable,
+    unavailableMessage,
+    play,
+    pause,
+    toggle,
+    seekTo,
+    skipToSegment: _skipToSegment,
+    restart
+  } = audio;
+  const mediaSchedule = useMemo2(() => resolveMediaSchedule(doc), [doc]);
+  const currentTimeRef = useRef5(currentTime);
+  currentTimeRef.current = currentTime;
+  const totalDurationRef = useRef5(totalDuration);
+  totalDurationRef.current = totalDuration;
+  const expandedBlocksLenRef = useRef5(0);
+  const handleContainerClick = useCallback4(
+    (e) => {
+      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, 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 ? "pause" : "play";
+      setTapFeedback(nextState);
+      clearTimeout(tapFeedbackTimer.current);
+      tapFeedbackTimer.current = setTimeout(() => setTapFeedback(null), 600);
+    },
+    [renderMode, toggle, isPlaying, isSlideshowMode, isLinearMode]
+  );
+  const autoSurface = useAutoSurface(surface === "auto");
+  const resolvedSurface = surface === "auto" ? autoSurface : surface;
+  const effectiveTheme = useMemo2(() => {
+    const base = theme ?? DEFAULT_THEME;
+    return resolvedSurface ? applySurface(base, resolvedSurface) : base;
+  }, [theme, resolvedSurface]);
+  const {
+    currentBlock,
+    currentBlockIndex,
+    previousBlock,
+    isEntering,
+    isExiting,
+    blockTime,
+    blockProgress: _blockProgress,
+    docProgress,
+    nextBlock: _nextBlock,
+    prevBlock: _prevBlock,
+    blocks: expandedBlocks,
+    suppressOutgoingForNextBlock
+  } = useDocPlayback(doc, currentTime, {
+    viewport: activeViewport,
+    theme: effectiveTheme,
+    onSeek: seekTo
+  });
+  const coverBlock = useMemo2(() => {
+    const startBlockConfig = doc.startBlock;
+    if (!showCoverSlide) return null;
+    if (!startBlockConfig) return null;
+    const context = createTemplateContext(effectiveTheme, 0, 1, activeViewport);
+    const layers = expandCoverBlock(startBlockConfig, context);
+    return {
+      id: "cover-block",
+      startTime: -1,
+      // Not part of timeline
+      duration: 0,
+      // Static
+      audioSegment: -1,
+      layers
+    };
+  }, [doc.startBlock, activeViewport, effectiveTheme, showCoverSlide]);
+  const hasManagedCover = !!coverBlock;
+  const [slideshowCoverVisible, setSlideshowCoverVisible] = useState4(false);
+  const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState4(false);
+  const slideshowCoverInitKeyRef = useRef5("");
+  useEffect4(() => {
+    slideshowCoverInitKeyRef.current = "";
+  }, [doc]);
+  useEffect4(() => {
+    const initKey = `${isSlideshowMode}:${hasManagedCover}:${renderMode}`;
+    if (slideshowCoverInitKeyRef.current === initKey) return;
+    slideshowCoverInitKeyRef.current = initKey;
+    if (isSlideshowMode && hasManagedCover && !renderMode) {
+      setSlideshowCoverVisible(true);
+      pause();
+    } else {
+      setSlideshowCoverVisible(false);
+    }
+  }, [isSlideshowMode, hasManagedCover, renderMode, pause]);
+  const [coverForced, setCoverForced] = useState4(false);
+  const [coverGraceActive, setCoverGraceActive] = useState4(false);
+  const coverGraceTimer = useRef5();
+  const coverWasShowing = useRef5(false);
+  const hasPlayedOnce = useRef5(false);
+  useEffect4(() => {
+    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;
+  useEffect4(() => {
+    if (isPlaying && coverWasShowing.current && coverBlock && !renderMode && !isSlideshowMode) {
+      coverWasShowing.current = false;
+      hasPlayedOnce.current = true;
+      setCoverGraceActive(true);
+      coverGraceTimer.current = setTimeout(() => setCoverGraceActive(false), 3e3);
+    }
+  }, [isPlaying, coverBlock, renderMode, isSlideshowMode]);
+  useEffect4(() => () => clearTimeout(coverGraceTimer.current), []);
+  useEffect4(() => () => clearTimeout(tapFeedbackTimer.current), []);
+  const showVideoCoverBlock = !isSlideshowMode && !isLinearMode && !!coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
+  const effectiveSlideshowCoverVisible = coverVisible ?? slideshowCoverVisible;
+  const showSlideshowCover = !!(isSlideshowMode && !isLinearMode && !renderMode && coverBlock && effectiveSlideshowCoverVisible);
+  const showCoverBlock = coverVisible === void 0 ? showVideoCoverBlock || showSlideshowCover : !!coverBlock && coverVisible;
+  const slideshowHasCover = !!(isSlideshowMode && !renderMode && coverBlock);
+  const slideshowSlideIndex = slideshowHasCover ? effectiveSlideshowCoverVisible ? 0 : currentBlockIndex + 1 : currentBlockIndex;
+  const slideshowTotalSlides = slideshowHasCover ? expandedBlocks.length + 1 : expandedBlocks.length;
+  const hasAutoPlayed = useRef5(false);
+  useEffect4(() => {
+    hasAutoPlayed.current = false;
+  }, [doc]);
+  useEffect4(() => {
+    if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
+      hasAutoPlayed.current = true;
+      play();
+    }
+  }, [isAudioReady, autoPlay, play]);
+  useEffect4(() => {
+    onTimeUpdate?.(currentTime);
+  }, [currentTime, onTimeUpdate]);
+  useEffect4(() => {
+    if (isEnded) {
+      onEnded?.();
+    }
+  }, [isEnded, onEnded]);
+  const liveRenderAPIRef = useRef5(null);
+  const stableRenderAPIRef = useRef5(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;
+  useEffect4(() => {
+    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;
+          (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);
+            }
+          });
+          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 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);
+                  }
+                })
+              );
+            });
+          }
+          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());
+          });
+        });
+      });
+    };
+    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
+      }));
+    };
+    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 (liveRenderAPIRef.current === api) liveRenderAPIRef.current = null;
+    };
+  }, [renderMode, isDebugMode, seekTo, totalDuration, expandedBlocks, coverBlock, doc]);
+  useEffect4(() => {
+    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] = useState4(defaultMode);
+  useEffect4(() => {
+    setCaptionMode(defaultMode);
+  }, [defaultMode]);
+  const captionsEnabled = captionMode !== "off";
+  const activeCaptionStyle = captionMode === "social" ? "social" : "standard";
+  const setCaptionsEnabled = useCallback4(
+    (enabled) => {
+      setCaptionMode(enabled ? captionStyle || "standard" : "off");
+      onCaptionsToggle?.(enabled);
+    },
+    [onCaptionsToggle, captionStyle]
+  );
+  const cycleCaptionMode = useCallback4(() => {
+    setCaptionMode((prev) => {
+      const next = prev === "off" ? "standard" : prev === "standard" ? "social" : "off";
+      onCaptionsToggle?.(next !== "off");
+      return next;
+    });
+  }, [onCaptionsToggle]);
+  const hasCaptions = doc.captions && doc.captions.phrases.length > 0;
+  const segmentTitleMap = useMemo2(() => buildSegmentTitleMap(doc), [doc]);
+  const playbackState = useMemo2(
+    () => ({
+      isPlaying,
+      currentTime,
+      totalDuration,
+      isCoverVisible: showCoverBlock,
+      currentBlockIndex: slideshowSlideIndex,
+      totalBlocks: slideshowTotalSlides,
+      docProgress,
+      hasCaptions: !!hasCaptions,
+      captionsEnabled,
+      captionMode,
+      isFullscreen,
+      currentSegmentIndex: currentSegment,
+      currentSegmentName: segmentTitleMap.get(currentSegment) ?? doc.audio.segments[currentSegment]?.name ?? null,
+      currentBlock: showSlideshowCover ? coverBlock : currentBlock ?? null,
+      currentSlideLabel: showSlideshowCover ? "Cover" : void 0,
+      currentSlideNumber: slideshowHasCover && !showSlideshowCover ? currentBlockIndex + 1 : void 0,
+      totalSlideNumber: slideshowHasCover ? expandedBlocks.length : void 0
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- doc.audio.segments is stable within a given doc
+    [
+      isPlaying,
+      currentTime,
+      totalDuration,
+      showCoverBlock,
+      slideshowSlideIndex,
+      slideshowTotalSlides,
+      docProgress,
+      hasCaptions,
+      captionsEnabled,
+      captionMode,
+      isFullscreen,
+      currentSegment,
+      segmentTitleMap,
+      currentBlock,
+      currentBlockIndex,
+      showSlideshowCover,
+      coverBlock,
+      slideshowHasCover,
+      expandedBlocks.length
+    ]
+  );
+  const playbackActions = useMemo2(
+    () => ({
+      toggle,
+      restart,
+      seekTo,
+      setCaptionsEnabled,
+      cycleCaptionMode,
+      toggleFullscreen: onFullscreenToggle
+    }),
+    [toggle, restart, seekTo, setCaptionsEnabled, cycleCaptionMode, onFullscreenToggle]
+  );
+  const slideNavActions = useMemo2(
+    () => ({
+      nextSlide: () => {
+        if (slideshowHasCover && slideshowCoverVisible) {
+          const target = expandedBlocks[0];
+          if (target) {
+            setSlideshowCoverVisible(false);
+            seekTo(target.startTime);
+            pause();
+          }
+          return;
+        }
+        if (currentBlockIndex < expandedBlocks.length - 1) {
+          const target = expandedBlocks[currentBlockIndex + 1];
+          if (target) {
+            setSlideshowCoverVisible(false);
+            seekTo(target.startTime);
+            pause();
+          }
+        }
+      },
+      prevSlide: () => {
+        if (slideshowHasCover && !slideshowCoverVisible && currentBlockIndex <= 0) {
+          setSlideshowCoverVisible(true);
+          seekTo(0);
+          pause();
+          return;
+        }
+        if (currentBlockIndex > 0) {
+          const target = expandedBlocks[currentBlockIndex - 1];
+          if (target) {
+            setSlideshowCoverVisible(false);
+            seekTo(target.startTime);
+            pause();
+          }
+        }
+      },
+      goToSlide: (index) => {
+        if (slideshowHasCover) {
+          if (index === 0) {
+            setSlideshowCoverVisible(true);
+            seekTo(0);
+            pause();
+            return;
+          }
+          const target = expandedBlocks[index - 1];
+          if (target) {
+            setSlideshowCoverVisible(false);
+            seekTo(target.startTime);
+            pause();
+          }
+          return;
+        }
+        if (index >= 0 && index < expandedBlocks.length) {
+          const target = expandedBlocks[index];
+          if (target) {
+            seekTo(target.startTime);
+            pause();
+          }
+        }
+      }
+    }),
+    [currentBlockIndex, expandedBlocks, seekTo, pause, slideshowHasCover, slideshowCoverVisible]
+  );
+  const swipeEnabled = isSlideshowMode && !isLinearMode && !renderMode && enableSwipe;
+  const armContextFreeSwipeEntry = useCallback4(
+    (destinationSlideIndex) => {
+      const destinationBlockIndex = destinationSlideIndex - (slideshowHasCover ? 1 : 0);
+      const destinationBlock = expandedBlocks[destinationBlockIndex];
+      if (destinationBlock) suppressOutgoingForNextBlock(destinationBlock.id);
+    },
+    [expandedBlocks, slideshowHasCover, suppressOutgoingForNextBlock]
+  );
+  const handleSwipeNext = useCallback4(() => {
+    armContextFreeSwipeEntry(slideshowSlideIndex + 1);
+    slideNavActions.nextSlide();
+  }, [armContextFreeSwipeEntry, slideshowSlideIndex, slideNavActions]);
+  const handleSwipePrev = useCallback4(() => {
+    armContextFreeSwipeEntry(slideshowSlideIndex - 1);
+    slideNavActions.prevSlide();
+  }, [armContextFreeSwipeEntry, slideshowSlideIndex, slideNavActions]);
+  const swipe = useSlideSwipe({
+    enabled: swipeEnabled,
+    containerRef,
+    canGoNext: slideshowSlideIndex < slideshowTotalSlides - 1,
+    canGoPrev: slideshowSlideIndex > 0,
+    onNext: handleSwipeNext,
+    onPrev: handleSwipePrev
+  });
+  useEffect4(() => {
+    onPlaybackStateChange?.(playbackState);
+  }, [playbackState, onPlaybackStateChange]);
+  useEffect4(() => {
+    onControlsReady?.({ play, pause, ...playbackActions });
+  }, [play, pause, playbackActions, onControlsReady]);
+  const getBlockTitle = useCallback4((block) => {
+    const docBlock = block;
+    if (isTemplateBlock2(docBlock)) {
+      const props = docBlock;
+      if (typeof props.title === "string") return props.title;
+      if (typeof props.stat === "string") return props.stat;
+      if (typeof props.quote === "string") {
+        const firstLine = props.quote.split("\n")[0];
+        if (firstLine.length <= 30) return firstLine;
+        return firstLine.slice(0, 27) + "...";
+      }
+      if (typeof props.date === "string") return props.date;
+      if (typeof props.fact === "string") return props.fact;
+    }
+    if (block.layers && Array.isArray(block.layers)) {
+      const textLayer = block.layers.find((l) => l.type === "text");
+      if (textLayer?.content?.text) {
+        const firstLine = textLayer.content.text.split("\n")[0];
+        if (firstLine.length <= 30) return firstLine;
+        return firstLine.slice(0, 27) + "...";
+      }
+    }
+    return block.id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  }, []);
+  const slideshowPickerItems = useMemo2(() => {
+    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 = useMemo2(() => {
+    if (!totalDuration || !expandedBlocks.length) return [];
+    let prevSegment = -1;
+    return expandedBlocks.map((block, index) => {
+      const isSectionStart = block.audioSegment !== prevSegment;
+      prevSegment = block.audioSegment;
+      return {
+        block,
+        index,
+        position: block.startTime / totalDuration * 100,
+        title: getBlockTitle(block),
+        isSectionStart
+      };
+    });
+  }, [expandedBlocks, totalDuration, getBlockTitle]);
+  useEffect4(() => {
+    if (blockMarkers.length > 0) {
+      onBlockMarkers?.(blockMarkers);
+    }
+  }, [blockMarkers, onBlockMarkers]);
+  expandedBlocksLenRef.current = isSlideshowMode ? slideshowTotalSlides : expandedBlocks.length;
+  const handleKeyboardShortcut = useCallback4(
+    (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;
+      if (e.key === "f" || e.key === "F") {
+        if (!onFullscreenToggle) return;
+        e.preventDefault();
+        onFullscreenToggle();
+        return;
+      }
+      if (isSlideshowMode) {
+        switch (e.key) {
+          case "ArrowRight":
+          case "ArrowDown":
+          case " ":
+            e.preventDefault();
+            slideNavActions.nextSlide();
+            break;
+          case "ArrowLeft":
+            e.preventDefault();
+            slideNavActions.prevSlide();
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setIsSlideshowPickerOpen(true);
+            break;
+          case "Home":
+            e.preventDefault();
+            slideNavActions.goToSlide(0);
+            break;
+          case "End":
+            e.preventDefault();
+            slideNavActions.goToSlide(expandedBlocksLenRef.current - 1);
+            break;
+        }
+      } else {
+        switch (e.key) {
+          case " ":
+            e.preventDefault();
+            toggle();
+            break;
+          case "ArrowRight":
+            e.preventDefault();
+            seekTo(Math.min(currentTimeRef.current + 10, totalDurationRef.current));
+            break;
+          case "ArrowLeft":
+            e.preventDefault();
+            seekTo(Math.max(currentTimeRef.current - 10, 0));
+            break;
+        }
+      }
+    },
+    [isSlideshowMode, isLinearMode, toggle, seekTo, slideNavActions, onFullscreenToggle]
+  );
+  const handleKeyDown = useCallback4(
+    (e) => handleKeyboardShortcut(e, false),
+    [handleKeyboardShortcut]
+  );
+  useEffect4(() => {
+    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__ */ jsx7(
+      "div",
+      {
+        ref: containerRef,
+        "data-player-id": playerId,
+        className: "doc-player doc-player--linear",
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx7(
+          LinearDocView,
+          {
+            doc,
+            basePath,
+            viewport: activeViewport,
+            theme,
+            surface,
+            animationsEnabled
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4(
+    "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,
+      style: {
+        position: "relative",
+        width: "100%",
+        aspectRatio: `${activeViewport.width} / ${activeViewport.height}`,
+        margin: "0 auto",
+        overflow: "hidden",
+        // Swipe uses the grab/grabbing cursor via CSS classes; let vertical page
+        // scroll through on touch while we own horizontal drags.
+        cursor: renderMode || swipeEnabled ? void 0 : "pointer",
+        touchAction: swipeEnabled ? "pan-y" : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsx7("audio", { ref: audioRef, preload: "auto", muted }),
+        /* @__PURE__ */ jsx7(
+          MediaClipLayer,
+          {
+            schedule: mediaSchedule,
+            currentTime,
+            isPlaying,
+            basePath,
+            renderMode,
+            muted
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: "doc-player__viewport", children: [
+          showCoverBlock && coverBlock && /* @__PURE__ */ jsx7("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx7(
+            BlockRenderer,
+            {
+              block: coverBlock,
+              blockTime: 0,
+              basePath,
+              isEntering: false,
+              viewport: activeViewport,
+              animationsEnabled,
+              theme: effectiveTheme
+            }
+          ) }),
+          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__ */ jsx7("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx7(
+            BlockRenderer,
+            {
+              block: previousBlock,
+              blockTime,
+              basePath,
+              isExiting: true,
+              transition: currentBlock?.transition,
+              viewport: activeViewport,
+              animationsEnabled,
+              theme: effectiveTheme
+            }
+          ) }, previousBlock.id),
+          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx7(
+            "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__ */ jsx7(
+                BlockRenderer,
+                {
+                  block: currentBlock,
+                  blockTime,
+                  basePath,
+                  isEntering: animationsEnabled && isEntering,
+                  viewport: activeViewport,
+                  isPlaying,
+                  animationsEnabled,
+                  theme: effectiveTheme
+                }
+              )
+            },
+            currentBlock.id
+          ),
+          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx7(
+            CaptionOverlay,
+            {
+              captions: doc.captions,
+              currentTime,
+              enabled: captionsEnabled && (renderMode || isPlaying || currentTime > 0),
+              fontSize: 16,
+              captionStyle: activeCaptionStyle,
+              theme: effectiveTheme,
+              viewport: activeViewport
+            }
+          ),
+          isDebugMode && /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: "doc-player__debug",
+              style: {
+                position: "absolute",
+                top: "8px",
+                right: "8px",
+                padding: "8px 12px",
+                background: "rgba(0, 0, 0, 0.85)",
+                borderRadius: "6px",
+                color: "#00ff00",
+                fontFamily: "monospace",
+                fontSize: "11px",
+                lineHeight: "1.5",
+                zIndex: 200,
+                maxWidth: "280px",
+                pointerEvents: "none",
+                textAlign: "left"
+              },
+              children: [
+                /* @__PURE__ */ jsx7("div", { style: { color: "#ffcc00", fontWeight: "bold", marginBottom: "4px" }, children: "DEBUG MODE" }),
+                /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "template:" }),
+                  " ",
+                  /* @__PURE__ */ jsx7("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "block:" }),
+                  " ",
+                  currentBlockIndex + 1,
+                  "/",
+                  expandedBlocks.length,
+                  " ",
+                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                    "(",
+                    currentBlock?.id || "none",
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "time:" }),
+                  " ",
+                  currentTime.toFixed(2),
+                  "s /",
+                  " ",
+                  totalDuration.toFixed(1),
+                  "s",
+                  " ",
+                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                    "(progress: ",
+                    (docProgress * 100).toFixed(1),
+                    "%, scriptDur: ",
+                    doc.duration.toFixed(1),
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "blockTime:" }),
+                  " ",
+                  blockTime.toFixed(2),
+                  "s /",
+                  " ",
+                  (currentBlock?.duration || 0).toFixed(1),
+                  "s"
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "segment:" }),
+                  " ",
+                  currentSegment,
+                  "/",
+                  doc.audio.segments.length - 1,
+                  " ",
+                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                    "(",
+                    doc.audio.segments[currentSegment]?.name || "none",
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "viewport:" }),
+                  " ",
+                  activeViewport.name || `${activeViewport.width}x${activeViewport.height}`,
+                  " ",
+                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                    "(",
+                    orientation,
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "playing:" }),
+                  " ",
+                  /* @__PURE__ */ jsx7("span", { style: { color: isPlaying ? "#4ade80" : "#f87171" }, children: isPlaying ? "yes" : "no" }),
+                  showCoverBlock && /* @__PURE__ */ jsx7("span", { style: { color: "#60a5fa" }, children: " (cover)" })
+                ] }),
+                hasCaptions && (() => {
+                  const debugPhrase = getCaptionAtTime2(doc.captions, currentTime);
+                  const debugEnabled = captionsEnabled && (isPlaying || currentTime > 0);
+                  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+                    /* @__PURE__ */ jsxs4("div", { children: [
+                      /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "captions:" }),
+                      " ",
+                      doc.captions?.phrases.length || 0,
+                      " phrases",
+                      " ",
+                      /* @__PURE__ */ jsxs4("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
+                        "(",
+                        captionsEnabled ? "on" : "off",
+                        ")"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs4("div", { children: [
+                      /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "cc.enabled:" }),
+                      " ",
+                      /* @__PURE__ */ jsx7("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
+                      " ",
+                      /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                        "(playing=",
+                        String(isPlaying),
+                        " t>0=",
+                        String(currentTime > 0),
+                        ")"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs4("div", { children: [
+                      /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "cc.phrase:" }),
+                      " ",
+                      /* @__PURE__ */ jsx7("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
+                    ] }),
+                    debugPhrase && /* @__PURE__ */ jsxs4("div", { children: [
+                      /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "cc.range:" }),
+                      " ",
+                      /* @__PURE__ */ jsxs4("span", { style: { color: "#60a5fa" }, children: [
+                        debugPhrase.startTime.toFixed(2),
+                        "-",
+                        debugPhrase.endTime.toFixed(2)
+                      ] })
+                    ] })
+                  ] });
+                })()
+              ]
+            }
+          )
+        ] }),
+        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "doc-player__unavailable",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+              gap: "16px",
+              background: "rgba(0, 0, 0, 0.7)",
+              color: "rgba(255, 255, 255, 0.9)",
+              fontSize: "14px",
+              zIndex: 50
+            },
+            children: [
+              /* @__PURE__ */ jsx7("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
+              /* @__PURE__ */ jsx7("span", { children: unavailableMessage })
+            ]
+          }
+        ),
+        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx7(
+          DocControlsOverlay,
+          {
+            state: playbackState,
+            actions: playbackActions,
+            blockMarkers,
+            expandedBlocks,
+            getBlockTitle
+          }
+        ),
+        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "doc-player__scrubber",
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              padding: "12px 16px 8px",
+              background: "linear-gradient(transparent, rgba(0,0,0,0.6))",
+              display: "flex",
+              alignItems: "center",
+              zIndex: 100
+            },
+            children: /* @__PURE__ */ jsx7(
+              DocProgressBar,
+              {
+                state: playbackState,
+                actions: playbackActions,
+                blockMarkers,
+                expandedBlocks,
+                getBlockTitle
+              }
+            )
+          }
+        ),
+        !renderMode && isSlideshowMode && showControls && /* @__PURE__ */ jsx7(
+          DocControlsSlideshow,
+          {
+            state: playbackState,
+            slideNav: slideNavActions,
+            slides: slideshowPickerItems,
+            pickerOpen: isSlideshowPickerOpen,
+            onPickerOpenChange: setIsSlideshowPickerOpen
+          }
+        ),
+        !isSlideshowMode && tapFeedback && /* @__PURE__ */ jsx7("div", { className: "doc-player__tap-feedback", children: /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 24 24", fill: "white", width: "48", height: "48", children: tapFeedback === "pause" ? /* @__PURE__ */ jsx7("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) : /* @__PURE__ */ jsx7("path", { d: "M8 5v14l11-7z" }) }) }, tapFeedback)
+      ]
+    }
+  );
+}
+
+// src/DocControlsBottom.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function DocControlsBottom({
+  state,
+  actions,
+  blockMarkers,
+  expandedBlocks,
+  getBlockTitle
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: "doc-controls-bottom", children: [
+    /* @__PURE__ */ jsx8(
+      "button",
+      {
+        className: "bottom-ctrl-btn",
+        onClick: actions.restart,
+        title: "Restart",
+        "aria-label": "Restart from beginning",
+        children: /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx8("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__ */ jsx8(
+      "button",
+      {
+        className: "bottom-ctrl-btn bottom-play-btn",
+        onClick: actions.toggle,
+        "aria-label": state.isPlaying ? "Pause" : "Play",
+        children: state.isPlaying ? /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx8("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx8("path", { d: "M8 5v14l11-7z" }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs5("span", { className: "bottom-time", children: [
+      formatTime(state.currentTime),
+      " / ",
+      formatTime(state.totalDuration)
+    ] }),
+    /* @__PURE__ */ jsx8(
+      DocProgressBar,
+      {
+        state,
+        actions,
+        blockMarkers,
+        expandedBlocks,
+        getBlockTitle
+      }
+    ),
+    /* @__PURE__ */ jsxs5("span", { className: "bottom-segment", children: [
+      state.currentBlockIndex + 1,
+      "/",
+      state.totalBlocks
+    ] }),
+    state.hasCaptions && /* @__PURE__ */ jsx8(
+      "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__ */ jsx8("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx8("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__ */ jsx8(
+      "button",
+      {
+        className: `bottom-ctrl-btn ${state.isFullscreen ? "bottom-ctrl-btn--active" : ""}`,
+        onClick: actions.toggleFullscreen,
+        title: state.isFullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)",
+        "aria-label": state.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+        children: state.isFullscreen ? /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx8("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx8("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+      }
+    )
+  ] });
+}
+
+// src/DocControlsSidebar.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function DocControlsSidebar({ state, actions }) {
+  return /* @__PURE__ */ jsxs6("div", { className: "doc-controls-sidebar", children: [
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        className: "sidebar-ctrl-btn",
+        onClick: actions.restart,
+        title: "Restart",
+        "aria-label": "Restart from beginning",
+        children: /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx9("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__ */ jsx9(
+      "button",
+      {
+        className: "sidebar-ctrl-btn sidebar-play-btn",
+        onClick: actions.toggle,
+        "aria-label": state.isPlaying ? "Pause" : "Play",
+        children: state.isPlaying ? /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx9("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx9("path", { d: "M8 5v14l11-7z" }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs6("div", { className: "sidebar-time", children: [
+      /* @__PURE__ */ jsx9("div", { children: formatTime(state.currentTime) }),
+      /* @__PURE__ */ jsx9("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "sidebar-segment", children: [
+      state.currentBlockIndex + 1,
+      "/",
+      state.totalBlocks
+    ] }),
+    state.hasCaptions && /* @__PURE__ */ jsx9(
+      "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__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx9("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__ */ jsx9(
+      "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__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx9("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx9("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+      }
+    )
+  ] });
+}
+
+// src/DocPlayerWithSidebar.tsx
+import { useRef as useRef6, useState as useState5, useCallback as useCallback5, useEffect as useEffect5 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var DEFAULT_STATE = {
+  isPlaying: false,
+  currentTime: 0,
+  totalDuration: 0,
+  currentBlockIndex: 0,
+  totalBlocks: 0,
+  docProgress: 0,
+  hasCaptions: false,
+  captionsEnabled: false,
+  captionMode: "off",
+  currentSegmentIndex: 0,
+  currentSegmentName: null,
+  currentBlock: null
+};
+function DocPlayerWithSidebar({
+  doc,
+  basePath,
+  autoPlay = false,
+  onEnded,
+  onTimeUpdate,
+  audioController,
+  animationsEnabled = true,
+  muted,
+  captionsEnabled,
+  isFullscreen,
+  onFullscreenToggle,
+  forceViewport,
+  onPlayingChange,
+  theme
+}) {
+  const stateRef = useRef6(DEFAULT_STATE);
+  const actionsRef = useRef6(null);
+  const wasPlayingRef = useRef6(false);
+  const [, setTick] = useState5(0);
+  const handleStateChange = useCallback5(
+    (state) => {
+      stateRef.current = state;
+      if (onPlayingChange && state.isPlaying !== wasPlayingRef.current) {
+        wasPlayingRef.current = state.isPlaying;
+        onPlayingChange(state.isPlaying);
+      }
+      if (!state.isPlaying) setTick((t) => t + 1);
+    },
+    [onPlayingChange]
+  );
+  const handleControlsReady = useCallback5(
+    (controls) => {
+      const isFirst = !actionsRef.current;
+      actionsRef.current = controls;
+      if (isFirst) setTick((t) => t + 1);
+    },
+    []
+  );
+  useEffect5(() => {
+    const interval = setInterval(() => {
+      if (!stateRef.current.isPlaying) return;
+      setTick((t) => t + 1);
+    }, 250);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsxs7("div", { className: "doc-player-sidebar-layout", children: [
+    /* @__PURE__ */ jsx10("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx10(
+      DocPlayer,
+      {
+        doc,
+        theme,
+        basePath,
+        autoPlay,
+        onEnded,
+        onTimeUpdate,
+        audioController,
+        animationsEnabled,
+        muted,
+        captionsEnabled,
+        showControls: isFullscreen,
+        showScrubber: !isFullscreen,
+        onPlaybackStateChange: handleStateChange,
+        onControlsReady: handleControlsReady,
+        isFullscreen,
+        onFullscreenToggle,
+        forceViewport
+      }
+    ) }),
+    actionsRef.current && /* @__PURE__ */ jsx10(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
+  ] });
+}
+
+export {
+  MediaClipLayer,
+  SocialCaptionOverlay,
+  CaptionOverlay,
+  formatTime,
+  DocProgressBar,
+  DocControlsOverlay,
+  DocControlsSlideshow,
+  DocPlayer,
+  DocControlsBottom,
+  DocControlsSidebar,
+  DocPlayerWithSidebar
+};