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

package/dist/vrt-compare.component.js

@@ -0,0 +1,602 @@
+import { ChangeDetectionStrategy, Component, computed, input, signal, } from '@angular/core';
+import { resolveAssetUrl } from './asset-url.js';
+import { bgChange, shotSurfaceStyle } from './vrt-bg.js';
+import { formatPercent } from './vrt-summarize.js';
+import { frameWidthStyle, ZOOMS } from './vrt-zoom.js';
+import * as i0 from "@angular/core";
+function VrtCompareComponent_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 10);
+    i0.ɵɵdomListener("click", function VrtCompareComponent_Conditional_1_For_3_Template_button_click_0_listener() { const mode_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.requestedMode.set(mode_r2)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const mode_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("vrt-cmp__mode--active", mode_r2 === ctx_r2.activeMode());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.MODE_LABEL[mode_r2], " ");
+} }
+function VrtCompareComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", ctx_r2.variant().width, "\u00D7", ctx_r2.variant().height);
+} }
+function VrtCompareComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r2.variant().diffPixels.toLocaleString(), " px");
+} }
+function VrtCompareComponent_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("data-hot", ctx_r2.variant().diffRatio > 0 ? "" : null);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.percent(ctx_r2.variant().diffRatio));
+} }
+function VrtCompareComponent_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 8);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("on ", ctx);
+} }
+function VrtCompareComponent_Conditional_1_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 12);
+    i0.ɵɵdomListener("click", function VrtCompareComponent_Conditional_1_Conditional_10_For_2_Template_button_click_0_listener() { const z_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.zoom.set(z_r5)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const z_r5 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("vrt-cmp__zoom--active", z_r5 === ctx_r2.zoom());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", z_r5 === "fit" ? "Fit" : z_r5 + "\u00D7", " ");
+} }
+function VrtCompareComponent_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 9);
+    i0.ɵɵrepeaterCreate(1, VrtCompareComponent_Conditional_1_Conditional_10_For_2_Template, 2, 3, "button", 11, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.ZOOMS);
+} }
+function VrtCompareComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 3);
+    i0.ɵɵrepeaterCreate(2, VrtCompareComponent_Conditional_1_For_3_Template, 2, 3, "button", 4, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "div", 5)(5, "span", 6);
+    i0.ɵɵconditionalCreate(6, VrtCompareComponent_Conditional_1_Conditional_6_Template, 2, 2, "span");
+    i0.ɵɵconditionalCreate(7, VrtCompareComponent_Conditional_1_Conditional_7_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(8, VrtCompareComponent_Conditional_1_Conditional_8_Template, 2, 2, "span", 7);
+    i0.ɵɵconditionalCreate(9, VrtCompareComponent_Conditional_1_Conditional_9_Template, 2, 1, "span", 8);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(10, VrtCompareComponent_Conditional_1_Conditional_10_Template, 3, 0, "div", 9);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    let tmp_5_0;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.availableModes());
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r2.variant().width && ctx_r2.variant().height ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.variant().diffPixels !== undefined ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.variant().diffRatio !== undefined ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_5_0 = ctx_r2.variant().bg) ? 9 : -1, tmp_5_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.canZoom() ? 10 : -1);
+} }
+function VrtCompareComponent_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.variant().reason, " ");
+} }
+function VrtCompareComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2)(1, "b");
+    i0.ɵɵtext(2, "Excluded from visual regression.");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span");
+    i0.ɵɵtext(4, " Nothing was captured for this variant.");
+    i0.ɵɵconditionalCreate(5, VrtCompareComponent_Conditional_2_Conditional_5_Template, 1, 1);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r2.variant().reason ? 5 : -1);
+} }
+function VrtCompareComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 13)(1, "b");
+    i0.ɵɵtext(2, "Background changed.");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span");
+    i0.ɵɵtext(4, " The baseline was captured on ");
+    i0.ɵɵdomElementStart(5, "code");
+    i0.ɵɵtext(6);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(7, ", this run on ");
+    i0.ɵɵdomElementStart(8, "code");
+    i0.ɵɵtext(9);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(10, " \u2014 the difference is the surface, not necessarily the component. Re-record the baseline. ");
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const move_r6 = ctx;
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(move_r6.from);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(move_r6.to);
+} }
+function VrtCompareComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 13)(1, "b");
+    i0.ɵɵtext(2, "Dimensions changed.");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span");
+    i0.ɵɵtext(4, "No pixel comparison was possible \u2014 compare the images directly.");
+    i0.ɵɵdomElementEnd()();
+} }
+function VrtCompareComponent_Conditional_3_Conditional_2_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 14)(1, "div", 16)(2, "div", 17);
+    i0.ɵɵdomElement(3, "img", 18);
+    i0.ɵɵdomElementStart(4, "div", 19);
+    i0.ɵɵdomElement(5, "img", 18);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElement(6, "div", 20);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(7, "input", 21);
+    i0.ɵɵdomListener("input", function VrtCompareComponent_Conditional_3_Conditional_2_Case_0_Template_input_input_7_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.wipe.set(+$event.target.value)); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "div", 22)(9, "span");
+    i0.ɵɵtext(10);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(11, "span");
+    i0.ɵɵtext(12);
+    i0.ɵɵdomElementEnd()()()();
+} if (rf & 2) {
+    const img_r8 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r2.frameStyle());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r2.currentSurface());
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("src", img_r8.left, i0.ɵɵsanitizeUrl)("alt", img_r8.leftLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("clip-path", "inset(0 0 0 " + ctx_r2.wipe() + "%)");
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("src", img_r8.right, i0.ɵɵsanitizeUrl)("alt", img_r8.rightLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("left", ctx_r2.wipe(), "%");
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("value", ctx_r2.wipe());
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(img_r8.leftLabel);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(img_r8.rightLabel);
+} }
+function VrtCompareComponent_Conditional_3_Conditional_2_Case_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 15)(1, "figure", 16)(2, "figcaption");
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "div", 23);
+    i0.ɵɵdomElement(5, "img", 18);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(6, "figure", 16)(7, "figcaption");
+    i0.ɵɵtext(8);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(9, "div", 23);
+    i0.ɵɵdomElement(10, "img", 18);
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const img_r8 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r2.frameStyle());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(img_r8.leftLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r2.baselineSurface());
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("src", img_r8.left, i0.ɵɵsanitizeUrl)("alt", img_r8.leftLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r2.frameStyle());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(img_r8.rightLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r2.currentSurface());
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("src", img_r8.right, i0.ɵɵsanitizeUrl)("alt", img_r8.rightLabel);
+} }
+function VrtCompareComponent_Conditional_3_Conditional_2_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 14)(1, "div", 16)(2, "div", 23);
+    i0.ɵɵdomElement(3, "img", 24);
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r2.frameStyle());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(ctx_r2.currentSurface());
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("src", ctx_r2.diffUrl(), i0.ɵɵsanitizeUrl);
+} }
+function VrtCompareComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, VrtCompareComponent_Conditional_3_Conditional_2_Case_0_Template, 13, 15, "div", 14)(1, VrtCompareComponent_Conditional_3_Conditional_2_Case_1_Template, 11, 14, "div", 15)(2, VrtCompareComponent_Conditional_3_Conditional_2_Case_2_Template, 4, 5, "div", 14);
+} if (rf & 2) {
+    let tmp_3_0;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional((tmp_3_0 = ctx_r2.activeMode()) === "wipe" ? 0 : tmp_3_0 === "side-by-side" ? 1 : tmp_3_0 === "diff" ? 2 : -1);
+} }
+function VrtCompareComponent_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2)(1, "b");
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(5, "div", 14)(6, "div", 16)(7, "div", 23);
+    i0.ɵɵdomElement(8, "img", 18);
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const single_r9 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(single_r9.title);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(single_r9.note);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleMap(ctx_r2.frameStyle());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(single_r9.surface);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("src", single_r9.src, i0.ɵɵsanitizeUrl)("alt", single_r9.label);
+} }
+function VrtCompareComponent_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2)(1, "b");
+    i0.ɵɵtext(2, "No images recorded.");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span");
+    i0.ɵɵtext(4, " The report has a result for this variant but no file paths. ");
+    i0.ɵɵdomElementEnd()();
+} }
+function VrtCompareComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, VrtCompareComponent_Conditional_3_Conditional_0_Template, 11, 2, "div", 13);
+    i0.ɵɵconditionalCreate(1, VrtCompareComponent_Conditional_3_Conditional_1_Template, 5, 0, "div", 13);
+    i0.ɵɵconditionalCreate(2, VrtCompareComponent_Conditional_3_Conditional_2_Template, 3, 1)(3, VrtCompareComponent_Conditional_3_Conditional_3_Template, 9, 8)(4, VrtCompareComponent_Conditional_3_Conditional_4_Template, 5, 0, "div", 2);
+} if (rf & 2) {
+    let tmp_1_0;
+    let tmp_3_0;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵconditional((tmp_1_0 = ctx_r2.bgMove()) ? 0 : -1, tmp_1_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.variant().status === "size-mismatch" ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_3_0 = ctx_r2.images()) ? 2 : (tmp_3_0 = ctx_r2.singleImage()) ? 3 : 4, tmp_3_0);
+} }
+const MODE_LABEL = {
+    wipe: 'Wipe',
+    'side-by-side': 'Side by side',
+    diff: '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 class VrtCompareComponent {
+    variant = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    assetBaseUrl = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "assetBaseUrl" }] : /* istanbul ignore next */ []));
+    requestedMode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "requestedMode" }] : /* istanbul ignore next */ []));
+    zoom = signal('fit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    wipe = signal(50, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wipe" }] : /* istanbul ignore next */ []));
+    MODE_LABEL = MODE_LABEL;
+    ZOOMS = ZOOMS;
+    baselineUrl = computed(() => resolveAssetUrl(this.assetBaseUrl(), this.variant().baselinePath), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baselineUrl" }] : /* istanbul ignore next */ []));
+    currentUrl = computed(() => resolveAssetUrl(this.assetBaseUrl(), this.variant().currentPath), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentUrl" }] : /* istanbul ignore next */ []));
+    diffUrl = computed(() => resolveAssetUrl(this.assetBaseUrl(), this.variant().diffPath), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "diffUrl" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    images = computed(() => {
+        const left = this.baselineUrl();
+        const right = this.currentUrl() ?? this.diffUrl();
+        if (!left || !right)
+            return null;
+        return {
+            left,
+            leftLabel: 'Baseline',
+            right,
+            rightLabel: this.currentUrl() ? 'Current' : 'Diff',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    currentSurface = computed(() => shotSurfaceStyle(this.variant().bg), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSurface" }] : /* istanbul ignore next */ []));
+    baselineSurface = computed(() => shotSurfaceStyle(this.variant().baselineBg ?? this.variant().bg), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baselineSurface" }] : /* istanbul ignore next */ []));
+    /** A background move between baseline and this run; see {@link bgChange}. */
+    bgMove = computed(() => bgChange(this.variant()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bgMove" }] : /* istanbul ignore next */ []));
+    singleImage = computed(() => {
+        if (this.images())
+            return null;
+        const baseline = this.baselineUrl();
+        const only = baseline ?? this.currentUrl() ?? this.diffUrl();
+        if (!only)
+            return null;
+        const isNew = this.variant().status === 'new';
+        return {
+            src: only,
+            surface: baseline ? this.baselineSurface() : this.currentSurface(),
+            label: isNew ? 'Current' : 'Recorded image',
+            title: isNew ? 'No baseline yet.' : 'Only one image recorded.',
+            note: isNew
+                ? 'Nothing to compare against — this is what the runner captured.'
+                : 'The report recorded only one image for this variant.',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "singleImage" }] : /* istanbul ignore next */ []));
+    availableModes = computed(() => {
+        if (this.variant().status === 'excluded')
+            return [];
+        if (!this.images())
+            return [];
+        // Wiping between two images of different sizes overlays pixels that do not
+        // correspond, so a resized variant leads with side-by-side. Wipe stays
+        // available — it is a poor comparison there, not a forbidden one.
+        const modes = this.variant().status === 'size-mismatch'
+            ? ['side-by-side', 'wipe']
+            : ['wipe', 'side-by-side'];
+        // Only a distinct diff mask earns its own tab; when it is already the
+        // right-hand image, a "Diff" button would just repeat the comparison.
+        if (this.diffUrl() && this.currentUrl())
+            modes.push('diff');
+        return modes;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "availableModes" }] : /* istanbul ignore next */ []));
+    activeMode = computed(() => {
+        const available = this.availableModes();
+        const requested = this.requestedMode();
+        return requested && available.includes(requested)
+            ? requested
+            : available[0] ?? 'wipe';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeMode" }] : /* istanbul ignore next */ []));
+    /** Fixed zoom steps need a natural width to multiply; `fit` does not. */
+    canZoom = computed(() => typeof this.variant().width === 'number', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canZoom" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    showToolbar = computed(() => {
+        const variant = this.variant();
+        return (this.availableModes().length > 0 ||
+            this.canZoom() ||
+            variant.diffPixels !== undefined ||
+            variant.diffRatio !== undefined);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
+    /** Width declarations for the frame; see {@link frameWidthStyle}. */
+    frameStyle = computed(() => {
+        const { width, height } = this.variant();
+        return frameWidthStyle(width, height, this.zoom());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameStyle" }] : /* istanbul ignore next */ []));
+    percent(ratio) {
+        return formatPercent(ratio);
+    }
+    static ɵfac = function VrtCompareComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VrtCompareComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VrtCompareComponent, selectors: [["prism-vrt-compare"]], inputs: { variant: [1, "variant"], assetBaseUrl: [1, "assetBaseUrl"] }, decls: 4, vars: 2, consts: [[1, "vrt-cmp"], [1, "vrt-cmp__bar"], [1, "vrt-cmp__note"], [1, "vrt-cmp__modes"], ["type", "button", 1, "vrt-cmp__mode", 3, "vrt-cmp__mode--active"], [1, "vrt-cmp__right"], [1, "vrt-cmp__meta"], [1, "vrt-cmp__ratio"], ["title", "The canvas background this capture was taken on", 1, "vrt-cmp__bg"], [1, "vrt-cmp__zooms"], ["type", "button", 1, "vrt-cmp__mode", 3, "click"], ["type", "button", 1, "vrt-cmp__zoom", 3, "vrt-cmp__zoom--active"], ["type", "button", 1, "vrt-cmp__zoom", 3, "click"], [1, "vrt-cmp__note", "vrt-cmp__note--warn"], [1, "vrt-cmp__stage"], [1, "vrt-cmp__stage", "vrt-cmp__stage--split"], [1, "vrt-cmp__frame"], [1, "vrt-cmp__shot", "vrt-cmp__wipe"], [1, "vrt-cmp__img", 3, "src", "alt"], [1, "vrt-cmp__wipe-top"], [1, "vrt-cmp__wipe-handle"], ["type", "range", "min", "0", "max", "100", "aria-label", "Comparison position", 1, "vrt-cmp__slider", 3, "input", "value"], [1, "vrt-cmp__legend"], [1, "vrt-cmp__shot"], ["alt", "Pixel diff", 1, "vrt-cmp__img", 3, "src"]], template: function VrtCompareComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, VrtCompareComponent_Conditional_1_Template, 11, 5, "div", 1);
+            i0.ɵɵconditionalCreate(2, VrtCompareComponent_Conditional_2_Template, 6, 1, "div", 2)(3, VrtCompareComponent_Conditional_3_Template, 5, 3);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showToolbar() ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.variant().status === "excluded" ? 2 : 3);
+        } }, styles: ["[_nghost-%COMP%] { display: block; min-width: 0; }\n\n    .vrt-cmp[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 14px 16px;\n      min-width: 0;\n    }\n\n    .vrt-cmp__bar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 16px;\n      flex-wrap: wrap;\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    .vrt-cmp__right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding-bottom: 7px;\n    }\n\n    \n\n    .vrt-cmp__modes[_ngcontent-%COMP%] { display: flex; gap: 2px; }\n\n    .vrt-cmp__mode[_ngcontent-%COMP%] {\n      position: relative;\n      padding: 6px 11px 8px;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      transition: color var(--dur-fast);\n    }\n    .vrt-cmp__mode[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .vrt-cmp__mode--active[_ngcontent-%COMP%] { color: var(--prism-text); }\n    .vrt-cmp__mode--active[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 6px;\n      right: 6px;\n      bottom: -1px;\n      height: 2px;\n      border-radius: 1px;\n      background: var(--prism-primary);\n    }\n\n    .vrt-cmp__meta[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n    }\n    .vrt-cmp__meta[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%]    + span[_ngcontent-%COMP%]::before {\n      content: '\u00B7';\n      margin-right: 8px;\n      color: var(--prism-text-ghost);\n    }\n    .vrt-cmp__ratio[_ngcontent-%COMP%] { color: var(--prism-success); }\n    .vrt-cmp__ratio[data-hot][_ngcontent-%COMP%] { color: var(--prism-danger); }\n\n    .vrt-cmp__zooms[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 1px;\n      padding: 2px;\n      background: var(--prism-input-bg);\n      border-radius: var(--radius-md);\n    }\n    .vrt-cmp__zoom[_ngcontent-%COMP%] {\n      padding: 3px 8px;\n      border: none;\n      background: none;\n      border-radius: var(--radius-sm);\n      cursor: pointer;\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      transition: color var(--dur-fast), background var(--dur-fast);\n    }\n    .vrt-cmp__zoom[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .vrt-cmp__zoom--active[_ngcontent-%COMP%] {\n      background: var(--prism-bg-elevated);\n      color: var(--prism-text);\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);\n    }\n\n    .vrt-cmp__stage[_ngcontent-%COMP%] {\n      display: flex;\n      \n\n      overflow: auto;\n      padding: 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-lg);\n      min-width: 0;\n      \n\n\n\n\n      --vrt-gap: 16px;\n      --vrt-fit-basis: 100%;\n    }\n    .vrt-cmp__stage--split[_ngcontent-%COMP%] {\n      gap: var(--vrt-gap);\n      --vrt-fit-basis: calc((100% - var(--vrt-gap)) / 2);\n    }\n\n    .vrt-cmp__frame[_ngcontent-%COMP%] {\n      margin: 0 auto;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex: none;\n    }\n    .vrt-cmp__stage--split[_ngcontent-%COMP%]   .vrt-cmp__frame[_ngcontent-%COMP%] { margin: 0; }\n\n    figure.vrt-cmp__frame[_ngcontent-%COMP%]   figcaption[_ngcontent-%COMP%] {\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n    }\n\n    \n    .vrt-cmp__shot[_ngcontent-%COMP%] {\n      position: relative;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      overflow: hidden;\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 12px 12px;\n      background-position: 0 0, 0 6px, 6px -6px, -6px 0;\n    }\n\n    .vrt-cmp__img[_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      height: auto;\n      \n      image-rendering: pixelated;\n    }\n\n    .vrt-cmp__wipe-top[_ngcontent-%COMP%] { position: absolute; inset: 0; }\n    .vrt-cmp__wipe-handle[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: 2px;\n      margin-left: -1px;\n      background: var(--prism-primary);\n      box-shadow: 0 0 0 1px color-mix(in srgb, var(--prism-void) 45%, transparent);\n      pointer-events: none;\n    }\n\n    .vrt-cmp__slider[_ngcontent-%COMP%] {\n      width: 100%;\n      margin: 0;\n      appearance: none;\n      background: none;\n      cursor: ew-resize;\n    }\n    .vrt-cmp__slider[_ngcontent-%COMP%]::-webkit-slider-runnable-track {\n      height: 4px;\n      border-radius: 2px;\n      background: var(--prism-input-bg);\n    }\n    .vrt-cmp__slider[_ngcontent-%COMP%]::-moz-range-track {\n      height: 4px;\n      border-radius: 2px;\n      background: var(--prism-input-bg);\n    }\n    .vrt-cmp__slider[_ngcontent-%COMP%]::-webkit-slider-thumb {\n      appearance: none;\n      width: 13px;\n      height: 13px;\n      margin-top: -4.5px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      border: 2px solid var(--prism-bg-elevated);\n      box-shadow: 0 0 0 1px var(--prism-border-strong);\n    }\n    .vrt-cmp__slider[_ngcontent-%COMP%]::-moz-range-thumb {\n      width: 13px;\n      height: 13px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      border: 2px solid var(--prism-bg-elevated);\n      box-shadow: 0 0 0 1px var(--prism-border-strong);\n    }\n\n    .vrt-cmp__legend[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n    }\n\n    .vrt-cmp__note[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n      padding: 10px 12px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-left: 3px solid var(--prism-text-muted);\n      border-radius: var(--radius-md);\n      font-size: var(--fs-md);\n    }\n    .vrt-cmp__note[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { font-weight: 600; color: var(--prism-text); }\n    .vrt-cmp__note[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { color: var(--prism-text-muted); }\n    .vrt-cmp__note--warn[_ngcontent-%COMP%] { border-left-color: var(--prism-warn); }\n    \n\n    .vrt-cmp__note[_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    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VrtCompareComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-vrt-compare', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="vrt-cmp">
+      @if (showToolbar()) {
+      <div class="vrt-cmp__bar">
+        <div class="vrt-cmp__modes">
+          @for (mode of availableModes(); track mode) {
+          <button
+            type="button"
+            class="vrt-cmp__mode"
+            [class.vrt-cmp__mode--active]="mode === activeMode()"
+            (click)="requestedMode.set(mode)"
+          >
+            {{ MODE_LABEL[mode] }}
+          </button>
+          }
+        </div>
+
+        <div class="vrt-cmp__right">
+          <span class="vrt-cmp__meta">
+            @if (variant().width && variant().height) {
+            <span>{{ variant().width }}×{{ variant().height }}</span>
+            } @if (variant().diffPixels !== undefined) {
+            <span>{{ variant().diffPixels!.toLocaleString() }} px</span>
+            } @if (variant().diffRatio !== undefined) {
+            <span
+              class="vrt-cmp__ratio"
+              [attr.data-hot]="variant().diffRatio! > 0 ? '' : null"
+              >{{ percent(variant().diffRatio!) }}</span
+            >
+            } @if (variant().bg; as bg) {
+            <span
+              class="vrt-cmp__bg"
+              title="The canvas background this capture was taken on"
+              >on {{ bg }}</span
+            >
+            }
+          </span>
+
+          @if (canZoom()) {
+          <div class="vrt-cmp__zooms">
+            @for (z of ZOOMS; track z) {
+            <button
+              type="button"
+              class="vrt-cmp__zoom"
+              [class.vrt-cmp__zoom--active]="z === zoom()"
+              (click)="zoom.set(z)"
+            >
+              {{ z === 'fit' ? 'Fit' : z + '×' }}
+            </button>
+            }
+          </div>
+          }
+        </div>
+      </div>
+      } @if (variant().status === 'excluded') {
+      <div class="vrt-cmp__note">
+        <b>Excluded from visual regression.</b>
+        <span>
+          Nothing was captured for this variant.@if (variant().reason) {
+          {{ variant().reason }} }
+        </span>
+      </div>
+      } @else { @if (bgMove(); as move) {
+      <div class="vrt-cmp__note vrt-cmp__note--warn">
+        <b>Background changed.</b>
+        <span>
+          The baseline was captured on <code>{{ move.from }}</code
+          >, this run on <code>{{ move.to }}</code> — the difference is the
+          surface, not necessarily the component. Re-record the baseline.
+        </span>
+      </div>
+      } @if (variant().status === 'size-mismatch') {
+      <div class="vrt-cmp__note vrt-cmp__note--warn">
+        <b>Dimensions changed.</b>
+        <span
+          >No pixel comparison was possible — compare the images directly.</span
+        >
+      </div>
+      } @if (images(); as img) { @switch (activeMode()) { @case ('wipe') {
+      <div class="vrt-cmp__stage">
+        <div class="vrt-cmp__frame" [style]="frameStyle()">
+          <div class="vrt-cmp__shot vrt-cmp__wipe" [style]="currentSurface()">
+            <img class="vrt-cmp__img" [src]="img.left" [alt]="img.leftLabel" />
+            <div
+              class="vrt-cmp__wipe-top"
+              [style.clip-path]="'inset(0 0 0 ' + wipe() + '%)'"
+            >
+              <img
+                class="vrt-cmp__img"
+                [src]="img.right"
+                [alt]="img.rightLabel"
+              />
+            </div>
+            <div class="vrt-cmp__wipe-handle" [style.left.%]="wipe()"></div>
+          </div>
+          <!-- Inside the frame, so the slider travel always matches the image
+               it controls, at any zoom. -->
+          <input
+            class="vrt-cmp__slider"
+            type="range"
+            min="0"
+            max="100"
+            aria-label="Comparison position"
+            [value]="wipe()"
+            (input)="wipe.set(+$any($event.target).value)"
+          />
+          <div class="vrt-cmp__legend">
+            <span>{{ img.leftLabel }}</span>
+            <span>{{ img.rightLabel }}</span>
+          </div>
+        </div>
+      </div>
+      } @case ('side-by-side') {
+      <div class="vrt-cmp__stage vrt-cmp__stage--split">
+        <figure class="vrt-cmp__frame" [style]="frameStyle()">
+          <figcaption>{{ img.leftLabel }}</figcaption>
+          <div class="vrt-cmp__shot" [style]="baselineSurface()">
+            <img class="vrt-cmp__img" [src]="img.left" [alt]="img.leftLabel" />
+          </div>
+        </figure>
+        <figure class="vrt-cmp__frame" [style]="frameStyle()">
+          <figcaption>{{ img.rightLabel }}</figcaption>
+          <div class="vrt-cmp__shot" [style]="currentSurface()">
+            <img
+              class="vrt-cmp__img"
+              [src]="img.right"
+              [alt]="img.rightLabel"
+            />
+          </div>
+        </figure>
+      </div>
+      } @case ('diff') {
+      <div class="vrt-cmp__stage">
+        <div class="vrt-cmp__frame" [style]="frameStyle()">
+          <div class="vrt-cmp__shot" [style]="currentSurface()">
+            <img class="vrt-cmp__img" [src]="diffUrl()" alt="Pixel diff" />
+          </div>
+        </div>
+      </div>
+      } } } @else if (singleImage(); as single) {
+      <div class="vrt-cmp__note">
+        <b>{{ single.title }}</b>
+        <span>{{ single.note }}</span>
+      </div>
+      <div class="vrt-cmp__stage">
+        <div class="vrt-cmp__frame" [style]="frameStyle()">
+          <div class="vrt-cmp__shot" [style]="single.surface">
+            <img class="vrt-cmp__img" [src]="single.src" [alt]="single.label" />
+          </div>
+        </div>
+      </div>
+      } @else {
+      <div class="vrt-cmp__note">
+        <b>No images recorded.</b>
+        <span>
+          The report has a result for this variant but no file paths.
+        </span>
+      </div>
+      } }
+    </div>
+  `, styles: ["\n    :host { display: block; min-width: 0; }\n\n    .vrt-cmp {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 14px 16px;\n      min-width: 0;\n    }\n\n    .vrt-cmp__bar {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 16px;\n      flex-wrap: wrap;\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    .vrt-cmp__right {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding-bottom: 7px;\n    }\n\n    /* Mode switching is the same act as the a11y panel's sub-tabs, so it gets\n       the same underline treatment rather than a third kind of button. */\n    .vrt-cmp__modes { display: flex; gap: 2px; }\n\n    .vrt-cmp__mode {\n      position: relative;\n      padding: 6px 11px 8px;\n      background: none;\n      border: none;\n      cursor: pointer;\n      font-family: var(--font-sans);\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      transition: color var(--dur-fast);\n    }\n    .vrt-cmp__mode:hover { color: var(--prism-text-2); }\n    .vrt-cmp__mode--active { color: var(--prism-text); }\n    .vrt-cmp__mode--active::after {\n      content: '';\n      position: absolute;\n      left: 6px;\n      right: 6px;\n      bottom: -1px;\n      height: 2px;\n      border-radius: 1px;\n      background: var(--prism-primary);\n    }\n\n    .vrt-cmp__meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n    }\n    .vrt-cmp__meta > span + span::before {\n      content: '\u00B7';\n      margin-right: 8px;\n      color: var(--prism-text-ghost);\n    }\n    .vrt-cmp__ratio { color: var(--prism-success); }\n    .vrt-cmp__ratio[data-hot] { color: var(--prism-danger); }\n\n    .vrt-cmp__zooms {\n      display: flex;\n      gap: 1px;\n      padding: 2px;\n      background: var(--prism-input-bg);\n      border-radius: var(--radius-md);\n    }\n    .vrt-cmp__zoom {\n      padding: 3px 8px;\n      border: none;\n      background: none;\n      border-radius: var(--radius-sm);\n      cursor: pointer;\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n      transition: color var(--dur-fast), background var(--dur-fast);\n    }\n    .vrt-cmp__zoom:hover { color: var(--prism-text-2); }\n    .vrt-cmp__zoom--active {\n      background: var(--prism-bg-elevated);\n      color: var(--prism-text);\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);\n    }\n\n    .vrt-cmp__stage {\n      display: flex;\n      /* overflow-safe centring: justify-content would clip the left edge of an\n         image wider than the stage, margin auto scrolls to it instead. */\n      overflow: auto;\n      padding: 14px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-lg);\n      min-width: 0;\n      /* How wide one frame may grow under the fit zoom. Side by side there are\n         two of them, so each gets half the stage minus the gap. This is an\n         inherited custom property rather than flex-grow, because a growing\n         flex item ignores its own width -- which is exactly what the explicit\n         zoom steps set. */\n      --vrt-gap: 16px;\n      --vrt-fit-basis: 100%;\n    }\n    .vrt-cmp__stage--split {\n      gap: var(--vrt-gap);\n      --vrt-fit-basis: calc((100% - var(--vrt-gap)) / 2);\n    }\n\n    .vrt-cmp__frame {\n      margin: 0 auto;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex: none;\n    }\n    .vrt-cmp__stage--split .vrt-cmp__frame { margin: 0; }\n\n    figure.vrt-cmp__frame figcaption {\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n    }\n\n    /* A checkerboard makes transparent regions of a PNG legible. */\n    .vrt-cmp__shot {\n      position: relative;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      overflow: hidden;\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 12px 12px;\n      background-position: 0 0, 0 6px, 6px -6px, -6px 0;\n    }\n\n    .vrt-cmp__img {\n      display: block;\n      width: 100%;\n      height: auto;\n      /* Zooming a diff is only useful if the pixels stay pixels. */\n      image-rendering: pixelated;\n    }\n\n    .vrt-cmp__wipe-top { position: absolute; inset: 0; }\n    .vrt-cmp__wipe-handle {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: 2px;\n      margin-left: -1px;\n      background: var(--prism-primary);\n      box-shadow: 0 0 0 1px color-mix(in srgb, var(--prism-void) 45%, transparent);\n      pointer-events: none;\n    }\n\n    .vrt-cmp__slider {\n      width: 100%;\n      margin: 0;\n      appearance: none;\n      background: none;\n      cursor: ew-resize;\n    }\n    .vrt-cmp__slider::-webkit-slider-runnable-track {\n      height: 4px;\n      border-radius: 2px;\n      background: var(--prism-input-bg);\n    }\n    .vrt-cmp__slider::-moz-range-track {\n      height: 4px;\n      border-radius: 2px;\n      background: var(--prism-input-bg);\n    }\n    .vrt-cmp__slider::-webkit-slider-thumb {\n      appearance: none;\n      width: 13px;\n      height: 13px;\n      margin-top: -4.5px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      border: 2px solid var(--prism-bg-elevated);\n      box-shadow: 0 0 0 1px var(--prism-border-strong);\n    }\n    .vrt-cmp__slider::-moz-range-thumb {\n      width: 13px;\n      height: 13px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      border: 2px solid var(--prism-bg-elevated);\n      box-shadow: 0 0 0 1px var(--prism-border-strong);\n    }\n\n    .vrt-cmp__legend {\n      display: flex;\n      justify-content: space-between;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-muted);\n    }\n\n    .vrt-cmp__note {\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n      padding: 10px 12px;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-left: 3px solid var(--prism-text-muted);\n      border-radius: var(--radius-md);\n      font-size: var(--fs-md);\n    }\n    .vrt-cmp__note b { font-weight: 600; color: var(--prism-text); }\n    .vrt-cmp__note span { color: var(--prism-text-muted); }\n    .vrt-cmp__note--warn { border-left-color: var(--prism-warn); }\n    /* Matches the panel shell's own inline code, so a background name reads\n       the same wherever it appears. */\n    .vrt-cmp__note 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  "] }]
+    }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: true }] }], assetBaseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "assetBaseUrl", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VrtCompareComponent, { className: "VrtCompareComponent", filePath: "vrt-compare.component.ts", lineNumber: 430 }); })();