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

package/src/lib/shared/components/modal/modal.spec.ts

@@ -0,0 +1,149 @@
+import { Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FOCUSABLE, isVisibleNow } from '../../utils/dialog-focus';
+import { Modal } from './modal';
+
+/**
+ * Fase 9.3 — contrato de foco y cierre del diálogo.
+ *
+ * Mismo escenario que `drawer.spec.ts`: el disparador real está fuera del
+ * diálogo, así que se puede comprobar que el foco vuelve a él — también
+ * cuando el consumidor destruye el componente con el diálogo todavía abierto
+ * (se monta bajo un `@if`).
+ */
+@Component({
+  template: `
+    <button type="button" data-testid="trigger">Abrir</button>
+    <app-modal [open]="open()" [title]="title()" (close)="open.set(false)">
+      <button type="button" data-testid="body-action">Dentro del diálogo</button>
+      <button type="button" data-testid="secondary-action">Cancelar</button>
+    </app-modal>
+  `,
+  imports: [Modal],
+})
+class ModalHost {
+  readonly open = signal(false);
+  readonly title = signal('Confirmar borrado');
+}
+
+describe('Modal — 9.3: foco, Escape y restauración', () => {
+  let fixture: ComponentFixture<ModalHost>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [ModalHost] }).compileComponents();
+    fixture = TestBed.createComponent(ModalHost);
+    fixture.detectChanges();
+  });
+
+  const dialog = (): HTMLElement | null => fixture.nativeElement.querySelector('[role="dialog"]');
+  const trigger = (): HTMLButtonElement =>
+    fixture.nativeElement.querySelector('[data-testid="trigger"]');
+
+  const open = async (): Promise<void> => {
+    trigger().focus();
+    fixture.componentInstance.open.set(true);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+  };
+
+  it('cerrado no hay diálogo; abierto hay uno con nombre y aria-modal', async () => {
+    expect(dialog()).toBeNull();
+
+    await open();
+
+    const panel = dialog();
+    expect(panel).not.toBeNull();
+    expect(panel!.getAttribute('aria-modal')).toBe('true');
+    const labelledBy = panel!.getAttribute('aria-labelledby');
+    expect(document.getElementById(labelledBy!)?.textContent).toContain('Confirmar borrado');
+  });
+
+  it('Escape y el botón ✕ piden cerrar', async () => {
+    await open();
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.open()).toBe(false);
+
+    await open();
+    (fixture.nativeElement.querySelector('[aria-label="Cerrar"]') as HTMLElement).click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.open()).toBe(false);
+  });
+
+  it('el clic en el fondo pide cerrar', async () => {
+    await open();
+
+    (fixture.nativeElement.querySelector('.absolute.inset-0') as HTMLElement).click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.open()).toBe(false);
+  });
+
+  it('el foco entra al abrir y vuelve al disparador al cerrar', async () => {
+    await open();
+    expect(dialog()!.contains(document.activeElement)).toBe(true);
+
+    fixture.componentInstance.open.set(false);
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(document.activeElement).toBe(trigger());
+  });
+
+  it('destruirse con el diálogo abierto devuelve el foco (no se pierde detrás del fondo)', async () => {
+    await open();
+    expect(document.activeElement).toBe(dialog());
+
+    // Es lo que pasa cuando el consumidor lo monta bajo un `@if` y borra el
+    // nodo sin que la señal pase por `false`: el effect no llega a correr.
+    fixture.componentInstance.open.set(false);
+    fixture.destroy();
+
+    expect(document.activeElement).toBe(trigger());
+  });
+
+  it('el Tab queda atrapado: del último salta al primero', async () => {
+    await open();
+
+    const focusable = Array.from(
+      dialog()!.querySelectorAll<HTMLElement>('button, [href], input, select, textarea'),
+    );
+    expect(focusable.length).toBeGreaterThan(1);
+
+    const last = focusable[focusable.length - 1];
+    last.focus();
+    expect(document.activeElement).toBe(last);
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
+    expect(document.activeElement).toBe(focusable[0]);
+  });
+
+  it('el Shift+Tab queda atrapado: del primero salta al último', async () => {
+    await open();
+
+    const focusable = Array.from(
+      dialog()!.querySelectorAll<HTMLElement>('button, [href], input, select, textarea'),
+    );
+    expect(focusable.length).toBeGreaterThan(1);
+
+    // Diagnóstico: la lista que ve el trap debe ser la misma que la del test
+    // (si divergen, el selector de `FOCUSABLE` y el del test dejan de
+    // describir el mismo conjunto de elementos).
+    expect(
+      Array.from(dialog()!.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(isVisibleNow),
+      'el selector del trap difiere del del test',
+    ).toEqual(focusable);
+
+    const first = focusable[0];
+    first.focus();
+    expect(document.activeElement).toBe(first);
+
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, shiftKey: true }),
+    );
+
+    expect(document.activeElement).toBe(focusable[focusable.length - 1]);
+  });
+});

package/src/lib/shared/components/modal/modal.ts

@@ -0,0 +1,145 @@
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  afterRenderEffect,
+  input,
+  output,
+  viewChild,
+} from '@angular/core';
+import { LucideX } from '@lucide/angular';
+
+import { FOCUSABLE, isVisibleNow } from '../../utils/dialog-focus';
+
+let titleCounter = 0;
+
+/**
+ * Diálogo modal accesible: `aria-modal` con nombre por `aria-labelledby`,
+ * foco al abrirse y restaurado al cerrarse — también si el consumidor lo
+ * destruye con el diálogo todavía abierto — Escape y botón ✕ cierran.
+ *
+ * ATRAPA el Tab dentro del diálogo: sin eso el foco se tabula hacia la página
+ * de atrás y se pierde detrás del fondo oscuro. Mismo contrato que `drawer`,
+ * con el que comparte el selector de elementos focables.
+ *
+ * El clic en el fondo es un atajo para puntero; el teclado usa ✕ o Escape.
+ * Componente tonto: `open`/`title` entran por `input()`, el estado vive
+ * fuera.
+ */
+@Component({
+  selector: 'app-modal',
+  imports: [LucideX],
+  host: {
+    '(document:keydown.escape)': 'onEscape()',
+    // Angular arma la tecla CON sus modificadores y exige igualdad exacta:
+    // sin esta segunda entrada, Shift+Tab llega como `shift.tab`, no casa con
+    // `tab` y el foco escapa del diálogo hacia atrás.
+    '(document:keydown.tab)': 'onTab($event)',
+    '(document:keydown.shift.tab)': 'onTab($event)',
+  },
+  template: `
+    @if (open()) {
+      <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="absolute inset-0 bg-black/50" aria-hidden="true" (click)="close.emit()"></div>
+        <div
+          #dialog
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="titleId"
+          tabindex="-1"
+          class="relative w-full max-w-lg rounded-xl bg-surface-raised p-6 shadow-xl focus:outline-none"
+        >
+          <div class="mb-4 flex items-start justify-between gap-4">
+            <h2 [id]="titleId" class="font-display text-section font-semibold">
+              {{ title() }}
+            </h2>
+            <button
+              type="button"
+              class="flex min-h-11 min-w-11 items-center justify-center rounded text-neutral hover:bg-neutral/10 focus-visible:outline-2 focus-visible:outline-primary lg:min-h-0 lg:min-w-0"
+              [attr.aria-label]="closeLabel()"
+              (click)="close.emit()"
+            >
+              <svg lucideX size="18" />
+            </button>
+          </div>
+          <ng-content />
+        </div>
+      </div>
+    }
+  `,
+})
+export class Modal implements OnDestroy {
+  readonly open = input(false);
+  readonly title = input.required<string>();
+  readonly closeLabel = input('Cerrar');
+  readonly close = output<void>();
+
+  readonly titleId = `modal-title-${++titleCounter}`;
+
+  private readonly dialogRef = viewChild<ElementRef<HTMLDivElement>>('dialog');
+  private lastFocused: HTMLElement | null = null;
+
+  private readonly focusEffect = afterRenderEffect(() => {
+    const open = this.open();
+    const dialog = this.dialogRef();
+    if (open && dialog) {
+      const active = document.activeElement;
+      if (active !== dialog.nativeElement && this.lastFocused === null) {
+        this.lastFocused = active instanceof HTMLElement ? active : null;
+      }
+      dialog.nativeElement.focus();
+    } else if (!open && this.lastFocused !== null) {
+      this.lastFocused.focus();
+      this.lastFocused = null;
+    }
+  });
+
+  /**
+   * El consumidor puede destruir el componente con el diálogo todavía abierto
+   * (se monta bajo un `@if`): entonces el effect nunca ve la transición a
+   * `false` y el foco se quedaría perdido en el body.
+   */
+  ngOnDestroy(): void {
+    if (this.lastFocused?.isConnected) {
+      this.lastFocused.focus();
+    }
+    this.lastFocused = null;
+  }
+
+  onEscape(): void {
+    if (this.open()) {
+      this.close.emit();
+    }
+  }
+
+  /**
+   * Mantiene el Tab dentro del diálogo mientras está abierto. Recibe `Event`
+   * porque los host listeners de Angular tipean `$event` así; el teclado se
+   * relee acá dentro.
+   */
+  onTab(rawEvent: Event): void {
+    const event = rawEvent as KeyboardEvent;
+    const dialog = this.dialogRef()?.nativeElement;
+    if (!this.open() || !dialog) {
+      return;
+    }
+    const focusable = Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
+      (element) => isVisibleNow(element),
+    );
+    if (focusable.length === 0) {
+      event.preventDefault();
+      dialog.focus();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey && (active === first || active === dialog)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+}

package/src/lib/shared/components/post-create-modal/post-create-modal.spec.ts

@@ -0,0 +1,165 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { describe, expect, it, beforeEach } from 'vitest';
+
+import type { PostCreateSchema, ResourceSchema } from '../../../core/models/schema.model';
+import { CopyShare } from '../copy-share/copy-share';
+import { PostCreateModal } from './post-create-modal';
+
+describe('PostCreateModal', () => {
+  let fixture: ComponentFixture<PostCreateModal>;
+
+  const mockSchema: ResourceSchema = {
+    id: 'orders',
+    label: 'Pedido',
+    labelPlural: 'Pedidos',
+    kind: 'collection',
+    endpoint: { list: '/admin/orders' },
+    keyField: 'ref',
+    titleField: 'customer_name',
+    listColumns: [],
+    fields: [
+      { key: 'ref', type: 'text', label: 'Referencia' },
+      { key: 'customer_name', type: 'text', label: 'Cliente' },
+      { key: 'pickup_date', type: 'date', label: 'Fecha de Retiro' },
+    ],
+  };
+
+  const mockConfig: PostCreateSchema = {
+    mode: 'modal',
+    title: '¡Pedido {ref} Creado!',
+    description: 'El pedido de {customer_name} ya está listo para compartir.',
+    summaryFields: ['ref', 'customer_name', 'pickup_date'],
+    actions: [
+      {
+        id: 'share',
+        type: 'copy-share',
+        label: 'Copiar Enlace de Retiro',
+        urlTemplate: '{public_base_url}/p/{ref}',
+        shareTextTemplate: 'Hola {customer_name}, tu pedido {ref} está listo.',
+      },
+    ],
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PostCreateModal],
+    }).compileComponents();
+    fixture = TestBed.createComponent(PostCreateModal);
+  });
+
+  it('1. interpola título y descripción con los datos del registro', () => {
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('config', mockConfig);
+    fixture.componentRef.setInput('record', {
+      ref: 'ORD-555',
+      customer_name: 'Esteban Quito',
+      pickup_date: '2026-10-10',
+    });
+    fixture.componentRef.setInput('configValues', {
+      public_base_url: 'https://pickpass.app',
+    });
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('¡Pedido ORD-555 Creado!');
+    expect(root.textContent).toContain('El pedido de Esteban Quito ya está listo para compartir.');
+  });
+
+  it('2. renderiza los campos de resumen especificados en summaryFields', () => {
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('config', mockConfig);
+    fixture.componentRef.setInput('record', {
+      ref: 'ORD-555',
+      customer_name: 'Esteban Quito',
+      pickup_date: '2026-10-10',
+    });
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('Referencia');
+    expect(root.textContent).toContain('ORD-555');
+    expect(root.textContent).toContain('Cliente');
+    expect(root.textContent).toContain('Esteban Quito');
+    expect(root.textContent).toContain('Fecha de Retiro');
+    expect(root.textContent).toContain('2026-10-10');
+  });
+
+  it('3. renderiza el componente CopyShare cuando hay una acción copy-share', () => {
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('config', mockConfig);
+    fixture.componentRef.setInput('record', {
+      ref: 'ORD-888',
+      customer_name: 'Lucia',
+    });
+    fixture.componentRef.setInput('configValues', {
+      public_base_url: 'https://retiro.com',
+    });
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.querySelector('app-copy-share')).not.toBeNull();
+    expect(root.textContent).toContain('Copiar Enlace de Retiro');
+  });
+
+  it('4. emite evento closed al hacer clic en el botón Continuar', () => {
+    let closedEmitted = false;
+    fixture.componentInstance.closed.subscribe(() => {
+      closedEmitted = true;
+    });
+
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('config', mockConfig);
+    fixture.componentRef.setInput('record', { ref: 'ORD-1' });
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    const btns = Array.from(root.querySelectorAll<HTMLButtonElement>('button[app-button]'));
+    const btn = btns.find((b) => b.textContent?.trim() === 'Continuar');
+    btn?.click();
+    fixture.detectChanges();
+
+    expect(closedEmitted).toBe(true);
+  });
+
+  it('5. el enlace copiado lleva la URL pública sin que nadie pase configValues', () => {
+    // Réplica EXACTA del binding de producción: `form-view.ts:420-425` sólo
+    // pasa `schema`, `config`, `record` y `closed`. Nadie bindea
+    // `[configValues]`, así que la única fuente posible de
+    // `{public_base_url}` es `ConfigService` inyectado en el componente
+    // (D18): antes no lo estaba y el enlace salía sin dominio.
+    const configConUrl: PostCreateSchema = {
+      ...mockConfig,
+      actions: [
+        {
+          id: 'share',
+          type: 'copy-share',
+          label: 'Copiar Enlace de Retiro',
+          urlTemplate: '{public_base_url}/p/{ref}',
+          shareTextTemplate:
+            'Hola {customer_name}, puede retirar su pedido {ref} aquí: {public_base_url}/p/{ref}.',
+        },
+      ],
+    };
+
+    fixture.componentRef.setInput('schema', mockSchema);
+    fixture.componentRef.setInput('config', configConUrl);
+    fixture.componentRef.setInput('record', { ref: 'ORD-999', customer_name: 'Ana Pérez' });
+    fixture.detectChanges();
+
+    const share = fixture.debugElement.query(By.directive(CopyShare))
+      .componentInstance as CopyShare;
+
+    // Sin `configValues`, el dominio lo aporta `ConfigService` (fallback a
+    // `window.location.origin`, config.service.ts:30).
+    const esperado = `${window.location.origin}/p/ORD-999`;
+    expect(share.url(), 'el enlace quedó sin dominio').toBe(esperado);
+    expect(share.shareText(), 'el mensaje quedó con la URL rota').toContain(esperado);
+
+    // Y el input sigue mandando cuando alguien lo pasa: es un override,
+    // no la fuente principal.
+    fixture.componentRef.setInput('configValues', { public_base_url: 'https://retiro.com' });
+    fixture.detectChanges();
+    expect(share.url(), 'el override dejó de aplicar').toBe('https://retiro.com/p/ORD-999');
+  });
+});

package/src/lib/shared/components/post-create-modal/post-create-modal.ts

@@ -0,0 +1,159 @@
+import { Component, computed, inject, input, output } from '@angular/core';
+import { LucideCheckCircle2 } from '@lucide/angular';
+
+import type {
+  CopyShareAction,
+  PostCreateSchema,
+  ResourceAction,
+  ResourceSchema,
+} from '../../../core/models/schema.model';
+import { isShareAction, resolveShare, type ResolvedShare } from '../../../actions/action-registry';
+import { ConfigService } from '../../../core/services/config.service';
+import { interpolateTemplate } from '../../../core/utils/template-interpolator';
+import { Button } from '../button/button';
+import { CopyShare } from '../copy-share/copy-share';
+import { Modal } from '../modal/modal';
+
+interface SummaryItem {
+  key: string;
+  label: string;
+  value: string;
+}
+
+/**
+ * Modal de éxito y resumen tras crear un registro.
+ * Permite visualizar datos clave y acciones directas (como CopyShare o compartir por WhatsApp).
+ */
+@Component({
+  selector: 'app-post-create-modal',
+  imports: [Modal, Button, CopyShare, LucideCheckCircle2],
+  template: `
+    <app-modal [open]="true" [title]="title()" (close)="closed.emit()">
+      <div class="flex flex-col gap-4">
+        <!-- Encabezado con icono de éxito -->
+        <div class="flex items-center gap-3">
+          <div
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500"
+          >
+            <svg lucideCheckCircle2 size="22" />
+          </div>
+          <div>
+            <p class="text-sm text-neutral-light">{{ description() }}</p>
+          </div>
+        </div>
+
+        <!-- Tarjeta de campos de resumen -->
+        @if (summaryItems().length > 0) {
+          <div class="rounded-lg border border-neutral/15 bg-surface p-3.5">
+            <dl class="grid grid-cols-1 gap-x-4 gap-y-2.5 sm:grid-cols-2">
+              @for (item of summaryItems(); track item.key) {
+                <div class="flex flex-col">
+                  <dt class="text-xs font-medium text-neutral">{{ item.label }}</dt>
+                  <dd class="text-sm font-semibold text-neutral-light truncate">
+                    {{ item.value }}
+                  </dd>
+                </div>
+              }
+            </dl>
+          </div>
+        }
+
+        <!-- Acciones declaradas (ej. CopyShare) -->
+        @if (copyShareAction(); as action) {
+          <div class="rounded-lg border border-primary/20 bg-primary/5 p-3.5">
+            <p class="mb-2 text-xs font-medium text-primary">Enlace de Seguimiento</p>
+            @let share = shareOf(action);
+            <app-copy-share
+              [url]="share.url"
+              [shareText]="share.shareText"
+              [label]="action.label"
+            />
+          </div>
+        }
+
+        <!-- Botón de cierre primario -->
+        <div class="mt-2 flex justify-end">
+          <button app-button type="button" variant="primary" (click)="closed.emit()">
+            Continuar
+          </button>
+        </div>
+      </div>
+    </app-modal>
+  `,
+})
+export class PostCreateModal {
+  readonly schema = input.required<ResourceSchema>();
+  readonly config = input.required<PostCreateSchema>();
+  readonly record = input.required<Record<string, unknown>>();
+
+  /**
+   * Override puntual del contexto de interpolación (tests, o quien quiera
+   * forzar un valor). **No** es la vía normal: la config global la aporta
+   * `ConfigService`, igual que en `list-view`.
+   */
+  readonly configValues = input<Record<string, unknown>>({});
+
+  readonly closed = output<void>();
+
+  /**
+   * Inyectado y NO opcional a propósito. El bug que motivó esto (D18): con
+   * el input `configValues` como única fuente y nadie bindeándolo, la
+   * plantilla salía con `{public_base_url}` vacío y el operador copiaba
+   * `…aquí: /p/ORD-0001.` — un enlace inpegable.
+   *
+   * `buildInterpolationContext` mezcla config global + fila y fija
+   * `public_base_url` (`config.service.ts:64-73`); `configValues` se aplica
+   * encima, sólo como override.
+   */
+  private readonly configService = inject(ConfigService);
+
+  constructor() {
+    // El modal se abre con la sesión ya iniciada: si el load del bootstrap
+    // falló (arranque sin sesión), éste es el momento de reintentarlo para
+    // que el mensaje de compartir salga del singleton y no «sólo la URL».
+    // `globalConfig` es signal: cuando llegue, el contexto y `shareOf` se
+    // recalculan solos.
+    void this.configService.ensureLoaded();
+  }
+
+  /** Contexto único con el que se resuelven título, descripción, URL y mensaje. */
+  private readonly context = computed(() => ({
+    ...this.configService.buildInterpolationContext(this.record()),
+    ...this.configValues(),
+  }));
+
+  protected readonly title = computed(() => {
+    const raw = this.config().title || '¡Registro Creado con Éxito!';
+    return interpolateTemplate(raw, this.context());
+  });
+
+  protected readonly description = computed(() => {
+    const raw =
+      this.config().description ||
+      'El registro fue creado correctamente y ya se encuentra guardado en el sistema.';
+    return interpolateTemplate(raw, this.context());
+  });
+
+  protected readonly summaryItems = computed<SummaryItem[]>(() => {
+    const fields = this.config().summaryFields || [];
+    const rec = this.record();
+    const schemaFields = this.schema().fields || [];
+
+    return fields.map((key) => {
+      const fieldDef = schemaFields.find((f) => f.key === key);
+      const label = fieldDef?.label || key.replace(/_/g, ' ');
+      const rawVal = rec[key];
+      const value = rawVal === null || rawVal === undefined || rawVal === '' ? '—' : String(rawVal);
+      return { key, label, value };
+    });
+  });
+
+  protected readonly copyShareAction = computed<CopyShareAction | null>(
+    () => (this.config().actions || []).find(isShareAction) ?? null,
+  );
+
+  /** Enlace y mensaje, resueltos por `resolveShare` (R3.10: una sola copia). */
+  protected shareOf(action: CopyShareAction): ResolvedShare {
+    return resolveShare(action, this.context());
+  }
+}

package/src/lib/shared/components/skeleton/skeleton.ts

@@ -0,0 +1,31 @@
+import { Component, computed, input } from '@angular/core';
+
+/**
+ * Bloque de carga decorativo: oculto para lectores (`aria-hidden`); la
+ * región que lo contiene debe exponer `aria-busy="true"`.
+ */
+@Component({
+  selector: 'app-skeleton',
+  host: { class: 'block space-y-2', 'aria-hidden': 'true' },
+  template: `
+    @for (line of lineCount(); track line) {
+      <div
+        class="animate-pulse rounded bg-neutral/15"
+        [style.height.px]="height()"
+        [style.width]="width()"
+      ></div>
+    }
+  `,
+})
+export class Skeleton {
+  /** Cantidad de barras (mínimo 1). */
+  readonly lines = input(1);
+  readonly height = input(16);
+  readonly width = input('100%');
+
+  readonly lineCount = computed(() => {
+    const lines = Math.floor(this.lines());
+    const count = Number.isFinite(lines) && lines > 0 ? lines : 1;
+    return Array.from({ length: count }, (_, index) => index);
+  });
+}