lyrics-transcriber 0.45.0__py3-none-any.whl → 0.47.0__py3-none-any.whl

lyrics_transcriber/frontend/dist/assets/{index-ZCT0s9MG.js → index-2vK-qVJS.js}

@@ -32843,25 +32843,53 @@ function calculateReferenceLinePositions(corrected_segments, anchors, currentSou
   }
   return { linePositions };
 }
-function SourceSelector({ currentSource, onSourceChange, availableSources }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.3 }, children: availableSources.map((source) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Button,
-    {
-      size: "small",
-      variant: currentSource === source ? "contained" : "outlined",
-      onClick: () => onSourceChange(source),
-      sx: {
-        mr: 0,
-        py: 0.2,
-        px: 0.8,
-        minWidth: "auto",
-        fontSize: "0.7rem",
-        lineHeight: 1.2
+const AddIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
+}), "Add");
+function SourceSelector({ currentSource, onSourceChange, availableSources, onAddLyrics }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.3, alignItems: "center" }, children: [
+    availableSources.map((source) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        size: "small",
+        variant: currentSource === source ? "contained" : "outlined",
+        onClick: () => onSourceChange(source),
+        sx: {
+          mr: 0,
+          py: 0.2,
+          px: 0.8,
+          minWidth: "auto",
+          fontSize: "0.7rem",
+          lineHeight: 1.2
+        },
+        children: source.charAt(0).toUpperCase() + source.slice(1)
       },
-      children: source.charAt(0).toUpperCase() + source.slice(1)
-    },
-    source
-  )) });
+      source
+    )),
+    onAddLyrics && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        size: "small",
+        variant: "outlined",
+        onClick: onAddLyrics,
+        startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(AddIcon, { sx: { fontSize: "0.9rem" } }),
+        sx: {
+          mr: 0,
+          py: 0.2,
+          px: 0.8,
+          minWidth: "auto",
+          fontSize: "0.7rem",
+          lineHeight: 1.2,
+          "& .MuiButton-startIcon": {
+            marginLeft: "-5px",
+            marginRight: "1px",
+            marginTop: "-1px"
+          }
+        },
+        children: "New"
+      }
+    )
+  ] });
 }
 const HighlightedWord = styled$1("span")(
   ({ shouldFlash }) => ({
@@ -32922,7 +32950,11 @@ const WordComponent = React.memo(function Word({
       /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Corrected by:" }),
       " ",
-      correction.handler
+      correction.handler,
+      /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Source:" }),
+      " ",
+      correction.source
     ] });
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: tooltipContent, arrow: true, placement: "top", children: wordElement });
   }
@@ -32986,7 +33018,7 @@ function useWordClick({
         gap2 = matchingGap2;
       }
     }
-    if (mode === "highlight" || mode === "edit") {
+    if (mode === "highlight" || mode === "edit" || mode === "delete_word") {
       if (belongsToAnchor && anchor) {
         onWordClick == null ? void 0 : onWordClick({
           word_id: wordId,
@@ -33018,7 +33050,7 @@ function useWordClick({
           gap: void 0
         });
       }
-    } else if (mode === "details") {
+    } else {
       if (belongsToAnchor && anchor) {
         onElementClick({
           type: "anchor",
@@ -33186,7 +33218,8 @@ function HighlightedText({
               return correction ? {
                 originalWord: correction.original_word,
                 handler: correction.handler,
-                confidence: correction.confidence
+                confidence: correction.confidence,
+                source: correction.source
               } : null;
             })()
           },
@@ -33215,7 +33248,8 @@ function HighlightedText({
         const correctionInfo = correction ? {
           originalWord: correction.original_word,
           handler: correction.handler,
-          confidence: correction.confidence
+          confidence: correction.confidence,
+          source: correction.source
         } : null;
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -33386,7 +33420,8 @@ function ReferenceView({
   highlightInfo,
   mode,
   gaps,
-  corrections
+  corrections,
+  onAddLyrics
 }) {
   var _a;
   const availableSources = reactExports.useMemo(
@@ -33496,7 +33531,8 @@ function ReferenceView({
         {
           availableSources,
           currentSource: effectiveCurrentSource,
-          onSourceChange
+          onSourceChange,
+          onAddLyrics
         }
       )
     ] }),
@@ -34563,9 +34599,6 @@ const SplitIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
 const AutoFixHighIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M7.5 5.6 10 7 8.6 4.5 10 2 7.5 3.4 5 2l1.4 2.5L5 7zm12 9.8L17 14l1.4 2.5L17 19l2.5-1.4L22 19l-1.4-2.5L22 14zM22 2l-2.5 1.4L17 2l1.4 2.5L17 7l2.5-1.4L22 7l-1.4-2.5zm-7.63 5.29a.996.996 0 0 0-1.41 0L1.29 18.96c-.39.39-.39 1.02 0 1.41l2.34 2.34c.39.39 1.02.39 1.41 0L16.7 11.05c.39-.39.39-1.02 0-1.41zm-1.03 5.49-2.12-2.12 2.44-2.44 2.12 2.12z"
 }), "AutoFixHigh");
-const AddIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
-  d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
-}), "Add");
 const MergeIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M17 20.41 18.41 19 15 15.59 13.59 17zM7.5 8H11v5.59L5.59 19 7 20.41l6-6V8h3.5L12 3.5z"
 }), "CallMerge");
@@ -34733,9 +34766,16 @@ const WordRow = reactExports.memo(function WordRow2({
   onWordUpdate,
   onSplitWord,
   onRemoveWord,
-  wordsLength
+  wordsLength,
+  onTabNavigation
 }) {
   var _a, _b;
+  const handleKeyDown = (e) => {
+    if (e.key === "Tab" && !e.shiftKey) {
+      e.preventDefault();
+      onTabNavigation(index);
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: {
     display: "flex",
     gap: 2,
@@ -34748,8 +34788,10 @@ const WordRow = reactExports.memo(function WordRow2({
         label: `Word ${index}`,
         value: word.text,
         onChange: (e) => onWordUpdate(index, { text: e.target.value }),
+        onKeyDown: handleKeyDown,
         fullWidth: true,
-        size: "small"
+        size: "small",
+        id: `word-text-${index}`
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -34811,7 +34853,8 @@ const WordItem = reactExports.memo(function WordItem2({
   onAddSegment,
   onMergeSegment,
   wordsLength,
-  isGlobal
+  isGlobal,
+  onTabNavigation
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -34822,7 +34865,8 @@ const WordItem = reactExports.memo(function WordItem2({
         onWordUpdate,
         onSplitWord,
         onRemoveWord,
-        wordsLength
+        wordsLength,
+        onTabNavigation
       }
     ),
     !isGlobal && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -34882,6 +34926,33 @@ function EditWordList({
   const handlePageChange = (_event, value) => {
     setPage(value);
   };
+  const handleTabNavigation = (currentIndex) => {
+    const nextIndex = (currentIndex + 1) % words.length;
+    if (isGlobal && (nextIndex < startIndex || nextIndex >= endIndex)) {
+      const nextPage = Math.floor(nextIndex / pageSize) + 1;
+      setPage(nextPage);
+      setTimeout(() => {
+        focusWordTextField(nextIndex);
+      }, 50);
+    } else {
+      focusWordTextField(nextIndex);
+    }
+  };
+  const focusWordTextField = (index) => {
+    const element = document.getElementById(`word-text-${index}`);
+    if (element) {
+      let input = element.querySelector("input");
+      if (!input) {
+        input = element.querySelector(".MuiInputBase-input");
+      }
+      if (input) {
+        input.focus();
+        input.select();
+      } else {
+        element.focus();
+      }
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1, flexGrow: 1, minHeight: 0 }, children: [
     !isGlobal && /* @__PURE__ */ jsxRuntimeExports.jsx(
       WordDivider,
@@ -34933,7 +35004,8 @@ function EditWordList({
           onAddSegment,
           onMergeSegment,
           wordsLength: words.length,
-          isGlobal
+          isGlobal,
+          onTabNavigation: handleTabNavigation
         },
         word.id
       );
@@ -35146,15 +35218,6 @@ function EditModal({
   isGlobal = false,
   isLoading = false
 }) {
-  console.log("EditModal - Render", {
-    open,
-    isGlobal,
-    isLoading,
-    hasSegment: !!segment,
-    segmentIndex,
-    hasOriginalSegment: !!originalSegment,
-    hasOriginalTranscribedSegment: !!originalTranscribedSegment
-  });
   const [editedSegment, setEditedSegment] = reactExports.useState(segment);
   const [isPlaying, setIsPlaying] = reactExports.useState(false);
   const updateSegment2 = reactExports.useCallback((newWords) => {
@@ -35185,19 +35248,12 @@ function EditModal({
     updateSegment: updateSegment2
   });
   const handleClose = reactExports.useCallback(() => {
-    console.log("EditModal - handleClose called");
     cleanupManualSync();
     onClose();
   }, [onClose, cleanupManualSync]);
   reactExports.useEffect(() => {
     const spacebarHandler = handleSpacebar;
     if (open) {
-      console.log("EditModal - Setting up modal spacebar handler", {
-        hasPlaySegment: !!onPlaySegment,
-        editedSegmentId: editedSegment == null ? void 0 : editedSegment.id,
-        handlerFunction: spacebarHandler.toString().slice(0, 100),
-        isLoading
-      });
       const handleKeyEvent = (e) => {
         if (e.code === "Space") {
           spacebarHandler(e);
@@ -35206,7 +35262,6 @@ function EditModal({
       setModalSpacebarHandler(() => handleKeyEvent);
       return () => {
         if (!open) {
-          console.log("EditModal - Cleanup: clearing modal spacebar handler");
           setModalSpacebarHandler(void 0);
         }
       };
@@ -35228,11 +35283,6 @@ function EditModal({
     }
   }, [currentTime, editedSegment]);
   reactExports.useEffect(() => {
-    console.log("EditModal - segment changed", {
-      hasSegment: !!segment,
-      segmentId: segment == null ? void 0 : segment.id,
-      wordCount: segment == null ? void 0 : segment.words.length
-    });
     setEditedSegment(segment);
   }, [segment]);
   reactExports.useEffect(() => {
@@ -35240,7 +35290,6 @@ function EditModal({
     if (!editedSegment) return;
     const endTime = editedSegment.end_time ?? 0;
     if (window.isAudioPlaying && currentTime > endTime) {
-      console.log("Stopping playback: current time exceeded end time");
       (_a = window.toggleAudioPlayback) == null ? void 0 : _a.call(window);
       cleanupManualSync();
     }
@@ -35403,7 +35452,6 @@ function EditModal({
     return getSafeTimeRange(editedSegment);
   }, [getSafeTimeRange, editedSegment]);
   const dialogTitle = reactExports.useMemo(() => {
-    console.log("EditModal - Rendering dialog title", { isLoading, isGlobal });
     if (isLoading) {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogTitle, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { flex: 1, display: "flex", alignItems: "center", gap: 1 }, children: [
@@ -35433,23 +35481,11 @@ function EditModal({
     ] });
   }, [isGlobal, segmentIndex, segment, onPlaySegment, handlePlayButtonClick, isPlaying, onClose, isLoading]);
   if (!isLoading && (!segment || !editedSegment || !originalSegment)) {
-    console.log("EditModal - Early return: missing required data", {
-      hasSegment: !!segment,
-      hasEditedSegment: !!editedSegment,
-      hasOriginalSegment: !!originalSegment,
-      isLoading
-    });
     return null;
   }
   if (!isLoading && !isGlobal && segmentIndex === null) {
-    console.log("EditModal - Early return: non-global mode with null segmentIndex");
     return null;
   }
-  console.log("EditModal - Rendering dialog content", {
-    isLoading,
-    hasEditedSegment: !!editedSegment,
-    hasOriginalSegment: !!originalSegment
-  });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Dialog,
     {
@@ -35674,9 +35710,6 @@ const PauseIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
 const PlayArrowIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M8 5v14l11-7z"
 }), "PlayArrow");
-const TextSnippetIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
-  d: "m20.41 8.41-4.83-4.83c-.37-.37-.88-.58-1.41-.58H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V9.83c0-.53-.21-1.04-.59-1.42M7 7h7v2H7zm10 10H7v-2h10zm0-4H7v-2h10z"
-}), "TextSnippet");
 const normalizeWordForComparison = (word) => ({
   text: word.text,
   start_time: word.start_time ?? 0,
@@ -36135,6 +36168,30 @@ function findAndReplace(data, findText, replaceText, options = {
   newData.corrected_segments = newData.corrected_segments.filter((segment) => segment.words.length > 0);
   return newData;
 }
+function deleteWord(data, wordId) {
+  const segmentIndex = data.corrected_segments.findIndex(
+    (segment2) => segment2.words.some((word) => word.id === wordId)
+  );
+  if (segmentIndex === -1) {
+    return data;
+  }
+  const segment = data.corrected_segments[segmentIndex];
+  const wordIndex = segment.words.findIndex((word) => word.id === wordId);
+  if (wordIndex === -1) {
+    return data;
+  }
+  const updatedWords = segment.words.filter((_, index) => index !== wordIndex);
+  if (updatedWords.length > 0) {
+    const updatedSegment = {
+      ...segment,
+      words: updatedWords,
+      text: updatedWords.map((w) => w.text).join(" ")
+    };
+    return updateSegment(data, segmentIndex, updatedSegment);
+  } else {
+    return deleteSegment(data, segmentIndex);
+  }
+}
 const generateStorageKey = (data) => {
   var _a;
   const text = ((_a = data.original_segments[0]) == null ? void 0 : _a.text) || "";
@@ -36208,6 +36265,12 @@ const setModalHandler = (handler, open) => {
 };
 const setupKeyboardHandlers = (state) => {
   Math.random().toString(36).substr(2, 9);
+  const resetModifierStates = () => {
+    var _a;
+    state.setIsShiftPressed(false);
+    (_a = state.setIsCtrlPressed) == null ? void 0 : _a.call(state, false);
+    document.body.style.userSelect = "";
+  };
   const handleKeyDown = (e) => {
     var _a;
     if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
@@ -36216,7 +36279,7 @@ const setupKeyboardHandlers = (state) => {
     if (e.key === "Shift") {
       state.setIsShiftPressed(true);
       document.body.style.userSelect = "none";
-    } else if (e.key === "Meta") {
+    } else if (e.key === "Control" || e.key === "Ctrl" || e.key === "Meta") {
       (_a = state.setIsCtrlPressed) == null ? void 0 : _a.call(state, true);
     } else if (e.key === " " || e.code === "Space") {
       e.preventDefault();
@@ -36228,20 +36291,30 @@ const setupKeyboardHandlers = (state) => {
     }
   };
   const handleKeyUp = (e) => {
-    var _a;
-    if (e.key === "Shift") {
-      state.setIsShiftPressed(false);
-      document.body.style.userSelect = "";
-    } else if (e.key === "Meta") {
-      (_a = state.setIsCtrlPressed) == null ? void 0 : _a.call(state, false);
-    } else if (e.key === " " || e.code === "Space") {
+    resetModifierStates();
+    if (e.key === " " || e.code === "Space") {
       e.preventDefault();
       if (isModalOpen && currentModalHandler) {
         currentModalHandler(e);
       }
     }
   };
-  return { handleKeyDown, handleKeyUp };
+  const handleWindowBlur = () => {
+    resetModifierStates();
+  };
+  const handleWindowFocus = () => {
+    resetModifierStates();
+  };
+  window.addEventListener("blur", handleWindowBlur);
+  window.addEventListener("focus", handleWindowFocus);
+  return {
+    handleKeyDown,
+    handleKeyUp,
+    cleanup: () => {
+      window.removeEventListener("blur", handleWindowBlur);
+      window.removeEventListener("focus", handleWindowFocus);
+    }
+  };
 };
 function ModeSelector({ effectiveMode, onChange }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.2, height: "32px" }, children: [
@@ -36251,7 +36324,7 @@ function ModeSelector({ effectiveMode, onChange }) {
       {
         value: effectiveMode,
         exclusive: true,
-        onChange: (_, newMode) => newMode && onChange(newMode),
+        onChange: (_, newMode) => newMode === "edit" && onChange(newMode),
         size: "small",
         sx: {
           height: "32px",
@@ -36262,28 +36335,38 @@ function ModeSelector({ effectiveMode, onChange }) {
           }
         },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Default mode; click words to edit that lyrics segment", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
             ToggleButton,
             {
               value: "edit",
-              title: "Click to edit segments and make corrections in the transcription view",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, { sx: { mr: 0.5, fontSize: "1rem" } }),
                 "Edit"
               ]
             }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Hold SHIFT and click words to highlight the matching anchor sequence in the reference lyrics", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
             ToggleButton,
             {
               value: "highlight",
-              title: "Click words in the transcription view to highlight the matching anchor sequence in the reference lyrics. You can also hold SHIFT to temporarily activate this mode.",
+              disabled: true,
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(HighlightIcon, { sx: { mr: 0.5, fontSize: "1rem" } }),
                 "Highlight"
               ]
             }
-          )
+          ) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Hold CTRL and click words to delete them", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            ToggleButton,
+            {
+              value: "delete_word",
+              disabled: true,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteIcon, { sx: { mr: 0.5, fontSize: "1rem" } }),
+                "Delete"
+              ]
+            }
+          ) }) })
         ]
       }
     )
@@ -36435,7 +36518,6 @@ function Header({
   onHandlerToggle,
   isUpdatingHandlers,
   onHandlerClick,
-  onAddLyrics,
   onFindReplace,
   onEditAll
 }) {
@@ -36581,71 +36663,58 @@ function Header({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Paper, { sx: { p: 0.8, mb: 1 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: {
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Paper, { sx: { p: 0.8, mb: 1 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: {
       display: "flex",
       flexDirection: isMobile ? "column" : "row",
       gap: 1,
       alignItems: isMobile ? "flex-start" : "center",
       justifyContent: "space-between",
       width: "100%"
+    }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: {
+      display: "flex",
+      gap: 1,
+      flexDirection: isMobile ? "column" : "row",
+      alignItems: isMobile ? "flex-start" : "center",
+      height: "32px"
     }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: {
-        display: "flex",
-        gap: 1,
-        flexDirection: isMobile ? "column" : "row",
-        alignItems: isMobile ? "flex-start" : "center",
-        height: "32px"
-      }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ModeSelector,
-          {
-            effectiveMode,
-            onChange: onModeChange
-          }
-        ),
-        !isReadOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            variant: "outlined",
-            size: "small",
-            onClick: onFindReplace,
-            startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FindReplaceIcon, {}),
-            sx: { minWidth: "fit-content", height: "32px" },
-            children: "Find/Replace"
-          }
-        ),
-        !isReadOnly && onEditAll && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            variant: "outlined",
-            size: "small",
-            onClick: onEditAll,
-            startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, {}),
-            sx: { minWidth: "fit-content", height: "32px" },
-            children: "Edit All"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          AudioPlayer,
-          {
-            apiClient,
-            onTimeUpdate,
-            audioHash
-          }
-        )
-      ] }),
-      !isReadOnly && apiClient && onAddLyrics && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ModeSelector,
+        {
+          effectiveMode,
+          onChange: onModeChange
+        }
+      ),
+      !isReadOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant: "outlined",
+          size: "small",
+          onClick: onFindReplace,
+          startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FindReplaceIcon, {}),
+          sx: { minWidth: "fit-content", height: "32px" },
+          children: "Find/Replace"
+        }
+      ),
+      !isReadOnly && onEditAll && /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button,
         {
           variant: "outlined",
           size: "small",
-          onClick: onAddLyrics,
-          startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(TextSnippetIcon, {}),
+          onClick: onEditAll,
+          startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, {}),
           sx: { minWidth: "fit-content", height: "32px" },
-          children: "Add Reference Lyrics"
+          children: "Edit All"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AudioPlayer,
+        {
+          apiClient,
+          onTimeUpdate,
+          audioHash
         }
       )
-    ] }) })
+    ] }) }) })
   ] });
 }
 function AddLyricsModal({
@@ -37119,7 +37188,8 @@ const MemoizedReferenceView = reactExports.memo(function MemoizedReferenceView2(
   currentSource,
   onSourceChange,
   corrected_segments,
-  corrections
+  corrections,
+  onAddLyrics
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ReferenceView,
@@ -37135,7 +37205,8 @@ const MemoizedReferenceView = reactExports.memo(function MemoizedReferenceView2(
       currentSource,
       onSourceChange,
       corrected_segments,
-      corrections
+      corrections,
+      onAddLyrics
     }
   );
 });
@@ -37152,7 +37223,6 @@ const MemoizedHeader = reactExports.memo(function MemoizedHeader2({
   onHandlerToggle,
   isUpdatingHandlers,
   onHandlerClick,
-  onAddLyrics,
   onFindReplace,
   onEditAll
 }) {
@@ -37171,7 +37241,6 @@ const MemoizedHeader = reactExports.memo(function MemoizedHeader2({
       onHandlerToggle,
       isUpdatingHandlers,
       onHandlerClick,
-      onAddLyrics,
       onFindReplace,
       onEditAll
     }
@@ -37193,6 +37262,7 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
   const [originalData] = reactExports.useState(() => JSON.parse(JSON.stringify(initialData)));
   const [interactionMode, setInteractionMode] = reactExports.useState("edit");
   const [isShiftPressed, setIsShiftPressed] = reactExports.useState(false);
+  const [isCtrlPressed, setIsCtrlPressed] = reactExports.useState(false);
   const [editModalSegment, setEditModalSegment] = reactExports.useState(null);
   const [isEditAllModalOpen, setIsEditAllModalOpen] = reactExports.useState(false);
   const [globalEditSegment, setGlobalEditSegment] = reactExports.useState(null);
@@ -37223,27 +37293,30 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
     }
   }, [data, isReadOnly, initialData]);
   reactExports.useEffect(() => {
-    const { handleKeyDown, handleKeyUp } = setupKeyboardHandlers({
-      setIsShiftPressed
+    const { handleKeyDown, handleKeyUp, cleanup } = setupKeyboardHandlers({
+      setIsShiftPressed,
+      setIsCtrlPressed
     });
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
     if (isAnyModalOpen) {
       setIsShiftPressed(false);
+      setIsCtrlPressed(false);
     }
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
       document.body.style.userSelect = "";
+      cleanup();
     };
-  }, [setIsShiftPressed, isAnyModalOpen]);
+  }, [setIsShiftPressed, setIsCtrlPressed, isAnyModalOpen]);
   reactExports.useEffect(() => {
     const modalOpen = Boolean(
       modalContent || editModalSegment || isReviewModalOpen || isAddLyricsModalOpen || isFindReplaceModalOpen || isEditAllModalOpen
     );
     setIsAnyModalOpen(modalOpen);
   }, [modalContent, editModalSegment, isReviewModalOpen, isAddLyricsModalOpen, isFindReplaceModalOpen, isEditAllModalOpen]);
-  const effectiveMode = isShiftPressed ? "highlight" : interactionMode;
+  const effectiveMode = isCtrlPressed ? "delete_word" : isShiftPressed ? "highlight" : interactionMode;
   const handleFlash = reactExports.useCallback((type, info) => {
     setFlashingType(null);
     setHighlightInfo(null);
@@ -37262,6 +37335,12 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
   }, []);
   const handleWordClick = reactExports.useCallback((info) => {
     var _a, _b, _c, _d, _e, _f, _g;
+    if (effectiveMode === "delete_word") {
+      const newData = deleteWord(data, info.word_id);
+      setData(newData);
+      handleFlash("word");
+      return;
+    }
     if (effectiveMode === "highlight") {
       const correction = (_a = data.corrections) == null ? void 0 : _a.find(
         (c) => c.corrected_word_id === info.word_id || c.word_id === info.word_id
@@ -37369,7 +37448,7 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
         });
       }
     }
-  }, [data, effectiveMode, setModalContent]);
+  }, [data, effectiveMode, setModalContent, handleFlash, deleteWord]);
   const handleUpdateSegment = reactExports.useCallback((updatedSegment) => {
     if (!editModalSegment) return;
     const newData = updateSegment(data, editModalSegment.index, updatedSegment);
@@ -37706,7 +37785,8 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
           currentSource,
           onSourceChange: setCurrentSource,
           corrected_segments: data.corrected_segments,
-          corrections: data.corrections
+          corrections: data.corrections,
+          onAddLyrics: () => setIsAddLyricsModalOpen(true)
         }
       ) })
     ] }),
@@ -38141,4 +38221,4 @@ ReactDOM$1.createRoot(document.getElementById("root")).render(
     /* @__PURE__ */ jsxRuntimeExports.jsx(App, {})
   ] })
 );
-//# sourceMappingURL=index-ZCT0s9MG.js.map
+//# sourceMappingURL=index-2vK-qVJS.js.map