@parallelworks/ui 0.43.0 → 0.45.0

package/dist/graph/editorFields.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentProps, type ReactNode } from 'react';
+import { type FieldProps } from '../components/Field.js';
 import { Textarea } from '../components/Input.js';
 import type { FieldPatch } from '../editing.js';
 import { type GraphEditorStrings } from './editorStrings.js';
@@ -48,7 +49,9 @@ export declare function flagValue(checked: boolean, fallback: boolean, original:
 /** Whether each section of a dialog is open, kept while the dialog is up so switching views keeps it. */
 export declare const SectionMemory: import("react").Context<Map<string, boolean> | null>;
 export declare function useSectionMemory(): Map<string, boolean>;
-export declare function Section({ title, description, open, alert, children, }: {
+/** A titled part of an editor dialog. It opens as it was last left in this
+ *  dialog, and opens itself when a problem inside would otherwise be hidden. */
+export declare function DialogSection({ title, description, open, alert, children, }: {
     title: string;
     description?: string;
     /** Whether it starts open; read once, when its dialog first shows it. */
@@ -57,9 +60,6 @@ export declare function Section({ title, description, open, alert, children, }:
     alert?: boolean;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function FieldError({ message }: {
-    message: string | undefined;
-}): import("react").JSX.Element | null;
 /** The YAML key a field sets, beside its name; left out where the name already says it. */
 export declare function KeyHint({ label, yamlKey }: {
     label: string;
@@ -68,20 +68,20 @@ export declare function KeyHint({ label, yamlKey }: {
 /** Label props for an Input or Textarea that sets `yamlKey`. */
 export declare function labelled(label: string, yamlKey: string): {
     label: string;
-    labelHint: import("react").JSX.Element;
+    hint: import("react").JSX.Element;
 };
-/** A field's name and help text, for controls without their own label; `actions` sit at its right. */
-export declare function FieldLabel({ label, yamlKey, description, htmlFor, descriptionId, actions, }: {
+/** A Field for a setting the YAML holds, with the key it sets beside its name. With `id`
+ *  its label names the one control that takes that id; without, it names its controls as a
+ *  group, as a list of rows or a set of choices wants. */
+export declare function YamlField({ label, yamlKey, description, actions, error, required, id, children, }: {
     label: string;
     yamlKey?: string | undefined;
-    description: string;
-    htmlFor?: string;
-    descriptionId?: string;
+    description?: ReactNode;
     actions?: ReactNode;
-}): import("react").JSX.Element;
-/** A field's label and description above the editor that sets it. */
-export declare function LabelledField({ children, ...label }: ComponentProps<typeof FieldLabel> & {
-    children: ReactNode;
+    error?: ReactNode;
+    required?: boolean | undefined;
+    id?: string | undefined;
+    children: FieldProps['children'];
 }): import("react").JSX.Element;
 /**
  * Switches a field between its own control and a typed expression, where the schema takes one. Its
@@ -91,15 +91,18 @@ export declare function ExpressionToggle({ active, onChange, }: {
     active: boolean;
     onChange: (active: boolean) => void;
 }): import("react").JSX.Element;
-export declare function ToggleField({ label, yamlKey, description, checked, onChange, disabled, }: {
+export declare function ToggleField({ label, yamlKey, description, checked, onChange, disabled, error, }: {
     label: string;
     yamlKey?: string;
     description: string;
     checked: boolean;
     onChange: (checked: boolean) => void;
     disabled?: boolean;
+    error?: string | undefined;
 }): import("react").JSX.Element;
-export declare function ChoiceButtons<T extends string>({ options, value, onChange, }: {
+/** One of a few choices. A YamlField around it names it; standing alone, `label` does. */
+export declare function ChoiceButtons<T extends string>({ label, options, value, onChange, }: {
+    label?: string | undefined;
     options: {
         value: T;
         label: string;

package/dist/graph/editorFields.js

@@ -1,22 +1,20 @@
-import { FaPlus } from "../icons/fa/FaPlus.js";
-import { IoMdClose } from "../icons/io/IoMdClose.js";
-import { LuBraces } from "../icons/lu/LuBraces.js";
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
+import { AddIcon, ExpressionIcon, RemoveIcon } from "../icons.js";
 import { withPositionKeys } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { Button } from "../components/Button.js";
-import { ghostButtonClasses, primaryButtonClasses } from "../components/ghostButton.js";
+import { Checkbox } from "../components/Checkbox.js";
 import { Modal, ModalTitle } from "../components/Modal.js";
 import { Switch } from "../components/Switch.js";
-import { FilterPill } from "../components/FilterPill.js";
+import { ErrorText, Field } from "../components/Field.js";
 import { IconButton } from "../components/IconButton.js";
 import { Input, Textarea } from "../components/Input.js";
+import { Section } from "../components/Section.js";
+import { SegmentedControl } from "../components/SegmentedControl.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { useFieldLint } from "./fieldProblems.js";
 import { SuggestionInput } from "./SuggestionInput.js";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 //#region src/graph/editorFields.tsx
 var EXPRESSION = /^\$\{\{.*\}\}$/;
@@ -149,48 +147,40 @@ var SectionMemory = createContext(null);
 function useSectionMemory() {
 	return useState(() => /* @__PURE__ */ new Map())[0];
 }
-function Section({ title, description, open = false, alert = false, children }) {
+/** A titled part of an editor dialog. It opens as it was last left in this
+*  dialog, and opens itself when a problem inside would otherwise be hidden. */
+function DialogSection({ title, description, open = false, alert = false, children }) {
 	const memory = useContext(SectionMemory);
-	const [initial] = useState(() => {
-		const decided = memory?.get(title) ?? open;
-		memory?.set(title, decided);
-		return decided;
-	});
-	const details = useRef(null);
+	const [isOpen, setOpen] = useState(() => memory?.get(title) ?? open);
+	useEffect(() => {
+		memory?.set(title, isOpen);
+	}, [
+		memory,
+		title,
+		isOpen
+	]);
 	useEffect(() => {
-		if (alert && details.current && !details.current.open) details.current.open = true;
+		if (alert) setOpen(true);
 	}, [alert]);
-	return /* @__PURE__ */ jsxs("details", {
-		ref: details,
-		open: initial,
-		onToggle: (e) => memory?.set(title, e.currentTarget.open),
-		className: "group border-t theme-border",
-		children: [/* @__PURE__ */ jsxs("summary", {
-			className: "flex cursor-pointer select-none list-none items-center gap-1.5 py-2.5 text-sm font-semibold [&::-webkit-details-marker]:hidden",
-			children: [/* @__PURE__ */ jsx(LuChevronRight, {
-				"aria-hidden": "true",
-				className: "h-3.5 w-3.5 shrink-0 theme-muted-text transition-transform group-open:rotate-90 motion-reduce:transition-none"
-			}), title]
-		}), /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx(Section, {
+		title,
+		open: isOpen,
+		onOpenChange: setOpen,
+		headingLevel: 4,
+		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-3 pb-4",
 			children: [description && /* @__PURE__ */ jsx("div", {
 				className: "text-xs theme-muted-text",
 				children: description
 			}), children]
-		})]
+		})
 	});
 }
-function FieldError({ message }) {
-	return message ? /* @__PURE__ */ jsx("div", {
-		className: "text-xs text-(--theme-error)",
-		children: message
-	}) : null;
-}
 /** The YAML key a field sets, beside its name; left out where the name already says it. */
 function KeyHint({ label, yamlKey }) {
 	return label.trim().toLowerCase() === yamlKey.toLowerCase() ? null : /* @__PURE__ */ jsx("code", {
 		"aria-hidden": "true",
-		className: "font-mono text-xs theme-muted-text",
+		className: "font-mono text-xs font-normal theme-muted-text",
 		children: yamlKey
 	});
 }
@@ -198,49 +188,29 @@ function KeyHint({ label, yamlKey }) {
 function labelled(label, yamlKey) {
 	return {
 		label,
-		labelHint: /* @__PURE__ */ jsx(KeyHint, {
+		hint: /* @__PURE__ */ jsx(KeyHint, {
 			label,
 			yamlKey
 		})
 	};
 }
-/** A field's name and help text, for controls without their own label; `actions` sit at its right. */
-function FieldLabel({ label, yamlKey, description, htmlFor, descriptionId, actions }) {
-	const nameClass = "text-[0.8125rem] font-medium";
-	const text = /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-col",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-baseline gap-x-1.5",
-			children: [htmlFor ? /* @__PURE__ */ jsx("label", {
-				htmlFor,
-				className: nameClass,
-				children: label
-			}) : /* @__PURE__ */ jsx("span", {
-				className: nameClass,
-				children: label
-			}), yamlKey && /* @__PURE__ */ jsx(KeyHint, {
-				label,
-				yamlKey
-			})]
-		}), /* @__PURE__ */ jsx("span", {
-			id: descriptionId,
-			className: "text-xs theme-muted-text",
-			children: description
-		})]
-	});
-	return actions ? /* @__PURE__ */ jsxs("div", {
-		className: "flex items-start justify-between gap-3",
-		children: [text, /* @__PURE__ */ jsx("div", {
-			className: "flex shrink-0 items-center gap-1",
-			children: actions
-		})]
-	}) : text;
-}
-/** A field's label and description above the editor that sets it. */
-function LabelledField({ children, ...label }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-1.5",
-		children: [/* @__PURE__ */ jsx(FieldLabel, { ...label }), children]
+/** A Field for a setting the YAML holds, with the key it sets beside its name. With `id`
+*  its label names the one control that takes that id; without, it names its controls as a
+*  group, as a list of rows or a set of choices wants. */
+function YamlField({ label, yamlKey, description, actions, error, required, id, children }) {
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint: yamlKey && /* @__PURE__ */ jsx(KeyHint, {
+			label,
+			yamlKey
+		}),
+		description: description || void 0,
+		actions,
+		error: error || void 0,
+		required,
+		id,
+		group: id === void 0,
+		children
 	});
 }
 /**
@@ -250,47 +220,46 @@ function LabelledField({ children, ...label }) {
 function ExpressionToggle({ active, onChange }) {
 	const t = useGraphEditorStrings();
 	return /* @__PURE__ */ jsx(IconButton, {
-		icon: /* @__PURE__ */ jsx(LuBraces, { className: "h-4 w-4" }),
+		icon: /* @__PURE__ */ jsx(ExpressionIcon, {}),
 		label: active ? t.stopExpression : t.useExpression,
 		size: "sm",
 		variant: "ghost",
-		active,
+		"data-selected": active || void 0,
 		onClick: () => onChange(!active)
 	});
 }
-function ToggleField({ label, yamlKey, description, checked, onChange, disabled }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between gap-3",
-		children: [/* @__PURE__ */ jsx(FieldLabel, {
-			label,
-			yamlKey,
-			description
-		}), /* @__PURE__ */ jsx(Switch, {
+function ToggleField({ label, yamlKey, description, checked, onChange, disabled, error }) {
+	const id = useId();
+	return /* @__PURE__ */ jsx(YamlField, {
+		label,
+		yamlKey,
+		description,
+		error,
+		id,
+		children: (control) => /* @__PURE__ */ jsx(Switch, {
+			...control,
+			nativeButton: true,
+			render: /* @__PURE__ */ jsx("button", { type: "button" }),
 			checked,
 			onCheckedChange: onChange,
-			"aria-label": label,
 			...disabled ? { disabled } : {}
-		})]
+		})
 	});
 }
-function ChoiceButtons({ options, value, onChange }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "flex flex-wrap gap-1",
-		children: options.map((option) => /* @__PURE__ */ jsx(FilterPill, {
-			active: value === option.value,
-			onClick: () => onChange(option.value),
-			children: option.label
-		}, option.value))
+/** One of a few choices. A YamlField around it names it; standing alone, `label` does. */
+function ChoiceButtons({ label, options, value, onChange }) {
+	return /* @__PURE__ */ jsx(SegmentedControl, {
+		label,
+		options,
+		value,
+		onValueChange: onChange
 	});
 }
 function AddRowButton({ label, onClick }) {
 	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
-		type: "button",
 		variant: "ghost",
 		size: "sm",
-		fullWidth: false,
-		icon: /* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }),
-		iconPosition: "left",
+		icon: /* @__PURE__ */ jsx(AddIcon, {}),
 		onClick,
 		children: label
 	}) });
@@ -309,9 +278,9 @@ function KeyValueEditor({ rows, onChange, error, valuePlaceholder, keyPlaceholde
 				valueSuggestions,
 				lint
 			}, key)),
-			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(ErrorText, { children: error }),
 			/* @__PURE__ */ jsx(AddRowButton, {
-				label: addLabel ?? t.addRow,
+				label: addLabel ?? t.common.add,
 				onClick: () => onChange([...rows, {
 					key: "",
 					value: ""
@@ -362,15 +331,15 @@ function KeyValueRow({ row, onChange, onRemove, keyPlaceholder, valuePlaceholder
 						})
 					}),
 					/* @__PURE__ */ jsx(IconButton, {
-						icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
-						label: t.removeRow,
+						icon: /* @__PURE__ */ jsx(RemoveIcon, {}),
+						label: t.common.remove,
 						variant: "ghost",
 						size: "sm",
 						onClick: onRemove
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx(FieldError, { message: lint.message }),
+			/* @__PURE__ */ jsx(ErrorText, { children: lint.message }),
 			lint.fixes
 		]
 	});
@@ -399,14 +368,14 @@ function StringListEditor({ label, values, onChange, addLabel, placeholder, erro
 						onValueChange: (next) => onChange(updateAt(values, i, next))
 					})
 				}), /* @__PURE__ */ jsx(IconButton, {
-					icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
-					label: t.removeRow,
+					icon: /* @__PURE__ */ jsx(RemoveIcon, {}),
+					label: t.common.remove,
 					variant: "ghost",
 					size: "sm",
 					onClick: () => onChange(removeAt(values, i))
 				})]
 			}, key)),
-			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(ErrorText, { children: error }),
 			/* @__PURE__ */ jsx(AddRowButton, {
 				label: addLabel,
 				onClick: () => onChange([...values, ""])
@@ -417,24 +386,19 @@ function StringListEditor({ label, values, onChange, addLabel, placeholder, erro
 function SuggestedInput({ label, yamlKey, description, value, onChange, suggestions, error, placeholder }) {
 	const id = useId();
 	const lint = useFieldLint(yamlKey, id, value, onChange);
-	return /* @__PURE__ */ jsxs(LabelledField, {
+	return /* @__PURE__ */ jsx(YamlField, {
 		label,
 		yamlKey,
-		description: description ?? "",
-		htmlFor: id,
-		...description ? { descriptionId: `${id}-help` } : {},
-		children: [
-			/* @__PURE__ */ jsx(SuggestionInput, {
-				id,
-				"aria-describedby": description ? `${id}-help` : void 0,
-				value,
-				placeholder,
-				suggestions: suggestions.map((option) => ({ value: option })),
-				onValueChange: onChange
-			}),
-			/* @__PURE__ */ jsx(FieldError, { message: error ?? lint.message }),
-			lint.fixes
-		]
+		description,
+		error: error ?? lint.message,
+		id,
+		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+			...control,
+			value,
+			placeholder,
+			suggestions: suggestions.map((option) => ({ value: option })),
+			onValueChange: onChange
+		}), lint.fixes] })
 	});
 }
 /** A text area that starts one line tall and grows with its text. */
@@ -472,11 +436,9 @@ function OpenOnAddSwitch({ open, onChange }) {
 		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)",
+			children: [/* @__PURE__ */ jsx(Checkbox, {
 				checked: open,
-				onChange: (e) => onChange(e.target.checked)
+				onCheckedChange: (next) => onChange(next)
 			}), t.openOnAdd]
 		})
 	});
@@ -512,18 +474,18 @@ function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked = f
 						footerStart,
 						openOnAdd && /* @__PURE__ */ jsx(OpenOnAddSwitch, { ...openOnAdd }),
 						/* @__PURE__ */ jsx("div", { className: "flex-1" }),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: ghostButtonClasses,
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
 							onClick: onClose,
-							children: t.cancel
+							children: t.common.cancel
 						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
+						/* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							size: "sm",
 							disabled: saveDisabled,
 							onClick: submit,
-							className: clsx(primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50"),
-							children: t.save
+							children: t.common.save
 						})
 					]
 				})
@@ -532,4 +494,4 @@ function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked = f
 	});
 }
 //#endregion
-export { AddRowButton, ChoiceButtons, DURATION, DialogShell, ENV_KEY, EXPRESSION, ExpressionToggle, FieldError, FieldLabel, GROWING_AREA, GrowingTextarea, KeyHint, KeyValueEditor, LabelledField, Section, SectionMemory, StringListEditor, SuggestedInput, ToggleField, asRecord, conditionText, countError, diffPatch, durationError, expressionError, flagError, flagOf, flagValue, isEmptyPatch, isScalar, labelled, openOnAddOf, orUndefined, parseCondition, parseCount, parseJson, parseScalar, removeAt, rowsError, rowsFrom, rowsTo, sameValue, text, unchangedValue, updateAt, useGrowingArea, useSectionMemory, withoutUndefined };
+export { AddRowButton, ChoiceButtons, DURATION, DialogSection, DialogShell, ENV_KEY, EXPRESSION, ExpressionToggle, GROWING_AREA, GrowingTextarea, KeyHint, KeyValueEditor, SectionMemory, StringListEditor, SuggestedInput, ToggleField, YamlField, asRecord, conditionText, countError, diffPatch, durationError, expressionError, flagError, flagOf, flagValue, isEmptyPatch, isScalar, labelled, openOnAddOf, orUndefined, parseCondition, parseCount, parseJson, parseScalar, removeAt, rowsError, rowsFrom, rowsTo, sameValue, text, unchangedValue, updateAt, useGrowingArea, useSectionMemory, withoutUndefined };

package/dist/graph/editorPrimitives.js

@@ -1,4 +1,4 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useSyncExternalStore } from "react";
 //#region src/graph/editorPrimitives.tsx
@@ -123,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: clsx("absolute rounded-md border-2 border-dashed border-(--theme-element) bg-(--theme-element)/10", className),
+		className: cx("absolute rounded-md border-2 border-dashed border-(--theme-accent) bg-(--theme-accent)/10", className),
 		style: place(box)
 	});
 }

package/dist/graph/editorRows.js

@@ -1,11 +1,8 @@
-import { BsThreeDots } from "../icons/bs/BsThreeDots.js";
-import { FaPlus } from "../icons/fa/FaPlus.js";
-import { MdDragHandle } from "../icons/md/MdDragHandle.js";
-import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { cx } from "../cx.js";
+import { AddIcon, DragHandleIcon, MoreIcon, WarningIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { MarqueeBox, place } from "./editorPrimitives.js";
 import { EDITOR_HANDLE_CLASS, NO_SELECTION, labelsOf, problemsIn, sameEdge, sameStep, selectionBounds, useGraphEditor, useSelectedEdges, useUi } from "./graphEditorState.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 //#region src/graph/editorRows.tsx
@@ -27,11 +24,11 @@ function GraphEditorCanvas() {
 			marquee && /* @__PURE__ */ jsx(MarqueeBox, { box: marquee }),
 			!marquee && drag?.payload.kind !== "jobs" && /* @__PURE__ */ jsx(SelectionBox, { api }),
 			indicator && /* @__PURE__ */ jsx("div", {
-				className: clsx("absolute rounded-full", refused ? "bg-(--theme-error)" : "bg-(--theme-element)"),
+				className: cx("absolute rounded-full", refused ? "bg-(--theme-error)" : "bg-(--theme-accent)"),
 				style: place(indicator)
 			}),
 			outline && /* @__PURE__ */ jsx("div", {
-				className: clsx("absolute rounded-md border-4", refused ? "border-(--theme-error)" : "border-(--theme-element)"),
+				className: cx("absolute rounded-md border-4", refused ? "border-(--theme-error)" : "border-(--theme-accent)"),
 				style: {
 					left: outline.left - 8,
 					top: outline.top - 4,
@@ -40,7 +37,7 @@ function GraphEditorCanvas() {
 				}
 			}),
 			(target?.kind === "connect" || target?.kind === "merge") && /* @__PURE__ */ jsx("div", {
-				className: clsx("absolute rounded-md border-4", (target.kind === "connect" ? target.edits : target.valid) ? "border-(--theme-element)" : "border-(--theme-error)"),
+				className: cx("absolute rounded-md border-4", (target.kind === "connect" ? target.edits : target.valid) ? "border-(--theme-accent)" : "border-(--theme-error)"),
 				style: {
 					left: target.box.left - 8,
 					top: target.box.top - 4,
@@ -57,7 +54,7 @@ function GraphEditorCanvas() {
 					y1: drag.origin.y,
 					x2: drag.content.x,
 					y2: drag.content.y,
-					stroke: target?.kind === "connect" && !target.edits ? "var(--theme-error)" : "var(--theme-element)",
+					stroke: target?.kind === "connect" && !target.edits ? "var(--theme-error)" : "var(--theme-accent)",
 					strokeWidth: 6,
 					strokeDasharray: "16 10"
 				})
@@ -76,7 +73,7 @@ function SelectionBox({ api }) {
 	const y = bounds.connectorY;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			className: "absolute rounded-xl border-2 border-dashed border-(--theme-element)",
+			className: "absolute rounded-xl border-2 border-dashed border-(--theme-accent)",
 			style: place(bounds)
 		}),
 		/* @__PURE__ */ jsx(PortCircle, {
@@ -106,7 +103,7 @@ function SelectionBox({ api }) {
 			children: /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": t.moveSelectionHint,
-				className: clsx(EDITOR_HANDLE_CLASS, "pointer-events-auto absolute flex h-8 w-8 cursor-grab items-center justify-center rounded-full border-4 border-(--theme-element) bg-(--theme-panel-bg)"),
+				className: cx(EDITOR_HANDLE_CLASS, "pointer-events-auto absolute flex h-8 w-8 cursor-grab items-center justify-center rounded-full border-4 border-(--theme-accent) bg-(--theme-panel-bg)"),
 				style: {
 					left: bounds.left - 16,
 					top: bounds.top - 16
@@ -117,7 +114,7 @@ function SelectionBox({ api }) {
 					label: labelsOf(jobs),
 					...anchor ? { anchor } : {}
 				}),
-				children: /* @__PURE__ */ jsx(MdDragHandle, { className: "h-5 w-5" })
+				children: /* @__PURE__ */ jsx(DragHandleIcon, { className: "h-5 w-5" })
 			})
 		})
 	] });
@@ -132,13 +129,13 @@ function BoxGrip({ jobs }) {
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"aria-label": t.moveBoxHint,
-			className: clsx(EDITOR_HANDLE_CLASS, "absolute -left-[18px] -top-[18px] flex h-8 w-8 cursor-grab items-center justify-center rounded-full border-4 theme-border bg-(--theme-panel-bg)"),
+			className: cx(EDITOR_HANDLE_CLASS, "absolute -left-[18px] -top-[18px] flex h-8 w-8 cursor-grab items-center justify-center rounded-full border-4 theme-border bg-(--theme-panel-bg)"),
 			onPointerDown: (e) => api.startDrag(e, {
 				kind: "jobs",
 				jobs,
 				label: labelsOf(jobs)
 			}),
-			children: /* @__PURE__ */ jsx(MdDragHandle, { className: "h-5 w-5" })
+			children: /* @__PURE__ */ jsx(DragHandleIcon, { className: "h-5 w-5" })
 		})
 	});
 }
@@ -162,7 +159,7 @@ function ProblemBadge({ api, job, step }) {
 				e.stopPropagation();
 				api.reveal({ line });
 			},
-			children: /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-[0.9em] w-[0.9em]" })
+			children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-[0.9em] w-[0.9em]" })
 		})
 	});
 }
@@ -172,7 +169,7 @@ function EditableRow({ api, selected, flagged, data, className, drag, toggle, re
 		role: "none",
 		...data,
 		...selected ? { "data-selected": "" } : {},
-		className: clsx(EDITOR_HANDLE_CLASS, "-mx-0.5 px-0.5", className, selected && "bg-(--theme-element)/15", flagged ? "ring-2 ring-(--theme-error)" : selected && "ring-2 ring-(--theme-element)"),
+		className: cx(EDITOR_HANDLE_CLASS, "-mx-0.5 px-0.5", className, selected && "bg-(--theme-accent)/15", flagged ? "ring-2 ring-(--theme-error)" : selected && "ring-2 ring-(--theme-accent)"),
 		onPointerDown: (e) => {
 			if (e.shiftKey) e.preventDefault();
 			api.startDrag(e, drag());
@@ -197,13 +194,13 @@ function EditableRow({ api, selected, flagged, data, className, drag, toggle, re
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": menuLabel,
-				className: clsx("cursor-pointer rounded theme-muted-text opacity-0 transition-opacity hover:bg-(--theme-muted-panel-bg) focus-visible:opacity-100", menuClassName),
+				className: cx("cursor-pointer rounded theme-muted-text opacity-0 transition-opacity hover:bg-(--theme-muted-panel-bg) focus-visible:opacity-100", menuClassName),
 				onPointerDown: (e) => e.stopPropagation(),
 				onClick: (e) => {
 					e.stopPropagation();
 					openMenu(e.currentTarget);
 				},
-				children: /* @__PURE__ */ jsx(BsThreeDots, { className: iconClassName })
+				children: /* @__PURE__ */ jsx(MoreIcon, { className: iconClassName })
 			})
 		]
 	});
@@ -266,7 +263,7 @@ function PortCircle({ side, at, draw, jobs, port, hint, zIndex }) {
 			role: "none",
 			"data-dag-port": side,
 			...port === "selection" ? { "data-dag-selection": "" } : { "data-dag-node": jobs[0] },
-			className: clsx(EDITOR_HANDLE_CLASS, "group/port pointer-events-auto absolute flex h-8 w-8 cursor-crosshair items-center justify-center"),
+			className: cx(EDITOR_HANDLE_CLASS, "group/port pointer-events-auto absolute flex h-8 w-8 cursor-crosshair items-center justify-center"),
 			style: {
 				left: at.x - 16,
 				top: at.y - 16,
@@ -279,7 +276,7 @@ function PortCircle({ side, at, draw, jobs, port, hint, zIndex }) {
 				label: labelsOf(jobs),
 				port
 			}),
-			children: [draw && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsx("span", { className: clsx("relative h-4 w-4 rounded-full group-hover/port:bg-(--theme-element)", dragging ? "bg-(--theme-element)" : draw && "bg-(--theme-border)") })]
+			children: [draw && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsx("span", { className: cx("relative h-4 w-4 rounded-full group-hover/port:bg-(--theme-accent)", dragging ? "bg-(--theme-accent)" : draw && "bg-(--theme-border)") })]
 		})
 	});
 }
@@ -379,7 +376,7 @@ function AddStepButton({ job }) {
 			e.stopPropagation();
 			api.addStep(job);
 		},
-		children: [/* @__PURE__ */ jsx(FaPlus, { className: "h-[0.8em] w-[0.8em]" }), t.addStep]
+		children: [/* @__PURE__ */ jsx(AddIcon, { className: "h-[0.8em] w-[0.8em]" }), t.addStep]
 	});
 }
 /** Connector hit area: a click selects the dependency, shift adds it, a right-click opens its menu. */
@@ -399,7 +396,7 @@ function EdgeHitPath({ d, edge }) {
 		stroke: "transparent",
 		strokeWidth: 28,
 		fill: "none",
-		className: clsx(EDITOR_HANDLE_CLASS, "outline-none focus-visible:[stroke:color-mix(in_srgb,var(--theme-element)_35%,transparent)]"),
+		className: cx(EDITOR_HANDLE_CLASS, "outline-none focus-visible:[stroke:color-mix(in_srgb,var(--theme-accent)_35%,transparent)]"),
 		style: {
 			pointerEvents: "stroke",
 			cursor: "pointer"
@@ -430,7 +427,7 @@ function EdgeEnds({ edge, start, end, zIndex }) {
 		children: /* @__PURE__ */ jsx("span", {
 			role: "none",
 			"data-dag-edge-end": side,
-			className: clsx(EDITOR_HANDLE_CLASS, "pointer-events-auto absolute flex h-8 w-8 items-center justify-center", inUse ? "cursor-not-allowed" : "cursor-grab"),
+			className: cx(EDITOR_HANDLE_CLASS, "pointer-events-auto absolute flex h-8 w-8 items-center justify-center", inUse ? "cursor-not-allowed" : "cursor-grab"),
 			style: {
 				left: at.x - 16,
 				top: at.y - 16,
@@ -439,7 +436,7 @@ function EdgeEnds({ edge, start, end, zIndex }) {
 			onPointerDown: (e) => {
 				if (!inUse) api.startEdgeEnd(e, edge, side, fixed);
 			},
-			children: /* @__PURE__ */ jsx("span", { className: "h-5 w-5 rounded-full border-4 border-(--theme-element) bg-(--theme-panel-bg)" })
+			children: /* @__PURE__ */ jsx("span", { className: "h-5 w-5 rounded-full border-4 border-(--theme-accent) bg-(--theme-panel-bg)" })
 		})
 	}, side);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [handle("from", start, end), handle("to", end, start)] });
@@ -457,7 +454,7 @@ function EmptyGraphEditor({ containerRef, overlays, height, removeBorder }) {
 			containerRef(el);
 		},
 		tabIndex: -1,
-		className: clsx("panel relative w-full overflow-hidden outline-none", removeBorder ? "border-none" : "border"),
+		className: cx("panel relative w-full overflow-hidden outline-none", removeBorder ? "border-none" : "border"),
 		style: { height },
 		children: overlays
 	});