@rightkit/video-ui 0.0.0-stage → 0.1.1

package/dist/views/AutoEditView.js

@@ -0,0 +1,452 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, Checkbox, EmptyState, Field, PageShell, SegmentedControl, Select, Slider, Toggle, useToast } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { engineCall, onEngineRaw, errorCode, errorMessage } from "../lib/engine.js";
+import { assetUrl } from "../lib/asset.js";
+import { interpretAssetLibrary } from "../lib/genright.js";
+import { pickFile } from "../lib/dialog.js";
+import { baseName, projectShow } from "../lib/project.js";
+import { CAPTION_STYLES, DEFAULT_CAPTION_STYLE, captionsPreview, modelsStatus, recipeCancel, recipeRun, recipeStatus, reframeAnalyze, reframeApprove, reframeShow, framingApproval, framingLabel, settingsGet, settingsSet, sourceList, thumbnails, } from "../lib/media.js";
+import { Drawer, ErrorPanel, ProgressRow, Thumbnail, timecode, Icon } from "../ui/index.js";
+import { RecipeLibrary } from "./RecipeLibrary.js";
+import { HDR_COLOR_PRESETS, HDR_UNAVAILABLE_NOTICE, useHdrToSdr } from "../hooks/useHdrToSdr.js";
+const STYLE_DESC = {
+    natural: "Keeps the room to breathe — removes only mistakes and dead air.",
+    tight: "Cuts pauses, fillers and retakes for a brisk, conversational pace.",
+    punchy: "Aggressive trims and fast beat changes for short-form energy.",
+};
+const FORMATS = ["16:9", "9:16", "1:1"];
+/**
+ * The app's default music bed level (dB) for a recipe that has none saved. The engine's
+ * fallback for a recipe with no `music_level` is also -24 dB (recipe_cmd.rs, `unwrap_or(-24.0)`),
+ * so the app and engine defaults match (#75).
+ */
+const DEFAULT_MUSIC_LEVEL_DB = -24;
+const COLOR_OPTS = [
+    ["", "None"],
+    ["neutral", "Neutral Rec.709"],
+    ["hdr-natural", "HDR natural"],
+    ["hdr-soft", "HDR soft"],
+    ["apple-log-natural", "Apple Log natural"],
+    ["talking-head-auto", "Talking head (auto)"],
+    ["warm", "Warm"],
+    ["cool", "Cool"],
+    ["lift", "Lift"],
+    ["custom", "Custom LUT (.cube)"],
+];
+/** Colour options; with HDR to SDR unavailable the HDR presets stay selectable but say so. */
+const colourOpts = (hdr) => COLOR_OPTS.map(([v, l]) => hdr === false && HDR_COLOR_PRESETS.includes(v) ? [v, `${l} — not available on this computer`] : [v, l]);
+const AUDIO_OPTS = [
+    ["", "None"],
+    ["talking-head", "Talking head"],
+    ["podcast", "Podcast"],
+    ["noisy-room", "Noisy room"],
+];
+const STAGE_LABELS = [
+    ["transcribe", "Transcribe speech"],
+    ["analyse", "Analyse visuals"],
+    ["takes", "Choose best takes"],
+    ["cut", "Cut"],
+    ["captions", "Captions"],
+    ["framing", "Framing"],
+    ["colour", "Colour"],
+    ["audio", "Audio"],
+    ["music", "Music"],
+];
+function anchorViews(plan) {
+    const p = (plan.plan ?? {});
+    const anchors = p.anchors ?? [];
+    const keyframes = p.keyframes ?? [];
+    const [sw, sh] = [p.source_width ?? 0, p.source_height ?? 0];
+    const [cw, ch] = plan.crop ?? [0, 0];
+    const out = [];
+    const step = Math.max(1, Math.floor(anchors.length / 6) || 1);
+    for (let i = 0; i < anchors.length && out.length < 6; i += step) {
+        const a = anchors[i];
+        const mid = Math.round(((a.start_ms ?? 0) + (a.end_ms ?? 0)) / 2);
+        let k = keyframes[0];
+        for (const cand of keyframes) {
+            if (Math.abs((cand.t_ms ?? 0) - mid) < Math.abs((k?.t_ms ?? 0) - mid))
+                k = cand;
+        }
+        out.push({
+            mid_ms: mid,
+            approved: a.approved === true,
+            crop: {
+                x: sw ? (k?.x ?? 0) / sw : 0,
+                y: sh ? (k?.y ?? 0) / sh : 0,
+                w: sw ? cw / sw : 0,
+                h: sh ? ch / sh : 0,
+            },
+        });
+    }
+    return out;
+}
+/** §3.3 Edit recipe: persisted form + recipe.run stage panel + framing review drawer. */
+const SWATCH_ASPECT = { youtube: "16 / 9", reels: "9 / 16", square: "1 / 1" };
+export function AutoEditView({ dir, onChanged, onNavigate, }) {
+    const toast = useToast();
+    const hdr = useHdrToSdr();
+    const [sources, setSources] = useState([]);
+    const [show, setShow] = useState(null);
+    const [recipe, setRecipe] = useState(null);
+    const [thumbs, setThumbs] = useState({});
+    const [plans, setPlans] = useState({});
+    const [autoFraming, setAutoFraming] = useState(false);
+    const [framingFor, setFramingFor] = useState(null);
+    const [music, setMusic] = useState([]);
+    const [speechReady, setSpeechReady] = useState(null);
+    const [swatch, setSwatch] = useState(null);
+    const [stages, setStages] = useState({});
+    const [running, setRunning] = useState(null); // job id
+    const [runError, setRunError] = useState(null);
+    const [lastRun, setLastRun] = useState(null);
+    const [error, setError] = useState(null);
+    const runTag = useRef(null);
+    const persistTimer = useRef(null);
+    // The recipe object produced by the user's last edit on this screen (see `patch`). Only that object is saved.
+    const userRecipe = useRef(null);
+    // The project the last user edit was made in: an edit is never written into another project.
+    const userRecipeDir = useRef(null);
+    // `reloadRecipe` re-reads the recipe from project settings (after a library apply) instead of keeping local edits.
+    const refresh = useCallback(async (reloadRecipe = false) => {
+        const [list, proj, settings, models, status] = await Promise.all([
+            sourceList(dir),
+            projectShow(dir).catch(() => null),
+            settingsGet(dir).catch(() => null),
+            modelsStatus().catch(() => null),
+            recipeStatus(dir).catch(() => null),
+        ]);
+        setAutoFraming(settings ? framingApproval(settings) === "auto" : false);
+        setPlans({});
+        setSources(list.sources);
+        setShow(proj);
+        setSpeechReady(models ? (models.speech.ready ?? null) : null);
+        setLastRun(status);
+        const saved = (settings?.project?.recipe ?? {});
+        setRecipe((cur) => {
+            if (cur && !reloadRecipe)
+                return cur;
+            const all = list.sources.map((s) => s.id);
+            return {
+                style: saved.style ?? settings?.project?.cut_preset ?? "natural",
+                formats: saved.formats?.length ? saved.formats : ["16:9"],
+                captions: {
+                    on: saved.captions?.on ?? (settings?.project?.burn_captions !== false),
+                    style: saved.captions?.style ?? DEFAULT_CAPTION_STYLE,
+                },
+                finish: {
+                    color: saved.finish?.color ?? settings?.project?.color_preset ?? "neutral",
+                    audio: saved.finish?.audio ?? settings?.project?.audio_preset ?? "talking-head",
+                    music: saved.finish?.music ?? null,
+                    music_level: saved.finish?.music_level ?? DEFAULT_MUSIC_LEVEL_DB,
+                    lut_path: saved.finish?.lut_path ?? null,
+                    lut_intensity: saved.finish?.lut_intensity ?? 100,
+                    match_shots: saved.finish?.match_shots ?? true,
+                },
+                sources: saved.sources?.length ? saved.sources : all,
+            };
+        });
+    }, [dir]);
+    useEffect(() => {
+        refresh().catch((e) => setError(errorMessage(e)));
+    }, [refresh]);
+    // Called after a library recipe is applied: the form adopts the project's new recipe settings.
+    const reloadSettings = useCallback(() => {
+        refresh(true).catch((e) => setError(errorMessage(e)));
+    }, [refresh]);
+    // Persist the recipe into project settings.json under "recipe". Loads (first load, refresh, library
+    // reload) replace `recipe` with an object that is not `userRecipe`, so they are not written back.
+    useEffect(() => {
+        if (!recipe || recipe !== userRecipe.current || userRecipeDir.current !== dir)
+            return;
+        if (persistTimer.current)
+            clearTimeout(persistTimer.current);
+        persistTimer.current = setTimeout(() => {
+            settingsSet({ recipe }, dir).catch((e) => setError(errorMessage(e)));
+        }, 400);
+        return () => {
+            if (persistTimer.current)
+                clearTimeout(persistTimer.current);
+        };
+    }, [recipe, dir]);
+    // Card thumbnails for framing/source rows.
+    useEffect(() => {
+        for (const s of sources) {
+            if (thumbs[s.id] !== undefined)
+                continue;
+            void thumbnails(dir, { source: s.id }, { width: 240 })
+                .then((t) => {
+                const f = t.frames[0];
+                if (f)
+                    setThumbs((m) => ({ ...m, [s.id]: assetUrl(f.path) }));
+            })
+                .catch(() => setThumbs((m) => ({ ...m, [s.id]: "" })));
+        }
+    }, [sources, dir, thumbs]);
+    // Music library assets for the Finish card.
+    useEffect(() => {
+        engineCall("assets.list", { dir })
+            .then((r) => setMusic(interpretAssetLibrary(r).assets.filter((a) => a.kind === "music" && a.exists)))
+            .catch(() => setMusic([]));
+    }, [dir]);
+    // R3: real caption-style swatch — the engine renders a styled PNG on a real frame.
+    const swatchPreset = recipe?.formats.includes("9:16") || recipe?.formats.includes("1:1")
+        ? recipe.formats.includes("1:1") && !recipe.formats.includes("9:16")
+            ? "square"
+            : "reels"
+        : "youtube";
+    useEffect(() => {
+        if (!recipe?.captions.on || sources.length === 0) {
+            setSwatch(null);
+            return;
+        }
+        let stale = false;
+        setSwatch("loading");
+        captionsPreview(dir, {
+            style: recipe.captions.style,
+            preset: swatchPreset,
+            source: sources.find((s) => recipe.sources.includes(s.id))?.id,
+        })
+            .then((r) => {
+            if (!stale)
+                setSwatch(r);
+        })
+            .catch(() => {
+            if (!stale)
+                setSwatch("error");
+        });
+        return () => {
+            stale = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dir, recipe?.captions.on, recipe?.captions.style, swatchPreset, sources.length]);
+    // recipe.stage events for this run's tag.
+    useEffect(() => {
+        let off;
+        let cancelled = false;
+        void onEngineRaw((payload) => {
+            const frame = payload;
+            if (frame.event?.event !== "recipe.stage")
+                return;
+            if (runTag.current && frame.tag !== runTag.current)
+                return;
+            const ev = frame.event;
+            setStages((m) => ({
+                ...m,
+                [ev.stage]: { state: ev.state, fraction: ev.fraction, error: ev.error },
+            }));
+        }).then((f) => {
+            if (cancelled)
+                f();
+            else
+                off = f;
+        });
+        return () => {
+            cancelled = true;
+            off?.();
+        };
+    }, []);
+    const selectedSources = useMemo(() => sources.filter((s) => recipe?.sources.includes(s.id)), [sources, recipe]);
+    // R2: every (source × format) pair gets its own plan — plans keyed "id|aspect".
+    const reframeAspects = useMemo(() => (recipe?.formats ?? []).filter((f) => f !== "16:9"), [recipe]);
+    const needsReframe = useCallback((s, aspect) => {
+        const v = show?.timeline.sources.find((t) => t.id === s.id)?.video;
+        if (!v)
+            return false;
+        const [aw, ah] = aspect.split(":").map(Number);
+        const target = aw / ah;
+        return Math.abs(v.width / v.height / target - 1) >= 0.05;
+    }, [show]);
+    const planKey = (id, aspect) => `${id}|${aspect}`;
+    // Reframe approval state for each (source × aspect) that needs it.
+    useEffect(() => {
+        for (const s of sources) {
+            for (const aspect of reframeAspects) {
+                const k = planKey(s.id, aspect);
+                if (!needsReframe(s, aspect) || plans[k] !== undefined)
+                    continue;
+                setPlans((m) => ({ ...m, [k]: "none" }));
+                reframeShow(dir, s.id, aspect)
+                    .then((r) => setPlans((m) => ({ ...m, [k]: r })))
+                    .catch(() => setPlans((m) => ({ ...m, [k]: "none" })));
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sources, plans, needsReframe, reframeAspects, dir]);
+    const framingPairs = useMemo(() => selectedSources.flatMap((s) => reframeAspects.filter((a) => needsReframe(s, a)).map((a) => ({ s, aspect: a }))), [selectedSources, reframeAspects, needsReframe]);
+    const unapproved = framingPairs.filter(({ s, aspect }) => {
+        const p = plans[planKey(s.id, aspect)];
+        return !(p && p !== "none" && p !== "error" && p.approved);
+    });
+    const run = useCallback(async () => {
+        if (!recipe)
+            return;
+        setStages({});
+        setRunError(null);
+        const job = `recipe-ui-${Date.now().toString(36)}`;
+        const tag = `recipe-${job}`;
+        runTag.current = tag;
+        setRunning(job);
+        try {
+            // Flush the recipe to settings.json so engine reads current values (R3/R4).
+            await settingsSet({ recipe }, dir).catch(() => undefined);
+            await recipeRun(dir, {
+                style: recipe.style,
+                formats: recipe.formats,
+                sources: recipe.sources,
+                captions: recipe.captions.on,
+                music: recipe.finish.music ?? undefined,
+                music_level: recipe.finish.music_level,
+                job,
+            }, tag);
+            toast("Finished edit ready", { kind: "success" });
+            onNavigate?.("finished");
+            await onChanged();
+        }
+        catch (e) {
+            if (errorCode(e) === "cancelled" || errorCode(e) === "render_cancelled") {
+                setRunError("Cancelled — run again to resume where it stopped.");
+            }
+            else {
+                setRunError(errorMessage(e));
+            }
+        }
+        finally {
+            setRunning(null);
+            runTag.current = null;
+            void recipeStatus(dir).then(setLastRun).catch(() => undefined);
+            void refresh();
+        }
+    }, [recipe, dir, toast, onNavigate, onChanged, refresh]);
+    const stageList = useMemo(() => {
+        const rows = [...STAGE_LABELS];
+        for (const f of recipe?.formats ?? [])
+            rows.push([`render:${f}`, `Render ${f}`]);
+        return rows;
+    }, [recipe]);
+    if (!recipe) {
+        return (_jsx(PageShell, { title: "Edit recipe", maxWidth: 0, children: _jsx(ProgressRow, { label: "Loading recipe", status: "working", fraction: undefined }) }));
+    }
+    // Every user edit on this screen goes through here, so it is the only path that marks a recipe for saving.
+    const patch = (p) => {
+        const next = { ...recipe, ...p };
+        userRecipe.current = next;
+        userRecipeDir.current = dir;
+        setRecipe(next);
+    };
+    return (_jsxs(PageShell, { title: "Edit recipe", maxWidth: 0, subtitle: "One pass: transcribe, cut, frame and render.", children: [_jsxs("div", { className: "recipe", children: [_jsxs("div", { className: "recipe__form", children: [_jsx(RecipeLibrary, { dir: dir, onApplied: reloadSettings, onBeforeSave: async () => {
+                                    if (recipe)
+                                        await settingsSet({ recipe }, dir);
+                                } }), _jsxs(Card, { children: [_jsx("h2", { children: "Style" }), _jsx(SegmentedControl, { label: "Edit style", value: recipe.style, options: [
+                                            { value: "natural", label: "Natural" },
+                                            { value: "tight", label: "Tight" },
+                                            { value: "punchy", label: "Punchy" },
+                                        ], onChange: (style) => patch({ style }) }), _jsx("p", { className: "recipe__desc", children: STYLE_DESC[recipe.style] })] }), _jsxs(Card, { children: [_jsx("h2", { children: "Format" }), _jsx("div", { className: "recipe__chips", role: "group", "aria-label": "Output formats", children: FORMATS.map((f) => {
+                                            const on = recipe.formats.includes(f);
+                                            return (_jsx(Button, { variant: "ghost", size: "sm", className: "cr-chip-btn", onClick: () => {
+                                                    const next = on
+                                                        ? recipe.formats.filter((x) => x !== f)
+                                                        : [...recipe.formats, f];
+                                                    if (next.length)
+                                                        patch({ formats: next });
+                                                }, children: _jsx(Badge, { "aria-pressed": on, tone: on ? "ok" : "neutral", children: f }) }, f));
+                                        }) })] }), _jsxs(Card, { children: [_jsx("h2", { children: "Captions" }), _jsx(Toggle, { label: "Burn captions into the finished edit", checked: recipe.captions.on, onChange: (on) => patch({ captions: { ...recipe.captions, on } }) }), recipe.captions.on && (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Caption style", children: () => (_jsx(Select, { label: "Caption style", value: recipe.captions.style, onChange: (style) => patch({ captions: { ...recipe.captions, style } }), options: CAPTION_STYLES.map(([value, label]) => ({ value, label })) })) }), _jsx("div", { className: "recipe-swatch", style: { aspectRatio: SWATCH_ASPECT[swatchPreset] }, children: swatch === null ? null : swatch === "loading" ? (_jsx(ProgressRow, { label: "Rendering style preview", status: "working" })) : swatch === "error" ? (_jsx("p", { className: "recipe__desc", children: "Preview unavailable for this project." })) : (_jsx("img", { className: "recipe-swatch-img", src: assetUrl(swatch.path) + `?m=${swatch.mtime_ms ?? 0}`, alt: `${recipe.captions.style} caption style preview` })) })] }))] }), reframeAspects.length > 0 && (_jsxs(Card, { children: [_jsx("h2", { children: "Framing" }), framingPairs.length === 0 ? (_jsxs("p", { className: "recipe__desc", children: ["Every included source already fits ", reframeAspects.join(" and "), "."] })) : (framingPairs.map(({ s, aspect }) => {
+                                        const p = plans[planKey(s.id, aspect)];
+                                        const approved = p !== undefined && p !== "none" && p !== "error" && p.approved;
+                                        return (_jsxs("div", { className: "recipe-frame-row", children: [_jsx(Thumbnail, { src: thumbs[s.id] || undefined }), _jsx("span", { className: "recipe-frame-row__name", children: s.name || s.id.slice(0, 8) }), _jsx(Badge, { tone: "neutral", children: aspect }), _jsx(Badge, { tone: approved || autoFraming ? "ok" : "warn", children: framingLabel(p && p !== "none" && p !== "error" ? p : undefined, autoFraming) }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setFramingFor({ s, aspect }), children: "Review framing" })] }, planKey(s.id, aspect)));
+                                    }))] })), _jsxs(Card, { children: [_jsx("h2", { children: "Finish" }), _jsx(Field, { label: "Colour", children: () => (_jsx(Select, { label: "Colour", value: recipe.finish.color, onChange: (color) => {
+                                                // The LUT applies only under the Custom preset (engine, commit 9866899): leaving Custom clears it.
+                                                patch({ finish: { ...recipe.finish, color, ...(color === "custom" ? {} : { lut_path: null }) } });
+                                                settingsSet({ color_preset: color }, dir).catch(() => undefined);
+                                            }, options: colourOpts(hdr).map(([value, label]) => ({ value, label })) })) }), hdr === false && (_jsx("p", { className: "recipe__desc", role: HDR_COLOR_PRESETS.includes(recipe.finish.color) ? "alert" : undefined, children: HDR_UNAVAILABLE_NOTICE })), _jsx(Field, { label: "Audio", children: () => (_jsx(Select, { label: "Audio", value: recipe.finish.audio, onChange: (audio) => {
+                                                patch({ finish: { ...recipe.finish, audio } });
+                                                settingsSet({ audio_preset: audio }, dir).catch(() => undefined);
+                                            }, options: AUDIO_OPTS.map(([value, label]) => ({ value, label })) })) }), _jsx(Field, { label: "Music", note: music.length === 0 ? "No music in the library yet" : undefined, children: (ids) => (_jsxs("select", { ...ids, className: "rk-input cr-select", value: recipe.finish.music ?? "", onChange: (e) => patch({ finish: { ...recipe.finish, music: e.target.value || null } }), children: [_jsx("option", { value: "", children: "None" }), music.map((a) => (_jsx("option", { value: a.sourceId ?? a.assetId, children: a.prompt ?? baseName(a.path) }, a.assetId)))] })) }), recipe.finish.music && (_jsx(Field, { label: `Music level (${recipe.finish.music_level} dB)`, children: () => (_jsx(Slider, { label: `Music level (${recipe.finish.music_level} dB)`, min: -40, max: -6, step: 1, value: recipe.finish.music_level, onChange: (music_level) => patch({ finish: { ...recipe.finish, music_level } }) })) })), recipe.finish.color === "custom" && (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Custom LUT", note: recipe.finish.lut_path ? undefined : "Pick a .cube file", children: (ids) => (_jsxs("div", { ...ids, className: "recipe-lut-row", children: [_jsxs(Button, { size: "sm", variant: "secondary", onClick: () => void pickFile("Choose a .cube LUT", ["cube"]).then((p) => {
+                                                                if (p)
+                                                                    patch({ finish: { ...recipe.finish, lut_path: p } });
+                                                            }), children: [_jsx(Icon, { name: "folder-open" }), recipe.finish.lut_path ? "Change" : "Choose file"] }), recipe.finish.lut_path && (_jsx("span", { className: "recipe__desc", children: baseName(recipe.finish.lut_path) }))] })) }), _jsx(Field, { label: `LUT intensity (${recipe.finish.lut_intensity}%)`, children: () => (_jsx(Slider, { label: `LUT intensity (${recipe.finish.lut_intensity}%)`, min: 0, max: 100, step: 5, value: recipe.finish.lut_intensity, onChange: (lut_intensity) => patch({ finish: { ...recipe.finish, lut_intensity } }) })) })] })), _jsx(Toggle, { label: "Match shots \u2014 even out colour differences between sources", checked: recipe.finish.match_shots, onChange: (match_shots) => patch({ finish: { ...recipe.finish, match_shots } }) })] }), _jsxs(Card, { children: [_jsx("h2", { children: "Sources included" }), sources.map((s) => (_jsx(Checkbox, { className: "recipe-source-row", checked: recipe.sources.includes(s.id), onChange: (checked) => patch({
+                                            sources: checked
+                                                ? [...recipe.sources, s.id]
+                                                : recipe.sources.filter((x) => x !== s.id),
+                                        }), label: _jsxs("span", { className: "recipe-source-row", children: [_jsx(Thumbnail, { src: thumbs[s.id] || undefined }), _jsx("span", { className: "recipe-source-row__name", children: s.name || s.id.slice(0, 8) })] }) }, s.id))), sources.length === 0 && (_jsx("p", { className: "recipe__desc", children: "Import footage on the Media screen first." }))] }), _jsxs("div", { className: "recipe__cta", children: [_jsxs(Button, { variant: "primary", onClick: () => void run(), disabled: (recipe.sources.length === 0 || recipe.formats.length === 0) || (running !== null), "aria-busy": (running !== null) || undefined, className: "cr-btn--block", children: [!(running !== null) && _jsx(Icon, { name: "wand-sparkles" }), running !== null ? "Making…" : "Make finished edit"] }), !autoFraming && reframeAspects.length > 0 && unapproved.length > 0 && (_jsxs("p", { className: "recipe__blocked", children: ["Framing for", " ", unapproved
+                                                .map(({ s, aspect }) => `${s.name || s.id.slice(0, 8)} (${aspect})`)
+                                                .join(", "), " ", "needs approval before the run."] })), speechReady === false && (_jsx("p", { className: "recipe__blocked", children: "The speech model is unavailable \u2014 untranscribed sources get a visual edit." })), error && (_jsx("p", { role: "alert", className: "recipe__blocked", style: { color: "var(--rk-bad)" }, children: error }))] })] }), _jsx("div", { className: "recipe__run", children: running || runError || Object.keys(stages).length > 0 ? (_jsxs(Card, { children: [_jsx("h2", { children: "This run" }), stageList.map(([id, label]) => {
+                                    const st = stages[id];
+                                    return (_jsx(ProgressRow, { label: label, status: st?.state === "done"
+                                            ? "done"
+                                            : st?.state === "skipped"
+                                                ? "skipped"
+                                                : st?.state === "failed"
+                                                    ? "failed"
+                                                    : st?.state === "running"
+                                                        ? "running"
+                                                        : "waiting", tone: st?.state === "done"
+                                            ? "ok"
+                                            : st?.state === "failed"
+                                                ? "danger"
+                                                : st?.state === "skipped"
+                                                    ? "neutral"
+                                                    : "info", fraction: st?.state === "running" ? st.fraction : null, error: st?.state === "failed" ? st.error : undefined }, id));
+                                }), running && (_jsx(Button, { variant: "secondary", onClick: () => void recipeCancel(running), children: "Cancel" })), runError && !running && (_jsx(ErrorPanel, { title: "The recipe stopped", message: runError, actions: _jsxs(Button, { size: "sm", variant: "secondary", onClick: () => void run(), children: [_jsx(Icon, { name: "rotate-ccw" }), "Retry"] }) }))] })) : lastRun?.ran ? (_jsxs(Card, { children: [_jsx("h2", { children: "Last run" }), _jsxs("p", { className: "recipe__desc", children: ["Finished ", lastRun.finished_at ? new Date(lastRun.finished_at).toLocaleString() : "recently", " · ", lastRun.signature?.formats?.join(", ") ?? "—", " · style ", String(lastRun.signature?.style ?? "—")] }), _jsx("div", { className: "recipe__chips", children: Object.entries(lastRun.done).map(([k]) => (_jsxs(Badge, { tone: "ok", children: [_jsx(Icon, { name: "check", width: 12, height: 12 }), k.replace("render:", "Render ")] }, k))) })] })) : (_jsx(EmptyState, { title: "Your recipe runs here", icon: _jsx(Icon, { name: "wand-sparkles", width: 28, height: 28 }), children: "Set the recipe on the left, then run it \u2014 each stage reports here." })) })] }), framingFor && (_jsx(FramingDrawer, { dir: dir, source: framingFor.s, aspect: framingFor.aspect, plan: plans[planKey(framingFor.s.id, framingFor.aspect)], autoFraming: autoFraming, onClose: () => setFramingFor(null), onChanged: (p) => setPlans((m) => ({ ...m, [planKey(framingFor.s.id, framingFor.aspect)]: p })) }))] }));
+}
+/** Framing review for one (source, aspect) plan; shared by Edit recipe and Shorts. */
+export function FramingDrawer({ dir, source, aspect, plan, autoFraming = false, onClose, onChanged, }) {
+    const [busy, setBusy] = useState(null);
+    const [err, setErr] = useState(null);
+    const [shots, setShots] = useState([]);
+    const loadShots = useCallback(async (p) => {
+        const views = anchorViews({ ...p, plan: p.plan ?? p.plan });
+        const times = views.map((v) => v.mid_ms);
+        const t = await thumbnails(dir, { source: source.id }, { times_ms: times, width: 640 });
+        setShots(views.map((v, i) => ({
+            mid_ms: v.mid_ms,
+            src: t.frames[i] ? assetUrl(t.frames[i].path) : undefined,
+            crop: v.crop,
+            approved: v.approved,
+        })));
+    }, [dir, source.id]);
+    useEffect(() => {
+        if (plan && plan !== "none" && plan !== "error") {
+            loadShots(plan).catch((e) => setErr(errorMessage(e)));
+        }
+        else {
+            setShots([]);
+        }
+    }, [plan, loadShots]);
+    const analyze = async () => {
+        setBusy("analyse");
+        setErr(null);
+        try {
+            const r = await reframeAnalyze(dir, source.id, aspect, `frame-${source.id.slice(0, 8)}`);
+            onChanged(r);
+        }
+        catch (e) {
+            setErr(errorMessage(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const approve = async () => {
+        setBusy("approve");
+        setErr(null);
+        try {
+            const r = await reframeApprove(dir, source.id, { all: true, approver: "ui", aspect });
+            onChanged(r);
+        }
+        catch (e) {
+            setErr(errorMessage(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const ready = plan && plan !== "none" && plan !== "error";
+    return (_jsxs(Drawer, { title: `Framing — ${source.name || source.id.slice(0, 8)}`, open: true, onClose: onClose, footer: ready ? (plan.approved ? (_jsxs(Badge, { tone: "ok", children: [_jsx(Icon, { name: "check", width: 12, height: 12 }), framingLabel(plan, false)] })) : (_jsxs(Button, { variant: "primary", onClick: () => void approve(), disabled: (busy === "approve"), "aria-busy": (busy === "approve") || undefined, children: [!(busy === "approve") && _jsx(Icon, { name: "check" }), busy === "approve" ? "Approving…" : "Approve framing"] }))) : (_jsx(Button, { variant: "primary", onClick: () => void analyze(), disabled: (busy === "analyse"), "aria-busy": (busy === "analyse") || undefined, children: busy === "analyse" ? "Analysing…" : _jsxs(_Fragment, { children: ["Analyse framing for ", aspect] }) })), children: [_jsxs("p", { className: "recipe__desc", style: { margin: 0 }, children: ["The ", aspect, " crop over sampled moments of this source. ", autoFraming ? "Saved policy approves tracked framing during delivery; review is optional." : "Approve it to unblock vertical output."] }), err && (_jsx("p", { role: "alert", style: { margin: 0, color: "var(--rk-bad)", fontSize: 13 }, children: err })), ready && (_jsx("div", { className: "recipe-anchors", children: shots.map((s, i) => (_jsxs("div", { className: "recipe-anchor", children: [s.src ? _jsx("img", { src: s.src, alt: "" }) : _jsx(Thumbnail, {}), s.src && (_jsx("span", { className: "recipe-anchor__crop", style: {
+                                left: `${s.crop.x * 100}%`,
+                                top: `${s.crop.y * 100}%`,
+                                width: `${s.crop.w * 100}%`,
+                                height: `${s.crop.h * 100}%`,
+                            } })), _jsx("span", { className: "recipe-anchor__t", children: timecode(s.mid_ms) })] }, i))) })), busy === "analyse" && _jsx(ProgressRow, { label: "Tracking the face", status: "working", fraction: undefined })] }));
+}

package/dist/views/BatchDelivery.d.ts

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