@connextar/house 0.3.0 → 0.4.0

package/README.md

@@ -47,6 +47,19 @@ it. It is also the kind of code nobody should write twice: the rules about when
 to let go of an optimistic change are small, subtle and easy to get quietly
 wrong.
 
+`wizard`, in 0.4.0, is the first module extracted from five copies that had
+already been written. It is here because of what those copies cost: four of the
+five shipped a defect in it, and not one of the four was a mistake about
+wizards. PharmaLine created a booking from step two, because a `type="button"`
+Continue and a `type="submit"` Create shared a slot and React switched the one
+DOM node's type mid-click. Three PM Tool forms refused to save with nothing on
+screen saying why. MAS checked no step at all on submit, so a second press after
+a successful create sent a record whose first step had been cleared. Every one of
+those is a mistake about what a form must do before it agrees to send, and there
+is one right answer to that — which is exactly the shape of thing that belongs
+here and nowhere else. The module is the union of the five, not a copy of the
+best one.
+
 ## Modules
 
 ### `@connextar/house/errors`
@@ -305,6 +318,94 @@ learned the hard way:
 exports: anything whose result the person cannot predict, or would be alarmed to
 see undone. Guessing is only honest when the guess is nearly always right.
 
+### `@connextar/house/wizard`, `/wizard/react-hook-form`
+
+`FormWizard` — one long form split into steps that check themselves. **It renders
+the `<form>`**, because two of its promises cannot be kept from inside somebody
+else's: that Enter has one place to land, and that nothing reaches `onSubmit`
+unchecked.
+
+```tsx
+const check = useStepValidator(form); // react-hook-form; or write your own
+
+<FormWizard
+  steps={[
+    { id: "learner", title: "Learner", fields: ["studentId", "level"], content: <LearnerFields /> },
+    { id: "period", title: "Period", fields: ["startDate", "endDate"], content: <PeriodFields /> },
+    { id: "build", title: "Build", fields: [], content: <ReviewFields /> },
+  ]}
+  onValidateStep={check}
+  onSubmit={() => void form.handleSubmit(submit, report)()}
+  onCancel={() => router.push(routes.plans)}
+  submitLabel="Build my curriculum"
+  pending={pending}
+/>;
+```
+
+The rules it keeps, each one because a copy of it did not:
+
+- **Submitting checks every step, in order, and lands on the first that fails**,
+  with its message visible. Checking only the last step lets a marker jump back,
+  a cleared field and a press of Save refuse with the problem three screens away.
+  Checking none — MAS — sends the record anyway.
+- **Enter before the last step advances.** It validates the step it is on and
+  opens the next; only the last step's Enter submits. A booking that emails a
+  patient must not be creatable from the step before Confirm.
+- **One submit button, whose `type` never changes.** Never two controls sharing
+  the slot. jsdom's timing hid this, and only Chromium showed it, so the test
+  that guards it is structural: one `button[type=submit]`, the same node on every
+  step.
+- **Continue is never disabled for being incomplete.** A greyed-out button that
+  will not say what is missing is a refusal with no words. It is disabled only
+  while something is in flight.
+- **Visited markers are reachable, later steps locked** (`allReachable` opens
+  them all, for editing values that are already there).
+- **Every step stays mounted, hidden rather than unmounted**, so there is one
+  field register and nothing typed is lost stepping back.
+
+**Form-library-agnostic, because the five hosts are not the same.** A step is
+complete when the check says so, and a check may answer either way the cohort
+already writes them: `true`/`null` for complete, `false` for "not complete, and I
+am showing why beside the field", or **a sentence** for "not complete, and this is
+what to say" — which the wizard then shows in a `role="alert"` of its own. So
+react-hook-form, plain `useState` and MAS's state forms all host it unchanged. A
+check may live on the form (`onValidateStep`) or on the step (`step.validate`);
+both are asked, the step's first.
+
+`stepValidator(form, report)` and `useStepValidator(form)` are in
+`@connextar/house/wizard/react-hook-form` — its own entry point because
+`react-hook-form` is an **optional** peer dependency. Every import of it there is
+`import type`, so the emitted JavaScript never mentions it; what would break an
+app without it is a declaration file naming a package it has not installed, which
+is why the names sit behind a subpath MAS never reaches for.
+`src/wizard/entry-points.test.ts` keeps that honest against the built output.
+
+**When the error is somewhere nobody can look.** A wizard's fields live on steps
+that are mounted but hidden, and a form library will not call a submit handler
+while any field is invalid — so a message beside a field the person cannot see
+makes the button look broken. `useInvalidReporter()` returns the function to pass
+as the invalid handler (`form.handleSubmit(onSubmit, report)`); it waits for the
+form to re-render and the wizard to move, then says the message out loud **only
+if it is not already on screen**. It goes to the `ActionFeedbackProvider` from
+[`ux`](#connextarhouseux), so this module imports no toast library. A field's
+message opts in by carrying `data-error-for="<name>"` — `FieldError` does it, and
+an app's own message component adds one attribute.
+
+The look is theme-token classes, replaced part by part through `classNames`, the
+same way the guide renderer allows — there is still no `Button` in this package,
+so the wizard draws plain elements and wears the app's classes. The busy state is
+`data-busy`, which [`house.css`](#styles--connextarhousehousecss) already turns
+into a spinner.
+
+**What not to make a wizard.** A form of four fields is shorter than a wizard
+around it, and a stepper over one screen of content is decoration that costs a
+click. This is for a form long enough that a person would otherwise lose their
+place — five steps in the curriculum builder, a booking that has to reach Confirm
+— and specifically for one where **later steps depend on earlier answers**. Three
+independent sections are a form with three headings. A flow whose steps are
+separate saves, each landing before the next opens, is not one form and must not
+pretend to be: this wizard keeps one register and submits once.
+
 ### Styles — `@connextar/house/house.css`
 
 What the components need that utility classes cannot say: rich text, the editor's
@@ -407,11 +508,40 @@ Traps found adopting it the first time:
   module"; delete `.next/dev` when no dev server is running.
 - If the app also depends on `@tiptap/*` directly, keep the range aligned or drop
   the direct dependency — two copies of `@tiptap/pm` break the editor.
+- **`FormWizard` renders the `<form>`, so the app's wrapper one has to go.** Every
+  local copy but two sat inside a host `<form onSubmit={preventDefault}>`; nested
+  forms are invalid HTML and the outer one is where the Enter bug lives. Keep the
+  app's `<Form {...form}>` provider if it has one — that is context, not an
+  element — and delete the `<form>` inside it. MAS also loses its
+  `finishControl`: the submit button is the wizard's now, and passing one back in
+  is the defect the wizard exists to prevent.
 - **Jest** (with `next/jest`) does not transform `node_modules`, and this package is
   ESM, so the first import fails with `Unexpected token 'export'`. `next/jest` only
   appends to `transformIgnorePatterns`, so export an async config that rewrites each
-  `/node_modules/(?!` rule to `/node_modules/(?!@connextar/house/)(?!`. Vitest needs
-  nothing.
+  `/node_modules/(?!` rule to `/node_modules/(?!@connextar/house/)(?!`.
+- **Vitest needs one line to mock anything the package imports.** It loads
+  `node_modules` through native Node ESM, where `vi.mock` does not reach: a test
+  that mocks `next/navigation` keeps passing while the package's components call
+  the real router, until one of them throws `invariant expected app router to be
+mounted`. Inline the package so vite transforms it:
+
+  ```ts
+  test: {
+    server: {
+      deps: {
+        inline: [/@connextar\/house/];
+      }
+    }
+  }
+  ```
+
+- **Mock `next/navigation.js`, not just `next/navigation`.** This package is built
+  with `moduleResolution: nodenext`, and `next` ships no `exports` map — so an
+  extensionless subpath does not resolve and the source has to say
+  `next/navigation.js`. Vitest keys mocks by specifier, so an app's existing mock
+  of `next/navigation` does not cover the package. Register both, with the factory
+  written out twice: `vi.mock` is hoisted above every `const`, so a shared factory
+  variable throws `Cannot access ... before initialization`.
 
 **A note on local development.** Installing this with `npm install ../path` makes
 a symlink, and Next's Turbopack will not resolve a package whose real path is
@@ -421,7 +551,7 @@ behaves exactly like a registry install:
 
 ```bash
 npm pack --pack-destination /tmp        # in this repo
-npm install /tmp/connextar-house-0.2.0.tgz   # in the app
+npm install /tmp/connextar-house-0.4.0.tgz   # in the app
 ```
 
 ## Adding to it

package/dist/wizard/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * `@connextar/house/wizard` — one long form, split into steps that check
+ * themselves.
+ *
+ * Five apps wrote this and four of them shipped a defect in it: a booking
+ * created from step two because two buttons shared a slot and React switched the
+ * type mid-click; three forms that refused to save with nothing on screen saying
+ * why; a stepper that checked no step at all on submit and sent a record whose
+ * first step had been cleared. None of those are mistakes about wizards. They are
+ * mistakes about what a form must do before it agrees to send, and there is one
+ * right answer to that, which is why this is here rather than in five places.
+ *
+ * Form-library-agnostic on purpose: the host supplies the check
+ * (`onValidateStep`, or a `validate` on the step), so react-hook-form, plain
+ * state and a form held in `useState` can all host it. The react-hook-form
+ * adapter is `@connextar/house/wizard/react-hook-form`, kept apart so that
+ * `react-hook-form` stays the optional peer dependency it is declared to be.
+ *
+ * What reaches the person, when a refusal has nowhere to show itself, goes
+ * through the `ActionFeedbackProvider` from `@connextar/house/ux` — so this
+ * module imports no toast library and no design system.
+ */
+export { ERROR_ATTRIBUTE, fieldProblems, INVALID_MESSAGES, isOnScreen, REPORT_DELAY, reportInvalid, shownErrorFields, unseenProblems, useInvalidReporter, type FieldProblem, type InvalidMessages, type InvalidReporter, } from "./invalid.js";
+export { checkStep, firstFailure, isReachable, markerState, nextIndex, percentComplete, previousIndex, stepResult, type MarkerState, type StepCheck, type StepCheckable, type StepFailure, type StepOutcome, type StepResult, } from "./rules.js";
+export { FieldError, FormWizard, ReviewRow, WIZARD_CLASS_NAMES, type FormWizardProps, type WizardClassNames, type WizardStep, } from "./wizard.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/wizard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/wizard/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EACL,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,SAAS,EACT,YAAY,EACZ,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAe,EACf,aAAa,EACb,UAAU,EACV,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,MAAM,aAAa,CAAC"}

package/dist/wizard/index.js

@@ -0,0 +1,26 @@
+/**
+ * `@connextar/house/wizard` — one long form, split into steps that check
+ * themselves.
+ *
+ * Five apps wrote this and four of them shipped a defect in it: a booking
+ * created from step two because two buttons shared a slot and React switched the
+ * type mid-click; three forms that refused to save with nothing on screen saying
+ * why; a stepper that checked no step at all on submit and sent a record whose
+ * first step had been cleared. None of those are mistakes about wizards. They are
+ * mistakes about what a form must do before it agrees to send, and there is one
+ * right answer to that, which is why this is here rather than in five places.
+ *
+ * Form-library-agnostic on purpose: the host supplies the check
+ * (`onValidateStep`, or a `validate` on the step), so react-hook-form, plain
+ * state and a form held in `useState` can all host it. The react-hook-form
+ * adapter is `@connextar/house/wizard/react-hook-form`, kept apart so that
+ * `react-hook-form` stays the optional peer dependency it is declared to be.
+ *
+ * What reaches the person, when a refusal has nowhere to show itself, goes
+ * through the `ActionFeedbackProvider` from `@connextar/house/ux` — so this
+ * module imports no toast library and no design system.
+ */
+export { ERROR_ATTRIBUTE, fieldProblems, INVALID_MESSAGES, isOnScreen, REPORT_DELAY, reportInvalid, shownErrorFields, unseenProblems, useInvalidReporter, } from "./invalid.js";
+export { checkStep, firstFailure, isReachable, markerState, nextIndex, percentComplete, previousIndex, stepResult, } from "./rules.js";
+export { FieldError, FormWizard, ReviewRow, WIZARD_CLASS_NAMES, } from "./wizard.js";
+//# sourceMappingURL=index.js.map

package/dist/wizard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/wizard/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EACL,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,kBAAkB,GAInB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,SAAS,EACT,YAAY,EACZ,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAe,EACf,aAAa,EACb,UAAU,GAOX,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,kBAAkB,GAInB,MAAM,aAAa,CAAC"}

package/dist/wizard/invalid.d.ts

@@ -0,0 +1,91 @@
+import { type ActionReporter } from "../ux/feedback.js";
+/**
+ * Saying why a form refused, when the reason is somewhere nobody can look.
+ *
+ * A wizard keeps fields on steps that are mounted but hidden, and a form library
+ * will not call a submit handler while any field is invalid. An error shown
+ * beside its field speaks for itself. One on a field nobody can see — another
+ * step, a field the form hides because it does not apply, a rule that belongs to
+ * no field at all — makes the button look broken, and that one has to be said
+ * out loud. This is the half of the wizard that has to read the DOM, so it is
+ * kept apart from the rules.
+ *
+ * Where it is said is the app's decision, not this package's: the message goes to
+ * the `ActionFeedbackProvider` that `@connextar/house/ux` already defines, so an
+ * app wires one reporter to whatever it uses to tell people things and this
+ * module imports no toast library.
+ */
+/**
+ * The attribute a field's error message carries, so a visible one can be told
+ * from a hidden one. `FieldError` sets it; an app's own message component sets
+ * it too (`<p data-error-for="title">`), which is the whole integration.
+ */
+export declare const ERROR_ATTRIBUTE = "data-error-for";
+/** How long to wait before looking. */
+export declare const REPORT_DELAY = 50;
+export interface InvalidMessages {
+    /** The heading. */
+    title: string;
+    /** Used when no problem carried a message of its own. */
+    fallback: string;
+}
+export declare const INVALID_MESSAGES: InvalidMessages;
+export interface FieldProblem {
+    name: string;
+    message: string | null;
+}
+/**
+ * The problems in an error object, whatever shape the form library gave them.
+ * Only the entries that are objects count: a form library's error map holds one
+ * per field, and anything else in there is not a field error.
+ */
+export declare function fieldProblems(errors: object): FieldProblem[];
+/**
+ * Rendered, outside a hidden step, and — where the page has layout at all —
+ * taking up space.
+ *
+ * A DOM without layout, like a test's, has no boxes to measure, so `hidden`
+ * decides there on its own. Measuring alone was AltEd's version, and under jsdom
+ * it called every message invisible and said everything twice.
+ */
+export declare function isOnScreen(element: HTMLElement): boolean;
+/** The field names whose message is on screen right now. */
+export declare function shownErrorFields(root: ParentNode): string[];
+/**
+ * The problems with nothing on screen to show them.
+ *
+ * A name matches a shown message exactly, or as its prefix: an error on
+ * `times` is answered by a message on `times.0.start`, because that is where a
+ * form library puts the message for an array field's row.
+ */
+export declare function unseenProblems(problems: readonly FieldProblem[], shown: readonly string[]): FieldProblem[];
+export type InvalidReporter = (errors: object) => void;
+/**
+ * Report the errors an invalid form refused on, if any of them has nowhere to
+ * show itself.
+ *
+ * Deferred, because it has to run after the form has re-rendered with its errors
+ * and after a wizard has moved to the failing step — before that, every message
+ * is still hidden and it would say everything twice. Returns a way to cancel,
+ * for a component that unmounts in between.
+ *
+ * Two silences and one noise:
+ *
+ * - Problems, all of them showing → quiet. The fields say it better.
+ * - Problems, at least one unseen → the first unseen message, or the fallback.
+ * - **No problems at all → the fallback**, not quiet. A form that refuses with
+ *   an empty error map is the worst of the cases, not the mildest: something
+ *   said no and named nothing, and the person is left pressing a dead button.
+ */
+export declare function reportInvalid(errors: object, report: ActionReporter, options?: {
+    delay?: number;
+    root?: ParentNode;
+    messages?: Partial<InvalidMessages>;
+}): () => void;
+/**
+ * `reportInvalid` bound to the app's reporter — pass it straight to a form
+ * library's invalid handler (`handleSubmit(onSubmit, report)`), or let
+ * `stepValidator` from `@connextar/house/wizard/react-hook-form` call it.
+ */
+export declare function useInvalidReporter(messages?: Partial<InvalidMessages>): InvalidReporter;
+//# sourceMappingURL=invalid.d.ts.map

package/dist/wizard/invalid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invalid.d.ts","sourceRoot":"","sources":["../../src/wizard/invalid.ts"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE3E;;;;;;;;;;;;;;;GAeG;AAEH;;;;GAIG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B,MAAM,WAAW,eAAe;IAC9B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,gBAAgB,EAAE,eAG9B,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,EAAE,CAM5D;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAIxD;AAED,4DAA4D;AAC5D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,EAAE,CAI3D;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,YAAY,EAAE,EAAE,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,YAAY,EAAE,CAE1G;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEvD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,cAAc,EACtB,OAAO,GAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CAAO,GACvF,MAAM,IAAI,CAcZ;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,eAAe,CAYvF"}

package/dist/wizard/invalid.js

@@ -0,0 +1,121 @@
+"use client";
+import * as React from "react";
+import { useActionReporter } from "../ux/feedback.js";
+/**
+ * Saying why a form refused, when the reason is somewhere nobody can look.
+ *
+ * A wizard keeps fields on steps that are mounted but hidden, and a form library
+ * will not call a submit handler while any field is invalid. An error shown
+ * beside its field speaks for itself. One on a field nobody can see — another
+ * step, a field the form hides because it does not apply, a rule that belongs to
+ * no field at all — makes the button look broken, and that one has to be said
+ * out loud. This is the half of the wizard that has to read the DOM, so it is
+ * kept apart from the rules.
+ *
+ * Where it is said is the app's decision, not this package's: the message goes to
+ * the `ActionFeedbackProvider` that `@connextar/house/ux` already defines, so an
+ * app wires one reporter to whatever it uses to tell people things and this
+ * module imports no toast library.
+ */
+/**
+ * The attribute a field's error message carries, so a visible one can be told
+ * from a hidden one. `FieldError` sets it; an app's own message component sets
+ * it too (`<p data-error-for="title">`), which is the whole integration.
+ */
+export const ERROR_ATTRIBUTE = "data-error-for";
+/** How long to wait before looking. */
+export const REPORT_DELAY = 50;
+export const INVALID_MESSAGES = {
+    title: "That can't be saved yet",
+    fallback: "Something on the form needs changing — check the highlighted fields.",
+};
+/**
+ * The problems in an error object, whatever shape the form library gave them.
+ * Only the entries that are objects count: a form library's error map holds one
+ * per field, and anything else in there is not a field error.
+ */
+export function fieldProblems(errors) {
+    return Object.entries(errors).flatMap(([name, value]) => {
+        if (typeof value !== "object" || value === null)
+            return [];
+        const message = value.message;
+        return [{ name, message: typeof message === "string" && message !== "" ? message : null }];
+    });
+}
+/**
+ * Rendered, outside a hidden step, and — where the page has layout at all —
+ * taking up space.
+ *
+ * A DOM without layout, like a test's, has no boxes to measure, so `hidden`
+ * decides there on its own. Measuring alone was AltEd's version, and under jsdom
+ * it called every message invisible and said everything twice.
+ */
+export function isOnScreen(element) {
+    if (element.closest("[hidden]"))
+        return false;
+    const hasLayout = element.ownerDocument.documentElement.getClientRects().length > 0;
+    return !hasLayout || element.getClientRects().length > 0;
+}
+/** The field names whose message is on screen right now. */
+export function shownErrorFields(root) {
+    return [...root.querySelectorAll(`[${ERROR_ATTRIBUTE}]`)]
+        .filter(isOnScreen)
+        .map((element) => element.getAttribute(ERROR_ATTRIBUTE) ?? "");
+}
+/**
+ * The problems with nothing on screen to show them.
+ *
+ * A name matches a shown message exactly, or as its prefix: an error on
+ * `times` is answered by a message on `times.0.start`, because that is where a
+ * form library puts the message for an array field's row.
+ */
+export function unseenProblems(problems, shown) {
+    return problems.filter(({ name }) => !shown.some((on) => on === name || on.startsWith(`${name}.`)));
+}
+/**
+ * Report the errors an invalid form refused on, if any of them has nowhere to
+ * show itself.
+ *
+ * Deferred, because it has to run after the form has re-rendered with its errors
+ * and after a wizard has moved to the failing step — before that, every message
+ * is still hidden and it would say everything twice. Returns a way to cancel,
+ * for a component that unmounts in between.
+ *
+ * Two silences and one noise:
+ *
+ * - Problems, all of them showing → quiet. The fields say it better.
+ * - Problems, at least one unseen → the first unseen message, or the fallback.
+ * - **No problems at all → the fallback**, not quiet. A form that refuses with
+ *   an empty error map is the worst of the cases, not the mildest: something
+ *   said no and named nothing, and the person is left pressing a dead button.
+ */
+export function reportInvalid(errors, report, options = {}) {
+    const { delay = REPORT_DELAY, messages } = options;
+    const words = { ...INVALID_MESSAGES, ...messages };
+    const problems = fieldProblems(errors);
+    const timer = setTimeout(() => {
+        const root = options.root ?? globalThis.document;
+        const unseen = unseenProblems(problems, shownErrorFields(root));
+        if (problems.length > 0 && unseen.length === 0)
+            return;
+        const message = unseen.map((problem) => problem.message).find((text) => text !== null);
+        report({ tone: "error", title: words.title, description: message ?? words.fallback });
+    }, delay);
+    return () => clearTimeout(timer);
+}
+/**
+ * `reportInvalid` bound to the app's reporter — pass it straight to a form
+ * library's invalid handler (`handleSubmit(onSubmit, report)`), or let
+ * `stepValidator` from `@connextar/house/wizard/react-hook-form` call it.
+ */
+export function useInvalidReporter(messages) {
+    const report = useActionReporter();
+    const title = messages?.title;
+    const fallback = messages?.fallback;
+    return React.useCallback((errors) => {
+        reportInvalid(errors, report, {
+            messages: { ...(title === undefined ? {} : { title }), ...(fallback === undefined ? {} : { fallback }) },
+        });
+    }, [report, title, fallback]);
+}
+//# sourceMappingURL=invalid.js.map

package/dist/wizard/invalid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"invalid.js","sourceRoot":"","sources":["../../src/wizard/invalid.ts"],"names":[],"mappings":"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"}

package/dist/wizard/react-hook-form-index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `@connextar/house/wizard/react-hook-form` — the step check for a
+ * react-hook-form wizard.
+ *
+ * Its own entry point so that `react-hook-form` stays an optional peer
+ * dependency: every import of it in here is `import type`, which erases, but a
+ * declaration file that names a package an app has not installed still fails
+ * that app's typecheck. An app on plain state imports `@connextar/house/wizard`
+ * and never comes near this.
+ */
+export { stepValidator, useStepValidator } from "./rhf-adapter.js";
+//# sourceMappingURL=react-hook-form-index.d.ts.map

package/dist/wizard/react-hook-form-index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-hook-form-index.d.ts","sourceRoot":"","sources":["../../src/wizard/react-hook-form-index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/wizard/react-hook-form-index.js

@@ -0,0 +1,12 @@
+/**
+ * `@connextar/house/wizard/react-hook-form` — the step check for a
+ * react-hook-form wizard.
+ *
+ * Its own entry point so that `react-hook-form` stays an optional peer
+ * dependency: every import of it in here is `import type`, which erases, but a
+ * declaration file that names a package an app has not installed still fails
+ * that app's typecheck. An app on plain state imports `@connextar/house/wizard`
+ * and never comes near this.
+ */
+export { stepValidator, useStepValidator } from "./rhf-adapter.js";
+//# sourceMappingURL=react-hook-form-index.js.map

package/dist/wizard/react-hook-form-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-hook-form-index.js","sourceRoot":"","sources":["../../src/wizard/react-hook-form-index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/wizard/rhf-adapter.d.ts

@@ -0,0 +1,32 @@
+import type { FieldValues, UseFormReturn } from "react-hook-form";
+import { type InvalidReporter } from "./invalid.js";
+import type { StepCheck } from "./rules.js";
+/**
+ * `@connextar/house/wizard/react-hook-form` — the step check most of the cohort
+ * wants, for the library most of the cohort uses.
+ *
+ * Its own entry point, and the reason is types rather than code: every import
+ * from `react-hook-form` here is `import type`, so the emitted JavaScript
+ * mentions it nowhere and an app without it can still run every part of
+ * `@connextar/house/wizard`. What an app without it *cannot* do is typecheck a
+ * declaration file that names the package — so the names live behind a subpath
+ * nobody has to reach for. MAS has no `react-hook-form` and never will;
+ * `entry-points.test.ts` keeps this split honest.
+ */
+/**
+ * The usual step check for a react-hook-form wizard: validate just this step's
+ * fields, and when one fails, say why if its message is not on screen.
+ *
+ * Returns `false` rather than a sentence, because a form library puts its
+ * messages beside the fields they belong to and a second copy in a banner above
+ * them is noise. The exception is the message with nowhere to go, which is what
+ * the reporter is for.
+ */
+export declare function stepValidator<T extends FieldValues>(form: UseFormReturn<T>, report: InvalidReporter): StepCheck;
+/**
+ * `stepValidator` wired to the app's `ActionFeedbackProvider`, with an identity
+ * that does not change between renders — a check that is a new function on every
+ * render makes the wizard re-render every step's content for nothing.
+ */
+export declare function useStepValidator<T extends FieldValues>(form: UseFormReturn<T>): StepCheck;
+//# sourceMappingURL=rhf-adapter.d.ts.map

package/dist/wizard/rhf-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rhf-adapter.d.ts","sourceRoot":"","sources":["../../src/wizard/rhf-adapter.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAa,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C;;;;;;;;;;;GAWG;AAEH;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,GAAG,SAAS,CAgB/G;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAazF"}

package/dist/wizard/rhf-adapter.js

@@ -0,0 +1,58 @@
+"use client";
+import * as React from "react";
+import { useInvalidReporter } from "./invalid.js";
+/**
+ * `@connextar/house/wizard/react-hook-form` — the step check most of the cohort
+ * wants, for the library most of the cohort uses.
+ *
+ * Its own entry point, and the reason is types rather than code: every import
+ * from `react-hook-form` here is `import type`, so the emitted JavaScript
+ * mentions it nowhere and an app without it can still run every part of
+ * `@connextar/house/wizard`. What an app without it *cannot* do is typecheck a
+ * declaration file that names the package — so the names live behind a subpath
+ * nobody has to reach for. MAS has no `react-hook-form` and never will;
+ * `entry-points.test.ts` keeps this split honest.
+ */
+/**
+ * The usual step check for a react-hook-form wizard: validate just this step's
+ * fields, and when one fails, say why if its message is not on screen.
+ *
+ * Returns `false` rather than a sentence, because a form library puts its
+ * messages beside the fields they belong to and a second copy in a banner above
+ * them is noise. The exception is the message with nowhere to go, which is what
+ * the reporter is for.
+ */
+export function stepValidator(form, report) {
+    return async (fields) => {
+        if (fields.length === 0)
+            return true;
+        const names = fields;
+        const ok = await form.trigger(names);
+        if (ok)
+            return true;
+        report(Object.fromEntries(names.flatMap((name) => {
+            const error = form.getFieldState(name).error;
+            return error ? [[name, error]] : [];
+        })));
+        return false;
+    };
+}
+/**
+ * `stepValidator` wired to the app's `ActionFeedbackProvider`, with an identity
+ * that does not change between renders — a check that is a new function on every
+ * render makes the wizard re-render every step's content for nothing.
+ */
+export function useStepValidator(form) {
+    const report = useInvalidReporter();
+    // Written after the render, so the check always reads the current form and
+    // reporter without itself having to change.
+    const latest = React.useRef({ form, report });
+    React.useEffect(() => {
+        latest.current = { form, report };
+    });
+    return React.useCallback((fields, step) => {
+        const { form: current, report: tell } = latest.current;
+        return stepValidator(current, tell)(fields, step);
+    }, []);
+}
+//# sourceMappingURL=rhf-adapter.js.map

package/dist/wizard/rhf-adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rhf-adapter.js","sourceRoot":"","sources":["../../src/wizard/rhf-adapter.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAwB,MAAM,cAAc,CAAC;AAGxE;;;;;;;;;;;GAWG;AAEH;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAwB,IAAsB,EAAE,MAAuB;IAClG,OAAO,KAAK,EAAE,MAAM,EAAE,EAAE;QACtB,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACrC,MAAM,KAAK,GAAG,MAAwB,CAAC;QACvC,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,EAAE;YAAE,OAAO,IAAI,CAAC;QACpB,MAAM,CACJ,MAAM,CAAC,WAAW,CAChB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;YAC7C,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/C,CAAC,CAAC,CACH,CACF,CAAC;QACF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAwB,IAAsB;IAC5E,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,2EAA2E;IAC3E,4CAA4C;IAC5C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,WAAW,CAAY,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;QACnD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC;QACvD,OAAO,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/dist/wizard/rules.d.ts

@@ -0,0 +1,92 @@
+/**
+ * The rules a stepped form follows — where you are, where you may go, and what
+ * has to pass before you get there. No React and no DOM, so they are tested
+ * without a browser and hold whatever draws them.
+ *
+ * The one decision worth spelling out is what a *check* is. Five apps wrote a
+ * wizard and arrived at two different answers: a react-hook-form app asks the
+ * form to validate some field names and gets a boolean back, while an app
+ * holding its values in plain state knows the sentence it wants to show and
+ * returns that. Neither is wrong, and a shared wizard that picked one of them
+ * would shut the other out — so a check may answer either way:
+ *
+ * | Returned                     | Means                                            |
+ * | ---------------------------- | ------------------------------------------------ |
+ * | `true`, `null`, `undefined`  | The step is complete                             |
+ * | `false`                      | Not complete; the host is showing why, in place   |
+ * | a sentence                   | Not complete, and this is what to say             |
+ *
+ * An empty string counts as complete. It is not part of either contract, and a
+ * check that returns one by accident must not be able to wedge a form shut with
+ * nothing on screen — which is the whole failure this module exists to prevent.
+ */
+/** What a check answers. See the table above. */
+export type StepOutcome = boolean | string | null | undefined | void;
+/** The part of a step these rules need: what it owns, and its own check. */
+export interface StepCheckable {
+    /**
+     * Field names this step owns. Passed to the form-level check, which is how a
+     * react-hook-form host validates one step's worth of fields and no more.
+     */
+    fields?: readonly string[];
+    /**
+     * This step's own check, for a host that keeps validation beside the step
+     * rather than in one function. Asked before the form-level check.
+     */
+    validate?: StepCheck;
+}
+/** Is this step complete? Asked before leaving it, and again for every step on submit. */
+export type StepCheck = (fields: string[], step: StepCheckable) => StepOutcome | Promise<StepOutcome>;
+export type StepResult = {
+    ok: true;
+} | {
+    ok: false;
+    message: string | null;
+};
+/** Normalise whatever a check answered. */
+export declare function stepResult(outcome: StepOutcome): StepResult;
+/**
+ * Ask everything that has a say about one step. The step's own check first, then
+ * the form-level one; the first refusal is the answer, so its message is the one
+ * shown rather than the last one computed.
+ */
+export declare function checkStep(step: StepCheckable, onValidateStep?: StepCheck): Promise<StepResult>;
+export interface StepFailure {
+    index: number;
+    message: string | null;
+}
+/**
+ * The first step that will not pass, checked in order from the beginning.
+ *
+ * This is what a submit does, and checking only the last step is the defect
+ * every one of the five copies had at some point. Step back by a marker (which
+ * does not validate), clear a required field, jump to the end and press Save:
+ * the form refuses with the problem on a step nobody is looking at, and the
+ * button looks broken. In MAS it was worse — nothing was checked on submit at
+ * all, so a second press after a successful create sent a record whose first
+ * step had been cleared.
+ *
+ * In order matters as much as every: the person is sent to the earliest thing
+ * that needs fixing, which is the one they will understand.
+ */
+export declare function firstFailure<S extends StepCheckable>(steps: readonly S[], onValidateStep?: StepCheck): Promise<StepFailure | null>;
+export type MarkerState = "done" | "current" | "upcoming";
+/** How a marker reads: behind you, where you are, or ahead. */
+export declare function markerState(index: number, current: number): MarkerState;
+/**
+ * May this marker be clicked?
+ *
+ * Anything reached before now, including the step you are on — clicking that one
+ * does nothing, and disabling it takes the tracker's "you are here" out of the
+ * tab order for no gain. Steps never reached stay locked, because skipping
+ * forward past a step that has never been checked is how people arrive at a
+ * submit button that will not work with nothing saying why.
+ */
+export declare function isReachable(index: number, furthest: number): boolean;
+/** The next index, not past the end. */
+export declare function nextIndex(current: number, total: number): number;
+/** The previous index, not past the beginning. */
+export declare function previousIndex(current: number): number;
+/** How far through, for the apps that show a bar rather than a count. */
+export declare function percentComplete(current: number, total: number): number;
+//# sourceMappingURL=rules.d.ts.map

package/dist/wizard/rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/wizard/rules.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,iDAAiD;AACjD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAErE,4EAA4E;AAC5E,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,0FAA0F;AAC1F,MAAM,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,aAAa,KAAK,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAEtG,MAAM,MAAM,UAAU,GAAG;IAAE,EAAE,EAAE,IAAI,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAI9E,2CAA2C;AAC3C,wBAAgB,UAAU,CAAC,OAAO,EAAE,WAAW,GAAG,UAAU,CAI3D;AAED;;;;GAIG;AACH,wBAAsB,SAAS,CAAC,IAAI,EAAE,aAAa,EAAE,cAAc,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAQpG;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAsB,YAAY,CAAC,CAAC,SAAS,aAAa,EACxD,KAAK,EAAE,SAAS,CAAC,EAAE,EACnB,cAAc,CAAC,EAAE,SAAS,GACzB,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAQ7B;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;AAE1D,+DAA+D;AAC/D,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,WAAW,CAGvE;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEpE;AAED,wCAAwC;AACxC,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED,kDAAkD;AAClD,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAErD;AAED,yEAAyE;AACzE,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGtE"}

package/dist/wizard/rules.js

@@ -0,0 +1,105 @@
+/**
+ * The rules a stepped form follows — where you are, where you may go, and what
+ * has to pass before you get there. No React and no DOM, so they are tested
+ * without a browser and hold whatever draws them.
+ *
+ * The one decision worth spelling out is what a *check* is. Five apps wrote a
+ * wizard and arrived at two different answers: a react-hook-form app asks the
+ * form to validate some field names and gets a boolean back, while an app
+ * holding its values in plain state knows the sentence it wants to show and
+ * returns that. Neither is wrong, and a shared wizard that picked one of them
+ * would shut the other out — so a check may answer either way:
+ *
+ * | Returned                     | Means                                            |
+ * | ---------------------------- | ------------------------------------------------ |
+ * | `true`, `null`, `undefined`  | The step is complete                             |
+ * | `false`                      | Not complete; the host is showing why, in place   |
+ * | a sentence                   | Not complete, and this is what to say             |
+ *
+ * An empty string counts as complete. It is not part of either contract, and a
+ * check that returns one by accident must not be able to wedge a form shut with
+ * nothing on screen — which is the whole failure this module exists to prevent.
+ */
+const PASSED = { ok: true };
+/** Normalise whatever a check answered. */
+export function stepResult(outcome) {
+    if (outcome === false)
+        return { ok: false, message: null };
+    if (typeof outcome === "string" && outcome !== "")
+        return { ok: false, message: outcome };
+    return PASSED;
+}
+/**
+ * Ask everything that has a say about one step. The step's own check first, then
+ * the form-level one; the first refusal is the answer, so its message is the one
+ * shown rather than the last one computed.
+ */
+export async function checkStep(step, onValidateStep) {
+    const fields = [...(step.fields ?? [])];
+    for (const check of [step.validate, onValidateStep]) {
+        if (!check)
+            continue;
+        const result = stepResult(await check(fields, step));
+        if (!result.ok)
+            return result;
+    }
+    return PASSED;
+}
+/**
+ * The first step that will not pass, checked in order from the beginning.
+ *
+ * This is what a submit does, and checking only the last step is the defect
+ * every one of the five copies had at some point. Step back by a marker (which
+ * does not validate), clear a required field, jump to the end and press Save:
+ * the form refuses with the problem on a step nobody is looking at, and the
+ * button looks broken. In MAS it was worse — nothing was checked on submit at
+ * all, so a second press after a successful create sent a record whose first
+ * step had been cleared.
+ *
+ * In order matters as much as every: the person is sent to the earliest thing
+ * that needs fixing, which is the one they will understand.
+ */
+export async function firstFailure(steps, onValidateStep) {
+    for (let index = 0; index < steps.length; index++) {
+        const step = steps[index];
+        if (!step)
+            continue;
+        const result = await checkStep(step, onValidateStep);
+        if (!result.ok)
+            return { index, message: result.message };
+    }
+    return null;
+}
+/** How a marker reads: behind you, where you are, or ahead. */
+export function markerState(index, current) {
+    if (index < current)
+        return "done";
+    return index === current ? "current" : "upcoming";
+}
+/**
+ * May this marker be clicked?
+ *
+ * Anything reached before now, including the step you are on — clicking that one
+ * does nothing, and disabling it takes the tracker's "you are here" out of the
+ * tab order for no gain. Steps never reached stay locked, because skipping
+ * forward past a step that has never been checked is how people arrive at a
+ * submit button that will not work with nothing saying why.
+ */
+export function isReachable(index, furthest) {
+    return index <= furthest;
+}
+/** The next index, not past the end. */
+export function nextIndex(current, total) {
+    return Math.min(current + 1, Math.max(total - 1, 0));
+}
+/** The previous index, not past the beginning. */
+export function previousIndex(current) {
+    return Math.max(current - 1, 0);
+}
+/** How far through, for the apps that show a bar rather than a count. */
+export function percentComplete(current, total) {
+    if (total <= 0)
+        return 0;
+    return Math.round((Math.min(current + 1, total) / total) * 100);
+}
+//# sourceMappingURL=rules.js.map

package/dist/wizard/rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rules.js","sourceRoot":"","sources":["../../src/wizard/rules.ts"],"names":[],"mappings":"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"}

package/dist/wizard/wizard.d.ts

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { type StepCheck, type StepCheckable } from "./rules.js";
+export interface WizardStep extends StepCheckable {
+    id: string;
+    title: string;
+    /** One line saying what this step is for. */
+    description?: string;
+    content: React.ReactNode;
+}
+/** Every element the wizard draws. Each value replaces the default for that part. */
+export interface WizardClassNames {
+    form: string;
+    markers: string;
+    markerItem: string;
+    marker: string;
+    markerLocked: string;
+    circle: string;
+    circleDone: string;
+    circleCurrent: string;
+    circleUpcoming: string;
+    markerTitle: string;
+    markerTitleCurrent: string;
+    connector: string;
+    connectorDone: string;
+    bar: string;
+    barFill: string;
+    heading: string;
+    description: string;
+    alert: string;
+    panel: string;
+    footer: string;
+    counter: string;
+    button: string;
+    backButton: string;
+    forwardButton: string;
+}
+/**
+ * The house look, on the shared theme tokens. An app without them — MAS keeps
+ * its palette in literal classes — replaces the parts it needs through
+ * `classNames`, exactly as the guide renderer allows.
+ */
+export declare const WIZARD_CLASS_NAMES: WizardClassNames;
+export interface FormWizardProps {
+    steps: WizardStep[];
+    /**
+     * Is the step being left complete? Asked before each advance, and again for
+     * every step on submit. See `StepCheck` for the ways it may answer.
+     */
+    onValidateStep?: StepCheck;
+    /** Called once every step has passed, and never before. */
+    onSubmit: () => void | Promise<void>;
+    /** Shown in place of Back on the first step; without it, Back is disabled there. */
+    onCancel?: () => void;
+    submitLabel?: React.ReactNode;
+    nextLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    backLabel?: React.ReactNode;
+    /** The submission is in flight: navigation locks and the button says so. */
+    pending?: boolean;
+    /**
+     * Every step open from the start — for editing, where the values are all there
+     * already and the change is usually to one field on a later step.
+     */
+    allReachable?: boolean;
+    /** Show how far through as a bar as well as a count. */
+    showProgressBar?: boolean;
+    /** A heading or introduction above the tracker, inside the form. */
+    header?: React.ReactNode;
+    className?: string;
+    footerClassName?: string;
+    classNames?: Partial<WizardClassNames>;
+    "aria-label"?: string;
+}
+/**
+ * A long form split into steps. The one stepper for every multi-step form in
+ * every app — the union of what five of them each learnt the hard way.
+ *
+ * - **It renders the `<form>` itself,** so nothing reaches `onSubmit`
+ *   unchecked and so Enter has one place to land. A wizard sitting inside
+ *   somebody else's form cannot promise either.
+ * - **Enter never skips ahead.** Pressing Enter in a one-line field submits the
+ *   form the browser's way, and before the last step that submission means
+ *   Continue: this step is checked and, if it passes, the next one opens. Only
+ *   the last step's Enter submits.
+ * - **There is one submit button and its `type` never changes.** PharmaLine put
+ *   a `type="button"` Continue and a `type="submit"` Create in the same slot;
+ *   React reused the one DOM node and switched its type mid-click, and Chromium
+ *   submitted — every booking made from the dashboard skipped Confirm and sent a
+ *   confirmation nobody chose. jsdom's timing hid it, so the guard here is
+ *   structural rather than behavioural: one button, always `type="submit"`.
+ * - **Steps are checked as you leave them.** `onValidateStep` (or the step's own
+ *   `validate`) is asked before each advance, and the step stays put if it
+ *   refuses, saying why when the check gave a message.
+ * - **Submitting checks every step, in order, and lands on the first that
+ *   fails.** Checking only the last one, or none at all, is how a form refuses
+ *   with the problem on a screen nobody is looking at.
+ * - **Continue is never disabled for being incomplete.** A greyed-out button
+ *   that will not say what is missing is a refusal with no words; it is only
+ *   disabled while something is actually in flight.
+ * - **Visited markers are clickable; steps ahead stay locked** (unless
+ *   `allReachable`), so the tracker is navigation rather than a way past a step
+ *   that has never been checked.
+ * - **All steps stay mounted,** hidden rather than unmounted: one register, and
+ *   nothing typed is lost by stepping back to check something.
+ *
+ * What it deliberately does not do is validate anything itself, or know what a
+ * button looks like. The check is a function the host supplies, so
+ * react-hook-form, plain state and a form built out of `useState` can all host
+ * it; the look is theme-token classes an app replaces through `classNames`.
+ */
+export declare function FormWizard({ steps, onValidateStep, onSubmit, onCancel, submitLabel, nextLabel, cancelLabel, backLabel, pending, allReachable, showProgressBar, header, className, footerClassName, classNames, "aria-label": ariaLabel, }: FormWizardProps): React.JSX.Element | null;
+/**
+ * A field's error message, marked so the reporter can tell a visible error from
+ * a hidden one. An app whose form library draws its own message adds
+ * `data-error-for` to that component instead of using this.
+ */
+export declare function FieldError({ name, message, className, }: {
+    name: string;
+    message?: string | null;
+    className?: string;
+}): React.JSX.Element | null;
+/** A read-only label/value row, for the review step at the end of a wizard. */
+export declare function ReviewRow({ label, value }: {
+    label: React.ReactNode;
+    value: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=wizard.d.ts.map

package/dist/wizard/wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../src/wizard/wizard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,YAAY,CAAC;AAgBpB,MAAM,WAAW,UAAW,SAAQ,aAAa;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,qFAAqF;AACrF,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,gBA2BhC,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wDAAwD;IACxD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oEAAoE;IACpE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,WAAoB,EACpB,SAAsB,EACtB,WAAsB,EACtB,SAAkB,EAClB,OAAe,EACf,YAAoB,EACpB,eAAuB,EACvB,MAAM,EACN,SAAS,EACT,eAAe,EACf,UAAU,EACV,YAAY,EAAE,SAAS,GACxB,EAAE,eAAe,4BA0NjB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4BAOA;AAED,+EAA+E;AAC/E,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAS7F"}

package/dist/wizard/wizard.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+import { cx } from "../internal/cx.js";
+import { ERROR_ATTRIBUTE } from "./invalid.js";
+import { checkStep, firstFailure, isReachable, markerState, nextIndex, percentComplete, previousIndex, } from "./rules.js";
+/** Inputs where Enter is not "I'm done with this field". */
+const NOT_ONE_LINE_FIELDS = new Set([
+    "button",
+    "checkbox",
+    "color",
+    "file",
+    "hidden",
+    "image",
+    "radio",
+    "range",
+    "reset",
+    "submit",
+]);
+/**
+ * The house look, on the shared theme tokens. An app without them — MAS keeps
+ * its palette in literal classes — replaces the parts it needs through
+ * `classNames`, exactly as the guide renderer allows.
+ */
+export const WIZARD_CLASS_NAMES = {
+    form: "flex flex-col gap-5",
+    markers: "flex items-center gap-2",
+    markerItem: "flex min-w-0 flex-1 items-center gap-2 last:flex-none sm:last:flex-1",
+    marker: "flex min-w-0 items-center gap-2 rounded-lg px-1.5 py-1 text-left transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none sm:flex-1",
+    markerLocked: "cursor-not-allowed opacity-60",
+    circle: "flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-semibold",
+    circleDone: "border-primary bg-primary text-primary-foreground",
+    circleCurrent: "border-2 border-primary text-primary",
+    circleUpcoming: "border-border text-muted-foreground",
+    markerTitle: "hidden truncate text-sm sm:block",
+    markerTitleCurrent: "font-medium text-foreground",
+    connector: "h-px flex-1 bg-border sm:w-3 sm:flex-none",
+    connectorDone: "bg-primary",
+    bar: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+    barFill: "h-full rounded-full bg-primary transition-[width]",
+    heading: "text-sm font-medium",
+    description: "text-xs text-muted-foreground",
+    alert: "rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+    panel: "space-y-4",
+    footer: "flex items-center justify-between gap-2 border-t border-border pt-4",
+    counter: "text-xs tabular-nums text-muted-foreground",
+    button: "inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-60",
+    backButton: "text-muted-foreground hover:bg-muted hover:text-foreground",
+    forwardButton: "bg-primary text-primary-foreground hover:bg-primary/90",
+};
+/**
+ * A long form split into steps. The one stepper for every multi-step form in
+ * every app — the union of what five of them each learnt the hard way.
+ *
+ * - **It renders the `<form>` itself,** so nothing reaches `onSubmit`
+ *   unchecked and so Enter has one place to land. A wizard sitting inside
+ *   somebody else's form cannot promise either.
+ * - **Enter never skips ahead.** Pressing Enter in a one-line field submits the
+ *   form the browser's way, and before the last step that submission means
+ *   Continue: this step is checked and, if it passes, the next one opens. Only
+ *   the last step's Enter submits.
+ * - **There is one submit button and its `type` never changes.** PharmaLine put
+ *   a `type="button"` Continue and a `type="submit"` Create in the same slot;
+ *   React reused the one DOM node and switched its type mid-click, and Chromium
+ *   submitted — every booking made from the dashboard skipped Confirm and sent a
+ *   confirmation nobody chose. jsdom's timing hid it, so the guard here is
+ *   structural rather than behavioural: one button, always `type="submit"`.
+ * - **Steps are checked as you leave them.** `onValidateStep` (or the step's own
+ *   `validate`) is asked before each advance, and the step stays put if it
+ *   refuses, saying why when the check gave a message.
+ * - **Submitting checks every step, in order, and lands on the first that
+ *   fails.** Checking only the last one, or none at all, is how a form refuses
+ *   with the problem on a screen nobody is looking at.
+ * - **Continue is never disabled for being incomplete.** A greyed-out button
+ *   that will not say what is missing is a refusal with no words; it is only
+ *   disabled while something is actually in flight.
+ * - **Visited markers are clickable; steps ahead stay locked** (unless
+ *   `allReachable`), so the tracker is navigation rather than a way past a step
+ *   that has never been checked.
+ * - **All steps stay mounted,** hidden rather than unmounted: one register, and
+ *   nothing typed is lost by stepping back to check something.
+ *
+ * What it deliberately does not do is validate anything itself, or know what a
+ * button looks like. The check is a function the host supplies, so
+ * react-hook-form, plain state and a form built out of `useState` can all host
+ * it; the look is theme-token classes an app replaces through `classNames`.
+ */
+export function FormWizard({ steps, onValidateStep, onSubmit, onCancel, submitLabel = "Save", nextLabel = "Continue", cancelLabel = "Cancel", backLabel = "Back", pending = false, allReachable = false, showProgressBar = false, header, className, footerClassName, classNames, "aria-label": ariaLabel, }) {
+    const c = { ...WIZARD_CLASS_NAMES, ...classNames };
+    const [current, setCurrent] = React.useState(0);
+    const [furthest, setFurthest] = React.useState(allReachable ? steps.length - 1 : 0);
+    const [checking, setChecking] = React.useState(false);
+    const [problem, setProblem] = React.useState(null);
+    const inFlight = React.useRef(false);
+    const formId = React.useId();
+    const step = steps[current];
+    const isFirst = current === 0;
+    const isLast = current === steps.length - 1;
+    const busy = pending || checking;
+    function goTo(index) {
+        setProblem(null);
+        setCurrent(index);
+    }
+    async function goNext() {
+        if (!step)
+            return;
+        setChecking(true);
+        try {
+            const result = await checkStep(step, onValidateStep);
+            if (!result.ok) {
+                setProblem(result.message);
+                return;
+            }
+        }
+        finally {
+            setChecking(false);
+        }
+        const next = nextIndex(current, steps.length);
+        setProblem(null);
+        setCurrent(next);
+        setFurthest((seen) => Math.max(seen, next));
+    }
+    async function submit() {
+        setChecking(true);
+        try {
+            const failure = await firstFailure(steps, onValidateStep);
+            if (failure) {
+                // Show the step that holds the problem, so its message is on screen.
+                setCurrent(failure.index);
+                setProblem(failure.message);
+                return;
+            }
+            setProblem(null);
+        }
+        finally {
+            setChecking(false);
+        }
+        await onSubmit();
+    }
+    /**
+     * Every way of submitting — the footer button, or Enter in a field — comes
+     * through here, and before the last step it means Continue. Re-entry is
+     * refused rather than queued: a second press is the person saying the first
+     * one gave them nothing to look at.
+     */
+    function handleSubmit(event) {
+        event.preventDefault();
+        if (busy || inFlight.current)
+            return;
+        inFlight.current = true;
+        void (isLast ? submit() : goNext()).finally(() => {
+            inFlight.current = false;
+        });
+    }
+    /**
+     * Enter in a one-line field means "go on", whatever the field. Browsers
+     * disagree about Enter in some of them — Chromium does nothing on Enter in a
+     * date-and-time field — so the form asks for submission itself. A field that
+     * handles Enter on its own (and cancels it) is left alone, and so is a
+     * textarea, where Enter is a new line.
+     */
+    function handleKeyDown(event) {
+        if (event.key !== "Enter" || event.defaultPrevented || event.nativeEvent.isComposing)
+            return;
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement) || NOT_ONE_LINE_FIELDS.has(target.type))
+            return;
+        event.preventDefault();
+        event.currentTarget.requestSubmit();
+    }
+    if (!step)
+        return null;
+    const percent = percentComplete(current, steps.length);
+    return (_jsxs("form", { onSubmit: handleSubmit, onKeyDown: handleKeyDown, noValidate: true, "aria-label": ariaLabel, className: cx(c.form, className), children: [header, _jsx("ol", { className: c.markers, "aria-label": "Progress", children: steps.map((s, index) => {
+                    const state = markerState(index, current);
+                    const reachable = isReachable(index, furthest);
+                    return (_jsxs("li", { className: c.markerItem, children: [_jsxs("button", { type: "button", disabled: !reachable || busy, onClick: () => goTo(index), "aria-current": state === "current" ? "step" : undefined, "aria-controls": `${formId}-${s.id}`, "aria-label": `Step ${index + 1}: ${s.title}`, className: cx(c.marker, !reachable && c.markerLocked), children: [_jsx("span", { "aria-hidden": true, className: cx(c.circle, state === "done" && c.circleDone, state === "current" && c.circleCurrent, state === "upcoming" && c.circleUpcoming), children: state === "done" ? _jsx(Check, { className: "size-3.5" }) : index + 1 }), _jsx("span", { "aria-hidden": true, className: cx(c.markerTitle, state === "current" && c.markerTitleCurrent), children: s.title })] }), index < steps.length - 1 ? (_jsx("span", { "aria-hidden": true, className: cx(c.connector, state === "done" && c.connectorDone) })) : null] }, s.id));
+                }) }), showProgressBar ? (_jsx("div", { className: c.bar, role: "progressbar", "aria-label": "Form progress", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, children: _jsx("div", { className: c.barFill, style: { width: `${percent}%` } }) })) : null, _jsxs("div", { children: [_jsx("h3", { className: cx(c.heading, "sm:hidden"), children: step.title }), step.description ? _jsx("p", { className: c.description, children: step.description }) : null] }), problem ? (_jsx("p", { className: c.alert, role: "alert", children: problem })) : null, steps.map((s, index) => (_jsx("section", { id: `${formId}-${s.id}`, hidden: index !== current, "aria-label": s.title, className: c.panel, children: s.content }, s.id))), _jsxs("div", { className: cx(c.footer, footerClassName), children: [isFirst && onCancel ? (_jsx("button", { type: "button", onClick: onCancel, disabled: pending, className: cx(c.button, c.backButton), children: cancelLabel })) : (_jsxs("button", { type: "button", onClick: () => goTo(previousIndex(current)), disabled: isFirst || busy, className: cx(c.button, c.backButton), children: [_jsx(ChevronLeft, { className: "size-4", "aria-hidden": true }), backLabel] })), _jsxs("span", { className: c.counter, "aria-live": "polite", children: ["Step ", current + 1, " of ", steps.length] }), _jsx("button", { type: "submit", disabled: busy, "data-busy": busy ? "true" : undefined, className: cx(c.button, c.forwardButton), children: isLast ? (submitLabel) : (_jsxs(_Fragment, { children: [nextLabel, _jsx(ChevronRight, { className: "size-4", "aria-hidden": true })] })) })] })] }));
+}
+/**
+ * A field's error message, marked so the reporter can tell a visible error from
+ * a hidden one. An app whose form library draws its own message adds
+ * `data-error-for` to that component instead of using this.
+ */
+export function FieldError({ name, message, className, }) {
+    if (!message)
+        return null;
+    return (_jsx("p", { [ERROR_ATTRIBUTE]: name, className: className ?? "text-xs text-destructive", children: message }));
+}
+/** A read-only label/value row, for the review step at the end of a wizard. */
+export function ReviewRow({ label, value }) {
+    return (_jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border py-2 last:border-0", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: label }), _jsx("span", { className: "text-right text-sm font-medium", children: value || _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) })] }));
+}
+//# sourceMappingURL=wizard.js.map

package/dist/wizard/wizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.js","sourceRoot":"","sources":["../../src/wizard/wizard.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connextar/house",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The pieces every app we build needs and none of them should own a copy of.",
   "license": "MIT",
   "repository": {
@@ -50,6 +50,14 @@
       "types": "./dist/ux/navigation-index.d.ts",
       "default": "./dist/ux/navigation-index.js"
     },
+    "./wizard": {
+      "types": "./dist/wizard/index.d.ts",
+      "default": "./dist/wizard/index.js"
+    },
+    "./wizard/react-hook-form": {
+      "types": "./dist/wizard/react-hook-form-index.d.ts",
+      "default": "./dist/wizard/react-hook-form-index.js"
+    },
     "./editor": {
       "types": "./dist/editor/index.d.ts",
       "default": "./dist/editor/index.js"
@@ -85,11 +93,15 @@
   "peerDependencies": {
     "next": "^16.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.60.0"
   },
   "peerDependenciesMeta": {
     "next": {
       "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -106,6 +118,7 @@
     "prettier": "^3.0.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-hook-form": "^7.68.0",
     "typescript": "^5.7.0",
     "typescript-eslint": "^8.69.0",
     "vitest": "^4.0.0"