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

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

@@ -0,0 +1,124 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import * as i0 from "@angular/core";
+function PrismHeadInfoComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.description());
+} }
+function PrismHeadInfoComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", ctx_r0.variantCount(), " ", ctx_r0.variantCount() === 1 ? "variant" : "variants", " ");
+} }
+function PrismHeadInfoComponent_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tag_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(tag_r2);
+} }
+function PrismHeadInfoComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵrepeaterCreate(1, PrismHeadInfoComponent_Conditional_7_For_2_Template, 2, 1, "span", 7, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.tags());
+} }
+/**
+ * Identity disclosure for the component head.
+ *
+ * Selector, description and tags all answer "what is this component" — a
+ * question you read once on arrival and never again while building. Keeping
+ * them permanently on screen cost a 128px band to say something that belongs
+ * behind one glyph.
+ *
+ * Opening is click-only, through the native Popover API. Escape, click-outside
+ * dismissal and top-layer placement come with it declaratively; a hover panel
+ * would mean rebuilding all three by hand, and crossing the gap between icon
+ * and card without the card closing is its own problem.
+ */
+export class PrismHeadInfoComponent {
+    selector = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selector" }] : /* istanbul ignore next */ []));
+    description = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    tags = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
+    variantCount = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantCount" }] : /* istanbul ignore next */ []));
+    static ɵfac = function PrismHeadInfoComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismHeadInfoComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismHeadInfoComponent, selectors: [["prism-head-info"]], inputs: { selector: [1, "selector"], description: [1, "description"], tags: [1, "tags"], variantCount: [1, "variantCount"] }, decls: 8, vars: 5, consts: [["type", "button", "popovertarget", "prism-head-info", "title", "Component details", "aria-label", "Component details", 1, "info-btn"], ["name", "info", 3, "size"], ["popover", "", "id", "prism-head-info", "role", "dialog", "aria-label", "Component details", 1, "info-card"], [1, "info-card__selector"], [1, "info-card__desc"], [1, "info-card__meta"], [1, "info-card__tags"], [1, "info-card__tag"]], template: function PrismHeadInfoComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵelement(1, "prism-icon", 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "div", 2)(3, "code", 3);
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(5, PrismHeadInfoComponent_Conditional_5_Template, 2, 1, "p", 4);
+            i0.ɵɵconditionalCreate(6, PrismHeadInfoComponent_Conditional_6_Template, 2, 2, "p", 5);
+            i0.ɵɵconditionalCreate(7, PrismHeadInfoComponent_Conditional_7_Template, 3, 0, "div", 6);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("size", 13);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("<", ctx.selector(), ">");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.description() ? 5 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.variantCount() > 0 ? 6 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.tags().length ? 7 : -1);
+        } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n    .info-btn[_ngcontent-%COMP%] {\n      display: grid;\n      place-items: center;\n      width: 20px;\n      height: 20px;\n      padding: 0;\n      border: 0;\n      border-radius: var(--%NS%radius-xs);\n      background: transparent;\n      color: var(--%NS%prism-text-ghost);\n      cursor: pointer;\n      anchor-name: --prism-head-info;\n    }\n    .info-btn[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n    .info-btn[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 1px;\n    }\n\n    .info-card[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: var(--%NS%sp-4);\n      width: 320px;\n      max-width: calc(100vw - var(--%NS%sp-6));\n      border: 1px solid var(--%NS%prism-border-strong);\n      border-radius: var(--%NS%radius-md);\n      background: var(--%NS%prism-bg-elevated);\n      color: var(--%NS%prism-text-2);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      position-anchor: --prism-head-info;\n      position-area: block-end span-inline-end;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n    }\n\n    .info-card__selector[_ngcontent-%COMP%] {\n      display: block;\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-primary);\n      user-select: all;\n    }\n    .info-card__desc[_ngcontent-%COMP%] {\n      margin: var(--%NS%sp-3) 0 0;\n      font-size: var(--%NS%fs-lg);\n      line-height: 1.55;\n    }\n    \n\n\n    .info-card__meta[_ngcontent-%COMP%] {\n      margin: var(--%NS%sp-3) 0 0;\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text-muted);\n    }\n    .info-card__tags[_ngcontent-%COMP%] {\n      margin-top: var(--%NS%sp-4);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--%NS%sp-2);\n    }\n    .info-card__tag[_ngcontent-%COMP%] {\n      padding: 1px var(--%NS%sp-3);\n      font-size: var(--%NS%fs-xs);\n      border-radius: var(--%NS%radius-xs);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeadInfoComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-head-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
+    <button
+      class="info-btn"
+      type="button"
+      popovertarget="prism-head-info"
+      title="Component details"
+      aria-label="Component details"
+    >
+      <prism-icon name="info" [size]="13" />
+    </button>
+
+    <div
+      popover
+      id="prism-head-info"
+      class="info-card"
+      role="dialog"
+      aria-label="Component details"
+    >
+      <code class="info-card__selector">&lt;{{ selector() }}&gt;</code>
+      @if (description()) {
+      <p class="info-card__desc">{{ description() }}</p>
+      } @if (variantCount() > 0) {
+      <p class="info-card__meta">
+        {{ variantCount() }} {{ variantCount() === 1 ? 'variant' : 'variants' }}
+      </p>
+      } @if (tags().length) {
+      <div class="info-card__tags">
+        @for (tag of tags(); track tag) {
+        <span class="info-card__tag">{{ tag }}</span>
+        }
+      </div>
+      }
+    </div>
+  `, styles: ["\n    :host { display: inline-flex; }\n\n    .info-btn {\n      display: grid;\n      place-items: center;\n      width: 20px;\n      height: 20px;\n      padding: 0;\n      border: 0;\n      border-radius: var(--radius-xs);\n      background: transparent;\n      color: var(--prism-text-ghost);\n      cursor: pointer;\n      anchor-name: --prism-head-info;\n    }\n    .info-btn:hover { color: var(--prism-text-2); }\n    .info-btn:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n\n    .info-card {\n      margin: 0;\n      padding: var(--sp-4);\n      width: 320px;\n      max-width: calc(100vw - var(--sp-6));\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--radius-md);\n      background: var(--prism-bg-elevated);\n      color: var(--prism-text-2);\n      box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.45);\n      position-anchor: --prism-head-info;\n      position-area: block-end span-inline-end;\n      position-try-fallbacks: flip-block, flip-inline;\n      inset: auto;\n    }\n\n    .info-card__selector {\n      display: block;\n      font-family: var(--font-mono);\n      font-size: var(--fs-md);\n      color: var(--prism-primary);\n      user-select: all;\n    }\n    .info-card__desc {\n      margin: var(--sp-3) 0 0;\n      font-size: var(--fs-lg);\n      line-height: 1.55;\n    }\n    /* A plain fact about the component, not a measurement \u2014 it sits here with\n       the selector and the tags rather than in the gauge, whose numbers all\n       answer \"did this pass its threshold\". A count cannot. */\n    .info-card__meta {\n      margin: var(--sp-3) 0 0;\n      font-size: var(--fs-md);\n      color: var(--prism-text-muted);\n    }\n    .info-card__tags {\n      margin-top: var(--sp-4);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--sp-2);\n    }\n    .info-card__tag {\n      padding: 1px var(--sp-3);\n      font-size: var(--fs-xs);\n      border-radius: var(--radius-xs);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n    }\n  "] }]
+    }], null, { selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "selector", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], variantCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantCount", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadInfoComponent, { className: "PrismHeadInfoComponent", filePath: "app/component-head/prism-head-info.component.ts", lineNumber: 129 }); })();

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

@@ -1,10 +1,16 @@
+import type { MetricVariant } from './head-metrics.js';
 import * as i0 from "@angular/core";
+/**
+ * One line of the gauge's readout: caption left, value right.
+ *
+ * Was a right-aligned tile in the old head. The pill it used to carry is gone
+ * rather than restyled — it duplicated the caption directly beneath it.
+ */
 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" | "danger">;
+    readonly value: import("@angular/core").InputSignal<string | number>;
+    readonly variant: import("@angular/core").InputSignal<MetricVariant>;
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismStatComponent, "prism-stat", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 //# sourceMappingURL=prism-stat.component.d.ts.map

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,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"}
+{"version":3,"file":"prism-stat.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-stat.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;;AAEvD;;;;;GAKG;AACH,qBAoDa,kBAAkB;IAC7B,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,KAAK,uDAAqC;IACnD,QAAQ,CAAC,OAAO,qDAA8B;yCAHnC,kBAAkB;2CAAlB,kBAAkB;CAI9B"}

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

@@ -1,59 +1,49 @@
-import { Component, ChangeDetectionStrategy, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import * as i0 from "@angular/core";
-function PrismStatComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 4);
-    i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("warn", ctx_r0.pillVariant() === "warn")("danger", ctx_r0.pillVariant() === "danger");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.pill());
-} }
+/**
+ * One line of the gauge's readout: caption left, value right.
+ *
+ * Was a right-aligned tile in the old head. The pill it used to carry is gone
+ * rather than restyled — it duplicated the caption directly beneath it.
+ */
 export class PrismStatComponent {
-    value = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     label = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    pill = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "pill" }] : /* istanbul ignore next */ []));
-    pillVariant = input('ok', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pillVariant" }] : /* istanbul ignore next */ []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    variant = input('ok', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* 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", "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, 5, "span", 2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismStatComponent, selectors: [["prism-stat"]], inputs: { label: [1, "label"], value: [1, "value"], variant: [1, "variant"] }, decls: 6, vars: 8, consts: [[1, "stat"], ["aria-hidden", "true", 1, "stat__dot"], [1, "stat__lbl"], [1, "stat__val"]], template: function PrismStatComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵdomElement(1, "span", 1);
+            i0.ɵɵdomElementStart(2, "span", 2);
+            i0.ɵɵtext(3);
             i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(4, "div", 3);
+            i0.ɵɵdomElementStart(4, "span", 3);
             i0.ɵɵtext(5);
             i0.ɵɵdomElementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ctx.value(), " ");
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.pill() ? 3 : -1);
-            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("stat--ok", ctx.variant() === "ok")("stat--warn", ctx.variant() === "warn")("stat--danger", ctx.variant() === "danger");
+            i0.ɵɵadvance(3);
             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(--%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    }"] });
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.value());
+        } }, styles: [".stat[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: var(--%NS%sp-3);\n      padding: var(--%NS%sp-2) var(--%NS%sp-3);\n      border-radius: var(--%NS%radius-xs);\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text-2);\n    }\n    .stat__dot[_ngcontent-%COMP%] {\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: transparent;\n      flex: none;\n    }\n    .stat__lbl[_ngcontent-%COMP%] { white-space: nowrap; }\n    .stat__val[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-family: var(--%NS%font-mono);\n      font-variant-numeric: tabular-nums;\n      color: var(--%NS%prism-text);\n    }\n    \n\n\n\n    .stat--ok[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] { background: var(--%NS%prism-mark-nominal); }\n    .stat--ok[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-nominal); }\n    .stat--warn[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] { background: var(--%NS%prism-mark-attention); }\n    .stat--warn[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-attention); }\n    .stat--danger[_ngcontent-%COMP%]   .stat__dot[_ngcontent-%COMP%] { background: var(--%NS%prism-mark-critical); }\n    .stat--danger[_ngcontent-%COMP%]   .stat__val[_ngcontent-%COMP%] { color: var(--%NS%prism-mark-critical); }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismStatComponent, [{
         type: Component,
         args: [{ selector: 'prism-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="stat">
-      <div class="stat-val">
-        {{ value() }}
-        @if (pill()) {
-        <span
-          class="pill"
-          [class.warn]="pillVariant() === 'warn'"
-          [class.danger]="pillVariant() === 'danger'"
-          >{{ pill() }}</span
-        >
-        }
-      </div>
-      <div class="stat-lbl">{{ label() }}</div>
+    <div
+      class="stat"
+      [class.stat--ok]="variant() === 'ok'"
+      [class.stat--warn]="variant() === 'warn'"
+      [class.stat--danger]="variant() === 'danger'"
+    >
+      <span class="stat__dot" aria-hidden="true"></span>
+      <span class="stat__lbl">{{ label() }}</span>
+      <span class="stat__val">{{ value() }}</span>
     </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    .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: 66 }); })();
+  `, styles: ["\n    .stat {\n      display: flex;\n      align-items: center;\n      gap: var(--sp-3);\n      padding: var(--sp-2) var(--sp-3);\n      border-radius: var(--radius-xs);\n      font-size: var(--fs-md);\n      color: var(--prism-text-2);\n    }\n    .stat__dot {\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: transparent;\n      flex: none;\n    }\n    .stat__lbl { white-space: nowrap; }\n    .stat__val {\n      margin-left: auto;\n      font-family: var(--font-mono);\n      font-variant-numeric: tabular-nums;\n      color: var(--prism-text);\n    }\n    /* Four states, four treatments. \"ok\" earns the nominal green, and \"none\"\n       deliberately does not: a metric with no data has nothing to report, and\n       colouring it green would claim a clean result the tool never measured.\n       That is the one distinction worth keeping grey. */\n    .stat--ok .stat__dot { background: var(--prism-mark-nominal); }\n    .stat--ok .stat__val { color: var(--prism-mark-nominal); }\n    .stat--warn .stat__dot { background: var(--prism-mark-attention); }\n    .stat--warn .stat__val { color: var(--prism-mark-attention); }\n    .stat--danger .stat__dot { background: var(--prism-mark-critical); }\n    .stat--danger .stat__val { color: var(--prism-mark-critical); }\n  "] }]
+    }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 62 }); })();

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

@@ -158,7 +158,7 @@ export class PrismHeaderComponent {
             i0.ɵɵconditional(ctx.themeService.isDark() ? 14 : 15);
         } }, dependencies: [PrismIconComponent,
             PrismLayoutMenuComponent,
-            PrismHeaderWidgetHostComponent], styles: [".prism-header[_ngcontent-%COMP%] {\n      height: 52px;\n      display: grid;\n      grid-template-columns: minmax(min-content, var(--%NS%sw, 264px)) 1fr auto;\n      align-items: center;\n      padding: 0 14px 0 0;\n      background: var(--%NS%prism-bg);\n      border-bottom: 1px solid var(--%NS%prism-border);\n    }\n\n    .prism-header__brand[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 0 16px;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n\n    .prism-header__logo-default[_ngcontent-%COMP%] {\n      width: 26px;\n      height: 26px;\n      flex: 0 0 26px;\n      color: var(--%NS%prism-primary);\n      filter: drop-shadow(0 0 8px var(--%NS%prism-glow-strong));\n    }\n    .prism-header__logo-default[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] { width: 30px; }\n\n    .prism-header__logo-img[_ngcontent-%COMP%] {\n      height: 26px;\n      width: auto;\n      object-fit: contain;\n    }\n\n    .prism-header__brand-text[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      line-height: 1.1;\n    }\n\n    .prism-header__brand-name[_ngcontent-%COMP%] {\n      font-weight: 700;\n      font-size: var(--%NS%fs-xl);\n      letter-spacing: -0.01em;\n      background: linear-gradient(90deg, var(--%NS%prism-primary), var(--%NS%prism-accent) 60%, var(--%NS%prism-primary-to));\n      -webkit-background-clip: text;\n      background-clip: text;\n      color: transparent;\n    }\n\n    .prism-header__brand-sub[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-xs);\n      color: var(--%NS%prism-text-ghost);\n    }\n\n    .prism-header__cmdbar[_ngcontent-%COMP%] {\n      max-width: 540px;\n      width: 100%;\n      justify-self: center;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      height: 32px;\n      padding: 0 12px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 8px;\n      color: var(--%NS%prism-text-muted);\n      font-size: var(--%NS%fs-lg);\n      cursor: pointer;\n      transition: border-color var(--%NS%dur-fast), background var(--%NS%dur-fast);\n    }\n    .prism-header__cmdbar[_ngcontent-%COMP%]:hover {\n      border-color: var(--%NS%prism-border-strong);\n      color: var(--%NS%prism-text-2);\n    }\n\n    .prism-header__cmdbar-text[_ngcontent-%COMP%] {\n      flex: 1;\n      text-align: left;\n    }\n\n    .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 3px;\n    }\n    .prism-header__cmdbar-shortcut[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n    }\n\n    .prism-header__build-pill[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-xs);\n      color: var(--%NS%prism-text-ghost);\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 9999px;\n      padding: 2px 10px;\n      white-space: nowrap;\n      line-height: 1.4;\n    }\n\n    .prism-header__actions[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 6px;\n    }\n\n    .prism-header__widgets[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      min-width: 0;\n    }\n    .prism-header__widgets--start[_ngcontent-%COMP%] {\n      padding-left: 4px;\n      justify-content: flex-start;\n    }\n\n    .prism-header__icon-btn[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: grid;\n      place-items: center;\n      border-radius: 8px;\n      color: var(--%NS%prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      position: relative;\n      transition: all var(--%NS%dur-fast);\n    }\n    .prism-header__icon-btn[_ngcontent-%COMP%]:hover {\n      background: var(--%NS%prism-input-bg);\n      color: var(--%NS%prism-text);\n    }\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 2px;\n    }"] });
+            PrismHeaderWidgetHostComponent], styles: [".prism-header[_ngcontent-%COMP%] {\n      height: var(--%NS%band-header);\n      display: grid;\n      grid-template-columns: minmax(min-content, var(--%NS%sw, 264px)) 1fr auto;\n      align-items: center;\n      padding: 0 14px 0 0;\n      background: var(--%NS%prism-bg);\n      border-bottom: 1px solid var(--%NS%prism-border);\n    }\n\n    .prism-header__brand[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 0 16px;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n\n    .prism-header__logo-default[_ngcontent-%COMP%] {\n      width: 26px;\n      height: 26px;\n      flex: 0 0 26px;\n      color: var(--%NS%prism-primary);\n      filter: drop-shadow(0 0 8px var(--%NS%prism-glow-strong));\n    }\n    .prism-header__logo-default[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] { width: 30px; }\n\n    .prism-header__logo-img[_ngcontent-%COMP%] {\n      height: 26px;\n      width: auto;\n      object-fit: contain;\n    }\n\n    .prism-header__brand-text[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      line-height: 1.1;\n    }\n\n    .prism-header__brand-name[_ngcontent-%COMP%] {\n      font-weight: 700;\n      font-size: var(--%NS%fs-xl);\n      letter-spacing: -0.01em;\n      background: linear-gradient(90deg, var(--%NS%prism-primary), var(--%NS%prism-accent) 60%, var(--%NS%prism-primary-to));\n      -webkit-background-clip: text;\n      background-clip: text;\n      color: transparent;\n    }\n\n    .prism-header__brand-sub[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-xs);\n      color: var(--%NS%prism-text-ghost);\n    }\n\n    .prism-header__cmdbar[_ngcontent-%COMP%] {\n      max-width: 540px;\n      width: 100%;\n      justify-self: center;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      height: 32px;\n      padding: 0 12px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 8px;\n      color: var(--%NS%prism-text-muted);\n      font-size: var(--%NS%fs-lg);\n      cursor: pointer;\n      transition: border-color var(--%NS%dur-fast), background var(--%NS%dur-fast);\n    }\n    .prism-header__cmdbar[_ngcontent-%COMP%]:hover {\n      border-color: var(--%NS%prism-border-strong);\n      color: var(--%NS%prism-text-2);\n    }\n\n    .prism-header__cmdbar-text[_ngcontent-%COMP%] {\n      flex: 1;\n      text-align: left;\n    }\n\n    .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 3px;\n    }\n    .prism-header__cmdbar-shortcut[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-muted);\n    }\n\n    .prism-header__build-pill[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-xs);\n      color: var(--%NS%prism-text-ghost);\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 9999px;\n      padding: 2px 10px;\n      white-space: nowrap;\n      line-height: 1.4;\n    }\n\n    .prism-header__actions[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 6px;\n    }\n\n    .prism-header__widgets[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      min-width: 0;\n    }\n    .prism-header__widgets--start[_ngcontent-%COMP%] {\n      padding-left: 4px;\n      justify-content: flex-start;\n    }\n\n    .prism-header__icon-btn[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: grid;\n      place-items: center;\n      border-radius: 8px;\n      color: var(--%NS%prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      position: relative;\n      transition: all var(--%NS%dur-fast);\n    }\n    .prism-header__icon-btn[_ngcontent-%COMP%]:hover {\n      background: var(--%NS%prism-input-bg);\n      color: var(--%NS%prism-text);\n    }\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--%NS%prism-primary);\n      outline-offset: 2px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeaderComponent, [{
         type: Component,
@@ -223,7 +223,7 @@ export class PrismHeaderComponent {
         <prism-layout-menu />
       </div>
     </header>
-  `, styles: ["\n    .prism-header {\n      height: 52px;\n      display: grid;\n      grid-template-columns: minmax(min-content, var(--sw, 264px)) 1fr auto;\n      align-items: center;\n      padding: 0 14px 0 0;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    .prism-header__brand {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 0 16px;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n\n    .prism-header__logo-default {\n      width: 26px;\n      height: 26px;\n      flex: 0 0 26px;\n      color: var(--prism-primary);\n      filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n    }\n    .prism-header__logo-default img { width: 30px; }\n\n    .prism-header__logo-img {\n      height: 26px;\n      width: auto;\n      object-fit: contain;\n    }\n\n    .prism-header__brand-text {\n      display: flex;\n      flex-direction: column;\n      line-height: 1.1;\n    }\n\n    .prism-header__brand-name {\n      font-weight: 700;\n      font-size: var(--fs-xl);\n      letter-spacing: -0.01em;\n      background: linear-gradient(90deg, var(--prism-primary), var(--prism-accent) 60%, var(--prism-primary-to));\n      -webkit-background-clip: text;\n      background-clip: text;\n      color: transparent;\n    }\n\n    .prism-header__brand-sub {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n    }\n\n    .prism-header__cmdbar {\n      max-width: 540px;\n      width: 100%;\n      justify-self: center;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      height: 32px;\n      padding: 0 12px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n      color: var(--prism-text-muted);\n      font-size: var(--fs-lg);\n      cursor: pointer;\n      transition: border-color var(--dur-fast), background var(--dur-fast);\n    }\n    .prism-header__cmdbar:hover {\n      border-color: var(--prism-border-strong);\n      color: var(--prism-text-2);\n    }\n\n    .prism-header__cmdbar-text {\n      flex: 1;\n      text-align: left;\n    }\n\n    .prism-header__cmdbar-shortcut {\n      display: flex;\n      gap: 3px;\n    }\n    .prism-header__cmdbar-shortcut kbd {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n    }\n\n    .prism-header__build-pill {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: 9999px;\n      padding: 2px 10px;\n      white-space: nowrap;\n      line-height: 1.4;\n    }\n\n    .prism-header__actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 6px;\n    }\n\n    .prism-header__widgets {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      min-width: 0;\n    }\n    .prism-header__widgets--start {\n      padding-left: 4px;\n      justify-content: flex-start;\n    }\n\n    .prism-header__icon-btn {\n      width: 32px;\n      height: 32px;\n      display: grid;\n      place-items: center;\n      border-radius: 8px;\n      color: var(--prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      position: relative;\n      transition: all var(--dur-fast);\n    }\n    .prism-header__icon-btn:hover {\n      background: var(--prism-input-bg);\n      color: var(--prism-text);\n    }\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
+  `, styles: ["\n    .prism-header {\n      height: var(--band-header);\n      display: grid;\n      grid-template-columns: minmax(min-content, var(--sw, 264px)) 1fr auto;\n      align-items: center;\n      padding: 0 14px 0 0;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    .prism-header__brand {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 0 16px;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n\n    .prism-header__logo-default {\n      width: 26px;\n      height: 26px;\n      flex: 0 0 26px;\n      color: var(--prism-primary);\n      filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n    }\n    .prism-header__logo-default img { width: 30px; }\n\n    .prism-header__logo-img {\n      height: 26px;\n      width: auto;\n      object-fit: contain;\n    }\n\n    .prism-header__brand-text {\n      display: flex;\n      flex-direction: column;\n      line-height: 1.1;\n    }\n\n    .prism-header__brand-name {\n      font-weight: 700;\n      font-size: var(--fs-xl);\n      letter-spacing: -0.01em;\n      background: linear-gradient(90deg, var(--prism-primary), var(--prism-accent) 60%, var(--prism-primary-to));\n      -webkit-background-clip: text;\n      background-clip: text;\n      color: transparent;\n    }\n\n    .prism-header__brand-sub {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n    }\n\n    .prism-header__cmdbar {\n      max-width: 540px;\n      width: 100%;\n      justify-self: center;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      height: 32px;\n      padding: 0 12px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px;\n      color: var(--prism-text-muted);\n      font-size: var(--fs-lg);\n      cursor: pointer;\n      transition: border-color var(--dur-fast), background var(--dur-fast);\n    }\n    .prism-header__cmdbar:hover {\n      border-color: var(--prism-border-strong);\n      color: var(--prism-text-2);\n    }\n\n    .prism-header__cmdbar-text {\n      flex: 1;\n      text-align: left;\n    }\n\n    .prism-header__cmdbar-shortcut {\n      display: flex;\n      gap: 3px;\n    }\n    .prism-header__cmdbar-shortcut kbd {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      padding: 1px 5px;\n      border-radius: 4px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n    }\n\n    .prism-header__build-pill {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: 9999px;\n      padding: 2px 10px;\n      white-space: nowrap;\n      line-height: 1.4;\n    }\n\n    .prism-header__actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 6px;\n    }\n\n    .prism-header__widgets {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      min-width: 0;\n    }\n    .prism-header__widgets--start {\n      padding-left: 4px;\n      justify-content: flex-start;\n    }\n\n    .prism-header__icon-btn {\n      width: 32px;\n      height: 32px;\n      display: grid;\n      place-items: center;\n      border-radius: 8px;\n      color: var(--prism-text-muted);\n      background: none;\n      border: none;\n      cursor: pointer;\n      position: relative;\n      transition: all var(--dur-fast);\n    }\n    .prism-header__icon-btn:hover {\n      background: var(--prism-input-bg);\n      color: var(--prism-text);\n    }\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
     }], null, { onGlobalKey: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]

package/dist/app/icons/icon-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../src/app/icons/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwCjC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjB,iFAAiF;AACjF,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAAuB,CAAC"}
+{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../src/app/icons/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA2CjC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjB,iFAAiF;AACjF,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAAuB,CAAC"}

package/dist/app/icons/icon-registry.js

@@ -36,6 +36,8 @@ const ICONS = {
     code: '<path d="m18 16 4-4-4-4M6 8l-4 4 4 4m8.5-12-5 16"/>',
     x: '<path d="M18 6 6 18M6 6l12 12"/>',
     check: '<path d="M20 6 9 17l-5-5"/>',
+    info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+    'circle-dashed': '<path d="M10.1 2.18a9.93 9.93 0 0 1 3.8 0"/><path d="M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7"/><path d="M21.82 10.1a9.93 9.93 0 0 1 0 3.8"/><path d="M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69"/><path d="M13.9 21.82a9.94 9.94 0 0 1-3.8 0"/><path d="M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7"/><path d="M2.18 13.9a9.93 9.93 0 0 1 0-3.8"/><path d="M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69"/>',
 };
 export { ICONS };
 /** Every name the registry can draw — what a panel's `icon` has to pick from. */

package/dist/app/index.d.ts

@@ -1,4 +1,4 @@
-export { PRISM_MANIFEST, PRISM_CONFIG, } from './tokens/prism-tokens.js';
+export { PRISM_MANIFEST, PRISM_CONFIG } from './tokens/prism-tokens.js';
 export { PRISM_DEFAULT_THEME, PRISM_DARK_THEME, PRISM_LIGHT_THEME, PRISM_BASE_TOKENS, } from './theme/prism-default-theme.js';
 export { PrismThemeService } from './services/prism-theme.service.js';
 export type { NavigationItem } from './services/navigation-item.types.js';
@@ -16,4 +16,6 @@ export { PrismPageRendererComponent } from './page-renderer/prism-page-renderer.
 export { providePrism } from './provide-prism.js';
 export type { ProvidePrismOptions } from './provide-prism.js';
 export { enablePrismHmr } from './hmr.js';
+export { PrismMetricBadgeComponent } from './shared/prism-metric-badge.component.js';
+export { PrismIconComponent } from './icons/prism-icon.component.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,cAAc,EACd,YAAY,GACb,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGtE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,KAAK,aAAa,GACnB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAC;AAG9F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxE,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGtE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,KAAK,aAAa,GACnB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAC;AAG9F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAyB1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/app/index.js

@@ -1,7 +1,7 @@
 // Tokens
 // PRISM_RENDERER_HOOKS + PrismRendererHooks are exported from the plugin entry point
 // (src/plugin/index.ts) since they belong to the plugin API surface.
-export { PRISM_MANIFEST, PRISM_CONFIG, } from './tokens/prism-tokens.js';
+export { PRISM_MANIFEST, PRISM_CONFIG } from './tokens/prism-tokens.js';
 // Theme
 export { PRISM_DEFAULT_THEME, PRISM_DARK_THEME, PRISM_LIGHT_THEME, PRISM_BASE_TOKENS, } from './theme/prism-default-theme.js';
 export { PrismThemeService } from './services/prism-theme.service.js';
@@ -23,3 +23,28 @@ export { PrismPageRendererComponent } from './page-renderer/prism-page-renderer.
 export { providePrism } from './provide-prism.js';
 // HMR helper
 export { enablePrismHmr } from './hmr.js';
+// Shared presentational components for plugin contributions. These live on
+// the main entry rather than `plugin/index.ts` because the builder evaluates
+// plugin config — and everything it imports — in Node.js, and that barrel
+// draws an explicit line at decorated declarations.
+//
+// This barrel draws no such line, and the badges do cross into Node. The
+// `loadComponent` indirection keeps plugin *panels* out of the builder's
+// module graph, but `@ng-prism/plugin-coverage` and
+// `@ng-prism/plugin-visual-regression` also re-export their header badge
+// components *statically* from their Node entry (`exports["."].import`), and
+// those components import `PrismMetricBadgeComponent` from here. So loading a
+// plugin config in `builder/config-loader` pulls this whole file — shell
+// component included — into Node. It evaluates cleanly only because the
+// config loader imports `@angular/compiler` before anything else.
+//
+// Moving those two re-exports to the packages' `.browser.ts` entries does not
+// fix it: `package.json` maps "types" to the single `index.d.ts` generated
+// from the Node entry under every condition, so a symbol dropped from that
+// entry disappears from the public type surface while still shipping in the
+// browser bundle — the mismatch `plugin-visual-regression`'s
+// `entry-parity.spec.ts` exists to forbid. Making the badges Node-safe means
+// giving them an import that is not this barrel, which is a public API
+// decision, not a cleanup.
+export { PrismMetricBadgeComponent } from './shared/prism-metric-badge.component.js';
+export { PrismIconComponent } from './icons/prism-icon.component.js';

package/dist/app/layout-menu/prism-layout-menu.component.js

@@ -32,7 +32,7 @@ function PrismLayoutMenuComponent_Conditional_6_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵdomElementEnd()();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵdomElementStart(17, "span", 12);
-    i0.ɵɵtext(18, "Show toolbar");
+    i0.ɵɵtext(18, "Show variant rail");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(19, "span", 13)(20, "kbd");
     i0.ɵɵtext(21, "\u2325");
@@ -156,7 +156,7 @@ export class PrismLayoutMenuComponent {
               />
             </svg>
           </span>
-          <span class="layout-menu__label">Show toolbar</span>
+          <span class="layout-menu__label">Show variant rail</span>
           <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>T</kbd></span>
         </button>
         <button class="layout-menu__item" (click)="toggle('addons')">

package/dist/app/overview/overview-panel.d.ts

@@ -0,0 +1,3 @@
+import type { PanelDefinition } from '../../plugin/plugin.types.js';
+export declare const OVERVIEW_PANEL: PanelDefinition;
+//# sourceMappingURL=overview-panel.d.ts.map

package/dist/app/overview/overview-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overview-panel.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAIpE,eAAO,MAAM,cAAc,EAAE,eAM5B,CAAC"}

package/dist/app/overview/overview-panel.js

@@ -0,0 +1,9 @@
+import { showsOverview } from './overview-visibility.js';
+import { PrismOverviewComponent } from './prism-overview.component.js';
+export const OVERVIEW_PANEL = {
+    id: 'overview',
+    label: 'Overview',
+    placement: 'view',
+    component: PrismOverviewComponent,
+    isVisible: showsOverview,
+};

package/dist/app/overview/overview-visibility.d.ts

@@ -0,0 +1,15 @@
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+/**
+ * Whether the Overview tab is offered for this component.
+ *
+ * Two conditions, and the second is a correctness argument rather than taste.
+ * A `renderPage` component does not render itself — it renders a registered
+ * `ComponentPage`, and that page reads its values from the *global*
+ * `PrismRendererService`. n cells side by side would all show the same state,
+ * so an Overview there would be demonstrably wrong, not merely unhelpful.
+ *
+ * A single variant needs no contact sheet: the grid would be one cell, and the
+ * Playground says the same thing better.
+ */
+export declare function showsOverview(component: RuntimeComponent): boolean;
+//# sourceMappingURL=overview-visibility.d.ts.map

package/dist/app/overview/overview-visibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overview-visibility.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,gBAAgB,GAAG,OAAO,CAIlE"}

package/dist/app/overview/overview-visibility.js

@@ -0,0 +1,18 @@
+/**
+ * Whether the Overview tab is offered for this component.
+ *
+ * Two conditions, and the second is a correctness argument rather than taste.
+ * A `renderPage` component does not render itself — it renders a registered
+ * `ComponentPage`, and that page reads its values from the *global*
+ * `PrismRendererService`. n cells side by side would all show the same state,
+ * so an Overview there would be demonstrably wrong, not merely unhelpful.
+ *
+ * A single variant needs no contact sheet: the grid would be one cell, and the
+ * Playground says the same thing better.
+ */
+export function showsOverview(component) {
+    const config = component.meta.showcaseConfig;
+    if (config.renderPage)
+        return false;
+    return (config.variants?.length ?? 0) >= 2;
+}

package/dist/app/overview/prism-overview-cell.component.d.ts

@@ -0,0 +1,29 @@
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import * as i0 from "@angular/core";
+/**
+ * One frame of the contact sheet: a stage painting the variant's declared
+ * background, with the variant's own instance on it and a caption beneath.
+ *
+ * It deliberately shares none of the Playground's bookkeeping. Output
+ * subscriptions, `renderedElement`, the `prism:render:*` marks, the renderer
+ * hooks and `data-prism-rendered` all describe *one* rendered thing; n cells
+ * writing to any of them would corrupt what they mean. `data-prism-rendered`
+ * matters most — it is the selector external screenshot runners key on (see
+ * `docs/guide/external-tooling.md`), and this component never emits it.
+ */
+export declare class PrismOverviewCellComponent {
+    readonly component: import("@angular/core").InputSignal<RuntimeComponent>;
+    readonly index: import("@angular/core").InputSignal<number>;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly outlet;
+    /** Never null: `resolveVariantBg` falls back to `DEFAULT_VARIANT_BG`. */
+    protected readonly bg: import("@angular/core").Signal<import("../services/prism-canvas.service.js").CanvasBg>;
+    protected readonly caption: import("@angular/core").Signal<string>;
+    protected readonly isWide: import("@angular/core").Signal<boolean>;
+    constructor();
+    private mount;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismOverviewCellComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismOverviewCellComponent, "prism-overview-cell", never, { "component": { "alias": "component"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-overview-cell.component.d.ts.map

package/dist/app/overview/prism-overview-cell.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAOrE;;;;;;;;;;GAUG;AACH,qBAmEa,0BAA0B;IACrC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAE1C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,EAAE,yFAEnB;IAEF,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAUvB;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,0CAMtB;;IAmBH,OAAO,CAAC,KAAK;yCApDF,0BAA0B;2CAA1B,0BAA0B;CAgGtC"}