@rightkit/video-ui 0.0.0-stage → 0.1.0

package/dist/components/DesktopWorkspace.js

@@ -0,0 +1,527 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, IconButton, Notice, useToast } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useState } from "react";
+import { getCurrentWebview } from "@tauri-apps/api/webview";
+import { useEngine } from "../hooks/useEngine.js";
+import { useProgress } from "../hooks/useProgress.js";
+import { buildAssembleInput, clearPending, loadPending, newAssembleId, savePending, } from "../lib/assemble.js";
+import { pickFolder } from "../lib/dialog.js";
+import { engineCall, errorCode, errorMessage } from "../lib/engine.js";
+import { SETTINGS_CHANGED, bundleImport, projectsList, rendersList, settingsGet, storageStatus } from "../lib/media.js";
+import { baseName, projectInit, projectShow } from "../lib/project.js";
+import { Home, loadRecent, rememberProject } from "../views/Home.js";
+import { ProgressView } from "../views/ProgressView.js";
+import { PromptPanel } from "../views/PromptPanel.js";
+import { TimelineView } from "../views/TimelineView.js";
+import { SourcesView } from "../views/SourcesView.js";
+import { AutoEditView } from "../views/AutoEditView.js";
+import { ShortsView } from "../views/ShortsView.js";
+import { PhrasesView } from "../views/PhrasesView.js";
+import { RetentionView } from "../views/RetentionView.js";
+import { AssetsView } from "../views/AssetsView.js";
+import { ExportsView } from "../views/ExportsView.js";
+import { SettingsView } from "../views/SettingsView.js";
+import { AppShell, StatusRow, useShortcuts } from "@rightkit/react-shell/react";
+import { shellBridge } from "../lib/shell.js";
+import { setUpdateBusy } from "../lib/services.js";
+import { mediaScopeAllow } from "../lib/media.js";
+import { editorShortcuts } from "../editor/keys.js";
+import { useTimelinePreview } from "./Player.js";
+import { Icon } from "../ui/index.js";
+import { hostAppName } from "../appName.js";
+/** Project tabs in nav order; ⌘1–4 select them by position. */
+const PROJECT_TABS = [
+    { tab: "media", label: "Media" },
+    { tab: "recipe", label: "Edit recipe" },
+    { tab: "finished", label: "Finished edit" },
+    { tab: "exports", label: "Exports" },
+];
+/** Display name for a recent-projects row: stored project name, else the
+ *  folder name de-slugged. Mirrors Home's `displayName`. */
+export function recentLabel(dir, name) {
+    if (name)
+        return name;
+    const folder = baseName(dir).replace(/\.cutright$/, "");
+    const words = folder.replace(/[-_]+/g, " ").trim();
+    return words.length > 0 ? words[0].toUpperCase() + words.slice(1) : folder;
+}
+export function DesktopWorkspace() {
+    const toast = useToast();
+    const { status, doctor, doctorError, statusError } = useEngine();
+    const { progress, begin, patch, seed, reset } = useProgress();
+    const [pending, setPending] = useState(null);
+    const [resumable, setResumable] = useState(false);
+    /** The recovered run's stored render file is gone; its render step must run again. */
+    const [renderMissing, setRenderMissing] = useState(false);
+    const [dir, setDir] = useState(null);
+    const [show, setShow] = useState(null);
+    const [exportsCount, setExportsCount] = useState(0);
+    const [tab, setTab] = useState("projects");
+    // Exports ⋯ → Import retention… routes here with the render preselected (R5).
+    const [retentionPreselect, setRetentionPreselect] = useState(undefined);
+    /** R16: where dropped-footage projects are created (never the footage dir). */
+    const [projectRoot, setProjectRoot] = useState(null);
+    /** Recent rows: display names + missing-media state from `projects.list`. */
+    const [recentInfo, setRecentInfo] = useState({});
+    /** Settings section to land on (status dot → Models). */
+    const [settingsSection, setSettingsSection] = useState(undefined);
+    const [assembling, setAssembling] = useState(false);
+    const [rendering, setRendering] = useState(false);
+    const [jobError, setJobError] = useState(null);
+    const [output, setOutput] = useState(null);
+    /** Names missing on this computer after a bundle import; shown until dismissed. */
+    const [importMissing, setImportMissing] = useState(null);
+    const [importUnverified, setImportUnverified] = useState(null);
+    const [dropActive, setDropActive] = useState(false);
+    const error = statusError ?? status?.last_error ?? doctorError;
+    const previewHost = useTimelinePreview(dir, show?.revision.cursor ?? 0);
+    const [recents, setRecents] = useState([]);
+    useEffect(() => {
+        if (status?.state !== "ready")
+            return;
+        let live = true;
+        const load = () => void loadRecent()
+            .then((dirs) => { if (live)
+            setRecents(dirs.slice(0, 5)); })
+            .catch((e) => { if (live)
+            setJobError(errorMessage(e)); });
+        load();
+        window.addEventListener(SETTINGS_CHANGED, load);
+        return () => {
+            live = false;
+            window.removeEventListener(SETTINGS_CHANGED, load);
+        };
+    }, [dir, tab === "projects", status?.state]);
+    useEffect(() => {
+        setUpdateBusy(dir !== null || assembling || rendering || progress.running);
+        return () => setUpdateBusy(false);
+    }, [dir, assembling, rendering, progress.running]);
+    // Dynamic asset scope: project dir + its renders/media dirs. The scope glob skips
+    // dot-directories unless named, so the thumbnail cache (.cache/thumbs) is listed.
+    useEffect(() => {
+        if (!dir)
+            return;
+        void mediaScopeAllow([dir, `${dir}/media`, `${dir}/renders`, `${dir}/variants`, `${dir}/.cache`], true).catch(() => undefined);
+    }, [dir]);
+    // R16: resolve the drop project folder once — the configured app setting,
+    // else the engine's platform default (~/Movies/the host app).
+    useEffect(() => {
+        let live = true;
+        (async () => {
+            try {
+                const [s, st] = await Promise.all([settingsGet(), storageStatus()]);
+                if (!live)
+                    return;
+                const configured = s.app.project_root;
+                setProjectRoot(typeof configured === "string" && configured.trim()
+                    ? configured
+                    : st.default_project_root ?? null);
+            }
+            catch {
+                /* engine still starting; drops are ignored until this resolves */
+            }
+        })();
+        return () => {
+            live = false;
+        };
+    }, []);
+    // Recent-project rows show the stored name and a warn dot for missing media.
+    useEffect(() => {
+        if (recents.length === 0)
+            return;
+        let live = true;
+        projectsList(recents)
+            .then((r) => {
+            if (!live)
+                return;
+            const info = {};
+            for (const dir of recents)
+                info[dir] = { missing: true };
+            for (const p of r.projects) {
+                info[p.dir] = {
+                    name: p.name,
+                    missing: (p.missing_sources ?? 0) > 0 || p.status === "missing_media",
+                };
+            }
+            setRecentInfo(info);
+        })
+            .catch(() => undefined);
+        return () => {
+            live = false;
+        };
+    }, [recents]);
+    const refresh = useCallback(async () => {
+        if (!dir)
+            return;
+        setShow(await projectShow(dir));
+        rendersList(dir)
+            .then((r) => setExportsCount(r.renders.filter((x) => x.name.endsWith(".mp4")).length))
+            .catch(() => undefined);
+    }, [dir]);
+    useEffect(() => {
+        if (!dir)
+            return;
+        let cancelled = false;
+        projectShow(dir)
+            .then((s) => !cancelled && setShow(s))
+            .catch((e) => !cancelled && setJobError(errorMessage(e)));
+        rendersList(dir)
+            .then((r) => !cancelled && setExportsCount(r.renders.filter((x) => x.name.endsWith(".mp4")).length))
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [dir]);
+    useEffect(() => {
+        if (progress.output)
+            setOutput(progress.output);
+        if (progress.done || progress.error)
+            void refresh().catch(() => undefined);
+    }, [progress.output, progress.done, progress.error, refresh]);
+    const open = useCallback((next, firstTab = "media") => {
+        setShow(null);
+        setOutput(null);
+        setJobError(null);
+        // importBundle calls open before it sets its own notice, so the notice it shows survives this clear.
+        setImportMissing(null);
+        setImportUnverified(null);
+        reset();
+        setTab(firstTab);
+        setPending(null);
+        setResumable(false);
+        setRenderMissing(false);
+        setDir(next);
+        void rememberProject(next).catch((e) => toast(errorMessage(e), { kind: "error", ttl: 0 }));
+    }, [reset, toast]);
+    const closeProject = useCallback(() => {
+        setDir(null);
+        setShow(null);
+        setImportMissing(null);
+        setImportUnverified(null);
+        setTab("projects");
+    }, []);
+    const createProject = useCallback(async () => {
+        const dir = await pickFolder("Choose or create a folder for the new project");
+        if (!dir)
+            return;
+        try {
+            await projectInit(dir, baseName(dir));
+            open(dir);
+        }
+        catch (e) {
+            toast(errorMessage(e), { kind: "error", ttl: 0 });
+        }
+    }, [open, toast]);
+    /** Checks an existing project folder with the engine, then opens it. Shared by Open folder… and Import bundle. */
+    const openExisting = useCallback(async (path) => {
+        await projectShow(path);
+        open(path);
+    }, [open]);
+    const openFolder = useCallback(async () => {
+        const picked = await pickFolder(`Open a ${hostAppName()} project folder`);
+        if (!picked)
+            return;
+        try {
+            await openExisting(picked);
+        }
+        catch (e) {
+            toast(errorMessage(e), { kind: "error", ttl: 0 });
+        }
+    }, [openExisting, toast]);
+    /** Two folder picks (bundle, then new project folder), `bundle.import`, then the Open folder… path.
+     *  Resolves with the error to show on Home, or null when nothing failed. */
+    const importBundle = useCallback(async () => {
+        const bundle = await pickFolder("Choose the bundle folder to import");
+        if (!bundle)
+            return null;
+        const target = await pickFolder("Choose an empty folder for the imported project");
+        if (!target)
+            return null;
+        let report;
+        try {
+            report = await bundleImport({ bundle, dir: target });
+        }
+        catch (e) {
+            return errorMessage(e);
+        }
+        try {
+            await openExisting(report.dir);
+        }
+        catch (e) {
+            toast(errorMessage(e), { kind: "error", ttl: 0 });
+            return null;
+        }
+        const missing = [
+            ...report.missing_media.map((m) => m.name ?? baseName(m.path)),
+            ...report.missing_assets.map((path) => baseName(path)),
+            ...(report.missing_generated_sources ?? []).map((g) => baseName(g.path)),
+        ];
+        const unverified = [
+            ...(report.unverified_assets ?? []).map((path) => baseName(path)),
+            ...(report.unverified_generated_sources ?? []).map((g) => baseName(g.path)),
+        ];
+        if (unverified.length > 0)
+            setImportUnverified(unverified);
+        if (missing.length > 0)
+            setImportMissing(missing);
+        else if (unverified.length === 0)
+            toast("Bundle imported", { kind: "success" });
+        return null;
+    }, [openExisting, toast]);
+    /** §3.1 + R16: dropped media creates a project under the configured project
+     *  folder (Settings › Storage › Project folder; default ~/Movies/the host app) —
+     *  never inside the user's footage folder. The project is named after the
+     *  first dropped file's stem (`Interview`, then `Interview 2`, …) and the
+     *  originals are imported in place. */
+    const openFiles = useCallback(async (paths) => {
+        const first = paths[0];
+        if (!first || !projectRoot)
+            return;
+        const stem = baseName(first).replace(/\.[^.]+$/, "").replace(/[\\/]/g, "").trim() || "Untitled";
+        // `projects.create` picks `stem`, `stem 2`, … — never an occupied dir.
+        let created;
+        try {
+            const r = await engineCall("projects.create", { root: projectRoot, name: stem });
+            created = r.dir;
+        }
+        catch (e) {
+            toast(`Could not create a project folder: ${errorMessage(e)}`, { kind: "error", ttl: 0 });
+            return;
+        }
+        try {
+            open(created);
+            for (const file of paths) {
+                await engineCall("source.add", { dir: created, file });
+            }
+            toast(`Imported ${paths.length} file${paths.length === 1 ? "" : "s"}`, { kind: "success" });
+        }
+        catch (e) {
+            toast(errorMessage(e), { kind: "error", ttl: 0 });
+        }
+    }, [open, toast, projectRoot]);
+    // File drops land on the Projects screen only; inside a project the Media
+    // screen owns its own drop handling.
+    useEffect(() => {
+        let un;
+        void getCurrentWebview()
+            .onDragDropEvent((e) => {
+            if (dir)
+                return;
+            if (e.payload.type === "enter" || e.payload.type === "over")
+                setDropActive(true);
+            else if (e.payload.type === "leave")
+                setDropActive(false);
+            else if (e.payload.type === "drop") {
+                setDropActive(false);
+                void openFiles(e.payload.paths);
+            }
+        })
+            .then((u) => (un = u))
+            .catch(() => undefined);
+        return () => un?.();
+    }, [dir, openFiles]);
+    // Global keyboard (§2): the shell's shortcut registry owns the chords, the help overlay and dispatch.
+    // Project tabs apply only with a project open; a skipped binding leaves the key to the page.
+    useShortcuts([
+        { id: "cr.new-project", chord: "mod+n", label: "New project", group: "Projects", run: () => void createProject() },
+        { id: "cr.open-project", chord: "mod+o", label: "Open project folder", group: "Projects", run: () => void openFolder() },
+        { id: "cr.settings", chord: "mod+,", label: "Settings", group: "Navigation", run: () => setTab("settings") },
+        ...PROJECT_TABS.map(({ tab, label }, i) => ({
+            id: `cr.tab.${tab}`,
+            chord: `mod+${i + 1}`,
+            label: `Go to ${label}`,
+            group: "Navigation",
+            when: () => Boolean(dir),
+            run: () => setTab(tab),
+        })),
+        ...editorShortcuts(),
+    ]);
+    // On open: if this project has an unfinished assemble, ask the engine where it stands.
+    useEffect(() => {
+        if (!dir)
+            return;
+        const saved = loadPending(dir);
+        if (!saved)
+            return;
+        let cancelled = false;
+        engineCall("assemble.status", { dir, assemble_id: saved.assembleId })
+            .then((st) => {
+            if (cancelled)
+                return;
+            // A stored render whose file is gone must run again, so the run is not cleared as finished.
+            const missing = !!st.render && st.render_exists === false;
+            if (st.status === "done" && !missing) {
+                clearPending(dir);
+                return;
+            }
+            setPending(saved);
+            setResumable(true);
+            setRenderMissing(missing);
+            seed(st);
+            // Recovered run: land on Progress so the user can resume it.
+            setTab("jobs");
+        })
+            .catch((e) => {
+            if (cancelled)
+                return;
+            // not_found: the engine never recorded this run; the saved request can still be sent.
+            if (errorCode(e) === "not_found") {
+                setPending(saved);
+                setResumable(true);
+                setTab("jobs");
+            }
+            else
+                setJobError(errorMessage(e));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [dir, seed]);
+    const run = async (record) => {
+        if (!dir)
+            return;
+        setAssembling(true);
+        setResumable(false);
+        setRenderMissing(false);
+        setJobError(null);
+        setTab("jobs");
+        const tag = begin("assemble", record.assembleId);
+        try {
+            const result = await engineCall("assemble", { dir, input: record.input }, tag);
+            if (result?.render?.output)
+                setOutput(result.render.output);
+            patch({ running: false, done: true });
+            clearPending(dir);
+            setPending(null);
+            await refresh();
+            setTab("finished");
+            toast("Finished edit ready", { kind: "success" });
+        }
+        catch (e) {
+            const code = errorCode(e);
+            if (code === "cancelled" || code === "render_cancelled")
+                patch({ running: false, cancelled: true });
+            else {
+                setJobError(errorMessage(e));
+                patch({ running: false });
+            }
+            setResumable(true);
+            await refresh().catch(() => undefined);
+        }
+        finally {
+            setAssembling(false);
+        }
+    };
+    const submit = (form) => {
+        // The id is fixed here and persisted with the exact input: re-sending both resumes.
+        const assembleId = newAssembleId();
+        const input = buildAssembleInput(form, assembleId);
+        const record = { assembleId, input, startedAt: Date.now() };
+        if (dir)
+            savePending(dir, record);
+        setPending(record);
+        void run(record);
+    };
+    const resume = () => {
+        if (pending)
+            void run(pending);
+    };
+    const render = async (preset) => {
+        if (!dir)
+            return;
+        setRendering(true);
+        setJobError(null);
+        const tag = begin("render");
+        const job = `ui-${tag}`;
+        patch({ render: { job }, running: true });
+        try {
+            const result = await engineCall("render", { dir, preset, job }, tag);
+            if (result?.output)
+                setOutput(result.output);
+        }
+        catch (e) {
+            setJobError(errorMessage(e));
+        }
+        finally {
+            setRendering(false);
+            patch({ render: null, running: false });
+        }
+    };
+    // `assemble.cancel` also stops the assemble's in-flight render (engine side).
+    const cancel = () => {
+        const report = (e) => setJobError(errorMessage(e));
+        const aid = progress.assembleId;
+        if (aid) {
+            void engineCall("assemble.cancel", { assemble_id: aid }).catch(report);
+        }
+        else if (progress.render?.job) {
+            void engineCall("render.cancel", { job: progress.render.job }).catch(report);
+        }
+    };
+    const projectName = show?.project.name ?? (dir ? baseName(dir) : undefined);
+    const mediaCount = show?.summary.sources ?? 0;
+    const projectGroups = dir
+        ? [
+            {
+                title: "Edit footage",
+                items: [
+                    { id: "media", label: "Media", icon: _jsx(Icon, { name: "film" }), badge: mediaCount > 0 ? _jsx("span", { className: "ws-count", children: mediaCount }) : undefined },
+                    { id: "recipe", label: "Edit recipe", icon: _jsx(Icon, { name: "sliders-horizontal" }) },
+                    { id: "finished", label: "Finished edit", icon: _jsx(Icon, { name: "list-video" }) },
+                    { id: "exports", label: "Exports", icon: _jsx(Icon, { name: "download" }), badge: exportsCount > 0 ? _jsx("span", { className: "ws-count", children: exportsCount }) : undefined },
+                ],
+            },
+            {
+                title: "Clip & repurpose",
+                items: [
+                    { id: "shorts", label: "Shorts", icon: _jsx(Icon, { name: "scissors" }) },
+                    { id: "phrases", label: "Find phrases", icon: _jsx(Icon, { name: "text-quote" }) },
+                    { id: "retention", label: "Retention", icon: _jsx(Icon, { name: "chart-line" }) },
+                ],
+            },
+            {
+                title: "Create",
+                items: [
+                    { id: "assets", label: "Assets", icon: _jsx(Icon, { name: "image" }) },
+                    { id: "prompt", label: "From prompt", icon: _jsx(Icon, { name: "wand-sparkles" }) },
+                ],
+            },
+        ]
+        : [{ items: [{ id: "projects", label: "Projects", icon: _jsx(Icon, { name: "folder" }) }] }];
+    const groups = recents.length > 0
+        ? [
+            ...projectGroups,
+            {
+                title: "Recent projects",
+                items: recents.map((r) => ({
+                    id: `recent:${r}`,
+                    label: recentLabel(r, recentInfo[r]?.name),
+                    icon: _jsx("span", { className: `ws-dot${dir === r ? " ws-dot--cur" : recentInfo[r]?.missing ? " ws-dot--missing" : ""}` }),
+                    keywords: ["recent", r],
+                })),
+            },
+        ]
+        : projectGroups;
+    const activeId = tab === "settings" ? "" : dir ? tab : "projects";
+    const navigate = (id) => {
+        if (id.startsWith("recent:"))
+            open(id.slice("recent:".length));
+        else if (id === "projects")
+            closeProject();
+        else
+            setTab(id);
+    };
+    const commands = [
+        { id: "cr.new-project", label: "New project", shortcut: "cr.new-project", run: () => void createProject() },
+        { id: "cr.open-project", label: "Open project folder…", shortcut: "cr.open-project", run: () => void openFolder() },
+        ...(dir ? [{ id: "cr.close-project", label: "Close project", run: closeProject }] : []),
+    ];
+    const engineTone = status?.state === "ready" ? "ok" : error ? "bad" : "warn";
+    return (_jsx(AppShell, { groups: groups, activeId: activeId, onNavigate: navigate, title: dir ? (_jsxs("span", { className: "ws-crumb", children: [_jsx("button", { type: "button", className: "ws-crumb__link", onClick: closeProject, children: "Projects" }), _jsx("span", { "aria-hidden": true, children: "/" }), _jsx("strong", { children: projectName })] })) : undefined, sidebarTop: _jsx("div", { className: "ws-side-top", children: _jsxs(Button, { variant: "secondary", onClick: () => void createProject(), className: "cr-btn--block", children: [_jsx(Icon, { name: "plus" }), "New project"] }) }), wordmark: _jsxs("span", { className: "ws-wordmark", children: ["Cut", _jsx("span", { children: "Right" })] }), statusFooter: _jsxs(_Fragment, { children: [_jsx("p", { className: "ws-foot-note", children: "Originals stay untouched \u00B7 every edit is reversible" }), _jsx("button", { type: "button", className: "ws-status", title: error ?? undefined, onClick: () => {
+                        setSettingsSection("models");
+                        setTab("settings");
+                    }, children: _jsx(StatusRow, { tone: engineTone, label: "Engine", value: status?.state === "ready" ? "Ready" : error ? "Needs attention" : "Starting" }) })] }), onOpenSettings: () => setTab("settings"), settingsActive: tab === "settings", commands: commands, bridge: shellBridge, children: _jsxs("div", { className: "ws-plane", children: [importMissing && (_jsxs(Notice, { action: _jsx(IconButton, { label: "Dismiss", onClick: () => setImportMissing(null), children: _jsx(Icon, { name: "x" }) }), children: ["Imported. Missing on this computer: ", _jsx("strong", { children: importMissing.join(", ") })] })), importUnverified && (_jsxs(Notice, { action: _jsx(IconButton, { label: "Dismiss", onClick: () => setImportUnverified(null), children: _jsx(Icon, { name: "x" }) }), children: ["Imported. Found on this computer but could not be checked against the original:", " ", _jsx("strong", { children: importUnverified.join(", ") })] })), tab === "settings" ? (_jsx(SettingsView, { dir: dir, status: status, doctor: doctor, error: error, section: settingsSection })) : !dir ? (_jsx(Home, { ready: status?.state === "ready", dropActive: dropActive, onOpen: open, onCreate: () => void createProject(), onOpenFolder: () => void openFolder(), onImportBundle: importBundle, onFiles: (paths) => void openFiles(paths) })) : tab === "media" ? (_jsx(SourcesView, { dir: dir, onChanged: refresh, onNavigate: (to) => setTab(to === "recipe" ? "recipe" : "finished") })) : tab === "recipe" ? (_jsx(AutoEditView, { dir: dir, onChanged: refresh, onNavigate: (to) => setTab(to === "recipe" ? "recipe" : "finished") })) : tab === "finished" ? (show ? (_jsx(TimelineView, { show: show, progress: progress, outputPath: output, rendering: rendering || (progress.running && !!progress.render), previewHost: previewHost, onChanged: refresh, onRender: (p) => void render(p) })) : (_jsx(ProgressView, { progress: progress, jobError: jobError, assembling: assembling, onCancel: cancel, resumable: resumable, renderMissing: renderMissing, recovered: pending?.input.shots.map((s, i) => s.prompt || `Shot ${i + 1}`), onResume: resume }))) : tab === "exports" ? (_jsx(ExportsView, { dir: dir, progress: progress, rendering: rendering || (progress.running && !!progress.render), outputPath: output, onRender: (p) => void render(p), onChanged: refresh, onImportRetention: (render) => {
+                        setRetentionPreselect(render);
+                        setTab("retention");
+                    } })) : tab === "shorts" ? (_jsx(ShortsView, { dir: dir, onChanged: refresh })) : tab === "phrases" ? (_jsx(PhrasesView, { dir: dir, onChanged: refresh })) : tab === "retention" ? (_jsx(RetentionView, { dir: dir, onChanged: refresh, onExportRevised: () => setTab("exports"), preselectRender: retentionPreselect })) : tab === "assets" ? (_jsx(AssetsView, { dir: dir, onNewVideo: () => setTab("prompt") })) : tab === "prompt" ? (_jsx(PromptPanel, { busy: assembling, progress: progress, onSubmit: submit, onOpenFinished: () => setTab("finished") })) : (_jsx(ProgressView, { progress: progress, jobError: jobError, assembling: assembling, onCancel: cancel, resumable: resumable, renderMissing: renderMissing, recovered: pending?.input.shots.map((s, i) => s.prompt || `Shot ${i + 1}`), onResume: resume }))] }) }));
+}

package/dist/components/Player.d.ts

@@ -0,0 +1,49 @@
+import { type PlaybackMeta } from "../lib/media.js";
+/**
+ * Native playback surface: frames are decoded and composited in Rust (FFmpeg +
+ * wgpu) and delivered here as RGBA; the browser never decodes the timeline.
+ * `dir` plays the canonical project revision.
+ */
+export declare function NativePlayer({ dir, label, seekRequest, onStatus, onError, }: {
+    dir?: string;
+    label?: string;
+    seekRequest?: {
+        ms: number;
+        n: number;
+    } | null;
+    onStatus?: (meta: PlaybackMeta) => void;
+    onError?: (message: string) => void;
+}): import("react").JSX.Element;
+/**
+ * Preview host for the editor: revision-bound native playback of the project
+ * timeline. `seek(revisionCursor, timeS)` scrubs to `timeS`.
+ */
+export declare function useTimelinePreview(dir: string | null, revision: number): {
+    seek: (_revisionCursor: number, timeS: number) => void;
+    slot: import("react").JSX.Element | null;
+};
+/**
+ * Stage player for the Finished edit screen (§3.4): a letterboxed canvas fed
+ * by the Rust compositor playback session for the CURRENT project revision,
+ * plus the spec transport (play circle, ±1f, mono timecode, speed, loop,
+ * scrubber). While the session opens — or if playback fails — it shows the
+ * caller-provided fallback frame (`media.thumbnail`), never a black box.
+ */
+export declare function StagePlayer({ dir, revision, seekRequest, captionsOn, caption, aspect, fallback, onPosition, onToggleCaptions, }: {
+    dir: string;
+    /** Reopen the session when the revision changes (edit landed). */
+    revision: number;
+    seekRequest?: {
+        ms: number;
+        n: number;
+    } | null;
+    captionsOn: boolean;
+    caption?: string | null;
+    aspect?: string | null;
+    /** Asset URL of the nearest real frame to show while loading/on error. */
+    fallback?: string | null;
+    onPosition?: (ms: number) => void;
+    onToggleCaptions: (v: boolean) => void;
+}): import("react").JSX.Element;
+/** Shape consumed by the editor lane (`TimelineView` / `TimelineEditorView`). */
+export type PreviewHost = ReturnType<typeof useTimelinePreview>;