@parallelworks/ui 0.16.0 → 0.18.0

package/dist/chunks/{PageHeader-CoZWF0pJ.js → PageHeader-l49p1nM9.js}

@@ -1,13 +1,65 @@
+import { i as useNotify, l as useSlots, n as useLink, u as useStrings } from "./Provider-Ghua9PkN.js";
 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-CbFVFB7O.js";
-import { n as TOOLTIP_ID } from "./Tooltip-n9w7Tkt1.js";
+import { n as TOOLTIP_ID } from "./Tooltip-Crxo_eU_.js";
 import cx from "classnames";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { Fragment as Fragment$1, createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { Fragment, createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+//#region src/components/Avatar.tsx
+var SIZE_CLASSES = {
+	sm: "w-6 h-6 text-xs",
+	md: "w-8 h-8 text-sm",
+	lg: "w-10 h-10 text-base",
+	xl: "w-12 h-12 text-lg",
+	"2xl": "w-16 h-16 text-xl"
+};
+var STATUS_CLASSES = {
+	online: "bg-green-500",
+	offline: "bg-(--theme-muted-text-color)",
+	busy: "bg-red-500",
+	away: "bg-yellow-500"
+};
+/** Up to two initials: the first and last word of a name split on spaces and dots. */
+function avatarInitials(name) {
+	const parts = (name ?? "").split(/[\s.]+/).filter(Boolean);
+	if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+	return parts[0]?.[0]?.toUpperCase() || "?";
+}
+function Avatar({ src, name, size = "md", status, className }) {
+	const strings = useStrings();
+	const [erroredUrl, setErroredUrl] = useState(null);
+	const showImage = !!src && erroredUrl !== src;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("relative inline-flex", className),
+		children: [showImage ? /* @__PURE__ */ jsx("img", {
+			src,
+			alt: name || strings.common.userAvatar,
+			onError: () => setErroredUrl(src),
+			className: cx("rounded-full object-cover", SIZE_CLASSES[size])
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cx("rounded-full flex items-center justify-center font-medium", "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white", SIZE_CLASSES[size]),
+			children: avatarInitials(name)
+		}), status && /* @__PURE__ */ jsx("span", {
+			"data-testid": "online-indicator",
+			className: cx("absolute bottom-0 right-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "sm" ? "w-1.5 h-1.5" : "w-2.5 h-2.5")
+		})]
+	});
+}
+//#endregion
 //#region src/components/AddMenu.tsx
 var addMenuItemClasses = "flex w-full items-center gap-2 px-3 py-1.5 text-[13px] text-(--theme-app) data-[focus]:bg-(--theme-muted-panel-bg) cursor-pointer";
+function itemButtonProps(item) {
+	if (!item.disabled) return { onClick: item.onSelect };
+	return {
+		"aria-disabled": true,
+		...item.hint ? {
+			"aria-label": `${item.label}. ${item.hint}`,
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": item.hint
+		} : {}
+	};
+}
 function AddMenu({ items, label, buttonClassName, zClassName = "z-50", children }) {
 	const Link = useLink();
 	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuButton, {
@@ -18,17 +70,19 @@ function AddMenu({ items, label, buttonClassName, zClassName = "z-50", children
 	}), /* @__PURE__ */ jsx(MenuItems, {
 		anchor: "bottom start",
 		className: cx("mt-1 min-w-52 rounded-lg border border-(--theme-border) bg-(--theme-app-bg) py-1 shadow-lg focus:outline-none", zClassName),
-		children: items.map((item) => /* @__PURE__ */ jsxs(Fragment$1, { children: [item.separatorAbove && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-(--theme-border)" }), /* @__PURE__ */ jsx(MenuItem, { children: item.to && !item.disabled ? /* @__PURE__ */ jsxs(Link, {
-			to: item.to,
-			className: addMenuItemClasses,
-			children: [item.icon, item.label]
-		}) : /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: item.onSelect,
-			disabled: item.disabled,
-			className: cx(addMenuItemClasses, item.disabled && "opacity-50 cursor-not-allowed"),
-			children: [item.icon, item.label]
-		}) })] }, item.label))
+		children: items.map((item) => /* @__PURE__ */ jsxs(Fragment, { children: [item.separatorAbove && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-(--theme-border)" }), /* @__PURE__ */ jsx(MenuItem, {
+			disabled: item.disabled ?? false,
+			children: item.to && !item.disabled ? /* @__PURE__ */ jsxs(Link, {
+				to: item.to,
+				className: addMenuItemClasses,
+				children: [item.icon, item.label]
+			}) : /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				...itemButtonProps(item),
+				className: cx(addMenuItemClasses, item.disabled && "opacity-50 cursor-not-allowed"),
+				children: [item.icon, item.label]
+			})
+		})] }, item.label))
 	})] });
 }
 //#endregion
@@ -338,12 +392,21 @@ function MenuRow({ item, onClose, side }) {
 			})]
 		});
 	}
-	if (item.kind === "link") return /* @__PURE__ */ jsxs(Link, {
-		to: item.to,
-		onClick: onClose,
-		className: cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)"),
-		children: [item.icon, item.label]
-	});
+	if (item.kind === "link") {
+		const className = cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)");
+		if (item.reloadDocument) return /* @__PURE__ */ jsxs("a", {
+			href: item.to,
+			onClick: onClose,
+			className,
+			children: [item.icon, item.label]
+		});
+		return /* @__PURE__ */ jsxs(Link, {
+			to: item.to,
+			onClick: onClose,
+			className,
+			children: [item.icon, item.label]
+		});
+	}
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		disabled: item.disabled && !item.tooltip,
@@ -369,62 +432,62 @@ function MenuRow({ item, onClose, side }) {
 		]
 	});
 }
-/** Builds the Copy submenu entries for whichever fields a row has, in stable
-* order. The menu itself performs the copy and notifies; `t` is an optional
-* host translator for the field labels (falls back to the provider defaults'
-* English). */
-function copySubmenu({ name, nameLabel, email, username, uid, id, url, extra, t }) {
-	const items = [
-		{
-			label: nameLabel ?? (t ? t("rowContextMenu.labelName") : "name"),
-			value: name,
-			icon: /* @__PURE__ */ jsx(CopyIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelEmail") : "email",
-			value: email,
-			icon: /* @__PURE__ */ jsx(MailIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelUsername") : "username",
-			value: username,
-			icon: /* @__PURE__ */ jsx(UserIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelUid") : "UID",
-			value: uid === null || uid === void 0 ? null : String(uid),
-			icon: /* @__PURE__ */ jsx(KeyIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelId") : "ID",
-			value: id,
-			icon: /* @__PURE__ */ jsx(IdCardIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelUrl") : "URL",
-			value: url,
-			icon: /* @__PURE__ */ jsx(LinkIcon, {})
-		},
-		...(extra ?? []).map((e) => ({
-			label: e.label,
-			value: e.value,
-			icon: e.icon ?? /* @__PURE__ */ jsx(CopyIcon, {})
-		}))
-	].filter((f) => f.value).map((f) => ({
-		kind: "action",
-		label: t ? t("rowContextMenu.copy", { label: f.label }) : `Copy ${f.label}`,
-		icon: f.icon,
-		copy: {
-			text: f.value,
-			label: f.label
-		}
-	}));
-	return {
-		kind: "submenu",
-		label: t ? t("common.copy") : "Copy",
-		icon: /* @__PURE__ */ jsx(ClipboardIcon, {}),
-		items
-	};
+/** Returns a builder for the Copy submenu, labeled from the provider's strings. */
+function useCopySubmenu() {
+	const { list: t } = useStrings();
+	return useCallback(({ name, nameLabel, email, username, uid, id, url, extra }) => {
+		const items = [
+			{
+				label: nameLabel ?? t.labelName,
+				value: name,
+				icon: /* @__PURE__ */ jsx(CopyIcon, {})
+			},
+			{
+				label: t.labelEmail,
+				value: email,
+				icon: /* @__PURE__ */ jsx(MailIcon, {})
+			},
+			{
+				label: t.labelUsername,
+				value: username,
+				icon: /* @__PURE__ */ jsx(UserIcon, {})
+			},
+			{
+				label: t.labelUid,
+				value: uid === null || uid === void 0 ? null : String(uid),
+				icon: /* @__PURE__ */ jsx(KeyIcon, {})
+			},
+			{
+				label: t.labelId,
+				value: id,
+				icon: /* @__PURE__ */ jsx(IdCardIcon, {})
+			},
+			{
+				label: t.labelUrl,
+				value: url,
+				icon: /* @__PURE__ */ jsx(LinkIcon, {})
+			},
+			...(extra ?? []).map((e) => ({
+				label: e.label,
+				value: e.value,
+				icon: e.icon ?? /* @__PURE__ */ jsx(CopyIcon, {})
+			}))
+		].filter((f) => f.value).map((f) => ({
+			kind: "action",
+			label: t.copy(f.label),
+			icon: f.icon,
+			copy: {
+				text: f.value,
+				label: f.label
+			}
+		}));
+		return {
+			kind: "submenu",
+			label: t.copyMenu,
+			icon: /* @__PURE__ */ jsx(ClipboardIcon, {}),
+			items
+		};
+	}, [t]);
 }
 /** Stays visible while active (menu open) so it doesn't vanish behind the overlay. */
 function MoreButton({ onOpen, active, className }) {
@@ -451,7 +514,7 @@ var headerAddButtonClasses = "inline-flex h-[26px] shrink-0 items-center gap-1.5
 function HeaderAddButton({ to, onClick, label, word = "add", menu, disabled = false, disabledHint }) {
 	const { common } = useStrings();
 	const Link = useLink();
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
 	if (menu) return /* @__PURE__ */ jsx(AddMenu, {
 		items: menu,
 		label,
@@ -493,7 +556,7 @@ function HeaderActionMenu({ items, label = "Actions" }) {
 function HeaderRowMenu({ items, label = "Actions" }) {
 	const { openMenu, contextMenu } = useRowMenu();
 	if (items.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 		type: "button",
 		"aria-label": label,
 		title: label,
@@ -548,7 +611,7 @@ function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, to, onClick, di
 		"data-tooltip-id": TOOLTIP_ID,
 		"data-tooltip-content": tooltip
 	} : {};
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
 	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
 		to,
 		className: breadcrumbsActionClasses,
@@ -588,7 +651,7 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 						className: "m-0 text-[13px] font-medium leading-none text-(--theme-app) truncate",
 						children: crumb.label
 					}, `${crumb.label}-${idx}`);
-					return /* @__PURE__ */ jsxs(Fragment$1, { children: [crumb.href ? /* @__PURE__ */ jsx(Link, {
+					return /* @__PURE__ */ jsxs(Fragment, { children: [crumb.href ? /* @__PURE__ */ jsx(Link, {
 						to: crumb.href,
 						className: "text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors cursor-pointer whitespace-nowrap",
 						children: crumb.label
@@ -624,4 +687,4 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 	});
 }
 //#endregion
-export { useSetDefaultBreadcrumbs as C, useSetBreadcrumbs as S, useRowMenuActive as _, HeaderAddButton as a, useClearBreadcrumbs as b, PageHeader as c, assembleRowMenu as d, copySubmenu as f, useRowMenu as g, toolbarActionToRowAction as h, HeaderActionMenu as i, headerActionButtonClasses as l, toRowMenuItem as m, BreadcrumbsRightAction as n, HeaderEditButton as o, rowContextMenuProps as p, BreadcrumbsTitleAction as r, HeaderRowMenu as s, BreadcrumbsActionButton as t, MoreButton as u, BreadcrumbProvider as v, AddMenu as w, useHideBreadcrumbs as x, useBreadcrumb as y };
+export { useSetDefaultBreadcrumbs as C, avatarInitials as E, useSetBreadcrumbs as S, Avatar as T, useRowMenuActive as _, HeaderAddButton as a, useClearBreadcrumbs as b, PageHeader as c, assembleRowMenu as d, rowContextMenuProps as f, useRowMenu as g, useCopySubmenu as h, HeaderActionMenu as i, headerActionButtonClasses as l, toolbarActionToRowAction as m, BreadcrumbsRightAction as n, HeaderEditButton as o, toRowMenuItem as p, BreadcrumbsTitleAction as r, HeaderRowMenu as s, BreadcrumbsActionButton as t, MoreButton as u, BreadcrumbProvider as v, AddMenu as w, useHideBreadcrumbs as x, useBreadcrumb as y };

package/dist/chunks/{Provider-CbFVFB7O.js → Provider-Ghua9PkN.js}

@@ -1,5 +1,6 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
+import { useLocalStorage } from "usehooks-ts";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Provider.tsx
 var DefaultLink = ({ to, onClick, className, children, ...rest }) => /* @__PURE__ */ jsx("a", {
 	href: to,
@@ -17,6 +18,10 @@ var defaultUseRunFile = () => ({
 	isLoading: false,
 	error: void 0
 });
+function useLocalStoragePersistedState(key, defaultValue) {
+	const [value, setValue] = useLocalStorage(key, defaultValue);
+	return [value, setValue];
+}
 var DEFAULTS = {
 	notify: {
 		info: () => {},
@@ -53,7 +58,8 @@ var DEFAULTS = {
 			showHiddenFieldsHint: "Includes fields hidden by default because they're specific to each resource, such as name and group.",
 			jsonHasErrors: "JSON has errors, please fix before saving",
 			remove: "Remove",
-			sort: "Sort"
+			sort: "Sort",
+			userAvatar: "User avatar"
 		},
 		dropdown: {
 			select: (type) => `Select ${type}`,
@@ -319,7 +325,15 @@ var DEFAULTS = {
 			readOnlyDescription: "Read-only mounts can list and download objects, but cannot upload, modify, or delete them.",
 			readOnlyForced: "Your access to this bucket is read-only, so this mount cannot be writable."
 		},
+		time: {
+			now: "now",
+			minutes: (n) => `${n}m`,
+			hours: (n) => `${n}h`,
+			days: (n) => `${n}d`,
+			years: (n) => `${n}y`
+		},
 		list: {
+			copyMenu: "Copy",
 			copy: (label) => `Copy ${label}`,
 			copied: (label) => `Copied ${label}`,
 			couldntCopy: (label) => `Couldn't copy ${label}`,
@@ -355,7 +369,7 @@ var DEFAULTS = {
 			perPage: "Per page",
 			paginationPrevious: "Previous",
 			paginationNext: "Next",
-			paginationShowing: (name, start, end) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			paginationShowing: (name, start, end) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				"Showing ",
 				name,
 				" ",
@@ -370,7 +384,7 @@ var DEFAULTS = {
 					children: end
 				})
 			] }),
-			paginationShowingTimeRange: (name, startTime, endTime) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			paginationShowingTimeRange: (name, startTime, endTime) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				"Showing ",
 				name,
 				" from ",
@@ -393,7 +407,10 @@ var DEFAULTS = {
 		toMarketItem: () => {},
 		openExternal: (href) => window.open(href, "_blank")
 	},
-	data: { useRunFile: defaultUseRunFile },
+	data: {
+		useRunFile: defaultUseRunFile,
+		usePersistedState: useLocalStoragePersistedState
+	},
 	slots: {}
 };
 var UIContext = createContext(DEFAULTS);
@@ -415,10 +432,17 @@ function useWorkflowJsonResolver() {
 function useProvisionCorsRules() {
 	return useContext(UIContext).data.provisionCorsRules;
 }
+function useRepoSuggestions() {
+	return useContext(UIContext).data.repoSuggestions;
+}
 function useRunFile(slug, path, options) {
 	const { useRunFile: boundUseRunFile } = useContext(UIContext).data;
 	return boundUseRunFile(slug, path, options);
 }
+function usePersistedState(key, defaultValue) {
+	const { usePersistedState: boundUsePersistedState } = useContext(UIContext).data;
+	return boundUsePersistedState(key, defaultValue);
+}
 function UIProvider({ notify, strings, navigation, data, slots, children }) {
 	const value = useMemo(() => ({
 		notify: {
@@ -459,6 +483,10 @@ function UIProvider({ notify, strings, navigation, data, slots, children }) {
 				...DEFAULTS.strings.form,
 				...strings?.form
 			},
+			time: {
+				...DEFAULTS.strings.time,
+				...strings?.time
+			},
 			list: {
 				...DEFAULTS.strings.list,
 				...strings?.list
@@ -486,4 +514,4 @@ function UIProvider({ notify, strings, navigation, data, slots, children }) {
 	});
 }
 //#endregion
-export { useProvisionCorsRules as a, useStrings as c, useNotify as i, useWorkflowJsonResolver as l, useLink as n, useRunFile as o, useNavigation as r, useSlots as s, UIProvider as t };
+export { usePersistedState as a, useRunFile as c, useWorkflowJsonResolver as d, useNotify as i, useSlots as l, useLink as n, useProvisionCorsRules as o, useNavigation as r, useRepoSuggestions as s, UIProvider as t, useStrings as u };

package/dist/chunks/{StatusBadge-zvEtK16a.js → StatusBadge-C1Blx_cW.js}

@@ -115,13 +115,30 @@ var pulseColors = {
 	info: "bg-blue-500",
 	muted: "bg-(--theme-muted-text-color)"
 };
-function StatusBadge({ children, variant = "default", pulse = false, size = "sm", className }) {
+var textColors = {
+	default: "text-(--theme-app)",
+	success: "text-emerald-600 dark:text-emerald-400",
+	warning: "text-amber-600 dark:text-amber-400",
+	error: "text-red-600 dark:text-red-400",
+	info: "text-blue-600 dark:text-blue-400",
+	muted: "text-(--theme-muted-text-color)"
+};
+/** A line of text in a variant's colour, for a status that stands beside a
+*  dot rather than inside a badge. */
+function statusTextClass(variant) {
+	return textColors[variant];
+}
+function StatusBadge({ children, variant = "default", pulse = false, dot = 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]
+		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]) })]
+			}),
+			dot && !pulse && /* @__PURE__ */ jsx("span", { className: cx("inline-flex h-1.5 w-1.5 rounded-full", pulseColors[variant]) }),
+			children
+		]
 	});
 }
 function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
@@ -141,4 +158,4 @@ function StatusDot({ variant = "default", pulse = false, size = 8, className })
 	});
 }
 //#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 };
+export { filterOption as a, isCategory as c, DropdownCaret as i, isOption as l, StatusDot as n, flattenDisplayOptions as o, statusTextClass as r, flattenOptions as s, StatusBadge as t, toggleSetMember as u };

package/dist/chunks/{SwitchToggle-3V836Cn7.js → SwitchToggle-CHPP8uZQ.js}

@@ -1,10 +1,10 @@
+import { u as useStrings } from "./Provider-Ghua9PkN.js";
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { c as useStrings } from "./Provider-CbFVFB7O.js";
-import { a as truncationTooltipProps, n as TOOLTIP_ID } from "./Tooltip-n9w7Tkt1.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-zvEtK16a.js";
+import { a as truncationTooltipProps, n as TOOLTIP_ID } from "./Tooltip-Crxo_eU_.js";
+import { a as filterOption, c as isCategory, i as DropdownCaret, l as isOption, o as flattenDisplayOptions, s as flattenOptions, u as toggleSetMember } from "./StatusBadge-C1Blx_cW.js";
 import cx from "classnames";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Switch, Transition } from "@headlessui/react";
 import deepEqual from "fast-deep-equal";
@@ -131,7 +131,7 @@ function ToggleOption({ option, category, expanded, onToggle, ...virtualRowProps
 		})
 	});
 }
-function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, "aria-describedby": describedBy, required, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl }) {
+function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, "aria-describedby": describedBy, required, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl, compact = false }) {
 	const DEBOUNCE_MS = 500;
 	const t = useStrings().dropdown;
 	const [query, setQuery] = useState("");
@@ -253,10 +253,11 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		allowCustomValue,
 		customValueLabel
 	]);
-	const comboOptions = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
+	const comboOptions = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
+		modal: false,
 		ref: setPopperElement,
 		style: styles["popper"],
-		className: "bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) max-h-60! empty:invisible border overflow-auto rounded-md shadow-lg focus:outline-hidden sm:text-sm z-9999 data-[popper-reference-hidden=true]:invisible data-[popper-reference-hidden=true]:pointer-events-none",
+		className: cx("bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) max-h-60! empty:invisible border overflow-auto rounded-md shadow-lg focus:outline-hidden z-9999 data-[popper-reference-hidden=true]:invisible data-[popper-reference-hidden=true]:pointer-events-none", compact ? "text-xs" : "sm:text-sm"),
 		...attributes["popper"],
 		children: ({ option }) => {
 			const optionLabel = typeof option === "string" ? option : option.label;
@@ -273,7 +274,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 			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)", isPinned && "border-t border-(--theme-border) font-medium"),
+				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : compact ? "h-8" : "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)", isPinned && "border-t border-(--theme-border) font-medium"),
 				children: /* @__PURE__ */ jsx(OptionContent, {
 					label: optionLabel,
 					description: optionDescription,
@@ -301,7 +302,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 				disabled: (option) => Boolean(option.disabled)
 			},
 			disabled,
-			children: ({ activeOption, open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: ({ activeOption, open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				onActiveChange && /* @__PURE__ */ jsx(ActiveWatcher, {
 					active: activeOption,
 					onChange: onActiveChange
@@ -368,6 +369,7 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 	const wrapperRef = useRef(null);
 	useOutsideAlerter(wrapperRef);
 	const optionsElement = /* @__PURE__ */ jsxs(ListboxOptions, {
+		modal: false,
 		static: true,
 		className: "absolute w-full py-1 z-50 theme-input rounded-md",
 		children: [allowSearch && /* @__PURE__ */ jsx("div", {
@@ -454,7 +456,7 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 			leaveFrom: "opacity-100",
 			leaveTo: "opacity-0",
 			children: optionsElement || null
-		}) : /* @__PURE__ */ jsx(Fragment, { children: controlledOpen && optionsElement })]
+		}) : /* @__PURE__ */ jsx(Fragment$1, { children: controlledOpen && optionsElement })]
 	});
 }
 //#endregion
@@ -532,7 +534,7 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 					children: loading ? /* @__PURE__ */ jsx("span", {
 						className: "theme-muted-text",
 						children: strings.loading
-					}) : selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					}) : selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 						className: "min-w-0 truncate",
 						children: display.label
 					}), display.overflow > 0 && /* @__PURE__ */ jsxs("span", {
@@ -545,6 +547,7 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 				}),
 				/* @__PURE__ */ jsx(DropdownCaret, {}),
 				open && /* @__PURE__ */ jsxs(ComboboxOptions, {
+					modal: false,
 					ref: setPopperEl,
 					static: true,
 					"data-testid": "msd-list",
@@ -627,7 +630,7 @@ function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onCli
 	}, [setOpen, onClick]);
 	const contentId = React.useId();
 	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
-	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
+	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
 		duration: 300,
 		height: open ? "auto" : 0,
 		children
@@ -689,9 +692,9 @@ function MaybeCollapsible({ className, initialState, children, title, customized
 }
 //#endregion
 //#region src/components/SectionHeader.tsx
-function SectionHeader({ children, className = "" }) {
+function SectionHeader({ children, className = "", size = "md" }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("w-full text-lg font-semibold", className),
+		className: cx("w-full font-semibold", size === "sm" ? "mb-2 text-sm theme-text" : "text-lg", className),
 		children
 	});
 }

package/dist/chunks/{Table-CutP1bRt.js → Table-4OHjdKdO.js}

@@ -1,8 +1,8 @@
-import { c as useStrings } from "./Provider-CbFVFB7O.js";
+import { u as useStrings } from "./Provider-Ghua9PkN.js";
 import { t as Loader } from "./Loader-BXoXTZGc.js";
 import cx from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Table.tsx
 function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
 	const yPadding = className?.includes("py-") ? "" : "py-4";

package/dist/chunks/{Tooltip-n9w7Tkt1.js → Tooltip-Crxo_eU_.js}

@@ -1,6 +1,6 @@
 import { TooltipIcon } from "../icons.js";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
 import { Tooltip } from "react-tooltip";
 //#region src/components/Tooltip.tsx
 var TOOLTIP_ID = "global-tooltip";
@@ -39,12 +39,12 @@ function formatLine(line) {
 function formatTooltipContent(content) {
 	if (typeof content !== "string") return content || null;
 	if (!content) return null;
-	return content.split(/<br\s*\/?>|\n/i).map((line, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, idx));
+	return content.split(/<br\s*\/?>|\n/i).map((line, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, idx));
 }
 function KbdShortcut({ keys }) {
 	return /* @__PURE__ */ jsx("span", {
 		className: "inline-flex items-center gap-1 align-middle",
-		children: keys.split("+").map((part) => part.trim()).filter(Boolean).map((part, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
+		children: keys.split("+").map((part) => part.trim()).filter(Boolean).map((part, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
 			className: "opacity-60 text-[11px]",
 			children: "+"
 		}), /* @__PURE__ */ jsx("kbd", {

package/dist/chunks/{editor-Ko3zX22Y.js → editor-9_uVtUyy.js}

@@ -1,15 +1,15 @@
+import { i as useNotify, u as useStrings } from "./Provider-Ghua9PkN.js";
 import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "./Provider-CbFVFB7O.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-CUTRDpa6.js";
+import { i as impureSetValueFromPath, r as flattenGroups, t as FieldWrapper } from "./FieldWrapper-Bef01EWO.js";
 import cx from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { convertToDynamicForm, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
 import { useField, useFormikContext } from "formik";
 //#region src/editor/Editor.tsx
-var MonacoEditor = lazy(() => import("./Monaco-BXDH2jVj.js"));
+var MonacoEditor = lazy(() => import("./Monaco-C1POOdVv.js"));
 function Editor({ ...props }) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),