@iblai/mcp 1.0.0 → 1.1.3

package/dist/tools/component-info.js

@@ -19,18 +19,17 @@ const components = {
     Button: `# Button Component
 
 \`\`\`typescript
-import { Button } from '@iblai/web-containers';
+import { Button } from '@iblai/iblai-js/web-containers';
 
-interface ButtonProps {
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-  size?: 'default' | 'sm' | 'lg' | 'icon';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
   asChild?: boolean;
-  disabled?: boolean;
-  className?: string;
-  onClick?: () => void;
-  children: React.ReactNode;
 }
 
+// Variants
+// variant: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+// size: 'default' | 'sm' | 'lg' | 'icon'
+
 // Examples
 <Button>Click me</Button>
 <Button variant="destructive">Delete</Button>
@@ -56,7 +55,7 @@ import {
   CardDescription,
   CardContent,
   CardFooter
-} from '@iblai/web-containers';
+} from '@iblai/iblai-js/web-containers';
 
 <Card>
   <CardHeader>
@@ -70,14 +69,6 @@ import {
     <Button>Action</Button>
   </CardFooter>
 </Card>
-
-// With custom styling
-<Card className="w-[350px]">
-  <CardHeader className="pb-2">
-    <CardTitle className="text-lg">Compact Card</CardTitle>
-  </CardHeader>
-  <CardContent>Content</CardContent>
-</Card>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/card.tsx\``,
@@ -88,13 +79,14 @@ import {
   Dialog,
   DialogTrigger,
   DialogPortal,
+  DialogOverlay,
   DialogClose,
   DialogContent,
   DialogHeader,
   DialogFooter,
   DialogTitle,
   DialogDescription,
-} from '@iblai/web-containers';
+} from '@iblai/iblai-js/web-containers';
 
 // Controlled dialog
 <Dialog open={open} onOpenChange={setOpen}>
@@ -119,60 +111,34 @@ import {
     </DialogFooter>
   </DialogContent>
 </Dialog>
-
-// Uncontrolled dialog
-<Dialog>
-  <DialogTrigger>Open</DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Title</DialogTitle>
-    </DialogHeader>
-    Content here
-  </DialogContent>
-</Dialog>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/dialog.tsx\``,
     Input: `# Input Component
 
 \`\`\`typescript
-import { Input } from '@iblai/web-containers';
-import { Label } from '@iblai/web-containers';
+import { Input } from '@iblai/iblai-js/web-containers';
+import { Label } from '@iblai/iblai-js/web-containers';
 
-// Basic usage
-<Input
-  type="text"
-  placeholder="Enter text..."
-  value={value}
-  onChange={(e) => setValue(e.target.value)}
-/>
+// Extends React.ComponentProps<"input">
 
-// With label
 <div className="space-y-2">
   <Label htmlFor="email">Email</Label>
   <Input
     id="email"
     type="email"
     placeholder="name@example.com"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
   />
 </div>
-
-// Different types
-<Input type="password" placeholder="Password" />
-<Input type="number" placeholder="0" />
-<Input type="search" placeholder="Search..." />
-<Input type="file" />
-
-// States
-<Input disabled placeholder="Disabled input" />
-<Input className="border-red-500" placeholder="Error state" />
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/input.tsx\``,
     Label: `# Label Component
 
 \`\`\`typescript
-import { Label } from '@iblai/web-containers';
+import { Label } from '@iblai/iblai-js/web-containers';
 
 <Label htmlFor="email">Email Address</Label>
 
@@ -180,30 +146,22 @@ import { Label } from '@iblai/web-containers';
 <Label htmlFor="name">
   Name <span className="text-red-500">*</span>
 </Label>
-
-// Disabled state
-<Label htmlFor="disabled" className="text-muted-foreground">
-  Disabled Field
-</Label>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/label.tsx\``,
     Textarea: `# Textarea Component
 
 \`\`\`typescript
-import { Textarea } from '@iblai/web-containers';
+import { Textarea } from '@iblai/iblai-js/web-containers';
+
+// Extends React.ComponentProps<"textarea">
 
 <Textarea
   placeholder="Type your message here..."
   value={value}
   onChange={(e) => setValue(e.target.value)}
+  rows={5}
 />
-
-// With rows
-<Textarea rows={5} placeholder="Longer text area" />
-
-// Disabled
-<Textarea disabled placeholder="Cannot edit" />
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/textarea.tsx\``,
@@ -221,55 +179,29 @@ import {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-} from '@iblai/web-containers';
+} from '@iblai/iblai-js/web-containers';
 
-// Basic usage
 <Select value={value} onValueChange={setValue}>
   <SelectTrigger className="w-[200px]">
     <SelectValue placeholder="Select option" />
   </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="option1">Option 1</SelectItem>
-    <SelectItem value="option2">Option 2</SelectItem>
-    <SelectItem value="option3">Option 3</SelectItem>
-  </SelectContent>
-</Select>
-
-// With groups
-<Select>
-  <SelectTrigger>
-    <SelectValue placeholder="Select..." />
-  </SelectTrigger>
   <SelectContent>
     <SelectGroup>
-      <SelectLabel>Fruits</SelectLabel>
-      <SelectItem value="apple">Apple</SelectItem>
-      <SelectItem value="banana">Banana</SelectItem>
-    </SelectGroup>
-    <SelectSeparator />
-    <SelectGroup>
-      <SelectLabel>Vegetables</SelectLabel>
-      <SelectItem value="carrot">Carrot</SelectItem>
+      <SelectLabel>Group</SelectLabel>
+      <SelectItem value="option1">Option 1</SelectItem>
+      <SelectItem value="option2">Option 2</SelectItem>
     </SelectGroup>
   </SelectContent>
 </Select>
-
-// Disabled state
-<Select disabled>
-  <SelectTrigger>
-    <SelectValue placeholder="Disabled" />
-  </SelectTrigger>
-</Select>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/select.tsx\``,
     Checkbox: `# Checkbox Component
 
 \`\`\`typescript
-import { Checkbox } from '@iblai/web-containers';
-import { Label } from '@iblai/web-containers';
+import { Checkbox } from '@iblai/iblai-js/web-containers';
+import { Label } from '@iblai/iblai-js/web-containers';
 
-// Basic usage
 <div className="flex items-center space-x-2">
   <Checkbox
     id="terms"
@@ -278,20 +210,14 @@ import { Label } from '@iblai/web-containers';
   />
   <Label htmlFor="terms">Accept terms and conditions</Label>
 </div>
-
-// Disabled
-<Checkbox disabled />
-
-// Indeterminate state
-<Checkbox checked="indeterminate" />
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/checkbox.tsx\``,
     RadioGroup: `# RadioGroup Component
 
 \`\`\`typescript
-import { RadioGroup, RadioGroupItem } from '@iblai/web-containers';
-import { Label } from '@iblai/web-containers';
+import { RadioGroup, RadioGroupItem } from '@iblai/iblai-js/web-containers';
+import { Label } from '@iblai/iblai-js/web-containers';
 
 <RadioGroup value={value} onValueChange={setValue}>
   <div className="flex items-center space-x-2">
@@ -302,10 +228,6 @@ import { Label } from '@iblai/web-containers';
     <RadioGroupItem value="option2" id="r2" />
     <Label htmlFor="r2">Option 2</Label>
   </div>
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="option3" id="r3" />
-    <Label htmlFor="r3">Option 3</Label>
-  </div>
 </RadioGroup>
 \`\`\`
 
@@ -313,8 +235,8 @@ import { Label } from '@iblai/web-containers';
     Switch: `# Switch Component
 
 \`\`\`typescript
-import { Switch } from '@iblai/web-containers';
-import { Label } from '@iblai/web-containers';
+import { Switch } from '@iblai/iblai-js/web-containers';
+import { Label } from '@iblai/iblai-js/web-containers';
 
 <div className="flex items-center space-x-2">
   <Switch
@@ -324,12 +246,6 @@ import { Label } from '@iblai/web-containers';
   />
   <Label htmlFor="airplane-mode">Airplane Mode</Label>
 </div>
-
-// Disabled
-<Switch disabled />
-
-// With different sizes via className
-<Switch className="scale-75" />
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/switch.tsx\``,
@@ -341,30 +257,15 @@ import {
   TabsList,
   TabsTrigger,
   TabsContent,
-} from '@iblai/web-containers';
+} from '@iblai/iblai-js/web-containers';
 
-// Controlled
 <Tabs value={tab} onValueChange={setTab}>
   <TabsList>
     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
   </TabsList>
   <TabsContent value="tab1">Content for Tab 1</TabsContent>
   <TabsContent value="tab2">Content for Tab 2</TabsContent>
-  <TabsContent value="tab3">Content for Tab 3</TabsContent>
-</Tabs>
-
-// Uncontrolled with default
-<Tabs defaultValue="tab1" className="w-full">
-  <TabsList className="grid w-full grid-cols-3">
-    <TabsTrigger value="tab1">Account</TabsTrigger>
-    <TabsTrigger value="tab2">Password</TabsTrigger>
-    <TabsTrigger value="tab3">Settings</TabsTrigger>
-  </TabsList>
-  <TabsContent value="tab1">...</TabsContent>
-  <TabsContent value="tab2">...</TabsContent>
-  <TabsContent value="tab3">...</TabsContent>
 </Tabs>
 \`\`\`
 
@@ -372,59 +273,40 @@ import {
     Avatar: `# Avatar Component
 
 \`\`\`typescript
-import { Avatar, AvatarImage, AvatarFallback, AvatarImageBordered } from '@iblai/web-containers';
+import { Avatar, AvatarImage, AvatarImageBordered, AvatarFallback } from '@iblai/iblai-js/web-containers';
+
+// All accept onClick?: () => void
 
-// Basic usage
 <Avatar>
   <AvatarImage src={user.avatar} alt={user.name} />
   <AvatarFallback>{user.initials}</AvatarFallback>
 </Avatar>
 
-// With custom size
-<Avatar className="h-12 w-12">
-  <AvatarImage src={user.avatar} />
-  <AvatarFallback>JD</AvatarFallback>
-</Avatar>
-
 // Bordered variant
 <Avatar>
   <AvatarImageBordered src={user.avatar} alt={user.name} />
   <AvatarFallback>AB</AvatarFallback>
 </Avatar>
 
-// Multiple avatars (avatar group)
-<div className="flex -space-x-4">
-  <Avatar className="border-2 border-background">
-    <AvatarImage src="/user1.jpg" />
-    <AvatarFallback>U1</AvatarFallback>
-  </Avatar>
-  <Avatar className="border-2 border-background">
-    <AvatarImage src="/user2.jpg" />
-    <AvatarFallback>U2</AvatarFallback>
-  </Avatar>
-</div>
+// Custom size
+<Avatar className="h-12 w-12">
+  <AvatarImage src={user.avatar} />
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/avatar.tsx\``,
     Badge: `# Badge Component
 
 \`\`\`typescript
-import { Badge, badgeVariants } from '@iblai/web-containers';
+import { Badge, badgeVariants } from '@iblai/iblai-js/web-containers';
+
+// Variants: 'default' | 'secondary' | 'destructive' | 'outline'
 
-// Variants
 <Badge>Default</Badge>
 <Badge variant="secondary">Secondary</Badge>
 <Badge variant="destructive">Destructive</Badge>
 <Badge variant="outline">Outline</Badge>
-
-// As link
-<Badge className={badgeVariants({ variant: "outline" })} asChild>
-  <a href="/link">Link Badge</a>
-</Badge>
-
-// Custom colors
-<Badge className="bg-green-500">Success</Badge>
-<Badge className="bg-yellow-500">Warning</Badge>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/badge.tsx\``,
@@ -436,35 +318,18 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@iblai/web-containers';
+} from '@iblai/iblai-js/web-containers';
 
-// Wrap your app or component tree with TooltipProvider
-<TooltipProvider>
+<TooltipProvider delayDuration={0}>
   <Tooltip>
     <TooltipTrigger asChild>
       <Button variant="outline">Hover me</Button>
     </TooltipTrigger>
-    <TooltipContent>
-      <p>Tooltip content here</p>
+    <TooltipContent side="right" sideOffset={0}>
+      <p>Tooltip content</p>
     </TooltipContent>
   </Tooltip>
 </TooltipProvider>
-
-// With delay
-<TooltipProvider delayDuration={300}>
-  <Tooltip>
-    <TooltipTrigger>Delayed</TooltipTrigger>
-    <TooltipContent>Shows after 300ms</TooltipContent>
-  </Tooltip>
-</TooltipProvider>
-
-// Positioning
-<Tooltip>
-  <TooltipTrigger>Trigger</TooltipTrigger>
-  <TooltipContent side="right" align="start">
-    Right aligned tooltip
-  </TooltipContent>
-</Tooltip>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/tooltip.tsx\``,
@@ -475,35 +340,19 @@ import {
   Popover,
   PopoverTrigger,
   PopoverContent,
-} from '@iblai/web-containers';
+} from '@iblai/iblai-js/web-containers';
 
 <Popover>
   <PopoverTrigger asChild>
     <Button variant="outline">Open Popover</Button>
   </PopoverTrigger>
-  <PopoverContent className="w-80">
+  <PopoverContent className="w-80" side="right" align="start">
     <div className="grid gap-4">
-      <div className="space-y-2">
-        <h4 className="font-medium">Dimensions</h4>
-        <p className="text-sm text-muted-foreground">
-          Set the dimensions for the layer.
-        </p>
-      </div>
-      <div className="grid gap-2">
-        <Input placeholder="Width" />
-        <Input placeholder="Height" />
-      </div>
+      <h4 className="font-medium">Title</h4>
+      <Input placeholder="Value" />
     </div>
   </PopoverContent>
 </Popover>
-
-// With positioning
-<Popover>
-  <PopoverTrigger>Click</PopoverTrigger>
-  <PopoverContent side="right" align="start">
-    Content
-  </PopoverContent>
-</Popover>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/popover.tsx\``,
@@ -512,6 +361,7 @@ import {
 \`\`\`typescript
 import {
   DropdownMenu,
+  DropdownMenuPortal,
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -525,7 +375,11 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-} from '@iblai/web-containers';
+} from '@iblai/iblai-js/web-containers';
+
+// DropdownMenuItem has extra props: inset?: boolean, variant?: 'default' | 'destructive'
+// DropdownMenuLabel has extra props: inset?: boolean
+// DropdownMenuSubTrigger has extra props: inset?: boolean
 
 <DropdownMenu>
   <DropdownMenuTrigger asChild>
@@ -535,24 +389,11 @@ import {
     <DropdownMenuLabel>My Account</DropdownMenuLabel>
     <DropdownMenuSeparator />
     <DropdownMenuGroup>
-      <DropdownMenuItem>
-        Profile
-        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-      </DropdownMenuItem>
+      <DropdownMenuItem>Profile</DropdownMenuItem>
       <DropdownMenuItem>Settings</DropdownMenuItem>
     </DropdownMenuGroup>
     <DropdownMenuSeparator />
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
-      <DropdownMenuSubContent>
-        <DropdownMenuItem>Email</DropdownMenuItem>
-        <DropdownMenuItem>Message</DropdownMenuItem>
-      </DropdownMenuSubContent>
-    </DropdownMenuSub>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem className="text-red-600">
-      Log out
-    </DropdownMenuItem>
+    <DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
   </DropdownMenuContent>
 </DropdownMenu>
 \`\`\`
@@ -570,15 +411,14 @@ import {
   TableRow,
   TableCell,
   TableCaption,
-} from '@iblai/web-containers';
+} from '@iblai/iblai-js/web-containers';
 
 <Table>
-  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableCaption>A list of recent invoices.</TableCaption>
   <TableHeader>
     <TableRow>
-      <TableHead className="w-[100px]">Invoice</TableHead>
+      <TableHead>Invoice</TableHead>
       <TableHead>Status</TableHead>
-      <TableHead>Method</TableHead>
       <TableHead className="text-right">Amount</TableHead>
     </TableRow>
   </TableHeader>
@@ -587,17 +427,10 @@ import {
       <TableRow key={invoice.id}>
         <TableCell className="font-medium">{invoice.id}</TableCell>
         <TableCell>{invoice.status}</TableCell>
-        <TableCell>{invoice.method}</TableCell>
         <TableCell className="text-right">{invoice.amount}</TableCell>
       </TableRow>
     ))}
   </TableBody>
-  <TableFooter>
-    <TableRow>
-      <TableCell colSpan={3}>Total</TableCell>
-      <TableCell className="text-right">$2,500.00</TableCell>
-    </TableRow>
-  </TableFooter>
 </Table>
 \`\`\`
 
@@ -605,30 +438,14 @@ import {
     Skeleton: `# Skeleton Component
 
 \`\`\`typescript
-import { Skeleton } from '@iblai/web-containers';
+import { Skeleton } from '@iblai/iblai-js/web-containers';
+
+// Extends React.ComponentProps<"div">
 
-// Loading card
 <div className="space-y-3">
   <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-[250px]" />
-    <Skeleton className="h-4 w-[200px]" />
-  </div>
-</div>
-
-// Loading text
-<div className="space-y-2">
-  <Skeleton className="h-4 w-full" />
-  <Skeleton className="h-4 w-3/4" />
-</div>
-
-// Loading avatar
-<div className="flex items-center space-x-4">
-  <Skeleton className="h-12 w-12 rounded-full" />
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-[200px]" />
-    <Skeleton className="h-4 w-[150px]" />
-  </div>
+  <Skeleton className="h-4 w-[250px]" />
+  <Skeleton className="h-4 w-[200px]" />
 </div>
 \`\`\`
 
@@ -636,32 +453,41 @@ import { Skeleton } from '@iblai/web-containers';
     Separator: `# Separator Component
 
 \`\`\`typescript
-import { Separator } from '@iblai/web-containers';
+import { Separator } from '@iblai/iblai-js/web-containers';
 
-// Horizontal (default)
-<div>
-  <p>Above</p>
-  <Separator className="my-4" />
-  <p>Below</p>
-</div>
+// Default: orientation="horizontal", decorative=true
+
+<Separator className="my-4" />
 
 // Vertical
 <div className="flex h-5 items-center space-x-4">
   <span>Item 1</span>
   <Separator orientation="vertical" />
   <span>Item 2</span>
-  <Separator orientation="vertical" />
-  <span>Item 3</span>
 </div>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/separator.tsx\``,
+    Progress: `# Progress Component
+
+\`\`\`typescript
+import { Progress } from '@iblai/iblai-js/web-containers';
+
+// Extends Radix ProgressPrimitive.Root props
+
+<Progress value={33} className="w-[60%]" />
+<Progress value={66} />
+<Progress value={100} />
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/progress.tsx\``,
     Calendar: `# Calendar Component
 
 \`\`\`typescript
-import { Calendar, CalendarDayButton } from '@iblai/web-containers';
+import { Calendar, CalendarDayButton } from '@iblai/iblai-js/web-containers';
+
+// Extends react-day-picker DayPicker props + buttonVariant
 
-// Single date selection
 <Calendar
   mode="single"
   selected={date}
@@ -676,13 +502,6 @@ import { Calendar, CalendarDayButton } from '@iblai/web-containers';
   onSelect={setDateRange}
 />
 
-// Multiple dates
-<Calendar
-  mode="multiple"
-  selected={dates}
-  onSelect={setDates}
-/>
-
 // With disabled dates
 <Calendar
   mode="single"
@@ -704,7 +523,9 @@ import {
   PaginationNext,
   PaginationPrevious,
   PaginationEllipsis,
-} from '@iblai/web-containers';
+} from '@iblai/iblai-js/web-containers';
+
+// PaginationLink has isActive?: boolean and size prop
 
 <Pagination>
   <PaginationContent>
@@ -712,13 +533,10 @@ import {
       <PaginationPrevious href="#" />
     </PaginationItem>
     <PaginationItem>
-      <PaginationLink href="#">1</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="#" isActive>2</PaginationLink>
+      <PaginationLink href="#" isActive>1</PaginationLink>
     </PaginationItem>
     <PaginationItem>
-      <PaginationLink href="#">3</PaginationLink>
+      <PaginationLink href="#">2</PaginationLink>
     </PaginationItem>
     <PaginationItem>
       <PaginationEllipsis />
@@ -734,39 +552,23 @@ import {
     Toggle: `# Toggle Component
 
 \`\`\`typescript
-import { Toggle, toggleVariants } from '@iblai/web-containers';
-import { Bold, Italic, Underline } from 'lucide-react';
+import { Toggle, toggleVariants } from '@iblai/iblai-js/web-containers';
 
-// Basic toggle
-<Toggle aria-label="Toggle bold">
-  <Bold className="h-4 w-4" />
-</Toggle>
-
-// With variants
-<Toggle variant="outline" aria-label="Toggle">
-  Toggle
-</Toggle>
+// Variants: variant ('default' | 'outline'), size ('default' | 'sm' | 'lg')
 
-// Controlled
-<Toggle pressed={bold} onPressedChange={setBold}>
+<Toggle pressed={bold} onPressedChange={setBold} aria-label="Toggle bold">
   <Bold className="h-4 w-4" />
 </Toggle>
 
-// Toggle group (using multiple toggles)
-<div className="flex gap-1">
-  <Toggle><Bold className="h-4 w-4" /></Toggle>
-  <Toggle><Italic className="h-4 w-4" /></Toggle>
-  <Toggle><Underline className="h-4 w-4" /></Toggle>
-</div>
+<Toggle variant="outline">Toggle</Toggle>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/ui/toggle.tsx\``,
     Toast: `# Toast / Toaster Component
 
 \`\`\`typescript
-import { Toaster, toast } from '@iblai/web-containers';
-// OR using sonner directly
-import { Toaster } from '@iblai/web-containers';
+// Sonner integration (recommended)
+import { Toaster } from '@iblai/iblai-js/web-containers';
 import { toast } from 'sonner';
 
 // Add Toaster to your layout
@@ -776,22 +578,12 @@ import { toast } from 'sonner';
 toast('Event has been created');
 toast.success('Successfully saved!');
 toast.error('Something went wrong');
-toast.warning('Warning message');
-toast.info('Information');
 
 // With description
 toast('Event created', {
   description: 'Your event has been scheduled.',
 });
 
-// With action
-toast('Event created', {
-  action: {
-    label: 'Undo',
-    onClick: () => console.log('Undo'),
-  },
-});
-
 // Promise toast
 toast.promise(saveData(), {
   loading: 'Saving...',
@@ -800,6 +592,8 @@ toast.promise(saveData(), {
 });
 \`\`\`
 
+Also exports Radix-based toast primitives: \`ToastProvider\`, \`ToastViewport\`, \`Toast\`, \`ToastTitle\`, \`ToastDescription\`, \`ToastClose\`, \`ToastAction\`.
+
 **File Location**: \`packages/web-containers/src/components/ui/sonner.tsx\``,
     Chart: `# Chart Components (Recharts wrapper)
 
@@ -811,9 +605,17 @@ import {
   ChartTooltipContent,
   ChartLegend,
   ChartLegendContent,
-} from '@iblai/web-containers';
+  useChart,
+} from '@iblai/iblai-js/web-containers';
 import { Bar, BarChart, XAxis, YAxis } from 'recharts';
 
+type ChartConfig = {
+  [k: string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & ({ color?: string } | { theme: Record<string, string> });
+};
+
 const chartConfig: ChartConfig = {
   desktop: { label: 'Desktop', color: '#2563eb' },
   mobile: { label: 'Mobile', color: '#60a5fa' },
@@ -833,38 +635,46 @@ const chartConfig: ChartConfig = {
 
 **File Location**: \`packages/web-containers/src/components/ui/chart.tsx\``,
     // ============================================================================
-    // FEATURE COMPONENTS
+    // FEATURE COMPONENTS (main export: @iblai/iblai-js/web-containers)
     // ============================================================================
     Profile: `# Profile Component
 
 Complete user profile management with multiple tabs.
 
 \`\`\`typescript
-import { Profile } from '@iblai/web-containers';
+import { Profile } from '@iblai/iblai-js/web-containers';
+
+interface UserProfileModalProps {
+  tenant: string;
+  username: string;
+  onClose: () => void;
+  customization?: {
+    showMentorAIDisplayCheckbox?: boolean;
+    showLeaderboardDisplayCheckbox?: boolean;
+    showUsernameField?: boolean;
+    showPlatformName?: boolean;
+    useGravatarPicFallback?: boolean;
+  };
+  isAdmin?: boolean;
+  targetTab?: string;
+  localLLMProps?: { /* LocalLLMTab props */ };
+}
 
 <Profile
+  tenant={tenantKey}
   username={username}
-  tenantKey={tenantKey}
-  tabs={['basic', 'social', 'education', 'experience', 'resume', 'security', 'advanced']}
-  onSave={handleSave}
+  onClose={() => setOpen(false)}
+  isAdmin={isAdmin}
+  customization={{ showUsernameField: true }}
 />
 \`\`\`
 
-**Available Tabs**:
-- \`basic\`: Name, title, about, profile image
-- \`social\`: Social media links (LinkedIn, Twitter, etc.)
-- \`education\`: Education history with institutions
-- \`experience\`: Work experience with companies
-- \`resume\`: Resume/CV upload
-- \`security\`: Password change
-- \`advanced\`: Custom domain, SMTP, API settings
+**Available Tabs**: basic, social, education, experience, resume, security, advanced
 
 **Related Components**:
 - \`InviteUserDialog\` - Dialog to invite users
 - \`InvitedUsersDialog\` - View invited users
 - \`LocalLLMTab\` - Local LLM settings (Tauri desktop only)
-- \`IntegrationsTab\` - API integrations
-- \`UsersTab\`, \`CoursesTab\`, \`ProgramsTab\` - Invite management
 
 **File Location**: \`packages/web-containers/src/components/profile/index.tsx\``,
     InviteUserDialog: `# InviteUserDialog Component
@@ -872,26 +682,68 @@ import { Profile } from '@iblai/web-containers';
 Dialog for inviting new users to the platform.
 
 \`\`\`typescript
-import { InviteUserDialog } from '@iblai/web-containers';
+import { InviteUserDialog } from '@iblai/iblai-js/web-containers';
+
+interface InviteUserDialogProps {
+  tenant: string;
+  onClose: () => void;
+  isOpen: boolean;
+  enableCatalogInvite?: boolean;
+  hasManageUsersPermission?: boolean;
+}
 
 <InviteUserDialog
-  open={open}
-  onOpenChange={setOpen}
-  tenantKey={tenantKey}
-  onSuccess={() => {
-    toast.success('User invited successfully');
-    refetch();
-  }}
+  tenant={tenantKey}
+  isOpen={open}
+  onClose={() => setOpen(false)}
+  enableCatalogInvite={true}
+  hasManageUsersPermission={isAdmin}
 />
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/profile/invite-user.tsx\``,
+    InvitedUsersDialog: `# InvitedUsersDialog Component
+
+Dialog showing list of invited users pending confirmation.
+
+\`\`\`typescript
+import { InvitedUsersDialog } from '@iblai/iblai-js/web-containers';
+
+interface InvitedUsersDialogProps {
+  tenant: string;
+  onClose: () => void;
+}
+
+<InvitedUsersDialog
+  tenant={tenantKey}
+  onClose={() => setOpen(false)}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/profile/invited-users.tsx\``,
     LocalLLMTab: `# LocalLLMTab Component
 
-Settings for local LLM (Ollama) in Tauri desktop app.
+Settings for local LLM (Ollama/Foundry) in Tauri desktop app.
 
 \`\`\`typescript
-import { LocalLLMTab, isLocalLLMEnabled, setLocalLLMEnabled } from '@iblai/web-containers';
+import { LocalLLMTab, isLocalLLMEnabled, setLocalLLMEnabled } from '@iblai/iblai-js/web-containers';
+
+interface LocalLLMTabProps {
+  isAvailable: boolean;
+  state: ModelDownloadState;
+  ollamaStatus: OllamaStatus | null;
+  isUsingFoundry?: boolean;
+  foundryModels?: FoundryModel[];
+  selectedFoundryModel?: string | null;
+  foundryStatus?: FoundryStatus | null;
+  onStartDownload: () => void;
+  onCancelDownload: () => void;
+  onInstallOllama: () => void;
+  onInstallFoundry?: () => void;
+  onCheckStatus: () => void;
+  onResetState: () => void;
+  onSelectFoundryModel?: (modelId: string) => void;
+}
 
 <LocalLLMTab
   isAvailable={isTauriApp}
@@ -903,12 +755,6 @@ import { LocalLLMTab, isLocalLLMEnabled, setLocalLLMEnabled } from '@iblai/web-c
   onCheckStatus={checkStatus}
   onResetState={resetState}
 />
-
-// Check if local LLM is enabled
-const enabled = isLocalLLMEnabled();
-
-// Enable/disable
-setLocalLLMEnabled(true);
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/profile/local-llm/local-llm-tab.tsx\``,
@@ -917,41 +763,80 @@ setLocalLLMEnabled(true);
 Notification bell dropdown with unread count.
 
 \`\`\`typescript
-import { NotificationDropdown } from '@iblai/web-containers';
+import { NotificationDropdown } from '@iblai/iblai-js/web-containers';
+
+interface NotificationDropdownProps {
+  org: string;
+  userId: string;
+  isAdmin?: boolean;
+  className?: string;
+  onViewNotifications?: (notificationId?: string) => void;
+}
 
 <NotificationDropdown
   org={tenantKey}
   userId={username}
   isAdmin={isAdmin}
-  onViewNotifications={() => router.push('/notifications')}
+  onViewNotifications={(id) => router.push(\`/notifications\${id ? \`?id=\${id}\` : ''}\`)}
 />
 \`\`\`
 
-**Props**:
-- \`org\`: Tenant/organization key
-- \`userId\`: Current user's username
-- \`isAdmin\`: Whether user is admin (shows admin features)
-- \`onViewNotifications\`: Callback when "View All" is clicked
-
 **Related Components**:
-- \`NotificationDisplay\` - Individual notification item
+- \`NotificationDisplay\` - Full notification management
 - \`SendNotificationDialog\` - Send notifications (admin)
 - \`AlertsTab\` - Manage notification alerts
 - \`EditAlertDialog\` - Edit alert settings
 
-**File Location**: \`packages/web-containers/src/components/notifications/index.ts\``,
+**File Location**: \`packages/web-containers/src/components/notifications/notification-dropdown.tsx\``,
+    NotificationDisplay: `# NotificationDisplay Component
+
+Full notification management interface with inbox and alerts tabs.
+
+\`\`\`typescript
+import { NotificationDisplay } from '@iblai/iblai-js/web-containers';
+
+interface NotificationDisplayProps {
+  org: string;
+  userId: string;
+  isAdmin?: boolean;
+  selectedNotificationId?: string;
+  enableRbac?: boolean;
+  rbacPermissions?: object;
+  tenant?: string;
+  className?: string;
+}
+
+<NotificationDisplay
+  org={tenantKey}
+  userId={username}
+  isAdmin={isAdmin}
+  enableRbac={true}
+  rbacPermissions={permissions}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/notifications/notification-display.tsx\``,
     SendNotificationDialog: `# SendNotificationDialog Component
 
 Dialog for admins to send notifications to users.
 
 \`\`\`typescript
-import { SendNotificationDialog } from '@iblai/web-containers';
+import { SendNotificationDialog } from '@iblai/iblai-js/web-containers';
+
+interface SendNotificationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  tenant: string;
+  onNotificationSent?: () => void;
+  hasManageUsersPermission?: boolean;
+}
 
 <SendNotificationDialog
   open={open}
   onOpenChange={setOpen}
-  tenantKey={tenantKey}
-  onSuccess={() => toast.success('Notification sent')}
+  tenant={tenantKey}
+  onNotificationSent={() => toast.success('Notification sent')}
+  hasManageUsersPermission={isAdmin}
 />
 \`\`\`
 
@@ -961,12 +846,43 @@ import { SendNotificationDialog } from '@iblai/web-containers';
 Manage notification alert configurations.
 
 \`\`\`typescript
-import { AlertsTab } from '@iblai/web-containers';
+import { AlertsTab } from '@iblai/iblai-js/web-containers';
 
-<AlertsTab tenantKey={tenantKey} />
+interface AlertsTabProps {
+  platformKey: string;
+}
+
+<AlertsTab platformKey={tenantKey} />
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/notifications/alerts-tab.tsx\``,
+    EditAlertDialog: `# EditAlertDialog Component
+
+Dialog for editing notification template content and settings.
+
+\`\`\`typescript
+import { EditAlertDialog } from '@iblai/iblai-js/web-containers';
+
+interface EditAlertDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  template: NotificationTemplate | null;
+  platformKey: string;
+  templateType: string | null;
+  onSave?: (template: NotificationTemplate) => void;
+}
+
+<EditAlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  template={selectedTemplate}
+  platformKey={tenantKey}
+  templateType="email"
+  onSave={handleSave}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/notifications/edit-alert-dialog.tsx\``,
     AnalyticsLayout: `# Analytics Components
 
 Complete analytics dashboard with charts and filters.
@@ -980,6 +896,11 @@ import {
   AnalyticsFinancialStats,
   AnalyticsTranscriptsStats,
   AnalyticsReports,
+  AnalyticsReportDownload,
+  AnalyticsCourses,
+  AnalyticsCourseDetail,
+  AnalyticsPrograms,
+  AnalyticsProgramDetail,
   ChartFiltersProvider,
   useChartFilters,
   AnalyticsSettingsProvider,
@@ -991,7 +912,7 @@ import {
   CustomDateRangePicker,
   AccessTimeHeatmap,
   GroupsFilterDropdown,
-} from '@iblai/web-containers';
+} from '@iblai/iblai-js/web-containers';
 
 // Usage
 <ChartFiltersProvider>
@@ -1002,18 +923,12 @@ import {
   </AnalyticsSettingsProvider>
 </ChartFiltersProvider>
 
-// Using hooks for custom analytics
+// Using hooks
 const { filters, setFilters, dateRange, setDateRange } = useChartFilters();
 const { settings, updateSettings } = useAnalyticsSettings();
 \`\`\`
 
-**Analytics Hooks**:
-- \`useOverview()\` - Overview data
-- \`useUsers()\` - User statistics
-- \`useTopics()\` - Topic statistics
-- \`useFinancial()\` - Financial data
-- \`useTranscripts()\` - Transcript data
-- \`useReports()\` - Reports data
+**Analytics Hooks**: \`useOverview\`, \`useUsers\`, \`useTopics\`, \`useFinancial\`, \`useTranscripts\`, \`useReports\`, \`useCourses\`, \`usePrograms\`
 
 **File Location**: \`packages/web-containers/src/components/analytics/index.ts\``,
     LoginButton: `# LoginButton Component
@@ -1021,7 +936,18 @@ const { settings, updateSettings } = useAnalyticsSettings();
 Button that redirects to Auth SPA for login.
 
 \`\`\`typescript
-import { LoginButton } from '@iblai/web-containers';
+import { LoginButton } from '@iblai/iblai-js/web-containers';
+
+interface LoginButtonProps extends Omit<ButtonProps, 'onClick'> {
+  authUrl: string;
+  appName: string;
+  platformKey?: string;
+  redirectTo?: string;
+  isJoinTenant?: boolean;
+  label?: string;
+  onClick?: () => void;
+  redirectOptions?: Partial<RedirectToAuthSpaOptions>;
+}
 
 <LoginButton
   authUrl="https://auth.example.com"
@@ -1032,68 +958,77 @@ import { LoginButton } from '@iblai/web-containers';
 />
 \`\`\`
 
-**Props**:
-- \`authUrl\`: Auth SPA base URL
-- \`appName\`: App identifier for redirect
-- \`platformKey\`: Tenant key
-- \`label\`: Button text (default: "Login")
-- \`variant\`: Button variant
-
 **File Location**: \`packages/web-containers/src/components/auth-buttons/login-button.tsx\``,
     SignupButton: `# SignupButton Component
 
 Button that redirects to tenant join/signup flow.
 
 \`\`\`typescript
-import { SignupButton } from '@iblai/web-containers';
+import { SignupButton } from '@iblai/iblai-js/web-containers';
+
+interface SignupButtonProps extends Omit<ButtonProps, 'onClick'> {
+  authUrl: string;
+  tenantKey?: string;
+  redirectTo?: string;
+  label?: string;
+  onClick?: () => void;
+  openInNewTab?: boolean;
+}
 
 <SignupButton
   authUrl="https://auth.example.com"
   tenantKey={tenantKey}
   label="Create Account"
   variant="outline"
+  openInNewTab={true}
 />
 \`\`\`
 
-**Props**:
-- \`authUrl\`: Auth SPA base URL
-- \`tenantKey\`: Tenant to join
-- \`label\`: Button text (default: "Sign Up")
-- \`variant\`: Button variant
-
 **File Location**: \`packages/web-containers/src/components/auth-buttons/signup-button.tsx\``,
     Markdown: `# Markdown Component
 
 Render markdown content with custom styling.
 
 \`\`\`typescript
-import { Markdown, markdownComponents, CopyButtonIcon } from '@iblai/web-containers';
-
-<Markdown content={markdownString} />
-
-// With custom components
-<Markdown
-  content={content}
-  components={{
-    ...markdownComponents,
-    // Override specific elements
-    h1: ({ children }) => <h1 className="custom-h1">{children}</h1>,
-  }}
-/>
+import { Markdown, markdownComponents, CopyButtonIcon } from '@iblai/iblai-js/web-containers';
+
+interface MarkdownProps {
+  children: string;
+}
+
+<Markdown>{markdownString}</Markdown>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/markdown/index.tsx\``,
     RichTextEditor: `# RichTextEditor Component
 
-TipTap-based rich text editor.
+TipTap-based rich text editor with HTML and Markdown support.
 
 \`\`\`typescript
-import { RichTextEditor } from '@iblai/web-containers';
+import { RichTextEditor } from '@iblai/iblai-js/web-containers';
+
+interface RichTextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  exportFormat?: 'html' | 'markdown';
+  disabled?: boolean;
+  placeholder?: string;
+  minHeight?: string;
+  className?: string;
+  id?: string;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  ariaDescribedBy?: string;
+  ariaRequired?: boolean;
+  ariaInvalid?: boolean;
+}
 
 <RichTextEditor
-  content={content}
+  value={content}
   onChange={setContent}
+  exportFormat="html"
   placeholder="Start typing..."
+  minHeight="200px"
 />
 \`\`\`
 
@@ -1103,17 +1038,37 @@ import { RichTextEditor } from '@iblai/web-containers';
 Searchable dropdown with multiple selection.
 
 \`\`\`typescript
-import { SearchableMultiSelect } from '@iblai/web-containers';
+import { SearchableMultiSelect } from '@iblai/iblai-js/web-containers';
+
+interface SearchableMultiSelectProps<T = any> {
+  items: T[];
+  selectedItems: { label: string; value: string }[];
+  onSelectionChange: (items: { label: string; value: string }[]) => void;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  isLoading: boolean;
+  placeholder?: string;
+  getItemValue: (item: T) => string;
+  getItemLabel: (item: T) => string;
+  className?: string;
+  maxHeight?: string;
+  inputId?: string;
+  ariaDescribedBy?: string;
+  onSelectedItemAction?: (item: { label: string; value: string }) => void;
+  selectedItemActionIcon?: React.ReactNode;
+  selectedItemActionAriaLabel?: string;
+}
 
 <SearchableMultiSelect
-  options={[
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2' },
-  ]}
-  selected={selectedValues}
-  onChange={setSelectedValues}
-  placeholder="Select options..."
-  searchPlaceholder="Search..."
+  items={users}
+  selectedItems={selectedUsers}
+  onSelectionChange={setSelectedUsers}
+  searchQuery={search}
+  onSearchChange={setSearch}
+  isLoading={loading}
+  getItemValue={(u) => u.id}
+  getItemLabel={(u) => u.name}
+  placeholder="Select users..."
 />
 \`\`\`
 
@@ -1123,55 +1078,81 @@ import { SearchableMultiSelect } from '@iblai/web-containers';
 Dropdown to switch between tenants/organizations.
 
 \`\`\`typescript
-import { TenantSwitcher } from '@iblai/web-containers';
+import { TenantSwitcher } from '@iblai/iblai-js/web-containers';
+
+interface TenantSwitcherProps {
+  currentTenantKey: string | null;
+  tenants: Tenant[];
+  visitingTenant?: Tenant;
+  onTenantChange: (tenantKey: string, saveRedirect?: boolean) => Promise<void>;
+  setHideTenantSwitcher?: (hide: boolean) => void;
+  setOpenAccount?: (tab: 'basic' | 'organization') => void;
+  setLoadingTenantInfo?: (loading: boolean) => void;
+  rbacPermissions: object;
+  enableRbac?: boolean;
+}
 
 <TenantSwitcher
-  currentTenant={currentTenant}
+  currentTenantKey={currentTenant}
   tenants={userTenants}
-  onSwitch={handleTenantSwitch}
+  onTenantChange={handleTenantSwitch}
+  rbacPermissions={permissions}
+  enableRbac={true}
 />
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/tenant-switch/index.tsx\``,
     TopBanner: `# TopBanner Component
 
-Sticky banner at the top of the page.
+Notification banner at the top of the page.
 
 \`\`\`typescript
-import { TopBanner, TopBannerProps } from '@iblai/web-containers';
+import { TopBanner } from '@iblai/iblai-js/web-containers';
+
+interface TopBannerProps {
+  parentContainerSelector: string;
+  bannerText?: string;
+  loading?: boolean;
+  tooltipText?: string;
+  buttonLabel?: string;
+  buttonHandler?: () => void;
+  onLoad?: () => void;
+  onClose?: () => void;
+}
 
 <TopBanner
-  message="Your trial expires in 7 days"
-  type="warning"
-  action={{
-    label: "Upgrade",
-    onClick: handleUpgrade,
-  }}
-  onDismiss={handleDismiss}
+  parentContainerSelector="#main-content"
+  bannerText="Your trial expires in 7 days"
+  buttonLabel="Upgrade"
+  buttonHandler={handleUpgrade}
+  onClose={handleDismiss}
 />
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/top-banner/index.tsx\``,
     Loader: `# Loader Component
 
-Spinning loader with gradient animation.
+Full-screen animated loading spinner.
 
 \`\`\`typescript
-import { Loader } from '@iblai/web-containers';
+import { Loader } from '@iblai/iblai-js/web-containers';
 
+// No props required
 <Loader />
-
-// Custom size
-<Loader className="h-8 w-8" />
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/loader.tsx\``,
     Spinner: `# Spinner Component
 
-Alternative spinner component.
+Compact animated spinner icon.
 
 \`\`\`typescript
-import { Spinner } from '@iblai/web-containers';
+import { Spinner } from '@iblai/iblai-js/web-containers';
+
+interface SpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
 
 <Spinner />
 <Spinner size="sm" />
@@ -1181,63 +1162,70 @@ import { Spinner } from '@iblai/web-containers';
 **File Location**: \`packages/web-containers/src/components/spinner/index.tsx\``,
     TimeTrackingProvider: `# TimeTrackingProvider Component
 
-Context provider for time tracking functionality.
+Context provider for automatic time tracking on pages.
 
 \`\`\`typescript
-import { TimeTrackingProvider } from '@iblai/web-containers';
+import { TimeTrackingProvider } from '@iblai/iblai-js/web-containers';
+
+interface TimeTrackingProviderProps {
+  intervalSeconds?: number;
+  enabled?: boolean;
+  sessionUuid?: string;
+  getSessionUuid?: () => string | undefined;
+  getTenantKey?: () => string;
+  getMentorId?: () => string | undefined;
+  getCurrentUrl?: () => string;
+  onRouteChange?: (callback: () => void) => () => void;
+}
 
 <TimeTrackingProvider
   intervalSeconds={30}
   enabled={true}
-  onTimeUpdate={(url, timeSpent) => {
-    // Send to analytics
-  }}
+  getTenantKey={() => tenantKey}
+  getMentorId={() => mentorId}
 >
   {children}
 </TimeTrackingProvider>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/time-tracking-provider.tsx\``,
-    UserProfileDropdown: `# UserProfileDropdown Component
-
-User menu dropdown with profile and logout options.
-
-\`\`\`typescript
-import { UserProfileDropdown } from '@iblai/web-containers';
-
-<UserProfileDropdown
-  user={userData}
-  onProfileClick={() => router.push('/profile')}
-  onLogout={handleLogout}
-/>
-\`\`\`
-
-**File Location**: \`packages/web-containers/src/components/user-profile-dropdown/index.tsx\``,
     AdvancedPagination: `# AdvancedPagination Component
 
-Enhanced pagination with page size selector.
+Pagination with ellipsis for large page ranges.
 
 \`\`\`typescript
-import { AdvancedPagination } from '@iblai/web-containers';
+import { AdvancedPagination } from '@iblai/iblai-js/web-containers';
+
+interface AdvancedPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+}
 
 <AdvancedPagination
   currentPage={page}
   totalPages={totalPages}
-  pageSize={pageSize}
   onPageChange={setPage}
-  onPageSizeChange={setPageSize}
+  siblingCount={1}
 />
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/advance-pagination.tsx\``,
     ContentViewWrapper: `# ContentViewWrapper Component
 
-Container wrapper for page content.
+Conditional wrapper that only renders children if the current SPA matches.
 
 \`\`\`typescript
-import { ContentViewWrapper } from '@iblai/web-containers';
+import { ContentViewWrapper } from '@iblai/iblai-js/web-containers';
 
-<ContentViewWrapper>
+interface Props {
+  children: React.ReactNode;
+  currentSPA: string | undefined;
+  spas: string[];
+}
+
+<ContentViewWrapper currentSPA={currentSPA} spas={['mentor', 'skills']}>
   {children}
 </ContentViewWrapper>
 \`\`\`
@@ -1248,41 +1236,319 @@ import { ContentViewWrapper } from '@iblai/web-containers';
 Display app version information.
 
 \`\`\`typescript
-import { Version } from '@iblai/web-containers';
+import { Version } from '@iblai/iblai-js/web-containers';
+
+interface VersionProps {
+  appName: string;
+  appVersion: string;
+  poweredBy: React.ReactNode;
+}
 
-<Version />
+<Version
+  appName="Mentor"
+  appVersion="1.0.0"
+  poweredBy={<span>Powered by IBL.ai</span>}
+/>
 \`\`\`
 
 **File Location**: \`packages/web-containers/src/components/version.tsx\``,
+    // ============================================================================
+    // NEXT.JS COMPONENTS (import from @iblai/iblai-js/web-containers/next)
+    // ============================================================================
+    UserProfileDropdown: `# UserProfileDropdown Component
+
+User avatar dropdown menu with profile, account, tenant switching, and help.
+
+\`\`\`typescript
+import { UserProfileDropdown } from '@iblai/iblai-js/web-containers/next';
+
+interface UserProfileDropdownProps {
+  username?: string;
+  userIsAdmin?: boolean;
+  userIsStudent?: boolean;
+  userIsVisiting?: boolean;
+  tenantKey?: string;
+  currentTenant?: Tenant;
+  userTenants?: Tenant[];
+  showProfileTab?: boolean;
+  showAccountTab?: boolean;
+  showTenantSwitcher?: boolean;
+  showHelpLink?: boolean;
+  showLogoutButton?: boolean;
+  showLearnerModeSwitch?: boolean;
+  helpCenterUrl?: string;
+  enableGravatarOnProfilePic?: boolean;
+  onProfileClick?: (tab: string) => void;
+  onLogout?: () => void;
+  onTenantChange?: (tenantKey: string) => void;
+  billingEnabled?: boolean;
+  billingURL?: string;
+  topUpEnabled?: boolean;
+  topUpURL?: string;
+  authURL: string;
+  onTenantUpdate: (tenant: Tenant) => void;
+  rbacPermissions?: object;
+  enableRbac?: boolean;
+  localLLMProps?: { /* LocalLLMTab props */ };
+  isModalOpen?: boolean;
+  onModalOpenChange?: (open: boolean) => void;
+  defaultActiveTab?: string;
+  // ... more optional props
+}
+
+<UserProfileDropdown
+  username={username}
+  userIsAdmin={isAdmin}
+  tenantKey={tenantKey}
+  currentTenant={currentTenant}
+  userTenants={tenants}
+  authURL={authUrl}
+  onTenantUpdate={handleTenantUpdate}
+  onLogout={handleLogout}
+/>
+\`\`\`
+
+> **Import from \`@iblai/iblai-js/web-containers/next\`** — requires Next.js
+
+**File Location**: \`packages/web-containers/src/components/user-profile-dropdown/index.tsx\``,
+    UserProfileModal: `# UserProfileModal Component
+
+Modal wrapper for Profile component with additional tabs (organization, management, integrations, billing).
+
+\`\`\`typescript
+import { UserProfileModal } from '@iblai/iblai-js/web-containers/next';
+
+interface UserProfileModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  params: {
+    tenantKey: string;
+    mentorId?: string;
+    isAdmin?: boolean;
+  };
+  tenants?: Tenant[];
+  billingEnabled?: boolean;
+  billingURL?: string;
+  topUpEnabled?: boolean;
+  topUpURL?: string;
+  showMentorAIDisplayCheckbox?: boolean;
+  showLeaderboardDisplayCheckbox?: boolean;
+  showUsernameField?: boolean;
+  showPlatformName?: boolean;
+  useGravatarPicFallback?: boolean;
+  targetTab?: string;
+  currentPlan?: string;
+  authURL: string;
+  onTenantUpdate?: (tenant: Tenant) => void;
+  rbacPermissions?: object;
+  enableRbac?: boolean;
+  localLLMProps?: { /* LocalLLMTab props */ };
+}
+
+<UserProfileModal
+  isOpen={open}
+  onClose={() => setOpen(false)}
+  params={{ tenantKey, isAdmin }}
+  authURL={authUrl}
+/>
+\`\`\`
+
+> **Import from \`@iblai/iblai-js/web-containers/next\`** — requires Next.js
+
+**File Location**: \`packages/web-containers/src/components/modals/user-profile-modal.tsx\``,
     SsoLogin: `# SsoLogin Component
 
 SSO callback handler for authentication.
 
 \`\`\`typescript
-import { SsoLogin } from '@iblai/web-containers';
+import { SsoLogin, initializeLocalStorageWithObject } from '@iblai/iblai-js/web-containers/next';
+
+interface SsoLoginProps {
+  localStorageKeys: {
+    CURRENT_TENANT: string;
+    USER_DATA: string;
+    TENANTS: string;
+    AXD_TOKEN?: string;
+    AXD_TOKEN_EXPIRES?: string;
+    DM_TOKEN?: string;
+    DM_TOKEN_EXPIRES?: string;
+    EDX_TOKEN_KEY?: string;
+  };
+  redirectPathKey?: string;
+  defaultRedirectPath?: string;
+  onLoginSuccess?: (data: Record<string, string>) => void;
+}
 
 // In your sso-login page
 export default function SsoLoginPage() {
-  return <SsoLogin onSuccess={handleSuccess} onError={handleError} />;
+  return (
+    <SsoLogin
+      localStorageKeys={{
+        CURRENT_TENANT: 'current_tenant',
+        USER_DATA: 'user_data',
+        TENANTS: 'tenants',
+      }}
+      defaultRedirectPath="/home"
+      onLoginSuccess={handleSuccess}
+    />
+  );
 }
 \`\`\`
 
+> **Import from \`@iblai/iblai-js/web-containers/next\`** — requires Next.js
+
 **File Location**: \`packages/web-containers/src/components/sso-login.tsx\``,
     ErrorPage: `# ErrorPage Component
 
-Full-page error display.
+Full-page error display with customizable messaging.
 
 \`\`\`typescript
-import { ErrorPage } from '@iblai/web-containers/next';
+import { ErrorPage } from '@iblai/iblai-js/web-containers/next';
+
+interface ErrorPageProps {
+  errorCode: string;
+  supportEmail?: string;
+  showSupportButton?: boolean;
+  supportButtonText?: string;
+  customTitle?: string;
+  customDescription?: string;
+  customIcon?: React.ReactNode;
+  showHomeButton?: boolean;
+  homeButtonText?: string;
+  homeButtonHref?: string;
+  showReset?: boolean;
+  resetButtonText?: string;
+  reset?: () => void;
+}
 
 <ErrorPage
-  statusCode={404}
-  title="Page Not Found"
-  description="The page you're looking for doesn't exist."
+  errorCode="404"
+  customTitle="Page Not Found"
+  customDescription="The page you're looking for doesn't exist."
+  showHomeButton={true}
 />
 \`\`\`
 
+> **Import from \`@iblai/iblai-js/web-containers/next\`** — requires Next.js
+
 **File Location**: \`packages/web-containers/src/components/error/error-page.tsx\``,
+    AppSidebar: `# AppSidebar Component
+
+Collapsible sidebar for the Mentor app with configurable content and footer menu items.
+
+\`\`\`typescript
+import { AppSidebar } from '@iblai/iblai-js/web-containers/next';
+
+interface MenuItem {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  onClick: () => void;
+  hasBorder?: boolean;
+}
+
+interface AppSidebarProps {
+  logo?: React.ReactNode;
+  contentItems: MenuItem[];
+  footerItems: MenuItem[];
+  showProjects?: boolean;
+  showPinnedMessages?: boolean;
+  showRecentMessages?: boolean;
+}
+
+<AppSidebar
+  logo={<img src="/logo.svg" alt="Logo" />}
+  contentItems={[
+    { icon: MessageSquare, label: 'Chat', onClick: () => navigate('/chat') },
+    { icon: Compass, label: 'Explore', onClick: () => navigate('/explore'), hasBorder: true },
+  ]}
+  footerItems={[
+    { icon: Settings, label: 'Settings', onClick: openSettings },
+    { icon: LogOut, label: 'Logout', onClick: handleLogout },
+  ]}
+  showProjects={false}
+  showPinnedMessages={false}
+  showRecentMessages={false}
+/>
+\`\`\`
+
+> **Import from \`@iblai/iblai-js/web-containers/next\`** — requires Next.js
+
+**File Location**: \`packages/web-containers/src/components/mentor-ui/app-sidebar/index.tsx\``,
+    NavBar: `# NavBar Component
+
+Top navigation bar with user menu, new chat button, and optional mentor dropdown.
+
+\`\`\`typescript
+import { NavBar } from '@iblai/iblai-js/web-containers/next';
+
+interface NavBarProps {
+  username?: string | null;
+  isAuthenticated?: boolean;
+  onNewChat?: () => void;
+  onSettings?: () => void;
+  onLogout?: () => void;
+  onLogin?: () => void;
+  mentorName?: string;
+  showMentorDropdown?: boolean;
+  additionalMenuItems?: Array<{
+    icon: React.ComponentType<{ className?: string }>;
+    label: string;
+    onClick: () => void;
+    separator?: boolean;
+  }>;
+}
+
+<NavBar
+  username={username}
+  isAuthenticated={true}
+  onNewChat={() => startNewChat()}
+  onSettings={() => openSettings()}
+  onLogout={() => handleLogout()}
+  onLogin={() => redirectToLogin()}
+  mentorName="My Mentor"
+  showMentorDropdown={false}
+  additionalMenuItems={[
+    { icon: User, label: 'Profile', onClick: openProfile },
+  ]}
+/>
+\`\`\`
+
+> **Import from \`@iblai/iblai-js/web-containers/next\`** — requires Next.js
+
+**File Location**: \`packages/web-containers/src/components/mentor-ui/navbar/index.tsx\``,
+    ConversationStarters: `# ConversationStarters Component
+
+Displays guided prompt cards that users can click to start a chat session.
+
+\`\`\`typescript
+import { ConversationStarters } from '@iblai/iblai-js/web-containers/next';
+
+interface GuidedPrompt {
+  prompt: string;
+  icon?: string; // Lucide icon name (e.g., 'book-open', 'lightbulb')
+}
+
+interface ConversationStartersProps {
+  onTemplateSelect: (template: string) => void;
+  guidedPrompts?: GuidedPrompt[];
+  disabled?: boolean;
+  className?: string;
+}
+
+<ConversationStarters
+  onTemplateSelect={(prompt) => sendMessage(prompt)}
+  guidedPrompts={[
+    { prompt: 'Help me study for my exam', icon: 'book-open' },
+    { prompt: 'Explain this concept', icon: 'lightbulb' },
+  ]}
+  disabled={isStreaming}
+  className="mt-4"
+/>
+\`\`\`
+
+> **Import from \`@iblai/iblai-js/web-containers/next\`** — requires Next.js
+
+**File Location**: \`packages/web-containers/src/components/mentor-ui/welcome-chat/conversation-starters.tsx\``,
     ClientErrorPage: `# ClientErrorPage Component
 
 Client-side error boundary page.
@@ -1291,7 +1557,7 @@ Client-side error boundary page.
 // app/error.tsx
 'use client';
 
-import { ClientErrorPage } from '@iblai/web-containers/next';
+import { ClientErrorPage } from '@iblai/iblai-js/web-containers/next';
 
 export default function Error({
   error,
@@ -1300,24 +1566,234 @@ export default function Error({
   error: Error & { digest?: string };
   reset: () => void;
 }) {
-  return <ClientErrorPage error={error} reset={reset} />;
+  return (
+    <ClientErrorPage
+      handleError={(err) => console.error(err)}
+      errorCode="500"
+      showHomeButton={true}
+    />
+  );
+}
+
+interface ClientErrorPageProps {
+  header?: string;
+  message?: string;
+  errorCode?: string;
+  showHomeButton?: boolean;
+  supportEmail?: string;
+  handleError: (error: any) => void;
 }
 \`\`\`
 
+> **Import from \`@iblai/iblai-js/web-containers/next\`** — requires Next.js
+
 **File Location**: \`packages/web-containers/src/components/error/client-error-page.tsx\``,
+    // ============================================================================
+    // WORKFLOW COMPONENTS
+    // ============================================================================
+    ConnectorManagementDialog: `# ConnectorManagementDialog Component
+
+Dialog for browsing and adding MCP (Model Context Protocol) connectors to a workflow. Displays featured and third-party connectors in a searchable, tabbed interface.
+
+\`\`\`typescript
+import { ConnectorManagementDialog } from '@iblai/iblai-js/web-containers';
+
+interface ConnectorManagementDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onAddConnector?: (connector: { name: string; icon?: string }) => void;
+}
+
+<ConnectorManagementDialog
+  open={isOpen}
+  onClose={() => setIsOpen(false)}
+  onAddConnector={(connector) => handleAdd(connector)}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/workflows/connector-management-dialog.tsx\``,
+    CreateWorkflowModal: `# CreateWorkflowModal Component
+
+Modal dialog for creating a new workflow. Provides a text input for the workflow name with Enter key support and loading state.
+
+\`\`\`typescript
+import { CreateWorkflowModal } from '@iblai/iblai-js/web-containers';
+
+interface CreateWorkflowModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreateWorkflow: (name: string) => void;
+  isCreating?: boolean;
+}
+
+<CreateWorkflowModal
+  open={showCreate}
+  onOpenChange={setShowCreate}
+  onCreateWorkflow={(name) => createWorkflow(name)}
+  isCreating={isCreating}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/workflows/create-workflow-modal.tsx\``,
+    DeleteWorkflowModal: `# DeleteWorkflowModal Component
+
+Alert dialog for confirming workflow deletion. Shows the workflow name and manages loading state during deletion.
+
+\`\`\`typescript
+import { DeleteWorkflowModal } from '@iblai/iblai-js/web-containers';
+
+interface DeleteWorkflowModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isDeleting: boolean;
+  workflowName?: string;
+}
+
+<DeleteWorkflowModal
+  isOpen={showDelete}
+  onClose={() => setShowDelete(false)}
+  onConfirm={handleDelete}
+  isDeleting={isDeleting}
+  workflowName={workflow.name}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/workflows/delete-workflow-modal.tsx\``,
+    NodeTypeItem: `# NodeTypeItem Type
+
+Type interface representing a workflow node that can be placed in a workflow canvas.
+
+\`\`\`typescript
+import type { NodeTypeItem } from '@iblai/iblai-js/web-containers';
+
+interface NodeTypeItem {
+  id: string;       // Node type identifier (e.g., 'mentor', 'end', 'if-else')
+  label: string;    // Display label
+  category?: string; // Optional category grouping
+}
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/workflows/workflow-sidebar.tsx\``,
+    NodeTypeSection: `# NodeTypeSection Type
+
+Type interface representing a group of related node types for display in the WorkflowSidebar.
+
+\`\`\`typescript
+import type { NodeTypeSection, NodeTypeItem } from '@iblai/iblai-js/web-containers';
+
+interface NodeTypeSection {
+  title: string;         // Section heading (e.g., 'Core', 'Tools', 'Logic')
+  items: NodeTypeItem[]; // Node types in this section
+}
+
+const sections: NodeTypeSection[] = [
+  { title: 'Core', items: [{ id: 'mentor', label: 'Mentor' }, { id: 'end', label: 'End' }] },
+  { title: 'Logic', items: [{ id: 'if-else', label: 'If/Else' }] },
+];
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/workflows/workflow-sidebar.tsx\``,
+    ToolDialogs: `# ToolDialogs Component
+
+Dialog system for adding and configuring various tool types in a workflow. Supports MCP, Web Search, Code Interpreter, Guardrails, If/Else, While loops, User Approval, Transform, and Set State tools.
+
+\`\`\`typescript
+import { ToolDialogs } from '@iblai/iblai-js/web-containers';
+
+interface ToolDialogsProps {
+  trigger: React.ReactNode;
+  onAddTool?: (toolType: string, toolName: string, config?: Record<string, unknown>) => void;
+}
+
+<ToolDialogs
+  trigger={<Button>Add Tool</Button>}
+  onAddTool={(type, name, config) => handleAddTool(type, name, config)}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/workflows/tool-dialogs.tsx\``,
+    WorkflowSidebar: `# WorkflowSidebar Component
+
+Sidebar displaying available workflow node types organized into sections. Supports drag-and-drop for adding nodes to a workflow canvas.
+
+\`\`\`typescript
+import { WorkflowSidebar } from '@iblai/iblai-js/web-containers';
+import type { NodeTypeSection } from '@iblai/iblai-js/web-containers';
+
+interface WorkflowSidebarProps {
+  onDragStart: (item: { id: string; label: string; type: string }) => void;
+  onItemClick: (item: { id: string; label: string; type: string }) => void;
+  nodeTypes?: NodeTypeSection[]; // Custom sections (optional)
+}
+
+<WorkflowSidebar
+  onDragStart={(item) => handleDragStart(item)}
+  onItemClick={(item) => handleAddNode(item)}
+  nodeTypes={customSections}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/workflows/workflow-sidebar.tsx\``,
 };
+const UI_PRIMITIVES = [
+    'Button',
+    'Card',
+    'Dialog',
+    'Input',
+    'Label',
+    'Textarea',
+    'Select',
+    'Checkbox',
+    'RadioGroup',
+    'Switch',
+    'Tabs',
+    'Avatar',
+    'Badge',
+    'Tooltip',
+    'Popover',
+    'DropdownMenu',
+    'Table',
+    'Skeleton',
+    'Separator',
+    'Progress',
+    'Calendar',
+    'Pagination',
+    'Toggle',
+    'Toast',
+    'Chart',
+];
 export function getComponentInfo(componentName) {
     const info = components[componentName];
-    if (!info) {
-        const allComponents = Object.keys(components).sort();
-        return `Component "${componentName}" not found.
-
-**Available UI Primitives (${allComponents.filter((c) => ['Button', 'Card', 'Dialog', 'Input', 'Label', 'Textarea', 'Select', 'Checkbox', 'RadioGroup', 'Switch', 'Tabs', 'Avatar', 'Badge', 'Tooltip', 'Popover', 'DropdownMenu', 'Table', 'Skeleton', 'Separator', 'Calendar', 'Pagination', 'Toggle', 'Toast', 'Chart'].includes(c)).length}):**
-Button, Card, Dialog, Input, Label, Textarea, Select, Checkbox, RadioGroup, Switch, Tabs, Avatar, Badge, Tooltip, Popover, DropdownMenu, Table, Skeleton, Separator, Calendar, Pagination, Toggle, Toast, Chart
-
-**Available Feature Components (${allComponents.filter((c) => !['Button', 'Card', 'Dialog', 'Input', 'Label', 'Textarea', 'Select', 'Checkbox', 'RadioGroup', 'Switch', 'Tabs', 'Avatar', 'Badge', 'Tooltip', 'Popover', 'DropdownMenu', 'Table', 'Skeleton', 'Separator', 'Calendar', 'Pagination', 'Toggle', 'Toast', 'Chart'].includes(c)).length}):**
-Profile, InviteUserDialog, LocalLLMTab, NotificationDropdown, SendNotificationDialog, AlertsTab, AnalyticsLayout, LoginButton, SignupButton, Markdown, RichTextEditor, SearchableMultiSelect, TenantSwitcher, TopBanner, Loader, Spinner, TimeTrackingProvider, UserProfileDropdown, AdvancedPagination, ContentViewWrapper, Version, SsoLogin, ErrorPage, ClientErrorPage`;
-    }
-    return info;
+    if (info)
+        return info;
+    // Fuzzy match
+    const lower = componentName.toLowerCase();
+    const match = Object.keys(components).find((k) => k.toLowerCase() === lower);
+    if (match)
+        return components[match];
+    const allComponents = Object.keys(components).sort();
+    const featureComponents = allComponents.filter((c) => !UI_PRIMITIVES.includes(c));
+    const nextComponents = [
+        'UserProfileDropdown',
+        'UserProfileModal',
+        'SsoLogin',
+        'ErrorPage',
+        'ClientErrorPage',
+        'AppSidebar',
+        'NavBar',
+        'ConversationStarters',
+        ,
+    ];
+    return `Component "${componentName}" not found.
+
+**UI Primitives (${UI_PRIMITIVES.length}):**
+${UI_PRIMITIVES.join(', ')}
+
+**Feature Components (${featureComponents.filter((c) => !nextComponents.includes(c)).length}):**
+${featureComponents.filter((c) => !nextComponents.includes(c)).join(', ')}
+
+**Next.js Components (${nextComponents.length}) — import from @iblai/iblai-js/web-containers/next:**
+${nextComponents.join(', ')}`;
 }
 //# sourceMappingURL=component-info.js.map