@whatsaaaa/form-builder-react 0.1.0 → 0.2.0

package/README.md

@@ -49,12 +49,13 @@ export function DefinitionForm({ definition }: { definition: JsonForm }) {
 useJsonForm(definition, {
   builder: createSchemaBuilder({ fieldTypes: { money } }), // your own types, rules and messages
   components, // your component per field type, see below
+  layoutComponents, // your component per layout type, see Layout
   validate: 'blur', // when a field is validated the first time, as in Formisch
   revalidate: 'input', // when it is validated again
 })
 ```
 
-`builder`, `validate` and `revalidate` are read on the first render, with the definition. `components` is read on every render.
+`builder`, `validate` and `revalidate` are read on the first render, with the definition. `components` and `layoutComponents` are read on every render.
 
 ## Components
 
@@ -208,9 +209,122 @@ export function Heading({ field }: DisplayFieldProps) {
 }
 ```
 
+## Layout
+
+A definition's [`layout`](https://github.com/whatsaaaa/form-builder/tree/main/packages/schema#layout) puts its fields in sections, rows of a 12-column grid and steps, and leaves slots for content of yours. `<JsonFields>` renders the current step of it. Give `useJsonForm` a component for each layout type the definition uses, and `<JsonFields>` the content of its slots:
+
+```tsx
+import type { LayoutComponents, RowProps, SectionProps } from '@whatsaaaa/form-builder-react'
+
+function Section({ section, children }: SectionProps) {
+  return (
+    <fieldset>
+      <legend>{section.label}</legend>
+      {children}
+    </fieldset>
+  )
+}
+
+// One line of a 12-column grid. On a narrow screen, give each cell the whole row.
+function Row({ spans, children }: RowProps) {
+  return (
+    <div className="row">
+      {spans.map((span, index) => (
+        <div key={index} style={{ gridColumn: `span ${span}` }}>
+          {children(index)}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const layoutComponents: LayoutComponents = { section: Section, row: Row }
+
+function Checkout({ definition }: { definition: JsonForm }) {
+  const jsonForm = useJsonForm(definition, { components, layoutComponents })
+  return (
+    <Form of={jsonForm.form} onSubmit={save}>
+      <JsonFields of={jsonForm} slots={{ submit: <button type="submit">Place order</button> }} />
+    </Form>
+  )
+}
+```
+
+```css
+.row {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
+}
+```
+
+| Layout type | Props                                                                                                                    |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `section`   | `section`, as written, with its `id`, `label`, `description` and `ui`; `children`                                        |
+| `row`       | `row`, as written, with its `id` and `ui`; `spans`, the span of each cell; `children(index)` renders the cell at `index` |
+
+- `layoutComponents` goes to `useJsonForm`, or to `<JsonFields>` as a prop, which wins. A definition without sections or rows needs none, and one without a `layout` renders as it always did.
+- A layout type the layout uses without a component, or a slot without content in `slots`, throws a `TypeError` naming each one, on every step.
+- Display elements written in the layout render with your field components, like the ones in `fields`.
+- `except` leaves fields out of the layout too, and a section or a row left without fields drops out. The other cells of a row keep their spans. `only` renders the fields it names without the layout.
+- The spans are for a wide screen: the layout says nothing about narrow ones, so your row component decides, e.g. with a media query.
+
+### Steps
+
+`jsonForm.steps` is where the form is, and how to move:
+
+```tsx
+function Signup({ definition }: { definition: JsonForm }) {
+  const jsonForm = useJsonForm(definition, { components, layoutComponents })
+  const { steps } = jsonForm
+  return (
+    <Form of={jsonForm.form} onSubmit={save}>
+      <ol>
+        {steps.list.map((step, i) => (
+          <li key={step.step.id ?? i} aria-current={i === steps.index ? 'step' : undefined}>
+            {step.step.label}
+          </li>
+        ))}
+      </ol>
+      <JsonFields of={jsonForm} />
+      {!steps.isFirst && (
+        <button type="button" onClick={steps.back}>
+          Back
+        </button>
+      )}
+      {steps.isLast ? (
+        <button type="submit">Sign up</button>
+      ) : (
+        <button type="button" onClick={() => void steps.next()}>
+          Next
+        </button>
+      )}
+    </Form>
+  )
+}
+```
+
+| Member              |                                                                                                      |
+| ------------------- | ---------------------------------------------------------------------------------------------------- |
+| `list`              | every step, with its `step` as written (`id`, `label`, `description`, `ui`), `children` and `fields` |
+| `index`, `current`  | the step `<JsonFields>` renders                                                                      |
+| `isFirst`, `isLast` |                                                                                                      |
+| `next()`            | validates, and moves on when the step's fields have no issues. Resolves to whether it moved          |
+| `back()`            | moves back, without validating                                                                       |
+| `goTo(index)`       | back freely; forward through each step on the way, stopping at the first with issues                 |
+
+The form is one Formisch form, so Formisch validates all of it at once. The steps make that work:
+
+- **Next** validates the whole form, and only the issues on the current step's fields keep the user there. It focuses the first one, in layout order.
+- **A step shows what the user left**: the errors it had when they left it, and none the first time they get to it, so the issues of steps nobody saw yet stay out of sight.
+- **A step that failed Next revalidates** as the user fixes it, on the `revalidate` event, like a form after a failed submit.
+- **A submit before the last step is a Next**, so Enter in a step with a single text input doesn't submit the form early. On the last step, Formisch submits as usual.
+- **A submit that fails because of an earlier step**, like a form rule that reads fields of two steps, goes back to that step.
+- `<JsonFields step={2} />` renders a given step instead of the current one, e.g. on a review page. A form without steps has one, and nothing changes for it.
+
 ## Placing fields yourself
 
-`<JsonFields>` renders every field in the order of the definition. To put some of them somewhere else, place them with `<JsonField>` and leave them out of `<JsonFields>` with `except`:
+Without a `layout`, `<JsonFields>` renders every field in the order of the definition. To put some of them somewhere else, in code rather than in the definition, place them with `<JsonField>` and leave them out of `<JsonFields>` with `except`:
 
 ```tsx
 <Form of={jsonForm.form} onSubmit={save}>
@@ -227,7 +341,7 @@ export function Heading({ field }: DisplayFieldProps) {
 
 - A path is the field's names joined with dots: `'email'`, or `'address.city'` for a field of a group. A placed field validates, focuses and submits like any other, because it is still part of the one Formisch form.
 - A group or an array comes with all its fields. A field of an array's items can't be placed on its own, because it has no index outside its item, so place the array. To leave such a field out of every item, use `'*'` for the index: `except={['lines.*.note']}`.
-- `only` renders just the fields it names, in the order of the definition: `<JsonFields of={jsonForm} only={['name', 'email']} />`. Display elements have no name, so `only` leaves them out.
+- `only` renders just the fields it names, in the order of the definition: `<JsonFields of={jsonForm} only={['name', 'email']} />`. Display elements have no dot path, even with a name, so `only` leaves them out.
 - A path that names no field throws a `TypeError`, so a typo shows up at once. `only` and `except` are read on every render, so they can change, and a field keeps what was typed while it is hidden.
 
 ## Typing the form
@@ -257,4 +371,4 @@ useFieldArray(jsonForm.form, { path: ['lines'] })
 
 - Labels and display text reach your components as written in the definition. The builder's `resolveMessage` only changes what goes into the schema, so translate `field.label` in your components.
 - `ui.widget` doesn't pick a component. A component can read `field.ui` itself, e.g. to show a multiselect as checkboxes.
-- Showing and hiding fields, or making one required because of another, belongs to a future affects package.
+- Showing and hiding fields, or making one required because of another, belongs to a future affects package. The layout already hides a section, a row or a step whose fields are all hidden, through `shownNodes` in the schema package.

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { FieldNode, FieldNode as FieldNode$1, FieldPath, FieldPath as FieldPath$1, FieldRole, JsonField as JsonField$1, JsonForm, JsonFormSchema, JsonFormSchema as JsonFormSchema$1, SchemaBuilder, TypedJsonFormSchema, TypedJsonFormSchema as TypedJsonFormSchema$1, ValueKind } from "@whatsaaaa/form-builder-schema";
+import { FieldNode, FieldNode as FieldNode$1, FieldPath, FieldPath as FieldPath$1, FieldRole, FormLayout, FormLayout as FormLayout$1, JsonField as JsonField$1, JsonForm, JsonFormSchema, JsonFormSchema as JsonFormSchema$1, JsonLayoutRow, JsonLayoutSection, LayoutNode, LayoutStep, LayoutStep as LayoutStep$1, SchemaBuilder, TypedJsonFormSchema, TypedJsonFormSchema as TypedJsonFormSchema$1, ValueKind } from "@whatsaaaa/form-builder-schema";
 import { FieldElementProps, FormSchema, FormStore, ValidationMode } from "@formisch/react";
 import { ComponentType, ReactElement, ReactNode } from "react";
 /**
@@ -49,11 +49,61 @@ interface ArrayFieldProps {
   /** Renders the fields of the item at `index`. */
   children: (index: number) => ReactNode;
 }
+/**
+ * Your component for each layout type a definition's `layout` uses: `{ section: Card, row: Grid }`.
+ * A definition without sections or rows needs none.
+ */
+interface LayoutComponents {
+  section?: ComponentType<SectionProps>;
+  row?: ComponentType<RowProps>;
+}
+/** The props of a component for a section of the layout. */
+interface SectionProps {
+  /** The section as written, with its `id`, `label`, `description` and `ui`. */
+  section: JsonLayoutSection;
+  /** The section's items. */
+  children: ReactNode;
+}
+/** The props of a component for a row of the layout: one line of a 12-column grid. */
+interface RowProps {
+  /** The row as written, with its `id` and `ui`. */
+  row: JsonLayoutRow;
+  /** How many of the 12 columns each cell takes, in order. They add up to 12 at most. */
+  spans: number[];
+  /** Renders the cell at `index`. */
+  children: (index: number) => ReactNode;
+}
+/** The steps of a form, from its layout. A form without `steps` in its layout has one. */
+interface JsonFormSteps {
+  /** Every step, in order. */
+  readonly list: readonly LayoutStep$1[];
+  /** The index of the current step in `list`. */
+  readonly index: number;
+  /** The step `<JsonFields>` renders. */
+  readonly current: LayoutStep$1;
+  readonly isFirst: boolean;
+  readonly isLast: boolean;
+  /**
+   * Validates the whole form, and moves to the next step when the fields of this one have no
+   * issues. Otherwise it stays, and focuses the first field with an issue, in layout order.
+   * Resolves to whether it moved.
+   */
+  next(): Promise<boolean>;
+  /** Moves to the step before, without validating. */
+  back(): void;
+  /**
+   * Moves to the step at `index`. Back is free, and forward validates every step on the way, like
+   * `next()`, and stops at the first with issues. Resolves to whether it got there.
+   */
+  goTo(index: number): Promise<boolean>;
+}
 interface UseJsonFormOptions {
   /** Builds the schema and knows your own types and rules. Defaults to `createSchemaBuilder()`. */
   builder?: SchemaBuilder;
   /** Your component for each field type, so `<JsonFields>` and `<JsonField>` don't need them. */
   components?: FieldComponents;
+  /** Your component for each layout type the definition's `layout` uses, like `section`. */
+  layoutComponents?: LayoutComponents;
   /** When a field is validated the first time, as in Formisch. */
   validate?: ValidationMode;
   /** When a field is validated again after that, as in Formisch. */
@@ -67,8 +117,14 @@ interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema$1> {
   readonly builder: SchemaBuilder;
   /** The components from the options, if any. */
   readonly components: FieldComponents | undefined;
-  /** The definition's fields as a tree, the way `<JsonFields>` renders them. */
+  /** The layout components from the options, if any. */
+  readonly layoutComponents: LayoutComponents | undefined;
+  /** The definition's fields as a tree, for `<JsonFields only>` and `<JsonField>`. */
   readonly fields: readonly FieldNode$1[];
+  /** The definition's layout, the way `<JsonFields>` renders it. */
+  readonly layout: FormLayout$1;
+  /** The layout's steps: the current one, and Next, Back and Go to. A form without steps has one. */
+  readonly steps: JsonFormSteps;
 }
 /** Any form `useJsonForm` returns, typed or not: what the components take. */
 type AnyJsonFormInstance = JsonFormInstance<FormSchema>;
@@ -77,7 +133,7 @@ type AnyJsonFormInstance = JsonFormInstance<FormSchema>;
  * definition with issues throws the builder's `DefinitionError`, so run `validate()` first when it
  * comes from outside your code. Like Formisch's `useForm`, it reads the definition, the builder and
  * the validation modes on the first render: give the component a new `key` to use another
- * definition. The components are read on every render.
+ * definition. The components and layout components are read on every render.
  */
 export declare function useJsonForm(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance;
 /**
@@ -103,15 +159,25 @@ interface JsonFieldsProps {
   of: AnyJsonFormInstance;
   /** Defaults to the components `useJsonForm` got. */
   components?: FieldComponents | undefined;
-  /** Renders only these fields, by path, in the order of the definition. */
+  /** Defaults to the layout components `useJsonForm` got. */
+  layoutComponents?: LayoutComponents | undefined;
+  /** The content of the layout's slots, by name: `{ submit: <button type="submit">Save</button> }`. */
+  slots?: Readonly<Record<string, ReactNode>> | undefined;
+  /** Renders only these fields, by path, in the order of the definition, without the layout. */
   only?: readonly string[] | undefined;
-  /** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */
+  /**
+   * Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. A section or a
+   * row left without fields drops out too.
+   */
   except?: readonly string[] | undefined;
+  /** Renders the step at this index instead of the current one, e.g. on a review page. */
+  step?: number | undefined;
 }
 /**
- * Renders the fields of a `useJsonForm` form with your components, one per field type. It renders
+ * Renders the fields of a `useJsonForm` form with your components, one per field type, where the
+ * definition's `layout` puts them: the current step, with its sections, rows and slots. It renders
  * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button.
  */
-export declare function JsonFields({ of, components, only, except }: JsonFieldsProps): ReactElement;
-export type { AnyJsonFormInstance, ArrayFieldProps, DisplayFieldProps, FieldComponents, FieldNode, FieldPath, FieldRole, GroupFieldProps, JsonFieldProps, JsonFieldsProps, JsonFormInstance, JsonFormSchema, TypedJsonFormSchema, UseJsonFormOptions, ValueFieldProps };
+export declare function JsonFields(props: JsonFieldsProps): ReactElement;
+export type { AnyJsonFormInstance, ArrayFieldProps, DisplayFieldProps, FieldComponents, FieldNode, FieldPath, FieldRole, FormLayout, GroupFieldProps, JsonFieldProps, JsonFieldsProps, JsonFormInstance, JsonFormSchema, JsonFormSteps, LayoutComponents, LayoutNode, LayoutStep, RowProps, SectionProps, TypedJsonFormSchema, UseJsonFormOptions, ValueFieldProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,7 +1,159 @@
-import { checkComponents, coerceInput, createSchemaBuilder, dotPathOf, findField, isRequired, selectFields, toFieldPath } from "@whatsaaaa/form-builder-schema";
-import { insert, move, remove, useField, useFieldArray, useForm } from "@formisch/react";
-import { useCallback, useMemo, useState } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { checkComponents, checkLayoutComponents, coerceInput, createSchemaBuilder, dotPathOf, fieldPathsOf, findField, isRequired, issuesOfStep, selectFields, shownNodes, toFieldPath } from "@whatsaaaa/form-builder-schema";
+import { focus, getErrors, getInput, insert, move, remove, setErrors, useField, useFieldArray, useForm, validate } from "@formisch/react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+// src/json-form-steps.ts
+const fieldEvents = /* @__PURE__ */ new WeakMap();
+/** What a field of `form` calls on each event, for a form with steps. Undefined with one step. */
+const fieldEventsOf = (form) => fieldEvents.get(form);
+/**
+* The steps of `layout`, for `useJsonForm`. With more than one, a step shows the errors it had
+* when the user left it, and none the first time they get to it, a step that failed Next revalidates as the user fixes it, a submit
+* before the last step moves on like Next, and a submit that fails because of an earlier step
+* goes back to it. Like Formisch's `useForm`, it reads the validation modes on the first render.
+*/
+function useJsonFormSteps(form, layout, modes) {
+	const list = layout.steps;
+	const [index, setIndex] = useState(0);
+	const state = useRef({
+		index: 0,
+		left: /* @__PURE__ */ new Map(),
+		failed: /* @__PURE__ */ new Set(),
+		focus: void 0,
+		submitting: false,
+		modes
+	});
+	const methods = useMemo(() => {
+		const at = state.current;
+		async function goTo(target) {
+			if (!Number.isInteger(target) || target < 0 || target >= list.length) throw new RangeError(`No step ${target}. The form has ${list.length}.`);
+			if (target <= at.index) {
+				move(target);
+				return true;
+			}
+			const { issues } = await validate(form);
+			for (let step = at.index; step < target; step++) {
+				const found = issuesOfStep(list[step], issues);
+				if (found.length) {
+					stop(step, found);
+					return false;
+				}
+				at.failed.delete(step);
+			}
+			move(target);
+			return true;
+		}
+		/**
+		* Moves to a step as the user left it: with the errors it had then, and none the first time, and
+		* revalidating if it failed Next. Validating the steps before set errors on its fields, which
+		* the user never saw.
+		*/
+		function move(target) {
+			leave();
+			const errors = at.left.get(target);
+			for (const path of fieldPathsOf(list[target], getInput(form))) setErrors(form, {
+				path,
+				errors: errors?.get(JSON.stringify(path)) ?? null
+			});
+			at.index = target;
+			setIndex(target);
+		}
+		/** Keeps the errors of the current step, for when the user comes back to it. */
+		function leave() {
+			const errors = fieldPathsOf(list[at.index], getInput(form)).map((path) => [JSON.stringify(path), getErrors(form, { path })]);
+			at.left.set(at.index, new Map(errors));
+		}
+		/** Stays on, or goes to, the step at `target`, with its issues shown. */
+		function stop(target, found) {
+			at.failed.add(target);
+			const path = found.find((issue) => issue.field.role === "value")?.path;
+			if (target === at.index) {
+				if (path) focus(form, { path });
+				return;
+			}
+			leave();
+			at.focus = path;
+			at.index = target;
+			setIndex(target);
+		}
+		const events = (event) => {
+			const validateMode = at.modes.validate ?? "submit";
+			if (!at.failed.has(at.index) || validateMode !== "submit" || form.isSubmitted) return;
+			if (event === (at.modes.revalidate ?? "input")) validate(form);
+		};
+		/** After a failed submit: back to the first step before this one with issues, if any. */
+		async function afterSubmit() {
+			const { issues } = await validate(form);
+			const step = list.findIndex((each) => issuesOfStep(each, issues).length);
+			if (step !== -1 && step < at.index) stop(step, issuesOfStep(list[step], issues));
+		}
+		const next = () => at.index === list.length - 1 ? Promise.resolve(false) : goTo(at.index + 1);
+		const back = () => {
+			if (at.index > 0) move(at.index - 1);
+		};
+		return {
+			goTo,
+			next,
+			back,
+			events,
+			afterSubmit
+		};
+	}, [form, list]);
+	useEffect(() => {
+		const path = state.current.focus;
+		state.current.focus = void 0;
+		if (path) focus(form, { path });
+	}, [form, index]);
+	const stepped = list.length > 1;
+	useEffect(() => {
+		if (!stepped) return;
+		fieldEvents.set(form, methods.events);
+		const onSubmit = (event) => {
+			if (event.target !== formElementOf(form)) return;
+			if (state.current.index === list.length - 1) {
+				state.current.submitting = true;
+				return;
+			}
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			methods.next();
+		};
+		document.addEventListener("submit", onSubmit, { capture: true });
+		return () => {
+			fieldEvents.delete(form);
+			document.removeEventListener("submit", onSubmit, { capture: true });
+		};
+	}, [
+		form,
+		list,
+		methods,
+		stepped
+	]);
+	const submitting = form.isSubmitting;
+	useEffect(() => {
+		if (!state.current.submitting || submitting) return;
+		state.current.submitting = false;
+		if (!form.isValid) methods.afterSubmit();
+	});
+	return useMemo(() => ({
+		list,
+		index,
+		current: list[index],
+		isFirst: index === 0,
+		isLast: index === list.length - 1,
+		next: methods.next,
+		back: methods.back,
+		goTo: methods.goTo
+	}), [
+		list,
+		index,
+		methods
+	]);
+}
+/** The `<form>` Formisch's `<Form>` renders, which it keeps on the store for its `submit()`. */
+function formElementOf(form) {
+	return form["~internal"]?.element;
+}
 // src/array-field.tsx
 /** Connects a container of kind `array` to Formisch, and renders your component for it. */
 function ArrayField({ of, node, path, component: Component, renderItem }) {
@@ -10,19 +162,28 @@ function ArrayField({ of, node, path, component: Component, renderItem }) {
 	const { field } = node;
 	const at = array.path;
 	const methods = useMemo(() => ({
-		add: () => insert(form, {
-			path: at,
-			initialInput: builder.getItemInput(field)
-		}),
-		remove: (index) => remove(form, {
-			path: at,
-			at: index
-		}),
-		move: (from, to) => move(form, {
-			path: at,
-			from,
-			to
-		})
+		add: () => {
+			insert(form, {
+				path: at,
+				initialInput: builder.getItemInput(field)
+			});
+			fieldEventsOf(form)?.("input");
+		},
+		remove: (index) => {
+			remove(form, {
+				path: at,
+				at: index
+			});
+			fieldEventsOf(form)?.("input");
+		},
+		move: (from, to) => {
+			move(form, {
+				path: at,
+				from,
+				to
+			});
+			fieldEventsOf(form)?.("input");
+		}
 	}), [
 		form,
 		builder,
@@ -42,7 +203,31 @@ function ArrayField({ of, node, path, component: Component, renderItem }) {
 /** Connects a field with a value to Formisch, and renders your component for it. */
 function ValueField({ of, node, path, component: Component }) {
 	const field = useField(of.form, { path });
-	const setInput = useCallback((input) => field.onChange(coerceInput(input, node)), [field, node]);
+	const { form } = of;
+	const setInput = useCallback((input) => {
+		field.onChange(coerceInput(input, node));
+		fieldEventsOf(form)?.("input");
+	}, [
+		field,
+		node,
+		form
+	]);
+	const inputProps = of.steps.list.length > 1 ? {
+		...field.props,
+		onFocus: () => {
+			field.props.onFocus();
+			fieldEventsOf(form)?.("touch");
+		},
+		onChange: (event) => {
+			field.props.onChange(event);
+			fieldEventsOf(form)?.("input");
+			fieldEventsOf(form)?.("change");
+		},
+		onBlur: () => {
+			field.props.onBlur();
+			fieldEventsOf(form)?.("blur");
+		}
+	} : field.props;
 	return /* @__PURE__ */ jsx(Component, {
 		field: node.field,
 		path,
@@ -50,7 +235,7 @@ function ValueField({ of, node, path, component: Component }) {
 		required: isRequired(node.field),
 		input: field.input,
 		errors: field.errors,
-		inputProps: field.props,
+		inputProps,
 		setInput
 	});
 }
@@ -63,25 +248,28 @@ function resolveComponents(components, of) {
 }
 /** `indexes` are the indexes of the array items the fields are in, outermost first. */
 function renderFields(ctx, nodes, indexes) {
-	return nodes.map((node, position) => renderField(ctx, node, indexes, position));
+	return nodes.map((node, position) => renderField(ctx, node, indexes, dotPathOf(node) ?? `#${position}`, (inner) => renderFields(ctx, node.children, inner)));
 }
-function renderField(ctx, node, indexes, position) {
+/**
+* Renders one field with its component. `children` renders the fields inside a group, or inside
+* the item of an array, with the indexes of the items they are in.
+*/
+function renderField(ctx, node, indexes, key, children) {
 	const component = ctx.components[node.type];
 	const path = toFieldPath(node.dataPath, indexes);
-	const key = dotPathOf(node) ?? `#${position}`;
 	switch (node.role) {
 		case "display": return /* @__PURE__ */ jsx(component, { field: node.field }, key);
 		case "group": return /* @__PURE__ */ jsx(component, {
 			field: node.field,
 			path,
-			children: renderFields(ctx, node.children, indexes)
+			children: children(indexes)
 		}, key);
 		case "array": return /* @__PURE__ */ jsx(ArrayField, {
 			of: ctx.of,
 			node,
 			path,
 			component,
-			renderItem: (index) => renderFields(ctx, node.children, [...indexes, index])
+			renderItem: (index) => children([...indexes, index])
 		}, key);
 		case "value": return /* @__PURE__ */ jsx(ValueField, {
 			of: ctx.of,
@@ -103,24 +291,80 @@ function JsonField({ of, path, components }) {
 		components: resolveComponents(components, of)
 	};
 	checkComponents([node], ctx.components);
-	return renderField(ctx, node, [], 0);
+	return renderField(ctx, node, [], dotPathOf(node) ?? "#0", (indexes) => renderFields(ctx, node.children, indexes));
+}
+// src/render-layout.tsx
+/**
+* Renders layout nodes. A field left out drops out, and so does a section or a row left without
+* fields. `indexes` are the indexes of the array items the nodes are in, outermost first.
+*/
+function renderLayout(ctx, nodes, indexes) {
+	return shownNodes(nodes, indexes, ctx.isShown).map((node) => renderNode(ctx, node, indexes));
+}
+function renderNode(ctx, node, indexes) {
+	const { key } = node;
+	switch (node.type) {
+		case "field": return renderField(ctx, node.node, indexes, key, (inner) => renderLayout(ctx, node.children, inner));
+		case "section": {
+			const Section = ctx.layoutComponents.section;
+			return /* @__PURE__ */ jsx(Section, {
+				section: node.section,
+				children: renderLayout(ctx, node.children, indexes)
+			}, key);
+		}
+		case "row": {
+			const Row = ctx.layoutComponents.row;
+			return /* @__PURE__ */ jsx(Row, {
+				row: node.row,
+				spans: node.children.map((cell) => cell.span),
+				children: (index) => renderNode(ctx, node.children[index], indexes)
+			}, key);
+		}
+		case "slot": return /* @__PURE__ */ jsx(Fragment, { children: ctx.slots[node.name] }, key);
+	}
 }
 // src/json-fields.tsx
 /**
-* Renders the fields of a `useJsonForm` form with your components, one per field type. It renders
+* Renders the fields of a `useJsonForm` form with your components, one per field type, where the
+* definition's `layout` puts them: the current step, with its sections, rows and slots. It renders
 * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button.
 */
-function JsonFields({ of, components, only, except }) {
+function JsonFields(props) {
+	const { of, only, except } = props;
 	const ctx = {
 		of,
-		components: resolveComponents(components, of)
+		components: resolveComponents(props.components, of)
 	};
 	const nodes = selectFields(of.fields, {
 		only,
 		except
 	});
-	checkComponents(nodes, ctx.components);
-	return /* @__PURE__ */ jsx(Fragment, { children: renderFields(ctx, nodes, []) });
+	if (only || !of.definition.layout) {
+		checkComponents(nodes, ctx.components);
+		return /* @__PURE__ */ jsx(Fragment$1, { children: renderFields(ctx, nodes, []) });
+	}
+	const { layout, steps } = of;
+	const left = new Set(except);
+	const layoutCtx = {
+		...ctx,
+		layoutComponents: props.layoutComponents ?? of.layoutComponents ?? {},
+		slots: props.slots ?? {},
+		isShown: (node) => !left.has(dotPathOf(node) ?? "")
+	};
+	checkComponents(layout.steps.flatMap((step) => fieldsOf(step.children)), ctx.components);
+	checkLayoutComponents(layout, layoutCtx.layoutComponents, layoutCtx.slots);
+	const index = props.step ?? steps.index;
+	const step = steps.list[index];
+	if (!step) throw new RangeError(`No step ${props.step}. The form has ${steps.list.length}.`);
+	return /* @__PURE__ */ jsx(Fragment, { children: renderLayout(layoutCtx, step.children, []) }, index);
+}
+/** Every field of the nodes, display elements written in the layout included. */
+function fieldsOf(nodes) {
+	return nodes.flatMap((node) => {
+		if (node.type === "slot") return [];
+		const inner = fieldsOf(node.children);
+		return node.type === "field" ? [node.node, ...inner] : inner;
+	});
 }
 // src/use-json-form.ts
 function useJsonForm(definition, options = {}) {
@@ -131,7 +375,8 @@ function useJsonForm(definition, options = {}) {
 			builder,
 			schema: builder.build(definition),
 			initialInput: builder.getInitialInput(definition),
-			fields: builder.getFieldTree(definition)
+			fields: builder.getFieldTree(definition),
+			layout: builder.getLayout(definition)
 		};
 	});
 	const form = useForm({
@@ -140,17 +385,23 @@ function useJsonForm(definition, options = {}) {
 		validate: options.validate,
 		revalidate: options.revalidate
 	});
-	const { components } = options;
+	const steps = useJsonFormSteps(form, built.layout, options);
+	const { components, layoutComponents } = options;
 	return useMemo(() => ({
 		form,
 		definition: built.definition,
 		builder: built.builder,
 		components,
-		fields: built.fields
+		layoutComponents,
+		fields: built.fields,
+		layout: built.layout,
+		steps
 	}), [
 		form,
 		built,
-		components
+		components,
+		layoutComponents,
+		steps
 	]);
 }
 export { JsonField, JsonFields, useJsonForm };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Display","Group"],"sources":["../src/array-field.tsx","../src/value-field.tsx","../src/render-fields.tsx","../src/json-field.tsx","../src/json-fields.tsx","../src/use-json-form.ts"],"sourcesContent":["import { insert, move, remove, useFieldArray } from '@formisch/react'\nimport type { FieldNode, FieldPath } from '@whatsaaaa/form-builder-schema'\nimport { type ComponentType, type ReactElement, type ReactNode, useMemo } from 'react'\nimport type { ArrayFieldProps } from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\ninterface ArrayFieldConnectionProps {\n  of: AnyJsonFormInstance\n  node: FieldNode\n  path: FieldPath\n  component: ComponentType<ArrayFieldProps>\n  /** Renders the fields of the item at `index`. */\n  renderItem: (index: number) => ReactNode\n}\n\n/** Connects a container of kind `array` to Formisch, and renders your component for it. */\nexport function ArrayField({\n  of,\n  node,\n  path,\n  component: Component,\n  renderItem,\n}: ArrayFieldConnectionProps): ReactElement {\n  // The path comes from the definition at runtime, so the schema's types can't check it.\n  const array = useFieldArray(of.form, { path: path as never })\n\n  // Formisch keeps the path it got while the array is the same, so the methods stay the same too.\n  const { form, builder } = of\n  const { field } = node\n  const at = array.path\n  const methods = useMemo(\n    () => ({\n      // A new item starts with the defaults of its fields, like the items of a new form.\n      add: () => insert(form, { path: at, initialInput: builder.getItemInput(field) as never }),\n      remove: (index: number) => remove(form, { path: at, at: index }),\n      move: (from: number, to: number) => move(form, { path: at, from, to }),\n    }),\n    [form, builder, field, at],\n  )\n\n  return (\n    <Component field={field} path={path} items={array.items} errors={array.errors} {...methods}>\n      {renderItem}\n    </Component>\n  )\n}\n","import { useField } from '@formisch/react'\nimport {\n  coerceInput,\n  type FieldNode,\n  type FieldPath,\n  isRequired,\n} from '@whatsaaaa/form-builder-schema'\nimport { type ComponentType, type ReactElement, useCallback } from 'react'\nimport type { ValueFieldProps } from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\ninterface ValueFieldConnectionProps {\n  of: AnyJsonFormInstance\n  node: FieldNode\n  path: FieldPath\n  component: ComponentType<ValueFieldProps>\n}\n\n/** Connects a field with a value to Formisch, and renders your component for it. */\nexport function ValueField({\n  of,\n  node,\n  path,\n  component: Component,\n}: ValueFieldConnectionProps): ReactElement {\n  // The path comes from the definition at runtime, so the schema's types can't check it.\n  const field = useField(of.form, { path: path as never })\n  const setInput = useCallback(\n    (input: unknown) => field.onChange(coerceInput(input, node) as never),\n    [field, node],\n  )\n\n  return (\n    <Component\n      field={node.field}\n      path={path}\n      kind={node.kind}\n      required={isRequired(node.field)}\n      input={field.input}\n      errors={field.errors}\n      inputProps={field.props}\n      setInput={setInput}\n    />\n  )\n}\n","import { dotPathOf, type FieldNode, toFieldPath } from '@whatsaaaa/form-builder-schema'\nimport type { ComponentType, ReactElement } from 'react'\nimport { ArrayField } from './array-field'\nimport type {\n  ArrayFieldProps,\n  DisplayFieldProps,\n  FieldComponents,\n  GroupFieldProps,\n  ValueFieldProps,\n} from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\nimport { ValueField } from './value-field'\n\n/** What `<JsonFields>` and `<JsonField>` render with. */\nexport interface RenderContext {\n  of: AnyJsonFormInstance\n  components: FieldComponents\n}\n\n/** The components from the props, or else the ones `useJsonForm` got. */\nexport function resolveComponents(\n  components: FieldComponents | undefined,\n  of: AnyJsonFormInstance,\n): FieldComponents {\n  const resolved = components ?? of.components\n  if (!resolved) {\n    throw new TypeError('No field components. Pass them to useJsonForm, or to the component.')\n  }\n  return resolved\n}\n\n/** `indexes` are the indexes of the array items the fields are in, outermost first. */\nexport function renderFields(\n  ctx: RenderContext,\n  nodes: readonly FieldNode[],\n  indexes: readonly number[],\n): ReactElement[] {\n  return nodes.map((node, position) => renderField(ctx, node, indexes, position))\n}\n\nexport function renderField(\n  ctx: RenderContext,\n  node: FieldNode,\n  indexes: readonly number[],\n  position: number,\n): ReactElement {\n  // The fields were checked for components, and the role tells which props the component takes.\n  const component = ctx.components[node.type]\n  const path = toFieldPath(node.dataPath, indexes)\n  const key = dotPathOf(node) ?? `#${position}`\n  switch (node.role) {\n    case 'display': {\n      const Display = component as ComponentType<DisplayFieldProps>\n      return <Display key={key} field={node.field} />\n    }\n    case 'group': {\n      const Group = component as ComponentType<GroupFieldProps>\n      return (\n        <Group key={key} field={node.field} path={path}>\n          {renderFields(ctx, node.children, indexes)}\n        </Group>\n      )\n    }\n    case 'array':\n      return (\n        <ArrayField\n          key={key}\n          of={ctx.of}\n          node={node}\n          path={path}\n          component={component as ComponentType<ArrayFieldProps>}\n          renderItem={(index) => renderFields(ctx, node.children, [...indexes, index])}\n        />\n      )\n    case 'value':\n      return (\n        <ValueField\n          key={key}\n          of={ctx.of}\n          node={node}\n          path={path}\n          component={component as ComponentType<ValueFieldProps>}\n        />\n      )\n  }\n}\n","import { checkComponents, findField } from '@whatsaaaa/form-builder-schema'\nimport type { ReactElement } from 'react'\nimport type { FieldComponents } from './field-components'\nimport { type RenderContext, renderField, resolveComponents } from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\nexport interface JsonFieldProps {\n  /** What `useJsonForm` returned. */\n  of: AnyJsonFormInstance\n  /** The field's path: `'email'`, or `'address.city'` for a field of a group. */\n  path: string\n  /** Defaults to the components `useJsonForm` got. */\n  components?: FieldComponents | undefined\n}\n\n/**\n * Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A\n * group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.\n */\nexport function JsonField({ of, path, components }: JsonFieldProps): ReactElement {\n  const node = findField(of.fields, path, { placed: true })\n  const ctx: RenderContext = { of, components: resolveComponents(components, of) }\n  checkComponents([node], ctx.components)\n\n  return renderField(ctx, node, [], 0)\n}\n","import { checkComponents, selectFields } from '@whatsaaaa/form-builder-schema'\nimport type { ReactElement } from 'react'\nimport type { FieldComponents } from './field-components'\nimport { type RenderContext, renderFields, resolveComponents } from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\nexport interface JsonFieldsProps {\n  /** What `useJsonForm` returned. */\n  of: AnyJsonFormInstance\n  /** Defaults to the components `useJsonForm` got. */\n  components?: FieldComponents | undefined\n  /** Renders only these fields, by path, in the order of the definition. */\n  only?: readonly string[] | undefined\n  /** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */\n  except?: readonly string[] | undefined\n}\n\n/**\n * Renders the fields of a `useJsonForm` form with your components, one per field type. It renders\n * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button.\n */\nexport function JsonFields({ of, components, only, except }: JsonFieldsProps): ReactElement {\n  const ctx: RenderContext = { of, components: resolveComponents(components, of) }\n  const nodes = selectFields(of.fields, { only, except })\n  checkComponents(nodes, ctx.components)\n\n  return <>{renderFields(ctx, nodes, [])}</>\n}\n","import { type FormSchema, type FormStore, useForm, type ValidationMode } from '@formisch/react'\nimport {\n  createSchemaBuilder,\n  type FieldNode,\n  type JsonForm,\n  type JsonFormSchema,\n  type SchemaBuilder,\n  type TypedJsonFormSchema,\n} from '@whatsaaaa/form-builder-schema'\nimport { useMemo, useState } from 'react'\nimport type { FieldComponents } from './field-components'\n\nexport interface UseJsonFormOptions {\n  /** Builds the schema and knows your own types and rules. Defaults to `createSchemaBuilder()`. */\n  builder?: SchemaBuilder\n  /** Your component for each field type, so `<JsonFields>` and `<JsonField>` don't need them. */\n  components?: FieldComponents\n  /** When a field is validated the first time, as in Formisch. */\n  validate?: ValidationMode\n  /** When a field is validated again after that, as in Formisch. */\n  revalidate?: Exclude<ValidationMode, 'initial'>\n}\n\n/** What `useJsonForm` returns. Pass it to `<JsonFields>`. */\nexport interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema> {\n  /** The Formisch form: pass it to Formisch's `<Form of>`, or to any of its methods. */\n  readonly form: FormStore<TSchema>\n  readonly definition: JsonForm\n  readonly builder: SchemaBuilder\n  /** The components from the options, if any. */\n  readonly components: FieldComponents | undefined\n  /** The definition's fields as a tree, the way `<JsonFields>` renders them. */\n  readonly fields: readonly FieldNode[]\n}\n\n/** Any form `useJsonForm` returns, typed or not: what the components take. */\nexport type AnyJsonFormInstance = JsonFormInstance<FormSchema>\n\n/**\n * A Formisch form for a definition, with its schema and initial input from the builder. A\n * definition with issues throws the builder's `DefinitionError`, so run `validate()` first when it\n * comes from outside your code. Like Formisch's `useForm`, it reads the definition, the builder and\n * the validation modes on the first render: give the component a new `key` to use another\n * definition. The components are read on every render.\n */\nexport function useJsonForm(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance\n/**\n * The same, with the form typed by your input type, and output type when it differs, so Formisch's\n * paths and values are checked. The types are yours to keep in step with the definition.\n */\nexport function useJsonForm<TInput extends object, TOutput extends object = TInput>(\n  definition: JsonForm,\n  options?: UseJsonFormOptions,\n): JsonFormInstance<TypedJsonFormSchema<TInput, TOutput>>\nexport function useJsonForm(\n  definition: JsonForm,\n  options: UseJsonFormOptions = {},\n): JsonFormInstance {\n  // Formisch reads its config on the first render only, so the schema is built once too.\n  const [built] = useState(() => {\n    const builder = options.builder ?? createSchemaBuilder()\n    return {\n      definition,\n      builder,\n      schema: builder.build(definition),\n      initialInput: builder.getInitialInput(definition),\n      fields: builder.getFieldTree(definition),\n    }\n  })\n  const form = useForm({\n    schema: built.schema,\n    initialInput: built.initialInput,\n    validate: options.validate,\n    revalidate: options.revalidate,\n  })\n  const { components } = options\n  return useMemo(\n    () => ({\n      form,\n      definition: built.definition,\n      builder: built.builder,\n      components,\n      fields: built.fields,\n    }),\n    [form, built, components],\n  )\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,WAAW,EACzB,IACA,MACA,MACA,WAAW,WACX,cAC0C;CAE1C,MAAM,QAAQ,cAAc,GAAG,MAAM,EAAQ,KAAc,CAAC;CAG5D,MAAM,EAAE,MAAM,YAAY;CAC1B,MAAM,EAAE,UAAU;CAClB,MAAM,KAAK,MAAM;CACjB,MAAM,UAAU,eACP;EAEL,WAAW,OAAO,MAAM;GAAE,MAAM;GAAI,cAAc,QAAQ,aAAa,KAAK;EAAW,CAAC;EACxF,SAAS,UAAkB,OAAO,MAAM;GAAE,MAAM;GAAI,IAAI;EAAM,CAAC;EAC/D,OAAO,MAAc,OAAe,KAAK,MAAM;GAAE,MAAM;GAAI;GAAM;EAAG,CAAC;CACvE,IACA;EAAC;EAAM;EAAS;EAAO;CAAE,CAC3B;CAEA,OACE,oBAAC,WAAD;EAAkB;EAAa;EAAM,OAAO,MAAM;EAAO,QAAQ,MAAM;EAAQ,GAAI;EAChF,UAAA;CACQ,CAAA;AAEf;;;AC1BA,SAAgB,WAAW,EACzB,IACA,MACA,MACA,WAAW,aAC+B;CAE1C,MAAM,QAAQ,SAAS,GAAG,MAAM,EAAQ,KAAc,CAAC;CACvD,MAAM,WAAW,aACd,UAAmB,MAAM,SAAS,YAAY,OAAO,IAAI,CAAU,GACpE,CAAC,OAAO,IAAI,CACd;CAEA,OACE,oBAAC,WAAD;EACE,OAAO,KAAK;EACN;EACN,MAAM,KAAK;EACX,UAAU,WAAW,KAAK,KAAK;EAC/B,OAAO,MAAM;EACb,QAAQ,MAAM;EACd,YAAY,MAAM;EACR;CACX,CAAA;AAEL;;;ACxBA,SAAgB,kBACd,YACA,IACiB;CACjB,MAAM,WAAW,cAAc,GAAG;CAClC,IAAI,CAAC,UACH,MAAM,IAAI,UAAU,qEAAqE;CAE3F,OAAO;AACT;;AAGA,SAAgB,aACd,KACA,OACA,SACgB;CAChB,OAAO,MAAM,KAAK,MAAM,aAAa,YAAY,KAAK,MAAM,SAAS,QAAQ,CAAC;AAChF;AAEA,SAAgB,YACd,KACA,MACA,SACA,UACc;CAEd,MAAM,YAAY,IAAI,WAAW,KAAK;CACtC,MAAM,OAAO,YAAY,KAAK,UAAU,OAAO;CAC/C,MAAM,MAAM,UAAU,IAAI,KAAK,IAAI;CACnC,QAAQ,KAAK,MAAb;EACE,KAAK,WAEH,OAAO,oBAACA,WAAD,EAAmB,OAAO,KAAK,MAAQ,GAAzB,GAAyB;EAEhD,KAAK,SAEH,OACE,oBAACC,WAAD;GAAiB,OAAO,KAAK;GAAa;GACvC,UAAA,aAAa,KAAK,KAAK,UAAU,OAAO;EACpC,GAFK,GAEL;EAGX,KAAK,SACH,OACE,oBAAC,YAAD;GAEE,IAAI,IAAI;GACF;GACA;GACK;GACX,aAAa,UAAU,aAAa,KAAK,KAAK,UAAU,CAAC,GAAG,SAAS,KAAK,CAAC;EAC5E,GANM,GAMN;EAEL,KAAK,SACH,OACE,oBAAC,YAAD;GAEE,IAAI,IAAI;GACF;GACA;GACK;EACZ,GALM,GAKN;CAEP;AACF;;;;;;AClEA,SAAgB,UAAU,EAAE,IAAI,MAAM,cAA4C;CAChF,MAAM,OAAO,UAAU,GAAG,QAAQ,MAAM,EAAE,QAAQ,KAAK,CAAC;CACxD,MAAM,MAAqB;EAAE;EAAI,YAAY,kBAAkB,YAAY,EAAE;CAAE;CAC/E,gBAAgB,CAAC,IAAI,GAAG,IAAI,UAAU;CAEtC,OAAO,YAAY,KAAK,MAAM,CAAC,GAAG,CAAC;AACrC;;;;;;ACJA,SAAgB,WAAW,EAAE,IAAI,YAAY,MAAM,UAAyC;CAC1F,MAAM,MAAqB;EAAE;EAAI,YAAY,kBAAkB,YAAY,EAAE;CAAE;CAC/E,MAAM,QAAQ,aAAa,GAAG,QAAQ;EAAE;EAAM;CAAO,CAAC;CACtD,gBAAgB,OAAO,IAAI,UAAU;CAErC,OAAO,oBAAA,UAAA,EAAA,UAAG,aAAa,KAAK,OAAO,CAAC,CAAC,EAAI,CAAA;AAC3C;;AC2BA,SAAgB,YACd,YACA,UAA8B,CAAC,GACb;CAElB,MAAM,CAAC,SAAS,eAAe;EAC7B,MAAM,UAAU,QAAQ,WAAW,oBAAoB;EACvD,OAAO;GACL;GACA;GACA,QAAQ,QAAQ,MAAM,UAAU;GAChC,cAAc,QAAQ,gBAAgB,UAAU;GAChD,QAAQ,QAAQ,aAAa,UAAU;EACzC;CACF,CAAC;CACD,MAAM,OAAO,QAAQ;EACnB,QAAQ,MAAM;EACd,cAAc,MAAM;EACpB,UAAU,QAAQ;EAClB,YAAY,QAAQ;CACtB,CAAC;CACD,MAAM,EAAE,eAAe;CACvB,OAAO,eACE;EACL;EACA,YAAY,MAAM;EAClB,SAAS,MAAM;EACf;EACA,QAAQ,MAAM;CAChB,IACA;EAAC;EAAM;EAAO;CAAU,CAC1B;AACF"}
+{"version":3,"file":"index.js","names":["Display","Group"],"sources":["../src/json-form-steps.ts","../src/array-field.tsx","../src/value-field.tsx","../src/render-fields.tsx","../src/json-field.tsx","../src/render-layout.tsx","../src/json-fields.tsx","../src/use-json-form.ts"],"sourcesContent":["import {\n  focus,\n  type FormStore,\n  getErrors,\n  getInput,\n  setErrors,\n  validate,\n  type ValidationMode,\n} from '@formisch/react'\nimport {\n  type FieldPath,\n  fieldPathsOf,\n  type FormLayout,\n  issuesOfStep,\n  type LayoutStep,\n  type StepIssue,\n} from '@whatsaaaa/form-builder-schema'\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\n/** The steps of a form, from its layout. A form without `steps` in its layout has one. */\nexport interface JsonFormSteps {\n  /** Every step, in order. */\n  readonly list: readonly LayoutStep[]\n  /** The index of the current step in `list`. */\n  readonly index: number\n  /** The step `<JsonFields>` renders. */\n  readonly current: LayoutStep\n  readonly isFirst: boolean\n  readonly isLast: boolean\n  /**\n   * Validates the whole form, and moves to the next step when the fields of this one have no\n   * issues. Otherwise it stays, and focuses the first field with an issue, in layout order.\n   * Resolves to whether it moved.\n   */\n  next(): Promise<boolean>\n  /** Moves to the step before, without validating. */\n  back(): void\n  /**\n   * Moves to the step at `index`. Back is free, and forward validates every step on the way, like\n   * `next()`, and stops at the first with issues. Resolves to whether it got there.\n   */\n  goTo(index: number): Promise<boolean>\n}\n\n/** A field's error messages in Formisch, or null. */\ntype Errors = [string, ...string[]] | null\n\n/** What a field tells the steps it was through, by Formisch's name for the validation mode. */\nexport type FieldEvent = Exclude<ValidationMode, 'initial' | 'submit'>\n\n/** Revalidates a step that failed Next on each field event, like a form after a failed submit. */\ntype FieldEvents = (event: FieldEvent) => void\n\nconst fieldEvents = new WeakMap<FormStore, FieldEvents>()\n\n/** What a field of `form` calls on each event, for a form with steps. Undefined with one step. */\nexport const fieldEventsOf = (form: FormStore): FieldEvents | undefined => fieldEvents.get(form)\n\ninterface Modes {\n  validate?: ValidationMode | undefined\n  revalidate?: Exclude<ValidationMode, 'initial'> | undefined\n}\n\n/**\n * The steps of `layout`, for `useJsonForm`. With more than one, a step shows the errors it had\n * when the user left it, and none the first time they get to it, a step that failed Next revalidates as the user fixes it, a submit\n * before the last step moves on like Next, and a submit that fails because of an earlier step\n * goes back to it. Like Formisch's `useForm`, it reads the validation modes on the first render.\n */\nexport function useJsonFormSteps(form: FormStore, layout: FormLayout, modes: Modes): JsonFormSteps {\n  const list = layout.steps\n  const [index, setIndex] = useState(0)\n  // What the async methods and the event handlers read: always the latest.\n  const state = useRef({\n    index: 0,\n    // The errors each step had when the user left it, by the JSON of each field's path.\n    left: new Map<number, Map<string, Errors>>(),\n    // The steps that failed Next, and haven't passed since.\n    failed: new Set<number>(),\n    // The field to focus once the step it is on has rendered.\n    focus: undefined as FieldPath | undefined,\n    // Whether a submit on the last step is on its way through Formisch.\n    submitting: false,\n    modes,\n  })\n\n  const methods = useMemo(() => {\n    const at = state.current\n\n    async function goTo(target: number): Promise<boolean> {\n      if (!Number.isInteger(target) || target < 0 || target >= list.length) {\n        throw new RangeError(`No step ${target}. The form has ${list.length}.`)\n      }\n      if (target <= at.index) {\n        move(target)\n        return true\n      }\n      const { issues } = await validate(form)\n      for (let step = at.index; step < target; step++) {\n        const found = issuesOfStep(list[step] as LayoutStep, issues)\n        if (found.length) {\n          stop(step, found)\n          return false\n        }\n        at.failed.delete(step)\n      }\n      move(target)\n      return true\n    }\n\n    /**\n     * Moves to a step as the user left it: with the errors it had then, and none the first time, and\n     * revalidating if it failed Next. Validating the steps before set errors on its fields, which\n     * the user never saw.\n     */\n    function move(target: number) {\n      leave()\n      const errors = at.left.get(target)\n      for (const path of fieldPathsOf(list[target] as LayoutStep, getInput(form))) {\n        setErrors(form, { path, errors: errors?.get(JSON.stringify(path)) ?? null } as never)\n      }\n      at.index = target\n      setIndex(target)\n    }\n\n    /** Keeps the errors of the current step, for when the user comes back to it. */\n    function leave() {\n      const paths = fieldPathsOf(list[at.index] as LayoutStep, getInput(form))\n      const errors = paths.map((path): [string, Errors] => [\n        JSON.stringify(path),\n        getErrors(form, { path } as never),\n      ])\n      at.left.set(at.index, new Map(errors))\n    }\n\n    /** Stays on, or goes to, the step at `target`, with its issues shown. */\n    function stop(target: number, found: readonly StepIssue[]) {\n      at.failed.add(target)\n      // A group or an array has no element: the first field that has one gets the focus.\n      const path = found.find((issue) => issue.field.role === 'value')?.path\n      if (target === at.index) {\n        if (path) focus(form, { path: path as never })\n        return\n      }\n      leave()\n      at.focus = path\n      at.index = target\n      setIndex(target)\n    }\n\n    const events: FieldEvents = (event) => {\n      // In the other modes, Formisch revalidates a field with errors itself.\n      const validateMode = at.modes.validate ?? 'submit'\n      if (!at.failed.has(at.index) || validateMode !== 'submit' || form.isSubmitted) return\n      if (event === (at.modes.revalidate ?? 'input')) void validate(form)\n    }\n\n    /** After a failed submit: back to the first step before this one with issues, if any. */\n    async function afterSubmit() {\n      const { issues } = await validate(form)\n      const step = list.findIndex((each) => issuesOfStep(each, issues).length)\n      if (step !== -1 && step < at.index) stop(step, issuesOfStep(list[step] as LayoutStep, issues))\n    }\n\n    const next = () => (at.index === list.length - 1 ? Promise.resolve(false) : goTo(at.index + 1))\n    const back = () => {\n      if (at.index > 0) move(at.index - 1)\n    }\n    return { goTo, next, back, events, afterSubmit }\n  }, [form, list])\n\n  // The field a step was stopped on, once the step has rendered.\n  useEffect(() => {\n    const path = state.current.focus\n    state.current.focus = undefined\n    if (path) focus(form, { path: path as never })\n  }, [form, index])\n\n  const stepped = list.length > 1\n  useEffect(() => {\n    if (!stepped) return\n    fieldEvents.set(form, methods.events)\n    // Before the last step, a submit, like Enter in a step with a single text input, is a Next.\n    // It is caught on its way down to the form, before Formisch's own handler sees it.\n    const onSubmit = (event: Event) => {\n      if (event.target !== formElementOf(form)) return\n      if (state.current.index === list.length - 1) {\n        state.current.submitting = true\n        return\n      }\n      event.preventDefault()\n      event.stopImmediatePropagation()\n      void methods.next()\n    }\n    document.addEventListener('submit', onSubmit, { capture: true })\n    return () => {\n      fieldEvents.delete(form)\n      document.removeEventListener('submit', onSubmit, { capture: true })\n    }\n  }, [form, list, methods, stepped])\n\n  // A submit that fails because of a step before the last, e.g. on a form rule, goes back to it.\n  // React can batch the start and the end of a submit into one render, so the submit is marked\n  // as it starts, and each render checks whether Formisch has finished it.\n  const submitting = form.isSubmitting\n  useEffect(() => {\n    if (!state.current.submitting || submitting) return\n    state.current.submitting = false\n    if (!form.isValid) void methods.afterSubmit()\n  })\n\n  return useMemo(\n    () => ({\n      list,\n      index,\n      current: list[index] as LayoutStep,\n      isFirst: index === 0,\n      isLast: index === list.length - 1,\n      next: methods.next,\n      back: methods.back,\n      goTo: methods.goTo,\n    }),\n    [list, index, methods],\n  )\n}\n\n/** The `<form>` Formisch's `<Form>` renders, which it keeps on the store for its `submit()`. */\nfunction formElementOf(form: FormStore): HTMLFormElement | undefined {\n  return (form as unknown as { '~internal'?: { element?: HTMLFormElement } })['~internal']?.element\n}\n","import { insert, move, remove, useFieldArray } from '@formisch/react'\nimport type { FieldNode, FieldPath } from '@whatsaaaa/form-builder-schema'\nimport { type ComponentType, type ReactElement, type ReactNode, useMemo } from 'react'\nimport type { ArrayFieldProps } from './field-components'\nimport { fieldEventsOf } from './json-form-steps'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\ninterface ArrayFieldConnectionProps {\n  of: AnyJsonFormInstance\n  node: FieldNode\n  path: FieldPath\n  component: ComponentType<ArrayFieldProps>\n  /** Renders the fields of the item at `index`. */\n  renderItem: (index: number) => ReactNode\n}\n\n/** Connects a container of kind `array` to Formisch, and renders your component for it. */\nexport function ArrayField({\n  of,\n  node,\n  path,\n  component: Component,\n  renderItem,\n}: ArrayFieldConnectionProps): ReactElement {\n  // The path comes from the definition at runtime, so the schema's types can't check it.\n  const array = useFieldArray(of.form, { path: path as never })\n\n  // Formisch keeps the path it got while the array is the same, so the methods stay the same too.\n  const { form, builder } = of\n  const { field } = node\n  const at = array.path\n  // In a form with steps, a step that failed Next revalidates on a change of its items too.\n  const methods = useMemo(\n    () => ({\n      // A new item starts with the defaults of its fields, like the items of a new form.\n      add: () => {\n        insert(form, { path: at, initialInput: builder.getItemInput(field) as never })\n        fieldEventsOf(form)?.('input')\n      },\n      remove: (index: number) => {\n        remove(form, { path: at, at: index })\n        fieldEventsOf(form)?.('input')\n      },\n      move: (from: number, to: number) => {\n        move(form, { path: at, from, to })\n        fieldEventsOf(form)?.('input')\n      },\n    }),\n    [form, builder, field, at],\n  )\n\n  return (\n    <Component field={field} path={path} items={array.items} errors={array.errors} {...methods}>\n      {renderItem}\n    </Component>\n  )\n}\n","import { useField } from '@formisch/react'\nimport {\n  coerceInput,\n  type FieldNode,\n  type FieldPath,\n  isRequired,\n} from '@whatsaaaa/form-builder-schema'\nimport { type ComponentType, type ReactElement, useCallback } from 'react'\nimport type { ValueFieldProps } from './field-components'\nimport { fieldEventsOf } from './json-form-steps'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\ninterface ValueFieldConnectionProps {\n  of: AnyJsonFormInstance\n  node: FieldNode\n  path: FieldPath\n  component: ComponentType<ValueFieldProps>\n}\n\n/** Connects a field with a value to Formisch, and renders your component for it. */\nexport function ValueField({\n  of,\n  node,\n  path,\n  component: Component,\n}: ValueFieldConnectionProps): ReactElement {\n  // The path comes from the definition at runtime, so the schema's types can't check it.\n  const field = useField(of.form, { path: path as never })\n  const { form } = of\n  const setInput = useCallback(\n    (input: unknown) => {\n      field.onChange(coerceInput(input, node) as never)\n      fieldEventsOf(form)?.('input')\n    },\n    [field, node, form],\n  )\n  // In a form with steps, a step that failed Next revalidates on these events too.\n  const inputProps =\n    of.steps.list.length > 1\n      ? {\n          ...field.props,\n          onFocus: () => {\n            field.props.onFocus()\n            fieldEventsOf(form)?.('touch')\n          },\n          onChange: (event: Parameters<typeof field.props.onChange>[0]) => {\n            field.props.onChange(event)\n            fieldEventsOf(form)?.('input')\n            fieldEventsOf(form)?.('change')\n          },\n          onBlur: () => {\n            field.props.onBlur()\n            fieldEventsOf(form)?.('blur')\n          },\n        }\n      : field.props\n\n  return (\n    <Component\n      field={node.field}\n      path={path}\n      kind={node.kind}\n      required={isRequired(node.field)}\n      input={field.input}\n      errors={field.errors}\n      inputProps={inputProps}\n      setInput={setInput}\n    />\n  )\n}\n","import { dotPathOf, type FieldNode, toFieldPath } from '@whatsaaaa/form-builder-schema'\nimport type { ComponentType, ReactElement, ReactNode } from 'react'\nimport { ArrayField } from './array-field'\nimport type {\n  ArrayFieldProps,\n  DisplayFieldProps,\n  FieldComponents,\n  GroupFieldProps,\n  ValueFieldProps,\n} from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\nimport { ValueField } from './value-field'\n\n/** What `<JsonFields>` and `<JsonField>` render with. */\nexport interface RenderContext {\n  of: AnyJsonFormInstance\n  components: FieldComponents\n}\n\n/** The components from the props, or else the ones `useJsonForm` got. */\nexport function resolveComponents(\n  components: FieldComponents | undefined,\n  of: AnyJsonFormInstance,\n): FieldComponents {\n  const resolved = components ?? of.components\n  if (!resolved) {\n    throw new TypeError('No field components. Pass them to useJsonForm, or to the component.')\n  }\n  return resolved\n}\n\n/** `indexes` are the indexes of the array items the fields are in, outermost first. */\nexport function renderFields(\n  ctx: RenderContext,\n  nodes: readonly FieldNode[],\n  indexes: readonly number[],\n): ReactElement[] {\n  return nodes.map((node, position) =>\n    renderField(ctx, node, indexes, dotPathOf(node) ?? `#${position}`, (inner) =>\n      renderFields(ctx, node.children, inner),\n    ),\n  )\n}\n\n/**\n * Renders one field with its component. `children` renders the fields inside a group, or inside\n * the item of an array, with the indexes of the items they are in.\n */\nexport function renderField(\n  ctx: RenderContext,\n  node: FieldNode,\n  indexes: readonly number[],\n  key: string,\n  children: (indexes: readonly number[]) => ReactNode,\n): ReactElement {\n  // The fields were checked for components, and the role tells which props the component takes.\n  const component = ctx.components[node.type]\n  const path = toFieldPath(node.dataPath, indexes)\n  switch (node.role) {\n    case 'display': {\n      const Display = component as ComponentType<DisplayFieldProps>\n      return <Display key={key} field={node.field} />\n    }\n    case 'group': {\n      const Group = component as ComponentType<GroupFieldProps>\n      return (\n        <Group key={key} field={node.field} path={path}>\n          {children(indexes)}\n        </Group>\n      )\n    }\n    case 'array':\n      return (\n        <ArrayField\n          key={key}\n          of={ctx.of}\n          node={node}\n          path={path}\n          component={component as ComponentType<ArrayFieldProps>}\n          renderItem={(index) => children([...indexes, index])}\n        />\n      )\n    case 'value':\n      return (\n        <ValueField\n          key={key}\n          of={ctx.of}\n          node={node}\n          path={path}\n          component={component as ComponentType<ValueFieldProps>}\n        />\n      )\n  }\n}\n","import { checkComponents, dotPathOf, findField } from '@whatsaaaa/form-builder-schema'\nimport type { ReactElement } from 'react'\nimport type { FieldComponents } from './field-components'\nimport { type RenderContext, renderField, renderFields, resolveComponents } from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\nexport interface JsonFieldProps {\n  /** What `useJsonForm` returned. */\n  of: AnyJsonFormInstance\n  /** The field's path: `'email'`, or `'address.city'` for a field of a group. */\n  path: string\n  /** Defaults to the components `useJsonForm` got. */\n  components?: FieldComponents | undefined\n}\n\n/**\n * Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A\n * group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.\n */\nexport function JsonField({ of, path, components }: JsonFieldProps): ReactElement {\n  const node = findField(of.fields, path, { placed: true })\n  const ctx: RenderContext = { of, components: resolveComponents(components, of) }\n  checkComponents([node], ctx.components)\n\n  return renderField(ctx, node, [], dotPathOf(node) ?? '#0', (indexes) =>\n    renderFields(ctx, node.children, indexes),\n  )\n}\n","import { type IsFieldShown, type LayoutNode, shownNodes } from '@whatsaaaa/form-builder-schema'\nimport { type ComponentType, Fragment, type ReactElement, type ReactNode } from 'react'\nimport type { LayoutComponents, RowProps, SectionProps } from './field-components'\nimport { type RenderContext, renderField } from './render-fields'\n\n/** What `<JsonFields>` renders a layout with. */\nexport interface LayoutContext extends RenderContext {\n  layoutComponents: LayoutComponents\n  /** The content of the layout's slots, by name. */\n  slots: Readonly<Record<string, ReactNode>>\n  /** False for a field left out with `except`. */\n  isShown: IsFieldShown\n}\n\n/**\n * Renders layout nodes. A field left out drops out, and so does a section or a row left without\n * fields. `indexes` are the indexes of the array items the nodes are in, outermost first.\n */\nexport function renderLayout(\n  ctx: LayoutContext,\n  nodes: readonly LayoutNode[],\n  indexes: readonly number[],\n): ReactElement[] {\n  return shownNodes(nodes, indexes, ctx.isShown).map((node) => renderNode(ctx, node, indexes))\n}\n\nfunction renderNode(\n  ctx: LayoutContext,\n  node: LayoutNode,\n  indexes: readonly number[],\n): ReactElement {\n  const { key } = node\n  switch (node.type) {\n    case 'field':\n      return renderField(ctx, node.node, indexes, key, (inner) =>\n        renderLayout(ctx, node.children, inner),\n      )\n    case 'section': {\n      // The layout was checked for components.\n      const Section = ctx.layoutComponents.section as ComponentType<SectionProps>\n      return (\n        <Section key={key} section={node.section}>\n          {renderLayout(ctx, node.children, indexes)}\n        </Section>\n      )\n    }\n    case 'row': {\n      const Row = ctx.layoutComponents.row as ComponentType<RowProps>\n      return (\n        <Row key={key} row={node.row} spans={node.children.map((cell) => cell.span)}>\n          {(index) => renderNode(ctx, node.children[index] as LayoutNode, indexes)}\n        </Row>\n      )\n    }\n    case 'slot':\n      return <Fragment key={key}>{ctx.slots[node.name]}</Fragment>\n  }\n}\n","import {\n  checkComponents,\n  checkLayoutComponents,\n  dotPathOf,\n  type FieldNode,\n  type LayoutNode,\n  selectFields,\n} from '@whatsaaaa/form-builder-schema'\nimport { Fragment, type ReactElement, type ReactNode } from 'react'\nimport type { FieldComponents, LayoutComponents } from './field-components'\nimport { type LayoutContext, renderLayout } from './render-layout'\nimport { type RenderContext, renderFields, resolveComponents } from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\nexport interface JsonFieldsProps {\n  /** What `useJsonForm` returned. */\n  of: AnyJsonFormInstance\n  /** Defaults to the components `useJsonForm` got. */\n  components?: FieldComponents | undefined\n  /** Defaults to the layout components `useJsonForm` got. */\n  layoutComponents?: LayoutComponents | undefined\n  /** The content of the layout's slots, by name: `{ submit: <button type=\"submit\">Save</button> }`. */\n  slots?: Readonly<Record<string, ReactNode>> | undefined\n  /** Renders only these fields, by path, in the order of the definition, without the layout. */\n  only?: readonly string[] | undefined\n  /**\n   * Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. A section or a\n   * row left without fields drops out too.\n   */\n  except?: readonly string[] | undefined\n  /** Renders the step at this index instead of the current one, e.g. on a review page. */\n  step?: number | undefined\n}\n\n/**\n * Renders the fields of a `useJsonForm` form with your components, one per field type, where the\n * definition's `layout` puts them: the current step, with its sections, rows and slots. It renders\n * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button.\n */\nexport function JsonFields(props: JsonFieldsProps): ReactElement {\n  const { of, only, except } = props\n  const ctx: RenderContext = { of, components: resolveComponents(props.components, of) }\n  const nodes = selectFields(of.fields, { only, except })\n  // Without a layout, it renders the fields the way it always did, and so with `only`.\n  if (only || !of.definition.layout) {\n    checkComponents(nodes, ctx.components)\n    return <>{renderFields(ctx, nodes, [])}</>\n  }\n\n  const { layout, steps } = of\n  const left = new Set(except)\n  const layoutCtx: LayoutContext = {\n    ...ctx,\n    layoutComponents: props.layoutComponents ?? of.layoutComponents ?? {},\n    slots: props.slots ?? {},\n    isShown: (node) => !left.has(dotPathOf(node) ?? ''),\n  }\n  checkComponents(\n    layout.steps.flatMap((step) => fieldsOf(step.children)),\n    ctx.components,\n  )\n  checkLayoutComponents(layout, layoutCtx.layoutComponents, layoutCtx.slots)\n\n  const index = props.step ?? steps.index\n  const step = steps.list[index]\n  if (!step) throw new RangeError(`No step ${props.step}. The form has ${steps.list.length}.`)\n  // Keyed by the step, so another step's fields don't take over this one's components.\n  return <Fragment key={index}>{renderLayout(layoutCtx, step.children, [])}</Fragment>\n}\n\n/** Every field of the nodes, display elements written in the layout included. */\nfunction fieldsOf(nodes: readonly LayoutNode[]): FieldNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === 'slot') return []\n    const inner = fieldsOf(node.children)\n    return node.type === 'field' ? [node.node, ...inner] : inner\n  })\n}\n","import { type FormSchema, type FormStore, useForm, type ValidationMode } from '@formisch/react'\nimport {\n  createSchemaBuilder,\n  type FieldNode,\n  type FormLayout,\n  type JsonForm,\n  type JsonFormSchema,\n  type SchemaBuilder,\n  type TypedJsonFormSchema,\n} from '@whatsaaaa/form-builder-schema'\nimport { useMemo, useState } from 'react'\nimport type { FieldComponents, LayoutComponents } from './field-components'\nimport { type JsonFormSteps, useJsonFormSteps } from './json-form-steps'\n\nexport interface UseJsonFormOptions {\n  /** Builds the schema and knows your own types and rules. Defaults to `createSchemaBuilder()`. */\n  builder?: SchemaBuilder\n  /** Your component for each field type, so `<JsonFields>` and `<JsonField>` don't need them. */\n  components?: FieldComponents\n  /** Your component for each layout type the definition's `layout` uses, like `section`. */\n  layoutComponents?: LayoutComponents\n  /** When a field is validated the first time, as in Formisch. */\n  validate?: ValidationMode\n  /** When a field is validated again after that, as in Formisch. */\n  revalidate?: Exclude<ValidationMode, 'initial'>\n}\n\n/** What `useJsonForm` returns. Pass it to `<JsonFields>`. */\nexport interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema> {\n  /** The Formisch form: pass it to Formisch's `<Form of>`, or to any of its methods. */\n  readonly form: FormStore<TSchema>\n  readonly definition: JsonForm\n  readonly builder: SchemaBuilder\n  /** The components from the options, if any. */\n  readonly components: FieldComponents | undefined\n  /** The layout components from the options, if any. */\n  readonly layoutComponents: LayoutComponents | undefined\n  /** The definition's fields as a tree, for `<JsonFields only>` and `<JsonField>`. */\n  readonly fields: readonly FieldNode[]\n  /** The definition's layout, the way `<JsonFields>` renders it. */\n  readonly layout: FormLayout\n  /** The layout's steps: the current one, and Next, Back and Go to. A form without steps has one. */\n  readonly steps: JsonFormSteps\n}\n\n/** Any form `useJsonForm` returns, typed or not: what the components take. */\nexport type AnyJsonFormInstance = JsonFormInstance<FormSchema>\n\n/**\n * A Formisch form for a definition, with its schema and initial input from the builder. A\n * definition with issues throws the builder's `DefinitionError`, so run `validate()` first when it\n * comes from outside your code. Like Formisch's `useForm`, it reads the definition, the builder and\n * the validation modes on the first render: give the component a new `key` to use another\n * definition. The components and layout components are read on every render.\n */\nexport function useJsonForm(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance\n/**\n * The same, with the form typed by your input type, and output type when it differs, so Formisch's\n * paths and values are checked. The types are yours to keep in step with the definition.\n */\nexport function useJsonForm<TInput extends object, TOutput extends object = TInput>(\n  definition: JsonForm,\n  options?: UseJsonFormOptions,\n): JsonFormInstance<TypedJsonFormSchema<TInput, TOutput>>\nexport function useJsonForm(\n  definition: JsonForm,\n  options: UseJsonFormOptions = {},\n): JsonFormInstance {\n  // Formisch reads its config on the first render only, so the schema is built once too.\n  const [built] = useState(() => {\n    const builder = options.builder ?? createSchemaBuilder()\n    return {\n      definition,\n      builder,\n      schema: builder.build(definition),\n      initialInput: builder.getInitialInput(definition),\n      fields: builder.getFieldTree(definition),\n      layout: builder.getLayout(definition),\n    }\n  })\n  const form = useForm({\n    schema: built.schema,\n    initialInput: built.initialInput,\n    validate: options.validate,\n    revalidate: options.revalidate,\n  })\n  const steps = useJsonFormSteps(form, built.layout, options)\n  const { components, layoutComponents } = options\n  return useMemo(\n    () => ({\n      form,\n      definition: built.definition,\n      builder: built.builder,\n      components,\n      layoutComponents,\n      fields: built.fields,\n      layout: built.layout,\n      steps,\n    }),\n    [form, built, components, layoutComponents, steps],\n  )\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whatsaaaa/form-builder-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Render JSON form definitions with Formisch and your own React components.",
   "keywords": [
     "form",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@whatsaaaa/form-builder-schema": "^0.13.0"
+    "@whatsaaaa/form-builder-schema": "^0.14.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",