@ng-prism/plugin-visual-regression 22.2.0-beta.1

package/README.md

@@ -0,0 +1,106 @@
+# @ng-prism/plugin-visual-regression
+
+Visual regression plugin for [@ng-prism/core](https://github.com/dyingangel666/ng-prism). Reads a per-variant screenshot comparison report at build time and renders it inside the styleguide — so diffs live next to the component they belong to instead of in a CI log.
+
+> **Full documentation:** [ng-prism Docs — Visual Regression Plugin](https://dyingangel666.github.io/ng-prism/#/plugins/visual-regression)
+
+The plugin **only renders a report someone else produced.** It performs no image comparison of its own — that belongs to your runner, which owns the baselines and the pinned container. See [Visual Regression Testing](https://dyingangel666.github.io/ng-prism/#/guide/visual-regression) for how to capture screenshots that do not flake, including the `?capture=1` isolation mode.
+
+## Installation
+
+```bash
+ng add @ng-prism/plugin-visual-regression
+```
+
+Or manually: `npm install @ng-prism/plugin-visual-regression`
+
+### Peer Dependencies
+
+| Package          | Version     |
+| ---------------- | ----------- |
+| `@ng-prism/core` | `^22.1.4-0` |
+| `@angular/core`  | `>=20.0.0`  |
+
+## Setup
+
+```typescript
+// ng-prism.config.ts
+import { defineConfig } from '@ng-prism/core/config';
+import { visualRegressionPlugin } from '@ng-prism/plugin-visual-regression';
+
+export default defineConfig({
+  plugins: [
+    visualRegressionPlugin({
+      reportPath: 'coverage/my-lib/vrt-report.json',
+      assetBaseUrl: 'assets/',
+    }),
+  ],
+});
+```
+
+## Options
+
+| Option         | Default             | Description                                                                        |
+| -------------- | ------------------- | ---------------------------------------------------------------------------------- |
+| `reportPath`   | `'vrt-report.json'` | Path to the report JSON, relative to the workspace root.                           |
+| `assetBaseUrl` | `''`                | Prefix applied to the image paths in the report so they resolve against the build. |
+| `thresholds`   | `{ score: 100 }`    | Minimum score before the header badge stops being green.                           |
+
+## Report Format
+
+```jsonc
+{
+  "total": {
+    "auditedVariants": 85,
+    "auditedComponents": 10,
+    "unchanged": 84,
+    "changed": 1,
+    "sizeMismatch": 0,
+    "new": 0,
+    "maxDiffRatio": 0.5,
+    "score": 99
+  },
+  "byVariant": [
+    {
+      "className": "ButtonComponent",
+      "variantName": "Primary",
+      "variantIndex": 0,
+      "status": "changed",
+      "diffRatio": 0.5,
+      "baselinePath": "vrt/baseline/ButtonComponent/00-primary.png",
+      "currentPath": "vrt/current/ButtonComponent/00-primary.png",
+      "diffPath": "vrt/diff/ButtonComponent/00-primary.png",
+      "bg": "light",
+      "baselineBg": "light"
+    }
+  ]
+}
+```
+
+Results are matched to components by `className`. All three image paths are optional and the panel degrades gracefully: baseline + current gives a wipe comparison, baseline + diff falls back to comparing against the diff mask, and a single image is shown on its own.
+
+`status: "new"` — a variant with no baseline yet — renders as a **neutral** state, never as a failure.
+
+`bg` and `baselineBg` are optional and record the canvas background a capture was taken on — `bg` for this run, `baselineBg` for the stored baseline. A runner gets `bg` for free: it is the resolved `bg` on the variant it already read from `__PRISM_MANIFEST__`. Given them, the panel frames the images in that surface instead of the transparency checkerboard (which is what makes a dark variant's diff mask readable), and when the two differ it names the background change rather than leaving a 100% diff unexplained.
+
+## Serving the Images
+
+The report references images by path; those files must be reachable from the built styleguide. Copy them in via the `assets` array of your Prism app's build target, then point `assetBaseUrl` at where they land.
+
+`assetBaseUrl` is **prepended to the path in the report** — it is not a replacement for it. The three values have to line up:
+
+```jsonc
+// angular.json — my-lib-prism build target
+"assets": [
+  { "glob": "**/*", "input": "vrt", "output": "assets/vrt" }
+]
+```
+
+| Recorded in the report | `assetBaseUrl` | Requested URL                  |
+| ---------------------- | -------------- | ------------------------------ |
+| `vrt/baseline/x.png`   | `assets/`      | `assets/vrt/baseline/x.png` ✅ |
+| `vrt/baseline/x.png`   | `vrt/`         | `vrt/vrt/baseline/x.png` ❌    |
+
+## License
+
+MIT

package/dist/asset-url.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Resolves an image path from the report against the served styleguide.
+ *
+ * The report records whatever paths the runner chose; where those files end up
+ * in the build output is a separate decision made in `angular.json`. This is
+ * the seam between the two, and it assumes nothing about either layout.
+ *
+ * Paths that carry their own origin — `https:`, `data:` and protocol-relative
+ * — are returned untouched. A root-relative path is *not* one of them: it is
+ * still relative to wherever the styleguide is served from, so it is joined to
+ * the base like any other path (without doubling the separator).
+ */
+export declare function resolveAssetUrl(baseUrl: string, path: string | undefined): string | undefined;
+//# sourceMappingURL=asset-url.d.ts.map

package/dist/asset-url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset-url.d.ts","sourceRoot":"","sources":["../src/asset-url.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,MAAM,GAAG,SAAS,GACvB,MAAM,GAAG,SAAS,CAMpB"}

package/dist/asset-url.js

@@ -0,0 +1,25 @@
+/** Matches anything that already addresses a location on its own. */
+const ABSOLUTE = /^([a-z][a-z0-9+.-]*:|\/\/)/i;
+/**
+ * Resolves an image path from the report against the served styleguide.
+ *
+ * The report records whatever paths the runner chose; where those files end up
+ * in the build output is a separate decision made in `angular.json`. This is
+ * the seam between the two, and it assumes nothing about either layout.
+ *
+ * Paths that carry their own origin — `https:`, `data:` and protocol-relative
+ * — are returned untouched. A root-relative path is *not* one of them: it is
+ * still relative to wherever the styleguide is served from, so it is joined to
+ * the base like any other path (without doubling the separator).
+ */
+export function resolveAssetUrl(baseUrl, path) {
+    if (!path)
+        return undefined;
+    if (ABSOLUTE.test(path))
+        return path;
+    if (!baseUrl)
+        return path;
+    if (path.startsWith('/'))
+        return `${baseUrl.replace(/\/+$/, '')}${path}`;
+    return `${baseUrl.replace(/\/+$/, '')}/${path}`;
+}

package/dist/index.browser.d.ts

@@ -0,0 +1,7 @@
+export { visualRegressionPlugin } from './visual-regression-plugin.browser.js';
+export { resolveVrtThresholds, DEFAULT_VRT_THRESHOLDS } from './thresholds.js';
+export { VisualRegressionPanelComponent } from './visual-regression-panel.component.js';
+export { VisualRegressionHeaderBadgeComponent } from './visual-regression-header-badge.component.js';
+export { resolveAssetUrl } from './asset-url.js';
+export type { VisualRegressionPluginOptions, VrtComponentMeta, VrtManifestMeta, VrtReport, VrtStatus, VrtThresholds, VrtTotals, VrtVariantResult, } from './visual-regression.types.js';
+//# sourceMappingURL=index.browser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.browser.d.ts","sourceRoot":"","sources":["../src/index.browser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAI/E,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AACxF,OAAO,EAAE,oCAAoC,EAAE,MAAM,+CAA+C,CAAC;AACrG,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EACV,6BAA6B,EAC7B,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,SAAS,EACT,aAAa,EACb,SAAS,EACT,gBAAgB,GACjB,MAAM,8BAA8B,CAAC"}

package/dist/index.browser.js

@@ -0,0 +1,8 @@
+export { visualRegressionPlugin } from './visual-regression-plugin.browser.js';
+// `package.json` resolves "types" to index.d.ts for every condition, so this
+// entry has to carry every value that file declares — otherwise a browser
+// consumer type-checks clean and the bundler fails on a missing export.
+export { resolveVrtThresholds, DEFAULT_VRT_THRESHOLDS } from './thresholds.js';
+export { VisualRegressionPanelComponent } from './visual-regression-panel.component.js';
+export { VisualRegressionHeaderBadgeComponent } from './visual-regression-header-badge.component.js';
+export { resolveAssetUrl } from './asset-url.js';

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { visualRegressionPlugin } from './visual-regression-plugin.js';
+export { resolveVrtThresholds, DEFAULT_VRT_THRESHOLDS } from './thresholds.js';
+export { VisualRegressionPanelComponent } from './visual-regression-panel.component.js';
+export { VisualRegressionHeaderBadgeComponent } from './visual-regression-header-badge.component.js';
+export { resolveAssetUrl } from './asset-url.js';
+export type { VisualRegressionPluginOptions, VrtComponentMeta, VrtManifestMeta, VrtReport, VrtStatus, VrtThresholds, VrtTotals, VrtVariantResult, } from './visual-regression.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AACxF,OAAO,EAAE,oCAAoC,EAAE,MAAM,+CAA+C,CAAC;AACrG,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EACV,6BAA6B,EAC7B,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,SAAS,EACT,aAAa,EACb,SAAS,EACT,gBAAgB,GACjB,MAAM,8BAA8B,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { visualRegressionPlugin } from './visual-regression-plugin.js';
+export { resolveVrtThresholds, DEFAULT_VRT_THRESHOLDS } from './thresholds.js';
+export { VisualRegressionPanelComponent } from './visual-regression-panel.component.js';
+export { VisualRegressionHeaderBadgeComponent } from './visual-regression-header-badge.component.js';
+export { resolveAssetUrl } from './asset-url.js';

package/dist/report-reader.d.ts

@@ -0,0 +1,18 @@
+import type { VrtTotals, VrtVariantResult } from './visual-regression.types.js';
+/**
+ * All recorded results for one component, ordered by variant index.
+ *
+ * Components are matched on `className` — the report and the scanner agree on
+ * it exactly, so there is no need for the path-matching heuristics the coverage
+ * plugin uses.
+ *
+ * The report's shape is checked rather than trusted. It is written by someone
+ * else's runner, and this runs inside `onComponentScanned`, where a throw is
+ * rethrown by the plugin runner and fails the whole styleguide build. A report
+ * that is merely *missing* already degrades to "no results"; a truncated or
+ * malformed one must not be punished harder than a missing one.
+ */
+export declare function readVariantsForComponent(reportPath: string, className: string): VrtVariantResult[];
+export declare function readTotals(reportPath: string): VrtTotals | null;
+export declare function clearReportCache(): void;
+//# sourceMappingURL=report-reader.d.ts.map

package/dist/report-reader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"report-reader.d.ts","sourceRoot":"","sources":["../src/report-reader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,SAAS,EACT,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;AAsBtC;;;;;;;;;;;;GAYG;AACH,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,gBAAgB,EAAE,CAUpB;AAED,wBAAgB,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAG/D;AAED,wBAAgB,gBAAgB,IAAI,IAAI,CAEvC"}

package/dist/report-reader.js

@@ -0,0 +1,55 @@
+import { readFileSync, statSync } from 'node:fs';
+const cache = new Map();
+/**
+ * Reads and parses the report, memoised on the file's mtime so a watch-mode
+ * rebuild picks up a fresh run without re-parsing on every scanned component.
+ */
+function loadReport(reportPath) {
+    try {
+        const mtime = statSync(reportPath).mtimeMs;
+        const cached = cache.get(reportPath);
+        if (cached && cached.mtime === mtime)
+            return cached.data;
+        const parsed = JSON.parse(readFileSync(reportPath, 'utf-8'));
+        cache.set(reportPath, { mtime, data: parsed });
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * All recorded results for one component, ordered by variant index.
+ *
+ * Components are matched on `className` — the report and the scanner agree on
+ * it exactly, so there is no need for the path-matching heuristics the coverage
+ * plugin uses.
+ *
+ * The report's shape is checked rather than trusted. It is written by someone
+ * else's runner, and this runs inside `onComponentScanned`, where a throw is
+ * rethrown by the plugin runner and fails the whole styleguide build. A report
+ * that is merely *missing* already degrades to "no results"; a truncated or
+ * malformed one must not be punished harder than a missing one.
+ */
+export function readVariantsForComponent(reportPath, className) {
+    const entries = loadReport(reportPath)?.byVariant;
+    if (!Array.isArray(entries))
+        return [];
+    return entries
+        .filter((entry) => isRecord(entry) && entry['className'] === className)
+        .sort((a, b) => variantIndexOf(a) - variantIndexOf(b));
+}
+export function readTotals(reportPath) {
+    const total = loadReport(reportPath)?.total;
+    return isRecord(total) ? total : null;
+}
+export function clearReportCache() {
+    cache.clear();
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+/** Missing or non-numeric indices sort first rather than poisoning the sort. */
+function variantIndexOf(variant) {
+    return typeof variant.variantIndex === 'number' ? variant.variantIndex : 0;
+}

package/dist/schematics/ng-add/index.d.ts

@@ -0,0 +1,4 @@
+import { type Rule } from '@angular-devkit/schematics';
+import type { NgAddSchemaOptions } from './schema.js';
+export declare function ngAdd(options: NgAddSchemaOptions): Rule;
+//# sourceMappingURL=index.d.ts.map

package/dist/schematics/ng-add/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAGV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAyBtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAEvD"}

package/dist/schematics/ng-add/index.js

@@ -0,0 +1,25 @@
+import { chain, } from '@angular-devkit/schematics';
+import { addPluginToConfig } from '@ng-prism/core/schematics/utils';
+const PLUGIN_IMPORT_NAME = 'visualRegressionPlugin';
+const PLUGIN_IMPORT_FROM = '@ng-prism/plugin-visual-regression';
+const PLUGIN_CALL = 'visualRegressionPlugin()';
+function injectPlugin(options) {
+    return (tree, context) => {
+        const configPath = options.configPath ?? 'ng-prism.config.ts';
+        const changed = addPluginToConfig(tree, configPath, {
+            importName: PLUGIN_IMPORT_NAME,
+            importFrom: PLUGIN_IMPORT_FROM,
+            call: PLUGIN_CALL,
+        });
+        if (changed) {
+            context.logger.info(`  ${PLUGIN_IMPORT_FROM} → added to ${configPath}`);
+        }
+        else {
+            context.logger.info(`  ${PLUGIN_IMPORT_FROM} already configured — skipped`);
+        }
+        return tree;
+    };
+}
+export function ngAdd(options) {
+    return chain([injectPlugin(options)]);
+}

package/dist/schematics/ng-add/schema.d.ts

@@ -0,0 +1,4 @@
+export interface NgAddSchemaOptions {
+    configPath?: string;
+}
+//# sourceMappingURL=schema.d.ts.map

package/dist/schematics/ng-add/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/schematics/ng-add/schema.js

@@ -0,0 +1 @@
+export {};

package/dist/thresholds.d.ts

@@ -0,0 +1,16 @@
+import type { VrtThresholds } from './visual-regression.types.js';
+/**
+ * Threshold resolution lives in its own module so both entry points can export
+ * it. `visual-regression-plugin.ts` carries the build-time hooks that read the
+ * report from disk and must never be reachable from a browser bundle, so
+ * `index.browser.ts` cannot re-export anything through it — but the public type
+ * surface is shared between the two, and a symbol the `.d.ts` promises has to
+ * exist in whichever bundle the consumer actually loads.
+ */
+/**
+ * Any regression is worth seeing, so the badge only stays green at a perfect
+ * score. It degrades to warn, then danger, as the score falls.
+ */
+export declare const DEFAULT_VRT_THRESHOLDS: VrtThresholds;
+export declare function resolveVrtThresholds(input?: number | Partial<VrtThresholds>): VrtThresholds;
+//# sourceMappingURL=thresholds.d.ts.map

package/dist/thresholds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thresholds.d.ts","sourceRoot":"","sources":["../src/thresholds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE;;;;;;;GAOG;AAEH;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,aAA8B,CAAC;AAEpE,wBAAgB,oBAAoB,CAClC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,GACtC,aAAa,CAIf"}

package/dist/thresholds.js

@@ -0,0 +1,20 @@
+/**
+ * Threshold resolution lives in its own module so both entry points can export
+ * it. `visual-regression-plugin.ts` carries the build-time hooks that read the
+ * report from disk and must never be reachable from a browser bundle, so
+ * `index.browser.ts` cannot re-export anything through it — but the public type
+ * surface is shared between the two, and a symbol the `.d.ts` promises has to
+ * exist in whichever bundle the consumer actually loads.
+ */
+/**
+ * Any regression is worth seeing, so the badge only stays green at a perfect
+ * score. It degrades to warn, then danger, as the score falls.
+ */
+export const DEFAULT_VRT_THRESHOLDS = { score: 100 };
+export function resolveVrtThresholds(input) {
+    if (input === undefined)
+        return { ...DEFAULT_VRT_THRESHOLDS };
+    if (typeof input === 'number')
+        return { score: input };
+    return { ...DEFAULT_VRT_THRESHOLDS, ...input };
+}

package/dist/visual-regression-header-badge.component.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+type Variant = 'ok' | 'warn' | 'danger';
+export declare class VisualRegressionHeaderBadgeComponent {
+    private readonly manifest;
+    protected readonly data: import("@angular/core").Signal<{
+        score: number;
+        variant: Variant;
+        title: string;
+    } | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VisualRegressionHeaderBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VisualRegressionHeaderBadgeComponent, "prism-visual-regression-header-badge", never, {}, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=visual-regression-header-badge.component.d.ts.map

package/dist/visual-regression-header-badge.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-regression-header-badge.component.d.ts","sourceRoot":"","sources":["../src/visual-regression-header-badge.component.ts"],"names":[],"mappings":";AAUA,KAAK,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,qBAqFa,oCAAoC;IAC/C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2C;IAEpE,SAAS,CAAC,QAAQ,CAAC,IAAI;;;;cA2BpB;yCA9BQ,oCAAoC;2CAApC,oCAAoC;CA+BhD"}

package/dist/visual-regression-header-badge.component.js

@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core';
+import { PRISM_MANIFEST } from '@ng-prism/core/plugin';
+import * as i0 from "@angular/core";
+function VisualRegressionHeaderBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 1);
+    i0.ɵɵdomElement(1, "span", 2);
+    i0.ɵɵdomElementStart(2, "span", 3);
+    i0.ɵɵtext(3, "VRT");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "span", 4);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementStart(6, "small");
+    i0.ɵɵtext(7, "%");
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const d_r1 = ctx;
+    i0.ɵɵclassProp("vrt-pill--ok", d_r1.variant === "ok")("vrt-pill--warn", d_r1.variant === "warn")("vrt-pill--danger", d_r1.variant === "danger");
+    i0.ɵɵdomProperty("title", d_r1.title);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(d_r1.score);
+} }
+export class VisualRegressionHeaderBadgeComponent {
+    manifest = inject(PRISM_MANIFEST);
+    data = computed(() => {
+        const meta = this.manifest.meta?.['visualRegression'];
+        if (!meta?.found || !meta.total)
+            return null;
+        const { total, thresholds } = meta;
+        const variant = total.score >= thresholds.score
+            ? 'ok'
+            : total.score >= thresholds.score * 0.75
+                ? 'warn'
+                : 'danger';
+        // `new` and `excluded` stay out of the headline counts on purpose — neither
+        // has regressed, so both are reported but never framed as a fault.
+        const parts = [
+            `Visual regression: ${total.score}% unchanged (target ${thresholds.score}%)`,
+            `${total.unchanged} unchanged · ${total.changed} changed · ${total.sizeMismatch} resized`,
+            `${total.new} new (no baseline yet)`,
+        ];
+        if (total.excluded)
+            parts.push(`${total.excluded} excluded`);
+        parts.push(`${total.auditedVariants} variants across ${total.auditedComponents} components`);
+        return { score: total.score, variant, title: parts.join('\n') };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    static ɵfac = function VisualRegressionHeaderBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VisualRegressionHeaderBadgeComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualRegressionHeaderBadgeComponent, selectors: [["prism-visual-regression-header-badge"]], decls: 1, vars: 1, consts: [[1, "vrt-pill", 3, "vrt-pill--ok", "vrt-pill--warn", "vrt-pill--danger", "title"], [1, "vrt-pill", 3, "title"], [1, "vrt-pill__dot"], [1, "vrt-pill__label"], [1, "vrt-pill__value"]], template: function VisualRegressionHeaderBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, VisualRegressionHeaderBadgeComponent_Conditional_0_Template, 8, 8, "span", 0);
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.data()) ? 0 : -1, tmp_0_0);
+        } }, styles: ["[_nghost-%COMP%] { display: inline-flex; align-items: center; }\n\n    .vrt-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 2px 10px;\n      border-radius: 9999px;\n      line-height: 1.4;\n      border: 1px solid var(--prism-border);\n      background: var(--prism-input-bg);\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n    }\n\n    .vrt-pill__dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n\n    .vrt-pill__label[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      letter-spacing: 0.02em;\n    }\n\n    .vrt-pill__value[_ngcontent-%COMP%] {\n      color: var(--prism-text);\n      font-weight: 600;\n    }\n    .vrt-pill__value[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n      font-size: 9px;\n      margin-left: 1px;\n      color: var(--prism-text-muted);\n      font-weight: 500;\n    }\n\n    .vrt-pill--ok[_ngcontent-%COMP%] {\n      color: var(--prism-success);\n      border-color: color-mix(in srgb, var(--prism-success) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-success) 12%, transparent);\n    }\n    .vrt-pill--ok[_ngcontent-%COMP%]   .vrt-pill__label[_ngcontent-%COMP%], \n   .vrt-pill--ok[_ngcontent-%COMP%]   .vrt-pill__value[_ngcontent-%COMP%] { color: var(--prism-success); }\n\n    .vrt-pill--warn[_ngcontent-%COMP%] {\n      color: var(--prism-warn);\n      border-color: color-mix(in srgb, var(--prism-warn) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-warn) 12%, transparent);\n    }\n    .vrt-pill--warn[_ngcontent-%COMP%]   .vrt-pill__label[_ngcontent-%COMP%], \n   .vrt-pill--warn[_ngcontent-%COMP%]   .vrt-pill__value[_ngcontent-%COMP%] { color: var(--prism-warn); }\n\n    .vrt-pill--danger[_ngcontent-%COMP%] {\n      color: var(--prism-danger);\n      border-color: color-mix(in srgb, var(--prism-danger) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-danger) 12%, transparent);\n    }\n    .vrt-pill--danger[_ngcontent-%COMP%]   .vrt-pill__label[_ngcontent-%COMP%], \n   .vrt-pill--danger[_ngcontent-%COMP%]   .vrt-pill__value[_ngcontent-%COMP%] { color: var(--prism-danger); }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VisualRegressionHeaderBadgeComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-visual-regression-header-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (data(); as d) {
+    <span
+      class="vrt-pill"
+      [class.vrt-pill--ok]="d.variant === 'ok'"
+      [class.vrt-pill--warn]="d.variant === 'warn'"
+      [class.vrt-pill--danger]="d.variant === 'danger'"
+      [title]="d.title"
+    >
+      <span class="vrt-pill__dot"></span>
+      <span class="vrt-pill__label">VRT</span>
+      <span class="vrt-pill__value">{{ d.score }}<small>%</small></span>
+    </span>
+    }
+  `, styles: ["\n    :host { display: inline-flex; align-items: center; }\n\n    .vrt-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 2px 10px;\n      border-radius: 9999px;\n      line-height: 1.4;\n      border: 1px solid var(--prism-border);\n      background: var(--prism-input-bg);\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n    }\n\n    .vrt-pill__dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n\n    .vrt-pill__label {\n      color: var(--prism-text-ghost);\n      letter-spacing: 0.02em;\n    }\n\n    .vrt-pill__value {\n      color: var(--prism-text);\n      font-weight: 600;\n    }\n    .vrt-pill__value small {\n      font-size: 9px;\n      margin-left: 1px;\n      color: var(--prism-text-muted);\n      font-weight: 500;\n    }\n\n    .vrt-pill--ok {\n      color: var(--prism-success);\n      border-color: color-mix(in srgb, var(--prism-success) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-success) 12%, transparent);\n    }\n    .vrt-pill--ok .vrt-pill__label,\n    .vrt-pill--ok .vrt-pill__value { color: var(--prism-success); }\n\n    .vrt-pill--warn {\n      color: var(--prism-warn);\n      border-color: color-mix(in srgb, var(--prism-warn) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-warn) 12%, transparent);\n    }\n    .vrt-pill--warn .vrt-pill__label,\n    .vrt-pill--warn .vrt-pill__value { color: var(--prism-warn); }\n\n    .vrt-pill--danger {\n      color: var(--prism-danger);\n      border-color: color-mix(in srgb, var(--prism-danger) 35%, transparent);\n      background: color-mix(in srgb, var(--prism-danger) 12%, transparent);\n    }\n    .vrt-pill--danger .vrt-pill__label,\n    .vrt-pill--danger .vrt-pill__value { color: var(--prism-danger); }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VisualRegressionHeaderBadgeComponent, { className: "VisualRegressionHeaderBadgeComponent", filePath: "visual-regression-header-badge.component.ts", lineNumber: 98 }); })();

package/dist/visual-regression-panel.component.d.ts

@@ -0,0 +1,22 @@
+import type { VrtComponentMeta, VrtVariantResult } from './visual-regression.types.js';
+import * as i0 from "@angular/core";
+export declare class VisualRegressionPanelComponent {
+    readonly activeComponent: import("@angular/core").InputSignal<unknown>;
+    protected readonly selectedKey: import("@angular/core").WritableSignal<string | null>;
+    protected readonly meta: import("@angular/core").Signal<VrtComponentMeta | null>;
+    protected readonly assetBaseUrl: import("@angular/core").Signal<string>;
+    private readonly variants;
+    protected readonly summary: import("@angular/core").Signal<import("./vrt-summarize.js").VrtSummary>;
+    protected readonly rows: import("@angular/core").Signal<{
+        key: string;
+        variant: VrtVariantResult;
+        label: string;
+        statusLabel: string;
+        tone: import("./vrt-summarize.js").VrtTone;
+        diffLabel: string;
+    }[]>;
+    protected readonly selected: import("@angular/core").Signal<VrtVariantResult | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VisualRegressionPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VisualRegressionPanelComponent, "prism-visual-regression-panel", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=visual-regression-panel.component.d.ts.map

package/dist/visual-regression-panel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-regression-panel.component.d.ts","sourceRoot":"","sources":["../src/visual-regression-panel.component.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;;AAEtC,qBA2La,8BAA8B;IACzC,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,WAAW,wDAA+B;IAE7D,SAAS,CAAC,QAAQ,CAAC,IAAI,0DASpB;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAE7B;IAEF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA+C;IAExE,SAAS,CAAC,QAAQ,CAAC,OAAO,0EAA8C;IAExE,SAAS,CAAC,QAAQ,CAAC,IAAI;;;;;;;SAYrB;IAEF,SAAS,CAAC,QAAQ,CAAC,QAAQ,0DAWxB;yCAjDQ,8BAA8B;2CAA9B,8BAA8B;CAkD1C"}