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

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

@@ -1,63 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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}`;
-  }
-}