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

package/src/lib/shell/layout/layout.ts

@@ -0,0 +1,63 @@
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+import { Button } from '../../shared/components/button/button';
+import { Sidebar } from '../sidebar/sidebar';
+
+/**
+ * Esqueleto de la app autenticada: sidebar + área principal con outlet.
+ *
+ * Responsive: en pantallas chicas la sidebar es **offcanvas** (detrás de un
+ * botón hamburguesa + backdrop); desde `lg` vuelve a ser estática y siempre
+ * visible (clases `lg:*` del propio aside ganan sobre el estado `open`).
+ */
+@Component({
+  selector: 'app-layout',
+  imports: [RouterOutlet, Sidebar, Button],
+  template: `
+    <div class="flex min-h-screen bg-neutral/5">
+      <button
+        app-button
+        type="button"
+        variant="outline"
+        size="icon"
+        class="fixed top-[calc(env(safe-area-inset-top)+0.75rem)] left-3 z-40 shadow-md lg:hidden"
+        [attr.aria-expanded]="sidebarOpen()"
+        aria-controls="main-sidebar"
+        aria-label="Abrir menú"
+        (click)="sidebarOpen.set(true)"
+      >
+        <svg
+          aria-hidden="true"
+          class="size-5"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+      @if (sidebarOpen()) {
+        <div
+          class="fixed inset-0 z-30 bg-black/30 lg:hidden"
+          aria-hidden="true"
+          (click)="sidebarOpen.set(false)"
+        ></div>
+      }
+      <app-sidebar id="main-sidebar" [(open)]="sidebarOpen" />
+      <!-- pt reafirmado en sm: sin esto la variante sm:p-6 (va después en la
+           cascada) pisa el pt-16 base y el contenido choca con la hamburguesa.
+           base/sm dejan pasar el safe-area del notch; en lg no hay hamburguesa. -->
+      <main
+        class="min-w-0 flex-1 p-4 pt-[calc(4rem+env(safe-area-inset-top))] sm:p-6 sm:pt-[calc(4rem+env(safe-area-inset-top))] lg:p-8"
+      >
+        <router-outlet />
+      </main>
+    </div>
+  `,
+})
+export class Layout {
+  /** Estado del offcanvas en mobile; en `lg` la sidebar es estática (siempre visible). */
+  readonly sidebarOpen = signal(false);
+}

package/src/lib/shell/shell.routes.spec.ts

@@ -0,0 +1,59 @@
+import type { Route, Routes } from '@angular/router';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import type { ResourceSchema } from '../core/models/schema.model';
+import { allSchemas, getAuth, setSchemaCatalog } from '../core/registry/schema-catalog';
+import { shellRoutes } from './shell.routes';
+
+/**
+ * R11 · orden de producción (regresión): `app.routes.ts` importa el barrel
+ * del paquete ANTES de que `provideGasAdmin` siembre el catálogo (corre en
+ * el cuerpo de `app.config`). Si `shellRoutes` construye sus hijos en la
+ * evaluación del módulo, quedan `[]` para siempre y toda URL protegida
+ * renderiza vacío — el paquete compilado es eager aunque los specs, con el
+ * transform de Vite, no lo sean.
+ */
+const schemaDemo: ResourceSchema = {
+  id: 'demo',
+  label: 'Demo',
+  labelPlural: 'Demos',
+  kind: 'collection',
+  endpoint: {},
+  keyField: 'id',
+  titleField: 'name',
+  listColumns: [],
+  fields: [],
+  uiViews: {
+    list: { type: 'list' },
+    det: { type: 'detail', path: ':key' },
+  },
+};
+
+async function materializar(): Promise<Route[]> {
+  const loader = shellRoutes[0]?.loadChildren;
+  expect(typeof loader, 'shellRoutes debe construir sus hijos al navegarse').toBe('function');
+  const hijos = await (loader as () => Promise<Routes> | Routes)();
+  const layout = hijos.find((route) => route.path === '');
+  return layout?.children ?? hijos;
+}
+
+describe('shellRoutes en orden de producción (import del barrel antes del seed)', () => {
+  const previo = { schemas: allSchemas(), auth: getAuth() };
+  afterEach(() => setSchemaCatalog(previo.schemas, previo.auth));
+
+  it('materializa las rutas cuando se navega, no al importar el módulo', async () => {
+    setSchemaCatalog([schemaDemo], undefined);
+
+    const rutas = (await materializar()).map((route) => route.path);
+    expect(rutas).toContain('demo');
+    expect(rutas).toContain('demo/:key');
+  });
+
+  it('con el catálogo vacío no revienta: devuelve cero rutas y el seed posterior surte efecto', async () => {
+    setSchemaCatalog([], undefined);
+    expect(await materializar()).toEqual([]);
+
+    setSchemaCatalog([schemaDemo], undefined);
+    expect((await materializar()).map((route) => route.path)).toContain('demo');
+  });
+});

package/src/lib/shell/shell.routes.ts

@@ -0,0 +1,122 @@
+import type { Route, Routes } from '@angular/router';
+import { inject } from '@angular/core';
+
+import { validateComposition } from '../core/registry/composition-validator';
+import type { ResourceSchema } from '../core/models/schema.model';
+import { get } from '../core/registry/render-registry';
+import { roleGuard } from '../core/guards/auth.guard';
+import { unsavedChangesGuard } from '../core/guards/unsaved-changes.guard';
+import { ViewNavigationService } from '../core/view-navigation/view-navigation.service';
+import { allSchemas } from '../core/registry/schema-catalog';
+import { createViewContext } from '../views/composer/view-context';
+import { Layout } from './layout/layout';
+
+function pathRank(path: string): number[] {
+  const segments = path.split('/');
+  return [segments.length, segments.filter((segment) => !segment.startsWith(':')).length];
+}
+
+function compareRoutes(a: Route, b: Route): number {
+  const aRank = pathRank(a.path ?? '');
+  const bRank = pathRank(b.path ?? '');
+  return bRank[0] - aRank[0] || bRank[1] - aRank[1];
+}
+
+/**
+ * Rutas de los schemas recibidos (por defecto, la registry completa).
+ * Cada schema se valida con `validateComposition` ANTES de generar rutas
+ * (D3): una composición inválida revienta al arrancar, no en el render.
+ */
+export function resourceRoutes(catalog: readonly ResourceSchema[] = allSchemas()): Route[] {
+  return catalog
+    .flatMap((schema) => {
+      if (!schema.uiViews || Object.keys(schema.uiViews).length === 0) {
+        throw new Error(`El recurso '${schema.id}' no declara uiViews`);
+      }
+      validateComposition(schema);
+      return Object.entries(schema.uiViews).map(([name, view]) => {
+        const descriptor = get('view', view.type);
+        if (!descriptor) {
+          throw new Error(
+            `No existe descriptor kind:view type '${view.type}' para ${schema.id}.${name}`,
+          );
+        }
+        const relativePath = view.path ?? '';
+        if (
+          relativePath.startsWith('/') ||
+          relativePath.endsWith('/') ||
+          (relativePath !== '' &&
+            relativePath
+              .split('/')
+              .some((segment) => segment === '' || segment === '.' || segment === '..'))
+        ) {
+          throw new Error(`Ruta uiViews inválida en ${schema.id}.${name}: '${relativePath}'`);
+        }
+        const path = [schema.id, relativePath].filter(Boolean).join('/');
+        const route: Route = {
+          path,
+          loadComponent: descriptor.load,
+          canActivate: [roleGuard],
+          data: {
+            resourceId: schema.id,
+            uiView: name,
+            viewType: view.type,
+          },
+          /**
+           * R9.9 · D1/D4 — el payload lleva SIEMPRE el `select` declarado
+           * (cualquier mode) para que la hoja aplique la decision table; el
+           * `emit` se liga aquí (contexto de inyección) a
+           * `ViewNavigationService.dispatch`, que resuelve el target,
+           * construye los segmentos y respeta guards + historial. Sólo un
+           * binding `mode:'route'` lleva `emit`; `none`/`inline`/ausente ⇒
+           * payload sin emisor.
+           */
+          resolve: {
+            viewContext: () => {
+              const base = {
+                resourceId: schema.id,
+                uiView: name,
+                viewType: view.type,
+                ...(view.select !== undefined ? { select: view.select } : {}),
+              };
+              const select = view.select;
+              if (select?.mode !== 'route') return createViewContext(base);
+              const nav = inject(ViewNavigationService);
+              return createViewContext(base, (event) => {
+                void nav.dispatch(select, event);
+              });
+            },
+          },
+        };
+        if (view.type === 'form') route.canDeactivate = [unsavedChangesGuard];
+        return route;
+      });
+    })
+    .sort(compareRoutes);
+}
+
+/**
+ * Las rutas del shell salen de `uiViews`, no de `ResourceSchema.views` (que
+ * conserva los metadatos de consultas del backend). Añadir o cambiar una
+ * página requiere una declaración y un descriptor `kind: 'view'`.
+ *
+ * Los hijos se construyen DENTRO del `loadChildren` (en la primera
+ * navegación), nunca en la evaluación del módulo: el consumidor importa
+ * este barrel desde `app.routes.ts` ANTES de que `provideGasAdmin` siembre
+ * el catálogo (corre en el cuerpo de `app.config`), y el paquete compilado
+ * es eager — construir en el import congelaría `children: []` para siempre
+ * y toda URL protegida renderizaría vacío (regresión: shell.routes.spec en
+ * orden de producción).
+ */
+export const shellRoutes: Routes = [
+  {
+    path: '',
+    loadChildren: () => [
+      {
+        path: '',
+        component: Layout,
+        children: resourceRoutes(),
+      },
+    ],
+  },
+];

package/src/lib/shell/sidebar/sidebar.ts

@@ -0,0 +1,139 @@
+import { Component, computed, inject, model, signal } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { LucideLogOut } from '@lucide/angular';
+
+import { allSchemas } from '../../core/registry/schema-catalog';
+import { AuthService } from '../../core/services/auth.service';
+import { NotificationService } from '../../core/services/notification.service';
+import { Button } from '../../shared/components/button/button';
+import { ThemeToggle } from '../theme-toggle/theme-toggle';
+import type { ResourceSchema } from '../../core/models/schema.model';
+
+interface MenuEntry {
+  id: string;
+  label: string;
+}
+
+/**
+ * Menú lateral generado desde el catálogo EFECTIVO (F7-4): locales
+ * fusionados + recursos sintetizados del schema remoto — un recurso nuevo
+ * del backend aparece acá con 0 cambios en `src/`. Reactivo a la señal del
+ * schema remoto (el initializer lo resuelve antes del primer render, pero
+ * el `computed` cubre el caso de respuesta tardía).
+ * `labelPlural` + `permissions`: un recurso se oculta solo si declara
+ * create, update y remove explícitamente en falso (no hay permiso de
+ * lectura).
+ */
+@Component({
+  selector: 'app-sidebar',
+  imports: [RouterLink, RouterLinkActive, ThemeToggle, Button, LucideLogOut],
+  template: `
+    <!-- Offcanvas en mobile (transform); las clases lg: la dejan estática
+         y siempre visible en pantallas grandes. -->
+    <aside
+      class="fixed inset-y-0 left-0 z-40 w-60 shrink-0 h-[100svh] min-h-[80svh] lg:sticky  border-r border-neutral/20 bg-surface-raised transition-transform duration-200 lg:static lg:z-auto lg:translate-x-0"
+      [class.-translate-x-full]="!open()"
+    >
+      <div class="flex items-center justify-between gap-2 border-b border-neutral/20 px-4 py-4">
+        <!-- min-w-0+truncate: si el toggle exige su ancho, el rótulo se
+             trunca en vez de desbordar la sidebar de 240 px. -->
+        <span class="min-w-0 truncate font-display text-base font-semibold">Admin</span>
+        <app-theme-toggle />
+      </div>
+      <nav aria-label="Principal" class="p-3">
+        <ul class="space-y-2 lg:space-y-1">
+          @for (item of menuItems(); track item.id) {
+            <li>
+              <a
+                [routerLink]="['/', item.id]"
+                routerLinkActive="bg-primary/10 text-primary"
+                class="flex min-h-11 items-center rounded-lg px-3 py-2 text-sm font-medium text-neutral hover:bg-neutral/10"
+                (click)="open.set(false)"
+              >
+                {{ item.label }}
+              </a>
+            </li>
+          }
+        </ul>
+      </nav>
+      @if (isAuthenticated()) {
+        <div class="border-t border-neutral/20 p-3">
+          <button
+            app-button
+            type="button"
+            variant="danger"
+            [loading]="loggingOut()"
+            [disabled]="loggingOut()"
+            (click)="closeSession()"
+            class="w-full"
+          >
+            <svg lucideLogOut size="16" />
+            Cerrar sesión
+          </button>
+        </div>
+      }
+    </aside>
+  `,
+})
+export class Sidebar {
+  /** Estado del offcanvas (sólo relevante en mobile; ver `layout.ts`).
+   *  `model()`: el padre lo setea (abrir) y el hijo también (cerrar al
+   *  navegar) — binding de dos vías `[(open)]`. */
+  readonly open = model(false);
+
+  private readonly auth = inject(AuthService);
+  private readonly notifications = inject(NotificationService);
+  readonly isAuthenticated = this.auth.isAuthenticated;
+  readonly loggingOut = signal(false);
+
+  /**
+   * R2.10 — el menú se corta dos veces: `isVisible` (permisos declarados
+   * en el schema) y `canAccess` (auth.md §5.3, `access` de la sesión).
+   * Sólo UX: filtrar acá no protege nada, el back re-verifica en R2.6.
+   */
+  readonly menuItems = computed<MenuEntry[]>(() =>
+    allSchemas()
+      .filter((schema) => isVisible(schema) && this.auth.canAccess(schema.access))
+      .map((schema) => ({
+        id: schema.id,
+        label: schema.labelPlural,
+      })),
+  );
+
+  async closeSession(): Promise<void> {
+    const accepted = await this.notifications.confirm({
+      title: 'Cerrar sesión',
+      message: '¿Seguro que querés cerrar tu sesión?',
+      confirmLabel: 'Cerrar sesión',
+    });
+    if (!accepted) return;
+
+    this.loggingOut.set(true);
+    this.auth.logout().subscribe({
+      complete: () => this.loggingOut.set(false),
+    });
+  }
+}
+
+function isVisible(schema: ResourceSchema): boolean {
+  // R7.5: usar policies cuando existan, fallback a permissions
+  if (schema.policies?.access) {
+    // Con policies, asumimos que si el usuario tiene sesión puede ver el recurso
+    // (el filtrado real lo hace `canAccess` en el computed, que evalúa el rol).
+    // Esta función sólo puede aplicar criterios estáticos, no dinámicos.
+    return true;
+  }
+
+  // Fallback a permissions (legacy)
+  const permissions = schema.permissions;
+  if (!permissions) {
+    return true;
+  }
+  // Un recurso de sólo lectura (todas las escrituras en false) sigue siendo
+  // visible si tiene endpoint de lectura (list/get): no se oculta por ser
+  // read-only. Sólo se oculta si no puede leer NI escribir.
+  const hasReadEndpoint = !!schema.endpoint?.list || !!schema.endpoint?.get;
+  const canWrite =
+    permissions.create !== false || permissions.update !== false || permissions.remove !== false;
+  return hasReadEndpoint || canWrite;
+}

package/src/lib/shell/theme-toggle/theme-toggle.ts

@@ -0,0 +1,74 @@
+import { Component, inject } from '@angular/core';
+import { LucideMonitor, LucideMoon, LucideSun } from '@lucide/angular';
+
+import { ThemeService, type ThemeMode } from '../../core/services/theme.service';
+
+const BASE =
+  'rounded-md p-1.5 transition-colors ' +
+  // 44×44 en mobile (guía ux-ui-mobile §8.2); en lg vuelve a 28 px (ratón).
+  'min-h-11 min-w-11 lg:min-h-0 lg:min-w-0 ' +
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary';
+const ACTIVE = 'bg-primary/10 text-primary';
+const IDLE = 'text-neutral hover:bg-neutral/10';
+
+/**
+ * Selector de tema de tres posiciones: Sistema / Claro / Oscuro (§8.6).
+ *
+ * Van tres `<button>` con `aria-pressed` y no un `role="radiogroup"`: un
+ * radiogroup exige navegación con flechas para cumplir su contrato, mientras
+ * que tres botones ya son operables con Tab + Enter/Space y el lector de
+ * pantalla anuncia "presionado / no presionado" en cada uno. Es la opción
+ * con menos JS y sin degradar el teclado.
+ *
+ * Sólo icono, con `aria-label` y `title` para no ocupar ancho en la cabecera
+ * de la sidebar (240 px).
+ */
+@Component({
+  selector: 'app-theme-toggle',
+  imports: [LucideMonitor, LucideSun, LucideMoon],
+  template: `
+    <div
+      role="group"
+      aria-label="Tema del panel"
+      class="inline-flex items-center gap-0.5 rounded-lg border border-neutral/20 bg-surface p-0.5"
+    >
+      <button
+        type="button"
+        [class]="classes('system')"
+        [attr.aria-pressed]="theme.mode() === 'system'"
+        aria-label="Tema: seguir al sistema"
+        title="Seguir al sistema"
+        (click)="theme.set('system')"
+      >
+        <svg lucideMonitor size="16" />
+      </button>
+      <button
+        type="button"
+        [class]="classes('light')"
+        [attr.aria-pressed]="theme.mode() === 'light'"
+        aria-label="Tema: claro"
+        title="Tema claro"
+        (click)="theme.set('light')"
+      >
+        <svg lucideSun size="16" />
+      </button>
+      <button
+        type="button"
+        [class]="classes('dark')"
+        [attr.aria-pressed]="theme.mode() === 'dark'"
+        aria-label="Tema: oscuro"
+        title="Tema oscuro"
+        (click)="theme.set('dark')"
+      >
+        <svg lucideMoon size="16" />
+      </button>
+    </div>
+  `,
+})
+export class ThemeToggle {
+  readonly theme = inject(ThemeService);
+
+  classes(mode: ThemeMode): string {
+    return `${BASE} ${this.theme.mode() === mode ? ACTIVE : IDLE}`;
+  }
+}