@moldable-ai/ui 0.2.18 → 0.2.20

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

@@ -0,0 +1,363 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RefreshCw, RotateCcw, Trash2, Usb } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { NativeCapabilityBridgeError, clearMoldableUsbHalt, closeMoldableUsbDevice, forgetMoldableUsbDevice, getMoldableUsbDevices, openMoldableUsbDevice, readMoldableUsbControlTransfer, readMoldableUsbEndpoint, requestMoldableUsbDevice, resetMoldableUsbDevice, writeMoldableUsbControlTransfer, writeMoldableUsbEndpoint, } from '../../lib/native-capabilities';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/select';
+import { Spinner } from '../ui/spinner';
+import { CapabilityBadge } from './capability-badge';
+import { formatHexBytes, parseHexBytes, parseIntegerInput, } from './device-io-controls';
+import { DeviceList, DeviceListEmpty, DeviceListItem } from './device-list';
+import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelFooter, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel';
+import { Readout, ReadoutItem } from './readout';
+function toError(cause) {
+    return cause instanceof Error ? cause : new Error(String(cause));
+}
+function formatHexId(value) {
+    return `0x${value.toString(16).padStart(4, '0')}`;
+}
+function usbDeviceDescriptionId(device) {
+    return [
+        device.vendorId,
+        device.productId,
+        device.serialNumber ?? '',
+        device.productName ?? '',
+    ].join(':');
+}
+/**
+ * USB state machine behind `UsbDevicePanel`: granted-device enumeration,
+ * chooser requests, minimal-claim open/close tracking. Use directly to build
+ * custom USB UI on the same best-effort error handling.
+ */
+export function useMoldableUsb(options = {}) {
+    const [devices, setDevices] = useState([]);
+    const [status, setStatus] = useState('idle');
+    const [error, setError] = useState(null);
+    const [openDeviceIds, setOpenDeviceIds] = useState([]);
+    const [nativeDeviceChoices, setNativeDeviceChoices] = useState([]);
+    const openDevicesRef = useRef(new Map());
+    const idsRef = useRef(new WeakMap());
+    const idCounterRef = useRef(0);
+    const pendingSelectionRef = useRef(null);
+    const generationRef = useRef(0);
+    const unmountedRef = useRef(false);
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    const deviceId = useCallback((device) => {
+        let id = idsRef.current.get(device);
+        if (!id) {
+            id = `usb-${++idCounterRef.current}`;
+            idsRef.current.set(device, id);
+        }
+        return id;
+    }, []);
+    const refresh = useCallback(async () => {
+        const generation = ++generationRef.current;
+        setStatus('loading');
+        setError(null);
+        try {
+            const known = await getMoldableUsbDevices();
+            if (generationRef.current !== generation)
+                return;
+            setDevices((previous) => [
+                ...known,
+                ...previous.filter((device) => openDevicesRef.current.has(deviceId(device)) &&
+                    !known.includes(device)),
+            ]);
+            setStatus('idle');
+        }
+        catch (cause) {
+            if (generationRef.current !== generation)
+                return;
+            if (cause instanceof NativeCapabilityBridgeError &&
+                cause.code === 'unsupported') {
+                // No WebUSB enumeration here (native fallback runtime). Devices
+                // granted through `request` stay listed; this is not an error.
+                setStatus('idle');
+                return;
+            }
+            setError(toError(cause));
+            setStatus('error');
+        }
+    }, [deviceId]);
+    const handleDisconnect = useCallback((device) => {
+        if (unmountedRef.current)
+            return;
+        const id = deviceId(device);
+        const record = openDevicesRef.current.get(id);
+        if (record) {
+            device.removeEventListener('disconnect', record.onDisconnect);
+        }
+        openDevicesRef.current.delete(id);
+        setOpenDeviceIds((previous) => previous.filter((existing) => existing !== id));
+        setDevices((previous) => previous.filter((existing) => existing !== device));
+    }, [deviceId]);
+    const chooseNativeDevice = useCallback((devices) => new Promise((resolve, reject) => {
+        pendingSelectionRef.current = { devices, resolve, reject };
+        setNativeDeviceChoices(devices);
+    }), []);
+    const selectNativeDevice = useCallback((device) => {
+        const pending = pendingSelectionRef.current;
+        if (!pending || !pending.devices.includes(device))
+            return;
+        pendingSelectionRef.current = null;
+        setNativeDeviceChoices([]);
+        pending.resolve(device);
+    }, []);
+    const cancelNativeSelection = useCallback(() => {
+        const pending = pendingSelectionRef.current;
+        if (!pending)
+            return;
+        pendingSelectionRef.current = null;
+        setNativeDeviceChoices([]);
+        pending.reject(new NativeCapabilityBridgeError({
+            code: 'cancelled',
+            message: 'USB device selection was cancelled.',
+            retryable: true,
+        }));
+    }, []);
+    const request = useCallback(async (filters) => {
+        const generation = ++generationRef.current;
+        setStatus('requesting');
+        setError(null);
+        try {
+            const device = await requestMoldableUsbDevice({
+                filters: filters ?? optionsRef.current.filters ?? [],
+                selectNativeDevice: optionsRef.current.selectNativeDevice ?? chooseNativeDevice,
+            });
+            if (generationRef.current !== generation)
+                return;
+            setDevices((previous) => previous.includes(device) ? previous : [...previous, device]);
+            setStatus('idle');
+            return device;
+        }
+        catch (cause) {
+            if (generationRef.current !== generation)
+                return;
+            if (cause instanceof NativeCapabilityBridgeError &&
+                (cause.code === 'cancelled' || cause.code === 'aborted')) {
+                // The user dismissed the chooser; that is not an error state.
+                setStatus('idle');
+                return;
+            }
+            setError(toError(cause));
+            setStatus('error');
+        }
+    }, [chooseNativeDevice]);
+    const open = useCallback(async (device) => {
+        const id = deviceId(device);
+        if (openDevicesRef.current.has(id))
+            return;
+        try {
+            await openMoldableUsbDevice(device, optionsRef.current.openOptions);
+            if (unmountedRef.current) {
+                void closeMoldableUsbDevice(device, optionsRef.current.openOptions?.claimInterfaces).catch(() => undefined);
+                return;
+            }
+            const onDisconnect = () => handleDisconnect(device);
+            device.addEventListener('disconnect', onDisconnect, { once: true });
+            openDevicesRef.current.set(id, {
+                device,
+                onDisconnect,
+                releaseInterfaces: optionsRef.current.openOptions?.claimInterfaces ?? [],
+            });
+            setOpenDeviceIds((previous) => previous.includes(id) ? previous : [...previous, id]);
+            setError(null);
+            setStatus('idle');
+            optionsRef.current.onDeviceOpen?.(device);
+        }
+        catch (cause) {
+            if (unmountedRef.current)
+                return;
+            setError(toError(cause));
+            setStatus('error');
+        }
+    }, [deviceId, handleDisconnect]);
+    const close = useCallback(async (device) => {
+        const id = deviceId(device);
+        const record = openDevicesRef.current.get(id);
+        try {
+            await closeMoldableUsbDevice(device, record?.releaseInterfaces);
+            if (record) {
+                device.removeEventListener('disconnect', record.onDisconnect);
+            }
+            openDevicesRef.current.delete(id);
+            setOpenDeviceIds((previous) => previous.filter((existing) => existing !== id));
+            setError(null);
+            setStatus('idle');
+            return true;
+        }
+        catch (cause) {
+            if (record)
+                record.releaseInterfaces = [];
+            if (unmountedRef.current)
+                return false;
+            setError(toError(cause));
+            setStatus('error');
+            return false;
+        }
+    }, [deviceId]);
+    const runOperation = useCallback(async (operation) => {
+        setError(null);
+        try {
+            const result = await operation();
+            if (!unmountedRef.current)
+                setStatus('idle');
+            return result;
+        }
+        catch (cause) {
+            if (!unmountedRef.current) {
+                setError(toError(cause));
+                setStatus('error');
+            }
+            throw cause;
+        }
+    }, []);
+    const forget = useCallback(async (device) => {
+        const id = deviceId(device);
+        if ((openDevicesRef.current.has(id) || device.opened) &&
+            !(await close(device))) {
+            return false;
+        }
+        try {
+            await runOperation(() => forgetMoldableUsbDevice(device));
+            if (unmountedRef.current)
+                return false;
+            setDevices((previous) => previous.filter((known) => known !== device));
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }, [close, deviceId, runOperation]);
+    useEffect(() => {
+        unmountedRef.current = false;
+        void refresh();
+        const liveGeneration = generationRef;
+        const openDevices = openDevicesRef.current;
+        return () => {
+            unmountedRef.current = true;
+            liveGeneration.current++;
+            const pending = pendingSelectionRef.current;
+            pendingSelectionRef.current = null;
+            pending?.reject(new NativeCapabilityBridgeError({
+                code: 'aborted',
+                message: 'USB device selection was interrupted.',
+                retryable: true,
+            }));
+            const stillOpen = [...openDevices.values()];
+            openDevices.clear();
+            for (const { device, onDisconnect, releaseInterfaces } of stillOpen) {
+                device.removeEventListener('disconnect', onDisconnect);
+                void closeMoldableUsbDevice(device, releaseInterfaces).catch(() => undefined);
+            }
+        };
+    }, [refresh]);
+    return {
+        devices,
+        status,
+        error,
+        openDeviceIds,
+        nativeDeviceChoices,
+        deviceId,
+        refresh,
+        request,
+        selectNativeDevice,
+        cancelNativeSelection,
+        open,
+        close,
+        forget,
+        readEndpoint: (device, endpoint, length) => runOperation(() => readMoldableUsbEndpoint(device, endpoint, length)),
+        writeEndpoint: (device, endpoint, data) => runOperation(() => writeMoldableUsbEndpoint(device, endpoint, data)),
+        readControl: (device, setup, length) => runOperation(() => readMoldableUsbControlTransfer(device, setup, length)),
+        writeControl: (device, setup, data) => runOperation(() => writeMoldableUsbControlTransfer(device, setup, data)),
+        clearHalt: (device, direction, endpoint) => runOperation(() => clearMoldableUsbHalt(device, direction, endpoint)),
+        reset: (device) => runOperation(() => resetMoldableUsbDevice(device)),
+    };
+}
+function UsbDeviceControls({ device, usb }) {
+    const [endpoint, setEndpoint] = useState('1');
+    const [length, setLength] = useState('64');
+    const [payload, setPayload] = useState('');
+    const [requestType, setRequestType] = useState('vendor');
+    const [recipient, setRecipient] = useState('device');
+    const [request, setRequest] = useState('0');
+    const [value, setValue] = useState('0');
+    const [index, setIndex] = useState('0');
+    const [result, setResult] = useState('Ready');
+    const [busy, setBusy] = useState(false);
+    const run = async (operation) => {
+        setBusy(true);
+        try {
+            setResult(await operation());
+        }
+        catch (cause) {
+            setResult(toError(cause).message);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const endpointNumber = () => parseIntegerInput(endpoint, 'Endpoint', 1, 15);
+    const transferLength = () => parseIntegerInput(length, 'Length', 1, 65_535);
+    const setup = () => ({
+        requestType,
+        recipient,
+        request: parseIntegerInput(request, 'Request', 0, 255),
+        value: parseIntegerInput(value, 'Value', 0, 65_535),
+        index: parseIntegerInput(index, 'Index', 0, 65_535),
+    });
+    return (_jsxs("div", { "data-slot": "usb-device-controls", className: "bg-muted/30 mt-2 space-y-3 rounded-md border p-2.5", children: [_jsxs("div", { className: "grid gap-2 sm:grid-cols-3", children: [_jsx(Input, { "aria-label": "USB endpoint number", value: endpoint, onChange: (event) => setEndpoint(event.target.value), placeholder: "Endpoint", className: "h-8 font-mono text-xs" }), _jsx(Input, { "aria-label": "USB transfer length", value: length, onChange: (event) => setLength(event.target.value), placeholder: "Length", className: "h-8 font-mono text-xs" }), _jsx(Input, { "aria-label": "USB endpoint payload", value: payload, onChange: (event) => setPayload(event.target.value), placeholder: "Hex payload", className: "h-8 font-mono text-xs" })] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(Button, { size: "xs", variant: "outline", disabled: busy, onClick: () => void run(async () => {
+                            const transfer = await usb.readEndpoint(device, endpointNumber(), transferLength());
+                            return `Endpoint IN · ${transfer.status} · ${formatHexBytes(transfer.data)}`;
+                        }), children: "Endpoint IN" }), _jsx(Button, { size: "xs", variant: "outline", disabled: busy, onClick: () => void run(async () => {
+                            const transfer = await usb.writeEndpoint(device, endpointNumber(), parseHexBytes(payload));
+                            return `Endpoint OUT · ${transfer.status} · ${transfer.bytesWritten ?? 0} bytes`;
+                        }), children: "Endpoint OUT" }), _jsx(Button, { size: "xs", variant: "ghost", disabled: busy, onClick: () => void run(async () => {
+                            await usb.clearHalt(device, 'in', endpointNumber());
+                            return 'IN halt cleared';
+                        }), children: "Clear IN halt" }), _jsx(Button, { size: "xs", variant: "ghost", disabled: busy, onClick: () => void run(async () => {
+                            await usb.clearHalt(device, 'out', endpointNumber());
+                            return 'OUT halt cleared';
+                        }), children: "Clear OUT halt" })] }), _jsxs("div", { className: "grid gap-2 sm:grid-cols-5", children: [_jsxs(Select, { value: requestType, onValueChange: (next) => setRequestType(next), children: [_jsx(SelectTrigger, { size: "sm", "aria-label": "USB control request type", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "standard", children: "Standard" }), _jsx(SelectItem, { value: "class", children: "Class" }), _jsx(SelectItem, { value: "vendor", children: "Vendor" })] })] }), _jsxs(Select, { value: recipient, onValueChange: (next) => setRecipient(next), children: [_jsx(SelectTrigger, { size: "sm", "aria-label": "USB control recipient", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "device", children: "Device" }), _jsx(SelectItem, { value: "interface", children: "Interface" }), _jsx(SelectItem, { value: "endpoint", children: "Endpoint" }), _jsx(SelectItem, { value: "other", children: "Other" })] })] }), [
+                        ['Request', request, setRequest],
+                        ['Value', value, setValue],
+                        ['Index', index, setIndex],
+                    ].map(([label, current, update]) => (_jsx(Input, { "aria-label": `USB control ${String(label).toLowerCase()}`, value: current, onChange: (event) => update(event.target.value), placeholder: label, className: "h-8 font-mono text-xs" }, label)))] }), _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 transfer = await usb.readControl(device, setup(), transferLength());
+                            return `Control IN · ${transfer.status} · ${formatHexBytes(transfer.data)}`;
+                        }), children: "Control IN" }), _jsx(Button, { size: "xs", variant: "outline", disabled: busy, onClick: () => void run(async () => {
+                            const transfer = await usb.writeControl(device, setup(), parseHexBytes(payload));
+                            return `Control OUT · ${transfer.status} · ${transfer.bytesWritten ?? 0} bytes`;
+                        }), children: "Control OUT" }), _jsxs(Button, { size: "xs", variant: "ghost", disabled: busy, onClick: () => void run(async () => {
+                            await usb.reset(device);
+                            return 'Device reset';
+                        }), children: [_jsx(RotateCcw, {}), "Reset"] }), _jsx("span", { className: "text-muted-foreground ml-auto truncate font-mono text-[10px]", children: busy ? 'Working…' : result })] })] }));
+}
+/**
+ * USB device panel: request access, list granted devices, open/close each
+ * with minimal claims, and read out live device details while open.
+ */
+function UsbDevicePanel({ className, filters, selectNativeDevice, openOptions, onDeviceOpen, ...props }) {
+    const usb = useMoldableUsb({
+        filters,
+        selectNativeDevice,
+        openOptions,
+        onDeviceOpen,
+    });
+    const requesting = usb.status === 'requesting';
+    const loading = usb.status === 'loading';
+    return (_jsxs(NativeCapabilityPanel, { "data-slot": "usb-device-panel", "data-status": usb.status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(Usb, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "USB" }), _jsx(CapabilityBadge, { capability: "usb" }), _jsxs(NativeCapabilityPanelAction, { children: [_jsxs(Button, { size: "sm", disabled: requesting, onClick: () => void usb.request(), children: [requesting ? _jsx(Spinner, {}) : _jsx(Usb, {}), requesting ? 'Requesting…' : 'Request device'] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Refresh devices", disabled: loading || requesting, onClick: () => void usb.refresh(), children: _jsx(RefreshCw, { className: loading ? 'animate-spin motion-reduce:animate-none' : undefined }) })] })] }), _jsxs(NativeCapabilityPanelContent, { children: [usb.nativeDeviceChoices.length > 0 ? (_jsxs("div", { "data-slot": "usb-native-device-picker", className: "bg-muted/30 mb-4 space-y-2 rounded-lg border p-3", children: [_jsx("p", { className: "text-sm font-medium", children: "Choose a USB device" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "More than one native device matched. Select the device explicitly." }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [usb.nativeDeviceChoices.map((device, index) => (_jsxs(Button, { size: "xs", variant: "outline", onClick: () => usb.selectNativeDevice(device), children: [device.productName || 'USB device', " \u00B7", ' ', formatHexId(device.vendorId), ":", formatHexId(device.productId)] }, `${usbDeviceDescriptionId(device)}:${index}`))), _jsx(Button, { size: "xs", variant: "ghost", onClick: usb.cancelNativeSelection, children: "Cancel" })] })] })) : null, _jsx(DeviceList, { children: usb.devices.length === 0 ? (_jsxs(DeviceListEmpty, { icon: _jsx(Usb, {}), children: [_jsx("span", { className: "font-medium", children: "No devices yet" }), _jsx("span", { className: "text-muted-foreground/70 text-xs", children: "Request access to a USB device to get started." })] })) : (usb.devices.map((device, index) => {
+                            const id = usb.deviceId(device);
+                            const open = usb.openDeviceIds.includes(id) || device.opened;
+                            return (_jsx(DeviceListItem, { icon: _jsx(Usb, {}), name: device.productName || 'USB device', description: `${formatHexId(device.vendorId)}:${formatHexId(device.productId)}` +
+                                    (device.manufacturerName
+                                        ? ` · ${device.manufacturerName}`
+                                        : ''), connected: open, action: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: () => void (open ? usb.close(device) : usb.open(device)), children: open ? 'Close' : 'Open' }), _jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": `Forget ${device.productName || 'USB device'}`, onClick: () => void usb.forget(device), children: _jsx(Trash2, {}) })] }), children: open ? (_jsxs("div", { "data-slot": "usb-device-details", className: "animate-in fade-in slide-in-from-top-1 bg-muted/30 mt-2 rounded-md border p-2.5 duration-200 motion-reduce:animate-none", children: [_jsxs(Readout, { className: "gap-y-2 sm:grid-cols-4", children: [_jsx(ReadoutItem, { label: "Configuration", value: device.configuration?.configurationValue ?? null }), _jsx(ReadoutItem, { label: "Vendor ID", value: formatHexId(device.vendorId) }), _jsx(ReadoutItem, { label: "Product ID", value: formatHexId(device.productId) }), _jsx(ReadoutItem, { label: "Serial", value: device.serialNumber ?? null })] }), _jsx(UsbDeviceControls, { device: device, usb: usb })] })) : null }, `${id}:${index}`));
+                        })) })] }), _jsxs(NativeCapabilityPanelFooter, { children: [usb.error ? (_jsx("span", { className: "text-status-error truncate", children: usb.error.message })) : (_jsx("span", { className: "truncate", children: usb.devices.length === 0
+                            ? 'No devices authorized'
+                            : `${usb.devices.length} device${usb.devices.length === 1 ? '' : 's'} known` })), _jsxs("span", { className: "ml-auto shrink-0 font-mono tabular-nums", children: [usb.openDeviceIds.length, " open"] })] })] }));
+}
+export { UsbDevicePanel };

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

@@ -0,0 +1,20 @@
+import { type NativeCapabilityDescriptor, type NativeCapabilityId, type NativeCapabilityManifest } from '../../lib/native-capabilities';
+export type MoldableCapabilityStatus = 'checking' | 'supported' | 'partial' | 'unsupported' | 'unavailable';
+/**
+ * Loads the native capability manifest once per page and shares it across all
+ * hardware components. Pass `force` to bypass the cache (e.g. after a grant).
+ */
+export declare function loadMoldableCapabilities(force?: boolean): Promise<NativeCapabilityManifest>;
+export interface MoldableCapability {
+    status: MoldableCapabilityStatus;
+    descriptor: NativeCapabilityDescriptor | null;
+    manifest: NativeCapabilityManifest | null;
+    error: Error | null;
+    refresh: () => void;
+}
+/**
+ * Reads the support level for one native capability. `unavailable` means the
+ * manifest could not be loaded at all (typically: not running inside Moldable).
+ */
+export declare function useMoldableCapability(id: NativeCapabilityId): MoldableCapability;
+//# sourceMappingURL=use-capability.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-capability.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/use-capability.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAE9B,MAAM,+BAA+B,CAAA;AAEtC,MAAM,MAAM,wBAAwB,GAChC,UAAU,GACV,WAAW,GACX,SAAS,GACT,aAAa,GACb,aAAa,CAAA;AAIjB;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,UAAQ,GACZ,OAAO,CAAC,wBAAwB,CAAC,CAUnC;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,wBAAwB,CAAA;IAChC,UAAU,EAAE,0BAA0B,GAAG,IAAI,CAAA;IAC7C,QAAQ,EAAE,wBAAwB,GAAG,IAAI,CAAA;IACzC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,EAAE,EAAE,kBAAkB,GACrB,kBAAkB,CA4CpB"}

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

@@ -0,0 +1,61 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getMoldableNativeCapabilities, } from '../../lib/native-capabilities';
+let manifestPromise = null;
+/**
+ * Loads the native capability manifest once per page and shares it across all
+ * hardware components. Pass `force` to bypass the cache (e.g. after a grant).
+ */
+export function loadMoldableCapabilities(force = false) {
+    if (force || !manifestPromise) {
+        manifestPromise = getMoldableNativeCapabilities().catch((error) => {
+            manifestPromise = null;
+            throw error;
+        });
+    }
+    return manifestPromise;
+}
+/**
+ * Reads the support level for one native capability. `unavailable` means the
+ * manifest could not be loaded at all (typically: not running inside Moldable).
+ */
+export function useMoldableCapability(id) {
+    const [manifest, setManifest] = useState(null);
+    const [error, setError] = useState(null);
+    const [checking, setChecking] = useState(true);
+    const generation = useRef(0);
+    const load = useCallback((force) => {
+        const current = ++generation.current;
+        setChecking(true);
+        setError(null);
+        loadMoldableCapabilities(force)
+            .then((value) => {
+            if (generation.current !== current)
+                return;
+            setManifest(value);
+            setChecking(false);
+        })
+            .catch((cause) => {
+            if (generation.current !== current)
+                return;
+            setManifest(null);
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            setChecking(false);
+        });
+    }, []);
+    useEffect(() => {
+        load(false);
+        const liveGeneration = generation;
+        return () => {
+            liveGeneration.current++;
+        };
+    }, [load]);
+    const refresh = useCallback(() => load(true), [load]);
+    const descriptor = manifest ? manifest.capabilities[id] : null;
+    const status = checking
+        ? 'checking'
+        : descriptor
+            ? descriptor.support
+            : 'unavailable';
+    return { status, descriptor, manifest, error, refresh };
+}

package/dist/components/ui/app-frame.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export type AppFrameMode = 'auto' | 'embedded' | 'window';
+declare function resolveAppFrameMode(mode: AppFrameMode): Exclude<AppFrameMode, 'auto'>;
+export interface AppFrameProps extends React.ComponentProps<'div'> {
+    /**
+     * `auto` detects whether the app is hosted in a frame. Set an explicit mode
+     * in catalogs, previews, and tests where the runtime environment is ambiguous.
+     */
+    mode?: AppFrameMode;
+}
+declare function AppFrame({ mode, className, style, ...props }: AppFrameProps): import("react/jsx-runtime").JSX.Element;
+export type AppFrameTitlebarProps = React.ComponentPropsWithoutRef<'header'>;
+declare function AppFrameTitlebar({ className, style, ...props }: AppFrameTitlebarProps): import("react/jsx-runtime").JSX.Element;
+declare function AppFrameToolbar({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export interface AppFrameContentProps extends React.ComponentPropsWithoutRef<'main'> {
+    scrollable?: boolean;
+    chatSafe?: boolean;
+}
+declare function AppFrameContent({ scrollable, chatSafe, className, style, ...props }: AppFrameContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AppFrameStatusbar({ className, style, ...props }: React.ComponentPropsWithoutRef<'footer'>): import("react/jsx-runtime").JSX.Element;
+export { AppFrame, AppFrameContent, AppFrameStatusbar, AppFrameTitlebar, AppFrameToolbar, resolveAppFrameMode, };
+//# sourceMappingURL=app-frame.d.ts.map

package/dist/components/ui/app-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzD,iBAAS,mBAAmB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAM9E;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,iBAAS,QAAQ,CAAC,EAChB,IAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,2CA+Bf;AAED,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAE5E,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAoBvB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAWvC;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAiB,EACjB,QAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAoBtB;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,2CAgB1C;AAED,OAAO,EACL,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,CAAA"}

package/dist/components/ui/app-frame.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+function resolveAppFrameMode(mode) {
+    if (mode !== 'auto')
+        return mode;
+    if (typeof window === 'undefined')
+        return 'window';
+    const hostMode = document.documentElement.dataset.moldableDisplayMode;
+    if (hostMode === 'embedded' || hostMode === 'window')
+        return hostMode;
+    return window.parent === window ? 'window' : 'embedded';
+}
+function AppFrame({ mode = 'auto', className, style, ...props }) {
+    const [resolvedMode, setResolvedMode] = React.useState(() => resolveAppFrameMode(mode));
+    React.useEffect(() => {
+        setResolvedMode(resolveAppFrameMode(mode));
+        if (mode !== 'auto')
+            return;
+        const updateMode = () => setResolvedMode(resolveAppFrameMode('auto'));
+        window.addEventListener('moldable:host-context-change', updateMode);
+        return () => window.removeEventListener('moldable:host-context-change', updateMode);
+    }, [mode]);
+    return (_jsx("div", { "data-slot": "app-frame", "data-mode": resolvedMode, className: cn('bg-[var(--surface-canvas,var(--background))] text-foreground flex h-dvh min-h-0 min-w-0 flex-col overflow-hidden', className), style: {
+            paddingInlineStart: 'var(--window-safe-area-inline-start, 0px)',
+            paddingInlineEnd: 'var(--window-safe-area-inline-end, 0px)',
+            ...style,
+        }, ...props }));
+}
+function AppFrameTitlebar({ className, style, ...props }) {
+    return (_jsx("header", { "data-slot": "app-frame-titlebar", className: cn('border-border/70 bg-[var(--surface-toolbar,var(--background))] flex shrink-0 items-center gap-2 border-b', className), style: {
+            minHeight: 'max(var(--density-toolbar-height, 2.5rem), var(--window-drag-region-height, 0px))',
+            paddingInlineStart: 'max(var(--density-pane-padding, 0.75rem), var(--window-control-inset-inline-start, 0px))',
+            paddingInlineEnd: 'max(var(--density-pane-padding, 0.75rem), var(--window-control-inset-inline-end, 0px))',
+            ...style,
+        }, ...props }));
+}
+function AppFrameToolbar({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "app-frame-toolbar", className: cn('flex min-h-9 min-w-0 flex-1 items-center gap-2 px-3 py-1.5', className), ...props }));
+}
+function AppFrameContent({ scrollable = true, chatSafe = true, className, style, ...props }) {
+    return (_jsx("main", { "data-slot": "app-frame-content", "data-scrollable": scrollable, "data-chat-safe": chatSafe, className: cn('min-h-0 min-w-0 flex-1', scrollable ? 'overflow-auto' : 'overflow-hidden', className), style: {
+            paddingBlockEnd: chatSafe
+                ? 'calc(var(--window-content-inset-bottom, 0px) + var(--chat-safe-padding, 0px))'
+                : 'var(--window-content-inset-bottom, 0px)',
+            ...style,
+        }, ...props }));
+}
+function AppFrameStatusbar({ className, style, ...props }) {
+    return (_jsx("footer", { "data-slot": "app-frame-statusbar", className: cn('border-border/70 bg-[var(--surface-toolbar,var(--background))] flex min-h-7 shrink-0 items-center gap-2 border-t px-3 py-1 text-xs text-muted-foreground', className), style: {
+            paddingBlockEnd: 'calc(var(--window-content-inset-bottom, 0px) + 0.25rem)',
+            ...style,
+        }, ...props }));
+}
+export { AppFrame, AppFrameContent, AppFrameStatusbar, AppFrameTitlebar, AppFrameToolbar, resolveAppFrameMode, };

package/dist/components/ui/button-group.d.ts

@@ -1,7 +1,7 @@
 import { Separator } from './separator';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonGroupVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
+    orientation?: "vertical" | "horizontal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
 declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<'div'> & {

package/dist/components/ui/button.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '../../lib/utils';
 import { cva } from 'class-variance-authority';
-const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',

package/dist/components/ui/color-well.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const colorWellVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ColorWellProps extends Omit<React.ComponentProps<'input'>, 'onChange' | 'size' | 'type' | 'value'>, VariantProps<typeof colorWellVariants> {
+    value?: string | null;
+    onValueChange?: (value: string) => void;
+    readOnly?: boolean;
+}
+declare function ColorWell({ value, onValueChange, readOnly, size, className, 'aria-label': ariaLabel, disabled, ...props }: ColorWellProps): import("react/jsx-runtime").JSX.Element;
+export { ColorWell, colorWellVariants };
+//# sourceMappingURL=color-well.d.ts.map

package/dist/components/ui/color-well.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-well.d.ts","sourceRoot":"","sources":["../../../src/components/ui/color-well.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,iBAAiB;;8EActB,CAAA;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CACR,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACvC,EACD,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,aAAa,EACb,QAAgB,EAChB,IAAI,EACJ,SAAS,EACT,YAAY,EAAE,SAA0B,EACxC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CAkDhB;AAED,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/ui/color-well.js

@@ -0,0 +1,30 @@
+'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 colorWellVariants = cva('border-border has-[:focus-visible]:ring-ring/50 relative inline-flex shrink-0 overflow-hidden rounded-md border shadow-xs outline-none has-[:focus-visible]:ring-[3px]', {
+    variants: {
+        size: {
+            sm: 'size-6',
+            default: 'size-8',
+            lg: 'size-10',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+function ColorWell({ value, onValueChange, readOnly = false, size, className, 'aria-label': ariaLabel = 'Choose color', disabled, ...props }) {
+    const swatch = (_jsx("span", { "aria-hidden": "true", "data-slot": "color-well-swatch", className: "absolute inset-0", style: {
+            backgroundColor: value ?? 'transparent',
+            backgroundImage: value
+                ? undefined
+                : 'conic-gradient(var(--muted) 25%, transparent 0 50%, var(--muted) 0 75%, transparent 0)',
+            backgroundSize: value ? undefined : '8px 8px',
+        } }));
+    if (readOnly) {
+        return (_jsx("span", { "data-slot": "color-well", role: "img", "aria-label": ariaLabel, className: cn(colorWellVariants({ size }), className), children: swatch }));
+    }
+    return (_jsxs("label", { "data-slot": "color-well", className: cn(colorWellVariants({ size }), disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', className), children: [swatch, _jsx("input", { type: "color", value: value ?? '#000000', "aria-label": ariaLabel, disabled: disabled, className: "absolute inset-0 cursor-[inherit] opacity-0", onChange: (event) => onValueChange?.(event.currentTarget.value), ...props })] }));
+}
+export { ColorWell, colorWellVariants };

package/dist/components/ui/date-field.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const dateFieldVariants: (props?: ({
+    variant?: "default" | "filled" | null | undefined;
+    density?: "compact" | "default" | "comfortable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DateFieldProps extends Omit<React.ComponentProps<'input'>, 'defaultValue' | 'size' | 'type' | 'value'>, VariantProps<typeof dateFieldVariants> {
+    /** ISO calendar date in YYYY-MM-DD form. No timezone conversion is applied. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onClear?: () => void;
+    clearable?: boolean;
+    clearLabel?: string;
+    inputClassName?: string;
+}
+declare function DateField({ className, inputClassName, value, defaultValue, onChange, onValueChange, onClear, clearable, clearLabel, variant, density, disabled, readOnly, ref, ...props }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+export { DateField, dateFieldVariants, type DateFieldProps };
+//# sourceMappingURL=date-field.d.ts.map

package/dist/components/ui/date-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/date-field.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,iBAAiB;;;8EAmBtB,CAAA;AAED,UAAU,cACR,SAAQ,IAAI,CACR,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAC3C,EACD,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,cAAc,EACd,KAAK,EACL,YAAiB,EACjB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,SAAiB,EACjB,UAAyB,EACzB,OAAmB,EACnB,OAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,2CAkFhB;AAED,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,cAAc,EAAE,CAAA"}