@block-auth.io/angular 0.1.0

package/src/lib/components/dds/dropdown-profile.component.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { DropdownProfileComponent } from './dropdown-profile.component';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+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' })),
+}));
+
+// Port de packages/react/src/components/dds/DropdownProfile.test.tsx (mapa:
+// packages/vue/.../DropdownProfile.test.ts). Client falso con `logout` spy y
+// stores nanostores; serviceName 'blockauth' para textos en inglés.
+describe('DropdownProfile', () => {
+  function makeClient(logout = vi.fn(async () => {})) {
+    return {
+      logout,
+      web3: { signup: vi.fn() },
+      oauth: { signupGoogle: vi.fn(), signupMicrosoft: vi.fn() },
+      connectBlockAuth: vi.fn(),
+      state: { $ui: map({ serviceName: 'blockauth' }), $ws: map({}) },
+    } as any;
+  }
+
+  it('"Disconnect" llama a client.logout() ANTES del prop onLogout (orden critico)', async () => {
+    const callOrder: string[] = [];
+    const client = makeClient(vi.fn(async () => {
+      callOrder.push('logout');
+    }));
+    const onLogout = vi.fn(async () => {
+      callOrder.push('onLogout');
+    });
+    @Component({
+      standalone: true,
+      imports: [DropdownProfileComponent],
+      template: `<ba-dropdown-profile [onLogout]="ol" />`,
+    })
+    class Host {
+      ol = onLogout;
+    }
+    await render(Host, { providers: [provideBlockAuthClientForTest(client)] });
+
+    await fireEvent.click(screen.getByTestId('dropdown-profile-btn'));
+    await fireEvent.click(screen.getByText('Disconnect'));
+
+    await waitFor(() => expect(onLogout).toHaveBeenCalled());
+    expect(client.logout).toHaveBeenCalled();
+    expect(callOrder).toEqual(['logout', 'onLogout']);
+  });
+
+  it('abre y cierra el panel al pulsar el boton de perfil', async () => {
+    await render(DropdownProfileComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    // Panel cerrado inicialmente: "Disconnect" no está en el DOM.
+    expect(screen.queryByText('Disconnect')).toBeNull();
+    await fireEvent.click(screen.getByTestId('dropdown-profile-btn'));
+    expect(screen.getByText('Disconnect')).toBeTruthy();
+  });
+
+  it('click-outside cierra el panel; click en el propio boton de perfil no cuenta como fuera', async () => {
+    await render(DropdownProfileComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    await fireEvent.click(screen.getByTestId('dropdown-profile-btn'));
+    expect(screen.getByText('Disconnect')).toBeTruthy();
+
+    const outside = document.createElement('div');
+    document.body.appendChild(outside);
+    await fireEvent.click(outside);
+    await waitFor(() => expect(screen.queryByText('Disconnect')).toBeNull());
+    document.body.removeChild(outside);
+  });
+
+  it('renderiza el item por defecto "My profile" cuando no se pasan additionalDropdownItems', async () => {
+    await render(DropdownProfileComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    await fireEvent.click(screen.getByTestId('dropdown-profile-btn'));
+    expect(screen.getByText('My profile')).toBeTruthy();
+  });
+
+  // Regresión: el contenedor raíz debe encogerse a su contenido (bas-w-fit) para
+  // que el panel (bas-w-full) tome el ancho del botón y no se estire al ancho del
+  // contenedor de la app. Igual que React/Vue.
+  it('el contenedor raíz usa bas-w-fit (panel compacto, no a ancho completo)', async () => {
+    await render(DropdownProfileComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(screen.getByTestId('dropdown-profile').className).toContain('bas-w-fit');
+  });
+});

package/src/lib/components/dds/dropdown-profile.component.ts

@@ -0,0 +1,258 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  HostListener,
+  Type,
+  computed,
+  inject,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { $locale } from '@block-auth.io/core';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+import { CgProfileComponent, AiOutlineDisconnectComponent } from '../../icons';
+import { ChangeAccountComponent } from './change-account.component';
+import { DropdownProfileItemComponent } from './dropdown-profile-item.component';
+import { DropdownProfileBtnComponent } from './dropdown-profile-btn.component';
+
+// Decisiones de diseño:
+// - `onLogout`/`onNavigate` son INPUTS DE FUNCIÓN (no outputs): `onLogout` se
+//   hace `await` DESPUÉS de `client.logout()` (orden crítico, un output no se
+//   puede "esperar"); `onNavigate` es un hook de host con rama alternativa
+//   (`window.location.href`) cuando es null. El resto de callbacks son outputs
+//   (`clicked`/`changeAccountClicked`).
+// - Refs `profileBtnEl`/`dropdownPanelEl` (viewChild) sobre `<div>`s propios de
+//   este componente para el click-outside.
+// - La animación de apertura es `@if` + clase `ba-pop`. Al abrir, un
+//   `setTimeout(200)` marca `isAnimationCompleted` (habilita `overflow-y-auto`).
+// - `additionalDropdownItems[].firstIcon` es un tipo de componente
+//   (`Type<unknown>`) renderizado por `dropdown-profile-item` vía NgComponentOutlet.
+// - "Disconnect": `client.logout()` PRIMERO y `onLogout()` DESPUÉS (verificado
+//   en el test).
+export interface DropdownProfileAdditionalItem {
+  onClick: () => void;
+  /** String plano o mapa de locale (`{ es, en }`). */
+  text: string | Record<string, string>;
+  firstIcon?: Type<unknown> | null;
+  disabled?: boolean;
+}
+
+@Component({
+  selector: 'ba-dropdown-profile',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [DropdownProfileBtnComponent, DropdownProfileItemComponent, ChangeAccountComponent],
+  template: `
+    <div
+      data-testid="dropdown-profile"
+      class="bas-flex bas-w-fit bas-flex-col bas-items-center bas-justify-start"
+      [style.height.px]="getHeight(dropdownBtnSize())"
+    >
+      <div #profileBtnEl>
+        <ba-dropdown-profile-btn
+          [serviceName]="serviceName()"
+          [dropdownBtnBgClassNames]="dropdownBtnBgClassNames()"
+          [dropdownBtnSize]="dropdownBtnSize()"
+          [dropdownBtnBorderClassNames]="dropdownBtnBorderClassNames()"
+          [dropdownBtnTextColorClassNames]="dropdownBtnTextColorClassNames()"
+          [height]="getHeight(dropdownBtnSize())"
+          [isProfileOpen]="isProfileOpen()"
+          (clicked)="onProfileClicked()"
+        />
+      </div>
+      @if (isProfileOpen()) {
+        <div
+          #dropdownPanelEl
+          class="ba-pop bal-ba-transition-2 bal-ba-shadow-base bal-ba-hover-shadow-md bas-z-50 bas-mt-2 bas-box-border bas-w-full bas-overflow-hidden bas-rounded-md bas-border bas-border-solid bas-border-[var(--bal-primary-100)] bas-bg-white hover:bas-border-[var(--bal-primary-300)]"
+          [style.minHeight.px]="dropdownHeight() ?? totalDropdownItems() * 36 + 2"
+        >
+          <ul
+            [class]="
+              'bas-flex bas-h-full bas-w-full bas-box-border bas-flex-col bas-items-center bas-justify-start bas-text-base bas-text-[var(--bal-primary-700)] bal-ba-transition-2 hover:bas-text-[var(--bal-primary-900)] bal-ba-scroll-base bas-p-0 bas-m-0 ' +
+              (isAnimationCompleted() && isProfileOpen() ? 'bas-overflow-y-auto' : '')
+            "
+            [style.maxHeight.px]="dropdownHeight() ?? totalDropdownItems() * 36"
+          >
+            <!-- ADDITIONAL ITEMS -->
+            @for (item of itemsToShow(); track $index; let index = $index) {
+              <ba-dropdown-profile-item
+                [id]="'ba-ddi-additional-item-' + index"
+                [text]="localized(item.text, '')"
+                [firstIcon]="item.firstIcon ?? null"
+                [isTopBorder]="index !== 0"
+                [disabled]="item.disabled ?? false"
+                (clicked)="item.onClick()"
+              />
+            }
+            <!-- CHANGE ACCOUNT -->
+            <ba-change-account
+              [serviceName]="serviceName()"
+              [text]="localized(btnsTexts().changeAccount, 'Change account')"
+              [disabled]="disabled()"
+              [isTopBorder]="isWeb3Service() || itemsToShow().length > 0"
+              (changeAccountClicked)="onChangeAccountClicked()"
+            />
+            <!-- DISCONNECT -->
+            <ba-dropdown-profile-item
+              id="ba-dd8-disconnect-0"
+              [text]="localized(btnsTexts().disconnect, 'Disconnect')"
+              [firstIcon]="disconnectIcon"
+              [isTopBorder]="true"
+              (clicked)="onDisconnectClicked()"
+            />
+          </ul>
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .ba-pop {
+        animation: ba-pop-in 0.15s ease;
+        transform-origin: top right;
+      }
+      @keyframes ba-pop-in {
+        from { opacity: 0; transform: scale(0.95); }
+        to { opacity: 1; transform: scale(1); }
+      }
+    `,
+  ],
+})
+export class DropdownProfileComponent {
+  onLogout = input<() => void | Promise<void>>(async () => {});
+  /** Host-app navigation for "My profile" when already on the identity origin. */
+  onNavigate = input<((path: string) => void) | null>(null);
+  isInsideModal = input(false);
+  /** Modal container that scopes the click-outside listener when `isInsideModal`. */
+  container = input<HTMLElement | null>(null);
+  /** Disables the "Change account" row (default: disabled — not functional yet). */
+  disabled = input(true);
+  dropdownBtnSize = input<'xs' | 'small' | 'base' | 'large'>('base');
+  dropdownBtnBgClassNames = input('bas-bg-transparent');
+  dropdownBtnTextColorClassNames = input(
+    'bas-text-[var(--bal-primary-700)] group-hover:bas-text-[var(--bal-primary-900)]',
+  );
+  dropdownBtnBorderClassNames = input<string | undefined>(undefined);
+  dropdownHeight = input<number | null>(null);
+  additionalDropdownItems = input<DropdownProfileAdditionalItem[] | null>(null);
+
+  private readonly profileBtnEl = viewChild<ElementRef<HTMLDivElement>>('profileBtnEl');
+  private readonly dropdownPanelEl = viewChild<ElementRef<HTMLDivElement>>('dropdownPanelEl');
+
+  private readonly client = injectBlockAuthClient();
+  private readonly ui = injectStore(this.client.state.$ui);
+  private readonly locale = injectStore($locale);
+
+  protected readonly disconnectIcon = AiOutlineDisconnectComponent;
+  protected readonly isProfileOpen = signal(false);
+  protected readonly isAnimationCompleted = signal(false);
+  private animTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  protected readonly serviceName = computed(() => this.ui().serviceName ?? 'blockauth');
+
+  private readonly uiConfigContent = computed(
+    () =>
+      this.ui().uiConfig as
+        | { config?: { content?: { btns?: Record<string, Record<string, string>> } } }
+        | null,
+  );
+  private readonly isUiConfig = computed(
+    () => this.uiConfigContent() != null && Object.keys(this.uiConfigContent()!).length > 0,
+  );
+  protected readonly btnsTexts = computed(
+    () =>
+      (this.isUiConfig() && this.uiConfigContent()?.config?.content?.btns) || {
+        disconnect: { es: 'Desconectar', en: 'Disconnect' },
+        changeAccount: { es: 'Cambiar cuenta', en: 'Change account' },
+      },
+  );
+
+  private readonly defaultAdditionalDropdownItems = computed<DropdownProfileAdditionalItem[]>(() => [
+    {
+      onClick: () => {
+        const url = 'https://identity.block-auth.io';
+        const identityOrigin = 'https://identity.block-auth.io';
+        if (typeof window === 'undefined') return;
+        if (window.location.origin === identityOrigin) {
+          const navigate = this.onNavigate();
+          if (navigate) navigate('/user/profile');
+          else window.location.href = url;
+        } else {
+          window.open(url, '_blank');
+        }
+      },
+      text: { es: 'Mi perfil', en: 'My profile' },
+      firstIcon: CgProfileComponent,
+      disabled: false,
+    },
+  ]);
+
+  protected readonly itemsToShow = computed(
+    () => this.additionalDropdownItems() ?? this.defaultAdditionalDropdownItems(),
+  );
+  private readonly web2Services = ['google', 'microsoft'];
+  protected readonly isWeb3Service = computed(() => !this.web2Services.includes(this.serviceName()));
+  protected readonly totalDropdownItems = computed(() => 2 + this.itemsToShow().length);
+
+  private readonly heightBySize: Record<string, number> = { xs: 46, small: 52, base: 58, large: 64 };
+
+  constructor() {
+    inject(DestroyRef).onDestroy(() => {
+      if (this.animTimeout) clearTimeout(this.animTimeout);
+    });
+  }
+
+  getHeight(size: string): number {
+    return this.heightBySize[size];
+  }
+
+  localized(text: string | Record<string, string> | undefined, fallback: string): string {
+    if (!text) return fallback;
+    if (typeof text === 'string') return text;
+    return text[this.locale()] ?? text['en'] ?? fallback;
+  }
+
+  onProfileClicked(): void {
+    this.isAnimationCompleted.set(false);
+    const next = !this.isProfileOpen();
+    this.isProfileOpen.set(next);
+    if (this.animTimeout) clearTimeout(this.animTimeout);
+    if (next) this.animTimeout = setTimeout(() => this.isAnimationCompleted.set(true), 200);
+  }
+
+  async onDisconnectClicked(): Promise<void> {
+    this.isAnimationCompleted.set(false);
+    this.isProfileOpen.set(false);
+    // Clear BlockAuth state first, then let the host app tear down — otherwise
+    // onLogout could read stale storage. Order is critical (verified in test).
+    await this.client.logout();
+    await this.onLogout()();
+  }
+
+  onChangeAccountClicked(): void {
+    if (this.disabled()) return;
+    this.isAnimationCompleted.set(false);
+    this.isProfileOpen.set(false);
+  }
+
+  // Click-outside. Con @HostListener el listener vive siempre en document; para
+  // respetar la
+  // semántica "escuchar sobre `container` cuando `isInsideModal && container`"
+  // se ignora todo click fuera de ese contenedor. Un click sobre el propio
+  // botón de perfil nunca cuenta como "fuera". "Fuera" se calcula vs el panel.
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(e: MouseEvent): void {
+    if (!this.isProfileOpen()) return;
+    const target = e.target as Node;
+    const container = this.container();
+    if (this.isInsideModal() && container && !container.contains(target)) return;
+    const btnEl = this.profileBtnEl()?.nativeElement;
+    if (btnEl && btnEl.contains(target)) return;
+    const panel = this.dropdownPanelEl()?.nativeElement;
+    if (panel && !panel.contains(target)) this.isProfileOpen.set(false);
+  }
+}

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

@@ -0,0 +1,93 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
+import { map, atom } from 'nanostores';
+
+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 { FlowBlockAuthComponent } from './flow-block-auth.component';
+import { provideBlockAuthClientForTest } from '../testing';
+
+// Port de packages/react/src/components/FlowBlockAuth.test.tsx. El `initializeSdk`
+// se pone en `false` donde no se quiere arrancar el runtime real (el arranque
+// del runtime lo cubre block-auth-runtime.directive.test.ts). Client falso con
+// stores nanostores y spies de acción.
+function makeClient(ui: Record<string, unknown> = {}) {
+  return {
+    requestSignin: vi.fn(),
+    openModal: vi.fn(),
+    closeModal: vi.fn(),
+    cancelTxns: vi.fn(),
+    logout: vi.fn(async () => {}),
+    web3: { signup: vi.fn() },
+    oauth: { signupGoogle: vi.fn(), signupMicrosoft: vi.fn() },
+    state: {
+      $ws: map<Record<string, unknown>>({ ready: false }),
+      $ui: map<Record<string, unknown>>({ ...ui }),
+      $wallet: map({}),
+      $openModals: atom<string[]>([]),
+    },
+  } as any;
+}
+
+describe('FlowBlockAuth', () => {
+  it('renderiza el contenedor del orquestador sin romperse', async () => {
+    @Component({
+      standalone: true,
+      imports: [FlowBlockAuthComponent],
+      template: `<ba-flow-block-auth [initializeSdk]="false" />`,
+    })
+    class Host {}
+    await render(Host, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    expect(screen.getByTestId('flow-blockauth')).toBeTruthy();
+  });
+
+  it('no se rompe cuando initializeSdk esta desactivado', async () => {
+    @Component({
+      standalone: true,
+      imports: [FlowBlockAuthComponent],
+      template: `<ba-flow-block-auth [initializeSdk]="false" />`,
+    })
+    class Host {}
+    await render(Host, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    expect(screen.getByTestId('flow-blockauth')).toBeTruthy();
+  });
+
+  it('en estado log-in, click en el boton de estado llama a client.requestSignin', async () => {
+    const client = makeClient({
+      isSdkSignedIn: true,
+      isServiceConnected: true,
+      isSigned: false,
+      isSignedFirstCheck: true,
+      isOnDeletion: false,
+      serviceName: 'blockauth',
+      uiConfig: { config: { content: { btns: { logIn: { en: 'Log in', es: 'Iniciar sesion' } } } } },
+    });
+    client.state.$ws.setKey('ready', true);
+
+    @Component({
+      standalone: true,
+      imports: [FlowBlockAuthComponent],
+      template: `<ba-flow-block-auth [initializeSdk]="false" [showDropdownWhenConnected]="false" />`,
+    })
+    class Host {}
+    const { container } = await render(Host, {
+      providers: [provideBlockAuthClientForTest(client)],
+    });
+
+    const btn = container.querySelector('#btn-flow-blockauth') as HTMLButtonElement;
+    expect(btn).toBeTruthy();
+    expect(btn.disabled).toBe(false);
+    await fireEvent.click(btn);
+
+    await waitFor(() => expect(client.requestSignin).toHaveBeenCalled());
+    expect(client.openModal).toHaveBeenCalledWith('signin');
+  });
+});

package/src/lib/components/flow-block-auth.component.ts

@@ -0,0 +1,226 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { setIsSigningLoader } from '@block-auth.io/core';
+import { BlockAuthService } from '../block-auth.service';
+import { BtnBaseComponent } from '../primitives/btn-base.component';
+import { BlockAuthRuntimeDirective } from '../runtime/block-auth-runtime.directive';
+import {
+  DropdownProfileComponent,
+  type DropdownProfileAdditionalItem,
+} from './dds/dropdown-profile.component';
+import { ModalSigninComponent } from './modals/modal-signin.component';
+import { ModalSignupComponent } from './modals/modal-signup.component';
+import { ModalRestoreComponent } from './modals/modal-restore.component';
+import { ModalRestorationExpiredComponent } from './modals/modal-restoration-expired.component';
+
+@Component({
+  selector: 'ba-flow-block-auth',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    BtnBaseComponent,
+    BlockAuthRuntimeDirective,
+    DropdownProfileComponent,
+    ModalSigninComponent,
+    ModalSignupComponent,
+    ModalRestoreComponent,
+    ModalRestorationExpiredComponent,
+  ],
+  template: `
+    <div
+      data-testid="flow-blockauth"
+      [class]="
+        'bas-flex bas-w-full bas-items-center bas-justify-center ' +
+        (showDDP() ? 'bas-h-fit bas-flex-col bas-gap-2.5' : ' bas-h-[52px]')
+      "
+    >
+      @if (initializeSdk()) {
+        <ng-container
+          baRuntime
+          (success)="success.emit($event)"
+          (errored)="errored.emit()"
+          (loggedOut)="loggedOut.emit()"
+        />
+      }
+
+      @if (!ui().isSigned || !ui().isSignedFirstCheck) {
+        <ba-btn-base
+          btnId="btn-flow-blockauth"
+          type="button-outlined"
+          size="base"
+          [disabled]="isLoading()"
+          [isLoader]="isLoading()"
+          loaderColor="#ffffff"
+          [isIcon]="ws().ready"
+          [text]="buttonText() || label()"
+          [bgClassNames]="bgClassNames()"
+          [textClassNames]="btnTextClassNames()"
+          [classNames]="'bas-justify-center ' + btnClassNames()"
+          [isFocusOutlinedEnabled]="false"
+          (action)="onFlowBAClicked()"
+        >
+          @if (ws().ready && ui().isSdkSignedIn) {
+            <img
+              slot="icon"
+              src="https://dashboard.block-auth.io/img/blockauth_logo.png"
+              width="26"
+              height="26"
+              alt="BlockAuth"
+            />
+          } @else if (ws().ready) {
+            <svg
+              slot="icon"
+              class="bas-h-6 bas-w-6 bas-text-white"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                d="M12 2 1 21h22L12 2Zm0 6c.55 0 1 .45 1 1v5a1 1 0 1 1-2 0V9c0-.55.45-1 1-1Zm0 9.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z"
+              />
+            </svg>
+          }
+        </ba-btn-base>
+      }
+
+      @if (showDDP()) {
+        <ba-dropdown-profile
+          [onLogout]="onLogoutForwarder"
+          [isInsideModal]="isInsideModal()"
+          [container]="container()"
+          [dropdownBtnSize]="dropdownBtnSize()"
+          [dropdownBtnBgClassNames]="dropdownBtnBgClassNames()"
+          [dropdownBtnTextColorClassNames]="dropdownBtnTextColorClassNames()"
+          [dropdownBtnBorderClassNames]="dropdownBtnBorderClassNames()"
+          [dropdownHeight]="dropdownHeight()"
+          [additionalDropdownItems]="additionalDropdownItems()"
+        />
+      }
+
+      <!-- Orden fijo: signin (modal de txn) se renderiza por encima de signup;
+           la card de signup queda detrás. Cada modal se auto-oculta según el
+           stack openModals del core. -->
+      <ba-modal-signup />
+      <ba-modal-restore />
+      <ba-modal-restoration-expired />
+      <ba-modal-signin />
+    </div>
+  `,
+})
+export class FlowBlockAuthComponent {
+  showDropdownWhenConnected = input(true);
+  isInsideModal = input(false);
+  /** Modal container that scopes the dropdown's click-outside listener when `isInsideModal`. */
+  container = input<HTMLElement | null>(null);
+  btnClassNames = input('bas-w-full bas-justify-center');
+  btnTextClassNames = input('bas-font-semibold bas-leading-6 bas-text-base bas-text-white');
+  dropdownBtnSize = input<'xs' | 'small' | 'base' | 'large'>('small');
+  dropdownBtnBgClassNames = input('bas-bg-transparent');
+  dropdownBtnTextColorClassNames = input(
+    'bas-text-[var(--bal-primary-700)] group-hover:bas-text-[var(--bal-primary-900)]',
+  );
+  dropdownBtnBorderClassNames = input<string | undefined>(undefined);
+  dropdownHeight = input<number | null>(null);
+  initializeSdk = input(true);
+  additionalDropdownItems = input<DropdownProfileAdditionalItem[] | null>(null);
+  /** Status-button label override. */
+  buttonText = input('');
+
+  success = output<string | undefined>();
+  errored = output<void>();
+  loggedOut = output<void>();
+
+  private readonly ba = inject(BlockAuthService);
+  protected readonly ws = this.ba.ws;
+  protected readonly ui = this.ba.ui;
+  private readonly locale = this.ba.locale;
+
+  private readonly isUiConfig = computed(
+    () => this.ui().uiConfig != null && Object.keys(this.ui().uiConfig as object).length > 0,
+  );
+  // Copia localizada del backend (`app()` -> uiConfig.config.content.btns):
+  // { reviewApi, signUp, logIn, restore } cada una keyed por locale (en/es).
+  private readonly btnsTexts = computed(
+    () =>
+      (
+        this.ui().uiConfig as
+          | { config?: { content?: { btns?: Record<string, Record<string, string>> } } }
+          | null
+      )?.config?.content?.btns,
+  );
+
+  protected readonly showDDP = computed(
+    () =>
+      this.ws().ready &&
+      this.ui().isSdkSignedIn &&
+      this.ui().isServiceConnected &&
+      this.showDropdownWhenConnected() &&
+      this.ui().isSignedFirstCheck,
+  );
+
+  // Azul mientras arranca, transparente una vez firmado en el SDK, naranja en
+  // on-deletion, rojo si la api key es inválida.
+  protected readonly bgClassNames = computed(() =>
+    !(this.ws().ready && this.isUiConfig())
+      ? 'bas-bg-[rgba(0,78,152,0.8)] hover:bas-bg-[rgba(0,62,121,0.8)]'
+      : this.ui().isSdkSignedIn
+        ? undefined
+        : this.ui().isOnDeletion
+          ? 'bas-bg-orange-500 hover:bas-bg-orange-600'
+          : 'bas-bg-red-500 hover:bas-bg-red-600',
+  );
+
+  protected readonly isLoading = computed(
+    () => !(this.ws().ready && this.isUiConfig() && this.ui().isSignedFirstCheck),
+  );
+
+  // Label localizado desde el mapa de texto del backend; `buttonText` sigue
+  // pudiendo sobreescribirlo.
+  private readonly restoreDefault: Record<string, string> = {
+    es: 'Restaurar cuenta',
+    en: 'Restore account',
+  };
+  protected readonly label = computed<string>(() => {
+    if (this.isLoading()) return '';
+    if (!this.ui().isSdkSignedIn) return this.btnsTexts()?.reviewApi?.[this.locale()] ?? '';
+    if (this.ui().isOnDeletion) {
+      return (
+        this.btnsTexts()?.restore?.[this.locale()] ??
+        this.restoreDefault[this.locale()] ??
+        this.restoreDefault['en']
+      );
+    }
+    if (!this.ui().isServiceConnected && !this.ui().isSigned) {
+      return this.btnsTexts()?.signUp?.[this.locale()] ?? '';
+    }
+    if (this.ui().isServiceConnected && !this.ui().isSigned) {
+      return this.btnsTexts()?.logIn?.[this.locale()] ?? '';
+    }
+    return '';
+  });
+
+  /** Reenvía el logout manual del dropdown al output `loggedOut`. */
+  protected readonly onLogoutForwarder = (): void => this.loggedOut.emit();
+
+  onFlowBAClicked(): void {
+    if (!(this.ui().isSdkSignedIn && this.ws().ready)) return;
+    if (this.ui().isOnDeletion) {
+      this.ba.openModal('restore');
+      return;
+    }
+    if (!this.ui().isServiceConnected && !this.ui().isSigned) {
+      this.ba.openModal('signup');
+      return;
+    }
+    if (this.ui().isServiceConnected && !this.ui().isSigned) {
+      // LOG-IN branch: emit the signin transaction, then open the signin modal
+      // and flag the signing loader. The runtime clears the loader once
+      // `user:txns` reports no pending txns.
+      this.ba.requestSignin();
+      const known = ['google', 'metamask', 'phantom', 'microsoft', 'blockauth'];
+      if (known.includes(this.ui().serviceName ?? '')) {
+        this.ba.openModal('signin');
+        setIsSigningLoader(true);
+      }
+    }
+  }
+}