@corbits/react-ui 0.1.0

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import type { AgentIdentity, ChatMessage } from "../lib/chat-message.js";
+export type ChatThreadProps = {
+    readonly messages: readonly ChatMessage[];
+    readonly identity: AgentIdentity;
+    /** Rich body for one message — a markdown renderer, if the host has one. */
+    readonly renderBody?: (message: ChatMessage) => ReactNode;
+    readonly onRetry?: (message: ChatMessage) => void;
+    /** Shown when there are no messages: a greeting, suggestions, anything. */
+    readonly empty?: ReactNode;
+    readonly now?: number;
+    readonly className?: string;
+};
+/**
+ * The transcript.
+ *
+ * Messages are a prop, not a `DataPort` collection, and that is the one place
+ * this registry departs from its own rule. A transcript is live, host-owned,
+ * append-and-mutate state — the last message changes on every token — whereas a
+ * `DataPort` collection is a cached, paginated, refetchable thing. The *thread
+ * list* is a real collection and does use the port; a streaming conversation is
+ * not one. The ticket asks for message data as props for the same reason.
+ *
+ * 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 declare function ChatThread({ messages, identity, renderBody, onRetry, empty, now, className, }: ChatThreadProps): import("react").JSX.Element;

package/dist/ui/chat-thread.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../lib/utils.js";
+import { AgentTurn } from "./agent-turn.js";
+import { MessageBubble } from "./message-bubble.js";
+/**
+ * The transcript.
+ *
+ * Messages are a prop, not a `DataPort` collection, and that is the one place
+ * this registry departs from its own rule. A transcript is live, host-owned,
+ * append-and-mutate state — the last message changes on every token — whereas a
+ * `DataPort` collection is a cached, paginated, refetchable thing. The *thread
+ * list* is a real collection and does use the port; a streaming conversation is
+ * not one. The ticket asks for message data as props for the same reason.
+ *
+ * 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 }) {
+    const scrollRef = useRef(null);
+    const pinnedRef = useRef(true);
+    useEffect(()=>{
+        const node = scrollRef.current;
+        if (node === null || !pinnedRef.current) return;
+        node.scrollTop = node.scrollHeight;
+    }, [
+        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 /*#__PURE__*/ _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;
+        },
+        // `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))
+    });
+}

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,25 @@
+export type CheckboxProps = {
+    readonly checked: boolean;
+    readonly onCheckedChange: (checked: boolean) => void;
+    /**
+     * Row label. Omit to render just the control, with `id`/`describedBy`
+     * passthrough — for composing into an externally labeled row, the way
+     * `ToggleList` composes `Switch`.
+     */
+    readonly label?: string;
+    /** Explanatory text under the label, tied to the control via `aria-describedby`. Labeled-row mode only. */
+    readonly description?: string;
+    /**
+     * A checkbox is neither on nor off — some of its children are checked and
+     * some are not. There is no HTML attribute for this: it exists only as a DOM
+     * property, so it has to be set imperatively via a ref.
+     */
+    readonly indeterminate?: boolean;
+    readonly id?: string;
+    readonly disabled?: boolean;
+    readonly invalid?: boolean;
+    /** Id of external text describing the control, for `aria-describedby`. Bare-control mode only. */
+    readonly describedBy?: string;
+    readonly className?: string;
+};
+export declare function Checkbox({ checked, onCheckedChange, label, description, indeterminate, id, disabled, invalid, describedBy, className, }: CheckboxProps): import("react").JSX.Element;

package/dist/ui/checkbox.js

@@ -0,0 +1,63 @@
+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 }) {
+    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
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/command-palette.d.ts

@@ -0,0 +1,100 @@
+import type { ReactNode } from "react";
+/**
+ * One result row. `title` (and optional `subtitle`) are the only text ever
+ * rendered — a consumer that hands in a raw identifier as the title has
+ * nothing else to blame, but the component itself never falls back to `id`
+ * for display.
+ */
+export type CommandPaletteItem = {
+    readonly id: string;
+    readonly title: string;
+    readonly subtitle?: string;
+    readonly icon?: ReactNode;
+};
+/** A labelled cluster of results — a static command section, an entity kind, whatever the consumer's data shape is. */
+export type CommandPaletteGroup = {
+    readonly id: string;
+    readonly heading: string;
+    readonly items: readonly CommandPaletteItem[];
+};
+/**
+ * Everything both presentations of the palette need: the query, the results,
+ * and what a selection means. Neither surface knows what any of it represents
+ * — matching, ranking and pagination source stay with the caller.
+ */
+export type CommandPaletteContentProps = {
+    readonly query: string;
+    readonly onQueryChange: (query: string) => void;
+    /** Pre-grouped, pre-ordered results. Ranking and matching are the consumer's job. */
+    readonly groups: readonly CommandPaletteGroup[];
+    readonly onSelect: (id: string) => void;
+    readonly loading?: boolean;
+    /** A message to show in place of results; presence alone marks the errored state. */
+    readonly error?: ReactNode;
+    readonly hasMore?: boolean;
+    readonly onLoadMore?: () => void;
+    readonly placeholder?: string;
+    /** Leading content in the input row — a scope chip, a source badge. Sits before the input, inside the same row. */
+    readonly inputAccessory?: ReactNode;
+    /** A legend or hint strip pinned under the results, e.g. keyboard shortcut hints. */
+    readonly footer?: ReactNode;
+};
+export type CommandPaletteProps = CommandPaletteContentProps & {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly className?: string;
+};
+export type CommandPaletteInlineProps = CommandPaletteContentProps & {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    /**
+     * Rendered inside the field, ahead of the input, in both states — the
+     * control the field morphs out of and back into. It stays mounted while
+     * collapsed, which is what lets focus return to it on Escape.
+     */
+    readonly leading?: ReactNode;
+    readonly className?: string;
+};
+/**
+ * The palette as a modal dialog: a search input over consumer-supplied,
+ * pre-grouped results, centered over an overlay. Use it where search is a
+ * destination the user goes to. Where search is a control that lives in the
+ * chrome, reach for `CommandPaletteInline` instead — it is the same machine
+ * without the overlay.
+ *
+ * Motion is the dialog's own opacity-only fade (`Dialog`'s `corbits-fade-in`/
+ * `corbits-fade-out` keyframes), which already collapses under
+ * `prefers-reduced-motion` at the theme level — a palette opened many times a
+ * day earns no scale or position animation on top of that.
+ */
+export declare function CommandPalette({ open, onOpenChange, query, onQueryChange, groups, onSelect, loading, error, hasMore, onLoadMore, placeholder, inputAccessory, footer, className, }: CommandPaletteProps): import("react").JSX.Element;
+/**
+ * The palette as an inline, non-modal surface: the field sits wherever the
+ * consumer puts it — a top bar, a toolbar — and its results hang directly
+ * beneath, anchored to that field. No overlay, no focus trap, so the page
+ * behind stays visible and legible while the user searches it.
+ *
+ * This is the shape a magnifier that *morphs in place* needs. A dialog cannot
+ * be morphed into: it is somewhere else on the screen, over everything, and
+ * the control it opened from is behind an overlay. Because the field is the
+ * real input here, the collapsed control and the expanded bar are one
+ * continuous element rather than a button and a separate window.
+ *
+ * The `leading` slot stays mounted in both states — collapsing removes the
+ * input and the panel, never the control focus has to return to. Sizing and
+ * the morph itself are the consumer's: this component paints the panel and
+ * owns the keyboard and dismissal contract, and exposes `data-slot`
+ * hooks (`command-palette-inline`, `-field`, `-results`) for the rest.
+ */
+export declare function CommandPaletteInline({ open, onOpenChange, query, onQueryChange, groups, onSelect, loading, error, hasMore, onLoadMore, placeholder, inputAccessory, leading, footer, className, }: CommandPaletteInlineProps): import("react").JSX.Element;
+/**
+ * Binds ⌘K / Ctrl-K to a toggle.
+ *
+ * A hook and not built into the palette, because plenty of apps already own
+ * their global key handling and a second listener fighting theirs is worse
+ * than no listener at all. It ignores repeats from a held key and lets the
+ * browser keep its own ⌘K where the user is typing into a text field —
+ * stealing it there is how a palette becomes the thing that eats your search
+ * box.
+ */
+export declare function useCommandShortcut(onToggle: () => void, enabled?: boolean): void;

package/dist/ui/command-palette.js

@@ -0,0 +1,341 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef } from "react";
+import { cn } from "../lib/utils.js";
+import { useCommandPaletteNavigation } from "../hooks/use-command-palette-navigation.js";
+import { Dialog, DialogContent, DialogTitle } from "./dialog.js";
+function flatten(groups) {
+    return groups.flatMap((group)=>group.items);
+}
+function statusMessage(loading, error, hasQuery) {
+    if (error !== undefined) return error;
+    if (loading) return "Searching…";
+    if (hasQuery) return "No matches found.";
+    return "Type to search.";
+}
+/**
+ * The half of the palette that has nothing to do with how it is presented:
+ * the flattened result order, the keyboard driver over it, and the ids that
+ * wire the input to the listbox. Shared so the dialog and the inline surface
+ * can never drift into two different keyboard contracts.
+ */ function usePaletteMachine(groups, onSelect, onClose) {
+    const baseId = useId();
+    const listRef = useRef(null);
+    const items = useMemo(()=>flatten(groups), [
+        groups
+    ]);
+    const select = (id)=>{
+        onSelect(id);
+        onClose();
+    };
+    const navigation = useCommandPaletteNavigation({
+        items,
+        onSelect: select,
+        onClose
+    });
+    useEffect(()=>{
+        listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({
+            block: "nearest"
+        });
+    }, [
+        navigation.activeId
+    ]);
+    return {
+        baseId,
+        groups,
+        items,
+        activeId: navigation.activeId,
+        setActiveId: navigation.setActiveId,
+        onKeyDown: navigation.onKeyDown,
+        select,
+        optionId: (id)=>`${baseId}-option-${id}`,
+        listRef
+    };
+}
+function PaletteInput({ machine, inputRef, query, onQueryChange, loading, placeholder, className }) {
+    return /*#__PURE__*/ _jsx("input", {
+        ref: inputRef,
+        type: "text",
+        role: "combobox",
+        "data-slot": "command-palette-input",
+        autoComplete: "off",
+        spellCheck: false,
+        placeholder: placeholder,
+        "aria-label": "Search",
+        "aria-expanded": true,
+        "aria-controls": `${machine.baseId}-list`,
+        "aria-activedescendant": machine.activeId === undefined ? undefined : machine.optionId(machine.activeId),
+        "aria-autocomplete": "list",
+        "aria-busy": loading,
+        value: query,
+        onChange: (event)=>onQueryChange(event.target.value),
+        className: className
+    });
+}
+function PaletteResults({ machine, query, loading, error, className }) {
+    const message = statusMessage(loading, error, query.trim().length > 0);
+    return /*#__PURE__*/ _jsx("ul", {
+        ref: machine.listRef,
+        id: `${machine.baseId}-list`,
+        role: "listbox",
+        "aria-label": "Results",
+        className: className,
+        children: machine.items.length === 0 ? /*#__PURE__*/ _jsx("li", {
+            role: "presentation",
+            className: "px-2 py-8 text-center text-sm text-muted-foreground",
+            children: message
+        }) : machine.groups.map((group)=>group.items.length === 0 ? null : /*#__PURE__*/ _jsxs("li", {
+                role: "presentation",
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "px-2 py-1.5 text-[11px] font-semibold tracking-[0.1em] text-muted-foreground uppercase",
+                        children: group.heading
+                    }),
+                    /*#__PURE__*/ _jsx("ul", {
+                        role: "presentation",
+                        children: group.items.map((item)=>/*#__PURE__*/ _jsxs("li", {
+                                id: machine.optionId(item.id),
+                                role: "option",
+                                "aria-selected": item.id === machine.activeId,
+                                "data-active": item.id === machine.activeId,
+                                onPointerMove: ()=>machine.setActiveId(item.id),
+                                onClick: ()=>machine.select(item.id),
+                                className: cn("flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-sm", item.id === machine.activeId && "bg-muted"),
+                                children: [
+                                    item.icon === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                                        className: "grid size-4 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4",
+                                        "aria-hidden": true,
+                                        children: item.icon
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "min-w-0 flex-1",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "block truncate",
+                                                children: item.title
+                                            }),
+                                            item.subtitle === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                                                className: "block truncate text-xs text-muted-foreground",
+                                                children: item.subtitle
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, item.id))
+                    })
+                ]
+            }, group.id))
+    });
+}
+function PaletteLoadMore({ hasMore, onLoadMore, loading }) {
+    if (!hasMore || onLoadMore === undefined) return null;
+    return /*#__PURE__*/ _jsx("div", {
+        className: "border-t border-border p-2",
+        children: /*#__PURE__*/ _jsx("button", {
+            type: "button",
+            "data-slot": "command-palette-load-more",
+            onClick: onLoadMore,
+            disabled: loading,
+            className: "w-full rounded-md px-2.5 py-2 text-center text-xs font-medium text-muted-foreground hover:bg-muted disabled:opacity-50",
+            children: loading ? "Loading…" : "Load more"
+        })
+    });
+}
+function PaletteFooter({ footer }) {
+    if (footer === undefined) return null;
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "command-palette-footer",
+        className: "border-t border-border px-3 py-2 text-xs text-muted-foreground",
+        children: footer
+    });
+}
+/**
+ * The palette as a modal dialog: a search input over consumer-supplied,
+ * pre-grouped results, centered over an overlay. Use it where search is a
+ * destination the user goes to. Where search is a control that lives in the
+ * chrome, reach for `CommandPaletteInline` instead — it is the same machine
+ * without the overlay.
+ *
+ * Motion is the dialog's own opacity-only fade (`Dialog`'s `corbits-fade-in`/
+ * `corbits-fade-out` keyframes), which already collapses under
+ * `prefers-reduced-motion` at the theme level — a palette opened many times a
+ * day earns no scale or position animation on top of that.
+ */ export function CommandPalette({ open, onOpenChange, query, onQueryChange, groups, onSelect, loading = false, error, hasMore = false, onLoadMore, placeholder = "Search or jump to…", inputAccessory, footer, className }) {
+    const inputRef = useRef(null);
+    const machine = usePaletteMachine(groups, onSelect, ()=>onOpenChange(false));
+    useEffect(()=>{
+        if (open) inputRef.current?.focus();
+    }, [
+        open
+    ]);
+    return /*#__PURE__*/ _jsx(Dialog, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: /*#__PURE__*/ _jsxs(DialogContent, {
+            className: cn("max-w-xl gap-0 p-0 [&_[aria-label=Close]]:hidden", className),
+            onKeyDown: machine.onKeyDown,
+            children: [
+                /*#__PURE__*/ _jsx(DialogTitle, {
+                    className: "sr-only",
+                    children: "Search"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-4",
+                    children: [
+                        inputAccessory === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                            "data-slot": "command-palette-input-accessory",
+                            className: "shrink-0",
+                            children: inputAccessory
+                        }),
+                        /*#__PURE__*/ _jsx(PaletteInput, {
+                            machine: machine,
+                            inputRef: inputRef,
+                            query: query,
+                            onQueryChange: onQueryChange,
+                            loading: loading,
+                            placeholder: placeholder,
+                            className: "h-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(PaletteResults, {
+                    machine: machine,
+                    query: query,
+                    loading: loading,
+                    error: error,
+                    className: "max-h-96 min-h-0 flex-1 overflow-y-auto p-2"
+                }),
+                /*#__PURE__*/ _jsx(PaletteLoadMore, {
+                    hasMore: hasMore,
+                    onLoadMore: onLoadMore,
+                    loading: loading
+                }),
+                /*#__PURE__*/ _jsx(PaletteFooter, {
+                    footer: footer
+                })
+            ]
+        })
+    });
+}
+/**
+ * The palette as an inline, non-modal surface: the field sits wherever the
+ * consumer puts it — a top bar, a toolbar — and its results hang directly
+ * beneath, anchored to that field. No overlay, no focus trap, so the page
+ * behind stays visible and legible while the user searches it.
+ *
+ * This is the shape a magnifier that *morphs in place* needs. A dialog cannot
+ * be morphed into: it is somewhere else on the screen, over everything, and
+ * the control it opened from is behind an overlay. Because the field is the
+ * real input here, the collapsed control and the expanded bar are one
+ * continuous element rather than a button and a separate window.
+ *
+ * The `leading` slot stays mounted in both states — collapsing removes the
+ * input and the panel, never the control focus has to return to. Sizing and
+ * the morph itself are the consumer's: this component paints the panel and
+ * owns the keyboard and dismissal contract, and exposes `data-slot`
+ * hooks (`command-palette-inline`, `-field`, `-results`) for the rest.
+ */ export function CommandPaletteInline({ open, onOpenChange, query, onQueryChange, groups, onSelect, loading = false, error, hasMore = false, onLoadMore, placeholder = "Search or jump to…", inputAccessory, leading, footer, className }) {
+    const inputRef = useRef(null);
+    const rootRef = useRef(null);
+    const machine = usePaletteMachine(groups, onSelect, ()=>onOpenChange(false));
+    useEffect(()=>{
+        if (open) inputRef.current?.focus();
+    }, [
+        open
+    ]);
+    // Without an overlay to catch it, a press anywhere else is the dismissal.
+    // `pointerdown` rather than `click` so the field collapses as the user
+    // reaches for whatever they meant to press, not after it has been pressed.
+    useEffect(()=>{
+        if (!open) return;
+        function onPointerDown(event) {
+            if (rootRef.current?.contains(event.target) === true) return;
+            onOpenChange(false);
+        }
+        document.addEventListener("pointerdown", onPointerDown);
+        return ()=>document.removeEventListener("pointerdown", onPointerDown);
+    }, [
+        open,
+        onOpenChange
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: rootRef,
+        "data-slot": "command-palette-inline",
+        "data-open": open,
+        className: cn("relative", className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                "data-slot": "command-palette-inline-field",
+                onKeyDown: machine.onKeyDown,
+                children: [
+                    leading,
+                    open ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            inputAccessory === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                                "data-slot": "command-palette-input-accessory",
+                                className: "shrink-0",
+                                children: inputAccessory
+                            }),
+                            /*#__PURE__*/ _jsx(PaletteInput, {
+                                machine: machine,
+                                inputRef: inputRef,
+                                query: query,
+                                onQueryChange: onQueryChange,
+                                loading: loading,
+                                placeholder: placeholder,
+                                className: "min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                            })
+                        ]
+                    }) : null
+                ]
+            }),
+            open ? /*#__PURE__*/ _jsxs("div", {
+                "data-slot": "command-palette-inline-results",
+                onKeyDown: machine.onKeyDown,
+                className: "absolute top-full right-0 z-50 mt-1 flex w-96 max-w-[80vw] flex-col overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-lg",
+                children: [
+                    /*#__PURE__*/ _jsx(PaletteResults, {
+                        machine: machine,
+                        query: query,
+                        loading: loading,
+                        error: error,
+                        className: "max-h-96 min-h-0 flex-1 overflow-y-auto p-2"
+                    }),
+                    /*#__PURE__*/ _jsx(PaletteLoadMore, {
+                        hasMore: hasMore,
+                        onLoadMore: onLoadMore,
+                        loading: loading
+                    }),
+                    /*#__PURE__*/ _jsx(PaletteFooter, {
+                        footer: footer
+                    })
+                ]
+            }) : null
+        ]
+    });
+}
+/**
+ * Binds ⌘K / Ctrl-K to a toggle.
+ *
+ * A hook and not built into the palette, because plenty of apps already own
+ * their global key handling and a second listener fighting theirs is worse
+ * than no listener at all. It ignores repeats from a held key and lets the
+ * browser keep its own ⌘K where the user is typing into a text field —
+ * stealing it there is how a palette becomes the thing that eats your search
+ * box.
+ */ export function useCommandShortcut(onToggle, enabled = true) {
+    useEffect(()=>{
+        if (!enabled) return;
+        const onKeyDown = (event)=>{
+            if (event.key.toLowerCase() !== "k" || !(event.metaKey || event.ctrlKey) || event.repeat) return;
+            const target = event.target;
+            if (target?.isContentEditable === true || /^(input|textarea|select)$/i.test(target?.tagName ?? "")) return;
+            event.preventDefault();
+            onToggle();
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return ()=>document.removeEventListener("keydown", onKeyDown);
+    }, [
+        onToggle,
+        enabled
+    ]);
+}

package/dist/ui/compare-body.d.ts

@@ -0,0 +1,52 @@
+export type ComparisonVariant = {
+    readonly id: string;
+    /** "A" / "B", or a real name. Shown as the column heading. */
+    readonly label: string;
+    readonly content: string;
+};
+export type ComparisonCriterion = {
+    readonly label: string;
+    /** Score per variant id. A missing entry renders as "—", not as zero. */
+    readonly scores: Readonly<Record<string, number>>;
+};
+export type Comparison = {
+    readonly variants: readonly ComparisonVariant[];
+    /** The variant that won, if the comparison reached a verdict. */
+    readonly winnerId?: string;
+    /** Why it won, in prose. */
+    readonly rationale?: string;
+    readonly criteria?: readonly ComparisonCriterion[];
+};
+/**
+ * Reads a `Comparison` out of a JSON string, or returns `null`.
+ *
+ * Structural, not schema-driven: the registry ships no validation dependency,
+ * and this only has to be strict enough that a malformed payload falls back to
+ * showing the raw text rather than rendering half a comparison. It checks the
+ * fields it will actually index and nothing else — over-validating a viewer's
+ * input rejects payloads it could have drawn perfectly well.
+ */
+export declare function parseComparison(json: string): Comparison | null;
+/**
+ * Two or more variants of the same thing, side by side, with the verdict said
+ * out loud.
+ *
+ * The winner is announced three ways — a text badge, a `<mark>`-free bold
+ * label, and an `aria-label` on the column — and only incidentally by a tinted
+ * border. Colour cannot be the encoding here: "which one won" is the single
+ * fact the surface exists to communicate, and a reader who cannot see the tint
+ * would otherwise get a page of undifferentiated columns.
+ *
+ * Columns collapse to a stack below `md`. Side-by-side is the whole idea, but a
+ * 320px viewport showing two 140px columns compares nothing; stacked variants
+ * with their labels intact at least remain readable.
+ */
+export declare function CompareBody({ comparison, className, }: {
+    readonly comparison: Comparison;
+    readonly className?: string;
+}): import("react").JSX.Element;
+/** The JSON-string entry point, for when the payload arrives as artifact content. */
+export declare function CompareBodyFromJson({ content, pending }: {
+    readonly content: string;
+    readonly pending?: boolean;
+}): import("react").JSX.Element;