@rightkit/video-ui 0.0.0-stage → 0.1.0

package/dist/views/AssetsView.js

@@ -0,0 +1,371 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Assets — docs/design/app-ui.md §3.7. Generated media library + the host app jobs.
+import { Badge, Button, EmptyState, Field, IconButton, Input, PageShell, SegmentedControl, Select, useToast } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { engineCall, errorMessage, revealPath } from "../lib/engine.js";
+import { captionsShow } from "../lib/media.js";
+import { genRightCallFailed, interpretAssetLibrary, interpretHost, interpretJobs, interpretRecover, placeModesFor, } from "../lib/genright.js";
+import { durationControl, formatUsd, ofKind, parseCatalog, pickModel } from "../lib/models.js";
+import { settingsSet } from "../lib/media.js";
+import { assetUrl } from "../lib/asset.js";
+import { pickFile } from "../lib/dialog.js";
+import { MediaPlayer } from "@rightkit/media-ui";
+import { ImageViewer } from "@rightkit/media-ui/image";
+import { useMediaPlaybackId } from "../lib/mediaAdapters.js";
+import { Drawer, ErrorPanel, Icon, ProgressRow, Thumbnail, fileSize } from "../ui/index.js";
+import { hostAppName } from "../appName.js";
+export function jobActionLabel(j) {
+    switch (j.state) {
+        case "queued":
+        case "running":
+            return "Cancel";
+        case "ready":
+            return "Import now";
+        case "failed":
+            return "Retry";
+        default:
+            return null;
+    }
+}
+const JOB_TONE = {
+    queued: "info",
+    running: "info",
+    ready: "ok",
+    done: "ok",
+    failed: "danger",
+    cancelled: "warn",
+    import_failed: "warn",
+    unknown: "warn",
+};
+const FILTERS = [
+    { value: "all", label: "All" },
+    { value: "broll", label: "B-roll" },
+    { value: "image", label: "Images" },
+    { value: "voice", label: "Voice" },
+    { value: "music", label: "Music" },
+    { value: "sfx", label: "SFX" },
+];
+function filterMatch(kind, f) {
+    if (f === "all")
+        return true;
+    const k = (kind ?? "").toLowerCase();
+    if (f === "image")
+        return k === "image" || k === "still";
+    if (f === "voice")
+        return k === "voice" || k === "narration";
+    if (f === "music")
+        return k === "music" || k === "song";
+    if (f === "sfx")
+        return k === "sfx" || k === "sound";
+    if (f === "broll")
+        return k === "broll" || k === "video";
+    return true;
+}
+const isAudio = (a) => /^audio\//.test(a.mime) || /\.(wav|mp3|m4a|flac|aac|ogg)$/i.test(a.path);
+const isImage = (a) => /^image\//.test(a.mime) || /\.(png|jpe?g|webp)$/i.test(a.path);
+const fullPath = (dir, a) => (a.path.startsWith("/") ? a.path : `${dir}/${a.path}`);
+/** Library tile: real image/video frame for visuals, waveform-style tile for audio. */
+function AssetTile({ dir, asset }) {
+    const p = fullPath(dir, asset);
+    if (!asset.exists) {
+        return (_jsx("div", { className: "assets-tile", children: _jsx(Icon, { name: "triangle-alert", width: 22, height: 22 }) }));
+    }
+    if (isImage(asset))
+        return _jsx(Thumbnail, { src: assetUrl(p), aspect: "16 / 9" });
+    if (isAudio(asset)) {
+        return (_jsxs("div", { className: "assets-tile assets-tile--audio", children: [_jsx(Icon, { name: asset.kind === "voice" ? "mic" : "music", width: 22, height: 22 }), _jsx("audio", { src: assetUrl(p), preload: "metadata" })] }));
+    }
+    return (_jsx("div", { className: "assets-tile", children: _jsx("video", { src: `${assetUrl(p)}#t=0.1`, preload: "metadata", muted: true, playsInline: true }) }));
+}
+// R11: spec menu labels — engine place modes underneath.
+const PLACE_LABEL = {
+    append: "At end of timeline",
+    broll: "As B-roll over…",
+    narration: "As narration",
+    music: "As music bed",
+};
+/** Place-on-timeline menu + the fields the chosen mode needs. */
+function PlaceMenu({ dir, asset, onPlaced }) {
+    const toast = useToast();
+    const modes = placeModesFor(asset.kind);
+    const [open, setOpen] = useState(false);
+    const [mode, setMode] = useState(null);
+    const [start, setStart] = useState("");
+    const [link, setLink] = useState("");
+    const [gain, setGain] = useState("");
+    const [busy, setBusy] = useState(false);
+    // B-roll range: caption cues of the timeline, and the anchor/last indices picked from them.
+    const [cues, setCues] = useState(null);
+    const [cueSel, setCueSel] = useState(null);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (mode !== "broll")
+            return;
+        let live = true;
+        setCues(null);
+        setCueSel(null);
+        captionsShow(dir)
+            .then((r) => live && setCues(r.cues))
+            .catch((e) => {
+            if (!live)
+                return;
+            setCues([]);
+            toast(errorMessage(e), { kind: "error", ttl: 0 });
+        });
+        return () => {
+            live = false;
+        };
+        // toast is stable per provider; the cue list reloads only when the mode or project changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, dir]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const close = (e) => {
+            if (!ref.current?.contains(e.target)) {
+                setOpen(false);
+                setMode(null);
+            }
+        };
+        window.addEventListener("mousedown", close);
+        return () => window.removeEventListener("mousedown", close);
+    }, [open]);
+    const num = (s) => {
+        const n = Number(s);
+        return s.trim() !== "" && Number.isFinite(n) ? n : undefined;
+    };
+    // The contiguous run of cues picked for B-roll, as timeline seconds (start of first, end of last).
+    const cueRange = () => {
+        if (!cues || !cueSel)
+            return null;
+        const lo = Math.min(cueSel.a, cueSel.b);
+        const hi = Math.max(cueSel.a, cueSel.b);
+        return { start: cues[lo].start_ms / 1000, end: cues[hi].end_ms / 1000 };
+    };
+    const place = (m) => {
+        const range = m === "broll" ? cueRange() : null;
+        setBusy(true);
+        engineCall("assets.place", {
+            dir,
+            asset_id: asset.assetId,
+            mode: m,
+            ...(range ? { start_s: range.start, end_s: range.end } : {}),
+            ...(!range && num(start) !== undefined ? { start_s: num(start) } : {}),
+            ...(link.trim() ? { link_clip: link.trim() } : {}),
+            ...(num(gain) !== undefined ? { gain_db: num(gain) } : {}),
+        })
+            .then(() => {
+            toast("Placed on the timeline", { kind: "success" });
+            setOpen(false);
+            setMode(null);
+            onPlaced();
+        })
+            .catch((e) => toast(errorMessage(e), { kind: "error", ttl: 0 }))
+            .finally(() => setBusy(false));
+    };
+    const needsRange = mode === "broll";
+    const needsLink = mode === "narration";
+    return (_jsxs("div", { className: "assets-place", ref: ref, children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setOpen((v) => !v), children: "Place on timeline" }), open && (_jsx("div", { className: "assets-place__pop", children: !mode ? (modes.map((m) => (_jsx("button", { type: "button", onClick: () => (m === "append" ? place(m) : setMode(m)), children: PLACE_LABEL[m] }, m)))) : (_jsxs("div", { className: "assets-place__form", children: [_jsx("span", { className: "cr-overline", children: PLACE_LABEL[mode] }), needsRange && (_jsxs("div", { className: "assets-cues", "data-testid": "broll-cues", children: [cues === null && _jsx("span", { className: "assets-cues__meta", children: "Loading caption cues\u2026" }), cues?.length === 0 && _jsx("span", { className: "assets-cues__meta", children: "No caption cues on the timeline yet." }), cues?.map((c, i) => {
+                                    const lo = cueSel ? Math.min(cueSel.a, cueSel.b) : -1;
+                                    const hi = cueSel ? Math.max(cueSel.a, cueSel.b) : -1;
+                                    const on = i >= lo && i <= hi;
+                                    return (_jsxs("button", { type: "button", "data-testid": "broll-cue", "data-index": i, "data-start-ms": c.start_ms, "data-end-ms": c.end_ms, "aria-pressed": on, title: "Click the first cue, then shift-click the last", onClick: (e) => setCueSel((prev) => (e.shiftKey && prev ? { a: prev.a, b: i } : { a: i, b: i })), children: [_jsxs("span", { className: "assets-cues__time", children: [(c.start_ms / 1000).toFixed(2), "\u2013", (c.end_ms / 1000).toFixed(2), " s"] }), " ", c.text] }, `${c.start_ms}-${i}`));
+                                }), _jsx("span", { className: "assets-cues__meta", "data-testid": "broll-range", children: (() => {
+                                        const r = cueRange();
+                                        return r ? `B-roll ${r.start.toFixed(2)} s to ${r.end.toFixed(2)} s` : "Pick a start cue, then shift-click an end cue.";
+                                    })() })] })), needsLink && (_jsxs("label", { children: ["Start (s)", _jsx(Input, { value: start, onChange: (e) => setStart(e.target.value), placeholder: "auto" })] })), needsLink && (_jsxs("label", { children: ["Link to clip", _jsx(Input, { value: link, onChange: (e) => setLink(e.target.value), placeholder: "clip id" })] })), mode === "music" && (_jsxs("label", { children: ["Bed level (dB under)", _jsx(Input, { value: gain, onChange: (e) => setGain(e.target.value), placeholder: "24" })] })), _jsxs("div", { className: "assets-place__actions", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setMode(null), children: "Back" }), _jsx(Button, { size: "sm", variant: "primary", onClick: () => place(mode), disabled: (needsRange && cueRange() === null) || (busy), "aria-busy": (busy) || undefined, children: busy ? "Placing…" : "Place" })] })] })) }))] }));
+}
+const GEN_KINDS = [
+    { value: "video", label: "Video" },
+    { value: "image", label: "Image" },
+    { value: "voice", label: "Voice" },
+    { value: "music", label: "Music" },
+    { value: "sfx", label: "SFX" },
+    { value: "avatar", label: "Avatar" },
+    { value: "upscale", label: "Upscale" },
+    { value: "lipsync", label: "Lipsync" },
+];
+/** Transform kinds re-process an existing source; the engine request has no input-reference field yet. */
+const NEEDS_SOURCE = new Set(["upscale", "lipsync"]);
+function GenerateDrawer({ dir, open, onClose, onDone }) {
+    const toast = useToast();
+    const [kind, setKind] = useState("video");
+    const [prompt, setPrompt] = useState("");
+    const [models, setModels] = useState(null);
+    const [model, setModel] = useState(null);
+    const [duration, setDuration] = useState(undefined);
+    const [busy, setBusy] = useState(false);
+    const reqSeq = useRef(0);
+    useEffect(() => {
+        if (!open)
+            return;
+        engineCall("genright.models", {})
+            .then((r) => setModels(parseCatalog(r).models))
+            .catch(() => setModels([]));
+    }, [open]);
+    // Models are listed per kind from the host app own catalog; a kind with no rows has no model.
+    useEffect(() => {
+        const wanted = models ? pickModel({ models, structuredDurations: true }, kind) : undefined;
+        setModel(wanted ?? null);
+        setDuration(wanted ? durationControl(wanted).initial : undefined);
+    }, [kind, models]);
+    const dur = durationControl(model ?? undefined);
+    const needsSource = NEEDS_SOURCE.has(kind);
+    const submit = async () => {
+        if (!model || !prompt.trim() || needsSource)
+            return;
+        setBusy(true);
+        reqSeq.current += 1;
+        const requestId = `ui-gen-${Date.now().toString(36)}-${reqSeq.current}`;
+        try {
+            await engineCall("generate", {
+                dir,
+                kind,
+                input: {
+                    provider: model.provider,
+                    model: model.model,
+                    prompt: prompt.trim(),
+                    request_id: requestId,
+                    ...(duration !== undefined ? { duration_s: duration } : {}),
+                },
+            });
+            toast("Generation finished and imported", { kind: "success" });
+            setPrompt("");
+            onClose();
+            onDone();
+        }
+        catch (e) {
+            toast(errorMessage(e), { kind: "error", ttl: 0 });
+            onDone();
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const shown = models ? ofKind({ models, structuredDurations: true }, kind) : [];
+    const kindLabel = GEN_KINDS.find((k) => k.value === kind)?.label.toLowerCase() ?? kind;
+    const modelHelp = models === null
+        ? "Loading models…"
+        : models.length === 0
+            ? `${hostAppName()} reported no models.`
+            : shown.length === 0
+                ? `${hostAppName()} lists no ${kindLabel} models.`
+                : needsSource
+                    ? "Upscale and lipsync need a source asset; this picker cannot send one yet."
+                    : undefined;
+    return (_jsxs(Drawer, { title: "Generate", open: open, onClose: onClose, footer: _jsxs(Button, { variant: "primary", onClick: () => void submit(), disabled: (!model || !prompt.trim() || needsSource) || (busy), "aria-busy": (busy) || undefined, children: [!(busy) && _jsx(Icon, { name: "sparkles" }), busy ? "Generating…" : "Generate"] }), children: [_jsx(Field, { label: "Kind", children: () => (_jsx(SegmentedControl, { value: kind, options: GEN_KINDS, onChange: setKind, label: "Asset kind" })) }), _jsx(Field, { label: "Prompt", children: (ids) => (_jsx("textarea", { ...ids, className: "rk-input cr-textarea", placeholder: "Describe the asset\u2026", value: prompt, onChange: (e) => setPrompt(e.target.value) })) }), _jsx(Field, { label: "Model", note: modelHelp, children: (ids) => (_jsx("select", { ...ids, className: "rk-input cr-select", value: model ? `${model.provider}/${model.model}` : "", onChange: (e) => {
+                        const m = shown.find((x) => `${x.provider}/${x.model}` === e.target.value) ?? null;
+                        setModel(m);
+                        setDuration(m ? durationControl(m).initial : undefined);
+                    }, children: shown.map((m) => (_jsxs("option", { value: `${m.provider}/${m.model}`, children: [m.label, " \u00B7 ", m.provider, "/", m.model, m.estUsd !== null ? ` · ${formatUsd(m.estUsd)}` : ""] }, `${m.provider}/${m.model}`))) })) }), model && (_jsx(Field, { label: "Duration", note: dur.type === "range" ? `${dur.min}–${dur.max} s` : undefined, children: () => (dur.type === "set" ? (_jsx(Select, { label: "Duration", value: duration === undefined ? String(dur.options[0]) : String(duration), options: dur.options.map((d) => ({ value: String(d), label: `${d} s` })), onChange: (value) => setDuration(Number(value)) })) : (_jsx(Input, { type: "number", min: dur.type === "range" ? dur.min : 1, max: dur.type === "range" ? dur.max : 600, step: dur.type === "range" ? 1 : 0.5, value: duration ?? dur.initial, onChange: (e) => setDuration(Number(e.target.value)) }))) }))] }));
+}
+export function AssetsView({ dir, onNewVideo }) {
+    const toast = useToast();
+    const [gr, setGr] = useState({ state: "checking" });
+    const [jobs, setJobs] = useState(null);
+    const [assets, setAssets] = useState(null);
+    const [filter, setFilter] = useState("all");
+    const [genOpen, setGenOpen] = useState(false);
+    const [preview, setPreview] = useState(null);
+    const previewPath = dir && preview && !isImage(preview) ? fullPath(dir, preview) : null;
+    const previewPlaybackId = useMediaPlaybackId(previewPath);
+    const [busy, setBusy] = useState(null);
+    const [error, setError] = useState(null);
+    const [recovered, setRecovered] = useState(new Set());
+    void onNewVideo;
+    const checkStatus = useCallback(() => {
+        engineCall("genright.status", {})
+            .then((r) => setGr(interpretHost(r)))
+            .catch((e) => setGr(genRightCallFailed(errorMessage(e))));
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        engineCall("genright.status", {})
+            .then((r) => !cancelled && setGr(interpretHost(r)))
+            .catch((e) => !cancelled && setGr(genRightCallFailed(errorMessage(e))));
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const refresh = useCallback(() => {
+        if (!dir)
+            return;
+        engineCall("genright.jobs", { dir, live: gr.state === "ready" })
+            .then((r) => setJobs(interpretJobs(r)))
+            .catch((e) => setError(errorMessage(e)));
+        engineCall("assets.list", { dir })
+            .then((r) => setAssets(interpretAssetLibrary(r).assets))
+            .catch((e) => setError(errorMessage(e)));
+    }, [dir, gr.state]);
+    useEffect(() => {
+        refresh();
+    }, [refresh]);
+    // Poll while jobs are in flight.
+    const jobsActive = (jobs ?? []).some((j) => j.state === "queued" || j.state === "running");
+    useEffect(() => {
+        if (!jobsActive)
+            return;
+        const t = window.setInterval(refresh, 3000);
+        return () => window.clearInterval(t);
+    }, [jobsActive, refresh]);
+    const locate = async () => {
+        const file = await pickFile(`Locate the ${hostAppName()} engine`, []);
+        if (!file)
+            return;
+        try {
+            await settingsSet({ genright_engine_path: file });
+            toast(`${hostAppName()} path saved — checking…`, { kind: "success" });
+            checkStatus();
+        }
+        catch (e) {
+            toast(errorMessage(e), { kind: "error", ttl: 0 });
+        }
+    };
+    const jobAction = (j) => {
+        if (!dir)
+            return;
+        const label = jobActionLabel(j);
+        if (!label)
+            return;
+        setBusy(j.requestId);
+        const call = label === "Cancel"
+            ? engineCall("genright.cancel", { dir, request_id: j.requestId })
+            : engineCall("genright.recover", { dir, request_id: j.requestId, retry_failed: label === "Retry" });
+        call
+            .then(() => refresh())
+            .catch((e) => setError(errorMessage(e)))
+            .finally(() => setBusy(null));
+    };
+    const relink = (a) => {
+        if (!dir)
+            return;
+        setBusy(a.assetId);
+        engineCall("assets.relink", { dir, asset_id: a.assetId })
+            .then(() => refresh())
+            .catch((e) => setError(errorMessage(e)))
+            .finally(() => setBusy(null));
+    };
+    // Recover interrupted jobs once per project open; recovered request ids get
+    // the `Recovered` chip in the jobs list.
+    const recoveredOnce = useRef(null);
+    useEffect(() => {
+        if (!dir || gr.state !== "ready" || recoveredOnce.current === dir)
+            return;
+        recoveredOnce.current = dir;
+        engineCall("genright.recover", { dir })
+            .then((r) => {
+            const done = interpretRecover(r);
+            setRecovered(new Set(done.map((d) => d.requestId)));
+            const n = done.filter((d) => d.state === "done").length;
+            if (n > 0)
+                toast(`Recovered ${n} interrupted job${n === 1 ? "" : "s"}`, { kind: "success" });
+            refresh();
+        })
+            .catch(() => undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- once per dir
+    }, [dir, gr.state]);
+    const shown = (assets ?? []).filter((a) => filterMatch(a.kind, filter));
+    return (_jsxs(PageShell, { title: "Assets", actions: _jsxs(_Fragment, { children: [_jsx(SegmentedControl, { value: filter, options: FILTERS, onChange: setFilter, label: "Filter assets" }), _jsxs(Button, { variant: "primary", disabled: !dir || gr.state !== "ready", onClick: () => setGenOpen(true), children: [_jsx(Icon, { name: "sparkles" }), "Generate\u2026"] })] }), maxWidth: 0, subtitle: assets ? `${assets.length} generated asset${assets.length === 1 ? "" : "s"}` : undefined, children: [_jsxs("div", { className: "assets-body", children: [error && _jsx(ErrorPanel, { title: "Assets failed", detail: error }), _jsx("div", { className: "assets-main", children: !dir ? (_jsx(EmptyState, { title: "No project open", icon: _jsx(Icon, { name: "image", width: 28, height: 28 }), children: "Open a project to see its generated assets." })) : assets === null ? (_jsx(ProgressRow, { label: "Loading assets", status: "Loading", fraction: undefined })) : shown.length === 0 ? (_jsx(EmptyState, { title: assets.length === 0 ? "No assets yet" : "Nothing in this filter", action: assets.length === 0 && gr.state === "ready" ? (_jsx(Button, { variant: "primary", onClick: () => setGenOpen(true), children: "Generate\u2026" })) : undefined, icon: _jsx(Icon, { name: "image", width: 28, height: 28 }), children: assets.length === 0
+                                ? "Generated b-roll, images, voice and music land here."
+                                : "No generated assets of this kind yet." })) : (_jsx("div", { className: "assets-grid", children: shown.map((a) => (_jsxs("div", { className: "assets-card", children: [_jsx("button", { type: "button", className: "assets-card__preview", "aria-label": `Preview ${a.prompt ?? a.assetId}`, disabled: !a.exists, onClick: () => setPreview(a), children: _jsx(AssetTile, { dir: dir, asset: a }) }), _jsx("div", { className: "assets-card__name cr-clamp-1", title: a.prompt ?? a.assetId, children: a.prompt ?? a.assetId }), _jsxs("div", { className: "assets-card__row", children: [_jsx(Badge, { tone: a.state === "ready" ? "ok" : "warn", children: a.kind ?? "media" }), a.sourceId && _jsx(Badge, { tone: "accent", children: "On timeline" })] }), _jsxs("div", { className: "assets-card__prov cr-muted", children: [hostAppName(), " \u00B7 ", a.model, a.actualUsd !== null ? ` · ${formatUsd(a.actualUsd)}` : "", a.bytes ? ` · ${fileSize(a.bytes)}` : ""] }), _jsxs("div", { className: "assets-card__actions", children: [a.state === "missing" ? (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => relink(a), disabled: (busy === a.assetId), "aria-busy": (busy === a.assetId) || undefined, children: busy === a.assetId ? "Working…" : a.recovery === "relink" ? "Relink" : "Retry import" })) : (a.exists && _jsx(PlaceMenu, { dir: dir, asset: a, onPlaced: refresh })), a.exists && (_jsx(IconButton, { label: "Reveal", onClick: () => void revealPath(fullPath(dir, a)).catch((e) => toast(errorMessage(e), { kind: "error", ttl: 0 })), children: _jsx(Icon, { name: "folder-open" }) }))] })] }, a.assetId))) })) }), gr.state !== "ready" && gr.state !== "checking" && (_jsx(ErrorPanel, { title: gr.state === "missing" ? `${hostAppName()} not found` : `${hostAppName()} unavailable`, detail: gr.detail, actions: _jsx(Button, { size: "sm", variant: "secondary", onClick: () => void locate(), children: "Locate\u2026" }) })), jobs !== null && jobs.length > 0 && (_jsxs("div", { className: "assets-jobs", children: [_jsx("span", { className: "cr-overline", children: "Generation jobs" }), jobs.map((j) => (_jsxs("div", { className: "assets-job", children: [_jsx(ProgressRow, { label: j.prompt || `${j.kind} · ${j.provider}/${j.model}`, status: j.state, tone: JOB_TONE[j.state] ?? "neutral", fraction: j.state === "queued" || j.state === "running" ? undefined : null, error: j.error?.message ?? undefined, onRetry: j.state === "failed" ? () => jobAction(j) : undefined }), recovered.has(j.requestId) && _jsx(Badge, { tone: "accent", children: "Recovered" }), (j.actualUsd ?? j.estUsd) !== null && (_jsx("span", { className: "cr-mono cr-muted assets-job__cost", children: formatUsd(j.actualUsd ?? j.estUsd ?? 0) })), jobActionLabel(j) && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => jobAction(j), disabled: (busy === j.requestId), "aria-busy": (busy === j.requestId) || undefined, children: busy === j.requestId ? "Working…" : jobActionLabel(j) }))] }, j.requestId)))] }))] }), dir && _jsx(GenerateDrawer, { dir: dir, open: genOpen, onClose: () => setGenOpen(false), onDone: refresh }), dir && preview && (_jsx(Drawer, { title: preview.prompt ?? preview.assetId, open: true, onClose: () => setPreview(null), children: isImage(preview) ? (_jsx("div", { className: "assets-image-viewer", children: _jsx(ImageViewer, { path: fullPath(dir, preview), src: assetUrl(fullPath(dir, preview)), displayName: preview.prompt ?? preview.assetId, readOnly: true }) })) : (_jsx(MediaPlayer, { src: fullPath(dir, preview), playbackId: previewPlaybackId, kind: isAudio(preview) ? "audio" : "video", title: preview.prompt ?? preview.assetId, autoPlay: true }, previewPlaybackId ?? "pending")) }))] }));
+}

package/dist/views/AutoEditView.d.ts

@@ -0,0 +1,16 @@
+import { type SourceRow, type ReframeSummary } from "../lib/media.js";
+export declare function AutoEditView({ dir, onChanged, onNavigate, }: {
+    dir: string;
+    onChanged: () => Promise<void>;
+    onNavigate?: (to: "recipe" | "finished") => void;
+}): import("react").JSX.Element;
+/** Framing review for one (source, aspect) plan; shared by Edit recipe and Shorts. */
+export declare function FramingDrawer({ dir, source, aspect, plan, autoFraming, onClose, onChanged, }: {
+    dir: string;
+    source: SourceRow;
+    aspect: string;
+    plan?: ReframeSummary | "none" | "error";
+    autoFraming?: boolean;
+    onClose: () => void;
+    onChanged: (p: ReframeSummary) => void;
+}): import("react").JSX.Element;