@trismegisto/spine 3.3.3 → 3.3.5

package/fesm2022/{trismegisto-spine-layout-trismegisto-spine-layout-Clphrsgc.mjs → trismegisto-spine-layout-trismegisto-spine-layout-DiAfxIGP.mjs}

@@ -3,18 +3,19 @@ import { inject, ChangeDetectorRef, ChangeDetectionStrategy, Component, Injectio
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/router';
 import { RouterLink, Router, NavigationEnd, NavigationSkipped, RouterOutlet } from '@angular/router';
-import { firstValueFrom, filter, Subject, take, debounceTime, distinctUntilChanged } from 'rxjs';
-import { MenuButtonComponent, HermesThemeService, HERMES_THEME_CONFIG, HermesSidebarService, HermesToastService, IconComponent, ButtonComponent, SkeletonComponent, TextareaComponent, FloatingWindowComponent, IconButtonComponent, AccountAvatarComponent, BadgeComponent, PopoverComponent, PopoverTriggerDirective, HermesShortcutService, HeaderComponent as HeaderComponent$1, CommandPaletteComponent, createPersistedWorkspaceStore, HERMES_WORKSPACE_PERSISTENCE_CONFIG, findPanelTabs, SidebarComponent as SidebarComponent$1, SidebarNodeComponent, HermesI18nService, SegmentedControlComponent, ThemePickerComponent, AlertComponent, BreadcrumbComponent, DrawerComponent, ModalComponent, PaginatorComponent, RichTextComponent, SearchFieldComponent, ShortcutListComponent, TagComponent, CodeInputComponent, InputComponent, RadioComponent, CheckboxComponent, CodeViewerComponent, SelectComponent, AvatarGroupComponent, HERMES_SIDEBAR_CONFIG, ComboboxComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent, ToggletipComponent, TooltipDirective, LoadingSquareComponent, WorkspaceComponent, ToastStackComponent, MessageScrollerComponent, BubbleComponent, MessageComponent, MessageDividerComponent } from '@trismegisto/angular';
+import { firstValueFrom, filter, Subject, take, Subscription, debounceTime, distinctUntilChanged } from 'rxjs';
+import { MenuButtonComponent, HermesThemeService, HERMES_THEME_CONFIG, HermesSidebarService, HermesToastService, IconComponent, ButtonComponent, SkeletonComponent, TextareaComponent, FloatingWindowComponent, IconButtonComponent, AccountAvatarComponent, BadgeComponent, PopoverComponent, PopoverTriggerDirective, HermesShortcutService, HeaderComponent as HeaderComponent$1, CommandPaletteComponent, panelIdsInOrder, createPersistedWorkspaceStore, HERMES_WORKSPACE_PERSISTENCE_CONFIG, findPanelTabs, canSplitPanel, cyclicPanelNeighbor, ContextMenuDirective, SidebarComponent as SidebarComponent$1, SidebarNodeComponent, HermesI18nService, SegmentedControlComponent, ThemePickerComponent, AlertComponent, BreadcrumbComponent, DrawerComponent, ModalComponent, PaginatorComponent, RichTextComponent, SearchFieldComponent, ShortcutListComponent, TagComponent, CodeInputComponent, InputComponent, RadioComponent, CheckboxComponent, CodeViewerComponent, SelectComponent, AvatarGroupComponent, HERMES_SIDEBAR_CONFIG, ComboboxComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent, ToggletipComponent, TooltipDirective, LoadingSquareComponent, registerUnsavedChanges, HermesUnsavedChangesService, WorkspaceComponent, ToastStackComponent, SkipLinkComponent, MessageScrollerComponent, BubbleComponent, MessageComponent, MessageDividerComponent } from '@trismegisto/angular';
+import { HermesSidebarService as HermesSidebarService$1 } from '@trismegisto/angular/sidebar';
 import { ModalComponent as ModalComponent$1 } from '@trismegisto/spine/modal';
 import { SidePanelComponent } from '@trismegisto/spine/side-panel';
 import * as i2$1 from '@trismegisto/spine';
 import { SPINE_MESSAGES, SPINE_CONFIG, ThemeService, resolveSpineLogo, SpinePreferencesService, SpineQuickAccessService, DensityService, ThemePresetService, SPINE_ADMIN_API, SpineUserStorage, SPINE_USER_STORAGE_KEYS, spineRoutesOf, routerIdOf, SPINE_IDLE_OPTIONS, APP_PACKAGE_INFO, registerSpineBuiltinPage } from '@trismegisto/spine';
 import * as i2 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser, Location } from '@angular/common';
 import * as i1 from '@orfeu/angular/core';
 import { AuthorizationService, AUTH_CONFIG, ViewService, RealmAppsService } from '@orfeu/angular/core';
 import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
-import { urlPath, formatMessage, pluralMessage, tabUrl, HERMES_FONTS, HERMES_TEXT_SCALES, detectShortcutPlatform, formatShortcut, formatMessageHtml, weekdayNames, FALLBACK_FAMILY, isMessageContinuation } from '@trismegisto/primitives';
+import { urlPath, formatMessage, pluralMessage, detectShortcutPlatform, tabUrl, HERMES_FONTS, HERMES_TEXT_SCALES, formatShortcut, formatMessageHtml, weekdayNames, FALLBACK_FAMILY, findPanelTabs as findPanelTabs$1, isMessageContinuation } from '@trismegisto/primitives';
 import { NotificationService, AlertType } from '@trismegisto/spine/notification';
 import { resolveEffectiveRouteChain, ComponentDistributorService, componentRouterId, LoggerService } from '@trismegisto/spine/routing';
 import * as i1$1 from '@angular/forms';
@@ -334,8 +335,8 @@ const READY_TIMEOUT_MS = 2000;
 const SETUP_DONE_SUFFIX = '_setup_done';
 /**
  * Chaves que são da pessoa, não do app: com o Argos que tem `{api}/preferences/global`, vão no documento global e
- * valem em todos os apps (escolhidas uma vez). O resto (menu lateral, atalhos, inatividade, tela inicial, avisos,
- * favoritos) continua no documento do app.
+ * valem em todos os apps (escolhidas uma vez). O resto (menu lateral, dividir abas, atalhos, inatividade, tela inicial,
+ * avisos, favoritos) continua no documento do app.
  */
 const SPINE_GLOBAL_PREFERENCE_KEYS = [
     'themeMode', 'family', 'density', 'font', 'textScale', 'motion', 'language', 'timeZone', 'hourCycle', 'weekStart',
@@ -343,8 +344,8 @@ const SPINE_GLOBAL_PREFERENCE_KEYS = [
 /**
  * Preferências na conta (`SpineFeatures.accountPreferences`): espelha no Argos (`GET/PUT {api}/preferences`, por
  * usuário e aplicação) o que o painel de configurações guarda no navegador — tema, cor, densidade, fonte, menu
- * lateral, idioma, fuso, relógio, primeiro dia da semana, tamanho do texto, animações, atalhos de tecla única,
- * inatividade, tela inicial, tipos de aviso e favoritos. As telas Aparência, Região etc. não mudam: o
+ * lateral, dividir abas, idioma, fuso, relógio, primeiro dia da semana, tamanho do texto, animações, atalhos de tecla
+ * única, inatividade, tela inicial, tipos de aviso e favoritos. As telas Aparência, Região etc. não mudam: o
  * armazenamento local continua sendo a fonte de cada tela, e este serviço só sincroniza.
  *
  * - No início da sessão (`start()`, chamado pelo layout e pelo `/callback`), lê a conta e aplica o que estiver lá
@@ -400,6 +401,7 @@ class SpineAccountPreferencesService {
                 startPage: p.startPage(),
                 notices: { ...p.noticeTypes() },
                 browserNotices: p.browserNotices(),
+                splitTabs: p.splitTabs(),
                 favorites: this.quickAccess.favorites().slice(0, MAX_FAVORITES).map((f) => ({ ...f })),
             };
         }, ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
@@ -553,6 +555,8 @@ class SpineAccountPreferencesService {
         // O aviso do navegador depende da permissão DESTE navegador: a conta só desliga, nunca liga sozinha.
         if (doc.browserNotices === false && p.browserNotices())
             p.setBrowserNotices(false);
+        if (typeof doc.splitTabs === 'boolean' && doc.splitTabs !== p.splitTabs())
+            p.setSplitTabs(doc.splitTabs);
         if (Array.isArray(doc.favorites)) {
             const remote = doc.favorites;
             const ids = new Set(remote.map((f) => f?.id));
@@ -1406,7 +1410,7 @@ class SpineRatingFormComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.spine-rating{display:flex;flex-direction:column;gap:var(--hm-space-sm);inline-size:min(22rem,100%)}.spine-rating__lead{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm, 14px)}.spine-rating__about{margin:calc(-1 * var(--hm-space-xs)) 0 0;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-xs, 12px);text-overflow:ellipsis;white-space:nowrap}.spine-rating__score{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-xxs, 4px)}.spine-rating__label{color:var(--hm-text);font-size:var(--hm-font-size-sm, 14px);font-weight:var(--hm-font-weight-semibold, 600)}.spine-rating__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs, 12px)}.spine-rating__error{margin:0;color:var(--hm-danger);font-size:var(--hm-font-size-xs, 12px)}.spine-rating__previous{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs, 12px)}.spine-rating__actions{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: SkeletonComponent, selector: "hm-skeleton", inputs: ["shape", "count", "label"] }, { kind: "component", type: TextareaComponent, selector: "hm-textarea", inputs: ["value", "label", "hint", "placeholder", "maxLength", "rows", "autoGrow", "labelHidden", "loading", "maxRows", "submitKey"], outputs: ["valueChange", "submitted"] }, { kind: "component", type: SpineRatingStarsComponent, selector: "spine-rating-stars", inputs: ["value", "readonly", "showValue", "showName", "size", "label", "labelledBy", "describedBy", "invalid"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.spine-rating{display:flex;flex-direction:column;gap:var(--hm-space-sm);inline-size:min(22rem,100%)}.spine-rating__lead{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm, 14px)}.spine-rating__about{margin:calc(-1 * var(--hm-space-xs)) 0 0;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-xs, 12px);text-overflow:ellipsis;white-space:nowrap}.spine-rating__score{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-xxs, 4px)}.spine-rating__label{color:var(--hm-text);font-size:var(--hm-font-size-sm, 14px);font-weight:var(--hm-font-weight-semibold, 600)}.spine-rating__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs, 12px)}.spine-rating__error{margin:0;color:var(--hm-danger);font-size:var(--hm-font-size-xs, 12px)}.spine-rating__previous{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs, 12px)}.spine-rating__actions{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: SkeletonComponent, selector: "hm-skeleton", inputs: ["shape", "count", "label"] }, { kind: "component", type: TextareaComponent, selector: "hm-textarea", inputs: ["value", "label", "hint", "placeholder", "maxLength", "rows", "autoGrow", "labelHidden", "loading", "maxRows", "submitKey", "mentionCandidates", "mentionTrigger", "texts"], outputs: ["valueChange", "submitted", "mentioned"] }, { kind: "component", type: SpineRatingStarsComponent, selector: "spine-rating-stars", inputs: ["value", "readonly", "showValue", "showName", "size", "label", "labelledBy", "describedBy", "invalid"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineRatingFormComponent, decorators: [{
             type: Component,
@@ -1803,7 +1807,7 @@ class SpineInboxButtonComponent {
         }
       </hm-popover>
     }
-  `, isInline: true, styles: [":host{display:contents}.spine-inbox{position:relative;display:inline-flex}.spine-inbox__badge{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none;transform:translate(25%,-15%)}.spine-inbox__list{display:flex;flex-direction:column;inline-size:min(21rem,calc(100vw - 4rem));max-block-size:min(28rem,70dvh);margin:0;padding:0;overflow-x:hidden;overflow-y:auto;list-style:none}.spine-inbox__item{display:flex;gap:var(--hm-space-sm);inline-size:100%;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:0;border-radius:var(--hm-radius);background:none;color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}.spine-inbox__item:hover{background:var(--hm-hover)}.spine-inbox__item:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:calc(var(--hm-border-thin) * -1)}.spine-inbox__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;border-radius:50%;background:var(--hm-accent-subtle);color:var(--hm-accent)}.spine-inbox__text{display:flex;flex:1;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.spine-inbox__source{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.spine-inbox__title{overflow:hidden;font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold);text-overflow:ellipsis;white-space:nowrap}.spine-inbox__body{display:-webkit-box;overflow:hidden;color:var(--hm-text);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.spine-inbox__meta{display:flex;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.spine-inbox__empty{margin:0;padding-block:var(--hm-space-sm);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}\n"], dependencies: [{ kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading"] }, { kind: "component", type: BadgeComponent, selector: "hm-badge", inputs: ["value", "max", "dot", "intent", "label"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: IconButtonComponent, selector: "hm-icon-button", inputs: ["label", "icon", "solid", "iconDirection", "emphasis", "intent", "size", "disabled", "toggle", "pressed", "keyShortcuts"], outputs: ["pressedChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: PopoverComponent, selector: "hm-popover", inputs: ["open", "heading", "headingLevel", "label", "side", "align", "arrow", "closable", "closeLabel", "closeOnOutsideClick", "openOn", "openDelay", "closeDelay"], outputs: ["openChange"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[hmPopoverTrigger]", inputs: ["hmPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:contents}.spine-inbox{position:relative;display:inline-flex}.spine-inbox__badge{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none;transform:translate(25%,-15%)}.spine-inbox__list{display:flex;flex-direction:column;inline-size:min(21rem,calc(100vw - 4rem));max-block-size:min(28rem,70dvh);margin:0;padding:0;overflow-x:hidden;overflow-y:auto;list-style:none}.spine-inbox__item{display:flex;gap:var(--hm-space-sm);inline-size:100%;padding:var(--hm-space-xs) var(--hm-space-xxxs);border:0;border-radius:var(--hm-radius);background:none;color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}.spine-inbox__item:hover{background:var(--hm-hover)}.spine-inbox__item:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:calc(var(--hm-border-thin) * -1)}.spine-inbox__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;border-radius:50%;background:var(--hm-accent-subtle);color:var(--hm-accent)}.spine-inbox__text{display:flex;flex:1;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.spine-inbox__source{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.spine-inbox__title{overflow:hidden;font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold);text-overflow:ellipsis;white-space:nowrap}.spine-inbox__body{display:-webkit-box;overflow:hidden;color:var(--hm-text);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.spine-inbox__meta{display:flex;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.spine-inbox__empty{margin:0;padding-block:var(--hm-space-sm);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}\n"], dependencies: [{ kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading", "presence", "texts"] }, { kind: "component", type: BadgeComponent, selector: "hm-badge", inputs: ["value", "max", "dot", "intent", "label"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: IconButtonComponent, selector: "hm-icon-button", inputs: ["label", "icon", "solid", "iconDirection", "emphasis", "intent", "size", "disabled", "toggle", "pressed", "keyShortcuts"], outputs: ["pressedChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: PopoverComponent, selector: "hm-popover", inputs: ["open", "heading", "headingLevel", "label", "describedBy", "side", "align", "arrow", "closable", "closeLabel", "closeOnOutsideClick", "openOn", "openDelay", "closeDelay"], outputs: ["openChange"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[hmPopoverTrigger]", inputs: ["hmPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineInboxButtonComponent, decorators: [{
             type: Component,
@@ -1856,7 +1860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
 const LOGOUT_FAILED_SECONDS = 8;
 /**
  * Saída da sessão pelo shell: todo botão/atalho de sair do spine passa por aqui (menu do perfil, painel de
- * configurações, `Mod+Shift+L`, tela `/blocked`).
+ * configurações, tela `/blocked`).
  *
  * - Assina `logoutFailed$` do `@orfeu/angular` (1.3.x) uma vez só: quando o logout no Argos falha (a lib repete uma
  *   vez e mantém a sessão), mostra o aviso de erro `session.logoutFailed` (`hm-alert` de erro, `role="alert"`). Vale
@@ -2009,14 +2013,17 @@ const FAVORITE_DISPLAY_KEYS = 'G 1…9';
  * Atalhos de teclado globais do sistema, sobre o `HermesShortcutService` da lib (um listener só,
  * sequência `G H`, conflito, campo editável, interruptor de tecla única da WCAG 2.1.4).
  *
- * `setActions` registra os atalhos do shell: `G H` (Home), `G 1`…`G 9` (favoritos), `Mod+,`
- * (configurações), `Mod+.` (tema), `Mod+Shift+F` (tela cheia), `Mod+Shift+L` (sair) e `?` (painel
- * de atalhos, via `help$`). Os combos com `Mod` valem também com o foco num campo; `G …` e `?`, não.
+ * `setActions` registra os atalhos do shell: `G H` (Home), `G 1`…`G 9` (favoritos), `G T` (tema), `Mod+B` (menu
+ * lateral), `Mod+,` (configurações) e `?` (painel de atalhos, via `help$`). `Mod+,` vale também com o foco num campo;
+ * os demais, não (`Mod+B` num editor continua sendo negrito).
+ *
+ * Sem atalho de propósito: sair (um deslize perderia o que estava sendo digitado; fica no menu do perfil) e tela cheia
+ * (o navegador já tem `F11`, e o botão fica no cabeçalho).
  *
  * O painel (`spine-shortcuts-cheatsheet` e a seção Atalhos das configurações) usa o
  * `hm-shortcut-list` com `panelItems()`: tudo o que está registrado no `HermesShortcutService`
  * (inclusive o que o app liga com `[hmShortcut]`) mais o que o spine só exibe e outra peça dispara
- * (`Mod+K` do `hm-header`, `Alt+←/→` do navegador, `Esc` dos diálogos).
+ * (`Mod+K` e `/` do `hm-header`, voltar/avançar do navegador, `Esc` dos diálogos).
  */
 class ShortcutService {
     constructor() {
@@ -2052,10 +2059,9 @@ class ShortcutService {
         return [
             { keys: ['G H'], describe: () => t.goHome, group: 'navigation', handler: () => this.navigate('/home') },
             { keys: FAVORITE_KEYS, describe: () => t.goFavorite, group: 'navigation', handler: (e) => this.goToFavorite(e) },
+            { keys: ['Mod+B'], describe: () => t.toggleSidebar, group: 'navigation', handler: () => this.call(this.actions.toggleSidebar) },
             { keys: ['Mod+,'], describe: () => t.openSettings, group: 'actions', allowInInputs: true, handler: () => this.call(this.actions.openSettings) },
-            { keys: ['Mod+.'], describe: () => t.toggleTheme, group: 'actions', allowInInputs: true, handler: () => this.call(this.actions.toggleTheme) },
-            { keys: ['Mod+Shift+F'], describe: () => t.fullscreen, group: 'actions', allowInInputs: true, handler: () => this.call(this.actions.toggleFullscreen) },
-            { keys: ['Mod+Shift+L'], describe: () => t.logout, group: 'actions', allowInInputs: true, handler: () => this.call(this.actions.logout) },
+            { keys: ['G T'], describe: () => t.toggleTheme, group: 'actions', handler: () => this.call(this.actions.toggleTheme) },
             { keys: ['?'], describe: () => t.showHelp, group: 'general', handler: () => this.help$.next() },
         ];
     }
@@ -2063,8 +2069,9 @@ class ShortcutService {
     displayOnly() {
         const t = this.text;
         return [
-            { keys: 'Mod+K', description: t.openSearch, group: 'navigation' },
-            { keys: ['Alt+Left', 'Alt+Right'], description: t.history, group: 'navigation' },
+            { keys: ['Mod+K', '/'], description: t.openSearch, group: 'navigation' },
+            // O atalho é do navegador, e no Mac ele é outro.
+            { keys: detectShortcutPlatform() === 'mac' ? ['Mod+[', 'Mod+]'] : ['Alt+Left', 'Alt+Right'], description: t.history, group: 'navigation' },
             { keys: 'Esc', description: t.closeOverlay, group: 'general' },
         ];
     }
@@ -2329,7 +2336,7 @@ class HeaderComponent {
         }
         return out;
     }
-    /** Chamado pelo `(searchRequested)` do `hm-header` (clique no campo ou `Ctrl K`, já tratado por ele): abre a paleta. */
+    /** Chamado pelo `(searchRequested)` do `hm-header` (clique no campo, `Ctrl K` ou `/`, já tratados por ele): abre a paleta. */
     onSearchRequested() {
         this.searchCommands = this.buildSearchCommands();
         this.quickOpen = true;
@@ -2408,7 +2415,7 @@ class HeaderComponent {
         catch { /* storage cheio/indisponível */ }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.AuthorizationService }, { token: i2$1.ThemeService }, { token: i2$1.ThemePresetService }, { token: i2$1.DensityService }, { token: i1.ViewService }, { token: i3.Router }, { token: ShortcutService }, { token: SPINE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: HeaderComponent, isStandalone: true, selector: "spine-header", ngImport: i0, template: "<hm-header [class.header-blocked]=\"headerBlocked\" (searchRequested)=\"onSearchRequested()\">\n    <div *ngIf=\"headerBlocked\" class=\"header-overlay\"></div>\n\n    <spine-app-launcher></spine-app-launcher>\n\n    <!-- Marca: logo do app (SpineConfig.logo, padr\u00E3o assets/images/logo.svg) + SpineConfig.appName,\n         levando \u00E0 primeira rota naveg\u00E1vel. Ver SpineBrandComponent. -->\n    <spine-brand [homeRoute]=\"homeRoute\" [label]=\"text.home\" />\n\n    <div actions class=\"h-right\">\n        <!-- central de notifica\u00E7\u00F5es: o sino, com as novidades das fontes registradas (sem fonte, n\u00E3o aparece) -->\n        <spine-inbox-button />\n\n        <!-- tema claro/escuro -->\n        <hm-icon-button emphasis=\"subtle\" (clicked)=\"setTheme(themeService.current == 'light' ? 'dark' : 'light')\"\n            [icon]=\"themeService.current == 'light' ? 'moon' : 'sun'\"\n            [label]=\"themeService.current == 'light' ? text.themeDark : text.themeLight\">\n        </hm-icon-button>\n\n        <!-- densidade -->\n        <hm-icon-button emphasis=\"subtle\" (clicked)=\"setDensity()\"\n            [icon]=\"isCompactDensity ? 'density-comfortable' : 'density-compact'\"\n            [label]=\"isCompactDensity ? text.densityComfortable : text.densityCompact\">\n        </hm-icon-button>\n\n        <!-- Avaliar o {app} (SpineFeatures.ratings): a estrela abre o di\u00E1logo e fica cheia depois de avaliar. Toma o\n             lugar do bot\u00E3o de tela cheia (o atalho de teclado continua); sem avalia\u00E7\u00E3o, a tela cheia volta aqui. -->\n        @if (showFullscreenButton) {\n            <hm-icon-button emphasis=\"subtle\" (clicked)=\"toggleFullscreen()\"\n                [icon]=\"isFullscreen ? 'shrink' : 'resize'\"\n                [label]=\"isFullscreen ? text.exitFullscreen : text.fullscreen\">\n            </hm-icon-button>\n        } @else {\n            <spine-rate-app-button />\n        }\n\n        <span class=\"h-divider\" aria-hidden=\"true\"></span>\n\n        <!-- perfil: crach\u00E1, ajuda, tema e sair ficam dentro do menu -->\n        <hm-menu-button class=\"h-profile\" [label]=\"profile.name ?? text.user\" align=\"end\" [items]=\"profileMenuItems\" (chosen)=\"onProfileMenuChosen($event)\">\n            <hm-account-avatar [name]=\"profile.name ?? text.user\" [imageUrl]=\"profile.picture\"></hm-account-avatar>\n            <span class=\"h-profile-info\">\n                <span class=\"h-profile-name\">{{ profile.name ?? text.user }}</span>\n                <span class=\"h-profile-role\" *ngIf=\"badge\">{{ badge?.name }}</span>\n            </span>\n        </hm-menu-button>\n    </div>\n</hm-header>\n\n<!-- Busca global: paleta ancorada logo abaixo do cabe\u00E7alho. Campo vazio = favoritos, abertos h\u00E1 pouco e\n     m\u00F3dulos; com texto, busca em todas as telas. Setas/Enter navegam, Esc fecha. -->\n<hm-command-palette\n  [(open)]=\"quickOpen\"\n  [commands]=\"searchCommands\"\n  [browseGroups]=\"searchBrowse\"\n  [groupIcons]=\"searchIcons\"\n  [label]=\"text.search\"\n  [placeholder]=\"text.searchPlaceholder\"\n/>\n\n<!-- A janela de avalia\u00E7\u00E3o (flutuante, canto inferior direito): \"Avaliar o {app}\" da estrela do cabe\u00E7alho e de\n     Configura\u00E7\u00F5es \u203A Sobre, e \"Avaliar esta tela\" da barra da p\u00E1gina (SpineFeatures.ratings). S\u00F3 desenha com o recurso\n     ligado e aberta. -->\n<spine-rating-window />\n", styles: ["@charset \"UTF-8\";:host{display:contents}.header-overlay{position:absolute;inset:0;z-index:9999;cursor:not-allowed}.h-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:40px;min-width:40px;padding:0 10px;border:none;background:transparent;cursor:pointer;border-radius:9px;text-decoration:none;color:var(--hm-navbar-text);outline:none}.h-btn:focus-visible,.h-btn:hover{background:var(--hm-navbar-hover)}.h-btn.active{background:var(--hm-navbar-hover)}.h-right{display:flex;align-items:center;gap:var(--hm-header-action-gap)}.h-divider{width:1px;height:24px;margin:0 4px;background:var(--hm-navbar-hover)}.h-profile{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 4px 0 2px}.h-profile hm-account-avatar{background:color-mix(in srgb,var(--hm-navbar-text) 18%,transparent);color:var(--hm-navbar-text)}.h-profile-info{display:flex;flex-direction:column;min-width:0;max-width:140px;line-height:1.2;text-align:left}.h-profile-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.h-profile-role{color:color-mix(in srgb,var(--hm-navbar-text) 65%,transparent);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent$1, selector: "hm-header", inputs: ["searchPlaceholder", "searchLabel"], outputs: ["searchRequested"] }, { kind: "component", type: IconButtonComponent, selector: "hm-icon-button", inputs: ["label", "icon", "solid", "iconDirection", "emphasis", "intent", "size", "disabled", "toggle", "pressed", "keyShortcuts"], outputs: ["pressedChange", "clicked"] }, { kind: "component", type: MenuButtonComponent, selector: "hm-menu-button", inputs: ["label", "icon", "items", "showArrow", "align", "side", "size", "shape", "layer", "closeOnCheck", "disabled"], outputs: ["chosen", "checkedChange"] }, { kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading"] }, { kind: "component", type: CommandPaletteComponent, selector: "hm-command-palette", inputs: ["open", "commands", "shortcut", "label", "placeholder", "recentLimit", "recentIds", "closeOnRun", "browseGroups", "groupIcons"], outputs: ["openChange", "recentIdsChange", "executed"] }, { kind: "component", type: AppLauncherComponent, selector: "spine-app-launcher" }, { kind: "component", type: SpineBrandComponent, selector: "spine-brand", inputs: ["homeRoute", "label"] }, { kind: "component", type: SpineRatingWindowComponent, selector: "spine-rating-window" }, { kind: "component", type: SpineRateAppButtonComponent, selector: "spine-rate-app-button" }, { kind: "component", type: SpineInboxButtonComponent, selector: "spine-inbox-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: HeaderComponent, isStandalone: true, selector: "spine-header", ngImport: i0, template: "<hm-header [class.header-blocked]=\"headerBlocked\" (searchRequested)=\"onSearchRequested()\">\n    <div *ngIf=\"headerBlocked\" class=\"header-overlay\"></div>\n\n    <spine-app-launcher></spine-app-launcher>\n\n    <!-- Marca: logo do app (SpineConfig.logo, padr\u00E3o assets/images/logo.svg) + SpineConfig.appName,\n         levando \u00E0 primeira rota naveg\u00E1vel. Ver SpineBrandComponent. -->\n    <spine-brand [homeRoute]=\"homeRoute\" [label]=\"text.home\" />\n\n    <div actions class=\"h-right\">\n        <!-- central de notifica\u00E7\u00F5es: o sino, com as novidades das fontes registradas (sem fonte, n\u00E3o aparece) -->\n        <spine-inbox-button />\n\n        <!-- tema claro/escuro -->\n        <hm-icon-button emphasis=\"subtle\" (clicked)=\"setTheme(themeService.current == 'light' ? 'dark' : 'light')\"\n            [icon]=\"themeService.current == 'light' ? 'moon' : 'sun'\"\n            [label]=\"themeService.current == 'light' ? text.themeDark : text.themeLight\">\n        </hm-icon-button>\n\n        <!-- densidade -->\n        <hm-icon-button emphasis=\"subtle\" (clicked)=\"setDensity()\"\n            [icon]=\"isCompactDensity ? 'density-comfortable' : 'density-compact'\"\n            [label]=\"isCompactDensity ? text.densityComfortable : text.densityCompact\">\n        </hm-icon-button>\n\n        <!-- Avaliar o {app} (SpineFeatures.ratings): a estrela abre o di\u00E1logo e fica cheia depois de avaliar. Toma o\n             lugar do bot\u00E3o de tela cheia (o atalho de teclado continua); sem avalia\u00E7\u00E3o, a tela cheia volta aqui. -->\n        @if (showFullscreenButton) {\n            <hm-icon-button emphasis=\"subtle\" (clicked)=\"toggleFullscreen()\"\n                [icon]=\"isFullscreen ? 'shrink' : 'resize'\"\n                [label]=\"isFullscreen ? text.exitFullscreen : text.fullscreen\">\n            </hm-icon-button>\n        } @else {\n            <spine-rate-app-button />\n        }\n\n        <span class=\"h-divider\" aria-hidden=\"true\"></span>\n\n        <!-- perfil: crach\u00E1, ajuda, tema e sair ficam dentro do menu -->\n        <hm-menu-button class=\"h-profile\" [label]=\"profile.name ?? text.user\" align=\"end\" [items]=\"profileMenuItems\" (chosen)=\"onProfileMenuChosen($event)\">\n            <hm-account-avatar [name]=\"profile.name ?? text.user\" [imageUrl]=\"profile.picture\"></hm-account-avatar>\n            <span class=\"h-profile-info\">\n                <span class=\"h-profile-name\">{{ profile.name ?? text.user }}</span>\n                <span class=\"h-profile-role\" *ngIf=\"badge\">{{ badge?.name }}</span>\n            </span>\n        </hm-menu-button>\n    </div>\n</hm-header>\n\n<!-- Busca global: paleta ancorada logo abaixo do cabe\u00E7alho. Campo vazio = favoritos, abertos h\u00E1 pouco e\n     m\u00F3dulos; com texto, busca em todas as telas. Setas/Enter navegam, Esc fecha. -->\n<hm-command-palette\n  [(open)]=\"quickOpen\"\n  [commands]=\"searchCommands\"\n  [browseGroups]=\"searchBrowse\"\n  [groupIcons]=\"searchIcons\"\n  [label]=\"text.search\"\n  [placeholder]=\"text.searchPlaceholder\"\n/>\n\n<!-- A janela de avalia\u00E7\u00E3o (flutuante, canto inferior direito): \"Avaliar o {app}\" da estrela do cabe\u00E7alho e de\n     Configura\u00E7\u00F5es \u203A Sobre, e \"Avaliar esta tela\" da barra da p\u00E1gina (SpineFeatures.ratings). S\u00F3 desenha com o recurso\n     ligado e aberta. -->\n<spine-rating-window />\n", styles: ["@charset \"UTF-8\";:host{display:contents}.header-overlay{position:absolute;inset:0;z-index:9999;cursor:not-allowed}.h-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:40px;min-width:40px;padding:0 10px;border:none;background:transparent;cursor:pointer;border-radius:9px;text-decoration:none;color:var(--hm-navbar-text);outline:none}.h-btn:focus-visible,.h-btn:hover{background:var(--hm-navbar-hover)}.h-btn.active{background:var(--hm-navbar-hover)}.h-right{display:flex;align-items:center;gap:var(--hm-header-action-gap)}.h-divider{width:1px;height:24px;margin:0 4px;background:var(--hm-navbar-hover)}.h-profile{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 4px 0 2px}.h-profile hm-account-avatar{background:color-mix(in srgb,var(--hm-navbar-text) 18%,transparent);color:var(--hm-navbar-text)}.h-profile-info{display:flex;flex-direction:column;min-width:0;max-width:140px;line-height:1.2;text-align:left}.h-profile-name{font-size:var(--hm-font-size-label);font-weight:var(--hm-font-weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.h-profile-role{color:color-mix(in srgb,var(--hm-navbar-text) 65%,transparent);font-size:var(--hm-font-size-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent$1, selector: "hm-header", inputs: ["searchPlaceholder", "searchLabel"], outputs: ["searchRequested"] }, { kind: "component", type: IconButtonComponent, selector: "hm-icon-button", inputs: ["label", "icon", "solid", "iconDirection", "emphasis", "intent", "size", "disabled", "toggle", "pressed", "keyShortcuts"], outputs: ["pressedChange", "clicked"] }, { kind: "component", type: MenuButtonComponent, selector: "hm-menu-button", inputs: ["label", "icon", "items", "showArrow", "align", "side", "size", "shape", "layer", "closeOnCheck", "disabled"], outputs: ["chosen", "checkedChange"] }, { kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading", "presence", "texts"] }, { kind: "component", type: CommandPaletteComponent, selector: "hm-command-palette", inputs: ["open", "commands", "shortcut", "label", "placeholder", "recentLimit", "recentIds", "closeOnRun", "browseGroups", "groupIcons"], outputs: ["openChange", "recentIdsChange", "executed"] }, { kind: "component", type: AppLauncherComponent, selector: "spine-app-launcher" }, { kind: "component", type: SpineBrandComponent, selector: "spine-brand", inputs: ["homeRoute", "label"] }, { kind: "component", type: SpineRatingWindowComponent, selector: "spine-rating-window" }, { kind: "component", type: SpineRateAppButtonComponent, selector: "spine-rate-app-button" }, { kind: "component", type: SpineInboxButtonComponent, selector: "spine-inbox-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -2416,7 +2423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                         CommonModule,
                         HeaderComponent$1, IconButtonComponent, IconComponent, MenuButtonComponent, AccountAvatarComponent, CommandPaletteComponent,
                         AppLauncherComponent, SpineBrandComponent, SpineRatingWindowComponent, SpineRateAppButtonComponent, SpineInboxButtonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hm-header [class.header-blocked]=\"headerBlocked\" (searchRequested)=\"onSearchRequested()\">\n    <div *ngIf=\"headerBlocked\" class=\"header-overlay\"></div>\n\n    <spine-app-launcher></spine-app-launcher>\n\n    <!-- Marca: logo do app (SpineConfig.logo, padr\u00E3o assets/images/logo.svg) + SpineConfig.appName,\n         levando \u00E0 primeira rota naveg\u00E1vel. Ver SpineBrandComponent. -->\n    <spine-brand [homeRoute]=\"homeRoute\" [label]=\"text.home\" />\n\n    <div actions class=\"h-right\">\n        <!-- central de notifica\u00E7\u00F5es: o sino, com as novidades das fontes registradas (sem fonte, n\u00E3o aparece) -->\n        <spine-inbox-button />\n\n        <!-- tema claro/escuro -->\n        <hm-icon-button emphasis=\"subtle\" (clicked)=\"setTheme(themeService.current == 'light' ? 'dark' : 'light')\"\n            [icon]=\"themeService.current == 'light' ? 'moon' : 'sun'\"\n            [label]=\"themeService.current == 'light' ? text.themeDark : text.themeLight\">\n        </hm-icon-button>\n\n        <!-- densidade -->\n        <hm-icon-button emphasis=\"subtle\" (clicked)=\"setDensity()\"\n            [icon]=\"isCompactDensity ? 'density-comfortable' : 'density-compact'\"\n            [label]=\"isCompactDensity ? text.densityComfortable : text.densityCompact\">\n        </hm-icon-button>\n\n        <!-- Avaliar o {app} (SpineFeatures.ratings): a estrela abre o di\u00E1logo e fica cheia depois de avaliar. Toma o\n             lugar do bot\u00E3o de tela cheia (o atalho de teclado continua); sem avalia\u00E7\u00E3o, a tela cheia volta aqui. -->\n        @if (showFullscreenButton) {\n            <hm-icon-button emphasis=\"subtle\" (clicked)=\"toggleFullscreen()\"\n                [icon]=\"isFullscreen ? 'shrink' : 'resize'\"\n                [label]=\"isFullscreen ? text.exitFullscreen : text.fullscreen\">\n            </hm-icon-button>\n        } @else {\n            <spine-rate-app-button />\n        }\n\n        <span class=\"h-divider\" aria-hidden=\"true\"></span>\n\n        <!-- perfil: crach\u00E1, ajuda, tema e sair ficam dentro do menu -->\n        <hm-menu-button class=\"h-profile\" [label]=\"profile.name ?? text.user\" align=\"end\" [items]=\"profileMenuItems\" (chosen)=\"onProfileMenuChosen($event)\">\n            <hm-account-avatar [name]=\"profile.name ?? text.user\" [imageUrl]=\"profile.picture\"></hm-account-avatar>\n            <span class=\"h-profile-info\">\n                <span class=\"h-profile-name\">{{ profile.name ?? text.user }}</span>\n                <span class=\"h-profile-role\" *ngIf=\"badge\">{{ badge?.name }}</span>\n            </span>\n        </hm-menu-button>\n    </div>\n</hm-header>\n\n<!-- Busca global: paleta ancorada logo abaixo do cabe\u00E7alho. Campo vazio = favoritos, abertos h\u00E1 pouco e\n     m\u00F3dulos; com texto, busca em todas as telas. Setas/Enter navegam, Esc fecha. -->\n<hm-command-palette\n  [(open)]=\"quickOpen\"\n  [commands]=\"searchCommands\"\n  [browseGroups]=\"searchBrowse\"\n  [groupIcons]=\"searchIcons\"\n  [label]=\"text.search\"\n  [placeholder]=\"text.searchPlaceholder\"\n/>\n\n<!-- A janela de avalia\u00E7\u00E3o (flutuante, canto inferior direito): \"Avaliar o {app}\" da estrela do cabe\u00E7alho e de\n     Configura\u00E7\u00F5es \u203A Sobre, e \"Avaliar esta tela\" da barra da p\u00E1gina (SpineFeatures.ratings). S\u00F3 desenha com o recurso\n     ligado e aberta. -->\n<spine-rating-window />\n", styles: ["@charset \"UTF-8\";:host{display:contents}.header-overlay{position:absolute;inset:0;z-index:9999;cursor:not-allowed}.h-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:40px;min-width:40px;padding:0 10px;border:none;background:transparent;cursor:pointer;border-radius:9px;text-decoration:none;color:var(--hm-navbar-text);outline:none}.h-btn:focus-visible,.h-btn:hover{background:var(--hm-navbar-hover)}.h-btn.active{background:var(--hm-navbar-hover)}.h-right{display:flex;align-items:center;gap:var(--hm-header-action-gap)}.h-divider{width:1px;height:24px;margin:0 4px;background:var(--hm-navbar-hover)}.h-profile{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 4px 0 2px}.h-profile hm-account-avatar{background:color-mix(in srgb,var(--hm-navbar-text) 18%,transparent);color:var(--hm-navbar-text)}.h-profile-info{display:flex;flex-direction:column;min-width:0;max-width:140px;line-height:1.2;text-align:left}.h-profile-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.h-profile-role{color:color-mix(in srgb,var(--hm-navbar-text) 65%,transparent);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hm-header [class.header-blocked]=\"headerBlocked\" (searchRequested)=\"onSearchRequested()\">\n    <div *ngIf=\"headerBlocked\" class=\"header-overlay\"></div>\n\n    <spine-app-launcher></spine-app-launcher>\n\n    <!-- Marca: logo do app (SpineConfig.logo, padr\u00E3o assets/images/logo.svg) + SpineConfig.appName,\n         levando \u00E0 primeira rota naveg\u00E1vel. Ver SpineBrandComponent. -->\n    <spine-brand [homeRoute]=\"homeRoute\" [label]=\"text.home\" />\n\n    <div actions class=\"h-right\">\n        <!-- central de notifica\u00E7\u00F5es: o sino, com as novidades das fontes registradas (sem fonte, n\u00E3o aparece) -->\n        <spine-inbox-button />\n\n        <!-- tema claro/escuro -->\n        <hm-icon-button emphasis=\"subtle\" (clicked)=\"setTheme(themeService.current == 'light' ? 'dark' : 'light')\"\n            [icon]=\"themeService.current == 'light' ? 'moon' : 'sun'\"\n            [label]=\"themeService.current == 'light' ? text.themeDark : text.themeLight\">\n        </hm-icon-button>\n\n        <!-- densidade -->\n        <hm-icon-button emphasis=\"subtle\" (clicked)=\"setDensity()\"\n            [icon]=\"isCompactDensity ? 'density-comfortable' : 'density-compact'\"\n            [label]=\"isCompactDensity ? text.densityComfortable : text.densityCompact\">\n        </hm-icon-button>\n\n        <!-- Avaliar o {app} (SpineFeatures.ratings): a estrela abre o di\u00E1logo e fica cheia depois de avaliar. Toma o\n             lugar do bot\u00E3o de tela cheia (o atalho de teclado continua); sem avalia\u00E7\u00E3o, a tela cheia volta aqui. -->\n        @if (showFullscreenButton) {\n            <hm-icon-button emphasis=\"subtle\" (clicked)=\"toggleFullscreen()\"\n                [icon]=\"isFullscreen ? 'shrink' : 'resize'\"\n                [label]=\"isFullscreen ? text.exitFullscreen : text.fullscreen\">\n            </hm-icon-button>\n        } @else {\n            <spine-rate-app-button />\n        }\n\n        <span class=\"h-divider\" aria-hidden=\"true\"></span>\n\n        <!-- perfil: crach\u00E1, ajuda, tema e sair ficam dentro do menu -->\n        <hm-menu-button class=\"h-profile\" [label]=\"profile.name ?? text.user\" align=\"end\" [items]=\"profileMenuItems\" (chosen)=\"onProfileMenuChosen($event)\">\n            <hm-account-avatar [name]=\"profile.name ?? text.user\" [imageUrl]=\"profile.picture\"></hm-account-avatar>\n            <span class=\"h-profile-info\">\n                <span class=\"h-profile-name\">{{ profile.name ?? text.user }}</span>\n                <span class=\"h-profile-role\" *ngIf=\"badge\">{{ badge?.name }}</span>\n            </span>\n        </hm-menu-button>\n    </div>\n</hm-header>\n\n<!-- Busca global: paleta ancorada logo abaixo do cabe\u00E7alho. Campo vazio = favoritos, abertos h\u00E1 pouco e\n     m\u00F3dulos; com texto, busca em todas as telas. Setas/Enter navegam, Esc fecha. -->\n<hm-command-palette\n  [(open)]=\"quickOpen\"\n  [commands]=\"searchCommands\"\n  [browseGroups]=\"searchBrowse\"\n  [groupIcons]=\"searchIcons\"\n  [label]=\"text.search\"\n  [placeholder]=\"text.searchPlaceholder\"\n/>\n\n<!-- A janela de avalia\u00E7\u00E3o (flutuante, canto inferior direito): \"Avaliar o {app}\" da estrela do cabe\u00E7alho e de\n     Configura\u00E7\u00F5es \u203A Sobre, e \"Avaliar esta tela\" da barra da p\u00E1gina (SpineFeatures.ratings). S\u00F3 desenha com o recurso\n     ligado e aberta. -->\n<spine-rating-window />\n", styles: ["@charset \"UTF-8\";:host{display:contents}.header-overlay{position:absolute;inset:0;z-index:9999;cursor:not-allowed}.h-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:40px;min-width:40px;padding:0 10px;border:none;background:transparent;cursor:pointer;border-radius:9px;text-decoration:none;color:var(--hm-navbar-text);outline:none}.h-btn:focus-visible,.h-btn:hover{background:var(--hm-navbar-hover)}.h-btn.active{background:var(--hm-navbar-hover)}.h-right{display:flex;align-items:center;gap:var(--hm-header-action-gap)}.h-divider{width:1px;height:24px;margin:0 4px;background:var(--hm-navbar-hover)}.h-profile{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 4px 0 2px}.h-profile hm-account-avatar{background:color-mix(in srgb,var(--hm-navbar-text) 18%,transparent);color:var(--hm-navbar-text)}.h-profile-info{display:flex;flex-direction:column;min-width:0;max-width:140px;line-height:1.2;text-align:left}.h-profile-name{font-size:var(--hm-font-size-label);font-weight:var(--hm-font-weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.h-profile-role{color:color-mix(in srgb,var(--hm-navbar-text) 65%,transparent);font-size:var(--hm-font-size-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [{ type: i1.AuthorizationService }, { type: i2$1.ThemeService }, { type: i2$1.ThemePresetService }, { type: i2$1.DensityService }, { type: i1.ViewService }, { type: i3.Router }, { type: ShortcutService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -2428,6 +2435,20 @@ const HOME_PATH = '/home';
 function leavesOf(node) {
     return node.kind === 'panel' ? [node] : [...leavesOf(node.a), ...leavesOf(node.b)];
 }
+/** Limite da grade de painéis do shell: no máximo 2 lado a lado e 2 empilhados (os quatro cantos da tela). */
+const SPINE_WORKSPACE_LIMITS = { maxColumns: 2, maxRows: 2 };
+/** O painel do outro lado da divisão lado a lado mais próxima de `panelId` (o primeiro dele, na ordem da árvore). */
+function besidePanel(node, panelId) {
+    if (node.kind === 'panel')
+        return null;
+    const inA = panelIdsInOrder(node.a).includes(panelId);
+    if (!inA && !panelIdsInOrder(node.b).includes(panelId))
+        return null;
+    const deeper = besidePanel(inA ? node.a : node.b, panelId);
+    if (deeper)
+        return deeper;
+    return node.direction === 'row' ? panelIdsInOrder(inA ? node.b : node.a)[0] : null;
+}
 /** O caminho de um endereço (sem query nem fragmento). */
 function spinePathOf(url) {
     return url.split(/[?#]/)[0] || HOME_PATH;
@@ -2481,11 +2502,20 @@ function keepsIdentity(id, url) {
  * 3. outra aba do painel já está nesse endereço → ela é ativada;
  * 4. senão → a aba ativa passa a ser a da tela nova (o comportamento de sempre).
  * `openTab` abre (ou foca, em qualquer painel) a aba de um endereço com parâmetros.
+ *
+ * **Dividir abas é preferência da pessoa** (`SpinePreferencesService.splitTabs`, desligada por padrão): o shell só
+ * deixa dividir a área em painéis com ela ligada (`split`). Desligada — ao carregar ou ao desligar —, um arranjo com
+ * vários painéis (salvo no navegador ou feito antes) é fundido num painel só, sem perder aba (`mergePanels`).
  */
 class SpineWorkspaceNavService {
     constructor() {
         this.router = inject(Router);
         this.viewService = inject(ViewService);
+        this.preferences = inject(SpinePreferencesService);
+        /** A pessoa pode dividir a área de abas em painéis (a preferência "Dividir abas"). */
+        this.split = computed(() => this.preferences.splitTabs(), ...(ngDevMode ? [{ debugName: "split" }] : /* istanbul ignore next */ []));
+        /** Até onde dá para dividir (o shell passa para o `hm-workspace`; `openTab` com `beside` respeita). */
+        this.limits = SPINE_WORKSPACE_LIMITS;
         this.store = createPersistedWorkspaceStore({ tabs: [this.tabFor(HOME_PATH)], activeId: HOME_PATH }, (id, saved) => this.restoreTab(id, saved), inject(HERMES_WORKSPACE_PERSISTENCE_CONFIG));
         this.state = signal(this.store.getState(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
         this.root = computed(() => this.state().root, ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
@@ -2502,6 +2532,13 @@ class SpineWorkspaceNavService {
         /** O último endereço que o `Router` mostrou (normalizado, com a query): o `effect` abaixo não navega para ele de novo. */
         this.lastKnownUrl = '';
         this.store.subscribe((s) => this.state.set(s));
+        // Já antes da primeira tela: o arranjo salvo com vários painéis volta num painel só se a divisão está desligada.
+        if (!this.split())
+            this.mergePanels();
+        effect(() => {
+            if (!this.split())
+                untracked(() => this.mergePanels());
+        });
         this.router.events.subscribe((event) => {
             if (!(event instanceof NavigationEnd))
                 return;
@@ -2629,6 +2666,18 @@ class SpineWorkspaceNavService {
             label: (id.includes('?') && cleanLabel(saved?.label)) || fresh.label,
         };
     }
+    /**
+     * Junta todos os painéis no focado, sem perder aba: as abas ficam na ordem dos painéis (da esquerda para a direita,
+     * de cima para baixo), uma aba repetida em dois painéis vira uma só (vale a do focado), e a aba ativa do painel focado
+     * continua a ativa (`WorkspaceStore.mergePanels`). Com um painel só, não faz nada.
+     */
+    mergePanels() {
+        const { root, focusedPanelId } = this.store.getState();
+        if (root.kind === 'panel')
+            return;
+        const ids = panelIdsInOrder(root);
+        this.store.mergePanels(ids.includes(focusedPanelId) ? focusedPanelId : ids[0]);
+    }
     /** O `+` de um painel: abre a home ali, como um navegador. */
     openNewTab(panelId) {
         this.store.openTab(panelId, this.tabFor(HOME_PATH));
@@ -2637,7 +2686,7 @@ class SpineWorkspaceNavService {
      * Abre (ou foca) a aba de um endereço com parâmetros — um registro por aba na mesma tela:
      * `openTab('/vendas/pedidos?pedido=123&secao=itens', { label: 'Pedido 123', match: ['pedido'] })`.
      * Se alguma aba (em qualquer painel) já tem essa identidade, ela é focada e passa a esse endereço; senão abre uma
-     * no painel focado (ou num painel novo ao lado, com `beside`). Só abre o que a view da pessoa permite (a mesma
+     * no painel focado (ou num painel novo ao lado, com `beside` e a divisão ligada). Só abre o que a view da pessoa permite (a mesma
      * regra do menu e do `ViewGuard`); fora dela, não faz nada.
      */
     openTab(url, options = {}) {
@@ -2659,10 +2708,21 @@ class SpineWorkspaceNavService {
         }
         const fresh = this.tabFor(target);
         const tab = { ...fresh, id, ...patch, label: label ?? fresh.label, icon: options.icon ?? fresh.icon };
-        if (options.beside)
-            this.store.splitPanel(this.state().focusedPanelId, 'row', tab);
-        else
-            this.store.openTab(this.state().focusedPanelId, tab);
+        const { root, focusedPanelId } = this.state();
+        if (options.beside && this.split()) {
+            if (canSplitPanel(root, focusedPanelId, 'row', this.limits)) {
+                this.store.splitPanel(focusedPanelId, 'row', tab);
+                return;
+            }
+            // No limite de colunas: abre no painel que já está ao lado (o do outro lado da divisão), sem dividir.
+            const beside = besidePanel(root, focusedPanelId) ?? cyclicPanelNeighbor(panelIdsInOrder(root), focusedPanelId, 1);
+            if (beside) {
+                this.store.openTab(beside, tab);
+                this.store.focusPanel(beside);
+                return;
+            }
+        }
+        this.store.openTab(focusedPanelId, tab);
     }
     /** O nome (e o ícone) de uma aba, dado pela tela (`SPINE_TAB.setLabel`). */
     setTabLabel(panelId, tabId, label, icon) {
@@ -2737,6 +2797,27 @@ function toSidebarNode(route) {
  * atual muda (navegação real feita, mesma UX do `leaveModule()` do docs).
  */
 class SidebarComponent {
+    /** Botão direito (ou Shift+F10/tecla Menu, que o navegador traduz em `contextmenu`) numa página do menu. Grupo e
+     *  entrada de módulo não são páginas: ali o menu nativo continua valendo. */
+    onContextMenu(event, menu) {
+        const link = event.target.closest('a.hm-sidebar-link:not(.hm-sidebar-link--opens-menu)');
+        const href = link?.getAttribute('href');
+        if (!link || !href)
+            return;
+        event.preventDefault();
+        this.menuPage = this.location.normalize(href);
+        // No modo automático a coluna fecharia: o ponteiro vai para o menu, que fica fora dela.
+        this.column.holdOpen(true);
+        // Pelo teclado o evento pode vir sem coordenadas: abre colado no link.
+        const box = link.getBoundingClientRect();
+        menu.openAt(event.clientX || box.left, event.clientY || box.bottom);
+    }
+    onPageMenuClosed() {
+        this.column.holdOpen(false);
+    }
+    openPageInNewTab() {
+        this.workspace.openTab(this.menuPage);
+    }
     constructor() {
         this.text = inject(SPINE_MESSAGES).sidebar;
         this.fmt = formatMessage;
@@ -2744,6 +2825,11 @@ class SidebarComponent {
         this.viewService = inject(ViewService);
         this.authService = inject(AuthorizationService);
         this.realmApps = inject(RealmAppsService);
+        this.location = inject(Location);
+        this.column = inject(HermesSidebarService);
+        this.pageMenu = [{ id: 'new-tab', label: this.text.openInNewTab, icon: 'plus' }];
+        /** Endereço da página em que o menu de contexto foi aberto. */
+        this.menuPage = '';
         /** Aplicações do realm (o app atual já vem excluído pelo backend) — exibidas só no mobile. */
         this.apps = signal([], ...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
         this.currentView = toSignal(this.viewService.currentView$, { initialValue: this.viewService.currentView });
@@ -2801,11 +2887,11 @@ class SidebarComponent {
         this.wantsModules.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SidebarComponent, isStandalone: true, selector: "spine-sidebar", ngImport: i0, template: "<hm-sidebar\n  *ngIf=\"modules().length != 0 || menus().length != 0\"\n  [label]=\"!viewingModules() && currentModule() ? fmt(text.moduleNavigation, { module: currentModule()!.route_display_name ?? '' }) : text.modules\"\n  [heading]=\"!viewingModules() ? (currentModule()?.route_display_name ?? '') : ''\"\n  [headingIcon]=\"currentModule()?.route_icon ?? 'grid'\"\n  [backLabel]=\"!viewingModules() && modules().length > 1 ? text.modules : ''\"\n  [direction]=\"viewingModules() ? 'back' : 'forward'\"\n  (back)=\"showModules()\"\n>\n  <!-- S\u00F3 no mobile: o seletor de aplica\u00E7\u00F5es do header some e vem para c\u00E1. -->\n  @if (apps().length) {\n    <section class=\"spine-sidebar-apps\" [attr.aria-label]=\"text.apps\">\n      <p class=\"spine-sidebar-apps__title\"><hm-icon shape=\"grid\" /> {{ text.apps }}</p>\n      @for (app of apps(); track app.app_url) {\n        <a class=\"spine-sidebar-apps__link\" [href]=\"app.app_url\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <hm-icon shape=\"applications\" />\n          <span>{{ app.name }}</span>\n        </a>\n      }\n    </section>\n  }\n  @if (viewingModules()) {\n    @for (m of modules(); track m.id) {\n      <hm-sidebar-node [node]=\"m\" [depth]=\"0\" />\n    }\n  } @else {\n    @for (menu of menus(); track menu.id) {\n      <!-- Infinity, n\u00E3o um n\u00FAmero fixo: o backend do spine j\u00E1 usa `route_type` pra limitar a\n           \u00E1rvore a 6 n\u00EDveis (header\u2192navigation\u2192menu\u2192item\u2192submenu\u2192page \u2014 ver `route.model.ts`),\n           ent\u00E3o n\u00E3o h\u00E1 necessidade de um segundo teto aqui. Um teto baixo (achado ao vivo,\n           2026-09-28: `depth=2`) for\u00E7ava o pen\u00FAltimo n\u00EDvel a virar link plano mesmo tendo\n           filhos reais (ex.: \"submenu\" com p\u00E1ginas embaixo sumia da \u00E1rvore vis\u00EDvel). -->\n      <hm-sidebar-node [node]=\"menu\" [depth]=\"maxDepth\" />\n    }\n  }\n</hm-sidebar>\n", styles: [".spine-sidebar-apps{display:none}@media(max-width:767px){.spine-sidebar-apps{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin-bottom:var(--hm-space-sm);padding-bottom:var(--hm-space-sm);border-bottom:var(--hm-border-hairline) solid var(--hm-divider)}.spine-sidebar-apps__title{display:flex;align-items:center;gap:var(--hm-space-nano);margin:0 var(--hm-space-xxxs);color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.spine-sidebar-apps__link{display:flex;align-items:center;gap:var(--hm-space-nano);min-height:var(--hm-space-2xl);padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);color:inherit;font-size:var(--hm-font-size-sm);text-decoration:none}.spine-sidebar-apps__link:hover,.spine-sidebar-apps__link:focus-visible{background:var(--hm-hover)}}:host{display:flex;flex-direction:column;height:100%}:host ::ng-deep .hm-sidebar{height:100%;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SidebarComponent$1, selector: "hm-sidebar", inputs: ["label", "heading", "headingIcon", "backLabel", "direction", "collapsible"], outputs: ["back"] }, { kind: "component", type: SidebarNodeComponent, selector: "hm-sidebar-node", inputs: ["node", "depth"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SidebarComponent, isStandalone: true, selector: "spine-sidebar", ngImport: i0, template: "<span hidden [hmContextMenu]=\"pageMenu\" #pageContextMenu=\"hmContextMenu\" (chosen)=\"openPageInNewTab()\" (closed)=\"onPageMenuClosed()\"></span>\n<hm-sidebar\n  *ngIf=\"modules().length != 0 || menus().length != 0\"\n  [label]=\"!viewingModules() && currentModule() ? fmt(text.moduleNavigation, { module: currentModule()!.route_display_name ?? '' }) : text.modules\"\n  [heading]=\"!viewingModules() ? (currentModule()?.route_display_name ?? '') : ''\"\n  [headingIcon]=\"currentModule()?.route_icon ?? 'grid'\"\n  [backLabel]=\"!viewingModules() && modules().length > 1 ? text.modules : ''\"\n  [direction]=\"viewingModules() ? 'back' : 'forward'\"\n  (back)=\"showModules()\"\n  (contextmenu)=\"onContextMenu($event, pageContextMenu)\"\n>\n  <!-- S\u00F3 no mobile: o seletor de aplica\u00E7\u00F5es do header some e vem para c\u00E1. -->\n  @if (apps().length) {\n    <section class=\"spine-sidebar-apps\" [attr.aria-label]=\"text.apps\">\n      <p class=\"spine-sidebar-apps__title\"><hm-icon shape=\"grid\" /> {{ text.apps }}</p>\n      @for (app of apps(); track app.app_url) {\n        <a class=\"spine-sidebar-apps__link\" [href]=\"app.app_url\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <hm-icon shape=\"applications\" />\n          <span>{{ app.name }}</span>\n        </a>\n      }\n    </section>\n  }\n  @if (viewingModules()) {\n    @for (m of modules(); track m.id) {\n      <hm-sidebar-node [node]=\"m\" [depth]=\"0\" />\n    }\n  } @else {\n    @for (menu of menus(); track menu.id) {\n      <!-- Infinity, n\u00E3o um n\u00FAmero fixo: o backend do spine j\u00E1 usa `route_type` pra limitar a\n           \u00E1rvore a 6 n\u00EDveis (header\u2192navigation\u2192menu\u2192item\u2192submenu\u2192page \u2014 ver `route.model.ts`),\n           ent\u00E3o n\u00E3o h\u00E1 necessidade de um segundo teto aqui. Um teto baixo (achado ao vivo,\n           2026-09-28: `depth=2`) for\u00E7ava o pen\u00FAltimo n\u00EDvel a virar link plano mesmo tendo\n           filhos reais (ex.: \"submenu\" com p\u00E1ginas embaixo sumia da \u00E1rvore vis\u00EDvel). -->\n      <hm-sidebar-node [node]=\"menu\" [depth]=\"maxDepth\" />\n    }\n  }\n</hm-sidebar>\n", styles: [".spine-sidebar-apps{display:none}@media(max-width:767px){.spine-sidebar-apps{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin-bottom:var(--hm-space-sm);padding-bottom:var(--hm-space-sm);border-bottom:var(--hm-border-hairline) solid var(--hm-divider)}.spine-sidebar-apps__title{display:flex;align-items:center;gap:var(--hm-space-nano);margin:0 var(--hm-space-xxxs);color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.spine-sidebar-apps__link{display:flex;align-items:center;gap:var(--hm-space-nano);min-height:var(--hm-space-2xl);padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);color:inherit;font-size:var(--hm-font-size-sm);text-decoration:none}.spine-sidebar-apps__link:hover,.spine-sidebar-apps__link:focus-visible{background:var(--hm-hover)}}:host{display:flex;flex-direction:column;height:100%}:host ::ng-deep .hm-sidebar{height:100%;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContextMenuDirective, selector: "[hmContextMenu]", inputs: ["hmContextMenu", "hmContextMenuLabel", "hmContextMenuDisabled", "hmContextMenuLayer", "hmContextMenuCloseOnCheck"], outputs: ["chosen", "closed", "checkedChange"], exportAs: ["hmContextMenu"] }, { kind: "component", type: SidebarComponent$1, selector: "hm-sidebar", inputs: ["label", "heading", "headingIcon", "backLabel", "direction", "collapsible"], outputs: ["back"] }, { kind: "component", type: SidebarNodeComponent, selector: "hm-sidebar-node", inputs: ["node", "depth"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spine-sidebar', imports: [CommonModule, SidebarComponent$1, SidebarNodeComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hm-sidebar\n  *ngIf=\"modules().length != 0 || menus().length != 0\"\n  [label]=\"!viewingModules() && currentModule() ? fmt(text.moduleNavigation, { module: currentModule()!.route_display_name ?? '' }) : text.modules\"\n  [heading]=\"!viewingModules() ? (currentModule()?.route_display_name ?? '') : ''\"\n  [headingIcon]=\"currentModule()?.route_icon ?? 'grid'\"\n  [backLabel]=\"!viewingModules() && modules().length > 1 ? text.modules : ''\"\n  [direction]=\"viewingModules() ? 'back' : 'forward'\"\n  (back)=\"showModules()\"\n>\n  <!-- S\u00F3 no mobile: o seletor de aplica\u00E7\u00F5es do header some e vem para c\u00E1. -->\n  @if (apps().length) {\n    <section class=\"spine-sidebar-apps\" [attr.aria-label]=\"text.apps\">\n      <p class=\"spine-sidebar-apps__title\"><hm-icon shape=\"grid\" /> {{ text.apps }}</p>\n      @for (app of apps(); track app.app_url) {\n        <a class=\"spine-sidebar-apps__link\" [href]=\"app.app_url\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <hm-icon shape=\"applications\" />\n          <span>{{ app.name }}</span>\n        </a>\n      }\n    </section>\n  }\n  @if (viewingModules()) {\n    @for (m of modules(); track m.id) {\n      <hm-sidebar-node [node]=\"m\" [depth]=\"0\" />\n    }\n  } @else {\n    @for (menu of menus(); track menu.id) {\n      <!-- Infinity, n\u00E3o um n\u00FAmero fixo: o backend do spine j\u00E1 usa `route_type` pra limitar a\n           \u00E1rvore a 6 n\u00EDveis (header\u2192navigation\u2192menu\u2192item\u2192submenu\u2192page \u2014 ver `route.model.ts`),\n           ent\u00E3o n\u00E3o h\u00E1 necessidade de um segundo teto aqui. Um teto baixo (achado ao vivo,\n           2026-09-28: `depth=2`) for\u00E7ava o pen\u00FAltimo n\u00EDvel a virar link plano mesmo tendo\n           filhos reais (ex.: \"submenu\" com p\u00E1ginas embaixo sumia da \u00E1rvore vis\u00EDvel). -->\n      <hm-sidebar-node [node]=\"menu\" [depth]=\"maxDepth\" />\n    }\n  }\n</hm-sidebar>\n", styles: [".spine-sidebar-apps{display:none}@media(max-width:767px){.spine-sidebar-apps{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin-bottom:var(--hm-space-sm);padding-bottom:var(--hm-space-sm);border-bottom:var(--hm-border-hairline) solid var(--hm-divider)}.spine-sidebar-apps__title{display:flex;align-items:center;gap:var(--hm-space-nano);margin:0 var(--hm-space-xxxs);color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.spine-sidebar-apps__link{display:flex;align-items:center;gap:var(--hm-space-nano);min-height:var(--hm-space-2xl);padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);color:inherit;font-size:var(--hm-font-size-sm);text-decoration:none}.spine-sidebar-apps__link:hover,.spine-sidebar-apps__link:focus-visible{background:var(--hm-hover)}}:host{display:flex;flex-direction:column;height:100%}:host ::ng-deep .hm-sidebar{height:100%;flex-grow:1}\n"] }]
+            args: [{ selector: 'spine-sidebar', imports: [CommonModule, ContextMenuDirective, SidebarComponent$1, SidebarNodeComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span hidden [hmContextMenu]=\"pageMenu\" #pageContextMenu=\"hmContextMenu\" (chosen)=\"openPageInNewTab()\" (closed)=\"onPageMenuClosed()\"></span>\n<hm-sidebar\n  *ngIf=\"modules().length != 0 || menus().length != 0\"\n  [label]=\"!viewingModules() && currentModule() ? fmt(text.moduleNavigation, { module: currentModule()!.route_display_name ?? '' }) : text.modules\"\n  [heading]=\"!viewingModules() ? (currentModule()?.route_display_name ?? '') : ''\"\n  [headingIcon]=\"currentModule()?.route_icon ?? 'grid'\"\n  [backLabel]=\"!viewingModules() && modules().length > 1 ? text.modules : ''\"\n  [direction]=\"viewingModules() ? 'back' : 'forward'\"\n  (back)=\"showModules()\"\n  (contextmenu)=\"onContextMenu($event, pageContextMenu)\"\n>\n  <!-- S\u00F3 no mobile: o seletor de aplica\u00E7\u00F5es do header some e vem para c\u00E1. -->\n  @if (apps().length) {\n    <section class=\"spine-sidebar-apps\" [attr.aria-label]=\"text.apps\">\n      <p class=\"spine-sidebar-apps__title\"><hm-icon shape=\"grid\" /> {{ text.apps }}</p>\n      @for (app of apps(); track app.app_url) {\n        <a class=\"spine-sidebar-apps__link\" [href]=\"app.app_url\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <hm-icon shape=\"applications\" />\n          <span>{{ app.name }}</span>\n        </a>\n      }\n    </section>\n  }\n  @if (viewingModules()) {\n    @for (m of modules(); track m.id) {\n      <hm-sidebar-node [node]=\"m\" [depth]=\"0\" />\n    }\n  } @else {\n    @for (menu of menus(); track menu.id) {\n      <!-- Infinity, n\u00E3o um n\u00FAmero fixo: o backend do spine j\u00E1 usa `route_type` pra limitar a\n           \u00E1rvore a 6 n\u00EDveis (header\u2192navigation\u2192menu\u2192item\u2192submenu\u2192page \u2014 ver `route.model.ts`),\n           ent\u00E3o n\u00E3o h\u00E1 necessidade de um segundo teto aqui. Um teto baixo (achado ao vivo,\n           2026-09-28: `depth=2`) for\u00E7ava o pen\u00FAltimo n\u00EDvel a virar link plano mesmo tendo\n           filhos reais (ex.: \"submenu\" com p\u00E1ginas embaixo sumia da \u00E1rvore vis\u00EDvel). -->\n      <hm-sidebar-node [node]=\"menu\" [depth]=\"maxDepth\" />\n    }\n  }\n</hm-sidebar>\n", styles: [".spine-sidebar-apps{display:none}@media(max-width:767px){.spine-sidebar-apps{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin-bottom:var(--hm-space-sm);padding-bottom:var(--hm-space-sm);border-bottom:var(--hm-border-hairline) solid var(--hm-divider)}.spine-sidebar-apps__title{display:flex;align-items:center;gap:var(--hm-space-nano);margin:0 var(--hm-space-xxxs);color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.spine-sidebar-apps__link{display:flex;align-items:center;gap:var(--hm-space-nano);min-height:var(--hm-space-2xl);padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);color:inherit;font-size:var(--hm-font-size-sm);text-decoration:none}.spine-sidebar-apps__link:hover,.spine-sidebar-apps__link:focus-visible{background:var(--hm-hover)}}:host{display:flex;flex-direction:column;height:100%}:host ::ng-deep .hm-sidebar{height:100%;flex-grow:1}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -2902,11 +2988,11 @@ class SpineInitialSetupComponent {
         return { id, icon, title, before, after, keys: keys ? formatShortcut(keys, this.platform)[0] : null };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineInitialSetupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpineInitialSetupComponent, isStandalone: true, selector: "spine-initial-setup", viewQueries: [{ propertyName: "heading", first: true, predicate: ["heading"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"setup\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"t.label\">\n  <div class=\"setup__bar\">\n    @if (stepTotal() > 1) {\n      <span class=\"setup__step\">{{ fmt(t.step, { current: stepNumber(), total: stepTotal() }) }}</span>\n      <span class=\"setup__dots\" aria-hidden=\"true\">\n        <span class=\"setup__dot\" [class.setup__dot--on]=\"stepNumber() >= 1\"></span>\n        <span class=\"setup__dot\" [class.setup__dot--on]=\"stepNumber() >= 2\"></span>\n      </span>\n    }\n    @if (setup.mode() === 'full') {\n      <hm-button class=\"setup__skip\" emphasis=\"minimal\" (clicked)=\"setup.finish()\">{{ t.skip }}</hm-button>\n    }\n  </div>\n\n  @if (setup.step() === 'appearance') {\n    <div class=\"setup__body\">\n      <section class=\"setup__form\">\n        <h1 #heading class=\"setup__title\" tabindex=\"-1\">{{ greeting }}</h1>\n        <p class=\"setup__intro\">{{ t.appearanceIntro }}</p>\n\n        <div class=\"setup__fields\">\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.theme }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.theme\" [options]=\"themeOptions\" [value]=\"themeMode()\" (valueChange)=\"setThemeMode($event)\" />\n          </div>\n\n          <div class=\"setup__field setup__field--wide\">\n            <span class=\"setup__label\">{{ s.accent }}</span>\n            <hm-theme-picker\n              [families]=\"families\"\n              [family]=\"family()\"\n              [theme]=\"appliedTheme()\"\n              [showMode]=\"false\"\n              (familyChosen)=\"setFamily($event)\"\n            />\n          </div>\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.density }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.density\" [options]=\"densityOptions\" [value]=\"densityValue()\" (valueChange)=\"setDensity($event)\" />\n          </div>\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.textSize }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.textSize\" [options]=\"textSizeOptions()\" [value]=\"textSizeValue()\" (valueChange)=\"setTextSize($event)\" />\n          </div>\n\n          @if (fontOptions.length > 1) {\n            <div class=\"setup__field\">\n              <span class=\"setup__label\">{{ s.font }}</span>\n              <hm-segmented-control emphasis=\"action\" [label]=\"s.font\" [options]=\"fontOptions\" [value]=\"fontValue()\" (valueChange)=\"setFont($event)\" />\n            </div>\n          }\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.motion }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.motion\" [options]=\"motionOptions\" [value]=\"preferences.motion()\" (valueChange)=\"setMotion($event)\" />\n          </div>\n        </div>\n\n        <div class=\"setup__actions\">\n          <hm-button emphasis=\"high\" iconEnd=\"arrow-right\" (clicked)=\"setup.next()\">{{ t.next }}</hm-button>\n        </div>\n      </section>\n\n      <!-- Pr\u00E9via: um shell em miniatura pintado com os tokens do tema, ent\u00E3o acompanha cada escolha. Decorativa. -->\n      <figure class=\"setup__preview\">\n        <figcaption class=\"setup__preview-label\">{{ t.preview }}</figcaption>\n        <div class=\"pv\" aria-hidden=\"true\">\n          <div class=\"pv__header\">\n            <spine-brand class=\"pv__brand\" [label]=\"appName\" />\n            <span class=\"pv__search\"></span>\n            <span class=\"pv__avatar\"></span>\n          </div>\n          <div class=\"pv__body\">\n            <div class=\"pv__side\">\n              <span class=\"pv__item pv__item--on\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item pv__item--short\"></span>\n            </div>\n            <div class=\"pv__main\">\n              <div class=\"pv__tabs\">\n                <span class=\"pv__tab pv__tab--on\">{{ t.previewPage }}</span>\n                <span class=\"pv__tab\"><span class=\"pv__line\"></span></span>\n                <span class=\"pv__tab\"><span class=\"pv__line\"></span></span>\n              </div>\n              <div class=\"pv__page\">\n                <span class=\"pv__title\"></span>\n                <div class=\"pv__cards\">\n                  @for (n of [1, 2, 3]; track n) {\n                    <span class=\"pv__card\"><span class=\"pv__num\"></span><span class=\"pv__line\"></span></span>\n                  }\n                </div>\n                <div class=\"pv__table\">\n                  <span class=\"pv__row pv__row--head\"></span>\n                  @for (n of [1, 2, 3, 4]; track n) {\n                    <span class=\"pv__row\"><span class=\"pv__line\"></span><span class=\"pv__line pv__line--short\"></span></span>\n                  }\n                </div>\n                <div class=\"pv__buttons\">\n                  <span class=\"pv__btn pv__btn--ghost\"></span>\n                  <span class=\"pv__btn\"></span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </figure>\n    </div>\n  } @else {\n    <div class=\"setup__body setup__body--essentials\">\n      <section class=\"setup__essentials\">\n        <h1 #heading class=\"setup__title\" tabindex=\"-1\">{{ t.essentialsTitle }}</h1>\n        <p class=\"setup__intro\">{{ t.essentialsIntro }}</p>\n\n        <ul class=\"setup__cards\">\n          @for (card of essentials; track card.id) {\n            <li class=\"setup__card\">\n              <span class=\"setup__card-icon\"><hm-icon [shape]=\"card.icon\" /></span>\n              <h2 class=\"setup__card-title\">{{ card.title }}</h2>\n              <p class=\"setup__card-text\">\n                {{ card.before }}@if (card.keys) {<span class=\"setup__keys\">@for (step of card.keys; track $index) {@for (key of step; track $index) {<kbd>{{ key.label }}</kbd>}}</span>}{{ card.after }}\n              </p>\n            </li>\n          }\n        </ul>\n\n        <div class=\"setup__actions\">\n          @if (setup.mode() === 'full') {\n            <hm-button emphasis=\"medium\" icon=\"arrow-left\" (clicked)=\"setup.back()\">{{ t.back }}</hm-button>\n            <hm-button emphasis=\"high\" (clicked)=\"setup.finish()\">{{ t.finish }}</hm-button>\n          } @else {\n            <hm-button emphasis=\"high\" (clicked)=\"setup.finish()\">{{ t.close }}</hm-button>\n          }\n        </div>\n      </section>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:fixed;inset:0;z-index:var(--hm-z-overlay);display:block;overflow:auto;background:var(--hm-surface);color:var(--hm-text)}.setup{display:flex;flex-direction:column;min-height:100%;max-width:76rem;margin:0 auto;padding:var(--hm-space-lg) var(--hm-space-xl) var(--hm-space-2xl);box-sizing:border-box}.setup__bar{display:flex;align-items:center;gap:var(--hm-space-md);min-height:var(--hm-control-height, 40px)}.setup__step{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.setup__dots{display:inline-flex;gap:6px}.setup__dot{width:24px;height:4px;border-radius:var(--hm-radius-pill);background:var(--hm-border)}.setup__dot--on{background:var(--hm-accent)}.setup__skip{margin-left:auto}.setup__body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(var(--hm-space-xl),5vw,5rem);align-items:center;padding-top:var(--hm-space-xl)}.setup__body--essentials{grid-template-columns:minmax(0,1fr);justify-items:center}.setup__title{margin:0;font-size:var(--hm-font-size-xxl);font-weight:650;line-height:1.2;letter-spacing:-.01em;outline:none}.setup__intro{margin:var(--hm-space-sm) 0 0;max-width:34rem;color:var(--hm-muted);line-height:1.5}.setup__fields{display:flex;flex-direction:column;gap:var(--hm-space-lg);margin-top:var(--hm-space-xl)}.setup__field{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-xs)}.setup__field--wide{align-items:stretch}.setup__label{font-size:var(--hm-font-size-sm);font-weight:600}.setup__actions{display:flex;gap:var(--hm-space-sm);margin-top:var(--hm-space-xl)}.setup__preview{margin:0;display:flex;flex-direction:column;gap:var(--hm-space-sm)}.setup__preview-label{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.pv{display:flex;flex-direction:column;aspect-ratio:16/11;overflow:hidden;border:1px solid var(--hm-border);border-radius:14px;background:var(--hm-surface);box-shadow:var(--hm-shadow-lg)}.pv__header{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;background:var(--hm-navbar-surface);color:var(--hm-navbar-text);flex:none}.pv__brand{display:flex;align-items:center;height:18px;font-size:11px;pointer-events:none}.pv__brand ::ng-deep img{height:18px;width:auto}.pv__search{flex:0 1 36%;height:16px;margin-left:auto;border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--hm-navbar-text) 16%,transparent)}.pv__avatar{width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--hm-navbar-text) 30%,transparent)}.pv__body{flex:1;display:flex;min-height:0}.pv__side{display:flex;flex-direction:column;gap:8px;width:22%;padding:12px 10px;background:var(--hm-sidebar-bg);border-right:1px solid var(--hm-border);box-sizing:border-box}.pv__item{height:9px;border-radius:4px;background:color-mix(in srgb,var(--hm-text) 14%,transparent)}.pv__item--on{background:var(--hm-accent)}.pv__item--short{width:60%}.pv__main{flex:1;display:flex;flex-direction:column;min-width:0}.pv__tabs{display:flex;align-items:flex-end;gap:4px;height:26px;padding:0 8px;background:var(--hm-shell-tab-strip-bg);flex:none}.pv__tab{display:flex;align-items:center;width:64px;height:20px;padding:0 8px;border-radius:7px 7px 0 0;box-sizing:border-box;font-size:9px;color:var(--hm-muted)}.pv__tab--on{background:var(--hm-surface-raised);color:var(--hm-text);font-weight:600}.pv__page{flex:1;display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:var(--hm-surface-raised);min-height:0}.pv__title{width:38%;height:11px;border-radius:4px;background:color-mix(in srgb,var(--hm-text) 55%,transparent)}.pv__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pv__card{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--hm-border);border-radius:8px;background:var(--hm-surface)}.pv__num{width:40%;height:10px;border-radius:3px;background:var(--hm-accent)}.pv__line{display:block;width:70%;height:6px;border-radius:3px;background:color-mix(in srgb,var(--hm-text) 18%,transparent)}.pv__line--short{width:30%}.pv__table{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--hm-border);border-radius:8px}.pv__row{display:flex;align-items:center;justify-content:space-between;gap:8px;height:calc(16px * var(--hm-text-scale, 1));padding:0 8px;background:var(--hm-surface)}.pv__row:nth-child(odd):not(.pv__row--head){background:color-mix(in srgb,var(--hm-accent) 5%,var(--hm-surface))}:host-context([data-density=compact]) .pv__row{height:calc(12px * var(--hm-text-scale, 1))}.pv__row--head{background:color-mix(in srgb,var(--hm-accent) 20%,var(--hm-surface-raised))}.pv__buttons{display:flex;justify-content:flex-end;gap:6px;margin-top:auto}.pv__btn{width:52px;height:16px;border-radius:var(--hm-radius-control);background:var(--hm-action)}.pv__btn--ghost{background:transparent;border:1px solid var(--hm-border)}.setup__essentials{width:100%;max-width:56rem}.setup__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--hm-space-md);margin:var(--hm-space-xl) 0 0;padding:0;list-style:none}.setup__card{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-lg);border:1px solid var(--hm-border);border-radius:12px;background:var(--hm-surface-raised)}.setup__card-icon{display:inline-grid;place-items:center;width:36px;height:36px;margin-bottom:var(--hm-space-xs);border-radius:10px;background:var(--hm-accent-subtle);color:var(--hm-accent)}.setup__card-title{margin:0;font-size:var(--hm-font-size-md);font-weight:600}.setup__card-text{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm);line-height:1.5}.setup__keys{display:inline-flex;gap:3px;vertical-align:baseline}.setup__keys kbd{padding:0 5px;border:1px solid var(--hm-border);border-bottom-width:2px;border-radius:5px;background:var(--hm-surface);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-xs);font-weight:600}@media(max-width:860px){.setup{padding:var(--hm-space-md)}.setup__body{grid-template-columns:minmax(0,1fr);align-items:start}.setup__preview{display:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: ThemePickerComponent, selector: "hm-theme-picker", inputs: ["families", "family", "theme", "showMode"], outputs: ["familyChosen", "themeChosen"] }, { kind: "component", type: SpineBrandComponent, selector: "spine-brand", inputs: ["homeRoute", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpineInitialSetupComponent, isStandalone: true, selector: "spine-initial-setup", viewQueries: [{ propertyName: "heading", first: true, predicate: ["heading"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"setup\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"t.label\">\n  <div class=\"setup__bar\">\n    @if (stepTotal() > 1) {\n      <span class=\"setup__step\">{{ fmt(t.step, { current: stepNumber(), total: stepTotal() }) }}</span>\n      <span class=\"setup__dots\" aria-hidden=\"true\">\n        <span class=\"setup__dot\" [class.setup__dot--on]=\"stepNumber() >= 1\"></span>\n        <span class=\"setup__dot\" [class.setup__dot--on]=\"stepNumber() >= 2\"></span>\n      </span>\n    }\n    @if (setup.mode() === 'full') {\n      <hm-button class=\"setup__skip\" emphasis=\"minimal\" (clicked)=\"setup.finish()\">{{ t.skip }}</hm-button>\n    }\n  </div>\n\n  @if (setup.step() === 'appearance') {\n    <div class=\"setup__body\">\n      <section class=\"setup__form\">\n        <h1 #heading class=\"setup__title\" tabindex=\"-1\">{{ greeting }}</h1>\n        <p class=\"setup__intro\">{{ t.appearanceIntro }}</p>\n\n        <div class=\"setup__fields\">\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.theme }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.theme\" [options]=\"themeOptions\" [value]=\"themeMode()\" (valueChange)=\"setThemeMode($event)\" />\n          </div>\n\n          <div class=\"setup__field setup__field--wide\">\n            <span class=\"setup__label\">{{ s.accent }}</span>\n            <hm-theme-picker\n              [families]=\"families\"\n              [family]=\"family()\"\n              [theme]=\"appliedTheme()\"\n              [showMode]=\"false\"\n              (familyChosen)=\"setFamily($event)\"\n            />\n          </div>\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.density }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.density\" [options]=\"densityOptions\" [value]=\"densityValue()\" (valueChange)=\"setDensity($event)\" />\n          </div>\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.textSize }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.textSize\" [options]=\"textSizeOptions()\" [value]=\"textSizeValue()\" (valueChange)=\"setTextSize($event)\" />\n          </div>\n\n          @if (fontOptions.length > 1) {\n            <div class=\"setup__field\">\n              <span class=\"setup__label\">{{ s.font }}</span>\n              <hm-segmented-control emphasis=\"action\" [label]=\"s.font\" [options]=\"fontOptions\" [value]=\"fontValue()\" (valueChange)=\"setFont($event)\" />\n            </div>\n          }\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.motion }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.motion\" [options]=\"motionOptions\" [value]=\"preferences.motion()\" (valueChange)=\"setMotion($event)\" />\n          </div>\n        </div>\n\n        <div class=\"setup__actions\">\n          <hm-button emphasis=\"high\" iconEnd=\"arrow-right\" (clicked)=\"setup.next()\">{{ t.next }}</hm-button>\n        </div>\n      </section>\n\n      <!-- Pr\u00E9via: um shell em miniatura pintado com os tokens do tema, ent\u00E3o acompanha cada escolha. Decorativa. -->\n      <figure class=\"setup__preview\">\n        <figcaption class=\"setup__preview-label\">{{ t.preview }}</figcaption>\n        <div class=\"pv\" aria-hidden=\"true\">\n          <div class=\"pv__header\">\n            <spine-brand class=\"pv__brand\" [label]=\"appName\" />\n            <span class=\"pv__search\"></span>\n            <span class=\"pv__avatar\"></span>\n          </div>\n          <div class=\"pv__body\">\n            <div class=\"pv__side\">\n              <span class=\"pv__item pv__item--on\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item pv__item--short\"></span>\n            </div>\n            <div class=\"pv__main\">\n              <div class=\"pv__tabs\">\n                <span class=\"pv__tab pv__tab--on\">{{ t.previewPage }}</span>\n                <span class=\"pv__tab\"><span class=\"pv__line\"></span></span>\n                <span class=\"pv__tab\"><span class=\"pv__line\"></span></span>\n              </div>\n              <div class=\"pv__page\">\n                <span class=\"pv__title\"></span>\n                <div class=\"pv__cards\">\n                  @for (n of [1, 2, 3]; track n) {\n                    <span class=\"pv__card\"><span class=\"pv__num\"></span><span class=\"pv__line\"></span></span>\n                  }\n                </div>\n                <div class=\"pv__table\">\n                  <span class=\"pv__row pv__row--head\"></span>\n                  @for (n of [1, 2, 3, 4]; track n) {\n                    <span class=\"pv__row\"><span class=\"pv__line\"></span><span class=\"pv__line pv__line--short\"></span></span>\n                  }\n                </div>\n                <div class=\"pv__buttons\">\n                  <span class=\"pv__btn pv__btn--ghost\"></span>\n                  <span class=\"pv__btn\"></span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </figure>\n    </div>\n  } @else {\n    <div class=\"setup__body setup__body--essentials\">\n      <section class=\"setup__essentials\">\n        <h1 #heading class=\"setup__title\" tabindex=\"-1\">{{ t.essentialsTitle }}</h1>\n        <p class=\"setup__intro\">{{ t.essentialsIntro }}</p>\n\n        <ul class=\"setup__cards\">\n          @for (card of essentials; track card.id) {\n            <li class=\"setup__card\">\n              <span class=\"setup__card-icon\"><hm-icon [shape]=\"card.icon\" /></span>\n              <h2 class=\"setup__card-title\">{{ card.title }}</h2>\n              <p class=\"setup__card-text\">\n                {{ card.before }}@if (card.keys) {<span class=\"setup__keys\">@for (step of card.keys; track $index) {@for (key of step; track $index) {<kbd>{{ key.label }}</kbd>}}</span>}{{ card.after }}\n              </p>\n            </li>\n          }\n        </ul>\n\n        <div class=\"setup__actions\">\n          @if (setup.mode() === 'full') {\n            <hm-button emphasis=\"medium\" icon=\"arrow-left\" (clicked)=\"setup.back()\">{{ t.back }}</hm-button>\n            <hm-button emphasis=\"high\" (clicked)=\"setup.finish()\">{{ t.finish }}</hm-button>\n          } @else {\n            <hm-button emphasis=\"high\" (clicked)=\"setup.finish()\">{{ t.close }}</hm-button>\n          }\n        </div>\n      </section>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:fixed;inset:0;z-index:var(--hm-z-overlay);display:block;overflow:auto;background:var(--hm-surface);color:var(--hm-text)}.setup{display:flex;flex-direction:column;min-height:100%;max-width:76rem;margin:0 auto;padding:var(--hm-space-lg) var(--hm-space-xl) var(--hm-space-2xl);box-sizing:border-box}.setup__bar{display:flex;align-items:center;gap:var(--hm-space-md);min-height:var(--hm-control-height, 40px)}.setup__step{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.setup__dots{display:inline-flex;gap:6px}.setup__dot{width:24px;height:4px;border-radius:var(--hm-radius-pill);background:var(--hm-border)}.setup__dot--on{background:var(--hm-accent)}.setup__skip{margin-left:auto}.setup__body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(var(--hm-space-xl),5vw,5rem);align-items:center;padding-top:var(--hm-space-xl)}.setup__body--essentials{grid-template-columns:minmax(0,1fr);justify-items:center}.setup__title{margin:0;font-size:var(--hm-font-size-xxl);font-weight:var(--hm-font-weight-semibold);line-height:1.2;letter-spacing:-.01em;outline:none}.setup__intro{margin:var(--hm-space-sm) 0 0;max-width:34rem;color:var(--hm-muted);line-height:1.5}.setup__fields{display:flex;flex-direction:column;gap:var(--hm-space-lg);margin-top:var(--hm-space-xl)}.setup__field{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-xs)}.setup__field--wide{align-items:stretch}.setup__label{font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.setup__actions{display:flex;gap:var(--hm-space-sm);margin-top:var(--hm-space-xl)}.setup__preview{margin:0;display:flex;flex-direction:column;gap:var(--hm-space-sm)}.setup__preview-label{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase}.pv{display:flex;flex-direction:column;aspect-ratio:16/11;overflow:hidden;border:1px solid var(--hm-border);border-radius:14px;background:var(--hm-surface);box-shadow:var(--hm-shadow-lg)}.pv__header{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;background:var(--hm-navbar-surface);color:var(--hm-navbar-text);flex:none}.pv__brand{display:flex;align-items:center;height:18px;font-size:var(--hm-font-size-xs);pointer-events:none}.pv__brand ::ng-deep img{height:18px;width:auto}.pv__search{flex:0 1 36%;height:16px;margin-left:auto;border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--hm-navbar-text) 16%,transparent)}.pv__avatar{width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--hm-navbar-text) 30%,transparent)}.pv__body{flex:1;display:flex;min-height:0}.pv__side{display:flex;flex-direction:column;gap:8px;width:22%;padding:12px 10px;background:var(--hm-sidebar-bg);border-right:1px solid var(--hm-border);box-sizing:border-box}.pv__item{height:9px;border-radius:4px;background:color-mix(in srgb,var(--hm-text) 14%,transparent)}.pv__item--on{background:var(--hm-accent)}.pv__item--short{width:60%}.pv__main{flex:1;display:flex;flex-direction:column;min-width:0}.pv__tabs{display:flex;align-items:flex-end;gap:4px;height:26px;padding:0 8px;background:var(--hm-shell-tab-strip-bg);flex:none}.pv__tab{display:flex;align-items:center;width:64px;height:20px;padding:0 8px;border-radius:7px 7px 0 0;box-sizing:border-box;font-size:var(--hm-font-size-3xs);color:var(--hm-muted)}.pv__tab--on{background:var(--hm-surface-raised);color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.pv__page{flex:1;display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:var(--hm-surface-raised);min-height:0}.pv__title{width:38%;height:11px;border-radius:4px;background:color-mix(in srgb,var(--hm-text) 55%,transparent)}.pv__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pv__card{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--hm-border);border-radius:8px;background:var(--hm-surface)}.pv__num{width:40%;height:10px;border-radius:3px;background:var(--hm-accent)}.pv__line{display:block;width:70%;height:6px;border-radius:3px;background:color-mix(in srgb,var(--hm-text) 18%,transparent)}.pv__line--short{width:30%}.pv__table{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--hm-border);border-radius:8px}.pv__row{display:flex;align-items:center;justify-content:space-between;gap:8px;height:calc(16px * var(--hm-text-scale, 1));padding:0 8px;background:var(--hm-surface)}.pv__row:nth-child(odd):not(.pv__row--head){background:color-mix(in srgb,var(--hm-accent) 5%,var(--hm-surface))}:host-context([data-density=compact]) .pv__row{height:calc(12px * var(--hm-text-scale, 1))}.pv__row--head{background:color-mix(in srgb,var(--hm-accent) 20%,var(--hm-surface-raised))}.pv__buttons{display:flex;justify-content:flex-end;gap:6px;margin-top:auto}.pv__btn{width:52px;height:16px;border-radius:var(--hm-radius-control);background:var(--hm-action)}.pv__btn--ghost{background:transparent;border:1px solid var(--hm-border)}.setup__essentials{width:100%;max-width:56rem}.setup__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--hm-space-md);margin:var(--hm-space-xl) 0 0;padding:0;list-style:none}.setup__card{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-lg);border:1px solid var(--hm-border);border-radius:12px;background:var(--hm-surface-raised)}.setup__card-icon{display:inline-grid;place-items:center;width:36px;height:36px;margin-bottom:var(--hm-space-xs);border-radius:10px;background:var(--hm-accent-subtle);color:var(--hm-accent)}.setup__card-title{margin:0;font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.setup__card-text{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm);line-height:1.5}.setup__keys{display:inline-flex;gap:3px;vertical-align:baseline}.setup__keys kbd{padding:0 5px;border:1px solid var(--hm-border);border-bottom-width:2px;border-radius:5px;background:var(--hm-surface);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}@media(max-width:860px){.setup{padding:var(--hm-space-md)}.setup__body{grid-template-columns:minmax(0,1fr);align-items:start}.setup__preview{display:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: ThemePickerComponent, selector: "hm-theme-picker", inputs: ["families", "family", "theme", "showMode"], outputs: ["familyChosen", "themeChosen"] }, { kind: "component", type: SpineBrandComponent, selector: "spine-brand", inputs: ["homeRoute", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineInitialSetupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spine-initial-setup', imports: [ButtonComponent, IconComponent, SegmentedControlComponent, ThemePickerComponent, SpineBrandComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"setup\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"t.label\">\n  <div class=\"setup__bar\">\n    @if (stepTotal() > 1) {\n      <span class=\"setup__step\">{{ fmt(t.step, { current: stepNumber(), total: stepTotal() }) }}</span>\n      <span class=\"setup__dots\" aria-hidden=\"true\">\n        <span class=\"setup__dot\" [class.setup__dot--on]=\"stepNumber() >= 1\"></span>\n        <span class=\"setup__dot\" [class.setup__dot--on]=\"stepNumber() >= 2\"></span>\n      </span>\n    }\n    @if (setup.mode() === 'full') {\n      <hm-button class=\"setup__skip\" emphasis=\"minimal\" (clicked)=\"setup.finish()\">{{ t.skip }}</hm-button>\n    }\n  </div>\n\n  @if (setup.step() === 'appearance') {\n    <div class=\"setup__body\">\n      <section class=\"setup__form\">\n        <h1 #heading class=\"setup__title\" tabindex=\"-1\">{{ greeting }}</h1>\n        <p class=\"setup__intro\">{{ t.appearanceIntro }}</p>\n\n        <div class=\"setup__fields\">\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.theme }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.theme\" [options]=\"themeOptions\" [value]=\"themeMode()\" (valueChange)=\"setThemeMode($event)\" />\n          </div>\n\n          <div class=\"setup__field setup__field--wide\">\n            <span class=\"setup__label\">{{ s.accent }}</span>\n            <hm-theme-picker\n              [families]=\"families\"\n              [family]=\"family()\"\n              [theme]=\"appliedTheme()\"\n              [showMode]=\"false\"\n              (familyChosen)=\"setFamily($event)\"\n            />\n          </div>\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.density }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.density\" [options]=\"densityOptions\" [value]=\"densityValue()\" (valueChange)=\"setDensity($event)\" />\n          </div>\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.textSize }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.textSize\" [options]=\"textSizeOptions()\" [value]=\"textSizeValue()\" (valueChange)=\"setTextSize($event)\" />\n          </div>\n\n          @if (fontOptions.length > 1) {\n            <div class=\"setup__field\">\n              <span class=\"setup__label\">{{ s.font }}</span>\n              <hm-segmented-control emphasis=\"action\" [label]=\"s.font\" [options]=\"fontOptions\" [value]=\"fontValue()\" (valueChange)=\"setFont($event)\" />\n            </div>\n          }\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.motion }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.motion\" [options]=\"motionOptions\" [value]=\"preferences.motion()\" (valueChange)=\"setMotion($event)\" />\n          </div>\n        </div>\n\n        <div class=\"setup__actions\">\n          <hm-button emphasis=\"high\" iconEnd=\"arrow-right\" (clicked)=\"setup.next()\">{{ t.next }}</hm-button>\n        </div>\n      </section>\n\n      <!-- Pr\u00E9via: um shell em miniatura pintado com os tokens do tema, ent\u00E3o acompanha cada escolha. Decorativa. -->\n      <figure class=\"setup__preview\">\n        <figcaption class=\"setup__preview-label\">{{ t.preview }}</figcaption>\n        <div class=\"pv\" aria-hidden=\"true\">\n          <div class=\"pv__header\">\n            <spine-brand class=\"pv__brand\" [label]=\"appName\" />\n            <span class=\"pv__search\"></span>\n            <span class=\"pv__avatar\"></span>\n          </div>\n          <div class=\"pv__body\">\n            <div class=\"pv__side\">\n              <span class=\"pv__item pv__item--on\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item pv__item--short\"></span>\n            </div>\n            <div class=\"pv__main\">\n              <div class=\"pv__tabs\">\n                <span class=\"pv__tab pv__tab--on\">{{ t.previewPage }}</span>\n                <span class=\"pv__tab\"><span class=\"pv__line\"></span></span>\n                <span class=\"pv__tab\"><span class=\"pv__line\"></span></span>\n              </div>\n              <div class=\"pv__page\">\n                <span class=\"pv__title\"></span>\n                <div class=\"pv__cards\">\n                  @for (n of [1, 2, 3]; track n) {\n                    <span class=\"pv__card\"><span class=\"pv__num\"></span><span class=\"pv__line\"></span></span>\n                  }\n                </div>\n                <div class=\"pv__table\">\n                  <span class=\"pv__row pv__row--head\"></span>\n                  @for (n of [1, 2, 3, 4]; track n) {\n                    <span class=\"pv__row\"><span class=\"pv__line\"></span><span class=\"pv__line pv__line--short\"></span></span>\n                  }\n                </div>\n                <div class=\"pv__buttons\">\n                  <span class=\"pv__btn pv__btn--ghost\"></span>\n                  <span class=\"pv__btn\"></span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </figure>\n    </div>\n  } @else {\n    <div class=\"setup__body setup__body--essentials\">\n      <section class=\"setup__essentials\">\n        <h1 #heading class=\"setup__title\" tabindex=\"-1\">{{ t.essentialsTitle }}</h1>\n        <p class=\"setup__intro\">{{ t.essentialsIntro }}</p>\n\n        <ul class=\"setup__cards\">\n          @for (card of essentials; track card.id) {\n            <li class=\"setup__card\">\n              <span class=\"setup__card-icon\"><hm-icon [shape]=\"card.icon\" /></span>\n              <h2 class=\"setup__card-title\">{{ card.title }}</h2>\n              <p class=\"setup__card-text\">\n                {{ card.before }}@if (card.keys) {<span class=\"setup__keys\">@for (step of card.keys; track $index) {@for (key of step; track $index) {<kbd>{{ key.label }}</kbd>}}</span>}{{ card.after }}\n              </p>\n            </li>\n          }\n        </ul>\n\n        <div class=\"setup__actions\">\n          @if (setup.mode() === 'full') {\n            <hm-button emphasis=\"medium\" icon=\"arrow-left\" (clicked)=\"setup.back()\">{{ t.back }}</hm-button>\n            <hm-button emphasis=\"high\" (clicked)=\"setup.finish()\">{{ t.finish }}</hm-button>\n          } @else {\n            <hm-button emphasis=\"high\" (clicked)=\"setup.finish()\">{{ t.close }}</hm-button>\n          }\n        </div>\n      </section>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:fixed;inset:0;z-index:var(--hm-z-overlay);display:block;overflow:auto;background:var(--hm-surface);color:var(--hm-text)}.setup{display:flex;flex-direction:column;min-height:100%;max-width:76rem;margin:0 auto;padding:var(--hm-space-lg) var(--hm-space-xl) var(--hm-space-2xl);box-sizing:border-box}.setup__bar{display:flex;align-items:center;gap:var(--hm-space-md);min-height:var(--hm-control-height, 40px)}.setup__step{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.setup__dots{display:inline-flex;gap:6px}.setup__dot{width:24px;height:4px;border-radius:var(--hm-radius-pill);background:var(--hm-border)}.setup__dot--on{background:var(--hm-accent)}.setup__skip{margin-left:auto}.setup__body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(var(--hm-space-xl),5vw,5rem);align-items:center;padding-top:var(--hm-space-xl)}.setup__body--essentials{grid-template-columns:minmax(0,1fr);justify-items:center}.setup__title{margin:0;font-size:var(--hm-font-size-xxl);font-weight:650;line-height:1.2;letter-spacing:-.01em;outline:none}.setup__intro{margin:var(--hm-space-sm) 0 0;max-width:34rem;color:var(--hm-muted);line-height:1.5}.setup__fields{display:flex;flex-direction:column;gap:var(--hm-space-lg);margin-top:var(--hm-space-xl)}.setup__field{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-xs)}.setup__field--wide{align-items:stretch}.setup__label{font-size:var(--hm-font-size-sm);font-weight:600}.setup__actions{display:flex;gap:var(--hm-space-sm);margin-top:var(--hm-space-xl)}.setup__preview{margin:0;display:flex;flex-direction:column;gap:var(--hm-space-sm)}.setup__preview-label{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.pv{display:flex;flex-direction:column;aspect-ratio:16/11;overflow:hidden;border:1px solid var(--hm-border);border-radius:14px;background:var(--hm-surface);box-shadow:var(--hm-shadow-lg)}.pv__header{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;background:var(--hm-navbar-surface);color:var(--hm-navbar-text);flex:none}.pv__brand{display:flex;align-items:center;height:18px;font-size:11px;pointer-events:none}.pv__brand ::ng-deep img{height:18px;width:auto}.pv__search{flex:0 1 36%;height:16px;margin-left:auto;border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--hm-navbar-text) 16%,transparent)}.pv__avatar{width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--hm-navbar-text) 30%,transparent)}.pv__body{flex:1;display:flex;min-height:0}.pv__side{display:flex;flex-direction:column;gap:8px;width:22%;padding:12px 10px;background:var(--hm-sidebar-bg);border-right:1px solid var(--hm-border);box-sizing:border-box}.pv__item{height:9px;border-radius:4px;background:color-mix(in srgb,var(--hm-text) 14%,transparent)}.pv__item--on{background:var(--hm-accent)}.pv__item--short{width:60%}.pv__main{flex:1;display:flex;flex-direction:column;min-width:0}.pv__tabs{display:flex;align-items:flex-end;gap:4px;height:26px;padding:0 8px;background:var(--hm-shell-tab-strip-bg);flex:none}.pv__tab{display:flex;align-items:center;width:64px;height:20px;padding:0 8px;border-radius:7px 7px 0 0;box-sizing:border-box;font-size:9px;color:var(--hm-muted)}.pv__tab--on{background:var(--hm-surface-raised);color:var(--hm-text);font-weight:600}.pv__page{flex:1;display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:var(--hm-surface-raised);min-height:0}.pv__title{width:38%;height:11px;border-radius:4px;background:color-mix(in srgb,var(--hm-text) 55%,transparent)}.pv__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pv__card{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--hm-border);border-radius:8px;background:var(--hm-surface)}.pv__num{width:40%;height:10px;border-radius:3px;background:var(--hm-accent)}.pv__line{display:block;width:70%;height:6px;border-radius:3px;background:color-mix(in srgb,var(--hm-text) 18%,transparent)}.pv__line--short{width:30%}.pv__table{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--hm-border);border-radius:8px}.pv__row{display:flex;align-items:center;justify-content:space-between;gap:8px;height:calc(16px * var(--hm-text-scale, 1));padding:0 8px;background:var(--hm-surface)}.pv__row:nth-child(odd):not(.pv__row--head){background:color-mix(in srgb,var(--hm-accent) 5%,var(--hm-surface))}:host-context([data-density=compact]) .pv__row{height:calc(12px * var(--hm-text-scale, 1))}.pv__row--head{background:color-mix(in srgb,var(--hm-accent) 20%,var(--hm-surface-raised))}.pv__buttons{display:flex;justify-content:flex-end;gap:6px;margin-top:auto}.pv__btn{width:52px;height:16px;border-radius:var(--hm-radius-control);background:var(--hm-action)}.pv__btn--ghost{background:transparent;border:1px solid var(--hm-border)}.setup__essentials{width:100%;max-width:56rem}.setup__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--hm-space-md);margin:var(--hm-space-xl) 0 0;padding:0;list-style:none}.setup__card{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-lg);border:1px solid var(--hm-border);border-radius:12px;background:var(--hm-surface-raised)}.setup__card-icon{display:inline-grid;place-items:center;width:36px;height:36px;margin-bottom:var(--hm-space-xs);border-radius:10px;background:var(--hm-accent-subtle);color:var(--hm-accent)}.setup__card-title{margin:0;font-size:var(--hm-font-size-md);font-weight:600}.setup__card-text{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm);line-height:1.5}.setup__keys{display:inline-flex;gap:3px;vertical-align:baseline}.setup__keys kbd{padding:0 5px;border:1px solid var(--hm-border);border-bottom-width:2px;border-radius:5px;background:var(--hm-surface);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-xs);font-weight:600}@media(max-width:860px){.setup{padding:var(--hm-space-md)}.setup__body{grid-template-columns:minmax(0,1fr);align-items:start}.setup__preview{display:none}}\n"] }]
+            args: [{ selector: 'spine-initial-setup', imports: [ButtonComponent, IconComponent, SegmentedControlComponent, ThemePickerComponent, SpineBrandComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"setup\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"t.label\">\n  <div class=\"setup__bar\">\n    @if (stepTotal() > 1) {\n      <span class=\"setup__step\">{{ fmt(t.step, { current: stepNumber(), total: stepTotal() }) }}</span>\n      <span class=\"setup__dots\" aria-hidden=\"true\">\n        <span class=\"setup__dot\" [class.setup__dot--on]=\"stepNumber() >= 1\"></span>\n        <span class=\"setup__dot\" [class.setup__dot--on]=\"stepNumber() >= 2\"></span>\n      </span>\n    }\n    @if (setup.mode() === 'full') {\n      <hm-button class=\"setup__skip\" emphasis=\"minimal\" (clicked)=\"setup.finish()\">{{ t.skip }}</hm-button>\n    }\n  </div>\n\n  @if (setup.step() === 'appearance') {\n    <div class=\"setup__body\">\n      <section class=\"setup__form\">\n        <h1 #heading class=\"setup__title\" tabindex=\"-1\">{{ greeting }}</h1>\n        <p class=\"setup__intro\">{{ t.appearanceIntro }}</p>\n\n        <div class=\"setup__fields\">\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.theme }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.theme\" [options]=\"themeOptions\" [value]=\"themeMode()\" (valueChange)=\"setThemeMode($event)\" />\n          </div>\n\n          <div class=\"setup__field setup__field--wide\">\n            <span class=\"setup__label\">{{ s.accent }}</span>\n            <hm-theme-picker\n              [families]=\"families\"\n              [family]=\"family()\"\n              [theme]=\"appliedTheme()\"\n              [showMode]=\"false\"\n              (familyChosen)=\"setFamily($event)\"\n            />\n          </div>\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.density }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.density\" [options]=\"densityOptions\" [value]=\"densityValue()\" (valueChange)=\"setDensity($event)\" />\n          </div>\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.textSize }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.textSize\" [options]=\"textSizeOptions()\" [value]=\"textSizeValue()\" (valueChange)=\"setTextSize($event)\" />\n          </div>\n\n          @if (fontOptions.length > 1) {\n            <div class=\"setup__field\">\n              <span class=\"setup__label\">{{ s.font }}</span>\n              <hm-segmented-control emphasis=\"action\" [label]=\"s.font\" [options]=\"fontOptions\" [value]=\"fontValue()\" (valueChange)=\"setFont($event)\" />\n            </div>\n          }\n\n          <div class=\"setup__field\">\n            <span class=\"setup__label\">{{ s.motion }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"s.motion\" [options]=\"motionOptions\" [value]=\"preferences.motion()\" (valueChange)=\"setMotion($event)\" />\n          </div>\n        </div>\n\n        <div class=\"setup__actions\">\n          <hm-button emphasis=\"high\" iconEnd=\"arrow-right\" (clicked)=\"setup.next()\">{{ t.next }}</hm-button>\n        </div>\n      </section>\n\n      <!-- Pr\u00E9via: um shell em miniatura pintado com os tokens do tema, ent\u00E3o acompanha cada escolha. Decorativa. -->\n      <figure class=\"setup__preview\">\n        <figcaption class=\"setup__preview-label\">{{ t.preview }}</figcaption>\n        <div class=\"pv\" aria-hidden=\"true\">\n          <div class=\"pv__header\">\n            <spine-brand class=\"pv__brand\" [label]=\"appName\" />\n            <span class=\"pv__search\"></span>\n            <span class=\"pv__avatar\"></span>\n          </div>\n          <div class=\"pv__body\">\n            <div class=\"pv__side\">\n              <span class=\"pv__item pv__item--on\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item\"></span>\n              <span class=\"pv__item pv__item--short\"></span>\n            </div>\n            <div class=\"pv__main\">\n              <div class=\"pv__tabs\">\n                <span class=\"pv__tab pv__tab--on\">{{ t.previewPage }}</span>\n                <span class=\"pv__tab\"><span class=\"pv__line\"></span></span>\n                <span class=\"pv__tab\"><span class=\"pv__line\"></span></span>\n              </div>\n              <div class=\"pv__page\">\n                <span class=\"pv__title\"></span>\n                <div class=\"pv__cards\">\n                  @for (n of [1, 2, 3]; track n) {\n                    <span class=\"pv__card\"><span class=\"pv__num\"></span><span class=\"pv__line\"></span></span>\n                  }\n                </div>\n                <div class=\"pv__table\">\n                  <span class=\"pv__row pv__row--head\"></span>\n                  @for (n of [1, 2, 3, 4]; track n) {\n                    <span class=\"pv__row\"><span class=\"pv__line\"></span><span class=\"pv__line pv__line--short\"></span></span>\n                  }\n                </div>\n                <div class=\"pv__buttons\">\n                  <span class=\"pv__btn pv__btn--ghost\"></span>\n                  <span class=\"pv__btn\"></span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </figure>\n    </div>\n  } @else {\n    <div class=\"setup__body setup__body--essentials\">\n      <section class=\"setup__essentials\">\n        <h1 #heading class=\"setup__title\" tabindex=\"-1\">{{ t.essentialsTitle }}</h1>\n        <p class=\"setup__intro\">{{ t.essentialsIntro }}</p>\n\n        <ul class=\"setup__cards\">\n          @for (card of essentials; track card.id) {\n            <li class=\"setup__card\">\n              <span class=\"setup__card-icon\"><hm-icon [shape]=\"card.icon\" /></span>\n              <h2 class=\"setup__card-title\">{{ card.title }}</h2>\n              <p class=\"setup__card-text\">\n                {{ card.before }}@if (card.keys) {<span class=\"setup__keys\">@for (step of card.keys; track $index) {@for (key of step; track $index) {<kbd>{{ key.label }}</kbd>}}</span>}{{ card.after }}\n              </p>\n            </li>\n          }\n        </ul>\n\n        <div class=\"setup__actions\">\n          @if (setup.mode() === 'full') {\n            <hm-button emphasis=\"medium\" icon=\"arrow-left\" (clicked)=\"setup.back()\">{{ t.back }}</hm-button>\n            <hm-button emphasis=\"high\" (clicked)=\"setup.finish()\">{{ t.finish }}</hm-button>\n          } @else {\n            <hm-button emphasis=\"high\" (clicked)=\"setup.finish()\">{{ t.close }}</hm-button>\n          }\n        </div>\n      </section>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:fixed;inset:0;z-index:var(--hm-z-overlay);display:block;overflow:auto;background:var(--hm-surface);color:var(--hm-text)}.setup{display:flex;flex-direction:column;min-height:100%;max-width:76rem;margin:0 auto;padding:var(--hm-space-lg) var(--hm-space-xl) var(--hm-space-2xl);box-sizing:border-box}.setup__bar{display:flex;align-items:center;gap:var(--hm-space-md);min-height:var(--hm-control-height, 40px)}.setup__step{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.setup__dots{display:inline-flex;gap:6px}.setup__dot{width:24px;height:4px;border-radius:var(--hm-radius-pill);background:var(--hm-border)}.setup__dot--on{background:var(--hm-accent)}.setup__skip{margin-left:auto}.setup__body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(var(--hm-space-xl),5vw,5rem);align-items:center;padding-top:var(--hm-space-xl)}.setup__body--essentials{grid-template-columns:minmax(0,1fr);justify-items:center}.setup__title{margin:0;font-size:var(--hm-font-size-xxl);font-weight:var(--hm-font-weight-semibold);line-height:1.2;letter-spacing:-.01em;outline:none}.setup__intro{margin:var(--hm-space-sm) 0 0;max-width:34rem;color:var(--hm-muted);line-height:1.5}.setup__fields{display:flex;flex-direction:column;gap:var(--hm-space-lg);margin-top:var(--hm-space-xl)}.setup__field{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-xs)}.setup__field--wide{align-items:stretch}.setup__label{font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.setup__actions{display:flex;gap:var(--hm-space-sm);margin-top:var(--hm-space-xl)}.setup__preview{margin:0;display:flex;flex-direction:column;gap:var(--hm-space-sm)}.setup__preview-label{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase}.pv{display:flex;flex-direction:column;aspect-ratio:16/11;overflow:hidden;border:1px solid var(--hm-border);border-radius:14px;background:var(--hm-surface);box-shadow:var(--hm-shadow-lg)}.pv__header{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;background:var(--hm-navbar-surface);color:var(--hm-navbar-text);flex:none}.pv__brand{display:flex;align-items:center;height:18px;font-size:var(--hm-font-size-xs);pointer-events:none}.pv__brand ::ng-deep img{height:18px;width:auto}.pv__search{flex:0 1 36%;height:16px;margin-left:auto;border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--hm-navbar-text) 16%,transparent)}.pv__avatar{width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--hm-navbar-text) 30%,transparent)}.pv__body{flex:1;display:flex;min-height:0}.pv__side{display:flex;flex-direction:column;gap:8px;width:22%;padding:12px 10px;background:var(--hm-sidebar-bg);border-right:1px solid var(--hm-border);box-sizing:border-box}.pv__item{height:9px;border-radius:4px;background:color-mix(in srgb,var(--hm-text) 14%,transparent)}.pv__item--on{background:var(--hm-accent)}.pv__item--short{width:60%}.pv__main{flex:1;display:flex;flex-direction:column;min-width:0}.pv__tabs{display:flex;align-items:flex-end;gap:4px;height:26px;padding:0 8px;background:var(--hm-shell-tab-strip-bg);flex:none}.pv__tab{display:flex;align-items:center;width:64px;height:20px;padding:0 8px;border-radius:7px 7px 0 0;box-sizing:border-box;font-size:var(--hm-font-size-3xs);color:var(--hm-muted)}.pv__tab--on{background:var(--hm-surface-raised);color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.pv__page{flex:1;display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:var(--hm-surface-raised);min-height:0}.pv__title{width:38%;height:11px;border-radius:4px;background:color-mix(in srgb,var(--hm-text) 55%,transparent)}.pv__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pv__card{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--hm-border);border-radius:8px;background:var(--hm-surface)}.pv__num{width:40%;height:10px;border-radius:3px;background:var(--hm-accent)}.pv__line{display:block;width:70%;height:6px;border-radius:3px;background:color-mix(in srgb,var(--hm-text) 18%,transparent)}.pv__line--short{width:30%}.pv__table{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--hm-border);border-radius:8px}.pv__row{display:flex;align-items:center;justify-content:space-between;gap:8px;height:calc(16px * var(--hm-text-scale, 1));padding:0 8px;background:var(--hm-surface)}.pv__row:nth-child(odd):not(.pv__row--head){background:color-mix(in srgb,var(--hm-accent) 5%,var(--hm-surface))}:host-context([data-density=compact]) .pv__row{height:calc(12px * var(--hm-text-scale, 1))}.pv__row--head{background:color-mix(in srgb,var(--hm-accent) 20%,var(--hm-surface-raised))}.pv__buttons{display:flex;justify-content:flex-end;gap:6px;margin-top:auto}.pv__btn{width:52px;height:16px;border-radius:var(--hm-radius-control);background:var(--hm-action)}.pv__btn--ghost{background:transparent;border:1px solid var(--hm-border)}.setup__essentials{width:100%;max-width:56rem}.setup__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--hm-space-md);margin:var(--hm-space-xl) 0 0;padding:0;list-style:none}.setup__card{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-lg);border:1px solid var(--hm-border);border-radius:12px;background:var(--hm-surface-raised)}.setup__card-icon{display:inline-grid;place-items:center;width:36px;height:36px;margin-bottom:var(--hm-space-xs);border-radius:10px;background:var(--hm-accent-subtle);color:var(--hm-accent)}.setup__card-title{margin:0;font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.setup__card-text{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm);line-height:1.5}.setup__keys{display:inline-flex;gap:3px;vertical-align:baseline}.setup__keys kbd{padding:0 5px;border:1px solid var(--hm-border);border-bottom-width:2px;border-radius:5px;background:var(--hm-surface);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}@media(max-width:860px){.setup{padding:var(--hm-space-md)}.setup__body{grid-template-columns:minmax(0,1fr);align-items:start}.setup__preview{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.ViewChild, args: ['heading', { isSignal: true }] }] } });
 
 /** Novidades por chamada ao servidor: o painel lê as páginas em sequência até ter tudo (ou o teto). */
@@ -3328,7 +3414,7 @@ class SpineNewsComponent {
         </ng-container>
       </hm-modal>
     }
-  `, isInline: true, styles: [".news-state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-sm);margin:0}.news-state--muted{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.news-tools{display:flex;flex-direction:column;gap:var(--hm-space-sm);margin-block-end:var(--hm-space-md)}.news-filters{display:flex;flex-wrap:wrap;gap:var(--hm-space-xs)}.news-filter{display:inline-flex;align-items:center;gap:var(--hm-space-xs);padding:var(--hm-space-micro) var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-pill);background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);cursor:pointer}.news-filter:hover{background:var(--hm-hover)}.news-filter:focus-visible,.news-item:focus-visible,.news-fav:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:2px}.news-filter--on{border-color:var(--hm-accent);background:var(--hm-accent-subtle);color:var(--hm-accent);font-weight:var(--hm-font-weight-semibold)}.news-filter__count{font-size:var(--hm-font-size-xs);opacity:.8}.news-groups{display:flex;flex-direction:column;gap:var(--hm-space-md)}.news-groups[aria-busy=true]{opacity:.8}.news-month{display:flex;flex-direction:column;gap:var(--hm-space-xs)}.news-month .news-list{border-block-start:var(--hm-border-hairline) solid var(--hm-border)}.news-pages{margin-inline-end:auto}.news-month__title{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase}.news-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.news-row{position:relative;display:flex;align-items:flex-start;gap:var(--hm-space-xs);border-block-end:var(--hm-border-hairline) solid var(--hm-border)}.news-row:last-child{border-block-end:0}.news-row--selected{background:var(--hm-accent-subtle)}.news-row--selected:before{content:\"\";position:absolute;inset-block:var(--hm-space-xs);inset-inline-start:0;inline-size:3px;border-radius:var(--hm-radius-pill);background:var(--hm-accent)}.news-item{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0;padding:var(--hm-space-sm) var(--hm-space-xs) var(--hm-space-sm) var(--hm-space-sm);border:0;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.news-item:hover{background:var(--hm-hover)}.news-item__meta{display:flex;align-items:center;gap:var(--hm-space-xs)}.news-item__date{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.news-item__badge{padding:var(--hm-space-nano) var(--hm-space-xs);border-radius:var(--hm-radius-pill);background:var(--hm-accent-subtle);color:var(--hm-accent);font-size:var(--hm-font-size-3xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.news-item__title{color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-tight)}.news-item__summary{display:-webkit-box;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-sm);line-height:var(--hm-line-height-normal);-webkit-box-orient:vertical;-webkit-line-clamp:2}.news-item__author{display:inline-flex;align-items:center;gap:var(--hm-space-xs);color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.news-fav{display:grid;flex:none;place-items:center;inline-size:var(--hm-control-height);block-size:var(--hm-control-height);margin-block-start:var(--hm-space-sm);border:0;border-radius:var(--hm-radius-control);background:transparent;color:var(--hm-muted);cursor:pointer}.news-fav:hover{background:var(--hm-hover);color:var(--hm-text)}.news-fav--on{color:var(--hm-accent)}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.news-read)>.hm-modal__header{position:absolute;z-index:1;inset-block-start:0;inset-inline-end:0;border:0;padding:var(--hm-space-sm)}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.news-read) .hm-modal__heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.news-read{display:flex;flex-direction:column;gap:var(--hm-space-sm);padding-block-start:var(--hm-space-xs)}.news-read__head{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding-inline-end:calc(var(--hm-control-height) + var(--hm-space-sm));padding-block-end:var(--hm-space-md);border-block-end:var(--hm-border-hairline) solid var(--hm-divider)}.news-read__title-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm)}.news-read__title{color:var(--hm-text);font-size:var(--hm-font-size-xxl);font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-tight)}.news-read__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-md);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.news-read__meta-part{display:inline-flex;align-items:center;gap:var(--hm-space-xs)}.news-read__tag{display:inline-flex;align-items:center;gap:var(--hm-space-micro);padding:var(--hm-space-nano) var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-pill);background:var(--hm-surface-muted);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.news-read__lead{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg);line-height:var(--hm-line-height-snug)}.news-read__section{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.news-read__section-title,.news-compare__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg);font-weight:var(--hm-font-weight-bold)}.news-changes{display:flex;flex-direction:column;gap:var(--hm-space-xs);margin:0;padding:0;list-style:none}.news-changes__item{display:flex;align-items:flex-start;gap:var(--hm-space-xs);color:var(--hm-text);font-size:var(--hm-font-size-sm);line-height:var(--hm-line-height-normal)}.news-changes__icon{flex:none;margin-block-start:2px;color:var(--hm-success)}.news-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--hm-space-md)}.news-compare__side{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:0;padding:var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-divider);border-inline-start-width:var(--hm-border-thin);border-radius:var(--hm-radius)}.news-compare__side--before{border-inline-start-color:var(--hm-muted);background:var(--hm-surface-muted)}.news-compare__side--after{border-inline-start-color:var(--hm-success);background:var(--hm-surface-raised)}.news-compare__side--after .news-compare__title{color:var(--hm-success)}.news-read__edited{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.news-read__unread{margin-inline-end:auto}.news-read__body ::ng-deep .hm-rich-text__frame{border:0;background:transparent}.news-read__body ::ng-deep .hm-rich-text__area{padding:0;min-block-size:0}.news-read__body ::ng-deep .hm-prose>:last-child{margin-block-end:0}.news-read__body ::ng-deep :is(h2,h3){color:var(--hm-text);font-weight:var(--hm-font-weight-bold)}\n"], dependencies: [{ kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading"] }, { kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: BreadcrumbComponent, selector: "hm-breadcrumb", inputs: ["items", "maxItems", "itemsBeforeCollapse", "itemsAfterCollapse", "label", "loading"], outputs: ["itemClick"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: DrawerComponent, selector: "hm-drawer", inputs: ["open", "heading", "size", "position", "pinned", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: PaginatorComponent, selector: "hm-paginator", inputs: ["state", "totalItems", "variant", "label", "showPage", "hasNext", "hasPrevious", "sizes", "maxNumbers"], outputs: ["stateChanged", "nextPage", "previousPage"] }, { kind: "component", type: RichTextComponent, selector: "hm-rich-text", inputs: ["value", "label", "labelHidden", "hint", "placeholder", "readonly", "loading", "tools", "headingLevels", "hideToolbar", "rows", "maxRows", "maxLength", "showCounter", "pasteMode", "linkProtocols", "allowRelativeLinks", "spellcheck"], outputs: ["valueChange", "focusChange"] }, { kind: "component", type: SearchFieldComponent, selector: "hm-search-field", inputs: ["value", "label", "labelHidden", "placeholder", "hint", "size", "debounce", "landmark", "loading"], outputs: ["valueChange", "search", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".news-state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hm-space-sm);margin:0}.news-state--muted{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.news-tools{display:flex;flex-direction:column;gap:var(--hm-space-sm);margin-block-end:var(--hm-space-md)}.news-filters{display:flex;flex-wrap:wrap;gap:var(--hm-space-xs)}.news-filter{display:inline-flex;align-items:center;gap:var(--hm-space-xs);padding:var(--hm-space-micro) var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-pill);background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);cursor:pointer}.news-filter:hover{background:var(--hm-hover)}.news-filter:focus-visible,.news-item:focus-visible,.news-fav:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:2px}.news-filter--on{border-color:var(--hm-accent);background:var(--hm-accent-subtle);color:var(--hm-accent);font-weight:var(--hm-font-weight-semibold)}.news-filter__count{font-size:var(--hm-font-size-xs);opacity:.8}.news-groups{display:flex;flex-direction:column;gap:var(--hm-space-md)}.news-groups[aria-busy=true]{opacity:.8}.news-month{display:flex;flex-direction:column;gap:var(--hm-space-xs)}.news-month .news-list{border-block-start:var(--hm-border-hairline) solid var(--hm-border)}.news-pages{margin-inline-end:auto}.news-month__title{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase}.news-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.news-row{position:relative;display:flex;align-items:flex-start;gap:var(--hm-space-xs);border-block-end:var(--hm-border-hairline) solid var(--hm-border)}.news-row:last-child{border-block-end:0}.news-row--selected{background:var(--hm-accent-subtle)}.news-row--selected:before{content:\"\";position:absolute;inset-block:var(--hm-space-xs);inset-inline-start:0;inline-size:3px;border-radius:var(--hm-radius-pill);background:var(--hm-accent)}.news-item{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0;padding:var(--hm-space-sm) var(--hm-space-xs) var(--hm-space-sm) var(--hm-space-sm);border:0;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.news-item:hover{background:var(--hm-hover)}.news-item__meta{display:flex;align-items:center;gap:var(--hm-space-xs)}.news-item__date{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.news-item__badge{padding:var(--hm-space-nano) var(--hm-space-xs);border-radius:var(--hm-radius-pill);background:var(--hm-accent-subtle);color:var(--hm-accent);font-size:var(--hm-font-size-3xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.news-item__title{color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-tight)}.news-item__summary{display:-webkit-box;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-sm);line-height:var(--hm-line-height-normal);-webkit-box-orient:vertical;-webkit-line-clamp:2}.news-item__author{display:inline-flex;align-items:center;gap:var(--hm-space-xs);color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.news-fav{display:grid;flex:none;place-items:center;inline-size:var(--hm-control-height);block-size:var(--hm-control-height);margin-block-start:var(--hm-space-sm);border:0;border-radius:var(--hm-radius-control);background:transparent;color:var(--hm-muted);cursor:pointer}.news-fav:hover{background:var(--hm-hover);color:var(--hm-text)}.news-fav--on{color:var(--hm-accent)}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.news-read)>.hm-modal__header{position:absolute;z-index:1;inset-block-start:0;inset-inline-end:0;border:0;padding:var(--hm-space-sm)}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.news-read) .hm-modal__heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.news-read{display:flex;flex-direction:column;gap:var(--hm-space-sm);padding-block-start:var(--hm-space-xs)}.news-read__head{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding-inline-end:calc(var(--hm-control-height) + var(--hm-space-sm));padding-block-end:var(--hm-space-md);border-block-end:var(--hm-border-hairline) solid var(--hm-divider)}.news-read__title-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm)}.news-read__title{color:var(--hm-text);font-size:var(--hm-font-size-xxl);font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-tight)}.news-read__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-md);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.news-read__meta-part{display:inline-flex;align-items:center;gap:var(--hm-space-xs)}.news-read__tag{display:inline-flex;align-items:center;gap:var(--hm-space-micro);padding:var(--hm-space-nano) var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-pill);background:var(--hm-surface-muted);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.news-read__lead{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg);line-height:var(--hm-line-height-snug)}.news-read__section{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.news-read__section-title,.news-compare__title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg);font-weight:var(--hm-font-weight-bold)}.news-changes{display:flex;flex-direction:column;gap:var(--hm-space-xs);margin:0;padding:0;list-style:none}.news-changes__item{display:flex;align-items:flex-start;gap:var(--hm-space-xs);color:var(--hm-text);font-size:var(--hm-font-size-sm);line-height:var(--hm-line-height-normal)}.news-changes__icon{flex:none;margin-block-start:2px;color:var(--hm-success)}.news-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--hm-space-md)}.news-compare__side{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:0;padding:var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-divider);border-inline-start-width:var(--hm-border-thin);border-radius:var(--hm-radius)}.news-compare__side--before{border-inline-start-color:var(--hm-muted);background:var(--hm-surface-muted)}.news-compare__side--after{border-inline-start-color:var(--hm-success);background:var(--hm-surface-raised)}.news-compare__side--after .news-compare__title{color:var(--hm-success)}.news-read__edited{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.news-read__unread{margin-inline-end:auto}.news-read__body ::ng-deep .hm-rich-text__frame{border:0;background:transparent}.news-read__body ::ng-deep .hm-rich-text__area{padding:0;min-block-size:0}.news-read__body ::ng-deep .hm-prose>:last-child{margin-block-end:0}.news-read__body ::ng-deep :is(h2,h3){color:var(--hm-text);font-weight:var(--hm-font-weight-bold)}\n"], dependencies: [{ kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading", "presence", "texts"] }, { kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: BreadcrumbComponent, selector: "hm-breadcrumb", inputs: ["items", "maxItems", "itemsBeforeCollapse", "itemsAfterCollapse", "label", "loading"], outputs: ["itemClick"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: DrawerComponent, selector: "hm-drawer", inputs: ["open", "heading", "size", "position", "pinned", "closeLabel", "closable", "closeOnBackdrop", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: PaginatorComponent, selector: "hm-paginator", inputs: ["state", "totalItems", "variant", "label", "showPage", "hasNext", "hasPrevious", "sizes", "maxNumbers"], outputs: ["stateChanged", "nextPage", "previousPage"] }, { kind: "component", type: RichTextComponent, selector: "hm-rich-text", inputs: ["value", "label", "labelHidden", "hint", "placeholder", "readonly", "loading", "tools", "headingLevels", "hideToolbar", "rows", "maxRows", "maxLength", "showCounter", "pasteMode", "linkProtocols", "allowRelativeLinks", "spellcheck"], outputs: ["valueChange", "focusChange"] }, { kind: "component", type: SearchFieldComponent, selector: "hm-search-field", inputs: ["value", "label", "labelHidden", "placeholder", "hint", "size", "debounce", "landmark", "loading"], outputs: ["valueChange", "search", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineNewsComponent, decorators: [{
             type: Component,
@@ -5390,6 +5476,114 @@ 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: () => [] });
 
+// Mesma peça de argos admin/ui src/shared/members-loader.ts (o painel central usa a dele). Interna deste ponto de
+// entrada: não vai no public-api.
+/** Membros por página pedidos ao servidor: o teto das rotas `GET …/members` do argos-admin. */
+const MEMBERS_PAGE_LIMIT = 200;
+/**
+ * Lista inteira de membros carregada aos poucos: o servidor pagina (nunca monta o grupo inteiro em memória) e a tela
+ * pede as páginas uma depois da outra, acrescentando conforme chegam, até ter o `total` (ou vir uma página vazia). A
+ * lista já aparece e funciona com a primeira página; `loading` diz que ainda há páginas a caminho.
+ *
+ * `cancel()` desfaz a inscrição da requisição pendente (o HttpClient a cancela); chame ao fechar a tela ou trocar de
+ * grupo. Falha numa página para em `error`, com o que já chegou intacto; `retry()` continua da página que falhou.
+ */
+class MembersLoader {
+    constructor(fetchPage, idOf) {
+        this.fetchPage = fetchPage;
+        this.idOf = idOf;
+        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Total do servidor (o grupo inteiro). */
+        this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        /** Ainda pedindo páginas. */
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** A primeira página já chegou (antes dela a tela mostra o estado de carregando). */
+        this.ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+        this.error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.loaded = computed(() => this.items().length, ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+        this.current = null;
+        this.nextPage = 1;
+        this.ids = new Set();
+    }
+    /** Recomeça do zero (cancela o que estava a caminho). */
+    start() {
+        this.cancel();
+        this.items.set([]);
+        this.ids.clear();
+        this.total.set(0);
+        this.ready.set(false);
+        this.error.set(null);
+        this.nextPage = 1;
+        this.fetchNext();
+    }
+    /** Depois de uma falha: continua da página que falhou, sem perder o que já chegou. */
+    retry() {
+        if (this.loading())
+            return;
+        this.error.set(null);
+        this.fetchNext();
+    }
+    cancel() {
+        this.current?.unsubscribe();
+        this.current = null;
+        this.loading.set(false);
+    }
+    /**
+     * Mudança feita pela própria tela depois de gravar (incluir, remover, trocar função), sem reler: `totalDelta` mantém o
+     * total coerente com a lista.
+     */
+    patch(change, totalDelta = 0) {
+        const next = change(this.items());
+        this.ids.clear();
+        for (const item of next)
+            this.ids.add(this.idOf(item));
+        this.items.set(next);
+        this.total.update((n) => Math.max(next.length, n + totalDelta));
+    }
+    fetchNext() {
+        this.loading.set(true);
+        // A continuação (próxima página) roda no `complete`; com uma resposta síncrona ela começa antes do `subscribe`
+        // devolver, por isso a inscrição vai num contêiner criado antes.
+        const holder = new Subscription();
+        this.current = holder;
+        let more = false;
+        holder.add(this.fetchPage(this.nextPage).subscribe({
+            next: (res) => {
+                const page = res.members ?? [];
+                const fresh = page.filter((item) => !this.ids.has(this.idOf(item)));
+                for (const item of fresh)
+                    this.ids.add(this.idOf(item));
+                if (fresh.length)
+                    this.items.update((list) => [...list, ...fresh]);
+                this.total.set(Math.max(res.total ?? 0, this.items().length));
+                this.ready.set(true);
+                this.nextPage += 1;
+                // Página vazia, ou só com quem já chegou (o servidor mudou no meio), encerra: sem isso a carga não teria fim.
+                more = fresh.length > 0 && this.items().length < this.total();
+            },
+            error: (err) => {
+                if (this.current !== holder)
+                    return;
+                this.current = null;
+                this.error.set(err);
+                this.ready.set(true);
+                this.loading.set(false);
+            },
+            complete: () => {
+                if (this.current !== holder)
+                    return;
+                if (more) {
+                    this.fetchNext();
+                }
+                else {
+                    this.current = null;
+                    this.loading.set(false);
+                }
+            },
+        }));
+    }
+}
+
 /**
  * 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).
@@ -5425,8 +5619,19 @@ class SpineMyGroupsService {
             this.groups.set([]);
         }
     }
-    members(groupId) {
-        return firstValueFrom(this.http.get(`${this.baseUrl}${urlPath `/${groupId}/members`}`, { headers: this.headers }));
+    /**
+     * Uma página dos membros, pela ordem do login. Observable (não Promise): a tela pede as páginas até o fim e cancela a
+     * pendente ao sair.
+     */
+    members(groupId, query = {}) {
+        let params = new HttpParams();
+        if (query.page)
+            params = params.set('page', query.page);
+        if (query.limit)
+            params = params.set('limit', query.limit);
+        if (query.search?.trim())
+            params = params.set('search', query.search.trim());
+        return this.http.get(`${this.baseUrl}${urlPath `/${groupId}/members`}`, { headers: this.headers, params });
     }
     searchUsers(search, limit = 10) {
         return firstValueFrom(this.http.get(`${this.baseUrl}/users`, {
@@ -5470,6 +5675,9 @@ function groupRoleLabel(text, role) {
  * 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.
+ *
+ * A lista inteira vem do servidor em páginas, uma depois da outra (`MembersLoader`), e já funciona com a primeira; a
+ * busca é local e instantânea sobre o que já chegou.
  */
 class MyGroupComponent {
     constructor() {
@@ -5481,16 +5689,39 @@ class MyGroupComponent {
         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 */ []));
+        /** Todos os membros, carregados aos poucos (o servidor pagina; aqui se pede até o fim). */
+        this.loader = new MembersLoader((page) => this.service.members(this.group().id, { page, limit: MEMBERS_PAGE_LIMIT }), (m) => m.user_id.toLowerCase());
+        /** Busca na lista: local e instantânea (nome, login, e-mail). */
+        this.filterControl = new FormControl('', { nonNullable: true });
+        this.filter = toSignal(this.filterControl.valueChanges, { initialValue: '' });
         /** 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 */ []));
+        this.members = computed(() => {
+            const term = this.filter().trim().toLowerCase();
+            const all = this.loader.items();
+            if (!term)
+                return all;
+            return all.filter((m) => [m.name, m.username, m.email].some((v) => (v ?? '').toLowerCase().includes(term)));
+        }, ...(ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []));
+        this.countLabel = computed(() => {
+            const locale = this.i18n.formatLocale();
+            return this.filter().trim()
+                ? pluralMessage(this.text.matchesCount, this.members().length, locale)
+                : pluralMessage(this.text.membersCount, this.loader.total(), locale);
+        }, ...(ngDevMode ? [{ debugName: "countLabel" }] : /* istanbul ignore next */ []));
+        /** "Carregando membros… 400 de 1.250". */
+        this.progressLabel = computed(() => {
+            const number = new Intl.NumberFormat(this.i18n.formatLocale());
+            return formatMessage(this.text.loadingProgress, { loaded: number.format(this.loader.loaded()), total: number.format(this.loader.total()) });
+        }, ...(ngDevMode ? [{ debugName: "progressLabel" }] : /* istanbul ignore next */ []));
+        this.incompleteLabel = computed(() => {
+            const number = new Intl.NumberFormat(this.i18n.formatLocale());
+            return formatMessage(this.text.loadIncomplete, { loaded: number.format(this.loader.loaded()), total: number.format(this.loader.total()) });
+        }, ...(ngDevMode ? [{ debugName: "incompleteLabel" }] : /* 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 },
@@ -5505,13 +5736,16 @@ class MyGroupComponent {
         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.memberIds = computed(() => new Set(this.loader.items().map((m) => m.user_id.toLowerCase())), ...(ngDevMode ? [{ debugName: "memberIds" }] : /* istanbul ignore next */ []));
+        const destroyRef = inject(DestroyRef);
         this.searchControl.valueChanges
-            .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(inject(DestroyRef)))
+            .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(destroyRef))
             .subscribe((value) => void this.search(value));
+        // Sair da tela (voltar aos grupos, fechar o painel) cancela a página que estiver a caminho.
+        destroyRef.onDestroy(() => this.loader.cancel());
     }
     ngOnInit() {
-        void this.load();
+        this.loader.start();
     }
     roleLabel(role) {
         return groupRoleLabel(this.text, role);
@@ -5519,6 +5753,7 @@ class MyGroupComponent {
     isMe(member) {
         return member.user_id.toLowerCase() === this.me;
     }
+    /** Já é membro? Com a lista ainda carregando, quem não chegou passa (e o servidor responde "já é membro"). */
     isMember(user) {
         return this.memberIds().has(user.id.toLowerCase());
     }
@@ -5532,21 +5767,15 @@ class MyGroupComponent {
     canChangeRole(member) {
         return this.group().can_change_roles && !this.isMe(member);
     }
-    /** `silent`: relê sem trocar a lista pelo "carregando" (depois de incluir; a primeira carga mostra o estado). */
-    async load(silent = false) {
-        if (!silent)
-            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);
-        }
+    /**
+     * Depois de gravar: muda a lista na tela, sem reler. Inclusão e remoção deslocam as páginas do servidor, então com a
+     * carga ainda em andamento ela recomeça do zero (senão alguém ficaria de fora ou repetido).
+     */
+    afterWrite(change, totalDelta) {
+        if (totalDelta !== 0 && this.loader.loading())
+            this.loader.start();
+        else
+            this.loader.patch(change, totalDelta);
     }
     async changeRole(member, value) {
         const role = (value || null);
@@ -5555,12 +5784,12 @@ class MyGroupComponent {
         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.afterWrite((list) => list.map((m) => (m.user_id === member.user_id ? { ...m, role } : m)), 0);
             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();
+            this.loader.start();
         }
         finally {
             this.busy.set(null);
@@ -5575,12 +5804,12 @@ class MyGroupComponent {
         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.afterWrite((list) => list.filter((m) => m.user_id !== member.user_id), -1);
             this.toast.success(formatMessage(this.text.removed, { name: displayName(member) }));
         }
         catch (err) {
             this.toast.error(errorText(err, this.text.removeError));
-            await this.load();
+            this.loader.start();
         }
         finally {
             this.busy.set(null);
@@ -5638,7 +5867,12 @@ class MyGroupComponent {
             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(true);
+            const added = {
+                user_id: user.id, username: user.username, email: user.email, name: user.name, enabled: user.enabled, role,
+                picture: user.picture ?? null, joined_at: new Date().toISOString(), added_by_username: null,
+            };
+            // Entra na posição do login, como o servidor ordena.
+            this.afterWrite((list) => [...list, added].sort((a, b) => a.username.localeCompare(b.username)), 1);
         }
         catch (err) {
             this.toast.error(errorText(err, this.text.addError));
@@ -5648,14 +5882,14 @@ class MyGroupComponent {
         }
     }
     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              <!-- Confirmando a remo\u00E7\u00E3o, a linha mostra s\u00F3 Cancelar e Confirmar (a fun\u00E7\u00E3o n\u00E3o importa mais). -->\n              @if (canChangeRole(m) && confirmingRemove() !== m.user_id) {\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 emphasis=\"medium\" (clicked)=\"cancelRemove()\">{{ text.cancel }}</hm-button>\n                }\n                <hm-button\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__faces{flex:none;margin-inline-start:auto}.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", "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 }); }
+    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<!-- Busca na lista: local e instant\u00E2nea sobre o que j\u00E1 chegou. Fica fora do \"carregando\" para n\u00E3o perder o foco. -->\n<hm-input\n  class=\"sp-group__filter\"\n  icon=\"search\"\n  type=\"search\"\n  autocomplete=\"off\"\n  [label]=\"text.filterMembers\"\n  [placeholder]=\"text.searchPlaceholder\"\n  [formControl]=\"filterControl\"\n/>\n\n@if (loader.error()) {\n  <!-- Falha numa p\u00E1gina: o que j\u00E1 chegou continua na lista; \"Tentar de novo\" segue de onde parou. -->\n  <div class=\"sp-group__status\">\n    <p class=\"sp-account__note sp-account__note--error\">{{ loader.loaded() ? incompleteLabel() : text.loadError }}</p>\n    <hm-button size=\"small\" emphasis=\"medium\" icon=\"refresh\" (clicked)=\"loader.retry()\">{{ text.retry }}</hm-button>\n  </div>\n} @else if (loader.loading() && loader.ready()) {\n  <p class=\"sp-account__note sp-group__status\" role=\"status\">\n    {{ progressLabel() }}@if (filter().trim()) { \u00B7 {{ text.partialResults }} }\n  </p>\n}\n\n@if (!loader.ready()) {\n  <p class=\"sp-account__note\" role=\"status\">{{ text.loading }}</p>\n} @else if (loader.loaded() || !loader.error()) {\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              <!-- Confirmando a remo\u00E7\u00E3o, a linha mostra s\u00F3 Cancelar e Confirmar (a fun\u00E7\u00E3o n\u00E3o importa mais). -->\n              @if (canChangeRole(m) && confirmingRemove() !== m.user_id) {\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 emphasis=\"medium\" (clicked)=\"cancelRemove()\">{{ text.cancel }}</hm-button>\n                }\n                <hm-button\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\">{{ filter().trim() ? text.noMatches : 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__filter{display:block;margin-block:var(--hm-space-sm)}.sp-group__status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin-block-end:var(--hm-space-sm)}.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;font-size:var(--hm-font-size-sm);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__faces{flex:none;margin-inline-start:auto}.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", "presence", "texts"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "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              <!-- Confirmando a remo\u00E7\u00E3o, a linha mostra s\u00F3 Cancelar e Confirmar (a fun\u00E7\u00E3o n\u00E3o importa mais). -->\n              @if (canChangeRole(m) && confirmingRemove() !== m.user_id) {\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 emphasis=\"medium\" (clicked)=\"cancelRemove()\">{{ text.cancel }}</hm-button>\n                }\n                <hm-button\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__faces{flex:none;margin-inline-start:auto}.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"] }]
+                    ], 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<!-- Busca na lista: local e instant\u00E2nea sobre o que j\u00E1 chegou. Fica fora do \"carregando\" para n\u00E3o perder o foco. -->\n<hm-input\n  class=\"sp-group__filter\"\n  icon=\"search\"\n  type=\"search\"\n  autocomplete=\"off\"\n  [label]=\"text.filterMembers\"\n  [placeholder]=\"text.searchPlaceholder\"\n  [formControl]=\"filterControl\"\n/>\n\n@if (loader.error()) {\n  <!-- Falha numa p\u00E1gina: o que j\u00E1 chegou continua na lista; \"Tentar de novo\" segue de onde parou. -->\n  <div class=\"sp-group__status\">\n    <p class=\"sp-account__note sp-account__note--error\">{{ loader.loaded() ? incompleteLabel() : text.loadError }}</p>\n    <hm-button size=\"small\" emphasis=\"medium\" icon=\"refresh\" (clicked)=\"loader.retry()\">{{ text.retry }}</hm-button>\n  </div>\n} @else if (loader.loading() && loader.ready()) {\n  <p class=\"sp-account__note sp-group__status\" role=\"status\">\n    {{ progressLabel() }}@if (filter().trim()) { \u00B7 {{ text.partialResults }} }\n  </p>\n}\n\n@if (!loader.ready()) {\n  <p class=\"sp-account__note\" role=\"status\">{{ text.loading }}</p>\n} @else if (loader.loaded() || !loader.error()) {\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              <!-- Confirmando a remo\u00E7\u00E3o, a linha mostra s\u00F3 Cancelar e Confirmar (a fun\u00E7\u00E3o n\u00E3o importa mais). -->\n              @if (canChangeRole(m) && confirmingRemove() !== m.user_id) {\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 emphasis=\"medium\" (clicked)=\"cancelRemove()\">{{ text.cancel }}</hm-button>\n                }\n                <hm-button\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\">{{ filter().trim() ? text.noMatches : 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__filter{display:block;margin-block:var(--hm-space-sm)}.sp-group__status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin-block-end:var(--hm-space-sm)}.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;font-size:var(--hm-font-size-sm);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__faces{flex:none;margin-inline-start:auto}.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;
@@ -5730,11 +5964,11 @@ class MyGroupsComponent {
             : 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 } }, outputs: { openChange: "openChange" }, 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            @if (g.members_count) {\n              <hm-avatar-group class=\"sp-groups__faces\" size=\"small\" [max]=\"4\" [people]=\"peopleOf(g)\" [total]=\"g.members_count\" [label]=\"membersLabel(g)\" />\n            }\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__faces{flex:none;margin-inline-start:auto}.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: AvatarGroupComponent, selector: "hm-avatar-group", inputs: ["people", "max", "size", "label", "total"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "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 }); }
+    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 } }, outputs: { openChange: "openChange" }, 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            @if (g.members_count) {\n              <hm-avatar-group class=\"sp-groups__faces\" size=\"small\" [max]=\"4\" [people]=\"peopleOf(g)\" [total]=\"g.members_count\" [label]=\"membersLabel(g)\" />\n            }\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__filter{display:block;margin-block:var(--hm-space-sm)}.sp-group__status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin-block-end:var(--hm-space-sm)}.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;font-size:var(--hm-font-size-sm);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__faces{flex:none;margin-inline-start:auto}.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: AvatarGroupComponent, selector: "hm-avatar-group", inputs: ["people", "max", "size", "label", "total"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "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: [AvatarGroupComponent, 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            @if (g.members_count) {\n              <hm-avatar-group class=\"sp-groups__faces\" size=\"small\" [max]=\"4\" [people]=\"peopleOf(g)\" [total]=\"g.members_count\" [label]=\"membersLabel(g)\" />\n            }\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__faces{flex:none;margin-inline-start:auto}.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"] }]
+            args: [{ selector: 'spine-my-groups', imports: [AvatarGroupComponent, 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            @if (g.members_count) {\n              <hm-avatar-group class=\"sp-groups__faces\" size=\"small\" [max]=\"4\" [people]=\"peopleOf(g)\" [total]=\"g.members_count\" [label]=\"membersLabel(g)\" />\n            }\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__filter{display:block;margin-block:var(--hm-space-sm)}.sp-group__status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin-block-end:var(--hm-space-sm)}.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;font-size:var(--hm-font-size-sm);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__faces{flex:none;margin-inline-start:auto}.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 }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
 /**
@@ -6134,8 +6368,8 @@ class SettingsPanelComponent {
     }
     /**
      * Restaurar preferências (com confirmação): tema (sistema), cor principal (a padrão do app), densidade
-     * (confortável), fonte (a padrão do app), menu lateral (o modo padrão do app), tamanho do texto (100%),
-     * animações (sistema), formato de hora e primeiro dia da semana (automáticos). Idioma, fuso horário e
+     * (confortável), fonte (a padrão do app), menu lateral (o modo padrão do app), dividir abas (desligado), tamanho do
+     * texto (100%), animações (sistema), formato de hora e primeiro dia da semana (automáticos). Idioma, fuso horário e
      * atalhos de tecla única ficam: mudam como a pessoa lê e digita, e não são "aparência".
      */
     restorePreferences() {
@@ -6158,6 +6392,7 @@ class SettingsPanelComponent {
         if (font)
             this.hermesTheme.setFont(font);
         this.sidebar.setMode(this.sidebarConfig.defaultMode ?? 'auto');
+        this.preferences.setSplitTabs(false);
         this.preferences.setTextScale(1);
         this.preferences.setMotion('system');
         this.preferences.setHourCycle('');
@@ -6273,7 +6508,7 @@ 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 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\" [keywords]=\"text.groupsKeywords\"\n        [class.sp-settings__section--group-open]=\"groupOpen()\" [description]=\"groupOpen() ? '' : text.groupsDescription\">\n        <spine-my-groups [groups]=\"myGroups()\" (openChange)=\"groupOpen.set($event)\" />\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), configura\u00E7\u00E3o inicial e o essencial: fecham o painel antes de abrir. -->\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      @if (setupEnabled) {\n        <hm-settings-row [label]=\"text.setup\" [description]=\"text.setupDescription\" [keywords]=\"text.setupKeywords\">\n          <hm-button emphasis=\"medium\" icon=\"color-palette\" (clicked)=\"redoSetup()\">{{ text.redoSetup }}</hm-button>\n        </hm-settings-row>\n      }\n      <hm-settings-row [label]=\"text.essentials\" [description]=\"text.essentialsDescription\" [keywords]=\"text.essentialsKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"help\" (clicked)=\"showEssentials()\">{{ text.showEssentials }}</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      <!-- M\u00E9dia da ferramenta (SpineFeatures.ratings) e \"Avaliar\", que abre o di\u00E1logo da estrela do cabe\u00E7alho. -->\n      @if (ratingsEnabled) {\n        <hm-settings-row [label]=\"ratingText.aboutRating\" [keywords]=\"ratingText.aboutRatingKeywords\">\n          <spine-app-rating-summary />\n        </hm-settings-row>\n      }\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__section--group-open ::ng-deep .hm-settings-section__heading{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.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"], outputs: ["openChange"] }, { 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", "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", "size", "labelHidden", "clearable", "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"] }, { kind: "component", type: SpineAppRatingSummaryComponent, selector: "spine-app-rating-summary" }], 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\" [keywords]=\"text.groupsKeywords\"\n        [class.sp-settings__section--group-open]=\"groupOpen()\" [description]=\"groupOpen() ? '' : text.groupsDescription\">\n        <spine-my-groups [groups]=\"myGroups()\" (openChange)=\"groupOpen.set($event)\" />\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\n      <!-- Dividir abas: com ela desligada (o padr\u00E3o) a \u00E1rea de abas fica num painel s\u00F3 (SpineWorkspaceNavService). -->\n      <hm-settings-row [label]=\"text.splitTabs\" [description]=\"text.splitTabsDescription\" [keywords]=\"text.splitTabsKeywords\">\n        <hm-checkbox [label]=\"text.splitTabs\" [labelHidden]=\"true\" [checked]=\"preferences.splitTabs()\" (checkedChange)=\"preferences.setSplitTabs($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), configura\u00E7\u00E3o inicial e o essencial: fecham o painel antes de abrir. -->\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      @if (setupEnabled) {\n        <hm-settings-row [label]=\"text.setup\" [description]=\"text.setupDescription\" [keywords]=\"text.setupKeywords\">\n          <hm-button emphasis=\"medium\" icon=\"color-palette\" (clicked)=\"redoSetup()\">{{ text.redoSetup }}</hm-button>\n        </hm-settings-row>\n      }\n      <hm-settings-row [label]=\"text.essentials\" [description]=\"text.essentialsDescription\" [keywords]=\"text.essentialsKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"help\" (clicked)=\"showEssentials()\">{{ text.showEssentials }}</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      <!-- M\u00E9dia da ferramenta (SpineFeatures.ratings) e \"Avaliar\", que abre o di\u00E1logo da estrela do cabe\u00E7alho. -->\n      @if (ratingsEnabled) {\n        <hm-settings-row [label]=\"ratingText.aboutRating\" [keywords]=\"ratingText.aboutRatingKeywords\">\n          <spine-app-rating-summary />\n        </hm-settings-row>\n      }\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__section--group-open ::ng-deep .hm-settings-section__heading{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.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"], outputs: ["openChange"] }, { 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", "presence", "texts"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "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", "size", "labelHidden", "clearable", "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"] }, { kind: "component", type: SpineAppRatingSummaryComponent, selector: "spine-app-rating-summary" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SettingsPanelComponent, decorators: [{
             type: Component,
@@ -6283,7 +6518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                         AccountAvatarComponent, ButtonComponent, ComboboxComponent,
                         SegmentedControlComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent,
                         SelectComponent, ShortcutListComponent, ThemePickerComponent, ToggletipComponent, SpineAppRatingSummaryComponent,
-                    ], 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\" [keywords]=\"text.groupsKeywords\"\n        [class.sp-settings__section--group-open]=\"groupOpen()\" [description]=\"groupOpen() ? '' : text.groupsDescription\">\n        <spine-my-groups [groups]=\"myGroups()\" (openChange)=\"groupOpen.set($event)\" />\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), configura\u00E7\u00E3o inicial e o essencial: fecham o painel antes de abrir. -->\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      @if (setupEnabled) {\n        <hm-settings-row [label]=\"text.setup\" [description]=\"text.setupDescription\" [keywords]=\"text.setupKeywords\">\n          <hm-button emphasis=\"medium\" icon=\"color-palette\" (clicked)=\"redoSetup()\">{{ text.redoSetup }}</hm-button>\n        </hm-settings-row>\n      }\n      <hm-settings-row [label]=\"text.essentials\" [description]=\"text.essentialsDescription\" [keywords]=\"text.essentialsKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"help\" (clicked)=\"showEssentials()\">{{ text.showEssentials }}</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      <!-- M\u00E9dia da ferramenta (SpineFeatures.ratings) e \"Avaliar\", que abre o di\u00E1logo da estrela do cabe\u00E7alho. -->\n      @if (ratingsEnabled) {\n        <hm-settings-row [label]=\"ratingText.aboutRating\" [keywords]=\"ratingText.aboutRatingKeywords\">\n          <spine-app-rating-summary />\n        </hm-settings-row>\n      }\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__section--group-open ::ng-deep .hm-settings-section__heading{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.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\" [keywords]=\"text.groupsKeywords\"\n        [class.sp-settings__section--group-open]=\"groupOpen()\" [description]=\"groupOpen() ? '' : text.groupsDescription\">\n        <spine-my-groups [groups]=\"myGroups()\" (openChange)=\"groupOpen.set($event)\" />\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\n      <!-- Dividir abas: com ela desligada (o padr\u00E3o) a \u00E1rea de abas fica num painel s\u00F3 (SpineWorkspaceNavService). -->\n      <hm-settings-row [label]=\"text.splitTabs\" [description]=\"text.splitTabsDescription\" [keywords]=\"text.splitTabsKeywords\">\n        <hm-checkbox [label]=\"text.splitTabs\" [labelHidden]=\"true\" [checked]=\"preferences.splitTabs()\" (checkedChange)=\"preferences.setSplitTabs($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), configura\u00E7\u00E3o inicial e o essencial: fecham o painel antes de abrir. -->\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      @if (setupEnabled) {\n        <hm-settings-row [label]=\"text.setup\" [description]=\"text.setupDescription\" [keywords]=\"text.setupKeywords\">\n          <hm-button emphasis=\"medium\" icon=\"color-palette\" (clicked)=\"redoSetup()\">{{ text.redoSetup }}</hm-button>\n        </hm-settings-row>\n      }\n      <hm-settings-row [label]=\"text.essentials\" [description]=\"text.essentialsDescription\" [keywords]=\"text.essentialsKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"help\" (clicked)=\"showEssentials()\">{{ text.showEssentials }}</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      <!-- M\u00E9dia da ferramenta (SpineFeatures.ratings) e \"Avaliar\", que abre o di\u00E1logo da estrela do cabe\u00E7alho. -->\n      @if (ratingsEnabled) {\n        <hm-settings-row [label]=\"ratingText.aboutRating\" [keywords]=\"ratingText.aboutRatingKeywords\">\n          <spine-app-rating-summary />\n        </hm-settings-row>\n      }\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__section--group-open ::ng-deep .hm-settings-section__heading{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.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. */
@@ -6761,7 +6996,7 @@ function registerPage() {
                 route_redirect: SPINE_SUGGESTIONS_PAGE_PATH,
                 description: text.description,
             },
-            load: () => import('./trismegisto-spine-layout-suggestions-page.component-xI2gDMok.mjs').then((m) => m.SpineSuggestionsPageComponent),
+            load: () => import('./trismegisto-spine-layout-suggestions-page.component-CEKMqera.mjs').then((m) => m.SpineSuggestionsPageComponent),
         });
     });
 }
@@ -7459,7 +7694,7 @@ class SpinePagePanelComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;block-size:100%;min-block-size:0}.spine-page-panel__content{flex:1;min-block-size:0;display:flex;flex-direction:column;padding:var(--hm-space-lg, 1.5rem) var(--hm-space-md, 1rem)}.spine-page-panel__loading{display:flex;flex:1;align-items:center;justify-content:center;min-block-size:50vh;padding:var(--hm-space-xl)}.spine-page-panel__empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--hm-space-sm);padding:var(--hm-space-xl);text-align:center;color:var(--hm-muted)}.spine-page-panel__empty hm-icon{color:var(--hm-muted)}.spine-page-panel__empty-title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg, 18px);font-weight:600}.spine-page-panel__empty-description{margin:0;max-inline-size:32ch;font-size:var(--hm-font-size-sm, 14px)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: LoadingSquareComponent, selector: "hm-loading-square" }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: SpinePageBarComponent, selector: "spine-page-bar", inputs: ["chain", "recordRecent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;block-size:100%;min-block-size:0}.spine-page-panel__content{flex:1;min-block-size:0;display:flex;flex-direction:column;padding:var(--hm-space-lg, 1.5rem) var(--hm-space-md, 1rem)}.spine-page-panel__loading{display:flex;flex:1;align-items:center;justify-content:center;min-block-size:50vh;padding:var(--hm-space-xl)}.spine-page-panel__empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--hm-space-sm);padding:var(--hm-space-xl);text-align:center;color:var(--hm-muted)}.spine-page-panel__empty hm-icon{color:var(--hm-muted)}.spine-page-panel__empty-title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg, 18px);font-weight:var(--hm-font-weight-semibold)}.spine-page-panel__empty-description{margin:0;max-inline-size:32ch;font-size:var(--hm-font-size-sm, 14px)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: LoadingSquareComponent, selector: "hm-loading-square" }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: SpinePageBarComponent, selector: "spine-page-bar", inputs: ["chain", "recordRecent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpinePagePanelComponent, decorators: [{
             type: Component,
@@ -7478,7 +7713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
         </div>
       }
     </div>
-  `, styles: [":host{display:flex;flex-direction:column;block-size:100%;min-block-size:0}.spine-page-panel__content{flex:1;min-block-size:0;display:flex;flex-direction:column;padding:var(--hm-space-lg, 1.5rem) var(--hm-space-md, 1rem)}.spine-page-panel__loading{display:flex;flex:1;align-items:center;justify-content:center;min-block-size:50vh;padding:var(--hm-space-xl)}.spine-page-panel__empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--hm-space-sm);padding:var(--hm-space-xl);text-align:center;color:var(--hm-muted)}.spine-page-panel__empty hm-icon{color:var(--hm-muted)}.spine-page-panel__empty-title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg, 18px);font-weight:600}.spine-page-panel__empty-description{margin:0;max-inline-size:32ch;font-size:var(--hm-font-size-sm, 14px)}\n"] }]
+  `, styles: [":host{display:flex;flex-direction:column;block-size:100%;min-block-size:0}.spine-page-panel__content{flex:1;min-block-size:0;display:flex;flex-direction:column;padding:var(--hm-space-lg, 1.5rem) var(--hm-space-md, 1rem)}.spine-page-panel__loading{display:flex;flex:1;align-items:center;justify-content:center;min-block-size:50vh;padding:var(--hm-space-xl)}.spine-page-panel__empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--hm-space-sm);padding:var(--hm-space-xl);text-align:center;color:var(--hm-muted)}.spine-page-panel__empty hm-icon{color:var(--hm-muted)}.spine-page-panel__empty-title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg, 18px);font-weight:var(--hm-font-weight-semibold)}.spine-page-panel__empty-description{margin:0;max-inline-size:32ch;font-size:var(--hm-font-size-sm, 14px)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: true }] }], isFocusedPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocusedPanel", required: false }] }], tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: false }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }] } });
 
 /**
@@ -7909,6 +8144,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
   `, styles: [".sp-idle__text{margin:0}.sp-idle__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-sm)}\n"] }]
         }] });
 
+/**
+ * Registra a verificação de alterações da tela, presa à aba do workspace em que ela está (`SPINE_TAB`):
+ * com `SpineFeatures.unsavedChanges` ligado, fechar ESSA aba (ou o painel dela, ou "fechar as outras") e
+ * trocar de tela dentro dela pergunta antes. Chame num contexto de injeção (campo da tela); a verificação
+ * sai sozinha quando a tela é destruída.
+ *
+ * ```ts
+ * readonly #unsaved = registerSpineUnsavedChanges(() => this.form.dirty);
+ * ```
+ *
+ * Sem o recurso ligado, continua registrando no `HermesUnsavedChangesService` (o `hermesUnsavedChangesGuard`
+ * de uma rota do app enxerga), mas o shell não pergunta nada.
+ */
+function registerSpineUnsavedChanges(check) {
+    const tab = inject(SPINE_TAB, { optional: true });
+    return registerUnsavedChanges(check, tab ? { scope: () => tab.id() } : {});
+}
+/**
+ * O lado do shell do aviso de alterações não salvas (`SpineFeatures.unsavedChanges`, desligado por padrão).
+ * Ligado: o `hm-workspace` recebe um store que pergunta antes de fechar aba com alteração; trocar de tela
+ * dentro da aba pergunta também; e o navegador avisa ao recarregar/fechar a página. Desligado: `store` é o
+ * mesmo do `SpineWorkspaceNavService` e nada muda.
+ */
+class SpineUnsavedChangesService {
+    constructor() {
+        this.config = inject(SPINE_CONFIG, { optional: true });
+        this.unsaved = inject(HermesUnsavedChangesService);
+        this.nav = inject(SpineWorkspaceNavService);
+        /** O recurso está ligado no app. */
+        this.enabled = !!this.config?.features?.unsavedChanges;
+        /** O store que o shell passa para o `hm-workspace`. */
+        this.store = this.enabled ? this.guard(this.nav.store) : this.nav.store;
+    }
+    /** Liga o aviso do navegador (só com o recurso ligado). Devolve a função que desliga. */
+    start() {
+        return this.enabled ? this.unsaved.warnBeforeUnload() : () => { };
+    }
+    /** Pode trocar a tela da aba ativa do painel? Sem o recurso ou sem alteração nela, `true` na hora. */
+    canReplaceActive(panelId) {
+        if (!this.enabled)
+            return true;
+        const active = findPanelTabs$1(this.nav.store.getState().root, panelId)?.activeId;
+        return active && this.unsaved.hasUnsavedChanges(active) ? this.unsaved.confirmDiscard() : true;
+    }
+    guard(store) {
+        const tabsOf = (panelId) => findPanelTabs$1(store.getState().root, panelId)?.tabs.map((t) => t.id) ?? [];
+        // Sem alteração em nenhuma das abas, fecha na hora (mesmo comportamento de antes); com alteração, pergunta.
+        const closing = (ids, close) => {
+            if (!ids.some((id) => this.unsaved.hasUnsavedChanges(id))) {
+                close();
+                return;
+            }
+            void this.unsaved.confirmDiscard().then((leave) => leave && close());
+        };
+        return {
+            ...store,
+            closeTab: (panelId, tabId) => closing([tabId], () => store.closeTab(panelId, tabId)),
+            closePanel: (panelId) => closing(tabsOf(panelId), () => store.closePanel(panelId)),
+            closeOtherTabs: (panelId, tabId) => closing(tabsOf(panelId).filter((id) => id !== tabId), () => store.closeOtherTabs(panelId, tabId)),
+            closeTabsToTheRight: (panelId, tabId) => {
+                const ids = tabsOf(panelId);
+                closing(ids.slice(ids.indexOf(tabId) + 1), () => store.closeTabsToTheRight(panelId, tabId));
+            },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineUnsavedChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineUnsavedChangesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineUnsavedChangesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Shell do spine — MESMA estrutura do `docs/website`'s `app.component.html`/`.scss` (decisão de
  * 2026-09-28, ver `hefesto-migration-plan.md`): `.shell` com altura de viewport de verdade
@@ -7939,13 +8247,19 @@ class LayoutComponent {
         this.preferences = inject(SpinePreferencesService);
         this.workspace = inject(SpineWorkspaceNavService);
         this.settings = inject(SpineSettingsService);
+        this.sidebar = inject(HermesSidebarService$1);
         /** Também liga, uma vez, o aviso de falha do logout (`logoutFailed$` do `@orfeu/angular`). */
-        this.logoutService = inject(SpineLogoutService);
+        this.logoutNotice = inject(SpineLogoutService);
         /** Recursos opcionais (`SpineConfig.features`): cada serviço não faz nada com o seu recurso desligado. */
         this.idle = inject(SpineIdleService);
         this.startPage = inject(SpineStartPageService);
         this.accountPreferences = inject(SpineAccountPreferencesService);
         this.setup = inject(SpineInitialSetupService);
+        /** Aviso de alterações não salvas (SpineFeatures.unsavedChanges): sem o recurso, `unsaved.store` é o próprio `workspace.store`. */
+        this.unsaved = inject(SpineUnsavedChangesService);
+        /** SpineFeatures.skipLink. */
+        this.skipLink = !!inject(SPINE_CONFIG, { optional: true })?.features?.skipLink;
+        this.destroyRef = inject(DestroyRef);
         this.isNoPermission = this.matchesNoPermission(this.router.url);
         this.router.events.pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed())
             .subscribe(e => { this.isNoPermission = this.matchesNoPermission(e.urlAfterRedirects); });
@@ -7958,13 +8272,13 @@ class LayoutComponent {
         void this.accountPreferences.start();
         this.idle.start();
         this.startPage.track();
+        this.destroyRef.onDestroy(this.unsaved.start());
         // Liga os atalhos de teclado globais às ações reais do sistema.
         this.shortcuts.setActions({
             navigate: (url) => this.router.navigateByUrl(url),
             toggleTheme: () => this.theme.setTheme(this.theme.current === 'light' ? 'dark' : 'light'),
-            toggleFullscreen: () => this.toggleFullscreen(),
-            logout: () => void this.logoutService.logout(),
             openSettings: () => this.settings.toggle(),
+            toggleSidebar: () => this.toggleSidebar(),
         });
         // Link direto pra uma seção do painel de configurações: `?settings=aparencia` (ou só
         // `?settings`). Tira o parâmetro da URL depois de abrir — senão ele volta a abrir o painel a
@@ -7979,19 +8293,33 @@ class LayoutComponent {
         // Novidades do app (argos-admin /me/news): um aviso discreto, uma vez por novidade, depois da configuração inicial.
         void this.news.announceOnEntry();
     }
-    onLocalNavigate(panelId, href) {
-        this.workspace.navigateLocally(panelId, href);
+    /**
+     * `Mod+B`. Tela estreita: a gaveta. Fixo e compacto: troca um pelo outro (é a preferência da pessoa, fica gravada).
+     * Automático: a coluna abre por cima e fica até o próximo `Mod+B`, sem mudar a preferência.
+     */
+    toggleSidebar() {
+        if (this.isNoPermission)
+            return;
+        if (window.matchMedia?.('(max-width: 767.98px)').matches)
+            this.sidebar.toggleMobile();
+        else if (this.sidebar.mode() === 'auto')
+            this.sidebar.holdOpen(!this.sidebar.expanded());
+        else
+            this.sidebar.setMode(this.sidebar.mode() === 'fixed' ? 'compact' : 'fixed');
     }
-    toggleFullscreen() {
-        if (!document.fullscreenElement) {
-            document.documentElement.requestFullscreen?.().catch(() => { });
-        }
-        else {
-            document.exitFullscreen?.();
-        }
+    onLocalNavigate(panelId, href) {
+        const allowed = this.unsaved.canReplaceActive(panelId);
+        if (allowed === true)
+            this.workspace.navigateLocally(panelId, href);
+        else
+            void Promise.resolve(allowed).then((ok) => ok && this.workspace.navigateLocally(panelId, href));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LayoutComponent, deps: [{ token: i3.Router }, { token: i2$1.ThemeService }, { token: ShortcutService }, { token: SpineNewsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: LayoutComponent, isStandalone: true, selector: "spine-layout", ngImport: i0, template: `
+    <!-- "Pular para o conteúdo" (SpineFeatures.skipLink): primeira parada do Tab. -->
+    @if (skipLink) {
+      <hm-skip-link target="spine-main" />
+    }
     <div class="shell" [attr.inert]="setup.isOpen() ? '' : null">
       <spine-header></spine-header>
       <!-- Aviso de conexão do @orfeu/angular (offline/reconectando/reautorizando): faixa entre o header e o corpo. -->
@@ -8000,9 +8328,10 @@ class LayoutComponent {
         @if (!isNoPermission) {
           <spine-sidebar class="sidebar"></spine-sidebar>
         }
-        <div class="main" role="main">
+        <div class="main" role="main" [attr.id]="skipLink ? 'spine-main' : null">
           <div [hidden]="isNoPermission" class="workspace-area">
-            <hm-workspace [keepAlive]="true" [providedStore]="workspace.store" (newTabRequested)="workspace.openNewTab($event)">
+            <!-- Dividir em painéis só com a preferência "Dividir abas" ligada (desligada por padrão), até 2 × 2. -->
+            <hm-workspace [keepAlive]="true" [split]="workspace.split()" [maxColumns]="workspace.limits.maxColumns ?? null" [maxRows]="workspace.limits.maxRows ?? null" [providedStore]="unsaved.store" (newTabRequested)="workspace.openNewTab($event)">
               <ng-template #content let-tab let-panelId="panelId" let-active="active">
                 <div
                   class="panel-content"
@@ -8034,7 +8363,7 @@ class LayoutComponent {
     }
     <!-- 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-shell-tab-strip-bg);--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", "tabId", "panelId"] }, { 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", inputs: ["position", "expand", "visibleToasts"] }, { 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: SpineInitialSetupComponent, selector: "spine-initial-setup" }, { 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-shell-tab-strip-bg);--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", "tabId", "panelId"] }, { kind: "directive", type: PanelLocalLinkDirective, selector: "[appPanelLocalLink]", inputs: ["appPanelLocalLink"], outputs: ["localNavigate"] }, { kind: "component", type: WorkspaceComponent, selector: "hm-workspace", inputs: ["initialTabs", "initialActiveId", "keepAlive", "split", "maxColumns", "maxRows", "label", "providedStore"], outputs: ["stateChange", "newTabRequested"] }, { kind: "component", type: ToastStackComponent, selector: "hm-toast-stack", inputs: ["position", "expand", "visibleToasts"] }, { 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: SpineInitialSetupComponent, selector: "spine-initial-setup" }, { kind: "component", type: ShortcutsCheatsheetComponent, selector: "spine-shortcuts-cheatsheet" }, { kind: "component", type: SettingsPanelComponent, selector: "spine-settings-panel" }, { kind: "component", type: SpineIdleWarningComponent, selector: "spine-idle-warning" }, { kind: "component", type: SkipLinkComponent, selector: "hm-skip-link", inputs: ["target", "label", "texts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -8055,7 +8384,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                         ShortcutsCheatsheetComponent,
                         SettingsPanelComponent,
                         SpineIdleWarningComponent,
+                        SkipLinkComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <!-- "Pular para o conteúdo" (SpineFeatures.skipLink): primeira parada do Tab. -->
+    @if (skipLink) {
+      <hm-skip-link target="spine-main" />
+    }
     <div class="shell" [attr.inert]="setup.isOpen() ? '' : null">
       <spine-header></spine-header>
       <!-- Aviso de conexão do @orfeu/angular (offline/reconectando/reautorizando): faixa entre o header e o corpo. -->
@@ -8064,9 +8398,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
         @if (!isNoPermission) {
           <spine-sidebar class="sidebar"></spine-sidebar>
         }
-        <div class="main" role="main">
+        <div class="main" role="main" [attr.id]="skipLink ? 'spine-main' : null">
           <div [hidden]="isNoPermission" class="workspace-area">
-            <hm-workspace [keepAlive]="true" [providedStore]="workspace.store" (newTabRequested)="workspace.openNewTab($event)">
+            <!-- Dividir em painéis só com a preferência "Dividir abas" ligada (desligada por padrão), até 2 × 2. -->
+            <hm-workspace [keepAlive]="true" [split]="workspace.split()" [maxColumns]="workspace.limits.maxColumns ?? null" [maxRows]="workspace.limits.maxRows ?? null" [providedStore]="unsaved.store" (newTabRequested)="workspace.openNewTab($event)">
               <ng-template #content let-tab let-panelId="panelId" let-active="active">
                 <div
                   class="panel-content"
@@ -8261,7 +8596,7 @@ class SpineSuggestionChatComponent {
         <ng-content select="[spineChatReadOnly]" />
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;min-inline-size:0}.spine-chat{display:flex;flex-direction:column;block-size:var(--spine-chat-height, min(70dvh, 44rem));overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.spine-chat__scroller{flex:1 1 auto;min-block-size:0}.spine-chat__text{white-space:pre-line;overflow-wrap:anywhere}.spine-chat__tags{display:inline-flex;flex-wrap:wrap;gap:var(--hm-space-xxxs)}.spine-chat__internal{display:inline-flex;margin-inline-end:var(--hm-space-micro);color:var(--hm-warning);vertical-align:-.125em}.spine-chat__internal hm-icon{--hm-icon-size: .875rem}.spine-chat__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.spine-chat__empty{margin:auto;padding:var(--hm-space-md);color:var(--hm-muted);font-size:var(--hm-font-size-sm);text-align:center}.spine-chat__composer{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-xs);padding:var(--hm-space-xs) var(--hm-space-sm);border-block-start:var(--hm-border-hairline) solid var(--hm-border)}.spine-chat__field{flex:1 1 16rem;min-inline-size:0}.spine-chat__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--hm-space-sm)}\n"], dependencies: [{ kind: "component", type: BubbleComponent, selector: "hm-bubble", inputs: ["variant", "reactions", "typing"], outputs: ["reactionToggle"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "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: "directive", type: TooltipDirective, selector: "[hmTooltip]", inputs: ["hmTooltip", "hmTooltipSide", "hmTooltipDisabled", "hmTooltipShowDelay", "hmTooltipHideDelay"] }, { kind: "component", type: MessageComponent, selector: "hm-message", inputs: ["author", "avatarUrl", "time", "timeFormat", "align", "grouped", "showAvatar", "status", "announce"], outputs: ["retry"] }, { kind: "component", type: MessageDividerComponent, selector: "hm-message-divider", inputs: ["label", "icon", "variant"] }, { kind: "component", type: MessageScrollerComponent, selector: "hm-message-scroller", inputs: ["label", "hasMoreHistory", "loadingHistory", "autoLoadHistory", "live", "itemSelector", "threshold"], outputs: ["loadHistory", "atEndChange"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }, { kind: "component", type: TextareaComponent, selector: "hm-textarea", inputs: ["value", "label", "hint", "placeholder", "maxLength", "rows", "autoGrow", "labelHidden", "loading", "maxRows", "submitKey"], outputs: ["valueChange", "submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;min-inline-size:0}.spine-chat{display:flex;flex-direction:column;block-size:var(--spine-chat-height, min(70dvh, 44rem));overflow:hidden;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface)}.spine-chat__scroller{flex:1 1 auto;min-block-size:0}.spine-chat__text{white-space:pre-line;overflow-wrap:anywhere}.spine-chat__tags{display:inline-flex;flex-wrap:wrap;gap:var(--hm-space-xxxs)}.spine-chat__internal{display:inline-flex;margin-inline-end:var(--hm-space-micro);color:var(--hm-warning);vertical-align:-.125em}.spine-chat__internal hm-icon{--hm-icon-size: .875rem}.spine-chat__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.spine-chat__empty{margin:auto;padding:var(--hm-space-md);color:var(--hm-muted);font-size:var(--hm-font-size-sm);text-align:center}.spine-chat__composer{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-xs);padding:var(--hm-space-xs) var(--hm-space-sm);border-block-start:var(--hm-border-hairline) solid var(--hm-border)}.spine-chat__field{flex:1 1 16rem;min-inline-size:0}.spine-chat__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--hm-space-sm)}\n"], dependencies: [{ kind: "component", type: BubbleComponent, selector: "hm-bubble", inputs: ["variant", "reactions", "typing"], outputs: ["reactionToggle"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "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: "directive", type: TooltipDirective, selector: "[hmTooltip]", inputs: ["hmTooltip", "hmTooltipSide", "hmTooltipDisabled", "hmTooltipShowDelay", "hmTooltipHideDelay"] }, { kind: "component", type: MessageComponent, selector: "hm-message", inputs: ["author", "avatarUrl", "time", "timeFormat", "align", "grouped", "showAvatar", "status", "announce", "reactions", "reactionChoices", "texts"], outputs: ["retry", "reactionToggle"] }, { kind: "component", type: MessageDividerComponent, selector: "hm-message-divider", inputs: ["label", "icon", "variant"] }, { kind: "component", type: MessageScrollerComponent, selector: "hm-message-scroller", inputs: ["label", "hasMoreHistory", "loadingHistory", "autoLoadHistory", "live", "itemSelector", "threshold"], outputs: ["loadHistory", "atEndChange"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }, { kind: "component", type: TextareaComponent, selector: "hm-textarea", inputs: ["value", "label", "hint", "placeholder", "maxLength", "rows", "autoGrow", "labelHidden", "loading", "maxRows", "submitKey", "mentionCandidates", "mentionTrigger", "texts"], outputs: ["valueChange", "submitted", "mentioned"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineSuggestionChatComponent, decorators: [{
             type: Component,
@@ -8425,5 +8760,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SpineDocsComponent as $, AiAgentComponent as A, SPINE_INBOX_SOURCES as B, SPINE_MARKDOWN_PURIFY_CONFIG as C, SPINE_PREFERENCES_SAVE_DELAY_MS as D, SPINE_RATING_COMMENT_MAX as E, SPINE_RATING_SCORE_MAX as F, SPINE_SETTINGS_ALIASES as G, HeaderComponent as H, SPINE_SETTINGS_KEYS as I, SPINE_SETTINGS_SECTIONS as J, SPINE_SUGGESTIONS_PAGE_ID as K, LayoutComponent as L, SPINE_SUGGESTION_LIMITS as M, NEW_SCREEN_VALUE as N, SPINE_SUGGESTION_PUBLIC_SORTS as O, SPINE_SUGGESTION_PUBLIC_STATUSES as P, SPINE_SUGGESTION_STATUS_ICONS as Q, SettingsPanelComponent as R, SpineSuggestionsService as S, ShortcutService as T, ShortcutsCheatsheetComponent as U, SidebarComponent as V, SpineAccountPreferencesService as W, SpineAccountSecurityService as X, SpineAppTokensService as Y, SpineBrandComponent as Z, SpineConnectionBannerComponent as _, SpineInboxService as a, SpineDocsService as a0, SpineIdleService as a1, SpineIdleWarningComponent as a2, SpineInboxButtonComponent as a3, SpineInitialSetupComponent as a4, SpineInitialSetupService as a5, SpineLogoutService as a6, SpineMarkdownComponent as a7, SpineMyGroupsService as a8, SpineNewsComponent as a9, spineSuggestionsEnabled as aA, spineTagColor as aB, stable as aC, SpineNewsService as aa, SpineNoticesService as ab, SpinePageActionsDirective as ac, SpinePageActionsSlot as ad, SpineRatingStarsComponent as ae, SpineRatingsService as af, SpineSettingsService as ag, SpineStartPageService as ah, SpineWorkspaceNavService as ai, accountErrorCode as aj, argosAccountApi as ak, buildMcpConfig as al, effectiveIdleMinutes as am, idleLimits as an, isInternalPath as ao, provideSettingsSection as ap, provideSpineInboxSource as aq, provideSpineSuggestionsPage as ar, ratingTargetKey as as, resolveSettingsSection as at, sanitizeSpineMarkdownHtml as au, spineNormalizeUrl as av, spineParamsOf as aw, spinePathOf as ax, spineScoreBand as ay, spineStarFills as az, SpineSuggestionChatComponent as b, SPINE_SUGGESTION_STATUS_COLORS as c, SPINE_SUGGESTION_KIND_COLORS as d, SPINE_SUGGESTION_KIND_ICONS as e, SPINE_SUGGESTION_WAITING_COLORS as f, SPINE_SUGGESTION_VISIBLE_SORTS as g, SPINE_SUGGESTION_REASONS as h, SPINE_SUGGESTION_STATUSES as i, SPINE_SUGGESTION_KINDS as j, SPINE_SUGGESTION_WAITING as k, SPINE_TAB as l, SPINE_SUGGESTION_PAGE_PARAM as m, SPINE_SUGGESTION_TAB_PARAM as n, SPINE_SUGGESTION_TAB_CONVERSATION as o, screenName as p, screenModule as q, SPINE_SUGGESTIONS_PAGE_PATH as r, suggestionScreens as s, SpineSuggestionsDialogComponent as t, SpineTagRowComponent as u, AppLauncherComponent as v, SPINE_BRAND as w, SPINE_GLOBAL_PREFERENCE_KEYS as x, SPINE_IDLE_WARNING_SECONDS as y, SPINE_INBOX_POLL_MS as z };
-//# sourceMappingURL=trismegisto-spine-layout-trismegisto-spine-layout-Clphrsgc.mjs.map
+export { SpineConnectionBannerComponent as $, AiAgentComponent as A, SPINE_INBOX_SOURCES as B, SPINE_MARKDOWN_PURIFY_CONFIG as C, SPINE_PREFERENCES_SAVE_DELAY_MS as D, SPINE_RATING_COMMENT_MAX as E, SPINE_RATING_SCORE_MAX as F, SPINE_SETTINGS_ALIASES as G, HeaderComponent as H, SPINE_SETTINGS_KEYS as I, SPINE_SETTINGS_SECTIONS as J, SPINE_SUGGESTIONS_PAGE_ID as K, LayoutComponent as L, SPINE_SUGGESTION_LIMITS as M, NEW_SCREEN_VALUE as N, SPINE_SUGGESTION_PUBLIC_SORTS as O, SPINE_SUGGESTION_PUBLIC_STATUSES as P, SPINE_SUGGESTION_STATUS_ICONS as Q, SPINE_WORKSPACE_LIMITS as R, SpineSuggestionsService as S, SettingsPanelComponent as T, ShortcutService as U, ShortcutsCheatsheetComponent as V, SidebarComponent as W, SpineAccountPreferencesService as X, SpineAccountSecurityService as Y, SpineAppTokensService as Z, SpineBrandComponent as _, SpineInboxService as a, SpineDocsComponent as a0, SpineDocsService as a1, SpineIdleService as a2, SpineIdleWarningComponent as a3, SpineInboxButtonComponent as a4, SpineInitialSetupComponent as a5, SpineInitialSetupService as a6, SpineLogoutService as a7, SpineMarkdownComponent as a8, SpineMyGroupsService as a9, spinePathOf as aA, spineScoreBand as aB, spineStarFills as aC, spineSuggestionsEnabled as aD, spineTagColor as aE, stable as aF, SpineNewsComponent as aa, SpineNewsService as ab, SpineNoticesService as ac, SpinePageActionsDirective as ad, SpinePageActionsSlot as ae, SpineRatingStarsComponent as af, SpineRatingsService as ag, SpineSettingsService as ah, SpineStartPageService as ai, SpineUnsavedChangesService as aj, SpineWorkspaceNavService as ak, accountErrorCode as al, argosAccountApi as am, buildMcpConfig as an, effectiveIdleMinutes as ao, idleLimits as ap, isInternalPath as aq, provideSettingsSection as ar, provideSpineInboxSource as as, provideSpineSuggestionsPage as at, ratingTargetKey as au, registerSpineUnsavedChanges as av, resolveSettingsSection as aw, sanitizeSpineMarkdownHtml as ax, spineNormalizeUrl as ay, spineParamsOf as az, SpineSuggestionChatComponent as b, SPINE_SUGGESTION_STATUS_COLORS as c, SPINE_SUGGESTION_KIND_COLORS as d, SPINE_SUGGESTION_KIND_ICONS as e, SPINE_SUGGESTION_WAITING_COLORS as f, SPINE_SUGGESTION_VISIBLE_SORTS as g, SPINE_SUGGESTION_REASONS as h, SPINE_SUGGESTION_STATUSES as i, SPINE_SUGGESTION_KINDS as j, SPINE_SUGGESTION_WAITING as k, SPINE_TAB as l, SPINE_SUGGESTION_PAGE_PARAM as m, SPINE_SUGGESTION_TAB_PARAM as n, SPINE_SUGGESTION_TAB_CONVERSATION as o, screenName as p, screenModule as q, SPINE_SUGGESTIONS_PAGE_PATH as r, suggestionScreens as s, SpineSuggestionsDialogComponent as t, SpineTagRowComponent as u, AppLauncherComponent as v, SPINE_BRAND as w, SPINE_GLOBAL_PREFERENCE_KEYS as x, SPINE_IDLE_WARNING_SECONDS as y, SPINE_INBOX_POLL_MS as z };
+//# sourceMappingURL=trismegisto-spine-layout-trismegisto-spine-layout-DiAfxIGP.mjs.map