@parallelworks/ui 0.34.0 → 0.36.0

package/dist/form/Wizard/WizardContainer.js

@@ -1,49 +1,172 @@
+import { useStrings, useWorkflowEngine } from "../../components/Provider.js";
+import { copyBounds, stepText } from "./utils.js";
+import { initializeValues } from "../lib.js";
+import { getValueUsingPath } from "../utils/getValueUsingPath.js";
 import { useWizardState } from "./useWizardState.js";
 import { WizardNavigation } from "./WizardNavigation.js";
 import { WizardStepContent } from "./WizardStepContent.js";
 import { WizardStepIndicator } from "./WizardStepIndicator.js";
-import { useCallback } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFormikContext } from "formik";
 //#region src/form/Wizard/WizardContainer.tsx
-function hasNestedError(stepErrors, fieldName) {
-	return typeof stepErrors === "object" && stepErrors !== null && fieldName in stepErrors;
-}
-function WizardContainer({ wizardConfig, values, onChange, onSubmit, className = "", labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false, setFieldValue, setFieldTouched }) {
-	const { validateForm, setTouched, touched } = useFormikContext();
+function WizardContainer({ wizardConfig, values, onChange, onSubmit, className = "", labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false, nested = false, fieldNamePrefix = "", setFieldValue, setFieldTouched }) {
+	const { validateForm, setTouched, touched, initialValues } = useFormikContext();
+	const { form: strings } = useStrings();
+	const engine = useWorkflowEngine();
 	const { config, steps, stepOrder } = wizardConfig;
-	const validateCurrentStep = useCallback(async (stepKey) => {
-		const stepConfig = steps[stepKey];
-		if (!stepConfig?.options) return true;
-		const stepFieldNames = Object.keys(stepConfig.options);
-		const shouldFlatten = config.flatten !== false;
+	const reads = useRef(/* @__PURE__ */ new Map());
+	const perCopy = useCallback((value, copy, numbered) => {
+		if (Array.isArray(value)) return value[copy] ?? (numbered ? strings.copyTitle(value[0] ?? "", copy + 1) : "");
+		const text = value ?? "";
+		if (text.includes("${{")) {
+			const key = JSON.stringify([text, copy]);
+			const inputs = JSON.stringify([...engine.inputDependencies(text).inputDeps].map((dep) => [dep, getValueUsingPath(values, dep)]));
+			const last = reads.current.get(key);
+			if (last?.inputs === inputs) return last.read;
+			const result = engine.evaluate({
+				inputs: values,
+				obj: { text },
+				orgVars: {},
+				index: copy
+			});
+			const read = String(result.text ?? "");
+			if (reads.current.size >= 500) reads.current.clear();
+			reads.current.set(key, {
+				inputs,
+				read
+			});
+			return read;
+		}
+		return numbered && text ? strings.copyTitle(text, copy + 1) : text;
+	}, [
+		engine,
+		values,
+		strings
+	]);
+	const shown = useMemo(() => {
+		const order = [];
+		const byKey = {};
+		for (const step of stepOrder) {
+			const stepConfig = steps[step];
+			if (!stepConfig) continue;
+			if (stepConfig.multi !== true) {
+				order.push(step);
+				byKey[step] = {
+					step,
+					config: stepConfig
+				};
+				continue;
+			}
+			const rows = getValueUsingPath(values, `${fieldNamePrefix}${step}`);
+			const { lo, hi } = copyBounds(stepConfig.min, stepConfig.max);
+			const count = Math.min(Math.max(Array.isArray(rows) ? rows.length : 0, lo), hi ?? Infinity);
+			if (count === 0) {
+				if (hi === 0) continue;
+				order.push(step);
+				byKey[step] = {
+					step,
+					count,
+					canAdd: hi === void 0 || hi > 0,
+					canRemove: false,
+					config: {
+						...stepConfig,
+						title: perCopy(stepConfig.title, 0, false),
+						description: perCopy(stepConfig.description, 0, false),
+						options: {}
+					}
+				};
+				continue;
+			}
+			for (let copy = 0; copy < count; copy++) {
+				const key = `${step}[${copy}]`;
+				order.push(key);
+				byKey[key] = {
+					step,
+					copy,
+					count,
+					canAdd: hi === void 0 || count < hi,
+					canRemove: count > lo,
+					config: {
+						...stepConfig,
+						title: perCopy(stepConfig.title, copy, true),
+						description: perCopy(stepConfig.description, copy, false)
+					}
+				};
+			}
+		}
+		return {
+			order,
+			byKey
+		};
+	}, [
+		stepOrder,
+		steps,
+		values,
+		fieldNamePrefix,
+		perCopy
+	]);
+	const setAside = useRef({});
+	useEffect(() => {
+		setAside.current = {};
+	}, [initialValues]);
+	useEffect(() => {
+		for (const step of stepOrder) {
+			const stepConfig = steps[step];
+			if (stepConfig?.multi !== true) continue;
+			const { lo, hi } = copyBounds(stepConfig.min, stepConfig.max);
+			const path = `${fieldNamePrefix}${step}`;
+			const rows = getValueUsingPath(values, path);
+			const now = Array.isArray(rows) ? rows : [];
+			setAside.current[path] ??= [];
+			const aside = setAside.current[path];
+			if (hi !== void 0 && now.length > hi) {
+				now.slice(hi).forEach((row, i) => {
+					aside[hi + i] = row;
+				});
+				setFieldValue(path, now.slice(0, hi));
+			} else if (now.length < lo) setFieldValue(path, Array.from({ length: lo }, (_, i) => now[i] ?? takeAside(aside, i) ?? initializeValues(stepConfig.options, {}) ?? {}));
+		}
+	}, [
+		stepOrder,
+		steps,
+		values,
+		fieldNamePrefix,
+		setFieldValue
+	]);
+	const configs = useMemo(() => Object.fromEntries(Object.entries(shown.byKey).map(([key, page]) => [key, page.config])), [shown]);
+	const validateCurrentStep = useCallback(async (pageKey) => {
+		const page = shown.byKey[pageKey];
+		if (!page?.config.options) return true;
+		const stepPrefix = page.copy !== void 0 ? `${fieldNamePrefix}${page.step}[${page.copy}].` : config.flatten !== false ? fieldNamePrefix : `${fieldNamePrefix}${page.step}.`;
+		const stepFieldPaths = Object.keys(page.config.options).map((name) => `${stepPrefix}${name}`);
 		const errors = await validateForm();
-		const hasStepErrors = shouldFlatten ? stepFieldNames.some((fieldName) => errors[fieldName]) : stepFieldNames.some((fieldName) => hasNestedError(errors[stepKey], fieldName));
+		const hasStepErrors = stepFieldPaths.some((path) => getValueUsingPath(errors, path));
 		if (hasStepErrors) {
-			const touchedFields = Object.fromEntries(stepFieldNames.map((name) => [name, true]));
-			if (shouldFlatten) setTouched({
-				...touched,
-				...touchedFields
-			}, false);
-			else setTouched({
-				...touched,
-				[stepKey]: touchedFields
-			}, false);
+			if (stepPrefix) for (const path of stepFieldPaths) setFieldTouched(path, true, false);
+			else {
+				const touchedFields = Object.fromEntries(stepFieldPaths.map((path) => [path, true]));
+				setTouched({
+					...touched,
+					...touchedFields
+				}, false);
+			}
 		}
 		return !hasStepErrors;
 	}, [
-		steps,
+		shown,
 		config,
+		fieldNamePrefix,
 		validateForm,
 		setTouched,
+		setFieldTouched,
 		touched
 	]);
-	const { currentStep, visitedSteps, invalidSteps, isLastStep, canGoBack, goToNext, goToPrevious, jumpToStep } = useWizardState({
-		stepOrder,
-		steps,
+	const { currentStep, visitedSteps, invalidSteps, isLastStep, canGoBack, goToNext, goToPrevious, jumpToStep, showStep } = useWizardState({
+		stepOrder: shown.order,
+		steps: configs,
 		validateStep: validateCurrentStep
 	});
-	const currentStepConfig = steps[currentStep];
 	const navigation = config.navigation ?? {};
 	const handleGoToNext = useCallback(async () => {
 		const success = await goToNext();
@@ -74,48 +197,120 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		touched,
 		onSubmit
 	]);
+	const shownBefore = useRef(shown.order);
+	useEffect(() => {
+		shownBefore.current = shown.order;
+	});
+	const pageKey = shown.byKey[currentStep] ? currentStep : nearestPage(currentStep, shown.order, shownBefore.current);
+	useEffect(() => {
+		if (pageKey && pageKey !== currentStep) showStep(pageKey);
+	}, [
+		pageKey,
+		currentStep,
+		showStep
+	]);
+	const page = shown.byKey[pageKey];
+	const copiesOf = (step) => {
+		const rows = getValueUsingPath(values, `${fieldNamePrefix}${step}`);
+		return Array.isArray(rows) ? rows : [];
+	};
+	const addCopy = (shownPage) => {
+		const options = steps[shownPage.step]?.options;
+		const rows = copiesOf(shownPage.step);
+		const kept = Array.from({ length: shownPage.count ?? rows.length }, (_, i) => rows[i] ?? initializeValues(options, {}) ?? {});
+		const aside = setAside.current[`${fieldNamePrefix}${shownPage.step}`] ?? [];
+		setFieldValue(`${fieldNamePrefix}${shownPage.step}`, [...kept, takeAside(aside, kept.length) ?? initializeValues(options, {}) ?? {}]);
+		showStep(`${shownPage.step}[${kept.length}]`);
+	};
+	const removeCopy = (shownPage) => {
+		const copy = shownPage.copy ?? 0;
+		const rows = copiesOf(shownPage.step).filter((_, i) => i !== copy);
+		setFieldValue(`${fieldNamePrefix}${shownPage.step}`, rows);
+		showStep(rows.length > 0 ? `${shownPage.step}[${Math.max(copy - 1, 0)}]` : shownPage.step);
+	};
+	const rawTitle = page ? steps[page.step]?.title : void 0;
+	const titledPerCopy = Array.isArray(rawTitle) || typeof rawTitle === "string" && rawTitle.includes("${{");
+	const removeTitle = titledPerCopy && page ? stepText(page.config.title) : stepText(rawTitle);
+	const addTitle = titledPerCopy && page?.count !== void 0 ? perCopy(rawTitle, page.count, true) : stepText(rawTitle);
+	const copies = page?.count !== void 0 && (page.canAdd || page.canRemove) ? /* @__PURE__ */ jsxs("div", {
+		className: "mb-4 flex items-center justify-between gap-3",
+		children: [page.canRemove ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => removeCopy(page),
+			className: "rounded-lg border theme-border px-4 py-2 text-sm theme-muted-text hover:text-(--theme-app)",
+			children: strings.removeCopy(removeTitle)
+		}) : /* @__PURE__ */ jsx("span", {}), page.canAdd && (page.copy === void 0 || page.copy === page.count - 1) && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => addCopy(page),
+			className: "rounded-lg bg-(--theme-element) px-4 py-2 font-medium text-(--theme-element-text) text-sm",
+			children: strings.addCopy(addTitle)
+		})]
+	}) : null;
+	const content = page ? /* @__PURE__ */ jsxs("div", {
+		className: "mb-4",
+		children: [/* @__PURE__ */ jsx(WizardStepContent, {
+			currentStep: page.step,
+			stepConfig: page.config,
+			flatten: config.flatten,
+			values,
+			labelPosition,
+			missingFields,
+			spaceCompact,
+			setFormDirty: () => onChange?.(values),
+			workflowForm,
+			fieldNamePrefix,
+			copy: page.copy,
+			setFieldValue,
+			setFieldTouched
+		}), copies]
+	}) : null;
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		children: [
 			navigation.showSteps !== false && /* @__PURE__ */ jsx(WizardStepIndicator, {
-				stepOrder,
-				currentStep,
-				steps,
+				stepOrder: shown.order,
+				currentStep: pageKey,
+				steps: configs,
 				visitedSteps,
 				invalidSteps,
 				onStepClick: jumpToStep,
 				allowJump: navigation.allowJump,
 				hideStepNumbers: navigation.hideStepNumbers
 			}),
-			currentStepConfig && /* @__PURE__ */ jsx("div", {
-				className: "mb-4",
-				children: /* @__PURE__ */ jsx(WizardStepContent, {
-					currentStep,
-					stepConfig: currentStepConfig,
-					flatten: config.flatten,
-					values,
-					labelPosition,
-					missingFields,
-					spaceCompact,
-					setFormDirty: () => onChange?.(values),
-					workflowForm,
-					setFieldValue,
-					setFieldTouched
-				})
-			}),
+			content,
 			/* @__PURE__ */ jsx(WizardNavigation, {
 				isLastStep,
 				canGoBack,
-				isCurrentStepValid: !invalidSteps.has(currentStep),
-				nextLabel: currentStepConfig?.nextLabel,
-				prevLabel: currentStepConfig?.prevLabel,
+				isCurrentStepValid: !invalidSteps.has(pageKey),
+				nextLabel: page?.config.nextLabel,
+				prevLabel: page?.config.prevLabel,
 				submitLabel: config.submitLabel || "Execute",
 				onNext: handleGoToNext,
 				onPrevious: goToPrevious,
-				onSubmit: handleSubmit
+				onSubmit: nested ? void 0 : handleSubmit
 			})
 		]
 	});
 }
+function nearestPage(key, order, before) {
+	const [, step = key, index = "0"] = /^(.*)\[(\d+)\]$/.exec(key) ?? [];
+	const copies = order.filter((other) => other.startsWith(`${step}[`));
+	if (copies.length > 0) return copies[Math.min(Number(index), copies.length - 1)] ?? copies[0] ?? "";
+	if (order.includes(step)) return step;
+	const pagesOf = (page) => order.filter((other) => stepOf(other) === stepOf(page));
+	const at = before.indexOf(key);
+	const next = before.slice(at + 1).find((page) => pagesOf(page).length > 0);
+	const last = before.slice(0, Math.max(at, 0)).reverse().find((page) => pagesOf(page).length > 0);
+	return (next && pagesOf(next)[0]) ?? (last && pagesOf(last).at(-1)) ?? order[0] ?? "";
+}
+function stepOf(page) {
+	return /^(.*)\[\d+\]$/.exec(page)?.[1] ?? page;
+}
+/** The row set aside at `index`, now taken back so it returns only once. */
+function takeAside(aside, index) {
+	const row = aside[index];
+	delete aside[index];
+	return row;
+}
 //#endregion
 export { WizardContainer };

package/dist/form/Wizard/WizardNavigation.js

@@ -20,7 +20,7 @@ function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel
 		setIsLoading(true);
 		setError(null);
 		try {
-			await onSubmit();
+			await onSubmit?.();
 		} catch (err) {
 			setError(err instanceof Error ? err.message : "An error occurred");
 		} finally {
@@ -50,11 +50,11 @@ function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel
 			},
 			"aria-label": "Go to previous step",
 			children: prevLabel || "← Previous"
-		}), isLastStep ? /* @__PURE__ */ jsxs("button", {
+		}), isLastStep && !onSubmit ? null : isLastStep ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: handleSubmit,
 			disabled: !isCurrentStepValid || isLoading,
-			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-white flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
+			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)";
@@ -71,7 +71,7 @@ function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel
 			type: "button",
 			onClick: handleNext,
 			disabled: isLoading,
-			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-white flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
+			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)";

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

@@ -1,6 +1,6 @@
 import type { TSetFormDirty } from '../Form.js';
 import type { WizardStepContentProps } from './types.js';
-export declare function WizardStepContent({ currentStep, stepConfig, flatten, values, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }: WizardStepContentProps & {
+export declare function WizardStepContent({ currentStep, stepConfig, flatten, values, setFormDirty, setFieldValue, setFieldTouched, fieldNamePrefix, copy, ...fieldsProps }: WizardStepContentProps & {
     setFormDirty: TSetFormDirty;
     setFieldValue: (field: string, value: unknown, shouldValidate?: boolean) => void;
     setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => void;

package/dist/form/Wizard/WizardStepContent.js

@@ -1,20 +1,32 @@
+import { stepText } from "./utils.js";
 import { FieldsFromOptions } from "../Form.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/Wizard/WizardStepContent.tsx
-function WizardStepContent({ currentStep, stepConfig, flatten = true, values, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }) {
+function WizardStepContent({ currentStep, stepConfig, flatten = true, values, setFormDirty, setFieldValue, setFieldTouched, fieldNamePrefix = "", copy, ...fieldsProps }) {
 	if (!stepConfig.options) return null;
+	const parentInfo = copy !== void 0 ? {
+		parentName: currentStep,
+		fieldNamePrefix: `${fieldNamePrefix}${currentStep}[${copy}].`,
+		arrayIndex: copy
+	} : flatten === false ? {
+		parentName: currentStep,
+		fieldNamePrefix: `${fieldNamePrefix}${currentStep}.`
+	} : fieldNamePrefix ? {
+		parentName: fieldNamePrefix.slice(0, -1),
+		fieldNamePrefix
+	} : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mb-4 w-full",
 		children: [
-			stepConfig.title && /* @__PURE__ */ jsx("h2", {
+			stepText(stepConfig.title) && /* @__PURE__ */ jsx("h2", {
 				className: "text-2xl font-bold mb-2",
 				style: { color: "var(--theme-app)" },
-				children: stepConfig.title
+				children: stepText(stepConfig.title)
 			}),
-			stepConfig.description && /* @__PURE__ */ jsx("p", {
+			stepText(stepConfig.description) && /* @__PURE__ */ jsx("p", {
 				className: "mb-4 leading-relaxed",
 				style: { color: "var(--theme-muted-text-color)" },
-				children: stepConfig.description
+				children: stepText(stepConfig.description)
 			}),
 			/* @__PURE__ */ jsx(FieldsFromOptions, {
 				options: stepConfig.options,
@@ -22,12 +34,9 @@ function WizardStepContent({ currentStep, stepConfig, flatten = true, values, se
 				setFormDirty,
 				setFieldValue,
 				setFieldTouched,
-				...flatten === false ? { parentInfo: {
-					parentName: currentStep,
-					fieldNamePrefix: `${currentStep}.`
-				} } : {},
+				...parentInfo ? { parentInfo } : {},
 				...fieldsProps
-			}, currentStep)
+			}, copy === void 0 ? currentStep : `${currentStep}[${copy}]`)
 		]
 	});
 }

package/dist/form/Wizard/WizardStepIndicator.js

@@ -1,15 +1,42 @@
+import { useStrings } from "../../components/Provider.js";
+import { stepText } from "./utils.js";
 import cx from "classnames";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/Wizard/WizardStepIndicator.tsx
 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("div", {
-		className: "flex items-start justify-between w-full mb-2 gap-4 py-2",
+	return /* @__PURE__ */ jsx("ol", {
+		ref: row,
+		"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);
@@ -17,13 +44,14 @@ function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, inva
 			const isClickable = allowJump && visitedSteps.has(stepKey) && stepKey !== currentStep;
 			const isDotActive = status === "active";
 			const isDotCompleted = status === "completed";
-			return /* @__PURE__ */ jsxs("div", {
+			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: cx("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
@@ -40,8 +68,8 @@ function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, inva
 							boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
 							zIndex: 10
 						} : { zIndex: 10 },
-						"aria-label": `Step ${index + 1}: ${stepConfig?.title}`,
-						title: stepConfig?.title,
+						"aria-label": `Step ${index + 1}: ${stepText(stepConfig?.title)}`,
+						title: stepText(stepConfig?.title),
 						children: [!hideStepNumbers && /* @__PURE__ */ jsx("span", {
 							className: cx({ hidden: status === "completed" }),
 							children: index + 1
@@ -83,10 +111,10 @@ function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, inva
 								"font-bold text-white": isDotActive
 							}),
 							style: isDotActive ? { color: "var(--theme-element)" } : {},
-							children: stepConfig?.title
+							children: stepText(stepConfig?.title)
 						}), stepConfig?.description && /* @__PURE__ */ jsx("div", {
 							className: "text-xs theme-muted-text mt-1 text-center max-w-30",
-							children: stepConfig.description
+							children: stepText(stepConfig.description)
 						})]
 					})
 				]

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

@@ -23,10 +23,10 @@ export interface WizardConfig {
 export interface StepFieldConfig {
     /** Must be 'step' */
     type: 'step';
-    /** Title shown in step indicator */
-    title: string;
-    /** Optional description/subtitle shown below title */
-    description?: string;
+    /** Title shown in step indicator; a repeated page's can be one per copy */
+    title: string | string[];
+    /** Optional description/subtitle shown below title; a repeated page's can be one per copy */
+    description?: string | string[];
     /** Schema for fields within this step */
     options: DynamicFormSchema;
     /** Validate current step before proceeding to next (default: true) */
@@ -35,6 +35,11 @@ export interface StepFieldConfig {
     nextLabel?: string;
     /** Custom label for previous button on this step */
     prevLabel?: string;
+    /** The person running it can add copies of this page; its values are a list, one row per copy */
+    multi?: boolean;
+    /** The fewest and most copies of a repeated page, as a list's rows: numbers or expressions */
+    min?: number | string;
+    max?: number | string;
 }
 /**
  * Extracted wizard configuration and step information
@@ -69,6 +74,10 @@ export interface WizardContainerProps {
     spaceCompact?: boolean;
     /** Workflow form mode */
     workflowForm?: boolean;
+    /** A wizard inside a group submits with the form around it, so its last step has no submit. */
+    nested?: boolean;
+    /** Where the fields' values sit when the wizard is inside a group that keeps its own values. */
+    fieldNamePrefix?: string | undefined;
 }
 /**
  * Props for WizardStepIndicator component
@@ -111,8 +120,8 @@ export interface WizardNavigationProps {
     onNext: () => Promise<boolean>;
     /** Callback to go to previous step */
     onPrevious: () => void;
-    /** Callback to submit wizard */
-    onSubmit: () => Promise<void>;
+    /** Callback to submit wizard; without one the last step has no button of its own */
+    onSubmit?: (() => Promise<void>) | undefined;
 }
 /**
  * Props for WizardStepContent component
@@ -132,5 +141,9 @@ export interface WizardStepContentProps {
     spaceCompact?: boolean;
     /** Workflow form mode */
     workflowForm?: boolean;
+    /** Where the fields' values sit when the wizard is inside a group that keeps its own values. */
+    fieldNamePrefix?: string | undefined;
+    /** Which copy of a repeated page this is; its fields' values sit in that row of the page's list. */
+    copy?: number | undefined;
 }
 export {};

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

@@ -16,5 +16,6 @@ export declare function useWizardState({ stepOrder, steps, validateStep }: UseWi
     goToNext: () => Promise<boolean>;
     goToPrevious: () => void;
     jumpToStep: (stepKey: string) => boolean;
+    showStep: (stepKey: string) => void;
 };
 export {};

package/dist/form/Wizard/useWizardState.js

@@ -61,7 +61,11 @@ function useWizardState({ stepOrder, steps, validateStep }) {
 			stepOrder,
 			visitedSteps,
 			currentStep
-		])
+		]),
+		showStep: useCallback((stepKey) => {
+			setCurrentStep(stepKey);
+			setVisitedSteps((prev) => /* @__PURE__ */ new Set([...prev, stepKey]));
+		}, [])
 	};
 }
 //#endregion

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

@@ -1,2 +1,9 @@
 import type { ParsedWizardConfig } from './types.js';
 export declare function parseWizardConfig(options: Record<string, unknown>): ParsedWizardConfig | null;
+/** A step's title or description as one text: a list's first entry, as one copy shows it. */
+export declare function stepText(value: string | string[] | undefined): string;
+/** A repeated page's bounds on its copies, read as a list's `min`/`max`; without a `min` it starts empty. */
+export declare function copyBounds(min: unknown, max: unknown): {
+    lo: number;
+    hi: number | undefined;
+};

package/dist/form/Wizard/utils.js

@@ -25,5 +25,22 @@ function parseWizardConfig(options) {
 		stepOrder
 	};
 }
+/** A step's title or description as one text: a list's first entry, as one copy shows it. */
+function stepText(value) {
+	return Array.isArray(value) ? value[0] ?? "" : value ?? "";
+}
+/** A repeated page's bounds on its copies, read as a list's `min`/`max`; without a `min` it starts empty. */
+function copyBounds(min, max) {
+	const count = (value) => {
+		const n = value === void 0 || value === null || value === "" ? NaN : Number(value);
+		return Number.isInteger(n) && n >= 0 ? n : void 0;
+	};
+	const lo = count(min) ?? 0;
+	const hi = count(max);
+	return {
+		lo,
+		hi: hi === void 0 ? void 0 : Math.max(hi, lo)
+	};
+}
 //#endregion
-export { parseWizardConfig };
+export { copyBounds, parseWizardConfig, stepText };

package/dist/form/index.d.ts

@@ -5,6 +5,8 @@ export { type FieldLabelBinding, FieldWrapper } from './FieldWrapper.js';
 export { collectFieldsWithDefaults, DynamicDefaultsSync, DynamicForm, type DynamicFormProps, FieldsFromOptions, findSelfReferencingFieldNames, GroupHeader, MultiSelectionDropdown, resolveMetaOverrides, type TSetFormDirty, useDynamicDefaultsSync, } from './Form.js';
 export { type FieldContextValue, FieldProvider, useFieldControlProps, useFieldLabelledByProps, useFieldRequired, } from './fieldContext.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';
 export { enforceOneMustBeTrue, flattenGroups, impureSetValueFromPath, initializeValues, resolvedFlag, } from './lib.js';
 export { default as DropdownWrapper } from './SpecialTypes/DropdownWrapper.js';
 export { default as FormikMultiSelectDropdown } from './SpecialTypes/FormikMultiSelectDropdown.js';