@parallelworks/ui 0.40.1 → 0.42.0

package/dist/components/Button.js

@@ -1,9 +1,9 @@
-import { useLink } from "./Provider.js";
 import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
 import { LoaderIcon } from "./StatusIcons.js";
-import cx from "classnames";
+import { useLink } from "./Provider.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Button.tsx
 var Button = forwardRef(({ children, variant = "primary", size = "default", loading, icon, iconPosition = "right", fullWidth = true, className = "", disabled, ...props }, ref) => {
 	const baseClasses = "inline-flex items-center justify-center gap-2 font-semibold rounded-lg transition-all duration-200 cursor-pointer border-none mt-2 disabled:opacity-50 disabled:cursor-not-allowed";
@@ -23,9 +23,9 @@ var Button = forwardRef(({ children, variant = "primary", size = "default", load
 		ref,
 		type: "button",
 		disabled: disabled || loading,
-		className: cx(baseClasses, variantClasses[variant], sizeClasses[size], widthClass, className),
+		className: clsx(baseClasses, variantClasses[variant], sizeClasses[size], widthClass, className),
 		...props,
-		children: loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "size-[18px]" }), children] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "size-[18px]" }), children] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 			icon && iconPosition === "left" && /* @__PURE__ */ jsx("span", {
 				className: "flex items-center",
 				children: icon
@@ -43,7 +43,7 @@ function MethodButton({ icon, label, description, href, loading, disabled, class
 	const Link = useLink();
 	const baseClasses = "flex items-center w-full p-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-xl text-[var(--theme-app)] text-[0.9375rem] font-medium cursor-pointer transition-all duration-200 no-underline mb-3 last:mb-0 hover:bg-[var(--theme-border)] hover:border-[var(--theme-muted-text-color)] hover:-translate-y-0.5 active:translate-y-0";
 	const disabledClasses = "disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:bg-[var(--ds-muted)] disabled:hover:border-[var(--ds-border)] disabled:hover:translate-y-0";
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 		icon && /* @__PURE__ */ jsx("span", {
 			className: "size-10 rounded-lg bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] flex items-center justify-center shrink-0 mr-4 [&_svg]:size-5 [&_svg]:text-white",
 			children: icon
@@ -63,18 +63,18 @@ function MethodButton({ icon, label, description, href, loading, disabled, class
 	if (href) {
 		if (href.startsWith("/api/") || href.startsWith("http")) return /* @__PURE__ */ jsx("a", {
 			href,
-			className: cx("group", baseClasses, className),
+			className: clsx("group", baseClasses, className),
 			children: content
 		});
 		return /* @__PURE__ */ jsx(Link, {
-			to: href,
-			className: cx("group", baseClasses, className),
+			href,
+			className: clsx("group", baseClasses, className),
 			children: content
 		});
 	}
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: cx("group", baseClasses, disabledClasses, className),
+		className: clsx("group", baseClasses, disabledClasses, className),
 		disabled: disabled || loading,
 		...props,
 		children: content

package/dist/components/Callout.js

@@ -1,6 +1,6 @@
 import { FaInfoCircle } from "../icons/fa/FaInfoCircle.js";
 import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Callout.tsx
 function CalloutIcon({ type }) {
@@ -9,7 +9,7 @@ function CalloutIcon({ type }) {
 }
 function Callout({ type, className = "", children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(className, type === "warning" && "bg-orange-100 border-orange-500 text-orange-700", type === "error" && "bg-red-100 border-red-500 text-red-700", type === "info" && "bg-blue-100 border-blue-500 text-blue-700", "border-t-4 rounded-b px-4 py-3 shadow-md my-4"),
+		className: clsx(className, type === "warning" && "bg-orange-100 border-orange-500 text-orange-700", type === "error" && "bg-red-100 border-red-500 text-red-700", type === "info" && "bg-blue-100 border-blue-500 text-blue-700", "border-t-4 rounded-b px-4 py-3 shadow-md my-4"),
 		role: "alert",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex",

package/dist/components/Card.js

@@ -1,15 +1,15 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Card.tsx
 function Card({ children, className = "", wide, compact, interactive, authShadow }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("w-full bg-[var(--theme-card-bg)] backdrop-blur-xl border border-[var(--theme-border)] rounded-2xl", authShadow ? "shadow-[var(--theme-auth-shadow)]" : "shadow-[var(--theme-shadow)]", wide && "max-w-[560px] p-8", compact && "max-w-[400px] p-6", !wide && !compact && "max-w-[520px] p-10", interactive && "ds-card-interactive cursor-pointer", className),
+		className: clsx("w-full bg-[var(--theme-card-bg)] backdrop-blur-xl border border-[var(--theme-border)] rounded-2xl", authShadow ? "shadow-[var(--theme-auth-shadow)]" : "shadow-[var(--theme-shadow)]", wide && "max-w-[560px] p-8", compact && "max-w-[400px] p-6", !wide && !compact && "max-w-[520px] p-10", interactive && "ds-card-interactive cursor-pointer", className),
 		children
 	});
 }
 function CardHeader({ badge, title, description, className = "", align = "center" }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(align === "center" ? "text-center" : "text-left", "mb-6", className),
+		className: clsx(align === "center" ? "text-center" : "text-left", "mb-6", className),
 		children: [
 			badge && /* @__PURE__ */ jsx("div", {
 				className: "inline-flex items-center gap-1.5 py-1.5 px-3 text-xs font-medium bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-full text-[var(--theme-muted-text-color)] mb-4 transition-colors duration-200",

package/dist/components/Combobox.d.ts

@@ -0,0 +1,66 @@
+import { type ReactElement, type ReactNode } from 'react';
+export interface ComboboxItem<Value = string> {
+    value: Value;
+    label: string;
+    description?: string | undefined;
+    icon?: ReactNode;
+    disabled?: boolean | undefined;
+}
+export interface ComboboxGroup<Value = string> {
+    label: string;
+    /** Leads the heading, such as a provider's logo. */
+    icon?: ReactNode;
+    /** Follows the label, such as who shared the group or a status like "Not responding". */
+    description?: string | undefined;
+    /** Empty for a group that only reports a status; a search finds it by its heading. */
+    items: readonly (ComboboxItem<Value> | (Value & string))[];
+}
+/** A flat list, or groups under headings. A bare string is an item labelled by its value. */
+export type ComboboxItems<Value = string> = readonly (ComboboxItem<Value> | (Value & string))[] | readonly ComboboxGroup<Value>[];
+interface FieldProps {
+    id?: string | undefined;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: boolean | undefined;
+    /** Classes for the field box: border, background, size. */
+    className?: string | undefined;
+}
+type SelectionProps<Value> = {
+    multiple?: false | undefined;
+    value?: Value | null | undefined;
+    defaultValue?: Value | null | undefined;
+    onValueChange?: ((value: NoInfer<Value> | null) => void) | undefined;
+} | {
+    multiple: true;
+    value?: readonly Value[] | undefined;
+    defaultValue?: readonly Value[] | undefined;
+    onValueChange?: ((value: NoInfer<Value>[]) => void) | undefined;
+};
+export type ComboboxProps<Value = string> = FieldProps & SelectionProps<Value> & {
+    items: ComboboxItems<Value>;
+    /** Matches a value to its item. Defaults to deep equality, so object values can be recreated. */
+    isItemEqualToValue?: ((itemValue: Value, value: Value) => boolean) | undefined;
+    /** Labels a selected value that no item has, such as a saved choice the list no longer offers. */
+    itemToStringLabel?: ((value: Value) => string) | undefined;
+    /** Renders the field as this button, with the search input inside the popup, for compact
+     *  pickers such as a toolbar pill. The button shows the selection itself. */
+    trigger?: ReactElement | undefined;
+    /** A hint on the trigger button. */
+    triggerTooltip?: ReactNode;
+};
+export interface AutocompleteProps extends FieldProps {
+    /** Suggestions; any typed text is also a valid value. */
+    items: ComboboxItems<string>;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+}
+/** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
+export declare function Combobox<Value = string>(props: ComboboxProps<Value>): import("react").JSX.Element;
+/** A free-text field that suggests values as you type. */
+export declare function Autocomplete({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: AutocompleteProps): import("react").JSX.Element;
+export {};

package/dist/components/Combobox.js

@@ -0,0 +1,393 @@
+import { FaCaretDown } from "../icons/fa/FaCaretDown.js";
+import { FaCheck } from "../icons/fa/FaCheck.js";
+import { FiX } from "../icons/fi/FiX.js";
+import { panelClassName, panelItemClassName, portalContainer, positionerClassName } from "./floating.js";
+import { Tooltip } from "./Tooltip.js";
+import { useStrings } from "./Provider.js";
+import { useQueryMatch } from "./search.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { dequal } from "dequal";
+//#region src/components/Combobox.tsx
+function isGroup(item) {
+	return typeof item === "object" && "items" in item;
+}
+function toEntry(item, group) {
+	const entry = typeof item === "string" ? {
+		value: item,
+		label: item
+	} : item;
+	return group === void 0 ? entry : {
+		...entry,
+		group
+	};
+}
+/** Base UI takes either flat items or groups, and filters and navigates by the leaf items. */
+function useEntries(items) {
+	return useMemo(() => {
+		const [first] = items;
+		if (first !== void 0 && isGroup(first)) {
+			const groups = items.map((g, order) => ({
+				label: g.label,
+				icon: g.icon,
+				description: g.description,
+				items: g.items.map((item) => toEntry(item, g.label)),
+				order
+			}));
+			return {
+				items: groups,
+				flat: groups.flatMap((g) => g.items),
+				statusGroups: groups.filter((g) => g.items.length === 0)
+			};
+		}
+		const flat = items.map((item) => toEntry(item));
+		return {
+			items: flat,
+			flat,
+			statusGroups: []
+		};
+	}, [items]);
+}
+function useEntryFilter() {
+	const match = useQueryMatch();
+	return useCallback((entry, query) => match(query, entry.label, typeof entry.value === "string" ? entry.value : void 0, entry.group), [match]);
+}
+var entryLabel = (entry) => entry?.label ?? "";
+var fieldClassName = "theme-input relative flex min-h-8 w-full items-center gap-1 rounded-md border text-sm focus-within:border-(--theme-element) focus-within:ring-1 focus-within:ring-(--theme-element) has-[[aria-invalid=true]]:border-(--theme-error) has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-(--theme-input-disabled-bg) has-[input:disabled]:text-(--theme-input-disabled-text)";
+var inputClassName = "h-full min-w-12 flex-1 self-stretch border-0 bg-transparent py-1.5 pl-3 text-inherit outline-none placeholder:text-(--theme-muted-text-color) disabled:cursor-not-allowed";
+var triggerClassName = "flex shrink-0 items-center self-stretch px-2 text-(--theme-muted-text-color) disabled:cursor-not-allowed";
+var popupInputClassName = "theme-input h-7 w-full rounded-md border px-2 text-sm outline-none placeholder:text-(--theme-muted-text-color) focus:border-(--theme-element)";
+/** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
+function Combobox$1(props) {
+	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, trigger, triggerTooltip } = props;
+	const entries = useEntries(items);
+	const filter = useEntryFilter();
+	const strings = useStrings();
+	const t = strings.dropdown;
+	const list = useRef(null);
+	const [inputValue, setInputValue] = useState(null);
+	const entryOf = (value) => entries.flat.find((entry) => isItemEqualToValue(entry.value, value)) ?? {
+		value,
+		label: itemToStringLabel(value)
+	};
+	const toEntries = (values) => values?.map(entryOf);
+	const toSingle = (value) => value === void 0 ? void 0 : value === null ? null : entryOf(value);
+	const selected = props.multiple ? void 0 : toSingle(props.value);
+	const selectedIcon = selected?.icon && (inputValue === null || inputValue === selected.label) ? selected.icon : null;
+	const input = /* @__PURE__ */ jsx(Combobox.Input, {
+		id: trigger ? void 0 : id,
+		placeholder,
+		"aria-label": ariaLabel || void 0,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid || void 0,
+		autoComplete: "off",
+		className: trigger ? popupInputClassName : inputClassName
+	});
+	const itemRow = (entry, rowProps) => /* @__PURE__ */ jsxs(Combobox.Item, {
+		value: entry,
+		disabled: entry.disabled,
+		...rowProps.props,
+		className: itemClassName,
+		children: [/* @__PURE__ */ jsx(ItemContent, { entry }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			className: "ml-auto flex shrink-0 items-center",
+			children: /* @__PURE__ */ jsx(FaCheck, { className: "size-3.5" })
+		})]
+	}, rowProps.key);
+	const parts = trigger ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+		content: triggerTooltip,
+		children: /* @__PURE__ */ jsx(Combobox.Trigger, {
+			id,
+			"aria-label": ariaLabel || void 0,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-describedby": ariaDescribedBy,
+			"aria-invalid": ariaInvalid || void 0,
+			render: trigger
+		})
+	}), /* @__PURE__ */ jsx(ListPopup, {
+		listRef: list,
+		empty: t.noOptionsFound,
+		statusGroups: entries.statusGroups,
+		query: inputValue ?? "",
+		header: /* @__PURE__ */ jsx("div", {
+			className: "border-b border-(--theme-border) p-1.5",
+			children: input
+		}),
+		className: "w-max min-w-(--anchor-width) max-w-[min(28rem,var(--available-width))]",
+		renderItem: itemRow
+	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
+		"data-testid": "combobox",
+		className: clsx(fieldClassName, className),
+		children: [props.multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
+			className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-1",
+			children: [/* @__PURE__ */ jsx(Combobox.Value, { children: (values) => values.map((entry) => /* @__PURE__ */ jsxs(Combobox.Chip, {
+				"aria-label": entry.label,
+				className: "flex items-center gap-1 rounded bg-(--theme-muted-panel-bg) py-0.5 pr-0.5 pl-1.5 text-xs outline-none data-highlighted:bg-(--theme-hover)",
+				children: [entry.label, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+					"aria-label": `${strings.common.remove} ${entry.label}`,
+					className: "flex size-4 items-center justify-center rounded hover:bg-(--theme-hover)",
+					children: /* @__PURE__ */ jsx(FiX, { className: "size-3" })
+				})]
+			}, entry.label)) }), input]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [selectedIcon && /* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 items-center pl-3",
+			children: selectedIcon
+		}), input] }), /* @__PURE__ */ jsx(Combobox.Trigger, {
+			"aria-label": t.showOptions,
+			"data-testid": "combobox-button",
+			className: triggerClassName,
+			children: /* @__PURE__ */ jsx(FaCaretDown, { className: "size-3" })
+		})]
+	}), /* @__PURE__ */ jsx(ListPopup, {
+		listRef: list,
+		empty: t.noOptionsFound,
+		statusGroups: entries.statusGroups,
+		query: inputValue ?? "",
+		renderItem: itemRow
+	})] });
+	const root = {
+		items: entries.items,
+		filter,
+		isItemEqualToValue: (a, b) => isItemEqualToValue(a.value, b.value),
+		itemToStringLabel: entryLabel,
+		onInputValueChange: setInputValue,
+		onItemHighlighted: (_, { index, reason }) => list.current?.reveal(index, reason),
+		disabled,
+		required,
+		virtualized: true,
+		children: parts
+	};
+	return props.multiple ? /* @__PURE__ */ jsx(Combobox.Root, {
+		...root,
+		multiple: true,
+		value: toEntries(props.value),
+		defaultValue: toEntries(props.defaultValue),
+		onValueChange: (next) => props.onValueChange?.(next.map((entry) => entry.value))
+	}) : /* @__PURE__ */ jsx(Combobox.Root, {
+		...root,
+		value: selected,
+		defaultValue: toSingle(props.defaultValue),
+		onValueChange: (next) => props.onValueChange?.(next?.value ?? null)
+	});
+}
+/** A free-text field that suggests values as you type. */
+function Autocomplete$1({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }) {
+	const entries = useEntries(items);
+	const filter = useEntryFilter();
+	const t = useStrings().dropdown;
+	const list = useRef(null);
+	return /* @__PURE__ */ jsxs(Autocomplete.Root, {
+		items: entries.items,
+		filter,
+		itemToStringValue: (entry) => entry.value,
+		value,
+		defaultValue,
+		onValueChange: (next) => onValueChange?.(next),
+		onItemHighlighted: (_, { index, reason }) => list.current?.reveal(index, reason),
+		disabled,
+		required,
+		virtualized: true,
+		children: [/* @__PURE__ */ jsxs(Autocomplete.InputGroup, {
+			"data-testid": "combobox",
+			className: clsx(fieldClassName, className),
+			children: [/* @__PURE__ */ jsx(Autocomplete.Input, {
+				id,
+				placeholder,
+				"aria-label": ariaLabel || void 0,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid || void 0,
+				autoComplete: "off",
+				className: inputClassName
+			}), entries.flat.length > 0 && /* @__PURE__ */ jsx(Autocomplete.Trigger, {
+				"aria-label": t.showOptions,
+				"data-testid": "combobox-button",
+				className: triggerClassName,
+				children: /* @__PURE__ */ jsx(FaCaretDown, { className: "size-3" })
+			})]
+		}), /* @__PURE__ */ jsx(ListPopup, {
+			listRef: list,
+			renderItem: (entry, rowProps) => /* @__PURE__ */ jsx(Autocomplete.Item, {
+				value: entry,
+				disabled: entry.disabled,
+				...rowProps.props,
+				className: itemClassName,
+				children: /* @__PURE__ */ jsx(ItemContent, { entry })
+			}, rowProps.key)
+		})]
+	});
+}
+var itemClassName = clsx(panelItemClassName, "data-selected:font-medium");
+function ItemContent({ entry }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [entry.icon && /* @__PURE__ */ jsx("span", {
+		className: "flex shrink-0 items-center",
+		children: entry.icon
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-col",
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: entry.label,
+			overflowOnly: true,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: entry.label
+			})
+		}), entry.description && /* @__PURE__ */ jsx("span", {
+			className: "text-xs leading-snug text-(--theme-muted-text-color)",
+			children: entry.description
+		})]
+	})] });
+}
+function GroupHeading({ group }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		group.icon && /* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 items-center",
+			children: group.icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "shrink-0 font-semibold",
+			children: group.label
+		}),
+		group.description && /* @__PURE__ */ jsx(Tooltip, {
+			content: group.description,
+			overflowOnly: true,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 truncate",
+				children: ["· ", group.description]
+			})
+		})
+	] });
+}
+/** Portal, positioner and popup shared by Combobox and Autocomplete; both use the same parts. */
+function ListPopup({ listRef, empty, statusGroups = [], query = "", header, className = "w-(--anchor-width) max-w-(--available-width)", renderItem }) {
+	return /* @__PURE__ */ jsx(Combobox.Portal, {
+		container: portalContainer(),
+		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			align: "start",
+			sideOffset: 4,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				className: clsx("overflow-hidden", className, panelClassName),
+				children: [
+					header,
+					empty && statusGroups.length === 0 && /* @__PURE__ */ jsx(Combobox.Empty, {
+						className: "px-3 py-2 text-(--theme-muted-text-color) empty:hidden",
+						children: empty
+					}),
+					/* @__PURE__ */ jsx(Combobox.List, { children: /* @__PURE__ */ jsx(VirtualList, {
+						ref: listRef,
+						statusGroups,
+						query,
+						renderItem
+					}) })
+				]
+			})
+		})
+	});
+}
+function toRows(filtered, statusGroups) {
+	const nodes = statusGroups.length ? [...filtered, ...statusGroups].sort((a, b) => ("order" in a ? a.order : 0) - ("order" in b ? b.order : 0)) : filtered;
+	const rows = [];
+	const rowOfItem = [];
+	for (const node of nodes) {
+		const leaves = "items" in node ? node.items : [node];
+		if ("items" in node) rows.push({
+			kind: "group",
+			group: node
+		});
+		for (const entry of leaves) {
+			rowOfItem.push(rows.length);
+			rows.push({
+				kind: "item",
+				entry,
+				index: rowOfItem.length - 1
+			});
+		}
+	}
+	return {
+		rows,
+		rowOfItem
+	};
+}
+function VirtualList({ ref, statusGroups, query, renderItem }) {
+	const filtered = Combobox.useFilteredItems();
+	const match = useQueryMatch();
+	const { rows, rowOfItem } = useMemo(() => {
+		const q = query.trim();
+		const shown = q ? statusGroups.filter((g) => match(q, g.label, g.description)) : statusGroups;
+		return toRows(filtered, shown);
+	}, [
+		filtered,
+		statusGroups,
+		query,
+		match
+	]);
+	const scroller = useRef(null);
+	const virtualizer = useVirtualizer({
+		count: rows.length,
+		getScrollElement: () => scroller.current,
+		estimateSize: (i) => rows[i]?.kind === "group" ? 28 : 36,
+		overscan: 10,
+		paddingStart: 4,
+		paddingEnd: 4,
+		scrollPaddingStart: 4,
+		scrollPaddingEnd: 4
+	});
+	useImperativeHandle(ref, () => ({ reveal(index, reason) {
+		const row = index === void 0 ? void 0 : rowOfItem[index];
+		if (row === void 0 || reason === "pointer") return;
+		queueMicrotask(() => virtualizer.scrollToIndex(row, { align: "auto" }));
+	} }), [rowOfItem, virtualizer]);
+	const scrollerRef = useCallback((element) => {
+		scroller.current = element;
+		if (element) virtualizer.measure();
+	}, [virtualizer]);
+	if (rows.length === 0) return null;
+	const total = virtualizer.getTotalSize();
+	return /* @__PURE__ */ jsx("div", {
+		role: "presentation",
+		ref: scrollerRef,
+		className: "max-h-[min(15rem,var(--available-height))] overflow-auto overscroll-contain",
+		style: { height: total },
+		children: /* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			className: "relative w-full",
+			style: { height: total },
+			children: virtualizer.getVirtualItems().map((virtual) => {
+				const row = rows[virtual.index];
+				const style = {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					transform: `translateY(${virtual.start}px)`
+				};
+				if (!row) return null;
+				if (row.kind === "group") return /* @__PURE__ */ jsx("div", {
+					role: "presentation",
+					"data-index": virtual.index,
+					ref: virtualizer.measureElement,
+					style,
+					className: "flex items-center gap-1.5 px-3 pt-2 pb-1 text-xs text-(--theme-muted-text-color)",
+					children: /* @__PURE__ */ jsx(GroupHeading, { group: row.group })
+				}, virtual.key);
+				return renderItem(row.entry, {
+					key: virtual.key,
+					props: {
+						index: row.index,
+						ref: virtualizer.measureElement,
+						"data-index": virtual.index,
+						"aria-setsize": rowOfItem.length,
+						"aria-posinset": row.index + 1,
+						style
+					}
+				});
+			})
+		})
+	});
+}
+//#endregion
+export { Autocomplete$1 as Autocomplete, Combobox$1 as Combobox };

package/dist/components/ConfirmModal.js

@@ -1,9 +1,9 @@
 import { useStrings } from "./Provider.js";
-import { BareModal, modalPanelClasses } from "./BareModal.js";
 import { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses } from "./ghostButton.js";
-import cx from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Modal, ModalDescription, ModalTitle } from "./Modal.js";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/components/ConfirmModal.tsx
 function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
 	const strings = useStrings();
@@ -29,21 +29,21 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 			setPending(false);
 		}
 	}, [onConfirm, closeOnConfirm]);
-	return /* @__PURE__ */ jsxs(BareModal, {
+	return /* @__PURE__ */ jsxs(Modal, {
+		alert: destructive,
 		open,
 		onClose,
-		ariaLabel: title,
 		align,
-		preventClose: pending,
-		className: cx(modalPanelClasses, "w-[480px] max-w-full"),
+		dismissible: !pending,
+		className: "w-[480px] max-w-full",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "px-5 pt-5",
 			children: [
-				/* @__PURE__ */ jsx("h2", {
+				/* @__PURE__ */ jsx(ModalTitle, {
 					className: "text-lg font-semibold text-(--theme-app)",
 					children: title
 				}),
-				description !== null && description !== void 0 && /* @__PURE__ */ jsx("p", {
+				description !== null && description !== void 0 && /* @__PURE__ */ jsx(ModalDescription, {
 					className: "mt-1.5 text-sm text-(--theme-muted-text-color)",
 					children: description
 				}),
@@ -58,13 +58,13 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 				type: "button",
 				onClick: onClose,
 				disabled: pending,
-				className: cx(ghostButtonClasses, pending && "cursor-wait"),
+				className: clsx(ghostButtonClasses, pending && "cursor-wait"),
 				children: cancelLabel ?? strings.modal.cancel
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: runConfirm,
 				disabled: confirmDisabled || pending,
-				className: cx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
+				className: clsx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
 				children: confirmLabel
 			})]
 		})]

package/dist/components/ContextMenu.d.ts

@@ -0,0 +1,23 @@
+import { type MenuEntry, type MenuSearch } from './MenuEntries.js';
+/** Where a menu opens: under an element, such as the button that opened it, or
+ *  at a pointer event's point, which then moves with the element it landed on. */
+export type MenuAnchor = Element | {
+    clientX: number;
+    clientY: number;
+    currentTarget?: EventTarget | null;
+};
+export interface OpenMenuOptions {
+    search?: MenuSearch | undefined;
+    /** Called once the menu closes, or another menu replaces it. */
+    onClose?: (() => void) | undefined;
+}
+export type OpenMenu = (at: MenuAnchor, items: MenuEntry[], options?: OpenMenuOptions) => void;
+/**
+ * One menu that any number of rows, buttons or a canvas open with their own
+ * items, so a long list holds a single menu rather than one per row. Render
+ * `contextMenu` once.
+ */
+export declare function useContextMenu(): {
+    openMenu: OpenMenu;
+    contextMenu: import("react").JSX.Element | null;
+};