@corbits/react-ui 0.1.0 → 0.3.0

package/dist/ui/step-list.js

@@ -6,72 +6,33 @@ const STATE_LABEL = {
     pending: "Pending",
     active: "Now",
     done: "Done",
-    failed: "Failed"
+    failed: "Failed",
 };
 const MARK_CLASS = {
     pending: "border-input text-muted-foreground",
     active: "border-primary-emphasis bg-primary/10 text-primary-emphasis",
     done: "border-transparent bg-success text-success-foreground",
-    failed: "border-transparent bg-destructive text-destructive-foreground"
+    failed: "border-transparent bg-destructive text-destructive-foreground",
 };
 const LABEL_CLASS = {
     pending: "text-muted-foreground",
     active: "font-medium text-primary-emphasis",
     done: "text-foreground",
-    failed: "font-medium text-destructive"
+    failed: "font-medium text-destructive",
 };
 /** One step row — a mark carrying its own glyph and colour, a name, and the
- * status spelled out in text so it never depends on colour alone. */ export function StepListRow({ step, className }) {
-    return /*#__PURE__*/ _jsxs("li", {
-        "data-step-status": step.status,
-        className: cn("grid grid-cols-[20px_minmax(0,1fr)_auto] items-start gap-2 py-1.5", className),
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                className: cn("mt-0.5 grid size-5 place-items-center rounded-sm border text-[10px] font-semibold", MARK_CLASS[step.status]),
-                children: step.status === "done" ? /*#__PURE__*/ _jsx(Check, {
-                    className: "size-3"
-                }) : step.status === "failed" ? /*#__PURE__*/ _jsx(X, {
-                    className: "size-3"
-                }) : step.status === "active" ? /*#__PURE__*/ _jsx(StatusDot, {
-                    label: "",
-                    tone: "emphasis",
-                    live: true
-                }) : null
-            }),
-            /*#__PURE__*/ _jsxs("span", {
-                className: "min-w-0",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: cn("block truncate text-sm", LABEL_CLASS[step.status]),
-                        children: step.name
-                    }),
-                    step.meta === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                        className: "block truncate text-xs text-muted-foreground",
-                        children: step.meta
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx("span", {
-                className: "shrink-0 text-[10.5px] font-bold uppercase tracking-[0.05em] text-muted-foreground",
-                children: STATE_LABEL[step.status]
-            })
-        ]
-    });
+ * status spelled out in text so it never depends on colour alone. */
+export function StepListRow({ step, className }) {
+    return (_jsxs("li", { "data-step-status": step.status, className: cn("grid grid-cols-[20px_minmax(0,1fr)_auto] items-start gap-2 py-1.5", className), children: [_jsx("span", { "aria-hidden": true, className: cn("mt-0.5 grid size-5 place-items-center rounded-sm border text-[10px] font-semibold", MARK_CLASS[step.status]), children: step.status === "done" ? (_jsx(Check, { className: "size-3" })) : step.status === "failed" ? (_jsx(X, { className: "size-3" })) : step.status === "active" ? (_jsx(StatusDot, { label: "", tone: "emphasis", live: true })) : null }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: cn("block truncate text-sm", LABEL_CLASS[step.status]), children: step.name }), step.meta === undefined ? null : (_jsx("span", { className: "block truncate text-xs text-muted-foreground", children: step.meta }))] }), _jsx("span", { className: "shrink-0 text-[10.5px] font-bold uppercase tracking-[0.05em] text-muted-foreground", children: STATE_LABEL[step.status] })] }));
 }
 /**
  * A run's steps and how far along each one is. `aria-live="polite"` so a
  * step flipping to done or failed is announced without stealing focus from
  * wherever the reader actually is — the same rule `progress-checklist.tsx`
  * follows for a long-running operation's checklist.
- */ export function StepList({ steps, label = "Steps", className }) {
-    if (steps.length === 0) return null;
-    return /*#__PURE__*/ _jsx("ol", {
-        "aria-label": label,
-        "aria-live": "polite",
-        className: cn("flex flex-col", className),
-        children: steps.map((step)=>/*#__PURE__*/ _jsx(StepListRow, {
-                step: step
-            }, step.id))
-    });
+ */
+export function StepList({ steps, label = "Steps", className }) {
+    if (steps.length === 0)
+        return null;
+    return (_jsx("ol", { "aria-label": label, "aria-live": "polite", className: cn("flex flex-col", className), children: steps.map((step) => (_jsx(StepListRow, { step: step }, step.id))) }));
 }

package/dist/ui/switch.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 /**
@@ -10,20 +11,7 @@ import { cn } from "../lib/utils.js";
  *
  * The knob is a `<span>` inside the button rather than a `::after`, so its
  * transform animates independently of the track's colour transition.
- */ export function Switch({ checked, onCheckedChange, label, id, disabled = false, describedBy, className }) {
-    return /*#__PURE__*/ _jsx("button", {
-        type: "button",
-        id: id,
-        role: "switch",
-        "aria-checked": checked,
-        "aria-label": label,
-        "aria-describedby": describedBy,
-        disabled: disabled,
-        onClick: ()=>onCheckedChange(!checked),
-        className: cn("inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.5 transition-colors disabled:opacity-50", checked ? "bg-primary" : "bg-input", className),
-        children: /*#__PURE__*/ _jsx("span", {
-            "aria-hidden": true,
-            className: cn("size-4 rounded-full bg-background transition-transform", checked && "translate-x-4")
-        })
-    });
+ */
+export function Switch({ checked, onCheckedChange, label, id, disabled = false, describedBy, className, }) {
+    return (_jsx("button", { type: "button", id: id, role: "switch", "aria-checked": checked, "aria-label": label, "aria-describedby": describedBy, disabled: disabled, onClick: () => onCheckedChange(!checked), className: cn("inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.5 transition-colors disabled:opacity-50", checked ? "bg-primary" : "bg-input", className), children: _jsx("span", { "aria-hidden": true, className: cn("size-4 rounded-full bg-background transition-transform", checked && "translate-x-4") }) }));
 }

package/dist/ui/table.js

@@ -1,48 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 export function Table({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        className: "relative w-full overflow-x-auto",
-        children: /*#__PURE__*/ _jsx("table", {
-            "data-slot": "table",
-            className: cn("w-full caption-bottom text-sm", className),
-            ...props
-        })
-    });
+    return (_jsx("div", { className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
 }
 export function TableHeader({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("thead", {
-        className: cn("[&_tr]:border-b [&_tr]:border-border", className),
-        ...props
-    });
+    return (_jsx("thead", { className: cn("[&_tr]:border-b [&_tr]:border-border", className), ...props }));
 }
 export function TableBody({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("tbody", {
-        className: cn("[&_tr:last-child]:border-0", className),
-        ...props
-    });
+    return (_jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), ...props }));
 }
 export function TableRow({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("tr", {
-        className: cn("border-b border-border transition-colors hover:bg-muted", className),
-        ...props
-    });
+    return (_jsx("tr", { className: cn("border-b border-border transition-colors hover:bg-muted", className), ...props }));
 }
 export function TableHead({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("th", {
-        className: cn("h-10 px-3 text-left align-middle font-medium text-muted-foreground", className),
-        ...props
-    });
+    return (_jsx("th", { className: cn("h-10 px-3 text-left align-middle font-medium text-muted-foreground", className), ...props }));
 }
 export function TableCell({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("td", {
-        className: cn("p-3 align-middle", className),
-        ...props
-    });
+    return _jsx("td", { className: cn("p-3 align-middle", className), ...props });
 }
 export function TableCaption({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("caption", {
-        className: cn("mt-3 text-sm text-muted-foreground", className),
-        ...props
-    });
+    return (_jsx("caption", { className: cn("mt-3 text-sm text-muted-foreground", className), ...props }));
 }

package/dist/ui/tabs.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef } from "react";
 import { cn } from "../lib/utils.js";
@@ -24,78 +25,62 @@ import { cn } from "../lib/utils.js";
  * next Tab press escapes from the wrong place. Selection by click does *not*
  * move focus — the clicked tab already has it — and focus is never pushed into
  * the panel, which is the "improvement" that stops people arrowing on.
- */ export function Tabs({ tabs, active, onChange, label, children, variant = "underline", className }) {
+ */
+export function Tabs({ tabs, active, onChange, label, children, variant = "underline", className, }) {
     const base = useId();
-    const tabId = (id)=>`${base}-tab-${id}`;
-    const panelId = (id)=>`${base}-panel-${id}`;
+    const tabId = (id) => `${base}-tab-${id}`;
+    const panelId = (id) => `${base}-panel-${id}`;
     // Every tab button is rendered whatever the selection, so the node to focus
     // already exists at the moment the key is handled — no effect, no timer.
     const buttons = useRef(new Map());
-    /** Arrow/Home/End selection: change the tab *and* take focus with it. */ function focusTab(id) {
+    /** Arrow/Home/End selection: change the tab *and* take focus with it. */
+    function focusTab(id) {
         onChange(id);
         buttons.current.get(id)?.focus();
     }
     function move(delta) {
-        const index = tabs.findIndex((tab)=>tab.id === active);
+        const index = tabs.findIndex((tab) => tab.id === active);
         const next = tabs[(index + delta + tabs.length) % tabs.length];
-        if (next !== undefined) focusTab(next.id);
+        if (next !== undefined)
+            focusTab(next.id);
     }
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn("flex flex-col gap-4", className),
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                role: "tablist",
-                "aria-label": label,
-                onKeyDown: (event)=>{
+    return (_jsxs("div", { className: cn("flex flex-col gap-4", className), children: [_jsx("div", { role: "tablist", "aria-label": label, onKeyDown: (event) => {
                     if (event.key === "ArrowRight") {
                         event.preventDefault();
                         move(1);
-                    } else if (event.key === "ArrowLeft") {
+                    }
+                    else if (event.key === "ArrowLeft") {
                         event.preventDefault();
                         move(-1);
-                    } else if (event.key === "Home") {
+                    }
+                    else if (event.key === "Home") {
                         event.preventDefault();
-                        if (tabs[0] !== undefined) focusTab(tabs[0].id);
-                    } else if (event.key === "End") {
+                        if (tabs[0] !== undefined)
+                            focusTab(tabs[0].id);
+                    }
+                    else if (event.key === "End") {
                         event.preventDefault();
                         const last = tabs[tabs.length - 1];
-                        if (last !== undefined) focusTab(last.id);
+                        if (last !== undefined)
+                            focusTab(last.id);
                     }
-                },
-                className: cn("flex flex-wrap items-center", variant === "underline" ? "gap-1 border-b border-border" : "gap-1 rounded-md border border-border p-1"),
-                children: tabs.map((tab)=>{
+                }, className: cn("flex flex-wrap items-center", variant === "underline"
+                    ? "gap-1 border-b border-border"
+                    : "gap-1 rounded-md border border-border p-1"), children: tabs.map((tab) => {
                     const selected = tab.id === active;
-                    return /*#__PURE__*/ _jsxs("button", {
-                        ref: (node)=>{
-                            if (node === null) buttons.current.delete(tab.id);
-                            else buttons.current.set(tab.id, node);
-                        },
-                        type: "button",
-                        role: "tab",
-                        id: tabId(tab.id),
-                        "aria-selected": selected,
-                        "aria-controls": panelId(tab.id),
-                        tabIndex: selected ? 0 : -1,
-                        onClick: ()=>onChange(tab.id),
-                        className: cn("inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors", variant === "underline" ? // inactive, so selecting a tab does not shift the row.
-                        selected ? "-mb-px border-b-2 border-primary-emphasis text-foreground" : "-mb-px border-b-2 border-transparent text-muted-foreground hover:text-foreground" : selected ? "rounded-sm bg-muted text-foreground" : "rounded-sm text-muted-foreground hover:text-foreground"),
-                        children: [
-                            tab.label,
-                            tab.count === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                                className: "rounded-sm bg-muted px-1.5 font-mono text-xs text-muted-foreground",
-                                children: tab.count
-                            })
-                        ]
-                    }, tab.id);
-                })
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                role: "tabpanel",
-                id: panelId(active),
-                "aria-labelledby": tabId(active),
-                tabIndex: 0,
-                children: children(active)
-            })
-        ]
-    });
+                    return (_jsxs("button", { ref: (node) => {
+                            if (node === null)
+                                buttons.current.delete(tab.id);
+                            else
+                                buttons.current.set(tab.id, node);
+                        }, type: "button", role: "tab", id: tabId(tab.id), "aria-selected": selected, "aria-controls": panelId(tab.id), tabIndex: selected ? 0 : -1, onClick: () => onChange(tab.id), className: cn("inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors", variant === "underline"
+                            ? // The 2px border exists on both states, transparent when
+                                // inactive, so selecting a tab does not shift the row.
+                                selected
+                                    ? "-mb-px border-b-2 border-primary-emphasis text-foreground"
+                                    : "-mb-px border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+                            : selected
+                                ? "rounded-sm bg-muted text-foreground"
+                                : "rounded-sm text-muted-foreground hover:text-foreground"), children: [tab.label, tab.count === undefined ? null : (_jsx("span", { className: "rounded-sm bg-muted px-1.5 font-mono text-xs text-muted-foreground", children: tab.count }))] }, tab.id));
+                }) }), _jsx("div", { role: "tabpanel", id: panelId(active), "aria-labelledby": tabId(active), tabIndex: 0, children: children(active) })] }));
 }

package/dist/ui/textarea.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { cn } from "../lib/utils.js";
@@ -6,27 +7,17 @@ import { cn } from "../lib/utils.js";
 const DEFAULT_MAX_HEIGHT_PX = 200;
 export function Textarea({ className, autoResize, maxHeight = DEFAULT_MAX_HEIGHT_PX, onChange, ...props }) {
     const ref = useRef(null);
-    const resize = (element)=>{
+    const resize = (element) => {
         element.style.height = "auto";
         element.style.height = `${Math.min(element.scrollHeight, maxHeight)}px`;
     };
-    useEffect(()=>{
-        if (autoResize && ref.current) resize(ref.current);
-    }, [
-        autoResize,
-        maxHeight
-    ]);
-    return /*#__PURE__*/ _jsx("textarea", {
-        ref: ref,
-        "data-slot": "textarea",
-        style: autoResize ? {
-            maxHeight
-        } : undefined,
-        className: cn("flex min-h-16 w-full min-w-0 rounded-md border border-input bg-card px-3 py-2 text-sm shadow-xs transition-colors", autoResize && "resize-none overflow-y-auto", "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground", "aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50", className),
-        onChange: (event)=>{
-            if (autoResize) resize(event.currentTarget);
+    useEffect(() => {
+        if (autoResize && ref.current)
+            resize(ref.current);
+    }, [autoResize, maxHeight]);
+    return (_jsx("textarea", { ref: ref, "data-slot": "textarea", style: autoResize ? { maxHeight } : undefined, className: cn("flex min-h-16 w-full min-w-0 rounded-md border border-input bg-card px-3 py-2 text-sm shadow-xs transition-colors", autoResize && "resize-none overflow-y-auto", "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground", "aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50", className), onChange: (event) => {
+            if (autoResize)
+                resize(event.currentTarget);
             onChange?.(event);
-        },
-        ...props
-    });
+        }, ...props }));
 }

package/dist/ui/theme-provider.js

@@ -1,27 +1,26 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { DEFAULT_THEME_STORAGE_KEY, applyThemeToRoot, nextThemeMode, parseThemePreference, resolveThemeMode, serializeThemePreference } from "../lib/theme.js";
-const ThemeContext = /*#__PURE__*/ createContext(null);
-function readSystemPrefersDark() {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-        return false;
-    }
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { DEFAULT_THEME_STORAGE_KEY, applyThemeToRoot, nextThemeMode, parseThemePreference, resolveThemeMode, serializeThemePreference, } from "../lib/theme.js";
+const ThemeContext = createContext(null);
 function readStoredPreference(storageKey, fallback) {
-    if (typeof window === "undefined") return fallback;
+    if (typeof window === "undefined")
+        return fallback;
     try {
         return parseThemePreference(window.localStorage.getItem(storageKey), fallback);
-    } catch  {
+    }
+    catch {
         return fallback;
     }
 }
 function writeStoredPreference(storageKey, preference) {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined")
+        return;
     try {
         window.localStorage.setItem(storageKey, serializeThemePreference(preference));
-    } catch  {
-    // Quota / private mode — preference still applies for this session.
+    }
+    catch {
+        // Quota / private mode — preference still applies for this session.
     }
 }
 /**
@@ -30,92 +29,69 @@ function writeStoredPreference(storageKey, preference) {
  * The host mounts this once near the root and keys `storageKey` by user when
  * signed in. Mode is applied as `.dark` on the root (see theme.css); presets
  * as `data-theme`. Components never import storage — they call `useTheme`.
- */ export function ThemeProvider({ children, storageKey = DEFAULT_THEME_STORAGE_KEY, defaultMode = "system", defaultPreset = "default", root = null }) {
-    const fallback = useMemo(()=>({
-            mode: defaultMode,
-            preset: defaultPreset
-        }), [
-        defaultMode,
-        defaultPreset
-    ]);
-    const [preference, setPreference] = useState(()=>readStoredPreference(storageKey, fallback));
-    const [systemPrefersDark, setSystemPrefersDark] = useState(readSystemPrefersDark);
-    // Re-read when the host changes the storage key (e.g. user signs in).
-    useEffect(()=>{
+ */
+export function ThemeProvider({ children, storageKey = DEFAULT_THEME_STORAGE_KEY, defaultMode = "system", defaultPreset = "default", root = null, }) {
+    const fallback = useMemo(() => ({ mode: defaultMode, preset: defaultPreset }), [defaultMode, defaultPreset]);
+    // Both start from what the server renders; the effects below read
+    // localStorage and matchMedia after mount so hydration never mismatches.
+    const [preference, setPreference] = useState(fallback);
+    const [systemPrefersDark, setSystemPrefersDark] = useState(false);
+    // Re-read on mount and when the host changes the storage key (e.g. user signs in).
+    useEffect(() => {
         setPreference(readStoredPreference(storageKey, fallback));
-    }, [
-        storageKey,
-        fallback
-    ]);
-    useEffect(()=>{
-        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    }, [storageKey, fallback]);
+    useEffect(() => {
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
             return;
         }
         const media = window.matchMedia("(prefers-color-scheme: dark)");
-        const onChange = ()=>setSystemPrefersDark(media.matches);
+        const onChange = () => setSystemPrefersDark(media.matches);
         onChange();
         media.addEventListener("change", onChange);
-        return ()=>media.removeEventListener("change", onChange);
+        return () => media.removeEventListener("change", onChange);
     }, []);
     const resolvedMode = resolveThemeMode(preference.mode, systemPrefersDark);
-    useEffect(()=>{
-        const target = root ?? (typeof document !== "undefined" ? document.documentElement : null);
-        if (target === null) return;
+    useEffect(() => {
+        const target = root ??
+            (typeof document !== "undefined" ? document.documentElement : null);
+        if (target === null)
+            return;
         applyThemeToRoot(target, resolvedMode, preference.preset);
-    }, [
-        root,
-        resolvedMode,
-        preference.preset
-    ]);
-    const setMode = useCallback((mode)=>{
-        setPreference((current)=>{
-            const next = {
-                mode,
-                preset: current.preset
-            };
+    }, [root, resolvedMode, preference.preset]);
+    const setMode = useCallback((mode) => {
+        setPreference((current) => {
+            const next = { mode, preset: current.preset };
             writeStoredPreference(storageKey, next);
             return next;
         });
-    }, [
-        storageKey
-    ]);
-    const setPreset = useCallback((preset)=>{
-        setPreference((current)=>{
-            const next = {
-                mode: current.mode,
-                preset
-            };
+    }, [storageKey]);
+    const setPreset = useCallback((preset) => {
+        setPreference((current) => {
+            const next = { mode: current.mode, preset };
             writeStoredPreference(storageKey, next);
             return next;
         });
-    }, [
-        storageKey
-    ]);
-    const cycleMode = useCallback(()=>{
+    }, [storageKey]);
+    const cycleMode = useCallback(() => {
         setMode(nextThemeMode(preference.mode));
-    }, [
-        preference.mode,
-        setMode
-    ]);
-    const value = useMemo(()=>({
-            mode: preference.mode,
-            setMode,
-            cycleMode,
-            resolvedMode,
-            preset: preference.preset,
-            setPreset
-        }), [
+    }, [preference.mode, setMode]);
+    const value = useMemo(() => ({
+        mode: preference.mode,
+        setMode,
+        cycleMode,
+        resolvedMode,
+        preset: preference.preset,
+        setPreset,
+    }), [
         preference.mode,
         preference.preset,
         setMode,
         cycleMode,
         resolvedMode,
-        setPreset
+        setPreset,
     ]);
-    return /*#__PURE__*/ _jsx(ThemeContext.Provider, {
-        value: value,
-        children: children
-    });
+    return (_jsx(ThemeContext.Provider, { value: value, children: children }));
 }
 export function useTheme() {
     const value = useContext(ThemeContext);

package/dist/ui/theme-toggle.js

@@ -1,32 +1,29 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Monitor, Moon, Sun } from "lucide-react";
 import { Button } from "./button.js";
 import { useTheme } from "./theme-provider.js";
 function iconFor(mode) {
-    if (mode === "light") return /*#__PURE__*/ _jsx(Sun, {});
-    if (mode === "dark") return /*#__PURE__*/ _jsx(Moon, {});
-    return /*#__PURE__*/ _jsx(Monitor, {});
+    if (mode === "light")
+        return _jsx(Sun, {});
+    if (mode === "dark")
+        return _jsx(Moon, {});
+    return _jsx(Monitor, {});
 }
 function labelFor(mode) {
-    if (mode === "light") return "Light theme";
-    if (mode === "dark") return "Dark theme";
+    if (mode === "light")
+        return "Light theme";
+    if (mode === "dark")
+        return "Dark theme";
     return "System theme";
 }
 /**
  * Cycles system → light → dark. Intended for the host identity dock (or any
  * chrome that needs a one-control theme switch). Uses `useTheme`, so it must
  * sit under `ThemeProvider`.
- */ export function ThemeToggle({ label, variant = "ghost", size = "sm", ...props }) {
+ */
+export function ThemeToggle({ label, variant = "ghost", size = "sm", ...props }) {
     const { mode, cycleMode } = useTheme();
     const name = label ?? labelFor(mode);
-    return /*#__PURE__*/ _jsx(Button, {
-        ...props,
-        type: "button",
-        variant: variant,
-        size: size,
-        onClick: cycleMode,
-        title: name,
-        "aria-label": name,
-        children: iconFor(mode)
-    });
+    return (_jsx(Button, { ...props, type: "button", variant: variant, size: size, onClick: cycleMode, title: name, "aria-label": name, children: iconFor(mode) }));
 }

package/dist/ui/thinking-indicator.js

@@ -1,19 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { ThinkingMark } from "./thinking-mark.js";
-/** A thinking status with Silk, Strata, or Echo motion. Defaults to Silk. */ export function ThinkingIndicator({ label = "Thinking...", className, style, ...markProps }) {
-    return /*#__PURE__*/ _jsxs("span", {
-        role: "status",
-        className: cn("inline-flex items-center gap-1.5 text-sm text-muted-foreground", className),
-        style: style,
-        children: [
-            /*#__PURE__*/ _jsx(ThinkingMark, {
-                ...markProps,
-                className: "-translate-y-[8%]"
-            }),
-            /*#__PURE__*/ _jsx("span", {
-                children: label
-            })
-        ]
-    });
+/** A thinking status with Silk, Strata, or Echo motion. Defaults to Silk. */
+export function ThinkingIndicator({ label = "Thinking...", className, style, ...markProps }) {
+    return (_jsxs("span", { role: "status", className: cn("inline-flex items-center gap-1.5 text-sm text-muted-foreground", className), style: style, children: [_jsx(ThinkingMark, { ...markProps, className: "-translate-y-[8%]" }), _jsx("span", { children: label })] }));
 }