theus-cli 0.2.83 → 0.2.85

package/vendor/theus-arsenal/skills/patrones-angular/references/angular-animations.md

@@ -1,160 +0,0 @@
-# Animaciones en Angular
-
-Al animar elementos en Angular, **primero analiza la versión de Angular del proyecto** en `package.json`.
-Para aplicaciones modernas (**Angular v20.2 y superior**), prefiere CSS nativo con `animate.enter` y `animate.leave`. Para aplicaciones antiguas, puede que necesites usar el paquete `@angular/animations`, ya deprecado.
-
-## 1. Animaciones CSS nativas (v20.2+, recomendado)
-
-Angular moderno provee `animate.enter` y `animate.leave` para animar elementos cuando entran o salen del DOM. Aplican clases CSS en el momento adecuado.
-
-### `animate.enter` y `animate.leave`
-
-Úsalos directamente en los elementos para aplicar clases CSS durante la fase de entrada o salida. Angular elimina automáticamente las clases de entrada cuando la animación termina. Con `animate.leave`, Angular espera a que la animación finalice antes de eliminar el elemento del DOM.
-
-Ejemplo de `animate.enter`:
-
-```html
-@if (isShown()) {
-<div class="enter-container" animate.enter="enter-animation">
-  <p>La caja está entrando.</p>
-</div>
-}
-```
-
-```css
-/* Asegúrate de tener un estilo inicial si usas transiciones en lugar de keyframes */
-.enter-container {
-  border: 1px solid #dddddd;
-  margin-top: 1em;
-  padding: 20px;
-  font-weight: bold;
-  font-size: 20px;
-}
-.enter-container p {
-  margin: 0;
-}
-.enter-animation {
-  animation: slide-fade 1s;
-}
-@keyframes slide-fade {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-```
-
-_Nota: `animate.leave` puede añadirse a elementos hijos que se estén eliminando._
-
-### Enlaces de eventos y librerías de terceros
-
-Puedes enlazar `(animate.enter)` y `(animate.leave)` para invocar funciones o usar librerías JS como GSAP.
-
-```html
-@if(show()) {
-<div (animate.leave)="onLeave($event)">...</div>
-}
-```
-
-```ts
-import { AnimationCallbackEvent } from '@angular/core';
-
-onLeave(event: AnimationCallbackEvent) {
-  // Lógica de animación personalizada aquí
-  // CRÍTICO: DEBES llamar a animationComplete() al terminar para que Angular elimine el elemento
-  event.animationComplete();
-}
-```
-
-## 2. Animaciones CSS avanzadas
-
-CSS ofrece herramientas robustas para secuencias de animación avanzadas.
-
-### Animar estados y estilos
-
-Alterna clases CSS en los elementos mediante enlace de propiedades para disparar transiciones.
-
-```html
-<div [class.open]="isOpen">...</div>
-```
-
-```css
-div {
-  transition: height 0.3s ease-out;
-  height: 100px;
-}
-div.open {
-  height: 200px;
-}
-```
-
-### Animar altura automática
-
-Puedes usar `css-grid` para animar hacia altura automática.
-
-```css
-.container {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.3s;
-}
-.container.open {
-  grid-template-rows: 1fr;
-}
-.container > div {
-  overflow: hidden;
-}
-```
-
-### Animaciones escalonadas y en paralelo
-
-- **Escalonadas**: usa `animation-delay` o `transition-delay` con valores distintos para los elementos de una lista.
-- **En paralelo**: aplica múltiples animaciones con la abreviatura `animation` (p. ej., `animation: rotate 3s, fade-in 2s;`).
-
-### Control programático
-
-Recupera las animaciones directamente con las Web APIs estándar:
-
-```ts
-const animations = element.getAnimations();
-animations.forEach((anim) => anim.pause());
-```
-
-## 3. DSL de animaciones heredado (deprecado)
-
-Para proyectos antiguos (anteriores a v20.2 o donde `@angular/animations` ya se usa intensivamente), se usa el DSL de metadatos del componente.
-
-**Importante:** no mezcles animaciones heredadas y `animate.enter`/`leave` en el mismo componente.
-
-### Configuración
-
-```ts
-bootstrapApplication(App, {
-  providers: [provideAnimationsAsync()],
-});
-```
-
-### Definir transiciones
-
-```ts
-import {signal} from '@angular/core';
-import {trigger, state, style, animate, transition} from '@angular/animations';
-
-@Component({
-  animations: [
-    trigger('openClose', [
-      state('open', style({opacity: 1})),
-      state('closed', style({opacity: 0})),
-      transition('open <=> closed', [animate('0.5s')]),
-    ]),
-  ],
-  template: `<div [@openClose]="isOpen() ? 'open' : 'closed'">...</div>`,
-})
-export class OpenClose {
-  isOpen = signal(true);
-}
-```

package/vendor/theus-arsenal/skills/patrones-angular/references/angular-aria.md

@@ -1,410 +0,0 @@
-# Angular Aria
-
-Angular Aria (`@angular/aria`) es una colección de directivas headless accesibles que implementan patrones WAI-ARIA comunes. Estas directivas gestionan las interacciones de teclado, los atributos ARIA, la gestión del foco y el soporte de lectores de pantalla.
-
-**Como agente, tu rol es proveer la estructura HTML y los estilos CSS**, mientras las directivas gestionan la lógica de accesibilidad compleja.
-
-## Dar estilo a componentes headless
-
-Como los componentes de Angular Aria son headless, no incluyen estilos por defecto. **Debes** usar CSS para estilar los distintos estados según los atributos ARIA o las clases estructurales que las directivas aplican automáticamente.
-
-Atributos ARIA comunes a los que apuntar en CSS:
-
-- `[aria-expanded="true"]` / `[aria-expanded="false"]`
-- `[aria-selected="true"]`
-- `[aria-disabled="true"]`
-- `[aria-current="page"]` (para navegación)
-
----
-
-**CRÍTICO**: antes de usar este paquete, debe instalarse con el gestor de paquetes. Confirma que está instalado en el proyecto. Usa `npm install @angular/aria` si es necesario.
-
-## 1. Accordion
-
-Organiza contenido relacionado en secciones expandibles/colapsables.
-
-**Uso:** el Accordion es un componente de layout diseñado para organizar contenido en grupos lógicos que los usuarios pueden expandir de a uno para reducir el scroll en páginas densas. Úsalo para FAQs, formularios largos o divulgación progresiva de información, pero evítalo para navegación principal o escenarios donde los usuarios deban ver múltiples secciones a la vez.
-
-**Imports:** `import { AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger } from '@angular/aria/accordion';`
-
-**Directivas:** `ngAccordionGroup`, `ngAccordionTrigger`, `ngAccordionPanel`, `ngAccordionContent` (para carga diferida).
-
-```ts
-@Component({
-  selector: 'app-cmp',
-  imports: [AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger],
-  template: `...`,
-  styles: [],
-})
-export class App {
-  protected readonly title = signal('angular-app');
-}
-```
-
-```html
-<div ngAccordionGroup [multiExpandable]="false">
-  <div class="accordion-item">
-    <button ngAccordionTrigger panelId="panel-1" class="accordion-header">
-      Sección 1
-      <span class="icon">▼</span>
-    </button>
-    <div ngAccordionPanel panelId="panel-1" class="accordion-panel">
-      <ng-template ngAccordionContent>
-        <p>Contenido cargado de forma diferida.</p>
-      </ng-template>
-    </div>
-  </div>
-</div>
-```
-
-**Estrategia de estilos:**
-Apunta al atributo `[aria-expanded]` del trigger para rotar iconos, y estila la visibilidad del panel.
-
-```css
-.accordion-header[aria-expanded='true'] .icon {
-  transform: rotate(180deg);
-}
-
-/* La directiva del panel gestiona la eliminación del DOM, pero puedes estilar la transición */
-.accordion-panel {
-  padding: 1rem;
-  border-top: 1px solid #ccc;
-}
-```
-
----
-
-## 2. Listbox
-
-Directiva fundacional para mostrar una lista de opciones. Se usa para listas de selección visibles (no desplegables).
-
-**Uso:** listas seleccionables visibles (selección única o múltiple).
-
-**Imports:** `import {Listbox, Option} from '@angular/aria/listbox';`
-
-**Directivas:** `ngListbox`, `ngOption`.
-
-```ts
-@Component({
-  selector: 'app-cmp',
-  imports: [Listbox, Option],
-  template: `...`,
-  styles: [],
-})
-export class App {
-  protected readonly title = signal('angular-app');
-}
-```
-
-```html
-<!-- orientación horizontal o vertical -->
-<ul ngListbox [(values)]="selectedItems" orientation="horizontal" [multi]="true">
-  <li ngOption value="apple" class="option">Manzana</li>
-  <li ngOption value="banana" class="option">Plátano</li>
-</ul>
-```
-
-**Estrategia de estilos:**
-Apunta a `[aria-selected="true"]` para el estado seleccionado y a `:focus-visible` o `[data-active]` para el elemento con foco (Angular Aria usa roving tabindex o activedescendant).
-
-```css
-.option {
-  padding: 8px;
-  cursor: pointer;
-}
-.option[aria-selected='true'] {
-  background: #e0f7fa;
-  font-weight: bold;
-}
-/* Estado de foco gestionado por aria */
-.option:focus-visible {
-  outline: 2px solid blue;
-}
-```
-
----
-
-## 3. Combobox, Select y Multiselect
-
-Estos patrones combinan `ngCombobox` con un popup que contiene un `ngListbox`.
-
-- **Combobox**: entrada de texto + popup (usado para autocompletado).
-- **Select**: Combobox de solo lectura + Listbox de selección única.
-- **Multiselect**: Combobox de solo lectura + Listbox de selección múltiple.
-
-**Uso:** el Combobox es una directiva primitiva de bajo nivel que sincroniza una entrada de texto con un popup, y sirve como lógica fundacional para los patrones de autocompletado, select y multiselect. Úsalo específicamente para construir filtrado personalizado, requisitos de selección únicos o coordinación entrada-popup especializada que se desvíe de los componentes estándar documentados.
-
-**Imports:**
-
-```
-  import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
-  import {Listbox, Option} from '@angular/aria/listbox';
-```
-
-**Directivas:** `ngCombobox`, `ngComboboxInput`, `ngComboboxPopupContainer`, `ngListbox`, `ngOption`.
-
-```html
-<!-- Ejemplo: Select estándar -->
-<div ngCombobox [readonly]="true">
-  <button ngComboboxInput class="select-trigger">
-    {{ selectedValue() || 'Elige una opción' }}
-  </button>
-
-  <ng-template ngComboboxPopupContainer>
-    <ul ngListbox [(values)]="selectedValue" class="dropdown-menu">
-      <li ngOption value="option1">Opción 1</li>
-      <li ngOption value="option2">Opción 2</li>
-    </ul>
-  </ng-template>
-</div>
-```
-
-**Estrategia de estilos:**
-Estila el contenedor del popup para que parezca un desplegable flotando sobre el contenido (a menudo junto con CDK Overlay).
-
-```css
-.select-trigger {
-  width: 200px;
-  padding: 8px;
-  text-align: left;
-}
-.dropdown-menu {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  border: 1px solid #ccc;
-  background: white;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-```
-
----
-
-## 4. Menu y Menubar
-
-Para acciones, comandos y menús contextuales (no para selección en formularios).
-
-**Uso:** el Menubar es un patrón de navegación de alto nivel diseñado para construir barras de comandos de aplicaciones estilo escritorio (p. ej., Archivo, Editar, Ver) que permanecen persistentes en la interfaz. Es idóneo para organizar comandos complejos en categorías lógicas de primer nivel con soporte completo de teclado horizontal, pero debe evitarse para listas de acciones simples e independientes o layouts mobile-first donde el espacio horizontal es limitado.
-
-**Imports:** `import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';`
-
-**Directivas:** `ngMenuBar`, `ngMenu`, `ngMenuItem`, `ngMenuTrigger`.
-
-```html
-<!-- Ejemplo de Menubar -->
-<ul ngMenuBar class="menubar">
-  <li ngMenuItem value="file">
-    <button ngMenuTrigger [menu]="fileMenu">Archivo</button>
-  </li>
-</ul>
-
-<ul ngMenu #fileMenu="ngMenu" class="menu">
-  <li ngMenuItem value="new">Nuevo</li>
-  <li ngMenuItem value="open">Abrir</li>
-</ul>
-```
-
-**Estrategia de estilos:**
-Usa flexbox para el menubar. Oculta/muestra los submenús según el estado del trigger.
-
-```css
-.menubar {
-  display: flex;
-  gap: 10px;
-  list-style: none;
-  padding: 0;
-}
-.menu {
-  background: white;
-  border: 1px solid #ccc;
-  padding: 5px 0;
-}
-.menu li {
-  padding: 5px 15px;
-  cursor: pointer;
-}
-```
-
----
-
-## 5. Tabs
-
-Secciones de contenido en capas donde solo un panel es visible.
-
-**Uso:** el componente Tabs se usa para organizar contenido relacionado en secciones diferenciadas y navegables, permitiendo cambiar entre categorías o vistas sin abandonar la página. Es ideal para paneles de configuración, documentación multitema o dashboards, pero debe evitarse para flujos secuenciales (steppers) o cuando la navegación involucra más de 7–8 secciones.
-
-**Imports:** `import {Tab, Tabs, TabList, TabPanel, TabContent} from '@angular/aria/tabs';`
-
-**Directivas:** `ngTabs`, `ngTabList`, `ngTab`, `ngTabPanel`, `ngTabContent`.
-
-```html
-<div ngTabs>
-  <ul ngTabList class="tab-list">
-    <li ngTab value="profile" class="tab-btn">Perfil</li>
-    <li ngTab value="security" class="tab-btn">Seguridad</li>
-  </ul>
-
-  <div ngTabPanel value="profile" class="tab-panel">
-    <ng-template ngTabContent>Configuración del perfil</ng-template>
-  </div>
-  <div ngTabPanel value="security" class="tab-panel">
-    <ng-template ngTabContent>Configuración de seguridad</ng-template>
-  </div>
-</div>
-```
-
-**Estrategia de estilos:**
-Apunta a `[aria-selected="true"]` en los botones de pestaña.
-
-```css
-.tab-list {
-  display: flex;
-  border-bottom: 2px solid #ccc;
-  list-style: none;
-  padding: 0;
-}
-.tab-btn {
-  padding: 10px 20px;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-}
-.tab-btn[aria-selected='true'] {
-  border-bottom-color: blue;
-  font-weight: bold;
-}
-.tab-panel {
-  padding: 20px;
-}
-```
-
----
-
-## 6. Toolbar
-
-Agrupa controles relacionados (como formato de texto).
-
-**Uso:** el Toolbar es un componente organizativo diseñado para agrupar controles relacionados de acceso frecuente en un único contenedor lógico. Es idóneo para mejorar la eficiencia con teclado (navegación con flechas) y la estructura visual en flujos con acciones repetidas, como formato de texto o controles multimedia.
-
-**Imports:** `import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from '@angular/aria/toolbar';`
-
-**Directivas:** `ngToolbar`, `ngToolbarWidget`, `ngToolbarWidgetGroup`.
-
-```html
-<div ngToolbar class="toolbar">
-  <div ngToolbarWidgetGroup [multi]="true" role="group" aria-label="Formato">
-    <button ngToolbarWidget value="bold" class="tool-btn">B</button>
-    <button ngToolbarWidget value="italic" class="tool-btn">I</button>
-  </div>
-</div>
-```
-
-**Estrategia de estilos:**
-Apunta a `[aria-pressed="true"]` (botones toggle) o `[aria-checked="true"]` (grupos radio) dentro de la toolbar.
-
-```css
-.toolbar {
-  display: flex;
-  gap: 5px;
-  padding: 8px;
-  background: #f5f5f5;
-}
-.tool-btn {
-  padding: 5px 10px;
-  border: 1px solid #ccc;
-}
-.tool-btn[aria-pressed='true'],
-.tool-btn[aria-checked='true'] {
-  background: #ddd;
-}
-```
-
----
-
-## 7. Tree
-
-Muestra datos jerárquicos (sistemas de archivos, navegación anidada).
-
-**Uso:** el componente Tree está diseñado para navegar y mostrar estructuras de datos jerárquicas profundamente anidadas, como sistemas de archivos, organigramas o arquitecturas de sitio complejas. Debe usarse específicamente para relaciones multinivel donde los usuarios necesitan expandir o colapsar ramas, pero debe evitarse para listas planas, tablas de datos o menús de selección simples.
-
-**Imports:** `import {Tree, TreeItem, TreeItemGroup} from '@angular/aria/tree';`
-
-**Directivas:** `ngTree`, `ngTreeItem`, `ngTreeGroup`.
-
-```html
-<ul ngTree class="tree">
-  <li ngTreeItem value="documents">
-    <span class="tree-label">Documentos</span>
-    <ul ngTreeGroup class="tree-group">
-      <li ngTreeItem value="resume">CV.pdf</li>
-    </ul>
-  </li>
-</ul>
-```
-
-**Estrategia de estilos:**
-Apunta a `[aria-expanded]` para mostrar/ocultar hijos o rotar iconos chevron. Usa `padding-left` en los grupos anidados para mostrar la jerarquía.
-
-```css
-.tree,
-.tree-group {
-  list-style: none;
-  padding-left: 20px;
-}
-.tree-label::before {
-  content: '> ';
-  display: inline-block;
-  transition: transform 0.2s;
-}
-li[aria-expanded='true'] > .tree-label::before {
-  transform: rotate(90deg);
-}
-```
-
-## 8. Grid
-
-Colección interactiva bidimensional de celdas que permite navegación con las flechas del teclado.
-
-**Uso:** tablas de datos, calendarios, hojas de cálculo y patrones de layout para elementos interactivos.
-**Directivas:** `ngGrid`, `ngGridRow`, `ngGridCell`, `ngGridCellWidget`.
-
-```html
-<table ngGrid [multi]="true" [enableSelection]="true" class="grid-table">
-  <tr ngGridRow>
-    <th ngGridCell role="columnheader">Nombre</th>
-    <th ngGridCell role="columnheader">Estado</th>
-  </tr>
-  <tr ngGridRow>
-    <td ngGridCell>Proyecto A</td>
-    <td ngGridCell [(selected)]="isSelected">
-      <button ngGridCellWidget (activated)="onActivate()">Activo</button>
-    </td>
-  </tr>
-</table>
-```
-
-**Estrategia de estilos:**
-Apunta a `[aria-selected="true"]` para las celdas seleccionadas y a `:focus-visible` para la celda activa (roving tabindex) o `[aria-activedescendant]` en el contenedor.
-
-```css
-.grid-table {
-  border-collapse: collapse;
-}
-[ngGridCell] {
-  padding: 8px;
-  border: 1px solid #ddd;
-}
-[ngGridCell][aria-selected='true'] {
-  background: #e3f2fd;
-}
-/* Estado de foco gestionado por roving tabindex */
-[ngGridCell]:focus-visible {
-  outline: 2px solid #2196f3;
-  outline-offset: -2px;
-}
-```
-
-## Reglas generales para el agente
-
-1. **Nunca uses elementos HTML nativos como `<select>`** cuando te pidan implementar estos patrones Aria específicos. Usa las directivas `ng*`.
-2. **Gestiona el CSS manualmente**: recuerda que `Angular Aria` NO provee estilos. Debes escribir el CSS, apuntando a los atributos ARIA nativos (`aria-expanded`, `aria-selected`, etc.) que las directivas alternan automáticamente.
-3. **Carga diferida**: usa siempre las directivas estructurales provistas (`ngAccordionContent`, `ngTabContent`) dentro de `ng-template` para paneles de contenido pesados y asegurar su renderizado diferido.

package/vendor/theus-arsenal/skills/patrones-angular/references/cli.md

@@ -1,86 +0,0 @@
-# Guía de la CLI de Angular para el agente
-
-La CLI de Angular (`ng`) es la herramienta principal para gestionar un workspace de Angular. Prefiere siempre los comandos de la CLI sobre la creación manual de archivos o los comandos `npm` genéricos al modificar la estructura del proyecto o añadir dependencias específicas de Angular.
-
-## 1. Gestionar dependencias
-
-**Usa SIEMPRE `ng add` para librerías de Angular** en lugar de `npm install`. `ng add` instala el paquete Y ejecuta los schematics de inicialización (p. ej., configurar `angular.json`, actualizar los providers raíz).
-
-```bash
-ng add @angular/material
-ng add tailwindcss
-ng add @angular/fire
-```
-
-Para actualizar la aplicación y sus dependencias (lo que ejecuta automáticamente las migraciones de código):
-
-```bash
-ng update @angular/core@<latest o versión específica> @angular/cli<latest o versión específica>
-```
-
-## 2. Generar código (`ng generate` o `ng g`)
-
-Usa siempre la CLI para generar código y asegurar que cumple los estándares de Angular y actualiza automáticamente los archivos de configuración necesarios.
-
-| Objetivo     | Comando               | Notas                                                                                                |
-| :----------- | :-------------------- | :---------------------------------------------------------------------------------------------------- |
-| Componente   | `ng g c ruta/nombre`  | Genera un componente. Usa `--inline-style` (`-s`) o `--inline-template` (`-t`) si se solicita.        |
-| Servicio     | `ng g s ruta/nombre`  | Genera un servicio `@Injectable({providedIn: 'root'})`.                                               |
-| Directiva    | `ng g d ruta/nombre`  | Genera una directiva.                                                                                 |
-| Pipe         | `ng g p ruta/nombre`  | Genera un pipe.                                                                                       |
-| Guard        | `ng g g ruta/nombre`  | Genera un guard de ruta funcional.                                                                    |
-| Environments | `ng g environments`   | Crea `src/environments/` y actualiza `angular.json` con los reemplazos de archivos.                   |
-
-_Nota: no hay comando para generar una definición de ruta individual. Genera un componente y añádelo manualmente al array `Routes` en `app.routes.ts`._
-
-## 3. Servidor de desarrollo y proxy
-
-Inicia el servidor de desarrollo local con hot-module replacement (HMR):
-
-```bash
-ng serve
-```
-
-### Proxy hacia la API de backend
-
-Para hacer proxy de las peticiones a la API durante el desarrollo (p. ej., redirigir `/api` a un servidor Node local):
-
-1. Crea `src/proxy.conf.json`:
-   ```json
-   {
-     "/api/**": {"target": "http://localhost:3000", "secure": false}
-   }
-   ```
-2. Actualiza `angular.json` en el target `serve`:
-   ```json
-   "serve": {
-     "builder": "@angular/build:dev-server",
-     "options": { "proxyConfig": "src/proxy.conf.json" }
-   }
-   ```
-
-## 4. Compilar la aplicación
-
-Compila la aplicación en un directorio de salida (por defecto: `dist/<nombre-proyecto>/browser`). Angular moderno usa el builder `@angular/build:application` (basado en esbuild).
-
-```bash
-ng build
-```
-
-- `ng build` usa por defecto la configuración de producción, que habilita la compilación Ahead-of-Time (AOT), la minificación y el tree-shaking.
-- Apunta a configuraciones específicas definidas en `angular.json` con `--configuration`: `ng build --configuration=staging`.
-
-## 5. Testing
-
-- **Pruebas unitarias**: ejecuta `ng test` para correr las pruebas unitarias con el runner configurado (p. ej., Karma o Vitest).
-- **End-to-end (E2E)**: ejecuta `ng e2e`. Si no hay framework E2E configurado, la CLI ofrecerá instalar uno (Cypress, Playwright, Puppeteer, etc.).
-
-## 6. Despliegue
-
-Para desplegar una aplicación, primero debes añadir un builder de despliegue y luego ejecutar el comando de deploy:
-
-```bash
-# Ejemplo para Firebase
-ng add @angular/fire
-ng deploy
-```