@agimon-ai/style-system 0.1.1

package/dist/cli.mjs

@@ -0,0 +1,393 @@
+#!/usr/bin/env node
+import { F as log, M as DEFAULT_STYLE_SYSTEM_CONFIG, N as TailwindCSSClassesService, O as resolveStyleSystemThemePath, S as getAppDesignSystemConfig, a as STYLE_SYSTEM_CLI_NAME, i as createServer, k as STYLE_SYSTEM_TYPES, o as STYLE_SYSTEM_VERSION, r as generateRestrictedClassesConfig, s as createContainer, t as StdioTransportHandler, y as getBundlerServiceFromConfig } from "./stdio-Bh4OBwmR.mjs";
+import { promises } from "node:fs";
+import path from "node:path";
+import { registerManagedProcess } from "@agimon-ai/foundation-exec";
+import "reflect-metadata";
+import { Command } from "commander";
+import * as chalkImport from "chalk";
+//#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 = resolveChalk(chalkImport);
+const print = {
+	info: (message) => {
+		console.log(chalk.cyan(message));
+	},
+	success: (message) => {
+		console.log(chalk.green(message));
+	},
+	warning: (message) => {
+		console.log(chalk.yellow(message));
+	},
+	error: (message, error) => {
+		if (error) {
+			const errorMsg = error instanceof Error ? error.message : error;
+			console.error(chalk.red(message), errorMsg);
+		} else console.error(chalk.red(message));
+	},
+	debug: (message) => {
+		console.log(chalk.gray(message));
+	},
+	header: (message) => {
+		console.log(chalk.bold.cyan(message));
+	},
+	item: (message) => {
+		console.log(chalk.white(`   - ${message}`));
+	},
+	indent: (message) => {
+		console.log(chalk.white(`   ${message}`));
+	},
+	highlight: (message) => {
+		console.log(chalk.bold.green(message));
+	},
+	newline: () => {
+		console.log();
+	},
+	divider: () => {
+		console.log(chalk.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 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 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 resolveStyleSystemThemePath({
+			appPath: options.appPath ?? null,
+			themePath
+		});
+		const cssResult = await new TailwindCSSClassesService(DEFAULT_STYLE_SYSTEM_CONFIG).extractClasses("colors", resolvedThemePath);
+		const config = generateRestrictedClassesConfig(cssResult);
+		const jsonOutput = JSON.stringify(config, null, 2);
+		if (options.output) {
+			const outputPath = path.resolve(options.output);
+			await 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 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 createContainer({ defaultThemePath: options.themePath }).get(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 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 = createContainer().get(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);
+		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 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 createContainer().get(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 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 createContainer().get(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 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 createContainer().get(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/commands/mcp-serve.ts
+/**
+* MCP Serve Command
+*
+* DESIGN PATTERNS:
+* - Command pattern with Commander for CLI argument parsing
+* - Transport abstraction pattern for flexible deployment (stdio, HTTP, SSE)
+* - 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 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 {}
+	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 Command("mcp-serve").description("Start MCP server with specified transport").option("-t, --type <type>", "Transport type: stdio", "stdio").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 transportType = options.type.toLowerCase();
+		let devServerPort;
+		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_CLI_NAME} mcp-serve --dev --app-path apps/agiflow-app`);
+				process.exit(1);
+			}
+			const { url, port } = await bundlerService.startDevServer(options.appPath);
+			devServerPort = port;
+			console.error(`Dev server started at ${url} (port: ${port})`);
+		}
+		if (transportType === "stdio") {
+			const container = createContainer({ defaultThemePath: options.themePath });
+			const server = createServer(container);
+			await startServer(new StdioTransportHandler(server), bundlerService, devServerPort);
+		} 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/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 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 createContainer().get(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
+/**
+* Main entry point
+*/
+async function main() {
+	const program = new Command();
+	program.name(STYLE_SYSTEM_CLI_NAME).description("MCP server for design system tools").version(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
+export {};

package/dist/index.cjs

@@ -0,0 +1,84 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_stdio = require("./stdio-D8AH3sRD.cjs");
+exports.BaseBundlerService = require_stdio.BaseBundlerService;
+exports.BaseCSSClassesService = require_stdio.BaseCSSClassesService;
+Object.defineProperty(exports, "CSSClassesServiceFactory", {
+	enumerable: true,
+	get: function() {
+		return require_stdio.CSSClassesServiceFactory;
+	}
+});
+exports.ComponentRendererService = require_stdio.ComponentRendererService;
+exports.DEFAULT_STYLE_SYSTEM_CONFIG = require_stdio.DEFAULT_STYLE_SYSTEM_CONFIG;
+Object.defineProperty(exports, "GetCSSClassesTool", {
+	enumerable: true,
+	get: function() {
+		return require_stdio.GetCSSClassesTool;
+	}
+});
+Object.defineProperty(exports, "GetComponentVisualTool", {
+	enumerable: true,
+	get: function() {
+		return require_stdio.GetComponentVisualTool;
+	}
+});
+Object.defineProperty(exports, "GetUiComponentService", {
+	enumerable: true,
+	get: function() {
+		return require_stdio.GetUiComponentService;
+	}
+});
+Object.defineProperty(exports, "ListAppComponentsTool", {
+	enumerable: true,
+	get: function() {
+		return require_stdio.ListAppComponentsTool;
+	}
+});
+Object.defineProperty(exports, "ListSharedComponentsTool", {
+	enumerable: true,
+	get: function() {
+		return require_stdio.ListSharedComponentsTool;
+	}
+});
+Object.defineProperty(exports, "ListThemesTool", {
+	enumerable: true,
+	get: function() {
+		return require_stdio.ListThemesTool;
+	}
+});
+Object.defineProperty(exports, "PolishComponentTool", {
+	enumerable: true,
+	get: function() {
+		return require_stdio.PolishComponentTool;
+	}
+});
+exports.STYLE_SYSTEM_TYPES = require_stdio.STYLE_SYSTEM_TYPES;
+exports.StdioTransportHandler = require_stdio.StdioTransportHandler;
+Object.defineProperty(exports, "StoriesIndexService", {
+	enumerable: true,
+	get: function() {
+		return require_stdio.StoriesIndexService;
+	}
+});
+Object.defineProperty(exports, "StyleSystemConfigLoader", {
+	enumerable: true,
+	get: function() {
+		return require_stdio.StyleSystemConfigLoader;
+	}
+});
+exports.TailwindCSSClassesService = require_stdio.TailwindCSSClassesService;
+exports.ThemeService = require_stdio.ThemeService;
+exports.ViteReactBundlerService = require_stdio.ViteReactBundlerService;
+exports.createContainer = require_stdio.createContainer;
+exports.createDefaultBundlerService = require_stdio.createDefaultBundlerService;
+exports.createServer = require_stdio.createServer;
+exports.createStyleSystemModule = require_stdio.createStyleSystemModule;
+exports.extractCustomTokenNames = require_stdio.extractCustomTokenNames;
+exports.generateRestrictedClassesConfig = require_stdio.generateRestrictedClassesConfig;
+exports.getAppDesignSystemConfig = require_stdio.getAppDesignSystemConfig;
+exports.getBundlerServiceFromConfig = require_stdio.getBundlerServiceFromConfig;
+exports.getSharedComponentTags = require_stdio.getSharedComponentTags;
+exports.hasStyleSystemProjectConfig = require_stdio.hasStyleSystemProjectConfig;
+exports.resetStyleSystemConfigCache = require_stdio.resetStyleSystemConfigCache;
+exports.resolveAppDesignSystemConfig = require_stdio.resolveAppDesignSystemConfig;
+exports.resolveStyleSystemThemePath = require_stdio.resolveStyleSystemThemePath;