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

package/src/lib/widgets/record-list/record-list.ts

@@ -0,0 +1,115 @@
+import { Component, computed, inject, input } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
+
+import type { RecordListWidget } from '../../core/models/schema.model';
+import { interpolateTemplate, parseNavigationUrl } from '../../core/utils/template-interpolator';
+import { EmptyState } from '../../shared/components/empty-state/empty-state';
+
+/**
+ * Tabla embebida de registros operativos para el Dashboard.
+ * Permite visualizar filas clave (ej. pedidos que requieren atención)
+ * con enlace de acción por fila hacia su ficha de detalle.
+ */
+@Component({
+  selector: 'app-record-list',
+  imports: [EmptyState, RouterLink],
+  template: `
+    <article class="flex h-full flex-col rounded-xl border border-neutral/20 bg-surface p-4">
+      <header class="mb-3 flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <h2 class="text-sm font-semibold text-neutral-light">{{ widget().label }}</h2>
+          @if (rows().length > 0) {
+            <span
+              class="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+            >
+              {{ rows().length }}
+            </span>
+          }
+        </div>
+      </header>
+
+      @if (rows().length === 0) {
+        <div class="flex flex-1 items-center justify-center py-6">
+          <app-empty-state
+            title="Sin registros pendientes"
+            message="No hay registros que requieran atención en este momento."
+          />
+        </div>
+      } @else {
+        <div class="flex-1 overflow-x-auto">
+          <table class="w-full text-left text-sm" role="table">
+            <thead>
+              <tr class="border-b border-neutral/10 text-xs text-neutral">
+                @for (col of widget().columns; track col) {
+                  <th scope="col" class="pb-2 font-medium capitalize">{{ formatHeader(col) }}</th>
+                }
+                @if (widget().action) {
+                  <th scope="col" class="pb-2 text-right font-medium">Acción</th>
+                }
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-neutral/10">
+              @for (row of rows(); track trackRow(row, $index)) {
+                <tr class="transition-colors hover:bg-neutral/5">
+                  @for (col of widget().columns; track col) {
+                    <td class="py-2.5 pr-3 text-neutral-light">
+                      <span class="line-clamp-1">{{ formatCell(row[col]) }}</span>
+                    </td>
+                  }
+                  @if (widget().action) {
+                    <td class="py-2.5 text-right">
+                      <a
+                        [routerLink]="resolveRoute(row).path"
+                        [queryParams]="resolveRoute(row).queryParams"
+                        class="inline-flex items-center rounded-lg border border-neutral/30 bg-surface px-2.5 py-1 text-xs font-medium text-neutral-light transition-colors hover:bg-neutral/10"
+                      >
+                        {{ widget().action?.label || 'Ver' }}
+                      </a>
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    </article>
+  `,
+})
+export class RecordList {
+  protected readonly router = inject(Router, { optional: true });
+
+  readonly widget = input.required<RecordListWidget>();
+  readonly data = input<Record<string, unknown>[] | null>(null);
+
+  protected readonly rows = computed<Record<string, unknown>[]>(() => {
+    const val = this.data();
+    if (!Array.isArray(val)) return [];
+    return val.filter(
+      (item): item is Record<string, unknown> => typeof item === 'object' && item !== null,
+    );
+  });
+
+  protected formatHeader(key: string): string {
+    return key.replace(/_/g, ' ');
+  }
+
+  protected formatCell(value: unknown): string {
+    if (value === null || value === undefined || value === '') return '—';
+    if (typeof value === 'object') return JSON.stringify(value);
+    return String(value);
+  }
+
+  protected trackRow(row: Record<string, unknown>, index: number): string | number {
+    return (row['id'] as string) || (row['ref'] as string) || (row['key'] as string) || index;
+  }
+
+  protected resolveRoute(row: Record<string, unknown>): {
+    path: string;
+    queryParams: Record<string, string>;
+  } {
+    const template = this.widget().action?.routeTemplate;
+    if (!template) return { path: '', queryParams: {} };
+    return parseNavigationUrl(interpolateTemplate(template, row));
+  }
+}

package/src/lib/widgets/series.spec.ts

@@ -0,0 +1,42 @@
+import { toSeries } from './series';
+
+// R6.3 — el agregado con groupBy del backend (R6.2) devuelve
+// [{ group, value }], no [{ label, value }]. `toSeries` es el puente
+// entre el contrato del motor y el de los gráficos: debe aceptar AMBAS
+// formas. Sin esto, chart-line/bar-chart pintarían [] con un agregado
+// agrupado declarado.
+describe('toSeries', () => {
+  it('normaliza las filas del agregado agrupado { group, value }', () => {
+    expect(
+      toSeries([
+        { group: '2024-03-15', value: 30 },
+        { group: '2024-03-16', value: 7 },
+      ]),
+    ).toEqual([
+      { label: '2024-03-15', value: 30 },
+      { label: '2024-03-16', value: 7 },
+    ]);
+  });
+
+  it('conserva la forma histórica { label, value }', () => {
+    expect(toSeries([{ label: 'Lun', value: 3 }])).toEqual([{ label: 'Lun', value: 3 }]);
+  });
+
+  it('descarta filas cuyo group no es string o value no es number', () => {
+    expect(
+      toSeries([
+        { group: 'ok', value: 1 },
+        { group: 42, value: 2 },
+        { group: 'mal', value: 'x' },
+        null,
+        'fila',
+      ]),
+    ).toEqual([{ label: 'ok', value: 1 }]);
+  });
+
+  it('devuelve [] ante cualquier cosa que no sea array', () => {
+    expect(toSeries(null)).toEqual([]);
+    expect(toSeries({ group: 'x', value: 1 })).toEqual([]);
+    expect(toSeries(7)).toEqual([]);
+  });
+});

package/src/lib/widgets/series.ts

@@ -0,0 +1,56 @@
+import type { BarDatum } from './bar-chart/bar-chart';
+
+/**
+ * Normaliza el payload de un gráfico a `{ label: string, value: number }`.
+ *
+ * El dashboard recibe filas de una tabla y no todas llegan limpias, así que
+ * el filtro se hace en el **borde** — en el descriptor, antes de que el dato
+ * llegue al componente — y no dentro de cada gráfico. `bar-chart` y
+ * `chart-line` comparten la misma regla, de ahí la función suelta.
+ *
+ * Devuelve `[]` ante cualquier cosa que no sea un array: un `metric-card`
+ * pasado por error a un gráfico no puede romper la tarjeta.
+ */
+export function toSeries(data: unknown): BarDatum[] {
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  return data
+    .map((row): BarDatum | null => {
+      if (typeof row !== 'object' || row === null) return null;
+      const r = row as { label?: unknown; group?: unknown; value?: unknown };
+      // El agregado agrupado del backend (R6.2) llega como { group, value };
+      // la forma histórica de tabla es { label, value }. El gráfico sólo
+      // entiende label ⇒ traducimos acá, en el borde.
+      const label = typeof r.label === 'string' ? r.label : r.group;
+      if (typeof label !== 'string' || typeof r.value !== 'number') return null;
+      return { label, value: r.value };
+    })
+    .filter((row): row is BarDatum => row !== null);
+}
+
+/**
+ * Normaliza el payload de un contador repartido por segmentos a
+ * `{ clave: número }`.
+ *
+ * Dos formas, igual que `toSeries`:
+ * - **payload** del panel: ya es un objeto plano de contadores por clave;
+ * - **fuente declarada** (F8 · R6.5): una vista con `groupBy` devuelve filas
+ *   `[{ group, value }]` y cada grupo es el nombre de un segmento.
+ *
+ * `null` ante cualquier otra cosa: `StatusProgress` lo pinta como vacío en
+ * vez de sumar un `[object Object]`.
+ */
+export function toCounters(data: unknown): Record<string, unknown> | null {
+  if (Array.isArray(data)) {
+    const out: Record<string, unknown> = {};
+    for (const row of data) {
+      if (typeof row !== 'object' || row === null) continue;
+      const r = row as { group?: unknown; value?: unknown };
+      if (typeof r.group === 'string' && 'value' in r) out[r.group] = r.value;
+    }
+    return out;
+  }
+  if (typeof data === 'object' && data !== null) return data as Record<string, unknown>;
+  return null;
+}

package/src/lib/widgets/status-progress/status-progress.descriptor.ts

@@ -0,0 +1,19 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+import { toCounters } from '../series';
+
+/** Descriptor del widget `status-progress` (R3.6). */
+export const descriptor: RenderDescriptor = {
+  kind: 'widget',
+  type: 'status-progress',
+  since: '1.0',
+  load: () => import('./status-progress').then((module) => module.StatusProgress),
+  surfaces: ['display'],
+  // Contadores por clave: un objeto plano del payload O las filas de una
+  // fuente con `groupBy` (F8 · R6.5) — `toCounters` traduce en el borde y
+  // devuelve `null` si no hay nada que contar.
+  inputs: (config, extras) => ({
+    widget: config,
+    data: toCounters(extras.data),
+  }),
+};

package/src/lib/widgets/status-progress/status-progress.spec.ts

@@ -0,0 +1,63 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { describe, expect, it, beforeEach } from 'vitest';
+
+import type { StatusProgressWidget } from '../../core/models/schema.model';
+import { StatusProgress } from './status-progress';
+
+describe('StatusProgress', () => {
+  let fixture: ComponentFixture<StatusProgress>;
+
+  const widget: StatusProgressWidget = {
+    type: 'status-progress',
+    key: 'balance_dia',
+    label: 'Progreso de Pedidos del Día',
+    segments: [
+      { key: 'entregados', label: 'Entregados', color: 'success' },
+      { key: 'pendientes', label: 'Pendientes', color: 'warning' },
+      { key: 'cancelados', label: 'Cancelados', color: 'danger' },
+    ],
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StatusProgress],
+    }).compileComponents();
+    fixture = TestBed.createComponent(StatusProgress);
+  });
+
+  it('1. calcula y muestra los valores y porcentajes correctamente', () => {
+    const data = { entregados: 5, pendientes: 3, cancelados: 2 };
+
+    fixture.componentRef.setInput('widget', widget);
+    fixture.componentRef.setInput('data', data);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('Progreso de Pedidos del Día');
+    expect(root.textContent).toContain('Total: 10');
+    expect(root.textContent).toContain('5 (50%)');
+    expect(root.textContent).toContain('3 (30%)');
+    expect(root.textContent).toContain('2 (20%)');
+  });
+
+  it('2. maneja total en 0 sin dividir por cero', () => {
+    const data = { entregados: 0, pendientes: 0, cancelados: 0 };
+
+    fixture.componentRef.setInput('widget', widget);
+    fixture.componentRef.setInput('data', data);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('Total: 0');
+    expect(root.textContent).toContain('0 (0%)');
+  });
+
+  it('3. maneja datos nulos asignando 0%', () => {
+    fixture.componentRef.setInput('widget', widget);
+    fixture.componentRef.setInput('data', null);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('Total: 0');
+  });
+});

package/src/lib/widgets/status-progress/status-progress.ts

@@ -0,0 +1,104 @@
+import { Component, computed, input } from '@angular/core';
+
+import type { StatusProgressWidget } from '../../core/models/schema.model';
+
+interface SegmentDisplay {
+  key: string;
+  label: string;
+  value: number;
+  percentage: number;
+  barClass: string;
+  dotClass: string;
+}
+
+const COLOR_MAP: Record<string, { bar: string; dot: string }> = {
+  success: { bar: 'bg-emerald-500', dot: 'bg-emerald-500' },
+  warning: { bar: 'bg-amber-500', dot: 'bg-amber-500' },
+  danger: { bar: 'bg-rose-500', dot: 'bg-rose-500' },
+  neutral: { bar: 'bg-neutral/40', dot: 'bg-neutral/40' },
+};
+
+/**
+ * Barra de distribución porcentual de estados operativos.
+ */
+@Component({
+  selector: 'app-status-progress',
+  template: `
+    <article class="flex h-full flex-col rounded-xl border border-neutral/20 bg-surface p-4">
+      <header class="mb-3 flex items-center justify-between">
+        <h2 class="text-sm font-semibold text-neutral-light">{{ widget().label }}</h2>
+        <span class="text-xs text-neutral" data-testid="total-count">
+          Total: {{ totalCount() }}
+        </span>
+      </header>
+
+      <!-- Barra segmentada -->
+      <div
+        class="flex h-3 w-full overflow-hidden rounded-full bg-neutral/10"
+        role="progressbar"
+        [attr.aria-valuenow]="totalCount()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="totalCount()"
+        [attr.aria-label]="widget().label"
+      >
+        @if (totalCount() === 0) {
+          <div class="h-full w-full bg-neutral/20"></div>
+        } @else {
+          @for (seg of calculatedSegments(); track seg.key) {
+            @if (seg.percentage > 0) {
+              <div
+                [class]="seg.barClass"
+                [style.width.%]="seg.percentage"
+                [title]="seg.label + ': ' + seg.value + ' (' + seg.percentage.toFixed(1) + '%)'"
+              ></div>
+            }
+          }
+        }
+      </div>
+
+      <!-- Leyenda -->
+      <div class="mt-3.5 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs">
+        @for (seg of calculatedSegments(); track seg.key) {
+          <div class="flex items-center gap-1.5 text-neutral-light">
+            <span class="h-2 w-2 rounded-full" [class]="seg.dotClass"></span>
+            <span class="font-medium">{{ seg.label }}:</span>
+            <span class="text-neutral">{{ seg.value }} ({{ seg.percentage.toFixed(0) }}%)</span>
+          </div>
+        }
+      </div>
+    </article>
+  `,
+})
+export class StatusProgress {
+  readonly widget = input.required<StatusProgressWidget>();
+  readonly data = input<Record<string, unknown> | null>(null);
+
+  protected readonly totalCount = computed(() => {
+    const d = this.data() || {};
+    return this.widget().segments.reduce((acc, seg) => {
+      const val = Number(d[seg.key]);
+      return acc + (isNaN(val) ? 0 : Math.max(0, val));
+    }, 0);
+  });
+
+  protected readonly calculatedSegments = computed<SegmentDisplay[]>(() => {
+    const d = this.data() || {};
+    const total = this.totalCount();
+
+    return this.widget().segments.map((seg) => {
+      const raw = Number(d[seg.key]);
+      const value = isNaN(raw) ? 0 : Math.max(0, raw);
+      const percentage = total > 0 ? (value / total) * 100 : 0;
+      const colors = COLOR_MAP[seg.color] || COLOR_MAP['neutral'];
+
+      return {
+        key: seg.key,
+        label: seg.label,
+        value,
+        percentage,
+        barClass: colors.bar,
+        dotClass: colors.dot,
+      };
+    });
+  });
+}

package/src/lib/widgets/widget-host/widget-host.spec.ts

@@ -0,0 +1,179 @@
+import { provideRouter } from '@angular/router';
+import { DeferBlockBehavior, ComponentFixture, TestBed } from '@angular/core/testing';
+import { describe, expect, it } from 'vitest';
+
+import { isSupported } from '../../core/registry/render-registry';
+import type { WidgetSchema } from '../../core/models/schema.model';
+import { WidgetHost } from './widget-host';
+
+describe('WidgetHost', () => {
+  let fixture: ComponentFixture<WidgetHost>;
+
+  const root = (): HTMLElement => fixture.nativeElement as HTMLElement;
+  const bars = (): HTMLElement[] => [...root().querySelectorAll<HTMLElement>('[role="img"] > div')];
+
+  /**
+   * El componente sale del registro con un `import()`, igual que los campos:
+   * `whenStable()` sólo lo cubre porque `RenderHost` lo registra como tarea
+   * pendiente (D28). Sin este ciclo el outlet todavía muestra el skeleton.
+   */
+  const pintar = async (): Promise<void> => {
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [WidgetHost],
+      providers: [provideRouter([])],
+      // `chart-line` lleva su propio `@defer (on viewport)` y jsdom no tiene
+      // `IntersectionObserver`: sin Manual el bloque reventaría al evaluarse.
+      deferBlockBehavior: DeferBlockBehavior.Manual,
+    }).compileComponents();
+    fixture = TestBed.createComponent(WidgetHost);
+  });
+
+  it('mismo contrato que field-host: fuera del catálogo no se dibuja', async () => {
+    expect(isSupported('widget', 'metric-card')).toBe(true);
+    expect(isSupported('widget', 'bar-chart')).toBe(true);
+    expect(isSupported('widget', 'chart-line')).toBe(true);
+    expect(isSupported('widget', 'record-list')).toBe(true);
+    expect(isSupported('widget', 'quick-actions')).toBe(true);
+    expect(isSupported('widget', 'status-progress')).toBe(true);
+    expect(isSupported('widget', 'pie-chart')).toBe(false);
+
+    fixture.componentRef.setInput('widget', {
+      type: 'pie-chart',
+      key: 'x',
+      label: 'X',
+    } as unknown as WidgetSchema);
+    await pintar();
+
+    expect(root().querySelector('app-metric-card')).toBeNull();
+    expect(root().querySelector('app-bar-chart')).toBeNull();
+    expect(root().querySelector('app-record-list')).toBeNull();
+    expect(root().querySelector('app-quick-actions')).toBeNull();
+    expect(root().querySelector('app-status-progress')).toBeNull();
+  });
+
+  it('despacha metric-card a la tarjeta con el dato recibido', async () => {
+    fixture.componentRef.setInput('widget', {
+      type: 'metric-card',
+      key: 'pendientes',
+      label: 'Pendientes',
+    });
+    fixture.componentRef.setInput('data', 3);
+    await pintar();
+
+    expect(root().querySelector('app-metric-card')).not.toBeNull();
+    expect(root().textContent).toContain('Pendientes');
+    expect(root().querySelector('[data-testid="value"]')?.textContent?.trim()).toBe('3');
+  });
+
+  it('despacha record-list con datos tabulares', async () => {
+    fixture.componentRef.setInput('widget', {
+      type: 'record-list',
+      key: 'pedidos',
+      label: 'Pedidos Activos',
+      columns: ['ref', 'status'],
+    });
+    fixture.componentRef.setInput('data', [{ ref: 'ORD-10', status: 'PENDIENTE' }]);
+    await pintar();
+
+    expect(root().querySelector('app-record-list')).not.toBeNull();
+    expect(root().textContent).toContain('Pedidos Activos');
+    expect(root().textContent).toContain('ORD-10');
+  });
+
+  it('despacha quick-actions con botones de atajo', async () => {
+    fixture.componentRef.setInput('widget', {
+      type: 'quick-actions',
+      key: 'accesos',
+      label: 'Acciones Rápidas',
+      actions: [{ label: 'Nuevo Pedido', navigateTo: '/orders/new' }],
+    });
+    await pintar();
+
+    expect(root().querySelector('app-quick-actions')).not.toBeNull();
+    expect(root().textContent).toContain('Acciones Rápidas');
+    expect(root().textContent).toContain('Nuevo Pedido');
+  });
+
+  it('despacha status-progress con barra porcentual', async () => {
+    fixture.componentRef.setInput('widget', {
+      type: 'status-progress',
+      key: 'balance',
+      label: 'Balance Diario',
+      segments: [{ key: 'ok', label: 'Completado', color: 'success' }],
+    });
+    fixture.componentRef.setInput('data', { ok: 10 });
+    await pintar();
+
+    expect(root().querySelector('app-status-progress')).not.toBeNull();
+    expect(root().textContent).toContain('Balance Diario');
+    expect(root().textContent).toContain('Completado');
+  });
+
+  it('despacha chart-line con su serie (el defer lo decide el propio widget)', async () => {
+    fixture.componentRef.setInput('widget', {
+      type: 'chart-line',
+      key: 'serie',
+      label: 'Entregas por día',
+    });
+    fixture.componentRef.setInput('data', []);
+    await pintar();
+
+    expect(root().querySelector('app-chart-line')).not.toBeNull();
+    expect(root().querySelector('[data-testid="empty"]')?.textContent?.trim()).toBe('Sin datos.');
+  });
+
+  it('con loading reserva su espacio con skeleton sin montar el widget', () => {
+    // Cargar ≠ vacío (doc/ux-ui-mobile.md §estados): la tarjeta no pinta
+    // su estado vacío mientras el dato viaja, y la grilla conserva el span.
+    fixture.componentRef.setInput('widget', {
+      type: 'metric-card',
+      key: 'kpi',
+      label: 'KPI',
+      width: 8,
+    });
+    fixture.componentRef.setInput('loading', true);
+    fixture.detectChanges();
+
+    expect(root().querySelector('app-skeleton')).not.toBeNull();
+    expect(root().querySelector('app-metric-card')).toBeNull();
+    expect(root().className).toContain('col-span-12 lg:col-span-8');
+  });
+
+  it('calcula la clase de ancho de columna en la grilla', async () => {
+    fixture.componentRef.setInput('widget', {
+      type: 'metric-card',
+      key: 'kpi',
+      label: 'KPI',
+      width: 8,
+    });
+    await pintar();
+
+    expect(root().className).toContain('col-span-12 lg:col-span-8');
+  });
+
+  it('bar-chart descarta las series que no sean { label: string, value: number }', async () => {
+    fixture.componentRef.setInput('widget', {
+      type: 'bar-chart',
+      key: 'por_dia',
+      label: 'Entregas',
+    });
+    fixture.componentRef.setInput('data', [
+      { label: 'Lun', value: 2 },
+      { label: 'Mal', value: 'no-numérico' },
+      'no-objeto',
+      { label: 'Mar', value: 5 },
+    ]);
+    await pintar();
+
+    expect(bars().length).toBe(2);
+    expect(root().textContent).toContain('Lun');
+    expect(root().textContent).toContain('Mar');
+    expect(root().textContent).not.toContain('Mal');
+  });
+});

package/src/lib/widgets/widget-host/widget-host.ts

@@ -0,0 +1,99 @@
+import { Component, computed, input } from '@angular/core';
+
+import type { WidgetSchema } from '../../core/models/schema.model';
+import { RenderHost } from '../../core/registry/render-host';
+import { Skeleton } from '../../shared/components/skeleton/skeleton';
+
+/** Ancho mobile (base, sin prefijo) — literales para JIT de Tailwind v4. */
+const MOBILE_SPANS: Record<number, string> = {
+  1: 'col-span-1',
+  2: 'col-span-2',
+  3: 'col-span-3',
+  4: 'col-span-4',
+  5: 'col-span-5',
+  6: 'col-span-6',
+  7: 'col-span-7',
+  8: 'col-span-8',
+  9: 'col-span-9',
+  10: 'col-span-10',
+  11: 'col-span-11',
+  12: 'col-span-12',
+};
+
+/** Ancho responsive (sm/lg) — literales para JIT de Tailwind v4. */
+const RESPONSIVE_SPANS: Record<number, string> = {
+  12: '',
+  11: 'lg:col-span-11',
+  10: 'lg:col-span-10',
+  9: 'lg:col-span-9',
+  8: 'lg:col-span-8',
+  7: 'sm:col-span-6 lg:col-span-7',
+  6: 'sm:col-span-6',
+  5: 'sm:col-span-6 lg:col-span-5',
+  4: 'sm:col-span-6 lg:col-span-4',
+  3: 'sm:col-span-6 lg:col-span-3',
+  2: 'sm:col-span-6 lg:col-span-2',
+  1: 'sm:col-span-6 lg:col-span-1',
+};
+
+/**
+ * Adaptador de widgets (R3.6 · `doc/plan-refactor-motor.md` §3.6).
+ *
+ * Ya no despacha: `WidgetHost` era un `@switch` de seis ramas con los seis
+ * componentes importados a mano, exactamente lo que el registro viene a
+ * eliminar. Hoy sólo conserva lo que es **suyo** — traducir el contrato
+ * histórico `widget`/`data` al contrato genérico del motor
+ * (`type`/`config`/`data`) y pintar la clase de ancho en la grilla, que es
+ * una decisión del panel y no del motor de render.
+ *
+ * El `@switch`, los seis imports y `SUPPORTED_WIDGET_TYPES` desaparecieron:
+ * el tipo sale por `[type]`, el registro devuelve el componente y el
+ * `<app-render-host>` lo monta. Añadir un widget ⇒ carpeta + descriptor +
+ * una línea en `widgets/descriptors.ts` (R3.8).
+ *
+ * Nota sobre la accesibilidad: los widgets no llevan `aria-live`. Cada uno
+ * ya publica su propio estado (`role="img"` con resumen, `data-testid`,
+ * texto visible) y envolver el outlet entero en un `aria-live` anunciaría
+ * el panel completo con cada actualización de datos.
+ */
+@Component({
+  selector: 'app-widget-host',
+  imports: [RenderHost, Skeleton],
+  host: {
+    '[class]': 'gridSpanClass()',
+  },
+  template: `
+    @if (loading()) {
+      <!-- Reserva el espacio del widget mientras su dato viaja (la red
+           Apps Script tarda ~1s): sin esto el panel se veía "completo"
+           con valores vacíos que después aparecían solos (cargar ≠ vacío,
+           doc/ux-ui-mobile.md §estados de UI). La grilla mantiene su
+           span porque la clase la pone el host. -->
+      <div class="rounded-lg border border-neutral/20 bg-surface p-4">
+        <app-skeleton [lines]="1" [height]="14" width="40%" />
+        <div class="mt-3">
+          <app-skeleton [lines]="2" [height]="32" />
+        </div>
+      </div>
+    } @else {
+      <app-render-host kind="widget" [type]="widget().type" [config]="widget()" [data]="data()" />
+    }
+  `,
+})
+export class WidgetHost {
+  readonly widget = input.required<WidgetSchema>();
+  readonly data = input<unknown>(null);
+  /** El dato del widget todavía viaja: la tarjeta muestra skeleton. */
+  readonly loading = input(false);
+
+  /** Clases de ancho responsive (literales: Tailwind v4 es JIT, no interpolar). */
+  protected readonly gridSpanClass = computed(() => {
+    const w = this.widget().width ?? 4;
+    const mw = this.widget().mobileWidth ?? 12;
+
+    const mobile = MOBILE_SPANS[mw] ?? 'col-span-12';
+    const responsive = RESPONSIVE_SPANS[w] ?? 'sm:col-span-6 lg:col-span-4';
+
+    return [mobile, responsive, 'block'].filter(Boolean).join(' ');
+  });
+}