@parallelworks/ui 0.40.1 → 0.42.0

package/dist/graph/GraphEditor.js

@@ -1,4 +1,3 @@
-import { useWorkflowEditing } from "../components/Provider.js";
 import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
 import { BsGrid } from "../icons/bs/BsGrid.js";
 import { FaEdit } from "../icons/fa/FaEdit.js";
@@ -7,8 +6,10 @@ import { FaPlus } from "../icons/fa/FaPlus.js";
 import { HiDuplicate } from "../icons/hi/HiDuplicate.js";
 import { IoMdClose } from "../icons/io/IoMdClose.js";
 import { MdRefresh } from "../icons/md/MdRefresh.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 { createStore, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside } from "./editorPrimitives.js";
 import { jobLabel } from "./util.js";
 import { EDITOR_HANDLE_CLASS, NO_EDGES, NO_PROBLEMS, NO_SELECTION, NO_STEPS, contentBox, labelsOf, sameEdge, sameStep, selectionBounds, toContent, useUi } from "./graphEditorState.js";
@@ -20,9 +21,9 @@ import { JobDialog, StepDialog } from "./GraphEditorDialogs.js";
 import { overlaps, typing } from "./editorApi.js";
 import { MOD_KEY } from "./ShortcutsButton.js";
 import { AddChip, BarDivider, DragLabel, EditorBar } from "./editorChrome.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/GraphEditor.tsx
 var EDGE_ZONE = 48;
 var INDICATOR = 6;
@@ -331,7 +332,7 @@ function useGraphEditorState({ editor, jobs, yamlJobs, inputs, workflow, layout,
 		layout,
 		container
 	};
-	const rowMenu = useRowMenu();
+	const rowMenu = useContextMenu();
 	const openMenu = useMemo(() => returningFocus(rowMenu.openMenu, () => latest.current.container), [rowMenu.openMenu]);
 	const contextMenu = rowMenu.contextMenu;
 	useFocusAfterDialog(store, () => latest.current.container);
@@ -716,60 +717,53 @@ function useGraphEditorState({ editor, jobs, yamlJobs, inputs, workflow, layout,
 					port: ""
 				}, [other]);
 				return edits ? [{
-					kind: "action",
 					label: jobLabel(other),
-					onSelect: () => connectWith(edits, {
+					onClick: () => connectWith(edits, {
 						from: [job],
 						side
 					})
 				}] : [];
 			});
 			return items.length > 0 ? [{
-				kind: "submenu",
 				label,
 				icon: /* @__PURE__ */ jsx(FaLink, {}),
 				items
 			}] : [];
 		};
-		const openJobMenu = (x, y, job) => {
+		const openJobMenu = (at, job) => {
 			const matrix = isMatrix(latest.current.source[job]);
 			const items = [
 				{
-					kind: "action",
 					label: matrix ? t.editMatrix : t.editJob,
 					icon: matrix ? /* @__PURE__ */ jsx(BsGrid, {}) : /* @__PURE__ */ jsx(FaEdit, {}),
-					onSelect: () => editJob(job)
+					onClick: () => editJob(job)
 				},
 				{
-					kind: "action",
 					label: t.duplicate,
 					icon: /* @__PURE__ */ jsx(HiDuplicate, {}),
-					onSelect: () => edit({
+					onClick: () => edit({
 						type: "duplicateJob",
 						job,
 						layout: materialize()
 					})
 				},
 				{
-					kind: "action",
 					label: t.addStep,
 					icon: /* @__PURE__ */ jsx(FaPlus, {}),
-					onSelect: () => addStep(job)
+					onClick: () => addStep(job)
 				},
 				matrix ? {
-					kind: "action",
 					label: t.removeMatrix,
 					icon: /* @__PURE__ */ jsx(IoMdClose, {}),
-					onSelect: () => edit({
+					onClick: () => edit({
 						type: "setMatrix",
 						job,
 						variables: null
 					})
 				} : {
-					kind: "action",
 					label: t.makeMatrix,
 					icon: /* @__PURE__ */ jsx(BsGrid, {}),
-					onSelect: () => edit({
+					onClick: () => edit({
 						type: "setMatrix",
 						job,
 						variables: [["value", [1, 2]]]
@@ -777,32 +771,29 @@ function useGraphEditorState({ editor, jobs, yamlJobs, inputs, workflow, layout,
 				},
 				...connectMenu(job, "in", t.menuDependsOn),
 				...connectMenu(job, "out", t.menuNeededBy),
-				{ kind: "divider" },
+				menuDivider,
 				{
-					kind: "action",
 					label: t.deleteJob,
 					icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
 					destructive: true,
-					onSelect: () => edit({
+					onClick: () => edit({
 						type: "deleteJob",
 						jobs: [job]
 					})
 				}
 			];
-			openMenu(x, y, items);
+			openMenu(at, items);
 		};
-		const openStepMenu = (x, y, job, index) => {
-			openMenu(x, y, [{
-				kind: "action",
+		const openStepMenu = (at, job, index) => {
+			openMenu(at, [{
 				label: t.editStep,
 				icon: /* @__PURE__ */ jsx(FaEdit, {}),
-				onSelect: () => editStep(job, index)
+				onClick: () => editStep(job, index)
 			}, {
-				kind: "action",
 				label: t.deleteStep,
 				icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
 				destructive: true,
-				onSelect: () => edit({
+				onClick: () => edit({
 					type: "deleteStep",
 					job,
 					index
@@ -888,20 +879,19 @@ function useGraphEditorState({ editor, jobs, yamlJobs, inputs, workflow, layout,
 			});
 			return true;
 		};
-		const openEdgeMenu = (x, y, edge) => {
+		const openEdgeMenu = (at, edge) => {
 			const cols = gridRef.current?.cols ?? [];
 			const deps = boxOf(cols, edge.from);
 			const targets = boxOf(cols, edge.to);
 			const refs = edgeRefs(edge);
 			const inUse = refsInUse(refs);
 			const items = [{
-				kind: "action",
 				label: t.removeDependency,
 				icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
 				destructive: true,
 				disabled: inUse,
-				tooltip: inUse ? t.dependencyInUse : void 0,
-				onSelect: () => edit({
+				disabledReason: inUse ? t.dependencyInUse : void 0,
+				onClick: () => edit({
 					type: "disconnect",
 					needs: refs
 				})
@@ -909,11 +899,10 @@ function useGraphEditorState({ editor, jobs, yamlJobs, inputs, workflow, layout,
 			if (deps.length === 1 && isMatrix(latest.current.source[edge.from])) {
 				const any = refs.length > 0 && refs.every((r) => r.need.endsWith(":any"));
 				items.unshift({
-					kind: "action",
 					label: t.waitForAny,
 					icon: /* @__PURE__ */ jsx(BsGrid, {}),
-					selected: any,
-					onSelect: () => edit({
+					checked: any,
+					onClick: () => edit({
 						type: "setNeedAny",
 						jobs: targets,
 						dep: edge.from,
@@ -922,7 +911,7 @@ function useGraphEditorState({ editor, jobs, yamlJobs, inputs, workflow, layout,
 				});
 			}
 			if (!store.get().edges.some((other) => sameEdge(other, edge))) selectEdge(edge, false);
-			openMenu(x, y, items);
+			openMenu(at, items);
 		};
 		const copySelection = () => {
 			const yml = latest.current.editor?.readSource?.();
@@ -1298,7 +1287,7 @@ function useGraphEditorState({ editor, jobs, yamlJobs, inputs, workflow, layout,
 	]);
 	return {
 		api,
-		overlays: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		overlays: /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(EditorToolbar, {
 				api,
 				editor,
@@ -1451,7 +1440,7 @@ function EditorToolbar({ api, editor, layout }) {
 	return /* @__PURE__ */ jsxs(EditorBar, {
 		editor: undoable,
 		groups: graphShortcuts(t),
-		className: cx(EDITOR_HANDLE_CLASS, "absolute bottom-2 right-2 z-10 max-w-[calc(100%-1rem)]"),
+		className: clsx(EDITOR_HANDLE_CLASS, "absolute bottom-2 right-2 z-10 max-w-[calc(100%-1rem)]"),
 		children: [
 			chip(false),
 			chip(true),
@@ -1474,9 +1463,9 @@ function DragOverlays({ api, container, trashRef }) {
 	const rect = container.getBoundingClientRect();
 	const overTrash = drag.target?.kind === "trash";
 	const problem = drag.target?.kind === "steps" ? drag.target.problem : void 0;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [drag.payload.kind === "jobs" && /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [drag.payload.kind === "jobs" && /* @__PURE__ */ jsxs("div", {
 		ref: trashRef,
-		className: cx("absolute bottom-2 left-1/2 z-20 flex -translate-x-1/2 items-center gap-2 rounded-lg border-2 border-dashed px-4 py-2 text-sm", overTrash ? "border-(--theme-error) bg-(--theme-error-muted) text-(--theme-error)" : "theme-border bg-(--theme-panel-bg) theme-muted-text"),
+		className: clsx("absolute bottom-2 left-1/2 z-20 flex -translate-x-1/2 items-center gap-2 rounded-lg border-2 border-dashed px-4 py-2 text-sm", overTrash ? "border-(--theme-error) bg-(--theme-error-muted) text-(--theme-error)" : "theme-border bg-(--theme-panel-bg) theme-muted-text"),
 		children: [/* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "h-4 w-4" }), t.dropToDelete]
 	}), drag.payload.kind !== "connect" && /* @__PURE__ */ jsx(DragLabel, {
 		at: {

package/dist/graph/GraphEditorDialogs.js

@@ -1,9 +1,9 @@
-import { useWorkflowActions, useWorkflowEditing } from "../components/Provider.js";
 import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
 import { FaArrowDown } from "../icons/fa/FaArrowDown.js";
 import { FaArrowUp } from "../icons/fa/FaArrowUp.js";
 import { IoMdClose } from "../icons/io/IoMdClose.js";
 import { withPositionKeys } from "../components/keys.js";
+import { useWorkflowActions, useWorkflowEditing } from "../components/Provider.js";
 import { IconButton } from "../components/IconButton.js";
 import { Input, fieldBoxClasses } from "../components/Input.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
@@ -18,9 +18,9 @@ import { NO_SCOPED, ViewSwitch, YamlPane, yamlProblem } from "./settingsViews.js
 import { useNewInputs } from "./InputDialog.js";
 import { editErrorText } from "./refusalText.js";
 import { UsesPicker, WithEditor, usesKind, withDraftFrom, withError, withValue } from "./stepWith.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/GraphEditorDialogs.tsx
 var SHELL = /^$|^(\/?([^/ ]+\/)*)?(bash|sh)( .*)?$/;
 var OUTPUT_KEY = /^[a-zA-Z0-9_-]+$/;
@@ -311,7 +311,7 @@ function OutputsEditor({ rows, onChange, stepIds, error }) {
 							value: row.custom,
 							onChange: (e) => update(i, { custom: e.target.value })
 						})
-					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 						className: "w-1/3",
 						children: /* @__PURE__ */ jsxs("select", {
 							"aria-label": t.outputStep,
@@ -446,7 +446,7 @@ function MatrixEntries({ label, yamlKey, description, entries, onChange, text, o
 			value: text,
 			error,
 			onChange: (e) => onText(e.target.value)
-		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 			withPositionKeys(entries).map(({ key, item: rows }, i) => /* @__PURE__ */ jsxs("div", {
 				className: "flex items-start gap-2",
 				children: [/* @__PURE__ */ jsx("div", {
@@ -670,7 +670,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 		...patch
 	} : null);
 	onDraft?.(saveEdit, invalid);
-	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const children = /* @__PURE__ */ jsxs(Fragment, { children: [
 		newInputs.dialog,
 		/* @__PURE__ */ jsx(Input, {
 			autoFocus: true,
@@ -714,7 +714,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 						return /* @__PURE__ */ jsxs("div", {
 							className: "flex items-center gap-2 text-sm",
 							children: [/* @__PURE__ */ jsxs("label", {
-								className: cx("flex flex-1 items-center gap-2", cycle ? "cursor-not-allowed opacity-50" : "cursor-pointer"),
+								className: clsx("flex flex-1 items-center gap-2", cycle ? "cursor-not-allowed opacity-50" : "cursor-pointer"),
 								title: cycle ? t.dependsOnThisJob : void 0,
 								children: [
 									/* @__PURE__ */ jsx("input", {
@@ -788,7 +788,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 					value: runsOnText,
 					error: errors.runsOn,
 					onChange: (e) => setRunsOnText(e.target.value)
-				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(ChoiceButtons, {
 						options: [{
 							value: "name",
@@ -803,7 +803,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 							kind
 						})
 					}),
-					runsOn.kind === "name" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					runsOn.kind === "name" ? /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsx(Input, {
 							mono: true,
 							...labelled(t.fields.environmentCluster, "cluster"),
@@ -837,7 +837,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 								error: void 0
 							})
 						})
-					] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsx(LabelledField, {
 							label: t.fields.targetMode,
 							yamlKey: "mode",
@@ -925,8 +925,8 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 					setMatrixOn(on);
 					if (on && matrixMode === "variables") addVariableRow();
 				}
-			}), matrixOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				typeof rawMatrix === "string" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+			}), matrixOn && /* @__PURE__ */ jsxs(Fragment, { children: [
+				typeof rawMatrix === "string" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldLabel, {
 					label: t.fields.matrixSource,
 					description: t.help.matrixMode
 				}), /* @__PURE__ */ jsx(ChoiceButtons, {
@@ -950,7 +950,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 					value: matrixText,
 					error: errors.matrix,
 					onChange: (e) => setMatrixText(e.target.value)
-				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx("div", {
 						className: "text-xs theme-muted-text",
 						children: t.help.matrixVariables
@@ -1156,7 +1156,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 		...patch
 	}, ...references]) : null);
 	onDraft?.(saveEdit, invalid);
-	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const children = /* @__PURE__ */ jsxs(Fragment, { children: [
 		newInputs.dialog,
 		/* @__PURE__ */ jsx(Input, {
 			autoFocus: true,
@@ -1190,7 +1190,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 			placeholder: "echo \"Hello World\"",
 			onChange: setRun,
 			source
-		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(UsesPicker, {
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UsesPicker, {
 			uses: trimmedUses,
 			onUses: setUses,
 			choices: usesSuggestions,
@@ -1267,7 +1267,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 				description: t.help.retry,
 				checked: retryOn,
 				onChange: setRetryOn
-			}), retryOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			}), retryOn && /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(Input, {
 					mono: true,
 					...labelled(t.fields.maxRetries, "max-retries"),
@@ -1385,7 +1385,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 			if (saveEdit) onEdit(saveEdit);
 			onClose();
 		},
-		footerStart: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		footerStart: /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(IconButton, {
 				icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "h-4 w-4" }),
 				label: t.deleteStep,

package/dist/graph/GraphNode.js

@@ -2,8 +2,8 @@ import { BoxGrip } from "./editorRows.js";
 import { emptyRowsStyle } from "./gridSpacing.js";
 import { Joblist } from "./JobSummary.js";
 import { useLineage, useLineageStore } from "./lineage.js";
-import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
 //#region src/graph/GraphNode.tsx
 var dimClasses = (depth) => ({
 	level: `dag-dim-${depth}`,

package/dist/graph/InputDialog.js

@@ -1,11 +1,11 @@
-import { useWorkflowEditing, useWorkflowEngine } from "../components/Provider.js";
 import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
 import { FaArrowDown } from "../icons/fa/FaArrowDown.js";
 import { FaArrowUp } from "../icons/fa/FaArrowUp.js";
 import { FaEdit } from "../icons/fa/FaEdit.js";
 import { IoMdClose } from "../icons/io/IoMdClose.js";
 import { withPositionKeys } from "../components/keys.js";
-import Dropdown from "../components/Dropdown.js";
+import { useWorkflowEditing, useWorkflowEngine } from "../components/Provider.js";
+import { Combobox } from "../components/Combobox.js";
 import { FilterPill } from "../components/FilterPill.js";
 import { IconButton } from "../components/IconButton.js";
 import { Input, Textarea } from "../components/Input.js";
@@ -20,9 +20,9 @@ import { FormEditingContext } from "../form/formEditing.js";
 import { DynamicForm } from "../form/Form.js";
 import { withInputLayouts } from "./inputLayout.js";
 import { NO_SCOPED, ViewSwitch, YamlPane, yamlProblem } from "./settingsViews.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/InputDialog.tsx
 /** Input types by menu group, in the order the add menu lists them. */
 var INPUT_TYPE_GROUPS = [
@@ -755,7 +755,7 @@ function OptionsEditor({ draft, onChange, error, keyed, described }) {
 					mode
 				})
 			}),
-			draft.mode === "list" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			draft.mode === "list" ? /* @__PURE__ */ jsxs(Fragment, { children: [
 				draft.rows.length > 0 && /* @__PURE__ */ jsxs("div", {
 					"aria-hidden": "true",
 					className: "flex items-center gap-2 text-xs theme-muted-text",
@@ -842,7 +842,7 @@ function OptionsEditor({ draft, onChange, error, keyed, described }) {
 					...draft,
 					text: e.target.value
 				})
-			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 				className: "text-xs theme-muted-text",
 				children: draft.mode === "byKey" ? t.optionsByKeyHelp : t.optionsJsonHelp
 			}), /* @__PURE__ */ jsx(Textarea, {
@@ -939,7 +939,6 @@ function TypeSelect({ value, onChange, allowStep, disabled }) {
 	const id = useId();
 	const types = t.types;
 	const help = t.typeHelp;
-	const known = inputTypes().includes(value);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-1.5",
 		children: [
@@ -954,23 +953,21 @@ function TypeSelect({ value, onChange, allowStep, disabled }) {
 					yamlKey: "type"
 				})]
 			}),
-			/* @__PURE__ */ jsx(Dropdown, {
+			/* @__PURE__ */ jsx(Combobox, {
 				id,
 				value,
 				disabled,
-				textBoxClassName: FIELD_TEXT_BOX,
-				options: [...known ? [] : [{
-					label: value,
-					value
-				}], ...INPUT_TYPE_GROUPS.map(([group, list]) => ({
-					category: t.typeGroups[group],
-					options: list.filter((type) => allowStep || type !== "step" || value === "step").map((type) => ({
+				className: FIELD_TEXT_BOX,
+				items: INPUT_TYPE_GROUPS.map(([group, list]) => ({
+					label: t.typeGroups[group],
+					items: list.filter((type) => allowStep || type !== "step" || value === "step").map((type) => ({
 						label: types[type] ?? type,
 						value: type
 					}))
-				}))],
-				onChange: (next) => {
-					if (typeof next === "string" && next) onChange(next);
+				})),
+				itemToStringLabel: (type) => types[type] ?? type,
+				onValueChange: (next) => {
+					if (next) onChange(next);
 				}
 			}),
 			/* @__PURE__ */ jsx("span", {
@@ -1353,7 +1350,7 @@ function RowsField({ draft, template, label, onChange, error }) {
 				initialValues: { rows: draft.rows },
 				labelPosition: "top",
 				workflowForm: true,
-				setValues: (values) => {
+				onValuesChange: (values) => {
 					if (touched.current) {
 						const rows = values["rows"];
 						onChange({
@@ -1455,11 +1452,11 @@ function PropField({ prop, kind, draft, original, error, onChange, suggestions,
 						values: next.values
 					}),
 					error
-				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
 					"aria-label": name,
 					value: perCopy.text,
 					suggestions: [],
-					onChange: (next) => onChange({
+					onValueChange: (next) => onChange({
 						...perCopy,
 						text: next
 					})
@@ -2102,7 +2099,7 @@ function InputForm({ name, definition, isNew, siblings, allowStep, inputs, home,
 function TypeBadge({ type }) {
 	const types = useInputsEditorStrings().types;
 	return /* @__PURE__ */ jsx("span", {
-		className: cx("rounded border theme-border px-1 text-[11px] leading-4 theme-muted-text"),
+		className: clsx("rounded border theme-border px-1 text-[11px] leading-4 theme-muted-text"),
 		children: types[type] ?? (type || "?")
 	});
 }