@parallelworks/ui 0.44.0 → 0.45.0

package/dist/form/Wizard/WizardNavigation.js

@@ -1,17 +1,21 @@
-import Loader from "../../components/Loader.js";
+import { WarningIcon } from "../../icons.js";
+import { useStrings } from "../../components/Provider.js";
+import { Button } from "../../components/Button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/form/Wizard/WizardNavigation.tsx
-function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel = "Submit", onNext, onPrevious, onSubmit }) {
+function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel: submitLabelProp, onNext, onPrevious, onSubmit }) {
+	const { form: t, common } = useStrings();
+	const submitLabel = submitLabelProp ?? common.submit;
 	const [isLoading, setIsLoading] = useState(false);
 	const [error, setError] = useState(null);
 	const handleNext = async () => {
 		setIsLoading(true);
 		setError(null);
 		try {
-			if (!await onNext()) setError("Please fix errors before proceeding");
+			if (!await onNext()) setError(t.fixErrorsToContinue);
 		} catch (err) {
-			setError(err instanceof Error ? err.message : "An error occurred");
+			setError(err instanceof Error ? err.message : t.stepFailed);
 		} finally {
 			setIsLoading(false);
 		}
@@ -22,68 +26,39 @@ function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel
 		try {
 			await onSubmit?.();
 		} catch (err) {
-			setError(err instanceof Error ? err.message : "An error occurred");
+			setError(err instanceof Error ? err.message : t.stepFailed);
 		} finally {
 			setIsLoading(false);
 		}
 	};
-	return /* @__PURE__ */ jsxs("div", { children: [error && /* @__PURE__ */ jsx("div", {
-		className: "mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700",
-		children: error
+	return /* @__PURE__ */ jsxs("div", { children: [error && /* @__PURE__ */ jsxs("p", {
+		role: "alert",
+		className: "mb-3 flex items-center gap-1.5 text-sm text-(--theme-error)",
+		children: [/* @__PURE__ */ jsx(WarningIcon, {
+			"aria-hidden": "true",
+			className: "size-4 shrink-0"
+		}), error]
 	}), /* @__PURE__ */ jsxs("div", {
-		className: "flex gap-3 justify-between pt-4",
-		children: [/* @__PURE__ */ jsx("button", {
-			type: "button",
+		className: "flex justify-between gap-3 pt-4",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
 			onClick: onPrevious,
 			disabled: !canGoBack || isLoading,
-			className: "px-6 py-3 rounded-lg font-medium transition-all duration-200 border flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
-			style: {
-				color: "var(--theme-app)",
-				borderColor: "var(--theme-border)",
-				backgroundColor: "var(--theme-app-bg)"
-			},
-			onMouseEnter: (e) => {
-				if (canGoBack && !isLoading) e.currentTarget.style.backgroundColor = "var(--theme-hover)";
-			},
-			onMouseLeave: (e) => {
-				e.currentTarget.style.backgroundColor = "var(--theme-app-bg)";
-			},
-			"aria-label": "Go to previous step",
-			children: prevLabel || "← Previous"
-		}), isLastStep && !onSubmit ? null : isLastStep ? /* @__PURE__ */ jsxs("button", {
-			type: "button",
+			"aria-label": t.previousStep,
+			children: prevLabel || common.previous
+		}), isLastStep && !onSubmit ? null : isLastStep ? /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
 			onClick: handleSubmit,
-			disabled: !isCurrentStepValid || isLoading,
-			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-(--theme-element-text) flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
-			style: { backgroundColor: "var(--theme-element)" },
-			onMouseEnter: (e) => {
-				if (isCurrentStepValid && !isLoading) e.currentTarget.style.filter = "brightness(0.9)";
-			},
-			onMouseLeave: (e) => {
-				e.currentTarget.style.filter = "brightness(1)";
-			},
+			disabled: !isCurrentStepValid,
+			loading: isLoading,
 			"aria-label": submitLabel,
-			children: [isLoading && /* @__PURE__ */ jsx(Loader, {
-				size: 16,
-				full: false
-			}), submitLabel]
-		}) : /* @__PURE__ */ jsxs("button", {
-			type: "button",
+			children: submitLabel
+		}) : /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
 			onClick: handleNext,
-			disabled: isLoading,
-			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-(--theme-element-text) flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
-			style: { backgroundColor: "var(--theme-element)" },
-			onMouseEnter: (e) => {
-				if (!isLoading) e.currentTarget.style.filter = "brightness(0.9)";
-			},
-			onMouseLeave: (e) => {
-				e.currentTarget.style.filter = "brightness(1)";
-			},
-			"aria-label": "Go to next step",
-			children: [isLoading && /* @__PURE__ */ jsx(Loader, {
-				size: 16,
-				full: false
-			}), nextLabel || "Next →"]
+			loading: isLoading,
+			"aria-label": t.nextStep,
+			children: nextLabel || common.next
 		})]
 	})] });
 }

package/dist/form/Wizard/WizardStepIndicator.d.ts

@@ -1,2 +1,5 @@
 import type { WizardStepIndicatorProps } from './types.js';
+/** Where a wizard is: "Step 3 of 10", a bar with a segment per page, and the list of every page,
+ *  from which a person jumps to one they may. It keeps one size from three pages to a hundred,
+ *  as a repeated page's copies can make, and at any width. */
 export declare function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, invalidSteps, onStepClick, allowJump, hideStepNumbers, }: WizardStepIndicatorProps): import("react").JSX.Element;

package/dist/form/Wizard/WizardStepIndicator.js

@@ -1,124 +1,108 @@
+import { cx } from "../../cx.js";
+import { CheckIcon, WarningIcon } from "../../icons.js";
 import { useStrings } from "../../components/Provider.js";
+import { Button } from "../../components/Button.js";
+import { Popover, useClosePopover } from "../../components/Popover.js";
 import { stepText } from "./utils.js";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/Wizard/WizardStepIndicator.tsx
+/** Where a wizard is: "Step 3 of 10", a bar with a segment per page, and the list of every page,
+*  from which a person jumps to one they may. It keeps one size from three pages to a hundred,
+*  as a repeated page's copies can make, and at any width. */
 function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, invalidSteps, onStepClick, allowJump = false, hideStepNumbers = false }) {
 	const { form: strings } = useStrings();
 	const currentIndex = stepOrder.indexOf(currentStep);
-	const row = useRef(null);
-	const [scrolls, setScrolls] = useState(false);
-	useEffect(() => {
-		const el = row.current;
-		if (!el) return;
-		const measure = () => setScrolls(el.scrollWidth > el.clientWidth);
-		measure();
-		if (typeof ResizeObserver === "undefined") return;
-		const observer = new ResizeObserver(measure);
-		for (const box of [el, ...el.children]) observer.observe(box);
-		return () => observer.disconnect();
-	}, [stepOrder.length]);
-	useEffect(() => {
-		const el = row.current;
-		const step = el?.children[currentIndex];
-		if (!el || !step || el.scrollWidth <= el.clientWidth) return;
-		const box = el.getBoundingClientRect();
-		const at = step.getBoundingClientRect();
-		if (at.left < box.left || at.right > box.right) el.scrollLeft += at.left - box.left - (box.width - at.width) / 2;
-	}, [currentIndex]);
-	const getStepStatus = (stepKey, index) => {
-		if (stepKey === currentStep) return "active";
-		if (index < currentIndex) return "completed";
-		return "upcoming";
-	};
-	return /* @__PURE__ */ jsx("ol", {
-		ref: row,
+	const statusOf = (key, index) => key === currentStep ? "current" : invalidSteps.has(key) ? "invalid" : index < currentIndex ? "done" : "upcoming";
+	return /* @__PURE__ */ jsxs("nav", {
 		"aria-label": strings.steps,
-		tabIndex: scrolls ? 0 : void 0,
-		className: "flex items-start justify-between w-full mb-2 gap-4 py-2 overflow-x-auto",
-		children: stepOrder.map((stepKey, index) => {
-			const stepConfig = steps[stepKey];
-			const status = getStepStatus(stepKey, index);
-			const isInvalid = invalidSteps.has(stepKey);
-			const isClickable = allowJump && visitedSteps.has(stepKey) && stepKey !== currentStep;
-			const isDotActive = status === "active";
-			const isDotCompleted = status === "completed";
-			return /* @__PURE__ */ jsxs("li", {
-				className: "flex flex-col items-center flex-1 relative",
-				children: [
-					/* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: () => onStepClick(stepKey),
-						disabled: !isClickable,
-						"aria-current": isDotActive ? "step" : void 0,
-						className: clsx("w-12 h-12 rounded-full border-3 flex items-center justify-center font-bold text-base transition-all duration-300 flex-shrink-0 relative", {
-							"cursor-pointer": isClickable,
-							"cursor-not-allowed": !isClickable
-						}, {
-							"text-white": isDotActive,
-							"bg-green-500 border-green-600 text-white shadow-md": isDotCompleted && !isInvalid,
-							"bg-(--theme-border) theme-border theme-muted-text shadow-sm": status === "upcoming" && !isInvalid,
-							"bg-red-50 border-red-500 text-red-600 shadow-sm": isInvalid && status !== "active"
-						}),
-						style: isDotActive ? {
-							backgroundColor: "var(--theme-element)",
-							borderColor: "var(--theme-element)",
-							color: "var(--theme-element-text)",
-							boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-							zIndex: 10
-						} : { zIndex: 10 },
-						"aria-label": `Step ${index + 1}: ${stepText(stepConfig?.title)}`,
-						title: stepText(stepConfig?.title),
-						children: [!hideStepNumbers && /* @__PURE__ */ jsx("span", {
-							className: clsx({ hidden: status === "completed" }),
-							children: index + 1
-						}), status === "completed" && /* @__PURE__ */ jsx("svg", {
-							"aria-hidden": "true",
-							className: "w-4 h-4",
-							fill: "none",
-							stroke: "currentColor",
-							viewBox: "0 0 24 24",
-							children: /* @__PURE__ */ jsx("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								strokeWidth: 3,
-								d: "M5 13l4 4L19 7"
-							})
-						})]
-					}),
-					index < stepOrder.length - 1 && /* @__PURE__ */ jsx("div", {
-						className: clsx("absolute h-1 transition-all duration-300", {
-							"bg-green-500": index < currentIndex,
-							"bg-(--theme-border)": index >= currentIndex,
-							"opacity-25": index >= currentIndex
-						}),
-						style: {
-							top: "24px",
-							left: "calc(50% + 24px)",
-							right: "-50%",
-							boxShadow: index < currentIndex ? "0 1px 2px rgba(34, 197, 94, 0.2)" : "none"
-						},
-						"aria-hidden": "true"
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "mt-2 text-center",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("text-sm text-center transition-colors duration-300 max-w-30", {
-								"font-bold text-green-600": isDotCompleted && !isInvalid,
-								"font-bold text-red-600": isInvalid && status !== "active",
-								"font-semibold theme-muted-text": !isDotActive && !isDotCompleted && !isInvalid,
-								"font-bold text-white": isDotActive
-							}),
-							style: isDotActive ? { color: "var(--theme-element)" } : {},
-							children: stepText(stepConfig?.title)
-						}), stepConfig?.description && /* @__PURE__ */ jsx("div", {
-							className: "text-xs theme-muted-text mt-1 text-center max-w-30",
-							children: stepText(stepConfig.description)
-						})]
-					})
-				]
-			}, stepKey);
+		className: "mb-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-3",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-xs font-medium text-(--theme-muted-text-color)",
+				children: strings.stepOf(currentIndex + 1, stepOrder.length)
+			}), /* @__PURE__ */ jsx(Popover, {
+				trigger: /* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "ghost",
+					children: strings.allSteps
+				}),
+				title: strings.steps,
+				align: "end",
+				className: "w-72",
+				children: /* @__PURE__ */ jsx("ol", {
+					className: "-mx-1 flex max-h-80 flex-col gap-0.5 overflow-y-auto",
+					children: stepOrder.map((key, index) => /* @__PURE__ */ jsx(StepItem, {
+						number: hideStepNumbers ? void 0 : index + 1,
+						title: stepText(steps[key]?.title),
+						description: steps[key]?.description && stepText(steps[key].description),
+						status: statusOf(key, index),
+						onJump: allowJump && visitedSteps.has(key) && key !== currentStep ? () => onStepClick(key) : void 0
+					}, key))
+				})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "mt-2 flex gap-1",
+			children: stepOrder.map((key, index) => /* @__PURE__ */ jsx("span", { className: cx("h-1 min-w-0.5 flex-1 rounded-full", segmentClasses[statusOf(key, index)]) }, key))
+		})]
+	});
+}
+var segmentClasses = {
+	done: "bg-(--theme-accent)",
+	current: "bg-(--theme-accent)",
+	upcoming: "bg-(--theme-border)",
+	invalid: "bg-(--theme-error)"
+};
+function StepItem({ number, title, description, status, onJump }) {
+	const { form: strings } = useStrings();
+	const close = useClosePopover();
+	const marker = /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("flex size-5 shrink-0 items-center justify-center rounded-full text-[0.6875rem] font-semibold tabular-nums", status === "current" && "bg-(--theme-accent) text-(--theme-accent-text)", status === "done" && "bg-(--theme-muted-panel-bg) text-(--theme-accent)", status === "upcoming" && "border border-(--theme-border) text-(--theme-muted-text-color)", status === "invalid" && "bg-(--theme-muted-panel-bg) text-(--theme-error)"),
+		children: status === "done" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-2.5" }) : status === "invalid" ? /* @__PURE__ */ jsx(WarningIcon, { className: "size-3" }) : number
+	});
+	const text = /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-col",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cx("truncate", status === "current" && "font-semibold"),
+				children: number === void 0 ? title : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: strings.stepLabel(number, title)
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: title
+				})] })
+			}),
+			status === "done" && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: strings.stepDone
+			}),
+			status === "invalid" && /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-(--theme-error)",
+				children: strings.stepNeedsAttention
+			}),
+			description && /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-(--theme-muted-text-color)",
+				children: description
+			})
+		]
+	});
+	const row = "flex w-full items-start gap-2 rounded-md px-1 py-1.5 text-left text-sm";
+	return /* @__PURE__ */ jsx("li", {
+		"aria-current": status === "current" ? "step" : void 0,
+		children: onJump ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cx(row, "cursor-pointer hover:bg-(--theme-muted-panel-bg)"),
+			onClick: () => {
+				onJump();
+				close();
+			},
+			children: [marker, text]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: cx(row, status === "upcoming" && "text-(--theme-muted-text-color)"),
+			children: [marker, text]
 		})
 	});
 }

package/dist/form/Wizard/types.d.ts

@@ -1,10 +1,10 @@
 import type { DynamicFormSchema, LabelPosition } from '../types/fieldTypes.js';
 interface WizardNavigation {
-    /** Show step indicator (dots with connecting lines) */
+    /** Show where the wizard is: "Step 3 of 10", a bar of its pages and the list of them */
     showSteps?: boolean;
     /** Allow clicking on completed steps to jump to them */
     allowJump?: boolean;
-    /** Hide step numbers in step dots, show only titles */
+    /** Leave the numbers out of the list of steps, showing only titles */
     hideStepNumbers?: boolean;
 }
 /**

package/dist/form/fieldFrame.d.ts

@@ -0,0 +1,7 @@
+import type { FieldProps } from '../components/Field.js';
+import type { FieldComponentProps } from './types/fieldComponentTypes.js';
+/** How a form field's props frame it: its label, help, description, required mark and error,
+ *  laid out as the form lays out its fields. Spread on `Field`. */
+export declare function fieldFrame({ field, label, labelPosition, error, disabled, spaceCompact, tooltipComponent, }: FieldComponentProps, { group }?: {
+    group?: boolean;
+}): Omit<FieldProps, 'children'>;

package/dist/form/fieldFrame.js

@@ -0,0 +1,19 @@
+import { resolvedFlag } from "./lib.js";
+//#region src/form/fieldFrame.ts
+/** How a form field's props frame it: its label, help, description, required mark and error,
+*  laid out as the form lays out its fields. Spread on `Field`. */
+function fieldFrame({ field, label, labelPosition, error, disabled, spaceCompact, tooltipComponent }, { group = false } = {}) {
+	return {
+		label,
+		hint: tooltipComponent,
+		description: field.description,
+		group,
+		required: !resolvedFlag(field.optional),
+		error,
+		disabled,
+		layout: labelPosition === "top" ? "stacked" : "inline",
+		compact: spaceCompact
+	};
+}
+//#endregion
+export { fieldFrame };

package/dist/form/index.d.ts

@@ -1,10 +1,8 @@
-export { FieldGroup } from './FieldGroup.js';
 export { getInvalidDurationPaths, setDurationValidity, } from './Fields/durationValidity.js';
 export { default as NumberField, type INumberField, } from './Fields/NumberField.js';
 export { ResourceOptionIcon } from './Fields/ResourceOptionIcon.js';
-export { type FieldLabelBinding, FieldWrapper } from './FieldWrapper.js';
 export { collectFieldsWithDefaults, DynamicDefaultsSync, DynamicForm, type DynamicFormProps, FieldsFromOptions, type FormValues, findSelfReferencingFieldNames, type ParentInfo, resolveMetaOverrides, useDynamicDefaultsSync, } from './Form.js';
-export { type FieldContextValue, FieldProvider, useFieldControlProps, useFieldLabelledByProps, useFieldRequired, } from './fieldContext.js';
+export { fieldFrame } from './fieldFrame.js';
 export { type FieldComponent, FieldRegistryContext, Registry, } from './fieldRegistry.js';
 export { type FormLayoutIssue, type FormLayoutNode, type LayoutBreakpoint, type LayoutGap, type LayoutTracks, type ResponsiveLayout, resolveFormLayout, } from './layout.js';
 export { type LayoutCSSIssue, resolveLayoutCSS, } from './layoutCSS.js';
@@ -15,6 +13,8 @@ export { type ChoiceItem, useChoiceField } from './useChoiceField.js';
 export { useFieldValue } from './useFieldValue.js';
 export { useParsedOpts } from './useParsedOpts.js';
 export { useDependentOptions, useFieldAt } from './utils/dependentOptions.js';
-export { collectPartitionDurationIssues, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, formatDuration, parseDuration, STANDARD_MAX_DURATION_RANGE, } from './utils/duration.js';
+export { collectPartitionDurationIssues, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, formatDurationText, parseDurationText, STANDARD_MAX_DURATION_RANGE, } from './utils/duration.js';
+export type { FieldOption, FieldOptionGroup, FieldOptionItem } from './utils/fieldItems.js';
 export { getPlaceholder } from './utils/getPlaceholder.js';
-export { applySecondaryField, findSecondaryOption, } from './utils/secondaryField.js';
+export { applySecondaryField } from './utils/secondaryField.js';
+export type { ServerError } from './validation.js';

package/dist/form/index.js

@@ -1,19 +1,17 @@
-import { applySecondaryField, findSecondaryOption } from "./utils/secondaryField.js";
+import { applySecondaryField } from "./utils/secondaryField.js";
 import { enforceOneMustBeTrue, flattenGroups, impureSetValueFromPath, initializeValues, resolvedFlag } from "./lib.js";
-import { FieldGroup } from "./FieldGroup.js";
 import { resolveFormLayout } from "./layout.js";
 import { resolveLayoutCSS } from "./layoutCSS.js";
-import { FieldProvider, useFieldControlProps, useFieldLabelledByProps, useFieldRequired } from "./fieldContext.js";
-import { FieldWrapper } from "./FieldWrapper.js";
+import { fieldFrame } from "./fieldFrame.js";
 import { useFieldValue } from "./useFieldValue.js";
 import { useChoiceField } from "./useChoiceField.js";
 import { useDependentOptions, useFieldAt } from "./utils/dependentOptions.js";
 import { getPlaceholder } from "./utils/getPlaceholder.js";
-import { FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, STANDARD_MAX_DURATION_RANGE, collectPartitionDurationIssues, formatDuration, parseDuration } from "./utils/duration.js";
+import { FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, STANDARD_MAX_DURATION_RANGE, collectPartitionDurationIssues, formatDurationText, parseDurationText } from "./utils/duration.js";
 import { getInvalidDurationPaths, setDurationValidity } from "./Fields/durationValidity.js";
 import NumberField from "./Fields/NumberField.js";
 import { FieldRegistryContext, Registry } from "./fieldRegistry.js";
 import { useParsedOpts } from "./useParsedOpts.js";
 import { DynamicDefaultsSync, DynamicForm, FieldsFromOptions, collectFieldsWithDefaults, findSelfReferencingFieldNames, resolveMetaOverrides, useDynamicDefaultsSync } from "./Form.js";
 import { ResourceOptionIcon } from "./Fields/ResourceOptionIcon.js";
-export { DynamicDefaultsSync, DynamicForm, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, FieldGroup, FieldProvider, FieldRegistryContext, FieldWrapper, FieldsFromOptions, NumberField, Registry, ResourceOptionIcon, STANDARD_MAX_DURATION_RANGE, applySecondaryField, collectFieldsWithDefaults, collectPartitionDurationIssues, enforceOneMustBeTrue, findSecondaryOption, findSelfReferencingFieldNames, flattenGroups, formatDuration, getInvalidDurationPaths, getPlaceholder, impureSetValueFromPath, initializeValues, parseDuration, resolveFormLayout, resolveLayoutCSS, resolveMetaOverrides, resolvedFlag, setDurationValidity, useChoiceField, useDependentOptions, useDynamicDefaultsSync, useFieldAt, useFieldControlProps, useFieldLabelledByProps, useFieldRequired, useFieldValue, useParsedOpts };
+export { DynamicDefaultsSync, DynamicForm, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, FieldRegistryContext, FieldsFromOptions, NumberField, Registry, ResourceOptionIcon, STANDARD_MAX_DURATION_RANGE, applySecondaryField, collectFieldsWithDefaults, collectPartitionDurationIssues, enforceOneMustBeTrue, fieldFrame, findSelfReferencingFieldNames, flattenGroups, formatDurationText, getInvalidDurationPaths, getPlaceholder, impureSetValueFromPath, initializeValues, parseDurationText, resolveFormLayout, resolveLayoutCSS, resolveMetaOverrides, resolvedFlag, setDurationValidity, useChoiceField, useDependentOptions, useDynamicDefaultsSync, useFieldAt, useFieldValue, useParsedOpts };

package/dist/form/layoutCSS.js

@@ -1,4 +1,5 @@
-import { deriveTheme, isDarkColor } from "../theme/index.js";
+import { isDarkColor } from "../theme/contrast.js";
+import { deriveTheme } from "../theme/derive.js";
 import { generate, lexer, parse, walk } from "css-tree";
 //#region src/form/layoutCSS.ts
 var properties = /* @__PURE__ */ new Set([
@@ -213,10 +214,10 @@ function resolveLayoutCSS(css) {
 		delete style["--form-accent"];
 		return {
 			style: {
-				...deriveTheme({
-					background,
+				...deriveTheme({ interface: {
+					base: background,
 					accent: expandHex(accent)
-				}),
+				} }),
 				backgroundColor: background,
 				color: "var(--theme-app)",
 				colorScheme: isDarkColor(background) ? "dark" : "light",

package/dist/form/types/fieldComponentTypes.d.ts

@@ -3,6 +3,7 @@ import type { BaseField, LabelPosition, RuntimeFieldExtensions } from './fieldTy
 interface FieldBase {
     type?: string;
     label?: string;
+    description?: string;
     hidden?: boolean | string;
     disabled?: boolean | string;
     optional?: boolean | string;
@@ -12,15 +13,16 @@ interface FieldBase {
 }
 /**
  * What the form hands a field component. The field binds to its own value by `field.name`, with
- * `useFieldValue` or react-hook-form's `useController`, and reads any other with `useWatch`, so it
+ * `useFieldValue`, which also gives the form its rules, and reads any other with `useWatch`, so it
  * renders again only when what it reads changes.
  */
 export interface FieldComponentProps<TField extends FieldBase = FieldBase> {
     field: TField;
     label: string;
     labelPosition: LabelPosition;
-    /** The form marks the field as missing a value. */
-    missing: boolean;
+    /** What the form found wrong with the field's value, such as a value it needs or one the server
+     *  rejected, shown under it; undefined while it has nothing to say. */
+    error?: string | undefined;
     onChange?: ((val: unknown) => void) | undefined;
     disabled: boolean;
     computeOn?: boolean | undefined;

package/dist/form/useChoiceField.js

@@ -1,4 +1,4 @@
-import { itemValue, leaves } from "./utils/fieldItems.js";
+import { findChoice, itemValue, leaves } from "./utils/fieldItems.js";
 import { applySecondaryField } from "./utils/secondaryField.js";
 import { useFieldValue } from "./useFieldValue.js";
 import { useEffect, useEffectEvent, useRef } from "react";
@@ -17,8 +17,7 @@ function useChoiceField({ name, items, autoselect, secondaryField, onChange }) {
 	const [value, change] = useFieldValue(name);
 	const { setValue } = useFormContext();
 	const choose = (next) => {
-		const chosen = leaves(items).find((item) => typeof item === "object" && dequal(item.value, next));
-		applySecondaryField(secondaryField, chosen?.secondaryValue, (field, secondary) => setValue(field, secondary, { shouldDirty: true }));
+		applySecondaryField(secondaryField, findChoice(items, next)?.secondaryValue, (field, secondary) => setValue(field, secondary, { shouldDirty: true }));
 		onChange?.(next);
 		change(next);
 	};

package/dist/form/useFieldValue.d.ts

@@ -3,5 +3,8 @@
  * value changes, not when another field's does. A change marks the field touched as well as dirty: the
  * form stops writing a computed default into a field once the person has set it, and a pick from a list
  * sets a value without the blur that would otherwise mark it.
+ *
+ * It also gives the form the field's rules, such as needing a value, so a field component binds its
+ * value here rather than with its own `useController`.
  */
 export declare function useFieldValue<T>(name: string): [T, (value: T) => void];

package/dist/form/useFieldValue.js

@@ -1,4 +1,5 @@
-import { useCallback } from "react";
+import { RequiredFieldContext, filled } from "./validation.js";
+import { use, useCallback } from "react";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/form/useFieldValue.ts
 /**
@@ -6,14 +7,30 @@ import { useController, useFormContext } from "react-hook-form";
 * value changes, not when another field's does. A change marks the field touched as well as dirty: the
 * form stops writing a computed default into a field once the person has set it, and a pick from a list
 * sets a value without the blur that would otherwise mark it.
+*
+* It also gives the form the field's rules, such as needing a value, so a field component binds its
+* value here rather than with its own `useController`.
 */
 function useFieldValue(name) {
-	const { field } = useController({ name });
-	const { setValue } = useFormContext();
-	const change = useCallback((value) => setValue(name, value, {
-		shouldDirty: true,
-		shouldTouch: true
-	}), [name, setValue]);
+	const required = use(RequiredFieldContext);
+	const message = required?.name === name ? required.message : void 0;
+	const { field } = useController({
+		name,
+		rules: message === void 0 ? {} : { validate: { required: (value) => filled(value) || message } }
+	});
+	const { setValue, getFieldState, trigger } = useFormContext();
+	const change = useCallback((value) => {
+		setValue(name, value, {
+			shouldDirty: true,
+			shouldTouch: true
+		});
+		if (getFieldState(name).invalid) trigger(name);
+	}, [
+		name,
+		setValue,
+		getFieldState,
+		trigger
+	]);
 	return [field.value, change];
 }
 //#endregion

package/dist/form/utils/duration.d.ts

@@ -1,5 +1,5 @@
-export declare function parseDuration(text: string): number | null;
-export declare function formatDuration(totalSeconds: number): string;
+export declare function parseDurationText(text: string): number | null;
+export declare function formatDurationText(totalSeconds: number): string;
 export declare const FLEX_MAX_DURATION_RANGE: {
     min: number;
     max: number;

package/dist/form/utils/duration.js

@@ -2,7 +2,7 @@ import { Duration } from "luxon";
 //#region src/form/utils/duration.ts
 var WITH_DAYS = /^(\d+)-(\d{1,2})(?::(\d{1,2})(?::(\d{1,2}))?)?$/;
 var WITHOUT_DAYS = /^(\d+):(\d{1,2}):(\d{1,2})$/;
-function parseDuration(text) {
+function parseDurationText(text) {
 	const trimmed = text.trim();
 	let days = 0;
 	let hours;
@@ -25,7 +25,7 @@ function parseDuration(text) {
 	if (minutes > 59 || seconds > 59) return null;
 	return days * 86400 + hours * 3600 + minutes * 60 + seconds;
 }
-function formatDuration(totalSeconds) {
+function formatDurationText(totalSeconds) {
 	if (!Number.isFinite(totalSeconds) || totalSeconds < 0) return "";
 	const parts = Duration.fromObject({ seconds: Math.floor(totalSeconds) }).shiftTo("days", "hours", "minutes", "seconds");
 	const pad = (n) => String(n).padStart(2, "0");
@@ -66,4 +66,4 @@ function collectPartitionDurationIssues(partitions, invalidDurationPaths) {
 	return [...issues];
 }
 //#endregion
-export { FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, STANDARD_MAX_DURATION_RANGE, collectPartitionDurationIssues, formatDuration, parseDuration };
+export { FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, STANDARD_MAX_DURATION_RANGE, collectPartitionDurationIssues, formatDurationText, parseDurationText };

package/dist/form/utils/fieldPath.d.ts

@@ -1,7 +1,9 @@
 /**
- * A field's path as the form store names it: `hosts[0].cpus` becomes `hosts.0.cpus`. A workflow writes
- * rows with brackets, but the store tells a field of a change by a path it starts, so a row's fields
- * hear a change to their list only when both name it with dots.
+ * A field's path as the form store names it, from any way a path to it is written: a workflow's
+ * `hosts[0].cpus`, the store's own `hosts.0.cpus`, or a JSON Pointer such as `#/hosts/0/cpus`, as a
+ * problem response locates a field. A workflow writes rows with brackets, but the store tells a field
+ * of a change by a path it starts, so a row's fields hear a change to their list only when both name
+ * it with dots.
  */
 export declare function fieldPath(path: string): string;
 /** The index of the innermost row a path is in, or undefined outside every list. */