@parallelworks/ui 0.40.1 → 0.42.0

package/dist/components/ContextMenu.js

@@ -0,0 +1,89 @@
+import { MenuPopup } from "./Menu.js";
+import { MenuEntries, MenuFilter } from "./MenuEntries.js";
+import { Menu } from "@base-ui/react/menu";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+//#region src/components/ContextMenu.tsx
+function pointRect(x, y) {
+	return {
+		x,
+		y,
+		left: x,
+		top: y,
+		right: x,
+		bottom: y,
+		width: 0,
+		height: 0
+	};
+}
+function toAnchor(at) {
+	if (at instanceof Element) return at;
+	const { clientX, clientY } = at;
+	const on = at.currentTarget instanceof Element ? at.currentTarget : null;
+	if (!on) return { getBoundingClientRect: () => pointRect(clientX, clientY) };
+	const start = on.getBoundingClientRect();
+	const dx = clientX - start.left;
+	const dy = clientY - start.top;
+	return {
+		contextElement: on,
+		getBoundingClientRect: () => {
+			const now = on.getBoundingClientRect();
+			return pointRect(now.left + dx, now.top + dy);
+		}
+	};
+}
+/**
+* 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.
+*/
+function useContextMenu() {
+	const [opened, setOpened] = useState(null);
+	const [open, setOpen] = useState(false);
+	const owner = useRef(null);
+	const release = useCallback(() => {
+		const was = owner.current;
+		owner.current = null;
+		was?.onClose?.();
+	}, []);
+	const openMenu = useCallback((at, items, options) => {
+		if (items.length === 0) return;
+		release();
+		const next = {
+			...options,
+			anchor: toAnchor(at),
+			items
+		};
+		owner.current = next;
+		setOpened(next);
+		setOpen(true);
+	}, [release]);
+	const onOpenChange = useCallback((next) => {
+		if (!next) setOpen(false);
+	}, []);
+	const onOpenChangeComplete = useCallback((next) => {
+		if (!next) release();
+	}, [release]);
+	return {
+		openMenu,
+		contextMenu: opened && /* @__PURE__ */ jsx(MenuFilter, {
+			search: opened.search,
+			children: (query) => /* @__PURE__ */ jsx(Menu.Root, {
+				open,
+				onOpenChange,
+				onOpenChangeComplete,
+				modal: false,
+				children: /* @__PURE__ */ jsx(MenuPopup, {
+					anchor: opened.anchor,
+					children: /* @__PURE__ */ jsx(MenuEntries, {
+						entries: opened.items,
+						search: opened.search,
+						query
+					})
+				})
+			})
+		}, opened.search ? "search" : "plain")
+	};
+}
+//#endregion
+export { useContextMenu };

package/dist/components/CopyToClipboard.js

@@ -1,11 +1,11 @@
-import { useNotify, useStrings } from "./Provider.js";
 import { FaCheck } from "../icons/fa/FaCheck.js";
 import { FaEye } from "../icons/fa/FaEye.js";
 import { FaEyeSlash } from "../icons/fa/FaEyeSlash.js";
 import { FiCopy } from "../icons/fi/FiCopy.js";
 import { HiOutlineClipboardCopy } from "../icons/hi/HiOutlineClipboardCopy.js";
-import { useState } from "react";
+import { useNotify, useStrings } from "./Provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/components/CopyToClipboard.tsx
 function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
 	const notify = useNotify();

package/dist/components/CreateModal.d.ts

@@ -1,12 +1,13 @@
 import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
-import { type HeaderAddMenuItem } from './AddMenu.js';
+import { type ComboboxItems } from './Combobox.js';
+import type { MenuEntry } from './MenuEntries.js';
 interface CreateModalProps {
     open: boolean;
     onClose: () => void;
     typeIcon?: ReactNode;
     typeLabel: string;
     /** Makes the type chip a dropdown to switch between sibling form types. */
-    typeMenu?: HeaderAddMenuItem[] | undefined;
+    typeMenu?: MenuEntry[] | undefined;
     namePlaceholder: string;
     hideName?: boolean;
     initialName?: string | undefined;
@@ -48,58 +49,38 @@ export declare function CreateModalTextarea({ label, tooltip, rows, ...props }:
     /** Help text surfaced via an info icon next to the label. */
     tooltip?: string | undefined;
 }): import("react").JSX.Element;
-/** Labeled input row with typeahead suggestions; free-form values allowed. */
-export declare function CreateModalAutocompleteField({ label, tooltip, value, onChange, options, placeholder, }: {
+/** Labeled input with suggestions; any text is allowed. */
+export declare function CreateModalAutocompleteField({ label, tooltip, value, onValueChange, items, placeholder, }: {
     label: string;
     /** Help text surfaced via an info icon next to the label. */
     tooltip?: string;
     value: string;
-    onChange: (value: string) => void;
-    options: string[];
+    onValueChange: (value: string) => void;
+    /** Suggestions, filtered by what's typed. */
+    items: string[];
     placeholder?: string;
 }): import("react").JSX.Element;
 /** Compact property pill with an on/off switch. */
-export declare function CreateModalSwitch({ label, checked, onChange, tooltip, }: {
+export declare function CreateModalSwitch({ label, checked, onCheckedChange, tooltip, }: {
     label: string;
     checked: boolean;
-    onChange: (checked: boolean) => void;
+    onCheckedChange: (checked: boolean) => void;
     /** Help text surfaced on hover (explains what the toggle does). */
     tooltip?: string;
 }): import("react").JSX.Element;
-export interface CreateModalSelectOption {
-    label: string;
-    value: string;
-    /** Small leading icon (e.g. the resource's provider icon). */
-    icon?: ReactNode;
-    /** Category header to group this option under in the dropdown. */
-    group?: string;
-    /** Hidden behind the group's toggle row until the group is expanded. */
-    collapsible?: boolean;
-    /** Always listed regardless of the typed filter (e.g. a trailing "Create new…" action). */
-    pinned?: boolean;
-    /** Muted second line under the label (e.g. the allocation a group bills to). */
-    description?: string;
-    /** Listed but not selectable (e.g. a group whose allocation is exhausted). */
-    disabled?: boolean;
-}
-/** Callers gating collapse on list size must use this same threshold so
- * collapsed rows always come with a filter to find them. */
-export declare const CREATE_MODAL_SELECT_FILTER_THRESHOLD = 8;
-/** Compact property pill with a dropdown of options. Options may carry leading
- * icons and group headers (e.g. Clusters vs Kubernetes). */
-export declare function CreateModalSelect({ label, icon, value, options, onChange, disabled, disabledHint, tooltip, collapsedLabel, }: {
+/** Compact property pill that picks one value from a searchable list. Items may carry
+ * icons, descriptions and group headings (e.g. Clusters vs Kubernetes). */
+export declare function CreateModalSelect({ label, icon, value, items, onValueChange, disabled, disabledReason, tooltip, }: {
     label: string;
     icon?: ReactNode;
     value?: string | undefined;
-    options: CreateModalSelectOption[];
-    onChange: (value: string) => void;
+    items: ComboboxItems<string>;
+    onValueChange: (value: string) => void;
     /** Gray the pill out (e.g. while a prerequisite pill is unset). */
     disabled?: boolean;
-    /** Shown as the pill's tooltip while disabled (e.g. the prerequisite). */
-    disabledHint?: string | undefined;
+    /** Why the pill is disabled, shown in place of the tooltip (e.g. the prerequisite). */
+    disabledReason?: string | undefined;
     /** Help text surfaced on hover (explains what the pill selects). */
     tooltip?: string;
-    /** Label for the toggle row hiding a group's collapsible options. */
-    collapsedLabel?: (count: number) => string;
 }): import("react").JSX.Element;
 export {};

package/dist/components/CreateModal.js

@@ -1,40 +1,21 @@
-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 { 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 +40,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 +69,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 +89,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 +102,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 +127,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 +161,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 +170,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", {
@@ -233,8 +204,8 @@ 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 })]
+			className: clsx(fieldLabelClasses, "flex items-center gap-1"),
+			children: [label, /* @__PURE__ */ jsx(InfoTip, { text: tooltip ?? "" })]
 		}), /* @__PURE__ */ jsx("input", {
 			type: "text",
 			autoComplete: "off",
@@ -249,235 +220,102 @@ 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 })]
+			className: clsx(fieldLabelClasses, "flex items-center gap-1"),
+			children: [label, /* @__PURE__ */ jsx(InfoTip, { text: 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")
+			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__ */ jsxs("div", {
+			className: clsx(fieldLabelClasses, "flex items-center gap-1"),
+			children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				children: label
+			}), tooltip && /* @__PURE__ */ jsx(InfoTip, { text: 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 = leafItems(items).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
-	})] }) });
+	});
+}
+function leafItems(items) {
+	return items.flatMap((node) => {
+		if (typeof node === "string") return [{
+			value: node,
+			label: node
+		}];
+		if ("items" in node) return leafItems(node.items);
+		return [node];
+	});
 }
 //#endregion
-export { CREATE_MODAL_SELECT_FILTER_THRESHOLD, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea };
+export { CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea };