@ng-prism/core 22.2.0-beta.4 → 22.2.0

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

@@ -4,7 +4,6 @@ import { PrismThemeService } from '../services/prism-theme.service.js';
 import { PrismLayoutService } from '../services/prism-layout.service.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismPanelService } from '../services/prism-panel.service.js';
-import { PrismPluginService } from '../services/prism-plugin.service.js';
 import { PrismComponentHeadComponent } from '../component-head/prism-component-head.component.js';
 import { PrismVariantRibbonComponent } from '../variant-ribbon/prism-variant-ribbon.component.js';
 import { PrismHeaderComponent } from '../header/prism-header.component.js';
@@ -12,7 +11,6 @@ import { PrismPanelHostComponent } from '../panels/panel-host/prism-panel-host.c
 import { PrismRendererComponent } from '../renderer/prism-renderer.component.js';
 import { PrismSidebarComponent } from '../sidebar/prism-sidebar.component.js';
 import { PrismPageRendererComponent } from '../page-renderer/prism-page-renderer.component.js';
-import { BUILTIN_PANELS } from '../panels/builtin-panels.js';
 import { PrismUrlStateService } from '../services/prism-url-state.service.js';
 import { PrismPersistenceService } from '../services/prism-persistence.service.js';
 import { PrismViewTabBarComponent } from '../view-tab-bar/prism-view-tab-bar.component.js';
@@ -20,6 +18,7 @@ import { PrismViewPanelHostComponent } from '../view-tab-bar/prism-view-panel-ho
 import { PrismResizerDirective } from '../directives/prism-resizer.directive.js';
 import { PrismCanvasToolbarComponent } from '../canvas/prism-canvas-toolbar.component.js';
 import { PrismTemplatePopoverComponent } from '../canvas/prism-template-popover.component.js';
+import { nextViewId } from '../view-tab-bar/next-view-id.js';
 import * as i0 from "@angular/core";
 function PrismShellComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -38,28 +37,37 @@ function PrismShellComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(6);
     i0.ɵɵproperty("min", 200)("max", 360)("value", ctx_r1.layout.sidebarWidth());
 } }
-function PrismShellComponent_Conditional_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function PrismShellComponent_Conditional_5_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-view-tab-bar", 11);
 } }
-function PrismShellComponent_Conditional_5_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-component-head")(1, "prism-variant-ribbon");
+function PrismShellComponent_Conditional_5_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-variant-ribbon");
 } }
-function PrismShellComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PrismShellComponent_Conditional_5_Conditional_1_Conditional_0_Template, 2, 0);
-    i0.ɵɵelementStart(1, "div", 12);
-    i0.ɵɵelement(2, "prism-canvas-toolbar")(3, "prism-renderer")(4, "prism-template-popover");
+function PrismShellComponent_Conditional_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "prism-component-head");
+    i0.ɵɵconditionalCreate(1, PrismShellComponent_Conditional_5_Conditional_0_Conditional_1_Template, 1, 0, "prism-view-tab-bar", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, PrismShellComponent_Conditional_5_Conditional_0_Conditional_2_Template, 1, 0, "prism-variant-ribbon");
+    i0.ɵɵelementStart(3, "div", 12);
+    i0.ɵɵelement(4, "prism-canvas-toolbar")(5, "prism-renderer")(6, "prism-template-popover");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.layout.toolbarVisible() ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.viewPanels().length > 0 ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.layout.toolbarVisible() ? 2 : -1);
 } }
-function PrismShellComponent_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-view-panel-host", 4);
+function PrismShellComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    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_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function PrismShellComponent_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵlistener("valueChange", function PrismShellComponent_Conditional_5_Conditional_3_Template_div_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.layout.setPanelHeight($event)); });
+    i0.ɵɵlistener("valueChange", function PrismShellComponent_Conditional_5_Conditional_2_Template_div_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.layout.setPanelHeight($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 14);
     i0.ɵɵelement(2, "prism-panel-host");
@@ -69,16 +77,13 @@ function PrismShellComponent_Conditional_5_Conditional_3_Template(rf, ctx) { if
     i0.ɵɵproperty("min", 200)("max", 560)("value", ctx_r1.layout.panelHeight());
 } }
 function PrismShellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PrismShellComponent_Conditional_5_Conditional_0_Template, 1, 0, "prism-view-tab-bar", 11);
-    i0.ɵɵconditionalCreate(1, PrismShellComponent_Conditional_5_Conditional_1_Template, 5, 1)(2, PrismShellComponent_Conditional_5_Conditional_2_Template, 1, 0, "prism-view-panel-host", 4);
-    i0.ɵɵconditionalCreate(3, PrismShellComponent_Conditional_5_Conditional_3_Template, 3, 3);
+    i0.ɵɵconditionalCreate(0, PrismShellComponent_Conditional_5_Conditional_0_Template, 7, 2)(1, PrismShellComponent_Conditional_5_Conditional_1_Template, 3, 0);
+    i0.ɵɵconditionalCreate(2, PrismShellComponent_Conditional_5_Conditional_2_Template, 3, 3);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.viewPanels().length > 0 ? 0 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.panelService.activeViewId() === "renderer" ? 1 : 2);
+    i0.ɵɵconditional(ctx_r1.panelService.activeViewId() === "renderer" ? 0 : 1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.showPanel() ? 3 : -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);
@@ -103,14 +108,9 @@ export class PrismShellComponent {
     themeService = inject(PrismThemeService);
     layout = inject(PrismLayoutService);
     panelService = inject(PrismPanelService);
-    pluginService = inject(PrismPluginService);
     urlStateService = inject(PrismUrlStateService);
     persistenceService = inject(PrismPersistenceService);
-    viewPanels = computed(() => [
-        ...BUILTIN_PANELS.filter((p) => p.placement === 'view'),
-        ...this.pluginService.viewPanels(),
-    ], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewPanels" }] : /* istanbul ignore next */ []));
+    viewPanels = this.panelService.visibleViewPanels;
     showPanel = computed(() => this.layout.addonsVisible() &&
         this.panelService.activeViewId() === 'renderer' &&
         !this.navigationService.activePage(), /* @ts-ignore */
@@ -125,18 +125,18 @@ export class PrismShellComponent {
         this.navigationService.selectFirst();
         this.urlStateService.init();
         this.persistenceService.init();
-        let lastItemKey = null;
+        // A view survives a component switch as long as the new component still
+        // offers it — browsing a library variant-sheet by variant-sheet was
+        // impossible while every navigation dropped back to the Playground. The
+        // 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(() => {
-            const item = this.navigationService.activeItem();
-            const key = item
-                ? item.kind === 'component'
-                    ? item.data.meta.className
-                    : item.data.title
-                : null;
-            if (lastItemKey !== null && lastItemKey !== key) {
-                untracked(() => this.panelService.activeViewId.set('renderer'));
+            const next = nextViewId(this.panelService.activeViewId(), this.panelService.visibleViewPanels());
+            if (next !== null) {
+                untracked(() => this.panelService.activeViewId.set(next));
             }
-            lastItemKey = key;
         });
         effect(() => {
             const item = this.navigationService.activeItem();
@@ -155,6 +155,9 @@ export class PrismShellComponent {
                 e.preventDefault();
                 this.layout.toggleSidebar();
                 break;
+            // Alt+T toggles the variant rail only. It used to hide the component
+            // head as well, but the head now carries the Playground/API switcher and
+            // hiding it would take primary navigation with it.
             case 'KeyT':
                 e.preventDefault();
                 this.layout.toggleToolbar();
@@ -168,13 +171,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://dyingangel666.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"], [1, "prism-main__view-bar"], [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: 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,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAMAAAA0hKKwAAAC7lBMVEUAAADFkfu6Dn9fLlcmNclKI0WFKFAnRr9XJ09tUI3jTZDxU5vxUJvIQ30wYuRNIMFoF7qBEq61g7y0N2+SL1ljQnL8vO5dUqqhNGPps/coVdQ4K8iUEKCkEJm1O3GKaL2JXpzTmePcS4zCitkoQdeVgfK4ie7hqeGde9p7bNTRR4PQRYRqYMawjPe/SHyBX7D4WJ75WaD6W6H4Vp37XKL9y/UlMtbDEoR90f39uvndn/v5U5rYm/vMlPsrTPJLI8z/YbNWH8f6tfr+0PjxrPvqqPu8jPs1K9QxY/zko/tFJc5RIcnTmfuuifv/1PkmNdz0r/olM9hoGcDopPurh/swXPotUfVzF7rCj/ukhvv9zfb9wv+XgvvuqfovVvgrRO7/5/60i/zhofunhvv6WJ6B0f2ghPvQlvttGL2/Eoa3i/soPeYnOuA8KdJfHMNjG8F8FbX/4P6yiPuSgfsxYPv3sfq2EYpAJ9BaHcX8Vpy7EYf+x/R3FbiIFLD/X62YE6W5jPychPz+tvb7Yab4Qo/+2P/IkvsvLtaCFLOPE6vIk/v9W6C4BH2Vzv2/jvv+XqOtEY/JEYWH0P28xf2fEpb//f//7v81af+myf2Mf/ykE6P6SpWmEJIkYP3/ZaP/zf+N0P1my/2dyv3/Wqf6uP8UM/D9ZaixD4vBDoGwxv3Mv/v6rvYIIOv/aLiVEZnN9f/+vP9y2P6bj/0bVvun3//1tP+ymv/I2v54zP16gvssRvZTIcSKFaTTn/+ml/9p4P7bzP7ilvvNhPtqcvn9qNqNFJ652/7AfPzYjPvy3fr8gsL6crPRJoq7/v+A3f7GmP6oi/6grv3ZtfxTbfskOvE3NeY0Ltn9l8xNDamAGKfmQJOTAISlAIGh9P+P7P/Fof/uzf6Kx/3e2/xGTvHjvud1HK6Nuf5Dav1lILi0MZvbM5B9AI+W2v62iNaPcdLXk824YLmbRbUxB7RqHq9mBJ9zAJjMHIWLjP9HRO0lFtDFY56wAAAAMHRSTlMA/qAgpAY5rxNM3e/9sqKhoZ+bgFYq/Htp+Kihnp6TkV3W08Oh7enSxsO/t6X2nnNWmYchAAAJcElEQVRo3rTSv4vaYBwG8IDc0btrF1uP3nLVOhRaKEnMonEQTQbhECFbQyBIwNnBwcXBmsnBqS4OGS44eAhZ3BW63HVz6Xp/Sr/PmwRxbHzfB3+MH573+0j/nVxOEp/rL5LwXL74BUl0rhuB8CofG/OJW5SE5uLtbFUNbi8kkfm+0VeTaJCXBCY3Xo20iW0HbyRxebeZjX5O7KovsMplY66OVoTYgbgZf26oc9akKm7GHzYzbc6aVKPBlSQkFzdjVYubUJU7MTO+pyKaliBCbo/5ztUjQrfPcScwX09LEVFVMF9trmneKkEi7jPGfFmRI9IMSpwJzJcuQh+dngtEsxn6mDHf+aLI8SZQbM4zvsfVTxGKnxcwXyR9LsowtHnO+NvGA5LcJCIAxrAblLnOV1aYoii69mTHBiFDu8BvvmNPVeMqKiFRanQdu8RvviMgbMIqPVdIBoiuYRh2kdt8ZYW9lsqQpzDuAcMJOc34vuF5DKEyCkNAwHAcxwrynOarUNCEjATpUmCYpjHkMeOvjQoMIFCAdOO3gmG1ozKP+c5wEQpDsK4tesQGKWZ0xWG+spcguIlCTYCgCAjLaoels+fLrh7v9xRhjwWkHZ0745txRSEFDIuiq4QYSREQvZ7RO894T0VAHDP96zvxepkBpBZ9Om++MzlF6Bd3X3Z+GU76WChCiLUtnD1fpihpkcUisFgREMyo1bblc+brebIMAwj+p3/cwevCthzz+FhImH3G1+MKMwAQI8vy8nYxuHteWNapUTdK2ec7Sg18KdOXRWvwenDt/alRr4fFrPN9rMishBJH1fWWC2TnGiSkRh0x+1nnq1c8GCoo6kRXdzudwe5wePb3MEAkSN/IZ5rv44yKKACSLFe+3+q4u/V67W73MFLi4aFfNwtZ5jumIkDSyNPf7o9OiyE7v9c7EkjfLGeZ77/K7DwoxjCOA7h1TJpxjiPn8AeGwShr1Vht0+wgmrbJlA47uxal5NpqXIvaoRS5YlNRQ83qmKamQ3dRKbkqFEVE5L5v//n9nufZ991VVvud7PCPz/ye3/d9vGoXVosptL5qmVQmVV8+mZV1smt1A2cgAVlibXl904SmiNhWEymSymRrik9iri1ZbGw4OjqunWF5fcVgYJiBWxf5ESQTjMziJ9UcAQZmyVTL64uDIEIflTP7pTIDkglIQtfFBmowIiqqUmB5fW1ZGHJFLfLz8wOkPiETU9hVDQI3x6GoqKi1Ft3GgxccFsIkfHDrIhFMAu2qT03ApNaPbzA2Dh2KcqwcbAEyFAbhDHwOhWfGqjU8QpgjxdWOeFbUgAh81s606Pblto4fMMh1HIQhT1Np3l2udqQETAGEj8BnubUlt6/Qjg5heNalMhwEFx9f+PQIzbnCOzXEgAgEAh9IZZ9rPA6eQyGbgyrwrIPBFg8IS2NCAzkpNJA4enTponkW1Zc3Fpy5ESklp0WOq7DkHEtcY1YDEFECzljaJBhkUX3tGIJbj9QYI3FxcUDAp8O7DTUwBQQNRCIqp/SpvuuPEYO7U2Dra0CgiFQaX1ji7x/HkpfQYCSAEeHTNKCP9bWjCI3YThNpgpz35+LQ2FnDE4ioKmf2ob77cOuosDtrwYH7ajwsVmFR/CNAHAxK3lNAeCJi48aISus+1Zd/CgHBrXOGn0wXn/v4fIm/gyGXbtdQYuPSiI0QVUjTjD7U19b0WRfDs84MkSZel/Xs2UlgOCQvr6gGh0ABDVWIqtLmv/Vlly+rMGydOyyNWtf14cvvbH1o8a1Gjrn0ogYI3nBzi5g76H/1ZTPQC2W+eL4okiOufWj7Ul7uFJzdml98Kw8YqlRdRUMFCQkBw82zc4r52zdNuB5HIV/Gz7pGprv2/lVbW7mza/mK1pbsXzyT5w8LQQPHQMNTpTJX49nkOWQIxLB1jUine9/d1vZqi7Ozq5OrU6tSn/3sdu6j8yV091cRYGNA1jXNNPvywNpLzwtfUNQaPw3s+/nnb9++ft2609nV1dXJaUVrGTC10ABk8hwirlICDUSaO63N1BcN/toiN7xGswaI79/bu7tfbdkJk4CxYkerUqnM1lPG/9ILRNwwIEB8VdPN3b4EIAwe1gKpbKxa9/zT27cV7e3dgVsNyI7Nm+8pkWkprYei4e7JPnAKggR0/qPGg2zh9qUEYYSwdTXs+1PO27q6ior2wJVbt2zhkGWgUCYXGlACg3giggKmuXmQmduXzkGkAxfW6OI/nnqYk1NXV9fuvRIQbpJlyw66KyVKpaSFNAAOzJPsAw1MQNGUXusL777C9QSgg+D/3D6+fvjwFCIV3oGBiOzkkYUeyjJQJPrsu8Dkh7B1ECIgoLlogPmXByH5OHPlORKnAMkBgyLORsjChcESEr2+NjXXJwAVFDBabdGsXm9fzhDC17GUIa87Os6eBQQNb++eiAcoZRIlKKv0+tKiJpUvIoTAVFn3Ul86CPwC43DKkJvpHenHAYFU7PHe4x1oupODMAlkExCoSPSK0iKBm68BkcvlVdN71hcMAJABQvhme0d6+nGKVGzbsweQnseFs7gDAMgqYLxKm5d6IiGnKbL5a+vCNDDYKCm2b4I6tm8nCCRm2zZQjCZZwRASWD9TFJKCsFpfFY5BEqrNH/zXN87EaOAYKSkP7GN3794NCkHCo6OjjZBy452gwSkKhaKgIKxU5aYlBKRqTo/6GvZ9MzY2iCEQMMwjHh7uoCAC8SoouJvoto4h8vwxf9WXLgOJjCAeCd+7d280HJc3j5geFxju7sGrMIh4eRUkA6MNxSRWzTK9fSF2KXZvMmIz7O2DQNkOSSeGKeLaC7IJFAUqiISFARO6To5IIqkxX19YxjFYBhBGSHhMTAxD/r14d4OiYEhYcoFLrdYXjMT86Ub1FeO+f8TGgsAQVJJiEIk2N4kHRTZtAoVDXFySk1+WarWo2HA/NBYfPkaWYU+DBihJ4eHhxpNs7Q0hxwUBxQsQplAmQJ4YGjrYUN8UISN4JAgNRMwunkeCg0HhEWSgAQGJ+XPoy8OFww9g32DwCDBJSX2YxINHIBLOoIHVyLX5A8hP3egyTBD73Wc5xGy7TBClhDfYMKdr8TYenXYzNuOEaexP2B9PwjAkmkOcAaH/+t67584Cf3tLsLIMo1S4uJw2istpWM1Pm36j+veWyZhJmJE0I2iG00zEDORjNW2glZXVtGnTBg6cYGU1YRgE/gy/mWA1bMIwmz/QGVRJ3BG6bAAAAABJRU5ErkJggg==", 1, "prism-sidebar-foot__logo"], ["href", "https://dyingangel666.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) {
             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.ɵɵelementStart(4, "main", 3);
-            i0.ɵɵconditionalCreate(5, PrismShellComponent_Conditional_5_Template, 4, 3)(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, 1, 0, "prism-page-renderer", 4)(7, PrismShellComponent_Conditional_7_Template, 8, 0, "div", 5);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵstyleMap(ctx.shellStyle());
@@ -183,7 +186,7 @@ export class PrismShellComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.layout.sidebarVisible() ? 3 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵstyleProp("--ph", ctx.showPanel() ? ctx.layout.panelHeight() : 0, "px");
+            i0.ɵɵstyleProp("--%NS%ph", ctx.showPanel() ? ctx.layout.panelHeight() : 0, "px");
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.navigationService.activeComponent() ? 5 : ctx.navigationService.activePage() ? 6 : 7);
         } }, dependencies: [PrismHeaderComponent,
@@ -197,7 +200,7 @@ export class PrismShellComponent {
             PrismViewPanelHostComponent,
             PrismResizerDirective,
             PrismCanvasToolbarComponent,
-            PrismTemplatePopoverComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n    .prism-shell[_ngcontent-%COMP%] {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: 52px 1fr;\n      background: var(--prism-void);\n      font-family: var(--font-sans, var(--prism-font-sans));\n      color: var(--prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: var(--sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar[_ngcontent-%COMP%] {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap[_ngcontent-%COMP%] {\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\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      border-top: 1px solid var(--prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo[_ngcontent-%COMP%] {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--dur-fast);\n    }\n    .prism-sidebar-foot__link[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text-2);\n    }\n\n    .prism-resizer-col[_ngcontent-%COMP%] {\n      width: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-col[_ngcontent-%COMP%]:hover, \n   .prism-resizer-col.active[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n    }\n\n    .prism-main[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      background: var(--prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-row[_ngcontent-%COMP%]:hover, \n   .prism-resizer-row.active[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n    }\n\n    .prism-canvas-wrap[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: auto minmax(0, 1fr);\n      background: var(--prism-bg-surface);\n      overflow: hidden;\n      position: relative;\n    }\n    .prism-main__view-bar[_ngcontent-%COMP%] { flex-shrink: 0; }\n    .prism-main__canvas[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel[_ngcontent-%COMP%] {\n      height: var(--ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      color: var(--prism-text-ghost);\n      margin-bottom: 8px;\n    }\n    .prism-shell__empty-text[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--fs-xl);\n      font-weight: 500;\n      color: var(--prism-text-muted);\n    }\n    .prism-shell__empty-hint[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-ghost);\n    }"] });
+            PrismTemplatePopoverComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n    .prism-shell[_ngcontent-%COMP%] {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: var(--%NS%band-header) 1fr;\n      background: var(--%NS%prism-void);\n      font-family: var(--%NS%font-sans, var(--%NS%prism-font-sans));\n      color: var(--%NS%prism-text);\n      overflow: hidden;\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    .prism-body--no-sidebar[_ngcontent-%COMP%] {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-bg);\n      border-right: 1px solid var(--%NS%prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\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      border-top: 1px solid var(--%NS%prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--%NS%prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo[_ngcontent-%COMP%] {\n      width: 16px;\n      flex-shrink: 0;\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    .prism-sidebar-foot__link[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-text-2);\n    }\n\n    .prism-resizer-col[_ngcontent-%COMP%] {\n      width: 4px;\n      background: transparent;\n      transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n      position: relative;\n      z-index: 5;\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      background: var(--%NS%prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--%NS%dur-fast) var(--%NS%ease-default);\n      position: relative;\n      z-index: 5;\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      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: minmax(0, 1fr);\n      background: var(--%NS%prism-bg-surface);\n      overflow: hidden;\n      position: relative;\n    }\n    .prism-main__canvas[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel[_ngcontent-%COMP%] {\n      height: var(--%NS%ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      color: var(--%NS%prism-text-ghost);\n      margin-bottom: 8px;\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    .prism-shell__empty-hint[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--%NS%fs-lg);\n      color: var(--%NS%prism-text-ghost);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismShellComponent, [{
         type: Component,
@@ -256,12 +259,14 @@ export class PrismShellComponent {
           class="prism-main"
           [style.--ph.px]="showPanel() ? layout.panelHeight() : 0"
         >
-          @if (navigationService.activeComponent()) { @if (viewPanels().length >
-          0) {
-          <prism-view-tab-bar class="prism-main__view-bar" />
-          } @if (panelService.activeViewId() === 'renderer') { @if
-          (layout.toolbarVisible()) {
-          <prism-component-head />
+          @if (navigationService.activeComponent()) { @if
+          (panelService.activeViewId() === 'renderer') {
+          <prism-component-head>
+            @if (viewPanels().length > 0) {
+            <prism-view-tab-bar headEnd />
+            }
+          </prism-component-head>
+          @if (layout.toolbarVisible()) {
           <prism-variant-ribbon />
           }
           <div class="prism-canvas-wrap">
@@ -270,6 +275,9 @@ export class PrismShellComponent {
             <prism-template-popover />
           </div>
           } @else {
+          <prism-component-head>
+            <prism-view-tab-bar headEnd />
+          </prism-component-head>
           <prism-view-panel-host class="prism-main__canvas" />
           } @if (showPanel()) {
           <div
@@ -309,9 +317,9 @@ export class PrismShellComponent {
         </main>
       </div>
     </div>
-  `, styles: ["\n    :host { display: block; height: 100%; }\n\n    .prism-shell {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: 52px 1fr;\n      background: var(--prism-void);\n      font-family: var(--font-sans, var(--prism-font-sans));\n      color: var(--prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body {\n      display: grid;\n      grid-template-columns: var(--sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap {\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .prism-sidebar-wrap prism-sidebar {\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-sidebar-foot {\n      border-top: 1px solid var(--prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link {\n      color: var(--prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--dur-fast);\n    }\n    .prism-sidebar-foot__link:hover {\n      color: var(--prism-text-2);\n    }\n\n    .prism-resizer-col {\n      width: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\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      background: var(--prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\n    }\n    .prism-resizer-row:hover,\n    .prism-resizer-row.active {\n      background: var(--prism-primary);\n    }\n\n    .prism-canvas-wrap {\n      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: auto minmax(0, 1fr);\n      background: var(--prism-bg-surface);\n      overflow: hidden;\n      position: relative;\n    }\n    .prism-main__view-bar { flex-shrink: 0; }\n    .prism-main__canvas { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel {\n      height: var(--ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon {\n      width: 48px;\n      height: 48px;\n      color: var(--prism-text-ghost);\n      margin-bottom: 8px;\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    .prism-shell__empty-hint {\n      margin: 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-ghost);\n    }\n  "] }]
+  `, styles: ["\n    :host { display: block; height: 100%; }\n\n    .prism-shell {\n      height: 100vh;\n      display: grid;\n      grid-template-rows: var(--band-header) 1fr;\n      background: var(--prism-void);\n      font-family: var(--font-sans, var(--prism-font-sans));\n      color: var(--prism-text);\n      overflow: hidden;\n    }\n\n    .prism-body {\n      display: grid;\n      grid-template-columns: var(--sw, 264px) 4px 1fr;\n      min-height: 0;\n    }\n    .prism-body--no-sidebar {\n      grid-template-columns: 1fr;\n    }\n\n    .prism-sidebar-wrap {\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .prism-sidebar-wrap prism-sidebar {\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-sidebar-foot {\n      border-top: 1px solid var(--prism-border);\n      padding: 10px 14px;\n      font-size: 11px;\n      color: var(--prism-text-ghost);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .prism-sidebar-foot__logo {\n      width: 16px;\n      flex-shrink: 0;\n    }\n    .prism-sidebar-foot__link {\n      color: var(--prism-text-ghost);\n      text-decoration: none;\n      transition: color var(--dur-fast);\n    }\n    .prism-sidebar-foot__link:hover {\n      color: var(--prism-text-2);\n    }\n\n    .prism-resizer-col {\n      width: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\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      background: var(--prism-void);\n      overflow: hidden;\n    }\n\n    .prism-resizer-row {\n      flex-shrink: 0;\n      height: 4px;\n      background: transparent;\n      transition: background var(--dur-fast) var(--ease-default);\n      position: relative;\n      z-index: 5;\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      flex: 1;\n      min-height: 0;\n      display: grid;\n      grid-template-rows: minmax(0, 1fr);\n      background: var(--prism-bg-surface);\n      overflow: hidden;\n      position: relative;\n    }\n    .prism-main__canvas { flex: 1; min-height: 0; overflow: auto; }\n\n    .prism-main__panel {\n      height: var(--ph, 260px);\n      flex-shrink: 0;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .prism-shell__empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      grid-row: 1 / -1;\n    }\n    .prism-shell__empty-icon {\n      width: 48px;\n      height: 48px;\n      color: var(--prism-text-ghost);\n      margin-bottom: 8px;\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    .prism-shell__empty-hint {\n      margin: 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-ghost);\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: 284 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismShellComponent, { className: "PrismShellComponent", filePath: "app/shell/prism-shell.component.ts", lineNumber: 290 }); })();

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

@@ -0,0 +1,70 @@
+import type { ComponentStatus } from '../../decorator/showcase.types.js';
+import type { NavigationDecorationDefinition } from '../../plugin/plugin.types.js';
+import type { NavigationItem } from '../services/navigation-item.types.js';
+/** One source's verdict on one component, resolved for rendering. */
+export interface ItemMark {
+    /**
+     * The definition's id. `resolveNavigationDecorations` guarantees these are
+     * unique, so this is the only field safe to `@for track` by — `icon` is a
+     * free-form string on a public extension point and two sources can pick the
+     * same one.
+     */
+    id: string;
+    icon: string;
+    variant: 'warn' | 'danger';
+    label: string;
+}
+export interface ItemDecorations {
+    /** Ordered marks — never empty; `decorateItem` returns null instead. */
+    marks: ItemMark[];
+    /** Worst variant across `marks`. Drives the group roll-up. */
+    worst: 'warn' | 'danger';
+    /** Newline-joined labels for the item's `title` attribute. */
+    tooltip: string;
+}
+export interface CategoryRollup {
+    /** Number of items in the category carrying at least one mark. */
+    problems: number;
+    /** Worst variant among them, or null for a clean category. */
+    variant: 'warn' | 'danger' | null;
+}
+/**
+ * Built-ins first, then plugin contributions, de-duplicated by id and sorted
+ * by `order`.
+ *
+ * Built-ins win a collision: a plugin must not be able to silence or restyle a
+ * core source by claiming its id. Sorting is by `order` alone — the reading
+ * contract says position names the source, so registration order must not leak
+ * into the result.
+ */
+export declare function resolveNavigationDecorations(builtin: readonly NavigationDecorationDefinition[], fromPlugins: readonly NavigationDecorationDefinition[]): NavigationDecorationDefinition[];
+/**
+ * Runs every definition against one item.
+ *
+ * Returns `null` rather than an empty result for a clean component, so callers
+ * cannot accidentally render an empty marker container.
+ */
+export declare function decorateItem(item: NavigationItem, defs: readonly NavigationDecorationDefinition[]): ItemDecorations | null;
+/**
+ * Counts the items in one category that carry at least one mark.
+ *
+ * Items, not marks: a component with three findings is one thing to look at,
+ * and a group head reading "3" for a single broken component would overstate
+ * the work.
+ *
+ * Takes each item's already-resolved `ItemDecorations` rather than the raw
+ * items — callers already run `decorateItem` once per item to render its
+ * marks, and recomputing it here would both waste the work and let the
+ * roll-up drift from what actually renders.
+ */
+export declare function rollupCategory(decorations: readonly (ItemDecorations | null)[]): CategoryRollup;
+/**
+ * The lifecycle glyph for the sidebar's left slot.
+ *
+ * Shape only, never colour: a work-in-progress component must never read as a
+ * 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.
+ */
+export declare function lifecycleIcon(status: ComponentStatus | undefined): string;
+//# sourceMappingURL=navigation-decorations.d.ts.map

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

@@ -0,0 +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;IACvB;;;;;OAKG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;CACnC;AAID;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,SAAS,8BAA8B,EAAE,EAClD,WAAW,EAAE,SAAS,8BAA8B,EAAE,GACrD,8BAA8B,EAAE,CAWlC;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,SAAS,8BAA8B,EAAE,GAC9C,eAAe,GAAG,IAAI,CAuBxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,GAC/C,cAAc,CAahB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,MAAM,CAEzE"}

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

@@ -0,0 +1,87 @@
+const SEVERITY = { warn: 1, danger: 2 };
+/**
+ * Built-ins first, then plugin contributions, de-duplicated by id and sorted
+ * by `order`.
+ *
+ * Built-ins win a collision: a plugin must not be able to silence or restyle a
+ * core source by claiming its id. Sorting is by `order` alone — the reading
+ * contract says position names the source, so registration order must not leak
+ * into the result.
+ */
+export function resolveNavigationDecorations(builtin, fromPlugins) {
+    const seen = new Set();
+    const result = [];
+    for (const def of [...builtin, ...fromPlugins]) {
+        if (seen.has(def.id))
+            continue;
+        seen.add(def.id);
+        result.push(def);
+    }
+    return result.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+/**
+ * Runs every definition against one item.
+ *
+ * Returns `null` rather than an empty result for a clean component, so callers
+ * cannot accidentally render an empty marker container.
+ */
+export function decorateItem(item, defs) {
+    if (item.kind !== 'component')
+        return null;
+    const marks = [];
+    for (const def of defs) {
+        const badge = def.badge(item.data);
+        if (!badge)
+            continue;
+        marks.push({
+            id: def.id,
+            icon: def.icon,
+            variant: badge.variant,
+            label: badge.label,
+        });
+    }
+    if (marks.length === 0)
+        return null;
+    let worst = 'warn';
+    for (const mark of marks) {
+        if (SEVERITY[mark.variant] > SEVERITY[worst])
+            worst = mark.variant;
+    }
+    return { marks, worst, tooltip: marks.map((m) => m.label).join('\n') };
+}
+/**
+ * Counts the items in one category that carry at least one mark.
+ *
+ * Items, not marks: a component with three findings is one thing to look at,
+ * and a group head reading "3" for a single broken component would overstate
+ * the work.
+ *
+ * Takes each item's already-resolved `ItemDecorations` rather than the raw
+ * items — callers already run `decorateItem` once per item to render its
+ * marks, and recomputing it here would both waste the work and let the
+ * roll-up drift from what actually renders.
+ */
+export function rollupCategory(decorations) {
+    let problems = 0;
+    let variant = null;
+    for (const decoration of decorations) {
+        if (!decoration)
+            continue;
+        problems++;
+        if (!variant || SEVERITY[decoration.worst] > SEVERITY[variant]) {
+            variant = decoration.worst;
+        }
+    }
+    return { problems, variant };
+}
+/**
+ * The lifecycle glyph for the sidebar's left slot.
+ *
+ * Shape only, never colour: a work-in-progress component must never read as a
+ * 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.
+ */
+export function lifecycleIcon(status) {
+    return status === 'wip' ? 'circle-dashed' : 'box';
+}

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

@@ -2,16 +2,28 @@ 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';
 import type { ComponentStatus } from '../../decorator/showcase.types.js';
+import { type CategoryRollup, type ItemDecorations } from './navigation-decorations.js';
 import * as i0 from "@angular/core";
 interface SidebarCategory {
     name: string;
-    color: string;
     items: NavigationItem[];
 }
+interface SidebarItem {
+    item: NavigationItem;
+    icon: string;
+    decorations: ItemDecorations | null;
+}
+interface ComponentCategory {
+    name: string;
+    items: SidebarItem[];
+    rollup: CategoryRollup;
+}
 export declare class PrismSidebarComponent {
     protected readonly navigationService: PrismNavigationService;
     protected readonly searchService: PrismSearchService;
+    private readonly pluginService;
     private readonly filterInput;
+    private readonly decorations;
     protected onGlobalKey(e: KeyboardEvent): void;
     private readonly collapsedSet;
     protected readonly totalPages: import("@angular/core").Signal<number>;
@@ -19,20 +31,29 @@ export declare class PrismSidebarComponent {
     protected readonly componentSections: import("@angular/core").Signal<{
         name: string;
         icon: string;
-        color: string;
         totalCount: number;
-        categories: {
-            name: string;
-            color: string;
-            items: NavigationItem[];
-        }[];
+        categories: ComponentCategory[];
     }[]>;
     protected isCollapsed(key: string): boolean;
     protected toggleCollapse(key: string): void;
     protected itemKey(item: NavigationItem): string;
     protected itemLabel(item: NavigationItem): string;
     protected itemStatus(item: NavigationItem): ComponentStatus | undefined;
-    protected itemTooltip(item: NavigationItem): string | null;
+    /**
+     * 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 deliberately 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;
+    protected itemTooltip(item: NavigationItem, decorations: ItemDecorations | null): string | null;
     protected isActive(item: NavigationItem): boolean;
     protected onSelect(item: NavigationItem): void;
     private loadCollapsed;

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":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAiCzE,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,qBA0Ta,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAC6B;IAGzD,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAa7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAc9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;;;;;;SAYjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAMvE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI;IAO1D,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCA3HV,qBAAqB;2CAArB,qBAAqB;CAgIjC"}
+{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAYA,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,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,6BAA6B,CAAC;;AAcrC,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;CACrC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,qBAkVa,qBAAqB;IAChC,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,CAC6B;IAEzD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAK1B;IAGF,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAa7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAa9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;SAmBjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAMvE;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM;IAKvD,SAAS,CAAC,WAAW,CACnB,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,eAAe,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI;IAShB,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCAhKV,qBAAqB;2CAArB,qBAAqB;CAqKjC"}