@agimon-ai/po-style-system-tooling 0.2.14-alpha.37 → 0.2.14-alpha.39

package/dist/childProtocol-B7bkYqKI.mjs

@@ -0,0 +1,1731 @@
+import { createRequire } from "node:module";
+import { promises } from "node:fs";
+import * as path$1 from "node:path";
+import path, { dirname } from "node:path";
+import * as os$1 from "node:os";
+import pino from "pino";
+import * as fs from "node:fs/promises";
+import { readFile, readdir } from "node:fs/promises";
+import { randomUUID } from "node:crypto";
+import { z } from "zod";
+import tailwindcss from "@tailwindcss/vite";
+import { viteSingleFile } from "vite-plugin-singlefile";
+import { DatabaseSync } from "node:sqlite";
+import { fileURLToPath } from "node:url";
+import react from "@vitejs/plugin-react";
+//#region src/utils/log.ts
+const logsDir = path$1.join(os$1.tmpdir(), "style-system-logs");
+const logger = pino({
+	level: process.env.LOG_LEVEL || "debug",
+	timestamp: pino.stdTimeFunctions.isoTime
+}, pino.destination({
+	dest: path$1.join(logsDir, "style-system.log"),
+	mkdir: true,
+	sync: true
+}));
+function createLog(directory) {
+	const target = directory === void 0 ? logger : pino({
+		level: "debug",
+		timestamp: pino.stdTimeFunctions.isoTime
+	}, pino.destination({
+		dest: path$1.join(directory, "style-system.log"),
+		mkdir: true,
+		sync: true
+	}));
+	return {
+		debug: (msg, ...args) => target.debug({ args }, msg),
+		info: (msg, ...args) => target.info({ args }, msg),
+		warn: (msg, ...args) => target.warn({ args }, msg),
+		error: (msg, ...args) => target.error({ args }, msg)
+	};
+}
+const log = createLog();
+//#endregion
+//#region src/utils/fsHelpers.ts
+/** True when candidate is root itself or inside it (sibling prefixes like `<root>-evil` are outside). */
+function isContained(root, candidate) {
+	const relative = path.relative(root, candidate);
+	return relative === "" || !relative.startsWith(`..${path.sep}`) && relative !== ".." && !path.isAbsolute(relative);
+}
+async function pathExists(filePath) {
+	try {
+		await fs.access(filePath);
+		return true;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+//#region src/utils/TemplatesManagerService.ts
+var TemplatesManagerService = class TemplatesManagerService {
+	static TOOLKIT_FOLDER = ".toolkit";
+	static SETTINGS_FILE = "settings.yaml";
+	static SETTINGS_LOCAL_FILE = "settings.local.yaml";
+	static TOOLKIT_CONFIG_FILE = "toolkit.yaml";
+	static deepMerge(base, local) {
+		const result = { ...base };
+		for (const [key, localValue] of Object.entries(local)) {
+			const baseValue = result[key];
+			if (localValue !== null && typeof localValue === "object" && !Array.isArray(localValue) && baseValue !== null && typeof baseValue === "object" && !Array.isArray(baseValue)) result[key] = TemplatesManagerService.deepMerge(baseValue, localValue);
+			else result[key] = localValue;
+		}
+		return result;
+	}
+	static mergeToolkitConfigs(base, local) {
+		return TemplatesManagerService.deepMerge(base, local);
+	}
+	static async findWorkspaceRoot(startPath) {
+		let currentPath = path.resolve(startPath);
+		const rootPath = path.parse(currentPath).root;
+		while (true) {
+			if (await pathExists(path.join(currentPath, ".git"))) return currentPath;
+			if (currentPath === rootPath) return process.cwd();
+			currentPath = path.dirname(currentPath);
+		}
+	}
+	static async readToolkitConfig(startPath = process.cwd()) {
+		const workspaceRoot = await TemplatesManagerService.findWorkspaceRoot(startPath);
+		const yaml = await import("js-yaml");
+		const toolkitFolder = path.join(workspaceRoot, TemplatesManagerService.TOOLKIT_FOLDER);
+		const settingsPath = path.join(toolkitFolder, TemplatesManagerService.SETTINGS_FILE);
+		const settingsLocalPath = path.join(toolkitFolder, TemplatesManagerService.SETTINGS_LOCAL_FILE);
+		if (await pathExists(settingsPath)) {
+			const baseContent = await fs.readFile(settingsPath, "utf-8");
+			const base = yaml.load(baseContent);
+			if (await pathExists(settingsLocalPath)) {
+				const localContent = await fs.readFile(settingsLocalPath, "utf-8");
+				const local = yaml.load(localContent);
+				return TemplatesManagerService.mergeToolkitConfigs(base, local);
+			}
+			return base;
+		}
+		const legacyConfigPath = path.join(workspaceRoot, TemplatesManagerService.TOOLKIT_CONFIG_FILE);
+		if (!await pathExists(legacyConfigPath)) return null;
+		const content = await fs.readFile(legacyConfigPath, "utf-8");
+		return yaml.load(content);
+	}
+	static async getWorkspaceRoot(startPath = process.cwd()) {
+		return TemplatesManagerService.findWorkspaceRoot(startPath);
+	}
+};
+//#endregion
+//#region src/services/BundlerService/BaseBundlerService.ts
+/**
+* Abstract base class for bundler service implementations.
+*
+* Subclasses must implement the abstract methods to provide
+* bundler-specific (Vite, Webpack, etc.) and framework-specific
+* (React, Vue, etc.) component rendering logic.
+*
+* @example
+* ```typescript
+* class MyCustomBundlerService extends BaseBundlerService {
+*   async startDevServer(appPath: string): Promise<DevServerResult> {
+*     // Custom dev server logic
+*   }
+*   // ... implement other abstract methods
+* }
+* ```
+*/
+var BaseBundlerService = class {
+	config;
+	/**
+	* Creates a new bundler service instance.
+	* @param config - Service configuration options
+	*/
+	constructor(config = {}) {
+		this.config = config;
+	}
+};
+//#endregion
+//#region src/services/BundlerService/virtualFiles.ts
+/**
+* Virtual files for story bundles.
+*
+* DESIGN PATTERNS:
+* - Vite runs with an empty root; generated inputs (build HTML, wrapper CSS) and per-render
+*   snapshots of declared sources (story, root component) are served from one SQLite file
+* - One store per dev-server run or static build; its owner disposes it
+*
+* AVOID:
+* - Writing generated inputs into the Vite root: Vite's dependency scan and Tailwind's
+*   source scan read everything there, so past renders grow every new one
+*/
+const DATABASE_FILE = "inputs.db";
+const VIRTUAL_FILES_PLUGIN_NAME = "style-system-virtual-files";
+const ID_QUERY_PATTERN = /[?#].*$/;
+/** Vite derives these modules (inline HTML scripts and styles) itself; answering them with the stored HTML breaks the build */
+const HTML_PROXY_QUERY_PATTERN = /[?&]html-proxy\b/;
+const CSS_COMMENT_PATTERN = /(\/\*[\s\S]*?\*\/)/;
+const RELATIVE_DIRECTIVE_PATTERN = /(@(?:import|source|plugin|config|reference)\s+(?:not\s+)?)(['"])(\.\.?\/[^'"]*)\2/g;
+const RELATIVE_SOURCE_FUNCTION_PATTERN = /(source\(\s*)(['"])(\.\.?\/[^'"]*)\2/g;
+const RELATIVE_URL_PATTERN = /url\(\s*(['"]?)(\.\.?\/[^'")]*)\1\s*\)/g;
+var VirtualFileStore = class VirtualFileStore {
+	dir;
+	db;
+	putStatement;
+	getStatement;
+	evictStatement;
+	constructor(dir, db) {
+		this.dir = dir;
+		this.db = db;
+		this.putStatement = db.prepare("INSERT OR REPLACE INTO files (path, render_id, content) VALUES (?, ?, ?)");
+		this.getStatement = db.prepare("SELECT content FROM files WHERE path = ?");
+		this.evictStatement = db.prepare("DELETE FROM files WHERE render_id = ?");
+	}
+	static async open(dir) {
+		await promises.mkdir(dir, { recursive: true });
+		const db = new DatabaseSync(path.join(dir, DATABASE_FILE));
+		db.exec("CREATE TABLE IF NOT EXISTS files (path TEXT PRIMARY KEY, render_id TEXT NOT NULL, content TEXT NOT NULL) STRICT");
+		return new VirtualFileStore(dir, db);
+	}
+	/** Stores a file for one render. Returns true when the content changed, so cached modules can be invalidated. */
+	put(filePath, renderId, content) {
+		const changed = this.get(filePath) !== content;
+		this.putStatement.run(filePath, renderId, content);
+		return changed;
+	}
+	get(filePath) {
+		return this.getStatement.get(filePath)?.content;
+	}
+	/** Drops the rows a render still owns; rows a later render rewrote stay. */
+	evict(renderId) {
+		this.evictStatement.run(renderId);
+	}
+	async dispose() {
+		if (this.db.isOpen) this.db.close();
+		await promises.rm(this.dir, {
+			recursive: true,
+			force: true
+		});
+	}
+};
+/**
+* Serves stored files to Vite. Real paths (snapshotted sources) resolve as usual and only load
+* from the store; generated files under the empty root do not exist on disk, so they resolve here.
+*/
+function createVirtualFilesPlugin(store, root) {
+	return {
+		name: VIRTUAL_FILES_PLUGIN_NAME,
+		enforce: "pre",
+		resolveId(source) {
+			const file = source.replace(ID_QUERY_PATTERN, "");
+			if (!file.startsWith("/")) return void 0;
+			const candidate = file.startsWith(root) ? file : path.join(root, file);
+			return store.get(candidate) === void 0 ? void 0 : `${candidate}${source.slice(file.length)}`;
+		},
+		load(id) {
+			if (HTML_PROXY_QUERY_PATTERN.test(id)) return void 0;
+			return store.get(id.replace(ID_QUERY_PATTERN, ""));
+		}
+	};
+}
+/**
+* Inlines a stylesheet into a wrapper in another folder: relative directives become absolute
+* and relative url() values are rebased onto the wrapper folder. Comments are left untouched.
+*/
+function flattenCss(css, fromDir, wrapperDir) {
+	const absolute = (prefix, quote, relative) => `${prefix}${quote}${path.resolve(fromDir, relative)}${quote}`;
+	return css.split(CSS_COMMENT_PATTERN).map((part, index) => index % 2 === 1 ? part : part.replace(RELATIVE_DIRECTIVE_PATTERN, (_match, prefix, quote, relative) => absolute(prefix, quote, relative)).replace(RELATIVE_SOURCE_FUNCTION_PATTERN, (_match, prefix, quote, relative) => absolute(prefix, quote, relative)).replace(RELATIVE_URL_PATTERN, (_match, quote, relative) => {
+		return `url(${quote}${path.relative(wrapperDir, path.resolve(fromDir, relative)).split(path.sep).join("/")}${quote})`;
+	})).join("");
+}
+//#endregion
+//#region src/services/BundlerService/ViteReactBundlerService.ts
+/**
+* ViteReactBundlerService
+*
+* DESIGN PATTERNS:
+* - Concrete implementation of BaseBundlerService
+* - Singleton pattern for dev server management
+* - Programmatic Vite build for React component SSR
+*
+* CODING STANDARDS:
+* - Use async/await for asynchronous operations
+* - Throw descriptive errors for error cases
+* - Keep methods focused and well-named
+* - Document complex logic with comments
+*
+* AVOID:
+* - Mixing concerns (keep focused on Vite + React)
+* - Direct tool implementation (services should be tool-agnostic)
+*/
+/**
+* Maximum age for story configs in milliseconds (5 minutes).
+* Configs older than this are cleaned up to prevent memory leaks.
+*/
+const STORY_CONFIG_MAX_AGE_MS = 3e5;
+/**
+* Maximum number of story configs to keep in memory.
+* Oldest configs are removed when this limit is exceeded.
+*/
+const STORY_CONFIG_MAX_COUNT = 100;
+/**
+* Maximum size for serialized args in bytes (1MB).
+* Prevents memory issues with extremely large payloads.
+*/
+const MAX_ARGS_SIZE_BYTES = 1048576;
+/**
+* Valid pattern for story names.
+* Allows alphanumeric characters, underscores, hyphens, and spaces.
+*/
+const VALID_STORY_NAME_PATTERN = /^[a-zA-Z0-9_\- ]+$/;
+/**
+* Valid pattern for component paths.
+* Must end with .stories.tsx, .stories.ts, .stories.jsx, or .stories.js
+*/
+const VALID_COMPONENT_PATH_PATTERN = /\.stories\.(tsx?|jsx?)$/;
+const UTF8_ENCODING = "utf-8";
+const TMP_DIR_NAME = ".tmp";
+const STYLE_SYSTEM_TMP_DIR = "style-system";
+const VITE_ROOT_DIR = "root";
+const SCOPE_DIR_PREFIX = "scope-";
+const WRAPPER_CSS_FILE_PREFIX = "wrapper-";
+const CSS_FILE_EXTENSION = ".css";
+const VIRTUAL_STORY_ENTRY_MODULE = "virtual:story-entry";
+const VIRTUAL_STORY_ENTRY_SCRIPT_PREFIX = `@${VIRTUAL_STORY_ENTRY_MODULE}?id=`;
+const PREVIEW_ROUTE_PREFIX = "/preview/";
+const PREVIEW_ROUTE_PATTERN = /^\/preview\/([^/?]+)/;
+const LOCALHOST_URL_PREFIX = "http://localhost:";
+const VITE_BUNDLER_ID = "vite";
+const REACT_FRAMEWORK_ID = "react";
+const BUILD_HTML_FILE_PREFIX = "index-";
+const BUILD_OUTPUT_DIR_PREFIX = "out-";
+const HTML_FILE_EXTENSION = ".html";
+const JSON_INDENT_SPACES = 2;
+const HTTP_STATUS_OK = 200;
+const CONTENT_TYPE_HEADER = "Content-Type";
+const TEXT_HTML_CONTENT_TYPE = "text/html";
+const RANDOM_ID_RADIX = 36;
+const RANDOM_ID_SLICE_START = 2;
+const PACKAGE_IMPORT_PREFIX = "@";
+const TAILWIND_IMPORT_PREFIX = "tailwindcss/";
+const WORKSPACE_PACKAGE_DIR_PREFIX = "packages/";
+const WORKSPACE_APP_DIR_PREFIX = "apps/";
+const APP_SOURCE_DIR$1 = "src";
+const APP_SOURCE_ALIAS_PATTERN = /^@\//;
+const WEB_THEME_PACKAGE_PATTERN = /^@agimonai\/frontend-web-theme$/;
+const DEFAULT_CSS_ENTRYPOINTS = [
+	"src/assets/main.css",
+	"src/assets/index.css",
+	"src/assets/global.css",
+	"src/styles/main.css",
+	"src/styles/globals.css",
+	"src/styles/tailwind.css"
+];
+const STORY_ID_BUILD_PREFIX = "build-";
+const ROOT_ELEMENT_ID = "root";
+const STORY_ENTRY_PLUGIN_NAME = "vite-plugin-story-entry";
+const TANSTACK_START_STUB_PLUGIN_NAME = "vite-plugin-tanstack-start-stub";
+const TANSTACK_START_STUB_ID_PREFIX = "\0tanstack-start-stub:";
+/**
+* Stub modules that let TanStack Start apps' stories build and render in isolation.
+*
+* `@tanstack/start-server-core` imports `#tanstack-start-entry` / `#tanstack-router-entry`, but
+* only `@tanstack/start-client-core` declares them in its `package.json` `imports` map. Node and
+* Vite resolve `#` specifiers against the *importing* package's own map, so these fail with
+* `Missing "#tanstack-start-entry" specifier in "@tanstack/start-server-core"`. It also imports
+* the `tanstack-start-manifest:v` virtual module, which only the plugin provides. Real apps never
+* hit either problem because the `tanstackStart()` Vite plugin intercepts the specifiers first and
+* strips server-only code from the client bundle; the story renderer intentionally builds without
+* that plugin.
+*
+* Isolated story rendering never runs the SSR start handler or hydration, so these mirror the shape
+* of TanStack's own fake entries (`dist/esm/fake-entries/*`). Specifiers a package declares itself
+* (`#tanstack-start-server-fn-resolver`, `#tanstack-start-plugin-adapters`) resolve natively and are
+* deliberately not stubbed here.
+*/
+const TANSTACK_START_STUB_MODULES = /* @__PURE__ */ new Map([
+	["#tanstack-start-entry", "export const startInstance = undefined;\n"],
+	["#tanstack-router-entry", "export function getRouter() {}\n"],
+	["tanstack-start-manifest:v", "export function tsrStartManifest() {\n  return { routes: {} };\n}\n"],
+	["node:async_hooks", `export class AsyncLocalStorage {
+  constructor() {
+    this.store = undefined;
+  }
+  getStore() {
+    return this.store;
+  }
+  run(store, callback, ...args) {
+    const previous = this.store;
+    this.store = store;
+    try {
+      return callback(...args);
+    } finally {
+      this.store = previous;
+    }
+  }
+  exit(callback, ...args) {
+    return this.run(undefined, callback, ...args);
+  }
+  enterWith(store) {
+    this.store = store;
+  }
+  disable() {
+    this.store = undefined;
+  }
+}
+`]
+]);
+const VITE_PLUGIN_ENFORCE_PRE$1 = "pre";
+const VITE_ROOT_BASE = "/";
+const VITE_RELATIVE_BASE = "./";
+const VITE_PREVIEW_MODE = "development";
+const VITE_LOG_LEVEL = "silent";
+const JSX_RUNTIME_AUTOMATIC = "automatic";
+const SUPPORTED_CSS_EXTENSIONS = [
+	".css",
+	".scss",
+	".sass",
+	".less",
+	".pcss",
+	".postcss"
+];
+const SUPPORTED_CSS_EXTENSIONS_LABEL = SUPPORTED_CSS_EXTENSIONS.join(", ");
+/**
+* Validates a story name to prevent code injection.
+* @param storyName - The story name to validate
+* @throws Error if the story name contains invalid characters
+*/
+function validateStoryName(storyName) {
+	if (!storyName || typeof storyName !== "string") throw new Error("Story name is required and must be a string");
+	if (!VALID_STORY_NAME_PATTERN.test(storyName)) throw new Error(`Story name "${storyName}" contains invalid characters. Only alphanumeric characters, underscores, hyphens, and spaces are allowed.`);
+}
+/**
+* Validates a component path to prevent code injection.
+* @param componentPath - The component path to validate
+* @throws Error if the component path is invalid
+*/
+function validateComponentPath(componentPath) {
+	if (!componentPath || typeof componentPath !== "string") throw new Error("Component path is required and must be a string");
+	if (!VALID_COMPONENT_PATH_PATTERN.test(componentPath)) throw new Error(`Component path "${componentPath}" must be a valid Storybook story file (*.stories.tsx, *.stories.ts, *.stories.jsx, or *.stories.js)`);
+	if (componentPath.includes("..")) throw new Error("Component path must not contain path traversal sequences (..)");
+}
+/**
+* Validates args object size to prevent memory issues.
+* @param args - The args object to validate
+* @throws Error if args exceed size limit
+*/
+function validateArgsSize(args) {
+	const serialized = JSON.stringify(args);
+	const sizeBytes = Buffer.byteLength(serialized, UTF8_ENCODING);
+	if (sizeBytes > MAX_ARGS_SIZE_BYTES) throw new Error(`Args payload too large: ${sizeBytes} bytes exceeds maximum of ${MAX_ARGS_SIZE_BYTES} bytes (1MB)`);
+}
+/**
+* Validates CSS file paths to prevent path traversal attacks.
+* @param cssFiles - Array of CSS file paths to validate
+* @param workspaceRoot - The workspace root directory
+* @throws Error if any path is invalid or escapes workspace
+*/
+function validateCssFiles(cssFiles, workspaceRoot) {
+	for (const cssFile of cssFiles) {
+		if (typeof cssFile !== "string") throw new Error("CSS file path must be a string");
+		if (cssFile.includes("..")) throw new Error(`CSS file path "${cssFile}" must not contain path traversal sequences (..)`);
+		if (path.isAbsolute(cssFile) && !isContained(workspaceRoot, path.normalize(cssFile))) throw new Error(`CSS file path "${cssFile}" must be within workspace boundaries`);
+		const ext = path.extname(cssFile).toLowerCase();
+		if (!SUPPORTED_CSS_EXTENSIONS.includes(ext)) throw new Error(`CSS file "${cssFile}" must have a valid CSS extension (${SUPPORTED_CSS_EXTENSIONS_LABEL})`);
+	}
+}
+/**
+* Helper to create a Vite plugin that serves story entry files from memory.
+*/
+function createStoryEntryPlugin(getStoryConfig, generateCode) {
+	return {
+		name: STORY_ENTRY_PLUGIN_NAME,
+		enforce: VITE_PLUGIN_ENFORCE_PRE$1,
+		resolveId(id) {
+			if (id.includes(VIRTUAL_STORY_ENTRY_MODULE)) {
+				log.debug(`[vite-plugin-story-entry] resolveId: ${id}`);
+				return `\0${id.replace(/^\//, "")}`;
+			}
+		},
+		load(id) {
+			if (id.includes(VIRTUAL_STORY_ENTRY_MODULE)) {
+				log.debug(`[vite-plugin-story-entry] load: ${id}`);
+				const storyId = id.match(/id=([^&]+)/)?.[1];
+				if (storyId) {
+					const config = getStoryConfig(storyId);
+					if (config) return generateCode(config);
+				}
+				throw new Error(`[Vite] Story config not found for id: ${storyId}`);
+			}
+		}
+	};
+}
+/** Where a package the app depends on is installed, resolved from the app rather than from this tool. */
+function appPackageDir(appPath, packageName) {
+	return path.dirname(createRequire(path.join(appPath, "package.json")).resolve(`${packageName}/package.json`));
+}
+/**
+* React and react-dom are peers of this tool: every story bundle takes the app's own pair, so the
+* story, the generated entry and any workspace package it imports share one React that matches its
+* react-dom. A pair resolved from the tool fails in the browser with React error #527.
+*/
+function appReactAliases(appPath) {
+	const reactDir = appPackageDir(appPath, "react");
+	const reactDomDir = appPackageDir(appPath, "react-dom");
+	return [
+		{
+			find: /^react$/,
+			replacement: reactDir
+		},
+		{
+			find: /^react\/(.*)$/,
+			replacement: path.join(reactDir, "$1")
+		},
+		{
+			find: /^react-dom$/,
+			replacement: reactDomDir
+		},
+		{
+			find: /^react-dom\/(.*)$/,
+			replacement: path.join(reactDomDir, "$1")
+		}
+	];
+}
+/**
+* Helper to create a Vite plugin that resolves the module specifiers TanStack Start's
+* `tanstackStart()` plugin normally provides to inert client-safe stubs, so stories in TanStack
+* Start apps build and render without that plugin.
+* See TANSTACK_START_STUB_MODULES for why this is needed.
+*/
+function createTanStackStartStubPlugin() {
+	return {
+		name: TANSTACK_START_STUB_PLUGIN_NAME,
+		enforce: VITE_PLUGIN_ENFORCE_PRE$1,
+		resolveId(id) {
+			return TANSTACK_START_STUB_MODULES.has(id) ? `${TANSTACK_START_STUB_ID_PREFIX}${id}` : void 0;
+		},
+		load(id) {
+			if (!id.startsWith(TANSTACK_START_STUB_ID_PREFIX)) return;
+			const specifier = id.slice(21);
+			const stub = TANSTACK_START_STUB_MODULES.get(specifier);
+			if (!stub) throw new Error(`[Vite] No TanStack entry stub registered for specifier: ${specifier}`);
+			return stub;
+		}
+	};
+}
+function styleSystemTmpDir(appPath) {
+	return path.join(appPath, TMP_DIR_NAME, STYLE_SYSTEM_TMP_DIR);
+}
+function viteRootDir(appPath) {
+	return path.join(styleSystemTmpDir(appPath), VITE_ROOT_DIR);
+}
+function toImportPath(filePath) {
+	return filePath.replace(/\\/g, "/");
+}
+/**
+* ViteReactBundlerService provides Vite + React bundling for component rendering.
+*
+* This is the default implementation of BaseBundlerService that uses Vite
+* as the bundler and React as the framework for rendering components.
+*
+* @example
+* ```typescript
+* const service = ViteReactBundlerService.getInstance();
+* await service.startDevServer('apps/my-app');
+* const { url } = await service.serveComponent({
+*   componentPath: '/path/to/Button.stories.tsx',
+*   storyName: 'Primary',
+*   appPath: 'apps/my-app'
+* });
+* ```
+*/
+var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerService {
+	workspaceRoot;
+	static instance = null;
+	server = null;
+	monorepoRoot;
+	serverUrl = null;
+	serverPort = null;
+	currentAppPath = null;
+	storyConfigs = /* @__PURE__ */ new Map();
+	/** Timestamps for when each story config was created, used for cleanup */
+	storyConfigTimestamps = /* @__PURE__ */ new Map();
+	/** Promise that resolves when server startup completes, prevents race conditions */
+	serverStartPromise = null;
+	/** Virtual files of the running dev server */
+	devStore = null;
+	/**
+	* Creates a new ViteReactBundlerService instance.
+	* Use getInstance() for singleton access.
+	* @param config - Service configuration options
+	*/
+	constructor(config = {}, workspaceRoot) {
+		super(config);
+		this.workspaceRoot = workspaceRoot;
+		this.monorepoRoot = workspaceRoot !== void 0 ? Promise.resolve(workspaceRoot) : void 0;
+	}
+	/**
+	* Get the singleton instance of ViteReactBundlerService.
+	* Singleton pattern ensures only one dev server runs at a time,
+	* preventing port conflicts and resource duplication.
+	* @returns The singleton ViteReactBundlerService instance
+	*/
+	static getInstance() {
+		if (!ViteReactBundlerService.instance) ViteReactBundlerService.instance = new ViteReactBundlerService();
+		return ViteReactBundlerService.instance;
+	}
+	/**
+	* Reset the singleton instance.
+	* This is primarily used in testing to ensure a fresh instance.
+	* @example
+	* ```typescript
+	* afterEach(() => {
+	*   ViteReactBundlerService.resetInstance();
+	* });
+	* ```
+	*/
+	static resetInstance() {
+		ViteReactBundlerService.instance = null;
+	}
+	/**
+	* Get the bundler identifier.
+	* @returns The bundler ID string ('vite')
+	*/
+	getBundlerId() {
+		return VITE_BUNDLER_ID;
+	}
+	/**
+	* Get the framework identifier.
+	* @returns The framework ID string ('react')
+	*/
+	getFrameworkId() {
+		return REACT_FRAMEWORK_ID;
+	}
+	/**
+	* Get the current server URL.
+	* @returns Server URL or null if not running
+	*/
+	getServerUrl() {
+		return this.serverUrl;
+	}
+	/**
+	* Get the current server port.
+	* @returns Server port or null if not running
+	*/
+	getServerPort() {
+		return this.serverPort;
+	}
+	/**
+	* Check if the dev server is running.
+	* @returns True if server is running
+	*/
+	isServerRunning() {
+		return this.server !== null && this.serverUrl !== null;
+	}
+	/**
+	* Get the current app path being served.
+	* @returns App path or null if not running
+	*/
+	getCurrentAppPath() {
+		return this.currentAppPath;
+	}
+	/**
+	* Start a Vite dev server for hot reload and caching.
+	* Handles concurrent calls by returning the same promise if server is already starting.
+	* @param appPath - Absolute or relative path to the app directory
+	* @returns Promise resolving to server URL and port
+	* @throws Error if server fails to start
+	*/
+	async startDevServer(appPath) {
+		const monorepoRoot = await (this.monorepoRoot ??= TemplatesManagerService.getWorkspaceRoot());
+		const resolvedAppPath = path.isAbsolute(appPath) ? appPath : path.join(monorepoRoot, appPath);
+		if (this.isServerRunning() && this.currentAppPath === resolvedAppPath) {
+			log.info(`[ViteReactBundlerService] Server already running for ${resolvedAppPath}`);
+			return {
+				url: this.serverUrl,
+				port: this.serverPort
+			};
+		}
+		if (this.serverStartPromise) {
+			log.info("[ViteReactBundlerService] Server start already in progress, waiting...");
+			return this.serverStartPromise;
+		}
+		this.serverStartPromise = this.doStartDevServer(resolvedAppPath);
+		try {
+			return await this.serverStartPromise;
+		} finally {
+			this.serverStartPromise = null;
+		}
+	}
+	/**
+	* Internal method that performs the actual server startup.
+	* @param resolvedAppPath - Resolved absolute path to the app directory
+	* @returns Promise resolving to server URL and port
+	*/
+	async doStartDevServer(resolvedAppPath) {
+		const root = viteRootDir(resolvedAppPath);
+		let createdServer;
+		try {
+			await promises.mkdir(root, { recursive: true });
+			this.devStore = await VirtualFileStore.open(path.join(styleSystemTmpDir(resolvedAppPath), `${SCOPE_DIR_PREFIX}${randomUUID()}`));
+			const { createServer } = await import("vite");
+			this.server = await createServer({
+				root,
+				base: VITE_ROOT_BASE,
+				mode: VITE_PREVIEW_MODE,
+				envDir: resolvedAppPath,
+				configFile: false,
+				logLevel: VITE_LOG_LEVEL,
+				plugins: [
+					createVirtualFilesPlugin(this.devStore, root),
+					tailwindcss(),
+					createTanStackStartStubPlugin(),
+					...await this.getAdditionalVitePlugins(resolvedAppPath),
+					{
+						name: "style-system-preview-html",
+						configureServer: (server) => {
+							server.middlewares.use(async (req, res, next) => {
+								const url = req.url || "/";
+								const match = url.match(PREVIEW_ROUTE_PATTERN);
+								if (match) {
+									const storyId = match[1];
+									const config = this.storyConfigs.get(storyId);
+									if (config) try {
+										const htmlTemplate = this.generateHtmlTemplate(`${VIRTUAL_STORY_ENTRY_SCRIPT_PREFIX}${storyId}`, config.darkMode);
+										const transformedHtml = await server.transformIndexHtml(url, htmlTemplate);
+										res.statusCode = HTTP_STATUS_OK;
+										res.setHeader(CONTENT_TYPE_HEADER, TEXT_HTML_CONTENT_TYPE);
+										res.end(transformedHtml);
+										return;
+									} catch (e) {
+										const err = e;
+										log.error(`[ViteMiddleware] Error serving preview: ${err.message}`);
+										next(err);
+										return;
+									}
+								}
+								next();
+							});
+						}
+					},
+					createStoryEntryPlugin((id) => this.storyConfigs.get(id), (opts) => this.generateEntryFile(opts))
+				],
+				resolve: await this.getViteResolveConfig(resolvedAppPath),
+				define: this.getViteDefineConfig(),
+				esbuild: this.getViteEsbuildConfig(),
+				oxc: this.getViteOxcConfig(),
+				server: {
+					strictPort: false,
+					open: false
+				}
+			});
+			createdServer = this.server;
+			await this.server.listen();
+			const address = this.server.httpServer?.address();
+			if (!address || typeof address === "string") throw new Error("Failed to start Vite dev server. Ensure no other process is using the port.");
+			const port = address.port;
+			const url = `${LOCALHOST_URL_PREFIX}${port}`;
+			this.serverUrl = url;
+			this.serverPort = port;
+			this.currentAppPath = resolvedAppPath;
+			log.info(`[ViteReactBundlerService] Vite dev server started at ${url}`);
+			return {
+				url,
+				port
+			};
+		} catch (error) {
+			try {
+				await createdServer?.close();
+			} catch (closeError) {
+				log.warn(`[ViteReactBundlerService] Failed to close server after startup failure: ${String(closeError)}`);
+			}
+			this.server = null;
+			this.serverUrl = null;
+			this.serverPort = null;
+			this.currentAppPath = null;
+			await this.disposeDevStore();
+			const err = /* @__PURE__ */ new Error(`Failed to start dev server for ${resolvedAppPath}: ${error instanceof Error ? error.message : String(error)}`);
+			err.cause = error;
+			throw err;
+		}
+	}
+	/**
+	* Serve a component dynamically through the dev server.
+	* @param options - Component rendering options
+	* @returns Promise resolving to the component URL and HTML file path
+	* @throws Error if dev server is not running or file operations fail
+	*/
+	async serveComponent(options) {
+		if (!this.isServerRunning()) throw new Error("Dev server is not running. Start it first using startDevServer().");
+		const { componentPath, storyName, args = {}, darkMode = false, appPath, cssFiles = [], rootComponent, unistylesConfig } = options;
+		validateStoryName(storyName);
+		validateComponentPath(componentPath);
+		validateArgsSize(args);
+		const monorepoRoot = await (this.monorepoRoot ??= TemplatesManagerService.getWorkspaceRoot());
+		const resolvedAppPath = path.isAbsolute(appPath) ? appPath : path.join(monorepoRoot, appPath);
+		validateCssFiles(cssFiles, this.workspaceRoot ?? await TemplatesManagerService.getWorkspaceRoot(resolvedAppPath));
+		if (this.currentAppPath !== resolvedAppPath) throw new Error(`Dev server is running for ${this.currentAppPath} but requested ${resolvedAppPath}.`);
+		const store = this.devStore;
+		if (!store) throw new Error("Dev server has no virtual file store. Start it first using startDevServer().");
+		try {
+			this.cleanupStaleStoryConfigs();
+			const timestamp = Date.now();
+			const storyId = `${timestamp}-${Math.random().toString(RANDOM_ID_RADIX).slice(RANDOM_ID_SLICE_START)}`;
+			const config = {
+				componentPath,
+				storyName,
+				args,
+				appPath: resolvedAppPath,
+				darkMode,
+				cssFiles,
+				rootComponent,
+				unistylesConfig,
+				wrapperCssPath: path.join(viteRootDir(resolvedAppPath), `${WRAPPER_CSS_FILE_PREFIX}${storyId}${CSS_FILE_EXTENSION}`)
+			};
+			for (const changedFile of await this.snapshotRender(store, storyId, config)) {
+				const moduleGraph = this.server?.environments.client.moduleGraph;
+				for (const module of moduleGraph?.getModulesByFile(changedFile) ?? []) moduleGraph?.invalidateModule(module);
+			}
+			this.storyConfigs.set(storyId, config);
+			this.storyConfigTimestamps.set(storyId, timestamp);
+			const url = `${this.serverUrl}${PREVIEW_ROUTE_PREFIX}${storyId}`;
+			const htmlContent = this.generateHtmlTemplate(`${VIRTUAL_STORY_ENTRY_SCRIPT_PREFIX}${storyId}`, darkMode);
+			log.info(`[ViteReactBundlerService] Component served at: ${url}`);
+			return {
+				url,
+				htmlContent
+			};
+		} catch (error) {
+			const err = /* @__PURE__ */ new Error(`Failed to serve component ${storyName}: ${error instanceof Error ? error.message : String(error)}`);
+			err.cause = error;
+			throw err;
+		}
+	}
+	/**
+	* Pre-render a component to a static HTML file.
+	* @param options - Component rendering options
+	* @returns Promise resolving to the HTML file path
+	* @throws Error if build fails
+	*/
+	async prerenderComponent(options) {
+		const { componentPath, storyName, args = {}, darkMode = false, appPath, cssFiles = [], rootComponent, unistylesConfig } = options;
+		validateStoryName(storyName);
+		validateComponentPath(componentPath);
+		validateArgsSize(args);
+		const monorepoRoot = await (this.monorepoRoot ??= TemplatesManagerService.getWorkspaceRoot());
+		const resolvedAppPath = path.isAbsolute(appPath) ? appPath : path.join(monorepoRoot, appPath);
+		validateCssFiles(cssFiles, this.workspaceRoot ?? await TemplatesManagerService.getWorkspaceRoot(resolvedAppPath));
+		try {
+			return { htmlFilePath: await this.buildComponent({
+				componentPath,
+				storyName,
+				args,
+				appPath: resolvedAppPath,
+				darkMode,
+				cssFiles,
+				rootComponent,
+				unistylesConfig
+			}) };
+		} catch (error) {
+			const err = /* @__PURE__ */ new Error(`Failed to prerender component ${storyName}: ${error instanceof Error ? error.message : String(error)}`);
+			err.cause = error;
+			throw err;
+		}
+	}
+	/**
+	* Get Vite resolve configuration for the given app path.
+	* Subclasses can override to add platform-specific aliases (e.g., react-native-web).
+	*/
+	async getViteResolveConfig(appPath) {
+		const workspaceRoot = this.workspaceRoot ?? await TemplatesManagerService.getWorkspaceRoot(appPath);
+		const frontendPackagePath = (packageDir, sourcePath = "index.ts") => path.join(workspaceRoot, WORKSPACE_PACKAGE_DIR_PREFIX, "frontend", packageDir, APP_SOURCE_DIR$1, sourcePath);
+		return { alias: [
+			...appReactAliases(appPath),
+			{
+				find: APP_SOURCE_ALIAS_PATTERN,
+				replacement: `${path.join(appPath, APP_SOURCE_DIR$1)}/`
+			},
+			{
+				find: WEB_THEME_PACKAGE_PATTERN,
+				replacement: frontendPackagePath("web-theme", "modules/tailwindMerge.ts")
+			},
+			{
+				find: /^@agimonai\/frontend-web-theme\/modules\/(.*)$/,
+				replacement: `${path.join(workspaceRoot, WORKSPACE_PACKAGE_DIR_PREFIX, "frontend", "web-theme", APP_SOURCE_DIR$1, "modules")}/$1`
+			}
+		] };
+	}
+	/**
+	* Get Vite define replacements.
+	* Subclasses can override to provide platform globals.
+	*/
+	getViteDefineConfig() {}
+	/**
+	* Generate preview HTML styles.
+	* Subclasses can override for platform-specific layout constraints.
+	*/
+	generatePreviewStyles() {
+		return "body { margin: 0; padding: 0; background: var(--color-background-shade, var(--color-background, #fff)); color: var(--color-foreground); }\n    #root { display: inline-block; }";
+	}
+	/**
+	* Get Vite esbuild configuration.
+	* Subclasses can override to handle platform-specific JSX needs.
+	*/
+	getViteEsbuildConfig() {
+		return {
+			jsx: JSX_RUNTIME_AUTOMATIC,
+			jsxImportSource: REACT_FRAMEWORK_ID
+		};
+	}
+	/**
+	* Get Vite Oxc configuration.
+	* Subclasses can override to disable Oxc for platform-specific parsing needs.
+	*/
+	getViteOxcConfig() {}
+	/**
+	* Get additional Vite plugins.
+	* Subclasses can override to add platform-specific plugins (e.g., @vitejs/plugin-react).
+	*/
+	getAdditionalVitePlugins(_appPath) {
+		return [];
+	}
+	/**
+	* Clean up server resources and reset state.
+	* Closes the Vite dev server if running.
+	*
+	* Note: Errors during server close are intentionally logged but not re-thrown.
+	* This ensures cleanup always completes and state is reset, even if the server
+	* is in an unexpected state. Callers should not depend on cleanup failure detection.
+	*/
+	async cleanup() {
+		if (this.server) {
+			log.info("[ViteReactBundlerService] Closing Vite dev server...");
+			try {
+				await this.server.close();
+			} catch (error) {
+				log.error(`[ViteReactBundlerService] Error closing server: ${error instanceof Error ? error.message : String(error)}`);
+			}
+			this.server = null;
+			this.serverUrl = null;
+			this.serverPort = null;
+			this.currentAppPath = null;
+			this.serverStartPromise = null;
+			this.storyConfigs.clear();
+			this.storyConfigTimestamps.clear();
+			await this.disposeDevStore();
+			log.info("[ViteReactBundlerService] Vite dev server closed");
+		}
+	}
+	async disposeDevStore() {
+		const store = this.devStore;
+		this.devStore = null;
+		await store?.dispose().catch((error) => log.warn(`[ViteReactBundlerService] Failed to remove virtual files: ${error.message}`));
+	}
+	/**
+	* Store the files one render reads: the wrapper CSS and snapshots of its declared sources.
+	* Transitive imports, nested CSS imports and node_modules are still read from disk.
+	* @returns Snapshotted source paths whose content changed
+	*/
+	async snapshotRender(store, renderId, options) {
+		const { appPath, componentPath, rootComponent, unistylesConfig } = options;
+		const declaredSources = [componentPath, ...[rootComponent, unistylesConfig].filter((file) => !!file && path.extname(file) !== "").map((file) => path.join(appPath, file))];
+		const changed = [];
+		for (const filePath of declaredSources) if (store.put(filePath, renderId, await promises.readFile(filePath, UTF8_ENCODING))) changed.push(filePath);
+		store.put(options.wrapperCssPath, renderId, await this.generateWrapperCss(appPath, options.cssFiles));
+		return changed;
+	}
+	/**
+	* Clean up stale story configs to prevent memory leaks.
+	* Removes configs that are older than STORY_CONFIG_MAX_AGE_MS or
+	* when the number of configs exceeds STORY_CONFIG_MAX_COUNT.
+	*/
+	cleanupStaleStoryConfigs() {
+		const now = Date.now();
+		const entriesToDelete = [];
+		for (const [storyId, timestamp] of this.storyConfigTimestamps) if (now - timestamp > STORY_CONFIG_MAX_AGE_MS) entriesToDelete.push(storyId);
+		for (const storyId of entriesToDelete) {
+			this.storyConfigs.delete(storyId);
+			this.storyConfigTimestamps.delete(storyId);
+			this.devStore?.evict(storyId);
+		}
+		if (entriesToDelete.length > 0) log.debug(`[ViteReactBundlerService] Cleaned up ${entriesToDelete.length} stale story configs`);
+		if (this.storyConfigs.size > STORY_CONFIG_MAX_COUNT) {
+			const toRemove = Array.from(this.storyConfigTimestamps.entries()).sort((a, b) => a[1] - b[1]).slice(0, this.storyConfigs.size - STORY_CONFIG_MAX_COUNT);
+			for (const [storyId] of toRemove) {
+				this.storyConfigs.delete(storyId);
+				this.storyConfigTimestamps.delete(storyId);
+				this.devStore?.evict(storyId);
+			}
+			log.debug(`[ViteReactBundlerService] Removed ${toRemove.length} oldest story configs to stay under limit`);
+		}
+	}
+	/**
+	* Generate the wrapper CSS with @source directives for Tailwind v4.
+	* Stylesheets inside the app are snapshotted into it, so a render does not see later edits or a
+	* theme file removed mid-render; package and workspace stylesheets stay imports.
+	* @param appPath - Absolute path to the app directory
+	* @param cssFiles - Array of CSS file paths to import
+	* @returns Generated CSS content with @source directive
+	*/
+	async generateWrapperCss(appPath, cssFiles) {
+		const resolvedCssFiles = cssFiles.length > 0 ? cssFiles : await this.getDefaultCssFiles(appPath);
+		const workspaceRoot = this.workspaceRoot ?? await TemplatesManagerService.getWorkspaceRoot(appPath);
+		const cssImportStatements = (await Promise.all(resolvedCssFiles.map(async (cssFile) => {
+			if (cssFile.startsWith(PACKAGE_IMPORT_PREFIX) || cssFile.startsWith(TAILWIND_IMPORT_PREFIX)) return `@import '${cssFile}';`;
+			const filePath = path.isAbsolute(cssFile) ? cssFile : cssFile.startsWith(WORKSPACE_PACKAGE_DIR_PREFIX) || cssFile.startsWith(WORKSPACE_APP_DIR_PREFIX) ? path.join(workspaceRoot, cssFile) : path.join(appPath, cssFile);
+			if (!isContained(appPath, filePath) || path.extname(filePath).toLowerCase() !== CSS_FILE_EXTENSION) return `@import '${filePath}';`;
+			const css = await promises.readFile(filePath, UTF8_ENCODING);
+			return `/* ${path.relative(appPath, filePath)} */\n${flattenCss(css, path.dirname(filePath), viteRootDir(appPath))}`;
+		}))).join("\n");
+		return `${resolvedCssFiles.length === 0 ? "@import 'tailwindcss';\n" : ""}${cssImportStatements}
+
+/* Tailwind v4 source configuration for component scanning */
+@source "${path.join(workspaceRoot, WORKSPACE_APP_DIR_PREFIX)}";
+@source "${path.join(workspaceRoot, WORKSPACE_PACKAGE_DIR_PREFIX, "frontend")}";
+@source "${path.join(appPath, APP_SOURCE_DIR$1)}";
+`;
+	}
+	/**
+	* Infer an app stylesheet when project.json does not define style-system.cssFiles.
+	* Many Vite apps keep their Tailwind/theme entrypoint in src/assets/main.css.
+	*/
+	async getDefaultCssFiles(appPath) {
+		const discoveredFiles = [];
+		for (const candidate of DEFAULT_CSS_ENTRYPOINTS) {
+			const candidatePath = path.join(appPath, candidate);
+			try {
+				await promises.access(candidatePath);
+				discoveredFiles.push(candidate);
+			} catch {}
+		}
+		return discoveredFiles;
+	}
+	/**
+	* Generate the React entry file content for rendering a story.
+	* @param options - Build options including component path and story name
+	* @returns Generated TypeScript/JSX entry file content
+	*/
+	generateEntryFile(options) {
+		const { componentPath, storyName, args, appPath, darkMode, rootComponent, wrapperCssPath } = options;
+		const argsJson = JSON.stringify(args, null, JSON_INDENT_SPACES);
+		const cssImports = `import '${toImportPath(wrapperCssPath)}';`;
+		const frameworkSetupImports = this.generateFrameworkSetupImports(options);
+		const storyImport = this.generateStoryImport(componentPath);
+		const rootComponentImport = rootComponent ? `import { RootDocument } from '${toImportPath(path.join(appPath, rootComponent))}';` : "";
+		const wrapWithRoot = rootComponent ? "RootDocument" : "React.Fragment";
+		const wrapperProps = rootComponent ? `{ darkMode: ${darkMode} }` : "{}";
+		return `${cssImports}
+${frameworkSetupImports}
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+${storyImport}
+${rootComponentImport}
+
+// Extract story metadata and the specific story to render
+const meta = Stories.default;
+const storyName = ${JSON.stringify(storyName)};
+const storyExportName = storyName.replace(/[^a-zA-Z0-9]/g, '');
+const Story = Stories[storyName] ?? Stories[storyExportName] ?? Object.values(Stories).find((story) => {
+  return story?.name === storyName || story?.storyName === storyName;
+});
+const metaArgs = meta?.args || {};
+const storyArgs = Story?.args || {};
+// Merge story's default args with any custom args passed in
+const args = { ...metaArgs, ...storyArgs, ...${argsJson} };
+const storyContext = { loaded: {}, args };
+
+          // Resolve the story element in the same order style-system visualizes it:
+          // 1. A render() function on the story export
+          // 2. A render() function on the meta export
+          // 3. A component reference in meta.component
+const renderStory = () => {
+  if (Story?.render) {
+    return Story.render(args, storyContext);
+  }
+
+  if (meta.render) {
+    return meta.render(args, storyContext);
+  }
+
+  const Component = meta.component;
+  if (!Component) {
+    throw new Error('Story is missing meta.component and render functions');
+  }
+
+  return React.createElement(Component, args);
+};
+
+const decorators = [
+  ...(Array.isArray(meta.decorators) ? meta.decorators : []),
+  ...(Array.isArray(Story?.decorators) ? Story.decorators : []),
+];
+
+const applyDecorators = (storyFn, storyDecorators) =>
+  storyDecorators.reduceRight((acc, decorator) => {
+    return () => decorator(acc, storyContext);
+  }, storyFn);
+
+const RenderComponent = () => applyDecorators(renderStory, decorators)();
+const element = React.createElement(RenderComponent);
+
+// Wrap element with root component (theme provider, etc.) if specified
+const Wrapper = ${wrapWithRoot};
+const wrappedElement = React.createElement(Wrapper, ${wrapperProps}, element);
+const frameworkWrappedElement = ${this.wrapFrameworkElement("wrappedElement", options)};
+
+// Mount to DOM. The single-file Vite plugin may inline the module script into
+// <head>, so retry briefly until the parsed document contains the root node.
+let mountAttempts = 0;
+const mount = () => {
+  const rootEl = document.getElementById('${ROOT_ELEMENT_ID}');
+  if (!rootEl) {
+    mountAttempts += 1;
+    if (mountAttempts > 120) throw new Error('Root element not found');
+    requestAnimationFrame(mount);
+    return;
+  }
+  const root = createRoot(rootEl);
+  root.render(frameworkWrappedElement);
+};
+
+mount();
+`;
+	}
+	/**
+	* Generate framework-specific setup imports that must run before story imports.
+	* Native rendering overrides this to load app-specific runtime setup.
+	*/
+	generateFrameworkSetupImports(_options) {
+		return "";
+	}
+	generateStoryImport(componentPath) {
+		return `import * as Stories from '${componentPath}';`;
+	}
+	wrapFrameworkElement(elementExpression, _options) {
+		return elementExpression;
+	}
+	/**
+	* Generate the HTML template for component preview.
+	* @param entryFileName - Name of the entry file to include
+	* @param darkMode - Whether to add dark mode class to HTML
+	* @returns Generated HTML template string
+	*/
+	generateHtmlTemplate(entryFileName, darkMode) {
+		return `<!DOCTYPE html>
+<html class="${darkMode ? "dark" : ""}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Component Preview</title>
+  <style>
+    ${this.generatePreviewStyles()}
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/${entryFileName}"><\/script>
+</body>
+</html>`;
+	}
+	async buildComponent(options) {
+		const { appPath, darkMode } = options;
+		const renderId = randomUUID();
+		const root = viteRootDir(appPath);
+		const outDir = path.join(styleSystemTmpDir(appPath), `${BUILD_OUTPUT_DIR_PREFIX}${renderId}`);
+		const htmlTemplateFileName = `${BUILD_HTML_FILE_PREFIX}${renderId}${HTML_FILE_EXTENSION}`;
+		const htmlTemplatePath = path.join(root, htmlTemplateFileName);
+		const buildOptions = {
+			...options,
+			wrapperCssPath: path.join(root, `${WRAPPER_CSS_FILE_PREFIX}${renderId}${CSS_FILE_EXTENSION}`)
+		};
+		let store;
+		try {
+			await promises.mkdir(root, { recursive: true });
+			store = await VirtualFileStore.open(path.join(styleSystemTmpDir(appPath), `${SCOPE_DIR_PREFIX}${renderId}`));
+			await this.snapshotRender(store, renderId, buildOptions);
+			const storyId = `${STORY_ID_BUILD_PREFIX}${renderId}`;
+			const virtualModuleId = `${VIRTUAL_STORY_ENTRY_SCRIPT_PREFIX}${storyId}`;
+			store.put(htmlTemplatePath, renderId, this.generateHtmlTemplate(virtualModuleId, darkMode));
+			const { build } = await import("vite");
+			const buildStoryConfigs = /* @__PURE__ */ new Map();
+			buildStoryConfigs.set(storyId, buildOptions);
+			await build({
+				root,
+				base: VITE_RELATIVE_BASE,
+				mode: VITE_PREVIEW_MODE,
+				envDir: appPath,
+				configFile: false,
+				logLevel: VITE_LOG_LEVEL,
+				plugins: [
+					createVirtualFilesPlugin(store, root),
+					tailwindcss(),
+					viteSingleFile(),
+					createTanStackStartStubPlugin(),
+					...await this.getAdditionalVitePlugins(appPath),
+					createStoryEntryPlugin((id) => buildStoryConfigs.get(id), (opts) => this.generateEntryFile(opts))
+				],
+				resolve: await this.getViteResolveConfig(appPath),
+				define: this.getViteDefineConfig(),
+				esbuild: this.getViteEsbuildConfig(),
+				oxc: this.getViteOxcConfig(),
+				build: {
+					outDir,
+					emptyOutDir: false,
+					cssCodeSplit: false,
+					rollupOptions: {
+						input: htmlTemplatePath,
+						treeshake: false
+					}
+				}
+			});
+			const builtHtmlPath = path.join(outDir, htmlTemplateFileName);
+			log.info(`[ViteReactBundlerService] Component built to: ${builtHtmlPath}`);
+			return builtHtmlPath;
+		} catch (error) {
+			await promises.rm(outDir, {
+				recursive: true,
+				force: true
+			});
+			const err = /* @__PURE__ */ new Error(`Failed to build component: ${error instanceof Error ? error.message : String(error)}`);
+			err.cause = error;
+			throw err;
+		} finally {
+			await store?.dispose().catch((err) => log.debug(`[ViteReactBundlerService] Failed to cleanup virtual files: ${err.message}`));
+		}
+	}
+};
+//#endregion
+//#region src/services/BundlerService/ViteReactNativeBundlerService.ts
+/**
+* ViteReactNativeBundlerService
+*
+* Extends ViteReactBundlerService with React Native → web aliases
+* so native-ui components can be rendered in a browser via Playwright.
+* Uses the app's own React Native Web and Unistyles web runtime.
+*
+* Shim paths resolve relative to this package; React, react-dom and
+* react-native-web are peers and always resolve from the app.
+*/
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REACT_NATIVE_PACKAGE = "react-native";
+const REACT_NATIVE_WEB_PACKAGE = "react-native-web";
+const REACT_NATIVE_UNISTYLES_PACKAGE = "react-native-unistyles";
+const REACT_NATIVE_UNISTYLES_BABEL_PLUGIN = "react-native-unistyles/plugin";
+const REACT_NATIVE_REANIMATED_BABEL_PLUGIN = "react-native-reanimated/plugin";
+const BABEL_CORE_PACKAGE = "@babel/core";
+const BABEL_PLUGIN_SYNTAX_JSX = "@babel/plugin-syntax-jsx";
+const BABEL_PLUGIN_SYNTAX_TYPESCRIPT = "@babel/plugin-syntax-typescript";
+const EXPO_SYMBOLS_PACKAGE = "expo-symbols";
+const EXPO_VECTOR_ICONS_PREFIX = "@expo/vector-icons";
+const STORYBOOK_REACT_NATIVE_PACKAGE = "@storybook/react-native";
+const STORYBOOK_REACT_PACKAGE = "@storybook/react";
+const SAFE_AREA_CONTEXT_PACKAGE = "react-native-safe-area-context";
+const APP_SOURCE_ALIAS = "@";
+const APP_SOURCE_DIR = "src";
+const VITE_PLUGIN_ENFORCE_PRE = "pre";
+const VITE_REACT_NATIVE_BUNDLER_ID = "vite-react-native";
+const REACT_NATIVE_OPTIMIZE_DEPS_PLUGIN_NAME = "vite-react-native-optimize-deps";
+const EXPO_ICONS_REDIRECT_PLUGIN_NAME = "vite-redirect-expo-vector-icons";
+const NATIVE_BABEL_TRANSFORM_PLUGIN_NAME = "vite-react-native-babel";
+const EXPO_VECTOR_ICONS_RESOLVED_MODULE_PREFIX = `\0virtual:style-system-expo-vector-icons`;
+const DEFAULT_ICON_FAMILY = "MaterialIcons";
+const JAVASCRIPT_EXTENSION = ".js";
+const EXPO_VECTOR_ICONS_FALLBACK_CODEPOINT = 9633;
+const EXPO_VECTOR_ICONS_SHIM_FILE = "expo-vector-icons.ts";
+const EXPO_SYMBOLS_SHIM_FILE = "expo-symbols.ts";
+const QUICK_BASE64_SHIM_FILE = "react-native-quick-base64.ts";
+const REQUIRED_REACT_NATIVE_SHIM_FILES = [EXPO_VECTOR_ICONS_SHIM_FILE, EXPO_SYMBOLS_SHIM_FILE];
+const PACKAGE_JSON_SUBPATH = "package.json";
+const REACT_NATIVE_UNISTYLES_WEB_INDEX = "lib/module/index.js";
+const REACT_NATIVE_UNISTYLES_NATIVE_COMPONENTS = "lib/module/components/native";
+const EXPO_VECTOR_ICONS_GLYPHMAP_DIR = "build/vendor/react-native-vector-icons/glyphmaps";
+const EXPO_VECTOR_ICONS_FONT_DIR = "build/vendor/react-native-vector-icons/Fonts";
+const GLYPHMAP_EXTENSION = ".json";
+const FONT_EXTENSION = ".ttf";
+const EXPO_MODULES_CORE_TYPE_DECLARATIONS_SEGMENT = "expo-modules-core/src/ts-declarations/";
+const EXPO_TYPE_DECLARATION_STUB_PLUGIN_NAME = "vite-stub-expo-type-declarations";
+const EMPTY_MODULE_CODE = "export {};";
+const SVG_COMPONENT_PLUGIN_NAME = "vite-react-native-svg-component";
+const SVG_EXTENSION = ".svg";
+const SVG_DATA_URI_PREFIX = "data:image/svg+xml;base64,";
+const SVG_DEFAULT_SIZE = 24;
+const BASE64_ENCODING = "base64";
+const VITE_QUERY_SEPARATOR = "?";
+const REACT_NATIVE_VISUAL_RENDER_SHIMS_LABEL = "React Native visual render shims directory";
+const REACT_NATIVE_DEV_GLOBAL = "__DEV__";
+const REACT_NATIVE_DEV_VALUE = "false";
+const REACT_NATIVE_GLOBAL = "global";
+const REACT_NATIVE_GLOBAL_VALUE = "globalThis";
+const EXPO_OS_DEFINE = "process.env.EXPO_OS";
+const EXPO_OS_WEB_VALUE = JSON.stringify("web");
+const VITE_RESOLVE_EXTENSIONS = [
+	".web.tsx",
+	".web.ts",
+	".web.js",
+	".tsx",
+	".ts",
+	".js",
+	".jsx",
+	".json"
+];
+const BABEL_TRANSFORM_EXTENSION_PATTERN = /\.[cm]?[jt]sx?$/;
+const NODE_MODULES_PATH_SEGMENT = `${path.sep}node_modules${path.sep}`;
+const REACT_NATIVE_MARKDOWN_DISPLAY_PATH_SEGMENT = "react-native-markdown-display";
+const WINDOWS_PATH_SEPARATOR_PATTERN = /\\/g;
+const POSIX_PATH_SEPARATOR = "/";
+const SHIMS_DIR_CANDIDATES = [
+	path.resolve(__dirname, "../../shims"),
+	path.resolve(__dirname, "shims"),
+	path.resolve(__dirname, "../shims"),
+	path.resolve(__dirname, "../src/shims")
+];
+async function resolveExistingDir(candidates, label, isValidDir) {
+	for (const candidate of candidates) if (await isValidDir(candidate)) return candidate;
+	throw new Error(`Could not resolve ${label}. Tried: ${candidates.join(", ")}`);
+}
+function resolvePackageDirFrom(fromPath, packageName) {
+	return appPackageDir(fromPath, packageName);
+}
+function resolvePackageSubpathFrom(fromPath, subpath) {
+	return createRequire(path.join(fromPath, PACKAGE_JSON_SUBPATH)).resolve(subpath);
+}
+function toViteImportPath(filePath) {
+	return filePath.replace(WINDOWS_PATH_SEPARATOR_PATTERN, POSIX_PATH_SEPARATOR);
+}
+/**
+* Every icon family shipped by `@expo/vector-icons` that has both a glyph map and a
+* matching TrueType font. Metadata-only glyph maps (e.g. `FontAwesome5Free_meta.json`)
+* have no font and are skipped.
+*/
+async function resolveExpoVectorIconFamilies(appPath) {
+	const packageDir = dirname(resolvePackageSubpathFrom(appPath, `${EXPO_VECTOR_ICONS_PREFIX}/${PACKAGE_JSON_SUBPATH}`));
+	const glyphMapDir = path.join(packageDir, EXPO_VECTOR_ICONS_GLYPHMAP_DIR);
+	const fontDir = path.join(packageDir, EXPO_VECTOR_ICONS_FONT_DIR);
+	const families = [];
+	for (const entry of await readdir(glyphMapDir)) {
+		if (!entry.endsWith(GLYPHMAP_EXTENSION)) continue;
+		const family = entry.slice(0, -5);
+		const fontPath = path.join(fontDir, `${family}${FONT_EXTENSION}`);
+		if (!await pathExists(fontPath)) continue;
+		families.push({
+			family,
+			fontPath: toViteImportPath(fontPath),
+			glyphMapPath: toViteImportPath(path.join(glyphMapDir, entry))
+		});
+	}
+	return families;
+}
+function getExpoVectorIconsVirtualModuleId(source, families) {
+	if (source === EXPO_VECTOR_ICONS_PREFIX) return `${EXPO_VECTOR_ICONS_RESOLVED_MODULE_PREFIX}/index`;
+	if (!source.startsWith(`${EXPO_VECTOR_ICONS_PREFIX}/`)) return null;
+	const iconFamilyWithExtension = source.slice(19);
+	const iconFamily = iconFamilyWithExtension.endsWith(JAVASCRIPT_EXTENSION) ? iconFamilyWithExtension.slice(0, -3) : iconFamilyWithExtension;
+	if (!families.has(iconFamily)) return null;
+	return `${EXPO_VECTOR_ICONS_RESOLVED_MODULE_PREFIX}/${iconFamily}`;
+}
+/**
+* Expo ships pure type declarations as `.ts` files that use value-import syntax.
+* They carry no runtime code, so the bundler stubs them instead of failing on
+* their missing exports.
+*/
+function createExpoTypeDeclarationStubPlugin() {
+	return {
+		name: EXPO_TYPE_DECLARATION_STUB_PLUGIN_NAME,
+		enforce: VITE_PLUGIN_ENFORCE_PRE,
+		load(id) {
+			return toViteImportPath(id).includes(EXPO_MODULES_CORE_TYPE_DECLARATIONS_SEGMENT) ? EMPTY_MODULE_CODE : null;
+		}
+	};
+}
+/**
+* Metro uses `react-native-svg-transformer` so `.svg` imports are React components.
+* Vite treats them as asset URLs, so the bundler wraps each SVG in an image
+* component that accepts the same width/height/style props.
+*/
+function createSvgComponentPlugin() {
+	return {
+		name: SVG_COMPONENT_PLUGIN_NAME,
+		enforce: VITE_PLUGIN_ENFORCE_PRE,
+		async load(id) {
+			const [filePath] = id.split(VITE_QUERY_SEPARATOR);
+			if (!filePath?.endsWith(SVG_EXTENSION)) return null;
+			let content;
+			try {
+				content = await readFile(filePath);
+			} catch (error) {
+				if (error instanceof Error && "code" in error && error.code === "ENOENT") return null;
+				throw error;
+			}
+			return `
+        import React from 'react';
+
+        const svgSource = '${`${SVG_DATA_URI_PREFIX}${content.toString(BASE64_ENCODING)}`}';
+
+        function normalizeStyle(style) {
+          if (Array.isArray(style)) return Object.assign({}, ...style.filter(Boolean));
+          return style && typeof style === 'object' ? style : {};
+        }
+
+        function SvgAsset({ width = ${SVG_DEFAULT_SIZE}, height = ${SVG_DEFAULT_SIZE}, style, ...rest }) {
+          return React.createElement('img', {
+            src: svgSource,
+            width,
+            height,
+            alt: '',
+            style: { width, height, objectFit: 'contain', ...normalizeStyle(style) },
+            'aria-hidden': 'true',
+          });
+        }
+
+        export default SvgAsset;
+        export { svgSource as ReactComponent };
+      `;
+		}
+	};
+}
+function createNativeBabelTransformPlugin(appPath) {
+	const unistylesBabelPlugin = resolvePackageSubpathFrom(appPath, REACT_NATIVE_UNISTYLES_BABEL_PLUGIN);
+	const reanimatedBabelPlugin = resolvePackageSubpathFrom(appPath, REACT_NATIVE_REANIMATED_BABEL_PLUGIN);
+	const reanimatedPluginRequire = createRequire(reanimatedBabelPlugin);
+	const babel = reanimatedPluginRequire(BABEL_CORE_PACKAGE);
+	const jsxSyntaxPlugin = reanimatedPluginRequire.resolve(BABEL_PLUGIN_SYNTAX_JSX);
+	const typescriptSyntaxPlugin = reanimatedPluginRequire.resolve(BABEL_PLUGIN_SYNTAX_TYPESCRIPT);
+	return {
+		name: NATIVE_BABEL_TRANSFORM_PLUGIN_NAME,
+		enforce: VITE_PLUGIN_ENFORCE_PRE,
+		async transform(code, id) {
+			id = id.split(VITE_QUERY_SEPARATOR)[0] ?? id;
+			const isFlowModule = toViteImportPath(id).includes("/@react-native-segmented-control/segmented-control/");
+			const isSupportedNodeModule = isFlowModule || id.includes(REACT_NATIVE_MARKDOWN_DISPLAY_PATH_SEGMENT);
+			if (id.includes(NODE_MODULES_PATH_SEGMENT) && !isSupportedNodeModule || !BABEL_TRANSFORM_EXTENSION_PATTERN.test(id)) return null;
+			let syntaxPlugins = [[typescriptSyntaxPlugin, {
+				isTSX: true,
+				allExtensions: true
+			}]];
+			if (isFlowModule) {
+				const expoPresetRequire = createRequire(resolvePackageSubpathFrom(appPath, "babel-preset-expo"));
+				syntaxPlugins = [expoPresetRequire.resolve("@babel/plugin-transform-flow-strip-types"), expoPresetRequire.resolve("@babel/plugin-transform-react-jsx")];
+			}
+			const result = await babel.transformAsync(code, {
+				filename: id,
+				configFile: false,
+				babelrc: false,
+				plugins: [
+					jsxSyntaxPlugin,
+					...syntaxPlugins,
+					[unistylesBabelPlugin, {
+						root: appPath,
+						autoProcessPaths: [dirname(id)],
+						autoProcessImports: [REACT_NATIVE_PACKAGE]
+					}],
+					reanimatedBabelPlugin
+				],
+				sourceMaps: false
+			});
+			if (!result?.code) return null;
+			return {
+				code: result.code,
+				map: null
+			};
+		}
+	};
+}
+async function createExpoVectorIconsVirtualModule(appPath) {
+	const iconFamilies = await resolveExpoVectorIconFamilies(appPath);
+	const iconFamilyNames = new Set(iconFamilies.map(({ family }) => family));
+	const assetImports = iconFamilies.map(({ family, fontPath, glyphMapPath }) => `import ${family}FontUrl from '${fontPath}?url';\n        import ${family}GlyphMap from '${glyphMapPath}';`).join("\n        ");
+	return {
+		name: EXPO_ICONS_REDIRECT_PLUGIN_NAME,
+		enforce: VITE_PLUGIN_ENFORCE_PRE,
+		resolveId(source) {
+			return getExpoVectorIconsVirtualModuleId(source, iconFamilyNames);
+		},
+		load(id) {
+			if (!id.startsWith(EXPO_VECTOR_ICONS_RESOLVED_MODULE_PREFIX)) return null;
+			const requestedFamily = id.slice(EXPO_VECTOR_ICONS_RESOLVED_MODULE_PREFIX.length + 1);
+			const defaultFamily = iconFamilyNames.has(requestedFamily) ? requestedFamily : DEFAULT_ICON_FAMILY;
+			const familyExports = iconFamilies.map(({ family }) => `export const ${family} = /* @__PURE__ */ createIconComponent('${family}', ${family}FontUrl, ${family}GlyphMap);`).join("\n        ");
+			return `
+        // @ts-check
+        import React from 'react';
+        ${assetImports}
+
+        const loadedFonts = new Set();
+
+        /**
+         * @param {unknown} style
+         * @returns {Record<string, unknown>}
+         */
+        function normalizeStyle(style) {
+          if (Array.isArray(style)) return Object.assign({}, ...style.filter(Boolean));
+          return style && typeof style === 'object' ? style : {};
+        }
+
+        /**
+         * @param {string} fontFamily
+         * @param {string} fontUrl
+         */
+        function ensureFontFace(fontFamily, fontUrl) {
+          if (loadedFonts.has(fontFamily) || typeof document === 'undefined') return;
+          const style = document.createElement('style');
+          style.textContent = '@font-face { font-family: "' + fontFamily + '"; src: url("' + fontUrl + '") format("truetype"); font-weight: normal; font-style: normal; font-display: block; }';
+          document.head.appendChild(style);
+          loadedFonts.add(fontFamily);
+        }
+
+        /**
+         * @param {string} fontFamily
+         * @param {string} fontUrl
+         * @param {Record<string, number>} glyphMap
+         */
+        function createIconComponent(fontFamily, fontUrl, glyphMap) {
+          /**
+           * @param {{ name: string; size?: number; color?: string; style?: unknown }} props
+           */
+          function Icon({ name, size = 24, color = '#000', style }) {
+            ensureFontFace(fontFamily, fontUrl);
+            const glyph = glyphMap[name];
+            return React.createElement('span', {
+              style: {
+                fontSize: size,
+                color,
+                fontFamily,
+                fontWeight: 'normal',
+                fontStyle: 'normal',
+                lineHeight: 1,
+                letterSpacing: 'normal',
+                textTransform: 'none',
+                display: 'inline-block',
+                width: size,
+                height: size,
+                overflow: 'hidden',
+                textAlign: 'center',
+                whiteSpace: 'nowrap',
+                verticalAlign: 'middle',
+                WebkitFontSmoothing: 'antialiased',
+                ...normalizeStyle(style),
+              },
+              children: String.fromCodePoint(typeof glyph === 'number' ? glyph : ${EXPO_VECTOR_ICONS_FALLBACK_CODEPOINT}),
+              'aria-hidden': 'true',
+            });
+          }
+          Icon.glyphMap = glyphMap;
+          return Icon;
+        }
+
+        ${familyExports}
+        const SelectedIcon = ${defaultFamily};
+        export { SelectedIcon as default };
+      `;
+		}
+	};
+}
+function resolveShimsDir() {
+	return resolveExistingDir(SHIMS_DIR_CANDIDATES, REACT_NATIVE_VISUAL_RENDER_SHIMS_LABEL, hasRequiredReactNativeShims);
+}
+async function hasRequiredReactNativeShims(candidate) {
+	return (await Promise.all(REQUIRED_REACT_NATIVE_SHIM_FILES.map((shimFile) => pathExists(path.join(candidate, shimFile))))).every(Boolean);
+}
+var ViteReactNativeBundlerService = class ViteReactNativeBundlerService extends ViteReactBundlerService {
+	static nativeInstance = null;
+	static getInstance() {
+		if (!ViteReactNativeBundlerService.nativeInstance) ViteReactNativeBundlerService.nativeInstance = new ViteReactNativeBundlerService();
+		return ViteReactNativeBundlerService.nativeInstance;
+	}
+	getBundlerId() {
+		return VITE_REACT_NATIVE_BUNDLER_ID;
+	}
+	async getAdditionalVitePlugins(appPath) {
+		return [
+			{
+				name: REACT_NATIVE_OPTIMIZE_DEPS_PLUGIN_NAME,
+				config: (config) => ({ optimizeDeps: {
+					rolldownOptions: {
+						resolve: { extensions: config.resolve?.extensions },
+						moduleTypes: {
+							".ts": "ts",
+							".tsx": "tsx"
+						}
+					},
+					exclude: [
+						"@react-native-segmented-control/segmented-control",
+						SAFE_AREA_CONTEXT_PACKAGE,
+						"expo-haptics",
+						"expo-modules-core",
+						"react-native-gesture-handler"
+					],
+					include: ["react-native-gesture-handler > hoist-non-react-statics", "react-native-gesture-handler > invariant"]
+				} })
+			},
+			createExpoTypeDeclarationStubPlugin(),
+			createSvgComponentPlugin(),
+			...appPath ? [await createExpoVectorIconsVirtualModule(appPath)] : [],
+			...appPath ? [createNativeBabelTransformPlugin(appPath)] : [],
+			...react()
+		];
+	}
+	generateFrameworkSetupImports(options) {
+		const { appPath, darkMode, unistylesConfig } = options;
+		return `${unistylesConfig ? `import '${toViteImportPath(path.join(appPath, unistylesConfig))}';
+import { UnistylesRuntime } from '${REACT_NATIVE_UNISTYLES_PACKAGE}';
+
+UnistylesRuntime.setAdaptiveThemes(false);
+UnistylesRuntime.setTheme('${darkMode ? "dark" : "light"}');` : ""}
+import { SafeAreaProvider } from '${SAFE_AREA_CONTEXT_PACKAGE}';
+
+const styleSystemSafeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 393, height: 852 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+};`;
+	}
+	generateStoryImport(componentPath) {
+		return `const Stories = await import('${componentPath}');`;
+	}
+	wrapFrameworkElement(elementExpression) {
+		return `React.createElement(SafeAreaProvider, { initialMetrics: styleSystemSafeAreaMetrics }, ${elementExpression})`;
+	}
+	getViteEsbuildConfig() {}
+	getViteOxcConfig() {
+		return false;
+	}
+	getViteDefineConfig() {
+		return {
+			[REACT_NATIVE_DEV_GLOBAL]: REACT_NATIVE_DEV_VALUE,
+			[REACT_NATIVE_GLOBAL]: REACT_NATIVE_GLOBAL_VALUE,
+			[EXPO_OS_DEFINE]: EXPO_OS_WEB_VALUE
+		};
+	}
+	generatePreviewStyles() {
+		return `html { color-scheme: light; }
+    html.dark { color-scheme: dark; }
+    body {
+      margin: 0;
+      padding: 0;
+      background: var(--colors-background, Canvas);
+      color: var(--colors-foreground, CanvasText);
+    }
+    #root {
+      display: block;
+      width: 100%;
+      min-height: 100vh;
+      overflow: hidden;
+    }
+    #root > * {
+      min-height: 100vh;
+    }`;
+	}
+	async getViteResolveConfig(appPath) {
+		const shimsDir = await resolveShimsDir();
+		const reactNativeUnistylesDir = resolvePackageDirFrom(appPath, REACT_NATIVE_UNISTYLES_PACKAGE);
+		const reactNativeUnistylesEntry = path.join(reactNativeUnistylesDir, REACT_NATIVE_UNISTYLES_WEB_INDEX);
+		const reactNativeWebDir = resolvePackageDirFrom(appPath, REACT_NATIVE_WEB_PACKAGE);
+		return {
+			extensions: [...VITE_RESOLVE_EXTENSIONS],
+			alias: [
+				...appReactAliases(appPath),
+				{
+					find: APP_SOURCE_ALIAS,
+					replacement: path.join(appPath, APP_SOURCE_DIR)
+				},
+				{
+					find: /^react-native$/,
+					replacement: reactNativeWebDir
+				},
+				{
+					find: /^react-native-unistyles\/components\/native\/(.+)$/,
+					replacement: path.join(reactNativeUnistylesDir, REACT_NATIVE_UNISTYLES_NATIVE_COMPONENTS, "$1.js")
+				},
+				{
+					find: new RegExp(`^${REACT_NATIVE_UNISTYLES_PACKAGE}$`),
+					replacement: reactNativeUnistylesEntry
+				},
+				{
+					find: EXPO_SYMBOLS_PACKAGE,
+					replacement: path.join(shimsDir, EXPO_SYMBOLS_SHIM_FILE)
+				},
+				{
+					find: /^react-native-quick-base64$/,
+					replacement: path.join(shimsDir, QUICK_BASE64_SHIM_FILE)
+				},
+				{
+					find: STORYBOOK_REACT_NATIVE_PACKAGE,
+					replacement: STORYBOOK_REACT_PACKAGE
+				}
+			]
+		};
+	}
+};
+//#endregion
+//#region src/services/BundlerService/childProtocol.ts
+const bundlerKeySchema = z.enum(["vite-react", "vite-react-native"]);
+const renderOptions = z.object({
+	componentPath: z.string().min(1),
+	storyName: z.string().min(1),
+	appPath: z.string().min(1),
+	args: z.record(z.string(), z.unknown()).optional(),
+	themePath: z.string().optional(),
+	darkMode: z.boolean().optional(),
+	cssFiles: z.array(z.string()).optional(),
+	rootComponent: z.string().optional(),
+	unistylesConfig: z.string().optional()
+});
+const id = z.number().int().positive();
+const childRequestSchema = z.discriminatedUnion("method", [
+	z.object({
+		id,
+		method: z.literal("initialize"),
+		params: z.object({
+			bundler: bundlerKeySchema,
+			workspaceRoot: z.string().optional()
+		})
+	}),
+	z.object({
+		id,
+		method: z.literal("startDevServer"),
+		params: z.string().min(1)
+	}),
+	z.object({
+		id,
+		method: z.literal("serveComponent"),
+		params: renderOptions
+	}),
+	z.object({
+		id,
+		method: z.literal("prerenderComponent"),
+		params: renderOptions
+	}),
+	z.object({
+		id,
+		method: z.literal("cleanup"),
+		params: z.null()
+	})
+]);
+const childStateSchema = z.object({
+	url: z.string().nullable(),
+	port: z.number().int().min(0).max(65535).nullable(),
+	appPath: z.string().nullable()
+});
+const childReplySchema = z.discriminatedUnion("ok", [z.object({
+	id,
+	ok: z.literal(true),
+	result: z.unknown(),
+	state: childStateSchema
+}), z.object({
+	id,
+	ok: z.literal(false),
+	error: z.object({
+		name: z.string(),
+		message: z.string(),
+		stack: z.string().optional()
+	}),
+	state: childStateSchema
+})]);
+const childResultSchemas = {
+	initialize: z.null(),
+	startDevServer: z.object({
+		url: z.string(),
+		port: z.number().int().min(0).max(65535)
+	}),
+	serveComponent: z.object({
+		url: z.string(),
+		htmlFilePath: z.string().optional(),
+		htmlContent: z.string().optional()
+	}),
+	prerenderComponent: z.object({ htmlFilePath: z.string().min(1) }),
+	cleanup: z.null()
+};
+//#endregion
+export { ViteReactBundlerService as a, isContained as c, ViteReactNativeBundlerService as i, createLog as l, childRequestSchema as n, BaseBundlerService as o, childResultSchemas as r, TemplatesManagerService as s, childReplySchema as t, log as u };