@parallelworks/ui 0.40.1 → 0.42.0

package/dist/graph/SuggestionInput.js

@@ -1,29 +1,25 @@
-import Dropdown from "../components/Dropdown.js";
-import cx from "classnames";
+import { Autocomplete } from "../components/Combobox.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/graph/SuggestionInput.tsx
-function suggestionOptions(suggestions) {
+/** A labelled suggestion shows its meaning, with the value it writes beneath. */
+function suggestionItems(suggestions) {
 	return suggestions.map(({ value, label }) => label ? {
-		label,
 		value,
+		label,
 		description: value
-	} : value);
+	} : {
+		value,
+		label: value
+	});
 }
 var FIELD_TEXT_BOX = "py-3 pl-4 rounded-lg text-sm !bg-[var(--theme-muted-panel-bg)]";
-/**
-* The dropdown for a field that takes any typed value as well as the ones it offers. Any of
-* the dropdown's own props can still be passed, such as `allowCustomValue={false}`.
-*/
-function SuggestionInput({ value, onChange, suggestions, allowCustomValue = true, ...props }) {
-	return /* @__PURE__ */ jsx(Dropdown, {
-		showCaret: suggestions.length > 0,
+/** A field that takes any typed value, offering `suggestions` as it's typed. */
+function SuggestionInput({ suggestions, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete, {
 		...props,
-		textBoxClassName: cx(FIELD_TEXT_BOX, props.textBoxClassName),
-		allowCustomValue,
-		value,
-		options: suggestionOptions(suggestions),
-		onChange: (next) => onChange(next === void 0 ? "" : String(next))
+		className: FIELD_TEXT_BOX,
+		items: suggestionItems(suggestions)
 	});
 }
 //#endregion
-export { FIELD_TEXT_BOX, SuggestionInput, suggestionOptions };
+export { FIELD_TEXT_BOX, SuggestionInput, suggestionItems };

package/dist/graph/ToolbarPopover.d.ts

@@ -1,8 +1,13 @@
-import { type ReactNode, type RefObject } from 'react';
-/** A toolbar button's panel, drawn over the page so the pane it sits in can't clip it. */
-export declare function ToolbarPopover({ anchor, label, onClose, children, }: {
-    anchor: RefObject<HTMLElement | null>;
+import { type ReactElement, type ReactNode } from 'react';
+/** A toolbar button's panel, drawn over the page so the pane it sits in can't clip it.
+ *  It opens above the button when there's room and below it otherwise, its right edge
+ *  lined up with the button's. Escape closes it before the graph's own Escape sees the
+ *  key, and focus goes back to the button. */
+export declare function ToolbarPopover({ trigger, label, open, onOpenChange, children, }: {
+    /** The button. It receives the trigger's props and ref, so it must pass them to its element. */
+    trigger: ReactElement;
     label: string;
-    onClose: () => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
     children: ReactNode;
-}): import("react").ReactPortal;
+}): import("react").JSX.Element;

package/dist/graph/ToolbarPopover.js

@@ -1,71 +1,39 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
+import { panelClassName, portalContainer, positionerClassName } from "../components/floating.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Popover } from "@base-ui/react/popover";
 //#region src/graph/ToolbarPopover.tsx
-var GAP = 8;
-var PANEL_WIDTH = 384;
-function placeBy(anchor, width) {
-	const rect = anchor.getBoundingClientRect();
-	const above = rect.top - 16;
-	const below = window.innerHeight - rect.bottom - 16;
-	const right = Math.max(GAP, Math.min(window.innerWidth - rect.right, window.innerWidth - GAP - width));
-	return above >= below ? {
-		right,
-		bottom: window.innerHeight - rect.top + GAP,
-		maxHeight: above
-	} : {
-		right,
-		top: rect.bottom + GAP,
-		maxHeight: below
-	};
-}
-/** A toolbar button's panel, drawn over the page so the pane it sits in can't clip it. */
-function ToolbarPopover({ anchor, label, onClose, children }) {
-	const panel = useRef(null);
-	const [place, setPlace] = useState(null);
-	const close = useRef(onClose);
-	close.current = onClose;
-	useLayoutEffect(() => {
-		const update = () => {
-			if (anchor.current) setPlace(placeBy(anchor.current, panel.current?.offsetWidth || PANEL_WIDTH));
-		};
-		update();
-		window.addEventListener("resize", update);
-		window.addEventListener("scroll", update, true);
-		return () => {
-			window.removeEventListener("resize", update);
-			window.removeEventListener("scroll", update, true);
-		};
-	}, [anchor]);
-	useEffect(() => {
-		panel.current?.focus({ preventScroll: true });
-		const away = (e) => {
-			const target = e.target;
-			if (!panel.current?.contains(target) && !anchor.current?.contains(target)) close.current();
-		};
-		const onEscape = (e) => {
-			if (e.key === "Escape") {
-				e.stopPropagation();
-				close.current();
-				anchor.current?.focus({ preventScroll: true });
-			}
-		};
-		window.addEventListener("pointerdown", away, true);
-		window.addEventListener("keydown", onEscape, true);
-		return () => {
-			window.removeEventListener("pointerdown", away, true);
-			window.removeEventListener("keydown", onEscape, true);
-		};
-	}, [anchor]);
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		ref: panel,
-		role: "dialog",
-		"aria-label": label,
-		tabIndex: -1,
-		className: "fixed z-50 w-96 max-w-[calc(100vw-16px)] overflow-y-auto rounded-md border theme-border bg-(--theme-panel-bg) p-3 text-xs text-(--theme-app) shadow-lg outline-none",
-		style: place ?? { visibility: "hidden" },
-		children
-	}), document.body);
+/** A toolbar button's panel, drawn over the page so the pane it sits in can't clip it.
+*  It opens above the button when there's room and below it otherwise, its right edge
+*  lined up with the button's. Escape closes it before the graph's own Escape sees the
+*  key, and focus goes back to the button. */
+function ToolbarPopover({ trigger, label, open, onOpenChange, children }) {
+	const popup = useRef(null);
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, { render: trigger }), /* @__PURE__ */ jsx(Popover.Portal, {
+			container: portalContainer(),
+			children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				side: "top",
+				align: "end",
+				sideOffset: 8,
+				collisionPadding: 8,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsx(Popover.Popup, {
+					ref: popup,
+					"aria-label": label,
+					initialFocus: popup,
+					className: clsx(panelClassName, "w-96 max-w-[calc(100vw-16px)] max-h-(--available-height) overflow-y-auto p-3"),
+					children: /* @__PURE__ */ jsx("div", {
+						className: "text-xs",
+						children
+					})
+				})
+			})
+		})]
+	});
 }
 //#endregion
 export { ToolbarPopover };

package/dist/graph/TreeView.js

@@ -1,16 +1,15 @@
-import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
 import { LoaderIcon } from "../components/StatusIcons.js";
+import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Indicator } from "../components/Indicator.js";
 import { LogViewer } from "../logviewer/LogViewer.js";
 import { toAbsHumanDuration } from "../duration.js";
 import { Collapse } from "./Collapse.js";
 import { jobLabel, toggled } from "./util.js";
-import cx from "classnames";
-import { useCallback, useId, useMemo, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useState } from "react";
 import { DateTime } from "luxon";
-import { AnimatePresence, motion } from "framer-motion";
 //#region src/graph/TreeView.tsx
 function elapsed({ startedAt, completedAt }) {
 	if (!startedAt) return "";
@@ -18,11 +17,9 @@ function elapsed({ startedAt, completedAt }) {
 	return toAbsHumanDuration(DateTime.fromISO(startedAt), end);
 }
 function Chevron({ open, hidden = false }) {
-	return /* @__PURE__ */ jsx(motion.div, {
-		animate: { rotate: open ? 90 : 0 },
-		transition: { duration: .15 },
-		className: cx("flex-shrink-0", hidden ? "invisible" : "text-[var(--theme-muted-text-color)]"),
-		children: /* @__PURE__ */ jsx(LuChevronRight, { className: cx("w-4 h-4", open && "text-[var(--theme-element)]") })
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex-shrink-0 transition-transform duration-150", open && "rotate-90", hidden ? "invisible" : "text-[var(--theme-muted-text-color)]"),
+		children: /* @__PURE__ */ jsx(LuChevronRight, { className: clsx("w-4 h-4", open && "text-[var(--theme-element)]") })
 	});
 }
 function StepLogs({ slug, prefix, jobName, stepIndex }) {
@@ -59,7 +56,7 @@ function JobRow({ jobName, job, isExpanded, onToggle, prefix, state }) {
 			type: "button",
 			"aria-expanded": isExpanded,
 			"aria-controls": hasSteps ? panelId : void 0,
-			className: cx("flex items-center gap-3 px-5 py-3 transition-colors w-full text-left", job.status === "skipped" || job.status === "skipped-failed" ? "cursor-default" : "cursor-pointer", isExpanded && "bg-[var(--theme-panel-bg)]"),
+			className: clsx("flex items-center gap-3 px-5 py-3 transition-colors w-full text-left", job.status === "skipped" || job.status === "skipped-failed" ? "cursor-default" : "cursor-pointer", isExpanded && "bg-[var(--theme-panel-bg)]"),
 			onClick: onToggle,
 			children: [
 				/* @__PURE__ */ jsx(Chevron, {
@@ -125,7 +122,7 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 			type: "button",
 			"aria-expanded": isExpanded,
 			"aria-controls": panelId,
-			className: cx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors w-full text-left", isExpanded ? "" : "hover:bg-[var(--theme-hover)]"),
+			className: clsx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors w-full text-left", isExpanded ? "" : "hover:bg-[var(--theme-hover)]"),
 			onClick: onToggle,
 			children: [
 				/* @__PURE__ */ jsx(Chevron, { open: isExpanded }),
@@ -279,34 +276,24 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 									]
 								})
 							]
-						}), /* @__PURE__ */ jsx(AnimatePresence, { children: isGroupExpanded && /* @__PURE__ */ jsx(motion.div, {
-							initial: {
-								height: 0,
-								opacity: 0
-							},
-							animate: {
-								height: "auto",
-								opacity: 1
-							},
-							exit: {
-								height: 0,
-								opacity: 0
-							},
-							transition: { duration: .15 },
-							className: "overflow-hidden pl-4",
+						}), /* @__PURE__ */ jsx(Collapse, {
+							expanded: isGroupExpanded,
 							id: `matrix-panel-${matrixOrigin}`,
-							children: group.members.map((memberName) => {
-								const member = jobs[memberName];
-								return member ? /* @__PURE__ */ jsx(JobRow, {
-									jobName: memberName,
-									job: member,
-									isExpanded: expandedJobs.has(memberName),
-									onToggle: () => toggleJob(memberName),
-									prefix: "",
-									state: rowState
-								}, memberName) : null;
+							children: /* @__PURE__ */ jsx("div", {
+								className: "pl-4",
+								children: group.members.map((memberName) => {
+									const member = jobs[memberName];
+									return member ? /* @__PURE__ */ jsx(JobRow, {
+										jobName: memberName,
+										job: member,
+										isExpanded: expandedJobs.has(memberName),
+										onToggle: () => toggleJob(memberName),
+										prefix: "",
+										state: rowState
+									}, memberName) : null;
+								})
 							})
-						}) })]
+						})]
 					}, `matrix-${matrixOrigin}`));
 				} else rendered.push(/* @__PURE__ */ jsx(JobRow, {
 					jobName,

package/dist/graph/WorkflowSettingsDialog.js

@@ -1,5 +1,5 @@
-import { useWorkflowEditing } from "../components/Provider.js";
 import { IoMdClose } from "../icons/io/IoMdClose.js";
+import { useWorkflowEditing } from "../components/Provider.js";
 import { IconButton } from "../components/IconButton.js";
 import { Input } from "../components/Input.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
@@ -11,8 +11,8 @@ import { expressionRefs } from "./expressionRefs.js";
 import { useNewInputs } from "./InputDialog.js";
 import { useSettingsViews } from "./GraphEditorDialogs.js";
 import { firstPageEdits, pagesBackEdits } from "./inputPages.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/WorkflowSettingsDialog.tsx
 var LINK_NAME = /^[a-z0-9_-]*[a-z0-9]$/;
 var ORG_VARIABLE = /^[A-Z][A-Z0-9_]*$/;
@@ -331,7 +331,7 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 	] : wizardOn && flatten !== (wizard["flatten"] !== false) ? [...settings, ...reflattenEdits(inputs, wizardEdit)] : [update];
 	const saveEdit = newInputs.save(dirty ? editing.batchOf(edits) : null);
 	onDraft?.(saveEdit, invalid);
-	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const children = /* @__PURE__ */ jsxs(Fragment, { children: [
 		newInputs.dialog,
 		/* @__PURE__ */ jsxs(Section, {
 			title: t.sectionGeneral,
@@ -622,7 +622,7 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 						}
 					})
 				}),
-				wizardOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				wizardOn && /* @__PURE__ */ jsxs(Fragment, { children: [
 					WIZARD_FLAGS.map((flag) => /* @__PURE__ */ jsx(FlagField, {
 						label: t.fields[flag],
 						yamlKey: flag,

package/dist/graph/editorChrome.js

@@ -1,18 +1,18 @@
 import { BiRedo } from "../icons/bi/BiRedo.js";
 import { BiUndo } from "../icons/bi/BiUndo.js";
 import { IoSettingsOutline } from "../icons/io5/IoSettingsOutline.js";
-import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { Tooltip } from "../components/Tooltip.js";
 import { IconButton } from "../components/IconButton.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { ProblemsButton } from "./ProblemsButton.js";
 import { ShortcutsButton } from "./ShortcutsButton.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/editorChrome.tsx
 /** What a drag carries, beside the pointer at `at` in its layer's coordinates. */
 function DragLabel({ at, text, refused = false }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error)" : "theme-border"),
+		className: clsx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error)" : "theme-border"),
 		style: {
 			left: at.x + 12,
 			top: at.y + 12
@@ -25,21 +25,22 @@ function BarDivider() {
 }
 /** A toolbar chip that adds something: click to add it, or, given `onPointerDown`, drag it to where it goes. */
 function AddChip({ icon, label, hint, className, onPointerDown, onClick }) {
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		className: cx("flex h-7 items-center gap-1 whitespace-nowrap rounded px-2 text-xs theme-hover", onPointerDown ? "cursor-grab" : "cursor-pointer", className),
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": hint,
-		onPointerDown,
-		onClick,
-		children: [icon, label]
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: hint,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: clsx("flex h-7 items-center gap-1 whitespace-nowrap rounded px-2 text-xs theme-hover", onPointerDown ? "cursor-grab" : "cursor-pointer", className),
+			onPointerDown,
+			onClick,
+			children: [icon, label]
+		})
 	});
 }
 /** The bar both editors draw: problems, undo and redo, the editor's own controls, settings, shortcuts. */
 function EditorBar({ editor, groups, className, children }) {
 	const t = useGraphEditorStrings();
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex max-w-full flex-wrap items-center justify-end gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) p-0.5", className),
+		className: clsx("flex max-w-full flex-wrap items-center justify-end gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) p-0.5", className),
 		children: [
 			!!editor.listedProblems?.length && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProblemsButton, { problems: editor.listedProblems }), /* @__PURE__ */ jsx(BarDivider, {})] }),
 			/* @__PURE__ */ jsx(IconButton, {

package/dist/graph/editorFields.js

@@ -3,21 +3,21 @@ import { IoMdClose } from "../icons/io/IoMdClose.js";
 import { LuBraces } from "../icons/lu/LuBraces.js";
 import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
 import { withPositionKeys } from "../components/keys.js";
-import { TOOLTIP_ID } from "../components/Tooltip.js";
-import { BareModal, modalPanelClasses } from "../components/BareModal.js";
+import { Tooltip } from "../components/Tooltip.js";
 import { Button } from "../components/Button.js";
 import { ghostButtonClasses, primaryButtonClasses } from "../components/ghostButton.js";
+import { Modal, ModalTitle } from "../components/Modal.js";
+import { Switch } from "../components/Switch.js";
 import { FilterPill } from "../components/FilterPill.js";
 import { IconButton } from "../components/IconButton.js";
 import { Input, Textarea } from "../components/Input.js";
-import { Toggle } from "../components/Toggle.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { useFieldLint } from "./fieldProblems.js";
 import { SuggestionInput } from "./SuggestionInput.js";
-import cx from "classnames";
-import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 //#region src/graph/editorFields.tsx
 var EXPRESSION = /^\$\{\{.*\}\}$/;
 var ENV_KEY = /^[a-zA-Z0-9_]+$/;
@@ -265,10 +265,10 @@ function ToggleField({ label, yamlKey, description, checked, onChange, disabled
 			label,
 			yamlKey,
 			description
-		}), /* @__PURE__ */ jsx(Toggle, {
+		}), /* @__PURE__ */ jsx(Switch, {
 			checked,
-			onChange,
-			label,
+			onCheckedChange: onChange,
+			"aria-label": label,
 			...disabled ? { disabled } : {}
 		})]
 	});
@@ -351,11 +351,11 @@ function KeyValueRow({ row, onChange, onRemove, keyPlaceholder, valuePlaceholder
 						title: row.nested ? t.jsonValue : void 0,
 						children: /* @__PURE__ */ jsx(SuggestionInput, {
 							id,
-							ariaLabel: t.value,
+							"aria-label": t.value,
 							placeholder: valuePlaceholder,
 							value: row.value,
 							suggestions: valueSuggestions.map((value) => ({ value })),
-							onChange: (value) => onChange({
+							onValueChange: (value) => onChange({
 								...row,
 								value
 							})
@@ -392,11 +392,11 @@ function StringListEditor({ label, values, onChange, addLabel, placeholder, erro
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "flex-1",
 					children: /* @__PURE__ */ jsx(SuggestionInput, {
-						ariaLabel: t.listItem(label, i + 1),
+						"aria-label": t.listItem(label, i + 1),
 						value,
 						placeholder,
 						suggestions: suggestions.map((option) => ({ value: option })),
-						onChange: (next) => onChange(updateAt(values, i, next))
+						onValueChange: (next) => onChange(updateAt(values, i, next))
 					})
 				}), /* @__PURE__ */ jsx(IconButton, {
 					icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
@@ -430,7 +430,7 @@ function SuggestedInput({ label, yamlKey, description, value, onChange, suggesti
 				value,
 				placeholder,
 				suggestions: suggestions.map((option) => ({ value: option })),
-				onChange
+				onValueChange: onChange
 			}),
 			/* @__PURE__ */ jsx(FieldError, { message: error ?? lint.message }),
 			lint.fixes
@@ -468,16 +468,17 @@ function openOnAddOf(editor) {
 }
 function OpenOnAddSwitch({ open, onChange }) {
 	const t = useGraphEditorStrings();
-	return /* @__PURE__ */ jsxs("label", {
-		className: "flex cursor-pointer items-center gap-2 text-xs theme-muted-text",
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": t.openOnAddHelp,
-		children: [/* @__PURE__ */ jsx("input", {
-			type: "checkbox",
-			className: "h-4 w-4 cursor-pointer accent-(--theme-element)",
-			checked: open,
-			onChange: (e) => onChange(e.target.checked)
-		}), t.openOnAdd]
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: t.openOnAddHelp,
+		children: /* @__PURE__ */ jsxs("label", {
+			className: "flex cursor-pointer items-center gap-2 text-xs theme-muted-text",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				className: "h-4 w-4 cursor-pointer accent-(--theme-element)",
+				checked: open,
+				onChange: (e) => onChange(e.target.checked)
+			}), t.openOnAdd]
+		})
 	});
 }
 function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked = false, footerStart, headerEnd, openOnAdd, children }) {
@@ -485,19 +486,18 @@ function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked = f
 	const submit = () => {
 		if (!saveDisabled) onSubmit();
 	};
-	return /* @__PURE__ */ jsx(BareModal, {
+	return /* @__PURE__ */ jsx(Modal, {
 		open: true,
 		onClose,
-		ariaLabel: title,
 		align: "center",
-		preventClose: dirty || locked,
-		className: cx(modalPanelClasses, "flex max-h-[85vh] w-full max-w-2xl flex-col"),
+		dismissible: !dirty && !locked,
+		className: "flex max-h-[85vh] w-full max-w-2xl flex-col",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex min-h-0 flex-col",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-3 border-b theme-border px-5 py-4",
-					children: [/* @__PURE__ */ jsx("div", {
+					children: [/* @__PURE__ */ jsx(ModalTitle, {
 						className: "flex-1 text-[1rem] font-semibold",
 						children: title
 					}), headerEnd]
@@ -522,7 +522,7 @@ function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked = f
 							type: "button",
 							disabled: saveDisabled,
 							onClick: submit,
-							className: cx(primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50"),
+							className: clsx(primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50"),
 							children: t.save
 						})
 					]

package/dist/graph/editorPrimitives.d.ts

@@ -1,4 +1,4 @@
-import type { OpenMenu } from '../list/RowContextMenu.js';
+import type { OpenMenu } from '../components/ContextMenu.js';
 export interface Point {
     x: number;
     y: number;

package/dist/graph/editorPrimitives.js

@@ -1,6 +1,6 @@
-import cx from "classnames";
-import { useEffect, useRef, useSyncExternalStore } from "react";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useSyncExternalStore } from "react";
 //#region src/graph/editorPrimitives.tsx
 /** A small store for an editor's view state, so a change redraws only what reads it. */
 function createStore(initial) {
@@ -51,10 +51,13 @@ function useFocusAfterDialog(store, container) {
 }
 /** `openMenu` whose menus reclaim focus for the editor when they close. */
 function returningFocus(openMenu, container) {
-	return (x, y, items, onClose, search) => openMenu(x, y, items, () => {
-		onClose?.();
-		reclaimFocus(container());
-	}, search);
+	return (at, items, options) => openMenu(at, items, {
+		...options,
+		onClose: () => {
+			options?.onClose?.();
+			reclaimFocus(container());
+		}
+	});
 }
 var DRAG_THRESHOLD = 4;
 function suppressNextClick() {
@@ -120,7 +123,7 @@ function place(box) {
 /** The box a shift + drag draws, in its layer's coordinates. */
 function MarqueeBox({ box, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("absolute rounded-md border-2 border-dashed border-(--theme-element) bg-(--theme-element)/10", className),
+		className: clsx("absolute rounded-md border-2 border-dashed border-(--theme-element) bg-(--theme-element)/10", className),
 		style: place(box)
 	});
 }