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

package/src/lib/views/composer/composer-host.spec.ts

@@ -0,0 +1,301 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { afterEach, describe, expect, it } from 'vitest';
+import { of } from 'rxjs';
+
+import type { ResourceSchema, UiViewDescriptor, UiViewTabs } from '../../core/models/schema.model';
+import { register, unregister } from '../../core/registry/render-registry';
+import { ComposerHost } from './composer-host';
+
+/** Hoja ligera para los tests (se registra y se desregistra por test). */
+@Component({
+  standalone: true,
+  selector: 'app-hoja-h',
+  template: `<p data-hoja>{{ etiqueta }}</p>`,
+})
+class HojaH {
+  readonly etiqueta: string;
+  constructor(route: ActivatedRoute) {
+    let v: Record<string, unknown> = {};
+    route.data.subscribe((d) => (v = d as Record<string, unknown>));
+    this.etiqueta = String(v['uiView'] ?? '');
+  }
+}
+
+function tabs(children: UiViewTabs['config']['children'], initial?: string): UiViewTabs {
+  return { type: 'tabs', config: { children, ...(initial ? { initial } : {}) } };
+}
+
+function base(): ResourceSchema {
+  return {
+    id: 'demo',
+    label: 'Demo',
+    labelPlural: 'Demos',
+    kind: 'collection',
+    endpoint: {},
+    keyField: 'id',
+    titleField: 'name',
+    listColumns: [],
+    fields: [],
+    uiViews: {},
+  };
+}
+
+function esquemaCon(vista: UiViewDescriptor): ResourceSchema {
+  return { ...base(), uiViews: { panel: vista } };
+}
+
+type Fixture = ReturnType<TestBed['createComponent']>;
+
+/**
+ * Dos ciclos estables: el primero resuelve el `load()` del slot activo, el
+ * segundo monta su componente; el tercero cubre un nivel de anidación.
+ */
+async function flush(fixture: Fixture, cond?: () => boolean): Promise<Fixture> {
+  const ciclosMax = cond === undefined ? 4 : 30;
+  for (let ciclo = 0; ciclo < ciclosMax; ciclo += 1) {
+    if (cond?.()) break;
+    // Ceder la macrotarea: el `import()` dinámico de un descriptor no es
+    // microtask puro y `whenStable` en TestBed no lo espera. Con `cond`
+    // además se espera hasta que el DOM realmente avance (la suite completa
+    // satura el worker y el import tarda más ciclos).
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await fixture.whenStable();
+    fixture.detectChanges();
+  }
+  return fixture;
+}
+
+async function montar(schema: ResourceSchema, uiView = 'panel'): Promise<Fixture> {
+  const datos = { schema, resourceId: schema.id, uiView, viewType: 'tabs' };
+  TestBed.configureTestingModule({
+    providers: [{ provide: ActivatedRoute, useValue: { data: of(datos) } }],
+  });
+  const fixture = TestBed.createComponent(ComposerHost);
+  fixture.detectChanges();
+  await flush(fixture);
+  return fixture;
+}
+
+describe('ComposerHost', () => {
+  afterEach(() => unregister('view', 'hoja-h'));
+
+  it('renderiza los hijos en orden declarado con tablist accesible', async () => {
+    register('view', { kind: 'view', type: 'hoja-h', since: '9.9', load: async () => HojaH });
+    const fixture = await montar(
+      esquemaCon(
+        tabs([
+          { id: 'a', label: 'Uno', type: 'hoja-h' },
+          { id: 'b', label: 'Dos', type: 'hoja-h' },
+          { id: 'c', label: 'Tres', type: 'hoja-h' },
+        ]),
+      ),
+    );
+    const tabsDom = [...fixture.nativeElement.querySelectorAll('[role="tab"]')];
+    expect(tabsDom.map((t) => t.textContent?.trim())).toEqual(['Uno', 'Dos', 'Tres']);
+    expect(fixture.nativeElement.querySelector('[role="tablist"]')).toBeTruthy();
+    // el primer hijo está activo por defecto: sólo su panel está montado
+    expect(fixture.nativeElement.querySelectorAll('[role="tabpanel"]').length).toBe(1);
+    expect(tabsDom[0].getAttribute('aria-selected')).toBe('true');
+    expect(tabsDom[0].getAttribute('tabindex')).toBe('0');
+    expect(tabsDom[1].getAttribute('tabindex')).toBe('-1');
+  });
+
+  it('respeta `initial` para la pestaña activa al montar', async () => {
+    register('view', { kind: 'view', type: 'hoja-h', since: '9.9', load: async () => HojaH });
+    const fixture = await montar(
+      esquemaCon(
+        tabs(
+          [
+            { id: 'a', label: 'Uno', type: 'hoja-h' },
+            { id: 'b', label: 'Dos', type: 'hoja-h' },
+          ],
+          'b',
+        ),
+      ),
+    );
+    const selected = [...fixture.nativeElement.querySelectorAll('[role="tab"]')].filter(
+      (t) => t.getAttribute('aria-selected') === 'true',
+    );
+    expect(selected.map((t) => t.textContent?.trim())).toEqual(['Dos']);
+    expect(fixture.nativeElement.querySelector('[role="tabpanel"]')?.textContent).toContain(
+      'panel/b',
+    );
+  });
+
+  it('clic en pestaña activa el panel y destruye el no retenido', async () => {
+    register('view', { kind: 'view', type: 'hoja-h', since: '9.9', load: async () => HojaH });
+    const fixture = await montar(
+      esquemaCon(
+        tabs([
+          { id: 'a', label: 'Uno', type: 'hoja-h' },
+          { id: 'b', label: 'Dos', type: 'hoja-h' },
+        ]),
+      ),
+    );
+    const panels = () => fixture.nativeElement.querySelectorAll('[role="tabpanel"]');
+    expect(panels().length).toBe(1);
+    expect(panels()[0].textContent).toContain('panel/a');
+    [...fixture.nativeElement.querySelectorAll('[role="tab"]')][1].click();
+    await flush(fixture);
+    expect(panels().length).toBe(1);
+    expect(panels()[0].textContent).toContain('panel/b');
+    // no retenido: el panel de 'a' ya no existe en el DOM
+    expect(panels()[0].textContent).not.toContain('panel/a');
+  });
+
+  it('retain:true conserva el panel montado pero oculto tras cambiar de pestaña', async () => {
+    register('view', { kind: 'view', type: 'hoja-h', since: '9.9', load: async () => HojaH });
+    const fixture = await montar(
+      esquemaCon(
+        tabs([
+          { id: 'a', label: 'Uno', type: 'hoja-h', retain: true },
+          { id: 'b', label: 'Dos', type: 'hoja-h' },
+        ]),
+      ),
+    );
+    [...fixture.nativeElement.querySelectorAll('[role="tab"]')][1].click();
+    await flush(fixture);
+    const panels = [...fixture.nativeElement.querySelectorAll('[role="tabpanel"]')];
+    expect(panels.length).toBe(2);
+    const oculto = panels.find((p) => p.textContent?.includes('panel/a'));
+    expect(oculto).toBeTruthy();
+    expect(oculto!.classList.contains('hidden')).toBe(true);
+    const visible = panels.find((p) => p.textContent?.includes('panel/b'));
+    expect(visible!.classList.contains('hidden')).toBe(false);
+  });
+
+  it('flechas/Home/End mueven la selección y el tabindex (roving)', async () => {
+    register('view', { kind: 'view', type: 'hoja-h', since: '9.9', load: async () => HojaH });
+    const fixture = await montar(
+      esquemaCon(
+        tabs([
+          { id: 'a', label: 'Uno', type: 'hoja-h' },
+          { id: 'b', label: 'Dos', type: 'hoja-h' },
+          { id: 'c', label: 'Tres', type: 'hoja-h' },
+        ]),
+      ),
+    );
+    const tablist = fixture.nativeElement.querySelector('[role="tablist"]');
+    const tabsDom = [...tablist.querySelectorAll('[role="tab"]')];
+    const tecla = (key: string) => {
+      tablist.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
+      fixture.detectChanges();
+    };
+    tecla('ArrowRight');
+    expect(tabsDom[1].getAttribute('aria-selected')).toBe('true');
+    expect(tabsDom[1].getAttribute('tabindex')).toBe('0');
+    expect(tabsDom[0].getAttribute('tabindex')).toBe('-1');
+    tecla('End');
+    expect(tabsDom[2].getAttribute('aria-selected')).toBe('true');
+    tecla('Home');
+    expect(tabsDom[0].getAttribute('aria-selected')).toBe('true');
+    tecla('ArrowLeft'); // desde el primero ⇒ envuelve al último
+    expect(tabsDom[2].getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('config inválida (no-tabs) ⇒ estado de error, sin montar hijos', async () => {
+    const fixture = await montar(esquemaCon({ type: 'list' }));
+    expect(fixture.nativeElement.textContent).toContain('inválida');
+    expect(fixture.nativeElement.querySelector('[role="tablist"]')).toBeFalsy();
+  });
+
+  it('ciclo de composición ⇒ error validado antes del render (D2)', async () => {
+    const conRef: UiViewTabs = {
+      type: 'tabs',
+      config: { children: [{ id: 'loop', label: 'Loop', ref: 'panel' }] },
+    };
+    const fixture = await montar(esquemaCon(conRef));
+    expect(fixture.nativeElement.textContent).toContain('ciclo');
+    expect(fixture.nativeElement.querySelector('[role="tablist"]')).toBeFalsy();
+  });
+
+  it('profundidad sobre el límite ⇒ error validado antes del render (D2)', async () => {
+    register('view', { kind: 'view', type: 'hoja-h', since: '9.9', load: async () => HojaH });
+    const schema: ResourceSchema = {
+      ...base(),
+      uiViews: {
+        a: tabs([{ id: 'n1', label: 'N1', ref: 'b' }]),
+        b: tabs([{ id: 'n2', label: 'N2', ref: 'c' }]),
+        c: tabs([{ id: 'n3', label: 'N3', ref: 'd' }]),
+        d: tabs([{ id: 'n4', label: 'N4', type: 'hoja-h' }]),
+      },
+    };
+    const fixture = await montar(schema, 'a');
+    expect(fixture.nativeElement.textContent).toContain('profundidad');
+    expect(fixture.nativeElement.querySelector('[role="tablist"]')).toBeFalsy();
+  });
+
+  it('visibleWhen sin record evalúa contra vacío: empty pasa, eq no', async () => {
+    register('view', { kind: 'view', type: 'hoja-h', since: '9.9', load: async () => HojaH });
+    const fixture = await montar(
+      esquemaCon(
+        tabs([
+          { id: 'a', label: 'Siempre', type: 'hoja-h' },
+          {
+            id: 'b',
+            label: 'Condicional',
+            type: 'hoja-h',
+            visibleWhen: [{ field: 'estado', operator: 'eq', value: 'activo' }],
+          },
+          {
+            id: 'c',
+            label: 'Sin filtro',
+            type: 'hoja-h',
+            visibleWhen: [{ field: 'estado', operator: 'empty' }],
+          },
+        ]),
+      ),
+    );
+    const labels = [...fixture.nativeElement.querySelectorAll('[role="tab"]')].map((t) =>
+      t.textContent?.trim(),
+    );
+    expect(labels).toEqual(['Siempre', 'Sin filtro']);
+  });
+
+  it('si la pestaña activa queda oculta, cae visiblemente a la primera visible', async () => {
+    register('view', { kind: 'view', type: 'hoja-h', since: '9.9', load: async () => HojaH });
+    const fixture = await montar(
+      esquemaCon(
+        tabs([
+          {
+            id: 'oculta',
+            label: 'Oculta',
+            type: 'hoja-h',
+            visibleWhen: [{ field: 'estado', operator: 'eq', value: 'activo' }],
+          },
+          { id: 'visible', label: 'Visible', type: 'hoja-h' },
+        ]),
+      ),
+    );
+    const tabsDom = [...fixture.nativeElement.querySelectorAll('[role="tab"]')];
+    expect(tabsDom.map((t) => t.textContent?.trim())).toEqual(['Visible']);
+    expect(tabsDom[0].getAttribute('aria-selected')).toBe('true');
+    expect(fixture.nativeElement.querySelector('[role="tabpanel"]')?.textContent).toContain(
+      'panel/visible',
+    );
+  });
+
+  it('anida tabs inline: el hijo contenedor monta sus propios hijos', async () => {
+    register('view', { kind: 'view', type: 'hoja-h', since: '9.9', load: async () => HojaH });
+    const anidado: UiViewTabs = tabs([
+      {
+        id: 'hijo',
+        label: 'Hijo',
+        type: 'tabs',
+        config: { children: [{ id: 'nieto', label: 'Nieto', type: 'hoja-h' }] },
+      },
+    ]);
+    const fixture = await montar(esquemaCon(anidado));
+    await flush(fixture, () => fixture.nativeElement.querySelectorAll('[role="tab"]').length >= 2);
+    const labels = [...fixture.nativeElement.querySelectorAll('[role="tab"]')].map((t) =>
+      t.textContent?.trim(),
+    );
+    expect(labels).toEqual(['Hijo', 'Nieto']);
+    // el nieto vive bajo instanceId de cadena: panel/hijo (parentInstanceId)
+    expect(fixture.nativeElement.querySelector('[role="tabpanel"]')?.textContent).toContain(
+      'panel/hijo',
+    );
+  });
+});

package/src/lib/views/composer/composer-host.ts

@@ -0,0 +1,248 @@
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+import type { ResourceSchema, UiViewTabs, ViewChildNode } from '../../core/models/schema.model';
+import { validateComposition } from '../../core/registry/composition-validator';
+import { getSchema } from '../../core/registry/schema-catalog';
+import { EmptyState } from '../../shared/components/empty-state/empty-state';
+import { evaluateCondition } from '../../shared/utils/condition-evaluator';
+import { ViewSlot } from './view-slot';
+
+/**
+ * R9.9 · slice 3 — Host genérico de composición (`uiView` tipo `tabs`).
+ *
+ * Un SOLO componente recursivo renderiza cualquier composición declarada:
+ * resuelve cada hijo por `(kind:'view', type)` dentro del `ViewSlot` (D2,
+ * sin `switch` de dominio y sin importar hojas), monta la validación del
+ * schema ANTES del primer render (fail-loud) y maneja el tablist accesible
+ * con roving tabindex (R9.9.5).
+ *
+ * Decisiones R9.9.5:
+ * - Retención: un hijo `retain:true` visitado queda MONTADO pero oculto
+ *   (`hidden`); sin `retain` se destruye al cambiar de pestaña.
+ * - Pestaña activa LOCAL por componente: no hay estado compartido entre
+ *   instancias de tabs anidadas (documentado en los docs de slice 5).
+ * - `visibleWhen` se evalúa sin record (el contenedor no es un formulario):
+ *   contra registro vacío, TODAS las condiciones deben pasar (AND).
+ *   Si la pestaña activa queda oculta, la selección cae visiblemente a la
+ *   primera visible — nunca se pierde en silencio.
+ */
+@Component({
+  selector: 'app-composer-host',
+  standalone: true,
+  imports: [ViewSlot, EmptyState],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (error() !== null) {
+      <app-empty-state title="Composición no disponible" [message]="error()!" />
+    } @else if (visibles().length === 0) {
+      <app-empty-state
+        title="Sin secciones disponibles"
+        message="La vista no declara secciones visibles."
+      />
+    } @else {
+      <div
+        role="tablist"
+        class="flex flex-wrap gap-1 border-b border-neutral/20 px-1"
+        [attr.aria-label]="etiqueta()"
+        (keydown)="onKeydown($event)"
+      >
+        @for (h of visibles(); track h.id) {
+          <button
+            type="button"
+            role="tab"
+            [id]="'tab-' + h.id"
+            [attr.aria-selected]="h.id === activo()"
+            [attr.aria-controls]="montado(h.id) ? 'panel-' + h.id : null"
+            [attr.tabindex]="h.id === activo() ? 0 : -1"
+            [class]="claseTab(h.id)"
+            (click)="seleccionar(h.id, true)"
+          >
+            {{ h.label }}
+          </button>
+        }
+      </div>
+
+      @for (h of montados(); track h.id) {
+        <div
+          role="tabpanel"
+          [id]="'panel-' + h.id"
+          [attr.aria-labelledby]="'tab-' + h.id"
+          [class.hidden]="h.id !== activo()"
+          class="py-3 focus:outline-none"
+          tabindex="0"
+        >
+          <app-view-slot
+            [schema]="schema()!"
+            [node]="h"
+            [parentInstanceId]="uiViewName()"
+            [depth]="profundidad() + 1"
+          />
+        </div>
+      }
+    }
+  `,
+})
+export class ComposerHost {
+  private readonly route = inject(ActivatedRoute);
+  private readonly routeData = toSignal(this.route.data, { requireSync: true });
+
+  /** Schema: explícito en `data` (fixtures/ruta embebida) o vía `resourceId`. */
+  readonly schema = computed<ResourceSchema | undefined>(() => {
+    const data = this.routeData();
+    const explicit = data['schema'];
+    if (explicit !== undefined) return explicit as ResourceSchema;
+    const resourceId = data['resourceId'];
+    return typeof resourceId === 'string' ? getSchema(resourceId) : undefined;
+  });
+
+  /** instanceId de ESTE contenedor (raíz ⇒ nombre de la uiView de ruta). */
+  readonly uiViewName = computed(() => {
+    const v = this.routeData()['uiView'];
+    return typeof v === 'string' ? v : '';
+  });
+
+  /** Profundidad de ESTE contenedor (raíz ⇒ 0; embebido ⇒ payload.depth). */
+  readonly profundidad = computed(() => {
+    const d = this.routeData()['depth'];
+    return typeof d === 'number' ? d : 0;
+  });
+
+  /** Config `tabs` declarada para esta instancia. */
+  readonly vista = computed<UiViewTabs | undefined>(() => {
+    const schema = this.schema();
+    const nombre = this.uiViewName();
+    if (schema === undefined || nombre === '') return undefined;
+    const vista = schema.uiViews?.[nombre];
+    // `'config' in` descarta UiViewBase; el literal descarta calendar/kanban.
+    return vista !== undefined && 'config' in vista && vista.type === 'tabs' ? vista : undefined;
+  });
+
+  /** Error determinista de configuración (schema/vista ausente o no-tabs). */
+  private readonly errorConfig = computed<string | null>(() => {
+    const data = this.routeData();
+    const schema = this.schema();
+    const nombre = this.uiViewName();
+    if (schema === undefined) {
+      return `Schema no encontrado para '${String(data['resourceId'] ?? '')}'`;
+    }
+    if (nombre === '') return 'Ruta de composición sin uiView declarada';
+    const vista = schema.uiViews?.[nombre];
+    if (vista === undefined) return `Vista '${nombre}' no declarada en ${schema.id}`;
+    if (vista.type !== 'tabs') {
+      return `Configuración inválida: ${schema.id}.${nombre} declara '${vista.type}', no es una vista tabs`;
+    }
+    return null;
+  });
+
+  /** Error de validación D2 (se recalcula una sola vez, en el constructor). */
+  private readonly errorValidacion = signal<string | null>(null);
+
+  /** Error mostrado: validación del schema primero, luego configuración. */
+  readonly error = computed<string | null>(() => this.errorValidacion() ?? this.errorConfig());
+
+  /** Todos los hijos declarados (orden de declaración). */
+  private readonly hijos = computed<readonly ViewChildNode[]>(
+    () => this.vista()?.config.children ?? [],
+  );
+
+  /** Hijos visibles: TODAS sus condiciones `visibleWhen` pasan sin record. */
+  readonly visibles = computed<readonly ViewChildNode[]>(() =>
+    this.hijos().filter(
+      (h) =>
+        h.visibleWhen === undefined ||
+        h.visibleWhen.every((cond) => evaluateCondition(cond, {}, {})),
+    ),
+  );
+
+  /** Selección del usuario (intención; vacío ⇒ usar `initial`/primera). */
+  private readonly seleccion = signal('');
+
+  /**
+   * Pestaña activa EFECTIVA: derivada pura de la selección y de las
+   * visibles — si la selección dejó de existir (u oculta), cae a `initial`
+   * o a la primera visible de forma SINCRÓNICA y visible (R9.9.5: nunca
+   * perder la vista elegida en silencio). Estado LOCAL por instancia.
+   */
+  readonly activo = computed<string>(() => {
+    const vis = this.visibles();
+    if (vis.length === 0) return '';
+    const sel = this.seleccion();
+    if (vis.some((h) => h.id === sel)) return sel;
+    const inicial = this.vista()?.config.initial;
+    return inicial !== undefined && vis.some((h) => h.id === inicial) ? inicial : vis[0].id;
+  });
+
+  /** Ids ya seleccionados alguna vez (sustento de la retención). */
+  private readonly visitados = signal<ReadonlySet<string>>(new Set());
+
+  /** Paneles en DOM: activo + retenidos visitados que siguen visibles. */
+  readonly montados = computed<readonly ViewChildNode[]>(() => {
+    const visibles = new Set(this.visibles().map((h) => h.id));
+    const activo = this.activo();
+    const visitados = this.visitados();
+    return this.hijos().filter(
+      (h) => visibles.has(h.id) && (h.id === activo || (h.retain === true && visitados.has(h.id))),
+    );
+  });
+
+  constructor() {
+    // D2 — validar TODO el schema antes del primer render (fail-loud).
+    const schema = this.schema();
+    if (schema !== undefined) {
+      try {
+        validateComposition(schema);
+      } catch (e) {
+        this.errorValidacion.set(e instanceof Error ? e.message : String(e));
+      }
+    }
+    // La pestaña activa al montar cuenta como visitada: al cambiar de
+    // pestaña, un hijo `retain:true` que estaba activo conserva su panel.
+    const inicial = this.activo();
+    if (inicial !== '') this.visitados.set(new Set([inicial]));
+  }
+
+  /** Selecciona una pestaña y, opcionalmente, mueve el foco a su botón. */
+  seleccionar(id: string, conFoco: boolean): void {
+    this.seleccion.set(id);
+    this.visitados.update((v) => new Set(v).add(id));
+    if (conFoco) {
+      setTimeout(() => document.getElementById(`tab-${id}`)?.focus(), 0);
+    }
+  }
+
+  /** Navegación por teclado del tablist: flechas con wrap, Home/End. */
+  onKeydown(event: KeyboardEvent): void {
+    const vis = this.visibles();
+    if (vis.length === 0) return;
+    const i = vis.findIndex((h) => h.id === this.activo());
+    let next = -1;
+    if (event.key === 'ArrowRight') next = (i + 1) % vis.length;
+    else if (event.key === 'ArrowLeft') next = (i - 1 + vis.length) % vis.length;
+    else if (event.key === 'Home') next = 0;
+    else if (event.key === 'End') next = vis.length - 1;
+    if (next < 0) return;
+    event.preventDefault();
+    this.seleccionar(vis[next].id, true);
+  }
+
+  /** El panel de este hijo está montado (⇒ existe su `aria-controls`). */
+  montado(id: string): boolean {
+    return this.montados().some((h) => h.id === id);
+  }
+
+  /** Clases del botón de pestaña: activo resaltado con token `primary`. */
+  claseTab(id: string): string {
+    const base =
+      'rounded-t-lg px-3 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary';
+    return id === this.activo()
+      ? `${base} bg-primary/10 font-medium text-primary`
+      : `${base} text-neutral hover:text-primary`;
+  }
+
+  /** Etiqueta a11y del tablist (la del recurso). */
+  etiqueta(): string {
+    return this.schema()?.labelPlural ?? 'Secciones';
+  }
+}

package/src/lib/views/composer/composer-imports.spec.ts

@@ -0,0 +1,54 @@
+// @ts-ignore — `node:fs` no tiene tipos en este proyecto (sin @types/node);
+// el runtime de tests corre en Node y el builtin resuelve igual.
+import { readFileSync } from 'node:fs';
+// @ts-ignore — idem para `node:url`.
+import { fileURLToPath } from 'node:url';
+
+import { describe, expect, it } from 'vitest';
+
+/**
+ * R9.9 · slice 3 — Guardia arquitectónica sobre el compositor (D2).
+ *
+ * El host debe ser GENÉRICO: sin imports de hojas, sin strings de dominio y
+ * sin `switch` de tipos — cualquier página nueva declarada en un schema se
+ * compone sin tocar el compositor. Este test lee el fuente REAL desde disco
+ * (no el bundle) y falla si aparece un acoplamiento al dominio.
+ */
+function fuente(nombre: string): string {
+  return readFileSync(fileURLToPath(new URL(nombre, import.meta.url)), 'utf8');
+}
+
+const COMPOSITOR = ['composer-host.ts', 'view-slot.ts', 'view-context.ts'];
+
+describe('composer source-scan: el compositor no conoce el dominio', () => {
+  it('no importa hojas, páginas ni vistas de dominio', () => {
+    for (const nombre of COMPOSITOR) {
+      const codigo = fuente(nombre);
+      expect(codigo, `${nombre} importa una hoja/página de dominio`).not.toMatch(
+        /from ['"](\.\.\/)+(pages|views\/(calendar-view|kanban-view))/,
+      );
+      expect(codigo, `${nombre} referencia una hoja por import dinámico`).not.toMatch(
+        /import\(['"](\.\.\/)+(pages|views\/(calendar-view|kanban-view))/,
+      );
+      expect(codigo, `${nombre} menciona un tipo de dominio`).not.toMatch(
+        /'calendar'|'kanban'|'resource-page'|'form-view'|'detail-view'/,
+      );
+    }
+  });
+
+  it('no contiene un switch de tipos (dispatch exclusivamente por registro)', () => {
+    for (const nombre of COMPOSITOR) {
+      expect(fuente(nombre), `${nombre} contiene un switch`).not.toMatch(/@?switch\s*\(/);
+    }
+  });
+
+  it('resuelve hijos sólo vía get(kind, type) del registro, nunca resolve()', () => {
+    for (const nombre of ['view-slot.ts']) {
+      const codigo = fuente(nombre);
+      expect(codigo, `${nombre} usa resolve() (fallback silencioso prohibido)`).not.toMatch(
+        /\bresolve\(\s*'view'/,
+      );
+      expect(codigo, `${nombre} no usa get('view', type)`).toMatch(/get\(\s*'view'\s*,/);
+    }
+  });
+});