@moldable-ai/ui 0.2.19 → 0.2.21

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

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bell, Send } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { NATIVE_NOTIFICATION_MAX_BODY_LENGTH, NATIVE_NOTIFICATION_MAX_TAG_LENGTH, NATIVE_NOTIFICATION_MAX_TITLE_LENGTH, getMoldableNotificationPermission, requestMoldableNotificationPermission, sendMoldableNotification, } from '../../lib/native-capabilities';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Spinner } from '../ui/spinner';
+import { Switch } from '../ui/switch';
+import { CapabilityBadge } from './capability-badge';
+import { NativeCapabilityPanel, NativeCapabilityPanelAction, NativeCapabilityPanelContent, NativeCapabilityPanelFooter, NativeCapabilityPanelHeader, NativeCapabilityPanelIcon, NativeCapabilityPanelTitle, } from './native-capability-panel';
+import { useMoldableCapability, } from './use-capability';
+/**
+ * Notification state machine behind `NotificationsPanel`: permission loading,
+ * explicit permission requests, and sends with the library's length limits
+ * enforced by truncation.
+ */
+export function useMoldableNotifications() {
+    const [permission, setPermission] = useState('unknown');
+    const [status, setStatus] = useState('idle');
+    const [sentAt, setSentAt] = useState(null);
+    const [error, setError] = useState(null);
+    const tokenRef = useRef(0);
+    useEffect(() => {
+        let live = true;
+        getMoldableNotificationPermission()
+            .then((result) => {
+            if (live)
+                setPermission(result.permission);
+        })
+            .catch(() => {
+            // Best-effort: outside Moldable the permission stays unknown.
+        });
+        return () => {
+            live = false;
+        };
+    }, []);
+    const request = useCallback(async () => {
+        const token = ++tokenRef.current;
+        try {
+            const result = await requestMoldableNotificationPermission();
+            if (tokenRef.current !== token)
+                return null;
+            setPermission(result.permission);
+            return result.permission;
+        }
+        catch {
+            return null;
+        }
+    }, []);
+    const send = useCallback(async (options) => {
+        const token = ++tokenRef.current;
+        setStatus('sending');
+        setError(null);
+        try {
+            await sendMoldableNotification({
+                ...options,
+                title: options.title.slice(0, NATIVE_NOTIFICATION_MAX_TITLE_LENGTH),
+                body: options.body?.slice(0, NATIVE_NOTIFICATION_MAX_BODY_LENGTH),
+                tag: options.tag?.slice(0, NATIVE_NOTIFICATION_MAX_TAG_LENGTH),
+            });
+            if (tokenRef.current !== token)
+                return false;
+            setSentAt(Date.now());
+            setStatus('sent');
+            return true;
+        }
+        catch (cause) {
+            if (tokenRef.current !== token)
+                return false;
+            setError(cause instanceof Error ? cause : new Error(String(cause)));
+            setStatus('error');
+            return false;
+        }
+    }, []);
+    useEffect(() => () => {
+        tokenRef.current++;
+    }, []);
+    return { permission, status, sentAt, error, request, send };
+}
+const PERMISSION_CHIP = {
+    granted: { status: 'supported', label: 'Granted' },
+    prompt: { status: 'partial', label: 'Not requested' },
+    denied: { status: 'unsupported', label: 'Denied' },
+};
+function formatClock(timestamp) {
+    const date = new Date(timestamp);
+    const pad = (value) => value.toString().padStart(2, '0');
+    return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
+/**
+ * Notification composer panel: permission chip with an inline allow flow, a
+ * compact title/body/silent composer, and delivery feedback.
+ */
+function NotificationsPanel({ className, ...props }) {
+    const notifications = useMoldableNotifications();
+    const capability = useMoldableCapability('notifications');
+    const [title, setTitle] = useState('Hello from Moldable');
+    const [body, setBody] = useState('');
+    const [silent, setSilent] = useState(false);
+    const [requesting, setRequesting] = useState(false);
+    const sending = notifications.status === 'sending';
+    const canSend = title.trim().length > 0 && !sending;
+    const sendNotification = async () => {
+        await notifications.send({
+            title,
+            body: body.trim().length > 0 ? body : undefined,
+            tag: 'moldable-native-capabilities',
+            silent,
+        });
+    };
+    const requestPermission = async () => {
+        setRequesting(true);
+        await notifications.request();
+        setRequesting(false);
+    };
+    const chip = notifications.permission === 'unknown'
+        ? null
+        : PERMISSION_CHIP[notifications.permission];
+    return (_jsxs(NativeCapabilityPanel, { "data-slot": "notifications-panel", "data-status": notifications.status, "data-permission": notifications.permission, className: className, ...props, children: [_jsxs(NativeCapabilityPanelHeader, { children: [_jsx(NativeCapabilityPanelIcon, { children: _jsx(Bell, {}) }), _jsx(NativeCapabilityPanelTitle, { children: "Notifications" }), _jsx(CapabilityBadge, { capability: "notifications" }), _jsx(NativeCapabilityPanelAction, { children: notifications.permission === 'prompt' ? (_jsxs(Button, { size: "sm", variant: "outline", disabled: requesting, onClick: () => void requestPermission(), children: [requesting ? _jsx(Spinner, {}) : null, "Allow"] })) : chip ? (_jsx(CapabilityBadge, { status: chip.status, label: chip.label })) : null })] }), _jsxs(NativeCapabilityPanelContent, { className: "space-y-3", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { value: title, maxLength: NATIVE_NOTIFICATION_MAX_TITLE_LENGTH, placeholder: "Title", "aria-label": "Notification title", onChange: (event) => setTitle(event.target.value) }), _jsx(Input, { value: body, maxLength: NATIVE_NOTIFICATION_MAX_BODY_LENGTH, placeholder: "Body (optional)", "aria-label": "Notification body", onChange: (event) => setBody(event.target.value) })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("label", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsx(Switch, { size: "sm", checked: silent, onCheckedChange: setSilent }), "Silent"] }), _jsxs(Button, { size: "sm", disabled: !canSend, onClick: () => void sendNotification(), children: [sending ? _jsx(Spinner, {}) : _jsx(Send, {}), "Send notification"] })] }), notifications.status === 'sent' && notifications.sentAt !== null ? (_jsxs("p", { className: "text-success animate-in fade-in font-mono text-xs tabular-nums duration-300 motion-reduce:animate-none", children: ["Delivered ", formatClock(notifications.sentAt)] })) : notifications.status === 'error' ? (_jsx("p", { className: "text-status-error text-xs", children: notifications.error?.message ??
+                            'The notification could not be sent.' })) : null] }), _jsx(NativeCapabilityPanelFooter, { children: _jsx("span", { className: "truncate", children: capability.descriptor?.reason ??
+                        'Notifications appear via the OS notification center.' }) })] }));
+}
+export { NotificationsPanel };

package/dist/components/native-capabilities/power-blocker-controller.d.ts

@@ -0,0 +1,19 @@
+import { type MoldableSleepBlocker, type MoldableSleepBlockerType } from '../../lib/native-capabilities';
+type StartSleepBlocker = (type: MoldableSleepBlockerType) => Promise<MoldableSleepBlocker>;
+declare const BLOCKER_TYPES: readonly ["prevent-display-sleep", "prevent-app-suspension"];
+/**
+ * Owns sleep-blocker handles independently from React state. Handles are only
+ * discarded after the host confirms they stopped, so a failed cleanup remains
+ * retryable.
+ */
+export declare class MoldableSleepBlockerController {
+    #private;
+    private readonly startSleepBlocker;
+    constructor(startSleepBlocker?: StartSleepBlocker);
+    has(type: MoldableSleepBlockerType): boolean;
+    toggle(type: MoldableSleepBlockerType): Promise<boolean>;
+    check(type: MoldableSleepBlockerType): Promise<boolean>;
+    stopAll(): Promise<void>;
+}
+export { BLOCKER_TYPES };
+//# sourceMappingURL=power-blocker-controller.d.ts.map

package/dist/components/native-capabilities/power-blocker-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"power-blocker-controller.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/power-blocker-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAE9B,MAAM,+BAA+B,CAAA;AAEtC,KAAK,iBAAiB,GAAG,CACvB,IAAI,EAAE,wBAAwB,KAC3B,OAAO,CAAC,oBAAoB,CAAC,CAAA;AAElC,QAAA,MAAM,aAAa,8DAGqC,CAAA;AAExD;;;;GAIG;AACH,qBAAa,8BAA8B;;IAkBvC,OAAO,CAAC,QAAQ,CAAC,iBAAiB;gBAAjB,iBAAiB,GAAE,iBAA6C;IAGnF,GAAG,CAAC,IAAI,EAAE,wBAAwB,GAAG,OAAO;IAI5C,MAAM,CAAC,IAAI,EAAE,wBAAwB,GAAG,OAAO,CAAC,OAAO,CAAC;IAmBxD,KAAK,CAAC,IAAI,EAAE,wBAAwB,GAAG,OAAO,CAAC,OAAO,CAAC;IAYjD,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;CA+B/B;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/native-capabilities/power-blocker-controller.js

@@ -0,0 +1,83 @@
+import { startMoldableSleepBlocker, } from '../../lib/native-capabilities';
+const BLOCKER_TYPES = [
+    'prevent-display-sleep',
+    'prevent-app-suspension',
+];
+/**
+ * Owns sleep-blocker handles independently from React state. Handles are only
+ * discarded after the host confirms they stopped, so a failed cleanup remains
+ * retryable.
+ */
+export class MoldableSleepBlockerController {
+    startSleepBlocker;
+    #handles = {
+        'prevent-display-sleep': null,
+        'prevent-app-suspension': null,
+    };
+    #operations = {
+        'prevent-display-sleep': null,
+        'prevent-app-suspension': null,
+    };
+    constructor(startSleepBlocker = startMoldableSleepBlocker) {
+        this.startSleepBlocker = startSleepBlocker;
+    }
+    has(type) {
+        return this.#handles[type] !== null;
+    }
+    toggle(type) {
+        return this.#enqueue(type, async () => {
+            const current = this.#handles[type];
+            if (current) {
+                await current.stop();
+                if (this.#handles[type] === current)
+                    this.#handles[type] = null;
+                return false;
+            }
+            const blocker = await this.startSleepBlocker(type);
+            this.#handles[type] = blocker;
+            const started = await blocker.isStarted();
+            if (!started && this.#handles[type] === blocker) {
+                this.#handles[type] = null;
+            }
+            return started;
+        });
+    }
+    check(type) {
+        return this.#enqueue(type, async () => {
+            const blocker = this.#handles[type];
+            if (!blocker)
+                return false;
+            const started = await blocker.isStarted();
+            if (!started && this.#handles[type] === blocker) {
+                this.#handles[type] = null;
+            }
+            return started;
+        });
+    }
+    async stopAll() {
+        const results = await Promise.allSettled(BLOCKER_TYPES.map((type) => this.#enqueue(type, async () => {
+            const blocker = this.#handles[type];
+            if (!blocker)
+                return;
+            await blocker.stop();
+            if (this.#handles[type] === blocker)
+                this.#handles[type] = null;
+        })));
+        const failed = results.find((result) => result.status === 'rejected');
+        if (failed)
+            throw failed.reason;
+    }
+    #enqueue(type, operation) {
+        const previous = this.#operations[type] ?? Promise.resolve();
+        const current = previous.catch(() => undefined).then(operation);
+        this.#operations[type] = current;
+        void current
+            .finally(() => {
+            if (this.#operations[type] === current)
+                this.#operations[type] = null;
+        })
+            .catch(() => undefined);
+        return current;
+    }
+}
+export { BLOCKER_TYPES };

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { type MoldablePowerSessionEvent, type MoldablePowerState, type MoldableSleepBlockerType, type MoldableSystemIdleState, type MoldableThermalState } from '../../lib/native-capabilities';
+export interface MoldablePowerSessionLogEntry {
+    /** Monotonic id, stable across the rolling window. */
+    id: number;
+    /** Epoch millis parsed from the event's `occurredAt`. */
+    timestamp: number;
+    event: MoldablePowerSessionEvent;
+}
+export interface MoldablePowerIdleSnapshot {
+    state: MoldableSystemIdleState;
+    seconds: number;
+}
+export interface UseMoldablePowerOptions {
+    /** Poll cadence for power/thermal/idle state. Defaults to 30 000 ms. */
+    pollIntervalMs?: number;
+}
+/**
+ * Power/session state machine behind `PowerPanel`: polled power + thermal +
+ * idle state, live session events, and a managed sleep blocker. Every native
+ * failure degrades to nulls so it is safe outside Moldable.
+ */
+export declare function useMoldablePower(options?: UseMoldablePowerOptions): {
+    power: MoldablePowerState | null;
+    thermal: MoldableThermalState | null;
+    idle: MoldablePowerIdleSnapshot | null;
+    events: MoldablePowerSessionLogEntry[];
+    updatedAt: number | null;
+    error: Error | null;
+    refresh: () => void;
+    sleepBlocker: {
+        active: boolean;
+        type: "prevent-display-sleep" | null;
+        toggle: (type?: MoldableSleepBlockerType) => Promise<void>;
+    };
+    sleepBlockers: Record<MoldableSleepBlockerType, {
+        active: boolean;
+        busy: boolean;
+        toggle: () => Promise<void>;
+        check: () => Promise<void>;
+    }>;
+};
+export interface BatteryGaugeProps extends React.ComponentProps<'span'> {
+    /** Controlled charge percent (0-100). Omit all data props to self-manage. */
+    percent?: number;
+    /** Controlled charging flag. */
+    charging?: boolean;
+    /** The machine has no battery — renders an AC power presentation. */
+    noBattery?: boolean;
+}
+/**
+ * Compact inline battery glyph + percent. Pass `percent`/`charging` (and
+ * optionally `noBattery`) to control it, or no data props to let it poll
+ * `useMoldablePower` itself.
+ */
+declare function BatteryGauge({ percent, charging, noBattery, ...props }: BatteryGaugeProps): import("react/jsx-runtime").JSX.Element;
+export interface PowerPanelProps extends React.ComponentProps<'div'> {
+    /** Poll cadence for power/thermal/idle state. Defaults to 30 000 ms. */
+    pollIntervalMs?: number;
+}
+/**
+ * Power panel: battery gauge, source/thermal/idle readout, live session event
+ * log, and a "keep awake" sleep-blocker switch.
+ */
+declare function PowerPanel({ className, pollIntervalMs, ...props }: PowerPanelProps): import("react/jsx-runtime").JSX.Element;
+export { PowerPanel, BatteryGauge };
+//# sourceMappingURL=power-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"power-panel.d.ts","sourceRoot":"","sources":["../../../src/components/native-capabilities/power-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,yBAAyB,EAC9B,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EAO1B,MAAM,+BAA+B,CAAA;AAuBtC,MAAM,WAAW,4BAA4B;IAC3C,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAA;IACV,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,yBAAyB,CAAA;CACjC;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,uBAAuB,CAAA;IAC9B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAMD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,uBAA4B;;;;;;;;;;;wBA0HrD,wBAAwB;;mBAwEhC,MAAM,CACT,wBAAwB,EACxB;QACE,MAAM,EAAE,OAAO,CAAA;QACf,IAAI,EAAE,OAAO,CAAA;QACb,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;QAC3B,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;KAC3B,CACF;EAEJ;AA0DD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IACrE,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AA2DD;;;;GAIG;AACH,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAgBnB;AAsCD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAClE,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CA0J3E;AAED,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,CAAA"}

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

@@ -0,0 +1,309 @@
+'use client';
+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';
+const MAX_POWER_EVENTS = 100;
+function toError(cause) {
+    return cause instanceof Error ? cause : new Error(String(cause));
+}
+/**
+ * Power/session state machine behind `PowerPanel`: polled power + thermal +
+ * idle state, live session events, and a managed sleep blocker. Every native
+ * failure degrades to nulls so it is safe outside Moldable.
+ */
+export function useMoldablePower(options = {}) {
+    const { pollIntervalMs = 30_000 } = options;
+    const [power, setPower] = useState(null);
+    const [thermal, setThermal] = useState(null);
+    const [idle, setIdle] = useState(null);
+    const [events, setEvents] = useState([]);
+    const [updatedAt, setUpdatedAt] = useState(null);
+    const [error, setError] = useState(null);
+    const [blockerActive, setBlockerActive] = useState({
+        'prevent-display-sleep': false,
+        'prevent-app-suspension': false,
+    });
+    const [blockerBusy, setBlockerBusy] = useState({
+        'prevent-display-sleep': false,
+        'prevent-app-suspension': false,
+    });
+    const generationRef = useRef(0);
+    const eventIdRef = useRef(0);
+    const mountedRef = useRef(true);
+    const blockerControllerRef = useRef(null);
+    blockerControllerRef.current ??= new MoldableSleepBlockerController();
+    const refresh = useCallback(() => {
+        const generation = ++generationRef.current;
+        void Promise.allSettled([
+            getMoldablePowerState(),
+            getMoldableCurrentThermalState(),
+            getMoldableSystemIdleState(60),
+            getMoldableSystemIdleTime(),
+        ]).then(([powerResult, thermalResult, idleStateResult, idleTimeResult]) => {
+            if (generationRef.current !== generation)
+                return;
+            setPower(powerResult.status === 'fulfilled' ? powerResult.value : null);
+            setThermal(thermalResult.status === 'fulfilled' ? thermalResult.value : null);
+            setIdle(idleStateResult.status === 'fulfilled'
+                ? {
+                    state: idleStateResult.value.state,
+                    seconds: idleTimeResult.status === 'fulfilled'
+                        ? idleTimeResult.value
+                        : idleStateResult.value.seconds,
+                }
+                : null);
+            const failed = [
+                powerResult,
+                thermalResult,
+                idleStateResult,
+                idleTimeResult,
+            ].find((result) => result.status === 'rejected');
+            setError(failed ? toError(failed.reason) : null);
+            setUpdatedAt(Date.now());
+        });
+    }, []);
+    useEffect(() => {
+        refresh();
+        const interval = window.setInterval(refresh, Math.max(1000, pollIntervalMs));
+        const liveGeneration = generationRef;
+        return () => {
+            window.clearInterval(interval);
+            liveGeneration.current++;
+        };
+    }, [pollIntervalMs, refresh]);
+    useEffect(() => {
+        let cancelled = false;
+        let stopWatching = null;
+        watchMoldablePowerSession((event) => {
+            if (cancelled)
+                return;
+            const parsed = Date.parse(event.occurredAt);
+            const entry = {
+                id: ++eventIdRef.current,
+                timestamp: Number.isNaN(parsed) ? Date.now() : parsed,
+                event,
+            };
+            setEvents((previous) => {
+                const next = [...previous, entry];
+                return next.length > MAX_POWER_EVENTS
+                    ? next.slice(next.length - MAX_POWER_EVENTS)
+                    : next;
+            });
+            if (event.kind === 'power-source-change')
+                setPower(event.powerState);
+            if (event.kind === 'thermal-state-change')
+                setThermal(event.state);
+        })
+            .then((stop) => {
+            if (cancelled) {
+                // Unmounted before the subscription resolved — stop immediately.
+                void stop().catch(() => undefined);
+                return;
+            }
+            stopWatching = stop;
+        })
+            .catch(() => {
+            // Session events are unavailable outside Moldable.
+        });
+        return () => {
+            cancelled = true;
+            if (stopWatching)
+                void stopWatching().catch(() => undefined);
+        };
+    }, []);
+    useEffect(() => {
+        mountedRef.current = true;
+        const liveMounted = mountedRef;
+        const controller = blockerControllerRef.current;
+        return () => {
+            liveMounted.current = false;
+            if (controller)
+                void controller.stopAll().catch(() => undefined);
+        };
+    }, []);
+    const toggleSleepBlocker = useCallback(async (type = 'prevent-display-sleep') => {
+        const controller = blockerControllerRef.current;
+        if (!controller)
+            return;
+        setBlockerBusy((previous) => ({ ...previous, [type]: true }));
+        try {
+            const active = await controller.toggle(type);
+            if (!mountedRef.current)
+                return;
+            setBlockerActive((previous) => ({ ...previous, [type]: active }));
+            setError(null);
+        }
+        catch (cause) {
+            if (!mountedRef.current)
+                return;
+            setBlockerActive((previous) => ({
+                ...previous,
+                [type]: controller.has(type),
+            }));
+            setError(toError(cause));
+        }
+        finally {
+            if (mountedRef.current) {
+                setBlockerBusy((previous) => ({ ...previous, [type]: false }));
+            }
+        }
+    }, []);
+    const checkSleepBlocker = useCallback(async (type) => {
+        const controller = blockerControllerRef.current;
+        if (!controller)
+            return;
+        setBlockerBusy((previous) => ({ ...previous, [type]: true }));
+        try {
+            const active = await controller.check(type);
+            if (!mountedRef.current)
+                return;
+            setBlockerActive((previous) => ({ ...previous, [type]: active }));
+            setError(null);
+        }
+        catch (cause) {
+            if (!mountedRef.current)
+                return;
+            setError(toError(cause));
+        }
+        finally {
+            if (mountedRef.current) {
+                setBlockerBusy((previous) => ({ ...previous, [type]: false }));
+            }
+        }
+    }, []);
+    return {
+        power,
+        thermal,
+        idle,
+        events,
+        updatedAt,
+        error,
+        refresh,
+        sleepBlocker: {
+            active: blockerActive['prevent-display-sleep'],
+            type: blockerActive['prevent-display-sleep']
+                ? 'prevent-display-sleep'
+                : null,
+            toggle: toggleSleepBlocker,
+        },
+        sleepBlockers: Object.fromEntries(BLOCKER_TYPES.map((type) => [
+            type,
+            {
+                active: blockerActive[type],
+                busy: blockerBusy[type],
+                toggle: () => toggleSleepBlocker(type),
+                check: () => checkSleepBlocker(type),
+            },
+        ])),
+    };
+}
+function BatteryGlyph({ percent, charging, className, }) {
+    const clamped = Math.max(0, Math.min(100, percent));
+    const fillClass = charging
+        ? 'text-status-running'
+        : clamped < 15
+            ? 'text-status-error'
+            : 'text-foreground';
+    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] })) }));
+}
+function ManagedBatteryGauge(props) {
+    const { power } = useMoldablePower();
+    const battery = power?.batteries[0] ?? null;
+    return (_jsx(BatteryGaugeBase, { percent: battery?.chargePercent, charging: battery?.state === 'charging', noBattery: power !== null && power.batteries.length === 0, ...props }));
+}
+/**
+ * Compact inline battery glyph + percent. Pass `percent`/`charging` (and
+ * optionally `noBattery`) to control it, or no data props to let it poll
+ * `useMoldablePower` itself.
+ */
+function BatteryGauge({ percent, charging, noBattery, ...props }) {
+    if (percent === undefined &&
+        charging === undefined &&
+        noBattery === undefined) {
+        return _jsx(ManagedBatteryGauge, { ...props });
+    }
+    return (_jsx(BatteryGaugeBase, { percent: percent, charging: charging, noBattery: noBattery, ...props }));
+}
+const POWER_SOURCE_LABEL = {
+    ac: 'AC',
+    battery: 'Battery',
+    unknown: 'Unknown',
+};
+function capitalize(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function formatIdleSeconds(value) {
+    const seconds = Math.max(0, Math.floor(value));
+    if (seconds < 60)
+        return `${seconds}s`;
+    if (seconds < 3600)
+        return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+    return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
+}
+function formatClock(timestamp) {
+    return new Date(timestamp).toLocaleTimeString(undefined, { hour12: false });
+}
+function describePowerSessionEvent(event) {
+    switch (event.kind) {
+        case 'power-source-change':
+            return event.powerState.source === 'battery'
+                ? 'on-battery'
+                : event.powerState.source === 'ac'
+                    ? 'on-ac'
+                    : 'power-source-change';
+        case 'thermal-state-change':
+            return `thermal-${event.state}`;
+        default:
+            return event.kind;
+    }
+}
+/**
+ * Power panel: battery gauge, source/thermal/idle readout, live session event
+ * log, and a "keep awake" sleep-blocker switch.
+ */
+function PowerPanel({ className, pollIntervalMs, ...props }) {
+    const power = useMoldablePower({ pollIntervalMs });
+    const log = useStreamLog(MAX_POWER_EVENTS);
+    const appendRef = useRef(log.append);
+    appendRef.current = log.append;
+    const lastEventIdRef = useRef(0);
+    const { events } = power;
+    useEffect(() => {
+        for (const entry of events) {
+            if (entry.id <= lastEventIdRef.current)
+                continue;
+            lastEventIdRef.current = entry.id;
+            appendRef.current({
+                id: entry.id,
+                timestamp: entry.timestamp,
+                direction: 'info',
+                data: describePowerSessionEvent(entry.event),
+            });
+        }
+    }, [events]);
+    const battery = power.power?.batteries[0] ?? null;
+    const noBattery = power.power !== null && power.power.batteries.length === 0;
+    const status = power.power !== null || power.thermal !== null
+        ? 'ready'
+        : 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
+                                        ? `${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
+                            ? `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" })] })] }));
+}
+export { PowerPanel, BatteryGauge };

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare function Readout({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export interface ReadoutItemProps extends React.ComponentProps<'div'> {
+    label: React.ReactNode;
+    value?: React.ReactNode;
+    unit?: React.ReactNode;
+}
+declare function ReadoutItem({ label, value, unit, className, children, ...props }: ReadoutItemProps): import("react/jsx-runtime").JSX.Element;
+export { Readout, ReadoutItem };
+//# sourceMappingURL=readout.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+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] })] }));
+}
+export { Readout, ReadoutItem };