@parallelworks/ui 0.40.1 → 0.42.0

package/dist/graph/editorRows.js

@@ -2,12 +2,12 @@ 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 { TOOLTIP_ID } from "../components/Tooltip.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 cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/editorRows.tsx
 /** Drop indicators, the connection line and the selection, drawn in the graph's own coordinates. */
 function GraphEditorCanvas() {
@@ -27,11 +27,11 @@ function GraphEditorCanvas() {
 			marquee && /* @__PURE__ */ jsx(MarqueeBox, { box: marquee }),
 			!marquee && drag?.payload.kind !== "jobs" && /* @__PURE__ */ jsx(SelectionBox, { api }),
 			indicator && /* @__PURE__ */ jsx("div", {
-				className: cx("absolute rounded-full", refused ? "bg-(--theme-error)" : "bg-(--theme-element)"),
+				className: clsx("absolute rounded-full", refused ? "bg-(--theme-error)" : "bg-(--theme-element)"),
 				style: place(indicator)
 			}),
 			outline && /* @__PURE__ */ jsx("div", {
-				className: cx("absolute rounded-md border-4", refused ? "border-(--theme-error)" : "border-(--theme-element)"),
+				className: clsx("absolute rounded-md border-4", refused ? "border-(--theme-error)" : "border-(--theme-element)"),
 				style: {
 					left: outline.left - 8,
 					top: outline.top - 4,
@@ -40,7 +40,7 @@ function GraphEditorCanvas() {
 				}
 			}),
 			(target?.kind === "connect" || target?.kind === "merge") && /* @__PURE__ */ jsx("div", {
-				className: cx("absolute rounded-md border-4", (target.kind === "connect" ? target.edits : target.valid) ? "border-(--theme-element)" : "border-(--theme-error)"),
+				className: clsx("absolute rounded-md border-4", (target.kind === "connect" ? target.edits : target.valid) ? "border-(--theme-element)" : "border-(--theme-error)"),
 				style: {
 					left: target.box.left - 8,
 					top: target.box.top - 4,
@@ -74,7 +74,7 @@ function SelectionBox({ api }) {
 	if (!grid || !bounds) return null;
 	const anchor = grid.cols.flat(2).find((job) => jobs.includes(job));
 	const y = bounds.connectorY;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "absolute rounded-xl border-2 border-dashed border-(--theme-element)",
 			style: place(bounds)
@@ -101,23 +101,24 @@ function SelectionBox({ api }) {
 			port: "selection",
 			hint: t.selectionOutHint
 		}),
-		/* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": t.moveSelectionHint,
-			"data-tooltip-id": TOOLTIP_ID,
-			"data-tooltip-content": t.moveSelectionHint,
-			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-element) bg-(--theme-panel-bg)"),
-			style: {
-				left: bounds.left - 16,
-				top: bounds.top - 16
-			},
-			onPointerDown: (e) => api.startDrag(e, {
-				kind: "jobs",
-				jobs,
-				label: labelsOf(jobs),
-				...anchor ? { anchor } : {}
-			}),
-			children: /* @__PURE__ */ jsx(MdDragHandle, { className: "h-5 w-5" })
+		/* @__PURE__ */ jsx(Tooltip, {
+			content: t.moveSelectionHint,
+			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)"),
+				style: {
+					left: bounds.left - 16,
+					top: bounds.top - 16
+				},
+				onPointerDown: (e) => api.startDrag(e, {
+					kind: "jobs",
+					jobs,
+					label: labelsOf(jobs),
+					...anchor ? { anchor } : {}
+				}),
+				children: /* @__PURE__ */ jsx(MdDragHandle, { className: "h-5 w-5" })
+			})
 		})
 	] });
 }
@@ -126,18 +127,19 @@ function BoxGrip({ jobs }) {
 	const api = useGraphEditor();
 	if (!api) return null;
 	const t = api.t;
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": t.moveBoxHint,
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": t.moveBoxHint,
-		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" })
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: t.moveBoxHint,
+		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)"),
+			onPointerDown: (e) => api.startDrag(e, {
+				kind: "jobs",
+				jobs,
+				label: labelsOf(jobs)
+			}),
+			children: /* @__PURE__ */ jsx(MdDragHandle, { className: "h-5 w-5" })
+		})
 	});
 }
 var onBadge = (target) => target instanceof Element && !!target.closest("[data-problem-badge]");
@@ -148,19 +150,20 @@ function ProblemBadge({ api, job, step }) {
 	const messages = useUi(api, (state) => mine(state.problems).map((problem) => problem.message).join("\n"), "");
 	const line = useUi(api, (state) => mine(state.problems)[0]?.line ?? 0, 0);
 	if (!messages) return null;
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"data-problem-badge": "",
-		"aria-label": t.problemCount(messages.split("\n").length),
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": messages,
-		className: "cursor-pointer rounded p-0.5 text-(--theme-error) hover:bg-(--theme-muted-panel-bg)",
-		onPointerDown: (e) => e.stopPropagation(),
-		onClick: (e) => {
-			e.stopPropagation();
-			api.reveal({ line });
-		},
-		children: /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-[0.9em] w-[0.9em]" })
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: messages,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-problem-badge": "",
+			"aria-label": t.problemCount(messages.split("\n").length),
+			className: "cursor-pointer rounded p-0.5 text-(--theme-error) hover:bg-(--theme-muted-panel-bg)",
+			onPointerDown: (e) => e.stopPropagation(),
+			onClick: (e) => {
+				e.stopPropagation();
+				api.reveal({ line });
+			},
+			children: /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-[0.9em] w-[0.9em]" })
+		})
 	});
 }
 /** What a job or step row does in the editor: drag, shift-click to select, a menu, its problems. */
@@ -169,7 +172,7 @@ function EditableRow({ api, selected, flagged, data, className, drag, toggle, re
 		role: "none",
 		...data,
 		...selected ? { "data-selected": "" } : {},
-		className: cx(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: 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)"),
 		onPointerDown: (e) => {
 			if (e.shiftKey) e.preventDefault();
 			api.startDrag(e, drag());
@@ -186,7 +189,7 @@ function EditableRow({ api, selected, flagged, data, className, drag, toggle, re
 		onContextMenu: (e) => {
 			e.preventDefault();
 			e.stopPropagation();
-			openMenu(e.clientX, e.clientY);
+			openMenu(e);
 		},
 		children: [
 			children,
@@ -194,12 +197,11 @@ function EditableRow({ api, selected, flagged, data, className, drag, toggle, re
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": menuLabel,
-				className: cx("cursor-pointer rounded theme-muted-text opacity-0 transition-opacity hover:bg-(--theme-muted-panel-bg) focus-visible:opacity-100", menuClassName),
+				className: clsx("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();
-					const r = e.currentTarget.getBoundingClientRect();
-					openMenu(r.right, r.bottom);
+					openMenu(e.currentTarget);
 				},
 				children: /* @__PURE__ */ jsx(BsThreeDots, { className: iconClassName })
 			})
@@ -237,11 +239,11 @@ function EditableJobRow({ job, label, badge = true, children }) {
 			return api.store.get().selection.includes(job);
 		},
 		reveal: () => api.reveal({ job }),
-		openMenu: (x, y) => api.openJobMenu(x, y, job),
+		openMenu: (at) => api.openJobMenu(at, job),
 		menuLabel: t.jobActions,
 		menuClassName: "p-1 group-hover/row:opacity-100",
 		iconClassName: "h-[1em] w-[1em]",
-		badges: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ProblemBadge, {
+		badges: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProblemBadge, {
 			api,
 			job
 		}), badge && api.isMatrixJob(job) && /* @__PURE__ */ jsx("span", {
@@ -257,26 +259,28 @@ function PortCircle({ side, at, draw, jobs, port, hint, zIndex }) {
 	const drag = useUi(api, (state) => state.drag, null);
 	if (!api) return null;
 	const dragging = drag?.payload.kind === "connect" && drag.payload.port === port && drag.payload.side === side;
-	return /* @__PURE__ */ jsxs("span", {
-		role: "none",
-		"data-dag-port": side,
-		...port === "selection" ? { "data-dag-selection": "" } : { "data-dag-node": jobs[0] },
-		...drag ? {} : { "data-tooltip-id": TOOLTIP_ID },
-		"data-tooltip-content": hint,
-		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,
-			...zIndex === void 0 ? {} : { zIndex }
-		},
-		onPointerDown: (e) => api.startDrag(e, {
-			kind: "connect",
-			from: jobs,
-			side,
-			label: labelsOf(jobs),
-			port
-		}),
-		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-element)", dragging ? "bg-(--theme-element)" : draw && "bg-(--theme-border)") })]
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: hint,
+		disabled: Boolean(drag),
+		children: /* @__PURE__ */ jsxs("span", {
+			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"),
+			style: {
+				left: at.x - 16,
+				top: at.y - 16,
+				...zIndex === void 0 ? {} : { zIndex }
+			},
+			onPointerDown: (e) => api.startDrag(e, {
+				kind: "connect",
+				from: jobs,
+				side,
+				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)") })]
+		})
 	});
 }
 /**
@@ -288,7 +292,7 @@ function NodePorts({ jobs, left, right, drawLeft, drawRight, zIndex }) {
 	if (!api) return null;
 	const t = api.t;
 	const port = `node:${jobs[0]}`;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PortCircle, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PortCircle, {
 		side: "in",
 		at: left,
 		draw: drawLeft,
@@ -351,7 +355,7 @@ function EditableStepRow({ job, index, label, children }) {
 			job,
 			step: index
 		}),
-		openMenu: (x, y) => api.openStepMenu(x, y, job, index),
+		openMenu: (at) => api.openStepMenu(at, job, index),
 		menuLabel: t.stepActions,
 		menuClassName: "p-0.5 group-hover/step:opacity-100",
 		iconClassName: "h-[0.9em] w-[0.9em]",
@@ -395,7 +399,7 @@ function EdgeHitPath({ d, edge }) {
 		stroke: "transparent",
 		strokeWidth: 28,
 		fill: "none",
-		className: cx(EDITOR_HANDLE_CLASS, "outline-none focus-visible:[stroke:color-mix(in_srgb,var(--theme-element)_35%,transparent)]"),
+		className: clsx(EDITOR_HANDLE_CLASS, "outline-none focus-visible:[stroke:color-mix(in_srgb,var(--theme-element)_35%,transparent)]"),
 		style: {
 			pointerEvents: "stroke",
 			cursor: "pointer"
@@ -409,7 +413,7 @@ function EdgeHitPath({ d, edge }) {
 		},
 		onContextMenu: (e) => {
 			e.preventDefault();
-			api.openEdgeMenu(e.clientX, e.clientY, edge);
+			api.openEdgeMenu(e, edge);
 		}
 	});
 }
@@ -420,23 +424,25 @@ function EdgeEnds({ edge, start, end, zIndex }) {
 	if (!api) return null;
 	const t = api.t;
 	const inUse = api.edgeInUse(edge);
-	const handle = (side, at, fixed) => /* @__PURE__ */ jsx("span", {
-		role: "none",
-		"data-dag-edge-end": side,
-		...drag ? {} : { "data-tooltip-id": TOOLTIP_ID },
-		"data-tooltip-content": inUse ? t.dependencyInUse : t.moveDependencyEnd,
-		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,
-			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)" })
+	const handle = (side, at, fixed) => /* @__PURE__ */ jsx(Tooltip, {
+		content: inUse ? t.dependencyInUse : t.moveDependencyEnd,
+		disabled: Boolean(drag),
+		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"),
+			style: {
+				left: at.x - 16,
+				top: at.y - 16,
+				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)" })
+		})
 	}, side);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [handle("from", start, end), handle("to", end, start)] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [handle("from", start, end), handle("to", end, start)] });
 }
 /** Shown in place of the graph when the workflow has no jobs yet. */
 /** The canvas of a graph with no jobs, which takes the graph's keys, so undo and paste still work. */
@@ -451,7 +457,7 @@ function EmptyGraphEditor({ containerRef, overlays, height, removeBorder }) {
 			containerRef(el);
 		},
 		tabIndex: -1,
-		className: cx("panel relative w-full overflow-hidden outline-none", removeBorder ? "border-none" : "border"),
+		className: clsx("panel relative w-full overflow-hidden outline-none", removeBorder ? "border-none" : "border"),
 		style: { height },
 		children: overlays
 	});

package/dist/graph/fieldProblems.js

@@ -1,9 +1,9 @@
-import { useWorkflowEditing } from "../components/Provider.js";
 import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
 import { keyedByContent } from "../components/keys.js";
+import { useWorkflowEditing } from "../components/Provider.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 //#region src/graph/fieldProblems.tsx
 var FieldProblemsContext = createContext(null);
 var keyOf = (at) => at.join(".");

package/dist/graph/graphEditorState.d.ts

@@ -1,4 +1,5 @@
 import { type PointerEvent as ReactPointerEvent } from 'react';
+import type { MenuAnchor } from '../components/ContextMenu.js';
 import type { GraphEdit, GraphSlot, NeedRef, NudgeDirection, StepRef } from '../editing.js';
 import type { EditorProblem, RevealTarget } from './editorApi.js';
 import type { Box, Point, Store } from './editorPrimitives.js';
@@ -131,9 +132,9 @@ export interface GraphEditorApi {
     t: GraphEditorStrings;
     isMatrixJob: (job: string) => boolean;
     startDrag: (e: ReactPointerEvent, payload: DragPayload) => void;
-    openJobMenu: (x: number, y: number, job: string) => void;
-    openStepMenu: (x: number, y: number, job: string, index: number) => void;
-    openEdgeMenu: (x: number, y: number, edge: EdgeSelection) => void;
+    openJobMenu: (at: MenuAnchor, job: string) => void;
+    openStepMenu: (at: MenuAnchor, job: string, index: number) => void;
+    openEdgeMenu: (at: MenuAnchor, edge: EdgeSelection) => void;
     /**
      * Selects a connector alone, or with `add` adds it to the selected connectors or takes it out;
      * selected jobs or steps give way to it.

package/dist/graph/inputRefs.js

@@ -1,14 +1,14 @@
 import { FaPlus } from "../icons/fa/FaPlus.js";
+import { Switch } from "../components/Switch.js";
 import { IconButton } from "../components/IconButton.js";
 import { Textarea, fieldBoxClasses } from "../components/Input.js";
-import { Toggle } from "../components/Toggle.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { useFieldLint } from "./fieldProblems.js";
 import { SuggestionInput } from "./SuggestionInput.js";
 import { ExpressionToggle, FieldError, FieldLabel, GROWING_AREA, LabelledField, flagError, flagValue, text, useGrowingArea } from "./editorFields.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/inputRefs.tsx
 /** Every input with a value, where a run reads it: groups nest unless flattened, lists hide their rows. */
 function inputRefs(editing, inputs) {
@@ -124,15 +124,15 @@ function insertAt(element, value, reference) {
 var ONE_OF = ["dropdown", "radio"];
 /** A text field that takes any value, expressions included, with suggestions to pick from. */
 function ExpressionInput({ id, label, value, onChange, suggestions = [], placeholder, error, describedBy, required }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
 		id,
-		ariaLabel: label,
+		"aria-label": label,
 		"aria-describedby": describedBy,
 		required,
 		value,
 		placeholder,
 		suggestions,
-		onChange
+		onValueChange: onChange
 	}), /* @__PURE__ */ jsx(FieldError, { message: error })] });
 }
 /** Conditions on the form's switches and choices, for fields that run on one. */
@@ -170,10 +170,10 @@ function FlagField({ label, yamlKey, description, value, original, fallback = fa
 					description
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex shrink-0 items-center gap-1",
-					children: [!typed && /* @__PURE__ */ jsx(Toggle, {
+					children: [!typed && /* @__PURE__ */ jsx(Switch, {
 						checked,
-						onChange: (on) => onChange(flagValue(on, fallback, original)),
-						label
+						onCheckedChange: (on) => onChange(flagValue(on, fallback, original)),
+						"aria-label": label
 					}), /* @__PURE__ */ jsx(ExpressionToggle, {
 						active: typed,
 						onChange: (on) => {
@@ -227,7 +227,7 @@ function ConditionField({ label, yamlKey, description, value, onChange, source,
 		description,
 		htmlFor: id,
 		descriptionId: `${id}-help`,
-		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [allRefs(source).length > 0 && /* @__PURE__ */ jsx(InsertRefSelect, {
+		actions: /* @__PURE__ */ jsxs(Fragment, { children: [allRefs(source).length > 0 && /* @__PURE__ */ jsx(InsertRefSelect, {
 			source,
 			label: t.insertValue,
 			onInsert: insert

package/dist/graph/settingsViews.js

@@ -1,10 +1,10 @@
-import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { Tooltip } from "../components/Tooltip.js";
 import Loader from "../components/Loader.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { ProblemList } from "./fieldProblems.js";
 import { ChoiceButtons, FieldError } from "./editorFields.js";
-import { Suspense, lazy } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
 //#region src/graph/settingsViews.tsx
 var MonacoEditor = lazy(() => import("../editor/Monaco.js"));
 function yamlProblem(yaml, t, editing) {
@@ -13,10 +13,9 @@ function yamlProblem(yaml, t, editing) {
 }
 function ViewSwitch({ yaml, onForm, onYaml }) {
 	const t = useGraphEditorStrings();
-	return /* @__PURE__ */ jsx("div", {
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": t.help.view,
-		children: /* @__PURE__ */ jsx(ChoiceButtons, {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: t.help.view,
+		children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ChoiceButtons, {
 			options: [{
 				value: "yaml",
 				label: t.viewYaml
@@ -26,7 +25,7 @@ function ViewSwitch({ yaml, onForm, onYaml }) {
 			}],
 			value: yaml ? "yaml" : "form",
 			onChange: (view) => view === "yaml" ? onYaml() : onForm()
-		})
+		}) })
 	});
 }
 var NO_SCOPED = {

package/dist/graph/stepWith.js

@@ -1,5 +1,5 @@
-import { useRepoSuggestions, useWorkflowActions, useWorkflowEditing, useWorkflowJsonResolver } from "../components/Provider.js";
 import { IoMdClose } from "../icons/io/IoMdClose.js";
+import { useRepoSuggestions, useWorkflowActions, useWorkflowEditing, useWorkflowJsonResolver } from "../components/Provider.js";
 import { IconButton } from "../components/IconButton.js";
 import { Input, Textarea } from "../components/Input.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
@@ -10,8 +10,8 @@ import { SuggestionInput } from "./SuggestionInput.js";
 import { ChoiceButtons, EXPRESSION, FieldError, FieldLabel, KeyValueEditor, LabelledField, StringListEditor, SuggestedInput, ToggleField, isScalar, labelled, parseJson, parseScalar, rowsError, rowsFrom, rowsTo, sameValue } from "./editorFields.js";
 import { ValueOrInputField, refSuggestions } from "./inputRefs.js";
 import { DynamicForm } from "../form/Form.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/stepWith.tsx
 var REPO_INPUTS = [{
 	key: "$yaml",
@@ -262,7 +262,7 @@ function RepositoryForm({ uses, draft, onUses, onDraft }) {
 		initialValues: initial,
 		labelPosition: "top",
 		workflowForm: true,
-		setValues: (values) => {
+		onValuesChange: (values) => {
 			if ([
 				"repo",
 				"branch",
@@ -299,14 +299,14 @@ function UsesPicker({ uses, onUses, choices, draft, onDraft, error }) {
 	const options = (prefix) => choices.filter((choice) => choice.startsWith(prefix));
 	const select = (values, placeholder, labels) => /* @__PURE__ */ jsx(SuggestionInput, {
 		id,
-		ariaLabel: t.fields.uses,
+		"aria-label": t.fields.uses,
 		value: uses,
 		placeholder,
 		suggestions: values.map((value) => ({
 			value,
 			label: labels?.(value)
 		})),
-		onChange: onUses
+		onValueChange: onUses
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-2",
@@ -447,7 +447,7 @@ function WithEditor({ uses, draft, original, onChange, error, source }) {
 					original,
 					onChange
 				}, key)),
-				kind !== "action" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				kind !== "action" && /* @__PURE__ */ jsxs(Fragment, { children: [
 					known.map(([key, raw]) => {
 						const definition = asRecord(raw);
 						const label = String(definition["label"] ?? "");

package/dist/index.d.ts

@@ -1,52 +1,51 @@
-export { AddMenu, type HeaderAddMenuItem } from './components/AddMenu.js';
+export { ActionMenu } from './components/ActionMenu.js';
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, avatarInitials, } from './components/Avatar.js';
-export { BareModal, modalPanelClasses } from './components/BareModal.js';
 export { BreadcrumbProvider, type IBreadcrumbItem, useBreadcrumb, useClearBreadcrumbs, useHideBreadcrumbs, useSetBreadcrumbs, useSetDefaultBreadcrumbs, } from './components/Breadcrumbs.js';
 export { Button, MethodButton } from './components/Button.js';
 export { default as Callout } from './components/Callout.js';
 export { Card, CardHeader } from './components/Card.js';
-export { ControlledCollapsiblePanel, MaybeCollapsible, UncontrolledCollapsiblePanel, } from './components/CollapsiblePanel.js';
+export { Autocomplete, type AutocompleteProps, Combobox, type ComboboxGroup, type ComboboxItem, type ComboboxItems, type ComboboxProps, } from './components/Combobox.js';
 export { ConfirmModal } from './components/ConfirmModal.js';
+export { type MenuAnchor, type OpenMenu, type OpenMenuOptions, useContextMenu, } from './components/ContextMenu.js';
 export { CopyCodeBlock, default as CopyToClipboard } from './components/CopyToClipboard.js';
-export { CREATE_MODAL_SELECT_FILTER_THRESHOLD, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, type CreateModalSelectOption, CreateModalSwitch, CreateModalTextarea, } from './components/CreateModal.js';
+export { CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea, } from './components/CreateModal.js';
 export { DescriptionListItem, default as DescriptionList } from './components/DescriptionList.js';
-export type { IProps as DropdownProps } from './components/Dropdown.js';
-export { default as Dropdown } from './components/Dropdown.js';
-export type { ICategory, IOptions } from './components/dropdownUtils.js';
-export { DropdownCaret, filterOption, flattenOptions, isCategory, isOption, toggleSetMember, } from './components/dropdownUtils.js';
 export { default as EmptyState } from './components/EmptyState.js';
 export { default as Filter } from './components/Filter.js';
 export { FilterPill } from './components/FilterPill.js';
 export { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses, } from './components/ghostButton.js';
+export { HoverCard, type HoverCardProps } from './components/HoverCard.js';
 export { IconButton } from './components/IconButton.js';
 export { Indicator } from './components/Indicator.js';
+export { formatInfoTipContent, InfoTip } from './components/InfoTip.js';
 export { Input, Textarea } from './components/Input.js';
 export { inputClasses } from './components/inputClasses.js';
 export { LetterBadge } from './components/LetterBadge.js';
-export { default as CustomListbox } from './components/Listbox.js';
 export { default as Loader } from './components/Loader.js';
 export type { MarkdownProps } from './components/Markdown.js';
 export { default as Markdown } from './components/Markdown.js';
-export { default as MultiSelectDropdown } from './components/MultiSelect.js';
+export { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, type MenuPopupProps, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, } from './components/Menu.js';
+export { type MenuAction, type MenuDivider, MenuEntries, type MenuEntry, MenuFilter, type MenuSearch, type MenuSubmenu, menuDivider, } from './components/MenuEntries.js';
+export { Modal, ModalDescription, type ModalProps, ModalTitle, modalPanelClassName, } from './components/Modal.js';
 export { Overview } from './components/Overview.js';
-export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, headerActionButtonClasses, PageHeader, type PageHeaderBreadcrumb, type PageHeaderCrumb, } from './components/PageHeader.js';
+export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, headerActionButtonClasses, PageHeader, type PageHeaderBreadcrumb, type PageHeaderCrumb, } from './components/PageHeader.js';
 export { Pagination } from './components/Pagination.js';
 export { type PersistedStateHook, type RunFileResult, type UIData, type UILinkComponent, type UINavigation, type UINotify, UIProvider, type UISlots, type UIStrings, type UIToastId, type UIToastOptions, type UIToastUpdate, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, type WorkflowEngineSource, type WorkflowJsonRef, } from './components/Provider.js';
+export { Radio, RadioGroup, type RadioProps } from './components/Radio.js';
 export { RequiredMark } from './components/RequiredMark.js';
 export { useRelativeTime } from './components/relativeTime.js';
 export { default as SectionHeader } from './components/SectionHeader.js';
 export { SegmentedControl, type SegmentedOption } from './components/SegmentedControl.js';
+export { Select, type SelectItem, type SelectProps } from './components/Select.js';
 export { SettingModeOption } from './components/SettingModeOption.js';
 export { SettingRow, SettingSection } from './components/SettingRow.js';
 export { default as SettingsCard } from './components/SettingsCard.js';
 export { default as SettingsGroup } from './components/SettingsGroup.js';
 export { default as Sort, type TDirection } from './components/Sort.js';
 export { type BadgeVariant, StatusBadge, StatusDot, statusTextClass, } from './components/StatusBadge.js';
-export { default as SwitchToggle } from './components/SwitchToggle.js';
-export { default as SwitchToggleSmall } from './components/SwitchToggleSmall.js';
+export { Switch, type SwitchProps } from './components/Switch.js';
 export { CompactTable, Table } from './components/Table.js';
-export { Toggle } from './components/Toggle.js';
-export { formatTooltipContent, GlobalTooltip, TOOLTIP_ID, TooltipInfo, truncationTooltipProps, } from './components/Tooltip.js';
+export { Tooltip, type TooltipProps, TooltipProvider, type TooltipSide, } from './components/Tooltip.js';
 export { useCssIsDark } from './components/useCssIsDark.js';
 export type { EditRefusalReason, FieldPatch, GraphEdit, GraphEditResult, GraphEditState, GraphLayout, GraphPosition, GraphSlot, InputEdit, InputPath, LintFix, NeedRef, StepRef, WorkflowAction, WorkflowActionInput, WorkflowEditing, WorkflowLintContext, WorkflowLintProblem, } from './editing.js';
 export type { EngineJob, EngineStep, EvaluateOptions, ExpansionKeys, LogCommand, LogSegment, MatrixGroup, ProcessedLogLine, RunStatus, WorkflowEngine, WorkflowVariable, WorkflowVariables, } from './engine.js';