@moldable-ai/ui 0.2.18 → 0.2.20

package/dist/components/native-capabilities/hid-panel.js

@@ -0,0 +1,373 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Gamepad2, RefreshCw, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { NativeCapabilityBridgeError, closeMoldableHidDevice, forgetMoldableHidDevice, getMoldableHidDevices, listenForMoldableHidInputReports, openMoldableHidDevice, receiveMoldableHidFeatureReport, requestMoldableHidDevices, sendMoldableHidFeatureReport, sendMoldableHidReport, } from '../../lib/native-capabilities';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Spinner } from '../ui/spinner';
+import { CapabilityBadge } from './capability-badge';
+import { formatHexBytes, parseHexBytes, parseIntegerInput, } from './device-io-controls';
+import { DeviceList, DeviceListEmpty, DeviceListItem } from './device-list';
+import { LiveIndicator } from './live-indicator';
+import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel';
+import { StreamLog, useStreamLog } from './stream-log';
+const HEX_DUMP_MAX_BYTES = 32;
+function toError(cause) {
+    return cause instanceof Error ? cause : new Error(String(cause));
+}
+function isDismissedChooser(cause) {
+    return (cause instanceof NativeCapabilityBridgeError &&
+        (cause.code === 'cancelled' || cause.code === 'aborted'));
+}
+function asBytes(data) {
+    return data instanceof ArrayBuffer
+        ? new Uint8Array(data)
+        : new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+}
+function viewBytes(view) {
+    return new Uint8Array(view.buffer, view.byteOffset, view.byteLength);
+}
+function formatHexDump(bytes) {
+    if (bytes.byteLength === 0)
+        return '(empty)';
+    const shown = Array.from(bytes.subarray(0, HEX_DUMP_MAX_BYTES))
+        .map((byte) => byte.toString(16).padStart(2, '0').toUpperCase())
+        .join(' ');
+    const hidden = bytes.byteLength - HEX_DUMP_MAX_BYTES;
+    return hidden > 0 ? `${shown} +${hidden} more` : shown;
+}
+function formatHexId(value) {
+    return value.toString(16).padStart(4, '0');
+}
+/** WebHID exposes report collections; the native fallback does not. */
+function describeHidUsage(device) {
+    const collections = device.collections;
+    if (!Array.isArray(collections))
+        return null;
+    const first = collections[0];
+    if (!first ||
+        typeof first.usagePage !== 'number' ||
+        typeof first.usage !== 'number') {
+        return null;
+    }
+    return `usage ${formatHexId(first.usagePage)}:${formatHexId(first.usage)}`;
+}
+/**
+ * HID state machine behind `HidDevicePanel`: granted-device list, chooser
+ * requests, open/close with input-report streaming, and output reports. Use
+ * directly to build custom HID UI on the same lifecycle handling.
+ */
+export function useMoldableHid(options = {}) {
+    const [devices, setDevices] = useState([]);
+    const [status, setStatus] = useState('idle');
+    const [error, setError] = useState(null);
+    const [openIds, setOpenIds] = useState([]);
+    const { entries, append, clear } = useStreamLog();
+    const generationRef = useRef(0);
+    const openRef = useRef(new Map());
+    const idsRef = useRef(new WeakMap());
+    const idCounterRef = useRef(0);
+    const onInputReportRef = useRef(options.onInputReport);
+    onInputReportRef.current = options.onInputReport;
+    /** Stable identity for a device instance (HIDDevice has no intrinsic id). */
+    const deviceId = useCallback((device) => {
+        let id = idsRef.current.get(device);
+        if (!id) {
+            id = `hid-${++idCounterRef.current}`;
+            idsRef.current.set(device, id);
+        }
+        return id;
+    }, []);
+    const detach = useCallback((device) => {
+        const record = openRef.current.get(device);
+        if (!record)
+            return false;
+        openRef.current.delete(device);
+        record.stop();
+        device.removeEventListener('disconnect', record.onDisconnect);
+        const id = deviceId(device);
+        setOpenIds((previous) => previous.filter((value) => value !== id));
+        return true;
+    }, [deviceId]);
+    const refresh = useCallback(async () => {
+        const generation = generationRef.current;
+        try {
+            const granted = await getMoldableHidDevices();
+            if (generationRef.current !== generation)
+                return;
+            setDevices((previous) => [
+                ...granted,
+                ...previous.filter((device) => openRef.current.has(device) && !granted.includes(device)),
+            ]);
+        }
+        catch {
+            // Granted-device enumeration is unavailable on the native fallback;
+            // devices arrive through the chooser instead.
+        }
+    }, []);
+    const request = useCallback(async (filters = []) => {
+        const generation = generationRef.current;
+        setStatus('requesting');
+        setError(null);
+        try {
+            const selected = await requestMoldableHidDevices({ filters });
+            if (generationRef.current !== generation)
+                return;
+            setStatus('idle');
+            if (selected.length > 0) {
+                setDevices((previous) => [
+                    ...previous,
+                    ...selected.filter((device) => !previous.includes(device)),
+                ]);
+            }
+        }
+        catch (cause) {
+            if (generationRef.current !== generation)
+                return;
+            if (isDismissedChooser(cause)) {
+                setStatus('idle');
+                return;
+            }
+            setError(toError(cause));
+            setStatus('error');
+        }
+    }, []);
+    const open = useCallback(async (device) => {
+        if (openRef.current.has(device))
+            return;
+        const generation = generationRef.current;
+        setError(null);
+        let opened = false;
+        try {
+            await openMoldableHidDevice(device);
+            opened = true;
+            if (generationRef.current !== generation) {
+                void closeMoldableHidDevice(device).catch(() => undefined);
+                return;
+            }
+            const stop = listenForMoldableHidInputReports(device, (event) => {
+                append({
+                    direction: 'in',
+                    data: `[${event.reportId}] ${formatHexDump(viewBytes(event.data))}`,
+                });
+                onInputReportRef.current?.(event);
+            });
+            const onDisconnect = () => {
+                if (!detach(device))
+                    return;
+                append({
+                    direction: 'info',
+                    data: `${device.productName || 'HID device'} disconnected`,
+                });
+                void closeMoldableHidDevice(device).catch(() => undefined);
+            };
+            device.addEventListener('disconnect', onDisconnect);
+            openRef.current.set(device, { stop, onDisconnect });
+            const id = deviceId(device);
+            setOpenIds((previous) => previous.includes(id) ? previous : [...previous, id]);
+            setStatus('idle');
+        }
+        catch (cause) {
+            if (opened && !openRef.current.has(device)) {
+                void closeMoldableHidDevice(device).catch(() => undefined);
+            }
+            if (generationRef.current !== generation)
+                return;
+            setError(toError(cause));
+            setStatus('error');
+        }
+    }, [append, detach, deviceId]);
+    const close = useCallback(async (device) => {
+        const generation = generationRef.current;
+        try {
+            await closeMoldableHidDevice(device);
+            if (generationRef.current !== generation)
+                return false;
+            detach(device);
+            setError(null);
+            setStatus('idle');
+            return true;
+        }
+        catch (cause) {
+            if (generationRef.current !== generation)
+                return false;
+            setError(toError(cause));
+            setStatus('error');
+            return false;
+        }
+    }, [detach]);
+    const sendReport = useCallback(async (device, reportId, data) => {
+        const generation = generationRef.current;
+        setError(null);
+        try {
+            await sendMoldableHidReport(device, reportId, data);
+            if (generationRef.current !== generation)
+                return false;
+            append({
+                direction: 'out',
+                data: `[${reportId}] ${formatHexDump(asBytes(data))}`,
+            });
+            setStatus('idle');
+            return true;
+        }
+        catch (cause) {
+            if (generationRef.current !== generation)
+                return false;
+            setError(toError(cause));
+            setStatus('error');
+            return false;
+        }
+    }, [append]);
+    const sendFeatureReport = useCallback(async (device, reportId, data) => {
+        const generation = generationRef.current;
+        setError(null);
+        try {
+            await sendMoldableHidFeatureReport(device, reportId, data);
+            if (generationRef.current !== generation)
+                return false;
+            append({
+                direction: 'out',
+                data: `[feature ${reportId}] ${formatHexDump(asBytes(data))}`,
+            });
+            setStatus('idle');
+            return true;
+        }
+        catch (cause) {
+            if (generationRef.current !== generation)
+                return false;
+            setError(toError(cause));
+            setStatus('error');
+            return false;
+        }
+    }, [append]);
+    const receiveFeatureReport = useCallback(async (device, reportId) => {
+        const generation = generationRef.current;
+        setError(null);
+        try {
+            const data = await receiveMoldableHidFeatureReport(device, reportId);
+            if (generationRef.current !== generation)
+                return;
+            append({
+                direction: 'in',
+                data: `[feature ${reportId}] ${formatHexDump(viewBytes(data))}`,
+            });
+            setStatus('idle');
+            return data;
+        }
+        catch (cause) {
+            if (generationRef.current !== generation)
+                return;
+            setError(toError(cause));
+            setStatus('error');
+        }
+    }, [append]);
+    const forget = useCallback(async (device) => {
+        if (openRef.current.has(device) && !(await close(device)))
+            return false;
+        const generation = generationRef.current;
+        setError(null);
+        try {
+            await forgetMoldableHidDevice(device);
+            if (generationRef.current !== generation)
+                return false;
+            setDevices((previous) => previous.filter((known) => known !== device));
+            setStatus('idle');
+            return true;
+        }
+        catch (cause) {
+            if (generationRef.current !== generation)
+                return false;
+            setError(toError(cause));
+            setStatus('error');
+            return false;
+        }
+    }, [close]);
+    useEffect(() => {
+        void refresh();
+        const liveGeneration = generationRef;
+        const liveOpen = openRef;
+        return () => {
+            liveGeneration.current++;
+            for (const [device, record] of liveOpen.current) {
+                record.stop();
+                device.removeEventListener('disconnect', record.onDisconnect);
+                void closeMoldableHidDevice(device).catch(() => undefined);
+            }
+            liveOpen.current.clear();
+        };
+    }, [refresh]);
+    return {
+        devices,
+        status,
+        error,
+        openIds,
+        entries,
+        deviceId,
+        refresh,
+        request,
+        open,
+        close,
+        sendReport,
+        sendFeatureReport,
+        receiveFeatureReport,
+        forget,
+        clearEntries: clear,
+    };
+}
+function HidReportControls({ device, hid }) {
+    const [reportId, setReportId] = useState('0');
+    const [payload, setPayload] = useState('');
+    const [result, setResult] = useState('Ready');
+    const [busy, setBusy] = useState(false);
+    const parsedReportId = () => parseIntegerInput(reportId, 'Report ID', 0, 255);
+    const run = async (operation) => {
+        setBusy(true);
+        try {
+            setResult(await operation());
+        }
+        catch (cause) {
+            setResult(toError(cause).message);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("div", { "data-slot": "hid-report-controls", className: "bg-muted/30 mt-2 space-y-2 rounded-md border p-2.5", children: [_jsxs("div", { className: "grid gap-2 sm:grid-cols-[8rem_1fr]", children: [_jsx(Input, { "aria-label": "HID report ID", value: reportId, onChange: (event) => setReportId(event.target.value), placeholder: "Report ID", className: "h-8 font-mono text-xs" }), _jsx(Input, { "aria-label": "HID report payload", value: payload, onChange: (event) => setPayload(event.target.value), placeholder: "Hex payload, for example 01 A0 FF", className: "h-8 font-mono text-xs" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(Button, { size: "xs", variant: "outline", disabled: busy, onClick: () => void run(async () => {
+                            const id = parsedReportId();
+                            const data = parseHexBytes(payload);
+                            const sent = await hid.sendReport(device, id, data);
+                            return sent
+                                ? `Output ${id} · ${formatHexBytes(data)}`
+                                : `Output ${id} failed`;
+                        }), children: "Send output" }), _jsx(Button, { size: "xs", variant: "outline", disabled: busy, onClick: () => void run(async () => {
+                            const id = parsedReportId();
+                            const data = parseHexBytes(payload);
+                            const sent = await hid.sendFeatureReport(device, id, data);
+                            return sent
+                                ? `Feature OUT ${id} · ${formatHexBytes(data)}`
+                                : `Feature OUT ${id} failed`;
+                        }), children: "Feature OUT" }), _jsx(Button, { size: "xs", variant: "outline", disabled: busy, onClick: () => void run(async () => {
+                            const id = parsedReportId();
+                            const data = await hid.receiveFeatureReport(device, id);
+                            return data
+                                ? `Feature IN ${id} · ${formatHexBytes(data)}`
+                                : `Feature IN ${id} failed`;
+                        }), children: "Feature IN" }), _jsx("span", { className: "text-muted-foreground ml-auto truncate font-mono text-[10px]", children: busy ? 'Working…' : result })] })] }));
+}
+/**
+ * HID device panel: chooser access, granted-device list with open/close, and
+ * a live hex log of incoming input reports.
+ */
+function HidDevicePanel({ className, filters, onInputReport, ...props }) {
+    const hid = useMoldableHid({ onInputReport });
+    const requesting = hid.status === 'requesting';
+    const anyOpen = hid.openIds.length > 0;
+    return (_jsxs(NativeCapabilityPanel, { "data-slot": "hid-device-panel", "data-status": hid.status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(Gamepad2, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "HID" }), _jsx(CapabilityBadge, { capability: "hid" }), _jsxs(NativeCapabilityPanelAction, { children: [_jsxs(Button, { size: "sm", disabled: requesting, onClick: () => void hid.request(filters), children: [requesting ? _jsx(Spinner, {}) : null, requesting ? 'Requesting…' : 'Request device'] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Refresh devices", onClick: () => void hid.refresh(), children: _jsx(RefreshCw, {}) })] })] }), _jsxs(NativeCapabilityPanelContent, { className: "space-y-4", children: [_jsx(DeviceList, { children: hid.devices.length === 0 ? (_jsxs(DeviceListEmpty, { icon: _jsx(Gamepad2, {}), children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: "No HID devices" }), _jsx("p", { className: "text-xs", children: "Request a device to grant this app access." })] })) : (hid.devices.map((device) => {
+                            const id = hid.deviceId(device);
+                            const open = hid.openIds.includes(id);
+                            const usage = describeHidUsage(device);
+                            return (_jsx(DeviceListItem, { icon: _jsx(Gamepad2, {}), name: device.productName || 'HID device', description: `${formatHexId(device.vendorId)}:${formatHexId(device.productId)}${usage ? ` · ${usage}` : ''}`, connected: open, action: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "xs", onClick: () => void (open ? hid.close(device) : hid.open(device)), children: open ? 'Close' : 'Open' }), _jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": `Forget ${device.productName || 'HID device'}`, onClick: () => void hid.forget(device), children: _jsx(Trash2, {}) })] }), children: open ? (_jsx(HidReportControls, { device: device, hid: hid })) : null }, id));
+                        })) }), hid.error ? (_jsx("p", { className: "text-status-error text-xs", children: hid.error.message })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-[10px] font-medium uppercase tracking-wider", children: "Input reports" }), anyOpen ? _jsx(LiveIndicator, {}) : null] }), _jsx(StreamLog, { entries: hid.entries, maxHeight: 200, emptyLabel: "Waiting for input reports" })] })] })] }));
+}
+export { HidDevicePanel };

package/dist/components/native-capabilities/index.d.ts

@@ -0,0 +1,27 @@
+export * from './bluetooth-panel';
+export * from './camera-preview';
+export * from './capability-badge';
+export * from './capability-matrix';
+export * from './clipboard-button';
+export * from './device-list';
+export * from './display-map';
+export * from './haptic-button';
+export * from './native-capability-panel';
+export * from './hid-panel';
+export * from './live-indicator';
+export * from './local-auth-button';
+export * from './location-panel';
+export * from './microphone-meter';
+export * from './midi-monitor';
+export * from './notification-panel';
+export * from './power-panel';
+export * from './readout';
+export * from './screen-share-preview';
+export * from './secure-storage-panel';
+export * from './serial-console';
+export * from './shortcut-recorder';
+export * from './stream-log';
+export * from './system-audio-monitor';
+export * from './usb-panel';
+export * from './use-capability';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/native-capabilities/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,2BAA2B,CAAA;AACzC,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA"}

package/dist/components/native-capabilities/index.js

@@ -0,0 +1,26 @@
+export * from './bluetooth-panel';
+export * from './camera-preview';
+export * from './capability-badge';
+export * from './capability-matrix';
+export * from './clipboard-button';
+export * from './device-list';
+export * from './display-map';
+export * from './haptic-button';
+export * from './native-capability-panel';
+export * from './hid-panel';
+export * from './live-indicator';
+export * from './local-auth-button';
+export * from './location-panel';
+export * from './microphone-meter';
+export * from './midi-monitor';
+export * from './notification-panel';
+export * from './power-panel';
+export * from './readout';
+export * from './screen-share-preview';
+export * from './secure-storage-panel';
+export * from './serial-console';
+export * from './shortcut-recorder';
+export * from './stream-log';
+export * from './system-audio-monitor';
+export * from './usb-panel';
+export * from './use-capability';

package/dist/components/native-capabilities/live-indicator.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const liveIndicatorVariants: (props?: ({
+    variant?: "live" | "rec" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface LiveIndicatorProps extends React.ComponentProps<'span'>, VariantProps<typeof liveIndicatorVariants> {
+    label?: React.ReactNode;
+}
+/**
+ * Pulsing activity chip. `live` reads on app surfaces; `rec` is styled for
+ * overlaying dark media wells (video, screen share).
+ */
+declare function LiveIndicator({ label, variant, className, ...props }: LiveIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export { LiveIndicator };
+//# sourceMappingURL=live-indicator.d.ts.map

package/dist/components/native-capabilities/live-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/live-indicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,qBAAqB;;8EAW1B,CAAA;AAOD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAClC,YAAY,CAAC,OAAO,qBAAqB,CAAC;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,OAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA0BpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/native-capabilities/live-indicator.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { cva } from 'class-variance-authority';
+const liveIndicatorVariants = cva('inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-widest', {
+    variants: {
+        variant: {
+            live: 'border-border bg-background/80 text-foreground backdrop-blur-sm',
+            rec: 'border-white/15 bg-black/60 text-white backdrop-blur-sm',
+        },
+    },
+    defaultVariants: { variant: 'live' },
+});
+const DOT_CLASS = {
+    live: 'bg-status-running',
+    rec: 'bg-destructive',
+};
+/**
+ * Pulsing activity chip. `live` reads on app surfaces; `rec` is styled for
+ * overlaying dark media wells (video, screen share).
+ */
+function LiveIndicator({ label, variant = 'live', className, ...props }) {
+    const tone = variant ?? 'live';
+    return (_jsxs("span", { "data-slot": "live-indicator", "data-variant": tone, className: cn(liveIndicatorVariants({ variant: tone }), className), ...props, children: [_jsxs("span", { className: "relative flex size-1.5 shrink-0", children: [_jsx("span", { className: cn('absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:animate-none', DOT_CLASS[tone]) }), _jsx("span", { className: cn('relative inline-flex size-1.5 rounded-full', DOT_CLASS[tone]) })] }), label ?? (tone === 'rec' ? 'Rec' : 'Live')] }));
+}
+export { LiveIndicator };

package/dist/components/native-capabilities/local-auth-button.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { type MoldableLocalAuthenticationAvailability, type MoldableLocalAuthenticationPolicy, type MoldableLocalAuthenticationResult } from '../../lib/native-capabilities';
+import { Button } from '../ui/button';
+export type MoldableLocalAuthStatus = 'idle' | 'authenticating' | 'success' | 'failed';
+/**
+ * Local (device-owner / biometric) authentication state machine behind
+ * `LocalAuthButton`. `authenticate` resolves the host outcome, or `null` when
+ * the bridge call itself failed or the result arrived after unmount.
+ */
+export declare function useMoldableLocalAuth(): {
+    availability: MoldableLocalAuthenticationAvailability | null;
+    status: MoldableLocalAuthStatus;
+    outcome: MoldableLocalAuthenticationResult | null;
+    error: Error | null;
+    authenticate: (reason?: string, policy?: MoldableLocalAuthenticationPolicy) => Promise<MoldableLocalAuthenticationResult | null>;
+    reset: () => void;
+};
+export interface LocalAuthButtonProps extends React.ComponentProps<typeof Button> {
+    /** Shown by the OS in the authentication prompt. */
+    reason?: string;
+    /** Defaults to the host's `device-owner` policy. */
+    policy?: MoldableLocalAuthenticationPolicy;
+    /** Called with the host outcome after each attempt. */
+    onResult?: (outcome: MoldableLocalAuthenticationResult) => void;
+}
+/**
+ * A `Button` that asks the OS to verify the current user. The idle label
+ * follows the available method (Touch ID when biometrics are available),
+ * and success/failure states resolve back to idle after ~2s.
+ */
+declare function LocalAuthButton({ reason, policy, onResult, onClick, className, disabled, children, ...props }: LocalAuthButtonProps): import("react/jsx-runtime").JSX.Element;
+export { LocalAuthButton };
+//# sourceMappingURL=local-auth-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"local-auth-button.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/local-auth-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,uCAAuC,EAC5C,KAAK,iCAAiC,EACtC,KAAK,iCAAiC,EAGvC,MAAM,+BAA+B,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAGrC,MAAM,MAAM,uBAAuB,GAC/B,MAAM,GACN,gBAAgB,GAChB,SAAS,GACT,QAAQ,CAAA;AAIZ;;;;GAIG;AACH,wBAAgB,oBAAoB;;;;;4BA6BtB,MAAM,WACL,iCAAiC;;EAwC/C;AAkBD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC;IAC3C,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,iCAAiC,CAAA;IAC1C,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,iCAAiC,KAAK,IAAI,CAAA;CAChE;AAED;;;;GAIG;AACH,iBAAS,eAAe,CAAC,EACvB,MAAuB,EACvB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA8DtB;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/native-capabilities/local-auth-button.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Fingerprint, ShieldX } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { authenticateMoldableLocalUser, getMoldableLocalAuthenticationAvailability, } from '../../lib/native-capabilities';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import { Spinner } from '../ui/spinner';
+const DEFAULT_REASON = 'Confirm your identity';
+/**
+ * Local (device-owner / biometric) authentication state machine behind
+ * `LocalAuthButton`. `authenticate` resolves the host outcome, or `null` when
+ * the bridge call itself failed or the result arrived after unmount.
+ */
+export function useMoldableLocalAuth() {
+    const [availability, setAvailability] = useState(null);
+    const [status, setStatus] = useState('idle');
+    const [outcome, setOutcome] = useState(null);
+    const [error, setError] = useState(null);
+    const tokenRef = useRef(0);
+    const availabilityGenerationRef = useRef(0);
+    useEffect(() => {
+        const generation = ++availabilityGenerationRef.current;
+        getMoldableLocalAuthenticationAvailability()
+            .then((value) => {
+            if (availabilityGenerationRef.current === generation) {
+                setAvailability(value);
+            }
+        })
+            .catch(() => {
+            // Availability detail is best-effort outside Moldable.
+        });
+        const liveGeneration = availabilityGenerationRef;
+        return () => {
+            liveGeneration.current++;
+        };
+    }, []);
+    const authenticate = useCallback(async (reason = DEFAULT_REASON, policy) => {
+        const token = ++tokenRef.current;
+        setStatus('authenticating');
+        setOutcome(null);
+        setError(null);
+        try {
+            const result = await authenticateMoldableLocalUser(reason, policy ? { policy } : {});
+            if (tokenRef.current !== token)
+                return null;
+            setOutcome(result);
+            setStatus(result.outcome === 'authenticated' ? 'success' : 'failed');
+            return result;
+        }
+        catch (cause) {
+            if (tokenRef.current !== token)
+                return null;
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            setStatus('failed');
+            return null;
+        }
+    }, []);
+    const reset = useCallback(() => {
+        tokenRef.current++;
+        setStatus('idle');
+        setOutcome(null);
+        setError(null);
+    }, []);
+    useEffect(() => () => {
+        tokenRef.current++;
+    }, []);
+    return { availability, status, outcome, error, authenticate, reset };
+}
+const LOCAL_AUTH_SHAKE_STYLE = `
+@keyframes moldable-local-auth-shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-3px); }
+  40% { transform: translateX(3px); }
+  60% { transform: translateX(-2px); }
+  80% { transform: translateX(2px); }
+}
+[data-slot='local-auth-button'][data-status='failed'] {
+  animation: moldable-local-auth-shake 320ms ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot='local-auth-button'][data-status='failed'] { animation: none; }
+}
+`;
+/**
+ * A `Button` that asks the OS to verify the current user. The idle label
+ * follows the available method (Touch ID when biometrics are available),
+ * and success/failure states resolve back to idle after ~2s.
+ */
+function LocalAuthButton({ reason = DEFAULT_REASON, policy, onResult, onClick, className, disabled, children, ...props }) {
+    const auth = useMoldableLocalAuth();
+    const onResultRef = useRef(onResult);
+    onResultRef.current = onResult;
+    const { status, reset } = auth;
+    useEffect(() => {
+        if (status !== 'success' && status !== 'failed')
+            return;
+        const timeout = window.setTimeout(reset, 2000);
+        return () => window.clearTimeout(timeout);
+    }, [status, reset]);
+    const biometric = auth.availability?.available === true &&
+        auth.availability.method === 'biometric';
+    const idleLabel = biometric ? 'Touch ID' : 'Authenticate';
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || status === 'authenticating')
+            return;
+        void auth.authenticate(reason, policy).then((result) => {
+            if (result)
+                onResultRef.current?.(result);
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: LOCAL_AUTH_SHAKE_STYLE }), _jsx(Button, { "data-slot": "local-auth-button", "data-status": status, className: cn('motion-reduce:animate-none', status === 'success' && 'text-success', className), disabled: disabled || status === 'authenticating', onClick: handleClick, ...props, children: status === 'authenticating' ? (_jsxs(_Fragment, { children: [_jsx(Spinner, {}), " Authenticating\u2026"] })) : status === 'success' ? (_jsxs(_Fragment, { children: [_jsx(Check, {}), " Verified"] })) : status === 'failed' ? (_jsxs(_Fragment, { children: [_jsx(ShieldX, {}), " Failed"] })) : ((children ?? (_jsxs(_Fragment, { children: [_jsx(Fingerprint, {}), " ", idleLabel] })))) })] }));
+}
+export { LocalAuthButton };

package/dist/components/native-capabilities/location-panel.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { type MoldableLocationAuthorizationState, type MoldableLocationOptions, type MoldableLocationResult } from '../../lib/native-capabilities';
+export type MoldableLocationStatus = 'idle' | 'locating' | 'success' | 'denied' | 'error';
+/**
+ * One-shot location state machine behind `LocationPanel`. Use directly to
+ * build custom location UI on the same authorization/error handling.
+ */
+export declare function useMoldableLocation(options?: MoldableLocationOptions): {
+    status: MoldableLocationStatus;
+    position: MoldableLocationResult | null;
+    authorization: MoldableLocationAuthorizationState | null;
+    error: Error | null;
+    locate: () => Promise<MoldableLocationResult | null | undefined>;
+};
+declare function formatCoordinate(value: number, axis: 'lat' | 'lng'): string;
+export interface LocationPanelProps extends React.ComponentProps<'div'> {
+    /** Location request options (high accuracy is on by default). */
+    options?: MoldableLocationOptions;
+    /** Request a fix on mount. */
+    autoLocate?: boolean;
+    onLocation?: (position: MoldableLocationResult) => void;
+}
+/**
+ * Current-position panel: authorization state, one-shot fix, mono coordinate
+ * readout with copy, accuracy/altitude/speed details.
+ */
+declare function LocationPanel({ className, options, autoLocate, onLocation, ...props }: LocationPanelProps): import("react/jsx-runtime").JSX.Element;
+export { LocationPanel, formatCoordinate };
+//# sourceMappingURL=location-panel.d.ts.map