@parallelworks/ui 0.44.0 → 0.46.0

package/dist/graph/editorFields.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentProps, type ReactNode } from 'react';
+import { type FieldProps } from '../components/Field.js';
 import { Textarea } from '../components/Input.js';
 import type { FieldPatch } from '../editing.js';
 import { type GraphEditorStrings } from './editorStrings.js';
@@ -48,7 +49,9 @@ export declare function flagValue(checked: boolean, fallback: boolean, original:
 /** Whether each section of a dialog is open, kept while the dialog is up so switching views keeps it. */
 export declare const SectionMemory: import("react").Context<Map<string, boolean> | null>;
 export declare function useSectionMemory(): Map<string, boolean>;
-export declare function Section({ title, description, open, alert, children, }: {
+/** A titled part of an editor dialog. It opens as it was last left in this
+ *  dialog, and opens itself when a problem inside would otherwise be hidden. */
+export declare function DialogSection({ title, description, open, alert, children, }: {
     title: string;
     description?: string;
     /** Whether it starts open; read once, when its dialog first shows it. */
@@ -57,9 +60,6 @@ export declare function Section({ title, description, open, alert, children, }:
     alert?: boolean;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function FieldError({ message }: {
-    message: string | undefined;
-}): import("react").JSX.Element | null;
 /** The YAML key a field sets, beside its name; left out where the name already says it. */
 export declare function KeyHint({ label, yamlKey }: {
     label: string;
@@ -68,20 +68,20 @@ export declare function KeyHint({ label, yamlKey }: {
 /** Label props for an Input or Textarea that sets `yamlKey`. */
 export declare function labelled(label: string, yamlKey: string): {
     label: string;
-    labelHint: import("react").JSX.Element;
+    hint: import("react").JSX.Element;
 };
-/** A field's name and help text, for controls without their own label; `actions` sit at its right. */
-export declare function FieldLabel({ label, yamlKey, description, htmlFor, descriptionId, actions, }: {
+/** A Field for a setting the YAML holds, with the key it sets beside its name. With `id`
+ *  its label names the one control that takes that id; without, it names its controls as a
+ *  group, as a list of rows or a set of choices wants. */
+export declare function YamlField({ label, yamlKey, description, actions, error, required, id, children, }: {
     label: string;
     yamlKey?: string | undefined;
-    description: string;
-    htmlFor?: string;
-    descriptionId?: string;
+    description?: ReactNode;
     actions?: ReactNode;
-}): import("react").JSX.Element;
-/** A field's label and description above the editor that sets it. */
-export declare function LabelledField({ children, ...label }: ComponentProps<typeof FieldLabel> & {
-    children: ReactNode;
+    error?: ReactNode;
+    required?: boolean | undefined;
+    id?: string | undefined;
+    children: FieldProps['children'];
 }): import("react").JSX.Element;
 /**
  * Switches a field between its own control and a typed expression, where the schema takes one. Its
@@ -91,15 +91,18 @@ export declare function ExpressionToggle({ active, onChange, }: {
     active: boolean;
     onChange: (active: boolean) => void;
 }): import("react").JSX.Element;
-export declare function ToggleField({ label, yamlKey, description, checked, onChange, disabled, }: {
+export declare function ToggleField({ label, yamlKey, description, checked, onChange, disabled, error, }: {
     label: string;
     yamlKey?: string;
     description: string;
     checked: boolean;
     onChange: (checked: boolean) => void;
     disabled?: boolean;
+    error?: string | undefined;
 }): import("react").JSX.Element;
-export declare function ChoiceButtons<T extends string>({ options, value, onChange, }: {
+/** One of a few choices. A YamlField around it names it; standing alone, `label` does. */
+export declare function ChoiceButtons<T extends string>({ label, options, value, onChange, }: {
+    label?: string | undefined;
     options: {
         value: T;
         label: string;

package/dist/graph/editorFields.js

@@ -1,22 +1,20 @@
-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 { AddIcon, ExpressionIcon, RemoveIcon } from "../icons.js";
 import { withPositionKeys } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { Button } from "../components/Button.js";
-import { ghostButtonClasses, primaryButtonClasses } from "../components/ghostButton.js";
+import { Checkbox } from "../components/Checkbox.js";
 import { Modal, ModalTitle } from "../components/Modal.js";
 import { Switch } from "../components/Switch.js";
-import { FilterPill } from "../components/FilterPill.js";
+import { ErrorText, Field } from "../components/Field.js";
 import { IconButton } from "../components/IconButton.js";
 import { Input, Textarea } from "../components/Input.js";
+import { Section } from "../components/Section.js";
+import { SegmentedControl } from "../components/SegmentedControl.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { useFieldLint } from "./fieldProblems.js";
 import { SuggestionInput } from "./SuggestionInput.js";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 //#region src/graph/editorFields.tsx
 var EXPRESSION = /^\$\{\{.*\}\}$/;
@@ -149,48 +147,40 @@ var SectionMemory = createContext(null);
 function useSectionMemory() {
 	return useState(() => /* @__PURE__ */ new Map())[0];
 }
-function Section({ title, description, open = false, alert = false, children }) {
+/** A titled part of an editor dialog. It opens as it was last left in this
+*  dialog, and opens itself when a problem inside would otherwise be hidden. */
+function DialogSection({ 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);
+	const [isOpen, setOpen] = useState(() => memory?.get(title) ?? open);
+	useEffect(() => {
+		memory?.set(title, isOpen);
+	}, [
+		memory,
+		title,
+		isOpen
+	]);
 	useEffect(() => {
-		if (alert && details.current && !details.current.open) details.current.open = true;
+		if (alert) setOpen(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", {
+	return /* @__PURE__ */ jsx(Section, {
+		title,
+		open: isOpen,
+		onOpenChange: setOpen,
+		headingLevel: 4,
+		children: /* @__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",
+		className: "font-mono text-xs font-normal theme-muted-text",
 		children: yamlKey
 	});
 }
@@ -198,49 +188,29 @@ function KeyHint({ label, yamlKey }) {
 function labelled(label, yamlKey) {
 	return {
 		label,
-		labelHint: /* @__PURE__ */ jsx(KeyHint, {
+		hint: /* @__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]
+/** A Field for a setting the YAML holds, with the key it sets beside its name. With `id`
+*  its label names the one control that takes that id; without, it names its controls as a
+*  group, as a list of rows or a set of choices wants. */
+function YamlField({ label, yamlKey, description, actions, error, required, id, children }) {
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint: yamlKey && /* @__PURE__ */ jsx(KeyHint, {
+			label,
+			yamlKey
+		}),
+		description: description || void 0,
+		actions,
+		error: error || void 0,
+		required,
+		id,
+		group: id === void 0,
+		children
 	});
 }
 /**
@@ -250,47 +220,46 @@ function LabelledField({ children, ...label }) {
 function ExpressionToggle({ active, onChange }) {
 	const t = useGraphEditorStrings();
 	return /* @__PURE__ */ jsx(IconButton, {
-		icon: /* @__PURE__ */ jsx(LuBraces, { className: "h-4 w-4" }),
+		icon: /* @__PURE__ */ jsx(ExpressionIcon, {}),
 		label: active ? t.stopExpression : t.useExpression,
 		size: "sm",
 		variant: "ghost",
-		active,
+		"data-selected": active || void 0,
 		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(Switch, {
+function ToggleField({ label, yamlKey, description, checked, onChange, disabled, error }) {
+	const id = useId();
+	return /* @__PURE__ */ jsx(YamlField, {
+		label,
+		yamlKey,
+		description,
+		error,
+		id,
+		children: (control) => /* @__PURE__ */ jsx(Switch, {
+			...control,
+			nativeButton: true,
+			render: /* @__PURE__ */ jsx("button", { type: "button" }),
 			checked,
 			onCheckedChange: onChange,
-			"aria-label": 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))
+/** One of a few choices. A YamlField around it names it; standing alone, `label` does. */
+function ChoiceButtons({ label, options, value, onChange }) {
+	return /* @__PURE__ */ jsx(SegmentedControl, {
+		label,
+		options,
+		value,
+		onValueChange: onChange
 	});
 }
 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",
+		icon: /* @__PURE__ */ jsx(AddIcon, {}),
 		onClick,
 		children: label
 	}) });
@@ -309,9 +278,9 @@ function KeyValueEditor({ rows, onChange, error, valuePlaceholder, keyPlaceholde
 				valueSuggestions,
 				lint
 			}, key)),
-			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(ErrorText, { children: error }),
 			/* @__PURE__ */ jsx(AddRowButton, {
-				label: addLabel ?? t.addRow,
+				label: addLabel ?? t.common.add,
 				onClick: () => onChange([...rows, {
 					key: "",
 					value: ""
@@ -362,15 +331,15 @@ function KeyValueRow({ row, onChange, onRemove, keyPlaceholder, valuePlaceholder
 						})
 					}),
 					/* @__PURE__ */ jsx(IconButton, {
-						icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
-						label: t.removeRow,
+						icon: /* @__PURE__ */ jsx(RemoveIcon, {}),
+						label: t.common.remove,
 						variant: "ghost",
 						size: "sm",
 						onClick: onRemove
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx(FieldError, { message: lint.message }),
+			/* @__PURE__ */ jsx(ErrorText, { children: lint.message }),
 			lint.fixes
 		]
 	});
@@ -399,14 +368,14 @@ function StringListEditor({ label, values, onChange, addLabel, placeholder, erro
 						onValueChange: (next) => onChange(updateAt(values, i, next))
 					})
 				}), /* @__PURE__ */ jsx(IconButton, {
-					icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
-					label: t.removeRow,
+					icon: /* @__PURE__ */ jsx(RemoveIcon, {}),
+					label: t.common.remove,
 					variant: "ghost",
 					size: "sm",
 					onClick: () => onChange(removeAt(values, i))
 				})]
 			}, key)),
-			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(ErrorText, { children: error }),
 			/* @__PURE__ */ jsx(AddRowButton, {
 				label: addLabel,
 				onClick: () => onChange([...values, ""])
@@ -417,24 +386,19 @@ function StringListEditor({ label, values, onChange, addLabel, placeholder, erro
 function SuggestedInput({ label, yamlKey, description, value, onChange, suggestions, error, placeholder }) {
 	const id = useId();
 	const lint = useFieldLint(yamlKey, id, value, onChange);
-	return /* @__PURE__ */ jsxs(LabelledField, {
+	return /* @__PURE__ */ jsx(YamlField, {
 		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 })),
-				onValueChange: onChange
-			}),
-			/* @__PURE__ */ jsx(FieldError, { message: error ?? lint.message }),
-			lint.fixes
-		]
+		description,
+		error: error ?? lint.message,
+		id,
+		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+			...control,
+			value,
+			placeholder,
+			suggestions: suggestions.map((option) => ({ value: option })),
+			onValueChange: onChange
+		}), lint.fixes] })
 	});
 }
 /** A text area that starts one line tall and grows with its text. */
@@ -472,11 +436,9 @@ function OpenOnAddSwitch({ open, onChange }) {
 		content: t.openOnAddHelp,
 		children: /* @__PURE__ */ jsxs("label", {
 			className: "flex cursor-pointer items-center gap-2 text-xs theme-muted-text",
-			children: [/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
-				className: "h-4 w-4 cursor-pointer accent-(--theme-element)",
+			children: [/* @__PURE__ */ jsx(Checkbox, {
 				checked: open,
-				onChange: (e) => onChange(e.target.checked)
+				onCheckedChange: (next) => onChange(next)
 			}), t.openOnAdd]
 		})
 	});
@@ -512,18 +474,18 @@ function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked = f
 						footerStart,
 						openOnAdd && /* @__PURE__ */ jsx(OpenOnAddSwitch, { ...openOnAdd }),
 						/* @__PURE__ */ jsx("div", { className: "flex-1" }),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: ghostButtonClasses,
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
 							onClick: onClose,
-							children: t.cancel
+							children: t.common.cancel
 						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
+						/* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							size: "sm",
 							disabled: saveDisabled,
 							onClick: submit,
-							className: clsx(primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50"),
-							children: t.save
+							children: t.common.save
 						})
 					]
 				})
@@ -532,4 +494,4 @@ function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked = f
 	});
 }
 //#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 };
+export { AddRowButton, ChoiceButtons, DURATION, DialogSection, DialogShell, ENV_KEY, EXPRESSION, ExpressionToggle, GROWING_AREA, GrowingTextarea, KeyHint, KeyValueEditor, SectionMemory, StringListEditor, SuggestedInput, ToggleField, YamlField, 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 };

package/dist/graph/editorPrimitives.d.ts

@@ -33,7 +33,7 @@ interface DragOptions {
     onMove?: (client: Point) => void;
     /** The release; `dragged` tells a drag from a click. */
     onEnd?: (client: Point, dragged: boolean) => void;
-    /** A cancelled pointer, or Escape when `escape` is on. */
+    /** A canceled pointer, or Escape when `escape` is on. */
     onCancel?: (dragged: boolean) => void;
     /** Escape cancels the press, and goes no further. */
     escape?: boolean;
@@ -42,7 +42,7 @@ interface DragOptions {
     /** The click after the release: swallowed always, only after a drag, or never. */
     swallowClick?: 'always' | 'drag' | 'never';
 }
-/** Follows a press from `start` until it's released or cancelled. */
+/** Follows a press from `start` until it's released or canceled. */
 export declare function trackDrag(start: Point, { onMove, onEnd, onCancel, escape: cancelOnEscape, holdText, swallowClick, }: DragOptions): void;
 export declare function place(box: Box): {
     left: number;

package/dist/graph/editorPrimitives.js

@@ -1,4 +1,4 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useSyncExternalStore } from "react";
 //#region src/graph/editorPrimitives.tsx
@@ -69,7 +69,7 @@ function suppressNextClick() {
 	window.addEventListener("click", swallow, true);
 	setTimeout(() => window.removeEventListener("click", swallow, true), 0);
 }
-/** Follows a press from `start` until it's released or cancelled. */
+/** Follows a press from `start` until it's released or canceled. */
 function trackDrag(start, { onMove, onEnd, onCancel, escape: cancelOnEscape = false, holdText, swallowClick = "never" }) {
 	let dragged = false;
 	const cleanup = () => {
@@ -123,7 +123,7 @@ function place(box) {
 /** The box a shift + drag draws, in its layer's coordinates. */
 function MarqueeBox({ box, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("absolute rounded-md border-2 border-dashed border-(--theme-element) bg-(--theme-element)/10", className),
+		className: cx("absolute rounded-md border-2 border-dashed border-(--theme-accent) bg-(--theme-accent)/10", className),
 		style: place(box)
 	});
 }