@agimon-ai/po-style-system-tooling 0.2.14-alpha.2 → 0.2.14-alpha.21

package/dist/{stdio-CT9XjOJQ.cjs → stdio-CSwuqV9E.cjs}

@@ -39,19 +39,36 @@ let storybook_internal_csf_tools = require("storybook/internal/csf-tools");
 let glob = require("glob");
 let zod = require("zod");
 let playwright = require("playwright");
-let sharp = require("sharp");
-sharp = __toESM(sharp, 1);
+let node_module = require("node:module");
 let _tailwindcss_vite = require("@tailwindcss/vite");
 _tailwindcss_vite = __toESM(_tailwindcss_vite, 1);
 let vite_plugin_singlefile = require("vite-plugin-singlefile");
-let node_module = require("node:module");
 let node_url = require("node:url");
 let _vitejs_plugin_react = require("@vitejs/plugin-react");
 _vitejs_plugin_react = __toESM(_vitejs_plugin_react, 1);
-let node_child_process = require("node:child_process");
-let _agimon_ai_foundation_exec = require("@agimon-ai/foundation-exec");
 let _modelcontextprotocol_server = require("@modelcontextprotocol/server");
 let _modelcontextprotocol_server_stdio = require("@modelcontextprotocol/server/stdio");
+//#region src/container/types.ts
+const STYLE_SYSTEM_TYPES = {
+	ListThemesTool: Symbol.for("StyleSystem:ListThemesTool"),
+	GetCSSClassesTool: Symbol.for("StyleSystem:GetCSSClassesTool"),
+	GetComponentVisualTool: Symbol.for("StyleSystem:GetComponentVisualTool"),
+	ListSharedComponentsTool: Symbol.for("StyleSystem:ListSharedComponentsTool"),
+	ListAppComponentsTool: Symbol.for("StyleSystem:ListAppComponentsTool"),
+	ThemeServiceFactory: Symbol.for("StyleSystem:ThemeServiceFactory"),
+	CSSClassesServiceFactory: Symbol.for("StyleSystem:CSSClassesServiceFactory"),
+	StoriesIndexService: Symbol.for("StyleSystem:StoriesIndexService"),
+	GetUiComponentService: Symbol.for("StyleSystem:GetUiComponentService"),
+	AppComponentsService: Symbol.for("StyleSystem:AppComponentsService"),
+	StoriesIndexFactory: Symbol.for("StyleSystem:StoriesIndexFactory"),
+	RendererFactory: Symbol.for("StyleSystem:RendererFactory"),
+	StyleSystemConfigLoader: Symbol.for("StyleSystem:StyleSystemConfigLoader"),
+	WorkspaceRoot: Symbol.for("StyleSystem:WorkspaceRoot"),
+	DefaultThemePath: Symbol.for("StyleSystem:DefaultThemePath"),
+	GetUiComponentServiceConfig: Symbol.for("StyleSystem:GetUiComponentServiceConfig"),
+	AppComponentsServiceConfig: Symbol.for("StyleSystem:AppComponentsServiceConfig")
+};
+//#endregion
 //#region src/services/ThemeService/BaseThemeService.ts
 /**
 * BaseThemeService
@@ -122,12 +139,23 @@ const logger = (0, pino.default)({
 	mkdir: true,
 	sync: true
 }));
-const log = {
-	debug: (msg, ...args) => logger.debug({ args }, msg),
-	info: (msg, ...args) => logger.info({ args }, msg),
-	warn: (msg, ...args) => logger.warn({ args }, msg),
-	error: (msg, ...args) => logger.error({ args }, msg)
-};
+function createLog(directory) {
+	const target = directory === void 0 ? logger : (0, pino.default)({
+		level: "debug",
+		timestamp: pino.default.stdTimeFunctions.isoTime
+	}, pino.default.destination({
+		dest: node_path.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). */
@@ -275,9 +303,9 @@ var CSSThemeService = class extends BaseThemeService {
 	* Creates a new CSSThemeService instance
 	* @param config - Theme service configuration with themePath or cssFiles
 	*/
-	constructor(config) {
+	constructor(config, workspaceRoot) {
 		super(config);
-		this.monorepoRoot = TemplatesManagerService.getWorkspaceRootSync();
+		this.monorepoRoot = workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync();
 	}
 	/**
 	* Get the source identifier for this service
@@ -393,6 +421,18 @@ const DEFAULT_THEME_SERVICE_CONFIG = {
 	customServicePath: void 0
 };
 //#endregion
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateMetadata.js
+function __decorateMetadata(k, v) {
+	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
+	};
+}
+//#endregion
 //#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -419,6 +459,10 @@ function __decorate(decorators, target, key, desc) {
 * - Hardcoded service paths
 */
 let ThemeServiceFactory = class ThemeServiceFactory {
+	workspaceRoot;
+	constructor(workspaceRoot) {
+		this.workspaceRoot = workspaceRoot;
+	}
 	/**
 	* Create a theme service based on configuration.
 	*
@@ -436,7 +480,7 @@ let ThemeServiceFactory = class ThemeServiceFactory {
 			...config
 		};
 		if (resolvedConfig.customServicePath) return this.loadCustomService(resolvedConfig);
-		return new CSSThemeService(resolvedConfig);
+		return new CSSThemeService(resolvedConfig, this.workspaceRoot);
 	}
 	/**
 	* Load a custom theme service from user-specified path.
@@ -463,7 +507,12 @@ let ThemeServiceFactory = class ThemeServiceFactory {
 		}
 	}
 };
-ThemeServiceFactory = __decorate([(0, inversify.injectable)()], ThemeServiceFactory);
+ThemeServiceFactory = __decorate([
+	(0, inversify.injectable)(),
+	__decorateParam(0, (0, inversify.inject)(STYLE_SYSTEM_TYPES.WorkspaceRoot)),
+	__decorateParam(0, (0, inversify.optional)()),
+	__decorateMetadata("design:paramtypes", [String])
+], ThemeServiceFactory);
 //#endregion
 //#region src/services/CssClasses/BaseCSSClassesService.ts
 /**
@@ -791,6 +840,10 @@ const VALID_SERVICE_EXTENSIONS$1 = [
 	".cjs"
 ];
 let CSSClassesServiceFactory = class CSSClassesServiceFactory {
+	workspaceRoot;
+	constructor(workspaceRoot) {
+		this.workspaceRoot = workspaceRoot;
+	}
 	/**
 	* Create a CSS classes service based on configuration.
 	*
@@ -831,7 +884,7 @@ let CSSClassesServiceFactory = class CSSClassesServiceFactory {
 	async loadCustomService(config) {
 		const servicePath = config.customServicePath;
 		if (!servicePath) throw new Error("customServicePath is required for custom service loading");
-		const monorepoRoot = TemplatesManagerService.getWorkspaceRootSync();
+		const monorepoRoot = this.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync();
 		const resolvedPath = node_path.default.resolve(monorepoRoot, servicePath);
 		const normalizedWorkspaceRoot = node_path.default.resolve(monorepoRoot);
 		if (!resolvedPath.startsWith(normalizedWorkspaceRoot + node_path.default.sep)) throw new Error(`Security error: customServicePath "${servicePath}" resolves outside workspace root`);
@@ -852,12 +905,12 @@ let CSSClassesServiceFactory = class CSSClassesServiceFactory {
 		}
 	}
 };
-CSSClassesServiceFactory = __decorate([(0, inversify.injectable)()], CSSClassesServiceFactory);
-//#endregion
-//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateMetadata.js
-function __decorateMetadata(k, v) {
-	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-}
+CSSClassesServiceFactory = __decorate([
+	(0, inversify.injectable)(),
+	__decorateParam(0, (0, inversify.inject)(STYLE_SYSTEM_TYPES.WorkspaceRoot)),
+	__decorateParam(0, (0, inversify.optional)()),
+	__decorateMetadata("design:paramtypes", [String])
+], CSSClassesServiceFactory);
 //#endregion
 //#region src/services/StoriesIndexService/StoriesIndexService.ts
 /**
@@ -912,6 +965,7 @@ let StoriesIndexService = class StoriesIndexService {
 	*/
 	async initialize() {
 		if (this.initialized && this.lastInitResult) return this.lastInitResult;
+		if (this.config.workspaceRoot) this.monorepoRoot = await node_fs.promises.realpath(this.monorepoRoot);
 		log.info("[StoriesIndexService] Initializing story index...");
 		const storyFiles = await this.findStoryFiles();
 		log.info(`[StoriesIndexService] Found ${storyFiles.length} story files`);
@@ -983,6 +1037,7 @@ let StoriesIndexService = class StoriesIndexService {
 	* parse is shared by content hash across service instances and concurrent rules.
 	*/
 	async indexStoryFile(filePath) {
+		await this.assertContainedStory(filePath);
 		const content = await node_fs.promises.readFile(filePath, "utf-8");
 		const fileHash = this.hashContent(content);
 		const cached = storyParseCache.get(filePath);
@@ -1009,12 +1064,19 @@ let StoriesIndexService = class StoriesIndexService {
 		});
 		if (component) this.storeComponent(component);
 	}
+	async assertContainedStory(filePath) {
+		if (!this.config.workspaceRoot) return;
+		const [root, story] = await Promise.all([node_fs.promises.realpath(this.monorepoRoot), node_fs.promises.realpath(filePath)]);
+		if (!isContained(root, story)) throw new Error("Story must remain inside the configured workspace root.");
+	}
 	storeComponent(component) {
 		this.componentIndex.set(component.title, component);
 		this.componentFileIndex.set(node_path.default.resolve(component.filePath), component);
 	}
 	parseStoryFile(filePath, content, fileHash) {
-		const csf = (0, storybook_internal_csf_tools.loadCsf)(content, {
+		const alias = /^export\s+default\s+([A-Za-z_$][\w$]*)\s*;?\s*$/m.exec(content)?.[1];
+		const parsable = alias ? content.replace(new RegExp(`^export\\s+(const|let|var)\\s+(${alias.replaceAll("$", "\\$")})\\b`, "m"), "$1 $2") : content;
+		const csf = (0, storybook_internal_csf_tools.loadCsf)(parsable, {
 			fileName: filePath,
 			makeTitle: (title) => title
 		});
@@ -1108,6 +1170,7 @@ let StoriesIndexService = class StoriesIndexService {
 	* @returns True if file was updated, false if unchanged
 	*/
 	async refreshFile(filePath) {
+		await this.assertContainedStory(filePath);
 		const content = await node_fs.promises.readFile(filePath, "utf-8");
 		const newHash = this.hashContent(content);
 		const existingComponent = Array.from(this.componentIndex.values()).find((c) => c.filePath === filePath);
@@ -1147,27 +1210,6 @@ let StoriesIndexService = class StoriesIndexService {
 };
 StoriesIndexService = __decorate([(0, inversify.injectable)(), __decorateMetadata("design:paramtypes", [Object])], StoriesIndexService);
 //#endregion
-//#region src/container/types.ts
-const STYLE_SYSTEM_TYPES = {
-	ListThemesTool: Symbol.for("StyleSystem:ListThemesTool"),
-	GetCSSClassesTool: Symbol.for("StyleSystem:GetCSSClassesTool"),
-	GetComponentVisualTool: Symbol.for("StyleSystem:GetComponentVisualTool"),
-	ListSharedComponentsTool: Symbol.for("StyleSystem:ListSharedComponentsTool"),
-	ListAppComponentsTool: Symbol.for("StyleSystem:ListAppComponentsTool"),
-	PolishComponentTool: Symbol.for("StyleSystem:PolishComponentTool"),
-	ThemeServiceFactory: Symbol.for("StyleSystem:ThemeServiceFactory"),
-	CSSClassesServiceFactory: Symbol.for("StyleSystem:CSSClassesServiceFactory"),
-	StoriesIndexService: Symbol.for("StyleSystem:StoriesIndexService"),
-	GetUiComponentService: Symbol.for("StyleSystem:GetUiComponentService"),
-	AppComponentsService: Symbol.for("StyleSystem:AppComponentsService"),
-	StoriesIndexFactory: Symbol.for("StyleSystem:StoriesIndexFactory"),
-	RendererFactory: Symbol.for("StyleSystem:RendererFactory"),
-	StyleSystemConfigLoader: Symbol.for("StyleSystem:StyleSystemConfigLoader"),
-	DefaultThemePath: Symbol.for("StyleSystem:DefaultThemePath"),
-	GetUiComponentServiceConfig: Symbol.for("StyleSystem:GetUiComponentServiceConfig"),
-	AppComponentsServiceConfig: Symbol.for("StyleSystem:AppComponentsServiceConfig")
-};
-//#endregion
 //#region src/config/types.ts
 /**
 * Style system configuration types.
@@ -1333,9 +1375,9 @@ const EXPO_APP_CONFIG_FILE = "app.json";
 * values, and warns when it is the one that resolves.
 */
 async function resolveStyleSystemThemePath(input) {
-	const hostRoot = TemplatesManagerService.getWorkspaceRootSync();
+	const hostRoot = input.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync();
 	const resolvedAppPath = input.appPath ? node_path.default.isAbsolute(input.appPath) ? node_path.default.normalize(input.appPath) : node_path.default.join(hostRoot, input.appPath) : hostRoot;
-	const monorepoRoot = input.appPath ? TemplatesManagerService.getWorkspaceRootSync(resolvedAppPath) : hostRoot;
+	const monorepoRoot = input.workspaceRoot ?? (input.appPath ? TemplatesManagerService.getWorkspaceRootSync(resolvedAppPath) : hostRoot);
 	const workspaceCandidate = node_path.default.join(monorepoRoot, input.themePath);
 	const candidates = node_path.default.isAbsolute(input.themePath) ? [input.themePath] : [workspaceCandidate, node_path.default.resolve(resolvedAppPath, input.themePath)];
 	const uniqueCandidates = [...new Set(candidates)];
@@ -1385,19 +1427,23 @@ function isNotFound(error) {
 	return error instanceof Error && "code" in error && error.code === "ENOENT";
 }
 let StyleSystemConfigLoader = class StyleSystemConfigLoader {
+	workspaceRoot;
 	/**
 	* Promises rather than values, so concurrent resolves de-duplicate. Several
 	* callers hit config from inside Promise.all/allSettled.
 	*/
 	rootPromises = /* @__PURE__ */ new Map();
 	projectCache = /* @__PURE__ */ new Map();
+	constructor(workspaceRoot) {
+		this.workspaceRoot = workspaceRoot;
+	}
 	/** Drop all cached config state. */
 	invalidate() {
 		this.rootPromises.clear();
 		this.projectCache.clear();
 	}
 	/** Load and cache the workspace root config. */
-	async loadRoot(workspaceRoot = TemplatesManagerService.getWorkspaceRootSync()) {
+	async loadRoot(workspaceRoot = this.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync()) {
 		let pending = this.rootPromises.get(workspaceRoot);
 		if (!pending) {
 			pending = this.readRoot(workspaceRoot);
@@ -1413,8 +1459,8 @@ let StyleSystemConfigLoader = class StyleSystemConfigLoader {
 	/** Resolve the merged configuration for a project. */
 	async resolveProject(appPath) {
 		if (!appPath || typeof appPath !== "string") throw new Error("appPath is required and must be a non-empty string");
-		const resolvedAppPath = node_path.default.isAbsolute(appPath) ? node_path.default.normalize(appPath) : node_path.default.join(TemplatesManagerService.getWorkspaceRootSync(), appPath);
-		const workspaceRoot = TemplatesManagerService.getWorkspaceRootSync(resolvedAppPath);
+		const resolvedAppPath = node_path.default.isAbsolute(appPath) ? node_path.default.normalize(appPath) : node_path.default.join(this.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync(), appPath);
+		const workspaceRoot = this.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync(resolvedAppPath);
 		const cached = this.projectCache.get(resolvedAppPath);
 		if (cached) return cached;
 		const pending = this.readProject(resolvedAppPath, workspaceRoot);
@@ -1481,7 +1527,12 @@ let StyleSystemConfigLoader = class StyleSystemConfigLoader {
 		};
 	}
 };
-StyleSystemConfigLoader = __decorate([(0, inversify.injectable)()], StyleSystemConfigLoader);
+StyleSystemConfigLoader = __decorate([
+	(0, inversify.injectable)(),
+	__decorateParam(0, (0, inversify.inject)(STYLE_SYSTEM_TYPES.WorkspaceRoot)),
+	__decorateParam(0, (0, inversify.optional)()),
+	__decorateMetadata("design:paramtypes", [String])
+], StyleSystemConfigLoader);
 //#endregion
 //#region src/config/index.ts
 /**
@@ -1579,6 +1630,17 @@ const browserLaunchConfigs = [
 ];
 const STORY_ROOT_SELECTOR = "#root";
 const VITE_ERROR_OVERLAY_SELECTOR = "vite-error-overlay";
+const STORY_MOUNT_TIMEOUT_MS = 1e4;
+/**
+* Runs in the page (this package has no DOM types): resolves once web fonts and every image the
+* story rendered have loaded (or failed), then two frames have painted.
+*/
+const FONTS_IMAGES_AND_TWO_FRAMES = `Promise.all([
+  document.fonts.ready,
+  ...Array.from(document.images, (image) =>
+    image.complete ? null : new Promise((resolve) => { image.addEventListener('load', resolve, { once: true }); image.addEventListener('error', resolve, { once: true }); }),
+  ),
+]).then(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))))`;
 /**
 * Attempts to launch a browser, trying multiple configurations in order of preference.
 * @returns Launched browser instance
@@ -1600,26 +1662,39 @@ async function launchBrowserWithFallback() {
 	throw new Error(`No browser available. Tried:\n${errors.join("\n")}\n\nPlease install Chrome, or run 'npx playwright install chromium'`);
 }
 async function takeScreenshot(options) {
-	const { url, output, width = 1280, height = 800, fullPage = false, browser: browserName = "chromium", waitTime = 1e3, darkMode = false, mobile = false, generateThumbnail = false, thumbnailWidth = 400, thumbnailQuality = 80, base64 = false } = options;
+	const { url, output, width = 1280, height = 800, fullPage = false, browser: browserName = "chromium", waitTime = 1e3, darkMode = false, mobile = false, generateThumbnail = false, thumbnailWidth = 400, thumbnailQuality = 80, base64 = false, sharedBrowser } = options;
 	let browser = null;
+	let context = null;
+	let release;
 	try {
-		if (browserName === "chromium") browser = await launchBrowserWithFallback();
+		if (sharedBrowser) {
+			const borrowed = await sharedBrowser();
+			if ("browser" in borrowed) {
+				browser = borrowed.browser;
+				release = () => borrowed.release();
+			} else browser = borrowed;
+		} else if (browserName === "chromium") browser = await launchBrowserWithFallback();
 		else {
 			const browserType = browsers[browserName];
 			if (!browserType) throw new Error(`Unsupported browser: ${browserName}`);
 			browser = await browserType.launch({ headless: true });
 		}
-		const page = await (await browser.newContext({
+		context = await browser.newContext({
 			viewport: {
 				width,
 				height
 			},
 			colorScheme: darkMode ? "dark" : "light",
 			isMobile: mobile
-		})).newPage();
+		});
+		const page = await context.newPage();
 		const runtimeErrors = [];
-		page.on("pageerror", (error) => runtimeErrors.push(error.stack ?? error.message));
-		await page.goto(url, { waitUntil: "networkidle" });
+		page.on("pageerror", (error) => runtimeErrors.push(error.stack || error.message || String(error)));
+		await page.goto(url, { waitUntil: "load" });
+		if (await page.waitForSelector(`${STORY_ROOT_SELECTOR} > *, ${VITE_ERROR_OVERLAY_SELECTOR}`, {
+			state: "attached",
+			timeout: STORY_MOUNT_TIMEOUT_MS
+		}).then(() => true).catch(() => false)) await page.evaluate(FONTS_IMAGES_AND_TWO_FRAMES);
 		if (waitTime > 0) await page.waitForTimeout(waitTime);
 		const hasViteErrorOverlay = await page.locator(VITE_ERROR_OVERLAY_SELECTOR).count();
 		const renderedChildCount = await page.locator(`${STORY_ROOT_SELECTOR} > *`).count();
@@ -1631,7 +1706,27 @@ async function takeScreenshot(options) {
 			path: output,
 			fullPage
 		});
-		const screenshotMetadata = await (0, sharp.default)(screenshotBuffer).metadata();
+		const screenshotMetadata = await page.evaluate(`(async () => {
+      const bytes = Uint8Array.from(atob(${JSON.stringify(screenshotBuffer.toString("base64"))}), (char) => char.charCodeAt(0));
+      const image = await createImageBitmap(new Blob([bytes]));
+      try {
+        const result = { width: image.width, height: image.height };
+        if (${generateThumbnail}) {
+          const width = ${JSON.stringify(thumbnailWidth)};
+          const quality = ${JSON.stringify(thumbnailQuality)};
+          if (!Number.isSafeInteger(width) || width <= 0 || !Number.isInteger(quality) || quality < 1 || quality > 100)
+            throw new Error('Invalid thumbnail width or quality.');
+          const canvas = document.createElement('canvas');
+          canvas.width = width;
+          canvas.height = Math.max(1, Math.round(image.height * width / image.width));
+          canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height);
+          result.thumbnail = canvas.toDataURL('image/jpeg', quality / 100).split(',')[1];
+        }
+        return result;
+      } finally {
+        image.close();
+      }
+    })()`);
 		const result = {
 			imagePath: output,
 			width: screenshotMetadata.width ?? width,
@@ -1640,13 +1735,18 @@ async function takeScreenshot(options) {
 		if (generateThumbnail) {
 			const ext = node_path.default.extname(output);
 			const thumbnailPath = output.replace(ext, `-thumb${ext}`);
-			await (0, sharp.default)(screenshotBuffer).resize(thumbnailWidth).jpeg({ quality: thumbnailQuality }).toFile(thumbnailPath.replace(ext, ".jpg"));
+			await (0, node_fs_promises.writeFile)(thumbnailPath.replace(ext, ".jpg"), Buffer.from(screenshotMetadata.thumbnail, "base64"));
 			result.thumbnailPath = thumbnailPath.replace(ext, ".jpg");
 		}
 		if (base64) result.base64 = screenshotBuffer.toString("base64");
 		return result;
 	} finally {
-		if (browser) await browser.close();
+		try {
+			if (sharedBrowser) await context?.close();
+			else if (browser) await browser.close();
+		} finally {
+			release?.();
+		}
 	}
 }
 //#endregion
@@ -1896,6 +1996,37 @@ function createStoryEntryPlugin(getStoryConfig, generateCode) {
 		}
 	};
 }
+/** Where a package the app depends on is installed, resolved from the app rather than from this tool. */
+function appPackageDir(appPath, packageName) {
+	return node_path.default.dirname((0, node_module.createRequire)(node_path.default.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: node_path.default.join(reactDir, "$1")
+		},
+		{
+			find: /^react-dom$/,
+			replacement: reactDomDir
+		},
+		{
+			find: /^react-dom\/(.*)$/,
+			replacement: node_path.default.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
@@ -1936,6 +2067,7 @@ function createTanStackStartStubPlugin() {
 * ```
 */
 var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerService {
+	workspaceRoot;
 	static instance = null;
 	server = null;
 	monorepoRoot;
@@ -1952,9 +2084,10 @@ var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerS
 	* Use getInstance() for singleton access.
 	* @param config - Service configuration options
 	*/
-	constructor(config = {}) {
+	constructor(config = {}, workspaceRoot) {
 		super(config);
-		this.monorepoRoot = TemplatesManagerService.getWorkspaceRootSync();
+		this.workspaceRoot = workspaceRoot;
+		this.monorepoRoot = workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync();
 	}
 	/**
 	* Get the singleton instance of ViteReactBundlerService.
@@ -2055,6 +2188,7 @@ var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerS
 	*/
 	async doStartDevServer(resolvedAppPath) {
 		const tmpDir = node_path.default.join(resolvedAppPath, TMP_DIR_NAME);
+		let createdServer;
 		try {
 			await node_fs.promises.mkdir(tmpDir, { recursive: true });
 			const { createServer } = await import("vite");
@@ -2069,6 +2203,33 @@ var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerS
 					(0, _tailwindcss_vite.default)(),
 					createTanStackStartStubPlugin(),
 					...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: this.getViteResolveConfig(resolvedAppPath),
@@ -2080,28 +2241,7 @@ var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerS
 					open: false
 				}
 			});
-			this.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 this.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();
-			});
+			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.");
@@ -2116,6 +2256,15 @@ var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerS
 				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;
 			const err = /* @__PURE__ */ new Error(`Failed to start dev server for ${resolvedAppPath}: ${error instanceof Error ? error.message : String(error)}`);
 			err.cause = error;
 			throw err;
@@ -2134,7 +2283,7 @@ var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerS
 		validateComponentPath(componentPath);
 		validateArgsSize(args);
 		const resolvedAppPath = node_path.default.isAbsolute(appPath) ? appPath : node_path.default.join(this.monorepoRoot, appPath);
-		validateCssFiles(cssFiles, TemplatesManagerService.getWorkspaceRootSync(resolvedAppPath));
+		validateCssFiles(cssFiles, this.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync(resolvedAppPath));
 		if (this.currentAppPath !== resolvedAppPath) throw new Error(`Dev server is running for ${this.currentAppPath} but requested ${resolvedAppPath}.`);
 		const tmpDir = node_path.default.join(resolvedAppPath, TMP_DIR_NAME);
 		try {
@@ -2182,7 +2331,7 @@ var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerS
 		validateComponentPath(componentPath);
 		validateArgsSize(args);
 		const resolvedAppPath = node_path.default.isAbsolute(appPath) ? appPath : node_path.default.join(this.monorepoRoot, appPath);
-		validateCssFiles(cssFiles, TemplatesManagerService.getWorkspaceRootSync(resolvedAppPath));
+		validateCssFiles(cssFiles, this.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync(resolvedAppPath));
 		const tmpDir = node_path.default.join(resolvedAppPath, TMP_DIR_NAME);
 		try {
 			await node_fs.promises.mkdir(tmpDir, { recursive: true });
@@ -2208,9 +2357,10 @@ var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerS
 	* Subclasses can override to add platform-specific aliases (e.g., react-native-web).
 	*/
 	getViteResolveConfig(appPath) {
-		const workspaceRoot = TemplatesManagerService.getWorkspaceRootSync(appPath);
+		const workspaceRoot = this.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync(appPath);
 		const frontendPackagePath = (packageDir, sourcePath = "index.ts") => node_path.default.join(workspaceRoot, WORKSPACE_PACKAGE_DIR_PREFIX, "frontend", packageDir, APP_SOURCE_DIR$1, sourcePath);
 		return { alias: [
+			...appReactAliases(appPath),
 			{
 				find: APP_SOURCE_ALIAS_PATTERN,
 				replacement: `${node_path.default.join(appPath, APP_SOURCE_DIR$1)}/`
@@ -2317,7 +2467,7 @@ var ViteReactBundlerService = class ViteReactBundlerService extends BaseBundlerS
 	*/
 	async generateWrapperCss(appPath, cssFiles) {
 		const resolvedCssFiles = cssFiles.length > 0 ? cssFiles : await this.getDefaultCssFiles(appPath);
-		const workspaceRoot = TemplatesManagerService.getWorkspaceRootSync(appPath);
+		const workspaceRoot = this.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync(appPath);
 		const cssImportStatements = resolvedCssFiles.map((cssFile) => {
 			if (node_path.default.isAbsolute(cssFile)) return `@import '${cssFile}';`;
 			if (cssFile.startsWith(PACKAGE_IMPORT_PREFIX) || cssFile.startsWith(TAILWIND_IMPORT_PREFIX)) return `@import '${cssFile}';`;
@@ -2539,20 +2689,16 @@ mount();
 *
 * Extends ViteReactBundlerService with React Native → web aliases
 * so native-ui components can be rendered in a browser via Playwright.
-* Uses React Native Web and the app's real Unistyles web runtime.
+* Uses the app's own React Native Web and Unistyles web runtime.
 *
-* All shim paths resolve relative to this package — no monorepo-root assumptions.
+* Shim paths resolve relative to this package; React, react-dom and
+* react-native-web are peers and always resolve from the app.
 */
 const __dirname$1 = (0, node_path.dirname)((0, node_url.fileURLToPath)(require("url").pathToFileURL(__filename).href));
-const require$1 = (0, node_module.createRequire)(require("url").pathToFileURL(__filename).href);
-const REACT_PACKAGE = "react";
-const REACT_DOM_PACKAGE = "react-dom";
 const REACT_NATIVE_PACKAGE = "react-native";
 const REACT_NATIVE_WEB_PACKAGE = "react-native-web";
-const REACT_NATIVE_INDEX_SUBPATH = "react-native/index.js";
 const REACT_NATIVE_UNISTYLES_PACKAGE = "react-native-unistyles";
 const REACT_NATIVE_UNISTYLES_BABEL_PLUGIN = "react-native-unistyles/plugin";
-const REACT_NATIVE_REANIMATED_PACKAGE = "react-native-reanimated";
 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";
@@ -2566,8 +2712,7 @@ 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_REDIRECT_PLUGIN_NAME = "vite-redirect-react-native";
-const REACT_NATIVE_REANIMATED_REDIRECT_PLUGIN_NAME = "vite-redirect-react-native-reanimated";
+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`;
@@ -2578,10 +2723,8 @@ const EXPO_VECTOR_ICONS_SHIM_FILE = "expo-vector-icons.ts";
 const EXPO_SYMBOLS_SHIM_FILE = "expo-symbols.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_WEB_DIST_INDEX = "dist/index.js";
 const REACT_NATIVE_UNISTYLES_WEB_INDEX = "lib/module/index.js";
 const REACT_NATIVE_UNISTYLES_NATIVE_COMPONENTS = "lib/module/components/native";
-const REACT_NATIVE_REANIMATED_WEB_INDEX = "lib/module/index.js";
 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";
@@ -2600,6 +2743,8 @@ 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",
@@ -2622,18 +2767,13 @@ const SHIMS_DIR_CANDIDATES = [
 	node_path.default.resolve(__dirname$1, "../src/shims")
 ];
 const SHIMS_DIR = resolveShimsDir();
-const REACT_NATIVE_WEB_DIR = resolvePackageDir(REACT_NATIVE_WEB_PACKAGE);
 function resolveExistingDir(candidates, label, isValidDir = () => true) {
 	const existing = candidates.find((candidate) => (0, node_fs.existsSync)(candidate) && isValidDir(candidate));
 	if (existing) return existing;
 	throw new Error(`Could not resolve ${label}. Tried: ${candidates.join(", ")}`);
 }
-function resolvePackageDir(packageName) {
-	return (0, node_path.dirname)(require$1.resolve(`${packageName}/${PACKAGE_JSON_SUBPATH}`));
-}
 function resolvePackageDirFrom(fromPath, packageName) {
-	const fromRequire = (0, node_module.createRequire)(node_path.default.join(fromPath, PACKAGE_JSON_SUBPATH));
-	return (0, node_path.dirname)(fromRequire.resolve(`${packageName}/${PACKAGE_JSON_SUBPATH}`));
+	return appPackageDir(fromPath, packageName);
 }
 function resolvePackageSubpathFrom(fromPath, subpath) {
 	return (0, node_module.createRequire)(node_path.default.join(fromPath, PACKAGE_JSON_SUBPATH)).resolve(subpath);
@@ -2728,6 +2868,7 @@ function createNativeBabelTransformPlugin(appPath) {
 		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;
@@ -2869,24 +3010,20 @@ var ViteReactNativeBundlerService = class ViteReactNativeBundlerService extends
 		return VITE_REACT_NATIVE_BUNDLER_ID;
 	}
 	getAdditionalVitePlugins(appPath) {
-		const reactNativeWebEntry = node_path.default.join(REACT_NATIVE_WEB_DIR, REACT_NATIVE_WEB_DIST_INDEX);
-		const reactNativeReanimatedEntry = appPath ? node_path.default.join(resolvePackageDirFrom(appPath, REACT_NATIVE_REANIMATED_PACKAGE), REACT_NATIVE_REANIMATED_WEB_INDEX) : null;
 		return [
 			{
-				name: REACT_NATIVE_REDIRECT_PLUGIN_NAME,
-				enforce: VITE_PLUGIN_ENFORCE_PRE,
-				resolveId(source) {
-					if (source === REACT_NATIVE_PACKAGE || source === REACT_NATIVE_INDEX_SUBPATH) return reactNativeWebEntry;
-					return null;
-				}
-			},
-			{
-				name: REACT_NATIVE_REANIMATED_REDIRECT_PLUGIN_NAME,
-				enforce: VITE_PLUGIN_ENFORCE_PRE,
-				resolveId(source) {
-					if (source === REACT_NATIVE_REANIMATED_PACKAGE) return reactNativeReanimatedEntry;
-					return null;
-				}
+				name: REACT_NATIVE_OPTIMIZE_DEPS_PLUGIN_NAME,
+				config: (config) => ({ optimizeDeps: {
+					rolldownOptions: { resolve: { extensions: config.resolve?.extensions } },
+					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(),
@@ -2922,7 +3059,8 @@ const styleSystemSafeAreaMetrics = {
 	getViteDefineConfig() {
 		return {
 			[REACT_NATIVE_DEV_GLOBAL]: REACT_NATIVE_DEV_VALUE,
-			[REACT_NATIVE_GLOBAL]: REACT_NATIVE_GLOBAL_VALUE
+			[REACT_NATIVE_GLOBAL]: REACT_NATIVE_GLOBAL_VALUE,
+			[EXPO_OS_DEFINE]: EXPO_OS_WEB_VALUE
 		};
 	}
 	generatePreviewStyles() {
@@ -2947,38 +3085,18 @@ const styleSystemSafeAreaMetrics = {
 	getViteResolveConfig(appPath) {
 		const reactNativeUnistylesDir = resolvePackageDirFrom(appPath, REACT_NATIVE_UNISTYLES_PACKAGE);
 		const reactNativeUnistylesEntry = node_path.default.join(reactNativeUnistylesDir, REACT_NATIVE_UNISTYLES_WEB_INDEX);
-		const reactDir = resolvePackageDirFrom(appPath, REACT_PACKAGE);
-		const reactDomDir = resolvePackageDirFrom(appPath, REACT_DOM_PACKAGE);
+		const reactNativeWebDir = resolvePackageDirFrom(appPath, REACT_NATIVE_WEB_PACKAGE);
 		return {
 			extensions: [...VITE_RESOLVE_EXTENSIONS],
 			alias: [
-				{
-					find: /^react$/,
-					replacement: reactDir
-				},
-				{
-					find: /^react\/(.*)$/,
-					replacement: node_path.default.join(reactDir, "$1")
-				},
-				{
-					find: /^react-dom$/,
-					replacement: reactDomDir
-				},
-				{
-					find: /^react-dom\/(.*)$/,
-					replacement: node_path.default.join(reactDomDir, "$1")
-				},
+				...appReactAliases(appPath),
 				{
 					find: APP_SOURCE_ALIAS,
 					replacement: node_path.default.join(appPath, APP_SOURCE_DIR)
 				},
 				{
-					find: REACT_NATIVE_PACKAGE,
-					replacement: REACT_NATIVE_WEB_DIR
-				},
-				{
-					find: REACT_NATIVE_INDEX_SUBPATH,
-					replacement: node_path.default.join(REACT_NATIVE_WEB_DIR, REACT_NATIVE_WEB_DIST_INDEX)
+					find: /^react-native$/,
+					replacement: reactNativeWebDir
 				},
 				{
 					find: /^react-native-unistyles\/components\/native\/(.+)$/,
@@ -3041,8 +3159,8 @@ const VALID_SERVICE_EXTENSIONS = [
 * await bundler.startDevServer('apps/my-app');
 * ```
 */
-function createDefaultBundlerService() {
-	return ViteReactBundlerService.getInstance();
+function createDefaultBundlerService(workspaceRoot) {
+	return workspaceRoot ? new ViteReactBundlerService({}, workspaceRoot) : ViteReactBundlerService.getInstance();
 }
 /**
 * Registry of available bundler service factories.
@@ -3077,13 +3195,17 @@ bundlerRegistry.set("vite-react-native", () => ViteReactNativeBundlerService.get
 * const bundler = getBundlerService('unknown'); // Returns ViteReactBundlerService
 * ```
 */
-function getBundlerService(key) {
+function getBundlerService(key, workspaceRoot) {
+	if (workspaceRoot) {
+		if (key === "vite-react-native") return new ViteReactNativeBundlerService({}, workspaceRoot);
+		if (key === "vite-react") return new ViteReactBundlerService({}, workspaceRoot);
+	}
 	const factory = bundlerRegistry.get(key);
 	if (factory) return factory();
-	return createDefaultBundlerService();
+	return createDefaultBundlerService(workspaceRoot);
 }
 /** Cached bundler service instance loaded from config */
-let cachedBundlerService = null;
+let cachedDefaultBundlerService = null;
 /**
 * Get bundler service based on the workspace style-system.config.yaml.
 *
@@ -3107,25 +3229,31 @@ let cachedBundlerService = null;
 * await bundler.startDevServer('apps/my-app');
 * ```
 */
-async function getBundlerServiceFromConfig() {
-	if (cachedBundlerService) return cachedBundlerService;
-	const config = await getBundlerConfig();
+async function getBundlerServiceFromConfig(options) {
+	if (options) return loadBundlerServiceFromConfig(options);
+	cachedDefaultBundlerService ??= await loadBundlerServiceFromConfig();
+	return cachedDefaultBundlerService;
+}
+async function loadBundlerServiceFromConfig(options) {
+	let cachedBundlerService = null;
+	const fallback = options?.defaultFactory ?? (() => createDefaultBundlerService(options?.workspaceRoot));
+	const config = options ? (await (options.configLoader ?? new StyleSystemConfigLoader(options.workspaceRoot)).loadRoot()).bundler : await getBundlerConfig();
 	if (!config?.customService) {
-		cachedBundlerService = createDefaultBundlerService();
+		cachedBundlerService = fallback();
 		return cachedBundlerService;
 	}
-	const monorepoRoot = TemplatesManagerService.getWorkspaceRootSync();
+	const monorepoRoot = options?.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync();
 	const customServicePath = node_path.default.resolve(monorepoRoot, config.customService);
 	const normalizedWorkspaceRoot = node_path.default.resolve(monorepoRoot);
 	if (!customServicePath.startsWith(normalizedWorkspaceRoot + node_path.default.sep)) {
 		log.error(`[BundlerServiceFactory] Security error: customService path "${config.customService}" resolves outside workspace root`);
-		cachedBundlerService = createDefaultBundlerService();
+		cachedBundlerService = fallback();
 		return cachedBundlerService;
 	}
 	const ext = node_path.default.extname(customServicePath).toLowerCase();
 	if (!VALID_SERVICE_EXTENSIONS.includes(ext)) {
 		log.error(`[BundlerServiceFactory] Invalid file extension "${ext}" for customService. Expected one of: ${VALID_SERVICE_EXTENSIONS.join(", ")}`);
-		cachedBundlerService = createDefaultBundlerService();
+		cachedBundlerService = fallback();
 		return cachedBundlerService;
 	}
 	try {
@@ -3157,7 +3285,7 @@ async function getBundlerServiceFromConfig() {
 		const message = error instanceof Error ? error.message : String(error);
 		log.error(`[BundlerServiceFactory] Failed to load custom bundler service: ${message}`);
 		log.info("[BundlerServiceFactory] Falling back to default ViteReactBundlerService");
-		cachedBundlerService = createDefaultBundlerService();
+		cachedBundlerService = fallback();
 		return cachedBundlerService;
 	}
 }
@@ -3202,8 +3330,8 @@ var ThemeService = class {
 	* Creates a new ThemeService instance
 	* @param config - Design system configuration
 	*/
-	constructor(config) {
-		this.monorepoRoot = TemplatesManagerService.getWorkspaceRootSync();
+	constructor(config, workspaceRoot) {
+		this.monorepoRoot = workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync();
 		this.config = config;
 		if (this.config.themeProvider) log.info(`[ThemeService] Using theme provider: ${this.config.themeProvider}`);
 		log.info(`[ThemeService] Design system type: ${this.config.type}`);
@@ -3366,7 +3494,8 @@ export { WrappedComponent };
 */
 const DEFAULT_RENDER_WIDTH = 1280;
 const DEFAULT_RENDER_HEIGHT = 800;
-const SCREENSHOT_WAIT_TIME_MS = 2e3;
+/** Settle time after the readiness check in takeScreenshot (mount, fonts, two frames). */
+const SCREENSHOT_WAIT_TIME_MS = 100;
 const DEFAULT_CLEANUP_AGE_MS = 36e5;
 const COMPONENT_FILE_PREFIX = "component-";
 const FILE_URL_PREFIX = "file://";
@@ -3406,6 +3535,9 @@ var ComponentRendererService = class ComponentRendererService {
 	themeService;
 	appPath;
 	bundlerFactory;
+	log;
+	preserveOutput;
+	sharedBrowser;
 	/**
 	* Creates a new ComponentRendererService instance
 	* @param designSystemConfig - Design system configuration
@@ -3415,8 +3547,12 @@ var ComponentRendererService = class ComponentRendererService {
 	constructor(designSystemConfig, appPath, options = {}) {
 		if (!appPath) throw new Error("appPath is required for ComponentRendererService");
 		this.appPath = appPath;
-		this.tmpDir = node_path.default.join(node_os.default.tmpdir(), "style-system");
-		this.themeService = new ThemeService(designSystemConfig);
+		this.sharedBrowser = options.sharedBrowser;
+		this.tmpDir = options.temporaryDirectory ?? node_path.default.join(node_os.default.tmpdir(), "style-system");
+		this.preserveOutput = options.temporaryDirectory !== void 0;
+		if (options.temporaryDirectory !== void 0 && !node_path.default.isAbsolute(options.temporaryDirectory)) throw new Error("Renderer temporary directory must be absolute.");
+		this.log = log;
+		this.themeService = new ThemeService(designSystemConfig, options.workspaceRoot);
 		if (options.bundlerFactory) this.bundlerFactory = options.bundlerFactory;
 		else if (designSystemConfig.bundler) this.bundlerFactory = () => getBundlerService(designSystemConfig.bundler);
 		else this.bundlerFactory = createDefaultBundlerService;
@@ -3439,17 +3575,25 @@ var ComponentRendererService = class ComponentRendererService {
 	async renderComponent(componentInfo, options = {}) {
 		const { storyName = componentInfo.stories[0] || "Default", args = {}, darkMode = false, width = DEFAULT_RENDER_WIDTH, height = DEFAULT_RENDER_HEIGHT } = options;
 		try {
-			log.info(`[ComponentRendererService] Rendering ${componentInfo.title} - ${storyName}`);
-			await node_fs.promises.mkdir(this.tmpDir, { recursive: true });
+			await node_fs.promises.mkdir(this.tmpDir, {
+				recursive: true,
+				mode: 448
+			});
+			if (this.preserveOutput) {
+				const info = await node_fs.promises.lstat(this.tmpDir);
+				if (!info.isDirectory() || info.isSymbolicLink() || await node_fs.promises.realpath(this.tmpDir) !== this.tmpDir) throw new Error("Unsafe renderer temporary directory.");
+				if (this.log === log) this.log = createLog(this.tmpDir);
+			}
+			this.log.info(`[ComponentRendererService] Rendering ${componentInfo.title} - ${storyName}`);
 			const designSystemConfig = this.themeService.getConfig();
-			log.info(`[ComponentRendererService] Using theme provider: ${designSystemConfig.themeProvider}`);
-			log.info(`[ComponentRendererService] Design system type: ${designSystemConfig.type}`);
-			if (!await this.themeService.validateThemeProvider()) log.warn(`[ComponentRendererService] Theme provider path may not exist: ${designSystemConfig.themeProvider}`);
+			this.log.info(`[ComponentRendererService] Using theme provider: ${designSystemConfig.themeProvider}`);
+			this.log.info(`[ComponentRendererService] Design system type: ${designSystemConfig.type}`);
+			if (!await this.themeService.validateThemeProvider()) this.log.warn(`[ComponentRendererService] Theme provider path may not exist: ${designSystemConfig.themeProvider}`);
 			const bundlerService = this.getBundlerService();
 			let componentUrl;
 			let htmlFilePath;
 			if (bundlerService.isServerRunning()) {
-				log.info("[ComponentRendererService] Using dev server for fast rendering");
+				this.log.info("[ComponentRendererService] Using dev server for fast rendering");
 				try {
 					const result = await bundlerService.serveComponent({
 						componentPath: componentInfo.filePath,
@@ -3464,9 +3608,9 @@ var ComponentRendererService = class ComponentRendererService {
 					});
 					componentUrl = result.url;
 					htmlFilePath = result.htmlFilePath;
-					log.info(`[ComponentRendererService] Component served at: ${componentUrl}`);
+					this.log.info(`[ComponentRendererService] Component served at: ${componentUrl}`);
 				} catch (devServerError) {
-					log.warn(`[ComponentRendererService] Dev server failed, falling back to static build: ${devServerError instanceof Error ? devServerError.message : String(devServerError)}`);
+					this.log.warn(`[ComponentRendererService] Dev server failed, falling back to static build: ${devServerError instanceof Error ? devServerError.message : String(devServerError)}`);
 					const result = await bundlerService.prerenderComponent({
 						componentPath: componentInfo.filePath,
 						storyName,
@@ -3480,10 +3624,10 @@ var ComponentRendererService = class ComponentRendererService {
 					});
 					componentUrl = `${FILE_URL_PREFIX}${result.htmlFilePath}`;
 					htmlFilePath = result.htmlFilePath;
-					log.info(`[ComponentRendererService] HTML built to: ${htmlFilePath}`);
+					this.log.info(`[ComponentRendererService] HTML built to: ${htmlFilePath}`);
 				}
 			} else {
-				log.info("[ComponentRendererService] No dev server running, using static build");
+				this.log.info("[ComponentRendererService] No dev server running, using static build");
 				const result = await bundlerService.prerenderComponent({
 					componentPath: componentInfo.filePath,
 					storyName,
@@ -3497,7 +3641,7 @@ var ComponentRendererService = class ComponentRendererService {
 				});
 				componentUrl = `${FILE_URL_PREFIX}${result.htmlFilePath}`;
 				htmlFilePath = result.htmlFilePath;
-				log.info(`[ComponentRendererService] HTML built to: ${htmlFilePath}`);
+				this.log.info(`[ComponentRendererService] HTML built to: ${htmlFilePath}`);
 			}
 			const timestamp = Date.now();
 			const imageName = `${COMPONENT_FILE_PREFIX}${componentInfo.title.split("/").pop()}-${timestamp}-${(0, node_crypto.randomUUID)()}.png`;
@@ -3507,20 +3651,21 @@ var ComponentRendererService = class ComponentRendererService {
 				output: imagePath,
 				width,
 				height,
-				fullPage: true,
+				fullPage: false,
 				browser: "chromium",
 				waitTime: SCREENSHOT_WAIT_TIME_MS,
 				darkMode,
 				mobile: false,
 				generateThumbnail: false,
-				base64: false
+				base64: false,
+				sharedBrowser: this.sharedBrowser
 			});
-			log.info(`[ComponentRendererService] Screenshot saved to: ${imagePath}`);
+			this.log.info(`[ComponentRendererService] Screenshot saved to: ${imagePath}`);
 			let html = "";
 			if (htmlFilePath) {
 				html = await node_fs.promises.readFile(htmlFilePath, "utf-8");
-				log.info(`[ComponentRendererService] HTML file kept at: ${htmlFilePath}`);
-			} else log.warn("[ComponentRendererService] No HTML file path available, returning empty HTML content");
+				this.log.info(`[ComponentRendererService] HTML file kept at: ${htmlFilePath}`);
+			} else this.log.warn("[ComponentRendererService] No HTML file path available, returning empty HTML content");
 			return {
 				imagePath,
 				html,
@@ -3563,20 +3708,20 @@ var ComponentRendererService = class ComponentRendererService {
 				};
 			}));
 			for (const result of statResults) if (result.status === "fulfilled") componentFiles.push(result.value);
-			else log.warn("[ComponentRendererService] Failed to inspect component file during cleanup:", result.reason);
+			else this.log.warn("[ComponentRendererService] Failed to inspect component file during cleanup:", result.reason);
 			const oldFiles = componentFiles.filter((f) => now - f.mtime > olderThanMs);
-			await Promise.all(oldFiles.map((file) => node_fs.promises.unlink(file.path).catch((err) => log.warn("[ComponentRendererService] Failed to delete file:", file.path, err))));
+			await Promise.all(oldFiles.map((file) => node_fs.promises.unlink(file.path).catch((err) => this.log.warn("[ComponentRendererService] Failed to delete file:", file.path, err))));
 			let deletedCount = oldFiles.length;
 			const remainingFiles = componentFiles.filter((f) => now - f.mtime <= olderThanMs);
 			if (remainingFiles.length > keepCount) {
 				remainingFiles.sort((a, b) => a.mtime - b.mtime);
 				const toDelete = remainingFiles.slice(0, remainingFiles.length - keepCount);
-				await Promise.all(toDelete.map((file) => node_fs.promises.unlink(file.path).catch((err) => log.warn("[ComponentRendererService] Failed to delete file:", file.path, err))));
+				await Promise.all(toDelete.map((file) => node_fs.promises.unlink(file.path).catch((err) => this.log.warn("[ComponentRendererService] Failed to delete file:", file.path, err))));
 				deletedCount += toDelete.length;
 			}
-			if (deletedCount > 0) log.info(`[ComponentRendererService] Cleaned up ${deletedCount} temp files`);
+			if (deletedCount > 0) this.log.info(`[ComponentRendererService] Cleaned up ${deletedCount} temp files`);
 		} catch (error) {
-			log.error("[ComponentRendererService] Cleanup error:", error);
+			this.log.error("[ComponentRendererService] Cleanup error:", error);
 		}
 	}
 	/**
@@ -3586,11 +3731,11 @@ var ComponentRendererService = class ComponentRendererService {
 	*/
 	async dispose() {
 		try {
-			await this.cleanup(void 0, ComponentRendererService.DISPOSE_KEEP_COUNT);
+			if (!this.preserveOutput) await this.cleanup(void 0, ComponentRendererService.DISPOSE_KEEP_COUNT);
 			const bundlerService = this.getBundlerService();
 			if (!bundlerService.isServerRunning()) await bundlerService.cleanup();
 		} catch (error) {
-			log.error("[ComponentRendererService] Dispose error:", error);
+			this.log.error("[ComponentRendererService] Dispose error:", error);
 		}
 	}
 };
@@ -3606,13 +3751,6 @@ const DEFAULT_GET_UI_COMPONENT_CONFIG = {
 	defaultHeight: 800
 };
 //#endregion
-//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
-function __decorateParam(paramIndex, decorator) {
-	return function(target, key) {
-		decorator(target, key, paramIndex);
-	};
-}
-//#endregion
 //#region src/services/GetUiComponentService/GetUiComponentService.ts
 /**
 * GetUiComponentService
@@ -3637,6 +3775,7 @@ const NATIVE_DEFAULT_VIEWPORT = {
 	height: 852
 };
 let GetUiComponentService = class GetUiComponentService {
+	configLoader;
 	config;
 	storiesIndexFactory;
 	rendererFactory;
@@ -3646,7 +3785,8 @@ let GetUiComponentService = class GetUiComponentService {
 	* @param storiesIndexFactory - Factory for creating StoriesIndexService (for DI/testing)
 	* @param rendererFactory - Factory for creating ComponentRendererService (for DI/testing)
 	*/
-	constructor(config = {}, storiesIndexFactory = () => new StoriesIndexService(), rendererFactory = (c, p) => new ComponentRendererService(c, p)) {
+	constructor(config = {}, storiesIndexFactory = () => new StoriesIndexService(), rendererFactory = (c, p) => new ComponentRendererService(c, p), configLoader) {
+		this.configLoader = configLoader;
 		this.config = {
 			...DEFAULT_GET_UI_COMPONENT_CONFIG,
 			...config
@@ -3678,7 +3818,7 @@ let GetUiComponentService = class GetUiComponentService {
 		const storiesIndex = this.storiesIndexFactory();
 		let designSystemConfig;
 		try {
-			[, designSystemConfig] = await Promise.all([storiesIndex.initialize(), getAppDesignSystemConfig(appPath)]);
+			[, designSystemConfig] = await Promise.all([storiesIndex.initialize(), this.configLoader ? this.configLoader.resolveProject(appPath).then((resolved) => resolved.config) : getAppDesignSystemConfig(appPath)]);
 		} catch (error) {
 			throw new Error(`Failed to initialize stories index or design system config: ${error instanceof Error ? error.message : String(error)}`);
 		}
@@ -3778,10 +3918,13 @@ GetUiComponentService = __decorate([
 	__decorateParam(1, (0, inversify.optional)()),
 	__decorateParam(2, (0, inversify.inject)(STYLE_SYSTEM_TYPES.RendererFactory)),
 	__decorateParam(2, (0, inversify.optional)()),
+	__decorateParam(3, (0, inversify.inject)(STYLE_SYSTEM_TYPES.StyleSystemConfigLoader)),
+	__decorateParam(3, (0, inversify.optional)()),
 	__decorateMetadata("design:paramtypes", [
 		Object,
 		Object,
-		Object
+		Object,
+		typeof StyleSystemConfigLoader === "undefined" ? Object : StyleSystemConfigLoader
 	])
 ], GetUiComponentService);
 //#endregion
@@ -3810,12 +3953,14 @@ const DEFAULT_APP_COMPONENTS_CONFIG = { pageSize: 50 };
 * - Direct tool implementation (services should be tool-agnostic)
 */
 let AppComponentsService = class AppComponentsService {
+	workspaceRoot;
 	config;
 	/**
 	* Creates a new AppComponentsService instance.
 	* @param config - Service configuration options
 	*/
-	constructor(config = {}) {
+	constructor(config = {}, workspaceRoot) {
+		this.workspaceRoot = workspaceRoot;
 		this.config = {
 			...DEFAULT_APP_COMPONENTS_CONFIG,
 			...config
@@ -3832,14 +3977,14 @@ let AppComponentsService = class AppComponentsService {
 		if (input.cursor !== void 0 && typeof input.cursor !== "string") throw new Error("cursor must be a string");
 		const { appPath, cursor } = input;
 		const { offset } = cursor ? this.decodeCursor(cursor) : { offset: 0 };
-		const monorepoRoot = TemplatesManagerService.getWorkspaceRootSync();
+		const monorepoRoot = this.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync();
 		const resolvedAppPath = node_path.default.isAbsolute(appPath) ? appPath : node_path.default.join(monorepoRoot, appPath);
 		try {
 			await node_fs.promises.access(resolvedAppPath);
 		} catch {
 			throw new Error(`App path does not exist: ${resolvedAppPath}`);
 		}
-		const storiesIndex = new StoriesIndexService();
+		const storiesIndex = new StoriesIndexService({ workspaceRoot: monorepoRoot });
 		const [appName, workspaceDependencies, packageMap] = await Promise.all([
 			this.getAppName(resolvedAppPath),
 			this.getWorkspaceDependencies(resolvedAppPath),
@@ -4042,18 +4187,42 @@ AppComponentsService = __decorate([
 	(0, inversify.injectable)(),
 	__decorateParam(0, (0, inversify.inject)(STYLE_SYSTEM_TYPES.AppComponentsServiceConfig)),
 	__decorateParam(0, (0, inversify.optional)()),
-	__decorateMetadata("design:paramtypes", [Object])
+	__decorateParam(1, (0, inversify.inject)(STYLE_SYSTEM_TYPES.WorkspaceRoot)),
+	__decorateParam(1, (0, inversify.optional)()),
+	__decorateMetadata("design:paramtypes", [Object, String])
 ], AppComponentsService);
 //#endregion
 //#region src/tools/ListThemesTool.ts
+/**
+* ListThemesTool
+*
+* DESIGN PATTERNS:
+* - Tool pattern with getDefinition() and execute() methods
+* - Factory pattern for service creation
+* - JSON Schema validation for inputs
+*
+* CODING STANDARDS:
+* - Implement Tool interface from ../types
+* - Use TOOL_NAME constant with snake_case (e.g., 'list_themes')
+* - Return CallToolResult with content array
+* - Handle errors with isError flag
+* - Delegate complex logic to services
+*
+* AVOID:
+* - Complex business logic in execute method
+* - Unhandled promise rejections
+* - Missing input validation
+*/
 var _ListThemesTool;
 let ListThemesTool = class ListThemesTool {
 	static {
 		_ListThemesTool = this;
 	}
+	configLoader;
 	static TOOL_NAME = "list_themes";
 	serviceFactory;
-	constructor(serviceFactory) {
+	constructor(serviceFactory, configLoader) {
+		this.configLoader = configLoader;
 		this.serviceFactory = serviceFactory;
 	}
 	getDefinition() {
@@ -4075,12 +4244,13 @@ let ListThemesTool = class ListThemesTool {
 			let themePath;
 			let cssFiles;
 			if (input.appPath) {
-				const appConfig = await getAppDesignSystemConfig(input.appPath);
+				const appConfig = this.configLoader ? (await this.configLoader.resolveProject(input.appPath)).config : await getAppDesignSystemConfig(input.appPath);
 				themePath = appConfig.themePath ? await resolveStyleSystemThemePath({
 					appPath: input.appPath,
-					themePath: appConfig.themePath
+					themePath: appConfig.themePath,
+					workspaceRoot: this.configLoader?.workspaceRoot
 				}) : void 0;
-				cssFiles = themePath ? void 0 : appConfig.cssFiles;
+				cssFiles = themePath ? void 0 : appConfig.cssFiles?.map((file) => node_path.default.resolve(this.configLoader?.workspaceRoot ?? TemplatesManagerService.getWorkspaceRootSync(), input.appPath, file));
 			}
 			const result = await (await this.serviceFactory.createService({
 				themePath,
@@ -4104,7 +4274,9 @@ let ListThemesTool = class ListThemesTool {
 ListThemesTool = _ListThemesTool = __decorate([
 	(0, inversify.injectable)(),
 	__decorateParam(0, (0, inversify.inject)(STYLE_SYSTEM_TYPES.ThemeServiceFactory)),
-	__decorateMetadata("design:paramtypes", [typeof ThemeServiceFactory === "undefined" ? Object : ThemeServiceFactory])
+	__decorateParam(1, (0, inversify.inject)(STYLE_SYSTEM_TYPES.StyleSystemConfigLoader)),
+	__decorateParam(1, (0, inversify.optional)()),
+	__decorateMetadata("design:paramtypes", [typeof ThemeServiceFactory === "undefined" ? Object : ThemeServiceFactory, typeof StyleSystemConfigLoader === "undefined" ? Object : StyleSystemConfigLoader])
 ], ListThemesTool);
 //#endregion
 //#region src/tools/GetCSSClassesTool.ts
@@ -4131,6 +4303,7 @@ let GetCSSClassesTool = class GetCSSClassesTool {
 	static {
 		_GetCSSClassesTool = this;
 	}
+	configLoader;
 	static TOOL_NAME = "get_css_classes";
 	static CSS_REUSE_INSTRUCTION = "IMPORTANT: Always reuse these existing CSS classes from the theme as much as possible instead of creating custom styles. This ensures design consistency and reduces CSS bloat.";
 	serviceFactory;
@@ -4140,7 +4313,8 @@ let GetCSSClassesTool = class GetCSSClassesTool {
 	* @param serviceFactory - Injected CSSClassesServiceFactory
 	* @param defaultThemePath - Default path to theme CSS file (relative to workspace root)
 	*/
-	constructor(serviceFactory, defaultThemePath) {
+	constructor(serviceFactory, defaultThemePath, configLoader) {
+		this.configLoader = configLoader;
 		this.serviceFactory = serviceFactory;
 		this.defaultThemePath = defaultThemePath;
 	}
@@ -4185,7 +4359,7 @@ let GetCSSClassesTool = class GetCSSClassesTool {
 			const category = input.category || "all";
 			if (!isValidCategory(category)) throw new Error(`Invalid category: '${category}'. Must be one of: ${VALID_CATEGORIES.join(", ")}`);
 			const themePath = await this.resolveThemePath(input.appPath);
-			const workspaceConfig = await getGetCssClassesConfig();
+			const workspaceConfig = this.configLoader ? (await this.configLoader.loadRoot()).getCssClasses : await getGetCssClassesConfig();
 			const result = await (await this.serviceFactory.createService({ customServicePath: workspaceConfig?.customService })).extractClasses(category, themePath);
 			return { content: [{
 				type: "text",
@@ -4214,13 +4388,17 @@ let GetCSSClassesTool = class GetCSSClassesTool {
 	*/
 	async resolveThemePath(appPath) {
 		if (appPath) {
-			const config = await getAppDesignSystemConfig(appPath);
+			const config = this.configLoader ? (await this.configLoader.resolveProject(appPath)).config : await getAppDesignSystemConfig(appPath);
 			if (config.themePath) return await resolveStyleSystemThemePath({
 				appPath,
-				themePath: config.themePath
+				themePath: config.themePath,
+				workspaceRoot: this.configLoader?.workspaceRoot
 			});
 		}
-		if (this.defaultThemePath) return await resolveStyleSystemThemePath({ themePath: this.defaultThemePath });
+		if (this.defaultThemePath) return await resolveStyleSystemThemePath({
+			themePath: this.defaultThemePath,
+			workspaceRoot: this.configLoader?.workspaceRoot
+		});
 		throw new Error("No theme CSS path configured. Pass --theme-path, or set themePath in the target app style-system.config.yaml.");
 	}
 };
@@ -4229,156 +4407,15 @@ GetCSSClassesTool = _GetCSSClassesTool = __decorate([
 	__decorateParam(0, (0, inversify.inject)(STYLE_SYSTEM_TYPES.CSSClassesServiceFactory)),
 	__decorateParam(1, (0, inversify.inject)(STYLE_SYSTEM_TYPES.DefaultThemePath)),
 	__decorateParam(1, (0, inversify.optional)()),
-	__decorateMetadata("design:paramtypes", [typeof CSSClassesServiceFactory === "undefined" ? Object : CSSClassesServiceFactory, String])
+	__decorateParam(2, (0, inversify.inject)(STYLE_SYSTEM_TYPES.StyleSystemConfigLoader)),
+	__decorateParam(2, (0, inversify.optional)()),
+	__decorateMetadata("design:paramtypes", [
+		typeof CSSClassesServiceFactory === "undefined" ? Object : CSSClassesServiceFactory,
+		String,
+		typeof StyleSystemConfigLoader === "undefined" ? Object : StyleSystemConfigLoader
+	])
 ], GetCSSClassesTool);
 //#endregion
-//#region src/services/AntigravityCliService.ts
-const DEFAULT_MODEL = "gemini-3.6-flash-high";
-const DEFAULT_TIMEOUT = 18e5;
-const MAX_BUFFER = 104857600;
-const FAILURE_SNIPPET_LENGTH = 400;
-const ANTIGRAVITY_CLI_COMMAND = "agy";
-const ANTIGRAVITY_PROVIDER_NAME = "antigravity";
-const ANTIGRAVITY_UNAVAILABLE_MESSAGE = "Antigravity CLI not found. Run `agy install` to configure it.";
-function sanitizePrompt(raw) {
-	return raw.replace(/\u0000/g, "").replace(/[\uD800-\uDBFF](?![\uDC00-\uDFFF])/g, "").replace(/(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/g, "").replace(/[\u0001-\u0008\u000B\u000C\u000E-\u001F\u007F\u0080-\u009F\uFEFF]/g, "");
-}
-function tailSnippet(value) {
-	const trimmed = value.trim();
-	if (!trimmed) return "";
-	return trimmed.length <= FAILURE_SNIPPET_LENGTH ? trimmed : `...${trimmed.slice(-400)}`;
-}
-var AntigravityCliService = class {
-	isAvailable() {
-		try {
-			(0, node_child_process.execSync)(`${ANTIGRAVITY_CLI_COMMAND} --version`, {
-				stdio: "ignore",
-				timeout: 5e3,
-				env: process.env
-			});
-			return true;
-		} catch {
-			return false;
-		}
-	}
-	async edit(params) {
-		if (!this.isAvailable()) throw new Error(ANTIGRAVITY_UNAVAILABLE_MESSAGE);
-		const workspaceRoot = TemplatesManagerService.getWorkspaceRootSync();
-		const model = params.model ?? DEFAULT_MODEL;
-		const timeout = params.timeout ?? DEFAULT_TIMEOUT;
-		let fullPrompt = sanitizePrompt(params.prompt);
-		if (params.systemPrompt) fullPrompt = `${sanitizePrompt(params.systemPrompt)}\n\n${fullPrompt}`;
-		if (params.screenshotPaths?.length) fullPrompt = `${params.screenshotPaths.map((path) => `@${(0, node_path.basename)(path)}`).join(" ")}\n\n${fullPrompt}`;
-		const args = [
-			"--new-project",
-			"--dangerously-skip-permissions",
-			"--print",
-			"--print-timeout",
-			`${Math.ceil(timeout / 1e3)}s`,
-			"--model",
-			model,
-			fullPrompt
-		];
-		return {
-			content: (await this.execAntigravity(args, workspaceRoot, model, timeout)).trim(),
-			model
-		};
-	}
-	execAntigravity(args, cwd, model, timeout) {
-		return new Promise((resolve, reject) => {
-			const chunks = [];
-			let totalBytes = 0;
-			let settled = false;
-			let stderrContent = "";
-			const registeredArgs = [...args];
-			registeredArgs[registeredArgs.length - 1] = "<prompt>";
-			const child = (0, node_child_process.spawn)(ANTIGRAVITY_CLI_COMMAND, args, {
-				stdio: [
-					"ignore",
-					"pipe",
-					"pipe"
-				],
-				env: {
-					...process.env,
-					OTEL_SERVICE_NAME: ANTIGRAVITY_PROVIDER_NAME
-				},
-				cwd
-			});
-			let releaseChild;
-			let registrationPromise;
-			if (child.pid) registrationPromise = (0, _agimon_ai_foundation_exec.registerManagedProcess)({
-				repositoryPath: cwd,
-				serviceName: `style-system-antigravity-${child.pid}`,
-				serviceType: "tool",
-				environment: process.env["NODE_ENV"] ?? "development",
-				pid: child.pid,
-				command: ANTIGRAVITY_CLI_COMMAND,
-				args: registeredArgs,
-				metadata: {
-					model,
-					parentPid: process.pid
-				},
-				killOnRelease: true,
-				releasePortOnRelease: false
-			}).then((release) => {
-				releaseChild = release;
-			}).catch((error) => {
-				log.debug(`[AntigravityCliService] Process registration failed: ${error instanceof Error ? error.message : String(error)}`);
-			});
-			const finalize = async (callback) => {
-				try {
-					await registrationPromise;
-					await releaseChild?.();
-				} catch (error) {
-					log.debug(`[AntigravityCliService] Process cleanup failed: ${error instanceof Error ? error.message : String(error)}`);
-				} finally {
-					callback();
-				}
-			};
-			const timer = setTimeout(() => {
-				if (settled) return;
-				settled = true;
-				child.kill("SIGTERM");
-				finalize(() => reject(/* @__PURE__ */ new Error(`Antigravity CLI timed out after ${timeout}ms.`)));
-			}, timeout);
-			child.stdout.on("data", (chunk) => {
-				totalBytes += chunk.length;
-				if (totalBytes > MAX_BUFFER) {
-					if (!settled) {
-						settled = true;
-						child.kill("SIGTERM");
-						finalize(() => reject(/* @__PURE__ */ new Error("Antigravity CLI output exceeded maximum buffer size.")));
-					}
-					return;
-				}
-				chunks.push(chunk);
-			});
-			child.stderr.on("data", (chunk) => {
-				stderrContent += chunk.toString();
-			});
-			child.on("error", (error) => {
-				clearTimeout(timer);
-				if (settled) return;
-				settled = true;
-				const message = error.code === "ENOENT" ? ANTIGRAVITY_UNAVAILABLE_MESSAGE : `Failed to invoke Antigravity CLI: ${error.message}`;
-				finalize(() => reject(new Error(message)));
-			});
-			child.on("close", (code) => {
-				clearTimeout(timer);
-				if (settled) return;
-				settled = true;
-				const stdoutContent = Buffer.concat(chunks).toString("utf-8");
-				if (code !== 0) {
-					const detail = tailSnippet(stderrContent) || tailSnippet(stdoutContent) || `exit code ${code}`;
-					finalize(() => reject(new Error(detail)));
-					return;
-				}
-				finalize(() => resolve(stdoutContent));
-			});
-		});
-	}
-};
-//#endregion
 //#region src/tools/GetComponentVisualTool.ts
 var _GetComponentVisualTool;
 /**
@@ -4507,11 +4544,13 @@ let ListSharedComponentsTool = class ListSharedComponentsTool {
 	static {
 		_ListSharedComponentsTool = this;
 	}
+	configLoader;
 	static TOOL_NAME = "list_shared_components";
 	static PAGE_SIZE = 50;
 	static COMPONENT_REUSE_INSTRUCTION = "IMPORTANT: Before creating new components, check if a similar component already exists in the list above. Always reuse existing shared components to maintain consistency and reduce code duplication.";
 	storiesIndexFactory;
-	constructor(storiesIndexFactory) {
+	constructor(storiesIndexFactory, configLoader) {
+		this.configLoader = configLoader;
 		this.storiesIndexFactory = storiesIndexFactory;
 	}
 	/**
@@ -4570,7 +4609,7 @@ let ListSharedComponentsTool = class ListSharedComponentsTool {
 			const { cursor, tags: inputTags } = input;
 			const { offset } = cursor ? this.decodeCursor(cursor) : { offset: 0 };
 			const storiesIndex = this.storiesIndexFactory();
-			const [, defaultTags] = await Promise.all([storiesIndex.initialize(), getSharedComponentTags()]);
+			const [, defaultTags] = await Promise.all([storiesIndex.initialize(), this.configLoader ? this.configLoader.loadRoot().then((root) => root.sharedComponentTags ?? DEFAULT_SHARED_COMPONENT_TAGS) : getSharedComponentTags()]);
 			const availableTags = storiesIndex.getAllTags();
 			const filterTags = inputTags !== void 0 ? inputTags : defaultTags;
 			const allComponentNames = storiesIndex.getComponentsByTags(filterTags.length > 0 ? filterTags : void 0).map((component) => component.title.split("/").pop() || component.title).filter((name, index, self) => self.indexOf(name) === index).sort();
@@ -4608,7 +4647,9 @@ let ListSharedComponentsTool = class ListSharedComponentsTool {
 ListSharedComponentsTool = _ListSharedComponentsTool = __decorate([
 	(0, inversify.injectable)(),
 	__decorateParam(0, (0, inversify.inject)(STYLE_SYSTEM_TYPES.StoriesIndexFactory)),
-	__decorateMetadata("design:paramtypes", [Object])
+	__decorateParam(1, (0, inversify.inject)(STYLE_SYSTEM_TYPES.StyleSystemConfigLoader)),
+	__decorateParam(1, (0, inversify.optional)()),
+	__decorateMetadata("design:paramtypes", [Object, typeof StyleSystemConfigLoader === "undefined" ? Object : StyleSystemConfigLoader])
 ], ListSharedComponentsTool);
 //#endregion
 //#region src/tools/ListAppComponentsTool.ts
@@ -4681,309 +4722,31 @@ ListAppComponentsTool = _ListAppComponentsTool = __decorate([
 	__decorateMetadata("design:paramtypes", [typeof AppComponentsService === "undefined" ? Object : AppComponentsService])
 ], ListAppComponentsTool);
 //#endregion
-//#region src/tools/PolishComponentTool.ts
-/**
-* PolishComponentTool
-*
-* DESIGN PATTERNS:
-* - Tool pattern with getDefinition() and execute() methods
-* - Service delegation for business logic
-* - JSON Schema validation for inputs
-*
-* CODING STANDARDS:
-* - Implement Tool interface from ../types
-* - Use TOOL_NAME constant with snake_case
-* - Return CallToolResult with content array
-* - Handle errors with isError flag
-* - Delegate complex logic to services
-*
-* AVOID:
-* - Complex business logic in execute method
-* - Unhandled promise rejections
-* - Missing input validation
-*/
-var _PolishComponentTool;
-let PolishComponentTool = class PolishComponentTool {
-	static {
-		_PolishComponentTool = this;
-	}
-	static TOOL_NAME = "polish_component";
-	antigravityService;
-	getUiComponentService;
-	cssClassesServiceFactory;
-	storiesIndexFactory;
-	constructor(getUiComponentService, cssClassesServiceFactory, storiesIndexFactory) {
-		this.antigravityService = new AntigravityCliService();
-		this.getUiComponentService = getUiComponentService;
-		this.cssClassesServiceFactory = cssClassesServiceFactory;
-		this.storiesIndexFactory = storiesIndexFactory;
-	}
-	getDefinition() {
-		return {
-			name: _PolishComponentTool.TOOL_NAME,
-			description: "Polish a UI component by running Antigravity to directly edit the component file. Takes a .tsx file path, finds the collocated stories file for visual context, gathers design principles, design tokens, and shared components, then runs Antigravity to edit in place.",
-			inputSchema: {
-				type: "object",
-				properties: {
-					filePath: {
-						type: "string",
-						minLength: 1,
-						description: "Path to the component .tsx file to polish (e.g., \"packages/frontend/web-atoms/src/components/Button/index.tsx\")"
-					},
-					instructions: {
-						type: "string",
-						description: "Specific polishing instructions (e.g., \"improve spacing\", \"add hover states\", \"fix dark mode\")"
-					}
-				},
-				required: ["filePath"],
-				additionalProperties: false
-			}
-		};
-	}
-	async execute(input) {
-		try {
-			if (!this.antigravityService.isAvailable()) return {
-				content: [{
-					type: "text",
-					text: "Error: Antigravity CLI is not installed. Run `agy install` to configure it."
-				}],
-				isError: true
-			};
-			const workspaceRoot = TemplatesManagerService.getWorkspaceRootSync();
-			const { instructions } = input;
-			const filePath = node_path.default.isAbsolute(input.filePath) ? input.filePath : node_path.default.join(workspaceRoot, input.filePath);
-			const componentDir = node_path.default.dirname(filePath);
-			const storyFile = await this.findStoriesFile(componentDir);
-			if (!storyFile) return {
-				content: [{
-					type: "text",
-					text: `Error: No .stories.tsx file found in ${componentDir}`
-				}],
-				isError: true
-			};
-			const componentName = node_path.default.basename(componentDir);
-			const appPath = await this.findAppPath(filePath, workspaceRoot);
-			const dsConfig = appPath ? await getAppDesignSystemConfig(appPath).catch((error) => {
-				log.debug(`[PolishComponentTool] Could not load design system config for ${appPath}: ${error instanceof Error ? error.message : String(error)}`);
-				return null;
-			}) : null;
-			const platform = this.detectPlatform(dsConfig);
-			log.info(`[PolishComponentTool] Polishing ${filePath}, stories: ${storyFile}, appPath: ${appPath}, platform: ${platform}`);
-			const [componentVisual, designPrinciples, sharedComponents, componentSource, designTokens] = await Promise.allSettled([
-				appPath ? this.getComponentVisual(componentName, appPath) : Promise.reject(/* @__PURE__ */ new Error("No appPath")),
-				appPath ? this.getDesignPrinciples(appPath) : Promise.reject(/* @__PURE__ */ new Error("No appPath")),
-				this.getSharedComponents(),
-				node_fs.promises.readFile(filePath, "utf-8"),
-				this.getDesignTokens(platform, dsConfig, appPath)
-			]);
-			const contextSections = [];
-			if (componentSource.status === "fulfilled") contextSections.push(`## Component Source\n\nFile: ${filePath}\n\n\`\`\`tsx\n${componentSource.value}\n\`\`\``);
-			const storyContent = await node_fs.promises.readFile(storyFile, "utf-8").catch((error) => {
-				log.debug(`[PolishComponentTool] Could not read stories file ${storyFile}: ${error instanceof Error ? error.message : String(error)}`);
-				return null;
-			});
-			if (storyContent) contextSections.push(`## Stories File\n\nFile: ${storyFile}\n\n\`\`\`tsx\n${storyContent}\n\`\`\``);
-			if (designPrinciples.status === "fulfilled" && designPrinciples.value.length > 0) {
-				const principlesText = designPrinciples.value.map((p) => `### ${p.variant}\n${js_yaml.dump(p.content, {
-					indent: 2,
-					lineWidth: 120
-				})}`).join("\n");
-				contextSections.push(`## Design Principles\n\n${principlesText}`);
-			}
-			if (designTokens.status === "fulfilled") contextSections.push(designTokens.value);
-			if (sharedComponents.status === "fulfilled") contextSections.push(`## Available Shared Components\n\nReuse these existing components where possible:\n${sharedComponents.value}`);
-			const systemPrompt = this.buildSystemPrompt(platform);
-			const userPrompt = [
-				`# Polish Component`,
-				"",
-				instructions ? `## Instructions\n\n${instructions}\n` : "",
-				...contextSections,
-				"",
-				`Edit the component file at: ${filePath}`,
-				"Polish this component following the design system. Edit the files directly."
-			].filter(Boolean).join("\n");
-			const screenshotPaths = componentVisual.status === "fulfilled" ? [componentVisual.value.imagePath] : [];
-			log.info(`[PolishComponentTool] Running Antigravity to edit component...`);
-			const response = await this.antigravityService.edit({
-				prompt: userPrompt,
-				systemPrompt,
-				screenshotPaths
-			});
-			log.info(`[PolishComponentTool] Antigravity finished editing (model: ${response.model})`);
-			const reviewPrompt = [
-				"\n## Review the changes",
-				"",
-				"Antigravity has edited the component files directly. Review the result with `pnpm exec style-system get-ui-component`:",
-				`   - componentName: "${componentName}"`,
-				appPath ? `   - appPath: "${appPath}"` : "",
-				"",
-				`Component file: ${filePath}`,
-				`Stories file: ${storyFile}`
-			].filter(Boolean).join("\n");
-			return { content: [{
-				type: "text",
-				text: response.content
-			}, {
-				type: "text",
-				text: reviewPrompt
-			}] };
-		} catch (error) {
-			return {
-				content: [{
-					type: "text",
-					text: `Error: ${error instanceof Error ? error.message : "Unknown error"}`
-				}],
-				isError: true
-			};
-		}
-	}
-	detectPlatform(config) {
-		if (config?.bundler?.includes("native")) return "native";
-		return "web";
-	}
-	buildSystemPrompt(platform) {
-		const base = [
-			"You are a senior frontend designer and developer.",
-			"You polish UI components to improve their visual quality, consistency, and adherence to the design system.",
-			"You receive the component source code, a screenshot of its current rendering, the design principles, available design tokens, and shared components.",
-			"Your job is to directly edit the component files to improve them.",
-			"",
-			"CRITICAL RULES:"
-		];
-		if (platform === "native") base.push("- This is a React Native component using react-native-unistyles v3 for styling.", "- ONLY use theme tokens from the UnistylesTheme interface listed in the \"Unistyles Theme Tokens\" section.", "- Access tokens via StyleSheet.create((theme) => ({...})) — e.g., theme.colors.primary, theme.spacing.md, theme.borderRadius.lg, theme.fontSize.base.", "- NEVER use hardcoded color hex values, pixel numbers, or inline styles when a theme token exists.", "- If a semantic value is not available in the theme tokens, use the closest match or leave it unchanged.");
-		else base.push("- ONLY use CSS classes listed in the \"Available CSS Classes\" section. NEVER use raw Tailwind color/spacing classes (e.g., green-500, red-600, p-4) that are not in the provided design tokens.", "- If a semantic color or spacing value is not available in the design tokens, use the closest match from the provided list or leave it unchanged. Do NOT invent new color values.");
-		base.push("- Reuse shared components instead of creating custom markup", "- Follow the design principles strictly", "- Edit the files directly — do not just suggest changes", "- Explain what you changed after editing");
-		if (platform === "native") base.push("", "VIOLATION EXAMPLES (DO NOT DO THIS):", "- { color: \"#22c55e\" } → hardcoded hex, use theme.colors.success instead", "- { padding: 16 } → hardcoded pixel, use theme.spacing.md instead", "- { borderRadius: 8 } → hardcoded pixel, use theme.borderRadius.lg instead");
-		else base.push("", "VIOLATION EXAMPLES (DO NOT DO THIS):", "- bg-green-500/10 text-green-700 → raw colors, not from design tokens", "- border-red-600/30 → raw color, not from design tokens", "- Instead use semantic classes like bg-destructive, text-destructive-foreground, bg-accent, etc.");
-		return base.join("\n");
-	}
-	/**
-	* Read design tokens from config.themePath.
-	* For web: extracts Tailwind CSS classes. For native: reads the TypeScript types file.
-	*/
-	async getDesignTokens(platform, config, appPath) {
-		if (!config?.themePath) return `No themePath configured in style-system.config.yaml.`;
-		const themePath = await resolveStyleSystemThemePath({
-			appPath,
-			themePath: config.themePath
-		});
-		if (platform === "native") return `## Unistyles Theme Tokens\n\nUse these tokens via \`StyleSheet.create((theme) => ({...}))\`:\n\n\`\`\`typescript\n${await node_fs.promises.readFile(themePath, "utf-8")}\n\`\`\``;
-		const toolkitConfig = await getGetCssClassesConfig();
-		const result = await (await this.cssClassesServiceFactory.createService({ customServicePath: toolkitConfig?.customService })).extractClasses("all", themePath);
-		return `## Available CSS Classes (Design Tokens)\n\n${JSON.stringify(result, null, 2)}`;
-	}
-	async findStoriesFile(dir) {
-		for (const pattern of [
-			"*.stories.tsx",
-			"*.stories.ts",
-			"*.stories.jsx",
-			"*.stories.js"
-		]) {
-			const matches = await (0, glob.glob)(pattern, {
-				cwd: dir,
-				absolute: true
-			});
-			if (matches.length > 0) return matches[0];
-		}
-		return null;
-	}
-	/**
-	* Find the app that owns a file, for style-system context.
-	* Only apps declaring their own style-system.config.yaml are eligible.
-	*/
-	async findAppPath(filePath, workspaceRoot) {
-		const parts = node_path.default.relative(workspaceRoot, filePath).split(node_path.default.sep);
-		if (parts[0] === "apps" && parts.length > 1) {
-			const appPath = node_path.default.join(parts[0], parts[1]);
-			if (await hasStyleSystemProjectConfig(appPath)) return appPath;
-			log.debug(`[PolishComponentTool] ${appPath} has no style-system config`);
-		}
-		const appsDir = node_path.default.join(workspaceRoot, "apps");
-		let candidates;
-		try {
-			candidates = (await node_fs.promises.readdir(appsDir, { withFileTypes: true })).filter((entry) => entry.isDirectory() && entry.name.endsWith("-app")).map((entry) => entry.name).sort();
-		} catch (error) {
-			log.debug(`[PolishComponentTool] Could not scan apps dir: ${error instanceof Error ? error.message : String(error)}`);
-			return null;
-		}
-		for (const name of candidates) {
-			const appPath = `apps/${name}`;
-			if (await hasStyleSystemProjectConfig(appPath)) return appPath;
-			log.debug(`[PolishComponentTool] ${appPath} has no style-system config`);
-		}
-		return null;
-	}
-	async getComponentVisual(componentName, appPath) {
-		return { imagePath: (await this.getUiComponentService.getComponent({
-			componentName,
-			appPath,
-			darkMode: true
-		})).imagePath };
-	}
-	async getDesignPrinciples(appPath) {
-		const workspaceRoot = TemplatesManagerService.getWorkspaceRootSync();
-		const product = node_path.default.basename(appPath).replace(/-app$|-native-app$|-mcp-app$|-e2e$/, "");
-		const principlesDir = node_path.default.join(workspaceRoot, "docs", "architecture", product, "design-principles");
-		const results = [];
-		try {
-			const files = await node_fs.promises.readdir(principlesDir);
-			for (const file of files) {
-				if (!file.endsWith(".yaml")) continue;
-				try {
-					const content = await node_fs.promises.readFile(node_path.default.join(principlesDir, file), "utf-8");
-					const parsed = js_yaml.load(content);
-					const variant = file.replace(".yaml", "");
-					results.push({
-						variant,
-						content: parsed
-					});
-				} catch (error) {
-					log.debug(`[PolishComponentTool] Skipping unreadable design principle ${file}: ${error instanceof Error ? error.message : String(error)}`);
-				}
-			}
-		} catch (error) {
-			log.debug(`[PolishComponentTool] No design principles at ${principlesDir}: ${error instanceof Error ? error.message : String(error)}`);
-		}
-		return results;
-	}
-	async getSharedComponents() {
-		const storiesIndex = this.storiesIndexFactory();
-		const [, defaultTags] = await Promise.all([storiesIndex.initialize(), getSharedComponentTags()]);
-		return storiesIndex.getComponentsByTags(defaultTags.length > 0 ? defaultTags : void 0).map((c) => c.title.split("/").pop() || c.title).filter((name, index, self) => self.indexOf(name) === index).sort().map((n) => `- ${n}`).join("\n");
-	}
-};
-PolishComponentTool = _PolishComponentTool = __decorate([
-	(0, inversify.injectable)(),
-	__decorateParam(0, (0, inversify.inject)(STYLE_SYSTEM_TYPES.GetUiComponentService)),
-	__decorateParam(1, (0, inversify.inject)(STYLE_SYSTEM_TYPES.CSSClassesServiceFactory)),
-	__decorateParam(2, (0, inversify.inject)(STYLE_SYSTEM_TYPES.StoriesIndexFactory)),
-	__decorateMetadata("design:paramtypes", [
-		typeof GetUiComponentService === "undefined" ? Object : GetUiComponentService,
-		typeof CSSClassesServiceFactory === "undefined" ? Object : CSSClassesServiceFactory,
-		Object
-	])
-], PolishComponentTool);
-//#endregion
 //#region src/container/module.ts
 function createStyleSystemModule(optionsInput = {}) {
 	return new inversify.ContainerModule((options) => {
+		options.bind(STYLE_SYSTEM_TYPES.WorkspaceRoot).toConstantValue(optionsInput.workspaceRoot);
 		options.bind(STYLE_SYSTEM_TYPES.StyleSystemConfigLoader).to(StyleSystemConfigLoader).inSingletonScope();
 		options.bind(STYLE_SYSTEM_TYPES.DefaultThemePath).toConstantValue(optionsInput.defaultThemePath);
 		options.bind(STYLE_SYSTEM_TYPES.GetUiComponentServiceConfig).toConstantValue(DEFAULT_GET_UI_COMPONENT_CONFIG);
 		options.bind(STYLE_SYSTEM_TYPES.AppComponentsServiceConfig).toConstantValue(DEFAULT_APP_COMPONENTS_CONFIG);
 		options.bind(STYLE_SYSTEM_TYPES.ThemeServiceFactory).to(ThemeServiceFactory).inSingletonScope();
 		options.bind(STYLE_SYSTEM_TYPES.CSSClassesServiceFactory).to(CSSClassesServiceFactory).inSingletonScope();
-		options.bind(STYLE_SYSTEM_TYPES.StoriesIndexService).to(StoriesIndexService).inTransientScope();
+		options.bind(STYLE_SYSTEM_TYPES.StoriesIndexService).toDynamicValue(() => new StoriesIndexService({ workspaceRoot: optionsInput.workspaceRoot }));
 		options.bind(STYLE_SYSTEM_TYPES.AppComponentsService).to(AppComponentsService).inTransientScope();
 		options.bind(STYLE_SYSTEM_TYPES.GetUiComponentService).to(GetUiComponentService).inSingletonScope();
-		options.bind(STYLE_SYSTEM_TYPES.StoriesIndexFactory).toConstantValue(() => new StoriesIndexService());
-		options.bind(STYLE_SYSTEM_TYPES.RendererFactory).toConstantValue((config, appPath) => new ComponentRendererService(config, appPath));
+		options.bind(STYLE_SYSTEM_TYPES.StoriesIndexFactory).toConstantValue(() => new StoriesIndexService({ workspaceRoot: optionsInput.workspaceRoot }));
+		options.bind(STYLE_SYSTEM_TYPES.RendererFactory).toConstantValue((config, appPath) => new ComponentRendererService(config, appPath, {
+			workspaceRoot: optionsInput.workspaceRoot,
+			temporaryDirectory: optionsInput.temporaryDirectory,
+			sharedBrowser: optionsInput.sharedBrowser,
+			...optionsInput.bundlerFactory ? { bundlerFactory: () => optionsInput.bundlerFactory(config) } : {}
+		}));
 		options.bind(STYLE_SYSTEM_TYPES.ListThemesTool).to(ListThemesTool).inSingletonScope();
 		options.bind(STYLE_SYSTEM_TYPES.GetCSSClassesTool).to(GetCSSClassesTool).inSingletonScope();
 		options.bind(STYLE_SYSTEM_TYPES.GetComponentVisualTool).to(GetComponentVisualTool).inSingletonScope();
 		options.bind(STYLE_SYSTEM_TYPES.ListSharedComponentsTool).to(ListSharedComponentsTool).inSingletonScope();
 		options.bind(STYLE_SYSTEM_TYPES.ListAppComponentsTool).to(ListAppComponentsTool).inSingletonScope();
-		options.bind(STYLE_SYSTEM_TYPES.PolishComponentTool).to(PolishComponentTool).inSingletonScope();
 	});
 }
 //#endregion
@@ -4995,7 +4758,7 @@ function createContainer(options) {
 }
 //#endregion
 //#region package.json
-var version = "0.2.14-alpha.2";
+var version = "0.2.14-alpha.21";
 //#endregion
 //#region src/metadata.ts
 const STYLE_SYSTEM_CLI_NAME = "style-system";
@@ -5029,7 +4792,6 @@ function createServer(containerOrThemePath) {
 	const getComponentVisualTool = container.get(STYLE_SYSTEM_TYPES.GetComponentVisualTool);
 	const listSharedComponentsTool = container.get(STYLE_SYSTEM_TYPES.ListSharedComponentsTool);
 	const listAppComponentsTool = container.get(STYLE_SYSTEM_TYPES.ListAppComponentsTool);
-	const polishComponentTool = container.get(STYLE_SYSTEM_TYPES.PolishComponentTool);
 	server.setRequestHandler("tools/list", async () => {
 		return { tools: [
 			withCapabilities(listThemesTool.getDefinition(), [
@@ -5057,12 +4819,6 @@ function createServer(containerOrThemePath) {
 				"components",
 				"app-components",
 				"component-discovery"
-			]),
-			withCapabilities(polishComponentTool.getDefinition(), [
-				"components",
-				"design-review",
-				"polish",
-				"antigravity"
 			])
 		].map((tool) => {
 			if (tool.inputSchema.type !== "object") throw new Error(`Invalid schema for ${tool.name}`);
@@ -5079,8 +4835,7 @@ function createServer(containerOrThemePath) {
 			getCSSClassesTool,
 			getComponentVisualTool,
 			listSharedComponentsTool,
-			listAppComponentsTool,
-			polishComponentTool
+			listAppComponentsTool
 		].find((candidate) => candidate.getDefinition().name === name);
 		if (!tool) return {
 			content: [{
@@ -5333,10 +5088,10 @@ Object.defineProperty(exports, "ListThemesTool", {
 		return ListThemesTool;
 	}
 });
-Object.defineProperty(exports, "PolishComponentTool", {
+Object.defineProperty(exports, "MAX_STYLE_SYSTEM_VIEWPORT_DIMENSION", {
 	enumerable: true,
 	get: function() {
-		return PolishComponentTool;
+		return MAX_STYLE_SYSTEM_VIEWPORT_DIMENSION;
 	}
 });
 Object.defineProperty(exports, "STYLE_SYSTEM_CLI_NAME", {
@@ -5399,6 +5154,12 @@ Object.defineProperty(exports, "ViteReactBundlerService", {
 		return ViteReactBundlerService;
 	}
 });
+Object.defineProperty(exports, "ViteReactNativeBundlerService", {
+	enumerable: true,
+	get: function() {
+		return ViteReactNativeBundlerService;
+	}
+});
 Object.defineProperty(exports, "__toESM", {
 	enumerable: true,
 	get: function() {
@@ -5477,6 +5238,12 @@ Object.defineProperty(exports, "isContained", {
 		return isContained;
 	}
 });
+Object.defineProperty(exports, "launchBrowserWithFallback", {
+	enumerable: true,
+	get: function() {
+		return launchBrowserWithFallback;
+	}
+});
 Object.defineProperty(exports, "log", {
 	enumerable: true,
 	get: function() {