@raydenui/ui 0.9.7 → 0.10.1

package/dist/blocks/CheckoutReviewBlock.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutReviewBlock = CheckoutReviewBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../components/Button/index.cjs");
+const commerce_1 = require("./commerce.cjs");
+function CheckoutReviewBlock({ title = "Review your order", description = "Check the details before placing your order.", items, deliveryAddress, deliveryMethod, paymentSummary, onEditDelivery, onEditPayment, onEditCart, onConfirm, confirmLabel = "Place order", pending = false, errorMessage, confirmation, terms, totalsNote, shipping, tax, discount, currency, locale, ...frame }) {
+    const canConfirm = items.length > 0 &&
+        deliveryAddress.some((line) => line.trim()) &&
+        deliveryMethod.trim() &&
+        paymentSummary.trim() &&
+        items.every((item) => Number.isInteger(item.quantity) &&
+            item.quantity > 0 &&
+            item.quantity <= (item.stock ?? Infinity));
+    return ((0, jsx_runtime_1.jsx)(commerce_1.CommerceFrame, { ...frame, title: confirmation?.title ?? title, description: confirmation ? confirmation.description : description, busy: pending, children: confirmation ? ((0, jsx_runtime_1.jsxs)("div", { role: "status", className: "rounded-2xl bg-surface-muted p-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: confirmation.title }), confirmation.reference && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-2 text-sm text-grey-600", children: ["Order reference: ", confirmation.reference] }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "grid items-start gap-8 @min-[760px]:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] @min-[960px]:gap-14", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-b border-surface-border pb-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-lg font-semibold tracking-tight", children: "Delivery details" }), onEditDelivery && ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: pending, className: `${commerce_1.commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditDelivery, children: "Edit delivery" }))] }), (0, jsx_runtime_1.jsx)("address", { className: "mt-3 text-sm leading-relaxed not-italic text-grey-600", children: deliveryAddress.map((line, i) => ((0, jsx_runtime_1.jsx)("span", { className: "block", children: line }, i))) }), (0, jsx_runtime_1.jsx)("p", { className: "mt-3 text-sm", children: deliveryMethod })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-b border-surface-border pb-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-lg font-semibold tracking-tight", children: "Payment method" }), onEditPayment && ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: pending, className: `${commerce_1.commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditPayment, children: "Edit payment" }))] }), (0, jsx_runtime_1.jsx)("p", { className: "mt-3 text-sm text-grey-600", children: paymentSummary })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold", children: "Items in your order" }), onEditCart && ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: pending, className: `${commerce_1.commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditCart, children: "Edit bag" }))] }), (0, jsx_runtime_1.jsx)("ul", { className: "divide-y divide-surface-border", children: items.map((item) => ((0, jsx_runtime_1.jsxs)("li", { className: "grid grid-cols-[48px_minmax(0,1fr)_auto] items-center gap-3 py-4 text-sm", children: [(0, jsx_runtime_1.jsx)(commerce_1.CommercePhoto, { image: item.image, className: "rounded" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: item.name }), (0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-grey-600", children: [item.variant ? `${item.variant} · ` : "", "Quantity: ", item.quantity] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-right tabular-nums", children: (0, commerce_1.formatCommerceMoney)(item.price * item.quantity, currency, locale) })] }, item.id))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "rounded-xl border border-surface-border bg-surface-muted p-5 @min-[440px]:p-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-6 text-lg font-semibold tracking-tight", children: "Order total" }), (0, jsx_runtime_1.jsx)(commerce_1.CommerceTotals, { items: items, shipping: shipping, tax: tax, discount: discount, currency: currency, locale: locale }), totalsNote && (0, jsx_runtime_1.jsx)("p", { className: "mt-4 text-sm text-grey-600", children: totalsNote }), terms && (0, jsx_runtime_1.jsx)("div", { className: "mt-5 text-sm leading-relaxed text-grey-600", children: terms }), errorMessage && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "mt-4 text-sm text-error-700", children: errorMessage })), !canConfirm && ((0, jsx_runtime_1.jsx)("p", { role: "status", className: "mt-4 text-sm text-error-700", children: "Add available items and complete the delivery and payment details to continue." })), onConfirm && ((0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: pending || !canConfirm, className: "mt-6 h-auto min-h-12 w-full whitespace-normal", onClick: onConfirm, children: pending ? "Placing order…" : confirmLabel }))] })] })) }));
+}

package/dist/blocks/CheckoutReviewBlock.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../components/Button/index.js";
+import { CommerceFrame, CommerceTotals, CommercePhoto, commerceControl, formatCommerceMoney, } from "./commerce.js";
+export function CheckoutReviewBlock({ title = "Review your order", description = "Check the details before placing your order.", items, deliveryAddress, deliveryMethod, paymentSummary, onEditDelivery, onEditPayment, onEditCart, onConfirm, confirmLabel = "Place order", pending = false, errorMessage, confirmation, terms, totalsNote, shipping, tax, discount, currency, locale, ...frame }) {
+    const canConfirm = items.length > 0 &&
+        deliveryAddress.some((line) => line.trim()) &&
+        deliveryMethod.trim() &&
+        paymentSummary.trim() &&
+        items.every((item) => Number.isInteger(item.quantity) &&
+            item.quantity > 0 &&
+            item.quantity <= (item.stock ?? Infinity));
+    return (_jsx(CommerceFrame, { ...frame, title: confirmation?.title ?? title, description: confirmation ? confirmation.description : description, busy: pending, children: confirmation ? (_jsxs("div", { role: "status", className: "rounded-2xl bg-surface-muted p-6", children: [_jsx("p", { className: "font-medium", children: confirmation.title }), confirmation.reference && (_jsxs("p", { className: "mt-2 text-sm text-grey-600", children: ["Order reference: ", confirmation.reference] }))] })) : (_jsxs("div", { className: "grid items-start gap-8 @min-[760px]:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] @min-[960px]:gap-14", children: [_jsxs("div", { className: "min-w-0 space-y-6", children: [_jsxs("div", { className: "border-b border-surface-border pb-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("p", { className: "text-lg font-semibold tracking-tight", children: "Delivery details" }), onEditDelivery && (_jsx("button", { type: "button", disabled: pending, className: `${commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditDelivery, children: "Edit delivery" }))] }), _jsx("address", { className: "mt-3 text-sm leading-relaxed not-italic text-grey-600", children: deliveryAddress.map((line, i) => (_jsx("span", { className: "block", children: line }, i))) }), _jsx("p", { className: "mt-3 text-sm", children: deliveryMethod })] }), _jsxs("div", { className: "border-b border-surface-border pb-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("p", { className: "text-lg font-semibold tracking-tight", children: "Payment method" }), onEditPayment && (_jsx("button", { type: "button", disabled: pending, className: `${commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditPayment, children: "Edit payment" }))] }), _jsx("p", { className: "mt-3 text-sm text-grey-600", children: paymentSummary })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-3", children: [_jsx("p", { className: "font-semibold", children: "Items in your order" }), onEditCart && (_jsx("button", { type: "button", disabled: pending, className: `${commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditCart, children: "Edit bag" }))] }), _jsx("ul", { className: "divide-y divide-surface-border", children: items.map((item) => (_jsxs("li", { className: "grid grid-cols-[48px_minmax(0,1fr)_auto] items-center gap-3 py-4 text-sm", children: [_jsx(CommercePhoto, { image: item.image, className: "rounded" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: item.name }), _jsxs("p", { className: "mt-1 text-grey-600", children: [item.variant ? `${item.variant} · ` : "", "Quantity: ", item.quantity] })] }), _jsx("p", { className: "text-right tabular-nums", children: formatCommerceMoney(item.price * item.quantity, currency, locale) })] }, item.id))) })] })] }), _jsxs("div", { className: "rounded-xl border border-surface-border bg-surface-muted p-5 @min-[440px]:p-6", children: [_jsx("p", { className: "mb-6 text-lg font-semibold tracking-tight", children: "Order total" }), _jsx(CommerceTotals, { items: items, shipping: shipping, tax: tax, discount: discount, currency: currency, locale: locale }), totalsNote && _jsx("p", { className: "mt-4 text-sm text-grey-600", children: totalsNote }), terms && _jsx("div", { className: "mt-5 text-sm leading-relaxed text-grey-600", children: terms }), errorMessage && (_jsx("p", { role: "alert", className: "mt-4 text-sm text-error-700", children: errorMessage })), !canConfirm && (_jsx("p", { role: "status", className: "mt-4 text-sm text-error-700", children: "Add available items and complete the delivery and payment details to continue." })), onConfirm && (_jsx(Button, { disabled: pending || !canConfirm, className: "mt-6 h-auto min-h-12 w-full whitespace-normal", onClick: onConfirm, children: pending ? "Placing order…" : confirmLabel }))] })] })) }));
+}

package/dist/blocks/CommandPaletteBlock.cjs

@@ -0,0 +1,334 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandPaletteBlock = CommandPaletteBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+const Spinner_1 = require("../components/Spinner/index.cjs");
+/* ─── Recipes ────────────────────────────────────────────────────────── */
+const FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+/**
+ * Only elements Tab can actually reach. A roving-tabindex option is an
+ * `a[href]` parked at `tabindex="-1"`: focusable in code, skipped by Tab. Left
+ * in this list it became the computed final stop and focus escaped the dialog.
+ */
+const FOCUSABLE = [
+    'a[href]:not([tabindex="-1"])',
+    'button:not([disabled]):not([tabindex="-1"])',
+    'input:not([disabled]):not([tabindex="-1"])',
+    'select:not([disabled]):not([tabindex="-1"])',
+    'textarea:not([disabled]):not([tabindex="-1"])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+function itemMatches(item, needle) {
+    const haystack = [item.label, item.description ?? "", ...(item.keywords ?? [])]
+        .join(" ")
+        .toLocaleLowerCase();
+    return haystack.includes(needle);
+}
+/* ─── Component ──────────────────────────────────────────────────────── */
+function CommandPaletteBlock({ items = [], groups = [], suggestions, suggestionsLabel = "Suggestions", showAllWhenEmpty = false, filterMode = "local", onQueryChange, onSelect, status = "idle", errorTitle = "Search is unavailable", errorDescription = "The search service did not respond. Nothing has been changed.", onRetry, loadingMessage = "Searching", dialogLabel = "Command palette", searchLabel = "Search destinations and actions", searchPlaceholder = "Search or jump to…", searchHint = "Use the up and down arrow keys to move through results, then Enter to open one.", promptTitle = "Type to search", promptDescription = "Start typing to find a page, a record, or an action.", noResultsTitle = (query) => `No results for “${query}”`, noResultsDescription = "Check the spelling, or try a shorter search term.", emptySourceTitle = "Nothing is available to search yet", emptySourceDescription = "This workspace has no destinations or actions configured.", resultCountLabel = (count) => (count === 1 ? "1 result" : `${count} results`), showTrigger = true, triggerLabel = "Search", triggerClassName, shortcut = null, defaultOpen = false, open: controlledOpen, onOpenChange, closeLabel = "Close", lockScroll = true, footer, className, }) {
+    const uid = (0, react_1.useId)();
+    const dialogId = `${uid}-dialog`;
+    const listId = `${uid}-list`;
+    const inputId = `${uid}-input`;
+    const hintId = `${uid}-hint`;
+    const [uncontrolledOpen, setUncontrolledOpen] = (0, react_1.useState)(defaultOpen);
+    const open = controlledOpen ?? uncontrolledOpen;
+    const [query, setQuery] = (0, react_1.useState)("");
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const triggerRef = (0, react_1.useRef)(null);
+    const dialogRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    /** Whatever had focus before the overlay opened, restored on close. */
+    const returnFocusRef = (0, react_1.useRef)(null);
+    const setOpen = (0, react_1.useCallback)((next) => {
+        if (controlledOpen === undefined)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [controlledOpen, onOpenChange]);
+    const close = (0, react_1.useCallback)(() => setOpen(false), [setOpen]);
+    /* ── Result set ──────────────────────────────────────────────────── */
+    const trimmed = query.trim();
+    const needle = trimmed.toLocaleLowerCase();
+    const results = (0, react_1.useMemo)(() => {
+        if (!trimmed) {
+            if (suggestions && suggestions.length > 0)
+                return suggestions;
+            return showAllWhenEmpty ? items : [];
+        }
+        if (filterMode === "external")
+            return items;
+        return items.filter((item) => itemMatches(item, needle));
+    }, [trimmed, needle, items, suggestions, showAllWhenEmpty, filterMode]);
+    const showingSuggestions = !trimmed && Boolean(suggestions && suggestions.length > 0);
+    const hasSource = items.length > 0 || (suggestions?.length ?? 0) > 0;
+    const promptState = !trimmed && results.length === 0 && hasSource;
+    const noResultsState = Boolean(trimmed) && results.length === 0 && status === "idle";
+    /** Grouped for display, ordered by `groups`, with anything ungrouped first. */
+    const sections = (0, react_1.useMemo)(() => {
+        if (showingSuggestions) {
+            return [{ id: "__suggestions", label: suggestionsLabel, items: results }];
+        }
+        const ungrouped = results.filter((item) => !item.groupId);
+        const known = groups
+            .map((group) => ({
+            id: group.id,
+            label: group.label,
+            items: results.filter((item) => item.groupId === group.id),
+        }))
+            .filter((section) => section.items.length > 0);
+        const knownIds = new Set(groups.map((group) => group.id));
+        const orphans = results.filter((item) => item.groupId && !knownIds.has(item.groupId));
+        const head = ungrouped.length > 0 || orphans.length > 0
+            ? [
+                {
+                    id: "__ungrouped",
+                    label: undefined,
+                    items: [...ungrouped, ...orphans],
+                },
+            ]
+            : [];
+        return [...head, ...known];
+    }, [results, groups, showingSuggestions, suggestionsLabel]);
+    /** Flat order, so arrow keys cross group boundaries the way the eye does. */
+    const flatItems = (0, react_1.useMemo)(() => sections.flatMap((section) => section.items), [sections]);
+    (0, react_1.useEffect)(() => {
+        setActiveIndex(0);
+    }, [query, open]);
+    /* ── Open / close side effects ───────────────────────────────────── */
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        returnFocusRef.current = document.activeElement ?? null;
+        // Focused in the same commit that removes `hidden`, so the field has focus
+        // by the time the click that opened the dialog has settled.
+        inputRef.current?.focus();
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        if (open)
+            return;
+        setQuery("");
+    }, [open]);
+    /**
+     * Focus goes back to whatever opened the palette, which is the trigger when
+     * the block renders its own. A dialog that drops focus on the document body
+     * strands a keyboard user at the top of the page.
+     */
+    const wasOpen = (0, react_1.useRef)(open);
+    (0, react_1.useEffect)(() => {
+        if (wasOpen.current && !open) {
+            const target = triggerRef.current ?? returnFocusRef.current;
+            target?.focus();
+        }
+        wasOpen.current = open;
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        if (!open || !lockScroll || typeof document === "undefined")
+            return;
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = previous;
+        };
+    }, [open, lockScroll]);
+    (0, react_1.useEffect)(() => {
+        if (!shortcut || typeof document === "undefined")
+            return;
+        const wanted = shortcut.key.toLowerCase();
+        const modifier = shortcut.modifier ?? "mod";
+        function handle(event) {
+            if (event.defaultPrevented || event.isComposing || event.repeat)
+                return;
+            if (event.key.toLowerCase() !== wanted)
+                return;
+            const target = event.target;
+            // Single-letter shortcuts must never consume text entry, including our search field.
+            if (modifier === "none" &&
+                (event.altKey ||
+                    event.shiftKey ||
+                    (target instanceof HTMLElement &&
+                        (target.isContentEditable ||
+                            target.closest("input, textarea, select, [role='textbox']")))))
+                return;
+            const mod = event.metaKey || event.ctrlKey;
+            if (modifier === "mod" && !mod)
+                return;
+            if (modifier === "none" && mod)
+                return;
+            event.preventDefault();
+            setOpen(true);
+        }
+        document.addEventListener("keydown", handle);
+        return () => document.removeEventListener("keydown", handle);
+    }, [shortcut, setOpen]);
+    /* ── Roving focus ────────────────────────────────────────────────── */
+    function optionNodes() {
+        if (!listRef.current)
+            return [];
+        return Array.from(listRef.current.querySelectorAll("[data-option]"));
+    }
+    function focusOptionAt(index) {
+        const nodes = optionNodes();
+        if (nodes.length === 0)
+            return;
+        const wrapped = ((index % nodes.length) + nodes.length) % nodes.length;
+        setActiveIndex(wrapped);
+        nodes[wrapped]?.focus();
+    }
+    function activateAt(index) {
+        const nodes = optionNodes();
+        nodes[index]?.click();
+    }
+    function handleInputKeyDown(event) {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            focusOptionAt(0);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            focusOptionAt(-1);
+        }
+        else if (event.key === "Enter" && flatItems.length > 0) {
+            event.preventDefault();
+            activateAt(activeIndex);
+        }
+    }
+    function handleOptionKeyDown(event, index) {
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                focusOptionAt(index + 1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                focusOptionAt(index - 1);
+                break;
+            case "Home":
+                event.preventDefault();
+                focusOptionAt(0);
+                break;
+            case "End":
+                event.preventDefault();
+                focusOptionAt(-1);
+                break;
+            default:
+                break;
+        }
+    }
+    /** Tab stays inside the overlay; Escape leaves it. */
+    function handleDialogKeyDown(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            close();
+            return;
+        }
+        if (event.key !== "Tab" || !dialogRef.current)
+            return;
+        const nodes = Array.from(dialogRef.current.querySelectorAll(FOCUSABLE)).filter((node) => node.offsetParent !== null || node === document.activeElement);
+        if (nodes.length === 0)
+            return;
+        const first = nodes[0];
+        const last = nodes[nodes.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && (active === first || !dialogRef.current.contains(active))) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    /* ── Option ──────────────────────────────────────────────────────── */
+    function renderOption(item, index) {
+        const unavailable = "unavailableReason" in item ? item.unavailableReason : undefined;
+        const reasonId = `${uid}-${item.id}-reason`;
+        const isActive = index === activeIndex;
+        const body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: item.icon, size: "md", className: (0, cn_1.cn)("mt-0.5 shrink-0", unavailable ? "text-grey-400" : "text-grey-500") })), (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-body-sm font-medium break-words", children: item.label }), item.description && ((0, jsx_runtime_1.jsx)("span", { className: "text-body-xs break-words text-grey-500", children: item.description })), unavailable && ((0, jsx_runtime_1.jsx)("span", { id: reasonId, className: "text-body-xs break-words text-grey-500", children: unavailable }))] }), item.shortcut && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "ml-auto shrink-0 rounded border border-surface-border px-1.5 py-0.5 text-body-xs font-medium text-grey-500", children: item.shortcut }))] }));
+        const classes = (0, cn_1.cn)("flex w-full min-w-0 items-start gap-3 rounded-lg px-3 py-2 transition-colors", FOCUS_RING, unavailable
+            ? "cursor-not-allowed text-grey-500"
+            : "cursor-pointer text-grey-900 hover:bg-surface-muted");
+        const shared = {
+            "data-option": "true",
+            role: "option",
+            "aria-selected": isActive,
+            tabIndex: isActive ? 0 : -1,
+            className: classes,
+        };
+        if (unavailable) {
+            return ((0, jsx_runtime_1.jsx)("div", { ...shared, "aria-disabled": "true", "aria-describedby": reasonId, onKeyDown: (event) => handleOptionKeyDown(event, index), onFocus: () => setActiveIndex(index), children: body }, item.id));
+        }
+        if (item.href) {
+            // Destinations stay anchors: Enter activates them natively, middle-click
+            // opens a new tab, and the href is never rebuilt into a dead button.
+            return ((0, jsx_runtime_1.jsx)("a", { ...shared, href: item.href, ...(item.external ? { target: "_blank", rel: "noreferrer" } : {}), onClick: () => {
+                    item.onSelect?.();
+                    onSelect?.(item);
+                    close();
+                }, onKeyDown: (event) => handleOptionKeyDown(event, index), onFocus: () => setActiveIndex(index), children: body }, item.id));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { ...shared, onClick: () => {
+                item.onSelect?.();
+                onSelect?.(item);
+                close();
+            }, onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    item.onSelect?.();
+                    onSelect?.(item);
+                    close();
+                    return;
+                }
+                handleOptionKeyDown(event, index);
+            }, onFocus: () => setActiveIndex(index), children: body }, item.id));
+    }
+    /* ── Body ────────────────────────────────────────────────────────── */
+    function renderBody() {
+        if (status === "loading") {
+            return ((0, jsx_runtime_1.jsxs)("p", { role: "status", className: "flex items-center gap-2 px-4 py-10 text-body-sm text-grey-500", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)("span", { children: loadingMessage })] }));
+        }
+        if (status === "error") {
+            return ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: "m-3 flex flex-col gap-2 rounded-lg border border-error-200 bg-error-50 px-4 py-3 text-error-700", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-sm font-semibold break-words", children: errorTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm break-words", children: errorDescription }), onRetry && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onRetry, className: (0, cn_1.cn)("inline-flex min-h-10 w-fit cursor-pointer items-center gap-2 rounded-lg border-[1.5px] border-current px-4 py-2 text-body-sm font-semibold", FOCUS_RING), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "refresh", size: "sm" }), "Try again"] }))] }));
+        }
+        if (!hasSource) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 px-4 py-10 text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-sm font-semibold break-words text-grey-900", children: emptySourceTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm break-words text-grey-500", children: emptySourceDescription })] }));
+        }
+        if (promptState) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 px-4 py-10 text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-sm font-semibold break-words text-grey-900", children: promptTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm break-words text-grey-500", children: promptDescription })] }));
+        }
+        if (noResultsState) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 px-4 py-10 text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-sm font-semibold break-words text-grey-900", children: noResultsTitle(trimmed) }), (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm break-words text-grey-500", children: noResultsDescription })] }));
+        }
+        let cursor = -1;
+        return ((0, jsx_runtime_1.jsx)("div", { ref: listRef, role: "listbox", "aria-label": dialogLabel, className: "flex flex-col gap-3 p-2", children: sections.map((section) => {
+                const sectionHeadingId = `${uid}-${section.id}-label`;
+                return ((0, jsx_runtime_1.jsxs)("div", { role: "group", ...(section.label ? { "aria-labelledby": sectionHeadingId } : {}), className: "flex flex-col gap-0.5", children: [section.label && ((0, jsx_runtime_1.jsx)("p", { id: sectionHeadingId, className: "px-3 pt-1 pb-1 text-caption-sm font-semibold break-words text-grey-500 uppercase", children: section.label })), section.items.map((item) => {
+                            cursor += 1;
+                            return renderOption(item, cursor);
+                        })] }, section.id));
+            }) }));
+    }
+    const countText = status === "idle" && hasSource && !promptState ? resultCountLabel(flatItems.length) : "";
+    /* ── Render ──────────────────────────────────────────────────────── */
+    return (
+    // Not an `@container`: the trigger is a flex item in the shell's top bar,
+    // and inline-size containment would stop it sizing from its own contents.
+    // The overlay is viewport-anchored, so nothing here needs a container query.
+    (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative w-full min-w-0", className), children: [showTrigger && ((0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": dialogId, onClick: () => setOpen(true), className: (0, cn_1.cn)("flex min-h-11 w-full min-w-0 cursor-pointer items-center gap-2 rounded-lg border border-surface-border bg-surface px-3 py-2 text-left text-body-sm text-grey-500 transition-colors hover:bg-surface-muted", FOCUS_RING, triggerClassName), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "search", size: "sm", className: "shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "min-w-0 truncate", children: triggerLabel }), shortcut?.hint && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "ml-auto hidden shrink-0 rounded border border-surface-border px-1.5 py-0.5 text-body-xs font-medium sm:inline", children: shortcut.hint }))] })), (0, jsx_runtime_1.jsxs)("div", { id: dialogId, className: (0, cn_1.cn)(
+                // The overlay is anchored to the viewport, not to the container the
+                // trigger sits in, so this is the one place in the batch where a
+                // viewport breakpoint is the correct signal. A `@min-[…]` here would
+                // read the trigger's width, which has nothing to do with the space
+                // the overlay actually has.
+                "fixed inset-0 z-50 flex items-start justify-center px-3 py-12 md:px-8 md:py-[12vh]", !open && "hidden"), children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", onClick: close, className: "absolute inset-0 bg-[var(--color-overlay,rgba(16,25,40,0.56))]" }), (0, jsx_runtime_1.jsxs)("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, onKeyDown: handleDialogKeyDown, className: "relative flex max-h-full w-full max-w-[640px] flex-col overflow-hidden rounded-xl border border-surface-border bg-surface shadow-soft-xl", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 border-b border-surface-border px-3 py-2 text-on-surface-muted", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "search", size: "md", className: "shrink-0 text-grey-500" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, className: "sr-only", children: searchLabel }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: inputId, type: "search", value: query, placeholder: searchPlaceholder, autoComplete: "off", "aria-controls": listId, "aria-describedby": hintId, onChange: (event) => {
+                                            setQuery(event.target.value);
+                                            onQueryChange?.(event.target.value);
+                                        }, onKeyDown: handleInputKeyDown, className: (0, cn_1.cn)(
+                                        // No `focus:outline-none` here: it wins over the focus-visible
+                                        // ring below and leaves the field with no visible indicator at
+                                        // all, which a tab walk measured before this comment existed.
+                                        "min-h-10 w-full min-w-0 rounded-lg bg-surface px-1 py-2 text-body-md text-grey-900 placeholder:text-grey-500", FOCUS_RING) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: close, className: (0, cn_1.cn)("inline-flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-lg text-grey-500 hover:bg-surface-muted hover:text-grey-900", FOCUS_RING), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "multiply", size: "md" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: closeLabel })] })] }), (0, jsx_runtime_1.jsx)("p", { id: hintId, className: "sr-only", children: searchHint }), (0, jsx_runtime_1.jsx)("div", { id: listId, className: "flex min-h-0 max-h-[min(60vh,420px)] flex-col overflow-y-auto", children: renderBody() }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-surface-border px-4 py-2 text-body-xs text-grey-500", children: [(0, jsx_runtime_1.jsx)("p", { role: "status", "aria-live": "polite", className: "min-w-0 break-words", children: countText }), footer] })] })] })] }));
+}