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

package/dist/vrt-summarize.d.ts

@@ -0,0 +1,48 @@
+import type { VrtStatus, VrtVariantResult } from './visual-regression.types.js';
+/**
+ * Colour role of a status, resolved to a theme token by the components.
+ *
+ * `new` is `neutral` rather than muted on purpose: the report contract says a
+ * variant with no baseline is explicitly not a failure, and grey reads as
+ * "ignored" next to a green "unchanged".
+ */
+export type VrtTone = 'success' | 'danger' | 'warn' | 'neutral' | 'muted';
+export declare const STATUS_LABEL: Record<VrtStatus, string>;
+export declare const STATUS_TONE: Record<VrtStatus, VrtTone>;
+export interface VrtSummary {
+    total: number;
+    counts: Record<VrtStatus, number>;
+    /** Variants a runner could actually measure against a baseline. */
+    compared: number;
+    /** Largest diff among compared variants; `null` when nothing was compared. */
+    maxDiffRatio: number | null;
+}
+export interface VrtTile {
+    key: string;
+    label: string;
+    value: string;
+    /** How far the tile's bar fills, 0–1. */
+    ratio: number;
+    tone: VrtTone;
+}
+/** Counts and the worst diff, derived from the variants already in `meta`. */
+export declare function summarize(variants: readonly VrtVariantResult[]): VrtSummary;
+/**
+ * The tiles the summary strip renders.
+ *
+ * `Changed` and `Unchanged` are always present: a strip that loses a column
+ * when a run goes green would make the panel change shape with its content,
+ * and "no Changed tile" is easy to misread as "no data". Everything else
+ * appears only when it has something to report, so a library that never
+ * excludes a variant is never asked to wonder what `Excluded` means.
+ */
+export declare function summaryTiles(summary: VrtSummary): VrtTile[];
+/**
+ * A ratio as the percentage a reviewer reads.
+ *
+ * Anything above zero keeps two decimals, because the difference between
+ * "0.00%" and "a few pixels moved" is the whole point of the panel — a diff
+ * that rounds to zero is shown as `<0.01%`, never as `0%`.
+ */
+export declare function formatPercent(ratio: number): string;
+//# sourceMappingURL=vrt-summarize.d.ts.map

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

@@ -0,0 +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,OAAO;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,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;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,UAAU,GAAG,OAAO,EAAE,CAiC3D;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKnD"}

package/dist/vrt-summarize.js

@@ -0,0 +1,97 @@
+export const STATUS_LABEL = {
+    unchanged: 'Unchanged',
+    changed: 'Changed',
+    'size-mismatch': 'Resized',
+    new: 'New',
+    excluded: 'Excluded',
+};
+export const STATUS_TONE = {
+    unchanged: 'success',
+    changed: 'danger',
+    'size-mismatch': 'warn',
+    new: 'neutral',
+    excluded: 'muted',
+};
+/** Order the summary strip and any status list follow: worst news first. */
+const STATUS_ORDER = [
+    'changed',
+    'size-mismatch',
+    'unchanged',
+    'new',
+    'excluded',
+];
+/** Counts and the worst diff, derived from the variants already in `meta`. */
+export function summarize(variants) {
+    const counts = {
+        unchanged: 0,
+        changed: 0,
+        'size-mismatch': 0,
+        new: 0,
+        excluded: 0,
+    };
+    let compared = 0;
+    let maxDiffRatio = null;
+    for (const variant of variants) {
+        if (variant.status in counts)
+            counts[variant.status]++;
+        // A ratio exists only where a baseline and a capture were compared.
+        // `new` has nothing to measure against and `size-mismatch` could not be
+        // measured, so neither contributes to the worst-diff figure.
+        if (typeof variant.diffRatio === 'number') {
+            compared++;
+            maxDiffRatio = Math.max(maxDiffRatio ?? 0, variant.diffRatio);
+        }
+    }
+    return { total: variants.length, counts, compared, maxDiffRatio };
+}
+/**
+ * The tiles the summary strip renders.
+ *
+ * `Changed` and `Unchanged` are always present: a strip that loses a column
+ * when a run goes green would make the panel change shape with its content,
+ * and "no Changed tile" is easy to misread as "no data". Everything else
+ * appears only when it has something to report, so a library that never
+ * excludes a variant is never asked to wonder what `Excluded` means.
+ */
+export function summaryTiles(summary) {
+    const share = (count) => summary.total === 0 ? 0 : count / summary.total;
+    const tiles = STATUS_ORDER.filter((status) => summary.counts[status] > 0 ||
+        status === 'changed' ||
+        status === 'unchanged').map((status) => {
+        const count = summary.counts[status];
+        return {
+            key: status,
+            label: STATUS_LABEL[status],
+            value: String(count),
+            ratio: share(count),
+            // A count of zero is the absence of news, not news in that colour:
+            // "Changed 0" rendered in danger red screams the opposite of what it says.
+            tone: count === 0 ? 'muted' : STATUS_TONE[status],
+        };
+    });
+    if (summary.maxDiffRatio !== null) {
+        tiles.push({
+            key: 'max-diff',
+            label: 'Max diff',
+            value: formatPercent(summary.maxDiffRatio),
+            ratio: summary.maxDiffRatio,
+            tone: summary.maxDiffRatio > 0 ? 'danger' : 'success',
+        });
+    }
+    return tiles;
+}
+/**
+ * A ratio as the percentage a reviewer reads.
+ *
+ * Anything above zero keeps two decimals, because the difference between
+ * "0.00%" and "a few pixels moved" is the whole point of the panel — a diff
+ * that rounds to zero is shown as `<0.01%`, never as `0%`.
+ */
+export function formatPercent(ratio) {
+    const pct = ratio * 100;
+    if (pct === 0)
+        return '0%';
+    if (pct < 0.01)
+        return '<0.01%';
+    return `${pct.toFixed(2)}%`;
+}

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

@@ -0,0 +1,17 @@
+import { type VrtSummary } from './vrt-summarize.js';
+import * as i0 from "@angular/core";
+/**
+ * The strip that opens the panel.
+ *
+ * Every other ng-prism panel leads with a summary — the a11y score ring, the
+ * coverage stat row — so the visual regression panel does too, and it borrows
+ * their card, micro-label and mono-numeral treatment rather than inventing a
+ * third one.
+ */
+export declare class VrtSummaryComponent {
+    readonly summary: import("@angular/core").InputSignal<VrtSummary>;
+    protected readonly tiles: import("@angular/core").Signal<import("./vrt-summarize.js").VrtTile[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VrtSummaryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VrtSummaryComponent, "prism-vrt-summary", never, { "summary": { "alias": "summary"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=vrt-summary.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vrt-summary.component.d.ts","sourceRoot":"","sources":["../src/vrt-summary.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;;AAEnE;;;;;;;GAOG;AACH,qBAiFa,mBAAmB;IAC9B,QAAQ,CAAC,OAAO,kDAAgC;IAEhD,SAAS,CAAC,QAAQ,CAAC,KAAK,yEAAgD;yCAH7D,mBAAmB;2CAAnB,mBAAmB;CAI/B"}

package/dist/vrt-summary.component.js

@@ -0,0 +1,67 @@
+import { ChangeDetectionStrategy, Component, computed, input, } from '@angular/core';
+import { summaryTiles } from './vrt-summarize.js';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.key;
+function VrtSummaryComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 2);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 3);
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "div", 4);
+    i0.ɵɵdomElement(6, "div", 5);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const tile_r1 = ctx.$implicit;
+    i0.ɵɵattribute("data-tone", tile_r1.tone);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(tile_r1.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(tile_r1.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", tile_r1.ratio * 100, "%");
+} }
+/**
+ * The strip that opens the panel.
+ *
+ * Every other ng-prism panel leads with a summary — the a11y score ring, the
+ * coverage stat row — so the visual regression panel does too, and it borrows
+ * their card, micro-label and mono-numeral treatment rather than inventing a
+ * third one.
+ */
+export class VrtSummaryComponent {
+    summary = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    tiles = computed(() => summaryTiles(this.summary()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tiles" }] : /* 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: 3, vars: 0, consts: [[1, "vrt-sum"], [1, "vrt-sum__tile"], [1, "vrt-sum__label"], [1, "vrt-sum__value"], [1, "vrt-sum__bar"], [1, "vrt-sum__bar-fill"]], template: function VrtSummaryComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵrepeaterCreate(1, VrtSummaryComponent_For_2_Template, 7, 5, "div", 1, _forTrack0);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.tiles());
+        } }, styles: ["[_nghost-%COMP%] { display: block; }\n\n    .vrt-sum[_ngcontent-%COMP%] {\n      display: grid;\n      \n\n      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));\n      gap: 10px;\n    }\n\n    .vrt-sum__tile[_ngcontent-%COMP%] {\n      padding: 10px 12px;\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    .vrt-sum__label[_ngcontent-%COMP%] {\n      font-size: 10.5px;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 700;\n      color: var(--prism-text-ghost);\n      margin-bottom: 5px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .vrt-sum__value[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 21px;\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--tone-color, var(--prism-text));\n      line-height: 1.1;\n    }\n\n    .vrt-sum__bar[_ngcontent-%COMP%] {\n      margin-top: 8px;\n      height: 4px;\n      background: var(--prism-input-bg);\n      border-radius: 2px;\n      overflow: hidden;\n    }\n    .vrt-sum__bar-fill[_ngcontent-%COMP%] {\n      height: 100%;\n      border-radius: 2px;\n      background: var(--tone-color, var(--prism-primary));\n      transition: width var(--dur-slow) var(--ease-default);\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, [{
+        type: Component,
+        args: [{ selector: 'prism-vrt-summary', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="vrt-sum">
+      @for (tile of tiles(); track tile.key) {
+      <div class="vrt-sum__tile" [attr.data-tone]="tile.tone">
+        <div class="vrt-sum__label">{{ tile.label }}</div>
+        <div class="vrt-sum__value">{{ tile.value }}</div>
+        <div class="vrt-sum__bar">
+          <div
+            class="vrt-sum__bar-fill"
+            [style.width.%]="tile.ratio * 100"
+          ></div>
+        </div>
+      </div>
+      }
+    </div>
+  `, styles: ["\n    :host { display: block; }\n\n    .vrt-sum {\n      display: grid;\n      /* auto-fit rather than a fixed column count: the strip carries between\n         two and six tiles depending on what the run produced. */\n      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));\n      gap: 10px;\n    }\n\n    .vrt-sum__tile {\n      padding: 10px 12px;\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    .vrt-sum__label {\n      font-size: 10.5px;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 700;\n      color: var(--prism-text-ghost);\n      margin-bottom: 5px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .vrt-sum__value {\n      font-family: var(--font-mono);\n      font-size: 21px;\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--tone-color, var(--prism-text));\n      line-height: 1.1;\n    }\n\n    .vrt-sum__bar {\n      margin-top: 8px;\n      height: 4px;\n      background: var(--prism-input-bg);\n      border-radius: 2px;\n      overflow: hidden;\n    }\n    .vrt-sum__bar-fill {\n      height: 100%;\n      border-radius: 2px;\n      background: var(--tone-color, var(--prism-primary));\n      transition: width var(--dur-slow) var(--ease-default);\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: 98 }); })();

package/dist/vrt-zoom.d.ts

@@ -0,0 +1,36 @@
+/** `'fit'` scales to the stage within bounds; the numbers are exact multiples. */
+export type Zoom = 'fit' | 1 | 2 | 4;
+export declare const ZOOMS: readonly Zoom[];
+/**
+ * How far `fit` may enlarge a capture.
+ *
+ * Without a ceiling a 98px-wide button blown up to a 900px stage lands at 9×,
+ * which is a mosaic, not a comparison. Capping at the largest explicit step
+ * keeps `fit` inside the range the zoom buttons already offer.
+ */
+export declare const MAX_FIT_SCALE = 4;
+/**
+ * Tallest a capture is drawn under `fit`, in CSS pixels.
+ *
+ * Width alone is not enough of a bound: a 302×229 card stretched to a 1200px
+ * stage is 900px tall and pushes its own comparison slider off screen.
+ */
+export declare const MAX_FIT_HEIGHT = 400;
+/**
+ * Width declarations for the frame that holds a capture.
+ *
+ * The frame — not the image — carries the width, so the comparison slider and
+ * the legend below it stay exactly as wide as the image they describe.
+ *
+ * `fit` fills the frame's share of the stage, bounded on both sides:
+ * `min-width` holds the capture's natural size, because a diff read below 1:1
+ * is a diff you cannot trust, and `max-width` stops a small capture from being
+ * blown up past {@link MAX_FIT_SCALE} or taller than {@link MAX_FIT_HEIGHT}.
+ * The share itself comes from `--vrt-fit-basis`, which the stage sets to the
+ * full width, or to half of it side by side.
+ *
+ * The numeric steps are deliberately unbounded: asking for 4× means 4×, even
+ * when that overflows the stage and scrolls.
+ */
+export declare function frameWidthStyle(width: number | undefined, height: number | undefined, zoom: Zoom): Record<string, string>;
+//# sourceMappingURL=vrt-zoom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vrt-zoom.d.ts","sourceRoot":"","sources":["../src/vrt-zoom.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAErC,eAAO,MAAM,KAAK,EAAE,SAAS,IAAI,EAAqB,CAAC;AAEvD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,IAAI,EAAE,IAAI,GACT,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkBxB"}

package/dist/vrt-zoom.js

@@ -0,0 +1,48 @@
+export const ZOOMS = ['fit', 1, 2, 4];
+/**
+ * How far `fit` may enlarge a capture.
+ *
+ * Without a ceiling a 98px-wide button blown up to a 900px stage lands at 9×,
+ * which is a mosaic, not a comparison. Capping at the largest explicit step
+ * keeps `fit` inside the range the zoom buttons already offer.
+ */
+export const MAX_FIT_SCALE = 4;
+/**
+ * Tallest a capture is drawn under `fit`, in CSS pixels.
+ *
+ * Width alone is not enough of a bound: a 302×229 card stretched to a 1200px
+ * stage is 900px tall and pushes its own comparison slider off screen.
+ */
+export const MAX_FIT_HEIGHT = 400;
+/**
+ * Width declarations for the frame that holds a capture.
+ *
+ * The frame — not the image — carries the width, so the comparison slider and
+ * the legend below it stay exactly as wide as the image they describe.
+ *
+ * `fit` fills the frame's share of the stage, bounded on both sides:
+ * `min-width` holds the capture's natural size, because a diff read below 1:1
+ * is a diff you cannot trust, and `max-width` stops a small capture from being
+ * blown up past {@link MAX_FIT_SCALE} or taller than {@link MAX_FIT_HEIGHT}.
+ * The share itself comes from `--vrt-fit-basis`, which the stage sets to the
+ * full width, or to half of it side by side.
+ *
+ * The numeric steps are deliberately unbounded: asking for 4× means 4×, even
+ * when that overflows the stage and scrolls.
+ */
+export function frameWidthStyle(width, height, zoom) {
+    if (typeof width !== 'number' || !Number.isFinite(width) || width <= 0) {
+        return {};
+    }
+    if (zoom !== 'fit')
+        return { width: `${width * zoom}px` };
+    // The height budget expressed as a width, so one `max-width` enforces both.
+    const heightCap = typeof height === 'number' && Number.isFinite(height) && height > 0
+        ? width * (MAX_FIT_HEIGHT / height)
+        : Infinity;
+    return {
+        width: 'var(--vrt-fit-basis, 100%)',
+        'min-width': `${width}px`,
+        'max-width': `${Math.round(Math.min(width * MAX_FIT_SCALE, heightCap))}px`,
+    };
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ng-prism/plugin-visual-regression",
+  "version": "22.2.0-beta.1",
+  "description": "Visual regression report panel for ng-prism.",
+  "ng-add": {
+    "save": "devDependencies"
+  },
+  "schematics": "./schematics/collection.json",
+  "keywords": [
+    "@ng-prism/core",
+    "visual-regression",
+    "screenshot",
+    "testing",
+    "plugin",
+    "angular",
+    "styleguide"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/index.browser.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "schematics",
+    "!**/*.tsbuildinfo"
+  ],
+  "peerDependencies": {
+    "@angular/core": ">=20.0.0",
+    "@ng-prism/core": "^22.2.0-0"
+  },
+  "devDependencies": {
+    "@ng-prism/core": "*"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dyingangel666/ng-prism.git",
+    "directory": "packages/plugin-visual-regression"
+  },
+  "homepage": "https://dyingangel666.github.io/ng-prism/",
+  "bugs": "https://github.com/dyingangel666/ng-prism/issues"
+}

package/schematics/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Adds @ng-prism/plugin-visual-regression to the ng-prism config",
+      "factory": "../dist/schematics/ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/ng-add/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "NgPrismPluginVisualRegressionNgAdd",
+  "title": "Add @ng-prism/plugin-visual-regression",
+  "description": "Registers @ng-prism/plugin-visual-regression in ng-prism.config.ts",
+  "type": "object",
+  "properties": {
+    "configPath": {
+      "type": "string",
+      "description": "Path to ng-prism.config.ts",
+      "default": "ng-prism.config.ts"
+    }
+  },
+  "required": [],
+  "additionalProperties": false
+}