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

package/src/lib/columns/column-format.spec.ts

@@ -0,0 +1,274 @@
+import { Component, input } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { ListColumn } from '../core/models/schema.model';
+import { RenderHost } from '../core/registry/render-host';
+import { COLUMN_FORMAT_TYPES } from './descriptors';
+import type { ColumnCell } from './column-cell';
+
+/**
+ * Los 7 formatos de columna (R4.3 · `kind: 'column-format'`).
+ *
+ * Cada caso es un `@case` del `@switch` que vivía en `list-view`: si el
+ * formato pinta distinto de lo que pintaba allí, este test se pone rojo. Se
+ * monta por `RenderHost` y no por el componente suelto para cubrir también
+ * la resolución del registro (descriptor, `inputs`, degradación).
+ */
+@Component({
+  selector: 'spec-column-host',
+  imports: [RenderHost],
+  template: `
+    <app-render-host kind="column-format" [type]="formato()" [config]="column()" [data]="cell()" />
+  `,
+})
+class Host {
+  readonly formato = input.required<string>();
+  readonly column = input.required<ListColumn>();
+  readonly cell = input.required<ColumnCell>();
+}
+
+describe('R4.3 — formatos de columna registrados', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [Host] }).compileComponents();
+  });
+
+  /**
+   * Monta el host y espera el `load()` perezoso del formato.
+   *
+   * `whenStable()` no cubre el `import()` dinámico por sí solo, así que se
+   * espera acotadamente mientras quede `<app-skeleton>`; si el formato nunca
+   * monta, la espera se agota y falla la aserción del test.
+   */
+  async function pintar(column: ListColumn, cell: Partial<ColumnCell> = {}): Promise<HTMLElement> {
+    const fixture = TestBed.createComponent(Host);
+    fixture.componentRef.setInput('formato', column.format ?? 'text');
+    fixture.componentRef.setInput('column', column);
+    fixture.componentRef.setInput('cell', celda({ column, ...cell }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    for (
+      let intento = 0;
+      intento < 100 && fixture.nativeElement.querySelector('app-skeleton');
+      intento++
+    ) {
+      fixture.detectChanges();
+      await new Promise((resolve) => setTimeout(resolve, 1));
+    }
+    fixture.detectChanges();
+    return fixture.nativeElement as HTMLElement;
+  }
+
+  /** Texto de la celda con los espacios duros de `Intl` normalizados. */
+  function texto(nodo: HTMLElement): string {
+    return (nodo.textContent ?? '').replace(/\u00a0/g, ' ');
+  }
+
+  /** Celda mínima; cada caso sobreescribe lo que necesita. */
+  function celda(parcial: { column: ListColumn } & Partial<ColumnCell>): ColumnCell {
+    return {
+      row: {},
+      fields: [],
+      title: 'Una fila',
+      canUpdate: false,
+      saving: false,
+      currency: 'PEN',
+      ...parcial,
+    };
+  }
+
+  it('los 7 formatos de la unión están registrados', () => {
+    // `ListColumnFormat` vive en tipos y el manifiesto en runtime: sólo un
+    // test reconcilia los dos (mismo tripwire que campos y widgets).
+    expect(COLUMN_FORMAT_TYPES.length).toBe(7);
+  });
+
+  describe('text', () => {
+    const col: ListColumn = { key: 'nombre', label: 'Nombre', format: 'text' };
+
+    it('pinta el valor crudo', async () => {
+      const nodo = await pintar(col, { row: { nombre: 'ORD-42' } });
+      expect(nodo.textContent).toContain('ORD-42');
+    });
+
+    it('null y undefined salen vacíos', async () => {
+      expect((await pintar(col, { row: { nombre: null } })).textContent?.trim()).toBe('');
+      expect((await pintar(col, { row: {} })).textContent?.trim()).toBe('');
+    });
+
+    it('un objeto sale [object Object] (degradación heredada)', async () => {
+      const nodo = await pintar(col, { row: { nombre: { a: 1 } } });
+      expect(nodo.textContent).toContain('[object Object]');
+    });
+  });
+
+  describe('number', () => {
+    const col: ListColumn = { key: 'stock', label: 'Stock', format: 'number' };
+
+    it('agrupa con separador es-PE', async () => {
+      const nodo = await pintar(col, { row: { stock: 1234567.5 } });
+      expect(nodo.textContent).toContain('1,234,567.5');
+    });
+
+    it('no numérico sale crudo y null sigue saliendo «0»', async () => {
+      expect((await pintar(col, { row: { stock: 'varios' } })).textContent).toContain('varios');
+      // Quirk heredado de `formatNumber`: `Number(null)` es 0 y por eso la
+      // lista ya mostraba «0» en vez de vacío. Se conserva — cambiarlo es
+      // otra decisión, no este registro.
+      expect((await pintar(col, { row: { stock: null } })).textContent?.trim()).toBe('0');
+    });
+  });
+
+  describe('currency', () => {
+    const col: ListColumn = { key: 'price', label: 'Precio', format: 'currency' };
+
+    it('usa la moneda que entrega la vista', async () => {
+      const nodo = await pintar(col, { row: { price: 1234.5 } });
+      // `Intl` separa el símbolo con espacio duro (U+00A0): se normaliza para
+      // que el aserto no dependa de ese byte.
+      expect(texto(nodo)).toContain('S/ 1,234.50');
+    });
+
+    it('cambia de moneda con la celda', async () => {
+      const nodo = await pintar(col, { row: { price: 1234.5 }, currency: 'USD' });
+      expect(texto(nodo)).toContain('USD 1,234.50');
+    });
+  });
+
+  describe('date', () => {
+    const col: ListColumn = { key: 'fecha', label: 'Fecha', format: 'date' };
+
+    it('formato corto es-PE en UTC', async () => {
+      const nodo = await pintar(col, { row: { fecha: '2026-12-25' } });
+      expect(nodo.textContent).toContain('25/12/2026');
+    });
+
+    it('no parseable sale crudo', async () => {
+      expect((await pintar(col, { row: { fecha: 'ayer' } })).textContent).toContain('ayer');
+    });
+  });
+
+  describe('badge', () => {
+    const col: ListColumn = { key: 'status', label: 'Estado', format: 'badge' };
+
+    it('clasifica el estado como el display del detalle (D41)', async () => {
+      // `warning` se pinta como `accent` (bg-accent/20 + text-accent-text).
+      const pendiente = await pintar(col, { row: { status: 'PENDIENTE' } });
+      expect(pendiente.querySelector('app-badge')?.className).toContain('bg-accent/20');
+
+      const entregado = await pintar(col, { row: { status: 'ENTREGADO' } });
+      expect(entregado.querySelector('app-badge')?.className).toContain('bg-success');
+
+      const cancelado = await pintar(col, { row: { status: 'Cancelado' } });
+      expect(cancelado.querySelector('app-badge')?.className).toContain('bg-danger');
+
+      const otro = await pintar(col, { row: { status: 'Vigente' } });
+      expect(otro.querySelector('app-badge')?.className).toContain('bg-neutral');
+    });
+
+    it('un select pinta la etiqueta de la opción, no el valor crudo', async () => {
+      const nodo = await pintar(col, {
+        row: { status: 'preparacion' },
+        fields: [
+          {
+            key: 'status',
+            label: 'Estado',
+            type: 'select',
+            options: [
+              { value: 'preparacion', label: 'En preparación' },
+              { value: 'entregado', label: 'Entregado' },
+            ],
+          },
+        ],
+      });
+      expect(nodo.textContent).toContain('En preparación');
+    });
+
+    it('el vacío sale «Sin dato» en danger', async () => {
+      const nodo = await pintar(col, { row: { status: '' } });
+      expect(nodo.textContent).toContain('Sin dato');
+      expect(nodo.querySelector('app-badge')?.className).toContain('bg-danger');
+    });
+
+    it('un booleano usa trueLabel/falseLabel del campo', async () => {
+      const nodo = await pintar(col, {
+        row: { status: true },
+        fields: [{ key: 'status', label: 'Estado', type: 'boolean', trueLabel: 'Vigente' }],
+      });
+      expect(nodo.textContent).toContain('Vigente');
+      expect(nodo.querySelector('app-badge')?.className).toContain('bg-success');
+    });
+  });
+
+  describe('boolean', () => {
+    const col: ListColumn = { key: 'active', label: 'Activo', format: 'boolean' };
+    const booleano = { key: 'active', label: 'Activo', type: 'boolean' as const };
+
+    it('con permiso y campo booleano dibuja el interruptor', async () => {
+      const nodo = await pintar(col, {
+        row: { active: true },
+        fields: [booleano],
+        canUpdate: true,
+      });
+      const box = nodo.querySelector<HTMLInputElement>('input[type="checkbox"]');
+      expect(box, 'debe dibujarse el interruptor').not.toBeNull();
+      expect(box?.checked).toBe(true);
+      expect(box?.getAttribute('aria-label')).toBe('Activo: Una fila');
+    });
+
+    it('sin permiso cae al badge', async () => {
+      const nodo = await pintar(col, { row: { active: true }, fields: [booleano] });
+      expect(nodo.querySelector('input[type="checkbox"]')).toBeNull();
+      expect(nodo.textContent).toContain('Sí');
+    });
+
+    it('mientras la fila guarda, el interruptor queda bloqueado', async () => {
+      const nodo = await pintar(col, {
+        row: { active: false },
+        fields: [booleano],
+        canUpdate: true,
+        saving: true,
+      });
+      const box = nodo.querySelector<HTMLInputElement>('input[type="checkbox"]');
+      expect(box?.disabled, 'mientras guarda, la fila está bloqueada').toBe(true);
+    });
+
+    it('al alternar escribe por la celda', async () => {
+      const toggle = vi.fn();
+      const nodo = await pintar(col, {
+        row: { active: false },
+        fields: [booleano],
+        canUpdate: true,
+        toggle,
+      });
+      nodo.querySelector<HTMLInputElement>('input[type="checkbox"]')!.click();
+      expect(toggle).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('thumbnail', () => {
+    const col: ListColumn = { key: 'image_url', label: 'Imagen', format: 'thumbnail' };
+
+    it('pinta la imagen con su alt', async () => {
+      const nodo = await pintar(col, { row: { image_url: 'https://x.test/a.png' } });
+      const img = nodo.querySelector('img');
+      expect(img?.getAttribute('src')).toBe('https://x.test/a.png');
+      expect(img?.getAttribute('alt')).toBe('');
+    });
+
+    it('toma el primer item de images[] con su image_alt', async () => {
+      const nodo = await pintar(
+        { key: 'images', label: 'Imágenes', format: 'thumbnail' },
+        { row: { images: [{ image_url: 'https://x.test/b.png', image_alt: 'Frente' }] } },
+      );
+      expect(nodo.querySelector('img')?.getAttribute('src')).toBe('https://x.test/b.png');
+      expect(nodo.querySelector('img')?.getAttribute('alt')).toBe('Frente');
+    });
+
+    it('sin URL pinta el guion', async () => {
+      const nodo = await pintar(col, { row: { image_url: '' } });
+      expect(nodo.textContent).toContain('—');
+      expect(nodo.querySelector('img')).toBeNull();
+    });
+  });
+});

package/src/lib/columns/descriptors.ts

@@ -0,0 +1,113 @@
+import type { RenderDescriptor, RenderExtras } from '../core/registry/render-registry';
+
+/**
+ * Manifiesto de descriptores de formato de columna (R4.3 · `kind:
+ * 'column-format'`).
+ *
+ * Es el equivalente a `fields/descriptors.ts` y `widgets/descriptors.ts`:
+ * una línea por formato y ningún import de componente — cada `load()` guarda
+ * el cierre de un `import()` **con literal**, que es lo que permite al
+ * bundler partir el chunk; el registro los recoge al importar este módulo
+ * (`core/registry/render-registry.ts`).
+ *
+ * **Añadir un formato** ⇒ crear `format-<nombre>.ts` + una entrada acá.
+ * `list-view` no se toca: ése es el criterio de éxito de R4.3.
+ *
+ * Todos comparten el cableado: el descriptor sólo expone la celda, que la
+ * vista cuelga de `extras.data`.
+ */
+const inputs = (_config: unknown, extras: RenderExtras): Record<string, unknown> => ({
+  cell: extras.data,
+});
+
+const text: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'text',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-text').then((module) => module.ColumnFormatText),
+  inputs,
+};
+
+const badge: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'badge',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-badge').then((module) => module.ColumnFormatBadge),
+  inputs,
+};
+
+const thumbnail: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'thumbnail',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-thumbnail').then((module) => module.ColumnFormatThumbnail),
+  inputs,
+};
+
+const boolean: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'boolean',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-boolean').then((module) => module.ColumnFormatBoolean),
+  inputs,
+};
+
+const number: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'number',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-number').then((module) => module.ColumnFormatNumber),
+  inputs,
+};
+
+const currency: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'currency',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-currency').then((module) => module.ColumnFormatCurrency),
+  inputs,
+};
+
+const date: RenderDescriptor = {
+  kind: 'column-format',
+  type: 'date',
+  since: '1.0',
+  surfaces: ['list'],
+  load: () => import('./format-date').then((module) => module.ColumnFormatDate),
+  inputs,
+};
+
+/** Los 7 formatos del `@switch` que este registro reemplaza (R4.3). */
+export const columnFormatDescriptors: readonly RenderDescriptor[] = [
+  text,
+  badge,
+  thumbnail,
+  boolean,
+  number,
+  currency,
+  date,
+];
+
+/**
+ * Los 7 nombres, como dato.
+ *
+ * Va en paralelo a `ListColumnFormat` (unión de `schema.model`) y lo vigila
+ * `core/registry/contract.spec.ts`: la unión vive en tipos y el registro en
+ * runtime, y sólo un test reconcilia los dos — el mismo tripwire que ya
+ * existe para los 20 campos y los 6 widgets.
+ */
+export const COLUMN_FORMAT_TYPES = [
+  'text',
+  'badge',
+  'thumbnail',
+  'boolean',
+  'number',
+  'currency',
+  'date',
+] as const;

package/src/lib/columns/format-badge.ts

@@ -0,0 +1,51 @@
+import { Component, computed, input } from '@angular/core';
+
+import { Badge, type BadgeKind } from '../shared/components/badge/badge';
+import { resolveBadgeKind } from '../fields/display/display-badge';
+import type { SelectField } from '../core/models/schema.model';
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+/**
+ * Formato `badge` (R4.3, afinado en R4.4).
+ *
+ * Un booleano usa `trueLabel`/`falseLabel` del campo (o «Sí»/«No») con
+ * `success`/`danger` — el vocabulario de la lista para el control que
+ * permite escribir. El vacío sigue siendo «Sin dato»/`danger`.
+ *
+ * El resto alinea el chip con el display del detalle (D41): un `select`
+ * pinta la **etiqueta** de la opción y los estados se clasifican con
+ * `resolveBadgeKind`, el mismo criterio que la cabecera de la ficha —
+ * antes, toda columna declarada `badge` salía verde sin mirar el valor.
+ */
+@Component({
+  selector: 'app-column-format-badge',
+  imports: [Badge],
+  template: `<app-badge [label]="badge().label" [kind]="badge().kind" />`,
+})
+export class ColumnFormatBadge {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly badge = computed(() => badgeInfo(this.cell()));
+}
+
+export function badgeInfo(cell: ColumnCell): { label: string; kind: BadgeKind } {
+  const value = getValue(cell.row, cell.column.key);
+  const field = cell.fields.find((candidate) => candidate.key === cell.column.key);
+  if (typeof value === 'boolean') {
+    const label =
+      value === true
+        ? ((field?.type === 'boolean' ? field.trueLabel : undefined) ?? 'Sí')
+        : ((field?.type === 'boolean' ? field.falseLabel : undefined) ?? 'No');
+    return { label, kind: value ? 'success' : 'danger' };
+  }
+  const text = value == null ? '' : String(value);
+  if (text === '') {
+    return { label: 'Sin dato', kind: 'danger' };
+  }
+  const etiqueta =
+    field?.type === 'select'
+      ? ((field as SelectField).options?.find((option) => option.value === text)?.label ?? text)
+      : text;
+  return { label: etiqueta, kind: resolveBadgeKind(text) };
+}

package/src/lib/columns/format-boolean.ts

@@ -0,0 +1,58 @@
+import { Component, computed, input } from '@angular/core';
+
+import { Badge } from '../shared/components/badge/badge';
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+import { badgeInfo } from './format-badge';
+
+/**
+ * Formato `boolean` (R4.3): interruptor o badge.
+ *
+ * Es la rama `@case ('boolean')` de `list-view`, con una sola diferencia de
+ * domicilio: hoy sólo monta este componente si el formato efectivo ya es
+ * `boolean`, así que la comprobación `column.format === 'boolean'` que hacía
+ * `isSwitchColumn` sobra. El criterio restante — `active` booleano y con
+ * permiso de edición (base.md §10) — vive acá, que es quien dibuja el control.
+ */
+@Component({
+  selector: 'app-column-format-boolean',
+  imports: [Badge],
+  template: `
+    @if (esInterruptor()) {
+      <input
+        type="checkbox"
+        class="size-5 cursor-pointer accent-primary"
+        [checked]="valor()"
+        [disabled]="cell().saving"
+        [attr.aria-label]="cell().column.label + ': ' + cell().title"
+        (click)="$event.stopPropagation()"
+        (change)="alternar($event)"
+      />
+    } @else {
+      <app-badge [label]="badge().label" [kind]="badge().kind" />
+    }
+  `,
+})
+export class ColumnFormatBoolean {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly badge = computed(() => badgeInfo(this.cell()));
+
+  protected readonly valor = computed(() => {
+    const value = getValue(this.cell().row, this.cell().column.key);
+    return value === true || value === 'true';
+  });
+
+  /** `active` declarado como boolean en el schema → interruptor (base.md §10). */
+  protected readonly esInterruptor = computed(() => {
+    const cell = this.cell();
+    if (cell.column.key !== 'active' || !cell.canUpdate) {
+      return false;
+    }
+    return cell.fields.some((field) => field.type === 'boolean' && field.key === 'active');
+  });
+
+  protected alternar(event: Event): void {
+    this.cell().toggle?.((event.target as HTMLInputElement).checked);
+  }
+}

package/src/lib/columns/format-currency.ts

@@ -0,0 +1,30 @@
+import { Component, computed, input } from '@angular/core';
+
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+/**
+ * Formato `currency` (R4.3). Igual que el helper de `list-view`: `es-PE`,
+ * moneda tomada del schema (se pasaba desde la vista porque sólo ella la
+ * conoce) y texto crudo si el valor no es número.
+ */
+@Component({
+  selector: 'app-column-format-currency',
+  template: `{{ precio() }}`,
+})
+export class ColumnFormatCurrency {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly precio = computed(() => {
+    const cell = this.cell();
+    const value = getValue(cell.row, cell.column.key);
+    const number = Number(value);
+    if (!Number.isFinite(number)) {
+      return value == null ? '' : String(value);
+    }
+    return new Intl.NumberFormat('es-PE', {
+      style: 'currency',
+      currency: cell.currency,
+    }).format(number);
+  });
+}

package/src/lib/columns/format-date.ts

@@ -0,0 +1,35 @@
+import { Component, computed, input } from '@angular/core';
+
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+function formatDate(value: unknown): string {
+  if (typeof value !== 'string' || value === '') {
+    return value == null ? '' : String(value);
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  // Fechas `YYYY-MM-DD`: forzar UTC para no desfasar un día.
+  return date.toLocaleDateString('es-PE', { timeZone: 'UTC' });
+}
+
+/**
+ * Formato `date` (R4.3). Corto (`toLocaleDateString`), a diferencia del
+ * display de la ficha, que va con `dateStyle: 'medium'`: cada superficie
+ * con su formato, pero ambos desde su propio componente.
+ */
+@Component({
+  selector: 'app-column-format-date',
+  template: `{{ fecha() }}`,
+})
+export class ColumnFormatDate {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly fecha = computed(() => formatDate(this.valor()));
+
+  private valor(): unknown {
+    return getValue(this.cell().row, this.cell().column.key);
+  }
+}

package/src/lib/columns/format-number.ts

@@ -0,0 +1,32 @@
+import { Component, computed, input } from '@angular/core';
+
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+const NUMBER_FORMAT = new Intl.NumberFormat('es-PE');
+
+function formatNumber(value: unknown): string {
+  const number = Number(value);
+  if (!Number.isFinite(number)) {
+    return value == null ? '' : String(value);
+  }
+  return NUMBER_FORMAT.format(number);
+}
+
+/**
+ * Formato `number` (R4.3). Misma fórmula que el helper de `list-view`:
+ * miles con separador `es-PE` y texto crudo si el valor no es número.
+ */
+@Component({
+  selector: 'app-column-format-number',
+  template: `{{ numero() }}`,
+})
+export class ColumnFormatNumber {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly numero = computed(() => formatNumber(this.valor()));
+
+  private valor(): unknown {
+    return getValue(this.cell().row, this.cell().column.key);
+  }
+}

package/src/lib/columns/format-text.ts

@@ -0,0 +1,23 @@
+import { Component, computed, input } from '@angular/core';
+
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+/**
+ * Formato `text` (R4.3 · el `@default` del `@switch` viejo).
+ *
+ * `cellText` de `list-view`: `null`/`undefined` se pintan vacíos y el resto
+ * pasa por `String()` — un objeto sale `[object Object]`, igual que antes.
+ */
+@Component({
+  selector: 'app-column-format-text',
+  template: `{{ texto() }}`,
+})
+export class ColumnFormatText {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly texto = computed(() => {
+    const value = getValue(this.cell().row, this.cell().column.key);
+    return value == null ? '' : String(value);
+  });
+}

package/src/lib/columns/format-thumbnail.ts

@@ -0,0 +1,63 @@
+import { Component, computed, input } from '@angular/core';
+
+import { getValue } from '../shared/utils/field-path';
+import type { ColumnCell } from './column-cell';
+
+/**
+ * Formato `thumbnail` (R4.3): miniatura de la fila.
+ *
+ * Tanto `thumbnailSrc` como `thumbnailAlt` se mudan desde `list-view`: la
+ * columna puede apuntar a `image_url`, al primer elemento de `images[]` o a
+ * un objeto con `image_url`, y el texto alternativo sale del item o de la
+ * fila. Sin URL se pinta el `—` de siempre.
+ */
+@Component({
+  selector: 'app-column-format-thumbnail',
+  template: `
+    @if (src(); as url) {
+      <img [src]="url" [alt]="alt()" class="size-9 rounded-md object-cover" loading="lazy" />
+    } @else {
+      <span class="text-neutral" aria-hidden="true">—</span>
+    }
+  `,
+})
+export class ColumnFormatThumbnail {
+  readonly cell = input.required<ColumnCell>();
+
+  protected readonly src = computed(() => {
+    const value = this.valor();
+    if (typeof value === 'string') {
+      return value !== '' ? value : null;
+    }
+    if (Array.isArray(value)) {
+      const first = value[0];
+      const url = typeof first === 'string' ? first : getValue(first, 'image_url');
+      return typeof url === 'string' && url !== '' ? url : null;
+    }
+    if (value && typeof value === 'object') {
+      const url = getValue(value, 'image_url');
+      return typeof url === 'string' && url !== '' ? url : null;
+    }
+    return null;
+  });
+
+  protected readonly alt = computed(() => {
+    const value = this.valor();
+    let item: unknown = this.cell().row;
+    if (Array.isArray(value)) {
+      item = value[0] ?? null;
+    } else if (value && typeof value === 'object') {
+      item = value;
+    }
+    const alt = item == null ? null : getValue(item, 'image_alt');
+    if (typeof alt === 'string' && alt !== '') {
+      return alt;
+    }
+    const rootAlt = this.cell().row['image_alt'];
+    return typeof rootAlt === 'string' ? rootAlt : '';
+  });
+
+  private valor(): unknown {
+    return getValue(this.cell().row, this.cell().column.key);
+  }
+}