@meshmakers/shared-ui 3.4.1480 → 3.5.0

package/fesm2022/meshmakers-shared-ui-shell.mjs

@@ -0,0 +1,1738 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, signal, Injectable, ElementRef, ChangeDetectorRef, input, output, DestroyRef, effect, untracked, ChangeDetectionStrategy, Component, afterNextRender, afterRenderEffect, HostListener } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd } from '@angular/router';
+import { CommandService, CommandSettingsService } from '@meshmakers/shared-services';
+import { filter } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { NgTemplateOutlet } from '@angular/common';
+import { SVGIconComponent } from '@progress/kendo-angular-icons';
+
+/** English defaults of {@link ShellMessages}. */
+const DEFAULT_SHELL_MESSAGES = {
+    opensInNewTab: '(opens in a new tab)',
+    railLabel: 'Areas',
+    navBadge: '{count} open',
+    navItemWithBadge: '{label}, {badge}',
+    backTo: 'Back to {target}',
+    statusChips: 'Status',
+    areaPages: '{area} pages',
+    areaCategories: '{area} categories',
+    allOfArea: 'All {area}',
+    modeSwitch: 'Mode',
+    searchAriaLabel: 'Search or run a command',
+    search: 'Search',
+    assistant: 'Assistant',
+    signIn: 'Sign in',
+    signOut: 'Sign out',
+    accountAndPreferences: 'Account and preferences',
+    accountAndPreferencesOf: 'Account and preferences of {name}',
+    theme: 'Theme',
+    themeSystem: 'System',
+    themeLight: 'Light',
+    themeDark: 'Dark',
+    density: 'Density',
+    language: 'Language',
+    manageProfile: 'Manage profile',
+    version: 'Version {version}',
+    environmentProduction: 'Production',
+    environmentProductionShort: 'Prod',
+    environmentStaging: 'Staging',
+    environmentStagingShort: 'Stage',
+    environmentDevelopment: 'Development',
+    environmentDevelopmentShort: 'Dev',
+    environmentTesting: 'Testing',
+    environmentTestingShort: 'Test',
+    environmentUnknown: 'Environment unknown',
+    environmentUnknownShort: 'Env?',
+    greetingMorning: 'Good morning',
+    greetingAfternoon: 'Good afternoon',
+    greetingEvening: 'Good evening',
+    greetingWithName: '{greeting}, {name}',
+    tenant: 'Tenant',
+};
+/**
+ * App-wide translations of the shell. Partial: members left out keep their English default.
+ */
+const SHELL_MESSAGES = new InjectionToken('SHELL_MESSAGES');
+/**
+ * Merges message overrides over {@link DEFAULT_SHELL_MESSAGES}, later sources winning.
+ * Members that are missing, `undefined` or `null` keep the earlier value, so a host compiled
+ * against an older `ShellMessages` shape never renders an empty label.
+ */
+function resolveShellMessages(...overrides) {
+    const resolved = { ...DEFAULT_SHELL_MESSAGES };
+    for (const messages of overrides) {
+        if (!messages) {
+            continue;
+        }
+        for (const key of Object.keys(messages)) {
+            const value = messages[key];
+            if (value !== undefined && value !== null) {
+                resolved[key] = value;
+            }
+        }
+    }
+    return resolved;
+}
+/** Replaces `{name}` placeholders; unknown placeholders stay as they are. */
+function formatShellMessage(message, values) {
+    return message.replace(/\{(\w+)\}/g, (match, key) => Object.prototype.hasOwnProperty.call(values, key) ? String(values[key]) : match);
+}
+/**
+ * The resolved messages of a shell component: {@link SHELL_MESSAGES} merged with the
+ * component's `messages` input (the input wins). Call it in an injection context.
+ * @internal
+ */
+function shellMessages(input) {
+    const injected = inject(SHELL_MESSAGES, { optional: true });
+    return computed(() => resolveShellMessages(injected, input()));
+}
+
+/**
+ * Ids and keys shared by the host's command tree (`CommandSettingsService`), the rail,
+ * the space shell and route data. One definition feeds all of them:
+ *
+ * - A rail area is a top-level command item with the id `area-<space>`.
+ * - A tab is a direct child of an area with the id `<space>-<tab>`.
+ * - Routes may carry `data: { space: '<space>', tab: '<tab>' }`; the shell uses
+ *   it where the URL alone does not match a navigation entry.
+ * - A top-level separator with the id {@link RAIL_BOTTOM_SEPARATOR_ID} moves the
+ *   areas after it to the bottom of the rail (e.g. Settings).
+ *
+ * The space names themselves belong to the host (e.g. `'data' | 'integration' | …`).
+ */
+const AREA_ID_PREFIX = 'area-';
+/** Id of the separator in front of the rail's bottom block (Settings). */
+const RAIL_BOTTOM_SEPARATOR_ID = 'rail-bottom';
+function areaId(space) {
+    return `${AREA_ID_PREFIX}${space}`;
+}
+/** The space of an area id (`area-data` → `data`), or null for any other id. */
+function spaceOfAreaId(id) {
+    return id.startsWith(AREA_ID_PREFIX) ? id.substring(AREA_ID_PREFIX.length) : null;
+}
+function tabId(space, tab) {
+    return `${space}-${tab}`;
+}
+/**
+ * The space whose pages use the settings side navigation (`mm-settings-side-nav`) instead
+ * of the tab strip. Default `'settings'` (area id `area-settings`); provide `null` for a
+ * host without a settings space.
+ */
+const SHELL_SETTINGS_SPACE = new InjectionToken('SHELL_SETTINGS_SPACE', {
+    providedIn: 'root',
+    factory: () => 'settings',
+});
+
+/**
+ * The shell's view of the navigation: turns the flat, visibility-filtered
+ * item list of the CommandService into a tree (rail areas → tabs → nested
+ * entries) and works out which area and tab are active.
+ *
+ * The active area comes from the route's `data.space` when it names an area
+ * of the current mode, otherwise from the area that holds the selected
+ * entry. The active tab likewise comes from `data.tab` (matched as
+ * `<space>-<tab>`) or from the selection. URLs never change for the shell.
+ */
+class ShellNavigationService {
+    commandService = inject(CommandService);
+    commandSettings = inject(CommandSettingsService);
+    router = inject(Router);
+    settingsSpace = inject(SHELL_SETTINGS_SPACE);
+    items = toSignal(this.commandService.drawerItems, { initialValue: [] });
+    _routeData = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_routeData" }] : /* istanbul ignore next */ []));
+    routeData = this._routeData.asReadonly();
+    tree = computed(() => ShellNavigationService.buildTree(this.items(), this.collectKinds()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+    /** Rail areas above the bottom separator. */
+    topAreas = computed(() => this.tree().top, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "topAreas" }] : /* istanbul ignore next */ []));
+    /** Rail areas pinned to the bottom (Settings). */
+    bottomAreas = computed(() => this.tree().bottom, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bottomAreas" }] : /* istanbul ignore next */ []));
+    activeArea = computed(() => {
+        const areas = [...this.topAreas(), ...this.bottomAreas()];
+        const space = this._routeData().space;
+        if (space) {
+            const fromRoute = areas.find(area => area.id === areaId(space));
+            if (fromRoute) {
+                return fromRoute;
+            }
+        }
+        return areas.find(area => area.active) ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeArea" }] : /* istanbul ignore next */ []));
+    activeTab = computed(() => {
+        const area = this.activeArea();
+        if (!area) {
+            return null;
+        }
+        const tab = this._routeData().tab;
+        const space = spaceOfAreaId(area.id);
+        if (tab && space) {
+            const fromRoute = area.children.find(child => child.id === tabId(space, tab));
+            if (fromRoute) {
+                return fromRoute;
+            }
+        }
+        return area.children.find(child => child.active) ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /**
+     * Settings has one navigation (concept §5.6, AB#5523; the space comes from {@link SHELL_SETTINGS_SPACE}): the category list on the left of every
+     * Settings page, never the tab strip — so opening a category cannot switch between two layouts.
+     * Off on object detail pages, whose object header owns the navigation.
+     */
+    settingsSideNav = computed(() => this.settingsSpace !== null && this.activeArea()?.id === areaId(this.settingsSpace) && !this.objectDetail(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "settingsSideNav" }] : /* istanbul ignore next */ []));
+    /** The Settings home is open: Settings side navigation without an active category. */
+    settingsHomeActive = computed(() => this.settingsSideNav() && this.activeTab() === null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "settingsHomeActive" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the space header shows the area's tab strip: not in Settings (side navigation), not
+     * when the route says `spaceTabs: false`; default true.
+     */
+    showTabs = computed(() => this._routeData().spaceTabs !== false && !this.settingsSideNav(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTabs" }] : /* istanbul ignore next */ []));
+    /** The current page is an object detail page (route data `objectDetail`). */
+    objectDetail = computed(() => this._routeData().objectDetail === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "objectDetail" }] : /* istanbul ignore next */ []));
+    /**
+     * Where "back" leads from an object detail page: the selected entry of the active area
+     * (the list the object belongs to, e.g. Integration › Adapters), else the active tab.
+     */
+    backTarget = computed(() => {
+        const area = this.activeArea();
+        return (area ? ShellNavigationService.deepestSelected(area) : null) ?? this.activeTab();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backTarget" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(() => this._routeData.set(ShellNavigationService.readRouteData(this.router.routerState?.snapshot?.root)));
+    }
+    /**
+     * Opens an entry: navigable entries navigate (or open their href), grouping
+     * entries open their first navigable descendant.
+     */
+    async open(node) {
+        const target = node.navigable ? node : ShellNavigationService.firstPage(node, true);
+        if (target) {
+            await this.commandService.setSelectedDrawerItem({ id: target.id });
+        }
+    }
+    /**
+     * Opens an area from the rail. An area with its own in-app link (e.g. Home without tabs, or a
+     * Settings overview) opens that page (AB#5621); any other area opens its first page. Nothing
+     * happens when the current page already lives in the area (re-clicking the active area must
+     * not throw the person out of the page they are on). External entries are skipped; an area
+     * click never pops up a browser tab.
+     */
+    async openArea(area) {
+        if (area.id === this.activeArea()?.id) {
+            return;
+        }
+        const target = ShellNavigationService.areaTarget(area);
+        if (target) {
+            await this.commandService.setSelectedDrawerItem({ id: target.id });
+        }
+    }
+    /** Opens the first page of the first area (used after a mode switch). */
+    async openFirstPage() {
+        const first = this.topAreas()[0];
+        const target = first ? ShellNavigationService.areaTarget(first) : null;
+        if (target) {
+            await this.commandService.setSelectedDrawerItem({ id: target.id });
+        }
+    }
+    /**
+     * Where a rail click on an area leads: the area itself when it has its own in-app link,
+     * else its first navigable, in-app entry; `null` when there is none.
+     */
+    static areaTarget(area) {
+        if (area.navigable && !area.external) {
+            return area;
+        }
+        return ShellNavigationService.firstPage(area, false);
+    }
+    /** The selected entry at or below a node, deepest first; `null` when none is selected. */
+    static deepestSelected(node) {
+        for (const child of node.children) {
+            const nested = ShellNavigationService.deepestSelected(child);
+            if (nested) {
+                return nested;
+            }
+        }
+        return node.selected && node.navigable ? node : null;
+    }
+    /** The first navigable, in-app entry below a node (depth first). */
+    static firstPage(node, allowExternal) {
+        for (const child of node.children) {
+            if (child.separator) {
+                continue;
+            }
+            if (child.navigable && (allowExternal || !child.external)) {
+                return child;
+            }
+            const nested = ShellNavigationService.firstPage(child, allowExternal);
+            if (nested) {
+                return nested;
+            }
+        }
+        return null;
+    }
+    /**
+     * Link / href / target per item id, read from the command item tree. The
+     * CommandService's items carry neither, but the rail must know whether an
+     * entry navigates and whether it leaves the app.
+     */
+    collectKinds() {
+        // Re-read whenever the items change: the tree depends on mode and tenant data.
+        this.items();
+        const kinds = new Map();
+        const walk = (items) => {
+            for (const item of items) {
+                const navigable = item.link !== undefined || item.href !== undefined || item.onClick !== undefined;
+                kinds.set(item.id, {
+                    navigable,
+                    external: item.href !== undefined,
+                    tooltip: item.tooltip
+                });
+                if (item.children) {
+                    walk(item.children);
+                }
+            }
+        };
+        walk(this.commandSettings.commandItems);
+        return kinds;
+    }
+    static buildTree(items, kinds) {
+        const byParent = new Map();
+        const roots = [];
+        for (const item of items) {
+            const parentId = item.parentId;
+            if (parentId) {
+                const siblings = byParent.get(String(parentId)) ?? [];
+                siblings.push(item);
+                byParent.set(String(parentId), siblings);
+            }
+            else {
+                roots.push(item);
+            }
+        }
+        const toNode = (item) => {
+            const id = String(item.id ?? '');
+            const children = ShellNavigationService.tidySeparators((byParent.get(id) ?? []).map(toNode));
+            const kind = kinds.get(id);
+            const selected = item.selected === true;
+            return {
+                id,
+                text: item.text ?? '',
+                svgIcon: item.svgIcon,
+                tooltip: kind?.tooltip,
+                separator: item.separator === true,
+                selected,
+                active: selected || children.some(child => child.active),
+                navigable: kind?.navigable ?? false,
+                external: kind?.external ?? false,
+                children
+            };
+        };
+        const top = [];
+        const bottom = [];
+        let target = top;
+        for (const root of roots) {
+            if (root.separator === true) {
+                if (root.id === RAIL_BOTTOM_SEPARATOR_ID) {
+                    target = bottom;
+                }
+                continue;
+            }
+            target.push(toNode(root));
+        }
+        return { top, bottom };
+    }
+    /** Drops leading, trailing and repeated separators (left over when entries around them are hidden). */
+    static tidySeparators(nodes) {
+        const result = [];
+        for (const node of nodes) {
+            if (node.separator && (result.length === 0 || result[result.length - 1].separator)) {
+                continue;
+            }
+            result.push(node);
+        }
+        while (result.length > 0 && result[result.length - 1].separator) {
+            result.pop();
+        }
+        return result;
+    }
+    static readRouteData(root) {
+        const data = {};
+        let route = root ?? null;
+        while (route) {
+            const space = route.data?.['space'];
+            const tab = route.data?.['tab'];
+            if (route.data?.['objectDetail'] === true) {
+                data.objectDetail = true;
+            }
+            if (typeof route.data?.['spaceTabs'] === 'boolean') {
+                data.spaceTabs = route.data['spaceTabs'];
+            }
+            if (typeof space === 'string') {
+                data.space = space;
+                // A new space resets the tab unless this route names one as well.
+                data.tab = typeof tab === 'string' ? tab : undefined;
+            }
+            else if (typeof tab === 'string') {
+                data.tab = tab;
+            }
+            route = route.firstChild;
+        }
+        return data;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellNavigationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellNavigationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/** Highest count shown as a number; larger counts read `99+`. */
+const SHELL_BADGE_MAX = 99;
+/**
+ * The badge of one entry: the `badges` input wins over the node's own `badgeCount`;
+ * `null` when there is nothing to show (missing, 0, negative or not a number).
+ */
+function resolveShellBadge(badges, id, ownCount) {
+    const fromInput = badges?.[id];
+    const badge = typeof fromInput === 'number' ? { count: fromInput }
+        : fromInput ? fromInput
+            : typeof ownCount === 'number' ? { count: ownCount }
+                : null;
+    return badge && Number.isFinite(badge.count) && badge.count > 0 ? badge : null;
+}
+/** Visible text of a badge count: the number, or `99+` above {@link SHELL_BADGE_MAX}. */
+function shellBadgeText(count) {
+    return count > SHELL_BADGE_MAX ? `${SHELL_BADGE_MAX}+` : String(Math.floor(count));
+}
+
+/**
+ * Lets the page shown inside a space contribute to the space header: status
+ * chips next to the title and a template for the primary actions.
+ *
+ * A page sets them in its constructor or `ngOnInit` and never cleans up: the
+ * shell calls {@link mark} when a navigation starts and
+ * {@link clearOlderThan} when it ends with a different page component, which
+ * drops only what the previous page contributed. A cancelled navigation or a
+ * param-only change (same component) keeps the chips.
+ */
+class SpaceHeaderService {
+    _chips = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_chips" }] : /* istanbul ignore next */ []));
+    _actions = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []));
+    stamp = 0;
+    chipsStamp = 0;
+    actionsStamp = 0;
+    chips = this._chips.asReadonly();
+    actions = this._actions.asReadonly();
+    setChips(chips) {
+        this._chips.set(chips);
+        this.chipsStamp = ++this.stamp;
+    }
+    setActions(actions) {
+        this._actions.set(actions);
+        this.actionsStamp = ++this.stamp;
+    }
+    /** A marker for "now"; contributions made after it count as newer. */
+    mark() {
+        return this.stamp;
+    }
+    /** Drops every contribution made at or before the marker. */
+    clearOlderThan(marker) {
+        if (this.chipsStamp <= marker) {
+            this._chips.set([]);
+        }
+        if (this.actionsStamp <= marker) {
+            this._actions.set(null);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SpaceHeaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SpaceHeaderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SpaceHeaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Hook between the top bar's search button and the command palette (AB#5520).
+ *
+ * The shell only announces that the person asked for search; it does not
+ * know the palette. The host (or the palette) subscribes once and opens it:
+ *
+ * ```ts
+ * inject(ShellSearchTriggerService).requested$
+ *   .pipe(takeUntilDestroyed())
+ *   .subscribe(() => commandPalette.open());
+ * ```
+ *
+ * Until something subscribes, a click is a no-op. The keyboard shortcut
+ * (Cmd/Ctrl+K) is not bound here — it belongs to the palette, which can call
+ * {@link request} or open itself directly.
+ */
+class ShellSearchTriggerService {
+    requests = new Subject();
+    /** Emits every time search was requested from the shell. */
+    requested$ = this.requests.asObservable();
+    request() {
+        this.requests.next();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellSearchTriggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellSearchTriggerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellSearchTriggerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const NO_LEGACY_CRUMBS = new Set();
+function isAreaCrumb(item) {
+    return !!item && typeof item.areaId === 'string';
+}
+/**
+ * Breadcrumbs as the shell shows them (AB#5516): the first crumb names the rail area of the
+ * page (route `data.space`), never a section of an old drawer navigation.
+ *
+ * - a legacy section crumb ({@link ShellBreadcrumbOptions.legacySectionCrumbs}) is replaced by the area crumb;
+ * - a first crumb that already is the area ("Settings") stays as it is;
+ * - otherwise the area crumb is put in front ("Data Explorer" → "Data › Data Explorer");
+ * - the area crumb is dropped again when the next crumb carries the same label
+ *   ("General › Settings" → "Settings", not "Settings › Settings").
+ *
+ * - crumbs without text are dropped (no empty segments).
+ *
+ * Pure: returns a new array and never mutates the items (the BreadCrumbService re-emits the
+ * same objects after resolving `{{placeholders}}`).
+ */
+function shellBreadcrumbs(allItems, area, options = {}) {
+    const legacyCrumbs = options.legacySectionCrumbs ?? NO_LEGACY_CRUMBS;
+    const legacyAreaNames = options.legacySectionAreaNames ?? {};
+    // A crumb without text (e.g. an unresolved or empty `{{placeholder}}`) would render as an empty
+    // segment ("Integration › › Mesh Adapter", visual check 2026-10-06) — drop it.
+    const items = allItems.filter((item) => (item.text ?? '').trim().length > 0);
+    if (items.length === 0) {
+        return [];
+    }
+    if (!area) {
+        const known = legacyAreaNames[(items[0].text ?? '').trim().toLowerCase()];
+        return known ? [{ ...items[0], text: known, title: known, labelTemplate: known }, ...items.slice(1)] : [...items];
+    }
+    const areaLabel = area.text.trim().toLowerCase();
+    const [first, ...rest] = items;
+    const firstLabel = (first.text ?? '').trim().toLowerCase();
+    if (firstLabel === areaLabel) {
+        return [...items];
+    }
+    const tail = legacyCrumbs.has(firstLabel) ? rest : [...items];
+    if ((tail[0]?.text ?? '').trim().toLowerCase() === areaLabel) {
+        return tail;
+    }
+    const areaCrumb = {
+        text: area.text,
+        title: area.text,
+        svgIcon: area.svgIcon,
+        labelTemplate: area.text,
+        url: '',
+        areaId: area.id
+    };
+    return [areaCrumb, ...tail];
+}
+/** "Integration › Adapters" — the description stored with a recent page. */
+function crumbPath(items) {
+    const texts = items.map(item => item.text?.trim()).filter((text) => !!text);
+    return texts.length > 0 ? texts.join(' › ') : undefined;
+}
+
+/** Morning 05–11, afternoon 12–17, evening otherwise (local time of the browser). */
+function greetingPhrase(now, messages) {
+    const m = resolveShellMessages(messages);
+    const hour = now.getHours();
+    if (hour >= 5 && hour < 12) {
+        return m.greetingMorning;
+    }
+    if (hour >= 12 && hour < 18) {
+        return m.greetingAfternoon;
+    }
+    return m.greetingEvening;
+}
+/** The first name: the `given_name` claim, else the first word of the display name, else null. */
+function firstNameOf(user, displayName) {
+    const given = user?.given_name?.trim();
+    if (given) {
+        return given;
+    }
+    const first = displayName?.trim().split(/\s+/)[0];
+    return first ? first : null;
+}
+/** "Good morning, Gerald", or just "Good morning" when the name is unknown. */
+function homeGreeting(user, displayName, now, messages) {
+    const phrase = greetingPhrase(now, messages);
+    const name = firstNameOf(user, displayName);
+    return name ? formatShellMessage(resolveShellMessages(messages).greetingWithName, { greeting: phrase, name }) : phrase;
+}
+/** The meta line of the Home header: the tenant (nothing without one). */
+function homeMeta(tenantId, messages) {
+    return tenantId ? [{ label: resolveShellMessages(messages).tenant, value: tenantId }] : [];
+}
+
+/**
+ * The environment chip of a tenant mode, in sentence case with its status colour:
+ * Production (error, marks the bar), Staging (warning), Development (success),
+ * Testing (info), anything else "Environment unknown" (neutral).
+ */
+function shellEnvironmentChip(mode, messages) {
+    const m = resolveShellMessages(messages);
+    switch (mode) {
+        case 'PRODUCTION':
+            return { label: m.environmentProduction, short: m.environmentProductionShort, status: 'error', production: true };
+        case 'STAGING':
+            return { label: m.environmentStaging, short: m.environmentStagingShort, status: 'warning' };
+        case 'DEVELOPMENT':
+            return { label: m.environmentDevelopment, short: m.environmentDevelopmentShort, status: 'success' };
+        case 'TESTING':
+            return { label: m.environmentTesting, short: m.environmentTestingShort, status: 'info' };
+        default:
+            return { label: m.environmentUnknown, short: m.environmentUnknownShort, status: 'neutral' };
+    }
+}
+
+/**
+ * Toast stacking for a shell host (AB#5516 visual check: six identical "not found" errors
+ * covered the top bar): identical messages once; errors leave after 10 s and warnings after
+ * 8 s (paused while hovered or focused), except those with details, which wait for the user;
+ * at most three toasts, a success/info is dropped before any error. Errors that must stay
+ * pass `hideAfter: 0`.
+ *
+ * Use: `{ provide: NOTIFICATION_DISPLAY_OPTIONS, useValue: SHELL_NOTIFICATION_OPTIONS }`.
+ * Placing `.k-notification-group` below the top bar is the host's global style.
+ */
+const SHELL_NOTIFICATION_OPTIONS = {
+    dedupe: true,
+    errorHideAfter: 10_000,
+    warningHideAfter: 8_000,
+    stickyWithDetails: true,
+    maxVisible: 3
+};
+
+/**
+ * The rail: one icon per area of the navigation tree, Settings pinned to the
+ * bottom. Enter/Space or a click on an icon navigates to the area. The
+ * flyout with the area's entries is a disclosure: it opens on hover or with
+ * Arrow Right (`aria-expanded` / `aria-controls` on the icon); it never opens
+ * on focus alone. On phones (≤ 640 px) the rail is a bottom bar without
+ * flyouts — the space shell's tab strip takes over.
+ *
+ * Pointer: hovering opens the flyout after a short intent delay (at once when
+ * another flyout is already showing). It stays open while the pointer is over
+ * the icon or the flyout — the flyout host spans the gap between them, so
+ * crossing it never counts as leaving — and closes only after a grace delay
+ * once the pointer has left both. A mouse click on an icon with a flyout
+ * still navigates, and additionally pins the flyout open (as does Arrow
+ * Right): a pinned flyout ignores the pointer leaving and closes on an
+ * outside click, Escape, choosing an entry, focus leaving the entry, a
+ * second click on the same icon, or a navigation (AB#5621).
+ *
+ * Navigation (AB#5621): every open flyout — pinned or hovered — closes when a
+ * router navigation ends or the active area changes, so a click on an icon
+ * that navigates does not leave the flyout over the new page. A click that
+ * does not navigate (the area's page is already open) keeps the pin. Closing
+ * on navigation moves focus only when it was inside the flyout (back to its
+ * area icon); focus the new page took is left alone.
+ *
+ * Keyboard: the rail is one tab stop (roving tabindex). Arrow Up/Down (Left/
+ * Right on the bottom bar) move between areas, Home/End jump, Arrow Right
+ * opens the flyout and focuses its first entry; inside the flyout Arrow
+ * Up/Down move, Escape or Arrow Left return to the icon. After choosing a
+ * flyout entry focus returns to the area icon instead of falling to <body>.
+ *
+ * Badges (AB#5621): `badges` maps node ids (areas and flyout entries) to a count or a
+ * {@link ShellNavBadge}; a node's own `badgeCount` is the fallback. 0 or no count shows nothing.
+ * The count joins the icon's accessible name ("Inbox, 3 open") and is read after a flyout entry.
+ *
+ * Every activation of an area icon emits `areaSelected` — also for areas without entries
+ * (Home, a Settings overview), which have no flyout; `ShellNavigationService.openArea` opens
+ * the area's own link then.
+ *
+ * Pure presentation: the host feeds the areas (`ShellNavigationService.topAreas()` /
+ * `bottomAreas()`) and handles the outputs (`openArea` / `open`).
+ */
+/** Hover intent before a flyout opens when none is showing (ms). */
+const RAIL_FLYOUT_OPEN_DELAY = 120;
+/** Grace period after the pointer left both icon and flyout (ms). */
+const RAIL_FLYOUT_CLOSE_DELAY = 300;
+class ShellRailComponent {
+    host = inject(ElementRef);
+    changeDetector = inject(ChangeDetectorRef);
+    areas = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "areas" }] : /* istanbul ignore next */ []));
+    bottomAreas = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bottomAreas" }] : /* istanbul ignore next */ []));
+    activeAreaId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeAreaId" }] : /* istanbul ignore next */ []));
+    /** Counts per node id (area or flyout entry); wins over `ShellNavNode.badgeCount`. */
+    badges = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badges" }] : /* istanbul ignore next */ []));
+    /** Translations; members left out fall back to {@link SHELL_MESSAGES}, then English. */
+    messages = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    m = shellMessages(this.messages);
+    /** An area icon was activated. */
+    areaSelected = output();
+    /** An entry in a flyout was activated. */
+    itemSelected = output();
+    /** The area whose flyout is shown. */
+    openId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
+    /** Opened by click or keyboard: the pointer leaving does not close it. */
+    pinned = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
+    focusedId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedId" }] : /* istanbul ignore next */ []));
+    openTimer = null;
+    closeTimer = null;
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        destroyRef.onDestroy(() => this.clearTimers());
+        // Optional: the rail also works without a router (the active area change covers that case).
+        const router = inject(Router, { optional: true });
+        const subscription = router?.events.subscribe(event => {
+            if (event instanceof NavigationEnd) {
+                this.closeOnNavigation();
+            }
+        });
+        destroyRef.onDestroy(() => subscription?.unsubscribe());
+        let previousActive;
+        effect(() => {
+            const active = this.activeAreaId();
+            if (previousActive !== undefined && previousActive !== active) {
+                untracked(() => this.closeOnNavigation());
+            }
+            previousActive = active;
+        });
+    }
+    allAreas = computed(() => [...this.areas(), ...this.bottomAreas()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allAreas" }] : /* istanbul ignore next */ []));
+    /** The one area button in the tab order: the focused one, else the active one, else the first. */
+    tabStopId = computed(() => {
+        const ids = this.allAreas().map(area => area.id);
+        const focused = this.focusedId();
+        if (focused && ids.includes(focused)) {
+            return focused;
+        }
+        const active = this.activeAreaId();
+        return active && ids.includes(active) ? active : ids[0] ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabStopId" }] : /* istanbul ignore next */ []));
+    hasFlyout(area) {
+        return area.children.some(child => !child.separator);
+    }
+    /** The badge of a node, or null when it shows none. */
+    badgeOf(node) {
+        return resolveShellBadge(this.badges(), node.id, node.badgeCount);
+    }
+    badgeText(badge) {
+        return shellBadgeText(badge.count);
+    }
+    /** Accessible text of a badge: its own label, else "{count} open". */
+    badgeLabel(badge) {
+        return badge.label ?? formatShellMessage(this.m().navBadge, { count: badge.count });
+    }
+    /** Accessible name of an area icon, with its badge when it has one. */
+    areaLabel(area) {
+        const badge = this.badgeOf(area);
+        return badge
+            ? formatShellMessage(this.m().navItemWithBadge, { label: area.text, badge: this.badgeLabel(badge) })
+            : area.text;
+    }
+    flyoutId(area) {
+        return `rail-flyout-${area.id}`;
+    }
+    onAreaClick(area, event) {
+        // A click with the pointer (detail ≥ 1) pins the flyout; Enter/Space keep the plain behaviour.
+        const byPointer = !!event && event.detail > 0;
+        if (byPointer && this.hasFlyout(area) && !this.isBottomBar()) {
+            if (this.pinned() && this.openId() === area.id) {
+                this.close();
+                return;
+            }
+            this.openNow(area.id, true);
+        }
+        else {
+            this.close();
+        }
+        this.areaSelected.emit(area);
+    }
+    onItemClick(area, item) {
+        // The flyout hides once closed; move focus first so it does not drop to <body>.
+        this.focusArea(area.id);
+        this.close();
+        this.itemSelected.emit(item);
+    }
+    onAreaFocus(area) {
+        this.focusedId.set(area.id);
+    }
+    onPointerEnter(area) {
+        this.cancelClose();
+        if (this.pinned() || !this.hasFlyout(area)) {
+            return;
+        }
+        if (this.openId() !== null) {
+            // Moving between areas while a flyout shows: switch without delay.
+            this.openNow(area.id, false);
+            return;
+        }
+        this.cancelOpen();
+        this.openTimer = setTimeout(() => {
+            this.openTimer = null;
+            this.openNow(area.id, false);
+        }, RAIL_FLYOUT_OPEN_DELAY);
+    }
+    onPointerLeave(area) {
+        this.cancelOpen();
+        if (this.pinned() || this.openId() !== area.id) {
+            return;
+        }
+        this.cancelClose();
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = null;
+            if (this.openId() === area.id && !this.pinned() && !this.entryOf(area)?.contains(document.activeElement)) {
+                this.openId.set(null);
+            }
+        }, RAIL_FLYOUT_CLOSE_DELAY);
+    }
+    onEntryFocusOut(area, event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node && this.entryOf(area)?.contains(next)) {
+            return;
+        }
+        // Focus dropping to nothing (e.g. a click on the flyout title) is not "leaving":
+        // a pinned flyout waits for the outside click instead.
+        if (next === null && this.pinned()) {
+            return;
+        }
+        if (this.openId() === area.id) {
+            this.close();
+        }
+    }
+    onDocumentPointerDown(event) {
+        const id = this.openId();
+        if (!this.pinned() || id === null) {
+            return;
+        }
+        const target = event.target;
+        if (target instanceof Node && this.findByAttribute('data-entry-id', id)?.contains(target)) {
+            return;
+        }
+        this.close();
+    }
+    onDocumentEscape() {
+        if (this.openId() !== null) {
+            this.close();
+        }
+    }
+    onAreaKeydown(area, event) {
+        const ids = this.allAreas().map(a => a.id);
+        const index = ids.indexOf(area.id);
+        let target;
+        switch (event.key) {
+            case 'ArrowDown':
+                target = ids[(index + 1) % ids.length];
+                break;
+            case 'ArrowUp':
+                target = ids[(index - 1 + ids.length) % ids.length];
+                break;
+            case 'Home':
+                target = ids[0];
+                break;
+            case 'End':
+                target = ids[ids.length - 1];
+                break;
+            case 'ArrowRight':
+                if (this.isBottomBar()) {
+                    target = ids[(index + 1) % ids.length];
+                    break;
+                }
+                if (this.hasFlyout(area)) {
+                    event.preventDefault();
+                    this.openNow(area.id, true);
+                    // The flyout is hidden by CSS (`display: none`) until the entry carries `.open`; render that
+                    // class first, otherwise browsers (and jsdom with styles) refuse to focus the hidden entry.
+                    this.changeDetector.detectChanges();
+                    this.flyoutItems(area)[0]?.focus();
+                }
+                return;
+            case 'ArrowLeft':
+                if (this.isBottomBar()) {
+                    target = ids[(index - 1 + ids.length) % ids.length];
+                    break;
+                }
+                return;
+            case 'Escape':
+                this.close();
+                return;
+            default:
+                return;
+        }
+        if (target) {
+            event.preventDefault();
+            this.focusArea(target);
+        }
+    }
+    onFlyoutKeydown(area, event) {
+        const items = this.flyoutItems(area);
+        const index = items.indexOf(event.target);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                items[(index + 1) % items.length]?.focus();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                items[(index - 1 + items.length) % items.length]?.focus();
+                break;
+            case 'Home':
+                event.preventDefault();
+                items[0]?.focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                items[items.length - 1]?.focus();
+                break;
+            case 'Escape':
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusArea(area.id);
+                this.close();
+                break;
+        }
+    }
+    /** A navigation happened: close the flyout without taking focus from the new page. */
+    closeOnNavigation() {
+        const id = this.openId();
+        if (id === null) {
+            return;
+        }
+        const flyout = this.findByAttribute('id', `rail-flyout-${id}`);
+        if (flyout && document.activeElement instanceof Node && flyout.contains(document.activeElement)) {
+            // Focus would drop to <body> once the flyout hides.
+            this.focusArea(id);
+        }
+        this.close();
+        this.changeDetector.markForCheck();
+    }
+    openNow(id, pinned) {
+        this.clearTimers();
+        this.openId.set(id);
+        this.pinned.set(pinned);
+    }
+    close() {
+        this.clearTimers();
+        this.openId.set(null);
+        this.pinned.set(false);
+    }
+    cancelOpen() {
+        if (this.openTimer !== null) {
+            clearTimeout(this.openTimer);
+            this.openTimer = null;
+        }
+    }
+    cancelClose() {
+        if (this.closeTimer !== null) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+    }
+    clearTimers() {
+        this.cancelOpen();
+        this.cancelClose();
+    }
+    focusArea(id) {
+        this.focusedId.set(id);
+        this.findByAttribute('data-area-id', id)?.focus();
+    }
+    entryOf(area) {
+        return this.findByAttribute('data-entry-id', area.id);
+    }
+    flyoutItems(area) {
+        const flyout = this.findByAttribute('id', this.flyoutId(area));
+        return flyout ? Array.from(flyout.querySelectorAll('.flyout-item')) : [];
+    }
+    /** Attribute lookup without building a selector from ids (no escaping needed). */
+    findByAttribute(name, value) {
+        const candidates = this.host.nativeElement.querySelectorAll(`[${name}]`);
+        return Array.from(candidates).find(element => element.getAttribute(name) === value) ?? null;
+    }
+    /** Below 640 px the rail is laid out horizontally at the bottom. */
+    isBottomBar() {
+        return typeof window.matchMedia === 'function' && window.matchMedia('(max-width: 640px)').matches;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellRailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ShellRailComponent, isStandalone: true, selector: "mm-shell-rail", inputs: { areas: { classPropertyName: "areas", publicName: "areas", isSignal: true, isRequired: false, transformFunction: null }, bottomAreas: { classPropertyName: "bottomAreas", publicName: "bottomAreas", isSignal: true, isRequired: false, transformFunction: null }, activeAreaId: { classPropertyName: "activeAreaId", publicName: "activeAreaId", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { areaSelected: "areaSelected", itemSelected: "itemSelected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onDocumentEscape()" } }, ngImport: i0, template: "<nav class=\"rail\" [attr.aria-label]=\"m().railLabel\">\n  <ul class=\"rail-list\" role=\"list\">\n    @for (area of areas(); track area.id) {\n      <ng-container *ngTemplateOutlet=\"entry; context: { $implicit: area }\"></ng-container>\n    }\n  </ul>\n  @if (bottomAreas().length > 0) {\n    <ul class=\"rail-list rail-bottom\" role=\"list\">\n      @for (area of bottomAreas(); track area.id) {\n        <ng-container *ngTemplateOutlet=\"entry; context: { $implicit: area }\"></ng-container>\n      }\n    </ul>\n  }\n</nav>\n\n<ng-template #entry let-area>\n  <li class=\"rail-entry\"\n      [attr.data-entry-id]=\"area.id\"\n      [class.open]=\"openId() === area.id\"\n      [class.pinned]=\"pinned() && openId() === area.id\"\n      (mouseenter)=\"onPointerEnter(area)\"\n      (mouseleave)=\"onPointerLeave(area)\"\n      (focusout)=\"onEntryFocusOut(area, $event)\">\n    <button type=\"button\"\n            class=\"rail-item\"\n            [attr.data-area-id]=\"area.id\"\n            [attr.aria-label]=\"areaLabel(area)\"\n            [attr.aria-current]=\"area.id === activeAreaId() ? 'true' : null\"\n            [attr.aria-expanded]=\"hasFlyout(area) ? openId() === area.id : null\"\n            [attr.aria-controls]=\"hasFlyout(area) ? flyoutId(area) : null\"\n            [tabindex]=\"tabStopId() === area.id ? 0 : -1\"\n            (focus)=\"onAreaFocus(area)\"\n            (keydown)=\"onAreaKeydown(area, $event)\"\n            (click)=\"onAreaClick(area, $event)\">\n      @if (area.svgIcon) {\n        <kendo-svgicon class=\"rail-icon\" [icon]=\"area.svgIcon\"></kendo-svgicon>\n      }\n      @if (badgeOf(area); as badge) {\n        <span class=\"rail-badge\" [class.attention]=\"badge.attention\" [attr.data-badge]=\"area.id\" aria-hidden=\"true\">{{ badgeText(badge) }}</span>\n      }\n    </button>\n    @if (hasFlyout(area)) {\n      <!-- The host starts right at the icon's edge; its transparent padding bridges the gap to the panel. -->\n      <div class=\"rail-flyout-host\">\n        <div class=\"rail-flyout\" [id]=\"flyoutId(area)\">\n          <div class=\"flyout-title\" aria-hidden=\"true\">{{ area.text }}</div>\n          <ul class=\"flyout-list\" [attr.aria-label]=\"area.text\">\n            @for (child of area.children; track child.id) {\n              @if (child.separator) {\n                <li class=\"flyout-separator\" aria-hidden=\"true\"></li>\n              } @else {\n                <li>\n                  <button type=\"button\"\n                          class=\"flyout-item\"\n                          [class.active]=\"child.active\"\n                          [attr.aria-current]=\"child.selected ? 'page' : null\"\n                          [title]=\"child.tooltip ?? ''\"\n                          (keydown)=\"onFlyoutKeydown(area, $event)\"\n                          (click)=\"onItemClick(area, child)\">\n                    <span class=\"flyout-text\">{{ child.text }}</span>\n                    @if (badgeOf(child); as badge) {\n                      <span class=\"flyout-badge\" [class.attention]=\"badge.attention\" [attr.data-badge]=\"child.id\" aria-hidden=\"true\">{{ badgeText(badge) }}</span><span class=\"visually-hidden\">, {{ badgeLabel(badge) }}</span>\n                    }\n                    @if (child.external) {\n                      <span class=\"flyout-external\" aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span>\n                    }\n                  </button>\n                </li>\n                @for (nested of child.children; track nested.id) {\n                  @if (!nested.separator) {\n                    <li>\n                      <button type=\"button\"\n                              class=\"flyout-item nested\"\n                              [class.active]=\"nested.active\"\n                              [attr.aria-current]=\"nested.selected ? 'page' : null\"\n                              (keydown)=\"onFlyoutKeydown(area, $event)\"\n                              (click)=\"onItemClick(area, nested)\">\n                        <span class=\"flyout-text\">{{ nested.text }}</span>\n                        @if (badgeOf(nested); as badge) {\n                          <span class=\"flyout-badge\" [class.attention]=\"badge.attention\" [attr.data-badge]=\"nested.id\" aria-hidden=\"true\">{{ badgeText(badge) }}</span><span class=\"visually-hidden\">, {{ badgeLabel(badge) }}</span>\n                        }\n                        @if (nested.external) {\n                          <span class=\"flyout-external\" aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span>\n                        }\n                      </button>\n                    </li>\n                  }\n                }\n              }\n            }\n          </ul>\n        </div>\n      </div>\n    }\n  </li>\n</ng-template>\n", styles: [":host{display:block;height:100%}.rail{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;height:100%;width:56px;padding-block:var(--theme-space-2);background:var(--theme-bg-app);border-right:1px solid var(--theme-border-subtle)}.rail-list{display:flex;flex-direction:column;align-items:center;gap:var(--theme-space-1);margin:0;padding:0;list-style:none}.rail-bottom{margin-top:auto}.rail-entry{position:relative}.rail-item{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--theme-radius-md);background:none;color:var(--theme-text-secondary);cursor:pointer;transition:background-color var(--theme-motion-fast) ease,color var(--theme-motion-fast) ease}.rail-item:hover{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.rail-item:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.rail-item[aria-current=true]{background:var(--theme-bg-selected);color:var(--theme-text-accent)}.rail-item[aria-current=true]:before{content:\"\";position:absolute;left:-8px;top:10px;bottom:10px;width:2px;border-radius:var(--theme-radius-xs);background:currentColor}.rail-icon{width:20px;height:20px}.rail-badge,.flyout-badge{box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--theme-accent);color:var(--theme-text-on-accent);font-size:.625rem;font-weight:600;line-height:16px;text-align:center;white-space:nowrap;pointer-events:none}.rail-badge.attention,.flyout-badge.attention{background:var(--theme-status-warning)}.rail-badge{position:absolute;top:2px;right:0}.flyout-badge{flex:0 0 auto}.rail-flyout-host{display:none;position:absolute;left:100%;top:0;z-index:20;padding-left:var(--theme-space-2)}.rail-flyout{min-width:200px;max-width:280px;max-height:70vh;overflow-y:auto;padding:var(--theme-space-1);background:var(--theme-bg-overlay);border-radius:var(--theme-radius-lg);box-shadow:var(--theme-shadow-popup)}.rail-entry.open .rail-flyout-host{display:block}.rail-bottom .rail-flyout-host{top:auto;bottom:0}.flyout-title{padding:var(--theme-space-1) var(--theme-space-2);font-family:var(--theme-font-display);font-size:.8125rem;font-weight:600;color:var(--theme-text-primary)}.flyout-list{margin:0;padding:0;list-style:none}.flyout-separator{height:1px;margin:var(--theme-space-1) var(--theme-space-2);background:var(--theme-border-subtle)}.flyout-item{display:flex;align-items:center;gap:var(--theme-space-2);width:100%;padding:var(--theme-space-1) var(--theme-space-2);border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-secondary);font:inherit;font-size:.8125rem;text-align:left;cursor:pointer}.flyout-item:hover,.flyout-item:focus-visible{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.flyout-item:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.flyout-item.active{color:var(--theme-text-accent)}.flyout-item.nested{padding-left:var(--theme-space-6)}.flyout-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flyout-external{color:var(--theme-text-muted)}@media(prefers-reduced-motion:reduce){.rail-item{transition:none}}@media(max-width:640px){.rail{flex-direction:row;justify-content:space-around;width:100%;height:56px;padding:0 var(--theme-space-2) env(safe-area-inset-bottom,0px);border-right:0;border-top:1px solid var(--theme-border-subtle)}.rail-list{flex-direction:row;flex:1 1 auto;min-width:0;justify-content:space-around}.rail-entry{flex:0 1 40px;min-width:32px}.rail-item{width:100%}.rail-bottom{flex:0 0 auto;margin-top:0}.rail-item[aria-current=true]:before{inset:auto 10px -8px;width:auto;height:2px}.rail-entry.open .rail-flyout-host{display:none}}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"], dependencies: [{ kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellRailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-shell-rail', imports: [SVGIconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(document:pointerdown)': 'onDocumentPointerDown($event)',
+                        '(document:keydown.escape)': 'onDocumentEscape()'
+                    }, template: "<nav class=\"rail\" [attr.aria-label]=\"m().railLabel\">\n  <ul class=\"rail-list\" role=\"list\">\n    @for (area of areas(); track area.id) {\n      <ng-container *ngTemplateOutlet=\"entry; context: { $implicit: area }\"></ng-container>\n    }\n  </ul>\n  @if (bottomAreas().length > 0) {\n    <ul class=\"rail-list rail-bottom\" role=\"list\">\n      @for (area of bottomAreas(); track area.id) {\n        <ng-container *ngTemplateOutlet=\"entry; context: { $implicit: area }\"></ng-container>\n      }\n    </ul>\n  }\n</nav>\n\n<ng-template #entry let-area>\n  <li class=\"rail-entry\"\n      [attr.data-entry-id]=\"area.id\"\n      [class.open]=\"openId() === area.id\"\n      [class.pinned]=\"pinned() && openId() === area.id\"\n      (mouseenter)=\"onPointerEnter(area)\"\n      (mouseleave)=\"onPointerLeave(area)\"\n      (focusout)=\"onEntryFocusOut(area, $event)\">\n    <button type=\"button\"\n            class=\"rail-item\"\n            [attr.data-area-id]=\"area.id\"\n            [attr.aria-label]=\"areaLabel(area)\"\n            [attr.aria-current]=\"area.id === activeAreaId() ? 'true' : null\"\n            [attr.aria-expanded]=\"hasFlyout(area) ? openId() === area.id : null\"\n            [attr.aria-controls]=\"hasFlyout(area) ? flyoutId(area) : null\"\n            [tabindex]=\"tabStopId() === area.id ? 0 : -1\"\n            (focus)=\"onAreaFocus(area)\"\n            (keydown)=\"onAreaKeydown(area, $event)\"\n            (click)=\"onAreaClick(area, $event)\">\n      @if (area.svgIcon) {\n        <kendo-svgicon class=\"rail-icon\" [icon]=\"area.svgIcon\"></kendo-svgicon>\n      }\n      @if (badgeOf(area); as badge) {\n        <span class=\"rail-badge\" [class.attention]=\"badge.attention\" [attr.data-badge]=\"area.id\" aria-hidden=\"true\">{{ badgeText(badge) }}</span>\n      }\n    </button>\n    @if (hasFlyout(area)) {\n      <!-- The host starts right at the icon's edge; its transparent padding bridges the gap to the panel. -->\n      <div class=\"rail-flyout-host\">\n        <div class=\"rail-flyout\" [id]=\"flyoutId(area)\">\n          <div class=\"flyout-title\" aria-hidden=\"true\">{{ area.text }}</div>\n          <ul class=\"flyout-list\" [attr.aria-label]=\"area.text\">\n            @for (child of area.children; track child.id) {\n              @if (child.separator) {\n                <li class=\"flyout-separator\" aria-hidden=\"true\"></li>\n              } @else {\n                <li>\n                  <button type=\"button\"\n                          class=\"flyout-item\"\n                          [class.active]=\"child.active\"\n                          [attr.aria-current]=\"child.selected ? 'page' : null\"\n                          [title]=\"child.tooltip ?? ''\"\n                          (keydown)=\"onFlyoutKeydown(area, $event)\"\n                          (click)=\"onItemClick(area, child)\">\n                    <span class=\"flyout-text\">{{ child.text }}</span>\n                    @if (badgeOf(child); as badge) {\n                      <span class=\"flyout-badge\" [class.attention]=\"badge.attention\" [attr.data-badge]=\"child.id\" aria-hidden=\"true\">{{ badgeText(badge) }}</span><span class=\"visually-hidden\">, {{ badgeLabel(badge) }}</span>\n                    }\n                    @if (child.external) {\n                      <span class=\"flyout-external\" aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span>\n                    }\n                  </button>\n                </li>\n                @for (nested of child.children; track nested.id) {\n                  @if (!nested.separator) {\n                    <li>\n                      <button type=\"button\"\n                              class=\"flyout-item nested\"\n                              [class.active]=\"nested.active\"\n                              [attr.aria-current]=\"nested.selected ? 'page' : null\"\n                              (keydown)=\"onFlyoutKeydown(area, $event)\"\n                              (click)=\"onItemClick(area, nested)\">\n                        <span class=\"flyout-text\">{{ nested.text }}</span>\n                        @if (badgeOf(nested); as badge) {\n                          <span class=\"flyout-badge\" [class.attention]=\"badge.attention\" [attr.data-badge]=\"nested.id\" aria-hidden=\"true\">{{ badgeText(badge) }}</span><span class=\"visually-hidden\">, {{ badgeLabel(badge) }}</span>\n                        }\n                        @if (nested.external) {\n                          <span class=\"flyout-external\" aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span>\n                        }\n                      </button>\n                    </li>\n                  }\n                }\n              }\n            }\n          </ul>\n        </div>\n      </div>\n    }\n  </li>\n</ng-template>\n", styles: [":host{display:block;height:100%}.rail{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;height:100%;width:56px;padding-block:var(--theme-space-2);background:var(--theme-bg-app);border-right:1px solid var(--theme-border-subtle)}.rail-list{display:flex;flex-direction:column;align-items:center;gap:var(--theme-space-1);margin:0;padding:0;list-style:none}.rail-bottom{margin-top:auto}.rail-entry{position:relative}.rail-item{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--theme-radius-md);background:none;color:var(--theme-text-secondary);cursor:pointer;transition:background-color var(--theme-motion-fast) ease,color var(--theme-motion-fast) ease}.rail-item:hover{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.rail-item:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.rail-item[aria-current=true]{background:var(--theme-bg-selected);color:var(--theme-text-accent)}.rail-item[aria-current=true]:before{content:\"\";position:absolute;left:-8px;top:10px;bottom:10px;width:2px;border-radius:var(--theme-radius-xs);background:currentColor}.rail-icon{width:20px;height:20px}.rail-badge,.flyout-badge{box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--theme-accent);color:var(--theme-text-on-accent);font-size:.625rem;font-weight:600;line-height:16px;text-align:center;white-space:nowrap;pointer-events:none}.rail-badge.attention,.flyout-badge.attention{background:var(--theme-status-warning)}.rail-badge{position:absolute;top:2px;right:0}.flyout-badge{flex:0 0 auto}.rail-flyout-host{display:none;position:absolute;left:100%;top:0;z-index:20;padding-left:var(--theme-space-2)}.rail-flyout{min-width:200px;max-width:280px;max-height:70vh;overflow-y:auto;padding:var(--theme-space-1);background:var(--theme-bg-overlay);border-radius:var(--theme-radius-lg);box-shadow:var(--theme-shadow-popup)}.rail-entry.open .rail-flyout-host{display:block}.rail-bottom .rail-flyout-host{top:auto;bottom:0}.flyout-title{padding:var(--theme-space-1) var(--theme-space-2);font-family:var(--theme-font-display);font-size:.8125rem;font-weight:600;color:var(--theme-text-primary)}.flyout-list{margin:0;padding:0;list-style:none}.flyout-separator{height:1px;margin:var(--theme-space-1) var(--theme-space-2);background:var(--theme-border-subtle)}.flyout-item{display:flex;align-items:center;gap:var(--theme-space-2);width:100%;padding:var(--theme-space-1) var(--theme-space-2);border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-secondary);font:inherit;font-size:.8125rem;text-align:left;cursor:pointer}.flyout-item:hover,.flyout-item:focus-visible{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.flyout-item:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.flyout-item.active{color:var(--theme-text-accent)}.flyout-item.nested{padding-left:var(--theme-space-6)}.flyout-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flyout-external{color:var(--theme-text-muted)}@media(prefers-reduced-motion:reduce){.rail-item{transition:none}}@media(max-width:640px){.rail{flex-direction:row;justify-content:space-around;width:100%;height:56px;padding:0 var(--theme-space-2) env(safe-area-inset-bottom,0px);border-right:0;border-top:1px solid var(--theme-border-subtle)}.rail-list{flex-direction:row;flex:1 1 auto;min-width:0;justify-content:space-around}.rail-entry{flex:0 1 40px;min-width:32px}.rail-item{width:100%}.rail-bottom{flex:0 0 auto;margin-top:0}.rail-item[aria-current=true]:before{inset:auto 10px -8px;width:auto;height:2px}.rail-entry.open .rail-flyout-host{display:none}}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { areas: [{ type: i0.Input, args: [{ isSignal: true, alias: "areas", required: false }] }], bottomAreas: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomAreas", required: false }] }], activeAreaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeAreaId", required: false }] }], badges: [{ type: i0.Input, args: [{ isSignal: true, alias: "badges", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], areaSelected: [{ type: i0.Output, args: ["areaSelected"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+/**
+ * The header of a space (concept §3.3): breadcrumbs, the area title with
+ * optional status chips and a primary-action slot, and the tab strip built
+ * from the area's children — the same entries the rail flyout lists.
+ *
+ * Content projection:
+ * - `[spaceCrumbs]` — the breadcrumb line above the title
+ * - `[spaceActions]` — primary actions, right of the title
+ *
+ * Tabs are navigation, not ARIA tabs (there is no tab panel): a `nav` with
+ * buttons and `aria-current="page"` on the active one. A grouping tab
+ * without its own page (e.g. Swagger) is a menu button: opening moves focus
+ * into the menu, Arrow Up/Down/Home/End move, Escape (on the button or in the
+ * menu) closes and returns focus to the button, Tab / focus leaving / a click
+ * outside / scrolling or resizing closes it. The menu is positioned `fixed`
+ * from the button's bounding box, so the scrollable tab strip cannot clip it.
+ * Without an area (a page outside the current mode's navigation) only the
+ * breadcrumbs and actions are shown. A `heading` replaces the area name and a `meta` line
+ * follows it (Home greets the user and names the tenant, wireframe screen 1).
+ *
+ * On an object detail page (`objectDetail`, AB#5547) the page's own object header
+ * (name, chips, actions, object tabs) replaces the area title, the status chips and
+ * the tab strip: the space header shrinks to one line with a back link to the list
+ * the object belongs to (`backTarget`, e.g. "Adapters"), the breadcrumbs and the
+ * actions slot.
+ *
+ * An empty breadcrumb line (AB#5621) takes no height: when the `[spaceCrumbs]` content shows
+ * nothing (no text, no list item, link, button or image — e.g. a Kendo breadcrumb without
+ * items) and there is no back link, the line collapses. It stays in the DOM with its width, so
+ * a breadcrumb that measures its width (Kendo's collapse mode) is laid out right once items arrive.
+ */
+class SpaceShellComponent {
+    host = inject(ElementRef);
+    area = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
+    activeTabId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTabId" }] : /* istanbul ignore next */ []));
+    chips = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
+    /** Replaces the area name as the title (Home: the greeting, AB#5558). */
+    heading = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** A short meta line right of the title (Home: the tenant), hidden on phones. */
+    meta = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
+    /** The page renders its own object header; area title, chips and tabs are left out. */
+    objectDetail = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "objectDetail" }] : /* istanbul ignore next */ []));
+    /** Show the area's tab strip; false when the page lists the same entries itself (Settings home). */
+    showTabs = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTabs" }] : /* istanbul ignore next */ []));
+    /** Target of the back link on an object detail page (the list of the object). */
+    backTarget = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backTarget" }] : /* istanbul ignore next */ []));
+    /** Translations; members left out fall back to {@link SHELL_MESSAGES}, then English. */
+    messages = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    m = shellMessages(this.messages);
+    tabSelected = output();
+    /** The grouping tab whose menu is open. */
+    openMenuId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openMenuId" }] : /* istanbul ignore next */ []));
+    menuPosition = signal({ top: 0, left: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
+    tabs = computed(() => this.area()?.children ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    /** The breadcrumb line shows something (projected crumbs or the back link). */
+    hasCrumbs = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasCrumbs" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // The projected crumbs change outside this component (async items): watch the line itself.
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const crumbs = this.crumbsElement();
+            if (!crumbs) {
+                return;
+            }
+            this.updateHasCrumbs();
+            if (typeof MutationObserver === 'function') {
+                const observer = new MutationObserver(() => this.updateHasCrumbs());
+                observer.observe(crumbs, { childList: true, subtree: true, characterData: true });
+                destroyRef.onDestroy(() => observer.disconnect());
+            }
+        });
+        // A tab strip wider than the screen (phones) scrolls sideways: keep the active tab visible.
+        afterRenderEffect(() => {
+            const id = this.activeTabId();
+            this.tabs();
+            if (id) {
+                this.revealTab(id);
+            }
+        });
+    }
+    /** Scrolls the tab strip (only it, never the page) so the tab is fully visible. */
+    revealTab(id) {
+        const strip = this.host.nativeElement.querySelector('.space-tabs');
+        const tab = Array.from(strip?.querySelectorAll('[data-tab-id]') ?? [])
+            .find(button => button.getAttribute('data-tab-id') === id);
+        if (!strip || !tab) {
+            return;
+        }
+        const stripRect = strip.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        const margin = 16;
+        if (tabRect.left < stripRect.left) {
+            strip.scrollLeft += tabRect.left - stripRect.left - margin;
+        }
+        else if (tabRect.right > stripRect.right) {
+            strip.scrollLeft += tabRect.right - stripRect.right + margin;
+        }
+    }
+    crumbsElement() {
+        return this.host.nativeElement.querySelector('.space-crumbs');
+    }
+    updateHasCrumbs() {
+        const crumbs = this.crumbsElement();
+        const visible = !!crumbs && ((crumbs.textContent ?? '').trim().length > 0 ||
+            crumbs.querySelector('li, a, button, img, svg, input, [role="img"]') !== null);
+        if (visible !== this.hasCrumbs()) {
+            this.hasCrumbs.set(visible);
+        }
+    }
+    format(message, values) {
+        return formatShellMessage(message, values);
+    }
+    onBackClick(target) {
+        this.tabSelected.emit(target);
+    }
+    isGroup(tab) {
+        return !tab.navigable && tab.children.some(child => !child.separator);
+    }
+    menuId(tab) {
+        return `space-tab-menu-${tab.id}`;
+    }
+    onTabClick(tab, button) {
+        if (this.isGroup(tab)) {
+            if (this.openMenuId() === tab.id) {
+                this.closeMenu(false);
+            }
+            else {
+                this.openMenu(tab, button);
+            }
+            return;
+        }
+        this.closeMenu(false);
+        this.tabSelected.emit(tab);
+    }
+    onTabKeydown(tab, button, event) {
+        if (!this.isGroup(tab)) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.openMenu(tab, button);
+        }
+        else if (event.key === 'Escape' && this.openMenuId() === tab.id) {
+            event.preventDefault();
+            this.closeMenu(true);
+        }
+    }
+    onMenuItemClick(item) {
+        this.closeMenu(true);
+        this.tabSelected.emit(item);
+    }
+    onMenuKeydown(event) {
+        const items = this.menuItems();
+        const index = items.indexOf(event.target);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                items[(index + 1) % items.length]?.focus();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                items[(index - 1 + items.length) % items.length]?.focus();
+                break;
+            case 'Home':
+                event.preventDefault();
+                items[0]?.focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                items[items.length - 1]?.focus();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.closeMenu(true);
+                break;
+            case 'Tab':
+                this.closeMenu(false);
+                break;
+        }
+    }
+    onWrapperFocusOut(tab, event) {
+        const next = event.relatedTarget;
+        const wrapper = event.currentTarget;
+        if (this.openMenuId() === tab.id && !(next instanceof Node && wrapper.contains(next))) {
+            this.openMenuId.set(null);
+        }
+    }
+    onDocumentClick(target) {
+        if (!this.openMenuId()) {
+            return;
+        }
+        const wrapper = this.openWrapper();
+        if (!(target instanceof Node && wrapper?.contains(target))) {
+            this.openMenuId.set(null);
+        }
+    }
+    onViewportChange() {
+        this.openMenuId.set(null);
+    }
+    openMenu(tab, button) {
+        const rect = button.getBoundingClientRect();
+        this.menuPosition.set({ top: rect.bottom + 4, left: rect.left });
+        this.openMenuId.set(tab.id);
+        // The menu renders on the next change detection; focus its first entry then.
+        setTimeout(() => this.menuItems()[0]?.focus());
+    }
+    closeMenu(returnFocus) {
+        const wrapper = this.openWrapper();
+        this.openMenuId.set(null);
+        if (returnFocus) {
+            wrapper?.querySelector('.space-tab')?.focus();
+        }
+    }
+    openWrapper() {
+        const id = this.openMenuId();
+        if (!id) {
+            return null;
+        }
+        const wrappers = this.host.nativeElement.querySelectorAll('[data-wrapper-id]');
+        return Array.from(wrappers).find(wrapper => wrapper.getAttribute('data-wrapper-id') === id) ?? null;
+    }
+    menuItems() {
+        return Array.from(this.openWrapper()?.querySelectorAll('[role="menuitem"]') ?? []);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SpaceShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SpaceShellComponent, isStandalone: true, selector: "mm-space-shell", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, objectDetail: { classPropertyName: "objectDetail", publicName: "objectDetail", isSignal: true, isRequired: false, transformFunction: null }, showTabs: { classPropertyName: "showTabs", publicName: "showTabs", isSignal: true, isRequired: false, transformFunction: null }, backTarget: { classPropertyName: "backTarget", publicName: "backTarget", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabSelected: "tabSelected" }, host: { listeners: { "document:click": "onDocumentClick($event.target)", "window:resize": "onViewportChange()", "window:scroll": "onViewportChange()" } }, ngImport: i0, template: "<header class=\"space-head\" [class.no-area]=\"!area()\" [class.object-detail]=\"objectDetail()\" [class.no-crumbs]=\"!hasCrumbs()\">\n  <div class=\"space-crumbs\" [class.is-empty]=\"!hasCrumbs()\">\n    @if (objectDetail() && backTarget(); as back) {\n      <button type=\"button\"\n              class=\"space-back\"\n              data-testid=\"space-back\"\n              [attr.aria-label]=\"format(m().backTo, { target: back.text })\"\n              (click)=\"onBackClick(back)\">\n        <span aria-hidden=\"true\">\u2190</span> {{ back.text }}\n      </button>\n    }\n    <ng-content select=\"[spaceCrumbs]\"></ng-content>\n  </div>\n  <div class=\"space-title-row\">\n    @if (!objectDetail()) {\n      @if (area(); as current) {\n        <h1 class=\"space-title\">{{ heading() ?? current.text }}</h1>\n        @if (meta().length > 0) {\n          <p class=\"space-meta\">\n            @for (item of meta(); track item.label) {\n              <span class=\"space-meta-item\">{{ item.label }} <span class=\"space-meta-value\">{{ item.value }}</span></span>\n            }\n          </p>\n        }\n      }\n    }\n    @if (!objectDetail() && chips().length > 0) {\n      <ul class=\"space-chips\" [attr.aria-label]=\"m().statusChips\">\n        @for (chip of chips(); track chip.label) {\n          <li class=\"space-chip\" [class]=\"'space-chip status-' + chip.status\">{{ chip.label }}</li>\n        }\n      </ul>\n    }\n    <div class=\"space-actions\">\n      <ng-content select=\"[spaceActions]\"></ng-content>\n    </div>\n  </div>\n  @if (area(); as current) {\n    @if (!objectDetail() && showTabs() && tabs().length > 0) {\n      <nav class=\"space-tabs\" [attr.aria-label]=\"format(m().areaPages, { area: current.text })\" (scroll)=\"onViewportChange()\">\n        @for (tab of tabs(); track tab.id) {\n          @if (tab.separator) {\n            <span class=\"tab-separator\" aria-hidden=\"true\"></span>\n          } @else {\n            <div class=\"tab-wrapper\" [attr.data-wrapper-id]=\"tab.id\" (focusout)=\"onWrapperFocusOut(tab, $event)\">\n              <button #tabButton\n                      type=\"button\"\n                      class=\"space-tab\"\n                      [attr.data-tab-id]=\"tab.id\"\n                      [attr.aria-current]=\"tab.id === activeTabId() ? 'page' : null\"\n                      [attr.aria-haspopup]=\"isGroup(tab) ? 'menu' : null\"\n                      [attr.aria-expanded]=\"isGroup(tab) ? openMenuId() === tab.id : null\"\n                      [attr.aria-controls]=\"isGroup(tab) && openMenuId() === tab.id ? menuId(tab) : null\"\n                      [title]=\"tab.tooltip ?? ''\"\n                      (keydown)=\"onTabKeydown(tab, tabButton, $event)\"\n                      (click)=\"onTabClick(tab, tabButton)\">\n                {{ tab.text }}\n                @if (tab.external) {\n                  <span class=\"tab-external\" aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span>\n                }\n                @if (isGroup(tab)) {\n                  <span class=\"tab-caret\" aria-hidden=\"true\">\u25BE</span>\n                }\n              </button>\n              @if (isGroup(tab) && openMenuId() === tab.id) {\n                <ul class=\"tab-menu\"\n                    role=\"menu\"\n                    [id]=\"menuId(tab)\"\n                    [attr.aria-label]=\"tab.text\"\n                    [style.top.px]=\"menuPosition().top\"\n                    [style.left.px]=\"menuPosition().left\"\n                    (keydown)=\"onMenuKeydown($event)\">\n                  @for (item of tab.children; track item.id) {\n                    @if (!item.separator) {\n                      <li role=\"none\">\n                        <button type=\"button\" role=\"menuitem\" tabindex=\"-1\" class=\"tab-menu-item\" (click)=\"onMenuItemClick(item)\">\n                          {{ item.text }}\n                          @if (item.external) {\n                            <span class=\"tab-external\" aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span>\n                          }\n                        </button>\n                      </li>\n                    }\n                  }\n                </ul>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n  }\n</header>\n", styles: [":host{display:block}.space-head{padding:var(--theme-space-3) var(--theme-space-6) 0;background:var(--theme-bg-app);border-bottom:1px solid var(--theme-border-subtle)}.space-head.no-area{padding-bottom:var(--theme-space-2)}.space-head.object-detail{display:flex;flex-wrap:wrap;align-items:center;gap:var(--theme-space-2) var(--theme-space-4);padding-bottom:0;border-bottom:0}.space-head.object-detail .space-crumbs{display:flex;align-items:center;gap:var(--theme-space-3);flex:1 1 auto;min-width:0}.space-head.object-detail .space-crumbs ::ng-deep kendo-breadcrumb{flex:1 1 auto;min-width:0}.space-head.object-detail .space-title-row{margin-top:0}.space-back{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 6px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-xs);background:none;color:var(--theme-text-secondary);font:inherit;cursor:pointer;white-space:nowrap}.space-back:hover{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.space-back:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.space-crumbs{min-height:20px;font-size:.75rem;color:var(--theme-text-muted)}.space-crumbs.is-empty{min-height:0;height:0;overflow:hidden}.space-head.no-crumbs:not(.object-detail) .space-title-row{margin-top:0}.space-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--theme-space-2) var(--theme-space-4);margin-top:var(--theme-space-1)}.space-title{margin:0;font-family:var(--theme-font-display);font-size:1.25rem;line-height:1.75rem;font-weight:600;color:var(--theme-text-primary)}.space-meta{display:flex;flex-wrap:wrap;gap:var(--theme-space-3);margin:0;font-size:.8125rem;color:var(--theme-text-secondary)}.space-meta-value{font-family:var(--theme-font-mono);color:var(--theme-text-primary)}.space-chips{display:flex;flex-wrap:wrap;gap:var(--theme-space-2);margin:0;padding:0;list-style:none}.space-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:var(--theme-radius-xs);font-size:.71875rem;font-weight:500;white-space:nowrap}.space-chip:before{content:\"\";width:6px;height:6px;border-radius:50%;background:currentColor}.space-chip.status-success{color:var(--theme-status-success);background:var(--theme-status-success-subtle)}.space-chip.status-warning{color:var(--theme-status-warning);background:var(--theme-status-warning-subtle)}.space-chip.status-error{color:var(--theme-status-error);background:var(--theme-status-error-subtle)}.space-chip.status-info{color:var(--theme-status-info);background:var(--theme-status-info-subtle)}.space-chip.status-neutral{color:var(--theme-status-neutral);background:var(--theme-status-neutral-subtle)}.space-actions{display:flex;align-items:center;gap:var(--theme-space-2);margin-left:auto}.space-tabs{display:flex;align-items:stretch;gap:2px;margin-top:var(--theme-space-3);overflow-x:auto;scrollbar-width:thin}.tab-wrapper{position:relative;display:flex}.space-tab{display:inline-flex;align-items:center;gap:var(--theme-space-1);padding:var(--theme-space-2) var(--theme-space-3);border:0;border-bottom:2px solid transparent;background:none;color:var(--theme-text-secondary);font:inherit;white-space:nowrap;cursor:pointer}.space-tab:hover{color:var(--theme-text-primary)}.space-tab:focus-visible{outline:none;box-shadow:var(--theme-focus-ring);border-radius:var(--theme-radius-sm)}.space-tab[aria-current=page]{color:var(--theme-text-primary);font-weight:500;border-bottom-color:var(--theme-accent)}.tab-separator{align-self:center;width:1px;height:16px;margin-inline:var(--theme-space-2);background:var(--theme-border-default)}.tab-external,.tab-caret{color:var(--theme-text-muted);font-size:.75rem}.tab-menu{position:fixed;z-index:20;min-width:200px;margin:0;padding:var(--theme-space-1);list-style:none;background:var(--theme-bg-overlay);border-radius:var(--theme-radius-lg);box-shadow:var(--theme-shadow-popup)}.tab-menu-item{display:flex;align-items:center;gap:var(--theme-space-2);width:100%;padding:var(--theme-space-1) var(--theme-space-2);border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-secondary);font:inherit;text-align:left;cursor:pointer}.tab-menu-item:hover,.tab-menu-item:focus-visible{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.tab-menu-item:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}@media(max-width:640px){.space-head{padding:var(--theme-space-2) var(--theme-space-4) 0}.space-crumbs{overflow:hidden;white-space:nowrap}.space-title-row{flex-wrap:nowrap;gap:var(--theme-space-2)}.space-title{flex:none;font-size:1.0625rem;line-height:1.5rem}.space-meta{display:none}.space-chips{flex:1 1 auto;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}.space-actions{flex:none;margin-left:auto}.space-tabs{margin-top:var(--theme-space-1);scrollbar-width:none}.space-tabs::-webkit-scrollbar{display:none}.space-tab{padding:var(--theme-space-2)}.space-head.object-detail{flex-wrap:nowrap}}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SpaceShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-space-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"space-head\" [class.no-area]=\"!area()\" [class.object-detail]=\"objectDetail()\" [class.no-crumbs]=\"!hasCrumbs()\">\n  <div class=\"space-crumbs\" [class.is-empty]=\"!hasCrumbs()\">\n    @if (objectDetail() && backTarget(); as back) {\n      <button type=\"button\"\n              class=\"space-back\"\n              data-testid=\"space-back\"\n              [attr.aria-label]=\"format(m().backTo, { target: back.text })\"\n              (click)=\"onBackClick(back)\">\n        <span aria-hidden=\"true\">\u2190</span> {{ back.text }}\n      </button>\n    }\n    <ng-content select=\"[spaceCrumbs]\"></ng-content>\n  </div>\n  <div class=\"space-title-row\">\n    @if (!objectDetail()) {\n      @if (area(); as current) {\n        <h1 class=\"space-title\">{{ heading() ?? current.text }}</h1>\n        @if (meta().length > 0) {\n          <p class=\"space-meta\">\n            @for (item of meta(); track item.label) {\n              <span class=\"space-meta-item\">{{ item.label }} <span class=\"space-meta-value\">{{ item.value }}</span></span>\n            }\n          </p>\n        }\n      }\n    }\n    @if (!objectDetail() && chips().length > 0) {\n      <ul class=\"space-chips\" [attr.aria-label]=\"m().statusChips\">\n        @for (chip of chips(); track chip.label) {\n          <li class=\"space-chip\" [class]=\"'space-chip status-' + chip.status\">{{ chip.label }}</li>\n        }\n      </ul>\n    }\n    <div class=\"space-actions\">\n      <ng-content select=\"[spaceActions]\"></ng-content>\n    </div>\n  </div>\n  @if (area(); as current) {\n    @if (!objectDetail() && showTabs() && tabs().length > 0) {\n      <nav class=\"space-tabs\" [attr.aria-label]=\"format(m().areaPages, { area: current.text })\" (scroll)=\"onViewportChange()\">\n        @for (tab of tabs(); track tab.id) {\n          @if (tab.separator) {\n            <span class=\"tab-separator\" aria-hidden=\"true\"></span>\n          } @else {\n            <div class=\"tab-wrapper\" [attr.data-wrapper-id]=\"tab.id\" (focusout)=\"onWrapperFocusOut(tab, $event)\">\n              <button #tabButton\n                      type=\"button\"\n                      class=\"space-tab\"\n                      [attr.data-tab-id]=\"tab.id\"\n                      [attr.aria-current]=\"tab.id === activeTabId() ? 'page' : null\"\n                      [attr.aria-haspopup]=\"isGroup(tab) ? 'menu' : null\"\n                      [attr.aria-expanded]=\"isGroup(tab) ? openMenuId() === tab.id : null\"\n                      [attr.aria-controls]=\"isGroup(tab) && openMenuId() === tab.id ? menuId(tab) : null\"\n                      [title]=\"tab.tooltip ?? ''\"\n                      (keydown)=\"onTabKeydown(tab, tabButton, $event)\"\n                      (click)=\"onTabClick(tab, tabButton)\">\n                {{ tab.text }}\n                @if (tab.external) {\n                  <span class=\"tab-external\" aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span>\n                }\n                @if (isGroup(tab)) {\n                  <span class=\"tab-caret\" aria-hidden=\"true\">\u25BE</span>\n                }\n              </button>\n              @if (isGroup(tab) && openMenuId() === tab.id) {\n                <ul class=\"tab-menu\"\n                    role=\"menu\"\n                    [id]=\"menuId(tab)\"\n                    [attr.aria-label]=\"tab.text\"\n                    [style.top.px]=\"menuPosition().top\"\n                    [style.left.px]=\"menuPosition().left\"\n                    (keydown)=\"onMenuKeydown($event)\">\n                  @for (item of tab.children; track item.id) {\n                    @if (!item.separator) {\n                      <li role=\"none\">\n                        <button type=\"button\" role=\"menuitem\" tabindex=\"-1\" class=\"tab-menu-item\" (click)=\"onMenuItemClick(item)\">\n                          {{ item.text }}\n                          @if (item.external) {\n                            <span class=\"tab-external\" aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span>\n                          }\n                        </button>\n                      </li>\n                    }\n                  }\n                </ul>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n  }\n</header>\n", styles: [":host{display:block}.space-head{padding:var(--theme-space-3) var(--theme-space-6) 0;background:var(--theme-bg-app);border-bottom:1px solid var(--theme-border-subtle)}.space-head.no-area{padding-bottom:var(--theme-space-2)}.space-head.object-detail{display:flex;flex-wrap:wrap;align-items:center;gap:var(--theme-space-2) var(--theme-space-4);padding-bottom:0;border-bottom:0}.space-head.object-detail .space-crumbs{display:flex;align-items:center;gap:var(--theme-space-3);flex:1 1 auto;min-width:0}.space-head.object-detail .space-crumbs ::ng-deep kendo-breadcrumb{flex:1 1 auto;min-width:0}.space-head.object-detail .space-title-row{margin-top:0}.space-back{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 6px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-xs);background:none;color:var(--theme-text-secondary);font:inherit;cursor:pointer;white-space:nowrap}.space-back:hover{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.space-back:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.space-crumbs{min-height:20px;font-size:.75rem;color:var(--theme-text-muted)}.space-crumbs.is-empty{min-height:0;height:0;overflow:hidden}.space-head.no-crumbs:not(.object-detail) .space-title-row{margin-top:0}.space-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--theme-space-2) var(--theme-space-4);margin-top:var(--theme-space-1)}.space-title{margin:0;font-family:var(--theme-font-display);font-size:1.25rem;line-height:1.75rem;font-weight:600;color:var(--theme-text-primary)}.space-meta{display:flex;flex-wrap:wrap;gap:var(--theme-space-3);margin:0;font-size:.8125rem;color:var(--theme-text-secondary)}.space-meta-value{font-family:var(--theme-font-mono);color:var(--theme-text-primary)}.space-chips{display:flex;flex-wrap:wrap;gap:var(--theme-space-2);margin:0;padding:0;list-style:none}.space-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:var(--theme-radius-xs);font-size:.71875rem;font-weight:500;white-space:nowrap}.space-chip:before{content:\"\";width:6px;height:6px;border-radius:50%;background:currentColor}.space-chip.status-success{color:var(--theme-status-success);background:var(--theme-status-success-subtle)}.space-chip.status-warning{color:var(--theme-status-warning);background:var(--theme-status-warning-subtle)}.space-chip.status-error{color:var(--theme-status-error);background:var(--theme-status-error-subtle)}.space-chip.status-info{color:var(--theme-status-info);background:var(--theme-status-info-subtle)}.space-chip.status-neutral{color:var(--theme-status-neutral);background:var(--theme-status-neutral-subtle)}.space-actions{display:flex;align-items:center;gap:var(--theme-space-2);margin-left:auto}.space-tabs{display:flex;align-items:stretch;gap:2px;margin-top:var(--theme-space-3);overflow-x:auto;scrollbar-width:thin}.tab-wrapper{position:relative;display:flex}.space-tab{display:inline-flex;align-items:center;gap:var(--theme-space-1);padding:var(--theme-space-2) var(--theme-space-3);border:0;border-bottom:2px solid transparent;background:none;color:var(--theme-text-secondary);font:inherit;white-space:nowrap;cursor:pointer}.space-tab:hover{color:var(--theme-text-primary)}.space-tab:focus-visible{outline:none;box-shadow:var(--theme-focus-ring);border-radius:var(--theme-radius-sm)}.space-tab[aria-current=page]{color:var(--theme-text-primary);font-weight:500;border-bottom-color:var(--theme-accent)}.tab-separator{align-self:center;width:1px;height:16px;margin-inline:var(--theme-space-2);background:var(--theme-border-default)}.tab-external,.tab-caret{color:var(--theme-text-muted);font-size:.75rem}.tab-menu{position:fixed;z-index:20;min-width:200px;margin:0;padding:var(--theme-space-1);list-style:none;background:var(--theme-bg-overlay);border-radius:var(--theme-radius-lg);box-shadow:var(--theme-shadow-popup)}.tab-menu-item{display:flex;align-items:center;gap:var(--theme-space-2);width:100%;padding:var(--theme-space-1) var(--theme-space-2);border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-secondary);font:inherit;text-align:left;cursor:pointer}.tab-menu-item:hover,.tab-menu-item:focus-visible{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.tab-menu-item:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}@media(max-width:640px){.space-head{padding:var(--theme-space-2) var(--theme-space-4) 0}.space-crumbs{overflow:hidden;white-space:nowrap}.space-title-row{flex-wrap:nowrap;gap:var(--theme-space-2)}.space-title{flex:none;font-size:1.0625rem;line-height:1.5rem}.space-meta{display:none}.space-chips{flex:1 1 auto;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}.space-actions{flex:none;margin-left:auto}.space-tabs{margin-top:var(--theme-space-1);scrollbar-width:none}.space-tabs::-webkit-scrollbar{display:none}.space-tab{padding:var(--theme-space-2)}.space-head.object-detail{flex-wrap:nowrap}}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], activeTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabId", required: false }] }], chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], objectDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectDetail", required: false }] }], showTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTabs", required: false }] }], backTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "backTarget", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], tabSelected: [{ type: i0.Output, args: ["tabSelected"] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }], onViewportChange: [{
+                type: HostListener,
+                args: ['window:resize']
+            }, {
+                type: HostListener,
+                args: ['window:scroll']
+            }] } });
+
+let nextSideNavId = 0;
+/**
+ * The one navigation of the Settings space (concept §5.6, AB#5523): "All settings" plus the
+ * categories of the Settings area on the left, on every Settings page — the home, the category
+ * pages, the generated forms and the hand-written pages (secrets, identity providers, …). The
+ * space header shows no tab strip in Settings, so opening a category never switches between two
+ * navigation layouts.
+ *
+ * The entries are the area's children from the command tree (the same entries as the rail
+ * flyout); counts and the re-entry badge come from {@link SettingsSideNavBadgesService}.
+ * Navigation, not ARIA tabs: a `nav` with buttons and `aria-current="page"` on the active one.
+ *
+ * Groups (AB#5621, optional): `groups` puts headings over the categories they list (in the
+ * group's order); categories in no group follow without a heading, groups without a visible
+ * category are left out. Without groups the list is flat, as before.
+ *
+ * Labels are shown exactly as given (AB#5621): the area name, the categories and the group
+ * headings keep the host's case — no lower-casing, no CSS `text-transform`. A language that
+ * needs a different case in "All {area}" sets `allOfArea` to the whole text.
+ */
+class SettingsSideNavComponent {
+    area = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
+    activeTabId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTabId" }] : /* istanbul ignore next */ []));
+    /** The Settings home is open ("All settings" is the current entry). */
+    homeActive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "homeActive" }] : /* istanbul ignore next */ []));
+    badges = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badges" }] : /* istanbul ignore next */ []));
+    /** Optional headings over the categories; empty keeps the flat list. */
+    groups = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /** Translations; members left out fall back to {@link SHELL_MESSAGES}, then English. */
+    messages = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    m = shellMessages(this.messages);
+    homeSelected = output();
+    tabSelected = output();
+    categories = computed(() => this.area().children.filter((child) => !child.separator), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+    sections = computed(() => {
+        const categories = this.categories();
+        const groups = this.groups();
+        if (groups.length === 0) {
+            return [{ id: '', label: null, categories }];
+        }
+        const byId = new Map(categories.map((category) => [category.id, category]));
+        const placed = new Set();
+        const sections = [];
+        for (const group of groups) {
+            const members = group.tabIds
+                .filter((id) => byId.has(id) && !placed.has(id))
+                .map((id) => byId.get(id));
+            members.forEach((member) => placed.add(member.id));
+            if (members.length > 0) {
+                sections.push({ id: group.id, label: group.label, categories: members });
+            }
+        }
+        const rest = categories.filter((category) => !placed.has(category.id));
+        if (rest.length > 0) {
+            sections.push({ id: '', label: null, categories: rest });
+        }
+        return sections;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    /** Unique per instance, so two side navs on one page never share heading ids. */
+    instanceId = nextSideNavId++;
+    groupHeadingId(section) {
+        return `mm-settings-side-nav-${this.instanceId}-group-${section.id}`;
+    }
+    navLabel = computed(() => formatShellMessage(this.m().areaCategories, { area: this.area().text }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []));
+    homeLabel = computed(() => formatShellMessage(this.m().allOfArea, { area: this.area().text }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "homeLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SettingsSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SettingsSideNavComponent, isStandalone: true, selector: "mm-settings-side-nav", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: true, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, homeActive: { classPropertyName: "homeActive", publicName: "homeActive", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { homeSelected: "homeSelected", tabSelected: "tabSelected" }, ngImport: i0, template: "<nav class=\"side-nav\" [attr.aria-label]=\"navLabel()\">\n  <button type=\"button\"\n          class=\"side-nav__item\"\n          data-side-nav=\"home\"\n          [attr.aria-current]=\"homeActive() ? 'page' : null\"\n          (click)=\"homeSelected.emit()\">\n    <span>{{ homeLabel() }}</span>\n  </button>\n  @for (section of sections(); track section.id) {\n    @if (section.label) {\n      <div class=\"side-nav__group\" role=\"group\" [attr.data-group]=\"section.id\" [attr.aria-labelledby]=\"groupHeadingId(section)\">\n        <span class=\"side-nav__group-label\" [id]=\"groupHeadingId(section)\">{{ section.label }}</span>\n        @for (category of section.categories; track category.id) {\n          <ng-container *ngTemplateOutlet=\"item; context: { $implicit: category }\"></ng-container>\n        }\n      </div>\n    } @else {\n      @for (category of section.categories; track category.id) {\n        <ng-container *ngTemplateOutlet=\"item; context: { $implicit: category }\"></ng-container>\n      }\n    }\n  }\n</nav>\n\n<ng-template #item let-category>\n  <button type=\"button\"\n          class=\"side-nav__item\"\n          [attr.data-tab-id]=\"category.id\"\n          [attr.aria-current]=\"!homeActive() && category.id === activeTabId() ? 'page' : null\"\n          [title]=\"category.tooltip ?? ''\"\n          (click)=\"tabSelected.emit(category)\">\n    <span>{{ category.text }}</span>\n    @if (badges()[category.id]; as badge) {\n      <span class=\"side-nav__count\"\n            [class.is-attention]=\"badge.attention\"\n            [attr.data-badge]=\"category.id\"\n            [attr.aria-label]=\"badge.label ?? null\">{{ badge.count }}</span>\n    }\n  </button>\n</ng-template>\n", styles: [":host{display:block}.side-nav{display:flex;flex-direction:column;gap:2px;padding:var(--theme-space-4) var(--theme-space-3) var(--theme-space-4) var(--theme-space-6)}.side-nav__item{display:flex;justify-content:space-between;align-items:center;gap:var(--theme-space-2);width:100%;padding:8px 12px;border:0;border-radius:6px;background:none;color:var(--theme-text-secondary);font:inherit;text-align:left;cursor:pointer}.side-nav__item:hover{background:var(--theme-bg-elevated);color:var(--theme-text-primary)}.side-nav__item:focus-visible{outline:2px solid var(--theme-accent);outline-offset:-2px}.side-nav__item[aria-current=page]{background:var(--theme-bg-elevated);color:var(--theme-text-accent);font-weight:600}.side-nav__count{font-size:.75rem;color:var(--theme-text-muted)}.side-nav__count.is-attention{min-width:18px;padding:0 5px;border-radius:var(--theme-radius-xs);background:var(--theme-status-warning-subtle);color:var(--theme-status-warning);font-size:.7rem;font-weight:600;line-height:18px;text-align:center}.side-nav__group{display:flex;flex-direction:column;gap:2px;margin-top:var(--theme-space-3)}.side-nav__group-label{padding:0 12px var(--theme-space-1);color:var(--theme-text-muted);font-size:.6875rem;font-weight:600;letter-spacing:.02em}@media(max-width:640px){.side-nav{flex-direction:row;overflow-x:auto;padding:var(--theme-space-2) var(--theme-space-4)}.side-nav__group{display:contents}.side-nav__group-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.side-nav__item{width:auto;flex:0 0 auto;white-space:nowrap}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SettingsSideNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-settings-side-nav', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"side-nav\" [attr.aria-label]=\"navLabel()\">\n  <button type=\"button\"\n          class=\"side-nav__item\"\n          data-side-nav=\"home\"\n          [attr.aria-current]=\"homeActive() ? 'page' : null\"\n          (click)=\"homeSelected.emit()\">\n    <span>{{ homeLabel() }}</span>\n  </button>\n  @for (section of sections(); track section.id) {\n    @if (section.label) {\n      <div class=\"side-nav__group\" role=\"group\" [attr.data-group]=\"section.id\" [attr.aria-labelledby]=\"groupHeadingId(section)\">\n        <span class=\"side-nav__group-label\" [id]=\"groupHeadingId(section)\">{{ section.label }}</span>\n        @for (category of section.categories; track category.id) {\n          <ng-container *ngTemplateOutlet=\"item; context: { $implicit: category }\"></ng-container>\n        }\n      </div>\n    } @else {\n      @for (category of section.categories; track category.id) {\n        <ng-container *ngTemplateOutlet=\"item; context: { $implicit: category }\"></ng-container>\n      }\n    }\n  }\n</nav>\n\n<ng-template #item let-category>\n  <button type=\"button\"\n          class=\"side-nav__item\"\n          [attr.data-tab-id]=\"category.id\"\n          [attr.aria-current]=\"!homeActive() && category.id === activeTabId() ? 'page' : null\"\n          [title]=\"category.tooltip ?? ''\"\n          (click)=\"tabSelected.emit(category)\">\n    <span>{{ category.text }}</span>\n    @if (badges()[category.id]; as badge) {\n      <span class=\"side-nav__count\"\n            [class.is-attention]=\"badge.attention\"\n            [attr.data-badge]=\"category.id\"\n            [attr.aria-label]=\"badge.label ?? null\">{{ badge.count }}</span>\n    }\n  </button>\n</ng-template>\n", styles: [":host{display:block}.side-nav{display:flex;flex-direction:column;gap:2px;padding:var(--theme-space-4) var(--theme-space-3) var(--theme-space-4) var(--theme-space-6)}.side-nav__item{display:flex;justify-content:space-between;align-items:center;gap:var(--theme-space-2);width:100%;padding:8px 12px;border:0;border-radius:6px;background:none;color:var(--theme-text-secondary);font:inherit;text-align:left;cursor:pointer}.side-nav__item:hover{background:var(--theme-bg-elevated);color:var(--theme-text-primary)}.side-nav__item:focus-visible{outline:2px solid var(--theme-accent);outline-offset:-2px}.side-nav__item[aria-current=page]{background:var(--theme-bg-elevated);color:var(--theme-text-accent);font-weight:600}.side-nav__count{font-size:.75rem;color:var(--theme-text-muted)}.side-nav__count.is-attention{min-width:18px;padding:0 5px;border-radius:var(--theme-radius-xs);background:var(--theme-status-warning-subtle);color:var(--theme-status-warning);font-size:.7rem;font-weight:600;line-height:18px;text-align:center}.side-nav__group{display:flex;flex-direction:column;gap:2px;margin-top:var(--theme-space-3)}.side-nav__group-label{padding:0 12px var(--theme-space-1);color:var(--theme-text-muted);font-size:.6875rem;font-weight:600;letter-spacing:.02em}@media(max-width:640px){.side-nav{flex-direction:row;overflow-x:auto;padding:var(--theme-space-2) var(--theme-space-4)}.side-nav__group{display:contents}.side-nav__group-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.side-nav__item{width:auto;flex:0 0 auto;white-space:nowrap}}\n"] }]
+        }], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: true }] }], activeTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabId", required: false }] }], homeActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeActive", required: false }] }], badges: [{ type: i0.Input, args: [{ isSignal: true, alias: "badges", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], homeSelected: [{ type: i0.Output, args: ["homeSelected"] }], tabSelected: [{ type: i0.Output, args: ["tabSelected"] }] } });
+
+/**
+ * Counts and badges of the Settings side navigation, keyed by shell tab id
+ * (`settings-<category>`). The Settings home fills them when it has loaded its
+ * categories (forms + custom pages) and the secrets inventory; until then, and on a
+ * deep link to another Settings page, the categories are shown without counts.
+ */
+class SettingsSideNavBadgesService {
+    _badges = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_badges" }] : /* istanbul ignore next */ []));
+    badges = this._badges.asReadonly();
+    set(badges) {
+        this._badges.set(badges);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SettingsSideNavBadgesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SettingsSideNavBadgesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SettingsSideNavBadgesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** The default language list: English only, shown as a fact instead of a choice. */
+const DEFAULT_SHELL_LANGUAGES = [{ code: 'en', label: 'English' }];
+/**
+ * Avatar menu of the top bar. Besides sign-out and the profile link it holds
+ * the personal settings (concept §3.1, §10): theme mode, density and
+ * language. Tenant configuration belongs elsewhere (the Settings space).
+ *
+ * - **Session**: `sessionLoading` shows a placeholder, `user` null offers "Sign in"
+ *   (`signIn` output), otherwise the avatar opens the panel; "Sign out" emits `signOut`.
+ *   The host wires its auth service (e.g. shared-auth's `AuthorizeService`).
+ * - **Theme**: `theme` is the current preference, a choice emits `themeChange` (e.g. wired to
+ *   octo-ui's `ThemeModeService`).
+ * - **Density** lists `densityOptions` (none: the group is left out); a choice emits
+ *   `densityChange`, the host applies and stores it and feeds `density` back.
+ * - **Language** lists `languages`. With one language (the default, English) the entry
+ *   states it instead of offering a choice that changes nothing; with several it is a
+ *   radio group that emits `languageChange`. Persisting the choice (per user) and
+ *   switching the translations is the host's job; it feeds the current code back
+ *   through `language`.
+ * - **Version** shows `version` when set.
+ * - **Host entries** (AB#5621): `items` lists the host's own entries above "Manage profile" and
+ *   "Sign out"; choosing one closes the panel and emits `itemSelected` (entries with `href`
+ *   open in a new tab instead). For richer content the host may project elements with the
+ *   `shellUserMenuItems` attribute into the same place; a click on a button or link there
+ *   closes the panel as well.
+ *
+ * Opening moves focus into the panel, Escape or the avatar button close it
+ * and return focus to the avatar. Theme, density and language are native radio groups
+ * (arrow keys move and select, one tab stop each).
+ */
+class ShellUserMenuComponent {
+    host = inject(ElementRef);
+    /** The signed-in user; null shows the "Sign in" button. */
+    user = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    /** The session is being restored: a placeholder instead of avatar or sign-in. */
+    sessionLoading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sessionLoading" }] : /* istanbul ignore next */ []));
+    /** The current theme preference. */
+    theme = input('system', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    /** Density choices; empty leaves the density group out. */
+    densityOptions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "densityOptions" }] : /* istanbul ignore next */ []));
+    /** The current density mode (one of `densityOptions`). */
+    density = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    /** Languages to choose from; one entry is shown as a fact, none hides the entry. */
+    languages = input(DEFAULT_SHELL_LANGUAGES, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []));
+    /** The current language code; defaults to the first of `languages`. */
+    language = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    /** App version shown at the bottom of the panel; null leaves the line out. */
+    version = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "version" }] : /* istanbul ignore next */ []));
+    /** Host entries above "Manage profile" / "Sign out"; empty leaves the list out. */
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Translations; members left out fall back to {@link SHELL_MESSAGES}, then English. */
+    messages = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    signIn = output();
+    signOut = output();
+    /** The person picked a theme preference. */
+    themeChange = output();
+    /** The person picked a density mode. */
+    densityChange = output();
+    /** The person picked a language (its code). */
+    languageChange = output();
+    /** The person chose a host entry without `href`. */
+    itemSelected = output();
+    m = shellMessages(this.messages);
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    initials = computed(() => this.user()?.initials || '?', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    fullName = computed(() => this.user()?.displayName || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullName" }] : /* istanbul ignore next */ []));
+    userName = computed(() => this.user()?.userName || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
+    profileUri = computed(() => this.user()?.profileUri || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "profileUri" }] : /* istanbul ignore next */ []));
+    avatarLabel = computed(() => {
+        const name = this.fullName();
+        return name ? formatShellMessage(this.m().accountAndPreferencesOf, { name }) : this.m().accountAndPreferences;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatarLabel" }] : /* istanbul ignore next */ []));
+    versionText = computed(() => {
+        const version = this.version();
+        return version ? formatShellMessage(this.m().version, { version }) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "versionText" }] : /* istanbul ignore next */ []));
+    themeOptions = computed(() => [
+        { value: 'system', label: this.m().themeSystem },
+        { value: 'light', label: this.m().themeLight },
+        { value: 'dark', label: this.m().themeDark }
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
+    /** The code of the current language: `language`, else the first of `languages`. */
+    currentLanguage = computed(() => this.language() ?? this.languages()[0]?.code ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLanguage" }] : /* istanbul ignore next */ []));
+    currentLanguageLabel = computed(() => {
+        const code = this.currentLanguage();
+        const languages = this.languages();
+        return (languages.find(language => language.code === code) ?? languages[0])?.label ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLanguageLabel" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.open()) {
+            this.close(true);
+        }
+        else {
+            this.open.set(true);
+            // Move focus into the panel once it is rendered: the checked theme radio.
+            setTimeout(() => this.host.nativeElement.querySelector('.user-panel input:checked')?.focus());
+        }
+    }
+    /** Closes the panel; `restoreFocus` puts focus back on the avatar button. */
+    close(restoreFocus) {
+        this.open.set(false);
+        if (restoreFocus) {
+            this.host.nativeElement.querySelector('.avatar-button')?.focus();
+        }
+    }
+    setTheme(value) {
+        this.themeChange.emit(value);
+    }
+    setDensity(mode) {
+        this.densityChange.emit(mode);
+    }
+    setLanguage(code) {
+        if (code !== this.currentLanguage()) {
+            this.languageChange.emit(code);
+        }
+    }
+    /** A host entry: close the panel (focus back on the avatar), then let the host act. */
+    selectItem(item) {
+        this.close(true);
+        this.itemSelected.emit(item);
+    }
+    /** An external host entry opens in a new tab; the panel closes and focus returns to the avatar. */
+    followItemLink() {
+        this.close(true);
+    }
+    /** A click on a button or link of the projected `shellUserMenuItems` content closes the panel. */
+    onProjectedClick(event) {
+        const target = event.target;
+        if (target instanceof Element && target.closest('button, a[href]')) {
+            this.close(true);
+        }
+    }
+    login() {
+        this.signIn.emit();
+    }
+    logout() {
+        this.open.set(false);
+        this.signOut.emit();
+    }
+    onEscape() {
+        if (this.open()) {
+            this.close(true);
+        }
+    }
+    /** A click outside closes without stealing focus from what was clicked. */
+    onDocumentClick(target) {
+        if (this.open() && target instanceof Node && !this.host.nativeElement.contains(target)) {
+            this.close(false);
+        }
+    }
+    /** Tabbing out of the panel closes it. */
+    onPanelFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node && !this.host.nativeElement.contains(next)) {
+            this.close(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ShellUserMenuComponent, isStandalone: true, selector: "mm-shell-user-menu", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, sessionLoading: { classPropertyName: "sessionLoading", publicName: "sessionLoading", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, densityOptions: { classPropertyName: "densityOptions", publicName: "densityOptions", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signIn: "signIn", signOut: "signOut", themeChange: "themeChange", densityChange: "densityChange", languageChange: "languageChange", itemSelected: "itemSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:click": "onDocumentClick($event.target)" } }, ngImport: i0, template: "@if (sessionLoading()) {\n  <span class=\"avatar placeholder\" aria-hidden=\"true\"></span>\n} @else if (!user()) {\n  <button type=\"button\" class=\"sign-in\" (click)=\"login()\">{{ m().signIn }}</button>\n} @else {\n  <button type=\"button\"\n          class=\"avatar-button\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"open()\"\n          aria-controls=\"user-menu-panel\"\n          [attr.aria-label]=\"avatarLabel()\"\n          (click)=\"toggle()\">\n    <span class=\"avatar\">{{ initials() }}</span>\n  </button>\n  @if (open()) {\n    <div class=\"user-panel\" id=\"user-menu-panel\" role=\"dialog\" [attr.aria-label]=\"m().accountAndPreferences\" (focusout)=\"onPanelFocusOut($event)\">\n      <div class=\"user-identity\">\n        <span class=\"avatar large\" aria-hidden=\"true\">{{ initials() }}</span>\n        <div class=\"user-names\">\n          @if (fullName(); as name) {\n            <span class=\"user-full-name\">{{ name }}</span>\n          }\n          @if (userName(); as account) {\n            <span class=\"user-login\">{{ account }}</span>\n          }\n        </div>\n      </div>\n\n      <fieldset class=\"pref\">\n        <legend class=\"pref-label\">{{ m().theme }}</legend>\n        <div class=\"segmented\">\n          @for (option of themeOptions(); track option.value) {\n            <label class=\"segment\">\n              <input type=\"radio\"\n                     name=\"user-menu-theme\"\n                     class=\"pref-radio\"\n                     [value]=\"option.value\"\n                     [checked]=\"theme() === option.value\"\n                     (change)=\"setTheme(option.value)\" />\n              <span>{{ option.label }}</span>\n            </label>\n          }\n        </div>\n      </fieldset>\n\n      @if (densityOptions().length > 0) {\n        <fieldset class=\"pref\">\n          <legend class=\"pref-label\">{{ m().density }}</legend>\n          <div class=\"option-list\">\n            @for (option of densityOptions(); track option.mode) {\n              <label class=\"option\">\n                <input type=\"radio\"\n                       name=\"user-menu-density\"\n                       class=\"pref-radio\"\n                       [value]=\"option.mode\"\n                       [checked]=\"density() === option.mode\"\n                       (change)=\"setDensity(option.mode)\" />\n                <span>{{ option.label }}</span>\n              </label>\n            }\n          </div>\n        </fieldset>\n      }\n\n      @if (languages().length > 1) {\n        <fieldset class=\"pref\">\n          <legend class=\"pref-label\">{{ m().language }}</legend>\n          <div class=\"option-list\">\n            @for (option of languages(); track option.code) {\n              <label class=\"option\">\n                <input type=\"radio\"\n                       name=\"user-menu-language\"\n                       class=\"pref-radio\"\n                       [value]=\"option.code\"\n                       [checked]=\"currentLanguage() === option.code\"\n                       (change)=\"setLanguage(option.code)\" />\n                <span [attr.lang]=\"option.code\">{{ option.label }}</span>\n              </label>\n            }\n          </div>\n        </fieldset>\n      } @else if (currentLanguageLabel(); as languageLabel) {\n        <div class=\"pref\">\n          <span class=\"pref-label\">{{ m().language }}</span>\n          <span class=\"pref-value\">{{ languageLabel }}</span>\n        </div>\n      }\n\n      @if (items().length > 0) {\n        <ul class=\"user-items\" role=\"list\">\n          @for (item of items(); track item.id) {\n            <li>\n              @if (item.href) {\n                <a class=\"user-item\" [attr.data-user-item]=\"item.id\" [href]=\"item.href\" target=\"_blank\" rel=\"noopener noreferrer\" (click)=\"followItemLink()\">\n                  @if (item.svgIcon) {\n                    <kendo-svgicon class=\"user-item-icon\" [icon]=\"item.svgIcon\"></kendo-svgicon>\n                  }\n                  <span class=\"user-item-text\">{{ item.text }}</span>\n                  <span aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span>\n                </a>\n              } @else {\n                <button type=\"button\" class=\"user-item\" [attr.data-user-item]=\"item.id\" (click)=\"selectItem(item)\">\n                  @if (item.svgIcon) {\n                    <kendo-svgicon class=\"user-item-icon\" [icon]=\"item.svgIcon\"></kendo-svgicon>\n                  }\n                  <span class=\"user-item-text\">{{ item.text }}</span>\n                </button>\n              }\n            </li>\n          }\n        </ul>\n      }\n      <div class=\"user-items-slot\" (click)=\"onProjectedClick($event)\">\n        <ng-content select=\"[shellUserMenuItems]\"></ng-content>\n      </div>\n\n      <div class=\"user-actions\">\n        @if (profileUri(); as uri) {\n          <a class=\"action-link\" [href]=\"uri\" target=\"_blank\" rel=\"noopener noreferrer\">{{ m().manageProfile }} <span aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span></a>\n        }\n        <button type=\"button\" class=\"action-button\" (click)=\"logout()\">{{ m().signOut }}</button>\n      </div>\n\n      @if (versionText(); as text) {\n        <div class=\"user-version\">{{ text }}</div>\n      }\n    </div>\n  }\n}\n", styles: [":host{position:relative;display:inline-flex;align-items:center}.avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--theme-border-default);background:var(--theme-bg-overlay);color:var(--theme-text-secondary);font-family:var(--theme-font-display);font-size:.6875rem;font-weight:600}.avatar.large{width:40px;height:40px;font-size:.875rem}.avatar.placeholder{opacity:.5}.avatar-button,.sign-in{padding:2px;border:0;border-radius:var(--theme-radius-sm);background:none;color:inherit;font:inherit;cursor:pointer}.avatar-button:hover .avatar,.sign-in:hover .avatar{border-color:var(--theme-border-strong);color:var(--theme-text-primary)}.avatar-button:focus-visible,.sign-in:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.sign-in{padding:var(--theme-space-1) var(--theme-space-3);background:var(--theme-accent);color:var(--theme-text-on-accent);font-weight:500}.user-panel{position:absolute;top:calc(100% + var(--theme-space-2));right:0;z-index:30;display:grid;gap:var(--theme-space-3);width:280px;padding:var(--theme-space-4);background:var(--theme-bg-overlay);border-radius:var(--theme-radius-lg);box-shadow:var(--theme-shadow-popup);color:var(--theme-text-primary)}.user-identity{display:flex;align-items:center;gap:var(--theme-space-3)}.user-names{display:grid;min-width:0}.user-full-name{font-weight:500}.user-login{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-text-secondary);font-family:var(--theme-font-mono);font-size:.75rem}.pref{display:grid;gap:var(--theme-space-1);min-width:0;margin:0;padding:var(--theme-space-3) 0 0;border:0;border-top:1px solid var(--theme-border-subtle)}.pref-label{padding:0;color:var(--theme-text-secondary);font-size:.75rem}.pref-value{color:var(--theme-text-primary)}.pref-radio{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.segmented{display:inline-flex;padding:2px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm)}.segment{flex:1;position:relative}.segment span{display:block;padding:2px var(--theme-space-2);border-radius:var(--theme-radius-xs);color:var(--theme-text-secondary);font-weight:500;text-align:center;cursor:pointer}.segment input:checked+span{background:var(--theme-bg-elevated);color:var(--theme-text-primary);box-shadow:0 0 0 1px var(--theme-border-default)}.segment input:focus-visible+span{box-shadow:var(--theme-focus-ring)}.option-list{display:grid}.option{position:relative}.option span{display:flex;align-items:center;gap:var(--theme-space-2);padding:var(--theme-space-1) var(--theme-space-2);border-radius:var(--theme-radius-sm);color:var(--theme-text-secondary);cursor:pointer}.option span:before{content:\"\";width:6px;height:6px;border-radius:50%;border:1px solid currentColor}.option:hover span{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.option input:checked+span{color:var(--theme-text-accent)}.option input:checked+span:before{background:currentColor}.option input:focus-visible+span{box-shadow:var(--theme-focus-ring)}.user-items{display:flex;flex-direction:column;gap:2px;margin:0;padding:var(--theme-space-2) 0 0;list-style:none;border-top:1px solid var(--theme-border-subtle)}.user-item{display:flex;align-items:center;gap:var(--theme-space-2);width:100%;box-sizing:border-box;padding:var(--theme-space-1) var(--theme-space-2);border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-primary);font:inherit;text-align:left;text-decoration:none;cursor:pointer}.user-item:hover{background:var(--theme-bg-hover)}.user-item:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.user-item-icon{width:16px;height:16px;color:var(--theme-text-secondary)}.user-item-text{flex:1}.user-items-slot:empty{display:none}.user-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--theme-space-2);padding-top:var(--theme-space-3);border-top:1px solid var(--theme-border-subtle)}.action-link{border-radius:var(--theme-radius-xs);color:var(--theme-text-accent);text-decoration:none}.action-link:hover{text-decoration:underline}.action-link:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.action-button{margin-left:auto;padding:var(--theme-space-1) var(--theme-space-3);border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:var(--theme-bg-surface);color:var(--theme-text-primary);font:inherit;cursor:pointer}.action-button:hover{border-color:var(--theme-border-strong)}.action-button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.user-version{color:var(--theme-text-muted);font-family:var(--theme-font-mono);font-size:.6875rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"], dependencies: [{ kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellUserMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-shell-user-menu', imports: [SVGIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (sessionLoading()) {\n  <span class=\"avatar placeholder\" aria-hidden=\"true\"></span>\n} @else if (!user()) {\n  <button type=\"button\" class=\"sign-in\" (click)=\"login()\">{{ m().signIn }}</button>\n} @else {\n  <button type=\"button\"\n          class=\"avatar-button\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"open()\"\n          aria-controls=\"user-menu-panel\"\n          [attr.aria-label]=\"avatarLabel()\"\n          (click)=\"toggle()\">\n    <span class=\"avatar\">{{ initials() }}</span>\n  </button>\n  @if (open()) {\n    <div class=\"user-panel\" id=\"user-menu-panel\" role=\"dialog\" [attr.aria-label]=\"m().accountAndPreferences\" (focusout)=\"onPanelFocusOut($event)\">\n      <div class=\"user-identity\">\n        <span class=\"avatar large\" aria-hidden=\"true\">{{ initials() }}</span>\n        <div class=\"user-names\">\n          @if (fullName(); as name) {\n            <span class=\"user-full-name\">{{ name }}</span>\n          }\n          @if (userName(); as account) {\n            <span class=\"user-login\">{{ account }}</span>\n          }\n        </div>\n      </div>\n\n      <fieldset class=\"pref\">\n        <legend class=\"pref-label\">{{ m().theme }}</legend>\n        <div class=\"segmented\">\n          @for (option of themeOptions(); track option.value) {\n            <label class=\"segment\">\n              <input type=\"radio\"\n                     name=\"user-menu-theme\"\n                     class=\"pref-radio\"\n                     [value]=\"option.value\"\n                     [checked]=\"theme() === option.value\"\n                     (change)=\"setTheme(option.value)\" />\n              <span>{{ option.label }}</span>\n            </label>\n          }\n        </div>\n      </fieldset>\n\n      @if (densityOptions().length > 0) {\n        <fieldset class=\"pref\">\n          <legend class=\"pref-label\">{{ m().density }}</legend>\n          <div class=\"option-list\">\n            @for (option of densityOptions(); track option.mode) {\n              <label class=\"option\">\n                <input type=\"radio\"\n                       name=\"user-menu-density\"\n                       class=\"pref-radio\"\n                       [value]=\"option.mode\"\n                       [checked]=\"density() === option.mode\"\n                       (change)=\"setDensity(option.mode)\" />\n                <span>{{ option.label }}</span>\n              </label>\n            }\n          </div>\n        </fieldset>\n      }\n\n      @if (languages().length > 1) {\n        <fieldset class=\"pref\">\n          <legend class=\"pref-label\">{{ m().language }}</legend>\n          <div class=\"option-list\">\n            @for (option of languages(); track option.code) {\n              <label class=\"option\">\n                <input type=\"radio\"\n                       name=\"user-menu-language\"\n                       class=\"pref-radio\"\n                       [value]=\"option.code\"\n                       [checked]=\"currentLanguage() === option.code\"\n                       (change)=\"setLanguage(option.code)\" />\n                <span [attr.lang]=\"option.code\">{{ option.label }}</span>\n              </label>\n            }\n          </div>\n        </fieldset>\n      } @else if (currentLanguageLabel(); as languageLabel) {\n        <div class=\"pref\">\n          <span class=\"pref-label\">{{ m().language }}</span>\n          <span class=\"pref-value\">{{ languageLabel }}</span>\n        </div>\n      }\n\n      @if (items().length > 0) {\n        <ul class=\"user-items\" role=\"list\">\n          @for (item of items(); track item.id) {\n            <li>\n              @if (item.href) {\n                <a class=\"user-item\" [attr.data-user-item]=\"item.id\" [href]=\"item.href\" target=\"_blank\" rel=\"noopener noreferrer\" (click)=\"followItemLink()\">\n                  @if (item.svgIcon) {\n                    <kendo-svgicon class=\"user-item-icon\" [icon]=\"item.svgIcon\"></kendo-svgicon>\n                  }\n                  <span class=\"user-item-text\">{{ item.text }}</span>\n                  <span aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span>\n                </a>\n              } @else {\n                <button type=\"button\" class=\"user-item\" [attr.data-user-item]=\"item.id\" (click)=\"selectItem(item)\">\n                  @if (item.svgIcon) {\n                    <kendo-svgicon class=\"user-item-icon\" [icon]=\"item.svgIcon\"></kendo-svgicon>\n                  }\n                  <span class=\"user-item-text\">{{ item.text }}</span>\n                </button>\n              }\n            </li>\n          }\n        </ul>\n      }\n      <div class=\"user-items-slot\" (click)=\"onProjectedClick($event)\">\n        <ng-content select=\"[shellUserMenuItems]\"></ng-content>\n      </div>\n\n      <div class=\"user-actions\">\n        @if (profileUri(); as uri) {\n          <a class=\"action-link\" [href]=\"uri\" target=\"_blank\" rel=\"noopener noreferrer\">{{ m().manageProfile }} <span aria-hidden=\"true\">\u2197</span><span class=\"visually-hidden\">{{ m().opensInNewTab }}</span></a>\n        }\n        <button type=\"button\" class=\"action-button\" (click)=\"logout()\">{{ m().signOut }}</button>\n      </div>\n\n      @if (versionText(); as text) {\n        <div class=\"user-version\">{{ text }}</div>\n      }\n    </div>\n  }\n}\n", styles: [":host{position:relative;display:inline-flex;align-items:center}.avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--theme-border-default);background:var(--theme-bg-overlay);color:var(--theme-text-secondary);font-family:var(--theme-font-display);font-size:.6875rem;font-weight:600}.avatar.large{width:40px;height:40px;font-size:.875rem}.avatar.placeholder{opacity:.5}.avatar-button,.sign-in{padding:2px;border:0;border-radius:var(--theme-radius-sm);background:none;color:inherit;font:inherit;cursor:pointer}.avatar-button:hover .avatar,.sign-in:hover .avatar{border-color:var(--theme-border-strong);color:var(--theme-text-primary)}.avatar-button:focus-visible,.sign-in:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.sign-in{padding:var(--theme-space-1) var(--theme-space-3);background:var(--theme-accent);color:var(--theme-text-on-accent);font-weight:500}.user-panel{position:absolute;top:calc(100% + var(--theme-space-2));right:0;z-index:30;display:grid;gap:var(--theme-space-3);width:280px;padding:var(--theme-space-4);background:var(--theme-bg-overlay);border-radius:var(--theme-radius-lg);box-shadow:var(--theme-shadow-popup);color:var(--theme-text-primary)}.user-identity{display:flex;align-items:center;gap:var(--theme-space-3)}.user-names{display:grid;min-width:0}.user-full-name{font-weight:500}.user-login{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-text-secondary);font-family:var(--theme-font-mono);font-size:.75rem}.pref{display:grid;gap:var(--theme-space-1);min-width:0;margin:0;padding:var(--theme-space-3) 0 0;border:0;border-top:1px solid var(--theme-border-subtle)}.pref-label{padding:0;color:var(--theme-text-secondary);font-size:.75rem}.pref-value{color:var(--theme-text-primary)}.pref-radio{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.segmented{display:inline-flex;padding:2px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm)}.segment{flex:1;position:relative}.segment span{display:block;padding:2px var(--theme-space-2);border-radius:var(--theme-radius-xs);color:var(--theme-text-secondary);font-weight:500;text-align:center;cursor:pointer}.segment input:checked+span{background:var(--theme-bg-elevated);color:var(--theme-text-primary);box-shadow:0 0 0 1px var(--theme-border-default)}.segment input:focus-visible+span{box-shadow:var(--theme-focus-ring)}.option-list{display:grid}.option{position:relative}.option span{display:flex;align-items:center;gap:var(--theme-space-2);padding:var(--theme-space-1) var(--theme-space-2);border-radius:var(--theme-radius-sm);color:var(--theme-text-secondary);cursor:pointer}.option span:before{content:\"\";width:6px;height:6px;border-radius:50%;border:1px solid currentColor}.option:hover span{background:var(--theme-bg-hover);color:var(--theme-text-primary)}.option input:checked+span{color:var(--theme-text-accent)}.option input:checked+span:before{background:currentColor}.option input:focus-visible+span{box-shadow:var(--theme-focus-ring)}.user-items{display:flex;flex-direction:column;gap:2px;margin:0;padding:var(--theme-space-2) 0 0;list-style:none;border-top:1px solid var(--theme-border-subtle)}.user-item{display:flex;align-items:center;gap:var(--theme-space-2);width:100%;box-sizing:border-box;padding:var(--theme-space-1) var(--theme-space-2);border:0;border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-primary);font:inherit;text-align:left;text-decoration:none;cursor:pointer}.user-item:hover{background:var(--theme-bg-hover)}.user-item:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.user-item-icon{width:16px;height:16px;color:var(--theme-text-secondary)}.user-item-text{flex:1}.user-items-slot:empty{display:none}.user-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--theme-space-2);padding-top:var(--theme-space-3);border-top:1px solid var(--theme-border-subtle)}.action-link{border-radius:var(--theme-radius-xs);color:var(--theme-text-accent);text-decoration:none}.action-link:hover{text-decoration:underline}.action-link:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.action-button{margin-left:auto;padding:var(--theme-space-1) var(--theme-space-3);border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:var(--theme-bg-surface);color:var(--theme-text-primary);font:inherit;cursor:pointer}.action-button:hover{border-color:var(--theme-border-strong)}.action-button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.user-version{color:var(--theme-text-muted);font-family:var(--theme-font-mono);font-size:.6875rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"] }]
+        }], propDecorators: { user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], sessionLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessionLoading", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], densityOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "densityOptions", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }], signOut: [{ type: i0.Output, args: ["signOut"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], densityChange: [{ type: i0.Output, args: ["densityChange"] }], languageChange: [{ type: i0.Output, args: ["languageChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
+/**
+ * Top bar (concept §3.1, wireframe): brand mark + name, tenant switcher with the
+ * environment chip, the mode switch, the search trigger, the optional ✦ assistant
+ * toggle and the avatar menu (`mm-shell-user-menu`) with the personal settings.
+ *
+ * Pure presentation; the host feeds everything in and handles the outputs:
+ *
+ * - **Brand**: `brandName` and `brandMarkSrc` (an image URL of the host; none: no mark).
+ * - **Tenant**: inside a tenant (`tenantId`) the host projects its tenant switcher with the
+ *   `shellTenant` attribute (e.g. octo-ui's `<mm-tenant-switcher shellTenant …>`, which the
+ *   bar styles flat); the environment chip follows it.
+ * - **Environment**: `environment` (e.g. from {@link shellEnvironmentChip}); null hides the
+ *   chip (also while the tenant mode is loading). `production: true` tints the bar.
+ * - **Mode switch**: `modes` + `currentMode`; shown with two or more modes inside a tenant
+ *   the user may open. Picking the other mode emits `modeChange`; the host applies it.
+ * - **Search**: the button calls {@link ShellSearchTriggerService.request} and emits
+ *   `searchRequested`; the host (or the palette) opens the command palette.
+ * - **Assistant**: `assistantAvailable` shows the ✦ toggle (inside a tenant the user may
+ *   open); a click emits `assistantToggle`, `assistantOpen` reflects the panel state.
+ * - **User menu**: `user`, `sessionLoading`, `theme`, `densityOptions`, `density`,
+ *   `languages`, `language`, `version` and the outputs `signIn`, `signOut`, `themeChange`,
+ *   `densityChange` and `languageChange` are passed through to `mm-shell-user-menu`, as are the
+ *   host entries (AB#5621): `userMenuItems` → `items`, `itemSelected` → `userMenuItemSelected`,
+ *   and content with the `shellUserMenuItems` attribute, projected into the panel.
+ */
+class ShellTopBarComponent {
+    searchTrigger = inject(ShellSearchTriggerService);
+    tenantId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tenantId" }] : /* istanbul ignore next */ []));
+    isDenied = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDenied" }] : /* istanbul ignore next */ []));
+    /** Product name next to the mark, e.g. "OctoMesh Studio". */
+    brandName = input('OctoMesh', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandName" }] : /* istanbul ignore next */ []));
+    /** URL of the brand mark image (decorative); null leaves the mark out. */
+    brandMarkSrc = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandMarkSrc" }] : /* istanbul ignore next */ []));
+    /** The tenant's environment chip; null hides it. */
+    environment = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "environment" }] : /* istanbul ignore next */ []));
+    /** Choices of the mode switch; fewer than two hide it. */
+    modes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modes" }] : /* istanbul ignore next */ []));
+    /** Id of the mode in effect. */
+    currentMode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentMode" }] : /* istanbul ignore next */ []));
+    /** Shows the ✦ assistant toggle (feature flag on and the panel can be hosted). */
+    assistantAvailable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "assistantAvailable" }] : /* istanbul ignore next */ []));
+    /** The assistant panel is open (`aria-expanded` of the toggle). */
+    assistantOpen = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "assistantOpen" }] : /* istanbul ignore next */ []));
+    /** Id of the assistant panel element (`aria-controls` while open). */
+    assistantPanelId = input('assistant-panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "assistantPanelId" }] : /* istanbul ignore next */ []));
+    // --- passed through to mm-shell-user-menu ---
+    user = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    sessionLoading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sessionLoading" }] : /* istanbul ignore next */ []));
+    theme = input('system', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    densityOptions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "densityOptions" }] : /* istanbul ignore next */ []));
+    density = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    languages = input(DEFAULT_SHELL_LANGUAGES, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []));
+    language = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    version = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "version" }] : /* istanbul ignore next */ []));
+    /** Host entries of the user menu (its `items`). */
+    userMenuItems = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userMenuItems" }] : /* istanbul ignore next */ []));
+    /** Translations; members left out fall back to {@link SHELL_MESSAGES}, then English. */
+    messages = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** The person picked the other mode; the host applies it and rebuilds the navigation. */
+    modeChange = output();
+    /** The search trigger was used. */
+    searchRequested = output();
+    /** The ✦ toggle was used. */
+    assistantToggle = output();
+    signIn = output();
+    signOut = output();
+    themeChange = output();
+    densityChange = output();
+    languageChange = output();
+    /** A host entry of the user menu was chosen (its `itemSelected`). */
+    userMenuItemSelected = output();
+    m = shellMessages(this.messages);
+    isProduction = computed(() => this.environment()?.production === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isProduction" }] : /* istanbul ignore next */ []));
+    showEnvironment = computed(() => !!this.environment() && !this.isDenied(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEnvironment" }] : /* istanbul ignore next */ []));
+    /** A switch with one choice would be noise (e.g. users without builder roles). */
+    showModeSwitch = computed(() => !!this.tenantId() && !this.isDenied() && this.modes().length > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showModeSwitch" }] : /* istanbul ignore next */ []));
+    /** The ✦ toggle: only when available and inside a tenant the user may open. */
+    showAssistant = computed(() => this.assistantAvailable() && !!this.tenantId() && !this.isDenied(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAssistant" }] : /* istanbul ignore next */ []));
+    /** ⌘K on Apple platforms, Ctrl K elsewhere — the shortcut the palette binds. */
+    isApple = /Mac|iPhone|iPad/i.test(navigator.platform ?? '');
+    shortcutLabel = this.isApple ? '⌘K' : 'Ctrl K';
+    /** ⌘J / Ctrl J — the assistant shortcut the host binds. */
+    assistantShortcutLabel = this.isApple ? '⌘J' : 'Ctrl J';
+    /** Both chords work everywhere; the platform's usual one is listed first. */
+    assistantKeyShortcut = this.isApple ? 'Meta+J Control+J' : 'Control+J Meta+J';
+    selectMode(mode) {
+        if (mode !== this.currentMode()) {
+            this.modeChange.emit(mode);
+        }
+    }
+    toggleAssistant() {
+        this.assistantToggle.emit();
+    }
+    requestSearch() {
+        this.searchTrigger.request();
+        this.searchRequested.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellTopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ShellTopBarComponent, isStandalone: true, selector: "mm-shell-top-bar", inputs: { tenantId: { classPropertyName: "tenantId", publicName: "tenantId", isSignal: true, isRequired: false, transformFunction: null }, isDenied: { classPropertyName: "isDenied", publicName: "isDenied", isSignal: true, isRequired: false, transformFunction: null }, brandName: { classPropertyName: "brandName", publicName: "brandName", isSignal: true, isRequired: false, transformFunction: null }, brandMarkSrc: { classPropertyName: "brandMarkSrc", publicName: "brandMarkSrc", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, modes: { classPropertyName: "modes", publicName: "modes", isSignal: true, isRequired: false, transformFunction: null }, currentMode: { classPropertyName: "currentMode", publicName: "currentMode", isSignal: true, isRequired: false, transformFunction: null }, assistantAvailable: { classPropertyName: "assistantAvailable", publicName: "assistantAvailable", isSignal: true, isRequired: false, transformFunction: null }, assistantOpen: { classPropertyName: "assistantOpen", publicName: "assistantOpen", isSignal: true, isRequired: false, transformFunction: null }, assistantPanelId: { classPropertyName: "assistantPanelId", publicName: "assistantPanelId", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, sessionLoading: { classPropertyName: "sessionLoading", publicName: "sessionLoading", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, densityOptions: { classPropertyName: "densityOptions", publicName: "densityOptions", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modeChange: "modeChange", searchRequested: "searchRequested", assistantToggle: "assistantToggle", signIn: "signIn", signOut: "signOut", themeChange: "themeChange", densityChange: "densityChange", languageChange: "languageChange", userMenuItemSelected: "userMenuItemSelected" }, ngImport: i0, template: "<header class=\"top-bar\" [class.production]=\"isProduction()\">\n  <div class=\"brand\">\n    @if (brandMarkSrc(); as markSrc) {\n      <img [src]=\"markSrc\" class=\"brand-mark\" alt=\"\" aria-hidden=\"true\" />\n    }\n    <span class=\"brand-name\">{{ brandName() }}</span>\n  </div>\n\n  @if (tenantId()) {\n    <span class=\"separator\" aria-hidden=\"true\"></span>\n    <div class=\"tenant\">\n      <ng-content select=\"[shellTenant]\"></ng-content>\n      @if (showEnvironment() && environment(); as env) {\n        <span class=\"env-chip\" [class]=\"'env-chip status-' + env.status\" [title]=\"env.label\">\n          <span class=\"env-label\">{{ env.label }}</span>\n          <span class=\"env-short\" aria-hidden=\"true\">{{ env.short }}</span>\n        </span>\n      }\n    </div>\n  }\n\n  @if (showModeSwitch()) {\n    <div class=\"mode-switch\" role=\"group\" [attr.aria-label]=\"m().modeSwitch\">\n      @for (option of modes(); track option.id) {\n        <button type=\"button\"\n                [attr.aria-pressed]=\"currentMode() === option.id\"\n                [title]=\"option.description ?? ''\"\n                (click)=\"selectMode(option.id)\">{{ option.label }}</button>\n      }\n    </div>\n  }\n\n  <button type=\"button\" class=\"search\" [attr.aria-label]=\"m().searchAriaLabel\" (click)=\"requestSearch()\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\" /><path d=\"m20 20-3.5-3.5\" /></svg>\n    <span class=\"search-label\">{{ m().search }}</span>\n    <kbd class=\"search-shortcut\">{{ shortcutLabel }}</kbd>\n  </button>\n\n  <div class=\"top-actions\">\n    @if (showAssistant()) {\n      <button type=\"button\" class=\"ai-btn\" data-assistant-toggle\n              [attr.aria-expanded]=\"assistantOpen()\"\n              [attr.aria-controls]=\"assistantOpen() ? assistantPanelId() : null\"\n              [attr.aria-keyshortcuts]=\"assistantKeyShortcut\"\n              (click)=\"toggleAssistant()\">\n        <span class=\"ai-sparkle\" aria-hidden=\"true\">\u2726</span>\n        <span class=\"ai-label\">{{ m().assistant }}</span>\n        <kbd class=\"ai-shortcut\" aria-hidden=\"true\">{{ assistantShortcutLabel }}</kbd>\n      </button>\n    }\n    <mm-shell-user-menu\n      [user]=\"user()\"\n      [sessionLoading]=\"sessionLoading()\"\n      [theme]=\"theme()\"\n      [densityOptions]=\"densityOptions()\"\n      [density]=\"density()\"\n      [languages]=\"languages()\"\n      [language]=\"language()\"\n      [version]=\"version()\"\n      [items]=\"userMenuItems()\"\n      [messages]=\"messages()\"\n      (signIn)=\"signIn.emit()\"\n      (signOut)=\"signOut.emit()\"\n      (themeChange)=\"themeChange.emit($event)\"\n      (densityChange)=\"densityChange.emit($event)\"\n      (languageChange)=\"languageChange.emit($event)\"\n      (itemSelected)=\"userMenuItemSelected.emit($event)\">\n      <ng-container ngProjectAs=\"[shellUserMenuItems]\">\n        <ng-content select=\"[shellUserMenuItems]\"></ng-content>\n      </ng-container>\n    </mm-shell-user-menu>\n  </div>\n</header>\n", styles: [":host{display:block}.top-bar{position:relative;display:flex;align-items:center;gap:var(--theme-space-3);height:48px;min-width:0;padding-inline:var(--theme-space-3);background:var(--theme-bg-app);border-bottom:1px solid var(--theme-border-subtle);color:var(--theme-text-primary)}.top-bar.production{border-bottom:2px solid var(--theme-status-error)}.brand{display:flex;align-items:center;gap:var(--theme-space-2);flex:none;white-space:nowrap}.brand-mark{width:22px;height:22px}.brand-name{font-family:var(--theme-font-display);font-size:.875rem;line-height:1.25rem;font-weight:600}.separator{flex:none;width:1px;height:20px;background:var(--theme-border-default)}.tenant{display:flex;align-items:center;gap:var(--theme-space-2);flex:0 1 auto;min-width:0}.tenant ::ng-deep mm-tenant-switcher{--mm-tenant-switcher-bg: transparent;--mm-tenant-switcher-bg-hover: var(--theme-bg-hover);--mm-tenant-switcher-border: var(--theme-border-default);--mm-tenant-switcher-radius: var(--theme-radius-sm);--mm-tenant-switcher-shadow: none;--mm-tenant-switcher-shadow-hover: none;--mm-tenant-switcher-accent: var(--theme-text-secondary);--mm-tenant-switcher-font: var(--theme-font-mono);--mm-tenant-switcher-text-shadow: none;--mm-tenant-switcher-icon-animation: none;--mm-tenant-switcher-denied-bg: var(--theme-status-error-subtle);--mm-tenant-switcher-denied-border: var(--theme-status-error);--mm-tenant-switcher-denied-shadow: none;--mm-tenant-switcher-denied-accent: var(--theme-status-error);--mm-tenant-switcher-denied-text-shadow: none;--mm-tenant-switcher-denied-label-bg: var(--theme-status-error-subtle);flex:0 1 auto;min-width:0}.env-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:var(--theme-radius-xs);font-size:.71875rem;font-weight:500;white-space:nowrap}.env-chip:before{content:\"\";width:6px;height:6px;border-radius:50%;background:currentColor}.env-chip.status-success{color:var(--theme-status-success);background:var(--theme-status-success-subtle)}.env-chip.status-warning{color:var(--theme-status-warning);background:var(--theme-status-warning-subtle)}.env-chip.status-error{color:var(--theme-status-error);background:var(--theme-status-error-subtle)}.env-chip.status-info{color:var(--theme-status-info);background:var(--theme-status-info-subtle)}.env-chip.status-neutral{color:var(--theme-status-neutral);background:var(--theme-status-neutral-subtle)}.mode-switch{display:inline-flex;flex:none;padding:2px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm)}.mode-switch button{padding:2px 10px;border:0;border-radius:var(--theme-radius-xs);background:none;color:var(--theme-text-secondary);font:inherit;font-weight:500;cursor:pointer}.mode-switch button:hover{color:var(--theme-text-primary)}.mode-switch button[aria-pressed=true]{background:var(--theme-bg-overlay);color:var(--theme-text-primary);box-shadow:0 0 0 1px var(--theme-border-default)}.mode-switch button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.search{display:flex;align-items:center;gap:var(--theme-space-2);flex:1 1 260px;min-width:0;max-width:420px;height:30px;margin-inline:auto;padding-inline:10px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:var(--theme-bg-surface);color:var(--theme-text-muted);font:inherit;cursor:pointer}.search:hover{border-color:var(--theme-border-strong)}.search:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.search svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.search-label{flex:1;overflow:hidden;text-align:left;white-space:nowrap;text-overflow:ellipsis}.search-shortcut{padding:0 5px;border:1px solid var(--theme-border-strong);border-bottom-width:2px;border-radius:var(--theme-radius-xs);background:var(--theme-bg-elevated);color:var(--theme-text-primary);font-family:var(--theme-font-mono);font-size:.6875rem;line-height:1rem}.top-actions{display:flex;align-items:center;gap:6px;flex:none}.ai-btn{display:flex;align-items:center;gap:6px;height:30px;padding-inline:10px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-primary);font:inherit;cursor:pointer}.ai-btn:hover{border-color:var(--theme-border-strong)}.ai-btn:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.ai-btn[aria-expanded=true]{border-color:color-mix(in srgb,var(--theme-ai) 55%,transparent);background:var(--theme-ai-subtle)}.ai-sparkle{color:var(--theme-ai)}.ai-shortcut{padding:0 5px;border:1px solid var(--theme-border-strong);border-bottom-width:2px;border-radius:var(--theme-radius-xs);background:var(--theme-bg-elevated);font-family:var(--theme-font-mono);font-size:.6875rem;line-height:1rem}@media(max-width:760px){.brand-name,.separator{display:none}.search{flex:0 0 auto;margin-left:auto;margin-right:0}.search-label,.search-shortcut,.ai-shortcut{display:none}.ai-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}.env-short{display:none}@media(max-width:480px){.top-bar{gap:var(--theme-space-2);padding-inline:var(--theme-space-2)}mm-tenant-switcher{--mm-tenant-switcher-padding: 4px 8px}.mode-switch button{padding:2px 8px}.env-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.env-short{display:inline}}\n"], dependencies: [{ kind: "component", type: ShellUserMenuComponent, selector: "mm-shell-user-menu", inputs: ["user", "sessionLoading", "theme", "densityOptions", "density", "languages", "language", "version", "items", "messages"], outputs: ["signIn", "signOut", "themeChange", "densityChange", "languageChange", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ShellTopBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-shell-top-bar', imports: [ShellUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"top-bar\" [class.production]=\"isProduction()\">\n  <div class=\"brand\">\n    @if (brandMarkSrc(); as markSrc) {\n      <img [src]=\"markSrc\" class=\"brand-mark\" alt=\"\" aria-hidden=\"true\" />\n    }\n    <span class=\"brand-name\">{{ brandName() }}</span>\n  </div>\n\n  @if (tenantId()) {\n    <span class=\"separator\" aria-hidden=\"true\"></span>\n    <div class=\"tenant\">\n      <ng-content select=\"[shellTenant]\"></ng-content>\n      @if (showEnvironment() && environment(); as env) {\n        <span class=\"env-chip\" [class]=\"'env-chip status-' + env.status\" [title]=\"env.label\">\n          <span class=\"env-label\">{{ env.label }}</span>\n          <span class=\"env-short\" aria-hidden=\"true\">{{ env.short }}</span>\n        </span>\n      }\n    </div>\n  }\n\n  @if (showModeSwitch()) {\n    <div class=\"mode-switch\" role=\"group\" [attr.aria-label]=\"m().modeSwitch\">\n      @for (option of modes(); track option.id) {\n        <button type=\"button\"\n                [attr.aria-pressed]=\"currentMode() === option.id\"\n                [title]=\"option.description ?? ''\"\n                (click)=\"selectMode(option.id)\">{{ option.label }}</button>\n      }\n    </div>\n  }\n\n  <button type=\"button\" class=\"search\" [attr.aria-label]=\"m().searchAriaLabel\" (click)=\"requestSearch()\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\" /><path d=\"m20 20-3.5-3.5\" /></svg>\n    <span class=\"search-label\">{{ m().search }}</span>\n    <kbd class=\"search-shortcut\">{{ shortcutLabel }}</kbd>\n  </button>\n\n  <div class=\"top-actions\">\n    @if (showAssistant()) {\n      <button type=\"button\" class=\"ai-btn\" data-assistant-toggle\n              [attr.aria-expanded]=\"assistantOpen()\"\n              [attr.aria-controls]=\"assistantOpen() ? assistantPanelId() : null\"\n              [attr.aria-keyshortcuts]=\"assistantKeyShortcut\"\n              (click)=\"toggleAssistant()\">\n        <span class=\"ai-sparkle\" aria-hidden=\"true\">\u2726</span>\n        <span class=\"ai-label\">{{ m().assistant }}</span>\n        <kbd class=\"ai-shortcut\" aria-hidden=\"true\">{{ assistantShortcutLabel }}</kbd>\n      </button>\n    }\n    <mm-shell-user-menu\n      [user]=\"user()\"\n      [sessionLoading]=\"sessionLoading()\"\n      [theme]=\"theme()\"\n      [densityOptions]=\"densityOptions()\"\n      [density]=\"density()\"\n      [languages]=\"languages()\"\n      [language]=\"language()\"\n      [version]=\"version()\"\n      [items]=\"userMenuItems()\"\n      [messages]=\"messages()\"\n      (signIn)=\"signIn.emit()\"\n      (signOut)=\"signOut.emit()\"\n      (themeChange)=\"themeChange.emit($event)\"\n      (densityChange)=\"densityChange.emit($event)\"\n      (languageChange)=\"languageChange.emit($event)\"\n      (itemSelected)=\"userMenuItemSelected.emit($event)\">\n      <ng-container ngProjectAs=\"[shellUserMenuItems]\">\n        <ng-content select=\"[shellUserMenuItems]\"></ng-content>\n      </ng-container>\n    </mm-shell-user-menu>\n  </div>\n</header>\n", styles: [":host{display:block}.top-bar{position:relative;display:flex;align-items:center;gap:var(--theme-space-3);height:48px;min-width:0;padding-inline:var(--theme-space-3);background:var(--theme-bg-app);border-bottom:1px solid var(--theme-border-subtle);color:var(--theme-text-primary)}.top-bar.production{border-bottom:2px solid var(--theme-status-error)}.brand{display:flex;align-items:center;gap:var(--theme-space-2);flex:none;white-space:nowrap}.brand-mark{width:22px;height:22px}.brand-name{font-family:var(--theme-font-display);font-size:.875rem;line-height:1.25rem;font-weight:600}.separator{flex:none;width:1px;height:20px;background:var(--theme-border-default)}.tenant{display:flex;align-items:center;gap:var(--theme-space-2);flex:0 1 auto;min-width:0}.tenant ::ng-deep mm-tenant-switcher{--mm-tenant-switcher-bg: transparent;--mm-tenant-switcher-bg-hover: var(--theme-bg-hover);--mm-tenant-switcher-border: var(--theme-border-default);--mm-tenant-switcher-radius: var(--theme-radius-sm);--mm-tenant-switcher-shadow: none;--mm-tenant-switcher-shadow-hover: none;--mm-tenant-switcher-accent: var(--theme-text-secondary);--mm-tenant-switcher-font: var(--theme-font-mono);--mm-tenant-switcher-text-shadow: none;--mm-tenant-switcher-icon-animation: none;--mm-tenant-switcher-denied-bg: var(--theme-status-error-subtle);--mm-tenant-switcher-denied-border: var(--theme-status-error);--mm-tenant-switcher-denied-shadow: none;--mm-tenant-switcher-denied-accent: var(--theme-status-error);--mm-tenant-switcher-denied-text-shadow: none;--mm-tenant-switcher-denied-label-bg: var(--theme-status-error-subtle);flex:0 1 auto;min-width:0}.env-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:var(--theme-radius-xs);font-size:.71875rem;font-weight:500;white-space:nowrap}.env-chip:before{content:\"\";width:6px;height:6px;border-radius:50%;background:currentColor}.env-chip.status-success{color:var(--theme-status-success);background:var(--theme-status-success-subtle)}.env-chip.status-warning{color:var(--theme-status-warning);background:var(--theme-status-warning-subtle)}.env-chip.status-error{color:var(--theme-status-error);background:var(--theme-status-error-subtle)}.env-chip.status-info{color:var(--theme-status-info);background:var(--theme-status-info-subtle)}.env-chip.status-neutral{color:var(--theme-status-neutral);background:var(--theme-status-neutral-subtle)}.mode-switch{display:inline-flex;flex:none;padding:2px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm)}.mode-switch button{padding:2px 10px;border:0;border-radius:var(--theme-radius-xs);background:none;color:var(--theme-text-secondary);font:inherit;font-weight:500;cursor:pointer}.mode-switch button:hover{color:var(--theme-text-primary)}.mode-switch button[aria-pressed=true]{background:var(--theme-bg-overlay);color:var(--theme-text-primary);box-shadow:0 0 0 1px var(--theme-border-default)}.mode-switch button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.search{display:flex;align-items:center;gap:var(--theme-space-2);flex:1 1 260px;min-width:0;max-width:420px;height:30px;margin-inline:auto;padding-inline:10px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:var(--theme-bg-surface);color:var(--theme-text-muted);font:inherit;cursor:pointer}.search:hover{border-color:var(--theme-border-strong)}.search:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.search svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.search-label{flex:1;overflow:hidden;text-align:left;white-space:nowrap;text-overflow:ellipsis}.search-shortcut{padding:0 5px;border:1px solid var(--theme-border-strong);border-bottom-width:2px;border-radius:var(--theme-radius-xs);background:var(--theme-bg-elevated);color:var(--theme-text-primary);font-family:var(--theme-font-mono);font-size:.6875rem;line-height:1rem}.top-actions{display:flex;align-items:center;gap:6px;flex:none}.ai-btn{display:flex;align-items:center;gap:6px;height:30px;padding-inline:10px;border:1px solid var(--theme-border-default);border-radius:var(--theme-radius-sm);background:none;color:var(--theme-text-primary);font:inherit;cursor:pointer}.ai-btn:hover{border-color:var(--theme-border-strong)}.ai-btn:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.ai-btn[aria-expanded=true]{border-color:color-mix(in srgb,var(--theme-ai) 55%,transparent);background:var(--theme-ai-subtle)}.ai-sparkle{color:var(--theme-ai)}.ai-shortcut{padding:0 5px;border:1px solid var(--theme-border-strong);border-bottom-width:2px;border-radius:var(--theme-radius-xs);background:var(--theme-bg-elevated);font-family:var(--theme-font-mono);font-size:.6875rem;line-height:1rem}@media(max-width:760px){.brand-name,.separator{display:none}.search{flex:0 0 auto;margin-left:auto;margin-right:0}.search-label,.search-shortcut,.ai-shortcut{display:none}.ai-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}.env-short{display:none}@media(max-width:480px){.top-bar{gap:var(--theme-space-2);padding-inline:var(--theme-space-2)}mm-tenant-switcher{--mm-tenant-switcher-padding: 4px 8px}.mode-switch button{padding:2px 8px}.env-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.env-short{display:inline}}\n"] }]
+        }], propDecorators: { tenantId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenantId", required: false }] }], isDenied: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDenied", required: false }] }], brandName: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandName", required: false }] }], brandMarkSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandMarkSrc", required: false }] }], environment: [{ type: i0.Input, args: [{ isSignal: true, alias: "environment", required: false }] }], modes: [{ type: i0.Input, args: [{ isSignal: true, alias: "modes", required: false }] }], currentMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMode", required: false }] }], assistantAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantAvailable", required: false }] }], assistantOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantOpen", required: false }] }], assistantPanelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantPanelId", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], sessionLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessionLoading", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], densityOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "densityOptions", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], userMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "userMenuItems", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }], searchRequested: [{ type: i0.Output, args: ["searchRequested"] }], assistantToggle: [{ type: i0.Output, args: ["assistantToggle"] }], signIn: [{ type: i0.Output, args: ["signIn"] }], signOut: [{ type: i0.Output, args: ["signOut"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], densityChange: [{ type: i0.Output, args: ["densityChange"] }], languageChange: [{ type: i0.Output, args: ["languageChange"] }], userMenuItemSelected: [{ type: i0.Output, args: ["userMenuItemSelected"] }] } });
+
+/*
+ * Public API Surface of @meshmakers/shared-ui/shell (AB#5621)
+ */
+/**
+ * App shell building blocks of the OctoMesh Refinery Studio, usable by any host app
+ * (independent of OctoMesh: no octo-* or shared-auth imports):
+ * rail, space header with tab strip, settings side navigation, top bar and user menu,
+ * plus the services that turn the host's command tree into areas and tabs.
+ *
+ * Usage (host AppComponent):
+ *
+ * ```ts
+ * import {
+ *   ShellNavigationService, SpaceHeaderService, ShellRailComponent, SpaceShellComponent,
+ *   ShellTopBarComponent, SettingsSideNavComponent, shellEnvironmentChip
+ * } from '@meshmakers/shared-ui/shell';
+ *
+ * @Component({
+ *   imports: [ShellTopBarComponent, ShellRailComponent, SpaceShellComponent, SettingsSideNavComponent, RouterOutlet],
+ *   template: `
+ *     <mm-shell-top-bar brandName="My App" brandMarkSrc="assets/mark.svg"
+ *       [tenantId]="tenantId()" [environment]="environment()"
+ *       [user]="user()" [sessionLoading]="auth.sessionLoading()" (signIn)="auth.login()" (signOut)="auth.logout()"
+ *       [theme]="themeMode.preference()" (themeChange)="themeMode.setPreference($event)"
+ *       [languages]="languages" [language]="language()" (languageChange)="setLanguage($event)"
+ *       (searchRequested)="palette.open()">
+ *       <mm-tenant-switcher shellTenant [currentTenantId]="tenantId()" (tenantSelected)="openTenant($event)" />
+ *     </mm-shell-top-bar>
+ *     <mm-shell-rail [areas]="nav.topAreas()" [bottomAreas]="nav.bottomAreas()"
+ *       [activeAreaId]="nav.activeArea()?.id ?? null" [badges]="{ 'area-inbox': inboxCount() }"
+ *       (areaSelected)="nav.openArea($event)" (itemSelected)="nav.open($event)" />
+ *     <mm-space-shell [area]="nav.activeArea()" [activeTabId]="nav.activeTab()?.id ?? null"
+ *       [chips]="spaceHeader.chips()" [showTabs]="nav.showTabs()" (tabSelected)="nav.open($event)">
+ *       <kendo-breadcrumb spaceCrumbs [items]="crumbs()" />
+ *     </mm-space-shell>
+ *     <router-outlet />`
+ * })
+ * export class AppComponent {
+ *   protected readonly nav = inject(ShellNavigationService);
+ *   protected readonly spaceHeader = inject(SpaceHeaderService);
+ * }
+ * ```
+ *
+ * The navigation model is the host's `CommandSettingsService` command tree (shared-services):
+ * top-level items with id `areaId('<space>')` become rail areas, their children
+ * (`tabId('<space>', '<tab>')`) tabs; a top-level separator with id `RAIL_BOTTOM_SEPARATOR_ID`
+ * pins the following areas to the bottom. Route data `{ space, tab, objectDetail, spaceTabs }`
+ * refines the active area/tab.
+ *
+ * Optional providers:
+ * - `SHELL_MESSAGES` — translations (`Partial<ShellMessages>`, English defaults; every component
+ *   also has a `messages` input that wins over the token);
+ * - `SHELL_SETTINGS_SPACE` — the space that uses the settings side navigation (default `'settings'`,
+ *   `null` for none);
+ * - `NOTIFICATION_DISPLAY_OPTIONS` (shared-ui) with `SHELL_NOTIFICATION_OPTIONS` for the toast stacking.
+ *
+ * User, theme, mode, density, language and environment are inputs with matching outputs;
+ * applying and persisting them (per user) is the host's job.
+ */
+// --- Messages / i18n ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_SHELL_LANGUAGES, DEFAULT_SHELL_MESSAGES, RAIL_BOTTOM_SEPARATOR_ID, RAIL_FLYOUT_CLOSE_DELAY, RAIL_FLYOUT_OPEN_DELAY, SHELL_BADGE_MAX, SHELL_MESSAGES, SHELL_NOTIFICATION_OPTIONS, SHELL_SETTINGS_SPACE, SettingsSideNavBadgesService, SettingsSideNavComponent, ShellNavigationService, ShellRailComponent, ShellSearchTriggerService, ShellTopBarComponent, ShellUserMenuComponent, SpaceHeaderService, SpaceShellComponent, areaId, crumbPath, firstNameOf, formatShellMessage, greetingPhrase, homeGreeting, homeMeta, isAreaCrumb, resolveShellBadge, resolveShellMessages, shellBadgeText, shellBreadcrumbs, shellEnvironmentChip, spaceOfAreaId, tabId };
+//# sourceMappingURL=meshmakers-shared-ui-shell.mjs.map