@thesage/mcp 0.3.0 → 0.5.0

package/dist/index.js

@@ -80,7 +80,14 @@ var COMPONENT_REGISTRY = {
       "Call-to-action elements"
     ],
     dependencies: ["@radix-ui/react-slot"],
-    radixPrimitive: "@radix-ui/react-slot"
+    radixPrimitive: "@radix-ui/react-slot",
+    props: {
+      variant: { type: "'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'", default: "'default'", description: "Visual style variant" },
+      size: { type: "'sm' | 'default' | 'lg' | 'icon'", default: "'default'", description: "Size variant" },
+      disabled: { type: "boolean", default: "false", description: "Disable interaction" },
+      asChild: { type: "boolean", default: "false", description: "Render as child element via Radix Slot" }
+    },
+    example: `<Button variant="outline" size="sm" onClick={handleClick}>Click Me</Button>`
   },
   toggle: {
     name: "Toggle",
@@ -94,7 +101,15 @@ var COMPONENT_REGISTRY = {
       "Filter activation"
     ],
     dependencies: ["@radix-ui/react-toggle"],
-    radixPrimitive: "@radix-ui/react-toggle"
+    radixPrimitive: "@radix-ui/react-toggle",
+    props: {
+      pressed: { type: "boolean", description: "Controlled pressed state" },
+      onPressedChange: { type: "(pressed: boolean) => void", description: "Callback on press change" },
+      variant: { type: "'default' | 'outline'", default: "'default'", description: "Visual variant" },
+      size: { type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Size variant" },
+      disabled: { type: "boolean", default: "false", description: "Disable interaction" }
+    },
+    example: `<Toggle pressed={isBold} onPressedChange={setIsBold}><Bold className="h-4 w-4" /></Toggle>`
   },
   "toggle-group": {
     name: "ToggleGroup",
@@ -108,7 +123,19 @@ var COMPONENT_REGISTRY = {
       "Option selection"
     ],
     dependencies: ["@radix-ui/react-toggle-group"],
-    radixPrimitive: "@radix-ui/react-toggle-group"
+    radixPrimitive: "@radix-ui/react-toggle-group",
+    props: {
+      type: { type: "'single' | 'multiple'", description: "Selection mode", required: true },
+      value: { type: "string | string[]", description: "Selected value(s)" },
+      onValueChange: { type: "(value) => void", description: "Callback on value change" },
+      variant: { type: "'default' | 'outline'", default: "'default'", description: "Visual variant" },
+      size: { type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Size variant" }
+    },
+    subComponents: ["ToggleGroupItem"],
+    example: `<ToggleGroup type="single" value={align} onValueChange={setAlign}>
+  <ToggleGroupItem value="left">Left</ToggleGroupItem>
+  <ToggleGroupItem value="center">Center</ToggleGroupItem>
+</ToggleGroup>`
   },
   // ============================================================================
   // FORMS (11)
@@ -125,7 +152,16 @@ var COMPONENT_REGISTRY = {
       "Bulk actions"
     ],
     dependencies: ["@radix-ui/react-checkbox"],
-    radixPrimitive: "@radix-ui/react-checkbox"
+    radixPrimitive: "@radix-ui/react-checkbox",
+    props: {
+      checked: { type: "boolean | 'indeterminate'", description: "Checked state" },
+      onCheckedChange: { type: "(checked: boolean) => void", description: "Callback on check change" },
+      disabled: { type: "boolean", default: "false", description: "Disable interaction" }
+    },
+    example: `<div className="flex items-center gap-2">
+  <Checkbox id="terms" checked={accepted} onCheckedChange={setAccepted} />
+  <Label htmlFor="terms">Accept terms</Label>
+</div>`
   },
   combobox: {
     name: "Combobox",
@@ -139,7 +175,21 @@ var COMPONENT_REGISTRY = {
       "Large option lists"
     ],
     dependencies: ["cmdk", "@radix-ui/react-popover"],
-    radixPrimitive: "@radix-ui/react-popover"
+    radixPrimitive: "@radix-ui/react-popover",
+    props: {
+      options: { type: "{ value: string; label: string }[]", description: "List of options", required: true },
+      value: { type: "string", description: "Selected value" },
+      onValueChange: { type: "(value: string) => void", description: "Callback on selection" },
+      placeholder: { type: "string", description: "Trigger placeholder text" },
+      searchPlaceholder: { type: "string", description: "Search input placeholder" },
+      emptyText: { type: "string", description: "Text when no results found" }
+    },
+    example: `<Combobox
+  options={[{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}
+  value={framework}
+  onValueChange={setFramework}
+  placeholder="Select framework"
+/>`
   },
   form: {
     name: "Form",
@@ -152,7 +202,23 @@ var COMPONENT_REGISTRY = {
       "Data entry",
       "Multi-step forms"
     ],
-    dependencies: ["react-hook-form", "@hookform/resolvers", "zod"]
+    dependencies: ["react-hook-form", "@hookform/resolvers", "zod"],
+    props: {
+      "...form": { type: "UseFormReturn", description: "Spread react-hook-form useForm() return value", required: true }
+    },
+    subComponents: ["FormControl", "FormDescription", "FormField", "FormItem", "FormLabel", "FormMessage"],
+    example: `<Form {...form}>
+  <form onSubmit={form.handleSubmit(onSubmit)}>
+    <FormField control={form.control} name="email" render={({ field }) => (
+      <FormItem>
+        <FormLabel>Email</FormLabel>
+        <FormControl><Input {...field} /></FormControl>
+        <FormMessage />
+      </FormItem>
+    )} />
+    <Button type="submit">Submit</Button>
+  </form>
+</Form>`
   },
   input: {
     name: "Input",
@@ -165,7 +231,13 @@ var COMPONENT_REGISTRY = {
       "Passwords",
       "Numeric input"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      type: { type: "string", default: "'text'", description: "HTML input type" },
+      placeholder: { type: "string", description: "Placeholder text" },
+      disabled: { type: "boolean", default: "false", description: "Disable interaction" }
+    },
+    example: `<Input type="email" placeholder="Enter email" />`
   },
   "input-otp": {
     name: "InputOTP",
@@ -178,7 +250,26 @@ var COMPONENT_REGISTRY = {
       "Phone verification",
       "Security codes"
     ],
-    dependencies: ["input-otp"]
+    dependencies: ["input-otp"],
+    props: {
+      maxLength: { type: "number", default: "6", description: "Maximum number of characters" },
+      value: { type: "string", description: "Controlled input value" },
+      onChange: { type: "(value: string) => void", description: "Callback on value change" }
+    },
+    subComponents: ["InputOTPGroup", "InputOTPSlot", "InputOTPSeparator"],
+    example: `<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>`
   },
   label: {
     name: "Label",
@@ -191,7 +282,12 @@ var COMPONENT_REGISTRY = {
       "Accessible forms"
     ],
     dependencies: ["@radix-ui/react-label"],
-    radixPrimitive: "@radix-ui/react-label"
+    radixPrimitive: "@radix-ui/react-label",
+    props: {
+      htmlFor: { type: "string", description: "ID of the associated form control" }
+    },
+    example: `<Label htmlFor="email">Email Address</Label>
+<Input id="email" type="email" />`
   },
   "radio-group": {
     name: "RadioGroup",
@@ -205,7 +301,19 @@ var COMPONENT_REGISTRY = {
       "Shipping options"
     ],
     dependencies: ["@radix-ui/react-radio-group"],
-    radixPrimitive: "@radix-ui/react-radio-group"
+    radixPrimitive: "@radix-ui/react-radio-group",
+    props: {
+      value: { type: "string", description: "Controlled selected value" },
+      onValueChange: { type: "(value: string) => void", description: "Callback on selection" },
+      disabled: { type: "boolean", default: "false", description: "Disable interaction" }
+    },
+    subComponents: ["RadioGroupItem"],
+    example: `<RadioGroup value={plan} onValueChange={setPlan}>
+  <div className="flex items-center gap-2">
+    <RadioGroupItem value="free" id="free" />
+    <Label htmlFor="free">Free</Label>
+  </div>
+</RadioGroup>`
   },
   select: {
     name: "Select",
@@ -219,7 +327,22 @@ var COMPONENT_REGISTRY = {
       "Data sorting"
     ],
     dependencies: ["@radix-ui/react-select"],
-    radixPrimitive: "@radix-ui/react-select"
+    radixPrimitive: "@radix-ui/react-select",
+    props: {
+      value: { type: "string", description: "Controlled selected value" },
+      onValueChange: { type: "(value: string) => void", description: "Callback on selection" },
+      defaultValue: { type: "string", description: "Default selected value" }
+    },
+    subComponents: ["SelectTrigger", "SelectValue", "SelectContent", "SelectItem", "SelectGroup", "SelectLabel", "SelectSeparator"],
+    example: `<Select value={theme} onValueChange={setTheme}>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Select theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+  </SelectContent>
+</Select>`
   },
   slider: {
     name: "Slider",
@@ -233,7 +356,16 @@ var COMPONENT_REGISTRY = {
       "Zoom level"
     ],
     dependencies: ["@radix-ui/react-slider"],
-    radixPrimitive: "@radix-ui/react-slider"
+    radixPrimitive: "@radix-ui/react-slider",
+    props: {
+      value: { type: "number[]", description: "Current value(s)" },
+      onValueChange: { type: "(value: number[]) => void", description: "Callback on value change" },
+      min: { type: "number", default: "0", description: "Minimum value" },
+      max: { type: "number", default: "100", description: "Maximum value" },
+      step: { type: "number", default: "1", description: "Step increment" },
+      disabled: { type: "boolean", default: "false", description: "Disable interaction" }
+    },
+    example: `<Slider value={[volume]} onValueChange={(v) => setVolume(v[0])} max={100} step={1} />`
   },
   switch: {
     name: "Switch",
@@ -247,7 +379,15 @@ var COMPONENT_REGISTRY = {
       "Mode switches"
     ],
     dependencies: ["@radix-ui/react-switch"],
-    radixPrimitive: "@radix-ui/react-switch"
+    radixPrimitive: "@radix-ui/react-switch",
+    props: {
+      checked: { type: "boolean", description: "Controlled checked state" },
+      onCheckedChange: { type: "(checked: boolean) => void", description: "Callback on toggle" },
+      size: { type: "'sm' | 'md' | 'lg'", default: "'md'", description: "Size variant" },
+      disabled: { type: "boolean", default: "false", description: "Disable interaction" },
+      label: { type: "string", description: "Optional label text" }
+    },
+    example: `<Switch checked={enabled} onCheckedChange={setEnabled} size="md" />`
   },
   textarea: {
     name: "Textarea",
@@ -260,7 +400,13 @@ var COMPONENT_REGISTRY = {
       "Descriptions",
       "Long-form text"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      placeholder: { type: "string", description: "Placeholder text" },
+      disabled: { type: "boolean", default: "false", description: "Disable interaction" },
+      rows: { type: "number", description: "Number of visible rows" }
+    },
+    example: `<Textarea placeholder="Write your message..." rows={4} />`
   },
   // ============================================================================
   // NAVIGATION (6)
@@ -276,7 +422,17 @@ var COMPONENT_REGISTRY = {
       "Location context",
       "Back navigation"
     ],
-    dependencies: []
+    dependencies: [],
+    subComponents: ["BreadcrumbList", "BreadcrumbItem", "BreadcrumbLink", "BreadcrumbPage", "BreadcrumbSeparator", "BreadcrumbEllipsis"],
+    example: `<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem><BreadcrumbPage>Current</BreadcrumbPage></BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>`
   },
   command: {
     name: "Command",
@@ -289,7 +445,18 @@ var COMPONENT_REGISTRY = {
       "Keyboard shortcuts",
       "Power user features"
     ],
-    dependencies: ["cmdk"]
+    dependencies: ["cmdk"],
+    subComponents: ["CommandInput", "CommandList", "CommandEmpty", "CommandGroup", "CommandItem", "CommandSeparator", "CommandShortcut", "CommandDialog"],
+    example: `<Command>
+  <CommandInput placeholder="Type a command..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Actions">
+      <CommandItem>Search</CommandItem>
+      <CommandItem>Settings</CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>`
   },
   menubar: {
     name: "Menubar",
@@ -303,7 +470,19 @@ var COMPONENT_REGISTRY = {
       "Editor toolbars"
     ],
     dependencies: ["@radix-ui/react-menubar"],
-    radixPrimitive: "@radix-ui/react-menubar"
+    radixPrimitive: "@radix-ui/react-menubar",
+    subComponents: ["MenubarMenu", "MenubarTrigger", "MenubarContent", "MenubarItem", "MenubarSeparator", "MenubarLabel", "MenubarCheckboxItem", "MenubarRadioGroup", "MenubarRadioItem", "MenubarSub", "MenubarSubTrigger", "MenubarSubContent", "MenubarShortcut"],
+    example: `<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>New <MenubarShortcut>\u2318N</MenubarShortcut></MenubarItem>
+      <MenubarItem>Open <MenubarShortcut>\u2318O</MenubarShortcut></MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Exit</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>`
   },
   "navigation-menu": {
     name: "NavigationMenu",
@@ -317,7 +496,18 @@ var COMPONENT_REGISTRY = {
       "Multi-level navigation"
     ],
     dependencies: ["@radix-ui/react-navigation-menu"],
-    radixPrimitive: "@radix-ui/react-navigation-menu"
+    radixPrimitive: "@radix-ui/react-navigation-menu",
+    subComponents: ["NavigationMenuList", "NavigationMenuItem", "NavigationMenuTrigger", "NavigationMenuContent", "NavigationMenuLink", "NavigationMenuIndicator", "NavigationMenuViewport"],
+    example: `<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>`
   },
   pagination: {
     name: "Pagination",
@@ -330,7 +520,17 @@ var COMPONENT_REGISTRY = {
       "Content lists",
       "Multi-page forms"
     ],
-    dependencies: []
+    dependencies: [],
+    subComponents: ["PaginationContent", "PaginationItem", "PaginationLink", "PaginationPrevious", "PaginationNext", "PaginationEllipsis"],
+    example: `<Pagination>
+  <PaginationContent>
+    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
+    <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
+    <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
+    <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
+    <PaginationItem><PaginationNext href="#" /></PaginationItem>
+  </PaginationContent>
+</Pagination>`
   },
   tabs: {
     name: "Tabs",
@@ -344,7 +544,21 @@ var COMPONENT_REGISTRY = {
       "Dashboard sections"
     ],
     dependencies: ["@radix-ui/react-tabs"],
-    radixPrimitive: "@radix-ui/react-tabs"
+    radixPrimitive: "@radix-ui/react-tabs",
+    props: {
+      defaultValue: { type: "string", description: "Default active tab value" },
+      value: { type: "string", description: "Controlled active tab value" },
+      onValueChange: { type: "(value: string) => void", description: "Callback on tab change" }
+    },
+    subComponents: ["TabsList", "TabsTrigger", "TabsContent"],
+    example: `<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Account settings here.</TabsContent>
+  <TabsContent value="password">Password settings here.</TabsContent>
+</Tabs>`
   },
   // ============================================================================
   // OVERLAYS (9)
@@ -361,7 +575,25 @@ var COMPONENT_REGISTRY = {
       "Irreversible operations"
     ],
     dependencies: ["@radix-ui/react-alert-dialog"],
-    radixPrimitive: "@radix-ui/react-alert-dialog"
+    radixPrimitive: "@radix-ui/react-alert-dialog",
+    props: {
+      open: { type: "boolean", description: "Controlled open state" },
+      onOpenChange: { type: "(open: boolean) => void", description: "Callback on open/close" }
+    },
+    subComponents: ["AlertDialogTrigger", "AlertDialogContent", "AlertDialogHeader", "AlertDialogTitle", "AlertDialogDescription", "AlertDialogFooter", "AlertDialogAction", "AlertDialogCancel"],
+    example: `<AlertDialog>
+  <AlertDialogTrigger asChild><Button variant="destructive">Delete</Button></AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Delete</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>`
   },
   "context-menu": {
     name: "ContextMenu",
@@ -375,7 +607,17 @@ var COMPONENT_REGISTRY = {
       "Item actions"
     ],
     dependencies: ["@radix-ui/react-context-menu"],
-    radixPrimitive: "@radix-ui/react-context-menu"
+    radixPrimitive: "@radix-ui/react-context-menu",
+    subComponents: ["ContextMenuTrigger", "ContextMenuContent", "ContextMenuItem", "ContextMenuCheckboxItem", "ContextMenuRadioItem", "ContextMenuLabel", "ContextMenuSeparator", "ContextMenuShortcut", "ContextMenuSub", "ContextMenuSubTrigger", "ContextMenuSubContent", "ContextMenuRadioGroup"],
+    example: `<ContextMenu>
+  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Edit</ContextMenuItem>
+    <ContextMenuItem>Duplicate</ContextMenuItem>
+    <ContextMenuSeparator />
+    <ContextMenuItem>Delete</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>`
   },
   dialog: {
     name: "Dialog",
@@ -389,7 +631,25 @@ var COMPONENT_REGISTRY = {
       "User input"
     ],
     dependencies: ["@radix-ui/react-dialog"],
-    radixPrimitive: "@radix-ui/react-dialog"
+    radixPrimitive: "@radix-ui/react-dialog",
+    props: {
+      open: { type: "boolean", description: "Controlled open state" },
+      onOpenChange: { type: "(open: boolean) => void", description: "Callback on open/close" }
+    },
+    subComponents: ["DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "DialogDescription", "DialogFooter", "DialogClose"],
+    example: `<Dialog>
+  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+      <DialogDescription>Description here.</DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <Button variant="outline">Cancel</Button>
+      <Button>Confirm</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`
   },
   drawer: {
     name: "Drawer",
@@ -402,7 +662,26 @@ var COMPONENT_REGISTRY = {
       "Bottom sheets",
       "Mobile menus"
     ],
-    dependencies: ["vaul"]
+    dependencies: ["vaul"],
+    props: {
+      open: { type: "boolean", description: "Controlled open state" },
+      onOpenChange: { type: "(open: boolean) => void", description: "Callback on open/close" }
+    },
+    subComponents: ["DrawerTrigger", "DrawerContent", "DrawerHeader", "DrawerTitle", "DrawerDescription", "DrawerFooter", "DrawerClose"],
+    example: `<Drawer>
+  <DrawerTrigger asChild><Button>Open Drawer</Button></DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Settings</DrawerTitle>
+      <DrawerDescription>Adjust preferences.</DrawerDescription>
+    </DrawerHeader>
+    <div className="p-4">Content here.</div>
+    <DrawerFooter>
+      <Button>Save</Button>
+      <DrawerClose asChild><Button variant="outline">Cancel</Button></DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`
   },
   "dropdown-menu": {
     name: "DropdownMenu",
@@ -416,7 +695,21 @@ var COMPONENT_REGISTRY = {
       "Overflow menus"
     ],
     dependencies: ["@radix-ui/react-dropdown-menu"],
-    radixPrimitive: "@radix-ui/react-dropdown-menu"
+    radixPrimitive: "@radix-ui/react-dropdown-menu",
+    props: {
+      open: { type: "boolean", description: "Controlled open state" },
+      onOpenChange: { type: "(open: boolean) => void", description: "Callback on open/close" }
+    },
+    subComponents: ["DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuLabel", "DropdownMenuSeparator", "DropdownMenuCheckboxItem", "DropdownMenuRadioGroup", "DropdownMenuRadioItem", "DropdownMenuSub", "DropdownMenuSubTrigger", "DropdownMenuSubContent"],
+    example: `<DropdownMenu>
+  <DropdownMenuTrigger asChild><Button variant="ghost">Options</Button></DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>Edit</DropdownMenuItem>
+    <DropdownMenuItem>Delete</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>`
   },
   "hover-card": {
     name: "HoverCard",
@@ -430,7 +723,21 @@ var COMPONENT_REGISTRY = {
       "Additional context"
     ],
     dependencies: ["@radix-ui/react-hover-card"],
-    radixPrimitive: "@radix-ui/react-hover-card"
+    radixPrimitive: "@radix-ui/react-hover-card",
+    props: {
+      openDelay: { type: "number", default: "700", description: "Delay in ms before opening" },
+      closeDelay: { type: "number", default: "300", description: "Delay in ms before closing" }
+    },
+    subComponents: ["HoverCardTrigger", "HoverCardContent"],
+    example: `<HoverCard>
+  <HoverCardTrigger asChild><Link href="#">@username</Link></HoverCardTrigger>
+  <HoverCardContent className="w-80">
+    <div className="flex gap-4">
+      <Avatar />
+      <div><p className="text-sm font-semibold">Username</p><p className="text-sm text-muted-foreground">Bio here.</p></div>
+    </div>
+  </HoverCardContent>
+</HoverCard>`
   },
   popover: {
     name: "Popover",
@@ -444,7 +751,16 @@ var COMPONENT_REGISTRY = {
       "Inline editors"
     ],
     dependencies: ["@radix-ui/react-popover"],
-    radixPrimitive: "@radix-ui/react-popover"
+    radixPrimitive: "@radix-ui/react-popover",
+    props: {
+      open: { type: "boolean", description: "Controlled open state" },
+      onOpenChange: { type: "(open: boolean) => void", description: "Callback on open/close" }
+    },
+    subComponents: ["PopoverTrigger", "PopoverContent", "PopoverAnchor"],
+    example: `<Popover>
+  <PopoverTrigger asChild><Button variant="outline">Open</Button></PopoverTrigger>
+  <PopoverContent className="w-80">Content here.</PopoverContent>
+</Popover>`
   },
   sheet: {
     name: "Sheet",
@@ -458,7 +774,19 @@ var COMPONENT_REGISTRY = {
       "Detail views"
     ],
     dependencies: ["@radix-ui/react-dialog"],
-    radixPrimitive: "@radix-ui/react-dialog"
+    radixPrimitive: "@radix-ui/react-dialog",
+    props: {
+      open: { type: "boolean", description: "Controlled open state" },
+      onOpenChange: { type: "(open: boolean) => void", description: "Callback on open/close" }
+    },
+    subComponents: ["SheetTrigger", "SheetContent", "SheetHeader", "SheetTitle", "SheetDescription", "SheetClose"],
+    example: `<Sheet>
+  <SheetTrigger asChild><Button>Open</Button></SheetTrigger>
+  <SheetContent side="right">
+    <SheetHeader><SheetTitle>Settings</SheetTitle></SheetHeader>
+    <div className="p-4">Content here.</div>
+  </SheetContent>
+</Sheet>`
   },
   tooltip: {
     name: "Tooltip",
@@ -472,7 +800,12 @@ var COMPONENT_REGISTRY = {
       "Keyboard shortcuts"
     ],
     dependencies: ["@radix-ui/react-tooltip"],
-    radixPrimitive: "@radix-ui/react-tooltip"
+    radixPrimitive: "@radix-ui/react-tooltip",
+    subComponents: ["TooltipTrigger", "TooltipContent", "TooltipProvider"],
+    example: `<Tooltip>
+  <TooltipTrigger asChild><Button variant="ghost" size="icon"><Info /></Button></TooltipTrigger>
+  <TooltipContent><p>Helpful information</p></TooltipContent>
+</Tooltip>`
   },
   // ============================================================================
   // FEEDBACK (5)
@@ -488,7 +821,15 @@ var COMPONENT_REGISTRY = {
       "Errors",
       "Success confirmations"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      variant: { type: "'default' | 'destructive'", default: "'default'", description: "Visual variant" }
+    },
+    subComponents: ["AlertTitle", "AlertDescription"],
+    example: `<Alert variant="destructive">
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>Your session has expired.</AlertDescription>
+</Alert>`
   },
   progress: {
     name: "Progress",
@@ -502,7 +843,12 @@ var COMPONENT_REGISTRY = {
       "Multi-step forms"
     ],
     dependencies: ["@radix-ui/react-progress"],
-    radixPrimitive: "@radix-ui/react-progress"
+    radixPrimitive: "@radix-ui/react-progress",
+    props: {
+      value: { type: "number", default: "0", description: "Progress value (0-100)" },
+      max: { type: "number", default: "100", description: "Maximum value" }
+    },
+    example: `<Progress value={60} />`
   },
   skeleton: {
     name: "Skeleton",
@@ -515,12 +861,22 @@ var COMPONENT_REGISTRY = {
       "Initial load",
       "Lazy loading"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      variant: { type: "'default' | 'circular' | 'rectangular' | 'text'", default: "'default'", description: "Shape variant" },
+      width: { type: "string", default: "'100%'", description: "Width (CSS value)" },
+      height: { type: "string", default: "'20px'", description: "Height (CSS value)" }
+    },
+    example: `<div className="space-y-2">
+  <Skeleton className="h-12 w-12 rounded-full" />
+  <Skeleton className="h-4 w-[250px]" />
+  <Skeleton className="h-4 w-[200px]" />
+</div>`
   },
   sonner: {
     name: "Sonner",
     category: "feedback",
-    description: "Toast notification system with queuing and positioning",
+    description: "Toast notification system with queuing and positioning. Use Toaster component in layout, call toast() to trigger.",
     keywords: ["toast", "notification", "sonner", "message", "alert"],
     useCases: [
       "Success messages",
@@ -528,7 +884,14 @@ var COMPONENT_REGISTRY = {
       "Action feedback",
       "System messages"
     ],
-    dependencies: ["sonner"]
+    dependencies: ["sonner"],
+    subComponents: ["Toaster"],
+    example: `// In layout: <Toaster />
+// To trigger:
+import { toast } from 'sonner'
+toast.success('Saved successfully')
+toast.error('Something went wrong')
+toast('Default notification')`
   },
   toast: {
     name: "Toast",
@@ -542,7 +905,13 @@ var COMPONENT_REGISTRY = {
       "Confirmation messages"
     ],
     dependencies: ["@radix-ui/react-toast"],
-    radixPrimitive: "@radix-ui/react-toast"
+    radixPrimitive: "@radix-ui/react-toast",
+    subComponents: ["ToastAction", "ToastClose", "ToastDescription", "ToastProvider", "ToastTitle", "ToastViewport"],
+    example: `// Prefer using Sonner (Toaster + toast()) for new projects.
+// This is the Radix-based alternative.
+import { useToast } from '@thesage/ui'
+const { toast } = useToast()
+toast({ title: 'Success', description: 'Item saved.' })`
   },
   // ============================================================================
   // DATA DISPLAY (6)
@@ -559,7 +928,12 @@ var COMPONENT_REGISTRY = {
       "Chat participants"
     ],
     dependencies: ["@radix-ui/react-avatar"],
-    radixPrimitive: "@radix-ui/react-avatar"
+    radixPrimitive: "@radix-ui/react-avatar",
+    subComponents: ["AvatarImage", "AvatarFallback"],
+    example: `<Avatar>
+  <AvatarImage src="/avatar.jpg" alt="User" />
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>`
   },
   badge: {
     name: "Badge",
@@ -572,7 +946,13 @@ var COMPONENT_REGISTRY = {
       "Categories",
       "Notification counts"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      variant: { type: "'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'error' | 'info'", default: "'default'", description: "Visual variant" },
+      size: { type: "'sm' | 'md' | 'lg'", default: "'md'", description: "Size variant" },
+      dot: { type: "boolean", default: "false", description: "Show animated indicator dot" }
+    },
+    example: `<Badge variant="success" dot>Active</Badge>`
   },
   calendar: {
     name: "Calendar",
@@ -585,7 +965,15 @@ var COMPONENT_REGISTRY = {
       "Booking systems",
       "Date ranges"
     ],
-    dependencies: ["react-day-picker", "date-fns"]
+    dependencies: ["react-day-picker", "date-fns"],
+    props: {
+      mode: { type: "'single' | 'multiple' | 'range'", default: "'single'", description: "Selection mode" },
+      selected: { type: "Date | Date[] | DateRange", description: "Selected date(s)" },
+      onSelect: { type: "(date) => void", description: "Callback on date selection" },
+      showOutsideDays: { type: "boolean", default: "true", description: "Show days from adjacent months" },
+      disabled: { type: "Matcher | Matcher[]", description: "Dates to disable" }
+    },
+    example: `<Calendar mode="single" selected={date} onSelect={setDate} />`
   },
   card: {
     name: "Card",
@@ -598,7 +986,20 @@ var COMPONENT_REGISTRY = {
       "Information panels",
       "Dashboard widgets"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      variant: { type: "'default' | 'glass' | 'outline'", default: "'default'", description: "Visual variant" },
+      hoverEffect: { type: "boolean", default: "false", description: "Enable hover lift and shadow" }
+    },
+    subComponents: ["CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"],
+    example: `<Card>
+  <CardHeader>
+    <CardTitle>Notifications</CardTitle>
+    <CardDescription>You have 3 unread messages.</CardDescription>
+  </CardHeader>
+  <CardContent><p>Content here.</p></CardContent>
+  <CardFooter><Button>View All</Button></CardFooter>
+</Card>`
   },
   "data-table": {
     name: "DataTable",
@@ -611,7 +1012,17 @@ var COMPONENT_REGISTRY = {
       "Reports",
       "List management"
     ],
-    dependencies: ["@tanstack/react-table"]
+    dependencies: ["@tanstack/react-table"],
+    props: {
+      columns: { type: "ColumnDef<TData, TValue>[]", description: "Column definitions from @tanstack/react-table", required: true },
+      data: { type: "TData[]", description: "Array of row data", required: true }
+    },
+    example: `import { DataTable } from '@thesage/ui/tables'
+const columns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+]
+<DataTable columns={columns} data={users} />`
   },
   table: {
     name: "Table",
@@ -624,7 +1035,22 @@ var COMPONENT_REGISTRY = {
       "Comparison tables",
       "Pricing tables"
     ],
-    dependencies: []
+    dependencies: [],
+    subComponents: ["TableHeader", "TableBody", "TableFooter", "TableRow", "TableHead", "TableCell", "TableCaption"],
+    example: `<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>John</TableCell>
+      <TableCell>Active</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>`
   },
   heading: {
     name: "Heading",
@@ -637,7 +1063,13 @@ var COMPONENT_REGISTRY = {
       "Content hierarchy",
       "Semantic HTML structure"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      level: { type: "1 | 2 | 3 | 4 | 5 | 6", default: "2", description: "Heading level (renders h1-h6)" },
+      as: { type: "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", description: "Override rendered HTML element" }
+    },
+    example: `<Heading level={1}>Page Title</Heading>
+<Heading level={2}>Section Title</Heading>`
   },
   text: {
     name: "Text",
@@ -650,7 +1082,14 @@ var COMPONENT_REGISTRY = {
       "Helper text",
       "Labels and captions"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      variant: { type: "'default' | 'secondary' | 'muted' | 'lead'", default: "'default'", description: "Text style variant" },
+      as: { type: "'p' | 'span' | 'div'", default: "'p'", description: "HTML element to render" },
+      size: { type: "'sm' | 'base' | 'lg'", default: "'base'", description: "Font size" }
+    },
+    example: `<Text variant="lead">Important introductory text.</Text>
+<Text variant="muted" size="sm">Helper text below an input.</Text>`
   },
   code: {
     name: "Code",
@@ -663,7 +1102,17 @@ var COMPONENT_REGISTRY = {
       "Technical content",
       "Inline code references"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      inline: { type: "boolean", default: "false", description: "Render as inline code (true) or block (false)" },
+      showCopy: { type: "boolean", default: "true", description: "Show copy button for block code" }
+    },
+    example: `// Inline
+<Code inline>npm install @thesage/ui</Code>
+
+// Block
+<Code>{\`const x = 1;
+const y = 2;\`}</Code>`
   },
   "collapsible-code-block": {
     name: "CollapsibleCodeBlock",
@@ -676,7 +1125,20 @@ var COMPONENT_REGISTRY = {
       "Tutorial code snippets",
       "API examples"
     ],
-    dependencies: ["@thesage/tokens"]
+    dependencies: ["@thesage/tokens"],
+    props: {
+      code: { type: "string", description: "Source code string", required: true },
+      language: { type: "'tsx' | 'typescript' | 'javascript' | 'jsx' | 'css' | 'html' | 'json' | 'bash'", default: "'tsx'", description: "Language for syntax highlighting" },
+      title: { type: "string", description: "Optional title above the code block" },
+      maxLines: { type: "number", default: "10", description: "Lines to show before collapsing" },
+      defaultExpanded: { type: "boolean", default: "false", description: "Start in expanded state" }
+    },
+    example: `<CollapsibleCodeBlock
+  code="const Button = () => <button>Click</button>"
+  language="tsx"
+  title="Button.tsx"
+  maxLines={5}
+/>`
   },
   "description-list": {
     name: "DescriptionList",
@@ -689,7 +1151,16 @@ var COMPONENT_REGISTRY = {
       "Metadata display",
       "Settings summaries"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      items: { type: "{ label: string; value: ReactNode }[]", description: "Array of label-value pairs", required: true },
+      layout: { type: "'row' | 'column'", default: "'row'", description: "Layout direction for label/value pairs" }
+    },
+    example: `<DescriptionList items={[
+  { label: 'Name', value: 'John Doe' },
+  { label: 'Email', value: 'john@example.com' },
+  { label: 'Role', value: <Badge>Admin</Badge> },
+]} />`
   },
   // ============================================================================
   // LAYOUT (8)
@@ -706,7 +1177,18 @@ var COMPONENT_REGISTRY = {
       "Information disclosure"
     ],
     dependencies: ["@radix-ui/react-accordion"],
-    radixPrimitive: "@radix-ui/react-accordion"
+    radixPrimitive: "@radix-ui/react-accordion",
+    props: {
+      type: { type: "'single' | 'multiple'", description: "Allow single or multiple open items", required: true },
+      collapsible: { type: "boolean", default: "false", description: 'Allow closing all items (type="single" only)' }
+    },
+    subComponents: ["AccordionItem", "AccordionTrigger", "AccordionContent"],
+    example: `<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>Yes. It follows WAI-ARIA patterns.</AccordionContent>
+  </AccordionItem>
+</Accordion>`
   },
   "aspect-ratio": {
     name: "AspectRatio",
@@ -720,7 +1202,13 @@ var COMPONENT_REGISTRY = {
       "Card images"
     ],
     dependencies: ["@radix-ui/react-aspect-ratio"],
-    radixPrimitive: "@radix-ui/react-aspect-ratio"
+    radixPrimitive: "@radix-ui/react-aspect-ratio",
+    props: {
+      ratio: { type: "number", default: "1", description: "Aspect ratio as a number (e.g. 16/9)" }
+    },
+    example: `<AspectRatio ratio={16 / 9}>
+  <img src="/image.jpg" alt="Photo" className="rounded-md object-cover w-full h-full" />
+</AspectRatio>`
   },
   carousel: {
     name: "Carousel",
@@ -733,7 +1221,23 @@ var COMPONENT_REGISTRY = {
       "Content sliders",
       "Testimonials"
     ],
-    dependencies: ["embla-carousel-react"]
+    dependencies: ["embla-carousel-react"],
+    props: {
+      orientation: { type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Scroll direction" },
+      opts: { type: "CarouselOptions", description: "Embla Carousel options (loop, align, etc.)" },
+      plugins: { type: "CarouselPlugin", description: "Embla Carousel plugins (autoplay, etc.)" },
+      setApi: { type: "(api: CarouselApi) => void", description: "Callback to get carousel API ref" }
+    },
+    subComponents: ["CarouselContent", "CarouselItem", "CarouselPrevious", "CarouselNext"],
+    example: `<Carousel>
+  <CarouselContent>
+    <CarouselItem>Slide 1</CarouselItem>
+    <CarouselItem>Slide 2</CarouselItem>
+    <CarouselItem>Slide 3</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>`
   },
   collapsible: {
     name: "Collapsible",
@@ -747,7 +1251,19 @@ var COMPONENT_REGISTRY = {
       "Details disclosure"
     ],
     dependencies: ["@radix-ui/react-collapsible"],
-    radixPrimitive: "@radix-ui/react-collapsible"
+    radixPrimitive: "@radix-ui/react-collapsible",
+    props: {
+      open: { type: "boolean", description: "Controlled open state" },
+      onOpenChange: { type: "(open: boolean) => void", description: "Callback on open/close" },
+      defaultOpen: { type: "boolean", default: "false", description: "Default open state" }
+    },
+    subComponents: ["CollapsibleTrigger", "CollapsibleContent"],
+    example: `<Collapsible>
+  <CollapsibleTrigger asChild><Button variant="ghost">Toggle</Button></CollapsibleTrigger>
+  <CollapsibleContent>
+    <p>Hidden content revealed on click.</p>
+  </CollapsibleContent>
+</Collapsible>`
   },
   "date-picker": {
     name: "DatePicker",
@@ -760,7 +1276,14 @@ var COMPONENT_REGISTRY = {
       "Scheduling",
       "Filters"
     ],
-    dependencies: ["react-day-picker", "date-fns", "@radix-ui/react-popover"]
+    dependencies: ["react-day-picker", "date-fns", "@radix-ui/react-popover"],
+    props: {
+      date: { type: "Date", description: "Selected date" },
+      onDateChange: { type: "(date: Date | undefined) => void", description: "Callback on date change" },
+      placeholder: { type: "string", default: "'Pick a date'", description: "Placeholder text" },
+      disabled: { type: "boolean", default: "false", description: "Disable the date picker" }
+    },
+    example: `<DatePicker date={date} onDateChange={setDate} placeholder="Select date" />`
   },
   resizable: {
     name: "Resizable",
@@ -773,7 +1296,16 @@ var COMPONENT_REGISTRY = {
       "Dashboard layouts",
       "Adjustable sidebars"
     ],
-    dependencies: ["react-resizable-panels"]
+    dependencies: ["react-resizable-panels"],
+    props: {
+      direction: { type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Panel layout direction" }
+    },
+    subComponents: ["ResizablePanelGroup", "ResizablePanel", "ResizableHandle"],
+    example: `<ResizablePanelGroup direction="horizontal">
+  <ResizablePanel defaultSize={50}>Left panel</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel defaultSize={50}>Right panel</ResizablePanel>
+</ResizablePanelGroup>`
   },
   "scroll-area": {
     name: "ScrollArea",
@@ -787,7 +1319,11 @@ var COMPONENT_REGISTRY = {
       "Code displays"
     ],
     dependencies: ["@radix-ui/react-scroll-area"],
-    radixPrimitive: "@radix-ui/react-scroll-area"
+    radixPrimitive: "@radix-ui/react-scroll-area",
+    subComponents: ["ScrollBar"],
+    example: `<ScrollArea className="h-[200px] w-full rounded-md border p-4">
+  <div>Long scrollable content here...</div>
+</ScrollArea>`
   },
   separator: {
     name: "Separator",
@@ -801,7 +1337,11 @@ var COMPONENT_REGISTRY = {
       "Visual hierarchy"
     ],
     dependencies: ["@radix-ui/react-separator"],
-    radixPrimitive: "@radix-ui/react-separator"
+    radixPrimitive: "@radix-ui/react-separator",
+    props: {
+      orientation: { type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Orientation" }
+    },
+    example: `<Separator orientation="horizontal" />`
   },
   grid: {
     name: "Grid",
@@ -814,7 +1354,16 @@ var COMPONENT_REGISTRY = {
       "Dashboard layouts",
       "Responsive content grids"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      columns: { type: "number | { sm?: number; md?: number; lg?: number }", default: "3", description: "Number of grid columns (responsive object supported)" },
+      gap: { type: "number | string", default: "4", description: "Gap between grid items (Tailwind spacing scale)" }
+    },
+    example: `<Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={4}>
+  <Card>Item 1</Card>
+  <Card>Item 2</Card>
+  <Card>Item 3</Card>
+</Grid>`
   },
   container: {
     name: "Container",
@@ -827,7 +1376,15 @@ var COMPONENT_REGISTRY = {
       "Responsive widths",
       "Content alignment"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      size: { type: "'sm' | 'md' | 'lg' | 'xl' | 'full'", default: "'lg'", description: "Max-width variant" },
+      padding: { type: "boolean", default: "true", description: "Apply horizontal padding" }
+    },
+    example: `<Container size="lg">
+  <Heading level={1}>Page Title</Heading>
+  <Text>Content within max-width container.</Text>
+</Container>`
   },
   stack: {
     name: "Stack",
@@ -840,7 +1397,17 @@ var COMPONENT_REGISTRY = {
       "Form layouts",
       "Button groups"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      direction: { type: "'vertical' | 'horizontal'", default: "'vertical'", description: "Stack direction" },
+      gap: { type: "number | string", default: "4", description: "Gap between items (Tailwind spacing scale)" },
+      align: { type: "'start' | 'center' | 'end' | 'stretch'", default: "'stretch'", description: "Cross-axis alignment" },
+      justify: { type: "'start' | 'center' | 'end' | 'between'", description: "Main-axis alignment" }
+    },
+    example: `<Stack direction="horizontal" gap={2} align="center">
+  <Button>Save</Button>
+  <Button variant="outline">Cancel</Button>
+</Stack>`
   },
   sidebar: {
     name: "Sidebar",
@@ -854,7 +1421,21 @@ var COMPONENT_REGISTRY = {
       "Mobile menus"
     ],
     dependencies: ["@radix-ui/react-slot"],
-    radixPrimitive: "@radix-ui/react-slot"
+    radixPrimitive: "@radix-ui/react-slot",
+    props: {
+      isOpen: { type: "boolean", default: "true", description: "Whether sidebar is visible/expanded" }
+    },
+    subComponents: ["SidebarHeader", "SidebarContent", "SidebarFooter", "SidebarItem"],
+    example: `<Sidebar>
+  <SidebarHeader><h2>My App</h2></SidebarHeader>
+  <SidebarContent>
+    <SidebarItem icon={<Home />} isActive>Dashboard</SidebarItem>
+    <SidebarItem icon={<Settings />}>Settings</SidebarItem>
+  </SidebarContent>
+  <SidebarFooter>
+    <SidebarItem icon={<LogOut />}>Logout</SidebarItem>
+  </SidebarFooter>
+</Sidebar>`
   },
   header: {
     name: "Header",
@@ -867,7 +1448,20 @@ var COMPONENT_REGISTRY = {
       "Sticky headers",
       "Mobile-friendly navigation"
     ],
-    dependencies: ["lucide-react"]
+    dependencies: ["lucide-react"],
+    props: {
+      logo: { type: "ReactNode", description: "Logo element for header" },
+      links: { type: "{ label: string; href: string }[]", description: "Navigation links" },
+      sticky: { type: "boolean", default: "true", description: "Stick to top on scroll" },
+      transparent: { type: "boolean", default: "false", description: "Transparent background (for hero sections)" }
+    },
+    example: `<Header
+  logo={<Brand />}
+  links={[
+    { label: 'Home', href: '/' },
+    { label: 'About', href: '/about' },
+  ]}
+/>`
   },
   footer: {
     name: "Footer",
@@ -880,12 +1474,21 @@ var COMPONENT_REGISTRY = {
       "Contact information",
       "Copyright notices"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      columns: { type: "{ title: string; links: { label: string; href: string }[] }[]", description: "Footer navigation columns" },
+      copyright: { type: "string", description: "Copyright text" },
+      socialLinks: { type: "{ icon: ReactNode; href: string }[]", description: "Social media links" }
+    },
+    example: `<Footer
+  columns={[{ title: 'Product', links: [{ label: 'Docs', href: '/docs' }] }]}
+  copyright="\xA9 2026 My Company"
+/>`
   },
   "customizer-panel": {
     name: "CustomizerPanel",
     category: "layout",
-    description: "Floating panel for theme, mode, and motion customization",
+    description: "Floating panel for theme, mode, and motion customization. Reads from ThemeProvider context.",
     keywords: ["customizer", "theme", "settings", "preferences", "dark-mode"],
     useCases: [
       "Theme selection",
@@ -893,7 +1496,9 @@ var COMPONENT_REGISTRY = {
       "Motion preferences",
       "User experience customization"
     ],
-    dependencies: ["lucide-react", "@thesage/tokens"]
+    dependencies: ["lucide-react", "@thesage/tokens"],
+    example: `// Place in your layout. It reads theme state from ThemeProvider.
+<CustomizerPanel />`
   },
   "page-layout": {
     name: "PageLayout",
@@ -906,7 +1511,19 @@ var COMPONENT_REGISTRY = {
       "Documentation pages",
       "Dashboard layouts"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      header: { type: "ReactNode", description: "Header element" },
+      footer: { type: "ReactNode", description: "Footer element" },
+      sidebar: { type: "ReactNode", description: "Optional sidebar" },
+      breadcrumbs: { type: "ReactNode", description: "Breadcrumb navigation" }
+    },
+    example: `<PageLayout
+  header={<Header />}
+  footer={<Footer />}
+>
+  <main>Page content</main>
+</PageLayout>`
   },
   "page-template": {
     name: "PageTemplate",
@@ -919,7 +1536,15 @@ var COMPONENT_REGISTRY = {
       "Standard app pages",
       "Content-focused layouts"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      title: { type: "string", description: "Page title" },
+      description: { type: "string", description: "Page description" },
+      showCustomizer: { type: "boolean", default: "true", description: "Show customizer panel" }
+    },
+    example: `<PageTemplate title="Documentation" description="Learn the design system.">
+  <div>Content here.</div>
+</PageTemplate>`
   },
   // ============================================================================
   // ACTIONS - Additional (2 more)
@@ -935,7 +1560,13 @@ var COMPONENT_REGISTRY = {
       "External references",
       "Inline actions"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      href: { type: "string", description: "Link URL", required: true },
+      variant: { type: "'default' | 'inline'", default: "'default'", description: "Default for standalone links, inline for text links" },
+      hoverEffect: { type: "boolean", default: "true", description: "Enable hover effect" }
+    },
+    example: `<Link href="/about" variant="inline">Learn More</Link>`
   },
   magnetic: {
     name: "Magnetic",
@@ -948,7 +1579,14 @@ var COMPONENT_REGISTRY = {
       "Playful interactions",
       "Cursor attraction"
     ],
-    dependencies: ["framer-motion"]
+    dependencies: ["framer-motion"],
+    props: {
+      children: { type: "ReactNode", description: "Element to apply magnetic effect to", required: true },
+      strength: { type: "number", default: "0.5", description: "Magnetic pull strength (0-1)" }
+    },
+    example: `<Magnetic strength={0.5}>
+  <Button>Hover me</Button>
+</Magnetic>`
   },
   // ============================================================================
   // FORMS - Additional (7 more)
@@ -964,7 +1602,14 @@ var COMPONENT_REGISTRY = {
       "Command palette trigger",
       "Data filtering"
     ],
-    dependencies: ["lucide-react"]
+    dependencies: ["lucide-react"],
+    props: {
+      value: { type: "string", description: "Controlled search value" },
+      onChange: { type: "(value: string) => void", description: "Callback on value change" },
+      placeholder: { type: "string", default: "'Search...'", description: "Placeholder text" },
+      onClear: { type: "() => void", description: "Callback on clear button click" }
+    },
+    example: `<SearchBar value={query} onChange={setQuery} placeholder="Search components..." />`
   },
   "filter-button": {
     name: "FilterButton",
@@ -977,12 +1622,18 @@ var COMPONENT_REGISTRY = {
       "Content filtering",
       "Quick filters"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      active: { type: "boolean", default: "false", description: "Whether filter is active" },
+      onClick: { type: "() => void", description: "Click handler" },
+      children: { type: "ReactNode", description: "Filter label", required: true }
+    },
+    example: `<FilterButton active={category === 'all'} onClick={() => setCategory('all')}>All</FilterButton>`
   },
   "theme-switcher": {
     name: "ThemeSwitcher",
     category: "forms",
-    description: "Multi-theme selector for switching between Studio, Terra, and Volt",
+    description: "Multi-theme selector for switching between Studio, Terra, and Volt. Reads/writes to ThemeProvider context.",
     keywords: ["theme", "switcher", "selector", "studio", "terra", "volt"],
     useCases: [
       "Theme selection",
@@ -990,12 +1641,14 @@ var COMPONENT_REGISTRY = {
       "User preferences",
       "Design switching"
     ],
-    dependencies: []
+    dependencies: [],
+    example: `// Reads from ThemeProvider context, no props needed.
+<ThemeSwitcher />`
   },
   "theme-toggle": {
     name: "ThemeToggle",
     category: "forms",
-    description: "Light/dark mode toggle with smooth transitions",
+    description: "Light/dark mode toggle with smooth transitions. Reads/writes to ThemeProvider context.",
     keywords: ["theme", "toggle", "dark-mode", "light-mode", "mode"],
     useCases: [
       "Dark mode switch",
@@ -1003,7 +1656,9 @@ var COMPONENT_REGISTRY = {
       "Theme mode control",
       "Accessibility preference"
     ],
-    dependencies: ["lucide-react"]
+    dependencies: ["lucide-react"],
+    example: `// Reads from ThemeProvider context, no props needed.
+<ThemeToggle />`
   },
   "color-picker": {
     name: "ColorPicker",
@@ -1016,7 +1671,13 @@ var COMPONENT_REGISTRY = {
       "Design tools",
       "User preferences"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      value: { type: "string", description: "Selected color (hex string)" },
+      onChange: { type: "(color: string) => void", description: "Callback on color change" },
+      presets: { type: "string[]", description: "Preset color swatches (hex values)" }
+    },
+    example: `<ColorPicker value={color} onChange={setColor} presets={['#ef4444', '#3b82f6', '#22c55e']} />`
   },
   "drag-drop": {
     name: "DragDrop",
@@ -1029,7 +1690,14 @@ var COMPONENT_REGISTRY = {
       "Document uploads",
       "Bulk imports"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      onDrop: { type: "(files: File[]) => void", description: "Callback when files are dropped", required: true },
+      accept: { type: "string", description: 'Accepted file types (e.g. "image/*")' },
+      maxSize: { type: "number", description: "Max file size in bytes" },
+      multiple: { type: "boolean", default: "true", description: "Allow multiple files" }
+    },
+    example: `<DragDrop onDrop={(files) => handleUpload(files)} accept="image/*" maxSize={5242880} />`
   },
   "text-field": {
     name: "TextField",
@@ -1042,7 +1710,14 @@ var COMPONENT_REGISTRY = {
       "Validated inputs",
       "Complete form controls"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      label: { type: "string", description: "Field label text" },
+      helperText: { type: "string", description: "Helper text below input" },
+      error: { type: "string", description: "Error message (shows error state when set)" },
+      required: { type: "boolean", default: "false", description: "Mark as required" }
+    },
+    example: `<TextField label="Email" helperText="We'll never share your email." error={errors.email} required />`
   },
   // ============================================================================
   // NAVIGATION - Additional (4 more)
@@ -1058,7 +1733,13 @@ var COMPONENT_REGISTRY = {
       "Header navigation",
       "Active page indicators"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      href: { type: "string", description: "Link URL", required: true },
+      isActive: { type: "boolean", default: "false", description: "Active state indicator" },
+      variant: { type: "'default' | 'subtle'", default: "'default'", description: "Visual variant" }
+    },
+    example: `<NavLink href="/dashboard" isActive>Dashboard</NavLink>`
   },
   "secondary-nav": {
     name: "SecondaryNav",
@@ -1071,7 +1752,14 @@ var COMPONENT_REGISTRY = {
       "Tab-like navigation",
       "Category switching"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      items: { type: "{ label: string; href: string; isActive?: boolean }[]", description: "Navigation items", required: true }
+    },
+    example: `<SecondaryNav items={[
+  { label: 'Overview', href: '/overview', isActive: true },
+  { label: 'Settings', href: '/settings' },
+]} />`
   },
   "tertiary-nav": {
     name: "TertiaryNav",
@@ -1084,7 +1772,14 @@ var COMPONENT_REGISTRY = {
       "Multi-level content",
       "Nested categories"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      items: { type: "{ label: string; href: string; isActive?: boolean }[]", description: "Navigation items", required: true }
+    },
+    example: `<TertiaryNav items={[
+  { label: 'Props', href: '#props', isActive: true },
+  { label: 'Examples', href: '#examples' },
+]} />`
   },
   breadcrumbs: {
     name: "Breadcrumbs",
@@ -1097,7 +1792,16 @@ var COMPONENT_REGISTRY = {
       "Hierarchical navigation",
       "Back navigation"
     ],
-    dependencies: ["lucide-react"]
+    dependencies: ["lucide-react"],
+    props: {
+      items: { type: "{ label: string; href?: string }[]", description: "Breadcrumb trail items (last item is current page)", required: true },
+      showHome: { type: "boolean", default: "true", description: "Show home icon as first item" }
+    },
+    example: `<Breadcrumbs items={[
+  { label: 'Home', href: '/' },
+  { label: 'Components', href: '/components' },
+  { label: 'Button' },
+]} />`
   },
   // ============================================================================
   // OVERLAYS - Additional (2 more)
@@ -1114,7 +1818,19 @@ var COMPONENT_REGISTRY = {
       "Content overlays"
     ],
     dependencies: ["@radix-ui/react-dialog"],
-    radixPrimitive: "@radix-ui/react-dialog"
+    radixPrimitive: "@radix-ui/react-dialog",
+    props: {
+      open: { type: "boolean", description: "Controlled open state" },
+      onOpenChange: { type: "(open: boolean) => void", description: "Callback on open/close" },
+      title: { type: "string", description: "Modal title" },
+      description: { type: "string", description: "Modal description" }
+    },
+    example: `<Modal open={isOpen} onOpenChange={setIsOpen} title="Confirm" description="Are you sure?">
+  <div className="flex gap-2 justify-end">
+    <Button variant="outline" onClick={() => setIsOpen(false)}>Cancel</Button>
+    <Button onClick={handleConfirm}>Confirm</Button>
+  </div>
+</Modal>`
   },
   dropdown: {
     name: "Dropdown",
@@ -1128,7 +1844,12 @@ var COMPONENT_REGISTRY = {
       "Option lists"
     ],
     dependencies: ["@radix-ui/react-dropdown-menu"],
-    radixPrimitive: "@radix-ui/react-dropdown-menu"
+    radixPrimitive: "@radix-ui/react-dropdown-menu",
+    props: {
+      open: { type: "boolean", description: "Controlled open state" },
+      onOpenChange: { type: "(open: boolean) => void", description: "Callback on open/close" }
+    },
+    example: `// For most cases, use DropdownMenu directly. This is a simplified wrapper.`
   },
   // ============================================================================
   // FEEDBACK - Additional (2 more)
@@ -1144,7 +1865,13 @@ var COMPONENT_REGISTRY = {
       "Data fetching",
       "Async operations"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      size: { type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'", default: "'md'", description: "Spinner size" },
+      variant: { type: "'primary' | 'secondary' | 'inherit'", default: "'primary'", description: "Color variant" }
+    },
+    example: `<Spinner size="md" />
+<Button disabled><Spinner size="xs" variant="inherit" /> Loading...</Button>`
   },
   "progress-bar": {
     name: "ProgressBar",
@@ -1157,7 +1884,14 @@ var COMPONENT_REGISTRY = {
       "Loading indicators",
       "Step completion"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      value: { type: "number", default: "0", description: "Progress value (0-100)" },
+      variant: { type: "'primary' | 'success' | 'warning' | 'error' | 'info'", default: "'primary'", description: "Color variant" },
+      size: { type: "'sm' | 'md' | 'lg'", default: "'md'", description: "Bar height" },
+      showLabel: { type: "boolean", default: "false", description: "Show percentage label" }
+    },
+    example: `<ProgressBar value={75} variant="success" showLabel />`
   },
   // ============================================================================
   // DATA DISPLAY - Additional (5 more)
@@ -1173,7 +1907,13 @@ var COMPONENT_REGISTRY = {
       "Footer branding",
       "App identity"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      variant: { type: "'default' | 'mark'", default: "'default'", description: "Full logo or mark only" },
+      size: { type: "'sm' | 'md' | 'lg'", default: "'md'", description: "Logo size" },
+      href: { type: "string", description: "Optional link URL (wraps in anchor)" }
+    },
+    example: `<Brand size="md" href="/" />`
   },
   "aspect-image": {
     name: "AspectImage",
@@ -1186,7 +1926,15 @@ var COMPONENT_REGISTRY = {
       "Product images",
       "Thumbnails with captions"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      src: { type: "string", description: "Image source URL", required: true },
+      alt: { type: "string", description: "Alt text for accessibility", required: true },
+      ratio: { type: "number", default: "16/9", description: "Aspect ratio" },
+      rounded: { type: "'none' | 'sm' | 'md' | 'lg' | 'full'", default: "'md'", description: "Border radius" },
+      caption: { type: "string", description: "Optional caption text below image" }
+    },
+    example: `<AspectImage src="/photo.jpg" alt="Team photo" ratio={4/3} caption="Our team" />`
   },
   "variable-weight-text": {
     name: "VariableWeightText",
@@ -1199,7 +1947,14 @@ var COMPONENT_REGISTRY = {
       "Attention grabbing",
       "Variable font showcase"
     ],
-    dependencies: ["framer-motion"]
+    dependencies: ["framer-motion"],
+    props: {
+      children: { type: "string", description: "Text content", required: true },
+      speed: { type: "number", default: "2", description: "Animation speed in seconds" },
+      minWeight: { type: "number", default: "100", description: "Minimum font weight" },
+      maxWeight: { type: "number", default: "900", description: "Maximum font weight" }
+    },
+    example: `<VariableWeightText speed={2} minWeight={200} maxWeight={800}>Design</VariableWeightText>`
   },
   typewriter: {
     name: "Typewriter",
@@ -1212,7 +1967,14 @@ var COMPONENT_REGISTRY = {
       "Dynamic headings",
       "Attention text"
     ],
-    dependencies: ["framer-motion"]
+    dependencies: ["framer-motion"],
+    props: {
+      words: { type: "string[]", description: "Words to cycle through", required: true },
+      speed: { type: "number", default: "100", description: "Typing speed in ms per character" },
+      loop: { type: "boolean", default: "true", description: "Loop through words continuously" },
+      cursor: { type: "boolean", default: "true", description: "Show blinking cursor" }
+    },
+    example: `<Typewriter words={['Developer', 'Designer', 'Creator']} speed={80} />`
   },
   "github-icon": {
     name: "GitHubIcon",
@@ -1225,7 +1987,11 @@ var COMPONENT_REGISTRY = {
       "Repository links",
       "Open source badges"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      size: { type: "number", default: "24", description: "Icon size in pixels" }
+    },
+    example: `<a href="https://github.com/you"><GitHubIcon size={20} /></a>`
   },
   // ============================================================================
   // SPECIALTY - Backgrounds (3)
@@ -1241,7 +2007,15 @@ var COMPONENT_REGISTRY = {
       "Loading screens",
       "Sci-fi themes"
     ],
-    dependencies: ["framer-motion"]
+    dependencies: ["framer-motion"],
+    props: {
+      speed: { type: "number", default: "1", description: "Warp speed multiplier" },
+      density: { type: "number", default: "200", description: "Number of stars" },
+      color: { type: "string", default: "'white'", description: "Star color" }
+    },
+    example: `<WarpBackground speed={1.5} density={300}>
+  <div className="relative z-10">Content over stars</div>
+</WarpBackground>`
   },
   "faulty-terminal": {
     name: "FaultyTerminal",
@@ -1254,7 +2028,13 @@ var COMPONENT_REGISTRY = {
       "Error pages",
       "Terminal UIs"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      children: { type: "ReactNode", description: "Content to render inside terminal" }
+    },
+    example: `<FaultyTerminal>
+  <p>$ system initializing...</p>
+</FaultyTerminal>`
   },
   "orb-background": {
     name: "OrbBackground",
@@ -1267,7 +2047,14 @@ var COMPONENT_REGISTRY = {
       "Ambient backgrounds",
       "Modern aesthetics"
     ],
-    dependencies: ["framer-motion"]
+    dependencies: ["framer-motion"],
+    props: {
+      color: { type: "string", description: "Primary orb color" },
+      size: { type: "number", default: "400", description: "Orb diameter in pixels" }
+    },
+    example: `<OrbBackground color="var(--color-primary)" size={500}>
+  <div className="relative z-10">Content</div>
+</OrbBackground>`
   },
   // ============================================================================
   // SPECIALTY - Cursor (2)
@@ -1275,7 +2062,7 @@ var COMPONENT_REGISTRY = {
   "splash-cursor": {
     name: "SplashCursor",
     category: "cursor",
-    description: "Custom cursor with splash/ripple effect on click",
+    description: "Custom cursor with splash/ripple effect on click. WebGL-based fluid simulation.",
     keywords: ["cursor", "splash", "ripple", "click", "effect", "interactive"],
     useCases: [
       "Interactive experiences",
@@ -1283,7 +2070,9 @@ var COMPONENT_REGISTRY = {
       "Playful interfaces",
       "Click feedback"
     ],
-    dependencies: []
+    dependencies: [],
+    example: `// Place once in layout. Replaces default cursor globally.
+<SplashCursor />`
   },
   "target-cursor": {
     name: "TargetCursor",
@@ -1296,7 +2085,9 @@ var COMPONENT_REGISTRY = {
       "Interactive elements",
       "Custom pointers"
     ],
-    dependencies: []
+    dependencies: [],
+    example: `// Place once in layout. Replaces default cursor globally.
+<TargetCursor />`
   },
   // ============================================================================
   // SPECIALTY - Motion (1)
@@ -1312,7 +2103,17 @@ var COMPONENT_REGISTRY = {
       "Architecture diagrams",
       "Interactive connections"
     ],
-    dependencies: ["framer-motion"]
+    dependencies: ["framer-motion"],
+    props: {
+      fromRef: { type: "RefObject<HTMLElement>", description: "Ref to source element", required: true },
+      toRef: { type: "RefObject<HTMLElement>", description: "Ref to target element", required: true },
+      duration: { type: "number", default: "3", description: "Animation duration in seconds" }
+    },
+    example: `const fromRef = useRef(null)
+const toRef = useRef(null)
+<div ref={fromRef}>Source</div>
+<div ref={toRef}>Target</div>
+<AnimatedBeam fromRef={fromRef} toRef={toRef} />`
   },
   // ============================================================================
   // SPECIALTY - Blocks (2)
@@ -1328,12 +2129,23 @@ var COMPONENT_REGISTRY = {
       "Marketing sections",
       "Feature highlights"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      title: { type: "string", description: "Main heading text", required: true },
+      subtitle: { type: "string", description: "Subtitle or tagline" },
+      cta: { type: "ReactNode", description: "Call-to-action element (Button, etc.)" },
+      background: { type: "ReactNode", description: "Optional background element (WarpBackground, OrbBackground, etc.)" }
+    },
+    example: `<Hero
+  title="Build Something Beautiful"
+  subtitle="A design system that brings joy."
+  cta={<Button size="lg">Get Started</Button>}
+/>`
   },
   "open-graph-card": {
     name: "OpenGraphCard",
     category: "blocks",
-    description: "Social media preview card for Open Graph metadata",
+    description: "Social media preview card for Open Graph metadata. Use in opengraph-image.tsx.",
     keywords: ["open-graph", "social", "preview", "card", "meta", "share"],
     useCases: [
       "Social sharing previews",
@@ -1341,7 +2153,21 @@ var COMPONENT_REGISTRY = {
       "Meta card generation",
       "Marketing previews"
     ],
-    dependencies: []
+    dependencies: [],
+    props: {
+      title: { type: "string", default: "'Sage Design Engine'", description: "Main title text" },
+      description: { type: "string", description: "Subtitle text" },
+      variant: { type: "'primary' | 'secondary' | 'accent' | 'sage' | 'emerald' | 'gradient'", default: "'sage'", description: "Visual style variant" },
+      icon: { type: "ReactNode", description: "Custom logo or icon element" },
+      gradient: { type: "{ type: string; angle: number; colors: string[] }", description: 'Custom gradient config (variant="gradient")' },
+      primaryColor: { type: "string", description: "Override primary color (hex)" },
+      secondaryColor: { type: "string", description: "Override secondary color (hex)" },
+      accentColor: { type: "string", description: "Override accent color (hex)" }
+    },
+    example: `// In opengraph-image.tsx:
+export default function OGImage() {
+  return <OpenGraphCard title="My Page" description="A great description" variant="primary" />
+}`
   }
 };
 function getComponentsByCategory(category) {
@@ -1491,6 +2317,47 @@ function formatComponentDetails(component) {
 ${component.description}
 
 `;
+  const importParts = [component.name];
+  if (component.subComponents) {
+    importParts.push(...component.subComponents);
+  }
+  output += `## Import
+`;
+  output += `\`\`\`typescript
+import { ${importParts.join(", ")} } from '@thesage/ui';
+\`\`\`
+
+`;
+  if (component.props && Object.keys(component.props).length > 0) {
+    output += `## Props
+
+`;
+    output += `| Prop | Type | Default | Description |
+`;
+    output += `|------|------|---------|-------------|
+`;
+    Object.entries(component.props).forEach(([name, prop]) => {
+      const required = prop.required ? " **(required)**" : "";
+      const defaultVal = prop.default || "-";
+      output += `| ${name} | \`${prop.type}\` | ${defaultVal} | ${prop.description}${required} |
+`;
+    });
+    output += "\n";
+  }
+  if (component.subComponents && component.subComponents.length > 0) {
+    output += `## Sub-Components
+`;
+    output += component.subComponents.join(", ") + "\n\n";
+  }
+  if (component.example) {
+    output += `## Example
+`;
+    output += `\`\`\`tsx
+${component.example}
+\`\`\`
+
+`;
+  }
   output += `## Use Cases
 `;
   component.useCases.forEach((useCase) => {
@@ -1498,9 +2365,6 @@ ${component.description}
 `;
   });
   output += "\n";
-  output += `## Keywords
-`;
-  output += component.keywords.join(", ") + "\n\n";
   if (component.dependencies.length > 0) {
     output += `## Dependencies
 `;
@@ -1517,16 +2381,12 @@ ${component.description}
 
 `;
   }
-  output += `## Import
-`;
-  output += `\`\`\`typescript
-import { ${component.name} } from '@thesage/ui';
-\`\`\`
-
-`;
   output += `## Documentation
 `;
-  output += `View full documentation at: https://thesage.dev/#${component.category}/${component.name.toLowerCase().replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}
+  output += `View full documentation at: https://thesage.dev/docs#${component.category}/${component.name.toLowerCase().replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}
+`;
+  output += `
+Full API reference: https://thesage.dev/llms-full.txt
 `;
   return output;
 }