@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/checkbox-bead.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate } from "animejs";
+import { motionTime, readMotion, useReducedMotion } from "../lib/motion.js";
+import { immediateTiming, themedEase, themedSpring, } from "../lib/motion-spring.js";
+import { useId, useLayoutEffect, useRef } from "react";
+import { GooeyFilterDefinition, GooeyInsetDefinition, GooeyShadowDefinition, GooeySurfaceDefinition, } from "./gooey.js";
+const contours = {
+    unchecked: "M3.25 5.9 L5.1 7.9 L8.8 3.8",
+    checked: "M3.25 5.9 L5.1 7.9 L8.8 3.8",
+    mixed: "M3.4 6 L6 6 L8.6 6",
+};
+const goo = { blurStdDeviation: 0.22, alphaSlope: 18, alphaIntercept: -8 };
+/** @internal Draw one sculpted stroke from its first tip through to its last. */
+export function CheckboxBead({ state }) {
+    const id = `caps-checkbox-${useId().replaceAll(":", "")}`;
+    const mark = useRef(null);
+    const initial = useRef(state).current;
+    const previous = useRef(state);
+    const reduced = useReducedMotion();
+    useLayoutEffect(() => {
+        if (!mark.current)
+            return;
+        const filled = state !== "unchecked";
+        const wasFilled = previous.current !== "unchecked";
+        const immediate = reduced || previous.current === state;
+        previous.current = state;
+        const motion = readMotion(mark.current);
+        const emptying = themedEase(motion, { ease: "inCubic", duration: 160 });
+        const morph = animate(mark.current, {
+            d: {
+                to: contours[state],
+                ...(immediate
+                    ? immediateTiming
+                    : themedEase(motion, { ease: "outCubic", duration: 200 })),
+            },
+            "stroke-dashoffset": {
+                to: filled ? 0 : 1,
+                ...(immediate
+                    ? immediateTiming
+                    : filled
+                        ? themedEase(motion, { ease: "inOutSine", duration: 260 })
+                        : emptying),
+            },
+            "stroke-width": immediate
+                ? { to: filled ? 2.4 : 0, duration: 0 }
+                : filled && !wasFilled
+                    ? [
+                        {
+                            to: 2.2,
+                            ...themedEase(motion, { ease: "outCubic", duration: 65 }),
+                        },
+                        {
+                            to: 2.4,
+                            delay: motionTime(motion, 120),
+                            ...themedSpring(motion, { bounce: 0.35, duration: 220 }),
+                        },
+                    ]
+                    : { to: filled ? 2.4 : 0, ...emptying },
+        });
+        return () => {
+            morph.cancel();
+        };
+    }, [state, reduced]);
+    return (_jsxs("svg", { className: "caps-checkbox-visual", width: "24", height: "24", viewBox: "0 0 12 12", "aria-hidden": "true", focusable: "false", children: [_jsxs("defs", { children: [_jsx(GooeySurfaceDefinition, { id: `${id}-surface`, transform: "matrix(1 0 0 1 6 6)" }), _jsx(GooeyShadowDefinition, { id: `${id}-shadow` }), _jsx(GooeyInsetDefinition, { id: `${id}-inset` }), _jsx(GooeyFilterDefinition, { id: `${id}-goo`, values: goo }), _jsxs("filter", { id: `${id}-relief`, x: "-25%", y: "-25%", width: "150%", height: "150%", colorInterpolationFilters: "sRGB", children: [_jsx("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "0.28", result: "relief" }), _jsx("feSpecularLighting", { in: "relief", surfaceScale: "1.2", specularConstant: "0.55", specularExponent: "18", lightingColor: "color-mix(in srgb, var(--color-white) calc(var(--depth) * 100%), var(--color-black))", result: "light", children: _jsx("feDistantLight", { azimuth: "225", elevation: "55" }) }), _jsx("feComposite", { in: "light", in2: "SourceAlpha", operator: "in", result: "clipped-light" }), _jsx("feBlend", { in: "SourceGraphic", in2: "clipped-light", mode: "screen" })] }), _jsx("mask", { id: `${id}-contour`, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "12", height: "12", style: { maskType: "alpha" }, children: _jsx("path", { ref: mark, d: contours[initial], fill: "none", stroke: "var(--color-white)", strokeWidth: initial === "unchecked" ? 0 : 2.4, pathLength: "1", strokeDasharray: "1", strokeDashoffset: initial === "unchecked" ? 1 : 0, strokeLinecap: "round", strokeLinejoin: "round", 
+                            // A horizontal mixed mark has no height for an object-bounding-box filter.
+                            filter: state === "mixed" ? undefined : `url(#${id}-goo)` }) }), _jsx("clipPath", { id: `${id}-well`, children: _jsx("rect", { x: "1", y: "1", width: "10", height: "10", rx: "2.5" }) })] }), _jsx("rect", { className: "caps-checkbox-track", x: "0.5", y: "0.5", width: "11", height: "11", rx: "3", filter: `url(#${id}-inset)` }), _jsx("g", { clipPath: `url(#${id}-well)`, children: _jsx("g", { filter: `url(#${id}-shadow)`, children: _jsx("g", { filter: `url(#${id}-relief)`, children: _jsx("g", { mask: `url(#${id}-contour)`, children: _jsx("rect", { x: "0", y: "0", width: "12", height: "12", fill: `url(#${id}-surface)` }) }) }) }) })] }));
+}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,21 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+/** Props accepted by Checkbox. */
+export type CheckboxProps = {
+    /** Compact instruments keep the wrapper's focus ring and disabled ink readable. */
+    appearance?: "default" | "compact";
+    /** Replaces the bead while the native input continues to own selection. */
+    indicator?: ReactNode;
+    invalid?: boolean;
+    /** Shows a mixed selection while checked still controls native form submission. */
+    indeterminate?: boolean;
+} & InputHTMLAttributes<HTMLInputElement>;
+/** A native checkbox with styled invalid-state presentation. */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<{
+    /** Compact instruments keep the wrapper's focus ring and disabled ink readable. */
+    appearance?: "default" | "compact";
+    /** Replaces the bead while the native input continues to own selection. */
+    indicator?: ReactNode;
+    invalid?: boolean;
+    /** Shows a mixed selection while checked still controls native form submission. */
+    indeterminate?: boolean;
+} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/checkbox.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { CheckboxBead } from "./checkbox-bead.js";
+/** A native checkbox with styled invalid-state presentation. */
+export const Checkbox = forwardRef(function Checkbox({ className, appearance, indicator, invalid, indeterminate = false, checked, defaultChecked = false, onChange, ...props }, ref) {
+    const input = useRef(null);
+    const [localChecked, setLocalChecked] = useState(defaultChecked);
+    const selected = checked ?? localChecked;
+    const state = indeterminate ? "mixed" : selected ? "checked" : "unchecked";
+    useImperativeHandle(ref, () => {
+        if (!input.current)
+            throw new Error("Checkbox input is not mounted");
+        return input.current;
+    }, []);
+    useLayoutEffect(() => {
+        if (input.current)
+            input.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    useEffect(() => {
+        const form = input.current?.form;
+        if (!form || checked !== undefined)
+            return;
+        const reset = (event) => {
+            queueMicrotask(() => {
+                if (!event.defaultPrevented && input.current)
+                    setLocalChecked(defaultChecked);
+            });
+        };
+        form.addEventListener("reset", reset);
+        return () => {
+            form.removeEventListener("reset", reset);
+        };
+    }, [checked, defaultChecked, props.form]);
+    return (_jsxs("span", { className: "caps-checkbox", "data-appearance": appearance === "compact" ? appearance : undefined, "data-state": state, "data-custom-indicator": indicator !== undefined || undefined, children: [_jsx("input", { ...props, checked: selected, "aria-checked": indeterminate ? "mixed" : selected, "aria-invalid": invalid
+                    ? true
+                    : props["aria-invalid"] === false
+                        ? undefined
+                        : props["aria-invalid"], className: cn("caps-checkbox-input", className), onChange: (event) => {
+                    if (checked === undefined)
+                        setLocalChecked(event.target.checked);
+                    onChange?.(event);
+                    // The owner clears a controlled mixed state; native activation clears it first.
+                    event.currentTarget.indeterminate = indeterminate;
+                }, ref: input, type: "checkbox" }), indicator !== undefined ? indicator : _jsx(CheckboxBead, { state: state })] }));
+});

package/dist/components/code-input.d.ts

@@ -0,0 +1,35 @@
+import { type InputHTMLAttributes } from "react";
+/** What the caller has learned about the entered code. */
+export type CodeInputStatus = "idle" | "invalid" | "accepted";
+/** Props accepted by CodeInput. */
+export type CodeInputProps = {
+    /** How many characters the code has. */
+    length?: number;
+    /** The current code. */
+    value: string;
+    /** Receives the code after a native edit or a normalized paste. */
+    onValueChange: (value: string) => void;
+    /**
+     * `invalid` shakes the slots in a cascade and marks them; `accepted` lifts
+     * them in a wave. Say what was wrong next to the field, as with any error.
+     */
+    status?: CodeInputStatus;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "maxLength" | "size">;
+/**
+ * A short code (a sign-in or pairing code) shown as one slot per character.
+ * It is a single native input underneath, so typing, pasting, one-time-code
+ * autofill and screen readers behave as they do on any text field.
+ */
+export declare const CodeInput: import("react").ForwardRefExoticComponent<{
+    /** How many characters the code has. */
+    length?: number;
+    /** The current code. */
+    value: string;
+    /** Receives the code after a native edit or a normalized paste. */
+    onValueChange: (value: string) => void;
+    /**
+     * `invalid` shakes the slots in a cascade and marks them; `accepted` lifts
+     * them in a wave. Say what was wrong next to the field, as with any error.
+     */
+    status?: CodeInputStatus;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "size" | "value" | "maxLength"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/code-input.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { canAnimate, motionEasing, readMotion, } from "../lib/motion.js";
+const graphemes = new Intl.Segmenter();
+function land(slot, motion) {
+    // A character drops into its slot: a small press, then a settle sized by
+    // the theme's bounce. Reduced motion only fades the character in.
+    if (motion.reduced)
+        return slot.animate([{ color: "transparent" }, {}], {
+            duration: motion.fast,
+        });
+    const give = 0.06 * Math.min(1.5, motion.bounce / 0.3);
+    return slot.animate([
+        { transform: `translateY(${String(motion.distance / 2)}px) scale(0.94)` },
+        { transform: `scale(${String(1 + give)})`, offset: 0.55 },
+        { transform: "none" },
+    ], {
+        duration: motion.springDuration,
+        easing: motionEasing(motion, motion.ease),
+    });
+}
+function refuse(slot, index, motion) {
+    const x = motion.shake;
+    return slot.animate([
+        { transform: "none" },
+        { transform: `translateX(${String(-x)}px)` },
+        { transform: `translateX(${String(x)}px)` },
+        { transform: `translateX(${String(-x / 2)}px)` },
+        { transform: "none" },
+    ], {
+        duration: motion.slow,
+        delay: index * motion.stagger,
+        easing: motionEasing(motion, "linear"),
+    });
+}
+function accept(slot, index, motion) {
+    return slot.animate([
+        { transform: "none" },
+        { transform: `translateY(${String(-motion.distance)}px)`, offset: 0.4 },
+        { transform: "none" },
+    ], {
+        duration: motion.slow,
+        delay: index * motion.stagger,
+        easing: motionEasing(motion, motion.ease),
+    });
+}
+/**
+ * A short code (a sign-in or pairing code) shown as one slot per character.
+ * It is a single native input underneath, so typing, pasting, one-time-code
+ * autofill and screen readers behave as they do on any text field.
+ */
+export const CodeInput = forwardRef(function CodeInput({ length = 6, value, onValueChange, status = "idle", className, onFocus, onBlur, onSelect, onPaste, ...props }, ref) {
+    const input = useRef(null);
+    const slots = useRef(null);
+    useImperativeHandle(ref, () => input.current);
+    const [focused, setFocused] = useState(false);
+    const [cursor, setCursor] = useState(value.length);
+    const characters = Array.from(graphemes.segment(value), (part) => part.segment).slice(0, length);
+    const active = Math.min(Array.from(graphemes.segment(value.slice(0, cursor))).length, length - 1);
+    const filled = useRef(characters.length);
+    useLayoutEffect(() => {
+        const root = slots.current;
+        const before = filled.current;
+        filled.current = characters.length;
+        if (!root || !canAnimate(root) || characters.length <= before)
+            return;
+        const slot = root.children.item(characters.length - 1);
+        if (!(slot instanceof HTMLElement))
+            return;
+        const animation = land(slot, readMotion(root));
+        return () => {
+            animation.cancel();
+        };
+    }, [characters.length]);
+    useLayoutEffect(() => {
+        const root = slots.current;
+        if (!root || !canAnimate(root) || status === "idle")
+            return;
+        const motion = readMotion(root);
+        if (motion.reduced)
+            return;
+        const animations = [...root.children].flatMap((slot, index) => slot instanceof HTMLElement
+            ? [
+                status === "invalid"
+                    ? refuse(slot, index, motion)
+                    : accept(slot, index, motion),
+            ]
+            : []);
+        return () => {
+            for (const animation of animations)
+                animation.cancel();
+        };
+    }, [status]);
+    return (_jsxs("div", { className: cn("caps-code-input", className), "data-status": status, children: [_jsx("input", { autoComplete: "one-time-code", inputMode: "numeric", spellCheck: false, ...props, "aria-invalid": status === "invalid" ? true : props["aria-invalid"], className: "caps-code-field", maxLength: length, onBlur: (event) => {
+                    setFocused(false);
+                    onBlur?.(event);
+                }, onChange: (event) => {
+                    onValueChange(event.target.value.replace(/\s/gu, ""));
+                }, onPaste: (event) => {
+                    onPaste?.(event);
+                    if (event.defaultPrevented || event.currentTarget.readOnly)
+                        return;
+                    const pasted = event.clipboardData.getData("text");
+                    const normalized = pasted.replace(/\s/gu, "");
+                    if (normalized === pasted)
+                        return;
+                    event.preventDefault();
+                    const field = event.currentTarget;
+                    const start = field.selectionStart ?? 0;
+                    const end = field.selectionEnd ?? start;
+                    // Native maxlength still owns ordinary edits. Formatted paste is
+                    // normalized before applying that same remaining input capacity.
+                    const available = Math.max(0, length - field.value.length + end - start);
+                    field.setRangeText(normalized.slice(0, available), start, end, "end");
+                    setCursor(field.selectionStart ?? field.value.length);
+                    onValueChange(field.value);
+                }, onFocus: (event) => {
+                    setFocused(true);
+                    setCursor(event.currentTarget.selectionStart ?? value.length);
+                    onFocus?.(event);
+                }, onSelect: (event) => {
+                    setCursor(event.currentTarget.selectionStart ?? value.length);
+                    onSelect?.(event);
+                }, ref: input, value: characters.join("") }), _jsx("div", { ref: slots, className: "caps-code-slots", "aria-hidden": "true", children: Array.from({ length }, (_, index) => (_jsxs("span", { className: "input caps-input caps-code-slot", "data-active": focused && index === active ? "true" : undefined, "data-filled": index < characters.length ? "true" : undefined, children: [characters[index] ?? "", focused && index === active && characters.length < length ? (_jsx("span", { className: "caps-code-caret" })) : null] }, index))) })] }));
+});

package/dist/components/combobox.d.ts

@@ -0,0 +1,86 @@
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+/** The same molded field face as Select, for caller-owned selection summaries. */
+export declare const ComboboxTrigger: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Intrinsic focus and selection state supplied when rendering a Combobox item. */
+export type ComboboxItemState = {
+    active: boolean;
+    disabled: boolean;
+    selected: boolean;
+};
+/** Props accepted by Combobox. */
+export type ComboboxProps<T> = ComboboxBaseProps<T> & (ComboboxInlineProps | ComboboxPopupProps) & ComboboxValueProps<T>;
+/** Props shared by every Combobox mode: item shape, rendering, and field wiring. */
+export type ComboboxBaseProps<T> = {
+    /** Color intent for the locally active option. */
+    activeTone?: "neutral" | "primary";
+    /** Native portal destination. Use an unclipped themed container for nested themes. */
+    container?: BasePopover.Portal.Props["container"];
+    contentClassName?: string;
+    emptyMessage?: ReactNode;
+    /** Returns the stable identity used to track and compare items. */
+    getKey: (item: T) => string;
+    /** Returns the text shown for an item in the trigger and the list. */
+    getLabel: (item: T) => string;
+    /** Returns the text matched against caller input; defaults to the item's label. */
+    getSearchText?: (item: T) => string;
+    /** Returns the heading an item is grouped under in the list. */
+    groupBy?: (item: T) => string;
+    /** Identifies the popup trigger or inline input for native label association. */
+    id?: string;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "value">;
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Receives the selection control's root div. */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Returns whether an item is unselectable. */
+    isDisabled?: (item: T) => boolean;
+    items: readonly T[];
+    placeholder?: string;
+    /** Renders one item's content; defaults to its label. */
+    renderItem?: (item: T, active: boolean, state: ComboboxItemState) => ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "value">;
+/** Combobox mode flags for the inline (always-expanded, no popup trigger) layout. */
+export type ComboboxInlineProps = {
+    defaultOpen?: never;
+    /** Popup visibility callbacks do not apply to inline choices. */
+    onOpenChange?: never;
+    open?: never;
+    trigger?: never;
+    triggerRef?: never;
+};
+/** Combobox mode flags for the popup layout, either caller-controlled or uncontrolled open state. */
+export type ComboboxPopupProps = {
+    defaultOpen?: boolean;
+    /** Called after the popup's open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    open?: never;
+    trigger: ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>;
+    triggerRef?: React.Ref<HTMLButtonElement>;
+} | {
+    defaultOpen?: never;
+    /** Called after the popup's open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    open: boolean;
+    trigger: ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>;
+    triggerRef?: React.Ref<HTMLButtonElement>;
+};
+/** Combobox selection shape: single or multiple, controlled or uncontrolled. */
+export type ComboboxValueProps<T> = (({
+    defaultValue?: never;
+    value: null | string;
+} | {
+    defaultValue?: null | string;
+    value?: never;
+}) & {
+    multiple?: false;
+    /** Called with the newly selected key and item, or null when cleared. */
+    onValueChange?: (value: null | string, item: null | T) => void;
+}) | {
+    multiple: true;
+    value: readonly string[];
+    defaultValue?: never;
+    /** Called with the newly selected keys and items. */
+    onValueChange?: (value: string[], items: T[]) => void;
+};
+/** A searchable selection primitive with caller-owned values and intrinsic keyboard navigation. */
+export declare function Combobox<T>(props: ComboboxProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/combobox.js

@@ -0,0 +1,218 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isImeComposing } from "../lib/ime.js";
+import { forwardRef, useEffect, useId, useMemo, useState, } from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { cn } from "../lib/cn.js";
+import { useGlide } from "../lib/glide.js";
+import { Check, ChevronDown } from "lucide-react";
+import { useOverlayRoot, useOverlayDismiss } from "./overlay-root.js";
+import { Input } from "./input.js";
+import { useSelectableCollection } from "./selectable.js";
+/** The same molded field face as Select, for caller-owned selection summaries. */
+export const ComboboxTrigger = forwardRef(function ComboboxTrigger({ children, className, type = "button", ...props }, ref) {
+    return (_jsxs("button", { ...props, ref: ref, type: type, className: cn("select caps-select caps-combobox-trigger w-full", className), children: [_jsx("span", { children: children }), _jsx(ChevronDown, { className: "caps-select-chevron", "aria-hidden": "true" })] }));
+});
+function useComboboxController({ defaultOpen, defaultValue, getKey, getSearchText, groupBy, id, isDisabled, items, onOpenChange, onCommit, multiple, controlledOpen, controlledKeys, trigger, }) {
+    const listboxId = `${id}-listbox`;
+    const [query, setQuery] = useState("");
+    const [keyboardNavigation, setKeyboardNavigation] = useState(false);
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const selectedKeys = controlledKeys ?? (uncontrolledValue === null ? [] : [uncontrolledValue]);
+    const open = trigger ? (controlledOpen ?? uncontrolledOpen) : true;
+    const filtered = useMemo(() => {
+        const normalizedQuery = query.trim().toLowerCase();
+        return normalizedQuery
+            ? items.filter((item) => getSearchText(item).toLowerCase().includes(normalizedQuery))
+            : items;
+    }, [getSearchText, items, query]);
+    const collection = useSelectableCollection({
+        getKey,
+        isDisabled,
+        items: filtered,
+    });
+    useEffect(() => {
+        if (collection.activeKey !== null)
+            return;
+        const initial = collection.enabledItems.find((item) => selectedKeys.includes(getKey(item))) ?? collection.enabledItems[0];
+        if (initial)
+            collection.setActiveKey(getKey(initial));
+    }, [
+        collection.activeKey,
+        collection.enabledItems,
+        collection.setActiveKey,
+        getKey,
+        selectedKeys,
+    ]);
+    const setOpen = (next) => {
+        setKeyboardNavigation(false);
+        if (!next)
+            setQuery("");
+        if (controlledOpen === undefined)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    };
+    const optionId = (key) => `${listboxId}-option-${encodeURIComponent(key)}`;
+    const commit = (item) => {
+        const next = getKey(item);
+        if (controlledKeys === undefined)
+            setUncontrolledValue(next);
+        onCommit(item);
+        if (trigger && !multiple)
+            setOpen(false);
+    };
+    const onInputChange = (event) => {
+        setKeyboardNavigation(true);
+        setQuery(event.target.value);
+        collection.setActiveKey(null);
+    };
+    const onInputKeyDown = (event) => {
+        if (isImeComposing(event))
+            return;
+        let move;
+        switch (event.key) {
+            case "ArrowDown":
+                move = [1, undefined];
+                break;
+            case "ArrowUp":
+                move = [-1, undefined];
+                break;
+            case "End":
+                move = [1, "end"];
+                break;
+            case "Home":
+                move = [-1, "start"];
+                break;
+        }
+        if (move) {
+            setKeyboardNavigation(true);
+            event.preventDefault();
+            collection.move(move[0], move[1]);
+        }
+        else if (event.key === "Enter" && collection.activeItem) {
+            event.preventDefault();
+            commit(collection.activeItem);
+        }
+    };
+    const groups = useMemo(() => {
+        if (!groupBy)
+            return [{ label: "", items: filtered }];
+        const grouped = new Map();
+        for (const item of filtered) {
+            const label = groupBy(item);
+            const group = grouped.get(label);
+            if (group)
+                group.push(item);
+            else
+                grouped.set(label, [item]);
+        }
+        return [...grouped].map(([label, groupItems]) => ({
+            label,
+            items: groupItems,
+        }));
+    }, [filtered, groupBy]);
+    return {
+        keyboardNavigation,
+        onPointerMove: () => {
+            setKeyboardNavigation(false);
+        },
+        activeKey: collection.activeKey,
+        activeItem: collection.activeItem,
+        groups,
+        inputValue: query,
+        listboxId,
+        onInputChange,
+        onInputKeyDown,
+        optionId,
+        open,
+        commit,
+        selectedKeys,
+        setOpen,
+    };
+}
+/** A searchable selection primitive with caller-owned values and intrinsic keyboard navigation. */
+export function Combobox(props) {
+    const { "aria-describedby": describedBy, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": labelledBy, "aria-required": required, activeTone = "neutral", container, contentClassName, defaultOpen = false, defaultValue = null, emptyMessage = "No matches", getKey, getLabel, getSearchText = getLabel, groupBy, id: providedId, inputProps, inputRef, isDisabled = () => false, items, onOpenChange, onValueChange, multiple, open: controlledOpen, placeholder = "Search…", renderItem, rootRef, trigger, triggerRef, value: controlledValue, ...rootProps } = props;
+    // Keep the public single/multiple callback types correlated at this boundary.
+    const onCommit = (item) => {
+        const key = getKey(item);
+        if (multiple) {
+            const next = controlledValue.includes(key)
+                ? controlledValue.filter((value) => value !== key)
+                : [...controlledValue, key];
+            onValueChange?.(next, items.filter((entry) => next.includes(getKey(entry))));
+        }
+        else {
+            onValueChange?.(key, item);
+        }
+    };
+    let controlledKeys;
+    if (multiple)
+        controlledKeys = controlledValue;
+    else if (controlledValue !== undefined)
+        controlledKeys = controlledValue === null ? [] : [controlledValue];
+    const generatedId = useId();
+    const controlProps = trigger?.props ?? inputProps;
+    const id = providedId ?? controlProps?.id ?? generatedId;
+    const selectionControlProps = {
+        id,
+        "aria-describedby": [describedBy, controlProps?.["aria-describedby"]]
+            .filter(Boolean)
+            .join(" ") || undefined,
+        "aria-invalid": invalid ?? controlProps?.["aria-invalid"],
+        "aria-label": controlProps?.["aria-label"] ?? label,
+        "aria-labelledby": controlProps?.["aria-labelledby"] ?? labelledBy,
+        "aria-required": required ?? controlProps?.["aria-required"],
+    };
+    const controller = useComboboxController({
+        defaultOpen,
+        defaultValue,
+        getKey,
+        getSearchText,
+        groupBy,
+        id,
+        isDisabled,
+        items,
+        onOpenChange,
+        onCommit,
+        multiple: multiple ?? false,
+        controlledOpen,
+        controlledKeys,
+        trigger,
+    });
+    const { keyboardNavigation, onPointerMove, activeItem, activeKey, commit, groups, inputValue, listboxId, onInputChange, onInputKeyDown, open, optionId, selectedKeys, setOpen, } = controller;
+    useOverlayDismiss(() => {
+        if (trigger)
+            setOpen(false);
+    });
+    const overlay = useOverlayRoot("popover");
+    const portalContainer = container === undefined ? overlay : container;
+    const listRef = useGlide('.caps-combobox-option[data-active="true"]:not(:disabled), [data-navigation="pointer"] .caps-combobox-option:hover:not(:disabled)');
+    const input = (_jsx(Input, { ...inputProps, ...(trigger ? {} : selectionControlProps), "aria-activedescendant": activeItem ? optionId(getKey(activeItem)) : undefined, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-expanded": true, className: cn("input-sm", inputProps?.className), id: trigger ? (inputProps?.id ?? `${id}-input`) : id, onChange: (event) => {
+            inputProps?.onChange?.(event);
+            onInputChange(event);
+        }, onKeyDown: (event) => {
+            inputProps?.onKeyDown?.(event);
+            if (!event.defaultPrevented)
+                onInputKeyDown(event);
+        }, placeholder: inputProps?.placeholder ?? placeholder, ref: inputRef, role: "combobox", value: inputValue }));
+    const list = (_jsx("div", { id: listboxId, ref: listRef, className: "caps-combobox-list", "data-navigation": keyboardNavigation ? "keyboard" : "pointer", onPointerMove: onPointerMove, role: "listbox", "aria-multiselectable": multiple ?? undefined, children: groups.every((group) => group.items.length === 0) ? (_jsx("div", { className: "px-md py-md text-sm text-base-content", children: emptyMessage })) : (groups.map((group) => (_jsxs("div", { "aria-label": group.label || undefined, role: group.label ? "group" : undefined, children: [group.label ? (_jsx("div", { className: "px-md pb-xs pt-sm text-xs text-base-content uppercase tracking-wider", children: group.label })) : null, group.items.map((item) => {
+                    const key = getKey(item);
+                    const disabled = isDisabled(item);
+                    const active = activeKey === key;
+                    const state = {
+                        active,
+                        disabled,
+                        selected: selectedKeys.includes(key),
+                    };
+                    return (_jsxs("button", { "aria-disabled": disabled || undefined, "aria-selected": state.selected, className: "caps-combobox-option", "data-active": active && keyboardNavigation, disabled: disabled, id: optionId(key), onClick: () => {
+                            commit(item);
+                        }, onMouseDown: (event) => {
+                            // Keep typing in the search field after a pointer selection.
+                            event.preventDefault();
+                        }, role: "option", tabIndex: -1, type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "caps-combobox-check", children: state.selected ? _jsx(Check, {}) : null }), renderItem?.(item, active, state) ?? getLabel(item)] }, key));
+                })] }, group.label)))) }));
+    if (!trigger)
+        return (_jsx("div", { ...rootProps, className: cn(rootProps.className), ref: rootRef, children: _jsxs("div", { className: cn("caps-combobox-panel", contentClassName), "data-active-tone": activeTone, children: [_jsx("div", { className: "caps-combobox-search", children: input }), list] }) }));
+    return (_jsx("div", { ...rootProps, className: cn(rootProps.className), ref: rootRef, children: _jsxs(BasePopover.Root, { modal: true, onOpenChange: setOpen, open: open, children: [_jsx(BasePopover.Trigger, { ...selectionControlProps, "aria-haspopup": "dialog", className: "btn", ref: triggerRef, render: trigger }), portalContainer !== null ? (_jsx(BasePopover.Portal, { container: portalContainer, children: _jsx(BasePopover.Positioner, { align: "start", side: "bottom", sideOffset: 4, children: _jsxs(BasePopover.Popup, { "data-active-tone": activeTone, className: cn("min-w-40 rounded-box border border-base-300 bg-base-100 p-xs shadow-lg outline-none caps-combobox-panel caps-combobox-popup", contentClassName), children: [_jsx("div", { className: "caps-combobox-search", children: input }), list] }) }) })) : null] }) }));
+}

package/dist/components/confirm-action.d.ts

@@ -0,0 +1,23 @@
+/** A deliberate hold, or an exact phrase before a destructive action. */
+export type ConfirmActionProps = {
+    /** The action's trigger label and dialog title. */
+    label: string;
+    /** The destructive key's label (and the hold gesture's instruction). */
+    confirmLabel: string;
+    /** Resolve on success; reject on failure. The component prevents concurrent calls. */
+    onConfirm: () => Promise<void>;
+    /** Caller-owned, safe-to-display failure copy; rejection details are never displayed. */
+    error?: string;
+} & ({
+    mode: "hold";
+    phrase?: never;
+} | {
+    mode: "type";
+    phrase: string;
+});
+/**
+ * Confirms once per gesture, owns pending/result feedback, and keeps failed
+ * confirmations available for retry. Type mode closes on success and restores
+ * focus through Dialog. A pending action cannot be dismissed or cancelled.
+ */
+export declare function ConfirmAction({ label, confirmLabel, onConfirm, error, mode, phrase, }: ConfirmActionProps): import("react/jsx-runtime").JSX.Element;