@corbits/react-ui 0.1.0

package/dist/ui/card.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+export function Card({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "card",
+        className: cn("flex flex-col gap-4 rounded-lg border border-border bg-card p-6 text-card-foreground", className),
+        ...props
+    });
+}
+export function CardHeader({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "card-header",
+        className: cn("flex flex-col gap-1", className),
+        ...props
+    });
+}
+export function CardTitle({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("h3", {
+        "data-slot": "card-title",
+        className: cn("text-base leading-none font-semibold", className),
+        ...props
+    });
+}
+export function CardDescription({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("p", {
+        "data-slot": "card-description",
+        className: cn("text-sm text-muted-foreground", className),
+        ...props
+    });
+}
+export function CardFooter({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "card-footer",
+        className: cn("flex items-center gap-2", className),
+        ...props
+    });
+}

package/dist/ui/category-bars.d.ts

@@ -0,0 +1,20 @@
+export type CategoryBarDatum = {
+    readonly label: string;
+    readonly value: number;
+    /** Optional secondary value shown beside the primary (e.g. cost). */
+    readonly secondaryLabel?: string;
+};
+export type CategoryBarsProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly data: readonly CategoryBarDatum[];
+    readonly valueLabel?: string;
+    readonly format?: (value: number) => string;
+    readonly className?: string;
+};
+/**
+ * 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 declare function CategoryBars({ title, description, data, valueLabel, format, className, }: CategoryBarsProps): import("react").JSX.Element;

package/dist/ui/category-bars.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatCompact } from "../lib/chart-geometry.js";
+import { cn } from "../lib/utils.js";
+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));
+    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);
+            })
+        })
+    });
+}

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

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+export type ChartLegendEntry = {
+    readonly label: string;
+    /** A CSS colour — normally `seriesColor(index)`. */
+    readonly color: string;
+    /**
+     * An SVG `stroke-dasharray` — normally `seriesDash(index)`. Present when the
+     * mark carries a second, non-colour channel; the swatch becomes a line
+     * segment drawn with the same pattern, so the legend cross-references both
+     * channels instead of only the hue. Omit for filled marks like bars.
+     */
+    readonly dash?: string;
+};
+export type ChartTable = {
+    readonly columns: readonly string[];
+    readonly rows: readonly (readonly ReactNode[])[];
+};
+export type ChartFrameProps = {
+    /** Names the chart. Becomes both the visible caption and the accessible name. */
+    readonly title: string;
+    readonly description?: string;
+    /** Omit for a single series — one swatch restating the title is wasted space. */
+    readonly legend?: readonly ChartLegendEntry[];
+    /**
+     * The same numbers as a table. Required, not optional: this is what makes a
+     * chart readable to someone who cannot see it, and an escape hatch that only
+     * appears when a developer remembers it is not an escape hatch.
+     */
+    readonly table: ChartTable;
+    /** The plot itself — an `<svg>`. */
+    readonly children: ReactNode;
+    readonly className?: string;
+};
+/**
+ * The frame every chart here sits in: a caption, a legend, the plot, and the
+ * same data as a table.
+ *
+ * The table is the point. A chart is a picture of numbers, and a picture is not
+ * available to a screen reader, a text browser, or anyone who needs the exact
+ * value rather than the shape — so the numbers are always present, one
+ * disclosure away, in DOM order right after the plot. `<details>` gives that a
+ * keyboard-operable, correctly-announced control for free.
+ *
+ * `<figure>`/`<figcaption>` rather than a div and an h3: the caption is bound to
+ * the figure by the element pair, which is what makes "Revenue by region" the
+ * chart's name instead of a heading that happens to sit above it.
+ *
+ * The legend appears for two or more series and never for one, because with one
+ * series the caption already says what is plotted. Each entry pairs a colour
+ * 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 declare function ChartFrame({ title, description, legend, table, children, className }: ChartFrameProps): import("react").JSX.Element;

package/dist/ui/chart-frame.js

@@ -0,0 +1,108 @@
+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";
+/**
+ * The frame every chart here sits in: a caption, a legend, the plot, and the
+ * same data as a table.
+ *
+ * The table is the point. A chart is a picture of numbers, and a picture is not
+ * available to a screen reader, a text browser, or anyone who needs the exact
+ * value rather than the shape — so the numbers are always present, one
+ * disclosure away, in DOM order right after the plot. `<details>` gives that a
+ * keyboard-operable, correctly-announced control for free.
+ *
+ * `<figure>`/`<figcaption>` rather than a div and an h3: the caption is bound to
+ * the figure by the element pair, which is what makes "Revenue by region" the
+ * chart's name instead of a heading that happens to sit above it.
+ *
+ * The legend appears for two or more series and never for one, because with one
+ * series the caption already says what is plotted. Each entry pairs a colour
+ * 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 }) {
+    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))
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,24 @@
+import type { QuickReply } from "../lib/chat-message.js";
+import { type ChatInputProps } from "./chat-input.js";
+export type ChatComposerProps = Omit<ChatInputProps, "working" | "disabled" | "textareaRef"> & {
+    /** Suggestion chips shown above the input while the conversation is empty. */
+    readonly suggestions?: readonly QuickReply[];
+    readonly onSuggestionSelect?: (reply: QuickReply) => void;
+    /** True while a response is in flight — disables the input, same signal `ChatInput` calls `working`. */
+    readonly busy?: boolean;
+    /**
+     * Flips true→false or false→true to (re)trigger the autofocus timer — pass
+     * the dock's `mode !== "closed"` so it fires once per open, after the
+     * panel's own entrance animation has settled (see `chat-dock-timing.ts`).
+     */
+    readonly autoFocusOn?: boolean;
+    readonly className?: string;
+};
+/**
+ * The composer: suggestion chips above an empty conversation, otherwise just
+ * the input. Chips and input are mutually exclusive rather than stacked
+ * 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 declare function ChatComposer({ suggestions, onSuggestionSelect, busy, autoFocusOn, className, ...inputProps }: ChatComposerProps): import("react").JSX.Element;

package/dist/ui/chat-composer.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useDelayedAutofocus } from "../hooks/use-delayed-autofocus.js";
+import { cn } from "../lib/utils.js";
+import { ChatInput } from "./chat-input.js";
+import { QuickReplyChips } from "./quick-reply-chips.js";
+/**
+ * The composer: suggestion chips above an empty conversation, otherwise just
+ * the input. Chips and input are mutually exclusive rather than stacked
+ * 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 }) {
+    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
+            })
+        ]
+    });
+}

package/dist/ui/chat-dock-timing.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 declare const CHAT_DOCK_ENTRANCE_MS = 280;
+/** The scrim's own fade, coordinated to finish alongside the entrance. */
+export declare const CHAT_DOCK_SCRIM_MS = 280;
+/**
+ * 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 declare const CHAT_DOCK_AUTOFOCUS_DELAY_MS = 280;

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

@@ -0,0 +1,11 @@
+/**
+ * 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;
+/**
+ * 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;

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

@@ -0,0 +1,38 @@
+import { type RefObject } from "react";
+export type ChatAttachment = {
+    readonly id: string;
+    readonly name: string;
+};
+export type ChatInputProps = {
+    readonly value: string;
+    readonly onValueChange: (value: string) => void;
+    readonly onSend: () => void;
+    /** Shown while the agent is replying. Its presence turns send into stop. */
+    readonly onStop?: () => void;
+    readonly working?: boolean;
+    readonly placeholder?: string;
+    readonly disabled?: boolean;
+    readonly attachments?: readonly ChatAttachment[];
+    readonly onAttach?: (files: FileList) => void;
+    readonly onRemoveAttachment?: (attachment: ChatAttachment) => void;
+    /** Exposes the textarea node — a host that autofocuses on open needs something to focus. */
+    readonly textareaRef?: RefObject<HTMLTextAreaElement | null>;
+    readonly className?: string;
+};
+/**
+ * The composer.
+ *
+ * Enter sends and Shift+Enter breaks the line — the convention every chat app
+ * shares, and breaking it costs users a message. IME composition is excluded:
+ * mid-composition Enter commits a candidate in Japanese and Chinese input, and
+ * treating that as "send" fires a half-typed message.
+ *
+ * While the agent is replying, the send button becomes stop. Two buttons would
+ * mean one is always dead, and a stop control that appears somewhere else is one
+ * the user has to hunt for at the moment they most want it.
+ *
+ * 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 declare function ChatInput({ value, onValueChange, onSend, onStop, working, placeholder, disabled, attachments, onAttach, onRemoveAttachment, textareaRef: externalTextareaRef, className, }: ChatInputProps): import("react").JSX.Element;

package/dist/ui/chat-input.js

@@ -0,0 +1,138 @@
+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";
+import { cn } from "../lib/utils.js";
+const MAX_ROWS_PX = 200;
+/**
+ * The composer.
+ *
+ * Enter sends and Shift+Enter breaks the line — the convention every chat app
+ * shares, and breaking it costs users a message. IME composition is excluded:
+ * mid-composition Enter commits a candidate in Japanese and Chinese input, and
+ * treating that as "send" fires a half-typed message.
+ *
+ * While the agent is replying, the send button becomes stop. Two buttons would
+ * mean one is always dead, and a stop control that appears somewhere else is one
+ * the user has to hunt for at the moment they most want it.
+ *
+ * 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 }) {
+    const internalTextareaRef = useRef(null);
+    const textareaRef = externalTextareaRef ?? internalTextareaRef;
+    const fileRef = useRef(null);
+    useEffect(()=>{
+        const node = textareaRef.current;
+        if (node === null) return;
+        node.style.height = "auto";
+        node.style.height = `${Math.min(node.scrollHeight, MAX_ROWS_PX)}px`;
+    }, [
+        value
+    ]);
+    const canSend = value.trim().length > 0 && !disabled;
+    const showStop = working && onStop !== undefined;
+    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)=>{
+            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);
+                                    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;
+                            // `isComposing` is the IME guard — without it, committing a
+                            // Japanese or Chinese candidate sends the message instead.
+                            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
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { type AgentIdentity } from "../lib/chat-message.js";
+/**
+ * The chat surface's frame: who you are talking to, the transcript, and the
+ * composer.
+ *
+ * Parts rather than a `messages`/`onSend` mega-component, because the same
+ * 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 declare function ChatPanel({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+export declare function ChatPanelHeader({ identity, children, className, ...props }: React.ComponentProps<"header"> & {
+    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 }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/ui/chat-panel.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { agentInitials } from "../lib/chat-message.js";
+import { cn } from "../lib/utils.js";
+/**
+ * The chat surface's frame: who you are talking to, the transcript, and the
+ * composer.
+ *
+ * Parts rather than a `messages`/`onSend` mega-component, because the same
+ * 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 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
+            })
+        ]
+    });
+}
+/** 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
+    });
+}