@moldable-ai/ui 0.2.19 → 0.2.21

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

@@ -0,0 +1 @@
+{"version":3,"file":"location-panel.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/location-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,kCAAkC,EACvC,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAK5B,MAAM,+BAA+B,CAAA;AAetC,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,UAAU,GACV,SAAS,GACT,QAAQ,GACR,OAAO,CAAA;AAEX;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,uBAA4B;;;;;;EAyDxE;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAIpE;AAMD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACrE,iEAAiE;IACjE,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACxD;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,UAAkB,EAClB,UAAU,EACV,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAwMpB;AAED,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA"}

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

@@ -0,0 +1,146 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, Copy, LocateFixed, MapPin } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { NativeCapabilityBridgeError, getMoldableCurrentPosition, getMoldableLocationAuthorizationStatus, writeMoldableClipboardText, } from '../../lib/native-capabilities';
+import { Button } from '../ui/button';
+import { Spinner } from '../ui/spinner';
+import { CapabilityBadge } from './capability-badge';
+import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelFooter, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel';
+import { Readout, ReadoutItem } from './readout';
+/**
+ * One-shot location state machine behind `LocationPanel`. Use directly to
+ * build custom location UI on the same authorization/error handling.
+ */
+export function useMoldableLocation(options = {}) {
+    const [status, setStatus] = useState('idle');
+    const [position, setPosition] = useState(null);
+    const [authorization, setAuthorization] = useState(null);
+    const [error, setError] = useState(null);
+    const optionsRef = useRef(options);
+    const tokenRef = useRef(0);
+    useEffect(() => {
+        optionsRef.current = options;
+    }, [options]);
+    const locate = useCallback(async () => {
+        const token = ++tokenRef.current;
+        setStatus('locating');
+        setPosition(null);
+        setAuthorization(null);
+        setError(null);
+        void getMoldableLocationAuthorizationStatus()
+            .then((state) => {
+            if (tokenRef.current === token)
+                setAuthorization(state);
+        })
+            .catch(() => {
+            // Authorization detail is best-effort outside Moldable.
+        });
+        try {
+            const result = await getMoldableCurrentPosition({
+                enableHighAccuracy: true,
+                timeout: 10_000,
+                ...optionsRef.current,
+            });
+            if (tokenRef.current !== token)
+                return;
+            setPosition(result);
+            setStatus('success');
+            return result;
+        }
+        catch (cause) {
+            if (tokenRef.current !== token)
+                return null;
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            setStatus(cause instanceof NativeCapabilityBridgeError &&
+                cause.code === 'permission_denied'
+                ? 'denied'
+                : 'error');
+            return null;
+        }
+    }, []);
+    useEffect(() => () => {
+        tokenRef.current++;
+    }, []);
+    return { status, position, authorization, error, locate };
+}
+function formatCoordinate(value, axis) {
+    const hemisphere = axis === 'lat' ? (value >= 0 ? 'N' : 'S') : value >= 0 ? 'E' : 'W';
+    return `${Math.abs(value).toFixed(5)}° ${hemisphere}`;
+}
+function formatClock(timestamp) {
+    return new Date(timestamp).toLocaleTimeString(undefined, { hour12: false });
+}
+/**
+ * Current-position panel: authorization state, one-shot fix, mono coordinate
+ * readout with copy, accuracy/altitude/speed details.
+ */
+function LocationPanel({ className, options, autoLocate = false, onLocation, ...props }) {
+    const location = useMoldableLocation(options);
+    const [copied, setCopied] = useState(false);
+    const [copyError, setCopyError] = useState(null);
+    const autoLocatedRef = useRef(false);
+    const copyTokenRef = useRef(0);
+    const copyTimeoutRef = useRef(null);
+    const { locate } = location;
+    const runLocate = useCallback(async () => {
+        const result = await locate();
+        if (result)
+            onLocation?.(result);
+    }, [locate, onLocation]);
+    useEffect(() => {
+        if (autoLocate && !autoLocatedRef.current) {
+            autoLocatedRef.current = true;
+            void runLocate();
+        }
+    }, [autoLocate, runLocate]);
+    const { position } = location;
+    useEffect(() => () => {
+        copyTokenRef.current++;
+        if (copyTimeoutRef.current !== null) {
+            window.clearTimeout(copyTimeoutRef.current);
+        }
+    }, []);
+    const copyCoordinates = async () => {
+        if (!position)
+            return;
+        const token = ++copyTokenRef.current;
+        const text = `${position.coords.latitude}, ${position.coords.longitude}`;
+        setCopied(false);
+        setCopyError(null);
+        try {
+            await writeMoldableClipboardText(text);
+        }
+        catch (cause) {
+            if (copyTokenRef.current !== token)
+                return;
+            setCopyError(cause instanceof Error
+                ? cause
+                : new Error('Could not copy coordinates.'));
+            return;
+        }
+        if (copyTokenRef.current !== token)
+            return;
+        setCopied(true);
+        if (copyTimeoutRef.current !== null) {
+            window.clearTimeout(copyTimeoutRef.current);
+        }
+        copyTimeoutRef.current = window.setTimeout(() => {
+            setCopied(false);
+            copyTimeoutRef.current = null;
+        }, 1500);
+    };
+    const locating = location.status === 'locating';
+    return (_jsxs(NativeCapabilityPanel, { "data-slot": "location-panel", "data-status": location.status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(MapPin, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "Location" }), _jsx(CapabilityBadge, { capability: "location" }), _jsx(NativeCapabilityPanelAction, { children: _jsxs(Button, { size: "sm", variant: position ? 'outline' : 'default', disabled: locating, onClick: () => void runLocate(), children: [locating ? _jsx(Spinner, {}) : _jsx(LocateFixed, {}), locating ? 'Locating…' : position ? 'Update' : 'Locate'] }) })] }), _jsx(NativeCapabilityPanelContent, { children: position ? (_jsxs("div", { className: "animate-in fade-in space-y-4 duration-300 motion-reduce:animate-none", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "font-mono text-xl font-medium tabular-nums tracking-tight sm:text-2xl", children: [formatCoordinate(position.coords.latitude, 'lat'), _jsx("span", { className: "text-muted-foreground/50 mx-2", children: "\u00B7" }), formatCoordinate(position.coords.longitude, 'lng')] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": copied
+                                        ? 'Coordinates copied'
+                                        : copyError
+                                            ? 'Copy coordinates failed; try again'
+                                            : 'Copy coordinates', "data-copy-status": copied ? 'success' : copyError ? 'error' : 'idle', title: copyError?.message, onClick: () => void copyCoordinates(), children: copied ? _jsx(Check, { className: "text-success" }) : _jsx(Copy, {}) })] }), _jsxs(Readout, { children: [_jsx(ReadoutItem, { label: "Accuracy", value: `± ${Math.round(position.coords.accuracy)}`, unit: "m" }), _jsx(ReadoutItem, { label: "Altitude", value: position.coords.altitude === null
+                                        ? null
+                                        : Math.round(position.coords.altitude), unit: "m" }), _jsx(ReadoutItem, { label: "Speed", value: position.coords.speed === null
+                                        ? null
+                                        : position.coords.speed.toFixed(1), unit: "m/s" })] })] })) : (_jsx("div", { className: "flex flex-col items-center gap-3 py-6 text-center", children: locating ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative flex size-10 items-center justify-center", children: [_jsx("span", { className: "border-primary/30 absolute inline-flex size-10 animate-ping rounded-full border motion-reduce:animate-none" }), _jsx("span", { className: "text-muted-foreground bg-background shadow-xs relative flex size-10 items-center justify-center rounded-full border [&_svg]:size-4", children: _jsx(LocateFixed, {}) })] }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Getting your position\u2026" })] })) : location.status === 'denied' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Location access denied" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: "Enable Location Services for Moldable in System Settings, then try again." })] })) : location.status === 'error' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Couldn't get a fix" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: location.error?.message ?? 'Location request failed.' })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground bg-background shadow-xs flex size-10 items-center justify-center rounded-lg border [&_svg]:size-5", children: _jsx(MapPin, {}) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "No position yet" })] })) })) }), _jsxs(NativeCapabilityPanelFooter, { children: [_jsx("span", { className: "truncate", children: location.authorization
+                            ? `Authorization ${location.authorization.authorization}${location.authorization.servicesEnabled ? '' : ' · services off'}`
+                            : 'Authorization unknown' }), position ? (_jsx("span", { className: "ml-auto shrink-0 font-mono tabular-nums", children: formatClock(position.timestamp) })) : null] })] }));
+}
+export { LocationPanel, formatCoordinate };

package/dist/components/native-capabilities/microphone-meter.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export type MoldableMicrophoneStatus = 'idle' | 'starting' | 'live' | 'muted' | 'denied' | 'error';
+export interface UseMoldableMicrophoneOptions {
+    /** Extra audio constraints merged over the processing defaults. */
+    constraints?: MediaTrackConstraints;
+    onStreamChange?: (stream: MediaStream | null) => void;
+}
+/**
+ * Microphone state machine behind `MicrophoneMeter`. Use directly to build
+ * custom audio UI on the same permission/device/stream handling.
+ */
+export declare function useMoldableMicrophone(options?: UseMoldableMicrophoneOptions): {
+    status: MoldableMicrophoneStatus;
+    stream: MediaStream | null;
+    devices: MediaDeviceInfo[];
+    deviceId: string | null;
+    error: Error | null;
+    start: (nextDeviceId?: string) => Promise<void>;
+    stop: () => void;
+    selectDevice: (id: string) => void;
+    refreshDevices: () => Promise<void>;
+};
+export interface MicrophoneMeterProps extends React.ComponentProps<'div'> {
+    constraints?: MediaTrackConstraints;
+    /** Start the microphone on mount. */
+    autoStart?: boolean;
+    onStreamChange?: (stream: MediaStream | null) => void;
+}
+/**
+ * Microphone panel: permission flow, device switching, and a live frequency
+ * visualizer driven by an `AnalyserNode` without re-rendering per frame.
+ */
+declare function MicrophoneMeter({ className, constraints, autoStart, onStreamChange, ...props }: MicrophoneMeterProps): import("react/jsx-runtime").JSX.Element;
+export { MicrophoneMeter };
+//# sourceMappingURL=microphone-meter.d.ts.map

package/dist/components/native-capabilities/microphone-meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"microphone-meter.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/microphone-meter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA+B9B,MAAM,MAAM,wBAAwB,GAChC,MAAM,GACN,UAAU,GACV,MAAM,GACN,OAAO,GACP,QAAQ,GACR,OAAO,CAAA;AAEX,MAAM,WAAW,4BAA4B;IAC3C,mEAAmE;IACnE,WAAW,CAAC,EAAE,qBAAqB,CAAA;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CACtD;AAuBD;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,GAAE,4BAAiC;;;;;;2BAgDlB,MAAM;;uBA4EvB,MAAM;;EA2Bd;AAKD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACvE,WAAW,CAAC,EAAE,qBAAqB,CAAA;IACnC,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CACtD;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,WAAW,EACX,SAAiB,EACjB,cAAc,EACd,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAiNtB;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/native-capabilities/microphone-meter.js

@@ -0,0 +1,244 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Mic, MicOff, RefreshCw, Square } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { NativeCapabilityBridgeError, enumerateMoldableMediaDevices, getMoldableMediaPermissionStatus, getMoldableMicrophoneStream, requestMoldableMediaPermission, stopMoldableMediaStream, } from '../../lib/native-capabilities';
+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 { LiveIndicator } from './live-indicator';
+import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelFooter, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel';
+function isPermissionDenied(error) {
+    if (error instanceof NativeCapabilityBridgeError) {
+        return error.code === 'permission_denied';
+    }
+    return (error instanceof DOMException &&
+        (error.name === 'NotAllowedError' || error.name === 'SecurityError'));
+}
+function assertMediaPermissionGranted(status) {
+    if (status.status !== 'denied' && status.status !== 'restricted')
+        return;
+    throw new NativeCapabilityBridgeError({
+        code: 'permission_denied',
+        message: status.detail ?? 'Microphone access was denied.',
+        retryable: false,
+    });
+}
+/**
+ * Microphone state machine behind `MicrophoneMeter`. Use directly to build
+ * custom audio UI on the same permission/device/stream handling.
+ */
+export function useMoldableMicrophone(options = {}) {
+    const [status, setStatus] = useState('idle');
+    const [stream, setStream] = useState(null);
+    const [devices, setDevices] = useState([]);
+    const [deviceId, setDeviceIdState] = useState(null);
+    const [error, setError] = useState(null);
+    const streamRef = useRef(null);
+    const deviceIdRef = useRef(null);
+    const tokenRef = useRef(0);
+    const constraintsRef = useRef(options.constraints);
+    const onStreamChangeRef = useRef(options.onStreamChange);
+    const detachTrackListenersRef = useRef(null);
+    useEffect(() => {
+        constraintsRef.current = options.constraints;
+        onStreamChangeRef.current = options.onStreamChange;
+    }, [options.constraints, options.onStreamChange]);
+    const dropStream = useCallback((updateState = true) => {
+        detachTrackListenersRef.current?.();
+        detachTrackListenersRef.current = null;
+        const previousStream = streamRef.current;
+        if (!previousStream)
+            return false;
+        streamRef.current = null;
+        stopMoldableMediaStream(previousStream);
+        if (updateState)
+            setStream(null);
+        onStreamChangeRef.current?.(null);
+        return true;
+    }, []);
+    const stop = useCallback(() => {
+        tokenRef.current++;
+        dropStream();
+        setStatus('idle');
+    }, [dropStream]);
+    const refreshDevices = useCallback(async () => {
+        try {
+            const all = await enumerateMoldableMediaDevices('microphone');
+            setDevices(all.filter((device) => device.kind === 'audioinput'));
+        }
+        catch {
+            // Device labels are best-effort; enumeration can fail outside Moldable.
+        }
+    }, []);
+    const start = useCallback(async (nextDeviceId) => {
+        const token = ++tokenRef.current;
+        dropStream();
+        setStatus('starting');
+        setError(null);
+        try {
+            // Nudge the native permission first so macOS prompts before the
+            // webview does. Outside Moldable this fails and the browser prompt
+            // covers it on getUserMedia.
+            try {
+                const permission = await getMoldableMediaPermissionStatus('microphone');
+                assertMediaPermissionGranted(permission);
+                if (permission.status === 'not-determined' && permission.canRequest) {
+                    assertMediaPermissionGranted(await requestMoldableMediaPermission('microphone'));
+                }
+            }
+            catch (cause) {
+                if (isPermissionDenied(cause))
+                    throw cause;
+                // Not in Moldable — proceed straight to the stream request.
+            }
+            if (tokenRef.current !== token)
+                return;
+            const target = nextDeviceId ?? deviceIdRef.current;
+            const media = await getMoldableMicrophoneStream({
+                echoCancellation: true,
+                noiseSuppression: true,
+                ...constraintsRef.current,
+                ...(target ? { deviceId: { exact: target } } : {}),
+            });
+            if (tokenRef.current !== token) {
+                stopMoldableMediaStream(media);
+                return;
+            }
+            streamRef.current = media;
+            const [track] = media.getAudioTracks();
+            if (track) {
+                const handleEnded = () => {
+                    if (tokenRef.current !== token)
+                        return;
+                    tokenRef.current++;
+                    dropStream();
+                    setStatus('idle');
+                };
+                const handleMute = () => {
+                    if (tokenRef.current === token)
+                        setStatus('muted');
+                };
+                const handleUnmute = () => {
+                    if (tokenRef.current === token)
+                        setStatus('live');
+                };
+                track.addEventListener('ended', handleEnded, { once: true });
+                track.addEventListener('mute', handleMute);
+                track.addEventListener('unmute', handleUnmute);
+                detachTrackListenersRef.current = () => {
+                    track.removeEventListener('ended', handleEnded);
+                    track.removeEventListener('mute', handleMute);
+                    track.removeEventListener('unmute', handleUnmute);
+                };
+            }
+            setStream(media);
+            if (nextDeviceId !== undefined) {
+                deviceIdRef.current = nextDeviceId;
+                setDeviceIdState(nextDeviceId);
+            }
+            setStatus('live');
+            onStreamChangeRef.current?.(media);
+            void refreshDevices();
+        }
+        catch (cause) {
+            if (tokenRef.current !== token)
+                return;
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            setStatus(isPermissionDenied(cause) ? 'denied' : 'error');
+        }
+    }, [dropStream, refreshDevices]);
+    const selectDevice = useCallback((id) => {
+        deviceIdRef.current = id;
+        setDeviceIdState(id);
+        if (streamRef.current)
+            void start(id);
+    }, [start]);
+    useEffect(() => () => {
+        tokenRef.current++;
+        dropStream(false);
+    }, [dropStream]);
+    return {
+        status,
+        stream,
+        devices,
+        deviceId,
+        error,
+        start,
+        stop,
+        selectDevice,
+        refreshDevices,
+    };
+}
+const BAR_COUNT = 56;
+const BAR_REST_SCALE = 0.06;
+/**
+ * Microphone panel: permission flow, device switching, and a live frequency
+ * visualizer driven by an `AnalyserNode` without re-rendering per frame.
+ */
+function MicrophoneMeter({ className, constraints, autoStart = false, onStreamChange, ...props }) {
+    const microphone = useMoldableMicrophone({ constraints, onStreamChange });
+    const barsRef = useRef([]);
+    const autoStartedRef = useRef(false);
+    useEffect(() => {
+        if (autoStart && !autoStartedRef.current) {
+            autoStartedRef.current = true;
+            void microphone.start();
+        }
+    }, [autoStart, microphone]);
+    const { stream } = microphone;
+    useEffect(() => {
+        if (!stream || typeof AudioContext === 'undefined')
+            return;
+        const bars = barsRef.current;
+        const context = new AudioContext();
+        const analyser = context.createAnalyser();
+        analyser.fftSize = 256;
+        analyser.smoothingTimeConstant = 0.7;
+        const source = context.createMediaStreamSource(stream);
+        source.connect(analyser);
+        const bins = new Uint8Array(analyser.frequencyBinCount);
+        const step = analyser.frequencyBinCount / BAR_COUNT;
+        let frame = 0;
+        const draw = () => {
+            analyser.getByteFrequencyData(bins);
+            for (let index = 0; index < BAR_COUNT; index++) {
+                const bar = bars[index];
+                if (!bar)
+                    continue;
+                const value = bins[Math.floor(index * step)] ?? 0;
+                const scale = Math.max(BAR_REST_SCALE, value / 255);
+                bar.style.transform = `scaleY(${scale.toFixed(3)})`;
+            }
+            frame = requestAnimationFrame(draw);
+        };
+        frame = requestAnimationFrame(draw);
+        return () => {
+            cancelAnimationFrame(frame);
+            source.disconnect();
+            void context.close().catch(() => {
+                // The context may already be closed by the browser.
+            });
+            for (const bar of bars) {
+                if (bar)
+                    bar.style.transform = `scaleY(${BAR_REST_SCALE})`;
+            }
+        };
+    }, [stream]);
+    const live = microphone.status === 'live' || microphone.status === 'muted';
+    const starting = microphone.status === 'starting';
+    const settings = live ? stream?.getAudioTracks()[0]?.getSettings() : undefined;
+    return (_jsxs(NativeCapabilityPanel, { "data-slot": "microphone-meter", "data-status": microphone.status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(Mic, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "Microphone" }), _jsx(CapabilityBadge, { capability: "microphone" }), _jsx(NativeCapabilityPanelAction, { children: _jsxs(Button, { size: "sm", variant: live ? 'outline' : 'default', disabled: starting, onClick: () => {
+                                if (live)
+                                    microphone.stop();
+                                else
+                                    void microphone.start();
+                            }, children: [starting ? (_jsx(Spinner, {})) : live ? (_jsx(Square, { className: "fill-current" })) : (_jsx(Mic, {})), starting ? 'Starting…' : live ? 'Stop' : 'Start'] }) })] }), _jsx(NativeCapabilityPanelContent, { children: live ? (_jsxs("div", { className: "animate-in fade-in space-y-3 duration-300 motion-reduce:animate-none", children: [_jsxs("div", { className: "bg-muted/30 relative overflow-hidden rounded-lg border p-3", children: [_jsx("div", { className: "absolute left-2.5 top-2.5 z-10", children: _jsx(LiveIndicator, { label: microphone.status === 'muted' ? 'Muted' : undefined }) }), _jsx("div", { "aria-hidden": true, className: "flex h-24 items-stretch gap-[3px]", children: Array.from({ length: BAR_COUNT }, (_, index) => (_jsxs("div", { className: "relative min-w-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "bg-muted-foreground/15 absolute inset-0" }), _jsx("div", { ref: (node) => {
+                                                    barsRef.current[index] = node;
+                                                }, className: "bg-primary absolute inset-0 origin-bottom transition-transform duration-75 ease-out motion-reduce:transition-none", style: { transform: `scaleY(${BAR_REST_SCALE})` } })] }, index))) })] }), microphone.devices.length > 1 ? (_jsxs(Select, { value: microphone.deviceId ?? undefined, onValueChange: microphone.selectDevice, children: [_jsx(SelectTrigger, { size: "sm", className: "w-full", children: _jsx(SelectValue, { placeholder: "Microphone" }) }), _jsx(SelectContent, { children: microphone.devices.map((device, index) => (_jsx(SelectItem, { value: device.deviceId, children: device.label || `Microphone ${index + 1}` }, device.deviceId))) })] })) : null] })) : (_jsx("div", { className: "animate-in fade-in flex flex-col items-center justify-center gap-3 py-6 text-center duration-300 motion-reduce:animate-none", children: starting ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { className: "text-muted-foreground" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Starting microphone\u2026" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground bg-background shadow-xs flex size-10 items-center justify-center rounded-lg border [&_svg]:size-5", children: microphone.status === 'idle' ? _jsx(Mic, {}) : _jsx(MicOff, {}) }), microphone.status === 'idle' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: "Microphone is off" }), _jsxs(Button, { size: "sm", onClick: () => void microphone.start(), children: [_jsx(Mic, {}), " Start microphone"] })] })) : microphone.status === 'denied' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Microphone access denied" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: "Enable microphone access for Moldable in System Settings, then try again." }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void microphone.start(), children: [_jsx(RefreshCw, {}), " Try again"] })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Microphone unavailable" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: microphone.error?.message ??
+                                            'The microphone could not be started.' }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void microphone.start(), children: [_jsx(RefreshCw, {}), " Try again"] })] }))] })) })) }), _jsxs(NativeCapabilityPanelFooter, { children: [_jsx("span", { className: "font-mono tabular-nums", children: settings?.sampleRate
+                            ? `${settings.sampleRate.toLocaleString()} Hz`
+                            : '— Hz' }), _jsx("span", { className: "ml-auto shrink-0 font-mono tabular-nums", children: settings?.channelCount ? `${settings.channelCount} ch` : '— ch' })] })] }));
+}
+export { MicrophoneMeter };

package/dist/components/native-capabilities/midi-monitor.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { type MoldableMIDITransport } from '../../lib/native-capabilities';
+export type MoldableMidiStatus = 'idle' | 'connecting' | 'connected' | 'error';
+/**
+ * Human-readable summary of a raw MIDI message: note on/off with pitch name,
+ * control change, program change, and pitch bend; anything else as hex.
+ */
+declare function formatMidiMessage(data: Uint8Array | number[]): string;
+export interface MoldableMidiPortInfo {
+    id: string;
+    name: string;
+    manufacturer?: string;
+}
+export interface UseMoldableMidiOptions {
+    onMessage?: (data: Uint8Array, portId: string) => void;
+}
+/**
+ * MIDI state machine behind `MidiMonitor`. Handles both transports returned
+ * by `requestMoldableMIDIWithFallback`: Web MIDI (full port enumeration and
+ * state observation) and the desktop bridge (host-owned per-port chooser via
+ * `requestPort`).
+ */
+export declare function useMoldableMidi(options?: UseMoldableMidiOptions): {
+    status: MoldableMidiStatus;
+    access: MoldableMIDITransport | null;
+    inputs: MoldableMidiPortInfo[];
+    outputs: MoldableMidiPortInfo[];
+    openInputIds: string[];
+    sysexEnabled: boolean;
+    error: Error | null;
+    entries: import("./stream-log").StreamLogEntry[];
+    connect: (connectOptions?: {
+        sysex?: boolean;
+    }) => Promise<void>;
+    disconnect: () => Promise<void>;
+    requestPort: (kind: "input" | "output") => Promise<void>;
+    openInput: (id: string) => Promise<void>;
+    closeInput: (id: string) => Promise<void>;
+    sendNote: (outputId: string, note?: number, velocity?: number) => Promise<void>;
+    sendSystemExclusive: (outputId: string, data?: Iterable<number>) => Promise<void>;
+    clearEntries: () => void;
+};
+export interface MidiMonitorProps extends React.ComponentProps<'div'> {
+    /** Request System Exclusive access when connecting. */
+    sysex?: boolean;
+    onMessage?: (data: Uint8Array, portId: string) => void;
+}
+/**
+ * MIDI monitor panel: connect either transport, monitor inputs, fire a test
+ * note at outputs, and read a live parsed-message log.
+ */
+declare function MidiMonitor({ className, sysex, onMessage, ...props }: MidiMonitorProps): import("react/jsx-runtime").JSX.Element;
+export { MidiMonitor, formatMidiMessage };
+//# sourceMappingURL=midi-monitor.d.ts.map

package/dist/components/native-capabilities/midi-monitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"midi-monitor.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/midi-monitor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,qBAAqB,EAQ3B,MAAM,+BAA+B,CAAA;AAiBtC,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAA;AAgC9E;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,EAAE,GAAG,MAAM,CAmB9D;AAED,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACvD;AAwBD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,OAAO,GAAE,sBAA2B;;;;;;;;;+BAgDzC;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE;;wBAmCC,OAAO,GAAG,QAAQ;oBAuClD,MAAM;qBAwCuB,MAAM;yBA+F7B,MAAM;oCAoDX,MAAM,SACV,QAAQ,CAAC,MAAM,CAAC;;EAqJ3B;AAkDD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,uDAAuD;IACvD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACvD;AAED;;;GAGG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,KAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA+JlB;AAED,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAA"}