webanvil 0.0.10 → 0.0.11

package/README.md

@@ -56,17 +56,17 @@ wa typecheck   # type-check the project
 What it includes
 ----------------
 
-| Project job                | WebAnvil command                                       | Tool                             |
-| -------------------------- | ------------------------------------------------------ | -------------------------------- |
-| Web builds and development | `wa build`, `wa dev`, `wa preview`                     | Vite                             |
-| Node builds and watch mode | `wa build`, `wa dev`                                   | Rolldown                         |
-| Storybook development      | `wa build --mode storybook`, `wa dev --mode storybook` | Storybook                        |
-| Tracked output cleanup     | `wa clean`                                             | WebAnvil                         |
-| Static checks              | `wa check`                                             | Oxfmt, Oxlint, TypeScript Native |
-| Tests                      | `wa test`                                              | Vitest                           |
-| Linting                    | `wa lint`                                              | Oxlint                           |
-| Formatting                 | `wa format`                                            | Oxfmt                            |
-| Type checking              | `wa typecheck`                                         | TypeScript Native                |
+| Project job                | WebAnvil command                   | Tool                             |
+| -------------------------- | ---------------------------------- | -------------------------------- |
+| Web builds and development | `wa build`, `wa dev`, `wa preview` | Vite                             |
+| Node builds and watch mode | `wa build`, `wa dev`               | Rolldown                         |
+| Design-system Storybook    | `wa build`, `wa dev`, `wa preview` | Storybook                        |
+| Tracked output cleanup     | `wa clean`                         | WebAnvil                         |
+| Static checks              | `wa check`                         | Oxfmt, Oxlint, TypeScript Native |
+| Tests                      | `wa test`                          | Vitest                           |
+| Linting                    | `wa lint`                          | Oxlint                           |
+| Formatting                 | `wa format`                        | Oxfmt                            |
+| Type checking              | `wa typecheck`                     | TypeScript Native                |
 
 Getting started
 ---------------
@@ -159,46 +159,41 @@ WebAnvil includes Storybook, the supported Vite framework adapters, Vitest's
 browser support, and Chromium. Add only a Storybook configuration and your
 project's normal framework dependencies.
 
-For example, a Svelte project can use this `.storybook/main.ts`:
-
-```ts
-import { framework, type StorybookConfig } from "webanvil/storybook/svelte"
-
-export default {
-    framework,
-    stories: ["../src/**/*.stories.@(js|ts|svelte)"]
-} satisfies StorybookConfig
-```
-
-Use `webanvil/storybook/react`, `webanvil/storybook/vue`, or
-`webanvil/storybook/web-components` for those frameworks. The WebAnvil wrapper
-uses the framework plugins already declared in `webanvil.config.*`.
-
-Set Storybook as the project's build mode when it is the primary development
-target:
+For a Node design-system project, configure Storybook beside the package build:
 
 ```ts
+import { svelte } from "@sveltejs/vite-plugin-svelte"
 import { defineConfig } from "webanvil"
 
 export default defineConfig({
-    build: { mode: "storybook" }
+    build: { mode: "node", entries: { ".": "src/index.ts" }, outDir: "dist" },
+    storybook: { framework: "svelte", port: 6006, outDir: "storybook-static" },
+    vite: { plugins: [svelte()] }
 })
 ```
 
-Or select it for one command:
+Then keep `.storybook/main.ts` focused on stories and addons:
 
-```sh
-wa dev --mode storybook
-wa build --mode storybook
+```ts
+import type { StorybookConfig } from "webanvil/storybook/svelte"
+
+export default {
+    stories: ["../src/**/*.stories.@(js|ts|svelte)"],
+    addons: ["@storybook/addon-a11y"]
+} satisfies StorybookConfig
 ```
 
-The build writes to `storybook-static` unless `storybook.outDir` in
-`webanvil.config.*` or `--out-dir` selects another directory. `wa test`
-automatically runs Storybook stories, including `play` functions, when it finds
-`.storybook/main.*`. Set `storybook.test: false` to exclude them. Chromium is
-downloaded by `@playwright/browser-chromium` when your package manager runs
-install scripts. If the project declares Vitest, Storybook tests require
-version `4.1.10` to match the bundled browser provider.
+`wa dev` starts the package watcher, waits for its first successful build, then
+starts Storybook. `wa build` creates the package output and static Storybook.
+`wa preview` serves the static Storybook output. `wa clean` removes both sets of
+tracked files. `--host` and `--port` on `wa dev` configure Storybook. The
+package build still owns `--out-dir`.
+
+Set `storybook.test: false` to exclude Storybook stories, including `play`
+functions, from `wa test`. Chromium is downloaded by
+`@playwright/browser-chromium` when your package manager runs install scripts.
+If the project declares Vitest, Storybook tests require version `4.1.10` to
+match the bundled browser provider.
 
 ### A Node project
 
@@ -534,16 +529,16 @@ That lets a project standardize on `wa` now and move settings into `webanvil.con
 Command reference
 -----------------
 
-| Command                   | Description                                                           | Options                                                                                                                                                           |
-| ------------------------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `wa build [entry]`        | Builds with Vite in web mode, Rolldown in Node mode, or Storybook.    | `--mode`, `--out-dir`, `--copy`, `--bundle`, `--no-bundle`, `--formats`, `--declaration`, `--sourcemap`, `--minify`, `--platform`, `--target`                     |
-| `wa clean`                | Removes files emitted by prior WebAnvil builds.                       | No options                                                                                                                                                        |
-| `wa check`                | Checks formatting, linting, and types, stopping on the first failure. | `--fix`                                                                                                                                                           |
-| `wa dev [entry]`          | Starts Vite, a Node build watcher, or Storybook.                      | `--mode`, `--out-dir`, `--host`, `--port`, `--copy`, `--bundle`, `--no-bundle`, `--formats`, `--declaration`, `--sourcemap`, `--minify`, `--platform`, `--target` |
-| `wa preview`              | Serves a Vite production build.                                       | `--out-dir`, `--host`, `--port`, `--open`                                                                                                                         |
-| `wa test [filters...]`    | Runs Vitest once, in watch mode, with coverage, or UI.                | `--environment`, `--watch`, `--coverage`, `--ui`, `--ui-port`                                                                                                     |
-| `wa lint [paths...]`      | Runs Oxlint and treats warnings as failures.                          | `--fix`                                                                                                                                                           |
-| `wa format [paths...]`    | Formats with Oxfmt.                                                   | `--check`                                                                                                                                                         |
-| `wa typecheck [paths...]` | Type-checks with TypeScript Native.                                   | No options                                                                                                                                                        |
+| Command                   | Description                                                                                               | Options                                                                                                                                                           |
+| ------------------------- | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `wa build [entry]`        | Builds with Vite in web mode or Rolldown in Node mode. A configured Storybook builds with a Node project. | `--mode`, `--out-dir`, `--copy`, `--bundle`, `--no-bundle`, `--formats`, `--declaration`, `--sourcemap`, `--minify`, `--platform`, `--target`                     |
+| `wa clean`                | Removes files emitted by prior WebAnvil builds.                                                           | No options                                                                                                                                                        |
+| `wa check`                | Checks formatting, linting, and types, stopping on the first failure.                                     | `--fix`                                                                                                                                                           |
+| `wa dev [entry]`          | Starts Vite or a Node build watcher. A configured Storybook starts with the Node watcher.                 | `--mode`, `--out-dir`, `--host`, `--port`, `--copy`, `--bundle`, `--no-bundle`, `--formats`, `--declaration`, `--sourcemap`, `--minify`, `--platform`, `--target` |
+| `wa preview`              | Serves a Vite production build or configured static Storybook output.                                     | `--out-dir`, `--host`, `--port`, `--open`                                                                                                                         |
+| `wa test [filters...]`    | Runs Vitest once, in watch mode, with coverage, or UI.                                                    | `--environment`, `--watch`, `--coverage`, `--ui`, `--ui-port`                                                                                                     |
+| `wa lint [paths...]`      | Runs Oxlint and treats warnings as failures.                                                              | `--fix`                                                                                                                                                           |
+| `wa format [paths...]`    | Formats with Oxfmt.                                                                                       | `--check`                                                                                                                                                         |
+| `wa typecheck [paths...]` | Type-checks with TypeScript Native.                                                                       | No options                                                                                                                                                        |
 
 Run `wa <command> --help` for the complete reference for a command.

package/dist/_chunks/commands.mjs

@@ -1,9 +1,9 @@
-import { assertSyntaxTarget, hasOxcConfig, hasStorybookConfig, hasToolConfig, loadConfig, resolveEffectiveBuildConfig, resolveRolldownPlugins, resolveVitePlugins, syntaxTargetSchema, withConfig } from "./config.mjs";
+import { assertSyntaxTarget, effectiveUserConfigSchema, hasOxcConfig, hasStorybookConfig, hasToolConfig, loadConfig, resolveEffectiveBuildConfig, resolveRolldownPlugins, resolveVitePlugins, syntaxTargetSchema, withConfig } from "./config.mjs";
 import { Module, createRequire, isBuiltin } from "node:module";
 import { defineArgument, defineCommand, defineOption } from "cmdore";
 import { dirname, isAbsolute, join, relative, resolve } from "pathe";
 import { glob } from "tinyglobby";
-import { access, copyFile, lstat, mkdir, mkdtemp, readFile, realpath, rename, rm, rmdir, writeFile } from "node:fs/promises";
+import { access, copyFile, lstat, mkdir, mkdtemp, readFile, readdir, realpath, rename, rm, rmdir, symlink, writeFile } from "node:fs/promises";
 import { z } from "zod";
 import { dirname as dirname$1, isAbsolute as isAbsolute$1, join as join$1, relative as relative$1, resolve as resolve$1 } from "node:path";
 import { getTsconfig, readTsconfig } from "get-tsconfig";
@@ -1085,15 +1085,68 @@ const useToolExecutable = async (name, toolchain = new Toolchain(process.cwd()))
 	return tool.executable;
 };
 const storybookVitestVersion = "4.1.10";
+const relativeModule = (from, to) => {
+	const path = relative(from, to).replaceAll("\\", "/");
+	return path.startsWith(".") ? path : `./${path}`;
+};
+const storybookMain = async (configDirectory) => {
+	const files = await readdir(configDirectory).catch(() => []);
+	const file = [
+		"js",
+		"mjs",
+		"cjs",
+		"ts",
+		"mts",
+		"cts"
+	].map((extension) => `main.${extension}`).find((name) => files.includes(name));
+	if (file === void 0) throw new Error(`Could not find a Storybook main configuration in ${configDirectory}`);
+	return resolve(configDirectory, file);
+};
+const frameworkDirectory = (framework) => fileURLToPath(new URL(`../storybook/${framework}/`, import.meta.url));
+const prepareStorybookConfig = async (config = {}) => {
+	if (config.framework === void 0) return void 0;
+	const sourceDirectory = resolve(process.cwd(), config.configDir ?? ".storybook");
+	const main = await storybookMain(sourceDirectory);
+	const directory = await mkdtemp(resolve(dirname(sourceDirectory), ".webanvil-storybook-"));
+	try {
+		for (const entry of await readdir(sourceDirectory, { withFileTypes: true })) {
+			if (resolve(sourceDirectory, entry.name) === main) continue;
+			await symlink(resolve(sourceDirectory, entry.name), resolve(directory, entry.name), entry.isDirectory() ? "junction" : "file");
+		}
+		await mkdir(directory, { recursive: true });
+		await writeFile(resolve(directory, "main.ts"), `import config from ${JSON.stringify(relativeModule(directory, main))}\n\nexport default { ...config, framework: ${JSON.stringify(frameworkDirectory(config.framework))} }\n`);
+		return {
+			config: {
+				...config,
+				configDir: directory
+			},
+			cleanup: () => rm(directory, {
+				force: true,
+				recursive: true
+			})
+		};
+	} catch (error) {
+		await rm(directory, {
+			force: true,
+			recursive: true
+		});
+		throw error;
+	}
+};
 const storybookOutputDir = (config = {}, options = {}) => options.outDir ?? config.outDir ?? "storybook-static";
 const exitWithError = (action, exitCode) => {
 	throw new Error(`storybook ${action} exited with code ${exitCode ?? "unknown"}`);
 };
-const runStorybook = async (action, config = {}, options = {}, toolchain = new Toolchain(process.cwd())) => {
+const startStorybook = async (action, config = {}, options = {}, toolchain = new Toolchain(process.cwd())) => {
 	const executable = await useToolExecutable("storybook", toolchain);
-	const configDir = options.configDir ?? config.configDir;
-	const outDir = storybookOutputDir(config, options);
-	const result = await execa(executable, [
+	const prepared = await prepareStorybookConfig({
+		...config,
+		configDir: options.configDir ?? config.configDir
+	});
+	const effective = prepared?.config ?? config;
+	const configDir = effective.configDir;
+	const outDir = storybookOutputDir(effective, options);
+	const child = execa(executable, [
 		action,
 		...configDir === void 0 ? [] : ["--config-dir", configDir],
 		...action === "dev" && options.host !== void 0 ? ["--host", options.host] : [],
@@ -1103,8 +1156,16 @@ const runStorybook = async (action, config = {}, options = {}, toolchain = new T
 		reject: false,
 		stdio: "inherit"
 	});
-	if (result.exitCode !== 0) exitWithError(action, result.exitCode);
+	return {
+		completed: child.then((result) => {
+			if (result.exitCode !== 0) exitWithError(action, result.exitCode);
+		}, (error) => {
+			throw error;
+		}).finally(() => prepared?.cleanup()),
+		stop: () => child.kill("SIGTERM")
+	};
 };
+const runStorybook = async (action, config = {}, options = {}, toolchain = new Toolchain(process.cwd())) => (await startStorybook(action, config, options, toolchain)).completed;
 const createStorybookTestProject = async (config = {}, vitestVersion = storybookVitestVersion) => {
 	if (vitestVersion !== storybookVitestVersion) throw new Error(`Storybook tests require Vitest ${storybookVitestVersion}; Webanvil bundles @vitest/browser-playwright ${storybookVitestVersion}`);
 	const previousVitest = process.env.VITEST;
@@ -1193,13 +1254,9 @@ const minify = defineOption({
 });
 const mode = defineOption({
 	name: "mode",
-	description: "Build mode: web uses Vite, node uses Rolldown, and storybook runs Storybook.",
+	description: "Build mode: web uses Vite and node uses Rolldown.",
 	arity: 1,
-	schema: z.enum([
-		"web",
-		"node",
-		"storybook"
-	])
+	schema: z.enum(["web", "node"])
 });
 const open = defineOption({
 	name: "open",
@@ -1263,24 +1320,6 @@ const noBundle$1 = defineOption({
 	description: "Emit the reachable Node graph with preserveModules, overriding configuration that enables bundling.",
 	arity: 0
 });
-const assertStorybookArguments$1 = (explicit) => {
-	const option = [
-		"bundle",
-		"copy",
-		"declaration",
-		"entry",
-		"formats",
-		"minify",
-		"no-bundle",
-		"platform",
-		"sourcemap",
-		"target"
-	].find((name) => {
-		const value = explicit[name];
-		return name === "bundle" || name === "no-bundle" ? value === true : value !== void 0;
-	});
-	if (option !== void 0) throw new Error(`--${option} is not available in Storybook mode`);
-};
 const outputFiles = (result, outDir) => {
 	if ("on" in result) throw new Error("Web builds cannot use watch mode");
 	return (Array.isArray(result) ? result : [result]).flatMap((output) => output.output.map((file) => resolve(outDir, file.fileName)));
@@ -1356,22 +1395,27 @@ build.publicOutputFiles = async ({ outDir, publicDir }) => publicDir ? (await gl
 	dot: true
 })).map((file) => resolve(outDir, file)) : [];
 build.web = async (web) => [...outputFiles(await web.vite.build(web.config), web.outDir), ...await build.publicOutputFiles(web)];
+const outputContains = (directory, path) => {
+	const location = relative(directory, path);
+	return location === "" || location !== ".." && !location.startsWith("../");
+};
+const assertSeparateStorybookOutput = (outDir, storybook) => {
+	const output = resolve(process.cwd(), outDir);
+	const storybookOutput = resolve(process.cwd(), storybookOutputDir(storybook));
+	if (outputContains(output, storybookOutput) || outputContains(storybookOutput, output)) throw new Error("storybook.outDir must not overlap build.outDir");
+};
+const buildStorybook = async (storybook, toolchain) => {
+	const outputDirectory = storybookOutputDir(storybook);
+	const existing = await removeOutputsIn(outputDirectory);
+	await runStorybook("build", storybook, {}, toolchain);
+	const output = await glob("**/*", {
+		cwd: resolve(process.cwd(), outputDirectory),
+		dot: true,
+		onlyFiles: true
+	});
+	await writeBuildInfo([...existing.output, ...output.map((file) => resolve(outputDirectory, file))]);
+};
 const commandRun$1 = (toolchain) => withConfig((config) => config.build, ({ copy, declaration, formats, minify, mode, entry, "out-dir": outDir, platform, sourcemap, target }, buildConfig, resolvedConfig, explicit) => {
-	if (mode === "storybook") {
-		assertStorybookArguments$1(explicit);
-		const storybookOptions = { outDir: explicit["out-dir"] === void 0 ? void 0 : outDir };
-		const outputDirectory = storybookOutputDir(resolvedConfig.storybook, storybookOptions);
-		return (async () => {
-			const existing = await removeOutputsIn(outputDirectory);
-			await runStorybook("build", resolvedConfig.storybook, storybookOptions, toolchain);
-			const output = await glob("**/*", {
-				cwd: resolve(process.cwd(), outputDirectory),
-				dot: true,
-				onlyFiles: true
-			});
-			await writeBuildInfo([...existing.output, ...output.map((file) => resolve(outputDirectory, file))]);
-		})();
-	}
 	if (explicit.bundle && explicit["no-bundle"]) throw new Error("--bundle and --no-bundle cannot be used together");
 	const effective = resolveEffectiveBuildConfig(resolvedConfig, {
 		bundle: explicit["no-bundle"] ? false : explicit.bundle ? true : buildConfig.bundle,
@@ -1389,13 +1433,17 @@ const commandRun$1 = (toolchain) => withConfig((config) => config.build, ({ copy
 	}, explicit.entry !== void 0);
 	const executableMode = effective.mode;
 	if (executableMode !== "web" && executableMode !== "node") throw new Error("Expected a web or Node build mode");
-	return build(executableMode, effective.entry, effective.outDir, effective, resolvedConfig.plugins ?? [], resolvedConfig.vite, resolvedConfig.rolldown, toolchain, {
-		...explicit.entry === void 0 ? {} : { entry },
-		...explicit["out-dir"] === void 0 ? {} : { outDir },
-		...explicit.minify === void 0 ? {} : { minify },
-		...explicit.sourcemap === void 0 ? {} : { sourcemap },
-		...explicit.target === void 0 ? {} : { target }
-	});
+	return (async () => {
+		if (resolvedConfig.storybook !== void 0) assertSeparateStorybookOutput(effective.outDir, resolvedConfig.storybook);
+		await build(executableMode, effective.entry, effective.outDir, effective, resolvedConfig.plugins ?? [], resolvedConfig.vite, resolvedConfig.rolldown, toolchain, {
+			...explicit.entry === void 0 ? {} : { entry },
+			...explicit["out-dir"] === void 0 ? {} : { outDir },
+			...explicit.minify === void 0 ? {} : { minify },
+			...explicit.sourcemap === void 0 ? {} : { sourcemap },
+			...explicit.target === void 0 ? {} : { target }
+		});
+		if (resolvedConfig.storybook !== void 0) await buildStorybook(resolvedConfig.storybook, toolchain);
+	})();
 });
 var build_default = defineCommand({
 	name: "build",
@@ -1414,11 +1462,11 @@ var build_default = defineCommand({
 		target
 	],
 	run: async (arguments_) => {
-		const config = arguments_.mode === void 0 ? (await loadConfig()).config : void 0;
-		const selectedMode = arguments_.mode ?? config?.build?.mode;
+		const configured = arguments_.mode === void 0 ? (await loadConfig()).config : void 0;
 		const toolchain = new Toolchain(process.cwd());
-		if (selectedMode === "storybook") await toolchain.resolve("storybook");
-		else await Promise.all([toolchain.resolve("vite"), toolchain.resolve("rolldown")]);
+		await Promise.all([toolchain.resolve("vite"), toolchain.resolve("rolldown")]);
+		const config = configured ?? (await loadConfig()).config;
+		if (config.storybook !== void 0) await toolchain.resolve("storybook");
 		return commandRun$1(toolchain)(arguments_, config);
 	}
 });
@@ -1604,25 +1652,6 @@ const noBundle = defineOption({
 	description: "Emit the reachable Node graph with preserveModules, overriding configuration that enables bundling.",
 	arity: 0
 });
-const assertStorybookArguments = (explicit) => {
-	const option = [
-		"bundle",
-		"copy",
-		"declaration",
-		"entry",
-		"formats",
-		"minify",
-		"no-bundle",
-		"out-dir",
-		"platform",
-		"sourcemap",
-		"target"
-	].find((name) => {
-		const value = explicit[name];
-		return name === "bundle" || name === "no-bundle" ? value === true : value !== void 0;
-	});
-	if (option !== void 0) throw new Error(`--${option} is not available in Storybook mode`);
-};
 const dev = async (mode, entry, outDir, host, port, plugins = [], options = {}, viteConfig = {}, rolldownConfig = {}, toolchain = new Toolchain(process.cwd())) => {
 	assertSyntaxTarget(options.target);
 	if (mode === "web" && options.platform !== void 0) throw new Error("Web development does not accept platform; platform applies only to Node builds");
@@ -1654,7 +1683,7 @@ dev.web = async (host, port, plugins = [], waitForTermination = untilTerminated,
 		await server.close();
 	}
 };
-dev.node = async (entry, outDir, plugins = [], waitForTermination = untilTerminated, options = {}, rolldownConfig = {}, toolchain = new Toolchain(process.cwd())) => {
+dev.node = async (entry, outDir, plugins = [], waitForTermination = untilTerminated, options = {}, rolldownConfig = {}, toolchain = new Toolchain(process.cwd()), onBuild) => {
 	assertSyntaxTarget(options.target);
 	const rolldown = await useToolApi("rolldown", void 0, toolchain);
 	const plan = await createNodeBuildPlan(entry, outDir, options, resolveRolldownPlugins(plugins), rolldownConfig, toolchain);
@@ -1676,7 +1705,10 @@ dev.node = async (entry, outDir, plugins = [], waitForTermination = untilTermina
 		}
 		if (event.code === "BUNDLE_END") await event.result.close();
 		if (event.code === "END" && !failed) try {
-			if (await lifecycle.complete() !== void 0) logger.success(`Built ${entry} to ${outDir}`);
+			if (await lifecycle.complete() !== void 0) {
+				logger.success(`Built ${entry} to ${outDir}`);
+				await onBuild?.();
+			}
 		} catch (error) {
 			logger.error(error);
 		}
@@ -1694,14 +1726,31 @@ dev.node = async (entry, outDir, plugins = [], waitForTermination = untilTermina
 		await watcher.close();
 	}
 };
-const commandRun = (toolchain) => withConfig((config) => config.build, ({ copy, declaration, formats, minify, mode, entry, "out-dir": outDir, host, platform, port, sourcemap, target }, buildConfig, resolvedConfig, explicit) => {
-	if (mode === "storybook") {
-		assertStorybookArguments(explicit);
-		return runStorybook("dev", resolvedConfig.storybook, {
-			host,
-			port
+const devWithStorybook = async (entry, outDir, storybook, host, port, plugins = [], options = {}, rolldownConfig = {}, toolchain = new Toolchain(process.cwd()), waitForTermination = untilTerminated) => {
+	let stopNodeWatcher = () => {};
+	const nodeStopped = new Promise((resolve) => {
+		stopNodeWatcher = resolve;
+	});
+	let initialBuild = () => {};
+	const built = new Promise((resolve) => {
+		initialBuild = resolve;
+	});
+	const node = dev.node(entry, outDir, plugins, () => nodeStopped, options, rolldownConfig, toolchain, initialBuild);
+	let storybookProcess;
+	try {
+		await Promise.race([built, node]);
+		storybookProcess = await startStorybook("dev", storybook, {
+			host: host ?? storybook.host,
+			port: port ?? storybook.port
 		}, toolchain);
+		if (await Promise.race([waitForTermination().then(() => "terminated"), storybookProcess.completed.then(() => "storybook")]) === "storybook") throw new Error("Storybook development stopped");
+	} finally {
+		stopNodeWatcher();
+		storybookProcess?.stop();
+		await Promise.allSettled([node, ...storybookProcess === void 0 ? [] : [storybookProcess.completed]]);
 	}
+};
+const commandRun = (toolchain) => withConfig((config) => config.build, ({ copy, declaration, formats, minify, mode, entry, "out-dir": outDir, host, platform, port, sourcemap, target }, buildConfig, resolvedConfig, explicit) => {
 	if (explicit.bundle && explicit["no-bundle"]) throw new Error("--bundle and --no-bundle cannot be used together");
 	const effective = resolveEffectiveBuildConfig(resolvedConfig, {
 		bundle: explicit["no-bundle"] ? false : explicit.bundle ? true : buildConfig.bundle,
@@ -1719,6 +1768,7 @@ const commandRun = (toolchain) => withConfig((config) => config.build, ({ copy,
 	}, explicit.entry !== void 0);
 	const executableMode = effective.mode;
 	if (executableMode !== "web" && executableMode !== "node") throw new Error("Expected a web or Node build mode");
+	if (resolvedConfig.storybook !== void 0) return devWithStorybook(effective.entry, effective.outDir, resolvedConfig.storybook, explicit.host === void 0 ? void 0 : host, explicit.port === void 0 ? void 0 : port, resolvedConfig.plugins ?? [], effective, resolvedConfig.rolldown, toolchain);
 	return dev(executableMode, effective.entry, effective.outDir, host, port, resolvedConfig.plugins ?? [], effective, resolvedConfig.vite, resolvedConfig.rolldown, toolchain);
 });
 var dev_default = defineCommand({
@@ -1740,11 +1790,11 @@ var dev_default = defineCommand({
 		target
 	],
 	run: async (arguments_) => {
-		const config = arguments_.mode === void 0 ? (await loadConfig()).config : void 0;
-		const selectedMode = arguments_.mode ?? config?.build?.mode;
+		const configured = arguments_.mode === void 0 ? (await loadConfig()).config : void 0;
 		const toolchain = new Toolchain(process.cwd());
-		if (selectedMode === "storybook") await toolchain.resolve("storybook");
-		else await Promise.all([toolchain.resolve("vite"), toolchain.resolve("rolldown")]);
+		await Promise.all([toolchain.resolve("vite"), toolchain.resolve("rolldown")]);
+		const config = configured ?? (await loadConfig()).config;
+		if (config.storybook !== void 0) await toolchain.resolve("storybook");
 		return commandRun(toolchain)(arguments_, config);
 	}
 });
@@ -1784,7 +1834,9 @@ var preview_default = defineCommand({
 	run: async ({ "out-dir": outDir, host, port, open }) => {
 		await useTool("vite");
 		const { config } = await loadConfig();
-		return preview(outDir ?? config.build?.outDir ?? "dist", host, port, outDir !== void 0, untilTerminated, open, config.vite);
+		resolveEffectiveBuildConfig(config, {}, false);
+		const storybook = config.storybook;
+		return preview(outDir ?? (storybook === void 0 ? config.build?.outDir ?? "dist" : storybookOutputDir(storybook)), host, port, outDir !== void 0 || storybook !== void 0, untilTerminated, open, config.vite);
 	}
 });
 const test = async (filters, config = {}, options = {}, waitForTermination = untilTerminated, storybook = {}) => {
@@ -1797,57 +1849,65 @@ const test = async (filters, config = {}, options = {}, waitForTermination = unt
 	const nativeConfig = hasVitestConfig ? {} : config;
 	const nativeCoverage = typeof nativeConfig.coverage === "object" && nativeConfig.coverage !== null ? nativeConfig.coverage : {};
 	const nativeApi = typeof nativeConfig.api === "object" && nativeConfig.api !== null ? nativeConfig.api : {};
-	const storybookProject = storybook.test === false || !await hasStorybookConfig(storybook.configDir) ? void 0 : await createStorybookTestProject(storybook, vitestTool.version);
-	const vitestOptions = {
-		...nativeConfig,
-		passWithNoTests: true,
-		run: !persistent,
-		watch: persistent,
-		...options.environment === void 0 ? {} : { environment: options.environment },
-		...options.coverage ? { coverage: {
-			...nativeCoverage,
-			enabled: true,
-			provider: "v8"
-		} } : {},
-		...options.ui ? { ui: true } : {},
-		...options.uiPort === void 0 ? {} : { api: {
-			...nativeApi,
-			host: "127.0.0.1",
-			port: options.uiPort,
-			strictPort: true
-		} }
-	};
-	const vitests = hasVitestConfig && storybookProject !== void 0 ? [await startVitest("test", filters, vitestOptions), await startVitest("test", filters, {
-		...vitestOptions,
-		...options.ui ? {
-			api: false,
-			ui: false
-		} : {},
-		projects: [storybookProject]
-	})] : [await startVitest("test", filters, {
-		...vitestOptions,
-		...storybookProject === void 0 ? {} : { projects: [...nativeConfig.projects ?? [], storybookProject] }
-	})];
-	if (persistent) {
-		try {
-			await waitForTermination();
-		} finally {
-			await Promise.all(vitests.map((vitest) => vitest.close()));
+	const preparedStorybook = storybook.framework === void 0 || storybook.test === false || !await hasStorybookConfig(storybook.configDir) ? void 0 : await prepareStorybookConfig(storybook);
+	try {
+		const storybookProject = preparedStorybook === void 0 ? void 0 : await createStorybookTestProject(preparedStorybook.config, vitestTool.version);
+		const vitestOptions = {
+			...nativeConfig,
+			passWithNoTests: true,
+			run: !persistent,
+			watch: persistent,
+			...options.environment === void 0 ? {} : { environment: options.environment },
+			...options.coverage ? { coverage: {
+				...nativeCoverage,
+				enabled: true,
+				provider: "v8"
+			} } : {},
+			...options.ui ? { ui: true } : {},
+			...options.uiPort === void 0 ? {} : { api: {
+				...nativeApi,
+				host: "127.0.0.1",
+				port: options.uiPort,
+				strictPort: true
+			} }
+		};
+		const vitests = hasVitestConfig && storybookProject !== void 0 ? [await startVitest("test", filters, vitestOptions), await startVitest("test", filters, {
+			...vitestOptions,
+			...options.ui ? {
+				api: false,
+				ui: false
+			} : {},
+			projects: [storybookProject]
+		})] : [await startVitest("test", filters, {
+			...vitestOptions,
+			...storybookProject === void 0 ? {} : { projects: [...nativeConfig.projects ?? [], storybookProject] }
+		})];
+		if (persistent) {
+			try {
+				await waitForTermination();
+			} finally {
+				await Promise.all(vitests.map((vitest) => vitest.close()));
+			}
+			return;
 		}
-		return;
+		const failed = vitests.some((vitest) => vitest.state.getFiles().some((file) => file.result?.state === "fail") || vitest.state.getUnhandledErrors().length > 0);
+		await Promise.all(vitests.map((vitest) => vitest.close()));
+		if (failed) throw new Error("Tests failed");
+		logger.success("Tests passed");
+	} finally {
+		await preparedStorybook?.cleanup();
 	}
-	const failed = vitests.some((vitest) => vitest.state.getFiles().some((file) => file.result?.state === "fail") || vitest.state.getUnhandledErrors().length > 0);
-	await Promise.all(vitests.map((vitest) => vitest.close()));
-	if (failed) throw new Error("Tests failed");
-	logger.success("Tests passed");
-};
-const runTest = withConfig((config) => config.test, ({ filters, environment, coverage, ui, "ui-port": uiPort, watch }, config, resolvedConfig, explicitArguments) => test(filters, config, {
-	coverage,
-	environment: explicitArguments.environment === void 0 ? void 0 : environment,
-	ui,
-	uiPort,
-	watch
-}, untilTerminated, resolvedConfig.storybook));
+};
+const runTest = withConfig((config) => config.test, ({ filters, environment, coverage, ui, "ui-port": uiPort, watch }, config, resolvedConfig, explicitArguments) => {
+	effectiveUserConfigSchema.parse(resolvedConfig);
+	return test(filters, config, {
+		coverage,
+		environment: explicitArguments.environment === void 0 ? void 0 : environment,
+		ui,
+		uiPort,
+		watch
+	}, untilTerminated, resolvedConfig.storybook);
+});
 var test_default = defineCommand({
 	name: "test",
 	arguments: [filters],

package/dist/_chunks/config.mjs

@@ -59,11 +59,7 @@ const syntaxTargetSchema = z.union([z.string().min(1), z.array(z.string().min(1)
 const nativeConfigSchema = () => z.custom((value) => typeof value === "object" && value !== null && !Array.isArray(value), "Expected a configuration object");
 const buildConfigSchema = z.strictObject({
 	bundle: z.boolean().optional(),
-	mode: z.enum([
-		"web",
-		"node",
-		"storybook"
-	]).optional(),
+	mode: z.enum(["web", "node"]).optional(),
 	entry: z.string().min(1).optional(),
 	entries: z.record(z.string().min(1), z.string().min(1)).optional(),
 	outDir: z.string().min(1).optional(),
@@ -86,7 +82,15 @@ const testConfigSchema = nativeConfigSchema();
 const viteConfigSchema = nativeConfigSchema();
 const storybookConfigSchema = z.strictObject({
 	configDir: z.string().min(1).optional(),
+	framework: z.enum([
+		"react",
+		"svelte",
+		"vue",
+		"web-components"
+	]).optional(),
+	host: z.string().min(1).optional(),
 	outDir: z.string().min(1).optional(),
+	port: z.number().int().min(1).max(65535).optional(),
 	test: z.boolean().optional()
 });
 const pluginSchema = z.custom(isWebAnvilPlugin, "Expected a Vite plugin or a WebAnvil plugin created with definePlugin()");
@@ -119,6 +123,18 @@ const effectiveUserConfigSchema = userConfigSchema.superRefine((config, context)
 			message: NODE_PLUGIN_ERROR
 		});
 	}
+	if (config.storybook !== void 0) {
+		if (build.mode !== "node") context.addIssue({
+			code: "custom",
+			path: ["storybook"],
+			message: "storybook is available for Node projects; set build.mode to \"node\""
+		});
+		if (config.storybook.framework === void 0) context.addIssue({
+			code: "custom",
+			path: ["storybook", "framework"],
+			message: "storybook.framework selects the Storybook framework adapter"
+		});
+	}
 });
 const defaultConfig = {
 	build: {

package/dist/index.d.mts

@@ -103,7 +103,6 @@ declare const buildConfigSchema: z.ZodObject<{
   mode: z.ZodOptional<z.ZodEnum<{
     web: "web";
     node: "node";
-    storybook: "storybook";
   }>>;
   entry: z.ZodOptional<z.ZodString>;
   entries: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
@@ -140,7 +139,15 @@ declare const testConfigSchema: z.ZodCustom<TestUserConfig, TestUserConfig>;
 declare const viteConfigSchema: z.ZodCustom<UserConfig$1, UserConfig$1>;
 declare const storybookConfigSchema: z.ZodObject<{
   configDir: z.ZodOptional<z.ZodString>;
+  framework: z.ZodOptional<z.ZodEnum<{
+    react: "react";
+    svelte: "svelte";
+    vue: "vue";
+    "web-components": "web-components";
+  }>>;
+  host: z.ZodOptional<z.ZodString>;
   outDir: z.ZodOptional<z.ZodString>;
+  port: z.ZodOptional<z.ZodNumber>;
   test: z.ZodOptional<z.ZodBoolean>;
 }, z.core.$strict>;
 declare const userConfigSchema: z.ZodObject<{
@@ -149,7 +156,6 @@ declare const userConfigSchema: z.ZodObject<{
     mode: z.ZodOptional<z.ZodEnum<{
       web: "web";
       node: "node";
-      storybook: "storybook";
     }>>;
     entry: z.ZodOptional<z.ZodString>;
     entries: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
@@ -177,7 +183,15 @@ declare const userConfigSchema: z.ZodObject<{
   rolldown: z.ZodOptional<z.ZodCustom<RolldownConfig, RolldownConfig>>;
   storybook: z.ZodOptional<z.ZodObject<{
     configDir: z.ZodOptional<z.ZodString>;
+    framework: z.ZodOptional<z.ZodEnum<{
+      react: "react";
+      svelte: "svelte";
+      vue: "vue";
+      "web-components": "web-components";
+    }>>;
+    host: z.ZodOptional<z.ZodString>;
     outDir: z.ZodOptional<z.ZodString>;
+    port: z.ZodOptional<z.ZodNumber>;
     test: z.ZodOptional<z.ZodBoolean>;
   }, z.core.$strict>>;
   test: z.ZodOptional<z.ZodCustom<TestUserConfig, TestUserConfig>>;
@@ -190,7 +204,6 @@ declare const effectiveUserConfigSchema: z.ZodObject<{
     mode: z.ZodOptional<z.ZodEnum<{
       web: "web";
       node: "node";
-      storybook: "storybook";
     }>>;
     entry: z.ZodOptional<z.ZodString>;
     entries: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
@@ -218,7 +231,15 @@ declare const effectiveUserConfigSchema: z.ZodObject<{
   rolldown: z.ZodOptional<z.ZodCustom<RolldownConfig, RolldownConfig>>;
   storybook: z.ZodOptional<z.ZodObject<{
     configDir: z.ZodOptional<z.ZodString>;
+    framework: z.ZodOptional<z.ZodEnum<{
+      react: "react";
+      svelte: "svelte";
+      vue: "vue";
+      "web-components": "web-components";
+    }>>;
+    host: z.ZodOptional<z.ZodString>;
     outDir: z.ZodOptional<z.ZodString>;
+    port: z.ZodOptional<z.ZodNumber>;
     test: z.ZodOptional<z.ZodBoolean>;
   }, z.core.$strict>>;
   test: z.ZodOptional<z.ZodCustom<TestUserConfig, TestUserConfig>>;
@@ -276,12 +297,11 @@ declare const build: {
 };
 declare const _default: import("cmdore").Command<readonly [{
   readonly name: "mode";
-  readonly description: "Build mode: web uses Vite, node uses Rolldown, and storybook runs Storybook.";
+  readonly description: "Build mode: web uses Vite and node uses Rolldown.";
   readonly arity: 1;
   readonly schema: import("zod").ZodEnum<{
     web: "web";
     node: "node";
-    storybook: "storybook";
   }>;
 }, {
   readonly name: "out-dir";
@@ -364,16 +384,15 @@ declare const _default$2: import("cmdore").Command<readonly import("cmdore").Opt
 declare const dev: {
   (mode: "web" | "node", entry: string, outDir: string, host?: string, port?: number, plugins?: WebAnvilPlugin[], options?: NodeBuildOptions, viteConfig?: UserConfig$1, rolldownConfig?: RolldownConfig, toolchain?: Toolchain): Promise<void>;
   web(host?: string, port?: number, plugins?: WebAnvilPlugin[], waitForTermination?: () => Promise<void>, viteConfig?: UserConfig$1, toolchain?: Toolchain): Promise<void>;
-  node(entry: string, outDir: string, plugins?: WebAnvilPlugin[], waitForTermination?: () => Promise<void>, options?: NodeBuildOptions, rolldownConfig?: RolldownConfig, toolchain?: Toolchain): Promise<void>;
+  node(entry: string, outDir: string, plugins?: WebAnvilPlugin[], waitForTermination?: () => Promise<void>, options?: NodeBuildOptions, rolldownConfig?: RolldownConfig, toolchain?: Toolchain, onBuild?: () => void | Promise<void>): Promise<void>;
 };
 declare const _default$3: import("cmdore").Command<readonly [{
   readonly name: "mode";
-  readonly description: "Build mode: web uses Vite, node uses Rolldown, and storybook runs Storybook.";
+  readonly description: "Build mode: web uses Vite and node uses Rolldown.";
   readonly arity: 1;
   readonly schema: import("zod").ZodEnum<{
     web: "web";
     node: "node";
-    storybook: "storybook";
   }>;
 }, {
   readonly name: "out-dir";
@@ -598,12 +617,11 @@ declare const minify$1: {
 };
 declare const mode: {
   readonly name: "mode";
-  readonly description: "Build mode: web uses Vite, node uses Rolldown, and storybook runs Storybook.";
+  readonly description: "Build mode: web uses Vite and node uses Rolldown.";
   readonly arity: 1;
   readonly schema: z.ZodEnum<{
     web: "web";
     node: "node";
-    storybook: "storybook";
   }>;
 };
 declare const open: {

package/dist/storybook/react/index.d.mts

@@ -1,3 +1,6 @@
-import { StorybookConfig } from "@storybook/react-vite/node";
+import { StorybookConfig as StorybookConfig$1 } from "@storybook/react-vite/node";
+type StorybookConfig = Omit<StorybookConfig$1, "framework"> & {
+  framework?: StorybookConfig$1["framework"];
+};
 declare const framework: string;
-export { type StorybookConfig, framework };
+export { StorybookConfig, framework };

package/dist/storybook/svelte/index.d.mts

@@ -1,3 +1,6 @@
-import { StorybookConfig } from "@storybook/svelte-vite/node";
+import { StorybookConfig as StorybookConfig$1 } from "@storybook/svelte-vite/node";
+type StorybookConfig = Omit<StorybookConfig$1, "framework"> & {
+  framework?: StorybookConfig$1["framework"];
+};
 declare const framework: string;
-export { type StorybookConfig, framework };
+export { StorybookConfig, framework };

package/dist/storybook/vue/index.d.mts

@@ -1,3 +1,6 @@
-import { StorybookConfig } from "@storybook/vue3-vite/node";
+import { StorybookConfig as StorybookConfig$1 } from "@storybook/vue3-vite/node";
+type StorybookConfig = Omit<StorybookConfig$1, "framework"> & {
+  framework?: StorybookConfig$1["framework"];
+};
 declare const framework: string;
-export { type StorybookConfig, framework };
+export { StorybookConfig, framework };

package/dist/storybook/web-components/index.d.mts

@@ -1,3 +1,6 @@
-import { StorybookConfig } from "@storybook/web-components-vite/node";
+import { StorybookConfig as StorybookConfig$1 } from "@storybook/web-components-vite/node";
+type StorybookConfig = Omit<StorybookConfig$1, "framework"> & {
+  framework?: StorybookConfig$1["framework"];
+};
 declare const framework: string;
-export { type StorybookConfig, framework };
+export { StorybookConfig, framework };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "webanvil",
-    "version": "0.0.10",
+    "version": "0.0.11",
     "description": "A unified CLI for building, testing, linting, formatting, and type-checking JavaScript and TypeScript projects.",
     "keywords": [
         "build-tool",