@moldable-ai/ui 0.2.18 → 0.2.20

package/dist/components/hardware/stream-log.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export type StreamLogDirection = 'in' | 'out' | 'info' | 'error';
+export interface StreamLogEntry {
+    id: string | number;
+    /** Epoch millis. Defaults to now when appended via `useStreamLog`. */
+    timestamp?: number;
+    direction?: StreamLogDirection;
+    /** Chip text override (defaults per direction: RX / TX / · / ERR). */
+    label?: string;
+    data: React.ReactNode;
+}
+/** Rolling entry buffer for `StreamLog`, capped at `maxEntries`. */
+export declare function useStreamLog(maxEntries?: number): {
+    entries: StreamLogEntry[];
+    append: (entry: Omit<StreamLogEntry, "id"> & {
+        id?: string | number;
+    }) => void;
+    clear: () => void;
+};
+declare function formatStreamLogTime(timestamp: number): string;
+export interface StreamLogProps extends React.ComponentProps<'div'> {
+    entries: StreamLogEntry[];
+    /** Pixel height of the scroll well. Defaults to 240. */
+    maxHeight?: number;
+    emptyLabel?: React.ReactNode;
+    /** Hide the per-row timestamp column. */
+    hideTimestamps?: boolean;
+}
+/**
+ * Auto-following mono event log for streams (serial, HID, MIDI, BLE, power
+ * events). Stays pinned to the newest entry unless the user scrolls up.
+ */
+declare function StreamLog({ entries, maxHeight, emptyLabel, hideTimestamps, className, ...props }: StreamLogProps): import("react/jsx-runtime").JSX.Element;
+export { StreamLog, formatStreamLogTime };
+//# sourceMappingURL=stream-log.d.ts.map

package/dist/components/hardware/stream-log.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stream-log.d.ts","sourceRoot":"","sources":["../../../src/components/hardware/stream-log.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;AAEhE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB;AAED,oEAAoE;AACpE,wBAAgB,YAAY,CAAC,UAAU,SAAM;;oBAKjC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;;EAqBhE;AAgBD,iBAAS,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAKtD;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACjE,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED;;;GAGG;AACH,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,SAAe,EACf,UAA+B,EAC/B,cAAsB,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,2CA6DhB;AAED,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/hardware/stream-log.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/utils';
+/** Rolling entry buffer for `StreamLog`, capped at `maxEntries`. */
+export function useStreamLog(maxEntries = 500) {
+    const [entries, setEntries] = useState([]);
+    const counter = useRef(0);
+    const append = useCallback((entry) => {
+        setEntries((previous) => {
+            const next = [
+                ...previous,
+                {
+                    ...entry,
+                    id: entry.id ?? ++counter.current,
+                    timestamp: entry.timestamp ?? Date.now(),
+                },
+            ];
+            return next.length > maxEntries
+                ? next.slice(next.length - maxEntries)
+                : next;
+        });
+    }, [maxEntries]);
+    const clear = useCallback(() => setEntries([]), []);
+    return { entries, append, clear };
+}
+const DIRECTION_LABEL = {
+    in: 'RX',
+    out: 'TX',
+    info: '·',
+    error: 'ERR',
+};
+const DIRECTION_CLASS = {
+    in: 'text-success border-success/40',
+    out: 'text-foreground border-border',
+    info: 'text-muted-foreground border-transparent',
+    error: 'text-status-error border-status-error/40',
+};
+function formatStreamLogTime(timestamp) {
+    const date = new Date(timestamp);
+    const pad = (value, length = 2) => value.toString().padStart(length, '0');
+    return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${pad(date.getMilliseconds(), 3)}`;
+}
+/**
+ * Auto-following mono event log for streams (serial, HID, MIDI, BLE, power
+ * events). Stays pinned to the newest entry unless the user scrolls up.
+ */
+function StreamLog({ entries, maxHeight = 240, emptyLabel = 'Waiting for data', hideTimestamps = false, className, ...props }) {
+    const scrollRef = useRef(null);
+    const pinnedRef = useRef(true);
+    useEffect(() => {
+        const element = scrollRef.current;
+        if (element && pinnedRef.current)
+            element.scrollTop = element.scrollHeight;
+    }, [entries]);
+    return (_jsx("div", { "data-slot": "stream-log", ref: scrollRef, onScroll: (event) => {
+            const element = event.currentTarget;
+            pinnedRef.current =
+                element.scrollHeight - element.scrollTop - element.clientHeight < 32;
+        }, className: cn('bg-muted/30 overflow-y-auto rounded-lg border font-mono text-xs', className), style: { maxHeight, ...props.style }, ...props, children: entries.length === 0 ? (_jsx("div", { className: "text-muted-foreground/70 flex items-center justify-center px-4 py-10", children: emptyLabel })) : (entries.map((entry) => {
+            const direction = entry.direction ?? 'info';
+            return (_jsxs("div", { "data-slot": "stream-log-entry", "data-direction": direction, className: "animate-in fade-in border-border/40 flex items-baseline gap-2 border-b px-3 py-1.5 duration-200 last:border-0 motion-reduce:animate-none", children: [!hideTimestamps && entry.timestamp !== undefined ? (_jsx("span", { className: "text-muted-foreground/70 shrink-0 text-[10px] tabular-nums", children: formatStreamLogTime(entry.timestamp) })) : null, _jsx("span", { className: cn('w-8 shrink-0 rounded border text-center text-[9px] font-semibold uppercase leading-4 tracking-wide', DIRECTION_CLASS[direction]), children: entry.label ?? DIRECTION_LABEL[direction] }), _jsx("span", { className: "min-w-0 flex-1 whitespace-pre-wrap break-all", children: entry.data })] }, entry.id));
+        })) }));
+}
+export { StreamLog, formatStreamLogTime };

package/dist/components/hardware/system-audio-monitor.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { type MoldableSystemAudioCaptureMode, type MoldableSystemAudioEvent } from '../../lib/native-hardware';
+export type MoldableSystemAudioMonitorStatus = 'idle' | 'starting' | 'stopping' | 'capturing' | 'error';
+export interface UseMoldableSystemAudioOptions {
+    /** Observe raw capture events (lifecycle plus PCM data frames). */
+    onEvent?: (event: MoldableSystemAudioEvent) => void;
+}
+/**
+ * System-audio capture state machine behind `SystemAudioMonitor`. macOS PCM
+ * capture (Int16 LE frames over the native bridge), not a `MediaStream` — the
+ * level is a running RMS computed from incoming frames.
+ */
+export declare function useMoldableSystemAudio(options?: UseMoldableSystemAudioOptions): {
+    status: MoldableSystemAudioMonitorStatus;
+    level: number;
+    mode: MoldableSystemAudioCaptureMode | null;
+    framesReceived: number;
+    error: Error | null;
+    active: boolean;
+    start: (nextMode: MoldableSystemAudioCaptureMode) => Promise<void>;
+    stop: () => Promise<void>;
+};
+export interface SystemAudioMonitorProps extends React.ComponentProps<'div'> {
+    /** Capture mode preselected in the header. */
+    defaultMode?: MoldableSystemAudioCaptureMode;
+}
+/**
+ * System-audio panel: capture-mode picker, RMS level meter with peak hold,
+ * and a lifecycle event log. macOS-only; other platforms get the standard
+ * unsupported state.
+ */
+declare function SystemAudioMonitor({ className, defaultMode, ...props }: SystemAudioMonitorProps): import("react/jsx-runtime").JSX.Element;
+export { SystemAudioMonitor };
+//# sourceMappingURL=system-audio-monitor.d.ts.map

package/dist/components/hardware/system-audio-monitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-audio-monitor.d.ts","sourceRoot":"","sources":["../../../src/components/hardware/system-audio-monitor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,8BAA8B,EACnC,KAAK,wBAAwB,EAI9B,MAAM,2BAA2B,CAAA;AAwBlC,MAAM,MAAM,gCAAgC,GACxC,MAAM,GACN,UAAU,GACV,UAAU,GACV,WAAW,GACX,OAAO,CAAA;AAKX,MAAM,WAAW,6BAA6B;IAC5C,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,IAAI,CAAA;CACpD;AAcD;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,GAAE,6BAAkC;;;;;;;sBA2DxB,8BAA8B;;EA2GlD;AAOD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC1E,8CAA8C;IAC9C,WAAW,CAAC,EAAE,8BAA8B,CAAA;CAC7C;AAED;;;;GAIG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,WAA2B,EAC3B,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAgMzB;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/hardware/system-audio-monitor.js

@@ -0,0 +1,275 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Play, Square, Volume2, VolumeX } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { startMoldableSystemAudioCapture, stopMoldableSystemAudioCapture, subscribeMoldableSystemAudioEvents, } from '../../lib/native-hardware';
+import { Button } from '../ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/select';
+import { Spinner } from '../ui/spinner';
+import { CapabilityBadge } from './capability-badge';
+import { HardwarePanel, HardwarePanelAction, HardwarePanelContent, HardwarePanelFooter, HardwarePanelHeader, HardwarePanelIcon, HardwarePanelTitle, } from './hardware-panel';
+import { LiveIndicator } from './live-indicator';
+import { StreamLog, useStreamLog } from './stream-log';
+import { useMoldableCapability } from './use-capability';
+const SYSTEM_AUDIO_SAMPLE_RATE = 48_000;
+const FRAME_LOG_INTERVAL = 50;
+function computeRmsLevel(buffer) {
+    const sampleCount = Math.floor(buffer.byteLength / 2);
+    if (sampleCount === 0)
+        return 0;
+    const samples = new Int16Array(buffer, 0, sampleCount);
+    let sum = 0;
+    for (let index = 0; index < samples.length; index++) {
+        const sample = samples[index] ?? 0;
+        sum += sample * sample;
+    }
+    return Math.min(1, Math.sqrt(sum / sampleCount) / 32_768);
+}
+/**
+ * System-audio capture state machine behind `SystemAudioMonitor`. macOS PCM
+ * capture (Int16 LE frames over the native bridge), not a `MediaStream` — the
+ * level is a running RMS computed from incoming frames.
+ */
+export function useMoldableSystemAudio(options = {}) {
+    const [status, setStatus] = useState('idle');
+    const [level, setLevel] = useState(0);
+    const [mode, setMode] = useState(null);
+    const [framesReceived, setFramesReceived] = useState(0);
+    const [error, setError] = useState(null);
+    const [active, setActive] = useState(false);
+    const tokenRef = useRef(0);
+    const controllerRef = useRef(null);
+    const sessionActiveRef = useRef(false);
+    const levelRef = useRef(0);
+    const framesRef = useRef(0);
+    const onEventRef = useRef(options.onEvent);
+    useEffect(() => {
+        onEventRef.current = options.onEvent;
+    }, [options.onEvent]);
+    const releaseSession = useCallback((controller) => {
+        if (controller && controllerRef.current !== controller)
+            return;
+        controllerRef.current?.abort();
+        controllerRef.current = null;
+        sessionActiveRef.current = false;
+        setActive(false);
+        levelRef.current = 0;
+        setLevel(0);
+    }, []);
+    const closeActiveSession = useCallback(async () => {
+        if (!sessionActiveRef.current) {
+            releaseSession();
+            return;
+        }
+        const stopped = await stopMoldableSystemAudioCapture();
+        if (!stopped && sessionActiveRef.current) {
+            throw new Error('System audio capture did not stop.');
+        }
+        releaseSession();
+    }, [releaseSession]);
+    const stop = useCallback(async () => {
+        const token = ++tokenRef.current;
+        setStatus('stopping');
+        setError(null);
+        try {
+            await closeActiveSession();
+            if (tokenRef.current !== token)
+                return;
+            setStatus('idle');
+        }
+        catch (cause) {
+            if (tokenRef.current !== token)
+                return;
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            // Keep the session and subscription intact so Stop can be retried.
+            setStatus('error');
+        }
+    }, [closeActiveSession]);
+    const start = useCallback(async (nextMode) => {
+        const token = ++tokenRef.current;
+        setError(null);
+        if (sessionActiveRef.current) {
+            setStatus('stopping');
+            try {
+                await closeActiveSession();
+            }
+            catch (cause) {
+                if (tokenRef.current !== token)
+                    return;
+                setError(cause instanceof Error ? cause : new Error(String(cause)));
+                setStatus('error');
+                return;
+            }
+        }
+        if (tokenRef.current !== token)
+            return;
+        setStatus('starting');
+        setMode(nextMode);
+        setLevel(0);
+        setFramesReceived(0);
+        framesRef.current = 0;
+        const controller = new AbortController();
+        controllerRef.current = controller;
+        let endedBeforeStartSettled = false;
+        const drop = () => {
+            endedBeforeStartSettled = true;
+            releaseSession(controller);
+        };
+        try {
+            // Subscribe before starting so the first lifecycle event is
+            // observable, per the native-hardware contract.
+            subscribeMoldableSystemAudioEvents((event) => {
+                if (controllerRef.current !== controller)
+                    return;
+                onEventRef.current?.(event);
+                if (event.kind === 'data') {
+                    framesRef.current++;
+                    setFramesReceived(framesRef.current);
+                    const rms = computeRmsLevel(event.data);
+                    const smoothed = rms >= levelRef.current
+                        ? rms
+                        : levelRef.current * 0.7 + rms * 0.3;
+                    levelRef.current = smoothed;
+                    setLevel(smoothed);
+                }
+                else if (event.kind === 'started') {
+                    sessionActiveRef.current = true;
+                    setActive(true);
+                    setStatus('capturing');
+                }
+                else if (event.kind === 'stopped') {
+                    drop();
+                    setStatus('idle');
+                }
+                else {
+                    setError(new Error(event.message ?? 'System audio capture failed.'));
+                    if (!event.recoverable) {
+                        setStatus('error');
+                    }
+                }
+            }, { signal: controller.signal });
+            await startMoldableSystemAudioCapture({
+                captureMode: nextMode,
+                sampleRate: SYSTEM_AUDIO_SAMPLE_RATE,
+                channels: 1,
+                signal: controller.signal,
+            });
+            if (tokenRef.current !== token) {
+                if (!endedBeforeStartSettled) {
+                    void stopMoldableSystemAudioCapture().catch(() => {
+                        // A superseded pending start can only be closed best-effort.
+                    });
+                }
+                return;
+            }
+            if (endedBeforeStartSettled)
+                return;
+            sessionActiveRef.current = true;
+            setActive(true);
+            setStatus('capturing');
+        }
+        catch (cause) {
+            releaseSession(controller);
+            if (tokenRef.current !== token)
+                return;
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            setStatus('error');
+        }
+    }, [closeActiveSession, releaseSession]);
+    useEffect(() => () => {
+        tokenRef.current++;
+        const wasActive = sessionActiveRef.current;
+        controllerRef.current?.abort();
+        controllerRef.current = null;
+        sessionActiveRef.current = false;
+        if (wasActive) {
+            void stopMoldableSystemAudioCapture().catch(() => {
+                // Unmount has no remaining UI in which to retry a failed stop.
+            });
+        }
+    }, []);
+    return { status, level, mode, framesReceived, error, active, start, stop };
+}
+const MODE_LABEL = {
+    systemAudio: 'System audio',
+    systemMicrophone: 'System + mic',
+};
+/**
+ * System-audio panel: capture-mode picker, RMS level meter with peak hold,
+ * and a lifecycle event log. macOS-only; other platforms get the standard
+ * unsupported state.
+ */
+function SystemAudioMonitor({ className, defaultMode = 'systemAudio', ...props }) {
+    const log = useStreamLog(200);
+    const { append } = log;
+    const frameLogRef = useRef(0);
+    const handleEvent = useCallback((event) => {
+        if (event.kind === 'started') {
+            append({
+                direction: 'info',
+                data: event.sessionId
+                    ? `Capture started · session ${event.sessionId}`
+                    : 'Capture started',
+            });
+        }
+        else if (event.kind === 'stopped') {
+            append({
+                direction: 'info',
+                data: event.reason
+                    ? `Capture stopped · ${event.reason}`
+                    : 'Capture stopped',
+            });
+        }
+        else if (event.kind === 'data') {
+            // Frames arrive continuously; log a summary line instead of each one.
+            frameLogRef.current++;
+            if (frameLogRef.current % FRAME_LOG_INTERVAL === 0) {
+                append({
+                    direction: 'in',
+                    data: `${frameLogRef.current.toLocaleString()} frames · ${(event.sampleRate ?? SYSTEM_AUDIO_SAMPLE_RATE).toLocaleString()} Hz · ${event.channels ?? 1} ch`,
+                });
+            }
+        }
+    }, [append]);
+    const audio = useMoldableSystemAudio({ onEvent: handleEvent });
+    const capability = useMoldableCapability('system-audio');
+    const [selectedMode, setSelectedMode] = useState(defaultMode);
+    const [peak, setPeak] = useState(0);
+    const { error } = audio;
+    useEffect(() => {
+        if (error)
+            append({ direction: 'error', data: error.message });
+    }, [error, append]);
+    const capturing = audio.active;
+    const starting = audio.status === 'starting';
+    const stopping = audio.status === 'stopping';
+    const { level } = audio;
+    useEffect(() => {
+        if (!capturing) {
+            setPeak(0);
+            return;
+        }
+        setPeak((previous) => level >= previous ? level : Math.max(level, previous - 0.008));
+    }, [capturing, level]);
+    const unsupported = capability.status === 'unsupported' || capability.status === 'unavailable';
+    return (_jsxs(HardwarePanel, { "data-slot": "system-audio-monitor", "data-status": audio.status, className: className, ...props, children: [_jsxs(HardwarePanelHeader, { children: [_jsx(HardwarePanelIcon, { children: _jsx(Volume2, {}) }), _jsx(HardwarePanelTitle, { children: "System Audio" }), _jsx(CapabilityBadge, { capability: "system-audio" }), !unsupported ? (_jsxs(HardwarePanelAction, { children: [_jsxs(Select, { value: selectedMode, onValueChange: (value) => setSelectedMode(value === 'systemMicrophone'
+                                    ? 'systemMicrophone'
+                                    : 'systemAudio'), disabled: starting || stopping || capturing, children: [_jsx(SelectTrigger, { size: "sm", className: "text-xs", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "systemAudio", children: MODE_LABEL.systemAudio }), _jsx(SelectItem, { value: "systemMicrophone", children: MODE_LABEL.systemMicrophone })] })] }), _jsxs(Button, { size: "sm", variant: capturing ? 'outline' : 'default', disabled: starting || stopping, onClick: () => {
+                                    if (capturing) {
+                                        void audio.stop();
+                                    }
+                                    else {
+                                        frameLogRef.current = 0;
+                                        void audio.start(selectedMode);
+                                    }
+                                }, children: [starting || stopping ? (_jsx(Spinner, {})) : capturing ? (_jsx(Square, { className: "fill-current" })) : (_jsx(Play, { className: "fill-current" })), starting
+                                        ? 'Starting…'
+                                        : stopping
+                                            ? 'Stopping…'
+                                            : capturing
+                                                ? 'Stop'
+                                                : 'Start'] })] })) : null] }), _jsx(HardwarePanelContent, { className: "space-y-3", children: unsupported ? (_jsxs("div", { className: "animate-in fade-in flex flex-col items-center gap-3 py-6 text-center duration-300 motion-reduce:animate-none", 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: _jsx(VolumeX, {}) }), _jsx("p", { className: "text-sm font-medium", children: "System audio unavailable" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: capability.status === 'unavailable'
+                                ? 'System audio capture is only available inside Moldable.'
+                                : 'System audio capture requires Moldable on macOS.' })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "bg-muted relative h-2 flex-1 overflow-hidden rounded-full", children: [_jsx("div", { className: "bg-primary absolute inset-y-0 left-0 rounded-full transition-[width] duration-100 ease-out motion-reduce:transition-none", style: { width: `${Math.min(1, level) * 100}%` } }), peak > 0 ? (_jsx("div", { className: "bg-primary/70 absolute inset-y-0 w-0.5 rounded-full transition-[left] duration-150 ease-out motion-reduce:transition-none", style: { left: `calc(${Math.min(1, peak) * 100}% - 2px)` } })) : null] }), capturing ? _jsx(LiveIndicator, { label: "Capturing" }) : null] }), audio.status === 'error' ? (_jsx("p", { className: "text-status-error text-xs", children: audio.error?.message ?? 'System audio capture failed.' })) : null, _jsx(StreamLog, { entries: log.entries, maxHeight: 180, emptyLabel: "No capture events yet" })] })) }), _jsxs(HardwarePanelFooter, { children: [_jsx("span", { className: "truncate", children: audio.mode ? MODE_LABEL[audio.mode] : 'No capture yet' }), _jsxs("span", { className: "ml-auto shrink-0 font-mono tabular-nums", children: [SYSTEM_AUDIO_SAMPLE_RATE.toLocaleString(), " Hz"] }), _jsxs("span", { className: "shrink-0 font-mono tabular-nums", children: [audio.framesReceived.toLocaleString(), " frames"] })] })] }));
+}
+export { SystemAudioMonitor };

package/dist/components/hardware/usb-panel.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { type MoldableUsbControlTransferParameters, type MoldableUsbDevice, type MoldableUsbDeviceFilter, type MoldableUsbOpenOptions, type MoldableUsbRequestOptions } from '../../lib/native-hardware';
+export type MoldableUsbStatus = 'idle' | 'loading' | 'requesting' | 'error';
+export interface UseMoldableUsbOptions {
+    /** Device filters used when `request` does not override them. */
+    filters?: readonly MoldableUsbDeviceFilter[];
+    /** Overrides the built-in explicit picker for multiple native matches. */
+    selectNativeDevice?: MoldableUsbRequestOptions['selectNativeDevice'];
+    /** Configuration and interfaces to claim when opening a device. */
+    openOptions?: MoldableUsbOpenOptions;
+    onDeviceOpen?: (device: MoldableUsbDevice) => void;
+}
+/**
+ * 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 declare function useMoldableUsb(options?: UseMoldableUsbOptions): {
+    devices: MoldableUsbDevice[];
+    status: MoldableUsbStatus;
+    error: Error | null;
+    openDeviceIds: string[];
+    nativeDeviceChoices: readonly MoldableUsbDevice[];
+    deviceId: (device: MoldableUsbDevice) => string;
+    refresh: () => Promise<void>;
+    request: (filters?: readonly MoldableUsbDeviceFilter[]) => Promise<MoldableUsbDevice | undefined>;
+    selectNativeDevice: (device: MoldableUsbDevice) => void;
+    cancelNativeSelection: () => void;
+    open: (device: MoldableUsbDevice) => Promise<void>;
+    close: (device: MoldableUsbDevice) => Promise<boolean>;
+    forget: (device: MoldableUsbDevice) => Promise<boolean>;
+    readEndpoint: (device: MoldableUsbDevice, endpoint: number, length: number) => Promise<import("../..").MoldableUsbInTransferResult>;
+    writeEndpoint: (device: MoldableUsbDevice, endpoint: number, data: BufferSource) => Promise<import("../..").MoldableUsbOutTransferResult>;
+    readControl: (device: MoldableUsbDevice, setup: MoldableUsbControlTransferParameters, length: number) => Promise<import("../..").MoldableUsbInTransferResult>;
+    writeControl: (device: MoldableUsbDevice, setup: MoldableUsbControlTransferParameters, data?: BufferSource) => Promise<import("../..").MoldableUsbOutTransferResult>;
+    clearHalt: (device: MoldableUsbDevice, direction: "in" | "out", endpoint: number) => Promise<void>;
+    reset: (device: MoldableUsbDevice) => Promise<void>;
+};
+export interface UsbDevicePanelProps extends React.ComponentProps<'div'> {
+    /** Device filters for the chooser (WebUSB requires at least one to narrow). */
+    filters?: readonly MoldableUsbDeviceFilter[];
+    /** Overrides the built-in explicit picker for multiple native matches. */
+    selectNativeDevice?: MoldableUsbRequestOptions['selectNativeDevice'];
+    /** Configuration and interfaces to claim when opening a device. */
+    openOptions?: MoldableUsbOpenOptions;
+    onDeviceOpen?: (device: MoldableUsbDevice) => void;
+}
+/**
+ * USB device panel: request access, list granted devices, open/close each
+ * with minimal claims, and read out live device details while open.
+ */
+declare function UsbDevicePanel({ className, filters, selectNativeDevice, openOptions, onDeviceOpen, ...props }: UsbDevicePanelProps): import("react/jsx-runtime").JSX.Element;
+export { UsbDevicePanel };
+//# sourceMappingURL=usb-panel.d.ts.map

package/dist/components/hardware/usb-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usb-panel.d.ts","sourceRoot":"","sources":["../../../src/components/hardware/usb-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,oCAAoC,EACzC,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAa/B,MAAM,2BAA2B,CAAA;AA6BlC,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,CAAA;AAmB3E,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,uBAAuB,EAAE,CAAA;IAC5C,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,CAAA;IACpE,mEAAmE;IACnE,WAAW,CAAC,EAAE,sBAAsB,CAAA;IACpC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAA;CACnD;AAcD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAE,qBAA0B;;;;;;uBAkB1B,iBAAiB,KAAG,MAAM;;wBA4F7C,SAAS,uBAAuB,EAAE;iCAvBL,iBAAiB;;mBAyDhD,iBAAiB;oBAoCjB,iBAAiB;qBA6CjB,iBAAiB;2BA+DtB,iBAAiB,YACf,MAAM,UACR,MAAM;4BAGN,iBAAiB,YACf,MAAM,QACV,YAAY;0BAGV,iBAAiB,SAClB,oCAAoC,UACnC,MAAM;2BAIN,iBAAiB,SAClB,oCAAoC,SACpC,YAAY;wBAIX,iBAAiB,aACd,IAAI,GAAG,KAAK,YACb,MAAM;oBAEF,iBAAiB;EAGpC;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACtE,+EAA+E;IAC/E,OAAO,CAAC,EAAE,SAAS,uBAAuB,EAAE,CAAA;IAC5C,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,CAAA;IACpE,mEAAmE;IACnE,WAAW,CAAC,EAAE,sBAAsB,CAAA;IACpC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAA;CACnD;AAqPD;;;GAGG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,OAAO,EACP,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAmLrB;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}