@raydenui/ui 0.9.7 → 0.10.1

package/dist/blocks/WorkspaceSwitcherBlock.cjs

@@ -0,0 +1,291 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspaceSwitcherBlock = WorkspaceSwitcherBlock;
+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";
+/* ─── Logo ───────────────────────────────────────────────────────────── */
+function WorkspaceMark({ item, size = "md", }) {
+    const box = size === "sm" ? "size-7 text-body-xs" : "size-9 text-body-sm";
+    if (item.logoSrc) {
+        return ((0, jsx_runtime_1.jsx)("img", { src: item.logoSrc, alt: "", className: (0, cn_1.cn)("shrink-0 rounded-lg border border-surface-border object-cover", box) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", 
+        // The colour comes last: `box` carries a `text-body-*` size utility, and
+        // class merging treats it as the same group, so a colour written first is
+        // dropped and the initials fall back to the inherited foreground.
+        className: (0, cn_1.cn)("inline-flex shrink-0 items-center justify-center rounded-lg bg-primary-50 font-semibold", box, "text-action-primary-text"), children: item.icon ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: item.icon, size: size === "sm" ? "sm" : "md" })) : ((item.initials ?? item.name.slice(0, 2).toUpperCase())) }));
+}
+/* ─── Component ──────────────────────────────────────────────────────── */
+function WorkspaceSwitcherBlock({ current, workspaces = [], onSelect, unavailableMessage = "Switching to this workspace is not available.", status = "idle", errorMessage = "Your workspaces could not be loaded.", onRetry, loadingMessage = "Loading workspaces", triggerLabel = "Switch workspace", triggerHint, placeholder = "Choose a workspace", panelLabel = "Workspaces", filterLabel = "Filter workspaces", filterPlaceholder = "Type to filter", filterThreshold = 6, emptyTitle = "You are not in any workspace yet", emptyDescription = "Create a workspace or ask an administrator for an invitation.", noMatchesTitle = "No workspace matches that filter", noMatchesDescription = "Check the spelling, or clear the filter to see every workspace.", footerActions = [], resultCountLabel = (count) => (count === 1 ? "1 workspace matches" : `${count} workspaces match`), defaultOpen = false, open: controlledOpen, onOpenChange, className, }) {
+    const uid = (0, react_1.useId)();
+    const panelId = `${uid}-panel`;
+    const listId = `${uid}-list`;
+    const filterId = `${uid}-filter`;
+    const [uncontrolledOpen, setUncontrolledOpen] = (0, react_1.useState)(defaultOpen);
+    const open = controlledOpen ?? uncontrolledOpen;
+    const [query, setQuery] = (0, react_1.useState)("");
+    /** Roving tabindex: exactly one option is in the tab order at a time. */
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const rootRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    /**
+     * The popover is wider than its trigger, so a trigger sitting near the right
+     * edge would push the popover past it and widen the document. The offset is
+     * measured from the trigger when the popover opens: start-aligned when it
+     * fits, end-aligned when it does not, and pinned to the viewport when neither
+     * side fits. Nothing is positioned until it is measured.
+     */
+    const [panelBox, setPanelBox] = (0, react_1.useState)(null);
+    const filterRef = (0, react_1.useRef)(null);
+    const listRef = (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)((restoreFocus) => {
+        setOpen(false);
+        if (restoreFocus)
+            triggerRef.current?.focus();
+    }, [setOpen]);
+    /* Closing when the pointer lands outside keeps the popover from shadowing the
+       page; it is deliberately not a modal, so focus is never trapped here. */
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        function handlePointerDown(event) {
+            if (!rootRef.current)
+                return;
+            if (!rootRef.current.contains(event.target))
+                setOpen(false);
+        }
+        document.addEventListener("mousedown", handlePointerDown);
+        return () => document.removeEventListener("mousedown", handlePointerDown);
+    }, [open, setOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            setPanelBox(null);
+            return;
+        }
+        function place() {
+            const rect = triggerRef.current?.getBoundingClientRect();
+            if (!rect)
+                return;
+            const viewport = document.documentElement.clientWidth;
+            const width = Math.min(320, Math.max(rect.width, viewport - 24));
+            let left = 0;
+            if (rect.left + width > viewport - 12) {
+                left = rect.width - width;
+                if (rect.left + left < 12)
+                    left = 12 - rect.left;
+            }
+            setPanelBox({ left, width });
+        }
+        place();
+        window.addEventListener("resize", place);
+        // A window resize is not the only thing that moves the trigger: a root text
+        // size change, a sidebar collapsing, or a container query flipping all do it
+        // without firing `resize`.
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => place());
+        if (observer && triggerRef.current)
+            observer.observe(triggerRef.current);
+        if (observer)
+            observer.observe(document.documentElement);
+        return () => {
+            window.removeEventListener("resize", place);
+            observer?.disconnect();
+        };
+    }, [open]);
+    /* The filter is where a keyboard user expects to land, and it is where typing
+       already works, so it takes focus as the popover opens. */
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const target = filterRef.current ?? listRef.current?.querySelector("[data-option]");
+        target?.focus();
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            setQuery("");
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        setActiveIndex(0);
+    }, [query, open]);
+    const matches = (0, react_1.useMemo)(() => {
+        const needle = query.trim().toLocaleLowerCase();
+        if (!needle)
+            return workspaces;
+        return workspaces.filter((item) => `${item.name} ${item.detail ?? ""}`.toLocaleLowerCase().includes(needle));
+    }, [query, workspaces]);
+    const showFilter = workspaces.length >= filterThreshold;
+    const hasSource = workspaces.length > 0;
+    /* ── Roving focus across the options ─────────────────────────────── */
+    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 handleFilterKeyDown(event) {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            focusOptionAt(0);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            focusOptionAt(-1);
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            close(true);
+        }
+    }
+    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;
+            case "Escape":
+                event.preventDefault();
+                close(true);
+                break;
+            default:
+                break;
+        }
+    }
+    function handleTriggerKeyDown(event) {
+        if (event.key === "ArrowDown" && !open) {
+            event.preventDefault();
+            setOpen(true);
+        }
+    }
+    function choose(item) {
+        if ("unavailableReason" in item && item.unavailableReason)
+            return;
+        if (!onSelect)
+            return;
+        onSelect(item.id);
+        close(true);
+    }
+    /* ── Option ──────────────────────────────────────────────────────── */
+    function renderOption(item, index) {
+        const unavailable = ("unavailableReason" in item ? item.unavailableReason : undefined) ||
+            (!item.href && !onSelect ? unavailableMessage : undefined);
+        const isCurrent = current?.id === item.id;
+        const reasonId = `${uid}-${item.id}-reason`;
+        const body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(WorkspaceMark, { item: item, size: "sm" }), (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.name }), item.detail && ((0, jsx_runtime_1.jsx)("span", { className: "text-body-xs break-words text-grey-500", children: item.detail })), unavailable && ((0, jsx_runtime_1.jsx)("span", { id: reasonId, className: "text-body-xs break-words text-grey-500", children: unavailable }))] }), isCurrent && ((0, jsx_runtime_1.jsxs)("span", { className: "ml-auto inline-flex shrink-0 items-center gap-1 text-body-xs font-semibold text-action-primary-text", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: "sm" }), (0, jsx_runtime_1.jsx)("span", { children: "Current" })] }))] }));
+        /**
+         * The current entry is marked by the "Current" chip, not by a tint. An
+         * earlier draft tinted the row `bg-primary-50`; the muted detail line then
+         * measured 4.28:1 on it, below AA, which is the same mistake the Batch A
+         * pricing cards made with `opacity-90`. `surface-muted` is a ground the
+         * muted foreground role is already paired with in both modes.
+         */
+        const classes = (0, cn_1.cn)("flex min-h-11 w-full min-w-0 items-start gap-3 rounded-lg px-2 py-2 transition-colors", FOCUS_RING, unavailable
+            ? "cursor-not-allowed text-grey-500"
+            : "cursor-pointer text-grey-900 hover:bg-surface-muted", isCurrent && !unavailable && "bg-surface-muted");
+        const shared = {
+            "data-option": "true",
+            role: "option",
+            tabIndex: index === activeIndex ? 0 : -1,
+            "aria-selected": isCurrent,
+            onKeyDown: (event) => handleOptionKeyDown(event, index),
+            onFocus: () => setActiveIndex(index),
+            className: classes,
+        };
+        if (unavailable) {
+            return ((0, jsx_runtime_1.jsx)("div", { ...shared, "aria-disabled": "true", "aria-describedby": reasonId, children: body }, item.id));
+        }
+        if (item.href) {
+            // A workspace that is its own address stays a real anchor; the listbox
+            // role does not remove the href, so middle-click still opens a new tab.
+            return ((0, jsx_runtime_1.jsx)("a", { ...shared, href: item.href, onClick: () => {
+                    onSelect?.(item.id);
+                    close(false);
+                }, children: body }, item.id));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { ...shared, onClick: () => choose(item), onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    choose(item);
+                    return;
+                }
+                handleOptionKeyDown(event, index);
+            }, children: body }, item.id));
+    }
+    /* ── Panel body ──────────────────────────────────────────────────── */
+    function renderBody() {
+        if (status === "loading") {
+            return ((0, jsx_runtime_1.jsxs)("p", { role: "status", className: "flex items-center gap-2 px-2 py-6 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-1 flex flex-col gap-2 rounded-lg border border-error-200 bg-error-50 px-3 py-3 text-body-sm text-error-700", children: [(0, jsx_runtime_1.jsx)("p", { className: "break-words", children: errorMessage }), onRetry && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onRetry, className: (0, cn_1.cn)("inline-flex min-h-9 w-fit cursor-pointer items-center gap-2 rounded-lg border-[1.5px] border-current px-3 py-1.5 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-2 py-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-sm font-semibold break-words text-grey-900", children: emptyTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm break-words text-grey-500", children: emptyDescription })] }));
+        }
+        if (matches.length === 0) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 px-2 py-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-sm font-semibold break-words text-grey-900", children: noMatchesTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm break-words text-grey-500", children: noMatchesDescription })] }));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { ref: listRef, role: "listbox", "aria-label": panelLabel, className: "flex flex-col gap-0.5 p-1", children: matches.map((item, index) => renderOption(item, index)) }));
+    }
+    /* ── Trigger ─────────────────────────────────────────────────────── */
+    /**
+     * The spoken name repeats every visible word in the order it is drawn, so a
+     * voice-control user can say what they can see (WCAG 2.5.3), and then adds
+     * the purpose the icon alone would not carry.
+     */
+    const triggerName = current
+        ? `${triggerHint ? `${triggerHint}, ` : ""}${current.name}. ${triggerLabel}`
+        : `${placeholder}. ${triggerLabel}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, 
+        /**
+         * Deliberately NOT an `@container`. `container-type: inline-size` makes an
+         * element's inline size independent of its own contents, so this root —
+         * a shrinkable flex item inside the shell's top bar — resolved to 0px at
+         * every width and the switcher disappeared. The block has no internal
+         * container query to justify the cost: the popover is placed from a
+         * measurement instead.
+         */
+        className: (0, cn_1.cn)("relative w-full min-w-0", className), children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": panelId, "aria-label": triggerName, onClick: () => setOpen(!open), onKeyDown: handleTriggerKeyDown, 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-2 py-1.5 text-left text-grey-700 transition-colors hover:bg-surface-muted", FOCUS_RING), children: [current ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(WorkspaceMark, { item: current, size: "sm" }), (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-col", children: [triggerHint && (0, jsx_runtime_1.jsx)("span", { className: "text-body-xs text-grey-500", children: triggerHint }), (0, jsx_runtime_1.jsx)("span", { className: "line-clamp-1 text-body-sm font-semibold break-all text-grey-900", children: current.name })] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "line-clamp-1 text-body-sm font-medium break-words text-grey-500", children: placeholder })), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: "sm", className: "ml-auto shrink-0 text-grey-500" })] }), (0, jsx_runtime_1.jsxs)("div", { id: panelId, role: "dialog", "aria-label": panelLabel, onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                        event.preventDefault();
+                        close(true);
+                    }
+                }, style: panelBox ? { left: panelBox.left, width: panelBox.width } : undefined, className: (0, cn_1.cn)("absolute top-[calc(100%+4px)] left-0 z-30 flex w-full min-w-0 flex-col rounded-xl border border-surface-border bg-surface shadow-soft-md", !open && "hidden"), children: [showFilter && status === "idle" && hasSource && ((0, jsx_runtime_1.jsxs)("div", { className: "border-b border-surface-border p-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: filterId, className: "sr-only", children: filterLabel }), (0, jsx_runtime_1.jsx)("input", { ref: filterRef, id: filterId, type: "search", value: query, placeholder: filterPlaceholder, "aria-controls": listId, onChange: (event) => setQuery(event.target.value), onKeyDown: handleFilterKeyDown, className: (0, cn_1.cn)("w-full min-w-0 rounded-lg border border-surface-border-strong bg-surface px-3 py-2 text-body-sm text-grey-900 placeholder:text-grey-500", FOCUS_RING) })] })), (0, jsx_runtime_1.jsx)("div", { id: listId, className: "flex max-h-[320px] min-h-0 flex-col overflow-y-auto", children: renderBody() }), (0, jsx_runtime_1.jsx)("p", { role: "status", "aria-live": "polite", className: "sr-only", children: open && status === "idle" && hasSource ? resultCountLabel(matches.length) : "" }), footerActions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1 border-t border-surface-border p-1", children: footerActions.map((action) => {
+                            const inner = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [action.icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: action.icon, size: "sm", className: "shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "break-words", children: action.label })] }));
+                            const classes = (0, cn_1.cn)("flex min-h-10 w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-2 text-body-sm font-medium text-grey-700 hover:bg-surface-muted hover:text-grey-900", FOCUS_RING);
+                            return action.href ? ((0, jsx_runtime_1.jsx)("a", { href: action.href, onClick: () => {
+                                    action.onClick?.();
+                                    close(false);
+                                }, ...(action.external ? { target: "_blank", rel: "noreferrer" } : {}), className: classes, children: inner }, action.id)) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                                    action.onClick?.();
+                                    close(true);
+                                }, className: classes, children: inner }, action.id));
+                        }) }))] })] }));
+}

package/dist/blocks/WorkspaceSwitcherBlock.js

@@ -0,0 +1,288 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { cn } from "../utils/cn.js";
+import { Icon } from "../components/Icon/index.js";
+import { Spinner } from "../components/Spinner/index.js";
+/* ─── Recipes ────────────────────────────────────────────────────────── */
+const FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+/* ─── Logo ───────────────────────────────────────────────────────────── */
+function WorkspaceMark({ item, size = "md", }) {
+    const box = size === "sm" ? "size-7 text-body-xs" : "size-9 text-body-sm";
+    if (item.logoSrc) {
+        return (_jsx("img", { src: item.logoSrc, alt: "", className: cn("shrink-0 rounded-lg border border-surface-border object-cover", box) }));
+    }
+    return (_jsx("span", { "aria-hidden": "true", 
+        // The colour comes last: `box` carries a `text-body-*` size utility, and
+        // class merging treats it as the same group, so a colour written first is
+        // dropped and the initials fall back to the inherited foreground.
+        className: cn("inline-flex shrink-0 items-center justify-center rounded-lg bg-primary-50 font-semibold", box, "text-action-primary-text"), children: item.icon ? (_jsx(Icon, { name: item.icon, size: size === "sm" ? "sm" : "md" })) : ((item.initials ?? item.name.slice(0, 2).toUpperCase())) }));
+}
+/* ─── Component ──────────────────────────────────────────────────────── */
+export function WorkspaceSwitcherBlock({ current, workspaces = [], onSelect, unavailableMessage = "Switching to this workspace is not available.", status = "idle", errorMessage = "Your workspaces could not be loaded.", onRetry, loadingMessage = "Loading workspaces", triggerLabel = "Switch workspace", triggerHint, placeholder = "Choose a workspace", panelLabel = "Workspaces", filterLabel = "Filter workspaces", filterPlaceholder = "Type to filter", filterThreshold = 6, emptyTitle = "You are not in any workspace yet", emptyDescription = "Create a workspace or ask an administrator for an invitation.", noMatchesTitle = "No workspace matches that filter", noMatchesDescription = "Check the spelling, or clear the filter to see every workspace.", footerActions = [], resultCountLabel = (count) => (count === 1 ? "1 workspace matches" : `${count} workspaces match`), defaultOpen = false, open: controlledOpen, onOpenChange, className, }) {
+    const uid = useId();
+    const panelId = `${uid}-panel`;
+    const listId = `${uid}-list`;
+    const filterId = `${uid}-filter`;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const open = controlledOpen ?? uncontrolledOpen;
+    const [query, setQuery] = useState("");
+    /** Roving tabindex: exactly one option is in the tab order at a time. */
+    const [activeIndex, setActiveIndex] = useState(0);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    /**
+     * The popover is wider than its trigger, so a trigger sitting near the right
+     * edge would push the popover past it and widen the document. The offset is
+     * measured from the trigger when the popover opens: start-aligned when it
+     * fits, end-aligned when it does not, and pinned to the viewport when neither
+     * side fits. Nothing is positioned until it is measured.
+     */
+    const [panelBox, setPanelBox] = useState(null);
+    const filterRef = useRef(null);
+    const listRef = useRef(null);
+    const setOpen = useCallback((next) => {
+        if (controlledOpen === undefined)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [controlledOpen, onOpenChange]);
+    const close = useCallback((restoreFocus) => {
+        setOpen(false);
+        if (restoreFocus)
+            triggerRef.current?.focus();
+    }, [setOpen]);
+    /* Closing when the pointer lands outside keeps the popover from shadowing the
+       page; it is deliberately not a modal, so focus is never trapped here. */
+    useEffect(() => {
+        if (!open)
+            return;
+        function handlePointerDown(event) {
+            if (!rootRef.current)
+                return;
+            if (!rootRef.current.contains(event.target))
+                setOpen(false);
+        }
+        document.addEventListener("mousedown", handlePointerDown);
+        return () => document.removeEventListener("mousedown", handlePointerDown);
+    }, [open, setOpen]);
+    useEffect(() => {
+        if (!open) {
+            setPanelBox(null);
+            return;
+        }
+        function place() {
+            const rect = triggerRef.current?.getBoundingClientRect();
+            if (!rect)
+                return;
+            const viewport = document.documentElement.clientWidth;
+            const width = Math.min(320, Math.max(rect.width, viewport - 24));
+            let left = 0;
+            if (rect.left + width > viewport - 12) {
+                left = rect.width - width;
+                if (rect.left + left < 12)
+                    left = 12 - rect.left;
+            }
+            setPanelBox({ left, width });
+        }
+        place();
+        window.addEventListener("resize", place);
+        // A window resize is not the only thing that moves the trigger: a root text
+        // size change, a sidebar collapsing, or a container query flipping all do it
+        // without firing `resize`.
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => place());
+        if (observer && triggerRef.current)
+            observer.observe(triggerRef.current);
+        if (observer)
+            observer.observe(document.documentElement);
+        return () => {
+            window.removeEventListener("resize", place);
+            observer?.disconnect();
+        };
+    }, [open]);
+    /* The filter is where a keyboard user expects to land, and it is where typing
+       already works, so it takes focus as the popover opens. */
+    useEffect(() => {
+        if (!open)
+            return;
+        const target = filterRef.current ?? listRef.current?.querySelector("[data-option]");
+        target?.focus();
+    }, [open]);
+    useEffect(() => {
+        if (!open)
+            setQuery("");
+    }, [open]);
+    useEffect(() => {
+        setActiveIndex(0);
+    }, [query, open]);
+    const matches = useMemo(() => {
+        const needle = query.trim().toLocaleLowerCase();
+        if (!needle)
+            return workspaces;
+        return workspaces.filter((item) => `${item.name} ${item.detail ?? ""}`.toLocaleLowerCase().includes(needle));
+    }, [query, workspaces]);
+    const showFilter = workspaces.length >= filterThreshold;
+    const hasSource = workspaces.length > 0;
+    /* ── Roving focus across the options ─────────────────────────────── */
+    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 handleFilterKeyDown(event) {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            focusOptionAt(0);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            focusOptionAt(-1);
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            close(true);
+        }
+    }
+    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;
+            case "Escape":
+                event.preventDefault();
+                close(true);
+                break;
+            default:
+                break;
+        }
+    }
+    function handleTriggerKeyDown(event) {
+        if (event.key === "ArrowDown" && !open) {
+            event.preventDefault();
+            setOpen(true);
+        }
+    }
+    function choose(item) {
+        if ("unavailableReason" in item && item.unavailableReason)
+            return;
+        if (!onSelect)
+            return;
+        onSelect(item.id);
+        close(true);
+    }
+    /* ── Option ──────────────────────────────────────────────────────── */
+    function renderOption(item, index) {
+        const unavailable = ("unavailableReason" in item ? item.unavailableReason : undefined) ||
+            (!item.href && !onSelect ? unavailableMessage : undefined);
+        const isCurrent = current?.id === item.id;
+        const reasonId = `${uid}-${item.id}-reason`;
+        const body = (_jsxs(_Fragment, { children: [_jsx(WorkspaceMark, { item: item, size: "sm" }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [_jsx("span", { className: "text-body-sm font-medium break-words", children: item.name }), item.detail && (_jsx("span", { className: "text-body-xs break-words text-grey-500", children: item.detail })), unavailable && (_jsx("span", { id: reasonId, className: "text-body-xs break-words text-grey-500", children: unavailable }))] }), isCurrent && (_jsxs("span", { className: "ml-auto inline-flex shrink-0 items-center gap-1 text-body-xs font-semibold text-action-primary-text", children: [_jsx(Icon, { name: "check", size: "sm" }), _jsx("span", { children: "Current" })] }))] }));
+        /**
+         * The current entry is marked by the "Current" chip, not by a tint. An
+         * earlier draft tinted the row `bg-primary-50`; the muted detail line then
+         * measured 4.28:1 on it, below AA, which is the same mistake the Batch A
+         * pricing cards made with `opacity-90`. `surface-muted` is a ground the
+         * muted foreground role is already paired with in both modes.
+         */
+        const classes = cn("flex min-h-11 w-full min-w-0 items-start gap-3 rounded-lg px-2 py-2 transition-colors", FOCUS_RING, unavailable
+            ? "cursor-not-allowed text-grey-500"
+            : "cursor-pointer text-grey-900 hover:bg-surface-muted", isCurrent && !unavailable && "bg-surface-muted");
+        const shared = {
+            "data-option": "true",
+            role: "option",
+            tabIndex: index === activeIndex ? 0 : -1,
+            "aria-selected": isCurrent,
+            onKeyDown: (event) => handleOptionKeyDown(event, index),
+            onFocus: () => setActiveIndex(index),
+            className: classes,
+        };
+        if (unavailable) {
+            return (_jsx("div", { ...shared, "aria-disabled": "true", "aria-describedby": reasonId, children: body }, item.id));
+        }
+        if (item.href) {
+            // A workspace that is its own address stays a real anchor; the listbox
+            // role does not remove the href, so middle-click still opens a new tab.
+            return (_jsx("a", { ...shared, href: item.href, onClick: () => {
+                    onSelect?.(item.id);
+                    close(false);
+                }, children: body }, item.id));
+        }
+        return (_jsx("div", { ...shared, onClick: () => choose(item), onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    choose(item);
+                    return;
+                }
+                handleOptionKeyDown(event, index);
+            }, children: body }, item.id));
+    }
+    /* ── Panel body ──────────────────────────────────────────────────── */
+    function renderBody() {
+        if (status === "loading") {
+            return (_jsxs("p", { role: "status", className: "flex items-center gap-2 px-2 py-6 text-body-sm text-grey-500", children: [_jsx(Spinner, { size: "sm" }), _jsx("span", { children: loadingMessage })] }));
+        }
+        if (status === "error") {
+            return (_jsxs("div", { role: "alert", className: "m-1 flex flex-col gap-2 rounded-lg border border-error-200 bg-error-50 px-3 py-3 text-body-sm text-error-700", children: [_jsx("p", { className: "break-words", children: errorMessage }), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, className: cn("inline-flex min-h-9 w-fit cursor-pointer items-center gap-2 rounded-lg border-[1.5px] border-current px-3 py-1.5 font-semibold", FOCUS_RING), children: [_jsx(Icon, { name: "refresh", size: "sm" }), "Try again"] }))] }));
+        }
+        if (!hasSource) {
+            return (_jsxs("div", { className: "flex flex-col gap-1 px-2 py-6", children: [_jsx("p", { className: "text-body-sm font-semibold break-words text-grey-900", children: emptyTitle }), _jsx("p", { className: "text-body-sm break-words text-grey-500", children: emptyDescription })] }));
+        }
+        if (matches.length === 0) {
+            return (_jsxs("div", { className: "flex flex-col gap-1 px-2 py-6", children: [_jsx("p", { className: "text-body-sm font-semibold break-words text-grey-900", children: noMatchesTitle }), _jsx("p", { className: "text-body-sm break-words text-grey-500", children: noMatchesDescription })] }));
+        }
+        return (_jsx("div", { ref: listRef, role: "listbox", "aria-label": panelLabel, className: "flex flex-col gap-0.5 p-1", children: matches.map((item, index) => renderOption(item, index)) }));
+    }
+    /* ── Trigger ─────────────────────────────────────────────────────── */
+    /**
+     * The spoken name repeats every visible word in the order it is drawn, so a
+     * voice-control user can say what they can see (WCAG 2.5.3), and then adds
+     * the purpose the icon alone would not carry.
+     */
+    const triggerName = current
+        ? `${triggerHint ? `${triggerHint}, ` : ""}${current.name}. ${triggerLabel}`
+        : `${placeholder}. ${triggerLabel}`;
+    return (_jsxs("div", { ref: rootRef, 
+        /**
+         * Deliberately NOT an `@container`. `container-type: inline-size` makes an
+         * element's inline size independent of its own contents, so this root —
+         * a shrinkable flex item inside the shell's top bar — resolved to 0px at
+         * every width and the switcher disappeared. The block has no internal
+         * container query to justify the cost: the popover is placed from a
+         * measurement instead.
+         */
+        className: cn("relative w-full min-w-0", className), children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": panelId, "aria-label": triggerName, onClick: () => setOpen(!open), onKeyDown: handleTriggerKeyDown, className: 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-2 py-1.5 text-left text-grey-700 transition-colors hover:bg-surface-muted", FOCUS_RING), children: [current ? (_jsxs(_Fragment, { children: [_jsx(WorkspaceMark, { item: current, size: "sm" }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [triggerHint && _jsx("span", { className: "text-body-xs text-grey-500", children: triggerHint }), _jsx("span", { className: "line-clamp-1 text-body-sm font-semibold break-all text-grey-900", children: current.name })] })] })) : (_jsx("span", { className: "line-clamp-1 text-body-sm font-medium break-words text-grey-500", children: placeholder })), _jsx(Icon, { name: "chevron-down", size: "sm", className: "ml-auto shrink-0 text-grey-500" })] }), _jsxs("div", { id: panelId, role: "dialog", "aria-label": panelLabel, onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                        event.preventDefault();
+                        close(true);
+                    }
+                }, style: panelBox ? { left: panelBox.left, width: panelBox.width } : undefined, className: cn("absolute top-[calc(100%+4px)] left-0 z-30 flex w-full min-w-0 flex-col rounded-xl border border-surface-border bg-surface shadow-soft-md", !open && "hidden"), children: [showFilter && status === "idle" && hasSource && (_jsxs("div", { className: "border-b border-surface-border p-2", children: [_jsx("label", { htmlFor: filterId, className: "sr-only", children: filterLabel }), _jsx("input", { ref: filterRef, id: filterId, type: "search", value: query, placeholder: filterPlaceholder, "aria-controls": listId, onChange: (event) => setQuery(event.target.value), onKeyDown: handleFilterKeyDown, className: cn("w-full min-w-0 rounded-lg border border-surface-border-strong bg-surface px-3 py-2 text-body-sm text-grey-900 placeholder:text-grey-500", FOCUS_RING) })] })), _jsx("div", { id: listId, className: "flex max-h-[320px] min-h-0 flex-col overflow-y-auto", children: renderBody() }), _jsx("p", { role: "status", "aria-live": "polite", className: "sr-only", children: open && status === "idle" && hasSource ? resultCountLabel(matches.length) : "" }), footerActions.length > 0 && (_jsx("div", { className: "flex flex-col gap-1 border-t border-surface-border p-1", children: footerActions.map((action) => {
+                            const inner = (_jsxs(_Fragment, { children: [action.icon && _jsx(Icon, { name: action.icon, size: "sm", className: "shrink-0" }), _jsx("span", { className: "break-words", children: action.label })] }));
+                            const classes = cn("flex min-h-10 w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-2 text-body-sm font-medium text-grey-700 hover:bg-surface-muted hover:text-grey-900", FOCUS_RING);
+                            return action.href ? (_jsx("a", { href: action.href, onClick: () => {
+                                    action.onClick?.();
+                                    close(false);
+                                }, ...(action.external ? { target: "_blank", rel: "noreferrer" } : {}), className: classes, children: inner }, action.id)) : (_jsx("button", { type: "button", onClick: () => {
+                                    action.onClick?.();
+                                    close(true);
+                                }, className: classes, children: inner }, action.id));
+                        }) }))] })] }));
+}

package/dist/blocks/commerce.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commerceAction = exports.commerceControl = void 0;
+exports.formatCommerceMoney = formatCommerceMoney;
+exports.CommerceHeading = CommerceHeading;
+exports.CommerceFrame = CommerceFrame;
+exports.CommercePhoto = CommercePhoto;
+exports.CommerceQuantity = CommerceQuantity;
+exports.CommerceTotals = CommerceTotals;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+exports.commerceControl = "cursor-pointer min-h-11 rounded-lg border border-surface-border-strong bg-surface px-3 py-2 text-base text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary motion-safe:transition-colors motion-safe:duration-150 hover:border-grey-500 disabled:cursor-not-allowed disabled:opacity-50";
+exports.commerceAction = "inline-flex min-h-11 items-center justify-center rounded-lg bg-action-primary px-5 py-2.5 text-center text-sm font-semibold text-white hover:bg-action-primary-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary disabled:cursor-not-allowed disabled:opacity-50";
+function formatCommerceMoney(amount, currency = "GBP", locale = "en-GB") {
+    const format = new Intl.NumberFormat(locale, { style: "currency", currency });
+    const digits = format.resolvedOptions().maximumFractionDigits ?? 2;
+    return format.format(amount / 10 ** digits);
+}
+function CommerceHeading({ title, description, headingLevel: Heading = "h2", id, }) {
+    return ((0, jsx_runtime_1.jsxs)("header", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)(Heading, { id: id, className: "max-w-[20ch] text-[clamp(1.75rem,4cqi,2.75rem)] leading-[1.12] font-semibold tracking-[-0.035em]", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: "max-w-[56ch] text-base leading-relaxed text-grey-600", children: description }))] }));
+}
+function CommerceFrame({ title, description, headingLevel, className, children, busy, }) {
+    const id = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)("section", { "aria-labelledby": id, "aria-busy": busy || undefined, className: (0, cn_1.cn)("@container min-w-0 w-full bg-surface text-grey-900 [overflow-wrap:anywhere]", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-8 @min-[760px]:mb-10", children: (0, jsx_runtime_1.jsx)(CommerceHeading, { id: id, title: title, description: description, headingLevel: headingLevel }) }), children] }));
+}
+function CommercePhoto({ image, className, priority = false, }) {
+    return image ? ((0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.alt, loading: priority ? "eager" : "lazy", width: 640, height: 640, className: (0, cn_1.cn)("aspect-square w-full rounded-lg bg-surface-muted object-cover", className) })) : ((0, jsx_runtime_1.jsx)("div", { role: "img", "aria-label": "Product image unavailable", className: (0, cn_1.cn)("flex aspect-square items-center justify-center rounded-xl bg-surface-muted p-4 text-center text-sm text-grey-600", className), children: "Image unavailable" }));
+}
+function CommerceQuantity({ name, quantity, max, disabled, onChange, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "group", "aria-label": `Quantity for ${name}`, className: "inline-flex shrink-0 items-center rounded-lg border border-surface-border-strong bg-surface", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": `Decrease quantity for ${name}`, disabled: disabled || quantity <= 1, className: (0, cn_1.cn)(exports.commerceControl, "w-11 border-0 bg-transparent px-0 hover:bg-surface-muted"), onClick: () => onChange(quantity - 1), children: "\u2212" }), (0, jsx_runtime_1.jsx)("output", { "aria-label": `Quantity for ${name}`, className: "min-w-7 px-1 text-center tabular-nums", children: quantity }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": `Increase quantity for ${name}`, disabled: disabled || quantity >= (max ?? 99), className: (0, cn_1.cn)(exports.commerceControl, "w-11 border-0 bg-transparent px-0 hover:bg-surface-muted"), onClick: () => onChange(quantity + 1), children: "+" })] }));
+}
+function CommerceTotals({ items, shipping = 0, tax = 0, discount = 0, currency, locale, }) {
+    const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
+    const total = Math.max(0, subtotal + shipping + tax - discount);
+    const rows = [
+        ["Subtotal", subtotal],
+        ["Delivery", shipping],
+        ["Tax", tax],
+        ...(discount ? [["Discount", -discount]] : []),
+        ["Total", total],
+    ];
+    return ((0, jsx_runtime_1.jsx)("dl", { className: "space-y-3 text-sm", children: rows.map(([label, amount]) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-baseline justify-between gap-4", label === "Total" && "border-t border-surface-border-strong pt-5 text-xl font-semibold"), children: [(0, jsx_runtime_1.jsx)("dt", { children: label }), (0, jsx_runtime_1.jsx)("dd", { className: "text-right tabular-nums", children: formatCommerceMoney(amount, currency, locale) })] }, label))) }));
+}