@bendyline/squisq-editor-react 2.8.0 → 2.10.0

package/dist/{chunk-V3J5S7X6.js → chunk-JNJ7XO5L.js}

@@ -5,6 +5,7 @@ import {
   NarrationStage,
   buildFilename,
   buildTimingJson,
+  encodeNarrationTimingJson,
   encodeTimingJson,
   requestCameraStream,
   requestMicStream,
@@ -16,7 +17,7 @@ import {
   timingPathFor,
   useNarrationStage,
   useStreamPreview
-} from "./chunk-OWOKKZAU.js";
+} from "./chunk-IRPOMTYK.js";
 
 // src/recorder/sources/screenStream.ts
 function mixAudioTracks(streams) {
@@ -634,6 +635,11 @@ function useMediaRecorder(options = {}) {
       }
     }, 100);
   }, [clearTicker, deactivateCapture, transition]);
+  const getElapsedMs = useCallback(() => {
+    if (stateRef.current !== "recording") return null;
+    const startedAt = startTimestampRef.current;
+    return startedAt === null ? null : Math.max(0, Date.now() - startedAt);
+  }, []);
   const stop = useCallback(() => {
     if (stopPromiseRef.current) return stopPromiseRef.current;
     const rec = recorderRef.current;
@@ -707,6 +713,7 @@ function useMediaRecorder(options = {}) {
     extension: format?.extension ?? null,
     directory: format?.directory ?? null,
     durationMs,
+    getElapsedMs,
     error,
     camera,
     cameraOffsetSec,
@@ -1652,16 +1659,371 @@ function recordedMediaKind(source, stream, mimeType) {
   return source === "mic" ? "audio" : "video";
 }
 
+// src/recorder/slidesModePolicy.ts
+function isExpandedPanel(mode) {
+  return mode !== "none";
+}
+function panelModeAfterToggle(current, target, checked) {
+  if (checked) return target;
+  return current === target ? "none" : current;
+}
+function clampSlideIndex(index, count) {
+  if (count <= 0) return 0;
+  if (!Number.isFinite(index)) return 0;
+  return Math.min(count - 1, Math.max(0, Math.floor(index)));
+}
+function slideStepForKey(key) {
+  switch (key) {
+    case "ArrowRight":
+    case "ArrowDown":
+    case "PageDown":
+    case " ":
+    case "Spacebar":
+      return 1;
+    case "ArrowLeft":
+    case "ArrowUp":
+    case "PageUp":
+      return -1;
+    default:
+      return 0;
+  }
+}
+function showSlideTimingCheckbox(options) {
+  return options.slidesOn && options.captureTimings && options.recorderState === "stopped" && options.hasBlob;
+}
+function unshownSlidesWarning(total, unshown) {
+  if (unshown <= 0 || total <= 0) return null;
+  const noun = unshown === 1 ? "slide was" : "slides were";
+  return `${unshown} of ${total} ${noun} never shown \u2014 they'll be skipped during playback.`;
+}
+var SLIDE_TIMING_CHECKBOX_LABEL = "Update block timings when I save this narration";
+
+// src/buildPreviewDoc.ts
+import {
+  buildPreviewDoc,
+  documentTitleFromFileName
+} from "@bendyline/squisq/doc";
+
+// src/recorder/slides/slideDeck.ts
+import {
+  buildPreviewDoc as buildPreviewDoc2,
+  flattenRenderableBlocks,
+  getBlockBodyText,
+  materializeBlockLayers as materializeBlockLayers2
+} from "@bendyline/squisq/doc";
+
+// src/resolveBlockVisual.ts
+import { materializeBlockLayers } from "@bendyline/squisq/doc";
+function resolveBlockVisual(doc, block, theme, viewport) {
+  try {
+    const slide = buildPreviewDoc({ ...doc, blocks: [block] }).blocks[0];
+    if (!slide) return null;
+    const ctx = {
+      blockIndex: 0,
+      totalBlocks: 1,
+      theme,
+      viewport,
+      customTemplates: doc.customTemplates
+    };
+    const { layers } = materializeBlockLayers(slide, ctx);
+    return { ...slide, layers };
+  } catch {
+    return null;
+  }
+}
+
+// src/recorder/slides/slideDeck.ts
+function buildRecorderSlideDeck(doc, theme, viewport) {
+  const flat = flattenRenderableBlocks(doc.blocks);
+  if (flat.length === 0) return [];
+  let slidesById;
+  try {
+    const preview = buildPreviewDoc2(doc, { interleaveImages: false });
+    slidesById = new Map(preview.blocks.map((slide) => [slide.id, slide]));
+  } catch {
+    slidesById = /* @__PURE__ */ new Map();
+  }
+  return flat.map((block, index) => {
+    const heading = block.title?.trim() || `Slide ${index + 1}`;
+    let bodyText = "";
+    try {
+      bodyText = getBlockBodyText(block);
+    } catch {
+      bodyText = "";
+    }
+    return {
+      blockId: block.id,
+      heading,
+      bodyText,
+      visual: resolveSlideVisual(
+        doc,
+        block,
+        slidesById.get(block.id),
+        theme,
+        viewport,
+        index,
+        flat.length
+      )
+    };
+  });
+}
+function resolveSlideVisual(doc, block, slide, theme, viewport, index, totalBlocks) {
+  if (slide) {
+    try {
+      const { layers } = materializeBlockLayers2(slide, {
+        blockIndex: index,
+        totalBlocks,
+        theme,
+        viewport,
+        customTemplates: doc.customTemplates
+      });
+      return { ...slide, layers };
+    } catch {
+    }
+  }
+  return resolveBlockVisual(doc, block, theme, viewport);
+}
+
+// src/recorder/slides/RecorderSlidesPanel.tsx
+import { useCallback as useCallback3 } from "react";
+
+// src/TimelineBlockPreview.tsx
+import { memo } from "react";
+import { VIEWPORT_PRESETS } from "@bendyline/squisq/schemas";
+import { BlockRenderer, MediaContext } from "@bendyline/squisq-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BlockThumbnail = memo(function BlockThumbnail2({
+  visual,
+  viewport = VIEWPORT_PRESETS.landscape,
+  basePath = "/",
+  mediaProvider = null
+}) {
+  return /* @__PURE__ */ jsx3(MediaContext.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx3(BlockRenderer, { block: visual, blockTime: 0, basePath, viewport }) });
+});
+
+// src/recorder/slides/RecorderSlidesPanel.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var rootStyle = {
+  flex: "1 1 auto",
+  minHeight: 0,
+  minWidth: 0,
+  display: "flex",
+  flexDirection: "column",
+  outline: "none",
+  color: "var(--squisq-recorder-text)"
+};
+var headerStyle = {
+  flex: "0 0 auto",
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  padding: "8px 10px",
+  borderBottom: "1px solid var(--squisq-recorder-border)"
+};
+var counterStyle = {
+  fontSize: 13,
+  fontWeight: 600,
+  whiteSpace: "nowrap"
+};
+var dotsStyle = {
+  flex: "1 1 auto",
+  minWidth: 0,
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: 3
+};
+var navButtonStyle = {
+  padding: "4px 10px",
+  fontSize: 13,
+  fontFamily: "inherit",
+  cursor: "pointer",
+  background: "var(--squisq-recorder-input)",
+  color: "var(--squisq-recorder-text)",
+  border: "1px solid var(--squisq-recorder-border)",
+  borderRadius: 0
+};
+var stageStyle = {
+  flex: "1 1 auto",
+  minHeight: 0,
+  overflow: "hidden",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 8,
+  background: "var(--squisq-recorder-surface-muted)"
+};
+var notesStyle = {
+  flex: "0 0 auto",
+  maxHeight: "32%",
+  minHeight: 0,
+  overflowY: "auto",
+  padding: "10px 12px",
+  borderTop: "1px solid var(--squisq-recorder-border)",
+  fontSize: 14,
+  lineHeight: 1.5,
+  whiteSpace: "pre-wrap"
+};
+var hintStyle = {
+  margin: 0,
+  fontSize: 12,
+  color: "var(--squisq-recorder-muted)"
+};
+var headingStyle = {
+  margin: "0 0 6px 0",
+  fontSize: 13,
+  fontWeight: 600
+};
+var SELF_HANDLING = /^(BUTTON|INPUT|TEXTAREA|SELECT|A)$/;
+function RecorderSlidesPanel({
+  slides,
+  index,
+  onIndexChange,
+  viewport,
+  basePath = "/",
+  mediaProvider = null,
+  recording = false,
+  shownBlockIds
+}) {
+  const count = slides.length;
+  const active = slides[clampSlideIndex(index, count)];
+  const step = useCallback3(
+    (delta) => onIndexChange(clampSlideIndex(index + delta, count)),
+    [index, count, onIndexChange]
+  );
+  const handleKeyDown = useCallback3(
+    (event) => {
+      const delta = slideStepForKey(event.key);
+      if (delta === 0) return;
+      const target = event.target;
+      if (target !== event.currentTarget && SELF_HANDLING.test(target.tagName)) return;
+      event.preventDefault();
+      step(delta);
+    },
+    [step]
+  );
+  if (count === 0 || !active) {
+    return /* @__PURE__ */ jsx4("div", { style: { ...rootStyle, alignItems: "center", justifyContent: "center", padding: 24 }, children: /* @__PURE__ */ jsx4("p", { style: hintStyle, children: "This document has no slides yet." }) });
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: rootStyle,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      "data-testid": "recorder-slides-panel",
+      "aria-label": "Slides",
+      children: [
+        /* @__PURE__ */ jsxs3("div", { style: headerStyle, children: [
+          /* @__PURE__ */ jsxs3("span", { style: counterStyle, role: "status", children: [
+            "Slide ",
+            index + 1,
+            " of ",
+            count
+          ] }),
+          /* @__PURE__ */ jsx4("span", { style: dotsStyle, "aria-hidden": "true", children: slides.map((slide, i) => /* @__PURE__ */ jsx4(
+            "span",
+            {
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                background: i === index ? "var(--squisq-recorder-accent)" : shownBlockIds?.has(slide.blockId) ? "var(--squisq-recorder-text)" : "var(--squisq-recorder-border)"
+              }
+            },
+            slide.blockId
+          )) }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              style: navButtonStyle,
+              onClick: () => step(-1),
+              disabled: index <= 0,
+              "aria-label": "Previous slide",
+              children: /* @__PURE__ */ jsx4(Icon, { icon: "fa-solid fa-chevron-left" })
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              style: navButtonStyle,
+              onClick: () => step(1),
+              disabled: index >= count - 1,
+              "aria-label": "Next slide",
+              children: /* @__PURE__ */ jsx4(Icon, { icon: "fa-solid fa-chevron-right" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx4("div", { style: stageStyle, children: /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxHeight: "100%",
+              aspectRatio: `${viewport.width} / ${viewport.height}`,
+              overflow: "hidden",
+              background: "#000"
+            },
+            children: active.visual ? /* @__PURE__ */ jsx4(
+              BlockThumbnail,
+              {
+                visual: active.visual,
+                viewport,
+                basePath,
+                mediaProvider
+              }
+            ) : /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: 16,
+                  textAlign: "center",
+                  background: "var(--squisq-recorder-input)",
+                  color: "var(--squisq-recorder-muted)",
+                  fontSize: 13
+                },
+                children: [
+                  active.heading,
+                  " \u2014 no slide rendition"
+                ]
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs3("div", { style: notesStyle, "data-testid": "recorder-slide-notes", children: [
+          /* @__PURE__ */ jsx4("p", { style: headingStyle, children: active.heading }),
+          active.bodyText ? /* @__PURE__ */ jsx4("div", { children: active.bodyText }) : /* @__PURE__ */ jsx4("p", { style: hintStyle, children: "No additional narrative for this slide." }),
+          /* @__PURE__ */ jsx4("p", { style: { ...hintStyle, marginTop: 8 }, children: recording ? "Recording \u2014 each slide is timed from when you first show it." : "Use the arrow keys or the buttons to move through the deck." })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/recorder/RecorderModal.tsx
 import {
   Fragment as Fragment2,
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useEffect as useEffect4,
   useId as useId2,
   useMemo,
   useRef as useRef2,
   useState as useState3
 } from "react";
+import { VIEWPORT_PRESETS as VIEWPORT_PRESETS2 } from "@bendyline/squisq/schemas";
+import {
+  EMPTY_ADVANCE_LOG,
+  advanceCoverage,
+  buildAdvanceTimingJson,
+  recordSlideShown
+} from "@bendyline/squisq/narration";
 
 // src/modal/useModalDialog.ts
 import { useModalDialog } from "@bendyline/squisq-react";
@@ -1689,7 +2051,7 @@ function narrationCaptureSummary(withCamera) {
 }
 
 // src/recorder/RecorderModal.tsx
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var overlayStyle = {
   position: "fixed",
   inset: 0,
@@ -2034,7 +2396,9 @@ function RecorderModal({
   colorScheme = "light",
   onClose,
   onSave,
-  narration = null
+  narration = null,
+  slides = null,
+  title = "Record media"
 }) {
   const initialToggles = toggleStateFromMode(initialMode);
   const [micOn, setMicOn] = useState3(initialToggles.micOn);
@@ -2048,7 +2412,10 @@ function RecorderModal({
   const [playbackUrl, setPlaybackUrl] = useState3(null);
   const [cameraPlaybackUrl, setCameraPlaybackUrl] = useState3(null);
   const [playbackPositionMs, setPlaybackPositionMs] = useState3(0);
-  const [narrationOn, setNarrationOn] = useState3(false);
+  const [panelMode, setPanelMode] = useState3("none");
+  const narrationOn = panelMode === "narration";
+  const slidesOn = panelMode === "slides";
+  const expanded = isExpandedPanel(panelMode);
   const [narrationRequesting, setNarrationRequesting] = useState3(false);
   const [narrationPreview, setNarrationPreview] = useState3(null);
   const [deviceSettings, setDeviceSettings] = useState3(() => ({
@@ -2131,7 +2498,43 @@ function RecorderModal({
   });
   const stageRef = useRef2(stage);
   stageRef.current = stage;
-  const handleDeviceSettingsChange = useCallback3(
+  const slidesViewport = slides?.viewport ?? VIEWPORT_PRESETS2.landscape;
+  const slideDeck = useMemo(
+    () => slides?.doc ? buildRecorderSlideDeck(slides.doc, slides.theme, slidesViewport) : [],
+    [slides?.doc, slides?.theme, slidesViewport]
+  );
+  const slidesAvailable = slideDeck.length > 0;
+  const slidesCaptureTimings = Boolean(slides?.captureTimings && slides?.doc);
+  const [slideIndex, setSlideIndex] = useState3(0);
+  const [advanceLog, setAdvanceLog] = useState3(EMPTY_ADVANCE_LOG);
+  const [applySlideTimings, setApplySlideTimings] = useState3(true);
+  const slideIndexRef = useRef2(slideIndex);
+  slideIndexRef.current = slideIndex;
+  const advanceLogRef = useRef2(advanceLog);
+  advanceLogRef.current = advanceLog;
+  const slideDeckRef = useRef2(slideDeck);
+  slideDeckRef.current = slideDeck;
+  const shownBlockIds = useMemo(
+    () => new Set(advanceLog.map((advance) => advance.blockId)),
+    [advanceLog]
+  );
+  const handleSlideIndexChange = useCallback4(
+    (next) => {
+      const clamped = clampSlideIndex(next, slideDeckRef.current.length);
+      setSlideIndex(clamped);
+      const elapsedMs = recorder.getElapsedMs();
+      const blockId = slideDeckRef.current[clamped]?.blockId;
+      if (elapsedMs === null || !blockId) return;
+      setAdvanceLog((log) => recordSlideShown(log, blockId, elapsedMs));
+    },
+    [recorder]
+  );
+  const slideDeckKey = slideDeck.map((slide) => slide.blockId).join("\0");
+  useEffect4(() => {
+    setAdvanceLog(EMPTY_ADVANCE_LOG);
+    setSlideIndex(0);
+  }, [panelMode, slideDeckKey]);
+  const handleDeviceSettingsChange = useCallback4(
     (next) => {
       setDeviceSettings(next);
       if (narrationOn) {
@@ -2216,7 +2619,7 @@ function RecorderModal({
       }
     };
   }, [cameraConstraints, narrationPreviewWanted]);
-  const handleNarrationPreview = useCallback3(async () => {
+  const handleNarrationPreview = useCallback4(async () => {
     setNarrationRequesting(true);
     try {
       const controller = stageRef.current.controller;
@@ -2225,7 +2628,7 @@ function RecorderModal({
       setNarrationRequesting(false);
     }
   }, []);
-  const handleNarrationRecord = useCallback3(() => {
+  const handleNarrationRecord = useCallback4(() => {
     void stageRef.current.recorder.start();
   }, []);
   const narrationCameraStream = narrationOn ? stage.recorder.cameraStream ?? narrationPreview : null;
@@ -2274,10 +2677,11 @@ function RecorderModal({
     if (previousKeyRef.current !== captureKey) {
       previousKeyRef.current = captureKey;
       dualSaveProgressRef.current = {};
+      setAdvanceLog(EMPTY_ADVANCE_LOG);
       recorder.cancel();
     }
   }, [captureKey, recorder]);
-  const handleClose = useCallback3(() => {
+  const handleClose = useCallback4(() => {
     const s = stageRef.current;
     if (closeNeedsConfirm(narrationOn, s.recorder.state, s.recorder.take !== null)) {
       if (!window.confirm("Discard the current narration take?")) return;
@@ -2302,23 +2706,55 @@ function RecorderModal({
       stage.controller.transport
     )
   });
-  const handleRequest = useCallback3(async () => {
+  const handleRequest = useCallback4(async () => {
     setSaveError(null);
     try {
       await recorder.request();
     } catch {
     }
   }, [recorder]);
-  const handleStart = useCallback3(() => {
+  const handleStart = useCallback4(() => {
     setSaveError(null);
     dualSaveProgressRef.current = {};
     recorder.start();
+    const blockId = slideDeckRef.current[slideIndexRef.current]?.blockId;
+    setAdvanceLog(blockId ? recordSlideShown(EMPTY_ADVANCE_LOG, blockId, 0) : EMPTY_ADVANCE_LOG);
   }, [recorder]);
-  const handleStop = useCallback3(async () => {
+  const handleStop = useCallback4(async () => {
     setSaveError(null);
     await recorder.stop();
   }, [recorder]);
-  const handleSave = useCallback3(async () => {
+  const writeSlideTimingSidecar = useCallback4(
+    async (mediaRelativePath, durationSec) => {
+      const doc = slides?.doc;
+      if (!slidesOn || !slidesCaptureTimings || !applySlideTimings || !doc) return null;
+      const log = advanceLogRef.current;
+      if (log.length === 0) return null;
+      const timing = buildAdvanceTimingJson(doc, log, durationSec);
+      const encoded = encodeNarrationTimingJson(timing);
+      const sidecarPath = timingPathFor(mediaRelativePath);
+      if (container) {
+        await container.writeFile(sidecarPath, encoded, "application/json");
+      } else {
+        const written = await mediaProvider.addMedia(sidecarPath, encoded, "application/json");
+        if (written !== sidecarPath) {
+          console.warn(
+            `[squisq-recorder] block timings were saved as "${written}" instead of "${sidecarPath}" \u2014 they will not be applied.`
+          );
+          return null;
+        }
+      }
+      const coverage = advanceCoverage(doc, log);
+      return {
+        sidecarPath,
+        blockCount: coverage.total,
+        unshownCount: coverage.unshown,
+        durationSec: timing.duration
+      };
+    },
+    [slidesOn, slidesCaptureTimings, applySlideTimings, slides?.doc, container, mediaProvider]
+  );
+  const handleSave = useCallback4(async () => {
     if (!recorder.blob || !recorder.mimeType || !recorder.extension || !recorder.directory) {
       setSaveError("Nothing to save yet \u2014 record something first.");
       return;
@@ -2365,6 +2801,8 @@ function RecorderModal({
         );
         progress.cameraPath = cameraPath;
         const duration = recorder.durationMs / 1e3;
+        const slideTiming = progress.slideTiming ?? await writeSlideTimingSidecar(screenPath, duration);
+        progress.slideTiming = slideTiming;
         const offsetSec = recorder.cameraOffsetSec ?? 0;
         const result = {
           relativePath: screenPath,
@@ -2373,7 +2811,8 @@ function RecorderModal({
           mediaKind: "video",
           mimeType: recorder.mimeType,
           duration,
-          hasTimingSidecar: false,
+          hasTimingSidecar: slideTiming !== null,
+          ...slideTiming ? { slideTiming } : {},
           camera: {
             relativePath: cameraPath,
             filename: cameraFilename,
@@ -2404,9 +2843,11 @@ function RecorderModal({
         recorder.blob,
         recorder.mimeType
       );
-      let hasTimingSidecar = false;
-      if (source === "mic") {
-        const timing = buildTimingJson(sourceText, recorder.durationMs / 1e3);
+      const duration = recorder.durationMs / 1e3;
+      const slideTiming = await writeSlideTimingSidecar(relativePath, duration);
+      let hasTimingSidecar = slideTiming !== null;
+      if (!slideTiming && source === "mic") {
+        const timing = buildTimingJson(sourceText, duration);
         const encoded = encodeTimingJson(timing);
         const sidecarPath = timingPathFor(relativePath);
         if (container) {
@@ -2428,11 +2869,12 @@ function RecorderModal({
         source,
         mediaKind,
         mimeType: recorder.mimeType,
-        duration: recorder.durationMs / 1e3,
+        duration,
         hasTimingSidecar
       };
+      if (slideTiming) result.slideTiming = slideTiming;
       if (source === "mic") {
-        result.sourceText = sourceText;
+        result.sourceText = slideTiming ? void 0 : sourceText;
       }
       onSave?.(result);
       handleClose();
@@ -2454,13 +2896,15 @@ function RecorderModal({
     mediaProvider,
     container,
     onSave,
-    handleClose
+    handleClose,
+    writeSlideTimingSidecar
   ]);
-  const handleDiscard = useCallback3(() => {
+  const handleDiscard = useCallback4(() => {
     dualSaveProgressRef.current = {};
+    setAdvanceLog(EMPTY_ADVANCE_LOG);
     recorder.reset();
   }, [recorder]);
-  const handlePlaybackTimeUpdate = useCallback3(
+  const handlePlaybackTimeUpdate = useCallback4(
     (media) => {
       const currentMs = Number.isFinite(media.currentTime) ? media.currentTime * 1e3 : 0;
       setPlaybackPositionMs(Math.min(recorder.durationMs, Math.max(0, currentMs)));
@@ -2473,6 +2917,18 @@ function RecorderModal({
   const canStop = recorder.state === "recording";
   const canSave = recorder.state === "stopped" && recorder.blob !== null;
   const isBusy = recorder.state === "requesting" || recorder.state === "stopping" || isSaving;
+  const slidesTimingCapture = slidesOn && slidesCaptureTimings;
+  const showTimingCheckbox = showSlideTimingCheckbox({
+    slidesOn,
+    captureTimings: slidesCaptureTimings,
+    recorderState: recorder.state,
+    hasBlob: recorder.blob !== null
+  });
+  const slideCoverage = useMemo(
+    () => slides?.doc && showTimingCheckbox ? advanceCoverage(slides.doc, advanceLog) : null,
+    [slides?.doc, showTimingCheckbox, advanceLog]
+  );
+  const slideCoverageWarning = slideCoverage ? unshownSlidesWarning(slideCoverage.total, slideCoverage.unshown) : null;
   const togglesLocked = recorder.state === "recording" || recorder.state === "requesting" || canSave;
   const toggleLockReason = canSave ? "Save or discard this recording before changing sources" : void 0;
   const systemAudioHasCompanion = micOn || cameraOn || screenOn;
@@ -2542,22 +2998,24 @@ function RecorderModal({
         };
     }
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       ref: overlayRef,
       className: "squisq-editor-shell squisq-recorder-overlay",
       "data-theme": colorScheme,
       style: { ...overlayStyle, ...recorderThemeStyle(colorScheme) },
-      children: /* @__PURE__ */ jsxs3(
+      children: /* @__PURE__ */ jsxs4(
         "div",
         {
           ref: dialogRef,
           className: "squisq-editor-shell",
           "data-theme": colorScheme,
           "data-narration": narrationOn ? "true" : void 0,
+          "data-slides": slidesOn ? "true" : void 0,
+          "data-panel-mode": panelMode,
           style: {
-            ...narrationOn ? modalExpandedStyle : modalStyle,
+            ...expanded ? modalExpandedStyle : modalStyle,
             ...recorderThemeStyle(colorScheme)
           },
           onClick: (e) => e.stopPropagation(),
@@ -2566,15 +3024,15 @@ function RecorderModal({
           "aria-labelledby": headingId,
           tabIndex: -1,
           children: [
-            /* @__PURE__ */ jsx3("h2", { id: headingId, style: titleStyle, children: "Record media" }),
-            /* @__PURE__ */ jsxs3("div", { style: narrationOn ? bodyRowStyle : void 0, children: [
-              /* @__PURE__ */ jsxs3("div", { style: narrationOn ? leftColStyle : void 0, children: [
-                /* @__PURE__ */ jsx3("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLE_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                  groupIndex > 0 && /* @__PURE__ */ jsx3("div", { "aria-hidden": "true", style: groupDividerStyle }),
-                  /* @__PURE__ */ jsx3("div", { style: toggleGroupStyle, children: group.toggles.map((t) => {
+            /* @__PURE__ */ jsx5("h2", { id: headingId, style: titleStyle, children: title }),
+            /* @__PURE__ */ jsxs4("div", { style: expanded ? bodyRowStyle : void 0, children: [
+              /* @__PURE__ */ jsxs4("div", { style: expanded ? leftColStyle : void 0, children: [
+                /* @__PURE__ */ jsx5("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLE_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  groupIndex > 0 && /* @__PURE__ */ jsx5("div", { "aria-hidden": "true", style: groupDividerStyle }),
+                  /* @__PURE__ */ jsx5("div", { style: toggleGroupStyle, children: group.toggles.map((t) => {
                     if (t.key === "systemAudio" && !canIncludeSystemAudio) return null;
                     const props = narrationOn ? narrationToggleFor(t.key) : simpleToggleProps(t.key);
-                    return /* @__PURE__ */ jsx3(
+                    return /* @__PURE__ */ jsx5(
                       "button",
                       {
                         type: "button",
@@ -2589,22 +3047,36 @@ function RecorderModal({
                     );
                   }) })
                 ] }, group.label)) }),
-                /* @__PURE__ */ jsx3("p", { style: summaryStyle, children: narrationOn ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
-                narrationAvailable && /* @__PURE__ */ jsxs3("label", { style: checkboxRowStyle, children: [
-                  /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx5("p", { style: summaryStyle, children: narrationOn ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
+                narrationAvailable && /* @__PURE__ */ jsxs4("label", { style: checkboxRowStyle, children: [
+                  /* @__PURE__ */ jsx5(
                     "input",
                     {
                       type: "checkbox",
                       style: { accentColor: "var(--squisq-recorder-accent)" },
                       checked: narrationOn,
-                      onChange: (e) => setNarrationOn(e.target.checked),
+                      onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "narration", e.target.checked)),
                       disabled: narrationToggleDisabled,
                       title: narrationToggleDisabled ? narrationOn ? "Finish or discard the narration take first" : "Save or discard this recording before switching modes" : void 0
                     }
                   ),
                   "Show narration mode"
                 ] }),
-                /* @__PURE__ */ jsx3(
+                slidesAvailable && /* @__PURE__ */ jsxs4("label", { style: checkboxRowStyle, children: [
+                  /* @__PURE__ */ jsx5(
+                    "input",
+                    {
+                      type: "checkbox",
+                      style: { accentColor: "var(--squisq-recorder-accent)" },
+                      checked: slidesOn,
+                      onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "slides", e.target.checked)),
+                      disabled: narrationToggleDisabled,
+                      title: narrationToggleDisabled ? "Save or discard this recording before switching modes" : void 0
+                    }
+                  ),
+                  "Show slides mode"
+                ] }),
+                /* @__PURE__ */ jsx5(
                   RecorderDeviceQuickPicks,
                   {
                     devices: mediaDevices,
@@ -2623,7 +3095,7 @@ function RecorderModal({
                     disabled: deviceSettingsLocked
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx5(
                   RecorderDeviceSettingsPanel,
                   {
                     value: deviceSettings,
@@ -2638,10 +3110,10 @@ function RecorderModal({
                     cameraStream: activeCameraStream
                   }
                 ),
-                !narrationOn && recorder.error && /* @__PURE__ */ jsx3("div", { style: errorStyle, children: recorder.error.message }),
-                !narrationOn && saveError && /* @__PURE__ */ jsx3("div", { style: errorStyle, children: saveError }),
-                narrationOn && (stage.recorder.error ?? stage.controller.mic.error) && /* @__PURE__ */ jsx3("div", { style: errorStyle, children: (stage.recorder.error ?? stage.controller.mic.error)?.message }),
-                narrationOn && narrationCameraStream && /* @__PURE__ */ jsx3("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx3(
+                !narrationOn && recorder.error && /* @__PURE__ */ jsx5("div", { style: errorStyle, children: recorder.error.message }),
+                !narrationOn && saveError && /* @__PURE__ */ jsx5("div", { style: errorStyle, children: saveError }),
+                narrationOn && (stage.recorder.error ?? stage.controller.mic.error) && /* @__PURE__ */ jsx5("div", { style: errorStyle, children: (stage.recorder.error ?? stage.controller.mic.error)?.message }),
+                narrationOn && narrationCameraStream && /* @__PURE__ */ jsx5("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx5(
                   "video",
                   {
                     ref: previewRef,
@@ -2651,10 +3123,10 @@ function RecorderModal({
                     style: { width: "100%", height: "100%", objectFit: "contain" }
                   }
                 ) }),
-                narrationOn && !narrationCameraStream && narrationTakeDone && /* @__PURE__ */ jsx3("div", { style: audioMeterStyle, children: stage.recorder.take ? `\u2713 Recorded ${formatDurationMs(stage.recorder.take.durationSec * 1e3)}` : "\u25CF Processing take\u2026" }),
-                narrationOn && !narrationCameraStream && !narrationTakeDone && stage.recorder.withCamera && /* @__PURE__ */ jsx3("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx3("span", { children: narrationPreviewWanted ? "Camera starting\u2026" : "Click Start preview to turn on your camera." }) }),
-                narrationOn && !narrationCameraStream && !narrationTakeDone && !stage.recorder.withCamera && /* @__PURE__ */ jsxs3("div", { style: { ...audioMeterStyle, position: "relative", overflow: "hidden" }, children: [
-                  /* @__PURE__ */ jsx3(
+                narrationOn && !narrationCameraStream && narrationTakeDone && /* @__PURE__ */ jsx5("div", { style: audioMeterStyle, children: stage.recorder.take ? `\u2713 Recorded ${formatDurationMs(stage.recorder.take.durationSec * 1e3)}` : "\u25CF Processing take\u2026" }),
+                narrationOn && !narrationCameraStream && !narrationTakeDone && stage.recorder.withCamera && /* @__PURE__ */ jsx5("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx5("span", { children: narrationPreviewWanted ? "Camera starting\u2026" : "Click Start preview to turn on your camera." }) }),
+                narrationOn && !narrationCameraStream && !narrationTakeDone && !stage.recorder.withCamera && /* @__PURE__ */ jsxs4("div", { style: { ...audioMeterStyle, position: "relative", overflow: "hidden" }, children: [
+                  /* @__PURE__ */ jsx5(
                     "div",
                     {
                       "aria-hidden": "true",
@@ -2664,11 +3136,11 @@ function RecorderModal({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx3("span", { style: { position: "relative" }, children: stage.recorder.state === "recording" ? "\u25CF Recording narration" : narrationMicLive ? stage.controller.voiceActive ? "Voice detected" : "Microphone ready" : "Click Start preview to check your mic." })
+                  /* @__PURE__ */ jsx5("span", { style: { position: "relative" }, children: stage.recorder.state === "recording" ? "\u25CF Recording narration" : narrationMicLive ? stage.controller.voiceActive ? "Voice detected" : "Microphone ready" : "Click Start preview to check your mic." })
                 ] }),
-                !narrationOn && !showPreview && /* @__PURE__ */ jsx3("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx3("span", { children: "Click Start Preview to start a recording." }) }),
-                !narrationOn && showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsxs3("div", { style: isDual ? { ...previewBoxStyle, position: "relative" } : previewBoxStyle, children: [
-                  /* @__PURE__ */ jsx3(
+                !narrationOn && !showPreview && /* @__PURE__ */ jsx5("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx5("span", { children: "Click Start Preview to start a recording." }) }),
+                !narrationOn && showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsxs4("div", { style: isDual ? { ...previewBoxStyle, position: "relative" } : previewBoxStyle, children: [
+                  /* @__PURE__ */ jsx5(
                     "video",
                     {
                       ref: previewRef,
@@ -2678,7 +3150,7 @@ function RecorderModal({
                       style: { width: "100%", height: "100%", objectFit: "contain" }
                     }
                   ),
-                  isDual && /* @__PURE__ */ jsx3(
+                  isDual && /* @__PURE__ */ jsx5(
                     "video",
                     {
                       ref: cameraPreviewRef,
@@ -2699,12 +3171,12 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx3("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+                !narrationOn && showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx5("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
                   "\u25CF Recording ",
                   formatDurationMs(recorder.durationMs)
-                ] }) : /* @__PURE__ */ jsx3(Fragment3, { children: "Microphone ready" }) }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs3("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
-                  /* @__PURE__ */ jsx3(
+                ] }) : /* @__PURE__ */ jsx5(Fragment3, { children: "Microphone ready" }) }),
+                !narrationOn && recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsxs4("div", { style: { ...previewBoxStyle, position: "relative" }, children: [
+                  /* @__PURE__ */ jsx5(
                     "video",
                     {
                       src: playbackUrl,
@@ -2716,7 +3188,7 @@ function RecorderModal({
                       style: { width: "100%", height: "100%", objectFit: "contain" }
                     }
                   ),
-                  /* @__PURE__ */ jsxs3(
+                  /* @__PURE__ */ jsxs4(
                     "div",
                     {
                       role: "timer",
@@ -2730,9 +3202,9 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && recorder.state === "stopped" && isDual && cameraPlaybackUrl && /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsx3("div", { style: summaryStyle, children: "Camera (picture-in-picture)" }),
-                  /* @__PURE__ */ jsx3(
+                !narrationOn && recorder.state === "stopped" && isDual && cameraPlaybackUrl && /* @__PURE__ */ jsxs4("div", { style: { marginBottom: 12 }, children: [
+                  /* @__PURE__ */ jsx5("div", { style: summaryStyle, children: "Camera (picture-in-picture)" }),
+                  /* @__PURE__ */ jsx5(
                     "video",
                     {
                       src: cameraPlaybackUrl,
@@ -2748,16 +3220,16 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                !narrationOn && recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 12 }, children: [
-                  /* @__PURE__ */ jsxs3("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
+                !narrationOn && recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs4("div", { style: { marginBottom: 12 }, children: [
+                  /* @__PURE__ */ jsxs4("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
                     "\u2713 Recorded ",
                     formatDurationMs(recorder.durationMs)
                   ] }),
-                  /* @__PURE__ */ jsx3("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
+                  /* @__PURE__ */ jsx5("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
                 ] }),
-                !narrationOn && source === "mic" && /* @__PURE__ */ jsxs3(Fragment3, { children: [
-                  /* @__PURE__ */ jsx3("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
-                  /* @__PURE__ */ jsx3(
+                !narrationOn && !slidesTimingCapture && source === "mic" && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                  /* @__PURE__ */ jsx5("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
+                  /* @__PURE__ */ jsx5(
                     "textarea",
                     {
                       id: "recorder-source-text",
@@ -2769,8 +3241,8 @@ function RecorderModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx3("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx5("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
+                /* @__PURE__ */ jsx5(
                   "input",
                   {
                     id: "recorder-basename",
@@ -2782,12 +3254,28 @@ function RecorderModal({
                     disabled: narrationOn ? !narrationRecorderIdle : recorder.state === "recording"
                   }
                 ),
-                !narrationOn && recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs3("div", { style: recordingStatusStyle, children: [
+                !narrationOn && recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs4("div", { style: recordingStatusStyle, children: [
                   "\u25CF Recording ",
                   formatDurationMs(recorder.durationMs)
                 ] }),
-                /* @__PURE__ */ jsxs3("div", { style: buttonRowStyle, children: [
-                  /* @__PURE__ */ jsx3(
+                showTimingCheckbox && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                  /* @__PURE__ */ jsxs4("label", { style: checkboxRowStyle, children: [
+                    /* @__PURE__ */ jsx5(
+                      "input",
+                      {
+                        type: "checkbox",
+                        style: { accentColor: "var(--squisq-recorder-accent)" },
+                        checked: applySlideTimings,
+                        onChange: (e) => setApplySlideTimings(e.target.checked),
+                        disabled: isSaving
+                      }
+                    ),
+                    SLIDE_TIMING_CHECKBOX_LABEL
+                  ] }),
+                  applySlideTimings && slideCoverageWarning && /* @__PURE__ */ jsx5("p", { style: summaryStyle, children: slideCoverageWarning })
+                ] }),
+                /* @__PURE__ */ jsxs4("div", { style: buttonRowStyle, children: [
+                  /* @__PURE__ */ jsx5(
                     "button",
                     {
                       type: "button",
@@ -2797,8 +3285,8 @@ function RecorderModal({
                       children: "Close"
                     }
                   ),
-                  narrationOn && /* @__PURE__ */ jsxs3(Fragment3, { children: [
-                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx3(
+                  narrationOn && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                    narrationRecorderIdle && !narrationMicLive && /* @__PURE__ */ jsx5(
                       "button",
                       {
                         type: "button",
@@ -2808,14 +3296,14 @@ function RecorderModal({
                         children: narrationRequesting ? "Requesting\u2026" : "Start preview"
                       }
                     ),
-                    narrationRecorderIdle && narrationMicLive && /* @__PURE__ */ jsxs3("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
-                      /* @__PURE__ */ jsx3(
+                    narrationRecorderIdle && narrationMicLive && /* @__PURE__ */ jsxs4("button", { type: "button", style: btnRecord, onClick: handleNarrationRecord, children: [
+                      /* @__PURE__ */ jsx5(
                         "span",
                         {
                           className: "squisq-recorder-record-dot",
                           style: recordDotFrameStyle,
                           "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsx3(
+                          children: /* @__PURE__ */ jsx5(
                             "span",
                             {
                               className: "squisq-recorder-record-dot-center",
@@ -2826,7 +3314,7 @@ function RecorderModal({
                       ),
                       "Record"
                     ] }),
-                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx3(
+                    (stage.recorder.state === "recording" || stage.recorder.state === "starting") && /* @__PURE__ */ jsx5(
                       "button",
                       {
                         type: "button",
@@ -2835,11 +3323,11 @@ function RecorderModal({
                         children: "Stop"
                       }
                     ),
-                    stage.recorder.state === "processing" && /* @__PURE__ */ jsx3("span", { style: recordingStatusStyle, children: "Aligning take\u2026" }),
-                    stage.recorder.state === "saving" && /* @__PURE__ */ jsx3("span", { style: recordingStatusStyle, children: "Saving\u2026" }),
-                    stage.recorder.state === "review" && stage.recorder.take && /* @__PURE__ */ jsxs3(Fragment3, { children: [
-                      /* @__PURE__ */ jsx3("button", { type: "button", style: btnSecondary, onClick: stage.handleRetake, children: "Discard & re-record" }),
-                      /* @__PURE__ */ jsx3(
+                    stage.recorder.state === "processing" && /* @__PURE__ */ jsx5("span", { style: recordingStatusStyle, children: "Aligning take\u2026" }),
+                    stage.recorder.state === "saving" && /* @__PURE__ */ jsx5("span", { style: recordingStatusStyle, children: "Saving\u2026" }),
+                    stage.recorder.state === "review" && stage.recorder.take && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                      /* @__PURE__ */ jsx5("button", { type: "button", style: btnSecondary, onClick: stage.handleRetake, children: "Discard & re-record" }),
+                      /* @__PURE__ */ jsx5(
                         "button",
                         {
                           type: "button",
@@ -2850,8 +3338,8 @@ function RecorderModal({
                       )
                     ] })
                   ] }),
-                  !narrationOn && /* @__PURE__ */ jsxs3(Fragment3, { children: [
-                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx3(
+                  !narrationOn && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                    (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx5(
                       "button",
                       {
                         type: "button",
@@ -2861,14 +3349,14 @@ function RecorderModal({
                         children: recorder.state === "requesting" ? "Requesting\u2026" : "Start preview"
                       }
                     ),
-                    canRecord && /* @__PURE__ */ jsxs3("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
-                      /* @__PURE__ */ jsx3(
+                    canRecord && /* @__PURE__ */ jsxs4("button", { type: "button", style: btnRecord, onClick: handleStart, disabled: isBusy, children: [
+                      /* @__PURE__ */ jsx5(
                         "span",
                         {
                           className: "squisq-recorder-record-dot",
                           style: recordDotFrameStyle,
                           "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsx3(
+                          children: /* @__PURE__ */ jsx5(
                             "span",
                             {
                               className: "squisq-recorder-record-dot-center",
@@ -2879,9 +3367,9 @@ function RecorderModal({
                       ),
                       "Record"
                     ] }),
-                    canStop && /* @__PURE__ */ jsx3("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
-                    canSave && /* @__PURE__ */ jsxs3(Fragment3, { children: [
-                      /* @__PURE__ */ jsx3(
+                    canStop && /* @__PURE__ */ jsx5("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
+                    canSave && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                      /* @__PURE__ */ jsx5(
                         "button",
                         {
                           type: "button",
@@ -2891,7 +3379,7 @@ function RecorderModal({
                           children: "Discard & re-record"
                         }
                       ),
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsx5(
                         "button",
                         {
                           type: "button",
@@ -2905,7 +3393,7 @@ function RecorderModal({
                   ] })
                 ] })
               ] }),
-              narrationOn && narration && /* @__PURE__ */ jsx3("div", { style: rightColStyle, children: /* @__PURE__ */ jsx3(
+              narrationOn && narration && /* @__PURE__ */ jsx5("div", { style: rightColStyle, children: /* @__PURE__ */ jsx5(
                 NarrationStage,
                 {
                   stage,
@@ -2916,6 +3404,19 @@ function RecorderModal({
                   showTransportPlay: false,
                   showReviewActions: false
                 }
+              ) }),
+              slidesOn && /* @__PURE__ */ jsx5("div", { style: rightColStyle, children: /* @__PURE__ */ jsx5(
+                RecorderSlidesPanel,
+                {
+                  slides: slideDeck,
+                  index: slideIndex,
+                  onIndexChange: handleSlideIndexChange,
+                  viewport: slidesViewport,
+                  basePath: slides?.basePath,
+                  mediaProvider: slides?.mediaProvider ?? mediaProvider,
+                  recording: recorder.state === "recording",
+                  shownBlockIds
+                }
               ) })
             ] })
           ]
@@ -2926,9 +3427,9 @@ function RecorderModal({
 }
 
 // src/recorder/RecorderPanel.tsx
-import { useCallback as useCallback4, useState as useState4 } from "react";
+import { useCallback as useCallback5, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function RecorderPanel({
   mediaProvider,
   container = null,
@@ -2936,7 +3437,9 @@ function RecorderPanel({
   colorScheme = "light",
   onSave,
   narration = null,
+  slides = null,
   tooltip = "Record media",
+  title,
   className,
   open: controlledOpen,
   onOpenChange,
@@ -2944,16 +3447,16 @@ function RecorderPanel({
 }) {
   const [uncontrolledOpen, setUncontrolledOpen] = useState4(false);
   const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = useCallback4(
+  const setOpen = useCallback5(
     (nextOpen) => {
       if (controlledOpen === void 0) setUncontrolledOpen(nextOpen);
       onOpenChange?.(nextOpen);
     },
     [controlledOpen, onOpenChange]
   );
-  const handleClose = useCallback4(() => setOpen(false), [setOpen]);
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    showTrigger && /* @__PURE__ */ jsx4(
+  const handleClose = useCallback5(() => setOpen(false), [setOpen]);
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    showTrigger && /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -2962,11 +3465,11 @@ function RecorderPanel({
         "aria-label": tooltip,
         "aria-expanded": open,
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx4(Icon, { icon: "fa-solid fa-microphone" })
+        children: /* @__PURE__ */ jsx6(Icon, { icon: "fa-solid fa-microphone" })
       }
     ),
     open && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6(
         RecorderModal,
         {
           mediaProvider,
@@ -2974,6 +3477,8 @@ function RecorderPanel({
           initialMode,
           colorScheme,
           narration,
+          slides,
+          ...title !== void 0 ? { title } : {},
           onClose: handleClose,
           onSave: (result) => {
             onSave?.(result);
@@ -3002,6 +3507,19 @@ export {
   buildRecorderScreenAudioConstraints,
   recorderBitsPerSecond,
   recordedMediaKind,
+  isExpandedPanel,
+  panelModeAfterToggle,
+  clampSlideIndex,
+  slideStepForKey,
+  showSlideTimingCheckbox,
+  unshownSlidesWarning,
+  SLIDE_TIMING_CHECKBOX_LABEL,
+  buildPreviewDoc,
+  documentTitleFromFileName,
+  resolveBlockVisual,
+  buildRecorderSlideDeck,
+  BlockThumbnail,
+  RecorderSlidesPanel,
   useModalDialog,
   RecorderModal,
   RecorderPanel