@mieweb/ui 0.7.1 → 0.7.2

package/dist/{chunk-MCCO4A23.js → chunk-NGLI2MSM.js}

@@ -1,11 +1,11 @@
-import { Slider } from './chunk-JBB25LFB.js';
-import { MediaPlayer } from './chunk-KOCTIB6U.js';
-import { Checkbox } from './chunk-XCLQZ4FV.js';
-import { Select } from './chunk-J7Z7467B.js';
-import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-IUFDGB5O.js';
-import { Input } from './chunk-PVUDXJAI.js';
-import { Button } from './chunk-ZVSW2KS6.js';
-import { useTranscriptEdits, DEFAULT_FILLER_WORDS } from './chunk-OOYEHBYJ.js';
+import { Slider } from './chunk-OTQ72WX3.js';
+import { MediaPlayer } from './chunk-PS5INHGC.js';
+import { Checkbox } from './chunk-KFLDXJEE.js';
+import { Select } from './chunk-DLBV42JD.js';
+import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-XMCIXHGH.js';
+import { Input } from './chunk-YXCE2HSK.js';
+import { Button } from './chunk-WRYZ2752.js';
+import { useTranscriptEdits, DEFAULT_FILLER_WORDS } from './chunk-UUI7WXI5.js';
 import { isSilenceType, PLAYBACK_SPEEDS } from './chunk-6CGM5H4J.js';
 import * as React6 from 'react';
 import { cva } from 'class-variance-authority';
@@ -801,6 +801,22 @@ var mediaEditorVariants = cva(
     }
   }
 );
+function scrollWordIntoTranscript(container, wordIndex) {
+  if (!container) return;
+  if (container.scrollHeight <= container.clientHeight) return;
+  const el = container.querySelector(`[data-word-index="${wordIndex}"]`);
+  if (!el) return;
+  const containerBox = container.getBoundingClientRect();
+  const wordBox = el.getBoundingClientRect();
+  const above = wordBox.top - containerBox.top;
+  const below = wordBox.bottom - containerBox.bottom;
+  const delta = above < 0 ? above : below > 0 ? below : 0;
+  if (delta === 0) return;
+  container.scrollTo({
+    top: container.scrollTop + delta,
+    behavior: "smooth"
+  });
+}
 function formatDuration2(ms) {
   const totalSeconds = Math.round(ms / 1e3);
   if (totalSeconds < 90) {
@@ -860,6 +876,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__ */ jsx(
@@ -876,10 +897,19 @@ var MediaEditor = React6.forwardRef(
     transcript,
     initialEditedWords,
     initialUndoStack,
+    initialSpeedMarkers,
+    initialDefaultSpeed,
     onEditorStateChange,
     onHasEditsChange,
     onCursorTimestampChange,
     onEditedWordsRender,
+    onSpeedStateChange,
+    onUndoBeyond,
+    canUndoBeyond = false,
+    undoBeyondLabel,
+    onRedo,
+    canRedo = false,
+    redoLabel,
     playerRef: externalPlayerRef,
     className,
     splitLayout
@@ -888,6 +918,8 @@ var MediaEditor = React6.forwardRef(
       transcript,
       initialEditedWords,
       initialUndoStack,
+      initialSpeedMarkers,
+      initialDefaultSpeed,
       onChange: onEditorStateChange
     });
     const {
@@ -896,6 +928,8 @@ var MediaEditor = React6.forwardRef(
       clipboard,
       hasEdits,
       undo,
+      redo,
+      canRedo: canRedoWords,
       toggleWordDeleted,
       deleteRange,
       cut,
@@ -912,6 +946,7 @@ var MediaEditor = React6.forwardRef(
       defaultSpeed,
       setDefaultSpeed,
       toggleSpeedMarker,
+      setSpeedForRange,
       removeSpeedMarker,
       getSpeedAtIndex,
       getSpeedMarkerAtIndex,
@@ -919,6 +954,9 @@ var MediaEditor = React6.forwardRef(
       stats,
       fillerAnalysis
     } = edits;
+    const canUndoAnything = undoStack.length > 0 || canUndoBeyond && !!onUndoBeyond;
+    const canRedoAnything = canRedoWords || canRedo && !!onRedo;
+    const showUndoRedo = canUndoAnything || canRedoAnything || !!onRedo;
     const [activeWordIndex, setActiveWordIndex] = React6.useState(
       null
     );
@@ -965,6 +1003,10 @@ var MediaEditor = React6.forwardRef(
       null
     );
     const longPressTriggered = React6.useRef(false);
+    const selectionAnchorRef = React6.useRef(null);
+    const dragPointer = React6.useRef(null);
+    const dragScrollFrame = React6.useRef(null);
+    const dragListeners = React6.useRef(null);
     const wordPlaybackStartMs = React6.useRef(null);
     const wordPlaybackEndMs = React6.useRef(null);
     const sequenceSegments = React6.useRef([]);
@@ -975,6 +1017,13 @@ var MediaEditor = React6.forwardRef(
     React6.useEffect(() => {
       onEditedWordsRender?.(editedWords);
     }, [editedWords, onEditedWordsRender]);
+    const onSpeedStateChangeRef = React6.useRef(onSpeedStateChange);
+    React6.useEffect(() => {
+      onSpeedStateChangeRef.current = onSpeedStateChange;
+    });
+    React6.useEffect(() => {
+      onSpeedStateChangeRef.current?.(speedMarkers, defaultSpeed);
+    }, [speedMarkers, defaultSpeed]);
     React6.useEffect(() => {
       if (onCursorTimestampChange) {
         const word = editedWords[cursorIndex];
@@ -1012,13 +1061,10 @@ var MediaEditor = React6.forwardRef(
     }, [activeWordIndex]);
     React6.useEffect(() => {
       if (activeWordIndex === null) return;
-      const el = contentRef.current?.querySelector(
-        `[data-word-index="${activeWordIndex}"]`
-      );
-      el?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      scrollWordIntoTranscript(contentRef.current, activeWordIndex);
     }, [activeWordIndex]);
     React6.useEffect(() => {
-      contentRef.current?.focus();
+      contentRef.current?.focus({ preventScroll: true });
     }, [transcript]);
     React6.useEffect(() => {
       const player = playerRef.current;
@@ -1214,6 +1260,157 @@ var MediaEditor = React6.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.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;
@@ -1222,31 +1419,20 @@ var MediaEditor = React6.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();
@@ -1285,6 +1471,10 @@ var MediaEditor = React6.forwardRef(
         } else if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) {
           undo();
           handled = true;
+        } else if ((e.metaKey || e.ctrlKey) && (e.key === "z" && e.shiftKey || e.key === "y")) {
+          if (canRedoWords) redo();
+          else if (canRedo && onRedo) onRedo();
+          handled = true;
         } else if (e.key === "ArrowLeft") {
           if (cursorPosition === "after") {
             setCursorPosition("before");
@@ -1398,10 +1588,7 @@ var MediaEditor = React6.forwardRef(
             setSelection(null);
             setSelectionAnchor(null);
           }
-          const wordElement = contentRef.current?.querySelector(
-            `[data-word-index="${newIndex}"]`
-          );
-          wordElement?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+          scrollWordIntoTranscript(contentRef.current, newIndex);
         }
       },
       [
@@ -1416,6 +1603,10 @@ var MediaEditor = React6.forwardRef(
         handleCut,
         handlePaste,
         undo,
+        redo,
+        canRedoWords,
+        canRedo,
+        onRedo,
         openWordEditor
       ]
     );
@@ -1463,7 +1654,8 @@ var MediaEditor = React6.forwardRef(
               isSilenceNewline,
               isAnchor,
               isFocused,
-              hasSpeedMarker
+              hasSpeedMarker,
+              isSped: effectiveSpeed !== defaultSpeed
             }),
             onClick: (e) => handleWordClick(ew.word, index, e),
             onDoubleClick: (e) => handleWordDoubleClick(index, e),
@@ -1510,7 +1702,7 @@ var MediaEditor = React6.forwardRef(
                 /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: `border-border bg-background min-h-0 shrink-0 ${splitLayout === "vertical" ? "md:w-1/2 md:border-r" : "max-h-[50%] border-b"}`,
+                    className: `border-border bg-background flex min-h-0 shrink-0 ${splitLayout === "vertical" ? "max-h-[55dvh] md:max-h-none md:w-1/2 md:border-r" : "max-h-[55dvh] border-b md:max-h-[50%]"}`,
                     children: /* @__PURE__ */ jsx(
                       MediaPlayer,
                       {
@@ -1577,18 +1769,35 @@ var MediaEditor = React6.forwardRef(
                               children: "\u2702\uFE0F"
                             }
                           ),
-                          undoStack.length > 0 && /* @__PURE__ */ jsxs(
+                          showUndoRedo && /* @__PURE__ */ jsxs(
                             Button,
                             {
                               variant: "ghost",
                               size: "sm",
-                              onClick: undo,
-                              "aria-label": `Undo (${undoStack.length} available)`,
-                              title: "Undo (\u2318Z)",
+                              disabled: !canUndoAnything,
+                              onClick: undoStack.length > 0 ? undo : onUndoBeyond,
+                              "aria-label": undoStack.length > 0 ? `Undo (${undoStack.length} available)` : canUndoBeyond && undoBeyondLabel ? `Undo: ${undoBeyondLabel}` : "Undo",
+                              title: undoStack.length > 0 ? `Undo (\u2318Z) \u2014 ${undoStack.length} step${undoStack.length === 1 ? "" : "s"}` : canUndoBeyond ? undoBeyondLabel ? `Undo (\u2318Z) \u2014 back to "${undoBeyondLabel}"` : "Undo (\u2318Z)" : "Nothing to undo",
                               children: [
-                                "Undo (",
-                                undoStack.length,
-                                ")"
+                                "Undo",
+                                undoStack.length > 0 ? ` (${undoStack.length})` : "",
+                                " ",
+                                /* @__PURE__ */ jsx("kbd", { className: "text-[10px] opacity-60", children: "\u2318Z" })
+                              ]
+                            }
+                          ),
+                          showUndoRedo && /* @__PURE__ */ jsxs(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              onClick: canRedoWords ? redo : onRedo,
+                              disabled: !canRedoAnything,
+                              "aria-label": !canRedoWords && canRedo && redoLabel ? `Redo: ${redoLabel}` : "Redo",
+                              title: canRedoWords ? "Redo (\u21E7\u2318Z)" : canRedo && redoLabel ? `Redo (\u21E7\u2318Z) \u2014 forward to "${redoLabel}"` : canRedo ? "Redo (\u21E7\u2318Z)" : "Nothing to redo",
+                              children: [
+                                "Redo ",
+                                /* @__PURE__ */ jsx("kbd", { className: "text-[10px] opacity-60", children: "\u21E7\u2318Z" })
                               ]
                             }
                           )
@@ -1701,7 +1910,6 @@ var MediaEditor = React6.forwardRef(
                           onFocus: () => setIsFocused(true),
                           onBlur: () => setIsFocused(false),
                           onMouseUp: handleMouseUp,
-                          onMouseLeave: handleMouseUp,
                           role: "listbox",
                           "aria-label": "Transcript words",
                           "aria-activedescendant": `word-${cursorIndex}`,
@@ -1765,7 +1973,10 @@ var MediaEditor = React6.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);
                 }
               },
@@ -1788,5 +1999,5 @@ var MediaEditor = React6.forwardRef(
 MediaEditor.displayName = "MediaEditor";
 
 export { FillerWordsModal, MediaEditor, SilenceSettingsModal, SpeedMarkerMenu, WordEditorModal };
-//# sourceMappingURL=chunk-MCCO4A23.js.map
-//# sourceMappingURL=chunk-MCCO4A23.js.map
+//# sourceMappingURL=chunk-NGLI2MSM.js.map
+//# sourceMappingURL=chunk-NGLI2MSM.js.map