@agiflowai/style-system 0.0.1

package/README.md

@@ -0,0 +1,318 @@
+# @agiflowai/style-system
+
+> MCP server for enforcing brand consistency and style guide compliance
+
+Help AI coding agents follow your company's branding and style guide. style-system ensures AI-generated code uses only approved design tokens, existing components, and adheres to your visual standards.
+
+## Why Use This?
+
+When AI agents write frontend code, they don't know your brand guidelines:
+- What colors, spacing, and typography are approved?
+- What UI components already exist in your design system?
+- Does the output match your brand's visual identity?
+
+style-system solves this by:
+
+1. **Enforcing brand tokens** - Agent uses only approved colors, spacing, and typography from your theme
+2. **Preventing design drift** - Agent discovers existing components instead of creating inconsistent duplicates
+3. **Visual verification** - Agent can preview components to ensure brand alignment
+
+---
+
+## Quick Start
+
+### 1. Requirements
+
+- Node.js >= 18
+- MCP-compatible agent (Claude Code, Cursor, Gemini CLI)
+- Chrome browser (recommended) OR Playwright browsers for `get_component_visual` tool
+
+### 2. Configure Your AI Agent
+
+Add to your MCP config (`.mcp.json`, `.cursor/mcp.json`, etc.):
+
+```json
+{
+  "mcpServers": {
+    "style-system": {
+      "command": "npx",
+      "args": ["-y", "@agiflowai/style-system", "mcp-serve"]
+    }
+  }
+}
+```
+
+### 3. Start Using
+
+Your AI agent now enforces your brand guidelines:
+
+```
+You: "Style this button component"
+
+Agent:
+1. Calls get_css_classes to get your approved design tokens
+2. Writes styles using only brand-approved colors, spacing, typography
+3. Output is consistent with your style guide
+```
+
+---
+
+## Available Tools
+
+| Tool | Purpose | When to Use |
+|------|---------|-------------|
+| `list_themes` | List available brand themes | Understanding brand variations |
+| `get_css_classes` | Extract approved design tokens from theme | Before writing any styles |
+| `list_shared_components` | List brand-approved UI components | Before creating new components |
+| `list_app_components` | List app-specific components | Finding existing branded components |
+| `get_component_visual` | Render component preview screenshot | Verifying brand alignment |
+
+---
+
+## How It Works
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     Your AI Agent                           │
+└─────────────────────────────────────────────────────────────┘
+                              │
+         ┌────────────────────┼────────────────────┐
+         ▼                    ▼                    ▼
+  ┌──────────────┐    ┌──────────────┐    ┌──────────────┐
+  │ Before       │    │ Before       │    │ Verifying    │
+  │ Styling      │    │ Creating     │    │ Brand        │
+  │              │    │ Components   │    │ Alignment    │
+  │ get_css_     │    │ list_shared_ │    │ get_         │
+  │ classes      │    │ components   │    │ component_   │
+  │              │    │              │    │ visual       │
+  └──────────────┘    └──────────────┘    └──────────────┘
+         │                    │                    │
+         ▼                    ▼                    ▼
+  ┌──────────────┐    ┌──────────────┐    ┌──────────────┐
+  │ Brand Tokens │    │ Component    │    │ Visual       │
+  │              │    │ Library      │    │ Preview      │
+  │              │    │              │    │              │
+  │ • Colors     │    │ • Buttons    │    │ • Screenshot │
+  │ • Spacing    │    │ • Forms      │    │ • Brand      │
+  │ • Typography │    │ • Layout     │    │   check      │
+  └──────────────┘    └──────────────┘    └──────────────┘
+```
+
+### Workflow Examples
+
+**Enforcing Brand Tokens:**
+```
+User: "Add hover styles to the card"
+
+Agent:
+1. get_css_classes → extracts approved design tokens
+2. Sees brand colors: hover:bg-primary, hover:bg-secondary
+3. Applies only brand-approved styles
+```
+
+**Reusing Brand Components:**
+```
+User: "I need a modal dialog"
+
+Agent:
+1. list_shared_components tags:["ui"]
+2. Finds: Dialog component at packages/ui/src/Dialog.tsx
+3. Uses existing branded component instead of creating off-brand duplicate
+```
+
+**Verifying Brand Alignment:**
+```
+User: "Show me the Button variants"
+
+Agent:
+1. get_component_visual componentName:"Button" appPath:"apps/web"
+2. Returns: Screenshot showing branded button variants
+3. Agent verifies output matches brand guidelines
+```
+
+---
+
+## Configuration
+
+Add `style-system` config to your app's `project.json`:
+
+```json
+{
+  "name": "my-app",
+  "sourceRoot": "apps/my-app/src",
+  "style-system": {
+    "type": "tailwind",
+    "themeProvider": "@your-org/web-ui",
+    "themePath": "packages/web-theme/src/theme.css",
+    "cssFiles": ["src/styles/globals.css"],
+    "rootComponent": "src/providers/ThemeProvider.tsx",
+    "sharedComponentTags": ["ui", "primitives"]
+  }
+}
+```
+
+| Setup | project.json Location |
+|-------|----------------------|
+| Monorepo | `apps/my-app/project.json` |
+| Monolith | `./project.json` (project root) |
+
+### Workspace Defaults (toolkit.yaml)
+
+Configure workspace-level defaults and custom service overrides in `toolkit.yaml`:
+
+```yaml
+style-system:
+  # Default tags for list_shared_components tool
+  sharedComponentTags:
+    - "ui"
+    - "primitives"
+
+  # Custom service for get_css_classes tool (optional)
+  getCssClasses:
+    customService: ./my-custom-css-service.ts
+
+  # Custom bundler service for component rendering (optional)
+  bundler:
+    customService: ./my-custom-bundler.ts
+```
+
+| Option | Description |
+|--------|-------------|
+| `sharedComponentTags` | Default tags for `list_shared_components` tool |
+| `getCssClasses.customService` | Path to custom CSS extraction service (extends `BaseCSSClassesService`) |
+| `bundler.customService` | Path to custom bundler service (extends `BaseBundlerService`) |
+
+### Configuration Options
+
+| Option | Required | Description |
+|--------|----------|-------------|
+| `type` | Yes | Style system type: `tailwind` or `shadcn` |
+| `themeProvider` | Yes | Package or path providing brand theme |
+| `themePath` | No | Path to brand token CSS file |
+| `cssFiles` | No | Additional brand CSS files for rendering |
+| `rootComponent` | No | Wrapper component for branded previews |
+| `tailwindConfig` | No | Path to tailwind.config.js (if non-standard) |
+| `sharedComponentTags` | No | Storybook tags for brand components (default: `['style-system']`) |
+| `componentLibrary` | No | Component library path (for shadcn type) |
+
+---
+
+## Browser Requirements
+
+The `get_component_visual` tool requires a browser to render and capture component screenshots. The tool automatically detects available browsers in this order:
+
+1. **System Chrome** (recommended) - Uses your installed Chrome browser
+2. **Playwright Chromium** - Playwright's bundled Chromium
+3. **Playwright Firefox** - Playwright's bundled Firefox
+
+If no browser is found, you'll see an error with installation instructions:
+
+```bash
+# Install Playwright browsers (if Chrome is not available)
+npx playwright install chromium
+```
+
+---
+
+## Custom CSS Classes Service
+
+For custom CSS extraction logic, extend `BaseCSSClassesService`:
+
+```typescript
+// my-custom-css-service.ts
+import { BaseCSSClassesService } from '@agiflowai/style-system';
+
+export default class MyCustomCSSService extends BaseCSSClassesService {
+  getFrameworkId(): string { return 'my-framework'; }
+
+  // Key method to override:
+  async extractClasses(category, themePath) {
+    // Parse your CSS/theme file and return classes by category
+    return {
+      colors: [{ name: 'primary', value: '#007bff' }],
+      typography: [],
+      spacing: [],
+      effects: [],
+    };
+  }
+}
+```
+
+Configure in `toolkit.yaml`:
+
+```yaml
+style-system:
+  getCssClasses:
+    customService: packages/my-app/src/my-custom-css-service.ts
+```
+
+---
+
+## Custom Bundler Service
+
+For advanced use cases, extend `BaseBundlerService` to customize component rendering:
+
+```typescript
+// my-custom-bundler.ts
+import { BaseBundlerService } from '@agiflowai/style-system';
+
+export default class MyCustomBundlerService extends BaseBundlerService {
+  // Key methods to override:
+  async startDevServer(appPath: string) { /* Start dev server */ }
+  async serveComponent(options) { /* Serve component via dev server */ }
+  async prerenderComponent(options) { /* Build static HTML */ }
+  async cleanup() { /* Cleanup resources */ }
+}
+```
+
+Configure in `toolkit.yaml`:
+
+```yaml
+style-system:
+  bundler:
+    customService: packages/my-app/src/my-custom-bundler.ts
+```
+
+---
+
+## Server Options
+
+```bash
+# stdio transport (default)
+npx @agiflowai/style-system mcp-serve
+
+# HTTP transport
+npx @agiflowai/style-system mcp-serve --type http --port 3000
+
+# SSE transport
+npx @agiflowai/style-system mcp-serve --type sse --port 3000
+```
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `-t, --type` | Transport: `stdio`, `http`, `sse` | `stdio` |
+| `-p, --port` | Port for HTTP/SSE | `3000` |
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build
+pnpm build
+
+# Test
+pnpm test
+
+# Type check
+pnpm typecheck
+```
+
+---
+
+## License
+
+[AGPL-3.0](../../LICENSE)

package/dist/cli.cjs

@@ -0,0 +1,184 @@
+#!/usr/bin/env node
+const require_stdio = require('./stdio-BlNvX94v.cjs');
+let __agiflowai_aicode_utils = require("@agiflowai/aicode-utils");
+__agiflowai_aicode_utils = require_stdio.__toESM(__agiflowai_aicode_utils);
+let commander = require("commander");
+commander = require_stdio.__toESM(commander);
+
+//#region src/commands/get-css-classes.ts
+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 project.json (e.g., \"apps/agiflow-app\")").option("-t, --theme-path <path>", "Default theme CSS file path relative to workspace root (used if appPath not provided or themePath not in project.json)", "packages/frontend/web-theme/src/agimon-theme.css").action(async (options) => {
+	try {
+		const result = await new require_stdio.GetCSSClassesTool(options.themePath).execute({
+			category: options.category,
+			appPath: options.appPath
+		});
+		if (result.isError) {
+			const firstContent$1 = result.content[0];
+			const errorText = firstContent$1?.type === "text" ? firstContent$1.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		__agiflowai_aicode_utils.print.info(firstContent?.type === "text" ? firstContent.text : "");
+	} catch (error) {
+		__agiflowai_aicode_utils.print.error("Error getting CSS classes:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+
+//#endregion
+//#region src/commands/get-ui-component.ts
+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", "Render the component in dark mode", false).action(async (options) => {
+	try {
+		const result = await new require_stdio.GetComponentVisualTool().execute({
+			componentName: options.componentName,
+			appPath: options.appPath,
+			storyName: options.storyName,
+			darkMode: options.darkMode
+		});
+		if (result.isError) {
+			const firstContent$1 = result.content[0];
+			const errorText = firstContent$1?.type === "text" ? firstContent$1.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		console.log(firstContent?.type === "text" ? firstContent.text : "");
+	} catch (error) {
+		console.error("Error:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+
+//#endregion
+//#region src/commands/list-app-components.ts
+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 new require_stdio.ListAppComponentsTool().execute({
+			appPath: options.appPath,
+			cursor: options.cursor
+		});
+		if (result.isError) {
+			const firstContent$1 = result.content[0];
+			const errorText = firstContent$1?.type === "text" ? firstContent$1.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		__agiflowai_aicode_utils.print.info(firstContent?.type === "text" ? firstContent.text : "");
+	} catch (error) {
+		__agiflowai_aicode_utils.print.error("Error:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+
+//#endregion
+//#region src/commands/list-themes.ts
+/**
+* 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 project.json style-system config").option("-a, --app-path <path>", "App path to read theme config from project.json (e.g., \"apps/my-app\")").action(async (options) => {
+	try {
+		const result = await new require_stdio.ListThemesTool().execute({ appPath: options.appPath });
+		if (result.isError) {
+			const firstContent$1 = result.content[0];
+			const errorText = firstContent$1?.type === "text" ? firstContent$1.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		__agiflowai_aicode_utils.print.info(firstContent?.type === "text" ? firstContent.text : "");
+	} catch (error) {
+		__agiflowai_aicode_utils.print.error("Error listing themes:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+
+//#endregion
+//#region src/commands/list-shared-components.ts
+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 new require_stdio.ListSharedComponentsTool().execute({ cursor: options.cursor });
+		if (result.isError) {
+			const firstContent$1 = result.content[0];
+			const errorText = firstContent$1?.type === "text" ? firstContent$1.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		__agiflowai_aicode_utils.print.info(firstContent?.type === "text" ? firstContent.text : "");
+	} catch (error) {
+		__agiflowai_aicode_utils.print.error("Error listing shared components:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+
+//#endregion
+//#region src/commands/mcp-serve.ts
+/**
+* Start MCP server with given transport handler
+*/
+async function startServer(handler, bundlerService) {
+	await handler.start();
+	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 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", "stdio").option("--theme-path <path>", "Default theme CSS file path relative to workspace root", "packages/frontend/web-theme/src/agimon-theme.css").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 transportType = options.type.toLowerCase();
+		const bundlerService = await require_stdio.getBundlerServiceFromConfig();
+		if (options.dev) {
+			if (!options.appPath) {
+				console.error("Error: --app-path is required when using --dev flag");
+				console.error("Example: style-system-mcp mcp-serve --dev --app-path apps/agiflow-app");
+				process.exit(1);
+			}
+			const { url, port } = await bundlerService.startDevServer(options.appPath);
+			console.log(`✅ Dev server started at ${url} (port: ${port})`);
+			console.log("⚡ Components will be served with hot reload support and caching");
+		}
+		if (transportType === "stdio") await startServer(new require_stdio.StdioTransportHandler(require_stdio.createServer(options.themePath)), bundlerService);
+		else {
+			console.error(`Unknown transport type: ${transportType}. Use: stdio`);
+			process.exit(1);
+		}
+	} catch (error) {
+		console.error("Failed to start MCP server:", error);
+		process.exit(1);
+	}
+});
+
+//#endregion
+//#region src/cli.ts
+/**
+* Main entry point
+*/
+async function main() {
+	const program = new commander.Command();
+	program.name("style-system-mcp").description("MCP server for design system tools").version("0.1.0");
+	program.addCommand(getCSSClassesCommand);
+	program.addCommand(getUiComponentCommand);
+	program.addCommand(listAppComponentsCommand);
+	program.addCommand(listThemesCommand);
+	program.addCommand(listSharedComponentsCommand);
+	program.addCommand(mcpServeCommand);
+	await program.parseAsync(process.argv);
+}
+main();
+
+//#endregion

package/dist/cli.d.cts

@@ -0,0 +1 @@
+export { };

package/dist/cli.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/cli.js

@@ -0,0 +1,183 @@
+#!/usr/bin/env node
+import { a as ListAppComponentsTool, i as ListThemesTool, m as GetCSSClassesTool, n as createServer, o as GetComponentVisualTool, r as ListSharedComponentsTool, t as StdioTransportHandler, u as getBundlerServiceFromConfig } from "./stdio-CGaoEmM8.js";
+import { print } from "@agiflowai/aicode-utils";
+import { Command } from "commander";
+
+//#region src/commands/get-css-classes.ts
+const getCSSClassesCommand = new 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 project.json (e.g., \"apps/agiflow-app\")").option("-t, --theme-path <path>", "Default theme CSS file path relative to workspace root (used if appPath not provided or themePath not in project.json)", "packages/frontend/web-theme/src/agimon-theme.css").action(async (options) => {
+	try {
+		const result = await new GetCSSClassesTool(options.themePath).execute({
+			category: options.category,
+			appPath: options.appPath
+		});
+		if (result.isError) {
+			const firstContent$1 = result.content[0];
+			const errorText = firstContent$1?.type === "text" ? firstContent$1.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
+const getUiComponentCommand = new 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", "Render the component in dark mode", false).action(async (options) => {
+	try {
+		const result = await new GetComponentVisualTool().execute({
+			componentName: options.componentName,
+			appPath: options.appPath,
+			storyName: options.storyName,
+			darkMode: options.darkMode
+		});
+		if (result.isError) {
+			const firstContent$1 = result.content[0];
+			const errorText = firstContent$1?.type === "text" ? firstContent$1.text : "Unknown error";
+			throw new Error(errorText);
+		}
+		const firstContent = result.content[0];
+		console.log(firstContent?.type === "text" ? firstContent.text : "");
+	} catch (error) {
+		console.error("Error:", error instanceof Error ? error.message : String(error));
+		process.exit(1);
+	}
+});
+
+//#endregion
+//#region src/commands/list-app-components.ts
+const listAppComponentsCommand = new 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 new ListAppComponentsTool().execute({
+			appPath: options.appPath,
+			cursor: options.cursor
+		});
+		if (result.isError) {
+			const firstContent$1 = result.content[0];
+			const errorText = firstContent$1?.type === "text" ? firstContent$1.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 all available theme configurations from CSS files
+*/
+const listThemesCommand = new Command("list-themes").description("List all available theme configurations from CSS files configured in project.json style-system config").option("-a, --app-path <path>", "App path to read theme config from project.json (e.g., \"apps/my-app\")").action(async (options) => {
+	try {
+		const result = await new ListThemesTool().execute({ appPath: options.appPath });
+		if (result.isError) {
+			const firstContent$1 = result.content[0];
+			const errorText = firstContent$1?.type === "text" ? firstContent$1.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
+const listSharedComponentsCommand = new 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 new ListSharedComponentsTool().execute({ cursor: options.cursor });
+		if (result.isError) {
+			const firstContent$1 = result.content[0];
+			const errorText = firstContent$1?.type === "text" ? firstContent$1.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/commands/mcp-serve.ts
+/**
+* Start MCP server with given transport handler
+*/
+async function startServer(handler, bundlerService) {
+	await handler.start();
+	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 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 Command("mcp-serve").description("Start MCP server with specified transport").option("-t, --type <type>", "Transport type: stdio", "stdio").option("--theme-path <path>", "Default theme CSS file path relative to workspace root", "packages/frontend/web-theme/src/agimon-theme.css").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 transportType = options.type.toLowerCase();
+		const bundlerService = await getBundlerServiceFromConfig();
+		if (options.dev) {
+			if (!options.appPath) {
+				console.error("Error: --app-path is required when using --dev flag");
+				console.error("Example: style-system-mcp mcp-serve --dev --app-path apps/agiflow-app");
+				process.exit(1);
+			}
+			const { url, port } = await bundlerService.startDevServer(options.appPath);
+			console.log(`✅ Dev server started at ${url} (port: ${port})`);
+			console.log("⚡ Components will be served with hot reload support and caching");
+		}
+		if (transportType === "stdio") await startServer(new StdioTransportHandler(createServer(options.themePath)), bundlerService);
+		else {
+			console.error(`Unknown transport type: ${transportType}. Use: stdio`);
+			process.exit(1);
+		}
+	} catch (error) {
+		console.error("Failed to start MCP server:", error);
+		process.exit(1);
+	}
+});
+
+//#endregion
+//#region src/cli.ts
+/**
+* Main entry point
+*/
+async function main() {
+	const program = new Command();
+	program.name("style-system-mcp").description("MCP server for design system tools").version("0.1.0");
+	program.addCommand(getCSSClassesCommand);
+	program.addCommand(getUiComponentCommand);
+	program.addCommand(listAppComponentsCommand);
+	program.addCommand(listThemesCommand);
+	program.addCommand(listSharedComponentsCommand);
+	program.addCommand(mcpServeCommand);
+	await program.parseAsync(process.argv);
+}
+main();
+
+//#endregion
+export {  };