@rightkit/video-ui 0.0.0-stage → 0.1.0

package/dist/views/ExportsView.js

@@ -0,0 +1,354 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Exports — docs/design/app-ui.md §3.5.
+import { Badge, Button, Checkbox, ContextMenu, EmptyState, Field, IconButton, Input, PageShell, Popover, Select, useToast } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { engineCall, errorMessage, onEngineEvent, revealPath } from "../lib/engine.js";
+import { exportFcpxml, exportOtio, qaList, qaRun, framingApproval, framingLabel, packageBuild, reframeShow, rendersDelete, rendersList, settingsGet, sourceList, thumbnails, } from "../lib/media.js";
+import { assetUrl } from "../lib/asset.js";
+import { projectShow } from "../lib/project.js";
+import { MediaPlayer } from "@rightkit/media-ui";
+import { isPlayable, mediaKind, useMediaPlaybackId } from "../lib/mediaAdapters.js";
+import { Drawer, ErrorPanel, Icon, ProgressRow, Thumbnail, fileSize, timecode } from "../ui/index.js";
+import { BatchDelivery } from "./BatchDelivery.js";
+import { BundleExport } from "./BundleExport.js";
+/** Recipe aspect chips (Edit recipe → Format) → export presets. */
+const RECIPE_PRESET = { "16:9": "youtube", "9:16": "reels", "1:1": "square" };
+const FORMATS = [
+    { preset: "youtube", title: "YouTube 16:9", sub: "1080p", aspect: "16 / 9", vertical: false, supported: true },
+    {
+        preset: "reels",
+        title: "Shorts / Reels / TikTok",
+        sub: "9:16",
+        aspect: "9 / 16",
+        vertical: true,
+        supported: true,
+    },
+    { preset: "square", title: "Square", sub: "1:1", aspect: "1 / 1", vertical: true, supported: true },
+];
+const PRESET_ASPECT = { youtube: "16 / 9", reels: "9 / 16", tiktok: "9 / 16", square: "1 / 1" };
+/** Cached JPEG from `media.thumbnail` for a render (or a source range). */
+function useThumb(dir, target, atMs) {
+    const [src, setSrc] = useState();
+    const key = "render" in target ? `r:${target.render}` : `s:${target.source}:${atMs ?? ""}`;
+    useEffect(() => {
+        let cancelled = false;
+        setSrc(undefined);
+        thumbnails(dir, target, atMs != null ? { at_ms: atMs, width: 480 } : { width: 480 })
+            .then((r) => !cancelled && setSrc(r.frames[0] ? assetUrl(r.frames[0].path) : undefined))
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- key captures target
+    }, [dir, key]);
+    return src;
+}
+function RenderThumb({ dir, render, aspect }) {
+    const src = useThumb(dir, { render });
+    return _jsx(Thumbnail, { src: src, aspect: aspect });
+}
+/** ⋯ menu per export card. */
+function CardMenu({ onCopy, onDelete, onImportRetention, }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    return (_jsxs("div", { className: "exports-menu", children: [_jsx(IconButton, { ref: ref, label: "More actions", onClick: () => setOpen((v) => !v), children: _jsx(Icon, { name: "more-horizontal" }) }), open && ref.current && (_jsx(ContextMenu, { anchor: ref.current, placement: "top-end", label: "Export actions", width: 160, className: "exports-menu__pop", itemAs: "button", keyboard: "escape-only", autoFocus: false, onClose: () => setOpen(false), items: [
+                    { id: "copy", label: "Copy path", icon: _jsx(Icon, { name: "copy" }), run: () => { setOpen(false); onCopy(); } },
+                    { id: "retention", label: "Import retention…", icon: _jsx(Icon, { name: "chart-line" }), disabled: !onImportRetention, run: () => { setOpen(false); onImportRetention?.(); } },
+                    { id: "delete", label: "Delete export", icon: _jsx(Icon, { name: "trash-2" }), danger: true, run: () => { setOpen(false); onDelete(); } },
+                ], renderItem: (item) => (_jsxs("span", { title: item.id === "retention" && item.disabled ? "Retention screen routing pending" : undefined, children: [item.icon, " ", item.label] })) }))] }));
+}
+/** Key for a render's QA result in `qaByHash`: its output hash when recorded, else its file name.
+ *  Used by both the store (`runQa`) and the lookup (the export card). */
+const qaKey = (r) => r.record?.output_blake3 ?? r.name;
+/** QA chip + issues popover (§3.5). */
+function QaChip({ report, running, onRun }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    if (!report) {
+        return (_jsx(Button, { variant: "ghost", size: "sm", className: "cr-chip-btn", onClick: onRun, title: "Run QA checks on this export", children: _jsx(Badge, { tone: "neutral", children: running ? "Checking…" : "Run QA" }) }));
+    }
+    const ok = report.status === "pass" && report.issues === 0;
+    const failed = (report.checks ?? []).filter((c) => c.status !== "pass");
+    return (_jsxs("div", { className: "exports-menu", children: [_jsx(Button, { variant: "ghost", size: "sm", ref: ref, className: "cr-chip-btn", onClick: () => setOpen((v) => !v), children: _jsx(Badge, { tone: ok ? "ok" : "warn", children: ok ? "QA passed" : `${report.issues} issues` }) }), open && (_jsxs(Popover, { anchor: ref.current, placement: "top-start", width: 280, label: "Export QA checks", className: "exports-qa__pop", onClose: () => setOpen(false), children: [failed.length === 0 ? (_jsx("p", { className: "cr-muted", children: "All checks passed." })) : (_jsx("ul", { children: failed.map((c, i) => (_jsxs("li", { children: [_jsx("span", { className: "cr-mono cr-muted", children: c.id }), c.detail ? ` — ${c.detail}` : ""] }, c.id ?? i))) })), _jsx(Button, { size: "sm", variant: "ghost", onClick: onRun, disabled: (running), "aria-busy": (running) || undefined, children: running ? "Running QA…" : "Re-run QA" })] }))] }));
+}
+const PACKAGE_PLATFORMS = [
+    { value: "youtube", label: "YouTube" },
+    { value: "shorts", label: "YouTube Shorts" },
+    { value: "reels", label: "Reels" },
+    { value: "tiktok", label: "TikTok" },
+];
+/** Comma-separated tag input → the array `package.build` takes. */
+const splitTags = (text) => text
+    .split(",")
+    .map((t) => t.trim())
+    .filter(Boolean);
+/** Inline `package.build` form for one export: platform, title and optional copy. */
+function PackageForm({ dir, render, onClose }) {
+    const [platform, setPlatform] = useState("youtube");
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+    const [tags, setTags] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [folder, setFolder] = useState(null);
+    const submit = (e) => {
+        e.preventDefault();
+        if (!title.trim())
+            return;
+        setBusy(true);
+        setError(null);
+        setFolder(null);
+        void packageBuild(dir, {
+            platform,
+            render,
+            title: title.trim(),
+            description: description.trim(),
+            tags: splitTags(tags),
+        })
+            // The reply names the manifest inside the package folder; the folder is its parent.
+            .then((res) => setFolder(res.manifest.replace(/[\\/][^\\/]+$/, "")))
+            .catch((e) => {
+            const msg = errorMessage(e);
+            // Drop only the engine's `qa_failed:` / `qa_missing:` code and the whitespace after it.
+            const detail = msg.replace(/^qa_(?:failed|missing):\s*/, "");
+            setError(msg.startsWith("qa_failed:")
+                ? `This render has not passed QA — ${detail}`
+                : msg.startsWith("qa_missing:")
+                    ? `This render has not been checked yet; run QA first — ${detail}`
+                    : msg);
+        })
+            .finally(() => setBusy(false));
+    };
+    return (_jsxs("form", { className: "exports-package", onSubmit: submit, children: [_jsxs("div", { className: "exports-package__head", children: [_jsx("span", { className: "cr-overline", children: "Package" }), _jsx(IconButton, { label: "Close package form", onClick: onClose, children: _jsx(Icon, { name: "x" }) })] }), _jsx(Field, { label: "Platform", children: () => (_jsx(Select, { label: "Platform", value: platform, onChange: setPlatform, options: PACKAGE_PLATFORMS })) }), _jsx(Field, { label: "Title", children: (ids) => (_jsx(Input, { ...ids, value: title, onChange: (e) => setTitle(e.target.value), required: true })) }), _jsx(Field, { label: "Description", children: (ids) => (_jsx(Input, { ...ids, value: description, onChange: (e) => setDescription(e.target.value) })) }), _jsx(Field, { label: "Tags", note: "Separate with commas", children: (ids) => (_jsx(Input, { ...ids, value: tags, onChange: (e) => setTags(e.target.value) })) }), _jsxs("div", { className: "exports-package__actions", children: [_jsx(Button, { type: "submit", variant: "primary", size: "sm", disabled: (!title.trim()) || (busy), "aria-busy": (busy) || undefined, children: busy ? "Packaging…" : "Build package" }), folder && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => void revealPath(folder), children: "Reveal package" }))] }), folder && (_jsxs("p", { role: "status", className: "exports-package__result cr-muted", children: ["Packaged to ", _jsx("span", { className: "cr-mono", children: folder })] })), error && (_jsx("p", { role: "alert", className: "exports-package__error", children: error }))] }));
+}
+export function ExportsView({ dir, progress, rendering, onRender, onChanged, onImportRetention, }) {
+    const toast = useToast();
+    const [renders, setRenders] = useState(null);
+    const [qaByHash, setQaByHash] = useState({});
+    // QA results this session obtained through "Run QA"; the engine's reports win on lookup.
+    const [qaRan, setQaRan] = useState({});
+    const [sources, setSources] = useState([]);
+    const [error, setError] = useState(null);
+    const [preview, setPreview] = useState(null);
+    const previewPlaybackId = useMediaPlaybackId(preview);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [picked, setPicked] = useState(new Set(["youtube"]));
+    const [interchange, setInterchange] = useState(false);
+    const [framing, setFraming] = useState(new Map());
+    const [autoFraming, setAutoFraming] = useState(false);
+    const [show, setShow] = useState(null);
+    const [queue, setQueue] = useState([]);
+    const [busy, setBusy] = useState(null);
+    // Name of the export whose package form is open.
+    const [packaging, setPackaging] = useState(null);
+    const seq = useRef(0);
+    const tags = useRef(new Set());
+    const refresh = useCallback(async () => {
+        const [r, s, q, settings, project] = await Promise.all([
+            rendersList(dir),
+            sourceList(dir),
+            qaList(dir).catch(() => ({ reports: [] })),
+            settingsGet(dir),
+            projectShow(dir),
+        ]);
+        setShow(project);
+        setAutoFraming(framingApproval(settings) === "auto");
+        setRenders(r.renders);
+        setSources(s.sources);
+        setQaByHash(Object.fromEntries(q.reports.map((x) => [x.render_hash, x])));
+        // Keep session results only for renders still in the list (a deleted render's result goes).
+        const live = new Set(r.renders.flatMap((x) => [x.name, x.record?.output_blake3].filter((k) => !!k)));
+        setQaRan((m) => Object.fromEntries(Object.entries(m).filter(([k]) => live.has(k))));
+    }, [dir]);
+    useEffect(() => {
+        refresh().catch((e) => setError(errorMessage(e)));
+    }, [refresh]);
+    useEffect(() => {
+        if (progress?.done)
+            void refresh().catch(() => undefined);
+    }, [progress?.done, refresh]);
+    // Track render progress events for this view's own render calls.
+    useEffect(() => {
+        let off;
+        let dead = false;
+        void onEngineEvent((frame) => {
+            if (!frame.tag || !tags.current.has(frame.tag))
+                return;
+            const ev = frame.event;
+            if (ev.event === "progress" && typeof ev.job === "string") {
+                const frac = typeof ev.out_time_ms === "number" && typeof ev.total_ms === "number" && ev.total_ms > 0
+                    ? ev.out_time_ms / ev.total_ms
+                    : undefined;
+                setQueue((qs) => qs.map((j) => (j.job === ev.job ? { ...j, fraction: frac } : j)));
+            }
+        }).then((fn) => {
+            if (dead)
+                fn();
+            else
+                off = fn;
+        });
+        return () => {
+            dead = true;
+            off?.();
+        };
+    }, []);
+    // Framing status per source, loaded when the drawer opens (vertical/square).
+    useEffect(() => {
+        if (!drawerOpen)
+            return;
+        let cancelled = false;
+        void Promise.all(sources.flatMap((s) => ["9:16", "1:1"].map(async (aspect) => {
+            const key = `${s.id}:${aspect}`;
+            try {
+                return [key, await reframeShow(dir, s.id, aspect)];
+            }
+            catch {
+                return [key, undefined];
+            }
+        }))).then((rows) => !cancelled && setFraming(new Map(rows)));
+        return () => {
+            cancelled = true;
+        };
+    }, [drawerOpen, dir, sources]);
+    const mp4s = (renders ?? []).filter((r) => r.name.endsWith(".mp4"));
+    const docs = (renders ?? []).filter((r) => /\.(srt|vtt|fcpxml|otio|json)$/.test(r.name));
+    const runJob = async (j) => {
+        const tag = `exports-${j.job}`;
+        tags.current.add(tag);
+        setQueue((qs) => qs.map((x) => (x.job === j.job ? { ...x, status: "running" } : x)));
+        try {
+            await engineCall("render", { dir, preset: j.preset, job: j.job }, tag);
+            setQueue((qs) => qs.map((x) => (x.job === j.job ? { ...x, status: "done", fraction: 1 } : x)));
+        }
+        catch (e) {
+            const code = e?.code;
+            const cancelled = code === "cancelled" || code === "render_cancelled";
+            setQueue((qs) => qs.map((x) => x.job === j.job
+                ? { ...x, status: cancelled ? "cancelled" : "failed", error: cancelled ? undefined : errorMessage(e) }
+                : x));
+        }
+        finally {
+            tags.current.delete(tag);
+        }
+    };
+    // The drawer opens on the formats the recipe asks for; the user can still change them.
+    const openDrawer = () => {
+        setDrawerOpen(true);
+        settingsGet(dir)
+            .then((st) => {
+            setAutoFraming(framingApproval(st) === "auto");
+            const formats = st?.project?.recipe?.formats ?? [];
+            const presets = formats.map((f) => RECIPE_PRESET[f]).filter(Boolean);
+            if (presets.length)
+                setPicked(new Set(presets));
+        })
+            .catch(() => undefined);
+    };
+    const startExport = async () => {
+        const formats = FORMATS.filter((f) => f.supported && picked.has(f.preset));
+        if (formats.length === 0 && !interchange)
+            return;
+        setDrawerOpen(false);
+        const jobs = formats.map((f) => {
+            seq.current += 1;
+            return { job: `ui-x${seq.current}`, preset: f.preset, label: f.title, status: "queued" };
+        });
+        setQueue((qs) => [...qs.filter((j) => j.status === "queued" || j.status === "running"), ...jobs]);
+        for (const j of jobs) {
+            // Sequential: renders share the timeline and media workers.
+            // eslint-disable-next-line no-await-in-loop
+            await runJob(j);
+        }
+        if (interchange) {
+            try {
+                await exportFcpxml(dir);
+                await exportOtio(dir);
+            }
+            catch (e) {
+                toast(`Interchange export failed: ${errorMessage(e)}`, { kind: "error", ttl: 0 });
+            }
+        }
+        await refresh();
+        await onChanged();
+    };
+    const cancelJob = (job) => {
+        void engineCall("render.cancel", { job }).catch((e) => toast(errorMessage(e), { kind: "error", ttl: 0 }));
+        setQueue((qs) => qs.map((x) => (x.job === job && x.status === "queued" ? { ...x, status: "cancelled" } : x)));
+    };
+    const runQa = (r) => {
+        const tag = `qa-${r.name}`;
+        setBusy(tag);
+        void qaRun(dir, r.path)
+            .then((res) => {
+            const checks = res.report?.checks ?? [];
+            const issues = checks.filter((c) => c.status !== "pass").length;
+            const key = qaKey(r);
+            const row = { render_hash: key, status: res.status, issues, checks };
+            // The run's receipt carries the output hash the engine keys its report by (absent on a dry run).
+            const hash = res.receipt?.render_blake3;
+            setQaRan((m) => ({ ...m, [key]: row, ...(hash ? { [hash]: { ...row, render_hash: hash } } : {}) }));
+        })
+            .catch((e) => toast(errorMessage(e), { kind: "error", ttl: 0 }))
+            .finally(() => setBusy(null));
+    };
+    const del = (r) => {
+        setBusy(`del-${r.name}`);
+        void rendersDelete(dir, r.name)
+            .then(async () => {
+            toast(`Deleted ${r.name}`, { kind: "success" });
+            await refresh();
+        })
+            .catch((e) => toast(errorMessage(e), { kind: "error", ttl: 0 }))
+            .finally(() => setBusy(null));
+    };
+    const activeQueue = queue.filter((j) => j.status === "queued" || j.status === "running");
+    const finishedQueue = queue.filter((j) => j.status === "failed" || j.status === "cancelled");
+    void onRender; // shell-owned render path kept for signature compatibility
+    return (_jsxs(PageShell, { title: "Exports", actions: _jsxs(Button, { variant: "primary", onClick: openDrawer, disabled: sources.length === 0, children: [_jsx(Icon, { name: "download" }), "Export\u2026"] }), maxWidth: 0, subtitle: renders
+            ? `${mp4s.length} export${mp4s.length === 1 ? "" : "s"}`
+            : undefined, children: [_jsxs("div", { className: "exports-body", children: [error && _jsx(ErrorPanel, { title: "Exports failed to load", detail: error }), (activeQueue.length > 0 || finishedQueue.length > 0 || rendering) && (_jsxs("div", { className: "exports-queue", children: [_jsx("span", { className: "cr-overline", children: "Queue" }), queue.map((j) => (_jsxs("div", { className: "exports-queue__row", children: [_jsx(ProgressRow, { label: `Render ${j.label}`, status: j.status === "running"
+                                            ? "Rendering"
+                                            : j.status === "queued"
+                                                ? "Queued"
+                                                : j.status === "done"
+                                                    ? "Done"
+                                                    : j.status === "cancelled"
+                                                        ? "Cancelled"
+                                                        : "Failed", tone: j.status === "failed" ? "danger" : j.status === "done" ? "ok" : "info", fraction: j.status === "done" ? 1 : j.status === "failed" || j.status === "cancelled" ? null : j.fraction, error: j.error }), (j.status === "queued" || j.status === "running") && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => cancelJob(j.job), children: "Cancel" })), (j.status === "failed" || j.status === "cancelled" || j.status === "done") && (_jsx(IconButton, { label: "Dismiss", onClick: () => setQueue((qs) => qs.filter((x) => x.job !== j.job)), children: _jsx(Icon, { name: "x" }) }))] }, j.job)))] })), preview && (_jsxs("div", { className: "exports-preview", children: [_jsxs("div", { className: "exports-preview__head", children: [_jsx("span", { className: "cr-overline", children: "Playing" }), _jsx(IconButton, { label: "Close preview", onClick: () => setPreview(null), children: _jsx(Icon, { name: "x" }) })] }), _jsx(MediaPlayer, { src: preview, playbackId: previewPlaybackId, kind: mediaKind(preview), title: preview.split(/[\\/]/).pop(), autoPlay: true }, previewPlaybackId ?? "pending")] })), renders === null ? (_jsx(ProgressRow, { label: "Loading exports", status: "Loading", fraction: undefined })) : mp4s.length === 0 && docs.length === 0 ? (_jsx(EmptyState, { title: "No exports yet", action: _jsx(Button, { variant: "primary", onClick: openDrawer, children: "Export\u2026" }), icon: _jsx(Icon, { name: "download", width: 28, height: 28 }), children: "Render your finished edit to share it." })) : (_jsx("div", { className: "exports-grid", children: mp4s.map((r) => {
+                            const rec = r.record;
+                            const aspect = PRESET_ASPECT[rec?.preset ?? ""] ?? "16 / 9";
+                            const qa = qaByHash[qaKey(r)] ?? qaRan[qaKey(r)];
+                            const lufs = rec?.loudness?.after?.input_i ?? rec?.loudness?.measured?.input_i;
+                            const meta = [
+                                rec?.duration_ms != null ? timecode(rec.duration_ms) : null,
+                                rec?.preset === "reels" || rec?.preset === "tiktok" ? "9:16" : "16:9",
+                                fileSize(r.bytes),
+                                rec?.origin?.timeline_cursor != null ? `rev ${rec.origin.timeline_cursor}` : null,
+                            ]
+                                .filter(Boolean)
+                                .join(" · ");
+                            return (_jsxs("div", { className: "exports-card", children: [_jsx("button", { type: "button", className: "exports-card__thumb", "aria-label": `Play ${r.name}`, onClick: () => isPlayable(r.path) && setPreview(r.path), children: _jsx(RenderThumb, { dir: dir, render: r.name, aspect: aspect }) }), _jsx("div", { className: "exports-card__name cr-clamp-1", title: r.name, children: r.name }), _jsx("div", { className: "exports-card__meta cr-muted", children: meta }), _jsxs("div", { className: "exports-card__row", children: [_jsx(QaChip, { report: qa, running: busy === `qa-${r.name}`, onRun: () => runQa(r) }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Package ${r.name}`, "aria-expanded": packaging === r.name, onClick: () => setPackaging((n) => (n === r.name ? null : r.name)), children: "Package" }), lufs != null && Number.isFinite(lufs) && (_jsxs("span", { className: "exports-lufs", children: [lufs.toFixed(1), " LUFS"] })), _jsx("span", { className: "exports-card__spacer" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => void revealPath(r.path), children: "Reveal" }), _jsx(CardMenu, { onCopy: () => void navigator.clipboard.writeText(r.path).then(() => toast("Path copied", { kind: "success" })), onDelete: () => del(r), onImportRetention: onImportRetention ? () => onImportRetention(r.name) : undefined })] }), packaging === r.name && (_jsx(PackageForm, { dir: dir, render: r.name, onClose: () => setPackaging(null) }))] }, r.path));
+                        }) })), docs.length > 0 && (_jsxs("div", { className: "exports-docs", children: [_jsx("span", { className: "cr-overline", children: "Files" }), docs.map((d) => (_jsxs("div", { className: "exports-doc", children: [_jsx(Icon, { name: "captions" }), _jsx("span", { className: "cr-clamp-1", title: d.path, children: d.name }), _jsx("span", { className: "cr-mono cr-muted", children: fileSize(d.bytes) }), _jsx(IconButton, { label: "Reveal", onClick: () => void revealPath(d.path), children: _jsx(Icon, { name: "folder-open" }) })] }, d.path)))] })), _jsx(BatchDelivery, { dir: dir }), _jsx(BundleExport, { dir: dir })] }), _jsxs(Drawer, { title: "Export", open: drawerOpen, onClose: () => setDrawerOpen(false), footer: _jsxs(Button, { variant: "primary", disabled: picked.size === 0 && !interchange, onClick: () => void startExport(), children: ["Export ", picked.size > 0 ? picked.size : ""] }), children: [_jsx("span", { className: "cr-overline", children: "Formats" }), FORMATS.map((f) => {
+                        const on = picked.has(f.preset);
+                        const aspect = f.preset === "square" ? "1:1" : "9:16";
+                        const [aw, ah] = aspect.split(":").map(Number);
+                        const placed = new Set(show?.timeline.video_tracks.flatMap((t) => t.clips.map((c) => c.source)));
+                        const plans = (show?.timeline.sources ?? [])
+                            .filter((s) => placed.has(s.id) && s.video && Math.abs(s.video.width / s.video.height / (aw / ah) - 1) >= 0.05)
+                            .map((s) => framing.get(`${s.id}:${aspect}`));
+                        const approved = show !== null && plans.every((p) => p?.approved);
+                        const automatic = approved && plans.some((p) => p?.approval?.approver === "policy:auto");
+                        return (_jsx(Checkbox, { className: `exports-format ${f.supported ? "" : "exports-format--off"}`, checked: on && f.supported, disabled: !f.supported, onChange: (checked) => setPicked((s) => {
+                                const n = new Set(s);
+                                if (checked)
+                                    n.add(f.preset);
+                                else
+                                    n.delete(f.preset);
+                                return n;
+                            }), label: _jsxs("span", { className: "exports-format__body", children: [_jsxs("span", { className: "exports-format__title", children: [f.title, _jsxs("span", { className: "cr-muted", children: [" ", f.sub] })] }), !f.supported && (_jsx("span", { title: "Square output is not supported by the render engine yet", children: _jsx(Badge, { tone: "warn", children: "Not available" }) })), f.supported && f.vertical && (_jsx("span", { title: autoFraming && !approved
+                                            ? "Saved policy approves analysed framing during export"
+                                            : !approved
+                                                ? "Vertical exports need an approved reframe plan per source"
+                                                : "Framing approved for all sources", children: _jsx(Badge, { tone: approved || autoFraming ? "ok" : "warn", children: automatic ? "Approved automatically" : approved ? "Framing approved" : framingLabel(undefined, autoFraming) }) }))] }) }, f.preset));
+                    }), _jsx(Checkbox, { className: "exports-format", checked: interchange, onChange: setInterchange, label: _jsxs("span", { className: "exports-format__body", children: [_jsx("span", { className: "exports-format__title", children: "Also export for Resolve / Premiere" }), _jsx("span", { className: "cr-muted", children: "FCPXML, OTIO and captions next to the renders" })] }) })] })] }));
+}