@parallelworks/ui 0.41.0 → 0.43.0

package/dist/components/CreateModal.js

@@ -1,40 +1,22 @@
-import { useStrings } from "./Provider.js";
 import { FaChevronDown } from "../icons/fa/FaChevronDown.js";
-import { HiQuestionMarkCircle } from "../icons/hi/HiQuestionMarkCircle.js";
 import { IoHeart } from "../icons/io5/IoHeart.js";
 import { IoHeartOutline } from "../icons/io5/IoHeartOutline.js";
 import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
-import { TOOLTIP_ID } from "./Tooltip.js";
-import { AddMenu } from "./AddMenu.js";
-import { BareModal, modalPanelClasses } from "./BareModal.js";
+import { Tooltip } from "./Tooltip.js";
+import { useStrings } from "./Provider.js";
+import { ActionMenu } from "./ActionMenu.js";
+import { comboboxLeaves } from "./comboboxItems.js";
+import { Autocomplete, Combobox } from "./Combobox.js";
 import { ghostButtonClasses } from "./ghostButton.js";
-import { filterOption, toggleSetMember } from "./dropdownUtils.js";
-import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
-import cx from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Modal } from "./Modal.js";
+import { InfoTip } from "./InfoTip.js";
+import { Switch } from "./Switch.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Button } from "@base-ui/react/button";
+import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/CreateModal.tsx
-/** Small info icon that surfaces field help via the global tooltip. */
-function FieldHelp({ tooltip }) {
-	if (!tooltip) return null;
-	return /* @__PURE__ */ jsx("span", {
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": tooltip,
-		className: "inline-flex cursor-help text-(--theme-muted-text-color)",
-		children: /* @__PURE__ */ jsx(HiQuestionMarkCircle, { className: "w-3 h-3" })
-	});
-}
-/** Anchors the tooltip on a non-focusable span so it opens on hover but not when focus returns to the button after its menu/toggle closes (which would leave it stuck). */
-function PillTooltip({ content, className, children }) {
-	return /* @__PURE__ */ jsx("span", {
-		...content ? {
-			"data-tooltip-id": TOOLTIP_ID,
-			"data-tooltip-content": content
-		} : {},
-		className: cx("inline-flex items-center gap-1.5", className),
-		children
-	});
-}
 /** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
 function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceholder, hideName = false, initialName, showDescription = true, descriptionPlaceholder, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled = false, hideSubmit = false, nameOptional = false, onNameChange, dirty = false, showFavorite = false, onSubmit }) {
 	const t = useStrings().modal;
@@ -59,13 +41,6 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 			setFavorite(false);
 			setNameTouched(false);
 			setInteracted(false);
-			requestAnimationFrame(() => {
-				const input = nameRef.current;
-				const dialog = input?.closest("[role=\"dialog\"]");
-				const active = document.activeElement;
-				if (dialog?.contains(active) && active !== dialog) return;
-				input?.focus();
-			});
 		}
 	}, [open, initialName]);
 	const nameError = name.trim() ? validateName?.(name.trim()) ?? null : null;
@@ -95,16 +70,17 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 		}
 		if (close) onClose();
 	};
-	return /* @__PURE__ */ jsxs(BareModal, {
+	return /* @__PURE__ */ jsxs(Modal, {
 		open,
 		onClose,
-		ariaLabel: `${submitText}: ${typeLabel}`,
-		className: cx(modalPanelClasses, "w-[560px] max-w-full flex flex-col max-h-full"),
-		preventClose: isDirty,
-		onPanelKeyDown: (e) => {
+		"aria-label": `${submitText}: ${typeLabel}`,
+		className: "w-[560px] max-w-full flex flex-col max-h-full",
+		dismissible: !isDirty,
+		initialFocus: () => nameRef.current ?? true,
+		onKeyDown: (e) => {
 			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit();
 		},
-		onPanelMouseDown: (e) => {
+		onMouseDown: (e) => {
 			if (e.target instanceof Element && !e.target.closest("input, textarea, button, a, select, label, code, pre, .select-all")) e.preventDefault();
 		},
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -114,11 +90,10 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 				/* @__PURE__ */ jsxs("div", {
 					className: "px-4 pt-4",
 					children: [
-						typeMenu && typeMenu.length > 0 ? /* @__PURE__ */ jsxs(AddMenu, {
+						typeMenu && typeMenu.length > 0 ? /* @__PURE__ */ jsxs(ActionMenu, {
 							items: typeMenu,
 							label: typeLabel,
-							zClassName: "z-[9999]",
-							buttonClassName: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
+							triggerClassName: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
 							children: [
 								typeIcon,
 								typeLabel,
@@ -128,7 +103,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 							className: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color)",
 							children: [typeIcon, typeLabel]
 						}),
-						hideName ? /* @__PURE__ */ jsx("div", { className: "mt-3" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						hideName ? /* @__PURE__ */ jsx("div", { className: "mt-3" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 							/* @__PURE__ */ jsx("input", {
 								ref: nameRef,
 								type: "text",
@@ -153,7 +128,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 								placeholder: namePlaceholder,
 								"aria-label": namePlaceholder,
 								onAnimationEnd: () => setNameFlash(false),
-								className: cx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
+								className: clsx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
 							}),
 							nameError && /* @__PURE__ */ jsx("p", {
 								className: "mt-1 text-xs text-(--theme-error)",
@@ -187,7 +162,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 						type: "button",
 						onClick: () => setAdvancedOpen((o) => !o),
 						className: "inline-flex items-center gap-1 text-xs font-medium text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
-						children: [/* @__PURE__ */ jsx(LuChevronRight, { className: cx("w-3 h-3 transition-transform", advancedOpen && "rotate-90") }), t.advanced]
+						children: [/* @__PURE__ */ jsx(LuChevronRight, { className: clsx("w-3 h-3 transition-transform", advancedOpen && "rotate-90") }), t.advanced]
 					}), advancedOpen && /* @__PURE__ */ jsx("div", {
 						className: "mt-2",
 						children: advanced
@@ -196,16 +171,13 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "shrink-0 flex items-center justify-between gap-2 px-4 py-3",
-			children: [showFavorite ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				role: "switch",
-				"aria-checked": favorite,
-				"aria-label": t.favorite,
-				onClick: () => setFavorite((f) => !f),
-				className: cx("inline-flex h-8 rounded-md text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring)", favorite ? "text-(--theme-favorite) bg-(--theme-favorite-muted)" : "text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg)"),
-				children: /* @__PURE__ */ jsxs(PillTooltip, {
-					content: favorite ? t.favoriteHintOn : t.favoriteHintOff,
-					className: "px-2.5",
+			children: [showFavorite ? /* @__PURE__ */ jsx(Tooltip, {
+				content: favorite ? t.favoriteHintOn : t.favoriteHintOff,
+				children: /* @__PURE__ */ jsxs(Toggle, {
+					pressed: favorite,
+					onPressedChange: setFavorite,
+					"aria-label": t.favorite,
+					className: clsx("inline-flex h-8 items-center gap-1.5 px-2.5 rounded-md text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring)", favorite ? "text-(--theme-favorite) bg-(--theme-favorite-muted)" : "text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg)"),
 					children: [favorite ? /* @__PURE__ */ jsx(IoHeart, { className: "w-4 h-4 scale-110 transition-transform" }) : /* @__PURE__ */ jsx(IoHeartOutline, { className: "w-4 h-4 transition-transform" }), favorite ? t.favorited : t.favorite]
 				})
 			}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
@@ -228,256 +200,133 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 }
 var fieldInputClasses = "w-full h-8 px-2.5 rounded-md border border-(--theme-border) bg-(--theme-input-bg) shadow-none text-sm text-(--theme-app) placeholder:text-(--theme-muted-text-color) transition-colors focus:outline-none focus:ring-0 focus:border-(--theme-element)";
 var fieldLabelClasses = "block mb-1 text-xs font-medium text-(--theme-muted-text-color)";
+/** A field's label, with its help beside it rather than inside the label, so
+*  the label names the field and not the help button. */
+function FieldLabel({ id, label, tooltip }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(fieldLabelClasses, "flex items-center gap-1"),
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor: id,
+			children: label
+		}), tooltip && /* @__PURE__ */ jsx(InfoTip, { text: tooltip })]
+	});
+}
 /** Labeled single-line input row for the dialog's extra fields. */
-function CreateModalField({ label, tooltip, ...props }) {
-	return /* @__PURE__ */ jsxs("label", {
-		className: "block mb-3",
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: cx(fieldLabelClasses, "flex items-center gap-1"),
-			children: [label, /* @__PURE__ */ jsx(FieldHelp, { tooltip })]
+function CreateModalField({ label, tooltip, id, ...props }) {
+	const fallbackId = useId();
+	const fieldId = id ?? fallbackId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-3",
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			id: fieldId,
+			label,
+			tooltip
 		}), /* @__PURE__ */ jsx("input", {
 			type: "text",
 			autoComplete: "off",
 			"data-1p-ignore": true,
 			...props,
+			id: fieldId,
 			className: fieldInputClasses
 		})]
 	});
 }
 /** Labeled multi-line field for credential blobs (JSON keys, PEM keys). */
-function CreateModalTextarea({ label, tooltip, rows = 4, ...props }) {
-	return /* @__PURE__ */ jsxs("label", {
-		className: "block mb-3",
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: cx(fieldLabelClasses, "flex items-center gap-1"),
-			children: [label, /* @__PURE__ */ jsx(FieldHelp, { tooltip })]
+function CreateModalTextarea({ label, tooltip, rows = 4, id, ...props }) {
+	const fallbackId = useId();
+	const fieldId = id ?? fallbackId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-3",
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			id: fieldId,
+			label,
+			tooltip
 		}), /* @__PURE__ */ jsx("textarea", {
 			autoComplete: "off",
 			"data-1p-ignore": true,
 			rows,
 			...props,
-			className: cx(fieldInputClasses, "h-auto py-2 font-mono text-xs leading-relaxed resize-y")
+			id: fieldId,
+			className: clsx(fieldInputClasses, "h-auto py-2 font-mono text-xs leading-relaxed resize-y")
 		})]
 	});
 }
-/** Labeled input row with typeahead suggestions; free-form values allowed. */
-function CreateModalAutocompleteField({ label, tooltip, value, onChange, options, placeholder }) {
-	const query = value.trim().toLowerCase();
-	const filtered = query ? options.filter((option) => option.toLowerCase().includes(query)) : options;
+/** Labeled input with suggestions; any text is allowed. */
+function CreateModalAutocompleteField({ label, tooltip, value, onValueChange, items, placeholder }) {
+	const id = useId();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mb-3",
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: cx(fieldLabelClasses, "flex items-center gap-1"),
-			children: [label, /* @__PURE__ */ jsx(FieldHelp, { tooltip })]
-		}), /* @__PURE__ */ jsxs(Combobox, {
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			id,
+			label,
+			tooltip
+		}), /* @__PURE__ */ jsx(Autocomplete, {
+			id,
+			items,
 			value,
-			onChange: (next) => onChange(next ?? ""),
-			immediate: true,
-			children: [/* @__PURE__ */ jsx(ComboboxInput, {
-				autoComplete: "off",
-				"data-1p-ignore": true,
-				"aria-label": label,
-				placeholder,
-				displayValue: (current) => current ?? "",
-				onChange: (e) => onChange(e.target.value),
-				className: fieldInputClasses
-			}), filtered.length > 0 && /* @__PURE__ */ jsx(ComboboxOptions, {
-				anchor: "bottom start",
-				className: "z-[9999] mt-1 w-(--input-width) [--anchor-max-height:14rem] overflow-auto rounded-lg border border-(--theme-border) bg-(--theme-app-bg) py-1 shadow-lg focus:outline-none",
-				children: filtered.map((option) => /* @__PURE__ */ jsx(ComboboxOption, {
-					value: option,
-					className: "px-3 py-1.5 text-[13px] text-(--theme-app) data-[focus]:bg-(--theme-muted-panel-bg) cursor-pointer",
-					children: option
-				}, option))
-			})]
+			onValueChange,
+			placeholder
 		})]
 	});
 }
+var pillClasses = "inline-flex h-7 items-center gap-1.5 rounded-md border border-(--theme-border) px-2 text-xs font-medium transition-colors";
 /** Compact property pill with an on/off switch. */
-function CreateModalSwitch({ label, checked, onChange, tooltip }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		role: "switch",
-		"aria-checked": checked,
-		onClick: () => onChange(!checked),
-		className: cx("inline-flex h-7 rounded-md border border-(--theme-border) text-xs font-medium transition-colors hover:bg-(--theme-muted-panel-bg)", checked ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
-		children: /* @__PURE__ */ jsxs(PillTooltip, {
-			content: tooltip,
-			className: "px-2",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: cx("relative inline-flex h-3.5 w-6 shrink-0 rounded-full transition-colors", checked ? "bg-(--theme-element)" : "bg-(--theme-border)"),
-				children: /* @__PURE__ */ jsx("span", { className: cx("absolute top-0.5 left-0.5 h-2.5 w-2.5 rounded-full bg-white shadow-sm transition-transform", checked && "translate-x-2.5") })
+function CreateModalSwitch({ label, checked, onCheckedChange, tooltip }) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip,
+		children: /* @__PURE__ */ jsxs("label", {
+			className: clsx(pillClasses, "cursor-pointer hover:bg-(--theme-muted-panel-bg)", checked ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
+			children: [/* @__PURE__ */ jsx(Switch, {
+				size: "sm",
+				checked,
+				onCheckedChange
 			}), label]
 		})
 	});
 }
-/** Callers gating collapse on list size must use this same threshold so
-* collapsed rows always come with a filter to find them. */
-var CREATE_MODAL_SELECT_FILTER_THRESHOLD = 8;
-function collapseToggleRow(group, count, collapse) {
-	const expanded = collapse.expanded.has(group);
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		"aria-expanded": expanded,
-		onMouseDown: (e) => e.preventDefault(),
-		onClick: () => collapse.onToggle(group),
-		className: "flex w-full items-center gap-1.5 px-3 py-1.5 text-[13px] text-(--theme-muted-text-color) hover:text-(--theme-app) cursor-pointer",
-		children: [/* @__PURE__ */ jsx(expanded ? FaChevronDown : LuChevronRight, { className: "w-3 h-3" }), collapse.label(count)]
-	}, `toggle-${group}`);
-}
-function collapsibleCountsByGroup(options) {
-	const counts = /* @__PURE__ */ new Map();
-	for (const o of options) if (o.collapsible && o.group) counts.set(o.group, (counts.get(o.group) ?? 0) + 1);
-	return counts;
-}
-function pushToggleRowOnce(nodes, toggledGroups, group, count, collapse) {
-	if (!toggledGroups.has(group)) {
-		toggledGroups.add(group);
-		nodes.push(collapseToggleRow(group, count, collapse));
-	}
-}
-function buildOptionNodes(options, query, onChange, collapse) {
-	const trimmed = query.trim();
-	const q = trimmed.toLowerCase().replace(/-/g, "");
-	const filtered = q ? options.filter((o) => o.pinned || filterOption({
-		label: o.label,
-		value: o.value,
-		secondaryValue: o.group
-	}, trimmed)) : options;
-	const collapsibleCounts = !q && collapse ? collapsibleCountsByGroup(filtered) : /* @__PURE__ */ new Map();
-	const nodes = [];
-	let lastGroup;
-	const toggledGroups = /* @__PURE__ */ new Set();
-	for (const option of filtered) {
-		const { group } = option;
-		if (group && group !== lastGroup) {
-			lastGroup = group;
-			nodes.push(/* @__PURE__ */ jsx("div", {
-				className: "px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
-				children: group
-			}, `group-${group}`));
-		}
-		if (!q && collapse && option.collapsible && group) {
-			pushToggleRowOnce(nodes, toggledGroups, group, collapsibleCounts.get(group) ?? 0, collapse);
-			if (!collapse.expanded.has(group)) continue;
-		}
-		nodes.push(/* @__PURE__ */ jsx(MenuItem, {
-			disabled: option.disabled ?? false,
-			children: /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				disabled: option.disabled,
-				"aria-disabled": option.disabled,
-				"aria-label": option.description ? option.label : void 0,
-				"aria-description": option.description,
-				onClick: () => onChange(option.value),
-				className: cx("flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] data-[focus]:bg-(--theme-muted-panel-bg)", option.disabled ? "cursor-not-allowed text-(--theme-muted-text-color)" : "cursor-pointer text-(--theme-app)", option.pinned && "mt-1 border-t border-(--theme-border) pt-2 font-medium"),
-				children: [option.icon, option.description ? /* @__PURE__ */ jsxs("span", {
-					className: "flex min-w-0 flex-col",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "truncate",
-						children: option.label
-					}), /* @__PURE__ */ jsx("span", {
-						className: "truncate text-[11px] font-normal text-(--theme-muted-text-color)",
-						children: option.description
-					})]
-				}) : option.label]
-			})
-		}, option.value));
-	}
-	return nodes;
-}
-function CreateModalSelectPanel({ open, options, label, value, collapsedLabel, onChange }) {
+/** Compact property pill that picks one value from a searchable list. Items may carry
+* icons, descriptions and group headings (e.g. Clusters vs Kubernetes). */
+function CreateModalSelect({ label, icon, value, items, onValueChange, disabled = false, disabledReason, tooltip }) {
 	const t = useStrings().modal;
-	const [query, setQuery] = useState("");
-	const inputRef = useRef(null);
-	const showFilter = options.length > 8;
-	const selectedGroup = options.find((o) => o.value === value)?.group;
-	const initialExpandedGroups = useCallback(() => new Set(selectedGroup ? [selectedGroup] : []), [selectedGroup]);
-	const [expandedGroups, setExpandedGroups] = useState(initialExpandedGroups);
-	useEffect(() => {
-		if (!open) {
-			setQuery("");
-			setExpandedGroups(initialExpandedGroups());
-		}
-	}, [open, initialExpandedGroups]);
-	useEffect(() => {
-		if (!open || !showFilter) return;
-		const raf = requestAnimationFrame(() => inputRef.current?.focus());
-		return () => cancelAnimationFrame(raf);
-	}, [open, showFilter]);
-	const rendered = buildOptionNodes(options, query, onChange, collapsedLabel ? {
-		expanded: expandedGroups,
-		onToggle: (group) => setExpandedGroups((prev) => toggleSetMember(prev, group)),
-		label: collapsedLabel
-	} : void 0);
-	return /* @__PURE__ */ jsxs(MenuItems, {
-		anchor: "bottom start",
-		className: "z-[9999] mt-1 flex min-w-44 max-w-[min(28rem,calc(100vw-2rem))] max-h-64 flex-col [--anchor-max-height:16rem] overflow-hidden rounded-lg border border-(--theme-border) bg-(--theme-app-bg) shadow-lg focus:outline-none",
-		children: [showFilter && /* @__PURE__ */ jsx("div", {
-			className: "shrink-0 bg-(--theme-app-bg) px-1.5 pt-1 pb-1.5 border-b border-(--theme-border)",
-			children: /* @__PURE__ */ jsx("input", {
-				ref: inputRef,
-				type: "text",
-				autoComplete: "off",
-				"data-1p-ignore": true,
-				"aria-label": label,
-				placeholder: t.filter,
-				value: query,
-				onChange: (e) => setQuery(e.target.value),
-				onKeyDown: (e) => {
-					if (e.key !== "Escape") e.stopPropagation();
-				},
-				className: "w-full h-7 px-2 rounded-md border border-(--theme-border) bg-(--theme-input-bg) text-[13px] text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none focus:border-(--theme-element)"
-			})
-		}), /* @__PURE__ */ jsx("div", {
-			className: "min-h-0 flex-1 overflow-y-auto py-1",
-			children: rendered.length === 0 ? /* @__PURE__ */ jsx("div", {
-				className: "px-3 py-1.5 text-[13px] text-(--theme-muted-text-color)",
-				children: t.noOptions
-			}) : rendered
-		})]
-	});
-}
-/** Compact property pill with a dropdown of options. Options may carry leading
-* icons and group headers (e.g. Clusters vs Kubernetes). */
-function CreateModalSelect({ label, icon, value, options, onChange, disabled = false, disabledHint, tooltip, collapsedLabel }) {
-	const selected = options.find((o) => o.value === value);
+	const selected = comboboxLeaves(items).map((item) => typeof item === "string" ? {
+		value: item,
+		label: item
+	} : item).find((item) => item.value === value);
 	const selectedLabel = selected?.label ?? (value || void 0);
-	const pillContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const pillContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		selected?.icon ?? icon,
-		selectedLabel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		selectedLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "font-normal text-(--theme-muted-text-color)",
 			children: label
 		}), selectedLabel] }) : label,
 		/* @__PURE__ */ jsx(FaChevronDown, { className: "w-3 h-3 opacity-60" })
 	] });
-	if (disabled) return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-disabled": "true",
-		"aria-label": label,
-		className: cx("inline-flex h-7 rounded-md border border-(--theme-border) text-xs font-medium", "opacity-50 cursor-not-allowed text-(--theme-muted-text-color)"),
-		children: /* @__PURE__ */ jsx(PillTooltip, {
-			content: disabledHint ?? tooltip,
-			className: "px-2",
+	if (disabled) return /* @__PURE__ */ jsx(Tooltip, {
+		content: disabledReason ?? tooltip,
+		children: /* @__PURE__ */ jsx(Button, {
+			disabled: true,
+			focusableWhenDisabled: true,
+			"aria-label": label,
+			className: clsx(pillClasses, "opacity-50 cursor-not-allowed text-(--theme-muted-text-color)"),
 			children: pillContent
 		})
 	});
-	return /* @__PURE__ */ jsx(Menu, { children: ({ open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuButton, {
+	return /* @__PURE__ */ jsx(Combobox, {
+		items,
+		value: value ?? null,
+		onValueChange: (next) => {
+			if (next !== null) onValueChange(next);
+		},
+		itemToStringLabel: (next) => next,
 		"aria-label": label,
-		className: cx("inline-flex h-7 rounded-md border border-(--theme-border) text-xs font-medium transition-colors hover:bg-(--theme-muted-panel-bg)", selectedLabel ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
-		children: /* @__PURE__ */ jsx(PillTooltip, {
-			content: tooltip,
-			className: "px-2",
+		placeholder: t.filter,
+		triggerTooltip: tooltip,
+		trigger: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: clsx(pillClasses, "cursor-pointer hover:bg-(--theme-muted-panel-bg)", selectedLabel ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
 			children: pillContent
 		})
-	}), /* @__PURE__ */ jsx(CreateModalSelectPanel, {
-		open,
-		options,
-		label,
-		value,
-		collapsedLabel,
-		onChange
-	})] }) });
+	});
 }
 //#endregion
-export { CREATE_MODAL_SELECT_FILTER_THRESHOLD, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea };
+export { CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea };

package/dist/components/DescriptionList.js

@@ -1,15 +1,15 @@
-import { TooltipInfo } from "./Tooltip.js";
-import cx from "classnames";
+import { InfoTip } from "./InfoTip.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/DescriptionList.tsx
 function DescriptionListItem({ label, children, tooltip, className, ...props }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("dt", {
-		className: cx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("dt", {
+		className: clsx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "min-w-0 truncate",
 			children: label
-		}), tooltip && /* @__PURE__ */ jsx(TooltipInfo, {
+		}), tooltip && /* @__PURE__ */ jsx(InfoTip, {
 			className: "pr-2",
 			text: tooltip
 		})]
@@ -21,7 +21,7 @@ function DescriptionListItem({ label, children, tooltip, className, ...props })
 }
 function DescriptionList({ children, title, separators = true, subtitle, className, wrapperClassName, vertical = false }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("w-full", wrapperClassName),
+		className: clsx("w-full", wrapperClassName),
 		children: [
 			title && /* @__PURE__ */ jsx("h2", {
 				className: "text-sm font-semibold w-full mb-1",
@@ -32,7 +32,7 @@ function DescriptionList({ children, title, separators = true, subtitle, classNa
 				children: subtitle
 			}),
 			/* @__PURE__ */ jsx("dl", {
-				className: cx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
+				className: clsx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
 				children: Array.isArray(children) ? React.Children.toArray(children) : children
 			})
 		]

package/dist/components/Filter.js

@@ -1,5 +1,5 @@
 import { FaFilter } from "../icons/fa/FaFilter.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Filter.tsx
 function Filter({ filter, setFilter, placeholder = "Filter...", pills, activePill, onPillChange }) {
@@ -22,7 +22,7 @@ function Filter({ filter, setFilter, placeholder = "Filter...", pills, activePil
 			children: pills.map((pill) => /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: () => onPillChange(pill.value),
-				className: cx("px-2.5 py-1 text-xs rounded-full transition-colors border", activePill === pill.value ? "bg-(--theme-element) text-(--theme-element-text) border-transparent" : "theme-border theme-text hover:theme-hover"),
+				className: clsx("px-2.5 py-1 text-xs rounded-full transition-colors border", activePill === pill.value ? "bg-(--theme-element) text-(--theme-element-text) border-transparent" : "theme-border theme-text hover:theme-hover"),
 				children: pill.label
 			}, pill.value))
 		})]

package/dist/components/FilterPill.js

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FilterPill.tsx
 function FilterPill({ active, onClick, children }) {
@@ -6,7 +6,7 @@ function FilterPill({ active, onClick, children }) {
 		type: "button",
 		"aria-pressed": active,
 		onClick,
-		className: cx("px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200", active ? "bg-[var(--theme-panel-bg)] border-[var(--theme-border)] text-[var(--theme-panel)] shadow-sm" : "bg-transparent border-transparent text-[var(--theme-muted-text-color)] hover:text-[var(--theme-panel)] hover:bg-[var(--theme-hover)]"),
+		className: clsx("px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200", active ? "bg-[var(--theme-panel-bg)] border-[var(--theme-border)] text-[var(--theme-panel)] shadow-sm" : "bg-transparent border-transparent text-[var(--theme-muted-text-color)] hover:text-[var(--theme-panel)] hover:bg-[var(--theme-hover)]"),
 		children
 	});
 }

package/dist/components/HoverCard.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement, ReactNode } from 'react';
+export interface HoverCardProps {
+    /** Mounted only while open, so a card that loads its own data loads on first hover. */
+    card: ReactNode;
+    /** The anchor. It receives the trigger's props and ref, so it must pass them to its element. */
+    children: ReactElement;
+    /** Opens on first render, for stories and screenshots. */
+    defaultOpen?: boolean;
+}
+/** Detail about its anchor, such as a person's profile, after a short hover or
+ *  on focus. A visual enhancement: whatever the card shows must also be
+ *  reachable another way, such as the page the anchor links to. The card
+ *  stays open while the pointer is over it. */
+export declare function HoverCard({ card, children, defaultOpen }: HoverCardProps): import("react").JSX.Element;

package/dist/components/HoverCard.js

@@ -0,0 +1,33 @@
+import { cardClassName, portalContainer, positionerClassName } from "./floating.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/HoverCard.tsx
+/** Detail about its anchor, such as a person's profile, after a short hover or
+*  on focus. A visual enhancement: whatever the card shows must also be
+*  reachable another way, such as the page the anchor links to. The card
+*  stays open while the pointer is over it. */
+function HoverCard({ card, children, defaultOpen = false }) {
+	return /* @__PURE__ */ jsxs(PreviewCard.Root, {
+		defaultOpen,
+		children: [/* @__PURE__ */ jsx(PreviewCard.Trigger, {
+			delay: 350,
+			closeDelay: 150,
+			render: children
+		}), /* @__PURE__ */ jsx(PreviewCard.Portal, {
+			container: portalContainer(),
+			children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+				side: "bottom",
+				align: "start",
+				sideOffset: 8,
+				collisionPadding: 8,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+					className: cardClassName,
+					children: card
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { HoverCard };

package/dist/components/IconButton.d.ts

@@ -1,8 +1,8 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+interface IconButtonProps extends ComponentPropsWithRef<'button'> {
     /** Icon to display */
     icon: ReactNode;
-    /** Accessible label (used for aria-label and tooltip) */
+    /** The accessible name, also shown as the tooltip. */
     label: string;
     /** Button variant */
     variant?: 'default' | 'ghost' | 'primary' | 'success';
@@ -10,8 +10,8 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'sm' | 'md' | 'lg';
     /** Whether button is in active/selected state */
     active?: boolean;
-    /** Whether to show tooltip on hover */
+    /** False hides the tooltip, such as while the button's own popup is open. */
     showTooltip?: boolean;
 }
-export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function IconButton({ icon, label, variant, size, active, showTooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
 export {};