@j3m-quantum/ui 1.12.1 → 2.1.1

package/dist/cli/index.js

@@ -0,0 +1,842 @@
+#!/usr/bin/env node
+import * as fs2 from 'fs';
+import * as path 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: Pre-built Blocks - USE THESE FIRST!
+
+Before implementing ANY sidebar, navigation, header, or dashboard layout, ALWAYS import these pre-built blocks:
+
+\`\`\`tsx
+// Pre-built blocks - USE THESE, don't build from scratch!
+import {
+  SiteHeader,      // Header with breadcrumbs + search + sidebar trigger
+  NavMain,         // Main navigation with icons + collapsible sub-items
+  NavSecondary,    // Secondary nav (Support, Feedback links)
+  NavUser,         // User profile with dropdown menu
+  NavProjects,     // Project list navigation
+  SearchForm,      // Search input for sidebar
+} from '@j3m-quantum/ui'
+\`\`\`
+
+## \u26D4 NEVER Create These Manually
+
+| Instead of building... | Use this block |
+|------------------------|----------------|
+| \u274C Custom sidebar navigation | \u2705 \`NavMain\` |
+| \u274C Custom user menu/profile | \u2705 \`NavUser\` |
+| \u274C Custom page header | \u2705 \`SiteHeader\` |
+| \u274C Custom project list | \u2705 \`NavProjects\` |
+| \u274C Custom secondary links | \u2705 \`NavSecondary\` |
+| \u274C Custom search in sidebar | \u2705 \`SearchForm\` |
+| \u274C Custom CSS tokens | \u2705 Package provides all tokens |
+
+## Block Props Reference
+
+### NavMain
+\`\`\`tsx
+import { NavMain, type NavItem } from '@j3m-quantum/ui'
+import { Home, Settings, Users } from 'lucide-react'
+
+const navItems: NavItem[] = [
+  { title: "Home", url: "/", icon: Home, isActive: true },
+  { title: "Settings", url: "/settings", icon: Settings, items: [
+    { title: "General", url: "/settings/general" },
+    { title: "Team", url: "/settings/team" },
+  ]},
+  { title: "Users", url: "/users", icon: Users },
+]
+
+<NavMain items={navItems} label="Navigation" />
+\`\`\`
+
+### NavUser
+\`\`\`tsx
+import { NavUser } from '@j3m-quantum/ui'
+
+<NavUser 
+  user={{ 
+    name: "John Doe", 
+    email: "john@example.com", 
+    avatar: "/avatar.jpg"  // or "" for initials fallback
+  }} 
+/>
+\`\`\`
+
+### SiteHeader
+\`\`\`tsx
+import { SiteHeader, SidebarTrigger } from '@j3m-quantum/ui'
+
+<SiteHeader 
+  trigger={<SidebarTrigger />}
+  breadcrumbs={[
+    { label: "Dashboard", href: "/" },
+    { label: "Settings" }  // No href = current page
+  ]}
+  showSearch={true}
+/>
+\`\`\`
+
+### NavSecondary
+\`\`\`tsx
+import { NavSecondary } from '@j3m-quantum/ui'
+import { LifeBuoy, Send } from 'lucide-react'
+
+<NavSecondary items={[
+  { title: "Support", url: "/support", icon: LifeBuoy },
+  { title: "Feedback", url: "/feedback", icon: Send },
+]} />
+\`\`\`
+
+## Sidebar Features Checklist
+
+When using Sidebar, remember these features:
+
+| Feature | Usage |
+|---------|-------|
+| \`collapsible="icon"\` | Collapses sidebar to icons only |
+| \`collapsible="offcanvas"\` | Slides sidebar off screen |
+| \`<SidebarRail />\` | Edge rail for drag-to-toggle |
+| \`tooltip\` prop on SidebarMenuButton | Shows tooltips when collapsed |
+| \`<SidebarMenuBadge>\` | Notification counts on menu items |
+| \`<SidebarGroup>\` + \`<SidebarGroupLabel>\` | Organize sections |
+
+\`\`\`tsx
+<Sidebar collapsible="icon">
+  <SidebarContent>
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <NavMain items={navItems} />
+    </SidebarGroup>
+  </SidebarContent>
+  <SidebarRail />
+</Sidebar>
+\`\`\`
+
+## CSS Import Order (Critical)
+\`\`\`css
+@import "tailwindcss";
+@import "tw-animate-css";           /* Required for animations */
+@import "@j3m-quantum/ui/styles";   /* J3M theme and tokens */
+
+/* REQUIRED: Tell Tailwind to scan the package for utility classes */
+@source "../node_modules/@j3m-quantum/ui/dist/**/*.js";
+\`\`\`
+
+The @source directive is CRITICAL - without it, Tailwind v4 won't generate CSS for component classes.
+
+## 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" | \`Button\` |
+| "Card", "Container", "Panel" | \`Card, CardHeader, CardContent\` |
+| "Input", "Text Field" | \`Input\` |
+| "Dialog", "Modal", "Popup" | \`Dialog, DialogContent, DialogHeader\` |
+| "Sheet", "Side Panel", "Drawer" | \`Sheet, SheetContent\` |
+| "Sidebar", "Navigation", "Nav" | \`SidebarProvider, Sidebar, NavMain\` |
+| "Header", "Page Header", "Toolbar" | \`SiteHeader\` |
+| "User Menu", "Profile", "Avatar Menu" | \`NavUser\` |
+| "Table", "Data Grid" | \`Table\` |
+| "Planning Grid", "Week Table" | \`PlanningTable\` |
+| "Calibration Table" | \`CalibrationTable\` |
+
+## 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 pre-built blocks (NavMain, NavUser, SiteHeader) instead of building custom
+- Use Tailwind semantic classes: bg-primary, text-muted-foreground, bg-accent
+- Use \`glass-context\` class on Cards with interactive components in glass mode
+- Check the component/block list above BEFORE building anything custom
+
+## DON'T
+- Don't create new component files for UI that exists in @j3m-quantum/ui
+- Don't build custom sidebar/navigation - use NavMain, NavUser, etc.
+- Don't use shadcn CLI - components are already bundled
+- Don't add custom CSS tokens - the package provides everything
+- Don't use arbitrary color values like bg-[#F58446] - use bg-primary
+
+## Complete Dashboard Example
+
+\`\`\`tsx
+import { 
+  SidebarProvider, Sidebar, SidebarContent, SidebarFooter, SidebarInset, SidebarRail,
+  SiteHeader, SidebarTrigger, NavMain, NavUser, NavSecondary, type NavItem
+} from '@j3m-quantum/ui'
+import { Home, Settings, LifeBuoy, Send } from 'lucide-react'
+
+const navItems: NavItem[] = [
+  { title: "Home", url: "/", icon: Home, isActive: true },
+  { title: "Settings", url: "/settings", icon: Settings },
+]
+
+function App() {
+  return (
+    <div className="j3m-app-bg min-h-screen">
+      <SidebarProvider>
+        <Sidebar collapsible="icon">
+          <SidebarContent>
+            <NavMain items={navItems} />
+          </SidebarContent>
+          <SidebarFooter>
+            <NavSecondary items={[
+              { title: "Support", url: "#", icon: LifeBuoy },
+              { title: "Feedback", url: "#", icon: Send },
+            ]} />
+            <NavUser user={{ name: "John Doe", email: "john@example.com", avatar: "" }} />
+          </SidebarFooter>
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset>
+          <SiteHeader 
+            trigger={<SidebarTrigger />} 
+            breadcrumbs={[{ label: "Dashboard" }]} 
+          />
+          <main className="p-4">
+            {/* Your content here */}
+          </main>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  )
+}
+\`\`\`
+
+## Recommended Prompts for AI
+
+**Good prompts:**
+- "Create a dashboard using @j3m-quantum/ui blocks: NavMain, NavUser, SiteHeader"
+- "Use only pre-built blocks from @j3m-quantum/ui, don't create custom components"
+- "Import SiteHeader for the header and NavMain for navigation from @j3m-quantum/ui"
+- "Check the j3m-quantum cursor rules before implementing"
+
+**Bad prompts (avoid these):**
+- "Create a sidebar" \u2192 AI might build from scratch
+- "Add navigation" \u2192 Too vague, specify NavMain
+- "Make a header" \u2192 Specify SiteHeader instead
+
+## CLI Commands
+
+\`\`\`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
+\`\`\`
+`;
+var SOURCE_DIRECTIVE = '@source "../node_modules/@j3m-quantum/ui/dist/**/*.js";';
+function findCssFile(cwd) {
+  const possiblePaths = [
+    path.join(cwd, "src", "index.css"),
+    path.join(cwd, "src", "styles", "globals.css"),
+    path.join(cwd, "src", "styles", "index.css"),
+    path.join(cwd, "src", "app", "globals.css"),
+    path.join(cwd, "app", "globals.css"),
+    path.join(cwd, "styles", "globals.css"),
+    path.join(cwd, "styles", "index.css")
+  ];
+  for (const cssPath of possiblePaths) {
+    if (fs2.existsSync(cssPath)) {
+      return cssPath;
+    }
+  }
+  return null;
+}
+function updateCssFile(cssPath) {
+  const content = fs2.readFileSync(cssPath, "utf-8");
+  if (content.includes("@j3m-quantum/ui/dist")) {
+    return { updated: false, message: "already configured" };
+  }
+  if (!content.includes("@j3m-quantum/ui/styles")) {
+    return { updated: false, message: "missing @j3m-quantum/ui/styles import" };
+  }
+  const lines = content.split("\n");
+  let insertIndex = -1;
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].includes("@j3m-quantum/ui/styles")) {
+      insertIndex = i + 1;
+      break;
+    }
+  }
+  if (insertIndex === -1) {
+    return { updated: false, message: "could not find insertion point" };
+  }
+  lines.splice(insertIndex, 0, "", "/* Required: Tell Tailwind v4 to scan package for utility classes */", SOURCE_DIRECTIVE);
+  fs2.writeFileSync(cssPath, lines.join("\n"), "utf-8");
+  return { updated: true, message: "added @source directive" };
+}
+async function init() {
+  const cwd = process.cwd();
+  const cursorDir = path.join(cwd, ".cursor");
+  const rulesDir = path.join(cursorDir, "rules");
+  const rulesFile = path.join(rulesDir, "j3m-quantum.md");
+  const cursorRulesFile = path.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("Configuring Tailwind v4...");
+    const cssFile = findCssFile(cwd);
+    if (cssFile) {
+      const relativePath = cssFile.replace(cwd, "").replace(/^\//, "");
+      const result = updateCssFile(cssFile);
+      if (result.updated) {
+        console.log(`  \u2713 Updated ${relativePath} - ${result.message}`);
+      } else if (result.message === "already configured") {
+        console.log(`  \u2713 ${relativePath} - already configured`);
+      } else {
+        console.log(`  \u26A0 ${relativePath} - ${result.message}`);
+        console.log("    You may need to manually add:");
+        console.log(`    ${SOURCE_DIRECTIVE}`);
+      }
+    } else {
+      console.log("  \u26A0 Could not find CSS entry file");
+      console.log("    Add this to your main CSS file after the @j3m-quantum/ui/styles import:");
+      console.log("");
+      console.log(`    ${SOURCE_DIRECTIVE}`);
+    }
+    console.log("");
+    console.log("\u2705 Setup complete!");
+    console.log("");
+    console.log("What was configured:");
+    console.log("  \u2022 AI cursor rules for correct component usage");
+    console.log("  \u2022 Tailwind v4 @source directive to scan package classes");
+    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("Required CSS imports (if not already present):");
+    console.log('  @import "tailwindcss";');
+    console.log('  @import "tw-animate-css";');
+    console.log('  @import "@j3m-quantum/ui/styles";');
+    console.log(`  ${SOURCE_DIRECTIVE}`);
+    console.log("");
+    console.log("Run 'npx @j3m-quantum/ui doctor' to verify setup");
+    console.log("");
+  } catch (error) {
+    console.error("\u274C Failed to set up:", 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 = path.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 = path.join(cwd, ".cursor", "rules", "j3m-quantum.md");
+  const altCursorRulesPath = path.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 = [
+    path.join(cwd, "src", "index.css"),
+    path.join(cwd, "src", "styles", "globals.css"),
+    path.join(cwd, "src", "app", "globals.css"),
+    path.join(cwd, "app", "globals.css"),
+    path.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");
+    const hasSourceDirective = cssContent.includes("@j3m-quantum/ui/dist");
+    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";'
+      });
+    }
+    if (hasSourceDirective) {
+      results.push({
+        name: "Tailwind @source directive",
+        status: "pass",
+        message: `${foundCssPath} - @source configured for package scanning`
+      });
+    } else {
+      results.push({
+        name: "Tailwind @source directive",
+        status: "fail",
+        message: `${foundCssPath} - missing @source directive (components will be unstyled!)`,
+        fix: 'Add: @source "../node_modules/@j3m-quantum/ui/dist/**/*.js";'
+      });
+    }
+  } 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 = path.join(cwd, "vite.config.ts");
+  const viteConfigJsPath = path.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);
+});