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

package/src/lib/fields/list/list.ts

@@ -0,0 +1,376 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, computed, inject, input, signal, type TemplateRef } from '@angular/core';
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragHandle,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
+
+import { LucideArrowDown, LucideArrowUp, LucideGripVertical, LucideTrash2 } from '@lucide/angular';
+import type { ListField } from '../../core/models/schema.model';
+import { NotificationService } from '../../core/services/notification.service';
+import { Button } from '../../shared/components/button/button';
+import { colSpanClass } from '../../shared/utils/col-span';
+import {
+  appendPosition,
+  computeMove,
+  GAP,
+  type PositionedItem,
+} from '../../shared/utils/gap-sorting';
+import { seedFields } from '../../shared/utils/seed';
+import { itemTree, listTree, type ListChildContext, type RootTree } from '../field-node';
+
+/**
+ * Lista de ítems (base.md §6): asa de arrastre, subir/bajar, eliminar con
+ * confirmación (sólo si el ítem tiene contenido) y agregar respetando
+ * `min`/`max`.
+ *
+ * **Los hijos los renderiza el despachador**: este componente recibe el
+ * `TemplateRef` (#childTpl, declarado en el `@case` de `field-host`) y lo
+ * instancia una vez por ítem con `ngTemplateOutlet`. No importa FieldHost —
+ * un import mutuo revienta en runtime (ciclo-check del repo).
+ *
+ * El orden de visualización ES el orden del arreglo modelo; `position`
+ * (gap-sorting, base.md §8) se calcula junto con cada mutación y viaja en el
+ * payload. Un hueco que deja un `remove` se autocura en el siguiente `move`.
+ */
+@Component({
+  selector: 'app-field-list',
+  imports: [
+    Button,
+    CdkDrag,
+    CdkDragHandle,
+    CdkDropList,
+    LucideArrowDown,
+    LucideArrowUp,
+    LucideGripVertical,
+    LucideTrash2,
+    NgTemplateOutlet,
+  ],
+  template: `
+    @if (items().length === 0) {
+      <p
+        class="rounded-lg border border-dashed border-neutral/30 px-4 py-6 text-center text-sm text-neutral"
+      >
+        {{ field().emptyText ?? 'Sin elementos.' }}
+      </p>
+    } @else {
+      <div
+        cdkDropList
+        class="space-y-3"
+        [cdkDropListData]="items()"
+        [cdkDropListDisabled]="!sortable()"
+        (cdkDropListDropped)="onDrop($event)"
+      >
+        @for (item of items(); track $index; let i = $index) {
+          <div
+            class="rounded-xl border border-neutral/20 bg-surface p-3"
+            cdkDrag
+            [cdkDragDisabled]="!sortable()"
+          >
+            <div class="mb-2 flex items-center gap-1.5">
+              @if (sortable()) {
+                <button
+                  type="button"
+                  app-button
+                  variant="ghost"
+                  size="icon"
+                  class="cursor-grab"
+                  cdkDragHandle
+                  [attr.aria-label]="'Reordenar elemento ' + (i + 1)"
+                  title="Arrastrar para reordenar"
+                >
+                  <svg lucideGripVertical size="16" />
+                </button>
+              }
+              @if (isAccordion()) {
+                <button
+                  type="button"
+                  class="flex min-w-0 items-center gap-1 text-sm font-medium"
+                  [attr.aria-expanded]="openOf(i)"
+                  (click)="toggle(i)"
+                >
+                  <span aria-hidden="true">{{ openOf(i) ? '▾' : '▸' }}</span>
+                  <span class="truncate">{{ titleOf(i) }}</span>
+                </button>
+              }
+              @if (isPrimary(i)) {
+                <span
+                  class="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+                >
+                  Principal
+                </span>
+              }
+              @if (hasProblem(i)) {
+                <span class="text-xs font-medium text-danger">Revisar</span>
+              }
+              <span class="ml-auto flex shrink-0 items-center gap-2 lg:gap-1">
+                <button
+                  type="button"
+                  app-button
+                  variant="ghost"
+                  size="icon"
+                  [disabled]="i === 0"
+                  [attr.aria-label]="'Subir elemento ' + (i + 1)"
+                  (click)="move(i, -1)"
+                >
+                  <svg lucideArrowUp size="16" />
+                </button>
+                <button
+                  type="button"
+                  app-button
+                  variant="ghost"
+                  size="icon"
+                  [disabled]="i === items().length - 1"
+                  [attr.aria-label]="'Bajar elemento ' + (i + 1)"
+                  (click)="move(i, 1)"
+                >
+                  <svg lucideArrowDown size="16" />
+                </button>
+                <button
+                  type="button"
+                  app-button
+                  variant="ghost"
+                  size="icon"
+                  [disabled]="!canRemove()"
+                  [attr.aria-label]="'Eliminar elemento ' + (i + 1)"
+                  (click)="remove(i)"
+                >
+                  <svg lucideTrash2 size="16" />
+                </button>
+              </span>
+            </div>
+            @if (!isAccordion() || openOf(i)) {
+              @if (isRow()) {
+                <div class="flex flex-wrap items-start gap-3">
+                  <ng-container
+                    [ngTemplateOutlet]="childTemplate()"
+                    [ngTemplateOutletContext]="childContext(i)"
+                  />
+                </div>
+              } @else {
+                <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+                  <ng-container
+                    [ngTemplateOutlet]="childTemplate()"
+                    [ngTemplateOutletContext]="childContext(i)"
+                  />
+                </div>
+              }
+            }
+          </div>
+        }
+      </div>
+    }
+
+    <div class="mt-3">
+      <button app-button variant="outline" type="button" [disabled]="!canAdd()" (click)="add()">
+        + {{ field().addLabel ?? 'Agregar elemento' }}
+      </button>
+    </div>
+  `,
+})
+export class FieldList {
+  readonly field = input.required<ListField>();
+  readonly tree = input.required<RootTree>();
+  readonly serverErrors = input<Record<string, string>>({});
+  readonly pathPrefix = input('');
+  readonly exists = input(false);
+  /** Template de los hijos, declarado en el `@case` del despachador. */
+  readonly childTemplate = input.required<TemplateRef<ListChildContext>>();
+
+  private readonly notifications = inject(NotificationService);
+
+  /** Intento de apertura por ítem (`undefined` → sigue el auto-open). */
+  private readonly intent = signal<Record<number, boolean>>({});
+
+  private readonly itemsTree = computed(() =>
+    listTree<Record<string, unknown>>(this.tree(), this.field().key),
+  );
+  private readonly state = computed(() => this.itemsTree()());
+  protected readonly items = computed(() => this.state().value() ?? []);
+
+  protected readonly sortable = computed(() => this.field().sortable ?? true);
+  /** Clase fija de la barra de ícono (literal: Tailwind v4 es JIT). */
+
+  protected canAdd(): boolean {
+    const max = this.field().max;
+    return max === undefined || this.items().length < max;
+  }
+
+  protected canRemove(): boolean {
+    return this.items().length > (this.field().min ?? 0);
+  }
+
+  protected isAccordion(): boolean {
+    return this.field().itemDisplay === 'accordion';
+  }
+
+  protected isRow(): boolean {
+    return this.field().itemDisplay === 'row';
+  }
+
+  protected isPrimary(index: number): boolean {
+    return (this.field().primaryFirst ?? false) && index === 0;
+  }
+
+  protected titleOf(index: number): string {
+    const item = this.items()[index];
+    const key = this.field().itemTitle;
+    const value = key !== undefined && item !== undefined ? item[key] : undefined;
+    return typeof value === 'string' && value !== '' ? value : `#${index + 1}`;
+  }
+
+  // ── Ítem abierto (accordion) ──
+
+  protected openOf(index: number): boolean {
+    const forced = this.intent()[index];
+    if (forced !== undefined) {
+      return forced;
+    }
+    return this.hasProblem(index);
+  }
+
+  protected toggle(index: number): void {
+    const willOpen = !this.openOf(index);
+    this.intent.update((map) => ({ ...map, [index]: willOpen }));
+  }
+
+  /** Inválido+tocado (agrega hijos) o error del backend bajo `key[i].`. */
+  hasProblem(index: number): boolean {
+    const state = itemTree(this.itemsTree(), index)();
+    if (state.invalid() && state.touched()) {
+      return true;
+    }
+    const prefix = `${this.pathPrefix()}${this.field().key}[${index}].`;
+    return Object.keys(this.serverErrors()).some((path) => path.startsWith(prefix));
+  }
+
+  // ── Mutaciones (todas sobre `controlValue` → marcan `dirty` solas) ──
+
+  protected add(): void {
+    if (!this.canAdd()) {
+      return;
+    }
+    const item = seedFields(this.field().itemFields);
+    const positionKey = this.field().positionField;
+    if (positionKey !== undefined) {
+      item[positionKey] = appendPosition(this.positioned());
+    }
+    const newIndex = this.items().length;
+    this.updateItems((next) => {
+      next.push(item);
+    });
+    // El ítem nuevo arranca visible.
+    this.intent.update((map) => ({ ...map, [newIndex]: true }));
+  }
+
+  protected move(index: number, direction: -1 | 1): void {
+    const target = index + direction;
+    if (target < 0 || target >= this.items().length) {
+      return;
+    }
+    this.applyMove(index, target);
+  }
+
+  protected onDrop(event: CdkDragDrop<Record<string, unknown>[]>): void {
+    if (event.previousIndex === event.currentIndex) {
+      return;
+    }
+    this.applyMove(event.previousIndex, event.currentIndex);
+  }
+
+  protected async remove(index: number): Promise<void> {
+    if (!this.canRemove()) {
+      return;
+    }
+    if (this.hasContent(index)) {
+      const accepted = await this.notifications.confirm({
+        title: `Eliminar elemento ${index + 1}`,
+        message: 'Esta acción no se puede deshacer.',
+        confirmLabel: 'Eliminar',
+        cancelLabel: 'Cancelar',
+      });
+      if (!accepted) {
+        return;
+      }
+    }
+    this.updateItems((next) => {
+      next.splice(index, 1);
+    });
+    this.intent.set({});
+  }
+
+  /**
+   * Contexto fresco por ítem: los nodos se atan a la identidad (NG01904).
+   *
+   * `$implicit` lleva el objeto completo: en el `ng-template` del host,
+   * `let-child` (sin alias) lee `$implicit` — `NgTemplateOutlet` reparte el
+   * contexto como propiedades top-level, no existe un alias mágico.
+   */
+  protected childContext(index: number): ListChildContext & { $implicit: ListChildContext } {
+    const context: ListChildContext = {
+      fields: this.field().itemFields,
+      tree: itemTree(this.itemsTree(), index),
+      prefix: `${this.pathPrefix()}${this.field().key}[${index}].`,
+      errors: this.serverErrors(),
+      exists: this.exists(),
+      row: this.isRow(),
+      colSpan: colSpanClass,
+    };
+    return { ...context, $implicit: context };
+  }
+
+  /** Ítem con algo distinto de sus `default` → pide confirmación. */
+  private hasContent(index: number): boolean {
+    const item = this.items()[index];
+    if (item === undefined) {
+      return false;
+    }
+    return JSON.stringify(item) !== JSON.stringify(seedFields(this.field().itemFields));
+  }
+
+  /**
+   * Mueve el ítem y recalcula su `position` (base.md §8): los cambios de
+   * posición se aplican ANTES del splice porque las claves referencian los
+   * índices originales.
+   */
+  private applyMove(from: number, to: number): void {
+    const positionKey = this.field().positionField;
+    this.updateItems((next) => {
+      if (positionKey !== undefined) {
+        const result = computeMove(this.positioned(), String(from), to);
+        for (const change of result.changes) {
+          const item = next[Number(change.key)];
+          if (item !== undefined) {
+            item[positionKey] = change.position;
+          }
+        }
+      }
+      moveItemInArray(next, from, to);
+    });
+    this.intent.set({});
+  }
+
+  /** Posiciones actuales; sin `positionField` no se calculan. */
+  private positioned(): PositionedItem[] {
+    const positionKey = this.field().positionField;
+    return this.items().map((item, index) => {
+      const raw = positionKey !== undefined ? item[positionKey] : undefined;
+      // Fallback: un registro viejo sin `position` se numera como rebalanceo.
+      return {
+        key: String(index),
+        position: typeof raw === 'number' ? raw : (index + 1) * GAP,
+      };
+    });
+  }
+
+  private updateItems(mutator: (next: Record<string, unknown>[]) => void): void {
+    this.state().controlValue.update((current) => {
+      const next = [...current];
+      mutator(next);
+      return next;
+    });
+  }
+}

package/src/lib/fields/multiselect/multiselect.descriptor.ts

@@ -0,0 +1,11 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/** Descriptor del campo `multiselect` (R3.3). */
+export const descriptor: RenderDescriptor = {
+  kind: 'field',
+  type: 'multiselect',
+  since: '1.0',
+  load: () => import('./multiselect').then((module) => module.FieldMultiselect),
+  seed: 'array',
+  surfaces: ['form', 'display'],
+};

package/src/lib/fields/multiselect/multiselect.spec.ts

@@ -0,0 +1,142 @@
+import { setSchemaCatalog } from '../../core/registry/schema-catalog';
+import { testCatalog } from '../../core/testing/test-catalog';
+
+setSchemaCatalog(testCatalog);
+
+import { Component, EnvironmentInjector, signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { type FieldTree, FormField, form } from '@angular/forms/signals';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import type { MultiselectField } from '../../core/models/schema.model';
+import { ApiService } from '../../core/services/api.service';
+import { childTree, type RootTree } from '../field-node';
+import { FieldMultiselect } from './multiselect';
+
+const FILAS = [
+  { slug: 'bebidas', name: 'Bebidas' },
+  { slug: 'pan', name: 'Pan' },
+];
+
+/**
+ * El anfitrión escrito a mano es obligatorio (D27): `model()` de `value`
+ * sólo se inicializa si el binding `[formField]` está en el HTML de una
+ * plantilla compilada — igual que en `render-host`.
+ */
+@Component({
+  template: `<app-field-multiselect [field]="field" [formField]="node" [tree]="tree" />`,
+  imports: [FieldMultiselect, FormField],
+})
+class Host {
+  field!: MultiselectField;
+  node!: FieldTree<string[]>;
+  tree!: RootTree;
+}
+
+describe('Campo multiselect', () => {
+  const listSpy = vi.fn((endpoint?: unknown, payload?: unknown) => of([...FILAS]));
+
+  beforeEach(async () => {
+    listSpy.mockReset();
+    listSpy.mockImplementation(() => of(FILAS.map((fila) => ({ ...fila }))));
+    await TestBed.configureTestingModule({
+      imports: [Host],
+      providers: [{ provide: ApiService, useValue: { list: listSpy } }],
+    }).compileComponents();
+  });
+
+  async function create(field: MultiselectField, extra: Record<string, unknown> = {}) {
+    const fixture = TestBed.createComponent(Host);
+    const model = signal<Record<string, unknown>>({ [field.key]: [], ...extra });
+    const tree = form(model, () => {}, {
+      injector: TestBed.inject(EnvironmentInjector),
+    }) as unknown as RootTree;
+    fixture.componentInstance.field = field;
+    fixture.componentInstance.tree = tree;
+    fixture.componentInstance.node = childTree<string[]>(tree, field.key);
+    fixture.detectChanges();
+    return { fixture, model };
+  }
+
+  const botones = (fixture: { nativeElement: HTMLElement }): string[] =>
+    Array.from(fixture.nativeElement.querySelectorAll('button')).map(
+      (button) => button.textContent?.trim() ?? '',
+    );
+
+  it('con source pide las filas y pinta una opción por fila', async () => {
+    const { fixture } = await create({
+      type: 'multiselect',
+      key: 'tags',
+      label: 'Etiquetas',
+      source: { resource: 'categories', valueField: 'slug', labelField: 'name' },
+    });
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(listSpy).toHaveBeenCalledTimes(1);
+    expect(botones(fixture)).toEqual(['Bebidas', 'Pan']);
+  });
+
+  it('las opciones estáticas no piden nada a la red', async () => {
+    const { fixture } = await create({
+      type: 'multiselect',
+      key: 'tags',
+      label: 'Etiquetas',
+      options: [
+        { value: 'a', label: 'A' },
+        { value: 'b', label: 'B' },
+      ],
+    });
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(listSpy).not.toHaveBeenCalled();
+    expect(botones(fixture)).toEqual(['A', 'B']);
+  });
+
+  it('source.params se resuelven con el registro del formulario (`tree`)', async () => {
+    // Sin `tree` el multiselect no podría resolver `{lang}` y mandaría la
+    // plantilla cruda: sería la única regla distinta del select (F8).
+    const { fixture, model } = await create(
+      {
+        type: 'multiselect',
+        key: 'tags',
+        label: 'Etiquetas',
+        source: { resource: 'categories', params: { orden: '{lang}' } },
+      },
+      { lang: 'es' },
+    );
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(listSpy.mock.calls[0][1]).toEqual({ params: { orden: 'es' } });
+
+    model.set({ tags: [], lang: 'en' });
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(listSpy).toHaveBeenCalledTimes(2);
+    expect(listSpy.mock.calls[1][1]).toEqual({ params: { orden: 'en' } });
+  });
+
+  it('un fallo de carga se anuncia y no pinta opciones', async () => {
+    listSpy.mockImplementation(() => {
+      throw new Error('503');
+    });
+    const { fixture } = await create({
+      type: 'multiselect',
+      key: 'tags',
+      label: 'Etiquetas',
+      source: { resource: 'categories' },
+    });
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const aviso = fixture.nativeElement.querySelector('[role="alert"]');
+    expect(aviso).not.toBeNull();
+    expect(aviso.textContent).toContain('No se pudieron cargar las opciones.');
+    expect(botones(fixture)).toEqual([]);
+  });
+});

package/src/lib/fields/multiselect/multiselect.ts

@@ -0,0 +1,152 @@
+import { Component, computed, inject, input, model, resource } from '@angular/core';
+import { LucideX } from '@lucide/angular';
+import type { FormValueControl } from '@angular/forms/signals';
+
+import type { MultiselectField, SelectOption } from '../../core/models/schema.model';
+import { DataSourceService, dataSourceKey } from '../../core/services/data-source.service';
+import { optionsFromRows } from '../../core/utils/source-options';
+import { getSchema } from '../../core/registry/schema-catalog';
+import type { RootTree } from '../field-node';
+
+/**
+ * Selección múltiple con chips (base.md §5.1). `<select multiple>` no está
+ * soportado por `[formField]`, así que es un control propio que cumple el
+ * contrato `FormValueControl<string[]>`: el nodo llega desde el host con
+ * `[formField]` y el valor se sincroniza por `model()`.
+ *
+ * Opciones: estáticas (`options`) o una fuente declarada (`source`), con la
+ * misma regla XOR que el `select` y el mismo fetcher (F8 · R6.5). `tree`
+ * existe para resolver `{campo}` en `source.params` con el registro del
+ * formulario — sin él un multiselect con parámetros quedaría con el mismo
+ * nombre de opción y otra regla que el select.
+ */
+@Component({
+  selector: 'app-field-multiselect',
+  imports: [LucideX],
+  template: `
+    <div class="space-y-2">
+      @if (fallo()) {
+        <p class="text-xs text-danger" role="alert">No se pudieron cargar las opciones.</p>
+      } @else if (cargando()) {
+        <p class="text-xs text-neutral" role="status">Cargando opciones…</p>
+      }
+      @if (value().length > 0) {
+        <div class="flex flex-wrap gap-1.5" data-testid="multiselect-chips">
+          @for (item of value(); track item) {
+            <span
+              class="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-1 text-xs text-primary"
+            >
+              {{ labelOf(item) }}
+              <button
+                type="button"
+                class="rounded-full px-0.5 hover:text-danger"
+                [attr.aria-label]="'Quitar ' + labelOf(item)"
+                [disabled]="disabled()"
+                (click)="remove(item)"
+              >
+                <svg lucideX size="14" />
+              </button>
+            </span>
+          }
+        </div>
+      }
+      <div class="flex flex-wrap gap-1.5">
+        @for (option of opciones(); track option.value) {
+          @if (!isSelected(option.value)) {
+            <button
+              type="button"
+              class="rounded-full border border-neutral/30 px-2.5 py-1 text-xs hover:border-primary disabled:cursor-not-allowed disabled:opacity-50"
+              [disabled]="disabled() || (option.disabled ?? false)"
+              (click)="toggle(option)"
+            >
+              {{ option.label }}
+            </button>
+          }
+        }
+      </div>
+    </div>
+  `,
+})
+export class FieldMultiselect implements FormValueControl<string[]> {
+  readonly field = input.required<MultiselectField>();
+
+  /** Registro del formulario, sólo para resolver `{campo}` en `source.params`. */
+  readonly tree = input<RootTree>();
+
+  /** Sincronizado por el directive `FormField` del host. */
+  readonly value = model.required<string[]>();
+  readonly disabled = input(false);
+
+  private readonly ds = inject(DataSourceService);
+
+  private readonly registro = computed<Record<string, unknown> | undefined>(() => {
+    const source = this.field().source;
+    const tree = this.tree();
+    if (source === undefined || source.params === undefined || tree === undefined) return undefined;
+    return tree().value();
+  });
+
+  /** `undefined` sin fuente ⇒ `resource` queda idle y jamás llama al loader. */
+  private readonly claveFuente = computed(() => {
+    const source = this.field().source;
+    return source === undefined ? undefined : dataSourceKey(source, this.registro());
+  });
+
+  private readonly fuenteResource = resource({
+    params: () => this.claveFuente(),
+    loader: async () => {
+      const source = this.field().source;
+      if (source === undefined) return [];
+      return this.ds.rows(source, this.registro());
+    },
+  });
+
+  /** Estáticas del schema o filas de la fuente declarada (F8 · R6.5). */
+  protected readonly opciones = computed<SelectOption[]>(() => {
+    const field = this.field();
+    if (field.source === undefined) return field.options ?? [];
+    // `value()` del resource TIRA en estado error (contract de Angular):
+    // se mira el estado antes de leerlo, o el render rompe en vez de
+    // pintar el aviso de fallo.
+    if (this.fuenteResource.status() === 'error') return [];
+    return optionsFromRows(this.fuenteResource.value() ?? [], {
+      source: field.source,
+      target: getSchema(field.source.resource),
+    });
+  });
+
+  /** Sólo aplica con `source`: una lista estática no tiene vuelta que esperar. */
+  protected readonly cargando = computed(
+    () => this.claveFuente() !== undefined && this.fuenteResource.status() === 'loading',
+  );
+
+  protected readonly fallo = computed(
+    () => this.claveFuente() !== undefined && this.fuenteResource.status() === 'error',
+  );
+
+  protected toggle(option: SelectOption): void {
+    if (this.disabled()) {
+      return;
+    }
+    this.value.update((current) =>
+      current.includes(option.value)
+        ? current.filter((item) => item !== option.value)
+        : [...current, option.value],
+    );
+  }
+
+  protected remove(item: string): void {
+    if (this.disabled()) {
+      return;
+    }
+    this.value.update((current) => current.filter((value) => value !== item));
+  }
+
+  protected isSelected(item: string): boolean {
+    return this.value().includes(item);
+  }
+
+  protected labelOf(item: string): string {
+    return this.opciones().find((option) => option.value === item)?.label ?? item;
+  }
+}

package/src/lib/fields/number/number.descriptor.ts

@@ -0,0 +1,12 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/** Descriptor del campo `number` (R3.3). */
+export const descriptor: RenderDescriptor = {
+  kind: 'field',
+  type: 'number',
+  since: '1.0',
+  load: () => import('./number').then((module) => module.FieldNumber),
+  // Nace como `null`: no puede ser `0`, que sería un valor ya cargado.
+  seed: 'number',
+  surfaces: ['form', 'display'],
+};