@rightkit/video-ui 0.0.0-stage → 0.1.0

package/dist/views/SettingsView.js

@@ -0,0 +1,235 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Dialog, SegmentedControl, Input, Select, Toggle, useShell, useToast } from "@rightkit/react-shell/react";
+import { Suspense, lazy, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { getVersion } from "@tauri-apps/api/app";
+import { SettingRow, SettingsGroup, SettingsPanel, aboutSection, appearanceSection, diagnosticsSection, formatBytes, legalSection, licenseSection, mergeSections, modelsSection, updatesSection, } from "@rightkit/settings-ui";
+import { Kbd } from "@rightkit/react-shell/react";
+import { engineCall, errorMessage } from "../lib/engine.js";
+import { CAPTION_STYLES, DEFAULT_CAPTION_STYLE, storageClear, storageStatus } from "../lib/media.js";
+import { genRightCallFailed, interpretHost } from "../lib/genright.js";
+import { pickFile, pickFolder } from "../lib/dialog.js";
+import { createModelsBackend } from "../lib/modelsBackend.js";
+import { createHostSettingsBackend } from "../lib/settingsBackend.js";
+import { themeStore } from "../lib/shell.js";
+import { licenseClient, logs, restartAfterUpdate, updates } from "../lib/services.js";
+import { LEGAL_GATE_DOCUMENTS, legalDocumentText } from "../legal/legalConfig.js";
+import { LegalDocumentBody } from "@rightkit/legal-ui";
+import { usePlatform } from "@rightkit/platform-ui/react";
+import { HDR_COLOR_PRESETS, HDR_UNAVAILABLE_NOTICE, useHdrToSdr } from "../hooks/useHdrToSdr.js";
+import { hostAppName } from "../appName.js";
+const COLOR_PRESETS = [
+    ["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"],
+];
+const AUDIO_PRESETS = [
+    ["", "None"],
+    ["talking-head", "Talking head"],
+    ["podcast", "Podcast"],
+    ["noisy-room", "Noisy room"],
+];
+/** Plain-language rows for the engine's readiness checks. An optional check never reads as "engine not ready". */
+const DIAGNOSTICS = [
+    {
+        id: "data_dir",
+        label: "App data folder",
+        sentence: {
+            ok: `Writable — ${hostAppName()} can save projects, settings and caches here.`,
+            failed: `Not writable — ${hostAppName()} cannot save projects until this is fixed.`,
+            missing: "Not found on this machine.",
+        },
+    },
+    {
+        id: "resource_dir",
+        label: "App resources",
+        sentence: {
+            ok: "Found — bundled tools are available.",
+            failed: "Not readable — bundled tools are unavailable.",
+            missing: "Not running from an app bundle; bundled tools are unavailable.",
+        },
+    },
+    {
+        id: "editing_ffmpeg",
+        label: "Video engine (FFmpeg)",
+        sentence: {
+            ok: "Found — probing, thumbnails and rendering work.",
+            failed: "Present but unusable — media features will fail.",
+            missing: "Not found — probing, thumbnails and rendering will fail.",
+        },
+    },
+    {
+        id: "hdr_to_sdr",
+        label: "HDR to SDR conversion",
+        optional: true,
+        sentence: {
+            ok: "Available — HDR (PQ or HLG) footage can be finished to SDR here.",
+            failed: "Not available — HDR (PQ or HLG) footage cannot be finished on this computer.",
+            missing: "This engine version does not report HDR to SDR conversion.",
+        },
+    },
+];
+/** Colour finish options; with HDR to SDR unavailable the HDR presets stay selectable but say so. */
+function colourOptions(hdr) {
+    return COLOR_PRESETS.map(([v, l]) => hdr === false && HDR_COLOR_PRESETS.includes(v) ? [v, `${l} — not available on this computer`] : [v, l]);
+}
+const str = (v, fallback = "") => (v === undefined || v === null ? fallback : String(v));
+function EditingSection({ ctx }) {
+    const formats = ctx.values.default_formats ?? ["16:9"];
+    return (_jsxs(SettingsGroup, { children: [_jsx(SettingRow, { id: "cut-style", label: "Cut style", description: "Seeds the edit recipe for new projects.", children: _jsx(SegmentedControl, { label: "Cut style", value: str(ctx.values.cut_preset, "natural"), options: [
+                        { value: "natural", label: "Natural" },
+                        { value: "tight", label: "Tight" },
+                        { value: "punchy", label: "Punchy" },
+                    ], onChange: (v) => void ctx.set("cut_preset", v) }) }), _jsx(SettingRow, { id: "formats", label: "Formats", description: "Formats the recipe produces by default.", children: _jsx("span", { className: "cr-settings-chips", children: ["16:9", "9:16", "1:1"].map((f) => (_jsx(Button, { variant: "ghost", size: "sm", className: "cr-chip-btn", onClick: () => void ctx.set("default_formats", formats.includes(f) ? formats.filter((x) => x !== f) : [...formats, f]), children: _jsx(Badge, { tone: formats.includes(f) ? "accent" : "neutral", children: f }) }, f))) }) })] }));
+}
+function FinishingSection({ ctx }) {
+    const lut = str(ctx.values.lut_path);
+    const hdr = useHdrToSdr();
+    const preset = str(ctx.values.color_preset, "neutral");
+    // A saved HDR preset that cannot run is kept, and the notice is an alert because it is in use.
+    const hdrInUse = HDR_COLOR_PRESETS.includes(preset);
+    return (_jsxs(_Fragment, { children: [_jsxs(SettingsGroup, { title: "Colour", children: [_jsx(SettingRow, { id: "color-preset", label: "Colour finish", description: "Applied to every render.", children: _jsxs("span", { className: "cr-settings-field", children: [_jsx(Select, { label: "Colour finish", value: preset, options: colourOptions(hdr).map(([value, label]) => ({ value, label })), onChange: (v) => void ctx.set("color_preset", v) }), hdr === false && (_jsx("p", { className: "cr-settings-note", role: hdrInUse ? "alert" : undefined, children: HDR_UNAVAILABLE_NOTICE }))] }) }), _jsx(SettingRow, { id: "custom-lut", label: "Custom LUT", description: lut ? lut.split(/[\\/]/).pop() : "A .cube LUT. It is the default for the Custom finish only; other finishes ignore it.", children: _jsxs("span", { className: "cr-settings-chips", children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: () => void pickFile("Choose a LUT file", ["cube", "3dl"]).then((f) => {
+                                        if (f)
+                                            void ctx.set("lut_path", f);
+                                    }), children: "Choose\u2026" }), lut && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => void ctx.set("lut_path", null), children: "Clear" }))] }) }), lut && (_jsx(SettingRow, { id: "lut-intensity", label: "LUT intensity", description: "How strongly the LUT is applied (0\u2013100%).", children: _jsx(Input, { className: "cr-settings-num", "aria-label": "LUT intensity (percent)", type: "number", min: 0, max: 100, step: 5, value: str(ctx.values.lut_intensity, "100"), onChange: (e) => void ctx.set("lut_intensity", Number(e.target.value)) }) })), _jsx(SettingRow, { id: "match-shots", label: "Match shots", description: "Match colour between sources before grading.", children: _jsx(Toggle, { label: "Match shots", checked: ctx.values.match_shots !== false, onChange: (v) => void ctx.set("match_shots", v) }) })] }), _jsx(SettingsGroup, { title: "Framing", children: _jsx(SettingRow, { id: "framing-approval", label: "Approve framing automatically", description: "Approve analysed framing using saved policy; turn off to review each plan.", children: _jsx(Toggle, { label: "Approve framing automatically", checked: ctx.values.framing_approval === "auto", onChange: (v) => void ctx.set("framing_approval", v ? "auto" : "review") }) }) }), _jsx(SettingsGroup, { title: "Audio", children: _jsx(SettingRow, { id: "audio-preset", label: "Audio finish", description: "Cleanup and loudness target.", children: _jsx(Select, { label: "Audio finish", value: str(ctx.values.audio_preset, "talking-head"), options: AUDIO_PRESETS.map(([value, label]) => ({ value, label })), onChange: (v) => void ctx.set("audio_preset", v) }) }) }), _jsxs(SettingsGroup, { title: "Captions", children: [_jsx(SettingRow, { id: "burn-captions", label: "Burn captions", description: "Captions are drawn into finished edits.", children: _jsx(Toggle, { label: "Burn captions", checked: ctx.values.burn_captions !== false, onChange: (v) => void ctx.set("burn_captions", v) }) }), _jsx(SettingRow, { id: "caption-style", label: "Caption style", children: _jsx(Select, { label: "Caption style", value: str(ctx.values.caption_style, DEFAULT_CAPTION_STYLE), options: CAPTION_STYLES.map(([value]) => ({ value, label: value.replace(/-/g, " ") })), onChange: (v) => void ctx.set("caption_style", v) }) })] })] }));
+}
+/** Encoder choices per platform; ids must match the engine's encoder names. */
+const ENCODER_OPTIONS_MAC = [
+    ["auto", "Auto"],
+    ["videotoolbox", "VideoToolbox"],
+];
+const ENCODER_OPTIONS_WINDOWS = [
+    ["auto", "Auto"],
+    ["nvenc", "NVIDIA NVENC"],
+    ["mf", "Media Foundation"],
+];
+function OutputSection({ ctx }) {
+    const encoderOptions = usePlatform() === "macos" ? ENCODER_OPTIONS_MAC : ENCODER_OPTIONS_WINDOWS;
+    const savedEncoder = str(ctx.values.encoder, "auto");
+    // A saved value that this platform does not offer (e.g. legacy "libx264") shows as Auto.
+    const encoderValue = encoderOptions.some(([v]) => v === savedEncoder) ? savedEncoder : "auto";
+    return (_jsxs(SettingsGroup, { children: [_jsx(SettingRow, { id: "encoder", label: "Encoder", description: "The system H.264 encoder for exports.", children: _jsx(Select, { label: "Encoder", value: encoderValue, options: encoderOptions.map(([value, label]) => ({ value, label })), onChange: (v) => void ctx.set("encoder", v) }) }), _jsx(SettingRow, { id: "export-dir", label: "Export folder", description: str(ctx.values.export_dir, "Renders stay inside the project folder."), children: _jsx(Button, { size: "sm", variant: "secondary", onClick: () => void pickFolder("Default export folder").then((d) => {
+                        if (d)
+                            void ctx.set("export_dir", d);
+                    }), children: "Choose\u2026" }) })] }));
+}
+function StorageSection({ ctx, dir }) {
+    const toast = useToast();
+    const [storage, setStorage] = useState(null);
+    useEffect(() => {
+        storageStatus(dir ?? undefined).then(setStorage).catch(() => setStorage(null));
+    }, [dir]);
+    return (_jsxs(SettingsGroup, { children: [_jsx(SettingRow, { id: "project-folder", label: "Project folder", description: `Dropped footage creates a new project here: ${str(ctx.values.project_root, storage?.default_project_root ?? "")}`, children: _jsx(Button, { size: "sm", variant: "secondary", onClick: () => void pickFolder("Project folder").then((d) => {
+                        if (d)
+                            void ctx.set("project_root", d);
+                    }), children: "Choose\u2026" }) }), _jsx(SettingRow, { id: "cache", label: "Cache", description: "Thumbnails and waveforms are rebuilt on demand; clearing is safe.", children: _jsxs("span", { className: "cr-settings-chips", children: [_jsx("span", { className: "cr-mono", children: storage ? formatBytes(storage.cache_bytes) : "…" }), _jsx(Button, { size: "sm", variant: "secondary", disabled: !storage || storage.cache_bytes === 0, onClick: () => void storageClear(dir ?? undefined)
+                                .then((r) => {
+                                setStorage((s) => (s ? { ...s, cache_bytes: 0 } : s));
+                                toast(`Cleared ${formatBytes(r.freed_bytes)}`, { kind: "success" });
+                            })
+                                .catch((e) => toast(errorMessage(e), { kind: "error", ttl: 0 })), children: "Clear" })] }) })] }));
+}
+function HostSection({ ctx }) {
+    const [gr, setGr] = useState({ state: "checking" });
+    const [path, setPath] = useState(str(ctx.values.genright_engine_path));
+    const check = () => void engineCall("genright.status", {})
+        .then((r) => setGr(interpretHost(r)))
+        .catch((e) => setGr(genRightCallFailed(errorMessage(e))));
+    useEffect(check, []);
+    return (_jsxs(SettingsGroup, { children: [_jsx(SettingRow, { id: "genright-path", label: "Engine location", description: `Path to the ${hostAppName()} engine; empty means auto-detect.`, stacked: true, children: _jsxs("span", { className: "cr-settings-chips", children: [_jsx(Input, { className: "cr-settings-path", "aria-label": `${hostAppName()} engine path`, value: path, placeholder: "Auto-detect", onChange: (e) => setPath(e.target.value), onBlur: () => void ctx.set("genright_engine_path", path.trim() === "" ? null : path.trim()) }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => void pickFile(`Locate the ${hostAppName()} engine`, null).then((f) => {
+                                if (f) {
+                                    setPath(f);
+                                    void ctx.set("genright_engine_path", f);
+                                }
+                            }), children: "Locate\u2026" })] }) }), _jsx(SettingRow, { id: "genright-status", label: "Status", description: gr.detail ?? `Media generation runs through the ${hostAppName()} app.`, children: _jsxs("span", { className: "cr-settings-chips", children: [_jsx(Badge, { tone: gr.state === "ready" ? "ok" : gr.state === "checking" ? "neutral" : "warn", children: gr.state === "ready" ? `${hostAppName()} ready` : gr.state === "checking" ? "Checking…" : "Not available" }), _jsx(Button, { size: "sm", variant: "secondary", onClick: check, children: "Re-check" })] }) }), _jsx(SettingRow, { id: "genright-budget", label: "Budget", description: "Optional spend cap (USD) for generation jobs.", children: _jsx(Input, { className: "cr-settings-num", "aria-label": `${hostAppName()} budget (USD)`, type: "number", min: 0, step: 1, value: str(ctx.values.genright_budget_usd), placeholder: "No cap", onChange: (e) => void ctx.set("genright_budget_usd", e.target.value === "" ? null : Number(e.target.value)) }) })] }));
+}
+function EngineSection({ doctor, error }) {
+    const checks = doctor?.readiness?.checks ?? [];
+    return (_jsx(SettingsGroup, { description: error ?? undefined, children: DIAGNOSTICS.map((d) => {
+            const c = checks.find((x) => x.id === d.id);
+            const st = (c?.status ?? "").toLowerCase();
+            // An optional check that is absent from a loaded report is reported as unavailable, not still checking.
+            const waiting = !c && !(d.optional && doctor);
+            const ok = st === "ok";
+            const tone = ok ? "ok" : waiting || d.optional ? "neutral" : "warn";
+            const label = ok ? "OK" : waiting ? "Checking…" : d.optional ? "Unavailable" : "Needs attention";
+            const sentence = waiting ? "Waiting for the engine check." : !c ? d.sentence.missing : (d.sentence[st] ?? d.sentence.failed);
+            return (_jsx(SettingRow, { id: `diag-${d.id}`, label: d.label, description: _jsxs(_Fragment, { children: [sentence, c?.detail && (_jsxs("details", { className: "cr-settings-detail", children: [_jsx("summary", { children: "Details" }), _jsx("p", { children: c.detail })] }))] }), children: _jsx(Badge, { tone: tone, children: label }) }, d.id));
+        }) }));
+}
+/** Every binding on the shell's shortcut registry, as the help overlay lists them (hidden ones omitted). */
+// Agent demo settings: a lazy chunk that exists only when `__RIGHTKIT_DEMO__` (vite.config.ts), so a
+// release bundle neither imports nor contains src/demo.
+const DEMO_BUILD = typeof __RIGHTKIT_DEMO__ === "boolean" && __RIGHTKIT_DEMO__;
+const DemoSettingsLazy = DEMO_BUILD
+    ? lazy(() => import("../demo/DemoSettings.js").then((m) => ({ default: m.DemoSettings })))
+    : null;
+function ShortcutsSection() {
+    const { registry } = useShell();
+    useSyncExternalStore(registry.subscribe, registry.version);
+    return (_jsx(_Fragment, { children: registry.groups().map((group) => (_jsx(SettingsGroup, { title: group.title, children: group.items.map((info) => (_jsx(SettingRow, { id: `key-${info.id}`, label: info.label, children: info.chords.map((chord) => (_jsx(Kbd, { chord: chord }, chord))) }, info.id))) }, group.title))) }));
+}
+export function SettingsView({ dir, doctor, error, section, }) {
+    const backend = useMemo(() => createHostSettingsBackend(), []);
+    const models = useMemo(() => createModelsBackend(), []);
+    const [version, setVersion] = useState("");
+    const [active, setActive] = useState(section);
+    const [reading, setReading] = useState(null);
+    useEffect(() => {
+        getVersion().then(setVersion).catch(() => setVersion(""));
+    }, []);
+    useEffect(() => {
+        if (section)
+            setActive(section === "models" ? "engine" : section);
+    }, [section]);
+    const sections = mergeSections([
+        aboutSection({ appName: hostAppName(), version: version || "dev", copyright: "Orthic Labs" }),
+        appearanceSection({ themeStore }),
+        modelsSection({ models }),
+        licenseSection({ client: licenseClient }),
+        updatesSection({ client: updates, currentVersion: version || "dev", onRestart: restartAfterUpdate }),
+        diagnosticsSection({ logs }),
+        legalSection({
+            documents: LEGAL_GATE_DOCUMENTS,
+            // legalSection's per-document callback (settings-ui sections.tsx legalSection `openExternal`): the
+            // bundled documents open in the owner Dialog + LegalDocumentBody below; no document is opened
+            // externally and legal-ui has no reader component to adopt instead (its exports are LegalGate,
+            // policyGateDocuments and LegalDocumentBody).
+            openExternal: (url) => {
+                const document = LEGAL_GATE_DOCUMENTS.find((entry) => entry.url === url);
+                if (document)
+                    setReading({ title: document.title, text: legalDocumentText(document.path) });
+            },
+        }),
+    ], [
+        { id: "editing", label: "Editing defaults", group: "Editing", order: 300, keywords: ["cut", "format"], render: (ctx) => _jsx(EditingSection, { ctx: ctx }) },
+        {
+            id: "finishing",
+            label: "Finishing",
+            group: "Editing",
+            order: 310,
+            keywords: ["colour", "color", "lut", "audio", "captions", "loudness"],
+            entries: [
+                { id: "color-preset", label: "Colour finish" },
+                { id: "custom-lut", label: "Custom LUT" },
+                { id: "match-shots", label: "Match shots" },
+                { id: "audio-preset", label: "Audio finish" },
+                { id: "burn-captions", label: "Burn captions" },
+                { id: "caption-style", label: "Caption style" },
+            ],
+            render: (ctx) => _jsx(FinishingSection, { ctx: ctx }),
+        },
+        { id: "output", label: "Output", group: "Editing", order: 320, keywords: ["encoder", "export"], render: (ctx) => _jsx(OutputSection, { ctx: ctx }) },
+        { id: "storage", label: "Storage", group: "App", order: 400, keywords: ["cache", "project folder"], render: (ctx) => _jsx(StorageSection, { ctx: ctx, dir: dir }) },
+        { id: "genright", label: "Media generation", group: "App", order: 410, keywords: ["generate", "assets", "budget"], render: (ctx) => _jsx(HostSection, { ctx: ctx }) },
+        { id: "engine", label: "Engine", group: "App", order: 420, keywords: ["diagnostics", "ffmpeg", "doctor"], render: () => _jsx(EngineSection, { doctor: doctor, error: error }) },
+        { id: "shortcuts", label: "Shortcuts", group: "App", order: 430, keywords: ["keys", "keyboard"], render: () => _jsx(ShortcutsSection, {}) },
+        // Agent demo mode: present only in builds with the demo feature (vite.config.ts), off by default.
+        ...(DEMO_BUILD ? [{ id: "agent-demos", label: "Agent demos", group: "App", order: 440, keywords: ["agent", "demo", "record", "automation", "consent"], render: () => DemoSettingsLazy ? _jsx(Suspense, { fallback: null, children: _jsx(DemoSettingsLazy, {}) }) : null }] : []),
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsx(SettingsPanel, { backend: backend, sections: sections, title: "Settings", activeId: active, onActiveChange: setActive, defaultActiveId: "appearance" }), reading && (_jsx(Dialog, { title: reading.title, ariaLabel: reading.title, width: 760, onClose: () => setReading(null), dismissible: false, actions: _jsx(Button, { onClick: () => setReading(null), children: "Close" }), children: _jsx(LegalDocumentBody, { content: reading.text, format: "markdown", title: reading.title }) }))] }));
+}

package/dist/views/Shorts.css

@@ -0,0 +1,112 @@
+/* Shorts — docs/design/app-ui.md §3.6 */
+
+.shorts-body { display: flex; flex-direction: column; gap: var(--s4); padding-bottom: 72px; }
+
+.shorts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--s4);
+}
+.shorts-card {
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-lg);
+  padding: var(--s3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+  min-width: 0;
+}
+.shorts-card--sel { border-color: var(--rk-accent); box-shadow: 0 0 0 1px var(--rk-accent); }
+.shorts-card__thumb { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
+.shorts-card__rank {
+  position: absolute;
+  left: 6px;
+  top: 6px;
+  padding: 2px 6px;
+  border-radius: var(--r-sm);
+  background: rgb(0 0 0 / 0.6);
+  color: #fff;
+  font-size: 11px;
+  z-index: 2;
+}
+.shorts-card__meta { display: flex; align-items: center; gap: var(--s2); font-size: 12px; }
+.shorts-card__hook { font-size: 12px; color: var(--rk-ink); line-height: 1.4; min-height: 2.6em; }
+.shorts-card__pick {
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+  font-size: 12px;
+  color: var(--rk-ink-2);
+  cursor: pointer;
+}
+.shorts-card__pick input { accent-color: var(--rk-accent); }
+
+.shorts-bar {
+  position: sticky;
+  bottom: var(--s4);
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+  padding: var(--s3) var(--s4);
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-lg);
+  box-shadow: var(--rk-pop);
+}
+.shorts-bar span { flex: 1; font-size: 13px; }
+
+.shorts-range-player {
+  width: 100%;
+  aspect-ratio: 9 / 16;
+  max-height: 50vh;
+  background: var(--cr-stage);
+  border-radius: var(--r-sm);
+  display: block;
+  object-fit: contain;
+}
+
+.shorts-trim { display: flex; align-items: center; gap: var(--s2); }
+.shorts-trim__time { font-size: 10px; color: var(--rk-ink-2); flex: none; }
+.shorts-trim__track {
+  position: relative;
+  flex: 1;
+  height: 24px;
+  background: var(--rk-fill);
+  border-radius: var(--r-sm);
+  touch-action: none;
+}
+.shorts-trim__sel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: color-mix(in srgb, var(--rk-accent) 22%, transparent);
+  border-radius: var(--r-sm);
+}
+.shorts-trim__handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  margin-left: -5px;
+  border: 0;
+  border-radius: 3px;
+  background: var(--rk-accent);
+  cursor: ew-resize;
+  padding: 0;
+}
+.shorts-drawer__rationale { font-size: 12px; line-height: 1.5; margin: 0; }
+.shorts-card__platforms { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
+
+.shorts-framing {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.shorts-drawer__error {
+  margin: 0;
+  color: var(--rk-bad);
+  font-size: 13px;
+}

package/dist/views/ShortsView.d.ts

@@ -0,0 +1,4 @@
+export declare function ShortsView({ dir, onChanged }: {
+    dir: string;
+    onChanged: () => Promise<void>;
+}): import("react").JSX.Element;

package/dist/views/ShortsView.js

@@ -0,0 +1,205 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Shorts — docs/design/app-ui.md §3.6.
+import { Badge, Button, Checkbox, EmptyState, Field, PageShell, useToast } from "@rightkit/react-shell/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { errorMessage } from "../lib/engine.js";
+import { framingApproval, framingLabel, settingsGet, reframeShow, shortsAccept, shortsPropose, sourceList, thumbnails, } from "../lib/media.js";
+import { assetUrl } from "../lib/asset.js";
+import { appendClip, projectShow } from "../lib/project.js";
+import { FramingDrawer } from "./AutoEditView.js";
+import { RangePreview } from "../components/RangePreview.js";
+import { Drawer, ErrorPanel, ProgressRow, Thumbnail, timecode, Icon } from "../ui/index.js";
+import { hostAppName } from "../appName.js";
+/** Shorts render vertical: the engine requires an approved plan for this aspect. */
+const SHORT_ASPECT = "9:16";
+/** Mirrors the engine's rule: a source within 5% of 9:16 renders full-frame without a plan. */
+function needsFraming(show, source) {
+    const v = show?.timeline.sources.find((t) => t.id === source)?.video;
+    if (!v)
+        return false;
+    return Math.abs(v.width / v.height / (9 / 16) - 1) >= 0.05;
+}
+/** Two-handle boundary trim over a ±5s context window around the proposal. */
+function BoundaryTrim({ proposal, startMs, endMs, onChange, }) {
+    const track = useRef(null);
+    const lo = Math.max(0, proposal.start_ms - 5000);
+    const hi = proposal.end_ms + 5000;
+    const span = hi - lo;
+    const pct = (ms) => `${(((ms - lo) / span) * 100).toFixed(2)}%`;
+    const drag = (which) => (e) => {
+        e.preventDefault();
+        const el = track.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const move = (ev) => {
+            const frac = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width));
+            const ms = lo + frac * span;
+            if (which === "in")
+                onChange(Math.min(ms, endMs - 250), endMs);
+            else
+                onChange(startMs, Math.max(ms, startMs + 250));
+        };
+        const up = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+    };
+    return (_jsxs("div", { className: "shorts-trim", ref: track, children: [_jsx("span", { className: "shorts-trim__time cr-mono", children: timecode(lo) }), _jsxs("div", { className: "shorts-trim__track", children: [_jsx("div", { className: "shorts-trim__sel", style: { left: pct(startMs), right: `calc(100% - ${pct(endMs)})` } }), _jsx("button", { type: "button", className: "shorts-trim__handle", style: { left: pct(startMs) }, "aria-label": "Trim start", onPointerDown: drag("in") }), _jsx("button", { type: "button", className: "shorts-trim__handle", style: { left: pct(endMs) }, "aria-label": "Trim end", onPointerDown: drag("out") })] }), _jsx("span", { className: "shorts-trim__time cr-mono", children: timecode(hi) })] }));
+}
+function ShortThumb({ dir, source, atMs, videoPath }) {
+    const [src, setSrc] = useState();
+    useEffect(() => {
+        let cancelled = false;
+        setSrc(undefined);
+        thumbnails(dir, { source }, { at_ms: atMs, width: 360 })
+            .then((r) => !cancelled && setSrc(r.frames[0] ? assetUrl(r.frames[0].path) : undefined))
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [dir, source, atMs]);
+    return _jsx(Thumbnail, { src: src, aspect: "9 / 16", video: videoPath ? `${assetUrl(videoPath)}#t=${atMs / 1000}` : undefined });
+}
+/** Engine platform ids → spec labels (R6): Shorts / Reels / TikTok. */
+function platformLabel(id) {
+    const s = id.toLowerCase();
+    if (s.includes("short"))
+        return "Shorts";
+    if (s.includes("reel"))
+        return "Reels";
+    if (s.includes("tiktok"))
+        return "TikTok";
+    return id.charAt(0).toUpperCase() + id.slice(1);
+}
+export function ShortsView({ dir, onChanged }) {
+    const toast = useToast();
+    const [sources, setSources] = useState([]);
+    const [source, setSource] = useState("");
+    const [busy, setBusy] = useState(null);
+    // Which operation `busy` (a short id) stands for, so each button shows its own busy text.
+    const [busyOp, setBusyOp] = useState(null);
+    const [error, setError] = useState(null);
+    const [shorts, setShorts] = useState(null);
+    const [selected, setSelected] = useState(new Set());
+    const [open, setOpen] = useState(null);
+    const [trim, setTrim] = useState(null);
+    const [searched, setSearched] = useState(false);
+    const [show, setShow] = useState(null);
+    const [plan, setPlan] = useState(undefined);
+    const [autoFraming, setAutoFraming] = useState(false);
+    const [framing, setFraming] = useState(false);
+    const refresh = useCallback(async () => {
+        const [s, p, settings] = await Promise.all([sourceList(dir), projectShow(dir), settingsGet(dir)]);
+        setAutoFraming(framingApproval(settings) === "auto");
+        const rows = s.sources;
+        setSources(rows);
+        setShow(p);
+        setSource((cur) => cur || rows.find((x) => x.has_transcript)?.id || rows[0]?.id || "");
+    }, [dir]);
+    useEffect(() => {
+        refresh().catch((e) => setError(errorMessage(e)));
+    }, [refresh]);
+    const selectedSource = sources.find((s) => s.id === source);
+    const framingNeeded = needsFraming(show, source);
+    // The vertical plan for the chosen source; "none" until one is analysed.
+    useEffect(() => {
+        setPlan(undefined);
+        if (!source || !framingNeeded)
+            return;
+        let live = true;
+        reframeShow(dir, source, SHORT_ASPECT)
+            .then((r) => live && setPlan(r))
+            .catch(() => live && setPlan("none"));
+        return () => {
+            live = false;
+        };
+    }, [dir, source, framingNeeded]);
+    const framingApproved = !framingNeeded || (plan !== undefined && plan !== "none" && plan.approved);
+    const framingAllowed = autoFraming || framingApproved;
+    const framingBlock = framingAllowed ? undefined : "Approve this source's 9:16 framing first";
+    const propose = async () => {
+        setBusy("propose");
+        setError(null);
+        try {
+            const r = await shortsPropose(dir, source, 6);
+            setShorts(r);
+            setSelected(new Set());
+            setSearched(true);
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const exportShort = async (p, bounds) => {
+        setBusy(p.id);
+        setBusyOp("export");
+        setError(null);
+        try {
+            const trimmed = bounds && (bounds.start !== p.start_ms || bounds.end !== p.end_ms)
+                ? { start_ms: bounds.start, end_ms: bounds.end }
+                : undefined;
+            const r = await shortsAccept(dir, source, p.id, trimmed);
+            toast(`Short ${r.variant} exported`, { kind: "success" });
+            if (framingNeeded)
+                setPlan(await reframeShow(dir, source, SHORT_ASPECT));
+            await refresh();
+            await onChanged();
+            return true;
+        }
+        catch (e) {
+            setError(errorMessage(e));
+            return false;
+        }
+        finally {
+            setBusy(null);
+            setBusyOp(null);
+        }
+    };
+    const exportSelected = async () => {
+        const list = (shorts?.proposals ?? []).filter((p) => selected.has(p.id));
+        for (const p of list) {
+            // eslint-disable-next-line no-await-in-loop -- sequential: one render worker
+            if (!(await exportShort(p)))
+                break;
+        }
+    };
+    const addToTimeline = async (p, startMs, endMs) => {
+        setBusy(p.id);
+        setBusyOp("add");
+        setError(null);
+        try {
+            await appendClip(dir, source, startMs, endMs);
+            toast(`Added “${p.title}” to the timeline`, { kind: "success" });
+            await onChanged();
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+        finally {
+            setBusy(null);
+            setBusyOp(null);
+        }
+    };
+    const openDrawer = (p) => {
+        setOpen(p);
+        setTrim({ start: p.start_ms, end: p.end_ms });
+    };
+    return (_jsxs(PageShell, { title: "Shorts", actions: _jsxs(_Fragment, { children: [_jsx(Field, { label: "Source", children: (ids) => (_jsx("select", { ...ids, className: "rk-input cr-select", value: source, onChange: (e) => setSource(e.target.value), children: sources.map((s) => (_jsxs("option", { value: s.id, children: [s.name, s.has_transcript ? "" : " (not transcribed)"] }, s.id))) })) }), _jsxs(Button, { variant: "primary", title: selectedSource?.has_transcript ? undefined : "Transcribe this source first", onClick: () => void propose(), disabled: (!selectedSource?.has_transcript) || (busy === "propose"), "aria-busy": (busy === "propose") || undefined, children: [!(busy === "propose") && _jsx(Icon, { name: "scissors" }), busy === "propose" ? "Finding…" : "Find shorts"] })] }), maxWidth: 0, subtitle: sources.length ? `${sources.length} source${sources.length === 1 ? "" : "s"}` : undefined, children: [_jsxs("div", { className: "shorts-body", children: [busy === "propose" && _jsx(ProgressRow, { label: "Ranking clip candidates", status: "Indexing", fraction: undefined }), error && _jsx(ErrorPanel, { title: "Shorts failed", detail: error }), framingNeeded && (autoFraming || plan !== undefined) && (_jsxs("div", { className: "shorts-framing", children: [_jsx(Badge, { tone: framingAllowed ? "ok" : "warn", children: framingLabel(plan && plan !== "none" ? plan : undefined, autoFraming) }), _jsx("span", { className: "cr-muted", children: autoFraming ? "Shorts render 9:16; saved policy approves tracked framing during export." : "Shorts render 9:16; approve how this source is cropped before exporting." }), _jsx(Button, { variant: "secondary", onClick: () => setFraming(true), children: "Review framing" })] })), searched && shorts && shorts.proposals.length === 0 && (_jsx(EmptyState, { title: "No shorts found", icon: _jsx(Icon, { name: "scissors", width: 28, height: 28 }), children: "No strong clip candidates in this source. Try another clip." })), !searched && !busy && !error && (_jsxs(EmptyState, { title: "Find the best moments", icon: _jsx(Icon, { name: "scissors", width: 28, height: 28 }), children: ["Pick a transcribed source and ", hostAppName(), " ranks clip candidates for vertical platforms."] })), shorts && shorts.proposals.length > 0 && (_jsxs(_Fragment, { children: [shorts.ranking && (_jsxs("div", { className: "shorts-ranking", children: [shorts.ranking.method === "llm" ? (_jsxs(Badge, { tone: "accent", children: ["Ranked by ", shorts.ranking.model ?? "LLM"] })) : (_jsx("span", { title: shorts.ranking.fallback_reason ?? undefined, children: _jsx(Badge, { tone: "warn", children: "Heuristic ranking" }) })), shorts.ranking.method !== "llm" && shorts.ranking.fallback_reason && (_jsxs("span", { className: "cr-muted", children: ["Why: ", shorts.ranking.fallback_reason] })), shorts.ranking.prompt_budget &&
+                                        shorts.ranking.prompt_budget.sentences_sent <
+                                            shorts.ranking.prompt_budget.sentences_offered && (_jsxs("span", { className: "cr-muted", children: ["Prompt budget sent ", shorts.ranking.prompt_budget.sentences_sent, " of", " ", shorts.ranking.prompt_budget.sentences_offered, " sentences"] }))] })), _jsx("div", { className: "shorts-grid", children: shorts.proposals.map((p) => (_jsxs("div", { className: `shorts-card ${selected.has(p.id) ? "shorts-card--sel" : ""}`, children: [_jsxs("button", { type: "button", className: "shorts-card__thumb", onClick: () => openDrawer(p), children: [_jsx(ShortThumb, { dir: dir, source: source, atMs: p.start_ms, videoPath: selectedSource?.path }), _jsxs("span", { className: "shorts-card__rank cr-mono", children: ["#", p.rank] })] }), _jsxs("div", { className: "shorts-card__meta", children: [_jsx("span", { className: "cr-mono cr-muted", children: timecode(p.duration_ms) }), p.scores?.composite != null && (_jsxs(Badge, { tone: "accent", children: ["Score ", Math.round(p.scores.composite * 100)] }))] }), (p.platform_fit ?? []).some((f) => f.fits) && (_jsx("div", { className: "shorts-card__platforms", children: (p.platform_fit ?? [])
+                                                .filter((f) => f.fits)
+                                                .map((f) => (_jsx(Badge, { children: platformLabel(f.platform) }, f.platform))) })), _jsx("div", { className: "shorts-card__hook cr-clamp-2", children: p.title }), _jsx(Checkbox, { className: "shorts-card__pick", label: "Select", checked: selected.has(p.id), onChange: (checked) => setSelected((s) => {
+                                                const n = new Set(s);
+                                                if (checked)
+                                                    n.add(p.id);
+                                                else
+                                                    n.delete(p.id);
+                                                return n;
+                                            }) })] }, p.id))) })] }))] }), selected.size > 0 && (_jsxs("div", { className: "shorts-bar", children: [_jsxs("span", { children: [selected.size, " selected"] }), _jsxs(Button, { variant: "primary", title: framingBlock, onClick: () => void exportSelected(), disabled: (!framingAllowed) || (busy !== null), "aria-busy": (busy !== null) || undefined, children: [!(busy !== null) && _jsx(Icon, { name: "download" }), busyOp === "export" ? "Exporting…" : "Export shorts"] })] })), _jsx(Drawer, { title: open?.title ?? "Short", open: open !== null && !framing, onClose: () => setOpen(null), footer: open && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: () => void addToTimeline(open, trim?.start ?? open.start_ms, trim?.end ?? open.end_ms), disabled: (busy === open.id), "aria-busy": (busy === open.id) || undefined, children: busyOp === "add" && busy === open.id ? "Adding…" : "Add to timeline" }), !framingAllowed && (_jsx(Button, { variant: "secondary", onClick: () => setFraming(true), children: "Review framing" })), _jsx(Button, { variant: "primary", onClick: () => void exportShort(open, trim ? { start: trim.start, end: trim.end } : undefined).then((ok) => ok && setOpen(null)), title: framingBlock ?? "Renders the trimmed range (bounds snap to word edges)", disabled: (!framingAllowed) || (busy === open.id), "aria-busy": (busy === open.id) || undefined, children: busyOp === "export" && busy === open.id ? "Exporting…" : "Export" })] })), children: open && selectedSource && (_jsxs(_Fragment, { children: [_jsx(RangePreview, { loop: true, path: selectedSource.path, startMs: trim?.start ?? open.start_ms, endMs: trim?.end ?? open.end_ms }), _jsx(Field, { label: "Boundaries", note: `${timecode(trim?.start ?? open.start_ms)} – ${timecode(trim?.end ?? open.end_ms)}`, children: () => (_jsx(BoundaryTrim, { proposal: open, startMs: trim?.start ?? open.start_ms, endMs: trim?.end ?? open.end_ms, onChange: (start, end) => setTrim({ start, end }) })) }), _jsx("p", { className: "cr-muted shorts-drawer__rationale", children: open.rationale }), error && (_jsx("p", { role: "alert", className: "shorts-drawer__error", children: error }))] })) }), framing && selectedSource && (_jsx(FramingDrawer, { dir: dir, source: selectedSource, aspect: SHORT_ASPECT, plan: plan, autoFraming: autoFraming, onClose: () => setFraming(false), onChanged: setPlan }))] }));
+}

package/dist/views/SourcesView.d.ts

@@ -0,0 +1,6 @@
+/** §3.2 Media: source cards, drag-drop import, per-card pipeline state, detail drawer. */
+export declare function SourcesView({ dir, onChanged, onNavigate, }: {
+    dir: string;
+    onChanged: () => Promise<void>;
+    onNavigate?: (to: "recipe" | "finished") => void;
+}): import("react").JSX.Element;