@moldable-ai/ui 0.2.22 → 0.2.24

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

@@ -2,15 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { BatteryCharging, Plug, RefreshCw, Zap } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { getMoldableCurrentThermalState, getMoldablePowerState, getMoldableSystemIdleState, getMoldableSystemIdleTime, watchMoldablePowerSession, } from '../../lib/native-capabilities';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import { Switch } from '../ui/switch';
-import { CapabilityBadge } from './capability-badge';
-import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelFooter, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel';
-import { BLOCKER_TYPES, MoldableSleepBlockerController, } from './power-blocker-controller';
-import { Readout, ReadoutItem } from './readout';
-import { StreamLog, useStreamLog } from './stream-log';
+import { getMoldableCurrentThermalState, getMoldablePowerState, getMoldableSystemIdleState, getMoldableSystemIdleTime, watchMoldablePowerSession, } from '../../lib/native-capabilities/index.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { Switch } from '../ui/switch.js';
+import { CapabilityBadge } from './capability-badge.js';
+import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelFooter, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel.js';
+import { BLOCKER_TYPES, MoldableSleepBlockerController, } from './power-blocker-controller.js';
+import { Readout, ReadoutItem } from './readout.js';
+import { StreamLog, useStreamLog } from './stream-log.js';
 const MAX_POWER_EVENTS = 100;
 function toError(cause) {
     return cause instanceof Error ? cause : new Error(String(cause));
@@ -216,7 +216,7 @@ function BatteryGlyph({ percent, charging, className, }) {
     return (_jsxs("svg", { viewBox: "0 0 28 14", "aria-hidden": true, className: cn('h-[1em] w-[2em] shrink-0', className), children: [_jsx("rect", { x: "1", y: "1.5", width: "23", height: "11", rx: "3", fill: "none", stroke: "currentColor", strokeWidth: "1.5", className: "opacity-50" }), _jsx("rect", { x: "25.5", y: "4.75", width: "2", height: "4.5", rx: "1", fill: "currentColor", className: "opacity-50" }), _jsx("rect", { x: "3.5", y: "4", width: (clamped / 100) * 18, height: "6", rx: "1.5", className: cn('fill-current transition-all duration-500 motion-reduce:transition-none', fillClass) })] }));
 }
 function BatteryGaugeBase({ percent, charging = false, noBattery = false, className, ...props }) {
-    return (_jsx("span", { "data-slot": "battery-gauge", "data-status": noBattery ? 'ac' : percent === undefined ? 'unknown' : 'battery', className: cn('inline-flex items-center gap-2 text-sm', className), ...props, children: noBattery ? (_jsxs(_Fragment, { children: [_jsx(Plug, { "aria-hidden": true, className: "text-muted-foreground size-[1.15em]" }), _jsx("span", { className: "font-mono tabular-nums", children: "AC power" })] })) : percent === undefined ? (_jsxs(_Fragment, { children: [_jsx(BatteryGlyph, { percent: 0, charging: false }), _jsx("span", { className: "text-muted-foreground/60 font-mono tabular-nums", children: "\u2014" })] })) : (_jsxs(_Fragment, { children: [_jsx(BatteryGlyph, { percent: percent, charging: charging }), _jsxs("span", { className: "font-mono tabular-nums", children: [Math.round(percent), "%"] }), charging ? (_jsx(Zap, { "aria-label": "Charging", className: "text-status-running size-3 fill-current" })) : null] })) }));
+    return (_jsx("span", { "data-slot": "battery-gauge", "data-status": noBattery ? 'ac' : percent === undefined ? 'unknown' : 'battery', className: cn('text-ui-body inline-flex items-center gap-2', className), ...props, children: noBattery ? (_jsxs(_Fragment, { children: [_jsx(Plug, { "aria-hidden": true, className: "text-muted-foreground size-[1.15em]" }), _jsx("span", { className: "font-mono tabular-nums", children: "AC power" })] })) : percent === undefined ? (_jsxs(_Fragment, { children: [_jsx(BatteryGlyph, { percent: 0, charging: false }), _jsx("span", { className: "text-muted-foreground/60 font-mono tabular-nums", children: "\u2014" })] })) : (_jsxs(_Fragment, { children: [_jsx(BatteryGlyph, { percent: percent, charging: charging }), _jsxs("span", { className: "font-mono tabular-nums", children: [Math.round(percent), "%"] }), charging ? (_jsx(Zap, { "aria-label": "Charging", className: "text-status-running size-3 fill-current" })) : null] })) }));
 }
 function ManagedBatteryGauge(props) {
     const { power } = useMoldablePower();
@@ -300,9 +300,9 @@ function PowerPanel({ className, pollIntervalMs, ...props }) {
         : power.error
             ? 'unavailable'
             : 'loading';
-    return (_jsxs(NativeCapabilityPanel, { "data-slot": "power-panel", "data-status": status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(BatteryCharging, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "Power" }), _jsx(CapabilityBadge, { capability: "power-monitor" }), _jsx(NativeCapabilityPanelAction, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("label", { className: "text-muted-foreground flex items-center gap-2 text-xs font-medium", children: ["Display", _jsx(Switch, { size: "sm", checked: power.sleepBlockers['prevent-display-sleep'].active, disabled: power.sleepBlockers['prevent-display-sleep'].busy, onCheckedChange: () => void power.sleepBlockers['prevent-display-sleep'].toggle(), "aria-label": "Keep the display awake" })] }), _jsxs("label", { className: "text-muted-foreground flex items-center gap-2 text-xs font-medium", children: ["App", _jsx(Switch, { size: "sm", checked: power.sleepBlockers['prevent-app-suspension'].active, disabled: power.sleepBlockers['prevent-app-suspension'].busy, onCheckedChange: () => void power.sleepBlockers['prevent-app-suspension'].toggle(), "aria-label": "Keep the app active" })] })] }) })] }), _jsx(NativeCapabilityPanelContent, { children: _jsxs("div", { className: "animate-in fade-in space-y-4 duration-300 motion-reduce:animate-none", children: [_jsx(BatteryGauge, { className: "text-xl font-medium tracking-tight sm:text-2xl", percent: battery?.chargePercent, charging: battery?.state === 'charging', noBattery: noBattery }), _jsxs(Readout, { className: "grid-cols-2 sm:grid-cols-4", children: [_jsx(ReadoutItem, { label: "Source", value: power.power ? POWER_SOURCE_LABEL[power.power.source] : null }), _jsx(ReadoutItem, { label: "State", value: battery ? capitalize(battery.state) : null }), _jsx(ReadoutItem, { label: "Thermal", value: power.thermal ? capitalize(power.thermal) : null }), _jsx(ReadoutItem, { label: "Idle", value: power.idle
+    return (_jsxs(NativeCapabilityPanel, { "data-slot": "power-panel", "data-status": status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(BatteryCharging, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "Power" }), _jsx(CapabilityBadge, { capability: "power-monitor" }), _jsx(NativeCapabilityPanelAction, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("label", { className: "text-muted-foreground text-ui-caption flex items-center gap-2 font-medium", children: ["Display", _jsx(Switch, { size: "sm", checked: power.sleepBlockers['prevent-display-sleep'].active, disabled: power.sleepBlockers['prevent-display-sleep'].busy, onCheckedChange: () => void power.sleepBlockers['prevent-display-sleep'].toggle(), "aria-label": "Keep the display awake" })] }), _jsxs("label", { className: "text-muted-foreground text-ui-caption flex items-center gap-2 font-medium", children: ["App", _jsx(Switch, { size: "sm", checked: power.sleepBlockers['prevent-app-suspension'].active, disabled: power.sleepBlockers['prevent-app-suspension'].busy, onCheckedChange: () => void power.sleepBlockers['prevent-app-suspension'].toggle(), "aria-label": "Keep the app active" })] })] }) })] }), _jsx(NativeCapabilityPanelContent, { children: _jsxs("div", { className: "animate-in fade-in space-y-4 duration-300 motion-reduce:animate-none", children: [_jsx(BatteryGauge, { className: "text-ui-heading sm:text-ui-display font-medium tracking-tight", percent: battery?.chargePercent, charging: battery?.state === 'charging', noBattery: noBattery }), _jsxs(Readout, { className: "grid-cols-2 sm:grid-cols-4", children: [_jsx(ReadoutItem, { label: "Source", value: power.power ? POWER_SOURCE_LABEL[power.power.source] : null }), _jsx(ReadoutItem, { label: "State", value: battery ? capitalize(battery.state) : null }), _jsx(ReadoutItem, { label: "Thermal", value: power.thermal ? capitalize(power.thermal) : null }), _jsx(ReadoutItem, { label: "Idle", value: power.idle
                                         ? `${formatIdleSeconds(power.idle.seconds)} · ${power.idle.state}`
-                                        : null })] }), power.error ? (_jsx("p", { className: "text-status-error text-xs", children: power.error.message })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "text-muted-foreground text-[10px] font-medium uppercase tracking-wider", children: "Session events" }), _jsx(StreamLog, { entries: log.entries, maxHeight: 160, emptyLabel: "No session events yet" })] })] }) }), _jsxs(NativeCapabilityPanelFooter, { children: [_jsx("span", { className: "truncate font-mono tabular-nums", children: power.updatedAt
+                                        : null })] }), power.error ? (_jsx("p", { className: "text-status-error text-ui-caption", children: power.error.message })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "text-muted-foreground text-11 font-medium uppercase tracking-wider", children: "Session events" }), _jsx(StreamLog, { entries: log.entries, maxHeight: 160, emptyLabel: "No session events yet" })] })] }) }), _jsxs(NativeCapabilityPanelFooter, { children: [_jsx("span", { className: "truncate font-mono tabular-nums", children: power.updatedAt
                             ? `Updated ${formatClock(power.updatedAt)}`
                             : 'Waiting for first reading' }), _jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": "Refresh power state", className: "ml-auto", onClick: power.refresh, children: _jsx(RefreshCw, {}) }), _jsx(Button, { variant: "ghost", size: "xs", className: "gap-1", disabled: BLOCKER_TYPES.some((type) => power.sleepBlockers[type].busy), onClick: () => void Promise.all(BLOCKER_TYPES.map((type) => power.sleepBlockers[type].check())), children: "Check blockers" })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"readout.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/readout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWpE;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA6BlB;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"readout.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/readout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWpE;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA+BlB;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAA"}

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

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Readout({ className, ...props }) {
     return (_jsx("div", { "data-slot": "readout", className: cn('grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-3', className), ...props }));
 }
 function ReadoutItem({ label, value, unit, className, children, ...props }) {
     const content = children ?? value;
-    return (_jsxs("div", { "data-slot": "readout-item", className: cn('min-w-0', className), ...props, children: [_jsx("div", { "data-slot": "readout-label", className: "text-muted-foreground text-[10px] font-medium uppercase tracking-wider", children: label }), _jsxs("div", { "data-slot": "readout-value", className: "mt-1 truncate font-mono text-sm tabular-nums", children: [content === null || content === undefined ? (_jsx("span", { className: "text-muted-foreground/60", children: "\u2014" })) : (content), unit !== undefined && content !== null && content !== undefined ? (_jsx("span", { className: "text-muted-foreground ml-1 text-xs", children: unit })) : null] })] }));
+    return (_jsxs("div", { "data-slot": "readout-item", className: cn('min-w-0', className), ...props, children: [_jsx("div", { "data-slot": "readout-label", className: "text-muted-foreground text-11 font-medium uppercase tracking-wider", children: label }), _jsxs("div", { "data-slot": "readout-value", className: "text-ui-body mt-1 truncate font-mono tabular-nums", children: [content === null || content === undefined ? (_jsx("span", { className: "text-muted-foreground/60", children: "\u2014" })) : (content), unit !== undefined && content !== null && content !== undefined ? (_jsx("span", { className: "text-muted-foreground text-ui-caption ml-1", children: unit })) : null] })] }));
 }
 export { Readout, ReadoutItem };

package/dist/components/native-capabilities/screen-share-preview.js

@@ -2,11 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MonitorOff, MonitorUp, RefreshCw, Square } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { NativeCapabilityBridgeError, getMoldableDisplayStream, getMoldableMediaPermissionStatus, requestMoldableMediaPermission, stopMoldableMediaStream, } from '../../lib/native-capabilities';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import { Spinner } from '../ui/spinner';
-import { LiveIndicator } from './live-indicator';
+import { NativeCapabilityBridgeError, getMoldableDisplayStream, getMoldableMediaPermissionStatus, requestMoldableMediaPermission, stopMoldableMediaStream, } from '../../lib/native-capabilities/index.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { Spinner } from '../ui/spinner.js';
+import { LiveIndicator } from './live-indicator.js';
 function isPermissionDenied(error) {
     if (error instanceof NativeCapabilityBridgeError) {
         return error.code === 'permission_denied';
@@ -185,7 +185,7 @@ function ScreenSharePreview({ className, withAudio = false, autoStart = false, o
     const videoTrack = active ? share.stream?.getVideoTracks()[0] : undefined;
     const settings = videoTrack?.getSettings();
     const sourceLabel = videoTrack?.label;
-    return (_jsxs("div", { "data-slot": "screen-share-preview", "data-status": share.status, className: cn('group relative isolate aspect-video w-full overflow-hidden rounded-xl border', active ? 'bg-black' : 'bg-muted/30', className), ...props, children: [_jsx("video", { ref: videoRef, muted: true, playsInline: true, className: cn('absolute inset-0 size-full object-contain', !active && 'invisible') }), _jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-30 bg-white transition-opacity duration-150", style: { opacity: flash ? 0.9 : 0 } }), active ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute left-3 top-3 z-20", children: _jsx(LiveIndicator, { variant: "rec", label: share.status === 'muted' ? 'Paused' : 'Sharing' }) }), _jsxs("div", { className: "absolute right-3 top-3 z-20 flex max-w-[70%] items-center gap-1.5", children: [sourceLabel ? (_jsx("div", { className: "truncate rounded-full border border-white/15 bg-black/60 px-2 py-0.5 font-mono text-[10px] text-white/90 backdrop-blur-sm", children: sourceLabel })) : null, settings?.width && settings.height ? (_jsxs("div", { className: "shrink-0 rounded-full border border-white/15 bg-black/60 px-2 py-0.5 font-mono text-[10px] tabular-nums text-white/90 backdrop-blur-sm", children: [settings.width, "\u00D7", settings.height] })) : null] }), _jsxs("div", { className: "absolute inset-x-0 bottom-0 z-20 flex items-end justify-end gap-2 bg-gradient-to-t from-black/70 via-black/25 to-transparent p-3 pt-10 opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100", children: [onSnapshot ? (_jsx("button", { type: "button", onClick: capture, "aria-label": "Take snapshot", className: "size-9 rounded-full border-2 border-white/40 bg-white shadow-md transition-transform duration-150 hover:scale-105 active:scale-95 motion-reduce:transition-none" })) : null, _jsx(Button, { variant: "secondary", size: "icon-sm", "aria-label": "Stop sharing", onClick: share.stop, className: "border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/20", children: _jsx(Square, { className: "fill-current" }) })] })] })) : (_jsx("div", { className: "animate-in fade-in absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 p-6 text-center duration-300 motion-reduce:animate-none", children: share.status === 'starting' ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { className: "text-muted-foreground" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Waiting for the source picker\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: share.status === 'idle' ? _jsx(MonitorUp, {}) : _jsx(MonitorOff, {}) }), share.status === 'idle' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing is being shared" }), _jsxs(Button, { size: "sm", onClick: () => void share.start(), children: [_jsx(MonitorUp, {}), " Share screen"] })] })) : share.status === 'denied' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Screen recording access denied" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: "Enable screen recording for Moldable in System Settings, then try again." }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void share.start(), children: [_jsx(RefreshCw, {}), " Try again"] })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Screen share unavailable" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: share.error?.message ??
+    return (_jsxs("div", { "data-slot": "screen-share-preview", "data-status": share.status, className: cn('rounded-container group relative isolate aspect-video w-full overflow-hidden border', active ? 'bg-black' : 'bg-muted/30', className), ...props, children: [_jsx("video", { ref: videoRef, muted: true, playsInline: true, className: cn('absolute inset-0 size-full object-contain', !active && 'invisible') }), _jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-30 bg-white transition-opacity duration-150", style: { opacity: flash ? 0.9 : 0 } }), active ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute left-3 top-3 z-20", children: _jsx(LiveIndicator, { variant: "rec", label: share.status === 'muted' ? 'Paused' : 'Sharing' }) }), _jsxs("div", { className: "absolute right-3 top-3 z-20 flex max-w-[70%] items-center gap-1.5", children: [sourceLabel ? (_jsx("div", { className: "rounded-pill text-11 truncate border border-white/15 bg-black/60 px-2 py-0.5 font-mono text-white/90 backdrop-blur-sm", children: sourceLabel })) : null, settings?.width && settings.height ? (_jsxs("div", { className: "rounded-pill text-11 shrink-0 border border-white/15 bg-black/60 px-2 py-0.5 font-mono tabular-nums text-white/90 backdrop-blur-sm", children: [settings.width, "\u00D7", settings.height] })) : null] }), _jsxs("div", { className: "absolute inset-x-0 bottom-0 z-20 flex items-end justify-end gap-2 bg-gradient-to-t from-black/70 via-black/25 to-transparent p-3 pt-10 opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100", children: [onSnapshot ? (_jsx("button", { type: "button", onClick: capture, "aria-label": "Take snapshot", className: "rounded-pill size-9 border-2 border-white/40 bg-white shadow-md transition-transform duration-150 hover:scale-105 active:scale-95 motion-reduce:transition-none" })) : null, _jsx(Button, { variant: "secondary", size: "icon-sm", "aria-label": "Stop sharing", onClick: share.stop, className: "border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/20", children: _jsx(Square, { className: "fill-current" }) })] })] })) : (_jsx("div", { className: "animate-in fade-in absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 p-6 text-center duration-300 motion-reduce:animate-none", children: share.status === 'starting' ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { className: "text-muted-foreground" }), _jsx("p", { className: "text-muted-foreground text-ui-caption", children: "Waiting for the source picker\u2026" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground bg-background shadow-xs rounded-container flex size-10 items-center justify-center border [&_svg]:size-5", children: share.status === 'idle' ? _jsx(MonitorUp, {}) : _jsx(MonitorOff, {}) }), share.status === 'idle' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-muted-foreground text-ui-body", children: "Nothing is being shared" }), _jsxs(Button, { size: "sm", onClick: () => void share.start(), children: [_jsx(MonitorUp, {}), " Share screen"] })] })) : share.status === 'denied' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-ui-body font-medium", children: "Screen recording access denied" }), _jsx("p", { className: "text-muted-foreground text-ui-caption max-w-64", children: "Enable screen recording for Moldable in System Settings, then try again." }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void share.start(), children: [_jsx(RefreshCw, {}), " Try again"] })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-ui-body font-medium", children: "Screen share unavailable" }), _jsx("p", { className: "text-muted-foreground text-ui-caption max-w-64", children: share.error?.message ??
                                         'The screen share could not be started.' }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void share.start(), children: [_jsx(RefreshCw, {}), " Try again"] })] }))] })) }))] }));
 }
 export { ScreenSharePreview };

package/dist/components/native-capabilities/secure-storage-panel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MoldableSecureStorageDiagnostics, type MoldableSecureStorageEntryMetadata } from '../../lib/native-capabilities';
+import { type MoldableSecureStorageDiagnostics, type MoldableSecureStorageEntryMetadata } from '../../lib/native-capabilities/index.js';
 export type MoldableSecureStorageStatus = 'loading' | 'ready' | 'error';
 export interface MoldableSecureEntryValidation {
     valid: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"secure-storage-panel.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/secure-storage-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,gCAAgC,EACrC,KAAK,kCAAkC,EAQxC,MAAM,+BAA+B,CAAA;AAiBtC,MAAM,MAAM,2BAA2B,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;AAIvE,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,OAAO,CAAA;IACd,mFAAmF;IACnF,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,GAAG,EAAE,MAAM,EACX,KAAK,SAAK,GACT,6BAA6B,CAwB/B;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB;;;;;;eAqCxB,MAAM,SAAS,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;eAgBlB,MAAM,KAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;kBAcrD,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;;EA2BxC;AAWD;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CA0K7B;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"secure-storage-panel.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/secure-storage-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,gCAAgC,EACrC,KAAK,kCAAkC,EAQxC,MAAM,+BAA+B,CAAA;AAiBtC,MAAM,MAAM,2BAA2B,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;AAIvE,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,OAAO,CAAA;IACd,mFAAmF;IACnF,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,GAAG,EAAE,MAAM,EACX,KAAK,SAAK,GACT,6BAA6B,CAwB/B;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB;;;;;;eAqCxB,MAAM,SAAS,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;eAgBlB,MAAM,KAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;kBAcrD,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;;EA2BxC;AAWD;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAkL7B;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/native-capabilities/secure-storage-panel.js

@@ -2,15 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Eye, EyeOff, KeyRound, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { SECURE_STORAGE_MAX_KEY_LENGTH, SECURE_STORAGE_MAX_VALUE_BYTES, deleteMoldableSecureValue, getMoldableSecureStorageDiagnostics, getMoldableSecureValue, listMoldableSecureValues, setMoldableSecureValue, } from '../../lib/native-capabilities';
-import { Badge } from '../ui/badge';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Skeleton } from '../ui/skeleton';
-import { Spinner } from '../ui/spinner';
-import { CapabilityBadge } from './capability-badge';
-import { DeviceList, DeviceListEmpty, DeviceListItem } from './device-list';
-import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel';
+import { SECURE_STORAGE_MAX_KEY_LENGTH, SECURE_STORAGE_MAX_VALUE_BYTES, deleteMoldableSecureValue, getMoldableSecureStorageDiagnostics, getMoldableSecureValue, listMoldableSecureValues, setMoldableSecureValue, } from '../../lib/native-capabilities/index.js';
+import { Badge } from '../ui/badge.js';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Skeleton } from '../ui/skeleton.js';
+import { Spinner } from '../ui/spinner.js';
+import { CapabilityBadge } from './capability-badge.js';
+import { DeviceList, DeviceListEmpty, DeviceListItem } from './device-list.js';
+import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel.js';
 const SECURE_STORAGE_KEY_PATTERN = /^[A-Za-z0-9._-]+$/;
 /**
  * Client-side mirror of the library's secure-storage constraints. Returns a
@@ -181,9 +181,9 @@ function SecureStoragePanel({ className, ...props }) {
         hide(key);
         await storage.remove(key);
     };
-    return (_jsxs(NativeCapabilityPanel, { "data-slot": "secure-storage-panel", "data-status": storage.status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(KeyRound, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "Secure Storage" }), _jsx(CapabilityBadge, { capability: "secure-storage" }), _jsx(NativeCapabilityPanelAction, { children: storage.diagnostics ? (_jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: storage.diagnostics.backend })) : null })] }), _jsxs(NativeCapabilityPanelContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: draftKey, placeholder: "key", maxLength: SECURE_STORAGE_MAX_KEY_LENGTH, "aria-label": "Secret key", autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", spellCheck: false, className: "font-mono", onChange: (event) => setDraftKey(event.target.value) }), _jsx(Input, { value: draftValue, type: "password", placeholder: "value", "aria-label": "Secret value", autoComplete: "new-password", onChange: (event) => setDraftValue(event.target.value) }), _jsxs(Button, { disabled: !canStore, onClick: () => void store(), children: [storing ? _jsx(Spinner, {}) : null, "Store"] })] }), validation.message ? (_jsx("p", { className: "text-status-error text-xs", children: validation.message })) : null, storage.error ? (_jsx("p", { className: "text-status-error text-xs", children: storage.error.message })) : null, storage.status === 'loading' && storage.keys.length === 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-12 w-full rounded-lg" }), _jsx(Skeleton, { className: "h-12 w-full rounded-lg" })] })) : storage.keys.length === 0 ? (_jsx(DeviceList, { children: _jsxs(DeviceListEmpty, { icon: _jsx(KeyRound, {}), children: [_jsx("span", { className: "text-sm font-medium", children: "Nothing stored" }), _jsx("span", { className: "text-xs", children: "Values are encrypted by the OS keychain." })] }) })) : (_jsx(DeviceList, { children: storage.keys.map((entry) => {
+    return (_jsxs(NativeCapabilityPanel, { "data-slot": "secure-storage-panel", "data-status": storage.status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(KeyRound, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "Secure Storage" }), _jsx(CapabilityBadge, { capability: "secure-storage" }), _jsx(NativeCapabilityPanelAction, { children: storage.diagnostics ? (_jsx(Badge, { variant: "outline", className: "text-11 font-mono", children: storage.diagnostics.backend })) : null })] }), _jsxs(NativeCapabilityPanelContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: draftKey, placeholder: "key", maxLength: SECURE_STORAGE_MAX_KEY_LENGTH, "aria-label": "Secret key", autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", spellCheck: false, className: "font-mono", onChange: (event) => setDraftKey(event.target.value) }), _jsx(Input, { value: draftValue, type: "password", placeholder: "value", "aria-label": "Secret value", autoComplete: "new-password", onChange: (event) => setDraftValue(event.target.value) }), _jsxs(Button, { disabled: !canStore, onClick: () => void store(), children: [storing ? _jsx(Spinner, {}) : null, "Store"] })] }), validation.message ? (_jsx("p", { className: "text-status-error text-ui-caption", children: validation.message })) : null, storage.error ? (_jsx("p", { className: "text-status-error text-ui-caption", children: storage.error.message })) : null, storage.status === 'loading' && storage.keys.length === 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "rounded-container h-12 w-full" }), _jsx(Skeleton, { className: "rounded-container h-12 w-full" })] })) : storage.keys.length === 0 ? (_jsx(DeviceList, { children: _jsxs(DeviceListEmpty, { icon: _jsx(KeyRound, {}), children: [_jsx("span", { className: "text-ui-body font-medium", children: "Nothing stored" }), _jsx("span", { className: "text-ui-caption", children: "Values are encrypted by the OS keychain." })] }) })) : (_jsx(DeviceList, { children: storage.keys.map((entry) => {
                             const revealedValue = revealed[entry.key];
-                            return (_jsx(DeviceListItem, { icon: _jsx(KeyRound, {}), name: _jsx("span", { className: "font-mono text-xs", children: entry.key }), description: revealedValue !== undefined
+                            return (_jsx(DeviceListItem, { icon: _jsx(KeyRound, {}), name: _jsx("span", { className: "text-ui-caption font-mono", children: entry.key }), description: revealedValue !== undefined
                                     ? revealedValue
                                     : entry.updatedAtMs > entry.createdAtMs
                                         ? `Updated ${formatEntryTimestamp(entry.updatedAtMs)}`

package/dist/components/native-capabilities/serial-console.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MoldableSerialInputSignals, type MoldableSerialOutputSignals, type MoldableSerialPort, type MoldableSerialPortFilter, type MoldableSerialPortInfo, type MoldableSerialRequestOptions } from '../../lib/native-capabilities';
+import { type MoldableSerialInputSignals, type MoldableSerialOutputSignals, type MoldableSerialPort, type MoldableSerialPortFilter, type MoldableSerialPortInfo, type MoldableSerialRequestOptions } from '../../lib/native-capabilities/index.js';
 export type MoldableSerialStatus = 'idle' | 'connecting' | 'connected' | 'error';
 export interface UseMoldableSerialOptions {
     /** Baud rate used when `connect` does not override it. Defaults to 115200. */
@@ -34,7 +34,7 @@ export declare function useMoldableSerial(options?: UseMoldableSerialOptions): {
     error: Error | null;
     signals: MoldableSerialSignalsState;
     inputSignals: MoldableSerialInputSignals | null;
-    entries: import("./stream-log").StreamLogEntry[];
+    entries: import("./stream-log.js").StreamLogEntry[];
     rxBytes: number;
     txBytes: number;
     connect: (overrides?: MoldableSerialConnectOptions) => Promise<void>;

package/dist/components/native-capabilities/serial-console.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"serial-console.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/serial-console.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,2BAA2B,EAChC,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EASlC,MAAM,+BAA+B,CAAA;AAyBtC,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAA;AA2BhF,MAAM,WAAW,wBAAwB;IACvC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC7C,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,4BAA4B,CAAC,kBAAkB,CAAC,CAAA;IACnE,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAA;CAC9C;AAED,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,EAAE,OAAO,CAAA;IAC1B,aAAa,EAAE,OAAO,CAAA;IACtB,KAAK,EAAE,OAAO,CAAA;CACf;AAQD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,wBAA6B;;;;;;;;;;0BAkHlD,4BAA4B;;;iBA0HjC,MAAM,GAAG,UAAU;uBAsBnB,2BAA2B;;;EAiE3C;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACrE,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC7C,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,4BAA4B,CAAC,kBAAkB,CAAC,CAAA;IACnE,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAA4B,EAC5B,OAAO,EACP,gBAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAsSpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"serial-console.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/serial-console.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,2BAA2B,EAChC,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EASlC,MAAM,+BAA+B,CAAA;AAyBtC,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAA;AA2BhF,MAAM,WAAW,wBAAwB;IACvC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC7C,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,4BAA4B,CAAC,kBAAkB,CAAC,CAAA;IACnE,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAA;CAC9C;AAED,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,EAAE,OAAO,CAAA;IAC1B,aAAa,EAAE,OAAO,CAAA;IACtB,KAAK,EAAE,OAAO,CAAA;CACf;AAQD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,wBAA6B;;;;;;;;;;0BAkHlD,4BAA4B;;;iBA0HjC,MAAM,GAAG,UAAU;uBAsBnB,2BAA2B;;;EAiE3C;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACrE,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC7C,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,4BAA4B,CAAC,kBAAkB,CAAC,CAAA;IACnE,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAA4B,EAC5B,OAAO,EACP,gBAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA0SpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/native-capabilities/serial-console.js

@@ -2,16 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Cable, CornerDownLeft, Plug, RefreshCw, ShieldX, Unplug, } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { closeMoldableSerialPort, forgetMoldableSerialPort, getMoldableSerialSignals, openMoldableSerialPort, readMoldableSerialPort, requestMoldableSerialPort, setMoldableSerialSignals, writeMoldableSerialPort, } 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 { Switch } from '../ui/switch';
-import { CapabilityBadge } from './capability-badge';
-import { LiveIndicator } from './live-indicator';
-import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelFooter, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel';
-import { StreamLog, useStreamLog } from './stream-log';
+import { closeMoldableSerialPort, forgetMoldableSerialPort, getMoldableSerialSignals, openMoldableSerialPort, readMoldableSerialPort, requestMoldableSerialPort, setMoldableSerialSignals, writeMoldableSerialPort, } from '../../lib/native-capabilities/index.js';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/select.js';
+import { Spinner } from '../ui/spinner.js';
+import { Switch } from '../ui/switch.js';
+import { CapabilityBadge } from './capability-badge.js';
+import { LiveIndicator } from './live-indicator.js';
+import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelFooter, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel.js';
+import { StreamLog, useStreamLog } from './stream-log.js';
 const BAUD_RATES = [9600, 19200, 38400, 57600, 115200, 230400];
 const DEFAULT_BAUD_RATE = 115200;
 function toError(cause) {
@@ -394,6 +394,6 @@ function SerialConsole({ className, baudRate = DEFAULT_BAUD_RATE, filters, selec
         void serial.send(draft);
         setDraft('');
     };
-    return (_jsxs(NativeCapabilityPanel, { "data-slot": "serial-console", "data-status": serial.status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(Cable, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "Serial" }), _jsx(CapabilityBadge, { capability: "serial" }), _jsx(NativeCapabilityPanelAction, { children: retainedPort ? (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "serial-console-port", className: "animate-in fade-in text-muted-foreground bg-muted/50 rounded-md border px-2 py-0.5 font-mono text-xs tabular-nums duration-200 motion-reduce:animate-none", children: formatSerialPortLabel(serial.portInfo) }), connected ? _jsx(LiveIndicator, {}) : null, _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void serial.disconnect(), children: [_jsx(Unplug, {}), " ", connected ? 'Disconnect' : 'Retry disconnect'] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Select, { value: baud, onValueChange: setBaud, disabled: connecting, children: [_jsx(SelectTrigger, { size: "sm", "aria-label": "Baud rate", className: "w-28 font-mono text-xs tabular-nums", children: _jsx(SelectValue, { placeholder: "Baud" }) }), _jsx(SelectContent, { children: rates.map((rate) => (_jsx(SelectItem, { value: String(rate), children: rate }, rate))) })] }), _jsxs(Button, { size: "sm", disabled: connecting, onClick: () => void serial.connect({ baudRate: Number(baud) }), children: [connecting ? _jsx(Spinner, {}) : _jsx(Plug, {}), connecting ? 'Connecting…' : 'Connect'] })] })) })] }), _jsxs(NativeCapabilityPanelContent, { className: "space-y-3", children: [nativePortChoices.length > 0 ? (_jsxs("div", { "data-slot": "serial-console-port-chooser", className: "bg-muted/30 space-y-2 rounded-lg border p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-xs font-medium", children: "Choose a serial port" }), _jsx(Button, { size: "xs", variant: "ghost", onClick: cancelNativePortSelection, children: "Cancel" })] }), _jsx("div", { className: "grid gap-1.5", children: nativePortChoices.map((choice, index) => (_jsxs(Button, { size: "sm", variant: "outline", className: "justify-start font-mono", onClick: () => chooseNativePort(choice), children: [_jsx(Cable, {}), " ", formatSerialPortLabel(choice.getInfo())] }, `${formatSerialPortLabel(choice.getInfo())}-${index}`))) })] })) : null, serial.error ? (_jsx("p", { className: "text-status-error text-xs", children: serial.error.message })) : null, _jsx(StreamLog, { entries: serial.entries, maxHeight: 260, emptyLabel: connected ? 'Waiting for data' : 'Connect a port to start streaming' }), _jsxs("form", { "data-slot": "serial-console-composer", className: "flex items-center gap-2", onSubmit: submitLine, children: [_jsx(Input, { value: draft, onChange: (event) => setDraft(event.target.value), placeholder: "Send a line\u2026", disabled: !connected, spellCheck: false, autoComplete: "off", className: "h-8 flex-1 font-mono text-xs" }), _jsx(Button, { type: "submit", size: "icon-sm", variant: "outline", disabled: !connected, "aria-label": "Send line", children: _jsx(CornerDownLeft, {}) })] })] }), _jsxs(NativeCapabilityPanelFooter, { className: "flex-wrap", children: [_jsxs("label", { "data-slot": "serial-console-signal", className: "flex items-center gap-1.5", children: [_jsx(Switch, { size: "sm", checked: serial.signals.dataTerminalReady, disabled: !connected, onCheckedChange: (checked) => void serial.setSignals({ dataTerminalReady: checked }), "aria-label": "Data terminal ready" }), _jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider", children: "DTR" })] }), _jsxs("label", { "data-slot": "serial-console-signal", className: "flex items-center gap-1.5", children: [_jsx(Switch, { size: "sm", checked: serial.signals.requestToSend, disabled: !connected, onCheckedChange: (checked) => void serial.setSignals({ requestToSend: checked }), "aria-label": "Request to send" }), _jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider", children: "RTS" })] }), _jsxs("label", { "data-slot": "serial-console-signal", className: "flex items-center gap-1.5", children: [_jsx(Switch, { size: "sm", checked: serial.signals.break, disabled: !connected, onCheckedChange: (checked) => void serial.setSignals({ break: checked }), "aria-label": "Break signal" }), _jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider", children: "BRK" })] }), _jsx(Button, { size: "icon-xs", variant: "ghost", disabled: !connected, onClick: () => void serial.refreshSignals(), "aria-label": "Refresh input signals", title: "Refresh input signals", children: _jsx(RefreshCw, {}) }), serial.inputSignals ? (_jsxs("span", { "data-slot": "serial-console-input-signals", className: "font-mono text-[10px] tabular-nums", children: ["CTS ", serial.inputSignals.clearToSend ? '1' : '0', " \u00B7 DCD", ' ', serial.inputSignals.dataCarrierDetect ? '1' : '0', " \u00B7 DSR", ' ', serial.inputSignals.dataSetReady ? '1' : '0', " \u00B7 RI", ' ', serial.inputSignals.ringIndicator ? '1' : '0'] })) : null, retainedPort ? (_jsxs(Button, { size: "xs", variant: "ghost", onClick: () => void serial.forget(), children: [_jsx(ShieldX, {}), " Forget"] })) : null, _jsxs("span", { "data-slot": "serial-console-counters", className: "ml-auto shrink-0 font-mono tabular-nums", children: ["RX ", serial.rxBytes, " \u00B7 TX ", serial.txBytes] })] })] }));
+    return (_jsxs(NativeCapabilityPanel, { "data-slot": "serial-console", "data-status": serial.status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(Cable, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "Serial" }), _jsx(CapabilityBadge, { capability: "serial" }), _jsx(NativeCapabilityPanelAction, { children: retainedPort ? (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "serial-console-port", className: "animate-in fade-in text-muted-foreground bg-muted/50 rounded-control text-ui-caption border px-2 py-0.5 font-mono tabular-nums duration-200 motion-reduce:animate-none", children: formatSerialPortLabel(serial.portInfo) }), connected ? _jsx(LiveIndicator, {}) : null, _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void serial.disconnect(), children: [_jsx(Unplug, {}), " ", connected ? 'Disconnect' : 'Retry disconnect'] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Select, { value: baud, onValueChange: setBaud, disabled: connecting, children: [_jsx(SelectTrigger, { size: "sm", "aria-label": "Baud rate", className: "text-ui-caption w-28 font-mono tabular-nums", children: _jsx(SelectValue, { placeholder: "Baud" }) }), _jsx(SelectContent, { children: rates.map((rate) => (_jsx(SelectItem, { value: String(rate), children: rate }, rate))) })] }), _jsxs(Button, { size: "sm", disabled: connecting, onClick: () => void serial.connect({ baudRate: Number(baud) }), children: [connecting ? _jsx(Spinner, {}) : _jsx(Plug, {}), connecting ? 'Connecting…' : 'Connect'] })] })) })] }), _jsxs(NativeCapabilityPanelContent, { className: "space-y-3", children: [nativePortChoices.length > 0 ? (_jsxs("div", { "data-slot": "serial-console-port-chooser", className: "bg-muted/30 rounded-container space-y-2 border p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-ui-caption font-medium", children: "Choose a serial port" }), _jsx(Button, { size: "xs", variant: "ghost", onClick: cancelNativePortSelection, children: "Cancel" })] }), _jsx("div", { className: "grid gap-1.5", children: nativePortChoices.map((choice, index) => (_jsxs(Button, { size: "sm", variant: "outline", className: "justify-start font-mono", onClick: () => chooseNativePort(choice), children: [_jsx(Cable, {}), " ", formatSerialPortLabel(choice.getInfo())] }, `${formatSerialPortLabel(choice.getInfo())}-${index}`))) })] })) : null, serial.error ? (_jsx("p", { className: "text-status-error text-ui-caption", children: serial.error.message })) : null, _jsx(StreamLog, { entries: serial.entries, maxHeight: 260, emptyLabel: connected ? 'Waiting for data' : 'Connect a port to start streaming' }), _jsxs("form", { "data-slot": "serial-console-composer", className: "flex items-center gap-2", onSubmit: submitLine, children: [_jsx(Input, { value: draft, onChange: (event) => setDraft(event.target.value), placeholder: "Send a line\u2026", disabled: !connected, spellCheck: false, autoComplete: "off", className: "text-ui-caption h-8 flex-1 font-mono" }), _jsx(Button, { type: "submit", size: "icon-sm", variant: "outline", disabled: !connected, "aria-label": "Send line", children: _jsx(CornerDownLeft, {}) })] })] }), _jsxs(NativeCapabilityPanelFooter, { className: "flex-wrap", children: [_jsxs("label", { "data-slot": "serial-console-signal", className: "flex items-center gap-1.5", children: [_jsx(Switch, { size: "sm", checked: serial.signals.dataTerminalReady, disabled: !connected, onCheckedChange: (checked) => void serial.setSignals({ dataTerminalReady: checked }), "aria-label": "Data terminal ready" }), _jsx("span", { className: "text-11 font-medium uppercase tracking-wider", children: "DTR" })] }), _jsxs("label", { "data-slot": "serial-console-signal", className: "flex items-center gap-1.5", children: [_jsx(Switch, { size: "sm", checked: serial.signals.requestToSend, disabled: !connected, onCheckedChange: (checked) => void serial.setSignals({ requestToSend: checked }), "aria-label": "Request to send" }), _jsx("span", { className: "text-11 font-medium uppercase tracking-wider", children: "RTS" })] }), _jsxs("label", { "data-slot": "serial-console-signal", className: "flex items-center gap-1.5", children: [_jsx(Switch, { size: "sm", checked: serial.signals.break, disabled: !connected, onCheckedChange: (checked) => void serial.setSignals({ break: checked }), "aria-label": "Break signal" }), _jsx("span", { className: "text-11 font-medium uppercase tracking-wider", children: "BRK" })] }), _jsx(Button, { size: "icon-xs", variant: "ghost", disabled: !connected, onClick: () => void serial.refreshSignals(), "aria-label": "Refresh input signals", title: "Refresh input signals", children: _jsx(RefreshCw, {}) }), serial.inputSignals ? (_jsxs("span", { "data-slot": "serial-console-input-signals", className: "text-11 font-mono tabular-nums", children: ["CTS ", serial.inputSignals.clearToSend ? '1' : '0', " \u00B7 DCD", ' ', serial.inputSignals.dataCarrierDetect ? '1' : '0', " \u00B7 DSR", ' ', serial.inputSignals.dataSetReady ? '1' : '0', " \u00B7 RI", ' ', serial.inputSignals.ringIndicator ? '1' : '0'] })) : null, retainedPort ? (_jsxs(Button, { size: "xs", variant: "ghost", onClick: () => void serial.forget(), children: [_jsx(ShieldX, {}), " Forget"] })) : null, _jsxs("span", { "data-slot": "serial-console-counters", className: "ml-auto shrink-0 font-mono tabular-nums", children: ["RX ", serial.rxBytes, " \u00B7 TX ", serial.txBytes] })] })] }));
 }
 export { SerialConsole };

package/dist/components/native-capabilities/shortcut-recorder.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MoldableGlobalShortcutEvent, type MoldableGlobalShortcutHandler } from '../../lib/native-capabilities';
+import { type MoldableGlobalShortcutEvent, type MoldableGlobalShortcutHandler } from '../../lib/native-capabilities/index.js';
 /**
  * Splits an Electron-style accelerator ("CommandOrControl+Shift+K") into
  * display keys for `Kbd` chips — ['⌘', '⇧', 'K'] on macOS, ['Ctrl', 'Shift',

package/dist/components/native-capabilities/shortcut-recorder.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { isMoldableGlobalShortcut, registerMoldableGlobalShortcut, } from '../../lib/native-capabilities';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import { Kbd, KbdGroup } from '../ui/kbd';
+import { isMoldableGlobalShortcut, registerMoldableGlobalShortcut, } from '../../lib/native-capabilities/index.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { Kbd, KbdGroup } from '../ui/kbd.js';
 function isApplePlatform() {
     if (typeof navigator === 'undefined')
         return false;
@@ -212,6 +212,6 @@ function ShortcutRecorder({ value, defaultValue = null, onChange, onTrigger, dis
                             ? 'Recording shortcut, press keys'
                             : shortcut
                                 ? `Shortcut ${shortcut}, click to re-record`
-                                : 'Record shortcut', onClick: () => setRecording(true), onBlur: () => setRecording(false), className: cn('border-input dark:bg-input/30 shadow-xs flex h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-transparent px-3 text-left text-sm outline-none transition-[color,box-shadow]', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', recording && 'border-ring ring-ring/50 ring-[3px]', disabled && 'pointer-events-none cursor-not-allowed opacity-50', shortcut && !recording && 'pr-9'), children: recording ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative flex size-1.5 shrink-0", children: [_jsx("span", { className: "bg-destructive absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:animate-none" }), _jsx("span", { className: "bg-destructive relative inline-flex size-1.5 rounded-full" })] }), _jsx("span", { className: "text-muted-foreground", children: "Press keys\u2026" })] })) : keys.length > 0 ? (_jsx(KbdGroup, { "data-state": pulse ? 'triggered' : 'idle', className: "origin-left transition-transform duration-150 data-[state=triggered]:scale-110 motion-reduce:transition-none", children: keys.map((key, index) => (_jsx(Kbd, { children: key }, `${index}-${key}`))) })) : (_jsx("span", { className: "text-muted-foreground", children: "Click to record" })) }), shortcut && !recording ? (_jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": "Clear shortcut", disabled: disabled, className: "absolute right-1.5", onClick: () => commit(null), children: _jsx(X, {}) })) : null] }), error ? (_jsx("p", { "data-slot": "shortcut-recorder-error", className: "text-status-error mt-1.5 text-xs", children: error.message })) : null] }));
+                                : 'Record shortcut', onClick: () => setRecording(true), onBlur: () => setRecording(false), className: cn('border-input dark:bg-input/30 shadow-xs rounded-control text-ui-body flex h-control-md w-full min-w-0 items-center gap-control-gap border bg-transparent px-control-inline text-left outline-none transition-[color,box-shadow]', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-1', recording && 'border-ring ring-ring ring-2', disabled && 'pointer-events-none cursor-not-allowed opacity-50', shortcut && !recording && 'pr-9'), children: recording ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative flex size-1.5 shrink-0", children: [_jsx("span", { className: "bg-destructive rounded-pill absolute inline-flex h-full w-full animate-ping opacity-75 motion-reduce:animate-none" }), _jsx("span", { className: "bg-destructive rounded-pill relative inline-flex size-1.5" })] }), _jsx("span", { className: "text-muted-foreground", children: "Press keys\u2026" })] })) : keys.length > 0 ? (_jsx(KbdGroup, { "data-state": pulse ? 'triggered' : 'idle', className: "origin-left transition-transform duration-150 data-[state=triggered]:scale-110 motion-reduce:transition-none", children: keys.map((key, index) => (_jsx(Kbd, { children: key }, `${index}-${key}`))) })) : (_jsx("span", { className: "text-muted-foreground", children: "Click to record" })) }), shortcut && !recording ? (_jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": "Clear shortcut", disabled: disabled, className: "absolute right-1.5", onClick: () => commit(null), children: _jsx(X, {}) })) : null] }), error ? (_jsx("p", { "data-slot": "shortcut-recorder-error", className: "text-status-error text-ui-caption mt-1.5", children: error.message })) : null] }));
 }
 export { ShortcutRecorder };

package/dist/components/native-capabilities/stream-log.js

@@ -1,7 +1,7 @@
 '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';
+import { cn } from '../../lib/utils.js';
 /** Rolling entry buffer for `StreamLog`, capped at `maxEntries`. */
 export function useStreamLog(maxEntries = 500) {
     const [entries, setEntries] = useState([]);
@@ -57,9 +57,9 @@ function StreamLog({ entries, maxHeight = 240, emptyLabel = 'Waiting for data',
             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) => {
+        }, className: cn('bg-muted/30 rounded-container text-ui-caption overflow-y-auto border font-mono', 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));
+            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 text-11 shrink-0 tabular-nums", children: formatStreamLogTime(entry.timestamp) })) : null, _jsx("span", { className: cn('rounded-control text-11 w-8 shrink-0 border text-center 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/native-capabilities/system-audio-monitor.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MoldableSystemAudioCaptureMode, type MoldableSystemAudioEvent } from '../../lib/native-capabilities';
+import { type MoldableSystemAudioCaptureMode, type MoldableSystemAudioEvent } from '../../lib/native-capabilities/index.js';
 export type MoldableSystemAudioMonitorStatus = 'idle' | 'starting' | 'stopping' | 'capturing' | 'error';
 export interface UseMoldableSystemAudioOptions {
     /** Observe raw capture events (lifecycle plus PCM data frames). */

package/dist/components/native-capabilities/system-audio-monitor.js

@@ -2,15 +2,15 @@
 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-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';
-import { StreamLog, useStreamLog } from './stream-log';
-import { useMoldableCapability } from './use-capability';
+import { startMoldableSystemAudioCapture, stopMoldableSystemAudioCapture, subscribeMoldableSystemAudioEvents, } from '../../lib/native-capabilities/index.js';
+import { Button } from '../ui/button.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/select.js';
+import { Spinner } from '../ui/spinner.js';
+import { CapabilityBadge } from './capability-badge.js';
+import { LiveIndicator } from './live-indicator.js';
+import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelFooter, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel.js';
+import { StreamLog, useStreamLog } from './stream-log.js';
+import { useMoldableCapability } from './use-capability.js';
 const SYSTEM_AUDIO_SAMPLE_RATE = 48_000;
 const FRAME_LOG_INTERVAL = 50;
 function computeRmsLevel(buffer) {
@@ -254,7 +254,7 @@ function SystemAudioMonitor({ className, defaultMode = 'systemAudio', ...props }
     const unsupported = capability.status === 'unsupported' || capability.status === 'unavailable';
     return (_jsxs(NativeCapabilityPanel, { "data-slot": "system-audio-monitor", "data-status": audio.status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(Volume2, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "System Audio" }), _jsx(CapabilityBadge, { capability: "system-audio" }), !unsupported ? (_jsxs(NativeCapabilityPanelAction, { 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: () => {
+                                    : 'systemAudio'), disabled: starting || stopping || capturing, children: [_jsx(SelectTrigger, { size: "sm", className: "text-ui-caption", 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();
                                     }
@@ -268,8 +268,8 @@ function SystemAudioMonitor({ className, defaultMode = 'systemAudio', ...props }
                                             ? 'Stopping…'
                                             : capturing
                                                 ? 'Stop'
-                                                : 'Start'] })] })) : null] }), _jsx(NativeCapabilityPanelContent, { 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'
+                                                : 'Start'] })] })) : null] }), _jsx(NativeCapabilityPanelContent, { 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 rounded-container flex size-10 items-center justify-center border [&_svg]:size-5", children: _jsx(VolumeX, {}) }), _jsx("p", { className: "text-ui-body font-medium", children: "System audio unavailable" }), _jsx("p", { className: "text-muted-foreground text-ui-caption max-w-64", 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(NativeCapabilityPanelFooter, { 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"] })] })] }));
+                                : 'System audio capture requires Moldable on macOS.' })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "bg-muted rounded-pill relative h-2 flex-1 overflow-hidden", children: [_jsx("div", { className: "bg-primary rounded-pill absolute inset-y-0 left-0 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 rounded-pill absolute inset-y-0 w-0.5 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-ui-caption", children: audio.error?.message ?? 'System audio capture failed.' })) : null, _jsx(StreamLog, { entries: log.entries, maxHeight: 180, emptyLabel: "No capture events yet" })] })) }), _jsxs(NativeCapabilityPanelFooter, { 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/native-capabilities/usb-panel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MoldableUsbControlTransferParameters, type MoldableUsbDevice, type MoldableUsbDeviceFilter, type MoldableUsbOpenOptions, type MoldableUsbRequestOptions } from '../../lib/native-capabilities';
+import { type MoldableUsbControlTransferParameters, type MoldableUsbDevice, type MoldableUsbDeviceFilter, type MoldableUsbOpenOptions, type MoldableUsbRequestOptions } from '../../lib/native-capabilities/index.js';
 export type MoldableUsbStatus = 'idle' | 'loading' | 'requesting' | 'error';
 export interface UseMoldableUsbOptions {
     /** Device filters used when `request` does not override them. */
@@ -29,10 +29,10 @@ export declare function useMoldableUsb(options?: UseMoldableUsbOptions): {
     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>;
+    readEndpoint: (device: MoldableUsbDevice, endpoint: number, length: number) => Promise<import("../../index.js").MoldableUsbInTransferResult>;
+    writeEndpoint: (device: MoldableUsbDevice, endpoint: number, data: BufferSource) => Promise<import("../../index.js").MoldableUsbOutTransferResult>;
+    readControl: (device: MoldableUsbDevice, setup: MoldableUsbControlTransferParameters, length: number) => Promise<import("../../index.js").MoldableUsbInTransferResult>;
+    writeControl: (device: MoldableUsbDevice, setup: MoldableUsbControlTransferParameters, data?: BufferSource) => Promise<import("../../index.js").MoldableUsbOutTransferResult>;
     clearHalt: (device: MoldableUsbDevice, direction: "in" | "out", endpoint: number) => Promise<void>;
     reset: (device: MoldableUsbDevice) => Promise<void>;
 };

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

@@ -2,16 +2,16 @@
 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';
+import { NativeCapabilityBridgeError, clearMoldableUsbHalt, closeMoldableUsbDevice, forgetMoldableUsbDevice, getMoldableUsbDevices, openMoldableUsbDevice, readMoldableUsbControlTransfer, readMoldableUsbEndpoint, requestMoldableUsbDevice, resetMoldableUsbDevice, writeMoldableUsbControlTransfer, writeMoldableUsbEndpoint, } from '../../lib/native-capabilities/index.js';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/select.js';
+import { Spinner } from '../ui/spinner.js';
+import { CapabilityBadge } from './capability-badge.js';
+import { formatHexBytes, parseHexBytes, parseIntegerInput, } from './device-io-controls.js';
+import { DeviceList, DeviceListEmpty, DeviceListItem } from './device-list.js';
+import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelFooter, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel.js';
+import { Readout, ReadoutItem } from './readout.js';
 function toError(cause) {
     return cause instanceof Error ? cause : new Error(String(cause));
 }
@@ -309,7 +309,7 @@ function UsbDeviceControls({ device, usb }) {
         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 () => {
+    return (_jsxs("div", { "data-slot": "usb-device-controls", className: "bg-muted/30 rounded-control mt-2 space-y-3 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: "text-ui-caption h-8 font-mono" }), _jsx(Input, { "aria-label": "USB transfer length", value: length, onChange: (event) => setLength(event.target.value), placeholder: "Length", className: "text-ui-caption h-8 font-mono" }), _jsx(Input, { "aria-label": "USB endpoint payload", value: payload, onChange: (event) => setPayload(event.target.value), placeholder: "Hex payload", className: "text-ui-caption h-8 font-mono" })] }), _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 () => {
@@ -325,7 +325,7 @@ function UsbDeviceControls({ device, usb }) {
                         ['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 () => {
+                    ].map(([label, current, update]) => (_jsx(Input, { "aria-label": `USB control ${String(label).toLowerCase()}`, value: current, onChange: (event) => update(event.target.value), placeholder: label, className: "text-ui-caption h-8 font-mono" }, 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 () => {
@@ -334,7 +334,7 @@ function UsbDeviceControls({ device, usb }) {
                         }), 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 })] })] }));
+                        }), children: [_jsx(RotateCcw, {}), "Reset"] }), _jsx("span", { className: "text-muted-foreground text-11 ml-auto truncate font-mono", children: busy ? 'Working…' : result })] })] }));
 }
 /**
  * USB device panel: request access, list granted devices, open/close each
@@ -349,13 +349,13 @@ function UsbDevicePanel({ className, filters, selectNativeDevice, openOptions, o
     });
     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) => {
+    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 rounded-container mb-4 space-y-2 border p-3", children: [_jsx("p", { className: "text-ui-body font-medium", children: "Choose a USB device" }), _jsx("p", { className: "text-muted-foreground text-ui-caption", 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-ui-caption", 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}`));
+                                        : ''), 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 rounded-control mt-2 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"] })] })] }));

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

@@ -1,4 +1,4 @@
-import { type NativeCapabilityDescriptor, type NativeCapabilityId, type NativeCapabilityManifest } from '../../lib/native-capabilities';
+import { type NativeCapabilityDescriptor, type NativeCapabilityId, type NativeCapabilityManifest } from '../../lib/native-capabilities/index.js';
 export type MoldableCapabilityStatus = 'checking' | 'supported' | 'partial' | 'unsupported' | 'unavailable';
 /**
  * Loads the native capability manifest once per page and shares it across all

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

@@ -1,6 +1,6 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { getMoldableNativeCapabilities, } from '../../lib/native-capabilities';
+import { getMoldableNativeCapabilities, } from '../../lib/native-capabilities/index.js';
 let manifestPromise = null;
 /**
  * Loads the native capability manifest once per page and shares it across all