@parallelworks/ui 0.37.0 → 0.39.0

package/dist/graph/editorChrome.js

@@ -0,0 +1,75 @@
+import { BiRedo } from "../icons/bi/BiRedo.js";
+import { BiUndo } from "../icons/bi/BiUndo.js";
+import { IoSettingsOutline } from "../icons/io5/IoSettingsOutline.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { IconButton } from "../components/IconButton.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { ProblemsButton } from "./ProblemsButton.js";
+import { ShortcutsButton } from "./ShortcutsButton.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/editorChrome.tsx
+/** What a drag carries, beside the pointer at `at` in its layer's coordinates. */
+function DragLabel({ at, text, refused = false }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error)" : "theme-border"),
+		style: {
+			left: at.x + 12,
+			top: at.y + 12
+		},
+		children: text
+	});
+}
+function BarDivider() {
+	return /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-(--theme-border)" });
+}
+/** A toolbar chip that adds something: click to add it, or, given `onPointerDown`, drag it to where it goes. */
+function AddChip({ icon, label, hint, className, onPointerDown, onClick }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: cx("flex h-7 items-center gap-1 whitespace-nowrap rounded px-2 text-xs theme-hover", onPointerDown ? "cursor-grab" : "cursor-pointer", className),
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": hint,
+		onPointerDown,
+		onClick,
+		children: [icon, label]
+	});
+}
+/** The bar both editors draw: problems, undo and redo, the editor's own controls, settings, shortcuts. */
+function EditorBar({ editor, groups, className, children }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex max-w-full flex-wrap items-center justify-end gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) p-0.5", className),
+		children: [
+			!!editor.listedProblems?.length && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProblemsButton, { problems: editor.listedProblems }), /* @__PURE__ */ jsx(BarDivider, {})] }),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(BiUndo, { className: "h-4 w-4" }),
+				label: t.undo,
+				size: "sm",
+				variant: "ghost",
+				disabled: !editor.canUndo,
+				onClick: editor.onUndo
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(BiRedo, { className: "h-4 w-4" }),
+				label: t.redo,
+				size: "sm",
+				variant: "ghost",
+				disabled: !editor.canRedo,
+				onClick: editor.onRedo
+			}),
+			/* @__PURE__ */ jsx(BarDivider, {}),
+			children,
+			editor.onOpenSettings && /* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-4 w-4" }),
+				label: t.workflowSettings,
+				size: "sm",
+				variant: "ghost",
+				onClick: editor.onOpenSettings
+			}),
+			/* @__PURE__ */ jsx(ShortcutsButton, { groups })
+		]
+	});
+}
+//#endregion
+export { AddChip, BarDivider, DragLabel, EditorBar };

package/dist/graph/editorFields.js

@@ -0,0 +1,535 @@
+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 { withPositionKeys } from "../components/keys.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { BareModal, modalPanelClasses } from "../components/BareModal.js";
+import { Button } from "../components/Button.js";
+import { ghostButtonClasses, primaryButtonClasses } from "../components/ghostButton.js";
+import { FilterPill } from "../components/FilterPill.js";
+import { IconButton } from "../components/IconButton.js";
+import { Input, Textarea } from "../components/Input.js";
+import { Toggle } from "../components/Toggle.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { asRecord } from "./records.js";
+import { useFieldLint } from "./fieldProblems.js";
+import { SuggestionInput } from "./SuggestionInput.js";
+import cx from "classnames";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/editorFields.tsx
+var EXPRESSION = /^\$\{\{.*\}\}$/;
+var ENV_KEY = /^[a-zA-Z0-9_]+$/;
+var EMPTY_EXPRESSION = /^\$\{\{\s*\}\}$/;
+var DURATION = /^(\d+)(d|h|m|s)?$/;
+function withoutUndefined(value) {
+	return Object.fromEntries(Object.entries(value).filter(([, item]) => item !== void 0));
+}
+function text(value) {
+	return value === void 0 || value === null ? "" : String(value);
+}
+function isScalar(value) {
+	return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function parseScalar(value) {
+	if (/^-?\d+(\.\d+)?$/.test(value) && String(Number(value)) === value) return Number(value);
+	if (value === "true" || value === "false") return value === "true";
+	return value;
+}
+function sameValue(a, b) {
+	if (Array.isArray(a) || Array.isArray(b)) return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((item, i) => sameValue(item, b[i]));
+	if (typeof a === "object" && typeof b === "object" && a !== null && b !== null) {
+		const ak = Object.keys(a);
+		const bk = Object.keys(b);
+		return ak.length === bk.length && ak.every((k) => sameValue(a[k], b[k]));
+	}
+	return a === b;
+}
+/** Keys whose value changed: undefined removes a key, anything else writes it. */
+function diffPatch(original, next) {
+	const set = {};
+	const unset = [];
+	for (const [key, value] of Object.entries(next)) if (value === void 0) {
+		if (Object.hasOwn(original, key)) unset.push(key);
+	} else if (!sameValue(original[key], value)) set[key] = value;
+	return {
+		set,
+		unset
+	};
+}
+function isEmptyPatch(patch) {
+	return Object.keys(patch.set).length === 0 && patch.unset.length === 0;
+}
+function conditionText(value) {
+	return typeof value === "boolean" ? String(value) : text(value);
+}
+function parseCondition(value) {
+	const trimmed = value.trim();
+	if (!trimmed) return;
+	if (trimmed === "true" || trimmed === "false") return trimmed === "true";
+	return trimmed;
+}
+function durationError(value, t, pattern = DURATION) {
+	const trimmed = value.trim();
+	return !trimmed || pattern.test(trimmed) || EXPRESSION.test(trimmed) ? void 0 : t.invalidDuration;
+}
+function expressionError(value, t) {
+	const trimmed = value.trim();
+	return !trimmed || EXPRESSION.test(trimmed) && !EMPTY_EXPRESSION.test(trimmed) ? void 0 : t.invalidExpressionValue;
+}
+function orUndefined(value) {
+	return value.trim() ? value.trim() : void 0;
+}
+function countError(value, min, message) {
+	const trimmed = value.trim();
+	if (!trimmed || EXPRESSION.test(trimmed)) return;
+	return /^\d+$/.test(trimmed) && Number(trimmed) >= min ? void 0 : message;
+}
+function parseCount(value) {
+	const trimmed = value.trim();
+	if (!trimmed) return;
+	return /^\d+$/.test(trimmed) ? Number(trimmed) : trimmed;
+}
+function parseJson(value) {
+	try {
+		return {
+			ok: true,
+			value: JSON.parse(value)
+		};
+	} catch {
+		return { ok: false };
+	}
+}
+function unchangedValue(text, original, nested = false) {
+	return original !== void 0 && text === (nested ? JSON.stringify(original) : String(original));
+}
+/** Rows for a map; with `nested` false a non-scalar is shown as its JSON text and saved as a string. */
+function rowsFrom(value, nested = true) {
+	return Object.entries(asRecord(value)).map(([key, item]) => isScalar(item) ? {
+		key,
+		value: String(item),
+		original: item
+	} : nested ? {
+		key,
+		value: JSON.stringify(item),
+		nested: true,
+		original: item
+	} : {
+		key,
+		value: JSON.stringify(item) ?? ""
+	});
+}
+function rowsTo(rows, parse) {
+	if (rows.length === 0) return;
+	return Object.fromEntries(rows.map((row) => [row.key.trim(), unchangedValue(row.value, row.original, row.nested) ? row.original : row.nested ? parseJson(row.value).value : parse(row.value)]));
+}
+function rowsError(rows, keyPattern, keyMessage, t, valueError) {
+	const keys = rows.map((row) => row.key.trim());
+	for (const [i, row] of rows.entries()) {
+		const key = keys[i] ?? "";
+		if (!keyPattern.test(key)) return keyMessage;
+		if (keys.indexOf(key) !== i) return t.duplicateKey;
+		const error = row.nested ? parseJson(row.value).ok ? void 0 : t.invalidJson : valueError?.(row.value);
+		if (error) return error;
+	}
+}
+function flagOf(value) {
+	return typeof value === "boolean" || typeof value === "string" ? value : void 0;
+}
+function flagError(value, t) {
+	return typeof value === "string" ? expressionError(value, t) : void 0;
+}
+function flagValue(checked, fallback, original) {
+	if (checked !== fallback) return checked;
+	return original === checked ? checked : void 0;
+}
+/** Whether each section of a dialog is open, kept while the dialog is up so switching views keeps it. */
+var SectionMemory = createContext(null);
+function useSectionMemory() {
+	return useState(() => /* @__PURE__ */ new Map())[0];
+}
+function Section({ 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);
+	useEffect(() => {
+		if (alert && details.current && !details.current.open) details.current.open = 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", {
+			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",
+		children: yamlKey
+	});
+}
+/** Label props for an Input or Textarea that sets `yamlKey`. */
+function labelled(label, yamlKey) {
+	return {
+		label,
+		labelHint: /* @__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]
+	});
+}
+/**
+* Switches a field between its own control and a typed expression, where the schema takes one. Its
+* name says what pressing it does, so it isn't also announced as pressed.
+*/
+function ExpressionToggle({ active, onChange }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(LuBraces, { className: "h-4 w-4" }),
+		label: active ? t.stopExpression : t.useExpression,
+		size: "sm",
+		variant: "ghost",
+		active,
+		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(Toggle, {
+			checked,
+			onChange,
+			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))
+	});
+}
+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",
+		onClick,
+		children: label
+	}) });
+}
+function KeyValueEditor({ rows, onChange, error, valuePlaceholder, keyPlaceholder, addLabel, valueSuggestions = [], lint = false }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			withPositionKeys(rows).map(({ key, item: row }, i) => /* @__PURE__ */ jsx(KeyValueRow, {
+				row,
+				onChange: (next) => onChange(updateAt(rows, i, next)),
+				onRemove: () => onChange(removeAt(rows, i)),
+				keyPlaceholder: keyPlaceholder ?? t.key,
+				valuePlaceholder: valuePlaceholder ?? t.value,
+				valueSuggestions,
+				lint
+			}, key)),
+			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(AddRowButton, {
+				label: addLabel ?? t.addRow,
+				onClick: () => onChange([...rows, {
+					key: "",
+					value: ""
+				}])
+			})
+		]
+	});
+}
+function KeyValueRow({ row, onChange, onRemove, keyPlaceholder, valuePlaceholder, valueSuggestions, lint: linted }) {
+	const t = useGraphEditorStrings();
+	const id = useId();
+	const lint = useFieldLint(linted ? row.key.trim() || void 0 : void 0, id, row.value, (value) => onChange({
+		...row,
+		value
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "w-2/5",
+						children: /* @__PURE__ */ jsx(Input, {
+							mono: true,
+							"aria-label": t.key,
+							placeholder: keyPlaceholder,
+							value: row.key,
+							onChange: (e) => onChange({
+								...row,
+								key: e.target.value
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex-1",
+						title: row.nested ? t.jsonValue : void 0,
+						children: /* @__PURE__ */ jsx(SuggestionInput, {
+							id,
+							ariaLabel: t.value,
+							placeholder: valuePlaceholder,
+							value: row.value,
+							suggestions: valueSuggestions.map((value) => ({ value })),
+							onChange: (value) => onChange({
+								...row,
+								value
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+						label: t.removeRow,
+						variant: "ghost",
+						size: "sm",
+						onClick: onRemove
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(FieldError, { message: lint.message }),
+			lint.fixes
+		]
+	});
+}
+function updateAt(items, index, item) {
+	return items.map((current, i) => i === index ? item : current);
+}
+function removeAt(items, index) {
+	return items.filter((_, i) => i !== index);
+}
+/** A list of single values, such as permissions or variable names. */
+function StringListEditor({ label, values, onChange, addLabel, placeholder, error, suggestions = [] }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			withPositionKeys(values).map(({ key, item: value }, i) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(SuggestionInput, {
+						ariaLabel: t.listItem(label, i + 1),
+						value,
+						placeholder,
+						suggestions: suggestions.map((option) => ({ value: option })),
+						onChange: (next) => onChange(updateAt(values, i, next))
+					})
+				}), /* @__PURE__ */ jsx(IconButton, {
+					icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+					label: t.removeRow,
+					variant: "ghost",
+					size: "sm",
+					onClick: () => onChange(removeAt(values, i))
+				})]
+			}, key)),
+			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(AddRowButton, {
+				label: addLabel,
+				onClick: () => onChange([...values, ""])
+			})
+		]
+	});
+}
+function SuggestedInput({ label, yamlKey, description, value, onChange, suggestions, error, placeholder }) {
+	const id = useId();
+	const lint = useFieldLint(yamlKey, id, value, onChange);
+	return /* @__PURE__ */ jsxs(LabelledField, {
+		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 })),
+				onChange
+			}),
+			/* @__PURE__ */ jsx(FieldError, { message: error ?? lint.message }),
+			lint.fixes
+		]
+	});
+}
+/** A text area that starts one line tall and grows with its text. */
+function useGrowingArea(value) {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const area = ref.current;
+		if (area) {
+			area.style.height = "auto";
+			area.style.height = `${area.scrollHeight + area.offsetHeight - area.clientHeight}px`;
+		}
+	}, [value]);
+	return ref;
+}
+var GROWING_AREA = "!min-h-0 !resize-none overflow-hidden";
+function GrowingTextarea(props) {
+	const ref = useGrowingArea(props.value);
+	return /* @__PURE__ */ jsx(Textarea, {
+		...props,
+		ref,
+		rows: 1,
+		className: GROWING_AREA
+	});
+}
+/** The dialogs' "open when adding" switch, when the host keeps the setting. */
+function openOnAddOf(editor) {
+	return editor?.onOpenOnAddChange ? {
+		open: editor.openOnAdd !== false,
+		onChange: editor.onOpenOnAddChange
+	} : void 0;
+}
+function OpenOnAddSwitch({ open, onChange }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsxs("label", {
+		className: "flex cursor-pointer items-center gap-2 text-xs theme-muted-text",
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": t.openOnAddHelp,
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			className: "h-4 w-4 cursor-pointer accent-(--theme-element)",
+			checked: open,
+			onChange: (e) => onChange(e.target.checked)
+		}), t.openOnAdd]
+	});
+}
+function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked = false, footerStart, headerEnd, openOnAdd, children }) {
+	const t = useGraphEditorStrings();
+	const submit = () => {
+		if (!saveDisabled) onSubmit();
+	};
+	return /* @__PURE__ */ jsx(BareModal, {
+		open: true,
+		onClose,
+		ariaLabel: title,
+		align: "center",
+		preventClose: dirty || locked,
+		className: cx(modalPanelClasses, "flex max-h-[85vh] w-full max-w-2xl flex-col"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-0 flex-col",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3 border-b theme-border px-5 py-4",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex-1 text-[1rem] font-semibold",
+						children: title
+					}), headerEnd]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex min-h-0 flex-col gap-3 overflow-y-auto px-5 py-4",
+					children
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 border-t theme-border px-5 py-3",
+					children: [
+						footerStart,
+						openOnAdd && /* @__PURE__ */ jsx(OpenOnAddSwitch, { ...openOnAdd }),
+						/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: ghostButtonClasses,
+							onClick: onClose,
+							children: t.cancel
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							disabled: saveDisabled,
+							onClick: submit,
+							className: cx(primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50"),
+							children: t.save
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#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 };