@agimon-ai/po-style-system-tooling 0.0.0-stage → 0.2.14-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vuong Ngo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,149 @@
-# Temporary Holding Version
+# @agimon-ai/po-style-system-tooling
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+MCP server and CLI for exploring themes, Tailwind CSS classes, and UI components from Storybook, with
+standalone component rendering.
+
+## Install
+
+```bash
+pnpm install
+pnpm exec nx run @agimon-ai/po-style-system-tooling:build
+```
+
+## CLI
+
+```bash
+style-system --help
+```
+
+| Command                  | Purpose                                                                 |
+| ------------------------ | ----------------------------------------------------------------------- |
+| `get-css-classes`        | Extract the valid CSS classes from a theme CSS file                     |
+| `get-ui-component`       | Render a component to a screenshot using the app's design-system config |
+| `list-app-components`    | List app-specific components and package components                     |
+| `polish-component`       | Design-system-aware component polish                                    |
+| `generate-oxlint-config` | Generate an oxlint `no-restricted-classes` config from theme tokens     |
+| `mcp-serve`              | Run as an MCP server over stdio                                         |
+
+## MCP server
+
+```json
+{
+  "mcpServers": {
+    "style-system": {
+      "command": "pnpm",
+      "args": ["exec", "style-system", "mcp-serve"]
+    }
+  }
+}
+```
+
+## Configuration
+
+Configuration lives in files named `style-system.config.yaml`, at two levels:
+
+```
+<workspace-root>/style-system.config.yaml   # defines defaults and presets
+<project>/style-system.config.yaml          # selects a preset, applies overrides
+```
+
+The workspace root is found by walking up from the current working directory until a `.git`
+directory is found, falling back to the working directory itself. It is your repository root, not
+the installed package location.
+
+### Resolution order
+
+```
+built-in defaults  ->  root `defaults`  ->  preset chain (parents before child)  ->  project config
+```
+
+Last wins, and **fields replace wholesale**. Lists and objects are never merged element-wise, so a
+project that sets `cssFiles` replaces the inherited list entirely. Use `cssFiles: []` to clear one.
+
+Every field is optional in any individual file. Required-ness is enforced against the merged result,
+so a project config can be valid while inheriting nearly everything.
+
+Both schemas are strict: an unknown or misspelled key is a hard error rather than a silent no-op. The
+project schema additionally rejects `root`, `defaults` and `presets`, so the two file types can never
+be confused for one another.
+
+### Workspace root file
+
+```yaml
+# <workspace-root>/style-system.config.yaml
+root: true # required literal; marks this as the workspace file
+
+# Story tags that mark a component as shared/design-system.
+sharedComponentTags:
+  - style-system
+
+# Optional service overrides. Paths are workspace-root relative.
+# getCssClasses:
+#   customService: packages/.../CustomCSSClassesService.ts
+# bundler:
+#   customService: packages/.../CustomBundlerService.ts
+
+# Applied to every project, beneath its preset chain.
+defaults:
+  type: tailwind
+  colorScheme: automatic
+
+presets:
+  web-app:
+    viewport: { width: 1280, height: 800 }
+    cssFiles: ['src/assets/main.css']
+    componentLibrary: '@acme/web-ui'
+  mcp-app:
+    extends: web-app # presets may extend other presets
+    rootComponent: 'src/components/Root/index.tsx'
+  native-app:
+    bundler: vite-react-native
+    unistylesConfig: unistyles.ts
+    viewport: { width: 393, height: 852 }
+```
+
+### Project file
+
+```yaml
+# <project>/style-system.config.yaml
+extends: web-app # a preset name, or a list: [base, overrides]
+viewport: { width: 1440, height: 900 }
+```
+
+### Fields
+
+| Field                 | Type                             | Purpose                                            |
+| --------------------- | -------------------------------- | -------------------------------------------------- |
+| `type`                | `tailwind` \| `shadcn`           | Design system flavour                              |
+| `bundler`             | string                           | Bundler strategy, e.g. `vite-react-native`         |
+| `brand`               | string                           | Brand identifier                                   |
+| `unistylesConfig`     | string                           | Path to the Unistyles config, for native rendering |
+| `colorScheme`         | `automatic` \| `light` \| `dark` | Rendering colour scheme                            |
+| `viewport`            | `{ width, height }`              | Screenshot viewport, positive integers             |
+| `tailwindConfig`      | string                           | Path to a Tailwind config                          |
+| `themeProvider`       | string                           | Module providing the theme provider component      |
+| `rootComponent`       | string                           | Root component wrapped around rendered stories     |
+| `cssFiles`            | string[]                         | Stylesheets loaded before rendering                |
+| `componentLibrary`    | string                           | Package holding shared components                  |
+| `themePath`           | string                           | Path to the theme CSS                              |
+| `sharedComponentTags` | string[]                         | Story tags marking a component as shared           |
+
+`bundler` is shape-dependent on level: in `defaults`, a preset, or a project file it is a **string**
+naming the strategy; at the workspace root, alongside `getCssClasses`, it is a **service override
+object** taking `customService`.
+
+## Native rendering
+
+Rendering React Native stories additionally requires the application being rendered to provide
+`react-native`, `react-native-unistyles`, `react-native-reanimated`, `@babel/core`,
+`expo-modules-core` and `@expo/vector-icons`. These are resolved from the target application's
+directory, not from this package, so a React Native app already satisfies them.
+
+## Agent skill
+
+The published package ships a `skills/style-system` skill describing when and how an agent should use
+these commands.
+
+## License
+
+MIT

package/dist/cli.cjs

@@ -0,0 +1,495 @@
+#!/usr/bin/env node
+const require_stdio = require("./stdio-DOYXz-Fj.cjs");
+let node_fs = require("node:fs");
+let node_path = require("node:path");
+node_path = require_stdio.__toESM(node_path, 1);
+let zod = require("zod");
+let _agimon_ai_foundation_exec = require("@agimon-ai/foundation-exec");
+let _modelcontextprotocol_server = require("@modelcontextprotocol/server");
+require("reflect-metadata");
+let commander = require("commander");
+let chalk = require("chalk");
+chalk = require_stdio.__toESM(chalk, 1);
+let node_http = require("node:http");
+let _modelcontextprotocol_node = require("@modelcontextprotocol/node");
+//#region src/utils/print.ts
+function resolveChalk(value, depth = 0) {
+	if (value && (typeof value === "object" || typeof value === "function") && "red" in value && typeof value.red === "function") return value;
+	if (depth < 3 && value && (typeof value === "object" || typeof value === "function") && "default" in value) return resolveChalk(value.default, depth + 1);
+	throw new Error("Unable to resolve chalk instance");
+}
+const chalk$1 = resolveChalk(chalk);
+const print = {
+	info: (message) => {
+		console.log(chalk$1.cyan(message));
+	},
+	success: (message) => {
+		console.log(chalk$1.green(message));
+	},
+	warning: (message) => {
+		console.log(chalk$1.yellow(message));
+	},
+	error: (message, error) => {
+		if (error) {
+			const errorMsg = error instanceof Error ? error.message : error;
+			console.error(chalk$1.red(message), errorMsg);
+		} else console.error(chalk$1.red(message));
+	},
+	debug: (message) => {
+		console.log(chalk$1.gray(message));
+	},
+	header: (message) => {
+		console.log(chalk$1.bold.cyan(message));
+	},
+	item: (message) => {
+		console.log(chalk$1.white(`   - ${message}`));
+	},
+	indent: (message) => {
+		console.log(chalk$1.white(`   ${message}`));
+	},
+	highlight: (message) => {
+		console.log(chalk$1.bold.green(message));
+	},
+	newline: () => {
+		console.log();
+	},
+	divider: () => {
+		console.log(chalk$1.gray(".".repeat(60)));
+	}
+};
+//#endregion
+//#region src/commands/generate-oxlint-config.ts
+/**
+* Generate Oxlint Config Command
+*
+* DESIGN PATTERNS:
+* - Command pattern with Commander for CLI argument parsing
+* - Async/await pattern for asynchronous operations
+* - Error handling pattern with try-catch and proper exit codes
+*
+* CODING STANDARDS:
+* - Use async action handlers for asynchronous operations
+* - Provide clear option descriptions and default values
+* - Handle errors gracefully with process.exit()
+* - Log progress and errors to console
+* - Use Commander's .option() and .argument() for inputs
+*
+* AVOID:
+* - Synchronous blocking operations in action handlers
+* - Missing error handling (always use try-catch)
+* - Hardcoded values (use options or environment variables)
+* - Not exiting with appropriate exit codes on errors
+*/
+/**
+* Generate oxlint no-restricted-classes config from theme CSS design tokens
+*/
+const generateOxlintConfigCommand = new commander.Command("generate-oxlint-config").description("Generate oxlint no-restricted-classes config from theme CSS design tokens").option("-a, --app-path <path>", "App path to read theme path from its style-system.config.yaml").option("-t, --theme-path <path>", "Theme CSS file path relative to workspace root").option("-o, --output <path>", "Output file path (defaults to stdout)").action(async (options) => {
+	try {
+		const themePath = (options.appPath ? (await require_stdio.getAppDesignSystemConfig(options.appPath)).themePath : void 0) ?? options.themePath;
+		if (!themePath) throw new Error("No theme CSS path resolved. Pass --theme-path, or pass --app-path for an app that configures themePath.");
+		const resolvedThemePath = await require_stdio.resolveStyleSystemThemePath({
+			appPath: options.appPath ?? null,
+			themePath
+		});
+		const cssResult = await new require_stdio.TailwindCSSClassesService(require_stdio.DEFAULT_STYLE_SYSTEM_CONFIG).extractClasses("colors", resolvedThemePath);
+		const config = require_stdio.generateRestrictedClassesConfig(cssResult);
+		const jsonOutput = JSON.stringify(config, null, 2);
+		if (options.output) {
+			const outputPath = node_path.default.resolve(options.output);
+			await node_fs.promises.writeFile(outputPath, `${jsonOutput}\n`, "utf-8");
+			print.success(`Config written to ${outputPath}`);
+		} else print.info(jsonOutput);
+	} catch (error) {
+		print.error("Error generating oxlint config:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+//#endregion
+//#region src/commands/get-css-classes.ts
+/**
+* Get CSS Classes CLI Command
+*/
+const getCSSClassesCommand = new commander.Command("get-css-classes").description("Extract and return all valid CSS classes from a theme CSS file").option("-c, --category <category>", "Category filter: 'colors', 'typography', 'spacing', 'effects', 'all'", "all").option("-a, --app-path <path>", "App path to read theme path from style-system.config.yaml (e.g., \"apps/agiflow-app\")").option("-t, --theme-path <path>", "Theme CSS file path relative to workspace root (required unless appPath resolves themePath from style-system.config.yaml)").action(async (options) => {
+	try {
+		const result = await require_stdio.createContainer({ defaultThemePath: options.themePath }).get(require_stdio.STYLE_SYSTEM_TYPES.GetCSSClassesTool).execute({
+			category: options.category,
+			appPath: options.appPath
+		});
+		if (result.isError) {
+			const firstContent = result.content[0];
+			const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		print.info(firstContent?.type === "text" ? firstContent.text : "");
+	} catch (error) {
+		print.error("Error getting CSS classes:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+//#endregion
+//#region src/commands/get-ui-component.ts
+/**
+* Get UI Component CLI Command
+*/
+const LIGHT_COLOR_SCHEME = "light";
+const DARK_COLOR_SCHEME = "dark";
+const REQUESTABLE_COLOR_SCHEMES = [LIGHT_COLOR_SCHEME, DARK_COLOR_SCHEME];
+const getUiComponentCommand = new commander.Command("get-ui-component").description("Get a screenshot of a UI component rendered with app-specific design system configuration. Returns screenshot path and story file content.").requiredOption("-c, --component-name <name>", "The name of the component to capture (e.g., \"Button\", \"Card\")").requiredOption("-a, --app-path <path>", "The app path (relative or absolute) to load design system config from (e.g., \"apps/agiflow-app\")").option("-s, --story-name <name>", "The story name to render (e.g., \"Playground\", \"Default\")", "Playground").option("-d, --dark-mode", "Request dark mode for automatic-theme apps").option("--color-scheme <scheme>", "Request light or dark mode for automatic-theme apps").option("--width <pixels>", "Override the configured viewport width", Number).option("--height <pixels>", "Override the configured viewport height", Number).action(async (options) => {
+	try {
+		if (options.colorScheme !== void 0 && !REQUESTABLE_COLOR_SCHEMES.includes(options.colorScheme)) throw new Error("--color-scheme must be light or dark");
+		const tool = require_stdio.createContainer().get(require_stdio.STYLE_SYSTEM_TYPES.GetComponentVisualTool);
+		const darkMode = options.colorScheme === DARK_COLOR_SCHEME ? true : options.colorScheme === LIGHT_COLOR_SCHEME ? false : options.darkMode || void 0;
+		const result = await tool.execute({
+			componentName: options.componentName,
+			appPath: options.appPath,
+			storyName: options.storyName,
+			darkMode,
+			width: options.width,
+			height: options.height
+		});
+		if (result.isError) {
+			const firstContent = result.content[0];
+			const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		process.stdout.write(`${firstContent?.type === "text" ? firstContent.text : ""}\n`);
+	} catch (error) {
+		const errorMessage = error instanceof Error ? error.message : String(error);
+		require_stdio.log.error("Error:", errorMessage);
+		process.stderr.write(`${errorMessage.startsWith("Error:") ? errorMessage : `Error: ${errorMessage}`}\n`);
+		process.exitCode = 1;
+	}
+});
+//#endregion
+//#region src/commands/list-app-components.ts
+/**
+* List App Components CLI Command
+*/
+const listAppComponentsCommand = new commander.Command("list-app-components").description("List app-specific components and package components. Reads the app's package.json to find workspace dependencies.").requiredOption("-a, --app-path <path>", "The app path (relative or absolute) to list components for (e.g., \"apps/agiflow-app\")").option("-c, --cursor <cursor>", "Pagination cursor to fetch the next page").action(async (options) => {
+	try {
+		const result = await require_stdio.createContainer().get(require_stdio.STYLE_SYSTEM_TYPES.ListAppComponentsTool).execute({
+			appPath: options.appPath,
+			cursor: options.cursor
+		});
+		if (result.isError) {
+			const firstContent = result.content[0];
+			const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		print.info(firstContent?.type === "text" ? firstContent.text : "");
+	} catch (error) {
+		print.error("Error:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+//#endregion
+//#region src/commands/list-themes.ts
+/**
+* List Themes Command
+*
+* DESIGN PATTERNS:
+* - Command pattern with Commander for CLI argument parsing
+* - Async/await pattern for asynchronous operations
+* - Error handling pattern with try-catch and proper exit codes
+*
+* CODING STANDARDS:
+* - Use async action handlers for asynchronous operations
+* - Provide clear option descriptions and default values
+* - Handle errors gracefully with process.exit()
+* - Log progress and errors to console
+* - Use Commander's .option() and .argument() for inputs
+*
+* AVOID:
+* - Synchronous blocking operations in action handlers
+* - Missing error handling (always use try-catch)
+* - Hardcoded values (use options or environment variables)
+* - Not exiting with appropriate exit codes on errors
+*/
+/**
+* List all available theme configurations from CSS files
+*/
+const listThemesCommand = new commander.Command("list-themes").description("List all available theme configurations from CSS files configured in style-system.config.yaml").option("-a, --app-path <path>", "App path to read theme config from style-system.config.yaml (e.g., \"apps/my-app\")").action(async (options) => {
+	try {
+		const result = await require_stdio.createContainer().get(require_stdio.STYLE_SYSTEM_TYPES.ListThemesTool).execute({ appPath: options.appPath });
+		if (result.isError) {
+			const firstContent = result.content[0];
+			const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		print.info(firstContent?.type === "text" ? firstContent.text : "");
+	} catch (error) {
+		print.error("Error listing themes:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+//#endregion
+//#region src/commands/list-shared-components.ts
+/**
+* List Shared Components CLI Command
+*/
+const listSharedComponentsCommand = new commander.Command("list-shared-components").description("List all shared UI components available in the design system").option("-c, --cursor <cursor>", "Pagination cursor to fetch the next page").action(async (options) => {
+	try {
+		const result = await require_stdio.createContainer().get(require_stdio.STYLE_SYSTEM_TYPES.ListSharedComponentsTool).execute({ cursor: options.cursor });
+		if (result.isError) {
+			const firstContent = result.content[0];
+			const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		print.info(firstContent?.type === "text" ? firstContent.text : "");
+	} catch (error) {
+		print.error("Error listing shared components:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+//#endregion
+//#region src/transports/http.ts
+/** Request-scoped modern Streamable HTTP. No legacy HTTP/SSE endpoint is registered. */
+var HttpTransportHandler = class {
+	serverFactory;
+	host;
+	port;
+	server = null;
+	handler = null;
+	constructor(serverFactory, port, host = "localhost") {
+		this.serverFactory = serverFactory;
+		if (!Number.isInteger(port) || port < 0 || port > 65535) throw new Error("Invalid HTTP port");
+		this.port = port;
+		this.host = host;
+	}
+	async start() {
+		if (this.server) throw new Error("MCP HTTP transport already running");
+		const handler = (0, _modelcontextprotocol_server.createMcpHandler)(this.serverFactory, { legacy: "reject" });
+		const serve = (0, _modelcontextprotocol_node.toNodeHandler)(handler);
+		const validateHost = (0, _modelcontextprotocol_node.localhostHostValidation)();
+		const validateOrigin = (0, _modelcontextprotocol_node.localhostOriginValidation)();
+		const loopback = [
+			"localhost",
+			"127.0.0.1",
+			"::1",
+			"[::1]"
+		].includes(this.host);
+		const server = (0, node_http.createServer)((req, res) => {
+			if (req.url?.split("?")[0] !== "/mcp" || ![
+				"POST",
+				"GET",
+				"DELETE"
+			].includes(req.method ?? "")) {
+				res.writeHead(404).end();
+				return;
+			}
+			if (loopback && (!validateHost(req, res) || !validateOrigin(req, res))) return;
+			serve(req, res).catch((error) => {
+				process.stderr.write(`MCP HTTP request failed: ${error instanceof Error ? error.message : String(error)}\n`);
+				if (!res.headersSent) res.writeHead(500).end();
+			});
+		});
+		try {
+			await new Promise((resolve, reject) => {
+				server.once("error", reject);
+				server.listen(this.port, this.host, () => resolve());
+			});
+			this.server = server;
+			this.handler = handler;
+		} catch (error) {
+			await handler.close();
+			throw error;
+		}
+	}
+	async stop() {
+		const server = this.server;
+		this.server = null;
+		const handler = this.handler;
+		this.handler = null;
+		await handler?.close();
+		if (server) await new Promise((resolve, reject) => server.close((error) => error ? reject(error) : resolve()));
+	}
+	getPort() {
+		const address = this.server?.address();
+		return address && typeof address !== "string" ? address.port : this.port;
+	}
+};
+//#endregion
+//#region src/commands/mcp-serve.ts
+/**
+* MCP Serve Command
+*
+* DESIGN PATTERNS:
+* - Command pattern with Commander for CLI argument parsing
+* - Transport abstraction pattern for modern stdio and HTTP
+* - Factory pattern for creating transport handlers
+* - Graceful shutdown pattern with signal handling
+*
+* CODING STANDARDS:
+* - Use async/await for asynchronous operations
+* - Implement proper error handling with try-catch blocks
+* - Handle process signals for graceful shutdown
+* - Provide clear CLI options and help messages
+*
+* AVOID:
+* - Hardcoded configuration values (use CLI options or environment variables)
+* - Missing error handling for transport startup
+* - Not cleaning up resources on shutdown
+*/
+/**
+* Start MCP server with given transport handler
+*/
+async function startServer(handler, bundlerService, devServerPort) {
+	await handler.start();
+	let releaseProcess = async () => {};
+	try {
+		releaseProcess = await (0, _agimon_ai_foundation_exec.registerManagedProcess)({
+			repositoryPath: process.cwd(),
+			serviceName: "style-system-mcp",
+			serviceType: "tool",
+			environment: process.env["NODE_ENV"] ?? "development",
+			pid: process.pid,
+			port: devServerPort,
+			command: "style-system mcp-serve",
+			killOnRelease: true,
+			releasePortOnRelease: false,
+			metadata: devServerPort ? { devServerPort } : {}
+		});
+	} catch (error) {
+		console.error("Process registry unavailable:", error);
+	}
+	const shutdown = async (signal) => {
+		console.error(`\nReceived ${signal}, shutting down gracefully...`);
+		try {
+			if (bundlerService.isServerRunning()) {
+				console.error("Stopping bundler dev server...");
+				await bundlerService.cleanup();
+			}
+			await releaseProcess();
+			await handler.stop();
+			process.exit(0);
+		} catch (error) {
+			console.error("Error during shutdown:", error);
+			process.exit(1);
+		}
+	};
+	process.on("SIGINT", () => shutdown("SIGINT"));
+	process.on("SIGTERM", () => shutdown("SIGTERM"));
+}
+/**
+* MCP Serve command
+*
+* Note: Design system configuration is now app-specific and read from each app's project.json.
+* No global theme configuration is needed at the server level.
+*/
+const mcpServeCommand = new commander.Command("mcp-serve").description("Start MCP server with specified transport").option("-t, --type <type>", "Transport type: stdio or http", "stdio").option("-p, --port <port>", "HTTP port (required for HTTP)").option("--host <host>", "HTTP bind host", "localhost").option("--theme-path <path>", "Theme CSS file path relative to workspace root for get-css-classes when app config does not define style-system.themePath").option("--dev", "Start Vite dev server for component hot reload and caching").option("--app-path <path>", "App path for dev server (e.g., apps/agiflow-app)").action(async (options) => {
+	try {
+		const parsed = zod.z.object({
+			type: zod.z.enum(["stdio", "http"]),
+			port: zod.z.coerce.number().int().min(0).max(65535).optional(),
+			host: zod.z.string().min(1),
+			themePath: zod.z.string().optional(),
+			dev: zod.z.boolean().optional(),
+			appPath: zod.z.string().optional()
+		}).parse(options);
+		const transportType = parsed.type;
+		let devServerPort;
+		const bundlerService = await require_stdio.getBundlerServiceFromConfig();
+		if (parsed.dev) {
+			if (!parsed.appPath) {
+				console.error("Error: --app-path is required when using --dev flag");
+				console.error(`Example: ${require_stdio.STYLE_SYSTEM_CLI_NAME} mcp-serve --dev --app-path apps/agiflow-app`);
+				process.exit(1);
+			}
+			const { url, port } = await bundlerService.startDevServer(parsed.appPath);
+			devServerPort = port;
+			console.error(`Dev server started at ${url} (port: ${port})`);
+		}
+		if (transportType === "stdio") {
+			const container = require_stdio.createContainer({ defaultThemePath: parsed.themePath });
+			await startServer(new require_stdio.StdioTransportHandler(() => require_stdio.createServer(container)), bundlerService, devServerPort);
+		} else if (transportType === "http" && parsed.port !== void 0) {
+			const container = require_stdio.createContainer({ defaultThemePath: parsed.themePath });
+			await startServer(new HttpTransportHandler(() => require_stdio.createServer(container), parsed.port, parsed.host), bundlerService, devServerPort);
+		} else {
+			console.error("HTTP requires --port");
+			process.exit(1);
+		}
+	} catch (error) {
+		console.error("Failed to start MCP server:", error);
+		process.exit(1);
+	}
+});
+//#endregion
+//#region src/commands/polish-component.ts
+/**
+* Polish Component Command
+*
+* DESIGN PATTERNS:
+* - Command pattern with Commander for CLI argument parsing
+* - Async/await pattern for asynchronous operations
+* - Error handling pattern with try-catch and proper exit codes
+*
+* CODING STANDARDS:
+* - Use async action handlers for asynchronous operations
+* - Handle errors gracefully with process.exit()
+*
+* AVOID:
+* - Synchronous blocking operations in action handlers
+* - Missing error handling (always use try-catch)
+* - Hardcoded values (use options or environment variables)
+*/
+const polishComponentCommand = new commander.Command("polish-component").description("Polish a UI component using Antigravity with design system context").argument("<file>", "Path to the component .tsx file to polish").option("-i, --instructions <text>", "Specific polishing instructions (e.g., \"improve spacing\")").action(async (file, options) => {
+	try {
+		const result = await require_stdio.createContainer().get(require_stdio.STYLE_SYSTEM_TYPES.PolishComponentTool).execute({
+			filePath: file,
+			instructions: options.instructions
+		});
+		if (result.isError) {
+			const firstContent = result.content[0];
+			const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		for (const content of result.content) if (content.type === "text") console.error(content.text);
+	} catch (error) {
+		console.error("Error:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+//#endregion
+//#region src/cli.ts
+/**
+* MCP Server CLI Entry Point
+*
+* DESIGN PATTERNS:
+* - CLI pattern with Commander for argument parsing
+* - Command pattern for organizing CLI commands
+* - Transport abstraction for multiple communication methods
+*
+* CODING STANDARDS:
+* - Use async/await for asynchronous operations
+* - Handle errors gracefully with try-catch
+* - Log important events for debugging
+* - Register all commands in main entry point
+*
+* AVOID:
+* - Hardcoding command logic in index.ts (use separate command files)
+* - Missing error handling for command execution
+*/
+/**
+* Main entry point
+*/
+async function main() {
+	const program = new commander.Command();
+	program.name(require_stdio.STYLE_SYSTEM_CLI_NAME).description("MCP server for design system tools").version(require_stdio.STYLE_SYSTEM_VERSION);
+	program.addCommand(generateOxlintConfigCommand);
+	program.addCommand(getCSSClassesCommand);
+	program.addCommand(getUiComponentCommand);
+	program.addCommand(listAppComponentsCommand);
+	program.addCommand(listThemesCommand);
+	program.addCommand(listSharedComponentsCommand);
+	program.addCommand(mcpServeCommand);
+	program.addCommand(polishComponentCommand);
+	await program.parseAsync(process.argv);
+}
+main();
+//#endregion

package/dist/cli.d.cts

@@ -0,0 +1 @@
+import "reflect-metadata";

package/dist/cli.d.mts

@@ -0,0 +1 @@
+import "reflect-metadata";