@bendyline/squisq-editor-react 2.11.26 → 2.12.0

package/NOTICE.md

@@ -25,6 +25,7 @@ Third-party components remain under their respective license terms.
 | @tiptap/react                     | 2.27.3               | MIT                           | https://github.com/ueberdosis/tiptap          |
 | @tiptap/starter-kit               | 2.27.3               | MIT                           | https://github.com/ueberdosis/tiptap          |
 | @tiptap/suggestion                | 2.27.3               | MIT                           | https://github.com/ueberdosis/tiptap          |
+| lucide-react                      | 1.52.0               | ISC                           | https://github.com/lucide-icons/lucide        |
 | mermaid                           | 11.17.2              | MIT                           | https://github.com/mermaid-js/mermaid         |
 | type-fest                         | 4.41.0               | MIT OR CC0-1.0                | https://github.com/sindresorhus/type-fest     |
 | @monaco-editor/react _(bundled)_  | 4.7.0                | MIT                           | https://github.com/suren-atoyan/monaco-react  |

package/dist/{chunk-LR6Q2MK4.js → chunk-4HZMZPWD.js}

@@ -1,6 +1,6 @@
 import {
   RecorderModal
-} from "./chunk-UFK47ZAI.js";
+} from "./chunk-IT3NPQ4J.js";
 
 // src/recorder/RecorderButton.tsx
 import { useCallback, useState } from "react";

package/dist/{chunk-TRBNNRLK.js → chunk-4SZ3UWSL.js}

@@ -5,7 +5,7 @@ import {
 import {
   markdownToTiptap,
   tiptapToMarkdown
-} from "./chunk-HSWWEWT4.js";
+} from "./chunk-WMNL2WEI.js";
 
 // src/InsertMenuItems.tsx
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
@@ -2946,6 +2946,7 @@ export {
   detectLanguageFromFileName,
   resolveFileKind,
   useBlockNavigator,
+  mediaKindFromUrl,
   collectEmbeddedMedia,
   resolveEmbeddedMediaTiming,
   collectEmbeddedVideoSchedule,

package/dist/{chunk-K4Z2GIX4.js → chunk-HLU6ZBS7.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-GS7QWYFT.js";
+} from "./chunk-UYB5CPRE.js";
 
 // src/ImageViewer.tsx
 import { useCallback, useEffect, useRef, useState } from "react";

package/dist/{chunk-UFK47ZAI.js → chunk-IT3NPQ4J.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-LRZJD5YD.js";
 import {
   Icon
-} from "./chunk-GS7QWYFT.js";
+} from "./chunk-UYB5CPRE.js";
 import {
   NarrationStage,
   buildTimingJson,
@@ -1851,7 +1851,9 @@ function resolveSlideVisual(doc, block, slide, theme, viewport, index, totalBloc
 }
 
 // src/recorder/slides/RecorderSlidesPanel.tsx
-import { useCallback as useCallback3 } from "react";
+import { useBuildNavigation } from "@bendyline/squisq-react";
+import { blockBuildSteps, buildSourceText } from "@bendyline/squisq/doc";
+import { useCallback as useCallback3, useEffect as useEffect4 } from "react";
 
 // src/TimelineBlockPreview.tsx
 import { memo } from "react";
@@ -1860,11 +1862,21 @@ import { BlockRenderer, MediaContext } from "@bendyline/squisq-react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var BlockThumbnail = memo(function BlockThumbnail2({
   visual,
+  buildPlayback = "all",
   viewport = VIEWPORT_PRESETS.landscape,
   basePath = "/",
   mediaProvider = null
 }) {
-  return /* @__PURE__ */ jsx3(MediaContext.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx3(BlockRenderer, { block: visual, blockTime: 0, basePath, viewport }) });
+  return /* @__PURE__ */ jsx3(MediaContext.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx3(
+    BlockRenderer,
+    {
+      buildPlayback,
+      block: visual,
+      blockTime: 0,
+      basePath,
+      viewport
+    }
+  ) });
 });
 
 // src/recorder/slides/RecorderSlidesPanel.tsx
@@ -1949,13 +1961,28 @@ function RecorderSlidesPanel({
   basePath = "/",
   mediaProvider = null,
   recording = false,
-  shownBlockIds
+  shownBlockIds,
+  onBuildShown
 }) {
   const count = slides.length;
   const active = slides[clampSlideIndex(index, count)];
+  const builds = useBuildNavigation(active?.visual, true, true);
+  const { next: nextBuild, previous: previousBuild, enter: enterBuild } = builds;
+  const sourceText = active?.visual ? buildSourceText(blockBuildSteps(active.visual)) : "";
+  useEffect4(() => {
+    if (!active || !onBuildShown) return;
+    for (let step2 = 0; step2 < builds.cursor.revealed; step2++)
+      onBuildShown(active.blockId, step2, sourceText);
+  }, [active, builds.cursor.revealed, sourceText, recording, onBuildShown]);
   const step = useCallback3(
-    (delta) => onIndexChange(clampSlideIndex(index + delta, count)),
-    [index, count, onIndexChange]
+    (delta) => {
+      if (delta > 0 ? nextBuild() : previousBuild()) return;
+      const next = clampSlideIndex(index + delta, count);
+      if (next === index) return;
+      enterBuild(slides[next]?.visual, delta < 0);
+      onIndexChange(next);
+    },
+    [index, count, onIndexChange, nextBuild, previousBuild, enterBuild, slides]
   );
   const handleKeyDown = useCallback3(
     (event) => {
@@ -1985,7 +2012,8 @@ function RecorderSlidesPanel({
             "Slide ",
             index + 1,
             " of ",
-            count
+            count,
+            builds.count > 0 ? ` \xB7 Build ${builds.cursor.revealed} of ${builds.count}` : ""
           ] }),
           /* @__PURE__ */ jsx4("span", { style: dotsStyle, "aria-hidden": "true", children: slides.map((slide, i) => /* @__PURE__ */ jsx4(
             "span",
@@ -2005,7 +2033,7 @@ function RecorderSlidesPanel({
               type: "button",
               style: navButtonStyle,
               onClick: () => step(-1),
-              disabled: index <= 0,
+              disabled: index <= 0 && builds.cursor.revealed === 0,
               "aria-label": "Previous slide",
               children: /* @__PURE__ */ jsx4(Icon, { icon: "fa-solid fa-chevron-left" })
             }
@@ -2016,7 +2044,7 @@ function RecorderSlidesPanel({
               type: "button",
               style: navButtonStyle,
               onClick: () => step(1),
-              disabled: index >= count - 1,
+              disabled: index >= count - 1 && builds.cursor.revealed >= builds.count && builds.cursor.progress >= 1,
               "aria-label": "Next slide",
               children: /* @__PURE__ */ jsx4(Icon, { icon: "fa-solid fa-chevron-right" })
             }
@@ -2036,6 +2064,7 @@ function RecorderSlidesPanel({
               BlockThumbnail,
               {
                 visual: active.visual,
+                buildPlayback: builds.cursor,
                 viewport,
                 basePath,
                 mediaProvider
@@ -2074,10 +2103,11 @@ function RecorderSlidesPanel({
 }
 
 // src/recorder/RecorderModal.tsx
+import { recordBuildAdvance } from "@bendyline/squisq/schemas";
 import {
   Fragment as Fragment2,
   useCallback as useCallback4,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useId as useId2,
   useMemo,
   useRef as useRef2,
@@ -2708,6 +2738,19 @@ function RecorderModal({
   const slidesAvailable = slideDeck.length > 0;
   const slidesCaptureTimings = Boolean(slides?.captureTimings && slides?.doc);
   const [slideIndex, setSlideIndex] = useState3(0);
+  const [buildLog, setBuildLog] = useState3([]);
+  const buildLogRef = useRef2(buildLog);
+  buildLogRef.current = buildLog;
+  const handleBuildShown = useCallback4(
+    (blockId, step, sourceText2) => {
+      const elapsed = recorder.getElapsedMs();
+      if (elapsed !== null)
+        setBuildLog(
+          (log) => recordBuildAdvance(log, { blockId, step, sourceText: sourceText2, time: elapsed / 1e3 })
+        );
+    },
+    [recorder]
+  );
   const [advanceLog, setAdvanceLog] = useState3(EMPTY_ADVANCE_LOG);
   const [applySlideTimings, setApplySlideTimings] = useState3(true);
   const slideIndexRef = useRef2(slideIndex);
@@ -2732,11 +2775,12 @@ function RecorderModal({
     [recorder]
   );
   const slideDeckKey = slideDeck.map((slide) => slide.blockId).join("\0");
-  useEffect4(() => {
+  useEffect5(() => {
     setAdvanceLog(EMPTY_ADVANCE_LOG);
+    setBuildLog([]);
     setSlideIndex(0);
   }, [slidesOn, slideDeckKey]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!narrationOn || narrationRecording) return;
     const controller = stageRef.current.controller;
     if (recorder.state === "recording") controller.play();
@@ -2754,7 +2798,7 @@ function RecorderModal({
     [narrationRecording]
   );
   const narrationMicDeviceId = stage.controller.prefs.micDeviceId ?? "";
-  useEffect4(() => {
+  useEffect5(() => {
     if (!narrationRecording) return;
     setDeviceSettings(
       (current) => current.audio.deviceId === narrationMicDeviceId ? current : {
@@ -2764,7 +2808,7 @@ function RecorderModal({
     );
   }, [narrationMicDeviceId, narrationRecording]);
   const prevNarrationOnRef = useRef2(narrationOn);
-  useEffect4(() => {
+  useEffect5(() => {
     const was = prevNarrationOnRef.current;
     prevNarrationOnRef.current = narrationOn;
     if (was === narrationOn) return;
@@ -2779,7 +2823,7 @@ function RecorderModal({
       if (s.float.isOpen) s.float.close();
     }
   }, [narrationOn, narrationRecording, recorder]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!narrationOn) return;
     const onKey = (event) => {
       if (event.key !== "Escape") return;
@@ -2792,7 +2836,7 @@ function RecorderModal({
   const narrationMicLive = stage.controller.mic.status === "live";
   const narrationPreviewWanted = narrationRecording && stage.recorder.withCamera && narrationMicLive && stage.recorder.cameraStream === null && stage.recorder.state !== "processing" && stage.recorder.state !== "review" && stage.recorder.state !== "saving";
   const narrationPreviewRef = useRef2(null);
-  useEffect4(() => {
+  useEffect5(() => {
     const existing = narrationPreviewRef.current;
     if (existing) {
       for (const track of existing.getTracks()) track.stop();
@@ -2843,7 +2887,7 @@ function RecorderModal({
   const activePrimaryStream = narrationRecording ? stage.controller.mic.stream : recorder.stream;
   const activeCameraStream = narrationRecording ? narrationCameraStream : recorder.camera?.stream ?? null;
   const { devices: mediaDevices, refresh: refreshMediaDevices } = useMediaDevices();
-  useEffect4(() => {
+  useEffect5(() => {
     if (activePrimaryStream || activeCameraStream) refreshMediaDevices();
   }, [activeCameraStream, activePrimaryStream, refreshMediaDevices]);
   useStreamPreview(
@@ -2854,7 +2898,7 @@ function RecorderModal({
     cameraPreviewRef,
     !narrationRecording && isDual && recorder.state !== "stopped" ? recorder.camera?.stream ?? null : null
   );
-  useEffect4(() => {
+  useEffect5(() => {
     setPlaybackPositionMs(0);
     if (!recorder.blob) {
       setPlaybackUrl(null);
@@ -2867,7 +2911,7 @@ function RecorderModal({
     };
   }, [recorder.blob]);
   const cameraBlob = recorder.camera?.blob ?? null;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!cameraBlob) {
       setCameraPlaybackUrl(null);
       return;
@@ -2881,7 +2925,7 @@ function RecorderModal({
   const captureKey = `${source}:${cameraOn ? micOn : ""}:${includeSystemAudio}:${JSON.stringify(deviceSettings)}`;
   const previousKeyRef = useRef2(captureKey);
   const dualSaveProgressRef = useRef2({});
-  useEffect4(() => {
+  useEffect5(() => {
     if (previousKeyRef.current !== captureKey) {
       previousKeyRef.current = captureKey;
       dualSaveProgressRef.current = {};
@@ -2937,6 +2981,7 @@ function RecorderModal({
       setCountingIn(false);
       if (!rolled) return;
     }
+    setBuildLog([]);
     recorder.start();
     const blockId = slideDeckRef.current[slideIndexRef.current]?.blockId;
     setAdvanceLog(blockId ? recordSlideShown(EMPTY_ADVANCE_LOG, blockId, 0) : EMPTY_ADVANCE_LOG);
@@ -2955,7 +3000,10 @@ function RecorderModal({
       if (!slidesOn || !slidesCaptureTimings || !applySlideTimings || !doc) return null;
       const log = advanceLogRef.current;
       if (log.length === 0) return null;
-      const timing = buildAdvanceTimingJson(doc, log, durationSec);
+      const timing = {
+        ...buildAdvanceTimingJson(doc, log, durationSec),
+        builds: buildLogRef.current
+      };
       const encoded = encodeNarrationTimingJson(timing);
       const sidecarPath = timingPathFor(mediaRelativePath);
       if (container) {
@@ -3167,13 +3215,16 @@ function RecorderModal({
     [source, recorder.extension, recorder.blob, isDual, basename, filenameSeed]
   );
   const timingDownloadFilename = `${downloadFilename}.timing.json`;
-  useEffect4(() => {
+  useEffect5(() => {
     if (narrationRecording || !canSave) {
       setTimingDownloadUrl(null);
       return;
     }
     const duration = recorder.durationMs / 1e3;
-    const encoded = slidesOn && slidesCaptureTimings && applySlideTimings && slides?.doc && advanceLog.length > 0 ? encodeNarrationTimingJson(buildAdvanceTimingJson(slides.doc, advanceLog, duration)) : source === "mic" ? encodeTimingJson(buildTimingJson(sourceText, duration)) : null;
+    const encoded = slidesOn && slidesCaptureTimings && applySlideTimings && slides?.doc && advanceLog.length > 0 ? encodeNarrationTimingJson({
+      ...buildAdvanceTimingJson(slides.doc, advanceLog, duration),
+      builds: buildLog
+    }) : source === "mic" ? encodeTimingJson(buildTimingJson(sourceText, duration)) : null;
     if (encoded === null) {
       setTimingDownloadUrl(null);
       return;
@@ -3187,6 +3238,7 @@ function RecorderModal({
     narrationRecording,
     canSave,
     recorder.durationMs,
+    buildLog,
     slidesOn,
     slidesCaptureTimings,
     applySlideTimings,
@@ -3764,6 +3816,7 @@ function RecorderModal({
                   slides: slideDeck,
                   index: slideIndex,
                   onIndexChange: handleSlideIndexChange,
+                  onBuildShown: handleBuildShown,
                   viewport: slidesViewport,
                   basePath: slides?.basePath,
                   mediaProvider: slides?.mediaProvider ?? mediaProvider,

package/dist/{chunk-OCQEWWHI.js → chunk-KI5XQWRU.js}

@@ -1,6 +1,6 @@
 import {
   MARKDOWN_ESCAPE_ATTR
-} from "./chunk-HSWWEWT4.js";
+} from "./chunk-WMNL2WEI.js";
 
 // src/MarkdownEscape.ts
 import { Mark, mergeAttributes } from "@tiptap/core";

package/dist/{chunk-V2OLZOYJ.js → chunk-PXO3D42N.js}

@@ -1,10 +1,10 @@
 import {
   MarkdownEscape
-} from "./chunk-OCQEWWHI.js";
+} from "./chunk-KI5XQWRU.js";
 import {
   markdownToTiptap,
   tiptapToMarkdown
-} from "./chunk-HSWWEWT4.js";
+} from "./chunk-WMNL2WEI.js";
 
 // src/jsonEditor/JsonEditorContext.tsx
 import { createContext, useContext, useEffect, useMemo } from "react";