@abuzareal/contour-ui 0.3.0 → 0.5.0

package/dist/components/ui/DataTable.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ccx } from "../../lib/classNames.js";
 /** Editorial data table with mono headers, optional column sorting, and horizontal scroll on small screens. */
 import { useMemo, useState } from "react";
 import { ArrowDown, ArrowUp } from "lucide-react";
@@ -8,18 +9,21 @@ export default function DataTable({ caption, columns, rows, rowKey, }) {
     const sortedRows = useMemo(() => {
         if (!sort)
             return rows;
+        const compare = columns.find((column) => column.key === sort.key)?.compare;
         const factor = sort.direction === "ascending" ? 1 : -1;
-        return [...rows].sort((a, b) => a[sort.key] > b[sort.key]
-            ? factor
-            : a[sort.key] < b[sort.key]
-                ? -factor
-                : 0);
-    }, [rows, sort]);
+        return [...rows].sort((a, b) => compare
+            ? factor * compare(a, b)
+            : a[sort.key] > b[sort.key]
+                ? factor
+                : a[sort.key] < b[sort.key]
+                    ? -factor
+                    : 0);
+    }, [rows, sort, columns]);
     const toggleSort = (key) => setSort((current) => current?.key === key && current.direction === "ascending"
         ? { key, direction: "descending" }
         : { key, direction: "ascending" });
-    return (_jsx("div", { className: "table-scroll", tabIndex: 0, role: "region", "aria-label": caption, children: _jsxs("table", { className: "data-table", children: [_jsx("caption", { className: "visually-hidden", children: caption }), _jsx("thead", { className: "mono", children: _jsx("tr", { children: columns.map((column) => {
+    return (_jsx("div", { className: ccx("table-scroll"), tabIndex: 0, role: "region", "aria-label": caption, children: _jsxs("table", { className: ccx("data-table"), children: [_jsx("caption", { className: ccx("visually-hidden"), children: caption }), _jsx("thead", { className: ccx("mono"), children: _jsx("tr", { children: columns.map((column) => {
                             const direction = sort?.key === column.key ? sort.direction : undefined;
-                            return (_jsx("th", { scope: "col", "aria-sort": column.sortable ? (direction ?? "none") : undefined, "data-align": column.align, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column.key), children: [column.header, direction === "descending" ? (_jsx(ArrowDown, { size: 12, "aria-hidden": "true" })) : (_jsx(ArrowUp, { size: 12, "aria-hidden": "true", className: direction ? undefined : "data-table-idle" }))] })) : (column.header) }, column.key));
+                            return (_jsx("th", { scope: "col", "aria-sort": column.sortable ? (direction ?? "none") : undefined, "data-align": column.align, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column.key), children: [column.header, direction === "descending" ? (_jsx(ArrowDown, { size: 12, "aria-hidden": "true" })) : (_jsx(ArrowUp, { size: 12, "aria-hidden": "true", className: ccx(direction ? undefined : "data-table-idle") }))] })) : (column.header) }, column.key));
                         }) }) }), _jsx("tbody", { children: sortedRows.map((row) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { "data-align": column.align, children: column.render ? column.render(row) : row[column.key] }, column.key))) }, String(row[rowKey])))) })] }) }));
 }

package/dist/components/ui/DepthButton.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Physical, layered button that presses down into its base (CSS 3D depth). */
 import { forwardRef } from "react";
-import { cx } from "../../lib/classNames.js";
+import { ccx } from "../../lib/classNames.js";
 const DepthButton = forwardRef(function DepthButton({ children, className, type = "button", ...rest }, ref) {
-    return (_jsx("button", { ref: ref, ...rest, type: type, className: cx("depth-button", className), children: _jsx("span", { className: "depth-button-face", children: children }) }));
+    return (_jsx("button", { ref: ref, ...rest, type: type, className: ccx("depth-button", className), children: _jsx("span", { className: ccx("depth-button-face"), children: children }) }));
 });
 export default DepthButton;

package/dist/components/ui/Dialog.d.ts

@@ -1,5 +1,5 @@
 /** Native controlled modal, with refs and props for its existing DOM parts. */
-import { type ReactNode } from "react";
+import { type RefObject, type ReactNode } from "react";
 import type { NativePartProps } from "../../lib/componentProps.js";
 export type DialogProps = Omit<NativePartProps<"dialog">, "ref" | "open" | "onClose" | "title"> & {
     open: boolean;
@@ -9,6 +9,8 @@ export type DialogProps = Omit<NativePartProps<"dialog">, "ref" | "open" | "onCl
     description?: string;
     footer?: ReactNode;
     placement?: "center" | "left" | "right";
+    initialFocus?: RefObject<HTMLElement | null>;
+    onOpenAutoFocus?: (event: Event) => void;
     panelProps?: NativePartProps<"div">;
     bodyProps?: NativePartProps<"div">;
     footerProps?: NativePartProps<"footer">;
@@ -22,6 +24,8 @@ declare const Dialog: import("react").ForwardRefExoticComponent<Omit<NativePartP
     description?: string;
     footer?: ReactNode;
     placement?: "center" | "left" | "right";
+    initialFocus?: RefObject<HTMLElement | null>;
+    onOpenAutoFocus?: (event: Event) => void;
     panelProps?: NativePartProps<"div">;
     bodyProps?: NativePartProps<"div">;
     footerProps?: NativePartProps<"footer">;

package/dist/components/ui/Dialog.js

@@ -1,25 +1,45 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Native controlled modal, with refs and props for its existing DOM parts. */
-import { forwardRef, useEffect, useId } from "react";
+import { useContext, forwardRef, useEffect, useId, useRef, } from "react";
 import { X } from "lucide-react";
-import { cx } from "../../lib/classNames.js";
+import { cx, ccx } from "../../lib/classNames.js";
 import { lockDocumentScroll } from "../../lib/lockDocumentScroll.js";
 import { composeEventHandlers } from "../../lib/composeEventHandlers.js";
+import useDismiss from "../../hooks/useLayerDismiss.js";
+import { LayerVisibility, LayerParent, isTopLayer } from "../../lib/layers.js";
 import useControlRef from "../../hooks/useControlRef.js";
-const Dialog = forwardRef(function Dialog({ open, onClose, title, children, description, footer, placement = "center", className, onCancel, onClick, panelProps, bodyProps, footerProps, closeButtonProps, ...rest }, forwardedRef) {
+const Dialog = forwardRef(function Dialog({ open, initialFocus, onOpenAutoFocus, onClose, title, children, description, footer, placement = "center", className, onCancel, onClick, onPointerDown, panelProps, bodyProps, footerProps, closeButtonProps, ...rest }, forwardedRef) {
     const { ref, attach } = useControlRef(forwardedRef);
+    const suppressBackdrop = useRef(false);
     const titleId = useId();
     const descriptionId = useId();
+    const parentVisible = useContext(LayerVisibility);
+    const visibleOpen = open && parentVisible;
+    const layer = useDismiss(ref, visibleOpen, (reason) => {
+        const node = ref.current;
+        if (reason === "escape" && node) {
+            const EventType = node.ownerDocument.defaultView?.Event ?? Event;
+            node.dispatchEvent(new EventType("cancel", { cancelable: true }));
+        }
+    }, { outside: false });
     useEffect(() => {
         const dialog = ref.current;
         if (!dialog)
             return;
-        if (open && !dialog.open)
+        if (visibleOpen && !dialog.open) {
             dialog.showModal();
-        if (!open && dialog.open)
+            const EventType = dialog.ownerDocument.defaultView?.Event ?? Event;
+            const event = new EventType("contour-open-auto-focus", {
+                cancelable: true,
+            });
+            onOpenAutoFocus?.(event);
+            if (!event.defaultPrevented)
+                initialFocus?.current?.focus();
+        }
+        if (!visibleOpen && dialog.open)
             dialog.close();
-        if (!open)
+        if (!visibleOpen)
             return;
         const release = lockDocumentScroll(dialog.ownerDocument);
         dialog.addEventListener("close", release);
@@ -27,17 +47,28 @@ const Dialog = forwardRef(function Dialog({ open, onClose, title, children, desc
             dialog.removeEventListener("close", release);
             release();
         };
-    }, [open, ref]);
-    return (_jsx("dialog", { ...rest, ref: attach, role: "dialog", "aria-modal": open || undefined, className: cx("dialog", `dialog-${placement}`, className), "aria-labelledby": cx(titleId, rest["aria-labelledby"]), "aria-describedby": cx(description && descriptionId, rest["aria-describedby"]) || undefined, onCancel: (event) => {
-            onCancel?.(event);
-            const canceled = event.defaultPrevented;
-            // The browser must never close the element independently of the controlled open prop.
-            event.preventDefault();
-            if (!canceled)
-                onClose();
-        }, onClick: composeEventHandlers(onClick, (event) => {
-            if (event.target === event.currentTarget)
-                onClose();
-        }), children: _jsxs("div", { ...panelProps, className: cx("dialog-panel", panelProps?.className), children: [_jsxs("header", { className: "dialog-header", children: [_jsxs("div", { children: [_jsx("h2", { id: titleId, children: title }), description && (_jsx("p", { id: descriptionId, className: "dialog-description", children: description }))] }), _jsx("button", { ...closeButtonProps, type: "button", className: cx("dialog-close", closeButtonProps?.className), "aria-label": closeButtonProps?.["aria-label"] ?? "Close dialog", onClick: composeEventHandlers(closeButtonProps?.onClick, () => onClose()), children: _jsx(X, { size: 18 }) })] }), _jsx("div", { ...bodyProps, className: cx("dialog-body", bodyProps?.className), children: children }), footer && (_jsx("footer", { ...footerProps, className: cx("dialog-footer", footerProps?.className), children: footer }))] }) }));
+    }, [visibleOpen, ref, initialFocus, onOpenAutoFocus]);
+    return (_jsx(LayerVisibility.Provider, { value: visibleOpen, children: _jsx(LayerParent.Provider, { value: layer, children: _jsx("dialog", { ...rest, ref: attach, role: "dialog", "aria-modal": visibleOpen || undefined, className: ccx("dialog", `dialog-${placement}`, className), "aria-labelledby": cx(titleId, rest["aria-labelledby"]), "aria-describedby": cx(description && descriptionId, rest["aria-describedby"]) ||
+                    undefined, onCancel: (event) => {
+                    onCancel?.(event);
+                    const canceled = event.defaultPrevented;
+                    // The browser must never close the element independently of the controlled open prop.
+                    event.preventDefault();
+                    if (!canceled &&
+                        isTopLayer(event.currentTarget.ownerDocument, layer))
+                        onClose();
+                }, onPointerDown: (event) => {
+                    onPointerDown?.(event);
+                    if (event.target === event.currentTarget)
+                        suppressBackdrop.current = !isTopLayer(event.currentTarget.ownerDocument, layer);
+                }, onClick: (event) => {
+                    const suppressed = suppressBackdrop.current;
+                    suppressBackdrop.current = false;
+                    onClick?.(event);
+                    if (!event.defaultPrevented &&
+                        !suppressed &&
+                        event.target === event.currentTarget)
+                        onClose();
+                }, children: _jsxs("div", { ...panelProps, className: ccx("dialog-panel", panelProps?.className), children: [_jsxs("header", { className: ccx("dialog-header"), children: [_jsxs("div", { children: [_jsx("h2", { id: titleId, children: title }), description && (_jsx("p", { id: descriptionId, className: ccx("dialog-description"), children: description }))] }), _jsx("button", { ...closeButtonProps, type: "button", className: ccx("dialog-close", closeButtonProps?.className), "aria-label": closeButtonProps?.["aria-label"] ?? "Close dialog", onClick: composeEventHandlers(closeButtonProps?.onClick, () => onClose()), children: _jsx(X, { size: 18 }) })] }), _jsx("div", { ...bodyProps, className: ccx("dialog-body", bodyProps?.className), children: children }), footer && (_jsx("footer", { ...footerProps, className: ccx("dialog-footer", footerProps?.className), children: footer }))] }) }) }) }));
 });
 export default Dialog;

package/dist/components/ui/Disclosure.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ccx } from "../../lib/classNames.js";
 import { Plus } from "lucide-react";
 export default function Disclosure({ className, summary, children, defaultOpen = false, iconSize = 23, iconStrokeWidth = 1.25, }) {
-    return (_jsxs("details", { className: `disclosure ${className}`, open: defaultOpen, children: [_jsxs("summary", { children: [summary, _jsx(Plus, { className: "disclosure-icon", size: iconSize, strokeWidth: iconStrokeWidth, "aria-hidden": "true" })] }), children] }));
+    return (_jsxs("details", { className: ccx("disclosure", className), open: defaultOpen, children: [_jsxs("summary", { children: [summary, _jsx(Plus, { className: ccx("disclosure-icon"), size: iconSize, strokeWidth: iconStrokeWidth, "aria-hidden": "true" })] }), children] }));
 }

package/dist/components/ui/Divider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ccx } from "../../lib/classNames.js";
 export default function Divider({ label }) {
     if (!label)
-        return _jsx("hr", { className: "divider" });
-    return (_jsx("div", { className: "divider divider-labelled mono", role: "separator", children: _jsx("span", { children: label }) }));
+        return _jsx("hr", { className: ccx("divider") });
+    return (_jsx("div", { className: ccx("divider divider-labelled mono"), role: "separator", children: _jsx("span", { children: label }) }));
 }

package/dist/components/ui/DropdownMenu.d.ts

@@ -1,5 +1,8 @@
 /** Button-triggered action menu with roving focus, Escape/outside dismissal, and focus return. */
-import { type ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
+import type { FloatingOptions } from "../../hooks/useFloatingPanel.js";
+import type { NativePartProps } from "../../lib/componentProps.js";
+import { type DismissReason } from "../../lib/layers.js";
 export type MenuItem = {
     label: string;
     onSelect: () => void;
@@ -9,12 +12,16 @@ export type MenuItem = {
     /** Stable identity when labels are duplicated or translated. */
     id?: string;
 };
-export type DropdownMenuProps = {
+export type DropdownMenuProps = FloatingOptions & {
     label: string;
     items: MenuItem[];
-    align?: "start" | "end";
+    triggerProps?: NativePartProps<"button">;
+    renderTrigger?: (props: NativePartProps<"button"> & {
+        children: ReactNode;
+    }) => ReactElement;
+    onDismiss?: (reason: DismissReason, event: KeyboardEvent | PointerEvent) => void;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
 };
-export default function DropdownMenu({ label, items, align, open: controlledOpen, defaultOpen, onOpenChange, }: DropdownMenuProps): import("react").JSX.Element;
+export default function DropdownMenu({ label, items, align, side, sideOffset, collisionPadding, portal, container: portalContainer, triggerProps, renderTrigger, onDismiss, open: controlledOpen, defaultOpen, onOpenChange, }: DropdownMenuProps): import("react").JSX.Element;

package/dist/components/ui/DropdownMenu.js

@@ -1,17 +1,27 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /** Button-triggered action menu with roving focus, Escape/outside dismissal, and focus return. */
-import { useCallback, useEffect, useId, useRef } from "react";
+import { useContext, useCallback, useEffect, useId, useRef, useMemo, useState, } from "react";
 import { ChevronDown } from "lucide-react";
 import useOpenState from "../../hooks/useOpenState.js";
-import useDismiss from "../../hooks/useDismiss.js";
-import { cx } from "../../lib/classNames.js";
+import OverlayTrigger from "./OverlayTrigger.js";
+import useControlRef from "../../hooks/useControlRef.js";
+import { composeRefs } from "../../lib/composeRefs.js";
+import FloatingPortal from "./FloatingPortal.js";
+import { LayerVisibility, LayerParent, } from "../../lib/layers.js";
+import useDismiss from "../../hooks/useLayerDismiss.js";
+import { ccx } from "../../lib/classNames.js";
 import { nextIndexForKey } from "../../lib/keyboard.js";
-export default function DropdownMenu({ label, items, align = "start", open: controlledOpen, defaultOpen = false, onOpenChange, }) {
+export default function DropdownMenu({ label, items, align = "start", side = "bottom", sideOffset = 8, collisionPadding = 8, portal = true, container: portalContainer, triggerProps, renderTrigger, onDismiss, open: controlledOpen, defaultOpen = false, onOpenChange, }) {
     const menuId = useId();
     const [open, setOpen] = useOpenState(controlledOpen, defaultOpen, onOpenChange);
+    const parentVisible = useContext(LayerVisibility);
+    const visibleOpen = open && parentVisible;
     const container = useRef(null);
-    const trigger = useRef(null);
+    const panel = useRef(null);
+    const { ref: trigger, attach: attachButton } = useControlRef(triggerProps?.ref ?? null);
+    const [anchorElement, setAnchorElement] = useState(null);
+    const attachTrigger = useMemo(() => composeRefs(attachButton, setAnchorElement), [attachButton]);
     const initialFocus = useRef("first");
     const search = useRef({ value: "", time: 0 });
     const itemRefs = useRef([]);
@@ -19,68 +29,101 @@ export default function DropdownMenu({ label, items, align = "start", open: cont
         setOpen(false);
         if (returnFocus)
             trigger.current?.focus();
-    }, [setOpen]);
-    useDismiss(container, open, useCallback((reason) => close(reason === "escape"), [close]));
+    }, [setOpen, trigger]);
+    const layer = useDismiss(container, visibleOpen, (reason, event) => {
+        onDismiss?.(reason, event);
+        if (!event.defaultPrevented)
+            close(reason === "escape");
+    }, { branches: [panel, trigger], layerElement: panel });
     useEffect(() => {
-        if (!open)
+        if (!visibleOpen)
             return;
         search.current = { value: "", time: 0 };
         const enabled = itemRefs.current.filter((item) => item && !item.disabled);
-        (initialFocus.current === "last" ? enabled.at(-1) : enabled[0])?.focus();
-    }, [open]);
-    return (_jsxs("div", { ref: container, className: cx("menu", `menu-${align}`), children: [_jsxs("button", { ref: trigger, type: "button", className: "menu-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": menuId, onClick: () => {
-                    initialFocus.current = "first";
-                    setOpen(!open);
-                }, onKeyDown: (event) => {
-                    if (event.key !== "ArrowDown" && event.key !== "ArrowUp")
-                        return;
-                    event.preventDefault();
-                    initialFocus.current = event.key === "ArrowUp" ? "last" : "first";
-                    if (open) {
-                        const enabled = itemRefs.current.filter((item) => item && !item.disabled);
-                        (initialFocus.current === "last"
-                            ? enabled.at(-1)
-                            : enabled[0])?.focus();
-                    }
-                    else
-                        setOpen(true);
-                }, children: [label, _jsx(ChevronDown, { size: 15, "aria-hidden": "true", className: "menu-chevron" })] }), _jsx("div", { id: menuId, role: "menu", "aria-label": label, className: "menu-list", hidden: !open, children: items.map((item, index) => (_jsxs("button", { ref: (element) => {
-                        itemRefs.current[index] = element;
-                    }, type: "button", role: "menuitem", tabIndex: -1, disabled: item.disabled, className: cx("menu-item", item.danger && "menu-item-danger"), onClick: () => {
-                        item.onSelect();
-                        close();
-                    }, onKeyDown: (event) => {
-                        if (event.key === "Tab")
-                            return close(false);
-                        const enabled = items
-                            .map((entry, position) => (entry.disabled ? -1 : position))
-                            .filter((position) => position !== -1);
-                        const next = nextIndexForKey(event.key, enabled.indexOf(index), enabled.length, "vertical");
-                        if (next !== null) {
-                            event.preventDefault();
-                            itemRefs.current[enabled[next]]?.focus();
-                        }
-                        else if (event.key.length === 1 &&
-                            !event.ctrlKey &&
-                            !event.altKey &&
-                            !event.metaKey) {
-                            const now = performance.now();
-                            const previous = now - search.current.time < 500 ? search.current.value : "";
-                            const value = previous &&
-                                [...previous].every((letter) => letter === event.key.toLowerCase())
-                                ? event.key.toLowerCase()
-                                : previous + event.key.toLowerCase();
-                            search.current = { value, time: now };
-                            const start = enabled.indexOf(index) + 1;
-                            const ordered = [
-                                ...enabled.slice(start),
-                                ...enabled.slice(0, start),
-                            ];
-                            const match = ordered.find((position) => items[position].label.toLowerCase().startsWith(value));
-                            if (match !== undefined) {
-                                event.preventDefault();
-                                itemRefs.current[match]?.focus();
-                            }
-                        }
-                    }, children: [item.icon, item.label] }, item.id ?? item.label))) })] }));
+        const first = initialFocus.current === "last" ? enabled.at(-1) : enabled[0];
+        (first ?? panel.current)?.focus();
+    }, [visibleOpen, anchorElement]);
+    const ownedTrigger = {
+        ...triggerProps,
+        ref: attachTrigger,
+        type: "button",
+        className: ccx("menu-trigger", triggerProps?.className),
+        "aria-haspopup": "menu",
+        "aria-expanded": visibleOpen,
+        "aria-controls": menuId,
+        onClick: (event) => {
+            triggerProps?.onClick?.(event);
+            if (!event.defaultPrevented && !triggerProps?.disabled) {
+                initialFocus.current = "first";
+                setOpen(!open);
+            }
+        },
+        onKeyDown: (event) => {
+            triggerProps?.onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            if (triggerProps?.disabled ||
+                (event.key !== "ArrowDown" && event.key !== "ArrowUp"))
+                return;
+            event.preventDefault();
+            initialFocus.current = event.key === "ArrowUp" ? "last" : "first";
+            if (!open)
+                setOpen(true);
+            else {
+                const enabled = itemRefs.current.filter((item) => item && !item.disabled);
+                (initialFocus.current === "last"
+                    ? enabled.at(-1)
+                    : enabled[0])?.focus();
+            }
+        },
+        children: (_jsxs(_Fragment, { children: [label, _jsx(ChevronDown, { size: 15, "aria-hidden": "true", className: ccx("menu-chevron") })] })),
+    };
+    return (_jsx(LayerVisibility.Provider, { value: visibleOpen, children: _jsx(LayerParent.Provider, { value: layer, children: _jsxs("div", { ref: container, className: ccx("menu", `menu-${align}`), children: [_jsx(OverlayTrigger, { renderer: renderTrigger, props: ownedTrigger }), _jsx(FloatingPortal, { anchorElement: anchorElement, anchor: trigger, panel: panel, open: visibleOpen, options: {
+                            side,
+                            align,
+                            sideOffset,
+                            collisionPadding,
+                            portal,
+                            container: portalContainer,
+                        }, children: _jsx("div", { ref: panel, id: menuId, role: "menu", tabIndex: -1, "aria-label": label, className: ccx("menu-list"), hidden: !visibleOpen, children: items.map((item, index) => (_jsxs("button", { ref: (element) => {
+                                    itemRefs.current[index] = element;
+                                }, type: "button", role: "menuitem", tabIndex: -1, disabled: item.disabled, className: ccx("menu-item", item.danger && "menu-item-danger"), onClick: () => {
+                                    item.onSelect();
+                                    close();
+                                }, onKeyDown: (event) => {
+                                    if (event.key === "Tab")
+                                        return close(false);
+                                    const enabled = items
+                                        .map((entry, position) => entry.disabled ? -1 : position)
+                                        .filter((position) => position !== -1);
+                                    const next = nextIndexForKey(event.key, enabled.indexOf(index), enabled.length, "vertical");
+                                    if (next !== null) {
+                                        event.preventDefault();
+                                        itemRefs.current[enabled[next]]?.focus();
+                                    }
+                                    else if (event.key.length === 1 &&
+                                        !event.ctrlKey &&
+                                        !event.altKey &&
+                                        !event.metaKey) {
+                                        const now = performance.now();
+                                        const previous = now - search.current.time < 500
+                                            ? search.current.value
+                                            : "";
+                                        const value = previous &&
+                                            [...previous].every((letter) => letter === event.key.toLowerCase())
+                                            ? event.key.toLowerCase()
+                                            : previous + event.key.toLowerCase();
+                                        search.current = { value, time: now };
+                                        const start = enabled.indexOf(index) + 1;
+                                        const ordered = [
+                                            ...enabled.slice(start),
+                                            ...enabled.slice(0, start),
+                                        ];
+                                        const match = ordered.find((position) => items[position].label.toLowerCase().startsWith(value));
+                                        if (match !== undefined) {
+                                            event.preventDefault();
+                                            itemRefs.current[match]?.focus();
+                                        }
+                                    }
+                                }, children: [item.icon, item.label] }, item.id ?? item.label))) }) })] }) }) }));
 }

package/dist/components/ui/EmptyState.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ccx } from "../../lib/classNames.js";
 export default function EmptyState({ icon, title, message, action, }) {
-    return (_jsxs("div", { className: "empty-state", children: [_jsx("span", { className: "empty-state-icon", "aria-hidden": "true", children: icon }), _jsx("h3", { children: title }), _jsx("p", { children: message }), action] }));
+    return (_jsxs("div", { className: ccx("empty-state"), children: [_jsx("span", { className: ccx("empty-state-icon"), "aria-hidden": "true", children: icon }), _jsx("h3", { children: title }), _jsx("p", { children: message }), action] }));
 }

package/dist/components/ui/Field.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle } from "lucide-react";
-import { cx } from "../../lib/classNames.js";
+import { ccx } from "../../lib/classNames.js";
 export default function Field({ id, label, children, hint, error, required, hideLabel, counter, disabled, }) {
-    return (_jsxs("div", { className: cx("field", error && "field-invalid", disabled && "field-disabled"), children: [_jsxs("label", { htmlFor: id, className: cx("field-label mono", hideLabel && "visually-hidden"), children: [label, required && (_jsx("span", { className: "field-required", "aria-hidden": "true", children: "*" }))] }), children, (hint || error || counter) && (_jsxs("div", { className: "field-footer mono", children: [error ? (_jsxs("span", { id: `${id}-error`, className: "field-error", children: [_jsx(AlertCircle, { size: 13, "aria-hidden": "true" }), error] })) : (hint && _jsx("span", { id: `${id}-hint`, children: hint })), counter && _jsx("span", { className: "field-counter", children: counter })] }))] }));
+    return (_jsxs("div", { className: ccx("field", error && "field-invalid", disabled && "field-disabled"), children: [_jsxs("label", { htmlFor: id, className: ccx("field-label mono", hideLabel && "visually-hidden"), children: [label, required && (_jsx("span", { className: ccx("field-required"), "aria-hidden": "true", children: "*" }))] }), children, (hint || error || counter) && (_jsxs("div", { className: ccx("field-footer mono"), children: [error ? (_jsxs("span", { id: `${id}-error`, className: ccx("field-error"), children: [_jsx(AlertCircle, { size: 13, "aria-hidden": "true" }), error] })) : (hint && _jsx("span", { id: `${id}-hint`, children: hint })), counter && _jsx("span", { className: ccx("field-counter"), children: counter })] }))] }));
 }

package/dist/components/ui/FlipCard.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Two-sided card that flips in 3D; a button toggles it so the back is reachable without hover. */
 import { useState, version } from "react";
 import { RefreshCw } from "lucide-react";
-import { cx } from "../../lib/classNames.js";
+import { ccx } from "../../lib/classNames.js";
 // React 18 treats inert as an unknown string attribute; React 19 treats it as boolean.
 const inertAttributes = {
     inert: Number.parseInt(version, 10) >= 19 ? true : "",
 };
 export default function FlipCard({ front, back, label }) {
     const [flipped, setFlipped] = useState(false);
-    return (_jsxs("div", { className: "flip-stage", children: [_jsxs("div", { className: cx("flip-card", flipped && "is-flipped"), children: [_jsx("div", { className: "flip-face flip-front", "aria-hidden": flipped, ...(flipped ? inertAttributes : {}), children: front }), _jsx("div", { className: "flip-face flip-back", "aria-hidden": !flipped, ...(!flipped ? inertAttributes : {}), children: back })] }), _jsxs("button", { type: "button", className: "flip-toggle mono", "aria-pressed": flipped, onClick: () => setFlipped((value) => !value), children: [_jsx(RefreshCw, { size: 13, "aria-hidden": "true" }), label] })] }));
+    return (_jsxs("div", { className: ccx("flip-stage"), children: [_jsxs("div", { className: ccx("flip-card", flipped && "is-flipped"), children: [_jsx("div", { className: ccx("flip-face flip-front"), "aria-hidden": flipped, ...(flipped ? inertAttributes : {}), children: front }), _jsx("div", { className: ccx("flip-face flip-back"), "aria-hidden": !flipped, ...(!flipped ? inertAttributes : {}), children: back })] }), _jsxs("button", { type: "button", className: ccx("flip-toggle mono"), "aria-pressed": flipped, onClick: () => setFlipped((value) => !value), children: [_jsx(RefreshCw, { size: 13, "aria-hidden": "true" }), label] })] }));
 }

package/dist/components/ui/FloatingPortal.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode, type RefObject } from "react";
+import { type FloatingOptions } from "../../hooks/useFloatingPanel.js";
+export default function FloatingPortal({ anchor, anchorElement, panel, open, options, children, }: {
+    anchor: RefObject<HTMLElement | null>;
+    anchorElement: HTMLElement | null;
+    panel: RefObject<HTMLElement | null>;
+    open: boolean;
+    options: FloatingOptions;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/ui/FloatingPortal.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import useFloatingPanel, { floatingContainer, } from "../../hooks/useFloatingPanel.js";
+export default function FloatingPortal({ anchor, anchorElement, panel, open, options, children, }) {
+    const scope = useRef(null);
+    const target = anchorElement && options.portal !== false
+        ? floatingContainer(anchorElement, options)
+        : null;
+    useLayoutEffect(() => {
+        const root = scope.current;
+        if (!open || !anchorElement || !root)
+            return;
+        const view = anchorElement.ownerDocument.defaultView;
+        if (!view)
+            return;
+        const synchronize = () => {
+            const computed = view.getComputedStyle(anchorElement);
+            // Copy inherited CSS variables without controlling the host document's theme.
+            for (let index = 0; index < computed.length; index++) {
+                const name = computed.item(index);
+                if (name.startsWith("--"))
+                    root.style.setProperty(name, computed.getPropertyValue(name));
+            }
+            root.dir = computed.direction;
+            root.style.fontFamily = computed.fontFamily;
+            root.style.color = computed.color;
+        };
+        synchronize();
+        const observer = new view.MutationObserver(synchronize);
+        let ancestor = anchorElement;
+        while (ancestor) {
+            observer.observe(ancestor, {
+                attributes: true,
+                attributeFilter: [
+                    "style",
+                    "class",
+                    "dir",
+                    "data-theme",
+                    "data-contour-theme",
+                ],
+            });
+            ancestor = ancestor.parentElement;
+        }
+        return () => observer.disconnect();
+    }, [anchorElement, target, open]);
+    useFloatingPanel(anchor, panel, open, { ...options, container: target });
+    const content = (_jsx("span", { ref: scope, className: "contour-floating-root contour-root", style: { display: "contents" }, children: children }));
+    return target ? createPortal(content, target) : content;
+}

package/dist/components/ui/IconButton.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Circular icon-only button (the portfolio's source/copy button), with a required accessible label. */
 import { forwardRef } from "react";
-import { cx } from "../../lib/classNames.js";
+import { ccx } from "../../lib/classNames.js";
 const IconButton = forwardRef(function IconButton({ label, children, variant = "outline", size = "md", spin = false, className, type = "button", ...rest }, ref) {
-    return (_jsx("button", { ref: ref, ...rest, type: type, "aria-label": label, title: rest.title ?? label, className: cx("icon-button", `icon-button-${variant}`, `icon-button-${size}`, spin && "icon-button-spin", className), children: children }));
+    return (_jsx("button", { ref: ref, ...rest, type: type, "aria-label": label, title: rest.title ?? label, className: ccx("icon-button", `icon-button-${variant}`, `icon-button-${size}`, spin && "icon-button-spin", className), children: children }));
 });
 export default IconButton;

package/dist/components/ui/Kbd.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ccx } from "../../lib/classNames.js";
 export default function Kbd({ children }) {
-    return _jsx("kbd", { className: "kbd", children: children });
+    return _jsx("kbd", { className: ccx("kbd"), children: children });
 }

package/dist/components/ui/Magnetic.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ccx } from "../../lib/classNames.js";
 /** Pulls its child toward a fine pointer while hovered, then springs back (an awwwards staple). */
 import { useRef } from "react";
 import { motionDisabledFor } from "../../lib/motion.js";
 export default function Magnetic({ children, strength = 0.35 }) {
     const ref = useRef(null);
     const reset = () => ref.current?.style.removeProperty("--magnet");
-    return (_jsx("span", { ref: ref, className: "magnetic", onPointerMove: (event) => {
+    return (_jsx("span", { ref: ref, className: ccx("magnetic"), onPointerMove: (event) => {
             const element = ref.current;
             if (!element ||
                 event.pointerType !== "mouse" ||

package/dist/components/ui/Marquee.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ccx } from "../../lib/classNames.js";
 import { Asterisk } from "lucide-react";
 export default function Marquee({ items, label, duration = 28 }) {
     // The track is rendered twice so the loop has no visible seam.
-    const track = (hidden) => (_jsx("ul", { className: "marquee-track", "aria-hidden": hidden || undefined, children: items.map((item) => (_jsxs("li", { children: [_jsx(Asterisk, { size: 18, "aria-hidden": "true" }), item] }, item))) }));
-    return (_jsx("div", { className: "marquee", role: "region", "aria-label": label, style: { "--marquee-duration": `${duration}s` }, children: _jsxs("div", { className: "marquee-inner", children: [track(false), track(true)] }) }));
+    const track = (hidden) => (_jsx("ul", { className: ccx("marquee-track"), "aria-hidden": hidden || undefined, children: items.map((item) => (_jsxs("li", { children: [_jsx(Asterisk, { size: 18, "aria-hidden": "true" }), item] }, item))) }));
+    return (_jsx("div", { className: ccx("marquee"), role: "region", "aria-label": label, style: { "--marquee-duration": `${duration}s` }, children: _jsxs("div", { className: ccx("marquee-inner"), children: [track(false), track(true)] }) }));
 }

package/dist/components/ui/OverlayTrigger.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement, ReactNode } from "react";
+import type { NativePartProps } from "../../lib/componentProps.js";
+type Props = NativePartProps<"button"> & {
+    children: ReactNode;
+};
+/** One owned native-button contract shared by default and consumer-rendered triggers. */
+export default function OverlayTrigger({ renderer, props, }: {
+    renderer?: (props: Props) => ReactElement;
+    props: Props;
+}): import("react").JSX.Element;
+export {};

package/dist/components/ui/OverlayTrigger.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** One owned native-button contract shared by default and consumer-rendered triggers. */
+export default function OverlayTrigger({ renderer, props, }) {
+    return renderer ? renderer(props) : _jsx("button", { ...props });
+}

package/dist/components/ui/Pagination.d.ts

@@ -3,5 +3,9 @@ export type PaginationProps = {
     pageCount: number;
     onChange: (page: number) => void;
     label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    pageLabel?: (page: number) => string;
+    formatPage?: (page: number) => string;
 };
-export default function Pagination({ page, pageCount, onChange, label, }: PaginationProps): import("react").JSX.Element;
+export default function Pagination({ page, pageCount, onChange, label, previousLabel, nextLabel, pageLabel, formatPage, }: PaginationProps): import("react").JSX.Element;