@parallelworks/ui 0.18.0 → 0.19.0

package/dist/chunks/{CodePreviewEditor-4lx3kE-w.js → CodePreviewEditor-YqQBz1YL.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-9_uVtUyy.js";
+import { a as getThemeName, i as defineEditorThemes, r as setupMonacoWorkers } from "./editor-Dk1rbV75.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as monaco from "monaco-editor";

package/dist/chunks/ConfirmModal-aOR4O1QE.js

@@ -0,0 +1,79 @@
+import { u as useStrings } from "./Provider-CDYurraE.js";
+import { n as modalPanelClasses, t as BareModal } from "./BareModal-BtRiQezg.js";
+import cx from "classnames";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ghostButton.ts
+var ghostButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-8 px-3 rounded-md text-sm text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
+var primaryButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-(--theme-element) text-(--theme-element-text) hover:opacity-90 transition-opacity";
+/** Filled destructive button for confirming irreversible actions in ds modals. */
+var dangerButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-red-600 text-white hover:bg-red-700 transition-colors";
+//#endregion
+//#region src/components/ConfirmModal.tsx
+function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
+	const strings = useStrings();
+	const [pending, setPending] = useState(false);
+	const firedRef = useRef(false);
+	useEffect(() => {
+		if (open) firedRef.current = false;
+	}, [open]);
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+	const runConfirm = useCallback(async () => {
+		if (firedRef.current) return;
+		firedRef.current = true;
+		setPending(true);
+		try {
+			await onConfirm();
+			if (closeOnConfirm) onCloseRef.current();
+			else firedRef.current = false;
+		} catch (error) {
+			firedRef.current = false;
+			throw error;
+		} finally {
+			setPending(false);
+		}
+	}, [onConfirm, closeOnConfirm]);
+	return /* @__PURE__ */ jsxs(BareModal, {
+		open,
+		onClose,
+		ariaLabel: title,
+		align,
+		preventClose: pending,
+		className: cx(modalPanelClasses, "w-[480px] max-w-full"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "px-5 pt-5",
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold text-(--theme-app)",
+					children: title
+				}),
+				description !== null && description !== void 0 && /* @__PURE__ */ jsx("p", {
+					className: "mt-1.5 text-sm text-(--theme-muted-text-color)",
+					children: description
+				}),
+				children !== null && children !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: "mt-4",
+					children
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-5 flex items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onClose,
+				disabled: pending,
+				className: cx(ghostButtonClasses, pending && "cursor-wait"),
+				children: cancelLabel ?? strings.modal.cancel
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: runConfirm,
+				disabled: confirmDisabled || pending,
+				className: cx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
+				children: confirmLabel
+			})]
+		})]
+	});
+}
+//#endregion
+export { primaryButtonClasses as i, dangerButtonClasses as n, ghostButtonClasses as r, ConfirmModal as t };

package/dist/chunks/{FieldWrapper-Bef01EWO.js → FieldWrapper-Cszwg-4B.js}

@@ -122,7 +122,7 @@ function impureSetValueFromPath(obj, path, value) {
 	}
 	current[pathArray[pathArray.length - 1]] = value;
 }
-function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
+function initializeValues(options, srcData = {}, blankDefault) {
 	if (!options || typeof options !== "object") return;
 	const schema = options;
 	const source = srcData;
@@ -168,7 +168,7 @@ function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
 			if ((fieldSchema.type === "dropdown" || fieldSchema.type === "storage") && fieldSchema.secondaryField && fieldSchema.options && Array.isArray(fieldSchema.options)) {
 				const option = findSecondaryOption(fieldSchema.options, data[field]);
 				applySecondaryField(fieldSchema.secondaryField, option?.secondaryValue, (secondaryField, secondaryValue) => {
-					if (!(fieldSchema.type === "storage" && Object.prototype.hasOwnProperty.call(options, secondaryField) && source[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
+					if (!(fieldSchema.type === "storage" && Object.hasOwn(options, secondaryField) && source[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
 				});
 			}
 			return acc;
@@ -195,11 +195,7 @@ function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
 			}
 		}
 		if (fieldSchema.type === "multi-dropdown" || fieldSchema.type === "checkbox-group") acc[field] = [];
-		if (fieldSchema.default !== void 0) {
-			const dflt = fieldSchema.default;
-			const isPwResource = typeof dflt === "string" && dflt.startsWith("pw://");
-			acc[field] = fieldSchema.type === "string" || ignoreDefaultStrings && !isPwResource && (fieldSchema.type === "textarea" || fieldSchema.type === "compute-clusters" || fieldSchema.type === "compute-resources") ? "" : dflt;
-		}
+		if (fieldSchema.default !== void 0) acc[field] = fieldSchema.type === "string" || blankDefault?.(fieldSchema) ? "" : fieldSchema.default;
 		if (fieldSchema.prefillDefault && fieldSchema.default !== void 0) acc[field] = fieldSchema.default;
 		return acc;
 	}, data);

package/dist/chunks/{CreateModal-BY6DLmur.js → Markdown-CM-FenNE.js}

@@ -1,13 +1,14 @@
-import { i as useNotify, u as useStrings } from "./Provider-Ghua9PkN.js";
-import { w as AddMenu } from "./PageHeader-l49p1nM9.js";
+import { i as useNotify, u as useStrings } from "./Provider-CDYurraE.js";
 import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, FavoriteIcon, FavoriteOutlineIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon, TooltipIcon } from "../icons.js";
-import { n as TOOLTIP_ID } from "./Tooltip-Crxo_eU_.js";
-import { a as filterOption, u as toggleSetMember } from "./StatusBadge-C1Blx_cW.js";
+import { n as TOOLTIP_ID } from "./Tooltip-K5HJr4_p.js";
+import { E as AddMenu } from "./PageHeader-0kG_iypP.js";
 import { n as modalPanelClasses, t as BareModal } from "./BareModal-BtRiQezg.js";
+import { r as ghostButtonClasses } from "./ConfirmModal-aOR4O1QE.js";
+import { a as filterOption, u as toggleSetMember } from "./StatusBadge-C1Blx_cW.js";
+import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import cx from "classnames";
 import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 //#region src/components/Callout.tsx
 function CalloutIcon({ type }) {
 	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(AlertIcon, { className: "h-6 w-6 mr-4 text-lg" });
@@ -103,91 +104,6 @@ function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = fals
 	});
 }
 //#endregion
-//#region src/components/Markdown.tsx
-var MarkdownImpl = lazy(() => import("./MarkdownImpl-Bq4QhrtA.js"));
-function Markdown(props) {
-	return /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx("div", {
-			className: "markdown whitespace-pre-wrap text-start w-full",
-			children: props.children
-		}),
-		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })
-	});
-}
-//#endregion
-//#region src/components/ghostButton.ts
-var ghostButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-8 px-3 rounded-md text-sm text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
-var primaryButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-(--theme-element) text-(--theme-element-text) hover:opacity-90 transition-opacity";
-/** Filled destructive button for confirming irreversible actions in ds modals. */
-var dangerButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-red-600 text-white hover:bg-red-700 transition-colors";
-//#endregion
-//#region src/components/ConfirmModal.tsx
-function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
-	const strings = useStrings();
-	const [pending, setPending] = useState(false);
-	const firedRef = useRef(false);
-	useEffect(() => {
-		if (open) firedRef.current = false;
-	}, [open]);
-	const onCloseRef = useRef(onClose);
-	onCloseRef.current = onClose;
-	const runConfirm = useCallback(async () => {
-		if (firedRef.current) return;
-		firedRef.current = true;
-		setPending(true);
-		try {
-			await onConfirm();
-			if (closeOnConfirm) onCloseRef.current();
-			else firedRef.current = false;
-		} catch (error) {
-			firedRef.current = false;
-			throw error;
-		} finally {
-			setPending(false);
-		}
-	}, [onConfirm, closeOnConfirm]);
-	return /* @__PURE__ */ jsxs(BareModal, {
-		open,
-		onClose,
-		ariaLabel: title,
-		align,
-		preventClose: pending,
-		className: cx(modalPanelClasses, "w-[480px] max-w-full"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "px-5 pt-5",
-			children: [
-				/* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold text-(--theme-app)",
-					children: title
-				}),
-				description !== null && description !== void 0 && /* @__PURE__ */ jsx("p", {
-					className: "mt-1.5 text-sm text-(--theme-muted-text-color)",
-					children: description
-				}),
-				children !== null && children !== void 0 && /* @__PURE__ */ jsx("div", {
-					className: "mt-4",
-					children
-				})
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "mt-5 flex items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onClose,
-				disabled: pending,
-				className: cx(ghostButtonClasses, pending && "cursor-wait"),
-				children: cancelLabel ?? strings.modal.cancel
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: runConfirm,
-				disabled: confirmDisabled || pending,
-				className: cx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
-				children: confirmLabel
-			})]
-		})]
-	});
-}
-//#endregion
 //#region src/components/CreateModal.tsx
 /** Small info icon that surfaces field help via the global tooltip. */
 function FieldHelp({ tooltip }) {
@@ -655,4 +571,16 @@ function CreateModalSelect({ label, icon, value, options, onChange, disabled = f
 	})] }) });
 }
 //#endregion
-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 };
+//#region src/components/Markdown.tsx
+var MarkdownImpl = lazy(() => import("./MarkdownImpl-CyeTVvSt.js"));
+function Markdown(props) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx("div", {
+			className: "markdown whitespace-pre-wrap text-start w-full",
+			children: props.children
+		}),
+		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })
+	});
+}
+//#endregion
+export { CreateModalField as a, CreateModalTextarea as c, Callout as d, CreateModalAutocompleteField as i, CopyCodeBlock as l, CREATE_MODAL_SELECT_FILTER_THRESHOLD as n, CreateModalSelect as o, CreateModal as r, CreateModalSwitch as s, Markdown as t, CopyToClipboard as u };

package/dist/chunks/Monaco-DJ8MW-Dq.js

@@ -0,0 +1,110 @@
+import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
+import { a as getThemeName, i as defineEditorThemes, n as onYamlSchemas, r as setupMonacoWorkers } from "./editor-Dk1rbV75.js";
+import cx from "classnames";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as monaco from "monaco-editor";
+import { configureMonacoYaml } from "monaco-yaml";
+//#region src/editor/Monaco.tsx
+setupMonacoWorkers();
+var monacoWithWorkerBridge = {
+	...monaco,
+	editor: {
+		...monaco.editor,
+		createWebWorker: (opts) => "worker" in opts ? monaco.editor.createWebWorker(opts) : monaco.createWebWorker(opts)
+	}
+};
+var monacoYamlConfigured = false;
+function ensureMonacoYamlConfigured() {
+	if (monacoYamlConfigured) return;
+	monacoYamlConfigured = true;
+	const options = (schemas) => ({
+		enableSchemaRequest: true,
+		completion: true,
+		validate: true,
+		hover: true,
+		format: { enable: true },
+		schemas
+	});
+	const monacoYaml = configureMonacoYaml(monacoWithWorkerBridge, options([]));
+	onYamlSchemas((schemas) => monacoYaml.update(options(schemas)));
+}
+function editorText(value) {
+	return value.replace(/\r/g, "");
+}
+var noop = () => {};
+function MonacoEditor({ className, disabled, onChange = noop, onValidate = noop, width = "100%", height = "100%", path = "file:///default", ...options }) {
+	const isDark = useCssIsDark();
+	const readOnly = disabled || options.readOnly;
+	const monacoRef = useRef(null);
+	const isSyncingValueRef = useRef(false);
+	useEffect(() => {
+		if (!monacoRef.current) return;
+		defineEditorThemes(monaco.editor);
+		monaco.editor.setTheme(getThemeName(isDark, disabled));
+		monacoRef.current.updateOptions(readOnly === void 0 ? {} : { readOnly });
+	}, [
+		disabled,
+		isDark,
+		readOnly
+	]);
+	useLayoutEffect(() => {
+		const model = monacoRef.current?.getModel();
+		if (!model || options.value === void 0 || editorText(model.getValue()) === editorText(options.value)) return;
+		isSyncingValueRef.current = true;
+		try {
+			model.setValue(options.value);
+		} finally {
+			isSyncingValueRef.current = false;
+		}
+	}, [options.value]);
+	useEffect(() => {
+		return () => {
+			monacoRef.current?.dispose();
+			monacoRef.current = null;
+		};
+	}, []);
+	/** Strips CR (\r) — Windows line endings break bash scripts. */
+	const onChangeWrapper = (value) => {
+		value = editorText(value);
+		onChange(value);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			width,
+			height
+		},
+		className: cx("relative border rounded", className),
+		ref: (ref) => {
+			if (ref && !monacoRef.current) {
+				monaco.editor.getModel(monaco.Uri.parse(path))?.dispose();
+				defineEditorThemes(monaco.editor);
+				monaco.editor.setTheme(getThemeName(isDark, disabled));
+				const model = monaco.editor.createModel(options.value ?? "", options.language, monaco.Uri.parse(path));
+				const editor = monaco.editor.create(ref, {
+					automaticLayout: true,
+					model,
+					...options,
+					...readOnly === void 0 ? {} : { readOnly },
+					fixedOverflowWidgets: true,
+					suggest: {
+						preview: true,
+						showWords: false,
+						showInlineDetails: true
+					}
+				});
+				model.onDidChangeContent(() => {
+					if (isSyncingValueRef.current) return;
+					onChangeWrapper(editor.getValue());
+				});
+				model.onDidChangeDecorations(() => {
+					onValidate(monaco.editor.getModelMarkers({ resource: model.uri }));
+				});
+				ensureMonacoYamlConfigured();
+				monacoRef.current = editor;
+			}
+		}
+	});
+}
+//#endregion
+export { MonacoEditor as default };

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

@@ -1,11 +1,50 @@
-import { i as useNotify, l as useSlots, n as useLink, u as useStrings } from "./Provider-Ghua9PkN.js";
+import { i as useNotify, l as useSlots, n as useLink, u as useStrings } from "./Provider-CDYurraE.js";
 import { AddIcon, CheckIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, EditIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, UserIcon } from "../icons.js";
-import { n as TOOLTIP_ID } from "./Tooltip-Crxo_eU_.js";
+import { n as TOOLTIP_ID, o as keyedByContent } from "./Tooltip-K5HJr4_p.js";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import cx from "classnames";
 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/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, {
+		"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, { 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
 //#region src/components/Avatar.tsx
 var SIZE_CLASSES = {
 	sm: "w-6 h-6 text-xs",
@@ -47,45 +86,6 @@ function Avatar({ src, name, size = "md", status, className }) {
 	});
 }
 //#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, {
-		"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, { 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
 //#region src/components/Breadcrumbs.tsx
 var BreadcrumbContext = createContext({
 	breadcrumbs: [],
@@ -224,25 +224,27 @@ function assembleRowMenu({ lead = [], actions, exclude, order, trailing = ["dele
 function useRowMenu(zClassName = "z-50") {
 	const [menu, setMenu] = useState(null);
 	const onCloseRef = useRef(void 0);
+	const openMenu = useCallback((x, y, items, onClose) => {
+		if (items.length > 0) {
+			onCloseRef.current?.();
+			onCloseRef.current = onClose;
+			setMenu({
+				x,
+				y,
+				items
+			});
+		}
+	}, []);
+	const close = useCallback(() => {
+		onCloseRef.current?.();
+		onCloseRef.current = void 0;
+		setMenu(null);
+	}, []);
 	return {
-		openMenu: useCallback((x, y, items, onClose) => {
-			if (items.length > 0) {
-				onCloseRef.current?.();
-				onCloseRef.current = onClose;
-				setMenu({
-					x,
-					y,
-					items
-				});
-			}
-		}, []),
+		openMenu,
 		contextMenu: /* @__PURE__ */ jsx(RowContextMenu, {
 			state: menu,
-			onClose: useCallback(() => {
-				onCloseRef.current?.();
-				onCloseRef.current = void 0;
-				setMenu(null);
-			}, []),
+			onClose: close,
 			zClassName
 		})
 	};
@@ -342,14 +344,14 @@ function RowContextMenu({ state, onClose, zClassName }) {
 }
 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", {
+	return keyedByContent(items, (it) => it.kind === "divider" ? "divider" : it.label).map(({ key, item }) => item.kind === "divider" ? /* @__PURE__ */ jsx("div", {
 		"aria-hidden": "true",
 		className: "my-1 h-px bg-(--theme-border)"
-	}, `divider-${i}`) : /* @__PURE__ */ jsx(MenuRow, {
+	}, key) : /* @__PURE__ */ jsx(MenuRow, {
 		item,
 		onClose,
 		side
-	}, `${item.label}-${i}`));
+	}, key));
 }
 function MenuRow({ item, onClose, side }) {
 	const Link = useLink();
@@ -646,11 +648,11 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 			/* @__PURE__ */ jsx("nav", {
 				"aria-label": "Breadcrumb",
 				className: "flex items-center gap-2 min-w-0 text-[13px]",
-				children: crumbs.map((crumb, idx) => {
+				children: keyedByContent(crumbs, (c) => c.href ?? (typeof c.label === "string" ? c.label : "crumb")).map(({ key, item: 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}`);
+					}, key);
 					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",
@@ -658,7 +660,7 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 					}) : /* @__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}`);
+					}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3 opacity-60 shrink-0 text-(--theme-muted-text-color)" })] }, key);
 				})
 			}),
 			titleAction,
@@ -687,4 +689,4 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 	});
 }
 //#endregion
-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 };
+export { useSetDefaultBreadcrumbs as C, AddMenu as E, useSetBreadcrumbs as S, avatarInitials 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, Avatar as w, useHideBreadcrumbs as x, useBreadcrumb as y };