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

package/src/lib/pages/login/login.spec.ts

@@ -1,109 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideHttpClient } from '@angular/common/http';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { provideRouter, Router } from '@angular/router';
-import { of } from 'rxjs';
-import { vi } from 'vitest';
-
-import type { AuthProvider } from '../../core/models/schema.model';
-import { setSchemaCatalog } from '../../core/registry/schema-catalog';
-import { AuthService } from '../../core/services/auth.service';
-import { API_URL } from '../../core/tokens';
-import { Login } from './login';
-
-describe('Login component', () => {
-  let fixture: ComponentFixture<Login>;
-  let component: Login;
-  let auth: AuthService;
-  let router: Router;
-
-  function setup(providers: AuthProvider[], hasFirebase = false) {
-    TestBed.resetTestingModule();
-    setSchemaCatalog([], {
-      providers,
-      loginFields: [
-        { key: 'email', type: 'email', required: true },
-        { key: 'password', type: 'password', required: true },
-      ],
-      redirectAfterLogin: '/dashboard',
-      rememberMe: false,
-      ...(hasFirebase ? { firebase: { exchangeEndpoint: '/auth/firebase' } } : {}),
-    });
-
-    TestBed.configureTestingModule({
-      imports: [Login],
-      providers: [
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        provideRouter([]),
-        { provide: API_URL, useValue: '/api' },
-      ],
-    });
-
-    auth = TestBed.inject(AuthService);
-    router = TestBed.inject(Router);
-    vi.spyOn(router, 'navigateByUrl').mockResolvedValue(true);
-    fixture = TestBed.createComponent(Login);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }
-
-  afterEach(() => {
-    TestBed.resetTestingModule();
-  });
-
-  it('providers = [password], sin firebase: no muestra botón de Google y submit() llama a auth.login()', () => {
-    setup(['password'], false);
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('#btn-login-google')).toBeNull();
-
-    const loginSpy = vi.spyOn(auth, 'login').mockReturnValue(
-      of({ id: 'u_1', email: 'test@example.com', role: 'admin' }),
-    );
-
-    component.setValue('email', 'test@example.com');
-    component.setValue('password', 'secret');
-
-    const form = compiled.querySelector('form')!;
-    form.dispatchEvent(new Event('submit'));
-
-    expect(loginSpy).toHaveBeenCalledWith('test@example.com', 'secret');
-    expect(router.navigateByUrl).toHaveBeenCalledWith('/dashboard');
-  });
-
-  it('providers = [google, password]: muestra botón de Google en el DOM', () => {
-    setup(['google', 'password'], false);
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('#btn-login-google')).not.toBeNull();
-    expect(compiled.querySelector('#btn-login-google')?.textContent).toContain('Continuar con Google');
-  });
-
-  it('loginWithGoogle() llama a auth.loginWithGoogle() y navega al tener éxito', () => {
-    setup(['google', 'password'], false);
-    const googleSpy = vi.spyOn(auth, 'loginWithGoogle').mockReturnValue(
-      of({ id: 'u_google', email: 'google@test.com', role: 'admin' }),
-    );
-
-    component.loginWithGoogle();
-
-    expect(googleSpy).toHaveBeenCalled();
-    expect(router.navigateByUrl).toHaveBeenCalledWith('/dashboard');
-  });
-
-  it('providers = [password] con firebase: submit() delega a loginWithFirebasePassword()', () => {
-    setup(['password'], true);
-    const fbPwSpy = vi.spyOn(auth, 'loginWithFirebasePassword').mockReturnValue(
-      of({ id: 'u_pw', email: 'pw@test.com', role: 'admin' }),
-    );
-
-    component.setValue('email', 'pw@test.com');
-    component.setValue('password', 'secret');
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    const form = compiled.querySelector('form')!;
-    form.dispatchEvent(new Event('submit'));
-
-    expect(fbPwSpy).toHaveBeenCalledWith('pw@test.com', 'secret');
-    expect(router.navigateByUrl).toHaveBeenCalledWith('/dashboard');
-  });
-});

package/src/lib/pages/login/login.ts

@@ -1,227 +0,0 @@
-import { Component, inject, signal } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { ApiError } from '../../core/models/api.model';
-import { AuthService, LOGIN_PATH } from '../../core/services/auth.service';
-import { Button } from '../../shared/components/button/button';
-import { getAuth } from '../../core/registry/schema-catalog';
-
-/** Copy de las etiquetas — vive acá, no en el schema: una sola pantalla. */
-const LABELS: Record<string, string> = {
-  email: 'Correo electrónico',
-  password: 'Contraseña',
-};
-
-const FIELD_BASE =
-  'mt-1 w-full rounded-lg border border-neutral/40 bg-surface px-3 py-2 text-sm text-neutral placeholder:text-neutral/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary';
-
-/**
- * Login (auth.md §5.1).
- *
- * **Pintada a partir de `authSchema.loginFields`**: si mañana cambian los
- * campos, éste componente no se toca — sólo se mueven claves y etiquetas.
- * No usa `FieldHost` porque el tipo `password` todavía no existe en
- * `FieldSchema` (es pieza nueva de Fase 3, R3.3); el `@switch` de abajo es
- * exactamente el reemplazo que R3.x hará por el registro de render.
- *
- * **No hay casilla «recordarme»**: D10-3 negó `localStorage` (§9.3) y el
- * token muere con la pestaña. Poner un checkbox sería prometer que la
- * sesión sobrevive a cerrar el navegador.
- */
-@Component({
-  selector: 'app-login',
-  imports: [Button],
-  template: `
-    <main class="flex min-h-[100svh] items-center justify-center bg-surface px-4">
-      <div
-        class="w-full max-w-sm rounded-xl border border-neutral/20 bg-surface-raised p-8 shadow-sm"
-      >
-        <h1 class="font-display text-lg font-semibold">Admin</h1>
-        <p class="mt-1 text-sm text-neutral">Inicia sesión para continuar</p>
-
-        @if (providers.includes('google')) {
-          <button
-            type="button"
-            id="btn-login-google"
-            app-button
-            variant="outline"
-            [loading]="providerLoading() === 'google'"
-            (click)="loginWithGoogle()"
-            class="mt-6 w-full"
-          >
-            Continuar con Google
-          </button>
-          <div class="my-4 flex items-center gap-3">
-            <hr class="flex-1 border-neutral/20" />
-            <span class="text-xs text-neutral/50">o</span>
-            <hr class="flex-1 border-neutral/20" />
-          </div>
-        }
-
-        <form
-          [class]="providers.includes('google') ? 'space-y-4' : 'mt-6 space-y-4'"
-          (submit)="submit($event)"
-          novalidate
-        >
-          @for (field of schema.loginFields; track field.key) {
-            <div>
-              <label [attr.for]="field.key" class="block text-sm font-medium text-neutral">
-                {{ label(field.key) }}
-              </label>
-
-              @switch (field.type) {
-                @case ('email') {
-                  <input
-                    [attr.id]="field.key"
-                    [attr.name]="field.key"
-                    type="email"
-                    autocomplete="email"
-                    inputmode="email"
-                    [attr.required]="field.required ? '' : null"
-                    [value]="value(field.key)"
-                    (input)="setValue(field.key, $any($event.target).value)"
-                    class="${FIELD_BASE}"
-                  />
-                }
-                @default {
-                  <input
-                    [attr.id]="field.key"
-                    [attr.name]="field.key"
-                    type="password"
-                    autocomplete="current-password"
-                    [attr.required]="field.required ? '' : null"
-                    [value]="value(field.key)"
-                    (input)="setValue(field.key, $any($event.target).value)"
-                    class="${FIELD_BASE}"
-                  />
-                }
-              }
-            </div>
-          }
-
-          @if (error(); as message) {
-            <p role="alert" class="rounded-lg bg-danger/10 px-3 py-2 text-sm text-danger">
-              {{ message }}
-            </p>
-          }
-
-          <button app-button type="submit" [loading]="loading()" class="w-full">
-            Iniciar sesión
-          </button>
-        </form>
-      </div>
-    </main>
-  `,
-})
-export class Login {
-  private readonly auth = inject(AuthService);
-  private readonly router = inject(Router);
-
-  // Se resuelve en runtime: el catálogo lo fija `provideGasAdmin` en el bootstrap.
-  readonly schema = getAuth()!;
-  readonly providers = this.schema.providers;
-  readonly error = signal<string | null>(null);
-  readonly loading = signal(false);
-  readonly providerLoading = signal<string | null>(null);
-
-  /** Valores por clave: el set lo pinta el `@for` del schema. */
-  private readonly values = signal<Record<string, string>>({});
-
-  label(key: string): string {
-    return LABELS[key] ?? key;
-  }
-
-  value(key: string): string {
-    return this.values()[key] ?? '';
-  }
-
-  setValue(key: string, next: string): void {
-    this.values.update((current) => ({ ...current, [key]: next }));
-  }
-
-  loginWithGoogle(): void {
-    if (this.providerLoading()) return;
-    this.providerLoading.set('google');
-    this.error.set(null);
-    this.auth.loginWithGoogle().subscribe({
-      next: () => {
-        this.providerLoading.set(null);
-        this.goAfterLogin();
-      },
-      error: (err: unknown) => {
-        this.providerLoading.set(null);
-        this.error.set(
-          err instanceof ApiError && err.message !== ''
-            ? err.message
-            : err instanceof Error && err.message !== ''
-              ? err.message
-              : 'No se pudo iniciar sesión con Google.',
-        );
-      },
-    });
-  }
-
-  submit(event: Event): void {
-    event.preventDefault();
-    if (this.loading()) return;
-
-    const email = this.value('email').trim();
-    const password = this.value('password');
-    if (email === '' || password === '') {
-      this.error.set('Completa el correo y la contraseña.');
-      return;
-    }
-
-    if (this.schema.firebase && this.schema.providers.includes('password')) {
-      this.loading.set(true);
-      this.error.set(null);
-      this.auth.loginWithFirebasePassword(email, password).subscribe({
-        next: () => {
-          this.loading.set(false);
-          this.goAfterLogin();
-        },
-        error: (err: unknown) => {
-          this.loading.set(false);
-          this.error.set(
-            err instanceof ApiError && err.message !== ''
-              ? err.message
-              : err instanceof Error && err.message !== ''
-                ? err.message
-                : 'No se pudo iniciar sesión.',
-          );
-        },
-      });
-      return;
-    }
-
-    this.loading.set(true);
-    this.error.set(null);
-    this.auth.login(email, password).subscribe({
-      next: () => {
-        this.loading.set(false);
-        this.goAfterLogin();
-      },
-      error: (err: unknown) => {
-        this.loading.set(false);
-        // El mensaje del backend ya viene en español y ya describe el
-        // caso («credenciales inválidas»): reformatearlo acá sólo
-        // duplicaría la verdad y se perdería si cambia el texto del back.
-        this.error.set(
-          err instanceof ApiError && err.message !== ''
-            ? err.message
-            : 'No se pudo iniciar sesión.',
-        );
-      },
-    });
-  }
-
-  private goAfterLogin(): void {
-    const previous = this.auth.consumeReturnUrl();
-    const target =
-      previous !== null && previous !== '' && !previous.startsWith(LOGIN_PATH)
-        ? previous
-        : this.schema.redirectAfterLogin;
-    void this.router.navigateByUrl(target).catch(() => undefined);
-  }
-}
-

package/src/lib/pages/resource-page/resource-page.ts

@@ -1,234 +0,0 @@
-import { Component, computed, inject, signal } from '@angular/core';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute, Router } from '@angular/router';
-import { distinctUntilChanged, map, of } from 'rxjs';
-
-import type { ResourceSchema, SelectionBinding } from '../../core/models/schema.model';
-import { AuthService } from '../../core/services/auth.service';
-import type { SelectionEmitter } from '../../views/composer/view-context';
-import { getSchema } from '../../core/registry/schema-catalog';
-import { EmptyState } from '../../shared/components/empty-state/empty-state';
-import { Dashboard } from '../dashboard/dashboard';
-import { DetailView } from '../detail-view/detail-view';
-import { FormView } from '../form-view/form-view';
-import { ListView } from '../list-view/list-view';
-
-type View = 'list' | 'detail';
-
-/**
- * Página del recurso: resuelve el `id` de la ruta contra el registry y
- * despacha según `kind` — colección → list view, singleton → form view,
- * dashboard → panel de sólo lectura — aplicando `permissions` (estado
- * «sin permisos»).
- *
- * Cuando `schema.detail.enabled === true`, intercepta el click de fila del
- * `ListView` y muestra el `DetailView` en lugar de navegar al formulario.
- * «Editar» desde el `DetailView` sí navega al formulario de edición.
- */
-@Component({
-  selector: 'app-resource-page',
-  imports: [Dashboard, DetailView, EmptyState, FormView, ListView],
-  template: `
-    @if (schema(); as schema) {
-      @if (hasNoAccess(schema)) {
-        <app-empty-state
-          title="Sin permisos"
-          message="No tiene permisos para gestionar este recurso."
-        />
-      } @else {
-        @switch (schema.kind) {
-          @case ('collection') {
-            @switch (currentView()) {
-              @case ('detail') {
-                @if (selectedRecord(); as rec) {
-                  <app-detail-view
-                    [schema]="schema"
-                    [record]="rec"
-                    (back)="switchToList()"
-                    (edit)="goEdit($event)"
-                    (delete)="switchToList()"
-                  />
-                }
-              }
-              @default {
-                <header class="mb-6">
-                  <h1 class="font-display text-2xl font-semibold">
-                    {{ schema.labelPlural }}
-                  </h1>
-                  <p class="text-sm text-neutral">Colección · {{ schema.fields.length }} campos</p>
-                </header>
-                <app-list-view [schema]="schema" (viewRecord)="switchToDetail($event)" />
-              }
-            }
-          }
-          @case ('dashboard') {
-            <app-dashboard [schema]="schema" />
-          }
-          @default {
-            <!-- singleton: formulario directo -->
-            <app-form-view />
-          }
-        }
-      }
-    } @else {
-      <app-empty-state
-        title="Recurso no encontrado"
-        message="No existe un schema con ese id en el registry."
-      />
-    }
-  `,
-})
-export class ResourcePage {
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
-  private readonly auth = inject(AuthService);
-  // paramMap emite síncrono (ConvertToParamMap) → requireSync evita `| undefined`.
-  private readonly params = toSignal(this.route.paramMap, { requireSync: true });
-  private readonly routeData = toSignal(this.route.data ?? of({}), { requireSync: true });
-
-  readonly schema = computed(() => {
-    const resourceId = this.routeData()['resourceId'] ?? this.params().get('id');
-    return getSchema(typeof resourceId === 'string' ? resourceId : '');
-  });
-
-  /** Vista activa: 'list' (por defecto) o 'detail' (al hacer clic en una fila con detail.enabled). */
-  readonly currentView = signal<View>('list');
-  /** Registro seleccionado para la vista de detalle. */
-  readonly selectedRecord = signal<Record<string, unknown> | null>(null);
-
-  constructor() {
-    // La ficha es ENLAZABLE: `/:id/:key` (p. ej. el «Ver Ficha» del
-    // dashboard) entra directo al detalle. Al navegar — desde una fila o con
-    // el botón atrás — la URL es la única fuente de verdad de la vista.
-    this.route.paramMap
-      .pipe(
-        map((params) => params.get('key')),
-        distinctUntilChanged(),
-        takeUntilDestroyed(),
-      )
-      .subscribe((key) => this.openFromRoute(key));
-    this.route.data
-      ?.pipe(takeUntilDestroyed())
-      .subscribe(() => this.openFromRoute(this.params().get('key')));
-  }
-
-  private openFromRoute(key: string | null): void {
-    const schema = this.schema();
-    if (!schema || schema.kind !== 'collection') return;
-
-    const requestedView = this.routeData()['viewType'];
-    if ((requestedView === 'detail' || key) && key && schema.detail?.enabled) {
-      // Si el registro ya está cargado (clic en una fila) se conserva tal
-      // cual; si llegamos por URL sólo hay clave, y DetailView trae el resto.
-      const current = this.selectedRecord();
-      if (!current || String(current[schema.keyField]) !== key) {
-        this.selectedRecord.set({ [schema.keyField]: key });
-      }
-      this.currentView.set('detail');
-    } else if (this.currentView() === 'detail') {
-      this.selectedRecord.set(null);
-      this.currentView.set('list');
-    }
-  }
-
-  /**
-   * Clic de fila. R9.9.4 · decision table: si el schema declara `select`,
-   * el contrato declarado REEMPLAZA el comportamiento local (`route` ⇒
-   * emisión al dispatcher, `inline` ⇒ selección local sin URL, `none` ⇒
-   * no-op); sin declaración, la navegación local actual sigue intacta
-   * (backward compat — R9.9 «existing routes untouched»).
-   */
-  switchToDetail(record: Record<string, unknown>): void {
-    const schema = this.schema();
-    const data = this.routeData();
-    const binding = data['select'] as SelectionBinding | undefined;
-
-    if (binding !== undefined) {
-      const key =
-        schema && record[schema.keyField] !== undefined && record[schema.keyField] !== null
-          ? String(record[schema.keyField])
-          : '';
-      if (binding.mode === 'route') {
-        const emit = data['emit'] as SelectionEmitter | undefined;
-        emit?.({
-          resource: schema?.id ?? String(data['resourceId'] ?? ''),
-          key,
-          action: binding.on,
-        });
-        return;
-      }
-      if (binding.mode === 'none') return;
-      // inline ⇒ selección local (ficha embebida), sin tocar la URL
-      this.selectedRecord.set(record);
-      this.currentView.set('detail');
-      return;
-    }
-
-    this.selectedRecord.set(record);
-    this.currentView.set('detail');
-    const k = schema ? record[schema.keyField] : undefined;
-    if (schema && k !== undefined && k !== null && String(k) !== '') {
-      void this.router.navigate(['/', schema.id, String(k)]);
-    }
-  }
-
-  switchToList(): void {
-    this.selectedRecord.set(null);
-    this.currentView.set('list');
-    const schema = this.schema();
-    if (schema && this.params().get('key')) {
-      void this.router.navigate(['/', schema.id]);
-    }
-  }
-
-  goEdit(record: Record<string, unknown>): void {
-    const schema = this.schema();
-    if (!schema) return;
-    const key = record[schema.keyField] as string | undefined;
-    if (key) {
-      void this.router.navigate(['/', schema.id, key, 'edit']);
-    }
-  }
-
-  /**
-   * Colección sin ninguna operación posible u singleton sin `update`: no hay
-   * nada que mostrar con sentido (base.md §10 «Sin permisos»).
-   *
-   * R7.5: usa policies cuando existan, fallback a permissions.
-   *
-   * Un dashboard nunca entra aquí: es un panel de sólo lectura, `ResourcePermissions`
-   * no tiene `read` y el acceso real a los datos lo decide el endpoint
-   * (A4: el cliente es interfaz, no autoridad).
-   */
-  hasNoAccess(schema: ResourceSchema): boolean {
-    // R7.5: intentar policies primero
-    if (schema.policies?.access) {
-      // Con policies, ocultar si el usuario no puede hacer NINGUNA operación
-      // relevante para el tipo de recurso
-      if (schema.kind === 'singleton') {
-        return !this.auth.canDoOperation(schema, 'update');
-      }
-      // collection: ocultar si no puede hacer list, create, update ni remove
-      return (
-        !this.auth.canDoOperation(schema, 'list') &&
-        !this.auth.canDoOperation(schema, 'create') &&
-        !this.auth.canDoOperation(schema, 'update') &&
-        !this.auth.canDoOperation(schema, 'remove')
-      );
-    }
-
-    // Fallback a permissions (legacy)
-    const permissions = schema.permissions;
-    if (!permissions || schema.kind === 'dashboard') {
-      return false;
-    }
-    if (schema.kind === 'singleton') {
-      const hasReadEndpoint = !!schema.endpoint?.get;
-      return !hasReadEndpoint && permissions.update === false;
-    }
-    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/shared/components/badge/badge.ts

@@ -1,35 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-
-export type BadgeKind = 'success' | 'danger' | 'warning' | 'info' | 'neutral';
-
-const KINDS: Record<BadgeKind, string> = {
-  success: 'bg-success text-surface',
-  danger: 'bg-danger text-surface',
-  warning: 'bg-accent/20 text-accent-text font-semibold',
-  info: 'bg-primary text-surface',
-  neutral: 'bg-neutral text-surface',
-};
-
-/**
- * Etiqueta compacta (booleanos, estados).
- *
- * El texto va con `text-surface` y no `text-white` porque el fondo lo da
- * el token y en oscuro se aclara: blanco sobre `--color-danger` oscuro
- * sería 2,8:1. `--color-surface` vale #fff en claro, así que el render
- * actual no cambia, y en oscuro el texto se vuelve oscuro sobre el tono
- * aclarado (6,4–9,2:1).
- */
-@Component({
-  selector: 'app-badge',
-  host: { '[class]': 'classes()' },
-  template: `{{ label() }}`,
-})
-export class Badge {
-  readonly label = input.required<string>();
-  readonly kind = input<BadgeKind>('neutral');
-
-  readonly classes = computed(
-    () =>
-      `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${KINDS[this.kind()]}`,
-  );
-}

package/src/lib/shared/components/button/button.ts

@@ -1,65 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-
-export type ButtonVariant = 'primary' | 'outline' | 'danger' | 'ghost';
-export type ButtonSize = 'md' | 'sm' | 'icon';
-
-const BASE =
-  'inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50';
-
-const VARIANTS: Record<ButtonVariant, string> = {
-  primary: 'bg-primary text-surface hover:bg-primary/90',
-  outline: 'border border-neutral/40 bg-surface text-neutral hover:bg-neutral/10',
-  danger: 'bg-danger text-surface hover:bg-danger/90',
-  ghost: 'text-neutral hover:bg-neutral/10',
-};
-
-/**
- * Tamaño: el padding y el tip-size viven AQUÍ, no en `BASE`. Dos botones
- * con la misma propiedad (px-4 vs px-2) los resolvería el orden del CSS
- * generado, no el código — el motivo por el que los chips del textarea
- * acabaron con `!important`.
- *
- * Mobile-first: todas arrancan en `min-h-11` (44 px, objetivo táctil de la
- * guía mobile §8.2) y en `lg` relajan al tamaño de escritorio, así el mismo
- * componente cumple la guía táctil sin engordar la UI de escritorio.
- *  - `md`   → botón de texto (Guardar, Cancelar…)
- *  - `sm`   → chips y acciones compactas (texto `xs`)
- *  - `icon` → sólo glifo, cuadrado (toolbars de filas, arrastre)
- */
-const SIZES: Record<ButtonSize, string> = {
-  md: 'px-4 py-2 text-sm min-h-11 lg:min-h-0',
-  sm: 'px-2 py-1 text-xs min-h-11 lg:min-h-0',
-  icon: 'p-1 min-h-11 min-w-11 lg:min-h-0 lg:min-w-0',
-};
-
-/**
- * Botón nativo (selector por atributo, patrón Material `button[mat-button]`):
- * conserva semántica y estilos de `<button>` y las clases del consumidor.
- */
-@Component({
-  selector: 'button[app-button]',
-  host: {
-    '[class]': 'classes()',
-    '[type]': 'type()',
-    '[disabled]': 'disabled() || loading()',
-    '[attr.aria-busy]': 'loading() || null',
-  },
-  template: `
-    @if (loading()) {
-      <span
-        class="size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
-        aria-hidden="true"
-      ></span>
-    }
-    <ng-content />
-  `,
-})
-export class Button {
-  readonly variant = input<ButtonVariant>('primary');
-  readonly size = input<ButtonSize>('md');
-  readonly type = input<'button' | 'submit'>('button');
-  readonly disabled = input(false);
-  readonly loading = input(false);
-
-  readonly classes = computed(() => `${BASE} ${VARIANTS[this.variant()]} ${SIZES[this.size()]}`);
-}