@moldable-ai/ui 0.2.18 → 0.2.20

package/dist/components/hardware/screen-share-preview.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+export type MoldableScreenShareStatus = 'idle' | 'starting' | 'live' | 'muted' | 'denied' | 'error';
+export interface UseMoldableScreenShareOptions {
+    /** Also capture audio from the shared source when it provides any. */
+    withAudio?: boolean;
+    onStreamChange?: (stream: MediaStream | null) => void;
+}
+/**
+ * Screen-share state machine behind `ScreenSharePreview`. Use directly to
+ * build custom capture UI on the same permission/stream handling. The OS
+ * picker owns source selection, so there is no device enumeration.
+ */
+export declare function useMoldableScreenShare(options?: UseMoldableScreenShareOptions): {
+    status: MoldableScreenShareStatus;
+    stream: MediaStream | null;
+    error: Error | null;
+    start: () => Promise<void>;
+    stop: () => void;
+};
+export interface ScreenSharePreviewProps extends React.ComponentProps<'div'> {
+    /** Also capture audio from the shared source. */
+    withAudio?: boolean;
+    /** Open the source picker on mount. */
+    autoStart?: boolean;
+    /** When set, shows a shutter button and delivers PNG snapshots. */
+    onSnapshot?: (blob: Blob) => void;
+    onStreamChange?: (stream: MediaStream | null) => void;
+}
+/**
+ * Full-bleed live screen-share surface: black media well, hover scrim
+ * controls, permission and error states, optional snapshots. The OS picker
+ * chooses the source, so there is no device select.
+ */
+declare function ScreenSharePreview({ className, withAudio, autoStart, onSnapshot, onStreamChange, ...props }: ScreenSharePreviewProps): import("react/jsx-runtime").JSX.Element;
+export { ScreenSharePreview };
+//# sourceMappingURL=screen-share-preview.d.ts.map

package/dist/components/hardware/screen-share-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen-share-preview.d.ts","sourceRoot":"","sources":["../../../src/components/hardware/screen-share-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,MAAM,MAAM,yBAAyB,GACjC,MAAM,GACN,UAAU,GACV,MAAM,GACN,OAAO,GACP,QAAQ,GACR,OAAO,CAAA;AAEX,MAAM,WAAW,6BAA6B;IAC5C,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CACtD;AAuBD;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,GAAE,6BAAkC;;;;;;EA+G5C;AAED,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC1E,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACjC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CACtD;AAED;;;;GAIG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,UAAU,EACV,cAAc,EACd,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAiLzB;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/hardware/screen-share-preview.js

@@ -0,0 +1,191 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MonitorOff, MonitorUp, RefreshCw, Square } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { NativeHardwareBridgeError, getMoldableDisplayStream, getMoldableMediaPermissionStatus, requestMoldableMediaPermission, stopMoldableMediaStream, } from '../../lib/native-hardware';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import { Spinner } from '../ui/spinner';
+import { LiveIndicator } from './live-indicator';
+function isPermissionDenied(error) {
+    if (error instanceof NativeHardwareBridgeError) {
+        return error.code === 'permission_denied';
+    }
+    return (error instanceof DOMException &&
+        (error.name === 'NotAllowedError' || error.name === 'SecurityError'));
+}
+function assertMediaPermissionGranted(status) {
+    if (status.status !== 'denied' && status.status !== 'restricted')
+        return;
+    throw new NativeHardwareBridgeError({
+        code: 'permission_denied',
+        message: status.detail ?? 'Screen recording access was denied.',
+        retryable: false,
+    });
+}
+/**
+ * Screen-share state machine behind `ScreenSharePreview`. Use directly to
+ * build custom capture UI on the same permission/stream handling. The OS
+ * picker owns source selection, so there is no device enumeration.
+ */
+export function useMoldableScreenShare(options = {}) {
+    const [status, setStatus] = useState('idle');
+    const [stream, setStream] = useState(null);
+    const [error, setError] = useState(null);
+    const streamRef = useRef(null);
+    const tokenRef = useRef(0);
+    const withAudioRef = useRef(options.withAudio);
+    const onStreamChangeRef = useRef(options.onStreamChange);
+    const detachTrackListenersRef = useRef(null);
+    useEffect(() => {
+        withAudioRef.current = options.withAudio;
+        onStreamChangeRef.current = options.onStreamChange;
+    }, [options.onStreamChange, options.withAudio]);
+    const dropStream = useCallback((updateState = true) => {
+        detachTrackListenersRef.current?.();
+        detachTrackListenersRef.current = null;
+        const previousStream = streamRef.current;
+        if (!previousStream)
+            return false;
+        streamRef.current = null;
+        stopMoldableMediaStream(previousStream);
+        if (updateState)
+            setStream(null);
+        onStreamChangeRef.current?.(null);
+        return true;
+    }, []);
+    const stop = useCallback(() => {
+        tokenRef.current++;
+        dropStream();
+        setStatus('idle');
+    }, [dropStream]);
+    const start = useCallback(async () => {
+        const token = ++tokenRef.current;
+        dropStream();
+        setStatus('starting');
+        setError(null);
+        try {
+            // Nudge the native permission first so macOS prompts before the
+            // webview does. Outside Moldable this fails and the browser prompt
+            // covers it on getDisplayMedia.
+            try {
+                const permission = await getMoldableMediaPermissionStatus('screen-recording');
+                assertMediaPermissionGranted(permission);
+                if (permission.status === 'not-determined' && permission.canRequest) {
+                    assertMediaPermissionGranted(await requestMoldableMediaPermission('screen-recording'));
+                }
+            }
+            catch (cause) {
+                if (isPermissionDenied(cause))
+                    throw cause;
+                // Not in Moldable — proceed straight to the picker.
+            }
+            if (tokenRef.current !== token)
+                return;
+            const media = await getMoldableDisplayStream({
+                video: true,
+                audio: withAudioRef.current ?? false,
+            });
+            if (tokenRef.current !== token) {
+                stopMoldableMediaStream(media);
+                return;
+            }
+            // The user can end the share from the OS UI at any time; fold that
+            // back into a clean idle state.
+            const [videoTrack] = media.getVideoTracks();
+            if (videoTrack) {
+                const handleEnded = () => {
+                    if (tokenRef.current !== token)
+                        return;
+                    tokenRef.current++;
+                    dropStream();
+                    setStatus('idle');
+                };
+                const handleMute = () => {
+                    if (tokenRef.current === token)
+                        setStatus('muted');
+                };
+                const handleUnmute = () => {
+                    if (tokenRef.current === token)
+                        setStatus('live');
+                };
+                videoTrack.addEventListener('ended', handleEnded, { once: true });
+                videoTrack.addEventListener('mute', handleMute);
+                videoTrack.addEventListener('unmute', handleUnmute);
+                detachTrackListenersRef.current = () => {
+                    videoTrack.removeEventListener('ended', handleEnded);
+                    videoTrack.removeEventListener('mute', handleMute);
+                    videoTrack.removeEventListener('unmute', handleUnmute);
+                };
+            }
+            streamRef.current = media;
+            setStream(media);
+            setStatus('live');
+            onStreamChangeRef.current?.(media);
+        }
+        catch (cause) {
+            if (tokenRef.current !== token)
+                return;
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            setStatus(isPermissionDenied(cause) ? 'denied' : 'error');
+        }
+    }, [dropStream]);
+    useEffect(() => () => {
+        tokenRef.current++;
+        dropStream(false);
+    }, [dropStream]);
+    return { status, stream, error, start, stop };
+}
+/**
+ * Full-bleed live screen-share surface: black media well, hover scrim
+ * controls, permission and error states, optional snapshots. The OS picker
+ * chooses the source, so there is no device select.
+ */
+function ScreenSharePreview({ className, withAudio = false, autoStart = false, onSnapshot, onStreamChange, ...props }) {
+    const share = useMoldableScreenShare({ withAudio, onStreamChange });
+    const videoRef = useRef(null);
+    const [flash, setFlash] = useState(false);
+    const autoStartedRef = useRef(false);
+    useEffect(() => {
+        if (autoStart && !autoStartedRef.current) {
+            autoStartedRef.current = true;
+            void share.start();
+        }
+    }, [autoStart, share]);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.srcObject = share.stream;
+        if (share.stream) {
+            void video.play().catch(() => {
+                // Autoplay rejections resolve once the stream attaches.
+            });
+        }
+    }, [share.stream]);
+    const capture = () => {
+        const video = videoRef.current;
+        if (!video || !onSnapshot || video.videoWidth === 0)
+            return;
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const context = canvas.getContext('2d');
+        if (!context)
+            return;
+        context.drawImage(video, 0, 0);
+        setFlash(true);
+        window.setTimeout(() => setFlash(false), 160);
+        canvas.toBlob((blob) => {
+            if (blob)
+                onSnapshot(blob);
+        }, 'image/png');
+    };
+    const active = share.status === 'live' || share.status === 'muted';
+    const videoTrack = active ? share.stream?.getVideoTracks()[0] : undefined;
+    const settings = videoTrack?.getSettings();
+    const sourceLabel = videoTrack?.label;
+    return (_jsxs("div", { "data-slot": "screen-share-preview", "data-status": share.status, className: cn('group relative isolate aspect-video w-full overflow-hidden rounded-xl border', active ? 'bg-black' : 'bg-muted/30', className), ...props, children: [_jsx("video", { ref: videoRef, muted: true, playsInline: true, className: cn('absolute inset-0 size-full object-contain', !active && 'invisible') }), _jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-30 bg-white transition-opacity duration-150", style: { opacity: flash ? 0.9 : 0 } }), active ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute left-3 top-3 z-20", children: _jsx(LiveIndicator, { variant: "rec", label: share.status === 'muted' ? 'Paused' : 'Sharing' }) }), _jsxs("div", { className: "absolute right-3 top-3 z-20 flex max-w-[70%] items-center gap-1.5", children: [sourceLabel ? (_jsx("div", { className: "truncate rounded-full border border-white/15 bg-black/60 px-2 py-0.5 font-mono text-[10px] text-white/90 backdrop-blur-sm", children: sourceLabel })) : null, settings?.width && settings.height ? (_jsxs("div", { className: "shrink-0 rounded-full border border-white/15 bg-black/60 px-2 py-0.5 font-mono text-[10px] tabular-nums text-white/90 backdrop-blur-sm", children: [settings.width, "\u00D7", settings.height] })) : null] }), _jsxs("div", { className: "absolute inset-x-0 bottom-0 z-20 flex items-end justify-end gap-2 bg-gradient-to-t from-black/70 via-black/25 to-transparent p-3 pt-10 opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100", children: [onSnapshot ? (_jsx("button", { type: "button", onClick: capture, "aria-label": "Take snapshot", className: "size-9 rounded-full border-2 border-white/40 bg-white shadow-md transition-transform duration-150 hover:scale-105 active:scale-95 motion-reduce:transition-none" })) : null, _jsx(Button, { variant: "secondary", size: "icon-sm", "aria-label": "Stop sharing", onClick: share.stop, className: "border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/20", children: _jsx(Square, { className: "fill-current" }) })] })] })) : (_jsx("div", { className: "animate-in fade-in absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 p-6 text-center duration-300 motion-reduce:animate-none", children: share.status === 'starting' ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { className: "text-muted-foreground" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Waiting for the source picker\u2026" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground bg-background shadow-xs flex size-10 items-center justify-center rounded-lg border [&_svg]:size-5", children: share.status === 'idle' ? _jsx(MonitorUp, {}) : _jsx(MonitorOff, {}) }), share.status === 'idle' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing is being shared" }), _jsxs(Button, { size: "sm", onClick: () => void share.start(), children: [_jsx(MonitorUp, {}), " Share screen"] })] })) : share.status === 'denied' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Screen recording access denied" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: "Enable screen recording for Moldable in System Settings, then try again." }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void share.start(), children: [_jsx(RefreshCw, {}), " Try again"] })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Screen share unavailable" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: share.error?.message ??
+                                        'The screen share could not be started.' }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void share.start(), children: [_jsx(RefreshCw, {}), " Try again"] })] }))] })) }))] }));
+}
+export { ScreenSharePreview };

package/dist/components/hardware/secure-storage-panel.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { type MoldableSecureStorageDiagnostics, type MoldableSecureStorageEntryMetadata } from '../../lib/native-hardware';
+export type MoldableSecureStorageStatus = 'loading' | 'ready' | 'error';
+export interface MoldableSecureEntryValidation {
+    valid: boolean;
+    /** Human-readable reason when invalid; `null` for empty keys and valid entries. */
+    message: string | null;
+}
+/**
+ * Client-side mirror of the library's secure-storage constraints. Returns a
+ * result instead of throwing so composers can render inline hints.
+ */
+export declare function validateMoldableSecureEntry(key: string, value?: string): MoldableSecureEntryValidation;
+/**
+ * Secure-storage state machine behind `SecureStoragePanel`: entry metadata,
+ * backend diagnostics, and set/get/remove flows. Values are only fetched on
+ * explicit `get` calls.
+ */
+export declare function useMoldableSecureStorage(): {
+    keys: MoldableSecureStorageEntryMetadata[];
+    diagnostics: MoldableSecureStorageDiagnostics | null;
+    status: MoldableSecureStorageStatus;
+    error: Error | null;
+    refresh: () => Promise<void>;
+    set: (key: string, value: string) => Promise<boolean>;
+    get: (key: string) => Promise<string | null>;
+    remove: (key: string) => Promise<boolean>;
+    validate: typeof validateMoldableSecureEntry;
+};
+/**
+ * OS keychain panel: store key/value secrets, list entry metadata, reveal
+ * values explicitly, and delete entries. Values never render until revealed.
+ */
+declare function SecureStoragePanel({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { SecureStoragePanel };
+//# sourceMappingURL=secure-storage-panel.d.ts.map

package/dist/components/hardware/secure-storage-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"secure-storage-panel.d.ts","sourceRoot":"","sources":["../../../src/components/hardware/secure-storage-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,gCAAgC,EACrC,KAAK,kCAAkC,EAQxC,MAAM,2BAA2B,CAAA;AAiBlC,MAAM,MAAM,2BAA2B,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;AAIvE,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,OAAO,CAAA;IACd,mFAAmF;IACnF,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,GAAG,EAAE,MAAM,EACX,KAAK,SAAK,GACT,6BAA6B,CAwB/B;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB;;;;;;eAqCxB,MAAM,SAAS,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;eAgBlB,MAAM,KAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;kBAcrD,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;;EA2BxC;AAWD;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CA0K7B;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/hardware/secure-storage-panel.js

@@ -0,0 +1,193 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Eye, EyeOff, KeyRound, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { SECURE_STORAGE_MAX_KEY_LENGTH, SECURE_STORAGE_MAX_VALUE_BYTES, deleteMoldableSecureValue, getMoldableSecureStorageDiagnostics, getMoldableSecureValue, listMoldableSecureValues, setMoldableSecureValue, } from '../../lib/native-hardware';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Skeleton } from '../ui/skeleton';
+import { Spinner } from '../ui/spinner';
+import { CapabilityBadge } from './capability-badge';
+import { DeviceList, DeviceListEmpty, DeviceListItem } from './device-list';
+import { HardwarePanel, HardwarePanelAction, HardwarePanelContent, HardwarePanelHeader, HardwarePanelIcon, HardwarePanelTitle, } from './hardware-panel';
+const SECURE_STORAGE_KEY_PATTERN = /^[A-Za-z0-9._-]+$/;
+/**
+ * Client-side mirror of the library's secure-storage constraints. Returns a
+ * result instead of throwing so composers can render inline hints.
+ */
+export function validateMoldableSecureEntry(key, value = '') {
+    if (key.length === 0)
+        return { valid: false, message: null };
+    if (key.length > SECURE_STORAGE_MAX_KEY_LENGTH) {
+        return {
+            valid: false,
+            message: `Keys are limited to ${SECURE_STORAGE_MAX_KEY_LENGTH} characters.`,
+        };
+    }
+    if (!SECURE_STORAGE_KEY_PATTERN.test(key)) {
+        return {
+            valid: false,
+            message: 'Keys may only contain letters, numbers, dots, underscores, and hyphens.',
+        };
+    }
+    if (new TextEncoder().encode(value).byteLength > SECURE_STORAGE_MAX_VALUE_BYTES) {
+        return {
+            valid: false,
+            message: `Values are limited to ${SECURE_STORAGE_MAX_VALUE_BYTES} UTF-8 bytes.`,
+        };
+    }
+    return { valid: true, message: null };
+}
+/**
+ * Secure-storage state machine behind `SecureStoragePanel`: entry metadata,
+ * backend diagnostics, and set/get/remove flows. Values are only fetched on
+ * explicit `get` calls.
+ */
+export function useMoldableSecureStorage() {
+    const [keys, setKeys] = useState([]);
+    const [diagnostics, setDiagnostics] = useState(null);
+    const [status, setStatus] = useState('loading');
+    const [error, setError] = useState(null);
+    const generationRef = useRef(0);
+    const refresh = useCallback(async () => {
+        const generation = ++generationRef.current;
+        setError(null);
+        setStatus((previous) => (previous === 'ready' ? previous : 'loading'));
+        try {
+            const [list, currentDiagnostics] = await Promise.all([
+                listMoldableSecureValues(),
+                getMoldableSecureStorageDiagnostics(),
+            ]);
+            if (generationRef.current !== generation)
+                return;
+            setKeys(list.entries);
+            setDiagnostics(currentDiagnostics);
+            setStatus('ready');
+        }
+        catch (cause) {
+            if (generationRef.current !== generation)
+                return;
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            setStatus('error');
+        }
+    }, []);
+    useEffect(() => {
+        void refresh();
+        const liveGeneration = generationRef;
+        return () => {
+            liveGeneration.current++;
+        };
+    }, [refresh]);
+    const set = useCallback(async (key, value) => {
+        const generation = generationRef.current;
+        try {
+            await setMoldableSecureValue(key, value);
+        }
+        catch (cause) {
+            if (generationRef.current === generation) {
+                setError(cause instanceof Error ? cause : new Error(String(cause)));
+            }
+            return false;
+        }
+        await refresh();
+        return true;
+    }, [refresh]);
+    const get = useCallback(async (key) => {
+        const generation = generationRef.current;
+        try {
+            const result = await getMoldableSecureValue(key);
+            return result.value;
+        }
+        catch (cause) {
+            if (generationRef.current === generation) {
+                setError(cause instanceof Error ? cause : new Error(String(cause)));
+            }
+            return null;
+        }
+    }, []);
+    const remove = useCallback(async (key) => {
+        const generation = generationRef.current;
+        try {
+            await deleteMoldableSecureValue(key);
+        }
+        catch (cause) {
+            if (generationRef.current === generation) {
+                setError(cause instanceof Error ? cause : new Error(String(cause)));
+            }
+            return false;
+        }
+        await refresh();
+        return true;
+    }, [refresh]);
+    return {
+        keys,
+        diagnostics,
+        status,
+        error,
+        refresh,
+        set,
+        get,
+        remove,
+        validate: validateMoldableSecureEntry,
+    };
+}
+function formatEntryTimestamp(ms) {
+    return new Date(ms).toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+/**
+ * OS keychain panel: store key/value secrets, list entry metadata, reveal
+ * values explicitly, and delete entries. Values never render until revealed.
+ */
+function SecureStoragePanel({ className, ...props }) {
+    const storage = useMoldableSecureStorage();
+    const [draftKey, setDraftKey] = useState('');
+    const [draftValue, setDraftValue] = useState('');
+    const [storing, setStoring] = useState(false);
+    const [revealed, setRevealed] = useState({});
+    const [revealingKey, setRevealingKey] = useState(null);
+    const validation = validateMoldableSecureEntry(draftKey, draftValue);
+    const canStore = validation.valid && draftValue.length > 0 && !storing;
+    const store = async () => {
+        setStoring(true);
+        const stored = await storage.set(draftKey, draftValue);
+        setStoring(false);
+        if (stored) {
+            setDraftKey('');
+            setDraftValue('');
+        }
+    };
+    const hide = (key) => {
+        setRevealed((previous) => {
+            const next = { ...previous };
+            delete next[key];
+            return next;
+        });
+    };
+    const reveal = async (key) => {
+        setRevealingKey(key);
+        const value = await storage.get(key);
+        setRevealingKey((current) => (current === key ? null : current));
+        if (value !== null) {
+            setRevealed((previous) => ({ ...previous, [key]: value }));
+        }
+    };
+    const removeEntry = async (key) => {
+        hide(key);
+        await storage.remove(key);
+    };
+    return (_jsxs(HardwarePanel, { "data-slot": "secure-storage-panel", "data-status": storage.status, className: className, ...props, children: [_jsxs(HardwarePanelHeader, { children: [_jsx(HardwarePanelIcon, { children: _jsx(KeyRound, {}) }), _jsx(HardwarePanelTitle, { children: "Secure Storage" }), _jsx(CapabilityBadge, { capability: "secure-storage" }), _jsx(HardwarePanelAction, { children: storage.diagnostics ? (_jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: storage.diagnostics.backend })) : null })] }), _jsxs(HardwarePanelContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: draftKey, placeholder: "key", maxLength: SECURE_STORAGE_MAX_KEY_LENGTH, "aria-label": "Secret key", autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", spellCheck: false, className: "font-mono", onChange: (event) => setDraftKey(event.target.value) }), _jsx(Input, { value: draftValue, type: "password", placeholder: "value", "aria-label": "Secret value", autoComplete: "new-password", onChange: (event) => setDraftValue(event.target.value) }), _jsxs(Button, { disabled: !canStore, onClick: () => void store(), children: [storing ? _jsx(Spinner, {}) : null, "Store"] })] }), validation.message ? (_jsx("p", { className: "text-status-error text-xs", children: validation.message })) : null, storage.error ? (_jsx("p", { className: "text-status-error text-xs", children: storage.error.message })) : null, storage.status === 'loading' && storage.keys.length === 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-12 w-full rounded-lg" }), _jsx(Skeleton, { className: "h-12 w-full rounded-lg" })] })) : storage.keys.length === 0 ? (_jsx(DeviceList, { children: _jsxs(DeviceListEmpty, { icon: _jsx(KeyRound, {}), children: [_jsx("span", { className: "text-sm font-medium", children: "Nothing stored" }), _jsx("span", { className: "text-xs", children: "Values are encrypted by the OS keychain." })] }) })) : (_jsx(DeviceList, { children: storage.keys.map((entry) => {
+                            const revealedValue = revealed[entry.key];
+                            return (_jsx(DeviceListItem, { icon: _jsx(KeyRound, {}), name: _jsx("span", { className: "font-mono text-xs", children: entry.key }), description: revealedValue !== undefined
+                                    ? revealedValue
+                                    : entry.updatedAtMs > entry.createdAtMs
+                                        ? `Updated ${formatEntryTimestamp(entry.updatedAtMs)}`
+                                        : `Created ${formatEntryTimestamp(entry.createdAtMs)}`, action: _jsxs(_Fragment, { children: [revealedValue !== undefined ? (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Hide value for ${entry.key}`, onClick: () => hide(entry.key), children: _jsx(EyeOff, {}) })) : (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Reveal value for ${entry.key}`, disabled: revealingKey === entry.key, onClick: () => void reveal(entry.key), children: revealingKey === entry.key ? _jsx(Spinner, {}) : _jsx(Eye, {}) })), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Delete ${entry.key}`, className: "hover:text-destructive", onClick: () => void removeEntry(entry.key), children: _jsx(Trash2, {}) })] }) }, entry.key));
+                        }) }))] })] }));
+}
+export { SecureStoragePanel };

package/dist/components/hardware/serial-console.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { type MoldableSerialInputSignals, type MoldableSerialOutputSignals, type MoldableSerialPort, type MoldableSerialPortFilter, type MoldableSerialPortInfo, type MoldableSerialRequestOptions } from '../../lib/native-hardware';
+export type MoldableSerialStatus = 'idle' | 'connecting' | 'connected' | 'error';
+export interface UseMoldableSerialOptions {
+    /** Baud rate used when `connect` does not override it. Defaults to 115200. */
+    baudRate?: number;
+    /** Port filters passed to the chooser. */
+    filters?: readonly MoldableSerialPortFilter[];
+    /** Chooses among native fallback ports. Required when multiple ports match. */
+    selectNativePort?: MoldableSerialRequestOptions['selectNativePort'];
+    /** Raw bytes for every received chunk. */
+    onData?: (bytes: Uint8Array) => void;
+    /** Rolling cap for the RX/TX log. Defaults to 500 entries. */
+    maxEntries?: number;
+}
+export interface MoldableSerialConnectOptions {
+    baudRate?: number;
+    filters?: readonly MoldableSerialPortFilter[];
+}
+export interface MoldableSerialSignalsState {
+    dataTerminalReady: boolean;
+    requestToSend: boolean;
+    break: boolean;
+}
+/**
+ * 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 declare function useMoldableSerial(options?: UseMoldableSerialOptions): {
+    status: MoldableSerialStatus;
+    port: MoldableSerialPort | null;
+    portInfo: MoldableSerialPortInfo | null;
+    error: Error | null;
+    signals: MoldableSerialSignalsState;
+    inputSignals: MoldableSerialInputSignals | null;
+    entries: import("./stream-log").StreamLogEntry[];
+    rxBytes: number;
+    txBytes: number;
+    connect: (overrides?: MoldableSerialConnectOptions) => Promise<void>;
+    disconnect: () => Promise<void>;
+    forget: () => Promise<void>;
+    send: (data: string | Uint8Array) => Promise<void>;
+    setSignals: (next: MoldableSerialOutputSignals) => Promise<void>;
+    refreshSignals: () => Promise<void>;
+    clearEntries: () => void;
+};
+export interface SerialConsoleProps extends React.ComponentProps<'div'> {
+    /** Baud rate preselected in the header chooser. Defaults to 115200. */
+    baudRate?: number;
+    /** Port filters passed to the chooser. */
+    filters?: readonly MoldableSerialPortFilter[];
+    /** Overrides the built-in native fallback port chooser. */
+    selectNativePort?: MoldableSerialRequestOptions['selectNativePort'];
+    /** Raw bytes for every received chunk. */
+    onData?: (bytes: Uint8Array) => void;
+}
+/**
+ * Serial console panel: baud-rate chooser, connect/disconnect lifecycle,
+ * auto-following RX/TX log, line composer, signal controls, byte counters.
+ */
+declare function SerialConsole({ className, baudRate, filters, selectNativePort, onData, ...props }: SerialConsoleProps): import("react/jsx-runtime").JSX.Element;
+export { SerialConsole };
+//# sourceMappingURL=serial-console.d.ts.map

package/dist/components/hardware/serial-console.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serial-console.d.ts","sourceRoot":"","sources":["../../../src/components/hardware/serial-console.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,2BAA2B,EAChC,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EASlC,MAAM,2BAA2B,CAAA;AAyBlC,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAA;AA2BhF,MAAM,WAAW,wBAAwB;IACvC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC7C,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,4BAA4B,CAAC,kBAAkB,CAAC,CAAA;IACnE,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAA;CAC9C;AAED,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,EAAE,OAAO,CAAA;IAC1B,aAAa,EAAE,OAAO,CAAA;IACtB,KAAK,EAAE,OAAO,CAAA;CACf;AAQD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,wBAA6B;;;;;;;;;;0BAkHlD,4BAA4B;;;iBA0HjC,MAAM,GAAG,UAAU;uBAsBnB,2BAA2B;;;EAiE3C;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACrE,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC7C,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,4BAA4B,CAAC,kBAAkB,CAAC,CAAA;IACnE,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAA4B,EAC5B,OAAO,EACP,gBAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAsSpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}