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

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

@@ -1,376 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,152 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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'],
-};