@parallelworks/ui 0.6.0 → 0.8.0

package/dist/chunks/{CodePreviewEditor-OkTTfzEq.js → CodePreviewEditor-hwjZof0M.js}

@@ -1,5 +1,5 @@
 import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
-import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-lOWwO2bq.js";
+import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-BH81U5-C.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import * as monaco from "monaco-editor";

package/dist/chunks/{CreateModal-CMp1jgk6.js → CreateModal-BerbApwh.js}

@@ -1,8 +1,9 @@
 import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, FavoriteIcon, FavoriteOutlineIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon, TooltipIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "./Provider-3382VBAv.js";
+import { c as useStrings, i as useNotify } from "./Provider-CfFV-vc5.js";
 import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
+import { i as filterOption, l as toggleSetMember } from "./StatusBadge-P6C2tv7Z.js";
 import { n as modalPanelClasses, t as BareModal } from "./BareModal-DBa84JZO.js";
-import { S as AddMenu } from "./PageHeader-Dz4A_w6J.js";
+import { S as AddMenu } from "./PageHeader-8xP84_KS.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
@@ -462,19 +463,55 @@ function CreateModalSwitch({ label, checked, onChange, tooltip }) {
 		})
 	});
 }
-function buildOptionNodes(options, query, onChange) {
-	const normalize = (s) => s.toLowerCase().replace(/-/g, "");
-	const q = normalize(query.trim());
-	const filtered = q ? options.filter((o) => normalize(o.label).includes(q)) : options;
+/** 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 ? ChevronDownIcon : ChevronRightIcon, { 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) => 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) {
-		if (option.group && option.group !== lastGroup) {
-			lastGroup = option.group;
+		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: option.group
-			}, `group-${option.group}`));
+				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, { children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
@@ -485,21 +522,30 @@ function buildOptionNodes(options, query, onChange) {
 	}
 	return nodes;
 }
-function CreateModalSelectPanel({ open, options, label, onChange }) {
+function CreateModalSelectPanel({ open, options, label, value, collapsedLabel, onChange }) {
 	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("");
-			return;
+			setExpandedGroups(initialExpandedGroups());
 		}
-		if (!showFilter) return;
+	}, [open, initialExpandedGroups]);
+	useEffect(() => {
+		if (!open || !showFilter) return;
 		const raf = requestAnimationFrame(() => inputRef.current?.focus());
 		return () => cancelAnimationFrame(raf);
 	}, [open, showFilter]);
-	const rendered = buildOptionNodes(options, query, onChange);
+	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 min-w-44 [--anchor-max-height:16rem] overflow-auto rounded-lg border border-(--theme-border) bg-(--theme-app-bg) shadow-lg focus:outline-none",
@@ -530,7 +576,7 @@ function CreateModalSelectPanel({ open, options, label, onChange }) {
 }
 /** 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 }) {
+function CreateModalSelect({ label, icon, value, options, onChange, disabled = false, disabledHint, tooltip, collapsedLabel }) {
 	const selected = options.find((o) => o.value === value);
 	const pillContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		selected?.icon ?? icon,
@@ -563,8 +609,10 @@ function CreateModalSelect({ label, icon, value, options, onChange, disabled = f
 		open,
 		options,
 		label,
+		value,
+		collapsedLabel,
 		onChange
 	})] }) });
 }
 //#endregion
-export { CreateModalSwitch as a, dangerButtonClasses as c, Markdown as d, CopyCodeBlock as f, CreateModalSelect as i, ghostButtonClasses as l, Callout as m, CreateModalAutocompleteField as n, CreateModalTextarea as o, CopyToClipboard as p, CreateModalField as r, ConfirmModal as s, CreateModal as t, primaryButtonClasses as u };
+export { CreateModalSelect as a, ConfirmModal as c, primaryButtonClasses as d, Markdown as f, Callout as h, CreateModalField as i, dangerButtonClasses as l, CopyToClipboard as m, CreateModal as n, CreateModalSwitch as o, CopyCodeBlock as p, CreateModalAutocompleteField as r, CreateModalTextarea as s, CREATE_MODAL_SELECT_FILTER_THRESHOLD as t, ghostButtonClasses as u };

package/dist/chunks/{Monaco-BuhN8wP_.js → Monaco-DCwRDrPm.js}

@@ -1,6 +1,6 @@
-import { l as useWorkflowJsonResolver } from "./Provider-3382VBAv.js";
+import { l as useWorkflowJsonResolver } from "./Provider-CfFV-vc5.js";
 import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
-import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-lOWwO2bq.js";
+import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-BH81U5-C.js";
 import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";

package/dist/chunks/{PageHeader-Dz4A_w6J.js → PageHeader-8xP84_KS.js}

@@ -1,5 +1,5 @@
 import { AddIcon, CheckIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, EditIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, UserIcon } from "../icons.js";
-import { c as useStrings, i as useNotify, n as useLink, s as useSlots } from "./Provider-3382VBAv.js";
+import { c as useStrings, i as useNotify, n as useLink, s as useSlots } from "./Provider-CfFV-vc5.js";
 import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -140,7 +140,7 @@ function assembleRowMenu({ lead = [], actions, exclude, order, trailing = ["dele
 		...trailingItems.map(toRowMenuItem)
 	];
 }
-function useRowMenu() {
+function useRowMenu(zClassName = "z-50") {
 	const [menu, setMenu] = useState(null);
 	const onCloseRef = useRef(void 0);
 	return {
@@ -161,7 +161,8 @@ function useRowMenu() {
 				onCloseRef.current?.();
 				onCloseRef.current = void 0;
 				setMenu(null);
-			}, [])
+			}, []),
+			zClassName
 		})
 	};
 }
@@ -183,7 +184,7 @@ function rowContextMenuProps(openMenu, items) {
 		openMenu(e.clientX, e.clientY, items);
 	} };
 }
-function RowContextMenu({ state, onClose }) {
+function RowContextMenu({ state, onClose, zClassName }) {
 	const ref = useRef(null);
 	const [pos, setPos] = useState(null);
 	useLayoutEffect(() => {
@@ -217,7 +218,7 @@ function RowContextMenu({ state, onClose }) {
 	if (!state) return null;
 	const side = (pos?.left ?? state.x) > window.innerWidth * .6 ? "left" : "right";
 	return createPortal(/* @__PURE__ */ jsx("div", {
-		className: "fixed inset-0 z-50",
+		className: cx("fixed inset-0", zClassName),
 		onClick: onClose,
 		onContextMenu: (e) => {
 			e.preventDefault();

package/dist/chunks/{Provider-3382VBAv.js → Provider-CfFV-vc5.js}

@@ -346,6 +346,7 @@ var DEFAULTS = {
 			filter: "Filter",
 			clear: "Clear",
 			pager: (start, end, total) => `${start}–${end} of ${total}`,
+			perPage: "Per page",
 			paginationPrevious: "Previous",
 			paginationNext: "Next",
 			paginationShowing: (name, start, end) => /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/chunks/StatusBadge-P6C2tv7Z.js

@@ -0,0 +1,144 @@
+import { CaretDownIcon } from "../icons.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dropdownUtils.tsx
+function isCategory(option) {
+	return typeof option === "object" && option !== null && option !== void 0 && "options" in option;
+}
+function isOption(option) {
+	return typeof option === "object" && "label" in option && "value" in option && !("category" in option);
+}
+function normalizeOption(option) {
+	if (typeof option === "string") return {
+		label: option,
+		value: option
+	};
+	if (typeof option === "object" && option !== null && option !== void 0 && "options" in option) return {
+		category: option.category,
+		options: Array.isArray(option.options) ? option.options : []
+	};
+	return option;
+}
+function flattenOptions(options) {
+	const result = [];
+	for (const opt of options) {
+		const normalized = normalizeOption(opt);
+		if (isCategory(normalized)) {
+			const children = Array.isArray(normalized.options) ? normalized.options : [];
+			result.push(normalized);
+			result.push(...children);
+		} else result.push(normalized);
+	}
+	return result;
+}
+function filterOption(option, query) {
+	if (query === "") return true;
+	const q = String(query ?? "").toLowerCase().replace(/(-)/gm, "");
+	const label = String(option.label ?? "").toLowerCase().replace(/(-)/gm, "");
+	const secondary = option.secondaryValue !== void 0 ? String(option.secondaryValue).toLowerCase().replace(/(-)/gm, "") : "";
+	return label.includes(q) || secondary.includes(q);
+}
+function toggleSetMember(set, member) {
+	const next = new Set(set);
+	if (next.has(member)) next.delete(member);
+	else next.add(member);
+	return next;
+}
+function collapsedCategoryRows(category, filtered, collapsibleCount, expanded, collapsedLabel) {
+	const rows = [];
+	let togglePlaced = false;
+	for (const opt of filtered) {
+		if (!opt.collapsible) {
+			rows.push(opt);
+			continue;
+		}
+		if (!togglePlaced) {
+			togglePlaced = true;
+			rows.push({
+				label: collapsedLabel(collapsibleCount),
+				value: `__toggle__:${category}`,
+				disabled: true,
+				toggle: category
+			});
+		}
+		if (expanded) rows.push(opt);
+	}
+	return rows;
+}
+function flattenDisplayOptions({ options, query, expandedCategories, collapsedLabel, selectedValue, allowCustomValue, customValueLabel }) {
+	const flatOptions = options.flatMap((option) => {
+		if (!isCategory(option)) return filterOption(option, query) ? [option] : [];
+		const filtered = option.options.filter((opt) => filterOption(opt, query));
+		if (filtered.length === 0) return [];
+		const category = option.category || "";
+		const header = {
+			label: category,
+			value: category,
+			disabled: true,
+			category: true
+		};
+		const collapsibleCount = filtered.filter((o) => o.collapsible).length;
+		if (query || collapsibleCount === 0 || !collapsedLabel) return [header, ...filtered];
+		return [header, ...collapsedCategoryRows(category, filtered, collapsibleCount, expandedCategories?.has(category) ?? false, collapsedLabel)];
+	});
+	if (allowCustomValue) {
+		const customValue = query || selectedValue || "";
+		flatOptions.unshift({
+			label: `${customValueLabel} "${customValue}"`,
+			value: customValue
+		});
+	} else if (flatOptions.length === 0) return [{
+		label: "No options found",
+		value: "",
+		disabled: true
+	}];
+	return flatOptions;
+}
+function DropdownCaret() {
+	return /* @__PURE__ */ jsx(CaretDownIcon, { className: "text-neutral-400 absolute top-1/2 -translate-y-1/2 right-0 mr-3 inset-y-0 flex items-center rounded-r-md focus:outline-hidden" });
+}
+//#endregion
+//#region src/components/StatusBadge.tsx
+var variantStyles = {
+	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
+	success: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
+	warning: "bg-amber-500/10 text-amber-500 border-amber-500/20",
+	error: "bg-red-500/10 text-red-500 border-red-500/20",
+	info: "bg-blue-500/10 text-blue-500 border-blue-500/20",
+	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
+};
+var pulseColors = {
+	default: "bg-(--theme-app)",
+	success: "bg-emerald-500",
+	warning: "bg-amber-500",
+	error: "bg-red-500",
+	info: "bg-blue-500",
+	muted: "bg-(--theme-muted-text-color)"
+};
+function StatusBadge({ children, variant = "default", pulse = false, size = "sm", className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
+		children: [pulse && /* @__PURE__ */ jsxs("span", {
+			className: "relative flex h-2 w-2",
+			children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
+		}), children]
+	});
+}
+function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("relative inline-flex", className),
+		style: {
+			width: size,
+			height: size
+		},
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
+			className: cx("relative inline-flex rounded-full", pulseColors[variant]),
+			style: {
+				width: size,
+				height: size
+			}
+		})]
+	});
+}
+//#endregion
+export { flattenDisplayOptions as a, isOption as c, filterOption as i, toggleSetMember as l, StatusDot as n, flattenOptions as o, DropdownCaret as r, isCategory as s, StatusBadge as t };

package/dist/chunks/{SwitchToggle-5mh-IxL0.js → SwitchToggle-ByKNCE2m.js}

@@ -1,6 +1,7 @@
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { c as useStrings } from "./Provider-3382VBAv.js";
+import { c as useStrings } from "./Provider-CfFV-vc5.js";
 import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
+import { a as flattenDisplayOptions, c as isOption, i as filterOption, l as toggleSetMember, o as flattenOptions, r as DropdownCaret, s as isCategory } from "./StatusBadge-P6C2tv7Z.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -9,76 +10,8 @@ import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOption
 import deepEqual from "fast-deep-equal";
 import { usePopper } from "react-popper";
 import AnimateHeight from "react-animate-height";
-//#region src/components/dropdownUtils.tsx
-function isCategory(option) {
-	return typeof option === "object" && option !== null && option !== void 0 && "options" in option;
-}
-function isOption(option) {
-	return typeof option === "object" && "label" in option && "value" in option && !("category" in option);
-}
-function normalizeOption(option) {
-	if (typeof option === "string") return {
-		label: option,
-		value: option
-	};
-	if (typeof option === "object" && option !== null && option !== void 0 && "options" in option) return {
-		category: option.category,
-		options: Array.isArray(option.options) ? option.options : []
-	};
-	return option;
-}
-function flattenOptions(options) {
-	const result = [];
-	for (const opt of options) {
-		const normalized = normalizeOption(opt);
-		if (isCategory(normalized)) {
-			const children = Array.isArray(normalized.options) ? normalized.options : [];
-			result.push(normalized);
-			result.push(...children);
-		} else result.push(normalized);
-	}
-	return result;
-}
-function filterOption(option, query) {
-	if (query === "") return true;
-	const q = String(query ?? "").toLowerCase().replace(/(-)/gm, "");
-	const label = String(option.label ?? "").toLowerCase().replace(/(-)/gm, "");
-	const secondary = option.secondaryValue !== void 0 ? String(option.secondaryValue).toLowerCase().replace(/(-)/gm, "") : "";
-	return label.includes(q) || secondary.includes(q);
-}
-function flattenFilteredOptions({ options, query, selectedValue, allowCustomValue, customValueLabel }) {
-	const flatOptions = options.flatMap((option) => {
-		if (isCategory(option)) {
-			const filteredOptions = option.options.filter((opt) => filterOption(opt, query));
-			if (filteredOptions.length === 0) return [];
-			return [{
-				label: option.category || "",
-				value: option.category || "",
-				disabled: true,
-				category: true
-			}, ...filteredOptions];
-		}
-		if (filterOption(option, query)) return option;
-		return [];
-	});
-	if (allowCustomValue) {
-		const customValue = query || selectedValue || "";
-		flatOptions.unshift({
-			label: `${customValueLabel} "${customValue}"`,
-			value: customValue
-		});
-	} else if (flatOptions.length === 0) return [{
-		label: "No options found",
-		value: "",
-		disabled: true
-	}];
-	return flatOptions;
-}
-function DropdownCaret() {
-	return /* @__PURE__ */ jsx(CaretDownIcon, { className: "text-neutral-400 absolute top-1/2 -translate-y-1/2 right-0 mr-3 inset-y-0 flex items-center rounded-r-md focus:outline-hidden" });
-}
-//#endregion
 //#region src/components/Dropdown.tsx
+var defaultCollapsedLabel = (count) => `${count} more`;
 var checkEquals = (val, opt) => {
 	if (typeof val === "object" && !Array.isArray(val)) return deepEqual(val, opt);
 	return val === opt;
@@ -153,7 +86,51 @@ function ActiveWatcher({ active, onChange }) {
 	}, [active, onChange]);
 	return null;
 }
-function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", portalEl }) {
+function OptionContent({ label, description, icon }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("flex gap-1.5", description ? "items-start min-w-0" : "items-center truncate"),
+		"data-tooltip-id": TOOLTIP_ID,
+		onMouseEnter: (e) => {
+			const inner = e.currentTarget.lastElementChild;
+			if (inner && inner.scrollWidth > inner.clientWidth) e.currentTarget.setAttribute("data-tooltip-content", label);
+			else e.currentTarget.removeAttribute("data-tooltip-content");
+		},
+		children: [icon, description ? /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col min-w-0",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-(--theme-muted-text-color) text-xs leading-snug",
+				children: description
+			})]
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: label
+		})]
+	});
+}
+function ToggleOption({ option, category, expanded, onToggle, ...virtualRowProps }) {
+	return /* @__PURE__ */ jsx(ComboboxOption, {
+		...virtualRowProps,
+		"data-testid": "combobox-toggle",
+		value: option,
+		className: "w-full h-10 flex items-center pl-3",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": expanded,
+			className: "flex items-center gap-1.5 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app)",
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				onToggle(category);
+			},
+			children: [/* @__PURE__ */ jsx(CaretDownIcon, { className: cx("w-3 h-3", !expanded && "-rotate-90") }), option.label]
+		})
+	});
+}
+function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl }) {
 	const DEBOUNCE_MS = 500;
 	const [query, setQuery] = useState("");
 	const [selectedIconWidth, setSelectedIconWidth] = useState(0);
@@ -215,6 +192,15 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 	});
 	const debounceRef = useRef(null);
 	const buttonRef = useRef(null);
+	const [expandedCategories, setExpandedCategories] = useState(/* @__PURE__ */ new Set());
+	const selectedCategory = useMemo(() => options.find((o) => isCategory(o) && o.options.some((opt) => checkEquals(value.value, opt.value)))?.category, [options, value]);
+	const lastAutoExpandedValue = useRef(void 0);
+	useEffect(() => {
+		if (!selectedCategory || checkEquals(lastAutoExpandedValue.current, value.value)) return;
+		lastAutoExpandedValue.current = value.value;
+		setExpandedCategories((prev) => prev.size === 1 && prev.has(selectedCategory) ? prev : new Set([selectedCategory]));
+	}, [selectedCategory, value]);
+	const toggleCategory = (category) => setExpandedCategories((prev) => toggleSetMember(prev, category));
 	const flushCustomValue = useCallback((val) => {
 		onChange({
 			label: val,
@@ -246,15 +232,19 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		}
 		onChange(val);
 	};
-	const flattenedOptions = useMemo(() => flattenFilteredOptions({
+	const flattenedOptions = useMemo(() => flattenDisplayOptions({
 		options,
 		query,
+		expandedCategories,
+		collapsedLabel,
 		selectedValue: value?.value,
 		allowCustomValue,
 		customValueLabel
 	}), [
 		options,
 		query,
+		expandedCategories,
+		collapsedLabel,
 		value,
 		allowCustomValue,
 		customValueLabel
@@ -268,31 +258,21 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 			const optionLabel = typeof option === "string" ? option : option.label;
 			const optionDescription = typeof option !== "string" ? option.description : void 0;
 			const isCategoryRow = typeof option !== "string" && Boolean(option.category);
+			const toggleTarget = typeof option !== "string" ? option.toggle : void 0;
+			if (toggleTarget !== void 0) return /* @__PURE__ */ jsx(ToggleOption, {
+				option,
+				category: toggleTarget,
+				expanded: expandedCategories.has(toggleTarget),
+				onToggle: toggleCategory
+			});
 			return /* @__PURE__ */ jsx(ComboboxOption, {
 				"data-testid": "combobox-option",
 				value: option,
 				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : "h-10", isCategoryRow ? "text-[14px] font-bold pl-1 items-center" : "data-disabled:text-(--theme-muted-text-color) data-disabled:bg-(--theme-muted-panel-bg) data-disabled:cursor-not-allowed cursor-pointer items-center pr-9 pl-3 leading-5 data-focus:bg-(--theme-muted-panel-bg) data-focus:text-(--theme-app) data-focus:outline-hidden", "data-selected:border-l-2 data-selected:border-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-app)"),
-				children: /* @__PURE__ */ jsxs("span", {
-					className: cx("flex gap-1.5", optionDescription ? "items-start min-w-0" : "items-center truncate"),
-					"data-tooltip-id": TOOLTIP_ID,
-					onMouseEnter: (e) => {
-						const inner = e.currentTarget.lastElementChild;
-						if (inner && inner.scrollWidth > inner.clientWidth) e.currentTarget.setAttribute("data-tooltip-content", optionLabel);
-						else e.currentTarget.removeAttribute("data-tooltip-content");
-					},
-					children: [typeof option !== "string" && option.icon, optionDescription ? /* @__PURE__ */ jsxs("span", {
-						className: "flex flex-col min-w-0",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: optionLabel
-						}), /* @__PURE__ */ jsx("span", {
-							className: "text-(--theme-muted-text-color) text-xs leading-snug",
-							children: optionDescription
-						})]
-					}) : /* @__PURE__ */ jsx("span", {
-						className: "truncate",
-						children: optionLabel
-					})]
+				children: /* @__PURE__ */ jsx(OptionContent, {
+					label: optionLabel,
+					description: optionDescription,
+					icon: typeof option !== "string" && option.icon
 				})
 			});
 		}
@@ -306,7 +286,10 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 			by: checkEquals,
 			value,
 			onChange: onComboboxChange,
-			onClose: () => setQuery(""),
+			onClose: () => {
+				setQuery("");
+				setExpandedCategories(new Set(selectedCategory ? [selectedCategory] : []));
+			},
 			immediate: true,
 			virtual: {
 				options: flattenedOptions,
@@ -740,4 +723,4 @@ function SwitchToggle({ onChange, value = void 0, yesLabel = "Yes", noLabel = "N
 	});
 }
 //#endregion
-export { UncontrolledCollapsiblePanel as a, Dropdown as c, flattenOptions as d, isCategory as f, MaybeCollapsible as i, DropdownCaret as l, SectionHeader as n, MultiSelectDropdown as o, isOption as p, ControlledCollapsiblePanel as r, CustomListbox as s, SwitchToggle as t, filterOption as u };
+export { UncontrolledCollapsiblePanel as a, Dropdown as c, MaybeCollapsible as i, SectionHeader as n, MultiSelectDropdown as o, ControlledCollapsiblePanel as r, CustomListbox as s, SwitchToggle as t };

package/dist/chunks/{editor-lOWwO2bq.js → editor-BH81U5-C.js}

@@ -1,5 +1,5 @@
 import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "./Provider-3382VBAv.js";
+import { c as useStrings, i as useNotify } from "./Provider-CfFV-vc5.js";
 import { t as Loader } from "./Loader-BXoXTZGc.js";
 import { t as SwitchToggleSmall } from "./SwitchToggleSmall-FcsaYSTs.js";
 import { c as FieldWrapper, n as flattenGroups, r as impureSetValueFromPath } from "./lib-DTgL8klR.js";
@@ -9,7 +9,7 @@ import { Suspense, lazy, useMemo, useRef, useState } from "react";
 import { convertToDynamicForm, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
 import { useField, useFormikContext } from "formik";
 //#region src/editor/Editor.tsx
-var MonacoEditor = lazy(() => import("./Monaco-BuhN8wP_.js"));
+var MonacoEditor = lazy(() => import("./Monaco-DCwRDrPm.js"));
 function Editor({ ...props }) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),

package/dist/chunks/{list-BYOpsubM.js → list-BBAOphWm.js}

@@ -1,7 +1,7 @@
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, DisplayIcon, ErrorIcon, FilterIcon, MenuIcon, SearchIcon, XIcon } from "../icons.js";
-import { c as useStrings, n as useLink, r as useNavigation } from "./Provider-3382VBAv.js";
+import { c as useStrings, n as useLink, r as useNavigation } from "./Provider-CfFV-vc5.js";
 import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-WgbiC_nd.js";
-import { c as PageHeader, f as rowContextMenuProps, g as useRowMenuActive, l as MoreButton } from "./PageHeader-Dz4A_w6J.js";
+import { c as PageHeader, f as rowContextMenuProps, g as useRowMenuActive, l as MoreButton } from "./PageHeader-8xP84_KS.js";
 import { n as Table } from "./Table-ByziK93x.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1154,18 +1154,37 @@ function ListCount({ total, matches, filterActive, noun, nounPlural }) {
 }
 //#endregion
 //#region src/list/ListPager.tsx
+/** Page sizes offered by the pager's per-page select; first entry is the default. */
+var LIST_PAGE_SIZES = [
+	50,
+	100,
+	200
+];
 /** Footer pager bar for paginated new-nav lists: "{start}–{end} of {total}" with prev/next. Renders nothing for a single page. */
-function ListPager({ page, pageSize, total, onPageChange }) {
+function ListPager({ page, pageSize, total, onPageChange, pageSizes = LIST_PAGE_SIZES, onPageSizeChange }) {
 	const t = useStrings().list;
 	const pageCount = Math.max(1, Math.ceil(total / pageSize));
 	const start = page * pageSize + 1;
 	const end = Math.min(total, (page + 1) * pageSize);
-	if (pageCount <= 1) return null;
+	const smallest = Math.min(...pageSizes);
+	const showSizeSelect = !!onPageSizeChange && (total > smallest || pageSize > smallest);
+	if (pageCount <= 1 && !showSizeSelect) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center justify-between px-2.5 h-10 shrink-0 border-t theme-border",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-xs text-(--theme-muted-text-color)",
-			children: t.pager(start, end, total)
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 text-xs text-(--theme-muted-text-color)",
+			children: [/* @__PURE__ */ jsx("span", { children: t.pager(start, end, total) }), showSizeSelect && /* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-1",
+				children: [t.perPage, /* @__PURE__ */ jsx("select", {
+					value: pageSize,
+					onChange: (e) => onPageSizeChange(Number(e.target.value)),
+					className: "theme-input rounded px-1.5 py-0.5 text-xs",
+					children: pageSizes.map((size) => /* @__PURE__ */ jsx("option", {
+						value: size,
+						children: size
+					}, size))
+				})]
+			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1",
 			children: [/* @__PURE__ */ jsx("button", {
@@ -1250,4 +1269,4 @@ function HoverCardSurface({ x, y, widthClassName, relayoutKey, onKeepOpen, onLea
 	}), document.querySelector(".ds-root") ?? document.body);
 }
 //#endregion
-export { ToolbarButton as A, NAME_MIN_WIDTH_PX as C, listTableFixedProps as D, actionsColumnWidth as E, stickyTabsUnderHeaderClasses as M, stickyToolbarClasses as N, listTableProps as O, ListSkeleton as S, RowSelectCheckbox as T, ListRowActionsProvider as _, ListSearchControl as a, ListActionsHeader as b, ListFilterMenu as c, DEFAULT_ORDER as d, FAVORITE_ORDER as f, ListRow as g, ListPage as h, ListCount as i, stickyTabsClasses as j, ActionToolbar as k, listControlButtonClasses as l, ListColumns as m, useHoverCard as n, useListSearch as o, useListView as p, ListPager as r, ListDisplayMenu as s, HoverCardSurface as t, isTextEntryContext as u, useListNavigate as v, NameCell as w, ListError as x, GroupRow as y };
+export { ActionToolbar as A, ListSkeleton as C, actionsColumnWidth as D, RowSelectCheckbox as E, stickyTabsClasses as M, stickyTabsUnderHeaderClasses as N, listTableFixedProps as O, stickyToolbarClasses as P, ListError as S, NameCell as T, ListRow as _, ListCount as a, GroupRow as b, ListDisplayMenu as c, isTextEntryContext as d, DEFAULT_ORDER as f, ListPage as g, ListColumns as h, ListPager as i, ToolbarButton as j, listTableProps as k, ListFilterMenu as l, useListView as m, useHoverCard as n, ListSearchControl as o, FAVORITE_ORDER as p, LIST_PAGE_SIZES as r, useListSearch as s, HoverCardSurface as t, listControlButtonClasses as u, ListRowActionsProvider as v, NAME_MIN_WIDTH_PX as w, ListActionsHeader as x, useListNavigate as y };