@ng-prism/plugin-visual-regression 22.2.0-beta.3 → 22.2.0-beta.4

package/dist/panel-contributions.d.ts

@@ -0,0 +1,14 @@
+import type { PanelBadge, RuntimeComponent } from '@ng-prism/core/plugin';
+/** True when the plugin recorded at least one result for this component. */
+export declare function hasResults(component: RuntimeComponent): boolean;
+/**
+ * How many of this component's variants are waiting on a person.
+ *
+ * The same set the panel's first group holds, counted from the same function,
+ * so the number on the tab and the number in the group header cannot disagree.
+ * Red once anything actually changed, amber while the only open items are ones
+ * that could not be compared — resized and new. Null when there is nothing to
+ * say, which is what keeps a clean component's tab free of a green "0".
+ */
+export declare function reviewBadge(component: RuntimeComponent): PanelBadge | null;
+//# sourceMappingURL=panel-contributions.d.ts.map

package/dist/panel-contributions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-contributions.d.ts","sourceRoot":"","sources":["../src/panel-contributions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAuB1E,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,SAAS,EAAE,gBAAgB,GAAG,OAAO,CAG/D;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,gBAAgB,GAAG,UAAU,GAAG,IAAI,CAe1E"}

package/dist/panel-contributions.js

@@ -0,0 +1,42 @@
+import { groupRows } from './vrt-summarize.js';
+/**
+ * The runtime contributions both entry points declare.
+ *
+ * `visual-regression-plugin.ts` carries the build-time hooks and must never be
+ * reachable from a browser bundle, so the browser entry cannot import through
+ * it — which used to mean the panel's visibility rule was written out twice,
+ * once per entry, with nothing but `entry-parity.spec.ts` noticing if the two
+ * drifted. This module is the half both can share: no `node:` imports, no
+ * Angular, just the predicates the panel definition needs.
+ */
+function componentMeta(component) {
+    return (component.meta?.showcaseConfig?.meta?.['visualRegression'] ?? null);
+}
+/** True when the plugin recorded at least one result for this component. */
+export function hasResults(component) {
+    const meta = componentMeta(component);
+    return Boolean(meta?.found && meta.variants.length > 0);
+}
+/**
+ * How many of this component's variants are waiting on a person.
+ *
+ * The same set the panel's first group holds, counted from the same function,
+ * so the number on the tab and the number in the group header cannot disagree.
+ * Red once anything actually changed, amber while the only open items are ones
+ * that could not be compared — resized and new. Null when there is nothing to
+ * say, which is what keeps a clean component's tab free of a green "0".
+ */
+export function reviewBadge(component) {
+    const meta = componentMeta(component);
+    if (!meta?.found)
+        return null;
+    const review = groupRows(meta.variants).find((group) => group.key === 'review');
+    if (!review)
+        return null;
+    return {
+        text: String(review.count),
+        variant: review.rows.some((row) => row.status === 'changed')
+            ? 'danger'
+            : 'warn',
+    };
+}

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

@@ -1,3 +1,4 @@
+import { type VrtGroupKey } from './vrt-summarize.js';
 import type { VrtComponentMeta, VrtVariantResult } from './visual-regression.types.js';
 import * as i0 from "@angular/core";
 export declare class VisualRegressionPanelComponent {
@@ -10,11 +11,33 @@ export declare class VisualRegressionPanelComponent {
     protected readonly rows: import("@angular/core").Signal<{
         key: string;
         variant: VrtVariantResult;
+        status: import("./visual-regression.types.js").VrtStatus;
         label: string;
         statusLabel: string;
         tone: import("./vrt-summarize.js").VrtTone;
         diffLabel: string;
     }[]>;
+    protected readonly groups: import("@angular/core").Signal<import("./vrt-summarize.js").VrtGroup<{
+        key: string;
+        variant: VrtVariantResult;
+        status: import("./visual-regression.types.js").VrtStatus;
+        label: string;
+        statusLabel: string;
+        tone: import("./vrt-summarize.js").VrtTone;
+        diffLabel: string;
+    }>[]>;
+    /**
+     * Which groups the reader has opened.
+     *
+     * `null` means "nobody has touched this yet", which is what lets the default
+     * follow the data — shut while something needs review, the first group open
+     * when nothing does. A plain set initialised once would freeze the first
+     * component's answer and apply it to every component after it.
+     */
+    private readonly expanded;
+    private readonly expandedGroups;
+    protected isExpanded(key: VrtGroupKey): boolean;
+    protected toggleGroup(key: VrtGroupKey): void;
     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>;

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

@@ -1 +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,qBAqNa,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"}
+{"version":3,"file":"visual-regression-panel.component.d.ts","sourceRoot":"","sources":["../src/visual-regression-panel.component.ts"],"names":[],"mappings":"AASA,OAAO,EAOL,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;;AAEtC,qBA2Ra,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;;;;;;;;SAarB;IAEF,SAAS,CAAC,QAAQ,CAAC,MAAM;;;;;;;;UAA0C;IAEnE;;;;;;;OAOG;IACH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiD;IAE1E,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IAEF,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO;IAI/C,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI;IAM7C,SAAS,CAAC,QAAQ,CAAC,QAAQ,0DAWxB;yCA5EQ,8BAA8B;2CAA9B,8BAA8B;CA6E1C"}

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

@@ -1,34 +1,81 @@
 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 { defaultExpandedGroups, formatPercent, groupRows, 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) {
+function VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Conditional_0_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.ɵɵelementStart(0, "button", 11);
+    i0.ɵɵlistener("click", function VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const group_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleGroup(group_r2.key)); });
+    i0.ɵɵelementStart(1, "span", 12);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 13);
+    i0.ɵɵtext(4, "\u25B6");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const group_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵattribute("aria-expanded", ctx_r2.isExpanded(group_r2.key));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", group_r2.label, " \u00B7 ", group_r2.count);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("vrt__caret--open", ctx_r2.isExpanded(group_r2.key));
+} }
+function VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 9)(1, "span", 12);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const group_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", group_r2.label, " \u00B7 ", group_r2.count);
+} }
+function VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li")(1, "button", 14);
+    i0.ɵɵlistener("click", function VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Conditional_2_For_2_Template_button_click_1_listener() { const row_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.selectedKey.set(row_r5.key)); });
+    i0.ɵɵelementStart(2, "span", 15);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 10);
+    i0.ɵɵelementStart(4, "span", 16);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 11);
+    i0.ɵɵelementStart(6, "span", 17);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const row_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const row_r5 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("vrt__row--active", row_r2.variant === ctx_r2.selected());
-    i0.ɵɵattribute("data-tone", row_r2.tone);
+    i0.ɵɵclassProp("vrt__row--active", row_r5.variant === ctx_r2.selected());
+    i0.ɵɵattribute("data-tone", row_r5.tone);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(row_r2.label);
+    i0.ɵɵtextInterpolate(row_r5.label);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(row_r2.statusLabel);
+    i0.ɵɵtextInterpolate(row_r5.statusLabel);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(row_r2.diffLabel);
+    i0.ɵɵtextInterpolate(row_r5.diffLabel);
+} }
+function VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ul", 10);
+    i0.ɵɵrepeaterCreate(1, VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Conditional_2_For_2_Template, 8, 6, "li", null, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(group_r2.rows);
+} }
+function VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Conditional_0_Template, 5, 5, "button", 8)(1, VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Conditional_1_Template, 3, 2, "p", 9);
+    i0.ɵɵconditionalCreate(2, VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Conditional_2_Template, 3, 0, "ul", 10);
+} if (rf & 2) {
+    const group_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(group_r2.collapsible ? 0 : 1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!group_r2.collapsible || ctx_r2.isExpanded(group_r2.key) ? 2 : -1);
 } }
 function VisualRegressionPanelComponent_Conditional_0_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "prism-vrt-compare", 7);
@@ -45,8 +92,8 @@ function VisualRegressionPanelComponent_Conditional_0_Conditional_0_Template(rf,
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
     i0.ɵɵelement(3, "prism-vrt-summary", 4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "ul", 5);
-    i0.ɵɵrepeaterCreate(5, VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Template, 8, 6, "li", null, _forTrack0);
+    i0.ɵɵelementStart(4, "div", 5);
+    i0.ɵɵrepeaterCreate(5, VisualRegressionPanelComponent_Conditional_0_Conditional_0_For_6_Template, 3, 2, null, 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);
@@ -57,7 +104,7 @@ function VisualRegressionPanelComponent_Conditional_0_Conditional_0_Template(rf,
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("summary", ctx_r2.summary());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r2.rows());
+    i0.ɵɵrepeater(ctx_r2.groups());
     i0.ɵɵadvance(3);
     i0.ɵɵconditional((tmp_5_0 = ctx_r2.selected()) ? 8 : 9, tmp_5_0);
 } }
@@ -105,6 +152,7 @@ export class VisualRegressionPanelComponent {
     rows = computed(() => this.variants().map((variant) => ({
         key: `${variant.className}:${variant.variantIndex}`,
         variant,
+        status: variant.status,
         label: variant.variantName ??
             variant.title ??
             `Variant ${variant.variantIndex}`,
@@ -113,6 +161,29 @@ export class VisualRegressionPanelComponent {
         diffLabel: formatDiff(variant),
     })), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    groups = computed(() => groupRows(this.rows()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /**
+     * Which groups the reader has opened.
+     *
+     * `null` means "nobody has touched this yet", which is what lets the default
+     * follow the data — shut while something needs review, the first group open
+     * when nothing does. A plain set initialised once would freeze the first
+     * component's answer and apply it to every component after it.
+     */
+    expanded = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    expandedGroups = computed(() => this.expanded() ?? new Set(defaultExpandedGroups(this.groups())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedGroups" }] : /* istanbul ignore next */ []));
+    isExpanded(key) {
+        return this.expandedGroups().has(key);
+    }
+    toggleGroup(key) {
+        const next = new Set(this.expandedGroups());
+        if (!next.delete(key))
+            next.add(key);
+        this.expanded.set(next);
+    }
     selected = computed(() => {
         const rows = this.rows();
         if (!rows.length)
@@ -126,12 +197,12 @@ export class VisualRegressionPanelComponent {
     }, /* @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__aside"], [1, "vrt__summary"], [3, "summary"], [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) {
+    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__aside"], [1, "vrt__summary"], [3, "summary"], [1, "vrt__list"], [1, "vrt__viewer"], [3, "variant", "assetBaseUrl"], ["type", "button", 1, "vrt__group", "vrt__group--toggle"], [1, "vrt__group"], [1, "vrt__rows"], ["type", "button", 1, "vrt__group", "vrt__group--toggle", 3, "click"], [1, "vrt__group-label"], ["aria-hidden", "true", 1, "vrt__caret"], ["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: ["\n\n\n\n\n\n\n\n\n\n\n    [_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      overflow: hidden;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n    }\n\n    .vrt[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: minmax(200px, 250px) 1fr;\n      height: 100%;\n      min-height: 0;\n    }\n\n    .vrt__aside[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      min-width: 0;\n    }\n\n    .vrt__summary[_ngcontent-%COMP%] {\n      flex: none;\n      padding: 12px 12px 11px 16px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    .vrt__list[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n      margin: 0;\n      padding: 12px 4px 12px 16px;\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\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      overflow: auto;\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    \n\n\n    @media (max-width: 860px) {\n      [_nghost-%COMP%] { overflow: auto; }\n      .vrt[_ngcontent-%COMP%] { grid-template-columns: 1fr; height: auto; }\n      .vrt__list[_ngcontent-%COMP%] { overflow: visible; padding-right: 16px; }\n      .vrt__viewer[_ngcontent-%COMP%] {\n        overflow: visible;\n        border-left: none;\n        border-top: 1px solid var(--prism-border);\n      }\n    }"] });
+        } }, dependencies: [VrtCompareComponent, VrtSummaryComponent], styles: ["\n\n\n\n\n\n\n\n\n\n\n    [_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      overflow: hidden;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n    }\n\n    .vrt[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: minmax(200px, 250px) 1fr;\n      height: 100%;\n      min-height: 0;\n    }\n\n    .vrt__aside[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      min-width: 0;\n    }\n\n    .vrt__summary[_ngcontent-%COMP%] {\n      flex: none;\n      padding: 12px 12px 11px 16px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    .vrt__list[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n      margin: 0;\n      padding: 12px 4px 12px 16px;\n    }\n\n    .vrt__rows[_ngcontent-%COMP%] {\n      margin: 0 0 2px;\n      padding: 0;\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    \n\n\n\n    .vrt__group[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n      width: 100%;\n      margin: 0;\n      padding: 10px 8px 6px;\n      background: none;\n      border: none;\n      color: inherit;\n      font: inherit;\n      text-align: left;\n    }\n    .vrt__group--toggle[_ngcontent-%COMP%] { cursor: pointer; }\n    .vrt__group--toggle[_ngcontent-%COMP%]:hover   .vrt__group-label[_ngcontent-%COMP%] { color: var(--prism-text-2); }\n\n    .vrt__group-label[_ngcontent-%COMP%] {\n      font-size: var(--fs-sm);\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n      color: var(--prism-text-muted);\n      transition: color var(--dur-fast);\n    }\n\n    .vrt__caret[_ngcontent-%COMP%] {\n      font-size: 9px;\n      line-height: 1;\n      color: var(--prism-text-ghost);\n      transition: transform var(--dur-fast) var(--ease-default);\n    }\n    .vrt__caret--open[_ngcontent-%COMP%] { transform: rotate(90deg); }\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      overflow: auto;\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    \n\n\n    @media (max-width: 860px) {\n      [_nghost-%COMP%] { overflow: auto; }\n      .vrt[_ngcontent-%COMP%] { grid-template-columns: 1fr; height: auto; }\n      .vrt__list[_ngcontent-%COMP%] { overflow: visible; padding-right: 16px; }\n      .vrt__viewer[_ngcontent-%COMP%] {\n        overflow: visible;\n        border-left: none;\n        border-top: 1px solid var(--prism-border);\n      }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VisualRegressionPanelComponent, [{
         type: Component,
@@ -143,23 +214,50 @@ export class VisualRegressionPanelComponent {
           <prism-vrt-summary [summary]="summary()" />
         </div>
 
-        <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)"
+        <div class="vrt__list">
+          @for (group of groups(); track group.key) { @if (group.collapsible) {
+          <button
+            type="button"
+            class="vrt__group vrt__group--toggle"
+            [attr.aria-expanded]="isExpanded(group.key)"
+            (click)="toggleGroup(group.key)"
+          >
+            <span class="vrt__group-label"
+              >{{ group.label }} · {{ group.count }}</span
             >
-              <span class="vrt__name">{{ row.label }}</span>
-              <span class="vrt__status">{{ row.statusLabel }}</span>
-              <span class="vrt__diff">{{ row.diffLabel }}</span>
-            </button>
-          </li>
-          }
-        </ul>
+            <span
+              class="vrt__caret"
+              [class.vrt__caret--open]="isExpanded(group.key)"
+              aria-hidden="true"
+              >&#9654;</span
+            >
+          </button>
+          } @else {
+          <p class="vrt__group">
+            <span class="vrt__group-label"
+              >{{ group.label }} · {{ group.count }}</span
+            >
+          </p>
+          } @if (!group.collapsible || isExpanded(group.key)) {
+          <ul class="vrt__rows">
+            @for (row of group.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>
       </div>
 
       <div class="vrt__viewer">
@@ -181,9 +279,9 @@ export class VisualRegressionPanelComponent {
       <span>Check the plugin's <code>reportPath</code>.</span>
     </div>
     }
-  `, styles: ["\n    /*\n     * Not a scroll container.\n     *\n     * It used to be overflow:auto, which made the whole panel one scroller:\n     * both columns simply grew and the panel scrolled as a unit, so picking a\n     * variant further down the list scrolled the comparison off the top and\n     * you had to scroll back up to see what you had picked. The two columns\n     * own their scrolling now, and the chain of min-height:0 below is what\n     * lets them \u2014 a grid or flex item defaults to min-height:auto, refuses\n     * to shrink below its content, and pushes the overflow back up here.\n     */\n    :host {\n      display: block;\n      height: 100%;\n      overflow: hidden;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n    }\n\n    .vrt {\n      display: grid;\n      grid-template-columns: minmax(200px, 250px) 1fr;\n      height: 100%;\n      min-height: 0;\n    }\n\n    .vrt__aside {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      min-width: 0;\n    }\n\n    .vrt__summary {\n      flex: none;\n      padding: 12px 12px 11px 16px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    .vrt__list {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n      margin: 0;\n      padding: 12px 4px 12px 16px;\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\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      overflow: auto;\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    /* Too narrow for two columns: stack them, and hand the scrolling back to\n       the panel as a whole \u2014 side by side the two scrollers keep the list and\n       the image in view at once, stacked there is nothing to keep in view. */\n    @media (max-width: 860px) {\n      :host { overflow: auto; }\n      .vrt { grid-template-columns: 1fr; height: auto; }\n      .vrt__list { overflow: visible; padding-right: 16px; }\n      .vrt__viewer {\n        overflow: visible;\n        border-left: none;\n        border-top: 1px solid var(--prism-border);\n      }\n    }\n  "] }]
+  `, styles: ["\n    /*\n     * Not a scroll container.\n     *\n     * It used to be overflow:auto, which made the whole panel one scroller:\n     * both columns simply grew and the panel scrolled as a unit, so picking a\n     * variant further down the list scrolled the comparison off the top and\n     * you had to scroll back up to see what you had picked. The two columns\n     * own their scrolling now, and the chain of min-height:0 below is what\n     * lets them \u2014 a grid or flex item defaults to min-height:auto, refuses\n     * to shrink below its content, and pushes the overflow back up here.\n     */\n    :host {\n      display: block;\n      height: 100%;\n      overflow: hidden;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n    }\n\n    .vrt {\n      display: grid;\n      grid-template-columns: minmax(200px, 250px) 1fr;\n      height: 100%;\n      min-height: 0;\n    }\n\n    .vrt__aside {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      min-width: 0;\n    }\n\n    .vrt__summary {\n      flex: none;\n      padding: 12px 12px 11px 16px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    .vrt__list {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n      margin: 0;\n      padding: 12px 4px 12px 16px;\n    }\n\n    .vrt__rows {\n      margin: 0 0 2px;\n      padding: 0;\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    /* The group header, in both its forms: a paragraph for the group that\n       cannot collapse and a button for the ones that can, so the disclosure is\n       a real control rather than a click handler on a label \u2014 same box either\n       way, which is what keeps the two from jumping as groups appear. */\n    .vrt__group {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n      width: 100%;\n      margin: 0;\n      padding: 10px 8px 6px;\n      background: none;\n      border: none;\n      color: inherit;\n      font: inherit;\n      text-align: left;\n    }\n    .vrt__group--toggle { cursor: pointer; }\n    .vrt__group--toggle:hover .vrt__group-label { color: var(--prism-text-2); }\n\n    .vrt__group-label {\n      font-size: var(--fs-sm);\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n      color: var(--prism-text-muted);\n      transition: color var(--dur-fast);\n    }\n\n    .vrt__caret {\n      font-size: 9px;\n      line-height: 1;\n      color: var(--prism-text-ghost);\n      transition: transform var(--dur-fast) var(--ease-default);\n    }\n    .vrt__caret--open { transform: rotate(90deg); }\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      overflow: auto;\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    /* Too narrow for two columns: stack them, and hand the scrolling back to\n       the panel as a whole \u2014 side by side the two scrollers keep the list and\n       the image in view at once, stacked there is nothing to keep in view. */\n    @media (max-width: 860px) {\n      :host { overflow: auto; }\n      .vrt { grid-template-columns: 1fr; height: auto; }\n      .vrt__list { overflow: visible; padding-right: 16px; }\n      .vrt__viewer {\n        overflow: visible;\n        border-left: none;\n        border-top: 1px solid var(--prism-border);\n      }\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: 234 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VisualRegressionPanelComponent, { className: "VisualRegressionPanelComponent", filePath: "visual-regression-panel.component.ts", lineNumber: 307 }); })();
 function formatDiff(variant) {
     if (variant.diffRatio === undefined)
         return '—';

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

@@ -1 +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"}
+{"version":3,"file":"visual-regression-plugin.browser.d.ts","sourceRoot":"","sources":["../src/visual-regression-plugin.browser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAGlF;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,CAAC,EAAE,6BAA6B,GACvC,aAAa,CA6Bf"}

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

@@ -1,7 +1,4 @@
-function hasResults(component) {
-    const meta = component.meta?.showcaseConfig?.meta?.['visualRegression'];
-    return Boolean(meta?.found && meta.variants.length > 0);
-}
+import { hasResults, reviewBadge } from './panel-contributions.js';
 /**
  * Browser-safe twin of {@link visualRegressionPlugin}.
  *
@@ -19,6 +16,7 @@ export function visualRegressionPlugin(_options) {
                 icon: 'camera',
                 position: 'bottom',
                 isVisible: hasResults,
+                badge: reviewBadge,
                 loadComponent: () => import('./visual-regression-panel.component.js').then((m) => m.VisualRegressionPanelComponent),
             },
         ],

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

@@ -1 +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"}
+{"version":3,"file":"visual-regression-plugin.d.ts","sourceRoot":"","sources":["../src/visual-regression-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EACV,6BAA6B,EAE9B,MAAM,8BAA8B,CAAC;AAOtC;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,CAAC,EAAE,6BAA6B,GACtC,aAAa,CA2Ef"}

package/dist/visual-regression-plugin.js

@@ -1,10 +1,7 @@
+import { hasResults, reviewBadge } from './panel-contributions.js';
 import { resolveVrtThresholds } from './thresholds.js';
+import { statSummary, summarize } from './vrt-summarize.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.
  *
@@ -21,10 +18,15 @@ export function visualRegressionPlugin(options) {
         async onComponentScanned(component) {
             const { readVariantsForComponent } = await import('./report-reader.js');
             const variants = readVariantsForComponent(reportPath, component.className);
+            // The headline is derived here rather than in the component head so the
+            // core app never has to reimplement this plugin's status semantics.
             const meta = {
                 found: variants.length > 0,
                 variants,
                 assetBaseUrl,
+                ...(variants.length
+                    ? { summary: statSummary(summarize(variants)) }
+                    : {}),
             };
             return {
                 ...component,
@@ -52,6 +54,7 @@ export function visualRegressionPlugin(options) {
                 icon: 'camera',
                 position: 'bottom',
                 isVisible: hasResults,
+                badge: reviewBadge,
                 loadComponent: () => import('./visual-regression-panel.component.js').then((m) => m.VisualRegressionPanelComponent),
             },
         ],

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

@@ -83,10 +83,23 @@ export interface VisualRegressionPluginOptions {
     thresholds?: number | Partial<VrtThresholds>;
 }
 /** Shape stored under `showcaseConfig.meta.visualRegression`. */
+/** A component's visual regression standing, as the component head shows it. */
+export interface VrtStat {
+    /** The worst diff among compared variants, or `—` when none was. */
+    value: string;
+    variant: 'ok' | 'warn' | 'danger';
+}
 export interface VrtComponentMeta {
     found: boolean;
     variants: VrtVariantResult[];
     assetBaseUrl: string;
+    /**
+     * Pre-derived headline for the component head, written by the build-time
+     * hook. Optional because a report written before this field existed — or a
+     * browser-only plugin setup, which runs no build-time hooks — simply has
+     * none, and the stat is then left out rather than guessed at.
+     */
+    summary?: VrtStat;
 }
 /** Shape stored under `manifest.meta.visualRegression`. */
 export interface VrtManifestMeta {

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

@@ -1 +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"}
+{"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,gFAAgF;AAChF,MAAM,WAAW,OAAO;IACtB,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;CACnC;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;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/vrt-summarize.d.ts

@@ -1,4 +1,4 @@
-import type { VrtStatus, VrtVariantResult } from './visual-regression.types.js';
+import type { VrtStat, VrtStatus, VrtVariantResult } from './visual-regression.types.js';
 /**
  * Colour role of a status, resolved to a theme token by the components.
  *
@@ -48,4 +48,67 @@ export declare function summarySegments(summary: VrtSummary): VrtSegment[];
  * that rounds to zero is shown as `<0.01%`, never as `0%`.
  */
 export declare function formatPercent(ratio: number): string;
+/** The three buckets the variant list is grouped into, in display order. */
+export type VrtGroupKey = 'review' | 'unchanged' | 'excluded';
+export interface VrtGroup<T> {
+    key: VrtGroupKey;
+    label: string;
+    count: number;
+    /**
+     * Whether the group may be collapsed. `review` never can: it is the reason
+     * the panel exists, and a list whose only interesting rows can be hidden
+     * behind a disclosure triangle is a list that gets skimmed past.
+     */
+    collapsible: boolean;
+    rows: T[];
+}
+/**
+ * The variant list split into what needs a decision and what does not.
+ *
+ * `new` sits in `review` beside `changed`, which is the one placement worth
+ * explaining. A variant with no baseline is explicitly *not* a failure — the
+ * report contract says so and the row keeps its own neutral tone — but it is
+ * the one state that cannot resolve itself: somebody has to accept a baseline.
+ * `excluded` is the mirror image and gets its own group rather than being
+ * folded into `unchanged`: both are "not your problem", but "compared and
+ * matched" and "never captured" are different claims and a reviewer counting
+ * coverage needs to tell them apart.
+ *
+ * Empty groups are dropped instead of rendered at zero. The summary bar above
+ * the list has the same rule, and for the same reason — a zero-count header is
+ * a line of chrome asserting a colour nothing on screen has.
+ *
+ * Generic over the row rather than taking `VrtVariantResult`: the panel groups
+ * its own view models, which already carry the label and the formatted diff,
+ * and threading those back through a variant-shaped API would mean building
+ * them twice.
+ */
+export declare function groupRows<T extends {
+    status: VrtStatus;
+}>(rows: readonly T[]): VrtGroup<T>[];
+/**
+ * Which groups start open.
+ *
+ * Nothing, while something needs review — the point of the grouping is that
+ * the fourteen unchanged variants stop competing with the one that changed.
+ * When there is no review group the rule inverts and the first group opens,
+ * because two collapsed headers and no rows reads as a panel that failed to
+ * load rather than as a clean run.
+ */
+export declare function defaultExpandedGroups<T>(groups: readonly VrtGroup<T>[]): VrtGroupKey[];
+/**
+ * The headline figure and its colour for one component.
+ *
+ * The colour comes from the *statuses*, not from the percentage, and that is
+ * deliberate: {@link DEFAULT_VRT_THRESHOLDS} already says a run is only green
+ * at a perfect score, so a "small enough to stay amber" diff would contradict
+ * the badge sitting in the same header. Magnitude is what the value carries.
+ * Amber is reserved for the variants that could not be measured at all —
+ * resized and new — which are neither a regression nor a clean pass.
+ *
+ * Computed at build time and stored in the component's meta, so the component
+ * head can read two primitives instead of reimplementing this plugin's status
+ * semantics in the core app.
+ */
+export declare function statSummary(summary: VrtSummary): VrtStat;
 //# sourceMappingURL=vrt-summarize.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"vrt-summarize.d.ts","sourceRoot":"","sources":["../src/vrt-summarize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhF;;;;;;GAMG;AACH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1E,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMlD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,CAMlD,CAAC;AAWF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAClC,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,SAAS,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf;AAED,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,QAAQ,EAAE,SAAS,gBAAgB,EAAE,GAAG,UAAU,CAyB3E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,UAAU,GAAG,UAAU,EAAE,CASjE;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKnD"}
+{"version":3,"file":"vrt-summarize.d.ts","sourceRoot":"","sources":["../src/vrt-summarize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,OAAO,EACP,SAAS,EACT,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;AAEtC;;;;;;GAMG;AACH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1E,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMlD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,CAMlD,CAAC;AAWF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAClC,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,SAAS,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf;AAED,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,QAAQ,EAAE,SAAS,gBAAgB,EAAE,GAAG,UAAU,CAyB3E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,UAAU,GAAG,UAAU,EAAE,CASjE;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKnD;AAED,4EAA4E;AAC5E,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,QAAQ,CAAC,CAAC;IACzB,GAAG,EAAE,WAAW,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;CACX;AAkBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS;IAAE,MAAM,EAAE,SAAS,CAAA;CAAE,EACvD,IAAI,EAAE,SAAS,CAAC,EAAE,GACjB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAWf;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EACrC,MAAM,EAAE,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,GAC7B,WAAW,EAAE,CAGf;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,UAAU,GAAG,OAAO,CAWxD"}

package/dist/vrt-summarize.js

@@ -80,3 +80,86 @@ export function formatPercent(ratio) {
         return '<0.01%';
     return `${pct.toFixed(2)}%`;
 }
+const GROUP_OF = {
+    changed: 'review',
+    'size-mismatch': 'review',
+    new: 'review',
+    unchanged: 'unchanged',
+    excluded: 'excluded',
+};
+const GROUP_LABEL = {
+    review: 'Needs review',
+    unchanged: 'Unchanged',
+    excluded: 'Excluded',
+};
+const GROUP_ORDER = ['review', 'unchanged', 'excluded'];
+/**
+ * The variant list split into what needs a decision and what does not.
+ *
+ * `new` sits in `review` beside `changed`, which is the one placement worth
+ * explaining. A variant with no baseline is explicitly *not* a failure — the
+ * report contract says so and the row keeps its own neutral tone — but it is
+ * the one state that cannot resolve itself: somebody has to accept a baseline.
+ * `excluded` is the mirror image and gets its own group rather than being
+ * folded into `unchanged`: both are "not your problem", but "compared and
+ * matched" and "never captured" are different claims and a reviewer counting
+ * coverage needs to tell them apart.
+ *
+ * Empty groups are dropped instead of rendered at zero. The summary bar above
+ * the list has the same rule, and for the same reason — a zero-count header is
+ * a line of chrome asserting a colour nothing on screen has.
+ *
+ * Generic over the row rather than taking `VrtVariantResult`: the panel groups
+ * its own view models, which already carry the label and the formatted diff,
+ * and threading those back through a variant-shaped API would mean building
+ * them twice.
+ */
+export function groupRows(rows) {
+    return GROUP_ORDER.map((key) => ({
+        key,
+        label: GROUP_LABEL[key],
+        collapsible: key !== 'review',
+        rows: STATUS_ORDER.filter((status) => GROUP_OF[status] === key).flatMap((status) => rows.filter((row) => row.status === status)),
+    }))
+        .filter((group) => group.rows.length > 0)
+        .map((group) => ({ ...group, count: group.rows.length }));
+}
+/**
+ * Which groups start open.
+ *
+ * Nothing, while something needs review — the point of the grouping is that
+ * the fourteen unchanged variants stop competing with the one that changed.
+ * When there is no review group the rule inverts and the first group opens,
+ * because two collapsed headers and no rows reads as a panel that failed to
+ * load rather than as a clean run.
+ */
+export function defaultExpandedGroups(groups) {
+    if (groups.some((group) => group.key === 'review'))
+        return [];
+    return groups.length ? [groups[0].key] : [];
+}
+/**
+ * The headline figure and its colour for one component.
+ *
+ * The colour comes from the *statuses*, not from the percentage, and that is
+ * deliberate: {@link DEFAULT_VRT_THRESHOLDS} already says a run is only green
+ * at a perfect score, so a "small enough to stay amber" diff would contradict
+ * the badge sitting in the same header. Magnitude is what the value carries.
+ * Amber is reserved for the variants that could not be measured at all —
+ * resized and new — which are neither a regression nor a clean pass.
+ *
+ * Computed at build time and stored in the component's meta, so the component
+ * head can read two primitives instead of reimplementing this plugin's status
+ * semantics in the core app.
+ */
+export function statSummary(summary) {
+    const { counts, maxDiffRatio } = summary;
+    return {
+        value: maxDiffRatio === null ? '—' : formatPercent(maxDiffRatio),
+        variant: counts.changed > 0
+            ? 'danger'
+            : counts['size-mismatch'] > 0 || counts.new > 0
+                ? 'warn'
+                : 'ok',
+    };
+}

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

@@ -12,15 +12,16 @@ import * as i0 from "@angular/core";
  *
  * The cost of that is precision, so the split is deliberate: the bar carries
  * the *composition* (which statuses, in what proportion) where a glance is
- * enough, and the line under it carries the two figures a reviewer acts on.
- * Exact per-status counts live one place over, in the list itself, where every
- * row already states its own status — repeating them here would be the tile
- * strip again, in a narrower column.
+ * enough, and the line under it carries the one figure a reviewer acts on.
+ * Exact per-status counts live one place over, in the grouped list below,
+ * whose headers already read "Needs review · 1" and "Unchanged · 14" —
+ * restating them here would be the tile strip again, in a narrower column.
+ * The line therefore disappears entirely when nothing could be compared,
+ * rather than printing a dash under a bar that already says so.
  */
 export declare class VrtSummaryComponent {
     readonly summary: import("@angular/core").InputSignal<VrtSummary>;
     protected readonly segments: import("@angular/core").Signal<import("./vrt-summarize.js").VrtSegment[]>;
-    protected readonly changed: import("@angular/core").Signal<number>;
     protected readonly maxDiff: import("@angular/core").Signal<{
         value: string;
         tone: string;

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

@@ -1 +1 @@
-{"version":3,"file":"vrt-summary.component.d.ts","sourceRoot":"","sources":["../src/vrt-summary.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;;AAE5B;;;;;;;;;;;;;;;;GAgBG;AACH,qBA2Ea,mBAAmB;IAC9B,QAAQ,CAAC,OAAO,kDAAgC;IAEhD,SAAS,CAAC,QAAQ,CAAC,QAAQ,4EAAmD;IAE9E,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAAiD;IAE3E,SAAS,CAAC,QAAQ,CAAC,OAAO;;;cAOvB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAMzB;yCA9BS,mBAAmB;2CAAnB,mBAAmB;CA+B/B"}
+{"version":3,"file":"vrt-summary.component.d.ts","sourceRoot":"","sources":["../src/vrt-summary.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;;AAE5B;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAqEa,mBAAmB;IAC9B,QAAQ,CAAC,OAAO,kDAAgC;IAEhD,SAAS,CAAC,QAAQ,CAAC,QAAQ,4EAAmD;IAE9E,SAAS,CAAC,QAAQ,CAAC,OAAO;;;cAOvB;IAEH;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,QAAQ,yCAMzB;yCA5BS,mBAAmB;2CAAnB,mBAAmB;CA6B/B"}

package/dist/vrt-summary.component.js

@@ -3,22 +3,22 @@ import { formatPercent, summarySegments, } from './vrt-summarize.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.key;
 function VrtSummaryComponent_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElement(0, "div", 5);
+    i0.ɵɵdomElement(0, "div", 4);
 } if (rf & 2) {
     const segment_r1 = ctx.$implicit;
     i0.ɵɵstyleProp("flex-grow", segment_r1.count);
     i0.ɵɵdomProperty("title", segment_r1.label + ": " + segment_r1.count);
     i0.ɵɵattribute("data-tone", segment_r1.tone);
 } }
-function VrtSummaryComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 4);
-    i0.ɵɵtext(1, " max ");
-    i0.ɵɵdomElementStart(2, "b");
-    i0.ɵɵtext(3);
-    i0.ɵɵdomElementEnd()();
+function VrtSummaryComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 3)(1, "span", 5);
+    i0.ɵɵtext(2, " max ");
+    i0.ɵɵdomElementStart(3, "b");
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd()()();
 } if (rf & 2) {
     const max_r2 = ctx;
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(3);
     i0.ɵɵattribute("data-tone", max_r2.tone);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(max_r2.value);
@@ -35,18 +35,18 @@ function VrtSummaryComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
  *
  * The cost of that is precision, so the split is deliberate: the bar carries
  * the *composition* (which statuses, in what proportion) where a glance is
- * enough, and the line under it carries the two figures a reviewer acts on.
- * Exact per-status counts live one place over, in the list itself, where every
- * row already states its own status — repeating them here would be the tile
- * strip again, in a narrower column.
+ * enough, and the line under it carries the one figure a reviewer acts on.
+ * Exact per-status counts live one place over, in the grouped list below,
+ * whose headers already read "Needs review · 1" and "Unchanged · 14" —
+ * restating them here would be the tile strip again, in a narrower column.
+ * The line therefore disappears entirely when nothing could be compared,
+ * rather than printing a dash under a bar that already says so.
  */
 export class VrtSummaryComponent {
     summary = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
     segments = computed(() => summarySegments(this.summary()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
-    changed = computed(() => this.summary().counts.changed, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "changed" }] : /* istanbul ignore next */ []));
     maxDiff = computed(() => {
         const ratio = this.summary().maxDiffRatio;
         if (ratio === null)
@@ -72,31 +72,20 @@ export class VrtSummaryComponent {
             .join(', '), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "barLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = function VrtSummaryComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VrtSummaryComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VrtSummaryComponent, selectors: [["prism-vrt-summary"]], inputs: { summary: [1, "summary"] }, decls: 10, vars: 5, consts: [[1, "vrt-sum"], ["role", "img", 1, "vrt-sum__bar"], [1, "vrt-sum__seg", 3, "flex-grow", "title"], [1, "vrt-sum__line"], [1, "vrt-sum__stat"], [1, "vrt-sum__seg", 3, "title"]], template: function VrtSummaryComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VrtSummaryComponent, selectors: [["prism-vrt-summary"]], inputs: { summary: [1, "summary"] }, decls: 5, vars: 2, consts: [[1, "vrt-sum"], ["role", "img", 1, "vrt-sum__bar"], [1, "vrt-sum__seg", 3, "flex-grow", "title"], [1, "vrt-sum__line"], [1, "vrt-sum__seg", 3, "title"], [1, "vrt-sum__stat"]], template: function VrtSummaryComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵrepeaterCreate(2, VrtSummaryComponent_For_3_Template, 1, 4, "div", 2, _forTrack0);
             i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(4, "div", 3)(5, "span", 4)(6, "b");
-            i0.ɵɵtext(7);
+            i0.ɵɵconditionalCreate(4, VrtSummaryComponent_Conditional_4_Template, 5, 2, "div", 3);
             i0.ɵɵdomElementEnd();
-            i0.ɵɵtext(8);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(9, VrtSummaryComponent_Conditional_9_Template, 4, 2, "span", 4);
-            i0.ɵɵdomElementEnd()();
         } if (rf & 2) {
-            let tmp_5_0;
+            let tmp_2_0;
             i0.ɵɵadvance();
             i0.ɵɵattribute("aria-label", ctx.barLabel());
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.segments());
-            i0.ɵɵadvance(4);
-            i0.ɵɵattribute("data-tone", ctx.changed() > 0 ? "danger" : "success");
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(ctx.changed());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" of ", ctx.summary().total, " changed ");
-            i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_5_0 = ctx.maxDiff()) ? 9 : -1, tmp_5_0);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional((tmp_2_0 = ctx.maxDiff()) ? 4 : -1, tmp_2_0);
         } }, styles: ["[_nghost-%COMP%] { display: block; }\n\n    .vrt-sum__bar[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 1px;\n      height: 6px;\n      border-radius: 3px;\n      overflow: hidden;\n      background: var(--prism-input-bg);\n    }\n    \n\n\n    .vrt-sum__seg[_ngcontent-%COMP%] {\n      flex-basis: 0;\n      background: var(--tone-color, var(--prism-text-muted));\n      transition: flex-grow var(--dur-slow) var(--ease-default);\n    }\n\n    .vrt-sum__line[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: baseline;\n      justify-content: space-between;\n      gap: 8px;\n      margin-top: 9px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n    }\n    .vrt-sum__stat[_ngcontent-%COMP%] { white-space: nowrap; }\n    .vrt-sum__line[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      font-weight: 700;\n      color: var(--tone-color, var(--prism-text));\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); }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VrtSummaryComponent, [{
@@ -114,20 +103,14 @@ export class VrtSummaryComponent {
         }
       </div>
 
+      @if (maxDiff(); as max) {
       <div class="vrt-sum__line">
-        <span class="vrt-sum__stat">
-          <b [attr.data-tone]="changed() > 0 ? 'danger' : 'success'">{{
-            changed()
-          }}</b>
-          of {{ summary().total }} changed
-        </span>
-        @if (maxDiff(); as max) {
         <span class="vrt-sum__stat">
           max <b [attr.data-tone]="max.tone">{{ max.value }}</b>
         </span>
-        }
       </div>
+      }
     </div>
   `, styles: ["\n    :host { display: block; }\n\n    .vrt-sum__bar {\n      display: flex;\n      gap: 1px;\n      height: 6px;\n      border-radius: 3px;\n      overflow: hidden;\n      background: var(--prism-input-bg);\n    }\n    /* flex-basis 0 so a slice's width comes from its count alone \u2014 with the\n       default of auto an empty div still claims its content box and every\n       segment would render the same width. */\n    .vrt-sum__seg {\n      flex-basis: 0;\n      background: var(--tone-color, var(--prism-text-muted));\n      transition: flex-grow var(--dur-slow) var(--ease-default);\n    }\n\n    .vrt-sum__line {\n      display: flex;\n      align-items: baseline;\n      justify-content: space-between;\n      gap: 8px;\n      margin-top: 9px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n    }\n    .vrt-sum__stat { white-space: nowrap; }\n    .vrt-sum__line b {\n      font-weight: 700;\n      color: var(--tone-color, var(--prism-text));\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  "] }]
     }], null, { summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VrtSummaryComponent, { className: "VrtSummaryComponent", filePath: "vrt-summary.component.ts", lineNumber: 105 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VrtSummaryComponent, { className: "VrtSummaryComponent", filePath: "vrt-summary.component.ts", lineNumber: 101 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/plugin-visual-regression",
-  "version": "22.2.0-beta.3",
+  "version": "22.2.0-beta.4",
   "description": "Visual regression report panel for ng-prism.",
   "ng-add": {
     "save": "devDependencies"