@parallelworks/ui 0.5.1 → 0.5.3

package/dist/chunks/{CodePreviewEditor-KwzSyk3-.js → CodePreviewEditor-Uij_Npp4.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-DbDUZn8w.js";
+import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-4ZuZruLz.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import * as monaco from "monaco-editor";

package/dist/chunks/{CreateModal-CXSi9ELO.js → CreateModal-DEvWkdFl.js}

@@ -1,10 +1,11 @@
 import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, FavoriteIcon, FavoriteOutlineIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon, TooltipIcon } from "../icons.js";
-import { c as useStrings, i as useNotify, n as useLink } from "./Provider-wC9G01Ou.js";
+import { c as useStrings, i as useNotify } from "./Provider-BIL5347a.js";
 import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
 import { n as modalPanelClasses, t as BareModal } from "./BareModal-DBa84JZO.js";
+import { S as AddMenu } from "./PageHeader-CSo3LVId.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
 import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 //#region src/components/Callout.tsx
 function CalloutIcon({ type }) {
@@ -171,32 +172,6 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 	});
 }
 //#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 AddMenu({ items, label, buttonClassName, zClassName = "z-50", children }) {
-	const Link = useLink();
-	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuButton, {
-		"aria-label": label,
-		title: label,
-		className: buttonClassName,
-		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))
-	})] });
-}
-//#endregion
 //#region src/components/CreateModal.tsx
 /** Small info icon that surfaces field help via the global tooltip. */
 function FieldHelp({ tooltip }) {
@@ -592,4 +567,4 @@ function CreateModalSelect({ label, icon, value, options, onChange, disabled = f
 	})] }) });
 }
 //#endregion
-export { CreateModalSwitch as a, ConfirmModal as c, primaryButtonClasses as d, Markdown as f, Callout as h, CreateModalSelect as i, dangerButtonClasses as l, CopyToClipboard as m, CreateModalAutocompleteField as n, CreateModalTextarea as o, CopyCodeBlock as p, CreateModalField as r, AddMenu as s, CreateModal as t, ghostButtonClasses as u };
+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 };

package/dist/chunks/{Monaco-FlGHL7zR.js → Monaco-H1M5hQbJ.js}

@@ -1,6 +1,6 @@
-import { l as useWorkflowJsonResolver } from "./Provider-wC9G01Ou.js";
+import { l as useWorkflowJsonResolver } from "./Provider-BIL5347a.js";
 import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
-import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-DbDUZn8w.js";
+import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-4ZuZruLz.js";
 import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";

package/dist/chunks/PageHeader-CSo3LVId.js

@@ -0,0 +1,571 @@
+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-BIL5347a.js";
+import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.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 { createPortal } from "react-dom";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+//#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 AddMenu({ items, label, buttonClassName, zClassName = "z-50", children }) {
+	const Link = useLink();
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuButton, {
+		"aria-label": label,
+		title: label,
+		className: buttonClassName,
+		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))
+	})] });
+}
+//#endregion
+//#region src/components/Breadcrumbs.tsx
+var BreadcrumbContext = createContext({
+	breadcrumbs: [],
+	setBreadcrumbs: () => {},
+	rightsideBreadcrumb: null,
+	setRightsideBreadcrumb: () => {},
+	hidden: false,
+	setHidden: () => {},
+	titleActionSlot: null,
+	setTitleActionSlot: () => {},
+	rightActionSlot: null,
+	setRightActionSlot: () => {}
+});
+var useBreadcrumb = () => useContext(BreadcrumbContext);
+function BreadcrumbProvider({ children }) {
+	const [breadcrumbs, setBreadcrumbs] = React.useState([]);
+	const [rightsideBreadcrumb, setRightsideBreadcrumb] = React.useState(null);
+	const [hidden, setHidden] = React.useState(false);
+	const [titleActionSlot, setTitleActionSlot] = React.useState(null);
+	const [rightActionSlot, setRightActionSlot] = React.useState(null);
+	return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, {
+		value: {
+			breadcrumbs,
+			setBreadcrumbs,
+			rightsideBreadcrumb,
+			setRightsideBreadcrumb,
+			hidden,
+			setHidden,
+			titleActionSlot,
+			setTitleActionSlot,
+			rightActionSlot,
+			setRightActionSlot
+		},
+		children
+	});
+}
+function useSetBreadcrumbs(getBreadcrumbs) {
+	const { setBreadcrumbs } = useBreadcrumb();
+	useLayoutEffect(() => {
+		setBreadcrumbs(typeof getBreadcrumbs === "function" ? getBreadcrumbs() : getBreadcrumbs);
+	}, [getBreadcrumbs, setBreadcrumbs]);
+}
+var EMPTY_BREADCRUMBS = [];
+/** For pages that render their own header instead of the breadcrumb strip. */
+function useClearBreadcrumbs() {
+	useSetBreadcrumbs(EMPTY_BREADCRUMBS);
+}
+function useHideBreadcrumbs(hidden) {
+	const { setHidden } = useBreadcrumb();
+	useEffect(() => {
+		setHidden(hidden);
+		return () => setHidden(false);
+	}, [hidden, setHidden]);
+}
+//#endregion
+//#region src/list/RowContextMenu.tsx
+/** Converts a single row action to a menu item: a `to` makes it a link, otherwise an action. */
+function toRowMenuItem(action) {
+	if (action.to) return {
+		kind: "link",
+		label: action.label,
+		icon: action.icon,
+		to: action.to,
+		destructive: action.destructive
+	};
+	return {
+		kind: "action",
+		label: action.label,
+		icon: action.icon,
+		onSelect: action.onSelect ?? (() => {}),
+		disabled: action.disabled,
+		destructive: action.destructive
+	};
+}
+/** Bridges a toolbar action (icon component, `onClick`/`href`) onto the shared
+* `RowAction` shape. Typed structurally so any toolbar action shape matching
+* these fields is assignable. */
+function toolbarActionToRowAction(action) {
+	const Icon = action.icon;
+	return {
+		key: action.key,
+		label: action.label,
+		icon: /* @__PURE__ */ jsx(Icon, {}),
+		onSelect: action.onClick,
+		to: action.href,
+		disabled: action.disabled,
+		destructive: action.key === "delete" || action.key === "destroy"
+	};
+}
+/** Assembles a row's context menu in the shared order: leading link(s) → middle
+* actions → extra items → Copy submenu → trailing (destructive) actions last. */
+function assembleRowMenu({ lead = [], actions, exclude, order, trailing = ["delete"], extra = [], copy }) {
+	const trailingSet = new Set(trailing);
+	const excludeSet = new Set(exclude);
+	let middle = actions.filter((a) => !trailingSet.has(a.key) && !excludeSet.has(a.key));
+	if (order) {
+		const byKey = new Map(middle.map((a) => [a.key, a]));
+		middle = order.map((key) => byKey.get(key)).filter((a) => a !== void 0);
+	}
+	const trailingItems = trailing.map((key) => actions.find((a) => a.key === key)).filter((a) => a !== void 0);
+	return [
+		...lead,
+		...middle.map(toRowMenuItem),
+		...extra,
+		...copy ? [copy] : [],
+		...trailingItems.map(toRowMenuItem)
+	];
+}
+function useRowMenu() {
+	const [menu, setMenu] = useState(null);
+	const onCloseRef = useRef(void 0);
+	return {
+		openMenu: useCallback((x, y, items, onClose) => {
+			if (items.length > 0) {
+				onCloseRef.current?.();
+				onCloseRef.current = onClose;
+				setMenu({
+					x,
+					y,
+					items
+				});
+			}
+		}, []),
+		contextMenu: /* @__PURE__ */ jsx(RowContextMenu, {
+			state: menu,
+			onClose: useCallback(() => {
+				onCloseRef.current?.();
+				onCloseRef.current = void 0;
+				setMenu(null);
+			}, [])
+		})
+	};
+}
+/** The full-screen menu overlay drops CSS :hover on the triggering row; wrap openMenu here to substitute a JS-driven `active` highlight. */
+function useRowMenuActive(openMenu) {
+	const [active, setActive] = useState(false);
+	return {
+		active,
+		openMenu: useCallback((x, y, items) => {
+			setActive(true);
+			openMenu(x, y, items, () => setActive(false));
+		}, [openMenu])
+	};
+}
+function rowContextMenuProps(openMenu, items) {
+	return { onContextMenu: (e) => {
+		e.preventDefault();
+		if (items.length > 0) e.stopPropagation();
+		openMenu(e.clientX, e.clientY, items);
+	} };
+}
+function RowContextMenu({ state, onClose }) {
+	const ref = useRef(null);
+	const [pos, setPos] = useState(null);
+	useLayoutEffect(() => {
+		if (!state || !ref.current) {
+			setPos(null);
+			return;
+		}
+		const { width, height } = ref.current.getBoundingClientRect();
+		const pad = 8;
+		const top = height > window.innerHeight - pad - state.y && state.y - height - pad >= 0 ? state.y - height : Math.min(state.y, window.innerHeight - height - pad);
+		setPos({
+			left: Math.max(pad, Math.min(state.x, window.innerWidth - width - pad)),
+			top: Math.max(pad, top)
+		});
+	}, [state]);
+	useEffect(() => {
+		if (!state) return;
+		const close = () => onClose();
+		const onKey = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("scroll", close, true);
+		window.addEventListener("resize", close);
+		window.addEventListener("keydown", onKey);
+		return () => {
+			window.removeEventListener("scroll", close, true);
+			window.removeEventListener("resize", close);
+			window.removeEventListener("keydown", onKey);
+		};
+	}, [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",
+		onClick: onClose,
+		onContextMenu: (e) => {
+			e.preventDefault();
+			if (ref.current?.contains(e.target)) {
+				onClose();
+				return;
+			}
+			const { clientX, clientY } = e;
+			const overlay = e.currentTarget;
+			overlay.style.pointerEvents = "none";
+			const under = document.elementFromPoint(clientX, clientY);
+			overlay.style.pointerEvents = "";
+			onClose();
+			under?.dispatchEvent(new MouseEvent("contextmenu", {
+				bubbles: true,
+				cancelable: true,
+				clientX,
+				clientY
+			}));
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			role: "menu",
+			className: "absolute min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg backdrop-blur-xl",
+			style: {
+				left: pos?.left ?? state.x,
+				top: pos?.top ?? state.y,
+				visibility: pos ? "visible" : "hidden"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(MenuItemList, {
+				items: state.items,
+				onClose,
+				side
+			})
+		})
+	}), document.body);
+}
+var MENU_ITEM_CLASSES = "flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] hover:bg-(--theme-muted-panel-bg) transition-colors cursor-pointer [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0";
+function MenuItemList({ items, onClose, side }) {
+	return items.map((item, i) => item.kind === "divider" ? /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: "my-1 h-px bg-(--theme-border)"
+	}, `divider-${i}`) : /* @__PURE__ */ jsx(MenuRow, {
+		item,
+		onClose,
+		side
+	}, `${item.label}-${i}`));
+}
+function MenuRow({ item, onClose, side }) {
+	const Link = useLink();
+	const notify = useNotify();
+	const { list: t } = useStrings();
+	const [openSub, setOpenSub] = useState(false);
+	const closeTimer = useRef(void 0);
+	if (item.kind === "submenu") {
+		const open = () => {
+			clearTimeout(closeTimer.current);
+			setOpenSub(true);
+		};
+		const close = () => {
+			closeTimer.current = setTimeout(() => setOpenSub(false), 160);
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			onMouseEnter: open,
+			onMouseLeave: close,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cx(MENU_ITEM_CLASSES, "justify-between text-(--theme-app)"),
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2.5",
+					children: [item.icon, item.label]
+				}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 shrink-0 opacity-60" })]
+			}), openSub && /* @__PURE__ */ jsx("div", {
+				className: cx("absolute -top-1 z-10 min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg", side === "left" ? "right-full" : "left-full"),
+				children: /* @__PURE__ */ jsx(MenuItemList, {
+					items: item.items,
+					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]
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		disabled: item.disabled,
+		onClick: () => {
+			if (item.copy) {
+				const { text, label } = item.copy;
+				navigator.clipboard?.writeText(text).then(() => notify.success(t.copied(label)), () => notify.error(t.couldntCopy(label)));
+			}
+			item.onSelect?.();
+			onClose();
+		},
+		className: cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)", item.disabled && "opacity-40 cursor-not-allowed hover:bg-transparent"),
+		children: [
+			item.icon,
+			item.label,
+			item.selected && /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-80" })
+		]
+	});
+}
+/** 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
+	};
+}
+/** Stays visible while active (menu open) so it doesn't vanish behind the overlay. */
+function MoreButton({ onOpen, active, className }) {
+	const { list: t } = useStrings();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": t.moreActions,
+		onClick: (e) => {
+			e.stopPropagation();
+			const r = e.currentTarget.getBoundingClientRect();
+			onOpen(r.right, r.bottom);
+		},
+		className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:opacity-100", active ? "opacity-100" : "opacity-0 group-hover:opacity-100", className),
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "h-4 w-4" })
+	});
+}
+//#endregion
+//#region src/components/PageHeader.tsx
+var headerActionButtonClasses = "flex items-center justify-center w-6 h-6 rounded-md shrink-0 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
+var headerAddButtonClasses = "inline-flex h-[26px] shrink-0 items-center gap-1.5 rounded-md border border-(--theme-border) px-2 text-xs font-medium cursor-pointer text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
+/** With menu, the plus opens a chooser; otherwise navigates to or calls the
+* single action. `word` is the visible verb; `label` stays the full action for
+* the tooltip and screen readers. */
+function HeaderAddButton({ to, onClick, label, word = "add", menu }) {
+	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 })] });
+	if (menu) return /* @__PURE__ */ jsx(AddMenu, {
+		items: menu,
+		label,
+		buttonClassName: headerAddButtonClasses,
+		children: content
+	});
+	if (to) return /* @__PURE__ */ jsx(Link, {
+		to,
+		"aria-label": label,
+		title: label,
+		className: headerAddButtonClasses,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		"aria-label": label,
+		title: label,
+		className: headerAddButtonClasses,
+		children: content
+	});
+}
+function HeaderActionMenu({ items, label = "Actions" }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(AddMenu, {
+		items,
+		label,
+		buttonClassName: headerActionButtonClasses,
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+	});
+}
+/** The header "…" trigger for a RowMenuItem menu — same rendering (submenus,
+* destructive styling) as the list pages' right-click context menus. */
+function HeaderRowMenu({ items, label = "Actions" }) {
+	const { openMenu, contextMenu } = useRowMenu();
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		title: label,
+		className: headerActionButtonClasses,
+		onClick: (e) => {
+			const r = e.currentTarget.getBoundingClientRect();
+			openMenu(r.left, r.bottom + 4, items);
+		},
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+	}), contextMenu] });
+}
+function HeaderEditButton({ to, onClick, label = "Edit", disabled, tooltip }) {
+	const Link = useLink();
+	const tooltipProps = tooltip ? {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": tooltip
+	} : {};
+	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
+		to,
+		"aria-label": label,
+		...tooltip ? {} : { title: label },
+		className: headerActionButtonClasses,
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		disabled,
+		"aria-label": label,
+		title: tooltip ? void 0 : label,
+		className: cx(headerActionButtonClasses, disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"),
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
+	});
+}
+/** Renders nothing when the modern breadcrumb strip isn't mounted (classic chrome or self-headered pages). */
+function BreadcrumbsTitleAction({ children }) {
+	const { titleActionSlot } = useBreadcrumb();
+	if (!titleActionSlot) return null;
+	return createPortal(children, titleActionSlot);
+}
+function BreadcrumbsRightAction({ children }) {
+	const { rightActionSlot } = useBreadcrumb();
+	if (!rightActionSlot) return null;
+	return createPortal(children, rightActionSlot);
+}
+var breadcrumbsActionClasses = "flex items-center gap-1 link text-xs whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed";
+function BreadcrumbsActionButton({ icon: Icon, label, to, onClick, disabled, tooltip }) {
+	const Link = useLink();
+	const tip = tooltip ? {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": tooltip
+	} : {};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
+	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
+		to,
+		className: breadcrumbsActionClasses,
+		...tip,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		disabled,
+		className: breadcrumbsActionClasses,
+		...tip,
+		children: content
+	});
+}
+function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, className, sticky = true, stickyTopClassName = "top-0" }) {
+	const { setHidden } = useBreadcrumb();
+	const Link = useLink();
+	const { breadcrumbPin } = useSlots();
+	useLayoutEffect(() => {
+		setHidden(true);
+		return () => setHidden(false);
+	}, [setHidden]);
+	const crumbs = [...breadcrumbs ?? []];
+	const lastLabel = crumbs[crumbs.length - 1]?.label;
+	if (title !== null && title !== void 0 && title !== lastLabel) crumbs.push({ label: title });
+	const crumbRow = crumbs.length > 0 && /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5 min-w-0",
+		children: [
+			/* @__PURE__ */ jsx("nav", {
+				"aria-label": "Breadcrumb",
+				className: "flex items-center gap-2 min-w-0 text-[13px]",
+				children: crumbs.map((crumb, idx) => {
+					if (idx === crumbs.length - 1) return /* @__PURE__ */ jsx("h1", {
+						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, {
+						to: crumb.href,
+						className: "text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors cursor-pointer whitespace-nowrap",
+						children: crumb.label
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-(--theme-muted-text-color) whitespace-nowrap",
+						children: crumb.label
+					}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3 opacity-60 shrink-0 text-(--theme-muted-text-color)" })] }, `${crumb.label}-${idx}`);
+				})
+			}),
+			titleAction,
+			breadcrumbPin?.({ crumbs })
+		]
+	});
+	const actionCluster = actions && /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-1.5 shrink-0",
+		children: actions
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(sticky && cx("sticky z-20", stickyTopClassName), "w-full bg-(--theme-app-bg)", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex items-center justify-between gap-6 px-4 h-11", crumbRow && "border-b border-(--theme-border)"),
+			children: [crumbRow || /* @__PURE__ */ jsx("div", {}), actionCluster]
+		}), toolbar && /* @__PURE__ */ jsx("div", {
+			className: "px-4",
+			children: toolbar
+		})]
+	});
+}
+//#endregion
+export { AddMenu as S, BreadcrumbProvider as _, HeaderAddButton as a, useHideBreadcrumbs as b, PageHeader as c, copySubmenu as d, rowContextMenuProps as f, useRowMenuActive as g, useRowMenu as h, HeaderActionMenu as i, MoreButton as l, toolbarActionToRowAction as m, BreadcrumbsRightAction as n, HeaderEditButton as o, toRowMenuItem as p, BreadcrumbsTitleAction as r, HeaderRowMenu as s, BreadcrumbsActionButton as t, assembleRowMenu as u, useBreadcrumb as v, useSetBreadcrumbs as x, useClearBreadcrumbs as y };

package/dist/chunks/{Provider-wC9G01Ou.js → Provider-BIL5347a.js}

@@ -365,6 +365,7 @@ var DEFAULTS = {
 		}
 	},
 	navigation: {
+		goTo: (to) => window.location.assign(to),
 		toWorkflow: () => {},
 		toMarketItem: () => {},
 		openExternal: (href) => window.open(href, "_blank")

package/dist/chunks/{SwitchToggle-CkYT1isd.js → SwitchToggle-D_H1iJEe.js}

@@ -1,5 +1,5 @@
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { c as useStrings } from "./Provider-wC9G01Ou.js";
+import { c as useStrings } from "./Provider-BIL5347a.js";
 import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -156,6 +156,11 @@ function ActiveWatcher({ active, onChange }) {
 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 }) {
 	const DEBOUNCE_MS = 500;
 	const [query, setQuery] = useState("");
+	const [selectedIconWidth, setSelectedIconWidth] = useState(0);
+	const selectedIconRef = useCallback((node) => {
+		setSelectedIconWidth(node?.offsetWidth ?? 0);
+	}, []);
+	const selectedIcon = query === "" ? value?.icon : void 0;
 	const [referenceElement, setReferenceElement] = useState(null);
 	const [popperElement, setPopperElement] = useState(null);
 	const [boundaryEl, setBoundaryEl] = useState(null);
@@ -313,6 +318,11 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 					active: activeOption,
 					onChange: onActiveChange
 				}),
+				selectedIcon && /* @__PURE__ */ jsx("span", {
+					ref: selectedIconRef,
+					className: "pointer-events-none absolute inset-y-0 left-3 z-10 flex items-center",
+					children: selectedIcon
+				}, value.label),
 				/* @__PURE__ */ jsx(ComboboxInput, {
 					id,
 					"aria-label": ariaLabel || void 0,
@@ -322,6 +332,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 					onClick: () => {
 						if (!open) buttonRef.current?.click();
 					},
+					style: selectedIcon && selectedIconWidth > 0 ? { paddingLeft: selectedIconWidth + 18 } : void 0,
 					className: cx("placeholder:text-xs bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) focus:border-(--theme-element) focus:outline-none focus:ring-1 focus:ring-(--theme-element) w-full h-full text-ellipsis pr-8", "disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-input-disabled-text) disabled:cursor-not-allowed", textBoxClassName),
 					autoComplete: "off",
 					onChange: (event) => onQueryChange(event.target.value),