@rightkit/video-ui 0.0.0-stage → 0.1.0

package/dist/views/BatchDelivery.js

@@ -0,0 +1,331 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Batch delivery — one project's timelines x presets as a resumable batch (batch.* engine methods).
+import { Badge, Button, Checkbox, Field, Input, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, useToast } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { assetUrl } from "../lib/asset.js";
+import { errorCode, errorMessage, onEngineEvent } from "../lib/engine.js";
+import { batchCover, batchCreate, batchList, batchRun, batchStatus, recipeCancel, SETTINGS_CHANGED, variantsList, } from "../lib/media.js";
+import { Icon } from "../ui/index.js";
+const PRESETS = [
+    { value: "youtube", label: "YouTube 16:9", shape: "wide" },
+    { value: "reels", label: "Reels 9:16", shape: "tall" },
+    { value: "tiktok", label: "TikTok 9:16", shape: "tall" },
+    { value: "square", label: "Square 1:1", shape: "square" },
+];
+const PRESET_BY_ID = Object.fromEntries(PRESETS.map((p) => [p.value, p]));
+const STATE_LABEL = {
+    pending: "Pending",
+    rendered: "Rendered",
+    qualified: "Qualified",
+    failed: "Failed",
+};
+const STATE_TONE = {
+    pending: "neutral",
+    rendered: "accent",
+    qualified: "ok",
+    failed: "bad",
+};
+/** Timeline key for the main timeline; saved variants use their own names. */
+const MAIN = "";
+/** Ties the changed-settings notice to the Run button that a run will be refused by. */
+const DRIFT_NOTICE_ID = "batch-drift-notice";
+/** Ties the all-delivered reason to the Run button that is disabled by it. */
+const DELIVERED_REASON_ID = "batch-delivered-reason";
+const DELIVERED_REASON = "Every output is delivered and the finishing settings are unchanged, so there is nothing to run.";
+function isBatchState(v) {
+    return v === "pending" || v === "rendered" || v === "qualified" || v === "failed";
+}
+/** Engine names that do not read as words once their underscores are spaces. */
+const SETTING_WORDS = {
+    lut_blake3: "LUT file contents",
+    lut_path: "LUT file",
+    caption_style_in_force: "caption style in use",
+    burn_in_force: "burned captions",
+    grade_by_source: "per-source grade",
+};
+const settingWords = (key) => SETTING_WORDS[key] ?? key.replace(/_/g, " ");
+/** The drift a status reply reports; null when the batch matches or was made before pinning. */
+function driftOf(status) {
+    return status.finishing_matches === false ? { id: status.id, differs: status.finishing_differs } : null;
+}
+function asCover(v) {
+    if (!v || typeof v !== "object")
+        return null;
+    const c = v;
+    return typeof c.path === "string" && typeof c.at_ms === "number" && typeof c.blake3 === "string"
+        ? { at_ms: c.at_ms, path: c.path, blake3: c.blake3 }
+        : null;
+}
+function withItem(set, item, on) {
+    const next = new Set(set);
+    if (on)
+        next.add(item);
+    else
+        next.delete(item);
+    return next;
+}
+function patchRow(doc, key, patch) {
+    return { ...doc, outputs: doc.outputs.map((o) => (o.key === key ? { ...o, ...patch } : o)) };
+}
+function applyRunOutputs(doc, outs) {
+    return outs.reduce((acc, o) => patchRow(acc, o.key, { state: o.state, output: o.output, cover: o.cover, error: o.error }), doc);
+}
+/** Batch panel on the Exports screen: build the output list, run it, resume it, and pick covers. */
+/** A project-relative path as an absolute one, in the project folder's own separator style. */
+function projectFile(dir, relative) {
+    const sep = dir.includes("\\") ? "\\" : "/";
+    return `${dir.replace(/[\\/]+$/, "")}${sep}${relative.split("/").join(sep)}`;
+}
+export function BatchDelivery({ dir }) {
+    const toast = useToast();
+    const [variants, setVariants] = useState([]);
+    const [presets, setPresets] = useState(new Set(["youtube"]));
+    const [timelines, setTimelines] = useState(new Set([MAIN]));
+    const [batches, setBatches] = useState([]);
+    const [batchId, setBatchId] = useState("");
+    const [doc, setDoc] = useState(null);
+    const [coverAt, setCoverAt] = useState({});
+    const [creating, setCreating] = useState(false);
+    const [running, setRunning] = useState(null); // job id
+    const [summary, setSummary] = useState(null);
+    const [error, setError] = useState(null);
+    const [drift, setDrift] = useState(null);
+    const [compareError, setCompareError] = useState(null);
+    const [statusReads, setStatusReads] = useState(0);
+    const runTag = useRef(null);
+    const selectedId = useRef("");
+    // Each read takes a number; only the newest read may write the panel, so a slow older reply
+    // cannot clear a drift or compare notice that a newer read has raised.
+    const readSeq = useRef(0);
+    const refreshList = useCallback(async () => {
+        const [list, vars] = await Promise.all([batchList(dir), variantsList(dir)]);
+        setBatches(list.batches);
+        setVariants(vars.variants.filter((v) => !v.error).map((v) => v.name));
+    }, [dir]);
+    // Re-reads a batch's status; a reply for a batch that is no longer the selected one is dropped.
+    // While a read is in flight the finishing settings are unverified, so Run waits for it. A read
+    // that fails leaves them unverified too: the batch's comparison is then reported as unavailable
+    // and Run stays disabled until a later read succeeds.
+    const loadStatus = useCallback((id) => {
+        const seq = ++readSeq.current;
+        setStatusReads((n) => n + 1);
+        return batchStatus(dir, id)
+            .then((d) => {
+            if (selectedId.current !== id || seq !== readSeq.current)
+                return;
+            setDoc(d);
+            setDrift(driftOf(d));
+            setCompareError(d.finishing_error ? { id: d.id, message: d.finishing_error } : null);
+        }, (e) => {
+            if (selectedId.current === id && seq === readSeq.current) {
+                setDrift(null);
+                setCompareError({ id, message: `the batch could not be re-read (${errorMessage(e)})` });
+            }
+            throw e;
+        })
+            .finally(() => setStatusReads((n) => n - 1));
+    }, [dir]);
+    // A different project starts with no batch selected.
+    useEffect(() => {
+        selectedId.current = "";
+        setBatchId("");
+        setDoc(null);
+        setSummary(null);
+        setError(null);
+        setDrift(null);
+        setCompareError(null);
+    }, [dir]);
+    useEffect(() => {
+        refreshList().catch((e) => setError(errorMessage(e)));
+    }, [refreshList]);
+    // Finishing settings can change elsewhere in the app, so the selected batch's status is re-read when the panel is visible again.
+    useEffect(() => {
+        const refresh = () => {
+            if (selectedId.current)
+                void loadStatus(selectedId.current).catch(() => undefined);
+        };
+        const onVisibility = () => {
+            if (document.visibilityState === "visible")
+                refresh();
+        };
+        window.addEventListener("focus", refresh);
+        document.addEventListener("visibilitychange", onVisibility);
+        refresh(); // a batch already selected when the panel mounts
+        return () => {
+            window.removeEventListener("focus", refresh);
+            document.removeEventListener("visibilitychange", onVisibility);
+        };
+    }, [loadStatus]);
+    // Finishing settings saved in another view (Settings, Auto edit, the colour inspector) change
+    // what this batch compares against. The re-read raises statusReads, so Run stays disabled
+    // until it lands. A save to a different project is ignored.
+    useEffect(() => {
+        const onSettingsChanged = (e) => {
+            const savedDir = e.detail?.dir;
+            if (savedDir !== undefined && savedDir !== dir)
+                return;
+            if (selectedId.current)
+                void loadStatus(selectedId.current).catch(() => undefined);
+        };
+        window.addEventListener(SETTINGS_CHANGED, onSettingsChanged);
+        return () => window.removeEventListener(SETTINGS_CHANGED, onSettingsChanged);
+    }, [dir, loadStatus]);
+    // batch.output progress for this panel's own run only (frames are matched by the run's tag).
+    useEffect(() => {
+        let off;
+        let dead = false;
+        void onEngineEvent((frame) => {
+            const tag = runTag.current;
+            if (!tag || frame.tag !== tag)
+                return;
+            const ev = frame.event;
+            if (ev.event !== "batch.output")
+                return;
+            const key = typeof ev.key === "string" ? ev.key : undefined;
+            const state = ev.state;
+            if (key === undefined || !isBatchState(state))
+                return;
+            const patch = { state };
+            if (ev.output !== undefined)
+                patch.output = typeof ev.output === "string" ? ev.output : null;
+            if (ev.cover !== undefined)
+                patch.cover = asCover(ev.cover);
+            if (ev.error !== undefined)
+                patch.error = typeof ev.error === "string" ? ev.error : null;
+            if (typeof ev.attempts === "number")
+                patch.attempts = ev.attempts;
+            setDoc((d) => (d ? patchRow(d, key, patch) : d));
+        }).then((fn) => {
+            if (dead)
+                fn();
+            else
+                off = fn;
+        });
+        return () => {
+            dead = true;
+            off?.();
+        };
+    }, []);
+    // The cross product of the chosen timelines and presets is the output list.
+    const timelineOptions = [MAIN, ...variants];
+    const planned = timelineOptions
+        .filter((t) => timelines.has(t))
+        .flatMap((t) => PRESETS.filter((p) => presets.has(p.value)).map((p) => ({
+        variant: t === MAIN ? undefined : t,
+        preset: p.value,
+        label: `${t === MAIN ? "Main timeline" : t} · ${p.label}`,
+    })));
+    const create = () => {
+        setCreating(true);
+        setError(null);
+        setSummary(null);
+        void batchCreate(dir, planned.map(({ variant, preset }) => ({ variant, preset })))
+            .then(async (created) => {
+            selectedId.current = created.id;
+            setDoc(created);
+            setDrift(null);
+            setCompareError(null);
+            setBatchId(created.id);
+            toast(`Batch ${created.id} created`, { kind: "success" });
+            await refreshList();
+        })
+            .catch((e) => setError(errorMessage(e)))
+            .finally(() => setCreating(false));
+    };
+    const choose = (id) => {
+        selectedId.current = id;
+        setBatchId(id);
+        setDoc(null);
+        setSummary(null);
+        setError(null);
+        setDrift(null);
+        setCompareError(null);
+        if (!id)
+            return;
+        void loadStatus(id).catch((e) => setError(errorMessage(e)));
+    };
+    const outputs = doc?.outputs ?? [];
+    const driftShown = drift !== null && drift.id === doc?.id;
+    const qualified = outputs.filter((o) => o.state === "qualified").length;
+    const left = outputs.length - qualified;
+    // A fully delivered batch whose settings changed is not "All delivered": its way forward is the re-render.
+    const fullyDelivered = outputs.length > 0 && left === 0;
+    const runLabel = doc === null
+        ? "Run"
+        : fullyDelivered
+            ? driftShown
+                ? "Run"
+                : "All delivered"
+            : qualified === 0
+                ? "Run"
+                : `Resume (${left} left)`;
+    // The engine refuses a plain run while the settings differ, so Run waits for the re-render button.
+    // Run also waits while a settings read is in flight, and while this batch's settings cannot be compared.
+    const compareShown = compareError !== null && compareError.id === doc?.id;
+    const canRun = doc !== null && left > 0 && running === null && !driftShown && statusReads === 0 && !compareShown;
+    // Run is disabled with a stated reason when every output is delivered and the settings match.
+    const deliveredReason = fullyDelivered && !driftShown && !compareShown ? DELIVERED_REASON : null;
+    // `finishing: "current"` re-pins the batch to the current settings and renders every output again.
+    const run = (finishing) => {
+        if (!doc)
+            return;
+        const id = doc.id;
+        const job = `batch-ui-${Date.now().toString(36)}`;
+        const tag = `batch-${job}`;
+        runTag.current = tag;
+        setRunning(job);
+        setError(null);
+        setSummary(null);
+        void batchRun(dir, id, job, tag, finishing)
+            .then((result) => {
+            setDoc((d) => (d && d.id === id ? applyRunOutputs(d, result.outputs) : d));
+            const pin = result.finishing?.action === "repinned"
+                ? " · re-pinned to current settings"
+                : result.finishing?.action === "pinned"
+                    ? " · pinned to current settings"
+                    : "";
+            setSummary(`Rendered ${result.ran.length}, kept ${result.skipped.length}${result.status === "partial" ? " · partial, run again to finish" : ""}${pin}`);
+        })
+            .catch((e) => {
+            const code = errorCode(e);
+            setError(code === "cancelled" || code === "render_cancelled"
+                ? "Cancelled — run again to resume where it stopped."
+                : errorMessage(e));
+        })
+            .finally(() => {
+            runTag.current = null;
+            setRunning(null);
+            // A refused run (settings changed) leaves nothing rendered; this fresh status is what shows the notice.
+            void loadStatus(id).catch(() => undefined);
+            void refreshList().catch(() => undefined);
+        });
+    };
+    const cancel = () => {
+        if (running === null)
+            return;
+        void recipeCancel(running).catch((e) => setError(errorMessage(e)));
+    };
+    const setCover = (row) => {
+        if (!doc)
+            return;
+        const raw = (coverAt[row.key] ?? "0").trim();
+        const sec = Number(raw);
+        if (raw === "" || !Number.isFinite(sec) || sec < 0) {
+            setError(`Enter a cover time in seconds (0 or more) for ${row.key}.`);
+            return;
+        }
+        const id = doc.id;
+        setError(null);
+        void batchCover(dir, id, row.key, Math.round(sec * 1000))
+            .then((res) => setDoc((d) => (d && d.id === id ? patchRow(d, row.key, res) : d)))
+            .catch((e) => setError(errorMessage(e)));
+    };
+    return (_jsxs("section", { className: "batch-delivery", "data-testid": "batch-delivery", "aria-label": "Batch delivery", children: [_jsx("h2", { className: "panel-title", children: "Batch delivery" }), _jsxs("div", { className: "panel-stack", children: [_jsx("span", { className: "cr-overline", children: "Presets" }), _jsx("div", { className: "batch-checks", role: "group", "aria-label": "Presets", children: PRESETS.map((p) => (_jsx(Checkbox, { checked: presets.has(p.value), onChange: (checked) => setPresets((s) => withItem(s, p.value, checked)), label: p.label }, p.value))) }), _jsx("span", { className: "cr-overline", children: "Timelines" }), _jsx("div", { className: "batch-checks", role: "group", "aria-label": "Timelines", children: timelineOptions.map((t) => (_jsx(Checkbox, { checked: timelines.has(t), onChange: (checked) => setTimelines((s) => withItem(s, t, checked)), label: t === MAIN ? "Main" : t }, t || "main"))) }), planned.length > 0 ? (_jsx("ul", { className: "batch-plan", "aria-label": "Outputs to create", children: planned.map((p) => (_jsx("li", { children: p.label }, p.label))) })) : (_jsx("p", { className: "panel-note", children: "Pick at least one preset and one timeline." })), _jsx("div", { className: "panel-row", children: _jsx(Button, { variant: "secondary", size: "sm", "data-testid": "batch-create", onClick: create, disabled: (planned.length === 0 || creating || running !== null) || (creating), "aria-busy": (creating) || undefined, children: creating ? "Creating…" : "Create batch" }) })] }), _jsxs("div", { className: "panel-stack", children: [_jsx(Field, { label: "Batch", children: (ids) => (_jsxs("select", { ...ids, className: "rk-input cr-select", "data-testid": "batch-select", value: batchId, onChange: (e) => choose(e.target.value), children: [_jsx("option", { value: "", children: batches.length === 0 ? "No batches yet" : "Choose a batch…" }), batches.map((b) => (_jsx("option", { value: b.id, children: b.id }, b.id)))] })) }), compareError && compareError.id === doc?.id && (_jsxs("p", { className: "panel-note", role: "status", "data-testid": "batch-compare-error", children: ["Could not compare this batch with the current finishing settings: ", compareError.message] })), driftShown && drift && (_jsxs("div", { role: "alert", id: DRIFT_NOTICE_ID, className: "panel-stack", "data-testid": "batch-drift", children: [_jsxs("p", { className: "panel-error", children: ["Finishing settings changed since this batch was created:", " ", drift.differs.length > 0
+                                        ? drift.differs.map(settingWords).join(", ")
+                                        : "an unreported setting", "."] }), _jsx("p", { className: "panel-note", children: "Outputs already delivered would no longer match the rest. Restore the settings, or re-render every output with the current ones." }), _jsx("div", { className: "panel-row", children: _jsx(Button, { variant: "secondary", size: "sm", "data-testid": "batch-rerender", disabled: outputs.length === 0 || running !== null, onClick: () => run("current"), children: "Re-render all with current settings" }) })] })), _jsxs("div", { className: "panel-row", children: [_jsxs(Button, { variant: "primary", size: "sm", "data-testid": "batch-run", "aria-describedby": driftShown ? DRIFT_NOTICE_ID : deliveredReason ? DELIVERED_REASON_ID : undefined, title: driftShown
+                                    ? "Finishing settings changed: re-render all with current settings instead"
+                                    : (deliveredReason ?? undefined), onClick: () => run(), disabled: (!canRun) || (running !== null), "aria-busy": (running !== null) || undefined, children: [!(running !== null) && _jsx(Icon, { name: "play" }), running !== null ? "Running…" : runLabel] }), running !== null && (_jsx(Button, { variant: "secondary", size: "sm", "data-testid": "batch-cancel", onClick: cancel, children: "Cancel" }))] }), deliveredReason && (_jsx("p", { className: "panel-note", id: DELIVERED_REASON_ID, "data-testid": "batch-delivered-reason", children: deliveredReason })), summary && (_jsx("p", { className: "panel-note", role: "status", "data-testid": "batch-summary", children: summary })), error && (_jsx("p", { role: "alert", className: "panel-error", "data-testid": "batch-error", children: error })), doc === null ? (_jsx("p", { className: "panel-note", children: batchId ? "Loading batch…" : "Create a batch or choose one to see its outputs." })) : outputs.length === 0 ? (_jsx("p", { className: "panel-note", children: "This batch has no outputs." })) : (_jsx("div", { className: "batch-table-wrap", children: _jsxs(Table, { className: "batch-table", label: "Batch outputs", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Output" }), _jsx(TableHeaderCell, { children: "Preset" }), _jsx(TableHeaderCell, { children: "State" }), _jsx(TableHeaderCell, { children: "Attempts" }), _jsx(TableHeaderCell, { children: "Cover" }), _jsx(TableHeaderCell, { children: "Choose cover" })] }) }), _jsx(TableBody, { children: outputs.map((row) => {
+                                        const shape = PRESET_BY_ID[row.preset]?.shape ?? "wide";
+                                        return (_jsxs(TableRow, { "data-testid": `batch-row-${row.key}`, children: [_jsx(TableCell, { children: _jsx("span", { className: "cr-mono", children: row.key }) }), _jsx(TableCell, { children: PRESET_BY_ID[row.preset]?.label ?? row.preset }), _jsxs(TableCell, { children: [_jsx("span", { "data-testid": `batch-state-${row.key}`, children: _jsx(Badge, { tone: STATE_TONE[row.state], children: STATE_LABEL[row.state] }) }), row.error && _jsx("p", { className: "batch-table__error", children: row.error })] }), _jsx(TableCell, { className: "cr-mono", children: row.attempts }), _jsx(TableCell, { children: row.cover ? (_jsx("img", { className: `batch-cover batch-cover--${shape}`, src: assetUrl(projectFile(dir, row.cover.path)) + `?v=${row.cover.blake3}`, alt: `Cover for ${row.key}`, "data-testid": `batch-cover-${row.key}`, loading: "lazy", draggable: false })) : (_jsx("span", { className: "panel-note", children: "None yet" })) }), _jsx(TableCell, { children: _jsxs("div", { className: "batch-cover-set", children: [_jsx(Input, { type: "number", className: "batch-cover-input", min: 0, step: 0.1, "aria-label": `Cover time for ${row.key} in seconds`, "data-testid": `batch-cover-input-${row.key}`, value: coverAt[row.key] ?? "0", disabled: !row.output, onChange: (e) => setCoverAt((m) => ({ ...m, [row.key]: e.target.value })) }), _jsx(Button, { size: "sm", variant: "ghost", "data-testid": `batch-cover-set-${row.key}`, disabled: !row.output || running !== null, onClick: () => setCover(row), children: "Set cover" })] }) })] }, row.key));
+                                    }) })] }) }))] })] }));
+}

package/dist/views/BundleExport.d.ts

@@ -0,0 +1,3 @@
+export declare function BundleExport({ dir }: {
+    dir: string;
+}): import("react").JSX.Element;

package/dist/views/BundleExport.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Portable bundle — write this project to a folder that can be imported elsewhere (bundle.export).
+import { Button, useToast } from "@rightkit/react-shell/react";
+import { useEffect, useState } from "react";
+import { pickFolder } from "../lib/dialog.js";
+import { errorMessage, onEngineEvent, revealPath } from "../lib/engine.js";
+import { bundleExport } from "../lib/media.js";
+import { baseName } from "../lib/project.js";
+import { ProgressRow, fileSize, Icon } from "../ui/index.js";
+const TAG = "bundle-export";
+const MEDIA_CHOICES = [
+    { value: "collected", label: "Include media", note: "Copies every source file into the bundle." },
+    {
+        value: "referenced",
+        label: "Reference media in place",
+        note: "Lists each source by its current path; nothing is copied.",
+    },
+];
+export function BundleExport({ dir }) {
+    const toast = useToast();
+    const [media, setMedia] = useState("collected");
+    const [folder, setFolder] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [progress, setProgress] = useState(null);
+    const [error, setError] = useState(null);
+    const [result, setResult] = useState(null);
+    // Write-stage progress for this call only (frames carry the caller's tag).
+    useEffect(() => {
+        let off;
+        let dead = false;
+        void onEngineEvent((frame) => {
+            if (frame.tag !== TAG)
+                return;
+            const ev = frame.event;
+            if (ev.event === "bundle.progress" && typeof ev.completed === "number" && typeof ev.total === "number") {
+                setProgress({ completed: ev.completed, total: ev.total });
+            }
+        }).then((fn) => {
+            if (dead)
+                fn();
+            else
+                off = fn;
+        });
+        return () => {
+            dead = true;
+            off?.();
+        };
+    }, []);
+    const choose = () => {
+        // The engine writes the bundle into this folder itself, so it must be empty or new.
+        pickFolder("Choose an empty folder for the bundle")
+            .then((picked) => {
+            if (!picked)
+                return;
+            setFolder(picked);
+            setResult(null);
+            setError(null);
+        })
+            .catch((e) => setError(errorMessage(e)));
+    };
+    const run = () => {
+        if (!folder)
+            return;
+        setBusy(true);
+        setError(null);
+        setResult(null);
+        setProgress(null);
+        void bundleExport(dir, { out: folder, media }, TAG)
+            .then(setResult)
+            .catch((e) => setError(errorMessage(e)))
+            .finally(() => {
+            setBusy(false);
+            setProgress(null);
+        });
+    };
+    const choice = MEDIA_CHOICES.find((c) => c.value === media) ?? MEDIA_CHOICES[0];
+    return (_jsxs("section", { className: "bundle-export", "aria-label": "Portable bundle", children: [_jsx("h2", { className: "panel-title", children: "Portable bundle" }), _jsx("p", { className: "panel-note", children: "Write this project to a folder you can import on another computer." }), _jsxs("div", { className: "panel-stack", children: [_jsx("div", { className: "batch-checks", role: "radiogroup", "aria-label": "Media", children: MEDIA_CHOICES.map((c) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: "bundle-media", value: c.value, checked: media === c.value, disabled: busy, onChange: () => {
+                                        setMedia(c.value);
+                                        setResult(null);
+                                    } }), c.label] }, c.value))) }), _jsx("p", { className: "panel-note", children: choice.note }), _jsxs("div", { className: "panel-row", children: [_jsxs(Button, { variant: "secondary", size: "sm", onClick: choose, disabled: busy, children: [_jsx(Icon, { name: "folder-open" }), "Choose folder\u2026"] }), folder && (_jsx("span", { className: "cr-mono cr-clamp-1 bundle-export__path", title: folder, children: folder }))] }), _jsx("div", { className: "panel-row", children: _jsx(Button, { variant: "primary", size: "sm", onClick: run, disabled: (!folder || busy) || (busy), "aria-busy": (busy) || undefined, children: busy ? "Exporting…" : "Export bundle" }) }), busy && (_jsx(ProgressRow, { label: "Bundle", status: progress ? `${progress.completed} of ${progress.total} files` : "Preparing", fraction: progress && progress.total > 0 ? progress.completed / progress.total : undefined })), error && (_jsx("p", { role: "alert", className: "bundle-export__error", children: error })), result && (_jsxs("div", { className: "bundle-export__result", children: [_jsxs("p", { role: "status", className: "panel-note", children: ["Bundle written to ", _jsx("span", { className: "cr-mono bundle-export__path", children: result.out })] }), _jsxs("p", { className: "panel-note", children: [result.members, " files, ", fileSize(result.bytes), ", plus bundle.json"] }), result.external.length > 0 && (_jsxs("div", { className: "bundle-export__external", children: [_jsx("span", { className: "cr-overline", children: "Not in the bundle" }), _jsx("ul", { children: result.external.map((e) => (_jsxs("li", { title: e.path, children: [e.name ?? baseName(e.path), _jsx("span", { className: "cr-muted", children: e.kind === "asset" ? " · missing font or LUT" : " · referenced in place" })] }, `${e.kind}:${e.path}`))) })] })), _jsx("div", { className: "panel-row", children: _jsxs(Button, { size: "sm", variant: "ghost", onClick: () => void revealPath(result.out).catch((e) => toast(errorMessage(e), { kind: "error", ttl: 0 })), children: [_jsx(Icon, { name: "folder-open" }), "Reveal bundle"] }) })] }))] })] }));
+}

package/dist/views/Exports.css

@@ -0,0 +1,117 @@
+/* Exports — docs/design/app-ui.md §3.5 */
+
+.exports-body { display: flex; flex-direction: column; gap: var(--s5); }
+
+.exports-queue {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+  padding: var(--s4);
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-lg);
+}
+.exports-queue__row {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+}
+.exports-queue__row .cr-progress { flex: 1; min-width: 0; }
+
+.exports-preview {
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-lg);
+  padding: var(--s4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+}
+.exports-preview__head { display: flex; align-items: center; justify-content: space-between; }
+
+.exports-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--s4);
+}
+.exports-card {
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-lg);
+  padding: var(--s3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+  min-width: 0;
+}
+.exports-card__thumb { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
+.exports-card__name { font: 500 13px/1.3 var(--rk-font-body); }
+.exports-card__meta { font-size: 12px; }
+.exports-card__row { display: flex; align-items: center; gap: var(--s2); }
+.exports-card__spacer { flex: 1; }
+.exports-lufs { font: 11px/1 var(--rk-font-mono); color: var(--rk-ink-2); font-variant-numeric: tabular-nums; }
+
+.exports-docs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+}
+.exports-doc {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+  padding: var(--s2) var(--s3);
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-md);
+  font-size: 13px;
+}
+.exports-doc > span:first-of-type { flex: 1; min-width: 0; }
+.exports-doc svg { color: var(--rk-ink-2); flex: none; }
+
+/* Export drawer */
+.exports-format {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s3);
+  padding: var(--s3);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-md);
+  cursor: pointer;
+}
+.exports-format:hover { border-color: var(--rk-ink-3); }
+.exports-format--off { opacity: 0.6; cursor: default; }
+.exports-format__body { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
+.exports-format__title { font: 500 13px/1.3 var(--rk-font-body); }
+.exports-format__title .cr-muted { font-weight: 400; font-size: 12px; }
+
+/* Package form (package.build) */
+.exports-package {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+  padding: var(--s3);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-md);
+}
+.exports-package__head { display: flex; align-items: center; justify-content: space-between; }
+.exports-package__actions { display: flex; align-items: center; gap: var(--s2); }
+.exports-package__result { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
+.exports-package__error { margin: 0; font-size: 13px; color: var(--rk-bad); }
+
+/* Portable bundle (bundle.export) — panel matches .batch-delivery */
+.bundle-export {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s4);
+  min-width: 0;
+  padding: var(--s4);
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-lg);
+}
+.bundle-export__path { min-width: 0; max-width: 100%; font-size: 12px; overflow-wrap: anywhere; }
+.bundle-export__result { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
+.bundle-export__result .panel-note { overflow-wrap: anywhere; }
+.bundle-export__external ul { margin: var(--s1) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s1); font-size: 13px; }
+.bundle-export__error { margin: 0; font-size: 13px; color: var(--rk-bad); }

package/dist/views/ExportsView.d.ts

@@ -0,0 +1,12 @@
+import type { ProgressState } from "../hooks/useProgress.js";
+type Preset = "youtube" | "reels" | "tiktok" | "square";
+export declare function ExportsView({ dir, progress, rendering, onRender, onChanged, onImportRetention, }: {
+    dir: string;
+    progress?: ProgressState;
+    rendering?: boolean;
+    outputPath?: string | null;
+    onRender?: (preset: Preset) => void;
+    onChanged: () => Promise<void>;
+    onImportRetention?: (render: string) => void;
+}): import("react").JSX.Element;
+export {};