@corbits/react-ui 0.1.0 → 0.2.0

package/dist/ui/command-palette.js

@@ -1,15 +1,19 @@
+"use client";
 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);
+    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.";
+    if (error !== undefined)
+        return error;
+    if (loading)
+        return "Searching…";
+    if (hasQuery)
+        return "No matches found.";
     return "Type to search.";
 }
 /**
@@ -17,28 +21,25 @@ function statusMessage(loading, error, hasQuery) {
  * 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) {
+ */
+function usePaletteMachine(groups, onSelect, onClose) {
     const baseId = useId();
     const listRef = useRef(null);
-    const items = useMemo(()=>flatten(groups), [
-        groups
-    ]);
-    const select = (id)=>{
+    const items = useMemo(() => flatten(groups), [groups]);
+    const select = (id) => {
         onSelect(id);
         onClose();
     };
     const navigation = useCommandPaletteNavigation({
         items,
         onSelect: select,
-        onClose
+        onClose,
     });
-    useEffect(()=>{
-        listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({
-            block: "nearest"
-        });
-    }, [
-        navigation.activeId
-    ]);
+    useEffect(() => {
+        listRef.current
+            ?.querySelector('[data-active="true"]')
+            ?.scrollIntoView({ block: "nearest" });
+    }, [navigation.activeId]);
     return {
         baseId,
         groups,
@@ -47,106 +48,28 @@ function statusMessage(loading, error, hasQuery) {
         setActiveId: navigation.setActiveId,
         onKeyDown: navigation.onKeyDown,
         select,
-        optionId: (id)=>`${baseId}-option-${id}`,
-        listRef
+        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 PaletteInput({ machine, inputRef, query, onQueryChange, loading, placeholder, className, }) {
+    return (_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 }) {
+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))
-    });
+    return (_jsx("ul", { ref: machine.listRef, id: `${machine.baseId}-list`, role: "listbox", "aria-label": "Results", className: className, children: machine.items.length === 0 ? (_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 : (_jsxs("li", { role: "presentation", children: [_jsx("p", { className: "px-2 py-1.5 text-[11px] font-semibold tracking-[0.1em] text-muted-foreground uppercase", children: group.heading }), _jsx("ul", { role: "presentation", children: group.items.map((item) => (_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 : (_jsx("span", { className: "grid size-4 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4", "aria-hidden": true, children: item.icon })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.title }), item.subtitle === undefined ? null : (_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 PaletteLoadMore({ hasMore, onLoadMore, loading, }) {
+    if (!hasMore || onLoadMore === undefined)
+        return null;
+    return (_jsx("div", { className: "border-t border-border p-2", children: _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
-    });
+    if (footer === undefined)
+        return null;
+    return (_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,
@@ -159,62 +82,15 @@ function PaletteFooter({ footer }) {
  * `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 }) {
+ */
+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
-                })
-            ]
-        })
-    });
+    const machine = usePaletteMachine(groups, onSelect, () => onOpenChange(false));
+    useEffect(() => {
+        if (open)
+            inputRef.current?.focus();
+    }, [open]);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: cn("max-w-xl gap-0 p-0 [&_[aria-label=Close]]:hidden", className), onKeyDown: machine.onKeyDown, children: [_jsx(DialogTitle, { className: "sr-only", children: "Search" }), _jsxs("div", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-4", children: [inputAccessory === undefined ? null : (_jsx("div", { "data-slot": "command-palette-input-accessory", className: "shrink-0", children: inputAccessory })), _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" })] }), _jsx(PaletteResults, { machine: machine, query: query, loading: loading, error: error, className: "max-h-96 min-h-0 flex-1 overflow-y-auto p-2" }), _jsx(PaletteLoadMore, { hasMore: hasMore, onLoadMore: onLoadMore, loading: loading }), _jsx(PaletteFooter, { footer: footer })] }) }));
 }
 /**
  * The palette as an inline, non-modal surface: the field sits wherever the
@@ -233,85 +109,30 @@ function PaletteFooter({ footer }) {
  * 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 }) {
+ */
+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
-    ]);
+    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;
+    useEffect(() => {
+        if (!open)
+            return;
         function onPointerDown(event) {
-            if (rootRef.current?.contains(event.target) === true) return;
+            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
-        ]
-    });
+        return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [open, onOpenChange]);
+    return (_jsxs("div", { ref: rootRef, "data-slot": "command-palette-inline", "data-open": open, className: cn("relative", className), children: [_jsxs("div", { "data-slot": "command-palette-inline-field", onKeyDown: machine.onKeyDown, children: [leading, open ? (_jsxs(_Fragment, { children: [inputAccessory === undefined ? null : (_jsx("div", { "data-slot": "command-palette-input-accessory", className: "shrink-0", children: inputAccessory })), _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 ? (_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: [_jsx(PaletteResults, { machine: machine, query: query, loading: loading, error: error, className: "max-h-96 min-h-0 flex-1 overflow-y-auto p-2" }), _jsx(PaletteLoadMore, { hasMore: hasMore, onLoadMore: onLoadMore, loading: loading }), _jsx(PaletteFooter, { footer: footer })] })) : null] }));
 }
 /**
  * Binds ⌘K / Ctrl-K to a toggle.
@@ -322,20 +143,24 @@ function PaletteFooter({ footer }) {
  * 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;
+ */
+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;
+            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
-    ]);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [onToggle, enabled]);
 }

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

@@ -46,7 +46,7 @@ export declare function CompareBody({ comparison, className, }: {
     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 }: {
+export declare function CompareBodyFromJson({ content, pending, }: {
     readonly content: string;
     readonly pending?: boolean;
 }): import("react").JSX.Element;

package/dist/ui/compare-body.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { ArtifactNotice } from "./artifact-notice.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "./table.js";
 /**
  * Reads a `Comparison` out of a JSON string, or returns `null`.
  *
@@ -11,17 +11,25 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from ".
  * 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 function parseComparison(json) {
+ */
+export function parseComparison(json) {
     let raw;
     try {
         raw = JSON.parse(json);
-    } catch  {
+    }
+    catch {
         return null;
     }
-    if (typeof raw !== "object" || raw === null) return null;
+    if (typeof raw !== "object" || raw === null)
+        return null;
     const variants = raw.variants;
-    if (!Array.isArray(variants) || variants.length === 0) return null;
-    const ok = variants.every((variant)=>typeof variant === "object" && variant !== null && typeof variant.id === "string" && typeof variant.label === "string" && typeof variant.content === "string");
+    if (!Array.isArray(variants) || variants.length === 0)
+        return null;
+    const ok = variants.every((variant) => typeof variant === "object" &&
+        variant !== null &&
+        typeof variant.id === "string" &&
+        typeof variant.label === "string" &&
+        typeof variant.content === "string");
     return ok ? raw : null;
 }
 /**
@@ -37,104 +45,26 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from ".
  * 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 function CompareBody({ comparison, className }) {
+ */
+export function CompareBody({ comparison, className, }) {
     const { variants, winnerId, rationale, criteria } = comparison;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn("flex flex-col gap-6", className),
-        children: [
-            rationale === undefined ? null : /*#__PURE__*/ _jsx("p", {
-                className: "max-w-prose text-sm leading-relaxed text-muted-foreground",
-                children: rationale
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "grid gap-4 md:grid-cols-2",
-                children: variants.map((variant)=>{
+    return (_jsxs("div", { className: cn("flex flex-col gap-6", className), children: [rationale === undefined ? null : (_jsx("p", { className: "max-w-prose text-sm leading-relaxed text-muted-foreground", children: rationale })), _jsx("div", { className: "grid gap-4 md:grid-cols-2", children: variants.map((variant) => {
                     const won = variant.id === winnerId;
-                    return /*#__PURE__*/ _jsxs("section", {
-                        "aria-label": won ? `${variant.label} — selected` : variant.label,
-                        className: cn("flex flex-col gap-3 rounded-lg border p-4", won ? "border-primary-emphasis bg-card" : "border-border"),
-                        children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: "flex items-center gap-2",
-                                children: [
-                                    /*#__PURE__*/ _jsx("h3", {
-                                        className: "text-sm font-semibold",
-                                        children: variant.label
-                                    }),
-                                    won ? /*#__PURE__*/ _jsxs("span", {
-                                        className: "inline-flex items-center gap-1 rounded-sm bg-muted px-1.5 py-0.5 text-xs font-medium text-primary-emphasis",
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Check, {
-                                                className: "size-3",
-                                                "aria-hidden": true
-                                            }),
-                                            "Selected"
-                                        ]
-                                    }) : null
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx("p", {
-                                className: "text-sm leading-relaxed whitespace-pre-wrap",
-                                children: variant.content
-                            })
-                        ]
-                    }, variant.id);
-                })
-            }),
-            criteria === undefined || criteria.length === 0 ? null : /*#__PURE__*/ _jsxs(Table, {
-                "aria-label": "Scores by criterion",
-                children: [
-                    /*#__PURE__*/ _jsx(TableHeader, {
-                        children: /*#__PURE__*/ _jsxs(TableRow, {
-                            children: [
-                                /*#__PURE__*/ _jsx(TableHead, {
-                                    scope: "col",
-                                    children: "Criterion"
-                                }),
-                                variants.map((variant)=>/*#__PURE__*/ _jsx(TableHead, {
-                                        scope: "col",
-                                        className: "text-right",
-                                        children: variant.label
-                                    }, variant.id))
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(TableBody, {
-                        children: criteria.map((criterion)=>/*#__PURE__*/ _jsxs(TableRow, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(TableCell, {
-                                        className: "font-medium",
-                                        children: criterion.label
-                                    }),
-                                    variants.map((variant)=>{
-                                        const score = criterion.scores[variant.id];
-                                        return /*#__PURE__*/ _jsx(TableCell, {
-                                            className: "text-right font-mono tabular-nums",
-                                            children: score === undefined ? "—" : score.toLocaleString()
-                                        }, variant.id);
-                                    })
-                                ]
-                            }, criterion.label))
-                    })
-                ]
-            })
-        ]
-    });
+                    return (_jsxs("section", { "aria-label": won ? `${variant.label} — selected` : variant.label, className: cn("flex flex-col gap-3 rounded-lg border p-4", won ? "border-primary-emphasis bg-card" : "border-border"), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: variant.label }), won ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-sm bg-muted px-1.5 py-0.5 text-xs font-medium text-primary-emphasis", children: [_jsx(Check, { className: "size-3", "aria-hidden": true }), "Selected"] })) : null] }), _jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: variant.content })] }, variant.id));
+                }) }), criteria === undefined || criteria.length === 0 ? null : (_jsxs(Table, { "aria-label": "Scores by criterion", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { scope: "col", children: "Criterion" }), variants.map((variant) => (_jsx(TableHead, { scope: "col", className: "text-right", children: variant.label }, variant.id)))] }) }), _jsx(TableBody, { children: criteria.map((criterion) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: criterion.label }), variants.map((variant) => {
+                                    const score = criterion.scores[variant.id];
+                                    return (_jsx(TableCell, { className: "text-right font-mono tabular-nums", children: score === undefined ? "—" : score.toLocaleString() }, variant.id));
+                                })] }, criterion.label))) })] }))] }));
 }
-/** The JSON-string entry point, for when the payload arrives as artifact content. */ export function CompareBodyFromJson({ content, pending }) {
-    if (content.trim() === "") return /*#__PURE__*/ _jsx(ArtifactNotice, {
-        pending: pending
-    });
+/** The JSON-string entry point, for when the payload arrives as artifact content. */
+export function CompareBodyFromJson({ content, pending, }) {
+    if (content.trim() === "")
+        return _jsx(ArtifactNotice, { pending: pending });
     const comparison = parseComparison(content);
     if (comparison === null) {
         // The payload is not a comparison. Showing it verbatim beats an error: the
         // content is still the artifact, and the user can read it.
-        return /*#__PURE__*/ _jsx("pre", {
-            className: "overflow-auto rounded-md border border-border bg-muted p-3 font-mono text-xs",
-            children: content
-        });
+        return (_jsx("pre", { className: "overflow-auto rounded-md border border-border bg-muted p-3 font-mono text-xs", children: content }));
     }
-    return /*#__PURE__*/ _jsx(CompareBody, {
-        comparison: comparison
-    });
+    return _jsx(CompareBody, { comparison: comparison });
 }

package/dist/ui/confirm-button.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Button } from "./button.js";
@@ -12,30 +13,22 @@ import { Button } from "./button.js";
  * It disarms on blur as well as on a timer. Leaving a primed destructive button
  * behind when the user's attention has moved elsewhere is how the second click
  * lands by accident, which is the exact thing this exists to prevent.
- */ export function ConfirmButton({ onConfirm, children, confirmLabel = "Click again to confirm", resetMs = 3000, defaultArmed = false, variant = "outline", ...props }) {
+ */
+export function ConfirmButton({ onConfirm, children, confirmLabel = "Click again to confirm", resetMs = 3000, defaultArmed = false, variant = "outline", ...props }) {
     const [armed, setArmed] = useState(defaultArmed);
     const timerRef = useRef(undefined);
-    const disarm = ()=>{
+    const disarm = () => {
         window.clearTimeout(timerRef.current);
         setArmed(false);
     };
-    useEffect(()=>()=>window.clearTimeout(timerRef.current), []);
-    return /*#__PURE__*/ _jsx(Button, {
-        ...props,
-        variant: armed ? "destructive" : variant,
-        onBlur: disarm,
-        onClick: ()=>{
+    useEffect(() => () => window.clearTimeout(timerRef.current), []);
+    return (_jsx(Button, { ...props, variant: armed ? "destructive" : variant, onBlur: disarm, onClick: () => {
             if (!armed) {
                 setArmed(true);
-                timerRef.current = window.setTimeout(()=>setArmed(false), resetMs);
+                timerRef.current = window.setTimeout(() => setArmed(false), resetMs);
                 return;
             }
             disarm();
             onConfirm();
-        },
-        children: /*#__PURE__*/ _jsx("span", {
-            "aria-live": "polite",
-            children: armed ? confirmLabel : children
-        })
-    });
+        }, children: _jsx("span", { "aria-live": "polite", children: armed ? confirmLabel : children }) }));
 }