@corbits/react-ui 0.1.0 → 0.2.0

package/dist/ui/tool-block.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import { useControllableState } from "../hooks/use-controllable-state.js";
@@ -9,7 +10,7 @@ const STATE_TEXT = {
     "output-available": "Done",
     error: "Failed",
     "approval-requested": "Needs approval",
-    "output-denied": "Denied"
+    "output-denied": "Denied",
 };
 /**
  * Orange (`emphasis`) is reserved for `approval-requested` alone: it is the
@@ -18,25 +19,27 @@ const STATE_TEXT = {
  * through the dot's own pulse animation (`StatusDot`'s `live` prop) — giving
  * it orange too would stack two "look here" signals on a state that isn't
  * actually asking for anything.
- */ const STATE_TONE = {
+ */
+const STATE_TONE = {
     pending: "neutral",
     running: "neutral",
     "output-available": "neutral",
     error: "danger",
     "approval-requested": "emphasis",
-    "output-denied": "danger"
+    "output-denied": "danger",
 };
-/** True when the state carries no `error`/`running` weight in a warning sense but still opens by default. */ const OPENS_BY_DEFAULT = {
+/** True when the state carries no `error`/`running` weight in a warning sense but still opens by default. */
+const OPENS_BY_DEFAULT = {
     pending: false,
     running: false,
     "output-available": false,
     error: true,
     "approval-requested": true,
-    "output-denied": true
+    "output-denied": true,
 };
 function humaniseToolName(name) {
     const [provider, ...rest] = name.split("__");
-    const humanise = (value)=>{
+    const humanise = (value) => {
         const words = value.replace(/[_-]+/g, " ").trim();
         return words.charAt(0).toUpperCase() + words.slice(1);
     };
@@ -46,7 +49,7 @@ function humaniseToolName(name) {
     return humanise(name);
 }
 function stateDetailText(state) {
-    switch(state.status){
+    switch (state.status) {
         case "output-available":
             return state.output;
         case "error":
@@ -60,7 +63,7 @@ function stateDetailText(state) {
     }
 }
 function stateDetailTitle(state) {
-    switch(state.status){
+    switch (state.status) {
         case "error":
             return "Error";
         case "approval-requested":
@@ -84,87 +87,32 @@ function stateDetailTitle(state) {
  *
  * Uncontrolled by default, seeded from `defaultOpen` (or the state's own
  * default). Pass `open`/`onOpenChange` to drive it from a parent.
- */ export function ToolBlock({ name, label, state, input, defaultOpen, open: openProp, onOpenChange, className }) {
+ */
+export function ToolBlock({ name, label, state, input, defaultOpen, open: openProp, onOpenChange, className, }) {
     const [open, setOpen] = useControllableState({
         value: openProp,
         defaultValue: defaultOpen ?? OPENS_BY_DEFAULT[state.status],
         onChange: onOpenChange,
-        name: "ToolBlock"
+        name: "ToolBlock",
     });
     const detailText = stateDetailText(state);
     const hasDetail = input !== undefined || detailText !== undefined;
     const displayLabel = label !== undefined && label.length > 0 ? label : humaniseToolName(name);
-    return /*#__PURE__*/ _jsxs("div", {
-        "data-slot": "tool-block",
-        "data-status": state.status,
-        className: cn("text-xs", className),
-        children: [
-            /*#__PURE__*/ _jsxs("button", {
-                type: "button",
-                onClick: ()=>setOpen((value)=>!value),
-                "aria-expanded": open,
-                disabled: !hasDetail,
+    return (_jsxs("div", { "data-slot": "tool-block", "data-status": state.status, className: cn("text-xs", className), children: [_jsxs("button", { type: "button", onClick: () => setOpen((value) => !value), "aria-expanded": open, disabled: !hasDetail, 
                 // `relative` plus the `::after` pseudo-element below extends the
                 // button's effective (vertical) hit area to 40px without inflating
                 // its own padding/density — see design-engineering.md's hit-area
                 // pattern. The row is already full-width, so only height needs
                 // extending.
-                className: "relative flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-muted-foreground transition-colors after:absolute after:inset-x-0 after:top-1/2 after:h-10 after:-translate-y-1/2 hover:bg-muted hover:text-foreground disabled:hover:bg-transparent",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        "data-slot": "tool-block-status",
+                className: "relative flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-muted-foreground transition-colors after:absolute after:inset-x-0 after:top-1/2 after:h-10 after:-translate-y-1/2 hover:bg-muted hover:text-foreground disabled:hover:bg-transparent", children: [_jsx("span", { "data-slot": "tool-block-status", 
                         // A pending approval is human-blocking: it needs to reach assistive
                         // tech the instant it appears, not only when a reader happens to
                         // tab onto this button. Scoped to this span alone (not the whole
                         // block) so every other state change in a busy transcript stays
                         // silent — announcing every "Working" -> "Done" tick here would be
                         // spam.
-                        role: state.status === "approval-requested" ? "status" : undefined,
-                        "aria-live": state.status === "approval-requested" ? "polite" : undefined,
-                        children: /*#__PURE__*/ _jsx(StatusDot, {
-                            label: STATE_TEXT[state.status],
-                            live: state.status === "running",
-                            tone: STATE_TONE[state.status]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "min-w-0 flex-1 truncate",
-                        children: displayLabel
-                    }),
-                    hasDetail ? /*#__PURE__*/ _jsx(ChevronRight, {
-                        className: cn("size-3.5 shrink-0 transition-transform duration-200 ease-out", open && "rotate-90"),
-                        "aria-hidden": true
-                    }) : null
-                ]
-            }),
-            open && hasDetail ? /*#__PURE__*/ _jsxs("div", {
-                className: "mt-1 ml-4 flex flex-col gap-2 border-l border-border pl-3 [animation:corbits-rail-block-in_200ms_var(--ease-out)_both]",
-                children: [
-                    input === undefined ? null : /*#__PURE__*/ _jsx(Detail, {
-                        title: "Input",
-                        children: JSON.stringify(input, null, 2)
-                    }),
-                    detailText === undefined ? null : /*#__PURE__*/ _jsx(Detail, {
-                        title: stateDetailTitle(state),
-                        children: detailText
-                    })
-                ]
-            }) : null
-        ]
-    });
+                        role: state.status === "approval-requested" ? "status" : undefined, "aria-live": state.status === "approval-requested" ? "polite" : undefined, children: _jsx(StatusDot, { label: STATE_TEXT[state.status], live: state.status === "running", tone: STATE_TONE[state.status] }) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: displayLabel }), hasDetail ? (_jsx(ChevronRight, { className: cn("size-3.5 shrink-0 transition-transform duration-200 ease-out", open && "rotate-90"), "aria-hidden": true })) : null] }), open && hasDetail ? (_jsxs("div", { className: "mt-1 ml-4 flex flex-col gap-2 border-l border-border pl-3 [animation:corbits-rail-block-in_200ms_var(--ease-out)_both]", children: [input === undefined ? null : (_jsx(Detail, { title: "Input", children: JSON.stringify(input, null, 2) })), detailText === undefined ? null : (_jsx(Detail, { title: stateDetailTitle(state), children: detailText }))] })) : null] }));
 }
 function Detail({ title, children }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "flex flex-col gap-1",
-        children: [
-            /*#__PURE__*/ _jsx("p", {
-                className: "text-[10px] font-semibold tracking-[0.1em] text-muted-foreground uppercase",
-                children: title
-            }),
-            /*#__PURE__*/ _jsx("pre", {
-                className: "max-h-48 overflow-auto rounded-md bg-muted p-2 font-mono text-[11px] whitespace-pre-wrap",
-                children: children
-            })
-        ]
-    });
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-[10px] font-semibold tracking-[0.1em] text-muted-foreground uppercase", children: title }), _jsx("pre", { className: "max-h-48 overflow-auto rounded-md bg-muted p-2 font-mono text-[11px] whitespace-pre-wrap", children: children })] }));
 }

package/dist/ui/tool-narrative.d.ts

@@ -19,4 +19,4 @@ export type ToolNarrativeProps = {
     readonly onOpenChange?: (open: boolean) => void;
     readonly className?: string;
 };
-export declare function ToolNarrative({ part, open: openProp, onOpenChange, className }: ToolNarrativeProps): import("react").JSX.Element;
+export declare function ToolNarrative({ part, open: openProp, onOpenChange, className, }: ToolNarrativeProps): import("react").JSX.Element;

package/dist/ui/tool-narrative.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import { useControllableState } from "../hooks/use-controllable-state.js";
@@ -7,71 +8,23 @@ import { StatusDot } from "./status-dot.js";
 const STATE_TEXT = {
     running: "Working",
     done: "Done",
-    error: "Failed"
+    error: "Failed",
 };
-export function ToolNarrative({ part, open: openProp, onOpenChange, className }) {
+export function ToolNarrative({ part, open: openProp, onOpenChange, className, }) {
     const [open, setOpen] = useControllableState({
         value: openProp,
         defaultValue: part.state === "error",
         onChange: onOpenChange,
-        name: "ToolNarrative"
+        name: "ToolNarrative",
     });
     const label = toolLabel(part);
     const hasDetail = part.output !== undefined || part.input !== undefined;
-    return /*#__PURE__*/ _jsxs("div", {
-        "data-slot": "tool-narrative",
-        className: cn("text-xs", className),
-        children: [
-            /*#__PURE__*/ _jsxs("button", {
-                type: "button",
-                onClick: ()=>setOpen((value)=>!value),
-                "aria-expanded": open,
-                disabled: !hasDetail,
-                className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:hover:bg-transparent",
-                children: [
-                    /*#__PURE__*/ _jsx(StatusDot, {
-                        label: STATE_TEXT[part.state],
-                        live: part.state === "running",
-                        tone: part.state === "error" ? "danger" : part.state === "running" ? "emphasis" : "neutral"
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "min-w-0 flex-1 truncate",
-                        children: label
-                    }),
-                    hasDetail ? /*#__PURE__*/ _jsx(ChevronRight, {
-                        className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90"),
-                        "aria-hidden": true
-                    }) : null
-                ]
-            }),
-            open && hasDetail ? /*#__PURE__*/ _jsxs("div", {
-                className: "mt-1 ml-4 flex flex-col gap-2 border-l border-border pl-3",
-                children: [
-                    part.input === undefined ? null : /*#__PURE__*/ _jsx(Detail, {
-                        title: "Input",
-                        children: JSON.stringify(part.input, null, 2)
-                    }),
-                    part.output === undefined ? null : /*#__PURE__*/ _jsx(Detail, {
-                        title: part.state === "error" ? "Error" : "Output",
-                        children: part.output
-                    })
-                ]
-            }) : null
-        ]
-    });
+    return (_jsxs("div", { "data-slot": "tool-narrative", className: cn("text-xs", className), children: [_jsxs("button", { type: "button", onClick: () => setOpen((value) => !value), "aria-expanded": open, disabled: !hasDetail, className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:hover:bg-transparent", children: [_jsx(StatusDot, { label: STATE_TEXT[part.state], live: part.state === "running", tone: part.state === "error"
+                            ? "danger"
+                            : part.state === "running"
+                                ? "emphasis"
+                                : "neutral" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), hasDetail ? (_jsx(ChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90"), "aria-hidden": true })) : null] }), open && hasDetail ? (_jsxs("div", { className: "mt-1 ml-4 flex flex-col gap-2 border-l border-border pl-3", children: [part.input === undefined ? null : (_jsx(Detail, { title: "Input", children: JSON.stringify(part.input, null, 2) })), part.output === undefined ? null : (_jsx(Detail, { title: part.state === "error" ? "Error" : "Output", children: part.output }))] })) : null] }));
 }
 function Detail({ title, children }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "flex flex-col gap-1",
-        children: [
-            /*#__PURE__*/ _jsx("p", {
-                className: "text-[10px] font-semibold tracking-[0.1em] text-muted-foreground uppercase",
-                children: title
-            }),
-            /*#__PURE__*/ _jsx("pre", {
-                className: "max-h-48 overflow-auto rounded-md bg-muted p-2 font-mono text-[11px] whitespace-pre-wrap",
-                children: children
-            })
-        ]
-    });
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-[10px] font-semibold tracking-[0.1em] text-muted-foreground uppercase", children: title }), _jsx("pre", { className: "max-h-48 overflow-auto rounded-md bg-muted p-2 font-mono text-[11px] whitespace-pre-wrap", children: children })] }));
 }

package/dist/ui/tool-picker.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { useCommandPaletteNavigation } from "../hooks/use-command-palette-navigation.js";
@@ -7,32 +8,37 @@ import { EmptyState } from "./empty-state.js";
 import { Input } from "./input.js";
 const STATUS_LABEL = {
     pending: "Pending",
-    disabled: "Disabled"
+    disabled: "Disabled",
 };
 function matches(item, query) {
-    if (query.length === 0) return true;
+    if (query.length === 0)
+        return true;
     const haystack = `${item.name} ${item.package} ${item.description ?? ""}`.toLowerCase();
     return haystack.includes(query.toLowerCase());
 }
 function groupByPackage(items) {
     const groups = new Map();
-    for (const item of items){
+    for (const item of items) {
         const group = groups.get(item.package);
-        if (group === undefined) groups.set(item.package, [
-            item
-        ]);
-        else group.push(item);
+        if (group === undefined)
+            groups.set(item.package, [item]);
+        else
+            group.push(item);
     }
-    return [
-        ...groups.entries()
-    ].map(([id, groupItems])=>({
-            id,
-            items: groupItems
-        }));
+    return [...groups.entries()].map(([id, groupItems]) => ({
+        id,
+        items: groupItems,
+    }));
 }
-/** Visible group title: a display name if the catalog already sent one, else a humanized slug. */ function groupHeading(id) {
-    if (/[A-Z]/.test(id) || /\s/.test(id)) return id;
-    return id.split(/[-_./]+/).filter(Boolean).map((part)=>part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+/** Visible group title: a display name if the catalog already sent one, else a humanized slug. */
+function groupHeading(id) {
+    if (/[A-Z]/.test(id) || /\s/.test(id))
+        return id;
+    return id
+        .split(/[-_./]+/)
+        .filter(Boolean)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(" ");
 }
 /**
  * Browse, search and select tools from a caller-supplied catalog, grouped by
@@ -43,52 +49,42 @@ function groupByPackage(items) {
  * Disabled items stay in the list rather than disappearing — a tool a
  * caller cannot pick right now is still information ("already attached
  * elsewhere", "needs a credential") that vanishing would hide.
- */ export function ToolPicker({ items, value, onChange, multiple = false, loading = false, empty, searchPlaceholder = "Search tools…", searchLabel = "Search tools", className }) {
+ */
+export function ToolPicker({ items, value, onChange, multiple = false, loading = false, empty, searchPlaceholder = "Search tools…", searchLabel = "Search tools", className, }) {
     const baseId = useId();
     const [query, setQuery] = useState("");
     const listRef = useRef(null);
-    const filtered = useMemo(()=>items.filter((item)=>matches(item, query)), [
-        items,
-        query
-    ]);
-    const groups = useMemo(()=>groupByPackage(filtered), [
-        filtered
-    ]);
-    const selectedIds = useMemo(()=>new Set(value), [
-        value
-    ]);
-    const toggle = (item)=>{
-        if (item.status === "disabled") return;
+    const filtered = useMemo(() => items.filter((item) => matches(item, query)), [items, query]);
+    const groups = useMemo(() => groupByPackage(filtered), [filtered]);
+    const selectedIds = useMemo(() => new Set(value), [value]);
+    const toggle = (item) => {
+        if (item.status === "disabled")
+            return;
         const isSelected = selectedIds.has(item.id);
         if (!multiple) {
-            onChange(isSelected ? [] : [
-                item.id
-            ]);
+            onChange(isSelected ? [] : [item.id]);
             return;
         }
-        onChange(isSelected ? value.filter((id)=>id !== item.id) : [
-            ...value,
-            item.id
-        ]);
+        onChange(isSelected ? value.filter((id) => id !== item.id) : [...value, item.id]);
     };
     const navigation = useCommandPaletteNavigation({
         items: filtered,
-        onSelect: (id)=>{
-            const item = filtered.find((candidate)=>candidate.id === id);
-            if (item !== undefined) toggle(item);
+        onSelect: (id) => {
+            const item = filtered.find((candidate) => candidate.id === id);
+            if (item !== undefined)
+                toggle(item);
+        },
+        onClose: () => {
+            /* Escape is handled below so an empty query does not swallow the key. */
         },
-        onClose: ()=>{
-        /* Escape is handled below so an empty query does not swallow the key. */ }
     });
-    useEffect(()=>{
-        listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({
-            block: "nearest"
-        });
-    }, [
-        navigation.activeId
-    ]);
-    const optionId = (id)=>`${baseId}-option-${id}`;
-    const onKeyDown = (event)=>{
+    useEffect(() => {
+        listRef.current
+            ?.querySelector('[data-active="true"]')
+            ?.scrollIntoView({ block: "nearest" });
+    }, [navigation.activeId]);
+    const optionId = (id) => `${baseId}-option-${id}`;
+    const onKeyDown = (event) => {
         if (event.key === "Escape") {
             if (query.length > 0) {
                 event.preventDefault();
@@ -100,101 +96,17 @@ function groupByPackage(items) {
     };
     const emptyCatalog = items.length === 0;
     const noMatches = !emptyCatalog && filtered.length === 0;
-    return /*#__PURE__*/ _jsxs("div", {
-        "data-slot": "tool-picker",
-        className: cn("flex min-h-0 flex-col gap-2", className),
-        children: [
-            /*#__PURE__*/ _jsx(Input, {
-                value: query,
-                onChange: (event)=>setQuery(event.target.value),
-                onKeyDown: onKeyDown,
-                placeholder: searchPlaceholder,
-                "aria-label": searchLabel,
-                role: "combobox",
-                "aria-expanded": true,
-                "aria-autocomplete": "list",
-                "aria-controls": `${baseId}-list`,
-                "aria-activedescendant": navigation.activeId === undefined ? undefined : optionId(navigation.activeId),
-                "aria-busy": loading,
-                autoComplete: "off",
-                spellCheck: false
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                ref: listRef,
-                id: `${baseId}-list`,
-                role: "listbox",
-                "aria-label": "Tools",
-                "aria-multiselectable": multiple,
-                className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto",
-                children: loading ? /*#__PURE__*/ _jsx("p", {
-                    role: "presentation",
-                    className: "px-2 py-8 text-center text-sm text-muted-foreground",
-                    children: "Loading…"
-                }) : emptyCatalog ? /*#__PURE__*/ _jsx("div", {
-                    role: "presentation",
-                    children: empty ?? /*#__PURE__*/ _jsx(EmptyState, {
-                        title: "No tools",
-                        description: "Nothing in the catalog yet."
-                    })
-                }) : noMatches ? /*#__PURE__*/ _jsx("p", {
-                    role: "presentation",
-                    className: "px-2 py-8 text-center text-sm text-muted-foreground",
-                    children: "No tools match — try a different search."
-                }) : groups.map((group)=>/*#__PURE__*/ _jsxs("div", {
-                        role: "presentation",
-                        className: "flex flex-col gap-1",
-                        children: [
-                            /*#__PURE__*/ _jsx("p", {
-                                className: "px-3.5 py-1.5 text-[11px] font-semibold uppercase tracking-[0.1em] text-muted-foreground",
-                                children: groupHeading(group.id)
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                className: "flex flex-col gap-1",
-                                children: group.items.map((item)=>/*#__PURE__*/ _jsx(ToolPickerOption, {
-                                        id: optionId(item.id),
-                                        item: item,
-                                        selected: selectedIds.has(item.id),
-                                        active: navigation.activeId === item.id,
-                                        onSelect: ()=>toggle(item),
-                                        onPointerMove: ()=>navigation.setActiveId(item.id)
-                                    }, item.id))
-                            })
-                        ]
-                    }, group.id))
-            })
-        ]
-    });
+    return (_jsxs("div", { "data-slot": "tool-picker", className: cn("flex min-h-0 flex-col gap-2", className), children: [_jsx(Input, { value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown, placeholder: searchPlaceholder, "aria-label": searchLabel, role: "combobox", "aria-expanded": true, "aria-autocomplete": "list", "aria-controls": `${baseId}-list`, "aria-activedescendant": navigation.activeId === undefined
+                    ? undefined
+                    : optionId(navigation.activeId), "aria-busy": loading, autoComplete: "off", spellCheck: false }), _jsx("div", { ref: listRef, id: `${baseId}-list`, role: "listbox", "aria-label": "Tools", "aria-multiselectable": multiple, className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto", children: loading ? (_jsx("p", { role: "presentation", className: "px-2 py-8 text-center text-sm text-muted-foreground", children: "Loading\u2026" })) : emptyCatalog ? (_jsx("div", { role: "presentation", children: empty ?? (_jsx(EmptyState, { title: "No tools", description: "Nothing in the catalog yet." })) })) : noMatches ? (_jsx("p", { role: "presentation", className: "px-2 py-8 text-center text-sm text-muted-foreground", children: "No tools match \u2014 try a different search." })) : (groups.map((group) => (_jsxs("div", { role: "presentation", className: "flex flex-col gap-1", children: [_jsx("p", { className: "px-3.5 py-1.5 text-[11px] font-semibold uppercase tracking-[0.1em] text-muted-foreground", children: groupHeading(group.id) }), _jsx("div", { className: "flex flex-col gap-1", children: group.items.map((item) => (_jsx(ToolPickerOption, { id: optionId(item.id), item: item, selected: selectedIds.has(item.id), active: navigation.activeId === item.id, onSelect: () => toggle(item), onPointerMove: () => navigation.setActiveId(item.id) }, item.id))) })] }, group.id)))) })] }));
 }
-function ToolPickerOption({ id, item, selected, active, onSelect, onPointerMove }) {
+function ToolPickerOption({ id, item, selected, active, onSelect, onPointerMove, }) {
     const disabled = item.status === "disabled";
-    return /*#__PURE__*/ _jsxs("div", {
-        id: id,
-        role: "option",
-        "aria-selected": selected,
-        "aria-disabled": disabled,
-        "data-active": active,
-        onPointerMove: disabled ? undefined : onPointerMove,
-        onClick: disabled ? undefined : onSelect,
-        className: cn("flex w-full flex-col gap-1 rounded-lg border px-3.5 py-3 text-left transition-colors ease-out", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-muted active:brightness-95", selected ? "border-primary-emphasis bg-primary/10" : "border-border bg-card", // The keyboard cursor must stay visible on disabled rows — aria-activedescendant can land there.
-        active && "bg-muted"),
-        children: [
-            /*#__PURE__*/ _jsxs("span", {
-                className: "flex items-center gap-2",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "text-sm font-semibold",
-                        children: item.name
-                    }),
-                    item.status === undefined ? null : /*#__PURE__*/ _jsx(Badge, {
-                        tone: "neutral",
-                        children: STATUS_LABEL[item.status]
-                    })
-                ]
-            }),
-            item.description === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                className: "text-xs leading-snug text-muted-foreground",
-                children: item.description
-            })
-        ]
-    });
+    return (_jsxs("div", { id: id, role: "option", "aria-selected": selected, "aria-disabled": disabled, "data-active": active, onPointerMove: disabled ? undefined : onPointerMove, onClick: disabled ? undefined : onSelect, className: cn("flex w-full flex-col gap-1 rounded-lg border px-3.5 py-3 text-left transition-colors ease-out", disabled
+            ? "cursor-not-allowed opacity-50"
+            : "cursor-pointer hover:bg-muted active:brightness-95", selected
+            ? "border-primary-emphasis bg-primary/10"
+            : "border-border bg-card", 
+        // The keyboard cursor must stay visible on disabled rows — aria-activedescendant can land there.
+        active && "bg-muted"), children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold", children: item.name }), item.status === undefined ? null : (_jsx(Badge, { tone: "neutral", children: STATUS_LABEL[item.status] }))] }), item.description === undefined ? null : (_jsx("span", { className: "text-xs leading-snug text-muted-foreground", children: item.description }))] }));
 }

package/dist/ui/tooltip.d.ts

@@ -18,4 +18,4 @@ export type InfoTooltipProps = {
  * it is in the tab order, Radix associates the note by id, and tapping it
  * opens the tooltip on touch devices.
  */
-export declare function InfoTooltip({ label, triggerLabel, defaultOpen, className }: InfoTooltipProps): import("react").JSX.Element;
+export declare function InfoTooltip({ label, triggerLabel, defaultOpen, className, }: InfoTooltipProps): import("react").JSX.Element;

package/dist/ui/tooltip.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { InfoIcon } from "lucide-react";
@@ -12,37 +13,7 @@ import { cn } from "../lib/utils.js";
  * reader, and never fires on touch. A `<button>` trigger fixes all three:
  * it is in the tab order, Radix associates the note by id, and tapping it
  * opens the tooltip on touch devices.
- */ export function InfoTooltip({ label, triggerLabel, defaultOpen, className }) {
-    return /*#__PURE__*/ _jsx(TooltipPrimitive.Provider, {
-        delayDuration: 200,
-        children: /*#__PURE__*/ _jsxs(TooltipPrimitive.Root, {
-            defaultOpen: defaultOpen,
-            children: [
-                /*#__PURE__*/ _jsx(TooltipPrimitive.Trigger, {
-                    asChild: true,
-                    children: /*#__PURE__*/ _jsx("button", {
-                        type: "button",
-                        "aria-label": triggerLabel ?? label,
-                        className: cn("inline-flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors", "hover:text-foreground focus-visible:text-foreground focus-visible:outline-none", "focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--primary)_22%,transparent)]", className),
-                        children: /*#__PURE__*/ _jsx(InfoIcon, {
-                            className: "size-full"
-                        })
-                    })
-                }),
-                /*#__PURE__*/ _jsx(TooltipPrimitive.Portal, {
-                    children: /*#__PURE__*/ _jsxs(TooltipPrimitive.Content, {
-                        "data-slot": "tooltip-content",
-                        sideOffset: 6,
-                        className: cn("z-50 max-w-64 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-lg", "data-[state=delayed-open]:animate-[corbits-fade-in_150ms_ease-out] data-[state=closed]:animate-[corbits-fade-out_120ms_ease-in]"),
-                        children: [
-                            label,
-                            /*#__PURE__*/ _jsx(TooltipPrimitive.Arrow, {
-                                className: "fill-popover"
-                            })
-                        ]
-                    })
-                })
-            ]
-        })
-    });
+ */
+export function InfoTooltip({ label, triggerLabel, defaultOpen, className, }) {
+    return (_jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: _jsxs(TooltipPrimitive.Root, { defaultOpen: defaultOpen ?? false, children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": triggerLabel ?? label, className: cn("inline-flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors", "hover:text-foreground focus-visible:text-foreground focus-visible:outline-none", "focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--primary)_22%,transparent)]", className), children: _jsx(InfoIcon, { className: "size-full" }) }) }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: 6, className: cn("z-50 max-w-64 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-lg", "data-[state=delayed-open]:animate-[corbits-fade-in_150ms_ease-out] data-[state=closed]:animate-[corbits-fade-out_120ms_ease-in]"), children: [label, _jsx(TooltipPrimitive.Arrow, { className: "fill-popover" })] }) })] }) }));
 }