@trismegisto/spine 2.0.0

package/fesm2022/trismegisto-spine-layout.mjs

@@ -0,0 +1,2848 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, ChangeDetectionStrategy, Component, InjectionToken, input, signal, computed, Optional, Inject, Injectable, Injector, afterNextRender, ViewChild, effect, HostListener, DOCUMENT, isDevMode, DestroyRef, output, ElementRef, Directive, ViewEncapsulation } from '@angular/core';
+import * as i3 from '@angular/router';
+import { RouterLink, Router, NavigationEnd, NavigationSkipped, RouterOutlet } from '@angular/router';
+import { BehaviorSubject, filter, take, Subject, firstValueFrom } from 'rxjs';
+import { IconComponent, IconButtonComponent, LoadingSquareComponent, HermesShortcutService, HERMES_MESSAGES, HeaderComponent as HeaderComponent$1, InputComponent, MenuButtonComponent, AccountAvatarComponent, ModalComponent, createPersistedWorkspaceStore, HERMES_WORKSPACE_PERSISTENCE_CONFIG, findPanelTabs, SidebarComponent as SidebarComponent$1, SidebarNodeComponent, ButtonComponent, CarouselComponent, ShortcutListComponent, HermesToastService, SegmentedControlComponent, HermesThemeService, HermesSidebarService, ComboboxComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent, SelectComponent, ThemePickerComponent, BreadcrumbComponent, TooltipDirective, AlertComponent, SkeletonComponent, WorkspaceComponent } from '@trismegisto/angular';
+import { ModalComponent as ModalComponent$1 } from '@trismegisto/spine/modal';
+import { NotificationComponent } from '@trismegisto/spine/notification';
+import { SidePanelComponent } from '@trismegisto/spine/side-panel';
+import * as i2$1 from '@trismegisto/spine';
+import { SPINE_MESSAGES, SPINE_CONFIG, ThemeService, resolveSpineLogo, SPINE_NEWS, spineRoutesOf, routerIdOf, SPINE_ADMIN_API, SpinePreferencesService, ThemePresetService, DensityService, APP_PACKAGE_INFO, SpineQuickAccessService } from '@trismegisto/spine';
+import * as i2 from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@orfeu/angular/core';
+import { ViewService, AuthorizationService, RealmAppsService } from '@orfeu/angular/core';
+import { formatMessage, HERMES_FONTS } from '@trismegisto/primitives';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { resolveEffectiveRouteChain, ComponentDistributorService, componentRouterId, LoggerService } from '@trismegisto/spine/routing';
+import { renderIconSvg } from '@trismegisto/icons';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { Title, DomSanitizer } from '@angular/platform-browser';
+import DOMPurify from 'dompurify';
+import { Marked } from 'marked';
+
+/**
+ * A grade de apps não cabe no `MenuItem` de linha única do `hm-menu` (ícone grande + nome
+ * embaixo, em coluna) — em vez de forçar isso num componente pensado pra lista de ações, usa
+ * um popover próprio (mesmo padrão do backdrop-fecha-fora da busca global do header).
+ */
+class AppLauncherComponent {
+    constructor(authService, realmAppsService) {
+        this.authService = authService;
+        this.realmAppsService = realmAppsService;
+        this.text = inject(SPINE_MESSAGES).header;
+        this.cdr = inject(ChangeDetectorRef);
+        this.apps = [];
+        this.loading = false;
+        this.open = false;
+    }
+    async ngOnInit() {
+        this.loading = true;
+        const token = this.authService.getToken();
+        // O client atual (o app em que o usuário já está) já vem excluído aqui —
+        // OpenIDController.view no argos filtra por client_id no próprio backend
+        // (apps/argos/auth/server/.../openid.controller.ts), então não há
+        // necessidade de repetir essa checagem no front.
+        try {
+            this.apps = (await this.realmAppsService.getApplications(token)) ?? [];
+        }
+        catch {
+            // Sem a lista não há o que oferecer: o botão some, em vez de ficar carregando para sempre.
+            this.apps = [];
+        }
+        finally {
+            this.loading = false;
+            // A lista chega fora de qualquer evento do template: sem isto, app zoneless não redesenha.
+            this.cdr.markForCheck();
+        }
+    }
+    toggle() {
+        this.open = !this.open;
+    }
+    close() {
+        this.open = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AppLauncherComponent, deps: [{ token: i1.AuthorizationService }, { token: i1.RealmAppsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: AppLauncherComponent, isStandalone: true, selector: "spine-app-launcher", ngImport: i0, template: "<div class=\"app-launcher-trigger\" data-tour=\"apps\" *ngIf=\"loading || apps.length > 0\">\n    <hm-icon-button emphasis=\"subtle\" icon=\"grid\" [label]=\"text.apps\" (clicked)=\"toggle()\"></hm-icon-button>\n\n    <button type=\"button\" class=\"app-launcher-backdrop\" *ngIf=\"open\" (click)=\"close()\" aria-hidden=\"true\"></button>\n\n    <div class=\"app-launcher-menu\" *ngIf=\"open\">\n        <div class=\"app-launcher-header\">{{ text.apps }}</div>\n        <div class=\"app-launcher-grid\">\n            <div class=\"app-launcher-loading\" *ngIf=\"loading\">\n                <hm-loading-square></hm-loading-square>\n            </div>\n            <a *ngFor=\"let app of apps\" [href]=\"app.app_url\" class=\"app-launcher-card\" target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <div class=\"app-launcher-icon\">\n                    <hm-icon shape=\"applications\" size=\"32\"></hm-icon>\n                </div>\n                <span class=\"app-launcher-name\">{{ app.name }}</span>\n            </a>\n        </div>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.app-launcher-trigger{position:relative;display:flex;align-items:center;height:100%}.app-launcher-backdrop{position:fixed;inset:0;z-index:1199;border:none;background:transparent;cursor:default}.app-launcher-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:1200;min-width:300px;background:var(--hm-surface);color:var(--hm-text);border:1px solid var(--hm-border);border-radius:12px;box-shadow:var(--hm-shadow-lg, 0 14px 38px rgba(0, 36, 65, .22));overflow:hidden}.app-launcher-header{padding:10px 16px 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--hm-border)}.app-launcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:12px}.app-launcher-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px 8px;border-radius:4px;text-decoration:none;color:inherit;cursor:pointer;transition:background .15s ease}.app-launcher-card:hover{background:var(--hm-hover);text-decoration:none;color:inherit}.app-launcher-icon{margin-bottom:6px;color:var(--hm-action)}.app-launcher-name{font-size:11px;text-align:center;line-height:1.3;word-break:break-word;max-width:80px}.app-launcher-loading{grid-column:1/-1;display:flex;justify-content:center;padding:20px}@media(max-width:767px){.app-launcher-trigger{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { 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: LoadingSquareComponent, selector: "hm-loading-square" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AppLauncherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-app-launcher', imports: [CommonModule, IconComponent, IconButtonComponent, LoadingSquareComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"app-launcher-trigger\" data-tour=\"apps\" *ngIf=\"loading || apps.length > 0\">\n    <hm-icon-button emphasis=\"subtle\" icon=\"grid\" [label]=\"text.apps\" (clicked)=\"toggle()\"></hm-icon-button>\n\n    <button type=\"button\" class=\"app-launcher-backdrop\" *ngIf=\"open\" (click)=\"close()\" aria-hidden=\"true\"></button>\n\n    <div class=\"app-launcher-menu\" *ngIf=\"open\">\n        <div class=\"app-launcher-header\">{{ text.apps }}</div>\n        <div class=\"app-launcher-grid\">\n            <div class=\"app-launcher-loading\" *ngIf=\"loading\">\n                <hm-loading-square></hm-loading-square>\n            </div>\n            <a *ngFor=\"let app of apps\" [href]=\"app.app_url\" class=\"app-launcher-card\" target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <div class=\"app-launcher-icon\">\n                    <hm-icon shape=\"applications\" size=\"32\"></hm-icon>\n                </div>\n                <span class=\"app-launcher-name\">{{ app.name }}</span>\n            </a>\n        </div>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.app-launcher-trigger{position:relative;display:flex;align-items:center;height:100%}.app-launcher-backdrop{position:fixed;inset:0;z-index:1199;border:none;background:transparent;cursor:default}.app-launcher-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:1200;min-width:300px;background:var(--hm-surface);color:var(--hm-text);border:1px solid var(--hm-border);border-radius:12px;box-shadow:var(--hm-shadow-lg, 0 14px 38px rgba(0, 36, 65, .22));overflow:hidden}.app-launcher-header{padding:10px 16px 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--hm-border)}.app-launcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:12px}.app-launcher-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px 8px;border-radius:4px;text-decoration:none;color:inherit;cursor:pointer;transition:background .15s ease}.app-launcher-card:hover{background:var(--hm-hover);text-decoration:none;color:inherit}.app-launcher-icon{margin-bottom:6px;color:var(--hm-action)}.app-launcher-name{font-size:11px;text-align:center;line-height:1.3;word-break:break-word;max-width:80px}.app-launcher-loading{grid-column:1/-1;display:flex;justify-content:center;padding:20px}@media(max-width:767px){.app-launcher-trigger{display:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.AuthorizationService }, { type: i1.RealmAppsService }] });
+
+/**
+ * Componente de marca que o header do shell desenha no lugar da imagem de `SpineConfig.logo` (tem
+ * prioridade sobre ela). Injeção em vez de projeção de conteúdo porque o `LayoutComponent` é montado
+ * pelo `Router`, não pelo template do app — não existe `<ng-content>` alcançável de fora. O componente
+ * fica dentro do link da marca (que leva à home): não ponha link nem botão nele, e se ele for só
+ * imagem, dê nome acessível ou deixe o `appName` visível (`showAppName`, padrão `true`).
+ * `null` (padrão) usa a imagem. Ex.: `{ provide: SPINE_BRAND, useValue: MarcaComponent }` no
+ * `app.config.ts`.
+ */
+const SPINE_BRAND = new InjectionToken('SPINE_BRAND', {
+    providedIn: 'root',
+    factory: () => null,
+});
+
+/**
+ * Marca do header: logo do app (`SpineConfig.logo`, padrão `assets/images/logo.svg`) + `appName`, dentro
+ * de um link para a home. Ordem: componente de `SPINE_BRAND` > imagem > só o nome.
+ *
+ * - Tema escuro usa `logo.dark` quando houver; se ele falhar, volta para `logo.light`.
+ * - Imagem que não carrega (404/erro) some — nada de ícone quebrado — e o nome aparece mesmo com
+ *   `showAppName: false`, para o link nunca ficar sem texto.
+ * - Texto alternativo: `logo.alt` se configurado; senão o `appName` quando o nome está escondido, e vazio
+ *   (imagem decorativa) quando o nome já está ao lado — o leitor de tela não lê o nome duas vezes.
+ */
+class SpineBrandComponent {
+    constructor() {
+        /** Rota da home (primeira rota navegável); `null` desenha a marca sem link. */
+        this.homeRoute = input(null, ...(ngDevMode ? [{ debugName: "homeRoute" }] : /* istanbul ignore next */ []));
+        /** Dica do link (ex.: "Página inicial"). */
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.config = inject(SPINE_CONFIG, { optional: true });
+        this.theme = inject(ThemeService);
+        this.brand = inject(SPINE_BRAND);
+        this.appName = this.config?.appName ?? 'Hermes';
+        this.sources = resolveSpineLogo(this.config?.logo);
+        this.showAppName = this.config?.showAppName !== false;
+        /** Endereços que já deram erro nesta sessão do componente. */
+        this.failed = signal(new Set(), ...(ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []));
+        /** Imagem a mostrar agora (tema atual, sem as que falharam); `null` = nenhuma. */
+        this.src = computed(() => {
+            const logo = this.sources;
+            if (!logo || this.brand)
+                return null;
+            const failed = this.failed();
+            if (this.theme.current === 'dark' && logo.dark && !failed.has(logo.dark))
+                return logo.dark;
+            return failed.has(logo.light) ? null : logo.light;
+        }, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        this.nameVisible = computed(() => this.showAppName || (!this.brand && !this.src()), ...(ngDevMode ? [{ debugName: "nameVisible" }] : /* istanbul ignore next */ []));
+        this.alt = computed(() => this.sources?.alt ?? (this.nameVisible() ? '' : this.appName), ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    }
+    onError(src) {
+        if (this.failed().has(src))
+            return;
+        this.failed.update((set) => new Set(set).add(src));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpineBrandComponent, isStandalone: true, selector: "spine-brand", inputs: { homeRoute: { classPropertyName: "homeRoute", publicName: "homeRoute", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (homeRoute()) {
+      <a class="brand" [routerLink]="homeRoute()" [title]="label()">
+        <ng-container *ngTemplateOutlet="content" />
+      </a>
+    } @else {
+      <span class="brand" [title]="label()">
+        <ng-container *ngTemplateOutlet="content" />
+      </span>
+    }
+    <ng-template #content>
+      @if (brand) {
+        <ng-container *ngComponentOutlet="brand" />
+      } @else if (src(); as s) {
+        <img class="brand__logo" [src]="s" [alt]="alt()" (error)="onError(s)" />
+      }
+      @if (nameVisible()) {
+        <span class="brand__name">{{ appName }}</span>
+      }
+    </ng-template>
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:contents}.brand{display:inline-flex;align-items:center;gap:var(--hm-space-xs);min-width:0;color:inherit;font-weight:var(--hm-font-weight-bold);text-decoration:none;margin-inline-start:var(--hm-space-sm)}.brand:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-space-micro);border-radius:var(--hm-radius-micro)}.brand__logo{display:block;flex:none;height:var(--hm-icon-xl);width:auto;max-width:calc(var(--hm-icon-xl) * 6);object-fit:contain}.brand__name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media(max-width:767px){.brand{margin-inline-start:0}.brand__logo{max-width:calc(var(--hm-icon-xl) * 4)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineBrandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-brand', imports: [RouterLink, NgTemplateOutlet, NgComponentOutlet], template: `
+    @if (homeRoute()) {
+      <a class="brand" [routerLink]="homeRoute()" [title]="label()">
+        <ng-container *ngTemplateOutlet="content" />
+      </a>
+    } @else {
+      <span class="brand" [title]="label()">
+        <ng-container *ngTemplateOutlet="content" />
+      </span>
+    }
+    <ng-template #content>
+      @if (brand) {
+        <ng-container *ngComponentOutlet="brand" />
+      } @else if (src(); as s) {
+        <img class="brand__logo" [src]="s" [alt]="alt()" (error)="onError(s)" />
+      }
+      @if (nameVisible()) {
+        <span class="brand__name">{{ appName }}</span>
+      }
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";:host{display:contents}.brand{display:inline-flex;align-items:center;gap:var(--hm-space-xs);min-width:0;color:inherit;font-weight:var(--hm-font-weight-bold);text-decoration:none;margin-inline-start:var(--hm-space-sm)}.brand:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-space-micro);border-radius:var(--hm-radius-micro)}.brand__logo{display:block;flex:none;height:var(--hm-icon-xl);width:auto;max-width:calc(var(--hm-icon-xl) * 6);object-fit:contain}.brand__name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media(max-width:767px){.brand{margin-inline-start:0}.brand__logo{max-width:calc(var(--hm-icon-xl) * 4)}}\n"] }]
+        }], propDecorators: { homeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeRoute", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+// Entra na chave de "já visto": trocar a versão faz o tour aparecer de novo para todo mundo.
+const ONBOARDING_VERSION = 'v3';
+// Partes do shell chegam depois do login (abas, barra de página): o tour espera por elas, mas não
+// para sempre. Os passos cujo alvo não apareceu no prazo ficam de fora.
+const TARGET_WAIT_MS = 3000;
+const TARGET_POLL_MS = 150;
+/**
+ * Primeiro elemento do seletor que está de fato na tela (tem tamanho e conteúdo). Não usa
+ * `offsetParent`: ele é `null` pra `position: fixed` (a sidebar) e pra `display: contents`, e o
+ * passo sumia do tour mesmo com o alvo visível. Com as abas vivas do workspace há uma barra de
+ * página por aba — só a da aba ativa tem tamanho, e é ela que o holofote precisa achar.
+ */
+function findTourTarget(selector) {
+    for (const el of Array.from(document.querySelectorAll(selector))) {
+        const r = el.getBoundingClientRect();
+        if (r.width > 0 && r.height > 0 && el.children.length > 0)
+            return el;
+    }
+    return null;
+}
+/**
+ * Onboarding interativo próprio (sem dependência externa). O overlay/holofote e o
+ * balão são renderizados pelo OnboardingOverlayComponent, que escuta este serviço.
+ * Aparece uma vez por máquina (flag em localStorage), namespaced por cliente.
+ */
+class OnboardingService {
+    constructor(config) {
+        this.text = inject(SPINE_MESSAGES).tour;
+        /** Passo atual (null = tour inativo). O overlay component reage a isto. */
+        this.current$ = new BehaviorSubject(null);
+        this.steps = [];
+        this.index = 0;
+        this.waiting = null;
+        const ns = config?.clientId ?? 'app';
+        this.doneKey = `${ns}_onboarding_${ONBOARDING_VERSION}`;
+    }
+    get done() {
+        try {
+            return localStorage.getItem(this.doneKey) === 'done';
+        }
+        catch {
+            return true;
+        }
+    }
+    markDone() {
+        try {
+            localStorage.setItem(this.doneKey, 'done');
+        }
+        catch { /* sem localStorage → não insiste */ }
+    }
+    /** Dispara o tour só se ainda não foi visto nesta máquina. Chamar após o login. */
+    maybeStart() {
+        if (this.done)
+            return;
+        setTimeout(() => this.start(), 700); // garante header/breadcrumb renderizados
+    }
+    /** Reabre o tour manualmente (menu Ajuda), ignorando a flag. */
+    restart() {
+        this.start();
+    }
+    /** Passos no idioma ativo (o texto é lido do catálogo ao começar o tour). Descrições com `<b>`. */
+    allSteps() {
+        const t = this.text;
+        return [
+            { title: t.welcomeTitle, description: t.welcomeText },
+            { target: '[data-tour="apps"]', title: t.appsTitle, description: t.appsText },
+            { target: '[data-tour="search"]', title: t.searchTitle, description: t.searchText },
+            { target: '[data-tour="nav"] .hm-sidebar__content', title: t.navModulesTitle, description: t.navModulesText },
+            { target: '[data-tour="nav"] .hm-sidebar__footer', title: t.navModeTitle, description: t.navModeText },
+            { target: '[data-tour="tabs"] hm-tab-bar', title: t.tabsTitle, description: t.tabsText },
+            { target: '[data-tour="tabs"]', title: t.splitTitle, description: t.splitText },
+            { target: '[data-tour="breadcrumb"]', title: t.whereTitle, description: t.whereText },
+            { target: '[data-tour="theme"]', title: t.themeTitle, description: t.themeText },
+            { target: '[data-tour="density"]', title: t.densityTitle, description: t.densityText },
+            { target: '[data-tour="fullscreen"]', title: t.fullscreenTitle, description: t.fullscreenText },
+            { target: '[data-tour="profile"]', title: t.profileTitle, description: t.profileText },
+            { title: t.doneTitle, description: t.doneText },
+        ];
+    }
+    /**
+     * Começa do primeiro passo assim que todos os alvos estão na tela, ou no fim do prazo só com os passos
+     * que têm alvo visível (e os sem alvo). Sem nenhum passo, só marca como visto. Não bloqueia: confere
+     * de novo a cada `TARGET_POLL_MS`.
+     */
+    start() {
+        if (this.waiting !== null)
+            clearTimeout(this.waiting);
+        this.waiting = null;
+        const steps = this.allSteps();
+        const present = (step) => !step.target || findTourTarget(step.target) !== null;
+        const attempt = (waited) => {
+            if (!steps.every(present) && waited < TARGET_WAIT_MS) {
+                this.waiting = setTimeout(() => attempt(waited + TARGET_POLL_MS), TARGET_POLL_MS);
+                return;
+            }
+            this.waiting = null;
+            this.steps = steps.filter(present);
+            this.index = 0;
+            if (!this.steps.length) {
+                this.markDone();
+                return;
+            }
+            this.emit();
+        };
+        attempt(0);
+    }
+    emit() {
+        this.current$.next({ step: this.steps[this.index], index: this.index, total: this.steps.length });
+    }
+    next() {
+        if (this.index >= this.steps.length - 1) {
+            this.finish();
+            return;
+        }
+        this.index++;
+        this.emit();
+    }
+    prev() {
+        if (this.index <= 0)
+            return;
+        this.index--;
+        this.emit();
+    }
+    /** Encerra o tour (concluído ou pulado) e marca como visto. */
+    finish() {
+        this.markDone();
+        this.current$.next(null);
+    }
+    get isFirst() { return this.index === 0; }
+    get isLast() { return this.index === this.steps.length - 1; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: OnboardingService, deps: [{ token: SPINE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: OnboardingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: OnboardingService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SPINE_CONFIG]
+                }] }] });
+
+/** Intervalo entre o fim do tour (ou a entrada, sem tour) e o painel de novidades, para os dois não se
+ * emendarem na tela. */
+const AFTER_TOUR_MS = 800;
+/** Tempo mínimo desde a entrada antes de oferecer — o tour, se devido, já começou (ele espera 700ms). */
+const FIRST_CHECK_MS = 1500;
+/**
+ * Painel de novidades do app (ver `provideSpineNews`). Decide o que está devido — ainda não visto
+ * NESTE navegador e ainda dentro do `until` — e abre sozinho uma vez, depois do tour de boas-vindas.
+ * O "já visto" é por app (`hermes_<clientId>_news_seen`): novidade de um app não some por ter sido
+ * vista em outro no mesmo domínio.
+ */
+class SpineNewsService {
+    constructor() {
+        this.onboarding = inject(OnboardingService);
+        this.items = (inject(SPINE_NEWS, { optional: true }) ?? []).flat();
+        /** Slides em exibição (os devidos, ou todos os vigentes quando reaberto pelo menu). */
+        this.slides = signal([], ...(ngDevMode ? [{ debugName: "slides" }] : /* istanbul ignore next */ []));
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        /** Há alguma novidade vigente — o item "Novidades" do menu só aparece com isto. */
+        this.hasAny = computed(() => this.current().length > 0, ...(ngDevMode ? [{ debugName: "hasAny" }] : /* istanbul ignore next */ []));
+        const ns = inject(SPINE_CONFIG, { optional: true })?.clientId;
+        this.seenKey = `${ns ? `hermes_${ns}` : 'hermes'}_news_seen`;
+    }
+    /** Chamado uma vez pelo layout na entrada: abre as devidas, esperando o tour terminar. */
+    scheduleOnEntry() {
+        if (this.due().length === 0)
+            return;
+        setTimeout(() => {
+            this.onboarding.current$
+                .pipe(filter((step) => step === null), take(1))
+                .subscribe(() => setTimeout(() => this.showDue(), AFTER_TOUR_MS));
+        }, FIRST_CHECK_MS);
+    }
+    /** Marca como vistas todas as novidades devidas e as abre num único painel. */
+    showDue() {
+        const due = this.due();
+        if (due.length === 0)
+            return;
+        this.markSeen(due.map((i) => i.id));
+        this.open(due);
+    }
+    /** Reabre todas as vigentes (menu do perfil), vistas ou não. */
+    showAll() {
+        this.open(this.current());
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    open(items) {
+        const slides = items.flatMap((i) => i.slides);
+        if (slides.length === 0)
+            return;
+        this.slides.set(slides);
+        this.isOpen.set(true);
+    }
+    /** Vigentes: sem `until`, ou com `until` ainda não passado (comparação por data, AAAA-MM-DD). */
+    current() {
+        const today = new Date().toISOString().slice(0, 10);
+        return this.items.filter((i) => !i.until || today <= i.until);
+    }
+    due() {
+        const seen = this.readSeen();
+        return this.current().filter((i) => !seen.has(i.id));
+    }
+    readSeen() {
+        try {
+            return new Set(JSON.parse(localStorage.getItem(this.seenKey) || '[]'));
+        }
+        catch {
+            return new Set();
+        }
+    }
+    markSeen(ids) {
+        try {
+            const seen = this.readSeen();
+            ids.forEach((id) => seen.add(id));
+            localStorage.setItem(this.seenKey, JSON.stringify([...seen]));
+        }
+        catch {
+            /* sem localStorage: mostra de novo na próxima entrada, sem quebrar nada */
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineNewsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineNewsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineNewsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/** Seções que o próprio spine já traz. `key` é também o valor de `?settings=` na URL. */
+const SPINE_SETTINGS_KEYS = {
+    appearance: 'aparencia',
+    region: 'regiao',
+    shortcuts: 'atalhos',
+    account: 'conta',
+    about: 'sobre',
+};
+const SPINE_SETTINGS_SECTIONS = new InjectionToken('SPINE_SETTINGS_SECTIONS');
+/** Registra uma seção do app no painel de configurações (aparece depois das do spine, antes de
+ * "Sobre"). Pode ser chamado várias vezes, uma por seção. */
+function provideSettingsSection(section) {
+    return { provide: SPINE_SETTINGS_SECTIONS, useValue: section, multi: true };
+}
+/** Abre/fecha o painel de configurações de qualquer lugar (menu do perfil, atalho, link). */
+class SpineSettingsService {
+    constructor() {
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        /** Seção pedida na abertura (vazio = a primeira). */
+        this.section = signal('', ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+    }
+    open(section = '') {
+        this.section.set(section);
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    toggle() {
+        if (this.isOpen())
+            this.close();
+        else
+            this.open();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineSettingsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineSettingsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** `G 1` … `G 9`: um registro só (o dígito sai do evento); a referência identifica o item no painel. */
+const FAVORITE_KEYS = Array.from({ length: 9 }, (_, i) => `G ${i + 1}`);
+/** Como os favoritos aparecem no painel: uma linha "G depois 1…9" em vez de nove alternativas. */
+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.
+ *
+ * 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).
+ */
+class ShortcutService {
+    constructor() {
+        this.actions = {};
+        this.removers = [];
+        this.favKey = `${inject(SPINE_CONFIG, { optional: true })?.clientId ?? 'app'}_nav_favorites`;
+        this.hermes = inject(HermesShortcutService);
+        this.lib = inject(HERMES_MESSAGES);
+        this.text = inject(SPINE_MESSAGES).shortcuts;
+        /** Emite quando o usuário pede o painel de atalhos (tecla "?" ou menu do perfil). */
+        this.help$ = new Subject();
+        /** Teclas (referência) → descrição viva, para o painel acompanhar a troca de idioma. */
+        this.own = new Map();
+        /**
+         * O que o painel lista (`<hm-shortcut-list [registered]="false" [items]="panelItems()">`): os
+         * atalhos registrados no `HermesShortcutService`, com os favoritos numa linha só, e os só exibidos.
+         * Acompanha registro/remoção e a troca de idioma do catálogo da lib.
+         */
+        this.panelItems = computed(() => {
+            const registered = this.hermes.list().map((item) => {
+                const describe = this.own.get(item.keys);
+                if (!describe)
+                    return item;
+                return { ...item, description: describe(), keys: item.keys === FAVORITE_KEYS ? FAVORITE_DISPLAY_KEYS : item.keys };
+            });
+            const display = this.displayOnly();
+            // Ordem do painel antigo: busca e histórico abrem a navegação, Esc fecha o geral.
+            return [display[0], ...registered, display[1], display[2]];
+        }, ...(ngDevMode ? [{ debugName: "panelItems" }] : /* istanbul ignore next */ []));
+    }
+    /** Os atalhos do shell. `describe` lê o catálogo na hora (o idioma pode mudar depois do registro). */
+    definitions() {
+        const t = this.text;
+        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+,'], 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: ['?'], describe: () => t.showHelp, group: 'general', handler: () => this.help$.next() },
+        ];
+    }
+    /** Só exibidos: quem dispara é outra peça (hm-header, navegador, diálogos). */
+    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: 'Esc', description: t.closeOverlay, group: 'general' },
+        ];
+    }
+    /**
+     * Lista do painel em texto, no idioma e na plataforma atuais.
+     * @deprecated Use o `hm-shortcut-list` com `panelItems()` (ou `HermesShortcutService.list()`).
+     * Mantido para quem montava o próprio painel; sai numa próxima versão.
+     */
+    get shortcuts() {
+        return this.panelItems().map((item) => ({
+            keys: this.keysText(item.keys),
+            description: item.description,
+            group: toSpineGroup(item.group),
+        }));
+    }
+    /**
+     * Atalhos por grupo, na ordem navegação → ações → geral, com o nome do grupo traduzido.
+     * @deprecated Use o `hm-shortcut-list` (agrupa, traduz e desenha as teclas). Sai numa próxima versão.
+     */
+    groups() {
+        const all = this.shortcuts;
+        return ['navigation', 'actions', 'general']
+            .map((id) => ({ id, name: this.hermes.groupName(id), items: all.filter((s) => s.group === id) }))
+            .filter((g) => g.items.length);
+    }
+    /** Liga as ações e registra os atalhos no `HermesShortcutService` (idempotente: chamadas seguintes só trocam as ações). */
+    setActions(actions) {
+        this.actions = { ...this.actions, ...actions };
+        if (this.removers.length)
+            return;
+        this.removers = this.definitions().map(({ describe, ...definition }) => {
+            // Teclas sempre em lista própria: a referência identifica o registro do spine no painel.
+            this.own.set(definition.keys, describe);
+            const remove = this.hermes.register({ ...definition, description: describe() });
+            return () => {
+                remove();
+                this.own.delete(definition.keys);
+            };
+        });
+    }
+    ngOnDestroy() {
+        this.removers.forEach((remove) => remove());
+        this.removers = [];
+    }
+    // ── interno ────────────────────────────────────────────────────────────────
+    /** Ação ausente devolve `false`: o evento segue sem `preventDefault` (o navegador faz o dele). */
+    call(fn) {
+        if (!fn)
+            return false;
+        fn();
+        return true;
+    }
+    navigate(url) {
+        return this.call(this.actions.navigate && (() => this.actions.navigate(url)));
+    }
+    /** Navega para o N-ésimo favorito (1-based) lido da store da navegação; N = o dígito do evento. */
+    goToFavorite(event) {
+        const digit = /^[1-9]$/.test(event.key) ? event.key : /^Digit([1-9])$/.exec(event.code)?.[1];
+        if (!digit)
+            return false;
+        let url = null;
+        try {
+            const list = JSON.parse(localStorage.getItem(this.favKey) || '[]');
+            const fav = Array.isArray(list) ? list[Number(digit) - 1] : null;
+            url = fav?.redirect || (typeof fav?.id === 'string' && fav.id.startsWith('/') ? fav.id : null);
+        }
+        catch { /* store inválida → ignora */ }
+        return url ? this.navigate(url) : false;
+    }
+    /** Texto corrido das teclas para a API antiga (`shortcuts`): "Ctrl + K", "G depois H", "… ou …". */
+    keysText(keys) {
+        const { then, or } = this.lib.shortcuts;
+        const join = this.hermes.platform === 'mac' ? '' : ' + ';
+        return this.hermes
+            .format(keys)
+            .map((steps) => steps.map((step) => step.map((key) => key.label).join(join)).join(` ${then} `))
+            .join(` ${or} `);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ShortcutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ShortcutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ShortcutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function toSpineGroup(group) {
+    return group === 'navigation' || group === 'actions' ? group : 'general';
+}
+
+const MAX_RECENT_SEARCH = 6;
+class HeaderComponent {
+    constructor(authService, themeService, themePresetService, densityService, viewService, router, onboarding, shortcuts, config) {
+        this.authService = authService;
+        this.themeService = themeService;
+        this.themePresetService = themePresetService;
+        this.densityService = densityService;
+        this.viewService = viewService;
+        this.router = router;
+        this.onboarding = onboarding;
+        this.shortcuts = shortcuts;
+        this.isFullscreen = !!document.fullscreenElement;
+        this.element = document.documentElement;
+        this.headerBlocked = false;
+        /** route_redirect da primeira rota navegável da view atual — usado pela marca do header.
+         *  null quando a view não tem nenhuma rota (nesse caso a marca não é link). */
+        this.homeRoute = null;
+        this.injector = inject(Injector);
+        this.text = inject(SPINE_MESSAGES).header;
+        this.fmt = formatMessage;
+        this.settings = inject(SpineSettingsService);
+        this.news = inject(SpineNewsService);
+        this.quickQuery = '';
+        this.quickOpen = false;
+        this.quickResults = [];
+        this.quickActive = 0;
+        this.quickIndex = [];
+        /** Histórico de buscas (mostrado ao focar com o campo vazio). */
+        this.recentSearches = [];
+        /** Verdadeiro quando o painel está exibindo o histórico (campo vazio). */
+        this.showingRecent = false;
+        this.appName = config?.appName ?? 'Hermes';
+        const ns = config?.clientId ?? 'app';
+        this.recentSearchKey = `${ns}_header_recent_searches`;
+    }
+    async ngOnInit() {
+        this.updateView(this.viewService.currentView);
+        this.viewService.currentView$.subscribe((data) => this.updateView(data));
+        // Depois de trocar de badge, a view/rotas mudam — sem isso o usuário fica
+        // parado numa rota que pode não existir mais pro badge novo. Se o badge novo
+        // não tiver nenhuma view disponível, manda pro no-permission em vez de travar.
+        //
+        // badgeChanged$ dispara ANTES do ViewService.currentView ser atualizado
+        // (AuthorizationService.switchBadge emite o evento em applyToken() e só
+        // depois faz `await view.update(token)`), então não dá pra usar
+        // currentView na hora do evento — ele ainda é a view do badge anterior.
+        // Por isso esperamos a próxima emissão *diferente* de currentView$ antes
+        // de decidir o redirect.
+        this.authService.badgeChanged$.subscribe(() => {
+            const staleView = this.viewService.currentView;
+            this.viewService.currentView$
+                .pipe(filter((v) => v !== staleView), take(1))
+                .subscribe((data) => {
+                const firstRoute = this.findFirstNavigable(spineRoutesOf(data));
+                this.router.navigate([firstRoute ?? '/no-permission']);
+            });
+        });
+        this.recentSearches = this.loadRecent();
+    }
+    updateView(data) {
+        const routes = spineRoutesOf(data);
+        this.quickIndex = this.flattenRoutes(routes, []);
+        this.homeRoute = this.findFirstNavigable(routes);
+    }
+    /** Primeira rota navegável (DFS), atravessando grupos "transparentes" sem route_redirect. */
+    findFirstNavigable(routes) {
+        for (const r of routes || []) {
+            if (!r)
+                continue;
+            if (r.route_redirect)
+                return r.route_redirect;
+            if (r.routes?.length) {
+                const found = this.findFirstNavigable(r.routes);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    setTheme(theme) {
+        this.themeService.setTheme(theme);
+    }
+    setDensity() { this.densityService.toggleDensity(); }
+    get isCompactDensity() { return this.densityService.current.name === 'compact'; }
+    toggleFullscreen() {
+        if (!document.fullscreenElement) {
+            this.element.requestFullscreen()
+                .then(() => { this.isFullscreen = true; })
+                .catch(err => console.error(`Erro ao ativar tela cheia: ${err.message}`));
+        }
+        else {
+            document.exitFullscreen()
+                .then(() => { this.isFullscreen = false; })
+                .catch(err => console.error(`Erro ao sair da tela cheia: ${err.message}`));
+        }
+    }
+    get badge() { return this.authService.badge; }
+    get badges() { return this.authService.badges; }
+    get profile() { return this.authService.profile; }
+    async switchBadge(badgeTypeId) {
+        await this.authService.switchBadge(badgeTypeId);
+    }
+    logout() { this.authService.logout(); }
+    /** Reabre o tour guiado de onboarding. */
+    startTour() { this.onboarding.restart(); }
+    /** Abre o painel de atalhos de teclado. */
+    openShortcuts() { this.shortcuts.help$.next(); }
+    /** Menu do perfil: achatado (badges, se houver mais de um, + ações), já que `hm-menu`
+     *  não tem submenu aninhado como o `hermes-dropdown` antigo tinha para a troca de crachá. */
+    get profileMenuItems() {
+        const items = [];
+        // Vários níveis de acesso: um item que abre um segundo menu (MenuItem.children) em vez de listar
+        // todos os níveis direto no menu do perfil.
+        if (this.badges.length > 1) {
+            items.push({
+                id: 'badges',
+                label: this.text.accessLevels,
+                icon: 'shield-check',
+                children: this.badges.map(b => ({ id: `badge:${b.id}`, label: b.name, icon: 'shield-check', disabled: b.id === this.badge?.id })),
+            });
+        }
+        items.push({ id: 'settings', label: this.text.settings, icon: 'cog', separatorAbove: items.length > 0 });
+        items.push({ id: 'theme', label: this.text.appearance, icon: 'color-palette' });
+        items.push({ id: 'shortcuts', label: this.text.shortcuts, icon: 'keyboard' });
+        items.push({ id: 'tour', label: this.text.tour, icon: 'play' });
+        // Só quando o app registrou alguma novidade vigente (provideSpineNews).
+        if (this.news.hasAny())
+            items.push({ id: 'news', label: this.text.news, icon: 'star' });
+        items.push({ id: 'logout', label: this.text.logout, icon: 'logout', danger: true, separatorAbove: true });
+        return items;
+    }
+    onProfileMenuChosen(id) {
+        if (id.startsWith('badge:')) {
+            void this.switchBadge(id.slice('badge:'.length));
+            return;
+        }
+        switch (id) {
+            case 'tour':
+                this.startTour();
+                return;
+            case 'news':
+                this.news.showAll();
+                return;
+            case 'shortcuts':
+                this.openShortcuts();
+                return;
+            case 'settings':
+                this.settings.open();
+                return;
+            // "Aparência" abre o painel direto na seção (era o modal de tema, que virou parte dela).
+            case 'theme':
+                this.settings.open(SPINE_SETTINGS_KEYS.appearance);
+                return;
+            case 'logout':
+                this.logout();
+                return;
+        }
+    }
+    /** Achata a árvore de rotas em itens navegáveis (com trilha de ancestrais). */
+    flattenRoutes(routes, trail) {
+        const skip = new Set(['search', 'theme', 'logout']);
+        const out = [];
+        for (const r of routes || []) {
+            if (!r)
+                continue;
+            const name = r.route_display_name || '';
+            if (r.route_redirect && name && !skip.has(r.route_type)) {
+                out.push({ name, icon: r.route_icon || 'application', redirect: r.route_redirect, path: trail.join(' › ') });
+            }
+            if (r.routes?.length)
+                out.push(...this.flattenRoutes(r.routes, name ? [...trail, name] : trail));
+        }
+        return out;
+    }
+    /** Chamado pelo `(searchRequested)` do `hm-header` (clique no campo ou `Ctrl K`, já tratado
+     *  internamente por ele) — abre o modal de busca, mesmo padrão do `docs/website`
+     *  (`openSearch()` em `app.component.ts`: `@if` monta o `hm-modal` só quando aberto). */
+    onSearchRequested() {
+        this.quickQuery = '';
+        this.quickOpen = true;
+        this.onQuickSearch();
+        // O `#quickBox` (e o input do hm-input dentro dele) só existe no DOM depois do `@if`/`hm-modal` montarem — foca assim que
+        // a próxima renderização terminar (mesmo problema documentado em WorkspaceNavService: query
+        // de view não existe antes do primeiro ciclo depois do `@if` virar true).
+        afterNextRender(() => this.quickBox?.nativeElement?.querySelector('input')?.focus(), { injector: this.injector });
+    }
+    /** `(openChange)` do `hm-modal` — fecha ao clicar fora/Esc/botão de fechar. */
+    onQuickModalOpenChange(open) {
+        this.quickOpen = open;
+        if (!open) {
+            this.quickQuery = '';
+            this.quickResults = [];
+            this.showingRecent = false;
+        }
+    }
+    onQuickSearch() {
+        const q = (this.quickQuery || '').trim().toLowerCase();
+        this.quickActive = 0;
+        // Campo vazio: mostra o histórico (recalculado na hora, para refletir as
+        // últimas navegações) em vez de nada.
+        if (!q) {
+            this.showingRecent = true;
+            this.recentSearches = this.loadRecent();
+            this.quickResults = this.recentSearches.slice(0, 8);
+            return;
+        }
+        this.showingRecent = false;
+        const seen = new Set();
+        this.quickResults = this.quickIndex
+            .filter((x) => (x.name.toLowerCase().includes(q) || x.path.toLowerCase().includes(q)))
+            .filter((x) => (seen.has(x.redirect) ? false : (seen.add(x.redirect), true)))
+            .slice(0, 8);
+    }
+    quickGo(item) {
+        if (!item?.redirect)
+            return;
+        this.pushRecent(item);
+        this.onQuickModalOpenChange(false);
+        this.router.navigateByUrl(item.redirect);
+    }
+    quickMove(delta) {
+        if (!this.quickResults.length)
+            return;
+        this.quickActive = (this.quickActive + delta + this.quickResults.length) % this.quickResults.length;
+    }
+    // ─── Histórico de buscas ────────────────────────────────────────────────────
+    readJson(key) {
+        try {
+            const v = JSON.parse(localStorage.getItem(key) || '[]');
+            return Array.isArray(v) ? v : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    loadRecent() {
+        return this.readJson(this.recentSearchKey)
+            .filter((x) => x?.redirect && x?.name)
+            .map((x) => ({ name: x.name, icon: x.icon || 'application', redirect: x.redirect, path: x.path || '' }))
+            .slice(0, MAX_RECENT_SEARCH);
+    }
+    pushRecent(item) {
+        const entry = { name: item.name, icon: item.icon || 'application', redirect: item.redirect, path: item.path || '' };
+        const next = [entry, ...this.recentSearches.filter((x) => x.redirect !== entry.redirect)].slice(0, MAX_RECENT_SEARCH);
+        this.recentSearches = next;
+        try {
+            localStorage.setItem(this.recentSearchKey, JSON.stringify(next));
+        }
+        catch { /* storage cheio/indisponível */ }
+    }
+    clearRecent(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        this.recentSearches = [];
+        try {
+            localStorage.removeItem(this.recentSearchKey);
+        }
+        catch { /* noop */ }
+        this.quickResults = [];
+    }
+    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: OnboardingService }, { 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", viewQueries: [{ propertyName: "quickBox", first: true, predicate: ["quickBox"], descendants: true }], 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        <!-- tema claro/escuro -->\n        <hm-icon-button emphasis=\"subtle\" data-tour=\"theme\" (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\" data-tour=\"density\" (clicked)=\"setDensity()\"\n            [icon]=\"isCompactDensity ? 'density-comfortable' : 'density-compact'\"\n            [label]=\"isCompactDensity ? text.densityComfortable : text.densityCompact\">\n        </hm-icon-button>\n\n        <!-- tela cheia -->\n        <hm-icon-button emphasis=\"subtle\" data-tour=\"fullscreen\" (clicked)=\"toggleFullscreen()\"\n            [icon]=\"isFullscreen ? 'shrink' : 'resize'\"\n            [label]=\"isFullscreen ? text.exitFullscreen : text.fullscreen\">\n        </hm-icon-button>\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\" data-tour=\"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 (quick-launcher) \u2014 mesmo padr\u00E3o do docs/website: modal aberto por\n     (searchRequested), n\u00E3o um overlay pr\u00F3prio sempre presente no DOM. -->\n@if (quickOpen) {\n  <hm-modal [open]=\"quickOpen\" (openChange)=\"onQuickModalOpenChange($event)\" [heading]=\"text.search\" size=\"medium\">\n    <!-- Mesmo padr\u00E3o da busca do design system: hm-input + lista simples (nome \u00B7 onde). Setas/Enter navegam. -->\n    <div class=\"search\" data-tour=\"search\" #quickBox\n        (keydown.arrowdown)=\"$event.preventDefault(); quickMove(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); quickMove(-1)\"\n        (keydown.enter)=\"quickGo(quickResults[quickActive])\">\n        <hm-input [label]=\"text.search\" [placeholder]=\"text.searchPlaceholder\" icon=\"search\"\n            [(ngModel)]=\"quickQuery\" (ngModelChange)=\"onQuickSearch()\" />\n\n        @if (showingRecent && quickResults.length) {\n            <div class=\"search__recent\">\n                <span>{{ text.recentSearches }}</span>\n                <button type=\"button\" (mousedown)=\"clearRecent($event)\">{{ text.clearRecent }}</button>\n            </div>\n        }\n        @if (quickResults.length) {\n            <ul class=\"search__results\">\n                @for (r of quickResults; track $index; let i = $index) {\n                    <li>\n                        <button type=\"button\" [class.active]=\"i === quickActive\" (mouseenter)=\"quickActive = i\" (mousedown)=\"quickGo(r)\">\n                            <strong><hm-icon [shape]=\"showingRecent ? 'history' : r.icon\" />{{ r.name }}</strong>\n                            @if (r.path) { <span>{{ r.path }}</span> }\n                        </button>\n                    </li>\n                }\n            </ul>\n        } @else if (quickQuery) {\n            <p class=\"search__empty\">{{ fmt(text.noResults, { term: quickQuery }) }}</p>\n        }\n    </div>\n  </hm-modal>\n}\n\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-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}.search{display:grid;gap:var(--hm-space-sm);min-width:min(480px,70vw)}.search__recent{display:flex;align-items:center;justify-content:space-between;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.search__recent button{border:none;background:none;color:var(--hm-action);font:inherit;cursor:pointer}.search__recent button:hover{text-decoration:underline}.search__results{display:grid;gap:var(--hm-space-micro);max-height:320px;margin:0;padding:0;overflow-y:auto;list-style:none}.search__results button{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:var(--hm-space-sm);padding:var(--hm-space-nano) var(--hm-space-sm);border:none;border-radius:var(--hm-radius-control);background:none;color:var(--hm-text);cursor:pointer;text-align:start}.search__results button:hover,.search__results button:focus-visible,.search__results button.active{background:var(--hm-nav-hover)}.search__results button strong{display:inline-flex;align-items:center;gap:var(--hm-space-xs);font-weight:600}.search__results button strong hm-icon{color:var(--hm-muted)}.search__results button span{color:var(--hm-muted);font-size:var(--hm-font-size-xs);text-align:end}.search__empty{margin:0;padding:var(--hm-space-nano) var(--hm-space-sm);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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: 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: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: AppLauncherComponent, selector: "spine-app-launcher" }, { kind: "component", type: SpineBrandComponent, selector: "spine-brand", inputs: ["homeRoute", "label"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-header', imports: [
+                        CommonModule, FormsModule,
+                        HeaderComponent$1, IconButtonComponent, IconComponent, InputComponent, MenuButtonComponent, AccountAvatarComponent, ModalComponent,
+                        AppLauncherComponent, SpineBrandComponent,
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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        <!-- tema claro/escuro -->\n        <hm-icon-button emphasis=\"subtle\" data-tour=\"theme\" (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\" data-tour=\"density\" (clicked)=\"setDensity()\"\n            [icon]=\"isCompactDensity ? 'density-comfortable' : 'density-compact'\"\n            [label]=\"isCompactDensity ? text.densityComfortable : text.densityCompact\">\n        </hm-icon-button>\n\n        <!-- tela cheia -->\n        <hm-icon-button emphasis=\"subtle\" data-tour=\"fullscreen\" (clicked)=\"toggleFullscreen()\"\n            [icon]=\"isFullscreen ? 'shrink' : 'resize'\"\n            [label]=\"isFullscreen ? text.exitFullscreen : text.fullscreen\">\n        </hm-icon-button>\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\" data-tour=\"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 (quick-launcher) \u2014 mesmo padr\u00E3o do docs/website: modal aberto por\n     (searchRequested), n\u00E3o um overlay pr\u00F3prio sempre presente no DOM. -->\n@if (quickOpen) {\n  <hm-modal [open]=\"quickOpen\" (openChange)=\"onQuickModalOpenChange($event)\" [heading]=\"text.search\" size=\"medium\">\n    <!-- Mesmo padr\u00E3o da busca do design system: hm-input + lista simples (nome \u00B7 onde). Setas/Enter navegam. -->\n    <div class=\"search\" data-tour=\"search\" #quickBox\n        (keydown.arrowdown)=\"$event.preventDefault(); quickMove(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); quickMove(-1)\"\n        (keydown.enter)=\"quickGo(quickResults[quickActive])\">\n        <hm-input [label]=\"text.search\" [placeholder]=\"text.searchPlaceholder\" icon=\"search\"\n            [(ngModel)]=\"quickQuery\" (ngModelChange)=\"onQuickSearch()\" />\n\n        @if (showingRecent && quickResults.length) {\n            <div class=\"search__recent\">\n                <span>{{ text.recentSearches }}</span>\n                <button type=\"button\" (mousedown)=\"clearRecent($event)\">{{ text.clearRecent }}</button>\n            </div>\n        }\n        @if (quickResults.length) {\n            <ul class=\"search__results\">\n                @for (r of quickResults; track $index; let i = $index) {\n                    <li>\n                        <button type=\"button\" [class.active]=\"i === quickActive\" (mouseenter)=\"quickActive = i\" (mousedown)=\"quickGo(r)\">\n                            <strong><hm-icon [shape]=\"showingRecent ? 'history' : r.icon\" />{{ r.name }}</strong>\n                            @if (r.path) { <span>{{ r.path }}</span> }\n                        </button>\n                    </li>\n                }\n            </ul>\n        } @else if (quickQuery) {\n            <p class=\"search__empty\">{{ fmt(text.noResults, { term: quickQuery }) }}</p>\n        }\n    </div>\n  </hm-modal>\n}\n\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-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}.search{display:grid;gap:var(--hm-space-sm);min-width:min(480px,70vw)}.search__recent{display:flex;align-items:center;justify-content:space-between;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.search__recent button{border:none;background:none;color:var(--hm-action);font:inherit;cursor:pointer}.search__recent button:hover{text-decoration:underline}.search__results{display:grid;gap:var(--hm-space-micro);max-height:320px;margin:0;padding:0;overflow-y:auto;list-style:none}.search__results button{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:var(--hm-space-sm);padding:var(--hm-space-nano) var(--hm-space-sm);border:none;border-radius:var(--hm-radius-control);background:none;color:var(--hm-text);cursor:pointer;text-align:start}.search__results button:hover,.search__results button:focus-visible,.search__results button.active{background:var(--hm-nav-hover)}.search__results button strong{display:inline-flex;align-items:center;gap:var(--hm-space-xs);font-weight:600}.search__results button strong hm-icon{color:var(--hm-muted)}.search__results button span{color:var(--hm-muted);font-size:var(--hm-font-size-xs);text-align:end}.search__empty{margin:0;padding:var(--hm-space-nano) var(--hm-space-sm);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.AuthorizationService }, { type: i2$1.ThemeService }, { type: i2$1.ThemePresetService }, { type: i2$1.DensityService }, { type: i1.ViewService }, { type: i3.Router }, { type: OnboardingService }, { type: ShortcutService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SPINE_CONFIG]
+                }] }], propDecorators: { quickBox: [{
+                type: ViewChild,
+                args: ['quickBox']
+            }] } });
+
+const HOME_PATH = '/home';
+/**
+ * Dono do `WorkspaceStore` do shell — mesmo padrão do `WorkspaceNavService` do docs/website
+ * (`packages/hermes-ui/docs/website/src/app/workspace-nav.service.ts`), adaptado pra ler a
+ * árvore de rotas do BACKEND (`ViewService.currentView`) em vez de um `page-registry.ts`
+ * estático. Cada página visitada vira uma aba, pertencente a um painel; a navegação real do
+ * `Router` (routerLink, busca, sidebar) sempre atualiza a aba ativa do painel FOCADO.
+ */
+class SpineWorkspaceNavService {
+    constructor() {
+        this.router = inject(Router);
+        this.viewService = inject(ViewService);
+        this.store = createPersistedWorkspaceStore({ tabs: [this.tabFor(HOME_PATH)], activeId: HOME_PATH }, (id) => (this.chainFor(id) ? this.tabFor(id) : null), 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 */ []));
+        this.focusedPanelId = computed(() => this.state().focusedPanelId, ...(ngDevMode ? [{ debugName: "focusedPanelId" }] : /* istanbul ignore next */ []));
+        /** Cadeia resolvida (header→…→page) da aba ativa do painel FOCADO — é o que `spine-sidebar`
+         *  (menu) e `spine-navigation` (breadcrumb) leem pra saber "onde estamos", no lugar do antigo
+         *  `viewService.logControl$`/`breadCrumb$` globais (que só existiam porque havia uma página
+         *  "atual" só; agora cada painel tem a sua). */
+        this.focusedChain = computed(() => {
+            const s = this.state();
+            const activeId = findPanelTabs(s.root, s.focusedPanelId)?.activeId;
+            return activeId ? this.chainFor(activeId) : null;
+        }, ...(ngDevMode ? [{ debugName: "focusedChain" }] : /* istanbul ignore next */ []));
+        this.lastKnownPath = '';
+        this.store.subscribe((s) => this.state.set(s));
+        this.router.events.subscribe((event) => {
+            if (!(event instanceof NavigationEnd))
+                return;
+            const path = event.urlAfterRedirects.split(/[?#]/)[0] || HOME_PATH;
+            this.lastKnownPath = path;
+            this.store.navigateActiveTab(this.state().focusedPanelId, this.tabFor(event.urlAfterRedirects));
+        });
+        // Mesma corrida documentada no WorkspaceNavService do docs/website: pula a 1ª execução, senão
+        // o estado inicial (hardcoded ou recém-restaurado do sessionStorage) vence a navegação real
+        // (mais lenta, resolve async) e qualquer link direto/F5 cai sempre em HOME_PATH.
+        let first = true;
+        effect(() => {
+            const s = this.state();
+            const activeId = findPanelTabs(s.root, s.focusedPanelId)?.activeId;
+            if (first) {
+                first = false;
+                return;
+            }
+            if (!activeId || activeId === this.lastKnownPath)
+                return;
+            this.lastKnownPath = activeId;
+            void this.router.navigateByUrl(activeId);
+        });
+    }
+    /** Resolve a cadeia de rotas pra uma URL, direto na view atual — sem `Router`, sem `async`
+     *  (o componente da folha só é carregado por quem for de fato desenhar o painel). Desce sozinho
+     *  por nós organizacionais (com filhos, sem conteúdo próprio) — o rótulo/ícone da aba e o que a
+     *  sidebar/breadcrumb mostram refletem o destino DE VERDADE, não a rota-container clicada. */
+    chainFor(url) {
+        const currentRoutes = spineRoutesOf(this.viewService.currentView);
+        return resolveEffectiveRouteChain(currentRoutes, (u) => this.viewService.getLevel(u), (u, level) => this.viewService.getUrlAtLevel(u, level), url);
+    }
+    tabFor(url) {
+        const path = url.split(/[?#]/)[0] || HOME_PATH;
+        const leaf = this.chainFor(path)?.at(-1);
+        return {
+            id: path,
+            label: leaf?.route_display_name ?? path,
+            icon: leaf?.route_icon ?? undefined,
+        };
+    }
+    /** O `+` de um painel: abre a home ali, como um navegador. */
+    openNewTab(panelId) {
+        this.store.openTab(panelId, this.tabFor(HOME_PATH));
+    }
+    /** Navegação LOCAL a um painel específico (usada pelo `PanelLocalLinkDirective`) — troca o
+     *  ASSUNTO da aba ativa daquele painel, não empilha uma aba nova. */
+    navigateLocally(panelId, href) {
+        this.store.navigateActiveTab(panelId, this.tabFor(href));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineWorkspaceNavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineWorkspaceNavService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineWorkspaceNavService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * `Route` (árvore do backend) → `SidebarNode` (genérico, o que `hm-sidebar-node` sabe desenhar).
+ * Sem filtrar por `route_type`: a árvore real mistura tipos livremente por PAPEL, não por
+ * profundidade fixa (achado real, 2026-09-28, com a árvore de verdade em mãos — 'menu'/'item'/
+ * 'submenu'/'page' aparecem intercalados; um nó 'item' pode ter filhos 'submenu' que têm filhos
+ * 'page', por exemplo "Sistema"). `hm-sidebar-node` já decide sozinho link-vs-grupo pela presença
+ * de filhos + profundidade restante — não precisa saber o `route_type` pra nada.
+ */
+function toSidebarNode(route) {
+    return {
+        // Página: o router (a tela); grupo (sem router próprio): a rota.
+        id: routerIdOf(route) ?? route.routed_id,
+        label: route.route_display_name ?? '',
+        icon: route.route_icon ?? undefined,
+        route: route.route_redirect ?? '',
+        children: (route.routes ?? []).map(toSidebarNode),
+    };
+}
+/**
+ * Menu lateral fixo — TODA a navegação do shell mora aqui agora, nunca no header (decisão
+ * explícita do usuário: "não deve ter ícones de navegação no menu superior, deve ter um menu
+ * lateral de navegação fixa" — o antigo `h-nav`/`hm-menu-button` de nível 'header'/'menu' do
+ * `header.component.html` foi removido, essa navegação virou `modules` abaixo).
+ *
+ * Dois níveis, um de cada vez — MESMO padrão de back/forward do `docs/website`'s sidebar (achado
+ * real, 2026-09-28: a primeira versão mostrava os dois SEMPRE juntos, empilhados, achando que o
+ * modelo de rotas do backend não permitia "sair" de um módulo — errado; nada impede mostrar só um
+ * nível por vez com um botão de voltar, é só um `signal` local):
+ * - `modules` (nível 1, 'header', de `ViewService.currentView` direto — não muda com a navegação
+ *   do painel): a lista pra trocar de módulo.
+ * - `menus`: a cadeia resolvida da aba ativa do painel FOCADO
+ *   (`SpineWorkspaceNavService.focusedChain`) — os itens do módulo ATUAL.
+ * `viewingModules` decide qual dos dois aparece; volta pra `false` sozinho sempre que o módulo
+ * atual muda (navegação real feita, mesma UX do `leaveModule()` do docs).
+ */
+class SidebarComponent {
+    constructor() {
+        this.text = inject(SPINE_MESSAGES).sidebar;
+        this.fmt = formatMessage;
+        this.workspace = inject(SpineWorkspaceNavService);
+        this.viewService = inject(ViewService);
+        this.authService = inject(AuthorizationService);
+        this.realmApps = inject(RealmAppsService);
+        /** 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 });
+        /** Sem nenhum crachá (nenhum grupo do app — ver `ViewGuard`, tela `/blocked`), o menu fica vazio
+         *  mesmo que a view traga rotas públicas: listar o que leva de volta ao "Acesso bloqueado" não
+         *  ajuda. `badges` não é sinal, mas a view sempre é refeita depois do token (`view.update`), e é
+         *  ela que recalcula isto. */
+        this.modules = computed(() => {
+            // Irmãos de mesmo endereço já fundidos: um "laboratorio" só, não um por nível (ver `mergeRouteTree`).
+            const routes = spineRoutesOf(this.currentView());
+            if (this.authService.authenticated && !this.authService.badges.length)
+                return [];
+            return routes.map(toSidebarNode);
+        }, ...(ngDevMode ? [{ debugName: "modules" }] : /* istanbul ignore next */ []));
+        this.currentModule = computed(() => this.workspace.focusedChain()?.[0] ?? null, ...(ngDevMode ? [{ debugName: "currentModule" }] : /* istanbul ignore next */ []));
+        /** Filhos diretos do módulo atual — sem filtrar por `route_type` (ver `toSidebarNode`). */
+        this.menus = computed(() => (this.currentModule()?.routes ?? []).map(toSidebarNode), ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+        /** Nem todo nível 1 é um "módulo" navegável — "Início"/"Monitoração" na árvore real são
+         *  `route_type: 'page'` SEM filhos, folhas diretas (achado real, 2026-09-28: mostravam
+         *  cabeçalho + botão voltar + área de conteúdo vazia, como se fossem módulos de verdade). Só
+         *  entra no modo "dentro do módulo" quando há algo pra mostrar como submenu. */
+        this.currentModuleHasChildren = computed(() => (this.currentModule()?.routes?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "currentModuleHasChildren" }] : /* istanbul ignore next */ []));
+        /** `true` = mostrando a lista de módulos; `false` = mostrando o menu do módulo atual. Cai pra
+         *  `true` sozinho quando o módulo atual não tem submenu nenhum — nesse caso não existe "dentro
+         *  do módulo" pra mostrar. */
+        this.wantsModules = signal(false, ...(ngDevMode ? [{ debugName: "wantsModules" }] : /* istanbul ignore next */ []));
+        this.viewingModules = computed(() => this.wantsModules() || !this.currentModuleHasChildren(), ...(ngDevMode ? [{ debugName: "viewingModules" }] : /* istanbul ignore next */ []));
+        /** Sem teto artificial de nível de grupo — o template não enxerga o global `Infinity`, só
+         *  membros da classe. Ver comentário no `.html`: o backend já limita a árvore sozinho. */
+        this.maxDepth = Infinity;
+        void this.realmApps.getApplications(this.authService.getToken()).then(list => this.apps.set(list ?? []), () => this.apps.set([]));
+        // Navegou de verdade (clicou num módulo, ou entrou direto por link/F5) -> volta pro menu do
+        // módulo novo. Só faz sentido reagir à IDENTIDADE do módulo (router da página ou, num grupo, a
+        // rota -- módulo costuma ser grupo, sem router próprio), não ao objeto inteiro
+        // (a cadeia inteira muda a cada troca de aba dentro do MESMO módulo também).
+        let lastModuleId;
+        effect(() => {
+            const module = this.currentModule();
+            const id = module ? routerIdOf(module) ?? module.routed_id : null;
+            if (id !== lastModuleId) {
+                lastModuleId = id;
+                this.wantsModules.set(false);
+            }
+        });
+        // O efeito acima não cobre voltar pro MESMO módulo: dentro de "Sistema", "← Módulos" e
+        // clicar em "Sistema" de novo navega (a rota muda), mas a identidade do módulo é a mesma — o
+        // efeito não dispara e a lista de módulos ficava na tela (achado real, 2026-09-29: só
+        // funcionava passando por outro módulo antes). Qualquer navegação concluída é um "entrar".
+        // NavigationSkipped também: clicar no módulo cuja página já está aberta cai no ViewGuard
+        // (`/sys` cancela e redireciona pra `/sys/about/resources`), e o redirect pra URL ATUAL é
+        // descartado pelo Router como "mesma URL" — não emite NavigationEnd nenhum.
+        inject(Router).events.pipe(filter(e => e instanceof NavigationEnd || e instanceof NavigationSkipped), takeUntilDestroyed()).subscribe(() => this.wantsModules.set(false));
+    }
+    showModules() {
+        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 }); }
+}
+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"] }]
+        }], ctorParameters: () => [] });
+
+// Geometria do tour: o recorte iluminado (holofote) em volta do alvo e onde o balão cabe. Funções
+// puras, sem DOM — o componente mede e aplica.
+/** Folga do holofote em volta do alvo (cada lado). */
+const TOUR_SPOT_PADDING = 6;
+/** Distância entre o holofote e o balão. */
+const TOUR_CARD_GAP = 14;
+/** Distância mínima do balão às bordas da janela — a mesma do `max-width: calc(100vw - 24px)` do SCSS. */
+const TOUR_EDGE = 12;
+/** Largura do balão no SCSS (`.ob-card`), usada enquanto ele ainda não foi medido. */
+const TOUR_CARD_WIDTH = 332;
+/** Altura provável do balão antes da primeira medida (título + duas linhas + rodapé). */
+const TOUR_CARD_HEIGHT_GUESS = 190;
+/** Holofote: o retângulo do alvo com a mesma folga nos quatro lados. */
+function tourSpotlight(target, padding = TOUR_SPOT_PADDING) {
+    return {
+        top: target.top - padding,
+        left: target.left - padding,
+        width: target.width + padding * 2,
+        height: target.height + padding * 2,
+    };
+}
+/** Largura que o balão de fato ocupa: a do CSS, limitada pela janela menos as margens. */
+function tourCardWidth(width, viewport) {
+    return Math.max(0, Math.min(width, viewport.width - TOUR_EDGE * 2));
+}
+/** Prende `value` entre a margem e o maior início que ainda deixa `size` dentro de `room`. */
+function clampStart(value, size, room) {
+    return Math.max(TOUR_EDGE, Math.min(value, room - TOUR_EDGE - size));
+}
+/**
+ * Onde o balão fica. Sem holofote: no meio da janela (`centered`). Com holofote, a primeira posição que
+ * cabe: embaixo, em cima (ambas alinhadas à esquerda do holofote), à direita, à esquerda (ambas
+ * alinhadas ao topo dele) e, se nada couber, no meio da janela por cima do alvo.
+ */
+function placeTourCard(spot, card, viewport) {
+    const width = tourCardWidth(card.width, viewport);
+    const height = card.height;
+    const centerTop = Math.max(TOUR_EDGE, (viewport.height - height) / 2);
+    const centerLeft = Math.max(TOUR_EDGE, (viewport.width - width) / 2);
+    if (!spot)
+        return { top: centerTop, left: centerLeft, centered: true };
+    const left = clampStart(spot.left, width, viewport.width);
+    const top = clampStart(spot.top, height, viewport.height);
+    const below = spot.top + spot.height + TOUR_CARD_GAP;
+    if (below + height <= viewport.height - TOUR_EDGE)
+        return { top: below, left, centered: false };
+    const above = spot.top - TOUR_CARD_GAP - height;
+    if (above >= TOUR_EDGE)
+        return { top: above, left, centered: false };
+    const right = spot.left + spot.width + TOUR_CARD_GAP;
+    if (right + width <= viewport.width - TOUR_EDGE)
+        return { top, left: right, centered: false };
+    const leftSide = spot.left - TOUR_CARD_GAP - width;
+    if (leftSide >= TOUR_EDGE)
+        return { top, left: leftSide, centered: false };
+    return {
+        top: clampStart(centerTop, height, viewport.height),
+        left: clampStart(centerLeft, width, viewport.width),
+        centered: false,
+    };
+}
+
+/**
+ * Desenho do tour guiado: escurece a tela, recorta um holofote sobre o alvo do passo e põe o balão
+ * (título, texto, progresso e navegação) onde couber. Segue o `OnboardingService`; recalcula a cada
+ * passo e quando a janela rola ou muda de tamanho.
+ */
+class OnboardingOverlayComponent {
+    constructor(onboarding) {
+        this.onboarding = onboarding;
+        this.text = inject(SPINE_MESSAGES).tour;
+        this.fmt = formatMessage;
+        this.step = null;
+        this.index = 0;
+        this.total = 0;
+        /** holofote (null = passo centralizado, sem recorte). */
+        this.spot = null;
+        /** posição do balão. */
+        this.card = { top: 0, left: 0, centered: true };
+        this.cdr = inject(ChangeDetectorRef);
+        this.injector = inject(Injector);
+    }
+    get isFirst() { return this.onboarding.isFirst; }
+    get isLast() { return this.onboarding.isLast; }
+    ngOnInit() {
+        this.sub = this.onboarding.current$.subscribe((cur) => {
+            // O passo chega de fora da detecção de mudanças (timer do serviço, clique no balão): marca a
+            // view, senão um app sem zone.js não redesenha.
+            this.cdr.markForCheck();
+            if (!cur) {
+                this.step = null;
+                this.spot = null;
+                return;
+            }
+            this.step = cur.step;
+            this.index = cur.index;
+            this.total = cur.total;
+            this.layout();
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+        this.reposition?.destroy();
+    }
+    /** Holofote e balão do passo atual: primeiro com a altura estimada, depois com a medida real. */
+    layout() {
+        const step = this.step;
+        if (!step)
+            return;
+        const target = step.target ? findTourTarget(step.target) : null;
+        if (target)
+            this.bringIntoView(target);
+        this.spot = target ? tourSpotlight(target.getBoundingClientRect()) : null;
+        this.card = placeTourCard(this.spot, this.cardSize(TOUR_CARD_HEIGHT_GUESS), this.viewport());
+        this.positionCard();
+    }
+    /**
+     * Refina a posição depois que o balão foi desenhado (a altura depende do texto). Roda depois do
+     * render e só marca a view se a posição mudou: sem NG0100 e sem precisar do zone.js.
+     */
+    positionCard() {
+        this.reposition?.destroy();
+        this.reposition = afterNextRender({
+            read: () => {
+                const height = this.cardRef?.nativeElement.offsetHeight ?? 0;
+                if (!this.step || !height)
+                    return;
+                const next = placeTourCard(this.spot, this.cardSize(height), this.viewport());
+                if (!this.samePosition(next)) {
+                    this.card = next;
+                    this.cdr.markForCheck();
+                }
+            },
+        }, { injector: this.injector });
+    }
+    /** Alvo fora da faixa visível: rola até o meio antes de medir (o `scroll` da janela refaz a conta). */
+    bringIntoView(target) {
+        const rect = target.getBoundingClientRect();
+        if (rect.top >= 0 && rect.bottom <= window.innerHeight)
+            return;
+        const calm = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        target.scrollIntoView({ block: 'center', inline: 'nearest', behavior: calm ? 'auto' : 'smooth' });
+    }
+    /** Largura que o CSS dá ao balão (medida quando já existe) e a altura informada. */
+    cardSize(height) {
+        const measured = this.cardRef?.nativeElement.offsetWidth ?? 0;
+        return { width: measured || TOUR_CARD_WIDTH, height };
+    }
+    viewport() {
+        return { width: window.innerWidth, height: window.innerHeight };
+    }
+    samePosition(next) {
+        return next.top === this.card.top && next.left === this.card.left && next.centered === this.card.centered;
+    }
+    onViewportChange() {
+        if (this.step)
+            this.layout();
+    }
+    // ── ações ──
+    next() { this.onboarding.next(); }
+    prev() { this.onboarding.prev(); }
+    skip() { this.onboarding.finish(); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: OnboardingOverlayComponent, deps: [{ token: OnboardingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: OnboardingOverlayComponent, isStandalone: true, selector: "spine-onboarding-overlay", host: { listeners: { "window:resize": "onViewportChange()", "window:scroll": "onViewportChange()" } }, viewQueries: [{ propertyName: "cardRef", first: true, predicate: ["cardEl"], descendants: true }], ngImport: i0, template: "<div class=\"ob-root\" *ngIf=\"step\">\n  <!-- Holofote: recorte iluminado sobre o alvo (o escuro vem do box-shadow gigante). -->\n  <div class=\"ob-spot\" *ngIf=\"spot\"\n    [style.top.px]=\"spot.top\" [style.left.px]=\"spot.left\"\n    [style.width.px]=\"spot.width\" [style.height.px]=\"spot.height\"></div>\n\n  <!-- Passos centralizados (sem alvo): escurece a tela inteira. -->\n  <div class=\"ob-dim\" *ngIf=\"!spot\"></div>\n\n  <!-- Bal\u00E3o -->\n  <div #cardEl class=\"ob-card\" [class.is-centered]=\"card.centered\"\n    [style.top.px]=\"card.top\" [style.left.px]=\"card.left\">\n    <div class=\"ob-card__head\">\n      <h3 class=\"ob-card__title\">{{ step.title }}</h3>\n      <span class=\"ob-progress\">{{ fmt(text.progress, { current: index + 1, total: total }) }}</span>\n    </div>\n    <p class=\"ob-card__desc\" [innerHTML]=\"step.description\"></p>\n\n    <div class=\"ob-card__foot\">\n      <hm-button class=\"ob-skip\" emphasis=\"minimal\" (clicked)=\"skip()\">{{ text.skip }}</hm-button>\n      <div class=\"ob-card__foot-actions\">\n        <hm-button *ngIf=\"!isFirst\" emphasis=\"medium\" (clicked)=\"prev()\">{{ text.back }}</hm-button>\n        <hm-button (clicked)=\"next()\">\n          {{ isLast ? text.finish : text.next }}\n        </hm-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--ob-overlay: rgba(0, 0, 0, .55)}.ob-root{position:fixed;inset:0;z-index:10000}.ob-dim{position:absolute;inset:0;background:var(--ob-overlay)}.ob-spot{position:fixed;border-radius:var(--hm-radius-control);box-shadow:0 0 0 9999px var(--ob-overlay);pointer-events:none;transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease}.ob-card{position:fixed;width:332px;max-width:calc(100vw - 24px);background:var(--hm-surface);color:var(--hm-text);border:1px solid var(--hm-border);border-radius:var(--hm-radius-control);padding:20px;box-shadow:var(--hm-shadow-lg, 0 14px 38px rgba(0, 36, 65, .22));transition:top .2s ease,left .2s ease}.ob-card__head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}.ob-card__title{margin:0;min-width:0;flex:1 1 auto;font-size:16px;font-weight:700;line-height:1.3;color:var(--hm-text)}.ob-card__desc{margin:0;font-size:13px;line-height:1.6;color:var(--hm-muted)}.ob-card__desc ::ng-deep b{color:var(--hm-text);font-weight:700}.ob-card__foot{display:flex;align-items:center;gap:8px;margin-top:18px}.ob-card__foot-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.ob-progress{flex:none;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--hm-muted);white-space:nowrap}.ob-skip{margin-right:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: OnboardingOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-onboarding-overlay', imports: [CommonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"ob-root\" *ngIf=\"step\">\n  <!-- Holofote: recorte iluminado sobre o alvo (o escuro vem do box-shadow gigante). -->\n  <div class=\"ob-spot\" *ngIf=\"spot\"\n    [style.top.px]=\"spot.top\" [style.left.px]=\"spot.left\"\n    [style.width.px]=\"spot.width\" [style.height.px]=\"spot.height\"></div>\n\n  <!-- Passos centralizados (sem alvo): escurece a tela inteira. -->\n  <div class=\"ob-dim\" *ngIf=\"!spot\"></div>\n\n  <!-- Bal\u00E3o -->\n  <div #cardEl class=\"ob-card\" [class.is-centered]=\"card.centered\"\n    [style.top.px]=\"card.top\" [style.left.px]=\"card.left\">\n    <div class=\"ob-card__head\">\n      <h3 class=\"ob-card__title\">{{ step.title }}</h3>\n      <span class=\"ob-progress\">{{ fmt(text.progress, { current: index + 1, total: total }) }}</span>\n    </div>\n    <p class=\"ob-card__desc\" [innerHTML]=\"step.description\"></p>\n\n    <div class=\"ob-card__foot\">\n      <hm-button class=\"ob-skip\" emphasis=\"minimal\" (clicked)=\"skip()\">{{ text.skip }}</hm-button>\n      <div class=\"ob-card__foot-actions\">\n        <hm-button *ngIf=\"!isFirst\" emphasis=\"medium\" (clicked)=\"prev()\">{{ text.back }}</hm-button>\n        <hm-button (clicked)=\"next()\">\n          {{ isLast ? text.finish : text.next }}\n        </hm-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--ob-overlay: rgba(0, 0, 0, .55)}.ob-root{position:fixed;inset:0;z-index:10000}.ob-dim{position:absolute;inset:0;background:var(--ob-overlay)}.ob-spot{position:fixed;border-radius:var(--hm-radius-control);box-shadow:0 0 0 9999px var(--ob-overlay);pointer-events:none;transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease}.ob-card{position:fixed;width:332px;max-width:calc(100vw - 24px);background:var(--hm-surface);color:var(--hm-text);border:1px solid var(--hm-border);border-radius:var(--hm-radius-control);padding:20px;box-shadow:var(--hm-shadow-lg, 0 14px 38px rgba(0, 36, 65, .22));transition:top .2s ease,left .2s ease}.ob-card__head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}.ob-card__title{margin:0;min-width:0;flex:1 1 auto;font-size:16px;font-weight:700;line-height:1.3;color:var(--hm-text)}.ob-card__desc{margin:0;font-size:13px;line-height:1.6;color:var(--hm-muted)}.ob-card__desc ::ng-deep b{color:var(--hm-text);font-weight:700}.ob-card__foot{display:flex;align-items:center;gap:8px;margin-top:18px}.ob-card__foot-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.ob-progress{flex:none;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--hm-muted);white-space:nowrap}.ob-skip{margin-right:auto}\n"] }]
+        }], ctorParameters: () => [{ type: OnboardingService }], propDecorators: { cardRef: [{
+                type: ViewChild,
+                args: ['cardEl']
+            }], onViewportChange: [{
+                type: HostListener,
+                args: ['window:resize']
+            }, {
+                type: HostListener,
+                args: ['window:scroll']
+            }] } });
+
+const LIGHT_FALLBACK = {
+    background: '#f3f4f6',
+    icon: '#2f6fdb',
+    badge: '#ffffff',
+    badgeBorder: '#d5d9e0',
+    label: '#1e2329',
+    font: 'sans-serif',
+};
+function readNewsPalette(doc) {
+    const style = doc.body ? doc.defaultView?.getComputedStyle(doc.body) : undefined;
+    const pick = (prop, fallback) => (style?.getPropertyValue(prop) ?? '').trim() || fallback;
+    return {
+        background: pick('--hm-surface-raised', LIGHT_FALLBACK.background),
+        icon: pick('--hm-accent', LIGHT_FALLBACK.icon),
+        badge: pick('--hm-surface', LIGHT_FALLBACK.badge),
+        badgeBorder: pick('--hm-divider', LIGHT_FALLBACK.badgeBorder),
+        label: pick('--hm-text', LIGHT_FALLBACK.label),
+        font: (style?.fontFamily ?? '').trim() || LIGHT_FALLBACK.font,
+    };
+}
+const XML_ENTITIES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&apos;' };
+function xml(value) {
+    return value.replace(/[&<>"']/g, (ch) => XML_ENTITIES[ch]);
+}
+const WIDTH = 640;
+const HEIGHT = 360;
+const CX = WIDTH / 2;
+const CY = 168;
+/** Places a catalog icon (24-unit grid, stroked with currentColor) as a nested, tinted <svg>. */
+function icon(shape, x, y, size, color) {
+    return renderIconSvg(shape).replace(/^<svg\b/, `<svg x="${x}" y="${y}" width="${size}" height="${size}" color="${xml(color)}"`);
+}
+/** Four-point twinkle, the "something new" cue drawn around the hero icon. */
+function sparkle(x, y, r, color, opacity) {
+    const k = r * 0.28;
+    const d = `M${x} ${y - r}Q${x + k} ${y - k} ${x + r} ${y}Q${x + k} ${y + k} ${x} ${y + r}Q${x - k} ${y + k} ${x - r} ${y}Q${x - k} ${y - k} ${x} ${y - r}Z`;
+    return `<path d="${d}" fill="${xml(color)}" opacity="${opacity}"/>`;
+}
+function round(n) {
+    return Math.round(n * 10) / 10;
+}
+function buildNewsIllustration(illustration, palette) {
+    const satellites = illustration.satellites ?? [];
+    const orbiting = satellites.length > 0;
+    const c = {
+        bg: xml(palette.background),
+        accent: xml(palette.icon),
+        badge: xml(palette.badge),
+        border: xml(palette.badgeBorder),
+        label: xml(palette.label),
+    };
+    const heroRadius = orbiting ? 58 : 92;
+    const heroIcon = orbiting ? 64 : 104;
+    const parts = [`<rect width="${WIDTH}" height="${HEIGHT}" rx="28" fill="${c.bg}"/>`];
+    if (orbiting) {
+        parts.push(`<ellipse cx="${CX}" cy="${CY}" rx="214" ry="104" fill="none" stroke="${c.accent}" stroke-opacity=".22" stroke-width="2" stroke-dasharray="2 10" stroke-linecap="round"/>`);
+    }
+    else {
+        parts.push(`<circle cx="${CX}" cy="${CY + 8}" r="${heroRadius + 34}" fill="${c.accent}" opacity=".07"/>`);
+    }
+    parts.push(`<circle cx="${CX}" cy="${CY}" r="${heroRadius}" fill="${c.badge}" stroke="${c.border}" stroke-width="2"/>`, `<circle cx="${CX}" cy="${CY}" r="${heroRadius - 10}" fill="${c.accent}" opacity=".1"/>`, icon(illustration.icon, CX - heroIcon / 2, CY - heroIcon / 2, heroIcon, palette.icon), sparkle(CX + heroRadius + 14, CY - heroRadius + 4, 13, palette.icon, 0.85), sparkle(CX - heroRadius - 8, CY + heroRadius - 18, 8, palette.icon, 0.5));
+    satellites.forEach((sat, i) => {
+        // Start at the top-left so a lone satellite never sits on the hero's sparkle.
+        const angle = -Math.PI * 0.75 + (i * 2 * Math.PI) / satellites.length;
+        const x = round(CX + 214 * Math.cos(angle));
+        const y = round(CY + 104 * Math.sin(angle));
+        parts.push(`<g transform="translate(${x} ${y})"><g class="sat" style="animation-delay:${-(i * 1.3).toFixed(1)}s">`, `<circle r="28" fill="${c.badge}" stroke="${c.border}" stroke-width="2"/>`, icon(sat.icon, -14, -14, 28, palette.icon), `<text y="48" text-anchor="middle" font-size="15" fill="${c.label}">${xml(sat.label)}</text>`, `</g></g>`);
+    });
+    const style = orbiting
+        ? '<style>.sat{animation:drift 5.6s ease-in-out infinite alternate}' +
+            '@keyframes drift{from{transform:translateY(-5px)}to{transform:translateY(5px)}}' +
+            '@media (prefers-reduced-motion:reduce){.sat{animation:none}}</style>'
+        : '';
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${WIDTH} ${HEIGHT}" width="${WIDTH}" height="${HEIGHT}" ` +
+        `font-family="${xml(palette.font)}">${style}${parts.join('')}</svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+
+/**
+ * Painel de novidades: um diálogo com carrossel — "olha o que mudou", não tutorial (esse é o tour
+ * de boas-vindas). Montado uma vez no layout; quem decide quando abre é o `SpineNewsService`.
+ */
+class SpineNewsComponent {
+    constructor() {
+        this.news = inject(SpineNewsService);
+        this.text = inject(SPINE_MESSAGES).news;
+        this.document = inject(DOCUMENT);
+        /** O hm-carousel pede `image`/`alt` sempre presentes (vazios = sem imagem / decorativa). A
+         * ilustração é desenhada na hora de abrir, com as cores do tema daquele momento. */
+        this.slides = computed(() => {
+            if (!this.news.isOpen())
+                return [];
+            const palette = readNewsPalette(this.document);
+            return this.news.slides().map((s) => ({
+                title: s.title,
+                text: s.text,
+                image: s.image ?? (s.illustration ? buildNewsIllustration(s.illustration, palette) : ''),
+                // Ilustração é decorativa: o título e o texto do slide já dizem tudo.
+                alt: s.image ? (s.alt ?? '') : '',
+            }));
+        }, ...(ngDevMode ? [{ debugName: "slides" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineNewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpineNewsComponent, isStandalone: true, selector: "spine-news", ngImport: i0, template: `
+    @if (news.isOpen()) {
+      <hm-modal [heading]="text.heading" size="medium" [open]="true" (closed)="news.close()">
+        <hm-carousel [label]="text.carousel" [slides]="slides()" />
+        <ng-container footer>
+          <hm-button (clicked)="news.close()">{{ text.dismiss }}</hm-button>
+        </ng-container>
+      </hm-modal>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: CarouselComponent, selector: "hm-carousel", inputs: ["label", "slides", "interval"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineNewsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spine-news',
+                    imports: [ModalComponent, CarouselComponent, ButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (news.isOpen()) {
+      <hm-modal [heading]="text.heading" size="medium" [open]="true" (closed)="news.close()">
+        <hm-carousel [label]="text.carousel" [slides]="slides()" />
+        <ng-container footer>
+          <hm-button (clicked)="news.close()">{{ text.dismiss }}</hm-button>
+        </ng-container>
+      </hm-modal>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * Painel de atalhos (cheatsheet). Abre com "?" (via `ShortcutService.help$`) e lista, com o
+ * `hm-shortcut-list` da lib, os atalhos agrupados — com busca e o interruptor dos atalhos de tecla
+ * única (WCAG 2.1.4; a escolha persiste no `SpinePreferencesService`). Também é o último passo do
+ * onboarding.
+ */
+class ShortcutsCheatsheetComponent {
+    constructor() {
+        this.open = false;
+        this.text = inject(SPINE_MESSAGES).shortcuts;
+        this.shortcuts = inject(ShortcutService);
+        this.onboarding = inject(OnboardingService);
+        /** Atalhos do painel: registrados (favoritos numa linha só) + os que outra peça dispara. */
+        this.items = this.shortcuts.panelItems;
+        /** Atalhos de tecla única ligados — sem eles o "?" da dica não funciona. */
+        this.characterKeys = inject(HermesShortcutService).characterKeys;
+    }
+    /** Dica com a tecla no meio: o texto do catálogo partido em volta de `{key}`. */
+    get hintParts() {
+        return this.text.hint.split('{key}');
+    }
+    /** @deprecated O painel agora é o `hm-shortcut-list`; use `ShortcutService.panelItems()`. Sai numa próxima versão. */
+    get groups() {
+        return this.shortcuts.groups();
+    }
+    /** @deprecated As teclas são desenhadas pelo `hm-shortcut-list`. Sai numa próxima versão. */
+    chips(keys) {
+        return keys.split('+').map((k) => k.trim()).filter(Boolean);
+    }
+    /** Reabre o tour de onboarding e fecha este painel. */
+    replayTour() {
+        this.open = false;
+        this.onboarding.restart();
+    }
+    ngOnInit() {
+        this.sub = this.shortcuts.help$.subscribe(() => (this.open = !this.open));
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ShortcutsCheatsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ShortcutsCheatsheetComponent, isStandalone: true, selector: "spine-shortcuts-cheatsheet", ngImport: i0, template: "<hm-modal [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"text.heading\" size=\"large\">\n  <!-- Com a tecla \u00FAnica desligada (WCAG 2.1.4) o \"?\" n\u00E3o abre o painel: a dica some junto. -->\n  @if (characterKeys()) {\n    <p class=\"sc-hint\">\n      {{ hintParts[0] }}<kbd class=\"sc-chip\">?</kbd>{{ hintParts[1] }}\n    </p>\n  }\n\n  <hm-shortcut-list searchable characterKeysToggle [registered]=\"false\" [items]=\"items()\" />\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" icon=\"play\" (clicked)=\"replayTour()\">{{ text.replayTour }}</hm-button>\n    <hm-button (clicked)=\"open = false\">{{ text.dismiss }}</hm-button>\n  </ng-container>\n</hm-modal>\n", styles: ["@charset \"UTF-8\";.sc-hint{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);margin:0 0 var(--hm-space-md);padding:var(--hm-space-xxxs) var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.sc-chip{display:inline-flex;align-items:center;justify-content:center;min-inline-size:1.75rem;padding:0 var(--hm-space-micro);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-micro);background:var(--hm-surface-raised);color:var(--hm-text);font-family:var(--hm-font-family);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-normal)}@media(forced-colors:active){.sc-chip{border-color:ButtonBorder;background:ButtonFace;color:ButtonText}}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: ShortcutListComponent, selector: "hm-shortcut-list", inputs: ["items", "registered", "searchable", "characterKeysToggle", "headingLevel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ShortcutsCheatsheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-shortcuts-cheatsheet', imports: [ModalComponent, ButtonComponent, ShortcutListComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-modal [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"text.heading\" size=\"large\">\n  <!-- Com a tecla \u00FAnica desligada (WCAG 2.1.4) o \"?\" n\u00E3o abre o painel: a dica some junto. -->\n  @if (characterKeys()) {\n    <p class=\"sc-hint\">\n      {{ hintParts[0] }}<kbd class=\"sc-chip\">?</kbd>{{ hintParts[1] }}\n    </p>\n  }\n\n  <hm-shortcut-list searchable characterKeysToggle [registered]=\"false\" [items]=\"items()\" />\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" icon=\"play\" (clicked)=\"replayTour()\">{{ text.replayTour }}</hm-button>\n    <hm-button (clicked)=\"open = false\">{{ text.dismiss }}</hm-button>\n  </ng-container>\n</hm-modal>\n", styles: ["@charset \"UTF-8\";.sc-hint{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);margin:0 0 var(--hm-space-md);padding:var(--hm-space-xxxs) var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-hover);color:var(--hm-text);font-size:var(--hm-font-size-xs)}.sc-chip{display:inline-flex;align-items:center;justify-content:center;min-inline-size:1.75rem;padding:0 var(--hm-space-micro);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-micro);background:var(--hm-surface-raised);color:var(--hm-text);font-family:var(--hm-font-family);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-normal)}@media(forced-colors:active){.sc-chip{border-color:ButtonBorder;background:ButtonFace;color:ButtonText}}\n"] }]
+        }] });
+
+/**
+ * Tokens de aplicação pessoais (`x-app-token`) do usuário logado — `argos-admin /me/app-tokens`.
+ * Sempre da aplicação LOGADA: o servidor tira o client do próprio access-token da sessão, então
+ * aqui não existe escolha de aplicação.
+ * Autentica com o access-token da sessão (o servidor recusa um app-token aqui: token não cria
+ * token). `available` é falso quando o app não tem a URL do argos-admin (`SPINE_ADMIN_API`).
+ */
+class SpineAppTokensService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.auth = inject(AuthorizationService);
+        this.adminApi = inject(SPINE_ADMIN_API, { optional: true });
+        this.available = !!this.adminApi;
+    }
+    get baseUrl() {
+        return `${this.adminApi}/me/app-tokens`;
+    }
+    get headers() {
+        return new HttpHeaders({ 'x-access-token': this.auth.getToken() ?? '' });
+    }
+    list() {
+        return firstValueFrom(this.http.get(this.baseUrl, { headers: this.headers }));
+    }
+    options() {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/options`, { headers: this.headers }));
+    }
+    create(body) {
+        return firstValueFrom(this.http.post(this.baseUrl, body, { headers: this.headers }));
+    }
+    revoke(id) {
+        return firstValueFrom(this.http.delete(`${this.baseUrl}/${id}`, { headers: this.headers }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAppTokensService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAppTokensService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineAppTokensService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Validades oferecidas (dias). O servidor recusa acima de 365 — o CHECK no banco também. */
+/**
+ * Tokens de aplicação do usuário (seção Conta do painel de configurações): lista, criação e
+ * revogação. O valor do token só aparece uma vez, logo depois de criado, e some quando o painel
+ * fecha (o componente vive dentro do `@if` do painel).
+ */
+class AppTokensComponent {
+    constructor() {
+        this.text = inject(SPINE_MESSAGES).appTokens;
+        this.fmt = formatMessage;
+        this.locale = inject(SPINE_MESSAGES);
+        this.service = inject(SpineAppTokensService);
+        this.toast = inject(HermesToastService);
+        this.preferences = inject(SpinePreferencesService);
+        this.available = this.service.available;
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loadError = signal('', ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+        this.tokens = signal([], ...(ngDevMode ? [{ debugName: "tokens" }] : /* istanbul ignore next */ []));
+        this.maxActive = signal(10, ...(ngDevMode ? [{ debugName: "maxActive" }] : /* istanbul ignore next */ []));
+        this.validCount = computed(() => this.tokens().filter((t) => !t.expired).length, ...(ngDevMode ? [{ debugName: "validCount" }] : /* istanbul ignore next */ []));
+        this.atLimit = computed(() => this.validCount() >= this.maxActive(), ...(ngDevMode ? [{ debugName: "atLimit" }] : /* istanbul ignore next */ []));
+        // ── criação ─────────────────────────────────────────────────────────────────
+        this.creating = signal(false, ...(ngDevMode ? [{ debugName: "creating" }] : /* istanbul ignore next */ []));
+        this.submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
+        /** Nome da aplicação logada (a única para a qual dá pra criar token aqui). */
+        this.clientName = signal('', ...(ngDevMode ? [{ debugName: "clientName" }] : /* istanbul ignore next */ []));
+        this.badges = signal([], ...(ngDevMode ? [{ debugName: "badges" }] : /* istanbul ignore next */ []));
+        this.badgeId = signal('', ...(ngDevMode ? [{ debugName: "badgeId" }] : /* istanbul ignore next */ []));
+        this.validity = signal('90', ...(ngDevMode ? [{ debugName: "validity" }] : /* istanbul ignore next */ []));
+        this.nameControl = new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.maxLength(80)] });
+        this.validityOptions = computed(() => [
+            { value: '30', label: this.text.days30 },
+            { value: '90', label: this.text.days90 },
+            { value: '180', label: this.text.months6 },
+            { value: '365', label: this.text.year1 },
+        ], ...(ngDevMode ? [{ debugName: "validityOptions" }] : /* istanbul ignore next */ []));
+        this.badgeOptions = computed(() => this.badges().map((b) => ({ value: b.id, label: b.name })), ...(ngDevMode ? [{ debugName: "badgeOptions" }] : /* istanbul ignore next */ []));
+        /** Token recém-criado, mostrado uma única vez. */
+        this.created = signal(null, ...(ngDevMode ? [{ debugName: "created" }] : /* istanbul ignore next */ []));
+        /** Token com a revogação aguardando confirmação (segundo clique). */
+        this.confirmingRevoke = signal(null, ...(ngDevMode ? [{ debugName: "confirmingRevoke" }] : /* istanbul ignore next */ []));
+        this.canSubmit = computed(() => !!this.badgeId() && !this.submitting(), ...(ngDevMode ? [{ debugName: "canSubmit" }] : /* istanbul ignore next */ []));
+        if (this.available)
+            void this.load();
+        else
+            this.loading.set(false);
+    }
+    async load() {
+        this.loading.set(true);
+        this.loadError.set('');
+        try {
+            const list = await this.service.list();
+            this.tokens.set(list.tokens);
+            this.maxActive.set(list.max_active);
+        }
+        catch (err) {
+            this.loadError.set(this.errorText(err, this.text.loadError));
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    async startCreate() {
+        this.created.set(null);
+        this.nameControl.reset('');
+        this.validity.set('90');
+        this.creating.set(true);
+        try {
+            const { client, badges } = await this.service.options();
+            this.clientName.set(client.name ?? '');
+            this.badges.set(badges);
+            // Um nível só: já vem escolhido. Vários: o de maior nível vem primeiro (ordem do servidor).
+            this.badgeId.set(badges[0]?.id ?? '');
+        }
+        catch (err) {
+            this.toast.error(this.errorText(err, this.text.badgesError));
+            this.creating.set(false);
+        }
+    }
+    cancelCreate() {
+        this.creating.set(false);
+    }
+    async submit() {
+        this.nameControl.markAsTouched();
+        if (!this.canSubmit() || this.nameControl.invalid)
+            return;
+        this.submitting.set(true);
+        try {
+            const name = this.nameControl.value.trim();
+            const result = await this.service.create({
+                badge_id: this.badgeId(),
+                name,
+                validity_days: Number(this.validity()),
+            });
+            this.created.set({ name, token: result.token, expiresAt: result.expires_at });
+            this.creating.set(false);
+            await this.load();
+        }
+        catch (err) {
+            this.toast.error(this.errorText(err, this.text.createError));
+        }
+        finally {
+            this.submitting.set(false);
+        }
+    }
+    async copyCreated() {
+        const token = this.created()?.token;
+        if (!token)
+            return;
+        try {
+            await navigator.clipboard.writeText(token);
+            this.toast.success(this.text.copied);
+        }
+        catch {
+            this.toast.error(this.text.copyFailed);
+        }
+    }
+    dismissCreated() {
+        this.created.set(null);
+    }
+    async revoke(token) {
+        if (this.confirmingRevoke() !== token.id) {
+            this.confirmingRevoke.set(token.id);
+            return;
+        }
+        this.confirmingRevoke.set(null);
+        try {
+            await this.service.revoke(token.id);
+            this.tokens.update((list) => list.filter((t) => t.id !== token.id));
+            this.toast.success(formatMessage(this.text.revoked, { name: token.name }));
+        }
+        catch (err) {
+            this.toast.error(this.errorText(err, this.text.revokeError));
+        }
+    }
+    formatDate(value) {
+        if (!value)
+            return this.text.never;
+        return new Intl.DateTimeFormat(this.locale.meta.locale, { dateStyle: 'short', timeStyle: 'short', timeZone: this.preferences.effectiveTimeZone() })
+            .format(new Date(value));
+    }
+    errorText(err, fallback) {
+        const detail = err instanceof HttpErrorResponse ? err.error?.detail : undefined;
+        return detail || fallback;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AppTokensComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AppTokensComponent, isStandalone: true, selector: "spine-app-tokens", ngImport: i0, template: "@if (!available) {\n  <p class=\"sp-tokens__note\">{{ text.unavailable }}</p>\n} @else {\n  <!-- Token rec\u00E9m-criado: \u00FAnica vez em que o valor aparece. -->\n  @if (created(); as c) {\n    <div class=\"sp-tokens__created\" role=\"status\">\n      <p class=\"sp-tokens__created-title\">\n        <hm-icon shape=\"check-circle\" /> {{ fmt(text.created, { name: c.name }) }}\n      </p>\n      <code class=\"sp-tokens__secret\">{{ c.token }}</code>\n      <p class=\"sp-tokens__note\" [innerHTML]=\"fmt(text.sendHeader, { date: formatDate(c.expiresAt) })\"></p>\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"high\" icon=\"copy\" (clicked)=\"copyCreated()\">{{ text.copyToken }}</hm-button>\n        <hm-button emphasis=\"minimal\" (clicked)=\"dismissCreated()\">{{ text.saved }}</hm-button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <p class=\"sp-tokens__note\">{{ text.loading }}</p>\n  } @else if (loadError()) {\n    <p class=\"sp-tokens__note sp-tokens__note--error\">{{ loadError() }}</p>\n  } @else {\n    @if (tokens().length) {\n      <ul class=\"sp-tokens__list\">\n        @for (t of tokens(); track t.id) {\n          <li class=\"sp-tokens__item\" [class.sp-tokens__item--expired]=\"t.expired\">\n            <span class=\"sp-tokens__item-main\">\n              <strong>{{ t.name }}</strong>\n              <span class=\"sp-tokens__meta\">{{ t.badge_name }} \u00B7 <code>{{ t.prefix }}</code></span>\n              <span class=\"sp-tokens__meta\">\n                @if (t.expired) { <span class=\"sp-tokens__expired\">{{ fmt(text.expiredOn, { date: formatDate(t.expires_at) }) }}</span> }\n                @else { {{ fmt(text.expiresOn, { date: formatDate(t.expires_at) }) }} }\n                \u00B7 {{ fmt(text.lastUsed, { date: formatDate(t.last_used_at) }) }}\n              </span>\n            </span>\n            <hm-button emphasis=\"minimal\" intent=\"danger\" (clicked)=\"revoke(t)\">\n              {{ confirmingRevoke() === t.id ? text.confirmRevoke : text.revoke }}\n            </hm-button>\n          </li>\n        }\n      </ul>\n    } @else if (!creating()) {\n      <p class=\"sp-tokens__note\">{{ text.empty }}</p>\n    }\n\n    @if (creating()) {\n      <form class=\"sp-tokens__form\" (submit)=\"$event.preventDefault(); submit()\">\n        @if (!badges().length) {\n          <p class=\"sp-tokens__note\">{{ text.noBadges }}</p>\n        } @else {\n          @if (clientName()) {\n            <p class=\"sp-tokens__note\" [innerHTML]=\"fmt(text.appOnly, { name: clientName() })\"></p>\n          }\n          @if (badgeOptions().length > 1) {\n            <div class=\"sp-tokens__field\">\n              <span class=\"sp-tokens__label\">{{ text.accessLevel }}</span>\n              <hm-segmented-control emphasis=\"action\" [label]=\"text.accessLevel\" [options]=\"badgeOptions()\" [value]=\"badgeId()\" (valueChange)=\"badgeId.set($event)\" />\n            </div>\n          }\n          <hm-input [label]=\"text.name\" [placeholder]=\"text.namePlaceholder\" [formControl]=\"nameControl\" [messages]=\"{ required: text.nameRequired, maxlength: text.nameMax }\" />\n          <div class=\"sp-tokens__field\">\n            <span class=\"sp-tokens__label\">{{ text.validity }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"text.validity\" [options]=\"validityOptions()\" [value]=\"validity()\" (valueChange)=\"validity.set($event)\" />\n          </div>\n        }\n        <div class=\"sp-tokens__actions\">\n          @if (badges().length) {\n            <hm-button type=\"submit\" emphasis=\"high\" icon=\"key\" [disabled]=\"!canSubmit()\" [loading]=\"submitting()\">{{ text.create }}</hm-button>\n          }\n          <hm-button emphasis=\"minimal\" (clicked)=\"cancelCreate()\">{{ text.cancel }}</hm-button>\n        </div>\n      </form>\n    } @else {\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"medium\" icon=\"plus\" [disabled]=\"atLimit()\" (clicked)=\"startCreate()\">{{ text.newToken }}</hm-button>\n        <span class=\"sp-tokens__note\">{{ fmt(text.validCount, { valid: validCount(), max: maxActive() }) }}</span>\n      </div>\n      @if (atLimit()) {\n        <p class=\"sp-tokens__note\">{{ text.limit }}</p>\n      }\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%}.sp-tokens__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__note--error{color:var(--hm-danger)}.sp-tokens__note code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-tokens__item{display:flex;align-items:center;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-tokens__item+.sp-tokens__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-tokens__item--expired .sp-tokens__item-main strong{color:var(--hm-muted)}.sp-tokens__item-main{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm)}.sp-tokens__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__meta code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__expired{color:var(--hm-danger)}.sp-tokens__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-tokens__form{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-tokens__field{display:flex;flex-direction:column;gap:var(--hm-space-micro)}.sp-tokens__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-success);border-radius:var(--hm-radius-control);background:var(--hm-success-bg)}.sp-tokens__created-title{display:flex;align-items:center;gap:var(--hm-space-nano);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created-title hm-icon{color:var(--hm-success)}.sp-tokens__secret{display:block;padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-family:Geist Mono,ui-monospace,monospace;font-size:var(--hm-font-size-xs);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: InputComponent, selector: "hm-input", inputs: ["value", "label", "type", "placeholder", "icon", "labelHidden", "hint", "prefix", "suffix", "prefixIcon", "mask", "maskValue", "min", "max", "step", "stepButtons", "maxLength", "autocomplete", "inputMode"], outputs: ["valueChange"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AppTokensComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-app-tokens', imports: [ReactiveFormsModule, ButtonComponent, InputComponent, IconComponent, SegmentedControlComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!available) {\n  <p class=\"sp-tokens__note\">{{ text.unavailable }}</p>\n} @else {\n  <!-- Token rec\u00E9m-criado: \u00FAnica vez em que o valor aparece. -->\n  @if (created(); as c) {\n    <div class=\"sp-tokens__created\" role=\"status\">\n      <p class=\"sp-tokens__created-title\">\n        <hm-icon shape=\"check-circle\" /> {{ fmt(text.created, { name: c.name }) }}\n      </p>\n      <code class=\"sp-tokens__secret\">{{ c.token }}</code>\n      <p class=\"sp-tokens__note\" [innerHTML]=\"fmt(text.sendHeader, { date: formatDate(c.expiresAt) })\"></p>\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"high\" icon=\"copy\" (clicked)=\"copyCreated()\">{{ text.copyToken }}</hm-button>\n        <hm-button emphasis=\"minimal\" (clicked)=\"dismissCreated()\">{{ text.saved }}</hm-button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <p class=\"sp-tokens__note\">{{ text.loading }}</p>\n  } @else if (loadError()) {\n    <p class=\"sp-tokens__note sp-tokens__note--error\">{{ loadError() }}</p>\n  } @else {\n    @if (tokens().length) {\n      <ul class=\"sp-tokens__list\">\n        @for (t of tokens(); track t.id) {\n          <li class=\"sp-tokens__item\" [class.sp-tokens__item--expired]=\"t.expired\">\n            <span class=\"sp-tokens__item-main\">\n              <strong>{{ t.name }}</strong>\n              <span class=\"sp-tokens__meta\">{{ t.badge_name }} \u00B7 <code>{{ t.prefix }}</code></span>\n              <span class=\"sp-tokens__meta\">\n                @if (t.expired) { <span class=\"sp-tokens__expired\">{{ fmt(text.expiredOn, { date: formatDate(t.expires_at) }) }}</span> }\n                @else { {{ fmt(text.expiresOn, { date: formatDate(t.expires_at) }) }} }\n                \u00B7 {{ fmt(text.lastUsed, { date: formatDate(t.last_used_at) }) }}\n              </span>\n            </span>\n            <hm-button emphasis=\"minimal\" intent=\"danger\" (clicked)=\"revoke(t)\">\n              {{ confirmingRevoke() === t.id ? text.confirmRevoke : text.revoke }}\n            </hm-button>\n          </li>\n        }\n      </ul>\n    } @else if (!creating()) {\n      <p class=\"sp-tokens__note\">{{ text.empty }}</p>\n    }\n\n    @if (creating()) {\n      <form class=\"sp-tokens__form\" (submit)=\"$event.preventDefault(); submit()\">\n        @if (!badges().length) {\n          <p class=\"sp-tokens__note\">{{ text.noBadges }}</p>\n        } @else {\n          @if (clientName()) {\n            <p class=\"sp-tokens__note\" [innerHTML]=\"fmt(text.appOnly, { name: clientName() })\"></p>\n          }\n          @if (badgeOptions().length > 1) {\n            <div class=\"sp-tokens__field\">\n              <span class=\"sp-tokens__label\">{{ text.accessLevel }}</span>\n              <hm-segmented-control emphasis=\"action\" [label]=\"text.accessLevel\" [options]=\"badgeOptions()\" [value]=\"badgeId()\" (valueChange)=\"badgeId.set($event)\" />\n            </div>\n          }\n          <hm-input [label]=\"text.name\" [placeholder]=\"text.namePlaceholder\" [formControl]=\"nameControl\" [messages]=\"{ required: text.nameRequired, maxlength: text.nameMax }\" />\n          <div class=\"sp-tokens__field\">\n            <span class=\"sp-tokens__label\">{{ text.validity }}</span>\n            <hm-segmented-control emphasis=\"action\" [label]=\"text.validity\" [options]=\"validityOptions()\" [value]=\"validity()\" (valueChange)=\"validity.set($event)\" />\n          </div>\n        }\n        <div class=\"sp-tokens__actions\">\n          @if (badges().length) {\n            <hm-button type=\"submit\" emphasis=\"high\" icon=\"key\" [disabled]=\"!canSubmit()\" [loading]=\"submitting()\">{{ text.create }}</hm-button>\n          }\n          <hm-button emphasis=\"minimal\" (clicked)=\"cancelCreate()\">{{ text.cancel }}</hm-button>\n        </div>\n      </form>\n    } @else {\n      <div class=\"sp-tokens__actions\">\n        <hm-button emphasis=\"medium\" icon=\"plus\" [disabled]=\"atLimit()\" (clicked)=\"startCreate()\">{{ text.newToken }}</hm-button>\n        <span class=\"sp-tokens__note\">{{ fmt(text.validCount, { valid: validCount(), max: maxActive() }) }}</span>\n      </div>\n      @if (atLimit()) {\n        <p class=\"sp-tokens__note\">{{ text.limit }}</p>\n      }\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);width:100%}.sp-tokens__note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__note--error{color:var(--hm-danger)}.sp-tokens__note code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control)}.sp-tokens__item{display:flex;align-items:center;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) var(--hm-space-xs)}.sp-tokens__item+.sp-tokens__item{border-top:var(--hm-border-hairline) solid var(--hm-divider)}.sp-tokens__item--expired .sp-tokens__item-main strong{color:var(--hm-muted)}.sp-tokens__item-main{display:flex;min-width:0;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text);font-size:var(--hm-font-size-sm)}.sp-tokens__meta{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-tokens__meta code{font-family:Geist Mono,ui-monospace,monospace}.sp-tokens__expired{color:var(--hm-danger)}.sp-tokens__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.sp-tokens__form{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.sp-tokens__field{display:flex;flex-direction:column;gap:var(--hm-space-micro)}.sp-tokens__label{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);padding:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-success);border-radius:var(--hm-radius-control);background:var(--hm-success-bg)}.sp-tokens__created-title{display:flex;align-items:center;gap:var(--hm-space-nano);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:600}.sp-tokens__created-title hm-icon{color:var(--hm-success)}.sp-tokens__secret{display:block;padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-surface);color:var(--hm-text);font-family:Geist Mono,ui-monospace,monospace;font-size:var(--hm-font-size-xs);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}\n"] }]
+        }], ctorParameters: () => [] });
+
+/** Dependências que valem mostrar em "Sobre" (as demais são detalhe de build). */
+// check-strings: off — nomes de produto, não se traduzem.
+const KEY_DEPENDENCIES = [
+    { name: '@angular/core', label: 'Angular' },
+    { name: '@trismegisto/angular', label: 'Hermes DS' },
+    { name: '@trismegisto/spine', label: 'Hermes Spine' },
+    { name: '@orfeu/angular', label: 'Orfeu' },
+    { name: 'apollo-angular', label: 'Apollo' },
+    { name: 'graphql', label: 'GraphQL' },
+    { name: 'rxjs', label: 'RxJS' },
+    // check-strings: on
+];
+/**
+ * Painel de configurações do shell (substitui as telas do antigo módulo "Sistema"): Aparência,
+ * Região, Atalhos, Conta e Sobre, mais as seções que o app registrar com
+ * `provideSettingsSection`. Tudo vale na hora — cada controle chama o serviço que já persiste
+ * aquela preferência (tema, densidade, menu lateral, fuso).
+ *
+ * Aberto por `SpineSettingsService.open()` — menu do perfil, `Ctrl+,` ou `?settings=<seção>`.
+ */
+class SettingsPanelComponent {
+    constructor() {
+        this.settings = inject(SpineSettingsService);
+        this.messages = inject(SPINE_MESSAGES);
+        this.text = this.messages.settings;
+        this.fmt = formatMessage;
+        this.keys = SPINE_SETTINGS_KEYS;
+        this.theme = inject(ThemeService);
+        this.hermesTheme = inject(HermesThemeService);
+        this.presets = inject(ThemePresetService);
+        this.density = inject(DensityService);
+        this.sidebar = inject(HermesSidebarService);
+        this.preferences = inject(SpinePreferencesService);
+        this.shortcutService = inject(ShortcutService);
+        this.onboarding = inject(OnboardingService);
+        this.auth = inject(AuthorizationService);
+        this.toast = inject(HermesToastService);
+        this.packageInfo = inject(APP_PACKAGE_INFO, { optional: true }) ?? {};
+        this.config = inject(SPINE_CONFIG, { optional: true });
+        this.appSections = inject(SPINE_SETTINGS_SECTIONS, { optional: true }) ?? [];
+        this.appName = this.config?.appName ?? 'Hermes';
+        // ── Aparência ───────────────────────────────────────────────────────────────
+        this.themeOptions = computed(() => [
+            { value: 'light', label: this.text.themeLight, icon: 'sun' },
+            { value: 'dark', label: this.text.themeDark, icon: 'moon' },
+            { value: 'system', label: this.text.themeSystem, icon: 'computer' },
+        ], ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
+        this.densityOptions = computed(() => [
+            { value: 'comfortable', label: this.text.comfortable },
+            { value: 'compact', label: this.text.compact },
+        ], ...(ngDevMode ? [{ debugName: "densityOptions" }] : /* istanbul ignore next */ []));
+        // As fontes do config (as da lib, ou as do app via `provideUi({ theme: { fonts, replaceFonts } })`).
+        this.fontOptions = (this.hermesTheme.fonts ?? HERMES_FONTS).map((f) => ({ value: f.id, label: f.label }));
+        this.sidebarOptions = computed(() => [
+            { value: 'auto', label: this.text.sidebarAuto },
+            { value: 'fixed', label: this.text.sidebarFixed },
+            { value: 'compact', label: this.text.sidebarCompact },
+        ], ...(ngDevMode ? [{ debugName: "sidebarOptions" }] : /* istanbul ignore next */ []));
+        this.themeMode = computed(() => this.hermesTheme.mode(), ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
+        this.appliedTheme = computed(() => this.hermesTheme.theme(), ...(ngDevMode ? [{ debugName: "appliedTheme" }] : /* istanbul ignore next */ []));
+        this.family = computed(() => this.hermesTheme.family(), ...(ngDevMode ? [{ debugName: "family" }] : /* istanbul ignore next */ []));
+        this.densityValue = computed(() => this.hermesTheme.density(), ...(ngDevMode ? [{ debugName: "densityValue" }] : /* istanbul ignore next */ []));
+        this.fontValue = computed(() => this.hermesTheme.font(), ...(ngDevMode ? [{ debugName: "fontValue" }] : /* istanbul ignore next */ []));
+        this.families = this.presets.families;
+        // ── Região ──────────────────────────────────────────────────────────────────
+        this.languageOptions = computed(() => {
+            const appLanguage = this.preferences.languages.find((l) => l.value === this.preferences.appLanguage)?.label ?? this.preferences.appLanguage;
+            return [
+                { value: '', label: formatMessage(this.text.languageAuto, { language: appLanguage }) },
+                ...this.preferences.languages,
+            ];
+        }, ...(ngDevMode ? [{ debugName: "languageOptions" }] : /* istanbul ignore next */ []));
+        /** ~400 fusos, cada um com o deslocamento calculado: só monta quando o painel abre pela
+         *  primeira vez, não no carregamento de toda página (o painel vive no layout desde o início). */
+        this.timeZoneCache = null;
+        this.timeZoneOptions = computed(() => [
+            { value: '', label: formatMessage(this.text.timeZoneAuto, { zone: this.preferences.browserTimeZone }) },
+            ...(this.timeZoneCache ??= this.preferences
+                .supportedTimeZones()
+                .map((tz) => ({ value: tz, label: `${tz.replace(/_/g, ' ')} (${offsetOf(tz)})` }))),
+        ], ...(ngDevMode ? [{ debugName: "timeZoneOptions" }] : /* istanbul ignore next */ []));
+        /** Hora agora no fuso efetivo — prévia de como as datas vão aparecer. */
+        this.timeZonePreview = computed(() => {
+            const zone = this.preferences.effectiveTimeZone();
+            try {
+                return new Intl.DateTimeFormat(this.messages.meta.locale, { dateStyle: 'short', timeStyle: 'short', timeZone: zone }).format(new Date())
+                    + ` (${offsetOf(zone)})`;
+            }
+            catch {
+                return zone;
+            }
+        }, ...(ngDevMode ? [{ debugName: "timeZonePreview" }] : /* istanbul ignore next */ []));
+        // ── Atalhos ─────────────────────────────────────────────────────────────────
+        /** Atalhos registrados (favoritos numa linha só) + os que outra peça dispara — os mesmos do painel "?". */
+        this.shortcutItems = this.shortcutService.panelItems;
+        // ── Sobre ───────────────────────────────────────────────────────────────────
+        this.dependencies = KEY_DEPENDENCIES
+            .map((d) => ({ ...d, version: this.packageInfo.dependencies?.[d.name] }))
+            .filter((d) => !!d.version);
+    }
+    setThemeMode(mode) {
+        this.theme.setMode(mode);
+    }
+    setFamily(id) {
+        const family = this.families.find((f) => f.id === id);
+        if (family)
+            this.presets.setPreset(family);
+    }
+    setDensity(value) {
+        this.density.setDensity(value);
+    }
+    setFont(value) {
+        this.hermesTheme.setFont(value);
+    }
+    setSidebarMode(value) {
+        this.sidebar.setMode(value);
+    }
+    replayTour() {
+        this.settings.close();
+        this.onboarding.restart();
+    }
+    // ── Conta ───────────────────────────────────────────────────────────────────
+    get profile() { return this.auth.profile; }
+    get badge() { return this.auth.badge; }
+    /** Validade da sessão lida do `exp` do próprio token (só leitura do payload, sem validar). */
+    get sessionExpiry() {
+        const exp = decodeTokenPayload(this.auth.getToken())?.['exp'];
+        if (typeof exp !== 'number')
+            return this.text.sessionUnknown;
+        const at = new Date(exp * 1000);
+        const minutes = Math.round((at.getTime() - Date.now()) / 60000);
+        const when = new Intl.DateTimeFormat(this.messages.meta.locale, { timeStyle: 'short', timeZone: this.preferences.effectiveTimeZone() }).format(at);
+        if (minutes <= 0)
+            return formatMessage(this.text.sessionExpired, { time: when });
+        return minutes < 60
+            ? formatMessage(this.text.sessionExpiresIn, { minutes, time: when })
+            : formatMessage(this.text.sessionExpiresAt, { time: when });
+    }
+    async copyToken() {
+        const token = this.auth.getToken();
+        if (!token) {
+            this.toast.warning(this.text.noSessionToken);
+            return;
+        }
+        await this.copy(token, this.text.tokenCopied);
+    }
+    logout() {
+        this.settings.close();
+        this.auth.logout();
+    }
+    get buildDate() {
+        const date = this.packageInfo.buildDate;
+        return date ? new Intl.DateTimeFormat(this.messages.meta.locale, { dateStyle: 'short', timeStyle: 'short' }).format(new Date(date)) : '';
+    }
+    /** Texto pronto pra colar num chamado: app, versão, ambiente, navegador, tela, fuso e página. */
+    async copySupportInfo() {
+        const info = this.packageInfo;
+        const s = this.messages.support;
+        const theme = formatMessage(s.themeValue, {
+            theme: this.appliedTheme(), mode: this.themeMode(), family: this.family(), density: this.densityValue(), font: this.fontValue(),
+        });
+        const lines = [
+            `${s.application}: ${this.appName}${info.name ? ` (${info.name})` : ''}`,
+            `${s.version}: ${info.version ?? '—'}`,
+            info.buildDate ? `${s.build}: ${this.buildDate}` : '',
+            info.environment ? `${s.environment}: ${info.environment}` : '',
+            `${s.page}: ${location.href}`,
+            `${s.browser}: ${navigator.userAgent}`,
+            `${s.screen}: ${window.innerWidth}×${window.innerHeight} @${window.devicePixelRatio}x`,
+            `${s.theme}: ${theme}`,
+            `${s.timeZone}: ${this.preferences.effectiveTimeZone()}`,
+            `${s.accessLevel}: ${this.badge?.name ?? '—'}`,
+            `${s.date}: ${new Date().toISOString()}`,
+        ].filter(Boolean);
+        await this.copy(lines.join('\n'), this.text.supportCopied);
+    }
+    async copy(text, success) {
+        try {
+            await navigator.clipboard.writeText(text);
+            this.toast.success(success);
+        }
+        catch {
+            this.toast.error(this.text.copyBlocked);
+        }
+    }
+    onOpenChange(open) {
+        if (!open)
+            this.settings.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SettingsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SettingsPanelComponent, isStandalone: true, selector: "spine-settings-panel", ngImport: i0, template: "<!-- Montado s\u00F3 enquanto aberto: nada disto (lista de fusos, leitura do token...) custa no\n     carregamento de toda p\u00E1gina. -->\n@if (settings.isOpen()) {\n  <hm-settings-dialog\n    [heading]=\"text.heading\"\n    [open]=\"true\"\n    (openChange)=\"onOpenChange($event)\"\n    [activeSection]=\"settings.section()\"\n    (activeSectionChange)=\"settings.section.set($event)\"\n  >\n    <!-- \u2500\u2500 Conta \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.account\" [label]=\"text.account\" icon=\"user\" [keywords]=\"text.accountKeywords\">\n      <div class=\"sp-settings__profile\">\n        <hm-account-avatar [name]=\"profile.name ?? text.user\" [imageUrl]=\"profile.picture\" />\n        <span class=\"sp-settings__profile-text\">\n          <strong>{{ profile.name ?? text.user }}</strong>\n          @if (profile.role) { <span>{{ profile.role }}</span> }\n        </span>\n      </div>\n\n      <!-- S\u00F3 informativo: a troca de n\u00EDvel fica no menu do perfil, perto de onde se trabalha. -->\n      @if (badge) {\n        <hm-settings-row [label]=\"text.accessLevel\" [keywords]=\"text.accessLevelKeywords\">\n          <span class=\"sp-settings__value\">{{ badge.name }}</span>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.session\" [description]=\"text.sessionDescription\" [keywords]=\"text.sessionKeywords\">\n        <span class=\"sp-settings__value\">{{ sessionExpiry }}</span>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.accessToken\" [description]=\"text.accessTokenDescription\" [keywords]=\"text.accessTokenKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"copy\" (clicked)=\"copyToken()\">{{ text.copy }}</hm-button>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.appTokens\" [stacked]=\"true\"\n        [description]=\"text.appTokensDescription\"\n        [keywords]=\"text.appTokensKeywords\">\n        <spine-app-tokens />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.logout\" [description]=\"text.logoutDescription\" [keywords]=\"text.logoutKeywords\">\n        <hm-button emphasis=\"medium\" intent=\"danger\" icon=\"logout\" (clicked)=\"logout()\">{{ text.logout }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Apar\u00EAncia \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.appearance\" [label]=\"text.appearance\" icon=\"color-palette\" [keywords]=\"text.appearanceKeywords\">\n      <hm-settings-row [label]=\"text.theme\" [description]=\"text.themeDescription\" [keywords]=\"text.themeKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.theme\" [options]=\"themeOptions()\" [value]=\"themeMode()\" (valueChange)=\"setThemeMode($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.accent\" [description]=\"text.accentDescription\" [keywords]=\"text.accentKeywords\" [stacked]=\"true\">\n        <hm-theme-picker\n          [families]=\"families\"\n          [family]=\"family()\"\n          [theme]=\"appliedTheme()\"\n          [showMode]=\"false\"\n          (familyChosen)=\"setFamily($event)\"\n        />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.density\" [description]=\"text.densityDescription\" [keywords]=\"text.densityKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.density\" [options]=\"densityOptions()\" [value]=\"densityValue()\" (valueChange)=\"setDensity($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.font\" [description]=\"text.fontDescription\" [keywords]=\"text.fontKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.font\" [options]=\"fontOptions\" [value]=\"fontValue()\" (valueChange)=\"setFont($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.sidebar\" [description]=\"text.sidebarDescription\" [keywords]=\"text.sidebarKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.sidebar\" [options]=\"sidebarOptions()\" [value]=\"sidebar.mode()\" (valueChange)=\"setSidebarMode($event)\" />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Regi\u00E3o \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.region\" [label]=\"text.region\" icon=\"clock\" [keywords]=\"text.regionKeywords\">\n      <hm-settings-row [label]=\"text.language\" [description]=\"text.languageDescription\" [keywords]=\"text.languageKeywords\">\n        <hm-select\n          class=\"sp-settings__language\"\n          [label]=\"text.language\"\n          [labelHidden]=\"true\"\n          [value]=\"preferences.language()\"\n          (valueChange)=\"preferences.setLanguage($event ?? '')\"\n        >\n          @for (option of languageOptions(); track option.value) {\n            <option [value]=\"option.value\" [attr.lang]=\"option.value || null\">{{ option.label }}</option>\n          }\n        </hm-select>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.timeZone\" [keywords]=\"text.timeZoneKeywords\">\n        <span rowDescription class=\"sp-settings__hint\">{{ fmt(text.timeZoneHint, { now: timeZonePreview() }) }}</span>\n        <hm-combobox\n          class=\"sp-settings__timezone\"\n          [label]=\"text.timeZone\"\n          [labelHidden]=\"true\"\n          icon=\"world\"\n          [options]=\"timeZoneOptions()\"\n          [value]=\"preferences.timeZone()\"\n          (valueChange)=\"preferences.setTimeZone($event)\"\n        />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Atalhos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.shortcuts\" [label]=\"text.shortcuts\" icon=\"keyboard\" [description]=\"text.shortcutsDescription\" [keywords]=\"text.shortcutsKeywords\">\n      <!-- Mesma lista do painel \"?\", sem busca (a do di\u00E1logo de configura\u00E7\u00F5es j\u00E1 cobre a se\u00E7\u00E3o);\n           o interruptor de tecla \u00FAnica (WCAG 2.1.4) persiste no SpinePreferencesService. -->\n      <hm-shortcut-list characterKeysToggle [registered]=\"false\" [items]=\"shortcutItems()\" [headingLevel]=\"4\" />\n      <hm-settings-row [label]=\"text.tour\" [description]=\"text.tourDescription\" [keywords]=\"text.tourKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"play\" (clicked)=\"replayTour()\">{{ text.replayTour }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Se\u00E7\u00F5es do app (provideSettingsSection) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @for (s of appSections; track s.key) {\n      <hm-settings-section [key]=\"s.key\" [label]=\"s.label\" [icon]=\"s.icon ?? 'cog'\" [description]=\"s.description ?? ''\" [keywords]=\"s.keywords ?? ''\">\n        <ng-container *ngComponentOutlet=\"s.component\" />\n      </hm-settings-section>\n    }\n\n    <!-- \u2500\u2500 Sobre \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.about\" [label]=\"text.about\" icon=\"info-circle\" [keywords]=\"text.aboutKeywords\">\n      <hm-settings-row [label]=\"text.application\">\n        <span class=\"sp-settings__value\">{{ appName }}@if (packageInfo.name) { <span class=\"sp-settings__muted\"> \u00B7 {{ packageInfo.name }}</span> }</span>\n      </hm-settings-row>\n      <hm-settings-row [label]=\"text.version\" [keywords]=\"text.versionKeywords\">\n        <span class=\"sp-settings__value sp-settings__mono\">{{ packageInfo.version ?? '\u2014' }}</span>\n      </hm-settings-row>\n      @if (buildDate) {\n        <hm-settings-row [label]=\"text.buildDate\">\n          <span class=\"sp-settings__value\">{{ buildDate }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.environment) {\n        <hm-settings-row [label]=\"text.environment\" [keywords]=\"text.environmentKeywords\">\n          <span class=\"sp-settings__value\">{{ packageInfo.environment }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.repository?.url || packageInfo.docs || packageInfo.issues) {\n        <hm-settings-row [label]=\"text.links\" [keywords]=\"text.linksKeywords\">\n          <span class=\"sp-settings__links\">\n            @if (packageInfo.docs) { <hm-button emphasis=\"minimal\" icon=\"book\" [link]=\"packageInfo.docs\" [newTab]=\"true\">{{ text.docs }}</hm-button> }\n            @if (packageInfo.issues) { <hm-button emphasis=\"minimal\" icon=\"bug\" [link]=\"packageInfo.issues\" [newTab]=\"true\">{{ text.reportIssue }}</hm-button> }\n            @if (packageInfo.repository?.url) { <hm-button emphasis=\"minimal\" icon=\"link\" [link]=\"packageInfo.repository!.url!\" [newTab]=\"true\">{{ text.repository }}</hm-button> }\n          </span>\n        </hm-settings-row>\n      }\n      @if (dependencies.length) {\n        <hm-settings-row [label]=\"text.dependencies\" [description]=\"text.dependenciesDescription\" [keywords]=\"text.dependenciesKeywords\" [stacked]=\"true\">\n          <dl class=\"sp-settings__deps\">\n            @for (d of dependencies; track d.name) {\n              <div><dt>{{ d.label }}</dt><dd class=\"sp-settings__mono\">{{ d.version }}</dd></div>\n            }\n          </dl>\n        </hm-settings-row>\n      }\n      <hm-settings-row [label]=\"text.supportInfo\" [description]=\"text.supportInfoDescription\" [keywords]=\"text.supportInfoKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"clipboard\" (clicked)=\"copySupportInfo()\">{{ text.copy }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n  </hm-settings-dialog>\n}\n", styles: ["@charset \"UTF-8\";.sp-settings__hint{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__timezone{display:block;width:min(320px,100%)}.sp-settings__profile{display:flex;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) 0 var(--hm-space-sm)}.sp-settings__profile-text{display:flex;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text)}.sp-settings__profile-text span{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-settings__value{color:var(--hm-text);font-size:var(--hm-font-size-sm);text-align:end}.sp-settings__muted{color:var(--hm-muted)}.sp-settings__mono{font-family:Geist Mono,ui-monospace,monospace}.sp-settings__links{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-nano)}.sp-settings__deps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0}.sp-settings__deps div{display:flex;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-hover)}.sp-settings__deps dt{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__deps dd{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-xs)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AppTokensComponent, selector: "spine-app-tokens" }, { kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: ComboboxComponent, selector: "hm-combobox", inputs: ["label", "options", "value", "placeholder", "icon", "hint", "help", "size", "labelHidden", "clearable", "requiredManual", "loading", "allowCustomValue"], outputs: ["valueChange"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: SettingsDialogComponent, selector: "hm-settings-dialog", inputs: ["open", "heading", "activeSection", "closeHandler", "actions", "submitLabel", "cancelLabel"], outputs: ["openChange", "activeSectionChange", "closed", "submitted"] }, { kind: "component", type: SettingsRowComponent, selector: "hm-settings-row", inputs: ["label", "description", "keywords", "stacked"] }, { kind: "component", type: SettingsSectionComponent, selector: "hm-settings-section", inputs: ["key", "label", "icon", "description", "keywords", "control", "invalid"] }, { kind: "component", type: SelectComponent, selector: "hm-select", inputs: ["value", "label", "labelHidden", "hint"], outputs: ["valueChange"] }, { kind: "component", type: ShortcutListComponent, selector: "hm-shortcut-list", inputs: ["items", "registered", "searchable", "characterKeysToggle", "headingLevel"] }, { kind: "component", type: ThemePickerComponent, selector: "hm-theme-picker", inputs: ["families", "family", "theme", "showMode"], outputs: ["familyChosen", "themeChosen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SettingsPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-settings-panel', imports: [
+                        NgComponentOutlet, AppTokensComponent,
+                        AccountAvatarComponent, ButtonComponent, ComboboxComponent, IconComponent,
+                        SegmentedControlComponent, SettingsDialogComponent, SettingsRowComponent, SettingsSectionComponent,
+                        SelectComponent, ShortcutListComponent, ThemePickerComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Montado s\u00F3 enquanto aberto: nada disto (lista de fusos, leitura do token...) custa no\n     carregamento de toda p\u00E1gina. -->\n@if (settings.isOpen()) {\n  <hm-settings-dialog\n    [heading]=\"text.heading\"\n    [open]=\"true\"\n    (openChange)=\"onOpenChange($event)\"\n    [activeSection]=\"settings.section()\"\n    (activeSectionChange)=\"settings.section.set($event)\"\n  >\n    <!-- \u2500\u2500 Conta \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.account\" [label]=\"text.account\" icon=\"user\" [keywords]=\"text.accountKeywords\">\n      <div class=\"sp-settings__profile\">\n        <hm-account-avatar [name]=\"profile.name ?? text.user\" [imageUrl]=\"profile.picture\" />\n        <span class=\"sp-settings__profile-text\">\n          <strong>{{ profile.name ?? text.user }}</strong>\n          @if (profile.role) { <span>{{ profile.role }}</span> }\n        </span>\n      </div>\n\n      <!-- S\u00F3 informativo: a troca de n\u00EDvel fica no menu do perfil, perto de onde se trabalha. -->\n      @if (badge) {\n        <hm-settings-row [label]=\"text.accessLevel\" [keywords]=\"text.accessLevelKeywords\">\n          <span class=\"sp-settings__value\">{{ badge.name }}</span>\n        </hm-settings-row>\n      }\n\n      <hm-settings-row [label]=\"text.session\" [description]=\"text.sessionDescription\" [keywords]=\"text.sessionKeywords\">\n        <span class=\"sp-settings__value\">{{ sessionExpiry }}</span>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.accessToken\" [description]=\"text.accessTokenDescription\" [keywords]=\"text.accessTokenKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"copy\" (clicked)=\"copyToken()\">{{ text.copy }}</hm-button>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.appTokens\" [stacked]=\"true\"\n        [description]=\"text.appTokensDescription\"\n        [keywords]=\"text.appTokensKeywords\">\n        <spine-app-tokens />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.logout\" [description]=\"text.logoutDescription\" [keywords]=\"text.logoutKeywords\">\n        <hm-button emphasis=\"medium\" intent=\"danger\" icon=\"logout\" (clicked)=\"logout()\">{{ text.logout }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Apar\u00EAncia \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.appearance\" [label]=\"text.appearance\" icon=\"color-palette\" [keywords]=\"text.appearanceKeywords\">\n      <hm-settings-row [label]=\"text.theme\" [description]=\"text.themeDescription\" [keywords]=\"text.themeKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.theme\" [options]=\"themeOptions()\" [value]=\"themeMode()\" (valueChange)=\"setThemeMode($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.accent\" [description]=\"text.accentDescription\" [keywords]=\"text.accentKeywords\" [stacked]=\"true\">\n        <hm-theme-picker\n          [families]=\"families\"\n          [family]=\"family()\"\n          [theme]=\"appliedTheme()\"\n          [showMode]=\"false\"\n          (familyChosen)=\"setFamily($event)\"\n        />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.density\" [description]=\"text.densityDescription\" [keywords]=\"text.densityKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.density\" [options]=\"densityOptions()\" [value]=\"densityValue()\" (valueChange)=\"setDensity($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.font\" [description]=\"text.fontDescription\" [keywords]=\"text.fontKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.font\" [options]=\"fontOptions\" [value]=\"fontValue()\" (valueChange)=\"setFont($event)\" />\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.sidebar\" [description]=\"text.sidebarDescription\" [keywords]=\"text.sidebarKeywords\">\n        <hm-segmented-control emphasis=\"action\" [label]=\"text.sidebar\" [options]=\"sidebarOptions()\" [value]=\"sidebar.mode()\" (valueChange)=\"setSidebarMode($event)\" />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Regi\u00E3o \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.region\" [label]=\"text.region\" icon=\"clock\" [keywords]=\"text.regionKeywords\">\n      <hm-settings-row [label]=\"text.language\" [description]=\"text.languageDescription\" [keywords]=\"text.languageKeywords\">\n        <hm-select\n          class=\"sp-settings__language\"\n          [label]=\"text.language\"\n          [labelHidden]=\"true\"\n          [value]=\"preferences.language()\"\n          (valueChange)=\"preferences.setLanguage($event ?? '')\"\n        >\n          @for (option of languageOptions(); track option.value) {\n            <option [value]=\"option.value\" [attr.lang]=\"option.value || null\">{{ option.label }}</option>\n          }\n        </hm-select>\n      </hm-settings-row>\n\n      <hm-settings-row [label]=\"text.timeZone\" [keywords]=\"text.timeZoneKeywords\">\n        <span rowDescription class=\"sp-settings__hint\">{{ fmt(text.timeZoneHint, { now: timeZonePreview() }) }}</span>\n        <hm-combobox\n          class=\"sp-settings__timezone\"\n          [label]=\"text.timeZone\"\n          [labelHidden]=\"true\"\n          icon=\"world\"\n          [options]=\"timeZoneOptions()\"\n          [value]=\"preferences.timeZone()\"\n          (valueChange)=\"preferences.setTimeZone($event)\"\n        />\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Atalhos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.shortcuts\" [label]=\"text.shortcuts\" icon=\"keyboard\" [description]=\"text.shortcutsDescription\" [keywords]=\"text.shortcutsKeywords\">\n      <!-- Mesma lista do painel \"?\", sem busca (a do di\u00E1logo de configura\u00E7\u00F5es j\u00E1 cobre a se\u00E7\u00E3o);\n           o interruptor de tecla \u00FAnica (WCAG 2.1.4) persiste no SpinePreferencesService. -->\n      <hm-shortcut-list characterKeysToggle [registered]=\"false\" [items]=\"shortcutItems()\" [headingLevel]=\"4\" />\n      <hm-settings-row [label]=\"text.tour\" [description]=\"text.tourDescription\" [keywords]=\"text.tourKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"play\" (clicked)=\"replayTour()\">{{ text.replayTour }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n\n    <!-- \u2500\u2500 Se\u00E7\u00F5es do app (provideSettingsSection) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @for (s of appSections; track s.key) {\n      <hm-settings-section [key]=\"s.key\" [label]=\"s.label\" [icon]=\"s.icon ?? 'cog'\" [description]=\"s.description ?? ''\" [keywords]=\"s.keywords ?? ''\">\n        <ng-container *ngComponentOutlet=\"s.component\" />\n      </hm-settings-section>\n    }\n\n    <!-- \u2500\u2500 Sobre \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <hm-settings-section [key]=\"keys.about\" [label]=\"text.about\" icon=\"info-circle\" [keywords]=\"text.aboutKeywords\">\n      <hm-settings-row [label]=\"text.application\">\n        <span class=\"sp-settings__value\">{{ appName }}@if (packageInfo.name) { <span class=\"sp-settings__muted\"> \u00B7 {{ packageInfo.name }}</span> }</span>\n      </hm-settings-row>\n      <hm-settings-row [label]=\"text.version\" [keywords]=\"text.versionKeywords\">\n        <span class=\"sp-settings__value sp-settings__mono\">{{ packageInfo.version ?? '\u2014' }}</span>\n      </hm-settings-row>\n      @if (buildDate) {\n        <hm-settings-row [label]=\"text.buildDate\">\n          <span class=\"sp-settings__value\">{{ buildDate }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.environment) {\n        <hm-settings-row [label]=\"text.environment\" [keywords]=\"text.environmentKeywords\">\n          <span class=\"sp-settings__value\">{{ packageInfo.environment }}</span>\n        </hm-settings-row>\n      }\n      @if (packageInfo.repository?.url || packageInfo.docs || packageInfo.issues) {\n        <hm-settings-row [label]=\"text.links\" [keywords]=\"text.linksKeywords\">\n          <span class=\"sp-settings__links\">\n            @if (packageInfo.docs) { <hm-button emphasis=\"minimal\" icon=\"book\" [link]=\"packageInfo.docs\" [newTab]=\"true\">{{ text.docs }}</hm-button> }\n            @if (packageInfo.issues) { <hm-button emphasis=\"minimal\" icon=\"bug\" [link]=\"packageInfo.issues\" [newTab]=\"true\">{{ text.reportIssue }}</hm-button> }\n            @if (packageInfo.repository?.url) { <hm-button emphasis=\"minimal\" icon=\"link\" [link]=\"packageInfo.repository!.url!\" [newTab]=\"true\">{{ text.repository }}</hm-button> }\n          </span>\n        </hm-settings-row>\n      }\n      @if (dependencies.length) {\n        <hm-settings-row [label]=\"text.dependencies\" [description]=\"text.dependenciesDescription\" [keywords]=\"text.dependenciesKeywords\" [stacked]=\"true\">\n          <dl class=\"sp-settings__deps\">\n            @for (d of dependencies; track d.name) {\n              <div><dt>{{ d.label }}</dt><dd class=\"sp-settings__mono\">{{ d.version }}</dd></div>\n            }\n          </dl>\n        </hm-settings-row>\n      }\n      <hm-settings-row [label]=\"text.supportInfo\" [description]=\"text.supportInfoDescription\" [keywords]=\"text.supportInfoKeywords\">\n        <hm-button emphasis=\"medium\" icon=\"clipboard\" (clicked)=\"copySupportInfo()\">{{ text.copy }}</hm-button>\n      </hm-settings-row>\n    </hm-settings-section>\n  </hm-settings-dialog>\n}\n", styles: ["@charset \"UTF-8\";.sp-settings__hint{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__timezone{display:block;width:min(320px,100%)}.sp-settings__profile{display:flex;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-xxxs) 0 var(--hm-space-sm)}.sp-settings__profile-text{display:flex;flex-direction:column;gap:var(--hm-space-micro);color:var(--hm-text)}.sp-settings__profile-text span{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.sp-settings__value{color:var(--hm-text);font-size:var(--hm-font-size-sm);text-align:end}.sp-settings__muted{color:var(--hm-muted)}.sp-settings__mono{font-family:Geist Mono,ui-monospace,monospace}.sp-settings__links{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-nano)}.sp-settings__deps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--hm-space-nano) var(--hm-space-sm);margin:0}.sp-settings__deps div{display:flex;justify-content:space-between;gap:var(--hm-space-xxxs);padding:var(--hm-space-nano) var(--hm-space-xxxs);border-radius:var(--hm-radius-control);background:var(--hm-hover)}.sp-settings__deps dt{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.sp-settings__deps dd{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-xs)}\n"] }]
+        }] });
+/** "UTC−03:00" para um fuso IANA. */
+function offsetOf(timeZone) {
+    try {
+        const part = new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'longOffset' })
+            .formatToParts(new Date())
+            .find((p) => p.type === 'timeZoneName')?.value;
+        return (part ?? 'GMT').replace('GMT', 'UTC').replace('-', '−') || 'UTC';
+    }
+    catch {
+        return 'UTC';
+    }
+}
+function decodeTokenPayload(token) {
+    const payload = token?.split('.')[1];
+    if (!payload)
+        return null;
+    try {
+        const json = atob(payload.replace(/-/g, '+').replace(/_/g, '/').padEnd(Math.ceil(payload.length / 4) * 4, '='));
+        return JSON.parse(json);
+    }
+    catch {
+        return null;
+    }
+}
+
+/**
+ * Estado da documentação das telas: o que está registrado em `COMPONENT_ROUTES` com `document`,
+ * filtrado pelas telas que existem na árvore da pessoa (documento de tela sem acesso nunca é oferecido),
+ * e a leitura em andamento no modal `spine-docs`.
+ */
+class SpineDocsService {
+    #distributor;
+    #views;
+    #messages;
+    #isOpen;
+    #current;
+    #view;
+    #content;
+    #loading;
+    #failed;
+    /** Identifica a leitura vigente; respostas de leituras anteriores são ignoradas. */
+    #ticket;
+    /** A view do Orfeu não é um signal: este contador força a releitura da árvore. */
+    #treeRevision;
+    #offered;
+    constructor() {
+        this.#distributor = inject(ComponentDistributorService);
+        this.#views = inject(ViewService);
+        this.#messages = inject(SPINE_MESSAGES);
+        /** Visão técnica liberada (`SpineConfig.technicalDocs`; sem configuração, só em desenvolvimento). */
+        this.technicalAvailable = inject(SPINE_CONFIG, { optional: true })?.technicalDocs ?? isDevMode();
+        this.#isOpen = signal(false, ...(ngDevMode ? [{ debugName: "#isOpen" }] : /* istanbul ignore next */ []));
+        this.#current = signal(null, ...(ngDevMode ? [{ debugName: "#current" }] : /* istanbul ignore next */ []));
+        this.#view = signal('usage', ...(ngDevMode ? [{ debugName: "#view" }] : /* istanbul ignore next */ []));
+        this.#content = signal('', ...(ngDevMode ? [{ debugName: "#content" }] : /* istanbul ignore next */ []));
+        this.#loading = signal(false, ...(ngDevMode ? [{ debugName: "#loading" }] : /* istanbul ignore next */ []));
+        this.#failed = signal(false, ...(ngDevMode ? [{ debugName: "#failed" }] : /* istanbul ignore next */ []));
+        /** Identifica a leitura vigente; respostas de leituras anteriores são ignoradas. */
+        this.#ticket = 0;
+        /** A view do Orfeu não é um signal: este contador força a releitura da árvore. */
+        this.#treeRevision = signal(0, ...(ngDevMode ? [{ debugName: "#treeRevision" }] : /* istanbul ignore next */ []));
+        this.isOpen = this.#isOpen.asReadonly();
+        this.current = this.#current.asReadonly();
+        this.view = this.#view.asReadonly();
+        this.content = this.#content.asReadonly();
+        this.loading = this.#loading.asReadonly();
+        this.error = computed(() => (this.#failed() ? this.#messages.docs.loadError : ''), ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.showTechnical = computed(() => this.technicalAvailable && !!this.#current()?.loadTechnical, ...(ngDevMode ? [{ debugName: "showTechnical" }] : /* istanbul ignore next */ []));
+        this.#offered = computed(() => {
+            this.#treeRevision();
+            const screens = this.#screens();
+            const offered = new Map();
+            for (const registered of this.#distributor.entries) {
+                const document = registered.document;
+                if (!document)
+                    continue;
+                const key = (componentRouterId(registered) ?? registered.source_template_router_id)?.toLowerCase();
+                if (!key || offered.has(key))
+                    continue;
+                const screen = screens.get(key);
+                if (!screen)
+                    continue;
+                offered.set(key, {
+                    ...document,
+                    id: key,
+                    title: document.title ?? screen.label,
+                    group: document.group ?? screen.module,
+                });
+            }
+            return offered;
+        }, ...(ngDevMode ? [{ debugName: "#offered" }] : /* istanbul ignore next */ []));
+        this.index = computed(() => {
+            const locale = this.#messages.meta.locale;
+            const compare = (a, b) => a.localeCompare(b, locale);
+            const byGroup = new Map();
+            for (const entry of this.#offered().values()) {
+                const list = byGroup.get(entry.group);
+                if (list)
+                    list.push(entry);
+                else
+                    byGroup.set(entry.group, [entry]);
+            }
+            return [...byGroup]
+                .map(([title, entries]) => ({ title, entries: entries.sort((a, b) => compare(a.title, b.title)) }))
+                .sort((a, b) => compare(a.title, b.title));
+        }, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        // Quando a view muda (login, troca de crachá), o botão da barra da página acompanha sem esperar
+        // a próxima abertura.
+        const changes = this.#views.currentView$;
+        // A emissão síncrona da inscrição é a view que o `#offered` já lê; só as seguintes importam.
+        let subscribed = false;
+        const subscription = changes?.subscribe?.(() => {
+            if (subscribed)
+                this.#refreshTree();
+        });
+        subscribed = true;
+        if (subscription)
+            inject(DestroyRef).onDestroy(() => subscription.unsubscribe());
+    }
+    documentFor(routerId, sourceTemplateRouterId) {
+        const offered = this.#offered();
+        for (const candidate of [routerId, sourceTemplateRouterId]) {
+            if (!candidate)
+                continue;
+            const entry = offered.get(candidate.toLowerCase());
+            if (entry)
+                return entry;
+        }
+        return null;
+    }
+    openForRoute(routerId, sourceTemplateRouterId) {
+        this.#refreshTree();
+        this.#isOpen.set(true);
+        const entry = this.documentFor(routerId, sourceTemplateRouterId);
+        if (entry)
+            void this.open(entry);
+    }
+    openIndex() {
+        this.#refreshTree();
+        this.#isOpen.set(true);
+    }
+    close() {
+        this.#isOpen.set(false);
+    }
+    open(entry, view = 'usage') {
+        this.#current.set(entry);
+        return this.show(view);
+    }
+    async show(view) {
+        const entry = this.#current();
+        if (!entry)
+            return;
+        const technical = view === 'technical' && this.technicalAvailable ? entry.loadTechnical : undefined;
+        const ticket = ++this.#ticket;
+        this.#view.set(technical ? 'technical' : 'usage');
+        this.#loading.set(true);
+        this.#failed.set(false);
+        let text = '';
+        let failed = false;
+        try {
+            text = await (technical ?? entry.load)();
+        }
+        catch {
+            failed = true;
+        }
+        if (ticket !== this.#ticket)
+            return;
+        this.#content.set(failed ? '' : text);
+        this.#failed.set(failed);
+        this.#loading.set(false);
+    }
+    #refreshTree() {
+        this.#treeRevision.update((n) => n + 1);
+    }
+    /** Telas da árvore da pessoa, por router_id e por template, com rótulo e módulo de topo. */
+    #screens() {
+        const screens = new Map();
+        const visit = (node, module) => {
+            const info = { label: node.route_display_name ?? '', module };
+            for (const key of [routerIdOf(node), node.source_template_router_id]) {
+                if (key && !screens.has(key.toLowerCase()))
+                    screens.set(key.toLowerCase(), info);
+            }
+            for (const child of node.routes ?? [])
+                visit(child, module);
+        };
+        for (const root of spineRoutesOf(this.#views.currentView))
+            visit(root, root.route_display_name ?? '');
+        return screens;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineDocsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineDocsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineDocsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Barra de contexto do topo de CADA painel do workspace: título e ícone da página e as
+ * ações que valem pra página inteira (favoritar, copiar link, documentação) em cima; a descrição da
+ * tela logo abaixo do título; a trilha (breadcrumb) embaixo.
+ *
+ * A descrição é do ROUTER (`web.router.description`, editada no Argos), não da tela: é aqui que todo
+ * app mostra "o que esta página faz", então as telas NÃO repetem título+descrição internos.
+ * Tela identificada pelo `router_id` do nó 'page' (`routerIdOf`), nunca pelo `web.routes.route_id`.
+ *
+ * Mora dentro do painel (não num shell global) porque cada painel do `hm-workspace` resolve a
+ * própria aba: dois painéis lado a lado mostram duas trilhas diferentes ao mesmo tempo. Por isso
+ * recebe a `chain` (header→…→page) do painel em vez de ler a "página atual" de algum serviço global.
+ *
+ * Só o painel focado alimenta os "recentes" (`recordRecent`) — os outros apenas exibem.
+ *
+ * Favoritos e recentes moram no `SpineQuickAccessService` (compartilhado com a tela inicial): o
+ * coração daqui e a seção "Favoritos" do Início mudam juntos.
+ */
+class SpinePageBarComponent {
+    openDocs() {
+        this.docs.openForRoute(this.routerId(), this.sourceTemplateRouterId());
+    }
+    constructor() {
+        this.text = inject(SPINE_MESSAGES).pageBar;
+        /** Cadeia resolvida (header→…→page) do painel; `null` enquanto a URL não resolve. */
+        this.chain = input(null, ...(ngDevMode ? [{ debugName: "chain" }] : /* istanbul ignore next */ []));
+        /** Só o painel focado registra a página em "recentes". */
+        this.recordRecent = input(false, ...(ngDevMode ? [{ debugName: "recordRecent" }] : /* istanbul ignore next */ []));
+        this.linkCopied = signal(false, ...(ngDevMode ? [{ debugName: "linkCopied" }] : /* istanbul ignore next */ []));
+        this.docs = inject(SpineDocsService);
+        /** A página (último nó da cadeia). */
+        this.page = computed(() => this.chain()?.at(-1) ?? null, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+        /** router_id da página -- chave do documento dela (o router do template entra como alternativa). */
+        this.routerId = computed(() => routerIdOf(this.page()), ...(ngDevMode ? [{ debugName: "routerId" }] : /* istanbul ignore next */ []));
+        this.sourceTemplateRouterId = computed(() => this.page()?.source_template_router_id ?? null, ...(ngDevMode ? [{ debugName: "sourceTemplateRouterId" }] : /* istanbul ignore next */ []));
+        this.hasDoc = computed(() => !!this.docs.documentFor(this.routerId(), this.sourceTemplateRouterId()), ...(ngDevMode ? [{ debugName: "hasDoc" }] : /* istanbul ignore next */ []));
+        /** Descrição do router da página (`web.router.description`); vazia = sem a linha. */
+        this.description = computed(() => this.page()?.description?.trim() || '', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.quickAccess = inject(SpineQuickAccessService);
+        this.crumbs = computed(() => (this.chain() ?? [])
+            .filter((r) => !!r.route_display_name)
+            .map((r) => ({ label: r.route_display_name, link: r.route_redirect ?? '' })), ...(ngDevMode ? [{ debugName: "crumbs" }] : /* istanbul ignore next */ []));
+        /** Degraus do `hm-breadcrumb`: nível sem endereço (grupo) vira texto, sem link. */
+        this.trail = computed(() => this.crumbs().map(({ label, link }) => (link ? { label, routerLink: link } : { label })), ...(ngDevMode ? [{ debugName: "trail" }] : /* istanbul ignore next */ []));
+        this.title = computed(() => this.crumbs().at(-1)?.label ?? '', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Ícone da própria página; cai no do módulo quando a página não tem. */
+        this.icon = computed(() => {
+            const chain = this.chain() ?? [];
+            return chain.at(-1)?.route_icon || chain[0]?.route_icon || null;
+        }, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** A página do painel como item de favorito/recente, com a trilha ("onde fica") dela. */
+        this.currentItem = computed(() => {
+            const crumbs = this.crumbs();
+            const last = crumbs.at(-1);
+            if (!last?.link)
+                return null;
+            return {
+                id: last.link,
+                icon: this.icon() || 'application',
+                displayName: last.label,
+                redirect: last.link,
+                trail: crumbs.slice(0, -1).map((c) => c.label),
+            };
+        }, ...(ngDevMode ? [{ debugName: "currentItem" }] : /* istanbul ignore next */ []));
+        this.isFavorite = computed(() => this.quickAccess.isFavorite(this.currentItem()?.id), ...(ngDevMode ? [{ debugName: "isFavorite" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const item = this.currentItem();
+            if (this.recordRecent() && item)
+                this.quickAccess.recordVisit(item);
+        });
+    }
+    toggleFavorite() {
+        const item = this.currentItem();
+        if (item)
+            this.quickAccess.toggleFavorite(item);
+    }
+    copyLink() {
+        try {
+            void navigator.clipboard?.writeText(window.location.href);
+            this.linkCopied.set(true);
+            setTimeout(() => this.linkCopied.set(false), 2000);
+        }
+        catch {
+            /* clipboard indisponível */
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpinePageBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpinePageBarComponent, isStandalone: true, selector: "spine-page-bar", inputs: { chain: { classPropertyName: "chain", publicName: "chain", isSignal: true, isRequired: false, transformFunction: null }, recordRecent: { classPropertyName: "recordRecent", publicName: "recordRecent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (title(); as pageTitle) {
+      <header class="spine-page-bar" data-tour="breadcrumb">
+        <div class="spine-page-bar__identity">
+          <div class="spine-page-bar__title-row">
+            @if (icon(); as ic) {
+              <hm-icon class="spine-page-bar__icon" [shape]="ic" />
+            }
+            <h1 class="spine-page-bar__title">{{ pageTitle }}</h1>
+
+            <span class="spine-page-bar__actions">
+              <!-- O estado vai no nome ("Favoritar" / "Remover dos favoritos"). Sem aria-pressed: no host
+                   <hm-icon-button> ele caía num elemento sem papel, e não no <button> (o leitor não lia).
+                   A dica (hmTooltip) repete o nome para quem enxerga: só ícone, sem texto, o botão não diz
+                   o que faz até ser clicado. -->
+              <hm-icon-button
+                emphasis="subtle"
+                icon="heart" [solid]="isFavorite()"
+                [label]="isFavorite() ? text.unfavorite : text.favorite"
+                [hmTooltip]="isFavorite() ? text.unfavorite : text.favorite"
+                [class.spine-page-bar__fav--on]="isFavorite()"
+                (clicked)="toggleFavorite()"
+              />
+              <hm-icon-button
+                emphasis="subtle"
+                [icon]="linkCopied() ? 'check' : 'copy'"
+                [label]="linkCopied() ? text.linkCopied : text.copyLink"
+                [hmTooltip]="linkCopied() ? text.linkCopied : text.copyLink"
+                (clicked)="copyLink()"
+              />
+              <!-- Só quando a tela tem documento registrado (\`document\` no mapa de componentes). -->
+              @if (hasDoc()) {
+                <hm-icon-button emphasis="subtle" icon="doc-list" [label]="text.docs" [hmTooltip]="text.docs" (clicked)="openDocs()" />
+              }
+            </span>
+          </div>
+
+          @if (description(); as desc) {
+            <p class="spine-page-bar__description">{{ desc }}</p>
+          }
+
+          <!-- Trilha: o hm-breadcrumb da lib (nav nomeado, lista ordenada, aria-current no último degrau,
+               recolhe o meio de trilha longa). Só com mais de um nível — numa página de nível 1 a trilha
+               repetiria o título. -->
+          @if (crumbs().length > 1) {
+            <hm-breadcrumb class="spine-page-bar__trail" [items]="trail()" [label]="text.trail" />
+          }
+        </div>
+
+        <!-- Conteúdo projetado pela tela (botões dela). -->
+        <div class="spine-page-bar__extra"><ng-content /></div>
+      </header>
+    }
+  `, isInline: true, styles: [":host{display:block}.spine-page-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-sm);padding:var(--hm-space-sm) var(--hm-space-md);margin:0;background:var(--hm-surface-raised);border-block-end:var(--hm-border-hairline, 1px) solid var(--hm-divider)}.spine-page-bar__identity{display:flex;flex:1 1 auto;min-inline-size:0;flex-direction:column;gap:calc(var(--hm-space-md) - var(--hm-space-micro))}.spine-page-bar__title-row{display:flex;align-items:center;gap:var(--hm-space-xs);min-inline-size:0}.spine-page-bar__icon{flex:none;color:var(--hm-accent);font-size:var(--hm-font-size-xxl, 28px)}.spine-page-bar__title{min-inline-size:0;margin:0;overflow:hidden;color:var(--hm-text);font-size:var(--hm-font-size-xl, 22px);font-weight:var(--hm-font-weight-bold, 700);line-height:var(--hm-line-height-tight, 1.2);text-overflow:ellipsis;white-space:nowrap}.spine-page-bar__description{max-inline-size:80ch;margin:calc(var(--hm-space-nano) - (var(--hm-space-md) - var(--hm-space-micro))) 0 0;color:var(--hm-muted);font-size:var(--hm-font-size-sm, 14px);line-height:var(--hm-line-height-normal, 1.5)}.spine-page-bar__actions{display:inline-flex;flex:none;align-items:center;gap:var(--hm-space-micro);margin-inline-start:var(--hm-space-nano)}.spine-page-bar__fav--on{color:var(--hm-danger)}.spine-page-bar__trail{margin-inline-start:calc(-1 * var(--hm-space-micro));margin-block-end:calc(-1 * var(--hm-space-micro))}.spine-page-bar__extra{display:flex;flex:none;align-items:center;gap:var(--hm-space-xxxs)}.spine-page-bar__extra:empty{display:none}\n"], dependencies: [{ kind: "component", type: BreadcrumbComponent, selector: "hm-breadcrumb", inputs: ["items", "maxItems", "itemsBeforeCollapse", "itemsAfterCollapse", "label", "loading"], outputs: ["itemClick"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: IconButtonComponent, selector: "hm-icon-button", inputs: ["label", "icon", "solid", "iconDirection", "emphasis", "intent", "size", "disabled", "toggle", "pressed", "keyShortcuts"], outputs: ["pressedChange", "clicked"] }, { kind: "directive", type: TooltipDirective, selector: "[hmTooltip]", inputs: ["hmTooltip", "hmTooltipSide", "hmTooltipDisabled", "hmTooltipShowDelay", "hmTooltipHideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpinePageBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-page-bar', imports: [BreadcrumbComponent, IconComponent, IconButtonComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (title(); as pageTitle) {
+      <header class="spine-page-bar" data-tour="breadcrumb">
+        <div class="spine-page-bar__identity">
+          <div class="spine-page-bar__title-row">
+            @if (icon(); as ic) {
+              <hm-icon class="spine-page-bar__icon" [shape]="ic" />
+            }
+            <h1 class="spine-page-bar__title">{{ pageTitle }}</h1>
+
+            <span class="spine-page-bar__actions">
+              <!-- O estado vai no nome ("Favoritar" / "Remover dos favoritos"). Sem aria-pressed: no host
+                   <hm-icon-button> ele caía num elemento sem papel, e não no <button> (o leitor não lia).
+                   A dica (hmTooltip) repete o nome para quem enxerga: só ícone, sem texto, o botão não diz
+                   o que faz até ser clicado. -->
+              <hm-icon-button
+                emphasis="subtle"
+                icon="heart" [solid]="isFavorite()"
+                [label]="isFavorite() ? text.unfavorite : text.favorite"
+                [hmTooltip]="isFavorite() ? text.unfavorite : text.favorite"
+                [class.spine-page-bar__fav--on]="isFavorite()"
+                (clicked)="toggleFavorite()"
+              />
+              <hm-icon-button
+                emphasis="subtle"
+                [icon]="linkCopied() ? 'check' : 'copy'"
+                [label]="linkCopied() ? text.linkCopied : text.copyLink"
+                [hmTooltip]="linkCopied() ? text.linkCopied : text.copyLink"
+                (clicked)="copyLink()"
+              />
+              <!-- Só quando a tela tem documento registrado (\`document\` no mapa de componentes). -->
+              @if (hasDoc()) {
+                <hm-icon-button emphasis="subtle" icon="doc-list" [label]="text.docs" [hmTooltip]="text.docs" (clicked)="openDocs()" />
+              }
+            </span>
+          </div>
+
+          @if (description(); as desc) {
+            <p class="spine-page-bar__description">{{ desc }}</p>
+          }
+
+          <!-- Trilha: o hm-breadcrumb da lib (nav nomeado, lista ordenada, aria-current no último degrau,
+               recolhe o meio de trilha longa). Só com mais de um nível — numa página de nível 1 a trilha
+               repetiria o título. -->
+          @if (crumbs().length > 1) {
+            <hm-breadcrumb class="spine-page-bar__trail" [items]="trail()" [label]="text.trail" />
+          }
+        </div>
+
+        <!-- Conteúdo projetado pela tela (botões dela). -->
+        <div class="spine-page-bar__extra"><ng-content /></div>
+      </header>
+    }
+  `, styles: [":host{display:block}.spine-page-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-sm);padding:var(--hm-space-sm) var(--hm-space-md);margin:0;background:var(--hm-surface-raised);border-block-end:var(--hm-border-hairline, 1px) solid var(--hm-divider)}.spine-page-bar__identity{display:flex;flex:1 1 auto;min-inline-size:0;flex-direction:column;gap:calc(var(--hm-space-md) - var(--hm-space-micro))}.spine-page-bar__title-row{display:flex;align-items:center;gap:var(--hm-space-xs);min-inline-size:0}.spine-page-bar__icon{flex:none;color:var(--hm-accent);font-size:var(--hm-font-size-xxl, 28px)}.spine-page-bar__title{min-inline-size:0;margin:0;overflow:hidden;color:var(--hm-text);font-size:var(--hm-font-size-xl, 22px);font-weight:var(--hm-font-weight-bold, 700);line-height:var(--hm-line-height-tight, 1.2);text-overflow:ellipsis;white-space:nowrap}.spine-page-bar__description{max-inline-size:80ch;margin:calc(var(--hm-space-nano) - (var(--hm-space-md) - var(--hm-space-micro))) 0 0;color:var(--hm-muted);font-size:var(--hm-font-size-sm, 14px);line-height:var(--hm-line-height-normal, 1.5)}.spine-page-bar__actions{display:inline-flex;flex:none;align-items:center;gap:var(--hm-space-micro);margin-inline-start:var(--hm-space-nano)}.spine-page-bar__fav--on{color:var(--hm-danger)}.spine-page-bar__trail{margin-inline-start:calc(-1 * var(--hm-space-micro));margin-block-end:calc(-1 * var(--hm-space-micro))}.spine-page-bar__extra{display:flex;flex:none;align-items:center;gap:var(--hm-space-xxxs)}.spine-page-bar__extra:empty{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { chain: [{ type: i0.Input, args: [{ isSignal: true, alias: "chain", required: false }] }], recordRecent: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordRecent", required: false }] }] } });
+
+// Componente já carregado para cada url, comum a todos os painéis: reabrir a mesma tela em outro
+// painel (ou voltar a ela) não passa de novo pelo distribuidor.
+const componentCache = new Map();
+/**
+ * Conteúdo de um painel do `hm-workspace`. Como vários painéis ficam visíveis ao mesmo tempo, cada
+ * um monta a sua tela a partir da própria `url`, sem `<router-outlet>`: o roteador só conhece uma
+ * rota ativa, e aqui cada painel precisa manter a sua.
+ *
+ * Mostra o quadrado de carregamento enquanto o componente chega, a tela quando ele chega, ou o
+ * aviso de "não encontrado" quando a url não leva a nenhuma rota com tela.
+ */
+class SpinePagePanelComponent {
+    constructor() {
+        this.text = inject(SPINE_MESSAGES).pagePanel;
+        this.url = input.required(...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+        /** Só o painel focado fala pela página inteira: visita recente, título da aba e rota no logger. */
+        this.isFocusedPanel = input(true, ...(ngDevMode ? [{ debugName: "isFocusedPanel" }] : /* istanbul ignore next */ []));
+        this.viewService = inject(ViewService);
+        this.distributor = inject(ComponentDistributorService);
+        this.logger = inject(LoggerService);
+        this.title = inject(Title);
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.component = signal(null, ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+        this.chain = signal(null, ...(ngDevMode ? [{ debugName: "chain" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const url = this.url();
+            void this.resolve(url);
+        });
+        // Com as abas mantidas vivas, o painel que recebe o foco de volta já tem a tela pronta; basta
+        // reaplicar o que só o focado faz, sem carregar nada de novo.
+        effect(() => {
+            if (this.isFocusedPanel() && this.chain())
+                this.afterResolved();
+        });
+    }
+    /** Cadeia de rotas da url (sem os nós que só agrupam) e o componente da última delas. */
+    async resolve(url) {
+        const chain = resolveEffectiveRouteChain(spineRoutesOf(this.viewService.currentView), (u) => this.viewService.getLevel(u), (u, level) => this.viewService.getUrlAtLevel(u, level), url);
+        this.chain.set(chain);
+        const leaf = chain?.at(-1) ?? null;
+        if (!leaf) {
+            this.component.set(null);
+            this.loading.set(false);
+            return;
+        }
+        const cached = componentCache.get(url);
+        if (cached) {
+            this.component.set(cached);
+            this.loading.set(false);
+            this.afterResolved();
+            return;
+        }
+        this.loading.set(true);
+        this.component.set(null);
+        const component = await this.distributor.getComponent(routerIdOf(leaf) ?? '', leaf.source_template_router_id);
+        // A url mudou enquanto o carregamento corria: este resultado já não interessa.
+        if (url !== this.url())
+            return;
+        componentCache.set(url, component);
+        this.component.set(component);
+        this.loading.set(false);
+        this.afterResolved();
+    }
+    /** O que acontece quando a tela do painel focado fica pronta. */
+    afterResolved() {
+        if (!this.isFocusedPanel())
+            return;
+        const chain = this.chain();
+        if (chain)
+            this.logger.setLogger(chain);
+        const leafName = chain?.at(-1)?.route_display_name;
+        if (leafName)
+            this.title.setTitle(leafName);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpinePagePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpinePagePanelComponent, isStandalone: true, selector: "spine-page-panel", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, isFocusedPanel: { classPropertyName: "isFocusedPanel", publicName: "isFocusedPanel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <spine-page-bar [chain]="chain()" [recordRecent]="isFocusedPanel()" />
+    <div class="spine-page-panel__content">
+      @if (loading()) {
+        <div class="spine-page-panel__loading"><hm-loading-square /></div>
+      } @else if (component(); as cmp) {
+        <ng-container [ngComponentOutlet]="cmp" />
+      } @else {
+        <div class="spine-page-panel__empty">
+          <hm-icon shape="search-magnify" size="xl" />
+          <p class="spine-page-panel__empty-title">{{ text.notFoundTitle }}</p>
+          <p class="spine-page-panel__empty-description">{{ text.notFoundText }}</p>
+        </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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpinePagePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-page-panel', imports: [NgComponentOutlet, LoadingSquareComponent, IconComponent, SpinePageBarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <spine-page-bar [chain]="chain()" [recordRecent]="isFocusedPanel()" />
+    <div class="spine-page-panel__content">
+      @if (loading()) {
+        <div class="spine-page-panel__loading"><hm-loading-square /></div>
+      } @else if (component(); as cmp) {
+        <ng-container [ngComponentOutlet]="cmp" />
+      } @else {
+        <div class="spine-page-panel__empty">
+          <hm-icon shape="search-magnify" size="xl" />
+          <p class="spine-page-panel__empty-title">{{ text.notFoundTitle }}</p>
+          <p class="spine-page-panel__empty-description">{{ text.notFoundText }}</p>
+        </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"] }]
+        }], ctorParameters: () => [], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: true }] }], isFocusedPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocusedPanel", required: false }] }] } });
+
+/**
+ * Em painéis NÃO focados do `hm-workspace`, um `<a href>`/`[routerLink]` clicado navegaria o
+ * `Router` de verdade — que só existe UM na aplicação, e está sempre atrelado ao painel FOCADO
+ * (ver `SpineWorkspaceNavService`). Sem isto, clicar num link dentro de um painel secundário (um
+ * item da sidebar, uma aba de submenu, um link de breadcrumb, qualquer `routerLink` dentro de uma
+ * tela de feature) navegaria a tela ERRADA — o painel focado, não o painel onde o clique
+ * aconteceu. Porte 1:1 do mesmo diretório do docs/website
+ * (`docs/website/src/app/workspace/panel-local-link.directive.ts`) — genérico, sem nada
+ * específico do site de documentação.
+ *
+ * Intercepta em fase de CAPTURA pra resolver a navegação LOCALMENTE antes do `RouterLink`
+ * conseguir agir. Abrir em nova aba (Ctrl/⌘ + clique, clique do meio) continua funcionando
+ * normalmente — só intercepta o clique comum.
+ */
+class PanelLocalLinkDirective {
+    constructor() {
+        /** `true` = intercepta (painel não-focado); `false` = deixa o `RouterLink` normal agir. */
+        this.appPanelLocalLink = input(false, ...(ngDevMode ? [{ debugName: "appPanelLocalLink" }] : /* istanbul ignore next */ []));
+        this.localNavigate = output();
+        const host = inject(ElementRef).nativeElement;
+        const destroyRef = inject(DestroyRef);
+        const onClick = (event) => {
+            if (!this.appPanelLocalLink())
+                return;
+            if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+                return;
+            const anchor = event.target.closest('a[href]');
+            if (!anchor || !host.contains(anchor))
+                return;
+            const href = anchor.getAttribute('href');
+            if (!href || !href.startsWith('/'))
+                return; // só rotas internas do próprio app
+            event.preventDefault();
+            event.stopPropagation();
+            this.localNavigate.emit(href);
+        };
+        host.addEventListener('click', onClick, true);
+        destroyRef.onDestroy(() => host.removeEventListener('click', onClick, true));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PanelLocalLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.24", type: PanelLocalLinkDirective, isStandalone: true, selector: "[appPanelLocalLink]", inputs: { appPanelLocalLink: { classPropertyName: "appPanelLocalLink", publicName: "appPanelLocalLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { localNavigate: "localNavigate" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PanelLocalLinkDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[appPanelLocalLink]' }]
+        }], ctorParameters: () => [], propDecorators: { appPanelLocalLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "appPanelLocalLink", required: false }] }], localNavigate: [{ type: i0.Output, args: ["localNavigate"] }] } });
+
+// Instância própria: não mexe nas opções globais do `marked` que o app possa usar.
+const parser = new Marked({ gfm: true, breaks: false, async: false });
+/**
+ * Renderiza Markdown (GFM) como HTML com a tipografia do design system. O texto é tratado como dado:
+ * o HTML gerado passa pelo DOMPurify antes de chegar ao DOM.
+ */
+class SpineMarkdownComponent {
+    constructor() {
+        /** Markdown cru. Vazio não desenha nada. */
+        this.content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        this.#sanitizer = inject(DomSanitizer);
+        this.html = computed(() => {
+            const source = this.content();
+            // Sem DOM (SSR) o DOMPurify não limpa nada; melhor não renderizar.
+            if (!source || !DOMPurify.isSupported)
+                return null;
+            const clean = DOMPurify.sanitize(parser.parse(source));
+            return this.#sanitizer.bypassSecurityTrustHtml(clean);
+        }, ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+    }
+    #sanitizer;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineMarkdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpineMarkdownComponent, isStandalone: true, selector: "spine-markdown", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (html(); as markup) {
+      <div class="spine-md" [innerHTML]="markup"></div>
+    }
+  `, isInline: true, styles: [".spine-md{color:var(--hm-text);font-size:var(--hm-font-size-sm);line-height:var(--hm-line-height-normal);overflow-wrap:anywhere}.spine-md>:first-child{margin-block-start:0}.spine-md>:last-child{margin-block-end:0}.spine-md :is(h1,h2,h3,h4,h5,h6){margin-block:var(--hm-space-lg) var(--hm-space-sm);color:var(--hm-text);font-weight:var(--hm-font-weight-semibold);line-height:var(--hm-line-height-snug)}.spine-md h1{font-size:var(--hm-font-size-xxl)}.spine-md h2{font-size:var(--hm-font-size-xl)}.spine-md h3{font-size:var(--hm-font-size-lg)}.spine-md :is(h4,h5,h6){font-size:var(--hm-font-size-md)}.spine-md :is(p,ul,ol,blockquote,pre,table){margin-block:0 var(--hm-space-md)}.spine-md :is(ul,ol){padding-inline-start:var(--hm-space-lg)}.spine-md li+li{margin-block-start:var(--hm-space-micro)}.spine-md blockquote{margin-inline:0;padding-inline-start:var(--hm-space-md);border-inline-start:var(--hm-border-thin) solid var(--hm-divider);color:var(--hm-muted)}.spine-md code{padding-inline:var(--hm-space-micro);border-radius:var(--hm-radius-micro);background:var(--hm-surface-raised);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-xs)}.spine-md pre{padding:var(--hm-space-sm) var(--hm-space-md);border-radius:var(--hm-radius);background:var(--hm-surface-raised);white-space:pre-wrap}.spine-md pre code{padding:0;background:none}.spine-md table{display:block;max-inline-size:100%;overflow-x:auto;border-collapse:collapse;overflow-wrap:normal}.spine-md :is(th,td){padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-divider);text-align:start;vertical-align:top}.spine-md th{background:var(--hm-surface-raised);font-weight:var(--hm-font-weight-semibold)}.spine-md hr{margin-block:var(--hm-space-lg);border:0;border-block-start:var(--hm-border-hairline) solid var(--hm-divider)}.spine-md a{color:var(--hm-accent);text-decoration:underline;text-underline-offset:.2em}.spine-md a:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-hairline);border-radius:var(--hm-radius-micro)}.spine-md img{max-inline-size:100%;block-size:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineMarkdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-markdown', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    @if (html(); as markup) {
+      <div class="spine-md" [innerHTML]="markup"></div>
+    }
+  `, styles: [".spine-md{color:var(--hm-text);font-size:var(--hm-font-size-sm);line-height:var(--hm-line-height-normal);overflow-wrap:anywhere}.spine-md>:first-child{margin-block-start:0}.spine-md>:last-child{margin-block-end:0}.spine-md :is(h1,h2,h3,h4,h5,h6){margin-block:var(--hm-space-lg) var(--hm-space-sm);color:var(--hm-text);font-weight:var(--hm-font-weight-semibold);line-height:var(--hm-line-height-snug)}.spine-md h1{font-size:var(--hm-font-size-xxl)}.spine-md h2{font-size:var(--hm-font-size-xl)}.spine-md h3{font-size:var(--hm-font-size-lg)}.spine-md :is(h4,h5,h6){font-size:var(--hm-font-size-md)}.spine-md :is(p,ul,ol,blockquote,pre,table){margin-block:0 var(--hm-space-md)}.spine-md :is(ul,ol){padding-inline-start:var(--hm-space-lg)}.spine-md li+li{margin-block-start:var(--hm-space-micro)}.spine-md blockquote{margin-inline:0;padding-inline-start:var(--hm-space-md);border-inline-start:var(--hm-border-thin) solid var(--hm-divider);color:var(--hm-muted)}.spine-md code{padding-inline:var(--hm-space-micro);border-radius:var(--hm-radius-micro);background:var(--hm-surface-raised);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-xs)}.spine-md pre{padding:var(--hm-space-sm) var(--hm-space-md);border-radius:var(--hm-radius);background:var(--hm-surface-raised);white-space:pre-wrap}.spine-md pre code{padding:0;background:none}.spine-md table{display:block;max-inline-size:100%;overflow-x:auto;border-collapse:collapse;overflow-wrap:normal}.spine-md :is(th,td){padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-divider);text-align:start;vertical-align:top}.spine-md th{background:var(--hm-surface-raised);font-weight:var(--hm-font-weight-semibold)}.spine-md hr{margin-block:var(--hm-space-lg);border:0;border-block-start:var(--hm-border-hairline) solid var(--hm-divider)}.spine-md a{color:var(--hm-accent);text-decoration:underline;text-underline-offset:.2em}.spine-md a:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-hairline);border-radius:var(--hm-radius-micro)}.spine-md img{max-inline-size:100%;block-size:auto}\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
+
+let sequence = 0;
+/** Compara sem acento e sem caixa. */
+function fold(text) {
+    return text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
+}
+/**
+ * Modal de documentação das telas: índice (com busca) à esquerda e leitura à direita. Montado uma vez
+ * pelo `spine-layout`; abrir, fechar e o que se lê vêm todos do `SpineDocsService`.
+ */
+class SpineDocsComponent {
+    constructor() {
+        this.docs = inject(SpineDocsService);
+        this.text = inject(SPINE_MESSAGES);
+        this.query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        this.groupId = `spine-docs-group-${++sequence}-`;
+        this.viewOptions = computed(() => [
+            { value: 'usage', label: this.text.docs.usage },
+            { value: 'technical', label: this.text.docs.technical },
+        ], ...(ngDevMode ? [{ debugName: "viewOptions" }] : /* istanbul ignore next */ []));
+        this.filtered = computed(() => {
+            const needle = fold(this.query().trim());
+            const groups = this.docs.index();
+            if (!needle)
+                return groups;
+            return groups
+                .map((group) => ({
+                title: group.title,
+                entries: group.entries.filter((entry) => fold(`${entry.title} ${group.title}`).includes(needle)),
+            }))
+                .filter((group) => group.entries.length > 0);
+        }, ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+        this.readingKey = computed(() => [`${this.docs.current()?.id ?? ''}:${this.docs.view()}`], ...(ngDevMode ? [{ debugName: "readingKey" }] : /* istanbul ignore next */ []));
+    }
+    select(entry) {
+        void this.docs.open(entry);
+    }
+    switchView(view) {
+        void this.docs.show(view === 'technical' ? 'technical' : 'usage');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineDocsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpineDocsComponent, isStandalone: true, selector: "spine-docs", ngImport: i0, template: `
+    @if (docs.isOpen()) {
+      <hm-modal [heading]="text.docs.heading" size="large" [open]="true" (closed)="docs.close()">
+        <div class="layout">
+          <nav class="index" [attr.aria-label]="text.docs.index">
+            <input
+              class="filter"
+              type="search"
+              [placeholder]="text.docs.search"
+              [attr.aria-label]="text.docs.search"
+              [value]="query()"
+              (input)="query.set($any($event.target).value)"
+            />
+            @for (group of filtered(); track group.title; let g = $index) {
+              <p class="group-title" [id]="groupId + g">{{ group.title }}</p>
+              <ul class="entries" [attr.aria-labelledby]="groupId + g">
+                @for (entry of group.entries; track entry.id) {
+                  <li>
+                    <button
+                      type="button"
+                      class="entry"
+                      [class.entry--active]="entry.id === docs.current()?.id"
+                      [attr.aria-current]="entry.id === docs.current()?.id ? 'true' : null"
+                      (click)="select(entry)"
+                    >
+                      {{ entry.title }}
+                    </button>
+                  </li>
+                }
+              </ul>
+            } @empty {
+              <p class="note">{{ query().trim() ? text.docs.noMatch : text.docs.empty }}</p>
+            }
+          </nav>
+
+          <section class="reader">
+            @if (docs.current(); as entry) {
+              <h3 class="reader-title">{{ entry.title }}</h3>
+              @if (docs.showTechnical()) {
+                <hm-segmented-control
+                  [label]="text.docs.view"
+                  [options]="viewOptions()"
+                  [value]="docs.view()"
+                  (valueChange)="switchView($event)"
+                />
+              }
+              <!-- A chave muda com o documento ou a visão: o bloco é recriado e entra de novo. -->
+              @for (key of readingKey(); track key) {
+                <div class="reading">
+                  @if (docs.loading()) {
+                    <hm-skeleton shape="text" [count]="6" [label]="text.docs.loading" />
+                  } @else if (docs.error()) {
+                    <hm-alert variant="error">{{ docs.error() }}</hm-alert>
+                  } @else {
+                    <spine-markdown [content]="docs.content()" />
+                  }
+                </div>
+              }
+            } @else {
+              <p class="note">{{ text.docs.invite }}</p>
+            }
+          </section>
+        </div>
+      </hm-modal>
+    }
+  `, isInline: true, styles: [".layout{display:grid;grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);gap:var(--hm-space-lg);block-size:min(70vh,48rem);min-block-size:0}.index,.reader{min-block-size:0;overflow-y:auto;overscroll-behavior:contain}.index{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding-inline-end:var(--hm-space-md);border-inline-end:var(--hm-border-hairline) solid var(--hm-divider)}.filter{box-sizing:border-box;inline-size:100%;min-block-size:var(--hm-control-height);margin-block-end:var(--hm-space-sm);padding-inline:var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm)}.filter::placeholder{color:var(--hm-placeholder)}.filter:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-hairline)}.group-title{margin:var(--hm-space-sm) 0 0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);text-transform:uppercase;letter-spacing:.04em}.entries{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.entry{inline-size:100%;padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid transparent;border-radius:var(--hm-radius-control);background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;cursor:pointer;transition:background-color var(--hm-duration-quick) var(--hm-ease)}.entry:hover{background:var(--hm-hover)}.entry:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.entry--active{background:var(--hm-accent-subtle);color:var(--hm-accent-strong);font-weight:var(--hm-font-weight-semibold)}.reader{display:flex;flex-direction:column;gap:var(--hm-space-md);align-items:stretch}.reader-title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg);font-weight:var(--hm-font-weight-semibold)}.reading{animation:spine-docs-enter var(--hm-duration-standard) var(--hm-ease-decelerate)}.note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}@keyframes spine-docs-enter{0%{opacity:0}to{opacity:1}}@media(max-width:767px){.layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,2fr) minmax(0,3fr)}.index{padding-inline-end:0;padding-block-end:var(--hm-space-md);border-inline-end:0;border-block-end:var(--hm-border-hairline) solid var(--hm-divider)}}@media(prefers-reduced-motion:reduce){.reading{animation:none}.entry{transition:none}}@media(forced-colors:active){.entry--active{border-color:Highlight}}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: SkeletonComponent, selector: "hm-skeleton", inputs: ["shape", "count", "label"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: SpineMarkdownComponent, selector: "spine-markdown", inputs: ["content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineDocsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-docs', imports: [ModalComponent, AlertComponent, SkeletonComponent, SegmentedControlComponent, SpineMarkdownComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (docs.isOpen()) {
+      <hm-modal [heading]="text.docs.heading" size="large" [open]="true" (closed)="docs.close()">
+        <div class="layout">
+          <nav class="index" [attr.aria-label]="text.docs.index">
+            <input
+              class="filter"
+              type="search"
+              [placeholder]="text.docs.search"
+              [attr.aria-label]="text.docs.search"
+              [value]="query()"
+              (input)="query.set($any($event.target).value)"
+            />
+            @for (group of filtered(); track group.title; let g = $index) {
+              <p class="group-title" [id]="groupId + g">{{ group.title }}</p>
+              <ul class="entries" [attr.aria-labelledby]="groupId + g">
+                @for (entry of group.entries; track entry.id) {
+                  <li>
+                    <button
+                      type="button"
+                      class="entry"
+                      [class.entry--active]="entry.id === docs.current()?.id"
+                      [attr.aria-current]="entry.id === docs.current()?.id ? 'true' : null"
+                      (click)="select(entry)"
+                    >
+                      {{ entry.title }}
+                    </button>
+                  </li>
+                }
+              </ul>
+            } @empty {
+              <p class="note">{{ query().trim() ? text.docs.noMatch : text.docs.empty }}</p>
+            }
+          </nav>
+
+          <section class="reader">
+            @if (docs.current(); as entry) {
+              <h3 class="reader-title">{{ entry.title }}</h3>
+              @if (docs.showTechnical()) {
+                <hm-segmented-control
+                  [label]="text.docs.view"
+                  [options]="viewOptions()"
+                  [value]="docs.view()"
+                  (valueChange)="switchView($event)"
+                />
+              }
+              <!-- A chave muda com o documento ou a visão: o bloco é recriado e entra de novo. -->
+              @for (key of readingKey(); track key) {
+                <div class="reading">
+                  @if (docs.loading()) {
+                    <hm-skeleton shape="text" [count]="6" [label]="text.docs.loading" />
+                  } @else if (docs.error()) {
+                    <hm-alert variant="error">{{ docs.error() }}</hm-alert>
+                  } @else {
+                    <spine-markdown [content]="docs.content()" />
+                  }
+                </div>
+              }
+            } @else {
+              <p class="note">{{ text.docs.invite }}</p>
+            }
+          </section>
+        </div>
+      </hm-modal>
+    }
+  `, styles: [".layout{display:grid;grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);gap:var(--hm-space-lg);block-size:min(70vh,48rem);min-block-size:0}.index,.reader{min-block-size:0;overflow-y:auto;overscroll-behavior:contain}.index{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding-inline-end:var(--hm-space-md);border-inline-end:var(--hm-border-hairline) solid var(--hm-divider)}.filter{box-sizing:border-box;inline-size:100%;min-block-size:var(--hm-control-height);margin-block-end:var(--hm-space-sm);padding-inline:var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm)}.filter::placeholder{color:var(--hm-placeholder)}.filter:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-hairline)}.group-title{margin:var(--hm-space-sm) 0 0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);text-transform:uppercase;letter-spacing:.04em}.entries{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.entry{inline-size:100%;padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid transparent;border-radius:var(--hm-radius-control);background:transparent;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;cursor:pointer;transition:background-color var(--hm-duration-quick) var(--hm-ease)}.entry:hover{background:var(--hm-hover)}.entry:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:calc(var(--hm-border-thin) * -1)}.entry--active{background:var(--hm-accent-subtle);color:var(--hm-accent-strong);font-weight:var(--hm-font-weight-semibold)}.reader{display:flex;flex-direction:column;gap:var(--hm-space-md);align-items:stretch}.reader-title{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-lg);font-weight:var(--hm-font-weight-semibold)}.reading{animation:spine-docs-enter var(--hm-duration-standard) var(--hm-ease-decelerate)}.note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}@keyframes spine-docs-enter{0%{opacity:0}to{opacity:1}}@media(max-width:767px){.layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,2fr) minmax(0,3fr)}.index{padding-inline-end:0;padding-block-end:var(--hm-space-md);border-inline-end:0;border-block-end:var(--hm-border-hairline) solid var(--hm-divider)}}@media(prefers-reduced-motion:reduce){.reading{animation:none}.entry{transition:none}}@media(forced-colors:active){.entry--active{border-color:Highlight}}\n"] }]
+        }] });
+
+/**
+ * Aviso discreto de conexão no topo do shell, sobre o `connectionState$` e o `reauthorizationRequired$` do
+ * `@orfeu/angular`. A sessão nunca cai por nada disto (sem rede, Argos fora do ar, refresh recusado):
+ * a lib segue tentando sozinha e este banner só conta o que está acontecendo.
+ *
+ * - `offline`: aviso (`warning`) — Argos inalcançável; a lib tenta de novo com backoff e na volta da rede/foco.
+ * - `reconnecting` / `reauthorizing`: informativo (`info`), some quando volta a `online`.
+ * - `reauthorizationRequired$`: o Argos recusou a renovação e a reautorização automática não aconteceu
+ *   (desligada, outra aba cuidando ou proteção contra loop). Oferece "Entrar novamente", que chama
+ *   `authorize(urlAtual)` — o login volta para a mesma tela. Nunca chama `logout()`.
+ *
+ * `hm-alert` em `appearance="banner"` e `size="small"`: faixa de largura total, sem cantos, com os tokens
+ * de status do Hermes (`--hm-warning-*`/`--hm-info-*`); `role="status"` (não interrompe o leitor de tela).
+ */
+class SpineConnectionBannerComponent {
+    constructor() {
+        this.text = inject(SPINE_MESSAGES).session;
+        this.auth = inject(AuthorizationService);
+        this.router = inject(Router);
+        this.state = toSignal(this.auth.connectionState$, { initialValue: this.auth.connectionState });
+        this.reauthRequired = toSignal(this.auth.reauthorizationRequired$, {
+            initialValue: this.auth.reauthorizationRequired,
+        });
+        /** O que mostrar: a decisão pendente da pessoa vence o estado da conexão; `online` não mostra nada. */
+        this.notice = computed(() => (this.reauthRequired() ? 'reauthorizationRequired' : this.state()), ...(ngDevMode ? [{ debugName: "notice" }] : /* istanbul ignore next */ []));
+    }
+    signInAgain() {
+        void this.auth.authorize(this.router.url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineConnectionBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpineConnectionBannerComponent, isStandalone: true, selector: "spine-connection-banner", ngImport: i0, template: `
+    @switch (notice()) {
+      @case ('reauthorizationRequired') {
+        <hm-alert appearance="banner" size="small" variant="warning">
+          {{ text.reauthorizationRequired }}
+          <hm-button actions emphasis="medium" size="small" icon="login" (clicked)="signInAgain()">{{ text.signInAgain }}</hm-button>
+        </hm-alert>
+      }
+      @case ('offline') {
+        <hm-alert appearance="banner" size="small" variant="warning">{{ text.offline }}</hm-alert>
+      }
+      @case ('reconnecting') {
+        <hm-alert appearance="banner" size="small" variant="info">{{ text.reconnecting }}</hm-alert>
+      }
+      @case ('reauthorizing') {
+        <hm-alert appearance="banner" size="small" variant="info">{{ text.reauthorizing }}</hm-alert>
+      }
+    }
+  `, isInline: true, styles: [":host{display:block;flex:none}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineConnectionBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-connection-banner', imports: [AlertComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @switch (notice()) {
+      @case ('reauthorizationRequired') {
+        <hm-alert appearance="banner" size="small" variant="warning">
+          {{ text.reauthorizationRequired }}
+          <hm-button actions emphasis="medium" size="small" icon="login" (clicked)="signInAgain()">{{ text.signInAgain }}</hm-button>
+        </hm-alert>
+      }
+      @case ('offline') {
+        <hm-alert appearance="banner" size="small" variant="warning">{{ text.offline }}</hm-alert>
+      }
+      @case ('reconnecting') {
+        <hm-alert appearance="banner" size="small" variant="info">{{ text.reconnecting }}</hm-alert>
+      }
+      @case ('reauthorizing') {
+        <hm-alert appearance="banner" size="small" variant="info">{{ text.reauthorizing }}</hm-alert>
+      }
+    }
+  `, styles: [":host{display:block;flex:none}\n"] }]
+        }] });
+
+/**
+ * Shell do spine — MESMA estrutura do `docs/website`'s `app.component.html`/`.scss` (decisão de
+ * 2026-09-28, ver `hefesto-migration-plan.md`): `.shell` com altura de viewport de verdade
+ * (`100dvh`, não `%` cascateado — `@trismegisto/core` não fixa altura de `html`/`body`, é
+ * responsabilidade de quem consome, mesmo tanto quanto o docs faz no próprio `styles.scss`),
+ * `hm-header` (utilitários — tema/densidade/apps/perfil, nunca navegação de página) + `.body`
+ * (`hm-sidebar` fixa + `.main` com `hm-workspace`). **Sem barra de breadcrumb própria** — isso
+ * era resíduo do spine antigo (`spine-navigation`), removido: o docs não tem uma, a navegação
+ * inteira mora na sidebar. Entre o header e o corpo fica o `spine-connection-banner` (aviso de conexão
+ * do `@orfeu/angular`, vazio quando `online`).
+ *
+ * O `<router-outlet>` que sobra aqui é só pra `/no-permission` (a única rota do shell com
+ * `component` de verdade — o resto da árvore do backend nunca passa pelo `Router` pra renderizar,
+ * só pra `ViewGuard` confirmar que a URL resolve). Fica sempre montado (nunca dentro de um `@if`)
+ * e escondido via `[hidden]` quando não é a rota ativa — destruir/recriar o outlet num `@if`
+ * arriscaria perder a ativação da rota se a navegação e a checagem de `isNoPermission` não
+ * corressem na mesma volta de detecção de mudanças.
+ */
+class LayoutComponent {
+    constructor(router, theme, auth, shortcuts, onboarding, news) {
+        this.router = router;
+        this.theme = theme;
+        this.auth = auth;
+        this.shortcuts = shortcuts;
+        this.onboarding = onboarding;
+        this.news = news;
+        /** Aplica no boot o idioma e o fuso que a pessoa escolheu nas configurações. */
+        this.preferences = inject(SpinePreferencesService);
+        this.workspace = inject(SpineWorkspaceNavService);
+        this.settings = inject(SpineSettingsService);
+        this.isNoPermission = this.matchesNoPermission(this.router.url);
+        this.router.events.pipe(filter((e) => e instanceof NavigationEnd))
+            .subscribe(e => { this.isNoPermission = this.matchesNoPermission(e.urlAfterRedirects); });
+    }
+    matchesNoPermission(url) {
+        return url.split(/[?#]/)[0] === '/no-permission';
+    }
+    ngOnInit() {
+        // Liga os atalhos de teclado globais às ações reais do sistema.
+        this.shortcuts.setActions({
+            navigate: (url) => this.router.navigateByUrl(url),
+            toggleTheme: () => this.theme.setTheme(this.theme.current === 'light' ? 'dark' : 'light'),
+            toggleFullscreen: () => this.toggleFullscreen(),
+            logout: () => this.auth.logout(),
+            openSettings: () => this.settings.toggle(),
+        });
+        // 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
+        // cada F5 e acompanha a URL copiada pra outra pessoa.
+        const params = new URLSearchParams(window.location.search);
+        if (params.has('settings')) {
+            this.settings.open(params.get('settings') ?? '');
+            void this.router.navigate([], { queryParams: { settings: null }, queryParamsHandling: 'merge', replaceUrl: true });
+        }
+        // Onboarding interativo na primeira entrada nesta máquina.
+        this.onboarding.maybeStart();
+        // Novidades do app (provideSpineNews): abrem sozinhas uma vez, depois do tour.
+        this.news.scheduleOnEntry();
+    }
+    onLocalNavigate(panelId, href) {
+        this.workspace.navigateLocally(panelId, href);
+    }
+    toggleFullscreen() {
+        if (!document.fullscreenElement) {
+            document.documentElement.requestFullscreen?.().catch(() => { });
+        }
+        else {
+            document.exitFullscreen?.();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LayoutComponent, deps: [{ token: i3.Router }, { token: i2$1.ThemeService }, { token: i1.AuthorizationService }, { token: ShortcutService }, { token: OnboardingService }, { token: SpineNewsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: LayoutComponent, isStandalone: true, selector: "spine-layout", ngImport: i0, template: `
+    <div class="shell">
+      <spine-header></spine-header>
+      <!-- Aviso de conexão do @orfeu/angular (offline/reconectando/reautorizando): faixa entre o header e o corpo. -->
+      <spine-connection-banner />
+      <div class="body">
+        @if (!isNoPermission) {
+          <spine-sidebar class="sidebar" data-tour="nav"></spine-sidebar>
+        }
+        <div class="main" role="main">
+          <div [hidden]="isNoPermission" class="workspace-area">
+            <hm-workspace data-tour="tabs" [keepAlive]="true" [providedStore]="workspace.store" (newTabRequested)="workspace.openNewTab($event)">
+              <ng-template #content let-tab let-panelId="panelId" let-active="active">
+                <div
+                  class="panel-content"
+                  [appPanelLocalLink]="panelId !== workspace.focusedPanelId()"
+                  (localNavigate)="onLocalNavigate(panelId, $event)"
+                >
+                  <spine-page-panel [url]="tab.id" [isFocusedPanel]="active && panelId === workspace.focusedPanelId()" />
+                </div>
+              </ng-template>
+            </hm-workspace>
+          </div>
+          <router-outlet></router-outlet>
+        </div>
+      </div>
+    </div>
+    <spine-notification></spine-notification>
+    <spine-side-panel />
+    <spine-modal />
+    <spine-shortcuts-cheatsheet></spine-shortcuts-cheatsheet>
+    <spine-settings-panel></spine-settings-panel>
+    <spine-docs />
+    <spine-news />
+    <spine-onboarding-overlay></spine-onboarding-overlay>
+  `, isInline: true, styles: [":host{display:block}.shell{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--hm-surface);color:var(--hm-text)}.body{position:relative;display:flex;flex:1;min-height:0;overflow:hidden}.main{display:flex;flex:1;min-width:0;flex-direction:column}.workspace-area{flex:1;min-height:0;display:flex;flex-direction:column;--hm-tab-strip-bg: var(--hm-surface);--hm-tab-active-bg: var(--hm-surface-raised)}hm-workspace{flex:1;min-height:0}.panel-content{display:flex;flex-direction:column;height:100%;min-height:0}\n"], dependencies: [{ kind: "component", type: SpineNewsComponent, selector: "spine-news" }, { kind: "component", type: SpineDocsComponent, selector: "spine-docs" }, { kind: "component", type: HeaderComponent, selector: "spine-header" }, { kind: "component", type: SidebarComponent, selector: "spine-sidebar" }, { kind: "component", type: SpineConnectionBannerComponent, selector: "spine-connection-banner" }, { kind: "component", type: SpinePagePanelComponent, selector: "spine-page-panel", inputs: ["url", "isFocusedPanel"] }, { kind: "directive", type: PanelLocalLinkDirective, selector: "[appPanelLocalLink]", inputs: ["appPanelLocalLink"], outputs: ["localNavigate"] }, { kind: "component", type: WorkspaceComponent, selector: "hm-workspace", inputs: ["initialTabs", "initialActiveId", "keepAlive", "label", "providedStore"], outputs: ["stateChange", "newTabRequested"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ModalComponent$1, selector: "spine-modal" }, { kind: "component", type: NotificationComponent, selector: "spine-notification" }, { kind: "component", type: SidePanelComponent, selector: "spine-side-panel" }, { kind: "component", type: OnboardingOverlayComponent, selector: "spine-onboarding-overlay" }, { kind: "component", type: ShortcutsCheatsheetComponent, selector: "spine-shortcuts-cheatsheet" }, { kind: "component", type: SettingsPanelComponent, selector: "spine-settings-panel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-layout', imports: [
+                        SpineNewsComponent,
+                        SpineDocsComponent,
+                        HeaderComponent,
+                        SidebarComponent,
+                        SpineConnectionBannerComponent,
+                        SpinePagePanelComponent,
+                        PanelLocalLinkDirective,
+                        WorkspaceComponent,
+                        RouterOutlet,
+                        ModalComponent$1,
+                        NotificationComponent,
+                        SidePanelComponent,
+                        OnboardingOverlayComponent,
+                        ShortcutsCheatsheetComponent,
+                        SettingsPanelComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="shell">
+      <spine-header></spine-header>
+      <!-- Aviso de conexão do @orfeu/angular (offline/reconectando/reautorizando): faixa entre o header e o corpo. -->
+      <spine-connection-banner />
+      <div class="body">
+        @if (!isNoPermission) {
+          <spine-sidebar class="sidebar" data-tour="nav"></spine-sidebar>
+        }
+        <div class="main" role="main">
+          <div [hidden]="isNoPermission" class="workspace-area">
+            <hm-workspace data-tour="tabs" [keepAlive]="true" [providedStore]="workspace.store" (newTabRequested)="workspace.openNewTab($event)">
+              <ng-template #content let-tab let-panelId="panelId" let-active="active">
+                <div
+                  class="panel-content"
+                  [appPanelLocalLink]="panelId !== workspace.focusedPanelId()"
+                  (localNavigate)="onLocalNavigate(panelId, $event)"
+                >
+                  <spine-page-panel [url]="tab.id" [isFocusedPanel]="active && panelId === workspace.focusedPanelId()" />
+                </div>
+              </ng-template>
+            </hm-workspace>
+          </div>
+          <router-outlet></router-outlet>
+        </div>
+      </div>
+    </div>
+    <spine-notification></spine-notification>
+    <spine-side-panel />
+    <spine-modal />
+    <spine-shortcuts-cheatsheet></spine-shortcuts-cheatsheet>
+    <spine-settings-panel></spine-settings-panel>
+    <spine-docs />
+    <spine-news />
+    <spine-onboarding-overlay></spine-onboarding-overlay>
+  `, styles: [":host{display:block}.shell{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--hm-surface);color:var(--hm-text)}.body{position:relative;display:flex;flex:1;min-height:0;overflow:hidden}.main{display:flex;flex:1;min-width:0;flex-direction:column}.workspace-area{flex:1;min-height:0;display:flex;flex-direction:column;--hm-tab-strip-bg: var(--hm-surface);--hm-tab-active-bg: var(--hm-surface-raised)}hm-workspace{flex:1;min-height:0}.panel-content{display:flex;flex-direction:column;height:100%;min-height:0}\n"] }]
+        }], ctorParameters: () => [{ type: i3.Router }, { type: i2$1.ThemeService }, { type: i1.AuthorizationService }, { type: ShortcutService }, { type: OnboardingService }, { type: SpineNewsService }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppLauncherComponent, HeaderComponent, LayoutComponent, OnboardingOverlayComponent, OnboardingService, SPINE_BRAND, SPINE_SETTINGS_KEYS, SPINE_SETTINGS_SECTIONS, SettingsPanelComponent, ShortcutService, ShortcutsCheatsheetComponent, SidebarComponent, SpineAppTokensService, SpineBrandComponent, SpineConnectionBannerComponent, SpineDocsComponent, SpineDocsService, SpineMarkdownComponent, SpineNewsComponent, SpineNewsService, SpineSettingsService, findTourTarget, provideSettingsSection };
+//# sourceMappingURL=trismegisto-spine-layout.mjs.map