add componets

apps/playground/src/app/pages/catalog/catalog.page.html

@@ -0,0 +1,134 @@
+<header class="page-header">
+  <h1>@pi/ui</h1>
+  <p>
+    Catálogo de la librería migrada a Angular 22: componentes standalone,
+    señales, OnPush y Signal Forms.
+  </p>
+  <span class="event">Último evento: {{ lastEvent() }}</span>
+</header>
+
+<main>
+  <div class="col">
+    <app-section
+      title="Formularios (Signal Forms)"
+      hint="Cada campo se enlaza con [formField]; la validación vive en el form()."
+    >
+      <div class="stack">
+        <pi-text-field [formField]="f.name">
+          <pi-label>Nombre</pi-label>
+        </pi-text-field>
+
+        <pi-email-field [formField]="f.email">
+          <pi-label>Email</pi-label>
+        </pi-email-field>
+
+        <pi-password-field [formField]="f.password">
+          <pi-label>Contraseña</pi-label>
+        </pi-password-field>
+
+        <pi-textarea [formField]="f.bio">
+          <pi-label>Biografía</pi-label>
+        </pi-textarea>
+
+        <pi-incremental-number-field [formField]="f.age">
+          <pi-label>Edad</pi-label>
+        </pi-incremental-number-field>
+
+        <pi-currency-field [formField]="f.price">
+          <pi-label>Precio</pi-label>
+        </pi-currency-field>
+
+        <pi-incremental-range-field
+          [formField]="f.range"
+          [minValue]="0"
+          [maxValue]="100"
+          unit=""
+          [step]="1"
+        />
+
+        <pi-search-field [formField]="f.search" placeholder="Buscar…" />
+
+        <label class="inline">
+          <span>Newsletter</span>
+          <pi-slide-toggle [formField]="f.newsletter" />
+        </label>
+
+        <pi-slider
+          [formField]="f.volume"
+          unit="%"
+          label="Volumen"
+          [maxValue]="100"
+        />
+      </div>
+    </app-section>
+  </div>
+
+  <div class="col">
+    <app-section title="Estado del formulario" hint="Modelo y validez en vivo.">
+      <div class="stack full">
+        <p class="state">
+          <strong>válido:</strong> {{ f().valid() }} ·
+          <strong>tocado:</strong> {{ f().touched() }} ·
+          <strong>modificado:</strong> {{ f().dirty() }}
+        </p>
+        <pre>{{ modelJson() }}</pre>
+      </div>
+    </app-section>
+
+    <app-section title="Botones">
+      <button pi-primary large (click)="log('botón grande')">Primario</button>
+      <button pi-ghost small (click)="log('botón ghost')">Ghost</button>
+      <button pi-outline (click)="log('botón outline')">Outline</button>
+      <button pi-primary w100 (click)="log('botón w100')">
+        Ancho completo
+      </button>
+      <pi-action-button text="Acción" (execute)="log('action-button')" />
+      <pi-icon-button icon="add" text="Añadir" (execute)="log('icon-button')" />
+      <pi-chevron-button (toggle)="log('chevron')" />
+      <pi-close-button (toggle)="log('close')" />
+      <pi-hamburger (toggle)="log('hamburger')" />
+    </app-section>
+
+    <app-section title="Iconos y texto">
+      <pi-icon icon="add" color="primary" size="large" />
+      <pi-icon icon="search" color="accent" size="large" />
+      <pi-icon icon="close" color="warn" size="large" />
+      <pi-icon
+        icon="check"
+        color="primary"
+        appearance="fill"
+        [isStroked]="true"
+      />
+      <pi-text-viewer value="Texto con el visor" fontSize="m" color="black" />
+      <pi-divider color="primary" width="large" label="Separador" />
+    </app-section>
+
+    <app-section title="Chips">
+      <pi-chip label="Etiqueta" color="primary" />
+      <pi-chip-status status="success" label="Correcto" />
+      <pi-chip-status status="error" label="Error" />
+      <pi-chip-status status="pending" label="Pendiente" />
+      <pi-chip-value [value]="42" unit="%" label="Progreso" />
+      <pi-chip-action
+        label="Acción"
+        [isActive]="true"
+        (execute)="log('chip-action')"
+      />
+    </app-section>
+
+    <app-section
+      title="Feedback y navegación"
+      hint="pi-spinner se omite a propósito: es un overlay position:fixed de página completa, no un indicador en línea."
+    >
+      <pi-progress-spinner label="Progreso" [value]="65" [diameter]="72" />
+      <pi-progress-bar label="Carga" [value]="65" />
+      <pi-paginator
+        [(currentPage)]="currentPage"
+        [pageSize]="10"
+        [totalPages]="5"
+        [isDisabled]="false"
+        (changePage)="log('página ' + $event)"
+      />
+    </app-section>
+  </div>
+</main>