@trismegisto/spine 3.1.0 → 3.3.0

package/fesm2022/trismegisto-spine-layout.mjs

@@ -2,10 +2,9 @@ import * as i0 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 { MenuButtonComponent, HermesShortcutService, HERMES_MESSAGES, HeaderComponent as HeaderComponent$1, IconButtonComponent, IconComponent, InputComponent, 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, LoadingSquareComponent, SkeletonComponent, WorkspaceComponent, ToastStackComponent } from '@trismegisto/angular';
+import { BehaviorSubject, filter, take, Subject, firstValueFrom, debounceTime, distinctUntilChanged } from 'rxjs';
+import { MenuButtonComponent, HermesShortcutService, HERMES_MESSAGES, HeaderComponent as HeaderComponent$1, IconButtonComponent, IconComponent, InputComponent, 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, HermesI18nService, HERMES_SIDEBAR_CONFIG, ComboboxComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent, ThemePickerComponent, ToggletipComponent, BreadcrumbComponent, TooltipDirective, LoadingSquareComponent, SkeletonComponent, WorkspaceComponent, ToastStackComponent } from '@trismegisto/angular';
 import { ModalComponent as ModalComponent$1 } from '@trismegisto/spine/modal';
-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, SpineQuickAccessService, DensityService, ThemePresetService, SPINE_IDLE_OPTIONS, SPINE_ADMIN_API, APP_PACKAGE_INFO } from '@trismegisto/spine';
@@ -16,6 +15,7 @@ import { FormsModule, FormControl, Validators, ReactiveFormsModule } from '@angu
 import * as i1 from '@orfeu/angular/core';
 import { AuthorizationService, ViewService, RealmAppsService, AUTH_CONFIG } from '@orfeu/angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { NotificationService, AlertType } from '@trismegisto/spine/notification';
 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';
@@ -582,6 +582,8 @@ const SPINE_SETTINGS_KEYS = {
     mfa: 'mfa',
     /** Sessão atual, token de acesso, tokens de aplicação e sessões e dispositivos. */
     sessions: 'sessoes',
+    /** Grupos desta aplicação em que a pessoa tem função (argos-admin `/me/groups`); só aparece com algum. */
+    groups: 'grupos',
     /** @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',
@@ -2233,10 +2235,11 @@ class SpineNoticesService {
         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);
+        // Com detalhe, o tipo do aviso vira o título do toast ("Deploy concluído") e o detalhe, o texto; sem detalhe, o
+        // título é o texto e o toast usa o título padrão da variante.
+        const action = url ? { label: this.messages.accountFeatures.noticeOpen, run: () => this.open(url) } : undefined;
+        const options = notice.body ? { title: notice.title, ...(action ? { action } : {}) } : action ? { action } : undefined;
+        this.toast.push(notice.intent ?? 'info', notice.body || notice.title, options);
         if (this.browser && document.visibilityState === 'hidden' && this.preferences.browserNotices())
             this.system(typeId, notice, url);
         return true;
@@ -2758,7 +2761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                 }]
         }] });
 
-let sequence$4 = 0;
+let sequence$5 = 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
@@ -2768,7 +2771,7 @@ class AccountReauthComponent {
     constructor() {
         this.state = inject(SpineAccountSecurityState);
         this.t = inject(SPINE_MESSAGES).accountSecurity;
-        this.titleId = `sp-account-reauth-${++sequence$4}`;
+        this.titleId = `sp-account-reauth-${++sequence$5}`;
         this.codeLabelId = `${this.titleId}-code`;
         this.hintId = `${this.titleId}-hint`;
         this.password = new FormControl('', { nonNullable: true, validators: [Validators.required] });
@@ -2925,7 +2928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
   `, 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;
+let sequence$4 = 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
@@ -2939,7 +2942,7 @@ class AccountMfaComponent {
         this.fmt = formatMessage;
         this.isTotp = isTotp;
         this.isSms = isSms;
-        this.ids = `sp-account-mfa-${++sequence$3}`;
+        this.ids = `sp-account-mfa-${++sequence$4}`;
         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 */ []));
@@ -3390,7 +3393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
   `, 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$2 = 0;
+let sequence$3 = 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
@@ -3402,7 +3405,7 @@ class AccountRecoveryCodesComponent {
         this.messages = inject(SPINE_MESSAGES);
         this.t = this.messages.accountSecurity;
         this.toast = inject(HermesToastService);
-        this.titleId = `sp-account-codes-${++sequence$2}`;
+        this.titleId = `sp-account-codes-${++sequence$3}`;
         this.remaining = computed(() => pluralMessage(this.t.codesRemaining, this.state.remainingCodes(), this.messages.meta.locale), ...(ngDevMode ? [{ debugName: "remaining" }] : /* istanbul ignore next */ []));
     }
     errorText(code) {
@@ -3664,7 +3667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             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: () => [] });
 
-let sequence$1 = 0;
+let sequence$2 = 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
@@ -3682,7 +3685,7 @@ class AppTokensComponent {
         this.toast = inject(HermesToastService);
         this.preferences = inject(SpinePreferencesService);
         this.available = this.service.available;
-        this.ids = `sp-tokens-${++sequence$1}`;
+        this.ids = `sp-tokens-${++sequence$2}`;
         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 */ []));
@@ -3834,6 +3837,336 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             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: () => [] });
 
+/**
+ * Grupos de que a pessoa é membro e o que a função dela permite — `argos-admin /me/groups`. Sempre da aplicação LOGADA (o
+ * servidor tira o client do access-token da sessão) e sempre com o token da sessão (o servidor recusa x-app-token).
+ * A regra de quem faz o quê é do servidor; aqui só se mostra o que ele diz (`can_add`, `assignable_roles`,
+ * `can_change_roles`).
+ *
+ * `groups` é a lista que decide se a seção "Grupos" aparece: lida a cada abertura do painel (`refresh`). Sem
+ * `SPINE_ADMIN_API`, ou com um argos-admin que ainda não tem a rota, fica vazia e a seção não aparece.
+ */
+class SpineMyGroupsService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.auth = inject(AuthorizationService);
+        this.adminApi = inject(SPINE_ADMIN_API, { optional: true });
+        this.available = !!this.adminApi;
+        this.groups = signal([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    }
+    get baseUrl() {
+        return `${this.adminApi}/me/groups`;
+    }
+    get headers() {
+        return new HttpHeaders({ 'x-access-token': this.auth.getToken() ?? '' });
+    }
+    /** Relê os grupos; qualquer falha deixa a lista vazia (a seção some em vez de mostrar um erro sem contexto). */
+    async refresh() {
+        if (!this.available)
+            return;
+        try {
+            const res = await firstValueFrom(this.http.get(this.baseUrl, { headers: this.headers }));
+            this.groups.set(res.groups ?? []);
+        }
+        catch {
+            this.groups.set([]);
+        }
+    }
+    members(groupId) {
+        return firstValueFrom(this.http.get(`${this.baseUrl}${urlPath `/${groupId}/members`}`, { headers: this.headers }));
+    }
+    searchUsers(search, limit = 10) {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/users`, {
+            headers: this.headers,
+            params: { search, limit },
+        }));
+    }
+    /** `role` ausente ou null: entra sem função (o único jeito de o Editor incluir). */
+    addMember(groupId, userId, role = null) {
+        const body = role === null ? { user_id: userId } : { user_id: userId, role };
+        return firstValueFrom(this.http.post(`${this.baseUrl}${urlPath `/${groupId}/members`}`, body, { headers: this.headers }));
+    }
+    updateRole(groupId, userId, role) {
+        return firstValueFrom(this.http.put(`${this.baseUrl}${urlPath `/${groupId}/members/${userId}`}`, { role }, { headers: this.headers }));
+    }
+    removeMember(groupId, userId) {
+        return firstValueFrom(this.http.delete(`${this.baseUrl}${urlPath `/${groupId}/members/${userId}`}`, { headers: this.headers }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineMyGroupsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineMyGroupsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineMyGroupsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+let sequence$1 = 0;
+/** Valor do seletor de função para o membro sem função (o `<option>` não carrega null). */
+const MEMBER = '';
+/** Nome da função na tela: sem função é "Membro". */
+function groupRoleLabel(text, role) {
+    if (role === 'Administrador')
+        return text.roleAdministrator;
+    if (role === 'Editor')
+        return text.roleEditor;
+    return text.roleMember;
+}
+/**
+ * Membros de um grupo (tela de membros da seção "Grupos"), com o que a função da pessoa permite: Administrador inclui
+ * com qualquer função, troca funções e remove qualquer um menos a si mesmo; Editor inclui como Membro e remove só
+ * Membros; Membro só vê. "Incluir membro" fica acima da lista. Cada ação vale na hora (como os tokens e as sessões do
+ * painel); remover pede confirmação. A regra é do servidor: os botões só aparecem onde ele aceitaria, e um 403/409 que
+ * venha mesmo assim vira aviso.
+ */
+class MyGroupComponent {
+    constructor() {
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+        this.text = inject(SPINE_MESSAGES).myGroups;
+        this.fmt = formatMessage;
+        this.service = inject(SpineMyGroupsService);
+        this.toast = inject(HermesToastService);
+        this.i18n = inject(HermesI18nService);
+        this.auth = inject(AuthorizationService);
+        this.ids = `sp-group-${++sequence$1}`;
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loadError = signal('', ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+        this.members = signal([], ...(ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []));
+        /** Membro com a remoção aguardando confirmação (segundo clique). */
+        this.confirmingRemove = signal(null, ...(ngDevMode ? [{ debugName: "confirmingRemove" }] : /* istanbul ignore next */ []));
+        /** Membro com uma troca de função ou remoção em andamento. */
+        this.busy = signal(null, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        /** `sub` da sessão, para marcar "você" e não oferecer ações sobre si mesmo. */
+        this.me = (tokenSub(this.auth.getToken()) ?? '').toLowerCase();
+        this.countLabel = computed(() => pluralMessage(this.text.membersCount, this.members().length, this.i18n.formatLocale()), ...(ngDevMode ? [{ debugName: "countLabel" }] : /* istanbul ignore next */ []));
+        /** Funções que o Administrador escolhe (seletor de cada membro e inclusão): Membro, Editor, Administrador. */
+        this.roleOptions = computed(() => [
+            { value: MEMBER, label: this.text.roleMember },
+            ...[...this.group().assignable_roles].reverse().map((r) => ({ value: r, label: this.roleLabel(r) })),
+        ], ...(ngDevMode ? [{ debugName: "roleOptions" }] : /* istanbul ignore next */ []));
+        // ── inclusão ────────────────────────────────────────────────────────────────
+        this.adding = signal(false, ...(ngDevMode ? [{ debugName: "adding" }] : /* istanbul ignore next */ []));
+        this.searchControl = new FormControl('', { nonNullable: true });
+        this.searching = signal(false, ...(ngDevMode ? [{ debugName: "searching" }] : /* istanbul ignore next */ []));
+        this.searchError = signal('', ...(ngDevMode ? [{ debugName: "searchError" }] : /* istanbul ignore next */ []));
+        this.results = signal(null, ...(ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []));
+        this.selected = signal(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.newRole = signal(MEMBER, ...(ngDevMode ? [{ debugName: "newRole" }] : /* istanbul ignore next */ []));
+        this.submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
+        this.memberIds = computed(() => new Set(this.members().map((m) => m.user_id.toLowerCase())), ...(ngDevMode ? [{ debugName: "memberIds" }] : /* istanbul ignore next */ []));
+        this.searchControl.valueChanges
+            .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(inject(DestroyRef)))
+            .subscribe((value) => void this.search(value));
+    }
+    ngOnInit() {
+        void this.load();
+    }
+    roleLabel(role) {
+        return groupRoleLabel(this.text, role);
+    }
+    isMe(member) {
+        return member.user_id.toLowerCase() === this.me;
+    }
+    isMember(user) {
+        return this.memberIds().has(user.id.toLowerCase());
+    }
+    /** Mesma regra do servidor: Administrador remove qualquer um menos a si mesmo; Editor, só Membros. */
+    canRemove(member) {
+        if (this.isMe(member))
+            return false;
+        const role = this.group().my_role;
+        return role === 'Administrador' || (role === 'Editor' && member.role === null);
+    }
+    canChangeRole(member) {
+        return this.group().can_change_roles && !this.isMe(member);
+    }
+    async load() {
+        this.loading.set(true);
+        this.loadError.set('');
+        try {
+            const res = await this.service.members(this.group().id);
+            this.members.set(res.members ?? []);
+        }
+        catch (err) {
+            this.loadError.set(errorText(err, this.text.loadError));
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    async changeRole(member, value) {
+        const role = (value || null);
+        if (role === member.role)
+            return;
+        this.busy.set(member.user_id);
+        try {
+            await this.service.updateRole(this.group().id, member.user_id, role);
+            this.members.update((list) => list.map((m) => (m.user_id === member.user_id ? { ...m, role } : m)));
+            this.toast.success(formatMessage(this.text.roleChanged, { name: displayName(member), role: this.roleLabel(role) }));
+        }
+        catch (err) {
+            this.toast.error(errorText(err, this.text.roleError));
+            await this.load();
+        }
+        finally {
+            this.busy.set(null);
+        }
+    }
+    async remove(member) {
+        if (this.confirmingRemove() !== member.user_id) {
+            this.confirmingRemove.set(member.user_id);
+            return;
+        }
+        this.confirmingRemove.set(null);
+        this.busy.set(member.user_id);
+        try {
+            await this.service.removeMember(this.group().id, member.user_id);
+            this.members.update((list) => list.filter((m) => m.user_id !== member.user_id));
+            this.toast.success(formatMessage(this.text.removed, { name: displayName(member) }));
+        }
+        catch (err) {
+            this.toast.error(errorText(err, this.text.removeError));
+            await this.load();
+        }
+        finally {
+            this.busy.set(null);
+        }
+    }
+    cancelRemove() {
+        this.confirmingRemove.set(null);
+    }
+    startAdd() {
+        this.searchControl.setValue('', { emitEvent: false });
+        this.results.set(null);
+        this.selected.set(null);
+        this.searchError.set('');
+        this.newRole.set(MEMBER);
+        this.adding.set(true);
+    }
+    cancelAdd() {
+        this.adding.set(false);
+    }
+    async search(value) {
+        const term = value.trim();
+        this.selected.set(null);
+        this.searchError.set('');
+        if (term.length < 2) {
+            this.results.set(null);
+            return;
+        }
+        this.searching.set(true);
+        try {
+            const res = await this.service.searchUsers(term);
+            // Resposta de uma busca antiga (a pessoa continuou digitando): descarta.
+            if (this.searchControl.value.trim() === term)
+                this.results.set(res.users ?? []);
+        }
+        catch (err) {
+            this.results.set(null);
+            this.searchError.set(errorText(err, this.text.searchError));
+        }
+        finally {
+            this.searching.set(false);
+        }
+    }
+    pick(user) {
+        if (!this.isMember(user))
+            this.selected.set(user);
+    }
+    async submitAdd() {
+        const user = this.selected();
+        if (!user || this.submitting())
+            return;
+        this.submitting.set(true);
+        try {
+            // Editor não escolhe: entra como Membro (sem função).
+            const role = this.group().can_change_roles ? (this.newRole() || null) : null;
+            await this.service.addMember(this.group().id, user.id, role);
+            this.toast.success(formatMessage(this.text.added, { name: user.name || user.username }));
+            this.adding.set(false);
+            await this.load();
+        }
+        catch (err) {
+            this.toast.error(errorText(err, this.text.addError));
+        }
+        finally {
+            this.submitting.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MyGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: MyGroupComponent, isStandalone: true, selector: "spine-my-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<!-- Incluir membro fica acima da lista: o bot\u00E3o, ou o painel de inclus\u00E3o aberto no lugar dele. -->\n@if (group().can_add) {\n  @if (adding()) {\n    <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-add'\">\n      <div class=\"sp-account__panel-head\">\n        <hm-icon shape=\"assign-user\" />\n        <div class=\"sp-account__panel-text\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-add'\">{{ fmt(text.addHeading, { group: group().name }) }}</h4>\n          @if (!group().can_change_roles) {\n            <p class=\"sp-account__note\">{{ text.editorAddsMembers }}</p>\n          }\n        </div>\n      </div>\n      <form class=\"sp-account__form\" (submit)=\"$event.preventDefault(); submitAdd()\">\n        <hm-input\n          icon=\"search\"\n          autocomplete=\"off\"\n          [label]=\"text.search\"\n          [placeholder]=\"text.searchPlaceholder\"\n          [hint]=\"text.searchHint\"\n          [formControl]=\"searchControl\"\n        />\n\n        @if (searching()) {\n          <p class=\"sp-account__note\" role=\"status\">{{ text.searching }}</p>\n        } @else if (searchError()) {\n          <p class=\"sp-account__note sp-account__note--error\">{{ searchError() }}</p>\n        } @else if (results(); as list) {\n          @if (list.length) {\n            <ul class=\"sp-account__list sp-group__results\" [attr.aria-label]=\"text.search\">\n              @for (u of list; track u.id) {\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"sp-group__result\"\n                    [class.sp-group__result--selected]=\"selected()?.id === u.id\"\n                    [attr.aria-pressed]=\"selected()?.id === u.id\"\n                    [disabled]=\"isMember(u)\"\n                    (click)=\"pick(u)\"\n                  >\n                    <strong>{{ u.name || u.username }}</strong>\n                    <span class=\"sp-account__meta\">{{ u.username }}@if (u.email) { \u00B7 {{ u.email }} }@if (isMember(u)) { \u00B7 {{ text.alreadyMember }} }</span>\n                  </button>\n                </li>\n              }\n            </ul>\n          } @else {\n            <p class=\"sp-account__note\" role=\"status\">{{ text.noResults }}</p>\n          }\n        }\n\n        @if (group().can_change_roles) {\n          <div class=\"sp-account__field\">\n            <span class=\"sp-account__label\">{{ text.role }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"text.role\" [options]=\"roleOptions()\" [value]=\"newRole()\" (valueChange)=\"newRole.set($event)\" />\n          </div>\n        }\n\n        <div class=\"sp-account__actions\">\n          <hm-button type=\"submit\" emphasis=\"high\" icon=\"plus\" [disabled]=\"!selected()\" [loading]=\"submitting()\">{{ text.add }}</hm-button>\n          <hm-button emphasis=\"medium\" (clicked)=\"cancelAdd()\">{{ text.cancel }}</hm-button>\n        </div>\n      </form>\n    </section>\n  } @else {\n    <div class=\"sp-account__actions\">\n      <hm-button size=\"small\" emphasis=\"medium\" icon=\"plus\" (clicked)=\"startAdd()\">{{ text.addMember }}</hm-button>\n    </div>\n  }\n} @else {\n  <p class=\"sp-account__note\">{{ text.readOnly }}</p>\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\" [attr.aria-label]=\"group().name\">\n      @for (m of members(); track m.user_id) {\n        <li class=\"sp-account__item\" [class.sp-account__item--muted]=\"!m.enabled\">\n          <hm-account-avatar class=\"sp-group__avatar\" [name]=\"m.name || m.username\" [imageUrl]=\"m.picture\" />\n          <span class=\"sp-account__item-main\">\n            <span class=\"sp-account__item-title\">\n              <strong>{{ m.name || m.username }}</strong>\n              @if (isMe(m)) { <hm-tag color=\"info\" [name]=\"text.you\" /> }\n            </span>\n            <span class=\"sp-account__meta\">{{ m.username }}@if (m.email) { \u00B7 {{ m.email }} }</span>\n            @if (!canChangeRole(m)) {\n              <span class=\"sp-account__meta\">{{ roleLabel(m.role) }}</span>\n            }\n          </span>\n          @if (canChangeRole(m) || canRemove(m)) {\n            <span class=\"sp-account__item-actions\">\n              @if (canChangeRole(m)) {\n                <hm-select\n                  class=\"sp-group__role\"\n                  [label]=\"fmt(text.roleOf, { name: m.name || m.username })\"\n                  [labelHidden]=\"true\"\n                  [value]=\"m.role ?? ''\"\n                  [disabled]=\"busy() === m.user_id\"\n                  (valueChange)=\"changeRole(m, $event)\"\n                >\n                  @for (option of roleOptions(); track option.value) {\n                    <option [value]=\"option.value\">{{ option.label }}</option>\n                  }\n                </hm-select>\n              }\n              @if (canRemove(m)) {\n                @if (confirmingRemove() === m.user_id) {\n                  <hm-button size=\"small\" emphasis=\"medium\" (clicked)=\"cancelRemove()\">{{ text.cancel }}</hm-button>\n                }\n                <hm-button\n                  size=\"small\"\n                  intent=\"danger\"\n                  [emphasis]=\"confirmingRemove() === m.user_id ? 'high' : 'medium'\"\n                  [loading]=\"busy() === m.user_id\"\n                  (clicked)=\"remove(m)\"\n                >{{ confirmingRemove() === m.user_id ? text.confirmRemove : text.remove }}</hm-button>\n              }\n            </span>\n          }\n        </li>\n      } @empty {\n        <li class=\"sp-account__item sp-account__item--empty\">{{ text.empty }}</li>\n      }\n    </ul>\n    <div class=\"sp-account__list-footer\">\n      <span class=\"sp-account__note\">{{ countLabel() }}</span>\n    </div>\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", "@charset \"UTF-8\";.sp-group__avatar{flex:none}.sp-group__role{min-width:10rem}.sp-group__results{max-height:16rem;overflow-y:auto}.sp-group__results li+li{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-group__result{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-micro);width:100%;min-width:0;padding:var(--hm-space-xs) var(--hm-space-sm);border:0;background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;overflow-wrap:anywhere;cursor:pointer}.sp-group__result:hover:not(:disabled){background:var(--hm-hover)}.sp-group__result:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.sp-group__result--selected{background:var(--hm-accent-subtle)}.sp-group__result:disabled{color:var(--hm-muted);cursor:default}.sp-groups__item{display:flex;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);width:100%;min-width:0;padding:var(--hm-space-sm);border:0;background:transparent;color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}li+li .sp-groups__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-groups__item:hover{background:var(--hm-hover)}.sp-groups__item:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.sp-groups__chevron{flex:none;color:var(--hm-muted)}.sp-groups__back{display:flex}.sp-groups__heading{margin-block-end:var(--hm-space-xxxs)}@media(forced-colors:active){.sp-group__result--selected{outline:var(--hm-border-thin) solid Highlight;outline-offset:calc(var(--hm-border-thin) * -1)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: 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: 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: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "hm-select", inputs: ["value", "label", "labelHidden", "hint"], 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: MyGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-my-group', imports: [
+                        ReactiveFormsModule, AccountAvatarComponent, ButtonComponent, IconComponent, InputComponent, SegmentedControlComponent,
+                        SelectComponent, TagComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Incluir membro fica acima da lista: o bot\u00E3o, ou o painel de inclus\u00E3o aberto no lugar dele. -->\n@if (group().can_add) {\n  @if (adding()) {\n    <section class=\"sp-account__panel\" [attr.aria-labelledby]=\"ids + '-add'\">\n      <div class=\"sp-account__panel-head\">\n        <hm-icon shape=\"assign-user\" />\n        <div class=\"sp-account__panel-text\">\n          <h4 class=\"sp-account__title\" [id]=\"ids + '-add'\">{{ fmt(text.addHeading, { group: group().name }) }}</h4>\n          @if (!group().can_change_roles) {\n            <p class=\"sp-account__note\">{{ text.editorAddsMembers }}</p>\n          }\n        </div>\n      </div>\n      <form class=\"sp-account__form\" (submit)=\"$event.preventDefault(); submitAdd()\">\n        <hm-input\n          icon=\"search\"\n          autocomplete=\"off\"\n          [label]=\"text.search\"\n          [placeholder]=\"text.searchPlaceholder\"\n          [hint]=\"text.searchHint\"\n          [formControl]=\"searchControl\"\n        />\n\n        @if (searching()) {\n          <p class=\"sp-account__note\" role=\"status\">{{ text.searching }}</p>\n        } @else if (searchError()) {\n          <p class=\"sp-account__note sp-account__note--error\">{{ searchError() }}</p>\n        } @else if (results(); as list) {\n          @if (list.length) {\n            <ul class=\"sp-account__list sp-group__results\" [attr.aria-label]=\"text.search\">\n              @for (u of list; track u.id) {\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"sp-group__result\"\n                    [class.sp-group__result--selected]=\"selected()?.id === u.id\"\n                    [attr.aria-pressed]=\"selected()?.id === u.id\"\n                    [disabled]=\"isMember(u)\"\n                    (click)=\"pick(u)\"\n                  >\n                    <strong>{{ u.name || u.username }}</strong>\n                    <span class=\"sp-account__meta\">{{ u.username }}@if (u.email) { \u00B7 {{ u.email }} }@if (isMember(u)) { \u00B7 {{ text.alreadyMember }} }</span>\n                  </button>\n                </li>\n              }\n            </ul>\n          } @else {\n            <p class=\"sp-account__note\" role=\"status\">{{ text.noResults }}</p>\n          }\n        }\n\n        @if (group().can_change_roles) {\n          <div class=\"sp-account__field\">\n            <span class=\"sp-account__label\">{{ text.role }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"text.role\" [options]=\"roleOptions()\" [value]=\"newRole()\" (valueChange)=\"newRole.set($event)\" />\n          </div>\n        }\n\n        <div class=\"sp-account__actions\">\n          <hm-button type=\"submit\" emphasis=\"high\" icon=\"plus\" [disabled]=\"!selected()\" [loading]=\"submitting()\">{{ text.add }}</hm-button>\n          <hm-button emphasis=\"medium\" (clicked)=\"cancelAdd()\">{{ text.cancel }}</hm-button>\n        </div>\n      </form>\n    </section>\n  } @else {\n    <div class=\"sp-account__actions\">\n      <hm-button size=\"small\" emphasis=\"medium\" icon=\"plus\" (clicked)=\"startAdd()\">{{ text.addMember }}</hm-button>\n    </div>\n  }\n} @else {\n  <p class=\"sp-account__note\">{{ text.readOnly }}</p>\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\" [attr.aria-label]=\"group().name\">\n      @for (m of members(); track m.user_id) {\n        <li class=\"sp-account__item\" [class.sp-account__item--muted]=\"!m.enabled\">\n          <hm-account-avatar class=\"sp-group__avatar\" [name]=\"m.name || m.username\" [imageUrl]=\"m.picture\" />\n          <span class=\"sp-account__item-main\">\n            <span class=\"sp-account__item-title\">\n              <strong>{{ m.name || m.username }}</strong>\n              @if (isMe(m)) { <hm-tag color=\"info\" [name]=\"text.you\" /> }\n            </span>\n            <span class=\"sp-account__meta\">{{ m.username }}@if (m.email) { \u00B7 {{ m.email }} }</span>\n            @if (!canChangeRole(m)) {\n              <span class=\"sp-account__meta\">{{ roleLabel(m.role) }}</span>\n            }\n          </span>\n          @if (canChangeRole(m) || canRemove(m)) {\n            <span class=\"sp-account__item-actions\">\n              @if (canChangeRole(m)) {\n                <hm-select\n                  class=\"sp-group__role\"\n                  [label]=\"fmt(text.roleOf, { name: m.name || m.username })\"\n                  [labelHidden]=\"true\"\n                  [value]=\"m.role ?? ''\"\n                  [disabled]=\"busy() === m.user_id\"\n                  (valueChange)=\"changeRole(m, $event)\"\n                >\n                  @for (option of roleOptions(); track option.value) {\n                    <option [value]=\"option.value\">{{ option.label }}</option>\n                  }\n                </hm-select>\n              }\n              @if (canRemove(m)) {\n                @if (confirmingRemove() === m.user_id) {\n                  <hm-button size=\"small\" emphasis=\"medium\" (clicked)=\"cancelRemove()\">{{ text.cancel }}</hm-button>\n                }\n                <hm-button\n                  size=\"small\"\n                  intent=\"danger\"\n                  [emphasis]=\"confirmingRemove() === m.user_id ? 'high' : 'medium'\"\n                  [loading]=\"busy() === m.user_id\"\n                  (clicked)=\"remove(m)\"\n                >{{ confirmingRemove() === m.user_id ? text.confirmRemove : text.remove }}</hm-button>\n              }\n            </span>\n          }\n        </li>\n      } @empty {\n        <li class=\"sp-account__item sp-account__item--empty\">{{ text.empty }}</li>\n      }\n    </ul>\n    <div class=\"sp-account__list-footer\">\n      <span class=\"sp-account__note\">{{ countLabel() }}</span>\n    </div>\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", "@charset \"UTF-8\";.sp-group__avatar{flex:none}.sp-group__role{min-width:10rem}.sp-group__results{max-height:16rem;overflow-y:auto}.sp-group__results li+li{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-group__result{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-micro);width:100%;min-width:0;padding:var(--hm-space-xs) var(--hm-space-sm);border:0;background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;overflow-wrap:anywhere;cursor:pointer}.sp-group__result:hover:not(:disabled){background:var(--hm-hover)}.sp-group__result:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.sp-group__result--selected{background:var(--hm-accent-subtle)}.sp-group__result:disabled{color:var(--hm-muted);cursor:default}.sp-groups__item{display:flex;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);width:100%;min-width:0;padding:var(--hm-space-sm);border:0;background:transparent;color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}li+li .sp-groups__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-groups__item:hover{background:var(--hm-hover)}.sp-groups__item:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.sp-groups__chevron{flex:none;color:var(--hm-muted)}.sp-groups__back{display:flex}.sp-groups__heading{margin-block-end:var(--hm-space-xxxs)}@media(forced-colors:active){.sp-group__result--selected{outline:var(--hm-border-thin) solid Highlight;outline-offset:calc(var(--hm-border-thin) * -1)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
+function displayName(member) {
+    return member.name || member.username;
+}
+function errorText(err, fallback) {
+    const detail = err instanceof HttpErrorResponse ? err.error?.detail : undefined;
+    return detail || fallback;
+}
+/** `sub` do payload do token da sessão (só leitura, sem validar: serve para marcar "você" na lista). */
+function tokenSub(token) {
+    const payload = token?.split('.')[1];
+    if (!payload)
+        return null;
+    try {
+        const json = atob(payload.replace(/-/g, '+').replace(/_/g, '/').padEnd(Math.ceil(payload.length / 4) * 4, '='));
+        const sub = JSON.parse(json)['sub'];
+        return typeof sub === 'string' ? sub : null;
+    }
+    catch {
+        return null;
+    }
+}
+
+/**
+ * Seção "Grupos" do painel de configurações: primeiro a lista dos grupos desta aplicação de que a pessoa é membro (com
+ * a função dela e o crachá); escolher um abre a tela de membros dele, com "Voltar aos grupos" no topo. A tela escolhida
+ * vive só enquanto o painel está aberto (o painel desmonta ao fechar). Se o grupo aberto some da lista (a pessoa saiu
+ * dele, ou a lista foi relida sem ele), volta para a lista.
+ */
+class MyGroupsComponent {
+    constructor() {
+        this.groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.messages = inject(SPINE_MESSAGES);
+        this.text = this.messages.myGroups;
+        this.openId = signal(null, ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
+        /** Grupo aberto (tela de membros); null = a lista. */
+        this.open = computed(() => this.groups().find((g) => g.id === this.openId()) ?? null, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        // Grupo aberto que não está mais na lista: volta para a lista.
+        effect(() => {
+            const id = this.openId();
+            if (id && !this.groups().some((g) => g.id === id))
+                untracked(() => this.openId.set(null));
+        });
+    }
+    openGroup(group) {
+        this.openId.set(group.id);
+    }
+    back() {
+        this.openId.set(null);
+    }
+    /** "Sua função: Editor · Crachá: Operador" (ou "Grupo desativado" no lugar do crachá). */
+    summary(group) {
+        const role = groupRoleLabel(this.text, group.my_role);
+        const settings = this.messages.settings;
+        return group.enabled
+            ? formatMessage(settings.groupRole, { role, badge: group.type.name })
+            : formatMessage(settings.groupRoleDisabled, { role });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MyGroupsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: MyGroupsComponent, isStandalone: true, selector: "spine-my-groups", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (open(); as group) {\n  <!-- Tela de membros de um grupo: voltar no topo, depois o grupo e os membros (com \"Incluir membro\" acima da lista). -->\n  <div class=\"sp-groups__back\">\n    <hm-button size=\"small\" emphasis=\"minimal\" icon=\"arrow-left\" (clicked)=\"back()\">{{ text.back }}</hm-button>\n  </div>\n  <div class=\"sp-account__panel-text sp-groups__heading\">\n    <h4 class=\"sp-account__title\">{{ group.name }}</h4>\n    <p class=\"sp-account__note\">{{ summary(group) }}</p>\n  </div>\n  <spine-my-group [group]=\"group\" />\n} @else {\n  <!-- Lista dos grupos: cada um abre a tela de membros. -->\n  <div class=\"sp-account__list\">\n    <ul class=\"sp-account__items\" [attr.aria-label]=\"text.listLabel\">\n      @for (g of groups(); track g.id) {\n        <li>\n          <button type=\"button\" class=\"sp-groups__item\" (click)=\"openGroup(g)\">\n            <span class=\"sp-account__icon\" [class.sp-account__icon--accent]=\"g.enabled\"><hm-icon shape=\"employee-group\" /></span>\n            <span class=\"sp-account__item-main\">\n              <span class=\"sp-account__item-title\"><strong>{{ g.name }}</strong></span>\n              <span class=\"sp-account__meta\">{{ summary(g) }}</span>\n            </span>\n            <hm-icon class=\"sp-groups__chevron\" shape=\"angle-right\" />\n          </button>\n        </li>\n      }\n    </ul>\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", "@charset \"UTF-8\";.sp-group__avatar{flex:none}.sp-group__role{min-width:10rem}.sp-group__results{max-height:16rem;overflow-y:auto}.sp-group__results li+li{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-group__result{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-micro);width:100%;min-width:0;padding:var(--hm-space-xs) var(--hm-space-sm);border:0;background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;overflow-wrap:anywhere;cursor:pointer}.sp-group__result:hover:not(:disabled){background:var(--hm-hover)}.sp-group__result:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.sp-group__result--selected{background:var(--hm-accent-subtle)}.sp-group__result:disabled{color:var(--hm-muted);cursor:default}.sp-groups__item{display:flex;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);width:100%;min-width:0;padding:var(--hm-space-sm);border:0;background:transparent;color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}li+li .sp-groups__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-groups__item:hover{background:var(--hm-hover)}.sp-groups__item:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.sp-groups__chevron{flex:none;color:var(--hm-muted)}.sp-groups__back{display:flex}.sp-groups__heading{margin-block-end:var(--hm-space-xxxs)}@media(forced-colors:active){.sp-group__result--selected{outline:var(--hm-border-thin) solid Highlight;outline-offset:calc(var(--hm-border-thin) * -1)}}\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: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: MyGroupComponent, selector: "spine-my-group", inputs: ["group"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MyGroupsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-my-groups', imports: [ButtonComponent, IconComponent, MyGroupComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open(); as group) {\n  <!-- Tela de membros de um grupo: voltar no topo, depois o grupo e os membros (com \"Incluir membro\" acima da lista). -->\n  <div class=\"sp-groups__back\">\n    <hm-button size=\"small\" emphasis=\"minimal\" icon=\"arrow-left\" (clicked)=\"back()\">{{ text.back }}</hm-button>\n  </div>\n  <div class=\"sp-account__panel-text sp-groups__heading\">\n    <h4 class=\"sp-account__title\">{{ group.name }}</h4>\n    <p class=\"sp-account__note\">{{ summary(group) }}</p>\n  </div>\n  <spine-my-group [group]=\"group\" />\n} @else {\n  <!-- Lista dos grupos: cada um abre a tela de membros. -->\n  <div class=\"sp-account__list\">\n    <ul class=\"sp-account__items\" [attr.aria-label]=\"text.listLabel\">\n      @for (g of groups(); track g.id) {\n        <li>\n          <button type=\"button\" class=\"sp-groups__item\" (click)=\"openGroup(g)\">\n            <span class=\"sp-account__icon\" [class.sp-account__icon--accent]=\"g.enabled\"><hm-icon shape=\"employee-group\" /></span>\n            <span class=\"sp-account__item-main\">\n              <span class=\"sp-account__item-title\"><strong>{{ g.name }}</strong></span>\n              <span class=\"sp-account__meta\">{{ summary(g) }}</span>\n            </span>\n            <hm-icon class=\"sp-groups__chevron\" shape=\"angle-right\" />\n          </button>\n        </li>\n      }\n    </ul>\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", "@charset \"UTF-8\";.sp-group__avatar{flex:none}.sp-group__role{min-width:10rem}.sp-group__results{max-height:16rem;overflow-y:auto}.sp-group__results li+li{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-group__result{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-micro);width:100%;min-width:0;padding:var(--hm-space-xs) var(--hm-space-sm);border:0;background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;overflow-wrap:anywhere;cursor:pointer}.sp-group__result:hover:not(:disabled){background:var(--hm-hover)}.sp-group__result:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.sp-group__result--selected{background:var(--hm-accent-subtle)}.sp-group__result:disabled{color:var(--hm-muted);cursor:default}.sp-groups__item{display:flex;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm);width:100%;min-width:0;padding:var(--hm-space-sm);border:0;background:transparent;color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}li+li .sp-groups__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-groups__item:hover{background:var(--hm-hover)}.sp-groups__item:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.sp-groups__chevron{flex:none;color:var(--hm-muted)}.sp-groups__back{display:flex}.sp-groups__heading{margin-block-end:var(--hm-space-xxxs)}@media(forced-colors:active){.sp-group__result--selected{outline:var(--hm-border-thin) solid Highlight;outline-offset:calc(var(--hm-border-thin) * -1)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }] } });
+
 /** Dependências que valem mostrar em "Sobre" (as demais são detalhe de build). */
 // check-strings: off — nomes de produto, não se traduzem.
 const KEY_DEPENDENCIES = [
@@ -4080,6 +4413,10 @@ class SettingsPanelComponent {
         };
         /** Sem nenhuma linha visível a seção não aparece. */
         this.hasSessionsSection = Object.values(this.sessionsItems).some(Boolean);
+        // ── Grupos ──────────────────────────────────────────────────────────────────
+        /** Grupos desta aplicação de que a pessoa é membro (relidos a cada abertura); sem nenhum, a seção some. */
+        this.myGroupsService = inject(SpineMyGroupsService);
+        this.myGroups = this.myGroupsService.groups;
         // ── Recursos opcionais (SpineConfig.features) ──────────────────────────────
         this.idle = inject(SpineIdleService);
         this.startPageService = inject(SpineStartPageService);
@@ -4126,6 +4463,11 @@ class SettingsPanelComponent {
             if (!this.settings.isOpen())
                 this.confirming.set(null);
         });
+        // A cada abertura, relê os grupos da pessoa (alguém pode tê-la incluído, removido ou trocado a função dela).
+        effect(() => {
+            if (this.settings.isOpen())
+                untracked(() => void this.myGroupsService.refresh());
+        });
     }
     cancelConfirm() {
         this.confirming.set(null);
@@ -4283,17 +4625,17 @@ class SettingsPanelComponent {
             this.settings.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SettingsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SettingsPanelComponent, isStandalone: true, selector: "spine-settings-panel", ngImport: i0, template: "<!-- Montado s\u00F3 enquanto aberto: nada disto (lista de fusos, leitura do token...) custa no\n     carregamento de toda p\u00E1gina. -->\n@if (settings.isOpen()) {\n  <hm-settings-dialog\n    [heading]=\"text.heading\"\n    [open]=\"true\"\n    (openChange)=\"onOpenChange($event)\"\n    [activeSection]=\"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 }); }
+    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 Grupos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 grupos desta aplica\u00E7\u00E3o de que a pessoa \u00E9 membro (argos-admin /me/groups, relidos a cada abertura): a lista,\n         e escolhendo um, a tela de membros dele. Sem grupo nenhum, a se\u00E7\u00E3o n\u00E3o aparece. -->\n    @if (myGroups().length) {\n      <hm-settings-section [key]=\"keys.groups\" [label]=\"text.groups\" icon=\"employee-group\" [description]=\"text.groupsDescription\" [keywords]=\"text.groupsKeywords\">\n        <spine-my-groups [groups]=\"myGroups()\" />\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: MyGroupsComponent, selector: "spine-my-groups", inputs: ["groups"] }, { 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, AiAgentComponent, AccountActivityComponent, DefaultBadgeComponent, CheckboxComponent,
+                        NgComponentOutlet, AppTokensComponent, MyGroupsComponent, AiAgentComponent, AccountActivityComponent, DefaultBadgeComponent, CheckboxComponent,
                         AccountMfaComponent, AccountRecoveryCodesComponent, AccountSessionsComponent, SpineAccountSecurityScopeDirective,
                         AccountAvatarComponent, ButtonComponent, ComboboxComponent,
                         SegmentedControlComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent,
                         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"] }]
+                    ], 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 Grupos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 grupos desta aplica\u00E7\u00E3o de que a pessoa \u00E9 membro (argos-admin /me/groups, relidos a cada abertura): a lista,\n         e escolhendo um, a tela de membros dele. Sem grupo nenhum, a se\u00E7\u00E3o n\u00E3o aparece. -->\n    @if (myGroups().length) {\n      <hm-settings-section [key]=\"keys.groups\" [label]=\"text.groups\" icon=\"employee-group\" [description]=\"text.groupsDescription\" [keywords]=\"text.groupsKeywords\">\n        <spine-my-groups [groups]=\"myGroups()\" />\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. */
@@ -5243,8 +5585,9 @@ 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`). Os avisos ficam no `spine-notification` (`NotificationService`) e
- * no `hm-toast-stack` (`HermesToastService`), os dois montados aqui: o app não monta nenhum.
+ * do `@orfeu/angular`, vazio quando `online`). Todos os avisos (os do `NotificationService`,
+ * os do `SpineNoticesService` e os do próprio app) saem no `hm-toast-stack` (`HermesToastService`), montado 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,
@@ -5345,8 +5688,7 @@ class LayoutComponent {
         </div>
       </div>
     </div>
-    <spine-notification></spine-notification>
-    <!-- Avisos do HermesToastService (configurações, conta e segurança, auto-serviço…). Se o app também montar
+    <!-- Todos os avisos (respostas do servidor, avisos do app, configurações, 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 />
@@ -5358,7 +5700,7 @@ class LayoutComponent {
     <spine-onboarding-overlay></spine-onboarding-overlay>
     <!-- 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 }); }
+  `, 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: 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,
@@ -5374,7 +5716,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                         ToastStackComponent,
                         RouterOutlet,
                         ModalComponent$1,
-                        NotificationComponent,
                         SidePanelComponent,
                         OnboardingOverlayComponent,
                         ShortcutsCheatsheetComponent,
@@ -5407,8 +5748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
         </div>
       </div>
     </div>
-    <spine-notification></spine-notification>
-    <!-- Avisos do HermesToastService (configurações, conta e segurança, auto-serviço…). Se o app também montar
+    <!-- Todos os avisos (respostas do servidor, avisos do app, configurações, 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 />
@@ -5427,5 +5767,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, SpineMyGroupsService, SpineNewsComponent, SpineNewsService, SpineNoticesService, SpineSettingsService, SpineStartPageService, accountErrorCode, argosAccountApi, buildMcpConfig, effectiveIdleMinutes, findTourTarget, idleLimits, isInternalPath, provideSettingsSection, resolveSettingsSection, sanitizeSpineMarkdownHtml, stable };
 //# sourceMappingURL=trismegisto-spine-layout.mjs.map