@spavn/ui 0.0.1

package/mcp-server/index.js

@@ -0,0 +1,1266 @@
+#!/usr/bin/env node
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { CallToolRequestSchema, ListToolsRequestSchema, } from '@modelcontextprotocol/sdk/types.js';
+const components = [
+    // ─── Layout ──────────────────────────────────────────────────
+    {
+        name: 'AppLayout',
+        category: 'layout',
+        description: 'Root application layout shell that composes header, sidebar, main, and footer regions',
+        props: [],
+        examples: ['<AppLayout><AppHeader /><AppMain>Content</AppMain></AppLayout>']
+    },
+    {
+        name: 'AppHeader',
+        category: 'layout',
+        description: 'Sticky application header bar with slot-based content areas',
+        props: [],
+        examples: ['<AppHeader><h1>My App</h1></AppHeader>']
+    },
+    {
+        name: 'AppSidebar',
+        category: 'layout',
+        description: 'Collapsible application sidebar for primary navigation',
+        props: [],
+        examples: ['<AppSidebar>Navigation items</AppSidebar>']
+    },
+    {
+        name: 'AppFooter',
+        category: 'layout',
+        description: 'Application footer region pinned to the bottom of the layout',
+        props: [],
+        examples: ['<AppFooter>Footer content</AppFooter>']
+    },
+    {
+        name: 'AppMain',
+        category: 'layout',
+        description: 'Main content area that fills the remaining space in AppLayout',
+        props: [],
+        examples: ['<AppMain><router-view /></AppMain>']
+    },
+    {
+        name: 'SidebarProvider',
+        category: 'layout',
+        description: 'Context provider that manages sidebar open/collapsed state for child components',
+        props: ['defaultOpen', 'open'],
+        subComponents: ['Sidebar', 'SidebarHeader', 'SidebarContent', 'SidebarFooter', 'SidebarGroup', 'SidebarGroupLabel', 'SidebarMenu', 'SidebarMenuItem', 'SidebarMenuButton', 'SidebarTrigger', 'SidebarSeparator', 'SidebarInset'],
+        examples: ['<SidebarProvider><Sidebar>...</Sidebar><SidebarInset>Page</SidebarInset></SidebarProvider>']
+    },
+    {
+        name: 'Sidebar',
+        category: 'layout',
+        description: 'Collapsible sidebar panel that sits inside a SidebarProvider',
+        props: ['side', 'variant', 'collapsible'],
+        examples: ['<Sidebar><SidebarContent>...</SidebarContent></Sidebar>']
+    },
+    {
+        name: 'SidebarTrigger',
+        category: 'layout',
+        description: 'Button that toggles sidebar open/collapsed state',
+        props: [],
+        examples: ['<SidebarTrigger />']
+    },
+    {
+        name: 'SidebarInset',
+        category: 'layout',
+        description: 'Main content wrapper that adjusts its width when the sidebar expands or collapses',
+        props: [],
+        examples: ['<SidebarInset>Main page content</SidebarInset>']
+    },
+    // ─── Forms ───────────────────────────────────────────────────
+    {
+        name: 'Button',
+        category: 'forms',
+        description: 'Interactive button with multiple variants, sizes, and optional icon slots',
+        props: ['variant', 'size', 'disabled', 'asChild'],
+        examples: ['<Button>Click me</Button>', '<Button variant="outline" size="sm">Small</Button>']
+    },
+    {
+        name: 'Input',
+        category: 'forms',
+        description: 'Single-line text input with v-model support and built-in validation states',
+        props: ['type', 'placeholder', 'disabled', 'modelValue'],
+        examples: ['<Input v-model="name" placeholder="Enter name" />']
+    },
+    {
+        name: 'Textarea',
+        category: 'forms',
+        description: 'Multi-line text input with auto-resize support',
+        props: ['placeholder', 'disabled', 'modelValue', 'rows'],
+        examples: ['<Textarea v-model="message" placeholder="Type here..." />']
+    },
+    {
+        name: 'Checkbox',
+        category: 'forms',
+        description: 'Checkbox input with indeterminate state support',
+        props: ['modelValue', 'disabled', 'indeterminate'],
+        examples: ['<Checkbox v-model="checked" />']
+    },
+    {
+        name: 'Switch',
+        category: 'forms',
+        description: 'Toggle switch for boolean on/off values',
+        props: ['checked', 'disabled'],
+        examples: ['<Switch v-model:checked="enabled" />']
+    },
+    {
+        name: 'Select',
+        category: 'forms',
+        description: 'Styled dropdown select with search, groups, and keyboard navigation',
+        props: ['modelValue', 'disabled', 'placeholder'],
+        subComponents: ['SelectTrigger', 'SelectValue', 'SelectContent', 'SelectItem', 'SelectGroup', 'SelectLabel', 'SelectSeparator', 'SelectScrollUpButton', 'SelectScrollDownButton'],
+        examples: ['<Select v-model="value"><SelectTrigger><SelectValue placeholder="Pick..." /></SelectTrigger><SelectContent><SelectItem value="a">A</SelectItem></SelectContent></Select>']
+    },
+    {
+        name: 'RadioGroup',
+        category: 'forms',
+        description: 'Group of mutually exclusive radio options',
+        props: ['modelValue', 'disabled'],
+        subComponents: ['RadioGroupItem'],
+        examples: ['<RadioGroup v-model="choice"><RadioGroupItem value="a" /><RadioGroupItem value="b" /></RadioGroup>']
+    },
+    {
+        name: 'Slider',
+        category: 'forms',
+        description: 'Range slider for selecting numeric values within a min/max range',
+        props: ['modelValue', 'min', 'max', 'step', 'disabled'],
+        examples: ['<Slider v-model="value" :max="100" :step="1" />']
+    },
+    {
+        name: 'Label',
+        category: 'forms',
+        description: 'Accessible label element that pairs with form controls',
+        props: ['for'],
+        examples: ['<Label for="email">Email</Label>']
+    },
+    {
+        name: 'Progress',
+        category: 'forms',
+        description: 'Determinate or indeterminate progress bar',
+        props: ['modelValue', 'max'],
+        examples: ['<Progress :model-value="60" />']
+    },
+    {
+        name: 'MultiSelect',
+        category: 'forms',
+        description: 'Multi-value select with tags and search filtering',
+        props: ['modelValue', 'options', 'placeholder'],
+        subComponents: ['MultiSelectItem'],
+        examples: ['<MultiSelect v-model="selected" :options="items" />']
+    },
+    {
+        name: 'TimePicker',
+        category: 'forms',
+        description: 'Time input with segmented hours, minutes, and optional seconds',
+        props: ['modelValue', 'hourCycle'],
+        subComponents: ['TimePickerSegment'],
+        examples: ['<TimePicker v-model="time" />']
+    },
+    {
+        name: 'DateRangePicker',
+        category: 'forms',
+        description: 'Dual-calendar date range selector with presets support',
+        props: ['modelValue', 'placeholder'],
+        examples: ['<DateRangePicker v-model="range" />']
+    },
+    {
+        name: 'DateTimePicker',
+        category: 'forms',
+        description: 'Combined date and time picker in a single control',
+        props: ['modelValue'],
+        examples: ['<DateTimePicker v-model="datetime" />']
+    },
+    {
+        name: 'NativeSelect',
+        category: 'forms',
+        description: 'Styled wrapper around the native HTML select element for simple use cases',
+        props: ['modelValue', 'options', 'placeholder'],
+        examples: ['<NativeSelect v-model="val" :options="options" />']
+    },
+    {
+        name: 'InputGroup',
+        category: 'forms',
+        description: 'Groups an input with leading/trailing addons (icons, text, buttons)',
+        props: [],
+        subComponents: ['InputGroupAddon', 'InputGroupInput'],
+        examples: ['<InputGroup><InputGroupAddon>$</InputGroupAddon><InputGroupInput placeholder="Amount" /></InputGroup>']
+    },
+    {
+        name: 'InputOTP',
+        category: 'forms',
+        description: 'One-time-password input with individual character slots',
+        props: ['modelValue', 'maxLength'],
+        subComponents: ['InputOTPGroup', 'InputOTPSlot', 'InputOTPSeparator'],
+        examples: ['<InputOTP v-model="code" :max-length="6"><InputOTPGroup><InputOTPSlot :index="0" />...</InputOTPGroup></InputOTP>']
+    },
+    {
+        name: 'Field',
+        category: 'forms',
+        description: 'Form field wrapper that composes label, description, control, and error message',
+        props: ['name'],
+        subComponents: ['FieldLabel', 'FieldDescription', 'FieldError'],
+        examples: ['<Field><FieldLabel>Email</FieldLabel><Input /><FieldError>Required</FieldError></Field>']
+    },
+    {
+        name: 'ButtonGroup',
+        category: 'forms',
+        description: 'Visually groups related buttons with shared border radius',
+        props: [],
+        examples: ['<ButtonGroup><Button>A</Button><Button>B</Button></ButtonGroup>']
+    },
+    // ─── Data Display ────────────────────────────────────────────
+    {
+        name: 'Card',
+        category: 'data-display',
+        description: 'Elevated container for grouping related content with header and footer slots',
+        props: ['elevation'],
+        subComponents: ['CardHeader', 'CardTitle', 'CardDescription', 'CardContent', 'CardFooter'],
+        examples: ['<Card><CardHeader><CardTitle>Title</CardTitle></CardHeader><CardContent>Body</CardContent></Card>']
+    },
+    {
+        name: 'Avatar',
+        category: 'data-display',
+        description: 'User avatar with image source and text fallback',
+        props: [],
+        subComponents: ['AvatarImage', 'AvatarFallback'],
+        examples: ['<Avatar><AvatarImage src="/photo.jpg" /><AvatarFallback>JD</AvatarFallback></Avatar>']
+    },
+    {
+        name: 'Badge',
+        category: 'data-display',
+        description: 'Small status label with color variants for tags, counts, and statuses',
+        props: ['variant'],
+        examples: ['<Badge>New</Badge>', '<Badge variant="destructive">Error</Badge>']
+    },
+    {
+        name: 'Separator',
+        category: 'data-display',
+        description: 'Visual divider line for separating content sections',
+        props: ['orientation', 'decorative'],
+        examples: ['<Separator />', '<Separator orientation="vertical" />']
+    },
+    {
+        name: 'Table',
+        category: 'data-display',
+        description: 'Semantic HTML table with styled header, body, footer, and cell components',
+        props: [],
+        subComponents: ['TableHeader', 'TableBody', 'TableFooter', 'TableRow', 'TableHead', 'TableCell', 'TableCaption'],
+        examples: ['<Table><TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Alice</TableCell></TableRow></TableBody></Table>']
+    },
+    {
+        name: 'DataTable',
+        category: 'data-display',
+        description: 'Full-featured data table with sorting, filtering, pagination, and column visibility',
+        props: ['columns', 'data', 'pagination', 'sorting'],
+        examples: ['<DataTable :columns="columns" :data="rows" />']
+    },
+    {
+        name: 'Accordion',
+        category: 'data-display',
+        description: 'Vertically stacked sections that expand/collapse to reveal content',
+        props: ['type', 'collapsible', 'modelValue'],
+        subComponents: ['AccordionItem', 'AccordionTrigger', 'AccordionContent'],
+        examples: ['<Accordion type="single" collapsible><AccordionItem value="a"><AccordionTrigger>Section</AccordionTrigger><AccordionContent>Details</AccordionContent></AccordionItem></Accordion>']
+    },
+    {
+        name: 'Collapsible',
+        category: 'data-display',
+        description: 'Simple expand/collapse container controlled by a trigger',
+        props: ['open'],
+        subComponents: ['CollapsibleTrigger', 'CollapsibleContent'],
+        examples: ['<Collapsible><CollapsibleTrigger>Toggle</CollapsibleTrigger><CollapsibleContent>Hidden content</CollapsibleContent></Collapsible>']
+    },
+    {
+        name: 'Tabs',
+        category: 'data-display',
+        description: 'Tabbed interface for switching between content panels',
+        props: ['modelValue', 'defaultValue'],
+        subComponents: ['TabsList', 'TabsTrigger', 'TabsContent'],
+        examples: ['<Tabs default-value="tab1"><TabsList><TabsTrigger value="tab1">Tab 1</TabsTrigger></TabsList><TabsContent value="tab1">Content</TabsContent></Tabs>']
+    },
+    {
+        name: 'Calendar',
+        category: 'data-display',
+        description: 'Date calendar grid with month/year navigation and date selection',
+        props: ['modelValue', 'locale'],
+        subComponents: ['CalendarCell', 'CalendarCellTrigger', 'CalendarGrid', 'CalendarGridBody', 'CalendarGridHead', 'CalendarGridRow', 'CalendarHeadCell', 'CalendarHeader', 'CalendarHeading', 'CalendarNext', 'CalendarPrev'],
+        examples: ['<Calendar v-model="date" />']
+    },
+    {
+        name: 'Carousel',
+        category: 'data-display',
+        description: 'Horizontal content carousel with previous/next navigation',
+        props: ['orientation', 'opts'],
+        subComponents: ['CarouselContent', 'CarouselItem', 'CarouselPrevious', 'CarouselNext'],
+        examples: ['<Carousel><CarouselContent><CarouselItem>Slide 1</CarouselItem></CarouselContent><CarouselPrevious /><CarouselNext /></Carousel>']
+    },
+    {
+        name: 'Pagination',
+        category: 'data-display',
+        description: 'Page navigation with first, previous, numbered, next, and last controls',
+        props: ['total', 'itemsPerPage', 'page'],
+        subComponents: ['PaginationContent', 'PaginationItem', 'PaginationLink', 'PaginationFirst', 'PaginationPrev', 'PaginationNext', 'PaginationLast', 'PaginationEllipsis'],
+        examples: ['<Pagination :total="100" :items-per-page="10" :page="1" />']
+    },
+    {
+        name: 'Skeleton',
+        category: 'data-display',
+        description: 'Placeholder loading animation that mimics content shape',
+        props: ['class'],
+        examples: ['<Skeleton class="h-4 w-[250px]" />']
+    },
+    {
+        name: 'Empty',
+        category: 'data-display',
+        description: 'Empty state placeholder with icon, title, and description slots',
+        props: [],
+        subComponents: ['EmptyIcon', 'EmptyTitle', 'EmptyDescription'],
+        examples: ['<Empty><EmptyIcon /><EmptyTitle>No results</EmptyTitle><EmptyDescription>Try a different search.</EmptyDescription></Empty>']
+    },
+    {
+        name: 'Kbd',
+        category: 'data-display',
+        description: 'Keyboard shortcut indicator styled as a key cap',
+        props: [],
+        examples: ['<Kbd>Ctrl+K</Kbd>']
+    },
+    {
+        name: 'Typography',
+        category: 'data-display',
+        description: 'Semantic typography primitives for headings, paragraphs, and text styles',
+        props: [],
+        subComponents: ['TypographyH1', 'TypographyH2', 'TypographyH3', 'TypographyH4', 'TypographyP', 'TypographyBlockquote', 'TypographyInlineCode', 'TypographyLead', 'TypographyLarge', 'TypographySmall', 'TypographyMuted'],
+        examples: ['<TypographyH1>Heading</TypographyH1>', '<TypographyP>Paragraph text</TypographyP>']
+    },
+    {
+        name: 'Alert',
+        category: 'data-display',
+        description: 'Inline alert banner with variant-based styling for info, success, warning, and error',
+        props: ['variant'],
+        subComponents: ['AlertTitle', 'AlertDescription'],
+        examples: ['<Alert variant="destructive"><AlertTitle>Error</AlertTitle><AlertDescription>Something went wrong.</AlertDescription></Alert>']
+    },
+    {
+        name: 'FeatureCard',
+        category: 'data-display',
+        description: 'Pre-composed card for showcasing a feature with icon, title, and description',
+        props: ['icon', 'title', 'description'],
+        examples: ['<FeatureCard icon="Zap" title="Fast" description="Blazing performance" />']
+    },
+    {
+        name: 'StatsCard',
+        category: 'data-display',
+        description: 'Pre-composed card for displaying a metric with label, value, and trend indicator',
+        props: ['label', 'value', 'trend'],
+        examples: ['<StatsCard label="Revenue" value="$12,345" trend="+12%" />']
+    },
+    // ─── Overlays ────────────────────────────────────────────────
+    {
+        name: 'Dialog',
+        category: 'overlays',
+        description: 'Modal dialog with overlay, triggered by a child element',
+        props: ['open'],
+        subComponents: ['DialogTrigger', 'DialogPortal', 'DialogOverlay', 'DialogContent', 'DialogHeader', 'DialogFooter', 'DialogTitle', 'DialogDescription', 'DialogClose'],
+        examples: ['<Dialog><DialogTrigger><Button>Open</Button></DialogTrigger><DialogContent><DialogHeader><DialogTitle>Title</DialogTitle></DialogHeader></DialogContent></Dialog>']
+    },
+    {
+        name: 'Modal',
+        category: 'overlays',
+        description: 'Convenience wrapper around Dialog with simplified API and built-in close button',
+        props: ['open'],
+        subComponents: ['ModalTrigger', 'ModalContent', 'ModalClose', 'ModalHeader', 'ModalFooter', 'ModalTitle', 'ModalDescription'],
+        examples: ['<Modal><ModalTrigger><Button>Open</Button></ModalTrigger><ModalContent><ModalHeader><ModalTitle>Title</ModalTitle></ModalHeader></ModalContent></Modal>']
+    },
+    {
+        name: 'Sheet',
+        category: 'overlays',
+        description: 'Slide-out panel from any edge of the screen',
+        props: ['open', 'side'],
+        subComponents: ['SheetTrigger', 'SheetClose', 'SheetContent', 'SheetHeader', 'SheetFooter', 'SheetTitle', 'SheetDescription'],
+        examples: ['<Sheet><SheetTrigger><Button>Open</Button></SheetTrigger><SheetContent><SheetHeader><SheetTitle>Panel</SheetTitle></SheetHeader></SheetContent></Sheet>']
+    },
+    {
+        name: 'Drawer',
+        category: 'overlays',
+        description: 'Bottom sheet drawer with drag-to-dismiss interaction',
+        props: ['open'],
+        subComponents: ['DrawerTrigger', 'DrawerClose', 'DrawerContent', 'DrawerHeader', 'DrawerFooter', 'DrawerTitle', 'DrawerDescription'],
+        examples: ['<Drawer><DrawerTrigger><Button>Open</Button></DrawerTrigger><DrawerContent><DrawerHeader><DrawerTitle>Drawer</DrawerTitle></DrawerHeader></DrawerContent></Drawer>']
+    },
+    {
+        name: 'AlertDialog',
+        category: 'overlays',
+        description: 'Confirmation dialog that requires explicit user action before proceeding',
+        props: ['open'],
+        subComponents: ['AlertDialogTrigger', 'AlertDialogPortal', 'AlertDialogOverlay', 'AlertDialogContent', 'AlertDialogHeader', 'AlertDialogFooter', 'AlertDialogTitle', 'AlertDialogDescription', 'AlertDialogAction', 'AlertDialogCancel'],
+        examples: ['<AlertDialog><AlertDialogTrigger><Button>Delete</Button></AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Confirm</AlertDialogTitle></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>Continue</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>']
+    },
+    {
+        name: 'Tooltip',
+        category: 'overlays',
+        description: 'Popup hint shown on hover or focus to describe an element',
+        props: ['delayDuration'],
+        subComponents: ['TooltipProvider', 'TooltipTrigger', 'TooltipContent'],
+        examples: ['<TooltipProvider><Tooltip><TooltipTrigger>Hover me</TooltipTrigger><TooltipContent>Hint</TooltipContent></Tooltip></TooltipProvider>']
+    },
+    {
+        name: 'Popover',
+        category: 'overlays',
+        description: 'Floating content panel anchored to a trigger element',
+        props: ['open'],
+        subComponents: ['PopoverTrigger', 'PopoverContent'],
+        examples: ['<Popover><PopoverTrigger><Button>Open</Button></PopoverTrigger><PopoverContent>Popover body</PopoverContent></Popover>']
+    },
+    {
+        name: 'DropdownMenu',
+        category: 'overlays',
+        description: 'Context-aware dropdown menu with items, checkboxes, radio groups, and sub-menus',
+        props: [],
+        subComponents: ['DropdownMenuTrigger', 'DropdownMenuContent', 'DropdownMenuItem', 'DropdownMenuCheckboxItem', 'DropdownMenuRadioItem', 'DropdownMenuRadioGroup', 'DropdownMenuSub', 'DropdownMenuSubTrigger', 'DropdownMenuSubContent', 'DropdownMenuSeparator', 'DropdownMenuLabel', 'DropdownMenuGroup', 'DropdownMenuShortcut'],
+        examples: ['<DropdownMenu><DropdownMenuTrigger><Button>Menu</Button></DropdownMenuTrigger><DropdownMenuContent><DropdownMenuItem>Action</DropdownMenuItem></DropdownMenuContent></DropdownMenu>']
+    },
+    {
+        name: 'ContextMenu',
+        category: 'overlays',
+        description: 'Right-click context menu with items, checkboxes, and sub-menus',
+        props: [],
+        subComponents: ['ContextMenuTrigger', 'ContextMenuContent', 'ContextMenuItem', 'ContextMenuCheckboxItem', 'ContextMenuRadioItem', 'ContextMenuRadioGroup', 'ContextMenuSub', 'ContextMenuSubTrigger', 'ContextMenuSubContent', 'ContextMenuSeparator', 'ContextMenuLabel', 'ContextMenuGroup', 'ContextMenuShortcut'],
+        examples: ['<ContextMenu><ContextMenuTrigger>Right-click here</ContextMenuTrigger><ContextMenuContent><ContextMenuItem>Action</ContextMenuItem></ContextMenuContent></ContextMenu>']
+    },
+    {
+        name: 'HoverCard',
+        category: 'overlays',
+        description: 'Rich content card that appears when hovering over a trigger',
+        props: [],
+        subComponents: ['HoverCardTrigger', 'HoverCardContent'],
+        examples: ['<HoverCard><HoverCardTrigger>@user</HoverCardTrigger><HoverCardContent>User info</HoverCardContent></HoverCard>']
+    },
+    {
+        name: 'Command',
+        category: 'overlays',
+        description: 'Command palette / combobox for searching and selecting actions',
+        props: [],
+        subComponents: ['CommandInput', 'CommandList', 'CommandEmpty', 'CommandGroup', 'CommandItem', 'CommandSeparator', 'CommandLabel', 'CommandDialog'],
+        examples: ['<Command><CommandInput placeholder="Search..." /><CommandList><CommandGroup><CommandItem>Action</CommandItem></CommandGroup></CommandList></Command>']
+    },
+    {
+        name: 'Toast',
+        category: 'overlays',
+        description: 'Temporary notification message with title, description, and action slots',
+        props: ['variant'],
+        subComponents: ['ToastViewport', 'ToastTitle', 'ToastDescription', 'ToastAction', 'ToastClose', 'ToastToaster'],
+        examples: ['useToast().toast({ title: "Saved", description: "Your changes have been saved." })']
+    },
+    // ─── Navigation ──────────────────────────────────────────────
+    {
+        name: 'Breadcrumb',
+        category: 'navigation',
+        description: 'Hierarchical breadcrumb trail showing the current page path',
+        props: [],
+        subComponents: ['BreadcrumbList', 'BreadcrumbItem', 'BreadcrumbLink', 'BreadcrumbPage', 'BreadcrumbSeparator', 'BreadcrumbEllipsis'],
+        examples: ['<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Current</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>']
+    },
+    {
+        name: 'NavigationMenu',
+        category: 'navigation',
+        description: 'Horizontal navigation bar with dropdown content panels and active indicators',
+        props: [],
+        subComponents: ['NavigationMenuList', 'NavigationMenuItem', 'NavigationMenuTrigger', 'NavigationMenuContent', 'NavigationMenuLink', 'NavigationMenuViewport', 'NavigationMenuIndicator'],
+        examples: ['<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Features</NavigationMenuTrigger><NavigationMenuContent>Links...</NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>']
+    },
+    {
+        name: 'Menubar',
+        category: 'navigation',
+        description: 'Desktop-style horizontal menu bar with dropdown sub-menus',
+        props: [],
+        subComponents: ['MenubarMenu', 'MenubarTrigger', 'MenubarContent', 'MenubarItem', 'MenubarCheckboxItem', 'MenubarRadioItem', 'MenubarRadioGroup', 'MenubarSub', 'MenubarSubTrigger', 'MenubarSubContent', 'MenubarSeparator', 'MenubarLabel', 'MenubarGroup', 'MenubarShortcut'],
+        examples: ['<Menubar><MenubarMenu><MenubarTrigger>File</MenubarTrigger><MenubarContent><MenubarItem>New</MenubarItem></MenubarContent></MenubarMenu></Menubar>']
+    },
+    // ─── Utility ─────────────────────────────────────────────────
+    {
+        name: 'Toggle',
+        category: 'utility',
+        description: 'Two-state toggle button (pressed/not pressed) with variant styling',
+        props: ['pressed', 'variant', 'size', 'disabled'],
+        examples: ['<Toggle v-model:pressed="bold"><Bold /></Toggle>']
+    },
+    {
+        name: 'ToggleGroup',
+        category: 'utility',
+        description: 'Groups multiple Toggle buttons with single or multiple selection',
+        props: ['type', 'modelValue'],
+        subComponents: ['ToggleGroupItem'],
+        examples: ['<ToggleGroup type="single" v-model="alignment"><ToggleGroupItem value="left">Left</ToggleGroupItem></ToggleGroup>']
+    },
+    {
+        name: 'ScrollArea',
+        category: 'utility',
+        description: 'Custom scrollable container with styled scrollbars',
+        props: ['class'],
+        subComponents: ['ScrollBar'],
+        examples: ['<ScrollArea class="h-[200px]">Long content...</ScrollArea>']
+    },
+    {
+        name: 'Resizable',
+        category: 'utility',
+        description: 'Resizable panel layout with draggable dividers',
+        props: ['direction'],
+        subComponents: ['ResizablePanelGroup', 'ResizablePanel', 'ResizableHandle'],
+        examples: ['<ResizablePanelGroup direction="horizontal"><ResizablePanel>Left</ResizablePanel><ResizableHandle /><ResizablePanel>Right</ResizablePanel></ResizablePanelGroup>']
+    },
+    {
+        name: 'AspectRatio',
+        category: 'utility',
+        description: 'Container that maintains a fixed aspect ratio for its content',
+        props: ['ratio'],
+        examples: ['<AspectRatio :ratio="16/9"><img src="/photo.jpg" /></AspectRatio>']
+    },
+    {
+        name: 'Spinner',
+        category: 'utility',
+        description: 'Animated loading spinner indicator',
+        props: ['size'],
+        examples: ['<Spinner />', '<Spinner size="lg" />']
+    },
+    {
+        name: 'Icon',
+        category: 'utility',
+        description: 'Dynamic Lucide icon renderer that accepts an icon name string',
+        props: ['name', 'size', 'strokeWidth'],
+        examples: ['<Icon name="Home" />', '<Icon name="Settings" :size="24" />']
+    },
+    {
+        name: 'CodePreview',
+        category: 'utility',
+        description: 'Code block with syntax highlighting and copy-to-clipboard button',
+        props: ['code', 'language'],
+        examples: ['<CodePreview code="const x = 1" language="typescript" />']
+    },
+    {
+        name: 'ThemeSelector',
+        category: 'utility',
+        description: 'Dropdown selector for switching between predefined color themes',
+        props: ['themes', 'modelValue'],
+        examples: ['<ThemeSelector v-model="theme" :themes="themes" />']
+    },
+    {
+        name: 'Direction',
+        category: 'utility',
+        description: 'Provider that sets text direction (LTR/RTL) for child components',
+        props: ['dir'],
+        examples: ['<Direction dir="rtl">RTL content</Direction>']
+    },
+    {
+        name: 'Toaster',
+        category: 'utility',
+        description: 'Sonner-based toast notification container; place once at the app root',
+        props: ['position', 'richColors'],
+        examples: ['<Toaster />']
+    }
+];
+// Theme tokens
+const themeTokens = {
+    light: {
+        colors: {
+            background: { value: 'hsl(0 0% 96%)', hex: '#F5F5F5', description: 'Page background' },
+            foreground: { value: 'hsl(0 0% 9%)', hex: '#171717', description: 'Text color' },
+            card: { value: 'hsl(0 0% 100%)', hex: '#FFFFFF', description: 'Card background' },
+            primary: { value: 'hsl(0 0% 9%)', hex: '#171717', description: 'Primary buttons' },
+            secondary: { value: 'hsl(0 0% 93%)', hex: '#EEEEEE', description: 'Secondary buttons' },
+            muted: { value: 'hsl(0 0% 93%)', hex: '#EEEEEE', description: 'Muted backgrounds' },
+            border: { value: 'hsl(0 0% 90%)', hex: '#E5E5E5', description: 'Borders' },
+            destructive: { value: 'hsl(0 84% 60%)', hex: '#EF4444', description: 'Error states' },
+            success: { value: 'hsl(142 76% 36%)', hex: '#16A34A', description: 'Success states' }
+        },
+        radius: { default: '1rem', sm: '0.75rem', lg: '1.25rem' },
+        spacing: {
+            '0': '0px', '1': '4px', '2': '8px', '3': '12px', '4': '16px',
+            '5': '20px', '6': '24px', '8': '32px', '10': '40px', '12': '48px'
+        }
+    },
+    dark: {
+        colors: {
+            background: { value: 'hsl(0 0% 7%)', hex: '#121212', description: 'Page background' },
+            foreground: { value: 'hsl(0 0% 98%)', hex: '#FAFAFA', description: 'Text color' },
+            card: { value: 'hsl(0 0% 10%)', hex: '#1A1A1A', description: 'Card background' },
+            primary: { value: 'hsl(0 0% 98%)', hex: '#FAFAFA', description: 'Primary buttons' },
+            secondary: { value: 'hsl(0 0% 15%)', hex: '#262626', description: 'Secondary buttons' },
+            muted: { value: 'hsl(0 0% 15%)', hex: '#262626', description: 'Muted backgrounds' },
+            border: { value: 'hsl(0 0% 20%)', hex: '#333333', description: 'Borders' },
+            destructive: { value: 'hsl(0 72% 51%)', hex: '#EF4444', description: 'Error states' },
+            success: { value: 'hsl(142 71% 45%)', hex: '#22C55E', description: 'Success states' }
+        }
+    }
+};
+// ─── Known component names (flat set for validation) ───────────
+const allComponentNames = new Set();
+for (const comp of components) {
+    allComponentNames.add(comp.name);
+    if (comp.subComponents) {
+        for (const sub of comp.subComponents) {
+            allComponentNames.add(sub);
+        }
+    }
+}
+// Known variant values per component for validation
+const knownVariants = {
+    Button: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
+    Badge: ['default', 'secondary', 'destructive', 'outline'],
+    Alert: ['default', 'destructive'],
+    Toggle: ['default', 'outline'],
+};
+const knownSizes = {
+    Button: ['default', 'sm', 'lg', 'icon'],
+    Spinner: ['default', 'sm', 'lg'],
+};
+// ─── Tool definitions ──────────────────────────────────────────
+const tools = [
+    {
+        name: 'search_components',
+        description: 'Search for Spavn UI components by name or category',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                query: {
+                    type: 'string',
+                    description: 'Search term (e.g., "button", "form", "input", "overlay")'
+                },
+                category: {
+                    type: 'string',
+                    description: 'Filter by category',
+                    enum: ['layout', 'forms', 'data-display', 'overlays', 'navigation', 'utility']
+                }
+            },
+            required: ['query']
+        }
+    },
+    {
+        name: 'get_component_api',
+        description: 'Get detailed API documentation for a specific component',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                component: {
+                    type: 'string',
+                    description: 'Component name (e.g., "Button", "Dialog")'
+                }
+            },
+            required: ['component']
+        }
+    },
+    {
+        name: 'generate_component_code',
+        description: 'Generate Vue code for using a component',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                component: {
+                    type: 'string',
+                    description: 'Component name'
+                },
+                props: {
+                    type: 'object',
+                    description: 'Props to set'
+                },
+                includeSlots: {
+                    type: 'boolean',
+                    description: 'Include slot examples'
+                }
+            },
+            required: ['component']
+        }
+    },
+    {
+        name: 'get_theme_tokens',
+        description: 'Get design tokens (colors, spacing, etc.)',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                mode: {
+                    type: 'string',
+                    description: 'Theme mode',
+                    enum: ['light', 'dark', 'all']
+                },
+                category: {
+                    type: 'string',
+                    description: 'Token category',
+                    enum: ['colors', 'spacing', 'radius', 'all']
+                }
+            }
+        }
+    },
+    {
+        name: 'generate_theme',
+        description: 'Generate a custom color theme with CSS variables for light and dark modes based on a primary color',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                name: {
+                    type: 'string',
+                    description: 'Theme name (e.g., "ocean", "forest")'
+                },
+                primary: {
+                    type: 'string',
+                    description: 'Primary color in hex format (e.g., "#3B82F6")'
+                },
+                background: {
+                    type: 'string',
+                    description: 'Optional background color in hex format'
+                },
+                mode: {
+                    type: 'string',
+                    description: 'Generate for light, dark, or both',
+                    enum: ['light', 'dark', 'both']
+                }
+            },
+            required: ['primary']
+        }
+    },
+    {
+        name: 'validate_component_usage',
+        description: 'Validate a Vue template snippet for correct Spavn UI component imports and prop usage',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                code: {
+                    type: 'string',
+                    description: 'Vue template or SFC code to validate'
+                }
+            },
+            required: ['code']
+        }
+    },
+    {
+        name: 'get_installation_guide',
+        description: 'Get installation instructions',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                packageManager: {
+                    type: 'string',
+                    enum: ['npm', 'yarn', 'pnpm', 'bun']
+                },
+                framework: {
+                    type: 'string',
+                    enum: ['vite', 'nuxt', 'astro', 'vue']
+                }
+            }
+        }
+    }
+];
+// ─── Tool handlers ─────────────────────────────────────────────
+async function handleSearchComponents(args) {
+    const { query, category } = args;
+    let results = components.filter(c => c.name.toLowerCase().includes(query.toLowerCase()) ||
+        c.description.toLowerCase().includes(query.toLowerCase()) ||
+        c.category.toLowerCase().includes(query.toLowerCase()) ||
+        (c.subComponents && c.subComponents.some(s => s.toLowerCase().includes(query.toLowerCase()))));
+    if (category) {
+        results = results.filter(c => c.category === category);
+    }
+    return {
+        content: [
+            {
+                type: 'text',
+                text: JSON.stringify({
+                    count: results.length,
+                    components: results.map(c => ({
+                        name: c.name,
+                        category: c.category,
+                        description: c.description,
+                        subComponents: c.subComponents || [],
+                        props: c.props
+                    }))
+                }, null, 2)
+            }
+        ]
+    };
+}
+async function handleGetComponentApi(args) {
+    const { component } = args;
+    const comp = components.find(c => c.name.toLowerCase() === component.toLowerCase());
+    if (!comp) {
+        // Try to find as a sub-component
+        const parent = components.find(c => c.subComponents && c.subComponents.some(s => s.toLowerCase() === component.toLowerCase()));
+        if (parent) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: JSON.stringify({
+                            name: component,
+                            isSubComponentOf: parent.name,
+                            category: parent.category,
+                            description: `Sub-component of ${parent.name}. Import alongside the parent component.`,
+                            import: `import { ${parent.name}, ${component} } from '@spavn/ui'`,
+                            parentComponent: {
+                                name: parent.name,
+                                description: parent.description,
+                                allSubComponents: parent.subComponents
+                            }
+                        }, null, 2)
+                    }
+                ]
+            };
+        }
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Component "${component}" not found. Use search_components to find available components.`
+                }
+            ],
+            isError: true
+        };
+    }
+    return {
+        content: [
+            {
+                type: 'text',
+                text: JSON.stringify({
+                    name: comp.name,
+                    category: comp.category,
+                    description: comp.description,
+                    subComponents: comp.subComponents || [],
+                    props: comp.props,
+                    examples: comp.examples,
+                    import: `import { ${comp.name}${comp.subComponents ? ', ' + comp.subComponents.join(', ') : ''} } from '@spavn/ui'`
+                }, null, 2)
+            }
+        ]
+    };
+}
+async function handleGenerateComponentCode(args) {
+    const { component, props = {}, includeSlots = false } = args;
+    const comp = components.find(c => c.name.toLowerCase() === component.toLowerCase());
+    if (!comp) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Component "${component}" not found.`
+                }
+            ],
+            isError: true
+        };
+    }
+    const propString = Object.entries(props)
+        .map(([key, value]) => {
+        if (typeof value === 'boolean')
+            return value ? key : '';
+        if (typeof value === 'number')
+            return `:${key}="${value}"`;
+        return `${key}="${value}"`;
+    })
+        .filter(Boolean)
+        .join(' ');
+    let code = '';
+    if (comp.subComponents && comp.subComponents.length > 0) {
+        code = `<${comp.name}>
+  ${comp.subComponents.includes(comp.name + 'Trigger') ? `<${comp.name}Trigger>
+    <Button>Open</Button>
+  </${comp.name}Trigger>` : ''}
+  ${comp.subComponents.includes(comp.name + 'Content') ? `<${comp.name}Content${propString ? ' ' + propString : ''}>
+    Content here
+  </${comp.name}Content>` : `<${comp.name}${propString ? ' ' + propString : ''} />`}
+</${comp.name}>`;
+    }
+    else {
+        code = `<${comp.name}${propString ? ' ' + propString : ''} />`;
+    }
+    if (includeSlots) {
+        code = code.replace('/>', '>\n  Slot content\n</' + comp.name + '>');
+    }
+    // Build import statement
+    const imports = [comp.name, ...(comp.subComponents || [])];
+    const importLine = `import { ${imports.join(', ')} } from '@spavn/ui'`;
+    return {
+        content: [
+            {
+                type: 'text',
+                text: `\`\`\`vue\n<script setup>\n${importLine}\n</script>\n\n<template>\n${code.trim()}\n</template>\n\`\`\``
+            }
+        ]
+    };
+}
+async function handleGetThemeTokens(args) {
+    const { mode = 'all', category = 'all' } = args;
+    let tokens = {};
+    if (mode === 'all' || mode === 'light') {
+        tokens.light = {};
+        if (category === 'all' || category === 'colors') {
+            tokens.light.colors = themeTokens.light.colors;
+        }
+        if (category === 'all' || category === 'spacing') {
+            tokens.light.spacing = themeTokens.light.spacing;
+        }
+        if (category === 'all' || category === 'radius') {
+            tokens.light.radius = themeTokens.light.radius;
+        }
+    }
+    if (mode === 'all' || mode === 'dark') {
+        tokens.dark = {};
+        if (category === 'all' || category === 'colors') {
+            tokens.dark.colors = themeTokens.dark.colors;
+        }
+    }
+    return {
+        content: [
+            {
+                type: 'text',
+                text: JSON.stringify(tokens, null, 2)
+            }
+        ]
+    };
+}
+// ─── Helper: hex to HSL ────────────────────────────────────────
+function hexToHsl(hex) {
+    hex = hex.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100)
+    };
+}
+function hslString(h, s, l) {
+    return `hsl(${h} ${s}% ${l}%)`;
+}
+async function handleGenerateTheme(args) {
+    const { name = 'custom', primary, background, mode = 'both' } = args;
+    const pHsl = hexToHsl(primary);
+    // Derive a full palette from the primary color
+    const generateMode = (isDark) => {
+        const bg = background
+            ? hexToHsl(background)
+            : isDark
+                ? { h: pHsl.h, s: Math.round(pHsl.s * 0.15), l: 7 }
+                : { h: pHsl.h, s: Math.round(pHsl.s * 0.25), l: 96 };
+        const fg = isDark
+            ? { h: pHsl.h, s: 5, l: 98 }
+            : { h: pHsl.h, s: 5, l: 9 };
+        const card = isDark
+            ? { h: bg.h, s: bg.s, l: bg.l + 3 }
+            : { h: bg.h, s: bg.s, l: 100 };
+        const muted = isDark
+            ? { h: pHsl.h, s: Math.round(pHsl.s * 0.1), l: 15 }
+            : { h: pHsl.h, s: Math.round(pHsl.s * 0.2), l: 93 };
+        const border = isDark
+            ? { h: pHsl.h, s: Math.round(pHsl.s * 0.1), l: 20 }
+            : { h: pHsl.h, s: Math.round(pHsl.s * 0.15), l: 90 };
+        const primaryFg = isDark
+            ? { h: pHsl.h, s: pHsl.s, l: Math.min(pHsl.l + 40, 98) }
+            : { h: pHsl.h, s: pHsl.s, l: pHsl.l };
+        const ring = { h: pHsl.h, s: pHsl.s, l: isDark ? pHsl.l + 10 : pHsl.l };
+        return {
+            '--background': hslString(bg.h, bg.s, bg.l),
+            '--foreground': hslString(fg.h, fg.s, fg.l),
+            '--card': hslString(card.h, card.s, card.l),
+            '--card-foreground': hslString(fg.h, fg.s, fg.l),
+            '--primary': hslString(primaryFg.h, primaryFg.s, primaryFg.l),
+            '--primary-foreground': isDark ? hslString(pHsl.h, pHsl.s, 10) : hslString(0, 0, 100),
+            '--secondary': hslString(muted.h, muted.s, muted.l),
+            '--secondary-foreground': hslString(fg.h, fg.s, fg.l),
+            '--muted': hslString(muted.h, muted.s, muted.l),
+            '--muted-foreground': hslString(fg.h, fg.s, isDark ? 65 : 45),
+            '--border': hslString(border.h, border.s, border.l),
+            '--ring': hslString(ring.h, ring.s, ring.l),
+            '--destructive': isDark ? 'hsl(0 72% 51%)' : 'hsl(0 84% 60%)',
+            '--destructive-foreground': 'hsl(0 0% 100%)',
+            '--radius': '1rem',
+        };
+    };
+    const result = { name };
+    if (mode === 'both' || mode === 'light') {
+        result.light = generateMode(false);
+    }
+    if (mode === 'both' || mode === 'dark') {
+        result.dark = generateMode(true);
+    }
+    // Generate ready-to-paste CSS
+    let css = `/* Theme: ${name} — generated from primary ${primary} */\n`;
+    if (result.light) {
+        css += ':root {\n';
+        for (const [key, value] of Object.entries(result.light)) {
+            css += `  ${key}: ${value};\n`;
+        }
+        css += '}\n\n';
+    }
+    if (result.dark) {
+        css += '.dark {\n';
+        for (const [key, value] of Object.entries(result.dark)) {
+            css += `  ${key}: ${value};\n`;
+        }
+        css += '}\n';
+    }
+    return {
+        content: [
+            {
+                type: 'text',
+                text: JSON.stringify({
+                    ...result,
+                    css,
+                    usage: 'Add the CSS to your global stylesheet or Tailwind CSS layer. Apply .dark class on <html> for dark mode.'
+                }, null, 2)
+            }
+        ]
+    };
+}
+async function handleValidateComponentUsage(args) {
+    const { code } = args;
+    const issues = [];
+    const suggestions = [];
+    // Extract component tags used in the template
+    const tagPattern = /<\/?([A-Z][A-Za-z0-9]*)/g;
+    const usedTags = new Set();
+    let match;
+    while ((match = tagPattern.exec(code)) !== null) {
+        usedTags.add(match[1]);
+    }
+    // Check each used tag against the known component database
+    const unknownTags = [];
+    const validTags = [];
+    for (const tag of usedTags) {
+        if (allComponentNames.has(tag)) {
+            validTags.push(tag);
+        }
+        else {
+            // Skip common HTML-like Vue components
+            if (!['Button'].includes(tag) && !tag.startsWith('Router') && !tag.startsWith('Transition')) {
+                unknownTags.push(tag);
+            }
+        }
+    }
+    if (unknownTags.length > 0) {
+        issues.push({
+            severity: 'warning',
+            message: `Unknown component(s): ${unknownTags.join(', ')}. These are not exported from @spavn/ui. Check spelling or verify they are custom components.`
+        });
+    }
+    // Check for sub-components used without their parent
+    for (const tag of validTags) {
+        const parent = components.find(c => c.subComponents && c.subComponents.includes(tag));
+        if (parent && !usedTags.has(parent.name)) {
+            issues.push({
+                severity: 'error',
+                message: `"${tag}" is a sub-component of "${parent.name}" but "${parent.name}" is not used in the template. Wrap it inside <${parent.name}>.`
+            });
+        }
+    }
+    // Check for incorrect variant prop values
+    const variantPattern = /variant="([^"]+)"/g;
+    while ((match = variantPattern.exec(code)) !== null) {
+        const value = match[1];
+        // Find which component this variant belongs to by looking backwards for a tag
+        const beforeMatch = code.substring(0, match.index);
+        const lastTag = beforeMatch.match(/<([A-Z][A-Za-z0-9]*)[^>]*$/);
+        if (lastTag) {
+            const compName = lastTag[1];
+            const allowed = knownVariants[compName];
+            if (allowed && !allowed.includes(value)) {
+                issues.push({
+                    severity: 'error',
+                    message: `Invalid variant="${value}" on <${compName}>. Allowed values: ${allowed.join(', ')}.`
+                });
+            }
+        }
+    }
+    // Check for incorrect size prop values
+    const sizePattern = /size="([^"]+)"/g;
+    while ((match = sizePattern.exec(code)) !== null) {
+        const value = match[1];
+        const beforeMatch = code.substring(0, match.index);
+        const lastTag = beforeMatch.match(/<([A-Z][A-Za-z0-9]*)[^>]*$/);
+        if (lastTag) {
+            const compName = lastTag[1];
+            const allowed = knownSizes[compName];
+            if (allowed && !allowed.includes(value)) {
+                issues.push({
+                    severity: 'error',
+                    message: `Invalid size="${value}" on <${compName}>. Allowed values: ${allowed.join(', ')}.`
+                });
+            }
+        }
+    }
+    // Check if <script setup> imports are present
+    const hasScriptSetup = code.includes('<script setup');
+    const hasImport = code.includes("from '@spavn/ui'") || code.includes('from "@spavn/ui"');
+    if (hasScriptSetup && validTags.length > 0 && !hasImport) {
+        issues.push({
+            severity: 'error',
+            message: `Components are used but no import from '@spavn/ui' found. Add: import { ${validTags.join(', ')} } from '@spavn/ui'`
+        });
+    }
+    // Build suggested import statement
+    if (validTags.length > 0) {
+        // Collect all needed imports (parents + sub-components)
+        const needed = new Set();
+        for (const tag of usedTags) {
+            if (allComponentNames.has(tag)) {
+                needed.add(tag);
+            }
+        }
+        suggestions.push(`import { ${[...needed].sort().join(', ')} } from '@spavn/ui'`);
+    }
+    // Check TooltipProvider
+    if (usedTags.has('Tooltip') && !usedTags.has('TooltipProvider')) {
+        issues.push({
+            severity: 'warning',
+            message: 'Tooltip requires a <TooltipProvider> ancestor. Wrap your tooltips or add it near the app root.'
+        });
+    }
+    // Check SidebarProvider
+    if (usedTags.has('Sidebar') && !usedTags.has('SidebarProvider')) {
+        issues.push({
+            severity: 'warning',
+            message: 'Sidebar requires a <SidebarProvider> ancestor. Wrap your sidebar layout with <SidebarProvider>.'
+        });
+    }
+    return {
+        content: [
+            {
+                type: 'text',
+                text: JSON.stringify({
+                    valid: issues.filter(i => i.severity === 'error').length === 0,
+                    componentsDetected: [...usedTags].filter(t => allComponentNames.has(t)),
+                    issues,
+                    suggestedImport: suggestions[0] || null
+                }, null, 2)
+            }
+        ]
+    };
+}
+async function handleGetInstallationGuide(args) {
+    const { packageManager = 'npm', framework = 'vite' } = args;
+    const installCommands = {
+        npm: 'npm install @spavn/ui',
+        yarn: 'yarn add @spavn/ui',
+        pnpm: 'pnpm add @spavn/ui',
+        bun: 'bun add @spavn/ui'
+    };
+    const frameworkNotes = {
+        vite: 'Standard Vite setup. Import styles in main.ts',
+        nuxt: 'Add to plugins/ directory or import in app.vue',
+        astro: 'Import in your layout component',
+        vue: 'Standard Vue CLI setup'
+    };
+    return {
+        content: [
+            {
+                type: 'text',
+                text: `
+## Installation
+
+### 1. Install the package
+
+\`\`\`bash
+${installCommands[packageManager]}
+\`\`\`
+
+### 2. Import styles
+
+\`\`\`typescript
+// main.ts
+import '@spavn/ui/style.css'
+\`\`\`
+
+### 3. Start using components
+
+\`\`\`vue
+<script setup>
+import { Button, Card } from '@spavn/ui'
+</script>
+
+<template>
+  <Button>Hello World</Button>
+</template>
+\`\`\`
+
+### Framework Notes
+
+${frameworkNotes[framework]}
+
+### Prerequisites
+
+- Vue 3.3+
+- Tailwind CSS 3.4+
+- TypeScript 5.0+ (recommended)
+`
+            }
+        ]
+    };
+}
+// ─── Create server ─────────────────────────────────────────────
+const server = new Server({
+    name: 'spavn-ui-mcp',
+    version: '1.1.0',
+});
+// Set up request handlers
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+    return { tools };
+});
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const { name, arguments: args } = request.params;
+    try {
+        switch (name) {
+            case 'search_components':
+                return await handleSearchComponents(args);
+            case 'get_component_api':
+                return await handleGetComponentApi(args);
+            case 'generate_component_code':
+                return await handleGenerateComponentCode(args);
+            case 'get_theme_tokens':
+                return await handleGetThemeTokens(args);
+            case 'generate_theme':
+                return await handleGenerateTheme(args);
+            case 'validate_component_usage':
+                return await handleValidateComponentUsage(args);
+            case 'get_installation_guide':
+                return await handleGetInstallationGuide(args);
+            default:
+                throw new Error(`Unknown tool: ${name}`);
+        }
+    }
+    catch (error) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error: ${error instanceof Error ? error.message : String(error)}`
+                }
+            ],
+            isError: true
+        };
+    }
+});
+// Start server
+async function main() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    console.error('Spavn UI MCP server running on stdio');
+}
+main().catch(console.error);
+//# sourceMappingURL=index.js.map