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

package/src/lib/fields/descriptors.ts

@@ -0,0 +1,122 @@
+import type { RenderDescriptor } from '../core/registry/render-registry';
+import type { FieldType } from '../core/models/schema.model';
+
+import { descriptor as booleanDescriptor } from './boolean/boolean.descriptor';
+import { descriptor as colorDescriptor } from './color/color.descriptor';
+import { descriptor as currencyDescriptor } from './currency/currency.descriptor';
+import { descriptor as dateDescriptor } from './date/date.descriptor';
+import { descriptor as emailDescriptor } from './email/email.descriptor';
+import { descriptor as fileDescriptor } from './file/file.descriptor';
+import { descriptor as groupDescriptor } from './group/group.descriptor';
+import { descriptor as imageDescriptor } from './image/image.descriptor';
+import { descriptor as keyValueDescriptor } from './key-value/key-value.descriptor';
+import { descriptor as listDescriptor } from './list/list.descriptor';
+import { descriptor as multiselectDescriptor } from './multiselect/multiselect.descriptor';
+import { descriptor as numberDescriptor } from './number/number.descriptor';
+import { descriptor as phoneDescriptor } from './phone/phone.descriptor';
+import { descriptor as readonlyTextDescriptor } from './readonly-text/readonly-text.descriptor';
+import { descriptor as relationDescriptor } from './relation/relation.descriptor';
+import { descriptor as richSelectDescriptor } from './rich-select/rich-select.descriptor';
+import { descriptor as selectDescriptor } from './select/select.descriptor';
+import { descriptor as dropdownDescriptor } from './dropdown/dropdown.descriptor';
+import { descriptor as slugDescriptor } from './slug/slug.descriptor';
+import { descriptor as stringListDescriptor } from './string-list/string-list.descriptor';
+import { descriptor as textDescriptor } from './text/text.descriptor';
+import { descriptor as textareaDescriptor } from './textarea/textarea.descriptor';
+import { descriptor as timeDescriptor } from './time/time.descriptor';
+import { descriptor as urlDescriptor } from './url/url.descriptor';
+
+/**
+ * Tripwire de compilación (R1.7 · D17): que la unión `FieldType` y los
+ * tipos que la UI sabe dibujar sigan diciendo lo mismo.
+ *
+ *   · un valor que no esté en la unión `FieldSchema` ⇒ `satisfies` falla;
+ *   · un tipo de la unión que falte acá ⇒ `FaltaEnLaUi` no es `never`.
+ *
+ * **No es una fuente de verdad en runtime.** El catálogo vive en
+ * `core/registry/render-registry.ts`, alimentado por los descriptores de
+ * abajo. Esta lista sólo existe para que `npm run build` y `npm test` vean
+ * la aserción por igual, sin depender de que un test la ejecute.
+ *
+ * **Exportada en R3.7** para que `core/registry/contract.spec.ts` pueda
+ * verificar además el sentido que este archivo no cubre — que cada nombre de
+ * la lista tenga **descriptor**: aquí sólo se comprueba que está en la unión,
+ * y un tipo declarado en la lista pero ausente del manifiesto se vería en el
+ * primer schema que lo use.
+ *
+ * **Mudado acá en R3.8.** Vivía en `field-host/field-host.ts`, y §0 es
+ * explícito: «si añadir un tipo obliga a editar `FieldHost`, el motor no
+ * está terminado». Estaba sin uso en runtime — sólo servía a este tripwire —
+ * así que trasladarlo acá no cambia comportamiento y deja el registro y su
+ * aserción en el **mismo archivo**: añadir un tipo toca una carpeta y una
+ * línea de este manifiesto, y el host no se entera.
+ */
+export const SUPPORTED_FIELD_TYPE_LIST = [
+  'text',
+  'textarea',
+  'slug',
+  'number',
+  'currency',
+  'boolean',
+  'select',
+  'multiselect',
+  'url',
+  'email',
+  'phone',
+  'date',
+  'time',
+  'readonly-text',
+  'group',
+  'list',
+  'string-list',
+  'key-value',
+  'relation',
+  'image',
+  'file',
+  'color',
+  'rich-select',
+  'dropdown',
+] as const satisfies readonly FieldType[];
+
+type FaltaEnLaUi = Exclude<FieldType, (typeof SUPPORTED_FIELD_TYPE_LIST)[number]>;
+const _exhaustivo: FaltaEnLaUi extends never
+  ? true
+  : ['Falta en SUPPORTED_FIELD_TYPE_LIST', FaltaEnLaUi] = true;
+
+/**
+ * Manifiesto de descriptores de campo (R3.3 · registro único de render).
+ *
+ * Una línea por tipo: el registro los recoge al importar este módulo. Es la
+ * **única** lista manual del catálogo de campos — `import.meta.glob` no
+ * sobrevive a `ng build`, así que D9-1 se resuelve con «registro manual de
+ * una línea». Ver `core/registry/render-registry.ts`.
+ *
+ * Añadir un tipo de campo ⇒ crear la carpeta + su `.descriptor.ts` + una
+ * línea acá. **Ningún host se toca** (R3.8).
+ */
+export const fieldDescriptors: readonly RenderDescriptor[] = [
+  booleanDescriptor,
+  colorDescriptor,
+  currencyDescriptor,
+  dateDescriptor,
+  emailDescriptor,
+  fileDescriptor,
+  groupDescriptor,
+  imageDescriptor,
+  keyValueDescriptor,
+  listDescriptor,
+  multiselectDescriptor,
+  numberDescriptor,
+  phoneDescriptor,
+  readonlyTextDescriptor,
+  relationDescriptor,
+  selectDescriptor,
+  slugDescriptor,
+  stringListDescriptor,
+  textDescriptor,
+  textareaDescriptor,
+  timeDescriptor,
+  urlDescriptor,
+  richSelectDescriptor,
+  dropdownDescriptor,
+];

package/src/lib/fields/display/display-badge.ts

@@ -0,0 +1,65 @@
+import { Component, computed, input } from '@angular/core';
+
+import { Badge, type BadgeKind } from '../../shared/components/badge/badge';
+import type { FieldSchema, SelectField } from '../../core/models/schema.model';
+
+/**
+ * Display por defecto de `boolean` y `select` (R4.1 · modo `display`).
+ *
+ * Absorbe `formatValue` + `resolveBadgeKind` de `detail-view` (R4.2): los
+ * estados siguen clasificándose con el mismo vocabulario —
+ * `PENDIENTE/WAITING/EN_PROCESO/PROCESSING` en `warning`,
+ * `ENTREGADO/DELIVERED/…` en `success`, `CANCELADO/REVOCADA/ERROR/…` en
+ * `danger` y el resto en `neutral` — porque es el criterio que el operador
+ * ya reconoce en la cabecera de la ficha.
+ *
+ * `boolean` pinta `Sí`/`No` con `success`/`neutral` (la paridad de R4.2);
+ * los `trueLabel`/`falseLabel` del schema siguen siendo cosa del control de
+ * **edición**, y de la columna de lista (R4.3), que sí los usa.
+ */
+@Component({
+  selector: 'app-field-display-badge',
+  imports: [Badge],
+  template: `<app-badge [label]="label()" [kind]="kind()" />`,
+})
+export class FieldDisplayBadge {
+  readonly field = input.required<FieldSchema>();
+  readonly value = input<unknown>(null);
+  /** El chip de la cabecera ya es este componente: se ignora. */
+  readonly chip = input(false);
+
+  protected readonly label = computed(() => {
+    if (this.field().type === 'boolean') {
+      return this.value() ? 'Sí' : 'No';
+    }
+    const opciones = (this.field() as SelectField).options ?? [];
+    const encontrada = opciones.find((o) => o.value === String(this.value()));
+    return encontrada ? encontrada.label : String(this.value());
+  });
+
+  protected readonly kind = computed<BadgeKind>(() => {
+    if (this.field().type === 'boolean') {
+      return this.value() ? 'success' : 'neutral';
+    }
+    return resolveBadgeKind(String(this.value()));
+  });
+}
+
+/**
+ * Clasificación de estados, común al display de detalle (acá) y al
+ * timeline del historial (`display-list`). Exportada para que R4.3 pueda
+ * reusarla si la columna de lista decide alinearse con este criterio.
+ */
+export function resolveBadgeKind(valor: string): BadgeKind {
+  const upper = String(valor).toUpperCase();
+  if (['PENDIENTE', 'WAITING', 'EN_PROCESO', 'PROCESSING'].includes(upper)) return 'warning';
+  if (
+    ['ENTREGADO', 'DELIVERED', 'ACTIVA', 'ACTIVE', 'COMPLETADO', 'SUCCESS', 'SI', 'SÍ'].includes(
+      upper,
+    )
+  )
+    return 'success';
+  if (['CANCELADO', 'CANCELLED', 'REVOCADA', 'REVOKED', 'ERROR', 'NO'].includes(upper))
+    return 'danger';
+  return 'neutral';
+}

package/src/lib/fields/display/display-date.ts

@@ -0,0 +1,39 @@
+import { Component, computed, input } from '@angular/core';
+
+import { Badge } from '../../shared/components/badge/badge';
+import type { FieldSchema } from '../../core/models/schema.model';
+
+const FORMATO_FECHA = new Intl.DateTimeFormat('es-PE', { dateStyle: 'medium', timeZone: 'UTC' });
+
+/**
+ * Display por defecto de `date` (R4.1 · modo `display`).
+ *
+ * Misma fórmula que `formatValue` de `detail-view` antes de R4.2: `es-PE`,
+ * `dateStyle: 'medium'`, **UTC** para que la fecha no se corra un día según
+ * el huso de quien abra la ficha, y texto crudo si no es parseable.
+ */
+@Component({
+  selector: 'app-field-display-date',
+  imports: [Badge],
+  template: `
+    @if (chip()) {
+      <app-badge [label]="texto()" />
+    } @else {
+      {{ texto() }}
+    }
+  `,
+})
+export class FieldDisplayDate {
+  readonly field = input.required<FieldSchema>();
+  readonly value = input<unknown>(null);
+  /** `true` en la cabecera: la fecha se pinta como chip compacto. */
+  readonly chip = input(false);
+
+  protected readonly texto = computed(() => {
+    const d = new Date(String(this.value()));
+    if (Number.isNaN(d.getTime())) {
+      return String(this.value());
+    }
+    return FORMATO_FECHA.format(d);
+  });
+}

package/src/lib/fields/display/display-defaults.ts

@@ -0,0 +1,84 @@
+import type { Type } from '@angular/core';
+
+import type { FieldType } from '../../core/models/schema.model';
+
+/** Carga perezosa del componente que pinta un valor en modo `display`. */
+export type DisplayLoader = () => Promise<Type<any>>;
+
+const TEXTO: DisplayLoader = () =>
+  import('./display-text').then((module) => module.FieldDisplayText);
+const FECHA: DisplayLoader = () =>
+  import('./display-date').then((module) => module.FieldDisplayDate);
+const NUMERO: DisplayLoader = () =>
+  import('./display-number').then((module) => module.FieldDisplayNumber);
+const BADGE: DisplayLoader = () =>
+  import('./display-badge').then((module) => module.FieldDisplayBadge);
+const IMAGEN: DisplayLoader = () =>
+  import('./display-image').then((module) => module.FieldDisplayImage);
+const ARCHIVO: DisplayLoader = () =>
+  import('./display-file').then((module) => module.FieldDisplayFile);
+const LISTA: DisplayLoader = () =>
+  import('./display-list').then((module) => module.FieldDisplayList);
+
+/**
+ * **Tabla de display por defecto según `field.type`** (F3 de
+ * `doc/refactormotor.md`, R4.1 del plan): «cada descriptor declara si sabe
+ * pintarse en `display`; si no, usa un `display` por defecto según tipo».
+ *
+ * La declaración vive en el descriptor (`surfaces: ['form', 'display']`) y
+ * el componente sale de acá: un solo sitio decide qué pinta cada tipo en la
+ * ficha de detalle. Es la misma familia de cambio que la tabla de formato
+ * de columna de R4.4 — «declarada, no implícita».
+ *
+ * `Record<FieldType, …>` es el **tripwire de exhaustividad en compilación**:
+ * un tipo nuevo obliga a elegir su display antes de que el build pase, y un
+ * tipo retirado obliga a limpiar la entrada. En runtime el acceso pasa por
+ * `displayLoader()`, que no lanza si el `type` viene de un schema mal
+ * escrito.
+ *
+ * Paridad con el `formatValue` que vivía en `detail-view` (R4.2):
+ * `text/textarea/slug/url/email/phone/readonly-text/relation/group/
+ * key-value/string-list/multiselect/time` → texto crudo · `date` → fecha ·
+ * `number/currency` → número · `boolean/select` → badge · `image` →
+ * miniatura · `list` → timeline.
+ */
+const DISPLAY_POR_DEFECTO: Record<FieldType, DisplayLoader> = {
+  text: TEXTO,
+  textarea: TEXTO,
+  slug: TEXTO,
+  url: TEXTO,
+  email: TEXTO,
+  phone: TEXTO,
+  'readonly-text': TEXTO,
+  relation: TEXTO,
+  group: TEXTO,
+  'key-value': TEXTO,
+  'string-list': TEXTO,
+  multiselect: TEXTO,
+  time: TEXTO,
+  date: FECHA,
+  number: NUMERO,
+  currency: NUMERO,
+  boolean: BADGE,
+  select: BADGE,
+  image: IMAGEN,
+  file: ARCHIVO,
+  list: LISTA,
+  color: TEXTO,
+  // Un rich-select se muestra con el label de la opción elegida.
+  'rich-select': TEXTO,
+  // Un dropdown se muestra con el label de la opción elegida.
+  dropdown: TEXTO,
+};
+
+/**
+ * Componente de display para un `type`, o `undefined` si no está en la
+ * tabla (tipo fuera de la unión — p. ej. un schema con un `type` mal
+ * escrito). Ese `undefined` es lo que el host traduce en la degradación
+ * controlada de R1.10: en dev se avisa, en producción se omite.
+ */
+export function displayLoader(type: string): DisplayLoader | undefined {
+  return Object.prototype.hasOwnProperty.call(DISPLAY_POR_DEFECTO, type)
+    ? DISPLAY_POR_DEFECTO[type as FieldType]
+    : undefined;
+}

package/src/lib/fields/display/display-file.ts

@@ -0,0 +1,41 @@
+import { Component, computed, input } from '@angular/core';
+
+import { Badge } from '../../shared/components/badge/badge';
+import type { FieldSchema } from '../../core/models/schema.model';
+
+/**
+ * Display por defecto de `file` (R4.1 · modo `display` · R9.5.3).
+ *
+ * Un archivo no tiene miniatura: el valor es la URL pública, y lo honesto
+ * en la ficha de detalle es un enlace que lo abre (mismo lenguaje que el
+ * «Abrir» de `url`). En la cabecera (`chip`) va como badge con la URL, la
+ * paridad con el resto de los displays.
+ */
+@Component({
+  selector: 'app-field-display-file',
+  imports: [Badge],
+  template: `
+    @if (chip()) {
+      <app-badge [label]="url()" />
+    } @else {
+      <a
+        class="font-medium text-primary hover:underline"
+        [href]="url()"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Abrir archivo
+      </a>
+    }
+  `,
+})
+export class FieldDisplayFile {
+  /** Campo que se pinta. Lo usa el tipo; acá sólo tipa la forma común. */
+  readonly field = input.required<FieldSchema>();
+  /** Valor crudo del registro (la URL pública). El host ya filtró el vacío. */
+  readonly value = input<unknown>(null);
+  /** `true` en la cabecera: la URL se pinta como chip compacto. */
+  readonly chip = input(false);
+
+  protected readonly url = computed(() => String(this.value()));
+}

package/src/lib/fields/display/display-image.ts

@@ -0,0 +1,54 @@
+import { Component, computed, input } from '@angular/core';
+
+import { LucideExternalLink } from '@lucide/angular';
+
+import { Badge } from '../../shared/components/badge/badge';
+import type { FieldSchema } from '../../core/models/schema.model';
+
+/**
+ * Display por defecto de `image` (R4.1 · modo `display`).
+ *
+ * Mismo maquetado que la rama `kind === 'image'` de `detail-view` antes de
+ * R4.2: miniatura de 7×7 con enlace a la imagen completa y overlay con el
+ * icono de «abrir». El `alt` sigue siendo la etiqueta del campo.
+ *
+ * El host ya se encarga del valor vacío (pinta `—`), así que acá la URL
+ * siempre existe.
+ */
+@Component({
+  selector: 'app-field-display-image',
+  imports: [Badge, LucideExternalLink],
+  template: `
+    @if (chip()) {
+      <!-- Paridad R4.2: la cabecera siempre mostró el valor formateado
+           como chip, y para una imagen ese valor era la URL. -->
+      <app-badge [label]="url()" />
+    } @else {
+      <a
+        [href]="url()"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="group relative inline-block overflow-hidden rounded-xl border border-neutral/20 shadow-xs transition hover:border-primary"
+      >
+        <img
+          [src]="url()"
+          [alt]="field().label"
+          class="h-28 w-28 object-cover transition duration-300 group-hover:scale-105"
+        />
+        <div
+          class="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 transition group-hover:opacity-100"
+        >
+          <svg lucideExternalLink size="18" class="text-white" />
+        </div>
+      </a>
+    }
+  `,
+})
+export class FieldDisplayImage {
+  readonly field = input.required<FieldSchema>();
+  readonly value = input<unknown>(null);
+  /** `true` en la cabecera: la URL se pinta como chip compacto. */
+  readonly chip = input(false);
+
+  protected readonly url = computed(() => String(this.value()));
+}

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

@@ -0,0 +1,107 @@
+import { Component, computed, input } from '@angular/core';
+
+import { LucideClock } from '@lucide/angular';
+
+import { Badge, type BadgeKind } from '../../shared/components/badge/badge';
+import type { FieldSchema } from '../../core/models/schema.model';
+import { resolveBadgeKind } from './display-badge';
+
+const FORMATO_FECHA_HORA = new Intl.DateTimeFormat('es-PE', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+  timeZone: 'UTC',
+});
+
+type Item = Record<string, unknown>;
+
+/**
+ * Display por defecto de `list` (R4.1 · modo `display`).
+ *
+ * Es la línea de tiempo del historial: **toda la plantilla de `list` que
+ * vivía en `detail-view`** se muda acá, que es lo que R4.2 exige
+ * («`detail-view` no tiene plantilla propia de campo»). El agrupador sigue
+ * siendo `detail-view`: él decide que este campo va en su bloque con el
+ * `<h3>` y el ancho grande; acá sólo se pinta el valor.
+ *
+ * `itemFields` no participa: el timeline lee `action` / `at` / `detail`
+ * directamente, igual que antes.
+ */
+@Component({
+  selector: 'app-field-display-list',
+  imports: [Badge, LucideClock],
+  template: `
+    @if (chip()) {
+      <!-- Paridad R4.2: la cabecera siempre mostró el valor formateado
+           como chip, y para una lista ese valor era «N elementos». -->
+      <app-badge [label]="resumen()" />
+    } @else if (items().length > 0) {
+      <div
+        class="relative pl-6 space-y-4 before:absolute before:left-2 before:top-2 before:bottom-2 before:w-0.5 before:bg-neutral/20"
+      >
+        @for (item of items(); track $index) {
+          <div class="relative group">
+            <span
+              class="absolute -left-6 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary/20 ring-4 ring-surface"
+            >
+              <span class="h-1.5 w-1.5 rounded-full bg-primary"></span>
+            </span>
+            <div
+              class="rounded-xl border border-neutral/10 bg-neutral/5 p-3.5 transition hover:border-neutral/20"
+            >
+              <div class="flex flex-wrap items-center justify-between gap-2 mb-1.5">
+                @if (item['action']) {
+                  <app-badge
+                    [label]="etiquetaAccion(item['action'])"
+                    [kind]="kindAccion(item['action'])"
+                  />
+                }
+                @if (item['at']) {
+                  <span class="text-xs text-neutral flex items-center gap-1">
+                    <svg lucideClock size="12" />
+                    {{ fechaHora(item['at']) }}
+                  </span>
+                }
+              </div>
+              @if (item['detail']) {
+                <p class="text-sm text-neutral-light">{{ item['detail'] }}</p>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    } @else {
+      <p class="text-xs italic text-neutral">No hay registros en el historial.</p>
+    }
+  `,
+})
+export class FieldDisplayList {
+  readonly field = input.required<FieldSchema>();
+  readonly value = input<unknown>(null);
+  /** `true` en la cabecera: el resumen «N elementos» va como chip. */
+  readonly chip = input(false);
+
+  /** El host entrega el valor crudo; sólo un array tiene timeline. */
+  protected readonly items = computed<Item[]>(() =>
+    Array.isArray(this.value()) ? (this.value() as Item[]) : [],
+  );
+
+  /** Mismo texto que daba el formateo de detalle previo a R4.2. */
+  protected resumen(): string {
+    return `${this.items().length} elementos`;
+  }
+
+  protected fechaHora(valor: unknown): string {
+    if (!valor) return '—';
+    const d = new Date(String(valor));
+    return Number.isNaN(d.getTime()) ? String(valor) : FORMATO_FECHA_HORA.format(d);
+  }
+
+  protected etiquetaAccion(valor: unknown): string {
+    if (!valor) return '';
+    return String(valor).replace(/_/g, ' ');
+  }
+
+  protected kindAccion(valor: unknown): BadgeKind {
+    return resolveBadgeKind(String(valor));
+  }
+}

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

@@ -0,0 +1,41 @@
+import { Component, computed, input } from '@angular/core';
+
+import { Badge } from '../../shared/components/badge/badge';
+import type { FieldSchema } from '../../core/models/schema.model';
+
+const FORMATO_NUMERO = new Intl.NumberFormat('es-PE');
+
+/**
+ * Display por defecto de `number` y `currency` (R4.1 · modo `display`).
+ *
+ * Los dos tipos compartían rama en `formatValue` y la comparten acá: miles
+ * con separador `es-PE` y sin decimales fijos (el schema controla los
+ * decimales con `decimals` en el form; en display manda el valor tal cual
+ * viene). Si no es número, se pinta el texto crudo — la degradación que ya
+ * hacía `detail-view`.
+ */
+@Component({
+  selector: 'app-field-display-number',
+  imports: [Badge],
+  template: `
+    @if (chip()) {
+      <app-badge [label]="texto()" />
+    } @else {
+      {{ texto() }}
+    }
+  `,
+})
+export class FieldDisplayNumber {
+  readonly field = input.required<FieldSchema>();
+  readonly value = input<unknown>(null);
+  /** `true` en la cabecera: el número se pinta como chip compacto. */
+  readonly chip = input(false);
+
+  protected readonly texto = computed(() => {
+    const n = Number(this.value());
+    if (!Number.isFinite(n)) {
+      return String(this.value());
+    }
+    return FORMATO_NUMERO.format(n);
+  });
+}

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

@@ -0,0 +1,42 @@
+import { Component, computed, input } from '@angular/core';
+
+import { Badge } from '../../shared/components/badge/badge';
+import type { FieldSchema } from '../../core/models/schema.model';
+
+/**
+ * Display por defecto de los tipos textuales (R4.1 · modo `display`).
+ *
+ * Toma el valor crudo del registro —no el árbol del formulario— y lo pinta
+ * como texto: el `default` de `formatValue` de `detail-view`, que era donde
+ * caían `text`, `textarea`, `slug`, `url`, `email`, `phone`, `readonly-text`,
+ * `relation`, `group`, `key-value`, `string-list`, `multiselect` y `time`.
+ *
+ * `String(raw)` conserva el comportamiento previo (un array sale `a,b`; un
+ * objeto sale `[object Object]`): R4.2 pide que «los 7 detalles rendericen
+ * igual», así que la paridad manda sobre la estética.
+ *
+ * Todos los display declaran `field`, `value` y `chip` aunque no los usen:
+ * el host les pasa la misma forma a los 6 y `ngComponentOutletInputs` no
+ * admite claves que el componente no declare.
+ */
+@Component({
+  selector: 'app-field-display-text',
+  imports: [Badge],
+  template: `
+    @if (chip()) {
+      <app-badge [label]="texto()" />
+    } @else {
+      {{ texto() }}
+    }
+  `,
+})
+export class FieldDisplayText {
+  /** Campo que se pinta. Lo usa el tipo; acá sólo tipa la forma común. */
+  readonly field = input.required<FieldSchema>();
+  /** Valor crudo del registro. El host ya filtró el vacío (`—`). */
+  readonly value = input<unknown>(null);
+  /** `true` en la cabecera: el texto se pinta como chip compacto. */
+  readonly chip = input(false);
+
+  protected readonly texto = computed(() => String(this.value()));
+}