@ng-prism/core 22.2.0-beta.4 → 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(--font-mono);\n      font-size: var(--fs-xl);\n      font-weight: 600;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .pill[_ngcontent-%COMP%] {\n      padding: 0 5px;\n      font-size: 9.5px;\n      border-radius: 3px;\n      background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n      color: var(--prism-success);\n      font-weight: 700;\n      letter-spacing: 0.04em;\n    }\n    .pill.warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n      color: var(--prism-warn);\n    }\n    .pill.danger[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-danger) 15%, transparent);\n      color: var(--prism-danger);\n    }\n    .stat-lbl[_ngcontent-%COMP%] {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }"] });
+            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/controls/boolean-control.component.js

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

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

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

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

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

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

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

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

@@ -31,7 +31,7 @@ export class UnionControlComponent {
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.options());
-        } }, styles: [".ctl-pills[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 4px;\n      flex-wrap: wrap;\n    }\n    .ctl-pill[_ngcontent-%COMP%] {\n      height: 26px;\n      padding: 0 10px;\n      font-size: var(--fs-sm);\n      font-weight: 500;\n      border: 1px solid var(--prism-border);\n      border-radius: 4px;\n      color: var(--prism-text-muted);\n      background: transparent;\n      cursor: pointer;\n      transition: all var(--dur-fast);\n      font-family: var(--font-sans);\n    }\n    .ctl-pill[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      border-color: var(--prism-border-strong);\n    }\n    .ctl-pill--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      color: var(--prism-primary);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      font-weight: 600;\n    }"] });
+        } }, styles: [".ctl-pills[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 4px;\n      flex-wrap: wrap;\n    }\n    .ctl-pill[_ngcontent-%COMP%] {\n      height: 26px;\n      padding: 0 10px;\n      font-size: var(--%NS%fs-sm);\n      font-weight: 500;\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 4px;\n      color: var(--%NS%prism-text-muted);\n      background: transparent;\n      cursor: pointer;\n      transition: all var(--%NS%dur-fast);\n      font-family: var(--%NS%font-sans);\n    }\n    .ctl-pill[_ngcontent-%COMP%]:hover {\n      color: var(--%NS%prism-text);\n      border-color: var(--%NS%prism-border-strong);\n    }\n    .ctl-pill--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-primary) 15%, transparent);\n      color: var(--%NS%prism-primary);\n      border-color: color-mix(in srgb, var(--%NS%prism-primary) 40%, transparent);\n      font-weight: 600;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnionControlComponent, [{
         type: Component,

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(--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[_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(--prism-primary);\n      filter: drop-shadow(0 0 8px var(--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(--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[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      color: var(--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(--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[_ngcontent-%COMP%]:hover {\n      border-color: var(--prism-border-strong);\n      color: var(--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(--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[_ngcontent-%COMP%] {\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[_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(--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[_ngcontent-%COMP%]:hover {\n      background: var(--prism-input-bg);\n      color: var(--prism-text);\n    }\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--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

@@ -0,0 +1,15 @@
+/**
+ * The glyph registry backing `prism-icon`, extracted into its own
+ * dependency-free module.
+ *
+ * `plugin/index.ts` re-exports `ICON_NAMES` from here rather than from
+ * `prism-icon.component.ts` so a plugin author can resolve the name the docs
+ * point them to (`NavigationDecorationDefinition.icon`, `PanelDefinition.icon`)
+ * without pulling an `@Component` class into a module graph the builder
+ * evaluates in Node.js — the same reason plugin panels are lazy-loaded.
+ */
+declare const ICONS: Record<string, string>;
+export { ICONS };
+/** Every name the registry can draw — what a panel's `icon` has to pick from. */
+export declare const ICON_NAMES: readonly string[];
+//# sourceMappingURL=icon-registry.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,44 @@
+/**
+ * The glyph registry backing `prism-icon`, extracted into its own
+ * dependency-free module.
+ *
+ * `plugin/index.ts` re-exports `ICON_NAMES` from here rather than from
+ * `prism-icon.component.ts` so a plugin author can resolve the name the docs
+ * point them to (`NavigationDecorationDefinition.icon`, `PanelDefinition.icon`)
+ * without pulling an `@Component` class into a module graph the builder
+ * evaluates in Node.js — the same reason plugin panels are lazy-loaded.
+ */
+const ICONS = {
+    search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
+    'refresh-cw': '<path d="M21 12a9 9 0 0 1-15.5 6.3L3 16m0 0v5m0-5h5M3 12a9 9 0 0 1 15.5-6.3L21 8m0 0V3m0 5h-5"/>',
+    bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+    sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.2 4.2l1.4 1.4m12.8 12.8 1.4 1.4M2 12h2m16 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>',
+    moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/>',
+    'more-horizontal': '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
+    'chevron-down': '<path d="m6 9 6 6 6-6"/>',
+    'chevron-right': '<path d="m9 18 6-6-6-6"/>',
+    pin: '<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>',
+    box: '<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5M12 22V12"/>',
+    'sliders-horizontal': '<path d="M21 4h-7M10 4H3m18 8h-9M6 12H3m18 8h-5M10 20H3"/><circle cx="8" cy="4" r="2"/><circle cx="14" cy="12" r="2"/><circle cx="18" cy="20" r="2"/>',
+    zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
+    accessibility: '<circle cx="16" cy="4" r="1"/><path d="m18 19 1-7-6 1"/><path d="m5 8 3-3 5.5 3-2.36 3.5"/><path d="M4.24 14.5a5 5 0 0 0 6.88 6"/><path d="M13.76 17.5a5 5 0 0 0-6.88-6"/>',
+    'file-text': '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8m8 4H8m4 4H8"/>',
+    figma: '<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5Z"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12Z"/><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0Z"/><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0Z"/><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5Z"/>',
+    'box-select': '<path d="M5 3a2 2 0 0 0-2 2"/><path d="M19 3a2 2 0 0 1 2 2"/><path d="M21 19a2 2 0 0 1-2 2"/><path d="M5 21a2 2 0 0 1-2-2"/><path d="M9 3h1m4 0h1M9 21h1m4 0h1M3 9v1m0 4v1M21 9v1m0 4v1"/>',
+    activity: '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
+    'shield-check': '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
+    camera: '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',
+    move: '<path d="M12 2v20M2 12h20m-16-4-4 4 4 4m12-8 4 4-4 4M8 8l-4 4 4 4"/>',
+    crosshair: '<circle cx="12" cy="12" r="10"/><path d="M22 12h-4M6 12H2m10-6V2m0 20v-4"/>',
+    copy: '<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
+    'maximize-2': '<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"/>',
+    eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
+    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. */
+export const ICON_NAMES = Object.keys(ICONS);

package/dist/app/icons/prism-icon.component.d.ts

@@ -1,6 +1,6 @@
+import { ICON_NAMES } from './icon-registry.js';
 import * as i0 from "@angular/core";
-/** Every name the registry can draw — what a panel's `icon` has to pick from. */
-export declare const ICON_NAMES: readonly string[];
+export { ICON_NAMES };
 /**
  * The glyph markup for `name`, or `undefined` when the registry has no entry.
  *

package/dist/app/icons/prism-icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-icon.component.d.ts","sourceRoot":"","sources":["../../../src/app/icons/prism-icon.component.ts"],"names":[],"mappings":";AAqDA,iFAAiF;AACjF,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAAuB,CAAC;AAIhE;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAW5D;AAED,qBAOa,kBAAkB;IAC7B,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,IAAI,8CAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;;yCAJ3C,kBAAkB;2CAAlB,kBAAkB;CAkC9B"}
+{"version":3,"file":"prism-icon.component.d.ts","sourceRoot":"","sources":["../../../src/app/icons/prism-icon.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAS,UAAU,EAAE,MAAM,oBAAoB,CAAC;;AAMvD,OAAO,EAAE,UAAU,EAAE,CAAC;AAMtB;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAW5D;AAED,qBAOa,kBAAkB;IAC7B,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,IAAI,8CAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;;yCAJ3C,kBAAkB;2CAAlB,kBAAkB;CAkC9B"}

package/dist/app/icons/prism-icon.component.js

@@ -1,37 +1,12 @@
 import { Component, ChangeDetectionStrategy, input, effect, ElementRef, inject, } from '@angular/core';
+import { ICONS, ICON_NAMES } from './icon-registry.js';
 import * as i0 from "@angular/core";
-const ICONS = {
-    search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
-    'refresh-cw': '<path d="M21 12a9 9 0 0 1-15.5 6.3L3 16m0 0v5m0-5h5M3 12a9 9 0 0 1 15.5-6.3L21 8m0 0V3m0 5h-5"/>',
-    bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
-    sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.2 4.2l1.4 1.4m12.8 12.8 1.4 1.4M2 12h2m16 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>',
-    moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/>',
-    'more-horizontal': '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
-    'chevron-down': '<path d="m6 9 6 6 6-6"/>',
-    'chevron-right': '<path d="m9 18 6-6-6-6"/>',
-    pin: '<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>',
-    box: '<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5M12 22V12"/>',
-    'sliders-horizontal': '<path d="M21 4h-7M10 4H3m18 8h-9M6 12H3m18 8h-5M10 20H3"/><circle cx="8" cy="4" r="2"/><circle cx="14" cy="12" r="2"/><circle cx="18" cy="20" r="2"/>',
-    zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
-    accessibility: '<circle cx="16" cy="4" r="1"/><path d="m18 19 1-7-6 1"/><path d="m5 8 3-3 5.5 3-2.36 3.5"/><path d="M4.24 14.5a5 5 0 0 0 6.88 6"/><path d="M13.76 17.5a5 5 0 0 0-6.88-6"/>',
-    'file-text': '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8m8 4H8m4 4H8"/>',
-    figma: '<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5Z"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12Z"/><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0Z"/><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0Z"/><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5Z"/>',
-    'box-select': '<path d="M5 3a2 2 0 0 0-2 2"/><path d="M19 3a2 2 0 0 1 2 2"/><path d="M21 19a2 2 0 0 1-2 2"/><path d="M5 21a2 2 0 0 1-2-2"/><path d="M9 3h1m4 0h1M9 21h1m4 0h1M3 9v1m0 4v1M21 9v1m0 4v1"/>',
-    activity: '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
-    'shield-check': '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
-    camera: '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',
-    move: '<path d="M12 2v20M2 12h20m-16-4-4 4 4 4m12-8 4 4-4 4M8 8l-4 4 4 4"/>',
-    crosshair: '<circle cx="12" cy="12" r="10"/><path d="M22 12h-4M6 12H2m10-6V2m0 20v-4"/>',
-    copy: '<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
-    'maximize-2': '<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"/>',
-    eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
-    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"/>',
-};
+// Re-exported for existing consumers of this module. The registry itself
+// lives in `icon-registry.js` — a dependency-free module — so a plugin barrel
+// can re-export `ICON_NAMES` without dragging this `@Component` class (and
+// `@angular/core`) into a module graph the builder evaluates in Node.js.
+export { ICON_NAMES };
 const SVG_NS = 'http://www.w3.org/2000/svg';
-/** Every name the registry can draw — what a panel's `icon` has to pick from. */
-export const ICON_NAMES = Object.keys(ICONS);
 const warnedIcons = new Set();
 /**
  * The glyph markup for `name`, or `undefined` when the registry has no entry.
@@ -90,4 +65,4 @@ export class PrismIconComponent {
         type: Component,
         args: [{ selector: 'prism-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ``, styles: [":host { display: inline-flex; align-items: center; justify-content: center; }"] }]
     }], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconComponent, { className: "PrismIconComponent", filePath: "app/icons/prism-icon.component.ts", lineNumber: 91 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconComponent, { className: "PrismIconComponent", filePath: "app/icons/prism-icon.component.ts", lineNumber: 53 }); })();

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"}