@mieweb/ui 0.7.1-dev.2 → 0.7.1-dev.4

package/dist/{chunk-7VF6WO7H.cjs → chunk-MBESCEWS.cjs}

@@ -7,7 +7,7 @@ var chunkDAPZPT5N_cjs = require('./chunk-DAPZPT5N.cjs');
 var chunkKJPOFUF5_cjs = require('./chunk-KJPOFUF5.cjs');
 var chunkMSRU3XBH_cjs = require('./chunk-MSRU3XBH.cjs');
 var chunkA2QVQF54_cjs = require('./chunk-A2QVQF54.cjs');
-var chunkFCBQP2U4_cjs = require('./chunk-FCBQP2U4.cjs');
+var chunkO5UJRGRV_cjs = require('./chunk-O5UJRGRV.cjs');
 var chunkNUFUV43P_cjs = require('./chunk-NUFUV43P.cjs');
 var React6 = require('react');
 var classVarianceAuthority = require('class-variance-authority');
@@ -54,12 +54,12 @@ var FillerWordsModal = ({
 }) => {
   const [searchTerm, setSearchTerm] = React6__namespace.useState("");
   const [selectedFillers, setSelectedFillers] = React6__namespace.useState(
-    new Set(chunkFCBQP2U4_cjs.DEFAULT_FILLER_WORDS)
+    new Set(chunkO5UJRGRV_cjs.DEFAULT_FILLER_WORDS)
   );
   const [customWord, setCustomWord] = React6__namespace.useState("");
   const [removeSilence, setRemoveSilence] = React6__namespace.useState(false);
   const [silenceThreshold, setSilenceThreshold] = React6__namespace.useState(0.4);
-  const filteredFillers = chunkFCBQP2U4_cjs.DEFAULT_FILLER_WORDS.filter(
+  const filteredFillers = chunkO5UJRGRV_cjs.DEFAULT_FILLER_WORDS.filter(
     (word) => word.toLowerCase().includes(searchTerm.toLowerCase())
   ).sort((a, b) => {
     const countA = matchingCounts.get(a) || 0;
@@ -67,7 +67,7 @@ var FillerWordsModal = ({
     if (countB !== countA) return countB - countA;
     return a.localeCompare(b);
   });
-  const customFillers = Array.from(selectedFillers).filter((word) => !chunkFCBQP2U4_cjs.DEFAULT_FILLER_WORDS.includes(word)).filter((word) => word.toLowerCase().includes(searchTerm.toLowerCase())).sort((a, b) => {
+  const customFillers = Array.from(selectedFillers).filter((word) => !chunkO5UJRGRV_cjs.DEFAULT_FILLER_WORDS.includes(word)).filter((word) => word.toLowerCase().includes(searchTerm.toLowerCase())).sort((a, b) => {
     const countA = matchingCounts.get(a) || 0;
     const countB = matchingCounts.get(b) || 0;
     if (countB !== countA) return countB - countA;
@@ -105,7 +105,7 @@ var FillerWordsModal = ({
     onClose();
   };
   const selectAll = () => {
-    setSelectedFillers(/* @__PURE__ */ new Set([...chunkFCBQP2U4_cjs.DEFAULT_FILLER_WORDS, ...customFillers]));
+    setSelectedFillers(/* @__PURE__ */ new Set([...chunkO5UJRGRV_cjs.DEFAULT_FILLER_WORDS, ...customFillers]));
   };
   const selectNone = () => {
     setSelectedFillers(/* @__PURE__ */ new Set());
@@ -882,6 +882,11 @@ function wordClassName(s) {
   if (s.hasSpeedMarker) {
     parts.push("ml-0.5 border-l-[3px] border-l-warning pl-1.5");
   }
+  if (s.isSped) {
+    parts.push(
+      "underline decoration-warning decoration-dotted decoration-2 underline-offset-4"
+    );
+  }
   return parts.join(" ");
 }
 var Caret = ({ side }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -898,18 +903,23 @@ var MediaEditor = React6__namespace.forwardRef(
     transcript,
     initialEditedWords,
     initialUndoStack,
+    initialSpeedMarkers,
+    initialDefaultSpeed,
     onEditorStateChange,
     onHasEditsChange,
     onCursorTimestampChange,
     onEditedWordsRender,
+    onSpeedStateChange,
     playerRef: externalPlayerRef,
     className,
     splitLayout
   }, ref) => {
-    const edits = chunkFCBQP2U4_cjs.useTranscriptEdits({
+    const edits = chunkO5UJRGRV_cjs.useTranscriptEdits({
       transcript,
       initialEditedWords,
       initialUndoStack,
+      initialSpeedMarkers,
+      initialDefaultSpeed,
       onChange: onEditorStateChange
     });
     const {
@@ -934,6 +944,7 @@ var MediaEditor = React6__namespace.forwardRef(
       defaultSpeed,
       setDefaultSpeed,
       toggleSpeedMarker,
+      setSpeedForRange,
       removeSpeedMarker,
       getSpeedAtIndex,
       getSpeedMarkerAtIndex,
@@ -987,6 +998,10 @@ var MediaEditor = React6__namespace.forwardRef(
       null
     );
     const longPressTriggered = React6__namespace.useRef(false);
+    const selectionAnchorRef = React6__namespace.useRef(null);
+    const dragPointer = React6__namespace.useRef(null);
+    const dragScrollFrame = React6__namespace.useRef(null);
+    const dragListeners = React6__namespace.useRef(null);
     const wordPlaybackStartMs = React6__namespace.useRef(null);
     const wordPlaybackEndMs = React6__namespace.useRef(null);
     const sequenceSegments = React6__namespace.useRef([]);
@@ -997,6 +1012,13 @@ var MediaEditor = React6__namespace.forwardRef(
     React6__namespace.useEffect(() => {
       onEditedWordsRender?.(editedWords);
     }, [editedWords, onEditedWordsRender]);
+    const onSpeedStateChangeRef = React6__namespace.useRef(onSpeedStateChange);
+    React6__namespace.useEffect(() => {
+      onSpeedStateChangeRef.current = onSpeedStateChange;
+    });
+    React6__namespace.useEffect(() => {
+      onSpeedStateChangeRef.current?.(speedMarkers, defaultSpeed);
+    }, [speedMarkers, defaultSpeed]);
     React6__namespace.useEffect(() => {
       if (onCursorTimestampChange) {
         const word = editedWords[cursorIndex];
@@ -1236,6 +1258,157 @@ var MediaEditor = React6__namespace.forwardRef(
         setSelection(null);
       }
     };
+    const AUTOSCROLL_EDGE_PX = 24;
+    const AUTOSCROLL_MAX_STEP_PX = 24;
+    const extendDragSelection = (index) => {
+      const anchor = selectionAnchorRef.current;
+      if (!isDragging.current || anchor === null) return;
+      setSelection({
+        start: Math.min(anchor, index),
+        end: Math.max(anchor, index)
+      });
+      setCursorIndex(index);
+    };
+    const wordIndexAtPoint = (x, y) => {
+      const span = document.elementFromPoint?.(x, y)?.closest?.("[data-word-index]");
+      if (!span) return null;
+      const parsed = Number(span.dataset.wordIndex);
+      return Number.isInteger(parsed) ? parsed : null;
+    };
+    const extendSelectionToPointer = () => {
+      const container = contentRef.current;
+      const pointer = dragPointer.current;
+      if (!container || !pointer) return;
+      const rect = container.getBoundingClientRect();
+      const top = Math.max(rect.top, 0);
+      const bottom = Math.min(rect.bottom, window.innerHeight);
+      const left = Math.max(rect.left, 0);
+      const right = Math.min(rect.right, window.innerWidth);
+      if (bottom <= top || right <= left) return;
+      const y = Math.min(Math.max(pointer.y, top + 2), bottom - 2);
+      const x = Math.min(Math.max(pointer.x, left + 2), right - 2);
+      for (const rawX of [x, left + (right - left) / 2, left + 16]) {
+        const probeX = Math.min(Math.max(rawX, left + 2), right - 2);
+        const index = wordIndexAtPoint(probeX, y);
+        if (index !== null) {
+          extendDragSelection(index);
+          return;
+        }
+      }
+      const spans = container.querySelectorAll("[data-word-index]");
+      if (spans.length === 0) return;
+      if (spans[0].getBoundingClientRect().top > y) {
+        const parsed = Number(spans[0].dataset.wordIndex);
+        if (Number.isInteger(parsed)) extendDragSelection(parsed);
+        return;
+      }
+      for (let i = spans.length - 1; i >= 0; i--) {
+        const spanRect = spans[i].getBoundingClientRect();
+        if (spanRect.top <= y) {
+          const parsed = Number(spans[i].dataset.wordIndex);
+          if (Number.isInteger(parsed)) extendDragSelection(parsed);
+          return;
+        }
+      }
+    };
+    const stepDragAutoScroll = () => {
+      dragScrollFrame.current = null;
+      const container = contentRef.current;
+      const pointer = dragPointer.current;
+      if (!isDragging.current || !container || !pointer) return;
+      const rect = container.getBoundingClientRect();
+      const top = Math.max(rect.top, 0);
+      const bottom = Math.min(rect.bottom, window.innerHeight);
+      if (bottom <= top) {
+        dragScrollFrame.current = requestAnimationFrame(stepDragAutoScroll);
+        return;
+      }
+      let step = 0;
+      if (pointer.y < top + AUTOSCROLL_EDGE_PX) {
+        step = Math.max(
+          (pointer.y - (top + AUTOSCROLL_EDGE_PX)) / 3,
+          -AUTOSCROLL_MAX_STEP_PX
+        );
+      } else if (pointer.y > bottom - AUTOSCROLL_EDGE_PX) {
+        step = Math.min(
+          (pointer.y - (bottom - AUTOSCROLL_EDGE_PX)) / 3,
+          AUTOSCROLL_MAX_STEP_PX
+        );
+      }
+      if (step !== 0) {
+        const before = container.scrollTop;
+        container.scrollTop += step;
+        if (container.scrollTop !== before) {
+          extendSelectionToPointer();
+        }
+      }
+      dragScrollFrame.current = requestAnimationFrame(stepDragAutoScroll);
+    };
+    const detachDragListeners = () => {
+      if (dragListeners.current) {
+        document.removeEventListener("mousemove", dragListeners.current.move);
+        document.removeEventListener("mouseup", dragListeners.current.up);
+        dragListeners.current = null;
+      }
+      if (dragScrollFrame.current !== null) {
+        cancelAnimationFrame(dragScrollFrame.current);
+        dragScrollFrame.current = null;
+      }
+    };
+    const handleMouseUp = () => {
+      if (longPressTimer.current) {
+        clearTimeout(longPressTimer.current);
+        longPressTimer.current = null;
+      }
+      if (isDragging.current) {
+        isDragging.current = false;
+      }
+      detachDragListeners();
+    };
+    const beginDragTracking = () => {
+      detachDragListeners();
+      const up = () => handleMouseUp();
+      const move = (e) => {
+        if (!isDragging.current) return;
+        if (e.buttons === 0) {
+          up();
+          return;
+        }
+        dragPointer.current = { x: e.clientX, y: e.clientY };
+        const container = contentRef.current;
+        if (container && longPressTimer.current) {
+          const rect = container.getBoundingClientRect();
+          const outside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
+          if (outside) {
+            clearTimeout(longPressTimer.current);
+            longPressTimer.current = null;
+          }
+        }
+        extendSelectionToPointer();
+      };
+      dragListeners.current = { move, up };
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+      dragScrollFrame.current = requestAnimationFrame(stepDragAutoScroll);
+    };
+    React6__namespace.useEffect(
+      () => () => {
+        if (dragListeners.current) {
+          document.removeEventListener("mousemove", dragListeners.current.move);
+          document.removeEventListener("mouseup", dragListeners.current.up);
+          dragListeners.current = null;
+        }
+        if (dragScrollFrame.current !== null) {
+          cancelAnimationFrame(dragScrollFrame.current);
+          dragScrollFrame.current = null;
+        }
+        if (longPressTimer.current) {
+          clearTimeout(longPressTimer.current);
+          longPressTimer.current = null;
+        }
+      },
+      []
+    );
     const handleWordMouseDown = (index, e) => {
       if (e.button !== 0) return;
       longPressTriggered.current = false;
@@ -1244,31 +1417,20 @@ var MediaEditor = React6__namespace.forwardRef(
         openWordEditor(index);
       }, 500);
       isDragging.current = true;
+      selectionAnchorRef.current = index;
+      dragPointer.current = { x: e.clientX, y: e.clientY };
       setSelectionAnchor(index);
       setCursorIndex(index);
       setCursorPosition("before");
       setSelection(null);
+      beginDragTracking();
     };
     const handleWordMouseEnter = (index) => {
       if (longPressTimer.current) {
         clearTimeout(longPressTimer.current);
         longPressTimer.current = null;
       }
-      if (!isDragging.current || selectionAnchor === null) return;
-      setSelection({
-        start: Math.min(selectionAnchor, index),
-        end: Math.max(selectionAnchor, index)
-      });
-      setCursorIndex(index);
-    };
-    const handleMouseUp = () => {
-      if (longPressTimer.current) {
-        clearTimeout(longPressTimer.current);
-        longPressTimer.current = null;
-      }
-      if (isDragging.current) {
-        isDragging.current = false;
-      }
+      extendDragSelection(index);
     };
     const handleWordContextMenu = (index, e) => {
       e.preventDefault();
@@ -1485,7 +1647,8 @@ var MediaEditor = React6__namespace.forwardRef(
               isSilenceNewline,
               isAnchor,
               isFocused,
-              hasSpeedMarker
+              hasSpeedMarker,
+              isSped: effectiveSpeed !== defaultSpeed
             }),
             onClick: (e) => handleWordClick(ew.word, index, e),
             onDoubleClick: (e) => handleWordDoubleClick(index, e),
@@ -1723,7 +1886,6 @@ var MediaEditor = React6__namespace.forwardRef(
                           onFocus: () => setIsFocused(true),
                           onBlur: () => setIsFocused(false),
                           onMouseUp: handleMouseUp,
-                          onMouseLeave: handleMouseUp,
                           role: "listbox",
                           "aria-label": "Transcript words",
                           "aria-activedescendant": `word-${cursorIndex}`,
@@ -1787,7 +1949,10 @@ var MediaEditor = React6__namespace.forwardRef(
               currentMarker: speedMenuWordIndex !== null ? getSpeedMarkerAtIndex(speedMenuWordIndex) : void 0,
               defaultSpeed,
               onSetSpeed: (speed) => {
-                if (speedMenuWordIndex !== null) {
+                if (speedMenuWordIndex === null) return;
+                if (selection) {
+                  setSpeedForRange(selection.start, selection.end, speed);
+                } else {
                   toggleSpeedMarker(speedMenuWordIndex, speed);
                 }
               },
@@ -1814,5 +1979,5 @@ exports.MediaEditor = MediaEditor;
 exports.SilenceSettingsModal = SilenceSettingsModal;
 exports.SpeedMarkerMenu = SpeedMarkerMenu;
 exports.WordEditorModal = WordEditorModal;
-//# sourceMappingURL=chunk-7VF6WO7H.cjs.map
-//# sourceMappingURL=chunk-7VF6WO7H.cjs.map
+//# sourceMappingURL=chunk-MBESCEWS.cjs.map
+//# sourceMappingURL=chunk-MBESCEWS.cjs.map