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

package/dist/app/canvas/prism-template-popover.component.js

@@ -1,45 +1,9 @@
-import { Component, inject, computed, signal, ChangeDetectionStrategy, HostListener, } from '@angular/core';
+import { Component, inject, computed, signal, ChangeDetectionStrategy, } from '@angular/core';
 import { PrismIconComponent } from '../icons/prism-icon.component.js';
-import { PrismLayoutService } from '../services/prism-layout.service.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
 import { generateSnippet } from '../renderer/snippet-generator.js';
 import * as i0 from "@angular/core";
-function PrismTemplatePopoverComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵlistener("click", function PrismTemplatePopoverComponent_Conditional_0_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementStart(1, "div", 2);
-    i0.ɵɵelement(2, "prism-icon", 3);
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4, "Angular Template");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 4);
-    i0.ɵɵlistener("click", function PrismTemplatePopoverComponent_Conditional_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copy()); });
-    i0.ɵɵelement(6, "prism-icon", 5);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 6);
-    i0.ɵɵlistener("click", function PrismTemplatePopoverComponent_Conditional_0_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.layoutService.closeTemplatePopover()); });
-    i0.ɵɵelement(9, "prism-icon", 7);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelement(10, "pre", 8);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("size", 13);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("title", ctx_r1.copied() ? "Copied!" : "Copy to clipboard");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("name", ctx_r1.copied() ? "shield-check" : "copy")("size", 12);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.copied() ? "Copied" : "Copy", " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("size", 13);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r1.highlighted(), i0.ɵɵsanitizeHtml);
-} }
 function esc(s) {
     return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
@@ -75,7 +39,6 @@ function tokenizeXml(code) {
 export class PrismTemplatePopoverComponent {
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
-    layoutService = inject(PrismLayoutService);
     copied = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
     copiedResetTimer = null;
@@ -110,34 +73,57 @@ export class PrismTemplatePopoverComponent {
             clearTimeout(this.copiedResetTimer);
         this.copiedResetTimer = setTimeout(() => this.copied.set(false), 1500);
     }
-    onEscape() {
-        if (this.layoutService.templatePopoverVisible()) {
-            this.layoutService.closeTemplatePopover();
-        }
-    }
     static ɵfac = function PrismTemplatePopoverComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismTemplatePopoverComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismTemplatePopoverComponent, selectors: [["prism-template-popover"]], hostBindings: function PrismTemplatePopoverComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("keydown.escape", function PrismTemplatePopoverComponent_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
-        } }, decls: 1, vars: 1, consts: [["role", "dialog", "aria-label", "Angular template", 1, "tpl-popover"], ["role", "dialog", "aria-label", "Angular template", 1, "tpl-popover", 3, "click"], [1, "tpl-popover-head"], ["name", "code", 3, "size"], [1, "tpl-popover-copy", 3, "click", "title"], [3, "name", "size"], ["aria-label", "Close", "title", "Close (Esc)", 1, "tpl-popover-close", 3, "click"], ["name", "x", 3, "size"], [1, "tpl-popover-body", 3, "innerHTML"]], template: function PrismTemplatePopoverComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, PrismTemplatePopoverComponent_Conditional_0_Template, 11, 7, "div", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismTemplatePopoverComponent, selectors: [["prism-template-popover"]], decls: 11, vars: 7, consts: [["popover", "", "id", "prism-template", "role", "dialog", "aria-label", "Angular template", 1, "tpl-popover"], [1, "tpl-popover-head"], ["name", "code", 3, "size"], ["type", "button", 1, "tpl-popover-copy", 3, "click", "title"], [3, "name", "size"], ["type", "button", "popovertarget", "prism-template", "popovertargetaction", "hide", "aria-label", "Close", "title", "Close (Esc)", 1, "tpl-popover-close"], ["name", "x", 3, "size"], [1, "tpl-popover-body", 3, "innerHTML"]], template: function PrismTemplatePopoverComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵelement(2, "prism-icon", 2);
+            i0.ɵɵelementStart(3, "span");
+            i0.ɵɵtext(4, "Angular Template");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "button", 3);
+            i0.ɵɵlistener("click", function PrismTemplatePopoverComponent_Template_button_click_5_listener() { return ctx.copy(); });
+            i0.ɵɵelement(6, "prism-icon", 4);
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "button", 5);
+            i0.ɵɵelement(9, "prism-icon", 6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(10, "pre", 7);
+            i0.ɵɵelementEnd();
         } 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(--%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; }"] });
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("size", 13);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("title", ctx.copied() ? "Copied!" : "Copy to clipboard");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("name", ctx.copied() ? "shield-check" : "copy")("size", 12);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.copied() ? "Copied" : "Copy", " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("size", 13);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("innerHTML", ctx.highlighted(), i0.ɵɵsanitizeHtml);
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: contents; }\n\n    \n\n\n\n\n\n    .tpl-popover[_ngcontent-%COMP%] {\n      width: 520px;\n      max-width: calc(100vw - var(--%NS%sp-6));\n      max-height: min(420px, calc(100vh - var(--%NS%sp-7)));\n      position-anchor: --prism-toolrail;\n      position-area: block-end span-inline-start;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n      margin: var(--%NS%sp-2) 0 0 0;\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      overflow: hidden;\n      animation: _ngcontent-%COMP%_tpl-fade-in var(--%NS%dur-fast, 0.15s) var(--%NS%ease-default, ease-out);\n    }\n\n    \n\n\n\n\n\n    .tpl-popover[_ngcontent-%COMP%]:popover-open {\n      display: flex;\n      flex-direction: column;\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,
         args: [{ selector: 'prism-template-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
-    @if (layoutService.templatePopoverVisible()) {
+    <!-- A native popover: the platform owns open, light-dismiss and Escape, so
+         there is no visibility signal, no document click listener and no key
+         handler here. The id is what the rail's button names in its
+         popovertarget. -->
     <div
+      popover
+      id="prism-template"
       class="tpl-popover"
       role="dialog"
       aria-label="Angular template"
-      (click)="$event.stopPropagation()"
     >
       <div class="tpl-popover-head">
         <prism-icon name="code" [size]="13" />
         <span>Angular Template</span>
         <button
+          type="button"
           class="tpl-popover-copy"
           (click)="copy()"
           [title]="copied() ? 'Copied!' : 'Copy to clipboard'"
@@ -146,8 +132,10 @@ export class PrismTemplatePopoverComponent {
           {{ copied() ? 'Copied' : 'Copy' }}
         </button>
         <button
+          type="button"
           class="tpl-popover-close"
-          (click)="layoutService.closeTemplatePopover()"
+          popovertarget="prism-template"
+          popovertargetaction="hide"
           aria-label="Close"
           title="Close (Esc)"
         >
@@ -156,10 +144,6 @@ export class PrismTemplatePopoverComponent {
       </div>
       <pre class="tpl-popover-body" [innerHTML]="highlighted()"></pre>
     </div>
-    }
-  `, styles: ["\n    :host { display: contents; }\n\n    .tpl-popover {\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: tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n    }\n\n    @keyframes 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 {\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 > prism-icon {\n      color: var(--prism-text-muted);\n    }\n    .tpl-popover-head > span {\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 {\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:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .tpl-popover-close {\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:hover {\n      color: var(--prism-text);\n      background: var(--prism-input-bg);\n    }\n\n    .tpl-popover-body {\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::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n    .tpl-popover-body::-webkit-scrollbar-thumb {\n      background: var(--prism-border-strong);\n      border-radius: 3px;\n    }\n\n    :host ::ng-deep .tok-tag { color: var(--prism-code-tag); }\n    :host ::ng-deep .tok-attr { color: var(--prism-code-attr); }\n    :host ::ng-deep .tok-str { color: var(--prism-code-str); }\n    :host ::ng-deep .tok-com { color: var(--prism-code-com); font-style: italic; }\n  "] }]
-    }], null, { onEscape: [{
-            type: HostListener,
-            args: ['document:keydown.escape']
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismTemplatePopoverComponent, { className: "PrismTemplatePopoverComponent", filePath: "app/canvas/prism-template-popover.component.ts", lineNumber: 206 }); })();
+  `, styles: ["\n    :host { display: contents; }\n\n    /* No position of its own: a popover is in the top layer, where the\n       containing block is the viewport, so the old right/top pair against the\n       canvas would have parked this in the corner of the *window* and over the\n       header. It hangs off the rail instead, the same way the head popovers\n       hang off their triggers. Viewport units, not percentages \u2014 a percentage\n       here resolves against the position area, not the canvas. */\n    .tpl-popover {\n      width: 520px;\n      max-width: calc(100vw - var(--sp-6));\n      max-height: min(420px, calc(100vh - var(--sp-7)));\n      position-anchor: --prism-toolrail;\n      position-area: block-end span-inline-start;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n      margin: var(--sp-2) 0 0 0;\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      overflow: hidden;\n      animation: tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n    }\n\n    /* display belongs on :popover-open and nowhere else. The UA stylesheet\n       hides a closed popover with [popover]:not(:popover-open) { display: none },\n       and any author display on the base rule outranks it \u2014 the panel then\n       shows permanently and neither Escape nor light-dismiss can hide it,\n       because closing only drops :popover-open and leaves the author rule\n       standing. */\n    .tpl-popover:popover-open {\n      display: flex;\n      flex-direction: column;\n    }\n\n    @keyframes 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 {\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 > prism-icon {\n      color: var(--prism-text-muted);\n    }\n    .tpl-popover-head > span {\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 {\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:hover {\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .tpl-popover-close {\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:hover {\n      color: var(--prism-text);\n      background: var(--prism-input-bg);\n    }\n\n    .tpl-popover-body {\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::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n    .tpl-popover-body::-webkit-scrollbar-thumb {\n      background: var(--prism-border-strong);\n      border-radius: 3px;\n    }\n\n    :host ::ng-deep .tok-tag { color: var(--prism-code-tag); }\n    :host ::ng-deep .tok-attr { color: var(--prism-code-attr); }\n    :host ::ng-deep .tok-str { color: var(--prism-code-str); }\n    :host ::ng-deep .tok-com { color: var(--prism-code-com); font-style: italic; }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismTemplatePopoverComponent, { className: "PrismTemplatePopoverComponent", filePath: "app/canvas/prism-template-popover.component.ts", lineNumber: 226 }); })();

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

@@ -0,0 +1,41 @@
+/**
+ * How a metric compares to its threshold.
+ *
+ * `none` means there is no verdict to give — either the value is missing, or
+ * it is a plain fact with no threshold to compare against, like a count of
+ * variants. Those render grey and stay out of the gauge's tally, which counts
+ * the metrics that actually passed something.
+ */
+export type MetricVariant = 'ok' | 'warn' | 'danger' | 'none';
+/** One measured value, already formatted for display. */
+export interface HeadMetric {
+    id: string;
+    label: string;
+    value: string;
+    variant: MetricVariant;
+}
+/** What the gauge chip renders, derived from the full metric list. */
+export interface GaugeSummary {
+    /** Metrics that actually carry data. `none` does not count. */
+    measured: number;
+    /** The worst-ranked deviating metric, or null when nothing deviates. */
+    worst: HeadMetric | null;
+    /** How many further metrics deviate besides `worst`. */
+    others: number;
+    /** Colour role for the chip. */
+    variant: 'ok' | 'warn' | 'danger';
+}
+/**
+ * Folds the head's metrics into what one chip can say.
+ *
+ * Deliberately a pure function rather than a computed inside the component:
+ * components using signal inputs cannot be rendered through TestBed in this
+ * repo's Jest setup, so any logic left in a template is logic that never gets
+ * a test. This mirrors `decorateItem` in the sidebar, which resolves the same
+ * kind of question for navigation marks.
+ *
+ * Ties resolve by source order so the chip shows a stable metric across
+ * renders rather than flickering between two equally bad ones.
+ */
+export declare function summarizeMetrics(metrics: readonly HeadMetric[]): GaugeSummary;
+//# sourceMappingURL=head-metrics.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"head-metrics.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/head-metrics.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,sEAAsE;AACtE,MAAM,WAAW,YAAY;IAC3B,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,wDAAwD;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;CACnC;AASD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG,YAAY,CAoB7E"}

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

@@ -0,0 +1,39 @@
+const SEVERITY = {
+    none: 0,
+    ok: 0,
+    warn: 1,
+    danger: 2,
+};
+/**
+ * Folds the head's metrics into what one chip can say.
+ *
+ * Deliberately a pure function rather than a computed inside the component:
+ * components using signal inputs cannot be rendered through TestBed in this
+ * repo's Jest setup, so any logic left in a template is logic that never gets
+ * a test. This mirrors `decorateItem` in the sidebar, which resolves the same
+ * kind of question for navigation marks.
+ *
+ * Ties resolve by source order so the chip shows a stable metric across
+ * renders rather than flickering between two equally bad ones.
+ */
+export function summarizeMetrics(metrics) {
+    let measured = 0;
+    let worst = null;
+    let deviating = 0;
+    for (const m of metrics) {
+        if (m.variant !== 'none')
+            measured++;
+        if (SEVERITY[m.variant] === 0)
+            continue;
+        deviating++;
+        if (worst === null || SEVERITY[m.variant] > SEVERITY[worst.variant]) {
+            worst = m;
+        }
+    }
+    return {
+        measured,
+        worst,
+        others: deviating > 0 ? deviating - 1 : 0,
+        variant: worst === null ? 'ok' : worst.variant,
+    };
+}

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

@@ -1,3 +1,4 @@
+import type { HeadMetric } from './head-metrics.js';
 import type { ComponentStatus } from '../../decorator/showcase.types.js';
 import * as i0 from "@angular/core";
 interface StatusBadge {
@@ -13,7 +14,6 @@ export declare class PrismComponentHeadComponent {
     protected readonly status: import("@angular/core").Signal<ComponentStatus | undefined>;
     protected readonly statusBadge: import("@angular/core").Signal<StatusBadge | null>;
     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.
@@ -27,9 +27,17 @@ export declare class PrismComponentHeadComponent {
         value: string;
         variant: "ok" | "warn" | "danger";
     } | null>;
+    /**
+     * The full metric list for the gauge, in source order.
+     *
+     * Order matters: `summarizeMetrics` breaks severity ties by position, so
+     * this sequence is what makes the chip show a stable metric rather than
+     * flickering between two equally bad ones.
+     */
+    protected readonly metrics: import("@angular/core").Signal<HeadMetric[]>;
     private readonly componentMeta;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismComponentHeadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PrismComponentHeadComponent, "prism-component-head", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismComponentHeadComponent, "prism-component-head", never, {}, {}, never, ["[headEnd]"], true, never>;
 }
 export {};
 //# sourceMappingURL=prism-component-head.component.d.ts.map

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,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"}
+{"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,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAEzE,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAqBD,qBA6Ia,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;IAkBH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO;eACjB,MAAM;iBACJ,IAAI,GAAG,MAAM,GAAG,QAAQ;cAUhC;IAEH;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,+CAyBvB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAM3B;yCArHQ,2BAA2B;2CAA3B,2BAA2B;CAsHvC"}