@bendyline/squisq-react 2.7.2 → 2.9.0

package/dist/{chunk-KXYE4AGL.js → chunk-2Y7F3S6M.js}

@@ -1,7 +1,7 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-IQGW6SA6.js";
+} from "./chunk-NGQQKH7J.js";
 import {
   useAudioSync,
   useDocPlayback,
@@ -11,6 +11,9 @@ import {
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
+import {
+  MarkdownRenderer
+} from "./chunk-ESI3P77P.js";
 import {
   useMediaProvider,
   useMediaUrl,
@@ -1242,10 +1245,797 @@ 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/FlashcardView.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect5,
+  useMemo as useMemo4,
+  useRef as useRef5,
+  useState as useState4
+} from "react";
+import { resolveFontFamily as resolveFontFamily2, VIEWPORT_PRESETS as VIEWPORT_PRESETS2 } from "@bendyline/squisq/schemas";
+import {
+  materializeBlockLayers,
+  materializeFlashcards,
+  resolvePageBlock,
+  resolveThemeForDoc as resolveThemeForDoc2
+} from "@bendyline/squisq/doc";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var VISUAL_TEMPLATES = /* @__PURE__ */ new Set([
+  "diagram",
+  "tree",
+  "timeline",
+  "map",
+  "drawing",
+  "layout",
+  "barChart",
+  "columnChart",
+  "pieChart",
+  "donutChart",
+  "lineChart",
+  "areaChart",
+  "scatterChart"
+]);
+function resolveVisualBlock(block, theme, viewport, customTemplates) {
+  const resolved = resolvePageBlock(block);
+  const visualTemplate = !!resolved.templateName && (VISUAL_TEMPLATES.has(resolved.templateName) || !!customTemplates?.some((definition) => definition.name === resolved.templateName));
+  if (!visualTemplate) return null;
+  const materializationBlock = resolved.templateBlock ?? block;
+  const { layers, source } = materializeBlockLayers(materializationBlock, {
+    theme,
+    viewport,
+    customTemplates,
+    persistentLayers: false
+  });
+  if (layers.length === 0 || source === "fallback") return null;
+  return { ...materializationBlock, layers };
+}
+function FaceBlock({
+  block,
+  depth,
+  theme,
+  basePath,
+  showCodeCopyButton,
+  onCopyCode,
+  fenceRenderers,
+  viewport,
+  customTemplates
+}) {
+  const Heading = depth === 0 ? "h2" : depth === 1 ? "h3" : "h4";
+  const visualBlock = useMemo4(
+    () => resolveVisualBlock(block, theme, viewport, customTemplates),
+    [block, customTemplates, theme, viewport]
+  );
+  return /* @__PURE__ */ jsxs5("section", { className: "squisq-flashcards__content-block", "data-source-block-id": block.id, children: [
+    !visualBlock && block.title && /* @__PURE__ */ jsx8(Heading, { className: "squisq-flashcards__content-title", children: block.title }),
+    !visualBlock && block.contents && block.contents.length > 0 && /* @__PURE__ */ jsx8(
+      MarkdownRenderer,
+      {
+        nodes: block.contents,
+        theme,
+        showCodeCopyButton,
+        onCopyCode,
+        fenceRenderers
+      }
+    ),
+    (visualBlock || block.layers && block.layers.length > 0) && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "squisq-flashcards__canvas",
+        style: { aspectRatio: `${viewport.width} / ${viewport.height}` },
+        children: /* @__PURE__ */ jsx8(
+          BlockRenderer,
+          {
+            block: visualBlock ?? block,
+            blockTime: Math.max(0, block.duration ?? 0),
+            basePath,
+            viewport,
+            animationsEnabled: false,
+            theme,
+            muted: true
+          }
+        )
+      }
+    ),
+    !visualBlock && block.children?.map((child) => /* @__PURE__ */ jsx8(
+      FaceBlock,
+      {
+        block: child,
+        depth: depth + 1,
+        theme,
+        basePath,
+        showCodeCopyButton,
+        onCopyCode,
+        fenceRenderers,
+        viewport,
+        customTemplates
+      },
+      child.id
+    ))
+  ] });
+}
+function FaceContent(props) {
+  return /* @__PURE__ */ jsx8("div", { className: "squisq-flashcards__face-content", children: props.face.blocks.map((block) => /* @__PURE__ */ jsx8(FaceBlock, { block, depth: 0, ...props }, block.id)) });
+}
+function FlashcardFaceView(props) {
+  return /* @__PURE__ */ jsx8(FaceContent, { ...props, viewport: props.viewport ?? VIEWPORT_PRESETS2.landscape });
+}
+function hashSeed(value) {
+  let hash = 2166136261;
+  for (let index = 0; index < value.length; index++) {
+    hash ^= value.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function shuffled(values, seed) {
+  const result = [...values];
+  let state = hashSeed(seed) || 1;
+  const random = () => {
+    state += 1831565813;
+    let next = state;
+    next = Math.imul(next ^ next >>> 15, next | 1);
+    next ^= next + Math.imul(next ^ next >>> 7, next | 61);
+    return ((next ^ next >>> 14) >>> 0) / 4294967296;
+  };
+  for (let index = result.length - 1; index > 0; index--) {
+    const other = Math.floor(random() * (index + 1));
+    [result[index], result[other]] = [result[other], result[index]];
+  }
+  return result;
+}
+function ChoiceContent(props) {
+  return /* @__PURE__ */ jsx8(FaceContent, { ...props, face: props.choice.content });
+}
+function isInteractiveTarget(target) {
+  return target instanceof Element && !!target.closest('button, a, input, select, textarea, [contenteditable="true"]');
+}
+function FlashcardView({
+  doc,
+  theme,
+  basePath = ".",
+  source = "auto",
+  shuffle: initialShuffle = false,
+  globalKeyboardShortcuts = false,
+  showCodeCopyButton = false,
+  onCopyCode,
+  fenceRenderers,
+  viewport = VIEWPORT_PRESETS2.landscape,
+  className
+}) {
+  const activeTheme = useMemo4(() => theme ?? resolveThemeForDoc2(doc), [doc, theme]);
+  const deck = useMemo4(() => materializeFlashcards(doc, { source }), [doc, source]);
+  const [shuffleEnabled, setShuffleEnabled] = useState4(initialShuffle);
+  const [sessionSeed, setSessionSeed] = useState4(1);
+  const [cardIndex, setCardIndex] = useState4(0);
+  const [revealed, setRevealed] = useState4(false);
+  const [selectedChoiceId, setSelectedChoiceId] = useState4(null);
+  const [ratings, setRatings] = useState4({});
+  const [retryIds, setRetryIds] = useState4(null);
+  const cardViewportRef = useRef5(null);
+  const orderedCards = useMemo4(
+    () => shuffleEnabled ? shuffled(deck.cards, `${doc.articleId}:${sessionSeed}`) : [...deck.cards],
+    [deck.cards, doc.articleId, sessionSeed, shuffleEnabled]
+  );
+  const sessionCards = useMemo4(
+    () => retryIds ? retryIds.map((id) => orderedCards.find((card) => card.id === id)).filter((card) => !!card) : orderedCards,
+    [orderedCards, retryIds]
+  );
+  const currentCard = sessionCards[cardIndex];
+  const finished = sessionCards.length > 0 && cardIndex >= sessionCards.length;
+  const resetPosition = useCallback3(() => {
+    setCardIndex(0);
+    setRevealed(false);
+    setSelectedChoiceId(null);
+  }, []);
+  const restart = useCallback3(() => {
+    setRatings({});
+    setRetryIds(null);
+    resetPosition();
+    setSessionSeed((seed) => seed + 1);
+  }, [resetPosition]);
+  useEffect5(() => {
+    setRatings({});
+    setRetryIds(null);
+    resetPosition();
+  }, [deck, resetPosition]);
+  useEffect5(() => {
+    if (cardViewportRef.current) cardViewportRef.current.scrollTop = 0;
+  }, [cardIndex, retryIds]);
+  const revealAnswer = useCallback3(() => {
+    if (!currentCard) return;
+    setRevealed(true);
+    if (currentCard.kind === "multiple-choice" && selectedChoiceId === null) {
+      setRatings((current) => ({ ...current, [currentCard.id]: "again" }));
+    }
+  }, [currentCard, selectedChoiceId]);
+  const nextCard = useCallback3(() => {
+    if (!currentCard) return;
+    if (!revealed) {
+      revealAnswer();
+      return;
+    }
+    setCardIndex((index) => index + 1);
+    setRevealed(false);
+    setSelectedChoiceId(null);
+  }, [currentCard, revealAnswer, revealed]);
+  const previousCard = useCallback3(() => {
+    if (finished) {
+      setCardIndex(Math.max(0, sessionCards.length - 1));
+      setRevealed(true);
+      return;
+    }
+    if (revealed) {
+      setRevealed(false);
+      setSelectedChoiceId(null);
+      return;
+    }
+    if (cardIndex > 0) {
+      setCardIndex((index) => index - 1);
+      setRevealed(true);
+      setSelectedChoiceId(null);
+    }
+  }, [cardIndex, finished, revealed, sessionCards.length]);
+  const choose = useCallback3(
+    (choice) => {
+      if (!currentCard || revealed) return;
+      setSelectedChoiceId(choice.id);
+      setRevealed(true);
+      setRatings((current) => ({
+        ...current,
+        [currentCard.id]: choice.correct ? "got-it" : "again"
+      }));
+    },
+    [currentCard, revealed]
+  );
+  const rate = useCallback3(
+    (rating) => {
+      if (!currentCard) return;
+      setRatings((current) => ({ ...current, [currentCard.id]: rating }));
+      setCardIndex((index) => index + 1);
+      setRevealed(false);
+      setSelectedChoiceId(null);
+    },
+    [currentCard]
+  );
+  const handleShortcut = useCallback3(
+    (event) => {
+      if (event.defaultPrevented || isInteractiveTarget(event.target)) return;
+      if (/^[1-9]$/.test(event.key) && currentCard?.kind === "multiple-choice" && !revealed) {
+        const choice = currentCard.choices?.[Number(event.key) - 1];
+        if (choice) {
+          event.preventDefault();
+          choose(choice);
+        }
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        previousCard();
+      } else if (event.key === "ArrowRight" || event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        nextCard();
+      }
+    },
+    [choose, currentCard, nextCard, previousCard, revealed]
+  );
+  useEffect5(() => {
+    if (!globalKeyboardShortcuts) return;
+    const listener = (event) => handleShortcut(event);
+    document.addEventListener("keydown", listener);
+    return () => document.removeEventListener("keydown", listener);
+  }, [globalKeyboardShortcuts, handleShortcut]);
+  const faceProps = {
+    theme: activeTheme,
+    basePath,
+    showCodeCopyButton,
+    onCopyCode,
+    fenceRenderers,
+    viewport,
+    customTemplates: doc.customTemplates
+  };
+  const titleFont = resolveFontFamily2(activeTheme.typography.titleFont, "Georgia, serif");
+  const bodyFont = resolveFontFamily2(activeTheme.typography.bodyFont, "system-ui, sans-serif");
+  const rootStyle = {
+    "--squisq-flashcards-bg": activeTheme.colors.background,
+    "--squisq-flashcards-surface": activeTheme.colors.backgroundLight,
+    "--squisq-flashcards-text": activeTheme.colors.text,
+    "--squisq-flashcards-muted": activeTheme.colors.textMuted,
+    "--squisq-flashcards-primary": activeTheme.colors.primary,
+    "--squisq-flashcards-secondary": activeTheme.colors.secondary,
+    "--squisq-flashcards-highlight": activeTheme.colors.highlight,
+    "--squisq-flashcards-warning": activeTheme.colors.warning,
+    "--squisq-flashcards-radius": `${activeTheme.style.borderRadius ?? 18}px`,
+    "--squisq-flashcards-title-font": titleFont,
+    "--squisq-flashcards-body-font": bodyFont
+  };
+  const missedIds = deck.cards.filter((card) => ratings[card.id] === "again").map((card) => card.id);
+  const gotItCount = deck.cards.filter((card) => ratings[card.id] === "got-it").length;
+  if (deck.cards.length === 0) {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: `squisq-flashcards squisq-flashcards--empty${className ? ` ${className}` : ""}`,
+        style: rootStyle,
+        role: "region",
+        "aria-label": "Flashcards",
+        children: /* @__PURE__ */ jsxs5("div", { className: "squisq-flashcards__empty-card", children: [
+          /* @__PURE__ */ jsx8("h2", { children: "No complete flashcards yet" }),
+          /* @__PURE__ */ jsx8("p", { children: "Add an answer beneath a heading, or nest an answer block under a question." }),
+          deck.diagnostics.length > 0 && /* @__PURE__ */ jsx8("ul", { children: deck.diagnostics.map((diagnostic, index) => /* @__PURE__ */ jsx8("li", { children: diagnostic.message }, `${diagnostic.blockId}-${diagnostic.code}-${index}`)) })
+        ] })
+      }
+    );
+  }
+  if (finished) {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: `squisq-flashcards${className ? ` ${className}` : ""}`,
+        style: rootStyle,
+        role: "region",
+        "aria-label": "Flashcard session summary",
+        tabIndex: 0,
+        onKeyDown: globalKeyboardShortcuts ? void 0 : handleShortcut,
+        children: /* @__PURE__ */ jsxs5("div", { className: "squisq-flashcards__summary", children: [
+          /* @__PURE__ */ jsx8("span", { className: "squisq-flashcards__eyebrow", children: "Session complete" }),
+          /* @__PURE__ */ jsxs5("h2", { children: [
+            gotItCount,
+            " remembered"
+          ] }),
+          /* @__PURE__ */ jsx8("p", { children: missedIds.length === 0 ? `You completed all ${deck.cards.length} cards.` : `${missedIds.length} ${missedIds.length === 1 ? "card needs" : "cards need"} another look.` }),
+          /* @__PURE__ */ jsxs5("div", { className: "squisq-flashcards__summary-actions", children: [
+            missedIds.length > 0 && /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "squisq-flashcards__button squisq-flashcards__button--primary",
+                onClick: () => {
+                  setRetryIds(missedIds);
+                  resetPosition();
+                },
+                children: "Retry missed"
+              }
+            ),
+            /* @__PURE__ */ jsx8("button", { type: "button", className: "squisq-flashcards__button", onClick: restart, children: "Study again" }),
+            /* @__PURE__ */ jsx8("button", { type: "button", className: "squisq-flashcards__button", onClick: previousCard, children: "Previous card" })
+          ] })
+        ] })
+      }
+    );
+  }
+  const choices = currentCard?.choices ? shuffled(currentCard.choices, `${currentCard.id}:${sessionSeed}`) : [];
+  const selectedChoice = choices.find((choice) => choice.id === selectedChoiceId);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `squisq-flashcards${className ? ` ${className}` : ""}`,
+      style: rootStyle,
+      role: "region",
+      "aria-label": "Flashcards",
+      tabIndex: 0,
+      onKeyDown: globalKeyboardShortcuts ? void 0 : handleShortcut,
+      children: [
+        /* @__PURE__ */ jsxs5("header", { className: "squisq-flashcards__header", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "squisq-flashcards__deck-copy", children: [
+            /* @__PURE__ */ jsx8("span", { className: "squisq-flashcards__eyebrow", children: "Flashcards" }),
+            deck.title && /* @__PURE__ */ jsx8("h1", { children: deck.title })
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "squisq-flashcards__tools", children: [
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "squisq-flashcards__tool",
+                "aria-pressed": shuffleEnabled,
+                onClick: () => {
+                  setShuffleEnabled((enabled) => !enabled);
+                  restart();
+                },
+                children: "Shuffle"
+              }
+            ),
+            /* @__PURE__ */ jsx8("button", { type: "button", className: "squisq-flashcards__tool", onClick: restart, children: "Restart" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { className: "squisq-flashcards__progress-row", children: [
+          /* @__PURE__ */ jsxs5("span", { children: [
+            "Card ",
+            cardIndex + 1,
+            " of ",
+            sessionCards.length
+          ] }),
+          /* @__PURE__ */ jsx8("span", { children: revealed ? "Answer revealed" : "Question" })
+        ] }),
+        /* @__PURE__ */ jsx8("div", { className: "squisq-flashcards__progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx8(
+          "span",
+          {
+            style: { width: `${(cardIndex + (revealed ? 1 : 0)) / sessionCards.length * 100}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs5(
+          "main",
+          {
+            ref: cardViewportRef,
+            className: "squisq-flashcards__card",
+            "data-card-kind": currentCard.kind,
+            "aria-label": "Scrollable flashcard content",
+            tabIndex: 0,
+            children: [
+              currentCard.label && /* @__PURE__ */ jsx8("div", { className: "squisq-flashcards__label", children: currentCard.label }),
+              /* @__PURE__ */ jsx8("section", { className: "squisq-flashcards__front", "aria-label": "Question", children: /* @__PURE__ */ jsx8(FaceContent, { ...faceProps, face: currentCard.front }) }),
+              currentCard.kind === "multiple-choice" && /* @__PURE__ */ jsx8("div", { className: "squisq-flashcards__choices", role: "group", "aria-label": "Answer choices", children: choices.map((choice, index) => {
+                const selected = selectedChoiceId === choice.id;
+                const status = revealed ? choice.correct ? "correct" : selected ? "incorrect" : "idle" : "idle";
+                return /* @__PURE__ */ jsxs5(
+                  "button",
+                  {
+                    type: "button",
+                    className: "squisq-flashcards__choice",
+                    "data-choice-status": status,
+                    "aria-pressed": selected,
+                    disabled: revealed,
+                    onClick: () => choose(choice),
+                    children: [
+                      /* @__PURE__ */ jsx8("span", { className: "squisq-flashcards__choice-key", "aria-hidden": "true", children: index + 1 }),
+                      /* @__PURE__ */ jsx8(ChoiceContent, { ...faceProps, choice })
+                    ]
+                  },
+                  choice.id
+                );
+              }) }),
+              revealed && currentCard.kind === "basic" && /* @__PURE__ */ jsxs5("section", { className: "squisq-flashcards__answer", "aria-label": "Answer", children: [
+                /* @__PURE__ */ jsx8("span", { className: "squisq-flashcards__answer-label", children: "Answer" }),
+                /* @__PURE__ */ jsx8(FaceContent, { ...faceProps, face: currentCard.back })
+              ] }),
+              revealed && currentCard.kind === "multiple-choice" && /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  className: "squisq-flashcards__feedback",
+                  "data-correct": selectedChoice?.correct === true,
+                  "aria-live": "polite",
+                  children: [
+                    /* @__PURE__ */ jsx8("strong", { children: selectedChoice === void 0 ? "Answer revealed" : selectedChoice.correct ? "Correct" : "Not quite" }),
+                    !selectedChoice?.correct && /* @__PURE__ */ jsxs5("div", { className: "squisq-flashcards__correct-answer", children: [
+                      /* @__PURE__ */ jsx8("span", { children: "The correct answer is" }),
+                      /* @__PURE__ */ jsx8(FaceContent, { ...faceProps, face: currentCard.back })
+                    ] })
+                  ]
+                }
+              ),
+              revealed && currentCard.explanation && /* @__PURE__ */ jsxs5("section", { className: "squisq-flashcards__explanation", "aria-label": "Explanation", children: [
+                /* @__PURE__ */ jsx8("span", { className: "squisq-flashcards__answer-label", children: "Explanation" }),
+                /* @__PURE__ */ jsx8(FaceContent, { ...faceProps, face: currentCard.explanation })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs5("footer", { className: "squisq-flashcards__footer", children: [
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              className: "squisq-flashcards__button",
+              disabled: cardIndex === 0 && !revealed,
+              onClick: previousCard,
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsx8("div", { className: "squisq-flashcards__primary-actions", children: revealed && currentCard.kind === "basic" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "squisq-flashcards__button",
+                onClick: () => rate("again"),
+                children: "Again"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "squisq-flashcards__button squisq-flashcards__button--primary",
+                onClick: () => rate("got-it"),
+                children: "Got it"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              className: "squisq-flashcards__button squisq-flashcards__button--primary",
+              onClick: nextCard,
+              children: revealed ? cardIndex === sessionCards.length - 1 ? "Finish" : "Next card" : "Reveal answer"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs5("p", { className: "squisq-flashcards__shortcut-hint", children: [
+          "Use \u2190 and \u2192 to navigate, Space to reveal",
+          currentCard.kind === "multiple-choice" ? ", or 1\u20139 to answer" : "",
+          "."
+        ] })
+      ]
+    }
+  );
+}
+
 // src/docPlayer/playerAppearance.ts
 import {
   resolveCoverSlideSettings,
-  resolveThemeForDoc
+  resolveThemeForDoc as resolveThemeForDoc3
 } from "@bendyline/squisq/doc";
 function readFrontmatterSetting(frontmatter, canonical, legacy) {
   if (!frontmatter) return void 0;
@@ -1303,7 +2093,7 @@ function resolveDocPlayerAppearance(doc, overrides = {}) {
     ...overrides.coverSlidePlayback !== void 0 ? { playback: overrides.coverSlidePlayback } : {}
   });
   return {
-    theme: overrides.theme ?? resolveThemeForDoc(doc),
+    theme: overrides.theme ?? resolveThemeForDoc3(doc),
     videoPresentation: overrides.videoPresentation ?? resolveVideoPresentation(
       readFrontmatterSetting(frontmatter, "squisq-video-presentation", "video-presentation")
     ) ?? "background",
@@ -1321,14 +2111,14 @@ function resolveDocPlayerAppearance(doc, overrides = {}) {
 
 // src/DocPlayer.tsx
 import {
-  Fragment as Fragment2,
+  Fragment as Fragment4,
   useId as useId2,
-  useRef as useRef5,
-  useState as useState5,
-  useEffect as useEffect5,
+  useRef as useRef7,
+  useState as useState6,
+  useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect2,
-  useCallback as useCallback4,
-  useMemo as useMemo3
+  useCallback as useCallback5,
+  useMemo as useMemo5
 } from "react";
 import { flushSync } from "react-dom";
 import {
@@ -1340,7 +2130,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 useCallback4, useEffect as useEffect6, useRef as useRef6, useState as useState5 } from "react";
 var DISTANCE_RATIO = 0.3;
 var FLICK_VELOCITY = 0.5;
 var MIN_FLICK_DISTANCE = 12;
@@ -1364,16 +2154,16 @@ function decideSwipe({
 }
 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 [offsetPx, setOffsetPx] = useState5(0);
+  const [phase, setPhase] = useState5("idle");
+  const optsRef = useRef6(opts);
   optsRef.current = opts;
-  const dragRef = useRef4(null);
-  const phaseRef = useRef4("idle");
+  const dragRef = useRef6(null);
+  const phaseRef = useRef6("idle");
   phaseRef.current = phase;
-  const settleTimer = useRef4(null);
-  const settleRaf = useRef4(null);
-  const clearPending = useCallback3(() => {
+  const settleTimer = useRef6(null);
+  const settleRaf = useRef6(null);
+  const clearPending = useCallback4(() => {
     if (settleTimer.current != null) {
       clearTimeout(settleTimer.current);
       settleTimer.current = null;
@@ -1383,7 +2173,7 @@ function useSlideSwipe(opts) {
       settleRaf.current = null;
     }
   }, []);
-  const onPointerDown = useCallback3((e) => {
+  const onPointerDown = useCallback4((e) => {
     const o = optsRef.current;
     if (!o.enabled) return;
     if (phaseRef.current === "settling") return;
@@ -1403,7 +2193,7 @@ function useSlideSwipe(opts) {
     setPhase("dragging");
     setOffsetPx(0);
   }, []);
-  useEffect4(() => {
+  useEffect6(() => {
     function currentWidth() {
       return optsRef.current.containerRef.current?.getBoundingClientRect().width ?? 0;
     }
@@ -1473,7 +2263,7 @@ function useSlideSwipe(opts) {
       window.removeEventListener("pointercancel", onCancel);
     };
   }, [settleMs]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!opts.enabled) {
       dragRef.current = null;
       clearPending();
@@ -1481,7 +2271,7 @@ function useSlideSwipe(opts) {
       setOffsetPx(0);
     }
   }, [opts.enabled, clearPending]);
-  useEffect4(() => clearPending, [clearPending]);
+  useEffect6(() => clearPending, [clearPending]);
   return { offsetPx, phase, onPointerDown };
 }
 
@@ -1490,7 +2280,7 @@ import {
   expandCoverBlock,
   createTemplateContext,
   markdownToDoc,
-  VIEWPORT_PRESETS
+  VIEWPORT_PRESETS as VIEWPORT_PRESETS3
 } from "@bendyline/squisq/doc";
 import { parseMarkdown } from "@bendyline/squisq/markdown";
 
@@ -1780,7 +2570,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 jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function isDevEnvironment() {
   try {
     return typeof process !== "undefined" && process.env.NODE_ENV !== "production";
@@ -1812,15 +2602,30 @@ function waitForVisualUpdate() {
 }
 function DocPlayer(props) {
   const { doc, markdown } = props;
-  const markdownDoc = useMemo3(
+  const markdownDoc = useMemo5(
     () => !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__ */ jsx9("div", { className: "doc-player doc-player--empty" });
   }
-  return /* @__PURE__ */ jsx7(DocPlayerContent, { ...props, doc: resolvedDoc });
+  if (props.displayMode === "flashcards") {
+    return /* @__PURE__ */ jsx9("div", { className: "doc-player doc-player--flashcards", children: /* @__PURE__ */ jsx9(
+      FlashcardView,
+      {
+        doc: resolvedDoc,
+        basePath: props.basePath,
+        theme: props.theme,
+        globalKeyboardShortcuts: props.globalKeyboardShortcuts,
+        showCodeCopyButton: props.showCodeCopyButton,
+        onCopyCode: props.onCopyCode,
+        fenceRenderers: props.fenceRenderers,
+        viewport: props.forceViewport
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx9(DocPlayerContent, { ...props, doc: resolvedDoc });
 }
 function DocPlayerContent({
   doc,
@@ -1846,6 +2651,10 @@ function DocPlayerContent({
   onBlockMarkers,
   forceViewport,
   displayMode = "video",
+  dashboardLayout,
+  dashboardShowTitle,
+  dashboardStyle,
+  dashboardDocumentTitle,
   showCoverSlide,
   coverSlideTemplate,
   coverSlideDuration,
@@ -1866,20 +2675,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 = useRef7(null);
+  const containerRef = useRef7(null);
   const playerId = `squisq-player-${useId2().replace(/:/g, "")}`;
-  const [tapFeedback, setTapFeedback] = useState5(null);
-  const tapFeedbackTimer = useRef5();
+  const [tapFeedback, setTapFeedback] = useState6(null);
+  const tapFeedbackTimer = useRef7();
   const { viewport } = useViewportOrientation();
-  const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS.landscape : viewport);
+  const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS3.landscape : viewport);
   const activeOrientation = activeViewport.height > activeViewport.width ? "portrait" : "landscape";
-  const isDebugMode = useMemo3(() => {
+  const isDebugMode = useMemo5(() => {
     if (typeof window === "undefined") return false;
     const params = new URLSearchParams(window.location.search);
     return params.get("debug") === "true";
   }, []);
-  const syntheticDuration = useMemo3(
+  const syntheticDuration = useMemo5(
     () => audioMode === "synthetic" ? getDocPlaybackDuration(doc) : 0,
     [audioMode, doc]
   );
@@ -1892,7 +2702,7 @@ function DocPlayerContent({
     syntheticDuration
   );
   const audio = externalAudioController || internalAudio;
-  useEffect5(() => {
+  useEffect7(() => {
     if (warnedMissingStyles || !isDevEnvironment()) return;
     const el = containerRef.current;
     if (!el || typeof getComputedStyle !== "function") return;
@@ -1920,16 +2730,16 @@ function DocPlayerContent({
     skipToSegment: _skipToSegment,
     restart
   } = audio;
-  const [renderClock, setRenderClock] = useState5(null);
+  const [renderClock, setRenderClock] = useState6(null);
   const renderTimeOverride = renderClock?.doc === doc ? renderClock.time : null;
   const currentTime = renderMode ? renderTimeOverride ?? audioCurrentTime : audioCurrentTime;
-  const rawSchedule = useMemo3(() => resolveMediaSchedule(doc), [doc]);
+  const rawSchedule = useMemo5(() => resolveMediaSchedule(doc), [doc]);
   const clipDurations = useMediaClipDurations(rawSchedule, basePath);
-  const mediaSchedule = useMemo3(
+  const mediaSchedule = useMemo5(
     () => resolveMediaSchedule(doc, { intrinsicDuration: (clip) => clipDurations.get(clip.src) }),
     [doc, clipDurations]
   );
-  const startActiveTimelineMedia = useCallback4(() => {
+  const startActiveTimelineMedia = useCallback5(() => {
     if (renderMode) return;
     const root = containerRef.current;
     if (!root) return;
@@ -1942,21 +2752,21 @@ function DocPlayerContent({
       });
     });
   }, [renderMode]);
-  const playWithTimelineMedia = useCallback4(() => {
+  const playWithTimelineMedia = useCallback5(() => {
     startActiveTimelineMedia();
     return play();
   }, [play, startActiveTimelineMedia]);
-  const toggleWithTimelineMedia = useCallback4(() => {
+  const toggleWithTimelineMedia = useCallback5(() => {
     if (!isPlaying) startActiveTimelineMedia();
     return toggle();
   }, [isPlaying, startActiveTimelineMedia, toggle]);
-  const currentTimeRef = useRef5(currentTime);
+  const currentTimeRef = useRef7(currentTime);
   currentTimeRef.current = currentTime;
-  const committedRenderTimeRef = useRef5(currentTime);
-  const renderCommitWaitersRef = useRef5([]);
-  const totalDurationRef = useRef5(totalDuration);
+  const committedRenderTimeRef = useRef7(currentTime);
+  const renderCommitWaitersRef = useRef7([]);
+  const totalDurationRef = useRef7(totalDuration);
   totalDurationRef.current = totalDuration;
-  const expandedBlocksLenRef = useRef5(0);
+  const expandedBlocksLenRef = useRef7(0);
   useLayoutEffect2(() => {
     committedRenderTimeRef.current = currentTime;
     const pending = renderCommitWaitersRef.current;
@@ -1966,14 +2776,14 @@ function DocPlayerContent({
       return false;
     });
   }, [currentTime]);
-  useEffect5(
+  useEffect7(
     () => () => {
       const error = new Error("DocPlayer unmounted before the requested frame committed.");
       renderCommitWaitersRef.current.splice(0).forEach((waiter) => waiter.reject(error));
     },
     []
   );
-  const waitForRenderCommit = useCallback4((time) => {
+  const waitForRenderCommit = useCallback5((time) => {
     if (Math.abs(committedRenderTimeRef.current - time) <= RENDER_TIME_EPSILON_SECONDS) {
       return Promise.resolve();
     }
@@ -1981,7 +2791,7 @@ function DocPlayerContent({
       renderCommitWaitersRef.current.push({ time, resolve, reject });
     });
   }, []);
-  const handleContainerClick = useCallback4(
+  const handleContainerClick = useCallback5(
     (e) => {
       if (renderMode || isLinearMode) return;
       const target = e.target;
@@ -2006,7 +2816,7 @@ function DocPlayerContent({
   );
   const autoSurface = useAutoSurface(surface === "auto");
   const resolvedSurface = surface === "auto" ? autoSurface : surface;
-  const appearance = useMemo3(
+  const appearance = useMemo5(
     () => resolveDocPlayerAppearance(doc, {
       theme,
       videoPresentation,
@@ -2031,13 +2841,13 @@ function DocPlayerContent({
       coverSlidePlayback
     ]
   );
-  const effectiveTheme = useMemo3(() => {
+  const effectiveTheme = useMemo5(() => {
     const base = appearance.theme;
     return resolvedSurface ? applySurface(base, resolvedSurface) : base;
   }, [appearance.theme, resolvedSurface]);
-  const resolvedPipStyle = useMemo3(() => pipStyleVars(effectiveTheme), [effectiveTheme]);
+  const resolvedPipStyle = useMemo5(() => pipStyleVars(effectiveTheme), [effectiveTheme]);
   const pipVars = resolvedPipStyle;
-  const pipFrameStyle = useMemo3(
+  const pipFrameStyle = useMemo5(
     () => ({
       border: resolvedPipStyle["--squisq-pip-border"],
       borderRadius: resolvedPipStyle["--squisq-pip-radius"],
@@ -2067,7 +2877,7 @@ function DocPlayerContent({
     // remove authored slides from the default loss-averse projection.
     useAudioSegmentTiming: audioMode !== "synthetic"
   });
-  const coverBlock = useMemo3(() => {
+  const coverBlock = useMemo5(() => {
     const startBlockConfig = doc.startBlock;
     if (!appearance.showCoverSlide) return null;
     if (!startBlockConfig) return null;
@@ -2090,13 +2900,13 @@ function DocPlayerContent({
     appearance.coverSlideTemplate
   ]);
   const hasManagedCover = !!coverBlock;
-  const [slideshowCoverVisible, setSlideshowCoverVisible] = useState5(false);
-  const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState5(false);
-  const slideshowCoverInitKeyRef = useRef5("");
-  useEffect5(() => {
+  const [slideshowCoverVisible, setSlideshowCoverVisible] = useState6(false);
+  const [isSlideshowPickerOpen, setIsSlideshowPickerOpen] = useState6(false);
+  const slideshowCoverInitKeyRef = useRef7("");
+  useEffect7(() => {
     slideshowCoverInitKeyRef.current = "";
   }, [doc]);
-  useEffect5(() => {
+  useEffect7(() => {
     const initKey = `${isSlideshowMode}:${hasManagedCover}:${renderMode}`;
     if (slideshowCoverInitKeyRef.current === initKey) return;
     slideshowCoverInitKeyRef.current = initKey;
@@ -2107,12 +2917,12 @@ function DocPlayerContent({
       setSlideshowCoverVisible(false);
     }
   }, [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 [coverForced, setCoverForced] = useState6(false);
+  const [coverGraceActive, setCoverGraceActive] = useState6(false);
+  const coverGraceTimer = useRef7();
+  const coverWasShowing = useRef7(false);
+  const hasPlayedOnce = useRef7(false);
+  useEffect7(() => {
     hasPlayedOnce.current = false;
     coverWasShowing.current = false;
     clearTimeout(coverGraceTimer.current);
@@ -2121,7 +2931,7 @@ function DocPlayerContent({
   }, [doc]);
   const atRest = !!(coverBlock && !isSlideshowMode && !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
   if (atRest) coverWasShowing.current = true;
-  useEffect5(() => {
+  useEffect7(() => {
     if (isPlaying && coverWasShowing.current && coverBlock && !renderMode && !isSlideshowMode) {
       coverWasShowing.current = false;
       hasPlayedOnce.current = true;
@@ -2132,8 +2942,8 @@ function DocPlayerContent({
       );
     }
   }, [isPlaying, coverBlock, renderMode, isSlideshowMode, appearance.coverSlideDuration]);
-  useEffect5(() => () => clearTimeout(coverGraceTimer.current), []);
-  useEffect5(() => () => clearTimeout(tapFeedbackTimer.current), []);
+  useEffect7(() => () => clearTimeout(coverGraceTimer.current), []);
+  useEffect7(() => () => 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 +2951,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 = useRef7(false);
+  useEffect7(() => {
     hasAutoPlayed.current = false;
   }, [doc]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
       hasAutoPlayed.current = true;
       playWithTimelineMedia();
     }
   }, [isAudioReady, autoPlay, playWithTimelineMedia]);
-  useEffect5(() => {
+  useEffect7(() => {
     onTimeUpdate?.(currentTime);
   }, [currentTime, onTimeUpdate]);
-  useEffect5(() => {
+  useEffect7(() => {
     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 = useRef7(null);
+  const stableRenderAPIRef = useRef7(null);
   if (!stableRenderAPIRef.current) {
     const current = () => {
       const api = liveRenderAPIRef.current;
@@ -2184,8 +2994,8 @@ function DocPlayerContent({
     };
   }
   const stableRenderAPI = stableRenderAPIRef.current;
-  useEffect5(() => {
-    if (!renderMode && !isDebugMode) {
+  useEffect7(() => {
+    if (isDashboardMode || !renderMode && !isDebugMode) {
       liveRenderAPIRef.current = null;
       return;
     }
@@ -2311,31 +3121,33 @@ function DocPlayerContent({
     coverBlock,
     doc,
     externalAudioController,
-    waitForRenderCommit
+    waitForRenderCommit,
+    isDashboardMode
   ]);
-  useEffect5(() => {
+  useEffect7(() => {
+    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(() => {
+  const [captionMode, setCaptionMode] = useState6(defaultMode);
+  useEffect7(() => {
     setCaptionMode(defaultMode);
   }, [defaultMode]);
   const captionsEnabled = captionMode !== "off";
   const activeCaptionStyle = captionMode === "social" ? "social" : "standard";
-  const setCaptionsEnabled = useCallback4(
+  const setCaptionsEnabled = useCallback5(
     (enabled) => {
       setCaptionMode(enabled ? captionStyle || "standard" : "off");
       onCaptionsToggle?.(enabled);
     },
     [onCaptionsToggle, captionStyle]
   );
-  const cycleCaptionMode = useCallback4(() => {
+  const cycleCaptionMode = useCallback5(() => {
     setCaptionMode((prev) => {
       const next = prev === "off" ? "standard" : prev === "standard" ? "social" : "off";
       onCaptionsToggle?.(next !== "off");
@@ -2343,8 +3155,8 @@ function DocPlayerContent({
     });
   }, [onCaptionsToggle]);
   const hasCaptions = doc.captions && doc.captions.phrases.length > 0;
-  const segmentTitleMap = useMemo3(() => buildSegmentTitleMap(doc), [doc]);
-  const playbackState = useMemo3(
+  const segmentTitleMap = useMemo5(() => buildSegmentTitleMap(doc), [doc]);
+  const playbackState = useMemo5(
     () => ({
       isPlaying,
       currentTime,
@@ -2387,7 +3199,7 @@ function DocPlayerContent({
       expandedBlocks.length
     ]
   );
-  const playbackActions = useMemo3(
+  const playbackActions = useMemo5(
     () => ({
       toggle: toggleWithTimelineMedia,
       restart,
@@ -2405,7 +3217,7 @@ function DocPlayerContent({
       onFullscreenToggle
     ]
   );
-  const slideNavActions = useMemo3(
+  const slideNavActions = useMemo5(
     () => ({
       nextSlide: () => {
         if (slideshowHasCover && slideshowCoverVisible) {
@@ -2470,7 +3282,7 @@ function DocPlayerContent({
     [currentBlockIndex, expandedBlocks, seekTo, pause, slideshowHasCover, slideshowCoverVisible]
   );
   const swipeEnabled = isSlideshowMode && !isLinearMode && !renderMode && enableSwipe;
-  const armContextFreeSwipeEntry = useCallback4(
+  const armContextFreeSwipeEntry = useCallback5(
     (destinationSlideIndex) => {
       const destinationBlockIndex = destinationSlideIndex - (slideshowHasCover ? 1 : 0);
       const destinationBlock = expandedBlocks[destinationBlockIndex];
@@ -2478,11 +3290,11 @@ function DocPlayerContent({
     },
     [expandedBlocks, slideshowHasCover, suppressOutgoingForNextBlock]
   );
-  const handleSwipeNext = useCallback4(() => {
+  const handleSwipeNext = useCallback5(() => {
     armContextFreeSwipeEntry(slideshowSlideIndex + 1);
     slideNavActions.nextSlide();
   }, [armContextFreeSwipeEntry, slideshowSlideIndex, slideNavActions]);
-  const handleSwipePrev = useCallback4(() => {
+  const handleSwipePrev = useCallback5(() => {
     armContextFreeSwipeEntry(slideshowSlideIndex - 1);
     slideNavActions.prevSlide();
   }, [armContextFreeSwipeEntry, slideshowSlideIndex, slideNavActions]);
@@ -2494,13 +3306,13 @@ function DocPlayerContent({
     onNext: handleSwipeNext,
     onPrev: handleSwipePrev
   });
-  useEffect5(() => {
+  useEffect7(() => {
     onPlaybackStateChange?.(playbackState);
   }, [playbackState, onPlaybackStateChange]);
-  useEffect5(() => {
+  useEffect7(() => {
     onControlsReady?.({ play: playWithTimelineMedia, pause, ...playbackActions });
   }, [playWithTimelineMedia, pause, playbackActions, onControlsReady]);
-  const getBlockTitle = useCallback4((block) => {
+  const getBlockTitle = useCallback5((block) => {
     const docBlock = block;
     if (isTemplateBlock2(docBlock)) {
       const props = docBlock;
@@ -2524,7 +3336,7 @@ function DocPlayerContent({
     }
     return block.id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
   }, []);
-  const slideshowPickerItems = useMemo3(() => {
+  const slideshowPickerItems = useMemo5(() => {
     const blockItems = expandedBlocks.map((block, index) => ({
       id: block.id,
       label: String(index + 1),
@@ -2540,7 +3352,7 @@ function DocPlayerContent({
       ...blockItems
     ];
   }, [coverBlock, expandedBlocks, getBlockTitle, slideshowHasCover]);
-  const blockMarkers = useMemo3(() => {
+  const blockMarkers = useMemo5(() => {
     if (!totalDuration || !expandedBlocks.length) return [];
     let prevSegment = -1;
     return expandedBlocks.map((block, index) => {
@@ -2555,13 +3367,13 @@ function DocPlayerContent({
       };
     });
   }, [expandedBlocks, totalDuration, getBlockTitle]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (blockMarkers.length > 0) {
       onBlockMarkers?.(blockMarkers);
     }
   }, [blockMarkers, onBlockMarkers]);
   expandedBlocksLenRef.current = isSlideshowMode ? slideshowTotalSlides : expandedBlocks.length;
-  const handleKeyboardShortcut = useCallback4(
+  const handleKeyboardShortcut = useCallback5(
     (e, global) => {
       if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
       const target = e.target instanceof Element ? e.target : null;
@@ -2577,7 +3389,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,26 +3441,27 @@ function DocPlayerContent({
     [
       isSlideshowMode,
       isLinearMode,
+      isDashboardMode,
       toggleWithTimelineMedia,
       seekTo,
       slideNavActions,
       onFullscreenToggle
     ]
   );
-  const handleKeyDown = useCallback4(
+  const handleKeyDown = useCallback5(
     (e) => handleKeyboardShortcut(e, false),
     [handleKeyboardShortcut]
   );
-  useEffect5(() => {
-    if (!globalKeyboardShortcuts || renderMode || isLinearMode) return;
+  useEffect7(() => {
+    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__ */ jsx9(
       "div",
       {
         ref: containerRef,
@@ -2660,7 +3473,7 @@ function DocPlayerContent({
           height: "100%",
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx9(
           LinearDocView,
           {
             doc,
@@ -2677,7 +3490,41 @@ function DocPlayerContent({
       }
     );
   }
-  return /* @__PURE__ */ jsxs4(
+  if (isDashboardMode) {
+    return /* @__PURE__ */ jsx9(
+      "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__ */ jsx9(
+          DashboardView,
+          {
+            doc,
+            theme,
+            viewport: activeViewport,
+            layout: dashboardLayout,
+            showTitle: dashboardShowTitle,
+            style: dashboardStyle,
+            documentTitle: dashboardDocumentTitle,
+            basePath,
+            animationsEnabled,
+            muted: renderMode || muted,
+            renderMode: renderMode || isDebugMode,
+            onRenderAPIReady
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: containerRef,
@@ -2705,8 +3552,8 @@ function DocPlayerContent({
         touchAction: swipeEnabled ? "pan-y" : void 0
       },
       children: [
-        /* @__PURE__ */ jsx7("audio", { ref: audioRef, preload: "auto", muted }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9("audio", { ref: audioRef, preload: "auto", muted }),
+        /* @__PURE__ */ jsx9(
           MediaClipLayer,
           {
             schedule: mediaSchedule,
@@ -2723,8 +3570,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__ */ jsxs6("div", { className: "doc-player__viewport", children: [
+          showCoverBlock && coverBlock && /* @__PURE__ */ jsx9("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx9(
             BlockRenderer,
             {
               block: coverBlock,
@@ -2741,7 +3588,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__ */ jsx9("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx9(
             BlockRenderer,
             {
               block: previousBlock,
@@ -2755,7 +3602,7 @@ function DocPlayerContent({
               theme: effectiveTheme
             }
           ) }, previousBlock.id),
-          currentBlock && /* @__PURE__ */ jsx7(
+          currentBlock && /* @__PURE__ */ jsx9(
             "div",
             {
               className: `doc-player__block doc-player__block--active${swipe.phase !== "idle" ? ` doc-player__block--${swipe.phase}` : ""}`,
@@ -2764,7 +3611,7 @@ function DocPlayerContent({
                 ...swipe.phase !== "idle" ? { transform: `translateX(${swipe.offsetPx}px)` } : {},
                 ...showCoverBlock ? { opacity: 0, pointerEvents: "none" } : {}
               } : void 0,
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx9(
                 BlockRenderer,
                 {
                   block: currentBlock,
@@ -2781,7 +3628,7 @@ function DocPlayerContent({
             },
             currentBlock.id
           ),
-          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx7(
+          hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx9(
             CaptionOverlay,
             {
               captions: doc.captions,
@@ -2793,7 +3640,7 @@ function DocPlayerContent({
               viewport: activeViewport
             }
           ),
-          isDebugMode && /* @__PURE__ */ jsxs4(
+          isDebugMode && /* @__PURE__ */ jsxs6(
             "div",
             {
               className: "doc-player__debug",
@@ -2814,27 +3661,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__ */ jsx9("div", { style: { color: "#ffcc00", fontWeight: "bold", marginBottom: "4px" }, children: "DEBUG MODE" }),
+                /* @__PURE__ */ jsxs6("div", { children: [
+                  /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "template:" }),
                   " ",
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
+                  /* @__PURE__ */ jsx9("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "block:" }),
+                /* @__PURE__ */ jsxs6("div", { children: [
+                  /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "block:" }),
                   " ",
                   currentBlockIndex + 1,
                   "/",
                   expandedBlocks.length,
                   " ",
-                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs6("span", { style: { color: "#666" }, children: [
                     "(",
                     currentBlock?.id || "none",
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "time:" }),
+                /* @__PURE__ */ jsxs6("div", { children: [
+                  /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "time:" }),
                   " ",
                   currentTime.toFixed(2),
                   "s /",
@@ -2842,7 +3689,7 @@ function DocPlayerContent({
                   totalDuration.toFixed(1),
                   "s",
                   " ",
-                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs6("span", { style: { color: "#666" }, children: [
                     "(progress: ",
                     (docProgress * 100).toFixed(1),
                     "%, scriptDur: ",
@@ -2850,8 +3697,8 @@ function DocPlayerContent({
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "blockTime:" }),
+                /* @__PURE__ */ jsxs6("div", { children: [
+                  /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "blockTime:" }),
                   " ",
                   blockTime.toFixed(2),
                   "s /",
@@ -2859,58 +3706,58 @@ function DocPlayerContent({
                   (currentBlock?.duration || 0).toFixed(1),
                   "s"
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "segment:" }),
+                /* @__PURE__ */ jsxs6("div", { children: [
+                  /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "segment:" }),
                   " ",
                   currentSegment,
                   "/",
                   doc.audio.segments.length - 1,
                   " ",
-                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs6("span", { style: { color: "#666" }, children: [
                     "(",
                     doc.audio.segments[currentSegment]?.name || "none",
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "viewport:" }),
+                /* @__PURE__ */ jsxs6("div", { children: [
+                  /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "viewport:" }),
                   " ",
                   activeViewport.name || `${activeViewport.width}x${activeViewport.height}`,
                   " ",
-                  /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                  /* @__PURE__ */ jsxs6("span", { style: { color: "#666" }, children: [
                     "(",
                     activeOrientation,
                     ")"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "playing:" }),
+                /* @__PURE__ */ jsxs6("div", { children: [
+                  /* @__PURE__ */ jsx9("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__ */ jsx9("span", { style: { color: isPlaying ? "#4ade80" : "#f87171" }, children: isPlaying ? "yes" : "no" }),
+                  showCoverBlock && /* @__PURE__ */ jsx9("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__ */ jsxs6(Fragment4, { children: [
+                    /* @__PURE__ */ jsxs6("div", { children: [
+                      /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "captions:" }),
                       " ",
                       doc.captions?.phrases.length || 0,
                       " phrases",
                       " ",
-                      /* @__PURE__ */ jsxs4("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
+                      /* @__PURE__ */ jsxs6("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
                         "(",
                         captionsEnabled ? "on" : "off",
                         ")"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs4("div", { children: [
-                      /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "cc.enabled:" }),
+                    /* @__PURE__ */ jsxs6("div", { children: [
+                      /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "cc.enabled:" }),
                       " ",
-                      /* @__PURE__ */ jsx7("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
+                      /* @__PURE__ */ jsx9("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
                       " ",
-                      /* @__PURE__ */ jsxs4("span", { style: { color: "#666" }, children: [
+                      /* @__PURE__ */ jsxs6("span", { style: { color: "#666" }, children: [
                         "(playing=",
                         String(isPlaying),
                         " t>0=",
@@ -2918,15 +3765,15 @@ function DocPlayerContent({
                         ")"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs4("div", { children: [
-                      /* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "cc.phrase:" }),
+                    /* @__PURE__ */ jsxs6("div", { children: [
+                      /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "cc.phrase:" }),
                       " ",
-                      /* @__PURE__ */ jsx7("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
+                      /* @__PURE__ */ jsx9("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__ */ jsxs6("div", { children: [
+                      /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "cc.range:" }),
                       " ",
-                      /* @__PURE__ */ jsxs4("span", { style: { color: "#60a5fa" }, children: [
+                      /* @__PURE__ */ jsxs6("span", { style: { color: "#60a5fa" }, children: [
                         debugPhrase.startTime.toFixed(2),
                         "-",
                         debugPhrase.endTime.toFixed(2)
@@ -2938,7 +3785,7 @@ function DocPlayerContent({
             }
           )
         ] }),
-        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs4(
+        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs6(
           "div",
           {
             className: "doc-player__unavailable",
@@ -2959,12 +3806,12 @@ function DocPlayerContent({
               zIndex: 50
             },
             children: [
-              /* @__PURE__ */ jsx7("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
-              /* @__PURE__ */ jsx7("span", { children: unavailableMessage })
+              /* @__PURE__ */ jsx9("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
+              /* @__PURE__ */ jsx9("span", { children: unavailableMessage })
             ]
           }
         ),
-        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx7(
+        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx9(
           DocControlsOverlay,
           {
             state: playbackState,
@@ -2974,7 +3821,7 @@ function DocPlayerContent({
             getBlockTitle
           }
         ),
-        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx7(
+        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx9(
           "div",
           {
             className: "doc-player__scrubber",
@@ -2989,7 +3836,7 @@ function DocPlayerContent({
               alignItems: "center",
               zIndex: 100
             },
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx9(
               DocProgressBar,
               {
                 state: playbackState,
@@ -3001,7 +3848,7 @@ function DocPlayerContent({
             )
           }
         ),
-        !renderMode && isSlideshowMode && showControls && /* @__PURE__ */ jsx7(
+        !renderMode && isSlideshowMode && showControls && /* @__PURE__ */ jsx9(
           DocControlsSlideshow,
           {
             state: playbackState,
@@ -3011,14 +3858,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__ */ jsx9("div", { className: "doc-player__tap-feedback", children: /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "white", width: "48", height: "48", children: tapFeedback === "pause" ? /* @__PURE__ */ jsx9("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) : /* @__PURE__ */ jsx9("path", { d: "M8 5v14l11-7z" }) }) }, tapFeedback)
       ]
     }
   );
 }
 
 // src/DocControlsBottom.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function DocControlsBottom({
   state,
   actions,
@@ -3026,32 +3873,32 @@ function DocControlsBottom({
   expandedBlocks,
   getBlockTitle
 }) {
-  return /* @__PURE__ */ jsxs5("div", { className: "doc-controls-bottom", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs7("div", { className: "doc-controls-bottom", children: [
+    /* @__PURE__ */ jsx10(
       "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__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", 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__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       "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__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx10("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx10("path", { d: "M8 5v14l11-7z" }) })
       }
     ),
-    /* @__PURE__ */ jsxs5("span", { className: "bottom-time", children: [
+    /* @__PURE__ */ jsxs7("span", { className: "bottom-time", children: [
       formatTime(state.currentTime),
       " / ",
       formatTime(state.totalDuration)
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       DocProgressBar,
       {
         state,
@@ -3061,92 +3908,92 @@ function DocControlsBottom({
         getBlockTitle
       }
     ),
-    /* @__PURE__ */ jsxs5("span", { className: "bottom-segment", children: [
+    /* @__PURE__ */ jsxs7("span", { className: "bottom-segment", children: [
       state.currentBlockIndex + 1,
       "/",
       state.totalBlocks
     ] }),
-    state.hasCaptions && /* @__PURE__ */ jsx8(
+    state.hasCaptions && /* @__PURE__ */ jsx10(
       "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__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", 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__ */ jsx8(
+    actions.toggleFullscreen && /* @__PURE__ */ jsx10(
       "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__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", 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: "18", height: "18", children: /* @__PURE__ */ jsx10("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 jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function DocControlsSidebar({ state, actions }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "doc-controls-sidebar", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs8("div", { className: "doc-controls-sidebar", children: [
+    /* @__PURE__ */ jsx11(
       "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__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx11("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__ */ jsx11(
       "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__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx11("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx11("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__ */ jsxs8("div", { className: "sidebar-time", children: [
+      /* @__PURE__ */ jsx11("div", { children: formatTime(state.currentTime) }),
+      /* @__PURE__ */ jsx11("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "sidebar-segment", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "sidebar-segment", children: [
       state.currentBlockIndex + 1,
       "/",
       state.totalBlocks
     ] }),
-    state.hasCaptions && /* @__PURE__ */ jsx9(
+    state.hasCaptions && /* @__PURE__ */ jsx11(
       "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__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx11("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__ */ jsx11(
       "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__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx11("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx11("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 useRef8, useState as useState7, useCallback as useCallback6, useEffect as useEffect8 } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_STATE = {
   isPlaying: false,
   currentTime: 0,
@@ -3178,11 +4025,11 @@ function DocPlayerWithSidebar({
   onPlayingChange,
   theme
 }) {
-  const stateRef = useRef6(DEFAULT_STATE);
-  const actionsRef = useRef6(null);
-  const wasPlayingRef = useRef6(false);
-  const [, setTick] = useState6(0);
-  const handleStateChange = useCallback5(
+  const stateRef = useRef8(DEFAULT_STATE);
+  const actionsRef = useRef8(null);
+  const wasPlayingRef = useRef8(false);
+  const [, setTick] = useState7(0);
+  const handleStateChange = useCallback6(
     (state) => {
       stateRef.current = state;
       if (onPlayingChange && state.isPlaying !== wasPlayingRef.current) {
@@ -3193,7 +4040,7 @@ function DocPlayerWithSidebar({
     },
     [onPlayingChange]
   );
-  const handleControlsReady = useCallback5(
+  const handleControlsReady = useCallback6(
     (controls) => {
       const isFirst = !actionsRef.current;
       actionsRef.current = controls;
@@ -3201,15 +4048,15 @@ function DocPlayerWithSidebar({
     },
     []
   );
-  useEffect6(() => {
+  useEffect8(() => {
     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__ */ jsxs9("div", { className: "doc-player-sidebar-layout", children: [
+    /* @__PURE__ */ jsx12("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx12(
       DocPlayer,
       {
         doc,
@@ -3232,7 +4079,7 @@ function DocPlayerWithSidebar({
         forceViewport
       }
     ) }),
-    actionsRef.current && /* @__PURE__ */ jsx10(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
+    actionsRef.current && /* @__PURE__ */ jsx12(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
   ] });
 }
 
@@ -3245,6 +4092,9 @@ export {
   DocProgressBar,
   DocControlsOverlay,
   DocControlsSlideshow,
+  DashboardView,
+  FlashcardFaceView,
+  FlashcardView,
   resolveDocPlayerAppearance,
   DocPlayer,
   DocControlsBottom,