@formancy/angular 0.1.0 → 0.2.0

package/fesm2022/formancy-angular.mjs

@@ -1,6 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, DestroyRef, computed, input, ChangeDetectionStrategy, Component, ViewContainerRef, Directive, Injector, runInInjectionContext, effect, output, viewChild, afterRenderEffect } from '@angular/core';
+import { InjectionToken, inject, signal, DestroyRef, computed, input, ChangeDetectionStrategy, Component, forwardRef, effect, viewChild, viewChildren, ViewContainerRef, Directive, Injector, runInInjectionContext, ChangeDetectorRef, ElementRef, output, afterRenderEffect } from '@angular/core';
 import { parsePath } from '@formancy/core';
+import { parseRichText, acceptRemoteOptions, capRemoteOptions, narrowOptionsByLabel, applyRichCommand, datagridColumns, LAYOUT_LEAF_KINDS, layoutChildren, resolveText } from '@formancy/spec';
+import { NgTemplateOutlet } from '@angular/common';
+import { encode } from 'uqr';
 
 /**
  * The engine reaches components through DI, never through inputs drilling: a
@@ -55,17 +58,31 @@ function injectRepeater(path) {
     const parsed = typeof path === 'string' ? parsePath(path) : path;
     const rowCount = signal(engine.rowCount(parsed), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowCount" }] : /* istanbul ignore next */ []));
+    // A counter bumped on every notification, not only when the LENGTH changes.
+    //
+    // `rowCount.set` with an equal value notifies nothing, which is correct and was also
+    // why reordering did not redraw: a move leaves the count alone, so the ids computed
+    // from it kept their old order and Angular tracked rows by them -- reusing the wrong
+    // DOM, which is the failure tracking by identity exists to prevent.
+    const version = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "version" }] : /* istanbul ignore next */ []));
     const unsubscribe = engine.subscribeField(parsed, () => {
         rowCount.set(engine.rowCount(parsed));
+        version.update((previous) => previous + 1);
     });
     inject(DestroyRef).onDestroy(unsubscribe);
     return {
         rowCount: rowCount.asReadonly(),
-        // Computed from rowCount: the engine mints an id when a row is created, so
-        // the count changing is exactly when the ids change.
-        rowIds: computed(() => Array.from({ length: rowCount() }, (_, index) => engine.rowId(parsed, index))),
+        // Read through `version` as well as `rowCount`. The comment here used to say the
+        // count changing is exactly when the ids change, which was true until rows could be
+        // reordered.
+        rowIds: computed(() => {
+            version();
+            return Array.from({ length: rowCount() }, (_, index) => engine.rowId(parsed, index));
+        }),
         addRow: () => engine.addRow(parsed),
         removeRow: (index) => engine.removeRow(parsed, index),
+        moveRow: (from, to) => engine.moveRow(parsed, from, to),
     };
 }
 
@@ -96,6 +113,14 @@ function injectWizard() {
     };
 }
 
+/** Reveal enclosing tabs before focusing: hidden controls cannot emit focusin. */
+function focusControl(control) {
+    if (control === null)
+        return;
+    control.dispatchEvent(new Event('formancy-reveal', { bubbles: true }));
+    control.focus();
+}
+
 /**
  * Submit the form: touch everything, validate everything, and on failure move
  * focus to the first invalid control — the WCAG-required behaviour that every
@@ -119,7 +144,7 @@ function injectSubmit() {
                 const firstInvalid = engine.firstInvalid();
                 if (firstInvalid !== null) {
                     const ids = engine.getFieldSnapshot(parsePath(firstInvalid)).ids;
-                    document.getElementById(ids.control)?.focus();
+                    focusControl(document.getElementById(ids.control));
                 }
             }
         }
@@ -140,6 +165,431 @@ function provideFormancyRegistry(registry) {
     return [{ provide: FORMANCY_REGISTRY, useValue: registry }];
 }
 
+/**
+ * One run of inline nodes, recursing through its own selector.
+ *
+ * Angular has no fragment component, so emphasis inside emphasis is expressed
+ * by the component referring to itself — which is why it is its own
+ * declaration rather than part of the block template below.
+ */
+class FormancyRichInline {
+    nodes = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    asText(node) {
+        return node.kind === 'text' ? node.text : '';
+    }
+    childrenOf(node) {
+        return node.kind === 'text' ? [] : node.children;
+    }
+    hrefOf(node) {
+        return node.kind === 'link' ? node.href : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRichInline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyRichInline, isStandalone: true, selector: "formancy-rich-inline", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @for (node of nodes(); track $index) {
+      @switch (node.kind) {
+        @case ('text') {
+          <!-- Interpolated. This is the line that makes the whole design safe,
+               so it is the one worth pointing at. -->
+          {{ asText(node) }}
+        }
+        @case ('strong') {
+          <strong><formancy-rich-inline [nodes]="childrenOf(node)" /></strong>
+        }
+        @case ('emphasis') {
+          <em><formancy-rich-inline [nodes]="childrenOf(node)" /></em>
+        }
+        @case ('link') {
+          <!-- rel, because the destination was written by whoever filled the
+               form in and the page showing it is usually an administrator's.
+               The parser has already refused anything but http, https and
+               mailto. -->
+          <a [href]="hrefOf(node)" rel="noreferrer noopener nofollow ugc">
+            <formancy-rich-inline [nodes]="childrenOf(node)" />
+          </a>
+        }
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => FormancyRichInline), selector: "formancy-rich-inline", inputs: ["nodes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRichInline, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-rich-inline',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    // Itself, through forwardRef. A standalone component that uses its own
+                    // selector has to import itself or the nested tag is an unknown element:
+                    // Angular renders it as an empty custom element and says nothing, so a link
+                    // comes out as an anchor with no text in it rather than as an error.
+                    imports: [forwardRef(() => FormancyRichInline)],
+                    template: `
+    @for (node of nodes(); track $index) {
+      @switch (node.kind) {
+        @case ('text') {
+          <!-- Interpolated. This is the line that makes the whole design safe,
+               so it is the one worth pointing at. -->
+          {{ asText(node) }}
+        }
+        @case ('strong') {
+          <strong><formancy-rich-inline [nodes]="childrenOf(node)" /></strong>
+        }
+        @case ('emphasis') {
+          <em><formancy-rich-inline [nodes]="childrenOf(node)" /></em>
+        }
+        @case ('link') {
+          <!-- rel, because the destination was written by whoever filled the
+               form in and the page showing it is usually an administrator's.
+               The parser has already refused anything but http, https and
+               mailto. -->
+          <a [href]="hrefOf(node)" rel="noreferrer noopener nofollow ugc">
+            <formancy-rich-inline [nodes]="childrenOf(node)" />
+          </a>
+        }
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }] } });
+/**
+ * Showing a `richtext` answer, from the same parser the React renderer uses.
+ *
+ * No `[innerHTML]`, and no `DomSanitizer` — there is nothing to sanitise. The
+ * stored answer is parsed into a typed tree in `@formancy/spec`, and every
+ * element here is created by Angular from that tree, so the characters
+ * somebody typed arrive as interpolated text and cannot become markup however
+ * they are spelled ([0052](../../../docs/decisions/0052-richtext-is-not-html.md)).
+ *
+ * Both renderers building the same tree into the same elements is the promise
+ * the engine makes across browser and server, applied to presentation: two
+ * implementations, one meaning.
+ */
+class FormancyRichText {
+    source = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    blocks = computed(() => parseRichText(this.source()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRichText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyRichText, isStandalone: true, selector: "formancy-rich-text", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (blocks().length > 0) {
+      <div data-formancy-part="richtext">
+        @for (block of blocks(); track $index) {
+          @if (block.kind === 'paragraph') {
+            <p><formancy-rich-inline [nodes]="block.children" /></p>
+          } @else if (block.ordered) {
+            <ol>
+              @for (item of block.items; track $index) {
+                <li><formancy-rich-inline [nodes]="item" /></li>
+              }
+            </ol>
+          } @else {
+            <ul>
+              @for (item of block.items; track $index) {
+                <li><formancy-rich-inline [nodes]="item" /></li>
+              }
+            </ul>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyRichInline, selector: "formancy-rich-inline", inputs: ["nodes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRichText, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-rich-text',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyRichInline],
+                    template: `
+    @if (blocks().length > 0) {
+      <div data-formancy-part="richtext">
+        @for (block of blocks(); track $index) {
+          @if (block.kind === 'paragraph') {
+            <p><formancy-rich-inline [nodes]="block.children" /></p>
+          } @else if (block.ordered) {
+            <ol>
+              @for (item of block.items; track $index) {
+                <li><formancy-rich-inline [nodes]="item" /></li>
+              }
+            </ol>
+          } @else {
+            <ul>
+              @for (item of block.items; track $index) {
+                <li><formancy-rich-inline [nodes]="item" /></li>
+              }
+            </ul>
+          }
+        }
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }] } });
+
+/**
+ * Optional by design, and its absence costs less than the uploader's.
+ *
+ * A missing uploader makes a file field read-only, because there is nowhere to
+ * put the bytes. A missing editor costs only the WYSIWYG surface: the answer is
+ * still editable, still valid, and still the same grammar.
+ */
+const FORMANCY_RICH_TEXT_EDITOR = new InjectionToken('formancy.richTextEditor');
+function injectRichTextEditorFactory() {
+    return inject(FORMANCY_RICH_TEXT_EDITOR, { optional: true });
+}
+/** Providing one, for a host that wants the contenteditable surface. */
+function provideFormancyRichTextEditor(make) {
+    return { provide: FORMANCY_RICH_TEXT_EDITOR, useValue: make };
+}
+
+/**
+ * Optional by design. A `scanner` widget with no scanner behind it renders the ordinary
+ * text input and no button — typing was always the field's primary route, so there is
+ * nothing to disable and a Scan button that opened nothing would be worse.
+ */
+const FORMANCY_SCANNER = new InjectionToken('formancy.scanner');
+function injectScanner() {
+    return inject(FORMANCY_SCANNER, { optional: true });
+}
+/** Providing one, for a host that has a camera and a decoder. */
+function provideFormancyScanner(scan) {
+    return { provide: FORMANCY_SCANNER, useValue: scan };
+}
+
+/**
+ * Optional, and what its absence costs depends on the document. A form with no
+ * sourced field never needs one; a field that names a source renders a message where
+ * its chooser would be, exactly as the file field does without an uploader.
+ */
+const FORMANCY_OPTIONS_SOURCES = new InjectionToken('formancy.optionsSources');
+function injectOptionsSources() {
+    return inject(FORMANCY_OPTIONS_SOURCES, { optional: true });
+}
+/** Providing them, for a host that has the lists a document names. */
+function provideFormancyOptionsSources(sources) {
+    return { provide: FORMANCY_OPTIONS_SOURCES, useValue: sources };
+}
+
+const DEBOUNCE_MS = 250;
+const MIN_QUERY = 0;
+const MAX_ROWS = 50;
+/**
+ * Wire a field's remote options up.
+ *
+ * Called from a component's field context, so it may inject. `query` is the signal
+ * the control types into; a plain select passes a constant empty one, which asks the
+ * source for everything and shows what fits.
+ */
+function injectSourcedOptions(definition, 
+/**
+ * The field's DATA PATH — `canton`, or `people[1].canton` inside a repeater.
+ *
+ * Which is what `OptionsRequest.path` promises. Both renderers sent the field KEY,
+ * so a resolver could not tell two same-named sourced fields apart and never saw
+ * which row it was answering for.
+ */
+dataPath, storedValue, query, locale, 
+/**
+ * Whether this instance is the one that will render.
+ *
+ * A select that carries `widget: "typeahead"` delegates to another component, and
+ * both extend the same base — so both wire this up and both ask. React added the
+ * same flag for the same reason; without it a sourced typeahead sent every request
+ * twice, and one set of answers was read by nobody.
+ */
+enabled) {
+    const sources = injectOptionsSources();
+    const destroyRef = inject(DestroyRef);
+    const rows = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    const named = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "named" }] : /* istanbul ignore next */ []));
+    const busy = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    const failed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []));
+    const capped = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "capped" }] : /* istanbul ignore next */ []));
+    const source = () => {
+        const name = definition().optionsSource;
+        return name === undefined ? undefined : sources?.[name];
+    };
+    let generation = 0;
+    let inFlight;
+    let timer;
+    /** Every labels request still in the air, so a destroy can abort all of them. */
+    const labelRequests = new Set();
+    const stop = () => {
+        if (timer !== undefined)
+            clearTimeout(timer);
+        inFlight?.abort();
+    };
+    destroyRef.onDestroy(() => {
+        stop();
+        for (const controller of labelRequests)
+            controller.abort();
+        labelRequests.clear();
+    });
+    // The search, debounced and superseded by ABORTING rather than by ignoring: a
+    // request nobody wants any more is one a host should be able to cancel, and the
+    // signal is the only way to say so.
+    effect(() => {
+        const resolver = source();
+        const text = query();
+        const name = definition().optionsSource ?? '';
+        const path = dataPath();
+        if (!enabled() || resolver === undefined)
+            return;
+        const minQueryLength = resolver.minQueryLength ?? MIN_QUERY;
+        const maxRows = resolver.maxRows ?? MAX_ROWS;
+        stop();
+        // Bumped BEFORE the early return, not after it. Deleting characters back under the
+        // minimum aborts whatever is in flight, and with the generation unchanged that
+        // abort arrived at a handler that still believed it was current -- so backspacing
+        // reported the source as broken, and left the box marked busy with nothing in
+        // flight.
+        const mine = (generation += 1);
+        if (text.trim().length < minQueryLength) {
+            rows.set([]);
+            capped.set(null);
+            busy.set(false);
+            return;
+        }
+        const controller = new AbortController();
+        inFlight = controller;
+        timer = setTimeout(() => {
+            busy.set(true);
+            failed.set(false);
+            void resolver
+                .resolve({
+                kind: 'search',
+                source: name,
+                path,
+                query: text,
+                values: [],
+                locale: locale(),
+                limit: maxRows,
+                signal: controller.signal,
+            })
+                .then((answer) => {
+                if (mine !== generation)
+                    return;
+                // Refused whole rather than filtered: a partial list silently lacks the row
+                // somebody came for, and they cannot tell that from a source that has none.
+                const accepted = acceptRemoteOptions(answer);
+                if (accepted === undefined) {
+                    failed.set(true);
+                    rows.set([]);
+                    capped.set(null);
+                    return;
+                }
+                const result = capRemoteOptions(accepted, maxRows);
+                rows.set(result.shown);
+                capped.set(result.capped ? { shown: result.shown.length, total: result.total } : null);
+            })
+                .catch(() => {
+                if (mine !== generation)
+                    return;
+                failed.set(true);
+                rows.set([]);
+            })
+                .finally(() => {
+                if (mine === generation)
+                    busy.set(false);
+            });
+        }, resolver.debounceMs ?? DEBOUNCE_MS);
+    });
+    // The names of what is already stored. Without this, a resumed draft, a wizard page
+    // change or a datagrid row move — which remounts every control in the row by design
+    // — renders an empty box over an answer the form holds.
+    //
+    // Asked at most ONCE per value, and remembered as "asked" rather than inferred from
+    // the answer. A source is entitled not to know a value: a resumed form may hold one
+    // the list no longer offers, and a host may implement only `kind: 'search'`. Inferring
+    // from the answer meant the map was replaced, the signal changed, the effect re-ran
+    // and it asked again — measured in the React binding at 602 requests in 300ms.
+    const askedFor = new Set();
+    effect(() => {
+        const resolver = source();
+        const value = storedValue();
+        if (!enabled() || resolver === undefined || value === undefined)
+            return;
+        if (named().has(value) || askedFor.has(value))
+            return;
+        askedFor.add(value);
+        // Registered, so a destroy aborts it. The search request was; this one was not,
+        // which left a request outliving the component that asked for it -- and a host
+        // honouring the signal had no way to know nobody was listening any more.
+        const controller = new AbortController();
+        labelRequests.add(controller);
+        void resolver
+            .resolve({
+            kind: 'labels',
+            source: definition().optionsSource ?? '',
+            path: dataPath(),
+            query: '',
+            values: [value],
+            locale: locale(),
+            limit: 1,
+            signal: controller.signal,
+        })
+            .then((answer) => {
+            const accepted = acceptRemoteOptions(answer);
+            if (accepted === undefined)
+                return;
+            const next = new Map(named());
+            for (const row of accepted)
+                next.set(row.value, row.label);
+            named.set(next);
+        })
+            // A name that does not arrive is not an error anybody can act on: the control
+            // shows the raw value, exactly as it does for an option with no label.
+            .catch(() => undefined)
+            .finally(() => labelRequests.delete(controller));
+    });
+    return {
+        rows: rows.asReadonly(),
+        named: named.asReadonly(),
+        busy: busy.asReadonly(),
+        // `computed`, not a bare arrow: the template reads these, and a plain function
+        // would re-run on every change detection instead of when its inputs move.
+        sourced: computed(() => definition().optionsSource !== undefined),
+        unavailable: computed(() => definition().optionsSource !== undefined && source() === undefined),
+        status: computed(() => {
+            const resolver = source();
+            if (resolver === undefined)
+                return '';
+            if (failed())
+                return 'The options could not be loaded. Type to try again.';
+            const needs = resolver.minQueryLength ?? MIN_QUERY;
+            if (query().trim().length < needs)
+                return `Type at least ${String(needs)} characters to search.`;
+            // Set only once a request is actually on its way — after the debounce — so
+            // nothing announces per keystroke.
+            if (busy())
+                return 'Searching…';
+            const limit = capped();
+            if (limit !== null) {
+                return `Showing the first ${String(limit.shown)} of ${String(limit.total)} — keep typing to narrow.`;
+            }
+            return '';
+        }),
+    };
+}
+
+/**
+ * Optional by design. A form with no file fields needs no uploader, and a file
+ * field without one renders read-only and says why — which beats turning a
+ * form that mostly works into a failed injection.
+ */
+const FORMANCY_UPLOADER = new InjectionToken('formancy.uploader');
+function injectUploader() {
+    return inject(FORMANCY_UPLOADER, { optional: true });
+}
+/** Providing one, for a host that has somewhere to put bytes. */
+function provideFormancyUploader(upload) {
+    return { provide: FORMANCY_UPLOADER, useValue: upload };
+}
+
 /**
  * The built-in unstyled field components — the Angular rendering of the same
  * decisions React's defaults made. Zero CSS; `data-formancy-part` is the
@@ -157,6 +607,9 @@ class FormancyFieldShell {
     ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     label = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Inert here; read by tools outside the renderer. See FormancyLayout. */
+    path = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
     showError = computed(() => {
         const snapshot = this.field().snapshot();
         return snapshot.touched && snapshot.errors.length > 0;
@@ -165,8 +618,12 @@ class FormancyFieldShell {
     errorText = computed(() => this.field().snapshot().errors.join(', '), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyFieldShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyFieldShell, isStandalone: true, selector: "formancy-field-shell", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <div data-formancy-part="field" [attr.data-state]="showError() ? 'invalid' : 'valid'">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyFieldShell, isStandalone: true, selector: "formancy-field-shell", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      data-formancy-part="field"
+      [attr.data-formancy-field-path]="path()"
+      [attr.data-state]="showError() ? 'invalid' : 'valid'"
+    >
       <label data-formancy-part="label" [id]="field().snapshot().props.label.id" [attr.for]="field().snapshot().props.label.for">{{ label() }}</label>
       <ng-content />
       @if (showError()) {
@@ -181,7 +638,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: 'formancy-field-shell',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div data-formancy-part="field" [attr.data-state]="showError() ? 'invalid' : 'valid'">
+    <div
+      data-formancy-part="field"
+      [attr.data-formancy-field-path]="path()"
+      [attr.data-state]="showError() ? 'invalid' : 'valid'"
+    >
       <label data-formancy-part="label" [id]="field().snapshot().props.label.id" [attr.for]="field().snapshot().props.label.for">{{ label() }}</label>
       <ng-content />
       @if (showError()) {
@@ -190,7 +651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }] } });
 /** The state every leaf control shares; components extend it so the templates
  *  stay the only per-type code. Context comes through DI (see registry.ts). */
 class FieldComponentBase {
@@ -209,19 +670,139 @@ class FieldComponentBase {
         label: this.engine.text(option.label) ?? option.value,
     })), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * What the control types into, when it has something to type into.
+     *
+     * A plain `<select>` never writes to it, so its source is asked for everything and
+     * shows what fits; the typeahead writes every keystroke.
+     */
+    sourceQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceQuery" }] : /* istanbul ignore next */ []));
+    /** The remote half, or an inert one for the ordinary field that lists its options. */
+    remote = injectSourcedOptions(computed(() => {
+        const def = this.field.snapshot().def;
+        return { key: def.key, ...(def.optionsSource === undefined ? {} : { optionsSource: def.optionsSource }) };
+    }), () => this.context.path, computed(() => {
+        const value = this.field.snapshot().value;
+        return typeof value === 'string' && value !== '' ? value : undefined;
+    }), this.sourceQuery, () => this.engine.locale(), computed(() => this.sourceEnabled()));
+    /**
+     * Whether THIS component is the one that will render the field.
+     *
+     * True for every control but the select that hands over to the typeahead, which
+     * overrides it. Both extend this base, so without the distinction a sourced
+     * typeahead asked its source twice and read one set of answers.
+     */
+    sourceEnabled() {
+        return true;
+    }
+    /**
+     * The options to offer: the document's, or the deployment's.
+     *
+     * The stored answer is always offerable even when the current query does not match
+     * it — a control that dropped it would show an empty box over an answer the form
+     * holds, and the next blur would look like the person cleared it.
+     */
+    offered = computed(() => {
+        if (!this.remote.sourced())
+            return this.options();
+        const rows = [...this.remote.rows()];
+        const stored = this.field.snapshot().value;
+        if (typeof stored === 'string' && stored !== '' && !rows.some((row) => row.value === stored)) {
+            rows.unshift({ value: stored, label: this.remote.named().get(stored) ?? stored });
+        }
+        return rows;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offered" }] : /* istanbul ignore next */ []));
 }
+/**
+ * A single-line answer, and — with `widget: "scanner"` — a camera route to the same
+ * string.
+ *
+ * The input is the control in both cases, never a second one beside it: typing is the
+ * accessibility floor and the fallback at once, so it is what is always there and the
+ * scan button is what is sometimes added. With no scanner supplied the markup is the
+ * default control exactly, because a Scan button that opens nothing is worse than no
+ * button ([0071](../../../docs/decisions/0071-a-scanner-is-supplied-not-built.md)).
+ *
+ * The React binding renders the same three elements for the same reasons.
+ */
 class FormancyTextField extends FieldComponentBase {
+    scan = injectScanner();
+    scanning = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scanning" }] : /* istanbul ignore next */ []));
+    /** A device failure, held here rather than in the field's errors. See above. */
+    trouble = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trouble" }] : /* istanbul ignore next */ []));
     text = computed(() => {
         const value = this.field.snapshot().value;
         return typeof value === 'string' ? value : '';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /**
+     * A computed over the field's SIGNAL, not over `engine.getFieldSnapshot` — the
+     * widget can arrive with a new document, and a plain method call is not a
+     * dependency an OnPush component re-runs for.
+     */
+    scannable = computed(() => this.scan !== null && this.field.snapshot().def.widget === 'scanner', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scannable" }] : /* istanbul ignore next */ []));
+    status = computed(() => this.scanning() ? 'Scanning…' : (this.trouble() ?? ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     onInput(event) {
-        this.field.setValue(event.target.value);
+        this.commit(event.target.value);
+    }
+    /**
+     * The ONE place a text field's answer is written, typed or scanned.
+     *
+     * Structural rather than careful: the parameter is a `string`, so there is no path
+     * from the camera to `setValue` that could store something typing could not — the
+     * line a widget may never cross
+     * ([0065](../../../docs/decisions/0065-a-widget-is-authored-not-registered.md)).
+     */
+    commit(text) {
+        // See the React binding: `<input type="text">` strips CR and LF from anything typed or
+        // pasted, so a multi-line code payload stored verbatim would be an answer the default
+        // control cannot produce -- the one thing a widget may never do.
+        this.field.setValue(text.replace(/[\r\n]/g, ''));
+    }
+    async read() {
+        // Re-entrancy, which `disabled` used to prevent: a second press while a scan is in
+        // flight is ignored rather than opening a second camera session.
+        if (this.scan === null || this.scanning())
+            return;
+        this.scanning.set(true);
+        this.trouble.set(undefined);
+        try {
+            const text = await this.scan({ label: this.context.label, path: this.context.path });
+            // Nobody scanned anything: the sheet was closed, or they changed their mind.
+            // Not a failure, and an apology in a live region for a decision somebody made
+            // on purpose is noise.
+            if (text === null)
+                return;
+            if (typeof text !== 'string') {
+                // A host written in plain JavaScript can resolve with anything. Reported as
+                // the device failure it is, rather than stored — an object in a text field is
+                // exactly what `commit` exists to make impossible.
+                this.trouble.set('Scanning did not work: the scanner did not return text. Type the value instead.');
+                return;
+            }
+            // Stored as typed, THEN touched — so a value the field's `pattern` refuses
+            // shows the engine's own error rather than being dropped. Dropping it would
+            // discard the only record of what the camera read and leave the field looking
+            // empty, which is the worse of the two failures by some distance.
+            this.commit(text);
+            this.field.touch();
+        }
+        catch (error) {
+            this.trouble.set(`Scanning did not work: ${error instanceof Error ? error.message : String(error)}. Type the value instead.`);
+        }
+        finally {
+            this.scanning.set(false);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTextField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyTextField, isStandalone: true, selector: "formancy-text-field", usesInheritance: true, ngImport: i0, template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyTextField, isStandalone: true, selector: "formancy-text-field", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <input
         type="text"
         [id]="control().id"
@@ -234,8 +815,29 @@ class FormancyTextField extends FieldComponentBase {
         (input)="onInput($event)"
         (blur)="field.touch()"
       />
+      @if (scannable()) {
+        <!-- The word is the visible label and the field's name completes the
+             accessible one, so three scannable fields on a page do not offer three
+             buttons called "Scan" — and the visible text is still contained in the
+             accessible name (WCAG 2.5.3). One line, because element-internal
+             whitespace leaks into the accessible name. -->
+        <!-- Disabled only when the FIELD is, never while scanning: disabling the button
+             somebody just pressed blurs it and the browser resets focus to the document
+             body, so a keyboard user is returned to the top of the page and told to type
+             instead into a field they must find again. Busy is said with aria-busy, which
+             does not touch focus, and the guard in read() does what disabled was doing.
+             Kept on one line because element-internal whitespace leaks into the accessible
+             name. -->
+        <button type="button" data-formancy-part="scanner-button" [disabled]="field.snapshot().disabled" [attr.aria-busy]="scanning() ? 'true' : null" (click)="read()">Scan <span data-formancy-part="visually-hidden">{{ context.label }}</span></button>
+        <!-- The camera's own progress and its failures, in this field's polite
+             region. NOT the error region: that one is the control's describedby
+             target, it holds the engine's verdicts, and a refused permission put
+             there would describe a hardware problem as a wrong answer. The same
+             shape the file field uses for an upload. -->
+        <p role="status" data-formancy-part="scanner-status">{{ status() }}</p>
+      }
     </formancy-field-shell>
-  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTextField, decorators: [{
             type: Component,
@@ -244,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormancyFieldShell],
                     template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <input
         type="text"
         [id]="control().id"
@@ -257,6 +859,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         (input)="onInput($event)"
         (blur)="field.touch()"
       />
+      @if (scannable()) {
+        <!-- The word is the visible label and the field's name completes the
+             accessible one, so three scannable fields on a page do not offer three
+             buttons called "Scan" — and the visible text is still contained in the
+             accessible name (WCAG 2.5.3). One line, because element-internal
+             whitespace leaks into the accessible name. -->
+        <!-- Disabled only when the FIELD is, never while scanning: disabling the button
+             somebody just pressed blurs it and the browser resets focus to the document
+             body, so a keyboard user is returned to the top of the page and told to type
+             instead into a field they must find again. Busy is said with aria-busy, which
+             does not touch focus, and the guard in read() does what disabled was doing.
+             Kept on one line because element-internal whitespace leaks into the accessible
+             name. -->
+        <button type="button" data-formancy-part="scanner-button" [disabled]="field.snapshot().disabled" [attr.aria-busy]="scanning() ? 'true' : null" (click)="read()">Scan <span data-formancy-part="visually-hidden">{{ context.label }}</span></button>
+        <!-- The camera's own progress and its failures, in this field's polite
+             region. NOT the error region: that one is the control's describedby
+             target, it holds the engine's verdicts, and a refused permission put
+             there would describe a hardware problem as a wrong answer. The same
+             shape the file field uses for an upload. -->
+        <p role="status" data-formancy-part="scanner-status">{{ status() }}</p>
+      }
     </formancy-field-shell>
   `,
                 }]
@@ -272,7 +895,7 @@ class FormancyTextareaField extends FieldComponentBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTextareaField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyTextareaField, isStandalone: true, selector: "formancy-textarea-field", usesInheritance: true, ngImport: i0, template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <textarea
         [id]="control().id"
         [attr.name]="control().name"
@@ -285,7 +908,7 @@ class FormancyTextareaField extends FieldComponentBase {
         (blur)="field.touch()"
       ></textarea>
     </formancy-field-shell>
-  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTextareaField, decorators: [{
             type: Component,
@@ -294,7 +917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormancyFieldShell],
                     template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <textarea
         [id]="control().id"
         [attr.name]="control().name"
@@ -322,7 +945,7 @@ class FormancyNumberField extends FieldComponentBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyNumberField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyNumberField, isStandalone: true, selector: "formancy-number-field", usesInheritance: true, ngImport: i0, template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <input
         type="number"
         [id]="control().id"
@@ -336,7 +959,7 @@ class FormancyNumberField extends FieldComponentBase {
         (blur)="field.touch()"
       />
     </formancy-field-shell>
-  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyNumberField, decorators: [{
             type: Component,
@@ -345,7 +968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormancyFieldShell],
                     template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <input
         type="number"
         [id]="control().id"
@@ -365,12 +988,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 class FormancyCheckboxField extends FieldComponentBase {
     checked = computed(() => this.field.snapshot().value === true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /**
+     * `widget: "toggle"` is a part name and NOT `role="switch"`.
+     *
+     * ARIA's switch means a control that takes effect when you operate it, and a form
+     * field sets a value submitted later or never — so announcing "switch" describes
+     * it incorrectly to the people who rely on the description. A role is also not
+     * paint: changing it would make this the first widget to change what a control
+     * claims to be, which is the line the widget mechanism exists to hold. The switch
+     * is CSS, and conformance keeps finding this by role `checkbox` either way.
+     *
+     * Null rather than absent when there is no widget, because Angular omits an
+     * attribute bound to null — which is what keeps an ordinary checkbox's markup
+     * exactly as it was.
+     */
+    part = computed(() => this.field.snapshot().def.widget === 'toggle' ? 'toggle' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "part" }] : /* istanbul ignore next */ []));
     onChange(event) {
         this.field.setValue(event.target.checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyCheckboxField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyCheckboxField, isStandalone: true, selector: "formancy-checkbox-field", usesInheritance: true, ngImport: i0, template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <input
         type="checkbox"
         [id]="control().id"
@@ -378,13 +1017,14 @@ class FormancyCheckboxField extends FieldComponentBase {
         [attr.aria-invalid]="control()['aria-invalid']"
         [attr.aria-required]="control()['aria-required']"
         [attr.aria-describedby]="control()['aria-describedby']"
+        [attr.data-formancy-part]="part()"
         [disabled]="control().disabled === true"
         [checked]="checked()"
         (change)="onChange($event)"
         (blur)="field.touch()"
       />
     </formancy-field-shell>
-  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyCheckboxField, decorators: [{
             type: Component,
@@ -393,7 +1033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormancyFieldShell],
                     template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <input
         type="checkbox"
         [id]="control().id"
@@ -401,6 +1041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         [attr.aria-invalid]="control()['aria-invalid']"
         [attr.aria-required]="control()['aria-required']"
         [attr.aria-describedby]="control()['aria-describedby']"
+        [attr.data-formancy-part]="part()"
         [disabled]="control().disabled === true"
         [checked]="checked()"
         (change)="onChange($event)"
@@ -422,7 +1063,7 @@ class FormancyDateField extends FieldComponentBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyDateField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyDateField, isStandalone: true, selector: "formancy-date-field", usesInheritance: true, ngImport: i0, template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <input
         type="date"
         [id]="control().id"
@@ -436,7 +1077,7 @@ class FormancyDateField extends FieldComponentBase {
         (blur)="field.touch()"
       />
     </formancy-field-shell>
-  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyDateField, decorators: [{
             type: Component,
@@ -445,7 +1086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormancyFieldShell],
                     template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <input
         type="date"
         [id]="control().id"
@@ -462,7 +1103,554 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
   `,
                 }]
         }] });
+/**
+ * A time of day, as `HH:MM`.
+ *
+ * `<input type="time">` gives the platform's picker, keyboard handling and locale
+ * display — a 12-hour clock where the reader expects one — while its `value` is
+ * always 24-hour `HH:MM`. Exactly the split the format wants: the reader sees their
+ * convention, the answer records one canonical shape.
+ *
+ * No `step`, so the browser offers no seconds. A time answer has none, and a control
+ * offering precision the format discards loses what somebody typed.
+ */
+class FormancyTimeField extends FieldComponentBase {
+    text = computed(() => {
+        const value = this.field.snapshot().value;
+        return typeof value === 'string' ? value : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /* Bounds handed to the browser as well as checked by the engine. The engine's
+       check is the truth — it runs again on the server — and these let the platform
+       grey out what it will not accept, which beats a message after the fact. */
+    earliest = computed(() => {
+        const bound = this.field.snapshot().def.earliest;
+        return typeof bound === 'string' ? bound : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "earliest" }] : /* istanbul ignore next */ []));
+    latest = computed(() => {
+        const bound = this.field.snapshot().def.latest;
+        return typeof bound === 'string' ? bound : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "latest" }] : /* istanbul ignore next */ []));
+    onInput(event) {
+        const raw = event.target.value;
+        this.field.setValue(raw === '' ? null : raw);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTimeField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyTimeField, isStandalone: true, selector: "formancy-time-field", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+      <input
+        type="time"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [attr.min]="earliest()"
+        [attr.max]="latest()"
+        [disabled]="control().disabled === true"
+        [value]="text()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTimeField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-time-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell],
+                    template: `
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+      <input
+        type="time"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [attr.min]="earliest()"
+        [attr.max]="latest()"
+        [disabled]="control().disabled === true"
+        [value]="text()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `,
+                }]
+        }] });
+/**
+ * An instant, stored as `YYYY-MM-DDTHH:MM:SSZ`.
+ *
+ * `datetime-local` because no browser has a zoned datetime input, so the control
+ * shows a local wall clock and this converts. The conversion is why this is not the
+ * date field with another `type`:
+ *
+ * - **In:** the control gives `YYYY-MM-DDTHH:MM` in the reader's own zone, and `new
+ *   Date(local)` reads a zoneless string as local time — which is what is wanted at
+ *   the moment somebody types, and exactly what `bindTimestamp` refuses for a value
+ *   already stored, because the zone is not knowable later.
+ * - **Out:** the stored instant is rendered back into local parts for the control,
+ *   never `toISOString()`, which would show UTC in a box the browser labels local.
+ *
+ * Seconds are therefore `00` in any answer a person typed. The format keeps them
+ * because a machine-supplied answer has them, and one fixed width is what makes
+ * ordering work.
+ */
+class FormancyDateTimeField extends FieldComponentBase {
+    localText = computed(() => {
+        const value = this.field.snapshot().value;
+        if (typeof value !== 'string' || value === '')
+            return '';
+        const instant = new Date(value);
+        if (Number.isNaN(instant.getTime()))
+            return '';
+        const pad = (part) => String(part).padStart(2, '0');
+        return (`${String(instant.getFullYear())}-${pad(instant.getMonth() + 1)}-${pad(instant.getDate())}` +
+            `T${pad(instant.getHours())}:${pad(instant.getMinutes())}`);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localText" }] : /* istanbul ignore next */ []));
+    onInput(event) {
+        const local = event.target.value;
+        if (local === '') {
+            this.field.setValue(null);
+            return;
+        }
+        const instant = new Date(local);
+        // A control can hand back something unparseable mid-edit. Null rather than a
+        // malformed string keeps the stored answer always either empty or canonical,
+        // which is what the engine's shape check assumes.
+        this.field.setValue(Number.isNaN(instant.getTime()) ? null : `${instant.toISOString().slice(0, 19)}Z`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyDateTimeField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyDateTimeField, isStandalone: true, selector: "formancy-datetime-field", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+      <input
+        type="datetime-local"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [value]="localText()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyDateTimeField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-datetime-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell],
+                    template: `
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+      <input
+        type="datetime-local"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [value]="localText()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `,
+                }]
+        }] });
+/**
+ * `widget: "typeahead"` - the same select, narrowed by typing.
+ *
+ * An ARIA 1.2 editable combobox over a listbox popup: a text box with
+ * `role="combobox"` and a `<ul role="listbox">` of `<li role="option">`. DOM focus
+ * never leaves the text box, so the arrowed-over option is named by
+ * `aria-activedescendant` - the only thing that says where somebody is when what
+ * they are moving through does not hold focus.
+ *
+ * **The list element exists while the popup is collapsed.** `aria-expanded` and
+ * `aria-controls` are required properties of the role, and an `aria-controls`
+ * pointing at an element that is not there is an unresolvable IDREF - so the
+ * listbox is rendered and `hidden` rather than created when it opens.
+ *
+ * `aria-autocomplete="list"`, never `"both"`: nothing is written into the box on
+ * the person's behalf, and `"both"` announces an inline completion that does not
+ * exist. No `aria-haspopup`: `listbox` is the role's implicit popup.
+ *
+ * While a source is being asked, the box carries `aria-busy` and is never disabled:
+ * disabling the element somebody just typed into blurs it, and the browser then
+ * resets focus to the document body — the same reason the scanner's button stays
+ * enabled while a scan is in flight.
+ *
+ * `aria-selected` is on the CHOSEN option and nothing else. Following the arrow
+ * keys with it tells a screen reader the answer changed every time somebody
+ * pressed Down to read the next row.
+ *
+ * **It cannot store what somebody typed.** `setValue` is reached from two places
+ * here, with an option's own value or with `null`, and the text goes nowhere but
+ * the filter - which is what makes
+ * [0065](../../../docs/decisions/0065-a-widget-is-authored-not-registered.md)
+ * structural rather than remembered. The filter itself is
+ * `narrowOptionsByLabel` from `@formancy/spec`, the same function React calls, so
+ * a query cannot narrow one way here and another way there.
+ *
+ * Every piece of state is a signal, and the field's own state arrives through
+ * `injectField`, which is a signal fed by `engine.subscribeField`. Reading
+ * `engine.getFieldSnapshot` instead - or wrapping a plain call in `computed()`,
+ * which has no reactive dependency at all - renders this once and never again.
+ * That bug has been written twice in this repository.
+ */
+class FormancyTypeaheadSelect extends FieldComponentBase {
+    /**
+     * What is in the box while somebody types, or null when the box is simply
+     * showing the answer.
+     *
+     * Two states rather than one string, because "empty because they cleared it" and
+     * "empty because there is no answer" are different facts, and only the first
+     * clears the answer on the way out.
+     */
+    query = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** The arrowed-over option by VALUE, not by index: the filtered list changes on
+     *  every keystroke and an index would point at a different row after one. */
+    activeValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
+    /**
+     * The option the form currently holds, looked up in what is OFFERED.
+     *
+     * `options()` is the document's list alone, and a field with `optionsSource` has
+     * none — the schema forbids both — so looking there made `chosen` permanently
+     * undefined for a sourced field, and the box showed an empty string over a stored
+     * answer. React looked it up in the offered list from the start; this is the
+     * divergence that made them two different controls.
+     */
+    chosen = computed(() => {
+        const value = this.field.snapshot().value;
+        return this.offered().find((option) => option.value === value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chosen" }] : /* istanbul ignore next */ []));
+    /**
+     * A source is the AUTHORITY on what matches: it was handed the query, and
+     * re-folding its rows here would drop ones it matched on data the person cannot
+     * see. A host wanting fetch-once-filter-locally composes `narrowOptionsByLabel` in
+     * its own resolver, which is why that function lives in `@formancy/spec`.
+     */
+    matches = computed(() => this.remote.sourced()
+        ? this.offered()
+        : narrowOptionsByLabel(this.options(), this.query() ?? ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matches" }] : /* istanbul ignore next */ []));
+    /** Collapsed whenever there is nothing on the screen, so `aria-expanded` never
+     *  claims a popup a person cannot see. */
+    expanded = computed(() => this.open() && this.matches().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    text = computed(() => this.query() ?? this.chosen()?.label ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    listboxId = computed(() => `${this.control().id}:listbox`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    popupLabel = computed(() => `${this.context.label} suggestions`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popupLabel" }] : /* istanbul ignore next */ []));
+    activeIndex = computed(() => this.matches().findIndex((option) => option.value === this.activeValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Absent rather than empty when nothing is active: an empty IDREF is a broken
+     *  reference, not a way of saying "nothing". Angular omits an attribute bound to
+     *  null, which is exactly that. */
+    activeId = computed(() => {
+        const index = this.activeIndex();
+        if (!this.expanded() || index === -1)
+            return null;
+        return this.optionId(this.matches()[index].value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /**
+     * A source's own words win over "no options match": while a request is in flight,
+     * "nothing matched" is not yet true.
+     */
+    statusMessage = computed(() => {
+        const fromSource = this.remote.status();
+        if (fromSource !== '')
+            return fromSource;
+        return this.open() && this.matches().length === 0 && !this.remote.busy()
+            ? 'No options match'
+            : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
+    /** What the region is saying, as a word a theme can select on. */
+    statusState = computed(() => {
+        if (this.remote.busy())
+            return 'busy';
+        const message = this.remote.status();
+        if (message.startsWith('The options could not'))
+            return 'failed';
+        if (message !== '')
+            return 'hint';
+        return this.open() && this.matches().length === 0 ? 'empty' : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusState" }] : /* istanbul ignore next */ []));
+    /** One option's element id, in the shape the radio group already uses. */
+    optionId(value) {
+        return `${this.control().id}:option:${value}`;
+    }
+    /**
+     * The one place the query changes, because it is two facts that must never disagree:
+     * what the box shows, and what the source is asked for.
+     *
+     * They were separate signals and only typing wrote the second, so after choosing a
+     * row or leaving the field the source kept answering the abandoned query while the
+     * box showed the answer — and the popup on the next click held rows for a word
+     * nobody had typed. React derives both from one piece of state, which is why it
+     * never had this.
+     */
+    setQuery(next) {
+        this.query.set(next);
+        this.sourceQuery.set(next ?? '');
+    }
+    onInput(event) {
+        this.setQuery(event.target.value);
+        this.open.set(true);
+        // Nothing is active on a keystroke: aria-activedescendant is ABSENT rather
+        // than pointing at a row the person has not moved to.
+        this.activeValue.set(null);
+    }
+    onKeyDown(event) {
+        const matches = this.matches();
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (!this.open()) {
+                this.open.set(true);
+                // Opens ON the answer when there is one, so Down then Enter cannot
+                // quietly change an answer somebody only wanted to look at.
+                const fallback = event.key === 'ArrowDown' ? matches[0] : matches[matches.length - 1];
+                this.activeValue.set(this.chosen()?.value ?? fallback?.value ?? null);
+                return;
+            }
+            this.moveActive(event.key === 'ArrowDown' ? 1 : -1);
+            return;
+        }
+        if ((event.key === 'Home' || event.key === 'End') && this.expanded()) {
+            // The popup's keys while it is open. Left to the caret, a long list is
+            // reachable only by holding Down.
+            event.preventDefault();
+            this.activeValue.set((event.key === 'Home' ? matches[0] : matches[matches.length - 1]).value);
+            return;
+        }
+        if (event.key === 'Enter') {
+            // Only while the list is showing. Otherwise Enter belongs to the form, and a
+            // control that swallowed it would break submitting from the keyboard.
+            if (!this.expanded())
+                return;
+            event.preventDefault();
+            const index = this.activeIndex();
+            if (index === -1) {
+                this.open.set(false);
+                return;
+            }
+            this.choose(matches[index].value);
+            return;
+        }
+        if (event.key === 'Escape') {
+            if (!this.open() && this.query() === null)
+                return;
+            event.preventDefault();
+            // "Never mind about this list", not "delete what I chose earlier": the query
+            // is abandoned and the ANSWER is untouched.
+            this.open.set(false);
+            this.activeValue.set(null);
+            this.setQuery(null);
+        }
+    }
+    choose(value) {
+        this.field.setValue(value);
+        this.setQuery(null);
+        this.open.set(false);
+        this.activeValue.set(null);
+    }
+    onBlur() {
+        this.open.set(false);
+        this.activeValue.set(null);
+        const typed = this.query();
+        if (typed !== null) {
+            // An emptied box is the empty option, and the only route to null. Anything
+            // else typed is abandoned - it was never an answer.
+            if (typed.trim() === '')
+                this.field.setValue(null);
+            this.setQuery(null);
+        }
+        this.field.touch();
+    }
+    moveActive(delta) {
+        const matches = this.matches();
+        if (matches.length === 0)
+            return;
+        const index = this.activeIndex();
+        const from = index === -1 ? (delta > 0 ? -1 : matches.length) : index;
+        // Clamped, not wrapped: Down means further down the list, and a list that
+        // jumps back to the top moves somebody past the end without saying so.
+        const next = Math.min(Math.max(from + delta, 0), matches.length - 1);
+        this.activeValue.set(matches[next].value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTypeaheadSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyTypeaheadSelect, isStandalone: true, selector: "formancy-typeahead-select", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+      <!-- The popup's containing block, and the reason it is an element rather than
+           nothing at all.
+
+           The popup was absolutely positioned with 'top: auto', on the reasoning that
+           it would then land at its STATIC position -- where it would have sat in the
+           flow, directly under the box. That holds inside a block container and NOT
+           inside a grid or flex one, and every theme lays a field out with
+           'display: grid'. For an absolutely positioned child of a grid container the
+           static position is the container's own content-box origin, so the list opened
+           over its own label and box rather than under them. Measured in the playground
+           before the fix: the field's top edge was 457px, an in-flow child would have
+           sat at 537px, and the popup sat at 459px.
+
+           So the popup is given a containing block that wraps the control and nothing
+           else, and every theme positions it against that explicitly. The status region
+           stays OUTSIDE it, because it is a row of the field's grid exactly as the
+           error region is. The React binding does the same, for the same reason. -->
+      <div data-formancy-part="typeahead-anchor">
+        <input
+          type="text"
+          role="combobox"
+          [id]="control().id"
+          [attr.name]="control().name"
+          [attr.aria-invalid]="control()['aria-invalid']"
+          [attr.aria-required]="control()['aria-required']"
+          [attr.aria-describedby]="control()['aria-describedby']"
+          [disabled]="control().disabled === true"
+          data-formancy-part="typeahead"
+          autocomplete="off"
+          aria-autocomplete="list"
+          [attr.aria-busy]="remote.busy() ? 'true' : null"
+          [attr.aria-expanded]="expanded()"
+          [attr.aria-controls]="listboxId()"
+          [attr.aria-activedescendant]="activeId()"
+          [value]="text()"
+          (input)="onInput($event)"
+          (click)="open.set(true)"
+          (keydown)="onKeyDown($event)"
+          (blur)="onBlur()"
+        />
+        <!-- Named, because the listbox role is one whose accessible name is required.
+             Not with the name the field already has: two elements answering to the
+             same accessible name make every query by that name ambiguous. -->
+        <ul
+          [id]="listboxId()"
+          role="listbox"
+          [attr.aria-label]="popupLabel()"
+          data-formancy-part="typeahead-listbox"
+          [hidden]="!expanded()"
+        >
+          @for (option of matches(); track option.value) {
+            <li [id]="optionId(option.value)" role="option" data-formancy-part="typeahead-option" [attr.data-active]="option.value === activeValue() ? 'true' : null" [attr.aria-selected]="chosen()?.value === option.value ? 'true' : null" (mousedown)="$event.preventDefault()" (click)="choose(option.value)">{{ option.label }}</li>
+          }
+        </ul>
+      </div>
+      <!-- Present from the start and empty until there is something to say: a live
+           region created at the moment it gets its text is one several screen
+           readers never announce. -->
+      <!-- ONE region, four things it may say, and never the error region: a source
+           being down is not a wrong answer, and the error region is the control's
+           describedby target carrying the engine's verdict. -->
+      <p role="status" data-formancy-part="typeahead-status" [attr.data-state]="statusState()">{{ statusMessage() }}</p>
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTypeaheadSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-typeahead-select',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell],
+                    template: `
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+      <!-- The popup's containing block, and the reason it is an element rather than
+           nothing at all.
+
+           The popup was absolutely positioned with 'top: auto', on the reasoning that
+           it would then land at its STATIC position -- where it would have sat in the
+           flow, directly under the box. That holds inside a block container and NOT
+           inside a grid or flex one, and every theme lays a field out with
+           'display: grid'. For an absolutely positioned child of a grid container the
+           static position is the container's own content-box origin, so the list opened
+           over its own label and box rather than under them. Measured in the playground
+           before the fix: the field's top edge was 457px, an in-flow child would have
+           sat at 537px, and the popup sat at 459px.
+
+           So the popup is given a containing block that wraps the control and nothing
+           else, and every theme positions it against that explicitly. The status region
+           stays OUTSIDE it, because it is a row of the field's grid exactly as the
+           error region is. The React binding does the same, for the same reason. -->
+      <div data-formancy-part="typeahead-anchor">
+        <input
+          type="text"
+          role="combobox"
+          [id]="control().id"
+          [attr.name]="control().name"
+          [attr.aria-invalid]="control()['aria-invalid']"
+          [attr.aria-required]="control()['aria-required']"
+          [attr.aria-describedby]="control()['aria-describedby']"
+          [disabled]="control().disabled === true"
+          data-formancy-part="typeahead"
+          autocomplete="off"
+          aria-autocomplete="list"
+          [attr.aria-busy]="remote.busy() ? 'true' : null"
+          [attr.aria-expanded]="expanded()"
+          [attr.aria-controls]="listboxId()"
+          [attr.aria-activedescendant]="activeId()"
+          [value]="text()"
+          (input)="onInput($event)"
+          (click)="open.set(true)"
+          (keydown)="onKeyDown($event)"
+          (blur)="onBlur()"
+        />
+        <!-- Named, because the listbox role is one whose accessible name is required.
+             Not with the name the field already has: two elements answering to the
+             same accessible name make every query by that name ambiguous. -->
+        <ul
+          [id]="listboxId()"
+          role="listbox"
+          [attr.aria-label]="popupLabel()"
+          data-formancy-part="typeahead-listbox"
+          [hidden]="!expanded()"
+        >
+          @for (option of matches(); track option.value) {
+            <li [id]="optionId(option.value)" role="option" data-formancy-part="typeahead-option" [attr.data-active]="option.value === activeValue() ? 'true' : null" [attr.aria-selected]="chosen()?.value === option.value ? 'true' : null" (mousedown)="$event.preventDefault()" (click)="choose(option.value)">{{ option.label }}</li>
+          }
+        </ul>
+      </div>
+      <!-- Present from the start and empty until there is something to say: a live
+           region created at the moment it gets its text is one several screen
+           readers never announce. -->
+      <!-- ONE region, four things it may say, and never the error region: a source
+           being down is not a wrong answer, and the error region is the control's
+           describedby target carrying the engine's verdict. -->
+      <p role="status" data-formancy-part="typeahead-status" [attr.data-state]="statusState()">{{ statusMessage() }}</p>
+    </formancy-field-shell>
+  `,
+                }]
+        }] });
 class FormancySelectField extends FieldComponentBase {
+    typeahead = computed(() => this.field.snapshot().def.widget === 'typeahead', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeahead" }] : /* istanbul ignore next */ []));
+    /** The name the document gave, for the message when this deployment has no such source. */
+    sourceName = computed(() => this.field.snapshot().def.optionsSource ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceName" }] : /* istanbul ignore next */ []));
+    /** This one hands over to the typeahead, which does its own asking. */
+    sourceEnabled() {
+        return !this.typeahead();
+    }
     selected = computed(() => {
         const value = this.field.snapshot().value;
         return typeof value === 'string' ? value : '';
@@ -474,7 +1662,27 @@ class FormancySelectField extends FieldComponentBase {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancySelectField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancySelectField, isStandalone: true, selector: "formancy-select-field", usesInheritance: true, ngImport: i0, template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    @if (remote.unavailable()) {
+      <!-- The document names a source this deployment does not have. Unlike a missing
+           scanner this costs the whole field -- a select with no options collects
+           nothing -- so it says so where the chooser would be, exactly as the file
+           field does without an uploader.
+
+           BEFORE the widget, and the order is the fix: dispatching to the typeahead
+           first made this message unreachable for the very widget the feature was
+           built for, leaving a working-looking combobox that returned nothing and
+           announced "No options match" -- which says the list has no such row, when
+           the truth is that there is no list. The React binding orders it the same. -->
+      <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+        <p data-formancy-part="options-unavailable">This field's answers come from "{{ sourceName() }}", which this application has not provided.</p>
+      </formancy-field-shell>
+    } @else if (typeahead()) {
+      <!-- A widget changes the CONTROL and nothing else: same field, same
+           accessible name, same stored answer. The registry still wins over every
+           branch, because it replaces the component. -->
+      <formancy-typeahead-select />
+    } @else {
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <select
         [id]="control().id"
         [attr.name]="control().name"
@@ -490,21 +1698,48 @@ class FormancySelectField extends FieldComponentBase {
              heard about. Selectedness is bound per option because a select's
              value property is only settable once its options exist. -->
         <option value="" [selected]="selected() === ''"></option>
-        @for (option of options(); track option.value) {
+        @for (option of offered(); track option.value) {
           <option [value]="option.value" [selected]="selected() === option.value">{{ option.label }}</option>
         }
       </select>
+      <!-- Only a sourced select has anything to say: how many rows were left out, or
+           that the source could not be reached. Never the error region, which carries
+           the engine's verdict -- a source being down is not a wrong answer. -->
+      @if (remote.sourced()) {
+        <p role="status" data-formancy-part="select-status">{{ remote.status() }}</p>
+      }
     </formancy-field-shell>
-  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }, { kind: "component", type: FormancyTypeaheadSelect, selector: "formancy-typeahead-select" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancySelectField, decorators: [{
             type: Component,
             args: [{
                     selector: 'formancy-select-field',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormancyFieldShell],
+                    imports: [FormancyFieldShell, FormancyTypeaheadSelect],
                     template: `
-    <formancy-field-shell [field]="field" [label]="context.label">
+    @if (remote.unavailable()) {
+      <!-- The document names a source this deployment does not have. Unlike a missing
+           scanner this costs the whole field -- a select with no options collects
+           nothing -- so it says so where the chooser would be, exactly as the file
+           field does without an uploader.
+
+           BEFORE the widget, and the order is the fix: dispatching to the typeahead
+           first made this message unreachable for the very widget the feature was
+           built for, leaving a working-looking combobox that returned nothing and
+           announced "No options match" -- which says the list has no such row, when
+           the truth is that there is no list. The React binding orders it the same. -->
+      <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+        <p data-formancy-part="options-unavailable">This field's answers come from "{{ sourceName() }}", which this application has not provided.</p>
+      </formancy-field-shell>
+    } @else if (typeahead()) {
+      <!-- A widget changes the CONTROL and nothing else: same field, same
+           accessible name, same stored answer. The registry still wins over every
+           branch, because it replaces the component. -->
+      <formancy-typeahead-select />
+    } @else {
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
       <select
         [id]="control().id"
         [attr.name]="control().name"
@@ -520,11 +1755,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
              heard about. Selectedness is bound per option because a select's
              value property is only settable once its options exist. -->
         <option value="" [selected]="selected() === ''"></option>
-        @for (option of options(); track option.value) {
+        @for (option of offered(); track option.value) {
           <option [value]="option.value" [selected]="selected() === option.value">{{ option.label }}</option>
         }
       </select>
+      <!-- Only a sourced select has anything to say: how many rows were left out, or
+           that the source could not be reached. Never the error region, which carries
+           the engine's verdict -- a source being down is not a wrong answer. -->
+      @if (remote.sourced()) {
+        <p role="status" data-formancy-part="select-status">{{ remote.status() }}</p>
+      }
     </formancy-field-shell>
+    }
   `,
                 }]
         }] });
@@ -539,82 +1781,886 @@ class FormancyRadioGroupField extends FieldComponentBase {
     optionId(option) {
         return `${this.field.snapshot().ids.control}:${option.value}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRadioGroupField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyRadioGroupField, isStandalone: true, selector: "formancy-radio-group-field", usesInheritance: true, ngImport: i0, template: `
-    <fieldset
-      data-formancy-part="field"
-      [attr.data-state]="showError() ? 'invalid' : 'valid'"
-      [attr.aria-describedby]="control()['aria-describedby']"
-    >
-      <legend data-formancy-part="label">{{ context.label }}</legend>
-      @for (option of options(); track option.value) {
-        <span data-formancy-part="radio-option">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRadioGroupField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyRadioGroupField, isStandalone: true, selector: "formancy-radio-group-field", usesInheritance: true, ngImport: i0, template: `
+    <fieldset
+      data-formancy-part="field"
+      [attr.data-formancy-field-path]="context.path"
+      [attr.data-state]="showError() ? 'invalid' : 'valid'"
+      [attr.aria-describedby]="control()['aria-describedby']"
+    >
+      <legend data-formancy-part="label">{{ context.label }}</legend>
+      @if (field.snapshot().required) {
+        <!-- A real element rather than the aria-required attribute, which
+             role=group does not support: assistive technology ignores it
+             there and an auditor reports it as invalid ARIA. The engine puts
+             this id into the group's aria-describedby, so it is announced
+             after the legend. Visible too, because WCAG 1.4.1. -->
+        <span data-formancy-part="required-hint" [id]="field.snapshot().ids.hint">required</span>
+      }
+      @for (option of options(); track option.value) {
+        <span data-formancy-part="radio-option">
+          <input
+            type="radio"
+            [id]="optionId(option)"
+            [attr.name]="control().name"
+            [value]="option.value"
+            [checked]="field.snapshot().value === option.value"
+            (change)="field.setValue(option.value)"
+            (blur)="field.touch()"
+          />
+          <label [attr.for]="optionId(option)">{{ option.label }}</label>
+        </span>
+      }
+      @if (showError()) {
+        <p data-formancy-part="error" [id]="field.snapshot().props.error.id">{{ errorText() }}</p>
+      }
+    </fieldset>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRadioGroupField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-radio-group-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <fieldset
+      data-formancy-part="field"
+      [attr.data-formancy-field-path]="context.path"
+      [attr.data-state]="showError() ? 'invalid' : 'valid'"
+      [attr.aria-describedby]="control()['aria-describedby']"
+    >
+      <legend data-formancy-part="label">{{ context.label }}</legend>
+      @if (field.snapshot().required) {
+        <!-- A real element rather than the aria-required attribute, which
+             role=group does not support: assistive technology ignores it
+             there and an auditor reports it as invalid ARIA. The engine puts
+             this id into the group's aria-describedby, so it is announced
+             after the legend. Visible too, because WCAG 1.4.1. -->
+        <span data-formancy-part="required-hint" [id]="field.snapshot().ids.hint">required</span>
+      }
+      @for (option of options(); track option.value) {
+        <span data-formancy-part="radio-option">
+          <input
+            type="radio"
+            [id]="optionId(option)"
+            [attr.name]="control().name"
+            [value]="option.value"
+            [checked]="field.snapshot().value === option.value"
+            (change)="field.setValue(option.value)"
+            (blur)="field.touch()"
+          />
+          <label [attr.for]="optionId(option)">{{ option.label }}</label>
+        </span>
+      }
+      @if (showError()) {
+        <p data-formancy-part="error" [id]="field.snapshot().props.error.id">{{ errorText() }}</p>
+      }
+    </fieldset>
+  `,
+                }]
+        }] });
+/**
+ * The built-in unstyled components. `null` means the type renders nothing here:
+ * hidden and static are non-inputs, and the container types are laid out by
+ * their own machinery, not by a leaf slot.
+ */
+/**
+ * Text the reader sees that collects nothing — a heading, an explanation, a
+ * notice.
+ *
+ * Not a label, because there is no control for one to label. Not a heading
+ * element either: the spec does not say what level it would be, and guessing
+ * produces a document outline that skips levels.
+ */
+class FormancyStaticField {
+    context = injectFieldContext();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyStaticField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyStaticField, isStandalone: true, selector: "formancy-static-field", ngImport: i0, template: `<p data-formancy-part="static">{{ context.label }}</p>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyStaticField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-static-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<p data-formancy-part="static">{{ context.label }}</p>`,
+                }]
+        }] });
+/**
+ * Several answers from a list, every option visible at once.
+ *
+ * A fieldset with a legend, exactly like the radio group, because the
+ * relationship is the same one: several controls answering a single question.
+ * What differs is only that more than one may be chosen.
+ *
+ * "At least one" is a property of the QUESTION, not of any one box, so it
+ * belongs to the group — but not as `aria-required`, which `role="group"`
+ * does not support and assistive technology therefore ignores. The group's
+ * description carries it instead. On every box it would announce each option
+ * as required, which is the opposite of what it means.
+ */
+class FormancySelectBoxesField extends FieldComponentBase {
+    showError = computed(() => {
+        const snapshot = this.field.snapshot();
+        return snapshot.touched && snapshot.errors.length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => this.field.snapshot().errors.join(', '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    chosen = computed(() => {
+        const value = this.field.snapshot().value;
+        return Array.isArray(value) ? value : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chosen" }] : /* istanbul ignore next */ []));
+    isChosen(value) {
+        return this.chosen().includes(value);
+    }
+    optionId(option) {
+        return `${this.field.snapshot().ids.control}:${option.value}`;
+    }
+    toggle(value, event) {
+        const on = event.target.checked;
+        // Rebuilt in the options' own order rather than the order they were
+        // ticked, so two people choosing the same answers store the same array and
+        // the React binding stores it identically.
+        const next = this.options()
+            .map((option) => option.value)
+            .filter((candidate) => (candidate === value ? on : this.isChosen(candidate)));
+        this.field.setValue(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancySelectBoxesField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancySelectBoxesField, isStandalone: true, selector: "formancy-select-boxes-field", usesInheritance: true, ngImport: i0, template: `
+    <fieldset
+      data-formancy-part="field"
+      [attr.data-formancy-field-path]="context.path"
+      [attr.data-state]="showError() ? 'invalid' : 'valid'"
+      [attr.aria-describedby]="control()['aria-describedby']"
+    >
+      <legend data-formancy-part="label">{{ context.label }}</legend>
+      @if (field.snapshot().required) {
+        <!-- A real element rather than the aria-required attribute, which
+             role=group does not support: assistive technology ignores it
+             there and an auditor reports it as invalid ARIA. The engine puts
+             this id into the group's aria-describedby, so it is announced
+             after the legend. Visible too, because WCAG 1.4.1. -->
+        <span data-formancy-part="required-hint" [id]="field.snapshot().ids.hint">required</span>
+      }
+      @for (option of options(); track option.value) {
+        <span data-formancy-part="checkbox-option">
+          <input
+            type="checkbox"
+            [id]="optionId(option)"
+            [attr.name]="control().name"
+            [value]="option.value"
+            [checked]="isChosen(option.value)"
+            [disabled]="field.snapshot().disabled"
+            (change)="toggle(option.value, $event)"
+            (blur)="field.touch()"
+          />
+          <label [attr.for]="optionId(option)">{{ option.label }}</label>
+        </span>
+      }
+      @if (showError()) {
+        <p data-formancy-part="error" [id]="field.snapshot().props.error.id">{{ errorText() }}</p>
+      }
+    </fieldset>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancySelectBoxesField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-select-boxes-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <fieldset
+      data-formancy-part="field"
+      [attr.data-formancy-field-path]="context.path"
+      [attr.data-state]="showError() ? 'invalid' : 'valid'"
+      [attr.aria-describedby]="control()['aria-describedby']"
+    >
+      <legend data-formancy-part="label">{{ context.label }}</legend>
+      @if (field.snapshot().required) {
+        <!-- A real element rather than the aria-required attribute, which
+             role=group does not support: assistive technology ignores it
+             there and an auditor reports it as invalid ARIA. The engine puts
+             this id into the group's aria-describedby, so it is announced
+             after the legend. Visible too, because WCAG 1.4.1. -->
+        <span data-formancy-part="required-hint" [id]="field.snapshot().ids.hint">required</span>
+      }
+      @for (option of options(); track option.value) {
+        <span data-formancy-part="checkbox-option">
+          <input
+            type="checkbox"
+            [id]="optionId(option)"
+            [attr.name]="control().name"
+            [value]="option.value"
+            [checked]="isChosen(option.value)"
+            [disabled]="field.snapshot().disabled"
+            (change)="toggle(option.value, $event)"
+            (blur)="field.touch()"
+          />
+          <label [attr.for]="optionId(option)">{{ option.label }}</label>
+        </span>
+      }
+      @if (showError()) {
+        <p data-formancy-part="error" [id]="field.snapshot().props.error.id">{{ errorText() }}</p>
+      }
+    </fieldset>
+  `,
+                }]
+        }] });
+/**
+ * Formatted text, written as the restricted markup the spec defines.
+ *
+ * **Two surfaces over one value.** By default a toolbar over a textarea, whose
+ * transformations live in `@formancy/spec` so a Bold button cannot mean one
+ * thing here and something else in React. When the host provides an editor
+ * factory, a contenteditable surface instead — which was refused in
+ * [0052](../../../docs/decisions/0052-richtext-is-not-html.md) and admitted in
+ * [0061](../../../docs/decisions/0061-tiptap-over-the-closed-grammar.md) once
+ * the reason was read properly: 0052's argument was against a string of HTML
+ * crossing the boundary, not against contenteditable, and a ProseMirror schema
+ * built from the grammar cannot produce markup the grammar has no way to store.
+ *
+ * The factory is the host's because ProseMirror is larger than this whole
+ * package and most forms have no rich-text field. Its absence is the default and
+ * costs only the WYSIWYG surface.
+ */
+class FormancyRichTextField extends FieldComponentBase {
+    text = computed(() => {
+        const value = this.field.snapshot().value;
+        return typeof value === 'string' ? value : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    active = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    commands = [
+        { command: 'strong', name: 'Bold', glyph: 'B' },
+        { command: 'emphasis', name: 'Italic', glyph: 'I' },
+        { command: 'link', name: 'Link', glyph: '↗' },
+        { command: 'bulletList', name: 'Bulleted list', glyph: '•' },
+        { command: 'orderedList', name: 'Numbered list', glyph: '1.' },
+    ];
+    box = viewChild('box', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "box" }] : /* istanbul ignore next */ []));
+    toolbarButtons = viewChildren('toolbarButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarButtons" }] : /* istanbul ignore next */ []));
+    make = injectRichTextEditorFactory();
+    editorHost = viewChild('editorHost', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorHost" }] : /* istanbul ignore next */ []));
+    handle;
+    /**
+     * Mount once, then feed.
+     *
+     * A contenteditable rebuilt when the value changes loses the caret, the
+     * selection and the undo stack, which is the difference between an editor and
+     * a box that fights you. So the effect mounts on its first run and afterwards
+     * only pushes a value that came from somewhere other than this editor —
+     * comparing first, because pushing back the change it just reported would move
+     * the caret to the end after every keystroke.
+     */
+    mounted = effect(() => {
+        const next = this.text();
+        const element = this.editorHost()?.nativeElement;
+        const make = this.make;
+        if (element === undefined || make === null)
+            return;
+        if (this.handle === undefined) {
+            this.handle = make({
+                element,
+                value: next,
+                onChange: (value) => {
+                    this.field.setValue(value);
+                },
+                editable: this.field.snapshot().disabled !== true,
+                attributes: this.editorAttributes(),
+            });
+            return;
+        }
+        if (this.handle.value() === next)
+            return;
+        // And never while the person is in the editor.
+        //
+        // Without this the editor reverts its own change. Pressing Bold updates the
+        // document, reports the new answer, and the signal re-runs this effect — but
+        // for one run `next` is still the answer from BEFORE the command. That run
+        // sees a difference, pushes the stale answer back, un-bolds the word and
+        // reports THAT. Observed in the playground: the stored value went to
+        // `**hello**` and back to `hello` on its own.
+        //
+        // A value arriving from elsewhere while somebody is typing is rare; losing
+        // what they just did is not recoverable. So the sync waits for them to leave,
+        // and the comparison above catches it then.
+        if (element.contains(document.activeElement))
+            return;
+        this.handle.setValue(next);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mounted" }] : /* istanbul ignore next */ []));
+    cleanup = inject(DestroyRef).onDestroy(() => {
+        // ProseMirror holds DOM listeners and a plugin state. One left per mounted
+        // form is a leak that only shows up in a long-lived admin app.
+        this.handle?.destroy();
+        this.handle = undefined;
+    });
+    /**
+     * The engine's wiring, passed to the surface rather than invented on it.
+     *
+     * Byte-identical to what the React binding passes, which is the point: the ids
+     * and the describedby composition are computed once in `@formancy/core`, and a
+     * renderer that assembled its own would be the implementation that drifts.
+     * `aria-labelledby` rather than a `<label for>` because the surface is a div,
+     * and `for` does not reach one.
+     */
+    editorAttributes() {
+        const control = this.control();
+        const props = this.field.snapshot().props;
+        const attributes = {
+            id: control.id,
+            'aria-labelledby': props.label.id,
+            // The editing surface is a CHILD of the mount point, so it is the element
+            // a theme has to style. Named here rather than left as the editor
+            // library's own class, so a theme is not coupled to TipTap.
+            'data-formancy-part': 'richtext-surface',
+        };
+        const describedby = control['aria-describedby'];
+        if (describedby !== undefined)
+            attributes['aria-describedby'] = describedby;
+        if (control['aria-invalid'] !== undefined)
+            attributes['aria-invalid'] = 'true';
+        if (control['aria-required'] !== undefined)
+            attributes['aria-required'] = 'true';
+        return attributes;
+    }
+    /** Named with the field: a form may have several of these, and "toolbar"
+     *  five times says nothing about which question is being answered. */
+    toolbarLabel() {
+        const label = this.context.label;
+        return typeof label === 'string' ? `Formatting for ${label}` : 'Formatting';
+    }
+    press(command) {
+        if (command === 'link') {
+            // A prompt rather than a dialog this package would then own the
+            // accessibility of. A host wanting its own replaces the field through
+            // the component registry.
+            const href = window.prompt('Address for the link');
+            if (href === null || href === '')
+                return;
+            this.run(command, href);
+            return;
+        }
+        this.run(command);
+    }
+    onKey(event) {
+        if (!(event.ctrlKey || event.metaKey))
+            return;
+        const key = event.key.toLowerCase();
+        const command = key === 'b' ? 'strong' : key === 'i' ? 'emphasis' : undefined;
+        if (command === undefined)
+            return;
+        event.preventDefault();
+        this.run(command);
+    }
+    onToolbarKey(event) {
+        const last = this.commands.length - 1;
+        const to = event.key === 'ArrowRight'
+            ? this.active() + 1
+            : event.key === 'ArrowLeft'
+                ? this.active() - 1
+                : event.key === 'Home'
+                    ? 0
+                    : event.key === 'End'
+                        ? last
+                        : undefined;
+        if (to === undefined)
+            return;
+        event.preventDefault();
+        const index = (to + this.commands.length) % this.commands.length;
+        this.active.set(index);
+        this.toolbarButtons()[index]?.nativeElement.focus();
+    }
+    run(command, href) {
+        // With a WYSIWYG surface mounted the markers are not what somebody
+        // typed, so inserting them would put literal asterisks into their
+        // answer. The command goes to the editor instead.
+        if (this.handle !== undefined) {
+            this.handle.run(command, href);
+            return;
+        }
+        const element = this.box()?.nativeElement;
+        if (element === undefined)
+            return;
+        const next = applyRichCommand(command, { value: this.text(), start: element.selectionStart, end: element.selectionEnd }, href === undefined ? {} : { href });
+        this.field.setValue(next.value);
+        // After the signal has been written through to the DOM. An editor that
+        // drops the caret to the end after every button is one nobody can use for
+        // a second word.
+        requestAnimationFrame(() => {
+            element.focus();
+            element.setSelectionRange(next.start, next.end);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRichTextField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyRichTextField, isStandalone: true, selector: "formancy-rich-text-field", viewQueries: [{ propertyName: "box", first: true, predicate: ["box"], descendants: true, isSignal: true }, { propertyName: "toolbarButtons", predicate: ["toolbarButton"], descendants: true, isSignal: true }, { propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+      @if (make !== null) {
+        <!-- The toolbar stays. An editor library brings keyboard shortcuts and
+             no toolbar UI, so leaving ours out left Bold reachable by Ctrl+B and
+             by no visible control. One toolbar drives either surface, over the
+             same RichCommand values. The preview does go: the surface IS the
+             preview, which is the whole reason somebody wanted it. -->
+        <div
+          role="toolbar"
+          [attr.aria-label]="toolbarLabel()"
+          data-formancy-part="richtext-toolbar"
+          (keydown)="onToolbarKey($event)"
+        >
+          @for (entry of commands; track entry.command; let i = $index) {
+            <button
+              type="button"
+              #toolbarButton
+              [disabled]="field.snapshot().disabled"
+              [attr.tabindex]="i === active() ? 0 : -1"
+              data-formancy-part="richtext-button"
+              (focus)="active.set(i)"
+              (click)="press(entry.command)"
+            >
+              <span aria-hidden="true">{{ entry.glyph }}</span>
+              <span data-formancy-part="visually-hidden">{{ entry.name }}</span>
+            </button>
+          }
+        </div>
+        <div #editorHost data-formancy-part="richtext-editor" (blur)="field.touch()"></div>
+      } @else {
+      <!-- The ARIA toolbar pattern: ONE tab stop for the row, arrows within
+           it. Five buttons that each took a tab press would put five stops
+           between a keyboard user and the box they came to type in. -->
+      <div
+        role="toolbar"
+        [attr.aria-label]="toolbarLabel()"
+        data-formancy-part="richtext-toolbar"
+        (keydown)="onToolbarKey($event)"
+      >
+        @for (entry of commands; track entry.command; let i = $index) {
+          <button
+            type="button"
+            #toolbarButton
+            [disabled]="field.snapshot().disabled"
+            [attr.tabindex]="i === active() ? 0 : -1"
+            data-formancy-part="richtext-button"
+            (focus)="active.set(i)"
+            (click)="press(entry.command)"
+          >
+            <span aria-hidden="true">{{ entry.glyph }}</span>
+            <span data-formancy-part="visually-hidden">{{ entry.name }}</span>
+          </button>
+        }
+      </div>
+      <textarea
+        #box
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [disabled]="field.snapshot().disabled"
+        rows="5"
+        [value]="text()"
+        (keydown)="onKey($event)"
+        (input)="field.setValue($any($event.target).value)"
+        (blur)="field.touch()"
+      ></textarea>
+      <div data-formancy-part="richtext-preview">
+        <formancy-rich-text [source]="text()" />
+      </div>
+      }
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }, { kind: "component", type: FormancyRichText, selector: "formancy-rich-text", inputs: ["source"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRichTextField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-rich-text-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell, FormancyRichText],
+                    template: `
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+      @if (make !== null) {
+        <!-- The toolbar stays. An editor library brings keyboard shortcuts and
+             no toolbar UI, so leaving ours out left Bold reachable by Ctrl+B and
+             by no visible control. One toolbar drives either surface, over the
+             same RichCommand values. The preview does go: the surface IS the
+             preview, which is the whole reason somebody wanted it. -->
+        <div
+          role="toolbar"
+          [attr.aria-label]="toolbarLabel()"
+          data-formancy-part="richtext-toolbar"
+          (keydown)="onToolbarKey($event)"
+        >
+          @for (entry of commands; track entry.command; let i = $index) {
+            <button
+              type="button"
+              #toolbarButton
+              [disabled]="field.snapshot().disabled"
+              [attr.tabindex]="i === active() ? 0 : -1"
+              data-formancy-part="richtext-button"
+              (focus)="active.set(i)"
+              (click)="press(entry.command)"
+            >
+              <span aria-hidden="true">{{ entry.glyph }}</span>
+              <span data-formancy-part="visually-hidden">{{ entry.name }}</span>
+            </button>
+          }
+        </div>
+        <div #editorHost data-formancy-part="richtext-editor" (blur)="field.touch()"></div>
+      } @else {
+      <!-- The ARIA toolbar pattern: ONE tab stop for the row, arrows within
+           it. Five buttons that each took a tab press would put five stops
+           between a keyboard user and the box they came to type in. -->
+      <div
+        role="toolbar"
+        [attr.aria-label]="toolbarLabel()"
+        data-formancy-part="richtext-toolbar"
+        (keydown)="onToolbarKey($event)"
+      >
+        @for (entry of commands; track entry.command; let i = $index) {
+          <button
+            type="button"
+            #toolbarButton
+            [disabled]="field.snapshot().disabled"
+            [attr.tabindex]="i === active() ? 0 : -1"
+            data-formancy-part="richtext-button"
+            (focus)="active.set(i)"
+            (click)="press(entry.command)"
+          >
+            <span aria-hidden="true">{{ entry.glyph }}</span>
+            <span data-formancy-part="visually-hidden">{{ entry.name }}</span>
+          </button>
+        }
+      </div>
+      <textarea
+        #box
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [disabled]="field.snapshot().disabled"
+        rows="5"
+        [value]="text()"
+        (keydown)="onKey($event)"
+        (input)="field.setValue($any($event.target).value)"
+        (blur)="field.touch()"
+      ></textarea>
+      <div data-formancy-part="richtext-preview">
+        <formancy-rich-text [source]="text()" />
+      </div>
+      }
+    </formancy-field-shell>
+  `,
+                }]
+        }], propDecorators: { box: [{ type: i0.ViewChild, args: ['box', { isSignal: true }] }], toolbarButtons: [{ type: i0.ViewChildren, args: ['toolbarButton', { isSignal: true }] }], editorHost: [{ type: i0.ViewChild, args: ['editorHost', { isSignal: true }] }] } });
+/**
+ * Attached files.
+ *
+ * The control picks files; an injected uploader puts them somewhere and
+ * reports what was stored. Without one the field is read-only and says so,
+ * rather than accepting a file it has nowhere to put.
+ */
+class FormancyFileField extends FieldComponentBase {
+    upload = injectUploader();
+    over = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "over" }] : /* istanbul ignore next */ []));
+    /** Attachments taken out of the answer but not yet forgotten, with where
+     *  they came from so undoing restores the order as well as the file. */
+    removed = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removed" }] : /* istanbul ignore next */ []));
+    onDragOver(event) {
+        // Without preventDefault the browser navigates to the file instead of
+        // letting the page have it, which looks like the form vanishing.
+        event.preventDefault();
+        if (this.field.snapshot().disabled || this.busy())
+            return;
+        this.over.set(true);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.over.set(false);
+        if (this.field.snapshot().disabled || this.busy())
+            return;
+        const dropped = event.dataTransfer?.files;
+        if (dropped === undefined || dropped.length === 0)
+            return;
+        void this.store(Array.from(dropped));
+    }
+    undo(id) {
+        const entry = this.removed().find((other) => other.file.id === id);
+        if (entry === undefined)
+            return;
+        this.removed.update((before) => before.filter((other) => other.file.id !== id));
+        const next = [...this.files()];
+        next.splice(Math.min(entry.at, next.length), 0, entry.file);
+        this.field.setValue(next);
+    }
+    busy = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    failure = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "failure" }] : /* istanbul ignore next */ []));
+    files = computed(() => {
+        const value = this.field.snapshot().value;
+        return Array.isArray(value) ? value : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    status = computed(() => (this.busy() ? 'Uploading…' : (this.failure() ?? '')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    acceptAttribute() {
+        const accept = this.field.snapshot().def.accept;
+        return accept === undefined || accept.length === 0 ? null : accept.join(',');
+    }
+    multiple() {
+        const max = this.field.snapshot().def.maxItems;
+        return max === undefined || max > 1;
+    }
+    remove(id) {
+        const at = this.files().findIndex((file) => file.id === id);
+        const going = this.files()[at];
+        if (going === undefined)
+            return;
+        // Out of the answer immediately, so a submit in between is correct, and
+        // remembered with its position so undoing puts it BACK where it was rather
+        // than on the end — the order matters to somebody who numbered their
+        // attachments in a covering note.
+        this.removed.update((before) => [...before, { at, file: going }]);
+        this.field.setValue(this.files().filter((file) => file.id !== id));
+    }
+    pick(event) {
+        const input = event.target;
+        const picked = input.files;
+        if (picked === null || picked.length === 0 || this.upload === null)
+            return;
+        void this.store(Array.from(picked)).finally(() => {
+            input.value = '';
+        });
+    }
+    async store(picked) {
+        this.busy.set(true);
+        this.failure.set(undefined);
+        // Each file succeeds or fails on its own.
+        //
+        // The first version collected them into an array and set the value once, so
+        // a throw on the third of five discarded the two that had ALREADY uploaded:
+        // their bytes were in storage, the submission never mentioned them, the
+        // collector reclaimed them within the day, and the person was told the
+        // upload failed when half of it had not. Whose fault the failure is does not
+        // change who loses the file. The React binding does exactly the same thing.
+        const uploaded = [];
+        const refused = [];
+        for (const file of picked) {
+            try {
+                uploaded.push(await this.upload(file));
+            }
+            catch (error) {
+                refused.push(`${file.name} (${error instanceof Error ? error.message : String(error)})`);
+            }
+        }
+        // Recorded before the failure is reported, so nothing that reached storage
+        // is left unclaimed while somebody reads the message.
+        if (uploaded.length > 0)
+            this.field.setValue([...this.files(), ...uploaded]);
+        if (refused.length > 0) {
+            // Named, because "the upload failed" over a list of five attachments does
+            // not say which one to try again.
+            this.failure.set(refused.length === 1
+                ? `${refused[0]} was not attached.`
+                : `${String(refused.length)} files were not attached: ${refused.join(', ')}.`);
+        }
+        this.busy.set(false);
+        this.field.touch();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyFileField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyFileField, isStandalone: true, selector: "formancy-file-field", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+      @if (upload === null) {
+        <p data-formancy-part="file-unavailable">
+          This form cannot accept files here, because no upload destination has been configured.
+        </p>
+      } @else {
+        <!--
+          The picker inside a drop target, not instead of one.
+
+          Dropping is a pointer gesture with no keyboard equivalent, so it can
+          only ever be a SECOND route (WCAG 2.1.1). The input stays exactly as it
+          was and keeps the field's label and ARIA wiring; the region around it
+          accepts a drop and hands the files to the same function. Two routes,
+          one implementation, the same as the React binding.
+        -->
+        <div
+          data-formancy-part="file-dropzone"
+          [attr.data-state]="over() ? 'over' : null"
+          (dragover)="onDragOver($event)"
+          (dragleave)="over.set(false)"
+          (drop)="onDrop($event)"
+        >
           <input
-            type="radio"
-            [id]="optionId(option)"
+            type="file"
+            [id]="control().id"
             [attr.name]="control().name"
-            [value]="option.value"
-            [checked]="field.snapshot().value === option.value"
-            (change)="field.setValue(option.value)"
-            (blur)="field.touch()"
+            [attr.aria-describedby]="control()['aria-describedby']"
+            [attr.accept]="acceptAttribute()"
+            [attr.multiple]="multiple() ? '' : null"
+            [disabled]="field.snapshot().disabled || busy()"
+            (change)="pick($event)"
           />
-          <label [attr.for]="optionId(option)">{{ option.label }}</label>
-        </span>
+        </div>
       }
-      @if (showError()) {
-        <p data-formancy-part="error" [id]="field.snapshot().props.error.id">{{ errorText() }}</p>
+
+      @if (files().length > 0 || removed().length > 0) {
+        <ul data-formancy-part="file-list">
+          @for (file of files(); track file.id) {
+            <li data-formancy-part="file-item">
+              <span>{{ file.name }}</span>
+              <button
+                type="button"
+                [disabled]="field.snapshot().disabled"
+                (click)="remove(file.id)"
+              >
+                <!-- Named with the file, so a screen reader user hears which
+                     attachment a button removes rather than "remove" six
+                     times over. -->
+                Remove {{ file.name }}
+              </button>
+            </li>
+          }
+
+          <!--
+            A removed attachment stays visible with a way back. The bytes are
+            still in storage until the unclaimed collector runs, so the removal
+            is recoverable for free, and a misclick on the wrong row of six is
+            the ordinary way somebody loses the evidence they came to attach.
+          -->
+          @for (entry of removed(); track entry.file.id) {
+            <li data-formancy-part="file-item" data-state="removed">
+              <span>{{ entry.file.name }}</span>
+              <button
+                type="button"
+                [disabled]="field.snapshot().disabled"
+                (click)="undo(entry.file.id)"
+              >
+                Undo removing {{ entry.file.name }}
+              </button>
+            </li>
+          }
+        </ul>
       }
-    </fieldset>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+
+      <!-- One polite region per field for the upload itself: the form's error
+           region belongs to validation, and a failed upload is not one. -->
+      <p role="status" data-formancy-part="file-status">{{ status() }}</p>
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label", "path"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRadioGroupField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyFileField, decorators: [{
             type: Component,
             args: [{
-                    selector: 'formancy-radio-group-field',
+                    selector: 'formancy-file-field',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell],
                     template: `
-    <fieldset
-      data-formancy-part="field"
-      [attr.data-state]="showError() ? 'invalid' : 'valid'"
-      [attr.aria-describedby]="control()['aria-describedby']"
-    >
-      <legend data-formancy-part="label">{{ context.label }}</legend>
-      @for (option of options(); track option.value) {
-        <span data-formancy-part="radio-option">
+    <formancy-field-shell [field]="field" [label]="context.label" [path]="context.path">
+      @if (upload === null) {
+        <p data-formancy-part="file-unavailable">
+          This form cannot accept files here, because no upload destination has been configured.
+        </p>
+      } @else {
+        <!--
+          The picker inside a drop target, not instead of one.
+
+          Dropping is a pointer gesture with no keyboard equivalent, so it can
+          only ever be a SECOND route (WCAG 2.1.1). The input stays exactly as it
+          was and keeps the field's label and ARIA wiring; the region around it
+          accepts a drop and hands the files to the same function. Two routes,
+          one implementation, the same as the React binding.
+        -->
+        <div
+          data-formancy-part="file-dropzone"
+          [attr.data-state]="over() ? 'over' : null"
+          (dragover)="onDragOver($event)"
+          (dragleave)="over.set(false)"
+          (drop)="onDrop($event)"
+        >
           <input
-            type="radio"
-            [id]="optionId(option)"
+            type="file"
+            [id]="control().id"
             [attr.name]="control().name"
-            [value]="option.value"
-            [checked]="field.snapshot().value === option.value"
-            (change)="field.setValue(option.value)"
-            (blur)="field.touch()"
+            [attr.aria-describedby]="control()['aria-describedby']"
+            [attr.accept]="acceptAttribute()"
+            [attr.multiple]="multiple() ? '' : null"
+            [disabled]="field.snapshot().disabled || busy()"
+            (change)="pick($event)"
           />
-          <label [attr.for]="optionId(option)">{{ option.label }}</label>
-        </span>
+        </div>
       }
-      @if (showError()) {
-        <p data-formancy-part="error" [id]="field.snapshot().props.error.id">{{ errorText() }}</p>
+
+      @if (files().length > 0 || removed().length > 0) {
+        <ul data-formancy-part="file-list">
+          @for (file of files(); track file.id) {
+            <li data-formancy-part="file-item">
+              <span>{{ file.name }}</span>
+              <button
+                type="button"
+                [disabled]="field.snapshot().disabled"
+                (click)="remove(file.id)"
+              >
+                <!-- Named with the file, so a screen reader user hears which
+                     attachment a button removes rather than "remove" six
+                     times over. -->
+                Remove {{ file.name }}
+              </button>
+            </li>
+          }
+
+          <!--
+            A removed attachment stays visible with a way back. The bytes are
+            still in storage until the unclaimed collector runs, so the removal
+            is recoverable for free, and a misclick on the wrong row of six is
+            the ordinary way somebody loses the evidence they came to attach.
+          -->
+          @for (entry of removed(); track entry.file.id) {
+            <li data-formancy-part="file-item" data-state="removed">
+              <span>{{ entry.file.name }}</span>
+              <button
+                type="button"
+                [disabled]="field.snapshot().disabled"
+                (click)="undo(entry.file.id)"
+              >
+                Undo removing {{ entry.file.name }}
+              </button>
+            </li>
+          }
+        </ul>
       }
-    </fieldset>
+
+      <!-- One polite region per field for the upload itself: the form's error
+           region belongs to validation, and a failed upload is not one. -->
+      <p role="status" data-formancy-part="file-status">{{ status() }}</p>
+    </formancy-field-shell>
   `,
                 }]
         }] });
-/**
- * The built-in unstyled components. `null` means the type renders nothing here:
- * hidden and static are non-inputs, and the container types are laid out by
- * their own machinery, not by a leaf slot.
- */
 const DEFAULT_FIELD_COMPONENTS = {
     text: FormancyTextField,
     textarea: FormancyTextareaField,
     number: FormancyNumberField,
     checkbox: FormancyCheckboxField,
     date: FormancyDateField,
+    time: FormancyTimeField,
+    datetime: FormancyDateTimeField,
     select: FormancySelectField,
     radio: FormancyRadioGroupField,
+    selectboxes: FormancySelectBoxesField,
+    file: FormancyFileField,
+    richtext: FormancyRichTextField,
     hidden: null,
-    static: null,
+    static: FormancyStaticField,
     group: null,
     page: null,
     repeater: null,
@@ -725,10 +2771,80 @@ class FormancyRepeaterSection {
     ...(ngDevMode ? [{ debugName: "wire" }] : /* istanbul ignore next */ []));
     labels = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    /** The repeater's own definition, kept because the column plan reads `widget`,
+     *  `columns` and the child labels off it on every render. */
+    definition;
     state;
+    /**
+     * The columns the grid shows, in the order it shows them, or an empty list when the
+     * widget was not asked for.
+     *
+     * `columns` without the widget stays inert on purpose: 0066 lets an author write the
+     * arrangement before a renderer honours it, and a repeater that silently became a grid
+     * because somebody sized its columns would be the opposite of that.
+     *
+     * The React binding computes the same list with the same helper, for the same reasons.
+     */
+    plan = computed(() => {
+        const def = this.definition;
+        if (def?.widget !== 'datagrid')
+            return [];
+        return datagridColumns(def, def.columns ?? []).map((entry) => ({
+            key: entry.key,
+            // The author's shortening, else the child's own label, else the labels input,
+            // else the key. Visible text and NOTHING else -- never an id target and never an
+            // aria-label, because a heading that named the answers beneath it is the failure
+            // 0066 separates `header` from `label` to prevent.
+            heading: this.engine.text(entry.column?.header) ??
+                this.engine.text(entry.child?.label) ??
+                this.fallbackFor(`${this.wire()}[0].${entry.key}`) ??
+                entry.key,
+            align: entry.column?.align ?? null,
+            ...(entry.column?.width === undefined ? {} : { width: entry.column.width }),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plan" }] : /* istanbul ignore next */ []));
+    /**
+     * The authored ratios, as ONE custom property rather than as `grid-template-columns`.
+     *
+     * A property lays nothing out by itself, so a theme's narrow-screen media query
+     * replaces its own declaration and wins rather than losing to an inline one it cannot
+     * outrank. It also carries a value space no attribute could enumerate: `width` is a
+     * number with `exclusiveMinimum: 0`, so 1.5 is legal and nothing bounds it from above.
+     *
+     * Nothing at all when no column was sized, so the theme's fallback is live code.
+     */
+    trackStyle() {
+        const plan = this.plan();
+        if (!plan.some((entry) => entry.width !== undefined))
+            return {};
+        return {
+            '--fm-datagrid-columns': plan
+                .map((entry) => (entry.width === undefined ? '1fr' : `${String(entry.width)}fr`))
+                .join(' '),
+        };
+    }
+    /**
+     * The controls in one cell: every leaf inside the row that belongs to that column's
+     * child field.
+     *
+     * One child, because a grid's rows are FLAT: a child holding fields of its own is
+     * refused when the document is saved (0078). This walked the whole subtree under the
+     * child while a group could be a column, and every clause that made that walk safe is
+     * gone with the arrangement it served.
+     *
+     * Still a filter over the children that EXIST rather than the wire the column implies,
+     * so a document nobody validated renders an empty cell rather than a field the engine
+     * does not have.
+     */
+    cellChildren(row, key) {
+        const wanted = `${this.wire()}[${String(row.index)}].${key}`;
+        return row.children.filter((child) => child.wire === wanted);
+    }
     ngOnInit() {
         const wire = this.wire();
         const def = this.engine.repeaters().find((candidate) => candidate.wire === wire)?.def;
+        this.definition = def;
         const label = this.engine.text(def?.label) ?? this.labels()?.[wire] ?? wire;
         const minItems = def?.minItems ?? 0;
         const repeater = runInInjectionContext(this.injector, () => {
@@ -754,7 +2870,13 @@ class FormancyRepeaterSection {
                 // it, and tracking by index would make Angular reuse the wrong DOM
                 // nodes — moving focus and animating the wrong element.
                 id: repeater.rowIds()[index] ?? String(index),
-                wires: this.engine.fieldPaths().filter((candidate) => candidate.startsWith(`${wire}[${index}]`)),
+                children: this.engine
+                    .fieldPaths()
+                    .filter((candidate) => candidate.startsWith(`${wire}[${index}]`))
+                    .map((candidate) => ({
+                    key: candidate.slice(`${wire}[${index}]`.length),
+                    wire: candidate,
+                })),
             }))),
         };
     }
@@ -767,40 +2889,202 @@ class FormancyRepeaterSection {
     @if (state; as s) {
       <fieldset data-formancy-part="repeater">
         <legend data-formancy-part="repeater-legend">{{ s.label }}</legend>
-        @for (row of s.rows(); track row.id) {
-          <div data-formancy-part="row">
-            @for (instanceWire of row.wires; track instanceWire) {
-              <formancy-field [path]="instanceWire" [fallbackLabel]="fallbackFor(instanceWire)" />
+        <!-- The buttons a row carries, written once and used by both arrangements.
+             Each one's text sits in its own element so a THEME can clip it and draw a
+             mark instead, which is what a grid wants: "Remove recipient 1 of 1" on
+             three wrapped lines took more room than the answers beside it. Clipped and
+             never removed -- display: none and visibility: hidden both compute the
+             button's name to the empty string, and a button called nothing is worse
+             than a wide one. The renderer draws no mark of its own, because an icon is
+             appearance and appearance belongs to the consumer.
+             Their NAMES are identical in each, because 0068 put the row's position in
+             them and a grid does not change where a person is. -->
+        <ng-template #rowButtons let-row let-count="count">
+          <!-- Position context in the NAME, so a screen-reader user knows
+               which row this button kills without walking the tree. -->
+          <button type="button" data-formancy-part="row-remove" (click)="state!.repeater.removeRow(row.index)"><span data-formancy-part="row-action-text">{{ state!.removeLabel }} {{ row.index + 1 }} of {{ count }}</span></button>
+          <!-- Reordering by button, which is the KEYBOARD route and therefore the
+               primary one: WCAG 2.5.7 requires a non-drag equivalent for any drag,
+               so a drag affordance can only ever be a second route to these.
+               Absent at the ends rather than disabled: a disabled button is still in
+               the tab order in some browsers and announces a control that does
+               nothing. -->
+          @if (row.index > 0) {
+            <button type="button" data-formancy-part="row-up" (click)="state!.repeater.moveRow(row.index, row.index - 1)"><span data-formancy-part="row-action-text">Move {{ state!.label }} {{ row.index + 1 }} of {{ count }} up</span></button>
+          }
+          @if (row.index < count - 1) {
+            <button type="button" data-formancy-part="row-down" (click)="state!.repeater.moveRow(row.index, row.index + 1)"><span data-formancy-part="row-action-text">Move {{ state!.label }} {{ row.index + 1 }} of {{ count }} down</span></button>
+          }
+        </ng-template>
+
+        @if (plan().length > 0) {
+          <!-- A container inside the fieldset rather than the fieldset itself, so the
+               legend and the Add button do not become grid items.
+
+               No role anywhere in here, and that is the decision rather than an
+               omission. role="grid" would take the arrow keys, which the controls in
+               the cells already own -- a select with widget: "typeahead" is legal in a
+               row and claims Up, Down, Home, End, Enter and Escape -- and it would
+               replace twenty tab stops with one. A role is not paint, which is the
+               line 0065 draws. -->
+          <div data-formancy-part="datagrid" [attr.data-columns]="plan().length" [style]="trackStyle()">
+            <!-- Only once there is a row to head, and plain static text. A heading here
+                 names nothing, so a theme may delete it at phone width without changing
+                 what any control announces -- which is what makes the narrow-screen
+                 reflow possible at all. -->
+            @if (s.rows().length > 0) {
+              <div data-formancy-part="datagrid-head">
+                @for (entry of plan(); track entry.key) {
+                  <span data-formancy-part="datagrid-heading" [attr.data-align]="entry.align">{{ entry.heading }}</span>
+                }
+              </div>
+            }
+            @for (row of s.rows(); track row.id) {
+              <div data-formancy-part="datagrid-row">
+                @for (entry of plan(); track entry.key) {
+                  <!-- Always emitted, even when every field in it renders nothing. A
+                       rule that hides one answer must not shift that row's remaining
+                       columns out of line with the heading strip and with every other
+                       row, which is the whole reason this arrangement exists. -->
+                  <div data-formancy-part="datagrid-cell" [attr.data-align]="entry.align">
+                    @for (child of cellChildren(row, entry.key); track child.wire) {
+                      <formancy-field [path]="child.wire" [fallbackLabel]="fallbackFor(child.wire)" />
+                    }
+                  </div>
+                }
+                <!-- One cell for all of a row's buttons, because there are two on the
+                     first and last rows and three in between. A track whose cell count
+                     varied per row is exactly what a table cannot express without a
+                     cell that announces a blank. -->
+                <div data-formancy-part="datagrid-actions">
+                  <ng-container *ngTemplateOutlet="rowButtons; context: { $implicit: row, count: s.rows().length }" />
+                </div>
+              </div>
             }
-            <!-- Position context in the NAME, so a screen-reader user knows
-                 which row this button kills without walking the tree. -->
-            <button type="button" (click)="s.repeater.removeRow(row.index)">{{ s.removeLabel }} {{ row.index + 1 }} of {{ s.rows().length }}</button>
           </div>
+        } @else {
+          @for (row of s.rows(); track row.id) {
+            <div data-formancy-part="row">
+              <!-- Tracked by the POSITIONAL WIRE, which recreates every control in a
+                   row whenever the row moves, so focus is lost on a reorder.
+                   Deliberate, and the obstacle is named so the next attempt starts from
+                   it: tracking by the field's key instead would let Angular reuse the
+                   component, and this component reads its path once in ngOnInit and
+                   never rebinds -- so after a removal it would keep the old wire and
+                   show the wrong row's answer. A conformance fixture caught exactly
+                   that. Reactive path binding has to come first. -->
+              @for (child of row.children; track child.wire) {
+                <formancy-field [path]="child.wire" [fallbackLabel]="fallbackFor(child.wire)" />
+              }
+              <ng-container *ngTemplateOutlet="rowButtons; context: { $implicit: row, count: s.rows().length }" />
+            </div>
+          }
         }
         <button type="button" (click)="s.repeater.addRow()">{{ s.addLabel }}</button>
       </fieldset>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldSlot, selector: "formancy-field", inputs: ["path", "fallbackLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormancyFieldSlot, selector: "formancy-field", inputs: ["path", "fallbackLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRepeaterSection, decorators: [{
             type: Component,
             args: [{
                     selector: 'formancy-repeater',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormancyFieldSlot],
+                    imports: [NgTemplateOutlet, FormancyFieldSlot],
                     template: `
     @if (state; as s) {
       <fieldset data-formancy-part="repeater">
         <legend data-formancy-part="repeater-legend">{{ s.label }}</legend>
-        @for (row of s.rows(); track row.id) {
-          <div data-formancy-part="row">
-            @for (instanceWire of row.wires; track instanceWire) {
-              <formancy-field [path]="instanceWire" [fallbackLabel]="fallbackFor(instanceWire)" />
+        <!-- The buttons a row carries, written once and used by both arrangements.
+             Each one's text sits in its own element so a THEME can clip it and draw a
+             mark instead, which is what a grid wants: "Remove recipient 1 of 1" on
+             three wrapped lines took more room than the answers beside it. Clipped and
+             never removed -- display: none and visibility: hidden both compute the
+             button's name to the empty string, and a button called nothing is worse
+             than a wide one. The renderer draws no mark of its own, because an icon is
+             appearance and appearance belongs to the consumer.
+             Their NAMES are identical in each, because 0068 put the row's position in
+             them and a grid does not change where a person is. -->
+        <ng-template #rowButtons let-row let-count="count">
+          <!-- Position context in the NAME, so a screen-reader user knows
+               which row this button kills without walking the tree. -->
+          <button type="button" data-formancy-part="row-remove" (click)="state!.repeater.removeRow(row.index)"><span data-formancy-part="row-action-text">{{ state!.removeLabel }} {{ row.index + 1 }} of {{ count }}</span></button>
+          <!-- Reordering by button, which is the KEYBOARD route and therefore the
+               primary one: WCAG 2.5.7 requires a non-drag equivalent for any drag,
+               so a drag affordance can only ever be a second route to these.
+               Absent at the ends rather than disabled: a disabled button is still in
+               the tab order in some browsers and announces a control that does
+               nothing. -->
+          @if (row.index > 0) {
+            <button type="button" data-formancy-part="row-up" (click)="state!.repeater.moveRow(row.index, row.index - 1)"><span data-formancy-part="row-action-text">Move {{ state!.label }} {{ row.index + 1 }} of {{ count }} up</span></button>
+          }
+          @if (row.index < count - 1) {
+            <button type="button" data-formancy-part="row-down" (click)="state!.repeater.moveRow(row.index, row.index + 1)"><span data-formancy-part="row-action-text">Move {{ state!.label }} {{ row.index + 1 }} of {{ count }} down</span></button>
+          }
+        </ng-template>
+
+        @if (plan().length > 0) {
+          <!-- A container inside the fieldset rather than the fieldset itself, so the
+               legend and the Add button do not become grid items.
+
+               No role anywhere in here, and that is the decision rather than an
+               omission. role="grid" would take the arrow keys, which the controls in
+               the cells already own -- a select with widget: "typeahead" is legal in a
+               row and claims Up, Down, Home, End, Enter and Escape -- and it would
+               replace twenty tab stops with one. A role is not paint, which is the
+               line 0065 draws. -->
+          <div data-formancy-part="datagrid" [attr.data-columns]="plan().length" [style]="trackStyle()">
+            <!-- Only once there is a row to head, and plain static text. A heading here
+                 names nothing, so a theme may delete it at phone width without changing
+                 what any control announces -- which is what makes the narrow-screen
+                 reflow possible at all. -->
+            @if (s.rows().length > 0) {
+              <div data-formancy-part="datagrid-head">
+                @for (entry of plan(); track entry.key) {
+                  <span data-formancy-part="datagrid-heading" [attr.data-align]="entry.align">{{ entry.heading }}</span>
+                }
+              </div>
+            }
+            @for (row of s.rows(); track row.id) {
+              <div data-formancy-part="datagrid-row">
+                @for (entry of plan(); track entry.key) {
+                  <!-- Always emitted, even when every field in it renders nothing. A
+                       rule that hides one answer must not shift that row's remaining
+                       columns out of line with the heading strip and with every other
+                       row, which is the whole reason this arrangement exists. -->
+                  <div data-formancy-part="datagrid-cell" [attr.data-align]="entry.align">
+                    @for (child of cellChildren(row, entry.key); track child.wire) {
+                      <formancy-field [path]="child.wire" [fallbackLabel]="fallbackFor(child.wire)" />
+                    }
+                  </div>
+                }
+                <!-- One cell for all of a row's buttons, because there are two on the
+                     first and last rows and three in between. A track whose cell count
+                     varied per row is exactly what a table cannot express without a
+                     cell that announces a blank. -->
+                <div data-formancy-part="datagrid-actions">
+                  <ng-container *ngTemplateOutlet="rowButtons; context: { $implicit: row, count: s.rows().length }" />
+                </div>
+              </div>
             }
-            <!-- Position context in the NAME, so a screen-reader user knows
-                 which row this button kills without walking the tree. -->
-            <button type="button" (click)="s.repeater.removeRow(row.index)">{{ s.removeLabel }} {{ row.index + 1 }} of {{ s.rows().length }}</button>
           </div>
+        } @else {
+          @for (row of s.rows(); track row.id) {
+            <div data-formancy-part="row">
+              <!-- Tracked by the POSITIONAL WIRE, which recreates every control in a
+                   row whenever the row moves, so focus is lost on a reorder.
+                   Deliberate, and the obstacle is named so the next attempt starts from
+                   it: tracking by the field's key instead would let Angular reuse the
+                   component, and this component reads its path once in ngOnInit and
+                   never rebinds -- so after a removal it would keep the old wire and
+                   show the wrong row's answer. A conformance fixture caught exactly
+                   that. Reactive path binding has to come first. -->
+              @for (child of row.children; track child.wire) {
+                <formancy-field [path]="child.wire" [fallbackLabel]="fallbackFor(child.wire)" />
+              }
+              <ng-container *ngTemplateOutlet="rowButtons; context: { $implicit: row, count: s.rows().length }" />
+            </div>
+          }
         }
         <button type="button" (click)="s.repeater.addRow()">{{ s.addLabel }}</button>
       </fieldset>
@@ -808,6 +3092,694 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
   `,
                 }]
         }], propDecorators: { wire: [{ type: i0.Input, args: [{ isSignal: true, alias: "wire", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }] } });
+/**
+ * Rendering a named `layouts` entry — fields side by side, in sections, in the
+ * arrangement the document asks for rather than model order. The Angular half
+ * of the same decisions packages/react/src/layout.tsx documents, and
+ * deliberately the same markup.
+ *
+ * Four WCAG criteria shape it, and all four say the DOM is the arrangement:
+ *
+ * - **1.3.2 Meaningful Sequence** and **2.4.3 Focus Order** — children are
+ *   emitted in declared order and the stylesheet places them by source order
+ *   alone. Nothing here or in CSS may reorder them, or a screen reader and an
+ *   eye meet the form in different orders.
+ * - **1.4.10 Reflow** — becoming one column when there is no room for two is a
+ *   media query, not a measurement. A layout that reflows only after scripts
+ *   have run does not reflow.
+ * - **1.3.1 Info and Relationships** — a row is presentation and gets no
+ *   semantics; a labelled section is visibly grouping fields, so it is a real
+ *   `group` with an accessible name.
+ *
+ * Every container also carries `data-formancy-layout-path`, the index path of
+ * the node that produced it, matching the React renderer attribute for
+ * attribute. It is inert — nothing in this package reads it — and exists so a
+ * tool outside the renderer can say which node an element on screen came from
+ * without the renderer knowing anything about editing.
+ */
+/**
+ * One panel at a time, behind a row of tabs — the ARIA tabs pattern, matching
+ * the React binding element for element.
+ *
+ * Written out rather than reached for from a library because the keyboard
+ * behaviour IS the specification: arrows move between tabs, Home and End reach
+ * the ends, and the strip is one tab stop through a roving tabindex, so a form
+ * with twelve tabs does not cost twelve presses to get past.
+ *
+ * **Every panel stays in the DOM.** A closed tab is hidden, not removed. Tabs
+ * are presentation, unlike pages: a field in a closed tab is still validated
+ * and still submitted, so it has to be there to be validated, and the
+ * browser's own find-in-page finds it. Removing it would also throw away what
+ * somebody had typed the moment they looked at another tab.
+ *
+ * **A tab opens before error navigation focuses a control inside it.** An error summary focuses the
+ * first invalid control, and focusing something inside a hidden panel does
+ * nothing at all — the reader is told the form has an error and sent nowhere.
+ */
+class FormancyTabs {
+    at = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "at" }] : /* istanbul ignore next */ []));
+    stripLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stripLabel" }] : /* istanbul ignore next */ []));
+    panels = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    labels = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    open = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    changeDetector = inject(ChangeDetectorRef);
+    reveal(index) {
+        this.open.set(index);
+        this.changeDetector.detectChanges();
+    }
+    tabButtons = viewChildren('tab', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabButtons" }] : /* istanbul ignore next */ []));
+    engine = injectEngine();
+    /** Set only by a key press, so focus is never taken from elsewhere. */
+    moveFocus = false;
+    static counter = 0;
+    // After the counter, not before: a static read from a field initialiser runs
+    // in declaration order, and the other way round it is NaN on every instance.
+    id = `formancy-tabs-${String((FormancyTabs.counter += 1))}`;
+    constructor() {
+        effect(() => {
+            const index = this.open();
+            if (!this.moveFocus)
+                return;
+            this.moveFocus = false;
+            this.tabButtons()[index]?.nativeElement.focus();
+        });
+    }
+    tabId(index) {
+        return `${this.id}-tab-${String(index)}`;
+    }
+    panelId(index) {
+        return `${this.id}-panel-${String(index)}`;
+    }
+    panelPath(index) {
+        const prefix = this.at();
+        return prefix === '' ? String(index) : `${prefix}.${String(index)}`;
+    }
+    childrenOf(node) {
+        // `LAYOUT_LEAF_KINDS`, not `kind === 'field'`: a `qrcode` node is childless and is
+        // not a field, so the old spelling read `children` off it and got `undefined`.
+        return LAYOUT_LEAF_KINDS.has(node.kind) ? [node] : layoutChildren(node);
+    }
+    /** A tab's name is its section's heading. The validator insists it has one. */
+    nameOf(node, index) {
+        if (node.kind === 'field')
+            return `Tab ${String(index + 1)}`;
+        const schema = this.engine.schema();
+        return (resolveText(schema, node.label, schema.i18n?.defaultLocale ?? '') ??
+            `Tab ${String(index + 1)}`);
+    }
+    onKeyDown(event) {
+        const last = this.panels().length - 1;
+        const current = this.open();
+        const next = event.key === 'ArrowRight'
+            ? Math.min(current + 1, last)
+            : event.key === 'ArrowLeft'
+                ? Math.max(current - 1, 0)
+                : event.key === 'Home'
+                    ? 0
+                    : event.key === 'End'
+                        ? last
+                        : undefined;
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        this.moveFocus = true;
+        this.open.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyTabs, isStandalone: true, selector: "formancy-tabs", inputs: { at: { classPropertyName: "at", publicName: "at", isSignal: true, isRequired: false, transformFunction: null }, stripLabel: { classPropertyName: "stripLabel", publicName: "stripLabel", isSignal: true, isRequired: false, transformFunction: null }, panels: { classPropertyName: "panels", publicName: "panels", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tab"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div data-formancy-part="layout-tabs" [attr.data-formancy-layout-path]="at()">
+      <div
+        role="tablist"
+        [attr.aria-label]="stripLabel()"
+        data-formancy-part="tablist"
+        (keydown)="onKeyDown($event)"
+      >
+        @for (panel of panels(); track $index; let i = $index) {
+          <button
+            #tab
+            type="button"
+            role="tab"
+            [id]="tabId(i)"
+            [attr.aria-controls]="panelId(i)"
+            [attr.aria-selected]="i === open()"
+            [attr.tabindex]="i === open() ? 0 : -1"
+            data-formancy-part="tab"
+            (click)="open.set(i)"
+          >{{ nameOf(panel, i) }}</button>
+        }
+      </div>
+
+      @for (panel of panels(); track $index; let i = $index) {
+        <div
+          role="tabpanel"
+          [id]="panelId(i)"
+          [attr.aria-labelledby]="tabId(i)"
+          data-formancy-part="tabpanel"
+          [hidden]="i !== open()"
+          (formancy-reveal)="reveal(i)"
+        >
+          <formancy-layout
+            [nodes]="childrenOf(panel)"
+            [labels]="labels()"
+            [at]="panelPath(i)"
+          />
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => FormancyLayout), selector: "formancy-layout", inputs: ["nodes", "labels", "at"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTabs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-tabs',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [forwardRef(() => FormancyLayout)],
+                    template: `
+    <div data-formancy-part="layout-tabs" [attr.data-formancy-layout-path]="at()">
+      <div
+        role="tablist"
+        [attr.aria-label]="stripLabel()"
+        data-formancy-part="tablist"
+        (keydown)="onKeyDown($event)"
+      >
+        @for (panel of panels(); track $index; let i = $index) {
+          <button
+            #tab
+            type="button"
+            role="tab"
+            [id]="tabId(i)"
+            [attr.aria-controls]="panelId(i)"
+            [attr.aria-selected]="i === open()"
+            [attr.tabindex]="i === open() ? 0 : -1"
+            data-formancy-part="tab"
+            (click)="open.set(i)"
+          >{{ nameOf(panel, i) }}</button>
+        }
+      </div>
+
+      @for (panel of panels(); track $index; let i = $index) {
+        <div
+          role="tabpanel"
+          [id]="panelId(i)"
+          [attr.aria-labelledby]="tabId(i)"
+          data-formancy-part="tabpanel"
+          [hidden]="i !== open()"
+          (formancy-reveal)="reveal(i)"
+        >
+          <formancy-layout
+            [nodes]="childrenOf(panel)"
+            [labels]="labels()"
+            [at]="panelPath(i)"
+          />
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { at: [{ type: i0.Input, args: [{ isSignal: true, alias: "at", required: false }] }], stripLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stripLabel", required: false }] }], panels: [{ type: i0.Input, args: [{ isSignal: true, alias: "panels", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tab', { isSignal: true }] }] } });
+/** One per `formancy-code` on the page, so two codes never share a label id. */
+let codeInstances = 0;
+/**
+ * A machine-readable code drawn from an answer the form already holds.
+ *
+ * A component with its OWN field binding rather than a method on the layout: reading the
+ * snapshot from the layout rendered the value once and never again, because a plain method
+ * call is not a signal an OnPush component re-runs for. Measured — the code stayed
+ * `data-state="empty"` after the answer was typed.
+ *
+ * **The accessible content is the value, not the picture.** A picture of a code says
+ * nothing to a screen reader and an alt of "QR code" says nothing either; what somebody
+ * needs is the value, which they can read, copy or dictate. There is no picture at all:
+ * encoding one is a dependency for something a design system may want to draw its own way,
+ * so the renderer emits the value and the hooks and a consumer registers a component for
+ * the drawing. Out of the box a code node shows the value as text and no code — a usable
+ * form with a visible gap, which is the right way round.
+ */
+class FormancyCode {
+    path = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * The label's own id, so the value can point at it.
+     *
+     * From Angular's `inject(...)`-free counter rather than from the engine: the engine
+     * mints ids for FIELDS, and a code is a layout node with no field of its own. Unique
+     * per component instance, which is what two codes on one page need.
+     */
+    labelId = `formancy-code-${String((codeInstances += 1))}`;
+    engine = injectEngine();
+    destroyRef = inject(DestroyRef);
+    /**
+     * Subscribed, not computed.
+     *
+     * The first version was `computed(() => engine.getFieldSnapshot(...))`, which has no
+     * reactive dependency at all -- `getFieldSnapshot` is a plain call, not a signal -- so
+     * it ran once and never again. Measured twice now, in both renderers: the code stayed
+     * `data-state="empty"` after the answer was typed. A code is a live view of an answer
+     * and has to subscribe like any other reader of one.
+     */
+    value = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        const parsed = parsePath(this.path());
+        this.value.set(this.engine.getFieldSnapshot(parsed).value);
+        const unsubscribe = this.engine.subscribeField(parsed, () => {
+            this.value.set(this.engine.getFieldSnapshot(parsed).value);
+        });
+        this.destroyRef.onDestroy(unsubscribe);
+    }
+    text = computed(() => {
+        const value = this.value();
+        if (typeof value === 'string')
+            return value;
+        return value === null || value === undefined ? '' : String(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /**
+     * The modules of the code, or undefined when there is nothing to encode.
+     *
+     * One rect per dark module rather than one path: a rect carries its own fill, so a theme
+     * can address them, and the count is bounded by the version (a version 1 code is 23×23).
+     * `track module.key` so Angular reuses rects across a redraw rather than rebuilding the
+     * whole picture on every keystroke.
+     */
+    drawing = computed(() => {
+        const value = this.text();
+        if (value === '')
+            return undefined;
+        const { size, data } = encode(value);
+        const modules = [];
+        for (const [row, cells] of data.entries()) {
+            for (const [column, dark] of cells.entries()) {
+                if (dark)
+                    modules.push({ key: `${String(row)}.${String(column)}`, x: column, y: row });
+            }
+        }
+        return { size, modules };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawing" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyCode, isStandalone: true, selector: "formancy-code", inputs: { path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div data-formancy-part="code" [attr.data-state]="text() === '' ? 'empty' : 'ready'">
+      <!-- Named, and the name is ATTACHED. It was a loose span beside the value, and
+           measured, the value's accessible name was the empty string: a screen reader
+           announced a booking reference with nothing to say what it was. A label that
+           only looks like a label is the failure this repository's describedby
+           composition exists to prevent, in the one place a layout node wires its own.
+           The React binding does the same. -->
+      @if (label(); as caption) {
+        <span [id]="labelId" data-formancy-part="code-label">{{ caption }}</span>
+      }
+      <!-- The drawing. Decorative: aria-hidden, because a picture of a code says nothing
+           to a screen reader and an alt of "QR code" says nothing either. The value below
+           is the content.
+           Drawn from the encoder's matrix rather than with its own renderSVG, which emits
+           white and black fills: a renderer shipping colours is the thing this project
+           exists to avoid, so the modules use currentColor and the light ones are absent.
+           Nothing is drawn for an empty answer -- an empty string encodes to a valid code,
+           and a scannable picture of nothing is worse than no picture. -->
+      @if (drawing(); as code) {
+        <svg
+          data-formancy-part="code-drawing"
+          [attr.viewBox]="'0 0 ' + code.size + ' ' + code.size"
+          aria-hidden="true"
+          focusable="false"
+          shape-rendering="crispEdges"
+        >
+          @for (module of code.modules; track module.key) {
+            <rect [attr.x]="module.x" [attr.y]="module.y" width="1" height="1" fill="currentColor" />
+          }
+        </svg>
+      }
+      <!-- output is a live region, so its text is announced when the answer changes --
+           right for a second view of an answer, and exactly why it must be named: an
+           unnamed live region reads a string out of nowhere. -->
+      <output data-formancy-part="code-value" [attr.aria-labelledby]="label() ? labelId : null">{{ text() }}</output>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyCode, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-code',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div data-formancy-part="code" [attr.data-state]="text() === '' ? 'empty' : 'ready'">
+      <!-- Named, and the name is ATTACHED. It was a loose span beside the value, and
+           measured, the value's accessible name was the empty string: a screen reader
+           announced a booking reference with nothing to say what it was. A label that
+           only looks like a label is the failure this repository's describedby
+           composition exists to prevent, in the one place a layout node wires its own.
+           The React binding does the same. -->
+      @if (label(); as caption) {
+        <span [id]="labelId" data-formancy-part="code-label">{{ caption }}</span>
+      }
+      <!-- The drawing. Decorative: aria-hidden, because a picture of a code says nothing
+           to a screen reader and an alt of "QR code" says nothing either. The value below
+           is the content.
+           Drawn from the encoder's matrix rather than with its own renderSVG, which emits
+           white and black fills: a renderer shipping colours is the thing this project
+           exists to avoid, so the modules use currentColor and the light ones are absent.
+           Nothing is drawn for an empty answer -- an empty string encodes to a valid code,
+           and a scannable picture of nothing is worse than no picture. -->
+      @if (drawing(); as code) {
+        <svg
+          data-formancy-part="code-drawing"
+          [attr.viewBox]="'0 0 ' + code.size + ' ' + code.size"
+          aria-hidden="true"
+          focusable="false"
+          shape-rendering="crispEdges"
+        >
+          @for (module of code.modules; track module.key) {
+            <rect [attr.x]="module.x" [attr.y]="module.y" width="1" height="1" fill="currentColor" />
+          }
+        </svg>
+      }
+      <!-- output is a live region, so its text is announced when the answer changes --
+           right for a second view of an answer, and exactly why it must be named: an
+           unnamed live region reads a string out of nowhere. -->
+      <output data-formancy-part="code-value" [attr.aria-labelledby]="label() ? labelId : null">{{ text() }}</output>
+    </div>
+  `,
+                }]
+        }], propDecorators: { path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+class FormancyLayout {
+    nodes = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    labels = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    /** Index path of the container these nodes are the children of. */
+    at = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "at" }] : /* istanbul ignore next */ []));
+    engine = injectEngine();
+    constructor() {
+        // The host takes no part in layout. Through CSSOM rather than a stylesheet, for the
+        // reason written above the template: a component style is a `<style>` element a
+        // strict `style-src` blocks, and this has to hold with no CSP configuration at all.
+        inject((ElementRef)).nativeElement.style.setProperty('display', 'contents');
+    }
+    /** The span as a number CSS can count with, and nothing at all for `all`.
+     *
+     *  A style OBJECT rather than `[style.--fm-span]`: both set a custom property --
+     *  measured, both work -- and the object form lets this return nothing for `all`
+     *  without binding an empty string. */
+    spanStyle(node) {
+        return typeof node.span === 'number' ? { '--fm-span': String(node.span) } : {};
+    }
+    /** This node's index path, as the dotted string the attribute carries. */
+    pathOf(index) {
+        const prefix = this.at();
+        return prefix === '' ? String(index) : `${prefix}.${String(index)}`;
+    }
+    /**
+     * Headings are cached per node. Minting an id inside the template would give
+     * a different one on every change-detection pass, leaving aria-labelledby
+     * pointing at an element that no longer exists.
+     */
+    headings = new WeakMap();
+    static counter = 0;
+    /** A tabs node's own name, for the tab strip. Null when it has none. */
+    stripLabelFor(node) {
+        if (node.kind !== 'tabs')
+            return null;
+        const schema = this.engine.schema();
+        return resolveText(schema, node.label, schema.i18n?.defaultLocale ?? '') ?? null;
+    }
+    isRepeater(path) {
+        return this.engine.repeaterPaths().includes(path);
+    }
+    headingFor(node) {
+        const cached = this.headings.get(node);
+        if (cached !== undefined)
+            return cached;
+        const schema = this.engine.schema();
+        const label = node.kind === 'field' ? undefined : node.label;
+        const text = resolveText(schema, label, schema.i18n?.defaultLocale ?? '');
+        const heading = text === undefined || text === ''
+            ? null
+            : { id: `formancy-section-${String((FormancyLayout.counter += 1))}`, text };
+        this.headings.set(node, heading);
+        return heading;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyLayout, isStandalone: true, selector: "formancy-layout", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, at: { classPropertyName: "at", publicName: "at", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @for (node of nodes(); track $index; let i = $index) {
+      <!-- A node that spans gets a cell to span WITH, and one that does not is left
+           exactly as it was: a direct child of the container, so the markup of a form
+           using no span is unchanged.
+
+           The body is an ng-template rather than the same @if chain written twice,
+           because two copies of a nine-branch chain is two places for them to drift.
+
+           Two channels for one fact, and the reason is arithmetic: data-span is the
+           authored value, which a selector can match, and --fm-span is the same number
+           where CSS can COUNT with it, because 'grid-column: span attr(data-span)' is
+           not a thing. 'all' needs no number -- it is 1 / -1 whatever the column count
+           -- so it carries no property and the theme's fallback covers the rest.
+
+           The React binding does the same, for the same reasons. -->
+      @if (node.span !== undefined) {
+        <div
+          data-formancy-part="layout-cell"
+          [attr.data-span]="node.span"
+          [style]="spanStyle(node)"
+        >
+          <ng-container *ngTemplateOutlet="nodeBody; context: { $implicit: node, i: i }" />
+        </div>
+      } @else {
+        <ng-container *ngTemplateOutlet="nodeBody; context: { $implicit: node, i: i }" />
+      }
+    }
+
+    <ng-template #nodeBody let-node let-i="i">
+      @if (node.kind === 'field') {
+        @if (isRepeater(node.path)) {
+          <formancy-repeater [wire]="node.path" [labels]="labels()" />
+        } @else {
+          <formancy-field [path]="node.path" />
+        }
+      } @else if (node.kind === 'row') {
+        <!-- Presentation only: two fields being beside each other is not a
+             relationship the author described, and announcing "group" around
+             every pair would be noise. -->
+        <div
+          data-formancy-part="layout-row"
+          [attr.data-formancy-layout-path]="pathOf(i)"
+          [attr.data-columns]="node.children.length"
+        >
+          <formancy-layout [nodes]="node.children" [labels]="labels()" [at]="pathOf(i)" />
+        </div>
+      } @else if (node.kind === 'column') {
+        <div data-formancy-part="layout-column" [attr.data-formancy-layout-path]="pathOf(i)">
+          <formancy-layout [nodes]="node.children" [labels]="labels()" [at]="pathOf(i)" />
+        </div>
+      } @else if (node.kind === 'tabs') {
+        <formancy-tabs
+          [panels]="node.children"
+          [labels]="labels()"
+          [at]="pathOf(i)"
+          [stripLabel]="stripLabelFor(node)"
+        />
+      } @else if (node.kind === 'qrcode') {
+        <!-- The accessible content is the VALUE, not the picture. A picture of a code
+             says nothing to a screen reader and an alt of "QR code" says nothing
+             either; what somebody needs is the value, which they can read, copy or
+             dictate. And there is no picture: encoding one is a dependency (a matrix,
+             mask patterns, Reed-Solomon) for something a design system may want to draw
+             its own way, so the renderer emits the value and the hooks and a consumer
+             registers a component for the drawing. Out of the box a code node shows the
+             value as text and no code -- a usable form with a visible gap, which is the
+             right way round. -->
+        <formancy-code
+          [path]="node.path"
+          [label]="headingFor(node)?.text"
+          [attr.data-formancy-layout-path]="pathOf(i)"
+        />
+      } @else if (node.kind === 'table') {
+        <!-- A grid, not a <table>. Laying fields out in columns is not
+             tabular data, and marking it up as a table would announce rows and
+             columns that mean nothing (WCAG 1.3.1). The column count is data
+             so the stylesheet can collapse it with a media query. -->
+        <div
+          data-formancy-part="layout-table"
+          [attr.data-formancy-layout-path]="pathOf(i)"
+          [attr.data-columns]="node.columns"
+          [attr.role]="headingFor(node) ? 'group' : null"
+          [attr.aria-labelledby]="headingFor(node)?.id ?? null"
+        >
+          @if (headingFor(node); as heading) {
+            <p [id]="heading.id" data-formancy-part="layout-section-heading">{{ heading.text }}</p>
+          }
+          <formancy-layout [nodes]="node.children" [labels]="labels()" [at]="pathOf(i)" />
+        </div>
+      } @else if (headingFor(node); as heading) {
+        <div
+          data-formancy-part="layout-section"
+          [attr.data-formancy-layout-path]="pathOf(i)"
+          role="group"
+          [attr.aria-labelledby]="heading.id"
+        >
+          <p [id]="heading.id" data-formancy-part="layout-section-heading">{{ heading.text }}</p>
+          <formancy-layout [nodes]="node.children" [labels]="labels()" [at]="pathOf(i)" />
+        </div>
+      } @else {
+        <!-- A group with no accessible name is announced as "group" and tells
+             nobody anything, so an unlabelled section stays a box. -->
+        <div data-formancy-part="layout-section" [attr.data-formancy-layout-path]="pathOf(i)">
+          <formancy-layout [nodes]="node.children" [labels]="labels()" [at]="pathOf(i)" />
+        </div>
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyLayout, selector: "formancy-layout", inputs: ["nodes", "labels", "at"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormancyFieldSlot, selector: "formancy-field", inputs: ["path", "fallbackLabel"] }, { kind: "component", type: FormancyRepeaterSection, selector: "formancy-repeater", inputs: ["wire", "labels"] }, { kind: "component", type: FormancyTabs, selector: "formancy-tabs", inputs: ["at", "stripLabel", "panels", "labels"] }, { kind: "component", type: FormancyCode, selector: "formancy-code", inputs: ["path", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-layout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, FormancyFieldSlot, FormancyRepeaterSection, FormancyTabs, FormancyCode],
+                    /**
+                     * Undoing an element rather than styling one.
+                     *
+                     * Angular gives every component a host element. This one recurses, so a container's
+                     * children arrive wrapped in a `<formancy-layout>` that React does not emit — and a
+                     * wrapper that takes part in layout is the only grid item its parent has, which is why
+                     * a two-column table produced one column in this renderer
+                     * ([0073](../../../docs/decisions/0073-a-host-element-is-not-a-layout.md)).
+                     *
+                     * `display: contents` removes the box and keeps the children, so the consumer's grid
+                     * sees what it sees in React. It also removes the element from the accessibility
+                     * tree, which is right: it has no role and names nothing.
+                     *
+                     * Set in the CONSTRUCTOR through CSSOM, and **never as a component style**: Angular
+                     * emits one as a `<style>` element that `style-src 'self'` blocks without a nonce,
+                     * which would silently restore the bug above. CSP does not govern CSSOM
+                     * ([0079](../../../docs/decisions/0079-a-host-is-undone-without-a-stylesheet.md),
+                     * which supersedes 0073's mechanism). `layout.test.ts` asserts both halves: the
+                     * display is `contents`, and no `<style>` is what says so.
+                     *
+                     * It also restores [0008](../../../docs/decisions/0008-layered-packages.md)'s "nothing
+                     * below the component kit ships a CSS file" rather than amending it, which is the better
+                     * outcome for a rule about who owns appearance.
+                     */
+                    template: `
+    @for (node of nodes(); track $index; let i = $index) {
+      <!-- A node that spans gets a cell to span WITH, and one that does not is left
+           exactly as it was: a direct child of the container, so the markup of a form
+           using no span is unchanged.
+
+           The body is an ng-template rather than the same @if chain written twice,
+           because two copies of a nine-branch chain is two places for them to drift.
+
+           Two channels for one fact, and the reason is arithmetic: data-span is the
+           authored value, which a selector can match, and --fm-span is the same number
+           where CSS can COUNT with it, because 'grid-column: span attr(data-span)' is
+           not a thing. 'all' needs no number -- it is 1 / -1 whatever the column count
+           -- so it carries no property and the theme's fallback covers the rest.
+
+           The React binding does the same, for the same reasons. -->
+      @if (node.span !== undefined) {
+        <div
+          data-formancy-part="layout-cell"
+          [attr.data-span]="node.span"
+          [style]="spanStyle(node)"
+        >
+          <ng-container *ngTemplateOutlet="nodeBody; context: { $implicit: node, i: i }" />
+        </div>
+      } @else {
+        <ng-container *ngTemplateOutlet="nodeBody; context: { $implicit: node, i: i }" />
+      }
+    }
+
+    <ng-template #nodeBody let-node let-i="i">
+      @if (node.kind === 'field') {
+        @if (isRepeater(node.path)) {
+          <formancy-repeater [wire]="node.path" [labels]="labels()" />
+        } @else {
+          <formancy-field [path]="node.path" />
+        }
+      } @else if (node.kind === 'row') {
+        <!-- Presentation only: two fields being beside each other is not a
+             relationship the author described, and announcing "group" around
+             every pair would be noise. -->
+        <div
+          data-formancy-part="layout-row"
+          [attr.data-formancy-layout-path]="pathOf(i)"
+          [attr.data-columns]="node.children.length"
+        >
+          <formancy-layout [nodes]="node.children" [labels]="labels()" [at]="pathOf(i)" />
+        </div>
+      } @else if (node.kind === 'column') {
+        <div data-formancy-part="layout-column" [attr.data-formancy-layout-path]="pathOf(i)">
+          <formancy-layout [nodes]="node.children" [labels]="labels()" [at]="pathOf(i)" />
+        </div>
+      } @else if (node.kind === 'tabs') {
+        <formancy-tabs
+          [panels]="node.children"
+          [labels]="labels()"
+          [at]="pathOf(i)"
+          [stripLabel]="stripLabelFor(node)"
+        />
+      } @else if (node.kind === 'qrcode') {
+        <!-- The accessible content is the VALUE, not the picture. A picture of a code
+             says nothing to a screen reader and an alt of "QR code" says nothing
+             either; what somebody needs is the value, which they can read, copy or
+             dictate. And there is no picture: encoding one is a dependency (a matrix,
+             mask patterns, Reed-Solomon) for something a design system may want to draw
+             its own way, so the renderer emits the value and the hooks and a consumer
+             registers a component for the drawing. Out of the box a code node shows the
+             value as text and no code -- a usable form with a visible gap, which is the
+             right way round. -->
+        <formancy-code
+          [path]="node.path"
+          [label]="headingFor(node)?.text"
+          [attr.data-formancy-layout-path]="pathOf(i)"
+        />
+      } @else if (node.kind === 'table') {
+        <!-- A grid, not a <table>. Laying fields out in columns is not
+             tabular data, and marking it up as a table would announce rows and
+             columns that mean nothing (WCAG 1.3.1). The column count is data
+             so the stylesheet can collapse it with a media query. -->
+        <div
+          data-formancy-part="layout-table"
+          [attr.data-formancy-layout-path]="pathOf(i)"
+          [attr.data-columns]="node.columns"
+          [attr.role]="headingFor(node) ? 'group' : null"
+          [attr.aria-labelledby]="headingFor(node)?.id ?? null"
+        >
+          @if (headingFor(node); as heading) {
+            <p [id]="heading.id" data-formancy-part="layout-section-heading">{{ heading.text }}</p>
+          }
+          <formancy-layout [nodes]="node.children" [labels]="labels()" [at]="pathOf(i)" />
+        </div>
+      } @else if (headingFor(node); as heading) {
+        <div
+          data-formancy-part="layout-section"
+          [attr.data-formancy-layout-path]="pathOf(i)"
+          role="group"
+          [attr.aria-labelledby]="heading.id"
+        >
+          <p [id]="heading.id" data-formancy-part="layout-section-heading">{{ heading.text }}</p>
+          <formancy-layout [nodes]="node.children" [labels]="labels()" [at]="pathOf(i)" />
+        </div>
+      } @else {
+        <!-- A group with no accessible name is announced as "group" and tells
+             nobody anything, so an unlabelled section stays a box. -->
+        <div data-formancy-part="layout-section" [attr.data-formancy-layout-path]="pathOf(i)">
+          <formancy-layout [nodes]="node.children" [labels]="labels()" [at]="pathOf(i)" />
+        </div>
+      }
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], at: [{ type: i0.Input, args: [{ isSignal: true, alias: "at", required: false }] }] } });
 /**
  * Renders the whole form from the engine: one slot per field, resolved through
  * the registry. Slots subscribe individually, so a keystroke re-renders one
@@ -828,6 +3800,12 @@ class FormancyForm {
      */
     labels = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    /**
+     * Render a named entry from the schema's `layouts` instead of model order.
+     * Unknown or absent, the form falls back to model order.
+     */
+    layout = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
     submitLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "submitLabel" }] : /* istanbul ignore next */ []));
     submitted = output();
@@ -853,6 +3831,17 @@ class FormancyForm {
         return this.repeaterWires.filter((wire) => this.engine.pageOf(parsePath(wire)) === wizard.page());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "repeatersOnPage" }] : /* istanbul ignore next */ []));
+    /**
+     * The nodes of the named layout, or undefined to fall back to model order —
+     * a mistyped layout name should not produce an empty form.
+     */
+    arrangement = computed(() => {
+        const name = this.layout();
+        if (name === undefined)
+            return undefined;
+        return this.engine.schema().layouts?.find((candidate) => candidate.name === name)?.nodes;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrangement" }] : /* istanbul ignore next */ []));
     fallbackFor(wire) {
         return this.labels()?.[wire];
     }
@@ -876,7 +3865,7 @@ class FormancyForm {
             : { ok: false, errors: outcome.errors });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyForm, isStandalone: true, selector: "formancy-form", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyForm, isStandalone: true, selector: "formancy-form", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: `
     @if (wizard; as w) {
       <nav data-formancy-part="stepper" aria-label="Progress">
         <ol>
@@ -901,6 +3890,9 @@ class FormancyForm {
           <button type="button" data-formancy-part="submit" (click)="onSubmit()">{{ submitLabel() ?? 'Submit' }}</button>
         }
       </div>
+    } @else if (arrangement(); as nodes) {
+      <formancy-layout [nodes]="nodes" [labels]="labels()" />
+      <button type="button" data-formancy-part="submit" (click)="onSubmit()">{{ submitLabel() ?? 'Submit' }}</button>
     } @else {
       @for (wire of staticWires; track wire) {
         <formancy-field [path]="wire" [fallbackLabel]="fallbackFor(wire)" />
@@ -910,14 +3902,14 @@ class FormancyForm {
       }
       <button type="button" data-formancy-part="submit" (click)="onSubmit()">{{ submitLabel() ?? 'Submit' }}</button>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldSlot, selector: "formancy-field", inputs: ["path", "fallbackLabel"] }, { kind: "component", type: FormancyRepeaterSection, selector: "formancy-repeater", inputs: ["wire", "labels"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldSlot, selector: "formancy-field", inputs: ["path", "fallbackLabel"] }, { kind: "component", type: FormancyRepeaterSection, selector: "formancy-repeater", inputs: ["wire", "labels"] }, { kind: "component", type: FormancyLayout, selector: "formancy-layout", inputs: ["nodes", "labels", "at"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyForm, decorators: [{
             type: Component,
             args: [{
                     selector: 'formancy-form',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormancyFieldSlot, FormancyRepeaterSection],
+                    imports: [FormancyFieldSlot, FormancyRepeaterSection, FormancyLayout],
                     template: `
     @if (wizard; as w) {
       <nav data-formancy-part="stepper" aria-label="Progress">
@@ -943,6 +3935,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
           <button type="button" data-formancy-part="submit" (click)="onSubmit()">{{ submitLabel() ?? 'Submit' }}</button>
         }
       </div>
+    } @else if (arrangement(); as nodes) {
+      <formancy-layout [nodes]="nodes" [labels]="labels()" />
+      <button type="button" data-formancy-part="submit" (click)="onSubmit()">{{ submitLabel() ?? 'Submit' }}</button>
     } @else {
       @for (wire of staticWires; track wire) {
         <formancy-field [path]="wire" [fallbackLabel]="fallbackFor(wire)" />
@@ -954,7 +3949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
+        }], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
 
 /**
  * The error summary a failed submit focuses.
@@ -1003,7 +3998,7 @@ class FormancyErrorSummary {
     focusControl(event, path) {
         // The hash alone scrolls but does not focus; do both.
         event.preventDefault();
-        document.getElementById(this.controlIdOf(path))?.focus();
+        focusControl(document.getElementById(this.controlIdOf(path)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyErrorSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyErrorSummary, isStandalone: true, selector: "formancy-error-summary", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "region", first: true, predicate: ["region"], descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -1039,9 +4034,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], region: [{ type: i0.ViewChild, args: ['region', { isSignal: true }] }] } });
 
+class FormancyResumeNotice {
+    /** Omitted when the draft came back unchanged. */
+    migration = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "migration" }] : /* istanbul ignore next */ []));
+    /** Question wording for a field key, since a key is not what the form asked. */
+    labels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    setAside = computed(() => (this.migration()?.changes ?? [])
+        .map((change) => change.path)
+        .filter((path) => path !== undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "setAside" }] : /* istanbul ignore next */ []));
+    summary = computed(() => {
+        const count = this.setAside().length;
+        return count === 1
+            ? 'One question is no longer on this form. Your answer to it is still kept with the rest and will be sent with them — it is just not shown here any more.'
+            : `${String(count)} questions are no longer on this form. Your answers to them are still kept with the rest and will be sent with them — they are just not shown here any more.`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    region = viewChild('region', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
+    focused = afterRenderEffect(() => {
+        if (this.migration() === undefined)
+            return;
+        this.region()?.nativeElement.focus();
+    });
+    labelFor(path) {
+        return this.labels()[path] ?? path;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyResumeNotice, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyResumeNotice, isStandalone: true, selector: "formancy-resume-notice", inputs: { migration: { classPropertyName: "migration", publicName: "migration", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "region", first: true, predicate: ["region"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (migration() !== undefined) {
+      <div
+        role="region"
+        aria-label="This form changed while you were away"
+        data-formancy-part="resume-notice"
+        [attr.data-state]="migration()!.severity"
+        tabindex="-1"
+        #region
+      >
+        <h2 data-formancy-part="resume-notice-heading">This form changed while you were away</h2>
+
+        @if (migration()!.severity === 'breaking') {
+          <p>
+            It changed too much for your answers to be moved across, so this is being shown as you
+            left it and <strong>cannot be submitted</strong>. Starting again will give you the
+            current form.
+          </p>
+        } @else {
+          <p>{{ summary() }}</p>
+          @if (setAside().length > 0) {
+            <ul data-formancy-part="resume-notice-list">
+              @for (path of setAside(); track path) {
+                <li>{{ labelFor(path) }}</li>
+              }
+            </ul>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyResumeNotice, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-resume-notice',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (migration() !== undefined) {
+      <div
+        role="region"
+        aria-label="This form changed while you were away"
+        data-formancy-part="resume-notice"
+        [attr.data-state]="migration()!.severity"
+        tabindex="-1"
+        #region
+      >
+        <h2 data-formancy-part="resume-notice-heading">This form changed while you were away</h2>
+
+        @if (migration()!.severity === 'breaking') {
+          <p>
+            It changed too much for your answers to be moved across, so this is being shown as you
+            left it and <strong>cannot be submitted</strong>. Starting again will give you the
+            current form.
+          </p>
+        } @else {
+          <p>{{ summary() }}</p>
+          @if (setAside().length > 0) {
+            <ul data-formancy-part="resume-notice-list">
+              @for (path of setAside(); track path) {
+                <li>{{ labelFor(path) }}</li>
+              }
+            </ul>
+          }
+        }
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { migration: [{ type: i0.Input, args: [{ isSignal: true, alias: "migration", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], region: [{ type: i0.ViewChild, args: ['region', { isSignal: true }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_FIELD_COMPONENTS, FORMANCY_ENGINE, FORMANCY_FIELD_CONTEXT, FORMANCY_REGISTRY, FormancyCheckboxField, FormancyComponentOutlet, FormancyDateField, FormancyErrorSummary, FormancyFieldShell, FormancyFieldSlot, FormancyForm, FormancyNumberField, FormancyRadioGroupField, FormancyRepeaterSection, FormancySelectField, FormancyTextField, FormancyTextareaField, injectEngine, injectField, injectFieldContext, injectRepeater, injectSubmit, injectWizard, provideFormancy, provideFormancyRegistry };
+export { DEFAULT_FIELD_COMPONENTS, FORMANCY_ENGINE, FORMANCY_FIELD_CONTEXT, FORMANCY_OPTIONS_SOURCES, FORMANCY_REGISTRY, FORMANCY_RICH_TEXT_EDITOR, FORMANCY_SCANNER, FORMANCY_UPLOADER, FormancyCheckboxField, FormancyComponentOutlet, FormancyDateField, FormancyErrorSummary, FormancyFieldShell, FormancyFieldSlot, FormancyForm, FormancyLayout, FormancyNumberField, FormancyRadioGroupField, FormancyRepeaterSection, FormancyResumeNotice, FormancyRichInline, FormancyRichText, FormancySelectField, FormancyTextField, FormancyTextareaField, injectEngine, injectField, injectFieldContext, injectOptionsSources, injectRepeater, injectRichTextEditorFactory, injectScanner, injectSubmit, injectUploader, injectWizard, provideFormancy, provideFormancyOptionsSources, provideFormancyRegistry, provideFormancyRichTextEditor, provideFormancyScanner, provideFormancyUploader };
 //# sourceMappingURL=formancy-angular.mjs.map