@ng-prism/core 22.6.0 → 22.7.0-beta.0

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

@@ -1,3 +1,46 @@
+import { deriveA11ySummary } from '../panels/a11y/a11y-summary.js';
+const isVerdict = (v) => v === 'ok' || v === 'warn' || v === 'danger';
+/**
+ * The head's metrics, in source order: coverage, the a11y score, the visual
+ * regression headline.
+ *
+ * It reads verdicts rather than computing them. Coverage and visual regression
+ * take what their plugins derived at build time from their own thresholds; the
+ * a11y score is the live audit graded by `deriveA11ySummary`, the rule the tab,
+ * the sidebar and the header use. A figure without a verdict stays `none`
+ * instead of being graded on a scale of the head's own.
+ */
+export function headMetrics(input) {
+    const coverage = input.meta?.['coverage'];
+    const vrt = input.meta?.['visualRegression'];
+    const t = coverage?.thresholds;
+    const coverageTarget = t ? Math.round((t.lines + t.branches + t.functions + t.statements) / 4) : null;
+    const hasCoverage = coverage?.found === true && typeof coverage.score === 'number';
+    const a11y = input.a11y;
+    return [
+        {
+            id: 'coverage',
+            label: 'Coverage',
+            value: hasCoverage ? `${coverage.score}%` : '—',
+            threshold: coverageTarget === null ? '—' : `≥ ${coverageTarget}%`,
+            variant: hasCoverage && isVerdict(coverage.summary?.variant) ? coverage.summary.variant : 'none'
+        },
+        {
+            id: 'a11y',
+            label: 'A11y score',
+            value: a11y === null ? '—' : String(a11y.score),
+            threshold: `≥ ${input.a11yThresholds.score}`,
+            variant: a11y === null ? 'none' : deriveA11ySummary(a11y, input.a11yThresholds).variant
+        },
+        {
+            id: 'vrt',
+            label: 'VRT diff',
+            value: vrt?.found && vrt.summary ? vrt.summary.value : '—',
+            threshold: 'no changes',
+            variant: vrt?.found && isVerdict(vrt.summary?.variant) ? vrt.summary.variant : 'none'
+        }
+    ];
+}
 const SEVERITY = {
     none: 0,
     ok: 0,
@@ -5,35 +48,22 @@ const SEVERITY = {
     danger: 2
 };
 /**
- * Folds the head's metrics into what one chip can say.
- *
- * A pure function instead of a computed inside the component:
- * components using signal inputs cannot be rendered through TestBed in this
- * repo's Jest setup, so any logic left in a template is logic that never gets
- * a test. This mirrors `decorateItem` in the sidebar, which resolves the same
- * kind of question for navigation marks.
+ * The one metric the chip shows: the worst, ties resolved by source order so
+ * the chip does not flicker between two equally bad ones; when everything is
+ * fine, the first measured one in the ok tone. `null` when nothing is
+ * measured, and the head shows no gauge.
  *
- * Ties resolve by source order so the chip shows a stable metric across
- * renders rather than flickering between two equally bad ones.
+ * A pure function instead of a computed inside the component: components using
+ * signal inputs cannot be rendered through TestBed in this repo's Jest setup.
  */
-export function summarizeMetrics(metrics) {
-    let measured = 0;
-    let worst = null;
-    let deviating = 0;
-    for (const m of metrics) {
-        if (m.variant !== 'none')
-            measured++;
-        if (SEVERITY[m.variant] === 0)
-            continue;
-        deviating++;
-        if (worst === null || SEVERITY[m.variant] > SEVERITY[worst.variant]) {
+export function gaugeChip(metrics) {
+    const measured = metrics.filter((m) => m.variant !== 'none');
+    if (measured.length === 0)
+        return null;
+    let worst = measured[0];
+    for (const m of measured) {
+        if (SEVERITY[m.variant] > SEVERITY[worst.variant])
             worst = m;
-        }
     }
-    return {
-        measured,
-        worst,
-        others: deviating > 0 ? deviating - 1 : 0,
-        variant: worst === null ? 'ok' : worst.variant
-    };
+    return { metric: worst, variant: worst.variant, measured: measured.length };
 }

package/dist/app/component-head/pipe-facts.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The plain facts about a pipe for the head's info popover: whether it is pure,
+ * and where to import it from. Both are optional on a scanned pipe (purity when
+ * `@Pipe({ pure })` could not be read, the import path when the scanner could not
+ * place the pipe), so a fact the scanner could not establish is left out rather
+ * than guessed.
+ */
+export declare function pipeFacts(pure: boolean | undefined, importPath: string | undefined): string[];
+//# sourceMappingURL=pipe-facts.d.ts.map

package/dist/app/component-head/pipe-facts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipe-facts.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/pipe-facts.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,EAAE,CAM7F"}

package/dist/app/component-head/pipe-facts.js

@@ -0,0 +1,15 @@
+/**
+ * The plain facts about a pipe for the head's info popover: whether it is pure,
+ * and where to import it from. Both are optional on a scanned pipe (purity when
+ * `@Pipe({ pure })` could not be read, the import path when the scanner could not
+ * place the pipe), so a fact the scanner could not establish is left out rather
+ * than guessed.
+ */
+export function pipeFacts(pure, importPath) {
+    const facts = [];
+    if (pure !== undefined)
+        facts.push(pure ? 'Pure' : 'Impure');
+    if (importPath)
+        facts.push(importPath);
+    return facts;
+}

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

@@ -1,41 +1,38 @@
 import type { ComponentStatus } from '../../decorator/showcase.types.js';
-import type { HeadMetric } from './head-metrics.js';
 import * as i0 from "@angular/core";
 interface StatusBadge {
     label: string;
     tooltip: string;
+    tone: 'success' | 'warn' | 'danger';
 }
 export declare class PrismComponentHeadComponent {
     private readonly navigationService;
     private readonly auditService;
-    protected readonly comp: import("@angular/core").Signal<import("../../index.js").RuntimeComponent | null>;
+    private readonly manifest;
+    private readonly config;
+    protected readonly comp: import("@angular/core").Signal<import("../../plugin/plugin.types.js").RuntimeComponent | null>;
+    protected readonly service: import("@angular/core").Signal<import("../../index.js").RuntimeService | null>;
+    protected readonly pipe: import("@angular/core").Signal<import("../../index.js").RuntimePipe | null>;
+    /** What the head introduces: the active component or, on a service or pipe page, the service or the pipe. */
+    protected readonly subject: import("@angular/core").Signal<import("../../index.js").ScannedService | import("../../index.js").ScannedPipe | import("../../plugin/plugin.types.js").ScannedComponent | null>;
     protected readonly category: import("@angular/core").Signal<string>;
+    /** The selector of a component. A service or a pipe has none. */
+    protected readonly selector: import("@angular/core").Signal<string | undefined>;
+    /** A pipe is used in a template as `| name`, so that is what its code block shows. */
+    protected readonly code: import("@angular/core").Signal<string | undefined>;
+    protected readonly facts: import("@angular/core").Signal<string[]>;
     protected readonly variantCount: import("@angular/core").Signal<number>;
     protected readonly stateCount: import("@angular/core").Signal<number>;
     protected readonly status: import("@angular/core").Signal<ComponentStatus | undefined>;
     protected readonly statusBadge: import("@angular/core").Signal<StatusBadge | null>;
-    protected readonly coveragePercent: import("@angular/core").Signal<number | null>;
-    protected readonly a11yScore: import("@angular/core").Signal<number | null>;
     /**
-     * The visual regression headline, as the plugin already derived it.
-     *
-     * Read whole rather than recomputed: the colour follows the plugin's status
-     * semantics (red for any changed variant, amber for ones that could not be
-     * compared), and duplicating that rule here would mean the stat and the
-     * plugin's own panel could disagree about the same component.
+     * The configured a11y thresholds, resolved the way the panel host and the
+     * header badge resolve them, so the gauge grades the live audit on the
+     * same scale as the tab and the sidebar.
      */
-    protected readonly vrtStat: import("@angular/core").Signal<{
-        value: string;
-        variant: "ok" | "warn" | "danger";
-    } | null>;
-    /**
-     * The full metric list for the gauge, in source order.
-     *
-     * Order matters: `summarizeMetrics` breaks severity ties by position, so
-     * this sequence is what makes the chip show a stable metric rather than
-     * flickering between two equally bad ones.
-     */
-    protected readonly metrics: import("@angular/core").Signal<HeadMetric[]>;
+    private readonly a11yThresholds;
+    /** The full metric list for the gauge, in source order. */
+    protected readonly metrics: import("@angular/core").Signal<import("./head-metrics.js").HeadMetric[]>;
     private readonly componentMeta;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismComponentHeadComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismComponentHeadComponent, "prism-component-head", never, {}, {}, never, ["[headEnd]"], true, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;AAIpD,UAAU,WAAW;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACnB;AAqBD,qBAQa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IAEzD,SAAS,CAAC,QAAQ,CAAC,IAAI,mFAA4D;IAEnF,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAIxB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAI5B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAI1B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAAwF;IAEjH,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAI3B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,gDAM/B;IAWH,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAEzB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO;eACf,MAAM;iBACJ,IAAI,GAAG,MAAM,GAAG,QAAQ;cAQlC;IAEH;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,+CAyBvB;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK3B;yCAhHM,2BAA2B;2CAA3B,2BAA2B;CAiHvC"}
+{"version":3,"file":"prism-component-head.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-component-head.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAczE,UAAU,WAAW;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;CACvC;AAyBD,qBAQa,2BAA2B;IACpC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IACpE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAE9D,SAAS,CAAC,QAAQ,CAAC,IAAI,iGAA4D;IACnF,SAAS,CAAC,QAAQ,CAAC,OAAO,iFAA0D;IACpF,SAAS,CAAC,QAAQ,CAAC,IAAI,8EAAuD;IAE9E,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,OAAO,kLAA0F;IAEpH,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAA8E;IAEzG,iEAAiE;IACjE,SAAS,CAAC,QAAQ,CAAC,QAAQ,qDAA4D;IAEvF,sFAAsF;IACtF,SAAS,CAAC,QAAQ,CAAC,IAAI,qDAIpB;IAEH,SAAS,CAAC,QAAQ,CAAC,KAAK,2CAOrB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAI5B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAI1B;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8DAAsF;IAE/G,SAAS,CAAC,QAAQ,CAAC,WAAW,qDAI3B;IAEH;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,cAAc,CAI5B;IAEH,2DAA2D;IAC3D,SAAS,CAAC,QAAQ,CAAC,OAAO,2EAMxB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK3B;yCA/EM,2BAA2B;2CAA3B,2BAA2B;CAgFvC"}

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

@@ -1,24 +1,32 @@
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { A11yAuditService } from '../panels/a11y/a11y-audit.service.js';
+import { resolveA11yThresholds } from '../panels/a11y/a11y-thresholds.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismBadgeComponent } from '../shared/prism-badge.component.js';
+import { PRISM_CONFIG, PRISM_MANIFEST } from '../tokens/prism-tokens.js';
+import { headMetrics } from './head-metrics.js';
+import { pipeFacts } from './pipe-facts.js';
 import { PrismHeadGaugeComponent } from './prism-head-gauge.component.js';
 import { PrismHeadInfoComponent } from './prism-head-info.component.js';
+import { serviceFacts } from './service-facts.js';
 import * as i0 from "@angular/core";
 const _c0 = [[["", "headEnd", ""]]];
 const _c1 = ["[headEnd]"];
 const _c2 = () => [];
 function PrismComponentHeadComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "span", 8);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelement(0, "prism-badge", 8);
 } if (rf & 2) {
     const badge_r1 = ctx;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("comp-status comp-status--", ctx_r1.status()));
+    i0.ɵɵclassProp("comp-status--wip", ctx_r1.status() === "wip");
+    i0.ɵɵproperty("tone", badge_r1.tone)("label", badge_r1.label);
     i0.ɵɵattribute("title", badge_r1.tooltip);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", badge_r1.label, " ");
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-head-gauge", 5);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("metrics", ctx_r1.metrics());
 } }
 function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "section", 0)(1, "span", 1);
@@ -28,54 +36,82 @@ function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
     i0.ɵɵelement(5, "prism-head-info", 3);
-    i0.ɵɵconditionalCreate(6, PrismComponentHeadComponent_Conditional_0_Conditional_6_Template, 3, 5, "span", 4);
-    i0.ɵɵelement(7, "span", 5)(8, "prism-head-gauge", 6);
+    i0.ɵɵconditionalCreate(6, PrismComponentHeadComponent_Conditional_0_Conditional_6_Template, 1, 5, "prism-badge", 4);
+    i0.ɵɵconditionalCreate(7, PrismComponentHeadComponent_Conditional_0_Conditional_7_Template, 1, 1, "prism-head-gauge", 5);
+    i0.ɵɵelement(8, "span", 6);
     i0.ɵɵelementStart(9, "span", 7);
     i0.ɵɵprojection(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_9_0;
-    const c_r3 = ctx;
+    let tmp_12_0;
+    const s_r3 = ctx;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.category());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(c_r3.meta.showcaseConfig.title);
+    i0.ɵɵtextInterpolate(s_r3.showcaseConfig.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("selector", c_r3.meta.componentMeta.selector)("description", c_r3.meta.showcaseConfig.description)("tags", c_r3.meta.showcaseConfig.tags ?? i0.ɵɵpureFunction0(9, _c2))("variantCount", ctx_r1.variantCount())("stateCount", ctx_r1.stateCount());
+    i0.ɵɵproperty("selector", ctx_r1.selector())("code", ctx_r1.code())("className", s_r3.className)("description", s_r3.showcaseConfig.description)("tags", s_r3.showcaseConfig.tags ?? i0.ɵɵpureFunction0(12, _c2))("variantCount", ctx_r1.variantCount())("stateCount", ctx_r1.stateCount())("facts", ctx_r1.facts());
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_9_0 = ctx_r1.statusBadge()) ? 6 : -1, tmp_9_0);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("metrics", ctx_r1.metrics());
+    i0.ɵɵconditional((tmp_12_0 = ctx_r1.statusBadge()) ? 6 : -1, tmp_12_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.comp() ? 7 : -1);
 } }
 const STATUS_BADGES = {
     stable: {
         label: 'Stable',
-        tooltip: 'Migrated and production-ready'
+        tooltip: 'Migrated and production-ready',
+        tone: 'success'
     },
     beta: {
         label: 'Beta',
-        tooltip: 'Beta: API may change'
+        tooltip: 'Beta: API may change',
+        tone: 'warn'
     },
     wip: {
         label: 'Work in progress',
-        tooltip: 'Migration in progress'
+        tooltip: 'Migration in progress',
+        tone: 'warn'
     },
     deprecated: {
         label: 'Deprecated',
-        tooltip: 'Deprecated / Legacy. Do not use in new code'
+        tooltip: 'Deprecated / Legacy. Do not use in new code',
+        tone: 'danger'
     }
 };
 export class PrismComponentHeadComponent {
     navigationService = inject(PrismNavigationService);
     auditService = inject(A11yAuditService);
+    manifest = inject(PRISM_MANIFEST);
+    config = inject(PRISM_CONFIG);
     comp = computed(() => this.navigationService.activeComponent(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "comp" }] : /* istanbul ignore next */ []));
-    category = computed(() => {
-        const c = this.comp();
-        return c?.meta.showcaseConfig.category ?? 'Uncategorized';
-    }, /* @ts-ignore */
+    service = computed(() => this.navigationService.activeService(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "service" }] : /* istanbul ignore next */ []));
+    pipe = computed(() => this.navigationService.activePipe(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pipe" }] : /* istanbul ignore next */ []));
+    /** What the head introduces: the active component or, on a service or pipe page, the service or the pipe. */
+    subject = computed(() => this.comp()?.meta ?? this.service()?.meta ?? this.pipe()?.meta ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subject" }] : /* istanbul ignore next */ []));
+    category = computed(() => this.subject()?.showcaseConfig.category ?? 'Uncategorized', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
+    /** The selector of a component. A service or a pipe has none. */
+    selector = computed(() => this.comp()?.meta.componentMeta.selector, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selector" }] : /* istanbul ignore next */ []));
+    /** A pipe is used in a template as `| name`, so that is what its code block shows. */
+    code = computed(() => {
+        const p = this.pipe();
+        return p ? `| ${p.meta.pipeName}` : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    facts = computed(() => {
+        const s = this.service();
+        if (s)
+            return serviceFacts(s.meta.provision, s.meta.importPath);
+        const p = this.pipe();
+        return p ? pipeFacts(p.meta.pure, p.meta.importPath) : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "facts" }] : /* istanbul ignore next */ []));
     variantCount = computed(() => {
         const c = this.comp();
         return c?.meta.showcaseConfig.variants?.length ?? 0;
@@ -86,81 +122,29 @@ export class PrismComponentHeadComponent {
         return c?.meta.showcaseConfig.states?.length ?? 0;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stateCount" }] : /* istanbul ignore next */ []));
-    status = computed(() => this.comp()?.meta.showcaseConfig.status, /* @ts-ignore */
+    status = computed(() => this.subject()?.showcaseConfig.status, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     statusBadge = computed(() => {
         const s = this.status();
         return s ? STATUS_BADGES[s] : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "statusBadge" }] : /* istanbul ignore next */ []));
-    coveragePercent = computed(() => {
-        const meta = this.componentMeta();
-        const coverage = meta?.['coverage'];
-        if (coverage?.['found'] && typeof coverage['score'] === 'number')
-            return coverage['score'];
-        return null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "coveragePercent" }] : /* istanbul ignore next */ []));
-    /*
-     * No bundle metric here. Reading `meta.perf.bundle.gzipKb`/`.sizeKb` finds
-     * nothing: `@ng-prism/plugin-perf` stores `sourceSize` and `gzipEstimate`
-     * (see `perf.types.ts`), so the tile would read `Bundle —` everywhere.
-     *
-     * Before wiring it to the real keys, settle with the perf plugin whether
-     * `gzipEstimate` is bytes or kilobytes.
-     */
-    a11yScore = computed(() => {
-        return this.auditService.scoreResult()?.score ?? null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "a11yScore" }] : /* istanbul ignore next */ []));
-    /**
-     * The visual regression headline, as the plugin already derived it.
-     *
-     * Read whole rather than recomputed: the colour follows the plugin's status
-     * semantics (red for any changed variant, amber for ones that could not be
-     * compared), and duplicating that rule here would mean the stat and the
-     * plugin's own panel could disagree about the same component.
-     */
-    vrtStat = computed(() => {
-        const vrt = this.componentMeta()?.['visualRegression'];
-        if (!vrt?.found || !vrt.summary)
-            return null;
-        const { value, variant } = vrt.summary;
-        return variant === 'ok' || variant === 'warn' || variant === 'danger' ? { value, variant } : null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "vrtStat" }] : /* istanbul ignore next */ []));
     /**
-     * The full metric list for the gauge, in source order.
-     *
-     * Order matters: `summarizeMetrics` breaks severity ties by position, so
-     * this sequence is what makes the chip show a stable metric rather than
-     * flickering between two equally bad ones.
+     * The configured a11y thresholds, resolved the way the panel host and the
+     * header badge resolve them, so the gauge grades the live audit on the
+     * same scale as the tab and the sidebar.
      */
-    metrics = computed(() => {
-        const coverage = this.coveragePercent();
-        const a11y = this.a11yScore();
-        const vrt = this.vrtStat();
-        return [
-            {
-                id: 'coverage',
-                label: 'Coverage',
-                value: coverage === null ? '—' : `${coverage}%`,
-                variant: coverage === null ? 'none' : coverage >= 90 ? 'ok' : 'warn'
-            },
-            {
-                id: 'a11y',
-                label: 'A11y score',
-                value: a11y === null ? '—' : String(a11y),
-                variant: a11y === null ? 'none' : a11y >= 90 ? 'ok' : 'warn'
-            },
-            {
-                id: 'vrt',
-                label: 'VRT diff',
-                value: vrt === null ? '—' : vrt.value,
-                variant: vrt === null ? 'none' : vrt.variant
-            }
-        ];
+    a11yThresholds = computed(() => {
+        const meta = this.manifest.meta?.['a11y'];
+        return resolveA11yThresholds({ ...meta?.thresholds, ...this.config.a11y?.thresholds });
     }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "a11yThresholds" }] : /* istanbul ignore next */ []));
+    /** The full metric list for the gauge, in source order. */
+    metrics = computed(() => headMetrics({
+        meta: this.componentMeta(),
+        a11y: this.auditService.scoreResult(),
+        a11yThresholds: this.a11yThresholds()
+    }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
     componentMeta = computed(() => {
         const c = this.comp();
@@ -169,16 +153,16 @@ export class PrismComponentHeadComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "componentMeta" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismComponentHeadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismComponentHeadComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], ngContentSelectors: _c1, decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-crumb"], [1, "comp-title"], [3, "selector", "description", "tags", "variantCount", "stateCount"], [3, "class"], [1, "comp-spacer"], [3, "metrics"], [1, "comp-head-end"], ["aria-hidden", "true", 1, "comp-status-mark"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], ngContentSelectors: _c1, decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-crumb"], [1, "comp-title"], [3, "selector", "code", "className", "description", "tags", "variantCount", "stateCount", "facts"], ["dot", "", 1, "comp-status", 3, "comp-status--wip", "tone", "label"], [3, "metrics"], [1, "comp-spacer"], [1, "comp-head-end"], ["dot", "", 1, "comp-status", 3, "tone", "label"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0);
-            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 11, 10, "section", 0);
+            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 11, 13, "section", 0);
         } if (rf & 2) {
             let tmp_0_0;
-            i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [PrismHeadInfoComponent, PrismHeadGaugeComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    height: var(--%NS%band-head);\n    padding: 0 var(--%NS%sp-5);\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n\n\n\n\n\n\n.comp-crumb[_ngcontent-%COMP%] {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb[_ngcontent-%COMP%]::after {\n    content: ' /';\n}\n\n.comp-title[_ngcontent-%COMP%] {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xl);\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.comp-status[_ngcontent-%COMP%], \nprism-head-info[_ngcontent-%COMP%], \nprism-head-gauge[_ngcontent-%COMP%], \n.comp-head-end[_ngcontent-%COMP%] {\n    flex: none;\n}\n\n\n\n\n.comp-head-end[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end[_ngcontent-%COMP%]:empty {\n    display: none;\n}\n\n\n\n\n\n.comp-status[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--%NS%sp-3) 0 var(--%NS%sp-2);\n    font-size: var(--%NS%fs-xs);\n    font-weight: 600;\n    color: var(--%NS%prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.comp-status-mark[_ngcontent-%COMP%] {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n    background: color-mix(in srgb, var(--%NS%prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta[_ngcontent-%COMP%], \n.comp-status--wip[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n    background: color-mix(in srgb, var(--%NS%prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip[_ngcontent-%COMP%]   .comp-status-mark[_ngcontent-%COMP%] {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n    background: color-mix(in srgb, var(--%NS%prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 55%, transparent);\n}"] });
+            i0.ɵɵconditional((tmp_0_0 = ctx.subject()) ? 0 : -1, tmp_0_0);
+        } }, dependencies: [PrismHeadInfoComponent, PrismHeadGaugeComponent, PrismBadgeComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    height: var(--%NS%band-head);\n    padding: 0 var(--%NS%sp-5);\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n\n\n\n\n\n\n.comp-crumb[_ngcontent-%COMP%] {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb[_ngcontent-%COMP%]::after {\n    content: ' /';\n}\n\n.comp-title[_ngcontent-%COMP%] {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xl);\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.comp-status[_ngcontent-%COMP%], \nprism-head-info[_ngcontent-%COMP%], \nprism-head-gauge[_ngcontent-%COMP%], \n.comp-head-end[_ngcontent-%COMP%] {\n    flex: none;\n}\n\n\n\n\n.comp-head-end[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end[_ngcontent-%COMP%]:empty {\n    display: none;\n}\n\n\n.comp-status--wip[_ngcontent-%COMP%] {\n    --%NS%prism-badge-dot-fill: transparent;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
         type: Component,
-        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent], template: "@if (comp(); as c) {\n    <section class=\"comp-head\">\n        <span class=\"comp-crumb\">{{ category() }}</span>\n        <h1 class=\"comp-title\">{{ c.meta.showcaseConfig.title }}</h1>\n\n        <prism-head-info\n            [selector]=\"c.meta.componentMeta.selector\"\n            [description]=\"c.meta.showcaseConfig.description\"\n            [tags]=\"c.meta.showcaseConfig.tags ?? []\"\n            [variantCount]=\"variantCount()\"\n            [stateCount]=\"stateCount()\" />\n\n        @if (statusBadge(); as badge) {\n            <span\n                class=\"comp-status comp-status--{{ status() }}\"\n                [attr.title]=\"badge.tooltip\">\n                <span\n                    class=\"comp-status-mark\"\n                    aria-hidden=\"true\"></span>\n                {{ badge.label }}\n            </span>\n        }\n\n        <span class=\"comp-spacer\"></span>\n\n        <prism-head-gauge [metrics]=\"metrics()\" />\n        <span class=\"comp-head-end\"><ng-content select=\"[headEnd]\" /></span>\n    </section>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    height: var(--band-head);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The text yields, the controls never do. A long category and a long title\n   would otherwise push the gauge out of a fixed-height row whose ancestors\n   clip, making the measurement unreachable when you most want to read it,\n   and costing the gauge the fixed position it was designed around. So the\n   title truncates with an ellipsis and the chip stays at the right edge. The crumb gives way\n   first, being the least important text in the row. */\n.comp-crumb {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb::after {\n    content: ' /';\n}\n\n.comp-title {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xl);\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer {\n    flex: 1;\n}\n\n.comp-status,\nprism-head-info,\nprism-head-gauge,\n.comp-head-end {\n    flex: none;\n}\n\n/* Wraps the slot rather than styling the projected element, which this\n   stylesheet cannot reach. :empty keeps the row's trailing gap from\n   appearing when nothing is projected; comment anchors do not count. */\n.comp-head-end {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end:empty {\n    display: none;\n}\n\n/* Always an outline, never a filled surface. Deprecated separates itself\n   by hue, not by weight. A filled alarm-coloured chip in a permanently\n   visible band is the \"red as background texture\" problem this\n   redesign exists to fix. */\n.comp-status {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--sp-3) 0 var(--sp-2);\n    font-size: var(--fs-xs);\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--radius-xs);\n}\n\n.comp-status-mark {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable {\n    color: var(--prism-mark-nominal);\n    background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta,\n.comp-status--wip {\n    color: var(--prism-mark-attention);\n    background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip .comp-status-mark {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated {\n    color: var(--prism-mark-critical);\n    background: color-mix(in srgb, var(--prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 55%, transparent);\n}\n"] }]
+        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent, PrismBadgeComponent], template: "@if (subject(); as s) {\n    <section class=\"comp-head\">\n        <span class=\"comp-crumb\">{{ category() }}</span>\n        <h1 class=\"comp-title\">{{ s.showcaseConfig.title }}</h1>\n\n        <prism-head-info\n            [selector]=\"selector()\"\n            [code]=\"code()\"\n            [className]=\"s.className\"\n            [description]=\"s.showcaseConfig.description\"\n            [tags]=\"s.showcaseConfig.tags ?? []\"\n            [variantCount]=\"variantCount()\"\n            [stateCount]=\"stateCount()\"\n            [facts]=\"facts()\" />\n\n        @if (statusBadge(); as badge) {\n            <prism-badge\n                class=\"comp-status\"\n                [class.comp-status--wip]=\"status() === 'wip'\"\n                dot\n                [tone]=\"badge.tone\"\n                [label]=\"badge.label\"\n                [attr.title]=\"badge.tooltip\" />\n        }\n\n        @if (comp()) {\n            <prism-head-gauge [metrics]=\"metrics()\" />\n        }\n\n        <span class=\"comp-spacer\"></span>\n\n        <span class=\"comp-head-end\"><ng-content select=\"[headEnd]\" /></span>\n    </section>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    height: var(--band-head);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The text yields, the controls never do. A long category and a long title\n   would otherwise push the gauge out of a fixed-height row whose ancestors\n   clip, making the measurement unreachable when you most want to read it,\n   and costing the gauge the fixed position it was designed around. So the\n   title truncates with an ellipsis and the chip stays at the right edge. The crumb gives way\n   first, being the least important text in the row. */\n.comp-crumb {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb::after {\n    content: ' /';\n}\n\n.comp-title {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xl);\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer {\n    flex: 1;\n}\n\n.comp-status,\nprism-head-info,\nprism-head-gauge,\n.comp-head-end {\n    flex: none;\n}\n\n/* Wraps the slot rather than styling the projected element, which this\n   stylesheet cannot reach. :empty keeps the row's trailing gap from\n   appearing when nothing is projected; comment anchors do not count. */\n.comp-head-end {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end:empty {\n    display: none;\n}\n\n/* Work in progress keeps its ring: the one status without a settled state. */\n.comp-status--wip {\n    --prism-badge-dot-fill: transparent;\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 41 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 53 }); })();

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

@@ -1,22 +1,18 @@
 import { type HeadMetric } from './head-metrics.js';
 import * as i0 from "@angular/core";
 /**
- * Measurement disclosure for the component head.
+ * Measurement disclosure for the component head, right behind the status.
  *
- * Replaces four always-present stat tiles with one element of fixed width at a
- * fixed position, so the row does not shift when you switch components. It
- * shows a plain count in the nominal green while everything is within
- * threshold, and the worst value in plain text when it is not. The full
- * readout is one click away and never disappears.
- *
- * It knows no individual metric. The list arrives already resolved, in the
- * same shape `decorateItem` produces for the sidebar, which is less code than
- * the five @if branches it replaces and keeps the colour rule in one place.
+ * One soft badge in the tone of the worst metric ("VRT diff 10.26%"), or of the
+ * first measured one when everything is fine. How many metrics were measured
+ * is in the tooltip, not on the chip. The readout behind it lists every metric
+ * with its threshold.
  */
 export declare class PrismHeadGaugeComponent {
     readonly metrics: import("@angular/core").InputSignal<readonly HeadMetric[]>;
-    protected readonly summary: import("@angular/core").Signal<import("./head-metrics.js").GaugeSummary>;
-    protected readonly ariaLabel: import("@angular/core").Signal<string>;
+    protected readonly chip: import("@angular/core").Signal<import("./head-metrics.js").GaugeChip | null>;
+    protected readonly tone: import("@angular/core").Signal<import("../shared/badge.types.js").BadgeTone>;
+    protected readonly title: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismHeadGaugeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismHeadGaugeComponent, "prism-head-gauge", never, { "metrics": { "alias": "metrics"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"prism-head-gauge.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-gauge.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAoB,MAAM,mBAAmB,CAAC;;AAGtE;;;;;;;;;;;;GAYG;AACH,qBAQa,uBAAuB;IAChC,QAAQ,CAAC,OAAO,6DAA2C;IAC3D,SAAS,CAAC,QAAQ,CAAC,OAAO,2EAAoD;IAC9E,SAAS,CAAC,QAAQ,CAAC,SAAS,yCAMzB;yCATM,uBAAuB;2CAAvB,uBAAuB;CAUnC"}
+{"version":3,"file":"prism-head-gauge.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-head-gauge.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;;AAG/D;;;;;;;GAOG;AACH,qBAQa,uBAAuB;IAChC,QAAQ,CAAC,OAAO,6DAA2C;IAC3D,SAAS,CAAC,QAAQ,CAAC,IAAI,+EAA6C;IACpE,SAAS,CAAC,QAAQ,CAAC,IAAI,+EAIpB;IACH,SAAS,CAAC,QAAQ,CAAC,KAAK,yCAKrB;yCAbM,uBAAuB;2CAAvB,uBAAuB;CAcnC"}