@parallelworks/ui 0.43.0 → 0.45.0

package/dist/graph/inputRefs.js

@@ -1,12 +1,15 @@
-import { FaPlus } from "../icons/fa/FaPlus.js";
+import { AddIcon } from "../icons.js";
+import { useStrings } from "../components/Provider.js";
+import { ActionMenu } from "../components/ActionMenu.js";
 import { Switch } from "../components/Switch.js";
 import { IconButton } from "../components/IconButton.js";
-import { Textarea, fieldBoxClasses } from "../components/Input.js";
+import { Textarea } from "../components/Input.js";
+import { Select } from "../components/Select.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 { ExpressionToggle, GROWING_AREA, YamlField, flagError, flagValue, text, useGrowingArea } from "./editorFields.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
 //#region src/graph/inputRefs.tsx
@@ -66,39 +69,32 @@ function optionValues(definition) {
 /** Picks an existing input of the given types, or asks for a new one. */
 function InputRefSelect({ refs, types, value, onChange, onNew, newLabel, label }) {
 	const t = useGraphEditorStrings();
-	const id = useId();
 	const matching = refs.filter((ref) => types.includes(ref.type));
 	const current = value ? pathKey(value) : "";
 	const known = matching.some((ref) => pathKey(ref.path) === current);
-	return /* @__PURE__ */ jsxs("select", {
-		id,
+	const items = [
+		...!known && current ? [{
+			value: `?${current}`,
+			label: `inputs.${current}`
+		}] : [],
+		...matching.map((ref) => ({
+			value: pathKey(ref.path),
+			label: ref.label === ref.path.at(-1) ? `inputs.${pathKey(ref.path)}` : `${ref.label} (inputs.${pathKey(ref.path)})`
+		})),
+		...onNew ? [{
+			value: "+",
+			label: newLabel ?? t.newInput
+		}] : []
+	];
+	return /* @__PURE__ */ jsx(Select, {
 		"aria-label": label,
-		value: known || !current ? current : `?${current}`,
-		onChange: (e) => {
-			const next = e.target.value;
+		placeholder: matching.length > 0 ? t.chooseInput : t.noMatchingInputs,
+		items,
+		value: known || !current ? current || null : `?${current}`,
+		onValueChange: (next) => {
 			if (next === "+") onNew?.();
 			else if (next && !next.startsWith("?")) onChange(next.split("."));
-		},
-		className: fieldBoxClasses,
-		children: [
-			/* @__PURE__ */ jsx("option", {
-				value: "",
-				disabled: true,
-				children: matching.length > 0 ? t.chooseInput : t.noMatchingInputs
-			}),
-			!known && current && /* @__PURE__ */ jsxs("option", {
-				value: `?${current}`,
-				children: ["inputs.", current]
-			}),
-			matching.map((ref) => /* @__PURE__ */ jsx("option", {
-				value: pathKey(ref.path),
-				children: ref.label === ref.path.at(-1) ? `inputs.${pathKey(ref.path)}` : `${ref.label} (inputs.${pathKey(ref.path)})`
-			}, pathKey(ref.path))),
-			onNew && /* @__PURE__ */ jsx("option", {
-				value: "+",
-				children: newLabel ?? t.newInput
-			})
-		]
+		}
 	});
 }
 /** Makes a new input of `type` for the field, when the host can; `onCreated` gets where it went. */
@@ -109,7 +105,7 @@ function NewInputButton({ type, source, onCreated }) {
 	if (!create) return null;
 	const types = inputsEditor.types;
 	return /* @__PURE__ */ jsx(IconButton, {
-		icon: /* @__PURE__ */ jsx(FaPlus, { className: "h-4 w-4" }),
+		icon: /* @__PURE__ */ jsx(AddIcon, {}),
 		label: t.newInputOf(types[type] ?? type),
 		size: "sm",
 		variant: "ghost",
@@ -122,19 +118,6 @@ function insertAt(element, value, reference) {
 	return value.slice(0, start) + reference + value.slice(end);
 }
 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, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
-		id,
-		"aria-label": label,
-		"aria-describedby": describedBy,
-		required,
-		value,
-		placeholder,
-		suggestions,
-		onValueChange: onChange
-	}), /* @__PURE__ */ jsx(FieldError, { message: error })] });
-}
 /** Conditions on the form's switches and choices, for fields that run on one. */
 function conditionSuggestions(source, t) {
 	return (source?.refs ?? []).flatMap((ref) => {
@@ -159,50 +142,41 @@ function FlagField({ label, yamlKey, description, value, original, fallback = fa
 	const checked = typeof value === "boolean" ? value : fallback;
 	const setTypedValue = (next) => onChange(next.trim() ? next : void 0);
 	const lint = useFieldLint(yamlKey, id, typeof value === "string" ? value : "", setTypedValue);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-1.5",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between gap-3",
-				children: [/* @__PURE__ */ jsx(FieldLabel, {
-					label,
-					yamlKey,
-					description
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex shrink-0 items-center gap-1",
-					children: [!typed && /* @__PURE__ */ jsx(Switch, {
-						checked,
-						onCheckedChange: (on) => onChange(flagValue(on, fallback, original)),
-						"aria-label": label
-					}), /* @__PURE__ */ jsx(ExpressionToggle, {
-						active: typed,
-						onChange: (on) => {
-							setTyped(on);
-							onChange(void 0);
-						}
-					})]
-				})]
-			}),
-			typed && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex-1",
-					children: /* @__PURE__ */ jsx(ExpressionInput, {
-						id,
-						label,
-						value: typeof value === "string" ? value : "",
-						suggestions: conditionSuggestions(source, t),
-						error: flagError(value, t) ?? lint.message,
-						onChange: setTypedValue
-					})
-				}), /* @__PURE__ */ jsx(NewInputButton, {
-					type: "boolean",
-					source,
-					onCreated: (path) => onChange(flagExpression(path, false))
-				})]
-			}),
-			typed && lint.fixes
-		]
+	return /* @__PURE__ */ jsx(YamlField, {
+		label,
+		yamlKey,
+		description,
+		error: typed ? flagError(value, t) ?? lint.message : void 0,
+		id,
+		actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+			active: typed,
+			onChange: (on) => {
+				setTyped(on);
+				onChange(void 0);
+			}
+		}),
+		children: (control) => typed ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex-1",
+				children: /* @__PURE__ */ jsx(SuggestionInput, {
+					...control,
+					value: typeof value === "string" ? value : "",
+					suggestions: conditionSuggestions(source, t),
+					onValueChange: setTypedValue
+				})
+			}), /* @__PURE__ */ jsx(NewInputButton, {
+				type: "boolean",
+				source,
+				onCreated: (path) => onChange(flagExpression(path, false))
+			})]
+		}), lint.fixes] }) : /* @__PURE__ */ jsx(Switch, {
+			...control,
+			nativeButton: true,
+			render: /* @__PURE__ */ jsx("button", { type: "button" }),
+			checked,
+			onCheckedChange: (on) => onChange(flagValue(on, fallback, original))
+		})
 	});
 }
 var CONDITIONS = [
@@ -221,12 +195,12 @@ function ConditionField({ label, yamlKey, description, value, onChange, source,
 		const element = document.getElementById(id);
 		onChange(insertAt(element instanceof HTMLInputElement && element.value === value ? element : null, value, reference));
 	};
-	return /* @__PURE__ */ jsxs(LabelledField, {
+	return /* @__PURE__ */ jsx(YamlField, {
 		label,
 		yamlKey,
 		description,
-		htmlFor: id,
-		descriptionId: `${id}-help`,
+		error: lint.message,
+		id,
 		actions: /* @__PURE__ */ jsxs(Fragment, { children: [allRefs(source).length > 0 && /* @__PURE__ */ jsx(InsertRefSelect, {
 			source,
 			label: t.insertValue,
@@ -236,12 +210,9 @@ function ConditionField({ label, yamlKey, description, value, onChange, source,
 			source,
 			onCreated: (path) => onChange(flagExpression(path, false))
 		})] }),
-		children: [/* @__PURE__ */ jsx(ExpressionInput, {
-			id,
-			label,
-			describedBy: `${id}-help`,
+		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+			...control,
 			value,
-			error: lint.message,
 			placeholder: texts.default,
 			suggestions: [
 				...CONDITIONS.map(([condition, key]) => ({
@@ -254,8 +225,8 @@ function ConditionField({ label, yamlKey, description, value, onChange, source,
 				},
 				...conditionSuggestions(source, t)
 			],
-			onChange
-		}), lint.fixes]
+			onValueChange: onChange
+		}), lint.fixes] })
 	});
 }
 /** A value typed in, with the form's inputs of the given types offered, or a new one made for it. */
@@ -268,35 +239,30 @@ function ValueOrInputField({ label, yamlKey, description, value, onChange, sourc
 		value: refExpression(ref.path, suffix),
 		label: ref.label
 	})), ...literal ? suggestions.map((suggestion) => ({ value: suggestion })) : []];
-	return /* @__PURE__ */ jsxs(LabelledField, {
-		label: required ? `${label} *` : label,
+	return /* @__PURE__ */ jsx(YamlField, {
+		label,
 		yamlKey,
 		description,
-		descriptionId: `${id}-help`,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex-1",
-					children: /* @__PURE__ */ jsx(ExpressionInput, {
-						id,
-						label,
-						describedBy: `${id}-help`,
-						required,
-						value,
-						placeholder: placeholder ?? (literal ? void 0 : t.chooseInput),
-						suggestions: offered,
-						onChange
-					})
-				}), /* @__PURE__ */ jsx(NewInputButton, {
-					type: firstType,
-					source,
-					onCreated: (path) => onChange(refExpression(path, suffix))
-				})]
-			}),
-			/* @__PURE__ */ jsx(FieldError, { message: error ?? lint.message }),
-			lint.fixes
-		]
+		required,
+		error: error ?? lint.message,
+		id,
+		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex-1",
+				children: /* @__PURE__ */ jsx(SuggestionInput, {
+					...control,
+					value,
+					placeholder: placeholder ?? (literal ? void 0 : t.chooseInput),
+					suggestions: offered,
+					onValueChange: onChange
+				})
+			}), /* @__PURE__ */ jsx(NewInputButton, {
+				type: firstType,
+				source,
+				onCreated: (path) => onChange(refExpression(path, suffix))
+			})]
+		}), lint.fixes] })
 	});
 }
 /** A script field with a menu that drops an input's reference at the cursor. */
@@ -309,29 +275,27 @@ function ScriptField({ label, yamlKey, description, value, onChange, source, row
 	const lint = useFieldLint(yamlKey, id, value, onChange);
 	const shownError = error ?? lint.message;
 	const insert = (reference) => onChange(insertAt((area ?? fixed).current, value, reference));
-	return /* @__PURE__ */ jsxs(LabelledField, {
+	return /* @__PURE__ */ jsx(YamlField, {
 		label,
 		yamlKey,
 		description,
-		htmlFor: id,
-		descriptionId: `${id}-help`,
+		error: shownError,
+		id,
 		actions: allRefs(source).length > 0 && /* @__PURE__ */ jsx(InsertRefSelect, {
 			source,
 			label: t.insertValue,
 			onInsert: insert
 		}),
-		children: [/* @__PURE__ */ jsx(Textarea, {
+		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Textarea, {
+			...control,
 			ref: area ?? fixed,
-			id,
 			mono: true,
-			"aria-describedby": `${id}-help`,
 			rows: rows ?? 1,
 			value,
 			className: rows === void 0 ? GROWING_AREA : "",
-			...shownError ? { error: shownError } : {},
 			...placeholder ? { placeholder } : {},
 			onChange: (e) => onChange(e.target.value)
-		}), lint.fixes]
+		}), lint.fixes] })
 	});
 }
 var GROUP_ORDER = [
@@ -344,33 +308,31 @@ var GROUP_ORDER = [
 ];
 function InsertRefSelect({ source, label, onInsert }) {
 	const t = useGraphEditorStrings();
+	const strings = useStrings();
 	const all = allRefs(source);
-	return /* @__PURE__ */ jsxs("span", {
-		className: "relative inline-flex shrink-0 items-center",
-		children: [/* @__PURE__ */ jsx(FaPlus, {
+	const groups = GROUP_ORDER.map((group) => ({
+		group,
+		items: all.filter((item) => item.group === group).map((item) => ({
+			label: item.label,
+			onClick: () => onInsert(item.expression)
+		}))
+	})).filter((group) => group.items.length > 0);
+	const entries = groups.length === 1 ? groups[0]?.items ?? [] : groups.map(({ group, items }) => ({
+		label: t.refGroups[group],
+		items
+	}));
+	return /* @__PURE__ */ jsxs(ActionMenu, {
+		label,
+		items: entries,
+		search: {
+			placeholder: strings.common.search,
+			empty: strings.dropdown.noOptionsFound
+		},
+		triggerClassName: "inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md border border-(--theme-border) bg-(--theme-panel-bg) px-2 py-1 text-xs text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
+		children: [/* @__PURE__ */ jsx(AddIcon, {
 			"aria-hidden": "true",
-			className: "pointer-events-none absolute left-2 h-3 w-3 theme-muted-text"
-		}), /* @__PURE__ */ jsxs("select", {
-			"aria-label": label,
-			value: "",
-			onChange: (e) => {
-				if (e.target.value) onInsert(e.target.value);
-			},
-			className: "cursor-pointer appearance-none rounded-md border border-(--theme-border) bg-(--theme-panel-bg) py-1 pr-2 pl-6 text-xs text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
-			children: [/* @__PURE__ */ jsx("option", {
-				value: "",
-				children: label
-			}), GROUP_ORDER.map((group) => {
-				const refs = all.filter((item) => item.group === group);
-				return refs.length > 0 ? /* @__PURE__ */ jsx("optgroup", {
-					label: t.refGroups[group],
-					children: refs.map((item) => /* @__PURE__ */ jsx("option", {
-						value: item.expression,
-						children: item.label
-					}, item.label))
-				}, group) : null;
-			})]
-		})]
+			className: "size-3 theme-muted-text"
+		}), label]
 	});
 }
 function allRefs(source) {
@@ -385,4 +347,4 @@ function refSuggestions(source) {
 	return allRefs(source).map((item) => item.expression);
 }
 //#endregion
-export { ConditionField, ExpressionInput, FlagField, InputRefSelect, ScriptField, ValueOrInputField, equalsExpression, flagExpression, inputRefs, readRef, refExpression, refSuggestions };
+export { ConditionField, FlagField, InputRefSelect, ScriptField, ValueOrInputField, equalsExpression, flagExpression, inputRefs, readRef, refExpression, refSuggestions };

package/dist/graph/settingsViews.js

@@ -1,8 +1,9 @@
+import { Loader } from "../components/Loader.js";
 import { Tooltip } from "../components/Tooltip.js";
-import Loader from "../components/Loader.js";
+import { ErrorText } from "../components/Field.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { ProblemList } from "./fieldProblems.js";
-import { ChoiceButtons, FieldError } from "./editorFields.js";
+import { ChoiceButtons } from "./editorFields.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
 //#region src/graph/settingsViews.tsx
@@ -16,6 +17,7 @@ function ViewSwitch({ yaml, onForm, onYaml }) {
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: t.help.view,
 		children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ChoiceButtons, {
+			label: t.editorView,
 			options: [{
 				value: "yaml",
 				label: t.viewYaml
@@ -52,7 +54,7 @@ function YamlPane({ path, value, onChange, problem, scoped, nested }) {
 					})
 				})
 			}),
-			/* @__PURE__ */ jsx(FieldError, { message: problem }),
+			/* @__PURE__ */ jsx(ErrorText, { children: problem }),
 			/* @__PURE__ */ jsx(ProblemList, { problems: scoped.problems })
 		]
 	});