theus-cli 0.2.82 → 0.2.84

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

@@ -1,86 +0,0 @@
-# Outputs (eventos personalizados)
-
-Los outputs permiten que un componente hijo emita eventos personalizados que un componente padre puede escuchar. Angular recomienda usar la nueva función `output()` para aplicaciones modernas.
-
-## Outputs basados en función
-
-Declara los outputs con la función `output()`. Devuelve un `OutputEmitterRef`.
-
-```ts
-import {Component, output} from '@angular/core';
-
-@Component({
-  selector: 'custom-slider',
-  template: `<button (click)="changeValue(50)">Fijar en 50</button>`,
-})
-export class CustomSlider {
-  // Output sin datos de evento
-  panelClosed = output<void>();
-
-  // Output con datos de evento (número)
-  valueChanged = output<number>();
-
-  changeValue(newValue: number) {
-    this.valueChanged.emit(newValue);
-  }
-}
-```
-
-### Uso en la plantilla
-
-Enlaza el evento del output con paréntesis `()`. Si el evento emite datos, accede a ellos con la variable especial `$event`.
-
-```html
-<custom-slider (panelClosed)="savePanelState()" (valueChanged)="logValue($event)" />
-```
-
-## Opciones de configuración
-
-La función `output` acepta un objeto de configuración para indicar un alias.
-
-```ts
-@Component({...})
-export class CustomSlider {
-  // El evento se llama 'valueChanged' en la plantilla,
-  // pero se accede como 'changed' en la clase del componente.
-  changed = output<number>({ alias: 'valueChanged' });
-}
-```
-
-## Suscripción programática
-
-Al crear componentes dinámicamente, puedes suscribirte a los outputs de forma programática:
-
-```ts
-const componentRef = viewContainerRef.createComponent(CustomSlider);
-
-const subscription = componentRef.instance.valueChanged.subscribe((val) => {
-  console.log('Valor cambiado:', val);
-});
-
-// Limpia manualmente si es necesario (Angular limpia automáticamente los componentes destruidos)
-subscription.unsubscribe();
-```
-
-## Outputs con decorador (@Output)
-
-La API heredada usa el decorador `@Output()` con un `EventEmitter`. Sigue soportada, pero no se recomienda para código nuevo.
-
-```ts
-import { Component, Output, EventEmitter } from '@angular/core';
-
-@Component({...})
-export class LegacyExample {
-  @Output() valueChanged = new EventEmitter<number>();
-
-  // Con alias
-  @Output('customEventName') changed = new EventEmitter<void>();
-}
-```
-
-## Buenas prácticas
-
-- **Prefiere `output()`**: usa el `output()` basado en función en lugar de `@Output()` y `EventEmitter`.
-- **Nomenclatura**: usa `camelCase` para los nombres de outputs. Evita el prefijo `on` (p. ej., usa `valueChanged` en lugar de `onValueChanged`).
-- **Sin burbujeo en el DOM**: los eventos personalizados de Angular no burbujean por el árbol DOM como los eventos nativos.
-- **Evita colisiones**: no elijas nombres que colisionen con eventos nativos del DOM (como `click` o `submit`).

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

@@ -1,122 +0,0 @@
-# Formularios reactivos
-
-Los formularios reactivos ofrecen un enfoque guiado por el modelo para gestionar entradas de formulario. Se construyen sobre flujos observables y proporcionan acceso síncrono al modelo de datos, lo que los hace más escalables y testeables que los formularios basados en plantilla.
-
-## Clases base
-
-Los formularios reactivos se construyen con estas clases fundamentales de `@angular/forms`:
-
-- `FormControl`: gestiona el valor y la validez de una entrada individual.
-- `FormGroup`: gestiona un grupo de controles (estructura tipo objeto).
-- `FormArray`: gestiona un array de controles indexado numéricamente.
-- `FormBuilder`: servicio que provee métodos de fábrica para crear instancias de controles.
-
-## Configuración
-
-Importa `ReactiveFormsModule` en tu componente.
-
-```ts
-import {Component, inject} from '@angular/core';
-import {ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder} from '@angular/forms';
-
-@Component({
-  selector: 'app-profile-editor',
-  imports: [ReactiveFormsModule],
-  templateUrl: './profile-editor.component.html',
-})
-export class ProfileEditor {
-  private fb = inject(FormBuilder);
-
-  // FormBuilder permite una definición concisa
-  profileForm = this.fb.group({
-    firstName: ['', Validators.required],
-    lastName: [''],
-    address: this.fb.group({
-      street: [''],
-      city: [''],
-    }),
-    aliases: this.fb.array([this.fb.control('')]),
-  });
-
-  onSubmit() {
-    console.warn(this.profileForm.value);
-  }
-}
-```
-
-## Enlace en la plantilla
-
-Usa directivas para enlazar el modelo con la vista:
-
-- `[formGroup]`: enlaza un `FormGroup` a un `<form>` o `<div>`.
-- `formControlName`: enlaza un control con nombre dentro de un grupo a una entrada.
-- `formGroupName`: enlaza un `FormGroup` anidado.
-- `formArrayName`: enlaza un `FormArray` anidado.
-- `[formControl]`: enlaza un `FormControl` independiente.
-
-```html
-<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
-  <input type="text" formControlName="firstName" />
-
-  <div formGroupName="address">
-    <input type="text" formControlName="street" />
-  </div>
-
-  <div formArrayName="aliases">
-    @for (alias of aliases.controls; track $index) {
-    <input type="text" [formControlName]="$index" />
-    }
-  </div>
-
-  <button type="submit" [disabled]="!profileForm.valid">Enviar</button>
-</form>
-```
-
-## Acceder a los controles
-
-Usa getters para acceder fácilmente a los controles, en especial con `FormArray`.
-
-```ts
-get aliases() {
-  return this.profileForm.get('aliases') as FormArray;
-}
-
-addAlias() {
-  this.aliases.push(this.fb.control(''));
-}
-```
-
-## Actualizar valores
-
-- `patchValue()`: actualiza solo las propiedades indicadas. Falla silenciosamente ante discrepancias estructurales.
-- `setValue()`: reemplaza el modelo completo. Exige estrictamente la estructura del formulario.
-
-```ts
-updateProfile() {
-  this.profileForm.patchValue({
-    firstName: 'Nancy',
-    address: { street: 'Calle Drew 123' }
-  });
-}
-```
-
-## Eventos de cambio unificados
-
-Angular moderno (v18+) provee un único observable `events` en todos los controles para rastrear eventos de valor, estado, pristine, touched, reset y submit.
-
-```ts
-import {ValueChangeEvent, StatusChangeEvent} from '@angular/forms';
-
-this.profileForm.events.subscribe((event) => {
-  if (event instanceof ValueChangeEvent) {
-    console.log('Nuevo valor:', event.value);
-  }
-});
-```
-
-## Gestión manual del estado
-
-- `markAsTouched()` / `markAllAsTouched()`: útiles para mostrar errores de validación al enviar.
-- `markAsDirty()` / `markAsPristine()`: rastrean si el valor fue modificado.
-- `updateValueAndValidity()`: dispara manualmente el recálculo del valor y el estado.
-- Las opciones `{ emitEvent: false }` u `{ onlySelf: true }` pueden pasarse a la mayoría de los métodos para controlar la propagación.

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

@@ -1,44 +0,0 @@
-# Estrategias de renderizado
-
-Angular soporta múltiples estrategias de renderizado para optimizar SEO, rendimiento e interactividad.
-
-## 1. Renderizado en el cliente (CSR)
-
-**Estrategia por defecto.** El contenido se renderiza completamente en el navegador.
-
-- **Caso de uso**: paneles interactivos, herramientas internas.
-- **Ventajas**: la más simple de configurar, bajo coste de servidor.
-- **Desventajas**: SEO pobre, visibilidad inicial del contenido más lenta (hay que esperar al JS).
-
-## 2. Generación de sitio estático (SSG / prerenderizado)
-
-El contenido se prerenderiza en archivos HTML estáticos en **tiempo de build**.
-
-- **Caso de uso**: páginas de marketing, blogs, documentación.
-- **Ventajas**: carga inicial más rápida, SEO excelente, compatible con CDN.
-- **Desventajas**: requiere rebuild para actualizar contenido; no sirve para datos específicos del usuario.
-
-## 3. Renderizado en el servidor (SSR)
-
-El contenido se renderiza en el servidor para la **petición inicial**. Las navegaciones posteriores ocurren en el cliente (estilo SPA).
-
-- **Caso de uso**: páginas de producto de e-commerce, sitios de noticias, contenido dinámico personalizado.
-- **Ventajas**: SEO excelente, visibilidad rápida del contenido inicial.
-- **Desventajas**: requiere un servidor (Node.js), mayor coste/latencia de servidor.
-
-## Hidratación
-
-La hidratación es el proceso de hacer interactivo en el navegador el HTML renderizado en servidor.
-
-- **Hidratación completa**: toda la app se vuelve interactiva de una vez.
-- **Hidratación incremental**: (avanzado) las partes se vuelven interactivas según se necesiten usando bloques `@defer`.
-- **Reproducción de eventos**: captura y reproduce los eventos del usuario ocurridos antes de que terminara la hidratación.
-
-## Matriz de decisión
-
-| Requisito                          | Estrategia            |
-| :--------------------------------- | :-------------------- |
-| **SEO + contenido estático**       | SSG                   |
-| **SEO + contenido dinámico**       | SSR                   |
-| **Sin SEO + alta interactividad**  | CSR                   |
-| **Mixto**                          | Híbrido (por ruta)    |

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

@@ -1,77 +0,0 @@
-# Reactividad asíncrona con `resource`
-
-> [!IMPORTANT]
-> La API `resource` es actualmente experimental en Angular.
-
-Un `Resource` incorpora la carga asíncrona de datos a la reactividad basada en signals de Angular. Ejecuta una función loader asíncrona cada vez que sus dependencias cambian, y expone el estado y el resultado como signals síncronas.
-
-## Uso básico
-
-La función `resource` acepta un objeto de opciones con dos propiedades principales:
-
-1. `params`: un cálculo reactivo (como `computed`). Cuando cambian las signals leídas aquí, el resource vuelve a cargar.
-2. `loader`: una función asíncrona que obtiene los datos según los parámetros.
-
-```ts
-import { Component, resource, signal, computed } from '@angular/core';
-
-@Component({...})
-export class UserProfile {
-  userId = signal('123');
-
-  userResource = resource({
-    // Rastrea userId de forma reactiva
-    params: () => ({ id: this.userId() }),
-
-    // Se ejecuta cada vez que params cambia
-    loader: async ({ params, abortSignal }) => {
-      const response = await fetch(`/api/users/${params.id}`, { signal: abortSignal });
-      if (!response.ok) throw new Error('Error de red');
-      return response.json();
-    }
-  });
-
-  // Usa el valor del resource en signals computadas
-  userName = computed(() => {
-    if (this.userResource.hasValue()) {
-      return this.userResource.value()?.name;
-    } else {
-      return 'Cargando...';
-    }
-  });
-}
-```
-
-## Abortar peticiones
-
-Si la signal `params` cambia mientras un loader anterior sigue ejecutándose, el `Resource` intentará abortar la petición pendiente usando el `abortSignal` proporcionado. **Pasa siempre `abortSignal` a tus llamadas `fetch`.**
-
-## Recargar datos
-
-Puedes forzar imperativamente que el resource vuelva a ejecutar el loader sin que cambien los params llamando a `.reload()`.
-
-```ts
-this.userResource.reload();
-```
-
-## Signals de estado del resource
-
-El objeto `Resource` provee varias signals para leer su estado actual:
-
-- `value()`: los datos resueltos, o `undefined`.
-- `hasValue()`: booleano que actúa como type-guard. `true` si existe un valor.
-- `isLoading()`: booleano que indica si el loader se está ejecutando.
-- `error()`: el error lanzado por el loader, o `undefined`.
-- `status()`: constante de texto que representa el estado exacto (`'idle'`, `'loading'`, `'resolved'`, `'error'`, `'reloading'`, `'local'`).
-
-## Mutación local
-
-Puedes actualizar el valor del resource directamente de forma optimista. Esto cambia el estado a `'local'`.
-
-```ts
-this.userResource.value.set({name: 'Actualización optimista'});
-```
-
-## Carga reactiva de datos con `httpResource`
-
-Si usas el `HttpClient` de Angular, prefiere `httpResource`. Es un envoltorio especializado que aprovecha la pila HTTP de Angular (incluidos los interceptores) mientras ofrece la misma API de resource basada en signals.

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

@@ -1,56 +0,0 @@
-# Animaciones de transición de ruta
-
-El Router de Angular soporta la **View Transitions API** del navegador para transiciones visuales suaves entre rutas.
-
-## Habilitar las view transitions
-
-Añade `withViewTransitions()` a la configuración de tu router.
-
-```ts
-provideRouter(routes, withViewTransitions());
-```
-
-Es una **mejora progresiva**. En navegadores que no soportan la API, el router seguirá funcionando pero sin la animación de transición.
-
-## Cómo funciona
-
-1. El navegador toma una captura del estado anterior.
-2. El router actualiza el DOM (activa el nuevo componente).
-3. El navegador toma una captura del nuevo estado.
-4. El navegador anima entre los dos estados.
-
-## Personalizar con CSS
-
-Las transiciones se personalizan en **archivos CSS globales** (no en CSS acotado al componente).
-
-Usa los pseudoelementos `::view-transition-old()` y `::view-transition-new()`.
-
-```css
-/* Ejemplo: fundido cruzado + deslizamiento */
-::view-transition-old(root) {
-  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
-}
-::view-transition-new(root) {
-  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
-}
-```
-
-## Control avanzado
-
-Usa `onViewTransitionCreated` para omitir transiciones o personalizar el comportamiento según el contexto de navegación.
-
-```ts
-withViewTransitions({
-  onViewTransitionCreated: ({transition, from, to}) => {
-    // Omitir la animación para rutas específicas
-    if (to.url === '/no-animation') {
-      transition.skipTransition();
-    }
-  },
-});
-```
-
-## Buenas prácticas
-
-- **Estilos globales**: define siempre las animaciones de transición en `styles.css` para evitar problemas de encapsulación de vistas.
-- **Nombres de view transition**: asigna un `view-transition-name` único a los elementos que deban transicionar suavemente entre rutas (p. ej., una imagen de cabecera).

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

@@ -1,52 +0,0 @@
-# Guards de ruta
-
-Los guards de ruta controlan si un usuario puede navegar hacia una ruta o abandonarla.
-
-## Tipos de guards
-
-- **`CanActivate`**: ¿puede el usuario acceder a esta ruta? (p. ej., comprobación de autenticación).
-- **`CanActivateChild`**: ¿puede el usuario acceder a las hijas de esta ruta?
-- **`CanDeactivate`**: ¿puede el usuario abandonar esta ruta? (p. ej., cambios sin guardar).
-- **`CanMatch`**: ¿debería siquiera considerarse esta ruta para la coincidencia? (p. ej., feature flags). Si devuelve `false`, el router sigue comprobando otras rutas.
-
-## Crear un guard
-
-Desde Angular 15, los guards suelen ser funcionales.
-
-```ts
-export const authGuard: CanActivateFn = (route, state) => {
-  const authService = inject(AuthService);
-  const router = inject(Router);
-
-  if (authService.isLoggedIn()) {
-    return true;
-  }
-
-  // Redirigir al login
-  return router.parseUrl('/login');
-};
-```
-
-## Aplicar guards
-
-Añádelos a la configuración de la ruta como un array. Se ejecutan en orden.
-
-```ts
-{
-  path: 'admin',
-  component: Admin,
-  canActivate: [authGuard],
-  canActivateChild: [adminChildGuard],
-  canDeactivate: [unsavedChangesGuard]
-}
-```
-
-## Valores de retorno
-
-- `boolean`: `true` para permitir, `false` para bloquear.
-- `UrlTree` o `RedirectCommand`: redirigir a otra ruta.
-- `Observable` o `Promise`: se resuelven a los tipos anteriores.
-
-## Nota de seguridad
-
-**Los guards del lado del cliente NO sustituyen la seguridad del lado del servidor.** Verifica siempre los permisos en el servidor.

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

@@ -1,45 +0,0 @@
-# Ciclo de vida y eventos del router
-
-El Router de Angular emite eventos a través del observable `Router.events`, lo que permite rastrear el ciclo de vida de la navegación de inicio a fin.
-
-## Eventos comunes del router (orden cronológico)
-
-1. **`NavigationStart`**: comienza la navegación.
-2. **`RoutesRecognized`**: el router hace coincidir la URL con una ruta.
-3. **`GuardsCheckStart` / `End`**: evaluación de `canActivate`, `canMatch`, etc.
-4. **`ResolveStart` / `End`**: fase de resolución de datos (carga de datos vía resolvers).
-5. **`NavigationEnd`**: la navegación se completó con éxito.
-6. **`NavigationCancel`**: navegación cancelada (p. ej., un guard devolvió `false`).
-7. **`NavigationError`**: la navegación falló (p. ej., error en un resolver).
-
-## Suscribirse a los eventos
-
-Inyecta el `Router` y filtra el observable `events`.
-
-```ts
-import {Router, NavigationStart, NavigationEnd} from '@angular/router';
-
-export class MyService {
-  private router = inject(Router);
-
-  constructor() {
-    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => {
-      console.log('Se navegó a:', event.url);
-    });
-  }
-}
-```
-
-## Depuración
-
-Habilita el registro detallado en consola de todos los eventos de enrutamiento durante el bootstrap de la aplicación.
-
-```ts
-provideRouter(routes, withDebugTracing());
-```
-
-## Casos de uso comunes
-
-- **Indicadores de carga**: muestra un spinner cuando se dispara `NavigationStart` y ocúltalo en `NavigationEnd`/`Cancel`/`Error`.
-- **Analíticas**: rastrea vistas de página escuchando `NavigationEnd`.
-- **Gestión del scroll**: responde a los eventos `Scroll` para comportamiento de scroll personalizado.

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

@@ -1,87 +0,0 @@
-# Testing con RouterTestingHarness
-
-Al probar componentes que involucran enrutamiento, es crucial **no mockear el Router ni los servicios relacionados**. En su lugar, usa el `RouterTestingHarness`, que ofrece una forma robusta y fiable de probar la lógica de enrutamiento en un entorno muy cercano al de una aplicación real.
-
-Usar el harness garantiza que estás probando la configuración real del router, sus guards y resolvers, lo que produce pruebas más significativas.
-
-## Preparación para probar el router
-
-El `RouterTestingHarness` es la herramienta principal para probar escenarios de enrutamiento. También necesitas proveer tus rutas de prueba con la función `provideRouter` en la configuración del `TestBed`.
-
-### Ejemplo de configuración
-
-```ts
-import {TestBed} from '@angular/core/testing';
-import {provideRouter} from '@angular/router';
-import {RouterTestingHarness} from '@angular/router/testing';
-import {Dashboard} from './dashboard.component';
-import {HeroDetail} from './hero-detail.component';
-
-describe('Enrutamiento del componente Dashboard', () => {
-  let harness: RouterTestingHarness;
-
-  beforeEach(async () => {
-    // 1. Configura el TestBed con rutas de prueba
-    await TestBed.configureTestingModule({
-      providers: [
-        // Usa provideRouter con tus rutas específicas de prueba
-        provideRouter([
-          {path: '', component: Dashboard},
-          {path: 'heroes/:id', component: HeroDetail},
-        ]),
-      ],
-    }).compileComponents();
-
-    // 2. Crea el RouterTestingHarness
-    harness = await RouterTestingHarness.create();
-  });
-});
-```
-
-### Conceptos clave
-
-1. **`provideRouter([...])`**: provee una configuración de enrutamiento específica de la prueba. Debe incluir las rutas necesarias para que el componente bajo prueba funcione correctamente.
-2. **`RouterTestingHarness.create()`**: crea e inicializa el harness de forma asíncrona y realiza una navegación inicial a la URL raíz (`/`).
-
-## Escribir pruebas del router
-
-Una vez creado el harness, puedes usarlo para dirigir la navegación y hacer verificaciones sobre el estado del router y de los componentes activados.
-
-### Ejemplo: probar la navegación
-
-```ts
-it('debería navegar al detalle de un héroe al seleccionarlo', async () => {
-  // 1. Navega al componente inicial y obtén su instancia
-  const dashboard = await harness.navigateByUrl('/', Dashboard);
-
-  // Supón que el dashboard tiene un método para seleccionar un héroe
-  const heroToSelect = {id: 42, name: 'Test Hero'};
-  dashboard.selectHero(heroToSelect);
-
-  // Espera la estabilidad tras la acción que dispara la navegación
-  await harness.fixture.whenStable();
-
-  // 2. Verifica la URL
-  expect(harness.router.url).toEqual('/heroes/42');
-
-  // 3. Obtén el componente activado tras la navegación
-  const heroDetail = await harness.getHarness(HeroDetail);
-
-  // 4. Verifica el estado del nuevo componente
-  expect(await heroDetail.componentInstance.hero.name).toBe('Test Hero');
-});
-
-it('debería obtener el componente activado directamente', async () => {
-  // Navega y obtén la instancia del componente en un solo paso
-  const dashboardInstance = await harness.navigateByUrl('/', Dashboard);
-
-  expect(dashboardInstance).toBeInstanceOf(Dashboard);
-});
-```
-
-### Buenas prácticas
-
-- **Navega con el harness:** usa siempre `harness.navigateByUrl()` para simular la navegación. Este método devuelve una promesa que se resuelve con la instancia del componente activado.
-- **Accede al estado del router:** usa `harness.router` para acceder a la instancia viva del router y verificar su estado (p. ej., `harness.router.url`).
-- **Obtén los componentes activados:** usa `harness.getHarness(ComponentType)` para obtener una instancia del harness del componente enrutado actualmente activo, o `harness.routeDebugElement` para obtener el `DebugElement`.
-- **Espera la estabilidad:** tras realizar una acción que provoque navegación, haz siempre `await harness.fixture.whenStable()` para asegurar que el enrutamiento se completó antes de verificar.

package/vendor/theus-arsenal/skills/patrones-angular/references/show-routes-with-outlets.md

@@ -1,68 +0,0 @@
-# Mostrar rutas con outlets
-
-La directiva `RouterOutlet` es un marcador de posición donde Angular renderiza el componente de la URL actual.
-
-## Uso básico
-
-Incluye `<router-outlet />` en tu plantilla. Angular inserta el componente enrutado como hermano inmediatamente después del outlet.
-
-```html
-<app-header /> <router-outlet />
-<!-- El contenido de la ruta aparece aquí -->
-<app-footer />
-```
-
-## Outlets anidados
-
-Las rutas hijas requieren su propio `<router-outlet />` dentro de la plantilla del componente padre.
-
-```ts
-// Plantilla del componente padre
-<h1>Configuración</h1>
-<router-outlet /> <!-- Los componentes hijos como Profile o Security se renderizan aquí -->
-```
-
-## Outlets con nombre (rutas secundarias)
-
-Las páginas pueden tener múltiples outlets. Asigna un `name` a un outlet para apuntarlo específicamente. El nombre por defecto es `'primary'`.
-
-```html
-<router-outlet />
-<!-- Primario -->
-<router-outlet name="sidebar" />
-<!-- Secundario -->
-```
-
-Define el `outlet` en la configuración de la ruta:
-
-```ts
-{
-  path: 'chat',
-  component: Chat,
-  outlet: 'sidebar'
-}
-```
-
-## Eventos del ciclo de vida del outlet
-
-`RouterOutlet` emite eventos cuando cambian los componentes:
-
-- `activate`: nuevo componente instanciado.
-- `deactivate`: componente destruido.
-- `attach` / `detach`: usados con `RouteReuseStrategy`.
-
-```html
-<router-outlet (activate)="onActivate($event)" />
-```
-
-## Pasar datos con `routerOutletData`
-
-Puedes pasar datos contextuales al componente enrutado mediante el input `routerOutletData`. El componente accede a ellos vía el token de inyección `ROUTER_OUTLET_DATA` como una signal.
-
-```ts
-// En el padre
-<router-outlet [routerOutletData]="{ theme: 'dark' }" />
-
-// En el componente enrutado
-outletData = inject(ROUTER_OUTLET_DATA) as Signal<{ theme: string }>;
-```