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

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

@@ -13,33 +13,28 @@ import { PrismCaptureService } from '../services/prism-capture.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import { PrismCanvasRulersComponent } from '../canvas/prism-canvas-rulers.component.js';
 import { PrismCanvasBgPillComponent } from '../canvas/prism-canvas-bg-pill.component.js';
+import { CANVAS_BG_STYLES } from '../canvas/canvas-bg.styles.js';
 import { buildKnownInputs } from './known-inputs.js';
 import { resolveOverlay } from './overlay-resolver.js';
+import { parseContentToNodes } from './projectable-content.js';
 import * as i0 from "@angular/core";
 const _c0 = ["outlet"];
 function PrismRendererComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3)(1, "span", 4);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelement(3, "div", 5)(4, "prism-canvas-rulers")(5, "prism-canvas-bg-pill");
+    i0.ɵɵelement(0, "div", 3)(1, "prism-canvas-rulers")(2, "prism-canvas-bg-pill");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r0.Math.round(ctx_r0.canvasService.zoom() * 100), "%");
-    i0.ɵɵadvance();
     i0.ɵɵclassProp("visible", ctx_r0.canvasService.guides());
 } }
 function PrismRendererComponent_Conditional_5_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function PrismRendererComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_5_ng_container_0_Template, 1, 0, "ng-container", 6);
+    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_5_ng_container_0_Template, 1, 0, "ng-container", 4);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngComponentOutlet", ctx_r0.activeOverlay())("ngComponentOutletInputs", ctx_r0.overlayInputs)("ngComponentOutletInjector", ctx_r0.overlayInjector());
 } }
 export class PrismRendererComponent {
-    Math = Math;
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
     canvasService = inject(PrismCanvasService);
@@ -235,9 +230,9 @@ export class PrismRendererComponent {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 6, vars: 8, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "demo-wrap"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 6, vars: 8, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "demo-wrap"], [1, "stage-crosshair"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵconditionalCreate(1, PrismRendererComponent_Conditional_1_Template, 6, 3);
+            i0.ɵɵconditionalCreate(1, PrismRendererComponent_Conditional_1_Template, 3, 2);
             i0.ɵɵelementStart(2, "div", 2);
             i0.ɵɵelementContainer(3, null, 0);
             i0.ɵɵconditionalCreate(5, PrismRendererComponent_Conditional_5_Template, 1, 3, "ng-container");
@@ -253,7 +248,7 @@ export class PrismRendererComponent {
             i0.ɵɵconditional(ctx.activeOverlay() ? 5 : -1);
         } }, dependencies: [PrismCanvasRulersComponent,
             PrismCanvasBgPillComponent,
-            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--%NS%prism-bg-surface);\n      background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--%NS%dur-base);\n      --%NS%prism-canvas-overlay-top: 12px;\n      --%NS%prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n      --%NS%prism-canvas-overlay-top: 28px;\n      --%NS%prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    \n\n\n\n\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--%NS%prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--%NS%prism-void-dark, #07050f);\n      background-image: none;\n    }\n    \n\n\n\n\n\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%], \n   .prism-canvas-stage[data-bg=\"transparent\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--%NS%prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--%NS%prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--%NS%prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--%NS%prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--%NS%dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--%NS%prism-canvas-overlay-top);\n      left: var(--%NS%prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--%NS%dur-base), left var(--%NS%dur-base);\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\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    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--%NS%zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"][_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }"] });
+            NgComponentOutlet], styles: ["[_nghost-%COMP%] {\n        display: block;\n        min-height: 0;\n        flex: 1;\n      }\n\n      .prism-canvas-stage[_ngcontent-%COMP%] {\n        position: relative;\n        overflow: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 32px;\n        min-height: 200px;\n        height: 100%;\n        background-color: var(--%NS%prism-stage);\n\n        \n\n\n\n\n\n\n\n\n\n\n        outline: 1px solid var(--%NS%prism-stage-edge);\n        outline-offset: -1px;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),\n          0 8px 24px -12px rgba(0, 0, 0, 0.18);\n        transition: filter var(--%NS%dur-base);\n        --%NS%prism-canvas-overlay-top: 12px;\n        --%NS%prism-canvas-overlay-inline: 20px;\n      }\n      .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n        --%NS%prism-canvas-overlay-top: 28px;\n        --%NS%prism-canvas-overlay-inline: 28px;\n      }\n\n      .stage-crosshair[_ngcontent-%COMP%] {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity var(--%NS%dur-base);\n      }\n      .stage-crosshair.visible[_ngcontent-%COMP%] {\n        opacity: 1;\n      }\n      .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n        content: '';\n        position: absolute;\n        background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n      }\n      .stage-crosshair[_ngcontent-%COMP%]::before {\n        left: 0;\n        right: 0;\n        top: 50%;\n        height: 1px;\n      }\n      .stage-crosshair[_ngcontent-%COMP%]::after {\n        top: 0;\n        bottom: 0;\n        left: 50%;\n        width: 1px;\n      }\n\n      .demo-wrap[_ngcontent-%COMP%] {\n        position: relative;\n        display: inline-block;\n        transform: scale(var(--%NS%zoom, 1));\n        transition: transform 0.18s;\n      }\n      .demo-wrap[data-canvas-layout='stretch'][_ngcontent-%COMP%] {\n        display: block;\n        width: 100%;\n        max-width: 800px;\n      }", "[data-bg=\"dots\"][_ngcontent-%COMP%] {\n    background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"][_ngcontent-%COMP%] {\n    background-image: none;\n  }\n\n  \n\n\n\n\n  [data-bg=\"light\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-light, #f7f5fc);\n    background-image: none;\n  }\n  [data-bg=\"dark\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-dark, #07050f);\n    background-image: none;\n  }\n\n  \n\n\n\n\n\n  [data-bg=\"checker\"][_ngcontent-%COMP%], \n   [data-bg=\"transparent\"][_ngcontent-%COMP%] {\n    background-image:\n      linear-gradient(45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--%NS%prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--%NS%prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,
@@ -268,11 +263,6 @@ export class PrismRendererComponent {
       [attr.data-rulers]="canvasService.rulers() ? '' : null"
     >
       @if (!capture.active()) {
-      <div class="canvas-badges">
-        <span class="c-badge"
-          >{{ Math.round(canvasService.zoom() * 100) }}%</span
-        >
-      </div>
       <div
         class="stage-crosshair"
         [class.visible]="canvasService.guides()"
@@ -299,60 +289,8 @@ export class PrismRendererComponent {
         }
       </div>
     </div>
-  `, styles: ["\n    :host { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\n    }\n    /* Flat, not dotted. \"light\" and \"dark\" name a surface a component was\n       designed against \u2014 and they are the two backgrounds whose colour is\n       absolute rather than a theme token, which is what makes them the values\n       to declare for a screenshot baseline. \"dots\" already exists for anyone\n       who wants the grid. */\n    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: none;\n    }\n    /* \"transparent\" shares the checkerboard on purpose. The two say the same\n       thing in the two media the canvas has: while browsing, the checkerboard\n       is already the UI's word for \"no surface here\"; in a capture it becomes\n       literal transparency. A stage that were really see-through in the app\n       would just show the shell through the canvas, which means nothing. The\n       split between the two lives entirely in CAPTURE_STYLES. */\n    .prism-canvas-stage[data-bg=\"checker\"],\n    .prism-canvas-stage[data-bg=\"transparent\"] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible { opacity: 1; }\n    .stage-crosshair::before,\n    .stage-crosshair::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\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    }\n\n    .demo-wrap {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }\n\n  "] }]
+  `, styles: ["\n      :host {\n        display: block;\n        min-height: 0;\n        flex: 1;\n      }\n\n      .prism-canvas-stage {\n        position: relative;\n        overflow: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 32px;\n        min-height: 200px;\n        height: 100%;\n        background-color: var(--prism-stage);\n\n        /* The edge is outline + shadow, never border and never extra padding.\n         plugin-visual-regression screenshots .demo-wrap, which is centred in\n         this element; a border would shrink the content box by 2px and move\n         that centre, shifting all 15 baselines in test-workspace/vrt/baseline\n         without a single component having changed. Capture mode resets this\n         element's padding but not its border, and this repo has no VRT runner\n         to catch the drift. outline and box-shadow do not participate in\n         layout, so the box is provably unchanged. Keep it that way.\n         They do still paint, and outline-offset is negative, so the line lands\n         inside the box: CAPTURE_STYLES in prism-capture.service.ts sets both\n         to none, which is only safe because neither is load-bearing here. */\n        outline: 1px solid var(--prism-stage-edge);\n        outline-offset: -1px;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),\n          0 8px 24px -12px rgba(0, 0, 0, 0.18);\n        transition: filter var(--dur-base);\n        --prism-canvas-overlay-top: 12px;\n        --prism-canvas-overlay-inline: 20px;\n      }\n      .prism-canvas-stage[data-rulers] {\n        --prism-canvas-overlay-top: 28px;\n        --prism-canvas-overlay-inline: 28px;\n      }\n\n      .stage-crosshair {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity var(--dur-base);\n      }\n      .stage-crosshair.visible {\n        opacity: 1;\n      }\n      .stage-crosshair::before,\n      .stage-crosshair::after {\n        content: '';\n        position: absolute;\n        background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      }\n      .stage-crosshair::before {\n        left: 0;\n        right: 0;\n        top: 50%;\n        height: 1px;\n      }\n      .stage-crosshair::after {\n        top: 0;\n        bottom: 0;\n        left: 50%;\n        width: 1px;\n      }\n\n      .demo-wrap {\n        position: relative;\n        display: inline-block;\n        transform: scale(var(--zoom, 1));\n        transition: transform 0.18s;\n      }\n      .demo-wrap[data-canvas-layout='stretch'] {\n        display: block;\n        width: 100%;\n        max-width: 800px;\n      }\n    ", "\n  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\n\n  /* Flat, not dotted. \"light\" and \"dark\" name a surface a component was\n     designed against \u2014 and they are the two backgrounds whose colour is\n     absolute rather than a theme token, which is what makes them the values\n     to declare for a screenshot baseline. \"dots\" already exists for anyone\n     who wants the grid. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n  }\n\n  /* \"transparent\" shares the checkerboard on purpose. The two say the same\n     thing in the two media the canvas has: while browsing, the checkerboard\n     is already the UI's word for \"no surface here\"; in a capture it becomes\n     literal transparency. A stage that were really see-through in the app\n     would just show the shell through the canvas, which means nothing. The\n     split between the two lives entirely in CAPTURE_STYLES. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\n    background-image:\n      linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }\n"] }]
     }], () => [], { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef,
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 196 }); })();
-// SAFETY: `content` originates from `@Showcase({ variants: [{ content }] })`
-// in developer-authored source code. It is trusted by ng-prism's threat model
-// (see SECURITY.md). Sanitization would strip the Angular component/directive
-// selectors that variant content is meant to project.
-function parseContentToNodes(content) {
-    if (typeof content === 'string') {
-        return [htmlToNodes(content)];
-    }
-    const defaultNodes = content['default']
-        ? htmlToNodes(content['default'])
-        : [];
-    const result = [defaultNodes];
-    for (const [selector, html] of Object.entries(content)) {
-        if (selector === 'default')
-            continue;
-        const wrapper = document.createElement('div');
-        // SAFETY: trusted developer-authored HTML — see SECURITY.md.
-        wrapper.innerHTML = html;
-        const nodes = [];
-        for (const child of Array.from(wrapper.childNodes)) {
-            const el = document.createElement('div');
-            // SAFETY: trusted developer-authored HTML — see SECURITY.md.
-            el.innerHTML = child.outerHTML ?? child.textContent ?? '';
-            const projected = el.firstChild;
-            if (projected && projected instanceof Element) {
-                applySelector(projected, selector);
-                nodes.push(projected);
-            }
-            else if (projected) {
-                const span = document.createElement('span');
-                applySelector(span, selector);
-                span.textContent = child.textContent;
-                nodes.push(span);
-            }
-        }
-        result.push(nodes);
-    }
-    return result;
-}
-// SAFETY: see `parseContentToNodes` above and SECURITY.md — `html` is trusted
-// developer-authored variant content from the `@Showcase` decorator.
-function htmlToNodes(html) {
-    const wrapper = document.createElement('div');
-    wrapper.innerHTML = html;
-    return Array.from(wrapper.childNodes);
-}
-function applySelector(el, selector) {
-    const attrMatch = selector.match(/^\[([^\]=]+)]$/);
-    if (attrMatch) {
-        el.setAttribute(attrMatch[1], '');
-    }
-}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 172 }); })();

package/dist/app/renderer/projectable-content.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Turns per-variant `content` into the `projectableNodes` argument of
+ * `ViewContainerRef.createComponent`.
+ *
+ * Shared by the Playground stage and the Overview cells: both project the same
+ * developer-authored content, and the slot-selector handling is the one piece
+ * of that neither wants to own twice.
+ */
+export declare function parseContentToNodes(content: string | Record<string, string>): Node[][];
+//# sourceMappingURL=projectable-content.d.ts.map

package/dist/app/renderer/projectable-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"projectable-content.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/projectable-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACvC,IAAI,EAAE,EAAE,CAmCV"}

package/dist/app/renderer/projectable-content.js

@@ -0,0 +1,60 @@
+/**
+ * Turns per-variant `content` into the `projectableNodes` argument of
+ * `ViewContainerRef.createComponent`.
+ *
+ * Shared by the Playground stage and the Overview cells: both project the same
+ * developer-authored content, and the slot-selector handling is the one piece
+ * of that neither wants to own twice.
+ */
+// SAFETY: `content` originates from `@Showcase({ variants: [{ content }] })`
+// in developer-authored source code. It is trusted by ng-prism's threat model
+// (see SECURITY.md). Sanitization would strip the Angular component/directive
+// selectors that variant content is meant to project.
+export function parseContentToNodes(content) {
+    if (typeof content === 'string') {
+        return [htmlToNodes(content)];
+    }
+    const defaultNodes = content['default']
+        ? htmlToNodes(content['default'])
+        : [];
+    const result = [defaultNodes];
+    for (const [selector, html] of Object.entries(content)) {
+        if (selector === 'default')
+            continue;
+        const wrapper = document.createElement('div');
+        // SAFETY: trusted developer-authored HTML — see SECURITY.md.
+        wrapper.innerHTML = html;
+        const nodes = [];
+        for (const child of Array.from(wrapper.childNodes)) {
+            const el = document.createElement('div');
+            // SAFETY: trusted developer-authored HTML — see SECURITY.md.
+            el.innerHTML = child.outerHTML ?? child.textContent ?? '';
+            const projected = el.firstChild;
+            if (projected && projected instanceof Element) {
+                applySelector(projected, selector);
+                nodes.push(projected);
+            }
+            else if (projected) {
+                const span = document.createElement('span');
+                applySelector(span, selector);
+                span.textContent = child.textContent;
+                nodes.push(span);
+            }
+        }
+        result.push(nodes);
+    }
+    return result;
+}
+// SAFETY: see `parseContentToNodes` above and SECURITY.md — `html` is trusted
+// developer-authored variant content from the `@Showcase` decorator.
+function htmlToNodes(html) {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = html;
+    return Array.from(wrapper.childNodes);
+}
+function applySelector(el, selector) {
+    const attrMatch = selector.match(/^\[([^\]=]+)]$/);
+    if (attrMatch) {
+        el.setAttribute(attrMatch[1], '');
+    }
+}

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

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

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

@@ -119,6 +119,24 @@ const CAPTURE_CANVAS_ONLY_SELECTOR = `[${CAPTURE_ATTRIBUTE}] ` +
  * 200x700 component at 1280x720 still leaks 22px past the canvas with the
  * regions gone but the padding kept. None of that padding is ever inside a
  * `.demo-wrap` screenshot, so nothing is lost by removing it.
+ *
+ * The stage's edge goes with them, and it is stripped rather than reshaped for
+ * the same reason it exists in that shape at all. The edge is deliberately
+ * built from `outline` plus `box-shadow` and never from a border or padding,
+ * because neither participates in layout: `plugin-visual-regression`
+ * screenshots `.demo-wrap`, which is centred in the stage, and a border would
+ * shrink the stage's content box by 2px and move that centre, shifting every
+ * recorded baseline without a component having changed. Not participating in
+ * layout is not the same as not painting. `outline-offset: -1px` draws the
+ * line *inside* the border box, and with the padding above gone the stage edge
+ * sits flush against the component, so for anything whose `.demo-wrap` reaches
+ * it that 1px line and the shadow under it composite straight into the
+ * screenshot. So capture mode removes the paint and leaves the geometry
+ * untouched — the same division of labour the edge was chosen for, and the
+ * only one that keeps both halves of the guarantee.
+ *
+ * {@link CAPTURE_TRANSPARENT_SELECTOR} cannot cover this: it clears background
+ * colour, and an outline is not a background.
  */
 const CAPTURE_STYLES = `
 [${CAPTURE_ATTRIBUTE}] *,
@@ -133,6 +151,8 @@ const CAPTURE_STYLES = `
 [${CAPTURE_ATTRIBUTE}] .prism-canvas-stage {
   background-image: none !important;
   padding: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
 }
 
 ${CAPTURE_TRANSPARENT_SELECTOR} {

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

@@ -7,14 +7,11 @@ export declare class PrismLayoutService {
     readonly sidebarWidth: import("@angular/core").WritableSignal<number>;
     readonly panelHeight: import("@angular/core").WritableSignal<number>;
     readonly panelWidth: import("@angular/core").WritableSignal<number>;
-    readonly templatePopoverVisible: import("@angular/core").WritableSignal<boolean>;
     constructor();
     toggleSidebar(): void;
     toggleAddons(): void;
     toggleToolbar(): void;
     toggleOrientation(): void;
-    toggleTemplatePopover(): void;
-    closeTemplatePopover(): void;
     setSidebarWidth(px: number): void;
     setPanelHeight(px: number): void;
     setPanelWidth(px: number): void;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-layout.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-layout.service.ts"],"names":[],"mappings":";AAIA,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,aAAa,kDAAgB;IACtC,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,iBAAiB,6DAAwC;IAClE,QAAQ,CAAC,YAAY,iDAAe;IACpC,QAAQ,CAAC,WAAW,iDAAe;IACnC,QAAQ,CAAC,UAAU,iDAAe;IAClC,QAAQ,CAAC,sBAAsB,kDAAiB;;IAMhD,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,qBAAqB,IAAI,IAAI;IAI7B,oBAAoB,IAAI,IAAI;IAI5B,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,aAAa;yCAnFV,kBAAkB;;CA+F9B"}
+{"version":3,"file":"prism-layout.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-layout.service.ts"],"names":[],"mappings":";AAIA,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,aAAa,kDAAgB;IACtC,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,iBAAiB,6DAAwC;IAClE,QAAQ,CAAC,YAAY,iDAAe;IACpC,QAAQ,CAAC,WAAW,iDAAe;IACnC,QAAQ,CAAC,UAAU,iDAAe;;IAMlC,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,aAAa;yCA1EV,kBAAkB;;CAsF9B"}

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

@@ -16,8 +16,6 @@ export class PrismLayoutService {
     ...(ngDevMode ? [{ debugName: "panelHeight" }] : /* istanbul ignore next */ []));
     panelWidth = signal(320, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
-    templatePopoverVisible = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templatePopoverVisible" }] : /* istanbul ignore next */ []));
     constructor() {
         this.loadFromStorage();
     }
@@ -37,12 +35,6 @@ export class PrismLayoutService {
         this.addonsOrientation.update((v) => (v === 'bottom' ? 'right' : 'bottom'));
         this.saveToStorage();
     }
-    toggleTemplatePopover() {
-        this.templatePopoverVisible.update((v) => !v);
-    }
-    closeTemplatePopover() {
-        this.templatePopoverVisible.set(false);
-    }
     setSidebarWidth(px) {
         this.sidebarWidth.set(Math.max(160, Math.min(600, px)));
         this.saveToStorage();

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

@@ -1,13 +1,31 @@
 import { EnvironmentInjector } from '@angular/core';
+import type { PanelDefinition } from '../../plugin/plugin.types.js';
 import * as i0 from "@angular/core";
 export declare class PrismPanelService {
     private readonly envInjector;
     private readonly pluginService;
+    private readonly navigationService;
     private readonly builtinPanels;
     private readonly injectorCache;
     readonly activePanelId: import("@angular/core").WritableSignal<string>;
     readonly activeViewId: import("@angular/core").WritableSignal<string>;
     readonly activePanelInjector: import("@angular/core").Signal<EnvironmentInjector | null>;
+    /**
+     * Every panel that renders as a view tab, builtin before plugin.
+     *
+     * Unfiltered on purpose: `prism-view-panel-host` resolves the active view
+     * through this list. Filtering here would let the host come up empty for a
+     * frame whenever a component switch invalidates the active view — the
+     * fallback in `prism-shell` runs in the same change-detection round.
+     */
+    readonly viewPanels: import("@angular/core").Signal<PanelDefinition[]>;
+    /**
+     * The view panels the active component actually offers.
+     *
+     * Empty when no component is active, which is how pages end up without view
+     * tabs: it falls out of the data instead of needing a case of its own.
+     */
+    readonly visibleViewPanels: import("@angular/core").Signal<PanelDefinition[]>;
     /**
      * Returns (and lazily creates) the EnvironmentInjector scoped to the given panel.
      * Returns `null` when the panel has no providers.

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

@@ -1 +1 @@
-{"version":3,"file":"prism-panel.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-panel.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,mBAAmB,EAIpB,MAAM,eAAe,CAAC;;AAIvB,qBACa,iBAAiB;IAC5B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,QAAQ,CAAC,aAAa,iDAA8B;IACpD,QAAQ,CAAC,YAAY,iDAA8B;IAEnD,QAAQ,CAAC,mBAAmB,6DAE1B;IAEF;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,IAAI;yCAjB7C,iBAAiB;;CAiC7B"}
+{"version":3,"file":"prism-panel.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-panel.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,mBAAmB,EAIpB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;;AAKpE,qBACa,iBAAiB;IAC5B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,QAAQ,CAAC,aAAa,iDAA8B;IACpD,QAAQ,CAAC,YAAY,iDAA8B;IAEnD,QAAQ,CAAC,mBAAmB,6DAE1B;IAEF;;;;;;;OAOG;IACH,QAAQ,CAAC,UAAU,oDAGhB;IAEH;;;;;OAKG;IACH,QAAQ,CAAC,iBAAiB,oDAMvB;IAEH;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,IAAI;yCA7C7C,iBAAiB;;CA6D7B"}

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

@@ -1,10 +1,12 @@
 import { computed, createEnvironmentInjector, EnvironmentInjector, inject, Injectable, signal, } from '@angular/core';
 import { PRISM_BUILTIN_PANELS } from '../tokens/prism-tokens.js';
+import { PrismNavigationService } from './prism-navigation.service.js';
 import { PrismPluginService } from './prism-plugin.service.js';
 import * as i0 from "@angular/core";
 export class PrismPanelService {
     envInjector = inject(EnvironmentInjector);
     pluginService = inject(PrismPluginService);
+    navigationService = inject(PrismNavigationService);
     builtinPanels = inject(PRISM_BUILTIN_PANELS);
     injectorCache = new Map();
     activePanelId = signal('controls', /* @ts-ignore */
@@ -13,6 +15,32 @@ export class PrismPanelService {
     ...(ngDevMode ? [{ debugName: "activeViewId" }] : /* istanbul ignore next */ []));
     activePanelInjector = computed(() => this.getInjector(this.activePanelId()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activePanelInjector" }] : /* istanbul ignore next */ []));
+    /**
+     * Every panel that renders as a view tab, builtin before plugin.
+     *
+     * Unfiltered on purpose: `prism-view-panel-host` resolves the active view
+     * through this list. Filtering here would let the host come up empty for a
+     * frame whenever a component switch invalidates the active view — the
+     * fallback in `prism-shell` runs in the same change-detection round.
+     */
+    viewPanels = computed(() => [
+        ...this.builtinPanels.filter((p) => p.placement === 'view'),
+        ...this.pluginService.viewPanels(),
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewPanels" }] : /* istanbul ignore next */ []));
+    /**
+     * The view panels the active component actually offers.
+     *
+     * Empty when no component is active, which is how pages end up without view
+     * tabs: it falls out of the data instead of needing a case of its own.
+     */
+    visibleViewPanels = computed(() => {
+        const component = this.navigationService.activeComponent();
+        if (!component)
+            return [];
+        return this.viewPanels().filter((p) => !p.isVisible || p.isVisible(component));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleViewPanels" }] : /* istanbul ignore next */ []));
     /**
      * Returns (and lazily creates) the EnvironmentInjector scoped to the given panel.
      * Returns `null` when the panel has no providers.

package/dist/app/shared/prism-metric-badge.component.d.ts

@@ -0,0 +1,32 @@
+import * as i0 from "@angular/core";
+/**
+ * Library-wide metric badge for the header.
+ *
+ * Presentational only — it takes an already-formatted value and a variant and
+ * knows nothing about thresholds, manifests or where the number came from.
+ * That keeps the three badges that use it (a11y in core, coverage and visual
+ * regression in their plugins) owning their own data logic while sharing one
+ * appearance.
+ *
+ * It carries an icon rather than a text label on purpose. The glyph is the
+ * same one the source contributes to the navigation marks and its panel tab,
+ * so one symbol means one source wherever it appears — and the badge gets
+ * narrow enough that three of them fit a 40px header without crowding it.
+ * The icon is `aria-hidden` — it is decoration, not content. The accessible
+ * name is composed here as "label: value" (e.g. "Library coverage: 23%"), so
+ * the figure that is the whole point of the badge cannot be dropped by a
+ * consumer that only passes `label`. `title` stays the full text the
+ * consumer passes, for the hover tooltip.
+ */
+export declare class PrismMetricBadgeComponent {
+    readonly icon: import("@angular/core").InputSignal<string>;
+    readonly value: import("@angular/core").InputSignal<string>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly variant: import("@angular/core").InputSignal<"ok" | "warn" | "danger">;
+    /** "label: value" — the accessible name, so the figure is never dropped. */
+    readonly accessibleName: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismMetricBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismMetricBadgeComponent, "prism-metric-badge", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-metric-badge.component.d.ts.map

package/dist/app/shared/prism-metric-badge.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-metric-badge.component.d.ts","sourceRoot":"","sources":["../../../src/app/shared/prism-metric-badge.component.ts"],"names":[],"mappings":";AAQA;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBA6Da,yBAAyB;IACpC,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,8CAAqB;IACnC,QAAQ,CAAC,OAAO,gEAAyC;IAEzD,4EAA4E;IAC5E,QAAQ,CAAC,cAAc,yCAAsD;yCARlE,yBAAyB;2CAAzB,yBAAyB;CASrC"}

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

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

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

@@ -8,7 +8,6 @@ export declare class PrismShellComponent {
     private readonly themeService;
     protected readonly layout: PrismLayoutService;
     protected readonly panelService: PrismPanelService;
-    private readonly pluginService;
     private readonly urlStateService;
     private readonly persistenceService;
     protected readonly viewPanels: import("@angular/core").Signal<import("../../plugin/plugin.types.js").PanelDefinition[]>;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-shell.component.d.ts","sourceRoot":"","sources":["../../../src/app/shell/prism-shell.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAkBvE,qBA2Pa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAmC;IAEtE,SAAS,CAAC,QAAQ,CAAC,UAAU,2FAG1B;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAK1B;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAG1B;;IAiCH,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;yCA1DhC,mBAAmB;2CAAnB,mBAAmB;CA2E/B"}
+{"version":3,"file":"prism-shell.component.d.ts","sourceRoot":"","sources":["../../../src/app/shell/prism-shell.component.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAiBvE,qBAkQa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAmC;IAEtE,SAAS,CAAC,QAAQ,CAAC,UAAU,2FAAuC;IAEpE,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAK1B;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAG1B;;IAoCH,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;yCAzDhC,mBAAmB;2CAAnB,mBAAmB;CA6E/B"}