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

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

@@ -1,149 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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);
-  });
-}