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

package/dist/app/canvas/prism-canvas-toolbar.component.d.ts

@@ -1,4 +1,5 @@
-import { PrismCanvasService, type CanvasBg } from '../services/prism-canvas.service.js';
+import { type CanvasBg } from '../../shared/canvas-bg.type.js';
+import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import { PrismLayoutService } from '../services/prism-layout.service.js';
 import * as i0 from "@angular/core";
@@ -8,15 +9,24 @@ export declare class PrismCanvasToolbarComponent {
     protected readonly layout: PrismLayoutService;
     protected setBg(bg: CanvasBg): void;
     /**
-     * The backgrounds a user can cycle through — deliberately not every
-     * {@link CanvasBg}.
+     * Every {@link CanvasBg}, and the canonical list rather than a copy of it.
      *
-     * `transparent` is missing on purpose. It renders as the checkerboard while
-     * browsing, so offering it next to `checker` would be two buttons that paint
-     * the same thing; the difference only exists in a capture, which is not a
-     * thing this toolbar can show. It stays a value a `@Showcase` declares.
+     * This group is a readout as much as a control: the active button is
+     * `effective()` and the starred one is `recommended()`. A value missing here
+     * therefore cannot be *shown* either — a variant declaring it leaves the
+     * whole group with nothing active and the star with nowhere to sit. That is
+     * what a shorter list bought when `transparent` was left out of it, so the
+     * list is now the type's own.
+     *
+     * `checker` and `transparent` do paint the same checkerboard here, which is
+     * why they carry titles: the difference between them is what a capture does,
+     * and the canvas cannot show that. `checker` is deprecated for exactly that
+     * reason and says so, but it stays in the list until 23.0.0 — a component
+     * can still declare it, and the group has to be able to show what it has.
      */
-    protected readonly bgs: CanvasBg[];
+    protected readonly bgs: readonly CanvasBg[];
+    /** What a background means, where the canvas cannot show the difference. */
+    protected bgTitle(bg: CanvasBg): string | null;
     protected readonly zooms: {
         value: number;
         label: string;

package/dist/app/canvas/prism-canvas-toolbar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,EAClB,KAAK,QAAQ,EACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBA+Ka,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IAEvD,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;OAQG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,CAMhC;IACF,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCApC5B,2BAA2B;2CAA3B,2BAA2B;CAuCvC"}
+{"version":3,"file":"prism-canvas-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/app/canvas/prism-canvas-toolbar.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBA2Ka,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IAEvD,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAQnC;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,sBAAc;IAEpC,4EAA4E;IAC5E,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI;IAY9C,SAAS,CAAC,QAAQ,CAAC,KAAK;;;QAKtB;IAEF,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCAnD5B,2BAA2B;2CAA3B,2BAA2B;CAsDvC"}

package/dist/app/canvas/prism-canvas-toolbar.component.js

@@ -1,6 +1,7 @@
 import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
-import { PrismCanvasService, } from '../services/prism-canvas.service.js';
+import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
+import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import { PrismLayoutService } from '../services/prism-layout.service.js';
 import * as i0 from "@angular/core";
@@ -22,7 +23,7 @@ function PrismCanvasToolbarComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     const bg_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("tool-btn--active", ctx_r2.variantBg.effective() === bg_r2)("tool-btn--recommended", ctx_r2.variantBg.recommended() === bg_r2);
-    i0.ɵɵproperty("title", ctx_r2.variantBg.recommended() === bg_r2 ? "Recommended background for this variant" : null);
+    i0.ɵɵproperty("title", ctx_r2.bgTitle(bg_r2));
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.variantBg.recommended() === bg_r2 ? 1 : -1);
     i0.ɵɵadvance();
@@ -54,21 +55,35 @@ export class PrismCanvasToolbarComponent {
         }
     }
     /**
-     * The backgrounds a user can cycle through — deliberately not every
-     * {@link CanvasBg}.
+     * Every {@link CanvasBg}, and the canonical list rather than a copy of it.
      *
-     * `transparent` is missing on purpose. It renders as the checkerboard while
-     * browsing, so offering it next to `checker` would be two buttons that paint
-     * the same thing; the difference only exists in a capture, which is not a
-     * thing this toolbar can show. It stays a value a `@Showcase` declares.
+     * This group is a readout as much as a control: the active button is
+     * `effective()` and the starred one is `recommended()`. A value missing here
+     * therefore cannot be *shown* either — a variant declaring it leaves the
+     * whole group with nothing active and the star with nowhere to sit. That is
+     * what a shorter list bought when `transparent` was left out of it, so the
+     * list is now the type's own.
+     *
+     * `checker` and `transparent` do paint the same checkerboard here, which is
+     * why they carry titles: the difference between them is what a capture does,
+     * and the canvas cannot show that. `checker` is deprecated for exactly that
+     * reason and says so, but it stays in the list until 23.0.0 — a component
+     * can still declare it, and the group has to be able to show what it has.
      */
-    bgs = [
-        'dots',
-        'plain',
-        'light',
-        'dark',
-        'checker',
-    ];
+    bgs = CANVAS_BGS;
+    /** What a background means, where the canvas cannot show the difference. */
+    bgTitle(bg) {
+        if (this.variantBg.recommended() === bg) {
+            return 'Recommended background for this variant';
+        }
+        if (bg === 'transparent') {
+            return 'Checkerboard here, a real alpha channel in a capture';
+        }
+        if (bg === 'checker') {
+            return 'Deprecated — same look as Transparent, but a capture keeps the themed colour';
+        }
+        return null;
+    }
     zooms = [
         { value: 0.75, label: '75%' },
         { value: 1, label: '100%' },
@@ -140,11 +155,7 @@ export class PrismCanvasToolbarComponent {
           class="tool-btn"
           [class.tool-btn--active]="variantBg.effective() === bg"
           [class.tool-btn--recommended]="variantBg.recommended() === bg"
-          [title]="
-            variantBg.recommended() === bg
-              ? 'Recommended background for this variant'
-              : null
-          "
+          [title]="bgTitle(bg)"
           (click)="setBg(bg)"
         >
           @if (variantBg.recommended() === bg) {
@@ -215,4 +226,4 @@ export class PrismCanvasToolbarComponent {
     </div>
   `, styles: ["\n    .canvas-toolbar {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      min-height: 44px;\n    }\n\n    .tool-group {\n      display: flex;\n      align-items: center;\n      gap: 1px;\n      padding: 2px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-md);\n    }\n\n    .tool-btn {\n      height: 24px;\n      padding: 0 9px;\n      border-radius: var(--radius-sm);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      transition: all var(--dur-fast);\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .tool-btn:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n    .bg-star {\n      flex-shrink: 0;\n      filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));\n    }\n\n    .tool-sep {\n      width: 1px;\n      height: 18px;\n      background: var(--prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n      margin-right: 2px;\n    }\n\n    .tool-spacer { flex: 1; }\n\n    .tool-btn--tpl {\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid\n        color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: var(--font-mono);\n    }\n    .tool-btn--tpl:hover {\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n    }\n    .tool-btn--tpl.tool-btn--tpl-active {\n      background: color-mix(in srgb, var(--prism-primary) 22%, transparent);\n      box-shadow: inset 0 0 0 1px\n        color-mix(in srgb, var(--prism-primary) 35%, transparent);\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 185 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismCanvasToolbarComponent, { className: "PrismCanvasToolbarComponent", filePath: "app/canvas/prism-canvas-toolbar.component.ts", lineNumber: 179 }); })();

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

@@ -15,6 +15,18 @@ export declare class PrismComponentHeadComponent {
     protected readonly coveragePercent: import("@angular/core").Signal<number | null>;
     protected readonly bundleSize: import("@angular/core").Signal<string | null>;
     protected readonly a11yScore: import("@angular/core").Signal<number | null>;
+    /**
+     * The visual regression headline, as the plugin already derived it.
+     *
+     * Read whole rather than recomputed: the colour follows the plugin's status
+     * semantics — red for any changed variant, amber for ones that could not be
+     * compared — and duplicating that rule here would mean the stat and the
+     * plugin's own panel could disagree about the same component.
+     */
+    protected readonly vrtStat: import("@angular/core").Signal<{
+        value: string;
+        variant: "ok" | "warn" | "danger";
+    } | null>;
     private readonly componentMeta;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismComponentHeadComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismComponentHeadComponent, "prism-component-head", never, {}, {}, never, never, true, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAEzE,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAqBD,qBAsNa,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAErB;IAEF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAGxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAG5B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAEvB;IAEF,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAG3B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,gDAS1B;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAM3B;yCAxDQ,2BAA2B;2CAA3B,2BAA2B;CAyDvC"}
+{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAEzE,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAqBD,qBA6Na,2BAA2B;IACtC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAErB;IAEF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAGxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAG5B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAEvB;IAEF,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAG3B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,gDAS1B;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO;eACjB,MAAM;iBACJ,IAAI,GAAG,MAAM,GAAG,QAAQ;cAUhC;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAM3B;yCA9EQ,2BAA2B;2CAA3B,2BAA2B;CA+EvC"}

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

@@ -5,20 +5,20 @@ import { A11yAuditService } from '../panels/a11y/a11y-audit.service.js';
 import { PrismStatComponent } from './prism-stat.component.js';
 import * as i0 from "@angular/core";
 function PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "prism-icon", 14);
+    i0.ɵɵelement(0, "prism-icon", 15);
 } if (rf & 2) {
     i0.ɵɵproperty("size", 13);
 } }
 function PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 15);
+    i0.ɵɵelement(0, "span", 16);
 } }
 function PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 16);
+    i0.ɵɵelement(0, "span", 17);
 } }
 function PrismComponentHeadComponent_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵconditionalCreate(1, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_1_Template, 1, 1, "prism-icon", 14)(2, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_2_Template, 1, 0, "span", 15)(3, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_3_Template, 1, 0, "span", 16);
-    i0.ɵɵelementStart(4, "span", 17);
+    i0.ɵɵconditionalCreate(1, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_1_Template, 1, 1, "prism-icon", 15)(2, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_2_Template, 1, 0, "span", 16)(3, PrismComponentHeadComponent_Conditional_0_Conditional_13_Conditional_3_Template, 1, 0, "span", 17);
+    i0.ɵɵelementStart(4, "span", 18);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -41,7 +41,7 @@ function PrismComponentHeadComponent_Conditional_0_Conditional_14_Template(rf, c
     i0.ɵɵtextInterpolate(c_r3.meta.showcaseConfig.description);
 } }
 function PrismComponentHeadComponent_Conditional_0_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18);
+    i0.ɵɵelementStart(0, "span", 19);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -51,7 +51,7 @@ function PrismComponentHeadComponent_Conditional_0_Conditional_15_For_2_Template
 } }
 function PrismComponentHeadComponent_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵrepeaterCreate(1, PrismComponentHeadComponent_Conditional_0_Conditional_15_For_2_Template, 2, 1, "span", 18, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, PrismComponentHeadComponent_Conditional_0_Conditional_15_For_2_Template, 2, 1, "span", 19, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const c_r3 = i0.ɵɵnextContext();
@@ -82,6 +82,12 @@ function PrismComponentHeadComponent_Conditional_0_Conditional_20_Template(rf, c
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.a11yScore())("pillVariant", ctx_r1.a11yScore() >= 90 ? "ok" : "warn");
 } }
+function PrismComponentHeadComponent_Conditional_0_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-stat", 14);
+} if (rf & 2) {
+    const vrt_r5 = ctx;
+    i0.ɵɵproperty("value", vrt_r5.value)("pillVariant", vrt_r5.variant);
+} }
 function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "section", 0)(1, "div", 1)(2, "div")(3, "div", 2)(4, "span");
     i0.ɵɵtext(5);
@@ -105,9 +111,11 @@ function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵconditionalCreate(18, PrismComponentHeadComponent_Conditional_0_Conditional_18_Template, 1, 3, "prism-stat", 11);
     i0.ɵɵconditionalCreate(19, PrismComponentHeadComponent_Conditional_0_Conditional_19_Template, 1, 1, "prism-stat", 12);
     i0.ɵɵconditionalCreate(20, PrismComponentHeadComponent_Conditional_0_Conditional_20_Template, 1, 2, "prism-stat", 13);
+    i0.ɵɵconditionalCreate(21, PrismComponentHeadComponent_Conditional_0_Conditional_21_Template, 1, 2, "prism-stat", 14);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     let tmp_7_0;
+    let tmp_14_0;
     const c_r3 = ctx;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(5);
@@ -134,6 +142,8 @@ function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵconditional(ctx_r1.bundleSize() !== null ? 19 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.a11yScore() !== null ? 20 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_14_0 = ctx_r1.vrtStat()) ? 21 : -1, tmp_14_0);
 } }
 const STATUS_BADGES = {
     stable: {
@@ -198,6 +208,24 @@ export class PrismComponentHeadComponent {
         return this.auditService.scoreResult()?.score ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "a11yScore" }] : /* istanbul ignore next */ []));
+    /**
+     * The visual regression headline, as the plugin already derived it.
+     *
+     * Read whole rather than recomputed: the colour follows the plugin's status
+     * semantics — red for any changed variant, amber for ones that could not be
+     * compared — and duplicating that rule here would mean the stat and the
+     * plugin's own panel could disagree about the same component.
+     */
+    vrtStat = computed(() => {
+        const vrt = this.componentMeta()?.['visualRegression'];
+        if (!vrt?.found || !vrt.summary)
+            return null;
+        const { value, variant } = vrt.summary;
+        return variant === 'ok' || variant === 'warn' || variant === 'danger'
+            ? { value, variant }
+            : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vrtStat" }] : /* istanbul ignore next */ []));
     componentMeta = computed(() => {
         const c = this.comp();
         const meta = c?.meta.showcaseConfig.meta;
@@ -207,8 +235,8 @@ export class PrismComponentHeadComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentMeta" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismComponentHeadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismComponentHeadComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-head-top"], [1, "comp-crumb"], ["name", "chevron-right", 3, "size"], [1, "comp-title"], [1, "comp-selector"], [3, "class"], [1, "comp-desc"], [1, "comp-tags"], [1, "comp-head-stats"], ["label", "Variants", 3, "value"], ["label", "Coverage", 3, "value", "pill", "pillVariant"], ["label", "Bundle", 3, "value"], ["label", "Score", "pill", "A11y", 3, "value", "pillVariant"], ["name", "check", 3, "size"], ["aria-hidden", "true", 1, "comp-status-ring"], ["aria-hidden", "true", 1, "comp-status-dot"], [1, "comp-status-label"], [1, "comp-tag"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 21, 12, "section", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-head-top"], [1, "comp-crumb"], ["name", "chevron-right", 3, "size"], [1, "comp-title"], [1, "comp-selector"], [3, "class"], [1, "comp-desc"], [1, "comp-tags"], [1, "comp-head-stats"], ["label", "Variants", 3, "value"], ["label", "Coverage", 3, "value", "pill", "pillVariant"], ["label", "Bundle", 3, "value"], ["label", "Score", "pill", "A11y", 3, "value", "pillVariant"], ["label", "VRT Diff", "pill", "VRT", 3, "value", "pillVariant"], ["name", "check", 3, "size"], ["aria-hidden", "true", 1, "comp-status-ring"], ["aria-hidden", "true", 1, "comp-status-dot"], [1, "comp-status-label"], [1, "comp-tag"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 22, 13, "section", 0);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
@@ -276,6 +304,13 @@ export class PrismComponentHeadComponent {
             pill="A11y"
             [pillVariant]="a11yScore()! >= 90 ? 'ok' : 'warn'"
           />
+          } @if (vrtStat(); as vrt) {
+          <prism-stat
+            [value]="vrt.value"
+            label="VRT Diff"
+            pill="VRT"
+            [pillVariant]="vrt.variant"
+          />
           }
         </div>
       </div>
@@ -283,4 +318,4 @@ export class PrismComponentHeadComponent {
     }
   `, styles: ["\n    :host { display: block; flex-shrink: 0; }\n\n    .comp-head {\n      padding: 12px 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      position: relative;\n    }\n    .comp-head::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 6px;\n      background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n    }\n\n    .comp-head-top {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-ghost);\n      margin-bottom: 6px;\n      font-weight: 500;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n    .comp-crumb prism-icon { opacity: 0.6; }\n\n    .comp-title {\n      margin: 0;\n      font-size: var(--fs-2xl);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .comp-selector {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      color: var(--prism-primary);\n      padding: 3px 8px;\n      border-radius: var(--radius-sm);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      font-weight: 500;\n    }\n\n    .comp-status {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      height: 24px;\n      padding: 0 10px 0 8px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      border: 1px solid;\n      background: transparent;\n    }\n    .comp-status-label { line-height: 1; }\n    .comp-status-dot {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status-ring {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      border: 1.5px solid currentColor;\n      background: transparent;\n      box-sizing: border-box;\n    }\n    .comp-status prism-icon { display: inline-flex; }\n\n    .comp-status--stable {\n      color: var(--prism-success);\n      background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n      border-color: color-mix(in srgb, var(--prism-success) 35%, transparent);\n    }\n    .comp-status--beta {\n      color: #60a5fa;\n      background: color-mix(in srgb, #60a5fa 10%, transparent);\n      border-color: color-mix(in srgb, #60a5fa 35%, transparent);\n    }\n    .comp-status--wip {\n      color: var(--prism-warn);\n      background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n      border-color: color-mix(in srgb, var(--prism-warn) 35%, transparent);\n    }\n    .comp-status--deprecated {\n      color: var(--prism-text-muted);\n      background: var(--prism-input-bg);\n      border-color: var(--prism-border-strong);\n    }\n\n    .comp-desc {\n      margin: 6px 0 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-2);\n      max-width: 72ch;\n      line-height: 1.55;\n    }\n\n    .comp-tags {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--radius-xs);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-primary);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .comp-head-stats {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 251 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 258 }); })();

package/dist/app/component-head/prism-stat.component.d.ts

@@ -3,7 +3,7 @@ export declare class PrismStatComponent {
     readonly value: import("@angular/core").InputSignal<string | number>;
     readonly label: import("@angular/core").InputSignal<string>;
     readonly pill: import("@angular/core").InputSignal<string | undefined>;
-    readonly pillVariant: import("@angular/core").InputSignal<"ok" | "warn">;
+    readonly pillVariant: import("@angular/core").InputSignal<"ok" | "warn" | "danger">;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismStatComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismStatComponent, "prism-stat", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "pillVariant": { "alias": "pillVariant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/dist/app/component-head/prism-stat.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-stat.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-stat.component.ts"],"names":[],"mappings":";AAEA,qBAwDa,kBAAkB;IAC7B,QAAQ,CAAC,KAAK,uDAAqC;IACnD,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,IAAI,0DAAmB;IAChC,QAAQ,CAAC,WAAW,qDAA8B;yCAJvC,kBAAkB;2CAAlB,kBAAkB;CAK9B"}
+{"version":3,"file":"prism-stat.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-stat.component.ts"],"names":[],"mappings":";AAEA,qBA+Da,kBAAkB;IAC7B,QAAQ,CAAC,KAAK,uDAAqC;IACnD,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,IAAI,0DAAmB;IAChC,QAAQ,CAAC,WAAW,gEAAyC;yCAJlD,kBAAkB;2CAAlB,kBAAkB;CAK9B"}

package/dist/app/component-head/prism-stat.component.js

@@ -6,7 +6,7 @@ function PrismStatComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("warn", ctx_r0.pillVariant() === "warn");
+    i0.ɵɵclassProp("warn", ctx_r0.pillVariant() === "warn")("danger", ctx_r0.pillVariant() === "danger");
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.pill());
 } }
@@ -20,10 +20,10 @@ export class PrismStatComponent {
     pillVariant = input('ok', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pillVariant" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismStatComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismStatComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismStatComponent, selectors: [["prism-stat"]], inputs: { value: [1, "value"], label: [1, "label"], pill: [1, "pill"], pillVariant: [1, "pillVariant"] }, decls: 6, vars: 3, consts: [[1, "stat"], [1, "stat-val"], [1, "pill", 3, "warn"], [1, "stat-lbl"], [1, "pill"]], template: function PrismStatComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismStatComponent, selectors: [["prism-stat"]], inputs: { value: [1, "value"], label: [1, "label"], pill: [1, "pill"], pillVariant: [1, "pillVariant"] }, decls: 6, vars: 3, consts: [[1, "stat"], [1, "stat-val"], [1, "pill", 3, "warn", "danger"], [1, "stat-lbl"], [1, "pill"]], template: function PrismStatComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵtext(2);
-            i0.ɵɵconditionalCreate(3, PrismStatComponent_Conditional_3_Template, 2, 3, "span", 2);
+            i0.ɵɵconditionalCreate(3, PrismStatComponent_Conditional_3_Template, 2, 5, "span", 2);
             i0.ɵɵdomElementEnd();
             i0.ɵɵdomElementStart(4, "div", 3);
             i0.ɵɵtext(5);
@@ -35,7 +35,7 @@ export class PrismStatComponent {
             i0.ɵɵconditional(ctx.pill() ? 3 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.label());
-        } }, styles: [".stat[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      gap: 2px;\n      min-width: 64px;\n    }\n    .stat-val[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xl);\n      font-weight: 600;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .pill[_ngcontent-%COMP%] {\n      padding: 0 5px;\n      font-size: 9.5px;\n      border-radius: 3px;\n      background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n      color: var(--prism-success);\n      font-weight: 700;\n      letter-spacing: 0.04em;\n    }\n    .pill.warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n      color: var(--prism-warn);\n    }\n    .stat-lbl[_ngcontent-%COMP%] {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }"] });
+        } }, styles: [".stat[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      gap: 2px;\n      min-width: 64px;\n    }\n    .stat-val[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xl);\n      font-weight: 600;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .pill[_ngcontent-%COMP%] {\n      padding: 0 5px;\n      font-size: 9.5px;\n      border-radius: 3px;\n      background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n      color: var(--prism-success);\n      font-weight: 700;\n      letter-spacing: 0.04em;\n    }\n    .pill.warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n      color: var(--prism-warn);\n    }\n    .pill.danger[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-danger) 15%, transparent);\n      color: var(--prism-danger);\n    }\n    .stat-lbl[_ngcontent-%COMP%] {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismStatComponent, [{
         type: Component,
@@ -44,13 +44,16 @@ export class PrismStatComponent {
       <div class="stat-val">
         {{ value() }}
         @if (pill()) {
-        <span class="pill" [class.warn]="pillVariant() === 'warn'">{{
-          pill()
-        }}</span>
+        <span
+          class="pill"
+          [class.warn]="pillVariant() === 'warn'"
+          [class.danger]="pillVariant() === 'danger'"
+          >{{ pill() }}</span
+        >
         }
       </div>
       <div class="stat-lbl">{{ label() }}</div>
     </div>
-  `, styles: ["\n    .stat {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      gap: 2px;\n      min-width: 64px;\n    }\n    .stat-val {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xl);\n      font-weight: 600;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .pill {\n      padding: 0 5px;\n      font-size: 9.5px;\n      border-radius: 3px;\n      background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n      color: var(--prism-success);\n      font-weight: 700;\n      letter-spacing: 0.04em;\n    }\n    .pill.warn {\n      background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n      color: var(--prism-warn);\n    }\n    .stat-lbl {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }\n  "] }]
+  `, styles: ["\n    .stat {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      gap: 2px;\n      min-width: 64px;\n    }\n    .stat-val {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xl);\n      font-weight: 600;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .pill {\n      padding: 0 5px;\n      font-size: 9.5px;\n      border-radius: 3px;\n      background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n      color: var(--prism-success);\n      font-weight: 700;\n      letter-spacing: 0.04em;\n    }\n    .pill.warn {\n      background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n      color: var(--prism-warn);\n    }\n    .pill.danger {\n      background: color-mix(in srgb, var(--prism-danger) 15%, transparent);\n      color: var(--prism-danger);\n    }\n    .stat-lbl {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }\n  "] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], pillVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "pillVariant", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 59 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 66 }); })();

package/dist/app/panels/panel-host/panel-badge.d.ts

@@ -0,0 +1,29 @@
+import type { PanelBadge, PanelDefinition, RuntimeComponent } from '../../../plugin/plugin.types.js';
+/**
+ * The live figures the built-in tabs badge themselves with.
+ *
+ * Passed in rather than injected so this stays a pure function. The panel host
+ * reads them from its own services and hands them over; that is the whole
+ * reason the built-in chain could not simply be expressed as
+ * {@link PanelDefinition.badge} callbacks — `a11y` reports a running audit, not
+ * anything the component's meta holds.
+ */
+export interface PanelBadgeContext {
+    inputCount: number;
+    a11yScore: number | null;
+    coverageScore: number | null;
+}
+/**
+ * The badge a panel's tab carries, if any.
+ *
+ * A panel that declares its own {@link PanelDefinition.badge} wins outright,
+ * which is what lets a plugin put a number on its own tab without the panel
+ * host learning about it. The chain below it predates that hook and stays for
+ * the tabs it already covers.
+ *
+ * Returning `null` is the common case and the important one: a badge that is
+ * always present stops being a signal, so every branch here has a way to say
+ * "nothing worth reporting" rather than falling back to a zero.
+ */
+export declare function resolvePanelBadge(panel: PanelDefinition, component: RuntimeComponent | null, context: PanelBadgeContext): PanelBadge | null;
+//# sourceMappingURL=panel-badge.d.ts.map

package/dist/app/panels/panel-host/panel-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-badge.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/panel-badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,iCAAiC,CAAC;AAEzC;;;;;;;;GAQG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAUD;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,eAAe,EACtB,SAAS,EAAE,gBAAgB,GAAG,IAAI,EAClC,OAAO,EAAE,iBAAiB,GACzB,UAAU,GAAG,IAAI,CA0BnB"}

package/dist/app/panels/panel-host/panel-badge.js

@@ -0,0 +1,42 @@
+/** Green at 90, amber down to 70, red below — shared by a11y and coverage. */
+function gradeScore(score) {
+    return {
+        text: String(score),
+        variant: score >= 90 ? 'ok' : score >= 70 ? 'warn' : 'danger',
+    };
+}
+/**
+ * The badge a panel's tab carries, if any.
+ *
+ * A panel that declares its own {@link PanelDefinition.badge} wins outright,
+ * which is what lets a plugin put a number on its own tab without the panel
+ * host learning about it. The chain below it predates that hook and stays for
+ * the tabs it already covers.
+ *
+ * Returning `null` is the common case and the important one: a badge that is
+ * always present stops being a signal, so every branch here has a way to say
+ * "nothing worth reporting" rather than falling back to a zero.
+ */
+export function resolvePanelBadge(panel, component, context) {
+    if (panel.badge) {
+        // No component means no subject to report on; calling the hook with a
+        // placeholder would invite it to invent a number.
+        return component ? panel.badge(component) : null;
+    }
+    if (panel.id === 'controls') {
+        return context.inputCount > 0
+            ? { text: String(context.inputCount), variant: 'default' }
+            : null;
+    }
+    if (panel.id === 'a11y') {
+        // `=== null` rather than a falsy check: a score of 0 is a real, and the
+        // most urgent, thing to show.
+        return context.a11yScore === null ? null : gradeScore(context.a11yScore);
+    }
+    if (panel.id === 'coverage') {
+        return context.coverageScore === null
+            ? null
+            : gradeScore(context.coverageScore);
+    }
+    return null;
+}

package/dist/app/panels/panel-host/prism-panel-host.component.d.ts

@@ -18,10 +18,7 @@ export declare class PrismPanelHostComponent {
     private readonly a11yScore;
     private readonly coverageScore;
     private readonly inputCount;
-    protected panelBadge(panelId: string): {
-        text: string;
-        variant: 'default' | 'ok' | 'warn' | 'danger';
-    } | null;
+    protected panelBadge(panel: PanelDefinition): import("../../../plugin/plugin.types.js").PanelBadge | null;
     private readonly builtInPanels;
     protected readonly allPanels: import("@angular/core").Signal<PanelDefinition[]>;
     protected readonly panelInputs: import("@angular/core").Signal<{

package/dist/app/panels/panel-host/prism-panel-host.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-panel-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/prism-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,mBAAmB,EAGnB,KAAK,IAAI,EAGV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAI1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;;AAEvE,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACzB,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,qBAuLa,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,SAAS,CAAC,QAAQ,CAAC,WAAW,sBAA+B;IAC7D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAExB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK3B;IAEH,OAAO,CAAC,QAAQ,CAAC,UAAU,CAGxB;IAEH,SAAS,CAAC,UAAU,CAClB,OAAO,EAAE,MAAM,GACd;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI;IAwBzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,oDAQzB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAE9D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IACF,SAAS,CAAC,QAAQ,CAAC,mBAAmB,uDAEpC;;IAsCF,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,mBAAmB;yCApJhB,uBAAuB;2CAAvB,uBAAuB;CAwKnC"}
+{"version":3,"file":"prism-panel-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/prism-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,mBAAmB,EAGnB,KAAK,IAAI,EAGV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAI1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;;AAGvE,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACzB,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,qBAuLa,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,SAAS,CAAC,QAAQ,CAAC,WAAW,sBAA+B;IAC7D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAExB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK3B;IAEH,OAAO,CAAC,QAAQ,CAAC,UAAU,CAGxB;IAEH,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,eAAe;IAQ3C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,oDAQzB;IAEH,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAE9D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IACF,SAAS,CAAC,QAAQ,CAAC,mBAAmB,uDAEpC;;IAsCF,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,mBAAmB;yCAlIhB,uBAAuB;2CAAvB,uBAAuB;CAsJnC"}

package/dist/app/panels/panel-host/prism-panel-host.component.js

@@ -7,6 +7,7 @@ import { PrismNavigationService } from '../../services/prism-navigation.service.
 import { PrismPanelService } from '../../services/prism-panel.service.js';
 import { PrismPluginService } from '../../services/prism-plugin.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import { resolvePanelBadge } from './panel-badge.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.id;
 function PrismPanelHostComponent_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -44,7 +45,7 @@ function PrismPanelHostComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", panel_r2.label, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_15_0 = ctx_r2.panelBadge(panel_r2.id)) ? 3 : -1, tmp_15_0);
+    i0.ɵɵconditional((tmp_15_0 = ctx_r2.panelBadge(panel_r2)) ? 3 : -1, tmp_15_0);
 } }
 function PrismPanelHostComponent_For_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -82,30 +83,12 @@ export class PrismPanelHostComponent {
         return comp?.meta.inputs.length ?? 0;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputCount" }] : /* istanbul ignore next */ []));
-    panelBadge(panelId) {
-        if (panelId === 'controls') {
-            const count = this.inputCount();
-            return count > 0 ? { text: String(count), variant: 'default' } : null;
-        }
-        if (panelId === 'a11y') {
-            const score = this.a11yScore();
-            if (score === null)
-                return null;
-            return {
-                text: String(score),
-                variant: score >= 90 ? 'ok' : score >= 70 ? 'warn' : 'danger',
-            };
-        }
-        if (panelId === 'coverage') {
-            const score = this.coverageScore();
-            if (score === null)
-                return null;
-            return {
-                text: String(score),
-                variant: score >= 90 ? 'ok' : score >= 70 ? 'warn' : 'danger',
-            };
-        }
-        return null;
+    panelBadge(panel) {
+        return resolvePanelBadge(panel, this.nav.activeComponent(), {
+            inputCount: this.inputCount(),
+            a11yScore: this.a11yScore(),
+            coverageScore: this.coverageScore(),
+        });
     }
     builtInPanels = BUILTIN_PANELS;
     allPanels = computed(() => {
@@ -245,7 +228,7 @@ export class PrismPanelHostComponent {
           <prism-icon [name]="panel.icon" [size]="13" />
           }
           {{ panel.label }}
-          @if (panelBadge(panel.id); as badge) {
+          @if (panelBadge(panel); as badge) {
           <span
             class="p-tab-badge"
             [class.ok]="badge.variant === 'ok'"
@@ -280,4 +263,4 @@ export class PrismPanelHostComponent {
     </div>
   `, styles: ["\n    .panel {\n      background: var(--prism-bg-elevated);\n      border-top: 1px solid var(--prism-border);\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n      height: 100%;\n    }\n\n    .panel-tabs {\n      display: flex;\n      align-items: center;\n      gap: 2px;\n      padding: 0 16px;\n      height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n      background: var(--prism-bg);\n      overflow-x: auto;\n      scrollbar-width: none;\n      flex-shrink: 0;\n    }\n    .panel-tabs::-webkit-scrollbar { display: none; }\n\n    .p-tab {\n      position: relative;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      gap: 7px;\n      padding: 0 12px;\n      font-size: var(--fs-md);\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n      transition: color var(--dur-fast);\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n    }\n    .p-tab:hover { color: var(--prism-text-2); }\n    .p-tab--active { color: var(--prism-text); }\n    .p-tab--active::after {\n      content: '';\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: -1px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      border-radius: 1px;\n    }\n\n    .p-tab-badge {\n      min-width: 16px;\n      height: 16px;\n      padding: 0 5px;\n      border-radius: 8px;\n      background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n      color: var(--prism-primary);\n      font-family: var(--font-mono);\n      font-size: 10px;\n      font-weight: 700;\n      display: grid;\n      place-items: center;\n    }\n    .p-tab-badge.ok {\n      background: color-mix(in srgb, var(--prism-success) 18%, transparent);\n      color: var(--prism-success);\n    }\n    .p-tab-badge.warn {\n      background: color-mix(in srgb, var(--prism-warn) 18%, transparent);\n      color: var(--prism-warn);\n    }\n    .p-tab-badge.danger {\n      background: color-mix(in srgb, var(--prism-danger) 18%, transparent);\n      color: var(--prism-danger);\n    }\n\n    .panel-tabs-right {\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding-left: 10px;\n    }\n\n    .icon-btn {\n      width: 28px;\n      height: 28px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--radius-sm);\n      color: var(--prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      transition: all var(--dur-fast);\n    }\n    .icon-btn:hover {\n      background: var(--prism-input-bg);\n      color: var(--prism-text);\n    }\n\n    .panel-body {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n      background: var(--prism-bg-elevated);\n    }\n    .panel-body::-webkit-scrollbar { width: 8px; height: 8px; }\n    .panel-body::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n\n    .panel-pane { height: 100%; }\n    .panel-pane[hidden] { display: none; }\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 213 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 214 }); })();

package/dist/app/services/prism-capture.service.d.ts

@@ -33,8 +33,16 @@ export declare const CAPTURE_TRANSPARENT_SELECTOR: string;
  * mode strips the canvas background down to its patternless colour — keeping
  * whatever `@Showcase({ bg })` declared, or clearing the whole paint chain to
  * real transparency for `bg: 'transparent'` — suppresses every piece of
- * canvas chrome, locks zoom to 1 and freezes animation, so a variant renders
- * identically on every run.
+ * canvas chrome, removes every other shell region from layout so the canvas
+ * owns the viewport, locks zoom to 1 and freezes animation, so a variant
+ * renders identically on every run.
+ *
+ * What that buys a runner is the right to screenshot `.demo-wrap` directly:
+ * the target is composited against the declared background over its whole box,
+ * not merely over the part that fits inside the canvas viewport. The one thing
+ * the mode cannot do is make room that the viewport does not have — a
+ * component larger than the viewport still overflows, and sizing the viewport
+ * to fit is the runner's job.
  *
  * The flag is read once from the URL at construction time and never written
  * back — {@link PrismUrlStateService} rebuilds the query string from scratch,

package/dist/app/services/prism-capture.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAItD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,4BAA4B,QAEgG,CAAC;AA8C1I;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAItB;IAEF,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAdZ,mBAAmB;6CAAnB,mBAAmB;CAuB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAIzD"}
+{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAItD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,4BAA4B,QAEgG,CAAC;AA+H1I;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAItB;IAEF,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAdZ,mBAAmB;6CAAnB,mBAAmB;CAuB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAIzD"}

package/dist/app/services/prism-capture.service.js

@@ -28,6 +28,51 @@ const STYLE_ELEMENT_ID = 'ng-prism-capture-styles';
  */
 export const CAPTURE_TRANSPARENT_SELECTOR = `[${CAPTURE_ATTRIBUTE}] .prism-canvas-stage[data-bg='transparent'],\n` +
     `[${CAPTURE_ATTRIBUTE}] :is(html, body, .prism-shell, .prism-main, .prism-canvas-wrap):has(.prism-canvas-stage[data-bg='transparent'])`;
+/**
+ * Everything capture mode removes from layout so the canvas owns the viewport.
+ *
+ * The canvas is not an overlay host: `.prism-canvas-wrap` is one flex sibling
+ * among several inside `.prism-main`, which is itself one grid cell of
+ * `.prism-body` inside `.prism-shell`. A screenshot tool captures the *screen
+ * coordinates* of `.demo-wrap`, and `.demo-wrap` is centred in a stage that
+ * scrolls — so whenever the component is larger than the canvas viewport, its
+ * box extends past the canvas and the compositor fills those coordinates with
+ * whichever sibling lives there. Measured in Chromium against the real
+ * stylesheets, a 200x400 component at a 1280x720 viewport leaks 57px upwards
+ * into the variant ribbon and 121px downwards into the panel. That is neither
+ * a z-order nor a clipping bug: the capture target legitimately extends beyond
+ * its scroll container and the page paints something there.
+ *
+ * `display: none` rather than `visibility: hidden`, and this is the one thing
+ * not to "simplify" later. Keeping the layout box is the tempting minimal-churn
+ * fix — nothing re-centres, no unaffected baseline moves — and it does not
+ * work: the box still occupies its space, so what paints at those coordinates
+ * becomes `.prism-main`'s own background instead of the panel. Measured at the
+ * bottom row of a `bg: 'transparent'` capture: `#11284e` with the panel left
+ * alone, `#11284e` with `visibility: hidden`, transparent only once the panel
+ * leaves layout. The canvas is `flex: 1`; it has to reclaim the space for the
+ * stage to paint there, and only removal from layout gives it back.
+ *
+ * Written as a structural rule rather than a list of chrome selectors, because
+ * enumeration is what makes this class of bug recur: the list has to be revised
+ * every time the shell grows a region, nothing fails when it is not, and the
+ * baselines recorded in the meantime look perfectly fine while guarding the
+ * wrong image. At every level from the shell to the canvas wrap, the one child
+ * that leads to the stage survives and every sibling is removed, so a region
+ * added tomorrow is suppressed without anyone remembering this file exists.
+ *
+ * The track collapses are not cosmetic. `.prism-shell` and `.prism-body` are
+ * grids with sized tracks (`52px 1fr`, `var(--sw) 4px 1fr`); hiding the header
+ * and the sidebar without collapsing them would auto-place the survivor into
+ * the *first* track and render the canvas 52px tall or 264px wide.
+ *
+ * Scoped by `:has(.prism-canvas-stage)` throughout: a component page or a view
+ * panel has no canvas, and blanking the shell around it would leave a runner
+ * with an empty screenshot rather than an honest one.
+ */
+const CAPTURE_CANVAS_ONLY_SELECTOR = `[${CAPTURE_ATTRIBUTE}] ` +
+    `:is(.prism-shell, .prism-body, .prism-main, .prism-canvas-wrap)` +
+    `:has(.prism-canvas-stage) > :not(:has(.prism-canvas-stage))`;
 /**
  * Global stylesheet applied in capture mode.
  *
@@ -51,6 +96,23 @@ export const CAPTURE_TRANSPARENT_SELECTOR = `[${CAPTURE_ATTRIBUTE}] .prism-canva
  * layers involved. Alpha is not what the paragraph above rules out: a pattern
  * has a phase that moves when the component resizes, an alpha channel is a
  * per-pixel value that does not.
+ *
+ * Colour is only half of it. The rules from
+ * {@link CAPTURE_CANVAS_ONLY_SELECTOR} down hand the whole viewport to the
+ * canvas, which is what makes the declared background reach the *whole* of the
+ * capture target's box rather than only the part that happens to fit inside
+ * the canvas viewport.
+ *
+ * The stage's padding goes with them, and it buys more than the 32px it looks
+ * like. The stage is `height: 100%` under `content-box`, so its padding lands
+ * *outside* that height: the stage is 64px taller than the row it sits in,
+ * overflows it, and centres the component 32px below the true centre of what
+ * is actually painted. Dropping the padding makes the stage exactly the canvas
+ * and the component's centre the viewport's centre, which turns the guarantee
+ * crisp — a component is contained iff it fits the viewport. Measured: a
+ * 200x700 component at 1280x720 still leaks 22px past the canvas with the
+ * regions gone but the padding kept. None of that padding is ever inside a
+ * `.demo-wrap` screenshot, so nothing is lost by removing it.
  */
 const CAPTURE_STYLES = `
 [${CAPTURE_ATTRIBUTE}] *,
@@ -64,12 +126,29 @@ const CAPTURE_STYLES = `
 
 [${CAPTURE_ATTRIBUTE}] .prism-canvas-stage {
   background-image: none !important;
+  padding: 0 !important;
 }
 
 ${CAPTURE_TRANSPARENT_SELECTOR} {
   background-color: transparent !important;
   background-image: none !important;
 }
+
+${CAPTURE_CANVAS_ONLY_SELECTOR} {
+  display: none !important;
+}
+
+[${CAPTURE_ATTRIBUTE}] .prism-shell:has(.prism-canvas-stage) {
+  grid-template-rows: minmax(0, 1fr) !important;
+}
+
+[${CAPTURE_ATTRIBUTE}] .prism-body:has(.prism-canvas-stage) {
+  grid-template-columns: minmax(0, 1fr) !important;
+}
+
+[${CAPTURE_ATTRIBUTE}] .prism-canvas-wrap:has(.prism-canvas-stage) {
+  grid-template-rows: minmax(0, 1fr) !important;
+}
 `;
 /**
  * Capture-isolation mode.
@@ -79,8 +158,16 @@ ${CAPTURE_TRANSPARENT_SELECTOR} {
  * mode strips the canvas background down to its patternless colour — keeping
  * whatever `@Showcase({ bg })` declared, or clearing the whole paint chain to
  * real transparency for `bg: 'transparent'` — suppresses every piece of
- * canvas chrome, locks zoom to 1 and freezes animation, so a variant renders
- * identically on every run.
+ * canvas chrome, removes every other shell region from layout so the canvas
+ * owns the viewport, locks zoom to 1 and freezes animation, so a variant
+ * renders identically on every run.
+ *
+ * What that buys a runner is the right to screenshot `.demo-wrap` directly:
+ * the target is composited against the declared background over its whole box,
+ * not merely over the part that fits inside the canvas viewport. The one thing
+ * the mode cannot do is make room that the viewport does not have — a
+ * component larger than the viewport still overflows, and sizing the viewport
+ * to fit is the runner's job.
  *
  * The flag is read once from the URL at construction time and never written
  * back — {@link PrismUrlStateService} rebuilds the query string from scratch,

package/dist/builder/scanner/component.scanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.scanner.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/component.scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAwCrE;;GAEG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,EAAE,CAAC,MAAM,EAAE,EACpB,OAAO,EAAE,EAAE,CAAC,WAAW,GACtB,gBAAgB,EAAE,CA8CpB"}
+{"version":3,"file":"component.scanner.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/component.scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAmErE;;GAEG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,EAAE,CAAC,MAAM,EAAE,EACpB,OAAO,EAAE,EAAE,CAAC,WAAW,GACtB,gBAAgB,EAAE,CA8CpB"}

package/dist/builder/scanner/component.scanner.js

@@ -8,6 +8,29 @@ function isComponentStatus(value) {
 }
 import { evaluateExpression, findDecorator, getDecoratorArgument, } from './ast-utils.js';
 import { extractInputs, extractOutputs } from './input.extractor.js';
+/**
+ * Backgrounds that still work but should not be reached for any more.
+ *
+ * `checker` draws the same checkerboard as `transparent` while browsing, so
+ * the canvas cannot tell them apart — but it captures as `--prism-bg-surface`,
+ * a *theme* token, which makes a baseline recorded on it depend on the theme
+ * the runner's browser started in. Since `transparent` took over as the
+ * default, it is the value that looks like transparency and is not.
+ *
+ * Warned rather than rejected: the value is valid, and dropping it would
+ * change what a component renders on — a break wearing a warning's clothes.
+ * Scheduled for removal in 23.0.0, the next Angular-aligned major.
+ */
+const DEPRECATED_BGS = {
+    checker: "use 'transparent' for the same look with a capture that keeps its alpha, or 'light'/'dark' for an absolute colour",
+};
+function warnDeprecatedBg(bg, where) {
+    const advice = DEPRECATED_BGS[bg];
+    if (!advice)
+        return;
+    console.warn(`⚠ ng-prism: ${where} declares bg "${bg}", which is deprecated and will ` +
+        `be removed in 23.0.0 — ${advice}.`);
+}
 function isCanvasBg(value) {
     return (typeof value === 'string' &&
         CANVAS_BGS.includes(value));
@@ -110,10 +133,10 @@ function extractShowcaseConfig(decorator, className) {
     if (obj['bg'] !== undefined) {
         if (isCanvasBg(obj['bg'])) {
             config.bg = obj['bg'];
+            warnDeprecatedBg(obj['bg'], className);
         }
         else {
-            console.warn(`⚠ ng-prism: ${className} declares invalid bg "${String(obj['bg'])}" — ` +
-                `expected one of: dots, plain, light, dark, checker. Skipping.`);
+            console.warn(`⚠ ng-prism: ${className} declares invalid bg "${String(obj['bg'])}" — ` + `expected one of: ${CANVAS_BGS.join(', ')}. Skipping.`);
         }
     }
     if (obj['canvasLayout'] !== undefined) {
@@ -127,9 +150,13 @@ function extractShowcaseConfig(decorator, className) {
     if (Array.isArray(obj['variants'])) {
         config.variants = obj['variants'].map((variant) => {
             const cleaned = { ...variant };
+            if (isCanvasBg(variant['bg'])) {
+                warnDeprecatedBg(variant['bg'], `${className} variant "${String(variant['name'])}"`);
+            }
             if (variant['bg'] !== undefined && !isCanvasBg(variant['bg'])) {
                 console.warn(`⚠ ng-prism: ${className} variant "${String(variant['name'])}" declares ` +
-                    `invalid bg "${String(variant['bg'])}" — expected one of: dots, plain, light, dark, checker. Skipping.`);
+                    `invalid bg "${String(variant['bg'])}" — expected one of: ` +
+                    `${CANVAS_BGS.join(', ')}. Skipping.`);
                 delete cleaned['bg'];
             }
             if (variant['canvasLayout'] !== undefined &&

package/dist/plugin/index.d.ts

@@ -1,4 +1,4 @@
-export type { NgPrismPlugin, PanelDefinition, ControlDefinition, HeaderWidgetDefinition, NgPrismConfig, PrismManifest, ScannedComponent, InputMeta, OutputMeta, RuntimeManifest, RuntimeComponent, DiscoveryManifest, DiscoveryComponent, DiscoveryVariant, DiscoveryPage, } from './plugin.types.js';
+export type { NgPrismPlugin, PanelBadge, PanelDefinition, ControlDefinition, HeaderWidgetDefinition, NgPrismConfig, PrismManifest, ScannedComponent, InputMeta, OutputMeta, RuntimeManifest, RuntimeComponent, DiscoveryManifest, DiscoveryComponent, DiscoveryVariant, DiscoveryPage, } from './plugin.types.js';
 export type { StyleguidePage, CustomPage, ComponentPage, } from './page.types.js';
 export type { CanvasBg } from '../shared/canvas-bg.type.js';
 export { CANVAS_BGS } from '../shared/canvas-bg.type.js';

package/dist/plugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugin/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,sBAAsB,EACtB,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,cAAc,EACd,UAAU,EACV,aAAa,GACd,MAAM,iBAAiB,CAAC;AAKzB,YAAY,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC/E,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugin/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,aAAa,EACb,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,sBAAsB,EACtB,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,cAAc,EACd,UAAU,EACV,aAAa,GACd,MAAM,iBAAiB,CAAC;AAKzB,YAAY,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC/E,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/plugin/plugin.types.d.ts

@@ -29,6 +29,16 @@ export interface HeaderWidgetDefinition {
     /** Sort order within the same placement (lower = earlier). Default: 0. */
     order?: number;
 }
+/** A short marker rendered on a panel's tab, usually a count. */
+export interface PanelBadge {
+    /** Kept to a couple of characters — the tab bar scrolls horizontally. */
+    text: string;
+    /**
+     * Colour role. `default` is the neutral primary tint used for a plain count;
+     * the other three carry a judgement and should be reserved for one.
+     */
+    variant?: 'default' | 'ok' | 'warn' | 'danger';
+}
 export interface PanelDefinition {
     id: string;
     label: string;
@@ -46,6 +56,15 @@ export interface PanelDefinition {
     providers?: Provider[];
     /** When provided, the panel tab is only shown if this returns true for the active component */
     isVisible?: (component: RuntimeComponent) => boolean;
+    /**
+     * When provided, the panel's tab carries this badge for the active
+     * component. Return `null` for "nothing worth saying" — a badge that is
+     * always present stops being a signal.
+     *
+     * Called during change detection, so it has to be cheap and pure: read what
+     * the component's `meta` already holds, do not fetch and do not inject.
+     */
+    badge?: (component: RuntimeComponent) => PanelBadge | null;
     /**
      * Keep the panel's component instance alive across tab switches.
      * When `true`, the panel is rendered once on first activation and merely hidden

package/dist/plugin/plugin.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.types.d.ts","sourceRoot":"","sources":["../../src/plugin/plugin.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IAGb,kBAAkB,CAAC,EAAE,CACnB,SAAS,EAAE,gBAAgB,KACxB,gBAAgB,GAAG,IAAI,GAAG,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,CACd,IAAI,EAAE,cAAc,KACjB,cAAc,GAAG,IAAI,GAAG,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,CAChB,QAAQ,EAAE,aAAa,KACpB,aAAa,GAAG,IAAI,GAAG,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IAG1D,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC/B,4DAA4D;IAC5D,aAAa,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACzC,sEAAsE;IACtE,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAsB;IACrC,+DAA+D;IAC/D,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7C,iHAAiH;IACjH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC5B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1B,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7C,gBAAgB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACjC,oBAAoB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC9B,6GAA6G;IAC7G,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,gBAAgB,KAAK,OAAO,CAAC;IACrD;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,iEAAiE;IACjE,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;IACzC,4DAA4D;IAC5D,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;CAC1B;AAID,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,OAAO,gCAAgC,EAAE,cAAc,CAAC;IACxE,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,aAAa,EAAE;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,OAAO,CAAC;QACpB,WAAW,EAAE,OAAO,CAAC;KACtB,CAAC;IACF,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EACA,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAID,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;CACrB;AAID;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,EAAE,EAAE,QAAQ,CAAC;IACb,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf;AAID,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,EAAE,CAAC,EAAE;QACH,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACvB,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACxB,eAAe,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACzB,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9B,WAAW,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5B,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KACxB,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC7B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,kCAAkC,EAAE,iBAAiB,CAAC;CACrE"}
+{"version":3,"file":"plugin.types.d.ts","sourceRoot":"","sources":["../../src/plugin/plugin.types.ts"],"names":[],"mappings":"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"}

package/dist/shared/canvas-bg.type.d.ts

@@ -1,11 +1,29 @@
-export type CanvasBg = 'dots' | 'plain' | 'light' | 'dark' | 'checker' | 'transparent';
 /**
- * Every value {@link CanvasBg} accepts.
+ * A surface the canvas can paint behind a component.
  *
- * This is the type's value list, not the list a user can cycle through — the
- * canvas toolbar keeps its own, deliberately shorter one. Persisted canvas
- * state is validated against *this* list, so a value that only a decorator can
- * declare still round-trips rather than being discarded as unknown.
+ * Three groups, and the distinction only matters once a variant is under
+ * visual regression. `light` and `dark` are absolute colours. `dots` and
+ * `plain` follow the active theme. `transparent` has no colour at all and is
+ * the only one whose capture carries an alpha channel.
+ */
+export type CanvasBg = 'dots' | 'plain' | 'light' | 'dark'
+/**
+ * @deprecated Deprecated since 22.2.0, removed in 23.0.0. It draws the same
+ * checkerboard as `transparent` while browsing, so the canvas cannot tell
+ * the two apart — but it captures as `--prism-bg-surface`, a *theme* token,
+ * which makes a baseline recorded on it depend on the theme the runner's
+ * browser started in. Use `transparent` for the same look with a capture
+ * that keeps its alpha, or `light`/`dark` for an absolute colour.
+ */
+ | 'checker' | 'transparent';
+/**
+ * Every value {@link CanvasBg} accepts, deprecated ones included.
+ *
+ * Also the list the canvas toolbar renders. That group is a readout as much as
+ * a control — it marks the active and the recommended background — so a value
+ * missing from it is a value the UI cannot *show*, not merely one it declines
+ * to offer. Persisted canvas state is validated against this list too, so a
+ * value only a decorator can reach still round-trips.
  */
 export declare const CANVAS_BGS: readonly CanvasBg[];
 //# sourceMappingURL=canvas-bg.type.d.ts.map

package/dist/shared/canvas-bg.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-bg.type.d.ts","sourceRoot":"","sources":["../../src/shared/canvas-bg.type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,SAAS,GACT,aAAa,CAAC;AAElB;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,EAAE,SAAS,QAAQ,EAOhC,CAAC"}
+{"version":3,"file":"canvas-bg.type.d.ts","sourceRoot":"","sources":["../../src/shared/canvas-bg.type.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM;AACR;;;;;;;GAOG;GACD,SAAS,GACT,aAAa,CAAC;AAElB;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,SAAS,QAAQ,EAOhC,CAAC"}

package/dist/shared/canvas-bg.type.js

@@ -1,10 +1,11 @@
 /**
- * Every value {@link CanvasBg} accepts.
+ * Every value {@link CanvasBg} accepts, deprecated ones included.
  *
- * This is the type's value list, not the list a user can cycle through — the
- * canvas toolbar keeps its own, deliberately shorter one. Persisted canvas
- * state is validated against *this* list, so a value that only a decorator can
- * declare still round-trips rather than being discarded as unknown.
+ * Also the list the canvas toolbar renders. That group is a readout as much as
+ * a control — it marks the active and the recommended background — so a value
+ * missing from it is a value the UI cannot *show*, not merely one it declines
+ * to offer. Persisted canvas state is validated against this list too, so a
+ * value only a decorator can reach still round-trips.
  */
 export const CANVAS_BGS = [
     'dots',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "22.2.0-beta.2",
+  "version": "22.2.0-beta.4",
   "description": "ng-prism — the Angular-native Storybook alternative. Lightweight component showcase with @Showcase decorator, no story files needed.",
   "keywords": [
     "ng-prism",