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

package/dist/visual-regression-panel.component.js

@@ -0,0 +1,191 @@
+import { ChangeDetectionStrategy, Component, computed, input, signal, } from '@angular/core';
+import { VrtCompareComponent } from './vrt-compare.component.js';
+import { VrtSummaryComponent } from './vrt-summary.component.js';
+import { formatPercent, STATUS_LABEL, STATUS_TONE, summarize, } from './vrt-summarize.js';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.key;
+function VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li")(1, "button", 8);
+    i0.ɵɵlistener("click", function VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Template_button_click_1_listener() { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectedKey.set(row_r2.key)); });
+    i0.ɵɵelementStart(2, "span", 9);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 10);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 11);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const row_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("vrt__row--active", row_r2.variant === ctx_r2.selected());
+    i0.ɵɵattribute("data-tone", row_r2.tone);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(row_r2.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(row_r2.statusLabel);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(row_r2.diffLabel);
+} }
+function VisualRegressionPanelComponent_Conditional_0_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-vrt-compare", 7);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("variant", ctx)("assetBaseUrl", ctx_r2.assetBaseUrl());
+} }
+function VisualRegressionPanelComponent_Conditional_0_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 0);
+    i0.ɵɵtext(1, "Select a variant.");
+    i0.ɵɵelementEnd();
+} }
+function VisualRegressionPanelComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
+    i0.ɵɵelement(2, "prism-vrt-summary", 3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 4)(4, "ul", 5);
+    i0.ɵɵrepeaterCreate(5, VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Template, 8, 6, "li", null, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 6);
+    i0.ɵɵconditionalCreate(8, VisualRegressionPanelComponent_Conditional_0_Conditional_0_Conditional_8_Template, 1, 2, "prism-vrt-compare", 7)(9, VisualRegressionPanelComponent_Conditional_0_Conditional_0_Conditional_9_Template, 2, 0, "p", 0);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    let tmp_5_0;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("summary", ctx_r2.summary());
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r2.rows());
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional((tmp_5_0 = ctx_r2.selected()) ? 8 : 9, tmp_5_0);
+} }
+function VisualRegressionPanelComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0)(1, "b");
+    i0.ɵɵtext(2, "No visual regression results for this component.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Run your screenshot runner and rebuild the styleguide.");
+    i0.ɵɵelementEnd()();
+} }
+function VisualRegressionPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, VisualRegressionPanelComponent_Conditional_0_Conditional_0_Template, 10, 2, "div", 1)(1, VisualRegressionPanelComponent_Conditional_0_Conditional_1_Template, 5, 0, "div", 0);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.found ? 0 : 1);
+} }
+function VisualRegressionPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0)(1, "b");
+    i0.ɵɵtext(2, "No visual regression report loaded.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Check the plugin's ");
+    i0.ɵɵelementStart(5, "code");
+    i0.ɵɵtext(6, "reportPath");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(7, ".");
+    i0.ɵɵelementEnd()();
+} }
+export class VisualRegressionPanelComponent {
+    activeComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
+    selectedKey = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKey" }] : /* istanbul ignore next */ []));
+    meta = computed(() => {
+        const comp = this.activeComponent();
+        return (comp?.meta?.showcaseConfig?.meta?.['visualRegression'] ?? null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
+    assetBaseUrl = computed(() => this.meta()?.assetBaseUrl ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "assetBaseUrl" }] : /* istanbul ignore next */ []));
+    variants = computed(() => this.meta()?.variants ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variants" }] : /* istanbul ignore next */ []));
+    summary = computed(() => summarize(this.variants()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    rows = computed(() => this.variants().map((variant) => ({
+        key: `${variant.className}:${variant.variantIndex}`,
+        variant,
+        label: variant.variantName ??
+            variant.title ??
+            `Variant ${variant.variantIndex}`,
+        statusLabel: STATUS_LABEL[variant.status] ?? variant.status,
+        tone: STATUS_TONE[variant.status] ?? 'muted',
+        diffLabel: formatDiff(variant),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    selected = computed(() => {
+        const rows = this.rows();
+        if (!rows.length)
+            return null;
+        const key = this.selectedKey();
+        // Default to the first variant that actually changed — that is what someone
+        // opening this panel came to look at.
+        return (rows.find((r) => r.key === key)?.variant ??
+            rows.find((r) => r.variant.status === 'changed')?.variant ??
+            rows[0].variant);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    static ɵfac = function VisualRegressionPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VisualRegressionPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualRegressionPanelComponent, selectors: [["prism-visual-regression-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 2, vars: 1, consts: [[1, "vrt__empty"], [1, "vrt"], [1, "vrt__summary"], [3, "summary"], [1, "vrt__split"], [1, "vrt__list"], [1, "vrt__viewer"], [3, "variant", "assetBaseUrl"], ["type", "button", 1, "vrt__row", 3, "click"], [1, "vrt__name"], [1, "vrt__status"], [1, "vrt__diff"]], template: function VisualRegressionPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, VisualRegressionPanelComponent_Conditional_0_Template, 2, 1)(1, VisualRegressionPanelComponent_Conditional_1_Template, 8, 0, "div", 0);
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.meta()) ? 0 : 1, tmp_0_0);
+        } }, dependencies: [VrtCompareComponent, VrtSummaryComponent], styles: ["[_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      overflow: auto;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n    }\n\n    .vrt[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      min-height: 100%;\n    }\n\n    .vrt__summary[_ngcontent-%COMP%] { padding: 14px 16px 0; }\n\n    .vrt__split[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: minmax(200px, 250px) 1fr;\n      flex: 1;\n      min-height: 0;\n      padding-top: 14px;\n    }\n\n    .vrt__list[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 0 4px 14px 16px;\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    \n\n    .vrt__row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr auto;\n      grid-template-areas: 'name diff' 'status diff';\n      align-items: center;\n      gap: 0 10px;\n      width: 100%;\n      padding: 8px 11px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-left: 3px solid var(--tone-color, var(--prism-border-strong));\n      border-radius: var(--radius-md);\n      color: inherit;\n      font: inherit;\n      text-align: left;\n      cursor: pointer;\n      transition: border-color var(--dur-fast), background var(--dur-fast);\n    }\n    .vrt__row[_ngcontent-%COMP%]:hover { border-color: var(--prism-border-strong); }\n    .vrt__row[_ngcontent-%COMP%]:hover { border-left-color: var(--tone-color, var(--prism-border-strong)); }\n    .vrt__row--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-primary) 10%, var(--prism-bg-surface));\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      border-left-color: var(--tone-color, var(--prism-primary));\n    }\n\n    .vrt__name[_ngcontent-%COMP%] {\n      grid-area: name;\n      font-weight: 600;\n      font-size: var(--fs-md);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .vrt__status[_ngcontent-%COMP%] {\n      grid-area: status;\n      justify-self: start;\n      margin-top: 3px;\n      font-family: var(--font-mono);\n      font-size: 9.5px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      padding: 2px 6px;\n      border-radius: var(--radius-xs);\n      background: color-mix(in srgb, var(--tone-color) 15%, transparent);\n      color: var(--tone-color);\n    }\n\n    .vrt__diff[_ngcontent-%COMP%] {\n      grid-area: diff;\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n    }\n\n    [data-tone='success'][_ngcontent-%COMP%] { --tone-color: var(--prism-success); }\n    [data-tone='danger'][_ngcontent-%COMP%] { --tone-color: var(--prism-danger); }\n    [data-tone='warn'][_ngcontent-%COMP%] { --tone-color: var(--prism-warn); }\n    [data-tone='neutral'][_ngcontent-%COMP%] { --tone-color: var(--prism-primary); }\n    [data-tone='muted'][_ngcontent-%COMP%] { --tone-color: var(--prism-text-muted); }\n\n    .vrt__viewer[_ngcontent-%COMP%] {\n      min-width: 0;\n      min-height: 0;\n      border-left: 1px solid var(--prism-border);\n    }\n\n    .vrt__empty[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      min-height: 140px;\n      padding: 24px;\n      text-align: center;\n      font-size: var(--fs-md);\n    }\n    .vrt__empty[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { font-weight: 600; color: var(--prism-text-2); }\n    .vrt__empty[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { color: var(--prism-text-muted); }\n    .vrt__empty[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm);\n      padding: 1px 5px;\n      border-radius: var(--radius-xs);\n      background: var(--prism-input-bg);\n    }\n\n    @media (max-width: 860px) {\n      .vrt__split[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n      .vrt__list[_ngcontent-%COMP%] { padding-right: 16px; }\n      .vrt__viewer[_ngcontent-%COMP%] { border-left: none; border-top: 1px solid var(--prism-border); }\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VisualRegressionPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-visual-regression-panel', standalone: true, imports: [VrtCompareComponent, VrtSummaryComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (meta(); as m) { @if (m.found) {
+    <div class="vrt">
+      <div class="vrt__summary">
+        <prism-vrt-summary [summary]="summary()" />
+      </div>
+
+      <div class="vrt__split">
+        <ul class="vrt__list">
+          @for (row of rows(); track row.key) {
+          <li>
+            <button
+              type="button"
+              class="vrt__row"
+              [attr.data-tone]="row.tone"
+              [class.vrt__row--active]="row.variant === selected()"
+              (click)="selectedKey.set(row.key)"
+            >
+              <span class="vrt__name">{{ row.label }}</span>
+              <span class="vrt__status">{{ row.statusLabel }}</span>
+              <span class="vrt__diff">{{ row.diffLabel }}</span>
+            </button>
+          </li>
+          }
+        </ul>
+
+        <div class="vrt__viewer">
+          @if (selected(); as v) {
+          <prism-vrt-compare [variant]="v" [assetBaseUrl]="assetBaseUrl()" />
+          } @else {
+          <p class="vrt__empty">Select a variant.</p>
+          }
+        </div>
+      </div>
+    </div>
+    } @else {
+    <div class="vrt__empty">
+      <b>No visual regression results for this component.</b>
+      <span>Run your screenshot runner and rebuild the styleguide.</span>
+    </div>
+    } } @else {
+    <div class="vrt__empty">
+      <b>No visual regression report loaded.</b>
+      <span>Check the plugin's <code>reportPath</code>.</span>
+    </div>
+    }
+  `, styles: ["\n    :host {\n      display: block;\n      height: 100%;\n      overflow: auto;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n    }\n\n    .vrt {\n      display: flex;\n      flex-direction: column;\n      min-height: 100%;\n    }\n\n    .vrt__summary { padding: 14px 16px 0; }\n\n    .vrt__split {\n      display: grid;\n      grid-template-columns: minmax(200px, 250px) 1fr;\n      flex: 1;\n      min-height: 0;\n      padding-top: 14px;\n    }\n\n    .vrt__list {\n      margin: 0;\n      padding: 0 4px 14px 16px;\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    /* Same card-with-severity-edge as the a11y violations list, so the two\n       panels read as one product. */\n    .vrt__row {\n      display: grid;\n      grid-template-columns: 1fr auto;\n      grid-template-areas: 'name diff' 'status diff';\n      align-items: center;\n      gap: 0 10px;\n      width: 100%;\n      padding: 8px 11px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-left: 3px solid var(--tone-color, var(--prism-border-strong));\n      border-radius: var(--radius-md);\n      color: inherit;\n      font: inherit;\n      text-align: left;\n      cursor: pointer;\n      transition: border-color var(--dur-fast), background var(--dur-fast);\n    }\n    .vrt__row:hover { border-color: var(--prism-border-strong); }\n    .vrt__row:hover { border-left-color: var(--tone-color, var(--prism-border-strong)); }\n    .vrt__row--active {\n      background: color-mix(in srgb, var(--prism-primary) 10%, var(--prism-bg-surface));\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      border-left-color: var(--tone-color, var(--prism-primary));\n    }\n\n    .vrt__name {\n      grid-area: name;\n      font-weight: 600;\n      font-size: var(--fs-md);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .vrt__status {\n      grid-area: status;\n      justify-self: start;\n      margin-top: 3px;\n      font-family: var(--font-mono);\n      font-size: 9.5px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      padding: 2px 6px;\n      border-radius: var(--radius-xs);\n      background: color-mix(in srgb, var(--tone-color) 15%, transparent);\n      color: var(--tone-color);\n    }\n\n    .vrt__diff {\n      grid-area: diff;\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      white-space: nowrap;\n    }\n\n    [data-tone='success'] { --tone-color: var(--prism-success); }\n    [data-tone='danger'] { --tone-color: var(--prism-danger); }\n    [data-tone='warn'] { --tone-color: var(--prism-warn); }\n    [data-tone='neutral'] { --tone-color: var(--prism-primary); }\n    [data-tone='muted'] { --tone-color: var(--prism-text-muted); }\n\n    .vrt__viewer {\n      min-width: 0;\n      min-height: 0;\n      border-left: 1px solid var(--prism-border);\n    }\n\n    .vrt__empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      min-height: 140px;\n      padding: 24px;\n      text-align: center;\n      font-size: var(--fs-md);\n    }\n    .vrt__empty b { font-weight: 600; color: var(--prism-text-2); }\n    .vrt__empty span { color: var(--prism-text-muted); }\n    .vrt__empty code {\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm);\n      padding: 1px 5px;\n      border-radius: var(--radius-xs);\n      background: var(--prism-input-bg);\n    }\n\n    @media (max-width: 860px) {\n      .vrt__split { grid-template-columns: 1fr; }\n      .vrt__list { padding-right: 16px; }\n      .vrt__viewer { border-left: none; border-top: 1px solid var(--prism-border); }\n    }\n  "] }]
+    }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VisualRegressionPanelComponent, { className: "VisualRegressionPanelComponent", filePath: "visual-regression-panel.component.ts", lineNumber: 208 }); })();
+function formatDiff(variant) {
+    if (variant.diffRatio === undefined)
+        return '—';
+    return formatPercent(variant.diffRatio);
+}

package/dist/visual-regression-plugin.browser.d.ts

@@ -0,0 +1,11 @@
+import type { NgPrismPlugin } from '@ng-prism/core/plugin';
+import type { VisualRegressionPluginOptions } from './visual-regression.types.js';
+/**
+ * Browser-safe twin of {@link visualRegressionPlugin}.
+ *
+ * The config is loaded in Node.js by the builder *and* in the browser by the
+ * Prism app. Only the runtime contributions survive here — the build-time hooks
+ * read the report from disk and must not be reachable from a browser bundle.
+ */
+export declare function visualRegressionPlugin(_options?: VisualRegressionPluginOptions): NgPrismPlugin;
+//# sourceMappingURL=visual-regression-plugin.browser.d.ts.map

package/dist/visual-regression-plugin.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-regression-plugin.browser.d.ts","sourceRoot":"","sources":["../src/visual-regression-plugin.browser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAoB,MAAM,uBAAuB,CAAC;AAC7E,OAAO,KAAK,EACV,6BAA6B,EAE9B,MAAM,8BAA8B,CAAC;AAStC;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,CAAC,EAAE,6BAA6B,GACvC,aAAa,CA4Bf"}

package/dist/visual-regression-plugin.browser.js

@@ -0,0 +1,34 @@
+function hasResults(component) {
+    const meta = component.meta?.showcaseConfig?.meta?.['visualRegression'];
+    return Boolean(meta?.found && meta.variants.length > 0);
+}
+/**
+ * Browser-safe twin of {@link visualRegressionPlugin}.
+ *
+ * The config is loaded in Node.js by the builder *and* in the browser by the
+ * Prism app. Only the runtime contributions survive here — the build-time hooks
+ * read the report from disk and must not be reachable from a browser bundle.
+ */
+export function visualRegressionPlugin(_options) {
+    return {
+        name: '@ng-prism/plugin-visual-regression',
+        panels: [
+            {
+                id: 'visual-regression',
+                label: 'Visual Regression',
+                icon: 'camera',
+                position: 'bottom',
+                isVisible: hasResults,
+                loadComponent: () => import('./visual-regression-panel.component.js').then((m) => m.VisualRegressionPanelComponent),
+            },
+        ],
+        headerWidgets: [
+            {
+                id: 'visual-regression-total',
+                placement: 'end',
+                order: -10,
+                loadComponent: () => import('./visual-regression-header-badge.component.js').then((m) => m.VisualRegressionHeaderBadgeComponent),
+            },
+        ],
+    };
+}

package/dist/visual-regression-plugin.d.ts

@@ -0,0 +1,11 @@
+import type { NgPrismPlugin } from '@ng-prism/core/plugin';
+import type { VisualRegressionPluginOptions } from './visual-regression.types.js';
+/**
+ * Renders a visual regression report produced by an external runner.
+ *
+ * The plugin performs no image comparison of its own — that belongs to the
+ * runner, which owns the baselines and the pinned container. See
+ * `docs/guide/visual-regression.md`.
+ */
+export declare function visualRegressionPlugin(options?: VisualRegressionPluginOptions): NgPrismPlugin;
+//# sourceMappingURL=visual-regression-plugin.d.ts.map

package/dist/visual-regression-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-regression-plugin.d.ts","sourceRoot":"","sources":["../src/visual-regression-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAoB,MAAM,uBAAuB,CAAC;AAC7E,OAAO,KAAK,EACV,6BAA6B,EAE9B,MAAM,8BAA8B,CAAC;AAatC;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,CAAC,EAAE,6BAA6B,GACtC,aAAa,CAqEf"}

package/dist/visual-regression-plugin.js

@@ -0,0 +1,67 @@
+import { resolveVrtThresholds } from './thresholds.js';
+const DEFAULT_REPORT_PATH = 'vrt-report.json';
+/** True when the plugin recorded at least one result for this component. */
+function hasResults(component) {
+    const meta = component.meta?.showcaseConfig?.meta?.['visualRegression'];
+    return Boolean(meta?.found && meta.variants.length > 0);
+}
+/**
+ * Renders a visual regression report produced by an external runner.
+ *
+ * The plugin performs no image comparison of its own — that belongs to the
+ * runner, which owns the baselines and the pinned container. See
+ * `docs/guide/visual-regression.md`.
+ */
+export function visualRegressionPlugin(options) {
+    const reportPath = options?.reportPath ?? DEFAULT_REPORT_PATH;
+    const assetBaseUrl = options?.assetBaseUrl ?? '';
+    const thresholds = resolveVrtThresholds(options?.thresholds);
+    return {
+        name: '@ng-prism/plugin-visual-regression',
+        async onComponentScanned(component) {
+            const { readVariantsForComponent } = await import('./report-reader.js');
+            const variants = readVariantsForComponent(reportPath, component.className);
+            const meta = {
+                found: variants.length > 0,
+                variants,
+                assetBaseUrl,
+            };
+            return {
+                ...component,
+                showcaseConfig: {
+                    ...component.showcaseConfig,
+                    meta: { ...component.showcaseConfig.meta, visualRegression: meta },
+                },
+            };
+        },
+        async onManifestReady(manifest) {
+            const { readTotals } = await import('./report-reader.js');
+            const total = readTotals(reportPath);
+            return {
+                ...manifest,
+                meta: {
+                    ...manifest.meta,
+                    visualRegression: { found: total !== null, total, thresholds },
+                },
+            };
+        },
+        panels: [
+            {
+                id: 'visual-regression',
+                label: 'Visual Regression',
+                icon: 'camera',
+                position: 'bottom',
+                isVisible: hasResults,
+                loadComponent: () => import('./visual-regression-panel.component.js').then((m) => m.VisualRegressionPanelComponent),
+            },
+        ],
+        headerWidgets: [
+            {
+                id: 'visual-regression-total',
+                placement: 'end',
+                order: -10,
+                loadComponent: () => import('./visual-regression-header-badge.component.js').then((m) => m.VisualRegressionHeaderBadgeComponent),
+            },
+        ],
+    };
+}

package/dist/visual-regression.types.d.ts

@@ -0,0 +1,97 @@
+import type { CanvasBg } from '@ng-prism/core/plugin';
+/**
+ * Outcome of comparing one rendered variant against its baseline.
+ *
+ * `new` and `excluded` are deliberately not failures. A variant with no
+ * baseline has nothing to regress against, and an excluded one was never
+ * captured — a runner that does not fail its build on either must not be
+ * contradicted by the UI.
+ *
+ * `excluded` exists because some variants cannot be captured meaningfully: a
+ * tooltip that only renders on hover would be screenshotted as its trigger. A
+ * runner reports them instead of dropping them silently, so the list of skipped
+ * variants stays visible rather than quietly shrinking coverage.
+ */
+export type VrtStatus = 'unchanged' | 'changed' | 'size-mismatch' | 'new' | 'excluded';
+export interface VrtVariantResult {
+    className: string;
+    title?: string;
+    variantName?: string;
+    variantIndex: number;
+    status: VrtStatus;
+    width?: number;
+    height?: number;
+    diffPixels?: number;
+    totalPixels?: number;
+    /** Changed pixels as a fraction of the total, e.g. `0.5` for 50%. */
+    diffRatio?: number;
+    baselinePath?: string;
+    /** The image captured on this run. Optional — the panel degrades without it. */
+    currentPath?: string;
+    diffPath?: string;
+    /**
+     * The canvas background this run captured on — `DiscoveryVariant.bg` from
+     * `__PRISM_MANIFEST__`, which the runner already read to drive the app.
+     *
+     * Recording it makes the report self-describing: a stored baseline no longer
+     * silently forgets which surface it was judged against.
+     */
+    bg?: CanvasBg;
+    /**
+     * The background the *stored baseline* was captured on, when the runner
+     * tracks it alongside the baseline image.
+     *
+     * The one thing that turns an unexplained 100% diff into a named cause: a
+     * variant whose `bg` moved is compared against a baseline on the old
+     * surface, so every pixel differs while the component is untouched. `bg`
+     * alone cannot show that — it only describes the current run.
+     */
+    baselineBg?: CanvasBg;
+    /** Why a variant was excluded. Runners are expected to justify each one. */
+    reason?: string;
+}
+export interface VrtTotals {
+    auditedVariants: number;
+    auditedComponents: number;
+    unchanged: number;
+    changed: number;
+    sizeMismatch: number;
+    new: number;
+    /** Optional — older runners and runners without an exclusion list omit it. */
+    excluded?: number;
+    maxDiffRatio: number;
+    /** Percent of comparable variants that are unchanged. */
+    score: number;
+}
+/** The JSON document an external runner writes. */
+export interface VrtReport {
+    total: VrtTotals;
+    byVariant: VrtVariantResult[];
+}
+export interface VrtThresholds {
+    /** Minimum score before the header badge stops being green. */
+    score: number;
+}
+export interface VisualRegressionPluginOptions {
+    /** Path to the report JSON, relative to the workspace root. */
+    reportPath?: string;
+    /**
+     * Prefix applied to the image paths recorded in the report so they resolve
+     * against the served styleguide. No layout is assumed.
+     */
+    assetBaseUrl?: string;
+    thresholds?: number | Partial<VrtThresholds>;
+}
+/** Shape stored under `showcaseConfig.meta.visualRegression`. */
+export interface VrtComponentMeta {
+    found: boolean;
+    variants: VrtVariantResult[];
+    assetBaseUrl: string;
+}
+/** Shape stored under `manifest.meta.visualRegression`. */
+export interface VrtManifestMeta {
+    found: boolean;
+    total: VrtTotals | null;
+    thresholds: VrtThresholds;
+}
+//# sourceMappingURL=visual-regression.types.d.ts.map

package/dist/visual-regression.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-regression.types.d.ts","sourceRoot":"","sources":["../src/visual-regression.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,SAAS,GACjB,WAAW,GACX,SAAS,GACT,eAAe,GACf,KAAK,GACL,UAAU,CAAC;AAEf,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAS;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,mDAAmD;AACnD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,gBAAgB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,aAAa;IAC5B,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,6BAA6B;IAC5C,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9C;AAED,iEAAiE;AACjE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,2DAA2D;AAC3D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,aAAa,CAAC;CAC3B"}

package/dist/visual-regression.types.js

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

package/dist/vrt-bg.d.ts

@@ -0,0 +1,37 @@
+import type { CanvasBg } from '@ng-prism/core/plugin';
+import type { VrtVariantResult } from './visual-regression.types.js';
+/**
+ * Background declarations for the box that holds a capture.
+ *
+ * The captures themselves are opaque, so this is mostly invisible — except
+ * under a diff mask, where the unchanged pixels a comparator leaves
+ * transparent let it through. There the surface decides whether a diff reads
+ * as a diff or as a chequered mess.
+ *
+ * Only `light` and `dark` produce a colour. `dots`, `plain` and `checker` all
+ * paint `--prism-bg-surface`, a *theme* token, and the panel cannot know which
+ * theme the runner's browser ran in — so those keep the checkerboard, which
+ * reads as "transparent" rather than as a guess painted as fact. For `checker`
+ * that is also the literal rendering, and since it is what an undeclared
+ * variant resolves to, an undeclared capture frames itself correctly. Same for
+ * a report that recorded no background at all.
+ */
+export declare function shotSurfaceStyle(bg: CanvasBg | undefined): Record<string, string>;
+/**
+ * The background move between the baseline and this run, or `null`.
+ *
+ * A variant whose declared `bg` changed compares a capture on one surface
+ * against a baseline on another, which is a 100%-different image with an
+ * innocent component in it. Naming the move is the difference between a
+ * reviewer re-recording a baseline and a reviewer hunting a regression that
+ * was never there.
+ *
+ * Needs both values, and only the runner can supply them: `bg` is what this
+ * run captured on, `baselineBg` what the stored baseline was captured on.
+ * Runners that do not track the second simply get no note.
+ */
+export declare function bgChange(variant: VrtVariantResult): {
+    from: CanvasBg;
+    to: CanvasBg;
+} | null;
+//# sourceMappingURL=vrt-bg.d.ts.map

package/dist/vrt-bg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vrt-bg.d.ts","sourceRoot":"","sources":["../src/vrt-bg.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAerE;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,QAAQ,GAAG,SAAS,GACvB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAIxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CACtB,OAAO,EAAE,gBAAgB,GACxB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,QAAQ,CAAA;CAAE,GAAG,IAAI,CAIzC"}

package/dist/vrt-bg.js

@@ -0,0 +1,53 @@
+/**
+ * Colours the two theme-independent backgrounds resolve to.
+ *
+ * Mirrors what the canvas paints in capture mode, tokens included, so the
+ * frame around a capture is the same colour as the capture's own edge.
+ * `--prism-void-light` and `--prism-void-dark` are absolute in both themes;
+ * the literals are the tokens' own fallbacks.
+ */
+const SURFACE = {
+    light: 'var(--prism-void-light, #f7f5fc)',
+    dark: 'var(--prism-void-dark, #07050f)',
+};
+/**
+ * Background declarations for the box that holds a capture.
+ *
+ * The captures themselves are opaque, so this is mostly invisible — except
+ * under a diff mask, where the unchanged pixels a comparator leaves
+ * transparent let it through. There the surface decides whether a diff reads
+ * as a diff or as a chequered mess.
+ *
+ * Only `light` and `dark` produce a colour. `dots`, `plain` and `checker` all
+ * paint `--prism-bg-surface`, a *theme* token, and the panel cannot know which
+ * theme the runner's browser ran in — so those keep the checkerboard, which
+ * reads as "transparent" rather than as a guess painted as fact. For `checker`
+ * that is also the literal rendering, and since it is what an undeclared
+ * variant resolves to, an undeclared capture frames itself correctly. Same for
+ * a report that recorded no background at all.
+ */
+export function shotSurfaceStyle(bg) {
+    const surface = bg ? SURFACE[bg] : undefined;
+    if (!surface)
+        return {};
+    return { 'background-color': surface, 'background-image': 'none' };
+}
+/**
+ * The background move between the baseline and this run, or `null`.
+ *
+ * A variant whose declared `bg` changed compares a capture on one surface
+ * against a baseline on another, which is a 100%-different image with an
+ * innocent component in it. Naming the move is the difference between a
+ * reviewer re-recording a baseline and a reviewer hunting a regression that
+ * was never there.
+ *
+ * Needs both values, and only the runner can supply them: `bg` is what this
+ * run captured on, `baselineBg` what the stored baseline was captured on.
+ * Runners that do not track the second simply get no note.
+ */
+export function bgChange(variant) {
+    const { baselineBg, bg } = variant;
+    if (!baselineBg || !bg || baselineBg === bg)
+        return null;
+    return { from: baselineBg, to: bg };
+}

package/dist/vrt-compare.component.d.ts

@@ -0,0 +1,70 @@
+import { type Zoom } from './vrt-zoom.js';
+import type { VrtVariantResult } from './visual-regression.types.js';
+import * as i0 from "@angular/core";
+type CompareMode = 'wipe' | 'side-by-side' | 'diff';
+/**
+ * The comparison stage: toolbar, zoom, and the three ways to look at a variant.
+ *
+ * Owns its own URL resolution and mode state so the panel shell stays a shell.
+ * Everything it needs is in the one variant it is handed.
+ */
+export declare class VrtCompareComponent {
+    readonly variant: import("@angular/core").InputSignal<VrtVariantResult>;
+    readonly assetBaseUrl: import("@angular/core").InputSignal<string>;
+    protected readonly requestedMode: import("@angular/core").WritableSignal<CompareMode | null>;
+    protected readonly zoom: import("@angular/core").WritableSignal<Zoom>;
+    protected readonly wipe: import("@angular/core").WritableSignal<number>;
+    protected readonly MODE_LABEL: Record<CompareMode, string>;
+    protected readonly ZOOMS: readonly Zoom[];
+    private readonly baselineUrl;
+    private readonly currentUrl;
+    protected readonly diffUrl: import("@angular/core").Signal<string | undefined>;
+    /**
+     * The two images to compare.
+     *
+     * `currentPath` is optional in the report, so the right-hand side falls back
+     * to the diff mask. Below that the viewer degrades to a single image.
+     */
+    protected readonly images: import("@angular/core").Signal<{
+        left: string;
+        leftLabel: string;
+        right: string;
+        rightLabel: string;
+    } | null>;
+    /**
+     * The surface each capture sits on; see {@link shotSurfaceStyle}.
+     *
+     * The baseline falls back to this run's background: when it did not move the
+     * two are the same, and when it did, `baselineBg` is what records the move.
+     */
+    protected readonly currentSurface: import("@angular/core").Signal<Record<string, string>>;
+    protected readonly baselineSurface: import("@angular/core").Signal<Record<string, string>>;
+    /** A background move between baseline and this run; see {@link bgChange}. */
+    protected readonly bgMove: import("@angular/core").Signal<{
+        from: import("@ng-prism/core/plugin").CanvasBg;
+        to: import("@ng-prism/core/plugin").CanvasBg;
+    } | null>;
+    protected readonly singleImage: import("@angular/core").Signal<{
+        src: string;
+        surface: Record<string, string>;
+        label: string;
+        title: string;
+        note: string;
+    } | null>;
+    protected readonly availableModes: import("@angular/core").Signal<CompareMode[]>;
+    protected readonly activeMode: import("@angular/core").Signal<CompareMode>;
+    /** Fixed zoom steps need a natural width to multiply; `fit` does not. */
+    protected readonly canZoom: import("@angular/core").Signal<boolean>;
+    /**
+     * An excluded variant has no modes, no measurements and nothing to zoom, so
+     * the bar would render as a bare rule above the note explaining why.
+     */
+    protected readonly showToolbar: import("@angular/core").Signal<boolean>;
+    /** Width declarations for the frame; see {@link frameWidthStyle}. */
+    protected readonly frameStyle: import("@angular/core").Signal<Record<string, string>>;
+    protected percent(ratio: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VrtCompareComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VrtCompareComponent, "prism-vrt-compare", never, { "variant": { "alias": "variant"; "required": true; "isSignal": true; }; "assetBaseUrl": { "alias": "assetBaseUrl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=vrt-compare.component.d.ts.map

package/dist/vrt-compare.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vrt-compare.component.d.ts","sourceRoot":"","sources":["../src/vrt-compare.component.ts"],"names":[],"mappings":"AAUA,OAAO,EAA0B,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAErE,KAAK,WAAW,GAAG,MAAM,GAAG,cAAc,GAAG,MAAM,CAAC;AAQpD;;;;;GAKG;AACH,qBAkZa,mBAAmB;IAC9B,QAAQ,CAAC,OAAO,wDAAsC;IACtD,QAAQ,CAAC,YAAY,8CAAa;IAElC,SAAS,CAAC,QAAQ,CAAC,aAAa,6DAAoC;IACpE,SAAS,CAAC,QAAQ,CAAC,IAAI,+CAAuB;IAC9C,SAAS,CAAC,QAAQ,CAAC,IAAI,iDAAc;IAErC,SAAS,CAAC,QAAQ,CAAC,UAAU,8BAAc;IAC3C,SAAS,CAAC,QAAQ,CAAC,KAAK,kBAAS;IAEjC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAE1B;IACF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAEzB;IACF,SAAS,CAAC,QAAQ,CAAC,OAAO,qDAExB;IAEF;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM;;;;;cAUtB;IAEH;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,cAAc,yDAE/B;IAEF,SAAS,CAAC,QAAQ,CAAC,eAAe,yDAEhC;IAEF,6EAA6E;IAC7E,SAAS,CAAC,QAAQ,CAAC,MAAM;;;cAA4C;IAErE,SAAS,CAAC,QAAQ,CAAC,WAAW;;;;;;cAe3B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,gDAgB9B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,8CAM1B;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAExB;IAEF;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,WAAW,0CAQ3B;IAEH,qEAAqE;IACrE,SAAS,CAAC,QAAQ,CAAC,UAAU,yDAG1B;IAEH,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;yCA5H7B,mBAAmB;2CAAnB,mBAAmB;CA+H/B"}