@parallelworks/ui 0.44.0 → 0.46.0

package/dist/graph/InputDialog.js

@@ -1,28 +1,25 @@
-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 { cx } from "../cx.js";
+import { ArrowDownIcon, ArrowUpIcon, EditIcon, RemoveIcon, TrashIcon } from "../icons.js";
 import { withPositionKeys } from "../components/keys.js";
 import { useWorkflowEditing, useWorkflowEngine } from "../components/Provider.js";
+import { Checkbox, CheckboxGroup } from "../components/Checkbox.js";
 import { Combobox } from "../components/Combobox.js";
-import { FilterPill } from "../components/FilterPill.js";
+import { ErrorText, Field, FieldOption } from "../components/Field.js";
 import { IconButton } from "../components/IconButton.js";
 import { Input, Textarea } from "../components/Input.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { INPUT_YAML_PATH } from "../editor/settingsYaml.js";
-import { FIELD_TEXT_BOX, SuggestionInput } from "./SuggestionInput.js";
-import { AddRowButton, ChoiceButtons, DialogShell, EXPRESSION, ExpressionToggle, FieldError, GrowingTextarea, KeyHint, LabelledField, Section, SectionMemory, StringListEditor, SuggestedInput, ToggleField, diffPatch, expressionError, flagError, isEmptyPatch, isScalar, labelled, parseJson, parseScalar, sameValue, text, unchangedValue, useSectionMemory, withoutUndefined } from "./editorFields.js";
+import { SuggestionInput } from "./SuggestionInput.js";
+import { AddRowButton, ChoiceButtons, DialogSection, DialogShell, EXPRESSION, ExpressionToggle, GrowingTextarea, KeyHint, SectionMemory, StringListEditor, SuggestedInput, ToggleField, YamlField, diffPatch, expressionError, flagError, isEmptyPatch, isScalar, labelled, parseJson, parseScalar, sameValue, text, unchangedValue, useSectionMemory, withoutUndefined } from "./editorFields.js";
 import { FlagField, ValueOrInputField, inputRefs } from "./inputRefs.js";
-import { formatDuration, parseDuration } from "../form/utils/duration.js";
+import { formatDurationText, parseDurationText } from "../form/utils/duration.js";
 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 { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 //#region src/graph/InputDialog.tsx
 /** Input types by menu group, in the order the add menu lists them. */
 var INPUT_TYPE_GROUPS = [
@@ -813,7 +810,7 @@ function OptionsEditor({ draft, onChange, error, keyed, described }) {
 							})
 						}),
 						/* @__PURE__ */ jsx(IconButton, {
-							icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+							icon: /* @__PURE__ */ jsx(RemoveIcon, {}),
 							label: t.removeOption,
 							variant: "ghost",
 							size: "sm",
@@ -856,7 +853,7 @@ function OptionsEditor({ draft, onChange, error, keyed, described }) {
 					text: e.target.value
 				})
 			})] }),
-			/* @__PURE__ */ jsx(FieldError, { message: error })
+			/* @__PURE__ */ jsx(ErrorText, { children: error })
 		]
 	});
 }
@@ -872,28 +869,28 @@ function ImpliesEditor({ draft, options, onChange }) {
 		children: t.impliesNeedsOptions
 	});
 	const nameOf = (value) => listed.find((option) => option.value === value)?.label.trim() || value;
-	const toggle = (from, to) => {
-		const current = draft[from] ?? [];
-		onChange({
-			...draft,
-			[from]: current.includes(to) ? current.filter((value) => value !== to) : [...current, to]
-		});
-	};
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col gap-2",
-		children: listed.map((option) => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-1.5",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "mr-1 text-sm font-medium",
-				children: t.impliesWhen(nameOf(option.value))
-			}), listed.filter((other) => other.value !== option.value).map((other) => {
-				return /* @__PURE__ */ jsx(FilterPill, {
-					active: (draft[option.value] ?? []).includes(other.value),
-					onClick: () => toggle(option.value, other.value),
-					children: nameOf(other.value)
-				}, other.value);
-			})]
-		}, option.value))
+		children: listed.map((option) => {
+			const when = t.impliesWhen(nameOf(option.value));
+			return /* @__PURE__ */ jsxs(CheckboxGroup, {
+				"aria-label": when,
+				value: draft[option.value] ?? [],
+				onValueChange: (next) => onChange({
+					...draft,
+					[option.value]: next
+				}),
+				className: "flex flex-wrap items-center gap-x-3 gap-y-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "mr-1 text-sm font-medium",
+					children: when
+				}), listed.filter((other) => other.value !== option.value).map((other) => /* @__PURE__ */ jsxs(FieldOption, {
+					className: "flex items-center gap-1.5 text-sm",
+					children: [/* @__PURE__ */ jsx(Checkbox, { value: other.value }), nameOf(other.value)]
+				}, other.value))]
+			}, option.value);
+		})
 	});
 }
 /** A duration's checkbox that sends a set value in place of a time, such as -1 for none. */
@@ -936,45 +933,31 @@ function OptOutCheckbox({ label, value, onLabel, onValue, errors }) {
 }
 function TypeSelect({ value, onChange, allowStep, disabled }) {
 	const t = useInputsEditorStrings();
-	const id = useId();
 	const types = t.types;
 	const help = t.typeHelp;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-1.5",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap items-baseline gap-x-1.5",
-				children: [/* @__PURE__ */ jsx("label", {
-					htmlFor: id,
-					className: "text-[0.8125rem] font-medium text-(--theme-app)",
-					children: t.inputType
-				}), /* @__PURE__ */ jsx(KeyHint, {
-					label: t.inputType,
-					yamlKey: "type"
-				})]
-			}),
-			/* @__PURE__ */ jsx(Combobox, {
-				id,
-				value,
-				disabled,
-				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
-					}))
-				})),
-				itemToStringLabel: (type) => types[type] ?? type,
-				onValueChange: (next) => {
-					if (next) onChange(next);
-				}
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "text-xs text-(--theme-muted-text-color)",
-				children: help[value] ?? t.help.type
-			})
-		]
+	return /* @__PURE__ */ jsx(Field, {
+		label: t.inputType,
+		hint: /* @__PURE__ */ jsx(KeyHint, {
+			label: t.inputType,
+			yamlKey: "type"
+		}),
+		description: help[value] ?? t.help.type,
+		children: (control) => /* @__PURE__ */ jsx(Combobox, {
+			...control,
+			value,
+			disabled,
+			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
+				}))
+			})),
+			itemToStringLabel: (type) => types[type] ?? type,
+			onValueChange: (next) => {
+				if (next) onChange(next);
+			}
+		})
 	});
 }
 var SCALAR_KINDS = /* @__PURE__ */ new Set([
@@ -1013,7 +996,7 @@ function draftOf(kind, value) {
 			expression: void 0,
 			rows: Array.isArray(value) ? value.map(asRecord) : []
 		};
-		case "duration": return typeof value === "number" && value >= 0 ? formatDuration(value) : text(value);
+		case "duration": return typeof value === "number" && value >= 0 ? formatDurationText(value) : text(value);
 		case "number": return typeof value === "string" && value.trim() !== "" && !EXPRESSION.test(value.trim()) && Number.isFinite(Number(value)) ? JSON.stringify(value) : text(value);
 		case "perCopy": return Array.isArray(value) ? {
 			list: true,
@@ -1082,7 +1065,7 @@ function writtenValue(kind, draft, context = {}) {
 			const raw = String(draft ?? "").trim();
 			if (!raw) return;
 			if (EXPRESSION.test(raw)) return raw;
-			return parseDuration(raw) ?? (/^-\d+$/.test(raw) ? Number(raw) : raw);
+			return parseDurationText(raw) ?? (/^-\d+$/.test(raw) ? Number(raw) : raw);
 		}
 		case "ref":
 		case "choice": return String(draft ?? "").trim() || void 0;
@@ -1130,12 +1113,12 @@ function valueError(prop, kind, draft, t, g) {
 		}
 		case "duration": {
 			const raw = String(draft ?? "").trim();
-			return raw && !EXPRESSION.test(raw) && parseDuration(raw) === null ? t.invalidDurationText : void 0;
+			return raw && !EXPRESSION.test(raw) && parseDurationText(raw) === null ? t.invalidDurationText : void 0;
 		}
 		case "number": {
 			const raw = String(draft ?? "").trim();
 			if (raw && prop.wholeFrom !== void 0) return /^\d+$/.test(raw) && Number(raw) >= prop.wholeFrom ? void 0 : t.wholeNumberFrom(prop.wholeFrom);
-			return raw && !EXPRESSION.test(raw) && !Number.isFinite(Number(raw)) ? t.invalidNumber : void 0;
+			return raw && !EXPRESSION.test(raw) && !Number.isFinite(Number(raw)) ? t.common.invalidNumber : void 0;
 		}
 		case "flag": return flagError(draft, g);
 		case "options": return optionsError(draft, t, g);
@@ -1211,30 +1194,30 @@ function TemplateFields({ fields, onChange, error, inputs, adopt, home, onDialog
 						}),
 						/* @__PURE__ */ jsx("div", { className: "flex-1" }),
 						/* @__PURE__ */ jsx(IconButton, {
-							icon: /* @__PURE__ */ jsx(FaEdit, { className: "h-3.5 w-3.5" }),
+							icon: /* @__PURE__ */ jsx(EditIcon, {}),
 							label: t.editInput,
 							variant: "ghost",
 							size: "sm",
 							onClick: () => setEditing({ name })
 						}),
 						/* @__PURE__ */ jsx(IconButton, {
-							icon: /* @__PURE__ */ jsx(FaArrowUp, { className: "h-3.5 w-3.5" }),
-							label: t.moveUp,
+							icon: /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+							label: t.common.moveUp,
 							variant: "ghost",
 							size: "sm",
 							disabled: i === 0,
 							onClick: () => move(i, i - 1)
 						}),
 						/* @__PURE__ */ jsx(IconButton, {
-							icon: /* @__PURE__ */ jsx(FaArrowDown, { className: "h-3.5 w-3.5" }),
-							label: t.moveDown,
+							icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+							label: t.common.moveDown,
 							variant: "ghost",
 							size: "sm",
 							disabled: i === names.length - 1,
 							onClick: () => move(i, i + 1)
 						}),
 						/* @__PURE__ */ jsx(IconButton, {
-							icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "h-3.5 w-3.5" }),
+							icon: /* @__PURE__ */ jsx(TrashIcon, {}),
 							label: t.deleteInput,
 							variant: "ghost",
 							size: "sm",
@@ -1249,7 +1232,7 @@ function TemplateFields({ fields, onChange, error, inputs, adopt, home, onDialog
 					]
 				}, name);
 			}),
-			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(ErrorText, { children: error }),
 			/* @__PURE__ */ jsx(AddRowButton, {
 				label: t.addField,
 				onClick: () => setEditing({ create: true })
@@ -1360,7 +1343,7 @@ function RowsField({ draft, template, label, onChange, error }) {
 					}
 				}
 			}, JSON.stringify(template))
-		}), /* @__PURE__ */ jsx(FieldError, { message: error })]
+		}), /* @__PURE__ */ jsx(ErrorText, { children: error })]
 	});
 }
 function PropField({ prop, kind, draft, original, error, onChange, suggestions, inputType, optionRows, source, adopt, allInputs, home, template, inputLabel, onDialog, onFieldKey }) {
@@ -1394,18 +1377,16 @@ function PropField({ prop, kind, draft, original, error, onChange, suggestions,
 		});
 		case "bool": {
 			const fallback = prop.fallback ?? false;
-			return /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-1.5",
-				children: [/* @__PURE__ */ jsx(ToggleField, {
-					...field,
-					checked: typeof draft === "boolean" ? draft : fallback,
-					onChange: (on) => onChange(on !== fallback ? on : original === on ? on : void 0)
-				}), /* @__PURE__ */ jsx(FieldError, { message: error })]
+			return /* @__PURE__ */ jsx(ToggleField, {
+				...field,
+				error,
+				checked: typeof draft === "boolean" ? draft : fallback,
+				onChange: (on) => onChange(on !== fallback ? on : original === on ? on : void 0)
 			});
 		}
 		case "options": {
 			const options = draft;
-			return /* @__PURE__ */ jsx(LabelledField, {
+			return /* @__PURE__ */ jsx(YamlField, {
 				...field,
 				actions: /* @__PURE__ */ jsx(ExpressionToggle, {
 					active: options.mode === "expression",
@@ -1426,17 +1407,16 @@ function PropField({ prop, kind, draft, original, error, onChange, suggestions,
 		}
 		case "perCopy": {
 			const perCopy = draft;
-			return /* @__PURE__ */ jsx(LabelledField, {
+			return /* @__PURE__ */ jsx(YamlField, {
 				...field,
 				actions: /* @__PURE__ */ jsxs("label", {
 					className: "flex cursor-pointer items-center gap-1.5 text-xs theme-muted-text",
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "checkbox",
+					children: [/* @__PURE__ */ jsx(Checkbox, {
 						checked: perCopy.list,
-						onChange: (e) => onChange({
+						onCheckedChange: (list) => onChange({
 							...perCopy,
-							list: e.target.checked,
-							values: e.target.checked && perCopy.values.length === 0 && perCopy.text.trim() ? [perCopy.text] : perCopy.values
+							list,
+							values: list && perCopy.values.length === 0 && perCopy.text.trim() ? [perCopy.text] : perCopy.values
 						})
 					}), t.onePerCopy]
 				}),
@@ -1460,10 +1440,10 @@ function PropField({ prop, kind, draft, original, error, onChange, suggestions,
 						...perCopy,
 						text: next
 					})
-				}), /* @__PURE__ */ jsx(FieldError, { message: error })] })
+				}), /* @__PURE__ */ jsx(ErrorText, { children: error })] })
 			});
 		}
-		case "values": return /* @__PURE__ */ jsx(LabelledField, {
+		case "values": return /* @__PURE__ */ jsx(YamlField, {
 			...field,
 			actions: /* @__PURE__ */ jsx(ExpressionToggle, {
 				active: draft.expression !== void 0,
@@ -1480,7 +1460,7 @@ function PropField({ prop, kind, draft, original, error, onChange, suggestions,
 				error
 			})
 		});
-		case "rows": return /* @__PURE__ */ jsx(LabelledField, {
+		case "rows": return /* @__PURE__ */ jsx(YamlField, {
 			...field,
 			actions: /* @__PURE__ */ jsx(ExpressionToggle, {
 				active: draft.expression !== void 0,
@@ -1506,7 +1486,7 @@ function PropField({ prop, kind, draft, original, error, onChange, suggestions,
 			error,
 			onChange: (e) => onChange(e.target.value)
 		});
-		case "template": return /* @__PURE__ */ jsx(LabelledField, {
+		case "template": return /* @__PURE__ */ jsx(YamlField, {
 			...field,
 			actions: /* @__PURE__ */ jsx(ExpressionToggle, {
 				active: typeof draft === "string",
@@ -1529,7 +1509,7 @@ function PropField({ prop, kind, draft, original, error, onChange, suggestions,
 				onFieldKey
 			})
 		});
-		case "implies": return /* @__PURE__ */ jsx(LabelledField, {
+		case "implies": return /* @__PURE__ */ jsx(YamlField, {
 			...field,
 			children: /* @__PURE__ */ jsx(ImpliesEditor, {
 				draft,
@@ -1539,16 +1519,17 @@ function PropField({ prop, kind, draft, original, error, onChange, suggestions,
 		});
 		case "choice": {
 			const choiceLabels = t.choices[prop.key];
-			return /* @__PURE__ */ jsxs(LabelledField, {
+			return /* @__PURE__ */ jsx(YamlField, {
 				...field,
-				children: [/* @__PURE__ */ jsx(ChoiceButtons, {
+				error,
+				children: /* @__PURE__ */ jsx(ChoiceButtons, {
 					options: (prop.choices ?? []).map((choice) => ({
 						value: choice,
 						label: choiceLabels?.[choice] ?? choice
 					})),
 					value: String(draft ?? "") || (prop.choices?.[0] ?? ""),
 					onChange
-				}), /* @__PURE__ */ jsx(FieldError, { message: error })]
+				})
 			});
 		}
 		case "json":
@@ -1801,7 +1782,7 @@ function InputViews({ textual, view, onViewChange, ...props }) {
 		}, version)
 	});
 	const nextName = name.trim();
-	const nameError = !editing.isValidInputName(nextName) ? t.invalidInputName : nextName !== props.name && props.siblings.includes(nextName) || newInputs.pending.some((input) => input.name === nextName) ? t.inputExists : void 0;
+	const nameError = !editing.isValidInputName(nextName) ? t.common.invalidName : nextName !== props.name && props.siblings.includes(nextName) || newInputs.pending.some((input) => input.name === nextName) ? t.inputExists : void 0;
 	const dirty = props.isNew || nextName !== props.name || yaml !== opening || newInputs.pending.length > 0;
 	return /* @__PURE__ */ jsxs(DialogShell, {
 		title: t.editInput,
@@ -1836,7 +1817,7 @@ function InputViews({ textual, view, onViewChange, ...props }) {
 }
 function deleteButton(t, { onDelete, onClose }) {
 	return /* @__PURE__ */ jsx(IconButton, {
-		icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "h-4 w-4" }),
+		icon: /* @__PURE__ */ jsx(TrashIcon, {}),
 		label: t.deleteInput,
 		variant: "ghost",
 		size: "sm",
@@ -1920,7 +1901,7 @@ function InputForm({ name, definition, isNew, siblings, allowStep, inputs, home,
 	const optionValues = type === "dropdown" || type === "radio" ? optionRows.map((row) => row.value) : [];
 	const slider = type === "number" && valueFor(SLIDER) === true;
 	const trimmedName = draftName.trim();
-	const errors = { name: !editing.isValidInputName(trimmedName) ? t.invalidInputName : siblings.includes(trimmedName) || newInputs.pending.some((input) => input.name === trimmedName) ? t.inputExists : void 0 };
+	const errors = { name: !editing.isValidInputName(trimmedName) ? t.common.invalidName : siblings.includes(trimmedName) || newInputs.pending.some((input) => input.name === trimmedName) ? t.inputExists : void 0 };
 	for (const prop of props) {
 		const key = draftKey(prop);
 		const required = prop.required || keyedDropdown && optionsDraftNow?.mode === "byKey" && prop === OPTION_KEY || slider && [
@@ -1942,7 +1923,7 @@ function InputForm({ name, definition, isNew, siblings, allowStep, inputs, home,
 		const hasLabel = valueFor(DISABLE_LABEL) !== void 0;
 		const optOut = valueFor(DISABLE_VALUE);
 		if (hasLabel !== (optOut !== void 0)) errors[draftKey(hasLabel ? DISABLE_VALUE : DISABLE_LABEL)] = t.disableNeedsBoth;
-		if (typeof optOut === "string") errors[draftKey(DISABLE_VALUE)] = t.invalidNumber;
+		if (typeof optOut === "string") errors[draftKey(DISABLE_VALUE)] = t.common.invalidNumber;
 		const defaultKey = draftKey(DURATION_DEFAULT);
 		if (optOut !== void 0 && valueFor(DURATION_DEFAULT) === optOut) errors[defaultKey] = void 0;
 	}
@@ -2064,13 +2045,13 @@ function InputForm({ name, definition, isNew, siblings, allowStep, inputs, home,
 				className: "text-xs theme-muted-text",
 				children: t.typeChangeNote
 			}),
-			textProps.length > 0 && /* @__PURE__ */ jsx(Section, {
+			textProps.length > 0 && /* @__PURE__ */ jsx(DialogSection, {
 				title: t.sectionField,
 				open: fieldOpen,
 				alert: textProps.some(erred),
 				children: textProps.map(renderProp)
 			}),
-			settingProps.length > 0 && /* @__PURE__ */ jsx(Section, {
+			settingProps.length > 0 && /* @__PURE__ */ jsx(DialogSection, {
 				title: t.sectionSettings,
 				open: settingsOpen,
 				alert: settingProps.some(erred),
@@ -2085,7 +2066,7 @@ function InputForm({ name, definition, isNew, siblings, allowStep, inputs, home,
 					}
 				}, "opt-out") : renderProp(prop))
 			}),
-			behaviorProps.length > 0 && /* @__PURE__ */ jsx(Section, {
+			behaviorProps.length > 0 && /* @__PURE__ */ jsx(DialogSection, {
 				title: t.sectionBehavior,
 				open: behaviorProps.some(holds),
 				alert: behaviorProps.some(erred),
@@ -2099,7 +2080,7 @@ function InputForm({ name, definition, isNew, siblings, allowStep, inputs, home,
 function TypeBadge({ type }) {
 	const types = useInputsEditorStrings().types;
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("rounded border theme-border px-1 text-[11px] leading-4 theme-muted-text"),
+		className: cx("rounded border theme-border px-1 text-[11px] leading-4 theme-muted-text"),
 		children: types[type] ?? (type || "?")
 	});
 }