@rightkit/video-ui 0.0.0-stage → 0.1.1

package/dist/lib/shell.d.ts

@@ -0,0 +1,172 @@
+import { type AppShellBridge } from "@rightkit/react-shell";
+/** Persisted light/dark/system choice (same key the pre-RightKit app used, so
+ *  existing users keep their theme). */
+export declare const themeStore: {
+    read: () => import("@rightkit/react-shell").ThemeChoice;
+    resolved: (choice?: import("@rightkit/react-shell").ThemeChoice) => import("@rightkit/react-shell").ResolvedTheme;
+    apply: (choice: import("@rightkit/react-shell").ThemeChoice) => void;
+    save: (choice: import("@rightkit/react-shell").ThemeChoice) => void;
+    subscribe: (listener: (choice: import("@rightkit/react-shell").ThemeChoice) => void) => () => void;
+    dispose: () => void;
+};
+export declare const shell: {
+    ready: () => Promise<{
+        background: boolean;
+        appId: string;
+        appName: string;
+        engine: {
+            state: 'starting' | 'ready' | 'error';
+            hello?: unknown;
+            code?: string;
+            message?: string;
+        } | null;
+    }>;
+    status: () => Promise<import("@rightkit/tauri-shell").ShellStatus>;
+    capabilities: () => Promise<import("@rightkit/tauri-shell").ShellCapabilities>;
+    quit: (quitOptions?: import("@rightkit/tauri-shell").QuitOptions) => Promise<import("@rightkit/tauri-shell").QuitReport>;
+    onQuitRequested: (handler: import("@rightkit/tauri-shell").QuitHandler) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    openExternal: (url: string) => Promise<void>;
+    window: {
+        do: (action: import("@rightkit/tauri-shell").WindowAction) => Promise<void>;
+        minimize: () => Promise<void>;
+        toggleMaximize: () => Promise<void>;
+        close: () => Promise<void>;
+        startDrag: () => Promise<void>;
+        open: (spec: import("@rightkit/tauri-shell").WindowSpec) => Promise<string>;
+        trafficLights: (dx: number, dy: number) => Promise<void>;
+    };
+    menu: {
+        setEnabled: (id: string, enabled: boolean) => Promise<void>;
+        setChecked: (id: string, checked: boolean) => Promise<void>;
+        setState: (updates: import("@rightkit/tauri-shell").MenuItemState[]) => Promise<void>;
+        onClick: (h: (id: string) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    };
+    tray: {
+        update: (update: import("@rightkit/tauri-shell").TrayUpdate) => Promise<void>;
+        onEvent: (h: (e: {
+            kind: 'menu';
+            id: string;
+        } | {
+            kind: 'click';
+        }) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+        onCustom: (name: string, h: (payload: unknown) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    };
+    deepLinks: {
+        on: (h: (link: import("@rightkit/tauri-shell").DeepLink) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    };
+    onSecondInstance: (h: (e: {
+        argv: string[];
+        cwd: string;
+    }) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    onStall: (h: (e: {
+        stalledMs: number;
+        thresholdMs: number;
+    }) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    autostart: {
+        get: () => Promise<import("@rightkit/tauri-shell").AutostartStatus>;
+        set: (enabled: boolean) => Promise<import("@rightkit/tauri-shell").AutostartStatus>;
+        openLoginItemsSettings: () => Promise<void>;
+    };
+    clipboard: {
+        read: (board?: string) => Promise<import("@rightkit/tauri-shell").ClipboardContent>;
+        write: (c: import("@rightkit/tauri-shell").ClipboardContent) => Promise<void>;
+        item: () => Promise<import("@rightkit/tauri-shell").ClipboardItem>;
+    };
+    notifications: {
+        post: (request: import("@rightkit/tauri-shell").NotificationRequest) => Promise<import("@rightkit/tauri-shell").NotifyOutcome>;
+        status: () => Promise<import("@rightkit/tauri-shell").NotifyStatus>;
+        clear: (ids?: string[]) => Promise<void>;
+        setBadge: (count: number) => Promise<number>;
+    };
+    presence: {
+        state: () => Promise<import("@rightkit/tauri-shell").PresenceState>;
+        setDnd: (enabled: boolean) => Promise<import("@rightkit/tauri-shell").PresenceState>;
+        setAuto: (prefs: import("@rightkit/tauri-shell").AutoPrefs) => Promise<import("@rightkit/tauri-shell").PresenceState>;
+        probe: () => Promise<{
+            environment: import("@rightkit/tauri-shell").Environment;
+            windows: number;
+            supported: boolean;
+        }>;
+        evaluate: (monitor: import("@rightkit/tauri-shell").Rect, windows: import("@rightkit/tauri-shell").WindowObservation[], apply?: boolean) => Promise<{
+            environment: import("@rightkit/tauri-shell").Environment;
+            state: import("@rightkit/tauri-shell").PresenceState;
+        }>;
+        onChange: (h: (s: import("@rightkit/tauri-shell").PresenceState) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    };
+    idle: {
+        status: () => Promise<import("@rightkit/tauri-shell").IdleStatus>;
+        note: (hidden: boolean) => Promise<void>;
+        onChange: (h: (e: {
+            state: 'hidden' | 'visible' | 'suspended' | 'resumed';
+        }) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    };
+    paths: {
+        require: (path: string, write?: boolean) => Promise<string>;
+        revoke: (path: string) => Promise<void>;
+        grantRecent: (id: string) => Promise<string>;
+        regrantSaved: (path: string) => Promise<string>;
+        streamUrl: (path: string) => Promise<{
+            id: string;
+            url: string;
+        }>;
+    };
+    openPaths: {
+        ready: () => Promise<string[]>;
+        onOpen: (h: (e: {
+            paths: string[];
+        }) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    };
+    onDrop: (zone: import("@rightkit/tauri-shell").DropZone, handler: (e: import("@rightkit/tauri-shell").DropEvent) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    associations: {
+        status: (groups?: string[]) => Promise<import("@rightkit/tauri-shell").AssociationStatus>;
+        set: (groups?: string[], timeoutMs?: number) => Promise<import("@rightkit/tauri-shell").AssociationSetResult>;
+        openDefaultApps: () => Promise<void>;
+    };
+    print: (ui?: import("@rightkit/tauri-shell").PrintUi) => Promise<void>;
+    onPrintError: (h: (message: string) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    recovery: {
+        save: (snapshot: unknown) => Promise<void>;
+        load: <T = unknown>() => Promise<T | null>;
+        clear: () => Promise<void>;
+    };
+    site: {
+        grant: (document: string) => Promise<import("@rightkit/tauri-shell").SiteGrant>;
+        revoke: (token: string) => Promise<void>;
+    };
+    surface: {
+        set: (surface: string) => Promise<import("@rightkit/tauri-shell").SurfaceReport>;
+    };
+    preview: {
+        register: (kind: string, html: string) => Promise<import("@rightkit/tauri-shell").PreviewHandle>;
+        revoke: (token: string) => Promise<void>;
+        revokeAll: () => Promise<void>;
+    };
+    legal: {
+        read: () => Promise<import("@rightkit/tauri-shell").LegalReceiptRecord | null>;
+        create: (request: import("@rightkit/tauri-shell").LegalReceiptCreateRequest) => Promise<import("@rightkit/tauri-shell").LegalReceiptRecord>;
+        reset: () => Promise<void>;
+    };
+    update: {
+        check: () => Promise<import("@rightkit/tauri-shell").UpdateHostCheck>;
+        status: () => Promise<import("@rightkit/tauri-shell").UpdateHostStatus>;
+        download: (handleId: string) => Promise<import("@rightkit/tauri-shell").UpdateHostDownload>;
+        install: (handleId: string) => Promise<import("@rightkit/tauri-shell").UpdateHostInstall>;
+        cancel: (handleId: string) => Promise<{
+            cancelled: boolean;
+        }>;
+        onProgress: (h: (p: import("@rightkit/tauri-shell").UpdateHostProgress) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    };
+    engine: {
+        call: <T = unknown>(method: string, params?: unknown) => Promise<T>;
+        callTagged: <T = unknown>(method: string, params?: unknown, tag?: string) => Promise<T>;
+        status: () => Promise<import("@rightkit/tauri-shell").EngineStatus | null>;
+        onEvent: (h: (e: import("@rightkit/tauri-shell").EngineEvent) => void) => Promise<import("@rightkit/tauri-shell").Unlisten>;
+    };
+    bridge: () => import("@rightkit/tauri-shell").ShellBridge;
+};
+/** Native side of @rightkit/react-shell: caption buttons on Windows; macOS draws
+ *  its traffic lights through the overlay title bar. The caption actions reach the
+ *  host's `rk_shell_window` command (rightkit-tauri-shell) through @rightkit/tauri-shell. */
+export declare const shellBridge: AppShellBridge;
+/** Quits the app at once through the shell host (`rk_shell_quit`): no drain handlers run. */
+export declare const quitNow: () => Promise<import("@rightkit/tauri-shell").QuitReport>;

package/dist/lib/shell.js

@@ -0,0 +1,32 @@
+import { createThemeStore } from "@rightkit/react-shell";
+import { createShell } from "@rightkit/tauri-shell";
+/** Created on first use (outside a Tauri webview createShell throws, so importing this package must not call it). */
+function lazy(make) {
+    let value = null;
+    const get = () => (value ??= make());
+    return new Proxy({}, {
+        get: (_t, key) => {
+            const v = Reflect.get(get(), key);
+            return typeof v === "function" ? v.bind(get()) : v;
+        },
+        has: (_t, key) => key in get(),
+    });
+}
+/** Persisted light/dark/system choice (same key the pre-RightKit app used, so
+ *  existing users keep their theme). */
+// alwaysPaintDataTheme: false keeps the pre-0.5.0 behaviour (system leaves data-theme unset and
+// the OS decides in CSS), which brand.css and shell.css were written against.
+export const themeStore = createThemeStore({ storageKey: "cutright.theme", alwaysPaintDataTheme: false });
+export const shell = lazy(() => createShell());
+/** Native side of @rightkit/react-shell: caption buttons on Windows; macOS draws
+ *  its traffic lights through the overlay title bar. The caption actions reach the
+ *  host's `rk_shell_window` command (rightkit-tauri-shell) through @rightkit/tauri-shell. */
+export const shellBridge = {
+    window: {
+        minimize: () => shell.window.minimize(),
+        toggleMaximize: () => shell.window.toggleMaximize(),
+        close: () => shell.window.close(),
+    },
+};
+/** Quits the app at once through the shell host (`rk_shell_quit`): no drain handlers run. */
+export const quitNow = () => shell.quit({ force: true });

package/dist/styles.css

@@ -0,0 +1,24 @@
+/* Every stylesheet this package's components use. Hosts import "<package>/styles.css" once (Node cannot import CSS from JS). */
+@import "./components/Workspace.css";
+@import "./demo/demo.css";
+@import "./ui/ui.css";
+@import "./views/Assets.css";
+@import "./views/Recipe.css";
+@import "./views/Exports.css";
+@import "./views/Home.css";
+@import "@rightkit/onboarding/onboarding.css";
+@import "./views/Phrases.css";
+@import "./views/Prompt.css";
+@import "./views/Retention.css";
+@import "@rightkit/settings-ui/settings.css";
+@import "./views/Shorts.css";
+@import "./views/Media.css";
+@import "./views/FinishedEdit.css";
+
+/* Caption clip surface (CutRight #38): the caption track's clip fill, tuned per mode. */
+:root { --caption-clip: color-mix(in srgb, var(--rk-accent) 18%, transparent); }
+:root:not([data-theme="light"]) { --caption-clip: color-mix(in srgb, var(--rk-accent) 26%, transparent); }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) { --caption-clip: color-mix(in srgb, var(--rk-accent) 26%, transparent); }
+}
+:root[data-theme="dark"] { --caption-clip: color-mix(in srgb, var(--rk-accent) 26%, transparent); }

package/dist/ui/icons.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+declare const P: Record<string, string[]>;
+export type IconName = keyof typeof P;
+export declare function Icon({ name, ...rest }: {
+    name: IconName;
+} & SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export {};

package/dist/ui/icons.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const P = {
+    plus: ["M5 12h14", "M12 5v14"],
+    x: ["M18 6 6 18", "m6 6 12 12"],
+    check: ["M20 6 9 17l-5-5"],
+    "chevron-left": ["m15 18-6-6 6-6"],
+    "chevron-right": ["m9 18 6-6-6-6"],
+    "chevron-down": ["m6 9 6 6 6-6"],
+    "chevron-up": ["m18 15-6-6-6 6"],
+    "layout-list": [
+        "M4 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z",
+        "M4 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z",
+        "M14 4h7",
+        "M14 9h7",
+        "M14 15h7",
+        "M14 20h7",
+    ],
+    "more-horizontal": ["M12 12h.01", "M19 12h.01", "M5 12h.01"],
+    film: ["M3 3h18v18H3z", "M7 3v18", "M17 3v18", "M3 7.5h4", "M3 12h18", "M3 16.5h4", "M17 7.5h4", "M17 16.5h4"],
+    clapperboard: ["M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z", "m6.2 5.3 3.1 3.9", "m12.4 3.4 3.1 4", "M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"],
+    "wand-sparkles": ["m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72", "m14 7 3 3", "M5 6v4", "M19 14v4", "M10 2v2", "M7 8H3", "M21 16h-4", "M11 3H9"],
+    download: ["M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", "m7 10 5 5 5-5", "M12 15V3"],
+    upload: ["M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", "m17 8-5-5-5 5", "M12 3v12"],
+    image: ["M3 3h18v18H3z", "M9 9h.01", "m21 15-5-5L5 21"],
+    music: ["M9 18V5l12-2v13", "M6 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z", "M18 13a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"],
+    mic: ["M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z", "M19 10v2a7 7 0 0 1-14 0v-2", "M12 19v3"],
+    scissors: ["M6 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z", "M6 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z", "M20 4 8.12 15.88", "M14.47 14.48 20 20", "M8.12 8.12 12 12"],
+    "mouse-pointer": ["M12.586 12.586 19 19", "M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"],
+    undo: ["M3 7v6h6", "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"],
+    redo: ["M21 7v6h-6", "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"],
+    play: ["M6 3 20 12 6 21Z"],
+    pause: ["M6 4h4v16H6z", "M14 4h4v16h-4z"],
+    "step-back": ["M17 18 9 12l8-6Z", "M7 6v12"],
+    "step-forward": ["m7 18 8-6-8-6Z", "M17 6v12"],
+    repeat: ["m17 2 4 4-4 4", "M3 11v-1a4 4 0 0 1 4-4h14", "m7 22-4-4 4-4", "M21 13v1a4 4 0 0 1-4 4H3"],
+    volume: ["M11 4.7a.7.7 0 0 0-1.2-.5L6.4 7.6A1.4 1.4 0 0 1 5.4 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.4a1.4 1.4 0 0 1 1 .4l3.4 3.4a.7.7 0 0 0 1.2-.5Z", "M16 9a5 5 0 0 1 0 6", "M19.4 18.4a9 9 0 0 0 0-12.7"],
+    "volume-x": ["M11 4.7a.7.7 0 0 0-1.2-.5L6.4 7.6A1.4 1.4 0 0 1 5.4 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.4a1.4 1.4 0 0 1 1 .4l3.4 3.4a.7.7 0 0 0 1.2-.5Z", "m22 9-6 6", "m16 9 6 6"],
+    magnet: ["m6 15-4-4 6.75-6.77a7.79 7.79 0 0 1 11 11L13 22l-4-4 6.39-6.36a2.14 2.14 0 0 0-3-3L6 15", "m5 8 4 4", "m12 15 4 4"],
+    settings: ["M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z", "M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"],
+    sun: ["M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z", "M12 2v2", "M12 20v2", "m4.93 4.93 1.41 1.41", "m17.66 17.66 1.41 1.41", "M2 12h2", "M20 12h2", "m6.34 17.66-1.41 1.41", "m19.07 4.93-1.41 1.41"],
+    moon: ["M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"],
+    folder: ["M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"],
+    "folder-open": ["m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"],
+    "list-video": ["M12 12H3", "M16 6H3", "M12 18H3", "m16 12 5 3-5 3v-6Z"],
+    "sliders-horizontal": ["M21 4h-7", "M10 4H3", "M21 12h-9", "M8 12H3", "M21 20h-5", "M12 20H3", "M14 2v4", "M8 10v4", "M16 18v4"],
+    "text-quote": ["M17 6H3", "M21 12H8", "M21 18H8", "M3 12v6"],
+    "chart-line": ["M3 3v16a2 2 0 0 0 2 2h16", "m19 9-5 5-4-4-3 3"],
+    sparkles: ["M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.13-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.13a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.13 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.13a.5.5 0 0 1-.96 0z"],
+    "triangle-alert": ["m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3", "M12 9v4", "M12 17h.01"],
+    "circle-check": ["M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z", "m9 12 2 2 4-4"],
+    "rotate-ccw": ["M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", "M3 3v5h5"],
+    link: ["M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"],
+    maximize: ["M8 3H5a2 2 0 0 0-2 2v3", "M21 8V5a2 2 0 0 0-2-2h-3", "M3 16v3a2 2 0 0 0 2 2h3", "M16 21h3a2 2 0 0 0 2-2v-3"],
+    captions: ["M3 5h18v14H3z", "M7 15h4", "M15 15h2", "M7 11h2", "M13 11h4"],
+    layers: ["m12.83 2.18 8.58 3.9a1 1 0 0 1 0 1.83l-8.58 3.9a2 2 0 0 1-1.66 0L2.6 7.9a1 1 0 0 1 0-1.83l8.58-3.9a2 2 0 0 1 1.66 0Z", "m22 12-9.17 4.17a2 2 0 0 1-1.66 0L2 12", "m22 17-9.17 4.17a2 2 0 0 1-1.66 0L2 17"],
+    copy: ["M8 8h12v12H8z", "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"],
+    "trash-2": ["M3 6h18", "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", "M10 11v6", "M14 11v6"],
+    "message-square-text": ["M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", "M13 8H7", "M17 12H7"],
+};
+export function Icon({ name, ...rest }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", width: 16, height: 16, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...rest, children: (P[name] ?? []).map((d) => (_jsx("path", { d: d }, d))) }));
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from "react";
+export { Icon, type IconName } from "./icons.js";
+export type Tone = "neutral" | "ok" | "warn" | "danger" | "info";
+/**
+ * Fixed-aspect media tile. The container is the shell Card (flush) and the badge is the shell Badge;
+ * the media markup (poster, hover preview, corner action) stays here. `src` is an asset URL or
+ * undefined while loading.
+ */
+export declare function Thumbnail({ src, aspect, badge, corner, contain, alt, video, }: {
+    src?: string;
+    aspect?: string;
+    badge?: string;
+    corner?: ReactNode;
+    contain?: boolean;
+    alt?: string;
+    /** When set, a muted looping preview plays while hovered. */
+    video?: string;
+}): import("react").JSX.Element;
+export declare function ProgressRow({ label, status, tone, fraction, elapsed, error, onRetry, }: {
+    label: string;
+    status: string;
+    tone?: Tone;
+    /** 0..1, or undefined for indeterminate while running; null hides the bar. */
+    fraction?: number | null;
+    elapsed?: string;
+    error?: string;
+    onRetry?: () => void;
+}): import("react").JSX.Element;
+export declare function Drawer({ title, open, onClose, children, footer, }: {
+    title: string;
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    footer?: ReactNode;
+}): import("react").JSX.Element | null;
+export declare function ErrorPanel({ title, message, detail, actions, }: {
+    title: string;
+    /** The actionable reason, always visible; `detail` stays collapsed. */
+    message?: string;
+    detail?: string;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+/** `mm:ss` under an hour, `h:mm:ss` above. */
+export declare function timecode(ms: number): string;
+export declare function fileSize(bytes: number): string;

package/dist/ui/index.js

@@ -0,0 +1,43 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Badge, Button, Card, IconButton, ModalShell, Notice, ProgressBar, cx } from "@rightkit/react-shell/react";
+import { Icon } from "./icons.js";
+export { Icon } from "./icons.js";
+/**
+ * Fixed-aspect media tile. The container is the shell Card (flush) and the badge is the shell Badge;
+ * the media markup (poster, hover preview, corner action) stays here. `src` is an asset URL or
+ * undefined while loading.
+ */
+export function Thumbnail({ src, aspect = "16 / 9", badge, corner, contain, alt = "", video, }) {
+    const [hover, setHover] = useState(false);
+    return (_jsx(Card, { flush: true, className: "cr-thumb-card", children: _jsxs("div", { className: cx("cr-thumb", contain && "cr-thumb--contain"), style: { aspectRatio: aspect }, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: [!src && _jsx(Icon, { name: "film", width: 22, height: 22 }), src && _jsx("img", { src: src, alt: alt, loading: "lazy", draggable: false }), video && hover && _jsx("video", { src: video, autoPlay: true, muted: true, loop: true, playsInline: true }), corner && _jsx("div", { className: "cr-thumb__corner", children: corner }), badge && (_jsx("span", { className: "cr-thumb__badge", children: _jsx(Badge, { tone: "neutral", children: badge }) }))] }) }));
+}
+export function ProgressRow({ label, status, tone = "info", fraction, elapsed, error, onRetry, }) {
+    return (_jsxs("div", { className: "cr-progress", children: [_jsx("span", { className: "cr-progress__label", children: label }), _jsx(Badge, { tone: error || tone === "danger" ? "bad" : tone === "info" ? "accent" : tone, children: status }), _jsx("span", { className: "cr-progress__time", children: elapsed ?? "" }), fraction !== null && !error && (fraction === undefined ? (_jsx("div", { className: "cr-progress__bar--indeterminate", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx("i", {}) })) : (_jsx(ProgressBar, { value: fraction * 100, label: label, tone: tone === "danger" ? "bad" : tone === "ok" || tone === "warn" ? tone : "accent" }))), error && (_jsx(Notice, { tone: "bad", className: "cr-progress__error", action: onRetry && (_jsxs(Button, { size: "sm", variant: "ghost", onClick: onRetry, children: [_jsx(Icon, { name: "rotate-ccw" }), "Retry"] })), children: _jsx("span", { className: "cr-clamp-4", title: error, children: error }) }))] }));
+}
+export function Drawer({ title, open, onClose, children, footer, }) {
+    // The shell's modal owns the scrim, Escape (topmost only), focus trap and focus restore;
+    // the classes only dock it to the right edge below the title bar.
+    if (!open)
+        return null;
+    return (_jsxs(ModalShell, { label: title, ariaLabel: title, onClose: onClose, width: 400, overlayClassName: "cr-drawer-overlay", className: "cr-drawer", children: [_jsxs("div", { className: "cr-drawer__head", children: [_jsx("h2", { children: title }), _jsx(IconButton, { label: "Close", onClick: onClose, children: _jsx(Icon, { name: "x" }) })] }), _jsx("div", { className: "cr-drawer__body", children: children }), footer && _jsx("div", { className: "cr-drawer__foot", children: footer })] }));
+}
+export function ErrorPanel({ title, message, detail, actions, }) {
+    return (_jsx(Notice, { tone: "bad", title: title, action: actions, className: "cr-error", children: (message || detail) && (_jsxs(_Fragment, { children: [message && _jsx("span", { children: message }), detail && (_jsxs("details", { children: [_jsx("summary", { children: "Details" }), _jsx("pre", { children: detail })] }))] })) }));
+}
+/** `mm:ss` under an hour, `h:mm:ss` above. */
+export function timecode(ms) {
+    const total = Math.max(0, Math.floor(ms / 1000));
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    const pad = (n) => String(n).padStart(2, "0");
+    return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
+}
+export function fileSize(bytes) {
+    if (bytes < 1024 * 1024)
+        return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+    if (bytes < 1024 ** 3)
+        return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+    return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+}

package/dist/ui/ui.css

@@ -0,0 +1,104 @@
+/* the host app media UI, layout & published-component exceptions.
+   Generic controls, notices & determinate progress use @rightkit/react-shell. */
+
+.cr-btn--block { width: 100%; }
+/* The chip is a shell Button (ghost, sm) around a Badge; the Badge draws the chip, so the button chrome is reset. */
+.rk-btn.cr-chip-btn { border: 0; padding: 0; min-height: 0; height: auto; background: none; box-shadow: none; border-radius: 6px; }
+.rk-btn.cr-chip-btn:hover { background: none; }
+.rk-btn.cr-chip-btn:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: 1px; }
+.rk-badge svg { flex: none; }
+
+/* Native selects kept for M2 exception b12 (published Select forwards no id/aria-describedby/data-testid). */
+.cr-select { appearance: auto; }
+.cr-textarea { height: auto; min-height: 96px; padding: 10px; line-height: 1.6; resize: vertical; }
+
+.cr-thumb {
+  position: relative;
+  width: 100%;
+  background: var(--cr-stage);
+  border-radius: var(--r-sm);
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  color: var(--rk-ink-3);
+}
+.cr-thumb img, .cr-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.cr-thumb--contain img, .cr-thumb--contain video { object-fit: contain; }
+/* The Card frames the tile without adding chrome of its own; the Badge draws the badge. */
+.rk-card.cr-thumb-card { padding: 0; border: 0; background: none; box-shadow: none; border-radius: var(--r-sm); overflow: hidden; }
+.cr-thumb__badge {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+}
+.cr-thumb__corner { position: absolute; left: 6px; top: 6px; }
+
+.cr-progress {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  column-gap: var(--s3);
+  row-gap: 6px;
+  font-size: 13px;
+}
+.cr-progress__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cr-progress__time { font: 11px/1 var(--rk-font-mono); color: var(--rk-ink-2); }
+.cr-progress > [role="progressbar"] { grid-column: 1 / -1; }
+.cr-progress__bar--indeterminate { height: 3px; border-radius: 2px; background: var(--rk-fill-2); overflow: hidden; }
+.cr-progress__bar--indeterminate > i { display: block; width: 30%; height: 100%; background: var(--rk-accent); animation: cr-indet 1.2s ease-in-out infinite; }
+.cr-progress__error { grid-column: 1 / -1; }
+@keyframes cr-indet { from { transform: translateX(-100%); } to { transform: translateX(330%); } }
+
+/* ModalShell docked to the right edge below the title bar (the shell supplies scrim, Escape, focus). */
+.rk-overlay.cr-drawer-overlay { inset: var(--rk-titlebar-height, 52px) 0 0 0; padding: 0; justify-content: flex-end; align-items: stretch; }
+.rk-modal.cr-drawer {
+  max-width: 100vw;
+  max-height: none;
+  padding: 0;
+  overflow: hidden;
+  background: var(--rk-plane);
+  border-radius: 0;
+  border-left: 0.5px solid var(--rk-line);
+  animation: none;
+  display: flex;
+  flex-direction: column;
+}
+.cr-drawer__head {
+  height: 52px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+  padding: 0 var(--s3) 0 var(--s5);
+  border-bottom: 0.5px solid var(--rk-hairline);
+}
+.cr-drawer__head h2 { flex: 1; margin: 0; font: 600 15px/1.3 var(--rk-font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cr-drawer__body { flex: 1; overflow: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
+.cr-drawer__foot { flex: none; padding: var(--s3) var(--s5); border-top: 0.5px solid var(--rk-hairline); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s2); }
+
+.cr-error details { color: var(--rk-ink-2); font-size: 12px; }
+.cr-error details pre { white-space: pre-wrap; font: 11px/1.5 var(--rk-font-mono); margin: 6px 0 0; }
+
+.cr-overline { font: 500 11px/1 var(--rk-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rk-ink-2); }
+.cr-clamp-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cr-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.cr-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+
+
+@media (prefers-reduced-motion: reduce) {
+  .cr-progress__bar--indeterminate > i { animation: none; }
+}
+
+/* Settings rows (SettingsPanel from @rightkit/settings-ui). */
+.cr-settings-chips { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
+.cr-settings-num { width: 96px; }
+.cr-settings-path { width: 320px; max-width: 100%; }
+.cr-settings-detail { margin-top: 4px; font-size: 12px; color: var(--rk-ink-2); }
+.cr-settings-detail p { margin: 4px 0 0; font: 11px/1.5 var(--rk-font-mono); word-break: break-all; }
+.cr-settings-field { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 100%; }
+.cr-settings-note { margin: 0; max-width: 360px; font-size: 12px; color: var(--rk-ink-2); text-align: right; }
+
+/* Sizes the shell SearchIcon (an unsized svg) for button and empty-state use. */
+.cr-glyph { display: inline-flex; width: 16px; height: 16px; }
+.cr-glyph--lg { width: 28px; height: 28px; }
+.cr-glyph svg { width: 100%; height: 100%; }

package/dist/views/Assets.css

@@ -0,0 +1,99 @@
+/* Assets — docs/design/app-ui.md §3.7 */
+
+.assets-body { display: flex; flex-direction: column; gap: var(--s5); }
+/* Reserves the content region so the the host app notice below keeps its position through load. */
+.assets-main { min-height: 16rem; display: flex; flex-direction: column; }
+
+.assets-jobs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+  padding: var(--s4);
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-lg);
+}
+.assets-job { display: flex; align-items: center; gap: var(--s3); }
+.assets-job .cr-progress { flex: 1; min-width: 0; }
+.assets-job__cost { font-size: 11px; flex: none; }
+
+.assets-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--s4);
+}
+.assets-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;
+}
+.assets-tile {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: var(--cr-stage);
+  border-radius: var(--r-sm);
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  color: var(--rk-ink-3);
+}
+.assets-tile video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.assets-tile audio { display: none; }
+.assets-card__name { font: 500 13px/1.3 var(--rk-font-body); }
+.assets-card__row { display: flex; align-items: center; gap: var(--s2); }
+.assets-card__prov { font-size: 12px; }
+.assets-card__actions { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s1); }
+
+.assets-place { position: relative; }
+.assets-place__pop {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 4px);
+  z-index: 30;
+  min-width: 200px;
+  background: var(--rk-elevated);
+  border: 1px solid var(--rk-line);
+  border-radius: var(--r-md);
+  box-shadow: var(--rk-pop);
+  padding: var(--s1);
+  display: flex;
+  flex-direction: column;
+}
+.assets-place__pop > button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  color: var(--rk-ink);
+  font: 400 13px/1 var(--rk-font-body);
+  padding: 7px var(--s3);
+  border-radius: var(--r-sm);
+  cursor: pointer;
+}
+.assets-place__pop > button:hover { background: var(--rk-fill-2); }
+.assets-place__form { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2); }
+.assets-place__form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--rk-ink-2); }
+.assets-place__actions { display: flex; justify-content: flex-end; gap: var(--s2); }
+.assets-card__preview { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); }
+.assets-card__preview:disabled { cursor: default; }
+.assets-card__preview:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: 2px; }
+.assets-image-viewer { height: 420px; display: flex; }
+.assets-cues { display: flex; flex-direction: column; gap: 2px; width: 340px; max-height: 240px; overflow-y: auto; }
+.assets-cues > button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--rk-ink); padding: 4px 6px; border-radius: var(--r-sm); font-size: 12px; cursor: pointer; }
+.assets-cues > button:hover { background: var(--rk-fill-2); }
+.assets-cues > button[aria-pressed="true"] { background: var(--rk-fill-2); box-shadow: inset 2px 0 0 var(--rk-focus); }
+.assets-cues__time { color: var(--rk-ink-2); font-variant-numeric: tabular-nums; }
+.assets-cues__meta { font-size: 12px; color: var(--rk-ink-2); padding: 4px 6px; }

package/dist/views/AssetsView.d.ts

@@ -0,0 +1,6 @@
+import { type HostJob } from "../lib/genright.js";
+export declare function jobActionLabel(j: HostJob): "Cancel" | "Import now" | "Retry" | null;
+export declare function AssetsView({ dir, onNewVideo }: {
+    dir?: string;
+    onNewVideo?: () => void;
+}): import("react").JSX.Element;