@block-auth.io/angular 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,37 @@
+
+> @block-auth.io/angular@0.1.0 build /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular
+> pnpm build:css && ng-packagr -p ng-package.json -c tsconfig.lib.json
+
+
+> @block-auth.io/angular@0.1.0 build:css /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular
+> tailwindcss -i ../ui-styles/src/input.css -c ./tailwind.config.cjs -o ./src/styles.generated.css --minify && node scripts/css-to-ts.mjs
+
+Browserslist: caniuse-lite is outdated. Please run:
+  npx update-browserslist-db@latest
+  Why you should do it regularly: https://github.com/browserslist/update-db#readme
+
+Rebuilding...
+
+Done in 642ms.
+Building Angular Package
+
+------------------------------------------------------------------------------
+Building entry point '@block-auth.io/angular'
+------------------------------------------------------------------------------
+⠋ Compiling with Angular sources in partial compilation mode.⠙ Compiling with Angular sources in partial compilation mode.
+✔ Compiling with Angular sources in partial compilation mode.
+⠋ Writing FESM and DTS bundles✔ Writing FESM and DTS bundles
+⠋ Copying assets✔ Copying assets
+⠋ Writing package manifestℹ Removing scripts section in package.json as it's considered a potential security vulnerability.
+ℹ Removing devDependencies section in package.json.
+✔ Writing package manifest
+✔ Built @block-auth.io/angular
+
+------------------------------------------------------------------------------
+Built Angular Package
+- from: /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular
+- to:   /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular/dist
+------------------------------------------------------------------------------
+
+Build at: 2026-07-20T10:48:30.441Z - Time: 2293ms
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,4 @@
+
+> @block-auth.io/angular@0.1.0 lint /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular
+> eslint src
+

package/.turbo/turbo-test.log

@@ -0,0 +1,82 @@
+
+> @block-auth.io/angular@0.1.0 pretest /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular
+> pnpm build:css
+
+
+> @block-auth.io/angular@0.1.0 build:css /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular
+> tailwindcss -i ../ui-styles/src/input.css -c ./tailwind.config.cjs -o ./src/styles.generated.css --minify && node scripts/css-to-ts.mjs
+
+Browserslist: caniuse-lite is outdated. Please run:
+  npx update-browserslist-db@latest
+  Why you should do it regularly: https://github.com/browserslist/update-db#readme
+
+Rebuilding...
+
+Done in 1931ms.
+
+> @block-auth.io/angular@0.1.0 test /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular
+> vitest run
+
+
+ RUN  v3.2.7 /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular
+
+ ✓ src/lib/components/dds/dropdown-profile-item.component.test.ts (5 tests) 123ms
+ ✓ src/lib/components/txns/internals/solicited-data-modal.component.test.ts (3 tests) 159ms
+ ✓ src/lib/components/modals/modal-overlay.component.test.ts (4 tests) 179ms
+ ✓ src/lib/primitives/dropdown-base.component.test.ts (4 tests) 292ms
+ ✓ src/lib/components/txns/internals/txn-type.component.test.ts (3 tests) 113ms
+ ✓ src/lib/primitives/btn-base.component.test.ts (3 tests) 131ms
+ ✓ src/lib/block-auth.service.test.ts (2 tests) 135ms
+ ✓ src/lib/components/txns/internals/txn-error.component.test.ts (4 tests) 147ms
+ ✓ src/lib/components/dds/dropdown-profile-btn.component.test.ts (2 tests) 163ms
+ ✓ src/lib/components/modals/modal-signin.component.test.ts (3 tests) 141ms
+ ✓ src/lib/components/modals/modal-restore.component.test.ts (4 tests) 289ms
+ ✓ src/lib/components/modals/modal-restoration-expired.component.test.ts (4 tests) 255ms
+ ✓ src/lib/components/dds/change-account.component.test.ts (8 tests) 264ms
+ ✓ src/lib/components/txns/txns-overview.component.test.ts (6 tests) 302ms
+ ✓ src/lib/components/dds/dropdown-profile.component.test.ts (5 tests) 337ms
+ ✓ src/lib/components/contents/content-signup.component.test.ts (3 tests) 344ms
+ ✓ src/lib/components/sections/login-section.component.test.ts (2 tests) 203ms
+ ✓ src/lib/components/modals/modal-signup.component.test.ts (3 tests) 399ms
+ ✓ src/lib/runtime/block-auth-runtime.directive.test.ts (4 tests) 124ms
+ ✓ src/lib/components/flow-block-auth.component.test.ts (3 tests) 444ms
+ ✓ src/lib/components/txns/internals/txn.component.test.ts (10 tests) 716ms
+ ✓ src/lib/components/btns/btn-block-auth.component.test.ts (4 tests) 288ms
+ ✓ src/lib/components/btns/btn-signin.component.test.ts (4 tests) 278ms
+ ✓ src/lib/primitives/btn-arrow-dir.component.test.ts (2 tests) 102ms
+ ✓ src/lib/__tests__/integration.test.ts (1 test) 566ms
+   ✓ integración Angular + core > conectar wallet propaga la address al estado consumido por Angular  564ms
+ ✓ src/lib/primitives/horizontal-loader.component.test.ts (2 tests) 117ms
+ ✓ src/lib/primitives/lifetime-slider-base.component.test.ts (5 tests) 645ms
+ ✓ src/lib/components/sections/internals/selected-button.component.test.ts (1 test) 131ms
+ ✓ src/lib/teleport-body.directive.test.ts (2 tests) 141ms
+ ✓ src/lib/primitives/input-base.component.test.ts (2 tests) 101ms
+ ✓ src/lib/provide-block-auth.test.ts (3 tests) 128ms
+ ✓ src/lib/primitives/icon-base.component.test.ts (2 tests) 82ms
+ ✓ src/lib/icons/icons.test.ts (17 tests) 292ms
+ ✓ src/lib/primitives/progressbar.component.test.ts (2 tests) 174ms
+ ✓ src/lib/inject-store.test.ts (1 test) 56ms
+ ✓ src/lib/components/btns/btn-base-provider.component.test.ts (1 test) 212ms
+ ✓ src/lib/components/sections/footer-section.component.test.ts (1 test) 90ms
+ ✓ src/lib/primitives/oval-spinner.component.test.ts (1 test) 71ms
+ ✓ src/lib/primitives/img-loader.component.test.ts (1 test) 69ms
+ ✓ src/lib/primitives/divider-base.component.test.ts (1 test) 60ms
+ ✓ src/lib/primitives/dropdown-arrow.component.test.ts (1 test) 67ms
+ ✓ src/lib/primitives/arrow-icon.component.test.ts (1 test) 53ms
+ ✓ src/lib/components/txns/internals/permissions-required-modal.component.test.ts (1 test) 66ms
+ ✓ src/lib/components/contents/content-signin.component.test.ts (2 tests) 65ms
+ ✓ src/lib/components/sections/internals/providers-filters.component.test.ts (1 test) 93ms
+ ✓ src/lib/components/sections/internals/providers-buttons.component.test.ts (1 test) 108ms
+ ✓ src/lib/components/btns/btn-google-base.component.test.ts (1 test) 66ms
+ ✓ src/lib/components/btns/btn-gmail.component.test.ts (1 test) 104ms
+ ✓ src/lib/components/btns/btn-metamask.component.test.ts (1 test) 81ms
+ ✓ src/lib/components/btns/btn-wallet-connect.component.test.ts (1 test) 84ms
+ ✓ src/lib/components/btns/btn-phantom.component.test.ts (1 test) 93ms
+ ✓ src/lib/components/sections/providers-section.component.test.ts (1 test) 124ms
+ ✓ src/lib/components/btns/btn-microsoft.component.test.ts (1 test) 104ms
+
+ Test Files  53 passed (53)
+      Tests  152 passed (152)
+   Start at  13:00:23
+   Duration  8.03s (transform 9.20s, setup 34.06s, collect 64.46s, tests 9.97s, environment 20.36s, prepare 27.10s)
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,4 @@
+
+> @block-auth.io/angular@0.1.0 typecheck /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular
+> tsc -p tsconfig.lib.json --noEmit
+

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @block-auth.io/angular
+
+## 0.1.1
+
+### Patch Changes
+
+- freamwork change
+- Updated dependencies
+  - @block-auth.io/ui-styles@1.0.0
+  - @block-auth.io/core@1.0.0

package/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist",
+  "lib": { "entryFile": "src/public-api.ts" },
+  "allowedNonPeerDependencies": ["@block-auth.io/core", "@block-auth.io/ui-styles", "nanostores", "tslib"]
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@block-auth.io/angular",
+  "version": "0.1.0",
+  "scripts": {
+    "build:css": "tailwindcss -i ../ui-styles/src/input.css -c ./tailwind.config.cjs -o ./src/styles.generated.css --minify && node scripts/css-to-ts.mjs",
+    "build": "pnpm build:css && ng-packagr -p ng-package.json -c tsconfig.lib.json",
+    "dev": "pnpm build:css && ng-packagr -p ng-package.json -c tsconfig.lib.json --watch",
+    "pretest": "pnpm build:css",
+    "test": "vitest run",
+    "pretypecheck": "pnpm build:css",
+    "typecheck": "tsc -p tsconfig.lib.json --noEmit",
+    "lint": "eslint src"
+  },
+  "dependencies": {
+    "@block-auth.io/core": "workspace:*",
+    "@block-auth.io/ui-styles": "workspace:*",
+    "nanostores": "^0.10.0",
+    "tslib": "^2.6.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20.0.0",
+    "@angular/common": ">=20.0.0"
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^2.6.0",
+    "@angular/build": "^20.3.0",
+    "@angular/common": "^20.3.0",
+    "@angular/compiler": "^20.3.0",
+    "@angular/compiler-cli": "^20.3.0",
+    "@angular/core": "^20.3.0",
+    "@angular/platform-browser": "^20.3.0",
+    "@angular/platform-browser-dynamic": "^20.3.0",
+    "@angular/router": "^20.3.0",
+    "@testing-library/angular": "^18.1.0",
+    "@testing-library/dom": "^10.0.0",
+    "@wagmi/connectors": "^8.0.0",
+    "@wagmi/core": "^3.5.0",
+    "jsdom": "^24.0.0",
+    "ng-packagr": "^20.3.0",
+    "rxjs": "^7.8.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "~5.8.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.2.0",
+    "zone.js": "~0.15.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scripts/css-to-ts.mjs

@@ -0,0 +1,14 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const generated = readFileSync(resolve(here, '../src/styles.generated.css'), 'utf8');
+const libStyles = readFileSync(resolve(here, '../../ui-styles/src/lib-styles.css'), 'utf8');
+const transitions = readFileSync(resolve(here, '../src/lib/transitions.css'), 'utf8');
+
+const css = [generated, libStyles, transitions].join('\n');
+writeFileSync(
+  resolve(here, '../src/styles.generated.ts'),
+  `// GENERADO por scripts/css-to-ts.mjs — no editar a mano.\nexport const BLOCKAUTH_CSS: string = ${JSON.stringify(css)};\n`,
+);

package/src/lib/__tests__/integration.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component, inject } from '@angular/core';
+import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
+
+vi.mock('@wagmi/core', () => ({
+  createConfig: vi.fn(() => ({ connectors: [] })),
+  connect: vi.fn(async () => ({ accounts: ['0xabc'], chainId: 1 })),
+  disconnect: vi.fn(), getAccount: vi.fn(() => ({ address: '0xabc' })),
+  signMessage: vi.fn(async () => '0xsig'),
+  watchAccount: vi.fn(() => () => undefined), http: vi.fn(),
+}));
+vi.mock('@wagmi/connectors', () => ({
+  injected: vi.fn(() => ({ id: 'injected' })), walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
+}));
+
+import { provideBlockAuth } from '../provide-block-auth';
+import { BlockAuthService } from '../block-auth.service';
+import { BtnMetamaskComponent } from '../components/btns/btn-metamask.component';
+
+@Component({
+  selector: 'ba-host',
+  standalone: true,
+  imports: [BtnMetamaskComponent],
+  template: `
+    <ba-btn-metamask />
+    <span data-testid="addr">{{ ba.wallet().address ?? 'none' }}</span>
+  `,
+})
+class HostComponent {
+  ba = inject(BlockAuthService);
+}
+
+describe('integración Angular + core', () => {
+  it('conectar wallet propaga la address al estado consumido por Angular', async () => {
+    const { detectChanges } = await render(HostComponent, {
+      providers: [provideBlockAuth({ apiKey: 'k', apiSecret: 's', walletConnectProjectId: 'pid' })],
+    });
+    expect(screen.getByTestId('addr').textContent).toBe('none');
+    fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => {
+      detectChanges();
+      expect(screen.getByTestId('addr').textContent).toBe('0xabc');
+    });
+  });
+});

package/src/lib/block-auth.service.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { Component, inject } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { render, screen } from '@testing-library/angular';
+import { resetUi, resetWallet, resetUser, closeAllModals, setLocale } from '@block-auth.io/core';
+
+vi.mock('@wagmi/core', () => ({
+  createConfig: vi.fn(() => ({ connectors: [] })),
+  connect: vi.fn(), disconnect: vi.fn(), getAccount: vi.fn(() => ({})),
+  signMessage: vi.fn(), watchAccount: vi.fn(() => () => undefined), http: vi.fn(),
+}));
+vi.mock('@wagmi/connectors', () => ({
+  injected: vi.fn(() => ({ id: 'injected' })), walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
+}));
+
+import { provideBlockAuth } from './provide-block-auth';
+import { BlockAuthService } from './block-auth.service';
+
+@Component({
+  selector: 'ba-probe', standalone: true,
+  template: `<span data-testid="probe">{{ ba.wallet().address ?? 'none' }}|{{ ba.openModals().join(',') }}</span>`,
+})
+class ProbeComponent { ba = inject(BlockAuthService); }
+
+describe('BlockAuthService', () => {
+  beforeEach(() => {
+    resetUi();
+    resetWallet();
+    resetUser();
+    closeAllModals();
+    setLocale('en');
+  });
+
+  it('expone signals reactivos del estado del core y las acciones', async () => {
+    const { detectChanges } = await render(ProbeComponent, {
+      providers: [provideBlockAuth({ apiKey: 'k', apiSecret: 's', walletConnectProjectId: 'pid' })],
+    });
+    expect(screen.getByTestId('probe').textContent).toBe('none|');
+
+    const svc = TestBed.inject(BlockAuthService);
+    svc.client.state.$wallet.setKey('address', '0xabc');
+    svc.client.openModal('signup');
+    detectChanges();
+    expect(screen.getByTestId('probe').textContent).toBe('0xabc|signup');
+
+    expect(typeof svc.logout).toBe('function');
+    expect(typeof svc.t('edit')).toBe('string');
+    expect(svc.t('edit')).toBe('Edit');
+  });
+
+  it('expone user/roles derivados de $user y helpers de roles', async () => {
+    await render(ProbeComponent, {
+      providers: [provideBlockAuth({ apiKey: 'k', apiSecret: 's', walletConnectProjectId: 'pid' })],
+    });
+    const svc = TestBed.inject(BlockAuthService);
+
+    expect(svc.user()).toBeNull();
+    expect(svc.isLoadingUser()).toBe(false);
+    expect(svc.roles()).toEqual([]);
+    expect(svc.roleNames()).toEqual([]);
+    expect(svc.roleSlugs()).toEqual([]);
+    expect(svc.hasRole('admin')).toBe(false);
+    expect(svc.hasAnyRole(['admin'])).toBe(false);
+    expect(svc.hasAnyRoleBySlug(['admin'])).toBe(false);
+
+    const refreshed = await svc.refreshUserProfile();
+    expect(refreshed).toBeNull();
+  });
+});

package/src/lib/block-auth.service.ts

@@ -0,0 +1,81 @@
+import { Injectable, computed, type Signal } from '@angular/core';
+import {
+  $locale,
+  $user,
+  setLocale,
+  t as translate,
+  getUserRoles,
+  getUserRoleNames,
+  getUserRoleSlugs,
+  hasRole as hasRoleForUser,
+  hasRoleBySlug as hasRoleBySlugForUser,
+  hasAnyRole as hasAnyRoleForUser,
+  hasAnyRoleBySlug as hasAnyRoleBySlugForUser,
+  fetchUserProfile,
+  type BlockAuthClient,
+  type BlockAuthUserProfile,
+  type BlockAuthUserRole,
+  type Locale,
+  type TextKey,
+} from '@block-auth.io/core';
+import { injectBlockAuthClient } from './provide-block-auth';
+import { injectStore } from './inject-store';
+
+/**
+ * Facade de Angular para el BlockAuthClient (equivalente al conjunto de
+ * hooks/composables useBlockAuthWs/Ui/Wallet/Modal + useLocale +
+ * useBlockAuthUser de React/Vue). Se inyecta una única vez por raíz
+ * (`providedIn: 'root'`) y expone el estado del core como Signals de solo
+ * lectura, más las acciones del client para consumir directamente en
+ * templates standalone.
+ */
+@Injectable({ providedIn: 'root' })
+export class BlockAuthService {
+  readonly client: BlockAuthClient = injectBlockAuthClient();
+
+  // Estado (equivalentes de useBlockAuthWs/Ui/Wallet/Modal)
+  readonly ws = injectStore(this.client.state.$ws);
+  readonly ui = injectStore(this.client.state.$ui);
+  readonly wallet = injectStore(this.client.state.$wallet);
+  readonly openModals = injectStore(this.client.state.$openModals);
+
+  // i18n (useLocale)
+  readonly locale = injectStore($locale);
+  readonly setLocale = setLocale;
+  t = (key: TextKey): string => translate(key, this.locale());
+
+  // Usuario + roles (useBlockAuthUser)
+  private readonly userState = injectStore($user);
+  readonly user: Signal<BlockAuthUserProfile | null> = computed(() => this.userState().user);
+  readonly isLoadingUser: Signal<boolean> = computed(() => this.userState().isLoadingUser);
+  readonly roles: Signal<BlockAuthUserRole[]> = computed(() => getUserRoles(this.user()));
+  readonly roleNames: Signal<string[]> = computed(() => getUserRoleNames(this.user()));
+  readonly roleSlugs: Signal<string[]> = computed(() => getUserRoleSlugs(this.user()));
+  hasRole = (roleName: string): boolean => hasRoleForUser(this.user(), roleName);
+  hasRoleBySlug = (slug: string): boolean => hasRoleBySlugForUser(this.user(), slug);
+  hasAnyRole = (names: string[] = []): boolean => hasAnyRoleForUser(this.user(), names);
+  hasAnyRoleBySlug = (slugs: string[] = []): boolean => hasAnyRoleBySlugForUser(this.user(), slugs);
+  async refreshUserProfile(): Promise<BlockAuthUserProfile | null> {
+    const provider = this.client.provider;
+    const wscUser = provider?.wsc?.user as { did?: string; address?: string } | undefined;
+    const u = this.user() as { did?: string; address?: string } | null;
+    const address = u?.did || u?.address || wscUser?.did || wscUser?.address || null;
+    if (!address) return null;
+    return fetchUserProfile(provider, address);
+  }
+
+  // Acciones (passthrough del client, para templates)
+  web3Signup = (slug: string) => this.client.web3.signup(slug);
+  signupGoogle = (mode?: 'auth-code' | 'implicit') => this.client.oauth.signupGoogle(mode);
+  signupMicrosoft = () => this.client.oauth.signupMicrosoft();
+  requestSignin = () => this.client.requestSignin();
+  cancelTxns = () => this.client.cancelTxns();
+  logout = () => this.client.logout();
+  // `openModal`/`closeModal` son funciones standalone del core
+  // (`state.openModal`/`state.closeModal`), no métodos ligados a `client`:
+  // se asignan directamente, sin `.bind(this.client)`.
+  openModal = this.client.openModal;
+  closeModal = this.client.closeModal;
+}
+
+export type { Locale, TextKey };

package/src/lib/components/btns/btn-base-provider.component.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { BtnBaseProviderComponent } from './btn-base-provider.component';
+
+describe('BtnBaseProvider', () => {
+  it('renderiza el texto capitalizado y emite providerClicked al hacer click', async () => {
+    const onProviderClicked = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [BtnBaseProviderComponent],
+      template: `<ba-btn-base-provider text="phantom" (providerClicked)="onClick()" />`,
+    })
+    class HostComponent {
+      onClick = onProviderClicked;
+    }
+    await render(HostComponent);
+    expect(screen.getByText('Phantom')).toBeTruthy();
+    await fireEvent.click(screen.getByRole('button'));
+    expect(onProviderClicked).toHaveBeenCalled();
+  });
+});

package/src/lib/components/btns/btn-base-provider.component.ts

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+
+/**
+ * Botón presentacional puro (sin client core), usado como bloque base por los
+ * paneles/pickers de selección de provider.
+ */
+@Component({
+  selector: 'ba-btn-base-provider',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button [class]="btnClass()" (click)="onClick($event)">
+      <ng-content select="[slot=icon]" />
+      @if (text() && text() !== '') {
+        <p [class]="'bas-m-0 bas-text-gray-700 ' + textClass()">{{ capitalizedText() }}</p>
+      }
+    </button>
+  `,
+})
+export class BtnBaseProviderComponent {
+  borderClassNames = input('bas-border-2 bas-border-slate-300');
+  sizeClassNames = input('bas-h-16 bas-w-full');
+  text = input('');
+  isEditable = input(false);
+  device = input<'desktop' | 'phone'>('desktop');
+
+  providerClicked = output<void>();
+
+  onClick(e: MouseEvent): void {
+    e.preventDefault();
+    this.providerClicked.emit();
+  }
+
+  private innerClass = computed(() => {
+    if (!this.isEditable()) return 'bas-gap-1 bas-px-1 sm1:bas-gap-4 sm1:bas-px-2';
+    if (this.device() === 'phone') return 'bas-gap-1 bas-px-1';
+    return 'bas-gap-4 bas-px-2';
+  });
+  textClass = computed(() => {
+    if (!this.isEditable()) return 'bas-text-base sm1:bas-text-lg';
+    if (this.device() === 'phone') return 'bas-text-base';
+    return 'bas-text-lg';
+  });
+  capitalizedText = computed(() => {
+    const t = this.text();
+    return t ? t.charAt(0).toUpperCase() + t.slice(1) : t;
+  });
+  btnClass = computed(
+    () =>
+      `bal-ba-outline-none bal-ba-transition-2 bas-box-border bas-flex bas-cursor-pointer
+      bas-items-center bas-rounded-lg bas-border-solid bas-bg-transparent bas-py-0
+      ${this.borderClassNames()} ${this.innerClass()} ${this.sizeClassNames()}
+      ${this.text() && this.text() !== '' ? 'bas-flex-row' : 'bas-justify-center'}`,
+  );
+}

package/src/lib/components/btns/btn-block-auth.component.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { map } from 'nanostores';
+import {
+  resetExtension,
+  setExtensionInstalled,
+  setExtensionIsUser,
+  setExtensionIsUserActive,
+  setExtensionIsLocked,
+} from '@block-auth.io/core';
+import { BtnBlockAuthComponent } from './btn-block-auth.component';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+function makeClient() {
+  const connectBlockAuth = vi.fn();
+  const $ui = map({ isSdkSignedIn: false, uiConfig: null });
+  const $ws = map({ ready: false });
+  const client = { connectBlockAuth, state: { $ui, $ws } } as any;
+  return { client, connectBlockAuth, $ui, $ws };
+}
+
+function ready(c: ReturnType<typeof makeClient>): void {
+  c.$ws.setKey('ready', true);
+  c.$ui.setKey('isSdkSignedIn', true);
+}
+
+describe('BtnBlockAuth', () => {
+  beforeEach(() => resetExtension());
+
+  it('renderiza con el id de provider y es clickable', async () => {
+    const { client } = makeClient();
+    await render(BtnBlockAuthComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    expect(screen.getByRole('button').id).toBe('btn-provider-blockauth');
+  });
+
+  it('abre la Chrome Web Store cuando la extensión no está instalada', async () => {
+    const c = makeClient();
+    const { client, connectBlockAuth } = c;
+    ready(c);
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    await render(BtnBlockAuthComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    setExtensionInstalled(false);
+    await fireEvent.click(screen.getByRole('button'));
+    expect(openSpy).toHaveBeenCalledWith(expect.stringContaining('chromewebstore'), '_blank');
+    expect(connectBlockAuth).not.toHaveBeenCalled();
+    openSpy.mockRestore();
+  });
+
+  it('despacha ext:open cuando está instalada pero el usuario aún no está activo', async () => {
+    const c = makeClient();
+    const { client, connectBlockAuth } = c;
+    ready(c);
+    const dispatchSpy = vi.spyOn(document, 'dispatchEvent');
+    await render(BtnBlockAuthComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    setExtensionInstalled(true);
+    setExtensionIsUser(true);
+    setExtensionIsUserActive(false);
+    await fireEvent.click(screen.getByRole('button'));
+    const dispatchedExtOpen = dispatchSpy.mock.calls.some(
+      (c) => (c[0] as Event).type === 'ext:open',
+    );
+    expect(dispatchedExtOpen).toBe(true);
+    expect(connectBlockAuth).not.toHaveBeenCalled();
+    dispatchSpy.mockRestore();
+  });
+
+  it('llama client.connectBlockAuth cuando está lista, activa y no conectada', async () => {
+    const c = makeClient();
+    const { client, connectBlockAuth } = c;
+    ready(c);
+    await render(BtnBlockAuthComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    setExtensionInstalled(true);
+    setExtensionIsUser(true);
+    setExtensionIsUserActive(true);
+    setExtensionIsLocked(false);
+    await fireEvent.click(screen.getByRole('button'));
+    expect(connectBlockAuth).toHaveBeenCalledOnce();
+  });
+});