@j3m-quantum/ui 1.11.2 → 2.1.0

package/dist/cli/index.js

@@ -0,0 +1,670 @@
+#!/usr/bin/env node
+import * as fs2 from 'fs';
+import * as path2 from 'path';
+
+var CURSOR_RULES_CONTENT = `# J3M Design System Rules
+
+## Package Usage
+- This project uses @j3m-quantum/ui - a complete React component library with J3M styling
+- Import components directly: \`import { Button, Card, Input } from '@j3m-quantum/ui'\`
+- Do NOT use shadcn CLI to add components - everything is already bundled
+- Do NOT create local component copies - use the package exports
+
+## CRITICAL: Do NOT Create Components
+
+When implementing UI from Figma or any design:
+1. FIRST check if @j3m-quantum/ui has the component (see list below)
+2. Use the package component with appropriate props
+3. NEVER create new component files for existing components
+
+## CSS Import Order (Critical)
+The order in src/index.css must be:
+\`\`\`css
+@import "tailwindcss";
+@import "tw-animate-css";           /* Required for animations */
+@import "@j3m-quantum/ui/styles";   /* J3M theme and tokens */
+\`\`\`
+
+## Theme Modes (4 Modes)
+| Mode | Classes | Description |
+|------|---------|-------------|
+| Light Solid | (default) | Opaque surfaces, gray backgrounds |
+| Dark Solid | \`dark\` | Dark opaque surfaces |
+| Light Glass | \`theme-glass\` | Frosted glass on image/gradient |
+| Dark Glass | \`dark theme-glass\` | Dark frosted glass on image |
+
+### Setting Up Theme
+\`\`\`tsx
+<div className="j3m-app-bg">                    {/* Light solid */}
+<div className="dark j3m-app-bg">               {/* Dark solid */}
+<div className="theme-glass j3m-app-bg">        {/* Light glass */}
+<div className="dark theme-glass j3m-app-bg">   {/* Dark glass */}
+\`\`\`
+
+## Glass Context (Important!)
+In glass mode, cards containing interactive components need the \`glass-context\` class:
+\`\`\`tsx
+<Card className="glass-context">
+  <CardContent>
+    <Input placeholder="Name" />
+    <Button>Submit</Button>
+  </CardContent>
+</Card>
+\`\`\`
+
+## Figma Layer \u2192 Component Mapping
+
+When you see these Figma layer names, use these components:
+
+| Figma Layer Name | Import |
+|------------------|--------|
+| "Button", "CTA", "Primary Button", "Action" | \`import { Button } from '@j3m-quantum/ui'\` |
+| "Card", "Container", "Panel", "Box" | \`import { Card, CardHeader, CardContent } from '@j3m-quantum/ui'\` |
+| "Input", "Text Field", "Text Input" | \`import { Input } from '@j3m-quantum/ui'\` |
+| "Dialog", "Modal", "Popup" | \`import { Dialog, DialogContent, DialogHeader } from '@j3m-quantum/ui'\` |
+| "Sheet", "Side Panel", "Drawer" | \`import { Sheet, SheetContent } from '@j3m-quantum/ui'\` |
+| "Table", "Data Table", "Grid" | \`import { Table } from '@j3m-quantum/ui'\` |
+| "Planning Grid", "Week Table", "Supplier Matrix" | \`import { PlanningTable } from '@j3m-quantum/ui'\` |
+| "Calibration Table", "Production Grid" | \`import { CalibrationTable } from '@j3m-quantum/ui'\` |
+| "Loading View", "Delivery Grid" | \`import { SupplierWeeklyLoading } from '@j3m-quantum/ui'\` |
+| "Sidebar", "Navigation" | \`import { Sidebar, SidebarProvider } from '@j3m-quantum/ui'\` |
+| "Dropdown", "Menu" | \`import { DropdownMenu } from '@j3m-quantum/ui'\` |
+| "Select", "Picker" | \`import { Select } from '@j3m-quantum/ui'\` |
+| "Checkbox", "Check" | \`import { Checkbox } from '@j3m-quantum/ui'\` |
+| "Switch", "Toggle" | \`import { Switch } from '@j3m-quantum/ui'\` |
+| "Badge", "Tag", "Label" | \`import { Badge } from '@j3m-quantum/ui'\` |
+| "Avatar", "Profile Image" | \`import { Avatar } from '@j3m-quantum/ui'\` |
+| "Progress", "Progress Bar" | \`import { Progress } from '@j3m-quantum/ui'\` |
+| "Tabs", "Tab Bar" | \`import { Tabs, TabsList, TabsTrigger, TabsContent } from '@j3m-quantum/ui'\` |
+| "Accordion", "Expandable" | \`import { Accordion } from '@j3m-quantum/ui'\` |
+| "Tooltip", "Hint" | \`import { Tooltip } from '@j3m-quantum/ui'\` |
+| "Calendar", "Date Picker" | \`import { Calendar } from '@j3m-quantum/ui'\` |
+| "Chart", "Graph" | \`import { Chart } from '@j3m-quantum/ui'\` |
+
+## Available Components (60+)
+
+### Inputs
+Button, ButtonGroup, Input, InputGroup, Textarea, Checkbox, RadioGroup, Switch, Slider, Select, NativeSelect, Toggle, ToggleGroup, ThemeSwitch, Form, Field, Label
+
+### Display
+Card, Table, Badge, Avatar, UserAvatarsDropdown, Separator, Skeleton, Accordion, Tabs, Calendar, EventCalendar (BigCalendar), Carousel, Chart, AspectRatio, Empty, Item, Kbd
+
+### Feedback
+Alert, AlertDialog, Progress, CircularProgress, Tooltip, Sonner (Toast), Spinner
+
+### Navigation
+Breadcrumb, Pagination, Command, SearchTrigger, DropdownMenu, Menubar, NavigationMenu, ContextMenu
+
+### Overlay
+Dialog, Drawer, Sheet, Popover, HoverCard
+
+### Layout
+ScrollArea, Collapsible, Resizable, Sidebar, SidebarProvider, SidebarInset, Section
+
+### Blocks (Pre-built compositions)
+SiteHeader, NavMain, NavProjects, NavSecondary, NavUser, SearchForm, PlanningTable, CalibrationTable, SupplierWeeklyLoading, Gantt, Kanban
+
+### Map
+Map, MapTileLayer, MapMarker, MapPopup, MapTooltip, MapZoomControl
+
+## DO
+- Import all components from @j3m-quantum/ui
+- Use Tailwind semantic classes: bg-primary, text-muted-foreground, bg-accent
+- Use CSS variables for custom styling: var(--primary), var(--background)
+- Use \`glass-context\` class on Cards with interactive components in glass mode
+- Check the component list above before building custom components
+- Use the j3m-app-bg class on root element for proper backgrounds
+
+## DON'T
+- Don't create new component files for UI elements that exist in @j3m-quantum/ui
+- Don't use shadcn CLI - components are already bundled
+- Don't override component CSS unless approved by design system maintainer
+- Don't use arbitrary color values like bg-[#F58446] - use bg-primary
+- Don't modify component border-radius - pill shapes are intentional
+- Don't style portal components manually - they auto-adapt to theme
+
+## Common Patterns
+
+### Form in Card
+\`\`\`tsx
+import { Card, CardHeader, CardTitle, CardContent, Input, Button } from '@j3m-quantum/ui'
+
+<Card className="glass-context">
+  <CardHeader>
+    <CardTitle>Contact Form</CardTitle>
+  </CardHeader>
+  <CardContent className="space-y-4">
+    <Input placeholder="Name" />
+    <Input placeholder="Email" />
+    <Button>Send</Button>
+  </CardContent>
+</Card>
+\`\`\`
+
+### Dashboard Layout
+\`\`\`tsx
+import { 
+  SidebarProvider, Sidebar, SidebarContent, SidebarFooter, SidebarInset,
+  SiteHeader, SidebarTrigger, NavMain, NavUser 
+} from '@j3m-quantum/ui'
+
+<SidebarProvider>
+  <Sidebar>
+    <SidebarContent>
+      <NavMain items={navItems} />
+    </SidebarContent>
+    <SidebarFooter>
+      <NavUser user={userData} />
+    </SidebarFooter>
+  </Sidebar>
+  <SidebarInset>
+    <SiteHeader trigger={<SidebarTrigger />} breadcrumbs={[{ label: "Dashboard" }]} />
+    <main className="p-4">{/* Content */}</main>
+  </SidebarInset>
+</SidebarProvider>
+\`\`\`
+
+### Dialog with Form
+\`\`\`tsx
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Input, Button } from '@j3m-quantum/ui'
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Open Form</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Edit Profile</DialogTitle>
+    </DialogHeader>
+    {/* No glass-context needed - Dialog is a portal */}
+    <Input placeholder="Name" />
+    <Button>Save</Button>
+  </DialogContent>
+</Dialog>
+\`\`\`
+
+## CLI Commands
+
+Run these in your project:
+
+\`\`\`bash
+npx @j3m-quantum/ui init     # Set up these rules (already done!)
+npx @j3m-quantum/ui list     # List all available components
+npx @j3m-quantum/ui doctor   # Check if setup is correct
+\`\`\`
+`;
+async function init() {
+  const cwd = process.cwd();
+  const cursorDir = path2.join(cwd, ".cursor");
+  const rulesDir = path2.join(cursorDir, "rules");
+  const rulesFile = path2.join(rulesDir, "j3m-quantum.md");
+  const cursorRulesFile = path2.join(cwd, ".cursorrules");
+  console.log("");
+  console.log("\u{1F3A8} Setting up @j3m-quantum/ui...");
+  console.log("");
+  try {
+    if (!fs2.existsSync(rulesDir)) {
+      fs2.mkdirSync(rulesDir, { recursive: true });
+      console.log("  \u2713 Created .cursor/rules/ directory");
+    }
+    fs2.writeFileSync(rulesFile, CURSOR_RULES_CONTENT, "utf-8");
+    console.log("  \u2713 Created .cursor/rules/j3m-quantum.md");
+    if (fs2.existsSync(cursorRulesFile)) {
+      const existingContent = fs2.readFileSync(cursorRulesFile, "utf-8");
+      if (!existingContent.includes("@j3m-quantum/ui")) {
+        console.log("  \u2139 Found existing .cursorrules file");
+        console.log("    Consider adding: 'See .cursor/rules/j3m-quantum.md for J3M Design System rules'");
+      }
+    }
+    console.log("");
+    console.log("\u2705 Setup complete!");
+    console.log("");
+    console.log("AI assistants will now:");
+    console.log("  \u2022 Use components from @j3m-quantum/ui");
+    console.log("  \u2022 Know about all 60+ available components");
+    console.log("  \u2022 Map Figma layers to correct components");
+    console.log("  \u2022 Follow J3M styling guidelines");
+    console.log("");
+    console.log("Next steps:");
+    console.log("  1. Ensure your CSS imports are correct:");
+    console.log('     @import "tailwindcss";');
+    console.log('     @import "tw-animate-css";');
+    console.log('     @import "@j3m-quantum/ui/styles";');
+    console.log("");
+    console.log("  2. Run 'npx @j3m-quantum/ui doctor' to verify setup");
+    console.log("");
+  } catch (error) {
+    console.error("\u274C Failed to set up cursor rules:", error.message);
+    process.exit(1);
+  }
+}
+
+// src/cli/commands/list.ts
+var REGISTRY = {
+  inputs: {
+    label: "Inputs",
+    components: [
+      { name: "Button", description: "Primary action button with variants", import: "Button", figmaNames: ["Button", "CTA", "Primary Button"] },
+      { name: "ButtonGroup", description: "Group of related buttons", import: "ButtonGroup" },
+      { name: "Input", description: "Text input field", import: "Input", figmaNames: ["Input", "Text Field"] },
+      { name: "InputGroup", description: "Input with addons", import: "InputGroup" },
+      { name: "Textarea", description: "Multi-line text input", import: "Textarea" },
+      { name: "Checkbox", description: "Checkbox input", import: "Checkbox", figmaNames: ["Checkbox", "Check"] },
+      { name: "RadioGroup", description: "Radio button group", import: "RadioGroup, RadioGroupItem" },
+      { name: "Switch", description: "Toggle switch", import: "Switch", figmaNames: ["Switch", "Toggle"] },
+      { name: "Slider", description: "Range slider", import: "Slider" },
+      { name: "Select", description: "Dropdown select", import: "Select, SelectTrigger, SelectContent, SelectItem, SelectValue", figmaNames: ["Select", "Dropdown", "Picker"] },
+      { name: "NativeSelect", description: "Native HTML select", import: "NativeSelect" },
+      { name: "Toggle", description: "Toggle button", import: "Toggle" },
+      { name: "ToggleGroup", description: "Group of toggle buttons", import: "ToggleGroup, ToggleGroupItem" },
+      { name: "ThemeSwitch", description: "Light/dark mode toggle", import: "ThemeSwitch" },
+      { name: "Form", description: "Form with validation", import: "Form, FormField, FormItem, FormLabel, FormControl, FormMessage" },
+      { name: "Field", description: "Form field wrapper", import: "Field" },
+      { name: "Label", description: "Form label", import: "Label" }
+    ]
+  },
+  display: {
+    label: "Display",
+    components: [
+      { name: "Card", description: "Content container", import: "Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter", figmaNames: ["Card", "Container", "Panel"] },
+      { name: "Table", description: "Data table", import: "Table, TableHeader, TableBody, TableRow, TableHead, TableCell", figmaNames: ["Table", "Data Grid"] },
+      { name: "Badge", description: "Status badge/tag", import: "Badge", figmaNames: ["Badge", "Tag", "Label"] },
+      { name: "Avatar", description: "User avatar", import: "Avatar, AvatarImage, AvatarFallback", figmaNames: ["Avatar", "Profile Image"] },
+      { name: "UserAvatarsDropdown", description: "Avatar with dropdown", import: "UserAvatarsDropdown" },
+      { name: "Separator", description: "Visual divider", import: "Separator" },
+      { name: "Skeleton", description: "Loading placeholder", import: "Skeleton" },
+      { name: "Accordion", description: "Collapsible sections", import: "Accordion, AccordionItem, AccordionTrigger, AccordionContent", figmaNames: ["Accordion", "Expandable"] },
+      { name: "Tabs", description: "Tabbed content", import: "Tabs, TabsList, TabsTrigger, TabsContent", figmaNames: ["Tabs", "Tab Bar"] },
+      { name: "Calendar", description: "Date picker calendar", import: "Calendar", figmaNames: ["Calendar", "Date Picker"] },
+      { name: "EventCalendar", description: "Big calendar for events", import: "BigCalendar, type IEvent, type IUser" },
+      { name: "Carousel", description: "Image/content carousel", import: "Carousel, CarouselContent, CarouselItem" },
+      { name: "Chart", description: "Data visualization", import: "ChartContainer, ChartTooltip, ChartLegend", figmaNames: ["Chart", "Graph"] },
+      { name: "AspectRatio", description: "Maintain aspect ratio", import: "AspectRatio" },
+      { name: "Empty", description: "Empty state placeholder", import: "Empty" },
+      { name: "Item", description: "List item", import: "Item" },
+      { name: "Kbd", description: "Keyboard shortcut display", import: "Kbd" }
+    ]
+  },
+  feedback: {
+    label: "Feedback",
+    components: [
+      { name: "Alert", description: "Alert message", import: "Alert, AlertTitle, AlertDescription" },
+      { name: "AlertDialog", description: "Confirmation dialog", import: "AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel" },
+      { name: "Progress", description: "Progress bar", import: "Progress", figmaNames: ["Progress", "Progress Bar"] },
+      { name: "CircularProgress", description: "Circular progress indicator", import: "CircularProgress" },
+      { name: "Tooltip", description: "Hover tooltip", import: "Tooltip, TooltipTrigger, TooltipContent, TooltipProvider", figmaNames: ["Tooltip", "Hint"] },
+      { name: "Sonner", description: "Toast notifications", import: "Toaster, toast" },
+      { name: "Spinner", description: "Loading spinner", import: "Spinner" }
+    ]
+  },
+  navigation: {
+    label: "Navigation",
+    components: [
+      { name: "Breadcrumb", description: "Breadcrumb navigation", import: "Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator" },
+      { name: "Pagination", description: "Page navigation", import: "Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious" },
+      { name: "Command", description: "Command palette", import: "Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandDialog" },
+      { name: "SearchTrigger", description: "Search button trigger", import: "SearchTrigger, useSearchShortcut" },
+      { name: "DropdownMenu", description: "Dropdown menu", import: "DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator", figmaNames: ["Dropdown", "Menu"] },
+      { name: "Menubar", description: "Horizontal menu bar", import: "Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem" },
+      { name: "NavigationMenu", description: "Navigation menu", import: "NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink" },
+      { name: "ContextMenu", description: "Right-click menu", import: "ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem" }
+    ]
+  },
+  overlay: {
+    label: "Overlay",
+    components: [
+      { name: "Dialog", description: "Modal dialog", import: "Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter", figmaNames: ["Dialog", "Modal", "Popup"] },
+      { name: "Drawer", description: "Bottom drawer", import: "Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter" },
+      { name: "Sheet", description: "Side panel", import: "Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription", figmaNames: ["Sheet", "Side Panel", "Drawer"] },
+      { name: "Popover", description: "Popover panel", import: "Popover, PopoverTrigger, PopoverContent" },
+      { name: "HoverCard", description: "Hover preview card", import: "HoverCard, HoverCardTrigger, HoverCardContent" }
+    ]
+  },
+  layout: {
+    label: "Layout",
+    components: [
+      { name: "ScrollArea", description: "Custom scrollable area", import: "ScrollArea, ScrollBar" },
+      { name: "Collapsible", description: "Collapsible section", import: "Collapsible, CollapsibleTrigger, CollapsibleContent" },
+      { name: "Resizable", description: "Resizable panels", import: "ResizablePanelGroup, ResizablePanel, ResizableHandle" },
+      { name: "Sidebar", description: "Application sidebar", import: "Sidebar, SidebarProvider, SidebarContent, SidebarHeader, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger, SidebarInset", figmaNames: ["Sidebar", "Navigation"] },
+      { name: "Section", description: "Page section", import: "Section" }
+    ]
+  },
+  blocks: {
+    label: "Blocks (Pre-built Compositions)",
+    components: [
+      { name: "SiteHeader", description: "Sticky header with breadcrumbs", import: "SiteHeader" },
+      { name: "NavMain", description: "Main navigation with collapsible items", import: "NavMain" },
+      { name: "NavProjects", description: "Projects navigation section", import: "NavProjects" },
+      { name: "NavSecondary", description: "Secondary navigation links", import: "NavSecondary" },
+      { name: "NavUser", description: "User profile with dropdown", import: "NavUser" },
+      { name: "SearchForm", description: "Search input form", import: "SearchForm" },
+      { name: "PlanningTable", description: "Weekly supplier planning matrix", import: "PlanningTable, type Supplier, type PlanningTableConfig", figmaNames: ["Planning Grid", "Week Table", "Supplier Matrix"] },
+      { name: "CalibrationTable", description: "Production calibration table", import: "CalibrationTable, type CalibrationPrefix", figmaNames: ["Calibration Table", "Production Grid"] },
+      { name: "SupplierWeeklyLoading", description: "Weekly loading view", import: "SupplierWeeklyLoading, type LoadingDelivery", figmaNames: ["Loading View", "Delivery Grid"] },
+      { name: "Gantt", description: "Gantt chart component", import: "Gantt" },
+      { name: "Kanban", description: "Kanban board component", import: "Kanban" }
+    ]
+  },
+  map: {
+    label: "Map (requires leaflet)",
+    components: [
+      { name: "Map", description: "Map container", import: "Map" },
+      { name: "MapTileLayer", description: "Map tile layer", import: "MapTileLayer" },
+      { name: "MapMarker", description: "Map marker", import: "MapMarker" },
+      { name: "MapPopup", description: "Marker popup", import: "MapPopup" },
+      { name: "MapTooltip", description: "Marker tooltip", import: "MapTooltip" },
+      { name: "MapZoomControl", description: "Zoom controls", import: "MapZoomControl" }
+    ]
+  }
+};
+function list(category) {
+  console.log("");
+  console.log("\u{1F4E6} @j3m-quantum/ui Components");
+  console.log("\u2550".repeat(50));
+  const categories = category ? { [category]: REGISTRY[category] } : REGISTRY;
+  if (category && !REGISTRY[category]) {
+    console.log("");
+    console.log(`\u274C Unknown category: ${category}`);
+    console.log("");
+    console.log("Available categories:");
+    Object.keys(REGISTRY).forEach((cat) => {
+      console.log(`  \u2022 ${cat}`);
+    });
+    console.log("");
+    console.log("Usage: npx @j3m-quantum/ui list --category <category>");
+    console.log("");
+    return;
+  }
+  let totalCount = 0;
+  for (const [key, cat] of Object.entries(categories)) {
+    if (!cat) continue;
+    console.log("");
+    console.log(`\u25B8 ${cat.label}`);
+    console.log("\u2500".repeat(40));
+    for (const component of cat.components) {
+      totalCount++;
+      const figmaInfo = component.figmaNames ? ` (Figma: ${component.figmaNames.join(", ")})` : "";
+      console.log(`  ${component.name}`);
+      console.log(`    ${component.description}${figmaInfo}`);
+      console.log(`    import { ${component.import} } from '@j3m-quantum/ui'`);
+      console.log("");
+    }
+  }
+  console.log("\u2550".repeat(50));
+  console.log(`Total: ${totalCount} components`);
+  console.log("");
+  console.log("Usage:");
+  console.log("  import { ComponentName } from '@j3m-quantum/ui'");
+  console.log("");
+  console.log("Filter by category:");
+  console.log("  npx @j3m-quantum/ui list --category blocks");
+  console.log("");
+}
+async function doctor() {
+  const cwd = process.cwd();
+  const results = [];
+  console.log("");
+  console.log("\u{1FA7A} @j3m-quantum/ui Doctor");
+  console.log("\u2550".repeat(50));
+  console.log("");
+  console.log("Checking your project setup...");
+  console.log("");
+  const packageJsonPath = path2.join(cwd, "package.json");
+  if (fs2.existsSync(packageJsonPath)) {
+    const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf-8"));
+    const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+    if (deps["@j3m-quantum/ui"]) {
+      const version = deps["@j3m-quantum/ui"];
+      results.push({
+        name: "@j3m-quantum/ui installed",
+        status: "pass",
+        message: `Version: ${version}`
+      });
+    } else {
+      results.push({
+        name: "@j3m-quantum/ui installed",
+        status: "fail",
+        message: "Package not found in dependencies",
+        fix: "npm install @j3m-quantum/ui"
+      });
+    }
+    if (deps["tw-animate-css"]) {
+      results.push({
+        name: "tw-animate-css installed",
+        status: "pass",
+        message: `Version: ${deps["tw-animate-css"]}`
+      });
+    } else {
+      results.push({
+        name: "tw-animate-css installed",
+        status: "warn",
+        message: "Not found - animations may not work",
+        fix: "npm install tw-animate-css"
+      });
+    }
+    if (deps["tailwindcss"]) {
+      const version = deps["tailwindcss"];
+      const majorVersion = parseInt(version.replace(/[^0-9]/g, "").charAt(0));
+      if (majorVersion >= 4) {
+        results.push({
+          name: "Tailwind CSS v4+",
+          status: "pass",
+          message: `Version: ${version}`
+        });
+      } else {
+        results.push({
+          name: "Tailwind CSS v4+",
+          status: "fail",
+          message: `Version ${version} - requires v4+`,
+          fix: "npm install tailwindcss@latest"
+        });
+      }
+    } else {
+      results.push({
+        name: "Tailwind CSS v4+",
+        status: "fail",
+        message: "Not found",
+        fix: "npm install -D tailwindcss @tailwindcss/vite"
+      });
+    }
+  } else {
+    results.push({
+      name: "package.json",
+      status: "fail",
+      message: "Not found - run from project root"
+    });
+  }
+  const cursorRulesPath = path2.join(cwd, ".cursor", "rules", "j3m-quantum.md");
+  const altCursorRulesPath = path2.join(cwd, ".cursorrules");
+  if (fs2.existsSync(cursorRulesPath)) {
+    results.push({
+      name: "Cursor rules configured",
+      status: "pass",
+      message: ".cursor/rules/j3m-quantum.md found"
+    });
+  } else if (fs2.existsSync(altCursorRulesPath)) {
+    const content = fs2.readFileSync(altCursorRulesPath, "utf-8");
+    if (content.includes("@j3m-quantum/ui")) {
+      results.push({
+        name: "Cursor rules configured",
+        status: "pass",
+        message: ".cursorrules contains J3M references"
+      });
+    } else {
+      results.push({
+        name: "Cursor rules configured",
+        status: "warn",
+        message: ".cursorrules exists but missing J3M rules",
+        fix: "npx @j3m-quantum/ui init"
+      });
+    }
+  } else {
+    results.push({
+      name: "Cursor rules configured",
+      status: "warn",
+      message: "No cursor rules found - AI may not use components correctly",
+      fix: "npx @j3m-quantum/ui init"
+    });
+  }
+  const possibleCssPaths = [
+    path2.join(cwd, "src", "index.css"),
+    path2.join(cwd, "src", "styles", "globals.css"),
+    path2.join(cwd, "src", "app", "globals.css"),
+    path2.join(cwd, "app", "globals.css"),
+    path2.join(cwd, "styles", "globals.css")
+  ];
+  let cssFound = false;
+  let cssContent = "";
+  let foundCssPath = "";
+  for (const cssPath of possibleCssPaths) {
+    if (fs2.existsSync(cssPath)) {
+      cssFound = true;
+      cssContent = fs2.readFileSync(cssPath, "utf-8");
+      foundCssPath = cssPath.replace(cwd, "");
+      break;
+    }
+  }
+  if (cssFound) {
+    const hasJ3mStyles = cssContent.includes("@j3m-quantum/ui/styles");
+    const hasTailwind = cssContent.includes("tailwindcss");
+    cssContent.includes("tw-animate-css");
+    if (hasJ3mStyles && hasTailwind) {
+      const tailwindIndex = cssContent.indexOf("tailwindcss");
+      const twAnimateIndex = cssContent.indexOf("tw-animate-css");
+      const j3mIndex = cssContent.indexOf("@j3m-quantum/ui/styles");
+      const orderCorrect = tailwindIndex < j3mIndex && (twAnimateIndex === -1 || twAnimateIndex > tailwindIndex && twAnimateIndex < j3mIndex);
+      if (orderCorrect) {
+        results.push({
+          name: "CSS imports configured",
+          status: "pass",
+          message: `${foundCssPath} - imports in correct order`
+        });
+      } else {
+        results.push({
+          name: "CSS imports configured",
+          status: "warn",
+          message: `${foundCssPath} - import order may be incorrect`,
+          fix: "Order should be: tailwindcss \u2192 tw-animate-css \u2192 @j3m-quantum/ui/styles"
+        });
+      }
+    } else if (!hasJ3mStyles) {
+      results.push({
+        name: "CSS imports configured",
+        status: "fail",
+        message: `${foundCssPath} - missing @j3m-quantum/ui/styles`,
+        fix: 'Add: @import "@j3m-quantum/ui/styles";'
+      });
+    } else if (!hasTailwind) {
+      results.push({
+        name: "CSS imports configured",
+        status: "fail",
+        message: `${foundCssPath} - missing tailwindcss import`,
+        fix: 'Add: @import "tailwindcss";'
+      });
+    }
+  } else {
+    results.push({
+      name: "CSS imports configured",
+      status: "warn",
+      message: "Could not find CSS entry file",
+      fix: "Create src/index.css with required imports"
+    });
+  }
+  const viteConfigPath = path2.join(cwd, "vite.config.ts");
+  const viteConfigJsPath = path2.join(cwd, "vite.config.js");
+  if (fs2.existsSync(viteConfigPath) || fs2.existsSync(viteConfigJsPath)) {
+    const configPath = fs2.existsSync(viteConfigPath) ? viteConfigPath : viteConfigJsPath;
+    const configContent = fs2.readFileSync(configPath, "utf-8");
+    if (configContent.includes("@tailwindcss/vite")) {
+      results.push({
+        name: "Vite + Tailwind plugin",
+        status: "pass",
+        message: "@tailwindcss/vite configured"
+      });
+    } else {
+      results.push({
+        name: "Vite + Tailwind plugin",
+        status: "warn",
+        message: "Consider using @tailwindcss/vite for better performance"
+      });
+    }
+  }
+  console.log("Results:");
+  console.log("\u2500".repeat(50));
+  for (const result of results) {
+    const icon = result.status === "pass" ? "\u2713" : result.status === "warn" ? "\u26A0" : "\u2717";
+    result.status === "pass" ? "" : result.status === "warn" ? "" : "";
+    console.log(`  ${icon} ${result.name}`);
+    console.log(`    ${result.message}`);
+    if (result.fix) {
+      console.log(`    Fix: ${result.fix}`);
+    }
+    console.log("");
+  }
+  console.log("\u2500".repeat(50));
+  const passCount = results.filter((r) => r.status === "pass").length;
+  const warnCount = results.filter((r) => r.status === "warn").length;
+  const failCount = results.filter((r) => r.status === "fail").length;
+  console.log(`Summary: ${passCount} passed, ${warnCount} warnings, ${failCount} failed`);
+  console.log("");
+  if (failCount > 0) {
+    console.log("\u274C Some checks failed. Please fix the issues above.");
+  } else if (warnCount > 0) {
+    console.log("\u26A0\uFE0F  Setup looks good with some warnings.");
+  } else {
+    console.log("\u2705 All checks passed! Your setup is ready.");
+  }
+  console.log("");
+}
+
+// src/cli/index.ts
+var args = process.argv.slice(2);
+var command = args[0];
+var HELP = `
+@j3m-quantum/ui CLI
+
+Usage:
+  npx @j3m-quantum/ui <command>
+
+Commands:
+  init      Set up cursor rules for AI assistance
+  list      List all available components  
+  doctor    Check if your setup is correct
+  help      Show this help message
+
+Examples:
+  npx @j3m-quantum/ui init
+  npx @j3m-quantum/ui list
+  npx @j3m-quantum/ui list --category blocks
+  npx @j3m-quantum/ui doctor
+`;
+async function main() {
+  switch (command) {
+    case "init":
+      await init();
+      break;
+    case "list":
+      const categoryFlag = args.indexOf("--category");
+      const category = categoryFlag !== -1 ? args[categoryFlag + 1] : void 0;
+      list(category);
+      break;
+    case "doctor":
+      await doctor();
+      break;
+    case "help":
+    case "--help":
+    case "-h":
+    case void 0:
+      console.log(HELP);
+      break;
+    default:
+      console.error(`Unknown command: ${command}`);
+      console.log(HELP);
+      process.exit(1);
+  }
+}
+main().catch((error) => {
+  console.error("Error:", error.message);
+  process.exit(1);
+});