@mieweb/ui 0.6.1 → 0.7.0-dev.178

package/dist/chunk-YVLP3ATI.js

@@ -0,0 +1,1776 @@
+import { PLAYBACK_SPEEDS } from './chunk-J7KWQJOB.js';
+import { Slider } from './chunk-JBB25LFB.js';
+import { MediaPlayer } from './chunk-S6Z3KDEM.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-NTYGCBCL.js';
+import * as React6 from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var SILENCE_THRESHOLD_OPTIONS = [0.3, 0.4, 0.5, 0.75, 1, 1.5, 2];
+function formatDuration(ms) {
+  const totalSeconds = Math.round(ms / 1e3);
+  if (totalSeconds < 90) {
+    return `${totalSeconds}s`;
+  }
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+var FillerWordsModal = ({
+  isOpen,
+  onClose,
+  onApply,
+  matchingCounts,
+  fillerDurations,
+  silenceCounts,
+  currentDurationMs
+}) => {
+  const [searchTerm, setSearchTerm] = React6.useState("");
+  const [selectedFillers, setSelectedFillers] = React6.useState(
+    new Set(DEFAULT_FILLER_WORDS)
+  );
+  const [customWord, setCustomWord] = React6.useState("");
+  const [removeSilence, setRemoveSilence] = React6.useState(false);
+  const [silenceThreshold, setSilenceThreshold] = React6.useState(0.4);
+  const filteredFillers = DEFAULT_FILLER_WORDS.filter(
+    (word) => word.toLowerCase().includes(searchTerm.toLowerCase())
+  ).sort((a, b) => {
+    const countA = matchingCounts.get(a) || 0;
+    const countB = matchingCounts.get(b) || 0;
+    if (countB !== countA) return countB - countA;
+    return a.localeCompare(b);
+  });
+  const customFillers = Array.from(selectedFillers).filter((word) => !DEFAULT_FILLER_WORDS.includes(word)).filter((word) => word.toLowerCase().includes(searchTerm.toLowerCase())).sort((a, b) => {
+    const countA = matchingCounts.get(a) || 0;
+    const countB = matchingCounts.get(b) || 0;
+    if (countB !== countA) return countB - countA;
+    return a.localeCompare(b);
+  });
+  const toggleFiller = (word) => {
+    setSelectedFillers((prev) => {
+      const next = new Set(prev);
+      if (next.has(word)) {
+        next.delete(word);
+      } else {
+        next.add(word);
+      }
+      return next;
+    });
+  };
+  const handleAddCustom = () => {
+    const trimmed = customWord.trim().toLowerCase();
+    if (trimmed && !selectedFillers.has(trimmed)) {
+      setSelectedFillers((prev) => /* @__PURE__ */ new Set([...prev, trimmed]));
+      setCustomWord("");
+    }
+  };
+  const silenceData = removeSilence ? silenceCounts.find((s) => s.threshold === silenceThreshold) || {
+    count: 0,
+    durationMs: 0
+  } : { count: 0, durationMs: 0 };
+  const silenceRemovalCount = silenceData.count;
+  const silenceDurationMs = silenceData.durationMs;
+  const handleApply = () => {
+    onApply(
+      Array.from(selectedFillers),
+      removeSilence ? silenceThreshold : null
+    );
+    onClose();
+  };
+  const selectAll = () => {
+    setSelectedFillers(/* @__PURE__ */ new Set([...DEFAULT_FILLER_WORDS, ...customFillers]));
+  };
+  const selectNone = () => {
+    setSelectedFillers(/* @__PURE__ */ new Set());
+  };
+  const fillerMatches = Array.from(selectedFillers).reduce(
+    (sum, word) => sum + (matchingCounts.get(word) || 0),
+    0
+  );
+  const totalMatches = fillerMatches + silenceRemovalCount;
+  const fillerTimeSavedMs = Array.from(selectedFillers).reduce(
+    (sum, word) => sum + (fillerDurations.get(word) || 0),
+    0
+  );
+  const totalTimeSavedMs = fillerTimeSavedMs + silenceDurationMs;
+  const newDurationMs = currentDurationMs - totalTimeSavedMs;
+  const renderFillerItem = (word, isCustom) => {
+    const count = matchingCounts.get(word) || 0;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "hover:bg-muted flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-1 text-sm transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "sm",
+              checked: selectedFillers.has(word),
+              onChange: () => toggleFiller(word),
+              "aria-label": `Remove "${word}"`
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-foreground min-w-0 flex-1 truncate", children: word }),
+          count > 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
+            "(",
+            count,
+            ")"
+          ] }),
+          isCustom && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive focus-visible:ring-ring rounded px-1 transition-colors focus-visible:ring-2 focus-visible:outline-none",
+              onClick: (e) => {
+                e.preventDefault();
+                setSelectedFillers((prev) => {
+                  const next = new Set(prev);
+                  next.delete(word);
+                  return next;
+                });
+              },
+              "aria-label": `Remove ${word}`,
+              children: "\xD7"
+            }
+          )
+        ]
+      },
+      word
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      open: isOpen,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      size: "lg",
+      children: [
+        /* @__PURE__ */ jsxs(ModalHeader, { children: [
+          /* @__PURE__ */ jsx(ModalTitle, { children: "Remove Filler Words" }),
+          /* @__PURE__ */ jsx(ModalClose, { "aria-label": "Close modal" })
+        ] }),
+        /* @__PURE__ */ jsxs(ModalBody, { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              size: "sm",
+              type: "text",
+              placeholder: "Search filler words...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              "aria-label": "Search filler words"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: selectAll, children: "Select All" }),
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: selectNone, children: "Select None" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/40 flex flex-wrap items-center gap-2 rounded-lg border px-3 py-2", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                size: "sm",
+                label: "Remove silences greater than",
+                checked: removeSilence,
+                onChange: (e) => setRemoveSilence(e.target.checked)
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-24", children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                size: "sm",
+                options: SILENCE_THRESHOLD_OPTIONS.map((t) => ({
+                  value: String(t),
+                  label: `${t}s`
+                })),
+                value: String(silenceThreshold),
+                onValueChange: (value) => setSilenceThreshold(parseFloat(value)),
+                disabled: !removeSilence,
+                "aria-label": "Silence threshold in seconds"
+              }
+            ) }),
+            removeSilence && silenceRemovalCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
+              "(",
+              silenceRemovalCount,
+              " silences)"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "border-border grid max-h-56 grid-cols-2 gap-x-3 gap-y-0.5 overflow-y-auto rounded-lg border p-2 sm:grid-cols-3", children: [
+            filteredFillers.map((word) => renderFillerItem(word, false)),
+            customFillers.map((word) => renderFillerItem(word, true))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                size: "sm",
+                type: "text",
+                placeholder: "Add custom filler word...",
+                value: customWord,
+                onChange: (e) => setCustomWord(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    handleAddCustom();
+                  }
+                },
+                "aria-label": "Add custom filler word"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                onClick: handleAddCustom,
+                disabled: !customWord.trim(),
+                children: "Add"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(ModalFooter, { className: "justify-between", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
+            totalMatches,
+            " items \u2022 saves ",
+            formatDuration(totalTimeSavedMs),
+            " \u2192",
+            " ",
+            formatDuration(newDurationMs)
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "primary",
+                size: "sm",
+                onClick: handleApply,
+                disabled: totalMatches === 0,
+                children: [
+                  "Mark as Deleted (",
+                  totalMatches,
+                  ")"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+FillerWordsModal.displayName = "FillerWordsModal";
+var WordEditorModal = ({
+  isOpen,
+  editableWord,
+  onClose,
+  onSave,
+  onSplitSilence,
+  onDelete
+}) => {
+  const [inputValue, setInputValue] = React6.useState("");
+  const [error, setError] = React6.useState(null);
+  const inputRef = React6.useRef(null);
+  const isSilence = editableWord?.word.wordType === "silence";
+  const durationMs = editableWord ? editableWord.word.endMs - editableWord.word.startMs : 0;
+  const durationSec = durationMs / 1e3;
+  React6.useEffect(() => {
+    if (isOpen && editableWord) {
+      if (isSilence) {
+        setInputValue("");
+      } else {
+        setInputValue(editableWord.word.text);
+      }
+      setError(null);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [isOpen, editableWord, isSilence]);
+  const parseSilenceSplit = (input) => {
+    const trimmed = input.trim();
+    if (!trimmed) return null;
+    const parts = trimmed.split(/\s+/);
+    const durations = [];
+    let total = 0;
+    for (const part of parts) {
+      const num = parseFloat(part);
+      if (isNaN(num) || num <= 0) {
+        return {
+          durations: [],
+          remainder: 0,
+          error: `Invalid number: "${part}"`
+        };
+      }
+      durations.push(num);
+      total += num;
+    }
+    if (total >= durationSec) {
+      return {
+        durations: [],
+        remainder: 0,
+        error: `Total (${total.toFixed(1)}s) exceeds silence duration (${durationSec.toFixed(1)}s)`
+      };
+    }
+    const remainder = durationSec - total;
+    return { durations, remainder };
+  };
+  const handleApply = () => {
+    if (isSilence) {
+      const parsed = parseSilenceSplit(inputValue);
+      if (parsed?.error) {
+        setError(parsed.error);
+        return;
+      }
+      if (parsed && parsed.durations.length > 0) {
+        const allDurations = [...parsed.durations, parsed.remainder];
+        onSplitSilence(allDurations);
+        onClose();
+      }
+    } else {
+      const trimmed = inputValue.trim();
+      if (trimmed && trimmed !== editableWord?.word.text) {
+        onSave(trimmed);
+      }
+      onClose();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleApply();
+    }
+  };
+  const preview = isSilence ? parseSilenceSplit(inputValue) : null;
+  const applyDisabled = isSilence ? !inputValue.trim() || !!preview?.error || !preview || preview.durations.length === 0 : !inputValue.trim();
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      open: isOpen && editableWord !== null,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      size: "md",
+      children: [
+        /* @__PURE__ */ jsxs(ModalHeader, { children: [
+          /* @__PURE__ */ jsx(ModalTitle, { children: isSilence ? "Split Silence" : "Edit Word" }),
+          /* @__PURE__ */ jsx(ModalClose, { "aria-label": "Close editor" })
+        ] }),
+        /* @__PURE__ */ jsx(ModalBody, { className: "flex flex-col gap-2", children: isSilence ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-foreground m-0 text-sm", children: [
+            "Silence duration:",
+            " ",
+            /* @__PURE__ */ jsxs("strong", { className: "font-semibold", children: [
+              durationSec.toFixed(1),
+              "s"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground m-0 text-xs", children: 'Enter space-separated durations to split (e.g., "1 1 4 1")' }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              type: "text",
+              value: inputValue,
+              onChange: (e) => {
+                setInputValue(e.target.value);
+                setError(null);
+              },
+              onKeyDown: handleKeyDown,
+              placeholder: "1 2 3...",
+              "aria-label": "Split durations"
+            }
+          ),
+          error && /* @__PURE__ */ jsx("p", { className: "text-destructive m-0 text-sm", role: "alert", children: error }),
+          preview && !preview.error && preview.durations.length > 0 && !error && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground m-0 text-sm", children: [
+            "Preview:",
+            " ",
+            [...preview.durations, preview.remainder].map((d) => `[${d.toFixed(1)}s]`).join(" ")
+          ] }),
+          preview?.error && !error && /* @__PURE__ */ jsx("p", { className: "text-destructive m-0 text-sm", role: "alert", children: preview.error })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-foreground m-0 text-sm", children: "Edit the word text:" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              type: "text",
+              value: inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              "aria-label": "Word text"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs(ModalFooter, { className: "justify-between", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: editableWord?.deleted ? "secondary" : "danger",
+              size: "sm",
+              onClick: onDelete,
+              children: editableWord?.deleted ? "Restore" : "Delete"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                size: "sm",
+                onClick: handleApply,
+                disabled: applyDisabled,
+                children: isSilence ? "Split" : "Save"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+WordEditorModal.displayName = "WordEditorModal";
+var SilenceSettingsModal = ({
+  isOpen,
+  onClose,
+  minSilenceMs,
+  nlSilenceMs,
+  onApply
+}) => {
+  const [threshold, setThreshold] = React6.useState(minSilenceMs / 1e3);
+  const [nlThreshold, setNlThreshold] = React6.useState(nlSilenceMs / 1e3);
+  React6.useEffect(() => {
+    if (isOpen) {
+      setThreshold(minSilenceMs / 1e3);
+      setNlThreshold(nlSilenceMs / 1e3);
+    }
+  }, [isOpen, minSilenceMs, nlSilenceMs]);
+  const handleApply = () => {
+    const finalNlThreshold = Math.max(nlThreshold, threshold);
+    onApply(Math.round(threshold * 1e3), Math.round(finalNlThreshold * 1e3));
+    onClose();
+  };
+  const handleThresholdChange = (value) => {
+    setThreshold(value);
+    if (nlThreshold < value) {
+      setNlThreshold(value);
+    }
+  };
+  const formatSeconds = (v) => `${v.toFixed(1)}s`;
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      open: isOpen,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      size: "md",
+      children: [
+        /* @__PURE__ */ jsxs(ModalHeader, { children: [
+          /* @__PURE__ */ jsx(ModalTitle, { children: "Silence Settings" }),
+          /* @__PURE__ */ jsx(ModalClose, { "aria-label": "Close modal" })
+        ] }),
+        /* @__PURE__ */ jsxs(ModalBody, { className: "flex flex-col gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Slider,
+              {
+                label: "Minimum silence duration",
+                min: 0.1,
+                max: 2,
+                step: 0.1,
+                value: threshold,
+                onValueChange: handleThresholdChange,
+                showValue: true,
+                formatValue: formatSeconds,
+                "aria-label": "Minimum silence duration"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground m-0 text-xs", children: "Gaps shorter than this will not be shown as silences." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Slider,
+              {
+                label: "Paragraph break threshold",
+                min: threshold,
+                max: 5,
+                step: 0.1,
+                value: nlThreshold,
+                onValueChange: setNlThreshold,
+                showValue: true,
+                formatValue: formatSeconds,
+                "aria-label": "Paragraph break threshold"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground m-0 text-xs", children: "Silences longer than this will create paragraph breaks." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(ModalFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: onClose, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handleApply, children: "Apply" })
+        ] })
+      ]
+    }
+  );
+};
+SilenceSettingsModal.displayName = "SilenceSettingsModal";
+var SpeedMarkerMenu = ({
+  isOpen,
+  position,
+  currentMarker,
+  defaultSpeed,
+  onSetSpeed,
+  onRemoveMarker,
+  onClose
+}) => {
+  const menuRef = React6.useRef(null);
+  React6.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isOpen, onClose]);
+  if (!isOpen || !position) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      className: "border-border bg-card text-card-foreground fixed z-50 min-w-36 overflow-hidden rounded-lg border shadow-lg",
+      style: { left: position.x, top: position.y },
+      role: "menu",
+      "aria-label": "Set speed marker",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "border-border text-muted-foreground border-b px-3 py-1.5 text-xs font-semibold", children: "Set Speed Marker" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col p-1", children: PLAYBACK_SPEEDS.map((speed) => {
+          const isActive = currentMarker?.speed === speed;
+          const isDefault = speed === defaultSpeed && !currentMarker;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `focus-visible:ring-ring flex items-center justify-between gap-2 rounded-md px-2.5 py-1 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none ${isActive ? "bg-primary-600 font-medium text-white" : "text-foreground hover:bg-muted"}`,
+              onClick: () => {
+                onSetSpeed(speed);
+                onClose();
+              },
+              role: "menuitem",
+              children: [
+                speed,
+                "x",
+                isDefault && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "default" })
+              ]
+            },
+            speed
+          );
+        }) }),
+        currentMarker && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "border-border text-destructive hover:bg-destructive/10 focus-visible:ring-ring w-full border-t px-2.5 py-1.5 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none",
+            onClick: () => {
+              onRemoveMarker();
+              onClose();
+            },
+            role: "menuitem",
+            children: "Remove Marker"
+          }
+        )
+      ]
+    }
+  );
+};
+SpeedMarkerMenu.displayName = "SpeedMarkerMenu";
+var yamlPromise = null;
+function loadYaml() {
+  yamlPromise ??= import(
+    /* @vite-ignore */
+    'js-yaml'
+  );
+  return yamlPromise;
+}
+async function parseScript(text, format) {
+  let data;
+  if (format === "json") {
+    data = JSON.parse(text);
+  } else {
+    const yaml = await loadYaml();
+    data = yaml.load(text);
+  }
+  if (!Array.isArray(data)) {
+    throw new Error("Script must be a list of word entries.");
+  }
+  return data.map((raw, i) => {
+    const ew = raw;
+    const w = ew.word;
+    if (!w || typeof w.text !== "string" || typeof w.startMs !== "number" || typeof w.endMs !== "number") {
+      throw new Error(
+        `Entry ${i + 1}: each entry needs word.text, word.startMs and word.endMs.`
+      );
+    }
+    const word = {
+      text: w.text,
+      startMs: w.startMs,
+      endMs: w.endMs,
+      ...typeof w.wordType === "string" ? { wordType: w.wordType } : {},
+      ...typeof w.speakerId === "string" ? { speakerId: w.speakerId } : {}
+    };
+    return {
+      originalIndex: typeof ew.originalIndex === "number" ? ew.originalIndex : -1,
+      deleted: Boolean(ew.deleted),
+      ...ew.inserted !== void 0 ? { inserted: Boolean(ew.inserted) } : {},
+      word
+    };
+  });
+}
+var ScriptPanel = ({
+  transcript,
+  editedWords,
+  onApply,
+  onClose,
+  className
+}) => {
+  const [source, setSource] = React6.useState("editor");
+  const [format, setFormat] = React6.useState("yaml");
+  const [text, setText] = React6.useState("");
+  const [dirty, setDirty] = React6.useState(false);
+  const [error, setError] = React6.useState(null);
+  const readOnly = source === "original";
+  React6.useEffect(() => {
+    if (dirty) return;
+    let cancelled = false;
+    const data = source === "original" ? transcript : editedWords;
+    (async () => {
+      const serialized = format === "json" ? JSON.stringify(data, null, 2) : (await loadYaml()).dump(data, { lineWidth: 120 });
+      if (!cancelled) {
+        setText(serialized);
+        setError(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [source, format, transcript, editedWords, dirty]);
+  const handleApply = async () => {
+    try {
+      const words = await parseScript(text, format);
+      onApply(words);
+      setDirty(false);
+      setError(null);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not parse the script."
+      );
+    }
+  };
+  const handleReset = () => {
+    setDirty(false);
+    setError(null);
+  };
+  const sourceButton = (value, label) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setSource(value);
+        setDirty(false);
+        setError(null);
+      },
+      "aria-pressed": source === value,
+      className: `focus-visible:ring-ring rounded px-1.5 py-0.5 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none ${source === value ? "bg-primary-800 font-medium text-white" : "text-muted-foreground hover:bg-muted hover:text-foreground"}`,
+      children: label
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: `border-border bg-card flex w-80 shrink-0 flex-col border-l lg:w-96 ${className ?? ""}`,
+      "aria-label": "Transcript script",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "border-border flex shrink-0 flex-wrap items-center gap-1.5 border-b px-3 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground text-xs font-semibold", children: "Script" }),
+          /* @__PURE__ */ jsx("span", { className: "bg-border mx-1 h-4 w-px", "aria-hidden": "true" }),
+          sourceButton("editor", "Editor"),
+          sourceButton("original", "Original"),
+          /* @__PURE__ */ jsx("span", { className: "bg-border mx-1 h-4 w-px", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setFormat(format === "yaml" ? "json" : "yaml");
+                setDirty(false);
+                setError(null);
+              },
+              className: "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-ring rounded px-1.5 py-0.5 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
+              title: "Toggle YAML / JSON",
+              children: format.toUpperCase()
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground ml-auto text-[10px]", children: readOnly ? "read-only" : dirty ? "edited" : "live" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: onClose,
+              "aria-label": "Close script panel",
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: text,
+            readOnly,
+            spellCheck: false,
+            onChange: (e) => {
+              setText(e.target.value);
+              setDirty(true);
+            },
+            className: "text-foreground min-h-0 flex-1 resize-none bg-transparent p-3 font-mono text-xs leading-relaxed focus:outline-none",
+            "aria-label": `Script source (${source}, ${format.toUpperCase()})`
+          }
+        ),
+        error && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "border-border text-destructive m-0 shrink-0 border-t px-3 py-2 text-xs",
+            role: "alert",
+            children: error
+          }
+        ),
+        !readOnly && /* @__PURE__ */ jsxs("div", { className: "border-border flex shrink-0 items-center gap-2 border-t px-3 py-2", children: [
+          /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleApply, disabled: !dirty, children: "Apply" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: handleReset,
+              disabled: !dirty,
+              title: "Throw away unapplied typing and re-sync from the editor",
+              children: "Discard"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[10px]", children: "Apply pushes into the editor \u2014 revert an applied change with Undo" })
+        ] })
+      ]
+    }
+  );
+};
+var mediaEditorVariants = cva(
+  // Root is always a row so the ScriptPanel can dock on the right; the
+  // media/transcript split direction lives on the inner wrapper below.
+  "flex h-full min-h-0 w-full overflow-hidden rounded-xl border border-border bg-card text-card-foreground",
+  {
+    variants: {
+      splitLayout: {
+        horizontal: "",
+        vertical: ""
+      }
+    },
+    defaultVariants: {
+      splitLayout: "horizontal"
+    }
+  }
+);
+function formatDuration2(ms) {
+  const totalSeconds = Math.round(ms / 1e3);
+  if (totalSeconds < 90) {
+    return `${totalSeconds}s`;
+  }
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) {
+    return `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+  }
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function wordClassName(s) {
+  const parts = [
+    "relative cursor-pointer rounded-sm px-1 py-0.5 transition-colors duration-150"
+  ];
+  if (s.isSilence) {
+    parts.push("text-xs font-medium italic tracking-wide");
+  }
+  if (s.isSilenceNewline) {
+    parts.push("mt-1.5 block w-fit");
+  }
+  if (s.isAnchor) {
+    parts.push("bg-warning/40 outline outline-2 outline-warning");
+  } else if (s.isActive) {
+    parts.push("bg-primary-800 font-medium text-white");
+  } else if (s.isSelected && s.isFocused) {
+    parts.push("bg-primary-500/40");
+  } else if (s.isDeleted) {
+    parts.push(
+      "bg-destructive/10 text-destructive line-through opacity-40 hover:bg-destructive/20 hover:opacity-70"
+    );
+  } else if (s.isInserted) {
+    parts.push("bg-success/15 text-success hover:bg-success/25");
+  } else if (s.isSilenceNewline) {
+    parts.push("text-primary-500 hover:bg-primary-500/15");
+  } else if (s.isSilence) {
+    parts.push(
+      "border border-dashed border-border bg-muted text-muted-foreground hover:bg-muted/70"
+    );
+  } else {
+    parts.push("hover:bg-primary-500/30");
+  }
+  if (s.isDeleted && (s.isActive || s.isSelected && s.isFocused || s.isAnchor)) {
+    parts.push("line-through opacity-60");
+  }
+  if (s.isCursor && s.isFocused && !s.isAnchor) {
+    if (s.isDeleted) {
+      parts.push("outline outline-2 outline-offset-1 outline-destructive");
+    } else if (s.isActive) {
+      parts.push("outline outline-2 outline-offset-1 outline-background");
+    } else {
+      parts.push("outline outline-2 outline-offset-1 outline-primary-500");
+    }
+  }
+  if (s.hasSpeedMarker) {
+    parts.push("ml-0.5 border-l-[3px] border-l-warning pl-1.5");
+  }
+  return parts.join(" ");
+}
+var Caret = ({ side }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: `bg-primary-500 absolute top-0.5 bottom-0.5 w-0.5 motion-safe:animate-pulse ${side === "before" ? "-left-px" : "right-0.5"}`
+  }
+);
+var MediaEditor = React6.forwardRef(
+  ({
+    src,
+    kind,
+    transcript,
+    initialEditedWords,
+    initialUndoStack,
+    onEditorStateChange,
+    onHasEditsChange,
+    onCursorTimestampChange,
+    onEditedWordsRender,
+    playerRef: externalPlayerRef,
+    className,
+    splitLayout
+  }, ref) => {
+    const edits = useTranscriptEdits({
+      transcript,
+      initialEditedWords,
+      initialUndoStack,
+      onChange: onEditorStateChange
+    });
+    const {
+      editedWords,
+      undoStack,
+      clipboard,
+      hasEdits,
+      undo,
+      toggleWordDeleted,
+      deleteRange,
+      cut,
+      copy,
+      paste,
+      setWordText,
+      splitSilence,
+      deleteWord,
+      replaceEditedWords,
+      removeFillers,
+      setSilenceThresholds,
+      silenceThresholds,
+      speedMarkers,
+      defaultSpeed,
+      setDefaultSpeed,
+      toggleSpeedMarker,
+      removeSpeedMarker,
+      getSpeedAtIndex,
+      getSpeedMarkerAtIndex,
+      playbackSegments,
+      stats,
+      fillerAnalysis
+    } = edits;
+    const [activeWordIndex, setActiveWordIndex] = React6.useState(
+      null
+    );
+    const [cursorIndex, setCursorIndex] = React6.useState(0);
+    const [cursorPosition, setCursorPosition] = React6.useState("before");
+    const [selectionAnchor, setSelectionAnchor] = React6.useState(
+      null
+    );
+    const [selection, setSelection] = React6.useState(
+      null
+    );
+    const [doubleClickAnchor, setDoubleClickAnchor] = React6.useState(null);
+    const [isPlayingSequence, setIsPlayingSequence] = React6.useState(false);
+    const [isFocused, setIsFocused] = React6.useState(false);
+    const [showFillerModal, setShowFillerModal] = React6.useState(false);
+    const [showSilenceModal, setShowSilenceModal] = React6.useState(false);
+    const [showScriptPanel, setShowScriptPanel] = React6.useState(false);
+    const [editorWordIndex, setEditorWordIndex] = React6.useState(
+      null
+    );
+    const [speedMenuWordIndex, setSpeedMenuWordIndex] = React6.useState(null);
+    const [speedMenuPosition, setSpeedMenuPosition] = React6.useState(null);
+    const playerRef = React6.useRef(null);
+    React6.useImperativeHandle(
+      externalPlayerRef,
+      () => playerRef.current,
+      []
+    );
+    const contentRef = React6.useRef(null);
+    const userSetCursor = React6.useRef(null);
+    const isDragging = React6.useRef(false);
+    const longPressTimer = React6.useRef(
+      null
+    );
+    const longPressTriggered = React6.useRef(false);
+    const wordPlaybackStartMs = React6.useRef(null);
+    const wordPlaybackEndMs = React6.useRef(null);
+    const sequenceSegments = React6.useRef([]);
+    const currentSegmentIndex = React6.useRef(0);
+    React6.useEffect(() => {
+      onHasEditsChange?.(hasEdits);
+    }, [hasEdits, onHasEditsChange]);
+    React6.useEffect(() => {
+      onEditedWordsRender?.(editedWords);
+    }, [editedWords, onEditedWordsRender]);
+    React6.useEffect(() => {
+      if (onCursorTimestampChange) {
+        const word = editedWords[cursorIndex];
+        if (word && !word.deleted) {
+          onCursorTimestampChange(word.word.startMs);
+        } else {
+          onCursorTimestampChange(null);
+        }
+      }
+    }, [cursorIndex, editedWords, onCursorTimestampChange]);
+    const prevTranscriptRef = React6.useRef(transcript);
+    React6.useEffect(() => {
+      if (prevTranscriptRef.current === transcript) return;
+      prevTranscriptRef.current = transcript;
+      setCursorIndex(0);
+      setCursorPosition("before");
+      setSelection(null);
+      setSelectionAnchor(null);
+      setDoubleClickAnchor(null);
+      setActiveWordIndex(null);
+      setIsPlayingSequence(false);
+      sequenceSegments.current = [];
+      currentSegmentIndex.current = 0;
+    }, [transcript]);
+    React6.useEffect(() => {
+      if (userSetCursor.current !== null) {
+        return;
+      }
+      if (activeWordIndex !== null && activeWordIndex >= 0) {
+        setCursorIndex(activeWordIndex);
+        setCursorPosition("before");
+        setSelection(null);
+        setSelectionAnchor(null);
+      }
+    }, [activeWordIndex]);
+    React6.useEffect(() => {
+      if (activeWordIndex === null) return;
+      const el = contentRef.current?.querySelector(
+        `[data-word-index="${activeWordIndex}"]`
+      );
+      el?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }, [activeWordIndex]);
+    React6.useEffect(() => {
+      contentRef.current?.focus();
+    }, [transcript]);
+    React6.useEffect(() => {
+      const player = playerRef.current;
+      if (!player) return;
+      const timeMs = player.getCurrentTimeMs();
+      const currentWordIndex = editedWords.findIndex(
+        (ew) => !ew.deleted && timeMs >= ew.word.startMs && timeMs < ew.word.endMs
+      );
+      const targetSpeed = currentWordIndex >= 0 ? getSpeedAtIndex(currentWordIndex) : defaultSpeed;
+      player.setPlaybackRate(targetSpeed);
+    }, [defaultSpeed, speedMarkers, editedWords, getSpeedAtIndex]);
+    const handleTimeUpdate = (timeMs) => {
+      const player = playerRef.current;
+      if (!player) return;
+      if (isPlayingSequence && sequenceSegments.current.length > 0) {
+        const currentSeg = sequenceSegments.current[currentSegmentIndex.current];
+        if (currentSeg && timeMs >= currentSeg.endMs) {
+          const nextIndex = currentSegmentIndex.current + 1;
+          if (nextIndex < sequenceSegments.current.length) {
+            currentSegmentIndex.current = nextIndex;
+            player.seekToMs(sequenceSegments.current[nextIndex].startMs);
+          } else {
+            player.pause();
+            setIsPlayingSequence(false);
+            sequenceSegments.current = [];
+            currentSegmentIndex.current = 0;
+          }
+        }
+      } else if (hasEdits && !player.isPaused()) {
+        const inDeletedWord = editedWords.some(
+          (ew) => ew.deleted && timeMs >= ew.word.startMs && timeMs < ew.word.endMs
+        );
+        if (inDeletedWord) {
+          const nextNonDeleted = editedWords.find(
+            (ew) => !ew.deleted && ew.word.startMs >= timeMs
+          );
+          if (nextNonDeleted) {
+            player.seekToMs(nextNonDeleted.word.startMs);
+          }
+        }
+      }
+      if (wordPlaybackEndMs.current !== null && timeMs >= wordPlaybackEndMs.current) {
+        player.pause();
+        if (wordPlaybackStartMs.current !== null) {
+          player.seekToMs(wordPlaybackStartMs.current);
+          wordPlaybackStartMs.current = null;
+        }
+        wordPlaybackEndMs.current = null;
+      }
+      let editedIndex = -1;
+      if (isPlayingSequence && sequenceSegments.current.length > 0) {
+        const currentSeg = sequenceSegments.current[currentSegmentIndex.current];
+        if (currentSeg) {
+          for (const idx of currentSeg.editedIndices) {
+            const ew = editedWords[idx];
+            if (ew && !ew.deleted && timeMs >= ew.word.startMs && timeMs < ew.word.endMs) {
+              editedIndex = idx;
+              break;
+            }
+          }
+        }
+      }
+      if (editedIndex === -1) {
+        editedIndex = editedWords.findIndex(
+          (ew) => !ew.deleted && timeMs >= ew.word.startMs && timeMs < ew.word.endMs
+        );
+      }
+      if (editedIndex !== activeWordIndex && editedIndex >= 0) {
+        player.setPlaybackRate(getSpeedAtIndex(editedIndex));
+      }
+      setActiveWordIndex(editedIndex >= 0 ? editedIndex : null);
+      userSetCursor.current = null;
+    };
+    const stopSequencePlayback = () => {
+      setIsPlayingSequence(false);
+      sequenceSegments.current = [];
+      currentSegmentIndex.current = 0;
+    };
+    const selectionIndices = React6.useCallback(() => {
+      if (selection) {
+        const indices = [];
+        for (let i = selection.start; i <= selection.end; i++) indices.push(i);
+        return indices;
+      }
+      return [cursorIndex];
+    }, [selection, cursorIndex]);
+    const handleCut = React6.useCallback(() => {
+      cut(selectionIndices());
+    }, [cut, selectionIndices]);
+    const handlePaste = React6.useCallback(() => {
+      if (!clipboard) return;
+      const pastedCount = clipboard.words.length;
+      const insertIndex = paste(cursorIndex, cursorPosition !== "after");
+      if (insertIndex !== null) {
+        setCursorIndex(insertIndex + pastedCount - 1);
+        setCursorPosition("after");
+        setSelection(null);
+        setSelectionAnchor(null);
+      }
+    }, [clipboard, paste, cursorIndex, cursorPosition]);
+    const handleDeleteToggle = React6.useCallback(() => {
+      if (selection) {
+        const anchorIndex = selectionAnchor ?? selection.start;
+        const indices = [anchorIndex];
+        for (let i = selection.start; i <= selection.end; i++) {
+          if (i !== anchorIndex) indices.push(i);
+        }
+        deleteRange(indices);
+      } else {
+        toggleWordDeleted(cursorIndex);
+      }
+    }, [
+      selection,
+      selectionAnchor,
+      cursorIndex,
+      deleteRange,
+      toggleWordDeleted
+    ]);
+    const handleCopy = React6.useCallback(
+      (e) => {
+        const indices = selectionIndices();
+        const selectedWords = indices.map((i) => editedWords[i]).filter((ew) => ew !== void 0 && !ew.deleted);
+        if (selectedWords.length === 0) return;
+        const selectedText = selectedWords.filter((ew) => ew.word.wordType !== "silence").map((ew) => ew.word.text).join(" ");
+        e.preventDefault();
+        e.clipboardData.setData("text/plain", selectedText);
+        copy(indices);
+      },
+      [selectionIndices, editedWords, copy]
+    );
+    const openWordEditor = React6.useCallback((index) => {
+      setEditorWordIndex(index);
+    }, []);
+    const closeWordEditor = React6.useCallback(() => {
+      setEditorWordIndex(null);
+      setTimeout(() => contentRef.current?.focus(), 0);
+    }, []);
+    const handleEditorSave = React6.useCallback(
+      (newText) => {
+        if (editorWordIndex === null) return;
+        setWordText(editorWordIndex, newText);
+      },
+      [editorWordIndex, setWordText]
+    );
+    const handleEditorSplitSilence = React6.useCallback(
+      (durations) => {
+        if (editorWordIndex === null) return;
+        splitSilence(editorWordIndex, durations);
+      },
+      [editorWordIndex, splitSilence]
+    );
+    const handleEditorDelete = React6.useCallback(() => {
+      if (editorWordIndex !== null) {
+        deleteWord(editorWordIndex);
+        closeWordEditor();
+      }
+    }, [editorWordIndex, deleteWord, closeWordEditor]);
+    const handleWordClick = (word, index, e) => {
+      setCursorIndex(index);
+      setCursorPosition("before");
+      userSetCursor.current = index;
+      if (e.shiftKey && selectionAnchor !== null) {
+        setSelection({
+          start: Math.min(selectionAnchor, index),
+          end: Math.max(selectionAnchor, index)
+        });
+      } else if (doubleClickAnchor !== null && doubleClickAnchor !== index && !isDragging.current) {
+        const start = Math.min(doubleClickAnchor, index);
+        const end = Math.max(doubleClickAnchor, index);
+        setSelection({ start, end });
+        setSelectionAnchor(doubleClickAnchor);
+        setDoubleClickAnchor(null);
+      } else if (doubleClickAnchor === index) ; else if (!isDragging.current) {
+        setSelectionAnchor(index);
+        setSelection(null);
+        const player = playerRef.current;
+        if (player) {
+          player.pause();
+          player.seekToMs(word.startMs);
+          wordPlaybackStartMs.current = word.startMs;
+          wordPlaybackEndMs.current = word.endMs;
+          player.play();
+        }
+      }
+    };
+    const handleWordDoubleClick = (index, e) => {
+      e.preventDefault();
+      if (longPressTriggered.current) return;
+      if (doubleClickAnchor === index) {
+        setDoubleClickAnchor(null);
+      } else {
+        setDoubleClickAnchor(index);
+        setSelection(null);
+      }
+    };
+    const handleWordMouseDown = (index, e) => {
+      if (e.button !== 0) return;
+      longPressTriggered.current = false;
+      longPressTimer.current = setTimeout(() => {
+        longPressTriggered.current = true;
+        openWordEditor(index);
+      }, 500);
+      isDragging.current = true;
+      setSelectionAnchor(index);
+      setCursorIndex(index);
+      setCursorPosition("before");
+      setSelection(null);
+    };
+    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;
+      }
+    };
+    const handleWordContextMenu = (index, e) => {
+      e.preventDefault();
+      const rect = e.currentTarget.getBoundingClientRect();
+      const menuHeight = 280;
+      const menuWidth = 150;
+      let x = rect.left;
+      let y = rect.bottom + 4;
+      if (x + menuWidth > window.innerWidth) {
+        x = window.innerWidth - menuWidth - 8;
+      }
+      if (y + menuHeight > window.innerHeight) {
+        y = rect.top - menuHeight - 4;
+        if (y < 0) {
+          y = 8;
+        }
+      }
+      setSpeedMenuPosition({ x, y });
+      setSpeedMenuWordIndex(index);
+    };
+    const handleKeyDown = React6.useCallback(
+      (e) => {
+        const wordCount = editedWords.length;
+        if (wordCount === 0) return;
+        let newIndex = cursorIndex;
+        let handled = false;
+        if (e.key === "Delete" || e.key === "Backspace") {
+          handleDeleteToggle();
+          handled = true;
+        } else if ((e.metaKey || e.ctrlKey) && e.key === "x") {
+          handleCut();
+          handled = true;
+        } else if ((e.metaKey || e.ctrlKey) && e.key === "v" && clipboard) {
+          handlePaste();
+          handled = true;
+        } else if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) {
+          undo();
+          handled = true;
+        } else if (e.key === "ArrowLeft") {
+          if (cursorPosition === "after") {
+            setCursorPosition("before");
+          } else {
+            newIndex = Math.max(0, cursorIndex - 1);
+          }
+          handled = true;
+        } else if (e.key === "ArrowRight") {
+          if (cursorIndex === wordCount - 1 && cursorPosition === "before") {
+            setCursorPosition("after");
+          } else if (cursorPosition !== "after") {
+            newIndex = Math.min(wordCount - 1, cursorIndex + 1);
+          }
+          handled = true;
+        } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+          const currentElement = contentRef.current?.querySelector(
+            `[data-word-index="${cursorIndex}"]`
+          );
+          if (currentElement) {
+            const currentRect = currentElement.getBoundingClientRect();
+            const currentCenterX = currentRect.left + currentRect.width / 2;
+            const direction = e.key === "ArrowUp" ? -1 : 1;
+            let bestMatch = cursorIndex;
+            let bestDistance = Infinity;
+            let targetRowTop = null;
+            for (let i = cursorIndex + direction; i >= 0 && i < wordCount; i += direction) {
+              const el = contentRef.current?.querySelector(
+                `[data-word-index="${i}"]`
+              );
+              if (!el) continue;
+              const rect = el.getBoundingClientRect();
+              const isOnDifferentRow = direction === -1 ? rect.bottom <= currentRect.top : rect.top >= currentRect.bottom;
+              if (isOnDifferentRow) {
+                if (targetRowTop === null) {
+                  targetRowTop = rect.top;
+                }
+                const isSameTargetRow = Math.abs(rect.top - targetRowTop) < 5;
+                if (isSameTargetRow) {
+                  const centerX = rect.left + rect.width / 2;
+                  const distance = Math.abs(centerX - currentCenterX);
+                  if (distance < bestDistance) {
+                    bestDistance = distance;
+                    bestMatch = i;
+                  }
+                } else {
+                  break;
+                }
+              }
+            }
+            newIndex = bestMatch;
+          }
+          handled = true;
+        } else if (e.key === "Home") {
+          newIndex = 0;
+          handled = true;
+        } else if (e.key === "End") {
+          newIndex = wordCount - 1;
+          handled = true;
+        } else if (e.key === "Enter") {
+          openWordEditor(cursorIndex);
+          handled = true;
+        } else if (e.key === " ") {
+          const ew = editedWords[cursorIndex];
+          const player = playerRef.current;
+          if (player && ew && !ew.deleted) {
+            if (player.isPaused()) {
+              if (hasEdits) {
+                const segments = playbackSegments;
+                if (segments.length > 0) {
+                  let startSegmentIdx = 0;
+                  for (let i = 0; i < segments.length; i++) {
+                    if (segments[i].editedIndices.includes(cursorIndex)) {
+                      startSegmentIdx = i;
+                      break;
+                    }
+                  }
+                  sequenceSegments.current = segments;
+                  currentSegmentIndex.current = startSegmentIdx;
+                  setIsPlayingSequence(true);
+                  player.seekToMs(ew.word.startMs);
+                  player.play();
+                }
+              } else {
+                player.seekToMs(ew.word.startMs);
+                player.play();
+              }
+            } else {
+              player.pause();
+              setIsPlayingSequence(false);
+            }
+          }
+          handled = true;
+        }
+        if (handled) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (newIndex !== cursorIndex) {
+            setCursorIndex(newIndex);
+            setCursorPosition("before");
+          }
+          if (e.shiftKey && e.key !== "Delete" && e.key !== "Backspace") {
+            const anchor = selectionAnchor ?? cursorIndex;
+            if (selectionAnchor === null) {
+              setSelectionAnchor(cursorIndex);
+            }
+            setSelection({
+              start: Math.min(anchor, newIndex),
+              end: Math.max(anchor, newIndex)
+            });
+          } else if (!e.metaKey && !e.ctrlKey) {
+            setSelection(null);
+            setSelectionAnchor(null);
+          }
+          const wordElement = contentRef.current?.querySelector(
+            `[data-word-index="${newIndex}"]`
+          );
+          wordElement?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
+      },
+      [
+        editedWords,
+        cursorIndex,
+        cursorPosition,
+        selectionAnchor,
+        clipboard,
+        hasEdits,
+        playbackSegments,
+        handleDeleteToggle,
+        handleCut,
+        handlePaste,
+        undo,
+        openWordEditor
+      ]
+    );
+    const isWordSelected = (index) => {
+      if (!selection) return false;
+      return index >= selection.start && index <= selection.end;
+    };
+    const renderWord = (ew, index) => {
+      const isActive = index === activeWordIndex;
+      const isCursor = index === cursorIndex;
+      const isSelected = isWordSelected(index);
+      const isDeleted = ew.deleted;
+      const isInserted = ew.inserted ?? false;
+      const isSilence = ew.word.wordType === "silence" || ew.word.wordType === "silence-newline";
+      const isSilenceNewline = ew.word.wordType === "silence-newline";
+      const isAnchor = index === doubleClickAnchor;
+      const showCursorBefore = isCursor && cursorPosition === "before";
+      const showCursorAfter = isCursor && cursorPosition === "after" && index === editedWords.length - 1;
+      const speedMarker = getSpeedMarkerAtIndex(index);
+      const hasSpeedMarker = !!speedMarker;
+      const effectiveSpeed = getSpeedAtIndex(index);
+      let displayText = ew.word.text;
+      if (isSilence && effectiveSpeed !== 1) {
+        const originalDurationMs = ew.word.endMs - ew.word.startMs;
+        const adjustedDurationSec = originalDurationMs / effectiveSpeed / 1e3;
+        displayText = `[${adjustedDurationSec.toFixed(1)}s]`;
+      }
+      const title = `${ew.word.startMs}ms - ${ew.word.endMs}ms${ew.word.confidence ? ` (${Math.round(ew.word.confidence * 100)}%)` : ""}${isSilence ? ` [SILENCE: ${((ew.word.endMs - ew.word.startMs) / 1e3).toFixed(1)}s${effectiveSpeed !== 1 ? ` \u2192 ${((ew.word.endMs - ew.word.startMs) / effectiveSpeed / 1e3).toFixed(1)}s @ ${effectiveSpeed}x` : ""}]` : ""}${isDeleted ? " [DELETED]" : ""}${isInserted ? " [INSERTED]" : ""}${hasSpeedMarker ? ` [SPEED: ${speedMarker.speed}x]` : ""}${isAnchor ? " [ANCHOR - click another word to select range, double-click to clear]" : ""}${!isAnchor && !isDeleted ? " (right-click to set speed marker)" : ""}`;
+      return (
+        // Keyboard interaction is owned by the parent listbox via roving focus
+        // (aria-activedescendant); options are pointer affordances only.
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            id: `word-${index}`,
+            "data-word-index": index,
+            className: wordClassName({
+              isActive,
+              isCursor,
+              isSelected,
+              isDeleted,
+              isInserted,
+              isSilence,
+              isSilenceNewline,
+              isAnchor,
+              isFocused,
+              hasSpeedMarker
+            }),
+            onClick: (e) => handleWordClick(ew.word, index, e),
+            onDoubleClick: (e) => handleWordDoubleClick(index, e),
+            onMouseDown: (e) => handleWordMouseDown(index, e),
+            onMouseEnter: () => handleWordMouseEnter(index),
+            onContextMenu: (e) => handleWordContextMenu(index, e),
+            role: "option",
+            "aria-selected": isSelected || isCursor,
+            title,
+            children: [
+              showCursorBefore && isFocused && /* @__PURE__ */ jsx(Caret, { side: "before" }),
+              hasSpeedMarker && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "border-warning/50 bg-warning/20 text-warning-foreground mr-1 inline-block rounded-sm border px-0.5 align-middle text-[9px] leading-snug font-semibold",
+                  title: `Speed: ${speedMarker.speed}x from here`,
+                  children: [
+                    speedMarker.speed,
+                    "x"
+                  ]
+                }
+              ),
+              displayText,
+              " ",
+              showCursorAfter && isFocused && /* @__PURE__ */ jsx(Caret, { side: "after" })
+            ]
+          },
+          `${ew.originalIndex}-${index}`
+        )
+      );
+    };
+    const showEditBar = hasEdits || doubleClickAnchor !== null || selection !== null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: mediaEditorVariants({ splitLayout, className }),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `flex min-h-0 min-w-0 flex-1 ${splitLayout === "vertical" ? "flex-col md:flex-row" : "flex-col"}`,
+              children: [
+                /* @__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"}`,
+                    children: /* @__PURE__ */ jsx(
+                      MediaPlayer,
+                      {
+                        ref: playerRef,
+                        src,
+                        kind,
+                        "aria-label": "Media player",
+                        onTimeUpdate: handleTimeUpdate,
+                        onEnded: stopSequencePlayback
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `flex min-h-0 flex-1 flex-col ${splitLayout === "vertical" ? "md:w-1/2" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "border-border flex shrink-0 flex-wrap items-center justify-between gap-2 border-b px-3 py-2", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          hasEdits && /* @__PURE__ */ jsx("span", { className: "bg-warning/20 text-warning-foreground rounded px-1.5 py-0.5 text-xs font-semibold", children: "Edited" }),
+                          /* @__PURE__ */ jsx(
+                            "label",
+                            {
+                              className: "text-muted-foreground text-xs",
+                              htmlFor: "media-editor-default-speed",
+                              children: "Speed:"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { className: "w-20", children: /* @__PURE__ */ jsx(
+                            Select,
+                            {
+                              id: "media-editor-default-speed",
+                              size: "sm",
+                              options: PLAYBACK_SPEEDS.map((speed) => ({
+                                value: String(speed),
+                                label: `${speed}x`
+                              })),
+                              value: String(defaultSpeed),
+                              onValueChange: (value) => setDefaultSpeed(parseFloat(value)),
+                              "aria-label": "Default playback speed"
+                            }
+                          ) }),
+                          speedMarkers.length > 0 && /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              className: "text-muted-foreground text-xs",
+                              title: `${speedMarkers.length} speed marker(s) set. Right-click on a word to add/remove speed markers.`,
+                              children: [
+                                speedMarkers.length,
+                                " marker",
+                                speedMarkers.length !== 1 ? "s" : ""
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              onClick: () => setShowFillerModal(true),
+                              "aria-label": "Remove filler words",
+                              title: "Remove filler words",
+                              children: "\u2702\uFE0F"
+                            }
+                          ),
+                          undoStack.length > 0 && /* @__PURE__ */ jsxs(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              onClick: undo,
+                              "aria-label": `Undo (${undoStack.length} available)`,
+                              title: "Undo (\u2318Z)",
+                              children: [
+                                "Undo (",
+                                undoStack.length,
+                                ")"
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              onClick: () => setShowScriptPanel((v) => !v),
+                              "aria-pressed": showScriptPanel,
+                              "aria-label": "Show script",
+                              title: "Show the transcript script (editable YAML/JSON)",
+                              children: "Script"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            stats.activeWordCount,
+                            " words"
+                          ] }),
+                          /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              className: "hover:bg-muted hover:text-foreground focus-visible:ring-ring rounded px-1 underline decoration-dotted transition-colors focus-visible:ring-2 focus-visible:outline-none",
+                              onClick: () => setShowSilenceModal(true),
+                              title: stats.activeSilenceCount > 0 ? `Click to configure silence detection (currently \u2265${(silenceThresholds.minSilenceMs / 1e3).toFixed(1)}s)` : `No silences detected (threshold: ${(silenceThresholds.minSilenceMs / 1e3).toFixed(1)}s). Click to configure.`,
+                              "aria-label": "Configure silence detection",
+                              children: [
+                                stats.activeSilenceCount,
+                                " silences"
+                              ]
+                            }
+                          ),
+                          (stats.deletedWordCount > 0 || stats.deletedSilenceCount > 0) && /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
+                            stats.deletedWordCount + stats.deletedSilenceCount,
+                            " deleted"
+                          ] }),
+                          transcript.speakers && /* @__PURE__ */ jsxs("span", { children: [
+                            transcript.speakers.length,
+                            " speakers"
+                          ] }),
+                          /* @__PURE__ */ jsx("span", { children: formatDuration2(stats.editedDurationMs) })
+                        ] })
+                      ] }),
+                      showEditBar && /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/40 flex shrink-0 items-center gap-1 border-b px-3 py-1", children: [
+                        /* @__PURE__ */ jsxs(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            onClick: () => openWordEditor(cursorIndex),
+                            title: "Edit selected word (Enter)",
+                            children: [
+                              "Edit ",
+                              /* @__PURE__ */ jsx("kbd", { className: "text-[10px] opacity-60", children: "\u21B5" })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            onClick: handleDeleteToggle,
+                            title: "Delete selected word (Del)",
+                            children: [
+                              "Del ",
+                              /* @__PURE__ */ jsx("kbd", { className: "text-[10px] opacity-60", children: "\u232B" })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            onClick: handleCut,
+                            title: "Cut selection (\u2318X)",
+                            children: [
+                              "Cut ",
+                              /* @__PURE__ */ jsx("kbd", { className: "text-[10px] opacity-60", children: "\u2318X" })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            onClick: handlePaste,
+                            disabled: !clipboard,
+                            title: "Paste (\u2318V)",
+                            children: [
+                              "Paste ",
+                              /* @__PURE__ */ jsx("kbd", { className: "text-[10px] opacity-60", children: "\u2318V" })
+                            ]
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ref: contentRef,
+                          className: `focus-visible:ring-ring min-h-0 flex-1 overflow-y-auto p-3 text-sm leading-relaxed select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset ${isFocused ? "bg-muted/20" : ""}`,
+                          tabIndex: 0,
+                          onKeyDown: handleKeyDown,
+                          onCopy: handleCopy,
+                          onFocus: () => setIsFocused(true),
+                          onBlur: () => setIsFocused(false),
+                          onMouseUp: handleMouseUp,
+                          onMouseLeave: handleMouseUp,
+                          role: "listbox",
+                          "aria-label": "Transcript words",
+                          "aria-activedescendant": `word-${cursorIndex}`,
+                          children: editedWords.map(renderWord)
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          showScriptPanel && /* @__PURE__ */ jsx(
+            ScriptPanel,
+            {
+              transcript,
+              editedWords,
+              onApply: replaceEditedWords,
+              onClose: () => setShowScriptPanel(false)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FillerWordsModal,
+            {
+              isOpen: showFillerModal,
+              onClose: () => setShowFillerModal(false),
+              onApply: removeFillers,
+              matchingCounts: fillerAnalysis.matchCounts,
+              fillerDurations: fillerAnalysis.durations,
+              silenceCounts: fillerAnalysis.silenceCounts,
+              currentDurationMs: stats.editedDurationMs
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SilenceSettingsModal,
+            {
+              isOpen: showSilenceModal,
+              onClose: () => setShowSilenceModal(false),
+              minSilenceMs: silenceThresholds.minSilenceMs,
+              nlSilenceMs: silenceThresholds.nlSilenceMs,
+              onApply: setSilenceThresholds
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            WordEditorModal,
+            {
+              isOpen: editorWordIndex !== null,
+              editableWord: editorWordIndex !== null ? editedWords[editorWordIndex] ?? null : null,
+              onClose: closeWordEditor,
+              onSave: handleEditorSave,
+              onSplitSilence: handleEditorSplitSilence,
+              onDelete: handleEditorDelete
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SpeedMarkerMenu,
+            {
+              isOpen: speedMenuWordIndex !== null,
+              position: speedMenuPosition,
+              wordIndex: speedMenuWordIndex,
+              currentMarker: speedMenuWordIndex !== null ? getSpeedMarkerAtIndex(speedMenuWordIndex) : void 0,
+              defaultSpeed,
+              onSetSpeed: (speed) => {
+                if (speedMenuWordIndex !== null) {
+                  toggleSpeedMarker(speedMenuWordIndex, speed);
+                }
+              },
+              onRemoveMarker: () => {
+                if (speedMenuWordIndex !== null) {
+                  removeSpeedMarker(speedMenuWordIndex);
+                }
+              },
+              onClose: () => {
+                setSpeedMenuWordIndex(null);
+                setSpeedMenuPosition(null);
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MediaEditor.displayName = "MediaEditor";
+
+export { FillerWordsModal, MediaEditor, SilenceSettingsModal, SpeedMarkerMenu, WordEditorModal };
+//# sourceMappingURL=chunk-YVLP3ATI.js.map
+//# sourceMappingURL=chunk-YVLP3ATI.js.map