@ng-prism/core 22.6.0 → 22.7.0-beta.1

package/dist/app/shell/prism-shell.component.js

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, effect, HostListener, inject, untracked } from '@angular/core';
+import { canvasOverlayTokens } from '../canvas/canvas-overlay-tokens.js';
 import { PrismCanvasPinRowComponent } from '../canvas/prism-canvas-pin-row.component.js';
 import { PrismCanvasToolbarComponent } from '../canvas/prism-canvas-toolbar.component.js';
 import { PrismTemplatePopoverComponent } from '../canvas/prism-template-popover.component.js';
@@ -8,25 +9,28 @@ import { PrismHeaderComponent } from '../header/prism-header.component.js';
 import { PrismPageRendererComponent } from '../page-renderer/prism-page-renderer.component.js';
 import { PrismPanelHostComponent } from '../panels/panel-host/prism-panel-host.component.js';
 import { PrismRendererComponent } from '../renderer/prism-renderer.component.js';
-import { PrismLayoutService } from '../services/prism-layout.service.js';
+import { PANEL_HEIGHT, PrismLayoutService, SIDEBAR_WIDTH } from '../services/prism-layout.service.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismPanelService } from '../services/prism-panel.service.js';
 import { PrismPersistenceService } from '../services/prism-persistence.service.js';
 import { PrismThemeService } from '../services/prism-theme.service.js';
 import { PrismUrlStateService } from '../services/prism-url-state.service.js';
+import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
+import { PrismLogoComponent } from '../shared/prism-logo.component.js';
 import { PrismSidebarComponent } from '../sidebar/prism-sidebar.component.js';
 import { PRISM_CONFIG } from '../tokens/prism-tokens.js';
 import { PrismVariantRibbonComponent } from '../variant-ribbon/prism-variant-ribbon.component.js';
 import { nextViewId } from '../view-tab-bar/next-view-id.js';
 import { PrismViewPanelHostComponent } from '../view-tab-bar/prism-view-panel-host.component.js';
 import { PrismViewTabBarComponent } from '../view-tab-bar/prism-view-tab-bar.component.js';
+import { shouldSelectFirst } from './should-select-first.js';
 import * as i0 from "@angular/core";
 function PrismShellComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "aside", 6);
     i0.ɵɵelement(1, "prism-sidebar");
     i0.ɵɵelementStart(2, "div", 7);
-    i0.ɵɵelement(3, "img", 8);
+    i0.ɵɵelement(3, "prism-logo", 8);
     i0.ɵɵelementStart(4, "a", 9);
     i0.ɵɵtext(5, " Powered by ng-prism ");
     i0.ɵɵelementEnd()()();
@@ -35,8 +39,11 @@ function PrismShellComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("min", 200)("max", 360)("value", ctx_r1.layout.sidebarWidth());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("size", 13);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("min", ctx_r1.sidebarBounds.min)("max", ctx_r1.sidebarBounds.max)("value", ctx_r1.layout.sidebarWidth());
+    i0.ɵɵattribute("aria-valuemin", ctx_r1.sidebarBounds.min)("aria-valuemax", ctx_r1.sidebarBounds.max)("aria-valuenow", ctx_r1.layout.sidebarWidth());
 } }
 function PrismShellComponent_Conditional_5_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-view-tab-bar", 11);
@@ -58,6 +65,8 @@ function PrismShellComponent_Conditional_5_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵconditional(ctx_r1.viewPanels().length > 0 ? 1 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.layout.toolbarVisible() ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r1.overlayTokens());
 } }
 function PrismShellComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "prism-component-head");
@@ -75,11 +84,12 @@ function PrismShellComponent_Conditional_5_Conditional_2_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("min", 200)("max", 560)("value", ctx_r1.layout.panelHeight());
+    i0.ɵɵproperty("min", ctx_r1.panelBounds.min)("max", ctx_r1.panelBounds.max)("value", ctx_r1.layout.panelHeight());
+    i0.ɵɵattribute("aria-valuemin", ctx_r1.panelBounds.min)("aria-valuemax", ctx_r1.panelBounds.max)("aria-valuenow", ctx_r1.layout.panelHeight());
 } }
 function PrismShellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PrismShellComponent_Conditional_5_Conditional_0_Template, 8, 2)(1, PrismShellComponent_Conditional_5_Conditional_1_Template, 3, 0);
-    i0.ɵɵconditionalCreate(2, PrismShellComponent_Conditional_5_Conditional_2_Template, 3, 3);
+    i0.ɵɵconditionalCreate(0, PrismShellComponent_Conditional_5_Conditional_0_Template, 8, 4)(1, PrismShellComponent_Conditional_5_Conditional_1_Template, 3, 0);
+    i0.ɵɵconditionalCreate(2, PrismShellComponent_Conditional_5_Conditional_2_Template, 3, 6);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r1.panelService.activeViewId() === "renderer" ? 0 : 1);
@@ -87,30 +97,42 @@ function PrismShellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r1.showPanel() ? 2 : -1);
 } }
 function PrismShellComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-page-renderer", 4);
+    i0.ɵɵelementStart(0, "prism-component-head");
+    i0.ɵɵelement(1, "prism-view-tab-bar", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "prism-view-panel-host", 4);
 } }
 function PrismShellComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 15);
-    i0.ɵɵelement(2, "path", 16)(3, "path", 17);
+    i0.ɵɵelement(0, "prism-page-renderer", 4);
+} }
+function PrismShellComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5)(1, "span", 15);
+    i0.ɵɵelement(2, "prism-logo", 8);
     i0.ɵɵelementEnd();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(4, "p", 18);
-    i0.ɵɵtext(5, "Select a component");
+    i0.ɵɵelementStart(3, "p", 16);
+    i0.ɵɵtext(4, "Select a component");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 19);
-    i0.ɵɵtext(7, " from the sidebar to preview it here ");
+    i0.ɵɵelementStart(5, "p", 17);
+    i0.ɵɵtext(6, " from the sidebar to preview it here ");
     i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("size", 54);
 } }
 export class PrismShellComponent {
     config = inject(PRISM_CONFIG);
     navigationService = inject(PrismNavigationService);
     themeService = inject(PrismThemeService);
     layout = inject(PrismLayoutService);
+    sidebarBounds = SIDEBAR_WIDTH;
+    panelBounds = PANEL_HEIGHT;
     panelService = inject(PrismPanelService);
     urlStateService = inject(PrismUrlStateService);
     persistenceService = inject(PrismPersistenceService);
+    variantBg = inject(PrismVariantBgService);
+    /** Overlays on the canvas follow its ground: light and dark are absolute, the others follow the theme. */
+    overlayTokens = computed(() => canvasOverlayTokens(this.variantBg.effective()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayTokens" }] : /* istanbul ignore next */ []));
     viewPanels = this.panelService.visibleViewPanels;
     showPanel = computed(() => this.layout.addonsVisible() && this.panelService.activeViewId() === 'renderer' && !this.navigationService.activePage(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showPanel" }] : /* istanbul ignore next */ []));
@@ -130,9 +152,12 @@ export class PrismShellComponent {
         // old rule watched for the *event* of switching and needed a key to
         // remember; this one states the invariant and needs nothing. The rule
         // itself lives in `nextViewId`, a pure function with its own tests; this
-        // effect only reads the two signals it needs and applies the result.
+        // effect only reads the signals it needs and applies the result. On a
+        // service or pipe page the target switches the rule: neither has a
+        // Playground to fall back to.
         effect(() => {
-            const next = nextViewId(this.panelService.activeViewId(), this.panelService.visibleViewPanels());
+            const target = this.navigationService.activeTarget() ?? 'component';
+            const next = nextViewId(this.panelService.activeViewId(), this.panelService.visibleViewPanels(), target);
             if (next !== null) {
                 untracked(() => this.panelService.activeViewId.set(next));
             }
@@ -140,8 +165,10 @@ export class PrismShellComponent {
         effect(() => {
             const item = this.navigationService.activeItem();
             const activeComp = this.navigationService.activeComponent();
+            const activeService = this.navigationService.activeService();
+            const activePipe = this.navigationService.activePipe();
             const activePage = this.navigationService.activePage();
-            if (item !== null && activeComp === null && activePage === null) {
+            if (shouldSelectFirst(item, activeComp, activeService, activePipe, activePage)) {
                 untracked(() => this.navigationService.selectFirst());
             }
         });
@@ -170,13 +197,13 @@ export class PrismShellComponent {
     static ɵfac = function PrismShellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismShellComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismShellComponent, selectors: [["prism-shell"]], hostBindings: function PrismShellComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function PrismShellComponent_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); }, i0.ɵɵresolveDocument);
-        } }, decls: 8, vars: 8, consts: [[1, "prism-shell"], [1, "prism-shell__header"], [1, "prism-body"], [1, "prism-main"], [1, "prism-main__canvas"], [1, "prism-shell__empty"], [1, "prism-sidebar-wrap"], [1, "prism-sidebar-foot"], ["alt", "ng-prism logo", "src", "data:image/png;base64,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", 1, "prism-sidebar-foot__logo"], ["href", "https://ng-prism.github.io/ng-prism/#/", "target", "_blank", "rel", "noopener", 1, "prism-sidebar-foot__link"], ["prismResizer", "", "axis", "x", 1, "prism-resizer-col", 3, "valueChange", "min", "max", "value"], ["headEnd", ""], [1, "prism-canvas-wrap"], ["prismResizer", "", "axis", "y", 1, "prism-resizer-row", 3, "valueChange", "min", "max", "value"], [1, "prism-main__panel"], ["viewBox", "0 0 24 24", "fill", "none", "stroke", "currentColor", "stroke-width", "1.5", "stroke-linecap", "round", "stroke-linejoin", "round", 1, "prism-shell__empty-icon"], ["d", "M12 2L4 14h16L12 2z"], ["d", "M4 14l4 8h8l4-8"], [1, "prism-shell__empty-text"], [1, "prism-shell__empty-hint"]], template: function PrismShellComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 9, vars: 8, consts: [[1, "prism-shell"], [1, "prism-shell__header"], [1, "prism-body"], [1, "prism-main"], [1, "prism-main__canvas"], [1, "prism-shell__empty"], [1, "prism-sidebar-wrap"], [1, "prism-sidebar-foot"], [3, "size"], ["href", "https://ng-prism.github.io/ng-prism/#/", "target", "_blank", "rel", "noopener", 1, "prism-sidebar-foot__link"], ["prismResizer", "", "axis", "x", "aria-label", "Sidebar width", 1, "prism-resizer-col", 3, "valueChange", "min", "max", "value"], ["headEnd", ""], [1, "prism-canvas-wrap"], ["prismResizer", "", "axis", "y", "aria-label", "Panel height", 1, "prism-resizer-row", 3, "valueChange", "min", "max", "value"], [1, "prism-main__panel"], ["aria-hidden", "true", 1, "prism-shell__empty-mark"], [1, "prism-shell__empty-text"], [1, "prism-shell__empty-hint"]], template: function PrismShellComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "prism-header", 1);
             i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵconditionalCreate(3, PrismShellComponent_Conditional_3_Template, 7, 3);
+            i0.ɵɵconditionalCreate(3, PrismShellComponent_Conditional_3_Template, 7, 7);
             i0.ɵɵelementStart(4, "main", 3);
-            i0.ɵɵconditionalCreate(5, PrismShellComponent_Conditional_5_Template, 3, 2)(6, PrismShellComponent_Conditional_6_Template, 1, 0, "prism-page-renderer", 4)(7, PrismShellComponent_Conditional_7_Template, 8, 0, "div", 5);
+            i0.ɵɵconditionalCreate(5, PrismShellComponent_Conditional_5_Template, 3, 2)(6, PrismShellComponent_Conditional_6_Template, 3, 0)(7, PrismShellComponent_Conditional_7_Template, 1, 0, "prism-page-renderer", 4)(8, PrismShellComponent_Conditional_8_Template, 7, 1, "div", 5);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵstyleMap(ctx.shellStyle());
@@ -187,7 +214,7 @@ export class PrismShellComponent {
             i0.ɵɵadvance();
             i0.ɵɵstyleProp("--%NS%ph", ctx.showPanel() ? ctx.layout.panelHeight() : 0, "px");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.navigationService.activeComponent() ? 5 : ctx.navigationService.activePage() ? 6 : 7);
+            i0.ɵɵconditional(ctx.navigationService.activeComponent() ? 5 : ctx.navigationService.activeTarget() === "service" || ctx.navigationService.activeTarget() === "pipe" ? 6 : ctx.navigationService.activePage() ? 7 : 8);
         } }, dependencies: [PrismHeaderComponent,
             PrismSidebarComponent,
             PrismComponentHeadComponent,
@@ -200,7 +227,8 @@ export class PrismShellComponent {
             PrismResizerDirective,
             PrismCanvasToolbarComponent,
             PrismTemplatePopoverComponent,
-            PrismCanvasPinRowComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.prism-shell[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-rows: var(--%NS%band-header) 1fr;\n\n    \n\n\n\n\n\n\n\n\n\n\n\n\n    grid-template-columns: minmax(0, 1fr);\n    height: 100vh;\n    overflow: hidden;\n    font-family: var(--%NS%font-sans, var(--%NS%prism-font-sans));\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-void);\n}\n\n.prism-body[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: var(--%NS%sw, 264px) 4px 1fr;\n    min-height: 0;\n}\n\n.prism-body--no-sidebar[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n}\n\n.prism-sidebar-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg);\n    border-right: 1px solid var(--%NS%prism-border);\n}\n\n.prism-sidebar-wrap[_ngcontent-%COMP%]   prism-sidebar[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-sidebar-foot[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 10px 14px;\n    font-size: 11px;\n    color: var(--%NS%prism-text-ghost);\n    border-top: 1px solid var(--%NS%prism-border);\n}\n\n.prism-sidebar-foot__logo[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 16px;\n}\n\n.prism-sidebar-foot__link[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-ghost);\n    text-decoration: none;\n    transition: color var(--%NS%dur-fast);\n}\n\n.prism-sidebar-foot__link[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.prism-resizer-col[_ngcontent-%COMP%] {\n    position: relative;\n    z-index: 5;\n    width: 4px;\n    background: transparent;\n    transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-resizer-col[_ngcontent-%COMP%]:hover, \n.prism-resizer-col.active[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary);\n}\n\n.prism-main[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-void);\n}\n\n.prism-resizer-row[_ngcontent-%COMP%] {\n    position: relative;\n    z-index: 5;\n    flex-shrink: 0;\n    height: 4px;\n    background: transparent;\n    transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-resizer-row[_ngcontent-%COMP%]:hover, \n.prism-resizer-row.active[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-primary);\n}\n\n\n\n\n.prism-canvas-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    display: grid;\n    flex: 1;\n    grid-template-rows: minmax(0, 1fr);\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg-surface);\n}\n\n.prism-main__canvas[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.prism-main__panel[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    height: var(--%NS%ph, 260px);\n    min-height: 0;\n    overflow: hidden;\n}\n\n.prism-shell__empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    grid-row: 1 / -1;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n}\n\n.prism-shell__empty-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    margin-bottom: 8px;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.prism-shell__empty-text[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: var(--%NS%fs-xl);\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-shell__empty-hint[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: var(--%NS%fs-lg);\n    color: var(--%NS%prism-text-ghost);\n}"] });
+            PrismCanvasPinRowComponent,
+            PrismLogoComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.prism-shell[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-rows: var(--%NS%band-header) 1fr;\n\n    \n\n\n\n\n\n\n\n\n\n\n\n\n    grid-template-columns: minmax(0, 1fr);\n    height: 100vh;\n    overflow: hidden;\n    font-family: var(--%NS%font-sans, var(--%NS%prism-font-sans));\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-void);\n}\n\n\n.prism-body[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: var(--%NS%sw, 280px) 0 1fr;\n    min-height: 0;\n}\n\n.prism-body--no-sidebar[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n}\n\n.prism-sidebar-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg);\n    border-right: 1px solid var(--%NS%prism-border);\n}\n\n.prism-sidebar-wrap[_ngcontent-%COMP%]   prism-sidebar[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-sidebar-foot[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 10px 14px;\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n    border-top: 1px solid var(--%NS%prism-border);\n}\n\n.prism-sidebar-foot__link[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n    text-decoration: none;\n    transition: color var(--%NS%dur-fast);\n}\n\n.prism-sidebar-foot__link[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n}\n\n\n\n.prism-resizer-col[_ngcontent-%COMP%], \n.prism-resizer-row[_ngcontent-%COMP%] {\n    position: relative;\n    z-index: 5;\n    outline: none;\n}\n\n.prism-resizer-col[_ngcontent-%COMP%]::before, \n.prism-resizer-row[_ngcontent-%COMP%]::before {\n    position: absolute;\n    content: '';\n}\n\n.prism-resizer-col[_ngcontent-%COMP%]::before {\n    inset: 0 -4px;\n}\n\n.prism-resizer-row[_ngcontent-%COMP%]::before {\n    inset: -4px 0;\n}\n\n.prism-resizer-col[_ngcontent-%COMP%]::after, \n.prism-resizer-row[_ngcontent-%COMP%]::after {\n    position: absolute;\n    pointer-events: none;\n    content: '';\n    transition:\n        background var(--%NS%dur-fast) var(--%NS%ease-default),\n        inset var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n\n.prism-resizer-col[_ngcontent-%COMP%]::after {\n    inset: calc(50% - 14px) -1.5px;\n    background: var(--%NS%prism-border-strong);\n    border-radius: 2px;\n}\n\n.prism-resizer-col[_ngcontent-%COMP%]:hover::after, \n.prism-resizer-col.active[_ngcontent-%COMP%]::after, \n.prism-resizer-col[_ngcontent-%COMP%]:focus-visible::after {\n    inset: 0 -1px;\n    background: var(--%NS%prism-primary);\n    border-radius: 0;\n}\n\n.prism-main[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-void);\n}\n\n.prism-resizer-row[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    height: 0;\n}\n\n\n.prism-resizer-row[_ngcontent-%COMP%]::after {\n    inset: -1.5px calc(50% - 9px);\n    background: radial-gradient(circle, var(--%NS%prism-border-strong) 1.5px, transparent 1.6px) 0 0 / 6px 3px repeat-x;\n}\n\n.prism-resizer-row[_ngcontent-%COMP%]:hover::after, \n.prism-resizer-row.active[_ngcontent-%COMP%]::after, \n.prism-resizer-row[_ngcontent-%COMP%]:focus-visible::after {\n    inset: -1px 0;\n    background: var(--%NS%prism-primary);\n}\n\n\n\n\n.prism-canvas-wrap[_ngcontent-%COMP%] {\n    \n\n    --%NS%prism-canvas-overlay-bg: var(--%NS%prism-bg-elevated);\n    --%NS%prism-canvas-overlay-fg: var(--%NS%prism-text);\n    --%NS%prism-canvas-overlay-muted: var(--%NS%prism-text-2);\n    --%NS%prism-canvas-overlay-border: var(--%NS%prism-border-strong);\n    --%NS%prism-canvas-overlay-primary: var(--%NS%prism-primary);\n    --%NS%prism-canvas-overlay-active: var(--%NS%prism-primary-bg);\n\n    position: relative;\n    display: grid;\n    flex: 1;\n    grid-template-rows: minmax(0, 1fr);\n    min-height: 0;\n    overflow: hidden;\n    background: var(--%NS%prism-bg-surface);\n}\n\n.prism-main__canvas[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.prism-main__panel[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    height: var(--%NS%ph, 300px);\n    min-height: 0;\n    overflow: hidden;\n}\n\n.prism-shell__empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    grid-row: 1 / -1;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n}\n\n\n.prism-shell__empty-mark[_ngcontent-%COMP%] {\n    position: relative;\n    display: grid;\n    place-items: center;\n    margin-bottom: 12px;\n    isolation: isolate;\n}\n\n.prism-shell__empty-mark[_ngcontent-%COMP%]::before {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    z-index: -1;\n    width: 340px;\n    height: 200px;\n    pointer-events: none;\n    content: '';\n    background: var(--%NS%prism-brand-glow);\n    filter: blur(18px);\n    transform: translate(-50%, -50%);\n}\n\n.prism-shell__empty-text[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: var(--%NS%fs-xl);\n    font-weight: 500;\n    color: var(--%NS%prism-text);\n}\n\n.prism-shell__empty-hint[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: var(--%NS%fs-lg);\n    color: var(--%NS%prism-text-muted);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismShellComponent, [{
         type: Component,
@@ -217,10 +245,11 @@ export class PrismShellComponent {
                     PrismResizerDirective,
                     PrismCanvasToolbarComponent,
                     PrismTemplatePopoverComponent,
-                    PrismCanvasPinRowComponent
-                ], template: "<div\n    class=\"prism-shell\"\n    [style]=\"shellStyle()\">\n    <prism-header class=\"prism-shell__header\" />\n\n    <div\n        class=\"prism-body\"\n        [class.prism-body--no-sidebar]=\"!layout.sidebarVisible()\">\n        @if (layout.sidebarVisible()) {\n            <aside class=\"prism-sidebar-wrap\">\n                <prism-sidebar />\n                <div class=\"prism-sidebar-foot\">\n                    <img\n                        class=\"prism-sidebar-foot__logo\"\n                        alt=\"ng-prism logo\"\n                        src=\"data:image/png;base64,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\" />\n                    <a\n                        class=\"prism-sidebar-foot__link\"\n                        href=\"https://ng-prism.github.io/ng-prism/#/\"\n                        target=\"_blank\"\n                        rel=\"noopener\">\n                        Powered by ng-prism\n                    </a>\n                </div>\n            </aside>\n            <div\n                class=\"prism-resizer-col\"\n                prismResizer\n                axis=\"x\"\n                [min]=\"200\"\n                [max]=\"360\"\n                [value]=\"layout.sidebarWidth()\"\n                (valueChange)=\"layout.setSidebarWidth($event)\"></div>\n        }\n\n        <main\n            class=\"prism-main\"\n            [style.--ph.px]=\"showPanel() ? layout.panelHeight() : 0\">\n            @if (navigationService.activeComponent()) {\n                @if (panelService.activeViewId() === 'renderer') {\n                    <prism-component-head>\n                        @if (viewPanels().length > 0) {\n                            <prism-view-tab-bar headEnd />\n                        }\n                    </prism-component-head>\n                    @if (layout.toolbarVisible()) {\n                        <prism-variant-ribbon />\n                    }\n                    <div class=\"prism-canvas-wrap\">\n                        <prism-canvas-toolbar />\n                        <prism-renderer />\n                        <prism-template-popover />\n                        <prism-canvas-pin-row />\n                    </div>\n                } @else {\n                    <prism-component-head>\n                        <prism-view-tab-bar headEnd />\n                    </prism-component-head>\n                    <prism-view-panel-host class=\"prism-main__canvas\" />\n                }\n                @if (showPanel()) {\n                    <div\n                        class=\"prism-resizer-row\"\n                        prismResizer\n                        axis=\"y\"\n                        [min]=\"200\"\n                        [max]=\"560\"\n                        [value]=\"layout.panelHeight()\"\n                        (valueChange)=\"layout.setPanelHeight($event)\"></div>\n                    <div class=\"prism-main__panel\">\n                        <prism-panel-host />\n                    </div>\n                }\n            } @else if (navigationService.activePage()) {\n                <prism-page-renderer class=\"prism-main__canvas\" />\n            } @else {\n                <div class=\"prism-shell__empty\">\n                    <svg\n                        class=\"prism-shell__empty-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\">\n                        <path d=\"M12 2L4 14h16L12 2z\" />\n                        <path d=\"M4 14l4 8h8l4-8\" />\n                    </svg>\n                    <p class=\"prism-shell__empty-text\">Select a component</p>\n                    <p class=\"prism-shell__empty-hint\"> from the sidebar to preview it here </p>\n                </div>\n            }\n        </main>\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    height: 100%;\n}\n\n.prism-shell {\n    display: grid;\n    grid-template-rows: var(--band-header) 1fr;\n\n    /* Declared for its minimum, not for its size. An implicit grid track is\n     auto, and an auto track's minimum is the min-content width of what sits\n     in it -- here the whole body, sidebar and resizer and main together. The\n     track therefore grows to whatever the widest panel demands and the\n     overflow: hidden below clips the remainder, instead of the viewport ever\n     getting a chance to reflow. Measured at a 500px viewport the track stood\n     at 763px and held the canvas at 415px however far the window was dragged\n     in, so responsive behaviour inside a showcased component was impossible\n     to reach.\n     The rows stay bare because min-height: 0 is already spelled out on every\n     level below them. The inline axis had no such counterpart anywhere, and\n     the levels below zero their own minimum through overflow: hidden, which\n     is why this one track is the only place that needs saying. */\n    grid-template-columns: minmax(0, 1fr);\n    height: 100vh;\n    overflow: hidden;\n    font-family: var(--font-sans, var(--prism-font-sans));\n    color: var(--prism-text);\n    background: var(--prism-void);\n}\n\n.prism-body {\n    display: grid;\n    grid-template-columns: var(--sw, 264px) 4px 1fr;\n    min-height: 0;\n}\n\n.prism-body--no-sidebar {\n    grid-template-columns: 1fr;\n}\n\n.prism-sidebar-wrap {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg);\n    border-right: 1px solid var(--prism-border);\n}\n\n.prism-sidebar-wrap prism-sidebar {\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-sidebar-foot {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 10px 14px;\n    font-size: 11px;\n    color: var(--prism-text-ghost);\n    border-top: 1px solid var(--prism-border);\n}\n\n.prism-sidebar-foot__logo {\n    flex-shrink: 0;\n    width: 16px;\n}\n\n.prism-sidebar-foot__link {\n    color: var(--prism-text-ghost);\n    text-decoration: none;\n    transition: color var(--dur-fast);\n}\n\n.prism-sidebar-foot__link:hover {\n    color: var(--prism-text-2);\n}\n\n.prism-resizer-col {\n    position: relative;\n    z-index: 5;\n    width: 4px;\n    background: transparent;\n    transition: background var(--dur-fast) var(--ease-default);\n}\n\n.prism-resizer-col:hover,\n.prism-resizer-col.active {\n    background: var(--prism-primary);\n}\n\n.prism-main {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-void);\n}\n\n.prism-resizer-row {\n    position: relative;\n    z-index: 5;\n    flex-shrink: 0;\n    height: 4px;\n    background: transparent;\n    transition: background var(--dur-fast) var(--ease-default);\n}\n\n.prism-resizer-row:hover,\n.prism-resizer-row.active {\n    background: var(--prism-primary);\n}\n\n/* One row, not two: the canvas tools no longer occupy a band above the\n   stage, they float over it from a rail absolutely positioned against\n   this element. The position: relative below is what anchors it. */\n.prism-canvas-wrap {\n    position: relative;\n    display: grid;\n    flex: 1;\n    grid-template-rows: minmax(0, 1fr);\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg-surface);\n}\n\n.prism-main__canvas {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.prism-main__panel {\n    flex-shrink: 0;\n    height: var(--ph, 260px);\n    min-height: 0;\n    overflow: hidden;\n}\n\n.prism-shell__empty {\n    display: flex;\n    flex-direction: column;\n    grid-row: 1 / -1;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n}\n\n.prism-shell__empty-icon {\n    width: 48px;\n    height: 48px;\n    margin-bottom: 8px;\n    color: var(--prism-text-ghost);\n}\n\n.prism-shell__empty-text {\n    margin: 0;\n    font-size: var(--fs-xl);\n    font-weight: 500;\n    color: var(--prism-text-muted);\n}\n\n.prism-shell__empty-hint {\n    margin: 0;\n    font-size: var(--fs-lg);\n    color: var(--prism-text-ghost);\n}\n"] }]
+                    PrismCanvasPinRowComponent,
+                    PrismLogoComponent
+                ], template: "<div\n    class=\"prism-shell\"\n    [style]=\"shellStyle()\">\n    <prism-header class=\"prism-shell__header\" />\n\n    <div\n        class=\"prism-body\"\n        [class.prism-body--no-sidebar]=\"!layout.sidebarVisible()\">\n        @if (layout.sidebarVisible()) {\n            <aside class=\"prism-sidebar-wrap\">\n                <prism-sidebar />\n                <div class=\"prism-sidebar-foot\">\n                    <prism-logo [size]=\"13\" />\n                    <a\n                        class=\"prism-sidebar-foot__link\"\n                        href=\"https://ng-prism.github.io/ng-prism/#/\"\n                        target=\"_blank\"\n                        rel=\"noopener\">\n                        Powered by ng-prism\n                    </a>\n                </div>\n            </aside>\n            <div\n                class=\"prism-resizer-col\"\n                prismResizer\n                axis=\"x\"\n                [min]=\"sidebarBounds.min\"\n                [max]=\"sidebarBounds.max\"\n                aria-label=\"Sidebar width\"\n                [attr.aria-valuemin]=\"sidebarBounds.min\"\n                [attr.aria-valuemax]=\"sidebarBounds.max\"\n                [attr.aria-valuenow]=\"layout.sidebarWidth()\"\n                [value]=\"layout.sidebarWidth()\"\n                (valueChange)=\"layout.setSidebarWidth($event)\"></div>\n        }\n\n        <main\n            class=\"prism-main\"\n            [style.--ph.px]=\"showPanel() ? layout.panelHeight() : 0\">\n            @if (navigationService.activeComponent()) {\n                @if (panelService.activeViewId() === 'renderer') {\n                    <prism-component-head>\n                        @if (viewPanels().length > 0) {\n                            <prism-view-tab-bar headEnd />\n                        }\n                    </prism-component-head>\n                    @if (layout.toolbarVisible()) {\n                        <prism-variant-ribbon />\n                    }\n                    <div\n                        class=\"prism-canvas-wrap\"\n                        [style]=\"overlayTokens()\">\n                        <prism-canvas-toolbar />\n                        <prism-renderer />\n                        <prism-template-popover />\n                        <prism-canvas-pin-row />\n                    </div>\n                } @else {\n                    <prism-component-head>\n                        <prism-view-tab-bar headEnd />\n                    </prism-component-head>\n                    <prism-view-panel-host class=\"prism-main__canvas\" />\n                }\n                @if (showPanel()) {\n                    <div\n                        class=\"prism-resizer-row\"\n                        prismResizer\n                        axis=\"y\"\n                        [min]=\"panelBounds.min\"\n                        [max]=\"panelBounds.max\"\n                        aria-label=\"Panel height\"\n                        [attr.aria-valuemin]=\"panelBounds.min\"\n                        [attr.aria-valuemax]=\"panelBounds.max\"\n                        [attr.aria-valuenow]=\"layout.panelHeight()\"\n                        [value]=\"layout.panelHeight()\"\n                        (valueChange)=\"layout.setPanelHeight($event)\"></div>\n                    <div class=\"prism-main__panel\">\n                        <prism-panel-host />\n                    </div>\n                }\n            } @else if (navigationService.activeTarget() === 'service' || navigationService.activeTarget() === 'pipe') {\n                <prism-component-head>\n                    <prism-view-tab-bar headEnd />\n                </prism-component-head>\n                <prism-view-panel-host class=\"prism-main__canvas\" />\n            } @else if (navigationService.activePage()) {\n                <prism-page-renderer class=\"prism-main__canvas\" />\n            } @else {\n                <div class=\"prism-shell__empty\">\n                    <span\n                        class=\"prism-shell__empty-mark\"\n                        aria-hidden=\"true\">\n                        <prism-logo [size]=\"54\" />\n                    </span>\n                    <p class=\"prism-shell__empty-text\">Select a component</p>\n                    <p class=\"prism-shell__empty-hint\"> from the sidebar to preview it here </p>\n                </div>\n            }\n        </main>\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    height: 100%;\n}\n\n.prism-shell {\n    display: grid;\n    grid-template-rows: var(--band-header) 1fr;\n\n    /* Declared for its minimum, not for its size. An implicit grid track is\n     auto, and an auto track's minimum is the min-content width of what sits\n     in it -- here the whole body, sidebar and resizer and main together. The\n     track therefore grows to whatever the widest panel demands and the\n     overflow: hidden below clips the remainder, instead of the viewport ever\n     getting a chance to reflow. Measured at a 500px viewport the track stood\n     at 763px and held the canvas at 415px however far the window was dragged\n     in, so responsive behaviour inside a showcased component was impossible\n     to reach.\n     The rows stay bare because min-height: 0 is already spelled out on every\n     level below them. The inline axis had no such counterpart anywhere, and\n     the levels below zero their own minimum through overflow: hidden, which\n     is why this one track is the only place that needs saying. */\n    grid-template-columns: minmax(0, 1fr);\n    height: 100vh;\n    overflow: hidden;\n    font-family: var(--font-sans, var(--prism-font-sans));\n    color: var(--prism-text);\n    background: var(--prism-void);\n}\n\n/* The resizer takes no width of its own: it overlays the sidebar's edge. */\n.prism-body {\n    display: grid;\n    grid-template-columns: var(--sw, 280px) 0 1fr;\n    min-height: 0;\n}\n\n.prism-body--no-sidebar {\n    grid-template-columns: 1fr;\n}\n\n.prism-sidebar-wrap {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg);\n    border-right: 1px solid var(--prism-border);\n}\n\n.prism-sidebar-wrap prism-sidebar {\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-sidebar-foot {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 10px 14px;\n    font-size: 11px;\n    color: var(--prism-text-muted);\n    border-top: 1px solid var(--prism-border);\n}\n\n.prism-sidebar-foot__link {\n    color: var(--prism-text-muted);\n    text-decoration: none;\n    transition: color var(--dur-fast);\n}\n\n.prism-sidebar-foot__link:hover {\n    color: var(--prism-text);\n}\n\n/* Resize grips: a visible handle at rest, an 8 px hit zone around a zero-width\n   edge, and a 2 px primary line while hovered, dragged or focused. */\n.prism-resizer-col,\n.prism-resizer-row {\n    position: relative;\n    z-index: 5;\n    outline: none;\n}\n\n.prism-resizer-col::before,\n.prism-resizer-row::before {\n    position: absolute;\n    content: '';\n}\n\n.prism-resizer-col::before {\n    inset: 0 -4px;\n}\n\n.prism-resizer-row::before {\n    inset: -4px 0;\n}\n\n.prism-resizer-col::after,\n.prism-resizer-row::after {\n    position: absolute;\n    pointer-events: none;\n    content: '';\n    transition:\n        background var(--dur-fast) var(--ease-default),\n        inset var(--dur-fast) var(--ease-default);\n}\n\n/* Sidebar edge: a 3 \u00D7 28 px pill. */\n.prism-resizer-col::after {\n    inset: calc(50% - 14px) -1.5px;\n    background: var(--prism-border-strong);\n    border-radius: 2px;\n}\n\n.prism-resizer-col:hover::after,\n.prism-resizer-col.active::after,\n.prism-resizer-col:focus-visible::after {\n    inset: 0 -1px;\n    background: var(--prism-primary);\n    border-radius: 0;\n}\n\n.prism-main {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-void);\n}\n\n.prism-resizer-row {\n    flex-shrink: 0;\n    height: 0;\n}\n\n/* Panel divider: three dots. */\n.prism-resizer-row::after {\n    inset: -1.5px calc(50% - 9px);\n    background: radial-gradient(circle, var(--prism-border-strong) 1.5px, transparent 1.6px) 0 0 / 6px 3px repeat-x;\n}\n\n.prism-resizer-row:hover::after,\n.prism-resizer-row.active::after,\n.prism-resizer-row:focus-visible::after {\n    inset: -1px 0;\n    background: var(--prism-primary);\n}\n\n/* One row, not two: the canvas tools no longer occupy a band above the\n   stage, they float over it from a rail absolutely positioned against\n   this element. The position: relative below is what anchors it. */\n.prism-canvas-wrap {\n    /* Overlay colours on the canvas. These defaults follow the theme; the\n       shell overrides them inline on the two absolute grounds. */\n    --prism-canvas-overlay-bg: var(--prism-bg-elevated);\n    --prism-canvas-overlay-fg: var(--prism-text);\n    --prism-canvas-overlay-muted: var(--prism-text-2);\n    --prism-canvas-overlay-border: var(--prism-border-strong);\n    --prism-canvas-overlay-primary: var(--prism-primary);\n    --prism-canvas-overlay-active: var(--prism-primary-bg);\n\n    position: relative;\n    display: grid;\n    flex: 1;\n    grid-template-rows: minmax(0, 1fr);\n    min-height: 0;\n    overflow: hidden;\n    background: var(--prism-bg-surface);\n}\n\n.prism-main__canvas {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n}\n\n.prism-main__panel {\n    flex-shrink: 0;\n    height: var(--ph, 300px);\n    min-height: 0;\n    overflow: hidden;\n}\n\n.prism-shell__empty {\n    display: flex;\n    flex-direction: column;\n    grid-row: 1 / -1;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n}\n\n/* The mark in its own refracted light: the one large brand moment in the app. */\n.prism-shell__empty-mark {\n    position: relative;\n    display: grid;\n    place-items: center;\n    margin-bottom: 12px;\n    isolation: isolate;\n}\n\n.prism-shell__empty-mark::before {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    z-index: -1;\n    width: 340px;\n    height: 200px;\n    pointer-events: none;\n    content: '';\n    background: var(--prism-brand-glow);\n    filter: blur(18px);\n    transform: translate(-50%, -50%);\n}\n\n.prism-shell__empty-text {\n    margin: 0;\n    font-size: var(--fs-xl);\n    font-weight: 500;\n    color: var(--prism-text);\n}\n\n.prism-shell__empty-hint {\n    margin: 0;\n    font-size: var(--fs-lg);\n    color: var(--prism-text-muted);\n}\n"] }]
     }], () => [], { onKeyDown: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismShellComponent, { className: "PrismShellComponent", filePath: "app/shell/prism-shell.component.ts", lineNumber: 47 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismShellComponent, { className: "PrismShellComponent", filePath: "app/shell/prism-shell.component.ts", lineNumber: 52 }); })();

package/dist/app/shell/should-select-first.d.ts

@@ -0,0 +1,17 @@
+import type { StyleguidePage } from '../../plugin/page.types.js';
+import type { RuntimePipe } from '../../plugin/pipe.types.js';
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import type { RuntimeService } from '../../plugin/service.types.js';
+import type { NavigationItem } from '../services/navigation-item.types.js';
+/**
+ * Whether the selection points at something the manifest no longer holds.
+ *
+ * `activeItem` is what was selected; the four `active*` values are that item
+ * re-linked against the current manifest, and only the one matching its kind can
+ * be non-null. All four being `null` while an item is set means it vanished
+ * (a rebuild dropped it), so the shell falls back to the first entry. Every
+ * kind has to be named here: a kind left out would look vanished the moment it
+ * is selected, and the shell would bounce straight back to the first entry.
+ */
+export declare function shouldSelectFirst(item: NavigationItem | null, component: RuntimeComponent | null, service: RuntimeService | null, pipe: RuntimePipe | null, page: StyleguidePage | null): boolean;
+//# sourceMappingURL=should-select-first.d.ts.map

package/dist/app/shell/should-select-first.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"should-select-first.d.ts","sourceRoot":"","sources":["../../../src/app/shell/should-select-first.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE3E;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAC7B,IAAI,EAAE,cAAc,GAAG,IAAI,EAC3B,SAAS,EAAE,gBAAgB,GAAG,IAAI,EAClC,OAAO,EAAE,cAAc,GAAG,IAAI,EAC9B,IAAI,EAAE,WAAW,GAAG,IAAI,EACxB,IAAI,EAAE,cAAc,GAAG,IAAI,GAC5B,OAAO,CAET"}

package/dist/app/shell/should-select-first.js

@@ -0,0 +1,13 @@
+/**
+ * Whether the selection points at something the manifest no longer holds.
+ *
+ * `activeItem` is what was selected; the four `active*` values are that item
+ * re-linked against the current manifest, and only the one matching its kind can
+ * be non-null. All four being `null` while an item is set means it vanished
+ * (a rebuild dropped it), so the shell falls back to the first entry. Every
+ * kind has to be named here: a kind left out would look vanished the moment it
+ * is selected, and the shell would bounce straight back to the first entry.
+ */
+export function shouldSelectFirst(item, component, service, pipe, page) {
+    return item !== null && component === null && service === null && pipe === null && page === null;
+}

package/dist/app/sidebar/navigation-decorations.d.ts

@@ -65,6 +65,28 @@ export declare function rollupCategory(decorations: readonly (ItemDecorations |
  * finding. At 11px the previous pair (cube vs dashed square) was effectively
  * one glyph, so `wip` now uses a shape that differs in silhouette rather than
  * in stroke style.
+ *
+ * `idle` is the glyph of everything that is not work in progress: the box of a
+ * component by default, another one for another kind of item (the plug of a
+ * service). The dashed circle is shared, so work in progress reads the same
+ * for every kind.
+ */
+export declare function lifecycleIcon(status: ComponentStatus | undefined, idle?: string): string;
+/** What a category head shows on the right: its size and, if any, a problem chip. */
+export interface CategoryCount {
+    total: string;
+    chip: {
+        text: string;
+        tone: 'warn' | 'danger';
+    } | null;
+    title: string | null;
+}
+/**
+ * The category head's count: the number of entries, plus a chip with the
+ * number that need review in the worst tone among them. Replaces "2/4", which
+ * read as a fraction of progress rather than as a count of problems.
  */
-export declare function lifecycleIcon(status: ComponentStatus | undefined): string;
+export declare function categoryCount(rollup: CategoryRollup, total: number): CategoryCount;
+/** The logo facet a section's icon is coloured in; `null` keeps the primary colour. */
+export declare function sectionFacet(name: string): 'cyan' | 'blue' | 'violet' | 'magenta' | null;
 //# sourceMappingURL=navigation-decorations.d.ts.map

package/dist/app/sidebar/navigation-decorations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-decorations.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/navigation-decorations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE3E,qEAAqE;AACrE,MAAM,WAAW,QAAQ;IACrB;;;;;OAKG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC5B,wEAAwE;IACxE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC3B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;CACrC;AAID;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,EAAE,SAAS,8BAA8B,EAAE,EAClD,WAAW,EAAE,SAAS,8BAA8B,EAAE,GACvD,8BAA8B,EAAE,CAWlC;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,8BAA8B,EAAE,GAAG,eAAe,GAAG,IAAI,CA0B1H;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,GAAG,cAAc,CAa/F;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,MAAM,CAEzE"}
+{"version":3,"file":"navigation-decorations.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/navigation-decorations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE3E,qEAAqE;AACrE,MAAM,WAAW,QAAQ;IACrB;;;;;OAKG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC5B,wEAAwE;IACxE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC3B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;CACrC;AAID;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,EAAE,SAAS,8BAA8B,EAAE,EAClD,WAAW,EAAE,SAAS,8BAA8B,EAAE,GACvD,8BAA8B,EAAE,CAWlC;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,8BAA8B,EAAE,GAAG,eAAe,GAAG,IAAI,CA0B1H;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,GAAG,cAAc,CAa/F;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,EAAE,IAAI,SAAQ,GAAG,MAAM,CAEvF;AAED,qFAAqF;AACrF,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;IACvD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,GAAG,aAAa,CAWlF;AASD,uFAAuF;AACvF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,IAAI,CAExF"}

package/dist/app/sidebar/navigation-decorations.js

@@ -81,7 +81,38 @@ export function rollupCategory(decorations) {
  * finding. At 11px the previous pair (cube vs dashed square) was effectively
  * one glyph, so `wip` now uses a shape that differs in silhouette rather than
  * in stroke style.
+ *
+ * `idle` is the glyph of everything that is not work in progress: the box of a
+ * component by default, another one for another kind of item (the plug of a
+ * service). The dashed circle is shared, so work in progress reads the same
+ * for every kind.
+ */
+export function lifecycleIcon(status, idle = 'box') {
+    return status === 'wip' ? 'circle-dashed' : idle;
+}
+/**
+ * The category head's count: the number of entries, plus a chip with the
+ * number that need review in the worst tone among them. Replaces "2/4", which
+ * read as a fraction of progress rather than as a count of problems.
  */
-export function lifecycleIcon(status) {
-    return status === 'wip' ? 'circle-dashed' : 'box';
+export function categoryCount(rollup, total) {
+    if (rollup.problems === 0 || rollup.variant === null) {
+        return { total: String(total), chip: null, title: null };
+    }
+    const verb = rollup.problems === 1 ? 'entry needs' : 'entries need';
+    return {
+        total: String(total),
+        chip: { text: String(rollup.problems), tone: rollup.variant },
+        title: `${rollup.problems} of ${total} ${verb} review`
+    };
+}
+const SECTION_FACETS = {
+    Components: 'cyan',
+    Directives: 'violet',
+    Services: 'magenta',
+    Pipes: 'blue'
+};
+/** The logo facet a section's icon is coloured in; `null` keeps the primary colour. */
+export function sectionFacet(name) {
+    return SECTION_FACETS[name] ?? null;
 }

package/dist/app/sidebar/prism-sidebar.component.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentStatus } from '../../decorator/showcase.types.js';
+import { itemKey } from '../services/navigation-item.js';
 import type { NavigationItem } from '../services/navigation-item.types.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismSearchService } from '../services/prism-search.service.js';
@@ -36,23 +37,12 @@ export declare class PrismSidebarComponent {
     }[]>;
     protected isCollapsed(key: string): boolean;
     protected toggleCollapse(key: string): void;
-    protected itemKey(item: NavigationItem): string;
+    protected readonly itemKey: typeof itemKey;
     protected itemLabel(item: NavigationItem): string;
     protected itemStatus(item: NavigationItem): ComponentStatus | undefined;
-    /**
-     * Accessible name for the roll-up pill, for the deviating case only. The
-     * pill otherwise renders a bare number distinguished only by colour. A
-     * screen reader would read the group head as "Feedback 3 12" with nothing
-     * naming what either number means, and a colour-blind reader can't tell
-     * them apart at all.
-     *
-     * There is no zero branch: a clean category renders its plain
-     * item count and the template leaves both attributes off, because
-     * `aria-label` on a descendant feeds the group button's name-from-content
-     * and "Buttons 0 components need review" is a claim about a group that has
-     * nothing to review.
-     */
-    protected rollupTooltip(rollup: CategoryRollup): string;
+    /** The category head's count and problem chip. A clean category shows only its size. */
+    protected countOf(rollup: CategoryRollup, total: number): import("./navigation-decorations.js").CategoryCount;
+    protected facet(sectionName: string): "cyan" | "blue" | "violet" | "magenta" | null;
     protected itemTooltip(item: NavigationItem, decorations: ItemDecorations | null): string | null;
     protected isActive(item: NavigationItem): boolean;
     protected onSelect(item: NavigationItem): void;

package/dist/app/sidebar/prism-sidebar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAEjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,KAAK,cAAc,EAAgB,KAAK,eAAe,EAA+D,MAAM,6BAA6B,CAAC;;AAcnK,UAAU,eAAe;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,UAAU,WAAW;IACjB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;CACvC;AAED,UAAU,iBAAiB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CAC1B;AAED,qBAQa,qBAAqB;IAC9B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0D;IAEtF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA4H;IAGxJ,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAS7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAe9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;SAqBjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAI/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAIjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAIvE;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM;IAMvD,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI;IAU/F,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAUjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,aAAa;yCApJZ,qBAAqB;2CAArB,qBAAqB;CA4JjC"}
+{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,EAAE,OAAO,EAAsB,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAEjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,OAAO,EAEH,KAAK,cAAc,EAEnB,KAAK,eAAe,EAKvB,MAAM,6BAA6B,CAAC;;AA8BrC,UAAU,eAAe;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,UAAU,WAAW;IACjB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;CACvC;AAED,UAAU,iBAAiB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CAC1B;AAED,qBAQa,qBAAqB;IAC9B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0D;IAEtF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA4H;IAGxJ,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAS7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAe9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;SAqBjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW3C,SAAS,CAAC,QAAQ,CAAC,OAAO,iBAAW;IAErC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAIjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAIvE,wFAAwF;IACxF,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM;IAIvD,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,MAAM;IAInC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI;IAU/F,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAMjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAiB9C,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,aAAa;yCA7IZ,qBAAqB;2CAArB,qBAAqB;CAqJjC"}