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

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

@@ -0,0 +1,40 @@
+import { Component, computed, input } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+
+import type { NumberField } from '../../core/models/schema.model';
+import { FieldAria } from '../field-aria';
+import { childTree, type RootTree } from '../field-node';
+
+/**
+ * Input numérico (base.md §5.1). `step` sale del tipo o de `decimals`;
+ * `min`/`max` los gestiona `FormField` desde las reglas (Fase 10).
+ */
+@Component({
+  selector: 'app-field-number',
+  imports: [FieldAria, FormField],
+  template: `
+    <input
+      type="number"
+      class="field-input"
+      [id]="state().name()"
+      [formField]="node()"
+      [step]="stepAttr()"
+      [placeholder]="field().placeholder ?? ''"
+    />
+  `,
+})
+export class FieldNumber {
+  readonly field = input.required<NumberField>();
+  readonly tree = input.required<RootTree>();
+
+  protected readonly node = computed(() => childTree<number>(this.tree(), this.field().key));
+  protected readonly state = computed(() => this.node()());
+
+  protected readonly stepAttr = computed<number | null>(() => {
+    const field = this.field();
+    if (field.step !== undefined) {
+      return field.step;
+    }
+    return field.decimals !== undefined ? Math.pow(10, -field.decimals) : null;
+  });
+}

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

@@ -0,0 +1,12 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/** Descriptor del campo `phone` (R3.3). */
+export const descriptor: RenderDescriptor = {
+  kind: 'field',
+  type: 'phone',
+  since: '1.0',
+  load: () => import('./phone').then((module) => module.FieldPhone),
+  // Nace como cadena: los textos, fechas, urls, selects y relacionales.
+  seed: 'string',
+  surfaces: ['form', 'display'],
+};

package/src/lib/fields/phone/phone.ts

@@ -0,0 +1,46 @@
+import { Component, computed, input } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+
+import type { PhoneField } from '../../core/models/schema.model';
+import { FieldAria } from '../field-aria';
+import { childTree, type RootTree } from '../field-node';
+
+/**
+ * Input telefónico (base.md §5.1). El valor se normaliza al perder el foco:
+ * `e164` → `+` y dígitos (máx. 15); `digits` → solo dígitos. Mientras se
+ * escribe se conserva lo tipeado.
+ */
+@Component({
+  selector: 'app-field-phone',
+  imports: [FieldAria, FormField],
+  template: `
+    <input
+      type="tel"
+      class="field-input"
+      [id]="state().name()"
+      [formField]="node()"
+      [placeholder]="field().placeholder ?? ''"
+      (blur)="normalize()"
+    />
+  `,
+})
+export class FieldPhone {
+  readonly field = input.required<PhoneField>();
+  readonly tree = input.required<RootTree>();
+
+  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));
+  protected readonly state = computed(() => this.node()());
+
+  protected normalize(): void {
+    const current = this.state().value();
+    if (typeof current !== 'string' || current === '') {
+      return;
+    }
+    const digits = current.replace(/\D/g, '');
+    const normalized =
+      this.field().format === 'digits' ? digits : digits !== '' ? `+${digits.slice(0, 15)}` : '';
+    if (normalized !== current) {
+      this.state().value.set(normalized);
+    }
+  }
+}

package/src/lib/fields/readonly-text/readonly-text.descriptor.ts

@@ -0,0 +1,12 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/** Descriptor del campo `readonly-text` (R3.3). */
+export const descriptor: RenderDescriptor = {
+  kind: 'field',
+  type: 'readonly-text',
+  since: '1.0',
+  load: () => import('./readonly-text').then((module) => module.FieldReadonlyText),
+  // Nace como cadena: los textos, fechas, urls, selects y relacionales.
+  seed: 'string',
+  surfaces: ['form', 'display'],
+};

package/src/lib/fields/readonly-text/readonly-text.ts

@@ -0,0 +1,58 @@
+import { Component, computed, input } from '@angular/core';
+
+import type { ReadonlyTextField } from '../../core/models/schema.model';
+import { FieldAria } from '../field-aria';
+import { childTree, type RootTree } from '../field-node';
+
+/**
+ * Dato de solo lectura (base.md §5.1, ej. `updated_at`). No edita: lee el
+ * valor del árbol y lo presenta según `format` (`date`, `datetime`,
+ * `number`; por defecto, texto). Renderiza `<output>` para que el `<label>`
+ * del host pueda asociarse por `for`.
+ */
+@Component({
+  selector: 'app-field-readonly-text',
+  imports: [FieldAria],
+  template: `
+    <output
+      [id]="state().name()"
+      class="block py-2 text-sm text-neutral"
+      data-testid="readonly-text"
+    >
+      {{ display() }}
+    </output>
+  `,
+})
+export class FieldReadonlyText {
+  readonly field = input.required<ReadonlyTextField>();
+  readonly tree = input.required<RootTree>();
+
+  private readonly node = computed(() => childTree<unknown>(this.tree(), this.field().key));
+  protected readonly state = computed(() => this.node()());
+
+  protected readonly display = computed(() => {
+    const value = this.state().value();
+    if (value === null || value === undefined || value === '') {
+      return '—';
+    }
+    const format = this.field().format;
+    if (format === 'date' || format === 'datetime') {
+      const date = new Date(String(value));
+      if (Number.isNaN(date.getTime())) {
+        return String(value);
+      }
+      return new Intl.DateTimeFormat('es-PE', {
+        timeZone: 'UTC',
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        ...(format === 'datetime' ? { hour: '2-digit', minute: '2-digit' } : {}),
+      }).format(date);
+    }
+    if (format === 'number') {
+      const number = Number(value);
+      return Number.isNaN(number) ? String(value) : new Intl.NumberFormat('es-PE').format(number);
+    }
+    return typeof value === 'string' ? value : String(value);
+  });
+}

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

@@ -0,0 +1,12 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/** Descriptor del campo `relation` (R3.3). */
+export const descriptor: RenderDescriptor = {
+  kind: 'field',
+  type: 'relation',
+  since: '1.0',
+  load: () => import('./relation').then((module) => module.FieldRelation),
+  // Nace como cadena: los textos, fechas, urls, selects y relacionales.
+  seed: 'string',
+  surfaces: ['form', 'display'],
+};

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

@@ -0,0 +1,193 @@
+import { setSchemaCatalog } from '../../core/registry/schema-catalog';
+import { testCatalog } from '../../core/testing/test-catalog';
+
+setSchemaCatalog(testCatalog);
+
+import { TestBed } from '@angular/core/testing';
+import { EnvironmentInjector, signal } from '@angular/core';
+import { form } from '@angular/forms/signals';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import type { RelationField } from '../../core/models/schema.model';
+import { ApiService } from '../../core/services/api.service';
+import { DataSourceService } from '../../core/services/data-source.service';
+import { RelationDrawerService } from '../../core/services/relation-drawer.service';
+import { type RootTree } from '../field-node';
+import { FieldRelation } from './relation';
+
+/** Fila mínima de `categories` (keyField `slug`, titleField `name`). */
+function rows(count: number): Record<string, unknown>[] {
+  return Array.from({ length: count }, (_, index) => ({
+    slug: `cat-${index}`,
+    name: `Categoría ${index}`,
+    active: index !== 3,
+    description: `Descripción ${index}`,
+  }));
+}
+
+describe('Campo relación', () => {
+  const listSpy = vi.fn((...args: unknown[]) => of(rows(9)));
+
+  beforeEach(async () => {
+    listSpy.mockClear();
+    listSpy.mockImplementation(() => of(rows(9)));
+    await TestBed.configureTestingModule({
+      imports: [FieldRelation],
+      providers: [{ provide: ApiService, useValue: { list: listSpy } }],
+    }).compileComponents();
+  });
+
+  async function create(field: RelationField, value = '', extra: Record<string, unknown> = {}) {
+    const fixture = TestBed.createComponent(FieldRelation);
+    // Un objeto literal no sirve: `childTree` espera un FieldTree real
+    // (el nodo es invocable y devuelve el estado del campo).
+    const model = signal<Record<string, unknown>>({ category_slug: value, ...extra });
+    // `form()` inyecta en el arranque: fuera de un contexto hay que pasarle
+    // el injector, igual que hace form-view.
+    const tree = form(model, () => {}, {
+      injector: TestBed.inject(EnvironmentInjector),
+    }) as unknown as RootTree;
+    fixture.componentRef.setInput('field', field);
+    fixture.componentRef.setInput('tree', tree);
+    fixture.detectChanges();
+    return { fixture, tree, model };
+  }
+
+  const categoryField = (): RelationField => ({
+    key: 'category_slug',
+    label: 'Categoría',
+    type: 'relation',
+    source: { resource: 'categories' },
+  });
+
+  const findButton = (fixture: { nativeElement: HTMLElement }, text: string): HTMLButtonElement => {
+    const found = Array.from(fixture.nativeElement.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes(text),
+    );
+    if (found === undefined) throw new Error(`No se encontró el botón «${text}»`);
+    return found;
+  };
+
+  const options = (fixture: { nativeElement: HTMLElement }): HTMLOptionElement[] =>
+    Array.from(fixture.nativeElement.querySelectorAll('option'));
+
+  it('mientras cargan las opciones muestra el skeleton en un nodo labelable', async () => {
+    const { fixture } = await create(categoryField());
+
+    const loading = fixture.nativeElement.querySelector('output[aria-busy="true"]');
+    expect(loading).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('app-skeleton')).not.toBeNull();
+    expect(loading!.textContent).toContain('Cargando opciones…');
+  });
+
+  it('tras cargar, el select trae las opciones del recurso destino', async () => {
+    const { fixture } = await create(categoryField());
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    // 9 filas + la opción vacía (el campo no es required)
+    expect(options(fixture)).toHaveLength(10);
+    expect(listSpy).toHaveBeenCalledTimes(1);
+    expect(options(fixture)[1].textContent?.trim()).toBe('Categoría 0');
+    expect(fixture.nativeElement.querySelector('output[aria-busy]')).toBeNull();
+  });
+
+  it('secondaryField agrega el dato al lado de la etiqueta', async () => {
+    const { fixture } = await create({ ...categoryField(), secondaryField: 'description' });
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(options(fixture)[1].textContent?.trim()).toBe('Categoría 0 · Descripción 0');
+  });
+
+  it('source.params se resuelven del formulario y la fuente recarga al cambiar', async () => {
+    // F8 · R6.5: `{lang}` se interpola contra el registro y el resultado
+    // entra en la clave de caché — mismo recurso, otra petición.
+    const field: RelationField = {
+      ...categoryField(),
+      source: { resource: 'categories', params: { orden: '{lang}' } },
+    };
+    const { fixture, model } = await create(field, '', { lang: 'es' });
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(listSpy).toHaveBeenCalledTimes(1);
+    expect(listSpy.mock.calls[0][1]).toEqual({ params: { orden: 'es' } });
+
+    model.set({ category_slug: '', lang: 'en' });
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(listSpy).toHaveBeenCalledTimes(2);
+    expect(listSpy.mock.calls[1][1]).toEqual({ params: { orden: 'en' } });
+    expect(options(fixture)).toHaveLength(10); // sigue habiendo opciones tras la recarga
+  });
+
+  it('con más de 7 opciones aparece el buscador y con menos no', async () => {
+    const { fixture: withSearch } = await create(categoryField());
+    await withSearch.whenStable();
+    withSearch.detectChanges();
+    expect(withSearch.nativeElement.querySelector('input[type="search"]')).not.toBeNull();
+
+    // El servicio cachea por clave de fuente (30 s): sin invalidar, el segundo
+    // formulario heredaría las 9 filas del primero y el umbral no se vería.
+    TestBed.inject(DataSourceService).invalidate();
+    listSpy.mockImplementation(() => of(rows(4)));
+    const { fixture: withoutSearch } = await create(categoryField());
+    await withoutSearch.whenStable();
+    withoutSearch.detectChanges();
+    expect(withoutSearch.nativeElement.querySelector('input[type="search"]')).toBeNull();
+  });
+
+  it('filtra y anuncia «Sin resultados» sin borrar la opción elegida', async () => {
+    const { fixture } = await create({ ...categoryField(), required: true }, 'cat-1');
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const search = fixture.nativeElement.querySelector('input[type="search"]') as HTMLInputElement;
+    expect(search).not.toBeNull();
+
+    search.value = 'zzz-no-existe';
+    search.dispatchEvent(new Event('input', { bubbles: true }));
+    fixture.detectChanges();
+
+    const status = fixture.nativeElement.querySelector('[role="status"]');
+    expect(status?.textContent).toContain('Sin resultados para «zzz-no-existe»');
+    // Sigue visible aunque la etiqueta no coincida con el término
+    expect(options(fixture).map((option) => option.value)).toEqual(['cat-1']);
+  });
+
+  describe('botón «Crear nuevo» (plan 6.4)', () => {
+    it('pide el panel con el recurso de la relación', async () => {
+      const { fixture } = await create(categoryField());
+      await fixture.whenStable();
+      fixture.detectChanges();
+      const drawer = TestBed.inject(RelationDrawerService);
+
+      expect(drawer.request()).toBeNull();
+
+      findButton(fixture, 'Crear nuevo').click();
+
+      expect(drawer.request()?.resource).toBe('categories');
+    });
+
+    it('al confirmarse la creación, preselecciona la clave nueva', async () => {
+      const { fixture, tree } = await create(categoryField());
+      await fixture.whenStable();
+      fixture.detectChanges();
+      const drawer = TestBed.inject(RelationDrawerService);
+
+      findButton(fixture, 'Crear nuevo').click();
+      const requestsBefore = listSpy.mock.calls.length;
+      drawer.request()!.onCreated('cat-nueva');
+
+      expect(tree().value()).toEqual({ category_slug: 'cat-nueva' });
+      // pide recargar las opciones para que la clave tenga dónde engancharse
+      // (`reload()` de la resource encola la petición, no corre en el tick)
+      await fixture.whenStable();
+      expect(listSpy.mock.calls.length).toBeGreaterThan(requestsBefore);
+    });
+  });
+});

package/src/lib/fields/relation/relation.ts

@@ -0,0 +1,224 @@
+import { Component, computed, inject, input, resource, signal } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+
+import { LucidePlus } from '@lucide/angular';
+
+import type { RelationField, SelectOption } from '../../core/models/schema.model';
+import { DataSourceService, dataSourceKey } from '../../core/services/data-source.service';
+import { RelationDrawerService } from '../../core/services/relation-drawer.service';
+import { optionsFromRows } from '../../core/utils/source-options';
+import { Button } from '../../shared/components/button/button';
+import { getSchema } from '../../core/registry/schema-catalog';
+import { Skeleton } from '../../shared/components/skeleton/skeleton';
+import { FieldAria } from '../field-aria';
+import { childTree, type RootTree } from '../field-node';
+
+/**
+ * Referencia a otro recurso (base.md §5.2): `<select>` con opciones del
+ * listado del recurso destino, cargadas desde `field.source` (F8 · R6.5).
+ *
+ * La vuelta no la arma este componente: pasa por `DataSourceService`, que
+ * centraliza la caché por `resource+view+params`. El `resource()` de Angular
+ * de acá sólo aporta el estado (loading/error/recarga), y su `params` es la
+ * clave de la fuente ya interpolada — así una relación con `params`
+ * dependientes del formulario se recarga cuando cambia el dato, y una sin
+ * `params` no se entera de las teclas.
+ *
+ * Más de 7 opciones → búsqueda encima del select (plan 6.1, guía §1). Se
+ * filtra un `<select>` nativo y no se construye un combobox propio: conserva
+ * la navegación con teclado del navegador, el valor seleccionado visible y
+ * la lista de opciones accesible sin gestionar `aria-activedescendant`.
+ */
+@Component({
+  selector: 'app-field-relation',
+  imports: [Button, FieldAria, FormField, LucidePlus, Skeleton],
+  template: `
+    @switch (optionsResource.status()) {
+      @case ('loading') {
+        <!-- El output es labelable: el for del label del host sigue teniendo
+             ancla, y como ya es live region anuncia la carga. El skeleton
+             reemplaza al texto con animate-pulse (plan 6.7). -->
+        <output class="block" [id]="state().name()" aria-busy="true">
+          <app-skeleton [lines]="1" [height]="40" />
+          <span class="sr-only">Cargando opciones…</span>
+        </output>
+      }
+      @case ('error') {
+        <!-- Output en vez de un párrafo: es labelable (el label del host
+             tiene ancla) y ya es live region, así que con role=alert el
+             fallo de carga se anuncia sin repetir el texto en otro nodo. -->
+        <output class="field-input block text-danger" [id]="state().name()" role="alert">
+          No se pudieron cargar las opciones.
+        </output>
+      }
+      @default {
+        @if (useSearch()) {
+          <!-- Guía §1: más de 7 opciones → dropdown con búsqueda. El filtro
+               no reemplaza al select, lo acota; así el teclado y el valor
+               elegido siguen funcionando igual. -->
+          <input
+            type="search"
+            class="mb-1 w-full rounded-lg border border-neutral/30 bg-surface px-2 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+            placeholder="Buscar…"
+            aria-label="Buscar entre las opciones"
+            [attr.aria-controls]="state().name()"
+            [value]="query()"
+            (input)="onQuery($event)"
+          />
+        }
+        <select class="field-input" [id]="state().name()" [formField]="node()">
+          @if (!field().required) {
+            <option value="">{{ field().placeholder ?? '— Seleccionar —' }}</option>
+          }
+          @for (option of visibleOptions(); track option.value) {
+            <option [value]="option.value">{{ option.label }}</option>
+          }
+        </select>
+        @if (noMatches()) {
+          <p class="mt-1 text-xs text-neutral" role="status">
+            Sin resultados para «{{ query() }}».
+          </p>
+        } @else if (options().length === 0) {
+          <p class="mt-1 text-xs text-neutral">Sin opciones disponibles.</p>
+        }
+        @if (targetSchema() !== undefined && canCreate()) {
+          <!-- Un <option> no puede contener un botón: la acción va justo
+               debajo del control, pegada al dropdown. -->
+          <button
+            app-button
+            variant="ghost"
+            type="button"
+            class="mt-1 -ml-2"
+            (click)="requestCreate()"
+          >
+            <svg lucidePlus size="16" />
+            Crear nuevo
+          </button>
+        }
+      }
+    }
+  `,
+})
+export class FieldRelation {
+  readonly field = input.required<RelationField>();
+  readonly tree = input.required<RootTree>();
+
+  private readonly ds = inject(DataSourceService);
+  private readonly drawer = inject(RelationDrawerService);
+
+  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));
+  protected readonly state = computed(() => this.node()());
+
+  /** Texto escrito en el buscador (sólo se usa si supera el umbral). */
+  protected readonly query = signal('');
+
+  protected readonly targetSchema = computed(() => getSchema(this.field().source.resource));
+
+  protected readonly canCreate = computed(() => this.targetSchema()?.permissions?.create !== false);
+
+  /** Umbral de la guía §1: 5–7 opciones dropdown simple, más de 7 con búsqueda. */
+  protected readonly useSearch = computed(() => this.options().length > 7);
+
+  protected onQuery(event: Event): void {
+    this.query.set((event.target as HTMLInputElement).value);
+  }
+
+  /**
+   * Opciones que coinciden con el término de búsqueda, SIN conservar la
+   * elegida. Es la base del mensaje «Sin resultados».
+   */
+  protected readonly matches = computed<SelectOption[]>(() => {
+    const all = this.options();
+    const term = this.query().trim().toLowerCase();
+    if (term === '') {
+      return all;
+    }
+    return all.filter((option) => option.label.toLowerCase().includes(term));
+  });
+
+  /** El buscador está activo y no encontró nada nuevo (el elegido no cuenta). */
+  protected readonly noMatches = computed(
+    () => this.useSearch() && this.query().trim() !== '' && this.matches().length === 0,
+  );
+
+  /**
+   * Opciones que se dibujan. Con búsqueda activa se acotan por etiqueta,
+   * PERO la opción elegida se conserva siempre: si desapareciera del DOM el
+   * select dejaría de mostrar el valor actual (guía §1: «valor seleccionado
+   * siempre visible»). Por eso no se dibuja a partir de `matches`.
+   */
+  protected readonly visibleOptions = computed<SelectOption[]>(() => {
+    const filtered = this.matches();
+    if (this.query().trim() === '') {
+      return filtered;
+    }
+    const selected = String(this.state().value() ?? '');
+    if (filtered.some((option) => option.value === selected)) {
+      return filtered;
+    }
+    const kept = this.options().find((option) => option.value === selected);
+    return kept === undefined ? filtered : [...filtered, kept];
+  });
+
+  /**
+   * Pide el panel de «Crear nuevo». El servicio guarda el callback que, al
+   * confirmarse la creación, recarga las opciones y preselecciona la clave.
+   */
+  protected requestCreate(): void {
+    const resource = this.field().source.resource;
+    this.drawer.open(resource, (key) => {
+      // La fila nueva todavía no está en la caché compartida: sin este
+      // `invalidate` la recarga devolvería la lista vieja (F8 · R6.5).
+      this.ds.invalidate(resource);
+      this.optionsResource.reload();
+      // Se setea DESPUÉS de pedir la recarga: si la opción todavía no está
+      // en el DOM el select mostraría vacío, y al llegar se reengancha sola
+      // (visibleOptions conserva la elegida aunque el filtro la oculte).
+      this.node()().value.set(key);
+    });
+  }
+
+  /**
+   * Registro del formulario, sólo para resolver `{campo}` en `source.params`.
+   *
+   * Si la fuente no declara parámetros el registro NO se lee: la relación
+   * no depende del formulario y no se recalcula con cada tecla.
+   */
+  private readonly registro = computed<Record<string, unknown> | undefined>(() =>
+    this.field().source.params === undefined ? undefined : this.tree()().value(),
+  );
+
+  /** Clave de la fuente ya interpolada: es lo que `resource` compara. */
+  private readonly claveFuente = computed(() =>
+    dataSourceKey(this.field().source, this.registro()),
+  );
+
+  /**
+   * Carga de las opciones. `resource()` sólo aporta estado (loading/error/
+   * recarga): la vuelta y la caché son del `DataSourceService`, que así
+   * comparte filas con el resto de consumidores de la misma fuente.
+   */
+  private readonly optionsResource = resource({
+    params: () => this.claveFuente(),
+    loader: async () => this.ds.rows(this.field().source, this.registro()),
+  });
+
+  /**
+   * Opciones (F8): filas de la fuente declarada → `SelectOption`.
+   *
+   * El `@switch` del template sólo entra en `default` cuando no hubo fallo,
+   * pero el estado se mira acá también: `value()` del resource TIRA en
+   * estado error (contract de Angular) y un computed que se evalúe por otra
+   * vía tiraría el render entero.
+   */
+  protected readonly options = computed<SelectOption[]>(() =>
+    this.optionsResource.status() === 'error'
+      ? []
+      : optionsFromRows(this.optionsResource.value() ?? [], {
+          source: this.field().source,
+          target: this.targetSchema(),
+          onlyActive: this.field().onlyActive,
+          secondaryField: this.field().secondaryField,
+        }),
+  );
+}

package/src/lib/fields/rich-select/rich-select.descriptor.ts

@@ -0,0 +1,12 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/** Descriptor del campo `rich-select` (selector visual enriquecido). */
+export const descriptor: RenderDescriptor = {
+  kind: 'field',
+  type: 'rich-select',
+  since: '1.0',
+  load: () => import('./rich-select').then((module) => module.FieldRichSelect),
+  // Nace como cadena: el valor seleccionado es un string.
+  seed: 'string',
+  surfaces: ['form', 'display'],
+};