@moldable-ai/ui 0.2.18 → 0.2.19

package/dist/components/hardware/serial-console.js

@@ -0,0 +1,399 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Cable, CornerDownLeft, Plug, RefreshCw, ShieldX, Unplug, } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { closeMoldableSerialPort, forgetMoldableSerialPort, getMoldableSerialSignals, openMoldableSerialPort, readMoldableSerialPort, requestMoldableSerialPort, setMoldableSerialSignals, writeMoldableSerialPort, } from '../../lib/native-hardware';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/select';
+import { Spinner } from '../ui/spinner';
+import { Switch } from '../ui/switch';
+import { CapabilityBadge } from './capability-badge';
+import { HardwarePanel, HardwarePanelAction, HardwarePanelContent, HardwarePanelFooter, HardwarePanelHeader, HardwarePanelIcon, HardwarePanelTitle, } from './hardware-panel';
+import { LiveIndicator } from './live-indicator';
+import { StreamLog, useStreamLog } from './stream-log';
+const BAUD_RATES = [9600, 19200, 38400, 57600, 115200, 230400];
+const DEFAULT_BAUD_RATE = 115200;
+function toError(cause) {
+    return cause instanceof Error ? cause : new Error(String(cause));
+}
+function formatHexId(value) {
+    return `0x${value.toString(16).padStart(4, '0')}`;
+}
+function formatSerialPortLabel(info) {
+    if (info?.usbVendorId !== undefined && info.usbProductId !== undefined) {
+        return `${formatHexId(info.usbVendorId)}:${formatHexId(info.usbProductId)}`;
+    }
+    if (info?.usbVendorId !== undefined)
+        return formatHexId(info.usbVendorId);
+    return 'Serial port';
+}
+function formatHexBytes(bytes) {
+    return Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join(' ');
+}
+const SIGNALS_OFF = {
+    dataTerminalReady: false,
+    requestToSend: false,
+    break: false,
+};
+/**
+ * Serial state machine behind `SerialConsole`: request → open → streaming
+ * read loop with UTF-8 decode, line sends, DTR/RTS control, RX/TX log.
+ * Use directly to build custom serial UI on the same lifecycle handling.
+ */
+export function useMoldableSerial(options = {}) {
+    const [status, setStatus] = useState('idle');
+    const [port, setPort] = useState(null);
+    const [portInfo, setPortInfo] = useState(null);
+    const [error, setError] = useState(null);
+    const [signals, setSignalsState] = useState(SIGNALS_OFF);
+    const [inputSignals, setInputSignals] = useState(null);
+    const [rxBytes, setRxBytes] = useState(0);
+    const [txBytes, setTxBytes] = useState(0);
+    const { entries, append, clear: clearEntries, } = useStreamLog(options.maxEntries ?? 500);
+    const portRef = useRef(null);
+    const portOpenRef = useRef(false);
+    const abortRef = useRef(null);
+    const readLoopRef = useRef(null);
+    const disconnectListenerRef = useRef(null);
+    const tokenRef = useRef(0);
+    const signalsRef = useRef(SIGNALS_OFF);
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    const clearPort = useCallback((active) => {
+        if (portRef.current !== active)
+            return;
+        const registered = disconnectListenerRef.current;
+        if (registered?.port === active) {
+            active.removeEventListener('disconnect', registered.listener);
+            disconnectListenerRef.current = null;
+        }
+        portRef.current = null;
+        portOpenRef.current = false;
+        signalsRef.current = SIGNALS_OFF;
+        setSignalsState(SIGNALS_OFF);
+        setInputSignals(null);
+        setPort(null);
+        setPortInfo(null);
+    }, []);
+    const teardown = useCallback(async (forgetPermission = false) => {
+        abortRef.current?.abort();
+        abortRef.current = null;
+        const loop = readLoopRef.current;
+        readLoopRef.current = null;
+        if (loop)
+            await loop.catch(() => undefined);
+        const active = portRef.current;
+        if (!active)
+            return;
+        if (portOpenRef.current) {
+            await closeMoldableSerialPort(active);
+            portOpenRef.current = false;
+        }
+        if (forgetPermission)
+            await forgetMoldableSerialPort(active);
+        clearPort(active);
+    }, [clearPort]);
+    const refreshSignals = useCallback(async () => {
+        const active = portRef.current;
+        if (!active || !portOpenRef.current)
+            return;
+        try {
+            setInputSignals(await getMoldableSerialSignals(active));
+        }
+        catch (cause) {
+            const failure = toError(cause);
+            setError(failure);
+            append({ direction: 'error', data: failure.message });
+        }
+    }, [append]);
+    const runReadLoop = useCallback(async (activePort, token, controller) => {
+        const decoder = new TextDecoder();
+        try {
+            for (;;) {
+                const result = await readMoldableSerialPort(activePort, {
+                    signal: controller.signal,
+                });
+                if (tokenRef.current !== token)
+                    return;
+                const bytes = result.value;
+                if (bytes && bytes.byteLength > 0) {
+                    setRxBytes((count) => count + bytes.byteLength);
+                    optionsRef.current.onData?.(bytes);
+                    const text = decoder.decode(bytes, { stream: true });
+                    if (text.length > 0)
+                        append({ direction: 'in', data: text });
+                }
+                if (result.done) {
+                    append({ direction: 'info', data: 'Serial stream ended' });
+                    return;
+                }
+            }
+        }
+        catch (cause) {
+            if (tokenRef.current !== token || controller.signal.aborted)
+                return;
+            const failure = toError(cause);
+            setError(failure);
+            setStatus('error');
+            append({ direction: 'error', data: failure.message });
+        }
+    }, [append]);
+    const connect = useCallback(async (overrides = {}) => {
+        const token = ++tokenRef.current;
+        setStatus('connecting');
+        setError(null);
+        try {
+            await teardown();
+            if (tokenRef.current !== token)
+                return;
+            const filters = overrides.filters ?? optionsRef.current.filters;
+            const requested = await requestMoldableSerialPort({
+                ...(filters ? { filters } : {}),
+                ...(optionsRef.current.selectNativePort
+                    ? { selectNativePort: optionsRef.current.selectNativePort }
+                    : {}),
+            });
+            if (tokenRef.current !== token)
+                return;
+            const baudRate = overrides.baudRate ?? optionsRef.current.baudRate ?? DEFAULT_BAUD_RATE;
+            await openMoldableSerialPort(requested, {
+                baudRate,
+                dataBits: 8,
+                stopBits: 1,
+                parity: 'none',
+                flowControl: 'none',
+            });
+            if (tokenRef.current !== token) {
+                portRef.current = requested;
+                portOpenRef.current = true;
+                try {
+                    await closeMoldableSerialPort(requested);
+                    clearPort(requested);
+                }
+                catch {
+                    setPort(requested);
+                    setPortInfo(requested.getInfo());
+                }
+                return;
+            }
+            const handleDisconnect = () => {
+                if (tokenRef.current !== token)
+                    return;
+                tokenRef.current++;
+                abortRef.current?.abort();
+                abortRef.current = null;
+                const loop = readLoopRef.current;
+                readLoopRef.current = null;
+                void Promise.resolve(loop)
+                    .catch(() => undefined)
+                    .then(async () => {
+                    try {
+                        if (portOpenRef.current) {
+                            await closeMoldableSerialPort(requested);
+                            portOpenRef.current = false;
+                        }
+                        clearPort(requested);
+                        const failure = new Error('Serial port disconnected.');
+                        setError(failure);
+                        setStatus('error');
+                        append({ direction: 'error', data: failure.message });
+                    }
+                    catch (cause) {
+                        const failure = toError(cause);
+                        setError(failure);
+                        setStatus('error');
+                        append({ direction: 'error', data: failure.message });
+                    }
+                });
+            };
+            requested.addEventListener('disconnect', handleDisconnect, {
+                once: true,
+            });
+            disconnectListenerRef.current = {
+                port: requested,
+                listener: handleDisconnect,
+            };
+            portRef.current = requested;
+            portOpenRef.current = true;
+            setPort(requested);
+            setPortInfo(requested.getInfo());
+            setStatus('connected');
+            append({ direction: 'info', data: `Connected · ${baudRate} baud` });
+            const controller = new AbortController();
+            abortRef.current = controller;
+            readLoopRef.current = runReadLoop(requested, token, controller);
+            void refreshSignals();
+        }
+        catch (cause) {
+            if (tokenRef.current !== token)
+                return;
+            const failure = toError(cause);
+            setError(failure);
+            setStatus('error');
+            append({ direction: 'error', data: failure.message });
+        }
+    }, [append, clearPort, refreshSignals, runReadLoop, teardown]);
+    const disconnect = useCallback(async () => {
+        tokenRef.current++;
+        try {
+            await teardown();
+            setStatus('idle');
+            setError(null);
+        }
+        catch (cause) {
+            const failure = toError(cause);
+            setError(failure);
+            setStatus('error');
+            append({ direction: 'error', data: failure.message });
+        }
+    }, [append, teardown]);
+    const forget = useCallback(async () => {
+        tokenRef.current++;
+        try {
+            await teardown(true);
+            setStatus('idle');
+            setError(null);
+            append({ direction: 'info', data: 'Serial permission forgotten' });
+        }
+        catch (cause) {
+            const failure = toError(cause);
+            setError(failure);
+            setStatus('error');
+            append({ direction: 'error', data: failure.message });
+        }
+    }, [append, teardown]);
+    const send = useCallback(async (data) => {
+        const active = portRef.current;
+        if (!active)
+            return;
+        const bytes = typeof data === 'string' ? new TextEncoder().encode(`${data}\n`) : data;
+        try {
+            await writeMoldableSerialPort(active, bytes);
+            setTxBytes((count) => count + bytes.byteLength);
+            append({
+                direction: 'out',
+                data: typeof data === 'string' ? data : formatHexBytes(data),
+            });
+        }
+        catch (cause) {
+            const failure = toError(cause);
+            setError(failure);
+            append({ direction: 'error', data: failure.message });
+        }
+    }, [append]);
+    const setSignals = useCallback(async (next) => {
+        const active = portRef.current;
+        if (!active)
+            return;
+        try {
+            await setMoldableSerialSignals(active, next);
+            signalsRef.current = {
+                dataTerminalReady: next.dataTerminalReady ?? signalsRef.current.dataTerminalReady,
+                requestToSend: next.requestToSend ?? signalsRef.current.requestToSend,
+                break: next.break ?? signalsRef.current.break,
+            };
+            setSignalsState(signalsRef.current);
+            void refreshSignals();
+        }
+        catch (cause) {
+            const failure = toError(cause);
+            setError(failure);
+            append({ direction: 'error', data: failure.message });
+        }
+    }, [append, refreshSignals]);
+    useEffect(() => () => {
+        tokenRef.current++;
+        abortRef.current?.abort();
+        abortRef.current = null;
+        const loop = readLoopRef.current;
+        readLoopRef.current = null;
+        const active = portRef.current;
+        if (active) {
+            const registered = disconnectListenerRef.current;
+            if (registered?.port === active) {
+                active.removeEventListener('disconnect', registered.listener);
+                disconnectListenerRef.current = null;
+            }
+            void Promise.resolve(loop)
+                .catch(() => undefined)
+                .then(async () => {
+                if (portOpenRef.current)
+                    await closeMoldableSerialPort(active);
+            })
+                .catch(() => undefined);
+        }
+    }, []);
+    return {
+        status,
+        port,
+        portInfo,
+        error,
+        signals,
+        inputSignals,
+        entries,
+        rxBytes,
+        txBytes,
+        connect,
+        disconnect,
+        forget,
+        send,
+        setSignals,
+        refreshSignals,
+        clearEntries,
+    };
+}
+/**
+ * Serial console panel: baud-rate chooser, connect/disconnect lifecycle,
+ * auto-following RX/TX log, line composer, signal controls, byte counters.
+ */
+function SerialConsole({ className, baudRate = DEFAULT_BAUD_RATE, filters, selectNativePort, onData, ...props }) {
+    const [nativePortChoices, setNativePortChoices] = useState([]);
+    const pendingSelectionRef = useRef(null);
+    const selectPort = useCallback((ports) => {
+        if (selectNativePort)
+            return selectNativePort(ports);
+        return new Promise((resolve, reject) => {
+            pendingSelectionRef.current?.reject(new DOMException('Serial port selection was replaced.', 'AbortError'));
+            pendingSelectionRef.current = { resolve, reject };
+            setNativePortChoices(ports);
+        });
+    }, [selectNativePort]);
+    const serial = useMoldableSerial({
+        baudRate,
+        filters,
+        selectNativePort: selectPort,
+        onData,
+    });
+    const [baud, setBaud] = useState(() => String(baudRate));
+    const [draft, setDraft] = useState('');
+    const rates = BAUD_RATES.includes(baudRate)
+        ? BAUD_RATES
+        : [...BAUD_RATES, baudRate].sort((left, right) => left - right);
+    const connected = serial.status === 'connected';
+    const connecting = serial.status === 'connecting';
+    const retainedPort = serial.port !== null;
+    useEffect(() => () => {
+        pendingSelectionRef.current?.reject(new DOMException('Serial port selection was cancelled.', 'AbortError'));
+        pendingSelectionRef.current = null;
+    }, []);
+    const chooseNativePort = (port) => {
+        pendingSelectionRef.current?.resolve(port);
+        pendingSelectionRef.current = null;
+        setNativePortChoices([]);
+    };
+    const cancelNativePortSelection = () => {
+        pendingSelectionRef.current?.reject(new DOMException('Serial port selection was cancelled.', 'AbortError'));
+        pendingSelectionRef.current = null;
+        setNativePortChoices([]);
+    };
+    const submitLine = (event) => {
+        event.preventDefault();
+        if (!connected)
+            return;
+        void serial.send(draft);
+        setDraft('');
+    };
+    return (_jsxs(HardwarePanel, { "data-slot": "serial-console", "data-status": serial.status, className: className, ...props, children: [_jsxs(HardwarePanelHeader, { children: [_jsx(HardwarePanelIcon, { children: _jsx(Cable, {}) }), _jsx(HardwarePanelTitle, { children: "Serial" }), _jsx(CapabilityBadge, { capability: "serial" }), _jsx(HardwarePanelAction, { children: retainedPort ? (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "serial-console-port", className: "animate-in fade-in text-muted-foreground bg-muted/50 rounded-md border px-2 py-0.5 font-mono text-xs tabular-nums duration-200 motion-reduce:animate-none", children: formatSerialPortLabel(serial.portInfo) }), connected ? _jsx(LiveIndicator, {}) : null, _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void serial.disconnect(), children: [_jsx(Unplug, {}), " ", connected ? 'Disconnect' : 'Retry disconnect'] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Select, { value: baud, onValueChange: setBaud, disabled: connecting, children: [_jsx(SelectTrigger, { size: "sm", "aria-label": "Baud rate", className: "w-28 font-mono text-xs tabular-nums", children: _jsx(SelectValue, { placeholder: "Baud" }) }), _jsx(SelectContent, { children: rates.map((rate) => (_jsx(SelectItem, { value: String(rate), children: rate }, rate))) })] }), _jsxs(Button, { size: "sm", disabled: connecting, onClick: () => void serial.connect({ baudRate: Number(baud) }), children: [connecting ? _jsx(Spinner, {}) : _jsx(Plug, {}), connecting ? 'Connecting…' : 'Connect'] })] })) })] }), _jsxs(HardwarePanelContent, { className: "space-y-3", children: [nativePortChoices.length > 0 ? (_jsxs("div", { "data-slot": "serial-console-port-chooser", className: "bg-muted/30 space-y-2 rounded-lg border p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-xs font-medium", children: "Choose a serial port" }), _jsx(Button, { size: "xs", variant: "ghost", onClick: cancelNativePortSelection, children: "Cancel" })] }), _jsx("div", { className: "grid gap-1.5", children: nativePortChoices.map((choice, index) => (_jsxs(Button, { size: "sm", variant: "outline", className: "justify-start font-mono", onClick: () => chooseNativePort(choice), children: [_jsx(Cable, {}), " ", formatSerialPortLabel(choice.getInfo())] }, `${formatSerialPortLabel(choice.getInfo())}-${index}`))) })] })) : null, serial.error ? (_jsx("p", { className: "text-status-error text-xs", children: serial.error.message })) : null, _jsx(StreamLog, { entries: serial.entries, maxHeight: 260, emptyLabel: connected ? 'Waiting for data' : 'Connect a port to start streaming' }), _jsxs("form", { "data-slot": "serial-console-composer", className: "flex items-center gap-2", onSubmit: submitLine, children: [_jsx(Input, { value: draft, onChange: (event) => setDraft(event.target.value), placeholder: "Send a line\u2026", disabled: !connected, spellCheck: false, autoComplete: "off", className: "h-8 flex-1 font-mono text-xs" }), _jsx(Button, { type: "submit", size: "icon-sm", variant: "outline", disabled: !connected, "aria-label": "Send line", children: _jsx(CornerDownLeft, {}) })] })] }), _jsxs(HardwarePanelFooter, { className: "flex-wrap", children: [_jsxs("label", { "data-slot": "serial-console-signal", className: "flex items-center gap-1.5", children: [_jsx(Switch, { size: "sm", checked: serial.signals.dataTerminalReady, disabled: !connected, onCheckedChange: (checked) => void serial.setSignals({ dataTerminalReady: checked }), "aria-label": "Data terminal ready" }), _jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider", children: "DTR" })] }), _jsxs("label", { "data-slot": "serial-console-signal", className: "flex items-center gap-1.5", children: [_jsx(Switch, { size: "sm", checked: serial.signals.requestToSend, disabled: !connected, onCheckedChange: (checked) => void serial.setSignals({ requestToSend: checked }), "aria-label": "Request to send" }), _jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider", children: "RTS" })] }), _jsxs("label", { "data-slot": "serial-console-signal", className: "flex items-center gap-1.5", children: [_jsx(Switch, { size: "sm", checked: serial.signals.break, disabled: !connected, onCheckedChange: (checked) => void serial.setSignals({ break: checked }), "aria-label": "Break signal" }), _jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider", children: "BRK" })] }), _jsx(Button, { size: "icon-xs", variant: "ghost", disabled: !connected, onClick: () => void serial.refreshSignals(), "aria-label": "Refresh input signals", title: "Refresh input signals", children: _jsx(RefreshCw, {}) }), serial.inputSignals ? (_jsxs("span", { "data-slot": "serial-console-input-signals", className: "font-mono text-[10px] tabular-nums", children: ["CTS ", serial.inputSignals.clearToSend ? '1' : '0', " \u00B7 DCD", ' ', serial.inputSignals.dataCarrierDetect ? '1' : '0', " \u00B7 DSR", ' ', serial.inputSignals.dataSetReady ? '1' : '0', " \u00B7 RI", ' ', serial.inputSignals.ringIndicator ? '1' : '0'] })) : null, retainedPort ? (_jsxs(Button, { size: "xs", variant: "ghost", onClick: () => void serial.forget(), children: [_jsx(ShieldX, {}), " Forget"] })) : null, _jsxs("span", { "data-slot": "serial-console-counters", className: "ml-auto shrink-0 font-mono tabular-nums", children: ["RX ", serial.rxBytes, " \u00B7 TX ", serial.txBytes] })] })] }));
+}
+export { SerialConsole };

package/dist/components/hardware/shortcut-recorder.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { type MoldableGlobalShortcutEvent, type MoldableGlobalShortcutHandler } from '../../lib/native-hardware';
+/**
+ * Splits an Electron-style accelerator ("CommandOrControl+Shift+K") into
+ * display keys for `Kbd` chips — ['⌘', '⇧', 'K'] on macOS, ['Ctrl', 'Shift',
+ * 'K'] elsewhere.
+ */
+export declare function formatShortcutKeys(accelerator: string): string[];
+/**
+ * Registers a global shortcut while `shortcut` is set, unregistering on
+ * change and unmount. The handler is kept in a ref so it can change without
+ * re-registering.
+ */
+export declare function useMoldableGlobalShortcut(shortcut: string | null, handler?: MoldableGlobalShortcutHandler): {
+    registered: boolean;
+    error: Error | null;
+    lastEvent: MoldableGlobalShortcutEvent | null;
+};
+export interface ShortcutRecorderProps extends Omit<React.ComponentProps<'div'>, 'onChange' | 'defaultValue'> {
+    /** Controlled accelerator value; `null` means no shortcut. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (shortcut: string | null) => void;
+    /** Fires when the registered global shortcut is pressed. */
+    onTrigger?: (event: MoldableGlobalShortcutEvent) => void;
+    disabled?: boolean;
+}
+/**
+ * Field-level global shortcut recorder: click to arm, press a modifier combo
+ * to capture it, and the accelerator registers system-wide. Registered chips
+ * pulse when the shortcut fires anywhere in the OS.
+ */
+declare function ShortcutRecorder({ value, defaultValue, onChange, onTrigger, disabled, className, ...props }: ShortcutRecorderProps): import("react/jsx-runtime").JSX.Element;
+export { ShortcutRecorder };
+//# sourceMappingURL=shortcut-recorder.d.ts.map

package/dist/components/hardware/shortcut-recorder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut-recorder.d.ts","sourceRoot":"","sources":["../../../src/components/hardware/shortcut-recorder.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,2BAA2B,EAChC,KAAK,6BAA6B,EAInC,MAAM,2BAA2B,CAAA;AAUlC;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CA2BhE;AA4CD;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,OAAO,CAAC,EAAE,6BAA6B;;;;EA8CxC;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IACtE,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,4DAA4D;IAC5D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAA;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,YAAmB,EACnB,QAAQ,EACR,SAAS,EACT,QAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA+IvB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/hardware/shortcut-recorder.js

@@ -0,0 +1,217 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { isMoldableGlobalShortcut, registerMoldableGlobalShortcut, } from '../../lib/native-hardware';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import { Kbd, KbdGroup } from '../ui/kbd';
+function isApplePlatform() {
+    if (typeof navigator === 'undefined')
+        return false;
+    return /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent);
+}
+/**
+ * Splits an Electron-style accelerator ("CommandOrControl+Shift+K") into
+ * display keys for `Kbd` chips — ['⌘', '⇧', 'K'] on macOS, ['Ctrl', 'Shift',
+ * 'K'] elsewhere.
+ */
+export function formatShortcutKeys(accelerator) {
+    const apple = isApplePlatform();
+    return accelerator
+        .split('+')
+        .filter((part) => part.length > 0)
+        .map((part) => {
+        switch (part.toLowerCase()) {
+            case 'commandorcontrol':
+            case 'cmdorctrl':
+                return apple ? '⌘' : 'Ctrl';
+            case 'command':
+            case 'cmd':
+            case 'meta':
+            case 'super':
+                return apple ? '⌘' : 'Win';
+            case 'control':
+            case 'ctrl':
+                return apple ? '⌃' : 'Ctrl';
+            case 'alt':
+            case 'option':
+                return apple ? '⌥' : 'Alt';
+            case 'shift':
+                return apple ? '⇧' : 'Shift';
+            default:
+                return part.length === 1 ? part.toUpperCase() : part;
+        }
+    });
+}
+const MODIFIER_KEYS = new Set([
+    'Alt',
+    'AltGraph',
+    'CapsLock',
+    'Control',
+    'Dead',
+    'Fn',
+    'FnLock',
+    'Hyper',
+    'Meta',
+    'NumLock',
+    'OS',
+    'ScrollLock',
+    'Shift',
+    'Super',
+    'Symbol',
+    'SymbolLock',
+]);
+function acceleratorKeyFromEvent(event) {
+    if (MODIFIER_KEYS.has(event.key))
+        return null;
+    const code = event.code;
+    if (/^Key[A-Z]$/.test(code))
+        return code.slice(3);
+    if (/^Digit[0-9]$/.test(code))
+        return code.slice(5);
+    if (event.key === ' ')
+        return 'Space';
+    if (event.key.startsWith('Arrow'))
+        return event.key.slice(5);
+    if (/^[A-Za-z0-9]$/.test(event.key))
+        return event.key.toUpperCase();
+    if (/^[A-Za-z0-9]{2,32}$/.test(event.key))
+        return event.key;
+    return null;
+}
+function acceleratorModifiersFromEvent(event) {
+    const apple = isApplePlatform();
+    const modifiers = [];
+    if (apple ? event.metaKey : event.ctrlKey)
+        modifiers.push('CommandOrControl');
+    if (apple && event.ctrlKey)
+        modifiers.push('Control');
+    if (!apple && event.metaKey)
+        modifiers.push('Super');
+    if (event.altKey)
+        modifiers.push('Alt');
+    if (event.shiftKey)
+        modifiers.push('Shift');
+    return modifiers;
+}
+/**
+ * Registers a global shortcut while `shortcut` is set, unregistering on
+ * change and unmount. The handler is kept in a ref so it can change without
+ * re-registering.
+ */
+export function useMoldableGlobalShortcut(shortcut, handler) {
+    const [registered, setRegistered] = useState(false);
+    const [error, setError] = useState(null);
+    const [lastEvent, setLastEvent] = useState(null);
+    const handlerRef = useRef(handler);
+    handlerRef.current = handler;
+    useEffect(() => {
+        setRegistered(false);
+        setError(null);
+        setLastEvent(null);
+        if (!shortcut)
+            return;
+        let live = true;
+        let registration = null;
+        registerMoldableGlobalShortcut(shortcut, (event) => {
+            if (!live)
+                return;
+            setLastEvent(event);
+            handlerRef.current?.(event);
+        })
+            .then((result) => {
+            if (!live) {
+                void result.unregister().catch(() => {
+                    // Host teardown remains the final cleanup boundary.
+                });
+                return;
+            }
+            registration = result;
+            setRegistered(true);
+        })
+            .catch((cause) => {
+            if (!live)
+                return;
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+        });
+        return () => {
+            live = false;
+            if (registration) {
+                void registration.unregister().catch(() => {
+                    // Host teardown remains the final cleanup boundary.
+                });
+            }
+        };
+    }, [shortcut]);
+    return { registered, error, lastEvent };
+}
+/**
+ * Field-level global shortcut recorder: click to arm, press a modifier combo
+ * to capture it, and the accelerator registers system-wide. Registered chips
+ * pulse when the shortcut fires anywhere in the OS.
+ */
+function ShortcutRecorder({ value, defaultValue = null, onChange, onTrigger, disabled = false, className, ...props }) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const shortcut = value !== undefined ? value : internalValue;
+    const [recording, setRecording] = useState(false);
+    const [pulse, setPulse] = useState(false);
+    const pulseTimeoutRef = useRef(null);
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onTriggerRef = useRef(onTrigger);
+    onTriggerRef.current = onTrigger;
+    const commit = useCallback((next) => {
+        if (valueRef.current === undefined)
+            setInternalValue(next);
+        onChangeRef.current?.(next);
+    }, []);
+    const handleShortcutEvent = useCallback((event) => {
+        if (event.state !== 'Pressed')
+            return;
+        setPulse(true);
+        if (pulseTimeoutRef.current !== null) {
+            window.clearTimeout(pulseTimeoutRef.current);
+        }
+        pulseTimeoutRef.current = window.setTimeout(() => setPulse(false), 200);
+        onTriggerRef.current?.(event);
+    }, []);
+    const { registered, error } = useMoldableGlobalShortcut(shortcut, handleShortcutEvent);
+    useEffect(() => () => {
+        if (pulseTimeoutRef.current !== null) {
+            window.clearTimeout(pulseTimeoutRef.current);
+        }
+    }, []);
+    useEffect(() => {
+        if (!recording)
+            return;
+        const handleKeyDown = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.key === 'Escape') {
+                setRecording(false);
+                return;
+            }
+            const key = acceleratorKeyFromEvent(event);
+            const modifiers = acceleratorModifiersFromEvent(event);
+            if (!key || modifiers.length === 0)
+                return;
+            const accelerator = [...modifiers, key].join('+');
+            if (!isMoldableGlobalShortcut(accelerator))
+                return;
+            setRecording(false);
+            commit(accelerator);
+        };
+        window.addEventListener('keydown', handleKeyDown, true);
+        return () => window.removeEventListener('keydown', handleKeyDown, true);
+    }, [recording, commit]);
+    const keys = shortcut ? formatShortcutKeys(shortcut) : [];
+    return (_jsxs("div", { "data-slot": "shortcut-recorder", "data-recording": recording || undefined, "data-registered": registered || undefined, className: cn('w-full min-w-0', className), ...props, children: [_jsxs("div", { className: "relative flex items-center", children: [_jsx("button", { type: "button", disabled: disabled, "aria-label": recording
+                            ? 'Recording shortcut, press keys'
+                            : shortcut
+                                ? `Shortcut ${shortcut}, click to re-record`
+                                : 'Record shortcut', onClick: () => setRecording(true), onBlur: () => setRecording(false), className: cn('border-input dark:bg-input/30 shadow-xs flex h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-transparent px-3 text-left text-sm outline-none transition-[color,box-shadow]', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', recording && 'border-ring ring-ring/50 ring-[3px]', disabled && 'pointer-events-none cursor-not-allowed opacity-50', shortcut && !recording && 'pr-9'), children: recording ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative flex size-1.5 shrink-0", children: [_jsx("span", { className: "bg-destructive absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:animate-none" }), _jsx("span", { className: "bg-destructive relative inline-flex size-1.5 rounded-full" })] }), _jsx("span", { className: "text-muted-foreground", children: "Press keys\u2026" })] })) : keys.length > 0 ? (_jsx(KbdGroup, { "data-state": pulse ? 'triggered' : 'idle', className: "origin-left transition-transform duration-150 data-[state=triggered]:scale-110 motion-reduce:transition-none", children: keys.map((key, index) => (_jsx(Kbd, { children: key }, `${index}-${key}`))) })) : (_jsx("span", { className: "text-muted-foreground", children: "Click to record" })) }), shortcut && !recording ? (_jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": "Clear shortcut", disabled: disabled, className: "absolute right-1.5", onClick: () => commit(null), children: _jsx(X, {}) })) : null] }), error ? (_jsx("p", { "data-slot": "shortcut-recorder-error", className: "text-status-error mt-1.5 text-xs", children: error.message })) : null] }));
+}
+export { ShortcutRecorder };