@trismegisto/spine 2.0.1 → 2.1.1

package/fesm2022/trismegisto-spine-layout.mjs

@@ -1,28 +1,28 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, ChangeDetectionStrategy, Component, InjectionToken, input, signal, computed, Optional, Inject, Injectable, Injector, afterNextRender, ViewChild, effect, HostListener, DOCUMENT, isDevMode, DestroyRef, output, ElementRef, Directive, ViewEncapsulation } from '@angular/core';
+import { inject, ChangeDetectorRef, ChangeDetectionStrategy, Component, InjectionToken, input, signal, computed, Optional, Inject, Injectable, Injector, afterNextRender, ViewChild, effect, HostListener, DOCUMENT, Directive, isDevMode, DestroyRef, output, ElementRef, ViewEncapsulation } from '@angular/core';
 import * as i3 from '@angular/router';
 import { RouterLink, Router, NavigationEnd, NavigationSkipped, RouterOutlet } from '@angular/router';
 import { BehaviorSubject, filter, take, Subject, firstValueFrom } from 'rxjs';
-import { IconComponent, IconButtonComponent, LoadingSquareComponent, HermesShortcutService, HERMES_MESSAGES, HeaderComponent as HeaderComponent$1, InputComponent, MenuButtonComponent, AccountAvatarComponent, ModalComponent, createPersistedWorkspaceStore, HERMES_WORKSPACE_PERSISTENCE_CONFIG, findPanelTabs, SidebarComponent as SidebarComponent$1, SidebarNodeComponent, ButtonComponent, CarouselComponent, ShortcutListComponent, HermesToastService, SegmentedControlComponent, HermesThemeService, HermesSidebarService, ComboboxComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent, SelectComponent, ThemePickerComponent, BreadcrumbComponent, TooltipDirective, AlertComponent, SkeletonComponent, WorkspaceComponent } from '@trismegisto/angular';
+import { IconComponent, IconButtonComponent, LoadingSquareComponent, HermesShortcutService, HERMES_MESSAGES, HeaderComponent as HeaderComponent$1, InputComponent, MenuButtonComponent, AccountAvatarComponent, ModalComponent, createPersistedWorkspaceStore, HERMES_WORKSPACE_PERSISTENCE_CONFIG, findPanelTabs, SidebarComponent as SidebarComponent$1, SidebarNodeComponent, ButtonComponent, CarouselComponent, ShortcutListComponent, CodeInputComponent, RadioComponent, AlertComponent, HermesToastService, TagComponent, SegmentedControlComponent, HermesThemeService, HermesSidebarService, ComboboxComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent, SelectComponent, ThemePickerComponent, BreadcrumbComponent, TooltipDirective, SkeletonComponent, WorkspaceComponent } from '@trismegisto/angular';
 import { ModalComponent as ModalComponent$1 } from '@trismegisto/spine/modal';
 import { NotificationComponent } from '@trismegisto/spine/notification';
 import { SidePanelComponent } from '@trismegisto/spine/side-panel';
 import * as i2$1 from '@trismegisto/spine';
-import { SPINE_MESSAGES, SPINE_CONFIG, ThemeService, resolveSpineLogo, SPINE_NEWS, spineRoutesOf, routerIdOf, SPINE_ADMIN_API, SpinePreferencesService, ThemePresetService, DensityService, APP_PACKAGE_INFO, SpineQuickAccessService } from '@trismegisto/spine';
+import { SPINE_MESSAGES, SPINE_CONFIG, ThemeService, resolveSpineLogo, SPINE_NEWS, SpineUserStorage, SPINE_USER_STORAGE_KEYS, spineRoutesOf, routerIdOf, SpinePreferencesService, SPINE_ADMIN_API, ThemePresetService, DensityService, APP_PACKAGE_INFO, SpineQuickAccessService } from '@trismegisto/spine';
 import * as i2 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@orfeu/angular/core';
-import { ViewService, AuthorizationService, RealmAppsService } from '@orfeu/angular/core';
-import { formatMessage, HERMES_FONTS } from '@trismegisto/primitives';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ViewService, AuthorizationService, RealmAppsService, AUTH_CONFIG } from '@orfeu/angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { formatMessage, pluralMessage, urlPath, formatMessageHtml, HERMES_FONTS } from '@trismegisto/primitives';
 import { resolveEffectiveRouteChain, ComponentDistributorService, componentRouterId, LoggerService } from '@trismegisto/spine/routing';
 import { renderIconSvg } from '@trismegisto/icons';
-import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { Title, DomSanitizer } from '@angular/platform-browser';
-import DOMPurify from 'dompurify';
 import { Marked } from 'marked';
+import DOMPurify from 'dompurify';
 
 /**
  * A grade de apps não cabe no `MenuItem` de linha única do `hm-menu` (ícone grande + nome
@@ -179,6 +179,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
 
 // Entra na chave de "já visto": trocar a versão faz o tour aparecer de novo para todo mundo.
 const ONBOARDING_VERSION = 'v3';
+// Espera antes de procurar os alvos na entrada automática: header/breadcrumb renderizados.
+const START_DELAY_MS = 700;
 // Partes do shell chegam depois do login (abas, barra de página): o tour espera por elas, mas não
 // para sempre. Os passos cujo alvo não apareceu no prazo ficam de fora.
 const TARGET_WAIT_MS = 3000;
@@ -203,10 +205,15 @@ function findTourTarget(selector) {
  * Aparece uma vez por máquina (flag em localStorage), namespaced por cliente.
  */
 class OnboardingService {
+    /** Fase atual, síncrona. */
+    get state() { return this.stateSubject.value; }
     constructor(config) {
         this.text = inject(SPINE_MESSAGES).tour;
         /** Passo atual (null = tour inativo). O overlay component reage a isto. */
         this.current$ = new BehaviorSubject(null);
+        this.stateSubject = new BehaviorSubject('idle');
+        /** Fase do tour (ver `OnboardingState`). Emite o valor atual ao assinar. */
+        this.state$ = this.stateSubject.asObservable();
         this.steps = [];
         this.index = 0;
         this.waiting = null;
@@ -227,16 +234,34 @@ class OnboardingService {
         }
         catch { /* sem localStorage → não insiste */ }
     }
-    /** Dispara o tour só se ainda não foi visto nesta máquina. Chamar após o login. */
+    /**
+     * Dispara o tour só se ainda não foi visto nesta máquina. Chamar após o login. Quando é devido, o
+     * estado vira `pending` NA HORA (síncrono), antes da espera pelo shell — é isso que segura as
+     * novidades; quando não é, continua `idle`. Chamar de novo com o tour já em andamento não faz nada.
+     */
     maybeStart() {
-        if (this.done)
+        if (this.done || this.state !== 'idle')
             return;
-        setTimeout(() => this.start(), 700); // garante header/breadcrumb renderizados
+        this.setState('pending');
+        this.clearWaiting();
+        this.waiting = setTimeout(() => this.start(), START_DELAY_MS);
     }
-    /** Reabre o tour manualmente (menu Ajuda), ignorando a flag. */
+    /** Reabre o tour manualmente (menu Ajuda), ignorando a flag. Também passa por `pending` → `running`. */
     restart() {
+        this.setState('pending');
         this.start();
     }
+    /**
+     * Interrompe o tour (pendente ou na tela) SEM marcar como visto: o automático volta na próxima entrada.
+     * Usado quando a pessoa abre outra coisa que disputaria a tela com ele (as novidades pelo menu).
+     */
+    stop() {
+        if (this.state === 'idle')
+            return;
+        this.clearWaiting();
+        this.current$.next(null);
+        this.setState('idle');
+    }
     /** Passos no idioma ativo (o texto é lido do catálogo ao começar o tour). Descrições com `<b>`. */
     allSteps() {
         const t = this.text;
@@ -262,9 +287,7 @@ class OnboardingService {
      * de novo a cada `TARGET_POLL_MS`.
      */
     start() {
-        if (this.waiting !== null)
-            clearTimeout(this.waiting);
-        this.waiting = null;
+        this.clearWaiting();
         const steps = this.allSteps();
         const present = (step) => !step.target || findTourTarget(step.target) !== null;
         const attempt = (waited) => {
@@ -277,15 +300,26 @@ class OnboardingService {
             this.index = 0;
             if (!this.steps.length) {
                 this.markDone();
+                this.setState('idle');
                 return;
             }
             this.emit();
+            this.setState('running');
         };
         attempt(0);
     }
     emit() {
         this.current$.next({ step: this.steps[this.index], index: this.index, total: this.steps.length });
     }
+    setState(state) {
+        if (this.stateSubject.value !== state)
+            this.stateSubject.next(state);
+    }
+    clearWaiting() {
+        if (this.waiting !== null)
+            clearTimeout(this.waiting);
+        this.waiting = null;
+    }
     next() {
         if (this.index >= this.steps.length - 1) {
             this.finish();
@@ -302,8 +336,10 @@ class OnboardingService {
     }
     /** Encerra o tour (concluído ou pulado) e marca como visto. */
     finish() {
+        this.clearWaiting();
         this.markDone();
         this.current$.next(null);
+        this.setState('idle');
     }
     get isFirst() { return this.index === 0; }
     get isLast() { return this.index === this.steps.length - 1; }
@@ -323,13 +359,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
 /** Intervalo entre o fim do tour (ou a entrada, sem tour) e o painel de novidades, para os dois não se
  * emendarem na tela. */
 const AFTER_TOUR_MS = 800;
-/** Tempo mínimo desde a entrada antes de oferecer — o tour, se devido, já começou (ele espera 700ms). */
-const FIRST_CHECK_MS = 1500;
 /**
  * Painel de novidades do app (ver `provideSpineNews`). Decide o que está devido — ainda não visto
  * NESTE navegador e ainda dentro do `until` — e abre sozinho uma vez, depois do tour de boas-vindas.
  * O "já visto" é por app (`hermes_<clientId>_news_seen`): novidade de um app não some por ter sido
  * vista em outro no mesmo domínio.
+ *
+ * Tour e novidades nunca dividem a tela: na entrada, as novidades esperam o tour ficar `idle` (ver
+ * `OnboardingState`); fora dela, vale a última ação explícita da pessoa — o tour reaberto pelo menu
+ * Ajuda fecha o painel de novidades, e as novidades abertas pelo menu interrompem o tour (sem marcá-lo
+ * como visto).
  */
 class SpineNewsService {
     constructor() {
@@ -342,16 +381,31 @@ class SpineNewsService {
         this.hasAny = computed(() => this.current().length > 0, ...(ngDevMode ? [{ debugName: "hasAny" }] : /* istanbul ignore next */ []));
         const ns = inject(SPINE_CONFIG, { optional: true })?.clientId;
         this.seenKey = `${ns ? `hermes_${ns}` : 'hermes'}_news_seen`;
+        // O tour (re)começando — inclusive pelo menu Ajuda — fecha o painel: ele é a ação mais recente.
+        this.onboarding.state$
+            .pipe(filter((state) => state === 'pending'), takeUntilDestroyed())
+            .subscribe(() => this.close());
     }
-    /** Chamado uma vez pelo layout na entrada: abre as devidas, esperando o tour terminar. */
+    /**
+     * Chamado uma vez pelo layout na entrada: abre as devidas quando o tour estiver `idle` (não devido,
+     * concluído, pulado ou sem passo), mais `AFTER_TOUR_MS` para não emendar. Se o tour começar nesse
+     * intervalo, volta a esperar — por isso a ordem com `OnboardingService.maybeStart()` não importa,
+     * desde que ele seja chamado dentro desse intervalo (o layout chama os dois juntos, tour primeiro).
+     */
     scheduleOnEntry() {
         if (this.due().length === 0)
             return;
-        setTimeout(() => {
-            this.onboarding.current$
-                .pipe(filter((step) => step === null), take(1))
-                .subscribe(() => setTimeout(() => this.showDue(), AFTER_TOUR_MS));
-        }, FIRST_CHECK_MS);
+        const whenIdle = () => {
+            this.onboarding.state$.pipe(filter((state) => state === 'idle'), take(1)).subscribe(() => {
+                setTimeout(() => {
+                    if (this.onboarding.state !== 'idle')
+                        whenIdle();
+                    else
+                        this.showDue();
+                }, AFTER_TOUR_MS);
+            });
+        };
+        whenIdle();
     }
     /** Marca como vistas todas as novidades devidas e as abre num único painel. */
     showDue() {
@@ -361,9 +415,19 @@ class SpineNewsService {
         this.markSeen(due.map((i) => i.id));
         this.open(due);
     }
-    /** Reabre todas as vigentes (menu do perfil), vistas ou não. */
+    /**
+     * Reabre todas as vigentes (menu do perfil), vistas ou não; as devidas entre elas passam a vistas.
+     * Interrompe o tour se ele estiver pendente ou na tela (ação mais recente da pessoa).
+     */
     showAll() {
-        this.open(this.current());
+        const all = this.current();
+        if (all.length === 0)
+            return;
+        this.onboarding.stop();
+        const due = this.due();
+        if (due.length)
+            this.markSeen(due.map((i) => i.id));
+        this.open(all);
     }
     close() {
         this.isOpen.set(false);
@@ -416,6 +480,7 @@ const SPINE_SETTINGS_KEYS = {
     region: 'regiao',
     shortcuts: 'atalhos',
     account: 'conta',
+    security: 'seguranca',
     about: 'sobre',
 };
 const SPINE_SETTINGS_SECTIONS = new InjectionToken('SPINE_SETTINGS_SECTIONS');
@@ -473,7 +538,7 @@ class ShortcutService {
     constructor() {
         this.actions = {};
         this.removers = [];
-        this.favKey = `${inject(SPINE_CONFIG, { optional: true })?.clientId ?? 'app'}_nav_favorites`;
+        this.userStorage = inject(SpineUserStorage);
         this.hermes = inject(HermesShortcutService);
         this.lib = inject(HERMES_MESSAGES);
         this.text = inject(SPINE_MESSAGES).shortcuts;
@@ -579,7 +644,7 @@ class ShortcutService {
             return false;
         let url = null;
         try {
-            const list = JSON.parse(localStorage.getItem(this.favKey) || '[]');
+            const list = JSON.parse(localStorage.getItem(this.userStorage.key(SPINE_USER_STORAGE_KEYS.favorites)) || '[]');
             const fav = Array.isArray(list) ? list[Number(digit) - 1] : null;
             url = fav?.redirect || (typeof fav?.id === 'string' && fav.id.startsWith('/') ? fav.id : null);
         }
@@ -608,6 +673,10 @@ function toSpineGroup(group) {
 
 const MAX_RECENT_SEARCH = 6;
 class HeaderComponent {
+    /** Por usuário (`SpineUserStorage`): `<clientId>_header_recent_searches_<sub>`; apagada no logout. */
+    get recentSearchKey() {
+        return this.userStorage.key(SPINE_USER_STORAGE_KEYS.recentSearches);
+    }
     constructor(authService, themeService, themePresetService, densityService, viewService, router, onboarding, shortcuts, config) {
         this.authService = authService;
         this.themeService = themeService;
@@ -628,6 +697,7 @@ class HeaderComponent {
         this.fmt = formatMessage;
         this.settings = inject(SpineSettingsService);
         this.news = inject(SpineNewsService);
+        this.userStorage = inject(SpineUserStorage);
         this.quickQuery = '';
         this.quickOpen = false;
         this.quickResults = [];
@@ -638,8 +708,6 @@ class HeaderComponent {
         /** Verdadeiro quando o painel está exibindo o histórico (campo vazio). */
         this.showingRecent = false;
         this.appName = config?.appName ?? 'Hermes';
-        const ns = config?.clientId ?? 'app';
-        this.recentSearchKey = `${ns}_header_recent_searches`;
     }
     async ngOnInit() {
         this.updateView(this.viewService.currentView);
@@ -708,7 +776,10 @@ class HeaderComponent {
     async switchBadge(badgeTypeId) {
         await this.authService.switchBadge(badgeTypeId);
     }
-    logout() { this.authService.logout(); }
+    logout() {
+        this.userStorage.clearHistory();
+        this.authService.logout();
+    }
     /** Reabre o tour guiado de onboarding. */
     startTour() { this.onboarding.restart(); }
     /** Abre o painel de atalhos de teclado. */
@@ -1438,6 +1509,792 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             args: [{ selector: 'spine-shortcuts-cheatsheet', imports: [ModalComponent, ButtonComponent, ShortcutListComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-modal [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"text.heading\" size=\"large\">\n  <!-- Com a tecla \u00FAnica desligada (WCAG 2.1.4) o \"?\" n\u00E3o abre o painel: a dica some junto. -->\n  @if (characterKeys()) {\n    <p class=\"sc-hint\">\n      {{ hintParts[0] }}<kbd class=\"sc-chip\">?</kbd>{{ hintParts[1] }}\n    </p>\n  }\n\n  <hm-shortcut-list searchable characterKeysToggle [registered]=\"false\" [items]=\"items()\" />\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" icon=\"play\" (clicked)=\"replayTour()\">{{ text.replayTour }}</hm-button>\n    <hm-button (clicked)=\"open = false\">{{ text.dismiss }}</hm-button>\n  </ng-container>\n</hm-modal>\n", styles: ["@charset \"UTF-8\";.sc-hint{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);margin:0 0 var(--hm-space-md);padding:var(--hm-space-xxxs) var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.sc-chip{display:inline-flex;align-items:center;justify-content:center;min-inline-size:1.75rem;padding:0 var(--hm-space-micro);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-micro);background:var(--hm-surface-raised);color:var(--hm-text);font-family:var(--hm-font-family);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-normal)}@media(forced-colors:active){.sc-chip{border-color:ButtonBorder;background:ButtonFace;color:ButtonText}}\n"] }]
         }] });
 
+/**
+ * Base da API da conta no Argos: `{authority}/api/realms/{realm}/account` — o mesmo `{authority}/api` que o
+ * `@orfeu/angular` usa para o OIDC (a `authority` já traz o contexto do serviço, ex.: `https://host/argos`).
+ * Sem `authority`/`realm` (ou com o `CHANGE_ME` de um environment ainda não preenchido) devolve `null`.
+ */
+function argosAccountApi(authority, realm) {
+    const realmId = realm?.trim();
+    if (authority == null || !realmId || authority.includes('CHANGE_ME') || realmId.includes('CHANGE_ME'))
+        return null;
+    return `${authority.trim().replace(/\/+$/, '')}/api/realms/${encodeURIComponent(realmId)}/account`;
+}
+/**
+ * Conta do usuário no Argos (verificação em duas etapas, códigos de recuperação, sessões) pela API da conta
+ * com Bearer: o access token da sessão do app (`@orfeu/angular`), no header `Authorization` — o mesmo jeito
+ * que o Orfeu fala com o Argos (ex.: `switchBadge`). O Argos reconhece a sessão SSO pelo `sid` do token; não
+ * há cookie envolvido. Token vencido (`401 invalid_token`): renova uma vez (`silentRenew`) e repete.
+ * `available` é falso sem `AUTH_CONFIG` utilizável.
+ */
+class SpineAccountSecurityService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.auth = inject(AuthorizationService);
+        this.config = inject(AUTH_CONFIG, { optional: true });
+        this.baseUrl = argosAccountApi(this.config?.authority, this.config?.realmId);
+        this.available = !!this.baseUrl;
+    }
+    overview() {
+        return this.send('GET', '/security');
+    }
+    reauthenticate(proof) {
+        return this.send('POST', '/reauth', proof);
+    }
+    requestReauthCode(methodId) {
+        return this.send('POST', '/reauth/request', { method_id: methodId });
+    }
+    configure(methodId, email) {
+        return this.send('POST', '/mfa/configure', email ? { method_id: methodId, email } : { method_id: methodId });
+    }
+    register(methodId, code) {
+        return this.send('POST', '/mfa/register', { method_id: methodId, code });
+    }
+    remove(methodId) {
+        return this.send('POST', '/mfa/remove', { method_id: methodId });
+    }
+    regenerateRecoveryCodes() {
+        return this.send('POST', '/recovery-codes', {});
+    }
+    sessions() {
+        return this.send('GET', '/sessions');
+    }
+    endSession(sid) {
+        return this.send('DELETE', `/sessions/${encodeURIComponent(sid)}`);
+    }
+    endOtherSessions() {
+        return this.send('DELETE', '/sessions/others');
+    }
+    async send(method, path, body) {
+        try {
+            return await this.request(method, path, body);
+        }
+        catch (err) {
+            if (!(err instanceof HttpErrorResponse && err.status === 401 && err.error?.error === 'invalid_token'))
+                throw err;
+            await this.auth.silentRenew();
+            return this.request(method, path, body);
+        }
+    }
+    request(method, path, body) {
+        if (!this.baseUrl)
+            return Promise.reject(new Error('[hermes-spine] API da conta sem AUTH_CONFIG (authority/realmId).'));
+        const headers = new HttpHeaders({ Authorization: `Bearer ${this.auth.getToken() ?? ''}` });
+        return firstValueFrom(this.http.request(method, `${this.baseUrl}${path}`, { body, headers }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountSecurityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountSecurityService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountSecurityService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** Código de erro que o Argos devolveu (`{ error: 'invalid_code' }`), ou `''`. */
+function accountErrorCode(err) {
+    if (!(err instanceof HttpErrorResponse))
+        return '';
+    const code = err.error?.error;
+    return typeof code === 'string' ? code : err.status === 0 ? 'network' : '';
+}
+
+/** Métodos que o painel trata (o Argos só tem fluxo para estes; o SMS aparece como indisponível). */
+const SUPPORTED = ['totp', 'email', 'sms'];
+const nameOf = (m) => m?.method_name?.toLowerCase() ?? '';
+const isTotp = (m) => nameOf(m) === 'totp';
+const isEmail = (m) => nameOf(m) === 'email';
+const isSms = (m) => nameOf(m) === 'sms';
+/**
+ * Estado da seção "Conta e segurança" do painel de configurações: visão geral do Argos e o fluxo de uma
+ * alteração (reautenticação → cadastro/remoção/códigos). Mesmo roteiro da tela "Segurança da conta" do
+ * Argos: toda alteração pede antes a prova de identidade recente (senha ou um fator ativo, 5 minutos no
+ * servidor); a recusa `reauthentication_required` no meio volta para a prova e a ação segue depois dela.
+ *
+ * Uma instância por abertura do painel (`spineAccountSecurity` no `hm-settings-section`): os códigos de
+ * recuperação e o QR Code somem quando o painel fecha.
+ */
+class SpineAccountSecurityState {
+    constructor() {
+        this.api = inject(SpineAccountSecurityService);
+        this.available = this.api.available;
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** Código do erro ao carregar (`login_required`, `network`...); `''` = carregou. */
+        this.loadError = signal('', ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+        this.overview = signal(null, ...(ngDevMode ? [{ debugName: "overview" }] : /* istanbul ignore next */ []));
+        this.step = signal('idle', ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        this.action = signal(null, ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        /** Código do último erro de uma ação (`invalid_code`...). */
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.notice = signal(null, ...(ngDevMode ? [{ debugName: "notice" }] : /* istanbul ignore next */ []));
+        /** Como provar a identidade: `password`, o id de um método ativo ou o id do código de recuperação. */
+        this.reauthMode = signal('password', ...(ngDevMode ? [{ debugName: "reauthMode" }] : /* istanbul ignore next */ []));
+        this.reauthCodeSent = signal(false, ...(ngDevMode ? [{ debugName: "reauthCodeSent" }] : /* istanbul ignore next */ []));
+        /** Até quando (epoch ms) a reautenticação vale, pelo que o servidor informou. */
+        this.reauthUntil = 0;
+        this.totpSetup = signal(null, ...(ngDevMode ? [{ debugName: "totpSetup" }] : /* istanbul ignore next */ []));
+        this.enrollEmail = signal('', ...(ngDevMode ? [{ debugName: "enrollEmail" }] : /* istanbul ignore next */ []));
+        /** Códigos de recuperação recém-gerados: só existem aqui, até a pessoa dizer que guardou. */
+        this.issuedCodes = signal(null, ...(ngDevMode ? [{ debugName: "issuedCodes" }] : /* istanbul ignore next */ []));
+        this.methods = computed(() => (this.overview()?.methods ?? []).filter((m) => SUPPORTED.includes(nameOf(m))), ...(ngDevMode ? [{ debugName: "methods" }] : /* istanbul ignore next */ []));
+        this.activeMethods = computed(() => this.methods().filter((m) => m.active), ...(ngDevMode ? [{ debugName: "activeMethods" }] : /* istanbul ignore next */ []));
+        this.remainingCodes = computed(() => this.overview()?.recovery_codes.remaining ?? 0, ...(ngDevMode ? [{ debugName: "remainingCodes" }] : /* istanbul ignore next */ []));
+        this.recoveryMethodId = computed(() => this.overview()?.recovery_method_id ?? '', ...(ngDevMode ? [{ debugName: "recoveryMethodId" }] : /* istanbul ignore next */ []));
+        /** Linha da última ação (métodos ou códigos): é ela que mostra o fluxo, o erro e o aviso. */
+        this.owner = signal('methods', ...(ngDevMode ? [{ debugName: "owner" }] : /* istanbul ignore next */ []));
+        if (this.available)
+            void this.load();
+    }
+    async load() {
+        this.loading.set(true);
+        try {
+            this.apply(await this.api.overview());
+            this.loadError.set('');
+        }
+        catch (err) {
+            this.loadError.set(accountErrorCode(err) || 'generic');
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    /** Com MFA obrigatório, o último método ativo não sai (o servidor também recusa: `mfa_last_method`). */
+    canRemove(method) {
+        return !(this.overview()?.policy.required && this.activeMethods().length <= 1 && method.active);
+    }
+    // ── Início de uma ação: reautentica se preciso, depois segue ───────────────
+    start(action) {
+        this.error.set('');
+        this.notice.set(null);
+        this.issuedCodes.set(null);
+        this.action.set(action);
+        this.owner.set(action.kind === 'codes' ? 'codes' : 'methods');
+        if (Date.now() < this.reauthUntil)
+            void this.run(() => this.proceed());
+        else
+            this.openReauth();
+    }
+    cancel() {
+        this.action.set(null);
+        this.step.set('idle');
+        this.error.set('');
+        this.totpSetup.set(null);
+        // Códigos de recuperação não ficam na memória da tela depois que o fluxo é abandonado.
+        this.issuedCodes.set(null);
+    }
+    openReauth() {
+        this.reauthCodeSent.set(false);
+        this.reauthMode.set('password');
+        this.step.set('reauth');
+    }
+    chooseReauth(mode) {
+        this.error.set('');
+        this.notice.set(null);
+        this.reauthCodeSent.set(false);
+        this.reauthMode.set(mode);
+    }
+    sendReauthCode() {
+        return this.run(async () => {
+            await this.api.requestReauthCode(this.reauthMode());
+            this.reauthCodeSent.set(true);
+            this.notice.set('reauthCodeSent');
+        });
+    }
+    confirmReauth(proof) {
+        return this.run(async () => {
+            const response = await this.api.reauthenticate(proof);
+            this.reauthUntil = Date.now() + (response?.reauth_expires_in ?? 0) * 1000;
+            this.notice.set(null);
+            await this.proceed();
+        });
+    }
+    // ── Depois da reautenticação (sempre de dentro de run()) ───────────────────
+    async proceed() {
+        const action = this.action();
+        if (!action)
+            return;
+        if (action.kind === 'remove') {
+            this.step.set('confirm-remove');
+            return;
+        }
+        if (action.kind === 'codes') {
+            const result = await this.api.regenerateRecoveryCodes();
+            this.issuedCodes.set(result.recovery_codes);
+            this.step.set('codes');
+            await this.refresh();
+            return;
+        }
+        if (isTotp(action.method)) {
+            const setup = await this.api.configure(action.method.method_id);
+            this.totpSetup.set({ secret: setup.secret ?? '', qrcode: setup.qrcode ?? '' });
+            this.step.set('enroll-totp');
+            return;
+        }
+        this.step.set('enroll-email');
+    }
+    sendEnrollEmail(email) {
+        const action = this.action();
+        if (!action || action.kind === 'codes')
+            return Promise.resolve();
+        return this.run(async () => {
+            await this.api.configure(action.method.method_id, email);
+            this.enrollEmail.set(email);
+            this.step.set('enroll-email-code');
+        });
+    }
+    confirmEnroll(code) {
+        const action = this.action();
+        if (!action || action.kind === 'codes' || action.kind === 'remove' || !/^\d{6}$/.test(code))
+            return Promise.resolve();
+        return this.run(async () => {
+            const overview = await this.api.register(action.method.method_id, code);
+            this.apply(overview);
+            this.totpSetup.set(null);
+            if (overview.recovery_codes_issued?.length) {
+                // Primeiro método: os códigos aparecem uma vez, na linha deles.
+                this.action.set({ kind: 'codes' });
+                this.owner.set('codes');
+                this.issuedCodes.set(overview.recovery_codes_issued);
+                this.step.set('codes');
+                return;
+            }
+            this.finish(action.kind === 'replace' ? 'deviceReplaced' : 'methodAdded');
+        });
+    }
+    confirmRemove() {
+        const action = this.action();
+        if (!action || action.kind !== 'remove')
+            return Promise.resolve();
+        return this.run(async () => {
+            this.apply(await this.api.remove(action.method.method_id));
+            this.finish('methodRemoved');
+        });
+    }
+    codesSaved() {
+        this.issuedCodes.set(null);
+        this.finish('codesRegenerated');
+    }
+    finish(notice) {
+        this.action.set(null);
+        this.step.set('idle');
+        this.notice.set(notice);
+    }
+    apply(overview) {
+        this.overview.set(overview);
+        if (overview.reauthenticated)
+            this.reauthUntil = Date.now() + overview.reauth_expires_in * 1000;
+    }
+    async refresh() {
+        try {
+            this.apply(await this.api.overview());
+        }
+        catch {
+            // A ação já foi feita; a contagem volta certa na próxima abertura do painel.
+        }
+    }
+    /** Executa uma chamada com o estado de ocupado e o erro na tela. A reautenticação vencida no meio volta
+     *  para a prova de identidade (e a ação continua depois dela). */
+    async run(fn) {
+        if (this.busy())
+            return;
+        this.busy.set(true);
+        this.error.set('');
+        try {
+            await fn();
+        }
+        catch (err) {
+            const code = accountErrorCode(err) || 'generic';
+            if (code === 'reauthentication_required') {
+                this.reauthUntil = 0;
+                this.openReauth();
+            }
+            this.error.set(code);
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountSecurityState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountSecurityState }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountSecurityState, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+/**
+ * Escopo do estado da conta: no `hm-settings-section` da "Conta e segurança", para as linhas da seção
+ * (métodos e códigos de recuperação) dividirem o mesmo estado e ele morrer junto com o painel.
+ */
+class SpineAccountSecurityScopeDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountSecurityScopeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.24", type: SpineAccountSecurityScopeDirective, isStandalone: true, selector: "[spineAccountSecurity]", providers: [SpineAccountSecurityState], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountSecurityScopeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[spineAccountSecurity]',
+                    providers: [SpineAccountSecurityState],
+                }]
+        }] });
+
+let sequence$3 = 0;
+/**
+ * Prova de identidade antes de uma alteração na conta (senha, código do autenticador, código enviado ao
+ * e-mail cadastrado ou código de recuperação). Vale 5 minutos no Argos, presa à sessão do login; depois
+ * dela a ação pedida continua sozinha (`SpineAccountSecurityState.confirmReauth`).
+ */
+class AccountReauthComponent {
+    constructor() {
+        this.state = inject(SpineAccountSecurityState);
+        this.t = inject(SPINE_MESSAGES).accountSecurity;
+        this.titleId = `sp-account-reauth-${++sequence$3}`;
+        this.codeLabelId = `${this.titleId}-code`;
+        this.password = new FormControl('', { nonNullable: true, validators: [Validators.required] });
+        this.recoveryCode = new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.minLength(10)] });
+        /** Senha, os métodos ativos que servem de prova (o SMS não tem envio) e, com códigos restantes, um código de recuperação. */
+        this.choices = computed(() => {
+            const options = [{ value: 'password', label: this.t.reauthPassword }];
+            for (const m of this.state.activeMethods()) {
+                if (isSms(m))
+                    continue;
+                options.push({ value: m.method_id, label: isTotp(m) ? this.t.methodTotp : isEmail(m) ? this.t.methodEmail : m.method_name });
+            }
+            if (this.state.activeMethods().length && this.state.remainingCodes() > 0) {
+                options.push({ value: this.state.recoveryMethodId(), label: this.t.reauthRecoveryCode });
+            }
+            return options;
+        }, ...(ngDevMode ? [{ debugName: "choices" }] : /* istanbul ignore next */ []));
+        this.kind = computed(() => {
+            const mode = this.state.reauthMode();
+            if (mode === 'password')
+                return 'password';
+            if (mode === this.state.recoveryMethodId())
+                return 'recovery';
+            const method = this.state.activeMethods().find((m) => m.method_id === mode);
+            return isEmail(method) && !this.state.reauthCodeSent() ? 'email-request' : 'code';
+        }, ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+    }
+    choose(mode) {
+        if (mode)
+            this.state.chooseReauth(mode);
+    }
+    submitPassword() {
+        this.password.markAsTouched();
+        if (this.password.invalid)
+            return;
+        void this.state.confirmReauth({ password: this.password.value });
+    }
+    submitRecovery() {
+        this.recoveryCode.markAsTouched();
+        if (this.recoveryCode.invalid)
+            return;
+        void this.state.confirmReauth({ method_id: this.state.reauthMode(), code: this.recoveryCode.value.trim() });
+    }
+    submitCode(code) {
+        void this.state.confirmReauth({ method_id: this.state.reauthMode(), code });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AccountReauthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AccountReauthComponent, isStandalone: true, selector: "spine-account-reauth", ngImport: i0, template: `
+    <section class="sp-account__panel" [attr.aria-labelledby]="titleId">
+      <h4 class="sp-account__title" [id]="titleId">{{ t.reauthTitle }}</h4>
+      <p class="sp-account__hint">{{ t.reauthHint }}</p>
+
+      @if (choices().length > 1) {
+        <hm-radio layout="inline" [label]="t.reauthHow" [options]="choices()" [value]="state.reauthMode()" (valueChange)="choose($event)" />
+      }
+
+      @switch (kind()) {
+        @case ('password') {
+          <form class="sp-account__form" (submit)="$event.preventDefault(); submitPassword()">
+            <hm-input type="password" autocomplete="current-password" [label]="t.currentPassword" [formControl]="password" [messages]="{ required: t.passwordRequired }" />
+            <div class="sp-account__actions">
+              <hm-button type="submit" emphasis="high" [loading]="state.busy()">{{ t.confirm }}</hm-button>
+              <hm-button emphasis="minimal" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
+            </div>
+          </form>
+        }
+        @case ('recovery') {
+          <form class="sp-account__form" (submit)="$event.preventDefault(); submitRecovery()">
+            <hm-input autocomplete="off" [label]="t.recoveryCode" [placeholder]="t.recoveryCodePlaceholder" [formControl]="recoveryCode"
+              [messages]="{ required: t.recoveryCodeRequired, minlength: t.recoveryCodeLength }" />
+            <div class="sp-account__actions">
+              <hm-button type="submit" emphasis="high" [loading]="state.busy()">{{ t.confirm }}</hm-button>
+              <hm-button emphasis="minimal" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
+            </div>
+          </form>
+        }
+        @case ('email-request') {
+          <div class="sp-account__actions">
+            <hm-button emphasis="high" icon="mail" [loading]="state.busy()" (clicked)="state.sendReauthCode()">{{ t.sendEmailCode }}</hm-button>
+            <hm-button emphasis="minimal" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
+          </div>
+        }
+        @default {
+          <div class="sp-account__code" role="group" [attr.aria-labelledby]="codeLabelId">
+            <span class="sp-account__label" [id]="codeLabelId">{{ t.sixDigitCode }}</span>
+            <hm-code-input (completed)="submitCode($event)" />
+          </div>
+          <div class="sp-account__actions">
+            <hm-button emphasis="minimal" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
+          </div>
+        }
+      }
+    </section>
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%;min-width:0}.sp-account__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__icon{display:inline-flex;flex:none;color:var(--hm-muted)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 12rem;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere}.sp-account__item-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-nano)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__form,.sp-account__code{display:flex;flex-direction:column;gap:var(--hm-space-xxxs)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__qr{align-self:flex-start;padding:var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface)}.sp-account__qr img{display:block;width:10rem;max-width:100%;height:auto}.sp-account__secret,.sp-account__codes code{font-family:Geist Mono,ui-monospace,monospace;overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0;padding:var(--hm-space-xxxs) var(--hm-space-xs) var(--hm-space-xxxs) var(--hm-space-md);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: CodeInputComponent, selector: "hm-code-input", inputs: ["length"], outputs: ["completed"] }, { kind: "component", type: InputComponent, selector: "hm-input", inputs: ["value", "label", "type", "placeholder", "icon", "labelHidden", "hint", "prefix", "suffix", "prefixIcon", "mask", "maskValue", "min", "max", "step", "stepButtons", "maxLength", "autocomplete", "inputMode"], outputs: ["valueChange"] }, { kind: "component", type: RadioComponent, selector: "hm-radio", inputs: ["value", "label", "options", "appearance", "layout", "hint", "help"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AccountReauthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-account-reauth', imports: [ReactiveFormsModule, ButtonComponent, CodeInputComponent, InputComponent, RadioComponent], template: `
+    <section class="sp-account__panel" [attr.aria-labelledby]="titleId">
+      <h4 class="sp-account__title" [id]="titleId">{{ t.reauthTitle }}</h4>
+      <p class="sp-account__hint">{{ t.reauthHint }}</p>
+
+      @if (choices().length > 1) {
+        <hm-radio layout="inline" [label]="t.reauthHow" [options]="choices()" [value]="state.reauthMode()" (valueChange)="choose($event)" />
+      }
+
+      @switch (kind()) {
+        @case ('password') {
+          <form class="sp-account__form" (submit)="$event.preventDefault(); submitPassword()">
+            <hm-input type="password" autocomplete="current-password" [label]="t.currentPassword" [formControl]="password" [messages]="{ required: t.passwordRequired }" />
+            <div class="sp-account__actions">
+              <hm-button type="submit" emphasis="high" [loading]="state.busy()">{{ t.confirm }}</hm-button>
+              <hm-button emphasis="minimal" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
+            </div>
+          </form>
+        }
+        @case ('recovery') {
+          <form class="sp-account__form" (submit)="$event.preventDefault(); submitRecovery()">
+            <hm-input autocomplete="off" [label]="t.recoveryCode" [placeholder]="t.recoveryCodePlaceholder" [formControl]="recoveryCode"
+              [messages]="{ required: t.recoveryCodeRequired, minlength: t.recoveryCodeLength }" />
+            <div class="sp-account__actions">
+              <hm-button type="submit" emphasis="high" [loading]="state.busy()">{{ t.confirm }}</hm-button>
+              <hm-button emphasis="minimal" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
+            </div>
+          </form>
+        }
+        @case ('email-request') {
+          <div class="sp-account__actions">
+            <hm-button emphasis="high" icon="mail" [loading]="state.busy()" (clicked)="state.sendReauthCode()">{{ t.sendEmailCode }}</hm-button>
+            <hm-button emphasis="minimal" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
+          </div>
+        }
+        @default {
+          <div class="sp-account__code" role="group" [attr.aria-labelledby]="codeLabelId">
+            <span class="sp-account__label" [id]="codeLabelId">{{ t.sixDigitCode }}</span>
+            <hm-code-input (completed)="submitCode($event)" />
+          </div>
+          <div class="sp-account__actions">
+            <hm-button emphasis="minimal" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
+          </div>
+        }
+      }
+    </section>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%;min-width:0}.sp-account__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__icon{display:inline-flex;flex:none;color:var(--hm-muted)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 12rem;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere}.sp-account__item-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-nano)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__form,.sp-account__code{display:flex;flex-direction:column;gap:var(--hm-space-xxxs)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__qr{align-self:flex-start;padding:var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface)}.sp-account__qr img{display:block;width:10rem;max-width:100%;height:auto}.sp-account__secret,.sp-account__codes code{font-family:Geist Mono,ui-monospace,monospace;overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0;padding:var(--hm-space-xxxs) var(--hm-space-xs) var(--hm-space-xxxs) var(--hm-space-md);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}\n"] }]
+        }] });
+
+let sequence$2 = 0;
+/**
+ * Verificação em duas etapas da conta no Argos, dentro do painel de configurações: os métodos (ativo,
+ * não cadastrado, indisponível) e as ações — adicionar (TOTP com QR Code e confirmação pelo código; e-mail
+ * com código no endereço informado), trocar o aparelho do autenticador e remover. Cada ação passa antes pela
+ * reautenticação (`spine-account-reauth`).
+ */
+class AccountMfaComponent {
+    constructor() {
+        this.state = inject(SpineAccountSecurityState);
+        this.t = inject(SPINE_MESSAGES).accountSecurity;
+        this.fmt = formatMessage;
+        this.isTotp = isTotp;
+        this.isSms = isSms;
+        this.ids = `sp-account-mfa-${++sequence$2}`;
+        this.email = new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email] });
+    }
+    label(method) {
+        if (!method)
+            return '';
+        if (isTotp(method))
+            return this.t.methodTotp;
+        if (isEmail(method))
+            return this.t.methodEmail;
+        if (isSms(method))
+            return this.t.methodSms;
+        return method.method_name;
+    }
+    icon(method) {
+        return isTotp(method) ? 'authenticator' : isEmail(method) ? 'mail' : 'sms';
+    }
+    status(method) {
+        if (isSms(method))
+            return this.t.unavailable;
+        if (!method.active)
+            return this.t.notRegistered;
+        return method.secret ? formatMessage(this.t.activeWithDetail, { detail: method.secret }) : this.t.active;
+    }
+    /** Método da ação em andamento (para o título "Remover ...?"). */
+    actionMethod() {
+        const action = this.state.action();
+        return action && action.kind !== 'codes' ? action.method : null;
+    }
+    errorText(code) {
+        return this.t.errors[code] ?? this.t.errors.generic;
+    }
+    startAdd(method) {
+        this.email.reset('');
+        this.state.start({ kind: 'add', method });
+    }
+    sendEmail() {
+        this.email.markAsTouched();
+        if (this.email.invalid)
+            return;
+        void this.state.sendEnrollEmail(this.email.value.trim());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AccountMfaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AccountMfaComponent, isStandalone: true, selector: "spine-account-mfa", ngImport: i0, template: "@if (state.loading() && !state.overview()) {\n  <p class=\"sp-account__hint\" role=\"status\">{{ t.loading }}</p>\n} @else if (state.loadError()) {\n  <hm-alert variant=\"error\">{{ errorText(state.loadError()) }}</hm-alert>\n  @if (state.loadError() !== 'login_required' && state.loadError() !== 'invalid_token') {\n    <div class=\"sp-account__actions\">\n      <hm-button emphasis=\"medium\" icon=\"refresh\" (clicked)=\"state.load()\">{{ t.retry }}</hm-button>\n    </div>\n  }\n} @else if (state.overview(); as data) {\n  @if (state.owner() === 'methods') {\n    @if (state.notice(); as notice) {\n      <hm-alert variant=\"success\">{{ t.notices[notice] }}</hm-alert>\n    }\n    @if (state.error(); as error) {\n      <hm-alert variant=\"error\">{{ errorText(error) }}</hm-alert>\n    }\n  }\n\n  @if (state.owner() === 'methods' && state.step() !== 'idle') {\n    @switch (state.step()) {\n      @case ('reauth') {\n        <spine-account-reauth />\n      }\n\n      @case ('confirm-remove') {\n        <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-remove'\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-remove'\">{{ fmt(t.removeTitle, { method: label(actionMethod()) }) }}</h4>\n          <p class=\"sp-account__hint\">\n            {{ t.removeHint }}\n            @if (state.activeMethods().length <= 1) { {{ t.removeLastHint }} }\n          </p>\n          <div class=\"sp-account__actions\">\n            <hm-button emphasis=\"high\" intent=\"danger\" [loading]=\"state.busy()\" (clicked)=\"state.confirmRemove()\">{{ t.remove }}</hm-button>\n            <hm-button emphasis=\"minimal\" [disabled]=\"state.busy()\" (clicked)=\"state.cancel()\">{{ t.cancel }}</hm-button>\n          </div>\n        </section>\n      }\n\n      @case ('enroll-totp') {\n        <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-totp'\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-totp'\">{{ t.totpTitle }}</h4>\n          @if (state.totpSetup(); as setup) {\n            @if (setup.qrcode) {\n              <div class=\"sp-account__qr\"><img [src]=\"setup.qrcode\" [alt]=\"t.qrAlt\" /></div>\n            }\n            <p class=\"sp-account__hint\">{{ t.manualKey }} <code class=\"sp-account__secret\">{{ setup.secret }}</code></p>\n          }\n          <div class=\"sp-account__code\" role=\"group\" [attr.aria-labelledby]=\"ids + '-totp-code'\">\n            <span class=\"sp-account__label\" [id]=\"ids + '-totp-code'\">{{ t.appCode }}</span>\n            <hm-code-input (completed)=\"state.confirmEnroll($event)\" />\n          </div>\n          <div class=\"sp-account__actions\">\n            <hm-button emphasis=\"minimal\" [disabled]=\"state.busy()\" (clicked)=\"state.cancel()\">{{ t.cancel }}</hm-button>\n          </div>\n        </section>\n      }\n\n      @case ('enroll-email') {\n        <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-email'\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-email'\">{{ t.emailTitle }}</h4>\n          <form class=\"sp-account__form\" (submit)=\"$event.preventDefault(); sendEmail()\">\n            <hm-input type=\"email\" autocomplete=\"email\" [label]=\"t.email\" [placeholder]=\"t.emailPlaceholder\" [formControl]=\"email\"\n              [messages]=\"{ required: t.emailRequired, email: t.emailInvalid }\" />\n            <div class=\"sp-account__actions\">\n              <hm-button type=\"submit\" emphasis=\"high\" icon=\"mail\" [loading]=\"state.busy()\">{{ t.sendCode }}</hm-button>\n              <hm-button emphasis=\"minimal\" [disabled]=\"state.busy()\" (clicked)=\"state.cancel()\">{{ t.cancel }}</hm-button>\n            </div>\n          </form>\n        </section>\n      }\n\n      @case ('enroll-email-code') {\n        <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-email-code'\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-email-code'\">{{ t.emailCodeTitle }}</h4>\n          <p class=\"sp-account__hint\" [id]=\"ids + '-email-code-hint'\">{{ fmt(t.emailCodeHint, { email: state.enrollEmail() }) }}</p>\n          <div class=\"sp-account__code\" role=\"group\" [attr.aria-labelledby]=\"ids + '-email-code-label'\" [attr.aria-describedby]=\"ids + '-email-code-hint'\">\n            <span class=\"sp-account__label\" [id]=\"ids + '-email-code-label'\">{{ t.sixDigitCode }}</span>\n            <hm-code-input (completed)=\"state.confirmEnroll($event)\" />\n          </div>\n          <div class=\"sp-account__actions\">\n            <hm-button emphasis=\"minimal\" [disabled]=\"state.busy()\" (clicked)=\"state.cancel()\">{{ t.cancel }}</hm-button>\n          </div>\n        </section>\n      }\n    }\n  } @else {\n    @if (data.policy.required) {\n      <p class=\"sp-account__hint\">{{ t.requiredHint }}</p>\n    }\n    <ul class=\"sp-account__list\">\n      @for (m of state.methods(); track m.method_id) {\n        <li class=\"sp-account__item\">\n          <span class=\"sp-account__icon\"><hm-icon [shape]=\"icon(m)\" /></span>\n          <span class=\"sp-account__item-main\">\n            <strong>{{ label(m) }}</strong>\n            <span class=\"sp-account__meta\">{{ status(m) }}</span>\n          </span>\n          @if (!isSms(m)) {\n            <span class=\"sp-account__item-actions\">\n              @if (!m.active) {\n                <hm-button size=\"small\" emphasis=\"medium\" icon=\"plus\" [disabled]=\"state.busy() || state.step() !== 'idle'\" (clicked)=\"startAdd(m)\">{{ t.add }}</hm-button>\n              } @else {\n                @if (isTotp(m)) {\n                  <hm-button size=\"small\" emphasis=\"medium\" [disabled]=\"state.busy() || state.step() !== 'idle'\" (clicked)=\"state.start({ kind: 'replace', method: m })\">{{ t.replaceDevice }}</hm-button>\n                }\n                <hm-button size=\"small\" emphasis=\"minimal\" intent=\"danger\" [disabled]=\"state.busy() || state.step() !== 'idle' || !state.canRemove(m)\" (clicked)=\"state.start({ kind: 'remove', method: m })\">{{ t.remove }}</hm-button>\n              }\n            </span>\n          }\n        </li>\n      }\n    </ul>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%;min-width:0}.sp-account__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__icon{display:inline-flex;flex:none;color:var(--hm-muted)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 12rem;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere}.sp-account__item-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-nano)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__form,.sp-account__code{display:flex;flex-direction:column;gap:var(--hm-space-xxxs)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__qr{align-self:flex-start;padding:var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface)}.sp-account__qr img{display:block;width:10rem;max-width:100%;height:auto}.sp-account__secret,.sp-account__codes code{font-family:Geist Mono,ui-monospace,monospace;overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0;padding:var(--hm-space-xxxs) var(--hm-space-xs) var(--hm-space-xxxs) var(--hm-space-md);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: CodeInputComponent, selector: "hm-code-input", inputs: ["length"], outputs: ["completed"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: InputComponent, selector: "hm-input", inputs: ["value", "label", "type", "placeholder", "icon", "labelHidden", "hint", "prefix", "suffix", "prefixIcon", "mask", "maskValue", "min", "max", "step", "stepButtons", "maxLength", "autocomplete", "inputMode"], outputs: ["valueChange"] }, { kind: "component", type: AccountReauthComponent, selector: "spine-account-reauth" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AccountMfaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-account-mfa', imports: [ReactiveFormsModule, AlertComponent, ButtonComponent, CodeInputComponent, IconComponent, InputComponent, AccountReauthComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (state.loading() && !state.overview()) {\n  <p class=\"sp-account__hint\" role=\"status\">{{ t.loading }}</p>\n} @else if (state.loadError()) {\n  <hm-alert variant=\"error\">{{ errorText(state.loadError()) }}</hm-alert>\n  @if (state.loadError() !== 'login_required' && state.loadError() !== 'invalid_token') {\n    <div class=\"sp-account__actions\">\n      <hm-button emphasis=\"medium\" icon=\"refresh\" (clicked)=\"state.load()\">{{ t.retry }}</hm-button>\n    </div>\n  }\n} @else if (state.overview(); as data) {\n  @if (state.owner() === 'methods') {\n    @if (state.notice(); as notice) {\n      <hm-alert variant=\"success\">{{ t.notices[notice] }}</hm-alert>\n    }\n    @if (state.error(); as error) {\n      <hm-alert variant=\"error\">{{ errorText(error) }}</hm-alert>\n    }\n  }\n\n  @if (state.owner() === 'methods' && state.step() !== 'idle') {\n    @switch (state.step()) {\n      @case ('reauth') {\n        <spine-account-reauth />\n      }\n\n      @case ('confirm-remove') {\n        <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-remove'\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-remove'\">{{ fmt(t.removeTitle, { method: label(actionMethod()) }) }}</h4>\n          <p class=\"sp-account__hint\">\n            {{ t.removeHint }}\n            @if (state.activeMethods().length <= 1) { {{ t.removeLastHint }} }\n          </p>\n          <div class=\"sp-account__actions\">\n            <hm-button emphasis=\"high\" intent=\"danger\" [loading]=\"state.busy()\" (clicked)=\"state.confirmRemove()\">{{ t.remove }}</hm-button>\n            <hm-button emphasis=\"minimal\" [disabled]=\"state.busy()\" (clicked)=\"state.cancel()\">{{ t.cancel }}</hm-button>\n          </div>\n        </section>\n      }\n\n      @case ('enroll-totp') {\n        <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-totp'\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-totp'\">{{ t.totpTitle }}</h4>\n          @if (state.totpSetup(); as setup) {\n            @if (setup.qrcode) {\n              <div class=\"sp-account__qr\"><img [src]=\"setup.qrcode\" [alt]=\"t.qrAlt\" /></div>\n            }\n            <p class=\"sp-account__hint\">{{ t.manualKey }} <code class=\"sp-account__secret\">{{ setup.secret }}</code></p>\n          }\n          <div class=\"sp-account__code\" role=\"group\" [attr.aria-labelledby]=\"ids + '-totp-code'\">\n            <span class=\"sp-account__label\" [id]=\"ids + '-totp-code'\">{{ t.appCode }}</span>\n            <hm-code-input (completed)=\"state.confirmEnroll($event)\" />\n          </div>\n          <div class=\"sp-account__actions\">\n            <hm-button emphasis=\"minimal\" [disabled]=\"state.busy()\" (clicked)=\"state.cancel()\">{{ t.cancel }}</hm-button>\n          </div>\n        </section>\n      }\n\n      @case ('enroll-email') {\n        <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-email'\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-email'\">{{ t.emailTitle }}</h4>\n          <form class=\"sp-account__form\" (submit)=\"$event.preventDefault(); sendEmail()\">\n            <hm-input type=\"email\" autocomplete=\"email\" [label]=\"t.email\" [placeholder]=\"t.emailPlaceholder\" [formControl]=\"email\"\n              [messages]=\"{ required: t.emailRequired, email: t.emailInvalid }\" />\n            <div class=\"sp-account__actions\">\n              <hm-button type=\"submit\" emphasis=\"high\" icon=\"mail\" [loading]=\"state.busy()\">{{ t.sendCode }}</hm-button>\n              <hm-button emphasis=\"minimal\" [disabled]=\"state.busy()\" (clicked)=\"state.cancel()\">{{ t.cancel }}</hm-button>\n            </div>\n          </form>\n        </section>\n      }\n\n      @case ('enroll-email-code') {\n        <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-email-code'\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-email-code'\">{{ t.emailCodeTitle }}</h4>\n          <p class=\"sp-account__hint\" [id]=\"ids + '-email-code-hint'\">{{ fmt(t.emailCodeHint, { email: state.enrollEmail() }) }}</p>\n          <div class=\"sp-account__code\" role=\"group\" [attr.aria-labelledby]=\"ids + '-email-code-label'\" [attr.aria-describedby]=\"ids + '-email-code-hint'\">\n            <span class=\"sp-account__label\" [id]=\"ids + '-email-code-label'\">{{ t.sixDigitCode }}</span>\n            <hm-code-input (completed)=\"state.confirmEnroll($event)\" />\n          </div>\n          <div class=\"sp-account__actions\">\n            <hm-button emphasis=\"minimal\" [disabled]=\"state.busy()\" (clicked)=\"state.cancel()\">{{ t.cancel }}</hm-button>\n          </div>\n        </section>\n      }\n    }\n  } @else {\n    @if (data.policy.required) {\n      <p class=\"sp-account__hint\">{{ t.requiredHint }}</p>\n    }\n    <ul class=\"sp-account__list\">\n      @for (m of state.methods(); track m.method_id) {\n        <li class=\"sp-account__item\">\n          <span class=\"sp-account__icon\"><hm-icon [shape]=\"icon(m)\" /></span>\n          <span class=\"sp-account__item-main\">\n            <strong>{{ label(m) }}</strong>\n            <span class=\"sp-account__meta\">{{ status(m) }}</span>\n          </span>\n          @if (!isSms(m)) {\n            <span class=\"sp-account__item-actions\">\n              @if (!m.active) {\n                <hm-button size=\"small\" emphasis=\"medium\" icon=\"plus\" [disabled]=\"state.busy() || state.step() !== 'idle'\" (clicked)=\"startAdd(m)\">{{ t.add }}</hm-button>\n              } @else {\n                @if (isTotp(m)) {\n                  <hm-button size=\"small\" emphasis=\"medium\" [disabled]=\"state.busy() || state.step() !== 'idle'\" (clicked)=\"state.start({ kind: 'replace', method: m })\">{{ t.replaceDevice }}</hm-button>\n                }\n                <hm-button size=\"small\" emphasis=\"minimal\" intent=\"danger\" [disabled]=\"state.busy() || state.step() !== 'idle' || !state.canRemove(m)\" (clicked)=\"state.start({ kind: 'remove', method: m })\">{{ t.remove }}</hm-button>\n              }\n            </span>\n          }\n        </li>\n      }\n    </ul>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%;min-width:0}.sp-account__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__icon{display:inline-flex;flex:none;color:var(--hm-muted)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 12rem;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere}.sp-account__item-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-nano)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__form,.sp-account__code{display:flex;flex-direction:column;gap:var(--hm-space-xxxs)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__qr{align-self:flex-start;padding:var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface)}.sp-account__qr img{display:block;width:10rem;max-width:100%;height:auto}.sp-account__secret,.sp-account__codes code{font-family:Geist Mono,ui-monospace,monospace;overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0;padding:var(--hm-space-xxxs) var(--hm-space-xs) var(--hm-space-xxxs) var(--hm-space-md);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}\n"] }]
+        }] });
+
+let sequence$1 = 0;
+/**
+ * Códigos de recuperação da conta no Argos: quantos restam e "gerar novos" (com reautenticação). O lote
+ * novo aparece UMA vez (o Argos só guarda o hash), com copiar e baixar em .txt, até a pessoa dizer que
+ * guardou — e some quando o painel fecha.
+ */
+class AccountRecoveryCodesComponent {
+    constructor() {
+        this.state = inject(SpineAccountSecurityState);
+        this.messages = inject(SPINE_MESSAGES);
+        this.t = this.messages.accountSecurity;
+        this.toast = inject(HermesToastService);
+        this.titleId = `sp-account-codes-${++sequence$1}`;
+        this.remaining = computed(() => pluralMessage(this.t.codesRemaining, this.state.remainingCodes(), this.messages.meta.locale), ...(ngDevMode ? [{ debugName: "remaining" }] : /* istanbul ignore next */ []));
+    }
+    errorText(code) {
+        return this.t.errors[code] ?? this.t.errors.generic;
+    }
+    asText(codes) {
+        return `${this.t.codesFileHeader}\n\n${codes.join('\n')}\n`;
+    }
+    async copy(codes) {
+        try {
+            await navigator.clipboard.writeText(this.asText(codes));
+            this.toast.success(this.t.codesCopied);
+        }
+        catch {
+            this.toast.error(this.t.copyFailed);
+        }
+    }
+    download(codes) {
+        const url = URL.createObjectURL(new Blob([this.asText(codes)], { type: 'text/plain;charset=utf-8' }));
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = this.t.codesFileName;
+        a.click();
+        // Revogar no mesmo tick pode cancelar o download em alguns navegadores (o clique só agenda a navegação).
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AccountRecoveryCodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AccountRecoveryCodesComponent, isStandalone: true, selector: "spine-account-recovery-codes", ngImport: i0, template: `
+    @if (state.overview()) {
+      @if (state.owner() === 'codes') {
+        @if (state.notice(); as notice) {
+          <hm-alert variant="success">{{ t.notices[notice] }}</hm-alert>
+        }
+        @if (state.error(); as error) {
+          <hm-alert variant="error">{{ errorText(error) }}</hm-alert>
+        }
+      }
+
+      @if (state.owner() === 'codes' && state.step() === 'reauth') {
+        <spine-account-reauth />
+      } @else if (state.owner() === 'codes' && state.step() === 'codes' && state.issuedCodes(); as codes) {
+        <section class="sp-account__panel sp-account__panel--success" [attr.aria-labelledby]="titleId">
+          <h4 class="sp-account__title" [id]="titleId">{{ t.codesTitle }}</h4>
+          <p class="sp-account__hint">{{ t.codesShownOnce }}</p>
+          <ol class="sp-account__codes">
+            @for (code of codes; track code) {
+              <li><code>{{ code }}</code></li>
+            }
+          </ol>
+          <div class="sp-account__actions">
+            <hm-button emphasis="medium" icon="copy" (clicked)="copy(codes)">{{ t.copyCodes }}</hm-button>
+            <hm-button emphasis="medium" icon="download" (clicked)="download(codes)">{{ t.downloadCodes }}</hm-button>
+            <hm-button emphasis="high" (clicked)="state.codesSaved()">{{ t.codesSaved }}</hm-button>
+          </div>
+        </section>
+      } @else if (state.activeMethods().length) {
+        <p class="sp-account__hint">{{ remaining() }} {{ t.codesHint }}</p>
+        <div class="sp-account__actions">
+          <hm-button emphasis="medium" icon="key" [disabled]="state.busy() || state.step() !== 'idle'" (clicked)="state.start({ kind: 'codes' })">
+            {{ state.remainingCodes() ? t.regenerateCodes : t.generateCodes }}
+          </hm-button>
+        </div>
+      } @else {
+        <p class="sp-account__hint">{{ t.codesNeedMethod }}</p>
+      }
+    }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%;min-width:0}.sp-account__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__icon{display:inline-flex;flex:none;color:var(--hm-muted)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 12rem;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere}.sp-account__item-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-nano)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__form,.sp-account__code{display:flex;flex-direction:column;gap:var(--hm-space-xxxs)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__qr{align-self:flex-start;padding:var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface)}.sp-account__qr img{display:block;width:10rem;max-width:100%;height:auto}.sp-account__secret,.sp-account__codes code{font-family:Geist Mono,ui-monospace,monospace;overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0;padding:var(--hm-space-xxxs) var(--hm-space-xs) var(--hm-space-xxxs) var(--hm-space-md);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: AccountReauthComponent, selector: "spine-account-reauth" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AccountRecoveryCodesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-account-recovery-codes', imports: [AlertComponent, ButtonComponent, AccountReauthComponent], template: `
+    @if (state.overview()) {
+      @if (state.owner() === 'codes') {
+        @if (state.notice(); as notice) {
+          <hm-alert variant="success">{{ t.notices[notice] }}</hm-alert>
+        }
+        @if (state.error(); as error) {
+          <hm-alert variant="error">{{ errorText(error) }}</hm-alert>
+        }
+      }
+
+      @if (state.owner() === 'codes' && state.step() === 'reauth') {
+        <spine-account-reauth />
+      } @else if (state.owner() === 'codes' && state.step() === 'codes' && state.issuedCodes(); as codes) {
+        <section class="sp-account__panel sp-account__panel--success" [attr.aria-labelledby]="titleId">
+          <h4 class="sp-account__title" [id]="titleId">{{ t.codesTitle }}</h4>
+          <p class="sp-account__hint">{{ t.codesShownOnce }}</p>
+          <ol class="sp-account__codes">
+            @for (code of codes; track code) {
+              <li><code>{{ code }}</code></li>
+            }
+          </ol>
+          <div class="sp-account__actions">
+            <hm-button emphasis="medium" icon="copy" (clicked)="copy(codes)">{{ t.copyCodes }}</hm-button>
+            <hm-button emphasis="medium" icon="download" (clicked)="download(codes)">{{ t.downloadCodes }}</hm-button>
+            <hm-button emphasis="high" (clicked)="state.codesSaved()">{{ t.codesSaved }}</hm-button>
+          </div>
+        </section>
+      } @else if (state.activeMethods().length) {
+        <p class="sp-account__hint">{{ remaining() }} {{ t.codesHint }}</p>
+        <div class="sp-account__actions">
+          <hm-button emphasis="medium" icon="key" [disabled]="state.busy() || state.step() !== 'idle'" (clicked)="state.start({ kind: 'codes' })">
+            {{ state.remainingCodes() ? t.regenerateCodes : t.generateCodes }}
+          </hm-button>
+        </div>
+      } @else {
+        <p class="sp-account__hint">{{ t.codesNeedMethod }}</p>
+      }
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%;min-width:0}.sp-account__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__icon{display:inline-flex;flex:none;color:var(--hm-muted)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 12rem;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere}.sp-account__item-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-nano)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__form,.sp-account__code{display:flex;flex-direction:column;gap:var(--hm-space-xxxs)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__qr{align-self:flex-start;padding:var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface)}.sp-account__qr img{display:block;width:10rem;max-width:100%;height:auto}.sp-account__secret,.sp-account__codes code{font-family:Geist Mono,ui-monospace,monospace;overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0;padding:var(--hm-space-xxxs) var(--hm-space-xs) var(--hm-space-xxxs) var(--hm-space-md);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}\n"] }]
+        }] });
+
+/**
+ * Sessões e dispositivos da conta no Argos, dentro do painel de configurações: onde a conta está
+ * conectada (navegador, IP, aplicativos, último uso), com a sessão deste login marcada. Encerra uma
+ * sessão (segundo clique confirma) ou todas as outras. A sessão atual não tem "Encerrar" aqui: sair dela é
+ * o "Sair" da seção Conta, que também encerra o app.
+ */
+class AccountSessionsComponent {
+    constructor() {
+        this.api = inject(SpineAccountSecurityService);
+        this.messages = inject(SPINE_MESSAGES);
+        this.t = this.messages.accountSecurity;
+        this.preferences = inject(SpinePreferencesService);
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loadError = signal('', ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+        this.sessions = signal([], ...(ngDevMode ? [{ debugName: "sessions" }] : /* istanbul ignore next */ []));
+        this.notice = signal('', ...(ngDevMode ? [{ debugName: "notice" }] : /* istanbul ignore next */ []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        /** Encerramento aguardando o segundo clique: id da sessão, `others` ou null. */
+        this.confirming = signal(null, ...(ngDevMode ? [{ debugName: "confirming" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        /** A deste login primeiro; depois as outras, da usada mais recentemente. */
+        this.ordered = computed(() => [...this.sessions()].sort((a, b) => Number(b.current) - Number(a.current) || b.last_seen_at.localeCompare(a.last_seen_at)), ...(ngDevMode ? [{ debugName: "ordered" }] : /* istanbul ignore next */ []));
+        this.others = computed(() => this.sessions().filter((s) => !s.current).length, ...(ngDevMode ? [{ debugName: "others" }] : /* istanbul ignore next */ []));
+        this.othersConfirm = computed(() => pluralMessage(this.t.endOthersConfirm, this.others(), this.messages.meta.locale), ...(ngDevMode ? [{ debugName: "othersConfirm" }] : /* istanbul ignore next */ []));
+        if (this.api.available)
+            void this.load();
+        else
+            this.loading.set(false);
+    }
+    async load() {
+        this.loading.set(true);
+        try {
+            const { sessions } = await this.api.sessions();
+            this.sessions.set(sessions ?? []);
+            this.loadError.set('');
+        }
+        catch (err) {
+            this.loadError.set(accountErrorCode(err) || 'generic');
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    ask(target) {
+        this.notice.set('');
+        this.error.set('');
+        this.confirming.set(target);
+    }
+    cancel() {
+        this.confirming.set(null);
+    }
+    async end(session) {
+        if (this.confirming() !== session.id) {
+            this.ask(session.id);
+            return;
+        }
+        await this.run(async () => {
+            await this.api.endSession(session.id);
+            this.notice.set(this.t.sessionEndedNotice);
+        });
+    }
+    async endOthers() {
+        await this.run(async () => {
+            const { ended } = await this.api.endOtherSessions();
+            this.notice.set(pluralMessage(this.t.othersEndedNotice, ended, this.messages.meta.locale));
+        });
+    }
+    async run(fn) {
+        if (this.busy())
+            return;
+        this.busy.set(true);
+        this.error.set('');
+        try {
+            await fn();
+        }
+        catch (err) {
+            const code = accountErrorCode(err) || 'generic';
+            if (code === 'login_required' || code === 'invalid_token') {
+                this.loadError.set(code);
+            }
+            else {
+                this.error.set(this.errorText(code));
+            }
+        }
+        finally {
+            this.confirming.set(null);
+            this.busy.set(false);
+        }
+        if (!this.loadError())
+            await this.load();
+    }
+    errorText(code) {
+        return this.t.errors[code] ?? this.t.errors.generic;
+    }
+    detail(session) {
+        return formatMessage(this.t.sessionDetail, { ip: session.ip || this.t.unknownIp, date: this.date(session.last_seen_at) });
+    }
+    since(session) {
+        return formatMessage(this.t.sessionSince, { date: this.date(session.created_at) });
+    }
+    apps(session) {
+        return formatMessage(this.t.sessionApps, { apps: session.clients.map((c) => c.name ?? this.t.unnamedApp).join(', ') });
+    }
+    date(value) {
+        return new Intl.DateTimeFormat(this.messages.meta.locale, { dateStyle: 'short', timeStyle: 'short', timeZone: this.preferences.effectiveTimeZone() })
+            .format(new Date(value));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AccountSessionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AccountSessionsComponent, isStandalone: true, selector: "spine-account-sessions", ngImport: i0, template: "@if (loading() && !sessions().length) {\n  <p class=\"sp-account__hint\" role=\"status\">{{ t.loading }}</p>\n} @else if (loadError()) {\n  <hm-alert variant=\"error\">{{ errorText(loadError()) }}</hm-alert>\n  @if (loadError() !== 'login_required' && loadError() !== 'invalid_token') {\n    <div class=\"sp-account__actions\">\n      <hm-button emphasis=\"medium\" icon=\"refresh\" (clicked)=\"load()\">{{ t.retry }}</hm-button>\n    </div>\n  }\n} @else {\n  @if (notice()) {\n    <hm-alert variant=\"success\">{{ notice() }}</hm-alert>\n  }\n  @if (error()) {\n    <hm-alert variant=\"error\">{{ error() }}</hm-alert>\n  }\n\n  <ul class=\"sp-account__list\">\n    @for (s of ordered(); track s.id) {\n      <li class=\"sp-account__item\">\n        <span class=\"sp-account__icon\"><hm-icon [shape]=\"s.device.mobile ? 'mobile' : 'computer'\" /></span>\n        <span class=\"sp-account__item-main\">\n          <span class=\"sp-account__item-title\">\n            <strong>{{ s.device.label }}</strong>\n            @if (s.current) {\n              <hm-tag [name]=\"t.thisSession\" color=\"success\" />\n            } @else if (s.this_device) {\n              <hm-tag [name]=\"t.thisBrowser\" color=\"info\" />\n            }\n            @if (!s.sso_active) {\n              <hm-tag [name]=\"t.appsOnly\" color=\"warning\" />\n            }\n          </span>\n          <span class=\"sp-account__meta\">{{ detail(s) }}</span>\n          <span class=\"sp-account__meta\">{{ since(s) }}</span>\n          @if (s.clients.length) {\n            <span class=\"sp-account__meta\">{{ apps(s) }}</span>\n          }\n        </span>\n        @if (!s.current) {\n          <span class=\"sp-account__item-actions\">\n            @if (confirming() === s.id) {\n              <hm-button size=\"small\" emphasis=\"minimal\" [disabled]=\"busy()\" (clicked)=\"cancel()\">{{ t.cancel }}</hm-button>\n            }\n            <hm-button size=\"small\" [emphasis]=\"confirming() === s.id ? 'high' : 'medium'\" intent=\"danger\" [loading]=\"busy() && confirming() === s.id\" [disabled]=\"busy() && confirming() !== s.id\" (clicked)=\"end(s)\">\n              {{ confirming() === s.id ? t.confirmEndSession : t.endSession }}\n            </hm-button>\n          </span>\n        }\n      </li>\n    } @empty {\n      <li class=\"sp-account__item sp-account__meta\">{{ t.sessionsEmpty }}</li>\n    }\n  </ul>\n\n  @if (others() > 0) {\n    @if (confirming() === 'others') {\n      <p class=\"sp-account__hint\">{{ othersConfirm() }}</p>\n      <div class=\"sp-account__actions\">\n        <hm-button emphasis=\"high\" intent=\"danger\" icon=\"logout\" [loading]=\"busy()\" (clicked)=\"endOthers()\">{{ t.endOthers }}</hm-button>\n        <hm-button emphasis=\"minimal\" [disabled]=\"busy()\" (clicked)=\"cancel()\">{{ t.cancel }}</hm-button>\n      </div>\n    } @else {\n      <div class=\"sp-account__actions\">\n        <hm-button emphasis=\"medium\" icon=\"logout\" [disabled]=\"busy()\" (clicked)=\"ask('others')\">{{ t.endOthers }}</hm-button>\n      </div>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%;min-width:0}.sp-account__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__icon{display:inline-flex;flex:none;color:var(--hm-muted)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 12rem;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere}.sp-account__item-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-nano)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__form,.sp-account__code{display:flex;flex-direction:column;gap:var(--hm-space-xxxs)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__qr{align-self:flex-start;padding:var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface)}.sp-account__qr img{display:block;width:10rem;max-width:100%;height:auto}.sp-account__secret,.sp-account__codes code{font-family:Geist Mono,ui-monospace,monospace;overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0;padding:var(--hm-space-xxxs) var(--hm-space-xs) var(--hm-space-xxxs) var(--hm-space-md);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AccountSessionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-account-sessions', imports: [AlertComponent, ButtonComponent, IconComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading() && !sessions().length) {\n  <p class=\"sp-account__hint\" role=\"status\">{{ t.loading }}</p>\n} @else if (loadError()) {\n  <hm-alert variant=\"error\">{{ errorText(loadError()) }}</hm-alert>\n  @if (loadError() !== 'login_required' && loadError() !== 'invalid_token') {\n    <div class=\"sp-account__actions\">\n      <hm-button emphasis=\"medium\" icon=\"refresh\" (clicked)=\"load()\">{{ t.retry }}</hm-button>\n    </div>\n  }\n} @else {\n  @if (notice()) {\n    <hm-alert variant=\"success\">{{ notice() }}</hm-alert>\n  }\n  @if (error()) {\n    <hm-alert variant=\"error\">{{ error() }}</hm-alert>\n  }\n\n  <ul class=\"sp-account__list\">\n    @for (s of ordered(); track s.id) {\n      <li class=\"sp-account__item\">\n        <span class=\"sp-account__icon\"><hm-icon [shape]=\"s.device.mobile ? 'mobile' : 'computer'\" /></span>\n        <span class=\"sp-account__item-main\">\n          <span class=\"sp-account__item-title\">\n            <strong>{{ s.device.label }}</strong>\n            @if (s.current) {\n              <hm-tag [name]=\"t.thisSession\" color=\"success\" />\n            } @else if (s.this_device) {\n              <hm-tag [name]=\"t.thisBrowser\" color=\"info\" />\n            }\n            @if (!s.sso_active) {\n              <hm-tag [name]=\"t.appsOnly\" color=\"warning\" />\n            }\n          </span>\n          <span class=\"sp-account__meta\">{{ detail(s) }}</span>\n          <span class=\"sp-account__meta\">{{ since(s) }}</span>\n          @if (s.clients.length) {\n            <span class=\"sp-account__meta\">{{ apps(s) }}</span>\n          }\n        </span>\n        @if (!s.current) {\n          <span class=\"sp-account__item-actions\">\n            @if (confirming() === s.id) {\n              <hm-button size=\"small\" emphasis=\"minimal\" [disabled]=\"busy()\" (clicked)=\"cancel()\">{{ t.cancel }}</hm-button>\n            }\n            <hm-button size=\"small\" [emphasis]=\"confirming() === s.id ? 'high' : 'medium'\" intent=\"danger\" [loading]=\"busy() && confirming() === s.id\" [disabled]=\"busy() && confirming() !== s.id\" (clicked)=\"end(s)\">\n              {{ confirming() === s.id ? t.confirmEndSession : t.endSession }}\n            </hm-button>\n          </span>\n        }\n      </li>\n    } @empty {\n      <li class=\"sp-account__item sp-account__meta\">{{ t.sessionsEmpty }}</li>\n    }\n  </ul>\n\n  @if (others() > 0) {\n    @if (confirming() === 'others') {\n      <p class=\"sp-account__hint\">{{ othersConfirm() }}</p>\n      <div class=\"sp-account__actions\">\n        <hm-button emphasis=\"high\" intent=\"danger\" icon=\"logout\" [loading]=\"busy()\" (clicked)=\"endOthers()\">{{ t.endOthers }}</hm-button>\n        <hm-button emphasis=\"minimal\" [disabled]=\"busy()\" (clicked)=\"cancel()\">{{ t.cancel }}</hm-button>\n      </div>\n    } @else {\n      <div class=\"sp-account__actions\">\n        <hm-button emphasis=\"medium\" icon=\"logout\" [disabled]=\"busy()\" (clicked)=\"ask('others')\">{{ t.endOthers }}</hm-button>\n      </div>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%;min-width:0}.sp-account__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__icon{display:inline-flex;flex:none;color:var(--hm-muted)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 12rem;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere}.sp-account__item-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-nano)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__form,.sp-account__code{display:flex;flex-direction:column;gap:var(--hm-space-xxxs)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-account__qr{align-self:flex-start;padding:var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface)}.sp-account__qr img{display:block;width:10rem;max-width:100%;height:auto}.sp-account__secret,.sp-account__codes code{font-family:Geist Mono,ui-monospace,monospace;overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0;padding:var(--hm-space-xxxs) var(--hm-space-xs) var(--hm-space-xxxs) var(--hm-space-md);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}\n"] }]
+        }], ctorParameters: () => [] });
+
 /**
  * Tokens de aplicação pessoais (`x-app-token`) do usuário logado — `argos-admin /me/app-tokens`.
  * Sempre da aplicação LOGADA: o servidor tira o client do próprio access-token da sessão, então
@@ -1468,7 +2325,7 @@ class SpineAppTokensService {
         return firstValueFrom(this.http.post(this.baseUrl, body, { headers: this.headers }));
     }
     revoke(id) {
-        return firstValueFrom(this.http.delete(`${this.baseUrl}/${id}`, { headers: this.headers }));
+        return firstValueFrom(this.http.delete(`${this.baseUrl}${urlPath `/${id}`}`, { headers: this.headers }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAppTokensService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAppTokensService, providedIn: 'root' }); }
@@ -1488,6 +2345,8 @@ class AppTokensComponent {
     constructor() {
         this.text = inject(SPINE_MESSAGES).appTokens;
         this.fmt = formatMessage;
+        /** Para `[innerHTML]`: escapa os parâmetros (o nome da aplicação vem do servidor). */
+        this.fmtHtml = formatMessageHtml;
         this.locale = inject(SPINE_MESSAGES);
         this.service = inject(SpineAppTokensService);
         this.toast = inject(HermesToastService);
@@ -1624,11 +2483,11 @@ class AppTokensComponent {
         return detail || fallback;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AppTokensComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AppTokensComponent, isStandalone: true, selector: "spine-app-tokens", ngImport: i0, template: "@if (!available) {\n  <p class=\"sp-tokens__note\">{{ text.unavailable }}</p>\n} @else {\n  <!-- Token rec\u00E9m-criado: \u00FAnica vez em que o valor aparece. -->\n  @if (created(); as c) {\n    <div class=\"sp-tokens__created\" role=\"status\">\n      <p class=\"sp-tokens__created-title\">\n        <hm-icon shape=\"check-circle\" /> {{ fmt(text.created, { name: c.name }) }}\n      </p>\n      <code class=\"sp-tokens__secret\">{{ c.token }}</code>\n      <p class=\"sp-tokens__note\" [innerHTML]=\"fmt(text.sendHeader, { date: formatDate(c.expiresAt) })\"></p>\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"high\" icon=\"copy\" (clicked)=\"copyCreated()\">{{ text.copyToken }}</hm-button>\n        <hm-button emphasis=\"minimal\" (clicked)=\"dismissCreated()\">{{ text.saved }}</hm-button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <p class=\"sp-tokens__note\">{{ text.loading }}</p>\n  } @else if (loadError()) {\n    <p class=\"sp-tokens__note sp-tokens__note--error\">{{ loadError() }}</p>\n  } @else {\n    @if (tokens().length) {\n      <ul class=\"sp-tokens__list\">\n        @for (t of tokens(); track t.id) {\n          <li class=\"sp-tokens__item\" [class.sp-tokens__item--expired]=\"t.expired\">\n            <span class=\"sp-tokens__item-main\">\n              <strong>{{ t.name }}</strong>\n              <span class=\"sp-tokens__meta\">{{ t.badge_name }} \u00B7 <code>{{ t.prefix }}</code></span>\n              <span class=\"sp-tokens__meta\">\n                @if (t.expired) { <span class=\"sp-tokens__expired\">{{ fmt(text.expiredOn, { date: formatDate(t.expires_at) }) }}</span> }\n                @else { {{ fmt(text.expiresOn, { date: formatDate(t.expires_at) }) }} }\n                \u00B7 {{ fmt(text.lastUsed, { date: formatDate(t.last_used_at) }) }}\n              </span>\n            </span>\n            <hm-button emphasis=\"minimal\" intent=\"danger\" (clicked)=\"revoke(t)\">\n              {{ confirmingRevoke() === t.id ? text.confirmRevoke : text.revoke }}\n            </hm-button>\n          </li>\n        }\n      </ul>\n    } @else if (!creating()) {\n      <p class=\"sp-tokens__note\">{{ text.empty }}</p>\n    }\n\n    @if (creating()) {\n      <form class=\"sp-tokens__form\" (submit)=\"$event.preventDefault(); submit()\">\n        @if (!badges().length) {\n          <p class=\"sp-tokens__note\">{{ text.noBadges }}</p>\n        } @else {\n          @if (clientName()) {\n            <p class=\"sp-tokens__note\" [innerHTML]=\"fmt(text.appOnly, { name: clientName() })\"></p>\n          }\n          @if (badgeOptions().length > 1) {\n            <div class=\"sp-tokens__field\">\n              <span class=\"sp-tokens__label\">{{ text.accessLevel }}</span>\n              <hm-segmented-control emphasis=\"action\" [label]=\"text.accessLevel\" [options]=\"badgeOptions()\" [value]=\"badgeId()\" (valueChange)=\"badgeId.set($event)\" />\n            </div>\n          }\n          <hm-input [label]=\"text.name\" [placeholder]=\"text.namePlaceholder\" [formControl]=\"nameControl\" [messages]=\"{ required: text.nameRequired, maxlength: text.nameMax }\" />\n          <div class=\"sp-tokens__field\">\n            <span class=\"sp-tokens__label\">{{ text.validity }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"text.validity\" [options]=\"validityOptions()\" [value]=\"validity()\" (valueChange)=\"validity.set($event)\" />\n          </div>\n        }\n        <div class=\"sp-tokens__actions\">\n          @if (badges().length) {\n            <hm-button type=\"submit\" emphasis=\"high\" icon=\"key\" [disabled]=\"!canSubmit()\" [loading]=\"submitting()\">{{ text.create }}</hm-button>\n          }\n          <hm-button emphasis=\"minimal\" (clicked)=\"cancelCreate()\">{{ text.cancel }}</hm-button>\n        </div>\n      </form>\n    } @else {\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"medium\" icon=\"plus\" [disabled]=\"atLimit()\" (clicked)=\"startCreate()\">{{ text.newToken }}</hm-button>\n        <span class=\"sp-tokens__note\">{{ fmt(text.validCount, { valid: validCount(), max: maxActive() }) }}</span>\n      </div>\n      @if (atLimit()) {\n        <p class=\"sp-tokens__note\">{{ text.limit }}</p>\n      }\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%}.sp-tokens__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__note--error{color:var(--hm-danger)}.sp-tokens__note code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-tokens__item{display:flex;align-items:center;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-tokens__item+.sp-tokens__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-tokens__item--expired .sp-tokens__item-main strong{color:var(--hm-muted)}.sp-tokens__item-main{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm)}.sp-tokens__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__meta code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__expired{color:var(--hm-danger)}.sp-tokens__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-tokens__form{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-tokens__field{display:flex;flex-direction:column;gap:var(--hm-space-micro)}.sp-tokens__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-success);border-radius:var(--hm-radius-control);background:var(--hm-success-bg)}.sp-tokens__created-title{display:flex;align-items:center;gap:var(--hm-space-nano);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created-title hm-icon{color:var(--hm-success)}.sp-tokens__secret{display:block;padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-family:Geist Mono,ui-monospace,monospace;font-size:var(--hm-font-size-xs);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: InputComponent, selector: "hm-input", inputs: ["value", "label", "type", "placeholder", "icon", "labelHidden", "hint", "prefix", "suffix", "prefixIcon", "mask", "maskValue", "min", "max", "step", "stepButtons", "maxLength", "autocomplete", "inputMode"], outputs: ["valueChange"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AppTokensComponent, isStandalone: true, selector: "spine-app-tokens", ngImport: i0, template: "@if (!available) {\n  <p class=\"sp-tokens__note\">{{ text.unavailable }}</p>\n} @else {\n  <!-- Token rec\u00E9m-criado: \u00FAnica vez em que o valor aparece. -->\n  @if (created(); as c) {\n    <div class=\"sp-tokens__created\" role=\"status\">\n      <p class=\"sp-tokens__created-title\">\n        <hm-icon shape=\"check-circle\" /> {{ fmt(text.created, { name: c.name }) }}\n      </p>\n      <code class=\"sp-tokens__secret\">{{ c.token }}</code>\n      <p class=\"sp-tokens__note\" [innerHTML]=\"fmtHtml(text.sendHeader, { date: formatDate(c.expiresAt) })\"></p>\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"high\" icon=\"copy\" (clicked)=\"copyCreated()\">{{ text.copyToken }}</hm-button>\n        <hm-button emphasis=\"minimal\" (clicked)=\"dismissCreated()\">{{ text.saved }}</hm-button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <p class=\"sp-tokens__note\">{{ text.loading }}</p>\n  } @else if (loadError()) {\n    <p class=\"sp-tokens__note sp-tokens__note--error\">{{ loadError() }}</p>\n  } @else {\n    @if (tokens().length) {\n      <ul class=\"sp-tokens__list\">\n        @for (t of tokens(); track t.id) {\n          <li class=\"sp-tokens__item\" [class.sp-tokens__item--expired]=\"t.expired\">\n            <span class=\"sp-tokens__item-main\">\n              <strong>{{ t.name }}</strong>\n              <span class=\"sp-tokens__meta\">{{ t.badge_name }} \u00B7 <code>{{ t.prefix }}</code></span>\n              <span class=\"sp-tokens__meta\">\n                @if (t.expired) { <span class=\"sp-tokens__expired\">{{ fmt(text.expiredOn, { date: formatDate(t.expires_at) }) }}</span> }\n                @else { {{ fmt(text.expiresOn, { date: formatDate(t.expires_at) }) }} }\n                \u00B7 {{ fmt(text.lastUsed, { date: formatDate(t.last_used_at) }) }}\n              </span>\n            </span>\n            <hm-button emphasis=\"minimal\" intent=\"danger\" (clicked)=\"revoke(t)\">\n              {{ confirmingRevoke() === t.id ? text.confirmRevoke : text.revoke }}\n            </hm-button>\n          </li>\n        }\n      </ul>\n    } @else if (!creating()) {\n      <p class=\"sp-tokens__note\">{{ text.empty }}</p>\n    }\n\n    @if (creating()) {\n      <form class=\"sp-tokens__form\" (submit)=\"$event.preventDefault(); submit()\">\n        @if (!badges().length) {\n          <p class=\"sp-tokens__note\">{{ text.noBadges }}</p>\n        } @else {\n          @if (clientName()) {\n            <p class=\"sp-tokens__note\" [innerHTML]=\"fmtHtml(text.appOnly, { name: clientName() })\"></p>\n          }\n          @if (badgeOptions().length > 1) {\n            <div class=\"sp-tokens__field\">\n              <span class=\"sp-tokens__label\">{{ text.accessLevel }}</span>\n              <hm-segmented-control emphasis=\"action\" [label]=\"text.accessLevel\" [options]=\"badgeOptions()\" [value]=\"badgeId()\" (valueChange)=\"badgeId.set($event)\" />\n            </div>\n          }\n          <hm-input [label]=\"text.name\" [placeholder]=\"text.namePlaceholder\" [formControl]=\"nameControl\" [messages]=\"{ required: text.nameRequired, maxlength: text.nameMax }\" />\n          <div class=\"sp-tokens__field\">\n            <span class=\"sp-tokens__label\">{{ text.validity }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"text.validity\" [options]=\"validityOptions()\" [value]=\"validity()\" (valueChange)=\"validity.set($event)\" />\n          </div>\n        }\n        <div class=\"sp-tokens__actions\">\n          @if (badges().length) {\n            <hm-button type=\"submit\" emphasis=\"high\" icon=\"key\" [disabled]=\"!canSubmit()\" [loading]=\"submitting()\">{{ text.create }}</hm-button>\n          }\n          <hm-button emphasis=\"minimal\" (clicked)=\"cancelCreate()\">{{ text.cancel }}</hm-button>\n        </div>\n      </form>\n    } @else {\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"medium\" icon=\"plus\" [disabled]=\"atLimit()\" (clicked)=\"startCreate()\">{{ text.newToken }}</hm-button>\n        <span class=\"sp-tokens__note\">{{ fmt(text.validCount, { valid: validCount(), max: maxActive() }) }}</span>\n      </div>\n      @if (atLimit()) {\n        <p class=\"sp-tokens__note\">{{ text.limit }}</p>\n      }\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%}.sp-tokens__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__note--error{color:var(--hm-danger)}.sp-tokens__note code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-tokens__item{display:flex;align-items:center;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-tokens__item+.sp-tokens__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-tokens__item--expired .sp-tokens__item-main strong{color:var(--hm-muted)}.sp-tokens__item-main{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm)}.sp-tokens__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__meta code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__expired{color:var(--hm-danger)}.sp-tokens__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-tokens__form{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-tokens__field{display:flex;flex-direction:column;gap:var(--hm-space-micro)}.sp-tokens__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-success);border-radius:var(--hm-radius-control);background:var(--hm-success-bg)}.sp-tokens__created-title{display:flex;align-items:center;gap:var(--hm-space-nano);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created-title hm-icon{color:var(--hm-success)}.sp-tokens__secret{display:block;padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-family:Geist Mono,ui-monospace,monospace;font-size:var(--hm-font-size-xs);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: InputComponent, selector: "hm-input", inputs: ["value", "label", "type", "placeholder", "icon", "labelHidden", "hint", "prefix", "suffix", "prefixIcon", "mask", "maskValue", "min", "max", "step", "stepButtons", "maxLength", "autocomplete", "inputMode"], outputs: ["valueChange"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AppTokensComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spine-app-tokens', imports: [ReactiveFormsModule, ButtonComponent, InputComponent, IconComponent, SegmentedControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!available) {\n  <p class=\"sp-tokens__note\">{{ text.unavailable }}</p>\n} @else {\n  <!-- Token rec\u00E9m-criado: \u00FAnica vez em que o valor aparece. -->\n  @if (created(); as c) {\n    <div class=\"sp-tokens__created\" role=\"status\">\n      <p class=\"sp-tokens__created-title\">\n        <hm-icon shape=\"check-circle\" /> {{ fmt(text.created, { name: c.name }) }}\n      </p>\n      <code class=\"sp-tokens__secret\">{{ c.token }}</code>\n      <p class=\"sp-tokens__note\" [innerHTML]=\"fmt(text.sendHeader, { date: formatDate(c.expiresAt) })\"></p>\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"high\" icon=\"copy\" (clicked)=\"copyCreated()\">{{ text.copyToken }}</hm-button>\n        <hm-button emphasis=\"minimal\" (clicked)=\"dismissCreated()\">{{ text.saved }}</hm-button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <p class=\"sp-tokens__note\">{{ text.loading }}</p>\n  } @else if (loadError()) {\n    <p class=\"sp-tokens__note sp-tokens__note--error\">{{ loadError() }}</p>\n  } @else {\n    @if (tokens().length) {\n      <ul class=\"sp-tokens__list\">\n        @for (t of tokens(); track t.id) {\n          <li class=\"sp-tokens__item\" [class.sp-tokens__item--expired]=\"t.expired\">\n            <span class=\"sp-tokens__item-main\">\n              <strong>{{ t.name }}</strong>\n              <span class=\"sp-tokens__meta\">{{ t.badge_name }} \u00B7 <code>{{ t.prefix }}</code></span>\n              <span class=\"sp-tokens__meta\">\n                @if (t.expired) { <span class=\"sp-tokens__expired\">{{ fmt(text.expiredOn, { date: formatDate(t.expires_at) }) }}</span> }\n                @else { {{ fmt(text.expiresOn, { date: formatDate(t.expires_at) }) }} }\n                \u00B7 {{ fmt(text.lastUsed, { date: formatDate(t.last_used_at) }) }}\n              </span>\n            </span>\n            <hm-button emphasis=\"minimal\" intent=\"danger\" (clicked)=\"revoke(t)\">\n              {{ confirmingRevoke() === t.id ? text.confirmRevoke : text.revoke }}\n            </hm-button>\n          </li>\n        }\n      </ul>\n    } @else if (!creating()) {\n      <p class=\"sp-tokens__note\">{{ text.empty }}</p>\n    }\n\n    @if (creating()) {\n      <form class=\"sp-tokens__form\" (submit)=\"$event.preventDefault(); submit()\">\n        @if (!badges().length) {\n          <p class=\"sp-tokens__note\">{{ text.noBadges }}</p>\n        } @else {\n          @if (clientName()) {\n            <p class=\"sp-tokens__note\" [innerHTML]=\"fmt(text.appOnly, { name: clientName() })\"></p>\n          }\n          @if (badgeOptions().length > 1) {\n            <div class=\"sp-tokens__field\">\n              <span class=\"sp-tokens__label\">{{ text.accessLevel }}</span>\n              <hm-segmented-control emphasis=\"action\" [label]=\"text.accessLevel\" [options]=\"badgeOptions()\" [value]=\"badgeId()\" (valueChange)=\"badgeId.set($event)\" />\n            </div>\n          }\n          <hm-input [label]=\"text.name\" [placeholder]=\"text.namePlaceholder\" [formControl]=\"nameControl\" [messages]=\"{ required: text.nameRequired, maxlength: text.nameMax }\" />\n          <div class=\"sp-tokens__field\">\n            <span class=\"sp-tokens__label\">{{ text.validity }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"text.validity\" [options]=\"validityOptions()\" [value]=\"validity()\" (valueChange)=\"validity.set($event)\" />\n          </div>\n        }\n        <div class=\"sp-tokens__actions\">\n          @if (badges().length) {\n            <hm-button type=\"submit\" emphasis=\"high\" icon=\"key\" [disabled]=\"!canSubmit()\" [loading]=\"submitting()\">{{ text.create }}</hm-button>\n          }\n          <hm-button emphasis=\"minimal\" (clicked)=\"cancelCreate()\">{{ text.cancel }}</hm-button>\n        </div>\n      </form>\n    } @else {\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"medium\" icon=\"plus\" [disabled]=\"atLimit()\" (clicked)=\"startCreate()\">{{ text.newToken }}</hm-button>\n        <span class=\"sp-tokens__note\">{{ fmt(text.validCount, { valid: validCount(), max: maxActive() }) }}</span>\n      </div>\n      @if (atLimit()) {\n        <p class=\"sp-tokens__note\">{{ text.limit }}</p>\n      }\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%}.sp-tokens__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__note--error{color:var(--hm-danger)}.sp-tokens__note code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-tokens__item{display:flex;align-items:center;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-tokens__item+.sp-tokens__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-tokens__item--expired .sp-tokens__item-main strong{color:var(--hm-muted)}.sp-tokens__item-main{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm)}.sp-tokens__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__meta code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__expired{color:var(--hm-danger)}.sp-tokens__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-tokens__form{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-tokens__field{display:flex;flex-direction:column;gap:var(--hm-space-micro)}.sp-tokens__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-success);border-radius:var(--hm-radius-control);background:var(--hm-success-bg)}.sp-tokens__created-title{display:flex;align-items:center;gap:var(--hm-space-nano);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created-title hm-icon{color:var(--hm-success)}.sp-tokens__secret{display:block;padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-family:Geist Mono,ui-monospace,monospace;font-size:var(--hm-font-size-xs);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}\n"] }]
+            args: [{ selector: 'spine-app-tokens', imports: [ReactiveFormsModule, ButtonComponent, InputComponent, IconComponent, SegmentedControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!available) {\n  <p class=\"sp-tokens__note\">{{ text.unavailable }}</p>\n} @else {\n  <!-- Token rec\u00E9m-criado: \u00FAnica vez em que o valor aparece. -->\n  @if (created(); as c) {\n    <div class=\"sp-tokens__created\" role=\"status\">\n      <p class=\"sp-tokens__created-title\">\n        <hm-icon shape=\"check-circle\" /> {{ fmt(text.created, { name: c.name }) }}\n      </p>\n      <code class=\"sp-tokens__secret\">{{ c.token }}</code>\n      <p class=\"sp-tokens__note\" [innerHTML]=\"fmtHtml(text.sendHeader, { date: formatDate(c.expiresAt) })\"></p>\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"high\" icon=\"copy\" (clicked)=\"copyCreated()\">{{ text.copyToken }}</hm-button>\n        <hm-button emphasis=\"minimal\" (clicked)=\"dismissCreated()\">{{ text.saved }}</hm-button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <p class=\"sp-tokens__note\">{{ text.loading }}</p>\n  } @else if (loadError()) {\n    <p class=\"sp-tokens__note sp-tokens__note--error\">{{ loadError() }}</p>\n  } @else {\n    @if (tokens().length) {\n      <ul class=\"sp-tokens__list\">\n        @for (t of tokens(); track t.id) {\n          <li class=\"sp-tokens__item\" [class.sp-tokens__item--expired]=\"t.expired\">\n            <span class=\"sp-tokens__item-main\">\n              <strong>{{ t.name }}</strong>\n              <span class=\"sp-tokens__meta\">{{ t.badge_name }} \u00B7 <code>{{ t.prefix }}</code></span>\n              <span class=\"sp-tokens__meta\">\n                @if (t.expired) { <span class=\"sp-tokens__expired\">{{ fmt(text.expiredOn, { date: formatDate(t.expires_at) }) }}</span> }\n                @else { {{ fmt(text.expiresOn, { date: formatDate(t.expires_at) }) }} }\n                \u00B7 {{ fmt(text.lastUsed, { date: formatDate(t.last_used_at) }) }}\n              </span>\n            </span>\n            <hm-button emphasis=\"minimal\" intent=\"danger\" (clicked)=\"revoke(t)\">\n              {{ confirmingRevoke() === t.id ? text.confirmRevoke : text.revoke }}\n            </hm-button>\n          </li>\n        }\n      </ul>\n    } @else if (!creating()) {\n      <p class=\"sp-tokens__note\">{{ text.empty }}</p>\n    }\n\n    @if (creating()) {\n      <form class=\"sp-tokens__form\" (submit)=\"$event.preventDefault(); submit()\">\n        @if (!badges().length) {\n          <p class=\"sp-tokens__note\">{{ text.noBadges }}</p>\n        } @else {\n          @if (clientName()) {\n            <p class=\"sp-tokens__note\" [innerHTML]=\"fmtHtml(text.appOnly, { name: clientName() })\"></p>\n          }\n          @if (badgeOptions().length > 1) {\n            <div class=\"sp-tokens__field\">\n              <span class=\"sp-tokens__label\">{{ text.accessLevel }}</span>\n              <hm-segmented-control emphasis=\"action\" [label]=\"text.accessLevel\" [options]=\"badgeOptions()\" [value]=\"badgeId()\" (valueChange)=\"badgeId.set($event)\" />\n            </div>\n          }\n          <hm-input [label]=\"text.name\" [placeholder]=\"text.namePlaceholder\" [formControl]=\"nameControl\" [messages]=\"{ required: text.nameRequired, maxlength: text.nameMax }\" />\n          <div class=\"sp-tokens__field\">\n            <span class=\"sp-tokens__label\">{{ text.validity }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"text.validity\" [options]=\"validityOptions()\" [value]=\"validity()\" (valueChange)=\"validity.set($event)\" />\n          </div>\n        }\n        <div class=\"sp-tokens__actions\">\n          @if (badges().length) {\n            <hm-button type=\"submit\" emphasis=\"high\" icon=\"key\" [disabled]=\"!canSubmit()\" [loading]=\"submitting()\">{{ text.create }}</hm-button>\n          }\n          <hm-button emphasis=\"minimal\" (clicked)=\"cancelCreate()\">{{ text.cancel }}</hm-button>\n        </div>\n      </form>\n    } @else {\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"medium\" icon=\"plus\" [disabled]=\"atLimit()\" (clicked)=\"startCreate()\">{{ text.newToken }}</hm-button>\n        <span class=\"sp-tokens__note\">{{ fmt(text.validCount, { valid: validCount(), max: maxActive() }) }}</span>\n      </div>\n      @if (atLimit()) {\n        <p class=\"sp-tokens__note\">{{ text.limit }}</p>\n      }\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%}.sp-tokens__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__note--error{color:var(--hm-danger)}.sp-tokens__note code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-tokens__item{display:flex;align-items:center;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-tokens__item+.sp-tokens__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-tokens__item--expired .sp-tokens__item-main strong{color:var(--hm-muted)}.sp-tokens__item-main{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm)}.sp-tokens__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__meta code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__expired{color:var(--hm-danger)}.sp-tokens__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-tokens__form{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-tokens__field{display:flex;flex-direction:column;gap:var(--hm-space-micro)}.sp-tokens__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-success);border-radius:var(--hm-radius-control);background:var(--hm-success-bg)}.sp-tokens__created-title{display:flex;align-items:center;gap:var(--hm-space-nano);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created-title hm-icon{color:var(--hm-success)}.sp-tokens__secret{display:block;padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-family:Geist Mono,ui-monospace,monospace;font-size:var(--hm-font-size-xs);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}\n"] }]
         }], ctorParameters: () => [] });
 
 /** Dependências que valem mostrar em "Sobre" (as demais são detalhe de build). */
@@ -1645,9 +2504,9 @@ const KEY_DEPENDENCIES = [
 ];
 /**
  * Painel de configurações do shell (substitui as telas do antigo módulo "Sistema"): Aparência,
- * Região, Atalhos, Conta e Sobre, mais as seções que o app registrar com
- * `provideSettingsSection`. Tudo vale na hora — cada controle chama o serviço que já persiste
- * aquela preferência (tema, densidade, menu lateral, fuso).
+ * Região, Atalhos, Conta, Conta e segurança (MFA, códigos de recuperação e sessões do Argos) e Sobre, mais
+ * as seções que o app registrar com `provideSettingsSection`. Tudo vale na hora — cada controle chama
+ * o serviço que já persiste aquela preferência (tema, densidade, menu lateral, fuso).
  *
  * Aberto por `SpineSettingsService.open()` — menu do perfil, `Ctrl+,` ou `?settings=<seção>`.
  */
@@ -1667,11 +2526,18 @@ class SettingsPanelComponent {
         this.shortcutService = inject(ShortcutService);
         this.onboarding = inject(OnboardingService);
         this.auth = inject(AuthorizationService);
+        this.authConfig = inject(AUTH_CONFIG, { optional: true });
         this.toast = inject(HermesToastService);
         this.packageInfo = inject(APP_PACKAGE_INFO, { optional: true }) ?? {};
         this.config = inject(SPINE_CONFIG, { optional: true });
         this.appSections = inject(SPINE_SETTINGS_SECTIONS, { optional: true }) ?? [];
         this.appName = this.config?.appName ?? 'Hermes';
+        /**
+         * "Copiar token de acesso" é ferramenta de desenvolvimento: põe o token da sessão (Bearer de tudo que a
+         * pessoa pode fazer) na área de transferência, ao alcance de qualquer app/extensão que leia o clipboard.
+         * Só aparece com `SpineConfig.technicalDocs` (sem configuração, só em `isDevMode()`), como a visão técnica.
+         */
+        this.showAccessToken = this.config?.technicalDocs ?? isDevMode();
         // ── Aparência ───────────────────────────────────────────────────────────────
         this.themeOptions = computed(() => [
             { value: 'light', label: this.text.themeLight, icon: 'sun' },
@@ -1726,6 +2592,11 @@ class SettingsPanelComponent {
         // ── Atalhos ─────────────────────────────────────────────────────────────────
         /** Atalhos registrados (favoritos numa linha só) + os que outra peça dispara — os mesmos do painel "?". */
         this.shortcutItems = this.shortcutService.panelItems;
+        this.userStorage = inject(SpineUserStorage);
+        // ── Conta e segurança ───────────────────────────────────────────────────────
+        /** API da conta no Argos (Bearer com o token da sessão), a partir do `AUTH_CONFIG`. Sem ela (sem
+         *  `authority`/`realmId`, ou com `CHANGE_ME`) a seção não aparece. */
+        this.accountSecurity = inject(SpineAccountSecurityService).available;
         // ── Sobre ───────────────────────────────────────────────────────────────────
         this.dependencies = KEY_DEPENDENCIES
             .map((d) => ({ ...d, version: this.packageInfo.dependencies?.[d.name] }))
@@ -1770,6 +2641,8 @@ class SettingsPanelComponent {
             : formatMessage(this.text.sessionExpiresAt, { time: when });
     }
     async copyToken() {
+        if (!this.showAccessToken)
+            return;
         const token = this.auth.getToken();
         if (!token) {
             this.toast.warning(this.text.noSessionToken);
@@ -1779,8 +2652,18 @@ class SettingsPanelComponent {
     }
     logout() {
         this.settings.close();
+        this.userStorage.clearHistory();
         this.auth.logout();
     }
+    /** Login da pessoa (`preferred_username` do token, ou o e-mail), para dizer QUAL conta do Argos. */
+    get accountLogin() {
+        const payload = decodeTokenPayload(this.auth.getToken());
+        const login = payload?.['preferred_username'] ?? payload?.['email'];
+        return typeof login === 'string' ? login : '';
+    }
+    get accountRealm() {
+        return this.authConfig?.realmId ?? '';
+    }
     get buildDate() {
         const date = this.packageInfo.buildDate;
         return date ? new Intl.DateTimeFormat(this.messages.meta.locale, { dateStyle: 'short', timeStyle: 'short' }).format(new Date(date)) : '';
@@ -1821,16 +2704,17 @@ class SettingsPanelComponent {
             this.settings.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SettingsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SettingsPanelComponent, isStandalone: true, selector: "spine-settings-panel", ngImport: i0, template: "<!-- Montado s\u00F3 enquanto aberto: nada disto (lista de fusos, leitura do token...) custa no\n     carregamento de toda p\u00E1gina. -->\n@if (settings.isOpen()) {\n  <hm-settings-dialog\n    [heading]=\"text.heading\"\n    [open]=\"true\"\n    (openChange)=\"onOpenChange($event)\"\n    [activeSection]=\"settings.section()\"\n    (activeSectionChange)=\"settings.section.set($event)\"\n  >\n    <!-- \u2500\u2500 Conta \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.account\" [label]=\"text.account\" icon=\"user\" [keywords]=\"text.accountKeywords\">\n      <div class=\"sp-settings__profile\">\n        <hm-account-avatar [name]=\"profile.name ?? text.user\" [imageUrl]=\"profile.picture\" />\n        <span class=\"sp-settings__profile-text\">\n          <strong>{{ profile.name ?? text.user }}</strong>\n          @if (profile.role) { <span>{{ profile.role }}</span> }\n        </span>\n      </div>\n\n      <!-- S\u00F3 informativo: a troca de n\u00EDvel fica no menu do perfil, perto de onde se trabalha. -->\n      @if (badge) {\n        <hm-settings-row [label]=\"text.accessLevel\" [keywords]=\"text.accessLevelKeywords\">\n          <span class=\"sp-settings__value\">{{ badge.name }}</span>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.session\" [description]=\"text.sessionDescription\" [keywords]=\"text.sessionKeywords\">\n        <span class=\"sp-settings__value\">{{ sessionExpiry }}</span>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.accessToken\" [description]=\"text.accessTokenDescription\" [keywords]=\"text.accessTokenKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"copy\" (clicked)=\"copyToken()\">{{ text.copy }}</hm-button>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.appTokens\" [stacked]=\"true\"\n        [description]=\"text.appTokensDescription\"\n        [keywords]=\"text.appTokensKeywords\">\n        <spine-app-tokens />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.logout\" [description]=\"text.logoutDescription\" [keywords]=\"text.logoutKeywords\">\n        <hm-button emphasis=\"medium\" intent=\"danger\" icon=\"logout\" (clicked)=\"logout()\">{{ text.logout }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Apar\u00EAncia \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.appearance\" [label]=\"text.appearance\" icon=\"color-palette\" [keywords]=\"text.appearanceKeywords\">\n      <hm-settings-row [label]=\"text.theme\" [description]=\"text.themeDescription\" [keywords]=\"text.themeKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.theme\" [options]=\"themeOptions()\" [value]=\"themeMode()\" (valueChange)=\"setThemeMode($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.accent\" [description]=\"text.accentDescription\" [keywords]=\"text.accentKeywords\" [stacked]=\"true\">\n        <hm-theme-picker\n          [families]=\"families\"\n          [family]=\"family()\"\n          [theme]=\"appliedTheme()\"\n          [showMode]=\"false\"\n          (familyChosen)=\"setFamily($event)\"\n        />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.density\" [description]=\"text.densityDescription\" [keywords]=\"text.densityKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.density\" [options]=\"densityOptions()\" [value]=\"densityValue()\" (valueChange)=\"setDensity($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.font\" [description]=\"text.fontDescription\" [keywords]=\"text.fontKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.font\" [options]=\"fontOptions\" [value]=\"fontValue()\" (valueChange)=\"setFont($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.sidebar\" [description]=\"text.sidebarDescription\" [keywords]=\"text.sidebarKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.sidebar\" [options]=\"sidebarOptions()\" [value]=\"sidebar.mode()\" (valueChange)=\"setSidebarMode($event)\" />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Regi\u00E3o \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.region\" [label]=\"text.region\" icon=\"clock\" [keywords]=\"text.regionKeywords\">\n      <hm-settings-row [label]=\"text.language\" [description]=\"text.languageDescription\" [keywords]=\"text.languageKeywords\">\n        <hm-select\n          class=\"sp-settings__language\"\n          [label]=\"text.language\"\n          [labelHidden]=\"true\"\n          [value]=\"preferences.language()\"\n          (valueChange)=\"preferences.setLanguage($event ?? '')\"\n        >\n          @for (option of languageOptions(); track option.value) {\n            <option [value]=\"option.value\" [attr.lang]=\"option.value || null\">{{ option.label }}</option>\n          }\n        </hm-select>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.timeZone\" [keywords]=\"text.timeZoneKeywords\">\n        <span rowDescription class=\"sp-settings__hint\">{{ fmt(text.timeZoneHint, { now: timeZonePreview() }) }}</span>\n        <hm-combobox\n          class=\"sp-settings__timezone\"\n          [label]=\"text.timeZone\"\n          [labelHidden]=\"true\"\n          icon=\"world\"\n          [options]=\"timeZoneOptions()\"\n          [value]=\"preferences.timeZone()\"\n          (valueChange)=\"preferences.setTimeZone($event)\"\n        />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Atalhos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.shortcuts\" [label]=\"text.shortcuts\" icon=\"keyboard\" [description]=\"text.shortcutsDescription\" [keywords]=\"text.shortcutsKeywords\">\n      <!-- Mesma lista do painel \"?\", sem busca (a do di\u00E1logo de configura\u00E7\u00F5es j\u00E1 cobre a se\u00E7\u00E3o);\n           o interruptor de tecla \u00FAnica (WCAG 2.1.4) persiste no SpinePreferencesService. -->\n      <hm-shortcut-list characterKeysToggle [registered]=\"false\" [items]=\"shortcutItems()\" [headingLevel]=\"4\" />\n      <hm-settings-row [label]=\"text.tour\" [description]=\"text.tourDescription\" [keywords]=\"text.tourKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"play\" (clicked)=\"replayTour()\">{{ text.replayTour }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Se\u00E7\u00F5es do app (provideSettingsSection) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @for (s of appSections; track s.key) {\n      <hm-settings-section [key]=\"s.key\" [label]=\"s.label\" [icon]=\"s.icon ?? 'cog'\" [description]=\"s.description ?? ''\" [keywords]=\"s.keywords ?? ''\">\n        <ng-container *ngComponentOutlet=\"s.component\" />\n      </hm-settings-section>\n    }\n\n    <!-- \u2500\u2500 Sobre \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.about\" [label]=\"text.about\" icon=\"info-circle\" [keywords]=\"text.aboutKeywords\">\n      <hm-settings-row [label]=\"text.application\">\n        <span class=\"sp-settings__value\">{{ appName }}@if (packageInfo.name) { <span class=\"sp-settings__muted\"> \u00B7 {{ packageInfo.name }}</span> }</span>\n      </hm-settings-row>\n      <hm-settings-row [label]=\"text.version\" [keywords]=\"text.versionKeywords\">\n        <span class=\"sp-settings__value sp-settings__mono\">{{ packageInfo.version ?? '\u2014' }}</span>\n      </hm-settings-row>\n      @if (buildDate) {\n        <hm-settings-row [label]=\"text.buildDate\">\n          <span class=\"sp-settings__value\">{{ buildDate }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.environment) {\n        <hm-settings-row [label]=\"text.environment\" [keywords]=\"text.environmentKeywords\">\n          <span class=\"sp-settings__value\">{{ packageInfo.environment }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.repository?.url || packageInfo.docs || packageInfo.issues) {\n        <hm-settings-row [label]=\"text.links\" [keywords]=\"text.linksKeywords\">\n          <span class=\"sp-settings__links\">\n            @if (packageInfo.docs) { <hm-button emphasis=\"minimal\" icon=\"book\" [link]=\"packageInfo.docs\" [newTab]=\"true\">{{ text.docs }}</hm-button> }\n            @if (packageInfo.issues) { <hm-button emphasis=\"minimal\" icon=\"bug\" [link]=\"packageInfo.issues\" [newTab]=\"true\">{{ text.reportIssue }}</hm-button> }\n            @if (packageInfo.repository?.url) { <hm-button emphasis=\"minimal\" icon=\"link\" [link]=\"packageInfo.repository!.url!\" [newTab]=\"true\">{{ text.repository }}</hm-button> }\n          </span>\n        </hm-settings-row>\n      }\n      @if (dependencies.length) {\n        <hm-settings-row [label]=\"text.dependencies\" [description]=\"text.dependenciesDescription\" [keywords]=\"text.dependenciesKeywords\" [stacked]=\"true\">\n          <dl class=\"sp-settings__deps\">\n            @for (d of dependencies; track d.name) {\n              <div><dt>{{ d.label }}</dt><dd class=\"sp-settings__mono\">{{ d.version }}</dd></div>\n            }\n          </dl>\n        </hm-settings-row>\n      }\n      <hm-settings-row [label]=\"text.supportInfo\" [description]=\"text.supportInfoDescription\" [keywords]=\"text.supportInfoKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"clipboard\" (clicked)=\"copySupportInfo()\">{{ text.copy }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n  </hm-settings-dialog>\n}\n", styles: ["@charset \"UTF-8\";.sp-settings__hint{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__timezone{display:block;width:min(320px,100%)}.sp-settings__profile{display:flex;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) 0 var(--hm-space-sm)}.sp-settings__profile-text{display:flex;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text)}.sp-settings__profile-text span{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-settings__value{color:var(--hm-text);font-size:var(--hm-font-size-sm);text-align:end}.sp-settings__muted{color:var(--hm-muted)}.sp-settings__mono{font-family:Geist Mono,ui-monospace,monospace}.sp-settings__links{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-nano)}.sp-settings__deps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0}.sp-settings__deps div{display:flex;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-hover)}.sp-settings__deps dt{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__deps dd{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-xs)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AppTokensComponent, selector: "spine-app-tokens" }, { kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: ComboboxComponent, selector: "hm-combobox", inputs: ["label", "options", "value", "placeholder", "icon", "hint", "help", "size", "labelHidden", "clearable", "requiredManual", "loading", "allowCustomValue"], outputs: ["valueChange"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: SettingsDialogComponent, selector: "hm-settings-dialog", inputs: ["open", "heading", "activeSection", "closeHandler", "actions", "submitLabel", "cancelLabel"], outputs: ["openChange", "activeSectionChange", "closed", "submitted"] }, { kind: "component", type: SettingsRowComponent, selector: "hm-settings-row", inputs: ["label", "description", "keywords", "stacked"] }, { kind: "component", type: SettingsSectionComponent, selector: "hm-settings-section", inputs: ["key", "label", "icon", "description", "keywords", "control", "invalid"] }, { kind: "component", type: SelectComponent, selector: "hm-select", inputs: ["value", "label", "labelHidden", "hint"], outputs: ["valueChange"] }, { kind: "component", type: ShortcutListComponent, selector: "hm-shortcut-list", inputs: ["items", "registered", "searchable", "characterKeysToggle", "headingLevel"] }, { kind: "component", type: ThemePickerComponent, selector: "hm-theme-picker", inputs: ["families", "family", "theme", "showMode"], outputs: ["familyChosen", "themeChosen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SettingsPanelComponent, isStandalone: true, selector: "spine-settings-panel", ngImport: i0, template: "<!-- Montado s\u00F3 enquanto aberto: nada disto (lista de fusos, leitura do token...) custa no\n     carregamento de toda p\u00E1gina. -->\n@if (settings.isOpen()) {\n  <hm-settings-dialog\n    [heading]=\"text.heading\"\n    [open]=\"true\"\n    (openChange)=\"onOpenChange($event)\"\n    [activeSection]=\"settings.section()\"\n    (activeSectionChange)=\"settings.section.set($event)\"\n  >\n    <!-- \u2500\u2500 Conta \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.account\" [label]=\"text.account\" icon=\"user\" [keywords]=\"text.accountKeywords\">\n      <div class=\"sp-settings__profile\">\n        <hm-account-avatar [name]=\"profile.name ?? text.user\" [imageUrl]=\"profile.picture\" />\n        <span class=\"sp-settings__profile-text\">\n          <strong>{{ profile.name ?? text.user }}</strong>\n          @if (profile.role) { <span>{{ profile.role }}</span> }\n        </span>\n      </div>\n\n      <!-- S\u00F3 informativo: a troca de n\u00EDvel fica no menu do perfil, perto de onde se trabalha. -->\n      @if (badge) {\n        <hm-settings-row [label]=\"text.accessLevel\" [keywords]=\"text.accessLevelKeywords\">\n          <span class=\"sp-settings__value\">{{ badge.name }}</span>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.session\" [description]=\"text.sessionDescription\" [keywords]=\"text.sessionKeywords\">\n        <span class=\"sp-settings__value\">{{ sessionExpiry }}</span>\n      </hm-settings-row>\n\n      <!-- S\u00F3 com SpineConfig.technicalDocs (padr\u00E3o: isDevMode()): token da sess\u00E3o no clipboard \u00E9 ferramenta de dev. -->\n      @if (showAccessToken) {\n        <hm-settings-row [label]=\"text.accessToken\" [description]=\"text.accessTokenDescription\" [keywords]=\"text.accessTokenKeywords\">\n          <hm-button emphasis=\"medium\" icon=\"copy\" (clicked)=\"copyToken()\">{{ text.copy }}</hm-button>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.appTokens\" [stacked]=\"true\"\n        [description]=\"text.appTokensDescription\"\n        [keywords]=\"text.appTokensKeywords\">\n        <spine-app-tokens />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.logout\" [description]=\"text.logoutDescription\" [keywords]=\"text.logoutKeywords\">\n        <hm-button emphasis=\"medium\" intent=\"danger\" icon=\"logout\" (clicked)=\"logout()\">{{ text.logout }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Conta e seguran\u00E7a \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <!-- API da conta do Argos com o token da sess\u00E3o (Bearer): MFA, c\u00F3digos de recupera\u00E7\u00E3o e sess\u00F5es aqui\n         mesmo, sem abrir o Argos. O spineAccountSecurity d\u00E1 \u00E0s linhas o mesmo estado (reautentica\u00E7\u00E3o,\n         cadastro em andamento), que morre quando o painel fecha. -->\n    @if (accountSecurity) {\n      <hm-settings-section spineAccountSecurity [key]=\"keys.security\" [label]=\"text.security\" icon=\"shield-check\" [description]=\"text.securityDescription\" [keywords]=\"text.securityKeywords\">\n        @if (accountLogin || accountRealm) {\n          <hm-settings-row [label]=\"text.signedInAccount\">\n            @if (accountRealm) { <span rowDescription class=\"sp-settings__hint\">{{ fmt(text.signedInRealm, { realm: accountRealm }) }}</span> }\n            <span class=\"sp-settings__value\">{{ profile.name ?? text.user }}@if (accountLogin) { <span class=\"sp-settings__muted\"> \u00B7 {{ accountLogin }}</span> }</span>\n          </hm-settings-row>\n        }\n\n        <hm-settings-row [label]=\"text.twoFactor\" [description]=\"text.twoFactorDescription\" [keywords]=\"text.twoFactorKeywords\" [stacked]=\"true\">\n          <spine-account-mfa />\n        </hm-settings-row>\n\n        <hm-settings-row [label]=\"text.recoveryCodes\" [description]=\"text.recoveryCodesDescription\" [keywords]=\"text.recoveryCodesKeywords\" [stacked]=\"true\">\n          <spine-account-recovery-codes />\n        </hm-settings-row>\n\n        <hm-settings-row [label]=\"text.sessions\" [description]=\"text.sessionsDescription\" [keywords]=\"text.sessionsKeywords\" [stacked]=\"true\">\n          <spine-account-sessions />\n        </hm-settings-row>\n      </hm-settings-section>\n    }\n\n    <!-- \u2500\u2500 Apar\u00EAncia \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.appearance\" [label]=\"text.appearance\" icon=\"color-palette\" [keywords]=\"text.appearanceKeywords\">\n      <hm-settings-row [label]=\"text.theme\" [description]=\"text.themeDescription\" [keywords]=\"text.themeKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.theme\" [options]=\"themeOptions()\" [value]=\"themeMode()\" (valueChange)=\"setThemeMode($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.accent\" [description]=\"text.accentDescription\" [keywords]=\"text.accentKeywords\" [stacked]=\"true\">\n        <hm-theme-picker\n          [families]=\"families\"\n          [family]=\"family()\"\n          [theme]=\"appliedTheme()\"\n          [showMode]=\"false\"\n          (familyChosen)=\"setFamily($event)\"\n        />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.density\" [description]=\"text.densityDescription\" [keywords]=\"text.densityKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.density\" [options]=\"densityOptions()\" [value]=\"densityValue()\" (valueChange)=\"setDensity($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.font\" [description]=\"text.fontDescription\" [keywords]=\"text.fontKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.font\" [options]=\"fontOptions\" [value]=\"fontValue()\" (valueChange)=\"setFont($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.sidebar\" [description]=\"text.sidebarDescription\" [keywords]=\"text.sidebarKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.sidebar\" [options]=\"sidebarOptions()\" [value]=\"sidebar.mode()\" (valueChange)=\"setSidebarMode($event)\" />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Regi\u00E3o \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.region\" [label]=\"text.region\" icon=\"clock\" [keywords]=\"text.regionKeywords\">\n      <hm-settings-row [label]=\"text.language\" [description]=\"text.languageDescription\" [keywords]=\"text.languageKeywords\">\n        <hm-select\n          class=\"sp-settings__language\"\n          [label]=\"text.language\"\n          [labelHidden]=\"true\"\n          [value]=\"preferences.language()\"\n          (valueChange)=\"preferences.setLanguage($event ?? '')\"\n        >\n          @for (option of languageOptions(); track option.value) {\n            <option [value]=\"option.value\" [attr.lang]=\"option.value || null\">{{ option.label }}</option>\n          }\n        </hm-select>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.timeZone\" [keywords]=\"text.timeZoneKeywords\">\n        <span rowDescription class=\"sp-settings__hint\">{{ fmt(text.timeZoneHint, { now: timeZonePreview() }) }}</span>\n        <hm-combobox\n          class=\"sp-settings__timezone\"\n          [label]=\"text.timeZone\"\n          [labelHidden]=\"true\"\n          icon=\"world\"\n          [options]=\"timeZoneOptions()\"\n          [value]=\"preferences.timeZone()\"\n          (valueChange)=\"preferences.setTimeZone($event)\"\n        />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Atalhos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.shortcuts\" [label]=\"text.shortcuts\" icon=\"keyboard\" [description]=\"text.shortcutsDescription\" [keywords]=\"text.shortcutsKeywords\">\n      <!-- Mesma lista do painel \"?\", sem busca (a do di\u00E1logo de configura\u00E7\u00F5es j\u00E1 cobre a se\u00E7\u00E3o);\n           o interruptor de tecla \u00FAnica (WCAG 2.1.4) persiste no SpinePreferencesService. -->\n      <hm-shortcut-list characterKeysToggle [registered]=\"false\" [items]=\"shortcutItems()\" [headingLevel]=\"4\" />\n      <hm-settings-row [label]=\"text.tour\" [description]=\"text.tourDescription\" [keywords]=\"text.tourKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"play\" (clicked)=\"replayTour()\">{{ text.replayTour }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Se\u00E7\u00F5es do app (provideSettingsSection) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @for (s of appSections; track s.key) {\n      <hm-settings-section [key]=\"s.key\" [label]=\"s.label\" [icon]=\"s.icon ?? 'cog'\" [description]=\"s.description ?? ''\" [keywords]=\"s.keywords ?? ''\">\n        <ng-container *ngComponentOutlet=\"s.component\" />\n      </hm-settings-section>\n    }\n\n    <!-- \u2500\u2500 Sobre \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.about\" [label]=\"text.about\" icon=\"info-circle\" [keywords]=\"text.aboutKeywords\">\n      <hm-settings-row [label]=\"text.application\">\n        <span class=\"sp-settings__value\">{{ appName }}@if (packageInfo.name) { <span class=\"sp-settings__muted\"> \u00B7 {{ packageInfo.name }}</span> }</span>\n      </hm-settings-row>\n      <hm-settings-row [label]=\"text.version\" [keywords]=\"text.versionKeywords\">\n        <span class=\"sp-settings__value sp-settings__mono\">{{ packageInfo.version ?? '\u2014' }}</span>\n      </hm-settings-row>\n      @if (buildDate) {\n        <hm-settings-row [label]=\"text.buildDate\">\n          <span class=\"sp-settings__value\">{{ buildDate }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.environment) {\n        <hm-settings-row [label]=\"text.environment\" [keywords]=\"text.environmentKeywords\">\n          <span class=\"sp-settings__value\">{{ packageInfo.environment }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.repository?.url || packageInfo.docs || packageInfo.issues) {\n        <hm-settings-row [label]=\"text.links\" [keywords]=\"text.linksKeywords\">\n          <span class=\"sp-settings__links\">\n            @if (packageInfo.docs) { <hm-button emphasis=\"minimal\" icon=\"book\" [link]=\"packageInfo.docs\" [newTab]=\"true\">{{ text.docs }}</hm-button> }\n            @if (packageInfo.issues) { <hm-button emphasis=\"minimal\" icon=\"bug\" [link]=\"packageInfo.issues\" [newTab]=\"true\">{{ text.reportIssue }}</hm-button> }\n            @if (packageInfo.repository?.url) { <hm-button emphasis=\"minimal\" icon=\"link\" [link]=\"packageInfo.repository!.url!\" [newTab]=\"true\">{{ text.repository }}</hm-button> }\n          </span>\n        </hm-settings-row>\n      }\n      @if (dependencies.length) {\n        <hm-settings-row [label]=\"text.dependencies\" [description]=\"text.dependenciesDescription\" [keywords]=\"text.dependenciesKeywords\" [stacked]=\"true\">\n          <dl class=\"sp-settings__deps\">\n            @for (d of dependencies; track d.name) {\n              <div><dt>{{ d.label }}</dt><dd class=\"sp-settings__mono\">{{ d.version }}</dd></div>\n            }\n          </dl>\n        </hm-settings-row>\n      }\n      <hm-settings-row [label]=\"text.supportInfo\" [description]=\"text.supportInfoDescription\" [keywords]=\"text.supportInfoKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"clipboard\" (clicked)=\"copySupportInfo()\">{{ text.copy }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n  </hm-settings-dialog>\n}\n", styles: ["@charset \"UTF-8\";.sp-settings__hint{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__timezone{display:block;width:min(320px,100%)}.sp-settings__profile{display:flex;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) 0 var(--hm-space-sm)}.sp-settings__profile-text{display:flex;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text)}.sp-settings__profile-text span{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-settings__value{color:var(--hm-text);font-size:var(--hm-font-size-sm);text-align:end}.sp-settings__muted{color:var(--hm-muted)}.sp-settings__mono{font-family:Geist Mono,ui-monospace,monospace}.sp-settings__links{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-nano)}.sp-settings__deps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0}.sp-settings__deps div{display:flex;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-hover)}.sp-settings__deps dt{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__deps dd{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-xs)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AppTokensComponent, selector: "spine-app-tokens" }, { kind: "component", type: AccountMfaComponent, selector: "spine-account-mfa" }, { kind: "component", type: AccountRecoveryCodesComponent, selector: "spine-account-recovery-codes" }, { kind: "component", type: AccountSessionsComponent, selector: "spine-account-sessions" }, { kind: "directive", type: SpineAccountSecurityScopeDirective, selector: "[spineAccountSecurity]" }, { kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: ComboboxComponent, selector: "hm-combobox", inputs: ["label", "options", "value", "placeholder", "icon", "hint", "help", "size", "labelHidden", "clearable", "requiredManual", "loading", "allowCustomValue"], outputs: ["valueChange"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: SettingsDialogComponent, selector: "hm-settings-dialog", inputs: ["open", "heading", "activeSection", "closeHandler", "actions", "submitLabel", "cancelLabel"], outputs: ["openChange", "activeSectionChange", "closed", "submitted"] }, { kind: "component", type: SettingsRowComponent, selector: "hm-settings-row", inputs: ["label", "description", "keywords", "stacked"] }, { kind: "component", type: SettingsSectionComponent, selector: "hm-settings-section", inputs: ["key", "label", "icon", "description", "keywords", "control", "invalid"] }, { kind: "component", type: SelectComponent, selector: "hm-select", inputs: ["value", "label", "labelHidden", "hint"], outputs: ["valueChange"] }, { kind: "component", type: ShortcutListComponent, selector: "hm-shortcut-list", inputs: ["items", "registered", "searchable", "characterKeysToggle", "headingLevel"] }, { kind: "component", type: ThemePickerComponent, selector: "hm-theme-picker", inputs: ["families", "family", "theme", "showMode"], outputs: ["familyChosen", "themeChosen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SettingsPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spine-settings-panel', imports: [
                         NgComponentOutlet, AppTokensComponent,
+                        AccountMfaComponent, AccountRecoveryCodesComponent, AccountSessionsComponent, SpineAccountSecurityScopeDirective,
                         AccountAvatarComponent, ButtonComponent, ComboboxComponent, IconComponent,
                         SegmentedControlComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent,
                         SelectComponent, ShortcutListComponent, ThemePickerComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Montado s\u00F3 enquanto aberto: nada disto (lista de fusos, leitura do token...) custa no\n     carregamento de toda p\u00E1gina. -->\n@if (settings.isOpen()) {\n  <hm-settings-dialog\n    [heading]=\"text.heading\"\n    [open]=\"true\"\n    (openChange)=\"onOpenChange($event)\"\n    [activeSection]=\"settings.section()\"\n    (activeSectionChange)=\"settings.section.set($event)\"\n  >\n    <!-- \u2500\u2500 Conta \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.account\" [label]=\"text.account\" icon=\"user\" [keywords]=\"text.accountKeywords\">\n      <div class=\"sp-settings__profile\">\n        <hm-account-avatar [name]=\"profile.name ?? text.user\" [imageUrl]=\"profile.picture\" />\n        <span class=\"sp-settings__profile-text\">\n          <strong>{{ profile.name ?? text.user }}</strong>\n          @if (profile.role) { <span>{{ profile.role }}</span> }\n        </span>\n      </div>\n\n      <!-- S\u00F3 informativo: a troca de n\u00EDvel fica no menu do perfil, perto de onde se trabalha. -->\n      @if (badge) {\n        <hm-settings-row [label]=\"text.accessLevel\" [keywords]=\"text.accessLevelKeywords\">\n          <span class=\"sp-settings__value\">{{ badge.name }}</span>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.session\" [description]=\"text.sessionDescription\" [keywords]=\"text.sessionKeywords\">\n        <span class=\"sp-settings__value\">{{ sessionExpiry }}</span>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.accessToken\" [description]=\"text.accessTokenDescription\" [keywords]=\"text.accessTokenKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"copy\" (clicked)=\"copyToken()\">{{ text.copy }}</hm-button>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.appTokens\" [stacked]=\"true\"\n        [description]=\"text.appTokensDescription\"\n        [keywords]=\"text.appTokensKeywords\">\n        <spine-app-tokens />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.logout\" [description]=\"text.logoutDescription\" [keywords]=\"text.logoutKeywords\">\n        <hm-button emphasis=\"medium\" intent=\"danger\" icon=\"logout\" (clicked)=\"logout()\">{{ text.logout }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Apar\u00EAncia \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.appearance\" [label]=\"text.appearance\" icon=\"color-palette\" [keywords]=\"text.appearanceKeywords\">\n      <hm-settings-row [label]=\"text.theme\" [description]=\"text.themeDescription\" [keywords]=\"text.themeKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.theme\" [options]=\"themeOptions()\" [value]=\"themeMode()\" (valueChange)=\"setThemeMode($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.accent\" [description]=\"text.accentDescription\" [keywords]=\"text.accentKeywords\" [stacked]=\"true\">\n        <hm-theme-picker\n          [families]=\"families\"\n          [family]=\"family()\"\n          [theme]=\"appliedTheme()\"\n          [showMode]=\"false\"\n          (familyChosen)=\"setFamily($event)\"\n        />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.density\" [description]=\"text.densityDescription\" [keywords]=\"text.densityKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.density\" [options]=\"densityOptions()\" [value]=\"densityValue()\" (valueChange)=\"setDensity($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.font\" [description]=\"text.fontDescription\" [keywords]=\"text.fontKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.font\" [options]=\"fontOptions\" [value]=\"fontValue()\" (valueChange)=\"setFont($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.sidebar\" [description]=\"text.sidebarDescription\" [keywords]=\"text.sidebarKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.sidebar\" [options]=\"sidebarOptions()\" [value]=\"sidebar.mode()\" (valueChange)=\"setSidebarMode($event)\" />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Regi\u00E3o \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.region\" [label]=\"text.region\" icon=\"clock\" [keywords]=\"text.regionKeywords\">\n      <hm-settings-row [label]=\"text.language\" [description]=\"text.languageDescription\" [keywords]=\"text.languageKeywords\">\n        <hm-select\n          class=\"sp-settings__language\"\n          [label]=\"text.language\"\n          [labelHidden]=\"true\"\n          [value]=\"preferences.language()\"\n          (valueChange)=\"preferences.setLanguage($event ?? '')\"\n        >\n          @for (option of languageOptions(); track option.value) {\n            <option [value]=\"option.value\" [attr.lang]=\"option.value || null\">{{ option.label }}</option>\n          }\n        </hm-select>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.timeZone\" [keywords]=\"text.timeZoneKeywords\">\n        <span rowDescription class=\"sp-settings__hint\">{{ fmt(text.timeZoneHint, { now: timeZonePreview() }) }}</span>\n        <hm-combobox\n          class=\"sp-settings__timezone\"\n          [label]=\"text.timeZone\"\n          [labelHidden]=\"true\"\n          icon=\"world\"\n          [options]=\"timeZoneOptions()\"\n          [value]=\"preferences.timeZone()\"\n          (valueChange)=\"preferences.setTimeZone($event)\"\n        />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Atalhos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.shortcuts\" [label]=\"text.shortcuts\" icon=\"keyboard\" [description]=\"text.shortcutsDescription\" [keywords]=\"text.shortcutsKeywords\">\n      <!-- Mesma lista do painel \"?\", sem busca (a do di\u00E1logo de configura\u00E7\u00F5es j\u00E1 cobre a se\u00E7\u00E3o);\n           o interruptor de tecla \u00FAnica (WCAG 2.1.4) persiste no SpinePreferencesService. -->\n      <hm-shortcut-list characterKeysToggle [registered]=\"false\" [items]=\"shortcutItems()\" [headingLevel]=\"4\" />\n      <hm-settings-row [label]=\"text.tour\" [description]=\"text.tourDescription\" [keywords]=\"text.tourKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"play\" (clicked)=\"replayTour()\">{{ text.replayTour }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Se\u00E7\u00F5es do app (provideSettingsSection) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @for (s of appSections; track s.key) {\n      <hm-settings-section [key]=\"s.key\" [label]=\"s.label\" [icon]=\"s.icon ?? 'cog'\" [description]=\"s.description ?? ''\" [keywords]=\"s.keywords ?? ''\">\n        <ng-container *ngComponentOutlet=\"s.component\" />\n      </hm-settings-section>\n    }\n\n    <!-- \u2500\u2500 Sobre \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.about\" [label]=\"text.about\" icon=\"info-circle\" [keywords]=\"text.aboutKeywords\">\n      <hm-settings-row [label]=\"text.application\">\n        <span class=\"sp-settings__value\">{{ appName }}@if (packageInfo.name) { <span class=\"sp-settings__muted\"> \u00B7 {{ packageInfo.name }}</span> }</span>\n      </hm-settings-row>\n      <hm-settings-row [label]=\"text.version\" [keywords]=\"text.versionKeywords\">\n        <span class=\"sp-settings__value sp-settings__mono\">{{ packageInfo.version ?? '\u2014' }}</span>\n      </hm-settings-row>\n      @if (buildDate) {\n        <hm-settings-row [label]=\"text.buildDate\">\n          <span class=\"sp-settings__value\">{{ buildDate }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.environment) {\n        <hm-settings-row [label]=\"text.environment\" [keywords]=\"text.environmentKeywords\">\n          <span class=\"sp-settings__value\">{{ packageInfo.environment }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.repository?.url || packageInfo.docs || packageInfo.issues) {\n        <hm-settings-row [label]=\"text.links\" [keywords]=\"text.linksKeywords\">\n          <span class=\"sp-settings__links\">\n            @if (packageInfo.docs) { <hm-button emphasis=\"minimal\" icon=\"book\" [link]=\"packageInfo.docs\" [newTab]=\"true\">{{ text.docs }}</hm-button> }\n            @if (packageInfo.issues) { <hm-button emphasis=\"minimal\" icon=\"bug\" [link]=\"packageInfo.issues\" [newTab]=\"true\">{{ text.reportIssue }}</hm-button> }\n            @if (packageInfo.repository?.url) { <hm-button emphasis=\"minimal\" icon=\"link\" [link]=\"packageInfo.repository!.url!\" [newTab]=\"true\">{{ text.repository }}</hm-button> }\n          </span>\n        </hm-settings-row>\n      }\n      @if (dependencies.length) {\n        <hm-settings-row [label]=\"text.dependencies\" [description]=\"text.dependenciesDescription\" [keywords]=\"text.dependenciesKeywords\" [stacked]=\"true\">\n          <dl class=\"sp-settings__deps\">\n            @for (d of dependencies; track d.name) {\n              <div><dt>{{ d.label }}</dt><dd class=\"sp-settings__mono\">{{ d.version }}</dd></div>\n            }\n          </dl>\n        </hm-settings-row>\n      }\n      <hm-settings-row [label]=\"text.supportInfo\" [description]=\"text.supportInfoDescription\" [keywords]=\"text.supportInfoKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"clipboard\" (clicked)=\"copySupportInfo()\">{{ text.copy }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n  </hm-settings-dialog>\n}\n", styles: ["@charset \"UTF-8\";.sp-settings__hint{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__timezone{display:block;width:min(320px,100%)}.sp-settings__profile{display:flex;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) 0 var(--hm-space-sm)}.sp-settings__profile-text{display:flex;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text)}.sp-settings__profile-text span{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-settings__value{color:var(--hm-text);font-size:var(--hm-font-size-sm);text-align:end}.sp-settings__muted{color:var(--hm-muted)}.sp-settings__mono{font-family:Geist Mono,ui-monospace,monospace}.sp-settings__links{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-nano)}.sp-settings__deps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0}.sp-settings__deps div{display:flex;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-hover)}.sp-settings__deps dt{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__deps dd{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-xs)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Montado s\u00F3 enquanto aberto: nada disto (lista de fusos, leitura do token...) custa no\n     carregamento de toda p\u00E1gina. -->\n@if (settings.isOpen()) {\n  <hm-settings-dialog\n    [heading]=\"text.heading\"\n    [open]=\"true\"\n    (openChange)=\"onOpenChange($event)\"\n    [activeSection]=\"settings.section()\"\n    (activeSectionChange)=\"settings.section.set($event)\"\n  >\n    <!-- \u2500\u2500 Conta \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.account\" [label]=\"text.account\" icon=\"user\" [keywords]=\"text.accountKeywords\">\n      <div class=\"sp-settings__profile\">\n        <hm-account-avatar [name]=\"profile.name ?? text.user\" [imageUrl]=\"profile.picture\" />\n        <span class=\"sp-settings__profile-text\">\n          <strong>{{ profile.name ?? text.user }}</strong>\n          @if (profile.role) { <span>{{ profile.role }}</span> }\n        </span>\n      </div>\n\n      <!-- S\u00F3 informativo: a troca de n\u00EDvel fica no menu do perfil, perto de onde se trabalha. -->\n      @if (badge) {\n        <hm-settings-row [label]=\"text.accessLevel\" [keywords]=\"text.accessLevelKeywords\">\n          <span class=\"sp-settings__value\">{{ badge.name }}</span>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.session\" [description]=\"text.sessionDescription\" [keywords]=\"text.sessionKeywords\">\n        <span class=\"sp-settings__value\">{{ sessionExpiry }}</span>\n      </hm-settings-row>\n\n      <!-- S\u00F3 com SpineConfig.technicalDocs (padr\u00E3o: isDevMode()): token da sess\u00E3o no clipboard \u00E9 ferramenta de dev. -->\n      @if (showAccessToken) {\n        <hm-settings-row [label]=\"text.accessToken\" [description]=\"text.accessTokenDescription\" [keywords]=\"text.accessTokenKeywords\">\n          <hm-button emphasis=\"medium\" icon=\"copy\" (clicked)=\"copyToken()\">{{ text.copy }}</hm-button>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.appTokens\" [stacked]=\"true\"\n        [description]=\"text.appTokensDescription\"\n        [keywords]=\"text.appTokensKeywords\">\n        <spine-app-tokens />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.logout\" [description]=\"text.logoutDescription\" [keywords]=\"text.logoutKeywords\">\n        <hm-button emphasis=\"medium\" intent=\"danger\" icon=\"logout\" (clicked)=\"logout()\">{{ text.logout }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Conta e seguran\u00E7a \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <!-- API da conta do Argos com o token da sess\u00E3o (Bearer): MFA, c\u00F3digos de recupera\u00E7\u00E3o e sess\u00F5es aqui\n         mesmo, sem abrir o Argos. O spineAccountSecurity d\u00E1 \u00E0s linhas o mesmo estado (reautentica\u00E7\u00E3o,\n         cadastro em andamento), que morre quando o painel fecha. -->\n    @if (accountSecurity) {\n      <hm-settings-section spineAccountSecurity [key]=\"keys.security\" [label]=\"text.security\" icon=\"shield-check\" [description]=\"text.securityDescription\" [keywords]=\"text.securityKeywords\">\n        @if (accountLogin || accountRealm) {\n          <hm-settings-row [label]=\"text.signedInAccount\">\n            @if (accountRealm) { <span rowDescription class=\"sp-settings__hint\">{{ fmt(text.signedInRealm, { realm: accountRealm }) }}</span> }\n            <span class=\"sp-settings__value\">{{ profile.name ?? text.user }}@if (accountLogin) { <span class=\"sp-settings__muted\"> \u00B7 {{ accountLogin }}</span> }</span>\n          </hm-settings-row>\n        }\n\n        <hm-settings-row [label]=\"text.twoFactor\" [description]=\"text.twoFactorDescription\" [keywords]=\"text.twoFactorKeywords\" [stacked]=\"true\">\n          <spine-account-mfa />\n        </hm-settings-row>\n\n        <hm-settings-row [label]=\"text.recoveryCodes\" [description]=\"text.recoveryCodesDescription\" [keywords]=\"text.recoveryCodesKeywords\" [stacked]=\"true\">\n          <spine-account-recovery-codes />\n        </hm-settings-row>\n\n        <hm-settings-row [label]=\"text.sessions\" [description]=\"text.sessionsDescription\" [keywords]=\"text.sessionsKeywords\" [stacked]=\"true\">\n          <spine-account-sessions />\n        </hm-settings-row>\n      </hm-settings-section>\n    }\n\n    <!-- \u2500\u2500 Apar\u00EAncia \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.appearance\" [label]=\"text.appearance\" icon=\"color-palette\" [keywords]=\"text.appearanceKeywords\">\n      <hm-settings-row [label]=\"text.theme\" [description]=\"text.themeDescription\" [keywords]=\"text.themeKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.theme\" [options]=\"themeOptions()\" [value]=\"themeMode()\" (valueChange)=\"setThemeMode($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.accent\" [description]=\"text.accentDescription\" [keywords]=\"text.accentKeywords\" [stacked]=\"true\">\n        <hm-theme-picker\n          [families]=\"families\"\n          [family]=\"family()\"\n          [theme]=\"appliedTheme()\"\n          [showMode]=\"false\"\n          (familyChosen)=\"setFamily($event)\"\n        />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.density\" [description]=\"text.densityDescription\" [keywords]=\"text.densityKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.density\" [options]=\"densityOptions()\" [value]=\"densityValue()\" (valueChange)=\"setDensity($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.font\" [description]=\"text.fontDescription\" [keywords]=\"text.fontKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.font\" [options]=\"fontOptions\" [value]=\"fontValue()\" (valueChange)=\"setFont($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.sidebar\" [description]=\"text.sidebarDescription\" [keywords]=\"text.sidebarKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.sidebar\" [options]=\"sidebarOptions()\" [value]=\"sidebar.mode()\" (valueChange)=\"setSidebarMode($event)\" />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Regi\u00E3o \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.region\" [label]=\"text.region\" icon=\"clock\" [keywords]=\"text.regionKeywords\">\n      <hm-settings-row [label]=\"text.language\" [description]=\"text.languageDescription\" [keywords]=\"text.languageKeywords\">\n        <hm-select\n          class=\"sp-settings__language\"\n          [label]=\"text.language\"\n          [labelHidden]=\"true\"\n          [value]=\"preferences.language()\"\n          (valueChange)=\"preferences.setLanguage($event ?? '')\"\n        >\n          @for (option of languageOptions(); track option.value) {\n            <option [value]=\"option.value\" [attr.lang]=\"option.value || null\">{{ option.label }}</option>\n          }\n        </hm-select>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.timeZone\" [keywords]=\"text.timeZoneKeywords\">\n        <span rowDescription class=\"sp-settings__hint\">{{ fmt(text.timeZoneHint, { now: timeZonePreview() }) }}</span>\n        <hm-combobox\n          class=\"sp-settings__timezone\"\n          [label]=\"text.timeZone\"\n          [labelHidden]=\"true\"\n          icon=\"world\"\n          [options]=\"timeZoneOptions()\"\n          [value]=\"preferences.timeZone()\"\n          (valueChange)=\"preferences.setTimeZone($event)\"\n        />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Atalhos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.shortcuts\" [label]=\"text.shortcuts\" icon=\"keyboard\" [description]=\"text.shortcutsDescription\" [keywords]=\"text.shortcutsKeywords\">\n      <!-- Mesma lista do painel \"?\", sem busca (a do di\u00E1logo de configura\u00E7\u00F5es j\u00E1 cobre a se\u00E7\u00E3o);\n           o interruptor de tecla \u00FAnica (WCAG 2.1.4) persiste no SpinePreferencesService. -->\n      <hm-shortcut-list characterKeysToggle [registered]=\"false\" [items]=\"shortcutItems()\" [headingLevel]=\"4\" />\n      <hm-settings-row [label]=\"text.tour\" [description]=\"text.tourDescription\" [keywords]=\"text.tourKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"play\" (clicked)=\"replayTour()\">{{ text.replayTour }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Se\u00E7\u00F5es do app (provideSettingsSection) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @for (s of appSections; track s.key) {\n      <hm-settings-section [key]=\"s.key\" [label]=\"s.label\" [icon]=\"s.icon ?? 'cog'\" [description]=\"s.description ?? ''\" [keywords]=\"s.keywords ?? ''\">\n        <ng-container *ngComponentOutlet=\"s.component\" />\n      </hm-settings-section>\n    }\n\n    <!-- \u2500\u2500 Sobre \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.about\" [label]=\"text.about\" icon=\"info-circle\" [keywords]=\"text.aboutKeywords\">\n      <hm-settings-row [label]=\"text.application\">\n        <span class=\"sp-settings__value\">{{ appName }}@if (packageInfo.name) { <span class=\"sp-settings__muted\"> \u00B7 {{ packageInfo.name }}</span> }</span>\n      </hm-settings-row>\n      <hm-settings-row [label]=\"text.version\" [keywords]=\"text.versionKeywords\">\n        <span class=\"sp-settings__value sp-settings__mono\">{{ packageInfo.version ?? '\u2014' }}</span>\n      </hm-settings-row>\n      @if (buildDate) {\n        <hm-settings-row [label]=\"text.buildDate\">\n          <span class=\"sp-settings__value\">{{ buildDate }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.environment) {\n        <hm-settings-row [label]=\"text.environment\" [keywords]=\"text.environmentKeywords\">\n          <span class=\"sp-settings__value\">{{ packageInfo.environment }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.repository?.url || packageInfo.docs || packageInfo.issues) {\n        <hm-settings-row [label]=\"text.links\" [keywords]=\"text.linksKeywords\">\n          <span class=\"sp-settings__links\">\n            @if (packageInfo.docs) { <hm-button emphasis=\"minimal\" icon=\"book\" [link]=\"packageInfo.docs\" [newTab]=\"true\">{{ text.docs }}</hm-button> }\n            @if (packageInfo.issues) { <hm-button emphasis=\"minimal\" icon=\"bug\" [link]=\"packageInfo.issues\" [newTab]=\"true\">{{ text.reportIssue }}</hm-button> }\n            @if (packageInfo.repository?.url) { <hm-button emphasis=\"minimal\" icon=\"link\" [link]=\"packageInfo.repository!.url!\" [newTab]=\"true\">{{ text.repository }}</hm-button> }\n          </span>\n        </hm-settings-row>\n      }\n      @if (dependencies.length) {\n        <hm-settings-row [label]=\"text.dependencies\" [description]=\"text.dependenciesDescription\" [keywords]=\"text.dependenciesKeywords\" [stacked]=\"true\">\n          <dl class=\"sp-settings__deps\">\n            @for (d of dependencies; track d.name) {\n              <div><dt>{{ d.label }}</dt><dd class=\"sp-settings__mono\">{{ d.version }}</dd></div>\n            }\n          </dl>\n        </hm-settings-row>\n      }\n      <hm-settings-row [label]=\"text.supportInfo\" [description]=\"text.supportInfoDescription\" [keywords]=\"text.supportInfoKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"clipboard\" (clicked)=\"copySupportInfo()\">{{ text.copy }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n  </hm-settings-dialog>\n}\n", styles: ["@charset \"UTF-8\";.sp-settings__hint{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__timezone{display:block;width:min(320px,100%)}.sp-settings__profile{display:flex;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) 0 var(--hm-space-sm)}.sp-settings__profile-text{display:flex;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text)}.sp-settings__profile-text span{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-settings__value{color:var(--hm-text);font-size:var(--hm-font-size-sm);text-align:end}.sp-settings__muted{color:var(--hm-muted)}.sp-settings__mono{font-family:Geist Mono,ui-monospace,monospace}.sp-settings__links{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-nano)}.sp-settings__deps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0}.sp-settings__deps div{display:flex;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-hover)}.sp-settings__deps dt{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__deps dd{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-xs)}\n"] }]
         }] });
 /** "UTC−03:00" para um fuso IANA. */
 function offsetOf(timeZone) {
@@ -2389,11 +3273,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             args: [{ selector: '[appPanelLocalLink]' }]
         }], ctorParameters: () => [], propDecorators: { appPanelLocalLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "appPanelLocalLink", required: false }] }], localNavigate: [{ type: i0.Output, args: ["localNavigate"] }] } });
 
+/**
+ * Perfil do DOMPurify para o Markdown do spine (documentação de tela, novidades). Mais restrito que o
+ * padrão: o HTML entra no DOM do shell (sem shadow DOM), então
+ * - `<style>` e o atributo `style` ficam de fora (CSS valeria para a página inteira: esconder/redesenhar a
+ *   UI, sobrepor um aviso falso com `position: fixed`, exfiltrar por seletor de atributo);
+ * - formulário e controles (`<form>`, `<input>`, `<button>`, `<textarea>`, `<select>`) e `<iframe>` ficam de
+ *   fora (tela de login falsa dentro do conteúdo);
+ * - link para outra origem abre em outra aba com `rel="noopener noreferrer"`.
+ */
+const SPINE_MARKDOWN_PURIFY_CONFIG = {
+    FORBID_TAGS: ['style', 'form', 'input', 'button', 'textarea', 'select', 'option', 'iframe', 'frame', 'frameset', 'object', 'embed', 'link', 'meta', 'base'],
+    FORBID_ATTR: ['style', 'target', 'formaction', 'action'],
+    ALLOW_DATA_ATTR: false,
+};
+let instance;
+/** Instância própria (o hook de links não vaza para o DOMPurify global que o app use). `null` sem DOM. */
+function purifier() {
+    if (instance !== undefined)
+        return instance;
+    if (typeof window === 'undefined')
+        return (instance = null);
+    const purify = DOMPurify(window);
+    if (!purify.isSupported)
+        return (instance = null);
+    purify.addHook('afterSanitizeAttributes', (node) => {
+        if (node.nodeName !== 'A')
+            return;
+        const href = node.getAttribute('href');
+        if (!href)
+            return;
+        let external = false;
+        try {
+            external = new URL(href, window.location.href).origin !== window.location.origin;
+        }
+        catch {
+            external = false;
+        }
+        if (external) {
+            node.setAttribute('target', '_blank');
+            node.setAttribute('rel', 'noopener noreferrer');
+        }
+    });
+    return (instance = purify);
+}
+/** HTML limpo pelo perfil do spine, ou `null` quando não há DOM (SSR: melhor não renderizar). */
+function sanitizeSpineMarkdownHtml(html) {
+    const purify = purifier();
+    return purify ? purify.sanitize(html, SPINE_MARKDOWN_PURIFY_CONFIG) : null;
+}
+
 // Instância própria: não mexe nas opções globais do `marked` que o app possa usar.
 const parser = new Marked({ gfm: true, breaks: false, async: false });
 /**
  * Renderiza Markdown (GFM) como HTML com a tipografia do design system. O texto é tratado como dado:
- * o HTML gerado passa pelo DOMPurify antes de chegar ao DOM.
+ * o HTML gerado passa pelo DOMPurify, com o perfil restrito do spine (`SPINE_MARKDOWN_PURIFY_CONFIG`: sem
+ * `<style>`/`style`, formulários e `<iframe>`; link externo com `rel="noopener noreferrer"`), antes de chegar ao DOM.
  */
 class SpineMarkdownComponent {
     constructor() {
@@ -2403,10 +3338,10 @@ class SpineMarkdownComponent {
         this.html = computed(() => {
             const source = this.content();
             // Sem DOM (SSR) o DOMPurify não limpa nada; melhor não renderizar.
-            if (!source || !DOMPurify.isSupported)
+            if (!source)
                 return null;
-            const clean = DOMPurify.sanitize(parser.parse(source));
-            return this.#sanitizer.bypassSecurityTrustHtml(clean);
+            const clean = sanitizeSpineMarkdownHtml(parser.parse(source));
+            return clean === null ? null : this.#sanitizer.bypassSecurityTrustHtml(clean);
         }, ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
     }
     #sanitizer;
@@ -2706,6 +3641,7 @@ class LayoutComponent {
         this.preferences = inject(SpinePreferencesService);
         this.workspace = inject(SpineWorkspaceNavService);
         this.settings = inject(SpineSettingsService);
+        this.userStorage = inject(SpineUserStorage);
         this.isNoPermission = this.matchesNoPermission(this.router.url);
         this.router.events.pipe(filter((e) => e instanceof NavigationEnd))
             .subscribe(e => { this.isNoPermission = this.matchesNoPermission(e.urlAfterRedirects); });
@@ -2719,7 +3655,10 @@ class LayoutComponent {
             navigate: (url) => this.router.navigateByUrl(url),
             toggleTheme: () => this.theme.setTheme(this.theme.current === 'light' ? 'dark' : 'light'),
             toggleFullscreen: () => this.toggleFullscreen(),
-            logout: () => this.auth.logout(),
+            logout: () => {
+                this.userStorage.clearHistory();
+                this.auth.logout();
+            },
             openSettings: () => this.settings.toggle(),
         });
         // Link direto pra uma seção do painel de configurações: `?settings=aparencia` (ou só
@@ -2730,9 +3669,12 @@ class LayoutComponent {
             this.settings.open(params.get('settings') ?? '');
             void this.router.navigate([], { queryParams: { settings: null }, queryParamsHandling: 'merge', replaceUrl: true });
         }
-        // Onboarding interativo na primeira entrada nesta máquina.
+        // Onboarding interativo na primeira entrada nesta máquina. Vem ANTES das novidades: quando devido,
+        // o tour fica `pending` na hora, e as novidades (que esperam o tour ficar `idle`) já o enxergam.
+        // A ordem inversa também funciona — elas conferem o estado de novo antes de abrir —, mas tour
+        // primeiro é o caminho direto.
         this.onboarding.maybeStart();
-        // Novidades do app (provideSpineNews): abrem sozinhas uma vez, depois do tour.
+        // Novidades do app (provideSpineNews): abrem sozinhas uma vez, só depois do tour.
         this.news.scheduleOnEntry();
     }
     onLocalNavigate(panelId, href) {
@@ -2844,5 +3786,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppLauncherComponent, HeaderComponent, LayoutComponent, OnboardingOverlayComponent, OnboardingService, SPINE_BRAND, SPINE_SETTINGS_KEYS, SPINE_SETTINGS_SECTIONS, SettingsPanelComponent, ShortcutService, ShortcutsCheatsheetComponent, SidebarComponent, SpineAppTokensService, SpineBrandComponent, SpineConnectionBannerComponent, SpineDocsComponent, SpineDocsService, SpineMarkdownComponent, SpineNewsComponent, SpineNewsService, SpineSettingsService, findTourTarget, provideSettingsSection };
+export { AppLauncherComponent, HeaderComponent, LayoutComponent, OnboardingOverlayComponent, OnboardingService, SPINE_BRAND, SPINE_MARKDOWN_PURIFY_CONFIG, SPINE_SETTINGS_KEYS, SPINE_SETTINGS_SECTIONS, SettingsPanelComponent, ShortcutService, ShortcutsCheatsheetComponent, SidebarComponent, SpineAccountSecurityService, SpineAppTokensService, SpineBrandComponent, SpineConnectionBannerComponent, SpineDocsComponent, SpineDocsService, SpineMarkdownComponent, SpineNewsComponent, SpineNewsService, SpineSettingsService, accountErrorCode, argosAccountApi, findTourTarget, provideSettingsSection, sanitizeSpineMarkdownHtml };
 //# sourceMappingURL=trismegisto-spine-layout.mjs.map