@rightkit/video-ui 0.0.0-stage → 0.1.1

package/dist/views/PromptPanel.js

@@ -0,0 +1,169 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, Field, Input, PageShell, SegmentedControl, Select, Toggle } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { engineCall, errorMessage } from "../lib/engine.js";
+import { genRightCallFailed, interpretHost } from "../lib/genright.js";
+import { durationControl, findModel, formatUsd, ofKind, parseCatalog, pickModel, providersOf, spendTotal, } from "../lib/models.js";
+import { ErrorPanel, ProgressRow, Icon } from "../ui/index.js";
+import { hostAppName } from "../appName.js";
+// Preferred starting picks; used only when the installed the host app lists them (else the cheapest of the kind).
+const DEFAULTS = {
+    video: { provider: "fal", model: "fal-ai/veo3.1/fast" },
+    image: { provider: "fal", model: "fal-ai/flux-2/klein/9b" },
+    voice: { provider: "elevenlabs", model: "eleven_v4_turbo" },
+};
+const TEMPLATES = [
+    { id: "lower_third", label: "Lower third" },
+    { id: "centered", label: "Centered" },
+    { id: "caption", label: "Caption" },
+];
+/** A shot of `kind` on the preferred (or cheapest) listed model, its default duration preselected. */
+function newShot(kind, catalog) {
+    const m = catalog ? pickModel(catalog, kind, DEFAULTS[kind]) : undefined;
+    return {
+        prompt: "",
+        kind,
+        duration_s: kind === "video" ? durationControl(m).initial : 4,
+        provider: m?.provider ?? DEFAULTS[kind].provider,
+        model: m?.model ?? DEFAULTS[kind].model,
+    };
+}
+/** Keeps a shot's model valid for its kind and its duration within the model's allowed values. */
+function fitShot(s, catalog) {
+    const m = findModel(catalog, s.provider, s.model);
+    if (!m || m.kind !== s.kind)
+        return { ...newShot(s.kind, catalog), prompt: s.prompt };
+    return s.kind === "video" ? { ...s, duration_s: fitDuration(durationControl(m), s.duration_s) } : s;
+}
+function fitDuration(c, d) {
+    if (c.type === "set")
+        return c.options.includes(d) ? d : c.initial;
+    if (c.type === "range")
+        return d >= c.min && d <= c.max ? d : c.initial;
+    return d;
+}
+function modelOptionLabel(m) {
+    return `${m.label}${m.estUsd !== null ? ` (${formatUsd(m.estUsd)})` : ""}`;
+}
+function ModelPicker({ catalog, kind, provider, model, onChange, providerLabel = "Provider", modelLabel = "Model", }) {
+    const providers = providersOf(catalog, kind);
+    const models = ofKind(catalog, kind).filter((m) => m.provider === provider);
+    const pick = (p, mdl) => {
+        const row = ofKind(catalog, kind).find((m) => m.provider === p && (mdl === undefined || m.model === mdl));
+        if (row)
+            onChange(row);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: providerLabel, children: (ids) => (_jsxs("select", { ...ids, className: "rk-input cr-select", value: provider, onChange: (e) => pick(e.target.value), children: [!providers.includes(provider) && _jsx("option", { value: provider, children: provider }), providers.map((p) => (_jsx("option", { value: p, children: p }, p)))] })) }), _jsx(Field, { label: modelLabel, children: (ids) => (_jsxs("select", { ...ids, className: "rk-input cr-select", value: model, onChange: (e) => pick(provider, e.target.value), children: [!models.some((m) => m.model === model) && _jsx("option", { value: model, children: model }), models.map((m) => (_jsx("option", { value: m.model, children: modelOptionLabel(m) }, m.model)))] })) })] }));
+}
+export function PromptPanel({ busy, progress, onSubmit, onOpenFinished, }) {
+    const [gr, setGr] = useState({ state: "checking" });
+    const [prompt, setPrompt] = useState("");
+    const [catalog, setCatalog] = useState(null);
+    const [catalogError, setCatalogError] = useState(null);
+    const [shots, setShots] = useState([newShot("video", null), newShot("video", null)]);
+    const [narrate, setNarrate] = useState(true);
+    const [narration, setNarration] = useState("");
+    const [voice, setVoice] = useState({ ...DEFAULTS.voice, voice: "" });
+    const [titles, setTitles] = useState([]);
+    const [preset, setPreset] = useState("youtube");
+    const [render, setRender] = useState(true);
+    const [confirming, setConfirming] = useState(false);
+    const check = useCallback(async () => {
+        setGr({ state: "checking" });
+        try {
+            setGr(interpretHost(await engineCall("genright.status", {})));
+        }
+        catch (e) {
+            setGr(genRightCallFailed(errorMessage(e)));
+        }
+    }, []);
+    useEffect(() => {
+        void check();
+    }, [check]);
+    // The model catalog (pickers, durations, estimates) comes from the installed the host app.
+    const ready0 = gr.state === "ready";
+    useEffect(() => {
+        if (!ready0)
+            return;
+        let live = true;
+        setCatalogError(null);
+        engineCall("genright.models", {})
+            .then((r) => {
+            if (!live)
+                return;
+            const c = parseCatalog(r);
+            setCatalog(c);
+            setShots((s) => s.map((x) => fitShot(x, c)));
+            setVoice((v) => {
+                const m = findModel(c, v.provider, v.model) ?? pickModel(c, "voice", DEFAULTS.voice);
+                return m ? { ...v, provider: m.provider, model: m.model } : v;
+            });
+        })
+            .catch((e) => {
+            if (live) {
+                setCatalog(null);
+                setCatalogError(errorMessage(e));
+            }
+        });
+        return () => {
+            live = false;
+        };
+    }, [ready0]);
+    const setCount = (n) => {
+        const count = Math.max(1, Math.min(6, n || 1));
+        setShots((s) => (count <= s.length ? s.slice(0, count) : [...s, ...Array.from({ length: count - s.length }, () => newShot("video", catalog))]));
+    };
+    const patchShot = (i, p) => setShots((s) => s.map((x, j) => (j === i ? { ...x, ...p } : x)));
+    const setKind = (i, kind) => {
+        const { provider, model, duration_s } = newShot(kind, catalog);
+        patchShot(i, { kind, provider, model, duration_s });
+    };
+    const setShotModel = (i, m) => setShots((all) => all.map((x, j) => j === i ? { ...x, provider: m.provider, model: m.model, duration_s: x.kind === "video" ? fitDuration(durationControl(m), x.duration_s) : x.duration_s } : x));
+    const patchTitle = (i, p) => setTitles((t) => t.map((x, j) => (j === i ? { ...x, ...p } : x)));
+    const form = useMemo(() => ({
+        prompt,
+        shots,
+        narration: narrate ? { text: narration, ...voice } : null,
+        titles,
+        preset,
+        render,
+    }), [prompt, shots, narrate, narration, voice, titles, preset, render]);
+    const narrates = narrate && narration.trim().length > 0;
+    const spend = useMemo(() => {
+        const lines = shots.map((s, i) => ({ label: `Shot ${i + 1}`, estUsd: findModel(catalog, s.provider, s.model)?.estUsd ?? null }));
+        if (narrates)
+            lines.push({ label: "Narration", estUsd: findModel(catalog, voice.provider, voice.model)?.estUsd ?? null });
+        return spendTotal(lines);
+    }, [catalog, shots, voice, narrates]);
+    const titlesOk = titles.every((t) => t.text.trim().length > 0 && t.text.length <= 160 && t.duration_s > 0 && t.start_s >= 0);
+    const valid = prompt.trim().length > 0 && shots.every((s) => s.provider && s.model && s.duration_s > 0) && titlesOk;
+    const ready = gr.state === "ready";
+    const disabled = !ready || busy || !valid;
+    return (_jsx(PageShell, { title: "From prompt", maxWidth: 0, subtitle: `Generate a video from a text prompt with ${hostAppName()}.`, children: _jsxs("div", { className: "Prompt", children: [_jsxs(Card, { children: [_jsxs("div", { className: "Prompt-grRow", "aria-live": "polite", children: [_jsx("span", { className: "Prompt-label", children: hostAppName() }), _jsx("span", { title: ready
+                                        ? `${hostAppName()} ${gr.appVersion ?? ""} · contract ${gr.found ?? "?"}`
+                                        : (gr.detail ?? undefined), children: _jsx(Badge, { tone: ready ? "ok" : gr.state === "checking" ? "neutral" : "warn", children: ready ? `${hostAppName()} ready` : gr.state === "checking" ? "Checking…" : gr.state }) }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => void check(), children: "Re-check" })] }), !ready && gr.state !== "checking" && (_jsx(ErrorPanel, { title: gr.state === "outdated"
+                                ? `Update ${hostAppName()}`
+                                : gr.state === "missing"
+                                    ? `Install ${hostAppName()}`
+                                    : `${hostAppName()} could not be started`, detail: (gr.state === "outdated" && gr.found !== undefined && gr.required !== undefined
+                                ? `The installed ${hostAppName()} speaks engine contract ${gr.found}; ${hostAppName()} needs ${gr.required}. Update ${hostAppName()}, then re-check.`
+                                : gr.state === "outdated"
+                                    ? `The installed ${hostAppName()} is too old for ${hostAppName()}. Update ${hostAppName()}, then re-check.`
+                                    : gr.state === "missing"
+                                        ? `${hostAppName()} generates media through the ${hostAppName()} app. Install ${hostAppName()}, then re-check.`
+                                        : `${hostAppName()} is installed but its engine did not run. Reinstall or update ${hostAppName()}, then re-check.`) +
+                                (gr.detail ? ` (${gr.detail})` : "") +
+                                (gr.enginePath ? ` Engine: ${gr.enginePath}` : "") })), catalogError && (_jsxs("p", { role: "status", className: "Prompt-error", children: ["Could not load ", hostAppName(), "'s model list (", catalogError, "); enter provider and model by hand."] })), _jsx(Field, { label: "Prompt", children: (ids) => (_jsx("textarea", { ...ids, className: "rk-input cr-textarea", value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "What is the video about?" })) })] }), _jsxs(Card, { children: [_jsxs("div", { className: "Prompt-cardHead", children: [_jsx("h2", { children: "Shots" }), _jsx(SegmentedControl, { label: "Number of shots", value: String(Math.min(shots.length, 6)), options: ["1", "2", "3", "4", "5", "6"].map((v) => ({ value: v, label: v })), onChange: (v) => setCount(Number(v)) })] }), shots.map((s, i) => (_jsxs("div", { className: "Prompt-shotRow", children: [_jsxs("div", { className: "Prompt-shotGrid", children: [_jsx(Field, { label: `Shot ${i + 1} · kind`, children: (ids) => (_jsxs("select", { ...ids, className: "rk-input cr-select", "aria-label": `Shot ${i + 1} kind`, value: s.kind, onChange: (e) => setKind(i, e.target.value), children: [_jsx("option", { value: "video", children: "Video" }), _jsx("option", { value: "image", children: "Image" })] })) }), catalog ? (_jsx(ModelPicker, { catalog: catalog, kind: s.kind, provider: s.provider, model: s.model, providerLabel: "Provider", modelLabel: "Model", onChange: (m) => setShotModel(i, m) })) : (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Provider", children: (ids) => (_jsx(Input, { ...ids, value: s.provider, onChange: (e) => patchShot(i, { provider: e.target.value }) })) }), _jsx(Field, { label: "Model", children: (ids) => (_jsx(Input, { ...ids, value: s.model, onChange: (e) => patchShot(i, { model: e.target.value }) })) })] })), _jsx(Field, { label: s.kind === "image" ? "Still (s)" : "Duration (s)", children: () => (_jsx(DurationInput, { control: s.kind === "video" ? durationControl(findModel(catalog, s.provider, s.model)) : { type: "free", initial: 4 }, value: s.duration_s, onChange: (d) => patchShot(i, { duration_s: d }) })) })] }), _jsx(Field, { label: "Shot prompt", note: "Optional — defaults to the main prompt.", children: (ids) => (_jsx(Input, { ...ids, value: s.prompt, onChange: (e) => patchShot(i, { prompt: e.target.value }) })) })] }, i)))] }), _jsxs(Card, { children: [_jsxs("div", { className: "Prompt-cardHead", children: [_jsx("h2", { children: "Narration" }), _jsx(Toggle, { label: "Generate a voiceover", checked: narrate, onChange: setNarrate })] }), narrate && (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Narration script", children: (ids) => (_jsx("textarea", { ...ids, className: "rk-input cr-textarea", value: narration, onChange: (e) => setNarration(e.target.value) })) }), _jsxs("div", { className: "Prompt-shotGrid Prompt-shotGrid--auto", children: [catalog ? (_jsx(ModelPicker, { catalog: catalog, kind: "voice", provider: voice.provider, model: voice.model, providerLabel: "Voice provider", modelLabel: "Voice model", onChange: (m) => setVoice({ ...voice, provider: m.provider, model: m.model }) })) : (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Voice provider", children: (ids) => (_jsx(Input, { ...ids, value: voice.provider, onChange: (e) => setVoice({ ...voice, provider: e.target.value }) })) }), _jsx(Field, { label: "Voice model", children: (ids) => (_jsx(Input, { ...ids, value: voice.model, onChange: (e) => setVoice({ ...voice, model: e.target.value }) })) })] })), _jsx(Field, { label: "Voice", note: "Optional", children: (ids) => (_jsx(Input, { ...ids, value: voice.voice, onChange: (e) => setVoice({ ...voice, voice: e.target.value }) })) })] })] }))] }), _jsxs(Card, { children: [_jsxs("div", { className: "Prompt-cardHead", children: [_jsx("h2", { children: "Titles" }), _jsxs(Button, { size: "sm", variant: "secondary", onClick: () => setTitles((x) => [...x, { template: "lower_third", text: "", subtitle: "", start_s: 0, duration_s: 3 }]), children: [_jsx(Icon, { name: "plus" }), "Add title"] })] }), titles.map((t, i) => (_jsxs("div", { className: "Prompt-titleRow", children: [_jsx(Field, { label: "Template", children: (ids) => (_jsx("select", { ...ids, className: "rk-input cr-select", value: t.template, onChange: (e) => patchTitle(i, { template: e.target.value }), children: TEMPLATES.map((x) => (_jsx("option", { value: x.id, children: x.label }, x.id))) })) }), _jsx(Field, { label: t.template === "lower_third" ? "Title" : "Text", children: (ids) => (_jsx(Input, { ...ids, maxLength: 160, value: t.text, onChange: (e) => patchTitle(i, { text: e.target.value }) })) }), t.template === "lower_third" && (_jsx(Field, { label: "Subtitle", note: "Optional", children: (ids) => (_jsx(Input, { ...ids, maxLength: 160, value: t.subtitle, onChange: (e) => patchTitle(i, { subtitle: e.target.value }) })) })), _jsx(Field, { label: "Start (s)", children: (ids) => (_jsx(Input, { ...ids, type: "number", min: 0, step: 0.5, value: t.start_s, onChange: (e) => patchTitle(i, { start_s: Number(e.target.value) }) })) }), _jsx(Field, { label: "Length (s)", children: (ids) => (_jsx(Input, { ...ids, type: "number", min: 0.5, step: 0.5, value: t.duration_s, onChange: (e) => patchTitle(i, { duration_s: Number(e.target.value) }) })) }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setTitles((x) => x.filter((_, j) => j !== i)), children: "Remove" })] }, i)))] }), _jsxs(Card, { children: [_jsx("div", { className: "Prompt-cardHead", children: _jsx("h2", { children: "Output" }) }), _jsxs("div", { className: "Prompt-shotGrid Prompt-shotGrid--auto", children: [_jsx(Field, { label: "Aspect", children: (ids) => (_jsxs("select", { ...ids, className: "rk-input cr-select", value: preset, onChange: (e) => setPreset(e.target.value), children: [_jsx("option", { value: "youtube", children: "16:9 (YouTube)" }), _jsx("option", { value: "reels", children: "9:16 (vertical)" })] })) }), _jsx(Field, { label: "Render", note: "Render the finished edit at the end.", children: () => (_jsx(Toggle, { label: "Render final", checked: render, onChange: setRender })) })] })] }), busy && progress && progress.stages.length > 0 && (_jsx(Card, { children: progress.stages.map((s, i) => (_jsx(ProgressRow, { label: s, status: i === progress.stages.length - 1 ? "Running" : "Done", tone: i === progress.stages.length - 1 ? "info" : "ok" }, s))) })), progress?.done && onOpenFinished && (_jsx(Card, { children: _jsxs("div", { className: "Prompt-grRow", children: [_jsx(Badge, { tone: "ok", children: "Finished edit ready" }), _jsx(Button, { variant: "secondary", onClick: onOpenFinished, children: "Open finished edit" })] }) })), !confirming ? (_jsx("div", { className: "Prompt-actions", children: _jsx(Button, { variant: "primary", disabled: disabled, onClick: () => setConfirming(true), children: "Assemble" }) })) : (_jsx(Card, { className: "Prompt-confirm", children: _jsxs("div", { role: "group", "aria-label": "Confirm paid generation", className: "Prompt-confirmInner", children: [_jsxs("p", { className: "m-0", children: ["This submits paid ", hostAppName(), " jobs (", shots.length, " shot", shots.length === 1 ? "" : "s", narrates ? " plus narration" : "", ")."] }), _jsxs("p", { className: "m-0", "data-testid": "spend-estimate", children: [_jsxs("strong", { children: ["Estimate: ", catalog ? `about ${formatUsd(spend.total)}` : "unavailable"] }), catalog && spend.unpriced > 0
+                                        ? ` plus ${spend.unpriced} job${spend.unpriced === 1 ? "" : "s"} without a listed price`
+                                        : "", ". This is ", hostAppName(), "'s own estimate; the final bill may differ."] }), _jsxs("div", { className: "Prompt-actions", children: [_jsx(Button, { variant: "primary", disabled: disabled, onClick: () => {
+                                            setConfirming(false);
+                                            onSubmit(form);
+                                        }, children: "Confirm and generate" }), _jsx(Button, { variant: "secondary", onClick: () => setConfirming(false), children: "Back" })] })] }) }))] }) }));
+}
+function DurationInput({ control, value, onChange }) {
+    if (control.type === "set") {
+        return (_jsx(Select, { label: "Duration (s)", value: String(value), options: control.options.map((d) => ({ value: String(d), label: String(d) })), onChange: (next) => onChange(Number(next)) }));
+    }
+    const [min, max] = control.type === "range" ? [control.min, control.max] : [1, 30];
+    return (_jsx(Input, { type: "number", min: min, max: max, step: control.type === "range" ? 1 : 0.5, value: value, onChange: (e) => onChange(Number(e.target.value)) }));
+}

package/dist/views/Recipe.css

@@ -0,0 +1,84 @@
+/* Edit recipe screen — docs/design/app-ui.md §3.3. Tokens only. */
+
+.recipe { display: grid; grid-template-columns: 420px 1fr; gap: var(--s6); align-items: start; }
+.recipe__form { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
+.recipe__form h2 { margin: 0; font: 600 15px/1.3 var(--rk-font-body); }
+.recipe__desc { margin: 0; font-size: 12px; color: var(--rk-ink-2); }
+.recipe__chips { display: flex; flex-wrap: nowrap; gap: var(--s1); }
+.recipe__run { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
+/* The run bar stays in view over the form, so it needs its own ground: without one its
+   text is drawn over whatever scrolls beneath it. */
+.recipe__cta {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  padding: var(--s2) 0;
+  background: var(--rk-plane);
+}
+/* Leave room so the last control of the form can scroll clear of the bar. */
+.recipe__form { padding-bottom: var(--s6); }
+.recipe__blocked { margin: 0; font-size: 12px; color: var(--rk-warn); }
+
+.recipe-frame-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+}
+.recipe-frame-row .cr-thumb { width: 96px; flex: none; }
+.recipe-frame-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+
+.recipe-source-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+  font-size: 13px;
+}
+.recipe-source-row input { accent-color: var(--rk-accent); }
+.recipe-source-row .cr-thumb { width: 56px; flex: none; }
+.recipe-source-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* R3: the swatch is an engine-rendered PNG (`captions.preview`), not a CSS approximation. */
+.recipe-swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border-radius: var(--r-sm);
+  background: var(--cr-stage);
+}
+.recipe-swatch-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: var(--r-sm);
+  background: var(--cr-stage);
+}
+
+.recipe-lut-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+  min-width: 0;
+}
+.recipe-lut-row .recipe__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.recipe-anchors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
+.recipe-anchor { position: relative; border-radius: var(--r-sm); overflow: hidden; }
+.recipe-anchor img { display: block; width: 100%; }
+.recipe-anchor__crop {
+  position: absolute;
+  border: 2px solid var(--rk-accent);
+  border-radius: 2px;
+  box-shadow: 0 0 0 999px rgb(0 0 0 / 0.35);
+}
+.recipe-anchor__t {
+  position: absolute;
+  left: 4px;
+  bottom: 4px;
+  font: 10px/1 var(--rk-font-mono);
+  color: rgb(255 255 255);
+  background: rgb(0 0 0 / 0.6);
+  padding: 2px 4px;
+  border-radius: 4px;
+}

package/dist/views/RecipeLibrary.d.ts

@@ -0,0 +1,7 @@
+/** Panel on the Edit recipe screen: apply a saved recipe here, or save this project's recipe to the library. */
+export declare function RecipeLibrary({ dir, onApplied, onBeforeSave, }: {
+    dir: string;
+    onApplied?: () => void;
+    /** Writes what the Edit recipe screen shows into the project, so that is what gets saved. */
+    onBeforeSave?: () => Promise<void>;
+}): import("react").JSX.Element;

package/dist/views/RecipeLibrary.js

@@ -0,0 +1,104 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Channel recipe — the app-wide recipe library applied to one project (recipes.* engine methods).
+import { Button, Field, Input, useToast } from "@rightkit/react-shell/react";
+import { Icon } from "../ui/index.js";
+import { useCallback, useEffect, useState } from "react";
+import { errorMessage } from "../lib/engine.js";
+import { RECIPE_ID_RULE, recipesApply, recipesDelete, recipesList, recipesSaveFromProject, recipesStatus, } from "../lib/media.js";
+const ID_RULE_TEXT = "Use 1–64 lowercase letters, digits or hyphens.";
+/** Panel on the Edit recipe screen: apply a saved recipe here, or save this project's recipe to the library. */
+export function RecipeLibrary({ dir, onApplied, onBeforeSave, }) {
+    const toast = useToast();
+    const [library, setLibrary] = useState([]);
+    const [status, setStatus] = useState(null);
+    const [selected, setSelected] = useState("");
+    const [saveId, setSaveId] = useState("");
+    const [saveName, setSaveName] = useState("");
+    const [armed, setArmed] = useState(false);
+    const [busy, setBusy] = useState(null);
+    const [error, setError] = useState(null);
+    const refresh = useCallback(async () => {
+        const [list, st] = await Promise.all([recipesList(), recipesStatus(dir)]);
+        setLibrary(list.recipes);
+        setStatus(st);
+        setSelected((cur) => (list.recipes.some((r) => r.id === cur) ? cur : ""));
+    }, [dir]);
+    useEffect(() => {
+        refresh().catch((e) => setError(errorMessage(e)));
+    }, [refresh]);
+    // A pending delete never survives a change of selection.
+    useEffect(() => {
+        setArmed(false);
+    }, [selected]);
+    /** Runs one write, then the caller's reload; failures stay visible inline. */
+    const act = async (tag, fn) => {
+        setBusy(tag);
+        setError(null);
+        try {
+            await fn();
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const applied = status?.ref ?? null;
+    const appliedName = applied ? (library.find((r) => r.id === applied.id)?.name ?? applied.id) : "";
+    const selectedRow = library.find((r) => r.id === selected);
+    const idError = saveId !== "" && !RECIPE_ID_RULE.test(saveId) ? ID_RULE_TEXT : null;
+    const existing = idError === null ? library.find((r) => r.id === saveId) : undefined;
+    const saveLabel = existing ? `Update ${existing.id} to v${existing.version + 1}` : "Save recipe";
+    const canSave = busy === null && saveId !== "" && idError === null && saveName.trim() !== "";
+    const statusText = !status
+        ? "Checking the applied recipe…"
+        : !applied
+            ? "No saved recipe applied"
+            : [
+                `Using ${appliedName} v${applied.version}`,
+                status.overridden ? "edited in this project" : null,
+                status.update_available
+                    ? status.library_version != null
+                        ? `update available (v${status.library_version})`
+                        : "update available"
+                    : null,
+            ]
+                .filter(Boolean)
+                .join(" · ");
+    const apply = () => void act("apply", async () => {
+        await recipesApply(dir, selected);
+        toast(`Applied ${selectedRow?.name ?? selected} to this project`, { kind: "success" });
+        await refresh();
+        onApplied?.();
+    });
+    const save = () => void act("save", async () => {
+        const name = saveName.trim();
+        await onBeforeSave?.();
+        await recipesSaveFromProject({ dir, id: saveId, name });
+        toast(`Saved ${name} as ${saveId}`, { kind: "success" });
+        setSelected(saveId);
+        setSaveId("");
+        setSaveName("");
+        await refresh();
+    });
+    const remove = () => {
+        if (!selectedRow)
+            return;
+        if (!armed) {
+            setArmed(true);
+            return;
+        }
+        setArmed(false);
+        void act("delete", async () => {
+            await recipesDelete(selectedRow.id);
+            toast(`Deleted ${selectedRow.name}`, { kind: "success" });
+            setSelected("");
+            await refresh();
+        });
+    };
+    return (_jsxs("section", { className: "recipe-library", "data-testid": "recipe-library", "aria-label": "Channel recipe", children: [_jsx("h2", { className: "panel-title", children: "Channel recipe" }), _jsxs("p", { className: "panel-note recipe-status", "data-testid": "recipe-status", children: [statusText, status?.overridden && (_jsxs(_Fragment, { children: [_jsx("br", {}), "Applying replaces this project's recipe settings."] }))] }), _jsxs("div", { className: "panel-stack", children: [_jsx(Field, { label: "Library recipe", children: (ids) => (_jsxs("select", { ...ids, className: "rk-input cr-select", "data-testid": "recipe-select", value: selected, disabled: library.length === 0, onChange: (e) => setSelected(e.target.value), children: [_jsx("option", { value: "", children: library.length === 0 ? "No saved recipes yet" : "Choose a recipe…" }), library.map((r) => (_jsx("option", { value: r.id, children: `${r.name} (v${r.version})` }, r.id)))] })) }), _jsxs("div", { className: "panel-row", children: [_jsxs(Button, { variant: "primary", size: "sm", "data-testid": "recipe-apply", onClick: apply, disabled: (!selectedRow || busy !== null) || (busy === "apply"), "aria-busy": (busy === "apply") || undefined, children: [!(busy === "apply") && _jsx(Icon, { name: "check" }), busy === "apply" ? "Applying…" : "Apply to this project"] }), _jsxs(Button, { variant: armed ? "danger" : "ghost", size: "sm", "data-testid": "recipe-delete", onClick: remove, onKeyDown: (e) => {
+                                    if (e.key === "Escape")
+                                        setArmed(false);
+                                }, onBlur: () => setArmed(false), disabled: (!selectedRow || (busy !== null && busy !== "delete")) || (busy === "delete"), "aria-busy": (busy === "delete") || undefined, children: [!(busy === "delete") && _jsx(Icon, { name: "trash-2" }), busy === "delete" ? "Deleting…" : armed ? "Confirm delete" : "Delete"] })] })] }), _jsxs("div", { className: "panel-stack", children: [_jsx("span", { className: "cr-overline", children: "Save this project's recipe as\u2026" }), _jsx(Field, { label: "Recipe id", children: (ids) => (_jsx(Input, { ...ids, "data-testid": "recipe-save-id", value: saveId, placeholder: "talking-head", "aria-invalid": idError ? true : undefined, onChange: (e) => setSaveId(e.target.value) })) }), idError && (_jsx("p", { role: "alert", className: "panel-error", "data-testid": "recipe-save-id-error", children: idError })), _jsx(Field, { label: "Name", children: (ids) => (_jsx(Input, { ...ids, "data-testid": "recipe-save-name", value: saveName, placeholder: "Talking head, 16:9 and 9:16", onChange: (e) => setSaveName(e.target.value) })) }), _jsx("div", { className: "panel-row", children: _jsx(Button, { variant: "secondary", size: "sm", "data-testid": "recipe-save", onClick: save, disabled: (!canSave) || (busy === "save"), "aria-busy": (busy === "save") || undefined, children: busy === "save" ? "Saving…" : saveLabel }) })] }), error && (_jsx("p", { role: "alert", className: "panel-error", "data-testid": "recipe-error", children: error }))] }));
+}

package/dist/views/Retention.css

@@ -0,0 +1,49 @@
+/* Retention — docs/design/app-ui.md §3.6 */
+
+.retention-body { display: flex; flex-direction: column; gap: var(--s4); max-width: 860px; }
+
+.retention-controls { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
+.retention-controls .rk-field { width: 240px; }
+.retention-controls__or { font-size: 12px; padding-bottom: 8px; }
+
+.retention-imports { display: flex; flex-wrap: wrap; gap: var(--s2); }
+
+.retention-chart { position: relative; }
+.retention-chart svg { width: 100%; height: 160px; display: block; }
+.retention-chart circle { cursor: default; }
+.retention-chart__axis {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  margin-top: var(--s1);
+  padding-left: 34px;
+}
+.retention-tip {
+  position: absolute;
+  transform: translateY(-100%);
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-sm);
+  box-shadow: var(--rk-pop);
+  padding: 4px var(--s2);
+  font-size: 10px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.retention-drops { display: flex; flex-direction: column; gap: var(--s2); }
+.retention-drop {
+  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;
+  cursor: pointer;
+}
+.retention-drop input { accent-color: var(--rk-accent); }
+.retention-drop__map { font-size: 12px; margin-left: auto; flex: none; }
+.retention-none { margin: 0; font-size: 13px; }

package/dist/views/RetentionView.d.ts

@@ -0,0 +1,7 @@
+export declare function RetentionView({ dir, onChanged, onExportRevised, preselectRender, }: {
+    dir: string;
+    onChanged: () => Promise<void>;
+    onExportRevised?: () => void;
+    /** R5: Exports "Import retention…" routes here with this render preselected. */
+    preselectRender?: string;
+}): import("react").JSX.Element;

package/dist/views/RetentionView.js

@@ -0,0 +1,145 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Retention — docs/design/app-ui.md §3.6. Audience-retention CSV bound to one
+// exact render; drop-offs become cut proposals applied as one revision.
+import { Badge, Button, Card, Checkbox, EmptyState, Field, PageShell, useToast } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { errorMessage } from "../lib/engine.js";
+import { mediaScopeAllow, rendersList, retentionApply, retentionImport, retentionList, retentionShow, } from "../lib/media.js";
+import { assetUrl } from "../lib/asset.js";
+import { pickFile } from "../lib/dialog.js";
+import { ErrorPanel, timecode, Icon } from "../ui/index.js";
+/** Retention % line chart, inline SVG on tokens (spec §3.6). 160px tall. */
+function RetentionChart({ points, drops }) {
+    const [tip, setTip] = useState(null);
+    const W = 640;
+    const H = 160;
+    const PAD = { l: 34, r: 8, t: 8, b: 18 };
+    const iw = W - PAD.l - PAD.r;
+    const ih = H - PAD.t - PAD.b;
+    const maxMs = Math.max(...points.map((p) => p.out_ms), 1);
+    const x = (ms) => PAD.l + (ms / maxMs) * iw;
+    const y = (v) => PAD.t + (1 - Math.max(0, Math.min(100, v)) / 100) * ih;
+    const path = points.map((p, i) => `${i === 0 ? "M" : "L"}${x(p.out_ms).toFixed(1)},${y(p.retention).toFixed(1)}`).join(" ");
+    return (_jsxs("div", { className: "retention-chart", children: [_jsxs("svg", { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", role: "img", "aria-label": "Retention over time", children: [[0, 25, 50, 75, 100].map((g) => (_jsxs("g", { children: [_jsx("line", { x1: PAD.l, x2: W - PAD.r, y1: y(g), y2: y(g), stroke: "var(--rk-line)", strokeWidth: 1 }), _jsx("text", { x: 4, y: y(g) + 3, fill: "var(--rk-ink-2)", fontSize: 9, fontFamily: "var(--rk-font-mono)", children: g })] }, g))), _jsx("path", { d: path, fill: "none", stroke: "var(--rk-accent)", strokeWidth: 1.6 }), drops.map((d) => {
+                        const cx = x(d.out_start_ms);
+                        const near = points.reduce((best, p) => (Math.abs(p.out_ms - d.out_start_ms) < Math.abs(best.out_ms - d.out_start_ms) ? p : best), points[0] ?? { out_ms: 0, retention: 50 });
+                        return (_jsx("circle", { cx: cx, cy: y(near.retention), r: 4, fill: "var(--rk-bad)", onMouseEnter: () => setTip({ x: cx, y: y(near.retention), text: `${timecode(d.out_start_ms)} · −${d.drop_points.toFixed(1)} pts` }), onMouseLeave: () => setTip(null) }, d.id));
+                    })] }), tip && (_jsx("div", { className: "retention-tip cr-mono", style: { left: `min(${(tip.x / W) * 100}%, 80%)`, top: tip.y - 8 }, children: tip.text })), _jsxs("div", { className: "retention-chart__axis cr-muted", children: [_jsx("span", { children: "0:00" }), _jsx("span", { className: "cr-mono", children: timecode(maxMs) })] })] }));
+}
+export function RetentionView({ dir, onChanged, onExportRevised, preselectRender, }) {
+    const toast = useToast();
+    const [renders, setRenders] = useState([]);
+    const [imports, setImports] = useState([]);
+    const [active, setActive] = useState(null);
+    const [csv, setCsv] = useState("");
+    const [render, setRender] = useState("");
+    const [checked, setChecked] = useState(new Set());
+    const [busy, setBusy] = useState(null);
+    const [error, setError] = useState(null);
+    const dirty = useRef(false);
+    const refresh = useCallback(async () => {
+        const [r, ret] = await Promise.all([rendersList(dir), retentionList(dir)]);
+        const mp4s = r.renders.filter((f) => f.name.endsWith(".mp4"));
+        setRenders(mp4s);
+        setImports(ret.retention);
+        setRender((cur) => cur || mp4s[0]?.name || "");
+    }, [dir]);
+    useEffect(() => {
+        refresh().catch((e) => setError(errorMessage(e)));
+    }, [refresh]);
+    // Route in from Exports with a specific render preselected.
+    useEffect(() => {
+        if (preselectRender)
+            setRender(preselectRender);
+    }, [preselectRender]);
+    const open = useCallback(async (name) => {
+        setBusy(`show-${name}`);
+        setError(null);
+        try {
+            const s = await retentionShow(dir, name);
+            setActive(s);
+            setChecked(new Set((s.drop_offs ?? []).map((d) => d.id)));
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [dir]);
+    // Auto-open the newest import (but don't clobber the user's selection).
+    useEffect(() => {
+        if (!active && !dirty.current && imports.length > 0) {
+            void open(imports[imports.length - 1].name);
+        }
+    }, [imports, active, open]);
+    const doImport = async (text) => {
+        if (!text.trim() || !render)
+            return;
+        setBusy("import");
+        setError(null);
+        try {
+            const r = await retentionImport(dir, text, render);
+            toast(`Imported ${r.points} retention points — ${r.drop_offs} drop-off proposals`, { kind: "success" });
+            setCsv("");
+            await refresh();
+            await open(r.name);
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const importFile = async () => {
+        const file = await pickFile("Import retention CSV", ["csv", "txt"]);
+        if (!file)
+            return;
+        setBusy("import");
+        try {
+            await mediaScopeAllow([file]);
+            const text = await fetch(assetUrl(file)).then((r) => {
+                if (!r.ok)
+                    throw new Error(`could not read ${file}`);
+                return r.text();
+            });
+            await doImport(text);
+        }
+        catch (e) {
+            setError(errorMessage(e));
+            setBusy(null);
+        }
+    };
+    const apply = async () => {
+        if (!active)
+            return;
+        setBusy("apply");
+        setError(null);
+        try {
+            const res = await retentionApply(dir, active.name, [...checked]);
+            toast(`Applied ${res.cuts} cut${res.cuts === 1 ? "" : "s"} — re-export to deliver`, { kind: "success", action: onExportRevised ? { label: "Export revised", run: onExportRevised } : undefined });
+            dirty.current = true;
+            setActive(null);
+            await refresh();
+            await onChanged();
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const drops = active?.drop_offs ?? [];
+    return (_jsx(PageShell, { title: "Retention", maxWidth: 0, subtitle: "Audience drop-offs mapped onto your exports", children: _jsxs("div", { className: "retention-body", children: [_jsxs("div", { className: "retention-controls", children: [_jsx(Field, { label: "Export", children: (ids) => (_jsxs("select", { ...ids, className: "rk-input cr-select", value: render, onChange: (e) => setRender(e.target.value), children: [renders.length === 0 && _jsx("option", { value: "", children: "No exports yet" }), renders.map((r) => (_jsx("option", { value: r.name, children: r.name }, r.path)))] })) }), _jsxs(Button, { variant: "secondary", disabled: !render || busy !== null, onClick: () => void importFile(), children: [_jsx(Icon, { name: "upload" }), "Import CSV\u2026"] }), _jsxs("span", { className: "cr-muted retention-controls__or", children: ["or paste ", _jsx("span", { className: "cr-mono", children: "time,retention" }), " rows:"] })] }), _jsx("textarea", { className: "rk-input cr-textarea", placeholder: "time,retention\n0,100\n1,97\n5,72", value: csv, onChange: (e) => setCsv(e.target.value) }), _jsx("div", { children: _jsx(Button, { variant: "secondary", onClick: () => void doImport(csv), disabled: (!csv.trim() || !render) || (busy === "import"), "aria-busy": (busy === "import") || undefined, children: busy === "import" ? "Importing…" : "Import" }) }), error && _jsx(ErrorPanel, { title: "Retention failed", detail: error }), imports.length > 0 && (_jsx("div", { className: "retention-imports", children: imports.map((r) => (_jsx(Button, { variant: "ghost", size: "sm", className: "cr-chip-btn", onClick: () => void open(r.name), title: `${r.points} points${r.drop_offs != null ? ` · ${r.drop_offs} drop-offs` : ""}`, children: _jsx(Badge, { tone: active?.name === r.name ? "accent" : "neutral", children: r.name }) }, r.name))) })), active?.stale && (_jsx(ErrorPanel, { title: "This analysis is stale", detail: active.render_exists
+                        ? `The export ${active.render} changed since this CSV was imported. Re-import the retention data against the current file.`
+                        : `The export ${active.render} no longer exists. Re-render, then import the retention data again.` })), active && active.points.length > 0 && (_jsx(Card, { children: _jsx(RetentionChart, { points: active.points, drops: drops.filter((d) => checked.has(d.id)) }) })), active && drops.length > 0 && (_jsxs("div", { className: "retention-drops", children: [_jsx("span", { className: "cr-overline", children: "Drop-off cuts" }), drops.map((d) => (_jsx(Checkbox, { className: "retention-drop", checked: checked.has(d.id), onChange: (checked) => setChecked((s) => {
+                                const n = new Set(s);
+                                if (checked)
+                                    n.add(d.id);
+                                else
+                                    n.delete(d.id);
+                                return n;
+                            }), label: _jsxs("span", { style: { display: "flex", alignItems: "center", gap: "var(--s3)" }, children: [_jsxs("span", { className: "cr-mono cr-muted", children: [timecode(d.out_start_ms), "\u2013", timecode(d.out_end_ms)] }), _jsxs(Badge, { tone: "bad", children: ["\u2212", d.drop_points.toFixed(1), " pts"] }), d.suggested && _jsx("span", { className: "cr-muted cr-clamp-1", children: d.suggested }), _jsxs("span", { className: "cr-muted retention-drop__map", children: ["maps to ", d.source_mappings.length, " source range", d.source_mappings.length === 1 ? "" : "s"] })] }) }, d.id))), _jsx("div", { children: _jsx(Button, { variant: "primary", onClick: () => void apply(), disabled: (checked.size === 0 || active.stale) || (busy === "apply"), "aria-busy": (busy === "apply") || undefined, children: busy === "apply" ? "Applying…" : _jsxs(_Fragment, { children: ["Apply ", checked.size, " cut", checked.size === 1 ? "" : "s"] }) }) })] })), active && drops.length === 0 && !active.stale && (_jsx("p", { className: "cr-muted retention-none", children: "No drop-off cuts proposed for this import." })), imports.length === 0 && !error && (_jsx(EmptyState, { title: "No retention data yet", icon: _jsx(Icon, { name: "chart-line", width: 28, height: 28 }), children: "Export a render, then import the retention CSV your platform gives you." }))] }) }));
+}

package/dist/views/SettingsView.d.ts

@@ -0,0 +1,9 @@
+import type { DoctorReport, EngineStatus } from "../lib/engine.js";
+export declare function SettingsView({ dir, doctor, error, section, }: {
+    dir: string | null;
+    status: EngineStatus | null;
+    doctor: DoctorReport | null;
+    error: string | null;
+    /** Land on this section (engine status → "engine"). */
+    section?: string;
+}): import("react").JSX.Element;