@trismegisto/spine 2.1.1 → 3.0.0

package/fesm2022/trismegisto-spine-layout.mjs

@@ -1,22 +1,22 @@
 import * as i0 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 { inject, ChangeDetectorRef, ChangeDetectionStrategy, Component, InjectionToken, input, signal, computed, Optional, Inject, Injectable, DestroyRef, Injector, afterNextRender, ViewChild, effect, HostListener, DOCUMENT, PLATFORM_ID, untracked, NgZone, isDevMode, Directive, viewChild, 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, CodeInputComponent, RadioComponent, AlertComponent, HermesToastService, TagComponent, SegmentedControlComponent, HermesThemeService, HermesSidebarService, ComboboxComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent, SelectComponent, ThemePickerComponent, BreadcrumbComponent, TooltipDirective, 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, HermesThemeService, HERMES_THEME_CONFIG, HermesSidebarService, HermesToastService, AlertComponent, SegmentedControlComponent, TagComponent, CodeInputComponent, RadioComponent, CheckboxComponent, CodeViewerComponent, SelectComponent, HERMES_SIDEBAR_CONFIG, HermesI18nService, ComboboxComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent, ThemePickerComponent, ToggletipComponent, BreadcrumbComponent, TooltipDirective, SkeletonComponent, WorkspaceComponent, ToastStackComponent } from '@trismegisto/angular';
 import { ModalComponent as ModalComponent$1 } from '@trismegisto/spine/modal';
-import { NotificationComponent } from '@trismegisto/spine/notification';
+import { NotificationService, AlertType, 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, SpineUserStorage, SPINE_USER_STORAGE_KEYS, spineRoutesOf, routerIdOf, SpinePreferencesService, SPINE_ADMIN_API, 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, SpineQuickAccessService, DensityService, ThemePresetService, SPINE_IDLE_OPTIONS, SPINE_ADMIN_API, APP_PACKAGE_INFO } from '@trismegisto/spine';
 import * as i2 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser } 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, AUTH_CONFIG } from '@orfeu/angular/core';
+import { AuthorizationService, ViewService, 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 { formatMessage, prefersReducedMotion, motionPreferenceOf, urlPath, pluralMessage, formatMessageHtml, HERMES_FONTS, HERMES_TEXT_SCALES, weekdayNames, FALLBACK_FAMILY } from '@trismegisto/primitives';
 import { resolveEffectiveRouteChain, ComponentDistributorService, componentRouterId, LoggerService } from '@trismegisto/spine/routing';
 import { renderIconSvg } from '@trismegisto/icons';
 import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
@@ -474,15 +474,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/** Tempo do aviso de falha na tela (segundos). */
+const LOGOUT_FAILED_SECONDS = 8;
+/**
+ * Saída da sessão pelo shell: todo botão/atalho de sair do spine passa por aqui (menu do perfil, painel de
+ * configurações, `Mod+Shift+L`, tela `/blocked`).
+ *
+ * - Assina `logoutFailed$` do `@orfeu/angular` (1.3.x) uma vez só: quando o logout no Argos falha (a lib repete uma
+ *   vez e mantém a sessão), mostra o aviso de erro `session.logoutFailed` (`hm-alert` de erro, `role="alert"`). Vale
+ *   também para um `logout()` chamado direto pelo app.
+ * - `logout()` aguarda o resultado: só apaga os históricos do usuário (`SpineUserStorage.clearHistory()`) quando a
+ *   saída deu certo. Com falha, nada muda: a pessoa continua na tela, com a sessão e os recentes.
+ * - `pending` fica `true` enquanto a saída está em andamento e sempre volta a `false` (os botões não travam).
+ *
+ * Com `@orfeu/angular` 1.0.x (sem `logoutFailed$`, `logout()` sem retorno) a saída conta como concluída, como antes.
+ */
+class SpineLogoutService {
+    constructor() {
+        this.auth = inject(AuthorizationService);
+        this.userStorage = inject(SpineUserStorage);
+        this.notifications = inject(NotificationService);
+        this.messages = inject(SPINE_MESSAGES);
+        this.inFlight = null;
+        /** Saída em andamento (o botão mostra "saindo…" / fica desabilitado). */
+        this.pending = signal(false, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+        const failed$ = this.auth.logoutFailed$;
+        this.failureStream = typeof failed$?.subscribe === 'function';
+        if (!this.failureStream)
+            return;
+        const sub = failed$.subscribe(() => this.notifyFailure());
+        inject(DestroyRef).onDestroy(() => sub.unsubscribe());
+    }
+    /**
+     * Sai da sessão. Resolve `true` quando saiu (o `@orfeu/angular` já navega para o `/logoff`) e `false` quando o
+     * Argos não confirmou: a sessão continua e o aviso de erro aparece. Nunca rejeita. Cliques repetidos durante a
+     * saída reaproveitam a mesma tentativa.
+     */
+    logout() {
+        this.inFlight ??= this.run().finally(() => {
+            this.inFlight = null;
+            this.pending.set(false);
+        });
+        return this.inFlight;
+    }
+    async run() {
+        this.pending.set(true);
+        // Guarda de quem é a sessão antes de sair: depois do logout o token some, e a limpeza precisa do usuário.
+        this.userStorage.userId();
+        let ok;
+        let rejected = false;
+        try {
+            // 1.3.x: Promise<boolean>; 1.0.x: void (a saída local sempre acontecia).
+            ok = (await this.auth.logout()) !== false;
+        }
+        catch {
+            ok = false;
+            rejected = true;
+        }
+        if (ok) {
+            this.userStorage.clearHistory();
+        }
+        else if (rejected || !this.failureStream) {
+            // Sem `logoutFailed$` para avisar (ou a chamada nem chegou a resolver): o próprio resultado avisa.
+            this.notifyFailure();
+        }
+        return ok;
+    }
+    notifyFailure() {
+        this.notifications.addNotification({
+            timer: LOGOUT_FAILED_SECONDS,
+            hermesAlertType: AlertType.DANGER,
+            message: this.messages.session.logoutFailed,
+            hermesAlertClosable: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineLogoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineLogoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineLogoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /** Seções que o próprio spine já traz. `key` é também o valor de `?settings=` na URL. */
 const SPINE_SETTINGS_KEYS = {
     appearance: 'aparencia',
+    /** Tamanho do texto e animações. */
+    accessibility: 'acessibilidade',
     region: 'regiao',
     shortcuts: 'atalhos',
+    /** Novidades e tour guiado. */
+    help: 'ajuda',
+    /** Tipos de aviso do app e aviso do navegador (`SpineFeatures.notices`). */
+    notices: 'notificacoes',
+    /** Listas guardadas neste navegador (recentes, buscas, favoritos) e restaurar preferências. */
+    data: 'dados',
     account: 'conta',
+    /** Verificação em duas etapas e códigos de recuperação (API da conta do Argos). */
+    mfa: 'mfa',
+    /** Sessão atual, token de acesso, tokens de aplicação e sessões e dispositivos. */
+    sessions: 'sessoes',
+    /** @deprecated A seção "Conta e segurança" virou "MFA" e "Sessões": `seguranca` abre a de MFA (ver
+     *  `SPINE_SETTINGS_ALIASES`). Use `mfa` ou `sessions`. */
     security: 'seguranca',
     about: 'sobre',
 };
+/** Chaves antigas de `?settings=` que continuam abrindo a seção que as substituiu (links já publicados). */
+const SPINE_SETTINGS_ALIASES = {
+    [SPINE_SETTINGS_KEYS.security]: SPINE_SETTINGS_KEYS.mfa,
+};
+/** Chave de seção que vale hoje: troca uma chave antiga pela nova; as demais passam iguais. */
+function resolveSettingsSection(section) {
+    // hasOwn: `?settings=constructor` não pode devolver o que vem do protótipo.
+    return Object.hasOwn(SPINE_SETTINGS_ALIASES, section) ? SPINE_SETTINGS_ALIASES[section] : section;
+}
 const SPINE_SETTINGS_SECTIONS = new InjectionToken('SPINE_SETTINGS_SECTIONS');
 /** Registra uma seção do app no painel de configurações (aparece depois das do spine, antes de
  * "Sobre"). Pode ser chamado várias vezes, uma por seção. */
@@ -496,8 +601,9 @@ class SpineSettingsService {
         /** Seção pedida na abertura (vazio = a primeira). */
         this.section = signal('', ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
     }
+    /** `section` aceita também as chaves antigas (`seguranca` abre "MFA"). */
     open(section = '') {
-        this.section.set(section);
+        this.section.set(resolveSettingsSection(section));
         this.isOpen.set(true);
     }
     close() {
@@ -698,6 +804,7 @@ class HeaderComponent {
         this.settings = inject(SpineSettingsService);
         this.news = inject(SpineNewsService);
         this.userStorage = inject(SpineUserStorage);
+        this.logoutService = inject(SpineLogoutService);
         this.quickQuery = '';
         this.quickOpen = false;
         this.quickResults = [];
@@ -708,6 +815,10 @@ class HeaderComponent {
         /** Verdadeiro quando o painel está exibindo o histórico (campo vazio). */
         this.showingRecent = false;
         this.appName = config?.appName ?? 'Hermes';
+        // Lista apagada fora daqui (logout, Configurações › Dados do navegador) ou outra conta: relê, para a
+        // próxima busca não ressuscitar o que foi apagado.
+        const stop = this.userStorage.onChange(() => (this.recentSearches = this.loadRecent()));
+        inject(DestroyRef).onDestroy(stop);
     }
     async ngOnInit() {
         this.updateView(this.viewService.currentView);
@@ -776,9 +887,9 @@ class HeaderComponent {
     async switchBadge(badgeTypeId) {
         await this.authService.switchBadge(badgeTypeId);
     }
+    /** Sai pelo `SpineLogoutService`: com falha no Argos a pessoa fica aqui, com aviso, e o histórico fica. */
     logout() {
-        this.userStorage.clearHistory();
-        this.authService.logout();
+        return this.logoutService.logout();
     }
     /** Reabre o tour guiado de onboarding. */
     startTour() { this.onboarding.restart(); }
@@ -805,7 +916,8 @@ class HeaderComponent {
         // Só quando o app registrou alguma novidade vigente (provideSpineNews).
         if (this.news.hasAny())
             items.push({ id: 'news', label: this.text.news, icon: 'star' });
-        items.push({ id: 'logout', label: this.text.logout, icon: 'logout', danger: true, separatorAbove: true });
+        // Desabilitado só enquanto a saída está em andamento; volta sozinho se ela falhar.
+        items.push({ id: 'logout', label: this.text.logout, icon: 'logout', danger: true, separatorAbove: true, disabled: this.logoutService.pending() });
         return items;
     }
     onProfileMenuChosen(id) {
@@ -831,7 +943,7 @@ class HeaderComponent {
                 this.settings.open(SPINE_SETTINGS_KEYS.appearance);
                 return;
             case 'logout':
-                this.logout();
+                void this.logout();
                 return;
         }
     }
@@ -1289,7 +1401,8 @@ class OnboardingOverlayComponent {
         const rect = target.getBoundingClientRect();
         if (rect.top >= 0 && rect.bottom <= window.innerHeight)
             return;
-        const calm = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        // Escolha do app (Configurações › Acessibilidade) ou, sem ela, o sistema.
+        const calm = prefersReducedMotion();
         target.scrollIntoView({ block: 'center', inline: 'nearest', behavior: calm ? 'auto' : 'smooth' });
     }
     /** Largura que o CSS dá ao balão (medida quando já existe) e a altura informada. */
@@ -1396,10 +1509,14 @@ function buildNewsIllustration(illustration, palette) {
         const y = round(CY + 104 * Math.sin(angle));
         parts.push(`<g transform="translate(${x} ${y})"><g class="sat" style="animation-delay:${-(i * 1.3).toFixed(1)}s">`, `<circle r="28" fill="${c.badge}" stroke="${c.border}" stroke-width="2"/>`, icon(sat.icon, -14, -14, 28, palette.icon), `<text y="48" text-anchor="middle" font-size="15" fill="${c.label}">${xml(sat.label)}</text>`, `</g></g>`);
     });
-    const style = orbiting
+    // A imagem é um data URI: o `data-motion` do app (Configurações › Acessibilidade) não chega lá dentro.
+    // Com escolha no app, ela decide aqui, ao gerar; sem escolha, a media query da própria imagem segue o sistema.
+    const motion = typeof document === 'undefined' ? 'system' : motionPreferenceOf(document.documentElement);
+    const style = orbiting && motion !== 'reduce'
         ? '<style>.sat{animation:drift 5.6s ease-in-out infinite alternate}' +
             '@keyframes drift{from{transform:translateY(-5px)}to{transform:translateY(5px)}}' +
-            '@media (prefers-reduced-motion:reduce){.sat{animation:none}}</style>'
+            (motion === 'full' ? '' : '@media (prefers-reduced-motion:reduce){.sat{animation:none}}') +
+            '</style>'
         : '';
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${WIDTH} ${HEIGHT}" width="${WIDTH}" height="${HEIGHT}" ` +
         `font-family="${xml(palette.font)}">${style}${parts.join('')}</svg>`;
@@ -1565,6 +1682,32 @@ class SpineAccountSecurityService {
     endOtherSessions() {
         return this.send('DELETE', '/sessions/others');
     }
+    /** Entradas e tentativas desta conta nos últimos 90 dias, da mais recente. `result` filtra só sucessos ou falhas. */
+    activity(params = {}) {
+        const query = new URLSearchParams();
+        if (params.limit)
+            query.set('limit', String(params.limit));
+        if (params.offset)
+            query.set('offset', String(params.offset));
+        if (params.result)
+            query.set('result', params.result);
+        const qs = query.toString();
+        return this.send('GET', `/activity${qs ? `?${qs}` : ''}`);
+    }
+    badges() {
+        return this.send('GET', '/badges');
+    }
+    /** Crachá com que o login entra nesta aplicação (`null` volta ao padrão: o de menor nível). */
+    setDefaultBadge(badgeId) {
+        return this.send('PUT', '/badges/default', { badge_id: badgeId });
+    }
+    preferences() {
+        return this.send('GET', '/preferences');
+    }
+    /** Substitui o documento de preferências desta aplicação na conta (até 16 KB). */
+    savePreferences(preferences) {
+        return this.send('PUT', '/preferences', { preferences });
+    }
     async send(method, path, body) {
         try {
             return await this.request(method, path, body);
@@ -1597,6 +1740,778 @@ function accountErrorCode(err) {
     return typeof code === 'string' ? code : err.status === 0 ? 'network' : '';
 }
 
+/** Versão do documento guardado na conta (muda só se o formato deixar de ser compatível). */
+const DOC_VERSION = 1;
+/** Espera depois da última mudança antes de gravar. */
+const SPINE_PREFERENCES_SAVE_DELAY_MS = 1500;
+/** Favoritos guardados na conta (o servidor aceita até 16 KB no documento inteiro). */
+const MAX_FAVORITES = 40;
+/** Quanto o login espera a conta responder antes de seguir com o que está no navegador. */
+const READY_TIMEOUT_MS = 2000;
+/**
+ * Preferências na conta (`SpineFeatures.accountPreferences`): espelha no Argos (`GET/PUT {api}/preferences`, por
+ * usuário e aplicação) o que o painel de configurações guarda no navegador — tema, cor, densidade, fonte, menu
+ * lateral, idioma, fuso, relógio, primeiro dia da semana, tamanho do texto, animações, atalhos de tecla única,
+ * inatividade, tela inicial, tipos de aviso e favoritos. As telas Aparência, Região etc. não mudam: o
+ * armazenamento local continua sendo a fonte de cada tela, e este serviço só sincroniza.
+ *
+ * - No início da sessão (`start()`, chamado pelo layout e pelo `/callback`), lê a conta e aplica o que estiver lá
+ *   (pelos mesmos `set*` das telas); favoritos são somados (os da conta primeiro). Conta vazia recebe o que está no
+ *   navegador.
+ * - Depois, cada mudança é gravada na conta, agrupada (`SPINE_PREFERENCES_SAVE_DELAY_MS`).
+ * - Sem a API da conta, com o recurso desligado ou com um Argos que não tem o endpoint (404/400), fica só no
+ *   navegador (`status() === 'local'`), sem erro na tela.
+ */
+class SpineAccountPreferencesService {
+    constructor() {
+        this.browser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.api = inject(SpineAccountSecurityService);
+        this.preferences = inject(SpinePreferencesService);
+        this.quickAccess = inject(SpineQuickAccessService);
+        this.hermesTheme = inject(HermesThemeService);
+        this.themeConfig = inject(HERMES_THEME_CONFIG);
+        this.theme = inject(ThemeService);
+        this.density = inject(DensityService);
+        this.presets = inject(ThemePresetService);
+        this.sidebar = inject(HermesSidebarService);
+        /** Recurso ligado e API da conta disponível. */
+        this.enabled = !!inject(SPINE_CONFIG, { optional: true })?.features?.accountPreferences && this.api.available;
+        this.status = signal(this.enabled ? 'idle' : 'local', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        /** Hora da última leitura/gravação bem-sucedida. */
+        this.syncedAt = signal(null, ...(ngDevMode ? [{ debugName: "syncedAt" }] : /* istanbul ignore next */ []));
+        /** O documento que o navegador tem agora. */
+        this.snapshot = computed(() => {
+            const p = this.preferences;
+            return {
+                v: DOC_VERSION,
+                themeMode: this.hermesTheme.mode(),
+                family: this.hermesTheme.family(),
+                density: this.hermesTheme.density(),
+                font: this.hermesTheme.font(),
+                sidebar: this.sidebar.mode(),
+                language: p.language(),
+                timeZone: p.timeZone(),
+                textScale: p.textScale(),
+                motion: p.motion(),
+                hourCycle: p.hourCycle(),
+                weekStart: p.weekStart(),
+                characterKeys: p.characterKeys(),
+                idleMinutes: p.idleMinutes(),
+                startPage: p.startPage(),
+                notices: { ...p.noticeTypes() },
+                browserNotices: p.browserNotices(),
+                favorites: this.quickAccess.favorites().slice(0, MAX_FAVORITES).map((f) => ({ ...f })),
+            };
+        }, ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
+        this.loaded = false;
+        this.lastSaved = '';
+        this.timer = null;
+        this.readyPromise = null;
+        if (!this.enabled || !this.browser)
+            return;
+        effect(() => {
+            const json = stable(this.snapshot());
+            if (!this.loaded || json === this.lastSaved)
+                return;
+            untracked(() => this.schedule());
+        });
+        inject(DestroyRef).onDestroy(() => this.clearTimer());
+    }
+    /**
+     * Lê a conta e aplica (uma vez por sessão do app; chamadas seguintes devolvem a mesma promessa). Nunca rejeita.
+     */
+    start() {
+        if (!this.enabled || !this.browser)
+            return Promise.resolve();
+        this.readyPromise ??= this.load();
+        return this.readyPromise;
+    }
+    /** Como `start()`, mas sem esperar mais que `timeoutMs` (o login não fica parado se o Argos demorar). */
+    ready(timeoutMs = READY_TIMEOUT_MS) {
+        return Promise.race([this.start(), new Promise((resolve) => setTimeout(resolve, timeoutMs))]);
+    }
+    /** Grava agora o que estiver pendente ("Sincronizar agora"); relê a conta se ela ainda não respondeu. */
+    async syncNow() {
+        if (!this.enabled)
+            return;
+        if (!this.loaded) {
+            this.readyPromise = this.load();
+            await this.readyPromise;
+            return;
+        }
+        this.clearTimer();
+        await this.save();
+    }
+    async load() {
+        this.status.set('loading');
+        try {
+            const { preferences } = await this.api.preferences();
+            const remote = isDoc(preferences) ? preferences : null;
+            if (remote)
+                this.apply(remote);
+            this.loaded = true;
+            this.syncedAt.set(new Date());
+            if (remote) {
+                this.lastSaved = stable(remote);
+                // A conta pode ter menos do que o navegador (favoritos somados, chave nova): grava a diferença.
+                if (stable(this.snapshot()) !== this.lastSaved)
+                    this.schedule();
+                else
+                    this.status.set('synced');
+            }
+            else {
+                await this.save();
+            }
+        }
+        catch (err) {
+            this.failed(err);
+        }
+    }
+    /** Aplica o documento da conta pelos mesmos caminhos das telas (cada `set*` também grava no navegador). */
+    apply(doc) {
+        const p = this.preferences;
+        if (doc.themeMode && doc.themeMode !== this.hermesTheme.mode())
+            this.theme.setMode(doc.themeMode);
+        if (doc.family && doc.family !== this.hermesTheme.family()) {
+            const family = this.presets.families.find((f) => f.id === (this.themeConfig.aliases?.[doc.family] ?? doc.family));
+            if (family)
+                this.presets.setPreset(family);
+        }
+        if (doc.density && doc.density !== this.hermesTheme.density())
+            this.density.setDensity(doc.density);
+        if (doc.font && doc.font !== this.hermesTheme.font()) {
+            const fonts = this.hermesTheme.fonts ?? [];
+            if (!fonts.length || fonts.some((f) => f.id === doc.font))
+                this.hermesTheme.setFont(doc.font);
+        }
+        if (doc.sidebar && doc.sidebar !== this.sidebar.mode())
+            this.sidebar.setMode(doc.sidebar);
+        if (typeof doc.language === 'string' && doc.language !== p.language())
+            p.setLanguage(doc.language);
+        if (typeof doc.timeZone === 'string' && doc.timeZone !== p.timeZone())
+            p.setTimeZone(doc.timeZone);
+        if (typeof doc.textScale === 'number' && doc.textScale !== p.textScale())
+            p.setTextScale(doc.textScale);
+        if (doc.motion && doc.motion !== p.motion())
+            p.setMotion(doc.motion);
+        if (doc.hourCycle !== undefined && doc.hourCycle !== p.hourCycle())
+            p.setHourCycle(doc.hourCycle);
+        if (doc.weekStart !== undefined && doc.weekStart !== p.weekStart())
+            p.setWeekStart(doc.weekStart);
+        if (typeof doc.characterKeys === 'boolean' && doc.characterKeys !== p.characterKeys())
+            p.setCharacterKeys(doc.characterKeys);
+        if (typeof doc.idleMinutes === 'number' && doc.idleMinutes !== p.idleMinutes())
+            p.setIdleMinutes(doc.idleMinutes);
+        if (typeof doc.startPage === 'string' && doc.startPage !== p.startPage())
+            p.setStartPage(doc.startPage);
+        if (doc.notices && typeof doc.notices === 'object')
+            p.setNoticeTypes({ ...p.noticeTypes(), ...doc.notices });
+        // O aviso do navegador depende da permissão DESTE navegador: a conta só desliga, nunca liga sozinha.
+        if (doc.browserNotices === false && p.browserNotices())
+            p.setBrowserNotices(false);
+        if (Array.isArray(doc.favorites)) {
+            const remote = doc.favorites;
+            const ids = new Set(remote.map((f) => f?.id));
+            const localOnly = this.quickAccess.favorites().filter((f) => !ids.has(f.id));
+            this.quickAccess.setFavorites([...remote, ...localOnly]);
+        }
+    }
+    schedule() {
+        this.clearTimer();
+        this.status.set('saving');
+        this.timer = setTimeout(() => void this.save(), SPINE_PREFERENCES_SAVE_DELAY_MS);
+    }
+    async save() {
+        this.timer = null;
+        const doc = this.snapshot();
+        const json = stable(doc);
+        this.status.set('saving');
+        try {
+            await this.api.savePreferences(doc);
+            this.lastSaved = json;
+            this.syncedAt.set(new Date());
+            this.status.set('synced');
+        }
+        catch (err) {
+            this.failed(err);
+        }
+    }
+    failed(err) {
+        // Argos sem o endpoint (versão anterior) ou sem client no token: fica só no navegador, sem insistir.
+        if (err instanceof HttpErrorResponse && (err.status === 404 || err.status === 400 || err.status === 405)) {
+            this.status.set('local');
+            this.loaded = false;
+            return;
+        }
+        this.status.set('error');
+    }
+    clearTimer() {
+        if (this.timer)
+            clearTimeout(this.timer);
+        this.timer = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountPreferencesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountPreferencesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAccountPreferencesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/** JSON com as chaves dos objetos em ordem (a conta pode devolver outra ordem). */
+function stable(value) {
+    return JSON.stringify(value, (_key, v) => v && typeof v === 'object' && !Array.isArray(v)
+        ? Object.fromEntries(Object.entries(v).sort(([a], [b]) => a.localeCompare(b)))
+        : v);
+}
+function isDoc(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value) && typeof value.v === 'number';
+}
+
+const positive = (value) => {
+    const n = Number(value);
+    return Number.isFinite(n) && n > 0 ? Math.round(n) : 0;
+};
+/** Opções e limites de inatividade do app. Sem o recurso, `enabled` é falso e não há opções. */
+function idleLimits(features) {
+    const config = features?.idleTimeout;
+    if (!config)
+        return { enabled: false, min: 0, max: 0, options: [] };
+    const min = typeof config === 'object' ? positive(config.min) : 0;
+    let max = typeof config === 'object' ? positive(config.max) : 0;
+    if (max && min && max < min)
+        max = min;
+    const options = SPINE_IDLE_OPTIONS.filter((m) => (m === 0 ? !max : m >= min && (!max || m <= max)));
+    // Um limite fora das opções padrão (ex.: máximo de 10 min) entra como opção própria.
+    const extra = [min, max].filter((m) => m > 0 && !options.includes(m));
+    return { enabled: true, min, max, options: [...options, ...extra].sort((a, b) => a - b) };
+}
+/** Minutos que valem de fato: a escolha da pessoa dentro dos limites do app (0 = não encerra). */
+function effectiveIdleMinutes(chosen, limits) {
+    if (!limits.enabled)
+        return 0;
+    let minutes = chosen > 0 ? chosen : 0;
+    if (limits.max && (minutes === 0 || minutes > limits.max))
+        minutes = limits.max;
+    if (limits.min && minutes > 0 && minutes < limits.min)
+        minutes = limits.min;
+    return minutes;
+}
+
+/** Segundos de aviso antes de encerrar. */
+const SPINE_IDLE_WARNING_SECONDS = 60;
+/** Intervalo entre gravações da última atividade no `localStorage` (as outras abas leem de lá). */
+const WRITE_EVERY_MS = 5_000;
+const ACTIVITY_EVENTS = ['pointerdown', 'pointermove', 'keydown', 'wheel', 'touchstart', 'scroll'];
+/**
+ * Encerrar por inatividade (`SpineFeatures.idleTimeout`): conta o tempo sem uso (ponteiro, teclado, rolagem) em
+ * TODAS as abas do app — a última atividade vai para o `localStorage` (`hermes_<clientId>_last_activity`) e cada aba
+ * confere a mais recente —, abre o aviso com contagem regressiva `SPINE_IDLE_WARNING_SECONDS` antes do fim e, se
+ * ninguém responder, sai pelo `SpineLogoutService` (o mesmo "Sair" do menu). Com o aviso aberto, só "Continuar
+ * conectado" (ou atividade em outra aba) mantém a sessão: mexer o ponteiro sobre o aviso não conta.
+ *
+ * Os minutos vêm do `SpinePreferencesService.idleMinutes`, limitados pelo app (`effectiveIdleMinutes`). Ligado pelo
+ * `LayoutComponent` (só existe com sessão); não faz nada fora do navegador.
+ */
+class SpineIdleService {
+    constructor() {
+        this.browser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.zone = inject(NgZone);
+        this.preferences = inject(SpinePreferencesService);
+        this.logoutService = inject(SpineLogoutService);
+        this.config = inject(SPINE_CONFIG, { optional: true });
+        this.storageKey = `hermes_${this.config?.clientId || 'app'}_last_activity`;
+        this.limits = idleLimits(this.config?.features);
+        /** Minutos que valem agora (0 = não encerra). */
+        this.minutes = computed(() => effectiveIdleMinutes(this.preferences.idleMinutes(), this.limits), ...(ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []));
+        /** Aviso aberto. */
+        this.warning = signal(false, ...(ngDevMode ? [{ debugName: "warning" }] : /* istanbul ignore next */ []));
+        /** Segundos que faltam, enquanto o aviso está aberto. */
+        this.secondsLeft = signal(SPINE_IDLE_WARNING_SECONDS, ...(ngDevMode ? [{ debugName: "secondsLeft" }] : /* istanbul ignore next */ []));
+        this.lastActivity = Date.now();
+        this.lastWrite = 0;
+        this.timer = null;
+        this.expiring = false;
+        /** Ligado por `start()` (o layout, que só existe com sessão). */
+        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.onActivity = () => {
+            if (this.warning())
+                return;
+            this.touch();
+        };
+        if (!this.browser)
+            return;
+        effect(() => {
+            if (this.active() && this.minutes() > 0)
+                this.run();
+            else
+                this.stop();
+        });
+        inject(DestroyRef).onDestroy(() => this.stop());
+    }
+    /** Liga a contagem (idempotente). Para sozinha quando a escolha vira "Nunca". */
+    start() {
+        this.active.set(true);
+    }
+    /** "Continuar conectado": fecha o aviso e recomeça a contagem. */
+    stay() {
+        this.warning.set(false);
+        this.touch(true);
+    }
+    /** "Sair agora". */
+    logoutNow() {
+        void this.expire();
+    }
+    /** Conta uma atividade agora (e a grava para as outras abas no máximo a cada 5 s, ou já, com `force`). */
+    touch(force = false) {
+        const now = Date.now();
+        this.lastActivity = now;
+        if (!force && now - this.lastWrite < WRITE_EVERY_MS)
+            return;
+        this.lastWrite = now;
+        try {
+            localStorage.setItem(this.storageKey, String(now));
+        }
+        catch { /* storage indisponível */ }
+    }
+    /** Confere o tempo sem uso: abre o aviso, atualiza a contagem ou encerra. Exposto para os testes. */
+    check(now = Date.now()) {
+        const minutes = this.minutes();
+        if (!minutes || this.expiring)
+            return;
+        const idle = now - Math.max(this.lastActivity, this.storedActivity());
+        const total = minutes * 60_000;
+        const warnAt = Math.max(0, total - SPINE_IDLE_WARNING_SECONDS * 1000);
+        if (idle >= total) {
+            void this.expire();
+        }
+        else if (idle >= warnAt) {
+            this.zone.run(() => {
+                this.secondsLeft.set(Math.max(1, Math.ceil((total - idle) / 1000)));
+                this.warning.set(true);
+            });
+        }
+        else if (this.warning()) {
+            // Atividade em outra aba: o aviso some sozinho.
+            this.zone.run(() => this.warning.set(false));
+        }
+    }
+    storedActivity() {
+        try {
+            const value = Number(localStorage.getItem(this.storageKey));
+            return Number.isFinite(value) ? value : 0;
+        }
+        catch {
+            return 0;
+        }
+    }
+    run() {
+        if (this.timer)
+            return;
+        this.touch(true);
+        this.zone.runOutsideAngular(() => {
+            for (const name of ACTIVITY_EVENTS)
+                document.addEventListener(name, this.onActivity, { passive: true, capture: true });
+            this.timer = setInterval(() => this.check(), 1000);
+        });
+    }
+    stop() {
+        if (this.timer)
+            clearInterval(this.timer);
+        this.timer = null;
+        if (this.browser)
+            for (const name of ACTIVITY_EVENTS)
+                document.removeEventListener(name, this.onActivity, { capture: true });
+        this.warning.set(false);
+    }
+    async expire() {
+        if (this.expiring)
+            return;
+        this.expiring = true;
+        this.zone.run(() => this.warning.set(false));
+        try {
+            const ok = await this.logoutService.logout();
+            // Saída recusada pelo Argos: a sessão continua (o aviso de falha já apareceu); recomeça a contagem.
+            if (!ok)
+                this.touch(true);
+        }
+        finally {
+            this.expiring = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineIdleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineIdleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineIdleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Avisos do app (`SpineFeatures.notices`): o app declara os tipos que emite (`{ id, label }`) e chama
+ * `notify(tipo, aviso)` de onde já sabe do acontecimento (subscription, polling). Cada tipo pode ser desligado em
+ * Configurações › Notificações; tipo desligado não aparece. O aviso ligado:
+ *
+ * - aparece na tela (`HermesToastService`, com "Abrir" quando tem `url`);
+ * - com a aba em segundo plano, o aviso do navegador ligado e a permissão concedida, vira também um aviso do sistema
+ *   (Notification API); clicar nele traz a aba para a frente e abre a `url`.
+ *
+ * Tipo não declarado em `SpineFeatures.notices.types` aparece sempre (em desenvolvimento, com um aviso no console).
+ */
+class SpineNoticesService {
+    constructor() {
+        this.browser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.zone = inject(NgZone);
+        this.injector = inject(Injector);
+        this.toast = inject(HermesToastService);
+        this.preferences = inject(SpinePreferencesService);
+        this.messages = inject(SPINE_MESSAGES);
+        this.config = inject(SPINE_CONFIG, { optional: true })?.features?.notices;
+        this.warned = new Set();
+        /** Recurso ligado pelo app. */
+        this.enabled = !!this.config;
+        /** Tipos declarados pelo app. */
+        this.types = this.config?.types ?? [];
+        /** Permissão atual do navegador. */
+        this.permission = signal(this.readPermission(), ...(ngDevMode ? [{ debugName: "permission" }] : /* istanbul ignore next */ []));
+        /** Aviso do navegador valendo de fato: ligado nas configurações e permitido pelo navegador. */
+        this.browserActive = computed(() => this.preferences.browserNotices() && this.permission() === 'granted', ...(ngDevMode ? [{ debugName: "browserActive" }] : /* istanbul ignore next */ []));
+    }
+    /** O tipo está ligado (escolha da pessoa ou, sem escolha, o `defaultEnabled` dele). */
+    isEnabled(typeId) {
+        const chosen = this.preferences.noticeTypes()[typeId];
+        if (typeof chosen === 'boolean')
+            return chosen;
+        return this.types.find((t) => t.id === typeId)?.defaultEnabled ?? true;
+    }
+    setEnabled(typeId, enabled) {
+        this.preferences.setNoticeType(typeId, enabled);
+    }
+    /**
+     * Liga o aviso do navegador: pede a permissão quando ainda não foi pedida. Devolve se ficou ligado (permissão
+     * negada ou navegador sem suporte: continua desligado).
+     */
+    async enableBrowser() {
+        if (this.readPermission() === 'unsupported') {
+            this.permission.set('unsupported');
+            return false;
+        }
+        let permission = Notification.permission;
+        if (permission === 'default') {
+            try {
+                permission = await Notification.requestPermission();
+            }
+            catch {
+                permission = 'denied';
+            }
+        }
+        this.permission.set(permission);
+        const granted = permission === 'granted';
+        this.preferences.setBrowserNotices(granted);
+        return granted;
+    }
+    disableBrowser() {
+        this.preferences.setBrowserNotices(false);
+    }
+    /** Relê a permissão (a pessoa pode ter mudado nas configurações do navegador). */
+    refreshPermission() {
+        this.permission.set(this.readPermission());
+    }
+    /** Mostra o aviso, se o tipo estiver ligado. Devolve se mostrou. */
+    notify(typeId, notice) {
+        if (this.types.length && !this.types.some((t) => t.id === typeId) && isDevMode() && !this.warned.has(typeId)) {
+            this.warned.add(typeId);
+            console.warn(`[hermes-spine] aviso de tipo não declarado em SpineFeatures.notices.types: ${typeId}`);
+        }
+        if (!this.isEnabled(typeId))
+            return false;
+        const url = notice.url && notice.url.startsWith('/') && !notice.url.startsWith('//') ? notice.url : undefined;
+        const message = notice.body ? `${notice.title} — ${notice.body}` : notice.title;
+        this.toast.push(notice.intent ?? 'info', message, url
+            ? { action: { label: this.messages.accountFeatures.noticeOpen, run: () => this.open(url) } }
+            : undefined);
+        if (this.browser && document.visibilityState === 'hidden' && this.preferences.browserNotices())
+            this.system(typeId, notice, url);
+        return true;
+    }
+    system(typeId, notice, url) {
+        this.refreshPermission();
+        if (this.permission() !== 'granted')
+            return;
+        try {
+            const shown = new Notification(notice.title, { body: notice.body, tag: url ? `${typeId}:${url}` : typeId });
+            shown.onclick = () => {
+                window.focus();
+                shown.close();
+                if (url)
+                    this.open(url);
+            };
+        }
+        catch {
+            // Alguns navegadores (Chrome no Android) só aceitam aviso por service worker: fica só o da tela.
+        }
+    }
+    open(url) {
+        this.zone.run(() => void this.injector.get(Router).navigateByUrl(url));
+    }
+    readPermission() {
+        if (!this.browser || typeof Notification === 'undefined')
+            return 'unsupported';
+        return Notification.permission;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineNoticesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineNoticesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineNoticesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Rotas do shell que nunca viram "última tela". */
+const IGNORED = /^\/(callback|logoff|loggedout|login|no-permission|blocked)(\/|$)/;
+/** Caminho interno seguro (`/x`, nunca `//host` nem `http:`). */
+function isInternalPath(url) {
+    return typeof url === 'string' && url.startsWith('/') && !url.startsWith('//') && !url.includes('\\');
+}
+/**
+ * Tela inicial (`SpineFeatures.startPage`): para onde o app vai depois do login quando a pessoa não pediu uma URL
+ * (`/callback` sem URL de retorno, ou com `/` ou `/home`) — o início do app, um favorito ou a última tela visitada.
+ *
+ * A última tela fica no `SpineUserStorage` (`lastPage`, por usuário) e só é gravada enquanto a escolha for
+ * "Última tela visitada" (`track()`, ligado pelo `LayoutComponent`); ao contrário dos recentes, ela fica no logout.
+ */
+class SpineStartPageService {
+    constructor() {
+        this.browser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        this.preferences = inject(SpinePreferencesService);
+        this.storage = inject(SpineUserStorage);
+        this.enabled = !!inject(SPINE_CONFIG, { optional: true })?.features?.startPage;
+        this.tracking = false;
+    }
+    /** Grava a URL de cada navegação enquanto a escolha for "Última tela visitada" (idempotente). */
+    track() {
+        if (!this.enabled || !this.browser || this.tracking)
+            return;
+        this.tracking = true;
+        const router = this.injector.get(Router);
+        const sub = router.events
+            .pipe(filter((e) => e instanceof NavigationEnd))
+            .subscribe((e) => this.remember(e.urlAfterRedirects));
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
+    }
+    /** Guarda `url` como última tela (só com a escolha "Última tela visitada"). */
+    remember(url) {
+        if (!this.enabled || this.preferences.startPage() !== 'last' || !isInternalPath(url) || IGNORED.test(url))
+            return;
+        try {
+            localStorage.setItem(this.storage.key(SPINE_USER_STORAGE_KEYS.lastPage), url);
+        }
+        catch { /* storage indisponível */ }
+    }
+    /** Destino da tela inicial escolhida, ou `null` (início do app, recurso desligado ou favorito que sumiu). */
+    target() {
+        if (!this.enabled || !this.browser)
+            return null;
+        const choice = this.preferences.startPage();
+        if (choice === 'last') {
+            let url = null;
+            try {
+                url = localStorage.getItem(this.storage.key(SPINE_USER_STORAGE_KEYS.lastPage));
+            }
+            catch {
+                url = null;
+            }
+            return isInternalPath(url) && !IGNORED.test(url) ? url : null;
+        }
+        if (choice.startsWith('fav:')) {
+            const id = choice.slice(4);
+            const favorite = this.injector.get(SpineQuickAccessService).favorites().find((f) => f.id === id);
+            return favorite && isInternalPath(favorite.redirect) ? favorite.redirect : null;
+        }
+        return null;
+    }
+    /** `true` quando o login não pediu uma URL própria (aí a tela inicial manda). */
+    static isDefaultReturn(returnUrl) {
+        return !returnUrl || returnUrl === '/' || returnUrl === '/home';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineStartPageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineStartPageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineStartPageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Itens por página. */
+const PAGE = 10;
+/**
+ * Atividade da conta (MFA › "Atividade da conta", `SpineFeatures.accountActivity`): as entradas e as tentativas que
+ * falharam desta conta nos últimos 90 dias (`GET {api}/activity` do Argos) — quando, de onde (IP e navegador), em qual
+ * aplicativo, por qual método e, na falha, o motivo. "Só falhas" filtra; "Carregar mais" traz a página seguinte.
+ */
+class AccountActivityComponent {
+    constructor() {
+        this.api = inject(SpineAccountSecurityService);
+        this.messages = inject(SPINE_MESSAGES);
+        this.t = this.messages.accountFeatures;
+        this.attempts = this.messages.loginAttempts;
+        this.preferences = inject(SpinePreferencesService);
+        this.filter = signal('', ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.entries = signal([], ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+        this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loadError = signal('', ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+        this.filterOptions = computed(() => [
+            { value: '', label: this.t.activityAll },
+            { value: 'failure', label: this.t.activityFailures },
+        ], ...(ngDevMode ? [{ debugName: "filterOptions" }] : /* istanbul ignore next */ []));
+        this.showing = computed(() => formatMessage(this.t.activityShowing, { shown: this.entries().length, total: this.total() }), ...(ngDevMode ? [{ debugName: "showing" }] : /* istanbul ignore next */ []));
+        if (this.api.available)
+            void this.load(0);
+        else
+            this.loading.set(false);
+    }
+    setFilter(value) {
+        this.filter.set(value === 'failure' ? 'failure' : '');
+        this.reload();
+    }
+    reload() {
+        this.entries.set([]);
+        void this.load(0);
+    }
+    more() {
+        void this.load(this.entries().length);
+    }
+    async load(offset) {
+        this.loading.set(true);
+        try {
+            const page = await this.api.activity({ limit: PAGE, offset, result: this.filter() || undefined });
+            const attempts = page?.attempts ?? [];
+            this.entries.update((list) => (offset ? [...list, ...attempts] : attempts));
+            this.total.set(page?.total ?? attempts.length);
+            this.loadError.set('');
+        }
+        catch (err) {
+            this.loadError.set(accountErrorCode(err) || 'generic');
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    errorText() {
+        const errors = this.messages.accountSecurity.errors;
+        const code = this.loadError();
+        return code === 'generic' || !errors[code] ? this.t.activityLoadError : errors[code];
+    }
+    resultLabel(a) {
+        return this.attempts.results[a.result] ?? a.result;
+    }
+    resultColor(a) {
+        return a.result === 'success' ? 'success' : a.result === 'failure' ? 'danger' : 'neutral';
+    }
+    method(a) {
+        return this.attempts.methods[a.method] ?? a.method;
+    }
+    reason(a) {
+        return this.attempts.reasons[a.reason ?? ''] ?? a.reason ?? '';
+    }
+    app(a) {
+        return formatMessage(this.t.activityApp, { app: a.client?.name || this.t.unknownApp });
+    }
+    detail(a) {
+        const date = new Intl.DateTimeFormat(this.messages.meta.locale, { dateStyle: 'short', timeStyle: 'short', timeZone: this.preferences.effectiveTimeZone() })
+            .format(new Date(a.at));
+        return formatMessage(this.t.activityDetail, { date, ip: a.ip || this.t.unknownIp });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AccountActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AccountActivityComponent, isStandalone: true, selector: "spine-account-activity", ngImport: i0, template: `
+    <div class="sp-account__toolbar">
+      <hm-segmented-control size="small" emphasis="action" [label]="t.activityFilter" [options]="filterOptions()" [value]="filter()" (valueChange)="setFilter($event)" />
+    </div>
+    @if (loading() && !entries().length) {
+      <p class="sp-account__note" role="status">{{ messages.accountSecurity.loading }}</p>
+    } @else if (loadError()) {
+      <hm-alert variant="error">{{ errorText() }}</hm-alert>
+      <div class="sp-account__actions">
+        <hm-button size="small" emphasis="medium" icon="refresh" (clicked)="reload()">{{ messages.accountSecurity.retry }}</hm-button>
+      </div>
+    } @else {
+      <div class="sp-account__list">
+        <ul class="sp-account__items">
+          @for (a of entries(); track a.id) {
+            <li class="sp-account__item">
+              <span class="sp-account__icon" [class.sp-account__icon--accent]="a.result === 'success'"><hm-icon [shape]="a.device.mobile ? 'mobile' : 'computer'" /></span>
+              <span class="sp-account__item-main">
+                <span class="sp-account__item-title">
+                  <strong>{{ a.device.label }}</strong>
+                  <hm-tag [name]="resultLabel(a)" [color]="resultColor(a)" />
+                </span>
+                <span class="sp-account__meta">{{ detail(a) }}</span>
+                <span class="sp-account__meta">{{ method(a) }}@if (a.reason) { · {{ reason(a) }} }@if (a.client) { · {{ app(a) }} }</span>
+              </span>
+            </li>
+          } @empty {
+            <li class="sp-account__item sp-account__item--empty">{{ t.activityEmpty }}</li>
+          }
+        </ul>
+        @if (entries().length) {
+          <div class="sp-account__list-footer">
+            <span class="sp-account__note">{{ showing() }}</span>
+            @if (entries().length < total()) {
+              <hm-button size="small" emphasis="medium" [loading]="loading()" (clicked)="more()">{{ t.activityMore }}</hm-button>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\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: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { 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: AccountActivityComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-account-activity', imports: [AlertComponent, ButtonComponent, IconComponent, SegmentedControlComponent, TagComponent], template: `
+    <div class="sp-account__toolbar">
+      <hm-segmented-control size="small" emphasis="action" [label]="t.activityFilter" [options]="filterOptions()" [value]="filter()" (valueChange)="setFilter($event)" />
+    </div>
+    @if (loading() && !entries().length) {
+      <p class="sp-account__note" role="status">{{ messages.accountSecurity.loading }}</p>
+    } @else if (loadError()) {
+      <hm-alert variant="error">{{ errorText() }}</hm-alert>
+      <div class="sp-account__actions">
+        <hm-button size="small" emphasis="medium" icon="refresh" (clicked)="reload()">{{ messages.accountSecurity.retry }}</hm-button>
+      </div>
+    } @else {
+      <div class="sp-account__list">
+        <ul class="sp-account__items">
+          @for (a of entries(); track a.id) {
+            <li class="sp-account__item">
+              <span class="sp-account__icon" [class.sp-account__icon--accent]="a.result === 'success'"><hm-icon [shape]="a.device.mobile ? 'mobile' : 'computer'" /></span>
+              <span class="sp-account__item-main">
+                <span class="sp-account__item-title">
+                  <strong>{{ a.device.label }}</strong>
+                  <hm-tag [name]="resultLabel(a)" [color]="resultColor(a)" />
+                </span>
+                <span class="sp-account__meta">{{ detail(a) }}</span>
+                <span class="sp-account__meta">{{ method(a) }}@if (a.reason) { · {{ reason(a) }} }@if (a.client) { · {{ app(a) }} }</span>
+              </span>
+            </li>
+          } @empty {
+            <li class="sp-account__item sp-account__item--empty">{{ t.activityEmpty }}</li>
+          }
+        </ul>
+        @if (entries().length) {
+          <div class="sp-account__list-footer">
+            <span class="sp-account__note">{{ showing() }}</span>
+            @if (entries().length < total()) {
+              <hm-button size="small" emphasis="medium" [loading]="loading()" (clicked)="more()">{{ t.activityMore }}</hm-button>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\n"] }]
+        }], ctorParameters: () => [] });
+
 /** 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() ?? '';
@@ -1604,7 +2519,7 @@ 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
+ * Estado da seção "MFA" 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.
@@ -1820,7 +2735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 /**
- * Escopo do estado da conta: no `hm-settings-section` da "Conta e segurança", para as linhas da seção
+ * Escopo do estado da conta: no `hm-settings-section` da seção "MFA", 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 {
@@ -1835,7 +2750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                 }]
         }] });
 
-let sequence$3 = 0;
+let sequence$4 = 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
@@ -1845,8 +2760,9 @@ class AccountReauthComponent {
     constructor() {
         this.state = inject(SpineAccountSecurityState);
         this.t = inject(SPINE_MESSAGES).accountSecurity;
-        this.titleId = `sp-account-reauth-${++sequence$3}`;
+        this.titleId = `sp-account-reauth-${++sequence$4}`;
         this.codeLabelId = `${this.titleId}-code`;
+        this.hintId = `${this.titleId}-hint`;
         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. */
@@ -1893,9 +2809,14 @@ class AccountReauthComponent {
     }
     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>
+    <section class="sp-account__panel" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="hintId">
+      <div class="sp-account__panel-head">
+        <hm-icon shape="shield-check" />
+        <div class="sp-account__panel-text">
+          <h4 class="sp-account__title" [id]="titleId">{{ t.reauthTitle }}</h4>
+          <p class="sp-account__note" [id]="hintId">{{ t.reauthHint }}</p>
+        </div>
+      </div>
 
       @if (choices().length > 1) {
         <hm-radio layout="inline" [label]="t.reauthHow" [options]="choices()" [value]="state.reauthMode()" (valueChange)="choose($event)" />
@@ -1907,7 +2828,7 @@ class AccountReauthComponent {
             <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>
+              <hm-button emphasis="medium" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
             </div>
           </form>
         }
@@ -1917,14 +2838,14 @@ class AccountReauthComponent {
               [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>
+              <hm-button emphasis="medium" [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>
+            <hm-button emphasis="medium" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
           </div>
         }
         @default {
@@ -1933,19 +2854,24 @@ class AccountReauthComponent {
             <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>
+            <hm-button emphasis="medium" [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 }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\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: 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: 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>
+            args: [{ selector: 'spine-account-reauth', imports: [ReactiveFormsModule, ButtonComponent, CodeInputComponent, IconComponent, InputComponent, RadioComponent], template: `
+    <section class="sp-account__panel" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="hintId">
+      <div class="sp-account__panel-head">
+        <hm-icon shape="shield-check" />
+        <div class="sp-account__panel-text">
+          <h4 class="sp-account__title" [id]="titleId">{{ t.reauthTitle }}</h4>
+          <p class="sp-account__note" [id]="hintId">{{ t.reauthHint }}</p>
+        </div>
+      </div>
 
       @if (choices().length > 1) {
         <hm-radio layout="inline" [label]="t.reauthHow" [options]="choices()" [value]="state.reauthMode()" (valueChange)="choose($event)" />
@@ -1957,7 +2883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             <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>
+              <hm-button emphasis="medium" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
             </div>
           </form>
         }
@@ -1967,14 +2893,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
               [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>
+              <hm-button emphasis="medium" [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>
+            <hm-button emphasis="medium" [disabled]="state.busy()" (clicked)="state.cancel()">{{ t.cancel }}</hm-button>
           </div>
         }
         @default {
@@ -1983,79 +2909,480 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             <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>
+            <hm-button emphasis="medium" [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-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\n"] }]
+        }] });
+
+let sequence$3 = 0;
+/**
+ * Verificação em duas etapas da conta no Argos, dentro do painel de configurações: os métodos (ativo ou não
+ * cadastrado; o SMS, sem fluxo no Argos, só aparece se já estiver ativo) 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$3}`;
+        this.email = new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email] });
+        /** Métodos da lista: o SMS não cadastrado fica de fora (não há como cadastrar daqui). */
+        this.shown = computed(() => this.state.methods().filter((m) => !isSms(m) || m.active), ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    }
+    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 (!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__note\" 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 size=\"small\" 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 sp-account__panel--danger\" [attr.aria-labelledby]=\"ids + '-remove'\">\n          <div class=\"sp-account__panel-head\">\n            <hm-icon shape=\"trash\" />\n            <div class=\"sp-account__panel-text\">\n              <h4 class=\"sp-account__title\" [id]=\"ids + '-remove'\">{{ fmt(t.removeTitle, { method: label(actionMethod()) }) }}</h4>\n              <p class=\"sp-account__note\">\n                {{ t.removeHint }}\n                @if (state.activeMethods().length <= 1) { {{ t.removeLastHint }} }\n              </p>\n            </div>\n          </div>\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=\"medium\" [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          <div class=\"sp-account__panel-head\">\n            <hm-icon shape=\"authenticator\" />\n            <div class=\"sp-account__panel-text\">\n              <h4 class=\"sp-account__title\" [id]=\"ids + '-totp'\">{{ t.totpTitle }}</h4>\n              @if (state.totpSetup(); as setup) {\n                <p class=\"sp-account__note\">{{ t.manualKey }} <code class=\"sp-account__secret\">{{ setup.secret }}</code></p>\n              }\n            </div>\n          </div>\n          @if (state.totpSetup()?.qrcode; as qrcode) {\n            <div class=\"sp-account__qr\"><img [src]=\"qrcode\" [alt]=\"t.qrAlt\" /></div>\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=\"medium\" [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          <div class=\"sp-account__panel-head\">\n            <hm-icon shape=\"mail\" />\n            <div class=\"sp-account__panel-text\">\n              <h4 class=\"sp-account__title\" [id]=\"ids + '-email'\">{{ t.emailTitle }}</h4>\n            </div>\n          </div>\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=\"medium\" [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          <div class=\"sp-account__panel-head\">\n            <hm-icon shape=\"mail\" />\n            <div class=\"sp-account__panel-text\">\n              <h4 class=\"sp-account__title\" [id]=\"ids + '-email-code'\">{{ t.emailCodeTitle }}</h4>\n              <p class=\"sp-account__note\" [id]=\"ids + '-email-code-hint'\">{{ fmt(t.emailCodeHint, { email: state.enrollEmail() }) }}</p>\n            </div>\n          </div>\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=\"medium\" [disabled]=\"state.busy()\" (clicked)=\"state.cancel()\">{{ t.cancel }}</hm-button>\n          </div>\n        </section>\n      }\n    }\n  } @else {\n    <div class=\"sp-account__list\">\n      <ul class=\"sp-account__items\">\n        @for (m of shown(); track m.method_id) {\n          <li class=\"sp-account__item\">\n            <span class=\"sp-account__icon\" [class.sp-account__icon--accent]=\"m.active\"><hm-icon [shape]=\"icon(m)\" /></span>\n            <span class=\"sp-account__item-main\">\n              <span class=\"sp-account__item-title\"><strong>{{ label(m) }}</strong></span>\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=\"medium\" 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      @if (data.policy.required) {\n        <div class=\"sp-account__list-footer\">\n          <span class=\"sp-account__note\">{{ t.requiredHint }}</span>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\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__note\" 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 size=\"small\" 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 sp-account__panel--danger\" [attr.aria-labelledby]=\"ids + '-remove'\">\n          <div class=\"sp-account__panel-head\">\n            <hm-icon shape=\"trash\" />\n            <div class=\"sp-account__panel-text\">\n              <h4 class=\"sp-account__title\" [id]=\"ids + '-remove'\">{{ fmt(t.removeTitle, { method: label(actionMethod()) }) }}</h4>\n              <p class=\"sp-account__note\">\n                {{ t.removeHint }}\n                @if (state.activeMethods().length <= 1) { {{ t.removeLastHint }} }\n              </p>\n            </div>\n          </div>\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=\"medium\" [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          <div class=\"sp-account__panel-head\">\n            <hm-icon shape=\"authenticator\" />\n            <div class=\"sp-account__panel-text\">\n              <h4 class=\"sp-account__title\" [id]=\"ids + '-totp'\">{{ t.totpTitle }}</h4>\n              @if (state.totpSetup(); as setup) {\n                <p class=\"sp-account__note\">{{ t.manualKey }} <code class=\"sp-account__secret\">{{ setup.secret }}</code></p>\n              }\n            </div>\n          </div>\n          @if (state.totpSetup()?.qrcode; as qrcode) {\n            <div class=\"sp-account__qr\"><img [src]=\"qrcode\" [alt]=\"t.qrAlt\" /></div>\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=\"medium\" [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          <div class=\"sp-account__panel-head\">\n            <hm-icon shape=\"mail\" />\n            <div class=\"sp-account__panel-text\">\n              <h4 class=\"sp-account__title\" [id]=\"ids + '-email'\">{{ t.emailTitle }}</h4>\n            </div>\n          </div>\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=\"medium\" [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          <div class=\"sp-account__panel-head\">\n            <hm-icon shape=\"mail\" />\n            <div class=\"sp-account__panel-text\">\n              <h4 class=\"sp-account__title\" [id]=\"ids + '-email-code'\">{{ t.emailCodeTitle }}</h4>\n              <p class=\"sp-account__note\" [id]=\"ids + '-email-code-hint'\">{{ fmt(t.emailCodeHint, { email: state.enrollEmail() }) }}</p>\n            </div>\n          </div>\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=\"medium\" [disabled]=\"state.busy()\" (clicked)=\"state.cancel()\">{{ t.cancel }}</hm-button>\n          </div>\n        </section>\n      }\n    }\n  } @else {\n    <div class=\"sp-account__list\">\n      <ul class=\"sp-account__items\">\n        @for (m of shown(); track m.method_id) {\n          <li class=\"sp-account__item\">\n            <span class=\"sp-account__icon\" [class.sp-account__icon--accent]=\"m.active\"><hm-icon [shape]=\"icon(m)\" /></span>\n            <span class=\"sp-account__item-main\">\n              <span class=\"sp-account__item-title\"><strong>{{ label(m) }}</strong></span>\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=\"medium\" 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      @if (data.policy.required) {\n        <div class=\"sp-account__list-footer\">\n          <span class=\"sp-account__note\">{{ t.requiredHint }}</span>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\n"] }]
+        }] });
+
+/**
+ * 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
+ * aqui não existe escolha de aplicação.
+ * Autentica com o access-token da sessão (o servidor recusa um app-token aqui: token não cria
+ * token). `available` é falso quando o app não tem a URL do argos-admin (`SPINE_ADMIN_API`).
+ */
+class SpineAppTokensService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.auth = inject(AuthorizationService);
+        this.adminApi = inject(SPINE_ADMIN_API, { optional: true });
+        this.available = !!this.adminApi;
+        /** Sobe a cada token criado por aqui (o "Conectar um agente de IA" cria um; a lista de tokens relê). */
+        this.changes = signal(0, ...(ngDevMode ? [{ debugName: "changes" }] : /* istanbul ignore next */ []));
+    }
+    get baseUrl() {
+        return `${this.adminApi}/me/app-tokens`;
+    }
+    get headers() {
+        return new HttpHeaders({ 'x-access-token': this.auth.getToken() ?? '' });
+    }
+    list() {
+        return firstValueFrom(this.http.get(this.baseUrl, { headers: this.headers }));
+    }
+    options() {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/options`, { headers: this.headers }));
+    }
+    async create(body) {
+        const created = await firstValueFrom(this.http.post(this.baseUrl, body, { headers: this.headers }));
+        this.changes.update((n) => n + 1);
+        return created;
+    }
+    revoke(id) {
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAppTokensService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Monta o `.mcp.json` do Claude Code: uma entrada por servidor, todas com o mesmo token. Com `write`, cada servidor
+ *  que tem `writeScopes` pede esses escopos; os demais (e todos sem `write`) vão com `readScopes`, ou sem o header
+ *  (o MCP já é só leitura sem ele). URL relativa é resolvida contra `origin`. */
+function buildMcpConfig(servers, token, write, origin) {
+    const mcpServers = {};
+    for (const server of servers) {
+        const headers = { 'x-app-token': token };
+        const scopes = write && server.writeScopes ? server.writeScopes : server.readScopes;
+        if (scopes)
+            headers['x-mcp-scopes'] = scopes;
+        mcpServers[server.name] = { type: 'http', url: new URL(server.url, origin).href, headers };
+    }
+    return JSON.stringify({ mcpServers }, null, 2);
+}
+/**
+ * Sessões › "Conectar um agente de IA" (`SpineFeatures.aiAgent`): em um passo, cria um token de aplicação pessoal
+ * (`x-app-token`, a mesma API de "Tokens de aplicação") e monta a configuração MCP pronta para o Claude Code, com os
+ * servidores que o app declarou e os escopos do acesso escolhido (só leitura ou leitura e escrita). O token aparece
+ * uma única vez, dentro da configuração; nunca vai para o console nem para o armazenamento do navegador, e some ao
+ * concluir ou fechar o painel.
+ */
+class AiAgentComponent {
+    constructor() {
+        this.messages = inject(SPINE_MESSAGES);
+        this.t = this.messages.accountFeatures;
+        this.tokens = this.messages.appTokens;
+        this.fmt = formatMessage;
+        this.service = inject(SpineAppTokensService);
+        this.toast = inject(HermesToastService);
+        this.preferences = inject(SpinePreferencesService);
+        this.available = this.service.available;
+        this.servers = inject(SPINE_CONFIG, { optional: true })?.features?.aiAgent?.servers ?? [];
+        this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.starting = signal(false, ...(ngDevMode ? [{ debugName: "starting" }] : /* istanbul ignore next */ []));
+        this.submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
+        this.selected = signal(new Set(this.servers.map((s) => s.name)), ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.access = signal('read', ...(ngDevMode ? [{ debugName: "access" }] : /* istanbul ignore next */ []));
+        this.badges = signal([], ...(ngDevMode ? [{ debugName: "badges" }] : /* istanbul ignore next */ []));
+        this.badgeId = signal('', ...(ngDevMode ? [{ debugName: "badgeId" }] : /* istanbul ignore next */ []));
+        this.validity = signal('90', ...(ngDevMode ? [{ debugName: "validity" }] : /* istanbul ignore next */ []));
+        /** Configuração gerada (com o token), mostrada uma única vez. */
+        this.result = signal(null, ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
+        this.canWrite = computed(() => this.servers.some((s) => s.writeScopes && this.selected().has(s.name)), ...(ngDevMode ? [{ debugName: "canWrite" }] : /* istanbul ignore next */ []));
+        this.noBadges = computed(() => !this.badges().length, ...(ngDevMode ? [{ debugName: "noBadges" }] : /* istanbul ignore next */ []));
+        this.canSubmit = computed(() => !!this.selected().size && !!this.badgeId() && !this.submitting(), ...(ngDevMode ? [{ debugName: "canSubmit" }] : /* istanbul ignore next */ []));
+        this.accessOptions = computed(() => [
+            { value: 'read', label: this.t.aiAgentReadOnly },
+            { value: 'write', label: this.t.aiAgentReadWrite },
+        ], ...(ngDevMode ? [{ debugName: "accessOptions" }] : /* istanbul ignore next */ []));
+        this.badgeOptions = computed(() => this.badges().map((b) => ({ value: b.id, label: b.name })), ...(ngDevMode ? [{ debugName: "badgeOptions" }] : /* istanbul ignore next */ []));
+        this.validityOptions = computed(() => [
+            { value: '30', label: this.tokens.days30 },
+            { value: '90', label: this.tokens.days90 },
+            { value: '180', label: this.tokens.months6 },
+            { value: '365', label: this.tokens.year1 },
+        ], ...(ngDevMode ? [{ debugName: "validityOptions" }] : /* istanbul ignore next */ []));
+    }
+    serverLabel(server) {
+        const label = server.label ?? server.name;
+        return server.writeScopes ? label : formatMessage(this.t.aiAgentReadOnlyServer, { name: label });
+    }
+    toggleServer(name, checked) {
+        const next = new Set(this.selected());
+        if (checked)
+            next.add(name);
+        else
+            next.delete(name);
+        this.selected.set(next);
+    }
+    async start() {
+        this.starting.set(true);
+        try {
+            const { badges } = await this.service.options();
+            this.badges.set(badges);
+            this.badgeId.set(badges[0]?.id ?? '');
+            this.access.set('read');
+            this.validity.set('90');
+            this.open.set(true);
+        }
+        catch (err) {
+            this.toast.error(errorDetail(err) || this.tokens.badgesError);
+        }
+        finally {
+            this.starting.set(false);
+        }
+    }
+    cancel() {
+        this.open.set(false);
+    }
+    async generate() {
+        if (!this.canSubmit())
+            return;
+        this.submitting.set(true);
+        try {
+            const date = new Intl.DateTimeFormat(this.messages.meta.locale, { dateStyle: 'short', timeZone: this.preferences.effectiveTimeZone() }).format(new Date());
+            const created = await this.service.create({
+                badge_id: this.badgeId(),
+                name: formatMessage(this.t.aiAgentTokenName, { date }).slice(0, 80),
+                validity_days: Number(this.validity()),
+            });
+            const servers = this.servers.filter((s) => this.selected().has(s.name));
+            const write = this.access() === 'write' && this.canWrite();
+            this.result.set({
+                config: buildMcpConfig(servers, created.token, write, location.origin),
+                expires: new Intl.DateTimeFormat(this.messages.meta.locale, { dateStyle: 'short', timeZone: this.preferences.effectiveTimeZone() })
+                    .format(new Date(created.expires_at)),
+            });
+            this.open.set(false);
+        }
+        catch (err) {
+            this.toast.error(errorDetail(err) || this.t.aiAgentCreateError);
+        }
+        finally {
+            this.submitting.set(false);
+        }
+    }
+    async copy() {
+        const config = this.result()?.config;
+        if (!config)
+            return;
+        try {
+            await navigator.clipboard.writeText(config);
+            this.toast.success(this.t.aiAgentCopied);
+        }
+        catch {
+            this.toast.error(this.tokens.copyFailed);
+        }
+    }
+    done() {
+        this.result.set(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AiAgentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AiAgentComponent, isStandalone: true, selector: "spine-ai-agent", ngImport: i0, template: `
+    @if (!available) {
+      <p class="sp-account__note">{{ t.aiAgentUnavailable }}</p>
+    } @else if (result(); as r) {
+      <div class="sp-account__panel sp-account__panel--success" role="status">
+        <div class="sp-account__panel-head">
+          <hm-icon shape="check-circle" />
+          <div class="sp-account__panel-text">
+            <p class="sp-account__title">{{ t.aiAgentResult }}</p>
+            <p class="sp-account__note">{{ fmt(t.aiAgentResultHint, { date: r.expires }) }}</p>
+          </div>
+        </div>
+        <hm-code-viewer [code]="r.config" language="json" filename=".mcp.json" [label]="t.aiAgentResult" />
+        <div class="sp-account__actions">
+          <hm-button size="small" emphasis="high" icon="copy" (clicked)="copy()">{{ t.aiAgentCopy }}</hm-button>
+          <hm-button size="small" emphasis="medium" (clicked)="done()">{{ t.aiAgentDone }}</hm-button>
+        </div>
+      </div>
+    } @else if (open()) {
+      <div class="sp-account__panel">
+        <div class="sp-account__form">
+          @if (servers.length > 1) {
+            <fieldset class="sp-account__choices">
+              <legend class="sp-account__label">{{ t.aiAgentServers }}</legend>
+              @for (s of servers; track s.name) {
+                <hm-checkbox [label]="serverLabel(s)" [checked]="selected().has(s.name)" (checkedChange)="toggleServer(s.name, $event)" />
+              }
+            </fieldset>
+          }
+          @if (canWrite()) {
+            <div class="sp-account__field">
+              <span class="sp-account__label">{{ t.aiAgentAccess }}</span>
+              <hm-segmented-control size="small" emphasis="action" [label]="t.aiAgentAccess" [options]="accessOptions()" [value]="access()" (valueChange)="access.set($event === 'write' ? 'write' : 'read')" />
+              @if (access() === 'write') { <p class="sp-account__note">{{ t.aiAgentWriteHint }}</p> }
+            </div>
+          }
+          @if (badgeOptions().length > 1) {
+            <div class="sp-account__field">
+              <span class="sp-account__label">{{ tokens.accessLevel }}</span>
+              <hm-segmented-control size="small" emphasis="action" [label]="tokens.accessLevel" [options]="badgeOptions()" [value]="badgeId()" (valueChange)="badgeId.set($event)" />
+            </div>
+          }
+          <div class="sp-account__field">
+            <span class="sp-account__label">{{ tokens.validity }}</span>
+            <hm-segmented-control size="small" emphasis="action" [label]="tokens.validity" [options]="validityOptions()" [value]="validity()" (valueChange)="validity.set($event)" />
+          </div>
+          @if (!selected().size) { <p class="sp-account__note sp-account__note--error">{{ t.aiAgentSelectServer }}</p> }
+          @if (noBadges()) { <p class="sp-account__note sp-account__note--error">{{ tokens.noBadges }}</p> }
+        </div>
+        <div class="sp-account__actions">
+          <hm-button size="small" emphasis="medium" [disabled]="submitting()" (clicked)="cancel()">{{ tokens.cancel }}</hm-button>
+          <hm-button size="small" emphasis="high" icon="plugin" [loading]="submitting()" [disabled]="!canSubmit()" (clicked)="generate()">{{ t.aiAgentGenerate }}</hm-button>
+        </div>
+      </div>
+    } @else {
+      <div class="sp-account__actions">
+        <hm-button emphasis="medium" icon="plugin" [loading]="starting()" (clicked)="start()">{{ t.aiAgentStart }}</hm-button>
+      </div>
+    }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\n"], dependencies: [{ 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: CheckboxComponent, selector: "hm-checkbox", inputs: ["label", "labelHidden", "checked", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: CodeViewerComponent, selector: "hm-code-viewer", inputs: ["code", "language", "filename", "label", "showLineNumbers", "firstLineNumber", "highlightLines", "wrap", "tabSize", "copyable", "header", "virtualize", "virtualizeThreshold", "revealInvisibles"], outputs: ["copied", "tokenized"] }, { 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: AiAgentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-ai-agent', imports: [ButtonComponent, CheckboxComponent, CodeViewerComponent, IconComponent, SegmentedControlComponent], template: `
+    @if (!available) {
+      <p class="sp-account__note">{{ t.aiAgentUnavailable }}</p>
+    } @else if (result(); as r) {
+      <div class="sp-account__panel sp-account__panel--success" role="status">
+        <div class="sp-account__panel-head">
+          <hm-icon shape="check-circle" />
+          <div class="sp-account__panel-text">
+            <p class="sp-account__title">{{ t.aiAgentResult }}</p>
+            <p class="sp-account__note">{{ fmt(t.aiAgentResultHint, { date: r.expires }) }}</p>
+          </div>
+        </div>
+        <hm-code-viewer [code]="r.config" language="json" filename=".mcp.json" [label]="t.aiAgentResult" />
+        <div class="sp-account__actions">
+          <hm-button size="small" emphasis="high" icon="copy" (clicked)="copy()">{{ t.aiAgentCopy }}</hm-button>
+          <hm-button size="small" emphasis="medium" (clicked)="done()">{{ t.aiAgentDone }}</hm-button>
+        </div>
+      </div>
+    } @else if (open()) {
+      <div class="sp-account__panel">
+        <div class="sp-account__form">
+          @if (servers.length > 1) {
+            <fieldset class="sp-account__choices">
+              <legend class="sp-account__label">{{ t.aiAgentServers }}</legend>
+              @for (s of servers; track s.name) {
+                <hm-checkbox [label]="serverLabel(s)" [checked]="selected().has(s.name)" (checkedChange)="toggleServer(s.name, $event)" />
+              }
+            </fieldset>
+          }
+          @if (canWrite()) {
+            <div class="sp-account__field">
+              <span class="sp-account__label">{{ t.aiAgentAccess }}</span>
+              <hm-segmented-control size="small" emphasis="action" [label]="t.aiAgentAccess" [options]="accessOptions()" [value]="access()" (valueChange)="access.set($event === 'write' ? 'write' : 'read')" />
+              @if (access() === 'write') { <p class="sp-account__note">{{ t.aiAgentWriteHint }}</p> }
+            </div>
+          }
+          @if (badgeOptions().length > 1) {
+            <div class="sp-account__field">
+              <span class="sp-account__label">{{ tokens.accessLevel }}</span>
+              <hm-segmented-control size="small" emphasis="action" [label]="tokens.accessLevel" [options]="badgeOptions()" [value]="badgeId()" (valueChange)="badgeId.set($event)" />
+            </div>
+          }
+          <div class="sp-account__field">
+            <span class="sp-account__label">{{ tokens.validity }}</span>
+            <hm-segmented-control size="small" emphasis="action" [label]="tokens.validity" [options]="validityOptions()" [value]="validity()" (valueChange)="validity.set($event)" />
           </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"] }]
+          @if (!selected().size) { <p class="sp-account__note sp-account__note--error">{{ t.aiAgentSelectServer }}</p> }
+          @if (noBadges()) { <p class="sp-account__note sp-account__note--error">{{ tokens.noBadges }}</p> }
+        </div>
+        <div class="sp-account__actions">
+          <hm-button size="small" emphasis="medium" [disabled]="submitting()" (clicked)="cancel()">{{ tokens.cancel }}</hm-button>
+          <hm-button size="small" emphasis="high" icon="plugin" [loading]="submitting()" [disabled]="!canSubmit()" (clicked)="generate()">{{ t.aiAgentGenerate }}</hm-button>
+        </div>
+      </div>
+    } @else {
+      <div class="sp-account__actions">
+        <hm-button emphasis="medium" icon="plugin" [loading]="starting()" (clicked)="start()">{{ t.aiAgentStart }}</hm-button>
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\n"] }]
         }] });
+function errorDetail(err) {
+    return err instanceof HttpErrorResponse ? (err.error?.detail ?? '') : '';
+}
 
-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`).
+ * Crachá padrão (Conta › "Crachá padrão", `SpineFeatures.defaultBadge`): o nível de acesso com que o login entra
+ * nesta aplicação, guardado no Argos por usuário e aplicação (`GET/PUT {api}/badges`) — vale em qualquer navegador.
+ * "Automático" volta à regra do Argos (o crachá de menor nível). A troca no menu do perfil continua valendo só para a
+ * sessão.
  */
-class AccountMfaComponent {
+class DefaultBadgeComponent {
     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;
+        this.api = inject(SpineAccountSecurityService);
+        this.toast = inject(HermesToastService);
+        this.t = inject(SPINE_MESSAGES).accountFeatures;
+        this.badges = signal([], ...(ngDevMode ? [{ debugName: "badges" }] : /* istanbul ignore next */ []));
+        this.value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+        this.loadError = signal(false, ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+        this.select = viewChild(SelectComponent, ...(ngDevMode ? [{ debugName: "select" }] : /* istanbul ignore next */ []));
+        void this.load();
     }
-    startAdd(method) {
-        this.email.reset('');
-        this.state.start({ kind: 'add', method });
+    async load() {
+        try {
+            const result = await this.api.badges();
+            this.badges.set(result.badges ?? []);
+            this.value.set(result.default_badge_id ?? '');
+        }
+        catch {
+            this.loadError.set(true);
+        }
+        finally {
+            this.loading.set(false);
+        }
     }
-    sendEmail() {
-        this.email.markAsTouched();
-        if (this.email.invalid)
+    async save(value) {
+        const previous = this.value();
+        if (value === previous)
             return;
-        void this.state.sendEnrollEmail(this.email.value.trim());
+        this.value.set(value);
+        this.saving.set(true);
+        try {
+            const result = await this.api.setDefaultBadge(value || null);
+            this.value.set(result.default_badge_id ?? '');
+            this.toast.success(this.t.defaultBadgeSaved);
+        }
+        catch {
+            this.value.set(previous);
+            // O <select> já mostra a escolha recusada: volta ao valor salvo.
+            this.select()?.value.set(previous);
+            this.toast.error(this.t.defaultBadgeError);
+        }
+        finally {
+            this.saving.set(false);
+        }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DefaultBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DefaultBadgeComponent, isStandalone: true, selector: "spine-default-badge", viewQueries: [{ propertyName: "select", first: true, predicate: SelectComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (loadError()) {
+      <hm-alert variant="error">{{ t.defaultBadgeLoadError }}</hm-alert>
+    } @else {
+      <hm-select
+        class="sp-settings__badge"
+        [label]="t.defaultBadge"
+        [labelHidden]="true"
+        [value]="value()"
+        [disabled]="loading() || saving()"
+        (valueChange)="save($event ?? '')"
+      >
+        <option value="">{{ t.defaultBadgeAuto }}</option>
+        @for (b of badges(); track b.id) {
+          <option [value]="b.id">{{ b.name }}</option>
+        }
+      </hm-select>
+    }
+  `, isInline: true, styles: [":host{display:block;min-width:0}.sp-settings__badge{min-inline-size:14rem;max-inline-size:100%}\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: SelectComponent, selector: "hm-select", inputs: ["value", "label", "labelHidden", "hint"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AccountMfaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DefaultBadgeComponent, 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"] }]
-        }] });
+            args: [{ selector: 'spine-default-badge', imports: [AlertComponent, SelectComponent], template: `
+    @if (loadError()) {
+      <hm-alert variant="error">{{ t.defaultBadgeLoadError }}</hm-alert>
+    } @else {
+      <hm-select
+        class="sp-settings__badge"
+        [label]="t.defaultBadge"
+        [labelHidden]="true"
+        [value]="value()"
+        [disabled]="loading() || saving()"
+        (valueChange)="save($event ?? '')"
+      >
+        <option value="">{{ t.defaultBadgeAuto }}</option>
+        @for (b of badges(); track b.id) {
+          <option [value]="b.id">{{ b.name }}</option>
+        }
+      </hm-select>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0}.sp-settings__badge{min-inline-size:14rem;max-inline-size:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { select: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SelectComponent), { isSignal: true }] }] } });
 
-let sequence$1 = 0;
+let sequence$2 = 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
@@ -2067,7 +3394,7 @@ class AccountRecoveryCodesComponent {
         this.messages = inject(SPINE_MESSAGES);
         this.t = this.messages.accountSecurity;
         this.toast = inject(HermesToastService);
-        this.titleId = `sp-account-codes-${++sequence$1}`;
+        this.titleId = `sp-account-codes-${++sequence$2}`;
         this.remaining = computed(() => pluralMessage(this.t.codesRemaining, this.state.remainingCodes(), this.messages.meta.locale), ...(ngDevMode ? [{ debugName: "remaining" }] : /* istanbul ignore next */ []));
     }
     errorText(code) {
@@ -2110,35 +3437,52 @@ class AccountRecoveryCodesComponent {
         <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>
+          <div class="sp-account__panel-head">
+            <hm-icon shape="key" />
+            <div class="sp-account__panel-text">
+              <h4 class="sp-account__title" [id]="titleId">{{ t.codesTitle }}</h4>
+              <p class="sp-account__note">{{ t.codesShownOnce }}</p>
+            </div>
+          </div>
           <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="high" (clicked)="state.codesSaved()">{{ t.codesSaved }}</hm-button>
             <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>
+        <ul class="sp-account__list">
+          <li class="sp-account__item">
+            <span class="sp-account__icon" [class.sp-account__icon--accent]="state.remainingCodes() > 0"><hm-icon shape="key" /></span>
+            <span class="sp-account__item-main">
+              @if (state.activeMethods().length) {
+                <span class="sp-account__item-title"><strong>{{ remaining() }}</strong></span>
+                <span class="sp-account__meta">{{ t.codesHint }}</span>
+              } @else {
+                <span class="sp-account__meta">{{ t.codesNeedMethod }}</span>
+              }
+            </span>
+            @if (state.activeMethods().length) {
+              <span class="sp-account__item-actions">
+                <hm-button size="small" emphasis="medium" [disabled]="state.busy() || state.step() !== 'idle'" (clicked)="state.start({ kind: 'codes' })">
+                  {{ state.remainingCodes() ? t.regenerateCodes : t.generateCodes }}
+                </hm-button>
+              </span>
+            }
+          </li>
+        </ul>
       }
     }
-  `, 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 }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\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: 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: `
+            args: [{ selector: 'spine-account-recovery-codes', imports: [AlertComponent, ButtonComponent, IconComponent, AccountReauthComponent], template: `
     @if (state.overview()) {
       @if (state.owner() === 'codes') {
         @if (state.notice(); as notice) {
@@ -2153,31 +3497,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
         <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>
+          <div class="sp-account__panel-head">
+            <hm-icon shape="key" />
+            <div class="sp-account__panel-text">
+              <h4 class="sp-account__title" [id]="titleId">{{ t.codesTitle }}</h4>
+              <p class="sp-account__note">{{ t.codesShownOnce }}</p>
+            </div>
+          </div>
           <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="high" (clicked)="state.codesSaved()">{{ t.codesSaved }}</hm-button>
             <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>
+        <ul class="sp-account__list">
+          <li class="sp-account__item">
+            <span class="sp-account__icon" [class.sp-account__icon--accent]="state.remainingCodes() > 0"><hm-icon shape="key" /></span>
+            <span class="sp-account__item-main">
+              @if (state.activeMethods().length) {
+                <span class="sp-account__item-title"><strong>{{ remaining() }}</strong></span>
+                <span class="sp-account__meta">{{ t.codesHint }}</span>
+              } @else {
+                <span class="sp-account__meta">{{ t.codesNeedMethod }}</span>
+              }
+            </span>
+            @if (state.activeMethods().length) {
+              <span class="sp-account__item-actions">
+                <hm-button size="small" emphasis="medium" [disabled]="state.busy() || state.step() !== 'idle'" (clicked)="state.start({ kind: 'codes' })">
+                  {{ state.remainingCodes() ? t.regenerateCodes : t.generateCodes }}
+                </hm-button>
+              </span>
+            }
+          </li>
+        </ul>
       }
     }
-  `, 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"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\n"] }]
         }] });
 
 /**
@@ -2288,53 +3649,14 @@ class AccountSessionsComponent {
             .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 }); }
+    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__note\" 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 size=\"small\" 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  <div class=\"sp-account__list\">\n    <ul class=\"sp-account__items\">\n      @for (s of ordered(); track s.id) {\n        <li class=\"sp-account__item\">\n          <span class=\"sp-account__icon\" [class.sp-account__icon--accent]=\"s.current\"><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) }}@if (s.clients.length) { \u00B7 {{ apps(s) }} }</span>\n          </span>\n          @if (!s.current) {\n            <span class=\"sp-account__item-actions\">\n              @if (confirming() === s.id) {\n                <hm-button size=\"small\" emphasis=\"medium\" [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__item--empty\">{{ t.sessionsEmpty }}</li>\n      }\n    </ul>\n\n    @if (others() > 0) {\n      <div class=\"sp-account__list-footer\">\n        @if (confirming() === 'others') {\n          <span class=\"sp-account__note\">{{ othersConfirm() }}</span>\n          <span class=\"sp-account__actions\">\n            <hm-button size=\"small\" emphasis=\"medium\" [disabled]=\"busy()\" (clicked)=\"cancel()\">{{ t.cancel }}</hm-button>\n            <hm-button size=\"small\" emphasis=\"high\" intent=\"danger\" icon=\"logout\" [loading]=\"busy()\" (clicked)=\"endOthers()\">{{ t.endOthers }}</hm-button>\n          </span>\n        } @else {\n          <hm-button size=\"small\" emphasis=\"medium\" intent=\"danger\" icon=\"logout\" [disabled]=\"busy()\" (clicked)=\"ask('others')\">{{ t.endOthers }}</hm-button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\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"] }]
+            args: [{ selector: 'spine-account-sessions', imports: [AlertComponent, ButtonComponent, IconComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading() && !sessions().length) {\n  <p class=\"sp-account__note\" 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 size=\"small\" 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  <div class=\"sp-account__list\">\n    <ul class=\"sp-account__items\">\n      @for (s of ordered(); track s.id) {\n        <li class=\"sp-account__item\">\n          <span class=\"sp-account__icon\" [class.sp-account__icon--accent]=\"s.current\"><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) }}@if (s.clients.length) { \u00B7 {{ apps(s) }} }</span>\n          </span>\n          @if (!s.current) {\n            <span class=\"sp-account__item-actions\">\n              @if (confirming() === s.id) {\n                <hm-button size=\"small\" emphasis=\"medium\" [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__item--empty\">{{ t.sessionsEmpty }}</li>\n      }\n    </ul>\n\n    @if (others() > 0) {\n      <div class=\"sp-account__list-footer\">\n        @if (confirming() === 'others') {\n          <span class=\"sp-account__note\">{{ othersConfirm() }}</span>\n          <span class=\"sp-account__actions\">\n            <hm-button size=\"small\" emphasis=\"medium\" [disabled]=\"busy()\" (clicked)=\"cancel()\">{{ t.cancel }}</hm-button>\n            <hm-button size=\"small\" emphasis=\"high\" intent=\"danger\" icon=\"logout\" [loading]=\"busy()\" (clicked)=\"endOthers()\">{{ t.endOthers }}</hm-button>\n          </span>\n        } @else {\n          <hm-button size=\"small\" emphasis=\"medium\" intent=\"danger\" icon=\"logout\" [disabled]=\"busy()\" (clicked)=\"ask('others')\">{{ t.endOthers }}</hm-button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\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
- * aqui não existe escolha de aplicação.
- * Autentica com o access-token da sessão (o servidor recusa um app-token aqui: token não cria
- * token). `available` é falso quando o app não tem a URL do argos-admin (`SPINE_ADMIN_API`).
- */
-class SpineAppTokensService {
-    constructor() {
-        this.http = inject(HttpClient);
-        this.auth = inject(AuthorizationService);
-        this.adminApi = inject(SPINE_ADMIN_API, { optional: true });
-        this.available = !!this.adminApi;
-    }
-    get baseUrl() {
-        return `${this.adminApi}/me/app-tokens`;
-    }
-    get headers() {
-        return new HttpHeaders({ 'x-access-token': this.auth.getToken() ?? '' });
-    }
-    list() {
-        return firstValueFrom(this.http.get(this.baseUrl, { headers: this.headers }));
-    }
-    options() {
-        return firstValueFrom(this.http.get(`${this.baseUrl}/options`, { headers: this.headers }));
-    }
-    create(body) {
-        return firstValueFrom(this.http.post(this.baseUrl, body, { headers: this.headers }));
-    }
-    revoke(id) {
-        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' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAppTokensService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
+let sequence$1 = 0;
 /** Validades oferecidas (dias). O servidor recusa acima de 365 — o CHECK no banco também. */
 /**
  * Tokens de aplicação do usuário (seção Conta do painel de configurações): lista, criação e
@@ -2352,6 +3674,7 @@ class AppTokensComponent {
         this.toast = inject(HermesToastService);
         this.preferences = inject(SpinePreferencesService);
         this.available = this.service.available;
+        this.ids = `sp-tokens-${++sequence$1}`;
         this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.loadError = signal('', ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
         this.tokens = signal([], ...(ngDevMode ? [{ debugName: "tokens" }] : /* istanbul ignore next */ []));
@@ -2383,6 +3706,16 @@ class AppTokensComponent {
             void this.load();
         else
             this.loading.set(false);
+        // Token criado em outro lugar do painel ("Conectar um agente de IA"): relê a lista. O que esta lista cria já relê.
+        let seen = this.service.changes();
+        effect(() => {
+            const changes = this.service.changes();
+            if (changes === seen)
+                return;
+            seen = changes;
+            if (!untracked(this.submitting))
+                void untracked(() => this.load());
+        });
     }
     async load() {
         this.loading.set(true);
@@ -2472,6 +3805,9 @@ class AppTokensComponent {
             this.toast.error(this.errorText(err, this.text.revokeError));
         }
     }
+    cancelRevoke() {
+        this.confirmingRevoke.set(null);
+    }
     formatDate(value) {
         if (!value)
             return this.text.never;
@@ -2483,11 +3819,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]=\"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 }); }
+    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-account__note\">{{ text.unavailable }}</p>\n} @else {\n  <!-- Token rec\u00E9m-criado: \u00FAnica vez em que o valor aparece. -->\n  @if (created(); as c) {\n    <section class=\"sp-account__panel sp-account__panel--success\" role=\"status\" [attr.aria-labelledby]=\"ids + '-created'\">\n      <div class=\"sp-account__panel-head\">\n        <hm-icon shape=\"check-circle\" />\n        <div class=\"sp-account__panel-text\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-created'\">{{ fmt(text.created, { name: c.name }) }}</h4>\n          <p class=\"sp-account__note\" [innerHTML]=\"fmtHtml(text.sendHeader, { date: formatDate(c.expiresAt) })\"></p>\n        </div>\n      </div>\n      <code class=\"sp-account__secret sp-account__secret--block\">{{ c.token }}</code>\n      <div class=\"sp-account__actions\">\n        <hm-button emphasis=\"high\" icon=\"copy\" (clicked)=\"copyCreated()\">{{ text.copyToken }}</hm-button>\n        <hm-button emphasis=\"medium\" (clicked)=\"dismissCreated()\">{{ text.saved }}</hm-button>\n      </div>\n    </section>\n  }\n\n  @if (loading()) {\n    <p class=\"sp-account__note\" role=\"status\">{{ text.loading }}</p>\n  } @else if (loadError()) {\n    <p class=\"sp-account__note sp-account__note--error\">{{ loadError() }}</p>\n  } @else {\n    <div class=\"sp-account__list\">\n      <ul class=\"sp-account__items\">\n        @for (t of tokens(); track t.id) {\n          <li class=\"sp-account__item\" [class.sp-account__item--muted]=\"t.expired\">\n            <span class=\"sp-account__icon\" [class.sp-account__icon--accent]=\"!t.expired\"><hm-icon shape=\"key\" /></span>\n            <span class=\"sp-account__item-main\">\n              <span class=\"sp-account__item-title\"><strong>{{ t.name }}</strong></span>\n              <span class=\"sp-account__meta\">{{ t.badge_name }} \u00B7 <code>{{ t.prefix }}</code></span>\n              <span class=\"sp-account__meta\">\n                @if (t.expired) { <span class=\"sp-account__meta--danger\">{{ 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            <span class=\"sp-account__item-actions\">\n              @if (confirmingRevoke() === t.id) {\n                <hm-button size=\"small\" emphasis=\"medium\" (clicked)=\"cancelRevoke()\">{{ text.cancel }}</hm-button>\n              }\n              <hm-button size=\"small\" [emphasis]=\"confirmingRevoke() === t.id ? 'high' : 'medium'\" intent=\"danger\" (clicked)=\"revoke(t)\">\n                {{ confirmingRevoke() === t.id ? text.confirmRevoke : text.revoke }}\n              </hm-button>\n            </span>\n          </li>\n        } @empty {\n          <li class=\"sp-account__item sp-account__item--empty\">{{ text.empty }}</li>\n        }\n      </ul>\n\n      @if (!creating()) {\n        <div class=\"sp-account__list-footer\">\n          <hm-button size=\"small\" emphasis=\"medium\" icon=\"plus\" [disabled]=\"atLimit()\" (clicked)=\"startCreate()\">{{ text.newToken }}</hm-button>\n          <span class=\"sp-account__note\">{{ atLimit() ? text.limit : fmt(text.validCount, { valid: validCount(), max: maxActive() }) }}</span>\n        </div>\n      }\n    </div>\n\n    @if (creating()) {\n      <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-new'\">\n        <div class=\"sp-account__panel-head\">\n          <hm-icon shape=\"key\" />\n          <div class=\"sp-account__panel-text\">\n            <h4 class=\"sp-account__title\" [id]=\"ids + '-new'\">{{ text.newToken }}</h4>\n            @if (clientName()) {\n              <p class=\"sp-account__note\" [innerHTML]=\"fmtHtml(text.appOnly, { name: clientName() })\"></p>\n            }\n          </div>\n        </div>\n        <form class=\"sp-account__form\" (submit)=\"$event.preventDefault(); submit()\">\n          @if (!badges().length) {\n            <p class=\"sp-account__note\">{{ text.noBadges }}</p>\n          } @else {\n            @if (badgeOptions().length > 1) {\n              <div class=\"sp-account__field\">\n                <span class=\"sp-account__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-account__field\">\n              <span class=\"sp-account__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-account__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=\"medium\" (clicked)=\"cancelCreate()\">{{ text.cancel }}</hm-button>\n          </div>\n        </form>\n      </section>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\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]=\"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"] }]
+            args: [{ selector: 'spine-app-tokens', imports: [ReactiveFormsModule, ButtonComponent, InputComponent, IconComponent, SegmentedControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!available) {\n  <p class=\"sp-account__note\">{{ text.unavailable }}</p>\n} @else {\n  <!-- Token rec\u00E9m-criado: \u00FAnica vez em que o valor aparece. -->\n  @if (created(); as c) {\n    <section class=\"sp-account__panel sp-account__panel--success\" role=\"status\" [attr.aria-labelledby]=\"ids + '-created'\">\n      <div class=\"sp-account__panel-head\">\n        <hm-icon shape=\"check-circle\" />\n        <div class=\"sp-account__panel-text\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-created'\">{{ fmt(text.created, { name: c.name }) }}</h4>\n          <p class=\"sp-account__note\" [innerHTML]=\"fmtHtml(text.sendHeader, { date: formatDate(c.expiresAt) })\"></p>\n        </div>\n      </div>\n      <code class=\"sp-account__secret sp-account__secret--block\">{{ c.token }}</code>\n      <div class=\"sp-account__actions\">\n        <hm-button emphasis=\"high\" icon=\"copy\" (clicked)=\"copyCreated()\">{{ text.copyToken }}</hm-button>\n        <hm-button emphasis=\"medium\" (clicked)=\"dismissCreated()\">{{ text.saved }}</hm-button>\n      </div>\n    </section>\n  }\n\n  @if (loading()) {\n    <p class=\"sp-account__note\" role=\"status\">{{ text.loading }}</p>\n  } @else if (loadError()) {\n    <p class=\"sp-account__note sp-account__note--error\">{{ loadError() }}</p>\n  } @else {\n    <div class=\"sp-account__list\">\n      <ul class=\"sp-account__items\">\n        @for (t of tokens(); track t.id) {\n          <li class=\"sp-account__item\" [class.sp-account__item--muted]=\"t.expired\">\n            <span class=\"sp-account__icon\" [class.sp-account__icon--accent]=\"!t.expired\"><hm-icon shape=\"key\" /></span>\n            <span class=\"sp-account__item-main\">\n              <span class=\"sp-account__item-title\"><strong>{{ t.name }}</strong></span>\n              <span class=\"sp-account__meta\">{{ t.badge_name }} \u00B7 <code>{{ t.prefix }}</code></span>\n              <span class=\"sp-account__meta\">\n                @if (t.expired) { <span class=\"sp-account__meta--danger\">{{ 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            <span class=\"sp-account__item-actions\">\n              @if (confirmingRevoke() === t.id) {\n                <hm-button size=\"small\" emphasis=\"medium\" (clicked)=\"cancelRevoke()\">{{ text.cancel }}</hm-button>\n              }\n              <hm-button size=\"small\" [emphasis]=\"confirmingRevoke() === t.id ? 'high' : 'medium'\" intent=\"danger\" (clicked)=\"revoke(t)\">\n                {{ confirmingRevoke() === t.id ? text.confirmRevoke : text.revoke }}\n              </hm-button>\n            </span>\n          </li>\n        } @empty {\n          <li class=\"sp-account__item sp-account__item--empty\">{{ text.empty }}</li>\n        }\n      </ul>\n\n      @if (!creating()) {\n        <div class=\"sp-account__list-footer\">\n          <hm-button size=\"small\" emphasis=\"medium\" icon=\"plus\" [disabled]=\"atLimit()\" (clicked)=\"startCreate()\">{{ text.newToken }}</hm-button>\n          <span class=\"sp-account__note\">{{ atLimit() ? text.limit : fmt(text.validCount, { valid: validCount(), max: maxActive() }) }}</span>\n        </div>\n      }\n    </div>\n\n    @if (creating()) {\n      <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-new'\">\n        <div class=\"sp-account__panel-head\">\n          <hm-icon shape=\"key\" />\n          <div class=\"sp-account__panel-text\">\n            <h4 class=\"sp-account__title\" [id]=\"ids + '-new'\">{{ text.newToken }}</h4>\n            @if (clientName()) {\n              <p class=\"sp-account__note\" [innerHTML]=\"fmtHtml(text.appOnly, { name: clientName() })\"></p>\n            }\n          </div>\n        </div>\n        <form class=\"sp-account__form\" (submit)=\"$event.preventDefault(); submit()\">\n          @if (!badges().length) {\n            <p class=\"sp-account__note\">{{ text.noBadges }}</p>\n          } @else {\n            @if (badgeOptions().length > 1) {\n              <div class=\"sp-account__field\">\n                <span class=\"sp-account__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-account__field\">\n              <span class=\"sp-account__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-account__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=\"medium\" (clicked)=\"cancelCreate()\">{{ text.cancel }}</hm-button>\n          </div>\n        </form>\n      </section>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--hm-space-xs);width:100%;min-width:0}.sp-account__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.45}.sp-account__note--error{color:var(--hm-danger)}.sp-account__note code{font-family:var(--hm-font-mono)}.sp-account__list{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-account__items{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}.sp-account__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-sm)}.sp-account__item+.sp-account__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-account__item--empty{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-account__item--muted .sp-account__item-title strong{color:var(--hm-muted)}.sp-account__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--hm-control-height-large);height:var(--hm-control-height-large);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-muted)}.sp-account__icon--accent{background:var(--hm-accent-subtle);color:var(--hm-accent-strong)}.sp-account__item-main{display:flex;min-width:0;flex:1 1 14rem;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__item-title strong{font-weight:var(--hm-font-weight-semibold)}.sp-account__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-account__meta code{font-family:var(--hm-font-mono)}.sp-account__meta--danger{color:var(--hm-danger)}.sp-account__item-actions,.sp-account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__item-actions{margin-inline-start:auto}.sp-account__list-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);background:var(--hm-surface-raised)}.sp-account__list-footer:first-child{border-top:0}.sp-account__panel{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-width:0;padding:var(--hm-space-sm) var(--hm-space-md) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-border);border-inline-start:var(--hm-border-thin) solid var(--hm-accent);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.sp-account__panel--success{border-color:var(--hm-success);background:var(--hm-success-bg)}.sp-account__panel--success .sp-account__panel-head hm-icon{color:var(--hm-success)}.sp-account__panel--danger{border-inline-start-color:var(--hm-danger)}.sp-account__panel--danger .sp-account__panel-head hm-icon{color:var(--hm-danger)}.sp-account__panel-head{display:flex;align-items:flex-start;gap:var(--hm-space-xs)}.sp-account__panel-head hm-icon{flex:none;margin-block-start:var(--hm-space-micro);color:var(--hm-accent-strong)}.sp-account__panel-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro)}.sp-account__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.sp-account__form,.sp-account__code,.sp-account__field{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0}.sp-account__form{gap:var(--hm-space-sm)}.sp-account__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.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:var(--hm-font-mono);overflow-wrap:anywhere}.sp-account__secret{-webkit-user-select:all;user-select:all}.sp-account__secret--block{display:block;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.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:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-size:var(--hm-font-size-sm)}@media(forced-colors:active){.sp-account__panel{border-inline-start-color:Highlight}.sp-account__icon{border:var(--hm-border-hairline) solid CanvasText}}.sp-account__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.sp-account__choices{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-width:0;margin:0;padding:0;border:0}\n"] }]
         }], ctorParameters: () => [] });
 
 /** Dependências que valem mostrar em "Sobre" (as demais são detalhe de build). */
@@ -2502,23 +3838,78 @@ const KEY_DEPENDENCIES = [
     { name: 'rxjs', label: 'RxJS' },
     // check-strings: on
 ];
+/** Lista → chave do `SpineUserStorage` (por usuário). */
+const BROWSER_LISTS = {
+    recents: SPINE_USER_STORAGE_KEYS.recents,
+    searches: SPINE_USER_STORAGE_KEYS.recentSearches,
+    favorites: SPINE_USER_STORAGE_KEYS.favorites,
+};
 /**
- * Painel de configurações do shell (substitui as telas do antigo módulo "Sistema"): Aparência,
- * 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).
+ * Painel de configurações do shell (substitui as telas do antigo módulo "Sistema"): Conta (perfil, nível,
+ * sessão, sair), MFA (verificação em duas etapas e códigos de recuperação do Argos), Sessões (token de
+ * acesso, tokens de aplicação e sessões e dispositivos do Argos), Aparência, Acessibilidade (tamanho do texto,
+ * animações), Região (idioma, fuso, formato de hora, primeiro dia da semana), Atalhos, Dados do navegador
+ * (limpar listas, restaurar preferências), Ajuda (novidades, tour) 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, tamanho do texto…).
  *
  * Aberto por `SpineSettingsService.open()` — menu do perfil, `Ctrl+,` ou `?settings=<seção>`.
  */
 class SettingsPanelComponent {
+    setThemeMode(mode) {
+        this.theme.setMode(mode);
+    }
+    setFamily(id) {
+        const family = this.families.find((f) => f.id === id);
+        if (family)
+            this.presets.setPreset(family);
+    }
+    setDensity(value) {
+        this.density.setDensity(value);
+    }
+    setFont(value) {
+        this.hermesTheme.setFont(value);
+    }
+    setSidebarMode(value) {
+        this.sidebar.setMode(value);
+    }
+    setTextSize(value) {
+        this.preferences.setTextScale(Number(value));
+    }
+    setMotion(value) {
+        this.preferences.setMotion(value);
+    }
+    setHourCycle(value) {
+        this.preferences.setHourCycle(value);
+    }
+    setWeekStart(value) {
+        this.preferences.setWeekStart(value === '' ? null : Number(value));
+    }
+    /** Fecha o painel antes: novidades e tour ocupam a tela. */
+    showNews() {
+        this.settings.close();
+        this.news.showAll();
+    }
+    replayTour() {
+        this.settings.close();
+        this.onboarding.restart();
+    }
     constructor() {
         this.settings = inject(SpineSettingsService);
         this.messages = inject(SPINE_MESSAGES);
         this.text = this.messages.settings;
         this.fmt = formatMessage;
         this.keys = SPINE_SETTINGS_KEYS;
+        /** Seção aberta, com a chave antiga já trocada pela nova (`seguranca` → `mfa`). */
+        this.activeSection = computed(() => resolveSettingsSection(this.settings.section()), ...(ngDevMode ? [{ debugName: "activeSection" }] : /* istanbul ignore next */ []));
         this.theme = inject(ThemeService);
         this.hermesTheme = inject(HermesThemeService);
+        this.themeConfig = inject(HERMES_THEME_CONFIG);
+        this.sidebarConfig = inject(HERMES_SIDEBAR_CONFIG);
+        this.i18n = inject(HermesI18nService);
+        this.news = inject(SpineNewsService);
+        this.quickAccess = inject(SpineQuickAccessService);
+        this.userStorage = inject(SpineUserStorage);
         this.presets = inject(ThemePresetService);
         this.density = inject(DensityService);
         this.sidebar = inject(HermesSidebarService);
@@ -2532,6 +3923,9 @@ class SettingsPanelComponent {
         this.config = inject(SPINE_CONFIG, { optional: true });
         this.appSections = inject(SPINE_SETTINGS_SECTIONS, { optional: true }) ?? [];
         this.appName = this.config?.appName ?? 'Hermes';
+        /** Recursos opcionais ligados pelo app (`SpineConfig.features`). */
+        this.features = this.config?.features ?? {};
+        this.featureText = this.messages.accountFeatures;
         /**
          * "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.
@@ -2561,6 +3955,18 @@ class SettingsPanelComponent {
         this.densityValue = computed(() => this.hermesTheme.density(), ...(ngDevMode ? [{ debugName: "densityValue" }] : /* istanbul ignore next */ []));
         this.fontValue = computed(() => this.hermesTheme.font(), ...(ngDevMode ? [{ debugName: "fontValue" }] : /* istanbul ignore next */ []));
         this.families = this.presets.families;
+        // ── Acessibilidade ──────────────────────────────────────────────────────────
+        /** 100%, 110%, 125%, 150% — no formato de porcentagem do idioma. */
+        this.textSizeOptions = computed(() => {
+            const percent = new Intl.NumberFormat(this.i18n.formatLocale(), { style: 'percent', maximumFractionDigits: 0 });
+            return HERMES_TEXT_SCALES.map((scale) => ({ value: String(scale), label: percent.format(scale) }));
+        }, ...(ngDevMode ? [{ debugName: "textSizeOptions" }] : /* istanbul ignore next */ []));
+        this.textSizeValue = computed(() => String(this.preferences.textScale()), ...(ngDevMode ? [{ debugName: "textSizeValue" }] : /* istanbul ignore next */ []));
+        this.motionOptions = computed(() => [
+            { value: 'system', label: this.text.motionSystem },
+            { value: 'reduce', label: this.text.motionReduce },
+            { value: 'full', label: this.text.motionFull },
+        ], ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
         // ── Região ──────────────────────────────────────────────────────────────────
         this.languageOptions = computed(() => {
             const appLanguage = this.preferences.languages.find((l) => l.value === this.preferences.appLanguage)?.label ?? this.preferences.appLanguage;
@@ -2582,46 +3988,183 @@ class SettingsPanelComponent {
         this.timeZonePreview = computed(() => {
             const zone = this.preferences.effectiveTimeZone();
             try {
-                return new Intl.DateTimeFormat(this.messages.meta.locale, { dateStyle: 'short', timeStyle: 'short', timeZone: zone }).format(new Date())
+                return new Intl.DateTimeFormat(this.i18n.formatLocale(), { dateStyle: 'short', timeStyle: 'short', timeZone: zone }).format(new Date())
                     + ` (${offsetOf(zone)})`;
             }
             catch {
                 return zone;
             }
         }, ...(ngDevMode ? [{ debugName: "timeZonePreview" }] : /* istanbul ignore next */ []));
+        this.hourCycleOptions = computed(() => [
+            { value: '', label: this.text.hourCycleAuto },
+            { value: 'h23', label: this.text.hourCycle24 },
+            { value: 'h12', label: this.text.hourCycle12 },
+        ], ...(ngDevMode ? [{ debugName: "hourCycleOptions" }] : /* istanbul ignore next */ []));
+        /** Hora agora, no relógio escolhido — prévia do formato. */
+        this.hourCyclePreview = computed(() => {
+            try {
+                return new Intl.DateTimeFormat(this.i18n.formatLocale(), { timeStyle: 'short', timeZone: this.preferences.effectiveTimeZone() }).format(new Date());
+            }
+            catch {
+                return '';
+            }
+        }, ...(ngDevMode ? [{ debugName: "hourCyclePreview" }] : /* istanbul ignore next */ []));
+        /** Automático, domingo e segunda — os nomes dos dias saem do `Intl`, no idioma. */
+        this.weekStartOptions = computed(() => {
+            const names = weekdayNames(this.i18n.locale(), 'long', 0);
+            return [
+                { value: '', label: this.text.weekStartAuto },
+                { value: '0', label: names[0] },
+                { value: '1', label: names[1] },
+            ];
+        }, ...(ngDevMode ? [{ debugName: "weekStartOptions" }] : /* istanbul ignore next */ []));
+        this.weekStartValue = computed(() => {
+            const day = this.preferences.weekStart();
+            return day === null ? '' : String(day);
+        }, ...(ngDevMode ? [{ debugName: "weekStartValue" }] : /* istanbul ignore next */ []));
         // ── 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 ───────────────────────────────────────────────────────
+        // ── Ajuda ───────────────────────────────────────────────────────────────────
+        /** "Ver novidades" só quando o app tem alguma vigente (`provideSpineNews`). */
+        this.hasNews = this.news.hasAny;
+        // ── Dados do navegador ──────────────────────────────────────────────────────
+        /** Relida quando o painel abre e depois de limpar (as buscas recentes não têm sinal próprio). */
+        this.dataVersion = signal(0, ...(ngDevMode ? [{ debugName: "dataVersion" }] : /* istanbul ignore next */ []));
+        this.counts = computed(() => {
+            this.dataVersion();
+            this.settings.isOpen();
+            return {
+                recents: this.quickAccess.recents().length,
+                searches: this.userStorage.count(BROWSER_LISTS.searches),
+                favorites: this.quickAccess.favorites().length,
+            };
+        }, ...(ngDevMode ? [{ debugName: "counts" }] : /* istanbul ignore next */ []));
+        /** As três listas, com a contagem já no texto da linha. */
+        this.browserLists = computed(() => {
+            const counts = this.counts();
+            const locale = this.i18n.formatLocale();
+            const row = (id, label, keywords, count) => ({ id, label, keywords, count, empty: counts[id] === 0 });
+            return [
+                row('recents', this.text.recentPages, this.text.recentPagesKeywords, pluralMessage(this.text.pagesCount, counts.recents, locale)),
+                row('searches', this.text.recentSearches, this.text.recentSearchesKeywords, pluralMessage(this.text.searchesCount, counts.searches, locale)),
+                row('favorites', this.text.favorites, this.text.favoritesKeywords, pluralMessage(this.text.pagesCount, counts.favorites, locale)),
+            ];
+        }, ...(ngDevMode ? [{ debugName: "browserLists" }] : /* istanbul ignore next */ []));
+        /** Ação destrutiva esperando confirmação (uma por vez, como nas listas do painel). */
+        this.confirming = signal(null, ...(ngDevMode ? [{ debugName: "confirming" }] : /* istanbul ignore next */ []));
+        this.logoutService = inject(SpineLogoutService);
+        /** "Saindo…" no botão; volta a `false` também quando a saída falha. */
+        this.logoutPending = this.logoutService.pending;
+        // ── MFA ─────────────────────────────────────────────────────────────────────
         /** 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. */
+         *  `authority`/`realmId`, ou com `CHANGE_ME`) a seção MFA e a linha "Sessões e dispositivos" não aparecem. */
         this.accountSecurity = inject(SpineAccountSecurityService).available;
+        // ── Sessões ─────────────────────────────────────────────────────────────────
+        /** Linhas da seção Sessões, cada uma com a própria condição. "Tokens de aplicação" sempre aparece (sem
+         *  `SPINE_ADMIN_API` os tokens explicam que não estão disponíveis); o token de acesso só com
+         *  `technicalDocs`; sessões e dispositivos só com a API da conta. A "Sessão" (validade) fica em Conta. */
+        this.sessionsItems = {
+            accessToken: this.showAccessToken,
+            appTokens: true,
+            aiAgent: !!this.config?.features?.aiAgent?.servers?.length,
+            devices: this.accountSecurity,
+        };
+        /** Sem nenhuma linha visível a seção não aparece. */
+        this.hasSessionsSection = Object.values(this.sessionsItems).some(Boolean);
+        // ── Recursos opcionais (SpineConfig.features) ──────────────────────────────
+        this.idle = inject(SpineIdleService);
+        this.startPageService = inject(SpineStartPageService);
+        this.router = inject(Router);
+        this.notices = inject(SpineNoticesService);
+        this.accountPreferences = inject(SpineAccountPreferencesService);
+        /** Conta › "Encerrar por inatividade": opções dentro dos limites do app. */
+        this.idleOptions = computed(() => this.idle.limits.options.map((m) => ({ value: String(m), label: m ? formatMessage(this.featureText.idleOption, { minutes: m }) : this.featureText.idleNever })), ...(ngDevMode ? [{ debugName: "idleOptions" }] : /* istanbul ignore next */ []));
+        this.idleValue = computed(() => String(this.idle.minutes()), ...(ngDevMode ? [{ debugName: "idleValue" }] : /* istanbul ignore next */ []));
+        this.idleHint = this.idle.limits.max ? formatMessage(this.featureText.idleLimitHint, { minutes: this.idle.limits.max }) : '';
+        /** Conta › "Tela inicial": início, última tela e cada favorito. */
+        this.startPageOptions = computed(() => [
+            { value: 'home', label: this.featureText.startHome },
+            { value: 'last', label: this.featureText.startLast },
+            ...this.quickAccess.favorites().map((f) => ({ value: `fav:${f.id}`, label: formatMessage(this.featureText.startFavorite, { name: f.displayName || f.redirect }) })),
+        ], ...(ngDevMode ? [{ debugName: "startPageOptions" }] : /* istanbul ignore next */ []));
+        /** Favorito escolhido que deixou de ser favorito: mostra "Início" (é para onde o login vai). */
+        this.startPageValue = computed(() => {
+            const value = this.preferences.startPage();
+            return this.startPageOptions().some((o) => o.value === value) ? value : 'home';
+        }, ...(ngDevMode ? [{ debugName: "startPageValue" }] : /* istanbul ignore next */ []));
+        this.quickAccessHasFavorites = computed(() => this.quickAccess.favorites().length > 0, ...(ngDevMode ? [{ debugName: "quickAccessHasFavorites" }] : /* istanbul ignore next */ []));
+        /** "Preferências na conta": situação da sincronização. */
+        this.syncStatus = computed(() => {
+            const status = this.accountPreferences.status();
+            const at = this.accountPreferences.syncedAt();
+            if (status === 'local')
+                return this.featureText.syncLocal;
+            if (status === 'error')
+                return this.featureText.syncError;
+            if (status === 'saving' || status === 'loading')
+                return this.featureText.syncSaving;
+            if (!at)
+                return '';
+            const time = new Intl.DateTimeFormat(this.i18n.formatLocale(), { timeStyle: 'short', timeZone: this.preferences.effectiveTimeZone() }).format(at);
+            return formatMessage(this.featureText.syncSynced, { time });
+        }, ...(ngDevMode ? [{ debugName: "syncStatus" }] : /* istanbul ignore next */ []));
         // ── Sobre ───────────────────────────────────────────────────────────────────
         this.dependencies = KEY_DEPENDENCIES
             .map((d) => ({ ...d, version: this.packageInfo.dependencies?.[d.name] }))
             .filter((d) => !!d.version);
+        // Painel fechado por qualquer caminho: a confirmação pendente não reaparece na próxima abertura.
+        effect(() => {
+            if (!this.settings.isOpen())
+                this.confirming.set(null);
+        });
     }
-    setThemeMode(mode) {
-        this.theme.setMode(mode);
-    }
-    setFamily(id) {
-        const family = this.families.find((f) => f.id === id);
-        if (family)
-            this.presets.setPreset(family);
-    }
-    setDensity(value) {
-        this.density.setDensity(value);
-    }
-    setFont(value) {
-        this.hermesTheme.setFont(value);
+    cancelConfirm() {
+        this.confirming.set(null);
     }
-    setSidebarMode(value) {
-        this.sidebar.setMode(value);
+    /** 1º clique pede confirmação; o 2º apaga a lista do usuário atual e avisa. */
+    clearList(list) {
+        if (this.confirming() !== list) {
+            this.confirming.set(list);
+            return;
+        }
+        this.confirming.set(null);
+        this.userStorage.clear(BROWSER_LISTS[list]);
+        this.dataVersion.update((v) => v + 1);
+        const done = { recents: this.text.recentPagesCleared, searches: this.text.recentSearchesCleared, favorites: this.text.favoritesCleared };
+        this.toast.success(done[list]);
     }
-    replayTour() {
-        this.settings.close();
-        this.onboarding.restart();
+    /**
+     * Restaurar preferências (com confirmação): tema (sistema), cor principal (a padrão do app), densidade
+     * (confortável), fonte (a padrão do app), menu lateral (o modo padrão do app), tamanho do texto (100%),
+     * animações (sistema), formato de hora e primeiro dia da semana (automáticos). Idioma, fuso horário e
+     * atalhos de tecla única ficam: mudam como a pessoa lê e digita, e não são "aparência".
+     */
+    restorePreferences() {
+        if (this.confirming() !== 'preferences') {
+            this.confirming.set('preferences');
+            return;
+        }
+        this.confirming.set(null);
+        const config = this.themeConfig;
+        this.theme.setMode('system');
+        const families = this.families;
+        const knownFamily = (id) => !!id && families.some((f) => f.id === (config.aliases?.[id] ?? id));
+        const family = [config.defaultFamily, FALLBACK_FAMILY, families[0]?.id].find(knownFamily);
+        if (family)
+            this.hermesTheme.setFamily(family);
+        this.density.setDensity('comfortable');
+        const fonts = this.hermesTheme.fonts ?? HERMES_FONTS;
+        const knownFont = (id) => !!id && fonts.some((f) => f.id === (config.fontAliases?.[id] ?? id));
+        const font = [config.defaultFont, 'geist', fonts[0]?.id].find(knownFont);
+        if (font)
+            this.hermesTheme.setFont(font);
+        this.sidebar.setMode(this.sidebarConfig.defaultMode ?? 'auto');
+        this.preferences.setTextScale(1);
+        this.preferences.setMotion('system');
+        this.preferences.setHourCycle('');
+        this.preferences.setWeekStart(null);
+        this.toast.success(this.text.preferencesRestored);
     }
     // ── Conta ───────────────────────────────────────────────────────────────────
     get profile() { return this.auth.profile; }
@@ -2633,7 +4176,7 @@ class SettingsPanelComponent {
             return this.text.sessionUnknown;
         const at = new Date(exp * 1000);
         const minutes = Math.round((at.getTime() - Date.now()) / 60000);
-        const when = new Intl.DateTimeFormat(this.messages.meta.locale, { timeStyle: 'short', timeZone: this.preferences.effectiveTimeZone() }).format(at);
+        const when = new Intl.DateTimeFormat(this.i18n.formatLocale(), { timeStyle: 'short', timeZone: this.preferences.effectiveTimeZone() }).format(at);
         if (minutes <= 0)
             return formatMessage(this.text.sessionExpired, { time: when });
         return minutes < 60
@@ -2650,10 +4193,10 @@ class SettingsPanelComponent {
         }
         await this.copy(token, this.text.tokenCopied);
     }
-    logout() {
-        this.settings.close();
-        this.userStorage.clearHistory();
-        this.auth.logout();
+    /** O painel fica aberto até a saída dar certo: com falha, a pessoa continua aqui, com o aviso de erro. */
+    async logout() {
+        if (await this.logoutService.logout())
+            this.settings.close();
     }
     /** Login da pessoa (`preferred_username` do token, ou o e-mail), para dizer QUAL conta do Argos. */
     get accountLogin() {
@@ -2661,12 +4204,40 @@ class SettingsPanelComponent {
         const login = payload?.['preferred_username'] ?? payload?.['email'];
         return typeof login === 'string' ? login : '';
     }
+    /** Realm pelo nome (`master`, `Minha Empresa`); um id (UUID) não diz nada a quem lê e fica de fora. */
     get accountRealm() {
-        return this.authConfig?.realmId ?? '';
+        const realm = this.authConfig?.realmId?.trim() ?? '';
+        return UUID.test(realm) ? '' : realm;
+    }
+    setIdle(value) {
+        this.preferences.setIdleMinutes(Number(value));
+    }
+    setStartPage(value) {
+        this.preferences.setStartPage(value);
+        // "Última tela visitada" começa a valer já com a tela de agora.
+        if (value === 'last')
+            this.startPageService.remember(this.router.url);
+    }
+    /** Conta › "Crachá padrão": só com mais de um crachá nesta aplicação (claim `badges` do token). */
+    get showDefaultBadge() {
+        return !!this.features.defaultBadge && this.accountSecurity && (this.auth.badges?.length ?? 0) > 1;
+    }
+    /** Notificações: aviso do navegador ligado (escolha + permissão). */
+    async setBrowserNotices(enabled) {
+        if (!enabled) {
+            this.notices.disableBrowser();
+            return;
+        }
+        const ok = await this.notices.enableBrowser();
+        if (!ok)
+            this.toast.warning(this.notices.permission() === 'unsupported' ? this.featureText.browserNoticesUnsupported : this.featureText.browserNoticesDenied);
+    }
+    syncNow() {
+        void this.accountPreferences.syncNow();
     }
     get buildDate() {
         const date = this.packageInfo.buildDate;
-        return date ? new Intl.DateTimeFormat(this.messages.meta.locale, { dateStyle: 'short', timeStyle: 'short' }).format(new Date(date)) : '';
+        return date ? new Intl.DateTimeFormat(this.i18n.formatLocale(), { dateStyle: 'short', timeStyle: 'short' }).format(new Date(date)) : '';
     }
     /** Texto pronto pra colar num chamado: app, versão, ambiente, navegador, tela, fuso e página. */
     async copySupportInfo() {
@@ -2704,18 +4275,19 @@ 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      <!-- 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 }); }
+    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]=\"activeSection()\"\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      <!-- Recursos opcionais (SpineConfig.features): crach\u00E1 padr\u00E3o (Argos), inatividade e tela inicial. -->\n      @if (showDefaultBadge) {\n        <hm-settings-row [label]=\"featureText.defaultBadge\" [description]=\"featureText.defaultBadgeDescription\" [keywords]=\"featureText.defaultBadgeKeywords\">\n          <spine-default-badge />\n        </hm-settings-row>\n      }\n\n      @if (idleOptions().length) {\n        <hm-settings-row [label]=\"featureText.idle\" [description]=\"idleHint || featureText.idleDescription\" [keywords]=\"featureText.idleKeywords\">\n          <hm-segmented-control emphasis=\"action\" [label]=\"featureText.idle\" [options]=\"idleOptions()\" [value]=\"idleValue()\" (valueChange)=\"setIdle($event)\" />\n        </hm-settings-row>\n      }\n\n      @if (features.startPage) {\n        <hm-settings-row [label]=\"featureText.startPage\" [description]=\"quickAccessHasFavorites() ? featureText.startPageDescription : featureText.startPageHint\" [keywords]=\"featureText.startPageKeywords\">\n          <hm-select class=\"sp-settings__language\" [label]=\"featureText.startPage\" [labelHidden]=\"true\" [value]=\"startPageValue()\" (valueChange)=\"setStartPage($event ?? 'home')\">\n            @for (option of startPageOptions(); track option.value) {\n              <option [value]=\"option.value\">{{ option.label }}</option>\n            }\n          </hm-select>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.logout\" [description]=\"text.logoutDescription\" [keywords]=\"text.logoutKeywords\">\n        <hm-button emphasis=\"medium\" intent=\"danger\" icon=\"logout\" [loading]=\"logoutPending()\" (clicked)=\"logout()\">{{ text.logout }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 MFA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 e c\u00F3digos de recupera\u00E7\u00E3o aqui mesmo, sem\n         abrir o Argos. O spineAccountSecurity d\u00E1 \u00E0s linhas o mesmo estado (reautentica\u00E7\u00E3o, cadastro em\n         andamento), que morre quando o painel fecha. `?settings=seguranca` (chave antiga) abre esta se\u00E7\u00E3o. -->\n    @if (accountSecurity) {\n      <hm-settings-section spineAccountSecurity [key]=\"keys.mfa\" [label]=\"text.mfa\" icon=\"shield-check\" [description]=\"text.mfaDescription\" [keywords]=\"text.mfaKeywords\">\n        <!-- Realm s\u00F3 pelo nome: o id (UUID) n\u00E3o diz nada a quem l\u00EA, ent\u00E3o some. -->\n        @if (accountLogin || accountRealm) {\n          <hm-settings-row [label]=\"text.signedInAccount\" [description]=\"accountRealm ? fmt(text.signedInRealm, { realm: accountRealm }) : ''\">\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        <!-- Entradas e tentativas desta conta (SpineFeatures.accountActivity), \u00FAltimos 90 dias. -->\n        @if (features.accountActivity) {\n          <hm-settings-row [label]=\"featureText.activity\" [description]=\"featureText.activityDescription\" [keywords]=\"featureText.activityKeywords\" [stacked]=\"true\">\n            <spine-account-activity />\n          </hm-settings-row>\n        }\n      </hm-settings-section>\n    }\n\n    <!-- \u2500\u2500 Sess\u00F5es \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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    <!-- Os tokens e onde a conta est\u00E1 conectada (a validade desta sess\u00E3o fica em Conta). Cada linha tem a\n         pr\u00F3pria condi\u00E7\u00E3o; a se\u00E7\u00E3o some se nenhuma sobrar (hasSessionsSection). -->\n    @if (hasSessionsSection) {\n      <hm-settings-section [key]=\"keys.sessions\" [label]=\"text.sessionsSection\" icon=\"devices\" [description]=\"text.sessionsSectionDescription\" [keywords]=\"text.sessionsSectionKeywords\">\n        <!-- S\u00F3 com SpineConfig.technicalDocs (padr\u00E3o: isDevMode()): token da sess\u00E3o no clipboard \u00E9 ferramenta de dev. -->\n        @if (sessionsItems.accessToken) {\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        @if (sessionsItems.appTokens) {\n          <hm-settings-row [label]=\"text.appTokens\" [stacked]=\"true\"\n            [description]=\"text.appTokensDescription\"\n            [keywords]=\"text.appTokensKeywords\">\n            <hm-toggletip rowHelp [label]=\"fmt(text.moreAbout, { label: text.appTokens })\" [text]=\"text.appTokensHelp\" />\n            <spine-app-tokens />\n          </hm-settings-row>\n        }\n\n        <!-- Token + .mcp.json prontos para um agente de IA (SpineFeatures.aiAgent). -->\n        @if (sessionsItems.aiAgent) {\n          <hm-settings-row [label]=\"featureText.aiAgent\" [description]=\"featureText.aiAgentDescription\" [keywords]=\"featureText.aiAgentKeywords\" [stacked]=\"true\">\n            <hm-toggletip rowHelp [label]=\"fmt(text.moreAbout, { label: featureText.aiAgent })\" [text]=\"featureText.aiAgentHelp\" />\n            <spine-ai-agent />\n          </hm-settings-row>\n        }\n\n        <!-- Sess\u00F5es e dispositivos: API da conta do Argos, mesma condi\u00E7\u00E3o da se\u00E7\u00E3o MFA. -->\n        @if (sessionsItems.devices) {\n          <hm-settings-row [label]=\"text.sessions\" [description]=\"text.sessionsDescription\" [keywords]=\"text.sessionsKeywords\" [stacked]=\"true\">\n            <spine-account-sessions />\n          </hm-settings-row>\n        }\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          class=\"sp-settings__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-toggletip rowHelp [label]=\"fmt(text.moreAbout, { label: text.sidebar })\" [text]=\"text.sidebarHelp\" />\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 Acessibilidade \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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    <!-- Tamanho do texto (--hm-text-scale no <html>, HermesZoomService) e movimento (data-motion no <html>,\n         HermesMotionService), guardados pelo SpinePreferencesService. -->\n    <hm-settings-section [key]=\"keys.accessibility\" [label]=\"text.accessibility\" icon=\"accessibility-1\" [keywords]=\"text.accessibilityKeywords\">\n      <hm-settings-row [label]=\"text.textSize\" [description]=\"text.textSizeDescription\" [keywords]=\"text.textSizeKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.textSize\" [options]=\"textSizeOptions()\" [value]=\"textSizeValue()\" (valueChange)=\"setTextSize($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.motion\" [description]=\"text.motionDescription\" [keywords]=\"text.motionKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.motion\" [options]=\"motionOptions()\" [value]=\"preferences.motion()\" (valueChange)=\"setMotion($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\" [description]=\"fmt(text.timeZoneHint, { now: timeZonePreview() })\" [keywords]=\"text.timeZoneKeywords\">\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\n      <hm-settings-row [label]=\"text.hourCycle\" [description]=\"fmt(text.hourCycleHint, { now: hourCyclePreview() })\" [keywords]=\"text.hourCycleKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.hourCycle\" [options]=\"hourCycleOptions()\" [value]=\"preferences.hourCycle()\" (valueChange)=\"setHourCycle($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.weekStart\" [description]=\"text.weekStartDescription\" [keywords]=\"text.weekStartKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.weekStart\" [options]=\"weekStartOptions()\" [value]=\"weekStartValue()\" (valueChange)=\"setWeekStart($event)\" />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Notifica\u00E7\u00F5es (SpineFeatures.notices) \u2500\u2500\u2500\u2500\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    <!-- Os tipos de aviso que o app declarou (SpineNoticesService) e o aviso do navegador com a aba em segundo plano. -->\n    @if (notices.enabled) {\n      <hm-settings-section [key]=\"keys.notices\" [label]=\"featureText.notices\" icon=\"bell\" [description]=\"featureText.noticesDescription\" [keywords]=\"featureText.noticesKeywords\">\n        @for (type of notices.types; track type.id) {\n          <hm-settings-row [label]=\"type.label\" [description]=\"type.description ?? ''\">\n            <hm-checkbox [label]=\"type.label\" [labelHidden]=\"true\" [checked]=\"notices.isEnabled(type.id)\" (checkedChange)=\"notices.setEnabled(type.id, $event)\" />\n          </hm-settings-row>\n        }\n        <hm-settings-row [label]=\"featureText.browserNotices\" [description]=\"notices.permission() === 'denied' ? featureText.browserNoticesDenied : notices.permission() === 'unsupported' ? featureText.browserNoticesUnsupported : featureText.browserNoticesDescription\">\n          <hm-checkbox [label]=\"featureText.browserNotices\" [labelHidden]=\"true\" [checked]=\"notices.browserActive()\" (checkedChange)=\"setBrowserNotices($event)\" />\n        </hm-settings-row>\n      </hm-settings-section>\n    }\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 class=\"sp-settings__shortcuts\" characterKeysToggle [registered]=\"false\" [items]=\"shortcutItems()\" [headingLevel]=\"4\" />\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Dados do navegador \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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    <!-- Listas por usu\u00E1rio do SpineUserStorage e as prefer\u00EAncias deste painel. Destrutivo: o 1\u00BA clique pede\n         confirma\u00E7\u00E3o (bot\u00E3o vira \"Confirmar\" + Cancelar), como nas listas de tokens e sess\u00F5es. -->\n    <hm-settings-section [key]=\"keys.data\" [label]=\"text.browserData\" icon=\"browser-setting\" [description]=\"text.browserDataDescription\" [keywords]=\"text.browserDataKeywords\">\n      <!-- SpineFeatures.accountPreferences: as prefer\u00EAncias tamb\u00E9m na conta do Argos (as telas acima n\u00E3o mudam). -->\n      @if (features.accountPreferences) {\n        <hm-settings-row [label]=\"featureText.sync\" [description]=\"syncStatus() || featureText.syncDescription\" [keywords]=\"featureText.syncKeywords\">\n          <hm-toggletip rowHelp [label]=\"fmt(text.moreAbout, { label: featureText.sync })\" [text]=\"featureText.syncDescription\" />\n          <hm-button emphasis=\"medium\" icon=\"refresh\" [disabled]=\"accountPreferences.status() === 'local'\" [loading]=\"accountPreferences.status() === 'saving' || accountPreferences.status() === 'loading'\" (clicked)=\"syncNow()\">{{ featureText.syncNow }}</hm-button>\n        </hm-settings-row>\n      }\n      @for (list of browserLists(); track list.id) {\n        <hm-settings-row [label]=\"list.label\" [description]=\"list.count\" [keywords]=\"list.keywords\">\n          <span class=\"sp-settings__actions\">\n            @if (confirming() === list.id) {\n              <hm-button emphasis=\"medium\" (clicked)=\"cancelConfirm()\">{{ text.cancel }}</hm-button>\n            }\n            <hm-button\n              [emphasis]=\"confirming() === list.id ? 'high' : 'medium'\"\n              intent=\"danger\"\n              [disabled]=\"list.empty && confirming() !== list.id\"\n              (clicked)=\"clearList(list.id)\"\n            >{{ confirming() === list.id ? text.confirmClear : text.clear }}</hm-button>\n          </span>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.restorePreferences\" [description]=\"text.restorePreferencesDescription\" [keywords]=\"text.restorePreferencesKeywords\">\n        <hm-toggletip rowHelp [label]=\"fmt(text.moreAbout, { label: text.restorePreferences })\" [text]=\"text.restorePreferencesHelp\" />\n        <span class=\"sp-settings__actions\">\n          @if (confirming() === 'preferences') {\n            <hm-button emphasis=\"medium\" (clicked)=\"cancelConfirm()\">{{ text.cancel }}</hm-button>\n          }\n          <hm-button [emphasis]=\"confirming() === 'preferences' ? 'high' : 'medium'\" intent=\"danger\" (clicked)=\"restorePreferences()\">\n            {{ confirming() === 'preferences' ? text.confirmRestore : text.restore }}\n          </hm-button>\n        </span>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Ajuda \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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    <!-- Novidades (s\u00F3 com alguma vigente) e tour: os dois fecham o painel, que ocupa a tela. -->\n    <hm-settings-section [key]=\"keys.help\" [label]=\"text.help\" icon=\"help\" [keywords]=\"text.helpKeywords\">\n      @if (hasNews()) {\n        <hm-settings-row [label]=\"text.news\" [description]=\"text.newsDescription\" [keywords]=\"text.newsKeywords\">\n          <hm-button emphasis=\"medium\" icon=\"star\" (clicked)=\"showNews()\">{{ text.showNews }}</hm-button>\n        </hm-settings-row>\n      }\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=\"medium\" icon=\"book\" [link]=\"packageInfo.docs\" [newTab]=\"true\">{{ text.docs }}</hm-button> }\n            @if (packageInfo.issues) { <hm-button emphasis=\"medium\" icon=\"bug\" [link]=\"packageInfo.issues\" [newTab]=\"true\">{{ text.reportIssue }}</hm-button> }\n            @if (packageInfo.repository?.url) { <hm-button emphasis=\"medium\" 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__timezone{display:block;width:min(320px,100%)}.sp-settings__profile{display:flex;align-items:center;gap:var(--hm-space-sm);padding:var(--hm-space-xs) 0 var(--hm-space-sm)}.sp-settings__profile-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);overflow-wrap:anywhere}.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;overflow-wrap:anywhere}.sp-settings__muted{color:var(--hm-muted)}.sp-settings__mono{font-family:var(--hm-font-mono)}.sp-settings__shortcuts{display:block;padding-block:var(--hm-space-xxxs);border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-settings__links,.sp-settings__actions{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.sp-settings__picker ::ng-deep .hm-theme-picker__title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.sp-settings__deps{display:grid;flex:1;min-width:0;grid-template-columns:repeat(auto-fill,minmax(min(12rem,100%),1fr));margin:0;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-settings__deps div{display:flex;justify-content:space-between;gap:var(--hm-space-xs);margin-block-start:calc(-1 * var(--hm-border-hairline));margin-inline-start:calc(-1 * var(--hm-border-hairline));padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);border-inline-start:var(--hm-border-hairline) solid var(--hm-divider)}.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: AiAgentComponent, selector: "spine-ai-agent" }, { kind: "component", type: AccountActivityComponent, selector: "spine-account-activity" }, { kind: "component", type: DefaultBadgeComponent, selector: "spine-default-badge" }, { kind: "component", type: CheckboxComponent, selector: "hm-checkbox", inputs: ["label", "labelHidden", "checked", "indeterminate"], outputs: ["checkedChange"] }, { 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"] }, { kind: "component", type: ToggletipComponent, selector: "hm-toggletip", inputs: ["label", "text", "side", "intent", "icon"] }], 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,
+                        NgComponentOutlet, AppTokensComponent, AiAgentComponent, AccountActivityComponent, DefaultBadgeComponent, CheckboxComponent,
                         AccountMfaComponent, AccountRecoveryCodesComponent, AccountSessionsComponent, SpineAccountSecurityScopeDirective,
-                        AccountAvatarComponent, ButtonComponent, ComboboxComponent, IconComponent,
+                        AccountAvatarComponent, ButtonComponent, ComboboxComponent,
                         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      <!-- 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"] }]
-        }] });
+                        SelectComponent, ShortcutListComponent, ThemePickerComponent, ToggletipComponent,
+                    ], 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]=\"activeSection()\"\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      <!-- Recursos opcionais (SpineConfig.features): crach\u00E1 padr\u00E3o (Argos), inatividade e tela inicial. -->\n      @if (showDefaultBadge) {\n        <hm-settings-row [label]=\"featureText.defaultBadge\" [description]=\"featureText.defaultBadgeDescription\" [keywords]=\"featureText.defaultBadgeKeywords\">\n          <spine-default-badge />\n        </hm-settings-row>\n      }\n\n      @if (idleOptions().length) {\n        <hm-settings-row [label]=\"featureText.idle\" [description]=\"idleHint || featureText.idleDescription\" [keywords]=\"featureText.idleKeywords\">\n          <hm-segmented-control emphasis=\"action\" [label]=\"featureText.idle\" [options]=\"idleOptions()\" [value]=\"idleValue()\" (valueChange)=\"setIdle($event)\" />\n        </hm-settings-row>\n      }\n\n      @if (features.startPage) {\n        <hm-settings-row [label]=\"featureText.startPage\" [description]=\"quickAccessHasFavorites() ? featureText.startPageDescription : featureText.startPageHint\" [keywords]=\"featureText.startPageKeywords\">\n          <hm-select class=\"sp-settings__language\" [label]=\"featureText.startPage\" [labelHidden]=\"true\" [value]=\"startPageValue()\" (valueChange)=\"setStartPage($event ?? 'home')\">\n            @for (option of startPageOptions(); track option.value) {\n              <option [value]=\"option.value\">{{ option.label }}</option>\n            }\n          </hm-select>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.logout\" [description]=\"text.logoutDescription\" [keywords]=\"text.logoutKeywords\">\n        <hm-button emphasis=\"medium\" intent=\"danger\" icon=\"logout\" [loading]=\"logoutPending()\" (clicked)=\"logout()\">{{ text.logout }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 MFA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 e c\u00F3digos de recupera\u00E7\u00E3o aqui mesmo, sem\n         abrir o Argos. O spineAccountSecurity d\u00E1 \u00E0s linhas o mesmo estado (reautentica\u00E7\u00E3o, cadastro em\n         andamento), que morre quando o painel fecha. `?settings=seguranca` (chave antiga) abre esta se\u00E7\u00E3o. -->\n    @if (accountSecurity) {\n      <hm-settings-section spineAccountSecurity [key]=\"keys.mfa\" [label]=\"text.mfa\" icon=\"shield-check\" [description]=\"text.mfaDescription\" [keywords]=\"text.mfaKeywords\">\n        <!-- Realm s\u00F3 pelo nome: o id (UUID) n\u00E3o diz nada a quem l\u00EA, ent\u00E3o some. -->\n        @if (accountLogin || accountRealm) {\n          <hm-settings-row [label]=\"text.signedInAccount\" [description]=\"accountRealm ? fmt(text.signedInRealm, { realm: accountRealm }) : ''\">\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        <!-- Entradas e tentativas desta conta (SpineFeatures.accountActivity), \u00FAltimos 90 dias. -->\n        @if (features.accountActivity) {\n          <hm-settings-row [label]=\"featureText.activity\" [description]=\"featureText.activityDescription\" [keywords]=\"featureText.activityKeywords\" [stacked]=\"true\">\n            <spine-account-activity />\n          </hm-settings-row>\n        }\n      </hm-settings-section>\n    }\n\n    <!-- \u2500\u2500 Sess\u00F5es \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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    <!-- Os tokens e onde a conta est\u00E1 conectada (a validade desta sess\u00E3o fica em Conta). Cada linha tem a\n         pr\u00F3pria condi\u00E7\u00E3o; a se\u00E7\u00E3o some se nenhuma sobrar (hasSessionsSection). -->\n    @if (hasSessionsSection) {\n      <hm-settings-section [key]=\"keys.sessions\" [label]=\"text.sessionsSection\" icon=\"devices\" [description]=\"text.sessionsSectionDescription\" [keywords]=\"text.sessionsSectionKeywords\">\n        <!-- S\u00F3 com SpineConfig.technicalDocs (padr\u00E3o: isDevMode()): token da sess\u00E3o no clipboard \u00E9 ferramenta de dev. -->\n        @if (sessionsItems.accessToken) {\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        @if (sessionsItems.appTokens) {\n          <hm-settings-row [label]=\"text.appTokens\" [stacked]=\"true\"\n            [description]=\"text.appTokensDescription\"\n            [keywords]=\"text.appTokensKeywords\">\n            <hm-toggletip rowHelp [label]=\"fmt(text.moreAbout, { label: text.appTokens })\" [text]=\"text.appTokensHelp\" />\n            <spine-app-tokens />\n          </hm-settings-row>\n        }\n\n        <!-- Token + .mcp.json prontos para um agente de IA (SpineFeatures.aiAgent). -->\n        @if (sessionsItems.aiAgent) {\n          <hm-settings-row [label]=\"featureText.aiAgent\" [description]=\"featureText.aiAgentDescription\" [keywords]=\"featureText.aiAgentKeywords\" [stacked]=\"true\">\n            <hm-toggletip rowHelp [label]=\"fmt(text.moreAbout, { label: featureText.aiAgent })\" [text]=\"featureText.aiAgentHelp\" />\n            <spine-ai-agent />\n          </hm-settings-row>\n        }\n\n        <!-- Sess\u00F5es e dispositivos: API da conta do Argos, mesma condi\u00E7\u00E3o da se\u00E7\u00E3o MFA. -->\n        @if (sessionsItems.devices) {\n          <hm-settings-row [label]=\"text.sessions\" [description]=\"text.sessionsDescription\" [keywords]=\"text.sessionsKeywords\" [stacked]=\"true\">\n            <spine-account-sessions />\n          </hm-settings-row>\n        }\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          class=\"sp-settings__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-toggletip rowHelp [label]=\"fmt(text.moreAbout, { label: text.sidebar })\" [text]=\"text.sidebarHelp\" />\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 Acessibilidade \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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    <!-- Tamanho do texto (--hm-text-scale no <html>, HermesZoomService) e movimento (data-motion no <html>,\n         HermesMotionService), guardados pelo SpinePreferencesService. -->\n    <hm-settings-section [key]=\"keys.accessibility\" [label]=\"text.accessibility\" icon=\"accessibility-1\" [keywords]=\"text.accessibilityKeywords\">\n      <hm-settings-row [label]=\"text.textSize\" [description]=\"text.textSizeDescription\" [keywords]=\"text.textSizeKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.textSize\" [options]=\"textSizeOptions()\" [value]=\"textSizeValue()\" (valueChange)=\"setTextSize($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.motion\" [description]=\"text.motionDescription\" [keywords]=\"text.motionKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.motion\" [options]=\"motionOptions()\" [value]=\"preferences.motion()\" (valueChange)=\"setMotion($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\" [description]=\"fmt(text.timeZoneHint, { now: timeZonePreview() })\" [keywords]=\"text.timeZoneKeywords\">\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\n      <hm-settings-row [label]=\"text.hourCycle\" [description]=\"fmt(text.hourCycleHint, { now: hourCyclePreview() })\" [keywords]=\"text.hourCycleKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.hourCycle\" [options]=\"hourCycleOptions()\" [value]=\"preferences.hourCycle()\" (valueChange)=\"setHourCycle($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.weekStart\" [description]=\"text.weekStartDescription\" [keywords]=\"text.weekStartKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.weekStart\" [options]=\"weekStartOptions()\" [value]=\"weekStartValue()\" (valueChange)=\"setWeekStart($event)\" />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Notifica\u00E7\u00F5es (SpineFeatures.notices) \u2500\u2500\u2500\u2500\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    <!-- Os tipos de aviso que o app declarou (SpineNoticesService) e o aviso do navegador com a aba em segundo plano. -->\n    @if (notices.enabled) {\n      <hm-settings-section [key]=\"keys.notices\" [label]=\"featureText.notices\" icon=\"bell\" [description]=\"featureText.noticesDescription\" [keywords]=\"featureText.noticesKeywords\">\n        @for (type of notices.types; track type.id) {\n          <hm-settings-row [label]=\"type.label\" [description]=\"type.description ?? ''\">\n            <hm-checkbox [label]=\"type.label\" [labelHidden]=\"true\" [checked]=\"notices.isEnabled(type.id)\" (checkedChange)=\"notices.setEnabled(type.id, $event)\" />\n          </hm-settings-row>\n        }\n        <hm-settings-row [label]=\"featureText.browserNotices\" [description]=\"notices.permission() === 'denied' ? featureText.browserNoticesDenied : notices.permission() === 'unsupported' ? featureText.browserNoticesUnsupported : featureText.browserNoticesDescription\">\n          <hm-checkbox [label]=\"featureText.browserNotices\" [labelHidden]=\"true\" [checked]=\"notices.browserActive()\" (checkedChange)=\"setBrowserNotices($event)\" />\n        </hm-settings-row>\n      </hm-settings-section>\n    }\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 class=\"sp-settings__shortcuts\" characterKeysToggle [registered]=\"false\" [items]=\"shortcutItems()\" [headingLevel]=\"4\" />\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Dados do navegador \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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    <!-- Listas por usu\u00E1rio do SpineUserStorage e as prefer\u00EAncias deste painel. Destrutivo: o 1\u00BA clique pede\n         confirma\u00E7\u00E3o (bot\u00E3o vira \"Confirmar\" + Cancelar), como nas listas de tokens e sess\u00F5es. -->\n    <hm-settings-section [key]=\"keys.data\" [label]=\"text.browserData\" icon=\"browser-setting\" [description]=\"text.browserDataDescription\" [keywords]=\"text.browserDataKeywords\">\n      <!-- SpineFeatures.accountPreferences: as prefer\u00EAncias tamb\u00E9m na conta do Argos (as telas acima n\u00E3o mudam). -->\n      @if (features.accountPreferences) {\n        <hm-settings-row [label]=\"featureText.sync\" [description]=\"syncStatus() || featureText.syncDescription\" [keywords]=\"featureText.syncKeywords\">\n          <hm-toggletip rowHelp [label]=\"fmt(text.moreAbout, { label: featureText.sync })\" [text]=\"featureText.syncDescription\" />\n          <hm-button emphasis=\"medium\" icon=\"refresh\" [disabled]=\"accountPreferences.status() === 'local'\" [loading]=\"accountPreferences.status() === 'saving' || accountPreferences.status() === 'loading'\" (clicked)=\"syncNow()\">{{ featureText.syncNow }}</hm-button>\n        </hm-settings-row>\n      }\n      @for (list of browserLists(); track list.id) {\n        <hm-settings-row [label]=\"list.label\" [description]=\"list.count\" [keywords]=\"list.keywords\">\n          <span class=\"sp-settings__actions\">\n            @if (confirming() === list.id) {\n              <hm-button emphasis=\"medium\" (clicked)=\"cancelConfirm()\">{{ text.cancel }}</hm-button>\n            }\n            <hm-button\n              [emphasis]=\"confirming() === list.id ? 'high' : 'medium'\"\n              intent=\"danger\"\n              [disabled]=\"list.empty && confirming() !== list.id\"\n              (clicked)=\"clearList(list.id)\"\n            >{{ confirming() === list.id ? text.confirmClear : text.clear }}</hm-button>\n          </span>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.restorePreferences\" [description]=\"text.restorePreferencesDescription\" [keywords]=\"text.restorePreferencesKeywords\">\n        <hm-toggletip rowHelp [label]=\"fmt(text.moreAbout, { label: text.restorePreferences })\" [text]=\"text.restorePreferencesHelp\" />\n        <span class=\"sp-settings__actions\">\n          @if (confirming() === 'preferences') {\n            <hm-button emphasis=\"medium\" (clicked)=\"cancelConfirm()\">{{ text.cancel }}</hm-button>\n          }\n          <hm-button [emphasis]=\"confirming() === 'preferences' ? 'high' : 'medium'\" intent=\"danger\" (clicked)=\"restorePreferences()\">\n            {{ confirming() === 'preferences' ? text.confirmRestore : text.restore }}\n          </hm-button>\n        </span>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Ajuda \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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    <!-- Novidades (s\u00F3 com alguma vigente) e tour: os dois fecham o painel, que ocupa a tela. -->\n    <hm-settings-section [key]=\"keys.help\" [label]=\"text.help\" icon=\"help\" [keywords]=\"text.helpKeywords\">\n      @if (hasNews()) {\n        <hm-settings-row [label]=\"text.news\" [description]=\"text.newsDescription\" [keywords]=\"text.newsKeywords\">\n          <hm-button emphasis=\"medium\" icon=\"star\" (clicked)=\"showNews()\">{{ text.showNews }}</hm-button>\n        </hm-settings-row>\n      }\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=\"medium\" icon=\"book\" [link]=\"packageInfo.docs\" [newTab]=\"true\">{{ text.docs }}</hm-button> }\n            @if (packageInfo.issues) { <hm-button emphasis=\"medium\" icon=\"bug\" [link]=\"packageInfo.issues\" [newTab]=\"true\">{{ text.reportIssue }}</hm-button> }\n            @if (packageInfo.repository?.url) { <hm-button emphasis=\"medium\" 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__timezone{display:block;width:min(320px,100%)}.sp-settings__profile{display:flex;align-items:center;gap:var(--hm-space-sm);padding:var(--hm-space-xs) 0 var(--hm-space-sm)}.sp-settings__profile-text{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);overflow-wrap:anywhere}.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;overflow-wrap:anywhere}.sp-settings__muted{color:var(--hm-muted)}.sp-settings__mono{font-family:var(--hm-font-mono)}.sp-settings__shortcuts{display:block;padding-block:var(--hm-space-xxxs);border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-settings__links,.sp-settings__actions{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.sp-settings__picker ::ng-deep .hm-theme-picker__title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.sp-settings__deps{display:grid;flex:1;min-width:0;grid-template-columns:repeat(auto-fill,minmax(min(12rem,100%),1fr));margin:0;overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.sp-settings__deps div{display:flex;justify-content:space-between;gap:var(--hm-space-xs);margin-block-start:calc(-1 * var(--hm-border-hairline));margin-inline-start:calc(-1 * var(--hm-border-hairline));padding:var(--hm-space-xs) var(--hm-space-sm);border-top:var(--hm-border-hairline) solid var(--hm-divider);border-inline-start:var(--hm-border-hairline) solid var(--hm-divider)}.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"] }]
+        }], ctorParameters: () => [] });
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 /** "UTC−03:00" para um fuso IANA. */
 function offsetOf(timeZone) {
     try {
@@ -3466,7 +5038,7 @@ class SpineDocsComponent {
         </div>
       </hm-modal>
     }
-  `, isInline: true, styles: [".layout{display:grid;grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);gap:var(--hm-space-lg);block-size:min(70vh,48rem);min-block-size:0}.index,.reader{min-block-size:0;overflow-y:auto;overscroll-behavior:contain}.index{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding-inline-end:var(--hm-space-md);border-inline-end:var(--hm-border-hairline) solid var(--hm-divider)}.filter{box-sizing:border-box;inline-size:100%;min-block-size:var(--hm-control-height);margin-block-end:var(--hm-space-sm);padding-inline:var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm)}.filter::placeholder{color:var(--hm-placeholder)}.filter:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-hairline)}.group-title{margin:var(--hm-space-sm) 0 0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);text-transform:uppercase;letter-spacing:.04em}.entries{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.entry{inline-size:100%;padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid transparent;border-radius:var(--hm-radius-control);background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;cursor:pointer;transition:background-color var(--hm-duration-quick) var(--hm-ease)}.entry:hover{background:var(--hm-hover)}.entry:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.entry--active{background:var(--hm-accent-subtle);color:var(--hm-accent-strong);font-weight:var(--hm-font-weight-semibold)}.reader{display:flex;flex-direction:column;gap:var(--hm-space-md);align-items:stretch}.reader-title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg);font-weight:var(--hm-font-weight-semibold)}.reading{animation:spine-docs-enter var(--hm-duration-standard) var(--hm-ease-decelerate)}.note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}@keyframes spine-docs-enter{0%{opacity:0}to{opacity:1}}@media(max-width:767px){.layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,2fr) minmax(0,3fr)}.index{padding-inline-end:0;padding-block-end:var(--hm-space-md);border-inline-end:0;border-block-end:var(--hm-border-hairline) solid var(--hm-divider)}}@media(prefers-reduced-motion:reduce){.reading{animation:none}.entry{transition:none}}@media(forced-colors:active){.entry--active{border-color:Highlight}}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: SkeletonComponent, selector: "hm-skeleton", inputs: ["shape", "count", "label"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: SpineMarkdownComponent, selector: "spine-markdown", inputs: ["content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".layout{display:grid;grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);gap:var(--hm-space-lg);block-size:min(70vh,48rem);min-block-size:0}.index,.reader{min-block-size:0;overflow-y:auto;overscroll-behavior:contain}.index{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding-inline-end:var(--hm-space-md);border-inline-end:var(--hm-border-hairline) solid var(--hm-divider)}.filter{box-sizing:border-box;inline-size:100%;min-block-size:var(--hm-control-height);margin-block-end:var(--hm-space-sm);padding-inline:var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm)}.filter::placeholder{color:var(--hm-placeholder)}.filter:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-hairline)}.group-title{margin:var(--hm-space-sm) 0 0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);text-transform:uppercase;letter-spacing:.04em}.entries{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.entry{inline-size:100%;padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid transparent;border-radius:var(--hm-radius-control);background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;cursor:pointer;transition:background-color var(--hm-duration-quick) var(--hm-ease)}.entry:hover{background:var(--hm-hover)}.entry:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.entry--active{background:var(--hm-accent-subtle);color:var(--hm-accent-strong);font-weight:var(--hm-font-weight-semibold)}.reader{display:flex;flex-direction:column;gap:var(--hm-space-md);align-items:stretch}.reader-title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg);font-weight:var(--hm-font-weight-semibold)}.reading{animation:spine-docs-enter var(--hm-duration-standard) var(--hm-ease-decelerate)}.note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}@keyframes spine-docs-enter{0%{opacity:0}to{opacity:1}}@media(max-width:767px){.layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,2fr) minmax(0,3fr)}.index{padding-inline-end:0;padding-block-end:var(--hm-space-md);border-inline-end:0;border-block-end:var(--hm-border-hairline) solid var(--hm-divider)}}@media(prefers-reduced-motion:reduce){.reading{animation:none}.entry{transition:none}}:host-context([data-motion=\"reduce\"]) .reading{animation:none}:host-context([data-motion=\"reduce\"]) .entry{transition:none}@media(forced-colors:active){.entry--active{border-color:Highlight}}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: SkeletonComponent, selector: "hm-skeleton", inputs: ["shape", "count", "label"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: SpineMarkdownComponent, selector: "spine-markdown", inputs: ["content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineDocsComponent, decorators: [{
             type: Component,
@@ -3535,7 +5107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
         </div>
       </hm-modal>
     }
-  `, styles: [".layout{display:grid;grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);gap:var(--hm-space-lg);block-size:min(70vh,48rem);min-block-size:0}.index,.reader{min-block-size:0;overflow-y:auto;overscroll-behavior:contain}.index{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding-inline-end:var(--hm-space-md);border-inline-end:var(--hm-border-hairline) solid var(--hm-divider)}.filter{box-sizing:border-box;inline-size:100%;min-block-size:var(--hm-control-height);margin-block-end:var(--hm-space-sm);padding-inline:var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm)}.filter::placeholder{color:var(--hm-placeholder)}.filter:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-hairline)}.group-title{margin:var(--hm-space-sm) 0 0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);text-transform:uppercase;letter-spacing:.04em}.entries{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.entry{inline-size:100%;padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid transparent;border-radius:var(--hm-radius-control);background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;cursor:pointer;transition:background-color var(--hm-duration-quick) var(--hm-ease)}.entry:hover{background:var(--hm-hover)}.entry:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.entry--active{background:var(--hm-accent-subtle);color:var(--hm-accent-strong);font-weight:var(--hm-font-weight-semibold)}.reader{display:flex;flex-direction:column;gap:var(--hm-space-md);align-items:stretch}.reader-title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg);font-weight:var(--hm-font-weight-semibold)}.reading{animation:spine-docs-enter var(--hm-duration-standard) var(--hm-ease-decelerate)}.note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}@keyframes spine-docs-enter{0%{opacity:0}to{opacity:1}}@media(max-width:767px){.layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,2fr) minmax(0,3fr)}.index{padding-inline-end:0;padding-block-end:var(--hm-space-md);border-inline-end:0;border-block-end:var(--hm-border-hairline) solid var(--hm-divider)}}@media(prefers-reduced-motion:reduce){.reading{animation:none}.entry{transition:none}}@media(forced-colors:active){.entry--active{border-color:Highlight}}\n"] }]
+  `, styles: [".layout{display:grid;grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);gap:var(--hm-space-lg);block-size:min(70vh,48rem);min-block-size:0}.index,.reader{min-block-size:0;overflow-y:auto;overscroll-behavior:contain}.index{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding-inline-end:var(--hm-space-md);border-inline-end:var(--hm-border-hairline) solid var(--hm-divider)}.filter{box-sizing:border-box;inline-size:100%;min-block-size:var(--hm-control-height);margin-block-end:var(--hm-space-sm);padding-inline:var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm)}.filter::placeholder{color:var(--hm-placeholder)}.filter:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-hairline)}.group-title{margin:var(--hm-space-sm) 0 0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);text-transform:uppercase;letter-spacing:.04em}.entries{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.entry{inline-size:100%;padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid transparent;border-radius:var(--hm-radius-control);background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;cursor:pointer;transition:background-color var(--hm-duration-quick) var(--hm-ease)}.entry:hover{background:var(--hm-hover)}.entry:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.entry--active{background:var(--hm-accent-subtle);color:var(--hm-accent-strong);font-weight:var(--hm-font-weight-semibold)}.reader{display:flex;flex-direction:column;gap:var(--hm-space-md);align-items:stretch}.reader-title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg);font-weight:var(--hm-font-weight-semibold)}.reading{animation:spine-docs-enter var(--hm-duration-standard) var(--hm-ease-decelerate)}.note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}@keyframes spine-docs-enter{0%{opacity:0}to{opacity:1}}@media(max-width:767px){.layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,2fr) minmax(0,3fr)}.index{padding-inline-end:0;padding-block-end:var(--hm-space-md);border-inline-end:0;border-block-end:var(--hm-border-hairline) solid var(--hm-divider)}}@media(prefers-reduced-motion:reduce){.reading{animation:none}.entry{transition:none}}:host-context([data-motion=\"reduce\"]) .reading{animation:none}:host-context([data-motion=\"reduce\"]) .entry{transition:none}@media(forced-colors:active){.entry--active{border-color:Highlight}}\n"] }]
         }] });
 
 /**
@@ -3611,6 +5183,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
   `, styles: [":host{display:block;flex:none}\n"] }]
         }] });
 
+/**
+ * Aviso de "Encerrar por inatividade" (`SpineIdleService`): contagem regressiva, "Continuar conectado" (padrão, e o
+ * que fechar pelo X/Esc faz) e "Sair agora". Montado uma vez no `spine-layout`.
+ */
+class SpineIdleWarningComponent {
+    constructor() {
+        this.idle = inject(SpineIdleService);
+        this.messages = inject(SPINE_MESSAGES);
+        this.text = this.messages.accountFeatures;
+        this.countdown = computed(() => pluralMessage(this.text.idleWarningText, this.idle.secondsLeft(), this.messages.meta.locale), ...(ngDevMode ? [{ debugName: "countdown" }] : /* istanbul ignore next */ []));
+    }
+    onOpenChange(open) {
+        if (!open)
+            this.idle.stay();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineIdleWarningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpineIdleWarningComponent, isStandalone: true, selector: "spine-idle-warning", ngImport: i0, template: `
+    @if (idle.warning()) {
+      <hm-modal [open]="true" [heading]="text.idleWarningHeading" size="small" (openChange)="onOpenChange($event)">
+        <p class="sp-idle__text" role="timer">{{ countdown() }}</p>
+        <div footer class="sp-idle__actions">
+          <hm-button emphasis="medium" icon="logout" (clicked)="idle.logoutNow()">{{ text.idleLogout }}</hm-button>
+          <hm-button emphasis="high" (clicked)="idle.stay()">{{ text.idleStay }}</hm-button>
+        </div>
+      </hm-modal>
+    }
+  `, isInline: true, styles: [".sp-idle__text{margin:0}.sp-idle__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-2)}\n"], dependencies: [{ 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: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineIdleWarningComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-idle-warning', imports: [ButtonComponent, ModalComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (idle.warning()) {
+      <hm-modal [open]="true" [heading]="text.idleWarningHeading" size="small" (openChange)="onOpenChange($event)">
+        <p class="sp-idle__text" role="timer">{{ countdown() }}</p>
+        <div footer class="sp-idle__actions">
+          <hm-button emphasis="medium" icon="logout" (clicked)="idle.logoutNow()">{{ text.idleLogout }}</hm-button>
+          <hm-button emphasis="high" (clicked)="idle.stay()">{{ text.idleStay }}</hm-button>
+        </div>
+      </hm-modal>
+    }
+  `, styles: [".sp-idle__text{margin:0}.sp-idle__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-2)}\n"] }]
+        }] });
+
 /**
  * Shell do spine — MESMA estrutura do `docs/website`'s `app.component.html`/`.scss` (decisão de
  * 2026-09-28, ver `hefesto-migration-plan.md`): `.shell` com altura de viewport de verdade
@@ -3620,7 +5235,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
  * (`hm-sidebar` fixa + `.main` com `hm-workspace`). **Sem barra de breadcrumb própria** — isso
  * era resíduo do spine antigo (`spine-navigation`), removido: o docs não tem uma, a navegação
  * inteira mora na sidebar. Entre o header e o corpo fica o `spine-connection-banner` (aviso de conexão
- * do `@orfeu/angular`, vazio quando `online`).
+ * do `@orfeu/angular`, vazio quando `online`). Os avisos ficam no `spine-notification` (`NotificationService`) e
+ * no `hm-toast-stack` (`HermesToastService`), os dois montados aqui: o app não monta nenhum.
  *
  * O `<router-outlet>` que sobra aqui é só pra `/no-permission` (a única rota do shell com
  * `component` de verdade — o resto da árvore do backend nunca passa pelo `Router` pra renderizar,
@@ -3630,10 +5246,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
  * corressem na mesma volta de detecção de mudanças.
  */
 class LayoutComponent {
-    constructor(router, theme, auth, shortcuts, onboarding, news) {
+    constructor(router, theme, shortcuts, onboarding, news) {
         this.router = router;
         this.theme = theme;
-        this.auth = auth;
         this.shortcuts = shortcuts;
         this.onboarding = onboarding;
         this.news = news;
@@ -3641,7 +5256,12 @@ class LayoutComponent {
         this.preferences = inject(SpinePreferencesService);
         this.workspace = inject(SpineWorkspaceNavService);
         this.settings = inject(SpineSettingsService);
-        this.userStorage = inject(SpineUserStorage);
+        /** Também liga, uma vez, o aviso de falha do logout (`logoutFailed$` do `@orfeu/angular`). */
+        this.logoutService = inject(SpineLogoutService);
+        /** Recursos opcionais (`SpineConfig.features`): cada serviço não faz nada com o seu recurso desligado. */
+        this.idle = inject(SpineIdleService);
+        this.startPage = inject(SpineStartPageService);
+        this.accountPreferences = inject(SpineAccountPreferencesService);
         this.isNoPermission = this.matchesNoPermission(this.router.url);
         this.router.events.pipe(filter((e) => e instanceof NavigationEnd))
             .subscribe(e => { this.isNoPermission = this.matchesNoPermission(e.urlAfterRedirects); });
@@ -3650,15 +5270,16 @@ class LayoutComponent {
         return url.split(/[?#]/)[0] === '/no-permission';
     }
     ngOnInit() {
+        // Preferências na conta (lê e aplica uma vez por sessão do app), inatividade e a "última tela visitada".
+        void this.accountPreferences.start();
+        this.idle.start();
+        this.startPage.track();
         // Liga os atalhos de teclado globais às ações reais do sistema.
         this.shortcuts.setActions({
             navigate: (url) => this.router.navigateByUrl(url),
             toggleTheme: () => this.theme.setTheme(this.theme.current === 'light' ? 'dark' : 'light'),
             toggleFullscreen: () => this.toggleFullscreen(),
-            logout: () => {
-                this.userStorage.clearHistory();
-                this.auth.logout();
-            },
+            logout: () => void this.logoutService.logout(),
             openSettings: () => this.settings.toggle(),
         });
         // Link direto pra uma seção do painel de configurações: `?settings=aparencia` (ou só
@@ -3688,7 +5309,7 @@ class LayoutComponent {
             document.exitFullscreen?.();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LayoutComponent, deps: [{ token: i3.Router }, { token: i2$1.ThemeService }, { token: i1.AuthorizationService }, { token: ShortcutService }, { token: OnboardingService }, { token: SpineNewsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LayoutComponent, deps: [{ token: i3.Router }, { token: i2$1.ThemeService }, { token: ShortcutService }, { token: OnboardingService }, { token: SpineNewsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: LayoutComponent, isStandalone: true, selector: "spine-layout", ngImport: i0, template: `
     <div class="shell">
       <spine-header></spine-header>
@@ -3717,6 +5338,9 @@ class LayoutComponent {
       </div>
     </div>
     <spine-notification></spine-notification>
+    <!-- Avisos do HermesToastService (configurações, conta e segurança, auto-serviço…). Se o app também montar
+         uma, só uma desenha (o serviço escolhe a pilha ativa): nunca em dobro. -->
+    <hm-toast-stack />
     <spine-side-panel />
     <spine-modal />
     <spine-shortcuts-cheatsheet></spine-shortcuts-cheatsheet>
@@ -3724,7 +5348,9 @@ class LayoutComponent {
     <spine-docs />
     <spine-news />
     <spine-onboarding-overlay></spine-onboarding-overlay>
-  `, isInline: true, styles: [":host{display:block}.shell{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--hm-surface);color:var(--hm-text)}.body{position:relative;display:flex;flex:1;min-height:0;overflow:hidden}.main{display:flex;flex:1;min-width:0;flex-direction:column}.workspace-area{flex:1;min-height:0;display:flex;flex-direction:column;--hm-tab-strip-bg: var(--hm-surface);--hm-tab-active-bg: var(--hm-surface-raised)}hm-workspace{flex:1;min-height:0}.panel-content{display:flex;flex-direction:column;height:100%;min-height:0}\n"], dependencies: [{ kind: "component", type: SpineNewsComponent, selector: "spine-news" }, { kind: "component", type: SpineDocsComponent, selector: "spine-docs" }, { kind: "component", type: HeaderComponent, selector: "spine-header" }, { kind: "component", type: SidebarComponent, selector: "spine-sidebar" }, { kind: "component", type: SpineConnectionBannerComponent, selector: "spine-connection-banner" }, { kind: "component", type: SpinePagePanelComponent, selector: "spine-page-panel", inputs: ["url", "isFocusedPanel"] }, { kind: "directive", type: PanelLocalLinkDirective, selector: "[appPanelLocalLink]", inputs: ["appPanelLocalLink"], outputs: ["localNavigate"] }, { kind: "component", type: WorkspaceComponent, selector: "hm-workspace", inputs: ["initialTabs", "initialActiveId", "keepAlive", "label", "providedStore"], outputs: ["stateChange", "newTabRequested"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ModalComponent$1, selector: "spine-modal" }, { kind: "component", type: NotificationComponent, selector: "spine-notification" }, { kind: "component", type: SidePanelComponent, selector: "spine-side-panel" }, { kind: "component", type: OnboardingOverlayComponent, selector: "spine-onboarding-overlay" }, { kind: "component", type: ShortcutsCheatsheetComponent, selector: "spine-shortcuts-cheatsheet" }, { kind: "component", type: SettingsPanelComponent, selector: "spine-settings-panel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    <!-- Aviso de "Encerrar por inatividade" (SpineFeatures.idleTimeout): só desenha quando abre. -->
+    <spine-idle-warning />
+  `, isInline: true, styles: [":host{display:block}.shell{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--hm-surface);color:var(--hm-text)}.body{position:relative;display:flex;flex:1;min-height:0;overflow:hidden}.main{display:flex;flex:1;min-width:0;flex-direction:column}.workspace-area{flex:1;min-height:0;display:flex;flex-direction:column;--hm-tab-strip-bg: var(--hm-surface);--hm-tab-active-bg: var(--hm-surface-raised)}hm-workspace{flex:1;min-height:0}.panel-content{display:flex;flex-direction:column;height:100%;min-height:0}\n"], dependencies: [{ kind: "component", type: SpineNewsComponent, selector: "spine-news" }, { kind: "component", type: SpineDocsComponent, selector: "spine-docs" }, { kind: "component", type: HeaderComponent, selector: "spine-header" }, { kind: "component", type: SidebarComponent, selector: "spine-sidebar" }, { kind: "component", type: SpineConnectionBannerComponent, selector: "spine-connection-banner" }, { kind: "component", type: SpinePagePanelComponent, selector: "spine-page-panel", inputs: ["url", "isFocusedPanel"] }, { kind: "directive", type: PanelLocalLinkDirective, selector: "[appPanelLocalLink]", inputs: ["appPanelLocalLink"], outputs: ["localNavigate"] }, { kind: "component", type: WorkspaceComponent, selector: "hm-workspace", inputs: ["initialTabs", "initialActiveId", "keepAlive", "label", "providedStore"], outputs: ["stateChange", "newTabRequested"] }, { kind: "component", type: ToastStackComponent, selector: "hm-toast-stack" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ModalComponent$1, selector: "spine-modal" }, { kind: "component", type: NotificationComponent, selector: "spine-notification" }, { kind: "component", type: SidePanelComponent, selector: "spine-side-panel" }, { kind: "component", type: OnboardingOverlayComponent, selector: "spine-onboarding-overlay" }, { kind: "component", type: ShortcutsCheatsheetComponent, selector: "spine-shortcuts-cheatsheet" }, { kind: "component", type: SettingsPanelComponent, selector: "spine-settings-panel" }, { kind: "component", type: SpineIdleWarningComponent, selector: "spine-idle-warning" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -3737,6 +5363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                         SpinePagePanelComponent,
                         PanelLocalLinkDirective,
                         WorkspaceComponent,
+                        ToastStackComponent,
                         RouterOutlet,
                         ModalComponent$1,
                         NotificationComponent,
@@ -3744,6 +5371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                         OnboardingOverlayComponent,
                         ShortcutsCheatsheetComponent,
                         SettingsPanelComponent,
+                        SpineIdleWarningComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="shell">
       <spine-header></spine-header>
@@ -3772,6 +5400,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
       </div>
     </div>
     <spine-notification></spine-notification>
+    <!-- Avisos do HermesToastService (configurações, conta e segurança, auto-serviço…). Se o app também montar
+         uma, só uma desenha (o serviço escolhe a pilha ativa): nunca em dobro. -->
+    <hm-toast-stack />
     <spine-side-panel />
     <spine-modal />
     <spine-shortcuts-cheatsheet></spine-shortcuts-cheatsheet>
@@ -3779,12 +5410,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
     <spine-docs />
     <spine-news />
     <spine-onboarding-overlay></spine-onboarding-overlay>
+    <!-- Aviso de "Encerrar por inatividade" (SpineFeatures.idleTimeout): só desenha quando abre. -->
+    <spine-idle-warning />
   `, styles: [":host{display:block}.shell{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--hm-surface);color:var(--hm-text)}.body{position:relative;display:flex;flex:1;min-height:0;overflow:hidden}.main{display:flex;flex:1;min-width:0;flex-direction:column}.workspace-area{flex:1;min-height:0;display:flex;flex-direction:column;--hm-tab-strip-bg: var(--hm-surface);--hm-tab-active-bg: var(--hm-surface-raised)}hm-workspace{flex:1;min-height:0}.panel-content{display:flex;flex-direction:column;height:100%;min-height:0}\n"] }]
-        }], ctorParameters: () => [{ type: i3.Router }, { type: i2$1.ThemeService }, { type: i1.AuthorizationService }, { type: ShortcutService }, { type: OnboardingService }, { type: SpineNewsService }] });
+        }], ctorParameters: () => [{ type: i3.Router }, { type: i2$1.ThemeService }, { type: ShortcutService }, { type: OnboardingService }, { type: SpineNewsService }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AiAgentComponent, AppLauncherComponent, HeaderComponent, LayoutComponent, OnboardingOverlayComponent, OnboardingService, SPINE_BRAND, SPINE_IDLE_WARNING_SECONDS, SPINE_MARKDOWN_PURIFY_CONFIG, SPINE_PREFERENCES_SAVE_DELAY_MS, SPINE_SETTINGS_ALIASES, SPINE_SETTINGS_KEYS, SPINE_SETTINGS_SECTIONS, SettingsPanelComponent, ShortcutService, ShortcutsCheatsheetComponent, SidebarComponent, SpineAccountPreferencesService, SpineAccountSecurityService, SpineAppTokensService, SpineBrandComponent, SpineConnectionBannerComponent, SpineDocsComponent, SpineDocsService, SpineIdleService, SpineIdleWarningComponent, SpineLogoutService, SpineMarkdownComponent, SpineNewsComponent, SpineNewsService, SpineNoticesService, SpineSettingsService, SpineStartPageService, accountErrorCode, argosAccountApi, buildMcpConfig, effectiveIdleMinutes, findTourTarget, idleLimits, isInternalPath, provideSettingsSection, resolveSettingsSection, sanitizeSpineMarkdownHtml, stable };
 //# sourceMappingURL=trismegisto-spine-layout.mjs.map