storybook-addon-vis 0.19.4 → 1.0.0

package/dist/chunk-O5DYZDLL.js

@@ -0,0 +1,37 @@
+import { expect } from '@storybook/test';
+import { success, matchImageSnapshotAction, toTaskId } from 'vitest-plugin-vis/client-api';
+
+// src/client/vitest_proxy.ts
+var browserContext;
+var vitestSuite;
+if (globalThis.__vitest_browser__) {
+  import('@vitest/browser/context').then((m) => {
+    browserContext = m;
+  });
+  import('vitest/suite').then((m) => {
+    vitestSuite = m;
+  });
+}
+var commands = new Proxy({}, {
+  get(_target, prop) {
+    return browserContext?.commands?.[prop];
+  }
+});
+var getCurrentTest = () => vitestSuite?.getCurrentTest();
+function toMatchImageSnapshot(subject, options) {
+  const test = getCurrentTest();
+  if (!test) return Promise.resolve(success);
+  return matchImageSnapshotAction(commands, toTaskId(test), subject, options).then(() => success);
+}
+
+// src/client/storybook/expect_extend.ts
+expect.extend({ toMatchImageSnapshot });
+
+// src/client/storybook/tags.ts
+function isSnapshotEnabled(tags) {
+  return tags.lastIndexOf("!snapshot") < tags.lastIndexOf("snapshot");
+}
+
+export { commands, getCurrentTest, isSnapshotEnabled };
+//# sourceMappingURL=chunk-O5DYZDLL.js.map
+//# sourceMappingURL=chunk-O5DYZDLL.js.map

package/dist/chunk-O5DYZDLL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/client/vitest_proxy.ts","../src/client/expect/to_match_image_snapshot.ts","../src/client/storybook/expect_extend.ts","../src/client/storybook/tags.ts"],"names":[],"mappings":";;;;AAGA,IAAI,cAAA;AACJ,IAAI,WAAA;AAEJ,IAAK,WAAmB,kBAAoB,EAAA;AAC3C,EAAA,OAAO,yBAAyB,CAAA,CAAE,IAAK,CAAA,CAAC,CAAM,KAAA;AAC7C,IAAiB,cAAA,GAAA,CAAA;AAAA,GACjB,CAAA;AACD,EAAA,OAAO,cAAc,CAAA,CAAE,IAAK,CAAA,CAAC,CAAM,KAAA;AAClC,IAAc,WAAA,GAAA,CAAA;AAAA,GACd,CAAA;AACF;AAEO,IAAM,QAAW,GAAA,IAAI,KAAuB,CAAA,EAAW,EAAA;AAAA,EAC7D,GAAA,CAAI,SAAS,IAAM,EAAA;AAClB,IAAQ,OAAA,cAAA,EAAgB,WAAmB,IAAI,CAAA;AAAA;AAEjD,CAAC;AAEY,IAAA,cAAA,GAAiB,MAC7B,WAAA,EAAa,cAAe;ACZtB,SAAS,oBAAA,CAKf,SACA,OACyB,EAAA;AACzB,EAAA,MAAM,OAAO,cAAe,EAAA;AAG5B,EAAA,IAAI,CAAC,IAAA,EAAa,OAAA,OAAA,CAAQ,QAAQ,OAAO,CAAA;AAGzC,EAAO,OAAA,wBAAA,CAAyB,QAAU,EAAA,QAAA,CAAS,IAAI,CAAA,EAAG,SAAS,OAAO,CAAA,CAAE,IAAK,CAAA,MAAM,OAAO,CAAA;AAC/F;;;ACtBA,MAAO,CAAA,MAAA,CAAO,EAAE,oBAAA,EAAsB,CAAA;;;ACH/B,SAAS,kBAAkB,IAAgB,EAAA;AACjD,EAAA,OAAO,KAAK,WAAY,CAAA,WAAW,CAAI,GAAA,IAAA,CAAK,YAAY,UAAU,CAAA;AACnE","file":"chunk-O5DYZDLL.js","sourcesContent":["import type { BrowserCommands } from '@vitest/browser/context'\nimport type { SnapshotTestMeta } from 'vitest-plugin-vis/client-api'\n\nlet browserContext: Awaited<typeof import('@vitest/browser/context')>\nlet vitestSuite: Awaited<typeof import('vitest/suite')>\n\nif ((globalThis as any).__vitest_browser__) {\n\timport('@vitest/browser/context').then((m) => {\n\t\tbrowserContext = m\n\t})\n\timport('vitest/suite').then((m) => {\n\t\tvitestSuite = m\n\t})\n}\n\nexport const commands = new Proxy<BrowserCommands>({} as any, {\n\tget(_target, prop) {\n\t\treturn (browserContext?.commands as any)?.[prop]\n\t},\n})\n\nexport const getCurrentTest = () =>\n\tvitestSuite?.getCurrentTest() as (ReturnType<typeof vitestSuite.getCurrentTest> & SnapshotTestMeta) | undefined\n","import type { AsyncExpectationResult } from '@vitest/expect'\nimport {\n\ttype ComparisonMethod,\n\ttype ToMatchImageSnapshotOptions,\n\tmatchImageSnapshotAction,\n\tsuccess,\n\ttoTaskId,\n} from 'vitest-plugin-vis/client-api'\nimport { commands, getCurrentTest } from '../vitest_proxy.ts'\n\nexport function toMatchImageSnapshot<M extends ComparisonMethod>(\n\t/**\n\t * The element or locator to take the snapshot of,\n\t * or the base64 value of the image to compare against.\n\t */\n\tsubject: any,\n\toptions?: ToMatchImageSnapshotOptions<M> | undefined,\n): AsyncExpectationResult {\n\tconst test = getCurrentTest()\n\n\t/* v8 ignore start: stub as success when not in a test (e.g. in a story) */\n\tif (!test) return Promise.resolve(success)\n\t/* v8 ignore end */\n\n\treturn matchImageSnapshotAction(commands, toTaskId(test), subject, options).then(() => success)\n}\n","import { expect } from '@storybook/test'\nimport { toMatchImageSnapshot } from '../expect/to_match_image_snapshot.ts'\n\nexpect.extend({ toMatchImageSnapshot })\n","export function isSnapshotEnabled(tags: string[]) {\n\treturn tags.lastIndexOf('!snapshot') < tags.lastIndexOf('snapshot')\n}\n"]}

package/dist/index.d.ts

@@ -1,21 +1,45 @@
 import './matcher.js';
 export * from 'vitest-plugin-vis';
-import { ComparisonMethod, ToMatchImageSnapshotOptions, AutoSnapshotOptions, ImageSnapshotTimeoutOptions, ImageSnapshotIdOptions, SsimComparisonOptions, PixelComparisonOptions, FailureThresholdOptions } from 'vitest-plugin-vis/client';
-export { AutoSnapshotOptions, ComparisonMethod, FailureThresholdOptions, ImageSnapshotCompareOptions, ImageSnapshotIdOptions, ImageSnapshotTimeoutOptions, PixelComparisonOptions, SsimComparisonOptions, ToMatchImageSnapshotOptions } from 'vitest-plugin-vis/client';
+import { ImageSnapshotKeyOptions, ComparisonMethod, ToMatchImageSnapshotOptions, ImageSnapshotSubjectOptions, ImageSnapshotTimeoutOptions, SsimComparisonOptions, PixelComparisonOptions, FailureThresholdOptions } from 'vitest-plugin-vis/client-api';
+export { ComparisonMethod, FailureThresholdOptions, ImageSnapshotCompareOptions, ImageSnapshotKeyOptions, ImageSnapshotSubjectOptions, ImageSnapshotTimeoutOptions, PixelComparisonOptions, SsimComparisonOptions, ToMatchImageSnapshotOptions } from 'vitest-plugin-vis/client-api';
+
+/**
+ * Check if the snapshot image exists.
+ */
+declare function hasImageSnapshot(options?: ImageSnapshotKeyOptions | undefined): false | Promise<boolean>;
 
 /**
  * Define snapshot parameter for auto snapshot.
  */
-declare function defineAutoSnapshotParam<M extends ComparisonMethod>(snapshot: ToMatchImageSnapshotOptions<M> & AutoSnapshotOptions): {
-    snapshot: ImageSnapshotTimeoutOptions & ImageSnapshotIdOptions & (M extends "ssim" ? SsimComparisonOptions<M> : PixelComparisonOptions<M>) & FailureThresholdOptions & {
+declare function defineAutoSnapshotParam<M extends ComparisonMethod>(snapshot: ToMatchImageSnapshotOptions<M> & ImageSnapshotSubjectOptions): {
+    snapshot: ImageSnapshotTimeoutOptions & ImageSnapshotKeyOptions & (M extends "ssim" ? SsimComparisonOptions<M> : PixelComparisonOptions<M>) & FailureThresholdOptions & {
         expectToFail?: boolean | undefined;
-    } & AutoSnapshotOptions;
+    } & ImageSnapshotSubjectOptions;
 };
+
 declare function isSnapshotEnabled(tags: string[]): boolean;
 
 /**
- * Check if the snapshot image exists.
+ * Configuration options for visual testing suites in Storybook.
+ *
+ * @param options.visProjects Array of visual testing project configurations
+ * @param options.visProjects[].snapshotRootDir Root directory for storing snapshots. Can be a string path or a function that returns a path based on CI and platform context
+ * @param options.visProjects[].snapshotSubpath Optional function to customize the snapshot subdirectory path
+ */
+type StorybookVisOptions = {
+    visProjects: Array<{
+        snapshotRootDir: string | ((context: {
+            ci: boolean;
+            platform: string;
+        }) => string) | undefined;
+        snapshotSubpath?: ((options: {
+            subpath: string;
+        }) => string) | undefined;
+    }>;
+};
+/**
+ * Define options for Storybook Visual Testing addon.
  */
-declare function hasImageSnapshot(options?: ImageSnapshotIdOptions | undefined): false | Promise<boolean>;
+declare function defineStorybookVisOptions(options: StorybookVisOptions): StorybookVisOptions;
 
-export { defineAutoSnapshotParam, hasImageSnapshot, isSnapshotEnabled };
+export { type StorybookVisOptions, defineAutoSnapshotParam, defineStorybookVisOptions, hasImageSnapshot, isSnapshotEnabled };

package/dist/index.js

@@ -1,24 +1,7 @@
-import { getCurrentTest, commands } from './chunk-KMYH24SZ.js';
-import { expect } from '@storybook/test';
-import { success, imageSnapshotMatcher, toTaskId } from 'vitest-plugin-vis/client';
+import { getCurrentTest, commands } from './chunk-O5DYZDLL.js';
+export { isSnapshotEnabled } from './chunk-O5DYZDLL.js';
 export * from 'vitest-plugin-vis';
-
-function toMatchImageSnapshot(subject, options) {
-  const test = getCurrentTest();
-  if (!test) return Promise.resolve(success);
-  return imageSnapshotMatcher(commands)(test, subject, options).then(() => success);
-}
-
-// src/client/storybook/expect_extend.ts
-expect.extend({ toMatchImageSnapshot });
-
-// src/client/storybook/param.ts
-function defineAutoSnapshotParam(snapshot) {
-  return { snapshot };
-}
-function isSnapshotEnabled(tags) {
-  return tags.lastIndexOf("!snapshot") < tags.lastIndexOf("snapshot");
-}
+import { hasImageSnapshotAction, toTaskId } from 'vitest-plugin-vis/client-api';
 
 // src/client/ctx.ts
 var ctx = {
@@ -32,20 +15,19 @@ var ctx = {
 function hasImageSnapshot(options) {
   const test = ctx.getCurrentTest();
   if (!test) return false;
-  const taskId = toTaskId(test);
-  const isAutoSnapshot = !!test.meta.vis?.isAutoSnapshot;
-  if (options?.customizeSnapshotId) {
-    return commands.imageSnapshotNextIndex(taskId).then(
-      (index) => commands.hasImageSnapshot(
-        taskId,
-        options.customizeSnapshotId({ id: taskId, index, isAutoSnapshot }),
-        isAutoSnapshot
-      )
-    );
-  }
-  return commands.hasImageSnapshot(taskId, void 0, isAutoSnapshot);
+  return hasImageSnapshotAction(commands, toTaskId(test), options);
+}
+
+// src/client/storybook/param.ts
+function defineAutoSnapshotParam(snapshot) {
+  return { snapshot };
+}
+
+// src/server/vis_options.ts
+function defineStorybookVisOptions(options) {
+  return options;
 }
 
-export { defineAutoSnapshotParam, hasImageSnapshot, isSnapshotEnabled };
+export { defineAutoSnapshotParam, defineStorybookVisOptions, hasImageSnapshot };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/client/expect/to_match_image_snapshot.ts","../src/client/storybook/expect_extend.ts","../src/client/storybook/param.ts","../src/client/ctx.ts","../src/client/has_image_snapshot.ts"],"names":[],"mappings":";;;;;AASO,SAAS,oBAAA,CAKf,SACA,OACyB,EAAA;AACzB,EAAA,MAAM,OAAO,cAAe,EAAA;AAG5B,EAAA,IAAI,CAAC,IAAA,EAAa,OAAA,OAAA,CAAQ,QAAQ,OAAO,CAAA;AAGzC,EAAO,OAAA,oBAAA,CAAqB,QAAQ,CAAE,CAAA,IAAA,EAAM,SAAS,OAAO,CAAA,CAAE,IAAK,CAAA,MAAM,OAAO,CAAA;AACjF;;;ACrBA,MAAO,CAAA,MAAA,CAAO,EAAE,oBAAA,EAAsB,CAAA;;;ACyB/B,SAAS,wBACf,QACC,EAAA;AACD,EAAA,OAAO,EAAE,QAAS,EAAA;AACnB;AAEO,SAAS,kBAAkB,IAAgB,EAAA;AACjD,EAAA,OAAO,KAAK,WAAY,CAAA,WAAW,CAAI,GAAA,IAAA,CAAK,YAAY,UAAU,CAAA;AACnE;;;AClCO,IAAM,GAAM,GAAA;AAAA,EAClB,cAAA;AAAA,EACA,aAAgB,GAAA;AACf,IAAA,GAAA,CAAI,cAAiB,GAAA,cAAA;AAAA;AAEvB,CAAA;;;ACAO,SAAS,iBAAiB,OAA8C,EAAA;AAC9E,EAAM,MAAA,IAAA,GAAO,IAAI,cAAe,EAAA;AAChC,EAAI,IAAA,CAAC,MAAa,OAAA,KAAA;AAElB,EAAM,MAAA,MAAA,GAAS,SAAS,IAAI,CAAA;AAC5B,EAAA,MAAM,cAAiB,GAAA,CAAC,CAAC,IAAA,CAAK,KAAK,GAAK,EAAA,cAAA;AACxC,EAAA,IAAI,SAAS,mBAAqB,EAAA;AACjC,IAAO,OAAA,QAAA,CACL,sBAAuB,CAAA,MAAM,CAC7B,CAAA,IAAA;AAAA,MAAK,CAAC,UACN,QAAS,CAAA,gBAAA;AAAA,QACR,MAAA;AAAA,QACA,QAAQ,mBAAqB,CAAA,EAAE,IAAI,MAAQ,EAAA,KAAA,EAAO,gBAAgB,CAAA;AAAA,QAClE;AAAA;AACD,KACD;AAAA;AAGF,EAAA,OAAO,QAAS,CAAA,gBAAA,CAAiB,MAAQ,EAAA,KAAA,CAAA,EAAW,cAAc,CAAA;AACnE","file":"index.js","sourcesContent":["import type { AsyncExpectationResult } from '@vitest/expect'\nimport {\n\ttype ComparisonMethod,\n\ttype ToMatchImageSnapshotOptions,\n\timageSnapshotMatcher,\n\tsuccess,\n} from 'vitest-plugin-vis/client'\nimport { commands, getCurrentTest } from '../vitest_proxy.ts'\n\nexport function toMatchImageSnapshot<M extends ComparisonMethod>(\n\t/**\n\t * The element or locator to take the snapshot of,\n\t * or the base64 value of the image to compare against.\n\t */\n\tsubject: any,\n\toptions?: ToMatchImageSnapshotOptions<M> | undefined,\n): AsyncExpectationResult {\n\tconst test = getCurrentTest()\n\n\t/* v8 ignore start: stub as success when not in a test (e.g. in a story) */\n\tif (!test) return Promise.resolve(success)\n\t/* v8 ignore end */\n\n\treturn imageSnapshotMatcher(commands)(test, subject, options).then(() => success)\n}\n","import { expect } from '@storybook/test'\nimport { toMatchImageSnapshot } from '../expect/to_match_image_snapshot.ts'\n\nexpect.extend({ toMatchImageSnapshot })\n","import type {\n\tAutoSnapshotOptions,\n\tComparisonMethod,\n\tFailureThresholdOptions,\n\tImageSnapshotCompareOptions,\n\tImageSnapshotIdOptions,\n\tImageSnapshotTimeoutOptions,\n\tPixelComparisonOptions,\n\tSsimComparisonOptions,\n\tToMatchImageSnapshotOptions,\n} from 'vitest-plugin-vis/client'\n\n// This fix the inferred type cannot be named error\nexport type {\n\tAutoSnapshotOptions,\n\tComparisonMethod,\n\tImageSnapshotCompareOptions,\n\tImageSnapshotIdOptions,\n\tImageSnapshotTimeoutOptions,\n\tToMatchImageSnapshotOptions,\n\tSsimComparisonOptions,\n\tPixelComparisonOptions,\n\tFailureThresholdOptions,\n}\n\n/**\n * Define snapshot parameter for auto snapshot.\n */\nexport function defineAutoSnapshotParam<M extends ComparisonMethod>(\n\tsnapshot: ToMatchImageSnapshotOptions<M> & AutoSnapshotOptions,\n) {\n\treturn { snapshot }\n}\n\nexport function isSnapshotEnabled(tags: string[]) {\n\treturn tags.lastIndexOf('!snapshot') < tags.lastIndexOf('snapshot')\n}\n","import { getCurrentTest } from './vitest_proxy.ts'\n\nexport const ctx = {\n\tgetCurrentTest,\n\t__test__reset() {\n\t\tctx.getCurrentTest = getCurrentTest\n\t},\n}\n","import { type ImageSnapshotIdOptions, toTaskId } from 'vitest-plugin-vis/client'\nimport { ctx } from './ctx.ts'\nimport { commands } from './vitest_proxy.ts'\n\n/**\n * Check if the snapshot image exists.\n */\nexport function hasImageSnapshot(options?: ImageSnapshotIdOptions | undefined) {\n\tconst test = ctx.getCurrentTest()\n\tif (!test) return false\n\n\tconst taskId = toTaskId(test)\n\tconst isAutoSnapshot = !!test.meta.vis?.isAutoSnapshot\n\tif (options?.customizeSnapshotId) {\n\t\treturn commands\n\t\t\t.imageSnapshotNextIndex(taskId)\n\t\t\t.then((index) =>\n\t\t\t\tcommands.hasImageSnapshot(\n\t\t\t\t\ttaskId,\n\t\t\t\t\toptions.customizeSnapshotId!({ id: taskId, index, isAutoSnapshot }),\n\t\t\t\t\tisAutoSnapshot,\n\t\t\t\t),\n\t\t\t)\n\t}\n\n\treturn commands.hasImageSnapshot(taskId, undefined, isAutoSnapshot)\n}\n"]}
+{"version":3,"sources":["../src/client/ctx.ts","../src/client/has_image_snapshot.ts","../src/client/storybook/param.ts","../src/server/vis_options.ts"],"names":[],"mappings":";;;;;;AAEO,IAAM,GAAM,GAAA;AAAA,EAClB,cAAA;AAAA,EACA,aAAgB,GAAA;AACf,IAAA,GAAA,CAAI,cAAiB,GAAA,cAAA;AAAA;AAEvB,CAAA;;;ACAO,SAAS,iBAAiB,OAA+C,EAAA;AAC/E,EAAM,MAAA,IAAA,GAAO,IAAI,cAAe,EAAA;AAChC,EAAI,IAAA,CAAC,MAAa,OAAA,KAAA;AAElB,EAAA,OAAO,sBAAuB,CAAA,QAAA,EAAU,QAAS,CAAA,IAAI,GAAG,OAAO,CAAA;AAChE;;;ACgBO,SAAS,wBACf,QACC,EAAA;AACD,EAAA,OAAO,EAAE,QAAS,EAAA;AACnB;;;ACTO,SAAS,0BAA0B,OAA8B,EAAA;AACvE,EAAO,OAAA,OAAA;AACR","file":"index.js","sourcesContent":["import { getCurrentTest } from './vitest_proxy.ts'\n\nexport const ctx = {\n\tgetCurrentTest,\n\t__test__reset() {\n\t\tctx.getCurrentTest = getCurrentTest\n\t},\n}\n","import { hasImageSnapshotAction, toTaskId, type ImageSnapshotKeyOptions } from 'vitest-plugin-vis/client-api'\nimport { ctx } from './ctx.ts'\nimport { commands } from './vitest_proxy.ts'\n\n/**\n * Check if the snapshot image exists.\n */\nexport function hasImageSnapshot(options?: ImageSnapshotKeyOptions | undefined) {\n\tconst test = ctx.getCurrentTest()\n\tif (!test) return false\n\n\treturn hasImageSnapshotAction(commands, toTaskId(test), options)\n}\n","import type {\n\tComparisonMethod,\n\tFailureThresholdOptions,\n\tImageSnapshotCompareOptions,\n\tImageSnapshotKeyOptions,\n\tImageSnapshotSubjectOptions,\n\tImageSnapshotTimeoutOptions,\n\tPixelComparisonOptions,\n\tSsimComparisonOptions,\n\tToMatchImageSnapshotOptions,\n} from 'vitest-plugin-vis/client-api'\n\n// This fix the inferred type cannot be named error\nexport type {\n\tComparisonMethod,\n\tFailureThresholdOptions,\n\tImageSnapshotCompareOptions,\n\tImageSnapshotKeyOptions,\n\tImageSnapshotSubjectOptions,\n\tImageSnapshotTimeoutOptions,\n\tPixelComparisonOptions,\n\tSsimComparisonOptions,\n\tToMatchImageSnapshotOptions,\n}\n\n/**\n * Define snapshot parameter for auto snapshot.\n */\nexport function defineAutoSnapshotParam<M extends ComparisonMethod>(\n\tsnapshot: ToMatchImageSnapshotOptions<M> & ImageSnapshotSubjectOptions,\n) {\n\treturn { snapshot }\n}\n","/**\n * Configuration options for visual testing suites in Storybook.\n *\n * @param options.visProjects Array of visual testing project configurations\n * @param options.visProjects[].snapshotRootDir Root directory for storing snapshots. Can be a string path or a function that returns a path based on CI and platform context\n * @param options.visProjects[].snapshotSubpath Optional function to customize the snapshot subdirectory path\n */\nexport type StorybookVisOptions = {\n\tvisProjects: Array<{\n\t\tsnapshotRootDir:\n\t\t\t| string\n\t\t\t| ((context: {\n\t\t\t\t\tci: boolean\n\t\t\t\t\tplatform: string\n\t\t\t  }) => string)\n\t\t\t| undefined\n\t\tsnapshotSubpath?: ((options: { subpath: string }) => string) | undefined\n\t}>\n}\n\n/**\n * Define options for Storybook Visual Testing addon.\n */\nexport function defineStorybookVisOptions(options: StorybookVisOptions) {\n\treturn options\n}\n"]}

package/dist/manager.js

@@ -0,0 +1,2 @@
+import {memo,useState,useEffect}from'react';import {addons,types}from'storybook/internal/manager-api';import {AddonPanel,ScrollArea,Placeholder}from'storybook/internal/components';import {styled}from'storybook/internal/theming';import {SNAPSHOT_ROOT_DIR}from'vitest-plugin-vis/client-api';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var g=memo(function({active:a,snapshotResults:r=[]}){let p=r.reduce((t,e)=>{let S=`(${e.snapshotRootDir.slice(SNAPSHOT_ROOT_DIR.length+1)}) ${e.fileName}`;return t[S]=[...t[S]??[],e],t},{});return jsx(AddonPanel,{active:a,children:r.length>0?jsx(ScrollArea,{vertical:true,children:Object.entries(p).map(([t,e])=>jsx("div",{children:e.some(s=>s.type==="diff")?jsxs(Fragment,{children:[jsx(m,{failed:true,children:t}),e.map(s=>jsx("img",{src:`data:image/png;base64,${s.base64}`,alt:s.fileName},s.filePath))]}):jsxs(Fragment,{children:[jsx(m,{children:t}),jsx("img",{src:`data:image/png;base64,${e[0].base64}`,alt:e[0].fileName},e[0].filePath)]})},t))}):jsx(Placeholder,{children:"There is no snapshots for this story"})})}),m=styled.div(({theme:o,failed:a})=>({paddingBlock:"0.5rem",paddingInline:"0.2rem",backgroundColor:a?o.background.negative:o.background.positive,color:o.barTextColor}));var i="storybook-addon-vis",E=`${i}/vis_panel`;var A="IMAGE_SNAPSHOT_RESULTS_REQUEST",h="IMAGE_SNAPSHOT_RESULTS_RESPONSE";function u({name:o,importPath:a}){return {type:A,name:o,importPath:a}}addons.register(i,o=>{addons.add(E,{type:types.PANEL,title:"Vis",match:({tabId:a,viewMode:r})=>!a&&r==="story",render({active:a}){if(!a)return null;let[r,p]=useState([]),t=o.getCurrentStoryData();return useEffect(()=>{let e=o.on(i,s=>{s.name===t.name&&s.importPath===t.importPath&&s.type===h&&p(s.results);});return o.emit(i,u(t)),e},[t]),jsx(g,{active:a,snapshotResults:r})}});});//# sourceMappingURL=manager.js.map
+//# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/vis_panel.tsx","../src/shared/contants.ts","../src/shared/events.ts","../src/manager.tsx"],"names":["VisPanel","memo","active","snapshotResults","groupedResults","acc","result","key","SNAPSHOT_ROOT_DIR","jsx","AddonPanel","ScrollArea","results","jsxs","Fragment","SnapshotRow","Placeholder","styled","theme","failed","NAME","VIS_PANEL_ID","IMAGE_SNAPSHOT_RESULTS_REQUEST","IMAGE_SNAPSHOT_RESULTS_RESPONSE","requestImageSnapshotResults","name","importPath","addons","api","types","tabId","viewMode","setSnapshotResults","useState","storyData","useEffect","dispose","event"],"mappings":"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","file":"manager.js","sourcesContent":["import { memo } from 'react'\nimport { AddonPanel, Placeholder, ScrollArea } from 'storybook/internal/components'\nimport { styled } from 'storybook/internal/theming'\nimport { SNAPSHOT_ROOT_DIR } from 'vitest-plugin-vis/client-api'\nimport type { ImageSnapshotResults } from '../shared/events.ts'\n\ninterface PanelProps {\n\tactive: boolean\n\tsnapshotResults: ImageSnapshotResults[]\n}\n\nexport const VisPanel = memo(function VisResultsPanel({ active, snapshotResults = [] }: PanelProps) {\n\tconst groupedResults = snapshotResults.reduce(\n\t\t(acc, result) => {\n\t\t\tconst suiteName = result.snapshotRootDir.slice(SNAPSHOT_ROOT_DIR.length + 1)\n\t\t\tconst key = `(${suiteName}) ${result.fileName}`\n\t\t\tacc[key] = [...(acc[key] ?? []), result]\n\t\t\treturn acc\n\t\t},\n\t\t{} as Record<string, ImageSnapshotResults[]>,\n\t)\n\treturn (\n\t\t<AddonPanel active={active}>\n\t\t\t{snapshotResults.length > 0 ? (\n\t\t\t\t<ScrollArea vertical>\n\t\t\t\t\t{Object.entries(groupedResults).map(([key, results]) => (\n\t\t\t\t\t\t<div key={key}>\n\t\t\t\t\t\t\t{results.some((result) => result.type === 'diff') ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SnapshotRow failed>{key}</SnapshotRow>\n\t\t\t\t\t\t\t\t\t{results.map((result) => (\n\t\t\t\t\t\t\t\t\t\t<img key={result.filePath} src={`data:image/png;base64,${result.base64}`} alt={result.fileName} />\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SnapshotRow>{key}</SnapshotRow>\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tkey={results[0].filePath}\n\t\t\t\t\t\t\t\t\t\tsrc={`data:image/png;base64,${results[0].base64}`}\n\t\t\t\t\t\t\t\t\t\talt={results[0].fileName}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</ScrollArea>\n\t\t\t) : (\n\t\t\t\t<Placeholder>There is no snapshots for this story</Placeholder>\n\t\t\t)}\n\t\t</AddonPanel>\n\t)\n})\n\nconst SnapshotRow = styled.div<{ failed?: boolean }>(({ theme, failed }) => ({\n\tpaddingBlock: '0.5rem',\n\tpaddingInline: '0.2rem',\n\tbackgroundColor: failed ? theme.background.negative : theme.background.positive,\n\tcolor: theme.barTextColor,\n}))\n","export const NAME = 'storybook-addon-vis'\nexport const VIS_PANEL_ID = `${NAME}/vis_panel`\n","export type VisEvent = ImageSnapshotResultsRequest | ImageSnapshotResultsResponse\n\nexport const IMAGE_SNAPSHOT_RESULTS_REQUEST = 'IMAGE_SNAPSHOT_RESULTS_REQUEST'\nexport const IMAGE_SNAPSHOT_RESULTS_RESPONSE = 'IMAGE_SNAPSHOT_RESULTS_RESPONSE'\n\nexport function requestImageSnapshotResults({ name, importPath }: { name: string; importPath: string }) {\n\treturn {\n\t\ttype: IMAGE_SNAPSHOT_RESULTS_REQUEST,\n\t\tname,\n\t\timportPath,\n\t}\n}\n\nexport type ImageSnapshotResultsRequest = {\n\ttype: typeof IMAGE_SNAPSHOT_RESULTS_REQUEST\n\tname: string\n\timportPath: string\n}\n\nexport type ImageSnapshotResultsResponse = {\n\ttype: typeof IMAGE_SNAPSHOT_RESULTS_RESPONSE\n\tname: string\n\timportPath: string\n\tresults: ImageSnapshotResults[]\n}\n\nexport type ImageSnapshotResults = {\n\tfilePath: string\n\tfileName: string\n\tsnapshotRootDir: string\n\ttype: 'baseline' | 'diff' | 'result'\n\tbase64: string\n}\n","import { useEffect, useState } from 'react'\nimport { addons, types } from 'storybook/internal/manager-api'\nimport { VisPanel } from './components/vis_panel.tsx'\nimport { NAME, VIS_PANEL_ID } from './shared/contants.ts'\nimport {\n\tIMAGE_SNAPSHOT_RESULTS_RESPONSE,\n\trequestImageSnapshotResults,\n\ttype ImageSnapshotResults,\n\ttype VisEvent,\n} from './shared/events.ts'\n\n// Register the addon\naddons.register(NAME, (api) => {\n\t// Register the tool\n\taddons.add(VIS_PANEL_ID, {\n\t\ttype: types.PANEL,\n\t\ttitle: 'Vis',\n\t\tmatch: ({ tabId, viewMode }) => !tabId && viewMode === 'story',\n\t\trender({ active }) {\n\t\t\tif (!active) return null\n\t\t\tconst [snapshotResults, setSnapshotResults] = useState<ImageSnapshotResults[]>([])\n\n\t\t\tconst storyData = api.getCurrentStoryData()\n\n\t\t\tuseEffect(() => {\n\t\t\t\tconst dispose = api.on(NAME, (event: VisEvent) => {\n\t\t\t\t\tif (event.name !== storyData.name) return\n\t\t\t\t\tif (event.importPath !== storyData.importPath) return\n\n\t\t\t\t\tif (event.type === IMAGE_SNAPSHOT_RESULTS_RESPONSE) {\n\t\t\t\t\t\tsetSnapshotResults(event.results)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\tapi.emit(NAME, requestImageSnapshotResults(storyData))\n\t\t\t\treturn dispose\n\t\t\t}, [storyData])\n\t\t\treturn <VisPanel active={active} snapshotResults={snapshotResults} />\n\t\t},\n\t})\n})\n"]}

package/dist/matcher.d.ts

@@ -1,4 +1,4 @@
-import { ImageSnapshotMatcher } from 'vitest-plugin-vis/client';
+import { ImageSnapshotMatcher } from 'vitest-plugin-vis/client-api';
 
 declare global {
     namespace jest {

package/dist/preset.cjs

@@ -1,2 +1,2 @@
-'use strict';var e={};module.exports=e;//# sourceMappingURL=preset.cjs.map
+'use strict';var glob=require('glob'),T=require('is-ci'),E=require('memoize'),fs=require('fs'),process=require('process'),pathe=require('pathe'),serverUtils=require('vitest-plugin-vis/server-utils');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var T__default=/*#__PURE__*/_interopDefault(T);var E__default=/*#__PURE__*/_interopDefault(E);function g(o){let r=o.visProjects??[{snapshotRootDir:serverUtils.SNAPSHOT_ROOT_DIR}];return {options:o,async getImageSnapshotResults(n,s){return r.map(t=>{let p=(typeof t.snapshotRootDir=="function"?E__default.default(t.snapshotRootDir)({ci:T__default.default,platform:process.platform}):t.snapshotRootDir)??serverUtils.SNAPSHOT_ROOT_DIR,a=(typeof t.snapshotSubpath=="function"?E__default.default(t.snapshotSubpath):E__default.default(({subpath:i})=>serverUtils.trimCommonFolder(i.startsWith("./")?i.slice(2):i)))({subpath:s});return {snapshotRootDir:p,snapshotSubpath:a}}).flatMap(({snapshotRootDir:t,snapshotSubpath:p})=>{let m=n.replace(/[^a-z0-9]/gi,"-").toLowerCase(),a=`${m}-*.png`,i=pathe.resolve(t,serverUtils.BASELINE_DIR,p,a),h=pathe.resolve(t,serverUtils.DIFF_DIR,p,a),l=new RegExp(`${m}-[^-]*.png$`),I=glob.globSync(i).filter(e=>l.test(e)),b=glob.globSync(h).filter(e=>l.test(e));return [...I.map(e=>c(e,t,"baseline")),...b.map(e=>c(e,t,"diff"))]})}}}function c(o,r,n){return {filePath:o,fileName:pathe.basename(o),snapshotRootDir:r,type:n,base64:fs.readFileSync(o,"base64")}}var S="storybook-addon-vis";var y="IMAGE_SNAPSHOT_RESULTS_REQUEST",u="IMAGE_SNAPSHOT_RESULTS_RESPONSE";var w=async(o,r)=>{let n=g(r);return o.on(S,async s=>{if(s.type===y){let t=await n.getImageSnapshotResults(s.name,s.importPath);o.emit(S,{type:u,name:s.name,importPath:s.importPath,results:t});}}),o};exports.experimental_serverChannel=w;//# sourceMappingURL=preset.cjs.map
 //# sourceMappingURL=preset.cjs.map

package/dist/preset.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/preset.ts"],"names":["preset_default"],"mappings":"aAAA,IAAOA,EAAQ","file":"preset.cjs","sourcesContent":["export default {}\n"]}
+{"version":3,"sources":["../src/server/create_storybook_vis_server.ts","../src/shared/contants.ts","../src/shared/events.ts","../src/preset.ts"],"names":["createStorybookVisServer","options","visSuites","SNAPSHOT_ROOT_DIR","name","importPath","suite","snapshotRootDir","memoize","ci","platform","snapshotSubpath","subpath","trimCommonFolder","taskId","taskGlob","baselineGlob","resolve","BASELINE_DIR","diffGlob","DIFF_DIR","taskIdRegex","baselineFiles","globSync","filePath","diffFiles","mapFileToResult","type","basename","readFileSync","NAME","IMAGE_SNAPSHOT_RESULTS_REQUEST","IMAGE_SNAPSHOT_RESULTS_RESPONSE","experimental_serverChannel","channel","server","event","results"],"mappings":"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","file":"preset.cjs","sourcesContent":["import { globSync } from 'glob'\nimport ci from 'is-ci'\nimport memoize from 'memoize'\nimport { readFileSync } from 'node:fs'\nimport { platform } from 'node:process'\nimport { basename, resolve } from 'pathe'\nimport { BASELINE_DIR, DIFF_DIR, SNAPSHOT_ROOT_DIR, trimCommonFolder } from 'vitest-plugin-vis/server-utils'\nimport type { StorybookVisOptions } from './vis_options.ts'\n\nexport function createStorybookVisServer(options: StorybookVisOptions) {\n\tconst visSuites = options.visProjects ?? [{ snapshotRootDir: SNAPSHOT_ROOT_DIR }]\n\treturn {\n\t\toptions,\n\t\tasync getImageSnapshotResults(name: string, importPath: string) {\n\t\t\treturn visSuites\n\t\t\t\t.map((suite) => {\n\t\t\t\t\tconst snapshotRootDir =\n\t\t\t\t\t\t(typeof suite.snapshotRootDir === 'function'\n\t\t\t\t\t\t\t? memoize(suite.snapshotRootDir)({\n\t\t\t\t\t\t\t\t\tci,\n\t\t\t\t\t\t\t\t\tplatform,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t: suite.snapshotRootDir) ?? SNAPSHOT_ROOT_DIR\n\t\t\t\t\tconst snapshotSubpathFn =\n\t\t\t\t\t\ttypeof suite.snapshotSubpath === 'function'\n\t\t\t\t\t\t\t? memoize(suite.snapshotSubpath)\n\t\t\t\t\t\t\t: memoize(({ subpath }: { subpath: string }) =>\n\t\t\t\t\t\t\t\t\ttrimCommonFolder(subpath.startsWith('./') ? subpath.slice(2) : subpath),\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\tconst snapshotSubpath = snapshotSubpathFn({ subpath: importPath })\n\t\t\t\t\treturn {\n\t\t\t\t\t\tsnapshotRootDir,\n\t\t\t\t\t\tsnapshotSubpath,\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.flatMap(({ snapshotRootDir, snapshotSubpath }) => {\n\t\t\t\t\tconst taskId = name.replace(/[^a-z0-9]/gi, '-').toLowerCase()\n\t\t\t\t\tconst taskGlob = `${taskId}-*.png`\n\t\t\t\t\tconst baselineGlob = resolve(snapshotRootDir, BASELINE_DIR, snapshotSubpath, taskGlob)\n\t\t\t\t\tconst diffGlob = resolve(snapshotRootDir, DIFF_DIR, snapshotSubpath, taskGlob)\n\n\t\t\t\t\tconst taskIdRegex = new RegExp(`${taskId}-[^-]*.png$`)\n\t\t\t\t\tconst baselineFiles = globSync(baselineGlob).filter((filePath) => taskIdRegex.test(filePath))\n\t\t\t\t\tconst diffFiles = globSync(diffGlob).filter((filePath) => taskIdRegex.test(filePath))\n\t\t\t\t\treturn [\n\t\t\t\t\t\t...baselineFiles.map((filePath) => mapFileToResult(filePath, snapshotRootDir, 'baseline')),\n\t\t\t\t\t\t...diffFiles.map((filePath) => mapFileToResult(filePath, snapshotRootDir, 'diff')),\n\t\t\t\t\t]\n\t\t\t\t})\n\t\t},\n\t}\n}\n\nfunction mapFileToResult(filePath: string, snapshotRootDir: string, type: 'baseline' | 'diff') {\n\treturn {\n\t\tfilePath,\n\t\tfileName: basename(filePath),\n\t\tsnapshotRootDir,\n\t\ttype,\n\t\tbase64: readFileSync(filePath, 'base64'),\n\t}\n}\n","export const NAME = 'storybook-addon-vis'\nexport const VIS_PANEL_ID = `${NAME}/vis_panel`\n","export type VisEvent = ImageSnapshotResultsRequest | ImageSnapshotResultsResponse\n\nexport const IMAGE_SNAPSHOT_RESULTS_REQUEST = 'IMAGE_SNAPSHOT_RESULTS_REQUEST'\nexport const IMAGE_SNAPSHOT_RESULTS_RESPONSE = 'IMAGE_SNAPSHOT_RESULTS_RESPONSE'\n\nexport function requestImageSnapshotResults({ name, importPath }: { name: string; importPath: string }) {\n\treturn {\n\t\ttype: IMAGE_SNAPSHOT_RESULTS_REQUEST,\n\t\tname,\n\t\timportPath,\n\t}\n}\n\nexport type ImageSnapshotResultsRequest = {\n\ttype: typeof IMAGE_SNAPSHOT_RESULTS_REQUEST\n\tname: string\n\timportPath: string\n}\n\nexport type ImageSnapshotResultsResponse = {\n\ttype: typeof IMAGE_SNAPSHOT_RESULTS_RESPONSE\n\tname: string\n\timportPath: string\n\tresults: ImageSnapshotResults[]\n}\n\nexport type ImageSnapshotResults = {\n\tfilePath: string\n\tfileName: string\n\tsnapshotRootDir: string\n\ttype: 'baseline' | 'diff' | 'result'\n\tbase64: string\n}\n","import type { Channel } from 'storybook/internal/channels'\nimport { createStorybookVisServer } from './server/create_storybook_vis_server.ts'\nimport type { StorybookVisOptions } from './server/vis_options.ts'\nimport { NAME } from './shared/contants.ts'\nimport { IMAGE_SNAPSHOT_RESULTS_REQUEST, IMAGE_SNAPSHOT_RESULTS_RESPONSE, type VisEvent } from './shared/events.ts'\n\nexport const experimental_serverChannel = async (channel: Channel, options: StorybookVisOptions) => {\n\tconst server = createStorybookVisServer(options)\n\n\tchannel.on(NAME, async (event: VisEvent) => {\n\t\tif (event.type === IMAGE_SNAPSHOT_RESULTS_REQUEST) {\n\t\t\tconst results = await server.getImageSnapshotResults(event.name, event.importPath)\n\t\t\tchannel.emit(NAME, {\n\t\t\t\ttype: IMAGE_SNAPSHOT_RESULTS_RESPONSE,\n\t\t\t\tname: event.name,\n\t\t\t\timportPath: event.importPath,\n\t\t\t\tresults,\n\t\t\t})\n\t\t}\n\t})\n\n\treturn channel\n}\n"]}

package/dist/vitest-plugin.d.ts

@@ -1,27 +1,11 @@
 import { ComparisonMethod, VisOptions } from 'vitest-plugin-vis/config';
 export { trimCommonFolder } from 'vitest-plugin-vis/config';
-import * as vitest_plugin_vis_commands from 'vitest-plugin-vis/commands';
-import * as vitest_node from 'vitest/node';
-import * as vite from 'vite';
 import { Omit } from 'type-plus';
 
-declare function storybookVis<M extends ComparisonMethod>(options?: Omit<VisOptions<M>, 'preset'> | undefined): {
-    name: string;
-    config(this: void, userConfig: vite.UserConfig): {
-        test: {
-            browser: {
-                name: string;
-                commands: {
-                    setupVisSuite: vitest_node.BrowserCommand<[]>;
-                    imageSnapshotNextIndex: vitest_node.BrowserCommand<[taskId: string]>;
-                    hasImageSnapshot: vitest_node.BrowserCommand<[taskId: string, snapshotId: string | undefined, isAutoSnapshot: boolean]>;
-                    matchImageSnapshot: vitest_node.BrowserCommand<[taskId: string, subject: string, isAutoSnapshot: boolean, options?: vitest_plugin_vis_commands.MatchImageSnapshotOptions | undefined]>;
-                    prepareImageSnapshotComparison: vitest_node.BrowserCommand<[taskId: string, snapshotId: string, isAutoSnapshot: boolean, options?: vitest_plugin_vis_commands.MatchImageSnapshotOptions | undefined]>;
-                };
-            };
-            setupFiles: string[];
-        };
-    };
-};
+/**
+ * Return type is `any` to support different Vitest and Vite versions.
+ */
+
+declare function storybookVis<M extends ComparisonMethod>(options?: Omit<VisOptions<M>, 'preset'> | undefined): any;
 
 export { storybookVis };

package/dist/vitest-plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/contants.ts","../src/vitest-plugin/storybook_vis.ts"],"names":[],"mappings":";;;;;;AAAO,IAAM,IAAO,GAAA,qBAAA;;;ACIb,SAAS,aAAyC,OAAqD,EAAA;AAC7G,EAAO,OAAA;AAAA,IACN,GAAG,GAAI,CAAA;AAAA,MACN,GAAG,OAAA;AAAA,MACH,MAAQ,EAAA;AAAA,KACR,CAAA;AAAA,IACD,IAAM,EAAA;AAAA,GACP;AACD","file":"vitest-plugin.js","sourcesContent":["export const NAME = 'storybook-addon-vis'\n","import type { Omit } from 'type-plus'\nimport { type ComparisonMethod, type VisOptions, vis } from 'vitest-plugin-vis/config'\nimport { NAME } from '../shared/contants.ts'\n\nexport function storybookVis<M extends ComparisonMethod>(options?: Omit<VisOptions<M>, 'preset'> | undefined) {\n\treturn {\n\t\t...vis({\n\t\t\t...options,\n\t\t\tpreset: 'none',\n\t\t}),\n\t\tname: NAME,\n\t}\n}\n"]}
+{"version":3,"sources":["../src/shared/contants.ts","../src/vitest-plugin/storybook_vis.ts"],"names":[],"mappings":";;;;;;AAAO,IAAM,IAAO,GAAA,qBAAA;;;ACOb,SAAS,aAAyC,OAA0D,EAAA;AAClH,EAAO,OAAA;AAAA,IACN,GAAG,GAAI,CAAA;AAAA,MACN,GAAG,OAAA;AAAA,MACH,MAAQ,EAAA;AAAA,KACR,CAAA;AAAA,IACD,IAAM,EAAA;AAAA,GACP;AACD","file":"vitest-plugin.js","sourcesContent":["export const NAME = 'storybook-addon-vis'\nexport const VIS_PANEL_ID = `${NAME}/vis_panel`\n","/**\n * Return type is `any` to support different Vitest and Vite versions.\n */\nimport type { Omit } from 'type-plus'\nimport { type ComparisonMethod, type VisOptions, vis } from 'vitest-plugin-vis/config'\nimport { NAME } from '../shared/contants.ts'\n\nexport function storybookVis<M extends ComparisonMethod>(options?: Omit<VisOptions<M>, 'preset'> | undefined): any {\n\treturn {\n\t\t...vis({\n\t\t\t...options,\n\t\t\tpreset: 'none',\n\t\t}),\n\t\tname: NAME,\n\t}\n}\n"]}

package/dist/vitest-setup.d.ts

@@ -1,9 +1,15 @@
 import * as vitest_plugin_vis_setup from 'vitest-plugin-vis/setup';
-import { SnapshotMeta } from 'vitest-plugin-vis';
-export { SnapshotMeta, setAutoSnapshotOptions } from 'vitest-plugin-vis';
+import './matcher.js';
+export { setAutoSnapshotOptions } from 'vitest-plugin-vis';
+import { StoryContext } from 'storybook/internal/types';
+import 'vitest-plugin-vis/client-api';
 
-declare const vis: vitest_plugin_vis_setup.VisClientConfigurator<SnapshotMeta<any> & {
+declare const visAnnotations: {
+    beforeEach(ctx: StoryContext): void;
+};
+
+declare const vis: vitest_plugin_vis_setup.VisClientConfigurator<{
     tags: string[];
 }>;
 
-export { vis };
+export { vis, visAnnotations };

package/dist/vitest-setup.js

@@ -1,9 +1,23 @@
-import { commands } from './chunk-KMYH24SZ.js';
+import { commands, getCurrentTest, isSnapshotEnabled } from './chunk-O5DYZDLL.js';
 import { createVis } from 'vitest-plugin-vis/setup';
+import { setAutoSnapshotOptions } from 'vitest-plugin-vis';
 export { setAutoSnapshotOptions } from 'vitest-plugin-vis';
 
+var visAnnotations = {
+  beforeEach(ctx) {
+    const test = getCurrentTest();
+    setAutoSnapshotOptions({
+      enable: isSnapshotEnabled(ctx.tags),
+      ...ctx.parameters?.snapshot,
+      tags: ctx.tags,
+      ...test?.meta.vis
+    });
+  }
+};
+
+// src/vitest-setup.ts
 var vis = createVis(commands);
 
-export { vis };
+export { vis, visAnnotations };
 //# sourceMappingURL=vitest-setup.js.map
 //# sourceMappingURL=vitest-setup.js.map

package/dist/vitest-setup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vitest-setup.ts"],"names":[],"mappings":";;;;AAKa,IAAA,GAAA,GAAM,UAAkD,QAAQ","file":"vitest-setup.js","sourcesContent":["// `storybook-addon-vis/vitest-setup` provides code needed in `vitest.setup.ts`.\nimport type { SnapshotMeta } from 'vitest-plugin-vis'\nimport { createVis } from 'vitest-plugin-vis/setup'\nimport { commands } from './client/vitest_proxy.ts'\n\nexport const vis = createVis<SnapshotMeta<any> & { tags: string[] }>(commands)\nexport { setAutoSnapshotOptions, type SnapshotMeta } from 'vitest-plugin-vis'\n"]}
+{"version":3,"sources":["../src/preview/vis_annotation.ts","../src/vitest-setup.ts"],"names":[],"mappings":";;;;;AAKO,IAAM,cAAiB,GAAA;AAAA,EAC7B,WAAW,GAAmB,EAAA;AAE7B,IAAA,MAAM,OAAO,cAAe,EAAA;AAC5B,IAAuB,sBAAA,CAAA;AAAA,MACtB,MAAA,EAAQ,iBAAkB,CAAA,GAAA,CAAI,IAAI,CAAA;AAAA,MAClC,GAAG,IAAI,UAAY,EAAA,QAAA;AAAA,MACnB,MAAM,GAAI,CAAA,IAAA;AAAA,MACV,GAAG,MAAM,IAAK,CAAA;AAAA,KACd,CAAA;AAAA;AAEH;;;ACTa,IAAA,GAAA,GAAM,UAA8B,QAAQ","file":"vitest-setup.js","sourcesContent":["import type { ProjectAnnotations, Renderer, StoryContext } from 'storybook/internal/types'\nimport { setAutoSnapshotOptions } from 'vitest-plugin-vis'\nimport { isSnapshotEnabled } from '../client/storybook/tags.ts'\nimport { getCurrentTest } from '../client/vitest_proxy.ts'\n\nexport const visAnnotations = {\n\tbeforeEach(ctx: StoryContext) {\n\t\t// console.debug('storbook-addon-vis.preview.beforeEach starts...')\n\t\tconst test = getCurrentTest()\n\t\tsetAutoSnapshotOptions({\n\t\t\tenable: isSnapshotEnabled(ctx.tags),\n\t\t\t...ctx.parameters?.snapshot,\n\t\t\ttags: ctx.tags,\n\t\t\t...test?.meta.vis,\n\t\t})\n\t},\n} satisfies ProjectAnnotations<Renderer>\n","// `storybook-addon-vis/vitest-setup` provides code needed in `vitest.setup.ts`.\nimport './client/storybook/expect_extend.ts'\nimport './shared/global_matcher_augment.ts'\n\nimport { createVis } from 'vitest-plugin-vis/setup'\nimport { commands } from './client/vitest_proxy.ts'\n\nexport const vis = createVis<{ tags: string[] }>(commands)\nexport { setAutoSnapshotOptions } from 'vitest-plugin-vis'\nexport { visAnnotations } from './preview/vis_annotation.ts'\n"]}

package/manager.js

@@ -0,0 +1 @@
+import './dist/manager.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-vis",
-  "version": "0.19.4",
+  "version": "1.0.0",
   "description": "Storybook Vitest visual testing addon",
   "keywords": [
     "image-snapshot",
@@ -13,7 +13,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/repobuddy/storybook-image-snapshot",
+    "url": "https://github.com/repobuddy/visual-testing",
     "directory": "packages/storybook-addon-vis"
   },
   "license": "MIT",
@@ -23,12 +23,16 @@
     "url": "https://github.com/unional"
   },
   "type": "module",
+  "imports": {
+    "#storybook-addon-vis/vitest-plugin": "./src/vitest-plugin.ts"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./manager": "./dist/manager.js",
     "./matcher": {
       "types": "./dist/matcher.d.ts",
       "import": "./dist/matcher.js"
@@ -48,9 +52,6 @@
     },
     "./package.json": "./package.json"
   },
-  "imports": {
-    "#storybook-addon-vis/vitest-plugin": "./src/vitest-plugin.ts"
-  },
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
@@ -60,37 +61,48 @@
     "!**/*.{spec,test,unit,accept,integrate,system,perf,stress,stories,study}.*"
   ],
   "dependencies": {
+    "glob": "^11.0.2",
+    "is-ci": "^4.1.0",
+    "memoize": "^10.1.0",
+    "pathe": "^2.0.3",
     "type-plus": "8.0.0-beta.7",
-    "vitest-plugin-vis": "2.4.4"
+    "vitest-plugin-vis": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.6.3",
-    "@storybook/addon-links": "^8.6.3",
-    "@storybook/blocks": "^8.6.3",
-    "@storybook/experimental-addon-test": "^8.6.3",
-    "@storybook/react": "^8.6.3",
-    "@storybook/react-vite": "^8.6.3",
-    "@storybook/test": "^8.6.3",
+    "@repobuddy/storybook": "^0.12.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-storysource": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/experimental-addon-test": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@tailwindcss/cli": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.7",
     "@testing-library/react": "^16.0.1",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/browser": "^3.0.8",
-    "@vitest/coverage-istanbul": "^3.0.8",
-    "@vitest/expect": "^3.0.8",
+    "@vitest/browser": "^3.0.9",
+    "@vitest/coverage-istanbul": "^3.0.9",
+    "@vitest/expect": "^3.0.9",
     "boxen": "^8.0.1",
     "cross-env": "^7.0.3",
     "dedent": "^1.5.1",
-    "npm-run-all2": "^7.0.2",
+    "npm-run-all2": "^8.0.0",
     "playwright": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^8.6.3",
+    "storybook": "^8.6.14",
+    "storybook-addon-tag-badges": "^1.4.0",
+    "storybook-dark-mode": "^4.0.2",
+    "tailwindcss": "^4.1.7",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
-    "vite": "^6.0.9",
-    "vitest": "^3.0.8",
-    "vitest-browser-react": "^0.1.0",
+    "vite": "^6.2.3",
+    "vitest": "^3.0.9",
+    "vitest-browser-react": "^0.1.1",
     "webdriverio": "latest",
     "zx": "^8.0.0"
   },
@@ -109,8 +121,8 @@
       "src/matcher.ts",
       "src/vitest-setup.ts"
     ],
-    "previewEntries": [
-      "src/preview.ts"
+    "managerEntries": [
+      "src/manager.tsx"
     ],
     "nodeEntries": [
       "./src/preset.ts"
@@ -132,9 +144,9 @@
     "icon": "https://github.com/organizations/repobuddy/settings/profile"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup --tsconfig tsconfig.tsup.json",
     "build:sb": "storybook build",
-    "clean": "rimraf coverage dist esm *.tsbuildinfo vitest.*.timestamp*",
+    "clean": "rimraf coverage dist esm --glob *.tsbuildinfo vitest.*.timestamp*",
     "clean:vis:local": "rimraf __vis__/local",
     "cov": "vitest run --coverage",
     "coverage": "vitest run --coverage",
@@ -145,6 +157,8 @@
     "t:n": "vitest run -c vitest.config.node.ts",
     "t:wb": "cross-env BROWSER=firefox BROWSERPROVIDER=webdriverio vitest run",
     "test": "vitest run",
+    "test:node": "vitest run -c vitest.config.node.ts",
+    "test:pw": "vitest run -c vitest.config.playwright.ts",
     "test:type": "tsc --noEmit",
     "v": "run-p build cov",
     "w": "vitest",