@moldable-ai/ui 0.2.18 → 0.2.20

package/dist/components/native-capabilities/camera-preview.js

@@ -0,0 +1,228 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Camera, CameraOff, RefreshCw, Square } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { NativeCapabilityBridgeError, enumerateMoldableMediaDevices, getMoldableCameraStream, getMoldableMediaPermissionStatus, requestMoldableMediaPermission, stopMoldableMediaStream, } from '../../lib/native-capabilities';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/select';
+import { Spinner } from '../ui/spinner';
+import { LiveIndicator } from './live-indicator';
+function isPermissionDenied(error) {
+    if (error instanceof NativeCapabilityBridgeError) {
+        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 NativeCapabilityBridgeError({
+        code: 'permission_denied',
+        message: status.detail ?? 'Camera access was denied.',
+        retryable: false,
+    });
+}
+/**
+ * Camera state machine behind `CameraPreview`. Use directly to build custom
+ * camera UI on the same permission/device/stream handling.
+ */
+export function useMoldableCamera(options = {}) {
+    const [status, setStatus] = useState('idle');
+    const [stream, setStream] = useState(null);
+    const [devices, setDevices] = useState([]);
+    const [deviceId, setDeviceIdState] = useState(null);
+    const [error, setError] = useState(null);
+    const streamRef = useRef(null);
+    const deviceIdRef = useRef(null);
+    const tokenRef = useRef(0);
+    const constraintsRef = useRef(options.constraints);
+    const onStreamChangeRef = useRef(options.onStreamChange);
+    const detachTrackListenersRef = useRef(null);
+    useEffect(() => {
+        constraintsRef.current = options.constraints;
+        onStreamChangeRef.current = options.onStreamChange;
+    }, [options.constraints, options.onStreamChange]);
+    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 refreshDevices = useCallback(async () => {
+        try {
+            const all = await enumerateMoldableMediaDevices();
+            setDevices(all.filter((device) => device.kind === 'videoinput'));
+        }
+        catch {
+            // Device labels are best-effort; enumeration can fail outside Moldable.
+        }
+    }, []);
+    const start = useCallback(async (nextDeviceId) => {
+        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 getUserMedia.
+            try {
+                const permission = await getMoldableMediaPermissionStatus('camera');
+                assertMediaPermissionGranted(permission);
+                if (permission.status === 'not-determined' && permission.canRequest) {
+                    assertMediaPermissionGranted(await requestMoldableMediaPermission('camera'));
+                }
+            }
+            catch (cause) {
+                if (isPermissionDenied(cause))
+                    throw cause;
+                // Not in Moldable — proceed straight to the stream request.
+            }
+            if (tokenRef.current !== token)
+                return;
+            const target = nextDeviceId ?? deviceIdRef.current;
+            const media = await getMoldableCameraStream({
+                width: { ideal: 1920 },
+                height: { ideal: 1080 },
+                ...constraintsRef.current,
+                ...(target ? { deviceId: { exact: target } } : {}),
+            });
+            if (tokenRef.current !== token) {
+                stopMoldableMediaStream(media);
+                return;
+            }
+            streamRef.current = media;
+            const [track] = media.getVideoTracks();
+            if (track) {
+                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');
+                };
+                track.addEventListener('ended', handleEnded, { once: true });
+                track.addEventListener('mute', handleMute);
+                track.addEventListener('unmute', handleUnmute);
+                detachTrackListenersRef.current = () => {
+                    track.removeEventListener('ended', handleEnded);
+                    track.removeEventListener('mute', handleMute);
+                    track.removeEventListener('unmute', handleUnmute);
+                };
+            }
+            setStream(media);
+            if (nextDeviceId !== undefined) {
+                deviceIdRef.current = nextDeviceId;
+                setDeviceIdState(nextDeviceId);
+            }
+            setStatus('live');
+            onStreamChangeRef.current?.(media);
+            void refreshDevices();
+        }
+        catch (cause) {
+            if (tokenRef.current !== token)
+                return;
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            setStatus(isPermissionDenied(cause) ? 'denied' : 'error');
+        }
+    }, [dropStream, refreshDevices]);
+    const selectDevice = useCallback((id) => {
+        deviceIdRef.current = id;
+        setDeviceIdState(id);
+        if (streamRef.current)
+            void start(id);
+    }, [start]);
+    useEffect(() => () => {
+        tokenRef.current++;
+        dropStream(false);
+    }, [dropStream]);
+    return {
+        status,
+        stream,
+        devices,
+        deviceId,
+        error,
+        start,
+        stop,
+        selectDevice,
+        refreshDevices,
+    };
+}
+/**
+ * Full-bleed live camera surface: black media well, hover scrim controls,
+ * device switching, permission and error states, optional snapshots.
+ */
+function CameraPreview({ className, constraints, mirrored = true, autoStart = false, onSnapshot, onStreamChange, ...props }) {
+    const camera = useMoldableCamera({ constraints, onStreamChange });
+    const videoRef = useRef(null);
+    const [flash, setFlash] = useState(false);
+    const autoStartedRef = useRef(false);
+    useEffect(() => {
+        if (autoStart && !autoStartedRef.current) {
+            autoStartedRef.current = true;
+            void camera.start();
+        }
+    }, [autoStart, camera]);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.srcObject = camera.stream;
+        if (camera.stream) {
+            void video.play().catch(() => {
+                // Autoplay rejections resolve once the stream attaches.
+            });
+        }
+    }, [camera.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;
+        if (mirrored) {
+            context.translate(canvas.width, 0);
+            context.scale(-1, 1);
+        }
+        context.drawImage(video, 0, 0);
+        setFlash(true);
+        window.setTimeout(() => setFlash(false), 160);
+        canvas.toBlob((blob) => {
+            if (blob)
+                onSnapshot(blob);
+        }, 'image/png');
+    };
+    const active = camera.status === 'live' || camera.status === 'muted';
+    const settings = active
+        ? camera.stream?.getVideoTracks()[0]?.getSettings()
+        : undefined;
+    return (_jsxs("div", { "data-slot": "camera-preview", "data-status": camera.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-cover', mirrored && '-scale-x-100', !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: camera.status === 'muted' ? 'Paused' : 'Live' }) }), settings?.width && settings.height ? (_jsxs("div", { className: "absolute right-3 top-3 z-20 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-between gap-3 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: [_jsx("div", { className: "min-w-0", children: camera.devices.length > 1 ? (_jsxs(Select, { value: camera.deviceId ?? undefined, onValueChange: camera.selectDevice, children: [_jsx(SelectTrigger, { size: "sm", className: "h-7 w-auto max-w-56 border-white/15 bg-white/10 text-xs text-white backdrop-blur-md hover:bg-white/15 [&_svg]:text-white/70", children: _jsx(SelectValue, { placeholder: "Camera" }) }), _jsx(SelectContent, { children: camera.devices.map((device, index) => (_jsx(SelectItem, { value: device.deviceId, children: device.label || `Camera ${index + 1}` }, device.deviceId))) })] })) : null }), _jsxs("div", { className: "flex items-center gap-2", 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 camera", onClick: camera.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: camera.status === 'starting' ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { className: "text-muted-foreground" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Starting camera\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: camera.status === 'idle' ? _jsx(Camera, {}) : _jsx(CameraOff, {}) }), camera.status === 'idle' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: "Camera is off" }), _jsxs(Button, { size: "sm", onClick: () => void camera.start(), children: [_jsx(Camera, {}), " Start camera"] })] })) : camera.status === 'denied' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Camera access denied" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: "Enable camera access for Moldable in System Settings, then try again." }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void camera.start(), children: [_jsx(RefreshCw, {}), " Try again"] })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Camera unavailable" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: camera.error?.message ??
+                                        'The camera could not be started.' }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void camera.start(), children: [_jsx(RefreshCw, {}), " Try again"] })] }))] })) }))] }));
+}
+export { CameraPreview };

package/dist/components/native-capabilities/capability-badge.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { NativeCapabilityId } from '../../lib/native-capabilities';
+import { type MoldableCapabilityStatus } from './use-capability';
+declare function CapabilityDot({ status, className, ...props }: React.ComponentProps<'span'> & {
+    status: MoldableCapabilityStatus;
+}): import("react/jsx-runtime").JSX.Element;
+interface CapabilityBadgeBaseProps extends React.ComponentProps<'span'> {
+    /** Override the automatic status label. */
+    label?: React.ReactNode;
+}
+export interface CapabilityBadgeProps extends CapabilityBadgeBaseProps {
+    /** Self-manage: fetch the manifest and show this capability's support. */
+    capability?: NativeCapabilityId;
+    /** Controlled: render a specific status directly. */
+    status?: MoldableCapabilityStatus;
+}
+/**
+ * Support-status pill. Pass `capability` to let it fetch the manifest itself,
+ * or `status` to control it.
+ */
+declare function CapabilityBadge({ capability, status, ...props }: CapabilityBadgeProps): import("react/jsx-runtime").JSX.Element;
+export { CapabilityBadge, CapabilityDot };
+//# sourceMappingURL=capability-badge.d.ts.map

package/dist/components/native-capabilities/capability-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"capability-badge.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/capability-badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAEvE,OAAO,EACL,KAAK,wBAAwB,EAE9B,MAAM,kBAAkB,CAAA;AAkBzB,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAAE,MAAM,EAAE,wBAAwB,CAAA;CAAE,2CAcrE;AAED,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IACrE,2CAA2C;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAgCD,MAAM,WAAW,oBAAqB,SAAQ,wBAAwB;IACpE,0EAA0E;IAC1E,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAC/B,qDAAqD;IACrD,MAAM,CAAC,EAAE,wBAAwB,CAAA;CAClC;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,MAAM,EACN,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAKtB;AAED,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/native-capabilities/capability-badge.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { useMoldableCapability, } from './use-capability';
+const STATUS_LABEL = {
+    checking: 'Checking',
+    supported: 'Supported',
+    partial: 'Partial',
+    unsupported: 'Unsupported',
+    unavailable: 'Unavailable',
+};
+const STATUS_DOT = {
+    checking: 'bg-muted-foreground/40 animate-pulse motion-reduce:animate-none',
+    supported: 'bg-status-running',
+    partial: 'bg-status-pending',
+    unsupported: 'bg-status-error',
+    unavailable: 'bg-status-stopped',
+};
+function CapabilityDot({ status, className, ...props }) {
+    return (_jsx("span", { "data-slot": "capability-dot", "data-status": status, "aria-hidden": true, className: cn('size-1.5 shrink-0 rounded-full', STATUS_DOT[status], className), ...props }));
+}
+function CapabilityBadgeBase({ status, label, className, ...props }) {
+    return (_jsxs("span", { "data-slot": "capability-badge", "data-status": status, className: cn('text-muted-foreground inline-flex w-fit shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] font-medium', className), ...props, children: [_jsx(CapabilityDot, { status: status }), label ?? STATUS_LABEL[status]] }));
+}
+function ManagedCapabilityBadge({ capability, ...props }) {
+    const { status } = useMoldableCapability(capability);
+    return _jsx(CapabilityBadgeBase, { status: status, ...props });
+}
+/**
+ * Support-status pill. Pass `capability` to let it fetch the manifest itself,
+ * or `status` to control it.
+ */
+function CapabilityBadge({ capability, status, ...props }) {
+    if (capability && status === undefined) {
+        return _jsx(ManagedCapabilityBadge, { capability: capability, ...props });
+    }
+    return _jsx(CapabilityBadgeBase, { status: status ?? 'checking', ...props });
+}
+export { CapabilityBadge, CapabilityDot };

package/dist/components/native-capabilities/capability-matrix.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type NativeCapabilityId } from '../../lib/native-capabilities';
+export interface CapabilityMatrixProps extends React.ComponentProps<'div'> {
+    /** Subset of capabilities to show; defaults to every known capability. */
+    capabilities?: NativeCapabilityId[];
+}
+/**
+ * Responsive support grid for every native capability: icon, humanized name,
+ * status dot, support level, and transport. Renders skeleton cells while the
+ * manifest loads and a quiet note when it is unavailable outside Moldable.
+ */
+declare function CapabilityMatrix({ capabilities, className, ...props }: CapabilityMatrixProps): import("react/jsx-runtime").JSX.Element;
+export { CapabilityMatrix };
+//# sourceMappingURL=capability-matrix.d.ts.map

package/dist/components/native-capabilities/capability-matrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"capability-matrix.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/capability-matrix.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,+BAA+B,CAAA;AAyDtC,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACxE,0EAA0E;IAC1E,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAA;CACpC;AAED;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,EACxB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAiGvB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/native-capabilities/capability-matrix.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Activity, BatteryCharging, Bell, Bluetooth, Cable, Camera, Clipboard, ClipboardCopy, Fingerprint, Gamepad2, KeyRound, Keyboard, MapPin, Mic, Monitor, MonitorUp, Moon, Music, Timer, Usb, Vibrate, Volume2, } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { NATIVE_CAPABILITY_IDS, } from '../../lib/native-capabilities';
+import { cn } from '../../lib/utils';
+import { Skeleton } from '../ui/skeleton';
+import { CapabilityDot } from './capability-badge';
+import { loadMoldableCapabilities, } from './use-capability';
+const CAPABILITY_ICON = {
+    camera: Camera,
+    microphone: Mic,
+    'screen-capture': MonitorUp,
+    'system-audio': Volume2,
+    location: MapPin,
+    'clipboard-read': Clipboard,
+    'clipboard-write': ClipboardCopy,
+    notifications: Bell,
+    displays: Monitor,
+    'global-shortcuts': Keyboard,
+    'power-monitor': BatteryCharging,
+    'idle-state': Timer,
+    'session-events': Activity,
+    'sleep-blocker': Moon,
+    'local-authentication': Fingerprint,
+    haptics: Vibrate,
+    'secure-storage': KeyRound,
+    usb: Usb,
+    hid: Gamepad2,
+    serial: Cable,
+    midi: Music,
+    bluetooth: Bluetooth,
+};
+const SPECIAL_NAME = {
+    usb: 'USB',
+    hid: 'HID',
+    midi: 'MIDI',
+};
+const SUPPORT_LABEL = {
+    checking: 'Checking',
+    supported: 'Supported',
+    partial: 'Partial',
+    unsupported: 'Unsupported',
+    unavailable: 'Unavailable',
+};
+function humanizeCapabilityId(id) {
+    const special = SPECIAL_NAME[id];
+    if (special)
+        return special;
+    return id
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+/**
+ * Responsive support grid for every native capability: icon, humanized name,
+ * status dot, support level, and transport. Renders skeleton cells while the
+ * manifest loads and a quiet note when it is unavailable outside Moldable.
+ */
+function CapabilityMatrix({ capabilities, className, ...props }) {
+    const [manifest, setManifest] = useState(null);
+    const [checking, setChecking] = useState(true);
+    const generationRef = useRef(0);
+    useEffect(() => {
+        const generation = ++generationRef.current;
+        loadMoldableCapabilities()
+            .then((value) => {
+            if (generationRef.current !== generation)
+                return;
+            setManifest(value);
+            setChecking(false);
+        })
+            .catch(() => {
+            if (generationRef.current !== generation)
+                return;
+            setManifest(null);
+            setChecking(false);
+        });
+        const liveGeneration = generationRef;
+        return () => {
+            liveGeneration.current++;
+        };
+    }, []);
+    const ids = capabilities ?? NATIVE_CAPABILITY_IDS;
+    const unavailable = !checking && manifest === null;
+    return (_jsxs("div", { "data-slot": "capability-matrix", "data-status": checking ? 'checking' : unavailable ? 'unavailable' : 'ready', className: cn('grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4', className), ...props, children: [ids.map((id, index) => {
+                const Icon = CAPABILITY_ICON[id];
+                const descriptor = manifest?.capabilities[id] ?? null;
+                const status = checking
+                    ? 'checking'
+                    : descriptor
+                        ? descriptor.support
+                        : 'unavailable';
+                return (_jsx("div", { "data-slot": "capability-matrix-cell", "data-capability": id, "data-status": status, className: "animate-in fade-in slide-in-from-bottom-1 bg-card rounded-lg border p-3 duration-300 [animation-fill-mode:backwards] motion-reduce:animate-none", style: { animationDelay: `${index * 25}ms` }, children: checking ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-3.5 w-2/3" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Icon, { className: "text-muted-foreground size-3.5 shrink-0" }), _jsx("span", { className: "truncate text-xs font-medium", children: humanizeCapabilityId(id) }), _jsx(CapabilityDot, { status: status, className: "ml-auto" })] }), _jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-[10px]", children: SUPPORT_LABEL[status] }), descriptor ? (_jsx("span", { className: "text-muted-foreground/70 truncate font-mono text-[10px]", children: descriptor.transport.name })) : null] })] })) }, id));
+            }), unavailable ? (_jsx("p", { "data-slot": "capability-matrix-note", className: "text-muted-foreground/70 col-span-full text-center text-xs", children: "Native capabilities require the Moldable desktop app." })) : null] }));
+}
+export { CapabilityMatrix };

package/dist/components/native-capabilities/clipboard-button.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Button } from '../ui/button';
+/**
+ * Clipboard state machine behind `ClipboardCopyButton`. The shared helpers
+ * enforce app access when embedded and use the plain web Clipboard API only
+ * outside Moldable.
+ */
+export declare function useMoldableClipboard(): {
+    writeText: (text: string) => Promise<boolean>;
+    readText: () => Promise<string | null>;
+    lastRead: string | null;
+    error: Error | null;
+};
+export interface ClipboardCopyButtonProps extends Omit<React.ComponentProps<typeof Button>, 'value'> {
+    /** Text to copy, or a resolver invoked at click time. */
+    value: string | (() => string | Promise<string>);
+    onCopied?: (text: string) => void;
+    onCopyError?: (error: Error) => void;
+}
+/**
+ * Copy-to-clipboard button: resolves `value`, writes it, and morphs the copy
+ * icon into a success check for a moment.
+ */
+declare function ClipboardCopyButton({ value, onCopied, onCopyError, variant, size, onClick, children, ...props }: ClipboardCopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export { ClipboardCopyButton };
+//# sourceMappingURL=clipboard-button.d.ts.map

package/dist/components/native-capabilities/clipboard-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-button.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/clipboard-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC;;;;GAIG;AACH,wBAAgB,oBAAoB;sBAIS,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;oBAe7B,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;;;EAmB9D;AAED,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1D,yDAAyD;IACzD,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAA;IAChD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAED;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAiB,EACjB,IAAgB,EAChB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAqE1B;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/native-capabilities/clipboard-button.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { readMoldableClipboardText, writeMoldableClipboardText, } from '../../lib/native-capabilities';
+import { Button } from '../ui/button';
+/**
+ * Clipboard state machine behind `ClipboardCopyButton`. The shared helpers
+ * enforce app access when embedded and use the plain web Clipboard API only
+ * outside Moldable.
+ */
+export function useMoldableClipboard() {
+    const [lastRead, setLastRead] = useState(null);
+    const [error, setError] = useState(null);
+    const writeText = useCallback(async (text) => {
+        setError(null);
+        try {
+            await writeMoldableClipboardText(text);
+            return true;
+        }
+        catch (cause) {
+            setError(cause instanceof Error
+                ? cause
+                : new Error('Could not write clipboard text.'));
+            return false;
+        }
+    }, []);
+    const readText = useCallback(async () => {
+        setError(null);
+        let text;
+        try {
+            text = await readMoldableClipboardText();
+        }
+        catch (cause) {
+            setLastRead(null);
+            setError(cause instanceof Error
+                ? cause
+                : new Error('Could not read clipboard text.'));
+            return null;
+        }
+        setLastRead(text);
+        return text;
+    }, []);
+    return { writeText, readText, lastRead, error };
+}
+/**
+ * Copy-to-clipboard button: resolves `value`, writes it, and morphs the copy
+ * icon into a success check for a moment.
+ */
+function ClipboardCopyButton({ value, onCopied, onCopyError, variant = 'ghost', size = 'icon-sm', onClick, children, ...props }) {
+    const { writeText } = useMoldableClipboard();
+    const [copied, setCopied] = useState(false);
+    const [copyFailed, setCopyFailed] = useState(false);
+    const tokenRef = useRef(0);
+    const timeoutRef = useRef(null);
+    useEffect(() => () => {
+        tokenRef.current++;
+        if (timeoutRef.current !== null)
+            window.clearTimeout(timeoutRef.current);
+    }, []);
+    const copy = useCallback(async () => {
+        const token = ++tokenRef.current;
+        setCopied(false);
+        setCopyFailed(false);
+        let text;
+        try {
+            const source = value;
+            text = typeof source === 'function' ? await source() : source;
+        }
+        catch (cause) {
+            if (tokenRef.current !== token)
+                return;
+            const error = cause instanceof Error ? cause : new Error('Could not resolve text.');
+            setCopyFailed(true);
+            onCopyError?.(error);
+            return;
+        }
+        const written = await writeText(text);
+        if (tokenRef.current !== token)
+            return;
+        if (!written) {
+            const error = new Error('Could not write clipboard text.');
+            setCopyFailed(true);
+            onCopyError?.(error);
+            return;
+        }
+        onCopied?.(text);
+        setCopied(true);
+        if (timeoutRef.current !== null)
+            window.clearTimeout(timeoutRef.current);
+        timeoutRef.current = window.setTimeout(() => setCopied(false), 1500);
+    }, [onCopied, onCopyError, value, writeText]);
+    return (_jsxs(Button, { "data-slot": "clipboard-copy-button", "data-copied": copied || undefined, "data-copy-status": copied ? 'success' : copyFailed ? 'error' : 'idle', variant: variant, size: size, "aria-label": copied ? 'Copied' : copyFailed ? 'Copy failed; try again' : 'Copy', onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                void copy();
+        }, ...props, children: [copied ? (_jsx(Check, { className: "text-success animate-in zoom-in-50 duration-200 motion-reduce:animate-none" })) : (_jsx(Copy, {})), children] }));
+}
+export { ClipboardCopyButton };

package/dist/components/native-capabilities/device-io-controls.d.ts

@@ -0,0 +1,4 @@
+export declare function parseIntegerInput(value: string, label: string, minimum: number, maximum: number): number;
+export declare function parseHexBytes(value: string): Uint8Array<ArrayBuffer>;
+export declare function formatHexBytes(data: ArrayBufferView | null | undefined): string;
+//# sourceMappingURL=device-io-controls.d.ts.map

package/dist/components/native-capabilities/device-io-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-io-controls.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/device-io-controls.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,GACd,MAAM,CASR;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC,CAepE;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,SAAS,GACvC,MAAM,CAMR"}

package/dist/components/native-capabilities/device-io-controls.js

@@ -0,0 +1,28 @@
+export function parseIntegerInput(value, label, minimum, maximum) {
+    const normalized = value.trim();
+    const parsed = normalized.length > 0 ? Number(normalized) : Number.NaN;
+    if (!Number.isInteger(parsed) || parsed < minimum || parsed > maximum) {
+        throw new Error(`${label} must be an integer from ${minimum} to ${maximum}.`);
+    }
+    return parsed;
+}
+export function parseHexBytes(value) {
+    const normalized = value.trim();
+    if (normalized.length === 0)
+        return new Uint8Array(0);
+    const tokens = normalized.split(/[\s,]+/u);
+    const bytes = tokens.map((token) => {
+        const digits = token.replace(/^0x/iu, '');
+        if (!/^[\da-f]{1,2}$/iu.test(digits)) {
+            throw new Error('Payload must contain hexadecimal bytes such as 01 A0 FF.');
+        }
+        return Number.parseInt(digits, 16);
+    });
+    return new Uint8Array(bytes);
+}
+export function formatHexBytes(data) {
+    if (!data || data.byteLength === 0)
+        return '(empty)';
+    const bytes = new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+    return Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0').toUpperCase()).join(' ');
+}

package/dist/components/native-capabilities/device-list.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+declare function DeviceList({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export interface DeviceListItemProps extends React.ComponentProps<'div'> {
+    /** Icon shown in the leading square well. */
+    icon?: React.ReactNode;
+    name: React.ReactNode;
+    /** Secondary line, rendered in mono (IDs, vendor codes, paths). */
+    description?: React.ReactNode;
+    /** Shows a green dot + "Connected" next to the name. */
+    connected?: boolean;
+    /** Trailing actions (buttons, badges). */
+    action?: React.ReactNode;
+}
+declare function DeviceListItem({ icon, name, description, connected, action, className, children, ...props }: DeviceListItemProps): import("react/jsx-runtime").JSX.Element;
+export interface DeviceListEmptyProps extends React.ComponentProps<'div'> {
+    icon?: React.ReactNode;
+}
+declare function DeviceListEmpty({ icon, className, children, ...props }: DeviceListEmptyProps): import("react/jsx-runtime").JSX.Element;
+export { DeviceList, DeviceListItem, DeviceListEmpty };
+//# sourceMappingURL=device-list.d.ts.map

package/dist/components/native-capabilities/device-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-list.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/device-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAYvE;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACtE,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,mEAAmE;IACnE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,2CA2DrB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACvE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAkBtB;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/native-capabilities/device-list.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+function DeviceList({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "device-list", role: "list", className: cn('divide-border divide-y overflow-hidden rounded-lg border', className), ...props }));
+}
+function DeviceListItem({ icon, name, description, connected = false, action, className, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "device-list-item", role: "listitem", className: cn('animate-in fade-in slide-in-from-bottom-1 flex items-center gap-3 px-3 py-2.5 duration-300 motion-reduce:animate-none', props.onClick &&
+            'hover:bg-muted/50 focus-visible:bg-muted/50 cursor-pointer outline-none transition-colors', className), ...props, children: [icon ? (_jsx("div", { "data-slot": "device-list-item-icon", className: "text-muted-foreground bg-muted/50 flex size-8 shrink-0 items-center justify-center rounded-md border [&_svg:not([class*='size-'])]:size-4", children: icon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { "data-slot": "device-list-item-name", className: "truncate text-sm font-medium", children: name }), connected ? (_jsxs("span", { "data-slot": "device-list-item-connected", className: "text-status-running inline-flex shrink-0 items-center gap-1 text-[10px] font-medium uppercase tracking-wide", children: [_jsx("span", { className: "bg-status-running size-1.5 rounded-full" }), "Connected"] })) : null] }), description ? (_jsx("div", { "data-slot": "device-list-item-description", className: "text-muted-foreground mt-0.5 truncate font-mono text-xs", children: description })) : null, children] }), action ? (_jsx("div", { "data-slot": "device-list-item-action", className: "flex shrink-0 items-center gap-1.5", children: action })) : null] }));
+}
+function DeviceListEmpty({ icon, className, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "device-list-empty", className: cn('text-muted-foreground flex flex-col items-center gap-2 px-4 py-8 text-center text-sm', className), ...props, children: [icon ? (_jsx("div", { className: "opacity-60 [&_svg:not([class*='size-'])]:size-5", children: icon })) : null, children] }));
+}
+export { DeviceList, DeviceListItem, DeviceListEmpty };