@parallelworks/ui 0.40.1 → 0.42.0

package/dist/graph/InputsEditor.js

@@ -1,4 +1,3 @@
-import { useWorkflowEditing } from "../components/Provider.js";
 import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
 import { BsArrowsCollapse } from "../icons/bs/BsArrowsCollapse.js";
 import { BsDash } from "../icons/bs/BsDash.js";
@@ -12,9 +11,11 @@ import { GoPlus } from "../icons/go/GoPlus.js";
 import { HiDuplicate } from "../icons/hi/HiDuplicate.js";
 import { MdDragHandle } from "../icons/md/MdDragHandle.js";
 import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
-import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useWorkflowEditing } from "../components/Provider.js";
+import { menuDivider } from "../components/MenuEntries.js";
+import { useContextMenu } from "../components/ContextMenu.js";
 import { IconButton } from "../components/IconButton.js";
-import { useRowMenu } from "../list/RowContextMenu.js";
 import { MarqueeBox, createStore, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside, useStore } from "./editorPrimitives.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
@@ -28,9 +29,9 @@ import { ALT_KEY, MOD_KEY } from "./ShortcutsButton.js";
 import { AddChip, BarDivider, DragLabel, EditorBar } from "./editorChrome.js";
 import { addPageEdit, splitIntoPagesEdits, unsplitPagesEdits, wizardGroupDefinition } from "./inputPages.js";
 import { inputCell, linesIn, rowsOf, snapSplit } from "./inputRows.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/InputsEditor.tsx
 var createFormStore = () => createStore({
 	drag: null,
@@ -98,17 +99,18 @@ function inputsInBox(root, box) {
 	return outermost((holder ? touched.filter(({ path }) => below(path, holder)) : touched).map(({ path }) => path));
 }
 function ChromeButton({ label, onClick, children }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": label,
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": label,
-		className: "flex h-5 w-5 cursor-pointer items-center justify-center rounded hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)",
-		onClick: (e) => {
-			e.stopPropagation();
-			onClick(e);
-		},
-		children
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": label,
+			className: "flex h-5 w-5 cursor-pointer items-center justify-center rounded hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)",
+			onClick: (e) => {
+				e.stopPropagation();
+				onClick(e);
+			},
+			children
+		})
 	});
 }
 /** An input's row: its field, with a toolbar of its type, drag grip and actions on hover. */
@@ -132,7 +134,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 	const childKey = hidden ? editing.inputChildrenKey(definition["type"]) : void 0;
 	const outline = childKey && childKey !== "template" ? namesIn(asRecord(definition[childKey])) : null;
 	const flagged = hidden && definition["hidden"] !== void 0 && definition["hidden"] !== false;
-	const actions = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("button", {
 			type: "button",
 			"aria-label": t.inputActions,
@@ -140,15 +142,13 @@ function InputRow({ path, hidden = false, instance, children }) {
 			className: "flex h-5 w-5 cursor-grab items-center justify-center rounded hover:bg-(--theme-muted-panel-bg)",
 			onPointerDown: (e) => api.startDrag(e, path, name),
 			onClick: (e) => {
-				const r = e.currentTarget.getBoundingClientRect();
-				api.openMenu(r.left, r.bottom, path);
+				api.openMenu(e.currentTarget, path);
 			},
 			children: /* @__PURE__ */ jsx(MdDragHandle, { className: "h-3.5 w-3.5" })
 		}),
-		/* @__PURE__ */ jsx("span", {
-			"data-tooltip-id": TOOLTIP_ID,
-			"data-tooltip-content": name,
-			children: /* @__PURE__ */ jsx(TypeBadge, { type: text(definition["type"]) })
+		/* @__PURE__ */ jsx(Tooltip, {
+			content: name,
+			children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(TypeBadge, { type: text(definition["type"]) }) })
 		}),
 		(definition["type"] === "group" || definition["type"] === "list") && /* @__PURE__ */ jsx(PageActions, {
 			api,
@@ -163,8 +163,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 		/* @__PURE__ */ jsx(ChromeButton, {
 			label: t.addInputBelow,
 			onClick: (e) => {
-				const r = e.currentTarget.getBoundingClientRect();
-				api.openTypeMenu(r.right, r.bottom, parent, index + 1);
+				api.openTypeMenu(e.currentTarget, parent, index + 1);
 			},
 			children: /* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" })
 		}),
@@ -176,8 +175,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 		/* @__PURE__ */ jsx(ChromeButton, {
 			label: t.inputActions,
 			onClick: (e) => {
-				const r = e.currentTarget.getBoundingClientRect();
-				api.openMenu(r.right, r.bottom, path);
+				api.openMenu(e.currentTarget, path);
 			},
 			children: /* @__PURE__ */ jsx(BsThreeDots, { className: "h-3 w-3" })
 		})
@@ -189,7 +187,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 		"data-input-index": index,
 		...hidden ? { "data-input-hidden": "" } : {},
 		...selected ? { "data-selected": "" } : {},
-		className: cx("relative w-full", hidden && "mb-[15px]", found.length > 0 && "rounded-md ring-2 ring-(--theme-error)", selected && "isolate before:pointer-events-none before:absolute before:-inset-x-2 before:-inset-y-1 before:-z-10 before:rounded-lg before:bg-(--theme-element)/15 before:ring-2 before:ring-(--theme-element) before:content-['']"),
+		className: clsx("relative w-full", hidden && "mb-[15px]", found.length > 0 && "rounded-md ring-2 ring-(--theme-error)", selected && "isolate before:pointer-events-none before:absolute before:-inset-x-2 before:-inset-y-1 before:-z-10 before:rounded-lg before:bg-(--theme-element)/15 before:ring-2 before:ring-(--theme-element) before:content-['']"),
 		onPointerOver: (e) => {
 			e.stopPropagation();
 			api.hover(copy);
@@ -197,7 +195,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 		onContextMenu: (e) => {
 			e.preventDefault();
 			e.stopPropagation();
-			api.openMenu(e.clientX, e.clientY, path);
+			api.openMenu(e, path);
 		},
 		children: [
 			hidden ? /* @__PURE__ */ jsxs("div", {
@@ -218,22 +216,23 @@ function InputRow({ path, hidden = false, instance, children }) {
 					})
 				]
 			}) : /* @__PURE__ */ jsx("div", {
-				className: cx("flex justify-end overflow-hidden transition-[height] duration-150 focus-within:h-7", active ? "h-7" : "h-0"),
+				className: clsx("flex justify-end overflow-hidden transition-[height] duration-150 focus-within:h-7", active ? "h-7" : "h-0"),
 				children: /* @__PURE__ */ jsx("div", {
 					"data-input-chrome": true,
 					className: "flex h-6 items-center gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) px-1 py-0.5 text-[11px] leading-4 theme-muted-text shadow-sm",
 					children: actions
 				})
 			}),
-			found.length > 0 && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"data-input-chrome": true,
-				"aria-label": g.problemCount(found.length),
-				"data-tooltip-id": "global-tooltip",
-				"data-tooltip-content": found.map((problem) => problem.slice(problem.indexOf("\n") + 1)).join("\n"),
-				className: "absolute -left-2 -top-2 z-10 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-(--theme-panel-bg) text-(--theme-error) shadow-sm",
-				onClick: () => api.reveal(Number.parseInt(found[0] ?? "0", 10)),
-				children: /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-3.5 w-3.5" })
+			found.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
+				content: found.map((problem) => problem.slice(problem.indexOf("\n") + 1)).join("\n"),
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-input-chrome": true,
+					"aria-label": g.problemCount(found.length),
+					className: "absolute -left-2 -top-2 z-10 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-(--theme-panel-bg) text-(--theme-error) shadow-sm",
+					onClick: () => api.reveal(Number.parseInt(found[0] ?? "0", 10)),
+					children: /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-3.5 w-3.5" })
+				})
 			}),
 			children,
 			outline && /* @__PURE__ */ jsxs("div", {
@@ -263,7 +262,7 @@ function PageActions({ api, parent, list, bar = false }) {
 		onClick: () => api.splitIntoPages(parent),
 		children: /* @__PURE__ */ jsx(BsFiles, { className: "h-3 w-3" })
 	});
-	return bar ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AddChip, {
+	return bar ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AddChip, {
 		icon: /* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }),
 		label: t.page,
 		hint: t.addPage,
@@ -274,7 +273,7 @@ function PageActions({ api, parent, list, bar = false }) {
 		size: "sm",
 		variant: "ghost",
 		onClick: () => api.unsplitPages(parent)
-	})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChromeButton, {
+	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChromeButton, {
 		label: t.addPage,
 		onClick: () => api.addPage(parent),
 		children: /* @__PURE__ */ jsx(GoPlus, { className: "h-3 w-3" })
@@ -328,10 +327,9 @@ function AddInput({ parent }) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"data-input-add": key(parent),
-		className: cx("mb-[15px] flex cursor-pointer items-center gap-1.5 text-[13px] theme-muted-text hover:text-(--theme-link)", ADD_INDENT[Math.min(parent.length, ADD_INDENT.length - 1)]),
+		className: clsx("mb-[15px] flex cursor-pointer items-center gap-1.5 text-[13px] theme-muted-text hover:text-(--theme-link)", ADD_INDENT[Math.min(parent.length, ADD_INDENT.length - 1)]),
 		onClick: (e) => {
-			const r = e.currentTarget.getBoundingClientRect();
-			api.openTypeMenu(r.left, r.bottom, parent, Number.MAX_SAFE_INTEGER);
+			api.openTypeMenu(e.currentTarget, parent, Number.MAX_SAFE_INTEGER);
 		},
 		children: [/* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }), parent.length === 0 ? t.addInputHere : t.addFieldTo(name)]
 	});
@@ -350,13 +348,11 @@ function typeSearch(labels) {
 function typeMenu(labels, pick) {
 	const types = labels.types;
 	const item = (type) => ({
-		kind: "action",
 		label: types[type] ?? type,
 		keywords: type,
-		onSelect: () => pick(type)
+		onClick: () => pick(type)
 	});
 	return [...INPUT_TYPE_GROUPS.map(([group, list]) => ({
-		kind: "submenu",
 		label: labels.typeGroups[group],
 		items: list.map(item)
 	}))];
@@ -754,7 +750,7 @@ function InputsFormEditor({ editor, inputs, children }) {
 		editor,
 		inputs
 	};
-	const rowMenu = useRowMenu();
+	const rowMenu = useContextMenu();
 	const openMenu = useMemo(() => returningFocus(rowMenu.openMenu, () => containerRef.current), [rowMenu.openMenu]);
 	const contextMenu = rowMenu.contextMenu;
 	useFocusAfterDialog(store, () => containerRef.current);
@@ -827,7 +823,7 @@ function InputsFormEditor({ editor, inputs, children }) {
 			}));
 		};
 		const unsplitPages = (parent) => sendAll(unsplitPagesEdits(listAt(parent), parent, childKeyAt(parent)));
-		const openTypeMenu = (x, y, parent, index, placement) => openMenu(x, y, typeMenu(t, (type) => create(parent, index, type, placement)), void 0, typeSearch(t));
+		const openTypeMenu = (at, parent, index, placement) => openMenu(at, typeMenu(t, (type) => create(parent, index, type, placement)), { search: typeSearch(t) });
 		const edit = (path) => store.set({ dialog: {
 			kind: "edit",
 			path
@@ -914,7 +910,10 @@ function InputsFormEditor({ editor, inputs, children }) {
 				}
 				if (!gap) return;
 				if (!paths) {
-					openTypeMenu(client.x, client.y, gap.parent, gap.index, placementOf(gap));
+					openTypeMenu({
+						clientX: client.x,
+						clientY: client.y
+					}, gap.parent, gap.index, placementOf(gap));
 					return;
 				}
 				containerRef.current?.focus({ preventScroll: true });
@@ -964,33 +963,29 @@ function InputsFormEditor({ editor, inputs, children }) {
 			const count = namesIn(containerAt(editing, latest.current.inputs, parent)).length;
 			return [
 				{
-					kind: "action",
 					label: t.editInput,
 					icon: /* @__PURE__ */ jsx(FaEdit, {}),
-					onSelect: () => edit(path)
+					onClick: () => edit(path)
 				},
 				{
-					kind: "submenu",
 					label: t.addInputBelow,
 					icon: /* @__PURE__ */ jsx(FaPlus, {}),
 					items: typeMenu(t, (type) => create(parent, index + 1, type)),
 					search: typeSearch(t)
 				},
 				{
-					kind: "action",
 					label: t.duplicate,
 					icon: /* @__PURE__ */ jsx(HiDuplicate, {}),
-					onSelect: () => send({
+					onClick: () => send({
 						type: "duplicateInput",
 						path
 					})
 				},
 				{
-					kind: "action",
 					label: t.moveUp,
 					icon: /* @__PURE__ */ jsx(FaArrowUp, {}),
 					disabled: index <= 0,
-					onSelect: () => send({
+					onClick: () => send({
 						type: "moveInputs",
 						paths: [path],
 						parent,
@@ -998,24 +993,22 @@ function InputsFormEditor({ editor, inputs, children }) {
 					})
 				},
 				{
-					kind: "action",
 					label: t.moveDown,
 					icon: /* @__PURE__ */ jsx(FaArrowDown, {}),
 					disabled: index >= count - 1,
-					onSelect: () => send({
+					onClick: () => send({
 						type: "moveInputs",
 						paths: [path],
 						parent,
 						index: index + 2
 					})
 				},
-				{ kind: "divider" },
+				menuDivider,
 				{
-					kind: "action",
 					label: t.deleteInput,
 					icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
 					destructive: true,
-					onSelect: () => remove(path)
+					onClick: () => remove(path)
 				}
 			];
 		};
@@ -1090,7 +1083,7 @@ function InputsFormEditor({ editor, inputs, children }) {
 			definition,
 			edit,
 			remove,
-			openMenu: (x, y, path) => openMenu(x, y, menuFor(path)),
+			openMenu: (at, path) => openMenu(at, menuFor(path)),
 			openTypeMenu,
 			startDrag,
 			startResize,
@@ -1343,11 +1336,10 @@ function InputsFormEditor({ editor, inputs, children }) {
 											hint: t.addInputHint,
 											onPointerDown: (e) => api.startDrag(e, null, t.addInput),
 											onClick: (e) => {
-												const r = e.currentTarget.getBoundingClientRect();
 												const form = isWizard(inputs) ? pagesIn(inputs) : [];
 												const last = form.at(-1);
 												if (last) wizardPages.setPage("[]", (wizardPages.count("[]") ?? form.length) - 1);
-												api.openTypeMenu(r.left, r.bottom, last ? [last] : [], Number.MAX_SAFE_INTEGER);
+												api.openTypeMenu(e.currentTarget, last ? [last] : [], Number.MAX_SAFE_INTEGER);
 											}
 										}),
 										/* @__PURE__ */ jsx(PageActions, {
@@ -1383,7 +1375,7 @@ function DropIndicator({ store, container }) {
 	const root = container.current;
 	if (!drag || !root) return null;
 	const rect = root.getBoundingClientRect();
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [drag.gap?.beside ? /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [drag.gap?.beside ? /* @__PURE__ */ jsx("div", {
 		className: "pointer-events-none absolute z-20 w-1 rounded-full bg-(--theme-element)",
 		style: {
 			left: drag.gap.beside.x - rect.left - 2,

package/dist/graph/JobSummary.js

@@ -1,12 +1,12 @@
-import { useNavigation, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { IoDocumentTextOutline } from "../icons/io5/IoDocumentTextOutline.js";
 import { PiArrowBendUpRightBold } from "../icons/pi/PiArrowBendUpRightBold.js";
-import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useNavigation, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Indicator } from "../components/Indicator.js";
 import { jobLabel } from "./util.js";
 import { AddStepButton, EditableJobRow, EditableStepRow } from "./editorRows.js";
 import { Reveal } from "./Reveal.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/JobSummary.tsx
 function UsesIcon({ uses, subworkflow }) {
@@ -15,17 +15,18 @@ function UsesIcon({ uses, subworkflow }) {
 	const { jobActions } = useStrings();
 	if (!uses || !slots.workflowIcon) return null;
 	const open = () => navigation.openStepSource(uses, subworkflow.sourceUrl);
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": jobActions.openOriginalWorkflow,
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": jobActions.openOriginalWorkflow,
-		onClick: open,
-		className: "cursor-pointer",
-		children: slots.workflowIcon({
-			image: subworkflow.image,
-			type: subworkflow.type,
-			className: "ml-1.5 h-[1.2em] w-[1.2em]"
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: jobActions.openOriginalWorkflow,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": jobActions.openOriginalWorkflow,
+			onClick: open,
+			className: "cursor-pointer",
+			children: slots.workflowIcon({
+				image: subworkflow.image,
+				type: subworkflow.type,
+				className: "ml-1.5 h-[1.2em] w-[1.2em]"
+			})
 		})
 	});
 }
@@ -41,7 +42,7 @@ function Joblist(inputs) {
 			type: "button",
 			"aria-expanded": inputs.isStepsOpen(jobName),
 			onClick: () => inputs.onJobClick(jobName),
-			className: cx("flex items-center gap-x-1.5 w-full text-left", jobStatus === "skipped" || jobStatus === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
+			className: clsx("flex items-center gap-x-1.5 w-full text-left", jobStatus === "skipped" || jobStatus === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
 			children: [!inputs.preview && /* @__PURE__ */ jsx(Indicator, { status: jobStatus }), /* @__PURE__ */ jsx("div", {
 				className: "font-medium",
 				children: label
@@ -66,45 +67,47 @@ function Joblist(inputs) {
 						const stepButton = /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							onClick: () => inputs.onStepClick(jobName, i),
-							className: cx(inputs.preview ? "ml-1.5" : "ml-4", "gap-x-1.5 flex items-center text-left"),
+							className: clsx(inputs.preview ? "ml-1.5" : "ml-4", "gap-x-1.5 flex items-center text-left"),
 							"data-testid": stepLabel,
 							children: [inputs.preview ? "↳" : /* @__PURE__ */ jsx(Indicator, { status: step.status }), /* @__PURE__ */ jsx("div", { children: stepLabel })]
 						});
 						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-							className: cx("flex items-center", step.status === "skipped" || step.status === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
+							className: clsx("flex items-center", step.status === "skipped" || step.status === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
 							children: [(inputs.editable || inputs.editableSteps) && !step.linkedStep ? /* @__PURE__ */ jsx(EditableStepRow, {
 								job: job?._matrix?.originaljob ?? jobName,
 								index: i,
 								label: stepLabel,
 								children: stepButton
 							}) : stepButton, step.subworkflow && /* @__PURE__ */ jsxs(Fragment, { children: [
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									"aria-label": jobActions.openSubworkflowLogs,
-									"data-tooltip-id": "global-tooltip",
-									"data-tooltip-content": jobActions.openSubworkflowLogs,
-									onClick: (e) => {
-										e.stopPropagation();
-										inputs.onStepLogClick(jobName, i);
-									},
-									className: "link ml-1",
-									children: /* @__PURE__ */ jsx(IoDocumentTextOutline, { className: "w-[1.2em] h-[1.2em]" })
+								/* @__PURE__ */ jsx(Tooltip, {
+									content: jobActions.openSubworkflowLogs,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": jobActions.openSubworkflowLogs,
+										onClick: (e) => {
+											e.stopPropagation();
+											inputs.onStepLogClick(jobName, i);
+										},
+										className: "link ml-1",
+										children: /* @__PURE__ */ jsx(IoDocumentTextOutline, { className: "w-[1.2em] h-[1.2em]" })
+									})
 								}),
 								/* @__PURE__ */ jsx(UsesIcon, {
 									uses: step.uses,
 									subworkflow: step.subworkflow
 								}),
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									"aria-label": jobActions.openInNewGraph,
-									"data-tooltip-id": "global-tooltip",
-									"data-tooltip-content": jobActions.openInNewGraph,
-									onClick: (e) => {
-										e.stopPropagation();
-										inputs.onSubworkflowIcon(jobName, i);
-									},
-									className: "link ml-1",
-									children: /* @__PURE__ */ jsx(PiArrowBendUpRightBold, { className: "w-[1.2em] h-[1.2em]" })
+								/* @__PURE__ */ jsx(Tooltip, {
+									content: jobActions.openInNewGraph,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": jobActions.openInNewGraph,
+										onClick: (e) => {
+											e.stopPropagation();
+											inputs.onSubworkflowIcon(jobName, i);
+										},
+										className: "link ml-1",
+										children: /* @__PURE__ */ jsx(PiArrowBendUpRightBold, { className: "w-[1.2em] h-[1.2em]" })
+									})
 								})
 							] })]
 						}), canExpand && inputs.renderSubworkflow(jobName, i)] }, stepKey);

package/dist/graph/MatrixGroup.js

@@ -4,8 +4,8 @@ import { EditableJobRow } from "./editorRows.js";
 import { Reveal } from "./Reveal.js";
 import { Joblist } from "./JobSummary.js";
 import { GraphNode } from "./GraphNode.js";
-import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
 //#region src/graph/MatrixGroup.tsx
 /** Matrix group item in the summary sidebar. */
 function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, handlers, preview }) {

package/dist/graph/ProblemsButton.js

@@ -1,32 +1,31 @@
 import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
 import { keyedByContent } from "../components/keys.js";
-import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { Tooltip } from "../components/Tooltip.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { ToolbarPopover } from "./ToolbarPopover.js";
-import { useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/graph/ProblemsButton.tsx
 /** A toolbar's count of the problems it lists, which opens the list. */
 function ProblemsButton({ problems }) {
 	const t = useGraphEditorStrings();
 	const [open, setOpen] = useState(false);
-	const button = useRef(null);
 	if (problems.length === 0) return null;
 	const label = t.problemCount(problems.length);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
-		ref: button,
-		type: "button",
-		"aria-label": label,
-		"aria-expanded": open,
-		...open ? {} : { "data-tooltip-id": TOOLTIP_ID },
-		"data-tooltip-content": label,
-		className: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-xs font-medium text-(--theme-error) theme-hover",
-		onClick: () => setOpen((current) => !current),
-		children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-3.5 w-3.5" }), problems.length]
-	}), open && /* @__PURE__ */ jsxs(ToolbarPopover, {
-		anchor: button,
+	return /* @__PURE__ */ jsxs(ToolbarPopover, {
 		label,
-		onClose: () => setOpen(false),
+		open,
+		onOpenChange: setOpen,
+		trigger: /* @__PURE__ */ jsx(Tooltip, {
+			content: label,
+			disabled: open,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-label": label,
+				className: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-xs font-medium text-(--theme-error) theme-hover",
+				children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-3.5 w-3.5" }), problems.length]
+			})
+		}),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "mb-2 text-[0.8125rem] font-semibold",
 			children: label
@@ -34,7 +33,7 @@ function ProblemsButton({ problems }) {
 			className: "flex flex-col gap-0.5",
 			children: keyedByContent(problems, (problem) => `${problem.line}:${problem.message}`).map(({ key, item: problem }) => {
 				const { pick } = problem;
-				const text = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				const text = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 					className: "mr-1.5 theme-muted-text",
 					children: t.problemLine(problem.line)
 				}), /* @__PURE__ */ jsx("span", {
@@ -55,7 +54,7 @@ function ProblemsButton({ problems }) {
 				}) }, key);
 			})
 		})]
-	})] });
+	});
 }
 //#endregion
 export { ProblemsButton };

package/dist/graph/Reveal.js

@@ -1,5 +1,5 @@
-import { useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
 //#region src/graph/Reveal.tsx
 var EASE = "cubic-bezier(0.25, 0.1, 0.25, 1)";
 var ROWS_TRANSITION = `grid-template-rows 200ms ${EASE}`;

package/dist/graph/ShortcutsButton.js

@@ -2,8 +2,8 @@ import { LuKeyboard } from "../icons/lu/LuKeyboard.js";
 import { IconButton } from "../components/IconButton.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { ToolbarPopover } from "./ToolbarPopover.js";
-import { Fragment, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useState } from "react";
 //#region src/graph/ShortcutsButton.tsx
 var MOD_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl";
 var ALT_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌥" : "Alt";
@@ -11,20 +11,17 @@ var ALT_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigat
 function ShortcutsButton({ groups }) {
 	const t = useGraphEditorStrings();
 	const [open, setOpen] = useState(false);
-	const button = useRef(null);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
-		ref: button,
-		icon: /* @__PURE__ */ jsx(LuKeyboard, { className: "h-4 w-4" }),
+	return /* @__PURE__ */ jsxs(ToolbarPopover, {
 		label: t.shortcuts,
-		size: "sm",
-		variant: "ghost",
-		"aria-expanded": open,
-		showTooltip: !open,
-		onClick: () => setOpen((current) => !current)
-	}), open && /* @__PURE__ */ jsxs(ToolbarPopover, {
-		anchor: button,
-		label: t.shortcuts,
-		onClose: () => setOpen(false),
+		open,
+		onOpenChange: setOpen,
+		trigger: /* @__PURE__ */ jsx(IconButton, {
+			icon: /* @__PURE__ */ jsx(LuKeyboard, { className: "h-4 w-4" }),
+			label: t.shortcuts,
+			size: "sm",
+			variant: "ghost",
+			showTooltip: !open
+		}),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "text-[0.8125rem] font-semibold",
 			children: t.shortcuts
@@ -35,9 +32,9 @@ function ShortcutsButton({ groups }) {
 				children: group.title
 			}), /* @__PURE__ */ jsx("dl", {
 				className: "grid grid-cols-[8.5rem_1fr] items-baseline gap-x-3 gap-y-1.5",
-				children: group.shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+				children: group.shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
 					className: "flex flex-wrap items-center gap-1",
-					children: shortcut.combos.map((keys, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
+					children: shortcut.combos.map((keys, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
 						className: "theme-muted-text",
 						children: "/"
 					}), keys.map((key) => /* @__PURE__ */ jsx("kbd", {
@@ -50,7 +47,7 @@ function ShortcutsButton({ groups }) {
 				})] }, shortcut.does))
 			})]
 		}, group.title))]
-	})] });
+	});
 }
 //#endregion
 export { ALT_KEY, MOD_KEY, ShortcutsButton };

package/dist/graph/SuggestionInput.d.ts

@@ -1,18 +1,13 @@
-import { type IProps as DropdownProps } from '../components/Dropdown.js';
-import type { IOptions } from '../components/dropdownUtils.js';
+import { type AutocompleteProps, type ComboboxItem } from '../components/Combobox.js';
 /** A value a typed field offers, with what it means. */
 export interface Suggestion {
     value: string;
     label?: string | undefined;
 }
-export declare function suggestionOptions(suggestions: Suggestion[]): (IOptions | string)[];
+/** A labelled suggestion shows its meaning, with the value it writes beneath. */
+export declare function suggestionItems(suggestions: Suggestion[]): ComboboxItem[];
 export declare const 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}`.
- */
-export declare function SuggestionInput({ value, onChange, suggestions, allowCustomValue, ...props }: Omit<DropdownProps, 'options' | 'value' | 'onChange'> & {
-    value: string;
-    onChange: (value: string) => void;
+/** A field that takes any typed value, offering `suggestions` as it's typed. */
+export declare function SuggestionInput({ suggestions, ...props }: Omit<AutocompleteProps, 'items' | 'className' | 'defaultValue'> & {
     suggestions: Suggestion[];
 }): import("react").JSX.Element;