@ng-prism/core 22.3.0 → 22.4.1

package/dist/app/shared/prism-metric-badge.component.js

@@ -4,21 +4,15 @@ import * as i0 from "@angular/core";
 /**
  * Library-wide metric badge for the header.
  *
- * Presentational only — it takes an already-formatted value and a variant and
- * knows nothing about thresholds, manifests or where the number came from.
- * That keeps the three badges that use it (a11y in core, coverage and visual
- * regression in their plugins) owning their own data logic while sharing one
- * appearance.
+ * Presentational only: it takes a formatted value and a variant, so each badge
+ * (a11y in core, coverage and visual regression in their plugins) keeps its own
+ * data logic while sharing one appearance.
  *
- * It carries an icon rather than a text label on purpose. The glyph is the
- * same one the source contributes to the navigation marks and its panel tab,
- * so one symbol means one source wherever it appears — and the badge gets
- * narrow enough that three of them fit a 40px header without crowding it.
- * The icon is `aria-hidden` — it is decoration, not content. The accessible
- * name is composed here as "label: value" (e.g. "Library coverage: 23%"), so
- * the figure that is the whole point of the badge cannot be dropped by a
- * consumer that only passes `label`. `title` stays the full text the
- * consumer passes, for the hover tooltip.
+ * It shows an icon instead of a text label: the same glyph the source uses for
+ * its navigation marks and panel tab, and narrow enough to fit three badges in
+ * the 40px header. The icon is `aria-hidden`; the accessible name is built here
+ * as "label: value" (e.g. "Library coverage: 23%") so a consumer cannot drop
+ * the figure. `title` is the consumer's full text for the hover tooltip.
  */
 export class PrismMetricBadgeComponent {
     icon = input.required(/* @ts-ignore */
@@ -31,7 +25,7 @@ export class PrismMetricBadgeComponent {
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     variant = input('ok', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** "label: value" — the accessible name, so the figure is never dropped. */
+    /** "label: value" is the accessible name, so the figure is never dropped. */
     accessibleName = computed(() => `${this.label()}: ${this.value()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismMetricBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismMetricBadgeComponent)(); };
@@ -54,4 +48,4 @@ export class PrismMetricBadgeComponent {
         type: Component,
         args: [{ selector: 'prism-metric-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<span\n    class=\"metric-badge\"\n    role=\"img\"\n    [class.metric-badge--ok]=\"variant() === 'ok'\"\n    [class.metric-badge--warn]=\"variant() === 'warn'\"\n    [class.metric-badge--danger]=\"variant() === 'danger'\"\n    [attr.title]=\"title() || label()\"\n    [attr.aria-label]=\"accessibleName()\">\n    <prism-icon\n        [name]=\"icon()\"\n        [size]=\"12\"\n        aria-hidden=\"true\" />\n    <span class=\"metric-badge__value\">{{ value() }}</span>\n</span>\n", styles: [":host {\n    display: inline-flex;\n    align-items: center;\n}\n\n.metric-badge {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--sp-3) 0 var(--sp-2);\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-sm);\n}\n\n.metric-badge__value {\n    font-weight: 600;\n    color: var(--prism-text);\n}\n\n.metric-badge--ok {\n    color: var(--prism-mark-nominal);\n    background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-nominal) 35%, transparent);\n}\n\n.metric-badge--ok .metric-badge__value {\n    color: var(--prism-mark-nominal);\n}\n\n.metric-badge--warn {\n    color: var(--prism-mark-attention);\n    background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-attention) 35%, transparent);\n}\n\n.metric-badge--warn .metric-badge__value {\n    color: var(--prism-mark-attention);\n}\n\n.metric-badge--danger {\n    color: var(--prism-mark-critical);\n    background: color-mix(in srgb, var(--prism-mark-critical) 10%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 40%, transparent);\n}\n\n.metric-badge--danger .metric-badge__value {\n    color: var(--prism-mark-critical);\n}\n"] }]
     }], null, { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismMetricBadgeComponent, { className: "PrismMetricBadgeComponent", filePath: "app/shared/prism-metric-badge.component.ts", lineNumber: 31 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismMetricBadgeComponent, { className: "PrismMetricBadgeComponent", filePath: "app/shared/prism-metric-badge.component.ts", lineNumber: 25 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"prism-shell.component.d.ts","sourceRoot":"","sources":["../../../src/app/shell/prism-shell.component.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAWvE,qBAqBa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAmC;IAEtE,SAAS,CAAC,QAAQ,CAAC,UAAU,2FAAuC;IAEpE,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAA0I;IAEtK,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAI1B;;IAmCH,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;yCApDlC,mBAAmB;2CAAnB,mBAAmB;CAwE/B"}
+{"version":3,"file":"prism-shell.component.d.ts","sourceRoot":"","sources":["../../../src/app/shell/prism-shell.component.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAWvE,qBAsBa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAmC;IAEtE,SAAS,CAAC,QAAQ,CAAC,UAAU,2FAAuC;IAEpE,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAA0I;IAEtK,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAI1B;;IAmCH,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;yCApDlC,mBAAmB;2CAAnB,mBAAmB;CAwE/B"}

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

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, effect, HostListener, inject, untracked } from '@angular/core';
+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';
 import { PrismComponentHeadComponent } from '../component-head/prism-component-head.component.js';
@@ -49,7 +50,7 @@ function PrismShellComponent_Conditional_5_Conditional_0_Template(rf, ctx) { if
     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.ɵɵelement(4, "prism-canvas-toolbar")(5, "prism-renderer")(6, "prism-template-popover")(7, "prism-canvas-pin-row");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -77,7 +78,7 @@ function PrismShellComponent_Conditional_5_Conditional_2_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, 7, 2)(1, PrismShellComponent_Conditional_5_Conditional_1_Template, 3, 0);
+    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);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -124,11 +125,11 @@ export class PrismShellComponent {
         this.urlStateService.init();
         this.persistenceService.init();
         // A view survives a component switch as long as the new component still
-        // offers it — browsing a library variant-sheet by variant-sheet was
+        // 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
+        // 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 next = nextViewId(this.panelService.activeViewId(), this.panelService.visibleViewPanels());
@@ -169,7 +170,7 @@ 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"], ["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: 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) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "prism-header", 1);
             i0.ɵɵelementStart(2, "div", 2);
@@ -198,7 +199,8 @@ export class PrismShellComponent {
             PrismViewPanelHostComponent,
             PrismResizerDirective,
             PrismCanvasToolbarComponent,
-            PrismTemplatePopoverComponent], 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}"] });
+            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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismShellComponent, [{
         type: Component,
@@ -214,10 +216,11 @@ export class PrismShellComponent {
                     PrismViewPanelHostComponent,
                     PrismResizerDirective,
                     PrismCanvasToolbarComponent,
-                    PrismTemplatePopoverComponent
-                ], 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,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==\" />\n                    <a\n                        class=\"prism-sidebar-foot__link\"\n                        href=\"https://dyingangel666.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                    </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"] }]
+                    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"] }]
     }], () => [], { onKeyDown: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismShellComponent, { className: "PrismShellComponent", filePath: "app/shell/prism-shell.component.ts", lineNumber: 45 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismShellComponent, { className: "PrismShellComponent", filePath: "app/shell/prism-shell.component.ts", lineNumber: 47 }); })();

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

@@ -5,7 +5,7 @@ import type { NavigationItem } from '../services/navigation-item.types.js';
 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
+     * 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.
      */
@@ -15,7 +15,7 @@ export interface ItemMark {
     label: string;
 }
 export interface ItemDecorations {
-    /** Ordered marks — never empty; `decorateItem` returns null instead. */
+    /** Ordered marks, never empty (`decorateItem` returns null instead). */
     marks: ItemMark[];
     /** Worst variant across `marks`. Drives the group roll-up. */
     worst: 'warn' | 'danger';
@@ -33,7 +33,7 @@ export interface CategoryRollup {
  * 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
+ * core source by claiming its id. Sorting is by `order` alone because the reading
  * contract says position names the source, so registration order must not leak
  * into the result.
  */
@@ -53,7 +53,7 @@ export declare function decorateItem(item: NavigationItem, defs: readonly Naviga
  * the work.
  *
  * Takes each item's already-resolved `ItemDecorations` rather than the raw
- * items — callers already run `decorateItem` once per item to render its
+ * 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.
  */

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

@@ -4,7 +4,7 @@ const SEVERITY = { warn: 1, danger: 2 };
  * 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
+ * core source by claiming its id. Sorting is by `order` alone because the reading
  * contract says position names the source, so registration order must not leak
  * into the result.
  */
@@ -57,7 +57,7 @@ export function decorateItem(item, defs) {
  * the work.
  *
  * Takes each item's already-resolved `ItemDecorations` rather than the raw
- * items — callers already run `decorateItem` once per item to render its
+ * 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.
  */

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

@@ -41,12 +41,12 @@ export declare class PrismSidebarComponent {
     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
+     * 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
+     * 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

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

@@ -272,12 +272,12 @@ export class PrismSidebarComponent {
     }
     /**
      * Accessible name for the roll-up pill, for the deviating case only. The
-     * pill otherwise renders a bare number distinguished only by colour — a
+     * 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
+     * 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
@@ -366,7 +366,7 @@ export class PrismSidebarComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSidebarComponent, [{
         type: Component,
-        args: [{ selector: 'prism-sidebar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<nav class=\"prism-sidebar\">\n    <div class=\"sb-filter\">\n        <prism-icon\n            name=\"search\"\n            [size]=\"12\" />\n        <input\n            #filterInput\n            placeholder=\"Filter components\u2026\"\n            [value]=\"searchService.query()\"\n            (input)=\"searchService.search($any($event.target).value)\" />\n        <kbd>/</kbd>\n    </div>\n\n    <div class=\"sb-scroll\">\n        @if (pageCategories().length > 0) {\n            <div class=\"sb-pinned\">\n                <div class=\"sb-pinned-head\">\n                    <span class=\"sb-pinned-head-l\">\n                        <prism-icon\n                            name=\"pin\"\n                            [size]=\"10\"\n                            class=\"sb-pinned-pin\" />\n                        Pages\n                    </span>\n                    <span>{{ totalPages() }}</span>\n                </div>\n                @for (cat of pageCategories(); track cat.name) {\n                    <div\n                        class=\"sb-group\"\n                        [class.sb-group--collapsed]=\"isCollapsed('page:' + cat.name)\">\n                        <button\n                            class=\"sb-group-head\"\n                            (click)=\"toggleCollapse('page:' + cat.name)\"\n                            [attr.aria-expanded]=\"!isCollapsed('page:' + cat.name)\">\n                            <prism-icon\n                                name=\"chevron-down\"\n                                [size]=\"10\" />\n                            <span class=\"sb-group-chip\"></span>\n                            {{ cat.name }}\n                        </button>\n                        @if (!isCollapsed('page:' + cat.name)) {\n                            <div class=\"sb-group-body\">\n                                @for (item of cat.items; track itemKey(item)) {\n                                    <button\n                                        class=\"sb-item\"\n                                        [class.sb-item--active]=\"isActive(item)\"\n                                        (click)=\"onSelect(item)\">\n                                        <span class=\"sb-item-name\">{{ itemLabel(item) }}</span>\n                                    </button>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n        }\n        @for (section of componentSections(); track section.name) {\n            <div class=\"sb-section-head\">\n                <span class=\"sb-section-head-l\">\n                    <prism-icon\n                        [name]=\"section.icon\"\n                        [size]=\"10\"\n                        class=\"sb-section-icon\" />\n                    {{ section.name }}\n                </span>\n                <span>{{ section.totalCount }}</span>\n            </div>\n            @for (cat of section.categories; track cat.name) {\n                <div\n                    class=\"sb-group\"\n                    [class.sb-group--collapsed]=\"isCollapsed('sec:' + section.name + ':' + cat.name)\">\n                    <button\n                        class=\"sb-group-head\"\n                        (click)=\"toggleCollapse('sec:' + section.name + ':' + cat.name)\"\n                        [attr.aria-expanded]=\"!isCollapsed('sec:' + section.name + ':' + cat.name)\">\n                        <prism-icon\n                            name=\"chevron-down\"\n                            [size]=\"10\" />\n                        <span class=\"sb-group-chip\"></span>\n                        {{ cat.name }}\n                        <span\n                            class=\"sb-group-count\"\n                            [class.sb-group-count--warn]=\"cat.rollup.variant === 'warn'\"\n                            [class.sb-group-count--danger]=\"cat.rollup.variant === 'danger'\"\n                            [attr.title]=\"cat.rollup.problems ? rollupTooltip(cat.rollup) : null\"\n                            [attr.aria-label]=\"cat.rollup.problems ? rollupTooltip(cat.rollup) : null\">\n                            @if (cat.rollup.problems) {\n                                {{ cat.rollup.problems }}/{{ cat.items.length }}\n                            } @else {\n                                {{ cat.items.length }}\n                            }\n                        </span>\n                    </button>\n                    @if (!isCollapsed('sec:' + section.name + ':' + cat.name)) {\n                        <div class=\"sb-group-body\">\n                            @for (row of cat.items; track itemKey(row.item)) {\n                                <button\n                                    class=\"sb-item\"\n                                    [class.sb-item--active]=\"isActive(row.item)\"\n                                    [class.sb-item--deprecated]=\"itemStatus(row.item) === 'deprecated'\"\n                                    [attr.title]=\"itemTooltip(row.item, row.decorations)\"\n                                    (click)=\"onSelect(row.item)\">\n                                    <prism-icon\n                                        [name]=\"row.icon\"\n                                        [size]=\"12\"\n                                        class=\"sb-item-icon\" />\n                                    <span class=\"sb-item-name\">{{ itemLabel(row.item) }}</span>\n                                    <span class=\"sb-item-health\">\n                                        @for (mark of row.decorations?.marks ?? []; track mark.id) {\n                                            <prism-icon\n                                                [name]=\"mark.icon\"\n                                                [size]=\"11\"\n                                                [class]=\"'sb-health sb-health--' + mark.variant\" />\n                                        }\n                                    </span>\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n        }\n    </div>\n</nav>\n", styles: [".prism-sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.sb-filter {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    height: 30px;\n    padding: 0 10px;\n    margin: 12px;\n    color: var(--prism-text-muted);\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 6px;\n}\n\n.sb-filter input {\n    flex: 1;\n    min-width: 0;\n    font-family: var(--font-sans);\n    font-size: var(--fs-md);\n    color: var(--prism-text);\n    outline: none;\n    background: transparent;\n    border: 0;\n}\n\n.sb-filter input::placeholder {\n    color: var(--prism-text-muted);\n}\n\n.sb-filter kbd {\n    padding: 1px 5px;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    color: var(--prism-text-ghost);\n    border: 1px solid var(--prism-border);\n    border-radius: 3px;\n}\n\n.sb-scroll {\n    flex: 1;\n    padding: 10px 0 16px;\n    padding-top: 0;\n    overflow-y: auto;\n}\n\n.sb-scroll::-webkit-scrollbar {\n    width: 8px;\n}\n\n.sb-scroll::-webkit-scrollbar-thumb {\n    background: var(--prism-border-strong);\n    border-radius: 4px;\n}\n\n.sb-scroll::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.sb-pinned {\n    padding: 0 0 10px;\n    margin-bottom: 4px;\n    border-top: 1px solid var(--prism-border);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.sb-section-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 14px 6px;\n    margin-top: 6px;\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n}\n\n.sb-section-head-l {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.sb-section-icon {\n    color: var(--prism-primary);\n}\n\n.sb-pinned-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 14px 6px;\n    margin-top: 6px;\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n}\n\n.sb-pinned-head-l {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.sb-pinned-pin {\n    color: var(--prism-accent);\n}\n\n.sb-group {\n    margin-bottom: 4px;\n}\n\n.sb-group-head {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    width: 100%;\n    padding: 8px 14px 6px;\n    font-family: var(--font-sans);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-align: left;\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n    cursor: pointer;\n    user-select: none;\n    background: none;\n    border: none;\n}\n\n.sb-group-head prism-icon {\n    color: var(--prism-text-ghost);\n    transition: transform var(--dur-fast);\n}\n\n.sb-group--collapsed .sb-group-head prism-icon {\n    transform: rotate(-90deg);\n}\n\n.sb-group-chip {\n    width: 6px;\n    height: 6px;\n    background: var(--prism-text-ghost);\n    border-radius: 2px;\n}\n\n.sb-group-count {\n    margin-left: auto;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 500;\n    color: var(--prism-text-ghost);\n}\n\n.sb-group-count--warn {\n    color: var(--prism-mark-attention);\n}\n\n.sb-group-count--danger {\n    color: var(--prism-mark-critical);\n}\n\n.sb-item {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    width: 100%;\n    height: 30px;\n    padding: 0 14px 0 28px;\n    font-family: var(--font-sans);\n    font-size: 13px;\n    color: var(--prism-text-2);\n    text-align: left;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition:\n        background var(--dur-fast),\n        color var(--dur-fast);\n}\n\n.sb-item:hover {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n}\n\n.sb-item--active {\n    font-weight: 500;\n    background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n}\n\n.sb-item-icon {\n    flex: 0 0 12px;\n    opacity: 0.7;\n}\n\n.sb-item-name {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n/* Fixed width sized for the three built-in decoration sources (a11y,\n   plugin-coverage, plugin-visual-regression) at 11px each plus two\n   --sp-1 gaps, with a little headroom. navigationDecorations is an open\n   extension point, so a fourth mark from a third-party plugin is\n   clipped via overflow: hidden rather than allowed to grow the gutter \u2014\n   the point of a fixed-width gutter is that rows never shift\n   horizontally as you scan the list. */\n.sb-item-health {\n    display: flex;\n    flex: none;\n    gap: var(--sp-1);\n    align-items: center;\n    justify-content: flex-end;\n    width: 40px;\n    overflow: hidden;\n}\n\n/* Outline, not fill, and full saturation only for danger. The mechanism\n   behind these marks is already deviation-driven: decorateItem returns\n   null for a clean component and every source bails out at variant === 'ok'.\n   What made them read as wallpaper was the drawing: a filled shape at full\n   saturation, one per row, in a repo where deviating is the normal case. */\n.sb-health {\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 2;\n}\n\n.sb-health--warn {\n    color: color-mix(in srgb, var(--prism-mark-attention) 80%, transparent);\n}\n\n.sb-health--danger {\n    color: var(--prism-mark-critical);\n}\n\n.sb-item--deprecated .sb-item-name {\n    color: var(--prism-text-ghost);\n    text-decoration: line-through;\n    text-decoration-thickness: 1px;\n    opacity: 0.7;\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
+        args: [{ selector: 'prism-sidebar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<nav class=\"prism-sidebar\">\n    <div class=\"sb-filter\">\n        <prism-icon\n            name=\"search\"\n            [size]=\"12\" />\n        <input\n            #filterInput\n            placeholder=\"Filter components\u2026\"\n            [value]=\"searchService.query()\"\n            (input)=\"searchService.search($any($event.target).value)\" />\n        <kbd>/</kbd>\n    </div>\n\n    <div class=\"sb-scroll\">\n        @if (pageCategories().length > 0) {\n            <div class=\"sb-pinned\">\n                <div class=\"sb-pinned-head\">\n                    <span class=\"sb-pinned-head-l\">\n                        <prism-icon\n                            name=\"pin\"\n                            [size]=\"10\"\n                            class=\"sb-pinned-pin\" />\n                        Pages\n                    </span>\n                    <span>{{ totalPages() }}</span>\n                </div>\n                @for (cat of pageCategories(); track cat.name) {\n                    <div\n                        class=\"sb-group\"\n                        [class.sb-group--collapsed]=\"isCollapsed('page:' + cat.name)\">\n                        <button\n                            class=\"sb-group-head\"\n                            (click)=\"toggleCollapse('page:' + cat.name)\"\n                            [attr.aria-expanded]=\"!isCollapsed('page:' + cat.name)\">\n                            <prism-icon\n                                name=\"chevron-down\"\n                                [size]=\"10\" />\n                            <span class=\"sb-group-chip\"></span>\n                            {{ cat.name }}\n                        </button>\n                        @if (!isCollapsed('page:' + cat.name)) {\n                            <div class=\"sb-group-body\">\n                                @for (item of cat.items; track itemKey(item)) {\n                                    <button\n                                        class=\"sb-item\"\n                                        [class.sb-item--active]=\"isActive(item)\"\n                                        (click)=\"onSelect(item)\">\n                                        <span class=\"sb-item-name\">{{ itemLabel(item) }}</span>\n                                    </button>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n        }\n        @for (section of componentSections(); track section.name) {\n            <div class=\"sb-section-head\">\n                <span class=\"sb-section-head-l\">\n                    <prism-icon\n                        [name]=\"section.icon\"\n                        [size]=\"10\"\n                        class=\"sb-section-icon\" />\n                    {{ section.name }}\n                </span>\n                <span>{{ section.totalCount }}</span>\n            </div>\n            @for (cat of section.categories; track cat.name) {\n                <div\n                    class=\"sb-group\"\n                    [class.sb-group--collapsed]=\"isCollapsed('sec:' + section.name + ':' + cat.name)\">\n                    <button\n                        class=\"sb-group-head\"\n                        (click)=\"toggleCollapse('sec:' + section.name + ':' + cat.name)\"\n                        [attr.aria-expanded]=\"!isCollapsed('sec:' + section.name + ':' + cat.name)\">\n                        <prism-icon\n                            name=\"chevron-down\"\n                            [size]=\"10\" />\n                        <span class=\"sb-group-chip\"></span>\n                        {{ cat.name }}\n                        <span\n                            class=\"sb-group-count\"\n                            [class.sb-group-count--warn]=\"cat.rollup.variant === 'warn'\"\n                            [class.sb-group-count--danger]=\"cat.rollup.variant === 'danger'\"\n                            [attr.title]=\"cat.rollup.problems ? rollupTooltip(cat.rollup) : null\"\n                            [attr.aria-label]=\"cat.rollup.problems ? rollupTooltip(cat.rollup) : null\">\n                            @if (cat.rollup.problems) {\n                                {{ cat.rollup.problems }}/{{ cat.items.length }}\n                            } @else {\n                                {{ cat.items.length }}\n                            }\n                        </span>\n                    </button>\n                    @if (!isCollapsed('sec:' + section.name + ':' + cat.name)) {\n                        <div class=\"sb-group-body\">\n                            @for (row of cat.items; track itemKey(row.item)) {\n                                <button\n                                    class=\"sb-item\"\n                                    [class.sb-item--active]=\"isActive(row.item)\"\n                                    [class.sb-item--deprecated]=\"itemStatus(row.item) === 'deprecated'\"\n                                    [attr.title]=\"itemTooltip(row.item, row.decorations)\"\n                                    (click)=\"onSelect(row.item)\">\n                                    <prism-icon\n                                        [name]=\"row.icon\"\n                                        [size]=\"12\"\n                                        class=\"sb-item-icon\" />\n                                    <span class=\"sb-item-name\">{{ itemLabel(row.item) }}</span>\n                                    <span class=\"sb-item-health\">\n                                        @for (mark of row.decorations?.marks ?? []; track mark.id) {\n                                            <prism-icon\n                                                [name]=\"mark.icon\"\n                                                [size]=\"11\"\n                                                [class]=\"'sb-health sb-health--' + mark.variant\" />\n                                        }\n                                    </span>\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n        }\n    </div>\n</nav>\n", styles: [".prism-sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.sb-filter {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    height: 30px;\n    padding: 0 10px;\n    margin: 12px;\n    color: var(--prism-text-muted);\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 6px;\n}\n\n.sb-filter input {\n    flex: 1;\n    min-width: 0;\n    font-family: var(--font-sans);\n    font-size: var(--fs-md);\n    color: var(--prism-text);\n    outline: none;\n    background: transparent;\n    border: 0;\n}\n\n.sb-filter input::placeholder {\n    color: var(--prism-text-muted);\n}\n\n.sb-filter kbd {\n    padding: 1px 5px;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    color: var(--prism-text-ghost);\n    border: 1px solid var(--prism-border);\n    border-radius: 3px;\n}\n\n.sb-scroll {\n    flex: 1;\n    padding: 10px 0 16px;\n    padding-top: 0;\n    overflow-y: auto;\n}\n\n.sb-scroll::-webkit-scrollbar {\n    width: 8px;\n}\n\n.sb-scroll::-webkit-scrollbar-thumb {\n    background: var(--prism-border-strong);\n    border-radius: 4px;\n}\n\n.sb-scroll::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.sb-pinned {\n    padding: 0 0 10px;\n    margin-bottom: 4px;\n    border-top: 1px solid var(--prism-border);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.sb-section-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 14px 6px;\n    margin-top: 6px;\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n}\n\n.sb-section-head-l {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.sb-section-icon {\n    color: var(--prism-primary);\n}\n\n.sb-pinned-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 14px 6px;\n    margin-top: 6px;\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n}\n\n.sb-pinned-head-l {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.sb-pinned-pin {\n    color: var(--prism-accent);\n}\n\n.sb-group {\n    margin-bottom: 4px;\n}\n\n.sb-group-head {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    width: 100%;\n    padding: 8px 14px 6px;\n    font-family: var(--font-sans);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-align: left;\n    text-transform: uppercase;\n    letter-spacing: 0.09em;\n    cursor: pointer;\n    user-select: none;\n    background: none;\n    border: none;\n}\n\n.sb-group-head prism-icon {\n    color: var(--prism-text-ghost);\n    transition: transform var(--dur-fast);\n}\n\n.sb-group--collapsed .sb-group-head prism-icon {\n    transform: rotate(-90deg);\n}\n\n.sb-group-chip {\n    width: 6px;\n    height: 6px;\n    background: var(--prism-text-ghost);\n    border-radius: 2px;\n}\n\n.sb-group-count {\n    margin-left: auto;\n    font-family: var(--font-mono);\n    font-size: 10px;\n    font-weight: 500;\n    color: var(--prism-text-ghost);\n}\n\n.sb-group-count--warn {\n    color: var(--prism-mark-attention);\n}\n\n.sb-group-count--danger {\n    color: var(--prism-mark-critical);\n}\n\n.sb-item {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    width: 100%;\n    height: 30px;\n    padding: 0 14px 0 28px;\n    font-family: var(--font-sans);\n    font-size: 13px;\n    color: var(--prism-text-2);\n    text-align: left;\n    cursor: pointer;\n    background: none;\n    border: none;\n    transition:\n        background var(--dur-fast),\n        color var(--dur-fast);\n}\n\n.sb-item:hover {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n}\n\n.sb-item--active {\n    font-weight: 500;\n    background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n}\n\n.sb-item-icon {\n    flex: 0 0 12px;\n    opacity: 0.7;\n}\n\n.sb-item-name {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n/* Fixed width sized for the three built-in decoration sources (a11y,\n   plugin-coverage, plugin-visual-regression) at 11px each plus two\n   --sp-1 gaps, with a little headroom. navigationDecorations is an open\n   extension point, so a fourth mark from a third-party plugin is\n   clipped via overflow: hidden rather than allowed to grow the gutter.\n   The point of a fixed-width gutter is that rows never shift\n   horizontally as you scan the list. */\n.sb-item-health {\n    display: flex;\n    flex: none;\n    gap: var(--sp-1);\n    align-items: center;\n    justify-content: flex-end;\n    width: 40px;\n    overflow: hidden;\n}\n\n/* Outline, not fill, and full saturation only for danger. The mechanism\n   behind these marks is already deviation-driven: decorateItem returns\n   null for a clean component and every source bails out at variant === 'ok'.\n   What made them read as wallpaper was the drawing: a filled shape at full\n   saturation, one per row, in a repo where deviating is the normal case. */\n.sb-health {\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 2;\n}\n\n.sb-health--warn {\n    color: color-mix(in srgb, var(--prism-mark-attention) 80%, transparent);\n}\n\n.sb-health--danger {\n    color: var(--prism-mark-critical);\n}\n\n.sb-item--deprecated .sb-item-name {\n    color: var(--prism-text-ghost);\n    text-decoration: line-through;\n    text-decoration-thickness: 1px;\n    opacity: 0.7;\n}\n\n:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 2px;\n}\n"] }]
     }], null, { filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], onGlobalKey: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]

package/dist/app/theme/prism-default-theme.js

@@ -29,7 +29,7 @@ export const PRISM_DARK_THEME = {
     '--prism-mark-nominal': '#34d399',
     '--prism-mark-attention': '#e8a33d',
     '--prism-mark-critical': '#e5484d',
-    '--prism-measure': '#41bcff',
+    '--prism-measure': '#f632ff',
     '--prism-spectrum': 'linear-gradient(90deg, var(--prism-accent), var(--prism-primary), var(--prism-primary-to))'
 };
 export const PRISM_LIGHT_THEME = {
@@ -63,7 +63,7 @@ export const PRISM_LIGHT_THEME = {
     '--prism-mark-nominal': '#047857',
     '--prism-mark-attention': '#8f6b00',
     '--prism-mark-critical': '#951226',
-    '--prism-measure': '#004d8a',
+    '--prism-measure': '#ca00c1',
     '--prism-spectrum': 'linear-gradient(90deg, var(--prism-accent), var(--prism-primary), var(--prism-primary-to))'
 };
 export const PRISM_BASE_TOKENS = {
@@ -96,7 +96,7 @@ export const PRISM_BASE_TOKENS = {
      *
      *   prism-shell { --density: .8 }
      *
-     * There is deliberately no signal, service or menu behind this — the whole
+     * There is no signal, service or menu behind this. The whole
      * control surface is the custom property.
      */
     '--density': '1',

package/dist/app/variant-ribbon/spectrum.d.ts

@@ -9,7 +9,7 @@ export interface SpectrumSlot {
  * Maps a variant's index onto the spectrum rail.
  *
  * The CSS reads `calc(var(--i) / (var(--n) - 1) * 100%)`, so n = 1 would
- * divide by zero — and an invalid calc() drops the whole declaration rather
+ * divide by zero, and an invalid calc() drops the whole declaration rather
  * than falling back to a sane default, leaving the result dependent on
  * whatever else happens to target background-position. Reporting a floor of 2
  * keeps the arithmetic defined and parks a lone variant at the start of the

package/dist/app/variant-ribbon/spectrum.js

@@ -2,7 +2,7 @@
  * Maps a variant's index onto the spectrum rail.
  *
  * The CSS reads `calc(var(--i) / (var(--n) - 1) * 100%)`, so n = 1 would
- * divide by zero — and an invalid calc() drops the whole declaration rather
+ * divide by zero, and an invalid calc() drops the whole declaration rather
  * than falling back to a sane default, leaving the result dependent on
  * whatever else happens to target background-position. Reporting a floor of 2
  * keeps the arithmetic defined and parks a lone variant at the start of the

package/dist/app/view-tab-bar/next-view-id.d.ts

@@ -3,7 +3,7 @@ import type { PanelDefinition } from '../../plugin/plugin.types.js';
  * The view to switch to, or `null` when the active one still stands.
  *
  * A view survives a component switch for as long as the new component still
- * offers it — that is the whole rule. `renderer` needs no check of its own
+ * offers it. That is the whole rule. `renderer` needs no check of its own
  * because it is the one view every component has: there is no `isVisible` for
  * the Playground, so it can never drop out of the visible list and never
  * needs a fallback away from itself.

package/dist/app/view-tab-bar/next-view-id.js

@@ -2,7 +2,7 @@
  * The view to switch to, or `null` when the active one still stands.
  *
  * A view survives a component switch for as long as the new component still
- * offers it — that is the whole rule. `renderer` needs no check of its own
+ * offers it. That is the whole rule. `renderer` needs no check of its own
  * because it is the one view every component has: there is no `isVisible` for
  * the Playground, so it can never drop out of the visible list and never
  * needs a fallback away from itself.

package/dist/builder/a11y/a11y-report-reader.d.ts

@@ -10,7 +10,7 @@ export declare function readA11yMeta(reportPath: string, thresholdsInput?: Parti
  * The plural form exists because {@link readA11yForComponent} re-enters
  * {@link loadA11yReport}, which `statSync`s the file even on a cache hit.
  * Calling it once per scanned component turns a 300-component library into 300
- * redundant syscalls per build, and a watch-mode rebuild repeats them all — so
+ * redundant syscalls per build, and a watch-mode rebuild repeats them all. So
  * the pipeline reads the report once and looks components up in the result.
  */
 export declare function readA11yForComponents(reportPath: string, thresholds: A11yThresholds): Map<string, A11yComponentMeta>;

package/dist/builder/a11y/a11y-report-reader.js

@@ -37,7 +37,7 @@ export function readA11yMeta(reportPath, thresholdsInput) {
  * The plural form exists because {@link readA11yForComponent} re-enters
  * {@link loadA11yReport}, which `statSync`s the file even on a cache hit.
  * Calling it once per scanned component turns a 300-component library into 300
- * redundant syscalls per build, and a watch-mode rebuild repeats them all — so
+ * redundant syscalls per build, and a watch-mode rebuild repeats them all. So
  * the pipeline reads the report once and looks components up in the result.
  */
 export function readA11yForComponents(reportPath, thresholds) {

package/dist/builder/manifest/runtime-manifest.generator.js

@@ -100,7 +100,7 @@ export function generateRuntimeManifest(options) {
     const { components, libraryImportPath, pages, meta } = options;
     const directives = components.filter((c) => c.componentMeta.isDirective);
     const hasDirectives = directives.length > 0;
-    const lines = ['// AUTO-GENERATED by ng-prism — do not edit!', "import type { RuntimeManifest } from '@ng-prism/core/plugin';"];
+    const lines = ['// AUTO-GENERATED by ng-prism. Do not edit!', "import type { RuntimeManifest } from '@ng-prism/core/plugin';"];
     if (hasDirectives) {
         lines.push("import { Component, input, output } from '@angular/core';");
     }
@@ -166,6 +166,10 @@ function json(value) {
 function indent(depth) {
     return ' '.repeat(depth);
 }
+/** `'aria-label'` and content slots like `'[card-header]'` are only valid keys in quotes. */
+function formatKey(key) {
+    return /^[A-Za-z_$][\w$]*$/.test(key) ? key : JSON.stringify(key);
+}
 function formatMeta(comp, baseIndent) {
     const inner = baseIndent + 2;
     const lines = [
@@ -192,7 +196,7 @@ function formatObject(obj, baseIndent) {
             : typeof value === 'object' && value !== null
                 ? formatObject(value, inner)
                 : json(value);
-        return `${indent(inner)}${key}: ${formatted},`;
+        return `${indent(inner)}${formatKey(key)}: ${formatted},`;
     });
     return `{\n${lines.join('\n')}\n${indent(baseIndent)}}`;
 }

package/dist/builder/plugin-runner/plugin-runner.js

@@ -3,7 +3,7 @@ function pluginLabel(plugin) {
 }
 function wrapPluginError(plugin, hook, target, err) {
     const cause = err instanceof Error ? err.message : String(err);
-    const wrapped = new Error(`ng-prism: plugin ${pluginLabel(plugin)} failed in ${hook} for ${target} — ${cause}`, err instanceof Error ? { cause: err } : undefined);
+    const wrapped = new Error(`ng-prism: plugin ${pluginLabel(plugin)} failed in ${hook} for ${target}: ${cause}`, err instanceof Error ? { cause: err } : undefined);
     if (err instanceof Error && err.stack) {
         wrapped.stack = `${wrapped.message}\nCaused by: ${err.stack}`;
     }

package/dist/builder/scanner/ast-utils.d.ts

@@ -1,9 +1,53 @@
 import ts from 'typescript';
+/**
+ * What {@link evaluateStatic} returns for a root it cannot evaluate. A symbol,
+ * so that it stays distinct from an `undefined` written on purpose.
+ */
+export declare const UNEVALUABLE: unique symbol;
+export type EvaluationPath = ReadonlyArray<string | number>;
+/** A reference in the source whose declaration has no value the evaluator can use. */
+export interface UnresolvedReference {
+    /** The identifier, shorthand property or property access that did not resolve. */
+    node: ts.Node;
+    /**
+     * `let` and `var` are not constants. `no-value` is a declaration without an
+     * initializer: `declare const`, a compiled package's `.d.ts`, or a global
+     * of the JavaScript runtime such as `Math`. `cycle` is a constant that refers back to itself, and
+     * `runtime-value` a function or class.
+     */
+    kind: 'let' | 'var' | 'no-value' | 'cycle' | 'runtime-value';
+}
+export interface UnevaluableIssue {
+    /** Where the dropped part sat in the evaluated value, with array indices as written in the source. */
+    path: EvaluationPath;
+    /** The expression, spread or property that could not be evaluated. */
+    node: ts.Node;
+    /** `runtime-value` marks functions, classes and instances, which no static evaluation can ever capture. */
+    reason: 'unsupported' | 'runtime-value';
+    /** The innermost reference that failed, when one is what made `node` unevaluable. */
+    cause?: UnresolvedReference;
+}
+export type UnevaluableReporter = (issue: UnevaluableIssue) => void;
+export interface EvaluateOptions {
+    /** Called for every property, element or spread that is dropped. */
+    report?: UnevaluableReporter;
+    /** Resolves constants, enum members and imports. Without it, every reference is unevaluable. */
+    checker?: ts.TypeChecker;
+}
 /**
  * Statically evaluate an AST expression node.
- * Returns `undefined` for non-evaluable expressions (variables, function calls, spread).
+ *
+ * Inside an object or array literal, whatever cannot be evaluated costs only
+ * that property or element: it is reported and left out, never the container
+ * around it. Only the root itself can come back as {@link UNEVALUABLE}.
+ */
+export declare function evaluateStatic(node: ts.Expression, options?: EvaluateOptions): unknown;
+/**
+ * {@link evaluateStatic} for callers that read a few known fields and have no
+ * use for diagnostics, such as `@Component` metadata: what cannot be evaluated
+ * is left out silently, and an unevaluable root becomes `undefined`.
  */
-export declare function evaluateExpression(node: ts.Expression): unknown;
+export declare function evaluateExpression(node: ts.Expression, checker?: ts.TypeChecker): unknown;
 /**
  * Find a decorator by name on a class or property declaration.
  */

package/dist/builder/scanner/ast-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ast-utils.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/ast-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,GAAG,OAAO,CAoD/D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,GAAG,EAAE,CAAC,mBAAmB,EAAE,IAAI,EAAE,MAAM,GAAG,EAAE,CAAC,SAAS,GAAG,SAAS,CAgBxH;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,UAAU,GAAG,SAAS,CAOvF;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,WAAW,GAAG,MAAM,GAAG,SAAS,CAQ1F"}
+{"version":3,"file":"ast-utils.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/ast-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,OAAO,MAAuC,CAAC;AAEzE,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;AAE5D,sFAAsF;AACtF,MAAM,WAAW,mBAAmB;IAChC,kFAAkF;IAClF,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC;IACd;;;;;OAKG;IACH,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC;CAChE;AAED,MAAM,WAAW,gBAAgB;IAC7B,sGAAsG;IACtG,IAAI,EAAE,cAAc,CAAC;IACrB,sEAAsE;IACtE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC;IACd,2GAA2G;IAC3G,MAAM,EAAE,aAAa,GAAG,eAAe,CAAC;IACxC,qFAAqF;IACrF,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAEpE,MAAM,WAAW,eAAe;IAC5B,oEAAoE;IACpE,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,gGAAgG;IAChG,OAAO,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC;CAC5B;AAmCD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CAE1F;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,WAAW,GAAG,OAAO,CAIzF;AAoYD;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,GAAG,EAAE,CAAC,mBAAmB,EAAE,IAAI,EAAE,MAAM,GAAG,EAAE,CAAC,SAAS,GAAG,SAAS,CAgBxH;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,UAAU,GAAG,SAAS,CAOvF;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,WAAW,GAAG,MAAM,GAAG,SAAS,CAQ1F"}