@moontra/moonui-mcp-server/dist/index.mjs.map

Model Context Protocol server for MoonUI component library - AI-native component access

{"version":3,"sources":["../src/server.ts","../src/metadata/complete-registry.ts","../src/metadata/registry.ts","../src/security/sanitizer.ts","../src/security/tracker.ts","../src/tools/suggest-component.ts","../src/tools/fix-imports.ts","../src/tools/environment-detector.ts","../src/tools/generate-code.ts","../src/tools/validate-usage.ts","../src/tools/theming-helper.ts","../src/registries/theming-registry.ts","../src/resources/components.ts","../src/prompts/form-wizard.ts","../src/prompts/dashboard.ts","../src/utils/license-validator.ts","../src/utils/rate-limiter.ts","../src/index.ts"],"sourcesContent":["// MoonUI MCP Server Implementation\n\nimport { Server } from \"@modelcontextprotocol/sdk/server/index.js\";\nimport { StdioServerTransport } from \"@modelcontextprotocol/sdk/server/stdio.js\";\nimport {\n  ListResourcesRequestSchema,\n  ReadResourceRequestSchema,\n  ListToolsRequestSchema,\n  CallToolRequestSchema,\n  ListPromptsRequestSchema,\n  GetPromptRequestSchema,\n  ErrorCode,\n  McpError,\n} from \"@modelcontextprotocol/sdk/types.js\";\nimport { z } from \"zod\";\nimport debug from \"debug\";\nimport type { ServerConfig, ComponentMetadata, MoonUIResource, MoonUITool } from \"./types.js\";\nimport { ComponentRegistry } from \"./metadata/registry.js\";\nimport { suggestComponent } from \"./tools/suggest-component.js\";\nimport { fixImports } from \"./tools/fix-imports.js\";\nimport { generateCode } from \"./tools/generate-code.js\";\nimport { validateUsage } from \"./tools/validate-usage.js\";\nimport { themingHelper } from \"./tools/theming-helper.js\";\nimport { detectEnvironment } from \"./tools/environment-detector.js\";\nimport { ComponentResources } from \"./resources/components.js\";\nimport { FormWizardPrompt } from \"./prompts/form-wizard.js\";\nimport { DashboardPrompt } from \"./prompts/dashboard.js\";\nimport { LicenseValidator } from \"./utils/license-validator.js\";\nimport { RateLimiter } from \"./utils/rate-limiter.js\";\n\nconst log = debug(\"moonui:mcp:server\");\n\nexport class MoonUIMCPServer {\n  private server: Server;\n  private registry: ComponentRegistry;\n  private resources: ComponentResources;\n  private config: ServerConfig;\n  private licenseInfo: any;\n\n  constructor(config?: Partial<ServerConfig>) {\n    this.config = {\n      name: \"moonui-mcp\",\n      version: \"1.0.0\",\n      enableAnalytics: true,\n      enableLearning: true,\n      cacheEnabled: true,\n      debug: false,\n      ...config,\n    };\n\n    if (this.config.debug) {\n      debug.enable(\"moonui:*\");\n    }\n\n    log(\"Initializing MoonUI MCP Server\", this.config);\n\n    // Initialize server with capabilities\n    this.server = new Server(\n      {\n        name: this.config.name,\n        version: this.config.version,\n      },\n      {\n        capabilities: {\n          resources: {},\n          tools: {},\n          prompts: {},\n        },\n      }\n    );\n\n    // Initialize components\n    this.registry = ComponentRegistry.getInstance();\n    this.resources = new ComponentResources(this.registry);\n\n    // Validate license on startup\n    this.validateLicense();\n\n    // Setup request handlers\n    this.setupHandlers();\n  }\n\n  private async validateLicense() {\n    try {\n      this.licenseInfo = await LicenseValidator.validate(this.config.licenseKey);\n      log(\"License validated:\", this.licenseInfo);\n    } catch (error) {\n      log(\"License validation error:\", error);\n      // Default to free tier\n      this.licenseInfo = {\n        isValid: true,\n        tier: \"free\",\n        features: [\"basic-components\"]\n      };\n    }\n  }\n\n  private checkRateLimit(): boolean {\n    const identifier = this.config.licenseKey || \"anonymous\";\n    const result = RateLimiter.check(identifier, this.licenseInfo?.tier || \"free\");\n    \n    if (!result.allowed) {\n      throw new McpError(\n        ErrorCode.InvalidRequest,\n        `Rate limit exceeded. Resets at ${new Date(result.resetAt).toISOString()}`\n      );\n    }\n    \n    return true;\n  }\n\n  private setupHandlers() {\n    // Resource handlers\n    this.server.setRequestHandler(\n      ListResourcesRequestSchema,\n      async () => this.handleListResources()\n    );\n\n    this.server.setRequestHandler(\n      ReadResourceRequestSchema,\n      async (request) => this.handleReadResource(request.params.uri)\n    );\n\n    // Tool handlers\n    this.server.setRequestHandler(\n      ListToolsRequestSchema,\n      async () => this.handleListTools()\n    );\n\n    this.server.setRequestHandler(\n      CallToolRequestSchema,\n      async (request) => this.handleCallTool(request.params.name, request.params.arguments)\n    );\n\n    // Prompt handlers\n    this.server.setRequestHandler(\n      ListPromptsRequestSchema,\n      async () => this.handleListPrompts()\n    );\n\n    this.server.setRequestHandler(\n      GetPromptRequestSchema,\n      async (request) => this.handleGetPrompt(request.params.name, request.params.arguments)\n    );\n\n    log(\"All handlers registered successfully\");\n  }\n\n  // Resource Handlers\n  private async handleListResources() {\n    log(\"Listing resources\");\n    \n    const resources: MoonUIResource[] = [\n      {\n        uri: \"moonui://components\",\n        name: \"All Components\",\n        description: \"List of all available MoonUI components\",\n        mimeType: \"application/json\",\n      },\n      {\n        uri: \"moonui://components/free\",\n        name: \"Free Components\",\n        description: \"List of free MoonUI components\",\n        mimeType: \"application/json\",\n      },\n      {\n        uri: \"moonui://components/pro\",\n        name: \"Pro Components\",\n        description: \"List of MoonUI Pro components\",\n        mimeType: \"application/json\",\n      },\n    ];\n\n    // Add individual component resources\n    const components = this.registry.getAllComponents();\n    for (const component of components) {\n      resources.push({\n        uri: `moonui://component/${component.id}`,\n        name: `${component.name} Component`,\n        description: component.description,\n        mimeType: \"application/json\",\n      });\n      \n      resources.push({\n        uri: `moonui://component/${component.id}/examples`,\n        name: `${component.name} Examples`,\n        description: `Usage examples for ${component.name}`,\n        mimeType: \"application/json\",\n      });\n      \n      resources.push({\n        uri: `moonui://component/${component.id}/props`,\n        name: `${component.name} Props`,\n        description: `Props documentation for ${component.name}`,\n        mimeType: \"application/json\",\n      });\n    }\n\n    return { resources };\n  }\n\n  private async handleReadResource(uri: string) {\n    log(`Reading resource: ${uri}`);\n    \n    try {\n      const content = await this.resources.getResource(uri);\n      return {\n        contents: [\n          {\n            uri,\n            mimeType: \"application/json\",\n            text: JSON.stringify(content, null, 2),\n          },\n        ],\n      };\n    } catch (error) {\n      throw new McpError(\n        ErrorCode.InvalidRequest,\n        `Resource not found: ${uri}`\n      );\n    }\n  }\n\n  // Tool Handlers\n  private async handleListTools() {\n    log(\"Listing tools\");\n    \n    const tools: MoonUITool[] = [\n      {\n        name: \"suggest_component\",\n        description: \"Find the best MoonUI component for a specific use case\",\n        inputSchema: {\n          type: \"object\",\n          properties: {\n            description: {\n              type: \"string\",\n              description: \"Natural language description of what you need\",\n            },\n            context: {\n              type: \"string\",\n              description: \"Optional context about the project or use case\",\n            },\n            preferPro: {\n              type: \"boolean\",\n              description: \"Whether to prefer Pro components if available\",\n            },\n          },\n          required: [\"description\"],\n        },\n      },\n      {\n        name: \"fix_imports\",\n        description: \"Fix missing or incorrect MoonUI imports in code\",\n        inputSchema: {\n          type: \"object\",\n          properties: {\n            code: {\n              type: \"string\",\n              description: \"The code with potential import issues\",\n            },\n            filePath: {\n              type: \"string\",\n              description: \"Optional file path for better context\",\n            },\n          },\n          required: [\"code\"],\n        },\n      },\n      {\n        name: \"generate_code\",\n        description: \"Generate MoonUI component code for a specific use case\",\n        inputSchema: {\n          type: \"object\",\n          properties: {\n            component: {\n              type: \"string\",\n              description: \"The component name to use\",\n            },\n            useCase: {\n              type: \"string\",\n              description: \"Description of what the code should do\",\n            },\n            variant: {\n              type: \"string\",\n              enum: [\"free\", \"pro\"],\n              description: \"Whether to use free or pro version\",\n            },\n            typescript: {\n              type: \"boolean\",\n              description: \"Generate TypeScript code\",\n            },\n            context: {\n              type: \"string\",\n              description: \"Context about the environment (e.g., 'artifact', 'browser', 'node')\",\n            },\n            environment: {\n              type: \"string\",\n              enum: [\"auto\", \"npm\", \"cdn\"],\n              description: \"Force specific import method ('auto' detects automatically)\",\n            },\n          },\n          required: [\"component\", \"useCase\"],\n        },\n      },\n      {\n        name: \"validate_usage\",\n        description: \"Validate MoonUI component usage and suggest fixes\",\n        inputSchema: {\n          type: \"object\",\n          properties: {\n            code: {\n              type: \"string\",\n              description: \"The code to validate\",\n            },\n            strict: {\n              type: \"boolean\",\n              description: \"Enable strict validation mode\",\n            },\n          },\n          required: [\"code\"],\n        },\n      },\n      {\n        name: \"theming_helper\",\n        description: \"Get theming guidance and examples for MoonUI components\",\n        inputSchema: {\n          type: \"object\",\n          properties: {\n            query: {\n              type: \"string\",\n              description: \"What theming aspect are you looking for? (e.g., 'dark mode', 'custom colors', 'CSS variables')\",\n            },\n            type: {\n              type: \"string\",\n              enum: [\"colors\", \"darkMode\", \"cssVariables\", \"themeSwitcher\", \"customization\", \"all\"],\n              description: \"Type of theming information needed\",\n            },\n            includeExamples: {\n              type: \"boolean\",\n              description: \"Include code examples\",\n            },\n          },\n          required: [\"query\"],\n        },\n      },\n      {\n        name: \"detect_environment\",\n        description: \"Detect execution environment and provide appropriate MoonUI usage instructions\",\n        inputSchema: {\n          type: \"object\",\n          properties: {\n            context: {\n              type: \"string\",\n              description: \"Context about the environment (e.g., 'artifact', 'browser', 'node', 'playground')\",\n            },\n            hasProjectAccess: {\n              type: \"boolean\",\n              description: \"Whether the environment has access to npm/project files\",\n            },\n            userAgent: {\n              type: \"string\",\n              description: \"User agent string for additional environment detection\",\n            },\n          },\n          required: [],\n        },\n      },\n    ];\n\n    return { tools };\n  }\n\n  private async handleCallTool(name: string, args?: any) {\n    log(`Calling tool: ${name}`, args);\n    \n    try {\n      switch (name) {\n        case \"suggest_component\":\n          return await suggestComponent(\n            args.description,\n            args.context,\n            args.preferPro,\n            this.registry,\n            this.licenseInfo\n          );\n          \n        case \"fix_imports\":\n          return await fixImports(\n            args.code,\n            args.filePath,\n            this.registry\n          );\n          \n        case \"generate_code\":\n          return await generateCode(\n            args.component,\n            args.useCase,\n            args.variant,\n            args.typescript,\n            this.registry,\n            args.context,\n            args.environment\n          );\n          \n        case \"validate_usage\":\n          return await validateUsage(\n            args.code,\n            args.strict,\n            this.registry\n          );\n          \n        case \"theming_helper\":\n          return await themingHelper({\n            query: args.query,\n            type: args.type,\n            includeExamples: args.includeExamples\n          });\n          \n        case \"detect_environment\":\n          return await detectEnvironment(\n            args.context,\n            args.hasProjectAccess,\n            args.userAgent\n          );\n          \n        default:\n          throw new McpError(\n            ErrorCode.MethodNotFound,\n            `Unknown tool: ${name}`\n          );\n      }\n    } catch (error) {\n      log(`Tool error: ${name}`, error);\n      throw error;\n    }\n  }\n\n  // Prompt Handlers\n  private async handleListPrompts() {\n    log(\"Listing prompts\");\n    \n    return {\n      prompts: [\n        {\n          name: \"form_wizard\",\n          description: \"Create a multi-step form wizard with MoonUI components\",\n          arguments: [\n            {\n              name: \"steps\",\n              description: \"Number of steps in the wizard\",\n              required: true,\n            },\n            {\n              name: \"validation\",\n              description: \"Include form validation\",\n              required: false,\n            },\n          ],\n        },\n        {\n          name: \"dashboard_layout\",\n          description: \"Generate a dashboard layout with MoonUI components\",\n          arguments: [\n            {\n              name: \"sections\",\n              description: \"Dashboard sections to include\",\n              required: true,\n            },\n            {\n              name: \"theme\",\n              description: \"Theme variant (light/dark)\",\n              required: false,\n            },\n          ],\n        },\n      ],\n    };\n  }\n\n  private async handleGetPrompt(name: string, args?: any) {\n    log(`Getting prompt: ${name}`, args);\n    \n    try {\n      switch (name) {\n        case \"form_wizard\":\n          return FormWizardPrompt.generate(args, this.registry);\n          \n        case \"dashboard_layout\":\n          return DashboardPrompt.generate(args, this.registry);\n          \n        default:\n          throw new McpError(\n            ErrorCode.MethodNotFound,\n            `Unknown prompt: ${name}`\n          );\n      }\n    } catch (error) {\n      log(`Prompt error: ${name}`, error);\n      throw error;\n    }\n  }\n\n  // Start the server\n  async start() {\n    log(\"Starting MoonUI MCP Server\");\n    \n    const transport = new StdioServerTransport();\n    await this.server.connect(transport);\n    \n    log(\"MoonUI MCP Server started successfully\");\n  }\n}\n\n// Export for CLI usage\nexport async function startServer(config?: Partial<ServerConfig>) {\n  const server = new MoonUIMCPServer(config);\n  await server.start();\n}","// Complete MoonUI Component Registry with ALL Components\n// This file contains metadata for all 100+ MoonUI components\n\nimport type { ComponentMetadata } from \"../types.js\";\n\nexport const ALL_COMPONENTS: ComponentMetadata[] = [\n  // ==================== FOUNDATION COMPONENTS ====================\n  {\n    id: \"alert\",\n    name: \"Alert\",\n    category: \"Foundation\",\n    description: \"Display important messages with contextual feedback\",\n    package: \"@moontra/moonui\",\n    imports: [\"Alert\", \"AlertDescription\", \"AlertTitle\"],\n    dependencies: [],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    variants: [\"default\", \"destructive\"],\n    props: [\n      { name: \"variant\", type: \"string\", required: false, default: \"default\", description: \"Alert variant\" },\n      { name: \"className\", type: \"string\", required: false, description: \"Additional CSS classes\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"error\", name: \"Error Alert\", description: \"Show error messages\", tags: [\"error\", \"warning\"], complexity: \"basic\" },\n      { id: \"success\", name: \"Success Alert\", description: \"Show success messages\", tags: [\"success\", \"confirmation\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"alert\", \"notification\", \"message\", \"warning\", \"error\", \"info\", \"success\"],\n    relatedComponents: [\"toast\", \"dialog\"],\n  },\n  {\n    id: \"aspect-ratio\",\n    name: \"AspectRatio\",\n    category: \"Foundation\",\n    description: \"Maintain consistent aspect ratios for media content\",\n    package: \"@moontra/moonui\",\n    imports: [\"AspectRatio\"],\n    dependencies: [\"@radix-ui/react-aspect-ratio\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"ratio\", type: \"number\", required: false, default: \"1\", description: \"Aspect ratio value\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"image\", name: \"Image Container\", description: \"Maintain image aspect ratio\", tags: [\"image\", \"media\"], complexity: \"basic\" },\n      { id: \"video\", name: \"Video Container\", description: \"Maintain video aspect ratio\", tags: [\"video\", \"media\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"aspect\", \"ratio\", \"image\", \"video\", \"media\", \"container\", \"responsive\"],\n    relatedComponents: [\"image\", \"video\"],\n  },\n  {\n    id: \"avatar\",\n    name: \"Avatar\",\n    category: \"Foundation\",\n    description: \"Display user profile images with fallback support\",\n    package: \"@moontra/moonui\",\n    imports: [\"Avatar\", \"AvatarImage\", \"AvatarFallback\"],\n    dependencies: [\"@radix-ui/react-avatar\"],\n    hasProVersion: true,\n    isFree: true,\n    isPro: false,\n    isMixed: true,\n    props: [\n      { name: \"src\", type: \"string\", required: false, description: \"Image source URL\" },\n      { name: \"alt\", type: \"string\", required: false, description: \"Alt text for image\" },\n      { name: \"fallback\", type: \"string\", required: false, description: \"Fallback text\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"user\", name: \"User Avatar\", description: \"Display user profile picture\", tags: [\"user\", \"profile\"], complexity: \"basic\" },\n      { id: \"team\", name: \"Team Member\", description: \"Show team member avatar\", tags: [\"team\", \"member\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"avatar\", \"user\", \"profile\", \"image\", \"picture\", \"photo\", \"icon\"],\n    relatedComponents: [\"image\", \"badge\"],\n  },\n  {\n    id: \"badge\",\n    name: \"Badge\",\n    category: \"Foundation\",\n    description: \"Small count and labeling component\",\n    package: \"@moontra/moonui\",\n    imports: [\"Badge\", \"badgeVariants\"],\n    dependencies: [],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    variants: [\"default\", \"secondary\", \"destructive\", \"outline\"],\n    props: [\n      { name: \"variant\", type: \"string\", required: false, default: \"default\", description: \"Badge variant\" },\n      { name: \"className\", type: \"string\", required: false, description: \"Additional CSS classes\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"status\", name: \"Status Badge\", description: \"Show status indicators\", tags: [\"status\", \"state\"], complexity: \"basic\" },\n      { id: \"count\", name: \"Count Badge\", description: \"Display counts or numbers\", tags: [\"count\", \"number\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"badge\", \"tag\", \"label\", \"chip\", \"status\", \"indicator\", \"count\"],\n    relatedComponents: [\"button\", \"tag\"],\n  },\n  {\n    id: \"button\",\n    name: \"Button\",\n    category: \"Foundation\",\n    description: \"Interactive button component with multiple variants and states\",\n    package: \"@moontra/moonui\",\n    imports: [\"Button\", \"buttonVariants\"],\n    dependencies: [],\n    hasProVersion: true,\n    isFree: true,\n    isPro: false,\n    isMixed: true,\n    variants: [\"default\", \"destructive\", \"outline\", \"secondary\", \"ghost\", \"link\"],\n    sizes: [\"default\", \"sm\", \"lg\", \"icon\"],\n    props: [\n      { name: \"variant\", type: \"string\", required: false, default: \"default\", description: \"Button variant style\" },\n      { name: \"size\", type: \"string\", required: false, default: \"default\", description: \"Button size\" },\n      { name: \"disabled\", type: \"boolean\", required: false, default: \"false\", description: \"Disable button\" },\n      { name: \"asChild\", type: \"boolean\", required: false, default: \"false\", description: \"Render as child component\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"submit\", name: \"Form Submit\", description: \"Submit form button\", tags: [\"form\", \"submit\"], complexity: \"basic\" },\n      { id: \"action\", name: \"Action Button\", description: \"Trigger actions\", tags: [\"action\", \"click\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"button\", \"click\", \"action\", \"submit\", \"cta\", \"press\", \"tap\", \"interactive\"],\n    relatedComponents: [\"link\", \"icon-button\", \"toggle\"],\n  },\n  {\n    id: \"checkbox\",\n    name: \"Checkbox\",\n    category: \"Foundation\",\n    description: \"Allow users to select one or more items from a set\",\n    package: \"@moontra/moonui\",\n    imports: [\"Checkbox\"],\n    dependencies: [\"@radix-ui/react-checkbox\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"checked\", type: \"boolean\", required: false, description: \"Checked state\" },\n      { name: \"onCheckedChange\", type: \"function\", required: false, description: \"Change handler\" },\n      { name: \"disabled\", type: \"boolean\", required: false, default: \"false\", description: \"Disable checkbox\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"terms\", name: \"Terms Agreement\", description: \"Accept terms checkbox\", tags: [\"terms\", \"agreement\"], complexity: \"basic\" },\n      { id: \"multi-select\", name: \"Multiple Selection\", description: \"Select multiple options\", tags: [\"select\", \"multiple\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"checkbox\", \"check\", \"select\", \"toggle\", \"option\", \"choice\", \"tick\"],\n    relatedComponents: [\"radio-group\", \"switch\", \"toggle\"],\n  },\n  {\n    id: \"input\",\n    name: \"Input\",\n    category: \"Foundation\",\n    description: \"Text input field with various types and states\",\n    package: \"@moontra/moonui\",\n    imports: [\"Input\"],\n    dependencies: [],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"type\", type: \"string\", required: false, default: \"text\", description: \"Input type\" },\n      { name: \"placeholder\", type: \"string\", required: false, description: \"Placeholder text\" },\n      { name: \"disabled\", type: \"boolean\", required: false, default: \"false\", description: \"Disable input\" },\n      { name: \"value\", type: \"string\", required: false, description: \"Input value\" },\n      { name: \"onChange\", type: \"function\", required: false, description: \"Change handler\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"email\", name: \"Email Input\", description: \"Email address input\", tags: [\"email\", \"form\"], complexity: \"basic\" },\n      { id: \"search\", name: \"Search Input\", description: \"Search field\", tags: [\"search\", \"find\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"input\", \"text\", \"field\", \"form\", \"entry\", \"type\", \"textbox\"],\n    relatedComponents: [\"textarea\", \"select\", \"label\"],\n  },\n  {\n    id: \"label\",\n    name: \"Label\",\n    category: \"Foundation\",\n    description: \"Accessible label for form controls\",\n    package: \"@moontra/moonui\",\n    imports: [\"Label\"],\n    dependencies: [\"@radix-ui/react-label\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"htmlFor\", type: \"string\", required: false, description: \"ID of labeled element\" },\n      { name: \"className\", type: \"string\", required: false, description: \"Additional CSS classes\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"form-label\", name: \"Form Label\", description: \"Label for form fields\", tags: [\"form\", \"label\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"label\", \"text\", \"form\", \"caption\", \"title\", \"description\"],\n    relatedComponents: [\"input\", \"select\", \"textarea\"],\n  },\n  {\n    id: \"radio-group\",\n    name: \"Radio Group\",\n    category: \"Foundation\",\n    description: \"Allow users to select a single option from a set\",\n    package: \"@moontra/moonui\",\n    imports: [\"RadioGroup\", \"RadioGroupItem\"],\n    dependencies: [\"@radix-ui/react-radio-group\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"value\", type: \"string\", required: false, description: \"Selected value\" },\n      { name: \"onValueChange\", type: \"function\", required: false, description: \"Change handler\" },\n      { name: \"disabled\", type: \"boolean\", required: false, default: \"false\", description: \"Disable radio group\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"options\", name: \"Option Selection\", description: \"Select one option\", tags: [\"select\", \"option\"], complexity: \"basic\" },\n      { id: \"preference\", name: \"User Preference\", description: \"Choose user preference\", tags: [\"preference\", \"choice\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"radio\", \"option\", \"select\", \"choice\", \"single\", \"group\"],\n    relatedComponents: [\"checkbox\", \"select\", \"toggle\"],\n  },\n  {\n    id: \"select\",\n    name: \"Select\",\n    category: \"Foundation\",\n    description: \"Display a list of options for the user to pick from\",\n    package: \"@moontra/moonui\",\n    imports: [\"Select\", \"SelectContent\", \"SelectItem\", \"SelectTrigger\", \"SelectValue\"],\n    dependencies: [\"@radix-ui/react-select\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"value\", type: \"string\", required: false, description: \"Selected value\" },\n      { name: \"onValueChange\", type: \"function\", required: false, description: \"Change handler\" },\n      { name: \"placeholder\", type: \"string\", required: false, description: \"Placeholder text\" },\n      { name: \"disabled\", type: \"boolean\", required: false, default: \"false\", description: \"Disable select\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"country\", name: \"Country Select\", description: \"Select country\", tags: [\"country\", \"location\"], complexity: \"basic\" },\n      { id: \"category\", name: \"Category Select\", description: \"Choose category\", tags: [\"category\", \"filter\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"select\", \"dropdown\", \"picker\", \"option\", \"choice\", \"menu\", \"list\"],\n    relatedComponents: [\"combobox\", \"radio-group\", \"dropdown-menu\"],\n  },\n  {\n    id: \"slider\",\n    name: \"Slider\",\n    category: \"Foundation\",\n    description: \"Input for selecting a value from a range\",\n    package: \"@moontra/moonui\",\n    imports: [\"Slider\"],\n    dependencies: [\"@radix-ui/react-slider\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"value\", type: \"number[]\", required: false, description: \"Slider value\" },\n      { name: \"onValueChange\", type: \"function\", required: false, description: \"Change handler\" },\n      { name: \"min\", type: \"number\", required: false, default: \"0\", description: \"Minimum value\" },\n      { name: \"max\", type: \"number\", required: false, default: \"100\", description: \"Maximum value\" },\n      { name: \"step\", type: \"number\", required: false, default: \"1\", description: \"Step increment\" },\n      { name: \"disabled\", type: \"boolean\", required: false, default: \"false\", description: \"Disable slider\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"volume\", name: \"Volume Control\", description: \"Adjust volume level\", tags: [\"volume\", \"audio\"], complexity: \"basic\" },\n      { id: \"price\", name: \"Price Range\", description: \"Select price range\", tags: [\"price\", \"range\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"slider\", \"range\", \"input\", \"control\", \"adjust\", \"value\", \"scale\"],\n    relatedComponents: [\"progress\", \"input\"],\n  },\n  {\n    id: \"switch\",\n    name: \"Switch\",\n    category: \"Foundation\",\n    description: \"Toggle between checked and unchecked states\",\n    package: \"@moontra/moonui\",\n    imports: [\"Switch\"],\n    dependencies: [\"@radix-ui/react-switch\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"checked\", type: \"boolean\", required: false, description: \"Checked state\" },\n      { name: \"onCheckedChange\", type: \"function\", required: false, description: \"Change handler\" },\n      { name: \"disabled\", type: \"boolean\", required: false, default: \"false\", description: \"Disable switch\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"settings\", name: \"Settings Toggle\", description: \"Enable/disable settings\", tags: [\"settings\", \"toggle\"], complexity: \"basic\" },\n      { id: \"theme\", name: \"Theme Switch\", description: \"Dark/light mode toggle\", tags: [\"theme\", \"mode\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"switch\", \"toggle\", \"on\", \"off\", \"enable\", \"disable\", \"boolean\"],\n    relatedComponents: [\"checkbox\", \"toggle\", \"radio-group\"],\n  },\n  {\n    id: \"textarea\",\n    name: \"Textarea\",\n    category: \"Foundation\",\n    description: \"Multi-line text input field\",\n    package: \"@moontra/moonui\",\n    imports: [\"Textarea\"],\n    dependencies: [],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"placeholder\", type: \"string\", required: false, description: \"Placeholder text\" },\n      { name: \"value\", type: \"string\", required: false, description: \"Textarea value\" },\n      { name: \"onChange\", type: \"function\", required: false, description: \"Change handler\" },\n      { name: \"rows\", type: \"number\", required: false, default: \"4\", description: \"Number of rows\" },\n      { name: \"disabled\", type: \"boolean\", required: false, default: \"false\", description: \"Disable textarea\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"comment\", name: \"Comment Box\", description: \"User comments\", tags: [\"comment\", \"feedback\"], complexity: \"basic\" },\n      { id: \"description\", name: \"Description Field\", description: \"Long text descriptions\", tags: [\"description\", \"text\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"textarea\", \"text\", \"input\", \"multiline\", \"field\", \"form\", \"content\"],\n    relatedComponents: [\"input\", \"editor\"],\n  },\n  {\n    id: \"toggle\",\n    name: \"Toggle\",\n    category: \"Foundation\",\n    description: \"Toggle button with pressed state\",\n    package: \"@moontra/moonui\",\n    imports: [\"Toggle\"],\n    dependencies: [\"@radix-ui/react-toggle\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"pressed\", type: \"boolean\", required: false, description: \"Pressed state\" },\n      { name: \"onPressedChange\", type: \"function\", required: false, description: \"Press change handler\" },\n      { name: \"disabled\", type: \"boolean\", required: false, default: \"false\", description: \"Disable toggle\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"format\", name: \"Text Format\", description: \"Bold/italic toggle\", tags: [\"format\", \"text\"], complexity: \"basic\" },\n      { id: \"favorite\", name: \"Favorite Toggle\", description: \"Mark as favorite\", tags: [\"favorite\", \"like\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"toggle\", \"button\", \"press\", \"state\", \"switch\", \"on\", \"off\"],\n    relatedComponents: [\"button\", \"switch\", \"checkbox\"],\n  },\n  {\n    id: \"separator\",\n    name: \"Separator\",\n    category: \"Foundation\",\n    description: \"Visual divider between content sections\",\n    package: \"@moontra/moonui\",\n    imports: [\"Separator\"],\n    dependencies: [\"@radix-ui/react-separator\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"orientation\", type: \"string\", required: false, default: \"horizontal\", description: \"Separator orientation\" },\n      { name: \"className\", type: \"string\", required: false, description: \"Additional CSS classes\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"section\", name: \"Section Divider\", description: \"Divide content sections\", tags: [\"section\", \"divider\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"separator\", \"divider\", \"line\", \"border\", \"hr\", \"split\"],\n    relatedComponents: [\"spacer\"],\n  },\n  {\n    id: \"tags-input\",\n    name: \"Tags Input\",\n    category: \"Foundation\",\n    description: \"Input field for adding multiple tags\",\n    package: \"@moontra/moonui\",\n    imports: [\"TagsInput\"],\n    dependencies: [],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"value\", type: \"string[]\", required: false, description: \"Tag values\" },\n      { name: \"onChange\", type: \"function\", required: false, description: \"Change handler\" },\n      { name: \"placeholder\", type: \"string\", required: false, description: \"Placeholder text\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"skills\", name: \"Skills Tags\", description: \"Add user skills\", tags: [\"skills\", \"tags\"], complexity: \"intermediate\" },\n      { id: \"keywords\", name: \"Keywords\", description: \"Add keywords\", tags: [\"keywords\", \"meta\"], complexity: \"intermediate\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"tags\", \"input\", \"chips\", \"labels\", \"keywords\", \"multiple\"],\n    relatedComponents: [\"input\", \"badge\"],\n  },\n  {\n    id: \"color-picker\",\n    name: \"Color Picker\",\n    category: \"Foundation\",\n    description: \"Interactive color selection tool\",\n    package: \"@moontra/moonui\",\n    imports: [\"ColorPicker\"],\n    dependencies: [],\n    hasProVersion: true,\n    isFree: true,\n    isPro: false,\n    isMixed: true,\n    props: [\n      { name: \"value\", type: \"string\", required: false, description: \"Color value\" },\n      { name: \"onChange\", type: \"function\", required: false, description: \"Change handler\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"theme\", name: \"Theme Color\", description: \"Select theme colors\", tags: [\"theme\", \"color\"], complexity: \"intermediate\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"color\", \"picker\", \"palette\", \"rgb\", \"hex\", \"hsl\", \"select\"],\n    relatedComponents: [\"input\", \"slider\"],\n  },\n  {\n    id: \"date-picker\",\n    name: \"Date Picker\",\n    category: \"Foundation\",\n    description: \"Calendar-based date selection component\",\n    package: \"@moontra/moonui\",\n    imports: [\"DatePicker\"],\n    dependencies: [\"date-fns\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"value\", type: \"Date\", required: false, description: \"Selected date\" },\n      { name: \"onChange\", type: \"function\", required: false, description: \"Change handler\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"booking\", name: \"Date Booking\", description: \"Select booking date\", tags: [\"booking\", \"date\"], complexity: \"intermediate\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"date\", \"picker\", \"calendar\", \"time\", \"day\", \"month\", \"year\"],\n    relatedComponents: [\"calendar\", \"input\"],\n  },\n  {\n    id: \"simple-editor\",\n    name: \"Simple Editor\",\n    category: \"Foundation\",\n    description: \"Basic text editor with formatting options\",\n    package: \"@moontra/moonui\",\n    imports: [\"SimpleEditor\"],\n    dependencies: [],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"value\", type: \"string\", required: false, description: \"Editor content\" },\n      { name: \"onChange\", type: \"function\", required: false, description: \"Change handler\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"notes\", name: \"Note Editor\", description: \"Simple note taking\", tags: [\"notes\", \"editor\"], complexity: \"intermediate\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"editor\", \"text\", \"wysiwyg\", \"format\", \"rich\", \"content\"],\n    relatedComponents: [\"textarea\", \"rich-text-editor\"],\n  },\n\n  // ==================== LAYOUT COMPONENTS ====================\n  {\n    id: \"accordion\",\n    name: \"Accordion\",\n    category: \"Layout\",\n    description: \"Collapsible content panels for organizing information\",\n    package: \"@moontra/moonui\",\n    imports: [\"Accordion\", \"AccordionContent\", \"AccordionItem\", \"AccordionTrigger\"],\n    dependencies: [\"@radix-ui/react-accordion\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"type\", type: \"string\", required: false, default: \"single\", description: \"Single or multiple panels\" },\n      { name: \"collapsible\", type: \"boolean\", required: false, default: \"false\", description: \"Allow closing all panels\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"faq\", name: \"FAQ Section\", description: \"Frequently asked questions\", tags: [\"faq\", \"questions\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"accordion\", \"collapse\", \"expand\", \"panel\", \"faq\", \"toggle\"],\n    relatedComponents: [\"collapsible\", \"tabs\"],\n  },\n  {\n    id: \"breadcrumb\",\n    name: \"Breadcrumb\",\n    category: \"Layout\",\n    description: \"Navigation aid showing current page location\",\n    package: \"@moontra/moonui\",\n    imports: [\"Breadcrumb\", \"BreadcrumbItem\", \"BreadcrumbLink\", \"BreadcrumbList\", \"BreadcrumbPage\", \"BreadcrumbSeparator\"],\n    dependencies: [],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [],\n    examples: [],\n    useCases: [\n      { id: \"navigation\", name: \"Page Navigation\", description: \"Show page hierarchy\", tags: [\"navigation\", \"path\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"breadcrumb\", \"navigation\", \"path\", \"trail\", \"hierarchy\", \"location\"],\n    relatedComponents: [\"navigation-menu\", \"link\"],\n  },\n  {\n    id: \"card\",\n    name: \"Card\",\n    category: \"Layout\",\n    description: \"Container component for grouping related content\",\n    package: \"@moontra/moonui\",\n    imports: [\"Card\", \"CardHeader\", \"CardTitle\", \"CardDescription\", \"CardContent\", \"CardFooter\"],\n    dependencies: [],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"className\", type: \"string\", required: false, description: \"Additional CSS classes\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"content\", name: \"Content Card\", description: \"Display grouped content\", tags: [\"content\", \"container\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"card\", \"container\", \"box\", \"panel\", \"section\", \"wrapper\"],\n    relatedComponents: [\"dialog\", \"sheet\", \"popover\"],\n  },\n  {\n    id: \"collapsible\",\n    name: \"Collapsible\",\n    category: \"Layout\",\n    description: \"Interactive component that can be expanded or collapsed\",\n    package: \"@moontra/moonui\",\n    imports: [\"Collapsible\", \"CollapsibleContent\", \"CollapsibleTrigger\"],\n    dependencies: [\"@radix-ui/react-collapsible\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"open\", type: \"boolean\", required: false, description: \"Open state\" },\n      { name: \"onOpenChange\", type: \"function\", required: false, description: \"Open change handler\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"details\", name: \"Show Details\", description: \"Expandable details section\", tags: [\"details\", \"expand\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"collapsible\", \"expand\", \"collapse\", \"toggle\", \"accordion\", \"fold\"],\n    relatedComponents: [\"accordion\", \"disclosure\"],\n  },\n  {\n    id: \"table\",\n    name: \"Table\",\n    category: \"Layout\",\n    description: \"Display data in rows and columns\",\n    package: \"@moontra/moonui\",\n    imports: [\"Table\", \"TableBody\", \"TableCaption\", \"TableCell\", \"TableHead\", \"TableHeader\", \"TableRow\"],\n    dependencies: [],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [],\n    examples: [],\n    useCases: [\n      { id: \"data\", name: \"Data Table\", description: \"Display tabular data\", tags: [\"data\", \"table\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"table\", \"data\", \"grid\", \"rows\", \"columns\", \"spreadsheet\"],\n    relatedComponents: [\"data-table\", \"list\"],\n  },\n  {\n    id: \"tabs\",\n    name: \"Tabs\",\n    category: \"Layout\",\n    description: \"Organize content into multiple panels\",\n    package: \"@moontra/moonui\",\n    imports: [\"Tabs\", \"TabsContent\", \"TabsList\", \"TabsTrigger\"],\n    dependencies: [\"@radix-ui/react-tabs\"],\n    hasProVersion: true,\n    isFree: true,\n    isPro: false,\n    isMixed: true,\n    props: [\n      { name: \"defaultValue\", type: \"string\", required: false, description: \"Default active tab\" },\n      { name: \"value\", type: \"string\", required: false, description: \"Controlled active tab\" },\n      { name: \"onValueChange\", type: \"function\", required: false, description: \"Tab change handler\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"content\", name: \"Content Tabs\", description: \"Organize content sections\", tags: [\"content\", \"sections\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"tabs\", \"panel\", \"navigation\", \"sections\", \"switcher\", \"pages\"],\n    relatedComponents: [\"accordion\", \"navigation-menu\"],\n  },\n\n  // ==================== NAVIGATION & OVERLAYS ====================\n  {\n    id: \"command\",\n    name: \"Command\",\n    category: \"Navigation & Overlays\",\n    description: \"Command menu with search and keyboard navigation\",\n    package: \"@moontra/moonui\",\n    imports: [\"Command\", \"CommandDialog\", \"CommandEmpty\", \"CommandGroup\", \"CommandInput\", \"CommandItem\", \"CommandList\", \"CommandSeparator\"],\n    dependencies: [\"cmdk\"],\n    hasProVersion: true,\n    isFree: true,\n    isPro: false,\n    isMixed: true,\n    props: [],\n    examples: [],\n    useCases: [\n      { id: \"search\", name: \"Command Search\", description: \"Quick search interface\", tags: [\"search\", \"command\"], complexity: \"intermediate\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"command\", \"search\", \"palette\", \"menu\", \"keyboard\", \"shortcut\"],\n    relatedComponents: [\"combobox\", \"search\"],\n  },\n  {\n    id: \"dialog\",\n    name: \"Dialog\",\n    category: \"Navigation & Overlays\",\n    description: \"Modal dialog overlay for important content\",\n    package: \"@moontra/moonui\",\n    imports: [\"Dialog\", \"DialogContent\", \"DialogDescription\", \"DialogHeader\", \"DialogTitle\", \"DialogTrigger\", \"DialogFooter\"],\n    dependencies: [\"@radix-ui/react-dialog\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [\n      { name: \"open\", type: \"boolean\", required: false, description: \"Open state\" },\n      { name: \"onOpenChange\", type: \"function\", required: false, description: \"Open change handler\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"confirm\", name: \"Confirmation Dialog\", description: \"Confirm user actions\", tags: [\"confirm\", \"modal\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"dialog\", \"modal\", \"popup\", \"overlay\", \"window\", \"alert\"],\n    relatedComponents: [\"alert-dialog\", \"sheet\", \"popover\"],\n  },\n  {\n    id: \"dropdown-menu\",\n    name: \"Dropdown Menu\",\n    category: \"Navigation & Overlays\",\n    description: \"Menu of actions triggered by a button\",\n    package: \"@moontra/moonui\",\n    imports: [\"DropdownMenu\", \"DropdownMenuContent\", \"DropdownMenuItem\", \"DropdownMenuLabel\", \"DropdownMenuSeparator\", \"DropdownMenuTrigger\"],\n    dependencies: [\"@radix-ui/react-dropdown-menu\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [],\n    examples: [],\n    useCases: [\n      { id: \"actions\", name: \"Action Menu\", description: \"List of actions\", tags: [\"menu\", \"actions\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"dropdown\", \"menu\", \"actions\", \"context\", \"options\", \"list\"],\n    relatedComponents: [\"context-menu\", \"popover\", \"select\"],\n  },\n  {\n    id: \"pagination\",\n    name: \"Pagination\",\n    category: \"Navigation & Overlays\",\n    description: \"Navigate through multiple pages of content\",\n    package: \"@moontra/moonui\",\n    imports: [\"Pagination\", \"PaginationContent\", \"PaginationItem\", \"PaginationLink\", \"PaginationNext\", \"PaginationPrevious\"],\n    dependencies: [],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [],\n    examples: [],\n    useCases: [\n      { id: \"list\", name: \"List Pagination\", description: \"Navigate list pages\", tags: [\"pages\", \"navigation\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"pagination\", \"pages\", \"navigation\", \"next\", \"previous\", \"numbers\"],\n    relatedComponents: [\"data-table\", \"list\"],\n  },\n  {\n    id: \"popover\",\n    name: \"Popover\",\n    category: \"Navigation & Overlays\",\n    description: \"Floating panel for displaying additional content\",\n    package: \"@moontra/moonui\",\n    imports: [\"Popover\", \"PopoverContent\", \"PopoverTrigger\"],\n    dependencies: [\"@radix-ui/react-popover\"],\n    hasProVersion: true,\n    isFree: true,\n    isPro: false,\n    isMixed: true,\n    props: [\n      { name: \"open\", type: \"boolean\", required: false, description: \"Open state\" },\n      { name: \"onOpenChange\", type: \"function\", required: false, description: \"Open change handler\" },\n    ],\n    examples: [],\n    useCases: [\n      { id: \"info\", name: \"Info Popover\", description: \"Show additional info\", tags: [\"info\", \"tooltip\"], complexity: \"basic\" },\n    ],\n    commonErrors: [],\n    aiTags: [\"popover\", \"popup\", \"floating\", \"tooltip\", \"overlay\", \"panel\"],\n    relatedComponents: [\"tooltip\", \"dialog\", \"dropdown-menu\"],\n  },\n  {\n    id: \"tooltip\",\n    name: \"Tooltip\",\n    category: \"Navigation & Overlays\",\n    description: \"Contextual information on hover or focus\",\n    package: \"@moontra/moonui\",\n    imports: [\"Tooltip\", \"TooltipContent\", \"TooltipProvider\", \"TooltipTrigger\"],\n    dependencies: [\"@radix-ui/react-tooltip\"],\n    hasProVersion: false,\n    isFree: true,\n    isPro: false,\n    isMixed: false,\n    props: [],\n    examples: [],\n    useCases: [\n      { id: \"help\", name: \"Help Tooltip\", description: \"Show help text\", tags: [\"help\", \"info\"], compl