@tinya-code/gas-admin-ui 0.2.0-alpha.15 → 0.2.0-alpha.18

package/src/lib/pages/form-view/form-view.ts

@@ -1,1622 +0,0 @@
-import {
-  ApplicationRef,
-  Component,
-  computed,
-  effect,
-  inject,
-  Injector,
-  signal,
-} from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { form, submit } from '@angular/forms/signals';
-import { ActivatedRoute, Router } from '@angular/router';
-
-import { ViewNavigationService } from '../../core/view-navigation/view-navigation.service';
-import { firstValueFrom, of } from 'rxjs';
-
-import type { FieldSchema, LayoutMode, ResourceSchema } from '../../core/models/schema.model';
-import { isSupported } from '../../core/registry/render-registry';
-import { ApiService } from '../../core/services/api.service';
-import { AuthService } from '../../core/services/auth.service';
-import { ErrorMapperService, type MappedError } from '../../core/services/error-mapper.service';
-import { NotificationService } from '../../core/services/notification.service';
-import {
-  RelationDrawerService,
-  type RelationCreateRequest,
-} from '../../core/services/relation-drawer.service';
-import { FieldHost } from '../../fields/field-host/field-host';
-import { childTree, groupTree, type RootTree } from '../../fields/field-node';
-import { DrawerForm } from '../drawer-form/drawer-form';
-import { getSchema } from '../../core/registry/schema-catalog';
-import { collectDependsOn } from '../../shared/utils/depends-on';
-import { Button } from '../../shared/components/button/button';
-import { EmptyState } from '../../shared/components/empty-state/empty-state';
-import { PostCreateModal } from '../../shared/components/post-create-modal/post-create-modal';
-import { Skeleton } from '../../shared/components/skeleton/skeleton';
-import { colSpanClass } from '../../shared/utils/col-span';
-import { isRecord, mergeRecord } from '../../shared/utils/seed';
-import { buildFormSchema } from './form-schema';
-import { buildPayload, seedModel } from './form-model';
-
-type FormMode = 'create' | 'edit' | 'single';
-type FormStatus = 'loading' | 'ready' | 'error';
-
-interface SectionView {
-  id: string;
-  label: string;
-  fields: FieldSchema[];
-}
-
-/**
- * Un ítem del resumen de errores (§4.11). `id` es el que ya genera
- * `state().name()`: es a la vez el valor de `data-field` del envoltorio y el
- * `id` real del control, así que no se inventa ningún ancla nueva.
- */
-interface ErrorEntry {
-  id: string;
-  label: string;
-  message: string;
-  /** Sección/pestaña del campo raíz; `undefined` si no está en ninguna. */
-  section?: string;
-}
-
-const TAB_ACTIVE =
-  'border-b-2 border-primary px-3 py-2 text-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary';
-const TAB_INACTIVE =
-  'border-b-2 border-transparent px-3 py-2 text-sm text-neutral hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary';
-
-/** Espera antes de volcar el borrador a localStorage (§4.6). */
-const DRAFT_DEBOUNCE_MS = 800;
-
-/**
- * Fecha del registro tal como llega del backend. No está en el schema
- * (`updated_at` es un `readonly-text`, no un campo editable), así que se
- * prueba la forma habitual; si no hay, devuelve `undefined` y el borrador se
- * ofrece igual.
- */
-function readTimestamp(record: Record<string, unknown> | null): number | undefined {
-  if (!record) {
-    return undefined;
-  }
-  for (const key of ['updated_at', 'updatedAt', 'updated']) {
-    const raw = record[key];
-    if (typeof raw === 'number') {
-      return raw < 1e12 ? raw * 1000 : raw;
-    }
-    if (typeof raw === 'string') {
-      const parsed = Date.parse(raw);
-      if (!Number.isNaN(parsed)) {
-        return parsed;
-      }
-    }
-  }
-  return undefined;
-}
-
-/**
- * Formulario genérico: lo construye el schema del recurso (base.md §4–§6,
- * §10) con `form()` de Signal Forms sobre un modelo `Record<string, unknown>`.
- *
- * - **Acceso dinámico**: `form()[field.key]` no compila con claves
- *   arbitrarias; el modelo se tipa como `Record<string, unknown>` y el acceso
- *   vive en `fields/field-node.ts` (`childTree`) y en `form-schema.ts`
- *   (`pathAt`), que centralizan los dos casts.
- * - **Sin `debounce('blur')`**: difiere `controlValue → value` (el modelo), no
- *   la visibilidad de errores, y con controles custom (`multiselect`, que
- *   nunca emite `touch`) se perderían datos en el payload. La validación al
- *   perder foco la resuelve FieldHost (`invalid() && touched()`).
- * - `<form novalidate>`: Signal Forms expone `required` como atributo nativo,
- *   y la validación nativa del navegador bloquearía el submit sin mostrar
- *   nada (campos en `<details>` cerrados).
- */
-@Component({
-  selector: 'app-form-view',
-  imports: [Button, DrawerForm, EmptyState, FieldHost, PostCreateModal, Skeleton],
-  template: `
-    @if (schema()) {
-      <header class="mb-6 flex flex-wrap items-start justify-between gap-4">
-        <div>
-          <div class="flex flex-wrap items-center gap-3">
-            <h1 class="font-display text-2xl font-semibold">{{ heading() }}</h1>
-            @if (dirty()) {
-              <span
-                class="rounded-full bg-accent/15 px-2.5 py-0.5 text-xs font-medium text-accent-text"
-              >
-                Sin guardar
-              </span>
-            }
-          </div>
-          @if (mode() === 'single') {
-            <p class="text-sm text-neutral">Configuración única</p>
-          }
-        </div>
-        @if (mode() !== 'single') {
-          <button app-button variant="outline" type="button" (click)="back()">
-            Volver al listado
-          </button>
-        }
-      </header>
-
-      @switch (status()) {
-        @case ('loading') {
-          <app-skeleton [lines]="8" [height]="48" />
-        }
-        @case ('error') {
-          <app-empty-state
-            title="No se pudo cargar el registro"
-            message="Revisa tu conexión e intenta de nuevo."
-          >
-            <button app-button variant="outline" type="button" (click)="retry()">Reintentar</button>
-            <button app-button variant="outline" type="button" (click)="volverDeError()">
-              Volver
-            </button>
-          </app-empty-state>
-        }
-        @case ('ready') {
-          @if (formTree(); as tree) {
-            @if (serverErrors().general; as general) {
-              <p
-                class="mb-4 rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger"
-                role="alert"
-              >
-                {{ general }}
-              </p>
-            }
-
-            <form novalidate [attr.aria-busy]="saving()" (submit)="onSubmit($event)">
-              @if (draftOffer(); as offer) {
-                <!-- §4.6: se OFRECE, nunca se restaura solo. role=status para
-                     anunciarlo sin arrebatarle el foco a quien está escribiendo. -->
-                <div
-                  class="mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-neutral/20 bg-surface px-4 py-3 text-sm"
-                  role="status"
-                >
-                  <span class="text-neutral">
-                    Hay un borrador guardado {{ draftAge(offer.savedAt) }}.
-                  </span>
-                  <button app-button variant="outline" type="button" (click)="restoreDraft()">
-                    Restaurar
-                  </button>
-                  <button app-button variant="ghost" type="button" (click)="discardDraft()">
-                    Descartar
-                  </button>
-                </div>
-              }
-
-              @if (summaryErrors().length >= 2) {
-                <!-- Con uno solo no se pinta: el foco ya está en el campo y
-                     el resumen sólo restaría. Con 2+ es la única forma de
-                     ver que hay varios (§4.11). tabindex -1 para poder
-                     recibir el foco y que role=alert lo anuncie. -->
-                <div
-                  data-error-summary
-                  tabindex="-1"
-                  role="alert"
-                  aria-labelledby="error-summary-title"
-                  class="mb-4 rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 focus:outline-2 focus:outline-danger"
-                >
-                  <p id="error-summary-title" class="text-sm font-semibold text-danger">
-                    Hay {{ summaryErrors().length }} errores que corregir
-                  </p>
-                  <ul class="mt-2 list-disc space-y-1 pl-5 text-sm">
-                    @for (entry of summaryErrors(); track entry.id) {
-                      <li>
-                        <a
-                          href="#"
-                          class="text-danger underline underline-offset-2 hover:text-danger/80"
-                          (click)="goToError(entry, $event)"
-                        >
-                          {{ entry.label }} — {{ entry.message }}
-                        </a>
-                      </li>
-                    }
-                  </ul>
-                </div>
-              }
-
-              @if (layoutMode() === 'grid') {
-                <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
-                  @for (field of renderedFields(); track field.key) {
-                    <div [class]="colSpan(field)">
-                      <app-field-host
-                        [field]="field"
-                        [tree]="tree"
-                        [exists]="exists()"
-                        [serverErrors]="serverErrors().fields"
-                        [resource]="resourceId()"
-                      />
-                    </div>
-                  }
-                </div>
-              } @else if (unsectionedFields().length > 0) {
-                <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
-                  @for (field of unsectionedFields(); track field.key) {
-                    <div [class]="colSpan(field)">
-                      <app-field-host
-                        [field]="field"
-                        [tree]="tree"
-                        [exists]="exists()"
-                        [serverErrors]="serverErrors().fields"
-                        [resource]="resourceId()"
-                      />
-                    </div>
-                  }
-                </div>
-              }
-
-              @if (layoutMode() === 'tabs') {
-                <div
-                  role="tablist"
-                  class="mb-4 flex flex-wrap gap-1 border-b border-neutral/20"
-                  (keydown)="onTablistKeydown($event)"
-                >
-                  @for (section of sectionViews(); track section.id) {
-                    <button
-                      type="button"
-                      role="tab"
-                      [id]="tabId(section.id)"
-                      [class]="tabClass(section)"
-                      [attr.aria-selected]="activeSection() === section.id"
-                      [attr.tabindex]="activeSection() === section.id ? 0 : -1"
-                      (click)="selectSection(section.id)"
-                    >
-                      {{ section.label }}
-                      <!-- Progreso (§4.3, decisión A): el ✓ siempre que esté
-                           completa; el ⚠ recién después del primer Guardar.
-                           El glifo va oculto para lectores y el estado se
-                           cuenta aparte en texto. -->
-                      @switch (sectionProgress(section)) {
-                        @case ('problem') {
-                          <span class="ml-1 text-danger" aria-hidden="true">⚠</span>
-                          <span class="sr-only"> — con errores</span>
-                        }
-                        @case ('complete') {
-                          <span class="ml-1 text-success" aria-hidden="true">✓</span>
-                          <span class="sr-only"> — completa</span>
-                        }
-                      }
-                    </button>
-                  }
-                </div>
-              }
-
-              @if (layoutMode() === 'steps') {
-                <ol aria-label="Progreso del formulario" class="mb-4 flex flex-wrap gap-2">
-                  @for (section of sectionViews(); track section.id; let index = $index) {
-                    <li
-                      class="rounded-full border px-3 py-1 text-sm"
-                      [class.border-primary]="activeSection() === section.id"
-                      [class.font-semibold]="activeSection() === section.id"
-                      [attr.aria-current]="activeSection() === section.id ? 'step' : null"
-                    >
-                      {{ index + 1 }}. {{ section.label }}
-                    </li>
-                  }
-                </ol>
-              }
-
-              @if (layoutMode() === 'tabs' || layoutMode() === 'steps') {
-                @for (section of visibleSections(); track section.id) {
-                  <div
-                    role="tabpanel"
-                    [attr.id]="layoutMode() === 'steps' ? 'step-panel' : null"
-                    class="grid grid-cols-1 gap-x-4 sm:grid-cols-12"
-                  >
-                    @for (field of section.fields; track field.key) {
-                      <div [class]="colSpan(field)">
-                        <app-field-host
-                          [field]="field"
-                          [tree]="tree"
-                          [exists]="exists()"
-                          [serverErrors]="serverErrors().fields"
-                          [resource]="resourceId()"
-                        />
-                      </div>
-                    }
-                  </div>
-                }
-                @if (layoutMode() === 'steps' && sectionViews().length > 1) {
-                  <div class="mt-4 flex justify-between gap-3">
-                    <button
-                      app-button
-                      variant="outline"
-                      type="button"
-                      [disabled]="isFirstStep()"
-                      (click)="previousStep()"
-                    >
-                      Anterior
-                    </button>
-                    @if (!isLastStep()) {
-                      <button app-button type="button" (click)="nextStep()">Continuar</button>
-                    }
-                  </div>
-                }
-              } @else if (layoutMode() === 'columns') {
-                <div
-                  [class]="
-                    layoutColumns() === 3
-                      ? 'grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'
-                      : 'grid grid-cols-1 gap-4 md:grid-cols-2'
-                  "
-                >
-                  @for (section of sectionViews(); track section.id) {
-                    <section class="rounded-xl border border-neutral/20 bg-surface p-4">
-                      <h2 class="mb-3 text-section font-semibold">{{ section.label }}</h2>
-                      <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
-                        @for (field of section.fields; track field.key) {
-                          <div [class]="colSpan(field)">
-                            <app-field-host
-                              [field]="field"
-                              [tree]="tree"
-                              [exists]="exists()"
-                              [serverErrors]="serverErrors().fields"
-                              [resource]="resourceId()"
-                            />
-                          </div>
-                        }
-                      </div>
-                    </section>
-                  }
-                </div>
-              } @else if (layoutMode() === 'sections') {
-                <!-- Índice interno (§5.3): en escritorio, índice sticky a la
-                     izquierda; en móvil, chips horizontales. En tabs las
-                     pestañas ya hacen de índice, así que esto no se dibuja. -->
-                <div class="flex flex-col gap-4 lg:flex-row lg:gap-6">
-                  <nav
-                    aria-label="Secciones"
-                    class="sticky top-4 hidden shrink-0 self-start lg:block lg:w-44"
-                  >
-                    <p
-                      class="mb-2 text-xs font-semibold uppercase tracking-wide text-neutral"
-                      aria-hidden="true"
-                    >
-                      Secciones
-                    </p>
-                    <ul class="space-y-1 border-l border-neutral/20 pl-3">
-                      @for (section of visibleSections(); track section.id) {
-                        <li>
-                          <button
-                            type="button"
-                            class="w-full rounded px-2 py-1 text-left text-sm hover:bg-neutral/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-                            [class.font-medium]="sectionProgress(section) === 'problem'"
-                            (click)="goToSection(section.id)"
-                          >
-                            {{ section.label }}
-                            @switch (sectionProgress(section)) {
-                              @case ('problem') {
-                                <span class="ml-1 text-danger" aria-hidden="true">⚠</span>
-                                <span class="sr-only"> — con errores</span>
-                              }
-                              @case ('complete') {
-                                <span class="ml-1 text-success" aria-hidden="true">✓</span>
-                                <span class="sr-only"> — completa</span>
-                              }
-                            }
-                          </button>
-                        </li>
-                      }
-                    </ul>
-                  </nav>
-
-                  <div class="min-w-0 flex-1" [class.lg:grid]="layoutMode() === 'columns'">
-                    <nav
-                      aria-label="Secciones"
-                      class="-mx-1 mb-4 flex gap-2 overflow-x-auto px-1 pb-1 lg:hidden"
-                    >
-                      @for (section of visibleSections(); track section.id) {
-                        <button
-                          type="button"
-                          class="shrink-0 rounded-full border border-neutral/30 px-3 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-                          [class.border-danger]="sectionProgress(section) === 'problem'"
-                          [class.text-danger]="sectionProgress(section) === 'problem'"
-                          [class.font-medium]="sectionProgress(section) === 'problem'"
-                          (click)="goToSection(section.id)"
-                        >
-                          {{ section.label }}
-                        </button>
-                      }
-                    </nav>
-
-                    @for (section of visibleSections(); track section.id) {
-                      <details
-                        id="section-{{ section.id }}"
-                        class="mb-4 rounded-xl border border-neutral/20 bg-surface scroll-mt-4"
-                        [open]="isSectionOpen(section.id)"
-                        (toggle)="setSectionOpen(section.id, $event)"
-                      >
-                        <summary
-                          tabindex="-1"
-                          class="flex cursor-pointer items-center justify-between gap-2 rounded-xl px-4 py-3 text-section font-semibold hover:bg-neutral/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-                        >
-                          <span>{{ section.label }}</span>
-                          @if (sectionProgress(section) === 'problem') {
-                            <span class="text-xs font-medium text-danger">Revisar</span>
-                          }
-                        </summary>
-                        <div class="grid grid-cols-1 gap-x-4 px-4 pb-4 sm:grid-cols-12">
-                          @for (field of section.fields; track field.key) {
-                            <div [class]="colSpan(field)">
-                              <app-field-host
-                                [field]="field"
-                                [tree]="tree"
-                                [exists]="exists()"
-                                [serverErrors]="serverErrors().fields"
-                                [resource]="resourceId()"
-                              />
-                            </div>
-                          }
-                        </div>
-                      </details>
-                    }
-                  </div>
-                </div>
-              }
-
-              <!-- Sticky (§5.1): en products son 19 campos y Cancelar/Guardar
-                     desaparecían al final del scroll. bg-surface es opaco: sin
-                     él el contenido vería pasar por detrás. -->
-              <div
-                class="sticky bottom-0 z-10 mt-6 flex flex-wrap items-center justify-end gap-3 border-t border-neutral/20 bg-surface pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))]"
-              >
-                @if (canDelete()) {
-                  <div class="mr-auto">
-                    <button app-button variant="danger" type="button" (click)="remove()">
-                      Eliminar
-                    </button>
-                  </div>
-                }
-                @if (mode() !== 'create') {
-                  <!-- §5: descartar lo escrito y volver a lo del servidor. -->
-                  <button app-button variant="ghost" type="button" (click)="restablecer()">
-                    Restablecer
-                  </button>
-                }
-                <button app-button variant="outline" type="button" (click)="back()">
-                  Cancelar
-                </button>
-                <button app-button type="submit" [loading]="saving()" [disabled]="!canSave()">
-                  {{ saving() ? 'Guardando…' : 'Guardar' }}
-                </button>
-              </div>
-            </form>
-          }
-        }
-      }
-    } @else {
-      <app-empty-state
-        title="Recurso no encontrado"
-        message="No existe un schema con ese id en el registry."
-      />
-    }
-
-    <!-- «Crear nuevo» desde el dropdown de una relación (plan 6.4). Se monta
-         y desmonta con el pedido: el Drawer devuelve el foco al botón que lo
-         abrió al destruirse. -->
-    @if (relationDrawer.request(); as createRequest) {
-      @if (drawerSchema(createRequest.resource); as target) {
-        <app-drawer-form
-          [open]="true"
-          [schema]="target"
-          mode="create"
-          [title]="'Crear ' + target.label"
-          (close)="relationDrawer.clear()"
-          (saved)="relationCreated($event, createRequest)"
-        />
-      }
-    }
-
-    @if (createdWithSummary(); as createdRec) {
-      @if (schema()?.postCreate; as postCreateConfig) {
-        <app-post-create-modal
-          [schema]="schema()!"
-          [config]="postCreateConfig"
-          [record]="createdRec"
-          (closed)="onPostCreateClosed()"
-        />
-      }
-    }
-  `,
-})
-export class FormView {
-  /** Puente con el control `relation` (ver `relation-drawer.service`). */
-  readonly relationDrawer = inject(RelationDrawerService);
-
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
-  private readonly nav = inject(ViewNavigationService);
-  private readonly api = inject(ApiService);
-  private readonly auth = inject(AuthService);
-  private readonly notifications = inject(NotificationService);
-  private readonly errorMapper = inject(ErrorMapperService);
-  /** `form()` puede reconstruirse fuera de contexto (cambio de ruta). */
-  private readonly injector = inject(Injector);
-  /** Estabilidad de la app: cambio de sección + carga de chunks (ver `goToError`). */
-  private readonly appRef = inject(ApplicationRef);
-  private readonly params = toSignal(this.route.paramMap, { requireSync: true });
-  private readonly routeData = toSignal(this.route.data ?? of({}), { requireSync: true });
-
-  readonly schema = computed(() => {
-    const resourceId = this.routeData()['resourceId'] ?? this.params().get('id');
-    return getSchema(typeof resourceId === 'string' ? resourceId : '');
-  });
-  /** Recurso actual (lo consumen `image` para pedir la firma, §11.2). */
-  readonly resourceId = computed(() => this.schema()?.id ?? '');
-
-  /** Registro recién creado para alimentar el modal de resumen post-creación. */
-  readonly createdWithSummary = signal<Record<string, unknown> | null>(null);
-
-  readonly mode = computed<FormMode>(() => {
-    const schema = this.schema();
-    if (!schema) {
-      return 'single';
-    }
-    if (this.params().get('key') !== null) {
-      return 'edit';
-    }
-    return schema.kind === 'singleton' ? 'single' : 'create';
-  });
-
-  readonly heading = computed(() => {
-    const schema = this.schema();
-    if (!schema) {
-      return '';
-    }
-    switch (this.mode()) {
-      case 'create':
-        return `Nueva ${schema.label}`;
-      case 'edit':
-        return `Editar ${schema.label}`;
-      case 'single':
-        return schema.labelPlural;
-    }
-  });
-
-  readonly status = signal<FormStatus>('loading');
-  /**
-   * D4 — el error ORIGINAL de `load()` con identidad intacta (el mensaje
-   * mostrado es display-only). Se limpia cuando un reintento termina bien.
-   */
-  private errorCarga: unknown = undefined;
-
-  errorDeCarga(): unknown {
-    return this.status() === 'error' ? this.errorCarga : undefined;
-  }
-  /** Estado «guardando» del botón (además del bloqueo interno de `submit`). */
-  readonly saving = signal(false);
-  /** Errores del backend: rutas de campo + mensaje general (base.md §10). */
-  readonly serverErrors = signal<MappedError>({ fields: {} });
-  /** Pestaña activa (solo `layout.mode === 'tabs'`). */
-  readonly activeSection = signal<string | null>(null);
-  private readonly attemptedSteps = signal<ReadonlySet<string>>(new Set());
-
-  private readonly openSections = signal<Record<string, boolean>>({});
-  private readonly formTree = signal<RootTree | null>(null);
-  /** Evita que una respuesta lenta pise el formulario ya reconstruido. */
-  private loadEpoch = 0;
-  /**
-   * Borrador (§4.6 / plan 5.4). `draftOffer` queda en `null` cuando no hay
-   * nada que ofrecer: NUNCA se restaura solo, sólo con un clic del usuario.
-   */
-  private readonly draftOffer = signal<{ savedAt: number; value: Record<string, unknown> } | null>(
-    null,
-  );
-  /** Snapshot de lo que vino del servidor; sólo se guarda si el usuario cambió algo. */
-  private loadedSnapshot = '';
-  /** Registro original, para «Restablecer» (§5). */
-  private loadedRecord: Record<string, unknown> | null = null;
-  /** Snapshot de los padres de `dependsOn` y el árbol al que pertenece. */
-  private readonly dependsOnSnapshot = new Map<string, string>();
-  private dependsOnTree: RootTree | null = null;
-  /**
-   * Hubo un intento de guardado. Sin este guardia el resumen aparecería de
-   * entrada en cualquier formulario con `required` vacíos: `invalid()` es
-   * cierto desde el primer render, no sólo después de enviar.
-   *
-   * También gobierna el `⚠` de las pestañas y el bloqueo al cambiar de
-   * pestaña (decisión A): antes del primer Guardar un campo `required` vacío
-   * YA es inválido, y andar gritando `⚠` —o trancando la navegación— al
-   * usuario que todavía no le erró a nada es ruido, no ayuda.
-   */
-  readonly submitted = signal(false);
-
-  constructor() {
-    // `paramMap` emite síncrono al suscribirse: el primer `rebuild()` corre
-    // dentro del constructor (contexto de inyección) y los siguientes, al
-    // cambiar de ruta (`new` → `edit`), por eso `form()` lleva `injector`.
-    this.route.paramMap.subscribe(() => this.rebuild());
-
-    // Autoguardado del borrador (§4.6): se dispara con cada cambio del árbol
-    // y debouncea 800 ms. `tree().value()` es la lectura que registra la
-    // dependencia — sin ella el effect no vería las ediciones del usuario.
-    effect((onCleanup) => {
-      const tree = this.formTree();
-      if (!tree) {
-        return;
-      }
-      const value = tree().value();
-      if (this.status() !== 'ready' || JSON.stringify(value) === this.loadedSnapshot) {
-        return;
-      }
-      const timer = setTimeout(() => this.saveDraft(value), DRAFT_DEBOUNCE_MS);
-      onCleanup(() => clearTimeout(timer));
-    });
-
-    // Selección dependiente (guía §1, plan 6.6): cuando el padre cambia, el
-    // hijo vuelve a su default. `disabled()` en `form-schema.ts` ya lo dejó
-    // ineditable mientras el padre esté vacío; esto es la otra mitad.
-    // La lectura de `value()` del padre es la que registra la dependencia.
-    effect(() => {
-      const tree = this.formTree();
-      const schema = this.schema();
-      if (tree === null || !schema) {
-        this.dependsOnSnapshot.clear();
-        this.dependsOnTree = null;
-        return;
-      }
-      if (this.dependsOnTree !== tree) {
-        // Árbol reconstruido (cambio de ruta): los valores anteriores ya no
-        // significan nada, se empieza de cero para no limpiar nada de más.
-        this.dependsOnTree = tree;
-        this.dependsOnSnapshot.clear();
-      }
-      for (const link of collectDependsOn(schema.fields)) {
-        let container: RootTree = tree;
-        for (const key of link.container) {
-          container = groupTree(container, key);
-        }
-        const parentValue = JSON.stringify(
-          childTree<unknown>(container, link.parentKey)().value() ?? null,
-        );
-        const previous = this.dependsOnSnapshot.get(link.id);
-        if (previous !== undefined && previous !== parentValue) {
-          childTree<unknown>(container, link.childKey)().value.set(link.resetValue);
-        }
-        this.dependsOnSnapshot.set(link.id, parentValue);
-      }
-    });
-  }
-
-  // ── Layout (base.md §4) ──
-
-  readonly layoutMode = computed<LayoutMode>(() => {
-    const mode = this.schema()?.layout?.mode ?? 'sections';
-    if (!isSupported('layout', mode)) {
-      throw new Error(`No existe un descriptor para el layout "${mode}".`);
-    }
-    return mode;
-  });
-
-  readonly layoutColumns = computed(() => this.schema()?.layout?.columns ?? 2);
-
-  /** Campos que la UI sabe dibujar (los de Fase 11 se omiten, no se borran del payload). */
-  readonly renderedFields = computed(() =>
-    (this.schema()?.fields ?? []).filter((field) => isSupported('field', field.type)),
-  );
-
-  /**
-   * Ítems del resumen de errores (§4.11), vacío hasta que se intente guardar.
-   *
-   * Recorre el ÁRBOL, no `serverErrors.fields`: el backend sólo puede
-   * devolver un `path` por respuesta (`api.md §7`), así que ahí nunca hay más
-   * de un ítem. Los errores múltiples los produce la validación del cliente,
-   * que `submit()` deja marcados como tocados de una.
-   */
-  readonly summaryErrors = computed<ErrorEntry[]>(() => {
-    if (!this.submitted()) {
-      return [];
-    }
-    const errors = this.collectErrors();
-    if (this.layoutMode() !== 'steps') {
-      return errors;
-    }
-    const attempted = this.attemptedSteps();
-    return errors.filter((entry) => !entry.section || attempted.has(entry.section));
-  });
-
-  /** Secciones con al menos un campo dibujable. */
-  readonly sectionViews = computed<SectionView[]>(() => {
-    const layout = this.schema()?.layout;
-    if (!layout) {
-      return [];
-    }
-    const rendered = this.renderedFields();
-    return (layout.sections ?? [])
-      .map((section) => ({
-        id: section.id,
-        label: section.label,
-        fields: rendered.filter((field) => field.section === section.id),
-      }))
-      .filter((view) => view.fields.length > 0);
-  });
-
-  /** Campos sin sección (o con una sección inexistente): siempre visibles. */
-  readonly unsectionedFields = computed(() => {
-    const ids = new Set(this.sectionViews().map((view) => view.id));
-    return this.renderedFields().filter(
-      (field) => field.section === undefined || !ids.has(field.section),
-    );
-  });
-
-  /** En pestañas solo se dibuja la activa; en secciones, todas (colapsables). */
-  readonly visibleSections = computed<SectionView[]>(() => {
-    const sections = this.sectionViews();
-    if (this.layoutMode() !== 'tabs' && this.layoutMode() !== 'steps') {
-      return sections;
-    }
-    const active = sections.find((section) => section.id === this.activeSection()) ?? sections[0];
-    return active ? [active] : [];
-  });
-
-  // ── Estado del formulario ──
-
-  /** Indicador _dirty_ + aviso al salir (base.md §10). Agrega descendientes. */
-  readonly dirty = computed(() => this.formTree()?.().dirty() ?? false);
-
-  /** `slug` con `lockAfterCreate` se bloquea solo si el registro ya existe. */
-  readonly exists = computed(() => this.mode() !== 'create');
-
-  readonly canSave = computed(() => {
-    const schema = this.schema();
-    if (!schema) return false;
-    if (this.layoutMode() === 'steps' && !this.isLastStep()) return false;
-    const operation = this.mode() === 'create' ? 'create' : 'update';
-    return this.auth.canDoOperation(schema, operation);
-  });
-
-  readonly canDelete = computed(() => {
-    const schema = this.schema();
-    return this.mode() === 'edit' && schema && this.auth.canDoOperation(schema, 'remove');
-  });
-
-  // ── Ciclo de vida ──
-
-  /** Reconstruye el formulario al cambiar de ruta o de recurso. */
-  private rebuild(): void {
-    const schema = this.schema();
-    this.serverErrors.set({ fields: {} });
-    this.openSections.set({});
-    this.activeSection.set(null);
-    this.attemptedSteps.set(new Set());
-    this.submitted.set(false);
-
-    if (!schema) {
-      this.formTree.set(null);
-      this.status.set('error');
-      return;
-    }
-
-    const model = signal(seedModel(schema));
-    const schemaFn = buildFormSchema(schema, this.api, this.recordKey() ?? undefined);
-    this.formTree.set(form(model, schemaFn, { injector: this.injector }));
-    this.activeSection.set(this.sectionViews()[0]?.id ?? null);
-
-    // El snapshot de «sin cambios» arranca en los defaults sembrados; si no,
-    // el effect guardaría un borrador con el formulario recién abierto.
-    const tree = this.formTree();
-    this.loadedSnapshot = JSON.stringify(tree ? tree().value() : {});
-    this.loadedRecord = null;
-    this.draftOffer.set(null);
-
-    if (this.mode() === 'create') {
-      // Crear no lee nada: el formulario está listo de entrada.
-      this.status.set('ready');
-      // En crear solo hay clave de recurso sin key: un borrador previo sí
-      // puede aplicar (mismo «nuevo»), así que se ofrece.
-      this.offerDraft(null);
-      return;
-    }
-    this.status.set('loading');
-    void this.load();
-  }
-
-  private async load(): Promise<void> {
-    const schema = this.schema();
-    const tree = this.formTree();
-    if (!schema || !tree) {
-      return;
-    }
-    const epoch = ++this.loadEpoch;
-    try {
-      const record = await firstValueFrom(
-        this.api.get<Record<string, unknown>>(schema.endpoint, this.recordKey() ?? undefined),
-      );
-      if (epoch !== this.loadEpoch) {
-        return;
-      }
-      this.applyRecord(tree, schema, record ?? {});
-      this.loadedRecord = record ?? {};
-      this.errorCarga = undefined;
-      this.status.set('ready');
-      // Recién termina la carga: es el único momento en que tiene sentido
-      // comparar el borrador con el servidor.
-      this.offerDraft(record ?? null);
-    } catch (error) {
-      if (epoch !== this.loadEpoch) {
-        return;
-      }
-      this.errorCarga = error;
-      this.status.set('error');
-    }
-  }
-
-  /**
-   * Siembra defaults + registro: los campos ausentes en la respuesta conservan
-   * su valor por defecto y los grupos/ítems parciales se fusionan en profundidad
-   * (si no, `childTree` no encontraría nodos y revienta al renderizar).
-   * `value.set` es programático: no marca `dirty`.
-   */
-  private applyRecord(
-    tree: RootTree,
-    schema: ResourceSchema,
-    record: Record<string, unknown>,
-  ): void {
-    tree().value.set(mergeRecord(schema.fields, record));
-    // Base de comparación del autoguardado: con esto el effect no escribe un
-    // borrador idéntico al servidor apenas termina la carga.
-    this.loadedSnapshot = JSON.stringify(tree().value());
-  }
-
-  // ── Borrador (§4.6, plan 5.4) ──
-
-  /** `draft:<recurso>:<key|nuevo>` — aislado por recurso Y registro. */
-  private draftStorageKey(): string {
-    return `draft:${this.resourceId()}:${this.recordKey() ?? 'nuevo'}`;
-  }
-
-  /** Best-effort: localStorage puede fallar (modo privado, cuota). */
-  private saveDraft(value: Record<string, unknown>): void {
-    try {
-      localStorage.setItem(this.draftStorageKey(), JSON.stringify({ savedAt: Date.now(), value }));
-    } catch {
-      /* el borrador nunca debe romper el formulario */
-    }
-  }
-
-  /**
-   * Ofrece el borrador si es más reciente que el servidor. Si el registro no
-   * trae fecha, cualquier borrador sirve — sólo existe si el usuario cambió
-   * algo, porque `loadedSnapshot` filtra los idénticos.
-   */
-  private offerDraft(serverRecord: Record<string, unknown> | null): void {
-    let raw: string | null = null;
-    try {
-      raw = localStorage.getItem(this.draftStorageKey());
-    } catch {
-      return;
-    }
-    if (!raw) {
-      return;
-    }
-    let draft: { savedAt?: number; value?: unknown } | null = null;
-    try {
-      draft = JSON.parse(raw) as { savedAt?: number; value?: unknown };
-    } catch {
-      return;
-    }
-    if (!draft || typeof draft.savedAt !== 'number' || !isRecord(draft.value)) {
-      this.clearDraft();
-      return;
-    }
-
-    const serverTs = readTimestamp(serverRecord);
-    if (serverTs !== undefined && serverTs >= draft.savedAt) {
-      // El servidor ya tiene algo más nuevo: el borrador está vencido.
-      this.clearDraft();
-      return;
-    }
-    this.draftOffer.set({ savedAt: draft.savedAt, value: draft.value });
-  }
-
-  /** Restaurar es una acción explícita del usuario (§4.6: nunca en silencio). */
-  restoreDraft(): void {
-    const offer = this.draftOffer();
-    const tree = this.formTree();
-    const schema = this.schema();
-    if (!offer || !tree || !schema) {
-      return;
-    }
-    this.applyRecord(tree, schema, offer.value);
-    this.draftOffer.set(null);
-    this.notifications.info('Borrador restaurado.');
-  }
-
-  /** Descarta el borrador sin tocar lo cargado. */
-  discardDraft(): void {
-    this.clearDraft();
-    this.draftOffer.set(null);
-  }
-
-  private clearDraft(): void {
-    try {
-      localStorage.removeItem(this.draftStorageKey());
-    } catch {
-      /* idem */
-    }
-  }
-
-  /** «hace 1 min» — relativo y discreto (§4.6). */
-  draftAge(savedAt: number): string {
-    const minutes = Math.max(1, Math.round((Date.now() - savedAt) / 60_000));
-    if (minutes < 60) {
-      return `hace ${minutes} min`;
-    }
-    const hours = Math.round(minutes / 60);
-    return `hace ${hours} ${hours === 1 ? 'hora' : 'horas'}`;
-  }
-
-  /**
-   * Botón «Restablecer» (§5): vuelve a lo que vino del servidor y limpia el
-   * borrador. Es la única vía de descartar cambios en modo edición.
-   */
-  restablecer(): void {
-    const tree = this.formTree();
-    const schema = this.schema();
-    if (!tree || !schema) {
-      return;
-    }
-    this.applyRecord(tree, schema, this.loadedRecord ?? seedModel(schema));
-    this.serverErrors.set({ fields: {} });
-    this.submitted.set(false);
-    this.attemptedSteps.set(new Set());
-    this.draftOffer.set(null);
-    this.clearDraft();
-    this.notifications.info('Se restauraron los valores originales.');
-  }
-
-  retry(): void {
-    void this.load();
-  }
-
-  /**
-   * D4 — «way back» desde el estado de error: en la ruta directa
-   * (`/:id/new`, `/:id/:key/edit`) no hay output que escape, así que el
-   * servicio declarado navega al origen registrado o a la raíz del recurso.
-   */
-  protected volverDeError(): void {
-    void this.nav.back();
-  }
-
-  // ── Guardado ──
-
-  async onSubmit(event: Event): Promise<void> {
-    event.preventDefault();
-    const tree = this.formTree();
-    if (!tree || this.saving()) {
-      return;
-    }
-    this.serverErrors.set({ fields: {} });
-    this.saving.set(true);
-    try {
-      const ok = await submit(tree, {
-        // `null` = sin errores: los del backend salen por `applyServerErrors`
-        // (también si `submit` dio `true`), para no dejar el form invalidado.
-        action: async () => {
-          await this.persist(tree);
-          return null;
-        },
-        onInvalid: () => this.revealErrors(),
-      });
-      if (!ok || this.hasServerErrors()) {
-        this.revealErrors();
-      }
-    } finally {
-      this.saving.set(false);
-    }
-  }
-
-  /**
-   * create/update según el modo; nunca lanza (los errores van a `serverErrors`).
-   *
-   * **Regla de éxito por flujo** (guía §6: «toast y volver a la lista o
-   * quedarse según el flujo») — es la misma para los cuatro recursos:
-   *
-   * - **Crear** desde la pantalla completa → **vuelve a la lista** del
-   *   recurso: el registro quedó creado y no hay nada más que editar acá.
-   * - **Editar** → **se queda** y recarga lo guardado: el usuario sigue
-   *   trabajando sobre el mismo registro.
-   * - **Eliminar** → **vuelve a la lista** (`back()`).
-   * - **Desde un drawer** (crear una relación desde el dropdown, edición
-   *   rápida desde la lista) → **se queda** donde estaba: salir destruiría
-   *   el contexto que el drawer existía para conservar. Ver
-   *   `drawer-form.ts` y `relation-drawer.service.ts`.
-   *
-   * El toast se emite **antes** de navegar y el contenedor vive en el
-   * layout, así que sobrevive al cambio de ruta y el mensaje se lee igual.
-   */
-  private async persist(tree: RootTree): Promise<void> {
-    const schema = this.schema();
-    if (!schema) {
-      return;
-    }
-    const payload = buildPayload(schema, tree);
-
-    try {
-      if (this.mode() === 'create') {
-        const created = await firstValueFrom(
-          this.api.create<Record<string, unknown>>(schema.endpoint, payload),
-        );
-        // Limpia `dirty` antes de navegar o abrir modal: si no, el guard pediría confirmar.
-        tree().reset();
-        // El borrador ya no aporta nada (§5.5).
-        this.clearDraft();
-        this.draftOffer.set(null);
-
-        if (schema.postCreate?.mode === 'modal') {
-          this.createdWithSummary.set(created ?? (payload as Record<string, unknown>));
-          return;
-        }
-
-        this.notifications.success('Registro creado.');
-        // Vuelve al listado del recurso (el «inicio» de la colección); al
-        // reentrar en `:id/new` el form se reconstruye limpio.
-        void this.router.navigate(['/', schema.id]);
-        return;
-      }
-
-      await firstValueFrom(
-        this.api.update<Record<string, unknown>>(
-          schema.endpoint,
-          this.mode() === 'edit' ? (this.recordKey() ?? undefined) : undefined,
-          payload,
-        ),
-      );
-      this.notifications.success('Registro guardado.');
-      tree().reset();
-      // Guardado exitoso = fin del borrador (§5.5). El snapshot se actualiza
-      // para que el effect no lo reescriba con los valores ya persistidos.
-      this.clearDraft();
-      this.draftOffer.set(null);
-      this.loadedSnapshot = JSON.stringify(tree().value());
-    } catch (err) {
-      this.applyServerErrors(this.errorMapper.map(err));
-      return;
-    }
-
-    // Recarga del valor guardado (base.md §10); su fallo no invalida el guardado.
-    try {
-      const record = await firstValueFrom(
-        this.api.get<Record<string, unknown>>(schema.endpoint, this.recordKey() ?? undefined),
-      );
-      this.applyRecord(tree, schema, record ?? {});
-      tree().reset();
-    } catch {
-      this.notifications.error('No se pudo recargar el registro.');
-    }
-  }
-
-  /**
-   * Errores del backend → mapa por ruta; el mensaje se queda en `general`
-   * sólo si su raíz (`address`, `faq[2]` → `faq`) no es un campo dibujado
-   * (base.md §10). Los hijos anidados se resuelven en el host con
-   * `serverErrors[prefix + key]`.
-   */
-  private applyServerErrors(mapped: MappedError): void {
-    const rendered = new Set(this.renderedFields().map((field) => field.key));
-    const fields: Record<string, string> = {};
-    const loose: string[] = [];
-    if (mapped.general) {
-      loose.push(mapped.general);
-    }
-    for (const [path, message] of Object.entries(mapped.fields)) {
-      const root = path.split(/[.[]/)[0];
-      if (rendered.has(root)) {
-        fields[path] = message;
-      } else {
-        // Campo no dibujado u oculto: el usuario tiene que verlo.
-        loose.push(message);
-      }
-    }
-    this.serverErrors.set({ fields, general: loose.length > 0 ? loose.join(' ') : undefined });
-  }
-
-  private hasServerErrors(): boolean {
-    const current = this.serverErrors();
-    return current.general !== undefined || Object.keys(current.fields).length > 0;
-  }
-
-  /** Muestra todos los errores: abre secciones, activa la pestaña con problemas. */
-  private revealErrors(): void {
-    // Marca el intento: habilita `summaryErrors` (vacío hasta acá).
-    this.submitted.set(true);
-    const sections = this.sectionViews();
-    if (this.layoutMode() === 'sections') {
-      this.openSections.update((open) => {
-        const next = { ...open };
-        for (const section of sections) {
-          next[section.id] = true;
-        }
-        return next;
-      });
-    }
-    const withProblem = sections.find((section) => this.sectionHasProblem(section));
-    if (withProblem && this.layoutMode() === 'tabs') {
-      this.activeSection.set(withProblem.id);
-    }
-    if (this.layoutMode() === 'steps') {
-      const invalidSteps = sections
-        .filter((section) => this.sectionHasProblem(section))
-        .map((section) => section.id);
-      this.attemptedSteps.update((attempted) => new Set([...attempted, ...invalidSteps]));
-      if (withProblem) {
-        this.activeSection.set(withProblem.id);
-      }
-    }
-    // Una vez abiertas/activadas las secciones con errores, el navegador
-    // debe IR al primer campo con problema (no quedarse arriba del form).
-    // `setTimeout`: los mensajes se pintan en la pasada de change detection
-    // posterior al submit.
-    setTimeout(() => {
-      if (this.summaryErrors().length >= 2) {
-        this.focusSummary();
-      } else {
-        this.scrollToFirstError();
-      }
-    });
-  }
-
-  /** Scroll + focus al primer campo visible con mensaje de error. */
-  private scrollToFirstError(): void {
-    for (const wrap of document.querySelectorAll<HTMLElement>('[data-field]')) {
-      if (!wrap.querySelector('p[role="alert"]')) {
-        continue;
-      }
-      wrap.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      const focusable = wrap.querySelector<HTMLElement>(
-        'input:not([type="hidden"]), textarea, select, [contenteditable="true"]',
-      );
-      focusable?.focus({ preventScroll: true });
-      return;
-    }
-  }
-
-  // ── Borrado ──
-
-  async remove(): Promise<void> {
-    const schema = this.schema();
-    const key = this.recordKey();
-    if (!schema || this.mode() !== 'edit' || !key) {
-      return;
-    }
-    const title = this.title();
-    const accepted = await this.notifications.confirm({
-      title: title ? `Eliminar «${title}»` : `Eliminar ${schema.label.toLowerCase()}`,
-      message: 'Esta acción no se puede deshacer.',
-      confirmLabel: 'Eliminar',
-      cancelLabel: 'Cancelar',
-    });
-    if (!accepted) {
-      return;
-    }
-    try {
-      await firstValueFrom(this.api.remove(schema.endpoint, key));
-      this.notifications.success('Registro eliminado.');
-      this.back();
-    } catch (err) {
-      // El motivo (p. ej. «categoría con productos») lo decide el backend.
-      this.notifications.error(this.errorMapper.messageOf(err));
-    }
-  }
-
-  /** Consultado por `unsavedChangesGuard` al salir de la ruta. */
-  async canDeactivate(): Promise<boolean> {
-    if (!this.dirty()) {
-      return true;
-    }
-    return this.notifications.confirm({
-      title: 'Cambios sin guardar',
-      message: 'Si sales ahora, se perderán los cambios realizados.',
-      confirmLabel: 'Salir sin guardar',
-      cancelLabel: 'Seguir editando',
-    });
-  }
-
-  back(): void {
-    void this.router.navigate(['/', this.schema()?.id]);
-  }
-
-  onPostCreateClosed(): void {
-    const schema = this.schema();
-    this.createdWithSummary.set(null);
-    if (schema) {
-      void this.router.navigate(['/', schema.id]);
-    }
-  }
-
-  // ── Helpers de template ──
-
-  colSpan(field: FieldSchema): string {
-    return colSpanClass(field.width);
-  }
-
-  /** Id estable de una pestaña: ancla del foco programático. */
-  tabId(sectionId: string): string {
-    return `section-tab-${sectionId}`;
-  }
-
-  /**
-   * `role="tab"` exige moverse con `ArrowLeft`/`ArrowRight`/`Home`/`End`
-   * (WAI-ARIA APG). El foco se reengancha al que quedó ACTIVO, no al que se
-   * pidió: si `selectSection()` bloquea el cambio por validación (§4.9,
-   * decisión A) la selección no se mueve y el foco se queda donde estaba.
-   *
-   * Este handler es también lo que hace correcto el `Tab`: con el roving
-   * `tabindex` sólo la pestaña activa entra en el orden de tabulación, así
-   * que `Tab` va del tablist al primer campo de la sección en lugar de
-   * recorrer las pestañas apagadas.
-   */
-  onTablistKeydown(event: KeyboardEvent): void {
-    const tabs = this.sectionViews();
-    if (tabs.length < 2) {
-      return;
-    }
-    const current = Math.max(
-      tabs.findIndex((section) => section.id === this.activeSection()),
-      0,
-    );
-
-    let next: number;
-    switch (event.key) {
-      case 'ArrowRight':
-        next = (current + 1) % tabs.length;
-        break;
-      case 'ArrowLeft':
-        next = (current - 1 + tabs.length) % tabs.length;
-        break;
-      case 'Home':
-        next = 0;
-        break;
-      case 'End':
-        next = tabs.length - 1;
-        break;
-      default:
-        return;
-    }
-
-    event.preventDefault();
-    this.selectSection(tabs[next].id);
-    const active = this.activeSection() ?? tabs[current].id;
-    document.getElementById(this.tabId(active))?.focus();
-  }
-
-  tabClass(section: SectionView): string {
-    return section.id === this.activeSection() ? TAB_ACTIVE : TAB_INACTIVE;
-  }
-
-  isFirstStep(): boolean {
-    const sections = this.sectionViews();
-    return sections.findIndex((section) => section.id === this.activeSection()) <= 0;
-  }
-
-  isLastStep(): boolean {
-    const sections = this.sectionViews();
-    const index = sections.findIndex((section) => section.id === this.activeSection());
-    return sections.length === 0 || index >= sections.length - 1;
-  }
-
-  previousStep(): void {
-    const sections = this.sectionViews();
-    const current = sections.findIndex((section) => section.id === this.activeSection());
-    if (current > 0) {
-      this.activeSection.set(sections[current - 1].id);
-      this.scrollToStep();
-    }
-  }
-
-  nextStep(): void {
-    const sections = this.sectionViews();
-    const current = sections.findIndex((section) => section.id === this.activeSection());
-    if (current < 0 || current >= sections.length - 1) {
-      return;
-    }
-    if (current === 0 && this.unsectionedHasLocalErrors()) {
-      this.revealUnsectionedErrors();
-      return;
-    }
-    const section = sections[current];
-    if (this.sectionHasLocalErrors(section.id)) {
-      this.attemptedSteps.update((attempted) => new Set([...attempted, section.id]));
-      this.revealSectionErrors(section.id);
-      return;
-    }
-    this.activeSection.set(sections[current + 1].id);
-    this.scrollToStep();
-  }
-
-  private unsectionedHasLocalErrors(): boolean {
-    const tree = this.formTree();
-    return (
-      tree !== null &&
-      this.unsectionedFields().some((field) => childTree<unknown>(tree, field.key)().invalid())
-    );
-  }
-
-  private revealUnsectionedErrors(): void {
-    const tree = this.formTree();
-    if (!tree) {
-      return;
-    }
-    this.submitted.set(true);
-    for (const field of this.unsectionedFields()) {
-      childTree<unknown>(tree, field.key)().markAsTouched();
-    }
-    setTimeout(() => this.scrollToFirstError());
-  }
-
-  private scrollToStep(): void {
-    setTimeout(() =>
-      document.getElementById('step-panel')?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start',
-      }),
-    );
-  }
-
-  selectSection(id: string): void {
-    const current = this.activeSection();
-    // §4.9 / plan 5.7, decisión A: sólo se tranc después del primer envío.
-    // Antes, `invalid()` es cierto por los `required` vacíos y no se le puede
-    // prohibir al usuario recorrer las pestañas para ver qué hay en cada una.
-    if (
-      this.submitted() &&
-      current !== null &&
-      current !== id &&
-      this.sectionHasLocalErrors(current)
-    ) {
-      this.revealSectionErrors(current);
-      return;
-    }
-    this.activeSection.set(id);
-  }
-
-  /** Sólo validación local: los errores del backend no bloquean navegar. */
-  private sectionHasLocalErrors(sectionId: string): boolean {
-    const tree = this.formTree();
-    const section = this.sectionViews().find((view) => view.id === sectionId);
-    if (!tree || !section) {
-      return false;
-    }
-    return section.fields.some((field) => childTree<unknown>(tree, field.key)().invalid());
-  }
-
-  /**
-   * Marca la sección como tocada (los mensajes sólo aparecen una vez tocado)
-   * y devuelve el foco al primer campo con problema, sin cambiar de pestaña.
-   */
-  private revealSectionErrors(sectionId: string): void {
-    const tree = this.formTree();
-    const section = this.sectionViews().find((view) => view.id === sectionId);
-    if (!tree || !section) {
-      return;
-    }
-    this.submitted.set(true);
-    this.attemptedSteps.update((attempted) => new Set([...attempted, sectionId]));
-    for (const field of section.fields) {
-      childTree<unknown>(tree, field.key)().markAsTouched();
-    }
-    // Los mensajes se pintan en la pasada de change detection posterior.
-    setTimeout(() => this.scrollToFirstError());
-  }
-
-  isSectionOpen(id: string): boolean {
-    // Las secciones arrancan abiertas (base.md §4).
-    return this.openSections()[id] ?? true;
-  }
-
-  setSectionOpen(id: string, event: Event): void {
-    const open = (event.target as HTMLDetailsElement).open;
-    this.openSections.update((sections) => ({ ...sections, [id]: open }));
-  }
-
-  /**
-   * Índice lateral (§5.3) → sección. Abre el `<details>` primero: si estaba
-   * plegado, saltar antes daría con un elemento sin altura. El foco va al
-   * `<summary>` para que el teclado siga teniendo dónde continuar.
-   */
-  goToSection(id: string): void {
-    this.openSections.update((open) => ({ ...open, [id]: true }));
-    setTimeout(() => {
-      const section = document.getElementById(`section-${id}`);
-      if (!section) {
-        return;
-      }
-      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      section.querySelector<HTMLElement>('summary')?.focus({ preventScroll: true });
-    });
-  }
-
-  /** Invalido (propio, anidado o del backend): marca la pestaña/sección. */
-  fieldHasProblem(field: FieldSchema): boolean {
-    const root = field.key;
-    const hasServerError = Object.keys(this.serverErrors().fields).some(
-      (path) => path === root || path.startsWith(`${root}.`) || path.startsWith(`${root}[`),
-    );
-    if (hasServerError) {
-      return true;
-    }
-    const tree = this.formTree();
-    return tree !== null && childTree<unknown>(tree, root)().invalid();
-  }
-
-  sectionHasProblem(section: SectionView): boolean {
-    return section.fields.some((field) => this.fieldHasProblem(field));
-  }
-
-  /**
-   * Estado de progreso de una sección (§4.3 / decisión A).
-   *
-   * - `complete`: sin problemas → `✓` siempre, es progreso positivo.
-   * - `problem`: con problemas **después** del primer envío → `⚠`.
-   * - `pending`: con problemas pero todavía no se envió → sin marca, para
-   *   no amedrentar a quien recién abrió el formulario.
-   */
-  sectionProgress(section: SectionView): 'problem' | 'complete' | 'pending' {
-    if (!this.sectionHasProblem(section)) {
-      return 'complete';
-    }
-    if (this.layoutMode() === 'steps' && !this.attemptedSteps().has(section.id)) {
-      return 'pending';
-    }
-    return this.submitted() ? 'problem' : 'pending';
-  }
-
-  // ── Resumen de errores (§4.11) ──
-
-  /**
-   * Un ítem por campo con problema, recorriendo el árbol. Los `group` se
-   * descienden para quedar en la hoja (ahí está el mensaje real); los
-   * compuestos (`list`, `key-value`, `string-list`) se listan como uno,
-   * porque el envoltorio es el único ancla a la que se puede saltar.
-   */
-  private collectErrors(): ErrorEntry[] {
-    const tree = this.formTree();
-    if (!tree) {
-      return [];
-    }
-    const server = this.serverErrors().fields;
-    const entries: ErrorEntry[] = [];
-    const seen = new Set<string>();
-
-    const walk = (
-      fields: readonly FieldSchema[],
-      subtree: RootTree,
-      inheritedSection?: string,
-    ): void => {
-      for (const field of fields) {
-        const section = field.section ?? inheritedSection;
-        const state = childTree<unknown>(subtree, field.key)();
-        const serverMessage = this.serverMessageFor(field.key, server);
-
-        if (field.type === 'group') {
-          const before = entries.length;
-          walk(field.fields, groupTree(subtree, field.key), section);
-          // El grupo sigue marcado pero ningún hijo aportó el motivo.
-          if (entries.length === before && (serverMessage || state.invalid())) {
-            seen.add(state.name());
-            entries.push({
-              id: state.name(),
-              label: field.label,
-              message: serverMessage ?? 'Revisa este campo',
-              section,
-            });
-          }
-          continue;
-        }
-
-        if (!state.invalid() && !serverMessage) {
-          continue;
-        }
-        const composite =
-          field.type === 'list' || field.type === 'key-value' || field.type === 'string-list';
-        const id = state.name();
-        if (seen.has(id)) {
-          continue;
-        }
-        seen.add(id);
-        entries.push({
-          id,
-          label: field.label,
-          message:
-            serverMessage ??
-            state.errors()[0]?.message ??
-            (composite ? 'Hay elementos con errores' : 'Revisa este campo'),
-          section,
-        });
-      }
-    };
-
-    walk(this.renderedFields(), tree);
-    return entries;
-  }
-
-  /** Mensaje del backend para una ruta raíz (`faq` cubre `faq[2].answer`). */
-  private serverMessageFor(root: string, server: Record<string, string>): string | undefined {
-    for (const [path, message] of Object.entries(server)) {
-      if (path === root || path.startsWith(`${root}.`) || path.startsWith(`${root}[`)) {
-        return message;
-      }
-    }
-    return undefined;
-  }
-
-  /**
-   * Enlace del resumen → campo. Cambia de pestaña/sección si hace falta y
-   * sólo después salta: en modo tabs el campo de otra pestaña todavía no
-   * existe en el DOM en este punto.
-   *
-   * Esperar la estabilidad sustituye al `setTimeout` anterior: cubre de una
-   * vez la pasada de change detection del cambio de sección **y** la carga
-   * del chunk perezoso del descriptor (`load()`, R3.4). Sin esa espera el
-   * foco se pierde sobre el envoltorio, que sí existe pero todavía no tiene
-   * control dentro.
-   */
-  async goToError(entry: ErrorEntry, event: Event): Promise<void> {
-    event.preventDefault();
-    if (entry.section) {
-      if (this.layoutMode() === 'tabs' || this.layoutMode() === 'steps') {
-        this.activeSection.set(entry.section);
-      } else {
-        this.openSections.update((open) => ({ ...open, [entry.section as string]: true }));
-      }
-    }
-    await this.appRef.whenStable();
-    this.focusField(entry.id);
-  }
-
-  /** Scroll + focus al campo con `data-field="id"` (mismo selector que `scrollToFirstError`). */
-  private focusField(id: string): void {
-    const wrap = document.querySelector<HTMLElement>(`[data-field="${id}"]`);
-    if (!wrap) {
-      return;
-    }
-    wrap.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    const focusable = wrap.querySelector<HTMLElement>(
-      'input:not([type="hidden"]), textarea, select, [contenteditable="true"]',
-    );
-    focusable?.focus({ preventScroll: true });
-  }
-
-  /**
-   * Con 2+ errores el foco va al resumen: es la única forma de que el usuario
-   * sepa que hay varios. Con uno solo se lo roba el campo, que ya está a la
-   * vista — por eso el resumen ni se pinta entonces.
-   */
-  private focusSummary(): void {
-    const summary = document.querySelector<HTMLElement>('[data-error-summary]');
-    summary?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    summary?.focus({ preventScroll: true });
-  }
-
-  private title(): string {
-    const tree = this.formTree();
-    const schema = this.schema();
-    if (!tree || !schema) {
-      return '';
-    }
-    const value = tree().value()[schema.titleField];
-    return typeof value === 'string' ? value : '';
-  }
-
-  private recordKey(): string | null {
-    return this.params().get('key');
-  }
-
-  /** Schema destino del panel «Crear nuevo»; `undefined` si no existe. */
-  drawerSchema(resource: string): ResourceSchema | undefined {
-    return getSchema(resource);
-  }
-
-  /**
-   * Cerró el panel con un registro nuevo: se cierra, y si vino con clave se
-   * le pasa a la relación que lo pidió (recarga sus opciones y lo selecciona).
-   */
-  relationCreated(record: Record<string, unknown>, request: RelationCreateRequest): void {
-    const target = getSchema(request.resource);
-    const key = target === undefined ? undefined : record[target.keyField];
-    this.relationDrawer.clear();
-    if (key === undefined || key === null || key === '') {
-      return;
-    }
-    request.onCreated(String(key));
-  }
-}