@scion/workbench 18.0.0-beta.1 → 18.0.0-beta.3

package/fesm2022/scion-workbench.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Injectable, Inject, Optional, makeEnvironmentProviders, Pipe, NgZone, inject, DestroyRef, runInInjectionContext, HostBinding, Input, EventEmitter, Directive, Output, Injector, HostListener, ElementRef, isDevMode, EnvironmentInjector, ApplicationInitStatus, APP_INITIALIZER, ViewContainerRef, ViewChild, createComponent, forwardRef, ViewChildren, booleanAttribute, CUSTOM_ELEMENTS_SCHEMA, ApplicationRef, ENVIRONMENT_INITIALIZER, NgModule } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Injectable, Inject, Optional, makeEnvironmentProviders, Pipe, NgZone, inject, DestroyRef, runInInjectionContext, HostBinding, Input, EventEmitter, Directive, Output, Injector, HostListener, ElementRef, isDevMode, EnvironmentInjector, ApplicationInitStatus, APP_INITIALIZER, ViewContainerRef, ViewChild, createComponent, forwardRef, ViewChildren, booleanAttribute, CUSTOM_ELEMENTS_SCHEMA, IterableDiffers, ApplicationRef, ENVIRONMENT_INITIALIZER, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, merge, fromEvent, Observable, EMPTY, zip, of, skip, audit, concat, noop, asapScheduler, AsyncSubject, lastValueFrom, firstValueFrom, timer, combineLatest, mergeWith, identity, share, ReplaySubject, switchMap as switchMap$1, race, map as map$1, concatWith, delay, animationFrameScheduler, combineLatestWith, pairwise, withLatestFrom, interval, from, mergeMap as mergeMap$1 } from 'rxjs';
 import { SciThrobberComponent } from '@scion/components/throbber';
 import * as i2 from '@angular/router';
 import { NavigationStart, Router, PRIMARY_OUTLET, RouterOutlet, NavigationEnd, UrlSegment, ChildrenOutletContexts, ActivationStart, RouterEvent, NavigationCancel, NavigationError, GuardsCheckEnd, ROUTES } from '@angular/router';
 import { startWith, filter, map, take, mergeMap, observeOn, catchError, takeUntil, switchMap, distinctUntilChanged, first, shareReplay, expand, debounceTime } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i3$1 from '@angular/common';
-import { NgIf, NgFor, AsyncPipe, DOCUMENT, NgClass, NgComponentOutlet, NgTemplateOutlet, KeyValuePipe, Location, LocationStrategy } from '@angular/common';
+import * as i5 from '@angular/common';
+import { NgIf, AsyncPipe, DOCUMENT, NgFor, NgClass, NgComponentOutlet, NgTemplateOutlet, KeyValuePipe, Location, LocationStrategy } from '@angular/common';
 import { Arrays, Defined, Objects as Objects$1, Dictionaries, Observables, Maps } from '@scion/toolkit/util';
 import * as i3 from '@angular/cdk/portal';
 import { PortalModule, ComponentPortal, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
@@ -27,7 +27,7 @@ import { SciDimensionDirective, SciDimensionModule } from '@scion/components/dim
 import * as i2$2 from '@angular/forms';
 import { FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import * as i2$3 from '@scion/microfrontend-platform';
-import { MessageHeaders, MessageClient, ResponseStatusCodes, MicrofrontendPlatformConfig, APP_IDENTITY, mapToBody, HostManifestInterceptor, ObservableDecorator, IntentInterceptor, CapabilityInterceptor, MicrofrontendPlatformHost, MicrofrontendPlatform, IntentClient, OutletRouter, ManifestService, PlatformPropertyService } from '@scion/microfrontend-platform';
+import { MessageHeaders, MessageClient, ResponseStatusCodes, MicrofrontendPlatform, PlatformState, MicrofrontendPlatformConfig, APP_IDENTITY, mapToBody, HostManifestInterceptor, ObservableDecorator, IntentInterceptor, CapabilityInterceptor, MicrofrontendPlatformHost, IntentClient, OutletRouter, ManifestService, PlatformPropertyService } from '@scion/microfrontend-platform';
 import { Beans } from '@scion/toolkit/bean-manager';
 import * as i1$1 from '@scion/workbench-client';
 import { eMESSAGE_BOX_MESSAGE_PARAM, WorkbenchCapabilities, ɵMicrofrontendRouteParams as _MicrofrontendRouteParams, ɵTHEME_CONTEXT_KEY as _THEME_CONTEXT_KEY, ɵWorkbenchCommands as _WorkbenchCommands, ɵWorkbenchPopupMessageHeaders as _WorkbenchPopupMessageHeaders, ɵPOPUP_CONTEXT as _POPUP_CONTEXT, WorkbenchPopup, ɵDIALOG_CONTEXT as _DIALOG_CONTEXT, ɵWorkbenchDialogMessageHeaders as _WorkbenchDialogMessageHeaders, WorkbenchDialog as WorkbenchDialog$1, WorkbenchMessageBox, ɵMESSAGE_BOX_CONTEXT as _MESSAGE_BOX_CONTEXT, WorkbenchRouter as WorkbenchRouter$1, WorkbenchPopupService, WorkbenchMessageBoxService as WorkbenchMessageBoxService$1, ɵWorkbenchMessageBoxService as _WorkbenchMessageBoxService, WorkbenchDialogService as WorkbenchDialogService$1, ɵWorkbenchDialogService as _WorkbenchDialogService, WorkbenchNotificationService, ɵVIEW_ID_CONTEXT_KEY as _VIEW_ID_CONTEXT_KEY } from '@scion/workbench-client';
@@ -1054,10 +1054,6 @@ const MAIN_AREA_LAYOUT_QUERY_PARAM = 'main_area';
  * DI token to inject the context in which the view tab is rendered.
  */
 const VIEW_TAB_RENDERING_CONTEXT = new InjectionToken('VIEW_TAB_RENDERING_CONTEXT');
-/**
- * DI token representing the configured workbench layout.
- */
-const WORKBENCH_LAYOUT_CONFIG = new InjectionToken('WORKBENCH_LAYOUT_CONFIG');
 /**
  * Prefix used to identify an anonymous perspective that the workbench creates for views moved to a new window.
  */
@@ -1468,6 +1464,12 @@ const Objects = {
     withoutUndefinedEntries: (object) => {
         return Dictionaries.withoutUndefinedEntries(object);
     },
+    /**
+     * Stringifies given object to matrix notation: a=b;c=d;e=f
+     */
+    toMatrixNotation: (object) => {
+        return Object.entries(object ?? {}).map(([key, value]) => `${key}=${value}`).join(';');
+    },
 };
 
 /*
@@ -1775,7 +1777,7 @@ function createNavigationFromCommands(commands, extras) {
  * Creates navigation extras with workbench navigation instructions.
  */
 function createNavigationExtras(layout, extras) {
-    const { workbenchGrid, mainAreaGrid } = layout.serialize();
+    const { workbenchGrid, mainAreaGrid } = layout.serialize({ excludeViewMarkedForRemoval: true });
     return {
         ...extras,
         // Instruct the Angular router to process the navigation even if the URL does not change, e.g., when changing the workbench grid which is not contained in the URL.
@@ -1849,18 +1851,11 @@ class GridElementComponent {
         this.MTreeNode = MTreeNode;
         this.MPart = MPart;
         this.children = new Array();
-        /**
-         * Each layout change creates new model object instances since the layout is deserialized from the URL.
-         * Therefore, the "correct" track-by function is critical to help Angular identify DOM elements for reuse, which significantly can
-         * improve performance. Note that we use the index instead of the object identity because a different identity may be computed for
-         * nodes when re-arranging parts. Using the index is like not using *ngFor at all.
-         */
-        this.indexTrackByFn = (index) => index;
     }
     ngOnChanges(changes) {
         this.children = this.element instanceof MTreeNode ? this.computeChildren(this.element) : [];
-        this.parentNodeId = this.element.parent?.nodeId;
-        this.nodeId = this.element instanceof MTreeNode ? this.element.nodeId : undefined;
+        this.parentNodeId = this.element.parent?.id;
+        this.nodeId = this.element instanceof MTreeNode ? this.element.id : undefined;
         this.partId = this.element instanceof MPart ? this.element.id : undefined;
     }
     onSashStart() {
@@ -1869,7 +1864,7 @@ class GridElementComponent {
     onSashEnd(treeNode, [sashSize1, sashSize2]) {
         const ratio = sashSize1 / (sashSize1 + sashSize2);
         this._workbenchLayoutService.notifyDragEnding();
-        this._workbenchRouter.navigate(layout => layout.setSplitRatio(treeNode.nodeId, ratio)).then();
+        this._workbenchRouter.navigate(layout => layout.setSplitRatio(treeNode.id, ratio)).then();
     }
     computeChildren(treeNode) {
         const child1Visible = WorkbenchLayouts.isGridElementVisible(treeNode.child1);
@@ -1890,19 +1885,17 @@ class GridElementComponent {
         return [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: GridElementComponent, deps: [{ token: ɵWorkbenchRouter }, { token: WorkbenchLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: GridElementComponent, isStandalone: true, selector: "wb-grid-element", inputs: { element: "element" }, host: { properties: { "attr.data-parentnodeid": "this.parentNodeId", "attr.data-nodeid": "this.nodeId", "attr.data-partid": "this.partId" } }, usesOnChanges: true, ngImport: i0, template: "<!-- MPart (leaf) -->\n<ng-container *ngIf=\"element | wbInstanceof:MPart as part\" [cdkPortalOutlet]=\"part.id | wbPartPortal\"></ng-container>\n\n<!-- MTreeNode -->\n<ng-container *ngIf=\"element | wbInstanceof:MTreeNode as treeNode\">\n  <!-- Node with a single visible child. -->\n  <wb-grid-element *ngIf=\"children.length === 1\" [element]=\"children[0].element\"></wb-grid-element>\n\n  <!-- Node with multiple visible children. -->\n  <sci-sashbox *ngIf=\"children.length > 1\"\n               [direction]=\"treeNode.direction\"\n               [attr.data-nodeid]=\"treeNode.nodeId\"\n               (sashStart)=\"onSashStart()\"\n               (sashEnd)=\"onSashEnd(treeNode, $event)\">\n    <ng-template *ngFor=\"let child of children; index as i; trackBy: indexTrackByFn\" sciSash [size]=\"child.size\">\n      <wb-grid-element [element]=\"child.element\" [class]=\"'sash-' + (i + 1)\"></wb-grid-element>\n    </ng-template>\n  </sci-sashbox>\n</ng-container>\n", styles: [":host{display:grid}:host>sci-sashbox{z-index:auto;--sci-sashbox-gap: 0;--sci-sashbox-splitter-background-color: var(--sci-workbench-part-divider-color);--sci-sashbox-splitter-background-color-hover: var(--sci-workbench-part-divider-color-hover);--sci-sashbox-splitter-size: var(--sci-workbench-part-divider-size);--sci-sashbox-splitter-size-hover: var(--sci-workbench-part-divider-size-hover);--sci-sashbox-splitter-touch-target-size: var(--sci-workbench-part-divider-touch-target-size);--sci-sashbox-splitter-border-radius: 0;--sci-sashbox-splitter-opacity-active: var(--sci-workbench-part-divider-opacity-active);--sci-sashbox-splitter-opacity-hover: var(--sci-workbench-part-divider-opacity-hover)}\n"], dependencies: [{ kind: "component", type: GridElementComponent, selector: "wb-grid-element", inputs: ["element"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: InstanceofPipe, name: "wbInstanceof" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: PartPortalPipe, name: "wbPartPortal" }, { kind: "component", type: SciSashboxComponent, selector: "sci-sashbox", inputs: ["direction"], outputs: ["sashStart", "sashEnd"] }, { kind: "directive", type: SciSashDirective, selector: "ng-template[sciSash]", inputs: ["size", "minSize"], exportAs: ["sciSash"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: GridElementComponent, isStandalone: true, selector: "wb-grid-element", inputs: { element: "element" }, host: { properties: { "attr.data-parentnodeid": "this.parentNodeId", "attr.data-nodeid": "this.nodeId", "attr.data-partid": "this.partId" } }, usesOnChanges: true, ngImport: i0, template: "<!-- MPart (leaf) -->\n@if (element | wbInstanceof:MPart; as part) {\n  <ng-container [cdkPortalOutlet]=\"part.id | wbPartPortal\"/>\n}\n\n<!-- MTreeNode -->\n@if (element | wbInstanceof:MTreeNode; as treeNode) {\n  @if (children.length === 1) {\n    <!-- Node with a single visible child. -->\n    <wb-grid-element [element]=\"children[0].element\"/>\n  }\n  @if (children.length > 1) {\n    <!-- Node with multiple visible children. -->\n    <sci-sashbox [direction]=\"treeNode.direction\"\n                 [attr.data-nodeid]=\"treeNode.id\"\n                 (sashStart)=\"onSashStart()\"\n                 (sashEnd)=\"onSashEnd(treeNode, $event)\">\n      @for (child of children; track child.element.id) {\n        <ng-template sciSash [size]=\"child.size\">\n          <wb-grid-element [element]=\"child.element\" [class]=\"'sash-' + ($index + 1)\"/>\n        </ng-template>\n      }\n    </sci-sashbox>\n  }\n}\n", styles: [":host{display:grid}:host>sci-sashbox{z-index:auto;--sci-sashbox-gap: 0;--sci-sashbox-splitter-background-color: var(--sci-workbench-part-divider-color);--sci-sashbox-splitter-background-color-hover: var(--sci-workbench-part-divider-color-hover);--sci-sashbox-splitter-size: var(--sci-workbench-part-divider-size);--sci-sashbox-splitter-size-hover: var(--sci-workbench-part-divider-size-hover);--sci-sashbox-splitter-touch-target-size: var(--sci-workbench-part-divider-touch-target-size);--sci-sashbox-splitter-border-radius: 0;--sci-sashbox-splitter-opacity-active: var(--sci-workbench-part-divider-opacity-active);--sci-sashbox-splitter-opacity-hover: var(--sci-workbench-part-divider-opacity-hover)}\n"], dependencies: [{ kind: "component", type: GridElementComponent, selector: "wb-grid-element", inputs: ["element"] }, { kind: "pipe", type: InstanceofPipe, name: "wbInstanceof" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: PartPortalPipe, name: "wbPartPortal" }, { kind: "component", type: SciSashboxComponent, selector: "sci-sashbox", inputs: ["direction"], outputs: ["sashStart", "sashEnd"] }, { kind: "directive", type: SciSashDirective, selector: "ng-template[sciSash]", inputs: ["size", "minSize"], exportAs: ["sciSash"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: GridElementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-grid-element', standalone: true, imports: [
-                        NgIf,
-                        NgFor,
                         InstanceofPipe,
                         PortalModule,
                         PartPortalPipe,
                         SciSashboxComponent,
                         SciSashDirective,
-                    ], template: "<!-- MPart (leaf) -->\n<ng-container *ngIf=\"element | wbInstanceof:MPart as part\" [cdkPortalOutlet]=\"part.id | wbPartPortal\"></ng-container>\n\n<!-- MTreeNode -->\n<ng-container *ngIf=\"element | wbInstanceof:MTreeNode as treeNode\">\n  <!-- Node with a single visible child. -->\n  <wb-grid-element *ngIf=\"children.length === 1\" [element]=\"children[0].element\"></wb-grid-element>\n\n  <!-- Node with multiple visible children. -->\n  <sci-sashbox *ngIf=\"children.length > 1\"\n               [direction]=\"treeNode.direction\"\n               [attr.data-nodeid]=\"treeNode.nodeId\"\n               (sashStart)=\"onSashStart()\"\n               (sashEnd)=\"onSashEnd(treeNode, $event)\">\n    <ng-template *ngFor=\"let child of children; index as i; trackBy: indexTrackByFn\" sciSash [size]=\"child.size\">\n      <wb-grid-element [element]=\"child.element\" [class]=\"'sash-' + (i + 1)\"></wb-grid-element>\n    </ng-template>\n  </sci-sashbox>\n</ng-container>\n", styles: [":host{display:grid}:host>sci-sashbox{z-index:auto;--sci-sashbox-gap: 0;--sci-sashbox-splitter-background-color: var(--sci-workbench-part-divider-color);--sci-sashbox-splitter-background-color-hover: var(--sci-workbench-part-divider-color-hover);--sci-sashbox-splitter-size: var(--sci-workbench-part-divider-size);--sci-sashbox-splitter-size-hover: var(--sci-workbench-part-divider-size-hover);--sci-sashbox-splitter-touch-target-size: var(--sci-workbench-part-divider-touch-target-size);--sci-sashbox-splitter-border-radius: 0;--sci-sashbox-splitter-opacity-active: var(--sci-workbench-part-divider-opacity-active);--sci-sashbox-splitter-opacity-hover: var(--sci-workbench-part-divider-opacity-hover)}\n"] }]
+                    ], template: "<!-- MPart (leaf) -->\n@if (element | wbInstanceof:MPart; as part) {\n  <ng-container [cdkPortalOutlet]=\"part.id | wbPartPortal\"/>\n}\n\n<!-- MTreeNode -->\n@if (element | wbInstanceof:MTreeNode; as treeNode) {\n  @if (children.length === 1) {\n    <!-- Node with a single visible child. -->\n    <wb-grid-element [element]=\"children[0].element\"/>\n  }\n  @if (children.length > 1) {\n    <!-- Node with multiple visible children. -->\n    <sci-sashbox [direction]=\"treeNode.direction\"\n                 [attr.data-nodeid]=\"treeNode.id\"\n                 (sashStart)=\"onSashStart()\"\n                 (sashEnd)=\"onSashEnd(treeNode, $event)\">\n      @for (child of children; track child.element.id) {\n        <ng-template sciSash [size]=\"child.size\">\n          <wb-grid-element [element]=\"child.element\" [class]=\"'sash-' + ($index + 1)\"/>\n        </ng-template>\n      }\n    </sci-sashbox>\n  }\n}\n", styles: [":host{display:grid}:host>sci-sashbox{z-index:auto;--sci-sashbox-gap: 0;--sci-sashbox-splitter-background-color: var(--sci-workbench-part-divider-color);--sci-sashbox-splitter-background-color-hover: var(--sci-workbench-part-divider-color-hover);--sci-sashbox-splitter-size: var(--sci-workbench-part-divider-size);--sci-sashbox-splitter-size-hover: var(--sci-workbench-part-divider-size-hover);--sci-sashbox-splitter-touch-target-size: var(--sci-workbench-part-divider-touch-target-size);--sci-sashbox-splitter-border-radius: 0;--sci-sashbox-splitter-opacity-active: var(--sci-workbench-part-divider-opacity-active);--sci-sashbox-splitter-opacity-hover: var(--sci-workbench-part-divider-opacity-hover)}\n"] }]
         }], ctorParameters: () => [{ type: ɵWorkbenchRouter }, { type: WorkbenchLayoutService }], propDecorators: { parentNodeId: [{
                 type: HostBinding,
                 args: ['attr.data-parentnodeid']
@@ -2363,22 +2356,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{ name: 'wbGridElementIfVisible', standalone: true }]
         }] });
 
-/*
- * Copyright (c) 2018-2024 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-/**
- * Generates a UUID (universally unique identifier) compliant with the RFC 4122 version 4.
- */
-function randomUUID() {
-    return UUID.randomUUID();
-}
-
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
  *
@@ -2395,7 +2372,7 @@ function randomUUID() {
  */
 const WORKBENCH_ID = new InjectionToken('WORKBENCH_ID', {
     providedIn: 'root',
-    factory: () => randomUUID(),
+    factory: () => UUID.randomUUID(),
 });
 
 /*
@@ -2435,7 +2412,7 @@ const GridDropTargets = {
             }
             default: {
                 return {
-                    elementId: grid.root instanceof MPart ? grid.root.id : grid.root.nodeId,
+                    elementId: grid.root.id,
                     region: dropRegion,
                     workbenchId,
                     newPart: { ratio: .2 },
@@ -3128,7 +3105,7 @@ class WorkbenchView {
  */
 class FormatUrlPipe {
     transform(url) {
-        return url.map(segment => segment.path).join('/');
+        return url.map(segment => `${segment}`).join('/');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FormatUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: FormatUrlPipe, isStandalone: true, name: "appFormatUrl" }); }
@@ -3153,13 +3130,13 @@ class PageNotFoundComponent {
         this.view = inject(WorkbenchView);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: PageNotFoundComponent, isStandalone: true, selector: "wb-page-not-found", ngImport: i0, template: "<header>Page Not Found</header>\n\n<section class=\"message\">\n  The requested page <span class=\"url\">{{view.urlSegments | appFormatUrl}}</span> was not found.\n  <br>\n  The URL may have changed. Try to open the view again.\n</section>\n\n<button (click)=\"view.close()\">Close</button>\n\n@if (isDevMode) {\n  <section class=\"developer-hint\">\n    You can create a custom \"Page Not Found\" component and register it in the workbench configuration to personalize this page.\n  </section>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:2em;padding:1em;align-items:center}:host>header{font-weight:700;font-size:1.3rem}:host>section.message{text-align:center;line-height:1.75}:host>section.message>span.url{font-weight:700}:host>section.developer-hint{border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);padding:1em;max-width:550px;color:var(--sci-color-accent);font-family:monospace;text-align:center}:host>button{all:unset;cursor:pointer;padding:.5em 1.5em;color:var(--sci-color-accent-inverse);background-color:var(--sci-color-accent);background-clip:padding-box;border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);text-align:center}:host>button:focus,:host>button:active{border-color:transparent;outline:1px solid var(--sci-color-accent);color:var(--sci-color-accent-inverse)}\n"], dependencies: [{ kind: "pipe", type: FormatUrlPipe, name: "appFormatUrl" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: PageNotFoundComponent, isStandalone: true, selector: "wb-page-not-found", ngImport: i0, template: "<header>Page Not Found</header>\n\n<section class=\"message\">\n  The requested page <span class=\"url\">{{view.urlSegments | appFormatUrl}}</span> was not found.\n  <br>\n  The URL may have changed. Try to open the view again.\n</section>\n\n<button (click)=\"view.close()\">Close</button>\n\n@if (isDevMode) {\n  <section class=\"developer-hint\">\n    You can create a custom \"Not Found\" page component and register it in the workbench configuration to personalize this page.\n  </section>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:2em;padding:1em;align-items:center}:host>header{font-weight:700;font-size:1.3rem}:host>section.message{text-align:center;line-height:1.75}:host>section.message>span.url{font-weight:700}:host>section.developer-hint{border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);padding:1em;max-width:550px;color:var(--sci-color-accent);font-family:monospace;text-align:center}:host>button{all:unset;cursor:pointer;padding:.5em 1.5em;color:var(--sci-color-accent-inverse);background-color:var(--sci-color-accent);background-clip:padding-box;border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);text-align:center}:host>button:focus,:host>button:active{border-color:transparent;outline:1px solid var(--sci-color-accent);color:var(--sci-color-accent-inverse)}\n"], dependencies: [{ kind: "pipe", type: FormatUrlPipe, name: "appFormatUrl" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: PageNotFoundComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-page-not-found', standalone: true, imports: [
                         FormatUrlPipe,
-                    ], template: "<header>Page Not Found</header>\n\n<section class=\"message\">\n  The requested page <span class=\"url\">{{view.urlSegments | appFormatUrl}}</span> was not found.\n  <br>\n  The URL may have changed. Try to open the view again.\n</section>\n\n<button (click)=\"view.close()\">Close</button>\n\n@if (isDevMode) {\n  <section class=\"developer-hint\">\n    You can create a custom \"Page Not Found\" component and register it in the workbench configuration to personalize this page.\n  </section>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:2em;padding:1em;align-items:center}:host>header{font-weight:700;font-size:1.3rem}:host>section.message{text-align:center;line-height:1.75}:host>section.message>span.url{font-weight:700}:host>section.developer-hint{border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);padding:1em;max-width:550px;color:var(--sci-color-accent);font-family:monospace;text-align:center}:host>button{all:unset;cursor:pointer;padding:.5em 1.5em;color:var(--sci-color-accent-inverse);background-color:var(--sci-color-accent);background-clip:padding-box;border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);text-align:center}:host>button:focus,:host>button:active{border-color:transparent;outline:1px solid var(--sci-color-accent);color:var(--sci-color-accent-inverse)}\n"] }]
+                    ], template: "<header>Page Not Found</header>\n\n<section class=\"message\">\n  The requested page <span class=\"url\">{{view.urlSegments | appFormatUrl}}</span> was not found.\n  <br>\n  The URL may have changed. Try to open the view again.\n</section>\n\n<button (click)=\"view.close()\">Close</button>\n\n@if (isDevMode) {\n  <section class=\"developer-hint\">\n    You can create a custom \"Not Found\" page component and register it in the workbench configuration to personalize this page.\n  </section>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:2em;padding:1em;align-items:center}:host>header{font-weight:700;font-size:1.3rem}:host>section.message{text-align:center;line-height:1.75}:host>section.message>span.url{font-weight:700}:host>section.developer-hint{border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);padding:1em;max-width:550px;color:var(--sci-color-accent);font-family:monospace;text-align:center}:host>button{all:unset;cursor:pointer;padding:.5em 1.5em;color:var(--sci-color-accent-inverse);background-color:var(--sci-color-accent);background-clip:padding-box;border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);text-align:center}:host>button:focus,:host>button:active{border-color:transparent;outline:1px solid var(--sci-color-accent);color:var(--sci-color-accent-inverse)}\n"] }]
         }] });
 
 /*
@@ -3241,7 +3218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
 /**
  * Facilitates the registration of auxiliary routes of top-level routes.
  */
-class WorkbenchAuxiliaryRoutesRegistrator {
+class WorkbenchAuxiliaryRouteInstaller {
     constructor(_workbenchConfig, _router) {
         this._workbenchConfig = _workbenchConfig;
         this._router = _router;
@@ -3265,7 +3242,7 @@ class WorkbenchAuxiliaryRoutesRegistrator {
                 ...this._router.config
                     .filter(route => !route.outlet || route.outlet === PRIMARY_OUTLET)
                     .map(route => ({ ...route, data: { ...route.data, [WorkbenchRouteData.ɵoutlet]: outlet } })),
-                // Register "Page Not Found" route as the last route of the outlet.
+                // Register "Not Found" page route as the last route of the outlet.
                 {
                     path: '**',
                     loadComponent: () => this._workbenchConfig.pageNotFoundComponent ?? PageNotFoundComponent,
@@ -3301,10 +3278,10 @@ class WorkbenchAuxiliaryRoutesRegistrator {
         const newRoutes = [...config];
         this._router.config.splice(0, this._router.config.length, ...newRoutes);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchAuxiliaryRoutesRegistrator, deps: [{ token: WorkbenchConfig }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchAuxiliaryRoutesRegistrator, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchAuxiliaryRouteInstaller, deps: [{ token: WorkbenchConfig }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchAuxiliaryRouteInstaller, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchAuxiliaryRoutesRegistrator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchAuxiliaryRouteInstaller, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: WorkbenchConfig }, { type: i2.Router }] });
@@ -3792,13 +3769,13 @@ class WorkbenchRouterLinkDirective {
     ngOnDestroy() {
         this._ngOnDestroy$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchRouterLinkDirective, deps: [{ token: WorkbenchRouter }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.LocationStrategy }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: WorkbenchView, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchRouterLinkDirective, deps: [{ token: WorkbenchRouter }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i5.LocationStrategy }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: WorkbenchView, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.2", type: WorkbenchRouterLinkDirective, isStandalone: true, selector: "[wbRouterLink]", inputs: { wbRouterLink: "wbRouterLink", extras: ["wbRouterLinkExtras", "extras"] }, host: { listeners: { "click": "onClick($event.button,$event.ctrlKey,$event.metaKey)" }, properties: { "attr.href": "this.href" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchRouterLinkDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[wbRouterLink]', standalone: true }]
-        }], ctorParameters: () => [{ type: WorkbenchRouter }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.LocationStrategy }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: WorkbenchView, decorators: [{
+        }], ctorParameters: () => [{ type: WorkbenchRouter }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i5.LocationStrategy }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: WorkbenchView, decorators: [{
                     type: Optional
                 }] }], propDecorators: { href: [{
                 type: HostBinding,
@@ -3924,6 +3901,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Generates a UID (unique identifier).
+ */
+const UID = {
+    /**
+     * Generates a UID (unique identifier) with length 8.
+     */
+    randomUID: () => {
+        return UUID.randomUUID().substring(0, 8);
+    },
+};
+
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
  *
@@ -3958,7 +3956,7 @@ class WorkbenchLayoutMigrationV3 {
         // Consider the ids of views contained in the URL as already used.
         // Otherwise, when migrating the main area and using a view id already present in the perspective,
         // the view outlet would not be removed from the URL, resulting the migrated view to display
-        // "Page Not Found" or incorrect content.
+        // "Not Found" page or incorrect content.
         const viewOutlets = RouterUtils.parseViewOutlets(this.getCurrentUrl());
         const usedViewIds = new Set([...viewOutlets.keys(), ...collectViewIds(partGridV2.root)]);
         // Migrate the grid.
@@ -4140,6 +4138,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Migrates the workbench layout from version 4 to version 5.
+ *
+ * TODO [Angular 20] Remove migrator.
+ */
+class WorkbenchLayoutMigrationV5 {
+    migrate(json) {
+        const partGridV4 = JSON.parse(json);
+        // Migrate the grid.
+        const partGridV5 = {
+            ...partGridV4,
+            root: migrateGridElement(partGridV4.root),
+        };
+        return JSON.stringify(partGridV5);
+        function migrateGridElement(elementV4) {
+            switch (elementV4.type) {
+                case 'MTreeNode':
+                    return migrateNode(elementV4);
+                case 'MPart':
+                    return migratePart(elementV4);
+                default:
+                    throw Error(`[WorkbenchLayoutError] Unable to migrate to the latest version. Expected element to be of type 'MPart' or 'MTreeNode'. [version=3, element=${JSON.stringify(elementV4)}]`);
+            }
+        }
+        function migrateNode(nodeV4) {
+            return {
+                ...nodeV4,
+                id: UID.randomUID(),
+                child1: migrateGridElement(nodeV4.child1),
+                child2: migrateGridElement(nodeV4.child2),
+            };
+        }
+        function migratePart(partV4) {
+            return { ...partV4, views: partV4.views.map(migrateView) };
+        }
+        function migrateView(viewV4) {
+            const viewV5 = {
+                ...viewV4,
+                uid: UID.randomUID(),
+                navigation: viewV4.navigation ? { ...viewV4.navigation, id: UID.randomUID() } : undefined,
+            };
+            if (!viewV5.navigation) {
+                delete viewV5.navigation;
+            }
+            return viewV5;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV5, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV5, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV5, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Stringifies given data, exluding specified fields from serialization.
+ *
+ * To exclude a field, specify the path to the field in the object tree,
+ * using the slash as delimiter. The path supports the asterisk (`*`) to match a
+ * single segment or the globstar (`**`) to match multiple segments.
+ */
+function stringify(data, exclusions) {
+    if (!exclusions?.length) {
+        return JSON.stringify(data);
+    }
+    const objectStack = new Array();
+    const compiledExclusions = exclusions.map(exclusion => new CompiledExclusion(exclusion));
+    return JSON.stringify(data, (key, value) => {
+        if (key === '') { // root node
+            return value;
+        }
+        // Remove object(s) from the stack if finished their serialization.
+        while (objectStack.at(-1)?.fieldsToSerialize.size === 0) {
+            objectStack.pop();
+        }
+        // Mark current field as serialized.
+        objectStack.at(-1)?.fieldsToSerialize.delete(key);
+        // Check if to exclude the current field from serialization.
+        const exclude = compiledExclusions.some(exclusion => exclusion.matches(objectStack, key, value));
+        // Push object to stack if type of object.
+        if (!exclude && typeof value === 'object') {
+            objectStack.push({ key, value, fieldsToSerialize: new Set(Object.keys(value)) });
+        }
+        return exclude ? undefined : value;
+    });
+}
+/**
+ * Represents an exclusion, with the path compiled to a regex.
+ */
+class CompiledExclusion {
+    constructor(exclusion) {
+        exclusion = typeof exclusion === 'string' ? ({ path: exclusion, predicate: () => true }) : exclusion;
+        const path = exclusion.path
+            .replaceAll('/*/', '/[^/]+/') // replace asterisk to match single segment
+            .replaceAll('**/', '.+/') // replace globstar to match multiple root segments
+            .replaceAll('/**/', '/.+/'); // replace globstar to match multiple segments
+        this._regex = new RegExp(`^${path}$`);
+        this._predicate = exclusion.predicate;
+    }
+    /**
+     * Tests if given field matches this exclusion.
+     */
+    matches(objectStack, key, value) {
+        const path = objectStack.map(objectValue => objectValue.key).concat(key).join('/');
+        if (!this._regex.test(path)) {
+            return false;
+        }
+        const objectPath = objectStack.map(objectValue => objectValue.value);
+        if (!this._predicate(objectPath, key, value)) {
+            return false;
+        }
+        return true;
+    }
+}
+
 /*
  * Copyright (c) 2018-2023 Swiss Federal Railways
  *
@@ -4156,25 +4288,20 @@ class WorkbenchLayoutSerializer {
     constructor() {
         this._workbenchLayoutMigrator = new WorkbenchMigrator()
             .registerMigration(2, inject(WorkbenchLayoutMigrationV3))
-            .registerMigration(3, inject(WorkbenchLayoutMigrationV4));
+            .registerMigration(3, inject(WorkbenchLayoutMigrationV4))
+            .registerMigration(4, inject(WorkbenchLayoutMigrationV5));
     }
-    serializeGrid(grid, options) {
+    serializeGrid(grid, flags) {
         if (grid === null || grid === undefined) {
             return null;
         }
-        const transientFields = new Set(TRANSIENT_FIELDS);
-        if (!options?.includeNodeId) {
-            transientFields.add('nodeId');
-        }
-        if (!options?.includeUid) {
-            transientFields.add('uid');
-        }
-        if (!options?.includeMarkedForRemovalFlag) {
-            transientFields.add('markedForRemoval');
-        }
-        const json = JSON.stringify(grid, (key, value) => {
-            return transientFields.has(key) ? undefined : value;
-        });
+        const json = stringify(grid, new Array()
+            .concat('**/parent')
+            .concat('migrated')
+            .concat(flags?.excludeTreeNodeId ? ({ path: '**/id', predicate: context => context.at(-1) instanceof MTreeNode }) : [])
+            .concat(flags?.excludeViewUid ? '**/views/*/uid' : [])
+            .concat(flags?.excludeViewMarkedForRemoval ? '**/views/*/markedForRemoval' : [])
+            .concat(flags?.excludeViewNavigationId ? '**/views/*/navigation/id' : []));
         return window.btoa(`${json}${VERSION_SEPARATOR$1}${WORKBENCH_LAYOUT_VERSION}`);
     }
     /**
@@ -4187,11 +4314,10 @@ class WorkbenchLayoutSerializer {
         // Parse the JSON.
         const grid = JSON.parse(migratedJsonGrid, (key, value) => {
             if (MPart.isMPart(value)) {
-                const views = value.views.map(view => ({ ...view, uid: view.uid ?? randomUUID() }));
-                return new MPart({ ...value, views }); // create a class object from the object literal
+                return new MPart(value); // create a class object from the object literal
             }
             if (MTreeNode.isMTreeNode(value)) {
-                return new MTreeNode({ ...value, nodeId: value.nodeId ?? randomUUID() }); // create a class object from the object literal
+                return new MTreeNode(value); // create a class object from the object literal
             }
             return value;
         });
@@ -4238,11 +4364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
  *
  * @see WorkbenchMigrator
  */
-const WORKBENCH_LAYOUT_VERSION = 4;
-/**
- * Fields not serialized into JSON representation.
- */
-const TRANSIENT_FIELDS = new Set().add('parent').add('migrated');
+const WORKBENCH_LAYOUT_VERSION = 5;
 /**
  * Separates the serialized JSON model and its version in the base64-encoded string.
  *
@@ -4491,10 +4613,10 @@ class ɵWorkbenchLayout {
     addView(id, options) {
         const workingCopy = this.workingCopy();
         if (WorkbenchLayouts.isViewId(id)) {
-            workingCopy.__addView({ id, uid: randomUUID() }, options);
+            workingCopy.__addView({ id, uid: UID.randomUID() }, options);
         }
         else {
-            workingCopy.__addView({ id: this.computeNextViewId(), alternativeId: id, uid: randomUUID() }, options);
+            workingCopy.__addView({ id: this.computeNextViewId(), alternativeId: id, uid: UID.randomUID() }, options);
         }
         return workingCopy;
     }
@@ -4587,11 +4709,11 @@ class ɵWorkbenchLayout {
     /**
      * Serializes this layout into a URL-safe base64 string.
      */
-    serialize() {
+    serialize(flags) {
         const isMainAreaEmpty = (this.mainAreaGrid?.root instanceof MPart && this.mainAreaGrid.root.views.length === 0) ?? true;
         return {
-            workbenchGrid: this._serializer.serializeGrid(this.workbenchGrid),
-            mainAreaGrid: isMainAreaEmpty ? null : this._serializer.serializeGrid(this._grids.mainArea),
+            workbenchGrid: this._serializer.serializeGrid(this.workbenchGrid, flags),
+            mainAreaGrid: isMainAreaEmpty ? null : this._serializer.serializeGrid(this._grids.mainArea, flags),
             workbenchViewOutlets: this._serializer.serializeViewOutlets(this.viewOutlets({ grid: 'workbench' })),
             mainAreaViewOutlets: this._serializer.serializeViewOutlets(this.viewOutlets({ grid: 'mainArea' })),
         };
@@ -4616,7 +4738,7 @@ class ɵWorkbenchLayout {
         const ratio = relativeTo.ratio ?? .5;
         // Create a new tree node.
         const newTreeNode = new MTreeNode({
-            nodeId: randomUUID(),
+            id: UID.randomUID(),
             child1: addBefore ? newPart : referenceElement,
             child2: addBefore ? referenceElement : newPart,
             direction: relativeTo.align === 'left' || relativeTo.align === 'right' ? 'row' : 'column',
@@ -4722,6 +4844,7 @@ class ɵWorkbenchLayout {
             this._viewStates.delete(view.id);
         }
         view.navigation = Objects.withoutUndefinedEntries({
+            id: UID.randomUID(),
             hint: extras?.hint,
             cssClass: extras?.cssClass ? Arrays.coerce(extras.cssClass) : undefined,
         });
@@ -4864,12 +4987,7 @@ class ɵWorkbenchLayout {
             return this.findTreeElements((element) => element === findBy.element, { findFirst: true, grid: gridName }).length > 0;
         });
         if (!gridName) {
-            if (findBy.element instanceof MPart) {
-                throw Error(`[NullGridError] No grid found that contains the part '${findBy.element.id}'".`);
-            }
-            else {
-                throw Error(`[NullGridError] No grid found that contains the node '${findBy.element.nodeId}'".`);
-            }
+            throw Error(`[NullGridError] No grid found that contains the ${findBy.element instanceof MPart ? 'part' : 'node'} '${findBy.element.id}'".`);
         }
         return this._grids[gridName];
     }
@@ -4882,7 +5000,7 @@ class ɵWorkbenchLayout {
      */
     findTreeElement(findBy) {
         const element = this.findTreeElements((element) => {
-            return element instanceof MPart ? element.id === findBy.id : element.nodeId === findBy.id;
+            return element.id === findBy.id;
         }, { findFirst: true }).at(0);
         if (!element) {
             throw Error(`[NullElementError] No element found with id '${findBy.id}'.`);
@@ -4932,8 +5050,8 @@ class ɵWorkbenchLayout {
      */
     workingCopy() {
         return runInInjectionContext(this._injector, () => new ɵWorkbenchLayout({
-            workbenchGrid: this._serializer.serializeGrid(this.workbenchGrid, { includeNodeId: true, includeUid: true, includeMarkedForRemovalFlag: true }),
-            mainAreaGrid: this._serializer.serializeGrid(this._grids.mainArea, { includeNodeId: true, includeUid: true, includeMarkedForRemovalFlag: true }),
+            workbenchGrid: this._serializer.serializeGrid(this.workbenchGrid),
+            mainAreaGrid: this._serializer.serializeGrid(this._grids.mainArea),
             viewOutlets: Object.fromEntries(this._viewOutlets),
             viewStates: Object.fromEntries(this._viewStates),
             maximized: this._maximized,
@@ -5031,7 +5149,7 @@ function coercePosition(position, part) {
  */
 const MAIN_AREA_INITIAL_PART_ID = new InjectionToken('MAIN_AREA_INITIAL_PART_ID', {
     providedIn: 'root',
-    factory: () => randomUUID(),
+    factory: () => UID.randomUID(),
 });
 /**
  * Provides the instant when a part was last activated.
@@ -5169,8 +5287,8 @@ class WorkbenchGridMerger {
      * Performs a merge of given local and remote layouts, using the base layout as the common ancestor.
      */
     merge(grids) {
-        const serializedBaseLayout = grids.base.serialize();
-        const serializedRemoteLayout = grids.remote.serialize();
+        const serializedBaseLayout = grids.base.serialize({ excludeTreeNodeId: true, excludeViewUid: true, excludeViewNavigationId: true });
+        const serializedRemoteLayout = grids.remote.serialize({ excludeTreeNodeId: true, excludeViewUid: true, excludeViewNavigationId: true });
         if (serializedBaseLayout.workbenchGrid !== serializedRemoteLayout.workbenchGrid) {
             return grids.remote;
         }
@@ -5563,7 +5681,16 @@ class ɵWorkbenchPerspective {
      * Creates the initial layout of this perspective as defined in the perspective definition.
      */
     async createInitialPerspectiveLayout() {
-        return await runInInjectionContext(this._environmentInjector, () => this._initialLayoutFn(this._workbenchLayoutFactory));
+        const initialLayout = await runInInjectionContext(this._environmentInjector, () => this._initialLayoutFn(this._workbenchLayoutFactory));
+        return this.ensureActiveView(initialLayout);
+    }
+    /**
+     * Activates the first view of each part if not specified.
+     */
+    ensureActiveView(layout) {
+        return layout.parts()
+            .filter(part => part.views?.length)
+            .reduce((acc, part) => part.activeViewId ? acc : acc.activateView(part.views[0].id), layout);
     }
     /**
      * Subscribes to workbench layout changes, invoking the given callback on layout change, but only if this perspective is active.
@@ -5643,32 +5770,37 @@ class ɵWorkbenchPerspective {
  * Enables registration and activation of perspectives.
  */
 class WorkbenchPerspectiveService {
-    constructor(_layoutConfig, _perspectiveRegistry, _environmentInjector, _workbenchPerspectiveStorageService, workbenchStartup, logger) {
-        this._layoutConfig = _layoutConfig;
+    constructor(_workbenchConfig, _perspectiveRegistry, _environmentInjector, _applicationInitStatus, _workbenchPerspectiveStorageService) {
+        this._workbenchConfig = _workbenchConfig;
         this._perspectiveRegistry = _perspectiveRegistry;
         this._environmentInjector = _environmentInjector;
+        this._applicationInitStatus = _applicationInitStatus;
         this._workbenchPerspectiveStorageService = _workbenchPerspectiveStorageService;
-        workbenchStartup.whenStarted
-            .then(() => this.activateInitialPerspective())
-            .catch(error => logger.error(() => 'Failed to initialize perspectives', error));
     }
     async init() {
         await this.registerPerspectivesFromConfig();
         await this.registerAnonymousPerspectiveFromWindowName();
+        await this.activateInitialPerspective();
     }
     /**
      * Registers perspectives configured in {@link WorkbenchConfig}.
      */
     async registerPerspectivesFromConfig() {
-        // Register perspective either from function or object config.
-        if (typeof this._layoutConfig === 'function') {
-            await this.registerPerspective({ id: DEFAULT_WORKBENCH_PERSPECTIVE_ID, layout: this._layoutConfig });
-        }
-        else {
-            for (const perspective of this._layoutConfig.perspectives) {
+        const layout = this._workbenchConfig.layout;
+        // Create perspective from layout (if any).
+        if (typeof layout === 'function') {
+            await this.registerPerspective({ id: DEFAULT_WORKBENCH_PERSPECTIVE_ID, layout });
+        }
+        // Register configured perspectives (if any).
+        else if (layout?.perspectives?.length) {
+            for (const perspective of layout.perspectives) {
                 await this.registerPerspective(perspective);
             }
         }
+        // Register default perspective if no perspective is registered.
+        else if (!this._perspectiveRegistry.perspectives.length) {
+            await this.registerPerspective({ id: DEFAULT_WORKBENCH_PERSPECTIVE_ID, layout: ((factory) => factory.addPart(MAIN_AREA)) });
+        }
     }
     /**
      * Registers an anonymous perspective if the window name indicates it.
@@ -5724,55 +5856,62 @@ class WorkbenchPerspectiveService {
         await this.activePerspective?.reset();
     }
     /**
-     * Activates the initial perspective, if any.
+     * Activates the initial perspective.
      */
     async activateInitialPerspective() {
-        // Determine the initial perspective.
-        const initialPerspectiveId = await (async () => {
-            // Determine the initial perspective using information from the window name.
-            const perspectiveFromWindow = parsePerspectiveIdFromWindowName();
-            if (perspectiveFromWindow && this._perspectiveRegistry.has(perspectiveFromWindow)) {
-                return perspectiveFromWindow;
-            }
-            // Determine the initial perspective using information from the storage.
-            const perspectiveFromStorage = await this._workbenchPerspectiveStorageService.loadActivePerspectiveId();
-            if (perspectiveFromStorage && this._perspectiveRegistry.has(perspectiveFromStorage)) {
-                return perspectiveFromStorage;
-            }
-            // Determine the initial perspective using information from the config.
-            const perspectiveFromConfig = typeof this._layoutConfig === 'object' ? this._layoutConfig.initialPerspective : null;
-            if (!perspectiveFromConfig) {
-                return this._perspectiveRegistry.perspectives[0]?.id;
-            }
-            if (typeof perspectiveFromConfig === 'string') {
-                return perspectiveFromConfig;
-            }
-            if (typeof perspectiveFromConfig === 'function') {
-                return (await runInInjectionContext(this._environmentInjector, () => perspectiveFromConfig([...this._perspectiveRegistry.perspectives])))?.id;
-            }
-            return undefined;
-        })();
-        // Select initial perspective.
-        if (initialPerspectiveId) {
-            await this.switchPerspective(initialPerspectiveId, { storePerspectiveAsActive: false });
+        if (!this._perspectiveRegistry.perspectives.length) {
+            throw Error('[NullPerspectiveError] No perspective found to activate.');
+        }
+        const perspectiveId = await this.determineInitialPerspective() ?? this._perspectiveRegistry.perspectives[0].id;
+        const activation = this.switchPerspective(perspectiveId, { storePerspectiveAsActive: false });
+        // Switching perspective blocks until the initial navigation has been performed. By default, Angular performs
+        // the initial navigation after running app initializers. Therefore, do not await perspective activation when
+        // starting the workbench during app initialization. Otherwise, Angular would never complete app initialization.
+        if (this._applicationInitStatus.done) {
+            await activation;
         }
     }
+    /**
+     * Determines which perspective to activate, with the following precedence:
+     *
+     * 1. Perspective defined as window name.
+     * 2. Perspective defined in storage.
+     * 3. Perspective configured in the workbench config.
+     */
+    async determineInitialPerspective() {
+        // Find perspective in window name.
+        const perspectiveFromWindow = parsePerspectiveIdFromWindowName();
+        if (perspectiveFromWindow && this._perspectiveRegistry.has(perspectiveFromWindow)) {
+            return perspectiveFromWindow;
+        }
+        // Find perspective in storage.
+        const perspectiveFromStorage = await this._workbenchPerspectiveStorageService.loadActivePerspectiveId();
+        if (perspectiveFromStorage && this._perspectiveRegistry.has(perspectiveFromStorage)) {
+            return perspectiveFromStorage;
+        }
+        // Find perspective in config.
+        const perspectiveFromConfig = typeof this._workbenchConfig.layout === 'object' && this._workbenchConfig.layout.initialPerspective;
+        if (typeof perspectiveFromConfig === 'string') {
+            return perspectiveFromConfig;
+        }
+        if (typeof perspectiveFromConfig === 'function') {
+            return (await runInInjectionContext(this._environmentInjector, () => perspectiveFromConfig([...this._perspectiveRegistry.perspectives])));
+        }
+        return undefined;
+    }
     /**
      * Returns the currently active perspective, or `null` if there is no current perspective.
      */
     get activePerspective() {
         return this._perspectiveRegistry.perspectives.find(perspective => perspective.active) ?? null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchPerspectiveService, deps: [{ token: WORKBENCH_LAYOUT_CONFIG }, { token: WorkbenchPerspectiveRegistry }, { token: i0.EnvironmentInjector }, { token: WorkbenchPerspectiveStorageService }, { token: WorkbenchStartup }, { token: Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchPerspectiveService, deps: [{ token: WorkbenchConfig }, { token: WorkbenchPerspectiveRegistry }, { token: i0.EnvironmentInjector }, { token: i0.ApplicationInitStatus }, { token: WorkbenchPerspectiveStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchPerspectiveService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchPerspectiveService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WORKBENCH_LAYOUT_CONFIG]
-                }] }, { type: WorkbenchPerspectiveRegistry }, { type: i0.EnvironmentInjector }, { type: WorkbenchPerspectiveStorageService }, { type: WorkbenchStartup }, { type: Logger }] });
+        }], ctorParameters: () => [{ type: WorkbenchConfig }, { type: WorkbenchPerspectiveRegistry }, { type: i0.EnvironmentInjector }, { type: i0.ApplicationInitStatus }, { type: WorkbenchPerspectiveStorageService }] });
 /**
  * Identifier for the "default" perspective that the workbench creates if not providing a named layout.
  */
@@ -6328,6 +6467,8 @@ class WbComponentPortal {
             throw Error(`[PortalConstructError] Component already constructed. [component=${this._componentType}]`);
         }
         this._componentRef = this.createComponent(injectionContext);
+        // Trigger change detection to complete the initialization of the component, important for components detached from the Angular component tree.
+        this._componentRef.changeDetectorRef.detectChanges();
     }
     /**
      * Attaches this portal to the given {@link ViewContainerRef} according to the following rules:
@@ -7367,7 +7508,7 @@ class ɵWorkbenchDialog {
         /**
          * Unique identity of this dialog.
          */
-        this.id = randomUUID();
+        this.id = UUID.randomUUID();
         /**
          * Indicates whether this dialog is blocked by other dialog(s) that overlay this dialog.
          */
@@ -8138,7 +8279,7 @@ class ɵPopup {
          * Indicates whether this popup is blocked by dialog(s) that overlay it.
          */
         this.blockedBy$ = new BehaviorSubject(null);
-        this.id = this._config.id ?? randomUUID();
+        this.id = this._config.id ?? UUID.randomUUID();
         this.cssClasses = Arrays.coerce(this._config.cssClass);
         this.blockWhenDialogOpened();
     }
@@ -8767,7 +8908,6 @@ class ɵWorkbenchView {
         this._viewDragService = inject(ViewDragService);
         this._activationInstantProvider = inject(ActivationInstantProvider);
         this._workbenchDialogRegistry = inject(WorkbenchDialogRegistry);
-        this._part$ = new BehaviorSubject(undefined);
         this._menuItemProviders$ = new BehaviorSubject([]);
         this._scrolledIntoView$ = new BehaviorSubject(true);
         this._adapters = new Map();
@@ -8780,13 +8920,17 @@ class ɵWorkbenchView {
         this.dirty = false;
         this.scrollTop = 0;
         this.scrollLeft = 0;
-        this.active$ = new BehaviorSubject(false);
         this.blockedBy$ = new BehaviorSubject(null);
         this.classList = new ClassList();
         this.menuItems$ = combineLatest([this._menuItemProviders$, this._workbenchService.viewMenuItemProviders$])
             .pipe(map(([localMenuItemProviders, globalMenuItemProviders]) => localMenuItemProviders.concat(globalMenuItemProviders)), mapArray(menuItemFactoryFn => menuItemFactoryFn(this)), filterArray((menuItem) => menuItem !== null));
+        const mView = options.layout.view({ viewId: this.id });
+        const mPart = options.layout.part({ viewId: this.id });
+        this.uid = mView.uid;
+        this.alternativeId = mView.alternativeId;
+        this.partId$ = new BehaviorSubject(mPart.id);
+        this.active$ = new BehaviorSubject(mPart.activeViewId === this.id);
         this.portal = this.createPortal(options.component);
-        this.trackViewActivation();
         this.touchOnActivate();
         this.blockWhenDialogOpened();
         this.detectRouteActivation();
@@ -8826,14 +8970,28 @@ class ɵWorkbenchView {
     onLayoutChange(layout) {
         const mPart = layout.part({ viewId: this.id });
         const mView = layout.view({ viewId: this.id });
+        const prevNavigationId = this.navigationId;
         this.uid = mView.uid;
         this.alternativeId = mView.alternativeId;
         this.urlSegments = layout.urlSegments({ viewId: this.id });
+        this.navigationId = mView.navigation?.id;
         this.navigationHint = mView.navigation?.hint;
         this.state = layout.viewState({ viewId: this.id });
         this.classList.set(mView.cssClass, { scope: 'layout' });
         this.classList.set(mView.navigation?.cssClass, { scope: 'navigation' });
-        this._part$.next(this._partRegistry.get(mPart.id));
+        if (mPart.id !== this.partId$.value) {
+            this.partId$.next(mPart.id);
+        }
+        const active = mPart.activeViewId === this.id;
+        if (active !== this.active) {
+            this.active$.next(active);
+        }
+        // Inactive views are not checked for changes since detached from the Angular component tree.
+        // To complete the initialization of the routed content (to ensure that `ngOnInit` is called),
+        // we manually trigger change detection.
+        if (!this.active && this.portal.isConstructed && prevNavigationId !== this.navigationId) {
+            this.portal.componentRef.changeDetectorRef.detectChanges();
+        }
     }
     /**
      * Returns the component of this view. Returns `null` if not navigated the view, or before it was activated for the first time.
@@ -8913,7 +9071,7 @@ class ɵWorkbenchView {
     }
     /** @inheritDoc */
     get part() {
-        return Defined.orElseThrow(this._part$.value, () => Error(`[NullPartError] Part reference missing for view '${this.id}'.`));
+        return this._partRegistry.get(this.partId$.value);
     }
     /** @inheritDoc */
     close(target) {
@@ -8998,15 +9156,6 @@ class ɵWorkbenchView {
     get destroyed() {
         return this.portal.isDestroyed;
     }
-    /**
-     * Monitors the associated part to check if this view is currently active, updating the active state of this view accordingly.
-     */
-    trackViewActivation() {
-        this._part$
-            .pipe(switchMap$1(part => part?.activeViewId$ ?? EMPTY), map(activeViewId => activeViewId === this.id), bufferLatestUntilLayoutChange(), // Prevent the (de-)activation of potentially wrong views while updating the layout.
-        distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))
-            .subscribe(this.active$);
-    }
     /**
      * Updates the activation instant when this view is activated.
      */
@@ -9579,25 +9728,18 @@ class ViewComponent {
     get viewId() {
         return this._view.id;
     }
-    get cssClasses() {
-        return this._view.classList.value.join(' ');
-    }
     get isViewDragActive() {
         return this._viewDragService.viewDragData !== null;
     }
-    constructor(_view, _logger, _host, _viewDragService, viewContextMenuService) {
+    constructor(_view, _viewDragService, _logger) {
         this._view = _view;
-        this._logger = _logger;
-        this._host = _host;
         this._viewDragService = _viewDragService;
+        this._logger = _logger;
         this._viewport$ = new AsyncSubject();
         this._logger.debug(() => `Constructing ViewComponent. [viewId=${this.viewId}]`, LoggerNames.LIFECYCLE);
-        viewContextMenuService.installMenuItemAccelerators$(this._host, this._view)
-            .pipe(takeUntilDestroyed())
-            .subscribe();
-        combineLatest([this._view.active$, this._viewport$])
-            .pipe(takeUntilDestroyed())
-            .subscribe(([active, viewport]) => active ? this.onActivateView(viewport) : this.onDeactivateView(viewport));
+        this.installMenuItemAccelerators();
+        this.subscribeForViewActivation();
+        this.addViewClassesToHost();
     }
     onActivateView(viewport) {
         viewport.focus();
@@ -9608,13 +9750,33 @@ class ViewComponent {
         this._view.scrollTop = viewport.scrollTop;
         this._view.scrollLeft = viewport.scrollLeft;
     }
+    installMenuItemAccelerators() {
+        inject(ViewMenuService).installMenuItemAccelerators$(inject((ElementRef)), this._view)
+            .pipe(takeUntilDestroyed())
+            .subscribe();
+    }
+    subscribeForViewActivation() {
+        combineLatest([this._view.active$, this._viewport$])
+            .pipe(takeUntilDestroyed())
+            .subscribe(([active, viewport]) => {
+            active ? this.onActivateView(viewport) : this.onDeactivateView(viewport);
+        });
+    }
+    addViewClassesToHost() {
+        const ngClass = inject(NgClass);
+        this._view.classList.value$
+            .pipe(takeUntilDestroyed())
+            .subscribe(cssClasses => {
+            ngClass.ngClass = cssClasses;
+        });
+    }
     ngOnDestroy() {
         this._logger.debug(() => `Destroying ViewComponent [viewId=${this.viewId}]'`, LoggerNames.LIFECYCLE);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ViewComponent, deps: [{ token: ɵWorkbenchView }, { token: Logger }, { token: i0.ElementRef }, { token: ViewDragService }, { token: ViewMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ViewComponent, isStandalone: true, selector: "wb-view", host: { properties: { "attr.data-viewid": "this.viewId", "attr.class": "this.cssClasses", "class.view-drag": "this.isViewDragActive" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ViewComponent, deps: [{ token: ɵWorkbenchView }, { token: ViewDragService }, { token: Logger }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ViewComponent, isStandalone: true, selector: "wb-view", host: { properties: { "attr.data-viewid": "this.viewId", "class.view-drag": "this.isViewDragActive" } }, providers: [
             configureViewGlassPane(),
-        ], viewQueries: [{ propertyName: "setViewport", first: true, predicate: SciViewportComponent, descendants: true }], hostDirectives: [{ directive: GlassPaneDirective }], ngImport: i0, template: "<sci-viewport cdkTrapFocus>\n  <router-outlet [name]=\"viewId\"/>\n</sci-viewport>\n", styles: [":host{display:flex;flex-direction:column;background-color:var(--sci-workbench-view-background-color);color:var(--sci-color-text)}wb-workbench:has(wb-main-area-layout) wb-part:not(.main-area) :host{background-color:var(--sci-workbench-view-peripheral-background-color)}:host.view-drag{pointer-events:none}:host>sci-viewport{flex:1 1 0}:host>sci-viewport>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }] }); }
+        ], viewQueries: [{ propertyName: "setViewport", first: true, predicate: SciViewportComponent, descendants: true }], hostDirectives: [{ directive: GlassPaneDirective }, { directive: i5.NgClass }], ngImport: i0, template: "<sci-viewport cdkTrapFocus>\n  <router-outlet [name]=\"viewId\"/>\n</sci-viewport>\n", styles: [":host{display:flex;flex-direction:column;background-color:var(--sci-workbench-view-background-color);color:var(--sci-color-text)}wb-workbench:has(wb-main-area-layout) wb-part:not(.main-area) :host{background-color:var(--sci-workbench-view-peripheral-background-color)}:host.view-drag{pointer-events:none}:host>sci-viewport{flex:1 1 0}:host>sci-viewport>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
@@ -9624,18 +9786,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         SciViewportComponent,
                     ], hostDirectives: [
                         GlassPaneDirective,
+                        NgClass,
                     ], providers: [
                         configureViewGlassPane(),
                     ], template: "<sci-viewport cdkTrapFocus>\n  <router-outlet [name]=\"viewId\"/>\n</sci-viewport>\n", styles: [":host{display:flex;flex-direction:column;background-color:var(--sci-workbench-view-background-color);color:var(--sci-color-text)}wb-workbench:has(wb-main-area-layout) wb-part:not(.main-area) :host{background-color:var(--sci-workbench-view-peripheral-background-color)}:host.view-drag{pointer-events:none}:host>sci-viewport{flex:1 1 0}:host>sci-viewport>router-outlet{position:absolute}\n"] }]
-        }], ctorParameters: () => [{ type: ɵWorkbenchView }, { type: Logger }, { type: i0.ElementRef }, { type: ViewDragService }, { type: ViewMenuService }], propDecorators: { setViewport: [{
+        }], ctorParameters: () => [{ type: ɵWorkbenchView }, { type: ViewDragService }, { type: Logger }], propDecorators: { setViewport: [{
                 type: ViewChild,
                 args: [SciViewportComponent]
             }], viewId: [{
                 type: HostBinding,
                 args: ['attr.data-viewid']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['attr.class']
             }], isViewDragActive: [{
                 type: HostBinding,
                 args: ['class.view-drag']
@@ -10342,7 +10502,7 @@ class FilterFieldComponent {
         this._cd = _cd;
         this._cvaChangeFn = noop;
         this._cvaTouchedFn = noop;
-        this.id = randomUUID();
+        this.id = UUID.randomUUID();
         /**
          * Emits on filter change.
          */
@@ -10406,13 +10566,13 @@ class FilterFieldComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FilterFieldComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.FocusMonitor }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: FilterFieldComponent, isStandalone: true, selector: "wb-filter-field", inputs: { tabindex: "tabindex", placeholder: "placeholder", disabled: "disabled" }, outputs: { filter: "filter" }, host: { listeners: { "focus": "focus()" }, properties: { "attr.tabindex": "this.componentTabindex", "class.empty": "this.empty" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => FilterFieldComponent) },
-        ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<label [for]=\"id\" class=\"filter-icon scion-workbench-icons\">search</label>\n<input #input\n       [attr.id]=\"id\"\n       autocomplete=\"off\"\n       [formControl]=\"formControl\"\n       [tabindex]=\"tabindex ?? 0\"\n       [placeholder]=\"placeholder ?? ''\">\n<button class=\"clear scion-workbench-icons\" tabindex=\"-1\" (click)=\"onClear()\">\n  clear\n</button>\n", styles: [":host{display:inline-flex;flex-direction:row;gap:.5em;padding:.25em .5em}:host>label.filter-icon{flex:none;align-self:center;-webkit-user-select:none;user-select:none;font-size:1.5em}:host>input{all:unset;flex:auto;min-width:0}:host>button.clear{all:unset;flex:none;align-self:center;opacity:.75;cursor:pointer}:host>button.clear:hover{opacity:1}:host:not(:focus-within):not(:hover)>button.clear,:host:has(>input:disabled)>button.clear,:host.empty>button.clear{visibility:hidden}:host:has(>input:disabled)>label.filter-icon{color:var(--sci-color-text-subtlest)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<label [for]=\"id\" class=\"filter-icon scion-workbench-icons\">search</label>\n<input #input\n       [attr.id]=\"id\"\n       autocomplete=\"off\"\n       [formControl]=\"formControl\"\n       [tabindex]=\"tabindex ?? 0\"\n       [placeholder]=\"placeholder ?? ''\">\n<button class=\"clear scion-workbench-icons\" tabindex=\"-1\" (click)=\"onClear()\">\n  clear\n</button>\n", styles: [":host{display:inline-flex;flex-direction:row;gap:.5em;padding:.25em .5em}:host>label.filter-icon{flex:none;align-self:center;-webkit-user-select:none;user-select:none;font-size:1.5em}:host>input{all:unset;flex:auto;min-width:0}:host>input::placeholder{color:var(--sci-color-gray-400)}:host>button.clear{all:unset;flex:none;align-self:center;opacity:.75;cursor:pointer}:host>button.clear:hover{opacity:1}:host:not(:focus-within):not(:hover)>button.clear,:host:has(>input:disabled)>button.clear,:host.empty>button.clear{visibility:hidden}:host:has(>input:disabled)>label.filter-icon{color:var(--sci-color-text-subtlest)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FilterFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-filter-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ReactiveFormsModule], providers: [
                         { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => FilterFieldComponent) },
-                    ], template: "<label [for]=\"id\" class=\"filter-icon scion-workbench-icons\">search</label>\n<input #input\n       [attr.id]=\"id\"\n       autocomplete=\"off\"\n       [formControl]=\"formControl\"\n       [tabindex]=\"tabindex ?? 0\"\n       [placeholder]=\"placeholder ?? ''\">\n<button class=\"clear scion-workbench-icons\" tabindex=\"-1\" (click)=\"onClear()\">\n  clear\n</button>\n", styles: [":host{display:inline-flex;flex-direction:row;gap:.5em;padding:.25em .5em}:host>label.filter-icon{flex:none;align-self:center;-webkit-user-select:none;user-select:none;font-size:1.5em}:host>input{all:unset;flex:auto;min-width:0}:host>button.clear{all:unset;flex:none;align-self:center;opacity:.75;cursor:pointer}:host>button.clear:hover{opacity:1}:host:not(:focus-within):not(:hover)>button.clear,:host:has(>input:disabled)>button.clear,:host.empty>button.clear{visibility:hidden}:host:has(>input:disabled)>label.filter-icon{color:var(--sci-color-text-subtlest)}\n"] }]
+                    ], template: "<label [for]=\"id\" class=\"filter-icon scion-workbench-icons\">search</label>\n<input #input\n       [attr.id]=\"id\"\n       autocomplete=\"off\"\n       [formControl]=\"formControl\"\n       [tabindex]=\"tabindex ?? 0\"\n       [placeholder]=\"placeholder ?? ''\">\n<button class=\"clear scion-workbench-icons\" tabindex=\"-1\" (click)=\"onClear()\">\n  clear\n</button>\n", styles: [":host{display:inline-flex;flex-direction:row;gap:.5em;padding:.25em .5em}:host>label.filter-icon{flex:none;align-self:center;-webkit-user-select:none;user-select:none;font-size:1.5em}:host>input{all:unset;flex:auto;min-width:0}:host>input::placeholder{color:var(--sci-color-gray-400)}:host>button.clear{all:unset;flex:none;align-self:center;opacity:.75;cursor:pointer}:host>button.clear:hover{opacity:1}:host:not(:focus-within):not(:hover)>button.clear,:host:has(>input:disabled)>button.clear,:host.empty>button.clear{visibility:hidden}:host:has(>input:disabled)>label.filter-icon{color:var(--sci-color-text-subtlest)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$1.FocusMonitor }, { type: i0.ChangeDetectorRef }], propDecorators: { tabindex: [{
                 type: Input
             }], placeholder: [{
@@ -11329,8 +11489,6 @@ class PartComponent {
             .pipe(mapArray(viewId => this._viewRegistry.get(viewId)), filterArray(view => !view.active && !view.portal.isConstructed), mergeMap$1(views => from(views)))
             .subscribe(inactiveView => {
             inactiveView.portal.createComponentFromInjectionContext(this._injector);
-            // Trigger manual change detection cycle because the view is not yet added to the Angular component tree. Otherwise, routed content would not be attached.
-            inactiveView.portal.componentRef.changeDetectorRef.detectChanges();
         });
     }
     /**
@@ -11353,7 +11511,7 @@ class PartComponent {
         this._logger.debug(() => `Destroying PartComponent [partId=${this.partId}]'`, LoggerNames.LIFECYCLE);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: PartComponent, deps: [{ token: WORKBENCH_ID }, { token: WorkbenchViewRegistry }, { token: ViewDragService }, { token: i0.Injector }, { token: Logger }, { token: i0.ChangeDetectorRef }, { token: ɵWorkbenchPart }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: PartComponent, isStandalone: true, selector: "wb-part", host: { properties: { "attr.tabindex": "this.tabIndex", "attr.data-partid": "this.partId", "class.e2e-main-area": "this.isInMainArea", "class.main-area": "this.isMainArea", "class.active": "this.isActive" } }, ngImport: i0, template: "<wb-part-bar></wb-part-bar>\n\n<div wbViewDropZone\n     [wbViewDropZoneSize]=\".3\"\n     [wbViewDropZonePlaceholderSize]=\".5\"\n     [wbViewDropZoneCssClass]=\"'e2e-part'\"\n     (wbViewDropZoneDrop)=\"onViewDrop($event)\"\n     class=\"active-view e2e-active-view\">\n  <ng-container *wbPortalOutlet=\"part.activeViewId$ | async | wbViewPortal\"></ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;outline:none}:host>wb-part-bar{flex:none}:host>div.active-view{flex:auto;display:grid;position:relative}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: PartBarComponent, selector: "wb-part-bar" }, { kind: "directive", type: ViewDropZoneDirective, selector: "[wbViewDropZone]", inputs: ["wbViewDropZoneRegions", "wbViewDropZoneCssClass", "wbViewDropZoneSize", "wbViewDropZonePlaceholderSize"], outputs: ["wbViewDropZoneDrop"] }, { kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet"] }, { kind: "pipe", type: ViewPortalPipe, name: "wbViewPortal" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: PartComponent, isStandalone: true, selector: "wb-part", host: { properties: { "attr.tabindex": "this.tabIndex", "attr.data-partid": "this.partId", "class.e2e-main-area": "this.isInMainArea", "class.main-area": "this.isMainArea", "class.active": "this.isActive" } }, ngImport: i0, template: "<wb-part-bar/>\n\n<div wbViewDropZone\n     [wbViewDropZoneSize]=\".3\"\n     [wbViewDropZonePlaceholderSize]=\".5\"\n     [wbViewDropZoneCssClass]=\"'e2e-part'\"\n     (wbViewDropZoneDrop)=\"onViewDrop($event)\"\n     class=\"active-view e2e-active-view\">\n  <ng-container *wbPortalOutlet=\"part.activeViewId$ | async | wbViewPortal\"/>\n</div>\n", styles: [":host{display:flex;flex-direction:column;outline:none}:host>wb-part-bar{flex:none}:host>div.active-view{flex:auto;display:grid;position:relative}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: PartBarComponent, selector: "wb-part-bar" }, { kind: "directive", type: ViewDropZoneDirective, selector: "[wbViewDropZone]", inputs: ["wbViewDropZoneRegions", "wbViewDropZoneCssClass", "wbViewDropZoneSize", "wbViewDropZonePlaceholderSize"], outputs: ["wbViewDropZoneDrop"] }, { kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet"] }, { kind: "pipe", type: ViewPortalPipe, name: "wbViewPortal" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: PartComponent, decorators: [{
             type: Component,
@@ -11364,7 +11522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         ViewDropZoneDirective,
                         WorkbenchPortalOutletDirective,
                         ViewPortalPipe,
-                    ], template: "<wb-part-bar></wb-part-bar>\n\n<div wbViewDropZone\n     [wbViewDropZoneSize]=\".3\"\n     [wbViewDropZonePlaceholderSize]=\".5\"\n     [wbViewDropZoneCssClass]=\"'e2e-part'\"\n     (wbViewDropZoneDrop)=\"onViewDrop($event)\"\n     class=\"active-view e2e-active-view\">\n  <ng-container *wbPortalOutlet=\"part.activeViewId$ | async | wbViewPortal\"></ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;outline:none}:host>wb-part-bar{flex:none}:host>div.active-view{flex:auto;display:grid;position:relative}\n"] }]
+                    ], template: "<wb-part-bar/>\n\n<div wbViewDropZone\n     [wbViewDropZoneSize]=\".3\"\n     [wbViewDropZonePlaceholderSize]=\".5\"\n     [wbViewDropZoneCssClass]=\"'e2e-part'\"\n     (wbViewDropZoneDrop)=\"onViewDrop($event)\"\n     class=\"active-view e2e-active-view\">\n  <ng-container *wbPortalOutlet=\"part.activeViewId$ | async | wbViewPortal\"/>\n</div>\n", styles: [":host{display:flex;flex-direction:column;outline:none}:host>wb-part-bar{flex:none}:host>div.active-view{flex:auto;display:grid;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [WORKBENCH_ID]
@@ -11448,15 +11606,9 @@ class WorkbenchLayoutDiffer {
     /**
      * Computes differences in the layout since last time {@link WorkbenchLayoutDiffer#diff} was invoked.
      */
-    diff(workbenchLayout, urlTree) {
+    diff(workbenchLayout) {
         const parts = workbenchLayout?.parts().map(part => part.id);
-        // Create view diff based on views in the layout plus outlets in the URL, required because the layout is unavailable during initial navigation.
-        // Otherwise, the initial navigation for a URL with outlets of views contained in the workbench grid would fail as their view routes would be
-        // registered too late.
-        const views = new Set([
-            ...RouterUtils.parseViewOutlets(urlTree).keys(),
-            ...(workbenchLayout?.views().map(view => view.id) ?? []),
-        ]);
+        const views = workbenchLayout?.views().map(view => view.id);
         return new WorkbenchLayoutDiff({
             parts: this._partsDiffer.diff(parts),
             views: this._viewsDiffer.diff(views),
@@ -11493,6 +11645,61 @@ class WorkbenchLayoutDiff {
     }
 }
 
+/*
+ * Copyright (c) 2018-2023 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Stateful differ to compute view outlets.
+ *
+ * Use this differ to register/unregister view auxiliary routes.
+ *
+ * Because the layout is not available during initial navigation and empty-path views do not have
+ * an outlet in the URL, this differ uses both, outlets in the URL and views in the layout.
+ */
+class WorkbenchViewOutletDiffer {
+    constructor(differs) {
+        this._differ = differs.find([]).create();
+    }
+    /**
+     * Computes differences since last time {@link WorkbenchViewOutletDiffer#diff} was invoked.
+     */
+    diff(workbenchLayout, urlTree) {
+        const views = workbenchLayout?.views().map(view => view.id) ?? [];
+        const viewOutlets = RouterUtils.parseViewOutlets(urlTree).keys();
+        const changes = this._differ.diff(new Set([...viewOutlets, ...views]));
+        return new WorkbenchViewOutletDiff(changes);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchViewOutletDiffer, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchViewOutletDiffer, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchViewOutletDiffer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.IterableDiffers }] });
+/**
+ * Lists the view outlets added/removed in the current navigation.
+ */
+class WorkbenchViewOutletDiff {
+    constructor(changes) {
+        this.addedViewOutlets = new Array();
+        this.removedViewOutlets = new Array();
+        changes?.forEachAddedItem(({ item }) => this.addedViewOutlets.push(item));
+        changes?.forEachRemovedItem(({ item }) => this.removedViewOutlets.push(item));
+    }
+    toString() {
+        return `${new Array()
+            .concat(this.addedViewOutlets.length ? `addedViewOutlets=[${this.addedViewOutlets}]` : [])
+            .concat(this.removedViewOutlets.length ? `removedViewOutlets=[${this.removedViewOutlets}]` : [])
+            .join(', ')}`;
+    }
+}
+
 /*
  * Copyright (c) 2018-2023 Swiss Federal Railways
  *
@@ -11656,9 +11863,9 @@ class WorkbenchMessageBoxDiff {
  * - Parses the serialized layout and injects it into {@link WorkbenchLayoutService}.
  */
 class WorkbenchUrlObserver {
-    constructor(_router, _auxiliaryRoutesRegistrator, _viewRegistry, _partRegistry, _workbenchLayoutService, _environmentInjector, _workbenchRouter, _workbenchLayoutFactory, _workbenchLayoutDiffer, _workbenchPopupDiffer, _workbenchDialogDiffer, _workbenchMessageBoxDiffer, _logger) {
+    constructor(_router, _auxiliaryRouteInstaller, _viewRegistry, _partRegistry, _workbenchLayoutService, _environmentInjector, _workbenchRouter, _workbenchLayoutFactory, _workbenchLayoutDiffer, _workbenchViewOutletDiffer, _workbenchPopupDiffer, _workbenchDialogDiffer, _workbenchMessageBoxDiffer, _logger) {
         this._router = _router;
-        this._auxiliaryRoutesRegistrator = _auxiliaryRoutesRegistrator;
+        this._auxiliaryRouteInstaller = _auxiliaryRouteInstaller;
         this._viewRegistry = _viewRegistry;
         this._partRegistry = _partRegistry;
         this._workbenchLayoutService = _workbenchLayoutService;
@@ -11666,6 +11873,7 @@ class WorkbenchUrlObserver {
         this._workbenchRouter = _workbenchRouter;
         this._workbenchLayoutFactory = _workbenchLayoutFactory;
         this._workbenchLayoutDiffer = _workbenchLayoutDiffer;
+        this._workbenchViewOutletDiffer = _workbenchViewOutletDiffer;
         this._workbenchPopupDiffer = _workbenchPopupDiffer;
         this._workbenchDialogDiffer = _workbenchDialogDiffer;
         this._workbenchMessageBoxDiffer = _workbenchMessageBoxDiffer;
@@ -11739,7 +11947,8 @@ class WorkbenchUrlObserver {
         });
         return {
             layout,
-            layoutDiff: this._workbenchLayoutDiffer.diff(layout, urlTree),
+            layoutDiff: this._workbenchLayoutDiffer.diff(layout),
+            viewOutletDiff: this._workbenchViewOutletDiffer.diff(layout, urlTree),
             popupDiff: this._workbenchPopupDiffer.diff(urlTree),
             dialogDiff: this._workbenchDialogDiffer.diff(urlTree),
             messageBoxDiff: this._workbenchMessageBoxDiffer.diff(urlTree),
@@ -11751,27 +11960,27 @@ class WorkbenchUrlObserver {
     registerAddedOutletAuxiliaryRoutes() {
         const navigationContext = this._workbenchRouter.getCurrentNavigationContext();
         // Register view auxiliary routes.
-        const addedViews = navigationContext.layoutDiff.addedViews;
-        if (addedViews.length) {
-            const auxiliaryRoutes = this._auxiliaryRoutesRegistrator.registerAuxiliaryRoutes(addedViews, { canMatchNotFoundPage: [canMatchNotFoundPage] });
-            this._logger.debug(() => `Registered auxiliary routes for views: ${addedViews}`, LoggerNames.ROUTING, auxiliaryRoutes);
+        const addedViewOutlets = navigationContext.viewOutletDiff.addedViewOutlets;
+        if (addedViewOutlets.length) {
+            const auxiliaryRoutes = this._auxiliaryRouteInstaller.registerAuxiliaryRoutes(addedViewOutlets, { canMatchNotFoundPage: [canMatchNotFoundPage] });
+            this._logger.debug(() => `Registered auxiliary routes for views: ${addedViewOutlets}`, LoggerNames.ROUTING, auxiliaryRoutes);
         }
         // Register popup auxiliary routes.
         const addedPopupOutlets = navigationContext.popupDiff.addedPopupOutlets;
         if (addedPopupOutlets.length) {
-            const auxiliaryRoutes = this._auxiliaryRoutesRegistrator.registerAuxiliaryRoutes(addedPopupOutlets);
+            const auxiliaryRoutes = this._auxiliaryRouteInstaller.registerAuxiliaryRoutes(addedPopupOutlets);
             this._logger.debug(() => `Registered auxiliary routes for popups: ${addedPopupOutlets}`, LoggerNames.ROUTING, auxiliaryRoutes);
         }
         // Register dialog auxiliary routes.
         const addedDialogOutlets = navigationContext.dialogDiff.addedDialogOutlets;
         if (addedDialogOutlets.length) {
-            const auxiliaryRoutes = this._auxiliaryRoutesRegistrator.registerAuxiliaryRoutes(addedDialogOutlets);
+            const auxiliaryRoutes = this._auxiliaryRouteInstaller.registerAuxiliaryRoutes(addedDialogOutlets);
             this._logger.debug(() => `Registered auxiliary routes for dialogs: ${addedDialogOutlets}`, LoggerNames.ROUTING, auxiliaryRoutes);
         }
         // Register message box auxiliary routes.
         const addedMessageBoxOutlets = navigationContext.messageBoxDiff.addedMessageBoxOutlets;
         if (addedMessageBoxOutlets.length) {
-            const auxiliaryRoutes = this._auxiliaryRoutesRegistrator.registerAuxiliaryRoutes(addedMessageBoxOutlets);
+            const auxiliaryRoutes = this._auxiliaryRouteInstaller.registerAuxiliaryRoutes(addedMessageBoxOutlets);
             this._logger.debug(() => `Registered auxiliary routes for message boxes: ${addedMessageBoxOutlets}`, LoggerNames.ROUTING, auxiliaryRoutes);
         }
     }
@@ -11783,7 +11992,8 @@ class WorkbenchUrlObserver {
     undoWorkbenchDiffers() {
         const prevNavigateLayout = this._workbenchLayoutService.layout; // Layout in `WorkbenchLayoutService` is only updated after successful navigation
         const prevNavigateUrl = this._router.parseUrl(this._router.url); // Browser URL is only updated after successful navigation
-        this._workbenchLayoutDiffer.diff(prevNavigateLayout, prevNavigateUrl);
+        this._workbenchLayoutDiffer.diff(prevNavigateLayout);
+        this._workbenchViewOutletDiffer.diff(prevNavigateLayout, prevNavigateUrl);
         this._workbenchPopupDiffer.diff(prevNavigateUrl);
         this._workbenchDialogDiffer.diff(prevNavigateUrl);
         this._workbenchMessageBoxDiffer.diff(prevNavigateUrl);
@@ -11796,13 +12006,13 @@ class WorkbenchUrlObserver {
     undoAuxiliaryRoutesRegistration() {
         const navigationContext = this._workbenchRouter.getCurrentNavigationContext();
         const addedOutlets = [
-            ...navigationContext.layoutDiff.addedViews,
+            ...navigationContext.viewOutletDiff.addedViewOutlets,
             ...navigationContext.popupDiff.addedPopupOutlets,
             ...navigationContext.dialogDiff.addedDialogOutlets,
             ...navigationContext.messageBoxDiff.addedMessageBoxOutlets,
         ];
         if (addedOutlets.length) {
-            this._auxiliaryRoutesRegistrator.unregisterAuxiliaryRoutes(addedOutlets);
+            this._auxiliaryRouteInstaller.unregisterAuxiliaryRoutes(addedOutlets);
             this._logger.debug(() => `Undo auxiliary routes registration for outlet(s): ${addedOutlets}`, LoggerNames.ROUTING);
         }
     }
@@ -11845,14 +12055,14 @@ class WorkbenchUrlObserver {
     unregisterRemovedOutletAuxiliaryRoutes() {
         const navigationContext = this._workbenchRouter.getCurrentNavigationContext();
         const removedOutlets = [
-            ...navigationContext.layoutDiff.removedViews,
+            ...navigationContext.viewOutletDiff.removedViewOutlets,
             ...navigationContext.popupDiff.removedPopupOutlets,
             ...navigationContext.dialogDiff.removedDialogOutlets,
             ...navigationContext.messageBoxDiff.removedMessageBoxOutlets,
         ];
         if (removedOutlets.length) {
             this._logger.debug(() => 'Unregistering outlet auxiliary routes: ', LoggerNames.ROUTING, removedOutlets);
-            this._auxiliaryRoutesRegistrator.unregisterAuxiliaryRoutes(removedOutlets);
+            this._auxiliaryRouteInstaller.unregisterAuxiliaryRoutes(removedOutlets);
         }
     }
     /**
@@ -11860,10 +12070,10 @@ class WorkbenchUrlObserver {
      * - For each removed view, destroys the {@link WorkbenchView} and unregisters it in {@link WorkbenchViewRegistry}
      */
     updateViewRegistry() {
-        const { layoutDiff } = this._workbenchRouter.getCurrentNavigationContext();
+        const { layoutDiff, layout } = this._workbenchRouter.getCurrentNavigationContext();
         layoutDiff.addedViews.forEach(viewId => {
             this._logger.debug(() => `Constructing ɵWorkbenchView [viewId=${viewId}]`, LoggerNames.LIFECYCLE);
-            this._viewRegistry.register(this.createWorkbenchView(viewId));
+            this._viewRegistry.register(this.createWorkbenchView(viewId, layout));
         });
         layoutDiff.removedViews.forEach(viewId => {
             this._logger.debug(() => `Destroying ɵWorkbenchView [viewId=${viewId}]`, LoggerNames.LIFECYCLE);
@@ -11890,8 +12100,8 @@ class WorkbenchUrlObserver {
             component: partId === MAIN_AREA ? MainAreaLayoutComponent : PartComponent,
         }));
     }
-    createWorkbenchView(viewId) {
-        return runInInjectionContext(this._environmentInjector, () => new ɵWorkbenchView(viewId, { component: ViewComponent }));
+    createWorkbenchView(viewId, layout) {
+        return runInInjectionContext(this._environmentInjector, () => new ɵWorkbenchView(viewId, { component: ViewComponent, layout }));
     }
     installRouterEventListeners() {
         this._router.events
@@ -11914,13 +12124,13 @@ class WorkbenchUrlObserver {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchUrlObserver, deps: [{ token: i2.Router }, { token: WorkbenchAuxiliaryRoutesRegistrator }, { token: WorkbenchViewRegistry }, { token: WorkbenchPartRegistry }, { token: WorkbenchLayoutService }, { token: i0.EnvironmentInjector }, { token: ɵWorkbenchRouter }, { token: ɵWorkbenchLayoutFactory }, { token: WorkbenchLayoutDiffer }, { token: WorkbenchPopupDiffer }, { token: WorkbenchDialogDiffer }, { token: WorkbenchMessageBoxDiffer }, { token: Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchUrlObserver, deps: [{ token: i2.Router }, { token: WorkbenchAuxiliaryRouteInstaller }, { token: WorkbenchViewRegistry }, { token: WorkbenchPartRegistry }, { token: WorkbenchLayoutService }, { token: i0.EnvironmentInjector }, { token: ɵWorkbenchRouter }, { token: ɵWorkbenchLayoutFactory }, { token: WorkbenchLayoutDiffer }, { token: WorkbenchViewOutletDiffer }, { token: WorkbenchPopupDiffer }, { token: WorkbenchDialogDiffer }, { token: WorkbenchMessageBoxDiffer }, { token: Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchUrlObserver, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchUrlObserver, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i2.Router }, { type: WorkbenchAuxiliaryRoutesRegistrator }, { type: WorkbenchViewRegistry }, { type: WorkbenchPartRegistry }, { type: WorkbenchLayoutService }, { type: i0.EnvironmentInjector }, { type: ɵWorkbenchRouter }, { type: ɵWorkbenchLayoutFactory }, { type: WorkbenchLayoutDiffer }, { type: WorkbenchPopupDiffer }, { type: WorkbenchDialogDiffer }, { type: WorkbenchMessageBoxDiffer }, { type: Logger }] });
+        }], ctorParameters: () => [{ type: i2.Router }, { type: WorkbenchAuxiliaryRouteInstaller }, { type: WorkbenchViewRegistry }, { type: WorkbenchPartRegistry }, { type: WorkbenchLayoutService }, { type: i0.EnvironmentInjector }, { type: ɵWorkbenchRouter }, { type: ɵWorkbenchLayoutFactory }, { type: WorkbenchLayoutDiffer }, { type: WorkbenchViewOutletDiffer }, { type: WorkbenchPopupDiffer }, { type: WorkbenchDialogDiffer }, { type: WorkbenchMessageBoxDiffer }, { type: Logger }] });
 
 /**
  * Updates the workbench layout when the user moves a view.
@@ -11971,7 +12181,7 @@ class ViewMoveHandler {
         await this._workbenchRouter.navigate(layout => {
             const newViewId = event.source.alternativeViewId ?? layout.computeNextViewId();
             if (addToNewPart) {
-                const newPartId = event.target.newPart?.id ?? randomUUID();
+                const newPartId = event.target.newPart?.id ?? UID.randomUID();
                 return layout
                     .addPart(newPartId, { relativeTo: event.target.elementId, align: coerceAlignProperty(region), ratio: event.target.newPart?.ratio }, { structural: false })
                     .addView(newViewId, { partId: newPartId, activateView: true, activatePart: true, cssClass: event.source.classList?.get('layout') })
@@ -12004,7 +12214,7 @@ class ViewMoveHandler {
             })
                 .navigateView(newViewId, commands, { hint: event.source.navigationHint, cssClass: event.source.classList?.get('navigation') });
         });
-        const target = generatePerspectiveWindowName(`${ANONYMOUS_PERSPECTIVE_ID_PREFIX}${randomUUID()}`);
+        const target = generatePerspectiveWindowName(`${ANONYMOUS_PERSPECTIVE_ID_PREFIX}${UID.randomUID()}`);
         if (window.open(this._locationStrategy.prepareExternalUrl(this._router.serializeUrl(urlTree)), target)) {
             await this.removeView(event);
         }
@@ -12015,7 +12225,7 @@ class ViewMoveHandler {
     async moveView(event) {
         const addToNewPart = !!event.target.region;
         if (addToNewPart) {
-            const newPartId = event.target.newPart?.id ?? randomUUID();
+            const newPartId = event.target.newPart?.id ?? UID.randomUID();
             await this._workbenchRouter.navigate(layout => layout
                 .addPart(newPartId, { relativeTo: event.target.elementId, align: coerceAlignProperty(event.target.region), ratio: event.target.newPart?.ratio }, { structural: false })
                 .moveView(event.source.viewId, newPartId, { activatePart: true, activateView: true }));
@@ -12029,7 +12239,7 @@ class ViewMoveHandler {
             }));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ViewMoveHandler, deps: [{ token: WORKBENCH_ID }, { token: ɵWorkbenchRouter }, { token: ɵWorkbenchLayoutFactory }, { token: ViewDragService }, { token: i2.Router }, { token: i3$1.LocationStrategy }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ViewMoveHandler, deps: [{ token: WORKBENCH_ID }, { token: ɵWorkbenchRouter }, { token: ɵWorkbenchLayoutFactory }, { token: ViewDragService }, { token: i2.Router }, { token: i5.LocationStrategy }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ViewMoveHandler }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ViewMoveHandler, decorators: [{
@@ -12037,7 +12247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [WORKBENCH_ID]
-                }] }, { type: ɵWorkbenchRouter }, { type: ɵWorkbenchLayoutFactory }, { type: ViewDragService }, { type: i2.Router }, { type: i3$1.LocationStrategy }] });
+                }] }, { type: ɵWorkbenchRouter }, { type: ɵWorkbenchLayoutFactory }, { type: ViewDragService }, { type: i2.Router }, { type: i5.LocationStrategy }] });
 function coerceAlignProperty(region) {
     switch (region) {
         case 'west':
@@ -12110,7 +12320,7 @@ const TEXT_MESSAGE_BOX_CAPABILITY_IDENTITY_PROPERTY = 'ɵidentity';
 /**
  * Value to identify the built-in text message box capability.
  */
-const TEXT_MESSAGE_BOX_CAPABILITY_IDENTITY = randomUUID();
+const TEXT_MESSAGE_BOX_CAPABILITY_IDENTITY = UUID.randomUUID();
 
 var textMessage_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -12129,6 +12339,7 @@ class WorkbenchHostManifestInterceptor {
     intercept(hostManifest) {
         hostManifest.intentions = [
             ...hostManifest.intentions || [],
+            providePerspectiveIntention(),
             provideViewIntention(),
         ];
         hostManifest.capabilities = [
@@ -12143,6 +12354,15 @@ class WorkbenchHostManifestInterceptor {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: WorkbenchHostManifestInterceptor, decorators: [{
             type: Injectable
         }] });
+/**
+ * Provides a wildcard perspective intention for the workbench to register perspective capabilities as workbench perspectives.
+ */
+function providePerspectiveIntention() {
+    return {
+        type: WorkbenchCapabilities.Perspective,
+        qualifier: { '*': '*' },
+    };
+}
 /**
  * Provides a wildcard view intention for the workbench to read view capabilities during microfrontend view routing.
  */
@@ -12222,6 +12442,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Handles perspective intents, instructing the workbench to switch perspective.
+ */
+class MicrofrontendPerspectiveIntentHandler {
+    constructor(_workbenchService, _logger) {
+        this._workbenchService = _workbenchService;
+        this._logger = _logger;
+    }
+    /**
+     * Perspective intents are handled in this interceptor and then swallowed.
+     */
+    intercept(intentMessage, next) {
+        if (intentMessage.intent.type === WorkbenchCapabilities.Perspective) {
+            return this.consumePerspectiveIntent(intentMessage);
+        }
+        else {
+            return next.handle(intentMessage);
+        }
+    }
+    async consumePerspectiveIntent(message) {
+        const replyTo = message.headers.get(MessageHeaders.ReplyTo);
+        const success = await this.switchPerspective(message);
+        if (replyTo) {
+            await Beans.get(MessageClient).publish(replyTo, success, { headers: new Map().set(MessageHeaders.Status, ResponseStatusCodes.TERMINAL) });
+        }
+    }
+    switchPerspective(message) {
+        const perspectiveId = message.capability.metadata.id;
+        this._logger.debug(() => `Switching to perspective ${perspectiveId}.`, LoggerNames.MICROFRONTEND);
+        return this._workbenchService.switchPerspective(perspectiveId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPerspectiveIntentHandler, deps: [{ token: WorkbenchService }, { token: Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPerspectiveIntentHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPerspectiveIntentHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: WorkbenchService }, { type: Logger }] });
+
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Provides cached access to manifest objects.
+ */
+class ManifestObjectCache {
+    constructor(_manifestService) {
+        this._manifestService = _manifestService;
+        this._capabilities$ = new BehaviorSubject(new Map());
+        this.installCapabilityLookup();
+    }
+    async init() {
+        await firstValueFrom(this._capabilities$);
+    }
+    /**
+     * Tests if given capability exists.
+     */
+    hasCapability(capabilityId) {
+        return this._capabilities$.value.has(capabilityId);
+    }
+    getCapability(capabilityId, options) {
+        const capability = this._capabilities$.value.get(capabilityId);
+        if (!capability && !options) {
+            throw Error(`[NullCapabilityError] No capability found with id '${capabilityId}'.`);
+        }
+        return capability ?? null;
+    }
+    /**
+     * Looks up specified capability.
+     *
+     * Upon subscription, emits the requested capability, and then emits continuously when it changes. It never completes.
+     */
+    observeCapability$(capabilityId) {
+        return this._capabilities$
+            .pipe(startWith(undefined), map(() => this.getCapability(capabilityId, { orElse: null })), distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)));
+    }
+    installCapabilityLookup() {
+        this._manifestService.lookupCapabilities$()
+            .pipe(takeUntilDestroyed())
+            .subscribe(capabilities => {
+            this._capabilities$.next(capabilities.reduce((acc, capability) => acc.set(capability.metadata.id, capability), new Map()));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ManifestObjectCache, deps: [{ token: i2$3.ManifestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ManifestObjectCache }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ManifestObjectCache, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i2$3.ManifestService }] });
+
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
  *
@@ -12260,7 +12584,8 @@ const MicrofrontendViewRoutes = {
         const injector = inject(Injector);
         return (segments, group, route) => {
             // Test if the path matches.
-            if (!MicrofrontendViewRoutes.isMicrofrontendRoute(segments)) {
+            const microfrontendRoute = MicrofrontendViewRoutes.parseMicrofrontendRoute(segments);
+            if (!microfrontendRoute) {
                 return null;
             }
             // Test if navigating a view.
@@ -12299,8 +12624,14 @@ const MicrofrontendViewRoutes = {
     /**
      * Tests given URL to be a microfrontend route.
      */
-    isMicrofrontendRoute: (segments) => {
-        return segments.length === 2 && segments[0].path === MicrofrontendViewRoutes.ROUTE_PREFIX;
+    parseMicrofrontendRoute: (segments) => {
+        if (segments.length === 2 && segments[0].path === MicrofrontendViewRoutes.ROUTE_PREFIX) {
+            return {
+                capabilityId: segments[1].path,
+                params: segments[1].parameters,
+            };
+        }
+        return null;
     },
     /**
      * Splits given params into URL and transient params.
@@ -12317,6 +12648,19 @@ const MicrofrontendViewRoutes = {
             return groups;
         }, { urlParams: {}, transientParams: {} });
     },
+    /**
+     * Matches the route if target of a view capability (microfrontend) and the capability exists.
+     */
+    canMatchViewCapability: ((_route, segments) => {
+        const microfrontendRoute = MicrofrontendViewRoutes.parseMicrofrontendRoute(segments);
+        if (!microfrontendRoute) {
+            return false;
+        }
+        if (MicrofrontendPlatform.state !== PlatformState.Started) {
+            return true; // match until started the microfrontend platform to avoid flickering.
+        }
+        return inject(ManifestObjectCache).hasCapability(microfrontendRoute.capabilityId);
+    }),
 };
 
 /*
@@ -12388,10 +12732,12 @@ class MicrofrontendViewIntentHandler {
         const { urlParams, transientParams } = MicrofrontendViewRoutes.splitParams(intentParams, viewCapability);
         const targets = this.resolveTargets(message, extras);
         const commands = extras.close ? [] : MicrofrontendViewRoutes.createMicrofrontendNavigateCommands(viewCapability.metadata.id, urlParams);
+        const partId = extras.close ? undefined : extras.partId;
         this._logger.debug(() => `Navigating to: ${viewCapability.properties.path}`, LoggerNames.MICROFRONTEND_ROUTING, commands, viewCapability, transientParams);
         const navigations = await Promise.all(Arrays.coerce(targets).map(target => {
             return this._workbenchRouter.navigate(commands, {
                 target,
+                partId,
                 activate: extras.activate,
                 close: extras.close,
                 position: extras.position ?? extras.blankInsertionIndex,
@@ -12412,10 +12758,10 @@ class MicrofrontendViewIntentHandler {
             throw Error(`[NavigateError] The target must be empty if closing a view [target=${(extras.target)}]`);
         }
         if (extras.close) {
-            return this.resolvePresentViewIds(intentMessage, { matchWildcardParams: true }) ?? [];
+            return this.resolvePresentViewIds(intentMessage, extras, { matchWildcardParams: true }) ?? [];
         }
         if (!extras.target || extras.target === 'auto') {
-            return this.resolvePresentViewIds(intentMessage) ?? 'blank';
+            return this.resolvePresentViewIds(intentMessage, extras) ?? 'blank';
         }
         return extras.target;
     }
@@ -12425,10 +12771,11 @@ class MicrofrontendViewIntentHandler {
      *
      * Allows matching wildcard parameters by setting the option `matchWildcardParameters` to `true`.
      */
-    resolvePresentViewIds(intentMessage, options) {
+    resolvePresentViewIds(intentMessage, extras, options) {
         const requiredParams = intentMessage.capability.params?.filter(param => param.required).map(param => param.name) ?? [];
         const matchWildcardParams = options?.matchWildcardParams ?? false;
         const viewIds = this._viewRegistry.views
+            .filter(view => !extras.partId || extras.partId === view.part.id)
             .filter(view => {
             const microfrontendWorkbenchView = view.adapt(MicrofrontendWorkbenchView);
             if (!microfrontendWorkbenchView) {
@@ -12505,6 +12852,22 @@ const Microfrontends = {
             }
         });
     },
+    /**
+     * Creates a stable identifier for given capability.
+     */
+    createStableIdentifier: async (capability) => {
+        const qualifier = capability.qualifier;
+        const application = capability.metadata.appSymbolicName;
+        // Create identifier consisting of vendor and sorted qualifier entries.
+        const identifier = Object.entries(qualifier)
+            .sort(([key1], [key2]) => key1.localeCompare(key2))
+            .reduce((acc, [key, value]) => acc.concat(key).concat(`${value}`), [application])
+            .join(';');
+        // Hash the identifier.
+        const identifierHash = await Crypto.digest(identifier);
+        // Use the first 7 digits of the hash.
+        return identifierHash.substring(0, 7);
+    },
     /**
      * Replaces named parameters in the given value with values contained in the given {@link Map}.
      * Named parameters begin with a colon (`:`).
@@ -12559,12 +12922,6 @@ class MicrofrontendPopupComponent {
         this.splash = inject(MicrofrontendPlatformConfig).splash ?? MicrofrontendSplashComponent;
     }
     ngOnInit() {
-        // Obtain the capability provider.
-        const application = this.lookupApplication(this.popupCapability.metadata.appSymbolicName);
-        if (!application) {
-            this.popup.closeWithError(`[NullApplicationError] Unexpected. Cannot resolve application '${this.popupCapability.metadata.appSymbolicName}'.`);
-            return;
-        }
         // Listen to popup close requests.
         this._messageClient.observe$(_WorkbenchCommands.popupCloseTopic(this.popup.id))
             .pipe(takeUntilDestroyed(this._destroyRef))
@@ -12581,6 +12938,7 @@ class MicrofrontendPopupComponent {
         // Propagate workbench and color theme to the microfrontend.
         this.propagateWorkbenchTheme();
         // Navigate to the microfrontend.
+        const application = this._manifestService.getApplication(this.popupCapability.metadata.appSymbolicName);
         this._logger.debug(() => `Loading microfrontend into workbench popup [app=${this.popupCapability.metadata.appSymbolicName}, baseUrl=${application.baseUrl}, path=${(this.popupCapability.properties.path)}].`, LoggerNames.MICROFRONTEND, this._popupContext.params, this.popupCapability);
         this._outletRouter.navigate(this.popupCapability.properties.path, {
             outlet: this.popup.id,
@@ -12600,12 +12958,6 @@ class MicrofrontendPopupComponent {
             this._host.nativeElement.dispatchEvent(new CustomEvent('sci-microfrontend-focusin', { bubbles: true }));
         }
     }
-    /**
-     * Looks up the application registered under the given symbolic name. Returns `undefined` if not found.
-     */
-    lookupApplication(symbolicName) {
-        return this._manifestService.applications.find(app => app.symbolicName === symbolicName);
-    }
     /**
      * Sets the {@link isWorkbenchDrag} property when a workbench drag operation is detected,
      * such as when dragging a view or moving a sash.
@@ -12678,7 +13030,7 @@ class MicrofrontendHostPopupComponent {
         this._singleNavigationExecutor = inject(SINGLE_NAVIGATION_EXECUTOR);
         const popupContext = popup.input;
         const capability = popupContext.capability;
-        const path = Defined.orElseThrow(capability.properties.path, () => Error(`[PopupProviderError] Missing required path for popup capability: ${JSON.stringify(capability)}`));
+        const path = Defined.orElseThrow(capability.properties.path, () => Error(`[PopupProviderError] Missing required path for popup capability [application="${capability.metadata.appSymbolicName}", capability=${Objects.toMatrixNotation(capability.qualifier)}]`));
         const params = popupContext.params;
         this.outletName = POPUP_ID_PREFIX.concat(popup.id);
         this.outletInjector = Injector.create({
@@ -12901,7 +13253,7 @@ class MicrofrontendDialogComponent {
         this.navigate();
     }
     navigate() {
-        const application = this._manifestService.applications.find(app => app.symbolicName === this.capability.metadata.appSymbolicName);
+        const application = this._manifestService.getApplication(this.capability.metadata.appSymbolicName);
         this._logger.debug(() => `Loading microfrontend into workbench dialog [app=${this.capability.metadata.appSymbolicName}, baseUrl=${application.baseUrl}, path=${this.capability.properties.path}].`, LoggerNames.MICROFRONTEND, this.params, this.capability);
         this._outletRouter.navigate(this.capability.properties.path, {
             outlet: this.dialog.id,
@@ -13307,7 +13659,7 @@ class MicrofrontendMessageBoxComponent {
         this.navigate();
     }
     navigate() {
-        const application = this._manifestService.applications.find(app => app.symbolicName === this.capability.metadata.appSymbolicName);
+        const application = this._manifestService.getApplication(this.capability.metadata.appSymbolicName);
         this._logger.debug(() => `Loading microfrontend into workbench message box [app=${this.capability.metadata.appSymbolicName}, baseUrl=${application.baseUrl}, path=${this.capability.properties.path}].`, LoggerNames.MICROFRONTEND, this.params, this.capability);
         this._outletRouter.navigate(this.capability.properties.path, {
             outlet: this.outletName,
@@ -13483,7 +13835,7 @@ function hasLegacyContent(intentMessage) {
 }
 
 /**
- * Asserts view capabilities to have required properties and assigns each view capability a stable identifer required for persistent navigation.
+ * Asserts view capabilities to have required properties.
  */
 class MicrofrontendViewCapabilityValidator {
     async intercept(capability) {
@@ -13492,13 +13844,13 @@ class MicrofrontendViewCapabilityValidator {
         }
         const viewCapability = capability;
         // Assert the view capability to have a qualifier set.
-        if (!viewCapability.qualifier || !Object.keys(viewCapability.qualifier).length) {
+        if (!Object.keys(viewCapability.qualifier ?? {}).length) {
             throw Error(`[NullQualifierError] View capability requires a qualifier [capability=${JSON.stringify(viewCapability)}]`);
         }
         // Assert the view capability to have a path set.
         const path = viewCapability.properties?.path;
         if (path === undefined || path === null) {
-            throw Error(`[NullPathError] View capability requires a path to the microfrontend in its properties [capability=${JSON.stringify(viewCapability)}]`);
+            throw Error(`[NullPathError] View capability requires a path to the microfrontend in its properties [application="${viewCapability.metadata.appSymbolicName}", capability="${Objects.toMatrixNotation(viewCapability.qualifier)}"]`);
         }
         return capability;
     }
@@ -13510,41 +13862,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }] });
 
 /**
- * Assigns each view capability a stable identifer required for persistent navigation.
+ * Asserts perspective capabilities to have required properties.
  */
-class MicrofrontendViewCapabilityIdAssigner {
+class MicrofrontendPerspectiveCapabilityValidator {
     async intercept(capability) {
-        if (capability.type !== WorkbenchCapabilities.View) {
+        if (capability.type !== WorkbenchCapabilities.Perspective) {
             return capability;
         }
-        const stableIdentifier = await createStableViewIdentifier(capability);
-        return {
-            ...capability,
-            metadata: { ...capability.metadata, id: stableIdentifier },
-        };
+        const perspectiveCapability = capability;
+        // Assert the perspective capability to have a qualifier set.
+        if (!Object.keys(perspectiveCapability.qualifier ?? {}).length) {
+            throw Error(`[NullQualifierError] Perspective capability requires a qualifier [capability=${JSON.stringify(perspectiveCapability)}]`);
+        }
+        // Assert the perspective capability to have a layout set.
+        if (!perspectiveCapability.properties?.layout) {
+            throw Error(`[NullLayoutError] Perspective capability requires a layout [application="${perspectiveCapability.metadata.appSymbolicName}", capability="${Objects.toMatrixNotation(perspectiveCapability.qualifier)}"]`);
+        }
+        // Assert the perspective capability to define parts.
+        if (!perspectiveCapability.properties.layout.length) {
+            throw Error(`[NullLayoutError] Perspective capability requires parts [application="${perspectiveCapability.metadata.appSymbolicName}", capability="${Objects.toMatrixNotation(perspectiveCapability.qualifier)}"]`);
+        }
+        // Assert no views to be added to the main area.
+        if (perspectiveCapability.properties.layout.find(part => part.id === MAIN_AREA)?.views?.length) {
+            throw Error(`[PerspectiveLayoutError] Perspective capability cannot add views to the main area [application="${perspectiveCapability.metadata.appSymbolicName}", capability="${Objects.toMatrixNotation(perspectiveCapability.qualifier)}"]`);
+        }
+        return capability;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendViewCapabilityIdAssigner, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendViewCapabilityIdAssigner }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPerspectiveCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPerspectiveCapabilityValidator }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendViewCapabilityIdAssigner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPerspectiveCapabilityValidator, decorators: [{
             type: Injectable
         }] });
-/**
- * Creates a stable identifier for given view capability.
- */
-async function createStableViewIdentifier(capability) {
-    const qualifier = capability.qualifier;
-    const vendor = capability.metadata.appSymbolicName;
-    // Create identifier consisting of vendor and sorted qualifier entries.
-    const identifier = Object.keys(qualifier)
-        .sort()
-        .reduce((acc, qualifierKey) => acc.concat(qualifierKey).concat(`${qualifier[qualifierKey]}`), [vendor])
-        .join(';');
-    // Hash the identifier.
-    const identifierHash = await Crypto.digest(identifier);
-    // Use the first 7 digits of the hash.
-    return identifierHash.substring(0, 7);
-}
 
 /**
  * Asserts popup capabilities to have required properties.
@@ -13556,13 +13905,13 @@ class MicrofrontendPopupCapabilityValidator {
         }
         const popupCapability = capability;
         // Assert the popup capability to have a qualifier set.
-        if (!popupCapability.qualifier || !Object.keys(popupCapability.qualifier).length) {
+        if (!Object.keys(popupCapability.qualifier ?? {}).length) {
             throw Error(`[NullQualifierError] Popup capability requires a qualifier [capability=${JSON.stringify(popupCapability)}]`);
         }
         // Assert the popup capability to have a path set.
         const path = popupCapability.properties?.path;
         if (path === undefined || path === null) {
-            throw Error(`[NullPathError] Popup capability requires a path to the microfrontend in its properties [capability=${JSON.stringify(popupCapability)}]`);
+            throw Error(`[NullPathError] Popup capability requires a path to the microfrontend in its properties [application="${popupCapability.metadata.appSymbolicName}", capability="${Objects.toMatrixNotation(popupCapability.qualifier)}"]`);
         }
         return popupCapability;
     }
@@ -13592,13 +13941,13 @@ class MicrofrontendDialogCapabilityValidator {
         }
         const dialogCapability = capability;
         // Assert the dialog capability to have a qualifier.
-        if (!dialogCapability.qualifier || !Object.keys(dialogCapability.qualifier).length) {
+        if (!Object.keys(dialogCapability.qualifier ?? {}).length) {
             throw Error(`[NullQualifierError] Dialog capability requires a qualifier [capability=${JSON.stringify(dialogCapability)}]`);
         }
         // Assert the dialog capability to have a path.
         const path = dialogCapability.properties?.path;
         if (path === undefined || path === null) {
-            throw Error(`[NullPathError] Dialog capability requires a path to the microfrontend in its properties [capability=${JSON.stringify(dialogCapability)}]`);
+            throw Error(`[NullPathError] Dialog capability requires a path to the microfrontend in its properties [application="${dialogCapability.metadata.appSymbolicName}", capability="${Objects.toMatrixNotation(dialogCapability.qualifier)}"]`);
         }
         // Assert the dialog capability to have a height and width, unless provided by the host application.
         this.assertSize(dialogCapability);
@@ -13611,7 +13960,7 @@ class MicrofrontendDialogCapabilityValidator {
         }
         const size = capability.properties?.size;
         if (!size?.width || !size?.height) {
-            throw Error(`[NullSizeError] Dialog capability requires width and height in its size properties [capability=${JSON.stringify(capability)}]`);
+            throw Error(`[NullSizeError] Dialog capability requires width and height in its size properties [application="${capability.metadata.appSymbolicName}", capability="${Objects.toMatrixNotation(capability.qualifier)}"]`);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendDialogCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -13633,7 +13982,7 @@ class MicrofrontendMessageBoxCapabilityValidator {
         // Assert capability to have a path.
         const path = messageBoxCapability.properties?.path;
         if (path === undefined || path === null) {
-            throw Error(`[NullPathError] MessageBox capability requires a path to the microfrontend in its properties [capability=${JSON.stringify(messageBoxCapability)}]`);
+            throw Error(`[NullPathError] MessageBox capability requires a path to the microfrontend in its properties [application="${messageBoxCapability.metadata.appSymbolicName}", capability="${Objects.toMatrixNotation(messageBoxCapability.qualifier)}"]`);
         }
         // Assert capability other than the built-in text messsage box capability to have a qualifier.
         if (!isBuiltInTextMessageBoxCapability(messageBoxCapability) && !Object.keys(messageBoxCapability.qualifier ?? {}).length) {
@@ -13651,6 +14000,34 @@ function isBuiltInTextMessageBoxCapability(capability) {
     return capability.properties[TEXT_MESSAGE_BOX_CAPABILITY_IDENTITY_PROPERTY] === TEXT_MESSAGE_BOX_CAPABILITY_IDENTITY;
 }
 
+/**
+ * Assigns perspective and view capabilities a stable identifer based on the qualifier and application.
+ */
+class StableCapabilityIdAssigner {
+    constructor() {
+        this._types = new Set()
+            .add(WorkbenchCapabilities.Perspective)
+            .add(WorkbenchCapabilities.View);
+    }
+    async intercept(capability) {
+        if (!this._types.has(capability.type)) {
+            return capability;
+        }
+        return {
+            ...capability,
+            metadata: {
+                ...capability.metadata,
+                id: await Microfrontends.createStableIdentifier(capability),
+            },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: StableCapabilityIdAssigner, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: StableCapabilityIdAssigner }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: StableCapabilityIdAssigner, decorators: [{
+            type: Injectable
+        }] });
+
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
  *
@@ -13664,20 +14041,22 @@ function isBuiltInTextMessageBoxCapability(capability) {
  * Initializes and starts the SCION Microfrontend Platform in host mode.
  */
 class MicrofrontendPlatformInitializer {
-    constructor(_microfrontendPlatformConfigLoader, _hostManifestInterceptor, _ngZoneObservableDecorator, _viewIntentHandler, _popupIntentHandler, _dialogIntentHandler, _messageBoxIntentHandler, _messageBoxLegacyIntentTranslator, _viewCapabilityValidator, _viewCapabilityIdAssigner, _popupCapabilityValidator, _dialogCapabilityValidator, _messageBoxCapabilityValidator, _injector, _zone, _logger) {
+    constructor(_microfrontendPlatformConfigLoader, _hostManifestInterceptor, _ngZoneObservableDecorator, _perspectiveIntentHandler, _viewIntentHandler, _popupIntentHandler, _dialogIntentHandler, _messageBoxIntentHandler, _messageBoxLegacyIntentTranslator, _viewCapabilityValidator, _perspectiveCapabilityValidator, _popupCapabilityValidator, _dialogCapabilityValidator, _messageBoxCapabilityValidator, _stableCapabilityIdAssigner, _injector, _zone, _logger) {
         this._microfrontendPlatformConfigLoader = _microfrontendPlatformConfigLoader;
         this._hostManifestInterceptor = _hostManifestInterceptor;
         this._ngZoneObservableDecorator = _ngZoneObservableDecorator;
+        this._perspectiveIntentHandler = _perspectiveIntentHandler;
         this._viewIntentHandler = _viewIntentHandler;
         this._popupIntentHandler = _popupIntentHandler;
         this._dialogIntentHandler = _dialogIntentHandler;
         this._messageBoxIntentHandler = _messageBoxIntentHandler;
         this._messageBoxLegacyIntentTranslator = _messageBoxLegacyIntentTranslator;
         this._viewCapabilityValidator = _viewCapabilityValidator;
-        this._viewCapabilityIdAssigner = _viewCapabilityIdAssigner;
+        this._perspectiveCapabilityValidator = _perspectiveCapabilityValidator;
         this._popupCapabilityValidator = _popupCapabilityValidator;
         this._dialogCapabilityValidator = _dialogCapabilityValidator;
         this._messageBoxCapabilityValidator = _messageBoxCapabilityValidator;
+        this._stableCapabilityIdAssigner = _stableCapabilityIdAssigner;
         this._injector = _injector;
         this._zone = _zone;
         this._logger = _logger;
@@ -13706,6 +14085,8 @@ class MicrofrontendPlatformInitializer {
         Beans.register(HostManifestInterceptor, { useValue: this._hostManifestInterceptor, multi: true });
         // Synchronize emissions of Observables exposed by the SCION Microfrontend Platform with the Angular zone.
         Beans.register(ObservableDecorator, { useValue: this._ngZoneObservableDecorator });
+        // Register perspective interceptor to switch perspective.
+        Beans.register(IntentInterceptor, { useValue: this._perspectiveIntentHandler, multi: true });
         // Register view intent interceptor to open the corresponding view.
         Beans.register(IntentInterceptor, { useValue: this._viewIntentHandler, multi: true });
         // Register popup intent interceptor to open the corresponding popup.
@@ -13716,16 +14097,18 @@ class MicrofrontendPlatformInitializer {
         Beans.register(IntentInterceptor, { useValue: this._messageBoxLegacyIntentTranslator, multi: true });
         // Register message box intent interceptor to open the corresponding message box.
         Beans.register(IntentInterceptor, { useValue: this._messageBoxIntentHandler, multi: true });
+        // Register perspective capability interceptor to assert required perspective capability properties.
+        Beans.register(CapabilityInterceptor, { useValue: this._perspectiveCapabilityValidator, multi: true });
         // Register view capability interceptor to assert required view capability properties.
         Beans.register(CapabilityInterceptor, { useValue: this._viewCapabilityValidator, multi: true });
-        // Register view capability interceptor to assign view capabilities a stable identifier required for persistent navigation.
-        Beans.register(CapabilityInterceptor, { useValue: this._viewCapabilityIdAssigner, multi: true });
         // Register popup capability interceptor to assert required popup capability properties.
         Beans.register(CapabilityInterceptor, { useValue: this._popupCapabilityValidator, multi: true });
         // Register dialog capability interceptor to assert required dialog capability properties.
         Beans.register(CapabilityInterceptor, { useValue: this._dialogCapabilityValidator, multi: true });
         // Register message box capability interceptor to assert required capability properties.
         Beans.register(CapabilityInterceptor, { useValue: this._messageBoxCapabilityValidator, multi: true });
+        // Register capability interceptor to assign perspective and view capabilities a stable identifier.
+        Beans.register(CapabilityInterceptor, { useValue: this._stableCapabilityIdAssigner, multi: true });
         // Inject services registered under {MICROFRONTEND_PLATFORM_POST_STARTUP} DI token;
         // must be done in runlevel 2, i.e., before activator microfrontends are installed.
         Beans.registerInitializer({
@@ -13741,13 +14124,12 @@ class MicrofrontendPlatformInitializer {
     ngOnDestroy() {
         MicrofrontendPlatform.destroy().then();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPlatformInitializer, deps: [{ token: MicrofrontendPlatformConfigLoader }, { token: WorkbenchHostManifestInterceptor }, { token: NgZoneObservableDecorator }, { token: MicrofrontendViewIntentHandler }, { token: MicrofrontendPopupIntentHandler }, { token: MicrofrontendDialogIntentHandler }, { token: MicrofrontendMessageBoxIntentHandler }, { token: MicrofrontendMessageBoxLegacyIntentTranslator }, { token: MicrofrontendViewCapabilityValidator }, { token: MicrofrontendViewCapabilityIdAssigner }, { token: MicrofrontendPopupCapabilityValidator }, { token: MicrofrontendDialogCapabilityValidator }, { token: MicrofrontendMessageBoxCapabilityValidator }, { token: i0.Injector }, { token: i0.NgZone }, { token: Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPlatformInitializer, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPlatformInitializer, deps: [{ token: MicrofrontendPlatformConfigLoader }, { token: WorkbenchHostManifestInterceptor }, { token: NgZoneObservableDecorator }, { token: MicrofrontendPerspectiveIntentHandler }, { token: MicrofrontendViewIntentHandler }, { token: MicrofrontendPopupIntentHandler }, { token: MicrofrontendDialogIntentHandler }, { token: MicrofrontendMessageBoxIntentHandler }, { token: MicrofrontendMessageBoxLegacyIntentTranslator }, { token: MicrofrontendViewCapabilityValidator }, { token: MicrofrontendPerspectiveCapabilityValidator }, { token: MicrofrontendPopupCapabilityValidator }, { token: MicrofrontendDialogCapabilityValidator }, { token: MicrofrontendMessageBoxCapabilityValidator }, { token: StableCapabilityIdAssigner }, { token: i0.Injector }, { token: i0.NgZone }, { token: Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPlatformInitializer }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPlatformInitializer, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: MicrofrontendPlatformConfigLoader }, { type: WorkbenchHostManifestInterceptor }, { type: NgZoneObservableDecorator }, { type: MicrofrontendViewIntentHandler }, { type: MicrofrontendPopupIntentHandler }, { type: MicrofrontendDialogIntentHandler }, { type: MicrofrontendMessageBoxIntentHandler }, { type: MicrofrontendMessageBoxLegacyIntentTranslator }, { type: MicrofrontendViewCapabilityValidator }, { type: MicrofrontendViewCapabilityIdAssigner }, { type: MicrofrontendPopupCapabilityValidator }, { type: MicrofrontendDialogCapabilityValidator }, { type: MicrofrontendMessageBoxCapabilityValidator }, { type: i0.Injector }, { type: i0.NgZone }, { type: Logger }] });
+            type: Injectable
+        }], ctorParameters: () => [{ type: MicrofrontendPlatformConfigLoader }, { type: WorkbenchHostManifestInterceptor }, { type: NgZoneObservableDecorator }, { type: MicrofrontendPerspectiveIntentHandler }, { type: MicrofrontendViewIntentHandler }, { type: MicrofrontendPopupIntentHandler }, { type: MicrofrontendDialogIntentHandler }, { type: MicrofrontendMessageBoxIntentHandler }, { type: MicrofrontendMessageBoxLegacyIntentTranslator }, { type: MicrofrontendViewCapabilityValidator }, { type: MicrofrontendPerspectiveCapabilityValidator }, { type: MicrofrontendPopupCapabilityValidator }, { type: MicrofrontendDialogCapabilityValidator }, { type: MicrofrontendMessageBoxCapabilityValidator }, { type: StableCapabilityIdAssigner }, { type: i0.Injector }, { type: i0.NgZone }, { type: Logger }] });
 
 /*
  * Copyright (c) 2018-2022 Swiss Federal Railways
@@ -13769,24 +14151,12 @@ class MicrofrontendViewCommandHandler {
         this._viewRegistry = _viewRegistry;
         this._logger = _logger;
         this._subscriptions = new Set();
-        this.installViewActiveStatePublisher();
         this._subscriptions.add(this.installViewTitleCommandHandler());
         this._subscriptions.add(this.installViewHeadingCommandHandler());
         this._subscriptions.add(this.installViewDirtyCommandHandler());
         this._subscriptions.add(this.installViewClosableCommandHandler());
         this._subscriptions.add(this.installViewCloseCommandHandler());
     }
-    /**
-     * Notifies microfrontends about the active state of the embedding view.
-     */
-    installViewActiveStatePublisher() {
-        this._viewRegistry.views$
-            .pipe(switchMap(views => merge(...views.map(view => view.active$.pipe(map(() => view))))), takeUntilDestroyed())
-            .subscribe((view) => {
-            const commandTopic = _WorkbenchCommands.viewActiveTopic(view.id);
-            this._messageClient.publish(commandTopic, view.active, { retain: true }).then();
-        });
-    }
     /**
      * Handles commands to update the title of a view.
      */
@@ -13934,17 +14304,12 @@ class ContentProjectionDirective {
         this._contentViewRef.onDestroy(() => dispose$.next());
         // Position projected content out of the document flow relative to the page viewport.
         this.styleContent({ position: 'fixed' });
-        // Align content each time the bounding box element changes its size.
-        fromDimension$(this._host.nativeElement)
-            .pipe(takeUntil(dispose$))
-            .subscribe(dimension => {
-            if (isNullDimension(dimension)) {
-                // When removing the bounding box element (this directive's host) from the DOM, its dimension drops to 0.
-                // We ignore this event to preserve the dimension of projected content, crucial, for example, if projected
-                // content implements virtual scrolling. Otherwise, its content would reload when adding the host to the DOM again.
-                // For example, inactive views are removed from the DOM.
-                return;
-            }
+        // Align content each time the size of the host element changes, or when the content is attached to the DOM.
+        // For example, moving a view to another part of the same size will not trigger a dimension change event.
+        merge(fromDimension$(this._host.nativeElement), this._view?.portal.attached$.pipe(filter(Boolean)) ?? EMPTY)
+            .pipe(observeOn(animationFrameScheduler), // Align to host boundaries right before the next repaint.
+        takeUntil(dispose$))
+            .subscribe(() => {
             this.alignContentToHostBoundaries();
         });
         // Hide content when contextual view is detached, e.g., if not active, or located in the peripheral area and the main area is maximized.
@@ -13959,6 +14324,13 @@ class ContentProjectionDirective {
      */
     alignContentToHostBoundaries() {
         const hostPosition = this._host.nativeElement.getBoundingClientRect();
+        if (!hostPosition.width && !hostPosition.height) {
+            // When removing the bounding box element (this directive's host) from the DOM, its dimension drops to 0.
+            // We ignore this event to preserve the dimension of projected content, crucial, for example, if projected
+            // content implements virtual scrolling. Otherwise, its content would reload when adding the host to the DOM again.
+            // For example, inactive views are removed from the DOM.
+            return;
+        }
         this.styleContent({
             top: `${hostPosition.top}px`,
             left: `${hostPosition.left}px`,
@@ -13994,9 +14366,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 type: Input,
                 args: [{ alias: 'wbContentProjectionContent', required: true }]
             }] } });
-function isNullDimension(dimension) {
-    return dimension.offsetWidth === 0 && dimension.offsetHeight === 0;
-}
 
 /*
  * Copyright (c) 2018-2022 Swiss Federal Railways
@@ -14065,11 +14434,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
  * Embeds the microfrontend of a view capability.
  */
 class MicrofrontendViewComponent {
-    constructor(_host, _route, _outletRouter, _manifestService, _messageClient, _destroyRef, _logger, _viewContextMenuService, _workbenchLayoutService, _workbenchRouter, _injector, _cd, view, iframeHostRef) {
+    constructor(_host, _route, _outletRouter, _manifestService, _manifestObjectCache, _messageClient, _destroyRef, _logger, _viewContextMenuService, _workbenchLayoutService, _workbenchRouter, _injector, _cd, view, iframeHostRef) {
         this._host = _host;
         this._route = _route;
         this._outletRouter = _outletRouter;
         this._manifestService = _manifestService;
+        this._manifestObjectCache = _manifestObjectCache;
         this._messageClient = _messageClient;
         this._destroyRef = _destroyRef;
         this._logger = _logger;
@@ -14084,6 +14454,7 @@ class MicrofrontendViewComponent {
         this._universalKeystrokes = [
             'keydown.escape', // allows closing notifications
         ];
+        this.capability = null;
         /**
          * Indicates whether a workbench drag operation is in progress, such as when dragging a view or moving a sash.
          */
@@ -14092,6 +14463,8 @@ class MicrofrontendViewComponent {
         this.keystrokesToBubble$ = combineLatest([this.viewContextMenuKeystrokes$(), of(this._universalKeystrokes)])
             .pipe(map(keystrokes => new Array().concat(...keystrokes)));
         this.installWorkbenchDragDetector();
+        this.installViewActivePublisher();
+        this.installPartIdPublisher();
         this.splash = inject(MicrofrontendPlatformConfig).splash ?? MicrofrontendSplashComponent;
     }
     ngOnInit() {
@@ -14108,7 +14481,7 @@ class MicrofrontendViewComponent {
     async onNavigate(prevCapability, capability, params) {
         if (!capability) {
             this._logger.warn(() => `[NullCapabilityError] No application found to provide a view capability of id '${params[_MicrofrontendRouteParams.ɵVIEW_CAPABILITY_ID]}'. Maybe, the requested view is not public API or the providing application not available.`, LoggerNames.MICROFRONTEND_ROUTING);
-            await this.view.close();
+            this.unload();
             return;
         }
         this.capability = capability;
@@ -14132,7 +14505,7 @@ class MicrofrontendViewComponent {
             await this.waitForCapabilityParam(capability.metadata.id);
         }
         // Navigate to the microfrontend.
-        const application = this._manifestService.applications.find(app => app.symbolicName === capability.metadata.appSymbolicName);
+        const application = this._manifestService.getApplication(capability.metadata.appSymbolicName);
         this._logger.debug(() => `Loading microfrontend into workbench view [viewId=${this.view.id}, app=${capability.metadata.appSymbolicName}, baseUrl=${application.baseUrl}, path=${(capability.properties.path)}].`, LoggerNames.MICROFRONTEND_ROUTING, params, capability);
         await this._outletRouter.navigate(capability.properties.path, {
             outlet: this.view.id,
@@ -14142,14 +14515,14 @@ class MicrofrontendViewComponent {
             showSplash: capability.properties.showSplash,
             ɵcapabilityId: capability.metadata.id,
         });
-        // Inactive views are detached from the Angular change detection tree.
-        // Therefore, manually detect this component for changes for updating attributes on the `sci-router-outlet`.
+        // Inactive views are not checked for changes since detached from the Angular component tree.
+        // So, we manually trigger change detection to update attributes on the `sci-router-outlet`.
         if (!this.view.active) {
             this._cd.detectChanges();
         }
     }
     fetchCapability$(capabilityId) {
-        return this._manifestService.lookupCapabilities$({ id: capabilityId }).pipe(map(capabilities => capabilities.at(0)));
+        return this._manifestObjectCache.observeCapability$(capabilityId);
     }
     installMenuItemAccelerators$() {
         // Since the iframe is added at a top-level location in the DOM, that is, not as a child element of this component,
@@ -14204,6 +14577,22 @@ class MicrofrontendViewComponent {
         this.view.closable = viewCapability.properties.closable ?? true;
         this.view.dirty = false;
     }
+    installViewActivePublisher() {
+        this.view.active$
+            .pipe(takeUntilDestroyed())
+            .subscribe(active => {
+            const commandTopic = _WorkbenchCommands.viewActiveTopic(this.view.id);
+            this._messageClient.publish(commandTopic, active, { retain: true }).then();
+        });
+    }
+    installPartIdPublisher() {
+        this.view.partId$
+            .pipe(takeUntilDestroyed())
+            .subscribe(partId => {
+            const commandTopic = _WorkbenchCommands.viewPartIdTopic(this.view.id);
+            this._messageClient.publish(commandTopic, partId, { retain: true }).then();
+        });
+    }
     /**
      * Promise that resolves once params contain the given capability id.
      */
@@ -14264,14 +14653,18 @@ class MicrofrontendViewComponent {
     propagateWorkbenchTheme() {
         runInInjectionContext(this._injector, () => Microfrontends.propagateTheme(this.routerOutletElement.nativeElement));
     }
-    ngOnDestroy() {
-        // Instruct the message broker to delete retained messages to free resources.
+    unload() {
+        // Delete retained messages to free resources.
         this._messageClient.publish(_WorkbenchCommands.viewActiveTopic(this.view.id), undefined, { retain: true }).then();
         this._messageClient.publish(_WorkbenchCommands.viewParamsTopic(this.view.id), undefined, { retain: true }).then();
+        this._messageClient.publish(_WorkbenchCommands.viewPartIdTopic(this.view.id), undefined, { retain: true }).then();
         this._outletRouter.navigate(null, { outlet: this.view.id }).then();
         this.view.unregisterAdapter(MicrofrontendWorkbenchView);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendViewComponent, deps: [{ token: i0.ElementRef }, { token: i2.ActivatedRoute }, { token: i2$3.OutletRouter }, { token: i2$3.ManifestService }, { token: i2$3.MessageClient }, { token: i0.DestroyRef }, { token: Logger }, { token: ViewMenuService }, { token: WorkbenchLayoutService }, { token: WorkbenchRouter }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: ɵWorkbenchView }, { token: IFRAME_HOST }], target: i0.ɵɵFactoryTarget.Component }); }
+    ngOnDestroy() {
+        this.unload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendViewComponent, deps: [{ token: i0.ElementRef }, { token: i2.ActivatedRoute }, { token: i2$3.OutletRouter }, { token: i2$3.ManifestService }, { token: ManifestObjectCache }, { token: i2$3.MessageClient }, { token: i0.DestroyRef }, { token: Logger }, { token: ViewMenuService }, { token: WorkbenchLayoutService }, { token: WorkbenchRouter }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: ɵWorkbenchView }, { token: IFRAME_HOST }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: MicrofrontendViewComponent, isStandalone: true, selector: "wb-microfrontend-view", viewQueries: [{ propertyName: "routerOutletElement", first: true, predicate: ["router_outlet"], descendants: true, static: true }], ngImport: i0, template: "<wb-content-as-overlay [overlayHost]=\"iframeHostRef.ref$ | async\">\n  <div class=\"microfrontend-view\"\n       [class.workbench-drag]=\"isWorkbenchDrag\"\n       [attr.data-viewid]=\"view.id\"\n       wbGlassPane>\n    <sci-router-outlet #router_outlet\n                       [name]=\"view.id\"\n                       [attr.data-capabilityid]=\"capability?.metadata!.id\"\n                       [attr.data-app]=\"capability?.metadata!.appSymbolicName\"\n                       [ngClass]=\"view.classList.value\"\n                       (focuswithin)=\"onFocusWithin($event)\"\n                       [keystrokes]=\"keystrokesToBubble$ | async\">\n      <ng-container *ngComponentOutlet=\"splash\"></ng-container>\n    </sci-router-outlet>\n  </div>\n</wb-content-as-overlay>\n", styles: [":host{display:grid}div.microfrontend-view{display:grid}div.microfrontend-view.workbench-drag{pointer-events:none}div.microfrontend-view>sci-router-outlet::part(splash){display:grid}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ContentAsOverlayComponent, selector: "wb-content-as-overlay", inputs: ["overlayHost"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: GlassPaneDirective, selector: "[wbGlassPane]" }], viewProviders: [
             configureMicrofrontendGlassPane(),
         ] }); }
@@ -14287,7 +14680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                     ], viewProviders: [
                         configureMicrofrontendGlassPane(),
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<wb-content-as-overlay [overlayHost]=\"iframeHostRef.ref$ | async\">\n  <div class=\"microfrontend-view\"\n       [class.workbench-drag]=\"isWorkbenchDrag\"\n       [attr.data-viewid]=\"view.id\"\n       wbGlassPane>\n    <sci-router-outlet #router_outlet\n                       [name]=\"view.id\"\n                       [attr.data-capabilityid]=\"capability?.metadata!.id\"\n                       [attr.data-app]=\"capability?.metadata!.appSymbolicName\"\n                       [ngClass]=\"view.classList.value\"\n                       (focuswithin)=\"onFocusWithin($event)\"\n                       [keystrokes]=\"keystrokesToBubble$ | async\">\n      <ng-container *ngComponentOutlet=\"splash\"></ng-container>\n    </sci-router-outlet>\n  </div>\n</wb-content-as-overlay>\n", styles: [":host{display:grid}div.microfrontend-view{display:grid}div.microfrontend-view.workbench-drag{pointer-events:none}div.microfrontend-view>sci-router-outlet::part(splash){display:grid}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.ActivatedRoute }, { type: i2$3.OutletRouter }, { type: i2$3.ManifestService }, { type: i2$3.MessageClient }, { type: i0.DestroyRef }, { type: Logger }, { type: ViewMenuService }, { type: WorkbenchLayoutService }, { type: WorkbenchRouter }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ɵWorkbenchView }, { type: ViewContainerReference, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.ActivatedRoute }, { type: i2$3.OutletRouter }, { type: i2$3.ManifestService }, { type: ManifestObjectCache }, { type: i2$3.MessageClient }, { type: i0.DestroyRef }, { type: Logger }, { type: ViewMenuService }, { type: WorkbenchLayoutService }, { type: WorkbenchRouter }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ɵWorkbenchView }, { type: ViewContainerReference, decorators: [{
                     type: Inject,
                     args: [IFRAME_HOST]
                 }] }], propDecorators: { routerOutletElement: [{
@@ -14310,6 +14703,132 @@ function configureMicrofrontendGlassPane() {
     ];
 }
 
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Keys for associating workbench-specific data with a perspective.
+ */
+const WorkbenchPerspectiveData = {
+    /**
+     * Property to get the capability providing the perspective.
+     */
+    capability: 'ɵcapability',
+};
+
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Registers perspectives for workbench perspective capabilities.
+ */
+class MicrofrontendPerspectiveInstaller {
+    constructor(_manifestService, _workbenchService, _logger) {
+        this._manifestService = _manifestService;
+        this._workbenchService = _workbenchService;
+        this._logger = _logger;
+        this.installPerspectiveCapabilityListener();
+    }
+    installPerspectiveCapabilityListener() {
+        const differ = inject(IterableDiffers).find([]).create((_index, perspectiveCapability) => perspectiveCapability.metadata.id);
+        this._manifestService.lookupCapabilities$({ type: WorkbenchCapabilities.Perspective })
+            .pipe(takeUntilDestroyed())
+            .subscribe(perspectiveCapabilities => {
+            const changes = differ.diff(perspectiveCapabilities);
+            changes?.forEachAddedItem(({ item: perspectiveCapability }) => this.registerPerspective(perspectiveCapability));
+        });
+    }
+    async registerPerspective(perspectiveCapability) {
+        return this._workbenchService.registerPerspective({
+            id: perspectiveCapability.metadata.id,
+            layout: this.createLayout(perspectiveCapability),
+            data: {
+                ...perspectiveCapability.properties?.data,
+                [WorkbenchPerspectiveData.capability]: perspectiveCapability,
+            },
+        });
+    }
+    createLayout(perspectiveCapability) {
+        return async (factory) => {
+            const [initialPart, ...parts] = perspectiveCapability.properties.layout;
+            // Add parts to the layout.
+            let layout = factory.addPart(initialPart.id);
+            for (const part of parts) {
+                layout = layout.addPart(part.id, {
+                    relativeTo: part.relativeTo,
+                    align: part.align,
+                    ratio: part.ratio,
+                });
+            }
+            // Add views to the layout.
+            for (const part of [initialPart, ...parts]) {
+                if (!part.views?.length) {
+                    continue;
+                }
+                for (const [viewIndex, view] of part.views.entries()) {
+                    const viewCapabilities = await this.lookupViewCapabilities(view.qualifier, {
+                        perspectiveProvider: perspectiveCapability.metadata.appSymbolicName,
+                        perspectiveQualifier: perspectiveCapability.qualifier,
+                    });
+                    viewCapabilities
+                        .map(viewCapability => viewCapability.metadata.id)
+                        .sort() // Ensure stable view order in case multiple capabilities match the qualifier.
+                        .forEach(viewCapabilityId => {
+                        const commands = MicrofrontendViewRoutes.createMicrofrontendNavigateCommands(viewCapabilityId, view.params ?? {});
+                        const alternativeViewId = `${part.id}-${viewCapabilityId}-${viewIndex}`;
+                        layout = layout
+                            .addView(alternativeViewId, { partId: part.id, activateView: view.active })
+                            .navigateView(alternativeViewId, commands, { cssClass: view.cssClass });
+                    });
+                    // Navigate to the "~" route if not finding a view capability, e.g., because the perspective provider references a private view capability
+                    // or has not declared an intention. Since there is no route registered under /~ the "Not Found" page will be displayed.
+                    if (!viewCapabilities.length) {
+                        this._logger.warn(() => `[NullCapabilityError] The perspective '${Objects.toMatrixNotation(perspectiveCapability.qualifier)}' cannot find the view '${Objects.toMatrixNotation(view.qualifier)}'. Verify the application is available and the view exists.`, LoggerNames.MICROFRONTEND);
+                        const alternativeViewId = `${part.id}-${viewIndex}`;
+                        layout = layout
+                            .addView(alternativeViewId, { partId: part.id, activateView: view.active })
+                            .navigateView(alternativeViewId, ['~', view.qualifier], { cssClass: view.cssClass });
+                    }
+                }
+            }
+            return layout;
+        };
+    }
+    /**
+     * Searches for views that match the specified qualifier and are accessible to the perspective provider,
+     * i.e., its own view capabilities or public view capabilities of other applications the perspective provider
+     * has an intention for.
+     */
+    async lookupViewCapabilities(qualifier, perspective) {
+        const viewCapabilities$ = this._manifestService.lookupCapabilities$({ type: WorkbenchCapabilities.View, qualifier })
+            .pipe(filterArray(async (viewCapability) => {
+            const allowed = await firstValueFrom(this._manifestService.isApplicationQualified$(perspective.perspectiveProvider, { capabilityId: viewCapability.metadata.id }));
+            if (!allowed) {
+                this._logger.warn(`[NotQualifiedError] Application '${(perspective.perspectiveProvider)}' is not allowed to reference the view '${Objects.toMatrixNotation(viewCapability.qualifier)}' in the perspective '${Objects.toMatrixNotation(perspective.perspectiveQualifier)}'. Ensure you have specified an intention and that the view is public.`, LoggerNames.MICROFRONTEND);
+            }
+            return allowed;
+        }));
+        return firstValueFrom(viewCapabilities$);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPerspectiveInstaller, deps: [{ token: i2$3.ManifestService }, { token: WorkbenchService }, { token: Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPerspectiveInstaller }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MicrofrontendPerspectiveInstaller, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i2$3.ManifestService }, { type: WorkbenchService }, { type: Logger }] });
+
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
  *
@@ -14346,20 +14865,34 @@ function provideWorkbenchMicrofrontendSupport(workbenchConfig) {
             useClass: MicrofrontendNotificationIntentHandler,
             multi: true,
         },
+        {
+            provide: MICROFRONTEND_PLATFORM_POST_STARTUP,
+            useClass: MicrofrontendPerspectiveInstaller,
+            multi: true,
+        },
+        {
+            provide: MICROFRONTEND_PLATFORM_POST_STARTUP,
+            useExisting: ManifestObjectCache,
+            multi: true,
+        },
         {
             provide: MicrofrontendPlatformConfig,
             useFactory: () => Defined.orElseThrow(inject(MicrofrontendPlatformInitializer).config, () => Error('[MicrofrontendPlatformError] Illegal state: Microfrontend platform configuration not loaded.')),
         },
+        MicrofrontendPlatformInitializer,
+        MicrofrontendPerspectiveIntentHandler,
         MicrofrontendViewIntentHandler,
         MicrofrontendPopupIntentHandler,
         MicrofrontendDialogIntentHandler,
         MicrofrontendMessageBoxLegacyIntentTranslator,
         MicrofrontendMessageBoxIntentHandler,
+        MicrofrontendPerspectiveCapabilityValidator,
         MicrofrontendViewCapabilityValidator,
-        MicrofrontendViewCapabilityIdAssigner,
         MicrofrontendPopupCapabilityValidator,
         MicrofrontendDialogCapabilityValidator,
         MicrofrontendMessageBoxCapabilityValidator,
+        StableCapabilityIdAssigner,
+        ManifestObjectCache,
         NgZoneObservableDecorator,
         WorkbenchHostManifestInterceptor,
         provideBuiltInTextMessageBoxCapabilityRoute(),
@@ -14420,7 +14953,7 @@ function provideMicrofrontendViewRoute() {
             useFactory: () => ({
                 matcher: MicrofrontendViewRoutes.provideMicrofrontendRouteMatcher(),
                 component: MicrofrontendViewComponent,
-                canMatch: [canMatchWorkbenchView(true)],
+                canMatch: [canMatchWorkbenchView(true), MicrofrontendViewRoutes.canMatchViewCapability],
             }),
         },
     ]);
@@ -14571,17 +15104,13 @@ function provideWorkbench(config) {
             provide: WorkbenchStorage,
             useClass: config.storage ?? DefaultWorkbenchStorage,
         },
-        {
-            provide: WORKBENCH_LAYOUT_CONFIG,
-            useFactory: () => config.layout ?? ((factory) => factory.addPart(MAIN_AREA)),
-        },
         {
             provide: WORKBENCH_PRE_STARTUP,
             useExisting: WorkbenchThemeSwitcher,
             multi: true,
         },
         {
-            provide: WORKBENCH_STARTUP,
+            provide: WORKBENCH_POST_STARTUP,
             multi: true,
             useExisting: WorkbenchPerspectiveService,
         },
@@ -15054,5 +15583,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { LogAppender, LogLevel, Logger, LoggerName, MAIN_AREA, MICROFRONTEND_PLATFORM_POST_STARTUP, MICROFRONTEND_PLATFORM_PRE_STARTUP, MicrofrontendPlatformConfigLoader, Notification, NotificationService, Popup, PopupConfig, PopupService, VIEW_TAB_RENDERING_CONTEXT, WORKBENCH_ID, WORKBENCH_POST_STARTUP, WORKBENCH_PRE_STARTUP, WORKBENCH_STARTUP, WorkbenchAuxiliaryRoutesRegistrator, WorkbenchComponent, WorkbenchConfig, WorkbenchDialog, WorkbenchDialogActionDirective, WorkbenchDialogFooterDirective, WorkbenchDialogHeaderDirective, WorkbenchDialogService, WorkbenchLauncher, WorkbenchLayoutFactory, WorkbenchMessageBoxService, WorkbenchModule, WorkbenchPart, WorkbenchPartActionDirective, WorkbenchRouteData, WorkbenchRouter, WorkbenchRouterLinkDirective, WorkbenchService, WorkbenchStartup, WorkbenchStorage, WorkbenchTestingModule, WorkbenchView, WorkbenchViewMenuItemDirective, canMatchWorkbenchView, provideWorkbench, provideWorkbenchForTest };
+export { LogAppender, LogLevel, Logger, LoggerName, MAIN_AREA, MICROFRONTEND_PLATFORM_POST_STARTUP, MICROFRONTEND_PLATFORM_PRE_STARTUP, MicrofrontendPlatformConfigLoader, Notification, NotificationService, Popup, PopupConfig, PopupService, VIEW_TAB_RENDERING_CONTEXT, WORKBENCH_ID, WORKBENCH_POST_STARTUP, WORKBENCH_PRE_STARTUP, WORKBENCH_STARTUP, WorkbenchComponent, WorkbenchConfig, WorkbenchDialog, WorkbenchDialogActionDirective, WorkbenchDialogFooterDirective, WorkbenchDialogHeaderDirective, WorkbenchDialogService, WorkbenchLauncher, WorkbenchLayoutFactory, WorkbenchMessageBoxService, WorkbenchModule, WorkbenchPart, WorkbenchPartActionDirective, WorkbenchPerspectiveData, WorkbenchRouteData, WorkbenchRouter, WorkbenchRouterLinkDirective, WorkbenchService, WorkbenchStartup, WorkbenchStorage, WorkbenchTestingModule, WorkbenchView, WorkbenchViewMenuItemDirective, canMatchWorkbenchView, provideWorkbench, provideWorkbenchForTest };
 //# sourceMappingURL=scion-workbench.mjs.map