@moldable-ai/ui 0.2.19 → 0.2.20

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { type MoldableDisplay } from '../../lib/native-capabilities';
+export type MoldableDisplaysStatus = 'loading' | 'ready' | 'unavailable';
+/**
+ * Display arrangement state behind `DisplayMap`. One-shot query by design —
+ * the host does not expose display change events.
+ */
+export declare function useMoldableDisplays(): {
+    displays: MoldableDisplay[];
+    status: MoldableDisplaysStatus;
+    error: Error | null;
+    refresh: () => void;
+};
+export interface DisplayMapProps extends React.ComponentProps<'div'> {
+    onSelectDisplay?: (display: MoldableDisplay | null) => void;
+}
+/**
+ * To-scale map of the native monitor arrangement. Hover or click a display to
+ * inspect its name, resolution, position, and scale factor.
+ */
+declare function DisplayMap({ className, onSelectDisplay, ...props }: DisplayMapProps): import("react/jsx-runtime").JSX.Element;
+export { DisplayMap };
+//# sourceMappingURL=display-map.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"display-map.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/display-map.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,eAAe,EAErB,MAAM,+BAA+B,CAAA;AAgBtC,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAA;AAExE;;;GAGG;AACH,wBAAgB,mBAAmB;;;;;EAiClC;AAgCD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAClE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAA;CAC5D;AAED;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CA2K5E;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/native-capabilities/display-map.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Monitor, RefreshCw } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getMoldableDisplays, } from '../../lib/native-capabilities';
+import { cn } from '../../lib/utils';
+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';
+/**
+ * Display arrangement state behind `DisplayMap`. One-shot query by design —
+ * the host does not expose display change events.
+ */
+export function useMoldableDisplays() {
+    const [displays, setDisplays] = useState([]);
+    const [status, setStatus] = useState('loading');
+    const [error, setError] = useState(null);
+    const generationRef = useRef(0);
+    const refresh = useCallback(() => {
+        const generation = ++generationRef.current;
+        setStatus('loading');
+        setError(null);
+        getMoldableDisplays()
+            .then((result) => {
+            if (generationRef.current !== generation)
+                return;
+            setDisplays(result.displays);
+            setStatus('ready');
+        })
+            .catch((cause) => {
+            if (generationRef.current !== generation)
+                return;
+            setDisplays([]);
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            setStatus('unavailable');
+        });
+    }, []);
+    useEffect(() => {
+        refresh();
+        const liveGeneration = generationRef;
+        return () => {
+            liveGeneration.current++;
+        };
+    }, [refresh]);
+    return { displays, status, error, refresh };
+}
+function computeDisplayBounds(displays) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const display of displays) {
+        minX = Math.min(minX, display.position.x);
+        minY = Math.min(minY, display.position.y);
+        maxX = Math.max(maxX, display.position.x + display.size.width);
+        maxY = Math.max(maxY, display.position.y + display.size.height);
+    }
+    return {
+        minX,
+        minY,
+        width: Math.max(1, maxX - minX),
+        height: Math.max(1, maxY - minY),
+    };
+}
+function displayName(display, index) {
+    return display.name ?? `Display ${index + 1}`;
+}
+/**
+ * To-scale map of the native monitor arrangement. Hover or click a display to
+ * inspect its name, resolution, position, and scale factor.
+ */
+function DisplayMap({ className, onSelectDisplay, ...props }) {
+    const { displays, status, refresh } = useMoldableDisplays();
+    const [selected, setSelected] = useState(null);
+    const onSelectDisplayRef = useRef(onSelectDisplay);
+    onSelectDisplayRef.current = onSelectDisplay;
+    const select = (index) => {
+        setSelected(index);
+        onSelectDisplayRef.current?.(displays[index] ?? null);
+    };
+    const primaryIndex = displays.findIndex((display) => display.primary);
+    const selectedIndex = selected !== null && selected < displays.length
+        ? selected
+        : primaryIndex >= 0
+            ? primaryIndex
+            : displays.length > 0
+                ? 0
+                : null;
+    const selectedDisplay = selectedIndex === null ? null : (displays[selectedIndex] ?? null);
+    const bounds = computeDisplayBounds(displays);
+    const mapWidth = Math.round((200 * bounds.width) / bounds.height);
+    return (_jsxs(NativeCapabilityPanel, { "data-slot": "display-map", "data-status": status, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(Monitor, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "Displays" }), _jsx(CapabilityBadge, { capability: "displays" }), _jsx(NativeCapabilityPanelAction, { children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Refresh displays", onClick: () => {
+                                setSelected(null);
+                                refresh();
+                            }, children: _jsx(RefreshCw, {}) }) })] }), _jsx(NativeCapabilityPanelContent, { children: status === 'ready' && displays.length > 0 ? (_jsxs("div", { className: "animate-in fade-in space-y-4 duration-300 motion-reduce:animate-none", children: [_jsx("div", { className: "bg-muted/20 flex justify-center overflow-hidden rounded-lg border p-4", children: _jsx("div", { "data-slot": "display-map-canvas", className: "relative", style: {
+                                    aspectRatio: `${bounds.width} / ${bounds.height}`,
+                                    width: `min(100%, ${mapWidth}px)`,
+                                }, children: displays.map((display, index) => {
+                                    const isSelected = index === selectedIndex;
+                                    return (_jsxs("button", { type: "button", "data-slot": "display-map-display", "data-primary": display.primary || undefined, "data-selected": isSelected || undefined, "aria-label": `Select ${displayName(display, index)}`, onClick: () => select(index), onMouseEnter: () => select(index), onFocus: () => select(index), className: cn('animate-in fade-in zoom-in-95 absolute flex flex-col items-start justify-end gap-0.5 overflow-hidden rounded-md border p-1.5 text-left duration-300 motion-reduce:animate-none', isSelected
+                                            ? 'bg-primary/10 border-primary'
+                                            : 'bg-muted/40 hover:bg-muted/70', !isSelected && display.primary && 'border-primary'), style: {
+                                            left: `${((display.position.x - bounds.minX) / bounds.width) * 100}%`,
+                                            top: `${((display.position.y - bounds.minY) / bounds.height) * 100}%`,
+                                            width: `${(display.size.width / bounds.width) * 100}%`,
+                                            height: `${(display.size.height / bounds.height) * 100}%`,
+                                            animationDelay: `${index * 75}ms`,
+                                            animationFillMode: 'backwards',
+                                        }, children: [display.primary ? (_jsx("span", { className: "border-primary/40 bg-primary/10 text-primary absolute right-1 top-1 rounded-full border px-1 py-px text-[8px] font-medium leading-none", children: "Primary" })) : null, _jsx("span", { className: "w-full truncate text-[10px] font-medium leading-tight", children: displayName(display, index) }), _jsxs("span", { className: "text-muted-foreground font-mono text-[9px] tabular-nums leading-none", children: [display.size.width, "\u00D7", display.size.height] })] }, `${display.position.x},${display.position.y},${index}`));
+                                }) }) }), selectedDisplay ? (_jsxs(Readout, { className: "grid-cols-2 sm:grid-cols-4", children: [_jsx(ReadoutItem, { label: "Name", value: displayName(selectedDisplay, selectedIndex ?? 0) }), _jsx(ReadoutItem, { label: "Resolution", value: `${selectedDisplay.size.width}×${selectedDisplay.size.height}` }), _jsx(ReadoutItem, { label: "Position", value: `${selectedDisplay.position.x}, ${selectedDisplay.position.y}` }), _jsx(ReadoutItem, { label: "Scale factor", value: `${selectedDisplay.scaleFactor}×` })] })) : null] })) : (_jsx("div", { className: "animate-in fade-in flex flex-col items-center gap-3 py-6 text-center duration-300 motion-reduce:animate-none", children: status === 'loading' ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { className: "text-muted-foreground" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Reading display arrangement\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: _jsx(Monitor, {}) }), status === 'unavailable' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Displays unavailable" }), _jsx("p", { className: "text-muted-foreground max-w-64 text-xs", children: "Display metadata is only available inside Moldable." })] })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: "No displays reported" }))] })) })) }), _jsx(NativeCapabilityPanelFooter, { children: _jsxs("span", { className: "truncate", children: [displays.length, " ", displays.length === 1 ? 'display' : 'displays'] }) })] }));
+}
+export { DisplayMap };

package/dist/components/native-capabilities/haptic-button.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { type MoldableHapticAvailability, type MoldableHapticPattern } from '../../lib/native-capabilities';
+import { Button } from '../ui/button';
+/**
+ * Haptic feedback state behind `HapticButton`. `perform` never throws — it
+ * resolves `false` when the host rejects or is unavailable.
+ */
+export declare function useMoldableHaptics(): {
+    availability: MoldableHapticAvailability | null;
+    patterns: MoldableHapticPattern[];
+    supported: boolean;
+    perform: (pattern?: MoldableHapticPattern) => Promise<boolean>;
+};
+export interface HapticButtonProps extends React.ComponentProps<typeof Button> {
+    /** Haptic pattern to perform on click. Defaults to `generic`. */
+    pattern?: MoldableHapticPattern;
+    /** Called with whether the OS accepted the feedback request. */
+    onPerformed?: (ok: boolean) => void;
+}
+/**
+ * A `Button` that performs native haptic feedback on click, with a matching
+ * press-and-jiggle animation so the tap reads even without hardware feedback.
+ */
+declare function HapticButton({ pattern, onPerformed, onClick, className, children, ...props }: HapticButtonProps): import("react/jsx-runtime").JSX.Element;
+export { HapticButton };
+//# sourceMappingURL=haptic-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"haptic-button.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/haptic-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAG3B,MAAM,+BAA+B,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAIrC;;;GAGG;AACH,wBAAgB,kBAAkB;;;;wBAqBd,qBAAqB;EAiBxC;AAkBD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC;IAC5E,iEAAiE;IACjE,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAC/B,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAA;CACpC;AAED;;;GAGG;AACH,iBAAS,YAAY,CAAC,EACpB,OAAmB,EACnB,WAAW,EACX,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAmDnB;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/native-capabilities/haptic-button.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Vibrate } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getMoldableHapticAvailability, performMoldableHapticFeedback, } from '../../lib/native-capabilities';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+const EMPTY_PATTERNS = [];
+/**
+ * Haptic feedback state behind `HapticButton`. `perform` never throws — it
+ * resolves `false` when the host rejects or is unavailable.
+ */
+export function useMoldableHaptics() {
+    const [availability, setAvailability] = useState(null);
+    const generationRef = useRef(0);
+    useEffect(() => {
+        const generation = ++generationRef.current;
+        getMoldableHapticAvailability()
+            .then((value) => {
+            if (generationRef.current === generation)
+                setAvailability(value);
+        })
+            .catch(() => {
+            // Haptics availability is best-effort outside Moldable.
+        });
+        const liveGeneration = generationRef;
+        return () => {
+            liveGeneration.current++;
+        };
+    }, []);
+    const perform = useCallback(async (pattern = 'generic') => {
+        try {
+            const result = await performMoldableHapticFeedback(pattern);
+            return result.accepted === true;
+        }
+        catch {
+            return false;
+        }
+    }, []);
+    return {
+        availability,
+        patterns: availability?.patterns ?? EMPTY_PATTERNS,
+        supported: availability?.apiAvailable ?? false,
+        perform,
+    };
+}
+const HAPTIC_PRESS_STYLE = `
+@keyframes moldable-haptic-press {
+  0% { transform: scale(1) translateX(0); }
+  20% { transform: scale(0.96) translateX(-1.5px); }
+  45% { transform: scale(0.97) translateX(1.5px); }
+  70% { transform: scale(0.98) translateX(-1px); }
+  100% { transform: scale(1) translateX(0); }
+}
+[data-slot='haptic-button'][data-state='pressed'] {
+  animation: moldable-haptic-press 150ms ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot='haptic-button'][data-state='pressed'] { animation: none; }
+}
+`;
+/**
+ * A `Button` that performs native haptic feedback on click, with a matching
+ * press-and-jiggle animation so the tap reads even without hardware feedback.
+ */
+function HapticButton({ pattern = 'generic', onPerformed, onClick, className, children, ...props }) {
+    const { perform } = useMoldableHaptics();
+    const [pressed, setPressed] = useState(false);
+    const onPerformedRef = useRef(onPerformed);
+    onPerformedRef.current = onPerformed;
+    const frameRef = useRef(0);
+    const timeoutRef = useRef(0);
+    useEffect(() => () => {
+        window.cancelAnimationFrame(frameRef.current);
+        window.clearTimeout(timeoutRef.current);
+    }, []);
+    const triggerPress = () => {
+        window.cancelAnimationFrame(frameRef.current);
+        window.clearTimeout(timeoutRef.current);
+        // Drop the attribute for a frame so rapid clicks restart the animation.
+        setPressed(false);
+        frameRef.current = window.requestAnimationFrame(() => {
+            setPressed(true);
+            timeoutRef.current = window.setTimeout(() => setPressed(false), 180);
+        });
+    };
+    const handleClick = (event) => {
+        triggerPress();
+        void perform(pattern).then((ok) => onPerformedRef.current?.(ok));
+        onClick?.(event);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: HAPTIC_PRESS_STYLE }), _jsx(Button, { "data-slot": "haptic-button", "data-state": pressed ? 'pressed' : 'idle', className: cn('motion-reduce:animate-none', className), onClick: handleClick, ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Vibrate, {}), " Haptic"] })) })] }));
+}
+export { HapticButton };

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { type MoldableHidDevice, type MoldableHidDeviceFilter, type MoldableHidInputReportEvent } from '../../lib/native-capabilities';
+export type MoldableHidStatus = 'idle' | 'requesting' | 'error';
+export interface UseMoldableHidOptions {
+    onInputReport?: (event: MoldableHidInputReportEvent) => void;
+}
+/**
+ * HID state machine behind `HidDevicePanel`: granted-device list, chooser
+ * requests, open/close with input-report streaming, and output reports. Use
+ * directly to build custom HID UI on the same lifecycle handling.
+ */
+export declare function useMoldableHid(options?: UseMoldableHidOptions): {
+    devices: MoldableHidDevice[];
+    status: MoldableHidStatus;
+    error: Error | null;
+    openIds: string[];
+    entries: import("./stream-log").StreamLogEntry[];
+    deviceId: (device: MoldableHidDevice) => string;
+    refresh: () => Promise<void>;
+    request: (filters?: readonly MoldableHidDeviceFilter[]) => Promise<void>;
+    open: (device: MoldableHidDevice) => Promise<void>;
+    close: (device: MoldableHidDevice) => Promise<boolean>;
+    sendReport: (device: MoldableHidDevice, reportId: number, data: BufferSource) => Promise<boolean>;
+    sendFeatureReport: (device: MoldableHidDevice, reportId: number, data: BufferSource) => Promise<boolean>;
+    receiveFeatureReport: (device: MoldableHidDevice, reportId: number) => Promise<DataView<ArrayBufferLike> | undefined>;
+    forget: (device: MoldableHidDevice) => Promise<boolean>;
+    clearEntries: () => void;
+};
+export interface HidDevicePanelProps extends React.ComponentProps<'div'> {
+    /** Chooser filters (empty shows every device the runtime allows). */
+    filters?: readonly MoldableHidDeviceFilter[];
+    onInputReport?: (event: MoldableHidInputReportEvent) => void;
+}
+/**
+ * HID device panel: chooser access, granted-device list with open/close, and
+ * a live hex log of incoming input reports.
+ */
+declare function HidDevicePanel({ className, filters, onInputReport, ...props }: HidDevicePanelProps): import("react/jsx-runtime").JSX.Element;
+export { HidDevicePanel };
+//# sourceMappingURL=hid-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hid-panel.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/hid-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,2BAA2B,EAWjC,MAAM,+BAA+B,CAAA;AAsBtC,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAA;AA0D/D,MAAM,WAAW,qBAAqB;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAA;CAC7D;AAOD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAE,qBAA0B;;;;;;uBAe1B,iBAAiB,KAAG,MAAM;;wBAyC9C,SAAS,uBAAuB,EAAE;mBA4BnC,iBAAiB;oBA+CjB,iBAAiB;yBAoBjB,iBAAiB,YAAY,MAAM,QAAQ,YAAY;gCAuBvD,iBAAiB,YAAY,MAAM,QAAQ,YAAY;mCAuBvD,iBAAiB,YAAY,MAAM;qBAsBnC,iBAAiB;;EAoDnC;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACtE,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,uBAAuB,EAAE,CAAA;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAA;CAC7D;AAyGD;;;GAGG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,OAAO,EACP,aAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAgHrB;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}