ng-form-foundry 0.3.0 → 0.3.2

package/index.d.ts

@@ -1,6 +1,6 @@
 import { FormControl, FormArray, FormGroup } from '@angular/forms';
-import * as i0 from '@angular/core';
-import { OnInit, AfterViewInit, EventEmitter, ElementRef, QueryList, ChangeDetectorRef } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, AfterViewInit, ElementRef, EventEmitter, QueryList, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 
 type LeafRuntimeType<T> = T extends 'string' ? string : T extends 'number' ? number : T extends 'boolean' ? boolean : T extends 'enum' ? string | number : never;
@@ -153,7 +153,11 @@ type NodeChoice = {
     presence?: boolean;
     appearance?: Appearance;
 };
-/** The control name that records which case of a {@link NodeChoice} is active. */
+/**
+ * The control name that records which case of a {@link NodeChoice} is active.
+ * The name is reserved: it cannot be used as a case field name (the builder
+ * throws) or as a map entry key (the entry helpers reject it).
+ */
 declare const CASE_KEY = "__case";
 /**
  * An open, arbitrary-keyed record: unlike {@link NodeGroup} (a fixed, declared
@@ -189,28 +193,15 @@ type FormGroupType<T extends NodeGroup> = {
 };
 type DFormGroup<T extends NodeGroup> = FormGroup<FormGroupType<T>>;
 
-/**
- * Build the `AbstractControl` for a single schema node.
- *
- * Dispatches on `node.kind`: a `leaf` becomes a `FormControl`, a `leafList` a
- * `FormArray` of controls, a `nodeGroup` a nested `FormGroup`, and a
- * `nodeGroupList` a `FormArray` of groups. `initial` is the runtime value for
- * this node — a scalar for a leaf, an array for a list, an object for a group —
- * and seeds the control's value (falling back to the node's `default`).
- *
- * Most callers use {@link buildFormFromSchema}; this is exposed for building a
- * control from a single non-root node.
- */
-/**
- * Build the FormGroup for a choice: a `__case` control holding the active case
- * name plus that case's field controls. Only the active case's fields are built,
- * matching the inline YANG encoding; switching the case swaps them.
- */
 /**
  * Normalize a {@link ChoiceCase} to a field record. A field record is returned
  * as-is; a single node (a leaf-bodied case, e.g. a scalar `anyOf` branch) becomes
  * a one-field record keyed by the node's `name`. The discriminant is a top-level
  * `kind` string, which a field record never has (its keys are field names).
+ *
+ * Throws when a case field is keyed `__case`: that name is reserved for the
+ * choice discriminator ({@link CASE_KEY}) and a field under it would silently
+ * clobber the active-case control.
  */
 declare function caseFields(body: ChoiceCase): Record<string, NodeType>;
 /**
@@ -223,7 +214,10 @@ declare function resolveChoiceCase(choice: NodeChoice, initial?: Record<string,
 /**
  * Switch a choice's FormGroup to `caseName`: sets `__case`, removes every other
  * control, and builds `caseName`'s fields (normalized via {@link caseFields})
- * with their defaults. An unknown case name leaves only `__case`.
+ * with their defaults. Presence fields of the new case start absent — the
+ * switch carries no data that could make them present. An unknown case name
+ * leaves only `__case`. The swap is atomic: one value change fires, and every
+ * observable snapshot has fields matching its discriminator.
  */
 declare function switchChoiceCase(group: FormGroup, choice: NodeChoice, caseName: string): void;
 /**
@@ -236,15 +230,72 @@ declare function switchChoiceCase(group: FormGroup, choice: NodeChoice, caseName
 declare function addMapEntry(group: FormGroup, map: NodeMap, key?: string): string | null;
 /**
  * Rename entry `oldKey` to `newKey.trim()`, preserving the control instance
- * (remove + re-add, so the value survives). Returns whether the rename was
- * committed: an empty, unchanged, duplicate, or `keyPattern`-violating key is a
- * no-op, leaving the entry under its current name.
+ * (so the value survives) and the entry's position in the group's key order —
+ * the order `getRawValue()` serializes and the tree editor renders. Returns
+ * whether the rename was committed: an empty, reserved (`__case`), unchanged,
+ * duplicate, or `keyPattern`-violating key is a no-op, leaving the entry under
+ * its current name. Entry keys are looked up verbatim — never via
+ * `AbstractControl.get`, which would split keys like `10.0.0.1` into
+ * dot-delimited paths. Emits a single value change.
  */
 declare function renameMapEntry(group: FormGroup, map: NodeMap, oldKey: string, newKey: string): boolean;
 /** Remove entry `key` unless the map is at `minEntries`. Returns whether it was removed. */
 declare function removeMapEntry(group: FormGroup, map: NodeMap, key: string): boolean;
+/**
+ * Build the `AbstractControl` for a single schema node.
+ *
+ * Dispatches on `node.kind`: a `leaf` becomes a `FormControl`, a `leafList` a
+ * `FormArray` of controls, a `nodeGroup` a nested `FormGroup`, and a
+ * `nodeGroupList` a `FormArray` of groups. `initial` is the runtime value for
+ * this node — a scalar for a leaf, an array for a list, an object for a group —
+ * and seeds the control's value (falling back to the node's `default`).
+ *
+ * Most callers use {@link buildFormFromSchema}; this is exposed for building a
+ * control from a single non-root node.
+ */
 declare function buildControl<T extends NodeType>(node: T, initial?: unknown | null): DFormControl<T> | FormControl<LeafRuntimeType<any>> | FormArray<any>;
+/**
+ * Build a typed `FormGroup` from a root `NodeGroup` schema.
+ *
+ * The returned group's control structure, keys, and value types are inferred
+ * from the schema literal — a `leaf` of `type: 'number'` yields a
+ * `FormControl<number>`, a `nodeGroup` a nested `FormGroup`, and so on. `initial`
+ * is an optional value object keyed by the schema's `children` keys; each child
+ * control is seeded from its matching slice (falling back to the node `default`).
+ *
+ * Presence nodes whose key is absent from `initial` get no control, at any depth
+ * — plain children, list items, map values, and choice case fields alike — so
+ * they are absent from the form value until enabled. A key present with an
+ * explicit `null` keeps its control: `null` is a value, absence is the missing
+ * key.
+ *
+ * Inference only holds when `schema`'s literal type is preserved. Author schemas
+ * with {@link defineSchema} or a `satisfies NodeGroup` annotation — never
+ * `const schema: NodeGroup = ...`, which widens `children` and erases the field
+ * names and value types.
+ */
 declare function buildFormFromSchema<S extends NodeGroup>(schema: S, initial?: Record<string, unknown> | null): DFormGroup<S>;
+/**
+ * The wire value at `node`: `value` rebuilt with every choice discriminator
+ * removed.
+ *
+ * A choice's form value is `{ __case, ...fields }` ({@link CASE_KEY}); its wire
+ * encoding is the active case's fields inline, with no discriminator — the case
+ * is recovered from the field shape when the data is seeded back in
+ * ({@link resolveChoiceCase}). The walk is schema-driven: only positions the
+ * schema declares as choices are stripped, so a group child or map entry that
+ * happens to be named `__case` passes through untouched. Values at positions
+ * the schema does not describe pass through unchanged.
+ */
+declare function toWireValue(node: NodeType, value: unknown): unknown;
+/**
+ * Serialize a form built by {@link buildFormFromSchema} to its wire value:
+ * `form.getRawValue()` with every choice's {@link CASE_KEY} discriminator
+ * stripped (see {@link toWireValue}). The result is the inline encoding that
+ * `buildFormFromSchema` accepts back as `initial`, so serialize → rebuild
+ * round-trips the value.
+ */
+declare function serializeForm(schema: NodeGroup, form: FormGroup): Record<string, unknown>;
 /**
  * Capture a schema literal with its exact type while checking it against
  * `NodeGroup`.
@@ -266,56 +317,56 @@ declare function asFormGroup(control: any): FormGroup;
 
 declare class DynamicRecursiveFormComponent implements OnInit {
     /** The form-description schema to render (a root or nested `NodeGroup`). */
-    readonly schema: i0.InputSignal<NodeGroup>;
+    readonly schema: _angular_core.InputSignal<NodeGroup>;
     /** Optional value object to seed the form; keyed by the schema's `children` keys. */
-    readonly initialValue: i0.InputSignal<Record<string, unknown> | null>;
+    readonly initialValue: _angular_core.InputSignal<Record<string, unknown> | null>;
     /** The reactive group this form binds to. Defaults to an empty group. */
-    readonly formGroup: i0.InputSignal<FormGroup<any>>;
+    readonly formGroup: _angular_core.InputSignal<FormGroup<any>>;
     /** Index of this form within a parent list, used by `addButtonCallback`. */
-    readonly index: i0.InputSignal<number | null>;
+    readonly index: _angular_core.InputSignal<number | null>;
     /** Whether this form may be removed from a parent list (shows a remove control). */
-    readonly removable: i0.InputSignal<boolean>;
+    readonly removable: _angular_core.InputSignal<boolean>;
     /** Emitted when the user removes this form from a parent list. */
-    readonly remove: i0.OutputEmitterRef<void>;
+    readonly remove: _angular_core.OutputEmitterRef<void>;
     /** Card/section title; falls back to the schema label or name. */
-    readonly title: i0.InputSignal<string | undefined>;
+    readonly title: _angular_core.InputSignal<string | undefined>;
     /** Whether fields accept input. Two-way: also toggled by the built-in edit control. */
-    readonly editable: i0.ModelSignal<boolean>;
+    readonly editable: _angular_core.ModelSignal<boolean>;
     /** Invoked with {@link index} to append a new sibling form to a parent list. */
-    readonly addButtonCallback: i0.InputSignal<((index: number) => void) | null>;
+    readonly addButtonCallback: _angular_core.InputSignal<((index: number) => void) | null>;
+    /**
+     * Key of a presence leaf whose field should grab focus when it renders — lets
+     * a host that added the control itself (e.g. the tree editor's optionals
+     * menu) hand focus to the new field, like the form's own add button does.
+     */
+    readonly focusLeaf: _angular_core.InputSignal<string | null>;
     /** True when the schema is a root group (rendered flat, without a wrapping card). */
-    readonly root: i0.Signal<boolean>;
+    readonly root: _angular_core.Signal<boolean>;
     ngOnInit(): void;
-    get nodeGroupChildrenList(): Array<{
+    protected get nodeGroupChildrenList(): Array<{
         key: string;
         value: NodeType;
     }>;
-    emitRemoveEvent(): void;
-    /**
-     * Add or remove a presence group's control on this form. Removing it drops the
-     * group from `form.value`; adding it rebuilds the sub-group from its schema.
-     */
-    togglePresence(key: string, schema: NodeGroup, present: boolean): void;
+    protected emitRemoveEvent(): void;
     /** The key of the presence leaf the user just enabled; its field grabs focus when rendered. */
     protected presenceFocusKey: string | null;
     /**
-     * Add or remove a presence leaf's control on this form. Removing it drops the
-     * leaf from `form.value`; adding it rebuilds the control from its schema and
-     * focuses the rendered field.
+     * Add or remove a presence node's control on this form — any presence kind:
+     * group, leaf, map, or choice. Removing it drops the key from `form.value`;
+     * adding it builds the control fresh from its schema (nested presence
+     * children start absent).
      */
-    toggleLeafPresence(key: string, schema: Leaf, present: boolean): void;
+    toggleNodePresence(key: string, schema: NodeType, present: boolean): void;
     /**
-     * Add or remove a presence map's or choice's control on this form. Removing it
-     * drops the node from `form.value`; adding it rebuilds the control (an empty
-     * map, or a choice group holding `__case`) from its schema.
+     * {@link toggleNodePresence} for a presence leaf, additionally focusing the
+     * rendered field when the toggle just created it.
      */
-    toggleNodePresence(key: string, schema: NodeType, present: boolean): void;
-    protected readonly CASE_KEY = "__case";
-    objectKeys(obj: Record<string, unknown>): string[];
+    toggleLeafPresence(key: string, schema: Leaf, present: boolean): void;
+    protected objectKeys(obj: Record<string, unknown>): string[];
     /** The active case name of a choice control, or null if none is selected. */
-    activeCase(key: string): string | null;
+    protected activeCase(key: string): string | null;
     /** A synthetic flattened NodeGroup used to render the active case's fields against the choice's FormGroup. */
-    caseAsGroup(choice: NodeChoice, caseName: string): NodeGroup;
+    protected caseAsGroup(choice: NodeChoice, caseName: string): NodeGroup;
     /** The display label for a case: the schema's `caseLabels` entry, else the case name. */
     caseLabel(choice: NodeChoice, caseName: string): string;
     /**
@@ -323,14 +374,14 @@ declare class DynamicRecursiveFormComponent implements OnInit {
      * for a presence group's body, whose container is the presence panel itself, so
      * the group's own section panel would be a redundant second box.
      */
-    flatGroup(group: NodeGroup): NodeGroup;
+    protected flatGroup(group: NodeGroup): NodeGroup;
     /** Swap a choice's field controls when the selected case changes. Delegates to {@link switchChoiceCase}. */
     switchCase(key: string, choice: NodeChoice, caseName: string): void;
     protected readonly asFormGroup: typeof asFormGroup;
     protected readonly asFormArray: typeof asFormArray;
     protected readonly asFormControl: typeof asFormControl;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicRecursiveFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicRecursiveFormComponent, "nff-dynamic-recursive-form", never, { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "initialValue": { "alias": "initialValue"; "required": false; "isSignal": true; }; "formGroup": { "alias": "formGroup"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "addButtonCallback": { "alias": "addButtonCallback"; "required": false; "isSignal": true; }; }, { "remove": "remove"; "editable": "editableChange"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DynamicRecursiveFormComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DynamicRecursiveFormComponent, "nff-dynamic-recursive-form", never, { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "initialValue": { "alias": "initialValue"; "required": false; "isSignal": true; }; "formGroup": { "alias": "formGroup"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "addButtonCallback": { "alias": "addButtonCallback"; "required": false; "isSignal": true; }; "focusLeaf": { "alias": "focusLeaf"; "required": false; "isSignal": true; }; }, { "remove": "remove"; "editable": "editableChange"; }, never, never, true, never>;
 }
 
 /** Metadata on a list-container node that lets the tree add items to its FormArray. */
@@ -339,51 +390,62 @@ interface ListRef {
     itemSchema: NodeGroup;
     itemLabel: string;
     minItems: number;
+    maxItems?: number;
 }
 /** An absent optional (presence) child, offered by its parent node's "+ Optional field" menu. */
 interface OptionalEntry {
     key: string;
     schema: NodeType;
     label: string;
-    /** Index in the parent schema's children iteration; keeps the menu in schema order. */
-    order: number;
 }
-/** A navigable node in the config tree. Groups and list items are tree nodes; leaves are their detail. */
+/**
+ * One flat section of the detail pane. The selected node's subtree renders as a
+ * pre-order list of these — no nesting chrome: each section after the first is
+ * separated by a breadcrumb heading (`trail`), and holds only the node's *own*
+ * fields (`schema` is a leaf-only slice; complex children are sections of their
+ * own, deeper in the list).
+ */
+interface DetailSection {
+    node: TreeNode;
+    /** Selected-node-to-here trail, rendered as the section's breadcrumb heading (omitted on the first section). */
+    trail: TreeNode[];
+    /** Leaf-only slice of the node's own schema, or null when it has no own fields. */
+    schema: NodeGroup | null;
+    /** The group `schema` binds to (the node's group; for a choice, the choice group). */
+    group: FormGroup | null;
+}
+/**
+ * A navigable node in the config tree. Its `id` is the node's stable path from
+ * the root (`system/ntp`, `ifaces/0`, `servers/web1`), so expansion and
+ * selection survive tree rebuilds. Segments are `%`/`/`-escaped, since map
+ * entry keys are arbitrary runtime data; list-item identity is positional.
+ */
 interface TreeNode {
     id: string;
     label: string;
     children: TreeNode[];
-    /** Leaves editable when this node is selected. A presence leaf carries its `optional` entry so it can be removed back to the menu. */
-    leaves: {
-        key: string;
-        node: Leaf;
-        optional?: OptionalEntry;
-    }[];
-    leafLists: {
-        key: string;
-        node: LeafList;
-    }[];
-    /** The FormGroup holding this node's leaves, or null for a list-container or map node. */
+    /** The node's own FormGroup, or null for a list-container or map node. */
     group: FormGroup | null;
+    /** The node's own schema, set on group-backed nodes (groups, list items, group-valued map entries). */
+    schema?: NodeGroup;
     /** Present on a nodeGroupList node: lets a `+` add an item. */
     list?: ListRef;
-    /** Present on a list-item node: the FormArray and current index it can be removed from. */
+    /** Present on a list-item node: its current index in the parent list (removal goes through the parent list array). */
     removable?: {
-        array: FormArray;
         index: number;
     };
-    /** Absent optional children of this node, offered by its "+ Optional field" menu. */
+    /** Absent optional children of this node, offered by its "+ Optional field" menu (schema order). */
     optionals?: OptionalEntry[];
-    /** Present on a present optional child node: drives the row's remove control; removal returns `entry` to the parent's menu. */
+    /** Present on a present optional child node: drives the row's remove control. */
     presenceRemovable?: {
-        entry: OptionalEntry;
+        key: string;
     };
     /** Present on a choice node: the choice schema and its FormGroup (holding `__case` + the active case's fields). */
     choice?: {
         schema: NodeChoice;
         group: FormGroup;
     };
-    /** Present on a map node. `complex` maps expand entries as child nodes; leaf-valued maps edit inline in the detail pane. */
+    /** Present on a map node. `complex` maps expand entries as child nodes. */
     map?: {
         schema: NodeMap;
         group: FormGroup;
@@ -398,115 +460,179 @@ interface TreeNode {
 }
 /**
  * A tree/detail editor for a schema-built form: the structure (groups, lists,
- * maps, choices) is a tree on the left, and selecting a node shows that node's
- * fields for editing on the right. A `+` on a list or map node adds an entry; a
- * delete button on each item removes it. Absent optional (presence) children are
- * offered by a "+ Optional field" menu row at the end of their parent's
- * children; present ones carry a delete button that returns them to the menu.
+ * maps, choices) is a tree on the left, and selecting a node renders that
+ * node's **entire subtree** on the right as a **flat list of sections** — the
+ * node's own fields first, then every descendant's fields, each separated by a
+ * breadcrumb heading (`Service / Deploy scope / …`) instead of nested panels.
+ * Leaf fields render through {@link DynamicRecursiveFormComponent} with a
+ * leaf-only schema slice; choice selectors, map rows, and add controls render
+ * inline in their section. The tree adds row conveniences of its own: `+` on
+ * list and map rows, a delete control on removable rows, and a
+ * "+ Optional field" menu for absent presence children.
+ *
+ * The tree is **derived state**: any structural change to the form — made
+ * through the tree rows or through the detail sections — triggers a rebuild (a
+ * cheap shape signature over `valueChanges` detects it). Node ids are stable
+ * paths, so expansion and selection survive rebuilds. Swapping the `schema` or
+ * `formGroup` input rebinds the editor to the new pair, resetting expansion
+ * and selection.
  *
  * The component draws no outer container — only a divider between the tree and
- * detail panes — so the embedding client owns the surrounding chrome. The tree
- * is built once from the `schema`/`formGroup` provided at initialization.
- * An alternative to the all-in-one {@link DynamicRecursiveFormComponent} for
- * large configs.
+ * detail panes — so the embedding client owns the surrounding chrome.
  */
-declare class ConfigEditorComponent implements OnInit {
+declare class ConfigEditorComponent implements OnDestroy {
     /** The form-description schema whose structure the tree renders. */
-    readonly schema: i0.InputSignal<NodeGroup>;
+    readonly schema: _angular_core.InputSignal<NodeGroup>;
     /** The schema-built reactive group the editor binds to and mutates. */
-    readonly formGroup: i0.InputSignal<FormGroup<any>>;
+    readonly formGroup: _angular_core.InputSignal<FormGroup<any>>;
     /** Whether fields accept input and structural controls (add/remove/menus) show. */
-    readonly editable: i0.InputSignal<boolean>;
+    readonly editable: _angular_core.InputSignal<boolean>;
     root: TreeNode;
     selected: TreeNode | null;
+    /** The selected subtree as a flat, breadcrumb-separated section list. */
+    sections: DetailSection[];
+    /** Root-to-selection trail for the detail-pane breadcrumb, computed once per selection. */
+    breadcrumb: TreeNode[];
     readonly expanded: Set<string>;
-    private nextId;
-    ngOnInit(): void;
-    select(node: TreeNode): void;
-    /** Select a child (list item or sub-group) from the detail pane, keeping its parent expanded in the tree. */
-    open(parent: TreeNode, child: TreeNode): void;
+    private shape;
+    private changes?;
+    private readonly host;
+    /** Stable per-instance ids for the shape signature, so replacing a control (setControl) reads as a structural change. */
+    private readonly controlIds;
+    private controlIdSeq;
+    constructor();
+    ngOnDestroy(): void;
+    /** Bind the editor to a schema/form pair: fresh tree, root selection, and shape-sync subscription. */
+    private attach;
+    select(node: TreeNode, reveal?: boolean): void;
     /**
      * Root-to-`target` path for the detail-pane breadcrumb (inclusive of both ends),
-     * or an empty array if `target` is not in the current tree. Searched fresh each
-     * call so it stays correct after add/remove/presence mutations rebuild subtrees.
+     * or an empty array if `target` is not in the current tree.
      */
     pathTo(target: TreeNode): TreeNode[];
-    toggle(node: TreeNode): void;
+    protected toggle(node: TreeNode): void;
+    /** Keyboard access for tree rows: Enter/Space selects, ArrowRight expands, ArrowLeft collapses. */
+    protected onRowKeydown(event: KeyboardEvent, node: TreeNode): void;
     /** Whether the row shows an expand twisty: it has child rows to reveal (children or an optionals menu row). */
-    hasExpandableContent(node: TreeNode): boolean;
+    protected hasExpandableContent(node: TreeNode): boolean;
     /**
      * Whether the node's form subtree holds a validation error. Group/choice, list,
      * and map nodes each check their backing control; `invalid` aggregates over
      * descendants, so an error anywhere below lights every ancestor row.
      */
-    hasError(node: TreeNode): boolean;
-    /** Append a new item to a list node's FormArray and to the tree, then select it. */
+    protected hasError(node: TreeNode): boolean;
+    /** Append a new item to a list node's FormArray (up to `maxItems`), then select it. */
     addItem(listNode: TreeNode): void;
-    /** Remove a list item from its FormArray and the tree (down to `minItems`). */
+    /**
+     * Remove a list item from its FormArray (down to `minItems`). List-item
+     * identity is positional, so expansion state under the list is cleared —
+     * otherwise it would silently migrate to the items that shift into the
+     * removed indexes.
+     */
     removeItem(listNode: TreeNode, item: TreeNode): void;
-    /** The key of the optional leaf the user just added; its detail-pane field grabs focus when rendered. */
+    /** The just-added optional leaf (section path + key) whose field grabs focus when rendered. */
+    protected focusSectionId: string | null;
     protected focusLeafKey: string | null;
-    /** Add an absent optional child from the menu: build its control, place it in the tree, and select it. */
+    /** Add an absent optional child from the menu: build its control and select the node it lands on. */
     addOptional(node: TreeNode, entry: OptionalEntry): void;
     /** Remove a present optional child node, returning its entry to the parent's menu. */
     removeOptional(parent: TreeNode, node: TreeNode): void;
-    /** Remove a present optional leaf from the detail pane, returning its entry to the menu. */
-    removeOptionalLeaf(node: TreeNode, leaf: {
-        key: string;
-        node: Leaf;
-        optional?: OptionalEntry;
-    }): void;
     /** The active case name of a choice node, or null when none is selected. */
     activeCase(node: TreeNode): string | null;
     /** The display label of a choice node's active case, or null when no case is selected. */
     activeCaseLabel(node: TreeNode): string | null;
     /** The display label for a case: the schema's `caseLabels` entry, else the case name. */
-    caseLabel(choice: NodeChoice, caseName: string): string;
-    /** Switch a choice node's active case: swap the group's controls and rebuild the subtree in place. */
+    protected caseLabel(choice: NodeChoice, caseName: string): string;
+    /** Switch a choice node's active case; the structural sync rebuilds the tree and sections. */
     switchTreeCase(node: TreeNode, caseName: string): void;
+    protected objectKeys(obj: Record<string, unknown>): string[];
     /** Append a new entry to a complex map node under a generated unique key, then select it. */
     addTreeMapEntry(mapNode: TreeNode): void;
-    /** Remove a complex map entry (down to `minEntries`) from the form group and the tree. */
+    /** Remove a complex map entry (down to `minEntries`). */
     removeTreeMapEntry(mapNode: TreeNode, entryNode: TreeNode): void;
-    /** Commit a rename-on-blur of a map entry's key; on success the node is relabeled. */
+    /**
+     * Commit a rename-on-blur of a map entry's key; on success the entry is
+     * selected under its new path and its fresh key field regains focus (the
+     * rename re-renders the section under a new id, destroying the input that
+     * held focus).
+     */
     renameTreeMapEntry(entryNode: TreeNode, rawKey: string): void;
+    /** Move keyboard focus to the selected tree row once the action's re-render settles. */
+    private focusSelectedRow;
+    /** A muted hint for a section whose node currently renders no content of its own. */
+    protected emptySectionHint(s: DetailSection): string | null;
+    /** Whether a list node is at `maxItems` (the add control is hidden). */
+    protected listAtMax(node: TreeNode | undefined): boolean;
+    /** Whether a list node is at `minItems` (item remove controls are hidden). */
+    protected listAtMin(node: TreeNode | undefined): boolean;
     /** Whether a map node is at `maxEntries` (the add control is hidden). */
-    mapAtMax(node: TreeNode | undefined): boolean;
+    protected mapAtMax(node: TreeNode | undefined): boolean;
     /** Whether a map node is at `minEntries` (entry remove controls are hidden). */
-    mapAtMin(node: TreeNode | undefined): boolean;
-    protected readonly asFormControl: typeof asFormControl;
-    protected readonly asFormArray: typeof asFormArray;
-    protected readonly CASE_KEY = "__case";
-    objectKeys(obj: Record<string, unknown>): string[];
-    /** Re-index and re-label a list node's item children (just "#n") after add/remove. */
-    private renumber;
-    /** Select `fallback` when the current selection is no longer reachable in the tree. */
-    private reselectIfOrphaned;
-    /** Re-insert a removed optional's entry into the node's menu, keeping schema order. */
-    private reinsertOptional;
-    /** Synthetic group over a case's normalized fields, so a case body builds like any group. */
-    private caseAsGroup;
+    protected mapAtMin(node: TreeNode | undefined): boolean;
+    /** Rebuild the tree from the current form structure if its shape changed. */
+    private syncShape;
+    /**
+     * A cheap structural signature of a control tree: group keys (plus the active
+     * `__case`), array lengths, leaf placeholders. Value edits don't change it;
+     * added/removed/renamed controls and case switches do. Reading `__case` from
+     * any group is safe because the name is reserved (the builder rejects it as a
+     * case field name or map entry key), so only choice groups carry it.
+     */
+    private shapeOf;
+    /** The instance id a container contributes to the shape signature. */
+    private uidOf;
+    /** Rebuild the whole tree from schema + form and refresh the shape signature. */
+    private rebuild;
+    /** Re-point `selected` at the rebuilt tree: same path, else the closest surviving ancestor. */
+    private reconcileSelection;
+    /** The node at `path` in the current tree, or null. Walks by id-prefix segments. */
+    private byPath;
+    /** Select the node at `path`, falling back through its ancestors to the root. */
+    private selectByPath;
+    /**
+     * Flatten a subtree into detail sections, pre-order: the node's own fields
+     * first, then each child as its own breadcrumb-headed section. No nesting
+     * chrome — the headings are the boundaries between children.
+     */
+    private buildSections;
+    /** A section's own renderable fields: a leaf-only schema slice and the group it binds to. */
+    private sectionContent;
+    /**
+     * The node's own fields as a flattened schema: leaf and leafList children
+     * only. Complex children are rendered as sections of their own, so the
+     * embedded form never draws nested section chrome. Null when there are none.
+     */
+    private leafOnly;
     private buildTree;
     /** Build the tree node for a single non-leaf child, dispatching on its kind. Null when its control is missing. */
     private buildChildNode;
+    /** Synthetic group over a case's normalized fields, so a case body builds like any group. */
+    private caseAsGroup;
     /** A node's display label: its schema `label`, else its record key. */
     private labelOf;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ConfigEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ConfigEditorComponent, "nff-config-editor", never, { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "formGroup": { "alias": "formGroup"; "required": true; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    /** Join a parent path and a segment; the root's path is the empty string. */
+    private join;
+    /**
+     * Escape a path segment: `/` is the id separator, and map entry keys are
+     * arbitrary runtime data that may contain it. Labels stay unescaped — only
+     * node identities encode.
+     */
+    private escapeSeg;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfigEditorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfigEditorComponent, "nff-config-editor", never, { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "formGroup": { "alias": "formGroup"; "required": true; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class LeafRendererComponent implements OnInit, AfterViewInit {
+declare class LeafRendererComponent implements AfterViewInit {
     private readonly elementRef;
     leaf_: Leaf | AnonLeaf;
     control: FormControl;
-    initialValue?: any;
     removable: boolean;
     editable: boolean;
     /** Focus the field once rendered — for fields the user just added (e.g. an enabled presence leaf). */
     autofocus: boolean;
-    remove: EventEmitter<number>;
+    /** Emitted when the user removes this field (e.g. an optional presence leaf). */
+    readonly remove: _angular_core.OutputEmitterRef<void>;
     constructor(elementRef: ElementRef<HTMLElement>);
-    ngOnInit(): void;
     ngAfterViewInit(): void;
     /** Whether this field accepts input: the form is editable and the leaf is not `readOnly`. */
     get fieldEditable(): boolean;
@@ -516,8 +642,8 @@ declare class LeafRendererComponent implements OnInit, AfterViewInit {
      * state (invalid and touched), so it can be bound unconditionally.
      */
     get errorText(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LeafRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LeafRendererComponent, "nff-leaf-renderer", never, { "leaf_": { "alias": "leaf_"; "required": false; }; "control": { "alias": "control"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, { "remove": "remove"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LeafRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LeafRendererComponent, "nff-leaf-renderer", never, { "leaf_": { "alias": "leaf_"; "required": false; }; "control": { "alias": "control"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, { "remove": "remove"; }, never, never, true, never>;
 }
 
 declare class LeafListRendererComponent implements OnInit {
@@ -538,8 +664,8 @@ declare class LeafListRendererComponent implements OnInit {
     ngOnInit(): void;
     removeItem($index: number): void;
     addItem(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LeafListRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LeafListRendererComponent, "nff-leaf-list-renderer", never, { "leaf_": { "alias": "leaf_"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "formArray": { "alias": "formArray"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "minItems": { "alias": "minItems"; "required": false; }; }, { "message": "message"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LeafListRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LeafListRendererComponent, "nff-leaf-list-renderer", never, { "leaf_": { "alias": "leaf_"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "formArray": { "alias": "formArray"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "minItems": { "alias": "minItems"; "required": false; }; }, { "message": "message"; }, never, never, true, never>;
 }
 
 declare class LeafEnumRendererComponent {
@@ -549,8 +675,8 @@ declare class LeafEnumRendererComponent {
     removable: boolean;
     remove: any;
     editable: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LeafEnumRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LeafEnumRendererComponent, "nff-leaf-enum-renderer", never, { "leafEnum": { "alias": "leafEnum"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "control": { "alias": "control"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "remove": { "alias": "remove"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LeafEnumRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LeafEnumRendererComponent, "nff-leaf-enum-renderer", never, { "leafEnum": { "alias": "leafEnum"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "control": { "alias": "control"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "remove": { "alias": "remove"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class NodeGroupListRendererComponent implements OnInit, AfterViewInit {
@@ -570,8 +696,8 @@ declare class NodeGroupListRendererComponent implements OnInit, AfterViewInit {
     setLastEditable(): void;
     asFormGroup(group: any): FormGroup;
     getTitle($index: number): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NodeGroupListRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NodeGroupListRendererComponent, "nff-node-group-list-renderer", never, { "nodeGroupList": { "alias": "nodeGroupList"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "formArray": { "alias": "formArray"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "minItems": { "alias": "minItems"; "required": false; }; "maxItems": { "alias": "maxItems"; "required": false; }; }, { "message": "message"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NodeGroupListRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NodeGroupListRendererComponent, "nff-node-group-list-renderer", never, { "nodeGroupList": { "alias": "nodeGroupList"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "formArray": { "alias": "formArray"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "minItems": { "alias": "minItems"; "required": false; }; "maxItems": { "alias": "maxItems"; "required": false; }; }, { "message": "message"; }, never, never, true, never>;
 }
 
 /**
@@ -581,13 +707,13 @@ declare class NodeGroupListRendererComponent implements OnInit, AfterViewInit {
  * names are the entry keys, so the key is edited as a *rename* (remove + re-add
  * the same control) committed on blur — see {@link renameEntry}.
  */
-declare class NodeMapRendererComponent implements OnInit {
+declare class NodeMapRendererComponent implements OnChanges {
     nodeMap: NodeMap;
     formGroup: FormGroup<any>;
     editable: boolean;
     /** Ordered view of entry keys, kept stable across renames (`addControl` appends). */
     entryKeys: string[];
-    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     /** The value schema as a leaf (used when `value.kind === 'leaf'`). */
     get valueLeaf(): Leaf;
     /** The value schema as a group (used when `value.kind === 'nodeGroup'`). */
@@ -606,9 +732,9 @@ declare class NodeMapRendererComponent implements OnInit {
     renameEntry(oldKey: string, rawKey: string): void;
     protected readonly asFormControl: typeof asFormControl;
     protected readonly asFormGroup: typeof asFormGroup;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NodeMapRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NodeMapRendererComponent, "nff-node-map-renderer", never, { "nodeMap": { "alias": "nodeMap"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NodeMapRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NodeMapRendererComponent, "nff-node-map-renderer", never, { "nodeMap": { "alias": "nodeMap"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { CASE_KEY, ConfigEditorComponent, DynamicRecursiveFormComponent, LeafEnumRendererComponent, LeafListRendererComponent, LeafRendererComponent, NodeGroupListRendererComponent, NodeMapRendererComponent, addMapEntry, buildControl, buildFormFromSchema, caseFields, defineSchema, removeMapEntry, renameMapEntry, resolveChoiceCase, switchChoiceCase };
+export { CASE_KEY, ConfigEditorComponent, DynamicRecursiveFormComponent, LeafEnumRendererComponent, LeafListRendererComponent, LeafRendererComponent, NodeGroupListRendererComponent, NodeMapRendererComponent, addMapEntry, buildControl, buildFormFromSchema, caseFields, defineSchema, removeMapEntry, renameMapEntry, resolveChoiceCase, serializeForm, switchChoiceCase, toWireValue };
 export type { AnonLeaf, Appearance, ChoiceCase, DFormControl, DFormGroup, FormGroupType, Leaf, LeafBase, LeafBoolean, LeafEnum, LeafList, LeafNumber, LeafRuntimeType, LeafString, NodeChoice, NodeGroup, NodeGroupList, NodeMap, NodeType };