@ng-prism/core 22.2.0-beta.3 → 22.2.0-beta.5

package/dist/app/canvas/prism-canvas-bg-pill.component.js

@@ -27,7 +27,7 @@ export class PrismCanvasBgPillComponent {
             i0.ɵɵconditionalCreate(0, PrismCanvasBgPillComponent_Conditional_0_Template, 5, 1, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.visible() ? 0 : -1);
-        } }, styles: ["[_nghost-%COMP%] {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top, 12px);\n      right: var(--prism-canvas-overlay-inline, 20px);\n      pointer-events: none;\n      z-index: 2;\n      transition: top var(--dur-base), right var(--dur-base);\n    }\n    .prism-bg-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--fs-xs);\n      font-family: var(--font-sans);\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: _ngcontent-%COMP%_fadeIn var(--dur-base) ease-out;\n    }\n    .label[_ngcontent-%COMP%] { letter-spacing: 0.02em; }\n    .reset[_ngcontent-%COMP%] {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .reset[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    @keyframes _ngcontent-%COMP%_fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n      position: absolute;\n      top: var(--%NS%prism-canvas-overlay-top, 12px);\n      right: var(--%NS%prism-canvas-overlay-inline, 20px);\n      pointer-events: none;\n      z-index: 2;\n      transition: top var(--%NS%dur-base), right var(--%NS%dur-base);\n    }\n    .prism-bg-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 4px 4px 4px 10px;\n      border-radius: 999px;\n      font-size: var(--%NS%fs-xs);\n      font-family: var(--%NS%font-sans);\n      background: color-mix(in srgb, var(--%NS%prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n      backdrop-filter: blur(8px);\n      pointer-events: auto;\n      animation: _ngcontent-%COMP%_fadeIn var(--%NS%dur-base) ease-out;\n    }\n    .label[_ngcontent-%COMP%] { letter-spacing: 0.02em; }\n    .reset[_ngcontent-%COMP%] {\n      height: 22px;\n      padding: 0 10px;\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      color: var(--%NS%prism-text);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background var(--%NS%dur-fast);\n    }\n    .reset[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n    }\n    @keyframes _ngcontent-%COMP%_fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasBgPillComponent, [{
         type: Component,

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

@@ -158,7 +158,7 @@ export class PrismCanvasRulersComponent {
             i0.ɵɵconditionalCreate(0, PrismCanvasRulersComponent_Conditional_0_Template, 6, 0, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.canvas.rulers() ? 0 : -1);
-        } }, styles: ["[_nghost-%COMP%] { display: contents; }\n\n    .ruler-wrap[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 4;\n      overflow: hidden;\n    }\n\n    .ruler[_ngcontent-%COMP%] { position: absolute; }\n    .ruler--top[_ngcontent-%COMP%] {\n      top: 0;\n      left: 20px;\n      right: 0;\n      height: 20px;\n    }\n    .ruler--left[_ngcontent-%COMP%] {\n      top: 20px;\n      left: 0;\n      bottom: 0;\n      width: 20px;\n    }\n    .ruler-corner[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 20px;\n      height: 20px;\n      background: var(--prism-bg);\n      border-right: 1px solid var(--prism-border);\n      border-bottom: 1px solid var(--prism-border);\n      z-index: 1;\n    }"] });
+        } }, styles: ["[_nghost-%COMP%] { display: contents; }\n\n    .ruler-wrap[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 4;\n      overflow: hidden;\n    }\n\n    .ruler[_ngcontent-%COMP%] { position: absolute; }\n    .ruler--top[_ngcontent-%COMP%] {\n      top: 0;\n      left: 20px;\n      right: 0;\n      height: 20px;\n    }\n    .ruler--left[_ngcontent-%COMP%] {\n      top: 20px;\n      left: 0;\n      bottom: 0;\n      width: 20px;\n    }\n    .ruler-corner[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 20px;\n      height: 20px;\n      background: var(--%NS%prism-bg);\n      border-right: 1px solid var(--%NS%prism-border);\n      border-bottom: 1px solid var(--%NS%prism-border);\n      z-index: 1;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasRulersComponent, [{
         type: Component,

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,30 @@ 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: readonly CanvasBg[];
+    /** What a background means, where the canvas cannot show the difference. */
+    /**
+     * Bound with `[attr.title]`, never `[title]`. A property binding assigns to
+     * `HTMLElement.title`, a non-nullable DOMString, so the `null` below would
+     * be stringified and every unremarkable button would carry a tooltip
+     * reading "null" — four of the six in the common case.
      */
-    protected readonly bgs: CanvasBg[];
+    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;;;;;OAKG;IACH,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;yCAzD5B,2BAA2B;2CAA3B,2BAA2B;CA4DvC"}

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.ɵɵattribute("title", ctx_r2.bgTitle(bg_r2));
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.variantBg.recommended() === bg_r2 ? 1 : -1);
     i0.ɵɵadvance();
@@ -30,7 +31,7 @@ function PrismCanvasToolbarComponent_For_5_Template(rf, ctx) { if (rf & 1) {
 } }
 function PrismCanvasToolbarComponent_For_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵelementStart(0, "button", 13);
     i0.ɵɵlistener("click", function PrismCanvasToolbarComponent_For_11_Template_button_click_0_listener() { const z_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.canvas.setZoom(z_r5.value)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -54,21 +55,41 @@ 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.
+     *
+     * 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.
      *
-     * `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.
+     * `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. */
+    /**
+     * Bound with `[attr.title]`, never `[title]`. A property binding assigns to
+     * `HTMLElement.title`, a non-nullable DOMString, so the `null` below would
+     * be stringified and every unremarkable button would carry a tooltip
+     * reading "null" — four of the six in the common case.
+     */
+    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%' },
@@ -79,7 +100,7 @@ export class PrismCanvasToolbarComponent {
         return s.charAt(0).toUpperCase() + s.slice(1);
     }
     static ɵfac = function PrismCanvasToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCanvasToolbarComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 23, vars: 9, consts: [[1, "canvas-toolbar"], [1, "tool-label"], [1, "tool-group"], [1, "tool-btn", 3, "tool-btn--active", "tool-btn--recommended", "title"], [1, "tool-sep"], [1, "tool-btn", 3, "tool-btn--active"], ["title", "Toggle guides", "aria-label", "Toggle guides", 1, "tool-btn", 3, "click"], ["name", "crosshair", 3, "size"], ["title", "Toggle rulers", "aria-label", "Toggle rulers", 1, "tool-btn", 3, "click"], ["name", "move", 3, "size"], [1, "tool-spacer"], ["title", "Toggle Angular template", "aria-label", "Toggle Angular template", 1, "tool-btn", "tool-btn--tpl", 3, "click"], ["name", "code", 3, "size"], [1, "tool-btn", 3, "click", "title"], ["width", "11", "height", "11", "viewBox", "0 0 24 24", "fill", "#facc15", "aria-label", "Recommended", 1, "bg-star"], ["d", "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"], [1, "tool-btn", 3, "click"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismCanvasToolbarComponent, selectors: [["prism-canvas-toolbar"]], decls: 23, vars: 9, consts: [[1, "canvas-toolbar"], [1, "tool-label"], [1, "tool-group"], [1, "tool-btn", 3, "tool-btn--active", "tool-btn--recommended"], [1, "tool-sep"], [1, "tool-btn", 3, "tool-btn--active"], ["title", "Toggle guides", "aria-label", "Toggle guides", 1, "tool-btn", 3, "click"], ["name", "crosshair", 3, "size"], ["title", "Toggle rulers", "aria-label", "Toggle rulers", 1, "tool-btn", 3, "click"], ["name", "move", 3, "size"], [1, "tool-spacer"], ["title", "Toggle Angular template", "aria-label", "Toggle Angular template", 1, "tool-btn", "tool-btn--tpl", 3, "click"], ["name", "code", 3, "size"], [1, "tool-btn", 3, "click"], ["width", "11", "height", "11", "viewBox", "0 0 24 24", "fill", "#facc15", "aria-label", "Recommended", 1, "bg-star"], ["d", "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"]], template: function PrismCanvasToolbarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
             i0.ɵɵtext(2, "Canvas");
             i0.ɵɵelementEnd();
@@ -127,7 +148,7 @@ export class PrismCanvasToolbarComponent {
             i0.ɵɵclassProp("tool-btn--tpl-active", ctx.layout.templatePopoverVisible());
             i0.ɵɵadvance();
             i0.ɵɵproperty("size", 13);
-        } }, dependencies: [PrismIconComponent], styles: [".canvas-toolbar[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .tool-btn--active[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));\n    }\n\n    .tool-sep[_ngcontent-%COMP%] {\n      width: 1px;\n      height: 18px;\n      background: var(--prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label[_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      margin-right: 2px;\n    }\n\n    .tool-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n    .tool-btn--tpl[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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    }"] });
+        } }, dependencies: [PrismIconComponent], styles: [".canvas-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 20px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      background: var(--%NS%prism-bg);\n      min-height: 44px;\n    }\n\n    .tool-group[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 1px;\n      padding: 2px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: var(--%NS%radius-md);\n    }\n\n    .tool-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 9px;\n      border-radius: var(--%NS%radius-sm);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      font-size: var(--%NS%fs-sm);\n      color: var(--%NS%prism-text-muted);\n      transition: all var(--%NS%dur-fast);\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--%NS%font-sans);\n    }\n    .tool-btn[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-text);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    }\n    .tool-btn--active[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 15%, transparent);\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n    }\n    .bg-star[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));\n    }\n\n    .tool-sep[_ngcontent-%COMP%] {\n      width: 1px;\n      height: 18px;\n      background: var(--%NS%prism-border);\n      margin: 0 4px;\n    }\n\n    .tool-label[_ngcontent-%COMP%] {\n      font-size: var(--%NS%fs-xs);\n      color: var(--%NS%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[_ngcontent-%COMP%] { flex: 1; }\n\n    .tool-btn--tpl[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-primary);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n      border: 1px solid\n        color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n      font-family: var(--%NS%font-mono);\n    }\n    .tool-btn--%NS%tpl[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-primary);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 18%, transparent);\n    }\n    .tool-btn--tpl.tool-btn--tpl-active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 22%, transparent);\n      box-shadow: inset 0 0 0 1px\n        color-mix(in srgb, var(--%NS%prism-primary) 35%, transparent);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasToolbarComponent, [{
         type: Component,
@@ -140,11 +161,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
-          "
+          [attr.title]="bgTitle(bg)"
           (click)="setBg(bg)"
         >
           @if (variantBg.recommended() === bg) {
@@ -215,4 +232,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/canvas/prism-template-popover.component.js

@@ -122,7 +122,7 @@ export class PrismTemplatePopoverComponent {
             i0.ɵɵconditionalCreate(0, PrismTemplatePopoverComponent_Conditional_0_Template, 11, 7, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.layoutService.templatePopoverVisible() ? 0 : -1);
-        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: contents; }\n\n    .tpl-popover[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 20px;\n      top: 8px;\n      width: 520px;\n      max-width: calc(100% - 40px);\n      max-height: min(420px, calc(100% - 16px));\n      background: var(--prism-bg-elevated);\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-lg, 10px);\n      box-shadow:\n        0 20px 60px rgba(0, 0, 0, 0.45),\n        0 0 0 1px color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      display: flex;\n      flex-direction: column;\n      z-index: 30;\n      overflow: hidden;\n      animation: _ngcontent-%COMP%_tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n    }\n\n    @keyframes _ngcontent-%COMP%_tpl-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(-8px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    .tpl-popover-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 12px 0 16px;\n      height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n      background: linear-gradient(\n        180deg,\n        var(--prism-bg-surface),\n        var(--prism-bg-elevated)\n      );\n      flex-shrink: 0;\n    }\n    .tpl-popover-head[_ngcontent-%COMP%]    > prism-icon[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n    }\n    .tpl-popover-head[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n      flex: 1;\n      font-size: var(--fs-xs);\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--prism-text-2);\n    }\n\n    .tpl-popover-copy[_ngcontent-%COMP%] {\n      height: 26px;\n      padding: 0 10px;\n      font-size: var(--fs-sm);\n      font-family: var(--font-sans);\n      font-weight: 500;\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n      border-radius: var(--radius-sm, 5px);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      cursor: pointer;\n      transition: background var(--dur-fast);\n    }\n    .tpl-popover-copy[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .tpl-popover-close[_ngcontent-%COMP%] {\n      width: 26px;\n      height: 26px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--radius-sm, 5px);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 0;\n      cursor: pointer;\n      transition: background var(--dur-fast), color var(--dur-fast);\n    }\n    .tpl-popover-close[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      background: var(--prism-input-bg);\n    }\n\n    .tpl-popover-body[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 14px 18px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-md);\n      line-height: 1.7;\n      color: var(--prism-text-2);\n      overflow: auto;\n      background: var(--prism-bg);\n      flex: 1;\n      min-height: 0;\n      white-space: pre;\n    }\n    .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n    .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n      background: var(--prism-border-strong);\n      border-radius: 3px;\n    }\n\n    [_nghost-%COMP%]     .tok-tag { color: var(--prism-code-tag); }\n    [_nghost-%COMP%]     .tok-attr { color: var(--prism-code-attr); }\n    [_nghost-%COMP%]     .tok-str { color: var(--prism-code-str); }\n    [_nghost-%COMP%]     .tok-com { color: var(--prism-code-com); font-style: italic; }"] });
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: contents; }\n\n    .tpl-popover[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 20px;\n      top: 8px;\n      width: 520px;\n      max-width: calc(100% - 40px);\n      max-height: min(420px, calc(100% - 16px));\n      background: var(--%NS%prism-bg-elevated);\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: var(--%NS%radius-lg, 10px);\n      box-shadow:\n        0 20px 60px rgba(0, 0, 0, 0.45),\n        0 0 0 1px color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n      display: flex;\n      flex-direction: column;\n      z-index: 30;\n      overflow: hidden;\n      animation: _ngcontent-%COMP%_tpl-fade-in var(--%NS%dur-fast, 0.15s) var(--%NS%ease-default, ease-out);\n    }\n\n    @keyframes _ngcontent-%COMP%_tpl-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(-8px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    .tpl-popover-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 12px 0 16px;\n      height: 40px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      background: linear-gradient(\n        180deg,\n        var(--%NS%prism-bg-surface),\n        var(--%NS%prism-bg-elevated)\n      );\n      flex-shrink: 0;\n    }\n    .tpl-popover-head[_ngcontent-%COMP%]    > prism-icon[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n    }\n    .tpl-popover-head[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n      flex: 1;\n      font-size: var(--%NS%fs-xs);\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--%NS%prism-text-2);\n    }\n\n    .tpl-popover-copy[_ngcontent-%COMP%] {\n      height: 26px;\n      padding: 0 10px;\n      font-size: var(--%NS%fs-sm);\n      font-family: var(--%NS%font-sans);\n      font-weight: 500;\n      color: var(--%NS%prism-primary);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n      border-radius: var(--%NS%radius-sm, 5px);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      cursor: pointer;\n      transition: background var(--%NS%dur-fast);\n    }\n    .tpl-popover-copy[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n    }\n\n    .tpl-popover-close[_ngcontent-%COMP%] {\n      width: 26px;\n      height: 26px;\n      display: grid;\n      place-items: center;\n      border-radius: var(--%NS%radius-sm, 5px);\n      color: var(--%NS%prism-text-muted);\n      background: transparent;\n      border: 0;\n      cursor: pointer;\n      transition: background var(--%NS%dur-fast), color var(--%NS%dur-fast);\n    }\n    .tpl-popover-close[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-text);\n      background: var(--%NS%prism-input-bg);\n    }\n\n    .tpl-popover-body[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 14px 18px;\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-md);\n      line-height: 1.7;\n      color: var(--%NS%prism-text-2);\n      overflow: auto;\n      background: var(--%NS%prism-bg);\n      flex: 1;\n      min-height: 0;\n      white-space: pre;\n    }\n    .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n    .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n      background: var(--%NS%prism-border-strong);\n      border-radius: 3px;\n    }\n\n    [_nghost-%COMP%]     .tok-tag { color: var(--%NS%prism-code-tag); }\n    [_nghost-%COMP%]     .tok-attr { color: var(--%NS%prism-code-attr); }\n    [_nghost-%COMP%]     .tok-str { color: var(--%NS%prism-code-str); }\n    [_nghost-%COMP%]     .tok-com { color: var(--%NS%prism-code-com); font-style: italic; }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismTemplatePopoverComponent, [{
         type: Component,

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,12 +235,12 @@ 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);
-        } }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .comp-head[_ngcontent-%COMP%] {\n      padding: 12px 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      position: relative;\n    }\n    .comp-head[_ngcontent-%COMP%]::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[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n    .comp-title[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] { line-height: 1; }\n    .comp-status-dot[_ngcontent-%COMP%] {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status-ring[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { display: inline-flex; }\n\n    .comp-status--stable[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n      color: var(--prism-text-muted);\n      background: var(--prism-input-bg);\n      border-color: var(--prism-border-strong);\n    }\n\n    .comp-desc[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }"] });
+        } }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .comp-head[_ngcontent-%COMP%] {\n      padding: 12px 28px;\n      background: var(--%NS%prism-bg);\n      border-bottom: 1px solid var(--%NS%prism-border);\n      position: relative;\n    }\n    .comp-head[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 6px;\n      background: linear-gradient(180deg, var(--%NS%prism-primary-from) 0%, var(--%NS%prism-accent) 50%, var(--%NS%prism-primary-to) 100%);\n    }\n\n    .comp-head-top[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: var(--%NS%fs-sm);\n      color: var(--%NS%prism-text-ghost);\n      margin-bottom: 6px;\n      font-weight: 500;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n    .comp-crumb[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n    .comp-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--%NS%fs-2xl);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--%NS%prism-text);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .comp-selector[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 12px;\n      color: var(--%NS%prism-primary);\n      padding: 3px 8px;\n      border-radius: var(--%NS%radius-sm);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n      font-weight: 500;\n    }\n\n    .comp-status[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] { line-height: 1; }\n    .comp-status-dot[_ngcontent-%COMP%] {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n    .comp-status-ring[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { display: inline-flex; }\n\n    .comp-status--stable[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-success);\n      background: color-mix(in srgb, var(--%NS%prism-success) 10%, transparent);\n      border-color: color-mix(in srgb, var(--%NS%prism-success) 35%, transparent);\n    }\n    .comp-status--beta[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-warn);\n      background: color-mix(in srgb, var(--%NS%prism-warn) 10%, transparent);\n      border-color: color-mix(in srgb, var(--%NS%prism-warn) 35%, transparent);\n    }\n    .comp-status--deprecated[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text-muted);\n      background: var(--%NS%prism-input-bg);\n      border-color: var(--%NS%prism-border-strong);\n    }\n\n    .comp-desc[_ngcontent-%COMP%] {\n      margin: 6px 0 0;\n      font-size: var(--%NS%fs-lg);\n      color: var(--%NS%prism-text-2);\n      max-width: 72ch;\n      line-height: 1.55;\n    }\n\n    .comp-tags[_ngcontent-%COMP%] {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--%NS%radius-xs);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      color: var(--%NS%prism-primary);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n    }\n\n    .comp-head-stats[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
         type: Component,
@@ -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(--%NS%font-mono);\n      font-size: var(--%NS%fs-xl);\n      font-weight: 600;\n      color: var(--%NS%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(--%NS%prism-success) 15%, transparent);\n      color: var(--%NS%prism-success);\n      font-weight: 700;\n      letter-spacing: 0.04em;\n    }\n    .pill.warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-warn) 15%, transparent);\n      color: var(--%NS%prism-warn);\n    }\n    .pill.danger[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-danger) 15%, transparent);\n      color: var(--%NS%prism-danger);\n    }\n    .stat-lbl[_ngcontent-%COMP%] {\n      font-size: var(--%NS%fs-xs);\n      color: var(--%NS%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/component-header/prism-component-header.component.js

@@ -52,7 +52,7 @@ export class PrismComponentHeaderComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.navigationService.activeComponent()) ? 0 : -1, tmp_0_0);
-        } }, styles: [".prism-component-header[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      border-left: 3px solid;\n      border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n      background: var(--prism-bg-surface);\n    }\n\n    .prism-component-header__title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      letter-spacing: -0.01em;\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n    }\n\n    .prism-component-header__description[_ngcontent-%COMP%] {\n      margin: 4px 0 0;\n      font-size: 13px;\n      line-height: 1.6;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n    }\n\n    .prism-component-header__tags[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n      margin-top: 10px;\n      flex-wrap: wrap;\n    }\n\n    .prism-component-header__tag[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--prism-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      letter-spacing: 0.02em;\n      font-family: var(--prism-font-sans);\n    }"] });
+        } }, styles: [".prism-component-header[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      border-left: 3px solid;\n      border-image: linear-gradient(180deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to)) 1;\n      background: var(--%NS%prism-bg-surface);\n    }\n\n    .prism-component-header__title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      letter-spacing: -0.01em;\n      color: var(--%NS%prism-text);\n      font-family: var(--%NS%prism-font-sans);\n    }\n\n    .prism-component-header__description[_ngcontent-%COMP%] {\n      margin: 4px 0 0;\n      font-size: 13px;\n      line-height: 1.6;\n      color: var(--%NS%prism-text-2);\n      font-family: var(--%NS%prism-font-sans);\n    }\n\n    .prism-component-header__tags[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n      margin-top: 10px;\n      flex-wrap: wrap;\n    }\n\n    .prism-component-header__tag[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--%NS%prism-radius-xs);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n      color: var(--%NS%prism-primary);\n      border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n      letter-spacing: 0.02em;\n      font-family: var(--%NS%prism-font-sans);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeaderComponent, [{
         type: Component,

package/dist/app/controls/boolean-control.component.js

@@ -16,7 +16,7 @@ export class BooleanControlComponent {
         } if (rf & 2) {
             i0.ɵɵclassProp("on", ctx.value());
             i0.ɵɵattribute("aria-checked", ctx.value());
-        } }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n      position: relative;\n      width: 34px;\n      height: 18px;\n      border-radius: 9px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      transition: all var(--dur-fast);\n      cursor: pointer;\n      flex-shrink: 0;\n      padding: 0;\n    }\n    .ctl-toggle[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 2px;\n      top: 2px;\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: var(--prism-text-muted);\n      transition: transform var(--dur-fast), background var(--dur-fast);\n    }\n    .ctl-toggle.on[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n    }\n    .ctl-toggle.on[_ngcontent-%COMP%]::after {\n      transform: translateX(16px);\n      background: white;\n    }"] });
+        } }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n      position: relative;\n      width: 34px;\n      height: 18px;\n      border-radius: 9px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      transition: all var(--%NS%dur-fast);\n      cursor: pointer;\n      flex-shrink: 0;\n      padding: 0;\n    }\n    .ctl-toggle[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 2px;\n      top: 2px;\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: var(--%NS%prism-text-muted);\n      transition: transform var(--%NS%dur-fast), background var(--%NS%dur-fast);\n    }\n    .ctl-toggle.on[_ngcontent-%COMP%] {\n      background: var(--%NS%prism-primary);\n      border-color: var(--%NS%prism-primary);\n    }\n    .ctl-toggle.on[_ngcontent-%COMP%]::after {\n      transform: translateX(16px);\n      background: white;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BooleanControlComponent, [{
         type: Component,

package/dist/app/controls/json-control.component.js

@@ -101,7 +101,7 @@ export class JsonControlComponent {
             i0.ɵɵdomProperty("value", ctx.displayText());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.parseError() ? 7 : -1);
-        } }, styles: [".json-editor[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n\n    .json-overlay[_ngcontent-%COMP%] {\n      position: relative;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      overflow: hidden;\n      transition: border-color var(--dur-fast);\n    }\n    .json-overlay[_ngcontent-%COMP%]:focus-within {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n\n    .json-pre[_ngcontent-%COMP%], .json-input[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 4px 8px;\n      font-family: var(--font-mono);\n      font-size: 12px;\n      line-height: 1.4;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      tab-size: 2;\n    }\n\n    .json-pre[_ngcontent-%COMP%] {\n      min-height: 56px;\n      pointer-events: none;\n    }\n    .json-pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { font-family: inherit; }\n\n    [_nghost-%COMP%]     .jh-key { color: var(--prism-code-attr); }\n    [_nghost-%COMP%]     .jh-string { color: var(--prism-code-str); }\n    [_nghost-%COMP%]     .jh-number { color: var(--prism-warn); }\n    [_nghost-%COMP%]     .jh-bool { color: var(--prism-primary); }\n    [_nghost-%COMP%]     .jh-null { color: var(--prism-text-ghost); }\n\n    .json-input[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      background: transparent;\n      color: transparent;\n      caret-color: var(--prism-text);\n      border: none;\n      resize: none;\n      overflow: auto;\n      box-sizing: border-box;\n    }\n    .json-input[_ngcontent-%COMP%]:focus { outline: none; }\n    .json-input[_ngcontent-%COMP%]::selection { background: rgba(99, 102, 241, 0.3); }\n\n    .json-error[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-danger);\n      display: block;\n      margin-top: 2px;\n    }"] });
+        } }, styles: [".json-editor[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n\n    .json-overlay[_ngcontent-%COMP%] {\n      position: relative;\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: var(--%NS%radius-sm);\n      overflow: hidden;\n      transition: border-color var(--%NS%dur-fast);\n    }\n    .json-overlay[_ngcontent-%COMP%]:focus-within {\n      border-color: var(--%NS%prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n    }\n\n    .json-pre[_ngcontent-%COMP%], .json-input[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 4px 8px;\n      font-family: var(--%NS%font-mono);\n      font-size: 12px;\n      line-height: 1.4;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      tab-size: 2;\n    }\n\n    .json-pre[_ngcontent-%COMP%] {\n      min-height: 56px;\n      pointer-events: none;\n    }\n    .json-pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { font-family: inherit; }\n\n    [_nghost-%COMP%]     .jh-key { color: var(--%NS%prism-code-attr); }\n    [_nghost-%COMP%]     .jh-string { color: var(--%NS%prism-code-str); }\n    [_nghost-%COMP%]     .jh-number { color: var(--%NS%prism-warn); }\n    [_nghost-%COMP%]     .jh-bool { color: var(--%NS%prism-primary); }\n    [_nghost-%COMP%]     .jh-null { color: var(--%NS%prism-text-ghost); }\n\n    .json-input[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      background: transparent;\n      color: transparent;\n      caret-color: var(--%NS%prism-text);\n      border: none;\n      resize: none;\n      overflow: auto;\n      box-sizing: border-box;\n    }\n    .json-input[_ngcontent-%COMP%]:focus { outline: none; }\n    .json-input[_ngcontent-%COMP%]::selection { background: rgba(99, 102, 241, 0.3); }\n\n    .json-error[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--%NS%prism-danger);\n      display: block;\n      margin-top: 2px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JsonControlComponent, [{
         type: Component,

package/dist/app/controls/number-control.component.js

@@ -15,7 +15,7 @@ export class NumberControlComponent {
             i0.ɵɵdomElementEnd();
         } if (rf & 2) {
             i0.ɵɵdomProperty("value", ctx.value());
-        } }, styles: [".ctl-number[_ngcontent-%COMP%] {\n      height: 30px;\n      padding: 0 10px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      color: var(--prism-text);\n      font-size: 13px;\n      font-family: var(--font-sans);\n      flex: 1;\n      min-width: 0;\n      outline: none;\n      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);\n    }\n    .ctl-number[_ngcontent-%COMP%]:focus {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }"] });
+        } }, styles: [".ctl-number[_ngcontent-%COMP%] {\n      height: 30px;\n      padding: 0 10px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: var(--%NS%radius-sm);\n      color: var(--%NS%prism-text);\n      font-size: 13px;\n      font-family: var(--%NS%font-sans);\n      flex: 1;\n      min-width: 0;\n      outline: none;\n      transition: border-color var(--%NS%dur-fast), box-shadow var(--%NS%dur-fast);\n    }\n    .ctl-number[_ngcontent-%COMP%]:focus {\n      border-color: var(--%NS%prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--%NS%prism-primary) 30%, transparent);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberControlComponent, [{
         type: Component,