@argos-ci/storybook 5.2.14 → 5.3.0

package/dist/vitest-plugin.mjs

@@ -0,0 +1,372 @@
+import { createRequire } from "node:module";
+import { DO_NOT_USE_setMetadataConfig, argosScreenshot } from "@argos-ci/playwright";
+import { readVersionFromPackage } from "@argos-ci/util";
+import { upload } from "@argos-ci/core";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+//#region src/utils/metadata.ts
+const require = createRequire(import.meta.url);
+/**
+* Get the version of the Argos Playwright SDK.
+*/
+async function getArgosStorybookVersion() {
+	return readVersionFromPackage(require.resolve("@argos-ci/storybook/package.json"));
+}
+//#endregion
+//#region src/utils/storyMetadata.ts
+/**
+* Build the story metadata object that is attached to a screenshot.
+*
+* @param story - The story shape (id, tags, play flag).
+* @param storyMode - The Storybook mode name (e.g. "dark", "mobile") as defined in `parameters.argos.modes`
+*/
+function getStoryMetadata(story, storyMode) {
+	return {
+		id: story.id,
+		tags: story.tags ?? [],
+		mode: storyMode ?? void 0,
+		play: Boolean(story.play)
+	};
+}
+//#endregion
+//#region src/utils/parameters.ts
+/**
+* Get the default viewport size from the Storybook parameters.
+*/
+function getDefaultViewport(parameters) {
+	const defaultViewport = parameters?.viewport?.defaultViewport;
+	if (defaultViewport) return getViewport(parameters, defaultViewport);
+	return null;
+}
+/**
+* Get the viewport size from the Storybook parameters.
+*/
+function getViewport(parameters, viewportName) {
+	if (typeof viewportName === "number") return {
+		width: viewportName,
+		height: 720
+	};
+	const viewports = parameters?.viewport?.viewports;
+	if (viewports && viewportName in viewports) {
+		if ("styles" in viewports[viewportName] && viewports[viewportName].styles) {
+			const width = parseInt(viewports[viewportName].styles.width, 10);
+			const height = parseInt(viewports[viewportName].styles.height, 10);
+			if (!isNaN(width) && !isNaN(height)) return {
+				width,
+				height
+			};
+		}
+	}
+	return null;
+}
+/**
+* Get the Argos parameters from the Storybook context.
+*/
+function getArgosParameters(parameters) {
+	if ("argos" in parameters && parameters.argos && typeof parameters.argos === "object") return parameters.argos;
+	if ("chromatic" in parameters && parameters.chromatic && typeof parameters.chromatic === "object") return parameters.chromatic;
+	return null;
+}
+const DEFAULT_FIT_TO_CONTENT = {
+	padding: 16,
+	zoom: 2
+};
+function getFitToContentFromParameters(parameters) {
+	const argosParameters = getArgosParameters(parameters);
+	if (argosParameters && "fitToContent" in argosParameters) {
+		if (typeof argosParameters.fitToContent === "boolean") return argosParameters.fitToContent ? DEFAULT_FIT_TO_CONTENT : null;
+		if (typeof argosParameters.fitToContent === "object" && argosParameters.fitToContent) return {
+			...DEFAULT_FIT_TO_CONTENT,
+			...argosParameters.fitToContent
+		};
+	}
+	return DEFAULT_FIT_TO_CONTENT;
+}
+//#endregion
+//#region src/utils/screenshot.ts
+/**
+* Take a screenshot in the context of a Storybook story.
+*/
+async function storybookArgosScreenshot(handler, context, options) {
+	const argosOptions = {
+		...options,
+		stabilize: options?.stabilize ?? {
+			waitForAriaBusy: false,
+			...typeof options?.stabilize === "object" ? options.stabilize : {}
+		}
+	};
+	const version = await getArgosStorybookVersion();
+	const storyUrl = `http://localhost:6006/?path=/story/${context.story.id}`;
+	const metadata = {
+		sdk: {
+			name: "@argos-ci/storybook",
+			version
+		},
+		playwrightLibraries: context.playwrightLibraries,
+		url: storyUrl,
+		test: context.test,
+		story: getStoryMetadata(context.story)
+	};
+	const modes = getArgosParameters(context.story.parameters)?.modes;
+	const allAttachments = [];
+	if (context.mode === "automatic") if (modes) for (const [name, globals] of Object.entries(modes)) {
+		if (globals.disabled) continue;
+		await handler.evaluate((name) => {
+			globalThis.__ARGOS_CURRENT_MODE = name;
+		}, name);
+		const attachments = await runHooksAndScreenshot({
+			handler,
+			context,
+			metadata,
+			options: argosOptions,
+			suffix: getModeSuffix(name),
+			mode: name,
+			globals: {
+				...context.story.globals,
+				...globals
+			}
+		});
+		allAttachments.push(...attachments);
+		await context.setViewportSize("initial");
+		await handler.evaluate(() => {
+			delete globalThis.__ARGOS_CURRENT_MODE;
+		});
+	}
+	else {
+		const attachments = await runHooksAndScreenshot({
+			handler,
+			context,
+			metadata,
+			options: argosOptions,
+			mode: null,
+			globals: context.story.globals ?? {}
+		});
+		await context.setViewportSize("initial");
+		allAttachments.push(...attachments);
+	}
+	else if (context.mode === "manual") {
+		const currentMode = await handler.evaluate(() => {
+			return globalThis.__ARGOS_CURRENT_MODE || null;
+		});
+		if (modes && !currentMode) return;
+		await markStoryAsRendered(handler, context.story.id);
+		DO_NOT_USE_setMetadataConfig({
+			...metadata,
+			story: getStoryMetadata(context.story, currentMode)
+		});
+		await argosScreenshot(handler, composeName(context.name, getModeSuffix(currentMode)), options);
+	}
+	await context.afterScreenshot?.({
+		handler,
+		globals: {}
+	});
+	return allAttachments;
+}
+/**
+* Run the story with the given globals.
+*/
+async function runStory(args) {
+	const { handler, globals, storyId } = args;
+	await handler.evaluate(async (globals) => {
+		if ("__ARGOS_STORYBOOK_STORY" in globalThis) {
+			const storyFn = globalThis.__ARGOS_STORYBOOK_STORY;
+			if (!storyFn) throw new Error("@argos-ci/storybook: Unable to find `__ARGOS_STORYBOOK_STORY`.");
+			const canvasElement = (() => {
+				document.getElementById("storybook-root")?.remove();
+				const canvasElement = document.createElement("div");
+				canvasElement.id = "storybook-root";
+				document.body.appendChild(canvasElement);
+				return canvasElement;
+			})();
+			await storyFn.run({
+				globals,
+				canvasElement
+			});
+			return;
+		}
+		const channel = (() => {
+			if ("__STORYBOOK_PREVIEW__" in globalThis) return globalThis.__STORYBOOK_PREVIEW__.channel;
+			return null;
+		})();
+		if (!channel) throw new Error("@argos-ci/storybook: Unable to find `__STORYBOOK_PREVIEW__`.");
+		const initialGlobals = channel.last("globalsUpdated")?.[0].initialGlobals;
+		channel.emit("updateGlobals", { globals: {
+			...initialGlobals,
+			...globals
+		} });
+	}, globals);
+	await markStoryAsRendered(handler, storyId);
+}
+/**
+* Notify Storybook that the story has been rendered.
+* It will run all the necessary hooks (like pseudo-states).
+*/
+async function markStoryAsRendered(handler, storyId) {
+	await handler.evaluate((storyId) => {
+		if ("__ARGOS_STORYBOOK_STORY" in globalThis) {
+			const addons = globalThis.__STORYBOOK_ADDONS_PREVIEW;
+			if (!addons) throw new Error("@argos-ci/storybook: Unable to find `__STORYBOOK_ADDONS_PREVIEW`.");
+			addons.getChannel().emit("storyRendered", storyId);
+		}
+	}, storyId);
+}
+/**
+* Wait for the page to be ready and take a screenshot.
+*/
+async function runHooksAndScreenshot(args) {
+	const { handler, context, options, globals, metadata, mode } = args;
+	await runStory({
+		handler,
+		globals,
+		storyId: context.story.id
+	});
+	const viewport = (globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null) ?? getDefaultViewport(context.story.parameters) ?? "default";
+	await context.setViewportSize(viewport);
+	DO_NOT_USE_setMetadataConfig({
+		...metadata,
+		story: getStoryMetadata(context.story, mode),
+		viewport: viewport && viewport !== "default" ? viewport : void 0
+	});
+	await context.beforeScreenshot?.({
+		handler,
+		globals
+	});
+	return argosScreenshot(handler, composeName(context.name, args.suffix), options);
+}
+function getModeSuffix(mode) {
+	return mode ? ` mode-[${mode}]` : "";
+}
+function composeName(name, suffix) {
+	return name + (suffix ?? "");
+}
+//#endregion
+//#region src/vitest-reporter.ts
+var ArgosReporter = class {
+	vitest;
+	config;
+	constructor(config) {
+		this.config = config;
+	}
+	onInit(vitest) {
+		this.vitest = vitest;
+	}
+	async onFinished() {
+		await this.onTestRunEnd();
+	}
+	async onTestRunEnd() {
+		if (this.vitest.config.watch) return;
+		const res = await upload(this.config);
+		console.log(`✅ Argos build created: ${res.build.url}`);
+	}
+};
+//#endregion
+//#region src/vitest-plugin.ts
+/**
+* Create a command for taking Argos screenshots in Vitest.
+*/
+const createArgosScreenshotCommand = (pluginOptions) => {
+	const screenshotOptions = pluginOptions ?? {};
+	return async (ctx, testContext) => {
+		const frame = await ctx.frame();
+		const fitToContent = getFitToContentFromParameters(testContext.story.parameters);
+		const after = await before(ctx);
+		const attachments = await storybookArgosScreenshot(frame, {
+			...testContext,
+			playwrightLibraries: ["@storybook/addon-vitest"],
+			setViewportSize: async (size) => {
+				await ctx.page.evaluate(({ size, fullPage }) => {
+					const iframe = document.querySelector("iframe[data-vitest=\"true\"]");
+					if (!(iframe instanceof HTMLIFrameElement)) throw new Error("Vitest iframe not found");
+					if (!iframe.contentDocument) throw new Error("Vitest iframe contentDocument not found");
+					if (size === "initial") {
+						if (iframe.dataset.initialWidth && iframe.dataset.initialHeight) {
+							iframe.style.width = iframe.dataset.initialWidth;
+							iframe.style.height = iframe.dataset.initialHeight;
+						}
+						return;
+					}
+					if (!iframe.dataset.initialWidth && !iframe.dataset.initialHeight) {
+						iframe.dataset.initialWidth = iframe.style.width;
+						iframe.dataset.initialHeight = iframe.style.height;
+					}
+					if (size !== "default") iframe.style.width = `${size.width}px`;
+					if (fullPage) {
+						if (!iframe.contentWindow) throw new Error(`Can't access iframe window`);
+						const viewportHeight = size === "default" ? iframe.contentWindow.innerHeight : size.height;
+						iframe.style.height = "auto";
+						iframe.style.height = viewportHeight < iframe.contentDocument.body.offsetHeight ? `${iframe.contentDocument.body.offsetHeight}px` : "100%";
+					} else if (size !== "default") {
+						iframe.style.height = "auto";
+						iframe.style.height = `${size.height}px`;
+					}
+				}, {
+					size,
+					fullPage: screenshotOptions.fullPage ?? !fitToContent
+				});
+			}
+		}, applyFitToContent(screenshotOptions, fitToContent));
+		await after();
+		return attachments;
+	};
+};
+/**
+* Run before taking the screenshots.
+* Remove the scale from vitest "vitest-tester" div
+* to avoid ending up with small screenshots.
+* @returns A function to restore the scale after the test.
+*/
+async function before(ctx) {
+	await ctx.page.evaluate(() => {
+		const tester = document.getElementById("vitest-tester");
+		if (!(tester instanceof HTMLElement)) return;
+		if (!tester.getAttribute("data-scale")) throw new Error("Vitest iframe data-scale attribute not found");
+		tester.dataset.bckTransform = tester.style.transform;
+		tester.style.transform = `scale(1)`;
+	});
+	return async () => {
+		await ctx.page.evaluate(() => {
+			const tester = document.getElementById("vitest-tester");
+			if (!(tester instanceof HTMLElement)) return;
+			tester.style.transform = tester.dataset.bckTransform ?? "";
+		});
+	};
+}
+/**
+* Apply fitToContent options to the screenshot options.
+*/
+function applyFitToContent(options, fitToContent) {
+	if (!fitToContent) return options;
+	const { padding, zoom } = fitToContent;
+	return {
+		...options,
+		element: "body",
+		argosCSS: `body { padding: ${padding}px; width: fit-content; height: fit-content; min-height: initial; zoom: ${zoom}; }` + (options?.argosCSS ?? "")
+	};
+}
+const cwd = process.cwd();
+function argosVitestPlugin(options) {
+	const { root: unresolvedRoot = "./screenshots", uploadToArgos, ...otherOptions } = options ?? {};
+	const root = resolve(cwd, unresolvedRoot);
+	const setupFile = resolve(dirname(fileURLToPath(import.meta.url)), "./vitest-setup-file.mjs");
+	return {
+		name: "@argos-ci/storybook/vitest-plugin",
+		configureVitest({ vitest, project }) {
+			project.config.setupFiles.push(setupFile);
+			if (uploadToArgos) vitest.config.reporters.push(new ArgosReporter({
+				...otherOptions,
+				root
+			}));
+		},
+		config() {
+			return {
+				optimizeDeps: { include: ["@argos-ci/storybook/internal/vitest-setup-file"] },
+				test: { browser: { commands: { argosScreenshot: createArgosScreenshotCommand({
+					...otherOptions,
+					root
+				}) } } }
+			};
+		}
+	};
+}
+//#endregion
+export { argosVitestPlugin, createArgosScreenshotCommand };

package/dist/vitest-setup-file.mjs

@@ -0,0 +1,57 @@
+import { afterEach } from "vitest";
+//#region src/utils/storyMetadata.ts
+function toArray(v) {
+	return Array.isArray(v) ? v : v ? [v] : [];
+}
+function mergeTags(...tags) {
+	const merged = tags.flatMap((tags) => toArray(tags));
+	return Array.from(new Set(merged)).filter((tag) => typeof tag === "string" && tag !== "");
+}
+/**
+* Return whether a story context has a play function.
+* Handles both the `play` field (plain story function) and the legacy
+* `playFunction` field present in older Storybook test-runner contexts.
+*/
+function hasPlay(storyContext) {
+	if (!storyContext || typeof storyContext !== "object") return false;
+	return "play" in storyContext && typeof storyContext.play === "function" || "playFunction" in storyContext && typeof storyContext.playFunction === "function";
+}
+//#endregion
+//#region src/vitest.ts
+/**
+* Setup Argos hooks for Vitest.
+*/
+function setupArgos(api) {
+	api.afterEach(async (ctx) => {
+		const story = "story" in ctx ? ctx.story : null;
+		if (!story) throw new Error(`@argos-ci/storybook/vitest-plugin should be used with @storybook/addon-vitest/vitest-plugin`);
+		const { server } = await import("vitest/browser");
+		globalThis.__ARGOS_STORYBOOK_STORY = story;
+		await server.commands.argosScreenshot({
+			mode: "automatic",
+			name: story.id,
+			story: {
+				id: story.id,
+				tags: mergeTags(story.tags, story.parameters.tags),
+				play: hasPlay(story),
+				parameters: story.parameters,
+				globals: story.globals
+			},
+			test: {
+				id: ctx.task.id,
+				title: ctx.task.name,
+				titlePath: [ctx.task.file.name, ctx.task.name],
+				location: {
+					line: ctx.task.location?.line ?? 1,
+					column: ctx.task.location?.column ?? 1,
+					file: ctx.task.file.filepath
+				}
+			}
+		});
+	});
+}
+//#endregion
+//#region src/vitest-setup-file.ts
+setupArgos({ afterEach });
+//#endregion
+export {};

package/dist/vitest.d.mts

@@ -0,0 +1,62 @@
+import * as vitest from "vitest";
+import { ArgosAttachment, ArgosScreenshotOptions as ArgosScreenshotOptions$1, MetadataConfig } from "@argos-ci/playwright";
+import { Frame, Page, ViewportSize } from "playwright";
+//#region src/utils/parameters.d.ts
+type StorybookGlobals = Record<string, any>;
+//#endregion
+//#region src/utils/screenshot.d.ts
+type StorybookScreenshotContext<Handler extends Page | Frame> = {
+  /**
+   * - "manual" means the `argosScreenshot` has been called in the story play function.
+   * - "automatic" means the screenshot is taken automatically after each test.
+   */
+  mode: "manual" | "automatic";
+  name: string;
+  playwrightLibraries: string[];
+  test?: MetadataConfig["test"];
+  setViewportSize: (size: ViewportSize | "default" | "initial") => Promise<void>;
+  beforeScreenshot?: (input: {
+    handler: Handler;
+    globals: StorybookGlobals;
+  }) => Promise<void>;
+  afterScreenshot?: (input: {
+    handler: Handler;
+    globals: StorybookGlobals;
+  }) => Promise<void>;
+  story: {
+    id: string;
+    tags?: string[];
+    play?: boolean;
+    parameters: Record<string, any>;
+    globals: StorybookGlobals | null;
+  };
+};
+type ArgosScreenshotOptions = Omit<ArgosScreenshotOptions$1, "viewports">;
+//#endregion
+//#region src/vitest-plugin.d.ts
+type ArgosScreenshotCommandArgs = [Pick<StorybookScreenshotContext<Frame>, "name" | "story" | "test" | "mode">];
+//#endregion
+//#region src/vitest.d.ts
+declare module "vitest/browser" {
+  interface BrowserCommands {
+    argosScreenshot: (...args: ArgosScreenshotCommandArgs) => Promise<ArgosAttachment[]>;
+  }
+}
+/**
+ * Setup Argos hooks for Vitest.
+ */
+declare function setupArgos(api: {
+  afterEach: typeof vitest.afterEach;
+}): void;
+/**
+ * Take an Argos screenshot of a story in Vitest.
+ */
+declare function argosScreenshot(story: {
+  parameters: Record<string, any>;
+  globals: StorybookGlobals | null;
+  id: string;
+  tags?: string[];
+  play?: unknown;
+}, name: string): Promise<void>;
+//#endregion
+export { type ArgosScreenshotOptions, argosScreenshot, setupArgos };

package/dist/vitest.mjs

@@ -0,0 +1,82 @@
+//#region src/utils/storyMetadata.ts
+function toArray(v) {
+	return Array.isArray(v) ? v : v ? [v] : [];
+}
+function mergeTags(...tags) {
+	const merged = tags.flatMap((tags) => toArray(tags));
+	return Array.from(new Set(merged)).filter((tag) => typeof tag === "string" && tag !== "");
+}
+/**
+* Return whether a story context has a play function.
+* Handles both the `play` field (plain story function) and the legacy
+* `playFunction` field present in older Storybook test-runner contexts.
+*/
+function hasPlay(storyContext) {
+	if (!storyContext || typeof storyContext !== "object") return false;
+	return "play" in storyContext && typeof storyContext.play === "function" || "playFunction" in storyContext && typeof storyContext.playFunction === "function";
+}
+//#endregion
+//#region src/vitest.ts
+/**
+* Setup Argos hooks for Vitest.
+*/
+function setupArgos(api) {
+	api.afterEach(async (ctx) => {
+		const story = "story" in ctx ? ctx.story : null;
+		if (!story) throw new Error(`@argos-ci/storybook/vitest-plugin should be used with @storybook/addon-vitest/vitest-plugin`);
+		const { server } = await import("vitest/browser");
+		globalThis.__ARGOS_STORYBOOK_STORY = story;
+		await server.commands.argosScreenshot({
+			mode: "automatic",
+			name: story.id,
+			story: {
+				id: story.id,
+				tags: mergeTags(story.tags, story.parameters.tags),
+				play: hasPlay(story),
+				parameters: story.parameters,
+				globals: story.globals
+			},
+			test: {
+				id: ctx.task.id,
+				title: ctx.task.name,
+				titlePath: [ctx.task.file.name, ctx.task.name],
+				location: {
+					line: ctx.task.location?.line ?? 1,
+					column: ctx.task.location?.column ?? 1,
+					file: ctx.task.file.filepath
+				}
+			}
+		});
+	});
+}
+/**
+* Take an Argos screenshot of a story in Vitest.
+*/
+async function argosScreenshot(story, name) {
+	if (!await checkIsVitestEnv()) return;
+	const { server } = await import("vitest/browser");
+	await server.commands.argosScreenshot({
+		mode: "manual",
+		name: `${story.id}/${name}`,
+		story: {
+			id: story.id,
+			tags: mergeTags(story.tags, story.parameters.tags),
+			play: hasPlay(story),
+			parameters: story.parameters,
+			globals: story.globals
+		}
+	});
+}
+/**
+* Check if we are running in a Vitest environment.
+*/
+async function checkIsVitestEnv() {
+	try {
+		await import("vitest");
+		return true;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+export { argosScreenshot, setupArgos };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/storybook",
   "description": "Visual testing for Storybook test runner.",
-  "version": "5.2.14",
+  "version": "5.3.0",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -27,59 +27,59 @@
   "type": "module",
   "exports": {
     "./test-runner": {
-      "types": "./dist/test-runner.d.ts",
-      "import": "./dist/test-runner.js",
+      "types": "./dist/test-runner.d.mts",
+      "import": "./dist/test-runner.mjs",
       "require": "./dist/test-runner.cjs",
       "default": "./dist/test-runner.cjs"
     },
     "./vitest": {
-      "types": "./dist/vitest.d.ts",
-      "import": "./dist/vitest.js",
-      "default": "./dist/vitest.js"
+      "types": "./dist/vitest.d.mts",
+      "import": "./dist/vitest.mjs",
+      "default": "./dist/vitest.mjs"
     },
     "./vitest-plugin": {
-      "types": "./dist/vitest-plugin.d.ts",
-      "import": "./dist/vitest-plugin.js",
-      "default": "./dist/vitest-plugin.js"
+      "types": "./dist/vitest-plugin.d.mts",
+      "import": "./dist/vitest-plugin.mjs",
+      "default": "./dist/vitest-plugin.mjs"
     },
-    "./internal/vitest-setup-file": "./dist/vitest-setup-file.js",
+    "./internal/vitest-setup-file": "./dist/vitest-setup-file.mjs",
     "./package.json": "./package.json"
   },
   "engines": {
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@argos-ci/playwright": "6.4.2",
-    "@argos-ci/util": "3.2.0"
+    "@argos-ci/playwright": "6.6.0",
+    "@argos-ci/util": "3.4.0"
   },
   "devDependencies": {
-    "@argos-ci/cli": "4.1.1",
-    "@argos-ci/core": "5.1.1",
+    "@argos-ci/cli": "4.1.3",
+    "@argos-ci/core": "5.1.3",
     "@argos-ci/util": "workspace:*",
-    "@storybook/addon-docs": "^10.2.3",
-    "@storybook/addon-links": "^10.2.3",
-    "@storybook/addon-themes": "^10.2.3",
-    "@storybook/addon-vitest": "^10.2.3",
-    "@storybook/react-vite": "^10.2.3",
-    "@storybook/test-runner": "^0.24.2",
-    "@types/react": "^19.2.10",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-links": "^10.3.3",
+    "@storybook/addon-themes": "^10.3.3",
+    "@storybook/addon-vitest": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@storybook/test-runner": "^0.24.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser": "^4.0.18",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
-    "@vitest/ui": "^4.0.18",
+    "@vitest/browser": "^4.1.2",
+    "@vitest/browser-playwright": "^4.1.2",
+    "@vitest/coverage-v8": "^4.1.2",
+    "@vitest/ui": "^4.1.2",
     "http-server": "^14.1.1",
-    "playwright": "^1.58.1",
+    "playwright": "^1.58.2",
     "prop-types": "^15.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "storybook": "^10.2.3",
-    "storybook-addon-pseudo-states": "^10.2.3",
+    "storybook": "^10.3.3",
+    "storybook-addon-pseudo-states": "^10.3.3",
     "vitest": "catalog:",
-    "wait-on": "^9.0.3"
+    "wait-on": "^9.0.4"
   },
   "scripts": {
-    "build": "tsup && cp ./src/test-runner.cjs ./dist",
+    "build": "tsdown && cp ./src/test-runner.cjs ./dist",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test-storybook": "cross-env NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules test-storybook",
@@ -98,5 +98,5 @@
     "check-format": "prettier --check --ignore-unknown --ignore-path=./.gitignore --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
     "lint": "eslint ."
   },
-  "gitHead": "52b2c59dc89e972ea9951dc7a94bf8f7d7922e4a"
+  "gitHead": "b49d186d5eb6e1338982a4cd5c3cb29e6cb0b7af"
 }