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

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

@@ -33650,6 +33650,243 @@ function SegmentDetailsModal({
 const PlayCircleOutlineIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "m10 16.5 6-4.5-6-4.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
 }), "PlayCircleOutline");
+const DeleteOutlineIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5-1-1h-5l-1 1H5v2h14V4z"
+}), "DeleteOutline");
+const urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+let nanoid = (size = 21) => {
+  let id = "";
+  let bytes = crypto.getRandomValues(new Uint8Array(size |= 0));
+  while (size--) {
+    id += urlAlphabet[bytes[size] & 63];
+  }
+  return id;
+};
+const addSegmentBefore = (data, beforeIndex) => {
+  const newData = { ...data };
+  const beforeSegment = newData.corrected_segments[beforeIndex];
+  const newStartTime = Math.max(0, (beforeSegment.start_time ?? 1) - 1);
+  const newEndTime = newStartTime + 1;
+  const newSegment = {
+    id: nanoid(),
+    text: "REPLACE",
+    start_time: newStartTime,
+    end_time: newEndTime,
+    words: [{
+      id: nanoid(),
+      text: "REPLACE",
+      start_time: newStartTime,
+      end_time: newEndTime,
+      confidence: 1
+    }]
+  };
+  newData.corrected_segments.splice(beforeIndex, 0, newSegment);
+  return newData;
+};
+const splitSegment = (data, segmentIndex, afterWordIndex) => {
+  const newData = { ...data };
+  const segment = newData.corrected_segments[segmentIndex];
+  const firstHalfWords = segment.words.slice(0, afterWordIndex + 1);
+  const secondHalfWords = segment.words.slice(afterWordIndex + 1);
+  if (secondHalfWords.length === 0) return null;
+  const lastFirstWord = firstHalfWords[firstHalfWords.length - 1];
+  const firstSecondWord = secondHalfWords[0];
+  const lastSecondWord = secondHalfWords[secondHalfWords.length - 1];
+  const firstSegment = {
+    ...segment,
+    words: firstHalfWords,
+    text: firstHalfWords.map((w) => w.text).join(" "),
+    end_time: lastFirstWord.end_time ?? null
+  };
+  const secondSegment = {
+    id: nanoid(),
+    words: secondHalfWords,
+    text: secondHalfWords.map((w) => w.text).join(" "),
+    start_time: firstSecondWord.start_time ?? null,
+    end_time: lastSecondWord.end_time ?? null
+  };
+  newData.corrected_segments.splice(segmentIndex, 1, firstSegment, secondSegment);
+  return newData;
+};
+const deleteSegment = (data, segmentIndex) => {
+  const newData = { ...data };
+  const deletedSegment = newData.corrected_segments[segmentIndex];
+  newData.corrected_segments = newData.corrected_segments.filter((_, index) => index !== segmentIndex);
+  newData.anchor_sequences = newData.anchor_sequences.map((anchor) => ({
+    ...anchor,
+    transcribed_word_ids: anchor.transcribed_word_ids.filter(
+      (wordId) => !deletedSegment.words.some((deletedWord) => deletedWord.id === wordId)
+    )
+  }));
+  newData.gap_sequences = newData.gap_sequences.map((gap2) => ({
+    ...gap2,
+    transcribed_word_ids: gap2.transcribed_word_ids.filter(
+      (wordId) => !deletedSegment.words.some((deletedWord) => deletedWord.id === wordId)
+    )
+  }));
+  return newData;
+};
+const updateSegment = (data, segmentIndex, updatedSegment) => {
+  const newData = { ...data };
+  updatedSegment.words = updatedSegment.words.map((word) => ({
+    ...word,
+    id: word.id || nanoid()
+  }));
+  newData.corrected_segments[segmentIndex] = updatedSegment;
+  return newData;
+};
+function mergeSegment(data, segmentIndex, mergeWithNext) {
+  const segments = [...data.corrected_segments];
+  const targetIndex = mergeWithNext ? segmentIndex + 1 : segmentIndex - 1;
+  if (targetIndex < 0 || targetIndex >= segments.length) {
+    return data;
+  }
+  const baseSegment = segments[segmentIndex];
+  const targetSegment = segments[targetIndex];
+  const mergedSegment = {
+    id: nanoid(),
+    words: mergeWithNext ? [...baseSegment.words, ...targetSegment.words] : [...targetSegment.words, ...baseSegment.words],
+    text: mergeWithNext ? `${baseSegment.text} ${targetSegment.text}` : `${targetSegment.text} ${baseSegment.text}`,
+    start_time: Math.min(
+      baseSegment.start_time ?? Infinity,
+      targetSegment.start_time ?? Infinity
+    ),
+    end_time: Math.max(
+      baseSegment.end_time ?? -Infinity,
+      targetSegment.end_time ?? -Infinity
+    )
+  };
+  const minIndex = Math.min(segmentIndex, targetIndex);
+  segments.splice(minIndex, 2, mergedSegment);
+  return {
+    ...data,
+    corrected_segments: segments
+  };
+}
+function findAndReplace(data, findText, replaceText, options = {
+  caseSensitive: false,
+  useRegex: false,
+  fullTextMode: false
+}) {
+  const newData = { ...data };
+  if (options.fullTextMode) {
+    newData.corrected_segments = data.corrected_segments.map((segment) => {
+      let pattern;
+      if (options.useRegex) {
+        pattern = new RegExp(findText, options.caseSensitive ? "g" : "gi");
+      } else {
+        const escapedFindText = findText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        pattern = new RegExp(escapedFindText, options.caseSensitive ? "g" : "gi");
+      }
+      const segmentText = segment.text;
+      if (!pattern.test(segmentText)) {
+        return segment;
+      }
+      pattern.lastIndex = 0;
+      const newSegmentText = segmentText.replace(pattern, replaceText);
+      const newWordTexts = newSegmentText.trim().split(/\s+/).filter((text) => text.length > 0);
+      const newWords = [];
+      if (newWordTexts.length === segment.words.length) {
+        for (let i = 0; i < newWordTexts.length; i++) {
+          newWords.push({
+            ...segment.words[i],
+            text: newWordTexts[i]
+          });
+        }
+      } else if (newWordTexts.length < segment.words.length) {
+        let oldWordIndex = 0;
+        for (let i = 0; i < newWordTexts.length; i++) {
+          while (oldWordIndex < segment.words.length && segment.words[oldWordIndex].text.trim() === "") {
+            oldWordIndex++;
+          }
+          if (oldWordIndex < segment.words.length) {
+            newWords.push({
+              ...segment.words[oldWordIndex],
+              text: newWordTexts[i]
+            });
+            oldWordIndex++;
+          } else {
+            newWords.push({
+              id: nanoid(),
+              text: newWordTexts[i],
+              start_time: null,
+              end_time: null
+            });
+          }
+        }
+      } else {
+        for (let i = 0; i < newWordTexts.length; i++) {
+          if (i < segment.words.length) {
+            newWords.push({
+              ...segment.words[i],
+              text: newWordTexts[i]
+            });
+          } else {
+            newWords.push({
+              id: nanoid(),
+              text: newWordTexts[i],
+              start_time: null,
+              end_time: null
+            });
+          }
+        }
+      }
+      return {
+        ...segment,
+        words: newWords,
+        text: newSegmentText
+      };
+    });
+  } else {
+    newData.corrected_segments = data.corrected_segments.map((segment) => {
+      let newWords = segment.words.map((word) => {
+        let pattern;
+        if (options.useRegex) {
+          pattern = new RegExp(findText, options.caseSensitive ? "g" : "gi");
+        } else {
+          const escapedFindText = findText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          pattern = new RegExp(escapedFindText, options.caseSensitive ? "g" : "gi");
+        }
+        return {
+          ...word,
+          text: word.text.replace(pattern, replaceText)
+        };
+      });
+      newWords = newWords.filter((word) => word.text.trim() !== "");
+      return {
+        ...segment,
+        words: newWords,
+        text: newWords.map((w) => w.text).join(" ")
+      };
+    });
+  }
+  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 SegmentIndex = styled(Typography)(({ theme: theme2 }) => ({
   color: theme2.palette.text.secondary,
   width: "1.8em",
@@ -33688,9 +33925,16 @@ function TranscriptionView({
   mode,
   onPlaySegment,
   currentTime = 0,
-  anchors = []
+  anchors = [],
+  onDataChange
 }) {
   const [selectedSegmentIndex, setSelectedSegmentIndex] = reactExports.useState(null);
+  const handleDeleteSegment = (segmentIndex) => {
+    if (onDataChange) {
+      const updatedData = deleteSegment(data, segmentIndex);
+      onDataChange(updatedData);
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Paper, { sx: { p: 0.8 }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 0.5 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", sx: { fontSize: "0.9rem", mb: 0 }, children: "Corrected Transcription" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.2 }, children: data.corrected_segments.map((segment, segmentIndex) => {
@@ -33745,6 +33989,22 @@ function TranscriptionView({
               children: segmentIndex
             }
           ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => handleDeleteSegment(segmentIndex),
+              sx: {
+                padding: "1px",
+                height: "18px",
+                width: "18px",
+                minHeight: "18px",
+                minWidth: "18px"
+              },
+              title: "Delete segment",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteOutlineIcon, { sx: { fontSize: "0.9rem", color: "error.main" } })
+            }
+          ),
           segment.start_time !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
             IconButton,
             {
@@ -33757,6 +34017,7 @@ function TranscriptionView({
                 minHeight: "18px",
                 minWidth: "18px"
               },
+              title: "Play segment",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlayCircleOutlineIcon, { sx: { fontSize: "0.9rem" } })
             }
           )
@@ -33794,15 +34055,6 @@ function TranscriptionView({
 const StopIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M6 6h12v12H6z"
 }), "Stop");
-const urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let nanoid = (size = 21) => {
-  let id = "";
-  let bytes = crypto.getRandomValues(new Uint8Array(size |= 0));
-  while (size--) {
-    id += urlAlphabet[bytes[size] & 63];
-  }
-  return id;
-};
 const TAP_THRESHOLD_MS = 200;
 const DEFAULT_WORD_DURATION = 1;
 const OVERLAP_BUFFER = 0.01;
@@ -35710,6 +35962,12 @@ const PauseIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
 const PlayArrowIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M8 5v14l11-7z"
 }), "PlayArrow");
+const RedoIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7z"
+}), "Redo");
+const UndoIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8"
+}), "Undo");
 const normalizeWordForComparison = (word) => ({
   text: word.text,
   start_time: word.start_time ?? 0,
@@ -35787,410 +36045,185 @@ function ReviewChangesModal({
             path: `Word ${wordIndex}`,
             oldValue: `"${word.text}" (${((_a3 = word.start_time) == null ? void 0 : _a3.toFixed(4)) ?? "N/A"} - ${((_b3 = word.end_time) == null ? void 0 : _b3.toFixed(4)) ?? "N/A"})`
           });
-          return;
-        }
-        if (word.text !== updatedWord.text || Math.abs((word.start_time ?? 0) - (updatedWord.start_time ?? 0)) > 1e-4 || Math.abs((word.end_time ?? 0) - (updatedWord.end_time ?? 0)) > 1e-4) {
-          wordChanges.push({
-            type: "modified",
-            path: `Word ${wordIndex}`,
-            oldValue: `"${word.text}" (${((_c2 = word.start_time) == null ? void 0 : _c2.toFixed(4)) ?? "N/A"} - ${((_d2 = word.end_time) == null ? void 0 : _d2.toFixed(4)) ?? "N/A"})`,
-            newValue: `"${updatedWord.text}" (${((_e2 = updatedWord.start_time) == null ? void 0 : _e2.toFixed(4)) ?? "N/A"} - ${((_f2 = updatedWord.end_time) == null ? void 0 : _f2.toFixed(4)) ?? "N/A"})`
-          });
-        }
-      });
-      if (normalizedUpdated.words.length > normalizedOriginal.words.length) {
-        for (let i = normalizedOriginal.words.length; i < normalizedUpdated.words.length; i++) {
-          const word = normalizedUpdated.words[i];
-          wordChanges.push({
-            type: "added",
-            path: `Word ${i}`,
-            newValue: `"${word.text}" (${((_a2 = word.start_time) == null ? void 0 : _a2.toFixed(4)) ?? "N/A"} - ${((_b2 = word.end_time) == null ? void 0 : _b2.toFixed(4)) ?? "N/A"})`
-          });
-        }
-      }
-      if (normalizedOriginal.text !== normalizedUpdated.text || Math.abs((normalizedOriginal.start_time ?? 0) - (normalizedUpdated.start_time ?? 0)) > 1e-4 || Math.abs((normalizedOriginal.end_time ?? 0) - (normalizedUpdated.end_time ?? 0)) > 1e-4 || wordChanges.length > 0) {
-        diffs.push({
-          type: "modified",
-          path: `Segment ${index}`,
-          segmentIndex: index,
-          oldValue: `"${normalizedOriginal.text}" (${((_c = normalizedOriginal.start_time) == null ? void 0 : _c.toFixed(4)) ?? "N/A"} - ${((_d = normalizedOriginal.end_time) == null ? void 0 : _d.toFixed(4)) ?? "N/A"})`,
-          newValue: `"${normalizedUpdated.text}" (${((_e = normalizedUpdated.start_time) == null ? void 0 : _e.toFixed(4)) ?? "N/A"} - ${((_f = normalizedUpdated.end_time) == null ? void 0 : _f.toFixed(4)) ?? "N/A"})`,
-          wordChanges: wordChanges.length > 0 ? wordChanges : void 0
-        });
-      }
-    });
-    if (updatedData.corrected_segments.length > originalData.corrected_segments.length) {
-      for (let i = originalData.corrected_segments.length; i < updatedData.corrected_segments.length; i++) {
-        const segment = updatedData.corrected_segments[i];
-        diffs.push({
-          type: "added",
-          path: `Segment ${i}`,
-          segmentIndex: i,
-          newValue: `"${segment.text}" (${((_a = segment.start_time) == null ? void 0 : _a.toFixed(4)) ?? "N/A"} - ${((_b = segment.end_time) == null ? void 0 : _b.toFixed(4)) ?? "N/A"})`
-        });
-      }
-    }
-    return diffs;
-  }, [originalData, updatedData]);
-  const renderCompactDiff = (diff) => {
-    var _a, _b, _c;
-    if (diff.type !== "modified") {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Typography,
-        {
-          color: diff.type === "added" ? "success.main" : "error.main",
-          sx: { mb: 0.5 },
-          children: [
-            diff.segmentIndex,
-            ": ",
-            diff.type === "added" ? "+ " : "- ",
-            diff.type === "added" ? diff.newValue : diff.oldValue
-          ]
-        },
-        diff.path
-      );
-    }
-    const oldText = ((_a = diff.oldValue) == null ? void 0 : _a.split('"')[1]) || "";
-    const newText = ((_b = diff.newValue) == null ? void 0 : _b.split('"')[1]) || "";
-    const oldWords = oldText.split(" ");
-    const newWords = newText.split(" ");
-    const timingMatch = (_c = diff.newValue) == null ? void 0 : _c.match(/\(([\d.]+) - ([\d.]+)\)/);
-    const timing = timingMatch ? `(${parseFloat(timingMatch[1]).toFixed(2)} - ${parseFloat(timingMatch[2]).toFixed(2)})` : "";
-    const unifiedDiff = [];
-    let i = 0, j = 0;
-    while (i < oldWords.length || j < newWords.length) {
-      if (i < oldWords.length && j < newWords.length && oldWords[i] === newWords[j]) {
-        unifiedDiff.push({ type: "unchanged", text: oldWords[i] });
-        i++;
-        j++;
-      } else if (i < oldWords.length && (!newWords[j] || oldWords[i] !== newWords[j])) {
-        unifiedDiff.push({ type: "deleted", text: oldWords[i] });
-        i++;
-      } else if (j < newWords.length) {
-        unifiedDiff.push({ type: "added", text: newWords[j] });
-        j++;
-      }
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mr: 1, minWidth: "30px" }, children: [
-        diff.segmentIndex,
-        ":"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", flexGrow: 1, alignItems: "center" }, children: [
-        unifiedDiff.map((word, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Typography,
-          {
-            component: "span",
-            color: word.type === "unchanged" ? "text.primary" : word.type === "deleted" ? "error.main" : "success.main",
-            sx: {
-              textDecoration: word.type === "deleted" ? "line-through" : "none",
-              mr: 0.5
-            },
-            children: word.text
-          },
-          idx
-        )),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", sx: { ml: 1 }, children: timing })
-      ] })
-    ] }, diff.path);
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Dialog,
-    {
-      open,
-      onClose,
-      maxWidth: "md",
-      fullWidth: true,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Preview Video (With Vocals)" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          DialogContent,
-          {
-            dividers: true,
-            sx: {
-              p: 0,
-              // Remove default padding
-              "&:first-of-type": { pt: 0 }
-              // Remove default top padding
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                PreviewVideoSection,
-                {
-                  apiClient,
-                  isModalOpen: open,
-                  updatedData,
-                  videoRef
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { p: 2, mt: 0 }, children: differences.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { color: "text.secondary", children: "No manual corrections detected. If everything looks good in the preview, click submit and the server will generate the final karaoke video." }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
-                  "Total segments: ",
-                  updatedData.corrected_segments.length
-                ] })
-              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: [
-                  differences.length,
-                  " segment",
-                  differences.length !== 1 ? "s" : "",
-                  " modified:"
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Paper, { sx: { p: 2 }, children: differences.map(renderCompactDiff) })
-              ] }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogActions, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button,
-            {
-              onClick: onClose,
-              color: "warning",
-              startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowBack, {}),
-              sx: { mr: "auto" },
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button,
-            {
-              onClick: onSubmit,
-              variant: "contained",
-              color: "success",
-              endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(CloudUpload, {}),
-              children: "Complete Review"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-const addSegmentBefore = (data, beforeIndex) => {
-  const newData = { ...data };
-  const beforeSegment = newData.corrected_segments[beforeIndex];
-  const newStartTime = Math.max(0, (beforeSegment.start_time ?? 1) - 1);
-  const newEndTime = newStartTime + 1;
-  const newSegment = {
-    id: nanoid(),
-    text: "REPLACE",
-    start_time: newStartTime,
-    end_time: newEndTime,
-    words: [{
-      id: nanoid(),
-      text: "REPLACE",
-      start_time: newStartTime,
-      end_time: newEndTime,
-      confidence: 1
-    }]
-  };
-  newData.corrected_segments.splice(beforeIndex, 0, newSegment);
-  return newData;
-};
-const splitSegment = (data, segmentIndex, afterWordIndex) => {
-  const newData = { ...data };
-  const segment = newData.corrected_segments[segmentIndex];
-  const firstHalfWords = segment.words.slice(0, afterWordIndex + 1);
-  const secondHalfWords = segment.words.slice(afterWordIndex + 1);
-  if (secondHalfWords.length === 0) return null;
-  const lastFirstWord = firstHalfWords[firstHalfWords.length - 1];
-  const firstSecondWord = secondHalfWords[0];
-  const lastSecondWord = secondHalfWords[secondHalfWords.length - 1];
-  const firstSegment = {
-    ...segment,
-    words: firstHalfWords,
-    text: firstHalfWords.map((w) => w.text).join(" "),
-    end_time: lastFirstWord.end_time ?? null
-  };
-  const secondSegment = {
-    id: nanoid(),
-    words: secondHalfWords,
-    text: secondHalfWords.map((w) => w.text).join(" "),
-    start_time: firstSecondWord.start_time ?? null,
-    end_time: lastSecondWord.end_time ?? null
-  };
-  newData.corrected_segments.splice(segmentIndex, 1, firstSegment, secondSegment);
-  return newData;
-};
-const deleteSegment = (data, segmentIndex) => {
-  const newData = { ...data };
-  const deletedSegment = newData.corrected_segments[segmentIndex];
-  newData.corrected_segments = newData.corrected_segments.filter((_, index) => index !== segmentIndex);
-  newData.anchor_sequences = newData.anchor_sequences.map((anchor) => ({
-    ...anchor,
-    transcribed_word_ids: anchor.transcribed_word_ids.filter(
-      (wordId) => !deletedSegment.words.some((deletedWord) => deletedWord.id === wordId)
-    )
-  }));
-  newData.gap_sequences = newData.gap_sequences.map((gap2) => ({
-    ...gap2,
-    transcribed_word_ids: gap2.transcribed_word_ids.filter(
-      (wordId) => !deletedSegment.words.some((deletedWord) => deletedWord.id === wordId)
-    )
-  }));
-  return newData;
-};
-const updateSegment = (data, segmentIndex, updatedSegment) => {
-  const newData = { ...data };
-  updatedSegment.words = updatedSegment.words.map((word) => ({
-    ...word,
-    id: word.id || nanoid()
-  }));
-  newData.corrected_segments[segmentIndex] = updatedSegment;
-  return newData;
-};
-function mergeSegment(data, segmentIndex, mergeWithNext) {
-  const segments = [...data.corrected_segments];
-  const targetIndex = mergeWithNext ? segmentIndex + 1 : segmentIndex - 1;
-  if (targetIndex < 0 || targetIndex >= segments.length) {
-    return data;
-  }
-  const baseSegment = segments[segmentIndex];
-  const targetSegment = segments[targetIndex];
-  const mergedSegment = {
-    id: nanoid(),
-    words: mergeWithNext ? [...baseSegment.words, ...targetSegment.words] : [...targetSegment.words, ...baseSegment.words],
-    text: mergeWithNext ? `${baseSegment.text} ${targetSegment.text}` : `${targetSegment.text} ${baseSegment.text}`,
-    start_time: Math.min(
-      baseSegment.start_time ?? Infinity,
-      targetSegment.start_time ?? Infinity
-    ),
-    end_time: Math.max(
-      baseSegment.end_time ?? -Infinity,
-      targetSegment.end_time ?? -Infinity
-    )
-  };
-  const minIndex = Math.min(segmentIndex, targetIndex);
-  segments.splice(minIndex, 2, mergedSegment);
-  return {
-    ...data,
-    corrected_segments: segments
-  };
-}
-function findAndReplace(data, findText, replaceText, options = {
-  caseSensitive: false,
-  useRegex: false,
-  fullTextMode: false
-}) {
-  const newData = { ...data };
-  if (options.fullTextMode) {
-    newData.corrected_segments = data.corrected_segments.map((segment) => {
-      let pattern;
-      if (options.useRegex) {
-        pattern = new RegExp(findText, options.caseSensitive ? "g" : "gi");
-      } else {
-        const escapedFindText = findText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        pattern = new RegExp(escapedFindText, options.caseSensitive ? "g" : "gi");
-      }
-      const segmentText = segment.text;
-      if (!pattern.test(segmentText)) {
-        return segment;
-      }
-      pattern.lastIndex = 0;
-      const newSegmentText = segmentText.replace(pattern, replaceText);
-      const newWordTexts = newSegmentText.trim().split(/\s+/).filter((text) => text.length > 0);
-      const newWords = [];
-      if (newWordTexts.length === segment.words.length) {
-        for (let i = 0; i < newWordTexts.length; i++) {
-          newWords.push({
-            ...segment.words[i],
-            text: newWordTexts[i]
-          });
-        }
-      } else if (newWordTexts.length < segment.words.length) {
-        let oldWordIndex = 0;
-        for (let i = 0; i < newWordTexts.length; i++) {
-          while (oldWordIndex < segment.words.length && segment.words[oldWordIndex].text.trim() === "") {
-            oldWordIndex++;
-          }
-          if (oldWordIndex < segment.words.length) {
-            newWords.push({
-              ...segment.words[oldWordIndex],
-              text: newWordTexts[i]
-            });
-            oldWordIndex++;
-          } else {
-            newWords.push({
-              id: nanoid(),
-              text: newWordTexts[i],
-              start_time: null,
-              end_time: null
-            });
-          }
-        }
-      } else {
-        for (let i = 0; i < newWordTexts.length; i++) {
-          if (i < segment.words.length) {
-            newWords.push({
-              ...segment.words[i],
-              text: newWordTexts[i]
-            });
-          } else {
-            newWords.push({
-              id: nanoid(),
-              text: newWordTexts[i],
-              start_time: null,
-              end_time: null
-            });
-          }
-        }
-      }
-      return {
-        ...segment,
-        words: newWords,
-        text: newSegmentText
-      };
-    });
-  } else {
-    newData.corrected_segments = data.corrected_segments.map((segment) => {
-      let newWords = segment.words.map((word) => {
-        let pattern;
-        if (options.useRegex) {
-          pattern = new RegExp(findText, options.caseSensitive ? "g" : "gi");
-        } else {
-          const escapedFindText = findText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-          pattern = new RegExp(escapedFindText, options.caseSensitive ? "g" : "gi");
+          return;
+        }
+        if (word.text !== updatedWord.text || Math.abs((word.start_time ?? 0) - (updatedWord.start_time ?? 0)) > 1e-4 || Math.abs((word.end_time ?? 0) - (updatedWord.end_time ?? 0)) > 1e-4) {
+          wordChanges.push({
+            type: "modified",
+            path: `Word ${wordIndex}`,
+            oldValue: `"${word.text}" (${((_c2 = word.start_time) == null ? void 0 : _c2.toFixed(4)) ?? "N/A"} - ${((_d2 = word.end_time) == null ? void 0 : _d2.toFixed(4)) ?? "N/A"})`,
+            newValue: `"${updatedWord.text}" (${((_e2 = updatedWord.start_time) == null ? void 0 : _e2.toFixed(4)) ?? "N/A"} - ${((_f2 = updatedWord.end_time) == null ? void 0 : _f2.toFixed(4)) ?? "N/A"})`
+          });
         }
-        return {
-          ...word,
-          text: word.text.replace(pattern, replaceText)
-        };
       });
-      newWords = newWords.filter((word) => word.text.trim() !== "");
-      return {
-        ...segment,
-        words: newWords,
-        text: newWords.map((w) => w.text).join(" ")
-      };
+      if (normalizedUpdated.words.length > normalizedOriginal.words.length) {
+        for (let i = normalizedOriginal.words.length; i < normalizedUpdated.words.length; i++) {
+          const word = normalizedUpdated.words[i];
+          wordChanges.push({
+            type: "added",
+            path: `Word ${i}`,
+            newValue: `"${word.text}" (${((_a2 = word.start_time) == null ? void 0 : _a2.toFixed(4)) ?? "N/A"} - ${((_b2 = word.end_time) == null ? void 0 : _b2.toFixed(4)) ?? "N/A"})`
+          });
+        }
+      }
+      if (normalizedOriginal.text !== normalizedUpdated.text || Math.abs((normalizedOriginal.start_time ?? 0) - (normalizedUpdated.start_time ?? 0)) > 1e-4 || Math.abs((normalizedOriginal.end_time ?? 0) - (normalizedUpdated.end_time ?? 0)) > 1e-4 || wordChanges.length > 0) {
+        diffs.push({
+          type: "modified",
+          path: `Segment ${index}`,
+          segmentIndex: index,
+          oldValue: `"${normalizedOriginal.text}" (${((_c = normalizedOriginal.start_time) == null ? void 0 : _c.toFixed(4)) ?? "N/A"} - ${((_d = normalizedOriginal.end_time) == null ? void 0 : _d.toFixed(4)) ?? "N/A"})`,
+          newValue: `"${normalizedUpdated.text}" (${((_e = normalizedUpdated.start_time) == null ? void 0 : _e.toFixed(4)) ?? "N/A"} - ${((_f = normalizedUpdated.end_time) == null ? void 0 : _f.toFixed(4)) ?? "N/A"})`,
+          wordChanges: wordChanges.length > 0 ? wordChanges : void 0
+        });
+      }
     });
-  }
-  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 (updatedData.corrected_segments.length > originalData.corrected_segments.length) {
+      for (let i = originalData.corrected_segments.length; i < updatedData.corrected_segments.length; i++) {
+        const segment = updatedData.corrected_segments[i];
+        diffs.push({
+          type: "added",
+          path: `Segment ${i}`,
+          segmentIndex: i,
+          newValue: `"${segment.text}" (${((_a = segment.start_time) == null ? void 0 : _a.toFixed(4)) ?? "N/A"} - ${((_b = segment.end_time) == null ? void 0 : _b.toFixed(4)) ?? "N/A"})`
+        });
+      }
+    }
+    return diffs;
+  }, [originalData, updatedData]);
+  const renderCompactDiff = (diff) => {
+    var _a, _b, _c;
+    if (diff.type !== "modified") {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Typography,
+        {
+          color: diff.type === "added" ? "success.main" : "error.main",
+          sx: { mb: 0.5 },
+          children: [
+            diff.segmentIndex,
+            ": ",
+            diff.type === "added" ? "+ " : "- ",
+            diff.type === "added" ? diff.newValue : diff.oldValue
+          ]
+        },
+        diff.path
+      );
+    }
+    const oldText = ((_a = diff.oldValue) == null ? void 0 : _a.split('"')[1]) || "";
+    const newText = ((_b = diff.newValue) == null ? void 0 : _b.split('"')[1]) || "";
+    const oldWords = oldText.split(" ");
+    const newWords = newText.split(" ");
+    const timingMatch = (_c = diff.newValue) == null ? void 0 : _c.match(/\(([\d.]+) - ([\d.]+)\)/);
+    const timing = timingMatch ? `(${parseFloat(timingMatch[1]).toFixed(2)} - ${parseFloat(timingMatch[2]).toFixed(2)})` : "";
+    const unifiedDiff = [];
+    let i = 0, j = 0;
+    while (i < oldWords.length || j < newWords.length) {
+      if (i < oldWords.length && j < newWords.length && oldWords[i] === newWords[j]) {
+        unifiedDiff.push({ type: "unchanged", text: oldWords[i] });
+        i++;
+        j++;
+      } else if (i < oldWords.length && (!newWords[j] || oldWords[i] !== newWords[j])) {
+        unifiedDiff.push({ type: "deleted", text: oldWords[i] });
+        i++;
+      } else if (j < newWords.length) {
+        unifiedDiff.push({ type: "added", text: newWords[j] });
+        j++;
+      }
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mr: 1, minWidth: "30px" }, children: [
+        diff.segmentIndex,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", flexGrow: 1, alignItems: "center" }, children: [
+        unifiedDiff.map((word, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Typography,
+          {
+            component: "span",
+            color: word.type === "unchanged" ? "text.primary" : word.type === "deleted" ? "error.main" : "success.main",
+            sx: {
+              textDecoration: word.type === "deleted" ? "line-through" : "none",
+              mr: 0.5
+            },
+            children: word.text
+          },
+          idx
+        )),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", sx: { ml: 1 }, children: timing })
+      ] })
+    ] }, diff.path);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      maxWidth: "md",
+      fullWidth: true,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Preview Video (With Vocals)" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          DialogContent,
+          {
+            dividers: true,
+            sx: {
+              p: 0,
+              // Remove default padding
+              "&:first-of-type": { pt: 0 }
+              // Remove default top padding
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                PreviewVideoSection,
+                {
+                  apiClient,
+                  isModalOpen: open,
+                  updatedData,
+                  videoRef
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { p: 2, mt: 0 }, children: differences.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { color: "text.secondary", children: "No manual corrections detected. If everything looks good in the preview, click submit and the server will generate the final karaoke video." }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+                  "Total segments: ",
+                  updatedData.corrected_segments.length
+                ] })
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: [
+                  differences.length,
+                  " segment",
+                  differences.length !== 1 ? "s" : "",
+                  " modified:"
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Paper, { sx: { p: 2 }, children: differences.map(renderCompactDiff) })
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogActions, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              onClick: onClose,
+              color: "warning",
+              startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowBack, {}),
+              sx: { mr: "auto" },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              onClick: onSubmit,
+              variant: "contained",
+              color: "success",
+              endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(CloudUpload, {}),
+              children: "Complete Review"
+            }
+          )
+        ] })
+      ]
+    }
   );
-  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;
@@ -36519,7 +36552,11 @@ function Header({
   isUpdatingHandlers,
   onHandlerClick,
   onFindReplace,
-  onEditAll
+  onEditAll,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo
 }) {
   var _a, _b, _c;
   const theme2 = useTheme();
@@ -36684,6 +36721,40 @@ function Header({
           onChange: onModeChange
         }
       ),
+      !isReadOnly && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", height: "32px" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Undo (Cmd/Ctrl+Z)", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: onUndo,
+            disabled: !canUndo,
+            sx: {
+              border: `1px solid ${theme2.palette.divider}`,
+              borderRadius: "4px",
+              mx: 0.25,
+              height: "32px",
+              width: "32px"
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(UndoIcon, { fontSize: "small" })
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Redo (Cmd/Ctrl+Shift+Z)", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: onRedo,
+            disabled: !canRedo,
+            sx: {
+              border: `1px solid ${theme2.palette.divider}`,
+              borderRadius: "4px",
+              mx: 0.25,
+              height: "32px",
+              width: "32px"
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(RedoIcon, { fontSize: "small" })
+          }
+        ) }) })
+      ] }),
       !isReadOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button,
         {
@@ -37158,7 +37229,8 @@ const MemoizedTranscriptionView = reactExports.memo(function MemoizedTranscripti
   onPlaySegment,
   currentTime,
   anchors,
-  disableHighlighting
+  disableHighlighting,
+  onDataChange
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TranscriptionView,
@@ -37172,7 +37244,8 @@ const MemoizedTranscriptionView = reactExports.memo(function MemoizedTranscripti
       highlightInfo,
       onPlaySegment,
       currentTime: disableHighlighting ? void 0 : currentTime,
-      anchors
+      anchors,
+      onDataChange
     }
   );
 });
@@ -37224,7 +37297,11 @@ const MemoizedHeader = reactExports.memo(function MemoizedHeader2({
   isUpdatingHandlers,
   onHandlerClick,
   onFindReplace,
-  onEditAll
+  onEditAll,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Header,
@@ -37242,7 +37319,11 @@ const MemoizedHeader = reactExports.memo(function MemoizedHeader2({
       isUpdatingHandlers,
       onHandlerClick,
       onFindReplace,
-      onEditAll
+      onEditAll,
+      onUndo,
+      onRedo,
+      canUndo,
+      canRedo
     }
   );
 });
@@ -37258,7 +37339,6 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
     return availableSources.length > 0 ? availableSources[0] : "";
   });
   const [isReviewComplete, setIsReviewComplete] = reactExports.useState(false);
-  const [data, setData] = reactExports.useState(initialData);
   const [originalData] = reactExports.useState(() => JSON.parse(JSON.stringify(initialData)));
   const [interactionMode, setInteractionMode] = reactExports.useState("edit");
   const [isShiftPressed, setIsShiftPressed] = reactExports.useState(false);
@@ -37279,12 +37359,27 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
   const [isFindReplaceModalOpen, setIsFindReplaceModalOpen] = reactExports.useState(false);
   const theme2 = useTheme();
   const isMobile = useMediaQuery(theme2.breakpoints.down("md"));
+  const [history, setHistory] = reactExports.useState([initialData]);
+  const [historyIndex, setHistoryIndex] = reactExports.useState(0);
+  const data = history[historyIndex];
+  const updateDataWithHistory = reactExports.useCallback((newData, actionDescription) => {
+    const newHistory = history.slice(0, historyIndex + 1);
+    const deepCopiedNewData = JSON.parse(JSON.stringify(newData));
+    newHistory.push(deepCopiedNewData);
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+  }, [history, historyIndex]);
+  reactExports.useEffect(() => {
+    setHistory([initialData]);
+    setHistoryIndex(0);
+  }, [initialData]);
   reactExports.useEffect(() => {
   }, [initialData]);
   reactExports.useEffect(() => {
     const savedData = loadSavedData(initialData);
     if (savedData && window.confirm("Found saved progress for this song. Would you like to restore it?")) {
-      setData(savedData);
+      setHistory([savedData]);
+      setHistoryIndex(0);
     }
   }, [initialData]);
   reactExports.useEffect(() => {
@@ -37337,7 +37432,7 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
     var _a, _b, _c, _d, _e, _f, _g;
     if (effectiveMode === "delete_word") {
       const newData = deleteWord(data, info.word_id);
-      setData(newData);
+      updateDataWithHistory(newData, "delete word");
       handleFlash("word");
       return;
     }
@@ -37448,17 +37543,24 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
         });
       }
     }
-  }, [data, effectiveMode, setModalContent, handleFlash, deleteWord]);
+  }, [data, effectiveMode, setModalContent, handleFlash, deleteWord, updateDataWithHistory]);
   const handleUpdateSegment = reactExports.useCallback((updatedSegment) => {
     if (!editModalSegment) return;
-    const newData = updateSegment(data, editModalSegment.index, updatedSegment);
-    setData(newData);
+    const currentData = history[historyIndex];
+    const newSegments = currentData.corrected_segments.map(
+      (segment, i) => i === editModalSegment.index ? updatedSegment : segment
+    );
+    const newDataImmutable = {
+      ...currentData,
+      corrected_segments: newSegments
+    };
+    updateDataWithHistory(newDataImmutable, "update segment");
     setEditModalSegment(null);
-  }, [data, editModalSegment]);
+  }, [history, historyIndex, editModalSegment, updateDataWithHistory]);
   const handleDeleteSegment = reactExports.useCallback((segmentIndex) => {
     const newData = deleteSegment(data, segmentIndex);
-    setData(newData);
-  }, [data]);
+    updateDataWithHistory(newData, "delete segment");
+  }, [data, updateDataWithHistory]);
   const handleFinishReview = reactExports.useCallback(() => {
     setIsReviewModalOpen(true);
   }, []);
@@ -37483,7 +37585,8 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
   const handleResetCorrections = reactExports.useCallback(() => {
     if (window.confirm("Are you sure you want to reset all corrections? This cannot be undone.")) {
       clearSavedData(initialData);
-      setData(JSON.parse(JSON.stringify(initialData)));
+      setHistory([JSON.parse(JSON.stringify(initialData))]);
+      setHistoryIndex(0);
       setModalContent(null);
       setFlashingType(null);
       setHighlightInfo(null);
@@ -37492,20 +37595,20 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
   }, [initialData]);
   const handleAddSegment = reactExports.useCallback((beforeIndex) => {
     const newData = addSegmentBefore(data, beforeIndex);
-    setData(newData);
-  }, [data]);
+    updateDataWithHistory(newData, "add segment");
+  }, [data, updateDataWithHistory]);
   const handleSplitSegment = reactExports.useCallback((segmentIndex, afterWordIndex) => {
     const newData = splitSegment(data, segmentIndex, afterWordIndex);
     if (newData) {
-      setData(newData);
+      updateDataWithHistory(newData, "split segment");
       setEditModalSegment(null);
     }
-  }, [data]);
+  }, [data, updateDataWithHistory]);
   const handleMergeSegment = reactExports.useCallback((segmentIndex, mergeWithNext) => {
     const newData = mergeSegment(data, segmentIndex, mergeWithNext);
-    setData(newData);
+    updateDataWithHistory(newData, "merge segment");
     setEditModalSegment(null);
-  }, [data]);
+  }, [data, updateDataWithHistory]);
   const handleHandlerToggle = reactExports.useCallback(async (handler, enabled) => {
     if (!apiClient) return;
     try {
@@ -37517,7 +37620,7 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
         currentEnabled.delete(handler);
       }
       const newData = await apiClient.updateHandlers(Array.from(currentEnabled));
-      setData(newData);
+      updateDataWithHistory(newData, `toggle handler ${handler}`);
       setModalContent(null);
       setFlashingType(null);
       setHighlightInfo(null);
@@ -37528,7 +37631,7 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
     } finally {
       setIsUpdatingHandlers(false);
     }
-  }, [apiClient, data.metadata.enabled_handlers, handleFlash]);
+  }, [apiClient, data.metadata.enabled_handlers, handleFlash, updateDataWithHistory]);
   const handleHandlerClick = reactExports.useCallback((handler) => {
     setFlashingHandler(handler);
     setFlashingType("handler");
@@ -37545,14 +37648,14 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
     try {
       setIsAddingLyrics(true);
       const newData = await apiClient.addLyrics(source, lyrics);
-      setData(newData);
+      updateDataWithHistory(newData, "add lyrics");
     } finally {
       setIsAddingLyrics(false);
     }
-  }, [apiClient]);
+  }, [apiClient, updateDataWithHistory]);
   const handleFindReplace = (findText, replaceText, options) => {
     const newData = findAndReplace(data, findText, replaceText, options);
-    setData(newData);
+    updateDataWithHistory(newData, "find/replace");
   };
   const handleEditAll = reactExports.useCallback(() => {
     console.log("EditAll - Starting process");
@@ -37685,19 +37788,70 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
       totalWordCount: updatedSegments.reduce((count, segment) => count + segment.words.length, 0),
       originalTotalWordCount: data.corrected_segments.reduce((count, segment) => count + segment.words.length, 0)
     });
-    setData({
+    const newData = {
       ...data,
       corrected_segments: updatedSegments
-    });
+    };
+    updateDataWithHistory(newData, "edit all");
     setIsEditAllModalOpen(false);
     setGlobalEditSegment(null);
-  }, [data]);
+  }, [data, updateDataWithHistory]);
+  const handleUndo = reactExports.useCallback(() => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      setHistoryIndex(newIndex);
+    }
+  }, [historyIndex, history]);
+  const handleRedo = reactExports.useCallback(() => {
+    if (historyIndex < history.length - 1) {
+      const newIndex = historyIndex + 1;
+      setHistoryIndex(newIndex);
+    }
+  }, [historyIndex, history]);
+  const canUndo = historyIndex > 0;
+  const canRedo = historyIndex < history.length - 1;
   const metricClickHandlers = reactExports.useMemo(() => ({
     anchor: () => handleFlash("anchor"),
     corrected: () => handleFlash("corrected"),
     uncorrected: () => handleFlash("uncorrected")
   }), [handleFlash]);
   const isAnyModalOpenMemo = reactExports.useMemo(() => isAnyModalOpen, [isAnyModalOpen]);
+  reactExports.useEffect(() => {
+    const { handleKeyDown: baseHandleKeyDown, handleKeyUp, cleanup } = setupKeyboardHandlers({
+      setIsShiftPressed,
+      setIsCtrlPressed
+    });
+    const handleKeyDown = (e) => {
+      const targetElement = e.target;
+      const isInputFocused = targetElement.tagName === "INPUT" || targetElement.tagName === "TEXTAREA";
+      if (!isAnyModalOpen && !isInputFocused) {
+        const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+        const modifierKey = isMac ? e.metaKey : e.ctrlKey;
+        if (modifierKey && e.key.toLowerCase() === "z") {
+          e.preventDefault();
+          if (e.shiftKey) {
+            if (canRedo) handleRedo();
+          } else {
+            if (canUndo) handleUndo();
+          }
+          return;
+        }
+      }
+      baseHandleKeyDown(e);
+    };
+    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, setIsCtrlPressed, isAnyModalOpen, handleUndo, handleRedo, canUndo, canRedo]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: {
     p: 1,
     pb: 3,
@@ -37721,7 +37875,11 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
         onHandlerClick: handleHandlerClick,
         onAddLyrics: () => setIsAddLyricsModalOpen(true),
         onFindReplace: () => setIsFindReplaceModalOpen(true),
-        onEditAll: handleEditAll
+        onEditAll: handleEditAll,
+        onUndo: handleUndo,
+        onRedo: handleRedo,
+        canUndo,
+        canRedo
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, direction: isMobile ? "column" : "row", children: [
@@ -37739,7 +37897,10 @@ function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly,
             onPlaySegment: handlePlaySegment,
             currentTime: currentAudioTime,
             anchors: data.anchor_sequences,
-            disableHighlighting: isAnyModalOpenMemo
+            disableHighlighting: isAnyModalOpenMemo,
+            onDataChange: (updatedData) => {
+              updateDataWithHistory(updatedData, "direct data change");
+            }
           }
         ),
         !isReadOnly && apiClient && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: {
@@ -38221,4 +38382,4 @@ ReactDOM$1.createRoot(document.getElementById("root")).render(
     /* @__PURE__ */ jsxRuntimeExports.jsx(App, {})
   ] })
 );
-//# sourceMappingURL=index-2vK-qVJS.js.map
+//# sourceMappingURL=index-BpvPgWoc.js.map