@rightkit/video-ui 0.0.0-stage → 0.1.1

package/dist/editor/TimelineEditorView.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Finished edit workspace (docs/design/app-ui.md §3.4).
+ *
+ * Layout: app-sidebar · [ headerbar | stage col (stage + transport) + side
+ * panel (Transcript / Changes / Inspect tabs) | timeline ].
+ *
+ * Stage shows real compositor frames (StagePlayer over the Rust playback
+ * session), falling back to the nearest `media.thumbnail` while loading or if
+ * playback fails — never a black box when media exists.
+ *
+ * `project.show` is the single source of truth: EditSession mutations carry
+ * `expect_cursor` and the host refreshes after every commit; the preview
+ * session reopens on revision change.
+ */
+import { IconButton, SegmentedControl } from "@rightkit/react-shell/react";
+import { useSegmentedControl } from "@rightkit/react-shell/headless";
+import { Icon } from "../ui/index.js";
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
+import { engineCall, errorMessage } from "../lib/engine.js";
+import { assetUrl } from "../lib/asset.js";
+import { editplanList, thumbnails, } from "../lib/media.js";
+import { baseName, formatSeconds } from "../lib/project.js";
+import { StagePlayer } from "../components/Player.js";
+import { EditSession, errorText } from "./adapter.js";
+import { ChangesPanel } from "./ChangesPanel.js";
+import { Inspector } from "./Inspector.js";
+import { CaptionInspector } from "./CaptionInspector.js";
+import { buildEditorModel } from "./model.js";
+import { clipRanges } from "./transcript.js";
+import { Timeline } from "./Timeline.js";
+import { TranscriptPanel } from "./TranscriptPanel.js";
+export function TimelineEditorView({ show, previewHost, onRefresh, busy, }) {
+    const revision = show.revision.cursor;
+    const dir = show.project.dir;
+    // project.show advertises engine extensions; each gates a gesture family.
+    const caps = useMemo(() => ({ extensions: show.extensions }), [show.extensions]);
+    const [tab, setTab] = useState("transcript");
+    const [mode, setMode] = useState("review");
+    const [cues, setCues] = useState([]);
+    const [captionsOn, setCaptionsOn] = useState(true);
+    const [plans, setPlans] = useState([]);
+    const [plansError, setPlansError] = useState(null);
+    // Side panel tabs: the shell's headless segmented-control behaviour (roving focus, Arrow/Home/End
+    // keys that move and select) with the tablist/tab roles applied on top of its radio props.
+    const tabsId = useId();
+    const sideTabs = useSegmentedControl({
+        value: tab,
+        options: [{ value: "transcript" }, { value: "changes" }, { value: "inspect" }, { value: "captions" }],
+        onChange: setTab,
+        label: "Side panel tabs",
+    });
+    const [panelError, setPanelError] = useState(null);
+    const [playheadS, setPlayheadS] = useState(0);
+    const [selected, setSelected] = useState(new Set());
+    const [fallback, setFallback] = useState(null);
+    const [tlH, setTlH] = useState(192);
+    const [tlFull, setTlFull] = useState(false);
+    const [sideHidden, setSideHidden] = useState(false);
+    const [refreshing, setRefreshing] = useState(false);
+    const [seekState, setSeekState] = useState(null);
+    const model = useMemo(() => {
+        try {
+            return buildEditorModel(show);
+        }
+        catch (e) {
+            setPanelError(errorMessage(e));
+            return null;
+        }
+    }, [show]);
+    // Revision-bound cues include saved corrections from project.show.
+    const refreshCues = useCallback(async () => {
+        if (!model) {
+            setCues([]);
+            return;
+        }
+        setCues(model.captions.map((cue) => ({
+            start_ms: cue.start_frame * 1000 / model.fps,
+            end_ms: (cue.start_frame + cue.frames) * 1000 / model.fps,
+            text: cue.text,
+            lines: [cue.text],
+        })).sort((a, b) => a.start_ms - b.start_ms));
+    }, [model]);
+    useEffect(() => {
+        void refreshCues();
+    }, [refreshCues, revision]);
+    // A failed read is retried, then shown: an empty Changes tab must mean "no plan",
+    // never "the plan could not be read".
+    useEffect(() => {
+        let cancelled = false;
+        setPlansError(null);
+        void (async () => {
+            for (let attempt = 0;; attempt += 1) {
+                try {
+                    const r = await editplanList(dir);
+                    if (!cancelled)
+                        setPlans(r.plans);
+                    return;
+                }
+                catch (e) {
+                    if (cancelled)
+                        return;
+                    if (attempt === 2) {
+                        setPlans([]);
+                        setPlansError(errorText(e));
+                        return;
+                    }
+                    await new Promise((done) => setTimeout(done, 600));
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [dir, revision]);
+    // Stage fallback frame: nearest real thumbnail at the playhead, mapped
+    // back through the clip ranges. Keeps the stage truthful while the
+    // playback session opens or if it fails.
+    const ranges = useMemo(() => clipRanges(show), [show]);
+    const firstSource = model?.lanes
+        .find((l) => l.kind === "video")
+        ?.clips[0]?.ref;
+    const firstSourceId = firstSource && firstSource.kind === "video" ? firstSource.clip.source : null;
+    useEffect(() => {
+        if (!firstSourceId)
+            return;
+        const rs = ranges.get(firstSourceId) ?? [];
+        const t = playheadS;
+        const r = rs.find((x) => t >= x.outOffS && t < x.outOffS + (x.outS - x.inS)) ??
+            rs.reduce((best, x) => (!best || Math.abs(x.outOffS - t) < Math.abs(best.outOffS - t) ? x : best), null);
+        if (!r)
+            return;
+        const at = r.inS + Math.max(0, t - r.outOffS);
+        const timer = setTimeout(() => {
+            void thumbnails(dir, { source: firstSourceId }, { at_ms: Math.round(at * 1000), width: 1280 })
+                .then((res) => {
+                const p = res.frames[0]?.path;
+                if (p)
+                    setFallback(assetUrl(p));
+            })
+                .catch(() => undefined);
+        }, 200);
+        return () => clearTimeout(timer);
+    }, [dir, firstSourceId, playheadS, ranges]);
+    const refresh = useCallback(async () => {
+        setRefreshing(true);
+        try {
+            await onRefresh();
+            await refreshCues();
+        }
+        finally {
+            setRefreshing(false);
+        }
+    }, [onRefresh, refreshCues]);
+    const committed = useCallback(() => {
+        void refresh();
+    }, [refresh]);
+    const session = useMemo(() => new EditSession(dir, revision, caps, engineCall, () => {
+        /* stale cursor: the host refreshes, which re-seats via resync */
+        void refresh();
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dir]);
+    // Re-seat the session's cursor whenever the show's revision changes.
+    useEffect(() => {
+        session.resync(revision);
+    }, [session, revision]);
+    const onSeekPreview = useCallback((_cursor, t) => {
+        setSeekState((prev) => ({ ms: Math.round(t * 1000), n: (prev?.n ?? 0) + 1 }));
+        previewHost?.seek(revision, t);
+    }, [previewHost]);
+    const currentCue = cues.find((c) => playheadS * 1000 >= c.start_ms && playheadS * 1000 < c.end_ms);
+    // ---- header data ---------------------------------------------------------
+    const end = model?.durationS ?? 0;
+    const sources = show.sources;
+    const captionsLabel = show.transcripts?.length
+        ? `${show.transcripts.length} source${show.transcripts.length === 1 ? "" : "s"}`
+        : null;
+    // ---- render ---------------------------------------------------------------
+    if (!model || model.lanes.every((l) => l.clips.length === 0)) {
+        return (_jsx("div", { className: "fe", style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("h2", { style: { fontSize: 15, fontWeight: 600, margin: 0 }, children: "No finished edit yet" }), _jsx("p", { className: "cr-muted", style: { fontSize: 13, marginTop: 4 }, children: "Run an auto-edit to build the first cut. Its clip plan, captions, and changes will land here." })] }) }));
+    }
+    const aspect = model.lanes.length > 0 ? aspectLabel(show) : null;
+    const dragTl = (e) => {
+        const startY = e.clientY;
+        const start = tlH;
+        const move = (ev) => {
+            const next = Math.max(120, Math.min(480, start + (startY - ev.clientY)));
+            setTlH(next);
+            setTlFull(false);
+        };
+        const up = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+    };
+    return (_jsxs("div", { className: "fe", children: [_jsxs("header", { className: "fe-header", children: [_jsxs("div", { className: "fe-header__left", children: [_jsx(IconButton, { label: "Panel", pressed: !sideHidden, onClick: () => setSideHidden((v) => !v), children: _jsx(Icon, { name: "layout-list" }) }), _jsx("strong", { className: "fe-header__name", children: "Finished edit" })] }), _jsx("div", { className: "fe-header__mid", children: _jsx(SegmentedControl, { label: "Mode", value: mode, onChange: (v) => setMode(v), options: [
+                                { value: "review", label: "Review" },
+                                { value: "edit", label: "Edit" },
+                            ] }) }), _jsxs("div", { className: "fe-header__right", children: [_jsx("span", { className: "rk-badge", children: baseName(dir) || "Project" }), _jsx("span", { className: "rk-badge", children: timecodeish(end) }), _jsxs("span", { className: "rk-badge", children: [sources.length, " source", sources.length === 1 ? "" : "s"] }), captionsLabel && _jsxs("span", { className: "rk-badge", children: ["Captions ", captionsLabel] }), _jsxs("span", { className: "rk-badge", children: ["Revision ", revision, show.revision.total > revision + 1 ? ` / ${show.revision.total}` : ""] }), (session.busy || busy || refreshing) && (_jsx("span", { role: "status", className: "cr-muted", children: "Applying changes\u2026" }))] })] }), _jsxs("div", { className: "fe-main", children: [_jsx("div", { className: "fe-stage-col", children: _jsx(StagePlayer, { dir: dir, revision: revision, seekRequest: seekState, captionsOn: captionsOn, caption: currentCue?.text ?? null, aspect: aspect, fallback: fallback, onToggleCaptions: setCaptionsOn, onPosition: (ms) => setPlayheadS(ms / 1000) }) }), !sideHidden && (_jsxs("aside", { className: "fe-side", "aria-label": "Details", children: [_jsx("div", { className: "fe-side__tabs", ...sideTabs.groupProps, role: "tablist", children: [
+                                    ["transcript", "Transcript"],
+                                    ["changes", `Changes${plans.length ? ` ${plans.flatMap((p) => p.items ?? []).length}` : ""}`],
+                                    ["inspect", "Inspect"],
+                                    ["captions", "Captions"],
+                                ].map(([id, label]) => (_jsx("button", { type: "button", ...sideTabs.getOptionProps(id), role: "tab", id: `${tabsId}-tab-${id}`, "aria-controls": `${tabsId}-panel`, "aria-selected": tab === id, "aria-checked": undefined, className: `fe-side__tab${tab === id ? " fe-side__tab--active" : ""}`, children: label }, id))) }), _jsxs("div", { className: "fe-side__body", role: "tabpanel", id: `${tabsId}-panel`, "aria-labelledby": `${tabsId}-tab-${tab}`, children: [tab === "transcript" && (_jsx(TranscriptPanel, { show: show, session: session, caps: caps, mode: mode, cues: cues, playheadS: playheadS, onSeek: (t) => {
+                                            setPlayheadS(t);
+                                            onSeekPreview(revision, t);
+                                        }, onCommitted: committed, onError: setPanelError })), tab === "changes" && (_jsx(ChangesPanel, { dir: dir, plans: plans, loadError: plansError, session: session, onCommitted: committed, onSeek: (t) => {
+                                            setPlayheadS(t);
+                                            onSeekPreview(revision, t);
+                                        } })), tab === "inspect" && (_jsx(Inspector, { model: model, selection: selected, session: session, caps: caps, dir: dir, playheadS: playheadS, onCommitted: committed, onError: (m) => setPanelError(m) })), tab === "captions" && _jsx(CaptionInspector, { model: model, session: session, onCommitted: committed, onError: setPanelError })] })] }))] }), panelError && (_jsx("p", { role: "alert", className: "cr-muted", style: { margin: 0, padding: "0 var(--s4)", fontSize: 12 }, children: panelError })), _jsxs("div", { className: "fe-tl", style: { height: tlFull ? "55%" : tlH }, children: [_jsx("div", { className: "fe-tl__resize", role: "separator", "aria-orientation": "horizontal", "aria-label": "Resize timeline", onPointerDown: dragTl }), _jsx("div", { className: "fe-tl__resizebtn", children: _jsx(IconButton, { label: tlFull ? "Shrink timeline" : "Expand timeline", onClick: () => setTlFull((v) => !v), children: _jsx(Icon, { name: tlFull ? "chevron-down" : "chevron-up" }) }) }), _jsx(Timeline, { model: model, session: session, caps: caps, busy: busy || refreshing, mode: mode, cues: cues, dir: dir, playheadS: playheadS, onPlayhead: setPlayheadS, onCommitted: committed, onSeek: onSeekPreview, onSelect: setSelected })] })] }));
+}
+function timecodeish(s) {
+    return formatSeconds(s);
+}
+function aspectLabel(show) {
+    const v = show.timeline.video_tracks.flatMap((t) => t.clips)[0];
+    if (!v)
+        return null;
+    const src = show.sources.find((s) => s.info.id === v.source);
+    const w = src?.info.video?.width;
+    const h = src?.info.video?.height;
+    if (!w || !h)
+        return null;
+    const r = w / h;
+    if (Math.abs(r - 16 / 9) < 0.02)
+        return "16:9";
+    if (Math.abs(r - 9 / 16) < 0.02)
+        return "9:16";
+    if (Math.abs(r - 1) < 0.02)
+        return "1:1";
+    if (Math.abs(r - 4 / 3) < 0.02)
+        return "4:3";
+    return `${w}×${h}`;
+}

package/dist/editor/TranscriptPanel.d.ts

@@ -0,0 +1,20 @@
+import { type CaptionCue } from "../lib/media.js";
+import { type ProjectShow } from "../lib/project.js";
+import type { EditSession } from "./adapter.js";
+import { type CapabilityReport } from "./capabilities.js";
+import { type ClipRange } from "./transcript.js";
+export declare function TranscriptPanel({ show, session, caps, mode, cues, playheadS, onSeek, onCommitted, onError, }: {
+    show: ProjectShow;
+    session: EditSession;
+    caps: CapabilityReport | null;
+    mode: "review" | "edit";
+    /** Timeline-mapped caption cues (Review mode rows). */
+    cues: CaptionCue[];
+    /** Current playhead in seconds — drives the current-line highlight. */
+    playheadS: number;
+    /** Seek the timeline playhead (seconds). */
+    onSeek: (timeS: number) => void;
+    onCommitted: () => void;
+    onError?: (message: string | null) => void;
+}): import("react").JSX.Element;
+export type { ClipRange };

package/dist/editor/TranscriptPanel.js

@@ -0,0 +1,180 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Transcript tab of the Finished edit side panel (docs/design/app-ui.md §3.4).
+ *
+ * Review mode: lines are the timeline-mapped caption cues (`captions.show`) —
+ * stamp + text, current line highlighted, click seeks.
+ *
+ * Edit mode: word-level surface. Words come from the engine's validated
+ * `transcript.show` (independent word-edge evidence — the locked invariant for
+ * destructive word cuts); each word maps through the live clip ranges, so
+ * removed words show struck-through. Selecting kept words + Delete
+ * ripple-deletes them through the EditSession; selecting struck words +
+ * Restore re-inserts the source span as a clip at the boundary where it was
+ * cut. Both land as engine revisions — undoable, never local state.
+ */
+import { Button } from "@rightkit/react-shell/react";
+import { useEffect, useMemo, useState } from "react";
+import { errorMessage } from "../lib/engine.js";
+import { transcriptShow } from "../lib/media.js";
+import { baseName, formatSeconds, newClipId, secondsToTicks } from "../lib/project.js";
+import { insertClip, rippleDeleteRange } from "./actions.js";
+import { supports, unsupported } from "./capabilities.js";
+import { clipRanges, coveredOutputRanges, sourceToOutput } from "./transcript.js";
+export function TranscriptPanel({ show, session, caps, mode, cues, playheadS, onSeek, onCommitted, onError, }) {
+    if (mode === "review") {
+        return _jsx(CueList, { cues: cues, playheadS: playheadS, onSeek: onSeek });
+    }
+    return (_jsx(WordEditor, { show: show, session: session, caps: caps, onSeek: onSeek, onCommitted: onCommitted, onError: onError }));
+}
+/** Review-mode transcript: one row per caption cue on the current timeline. */
+function CueList({ cues, playheadS, onSeek, }) {
+    const current = cues.findIndex((c) => playheadS * 1000 >= c.start_ms && playheadS * 1000 < c.end_ms);
+    if (cues.length === 0) {
+        return _jsx("p", { className: "cr-muted", style: { margin: 0, fontSize: 12 }, children: "No captions on this edit yet." });
+    }
+    return (_jsx(_Fragment, { children: cues.map((c, i) => (_jsxs("button", { type: "button", className: `fe-cue${i === current ? " fe-cue--current" : ""}`, "aria-current": i === current || undefined, onClick: () => onSeek(c.start_ms / 1000), children: [_jsx("span", { className: "fe-cue__stamp", children: formatSeconds(c.start_ms / 1000) }), _jsx("span", { children: c.text })] }, i))) }));
+}
+function WordEditor({ show, session, caps, onSeek, onCommitted, onError, }) {
+    const dir = show.project.dir;
+    const transcripted = useMemo(() => new Set((show.transcripts ?? []).map((t) => t.source)), [show.transcripts]);
+    const ranges = useMemo(() => clipRanges(show), [show]);
+    const [transcripts, setTranscripts] = useState({});
+    const [loadError, setLoadError] = useState(null);
+    const [sel, setSel] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        if (transcripted.size === 0)
+            return;
+        let cancelled = false;
+        (async () => {
+            try {
+                const ts = await Promise.all([...transcripted].map((id) => transcriptShow(dir, id)));
+                if (cancelled)
+                    return;
+                const next = {};
+                [...transcripted].forEach((id, i) => {
+                    next[id] = ts[i].transcript;
+                });
+                setTranscripts(next);
+                setLoadError(null);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setLoadError(errorMessage(e));
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [dir, transcripted]);
+    const selInfo = (() => {
+        if (!sel)
+            return null;
+        const t = transcripts[sel.source];
+        if (!t)
+            return null;
+        const lo = Math.min(sel.anchor, sel.focus);
+        const hi = Math.max(sel.anchor, sel.focus);
+        const words = t.words.slice(lo, hi + 1);
+        if (words.length === 0)
+            return null;
+        const startMs = words[0].start_ms;
+        const endMs = words[words.length - 1].end_ms;
+        const rs = ranges.get(sel.source) ?? [];
+        const spans = coveredOutputRanges(rs, startMs, endMs);
+        // A struck selection is one whose words are all unplaced.
+        const allCut = words.every((w) => sourceToOutput(rs, w.start_ms) == null);
+        return { lo, hi, words, startMs, endMs, spans, allCut, source: sel.source };
+    })();
+    const canDelete = supports("edit.ripple_delete", caps);
+    const clickWord = (source, index, shift) => {
+        setSel((prev) => shift && prev && prev.source === source
+            ? { source, anchor: prev.anchor, focus: index }
+            : { source, anchor: index, focus: index });
+        const w = (transcripts[source]?.words ?? [])[index];
+        if (!w)
+            return;
+        const out = sourceToOutput(ranges.get(source) ?? [], w.start_ms);
+        if (out != null)
+            onSeek(out);
+    };
+    const deleteSelection = async () => {
+        if (!selInfo || selInfo.spans.length === 0 || !canDelete)
+            return;
+        setBusy(true);
+        try {
+            await session.apply(selInfo.spans.map((s) => rippleDeleteRange(s.startS, s.endS)), `Delete ${selInfo.words.length} word${selInfo.words.length === 1 ? "" : "s"}`);
+            setSel(null);
+            onCommitted();
+        }
+        catch (e) {
+            onError?.(errorMessage(e));
+            onCommitted();
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    /**
+     * Restore: re-insert the struck span's source range into the footage track
+     * at the boundary where it was cut. The insert index is the position of the
+     * first clip (of the same source) starting at/after the span, else after the
+     * last clip ending at/before it — the point the ripple-delete collapsed.
+     */
+    const restoreSelection = async () => {
+        if (!selInfo || !selInfo.allCut)
+            return;
+        const track = show.timeline.video_tracks[0];
+        if (!track)
+            return;
+        const { source, startMs, endMs } = selInfo;
+        const inT = secondsToTicks(startMs / 1000);
+        const outT = secondsToTicks(endMs / 1000);
+        const sameSource = track.clips.filter((c) => c.source === source);
+        let index = track.clips.length;
+        const after = sameSource.find((c) => c.source_in >= outT);
+        if (after) {
+            index = track.clips.indexOf(after);
+        }
+        else {
+            const before = [...sameSource].reverse().find((c) => c.source_out <= inT);
+            if (before)
+                index = track.clips.indexOf(before) + 1;
+        }
+        setBusy(true);
+        try {
+            const action = insertClip(track.id, index, {
+                id: newClipId(),
+                source,
+                source_in: inT,
+                source_out: outT,
+            });
+            await session.apply([action], `Restore ${selInfo.words.length} word${selInfo.words.length === 1 ? "" : "s"}`);
+            setSel(null);
+            onCommitted();
+        }
+        catch (e) {
+            onError?.(errorMessage(e));
+            onCommitted();
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const entries = Object.entries(transcripts);
+    const placed = (id) => (ranges.get(id)?.length ?? 0) > 0;
+    return (_jsxs(_Fragment, { children: [loadError && (_jsx("p", { role: "alert", className: "cr-muted", style: { margin: 0, fontSize: 12 }, children: loadError })), transcripted.size === 0 && (_jsx("p", { className: "cr-muted", style: { margin: 0, fontSize: 12 }, children: "No transcripts yet \u2014 transcribe a source to edit from its words." })), entries.length === 0 && transcripted.size > 0 && !loadError && (_jsx("p", { className: "cr-muted", style: { margin: 0, fontSize: 12 }, children: "Loading transcripts\u2026" })), entries.map(([source, t]) => {
+                const name = show.sources.find((s) => s.info.id === source)?.name ?? baseName(source);
+                const rs = ranges.get(source) ?? [];
+                const isSel = (i) => sel != null &&
+                    sel.source === source &&
+                    i >= Math.min(sel.anchor, sel.focus) &&
+                    i <= Math.max(sel.anchor, sel.focus);
+                return (_jsxs("div", { children: [_jsxs("div", { className: "cr-muted", style: { fontSize: 11, marginBottom: 4 }, title: source, children: [name, !placed(source) && " (not on the timeline)"] }), _jsx("p", { className: "fe-words", style: { margin: 0 }, children: t.words.map((w, i) => {
+                                const out = sourceToOutput(rs, w.start_ms);
+                                const approx = w.end_source && w.end_source !== "model";
+                                return (_jsx("button", { type: "button", className: `fe-word${out == null ? " fe-word--cut" : ""}${isSel(i) ? " fe-word--sel" : ""}`, title: `${formatSeconds(w.start_ms / 1000)}–${formatSeconds(w.end_ms / 1000)} source${out != null ? ` · ${formatSeconds(out)} timeline` : " · cut"}${approx ? " · word end approximate" : ""}`, onClick: (e) => clickWord(source, i, e.shiftKey), children: w.text }, i));
+                            }) })] }, source));
+            }), selInfo && (_jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--s2)", alignItems: "center" }, children: [selInfo.allCut ? (_jsxs(Button, { size: "sm", disabled: busy, onClick: () => void restoreSelection(), children: ["Restore ", selInfo.words.length, " word", selInfo.words.length === 1 ? "" : "s"] })) : (_jsxs(Button, { size: "sm", disabled: busy || !canDelete || selInfo.spans.length === 0, title: !canDelete ? unsupported("edit.ripple_delete").reason : undefined, onClick: () => void deleteSelection(), children: ["Delete ", selInfo.words.length, " word", selInfo.words.length === 1 ? "" : "s"] })), selInfo.spans.length === 0 && !selInfo.allCut && (_jsx("span", { className: "cr-muted", style: { fontSize: 11 }, children: "Selected words are not on the timeline." }))] }))] }));
+}

package/dist/editor/actions.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Wire builders for `cutright_timeline::Action` — the serde shape the engine's
+ * `edit` method consumes (`{ "type": <snake_case>, ... }`). Field names and
+ * units match rightkit-timeline src/action.rs exactly:
+ * times are `Ticks` (705_600_000 per second), gains are `MilliDb`
+ * (thousandths of a dB), title spans are integer frames.
+ */
+import { type TitleTemplate } from "../lib/project.js";
+export type EditAction = Record<string, unknown> & {
+    type: string;
+};
+export declare const insertClip: (trackId: string, index: number, clip: {
+    id: string;
+    source: string;
+    source_in: number;
+    source_out: number;
+}) => EditAction;
+export declare const removeClip: (clipId: string) => EditAction;
+export declare const trimClip: (clipId: string, sourceInS: number, sourceOutS: number) => EditAction;
+export declare const moveClip: (clipId: string, toIndex: number) => EditAction;
+export declare const moveAudioClip: (clipId: string, startS: number) => EditAction;
+export declare const trimAudioClip: (clipId: string, trimInS: number, trimOutS: number) => EditAction;
+export declare const removeAudioClip: (clipId: string) => EditAction;
+/** `gainDb` is linear-reading decibels; the model stores thousandths (MilliDb). */
+export declare const setGain: (clipId: string, gainDb: number) => EditAction;
+export declare const linkNarration: (audioId: string, videoId: string) => EditAction;
+export declare const unlinkNarration: (audioId: string) => EditAction;
+export type UnderMode = {
+    mode: "keep";
+} | {
+    mode: "duck";
+    amount: number;
+} | {
+    mode: "mute";
+};
+export declare const setUnder: (audioId: string, under: UnderMode) => EditAction;
+export declare const addTitle: (trackId: string, clip: {
+    id: string;
+    start_frame: number;
+    frames: number;
+    template: TitleTemplate;
+    fade_in_frames: number;
+    fade_out_frames: number;
+}) => EditAction;
+export declare const removeTitle: (clipId: string) => EditAction;
+export declare const moveTitle: (clipId: string, startFrame: number) => EditAction;
+export declare const trimTitle: (clipId: string, startFrame: number, frames: number) => EditAction;
+export declare const editTitle: (clipId: string, template: TitleTemplate, fadeInFrames: number, fadeOutFrames: number) => EditAction;
+/** `atS` is seconds INTO the clip's own source range (not output time). */
+export declare const splitClip: (clipId: string, atS: number, newClipId: string) => EditAction;
+/** `atS` is seconds into the audio clip's trimmed duration. */
+export declare const splitAudioClip: (clipId: string, atS: number, newClipId: string) => EditAction;
+/** Shifts a video clip's source window by `deltaS`; output span unchanged. */
+export declare const slipClip: (clipId: string, deltaS: number) => EditAction;
+/** Shifts an audio clip's trim window by `deltaS`; start/duration unchanged. */
+export declare const slipAudioClip: (clipId: string, deltaS: number) => EditAction;
+/** Excises the output range [startS, endS) on every video track it covers. */
+export declare const rippleDeleteRange: (startS: number, endS: number) => EditAction;
+export declare const setMute: (clipId: string, muted: boolean) => EditAction;
+export declare const positionTitle: (clipId: string, x: number, y: number) => EditAction;
+export declare const swapTake: (clipId: string, source: string, inS: number, outS: number) => EditAction;
+export declare const editCaption: (cueId: string, correction: import("./model.js").CaptionCorrection) => EditAction;
+export declare const removeCaption: (cueId: string) => EditAction;

package/dist/editor/actions.js

@@ -0,0 +1,124 @@
+/**
+ * Wire builders for `cutright_timeline::Action` — the serde shape the engine's
+ * `edit` method consumes (`{ "type": <snake_case>, ... }`). Field names and
+ * units match rightkit-timeline src/action.rs exactly:
+ * times are `Ticks` (705_600_000 per second), gains are `MilliDb`
+ * (thousandths of a dB), title spans are integer frames.
+ */
+import { secondsToTicks } from "../lib/project.js";
+export const insertClip = (trackId, index, clip) => ({ type: "insert_clip", track_id: trackId, index, clip });
+export const removeClip = (clipId) => ({
+    type: "remove_clip",
+    clip_id: clipId,
+});
+export const trimClip = (clipId, sourceInS, sourceOutS) => ({
+    type: "trim_clip",
+    clip_id: clipId,
+    source_in: secondsToTicks(sourceInS),
+    source_out: secondsToTicks(sourceOutS),
+});
+export const moveClip = (clipId, toIndex) => ({
+    type: "move_clip",
+    clip_id: clipId,
+    to_index: toIndex,
+});
+export const moveAudioClip = (clipId, startS) => ({
+    type: "move_audio_clip",
+    clip_id: clipId,
+    start: secondsToTicks(startS),
+});
+export const trimAudioClip = (clipId, trimInS, trimOutS) => ({
+    type: "trim_audio_clip",
+    clip_id: clipId,
+    trim_in: secondsToTicks(trimInS),
+    trim_out: secondsToTicks(trimOutS),
+});
+export const removeAudioClip = (clipId) => ({
+    type: "remove_audio_clip",
+    clip_id: clipId,
+});
+/** `gainDb` is linear-reading decibels; the model stores thousandths (MilliDb). */
+export const setGain = (clipId, gainDb) => ({
+    type: "set_gain",
+    clip_id: clipId,
+    gain: Math.round(gainDb * 1000),
+});
+export const linkNarration = (audioId, videoId) => ({
+    type: "link_narration",
+    audio_id: audioId,
+    video_id: videoId,
+});
+export const unlinkNarration = (audioId) => ({
+    type: "unlink_narration",
+    audio_id: audioId,
+});
+export const setUnder = (audioId, under) => ({
+    type: "set_under",
+    audio_id: audioId,
+    under,
+});
+export const addTitle = (trackId, clip) => ({ type: "add_title", track_id: trackId, clip });
+export const removeTitle = (clipId) => ({ type: "remove_title", clip_id: clipId });
+export const moveTitle = (clipId, startFrame) => ({
+    type: "move_title",
+    clip_id: clipId,
+    start_frame: Math.round(startFrame),
+});
+export const trimTitle = (clipId, startFrame, frames) => ({
+    type: "trim_title",
+    clip_id: clipId,
+    start_frame: Math.round(startFrame),
+    frames: Math.round(frames),
+});
+export const editTitle = (clipId, template, fadeInFrames, fadeOutFrames) => ({
+    type: "edit_title",
+    clip_id: clipId,
+    template,
+    fade_in_frames: Math.round(fadeInFrames),
+    fade_out_frames: Math.round(fadeOutFrames),
+});
+/** `atS` is seconds INTO the clip's own source range (not output time). */
+export const splitClip = (clipId, atS, newClipId) => ({
+    type: "split_clip",
+    clip_id: clipId,
+    at: secondsToTicks(atS),
+    new_clip_id: newClipId,
+});
+/** `atS` is seconds into the audio clip's trimmed duration. */
+export const splitAudioClip = (clipId, atS, newClipId) => ({
+    type: "split_audio_clip",
+    clip_id: clipId,
+    at: secondsToTicks(atS),
+    new_clip_id: newClipId,
+});
+/** Shifts a video clip's source window by `deltaS`; output span unchanged. */
+export const slipClip = (clipId, deltaS) => ({
+    type: "slip_clip",
+    clip_id: clipId,
+    delta: secondsToTicks(deltaS),
+});
+/** Shifts an audio clip's trim window by `deltaS`; start/duration unchanged. */
+export const slipAudioClip = (clipId, deltaS) => ({
+    type: "slip_audio_clip",
+    clip_id: clipId,
+    delta: secondsToTicks(deltaS),
+});
+/** Excises the output range [startS, endS) on every video track it covers. */
+export const rippleDeleteRange = (startS, endS) => ({
+    type: "ripple_delete_range",
+    start: secondsToTicks(startS),
+    end: secondsToTicks(endS),
+});
+export const setMute = (clipId, muted) => ({ type: "set_mute", clip_id: clipId, muted });
+export const positionTitle = (clipId, x, y) => ({
+    type: "position_title", clip_id: clipId, position: { x: Math.round(x), y: Math.round(y) },
+});
+export const swapTake = (clipId, source, inS, outS) => ({
+    type: "swap_take", clip_id: clipId, source, source_in: secondsToTicks(inS), source_out: secondsToTicks(outS),
+});
+export const editCaption = (cueId, correction) => ({
+    type: "edit_caption", cue_id: cueId, correction: {
+        text: correction.text, start_frame: correction.start_frame, frames: correction.frames, position: correction.position,
+    },
+});
+export const removeCaption = (cueId) => ({ type: "remove_caption", cue_id: cueId });