@rightkit/video-ui 0.0.0-stage → 0.1.0

package/dist/views/SourcesView.js

@@ -0,0 +1,417 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, EmptyState, PageShell } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { pickFile, pickMedia } from "../lib/dialog.js";
+import { engineCall, onEngineRaw, errorMessage, onEngineEvent, revealPath } from "../lib/engine.js";
+import { MediaPlayer } from "@rightkit/media-ui";
+import { mediaKind, useMediaPlaybackId } from "../lib/mediaAdapters.js";
+import { micAlign } from "../lib/mic.js";
+import { TICKS_PER_SECOND, baseName, projectShow } from "../lib/project.js";
+import { modelsStatus, settingsGet, settingsSet, sourceList, sourceProbe, sourceRelink, sourceVerify, thumbnails, transcribe, transcriptShow, } from "../lib/media.js";
+import { assetUrl } from "../lib/asset.js";
+import { Drawer, Icon, ProgressRow, Thumbnail, fileSize, timecode } from "../ui/index.js";
+const INTENT_LABEL = {
+    "talking-head": "Talking head",
+    mixed: "Mixed",
+    visual: "Visual",
+};
+const INTENT_ORDER = ["talking-head", "mixed", "visual"];
+/** Audio recorders' files (and camera containers carrying audio) for a separate mic. */
+const MIC_EXTENSIONS = ["wav", "mp3", "m4a", "flac", "aac", "ogg", "mp4", "mov"];
+/** §3.2 Media: source cards, drag-drop import, per-card pipeline state, detail drawer. */
+export function SourcesView({ dir, onChanged, onNavigate, }) {
+    const [rows, setRows] = useState([]);
+    const [show, setShow] = useState(null);
+    const [probes, setProbes] = useState({});
+    const [checks, setChecks] = useState({});
+    const [verifiedCount, setVerifiedCount] = useState(null);
+    const [transcribing, setTranscribing] = useState(new Set());
+    // Live transcription stage per source ("Queued for the host app: dictation in progress", …).
+    const [txStatus, setTxStatus] = useState({});
+    useEffect(() => {
+        let off;
+        let dead = false;
+        void onEngineEvent((frame) => {
+            const ev = frame.event;
+            if (!frame.tag?.startsWith("ui-tx-") || ev.event !== "transcribe.progress" || !ev.source)
+                return;
+            const source = ev.source;
+            setTxStatus((m) => ({ ...m, [source]: { message: ev.message ?? "Transcribing", fraction: ev.fraction || undefined } }));
+        }).then((fn) => {
+            if (dead)
+                fn();
+            else
+                off = fn;
+        });
+        return () => {
+            dead = true;
+            off?.();
+        };
+    }, []);
+    const [importing, setImporting] = useState(0);
+    /** Files whose source.add is in flight; late progress events for others are dropped. */
+    const adding = useRef(new Set());
+    // §3.2: per-file source.add progress (hashing/copying/probing fractions).
+    const [addProgress, setAddProgress] = useState({});
+    const [speechReady, setSpeechReady] = useState(null);
+    const [intents, setIntents] = useState({});
+    const [error, setError] = useState(null);
+    const [micState, setMicState] = useState({});
+    const [dropActive, setDropActive] = useState(false);
+    const [open, setOpen] = useState(null);
+    const [thumbSrc, setThumbSrc] = useState({});
+    const thumbsRequested = useRef(new Set());
+    const infoOf = useCallback((id) => show?.timeline.sources.find((s) => s.id === id), [show]);
+    const intentOf = useCallback((r) => {
+        const o = intents[r.id];
+        if (o)
+            return o;
+        const hasAudio = infoOf(r.id)?.has_audio ?? false;
+        if (!hasAudio)
+            return "visual";
+        return r.has_transcript ? "talking-head" : "mixed";
+    }, [intents, infoOf]);
+    const refresh = useCallback(async () => {
+        const [list, proj, settings, models] = await Promise.all([
+            sourceList(dir),
+            projectShow(dir).catch(() => null),
+            settingsGet(dir).catch(() => null),
+            modelsStatus().catch(() => null),
+        ]);
+        setRows(list.sources);
+        setShow(proj);
+        setSpeechReady(models ? (models.speech.ready ?? null) : null);
+        const saved = settings?.project?.intents;
+        if (saved && typeof saved === "object")
+            setIntents(saved);
+        else
+            setIntents({});
+    }, [dir]);
+    useEffect(() => {
+        refresh().catch((e) => setError(errorMessage(e)));
+    }, [refresh]);
+    // Integrity check on open: per-card hashing state until its check lands.
+    useEffect(() => {
+        let cancelled = false;
+        let off;
+        void onEngineRaw((payload) => {
+            const ev = payload?.event;
+            if (ev?.event === "source.verify" && typeof ev.completed === "number") {
+                setVerifiedCount(ev.completed);
+            }
+        }).then((f) => {
+            if (cancelled)
+                f();
+            else
+                off = f;
+        });
+        sourceVerify(dir, `media-verify-${dir}`)
+            .then((r) => {
+            if (cancelled)
+                return;
+            const map = {};
+            for (const c of r.checks ?? []) {
+                map[c.source_id] =
+                    c.status === "ok"
+                        ? "ok"
+                        : c.status === "missing" || c.status === "unreadable"
+                            ? "missing"
+                            : "changed"; // mismatch | moved
+            }
+            setChecks(map);
+            setVerifiedCount(null);
+        })
+            .catch(() => setVerifiedCount(null));
+        return () => {
+            cancelled = true;
+            off?.();
+        };
+    }, [dir]);
+    // Transcription pipeline state (own calls and recipe-run stages alike).
+    useEffect(() => {
+        let off;
+        let cancelled = false;
+        void onEngineRaw((payload) => {
+            const ev = payload.event;
+            if (ev?.event === "source.add.progress" && ev.file) {
+                const { file, phase = "working", fraction } = ev;
+                // Events can trail the source.add response; only files still in flight count.
+                if (!adding.current.has(file))
+                    return;
+                setAddProgress((m) => ({ ...m, [file]: { phase, fraction } }));
+                return;
+            }
+            const sid = ev?.source;
+            if (!sid)
+                return;
+            if (ev?.event === "transcribe.started") {
+                setTranscribing((s) => new Set(s).add(sid));
+            }
+            else if (ev?.event === "transcribe.done") {
+                setTranscribing((s) => {
+                    const n = new Set(s);
+                    n.delete(sid);
+                    return n;
+                });
+                void refresh();
+            }
+        }).then((f) => {
+            if (cancelled)
+                f();
+            else
+                off = f;
+        });
+        return () => {
+            cancelled = true;
+            off?.();
+        };
+    }, [refresh]);
+    // Real thumbnails + probe metadata per card (cached engine-side).
+    useEffect(() => {
+        for (const r of rows) {
+            if (!r.exists || thumbsRequested.current.has(r.id))
+                continue;
+            thumbsRequested.current.add(r.id);
+            void thumbnails(dir, { source: r.id }, { width: 480 })
+                .then((t) => {
+                const frame = t.frames[0];
+                if (frame)
+                    setThumbSrc((m) => ({ ...m, [r.id]: assetUrl(frame.path) }));
+            })
+                .catch(() => undefined);
+            void sourceProbe(dir, r.id)
+                .then((p) => setProbes((m) => ({ ...m, [r.id]: p })))
+                .catch(() => undefined);
+        }
+    }, [rows, dir]);
+    const busyOf = useCallback((r, index) => {
+        if (transcribing.has(r.id))
+            return "transcribing";
+        if (verifiedCount !== null && index >= verifiedCount && r.exists)
+            return "hashing";
+        return null;
+    }, [transcribing, verifiedCount]);
+    const importFiles = useCallback(async (files) => {
+        if (files.length === 0)
+            return;
+        setImporting((n) => n + 1);
+        setError(null);
+        try {
+            for (const file of files) {
+                adding.current.add(file);
+                setAddProgress((m) => ({ ...m, [file]: { phase: "hashing", fraction: undefined } }));
+                try {
+                    await engineCall("source.add", { dir, file });
+                }
+                finally {
+                    adding.current.delete(file);
+                    setAddProgress((m) => {
+                        const n = { ...m };
+                        delete n[file];
+                        return n;
+                    });
+                }
+            }
+            await refresh();
+            await onChanged();
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+        finally {
+            setImporting((n) => n - 1);
+        }
+    }, [dir, refresh, onChanged]);
+    const importMedia = useCallback(async () => {
+        await importFiles(await pickMedia());
+    }, [importFiles]);
+    // Drag-and-drop import anywhere on the screen.
+    useEffect(() => {
+        let depth = 0;
+        const exts = /\.(mp4|mov|mkv|webm|m4v|wav|mp3|m4a|flac|aac|ogg)$/i;
+        const onDrag = (e) => {
+            if (!e.dataTransfer?.types.includes("Files"))
+                return;
+            e.preventDefault();
+            if (e.type === "dragenter")
+                depth += 1;
+            if (e.type === "dragleave")
+                depth -= 1;
+            if (e.type === "drop")
+                depth = 0;
+            setDropActive(depth > 0);
+        };
+        const onDrop = (e) => {
+            e.preventDefault();
+            const files = [...(e.dataTransfer?.files ?? [])]
+                .map((f) => f.path ?? "")
+                .filter((p) => exts.test(p));
+            if (files.length)
+                void importFiles(files);
+        };
+        window.addEventListener("dragenter", onDrag);
+        window.addEventListener("dragleave", onDrag);
+        window.addEventListener("dragover", onDrag);
+        window.addEventListener("drop", onDrop);
+        return () => {
+            window.removeEventListener("dragenter", onDrag);
+            window.removeEventListener("dragleave", onDrag);
+            window.removeEventListener("dragover", onDrag);
+            window.removeEventListener("drop", onDrop);
+        };
+    }, [importFiles]);
+    const relink = useCallback(async (r) => {
+        const picked = await pickMedia();
+        const path = picked[0];
+        if (!path)
+            return;
+        try {
+            await sourceRelink(dir, r.id, path);
+            thumbsRequested.current.delete(r.id);
+            await refresh();
+            await onChanged();
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+    }, [dir, refresh, onChanged]);
+    const cycleIntent = useCallback((r) => {
+        const next = INTENT_ORDER[(INTENT_ORDER.indexOf(intentOf(r)) + 1) % INTENT_ORDER.length];
+        const updated = { ...intents, [r.id]: next };
+        setIntents(updated);
+        settingsSet({ intents: updated }, dir).catch((e) => setError(errorMessage(e)));
+    }, [dir, intents, intentOf]);
+    /** Picks a separate mic recording, registers it with source.add, then aligns it to `r`. */
+    const alignMic = useCallback(async (r) => {
+        const file = await pickFile("Choose the separate microphone recording", MIC_EXTENSIONS);
+        if (!file)
+            return;
+        const setFor = (state) => setMicState((m) => ({ ...m, [r.id]: state }));
+        setFor({ status: "importing" });
+        try {
+            const added = await engineCall("source.add", { dir, file });
+            await refresh();
+            setFor({ status: "aligning" });
+            const result = await micAlign(dir, r.id, added.source.id, {}, `ui-mic-${r.id.slice(0, 8)}`);
+            setFor({ status: "done", result });
+            await onChanged();
+        }
+        catch (e) {
+            setFor({ status: "failed", message: errorMessage(e) });
+        }
+    }, [dir, refresh, onChanged]);
+    const runTranscribe = useCallback(async (r) => {
+        setError(null);
+        setTranscribing((s) => new Set(s).add(r.id));
+        try {
+            const job = `ui-tx-${r.id.slice(0, 8)}`;
+            await transcribe(dir, r.id, job, true, job);
+            await refresh();
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+        finally {
+            setTranscribing((s) => {
+                const n = new Set(s);
+                n.delete(r.id);
+                return n;
+            });
+            setTxStatus(({ [r.id]: _done, ...rest }) => rest);
+        }
+    }, [dir, refresh]);
+    const totalMs = useMemo(() => rows.reduce((ms, r) => ms + ((infoOf(r.id)?.duration ?? 0) / TICKS_PER_SECOND) * 1000, 0), [rows, infoOf]);
+    const readyCount = rows.filter((r) => r.exists && checks[r.id] !== "missing" && checks[r.id] !== "changed").length;
+    const openRow = rows.find((r) => r.id === open) ?? null;
+    return (_jsxs(PageShell, { title: "Media", actions: _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "secondary", onClick: () => void importMedia(), children: [_jsx(Icon, { name: "upload" }), "Import\u2026"] }), _jsxs(Button, { variant: "primary", disabled: readyCount === 0, title: readyCount === 0 ? "Import at least one source first" : undefined, onClick: () => onNavigate?.("recipe"), children: [_jsx(Icon, { name: "wand-sparkles" }), "Make finished edit"] })] }), maxWidth: 0, subtitle: rows.length ? `${rows.length} clips · ${timecode(totalMs)} total` : undefined, children: [dropActive && (_jsx("div", { className: "media-drop", "aria-hidden": true, children: _jsx("span", { children: "Drop to add" }) })), error && (_jsx("p", { role: "alert", style: { margin: 0, color: "var(--rk-bad)", fontSize: 13 }, children: error })), importing > 0 && _jsx(ProgressRow, { label: "Importing", status: "working", fraction: undefined }), rows.length === 0 && importing === 0 ? (_jsx(EmptyState, { title: "No media yet", action: _jsxs(Button, { variant: "primary", onClick: () => void importMedia(), children: [_jsx(Icon, { name: "upload" }), "Import\u2026"] }), icon: _jsx(Icon, { name: "film", width: 28, height: 28 }), children: "Drop clips here or import them." })) : (_jsxs("div", { className: "media-grid", children: [rows.map((r, i) => {
+                        const busy = busyOf(r, i);
+                        const check = checks[r.id];
+                        const missing = check === "missing" || !r.exists;
+                        const changed = check === "changed";
+                        const info = infoOf(r.id);
+                        const probe = probes[r.id];
+                        const fps = probe?.fps ? Math.round(probe.fps.num / probe.fps.den) : null;
+                        const dims = probe
+                            ? `${probe.width}×${probe.height}`
+                            : info?.video
+                                ? `${info.video.width}×${info.video.height}`
+                                : null;
+                        const durMs = probe?.duration_ms ?? ((info?.duration ?? 0) / TICKS_PER_SECOND) * 1000;
+                        const intent = intentOf(r);
+                        return (_jsxs(Card, { onClick: () => setOpen(r.id), label: r.name || baseName(r.path), className: "media-card", children: [_jsx(Thumbnail, { src: missing || changed ? undefined : thumbSrc[r.id], badge: durMs ? timecode(durMs) : undefined, video: !missing && !changed && r.exists ? assetUrl(r.path) : undefined, corner: missing || changed ? (_jsx("span", { className: "media-card__missing", children: _jsx(Icon, { name: "triangle-alert", width: 28, height: 28 }) })) : undefined }), _jsx("span", { className: "media-card__name", title: r.path, children: r.name || baseName(r.path) }), _jsx("span", { className: "media-card__meta", children: [dims, fps ? `${fps} fps` : null, info?.has_audio === false ? "No audio" : "Audio"]
+                                        .filter(Boolean)
+                                        .join(" · ") }), busy ? (_jsx(ProgressRow, { label: busy === "hashing"
+                                        ? "Hashing"
+                                        : busy === "transcribing"
+                                            ? (txStatus[r.id]?.message ?? "Transcribing")
+                                            : "Probing", status: "working", fraction: busy === "transcribing" ? txStatus[r.id]?.fraction : undefined })) : (_jsxs("span", { className: "media-card__chips", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: [missing ? (_jsxs(Badge, { tone: "warn", children: [_jsx(Icon, { name: "triangle-alert", width: 12, height: 12 }), "Missing"] })) : changed ? (_jsxs(Badge, { tone: "warn", children: [_jsx(Icon, { name: "triangle-alert", width: 12, height: 12 }), "Changed on disk"] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "cr-chip-btn", onClick: () => cycleIntent(r), title: "Detected type — click to change", children: _jsx(Badge, { tone: intent === "talking-head" ? "ok" : intent === "mixed" ? "accent" : "neutral", children: INTENT_LABEL[intent] }) }), _jsx(TranscriptChip, { row: r, speechReady: speechReady })] })), (missing || changed) && (_jsx(Button, { variant: "ghost", size: "sm", className: "cr-chip-btn", onClick: () => void relink(r), title: "Find the file again", children: _jsxs(Badge, { children: [_jsx(Icon, { name: "link", width: 12, height: 12 }), "Relink\u2026"] }) }))] }))] }, r.id));
+                    }), Object.entries(addProgress).map(([file, p]) => (_jsxs(Card, { className: "media-card", label: baseName(file), children: [_jsx(Thumbnail, {}), _jsx("span", { className: "media-card__name", title: file, children: baseName(file) }), _jsx(ProgressRow, { label: p.phase === "hashing"
+                                    ? "Hashing"
+                                    : p.phase === "probing"
+                                        ? "Probing"
+                                        : p.phase === "copying"
+                                            ? "Copying"
+                                            : "Adding", status: "working", fraction: p.fraction })] }, `add-${file}`)))] })), openRow != null && (_jsx(SourceDrawer, { dir: dir, row: openRow, probe: probes[openRow.id], info: infoOf(openRow.id), speechReady: speechReady, onClose: () => setOpen(null), onTranscribe: () => void runTranscribe(openRow), mic: micState[openRow.id], onAlignMic: () => void alignMic(openRow) }))] }));
+}
+function TranscriptChip({ row, speechReady }) {
+    if (row.has_transcript)
+        return _jsx(Badge, { tone: "ok", children: "Transcribed" });
+    if (speechReady === false)
+        return _jsx(Badge, { tone: "warn", children: "Speech model unavailable" });
+    return _jsx(Badge, { tone: "neutral", children: "Not transcribed" });
+}
+function SourceDrawer({ dir, row, probe, info, speechReady, onClose, onTranscribe, mic, onAlignMic, }) {
+    const micBusy = mic?.status === "importing" || mic?.status === "aligning";
+    const playbackId = useMediaPlaybackId(row.exists ? row.path : null);
+    const [excerpt, setExcerpt] = useState(null);
+    const [copied, setCopied] = useState(false);
+    const durMs = probe?.duration_ms ?? ((info?.duration ?? 0) / TICKS_PER_SECOND) * 1000;
+    const fps = probe?.fps ? probe.fps.num / probe.fps.den : null;
+    useEffect(() => {
+        if (!row.has_transcript)
+            return;
+        transcriptShow(dir, row.id)
+            .then((t) => setExcerpt(t.transcript.words
+            .slice(0, 60)
+            .map((w) => w.text)
+            .join(" ")))
+            .catch(() => setExcerpt(null));
+    }, [dir, row]);
+    const copyHash = () => {
+        void navigator.clipboard?.writeText(row.id).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        });
+    };
+    const meta = [
+        ["Duration", timecode(durMs)],
+        [
+            "Resolution",
+            probe ? `${probe.width}×${probe.height}` : info?.video ? `${info.video.width}×${info.video.height}` : "—",
+        ],
+        ["Frame rate", fps ? `${fps.toFixed(fps % 1 ? 2 : 0)} fps` : "—"],
+        ["Video codec", probe?.video_codec || "—"],
+        ["Audio", probe?.audio_codec ? `${probe.audio_codec}${probe.audio_channels ? ` · ${probe.audio_channels}ch` : ""}` : info?.has_audio ? "yes" : "none"],
+        ["Colour space", probe?.color_space ?? "—"],
+        ["Size", row.size ? fileSize(row.size) : "—"],
+    ];
+    return (_jsxs(Drawer, { title: row.name || baseName(row.path), open: true, onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", onClick: () => void revealPath(row.path), children: [_jsx(Icon, { name: "folder-open" }), "Reveal in Finder"] }), !row.has_transcript ? (_jsxs(Button, { variant: "primary", disabled: speechReady === false, title: speechReady === false ? "Speech model unavailable" : undefined, onClick: onTranscribe, children: [_jsx(Icon, { name: "mic" }), "Transcribe"] })) : (_jsxs(Button, { variant: "secondary", disabled: speechReady === false, onClick: onTranscribe, children: [_jsx(Icon, { name: "rotate-ccw" }), "Re-transcribe"] })), _jsxs(Button, { variant: "secondary", disabled: micBusy || !row.exists, title: !row.exists ? "Relink this file before aligning a microphone" : undefined, onClick: onAlignMic, children: [_jsx(Icon, { name: "music" }), "Align separate microphone"] })] }), children: [row.exists ? (_jsx(MediaPlayer, { src: row.path, playbackId: playbackId, kind: mediaKind(row.path), title: row.name }, playbackId ?? "pending")) : (_jsx("p", { style: { margin: 0, color: "var(--rk-warn)", fontSize: 13 }, children: "This file is missing \u2014 relink it to play." })), _jsxs("dl", { className: "media-meta", children: [meta.map(([k, v]) => (_jsxs("span", { style: { display: "contents" }, children: [_jsx("dt", { children: k }), _jsx("dd", { children: v })] }, k))), _jsx("dt", { children: "Hash" }), _jsxs("dd", { className: "mono", title: row.id, children: [row.id.slice(0, 12), "\u2026", " ", _jsxs(Button, { size: "sm", variant: "ghost", onClick: copyHash, children: [_jsx(Icon, { name: copied ? "check" : "more-horizontal" }), copied ? "Copied" : "Copy"] })] }), _jsx("dt", { children: "Path" }), _jsx("dd", { title: row.path, style: { color: "var(--rk-ink-2)" }, children: row.path })] }), mic && _jsx(MicAlignStatus, { state: mic }), row.has_transcript ? (_jsx("p", { className: "media-excerpt", children: excerpt ?? "Loading transcript…" })) : (_jsx("p", { className: "media-excerpt", children: speechReady === false
+                    ? "The speech model isn't installed, so this source can't be transcribed yet."
+                    : "No transcript yet — transcribe to enable word-level editing." }))] }));
+}
+/** Progress, failure, and the recorded offset for "Align separate microphone". */
+function MicAlignStatus({ state }) {
+    if (state.status === "importing") {
+        return _jsx(ProgressRow, { label: "Adding microphone recording", status: "working", fraction: undefined });
+    }
+    if (state.status === "aligning") {
+        return _jsx(ProgressRow, { label: "Aligning microphone to camera", status: "working", fraction: undefined });
+    }
+    if (state.status === "failed") {
+        return (_jsxs("p", { role: "alert", style: { margin: 0, color: "var(--rk-bad)", fontSize: 13 }, children: ["Microphone alignment failed \u2014 ", state.message] }));
+    }
+    const { alignment, status } = state.result;
+    const ms = alignment.offset_ms;
+    const sign = ms < 0 ? "−" : "+";
+    return (_jsxs("p", { role: "status", style: { margin: 0, fontSize: 13, color: "var(--rk-ink-2)" }, children: ["Microphone offset ", sign, (Math.abs(ms) / 1000).toFixed(3), " s (mic time minus camera time) \u00B7 confidence", " ", alignment.confidence.toFixed(2), status === "already_attached" ? " · mapping already recorded" : ""] }));
+}

package/dist/views/TimelineView.d.ts

@@ -0,0 +1,20 @@
+import type { ProjectShow } from "../lib/project.js";
+import type { ProgressState } from "../hooks/useProgress.js";
+import { type PreviewHost } from "../editor/TimelineEditorView.js";
+/**
+ * Finished edit screen (docs/design/app-ui.md §3.4). Thin host: the whole
+ * screen — stage, transport, side tabs, timeline — lives in
+ * `TimelineEditorView`; render/export controls live in the Exports tab.
+ * `project.show` stays the single source of truth; editing goes through the
+ * canonical Rust timeline.
+ */
+export declare function TimelineView({ show, progress, previewHost, onChanged, }: {
+    show: ProjectShow;
+    progress: ProgressState;
+    outputPath: string | null;
+    rendering: boolean;
+    /** Optional revision-bound preview adapter (native compositor / frames). */
+    previewHost?: PreviewHost | null;
+    onChanged: () => Promise<void>;
+    onRender: (preset: "youtube" | "reels") => void;
+}): import("react").JSX.Element;

package/dist/views/TimelineView.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TimelineEditorView } from "../editor/TimelineEditorView.js";
+/**
+ * Finished edit screen (docs/design/app-ui.md §3.4). Thin host: the whole
+ * screen — stage, transport, side tabs, timeline — lives in
+ * `TimelineEditorView`; render/export controls live in the Exports tab.
+ * `project.show` stays the single source of truth; editing goes through the
+ * canonical Rust timeline.
+ */
+export function TimelineView({ show, progress, previewHost, onChanged, }) {
+    return (_jsx(TimelineEditorView, { show: show, previewHost: previewHost ?? null, onRefresh: onChanged, busy: progress.running }));
+}

package/package.json

@@ -1,6 +1,73 @@
 {
   "name": "@rightkit/video-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Video editor UI: timeline, inspector, preview and project views.",
+  "license": "MIT OR Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE-MIT",
+    "LICENSE-APACHE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@rightkit/app-update": "^0.4.2",
+    "@rightkit/legal": "^0.6.3",
+    "@rightkit/legal-ui": "^0.4.1",
+    "@rightkit/license": "^0.3.0",
+    "@rightkit/logs": "^0.1.6",
+    "@rightkit/media-ui": "^0.3.4",
+    "@rightkit/onboarding": "^0.6.3",
+    "@rightkit/platform-ui": "^0.4.0",
+    "@rightkit/react-shell": "^0.7.2",
+    "@rightkit/settings-ui": "^0.7.0",
+    "@rightkit/tauri": "^0.3.0",
+    "@rightkit/tauri-shell": "^0.1.3",
+    "@rightkit/theme": "^0.3.1",
+    "@tauri-apps/api": "^2.12.4",
+    "@tauri-apps/plugin-dialog": "^2.8.3",
+    "@tauri-apps/plugin-process": "^2.4.0",
+    "@tauri-apps/plugin-updater": "^2.14.0"
+  },
+  "peerDependencies": {
+    "react": ">=18 <21"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.5"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bogusyogi/rightkit.git",
+    "directory": "packages/video-ui"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/copy-assets.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "pnpm --filter \"@rightkit/video-ui^...\" run build && vitest run"
+  }
 }