@corbits/react-ui 0.1.0 → 0.3.0

package/dist/ui/category-bars.js

@@ -6,64 +6,19 @@ import { ChartFrame } from "./chart-frame.js";
  * Dense horizontal category ranking for cost-by-model / calls-by-tool
  * style tables. Bars share one series colour; length encodes magnitude.
  * Absent secondary labels stay empty rather than inventing a zero.
- */ export function CategoryBars({ title, description, data, valueLabel = "Value", format = formatCompact, className }) {
-    const max = Math.max(0, ...data.map((d)=>d.value));
+ */
+export function CategoryBars({ title, description, data, valueLabel = "Value", format = formatCompact, className, }) {
+    const max = Math.max(0, ...data.map((d) => d.value));
     const axisMax = max === 0 ? 1 : max;
-    return /*#__PURE__*/ _jsx(ChartFrame, {
-        title: title,
-        ...description === undefined ? {} : {
-            description
-        },
-        table: {
-            columns: [
-                "Category",
-                valueLabel,
-                "Detail"
-            ],
-            rows: data.map((datum)=>[
-                    datum.label,
-                    format(datum.value),
-                    datum.secondaryLabel ?? "—"
-                ])
-        },
-        className: className,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: "flex flex-col gap-2",
-            role: "presentation",
-            children: data.map((datum)=>{
-                const pct = datum.value / axisMax * 100;
-                return /*#__PURE__*/ _jsxs("div", {
-                    className: "grid grid-cols-[minmax(6rem,10rem)_1fr_auto] items-center gap-2",
-                    children: [
-                        /*#__PURE__*/ _jsx("p", {
-                            className: "truncate text-xs font-medium",
-                            children: datum.label
-                        }),
-                        /*#__PURE__*/ _jsx("div", {
-                            className: "h-3 w-full bg-muted",
-                            children: /*#__PURE__*/ _jsx("div", {
-                                className: cn("h-full bg-primary-emphasis"),
-                                style: {
-                                    width: `${pct}%`
-                                }
-                            })
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: "min-w-[3.5rem] text-right font-mono text-[11px] leading-tight",
-                            children: [
-                                /*#__PURE__*/ _jsx("p", {
-                                    className: "font-semibold",
-                                    children: format(datum.value)
-                                }),
-                                datum.secondaryLabel === undefined ? null : /*#__PURE__*/ _jsx("p", {
-                                    className: "text-muted-foreground",
-                                    children: datum.secondaryLabel
-                                })
-                            ]
-                        })
-                    ]
-                }, datum.label);
-            })
-        })
-    });
+    return (_jsx(ChartFrame, { title: title, ...(description === undefined ? {} : { description }), table: {
+            columns: ["Category", valueLabel, "Detail"],
+            rows: data.map((datum) => [
+                datum.label,
+                format(datum.value),
+                datum.secondaryLabel ?? "—",
+            ]),
+        }, className: className, children: _jsx("div", { className: "flex flex-col gap-2", role: "presentation", children: data.map((datum) => {
+                const pct = (datum.value / axisMax) * 100;
+                return (_jsxs("div", { className: "grid grid-cols-[minmax(6rem,10rem)_1fr_auto] items-center gap-2", children: [_jsx("p", { className: "truncate text-xs font-medium", children: datum.label }), _jsx("div", { className: "h-3 w-full bg-muted", children: _jsx("div", { className: cn("h-full bg-primary-emphasis"), style: { width: `${pct}%` } }) }), _jsxs("div", { className: "min-w-[3.5rem] text-right font-mono text-[11px] leading-tight", children: [_jsx("p", { className: "font-semibold", children: format(datum.value) }), datum.secondaryLabel === undefined ? null : (_jsx("p", { className: "text-muted-foreground", children: datum.secondaryLabel }))] })] }, datum.label));
+            }) }) }));
 }

package/dist/ui/chart-frame.d.ts

@@ -29,7 +29,7 @@ export type ChartFrameProps = {
     readonly table: ChartTable;
     /** The plot itself — an `<svg>`. */
     readonly children: ReactNode;
-    readonly className?: string;
+    readonly className?: string | undefined;
 };
 /**
  * The frame every chart here sits in: a caption, a legend, the plot, and the
@@ -51,4 +51,4 @@ export type ChartFrameProps = {
  * cross-reference. Text never wears the series colour: a mid-lightness hue that
  * is correct for a 24px bar is unreadable at 12px.
  */
-export declare function ChartFrame({ title, description, legend, table, children, className }: ChartFrameProps): import("react").JSX.Element;
+export declare function ChartFrame({ title, description, legend, table, children, className, }: ChartFrameProps): import("react").JSX.Element;

package/dist/ui/chart-frame.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "./table.js";
 /**
  * The frame every chart here sits in: a caption, a legend, the plot, and the
  * same data as a table.
@@ -20,89 +20,10 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from ".
  * swatch with text — the text is the identity channel, the swatch is the
  * cross-reference. Text never wears the series colour: a mid-lightness hue that
  * is correct for a 24px bar is unreadable at 12px.
- */ export function ChartFrame({ title, description, legend, table, children, className }) {
+ */
+export function ChartFrame({ title, description, legend, table, children, className, }) {
     const showLegend = legend !== undefined && legend.length > 1;
-    return /*#__PURE__*/ _jsxs("figure", {
-        className: cn("flex flex-col gap-3", className),
-        children: [
-            /*#__PURE__*/ _jsxs("figcaption", {
-                className: "flex flex-col gap-0.5",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "text-sm font-semibold",
-                        children: title
-                    }),
-                    description === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                        className: "text-xs text-muted-foreground",
-                        children: description
-                    })
-                ]
-            }),
-            showLegend ? /*#__PURE__*/ _jsx("ul", {
-                className: "flex flex-wrap items-center gap-x-4 gap-y-1",
-                children: legend.map((entry)=>/*#__PURE__*/ _jsxs("li", {
-                        className: "flex items-center gap-1.5 text-xs text-muted-foreground",
-                        children: [
-                            entry.dash === undefined ? /*#__PURE__*/ _jsx("span", {
-                                "aria-hidden": true,
-                                className: "size-2.5 shrink-0 rounded-xs",
-                                style: {
-                                    backgroundColor: entry.color
-                                }
-                            }) : /*#__PURE__*/ _jsx("svg", {
-                                "aria-hidden": true,
-                                viewBox: "0 0 20 4",
-                                className: "h-1 w-5 shrink-0 overflow-visible",
-                                children: /*#__PURE__*/ _jsx("line", {
-                                    x1: 0,
-                                    y1: 2,
-                                    x2: 20,
-                                    y2: 2,
-                                    stroke: entry.color,
-                                    strokeWidth: 2.5,
-                                    strokeLinecap: "butt",
-                                    strokeDasharray: entry.dash
-                                })
-                            }),
-                            entry.label
-                        ]
-                    }, entry.label))
-            }) : null,
-            children,
-            /*#__PURE__*/ _jsxs("details", {
-                className: "text-xs",
-                children: [
-                    /*#__PURE__*/ _jsx("summary", {
-                        className: "cursor-pointer text-muted-foreground hover:text-foreground",
-                        children: "Show the data"
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "mt-2",
-                        children: /*#__PURE__*/ _jsxs(Table, {
-                            "aria-label": `${title} — data`,
-                            children: [
-                                /*#__PURE__*/ _jsx(TableHeader, {
-                                    children: /*#__PURE__*/ _jsx(TableRow, {
-                                        children: table.columns.map((column, index)=>/*#__PURE__*/ _jsx(TableHead, {
-                                                scope: "col",
-                                                className: index === 0 ? undefined : "text-right",
-                                                children: column
-                                            }, column))
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(TableBody, {
-                                    children: table.rows.map((row, rowIndex)=>/*#__PURE__*/ _jsx(TableRow, {
-                                            children: row.map((cell, cellIndex)=>/*#__PURE__*/ _jsx(TableCell, {
-                                                    className: cellIndex === 0 ? undefined : "text-right font-mono tabular-nums",
-                                                    children: cell
-                                                }, cellIndex))
-                                        }, rowIndex))
-                                })
-                            ]
-                        })
-                    })
-                ]
-            })
-        ]
-    });
+    return (_jsxs("figure", { className: cn("flex flex-col gap-3", className), children: [_jsxs("figcaption", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-semibold", children: title }), description === undefined ? null : (_jsx("span", { className: "text-xs text-muted-foreground", children: description }))] }), showLegend ? (_jsx("ul", { className: "flex flex-wrap items-center gap-x-4 gap-y-1", children: legend.map((entry) => (_jsxs("li", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [entry.dash === undefined ? (_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-xs", style: { backgroundColor: entry.color } })) : (_jsx("svg", { "aria-hidden": true, viewBox: "0 0 20 4", className: "h-1 w-5 shrink-0 overflow-visible", children: _jsx("line", { x1: 0, y1: 2, x2: 20, y2: 2, stroke: entry.color, strokeWidth: 2.5, strokeLinecap: "butt", strokeDasharray: entry.dash }) })), entry.label] }, entry.label))) })) : null, children, _jsxs("details", { className: "text-xs", children: [_jsx("summary", { className: "cursor-pointer text-muted-foreground hover:text-foreground", children: "Show the data" }), _jsx("div", { className: "mt-2", children: _jsxs(Table, { "aria-label": `${title} — data`, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: table.columns.map((column, index) => (_jsx(TableHead, { scope: "col", className: index === 0 ? undefined : "text-right", children: column }, column))) }) }), _jsx(TableBody, { children: table.rows.map((row, rowIndex) => (_jsx(TableRow, { children: row.map((cell, cellIndex) => (_jsx(TableCell, { className: cellIndex === 0
+                                                ? undefined
+                                                : "text-right font-mono tabular-nums", children: cell }, cellIndex))) }, rowIndex))) })] }) })] })] }));
 }

package/dist/ui/chat-composer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useDelayedAutofocus } from "../hooks/use-delayed-autofocus.js";
@@ -10,23 +11,10 @@ import { QuickReplyChips } from "./quick-reply-chips.js";
  * always-on, because a suggestion list next to ten prior turns is not a
  * suggestion anymore — it is clutter competing with what the user already
  * said.
- */ export function ChatComposer({ suggestions = [], onSuggestionSelect, busy = false, autoFocusOn = false, className, ...inputProps }) {
+ */
+export function ChatComposer({ suggestions = [], onSuggestionSelect, busy = false, autoFocusOn = false, className, ...inputProps }) {
     const textareaRef = useRef(null);
     useDelayedAutofocus(textareaRef, autoFocusOn);
     const showSuggestions = suggestions.length > 0 && onSuggestionSelect !== undefined;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn("flex flex-col gap-2", className),
-        children: [
-            showSuggestions ? /*#__PURE__*/ _jsx(QuickReplyChips, {
-                replies: suggestions,
-                onSelect: onSuggestionSelect
-            }) : null,
-            /*#__PURE__*/ _jsx(ChatInput, {
-                ...inputProps,
-                working: busy,
-                disabled: busy,
-                textareaRef: textareaRef
-            })
-        ]
-    });
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [showSuggestions ? (_jsx(QuickReplyChips, { replies: suggestions, onSelect: onSuggestionSelect })) : null, _jsx(ChatInput, { ...inputProps, working: busy, disabled: busy, textareaRef: textareaRef })] }));
 }

package/dist/ui/chat-dock-timing.js

@@ -2,10 +2,14 @@
  * The dock's one source of truth for motion timing. Every duration that has
  * to line up with another — the entrance pop, the scrim fade, the autofocus
  * delay — lives here so fixing one never means hunting the others down.
- */ /** How long the closed→docked entrance pop takes, in milliseconds. */ export const CHAT_DOCK_ENTRANCE_MS = 280;
-/** The scrim's own fade, coordinated to finish alongside the entrance. */ export const CHAT_DOCK_SCRIM_MS = CHAT_DOCK_ENTRANCE_MS;
+ */
+/** How long the closed→docked entrance pop takes, in milliseconds. */
+export const CHAT_DOCK_ENTRANCE_MS = 280;
+/** The scrim's own fade, coordinated to finish alongside the entrance. */
+export const CHAT_DOCK_SCRIM_MS = CHAT_DOCK_ENTRANCE_MS;
 /**
  * The composer's autofocus delay. Must be `>=` the entrance duration — focus
  * landing before the panel has finished animating steals the caret out from
  * under a still-moving element.
- */ export const CHAT_DOCK_AUTOFOCUS_DELAY_MS = CHAT_DOCK_ENTRANCE_MS;
+ */
+export const CHAT_DOCK_AUTOFOCUS_DELAY_MS = CHAT_DOCK_ENTRANCE_MS;

package/dist/ui/chat-input.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ArrowUp, Paperclip, Square, X } from "lucide-react";
 import { useEffect, useRef } from "react";
@@ -18,121 +19,40 @@ const MAX_ROWS_PX = 200;
  * The textarea grows with its content up to a cap, then scrolls. It is measured
  * rather than counted in rows, because a wrapped long line takes more height
  * than its newline count implies.
- */ export function ChatInput({ value, onValueChange, onSend, onStop, working = false, placeholder = "Send a message…", disabled = false, attachments = [], onAttach, onRemoveAttachment, textareaRef: externalTextareaRef, className }) {
+ */
+export function ChatInput({ value, onValueChange, onSend, onStop, working = false, placeholder = "Send a message…", disabled = false, attachments = [], onAttach, onRemoveAttachment, textareaRef: externalTextareaRef, className, }) {
     const internalTextareaRef = useRef(null);
     const textareaRef = externalTextareaRef ?? internalTextareaRef;
     const fileRef = useRef(null);
-    useEffect(()=>{
+    useEffect(() => {
         const node = textareaRef.current;
-        if (node === null) return;
+        if (node === null)
+            return;
         node.style.height = "auto";
         node.style.height = `${Math.min(node.scrollHeight, MAX_ROWS_PX)}px`;
-    }, [
-        value
-    ]);
+    }, [value]);
     const canSend = value.trim().length > 0 && !disabled;
     const showStop = working && onStop !== undefined;
-    const submit = ()=>{
-        if (!canSend) return;
+    const submit = () => {
+        if (!canSend)
+            return;
         onSend();
     };
-    return /*#__PURE__*/ _jsxs("form", {
-        className: cn("flex flex-col gap-2 rounded-lg border border-input bg-background p-2", className),
-        onSubmit: (event)=>{
+    return (_jsxs("form", { className: cn("flex flex-col gap-2 rounded-lg border border-input bg-background p-2", className), onSubmit: (event) => {
             event.preventDefault();
             submit();
-        },
-        children: [
-            attachments.length === 0 ? null : /*#__PURE__*/ _jsx("ul", {
-                "aria-label": "Attachments",
-                className: "flex flex-wrap gap-1.5",
-                children: attachments.map((attachment)=>/*#__PURE__*/ _jsxs("li", {
-                        className: "flex items-center gap-1.5 rounded-md bg-muted py-1 pr-1 pl-2 text-xs",
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "max-w-40 truncate",
-                                children: attachment.name
-                            }),
-                            onRemoveAttachment === undefined ? null : /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>onRemoveAttachment(attachment),
-                                "aria-label": `Remove ${attachment.name}`,
-                                className: "grid size-5 place-items-center rounded-sm text-muted-foreground hover:text-foreground",
-                                children: /*#__PURE__*/ _jsx(X, {
-                                    className: "size-3",
-                                    "aria-hidden": true
-                                })
-                            })
-                        ]
-                    }, attachment.id))
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex items-end gap-2",
-                children: [
-                    onAttach === undefined ? null : /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsx("input", {
-                                ref: fileRef,
-                                type: "file",
-                                multiple: true,
-                                className: "sr-only",
-                                onChange: (event)=>{
-                                    if (event.target.files !== null) onAttach(event.target.files);
+        }, children: [attachments.length === 0 ? null : (_jsx("ul", { "aria-label": "Attachments", className: "flex flex-wrap gap-1.5", children: attachments.map((attachment) => (_jsxs("li", { className: "flex items-center gap-1.5 rounded-md bg-muted py-1 pr-1 pl-2 text-xs", children: [_jsx("span", { className: "max-w-40 truncate", children: attachment.name }), onRemoveAttachment === undefined ? null : (_jsx("button", { type: "button", onClick: () => onRemoveAttachment(attachment), "aria-label": `Remove ${attachment.name}`, className: "grid size-5 place-items-center rounded-sm text-muted-foreground hover:text-foreground", children: _jsx(X, { className: "size-3", "aria-hidden": true }) }))] }, attachment.id))) })), _jsxs("div", { className: "flex items-end gap-2", children: [onAttach === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileRef, type: "file", multiple: true, className: "sr-only", onChange: (event) => {
+                                    if (event.target.files !== null)
+                                        onAttach(event.target.files);
                                     event.target.value = "";
-                                }
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>fileRef.current?.click(),
-                                disabled: disabled,
-                                "aria-label": "Attach files",
-                                className: "grid size-9 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50",
-                                children: /*#__PURE__*/ _jsx(Paperclip, {
-                                    className: "size-4",
-                                    "aria-hidden": true
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx("textarea", {
-                        ref: textareaRef,
-                        value: value,
-                        rows: 1,
-                        disabled: disabled,
-                        placeholder: placeholder,
-                        "aria-label": "Message",
-                        onChange: (event)=>onValueChange(event.target.value),
-                        onKeyDown: (event)=>{
-                            if (event.key !== "Enter" || event.shiftKey) return;
+                                } }), _jsx("button", { type: "button", onClick: () => fileRef.current?.click(), disabled: disabled, "aria-label": "Attach files", className: "grid size-9 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50", children: _jsx(Paperclip, { className: "size-4", "aria-hidden": true }) })] })), _jsx("textarea", { ref: textareaRef, value: value, rows: 1, disabled: disabled, placeholder: placeholder, "aria-label": "Message", onChange: (event) => onValueChange(event.target.value), onKeyDown: (event) => {
+                            if (event.key !== "Enter" || event.shiftKey)
+                                return;
                             // `isComposing` is the IME guard — without it, committing a
                             // Japanese or Chinese candidate sends the message instead.
-                            if (event.nativeEvent.isComposing) return;
+                            if (event.nativeEvent.isComposing)
+                                return;
                             event.preventDefault();
                             submit();
-                        },
-                        className: "max-h-50 min-h-9 flex-1 resize-none bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground disabled:opacity-50"
-                    }),
-                    showStop ? /*#__PURE__*/ _jsx("button", {
-                        type: "button",
-                        onClick: onStop,
-                        "aria-label": "Stop generating",
-                        className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-foreground transition-colors hover:bg-secondary",
-                        children: /*#__PURE__*/ _jsx(Square, {
-                            className: "size-3.5 fill-current",
-                            "aria-hidden": true
-                        })
-                    }) : /*#__PURE__*/ _jsx("button", {
-                        type: "submit",
-                        disabled: !canSend,
-                        "aria-label": "Send message",
-                        className: "grid size-9 shrink-0 place-items-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary-active disabled:opacity-40",
-                        children: /*#__PURE__*/ _jsx(ArrowUp, {
-                            className: "size-4",
-                            "aria-hidden": true
-                        })
-                    })
-                ]
-            })
-        ]
-    });
+                        }, className: "max-h-50 min-h-9 flex-1 resize-none bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground disabled:opacity-50" }), showStop ? (_jsx("button", { type: "button", onClick: onStop, "aria-label": "Stop generating", className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-foreground transition-colors hover:bg-secondary", children: _jsx(Square, { className: "size-3.5 fill-current", "aria-hidden": true }) })) : (_jsx("button", { type: "submit", disabled: !canSend, "aria-label": "Send message", className: "grid size-9 shrink-0 place-items-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary-active disabled:opacity-40", children: _jsx(ArrowUp, { className: "size-4", "aria-hidden": true }) }))] })] }));
 }

package/dist/ui/chat-panel.d.ts

@@ -14,7 +14,7 @@ export declare function ChatPanelHeader({ identity, children, className, ...prop
     identity: AgentIdentity;
 }): import("react").JSX.Element;
 /** The composer area: quick replies, the input, anything else pinned to the bottom. */
-export declare function ChatPanelFooter({ className, children }: {
+export declare function ChatPanelFooter({ className, children, }: {
     className?: string;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/ui/chat-panel.js

@@ -9,48 +9,14 @@ import { cn } from "../lib/utils.js";
  * frame carries a full-page conversation, a docked bar and a floating panel,
  * and each wants something different in the header — a thread switcher here, a
  * close button there. Composition is what makes one frame serve three shells.
- */ export function ChatPanel({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "chat-panel",
-        className: cn("flex min-h-0 flex-1 flex-col bg-background text-foreground", className),
-        ...props
-    });
+ */
+export function ChatPanel({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "chat-panel", className: cn("flex min-h-0 flex-1 flex-col bg-background text-foreground", className), ...props }));
 }
 export function ChatPanelHeader({ identity, children, className, ...props }) {
-    return /*#__PURE__*/ _jsxs("header", {
-        "data-slot": "chat-panel-header",
-        className: cn("flex shrink-0 items-center gap-2.5 border-b border-border px-4 py-3", className),
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                className: "grid size-8 shrink-0 place-items-center rounded-full bg-secondary text-[11px] font-bold text-secondary-foreground",
-                children: agentInitials(identity)
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex min-w-0 flex-col",
-                children: [
-                    /*#__PURE__*/ _jsx("p", {
-                        className: "truncate text-sm font-semibold",
-                        children: identity.name
-                    }),
-                    identity.tagline === undefined ? null : /*#__PURE__*/ _jsx("p", {
-                        className: "truncate text-xs text-muted-foreground",
-                        children: identity.tagline
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "ml-auto flex shrink-0 items-center gap-1",
-                children: children
-            })
-        ]
-    });
+    return (_jsxs("header", { "data-slot": "chat-panel-header", className: cn("flex shrink-0 items-center gap-2.5 border-b border-border px-4 py-3", className), ...props, children: [_jsx("span", { "aria-hidden": true, className: "grid size-8 shrink-0 place-items-center rounded-full bg-secondary text-[11px] font-bold text-secondary-foreground", children: agentInitials(identity) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: "truncate text-sm font-semibold", children: identity.name }), identity.tagline === undefined ? null : (_jsx("p", { className: "truncate text-xs text-muted-foreground", children: identity.tagline }))] }), _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: children })] }));
 }
-/** The composer area: quick replies, the input, anything else pinned to the bottom. */ export function ChatPanelFooter({ className, children }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "chat-panel-footer",
-        className: cn("flex shrink-0 flex-col gap-2 border-t border-border p-3", className),
-        children: children
-    });
+/** The composer area: quick replies, the input, anything else pinned to the bottom. */
+export function ChatPanelFooter({ className, children, }) {
+    return (_jsx("div", { "data-slot": "chat-panel-footer", className: cn("flex shrink-0 flex-col gap-2 border-t border-border p-3", className), children: children }));
 }

package/dist/ui/chat-thread.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";
@@ -16,46 +17,27 @@ import { MessageBubble } from "./message-bubble.js";
  * It pins to the bottom only when the user is already there. Yanking someone
  * back down while they are reading earlier context is the single most common
  * way chat scrolling goes wrong.
- */ export function ChatThread({ messages, identity, renderBody, onRetry, empty, now, className }) {
+ */
+export function ChatThread({ messages, identity, renderBody, onRetry, empty, now, className, }) {
     const scrollRef = useRef(null);
     const pinnedRef = useRef(true);
-    useEffect(()=>{
+    useEffect(() => {
         const node = scrollRef.current;
-        if (node === null || !pinnedRef.current) return;
+        if (node === null || !pinnedRef.current)
+            return;
         node.scrollTop = node.scrollHeight;
-    }, [
-        messages
-    ]);
+    }, [messages]);
     if (messages.length === 0 && empty !== undefined) {
-        return /*#__PURE__*/ _jsx("div", {
-            className: cn("flex min-h-0 flex-1 items-center justify-center p-6", className),
-            children: empty
-        });
+        return (_jsx("div", { className: cn("flex min-h-0 flex-1 items-center justify-center p-6", className), children: empty }));
     }
-    return /*#__PURE__*/ _jsx("div", {
-        ref: scrollRef,
-        onScroll: (event)=>{
+    return (_jsx("div", { ref: scrollRef, onScroll: (event) => {
             const node = event.currentTarget;
             // A few pixels of slack: sub-pixel layout means an exact comparison is
             // false on plenty of screens that are, visually, at the bottom.
-            pinnedRef.current = node.scrollHeight - node.scrollTop - node.clientHeight < 32;
-        },
+            pinnedRef.current =
+                node.scrollHeight - node.scrollTop - node.clientHeight < 32;
+        }, 
         // `log` + polite: new turns are announced without interrupting, which is
         // what an arriving reply is.
-        role: "log",
-        "aria-live": "polite",
-        "aria-label": "Conversation",
-        className: cn("flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-4", className),
-        children: messages.map((message)=>message.role === "agent" ? /*#__PURE__*/ _jsx(AgentTurn, {
-                message: message,
-                identity: identity,
-                now: now,
-                children: renderBody?.(message)
-            }, message.id) : /*#__PURE__*/ _jsx(MessageBubble, {
-                message: message,
-                now: now,
-                onRetry: onRetry === undefined ? undefined : ()=>onRetry(message),
-                children: renderBody?.(message)
-            }, message.id))
-    });
+        role: "log", "aria-live": "polite", "aria-label": "Conversation", className: cn("flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-4", className), children: messages.map((message) => message.role === "agent" ? (_jsx(AgentTurn, { message: message, identity: identity, now: now, children: renderBody?.(message) }, message.id)) : (_jsx(MessageBubble, { message: message, now: now, onRetry: onRetry === undefined ? undefined : () => onRetry(message), children: renderBody?.(message) }, message.id))) }));
 }

package/dist/ui/checkbox.js

@@ -1,63 +1,21 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Minus } from "lucide-react";
 import { useEffect, useId, useRef } from "react";
 import { cn } from "../lib/utils.js";
 const CONTROL_CLASS = "relative mt-0.5 flex size-4 shrink-0 items-center justify-center";
-export function Checkbox({ checked, onCheckedChange, label, description, indeterminate = false, id, disabled = false, invalid = false, describedBy, className }) {
+export function Checkbox({ checked, onCheckedChange, label, description, indeterminate = false, id, disabled = false, invalid = false, describedBy, className, }) {
     const generatedId = useId();
     const checkboxId = id ?? generatedId;
     const descriptionId = description === undefined ? undefined : `${checkboxId}-description`;
     const ref = useRef(null);
     const isBare = label === undefined;
-    useEffect(()=>{
-        if (ref.current) ref.current.indeterminate = indeterminate;
-    }, [
-        indeterminate
-    ]);
-    const control = /*#__PURE__*/ _jsxs("div", {
-        className: cn(CONTROL_CLASS, isBare && className),
-        children: [
-            /*#__PURE__*/ _jsx("input", {
-                ref: ref,
-                type: "checkbox",
-                id: checkboxId,
-                checked: checked,
-                disabled: disabled,
-                "aria-describedby": isBare ? describedBy : descriptionId,
-                "aria-invalid": invalid,
-                onChange: (event)=>onCheckedChange(event.target.checked),
-                className: cn("peer size-4 shrink-0 appearance-none rounded-sm border border-input bg-card shadow-xs transition-colors", "checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary", "aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50")
-            }),
-            /*#__PURE__*/ _jsx(Check, {
-                "aria-hidden": true,
-                className: "pointer-events-none absolute size-3 scale-0 text-primary-foreground transition-transform peer-checked:scale-100"
-            }),
-            /*#__PURE__*/ _jsx(Minus, {
-                "aria-hidden": true,
-                className: "pointer-events-none absolute size-3 scale-0 text-primary-foreground transition-transform peer-indeterminate:scale-100 peer-checked:scale-0"
-            })
-        ]
-    });
-    if (isBare) return control;
-    return /*#__PURE__*/ _jsxs("label", {
-        htmlFor: checkboxId,
-        className: cn("flex items-start gap-2", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className),
-        children: [
-            control,
-            /*#__PURE__*/ _jsxs("span", {
-                className: "flex flex-col gap-0.5",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "text-sm font-medium",
-                        children: label
-                    }),
-                    description === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                        id: descriptionId,
-                        className: "text-xs leading-relaxed text-muted-foreground",
-                        children: description
-                    })
-                ]
-            })
-        ]
-    });
+    useEffect(() => {
+        if (ref.current)
+            ref.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const control = (_jsxs("div", { className: cn(CONTROL_CLASS, isBare && className), children: [_jsx("input", { ref: ref, type: "checkbox", id: checkboxId, checked: checked, disabled: disabled, "aria-describedby": isBare ? describedBy : descriptionId, "aria-invalid": invalid, onChange: (event) => onCheckedChange(event.target.checked), className: cn("peer size-4 shrink-0 appearance-none rounded-sm border border-input bg-card shadow-xs transition-colors", "checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary", "aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50") }), _jsx(Check, { "aria-hidden": true, className: "pointer-events-none absolute size-3 scale-0 text-primary-foreground transition-transform peer-checked:scale-100" }), _jsx(Minus, { "aria-hidden": true, className: "pointer-events-none absolute size-3 scale-0 text-primary-foreground transition-transform peer-indeterminate:scale-100 peer-checked:scale-0" })] }));
+    if (isBare)
+        return control;
+    return (_jsxs("label", { htmlFor: checkboxId, className: cn("flex items-start gap-2", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className), children: [control, _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium", children: label }), description === undefined ? null : (_jsx("span", { id: descriptionId, className: "text-xs leading-relaxed text-muted-foreground", children: description }))] })] }));
 }