@bendyline/squisq-react 2.7.1 → 2.8.0

package/dist/{chunk-KXYE4AGL.js → chunk-LAL43UUN.js}

@@ -1242,10 +1242,282 @@ function DocControlsSlideshow({
   );
 }
 
+// src/DashboardView.tsx
+import { Fragment as Fragment2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { materializeDashboard, resolveThemeForDoc, VIEWPORT_PRESETS } from "@bendyline/squisq/doc";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+async function waitForDashboardAssets(root) {
+  if (typeof document !== "undefined" && document.fonts?.ready) {
+    try {
+      await document.fonts.ready;
+    } catch {
+    }
+  }
+  const images = Array.from(root.querySelectorAll("img"));
+  await Promise.allSettled(
+    images.map((img) => {
+      if (img.complete) return Promise.resolve();
+      if (typeof img.decode === "function") return img.decode().catch(() => void 0);
+      return new Promise((resolve) => {
+        img.addEventListener("load", () => resolve(), { once: true });
+        img.addEventListener("error", () => resolve(), { once: true });
+      });
+    })
+  );
+  await new Promise((resolve) => {
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+    } else {
+      setTimeout(resolve, 0);
+    }
+  });
+}
+function syntheticBlock(id, layers) {
+  return { id, startTime: 0, duration: 0, audioSegment: 0, layers };
+}
+function DashboardView({
+  doc,
+  theme,
+  viewport,
+  layout,
+  showTitle,
+  style,
+  documentTitle,
+  basePath = ".",
+  animationsEnabled = true,
+  muted = true,
+  renderMode = false,
+  onRenderAPIReady,
+  className
+}) {
+  const rootRef = useRef4(null);
+  const activeTheme = useMemo3(() => theme ?? resolveThemeForDoc(doc), [theme, doc]);
+  const activeViewport = viewport ?? VIEWPORT_PRESETS.landscape;
+  const materialization = useMemo3(
+    () => materializeDashboard(doc, {
+      theme: activeTheme,
+      viewport: activeViewport,
+      layout,
+      showTitle,
+      style,
+      documentTitle
+    }),
+    [doc, activeTheme, activeViewport, layout, showTitle, style, documentTitle]
+  );
+  const backdropBottom = useMemo3(
+    () => syntheticBlock("dashboard-backdrop-bottom", materialization.backdrop.bottomLayers),
+    [materialization]
+  );
+  const backdropTop = useMemo3(
+    () => materialization.backdrop.topLayers.length > 0 ? syntheticBlock("dashboard-backdrop-top", materialization.backdrop.topLayers) : null,
+    [materialization]
+  );
+  const titleBlock = useMemo3(
+    () => materialization.title ? syntheticBlock("dashboard-title-band", materialization.title.layers) : null,
+    [materialization]
+  );
+  useEffect4(() => {
+    if (!renderMode || !onRenderAPIReady) return;
+    const api = {
+      seekTo: async () => {
+        const root = rootRef.current;
+        if (root) await waitForDashboardAssets(root);
+      },
+      getRenderedTime: () => 0,
+      getDuration: () => 0,
+      getBlocks: () => materialization.cells.map((cell) => ({
+        id: String(cell.block.id),
+        template: cell.block.template ?? "content",
+        startTime: 0,
+        duration: 0
+      })),
+      getAudioSegments: () => [],
+      getCaptions: () => [],
+      getChapters: () => [],
+      showCover: async () => {
+      },
+      hideCover: async () => {
+      },
+      hasCoverBlock: () => false
+    };
+    onRenderAPIReady(api);
+    return () => onRenderAPIReady(null);
+  }, [renderMode, onRenderAPIReady, materialization]);
+  const canvasDimensions = { width: activeViewport.width, height: activeViewport.height };
+  const coverStyle = { position: "absolute", inset: 0 };
+  const canvasStyle = {
+    position: "relative",
+    width: "var(--squisq-dashboard-fit-width, 100%)",
+    aspectRatio: `${activeViewport.width} / ${activeViewport.height}`,
+    overflow: "hidden",
+    // The style variant owns the canvas fill: card styles tint it away
+    // from the card surface so cards read as raised.
+    background: materialization.backdrop.fill,
+    margin: "0 auto",
+    "--squisq-dashboard-aspect": (activeViewport.width / activeViewport.height).toFixed(6)
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref: rootRef,
+      className: className ? `squisq-dashboard ${className}` : "squisq-dashboard",
+      "data-dashboard-layout": materialization.layout.name,
+      "data-dashboard-style": materialization.style,
+      style: canvasStyle,
+      children: [
+        /* @__PURE__ */ jsx7("div", { style: coverStyle, "aria-hidden": "true", children: /* @__PURE__ */ jsx7(
+          BlockRenderer,
+          {
+            block: backdropBottom,
+            blockTime: 0,
+            basePath,
+            viewport: canvasDimensions,
+            isPlaying: false,
+            muted: true,
+            animationsEnabled,
+            theme: activeTheme
+          }
+        ) }),
+        materialization.cells.map((cell) => /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          cell.frame && /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: "squisq-dashboard__frame",
+              "data-cell-index": cell.index,
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: cell.frame.rectPct.left,
+                top: cell.frame.rectPct.top,
+                width: cell.frame.rectPct.width,
+                height: cell.frame.rectPct.height,
+                pointerEvents: "none"
+              },
+              children: /* @__PURE__ */ jsx7(
+                BlockRenderer,
+                {
+                  block: syntheticBlock(`dashboard-frame-${cell.index}`, cell.frame.layers),
+                  blockTime: 0,
+                  basePath,
+                  viewport: {
+                    width: cell.frame.viewport.width,
+                    height: cell.frame.viewport.height
+                  },
+                  isPlaying: false,
+                  muted: true,
+                  animationsEnabled,
+                  theme: activeTheme
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: "squisq-dashboard__cell",
+              "data-cell-index": cell.index,
+              style: {
+                position: "absolute",
+                left: cell.rectPct.left,
+                top: cell.rectPct.top,
+                width: cell.rectPct.width,
+                height: cell.rectPct.height,
+                // Percentage radii scale with the rendered canvas, so a card
+                // cell's full-bleed art stays clipped to its corners at any
+                // export resolution.
+                ...cell.frame?.contentRadiusPct ? { borderRadius: cell.frame.contentRadiusPct, overflow: "hidden" } : {}
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  BlockRenderer,
+                  {
+                    block: { ...cell.block, layers: cell.layers },
+                    blockTime: 0,
+                    basePath,
+                    viewport: { width: cell.viewport.width, height: cell.viewport.height },
+                    isPlaying: false,
+                    muted,
+                    animationsEnabled,
+                    theme: activeTheme
+                  }
+                ),
+                cell.frame && cell.frame.overlayLayers.length > 0 && // Borders and accents ride above the block: a template that
+                // paints its own opaque surface would bury them. Same box, so
+                // the cell's clip rounds them to the card's corners.
+                /* @__PURE__ */ jsx7("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: /* @__PURE__ */ jsx7(
+                  BlockRenderer,
+                  {
+                    block: syntheticBlock(
+                      `dashboard-frame-overlay-${cell.index}`,
+                      cell.frame.overlayLayers
+                    ),
+                    blockTime: 0,
+                    basePath,
+                    viewport: {
+                      width: cell.frame.overlayViewport.width,
+                      height: cell.frame.overlayViewport.height
+                    },
+                    isPlaying: false,
+                    muted: true,
+                    animationsEnabled,
+                    theme: activeTheme
+                  }
+                ) })
+              ]
+            }
+          )
+        ] }, `${cell.index}-${cell.block.id}`)),
+        materialization.title && titleBlock && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "squisq-dashboard__title",
+            style: {
+              position: "absolute",
+              left: materialization.title.rectPct.left,
+              top: materialization.title.rectPct.top,
+              width: materialization.title.rectPct.width,
+              height: materialization.title.rectPct.height
+            },
+            children: /* @__PURE__ */ jsx7(
+              BlockRenderer,
+              {
+                block: titleBlock,
+                blockTime: 0,
+                basePath,
+                viewport: {
+                  width: materialization.title.viewport.width,
+                  height: materialization.title.viewport.height
+                },
+                isPlaying: false,
+                muted: true,
+                animationsEnabled,
+                theme: activeTheme
+              }
+            )
+          }
+        ),
+        backdropTop && /* @__PURE__ */ jsx7("div", { style: { ...coverStyle, pointerEvents: "none" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx7(
+          BlockRenderer,
+          {
+            block: backdropTop,
+            blockTime: 0,
+            basePath,
+            viewport: canvasDimensions,
+            isPlaying: false,
+            muted: true,
+            animationsEnabled,
+            theme: activeTheme
+          }
+        ) })
+      ]
+    }
+  );
+}
+
 // src/docPlayer/playerAppearance.ts
 import {
   resolveCoverSlideSettings,
-  resolveThemeForDoc
+  resolveThemeForDoc as resolveThemeForDoc2
 } from "@bendyline/squisq/doc";
 function readFrontmatterSetting(frontmatter, canonical, legacy) {
   if (!frontmatter) return void 0;
@@ -1303,7 +1575,7 @@ function resolveDocPlayerAppearance(doc, overrides = {}) {
     ...overrides.coverSlidePlayback !== void 0 ? { playback: overrides.coverSlidePlayback } : {}
   });
   return {
-    theme: overrides.theme ?? resolveThemeForDoc(doc),
+    theme: overrides.theme ?? resolveThemeForDoc2(doc),
     videoPresentation: overrides.videoPresentation ?? resolveVideoPresentation(
       readFrontmatterSetting(frontmatter, "squisq-video-presentation", "video-presentation")
     ) ?? "background",
@@ -1321,14 +1593,14 @@ function resolveDocPlayerAppearance(doc, overrides = {}) {
 
 // src/DocPlayer.tsx
 import {
-  Fragment as Fragment2,
+  Fragment as Fragment3,
   useId as useId2,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState5,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useLayoutEffect as useLayoutEffect2,
   useCallback as useCallback4,
-  useMemo as useMemo3
+  useMemo as useMemo4
 } from "react";
 import { flushSync } from "react-dom";
 import {
@@ -1340,7 +1612,7 @@ import {
 import { applySurface, pipStyleVars } from "@bendyline/squisq/schemas";
 
 // src/hooks/useSlideSwipe.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "react";
 var DISTANCE_RATIO = 0.3;
 var FLICK_VELOCITY = 0.5;
 var MIN_FLICK_DISTANCE = 12;
@@ -1366,13 +1638,13 @@ function useSlideSwipe(opts) {
   const settleMs = opts.settleMs ?? DEFAULT_SETTLE_MS;
   const [offsetPx, setOffsetPx] = useState4(0);
   const [phase, setPhase] = useState4("idle");
-  const optsRef = useRef4(opts);
+  const optsRef = useRef5(opts);
   optsRef.current = opts;
-  const dragRef = useRef4(null);
-  const phaseRef = useRef4("idle");
+  const dragRef = useRef5(null);
+  const phaseRef = useRef5("idle");
   phaseRef.current = phase;
-  const settleTimer = useRef4(null);
-  const settleRaf = useRef4(null);
+  const settleTimer = useRef5(null);
+  const settleRaf = useRef5(null);
   const clearPending = useCallback3(() => {
     if (settleTimer.current != null) {
       clearTimeout(settleTimer.current);
@@ -1403,7 +1675,7 @@ function useSlideSwipe(opts) {
     setPhase("dragging");
     setOffsetPx(0);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     function currentWidth() {
       return optsRef.current.containerRef.current?.getBoundingClientRect().width ?? 0;
     }
@@ -1473,7 +1745,7 @@ function useSlideSwipe(opts) {
       window.removeEventListener("pointercancel", onCancel);
     };
   }, [settleMs]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!opts.enabled) {
       dragRef.current = null;
       clearPending();
@@ -1481,7 +1753,7 @@ function useSlideSwipe(opts) {
       setOffsetPx(0);
     }
   }, [opts.enabled, clearPending]);
-  useEffect4(() => clearPending, [clearPending]);
+  useEffect5(() => clearPending, [clearPending]);
   return { offsetPx, phase, onPointerDown };
 }
 
@@ -1490,7 +1762,7 @@ import {
   expandCoverBlock,
   createTemplateContext,
   markdownToDoc,
-  VIEWPORT_PRESETS
+  VIEWPORT_PRESETS as VIEWPORT_PRESETS2
 } from "@bendyline/squisq/doc";
 import { parseMarkdown } from "@bendyline/squisq/markdown";
 
@@ -1780,7 +2052,7 @@ function seekVideoToFrame(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIM
 }
 
 // src/DocPlayer.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function isDevEnvironment() {
   try {
     return typeof process !== "undefined" && process.env.NODE_ENV !== "production";
@@ -1812,15 +2084,15 @@ function waitForVisualUpdate() {
 }
 function DocPlayer(props) {
   const { doc, markdown } = props;
-  const markdownDoc = useMemo3(
+  const markdownDoc = useMemo4(
     () => !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__ */ jsx8("div", { className: "doc-player doc-player--empty" });
   }
-  return /* @__PURE__ */ jsx7(DocPlayerContent, { ...props, doc: resolvedDoc });
+  return /* @__PURE__ */ jsx8(DocPlayerContent, { ...props, doc: resolvedDoc });
 }
 function DocPlayerContent({
   doc,
@@ -1846,6 +2118,10 @@ function DocPlayerContent({
   onBlockMarkers,
   forceViewport,
   displayMode = "video",
+  dashboardLayout,
+  dashboardShowTitle,
+  dashboardStyle,
+  dashboardDocumentTitle,
   showCoverSlide,
   coverSlideTemplate,
   coverSlideDuration,
@@ -1866,20 +2142,21 @@ function DocPlayerContent({
 }) {
   const isSlideshowMode = displayMode === "slideshow";
   const isLinearMode = displayMode === "linear";
-  const audioRef = useRef5(null);
-  const containerRef = useRef5(null);
+  const isDashboardMode = displayMode === "dashboard";
+  const audioRef = useRef6(null);
+  const containerRef = useRef6(null);
   const playerId = `squisq-player-${useId2().replace(/:/g, "")}`;
   const [tapFeedback, setTapFeedback] = useState5(null);
-  const tapFeedbackTimer = useRef5();
+  const tapFeedbackTimer = useRef6();
   const { viewport } = useViewportOrientation();
-  const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS.landscape : viewport);
+  const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS2.landscape : viewport);
   const activeOrientation = activeViewport.height > activeViewport.width ? "portrait" : "landscape";
-  const isDebugMode = useMemo3(() => {
+  const isDebugMode = useMemo4(() => {
     if (typeof window === "undefined") return false;
     const params = new URLSearchParams(window.location.search);
     return params.get("debug") === "true";
   }, []);
-  const syntheticDuration = useMemo3(
+  const syntheticDuration = useMemo4(
     () => audioMode === "synthetic" ? getDocPlaybackDuration(doc) : 0,
     [audioMode, doc]
   );
@@ -1892,7 +2169,7 @@ function DocPlayerContent({
     syntheticDuration
   );
   const audio = externalAudioController || internalAudio;
-  useEffect5(() => {
+  useEffect6(() => {
     if (warnedMissingStyles || !isDevEnvironment()) return;
     const el = containerRef.current;
     if (!el || typeof getComputedStyle !== "function") return;
@@ -1923,9 +2200,9 @@ function DocPlayerContent({
   const [renderClock, setRenderClock] = useState5(null);
   const renderTimeOverride = renderClock?.doc === doc ? renderClock.time : null;
   const currentTime = renderMode ? renderTimeOverride ?? audioCurrentTime : audioCurrentTime;
-  const rawSchedule = useMemo3(() => resolveMediaSchedule(doc), [doc]);
+  const rawSchedule = useMemo4(() => resolveMediaSchedule(doc), [doc]);
   const clipDurations = useMediaClipDurations(rawSchedule, basePath);
-  const mediaSchedule = useMemo3(
+  const mediaSchedule = useMemo4(
     () => resolveMediaSchedule(doc, { intrinsicDuration: (clip) => clipDurations.get(clip.src) }),
     [doc, clipDurations]
   );
@@ -1950,13 +2227,13 @@ function DocPlayerContent({
     if (!isPlaying) startActiveTimelineMedia();
     return toggle();
   }, [isPlaying, startActiveTimelineMedia, toggle]);
-  const currentTimeRef = useRef5(currentTime);
+  const currentTimeRef = useRef6(currentTime);
   currentTimeRef.current = currentTime;
-  const committedRenderTimeRef = useRef5(currentTime);
-  const renderCommitWaitersRef = useRef5([]);
-  const totalDurationRef = useRef5(totalDuration);
+  const committedRenderTimeRef = useRef6(currentTime);
+  const renderCommitWaitersRef = useRef6([]);
+  const totalDurationRef = useRef6(totalDuration);
   totalDurationRef.current = totalDuration;
-  const expandedBlocksLenRef = useRef5(0);
+  const expandedBlocksLenRef = useRef6(0);
   useLayoutEffect2(() => {
     committedRenderTimeRef.current = currentTime;
     const pending = renderCommitWaitersRef.current;
@@ -1966,7 +2243,7 @@ function DocPlayerContent({
       return false;
     });
   }, [currentTime]);
-  useEffect5(
+  useEffect6(
     () => () => {
       const error = new Error("DocPlayer unmounted before the requested frame committed.");
       renderCommitWaitersRef.current.splice(0).forEach((waiter) => waiter.reject(error));
@@ -2006,7 +2283,7 @@ function DocPlayerContent({
   );
   const autoSurface = useAutoSurface(surface === "auto");
   const resolvedSurface = surface === "auto" ? autoSurface : surface;
-  const appearance = useMemo3(
+  const appearance = useMemo4(
     () => resolveDocPlayerAppearance(doc, {
       theme,
       videoPresentation,
@@ -2031,13 +2308,13 @@ function DocPlayerContent({
       coverSlidePlayback
     ]
   );
-  const effectiveTheme = useMemo3(() => {
+  const effectiveTheme = useMemo4(() => {
     const base = appearance.theme;
     return resolvedSurface ? applySurface(base, resolvedSurface) : base;
   }, [appearance.theme, resolvedSurface]);
-  const resolvedPipStyle = useMemo3(() => pipStyleVars(effectiveTheme), [effectiveTheme]);
+  const resolvedPipStyle = useMemo4(() => pipStyleVars(effectiveTheme), [effectiveTheme]);
   const pipVars = resolvedPipStyle;
-  const pipFrameStyle = useMemo3(
+  const pipFrameStyle = useMemo4(
     () => ({
       border: resolvedPipStyle["--squisq-pip-border"],
       borderRadius: resolvedPipStyle["--squisq-pip-radius"],
@@ -2067,7 +2344,7 @@ function DocPlayerContent({
     // remove authored slides from the default loss-averse projection.
     useAudioSegmentTiming: audioMode !== "synthetic"
   });
-  const coverBlock = useMemo3(() => {
+  const coverBlock = useMemo4(() => {
     const startBlockConfig = doc.startBlock;
     if (!appearance.showCoverSlide) return null;
     if (!startBlockConfig) return null;
@@ -2092,11 +2369,11 @@ function DocPlayerContent({
   const hasManagedCover = !!coverBlock;
   const [slideshowCoverVisible, setSlideshowCoverVisible] = useState5(false);
   const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState5(false);
-  const slideshowCoverInitKeyRef = useRef5("");
-  useEffect5(() => {
+  const slideshowCoverInitKeyRef = useRef6("");
+  useEffect6(() => {
     slideshowCoverInitKeyRef.current = "";
   }, [doc]);
-  useEffect5(() => {
+  useEffect6(() => {
     const initKey = `${isSlideshowMode}:${hasManagedCover}:${renderMode}`;
     if (slideshowCoverInitKeyRef.current === initKey) return;
     slideshowCoverInitKeyRef.current = initKey;
@@ -2109,10 +2386,10 @@ function DocPlayerContent({
   }, [isSlideshowMode, hasManagedCover, renderMode, pause]);
   const [coverForced, setCoverForced] = useState5(false);
   const [coverGraceActive, setCoverGraceActive] = useState5(false);
-  const coverGraceTimer = useRef5();
-  const coverWasShowing = useRef5(false);
-  const hasPlayedOnce = useRef5(false);
-  useEffect5(() => {
+  const coverGraceTimer = useRef6();
+  const coverWasShowing = useRef6(false);
+  const hasPlayedOnce = useRef6(false);
+  useEffect6(() => {
     hasPlayedOnce.current = false;
     coverWasShowing.current = false;
     clearTimeout(coverGraceTimer.current);
@@ -2121,7 +2398,7 @@ function DocPlayerContent({
   }, [doc]);
   const atRest = !!(coverBlock && !isSlideshowMode && !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
   if (atRest) coverWasShowing.current = true;
-  useEffect5(() => {
+  useEffect6(() => {
     if (isPlaying && coverWasShowing.current && coverBlock && !renderMode && !isSlideshowMode) {
       coverWasShowing.current = false;
       hasPlayedOnce.current = true;
@@ -2132,8 +2409,8 @@ function DocPlayerContent({
       );
     }
   }, [isPlaying, coverBlock, renderMode, isSlideshowMode, appearance.coverSlideDuration]);
-  useEffect5(() => () => clearTimeout(coverGraceTimer.current), []);
-  useEffect5(() => () => clearTimeout(tapFeedbackTimer.current), []);
+  useEffect6(() => () => clearTimeout(coverGraceTimer.current), []);
+  useEffect6(() => () => 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);
@@ -2141,29 +2418,29 @@ function DocPlayerContent({
   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);
-  useEffect5(() => {
+  const hasAutoPlayed = useRef6(false);
+  useEffect6(() => {
     hasAutoPlayed.current = false;
   }, [doc]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
       hasAutoPlayed.current = true;
       playWithTimelineMedia();
     }
   }, [isAudioReady, autoPlay, playWithTimelineMedia]);
-  useEffect5(() => {
+  useEffect6(() => {
     onTimeUpdate?.(currentTime);
   }, [currentTime, onTimeUpdate]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isEnded) {
       onEnded?.();
-      if (loop && !isSlideshowMode && !isLinearMode) {
+      if (loop && !isSlideshowMode && !isLinearMode && !isDashboardMode) {
         void restart();
       }
     }
-  }, [isEnded, isLinearMode, isSlideshowMode, loop, onEnded, restart]);
-  const liveRenderAPIRef = useRef5(null);
-  const stableRenderAPIRef = useRef5(null);
+  }, [isEnded, isDashboardMode, isLinearMode, isSlideshowMode, loop, onEnded, restart]);
+  const liveRenderAPIRef = useRef6(null);
+  const stableRenderAPIRef = useRef6(null);
   if (!stableRenderAPIRef.current) {
     const current = () => {
       const api = liveRenderAPIRef.current;
@@ -2184,8 +2461,8 @@ function DocPlayerContent({
     };
   }
   const stableRenderAPI = stableRenderAPIRef.current;
-  useEffect5(() => {
-    if (!renderMode && !isDebugMode) {
+  useEffect6(() => {
+    if (isDashboardMode || !renderMode && !isDebugMode) {
       liveRenderAPIRef.current = null;
       return;
     }
@@ -2311,19 +2588,21 @@ function DocPlayerContent({
     coverBlock,
     doc,
     externalAudioController,
-    waitForRenderCommit
+    waitForRenderCommit,
+    isDashboardMode
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
+    if (isDashboardMode) return;
     if (!renderMode && !isDebugMode || !containerRef.current) {
       onRenderAPIReady?.(null);
       return;
     }
     onRenderAPIReady?.(stableRenderAPI);
     return () => onRenderAPIReady?.(null);
-  }, [renderMode, isDebugMode, onRenderAPIReady, stableRenderAPI]);
+  }, [renderMode, isDebugMode, isDashboardMode, onRenderAPIReady, stableRenderAPI]);
   const defaultMode = captionsEnabledProp === false ? "off" : captionStyle || "standard";
   const [captionMode, setCaptionMode] = useState5(defaultMode);
-  useEffect5(() => {
+  useEffect6(() => {
     setCaptionMode(defaultMode);
   }, [defaultMode]);
   const captionsEnabled = captionMode !== "off";
@@ -2343,8 +2622,8 @@ function DocPlayerContent({
     });
   }, [onCaptionsToggle]);
   const hasCaptions = doc.captions && doc.captions.phrases.length > 0;
-  const segmentTitleMap = useMemo3(() => buildSegmentTitleMap(doc), [doc]);
-  const playbackState = useMemo3(
+  const segmentTitleMap = useMemo4(() => buildSegmentTitleMap(doc), [doc]);
+  const playbackState = useMemo4(
     () => ({
       isPlaying,
       currentTime,
@@ -2387,7 +2666,7 @@ function DocPlayerContent({
       expandedBlocks.length
     ]
   );
-  const playbackActions = useMemo3(
+  const playbackActions = useMemo4(
     () => ({
       toggle: toggleWithTimelineMedia,
       restart,
@@ -2405,7 +2684,7 @@ function DocPlayerContent({
       onFullscreenToggle
     ]
   );
-  const slideNavActions = useMemo3(
+  const slideNavActions = useMemo4(
     () => ({
       nextSlide: () => {
         if (slideshowHasCover && slideshowCoverVisible) {
@@ -2494,10 +2773,10 @@ function DocPlayerContent({
     onNext: handleSwipeNext,
     onPrev: handleSwipePrev
   });
-  useEffect5(() => {
+  useEffect6(() => {
     onPlaybackStateChange?.(playbackState);
   }, [playbackState, onPlaybackStateChange]);
-  useEffect5(() => {
+  useEffect6(() => {
     onControlsReady?.({ play: playWithTimelineMedia, pause, ...playbackActions });
   }, [playWithTimelineMedia, pause, playbackActions, onControlsReady]);
   const getBlockTitle = useCallback4((block) => {
@@ -2524,7 +2803,7 @@ function DocPlayerContent({
     }
     return block.id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
   }, []);
-  const slideshowPickerItems = useMemo3(() => {
+  const slideshowPickerItems = useMemo4(() => {
     const blockItems = expandedBlocks.map((block, index) => ({
       id: block.id,
       label: String(index + 1),
@@ -2540,7 +2819,7 @@ function DocPlayerContent({
       ...blockItems
     ];
   }, [coverBlock, expandedBlocks, getBlockTitle, slideshowHasCover]);
-  const blockMarkers = useMemo3(() => {
+  const blockMarkers = useMemo4(() => {
     if (!totalDuration || !expandedBlocks.length) return [];
     let prevSegment = -1;
     return expandedBlocks.map((block, index) => {
@@ -2555,7 +2834,7 @@ function DocPlayerContent({
       };
     });
   }, [expandedBlocks, totalDuration, getBlockTitle]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (blockMarkers.length > 0) {
       onBlockMarkers?.(blockMarkers);
     }
@@ -2577,7 +2856,7 @@ function DocPlayerContent({
       ) && !isSlideshowToolbarTarget) {
         return;
       }
-      if (isLinearMode) return;
+      if (isLinearMode || isDashboardMode) return;
       if (e.key === "f" || e.key === "F") {
         if (!onFullscreenToggle) return;
         e.preventDefault();
@@ -2629,6 +2908,7 @@ function DocPlayerContent({
     [
       isSlideshowMode,
       isLinearMode,
+      isDashboardMode,
       toggleWithTimelineMedia,
       seekTo,
       slideNavActions,
@@ -2639,16 +2919,16 @@ function DocPlayerContent({
     (e) => handleKeyboardShortcut(e, false),
     [handleKeyboardShortcut]
   );
-  useEffect5(() => {
-    if (!globalKeyboardShortcuts || renderMode || isLinearMode) return;
+  useEffect6(() => {
+    if (!globalKeyboardShortcuts || renderMode || isLinearMode || isDashboardMode) return;
     const handleDocumentKeyDown = (event) => {
       handleKeyboardShortcut(event, true);
     };
     document.addEventListener("keydown", handleDocumentKeyDown);
     return () => document.removeEventListener("keydown", handleDocumentKeyDown);
-  }, [globalKeyboardShortcuts, handleKeyboardShortcut, isLinearMode, renderMode]);
+  }, [globalKeyboardShortcuts, handleKeyboardShortcut, isDashboardMode, isLinearMode, renderMode]);
   if (isLinearMode) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "div",
       {
         ref: containerRef,
@@ -2660,7 +2940,7 @@ function DocPlayerContent({
           height: "100%",
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx8(
           LinearDocView,
           {
             doc,
@@ -2677,7 +2957,41 @@ function DocPlayerContent({
       }
     );
   }
-  return /* @__PURE__ */ jsxs4(
+  if (isDashboardMode) {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        ref: containerRef,
+        "data-player-id": playerId,
+        className: "doc-player doc-player--dashboard",
+        style: {
+          position: "relative",
+          width: "100%",
+          aspectRatio: `${activeViewport.width} / ${activeViewport.height}`,
+          margin: "0 auto",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx8(
+          DashboardView,
+          {
+            doc,
+            theme,
+            viewport: activeViewport,
+            layout: dashboardLayout,
+            showTitle: dashboardShowTitle,
+            style: dashboardStyle,
+            documentTitle: dashboardDocumentTitle,
+            basePath,
+            animationsEnabled,
+            muted: renderMode || muted,
+            renderMode: renderMode || isDebugMode,
+            onRenderAPIReady
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: containerRef,
@@ -2705,8 +3019,8 @@ function DocPlayerContent({
         touchAction: swipeEnabled ? "pan-y" : void 0
       },
       children: [
-        /* @__PURE__ */ jsx7("audio", { ref: audioRef, preload: "auto", muted }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8("audio", { ref: audioRef, preload: "auto", muted }),
+        /* @__PURE__ */ jsx8(
           MediaClipLayer,
           {
             schedule: mediaSchedule,
@@ -2723,8 +3037,8 @@ function DocPlayerContent({
             pipFrameStyle
           }
         ),
-        /* @__PURE__ */ jsxs4("div", { className: "doc-player__viewport", children: [
-          showCoverBlock && coverBlock && /* @__PURE__ */ jsx7("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs5("div", { className: "doc-player__viewport", children: [
+          showCoverBlock && coverBlock && /* @__PURE__ */ jsx8("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx8(
             BlockRenderer,
             {
               block: coverBlock,
@@ -2741,7 +3055,7 @@ function DocPlayerContent({
           // reconciles one block's layers onto another's (templates reuse layer
           // ids like `title`/`background`), which would otherwise reuse stale
           // DOM / skip entrance animations mid-transition.
-          /* @__PURE__ */ jsx7("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx8(
             BlockRenderer,
             {
               block: previousBlock,
@@ -2755,7 +3069,7 @@ function DocPlayerContent({
               theme: effectiveTheme
             }
           ) }, previousBlock.id),
-          currentBlock && /* @__PURE__ */ jsx7(
+          currentBlock && /* @__PURE__ */ jsx8(
             "div",
             {
               className: `doc-player__block doc-player__block--active${swipe.phase !== "idle" ? ` doc-player__block--${swipe.phase}` : ""}`,
@@ -2764,7 +3078,7 @@ function DocPlayerContent({
                 ...swipe.phase !== "idle" ? { transform: `translateX(${swipe.offsetPx}px)` } : {},
                 ...showCoverBlock ? { opacity: 0, pointerEvents: "none" } : {}
               } : void 0,
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 BlockRenderer,
                 {
                   block: currentBlock,
@@ -2781,7 +3095,7 @@ function DocPlayerContent({
             },
             currentBlock.id
           ),
-          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx7(
+          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx8(
             CaptionOverlay,
             {
               captions: doc.captions,
@@ -2793,7 +3107,7 @@ function DocPlayerContent({
               viewport: activeViewport
             }
           ),
-          isDebugMode && /* @__PURE__ */ jsxs4(
+          isDebugMode && /* @__PURE__ */ jsxs5(
             "div",
             {
               className: "doc-player__debug",
@@ -2814,27 +3128,27 @@ function DocPlayerContent({
                 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__ */ jsx8("div", { style: { color: "#ffcc00", fontWeight: "bold", marginBottom: "4px" }, children: "DEBUG MODE" }),
+                /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx8("span", { style: { color: "#888" }, children: "template:" }),
                   " ",
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
+                  /* @__PURE__ */ jsx8("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "block:" }),
+                /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx8("span", { style: { color: "#888" }, children: "block:" }),
                   " ",
                   currentBlockIndex + 1,
                   "/",
                   expandedBlocks.length,
                   " ",
-                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs5("span", { style: { color: "#666" }, children: [
                     "(",
                     currentBlock?.id || "none",
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "time:" }),
+                /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx8("span", { style: { color: "#888" }, children: "time:" }),
                   " ",
                   currentTime.toFixed(2),
                   "s /",
@@ -2842,7 +3156,7 @@ function DocPlayerContent({
                   totalDuration.toFixed(1),
                   "s",
                   " ",
-                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs5("span", { style: { color: "#666" }, children: [
                     "(progress: ",
                     (docProgress * 100).toFixed(1),
                     "%, scriptDur: ",
@@ -2850,8 +3164,8 @@ function DocPlayerContent({
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "blockTime:" }),
+                /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx8("span", { style: { color: "#888" }, children: "blockTime:" }),
                   " ",
                   blockTime.toFixed(2),
                   "s /",
@@ -2859,58 +3173,58 @@ function DocPlayerContent({
                   (currentBlock?.duration || 0).toFixed(1),
                   "s"
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "segment:" }),
+                /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx8("span", { style: { color: "#888" }, children: "segment:" }),
                   " ",
                   currentSegment,
                   "/",
                   doc.audio.segments.length - 1,
                   " ",
-                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs5("span", { style: { color: "#666" }, children: [
                     "(",
                     doc.audio.segments[currentSegment]?.name || "none",
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "viewport:" }),
+                /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx8("span", { style: { color: "#888" }, children: "viewport:" }),
                   " ",
                   activeViewport.name || `${activeViewport.width}x${activeViewport.height}`,
                   " ",
-                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs5("span", { style: { color: "#666" }, children: [
                     "(",
                     activeOrientation,
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "playing:" }),
+                /* @__PURE__ */ jsxs5("div", { children: [
+                  /* @__PURE__ */ jsx8("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)" })
+                  /* @__PURE__ */ jsx8("span", { style: { color: isPlaying ? "#4ade80" : "#f87171" }, children: isPlaying ? "yes" : "no" }),
+                  showCoverBlock && /* @__PURE__ */ jsx8("span", { style: { color: "#60a5fa" }, children: " (cover)" })
                 ] }),
                 hasCaptions && (() => {
                   const debugPhrase = getCaptionAtTime2(doc.captions, currentTime);
                   const debugEnabled = captionsEnabled && (isPlaying || currentTime > 0);
-                  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                    /* @__PURE__ */ jsxs4("div", { children: [
-                      /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "captions:" }),
+                  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                    /* @__PURE__ */ jsxs5("div", { children: [
+                      /* @__PURE__ */ jsx8("span", { style: { color: "#888" }, children: "captions:" }),
                       " ",
                       doc.captions?.phrases.length || 0,
                       " phrases",
                       " ",
-                      /* @__PURE__ */ jsxs4("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
+                      /* @__PURE__ */ jsxs5("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
                         "(",
                         captionsEnabled ? "on" : "off",
                         ")"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs4("div", { children: [
-                      /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "cc.enabled:" }),
+                    /* @__PURE__ */ jsxs5("div", { children: [
+                      /* @__PURE__ */ jsx8("span", { style: { color: "#888" }, children: "cc.enabled:" }),
                       " ",
-                      /* @__PURE__ */ jsx7("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
+                      /* @__PURE__ */ jsx8("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
                       " ",
-                      /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                      /* @__PURE__ */ jsxs5("span", { style: { color: "#666" }, children: [
                         "(playing=",
                         String(isPlaying),
                         " t>0=",
@@ -2918,15 +3232,15 @@ function DocPlayerContent({
                         ")"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs4("div", { children: [
-                      /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "cc.phrase:" }),
+                    /* @__PURE__ */ jsxs5("div", { children: [
+                      /* @__PURE__ */ jsx8("span", { style: { color: "#888" }, children: "cc.phrase:" }),
                       " ",
-                      /* @__PURE__ */ jsx7("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
+                      /* @__PURE__ */ jsx8("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:" }),
+                    debugPhrase && /* @__PURE__ */ jsxs5("div", { children: [
+                      /* @__PURE__ */ jsx8("span", { style: { color: "#888" }, children: "cc.range:" }),
                       " ",
-                      /* @__PURE__ */ jsxs4("span", { style: { color: "#60a5fa" }, children: [
+                      /* @__PURE__ */ jsxs5("span", { style: { color: "#60a5fa" }, children: [
                         debugPhrase.startTime.toFixed(2),
                         "-",
                         debugPhrase.endTime.toFixed(2)
@@ -2938,7 +3252,7 @@ function DocPlayerContent({
             }
           )
         ] }),
-        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs4(
+        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs5(
           "div",
           {
             className: "doc-player__unavailable",
@@ -2959,12 +3273,12 @@ function DocPlayerContent({
               zIndex: 50
             },
             children: [
-              /* @__PURE__ */ jsx7("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
-              /* @__PURE__ */ jsx7("span", { children: unavailableMessage })
+              /* @__PURE__ */ jsx8("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
+              /* @__PURE__ */ jsx8("span", { children: unavailableMessage })
             ]
           }
         ),
-        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx7(
+        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx8(
           DocControlsOverlay,
           {
             state: playbackState,
@@ -2974,7 +3288,7 @@ function DocPlayerContent({
             getBlockTitle
           }
         ),
-        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx7(
+        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx8(
           "div",
           {
             className: "doc-player__scrubber",
@@ -2989,7 +3303,7 @@ function DocPlayerContent({
               alignItems: "center",
               zIndex: 100
             },
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx8(
               DocProgressBar,
               {
                 state: playbackState,
@@ -3001,7 +3315,7 @@ function DocPlayerContent({
             )
           }
         ),
-        !renderMode && isSlideshowMode && showControls && /* @__PURE__ */ jsx7(
+        !renderMode && isSlideshowMode && showControls && /* @__PURE__ */ jsx8(
           DocControlsSlideshow,
           {
             state: playbackState,
@@ -3011,14 +3325,14 @@ function DocPlayerContent({
             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)
+        !isSlideshowMode && tapFeedback && /* @__PURE__ */ jsx8("div", { className: "doc-player__tap-feedback", children: /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 24 24", fill: "white", width: "48", height: "48", children: tapFeedback === "pause" ? /* @__PURE__ */ jsx8("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) : /* @__PURE__ */ jsx8("path", { d: "M8 5v14l11-7z" }) }) }, tapFeedback)
       ]
     }
   );
 }
 
 // src/DocControlsBottom.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function DocControlsBottom({
   state,
   actions,
@@ -3026,32 +3340,32 @@ function DocControlsBottom({
   expandedBlocks,
   getBlockTitle
 }) {
-  return /* @__PURE__ */ jsxs5("div", { className: "doc-controls-bottom", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("div", { className: "doc-controls-bottom", children: [
+    /* @__PURE__ */ jsx9(
       "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" }) })
+        children: /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", 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__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "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" }) })
+        children: state.isPlaying ? /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx9("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx9("path", { d: "M8 5v14l11-7z" }) })
       }
     ),
-    /* @__PURE__ */ jsxs5("span", { className: "bottom-time", children: [
+    /* @__PURE__ */ jsxs6("span", { className: "bottom-time", children: [
       formatTime(state.currentTime),
       " / ",
       formatTime(state.totalDuration)
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       DocProgressBar,
       {
         state,
@@ -3061,92 +3375,92 @@ function DocControlsBottom({
         getBlockTitle
       }
     ),
-    /* @__PURE__ */ jsxs5("span", { className: "bottom-segment", children: [
+    /* @__PURE__ */ jsxs6("span", { className: "bottom-segment", children: [
       state.currentBlockIndex + 1,
       "/",
       state.totalBlocks
     ] }),
-    state.hasCaptions && /* @__PURE__ */ jsx8(
+    state.hasCaptions && /* @__PURE__ */ jsx9(
       "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" }) })
+        children: /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", 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__ */ jsx8(
+    actions.toggleFullscreen && /* @__PURE__ */ jsx9(
       "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" }) })
+        children: state.isFullscreen ? /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", 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: "18", height: "18", children: /* @__PURE__ */ jsx9("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";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function DocControlsSidebar({ state, actions }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "doc-controls-sidebar", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7("div", { className: "doc-controls-sidebar", children: [
+    /* @__PURE__ */ jsx10(
       "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" }) })
+        children: /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx10("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(
+    /* @__PURE__ */ jsx10(
       "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" }) })
+        children: state.isPlaying ? /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx10("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx10("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__ */ jsxs7("div", { className: "sidebar-time", children: [
+      /* @__PURE__ */ jsx10("div", { children: formatTime(state.currentTime) }),
+      /* @__PURE__ */ jsx10("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "sidebar-segment", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "sidebar-segment", children: [
       state.currentBlockIndex + 1,
       "/",
       state.totalBlocks
     ] }),
-    state.hasCaptions && /* @__PURE__ */ jsx9(
+    state.hasCaptions && /* @__PURE__ */ jsx10(
       "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" }) })
+        children: /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx10("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(
+    actions.toggleFullscreen && /* @__PURE__ */ jsx10(
       "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" }) })
+        children: state.isFullscreen ? /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx10("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx10("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
       }
     )
   ] });
 }
 
 // src/DocPlayerWithSidebar.tsx
-import { useRef as useRef6, useState as useState6, useCallback as useCallback5, useEffect as useEffect6 } from "react";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useRef as useRef7, useState as useState6, useCallback as useCallback5, useEffect as useEffect7 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_STATE = {
   isPlaying: false,
   currentTime: 0,
@@ -3178,9 +3492,9 @@ function DocPlayerWithSidebar({
   onPlayingChange,
   theme
 }) {
-  const stateRef = useRef6(DEFAULT_STATE);
-  const actionsRef = useRef6(null);
-  const wasPlayingRef = useRef6(false);
+  const stateRef = useRef7(DEFAULT_STATE);
+  const actionsRef = useRef7(null);
+  const wasPlayingRef = useRef7(false);
   const [, setTick] = useState6(0);
   const handleStateChange = useCallback5(
     (state) => {
@@ -3201,15 +3515,15 @@ function DocPlayerWithSidebar({
     },
     []
   );
-  useEffect6(() => {
+  useEffect7(() => {
     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(
+  return /* @__PURE__ */ jsxs8("div", { className: "doc-player-sidebar-layout", children: [
+    /* @__PURE__ */ jsx11("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx11(
       DocPlayer,
       {
         doc,
@@ -3232,7 +3546,7 @@ function DocPlayerWithSidebar({
         forceViewport
       }
     ) }),
-    actionsRef.current && /* @__PURE__ */ jsx10(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
+    actionsRef.current && /* @__PURE__ */ jsx11(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
   ] });
 }
 
@@ -3245,6 +3559,7 @@ export {
   DocProgressBar,
   DocControlsOverlay,
   DocControlsSlideshow,
+  DashboardView,
   resolveDocPlayerAppearance,
   DocPlayer,
   DocControlsBottom,