@parallelworks/ui 0.44.0 → 0.45.0

package/dist/graph/InputsEditor.js

@@ -1,21 +1,12 @@
-import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
-import { BsArrowsCollapse } from "../icons/bs/BsArrowsCollapse.js";
-import { BsDash } from "../icons/bs/BsDash.js";
-import { BsFiles } from "../icons/bs/BsFiles.js";
-import { BsThreeDots } from "../icons/bs/BsThreeDots.js";
-import { FaArrowDown } from "../icons/fa/FaArrowDown.js";
-import { FaArrowUp } from "../icons/fa/FaArrowUp.js";
-import { FaEdit } from "../icons/fa/FaEdit.js";
-import { FaPlus } from "../icons/fa/FaPlus.js";
-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 { cx } from "../cx.js";
+import { AddIcon, ArrowDownIcon, ArrowUpIcon, CollapseIcon, DragHandleIcon, DuplicateIcon, EditIcon, FilesIcon, MinusIcon, MoreIcon, TrashIcon, WarningIcon } from "../icons.js";
+import { EmptyState } from "../components/EmptyState.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 { NumberInput } from "../components/NumberInput.js";
 import { MarqueeBox, createStore, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside, useStore } from "./editorPrimitives.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
@@ -29,7 +20,6 @@ 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 { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 //#region src/graph/InputsEditor.tsx
@@ -98,21 +88,6 @@ function inputsInBox(root, box) {
 	const holder = touched.filter(({ path, rect }) => contains(rect, box) && touched.some((other) => below(other.path, path))).reduce((deepest, { path }) => deepest && deepest.length >= path.length ? deepest : path, null);
 	return outermost((holder ? touched.filter(({ path }) => below(path, holder)) : touched).map(({ path }) => path));
 }
-function ChromeButton({ label, onClick, 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. */
 function InputRow({ path, hidden = false, instance, children }) {
 	const api = useContext(ApiContext);
@@ -144,7 +119,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 			onClick: (e) => {
 				api.openMenu(e.currentTarget, path);
 			},
-			children: /* @__PURE__ */ jsx(MdDragHandle, { className: "h-3.5 w-3.5" })
+			children: /* @__PURE__ */ jsx(DragHandleIcon, { className: "h-3.5 w-3.5" })
 		}),
 		/* @__PURE__ */ jsx(Tooltip, {
 			content: name,
@@ -155,29 +130,41 @@ function InputRow({ path, hidden = false, instance, children }) {
 			parent: path,
 			list: definition[editing.inputChildrenKey(definition["type"]) ?? ""]
 		}),
-		/* @__PURE__ */ jsx(ChromeButton, {
+		/* @__PURE__ */ jsx(IconButton, {
+			size: "xs",
 			label: t.editInput,
-			onClick: () => api.edit(path),
-			children: /* @__PURE__ */ jsx(FaEdit, { className: "h-3 w-3" })
+			icon: /* @__PURE__ */ jsx(EditIcon, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				api.edit(path);
+			}
 		}),
-		/* @__PURE__ */ jsx(ChromeButton, {
+		/* @__PURE__ */ jsx(IconButton, {
+			size: "xs",
 			label: t.addInputBelow,
+			icon: /* @__PURE__ */ jsx(AddIcon, {}),
 			onClick: (e) => {
+				e.stopPropagation();
 				api.openTypeMenu(e.currentTarget, parent, index + 1);
-			},
-			children: /* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" })
+			}
 		}),
-		/* @__PURE__ */ jsx(ChromeButton, {
+		/* @__PURE__ */ jsx(IconButton, {
+			size: "xs",
 			label: t.deleteInput,
-			onClick: () => api.remove(path),
-			children: /* @__PURE__ */ jsx(BsDash, { className: "h-3 w-3" })
+			icon: /* @__PURE__ */ jsx(MinusIcon, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				api.remove(path);
+			}
 		}),
-		/* @__PURE__ */ jsx(ChromeButton, {
+		/* @__PURE__ */ jsx(IconButton, {
+			size: "xs",
 			label: t.inputActions,
+			icon: /* @__PURE__ */ jsx(MoreIcon, {}),
 			onClick: (e) => {
+				e.stopPropagation();
 				api.openMenu(e.currentTarget, path);
-			},
-			children: /* @__PURE__ */ jsx(BsThreeDots, { className: "h-3 w-3" })
+			}
 		})
 	] });
 	return /* @__PURE__ */ jsxs("div", {
@@ -187,7 +174,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 		"data-input-index": index,
 		...hidden ? { "data-input-hidden": "" } : {},
 		...selected ? { "data-selected": "" } : {},
-		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-['']"),
+		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-accent)/15 before:ring-2 before:ring-(--theme-accent) before:content-['']"),
 		onPointerOver: (e) => {
 			e.stopPropagation();
 			api.hover(copy);
@@ -216,7 +203,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 					})
 				]
 			}) : /* @__PURE__ */ jsx("div", {
-				className: clsx("flex justify-end overflow-hidden transition-[height] duration-150 focus-within:h-7", active ? "h-7" : "h-0"),
+				className: cx("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",
@@ -231,7 +218,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 					"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: /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5" })
 				})
 			}),
 			children,
@@ -252,35 +239,47 @@ function InputRow({ path, hidden = false, instance, children }) {
 function PageActions({ api, parent, list, bar = false }) {
 	const t = useInputsEditorStrings();
 	if (!isWizard(list)) return bar ? /* @__PURE__ */ jsx(IconButton, {
-		icon: /* @__PURE__ */ jsx(BsFiles, { className: "h-4 w-4" }),
+		icon: /* @__PURE__ */ jsx(FilesIcon, {}),
 		label: t.splitIntoPages,
 		size: "sm",
 		variant: "ghost",
 		onClick: () => api.splitIntoPages(parent)
-	}) : /* @__PURE__ */ jsx(ChromeButton, {
+	}) : /* @__PURE__ */ jsx(IconButton, {
+		size: "xs",
 		label: t.splitIntoPages,
-		onClick: () => api.splitIntoPages(parent),
-		children: /* @__PURE__ */ jsx(BsFiles, { className: "h-3 w-3" })
+		icon: /* @__PURE__ */ jsx(FilesIcon, {}),
+		onClick: (e) => {
+			e.stopPropagation();
+			api.splitIntoPages(parent);
+		}
 	});
 	return bar ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AddChip, {
-		icon: /* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }),
+		icon: /* @__PURE__ */ jsx(AddIcon, { className: "h-3 w-3" }),
 		label: t.page,
 		hint: t.addPage,
 		onClick: () => api.addPage(parent)
 	}), /* @__PURE__ */ jsx(IconButton, {
-		icon: /* @__PURE__ */ jsx(BsArrowsCollapse, { className: "h-4 w-4" }),
+		icon: /* @__PURE__ */ jsx(CollapseIcon, {}),
 		label: t.unsplitPages,
 		size: "sm",
 		variant: "ghost",
 		onClick: () => api.unsplitPages(parent)
-	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChromeButton, {
+	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+		size: "xs",
 		label: t.addPage,
-		onClick: () => api.addPage(parent),
-		children: /* @__PURE__ */ jsx(GoPlus, { className: "h-3 w-3" })
-	}), /* @__PURE__ */ jsx(ChromeButton, {
+		icon: /* @__PURE__ */ jsx(AddIcon, {}),
+		onClick: (e) => {
+			e.stopPropagation();
+			api.addPage(parent);
+		}
+	}), /* @__PURE__ */ jsx(IconButton, {
+		size: "xs",
 		label: t.unsplitPages,
-		onClick: () => api.unsplitPages(parent),
-		children: /* @__PURE__ */ jsx(BsArrowsCollapse, { className: "h-3 w-3" })
+		icon: /* @__PURE__ */ jsx(CollapseIcon, {}),
+		onClick: (e) => {
+			e.stopPropagation();
+			api.unsplitPages(parent);
+		}
 	})] });
 }
 function pagesIn(list) {
@@ -291,20 +290,20 @@ function pagesIn(list) {
 function PageNumber({ count, page, onChange }) {
 	const t = useInputsEditorStrings();
 	const shown = Math.min(Math.max(page, 0), Math.max(count - 1, 0));
-	return /* @__PURE__ */ jsxs("label", {
+	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-7 items-center gap-1 px-1 text-xs theme-muted-text",
 		children: [
 			t.page,
-			/* @__PURE__ */ jsx("input", {
-				type: "number",
+			/* @__PURE__ */ jsx(NumberInput, {
+				size: "sm",
 				min: 1,
 				max: count,
+				step: 1,
 				value: shown + 1,
 				"aria-label": t.pageNumber,
-				className: "h-6 w-10 rounded border theme-border bg-(--theme-input-bg) px-1 text-center text-(--theme-input) text-xs",
-				onChange: (e) => {
-					const typed = Number(e.target.value);
-					if (Number.isInteger(typed) && typed >= 1 && typed <= count) onChange(typed - 1);
+				className: "w-12",
+				onValueChange: (typed) => {
+					if (typed !== null && Number.isInteger(typed) && typed >= 1 && typed <= count) onChange(typed - 1);
 				}
 			}),
 			/* @__PURE__ */ jsxs("span", { children: ["/ ", count] })
@@ -327,11 +326,11 @@ function AddInput({ parent }) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"data-input-add": key(parent),
-		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)]),
+		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)]),
 		onClick: (e) => {
 			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)]
+		children: [/* @__PURE__ */ jsx(AddIcon, { className: "h-3 w-3" }), parent.length === 0 ? t.addInputHere : t.addFieldTo(name)]
 	});
 }
 var EDITING = {
@@ -964,26 +963,26 @@ function InputsFormEditor({ editor, inputs, children }) {
 			return [
 				{
 					label: t.editInput,
-					icon: /* @__PURE__ */ jsx(FaEdit, {}),
+					icon: /* @__PURE__ */ jsx(EditIcon, {}),
 					onClick: () => edit(path)
 				},
 				{
 					label: t.addInputBelow,
-					icon: /* @__PURE__ */ jsx(FaPlus, {}),
+					icon: /* @__PURE__ */ jsx(AddIcon, {}),
 					items: typeMenu(t, (type) => create(parent, index + 1, type)),
 					search: typeSearch(t)
 				},
 				{
-					label: t.duplicate,
-					icon: /* @__PURE__ */ jsx(HiDuplicate, {}),
+					label: t.common.duplicate,
+					icon: /* @__PURE__ */ jsx(DuplicateIcon, {}),
 					onClick: () => send({
 						type: "duplicateInput",
 						path
 					})
 				},
 				{
-					label: t.moveUp,
-					icon: /* @__PURE__ */ jsx(FaArrowUp, {}),
+					label: t.common.moveUp,
+					icon: /* @__PURE__ */ jsx(ArrowUpIcon, {}),
 					disabled: index <= 0,
 					onClick: () => send({
 						type: "moveInputs",
@@ -993,8 +992,8 @@ function InputsFormEditor({ editor, inputs, children }) {
 					})
 				},
 				{
-					label: t.moveDown,
-					icon: /* @__PURE__ */ jsx(FaArrowDown, {}),
+					label: t.common.moveDown,
+					icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
 					disabled: index >= count - 1,
 					onClick: () => send({
 						type: "moveInputs",
@@ -1006,7 +1005,7 @@ function InputsFormEditor({ editor, inputs, children }) {
 				menuDivider,
 				{
 					label: t.deleteInput,
-					icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
+					icon: /* @__PURE__ */ jsx(TrashIcon, {}),
 					destructive: true,
 					onClick: () => remove(path)
 				}
@@ -1176,7 +1175,7 @@ function InputsFormEditor({ editor, inputs, children }) {
 					return;
 				}
 				const selected = store.get().selection.includes(rowKey);
-				const title = e.target.closest("[data-field-label]");
+				const title = e.target.closest("[data-field-label], [data-section-title]");
 				const ownTitle = title !== null && title.closest("[data-input-path]") === row;
 				if (!ownTitle && e.target.closest(CONTROLS)) {
 					if (!selected) store.set({ selection: [] });
@@ -1263,7 +1262,7 @@ function InputsFormEditor({ editor, inputs, children }) {
 				block: "center",
 				behavior: still ? "auto" : "smooth"
 			});
-			if (!still) row.animate?.([{ boxShadow: "0 0 0 4px color-mix(in srgb, var(--theme-element) 45%, transparent)" }, { boxShadow: "0 0 0 0 transparent" }], {
+			if (!still) row.animate?.([{ boxShadow: "0 0 0 4px color-mix(in srgb, var(--theme-accent) 45%, transparent)" }, { boxShadow: "0 0 0 0 transparent" }], {
 				duration: 1200,
 				easing: "ease-out"
 			});
@@ -1303,9 +1302,9 @@ function InputsFormEditor({ editor, inputs, children }) {
 							});
 						},
 						children: [
-							empty && /* @__PURE__ */ jsx("div", {
-								className: "mb-3 text-sm theme-muted-text",
-								children: t.noInputs
+							empty && /* @__PURE__ */ jsx(EmptyState, {
+								variant: "bare",
+								title: t.noInputs
 							}),
 							/* @__PURE__ */ jsx(WizardPagesContext.Provider, {
 								value: wizardPages,
@@ -1331,7 +1330,7 @@ function InputsFormEditor({ editor, inputs, children }) {
 									groups: formShortcuts(g),
 									children: [
 										/* @__PURE__ */ jsx(AddChip, {
-											icon: /* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }),
+											icon: /* @__PURE__ */ jsx(AddIcon, { className: "h-3 w-3" }),
 											label: t.addInput,
 											hint: t.addInputHint,
 											onPointerDown: (e) => api.startDrag(e, null, t.addInput),
@@ -1376,14 +1375,14 @@ function DropIndicator({ store, container }) {
 	if (!drag || !root) return null;
 	const rect = root.getBoundingClientRect();
 	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)",
+		className: "pointer-events-none absolute z-20 w-1 rounded-full bg-(--theme-accent)",
 		style: {
 			left: drag.gap.beside.x - rect.left - 2,
 			top: drag.gap.beside.top - rect.top,
 			height: drag.gap.beside.bottom - drag.gap.beside.top
 		}
 	}) : drag.gap && /* @__PURE__ */ jsx("div", {
-		className: "pointer-events-none absolute z-20 h-1 rounded-full bg-(--theme-element)",
+		className: "pointer-events-none absolute z-20 h-1 rounded-full bg-(--theme-accent)",
 		style: {
 			left: drag.gap.left - rect.left,
 			top: drag.gap.y - rect.top - 2,
@@ -1433,7 +1432,7 @@ function RowResizer({ api, container }) {
 		onBlur: () => {
 			if (!api.store.get().resizing) api.store.set({ edge: null });
 		},
-		children: /* @__PURE__ */ jsx("div", { className: "h-full w-0.5 rounded-full bg-(--theme-element) opacity-50 group-hover/edge:opacity-100 group-focus-visible/edge:opacity-100" })
+		children: /* @__PURE__ */ jsx("div", { className: "h-full w-0.5 rounded-full bg-(--theme-accent) opacity-50 group-hover/edge:opacity-100 group-focus-visible/edge:opacity-100" })
 	});
 }
 function Marquee({ store, container }) {

package/dist/graph/JobSummary.js

@@ -1,12 +1,11 @@
-import { IoDocumentTextOutline } from "../icons/io5/IoDocumentTextOutline.js";
-import { PiArrowBendUpRightBold } from "../icons/pi/PiArrowBendUpRightBold.js";
+import { cx } from "../cx.js";
+import { FileTextIcon, OpenInNewGraphIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useNavigation, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
-import { Indicator } from "../components/Indicator.js";
+import { RunStatusIcon } from "../components/RunStatusIcon.js";
 import { jobLabel } from "./util.js";
 import { AddStepButton, EditableJobRow, EditableStepRow } from "./editorRows.js";
 import { Reveal } from "./Reveal.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/JobSummary.tsx
 function UsesIcon({ uses, subworkflow }) {
@@ -42,8 +41,8 @@ function Joblist(inputs) {
 			type: "button",
 			"aria-expanded": inputs.isStepsOpen(jobName),
 			onClick: () => inputs.onJobClick(jobName),
-			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: cx("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(RunStatusIcon, { status: jobStatus }), /* @__PURE__ */ jsx("div", {
 				className: "font-medium",
 				children: label
 			})]
@@ -67,12 +66,12 @@ function Joblist(inputs) {
 						const stepButton = /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							onClick: () => inputs.onStepClick(jobName, i),
-							className: clsx(inputs.preview ? "ml-1.5" : "ml-4", "gap-x-1.5 flex items-center text-left"),
+							className: cx(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 })]
+							children: [inputs.preview ? "↳" : /* @__PURE__ */ jsx(RunStatusIcon, { status: step.status }), /* @__PURE__ */ jsx("div", { children: stepLabel })]
 						});
 						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-							className: clsx("flex items-center", step.status === "skipped" || step.status === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
+							className: cx("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,
@@ -89,7 +88,7 @@ function Joblist(inputs) {
 											inputs.onStepLogClick(jobName, i);
 										},
 										className: "link ml-1",
-										children: /* @__PURE__ */ jsx(IoDocumentTextOutline, { className: "w-[1.2em] h-[1.2em]" })
+										children: /* @__PURE__ */ jsx(FileTextIcon, { className: "w-[1.2em] h-[1.2em]" })
 									})
 								}),
 								/* @__PURE__ */ jsx(UsesIcon, {
@@ -106,7 +105,7 @@ function Joblist(inputs) {
 											inputs.onSubworkflowIcon(jobName, i);
 										},
 										className: "link ml-1",
-										children: /* @__PURE__ */ jsx(PiArrowBendUpRightBold, { className: "w-[1.2em] h-[1.2em]" })
+										children: /* @__PURE__ */ jsx(OpenInNewGraphIcon, { className: "w-[1.2em] h-[1.2em]" })
 									})
 								})
 							] })]

package/dist/graph/MatrixGroup.js

@@ -1,5 +1,5 @@
 import { useStrings, useWorkflowEngine } from "../components/Provider.js";
-import { Indicator } from "../components/Indicator.js";
+import { RunStatusIcon } from "../components/RunStatusIcon.js";
 import { EditableJobRow } from "./editorRows.js";
 import { Reveal } from "./Reveal.js";
 import { Joblist } from "./JobSummary.js";
@@ -17,7 +17,7 @@ function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, job
 			"aria-expanded": isExpanded,
 			onClick: onToggle,
 			className: "cursor-pointer flex items-center gap-x-1.5 w-full text-left",
-			children: [/* @__PURE__ */ jsx(Indicator, { status }), /* @__PURE__ */ jsxs("div", {
+			children: [/* @__PURE__ */ jsx(RunStatusIcon, { status }), /* @__PURE__ */ jsxs("div", {
 				className: "font-semibold",
 				children: [t.matrixOf(matrixGroup.originaljob), /* @__PURE__ */ jsxs("span", {
 					className: "font-normal text-sm ml-1",
@@ -59,7 +59,7 @@ var MatrixGroupNode = memo(function MatrixGroupNode({ matrixGroup, jobNames, idP
 			children: t.matrixOf(matrixName.length > 20 ? `${matrixName.slice(0, 20)}...` : matrixName)
 		}), !isExpanded && /* @__PURE__ */ jsxs("div", {
 			className: "mt-1 border-t border-(--theme-border) pt-1 flex items-center gap-x-1",
-			children: [!preview && /* @__PURE__ */ jsx(Indicator, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: preview ? t.jobCount(matrixMembers.length) : statusLabel })]
+			children: [!preview && /* @__PURE__ */ jsx(RunStatusIcon, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: preview ? t.jobCount(matrixMembers.length) : statusLabel })]
 		})]
 	});
 	return /* @__PURE__ */ jsxs(GraphNode, {

package/dist/graph/ProblemsButton.js

@@ -1,8 +1,9 @@
-import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { WarningIcon } from "../icons.js";
 import { keyedByContent } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
+import { Popover } from "../components/Popover.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
-import { ToolbarPopover } from "./ToolbarPopover.js";
+import { toolbarPanel } from "./toolbarPanel.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/graph/ProblemsButton.tsx
@@ -12,10 +13,11 @@ function ProblemsButton({ problems }) {
 	const [open, setOpen] = useState(false);
 	if (problems.length === 0) return null;
 	const label = t.problemCount(problems.length);
-	return /* @__PURE__ */ jsxs(ToolbarPopover, {
-		label,
+	return /* @__PURE__ */ jsx(Popover, {
+		title: label,
 		open,
 		onOpenChange: setOpen,
+		...toolbarPanel,
 		trigger: /* @__PURE__ */ jsx(Tooltip, {
 			content: label,
 			disabled: open,
@@ -23,13 +25,10 @@ function ProblemsButton({ problems }) {
 				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(WarningIcon, { className: "h-3.5 w-3.5" }), problems.length]
 			})
 		}),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "mb-2 text-[0.8125rem] font-semibold",
-			children: label
-		}), /* @__PURE__ */ jsx("ul", {
+		children: /* @__PURE__ */ jsx("ul", {
 			className: "flex flex-col gap-0.5",
 			children: keyedByContent(problems, (problem) => `${problem.line}:${problem.message}`).map(({ key, item: problem }) => {
 				const { pick } = problem;
@@ -53,7 +52,7 @@ function ProblemsButton({ problems }) {
 					children: text
 				}) }, key);
 			})
-		})]
+		})
 	});
 }
 //#endregion

package/dist/graph/ShortcutsButton.js

@@ -1,32 +1,27 @@
-import { LuKeyboard } from "../icons/lu/LuKeyboard.js";
+import { KeyboardIcon } from "../icons.js";
+import { Popover } from "../components/Popover.js";
 import { IconButton } from "../components/IconButton.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
-import { ToolbarPopover } from "./ToolbarPopover.js";
+import { toolbarPanel } from "./toolbarPanel.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useState } from "react";
+import { Fragment as Fragment$1 } 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";
 /** A toolbar button that opens the list of gestures and keys a pane takes. */
 function ShortcutsButton({ groups }) {
 	const t = useGraphEditorStrings();
-	const [open, setOpen] = useState(false);
-	return /* @__PURE__ */ jsxs(ToolbarPopover, {
-		label: t.shortcuts,
-		open,
-		onOpenChange: setOpen,
+	return /* @__PURE__ */ jsx(Popover, {
+		title: t.shortcuts,
+		...toolbarPanel,
 		trigger: /* @__PURE__ */ jsx(IconButton, {
-			icon: /* @__PURE__ */ jsx(LuKeyboard, { className: "h-4 w-4" }),
+			icon: /* @__PURE__ */ jsx(KeyboardIcon, {}),
 			label: t.shortcuts,
 			size: "sm",
-			variant: "ghost",
-			showTooltip: !open
+			variant: "ghost"
 		}),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-[0.8125rem] font-semibold",
-			children: t.shortcuts
-		}), groups.map((group) => /* @__PURE__ */ jsxs("section", {
-			className: "mt-3",
+		children: groups.map((group) => /* @__PURE__ */ jsxs("section", {
+			className: "mt-3 first-of-type:mt-0",
 			children: [/* @__PURE__ */ jsx("h3", {
 				className: "mb-1.5 text-xs font-semibold theme-muted-text",
 				children: group.title
@@ -46,7 +41,7 @@ function ShortcutsButton({ groups }) {
 					children: shortcut.does
 				})] }, shortcut.does))
 			})]
-		}, group.title))]
+		}, group.title))
 	});
 }
 //#endregion

package/dist/graph/SuggestionInput.d.ts

@@ -6,8 +6,7 @@ export interface Suggestion {
 }
 /** 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)]";
 /** A field that takes any typed value, offering `suggestions` as it's typed. */
-export declare function SuggestionInput({ suggestions, ...props }: Omit<AutocompleteProps, 'items' | 'className' | 'defaultValue'> & {
+export declare function SuggestionInput({ suggestions, ...props }: Omit<AutocompleteProps, 'items' | 'defaultValue'> & {
     suggestions: Suggestion[];
 }): import("react").JSX.Element;

package/dist/graph/SuggestionInput.js

@@ -12,14 +12,12 @@ function suggestionItems(suggestions) {
 		label: value
 	});
 }
-var FIELD_TEXT_BOX = "py-3 pl-4 rounded-lg text-sm !bg-[var(--theme-muted-panel-bg)]";
 /** A field that takes any typed value, offering `suggestions` as it's typed. */
 function SuggestionInput({ suggestions, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete, {
 		...props,
-		className: FIELD_TEXT_BOX,
 		items: suggestionItems(suggestions)
 	});
 }
 //#endregion
-export { FIELD_TEXT_BOX, SuggestionInput, suggestionItems };
+export { SuggestionInput, suggestionItems };