@rightkit/video-ui 0.0.0-stage → 0.1.1

package/dist/demo/demo.css

@@ -0,0 +1,124 @@
+/* Agent demo mode. Loaded only by src/demo components, which exist only when __RIGHTKIT_DEMO__. */
+
+.cr-demo-facts {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 4px 12px;
+  margin: 12px 0;
+  font-size: 13px;
+}
+
+.cr-demo-facts dt {
+  color: var(--rk-text-muted, #666);
+}
+
+.cr-demo-facts dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.cr-demo-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+.cr-demo-note {
+  font-size: 12px;
+  color: var(--rk-text-muted, #666);
+}
+
+.cr-demo-error {
+  color: #b42318;
+  font-size: 13px;
+}
+
+.cr-demo-btn {
+  padding: 6px 12px;
+  border: 1px solid var(--rk-border, #c8c8c8);
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.cr-demo-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.cr-demo-btn--danger {
+  border-color: #b42318;
+  color: #b42318;
+}
+
+/* Position only; Notice owns each bar's surface and controls. */
+.cr-demo-position {
+  position: fixed;
+  left: 50%;
+  bottom: 16px;
+  z-index: 9999;
+  max-width: calc(100vw - 32px);
+  transform: translateX(-50%);
+}
+
+.cr-demo-dot {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #b42318;
+}
+
+.cr-demo-dot--live {
+  animation: cr-demo-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes cr-demo-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cr-demo-dot--live {
+    animation: none;
+  }
+}
+
+.cr-demo-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* The badge window: the whole page is the badge. */
+.cr-demo-badge {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  padding: 6px 10px;
+  background: var(--rk-surface, #fff);
+  color: var(--rk-text, #111);
+  font: 12px/1.3 system-ui, sans-serif;
+  border: 2px solid #b42318;
+  border-radius: 10px;
+}
+
+.cr-demo-badge__text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.cr-demo-badge__text strong,
+.cr-demo-badge__text span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/dist/demo/useDemo.d.ts

@@ -0,0 +1,8 @@
+import { type DemoConsent, type DemoState, type DemoStatus } from "./bindings.js";
+/** Live demo state: the saved on/off flag, the session phase and any consent waiting for an answer. */
+export declare function useDemo(): {
+    status: DemoStatus | null;
+    state: DemoState;
+    consent: DemoConsent | null;
+    refresh: () => Promise<void>;
+};

package/dist/demo/useDemo.js

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useState } from "react";
+import { demoStatus, onDemoConsent, onDemoState, } from "./bindings.js";
+const IDLE = { phase: "idle", session: null, bundle: null, message: null, hotkey: "" };
+/** Live demo state: the saved on/off flag, the session phase and any consent waiting for an answer. */
+export function useDemo() {
+    const [status, setStatus] = useState(null);
+    const [state, setState] = useState(IDLE);
+    const [consent, setConsent] = useState(null);
+    const refresh = useCallback(async () => {
+        try {
+            const s = await demoStatus();
+            setStatus(s);
+            setState(s.state);
+            setConsent(s.pending_consent);
+        }
+        catch {
+            // A build without the demo feature has no such command: demo mode simply is not there.
+            setStatus(null);
+        }
+    }, []);
+    useEffect(() => {
+        void refresh();
+        const unlisten = Promise.all([
+            onDemoState((s) => {
+                setState(s);
+                setStatus((prev) => (prev ? { ...prev, state: s, hotkey: s.hotkey } : prev));
+                if (s.phase !== "awaiting_consent")
+                    setConsent(null);
+            }),
+            onDemoConsent((c) => setConsent(c)),
+        ]);
+        return () => {
+            void unlisten.then((fns) => fns.forEach((f) => f()));
+        };
+    }, [refresh]);
+    return { status, state, consent, refresh };
+}

package/dist/editor/CaptionInspector.d.ts

@@ -0,0 +1,8 @@
+import type { EditSession } from "./adapter.js";
+import type { EditorModel } from "./model.js";
+export declare function CaptionInspector({ model, session, onCommitted, onError }: {
+    model: EditorModel;
+    session: EditSession;
+    onCommitted: () => void;
+    onError: (s: string) => void;
+}): import("react").JSX.Element;

package/dist/editor/CaptionInspector.js

@@ -0,0 +1,33 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field, Input } from "@rightkit/react-shell/react";
+import { useState } from "react";
+import { errorText } from "./adapter.js";
+import { editCaption, removeCaption } from "./actions.js";
+export function CaptionInspector({ model, session, onCommitted, onError }) {
+    const [id, setId] = useState("");
+    const cue = model.captions.find((c) => c.id === id) ?? model.captions[0];
+    return _jsxs("div", { className: "fe-inspect", "aria-label": "Caption corrections", children: [_jsx(Field, { label: "Caption", children: (ids) => (_jsx("select", { ...ids, className: "rk-input cr-select", "aria-label": "Caption to correct", value: cue?.id ?? "", onChange: (e) => setId(e.target.value), children: model.captions.map((c) => _jsx("option", { value: c.id, children: c.text }, c.id)) })) }), cue ? _jsx(CaptionFields, { cue: cue, fps: model.fps, onSave: async (next) => {
+                    try {
+                        await session.apply(editCaption(cue.id, next), "Caption correction");
+                        onCommitted();
+                    }
+                    catch (e) {
+                        onError(errorText(e));
+                        onCommitted();
+                    }
+                }, onRestore: async () => {
+                    try {
+                        await session.apply(removeCaption(cue.id), "Restore original caption");
+                        onCommitted();
+                    }
+                    catch (e) {
+                        onError(errorText(e));
+                        onCommitted();
+                    }
+                } }, `${cue.id}:${model.revisionCursor}`) : _jsx("p", { className: "cr-muted", children: "Transcribe footage to edit captions." })] });
+}
+function CaptionFields({ cue, fps, onSave, onRestore }) {
+    const [draft, setDraft] = useState(cue);
+    const number = (label, value, update) => _jsx(Field, { label: label, children: (ids) => (_jsx(Input, { ...ids, type: "number", step: "0.01", "aria-label": label, value: value, onChange: (e) => update(Number(e.target.value)) })) });
+    return _jsxs(_Fragment, { children: [_jsx(Field, { label: "Caption text", children: (ids) => (_jsx("textarea", { ...ids, className: "rk-input", "aria-label": "Caption text", maxLength: 160, value: draft.text, onChange: (e) => setDraft({ ...draft, text: e.target.value }) })) }), number("Caption start (s)", draft.start_frame / fps, (v) => setDraft({ ...draft, start_frame: Math.round(v * fps) })), number("Caption duration (s)", draft.frames / fps, (v) => setDraft({ ...draft, frames: Math.round(v * fps) })), number("Caption horizontal position (%)", draft.position.x / 10, (v) => setDraft({ ...draft, position: { ...draft.position, x: Math.round(v * 10) } })), number("Caption vertical position (%)", draft.position.y / 10, (v) => setDraft({ ...draft, position: { ...draft.position, y: Math.round(v * 10) } })), _jsx("button", { type: "button", className: "rk-button", onClick: () => void onSave(draft), children: "Save caption" }), cue.corrected ? _jsx("button", { type: "button", className: "rk-button", onClick: () => void onRestore(), children: "Restore original" }) : null] });
+}

package/dist/editor/ChangesPanel.d.ts

@@ -0,0 +1,13 @@
+import { type StoredPlan } from "../lib/media.js";
+import type { EditSession } from "./adapter.js";
+export declare function ChangesPanel({ dir, plans, loadError, session, onCommitted, onSeek, }: {
+    dir: string;
+    plans: StoredPlan[];
+    /** Why the stored plans could not be read, when they could not. */
+    loadError?: string | null;
+    session: EditSession;
+    /** Re-read `project.show` + cues after a review lands (or fails). */
+    onCommitted: () => void;
+    /** Seek the timeline playhead to a timeline-mapped second. */
+    onSeek: (timeS: number) => void;
+}): import("react").JSX.Element;

package/dist/editor/ChangesPanel.js

@@ -0,0 +1,87 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Changes tab of the Finished edit side panel (docs/design/app-ui.md §3.4).
+ * Reads the stored auto-edit plans via `editplan.list` (analysis/editplan-*.json
+ * with every item and take mapped through the live timeline by the engine):
+ * items grouped by editorial category with counts, each suggestion with its
+ * why text, Apply / Dismiss, and "Use other take" for retake groups.
+ *
+ * Apply/Dismiss/take picks run through `autoedit.apply` reviews
+ * ({accept, reject, takes}) — the engine re-resolves the plan under the review
+ * and lands it as real revisions, then the host refreshes `project.show`.
+ */
+import { Button } from "@rightkit/react-shell/react";
+import { useEffect, useMemo, useState } from "react";
+import { errorMessage } from "../lib/engine.js";
+import { autoeditApply, editplanList, } from "../lib/media.js";
+import { formatSeconds } from "../lib/project.js";
+/** Item kind (snake_case) → the spec's Change groups. */
+function groupOf(item) {
+    const k = item.kind ?? "";
+    if (k.includes("retake"))
+        return "Retakes";
+    if (["silence", "long_pause", "breath", "low_energy", "off_mic"].includes(k))
+        return "Pacing";
+    return "Structure";
+}
+/** Item kind → readable name (title case, no jargon). */
+function kindName(kind) {
+    return kind
+        .split("_")
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(" ");
+}
+export function ChangesPanel({ dir, plans, loadError, session, onCommitted, onSeek, }) {
+    const [local, setLocal] = useState(null);
+    const [error, setError] = useState(null);
+    const [altFor, setAltFor] = useState(null);
+    const data = local ?? plans;
+    useEffect(() => setLocal(null), [plans]);
+    const review = useMemo(() => async (plan, rv) => {
+        setError(null);
+        try {
+            await autoeditApply(dir, plan.config?.cuts?.preset ?? "natural", {
+                source: plan.source ?? plan.source_blake3,
+                review: rv,
+            });
+            const r = await editplanList(dir);
+            setLocal(r.plans);
+            onCommitted();
+        }
+        catch (e) {
+            setError(errorMessage(e));
+            onCommitted();
+        }
+    }, [dir, onCommitted]);
+    const items = data.flatMap((pl) => pl.items ?? []);
+    const pending = items.filter((i) => i.tier === "suggest").length;
+    if (loadError) {
+        return (_jsxs("p", { className: "cr-muted", role: "alert", style: { margin: 0, fontSize: 12 }, children: ["The auto-edit plan could not be read \u2014 ", loadError] }));
+    }
+    if (items.length === 0 && data.every((pl) => (pl.take_groups ?? []).length === 0)) {
+        return (_jsx("p", { className: "cr-muted", style: { margin: 0, fontSize: 12 }, children: "No auto-edit plan on this project yet \u2014 changes will appear here after an auto-edit run." }));
+    }
+    const groups = ["Retakes", "Pacing", "Structure"]
+        .map((label) => ({
+        label,
+        items: data.flatMap((pl) => (pl.items ?? [])
+            .filter((i) => groupOf(i) === label)
+            .map((item) => ({ plan: pl, item }))),
+    }))
+        .filter((g) => g.items.length > 0);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fe-change-group", children: _jsxs("div", { className: "fe-change-group__head", children: [_jsx("h4", { children: "Auto-edit" }), _jsx("span", { className: "rk-badge", children: items.length }), pending > 0 && _jsxs("span", { className: "rk-badge", children: [pending, " suggested"] })] }) }), error && (_jsx("p", { role: "alert", className: "cr-muted", style: { margin: 0, fontSize: 12 }, children: error })), groups.map((g) => (_jsxs("section", { className: "fe-change-group", children: [_jsxs("div", { className: "fe-change-group__head", children: [_jsx("h4", { children: g.label }), _jsx("span", { className: "rk-badge", children: g.items.length })] }), g.items.map(({ plan, item }) => (_jsx(ChangeRow, { plan: plan, item: item, busy: session.busy, altOpen: altFor === item.id, onToggleAlt: () => setAltFor(altFor === item.id ? null : item.id), onSeek: onSeek, onReview: (rv) => void review(plan, rv) }, item.id)))] }, g.label)))] }));
+}
+function ChangeRow({ plan, item, busy, altOpen, onToggleAlt, onSeek, onReview, }) {
+    const suggested = item.tier === "suggest";
+    const placed = (item.out?.length ?? 0) > 0;
+    const at = item.at_ms ?? item.start_ms;
+    const takeGroup = item.take
+        ? plan.take_groups?.find((g) => g.id === item.take?.group)
+        : undefined;
+    const covered = item.covered_by != null;
+    const stateChip = suggested ? (_jsx("span", { className: "rk-badge", children: "Suggested" })) : placed ? (_jsx("span", { className: "rk-badge", children: "On timeline" })) : (_jsx("span", { className: "rk-badge", children: "Applied" }));
+    return (_jsxs("div", { className: "fe-change", "data-state": suggested ? "suggested" : "applied", children: [_jsxs("div", { className: "fe-change__head", children: [_jsx("button", { type: "button", className: "fe-change__label", title: `${kindName(item.kind)} · ${formatSeconds(at / 1000)} on the timeline`, onClick: () => onSeek(at / 1000), children: item.text ? `\u201C${item.text}\u201D` : kindName(item.kind) }), stateChip] }), item.reason && _jsx("p", { className: "fe-change__reason", children: item.reason }), covered && (_jsx("p", { className: "fe-change__reason", children: "Already covered by a higher-priority change." })), _jsxs("div", { className: "fe-change__actions", children: [suggested && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", disabled: busy, onClick: () => onReview({ accept: [item.id] }), children: "Apply" }), _jsx(Button, { size: "sm", variant: "ghost", disabled: busy, onClick: () => onReview({ reject: [item.id] }), children: "Dismiss" })] })), takeGroup && takeGroup.takes.length > 1 && (_jsx(Button, { size: "sm", variant: "ghost", disabled: busy, onClick: onToggleAlt, children: altOpen ? "Hide takes" : "Use other take" }))] }), altOpen && takeGroup && (_jsx("div", { className: "fe-change__alts", children: takeGroup.takes.map((alt) => {
+                    const isCurrent = alt.chosen === true || alt.index === takeGroup.chosen;
+                    return (_jsxs("div", { className: `fe-take${isCurrent ? " fe-take--current" : ""}`, children: [_jsxs("span", { className: "fe-take__label", title: alt.text, children: ["Take ", alt.index + 1, alt.at_ms != null && ` · ${formatSeconds(alt.at_ms / 1000)}`, alt.rank != null && ` · rank ${alt.rank}`] }), isCurrent ? (_jsx("span", { className: "rk-badge", children: "Current" })) : (_jsx(Button, { size: "sm", disabled: busy, onClick: () => onReview({ takes: { [takeGroup.id]: alt.index } }), children: "Use this take" }))] }, alt.index));
+                }) }))] }));
+}

package/dist/editor/ColourInspector.d.ts

@@ -0,0 +1,5 @@
+export declare function ColourInspector({ dir, sourceId, atMs }: {
+    dir: string;
+    sourceId: string;
+    atMs: number;
+}): import("react").JSX.Element;