@parallelworks/ui 0.76.0 → 0.78.0

package/dist/components/Input.js

@@ -1,9 +1,10 @@
 import { cx } from "../cx.js";
 import { fieldBox } from "./fieldBox.js";
 import { Field, RevealToggle } from "./Field.js";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Input } from "@base-ui/react/input";
+import { flushSync } from "react-dom";
 //#region src/components/Input.tsx
 /** The Field around a control when it has a label; the control alone when it doesn't. */
 function framed({ label, hint, help, actions, description, error, size }, { id, required, disabled }, control) {
@@ -61,9 +62,48 @@ function Input$1({ label, hint, help, description, error, className, mono, size,
 		}) : input;
 	});
 }
-/** A multi-line text field that grows by hand. Placed in a Field, it takes the Field's label,
-*  description and invalid state. */
-function Textarea({ label, hint, help, description, error, className, mono, size, ref, ...props }) {
+var boxEdges = {
+	sm: "0.5rem + 2px",
+	md: "0.75rem + 2px",
+	lg: "1rem + 2px"
+};
+var sizesToContent = () => typeof CSS !== "undefined" && CSS.supports?.("field-sizing", "content") === true;
+/** Sets a textarea's height to its text's while the browser can't, from its value. */
+function useAutosize(enabled, value) {
+	const element = useRef(null);
+	const [native] = useState(sizesToContent);
+	const resize = useCallback(() => {
+		const el = element.current;
+		if (!el || native) return;
+		el.style.height = "auto";
+		el.style.height = `${el.scrollHeight + el.offsetHeight - el.clientHeight}px`;
+	}, [native]);
+	useLayoutEffect(() => {
+		if (enabled) resize();
+	}, [
+		enabled,
+		resize,
+		value
+	]);
+	return {
+		element,
+		resize: enabled && !native ? resize : void 0
+	};
+}
+/** A multi-line text field that grows by hand, or with its text with `autosize`. Placed in a
+*  Field, it takes the Field's label, description and invalid state. */
+function Textarea({ label, hint, help, description, error, className, mono, size = "md", ref, autosize, bare = false, secret = false, style, ...props }) {
+	const [revealed, setRevealed] = useState(false);
+	const autosizing = Boolean(autosize);
+	const maxRows = typeof autosize === "object" ? autosize.maxRows : void 0;
+	const { element, resize } = useAutosize(autosizing, props.value);
+	const edges = bare ? "0px" : boxEdges[size];
+	const setRef = useCallback((el) => {
+		element.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	}, [ref, element]);
+	const masked = secret && !revealed;
 	return framed({
 		label,
 		hint,
@@ -71,16 +111,111 @@ function Textarea({ label, hint, help, description, error, className, mono, size
 		description,
 		error,
 		size
-	}, props, (control) => /* @__PURE__ */ jsx(Input, {
+	}, props, (control) => {
+		const textarea = /* @__PURE__ */ jsx(Input, {
+			...secret && {
+				spellCheck: false,
+				autoComplete: "off",
+				autoCorrect: "off",
+				autoCapitalize: "off",
+				"data-1p-ignore": true
+			},
+			...props,
+			...joined(control, props),
+			onInput: (event) => {
+				resize?.();
+				props.onInput?.(event);
+			},
+			ref: setRef,
+			render: /* @__PURE__ */ jsx("textarea", {}),
+			style: {
+				...autosizing && {
+					minHeight: `calc(${props.rows ?? 2}lh + ${edges})`,
+					...maxRows !== void 0 && { maxHeight: `calc(${maxRows}lh + ${edges})` }
+				},
+				...style
+			},
+			className: cx(bare ? "w-full min-w-0 border-0 bg-transparent p-0 text-(--theme-app) outline-none placeholder:text-(--theme-placeholder) disabled:cursor-not-allowed disabled:text-(--theme-placeholder)" : fieldBox({
+				size,
+				multiline: true
+			}), bare && {
+				sm: "text-xs",
+				md: "text-sm",
+				lg: "text-base"
+			}[size], autosizing ? "resize-none [field-sizing:content]" : cx(size === "sm" ? "min-h-16" : "min-h-24", !bare && "resize-y"), bare && !autosizing && "resize-none", (mono || secret) && "font-mono", secret && "pr-9", masked && "[-webkit-text-security:disc]", className)
+		});
+		return secret ? /* @__PURE__ */ jsxs("div", {
+			className: "relative w-full",
+			children: [textarea, /* @__PURE__ */ jsx(RevealToggle, {
+				revealed,
+				onRevealedChange: setRevealed,
+				disabled: props.disabled,
+				align: "top",
+				size
+			})]
+		}) : textarea;
+	});
+}
+/** A title edited where it reads: one line that wraps and grows, with no box until the
+*  pointer or focus is on it. Enter saves, Escape puts the saved title back, and leaving the
+*  field saves. */
+function TitleInput({ value, onCommit, autoSelect = false, size = "xl", readOnly, className, onBlur, onFocus, onKeyDown, ref, ...props }) {
+	const [draft, setDraft] = useState(value);
+	const editing = useRef(false);
+	const element = useRef(null);
+	const [shown, setShown] = useState(value);
+	if (value !== shown) {
+		setShown(value);
+		if (!editing.current) setDraft(value);
+	}
+	const { resize } = useAutosize(true, draft);
+	useEffect(() => {
+		if (autoSelect && element.current) {
+			element.current.focus();
+			element.current.select();
+		}
+	}, []);
+	const setRef = useCallback((el) => {
+		element.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	}, [ref]);
+	return /* @__PURE__ */ jsx("textarea", {
 		...props,
-		...joined(control, props),
-		ref,
-		render: /* @__PURE__ */ jsx("textarea", {}),
-		className: cx(fieldBox({
-			size,
-			multiline: true
-		}), size === "sm" ? "min-h-16" : "min-h-24", "resize-y", mono && "font-mono", className)
-	}));
+		ref: setRef,
+		rows: 1,
+		value: draft,
+		readOnly,
+		spellCheck: props.spellCheck ?? true,
+		onChange: (event) => {
+			setDraft(event.target.value.replace(/\s*\n+\s*/g, " "));
+			resize?.();
+		},
+		onFocus: (event) => {
+			editing.current = true;
+			onFocus?.(event);
+		},
+		onBlur: (event) => {
+			editing.current = false;
+			const title = draft.trim();
+			if (title && title !== value) onCommit(title);
+			else setDraft(value);
+			onBlur?.(event);
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+			if (event.key === "Enter") {
+				event.preventDefault();
+				event.currentTarget.blur();
+			} else if (event.key === "Escape") {
+				event.preventDefault();
+				flushSync(() => setDraft(value));
+				event.currentTarget.blur();
+			}
+		},
+		className: cx("-mx-1.5 block w-[calc(100%+0.75rem)] min-w-0 resize-none overflow-hidden rounded-md border-0 bg-transparent px-1.5 py-0.5 font-semibold tracking-tight text-(--theme-app) outline-none transition-colors [field-sizing:content] placeholder:text-(--theme-placeholder)", size === "xl" ? "text-2xl leading-tight" : "text-lg leading-snug", !readOnly && "hover:bg-(--theme-hover) focus-visible:bg-transparent focus-visible:ring-1 focus-visible:ring-(--theme-focus)", className)
+	});
 }
 //#endregion
-export { Input$1 as Input, Textarea, framed };
+export { Input$1 as Input, Textarea, TitleInput, framed };

package/dist/components/Kbd.d.ts

@@ -0,0 +1,40 @@
+import { type UIStrings } from './Provider.js';
+type KeyNames = UIStrings['keys'];
+/** Whether the keyboard is an Apple one, whose Command key does what Control does elsewhere. */
+export declare function isApplePlatform(): boolean;
+/** A shortcut's platform: `apple` shows ⌘ ⌥ ⇧ ⌃ and takes Command for `Mod`; `other` names
+ *  the keys and takes Control. */
+export type KeyPlatform = 'apple' | 'other';
+/** The keys of a shortcut as its keycaps read: `Mod+K` is ⌘ K on an Apple keyboard and Ctrl K
+ *  elsewhere. A string is a combination joined by `+`; an array lists its keys as given, such
+ *  as `['[', ']']` or `['1–9']`. Pass `names` from the strings, so key names are localized. */
+export declare function formatShortcut(keys: string | readonly string[], names?: KeyNames, platform?: KeyPlatform): string[];
+/** A shortcut as one line of text, for a title or a sentence: ⌘K, or Ctrl+K. */
+export declare function shortcutText(keys: string | readonly string[], names?: KeyNames, platform?: KeyPlatform): string;
+/** The `aria-keyshortcuts` value for a combination: `Mod+K` is `Meta+K` on an Apple keyboard
+ *  and `Control+K` elsewhere. Set it on the control the shortcut presses. */
+export declare function ariaKeyShortcuts(keys: string, platform?: KeyPlatform): string;
+/** `formatShortcut` and `shortcutText` in the host's key names. */
+export declare function useShortcutFormat(platform?: KeyPlatform): {
+    format: (keys: string | readonly string[]) => string[];
+    text: (keys: string | readonly string[]) => string;
+};
+export type KbdVariant = 'keycap' | 'plain';
+export type KbdSize = 'xs' | 'sm';
+export interface KbdProps {
+    /** A combination joined by `+`, such as `Mod+K` (Command on an Apple keyboard, Control
+     *  elsewhere) or `Shift+Enter`; or keys side by side, as given: `['↑', '↓']`, `['1–9']`. */
+    keys: string | readonly string[];
+    /** `keycap`, the default, draws each key; `plain` is muted text, for a menu row. */
+    variant?: KbdVariant | undefined;
+    /** `xs` (16px, 10px text) for a hint inside a row or a field; `sm` (18px, 11px) otherwise. */
+    size?: KbdSize | undefined;
+    /** Which keyboard to show the keys for; the reader's own by default. */
+    platform?: KeyPlatform | undefined;
+    className?: string | undefined;
+}
+/** Keys to press, as keycaps: a muted fill, a hairline border and monospace text. Off an
+ *  Apple keyboard the keys of a combination are joined with a plus, as the platform writes
+ *  them. Renders `<kbd>`, with a `<kbd>` for each key of a combination. */
+export declare function Kbd({ keys, variant, size, platform, className }: KbdProps): import("react").JSX.Element;
+export {};

package/dist/components/Kbd.js

@@ -0,0 +1,168 @@
+import { cx } from "../cx.js";
+import { useStrings } from "./Provider.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Kbd.tsx
+/** Whether the keyboard is an Apple one, whose Command key does what Control does elsewhere. */
+function isApplePlatform() {
+	if (typeof navigator === "undefined") return false;
+	const data = navigator.userAgentData;
+	return /Mac|iPhone|iPad|iPod/i.test(data?.platform || navigator.userAgent);
+}
+var currentPlatform = () => isApplePlatform() ? "apple" : "other";
+var DEFAULT_NAMES = {
+	ctrl: "Ctrl",
+	alt: "Alt",
+	shift: "Shift",
+	meta: "Meta",
+	enter: "Enter",
+	escape: "Esc",
+	space: "Space",
+	tab: "Tab",
+	backspace: "Backspace",
+	delete: "Delete"
+};
+var ALIASES = {
+	mod: "mod",
+	cmd: "meta",
+	command: "meta",
+	meta: "meta",
+	ctrl: "ctrl",
+	control: "ctrl",
+	alt: "alt",
+	option: "alt",
+	opt: "alt",
+	shift: "shift",
+	enter: "enter",
+	return: "enter",
+	esc: "escape",
+	escape: "escape",
+	space: "space",
+	tab: "tab",
+	backspace: "backspace",
+	delete: "delete",
+	del: "delete",
+	up: "up",
+	arrowup: "up",
+	down: "down",
+	arrowdown: "down",
+	left: "left",
+	arrowleft: "left",
+	right: "right",
+	arrowright: "right"
+};
+var ARROWS = {
+	up: "↑",
+	down: "↓",
+	left: "←",
+	right: "→"
+};
+var APPLE = {
+	meta: "⌘",
+	alt: "⌥",
+	shift: "⇧",
+	ctrl: "⌃",
+	enter: "↵"
+};
+var ARIA = {
+	meta: "Meta",
+	ctrl: "Control",
+	alt: "Alt",
+	shift: "Shift",
+	enter: "Enter",
+	escape: "Escape",
+	space: "Space",
+	tab: "Tab",
+	backspace: "Backspace",
+	delete: "Delete",
+	up: "ArrowUp",
+	down: "ArrowDown",
+	left: "ArrowLeft",
+	right: "ArrowRight"
+};
+/** Splits a combination such as `Mod+Shift+K` into its keys; `Mod++` ends with the plus key. */
+function splitCombo(keys) {
+	const trimmed = keys.trim();
+	if (trimmed === "+") return ["+"];
+	const plusKey = trimmed.endsWith("++");
+	const parts = (plusKey ? trimmed.slice(0, -2) : trimmed).split("+").map((part) => part.trim()).filter(Boolean);
+	return plusKey ? [...parts, "+"] : parts;
+}
+function canonical(key, platform) {
+	const name = ALIASES[key.toLowerCase()];
+	if (name === "mod") return platform === "apple" ? "meta" : "ctrl";
+	return name;
+}
+function label(key, names, platform) {
+	const name = canonical(key, platform);
+	if (!name) return key.length === 1 ? key.toUpperCase() : key;
+	if (ARROWS[name]) return ARROWS[name];
+	if (platform === "apple" && APPLE[name]) return APPLE[name];
+	return names[name] ?? key;
+}
+/** The keys of a shortcut as its keycaps read: `Mod+K` is ⌘ K on an Apple keyboard and Ctrl K
+*  elsewhere. A string is a combination joined by `+`; an array lists its keys as given, such
+*  as `['[', ']']` or `['1–9']`. Pass `names` from the strings, so key names are localized. */
+function formatShortcut(keys, names = DEFAULT_NAMES, platform = currentPlatform()) {
+	return (typeof keys === "string" ? splitCombo(keys) : keys).map((key) => label(key, names, platform));
+}
+/** A shortcut as one line of text, for a title or a sentence: ⌘K, or Ctrl+K. */
+function shortcutText(keys, names = DEFAULT_NAMES, platform = currentPlatform()) {
+	const parts = formatShortcut(keys, names, platform);
+	if (typeof keys !== "string") return parts.join(" ");
+	return parts.join(platform === "apple" ? "" : "+");
+}
+/** The `aria-keyshortcuts` value for a combination: `Mod+K` is `Meta+K` on an Apple keyboard
+*  and `Control+K` elsewhere. Set it on the control the shortcut presses. */
+function ariaKeyShortcuts(keys, platform = currentPlatform()) {
+	return splitCombo(keys).map((key) => {
+		const name = canonical(key, platform);
+		if (name) return ARIA[name] ?? key;
+		return key.length === 1 ? key.toUpperCase() : key;
+	}).join("+");
+}
+/** `formatShortcut` and `shortcutText` in the host's key names. */
+function useShortcutFormat(platform) {
+	const { keys: names } = useStrings();
+	const on = platform ?? currentPlatform();
+	return {
+		format: (keys) => formatShortcut(keys, names, on),
+		text: (keys) => shortcutText(keys, names, on)
+	};
+}
+var keycap = {
+	xs: "min-h-4 min-w-4 px-[3px] py-px text-[10px]",
+	sm: "min-h-[18px] min-w-[18px] px-1 py-px text-[11px]"
+};
+/** Keys to press, as keycaps: a muted fill, a hairline border and monospace text. Off an
+*  Apple keyboard the keys of a combination are joined with a plus, as the platform writes
+*  them. Renders `<kbd>`, with a `<kbd>` for each key of a combination. */
+function Kbd({ keys, variant = "keycap", size = "sm", platform, className }) {
+	const { keys: names } = useStrings();
+	const on = platform ?? currentPlatform();
+	const parts = formatShortcut(keys, names, on);
+	const chord = typeof keys === "string";
+	if (variant === "plain") return /* @__PURE__ */ jsx("kbd", {
+		className: cx("font-sans text-(--theme-muted-text-color) tabular-nums tracking-wide", size === "xs" ? "text-[10px]" : "text-[11px]", className),
+		children: chord ? shortcutText(keys, names, on) : parts.join(" ")
+	});
+	const cap = cx("inline-flex items-center justify-center rounded border border-(--theme-border) bg-(--theme-muted-panel-bg) font-mono leading-none font-normal text-(--theme-app) not-italic", keycap[size]);
+	if (parts.length === 1) return /* @__PURE__ */ jsx("kbd", {
+		className: cx(cap, className),
+		children: parts[0]
+	});
+	const plus = chord && on !== "apple";
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cx("inline-flex flex-wrap items-center gap-0.5 align-middle", className),
+		children: parts.map((part, i) => /* @__PURE__ */ jsxs(Fragment, { children: [plus && i > 0 && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "text-[10px] text-(--theme-muted-text-color)",
+			children: "+"
+		}), /* @__PURE__ */ jsx("kbd", {
+			className: cap,
+			children: part
+		})] }, i))
+	});
+}
+//#endregion
+export { Kbd, ariaKeyShortcuts, formatShortcut, isApplePlatform, shortcutText, useShortcutFormat };

package/dist/components/Listbox.d.ts

@@ -0,0 +1,103 @@
+import { type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react';
+import { type FloatingAnchor } from './floating.js';
+export interface ListboxNavigationOptions<T> {
+    items: readonly T[];
+    /** Called with the highlighted item on Enter, a `chooseKeys` key or a click. */
+    onChoose: (item: T, index: number) => void;
+    /** Called on Escape, such as to close the list until the text changes. */
+    onDismiss?: (() => void) | undefined;
+    /** False while the list isn't shown: the keys are then the host's own. Default true. */
+    open?: boolean | undefined;
+    /** Past the end comes the start, and before the start the end. Default true. */
+    loop?: boolean | undefined;
+    /** Keys that choose besides Enter. Default `['Tab']`. */
+    chooseKeys?: readonly string[] | undefined;
+    /** Home and End move to the first and last items rather than the caret, for a host whose
+     *  text is a short query rather than prose. Default false. */
+    homeEnd?: boolean | undefined;
+    /** An item that can't be chosen, which the highlight passes over. */
+    isDisabled?: ((item: T) => boolean) | undefined;
+}
+/** Keys are DOM or React keyboard events alike, as an editor plugin and an input pass them. */
+type AnyKeyboardEvent = KeyboardEvent | ReactKeyboardEvent;
+/** The parts a highlighted list needs while focus stays on the box the reader types in, such
+ *  as a text box, an editor or a search input: the highlight and its keys, and the ids that
+ *  let assistive technology follow the highlight. Spread `hostProps` on the focused box,
+ *  `listProps` on the list and `optionProps(i)` on each option, or draw them with
+ *  ListboxPanel and ListboxOption. */
+export declare function useListboxNavigation<T>({ items, onChoose, onDismiss, open, loop, chooseKeys, homeEnd, isDisabled, }: ListboxNavigationOptions<T>): {
+    /** The highlighted item's index, or -1 with nothing to show. */
+    active: number;
+    setActive: import("react").Dispatch<import("react").SetStateAction<number>>;
+    handleKey: (event: AnyKeyboardEvent) => boolean;
+    listId: string;
+    /** For the box that keeps focus: it points at the list and its highlighted option. */
+    hostProps: {
+        'aria-autocomplete': 'list';
+        'aria-controls': string | undefined;
+        'aria-activedescendant': string | undefined;
+    };
+    listProps: {
+        id: string;
+        role: 'listbox';
+    };
+    optionProps: (index: number) => {
+        id: string;
+        role: 'option';
+        tabIndex: number;
+        'aria-selected': boolean;
+        'aria-disabled': true | undefined;
+        'data-highlighted': true | undefined;
+        'data-disabled': true | undefined;
+        onMouseDown: (event: {
+            preventDefault: () => void;
+        }) => void;
+        onMouseMove: () => void;
+        onClick: () => void;
+    };
+};
+export type ListboxNavigation<T> = ReturnType<typeof useListboxNavigation<T>>;
+export interface ListboxPanelProps {
+    /** `listProps` from useListboxNavigation. */
+    listProps: {
+        id: string;
+        role: 'listbox';
+    };
+    /** Names the list for assistive technology. */
+    'aria-label': string;
+    /** Under the list, such as which keys choose and dismiss. */
+    footer?: ReactNode;
+    /** In place of the options while there are none. */
+    empty?: ReactNode;
+    /** Opens at this element or point, such as an editor's caret, over the page and inside a
+     *  modal dialog alike; without one the panel stands where the host places it. */
+    at?: FloatingAnchor | undefined;
+    /** With `at`: called when a press outside closes it. */
+    onDismiss?: (() => void) | undefined;
+    /** On the panel: its width or place. */
+    className?: string | undefined;
+    children: ReactNode;
+}
+/** The panel of a highlighted list that the reader drives from a box that keeps focus. */
+export declare function ListboxPanel({ listProps, 'aria-label': label, footer, empty, at, onDismiss, className, children, }: ListboxPanelProps): import("react").JSX.Element;
+export interface ListboxOptionProps {
+    /** `optionProps(index)` from useListboxNavigation. */
+    option: ReturnType<ListboxNavigation<unknown>['optionProps']>;
+    icon?: ReactNode;
+    label: ReactNode;
+    /** Under the label, or beside it with `inline`. */
+    description?: ReactNode;
+    /** The description on the label's line, as a command's summary beside its name. */
+    inline?: boolean | undefined;
+    /** Short muted text at the row's end, such as a key. */
+    hint?: ReactNode;
+    className?: string | undefined;
+}
+/** One option of a ListboxPanel: an icon, its label and description, and a hint at its end. */
+export declare function ListboxOption({ option, icon, label, description, inline, hint, className, }: ListboxOptionProps): import("react").JSX.Element;
+/** Options under a heading in a ListboxPanel. */
+export declare function ListboxGroup({ label, children }: {
+    label: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/components/Listbox.js

@@ -0,0 +1,190 @@
+import { cx } from "../cx.js";
+import { panelClassName, panelItemClassName } from "./floating.js";
+import { Popover } from "./Popover.js";
+import "./comboboxItems.js";
+import { useEffect, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Listbox.tsx
+/** The parts a highlighted list needs while focus stays on the box the reader types in, such
+*  as a text box, an editor or a search input: the highlight and its keys, and the ids that
+*  let assistive technology follow the highlight. Spread `hostProps` on the focused box,
+*  `listProps` on the list and `optionProps(i)` on each option, or draw them with
+*  ListboxPanel and ListboxOption. */
+function useListboxNavigation({ items, onChoose, onDismiss, open = true, loop = true, chooseKeys = ["Tab"], homeEnd = false, isDisabled }) {
+	const listId = useId();
+	const [active, setActive] = useState(0);
+	const count = items.length;
+	const shown = count === 0 ? -1 : Math.min(Math.max(active, 0), count - 1);
+	const shownOpen = open && count > 0;
+	const optionId = (index) => `${listId}-${index}`;
+	useEffect(() => {
+		if (!shownOpen || shown < 0) return;
+		document.getElementById(`${listId}-${shown}`)?.scrollIntoView?.({ block: "nearest" });
+	}, [
+		shownOpen,
+		shown,
+		listId
+	]);
+	const step = (from, by) => {
+		for (let moved = 1; moved <= count; moved++) {
+			let next = from + by * moved;
+			if (next < 0 || next >= count) {
+				if (!loop) return from;
+				next = (next + count) % count;
+			}
+			const item = items[next];
+			if (item !== void 0 && !isDisabled?.(item)) return next;
+		}
+		return from;
+	};
+	const choose = (index) => {
+		const item = items[index];
+		if (item !== void 0 && !isDisabled?.(item)) onChoose(item, index);
+	};
+	/** Handles a key the list owns, and says whether it did; leave the rest to the host. */
+	const handleKey = (event) => {
+		const composing = "nativeEvent" in event ? event.nativeEvent.isComposing : event.isComposing;
+		if (!shownOpen || composing) return false;
+		const ctrlOnly = event.ctrlKey && !event.metaKey && !event.altKey;
+		switch (true) {
+			case event.key === "ArrowDown" || ctrlOnly && event.key === "n":
+				setActive(step(shown, 1));
+				break;
+			case event.key === "ArrowUp" || ctrlOnly && event.key === "p":
+				setActive(step(shown, -1));
+				break;
+			case homeEnd && event.key === "Home":
+				setActive(step(-1, 1));
+				break;
+			case homeEnd && event.key === "End":
+				setActive(step(count, -1));
+				break;
+			case event.key === "Escape":
+				if (!onDismiss) return false;
+				onDismiss();
+				break;
+			case event.key === "Enter" || chooseKeys.includes(event.key):
+				if (event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return false;
+				choose(shown);
+				break;
+			default: return false;
+		}
+		event.preventDefault();
+		return true;
+	};
+	return {
+		/** The highlighted item's index, or -1 with nothing to show. */
+		active: shown,
+		setActive,
+		handleKey,
+		listId,
+		/** For the box that keeps focus: it points at the list and its highlighted option. */
+		hostProps: {
+			"aria-autocomplete": "list",
+			"aria-controls": shownOpen ? listId : void 0,
+			"aria-activedescendant": shownOpen && shown >= 0 ? optionId(shown) : void 0
+		},
+		listProps: {
+			id: listId,
+			role: "listbox"
+		},
+		optionProps: (index) => {
+			const item = items[index];
+			const disabled = item !== void 0 && isDisabled?.(item) === true;
+			return {
+				id: optionId(index),
+				role: "option",
+				tabIndex: -1,
+				"aria-selected": index === shown,
+				"aria-disabled": disabled || void 0,
+				"data-highlighted": index === shown || void 0,
+				"data-disabled": disabled || void 0,
+				onMouseDown: (event) => event.preventDefault(),
+				onMouseMove: () => {
+					if (index !== shown && !disabled) setActive(index);
+				},
+				onClick: () => choose(index)
+			};
+		}
+	};
+}
+/** The panel of a highlighted list that the reader drives from a box that keeps focus. */
+function ListboxPanel({ listProps, "aria-label": label, footer, empty, at, onDismiss, className, children }) {
+	const hasOptions = Array.isArray(children) ? children.some(Boolean) : Boolean(children);
+	const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		id: listProps.id,
+		role: "listbox",
+		"aria-label": label,
+		className: cx("max-h-96 overflow-y-auto overscroll-contain", "p-1"),
+		children: hasOptions ? children : empty ? /* @__PURE__ */ jsx("div", {
+			className: "px-2 py-1.5 text-(--theme-muted-text-color)",
+			children: empty
+		}) : null
+	}), footer && /* @__PURE__ */ jsx("div", {
+		className: "border-t border-(--theme-border) px-3 py-1.5 text-xs text-(--theme-muted-text-color)",
+		children: footer
+	})] });
+	if (at) return /* @__PURE__ */ jsx(Popover, {
+		at,
+		open: true,
+		onOpenChange: (next) => {
+			if (!next) onDismiss?.();
+		},
+		side: "bottom",
+		align: "start",
+		initialFocus: "none",
+		finalFocus: false,
+		"aria-label": label,
+		className: cx("w-72 overflow-hidden p-0", className),
+		children: body
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("overflow-hidden", panelClassName, className),
+		children: body
+	});
+}
+/** One option of a ListboxPanel: an icon, its label and description, and a hint at its end. */
+function ListboxOption({ option, icon, label, description, inline = false, hint, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...option,
+		className: cx(panelItemClassName, inline && "items-baseline", className),
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "flex shrink-0 items-center self-center",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: cx("flex min-w-0", inline ? "items-baseline gap-3" : "flex-col"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: label
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: cx("text-xs text-(--theme-muted-text-color)", inline ? "truncate" : "leading-snug"),
+					children: description
+				})]
+			}),
+			hint && /* @__PURE__ */ jsx("span", {
+				className: "ml-auto flex h-[1lh] shrink-0 items-center gap-2 self-start pl-2",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-xs tabular-nums text-(--theme-muted-text-color)",
+					children: hint
+				})
+			})
+		]
+	});
+}
+/** Options under a heading in a ListboxPanel. */
+function ListboxGroup({ label, children }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-labelledby": id,
+		children: [/* @__PURE__ */ jsx("div", {
+			id,
+			className: "px-2 pt-2 pb-1 text-xs text-(--theme-muted-text-color)",
+			children: label
+		}), children]
+	});
+}
+//#endregion
+export { ListboxGroup, ListboxOption, ListboxPanel, useListboxNavigation };