@olwiba/ui 0.2.22 → 0.2.24

package/dist/index.js

@@ -2,10 +2,10 @@ import { cn } from './chunk-AMWLSHD6.js';
 export { MdxContent, cn } from './chunk-AMWLSHD6.js';
 import * as React21 from 'react';
 import { useRef, useEffect, useState, useCallback } from 'react';
-import { Button as Button$1, Card as Card$1, Input as Input$1, Textarea as Textarea$1, Checkbox as Checkbox$1, Switch as Switch$1, useIsMobile, UIVariantProvider, Badge as Badge$1, cn as cn$1, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Avatar, AvatarImage, AvatarFallback, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, Dialog, DialogTrigger, Progress, useUIVariant, Separator, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Label, Sheet, SheetTrigger, SheetContent, StatusIndicator, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandSeparator, CommandGroup, CommandItem, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ContextMenu as ContextMenu$1, ContextMenuTrigger, ContextMenuContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, CommandShortcut, Popover, PopoverTrigger, PopoverContent, Spinner, SidebarProvider, SidebarInset, CardHeader, CardTitle, CardDescription, CardContent, InputOTP, InputOTPGroup, InputOTPSlot, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem, ContextMenuShortcut, useSidebar, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenuButton, SidebarFooter, SidebarTrigger, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup } from '@olwiba/cn';
+import { Button as Button$1, Card as Card$1, Input as Input$1, Textarea as Textarea$1, Checkbox as Checkbox$1, Switch as Switch$1, useIsMobile, UIVariantProvider, Badge as Badge$1, SidebarProvider, SidebarInset, cn as cn$1, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Avatar, AvatarImage, AvatarFallback, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, Dialog, DialogTrigger, Progress, useUIVariant, Separator, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Label, Sheet, SheetTrigger, SheetContent, StatusIndicator, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandSeparator, CommandGroup, CommandItem, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ContextMenu as ContextMenu$1, ContextMenuTrigger, ContextMenuContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, CommandShortcut, Spinner, Popover, PopoverTrigger, PopoverContent, useSidebar, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenuButton, SidebarFooter, SidebarTrigger, CardHeader, CardTitle, CardDescription, CardContent, InputOTP, InputOTPGroup, InputOTPSlot, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem, ContextMenuShortcut, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup } from '@olwiba/cn';
 export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Enchanted } from '@olwiba/cn';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Search, ArrowUp, ArrowDown, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal, UserPlus, Download, CreditCard, Check, Loader2, ArrowLeft, ArrowUpRight, X, Sparkles, RefreshCw, ArrowRight, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, MessageSquare, ChevronDown, Send, Menu, UploadCloud, File, CheckCircle2, AlertCircle, Bell, Inbox, Activity, TrendingUp, TrendingDown, LayoutGrid, List, Sun, Moon, Palette, AlertTriangle, Rocket, Info, Layers, ShieldCheck, Building2, BirdIcon, MoreVerticalIcon, CreditCardIcon, BellIcon, SettingsIcon, LogOutIcon } from 'lucide-react';
+import { Search, ArrowUp, ArrowDown, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal, UserPlus, Download, CreditCard, Check, Loader2, ArrowLeft, ArrowUpRight, X, Sparkles, RefreshCw, ArrowRight, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, MessageSquare, ChevronDown, Send, Menu, UploadCloud, File, CheckCircle2, AlertCircle, Bell, Inbox, Activity, TrendingUp, TrendingDown, LayoutGrid, List, Sun, Moon, Palette, AlertTriangle, Rocket, Info, Layers, BirdIcon, MoreVerticalIcon, CreditCardIcon, BellIcon, SettingsIcon, LogOutIcon, ShieldCheck, Building2 } from 'lucide-react';
 import { useReactTable, getPaginationRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, rectSortingStrategy, horizontalListSortingStrategy, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
@@ -302,7 +302,7 @@ function NavUser({ user }) {
         children: [
           /* @__PURE__ */ jsxs(Avatar, { mode: avatarMode, size: "sm", children: [
             user.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
-            /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: user.avatarFallback ?? /* @__PURE__ */ jsx(
               BirdIcon,
               {
                 "aria-hidden": true,
@@ -329,7 +329,7 @@ function NavUser({ user }) {
           /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
             /* @__PURE__ */ jsxs(Avatar, { mode: avatarMode, size: "sm", children: [
               user.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
-              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: user.avatarFallback ?? /* @__PURE__ */ jsx(
                 BirdIcon,
                 {
                   "aria-hidden": true,
@@ -379,7 +379,10 @@ function ShellSidebar({
   renderLink,
   collapsible,
   side,
-  sidebarPosition
+  sidebarPosition,
+  sidebarContentKey,
+  sidebarContentClassName,
+  sidebarFooterStart
 }) {
   const fallbackLogo = typeof brand.name === "string" ? brand.name.slice(0, 1).toUpperCase() : null;
   const { isMobile, setOpenMobile } = useSidebar();
@@ -387,71 +390,137 @@ function ShellSidebar({
     if (isMobile) setOpenMobile(false);
   }, [isMobile, setOpenMobile]);
   return /* @__PURE__ */ jsxs(Sidebar, { side, collapsible, sidebarPosition, children: [
-    /* @__PURE__ */ jsx(SidebarHeader, { className: "py-3", children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: /* @__PURE__ */ jsxs(
-      "div",
+    /* @__PURE__ */ jsx(
+      SidebarHeader,
       {
-        className: cn$1(
-          "flex items-center gap-2 overflow-hidden rounded-md p-2 text-left",
-          RAIL_SQUARE
-        ),
-        children: [
-          brand.logo ? (
-            // Neutral slot: the consumer's logo owns its own chrome
-            // (background, radius). Sized to fill the collapsed icon rail.
-            /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center [&>svg]:size-5", children: brand.logo })
-          ) : /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-sm font-semibold text-primary-foreground", children: fallbackLogo }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 whitespace-nowrap text-base font-semibold leading-none [text-box-edge:ex_alphabetic] [text-box-trim:trim-both] group-data-[collapsible=icon]:hidden", children: brand.name })
-        ]
-      }
-    ) }) }) }),
-    /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsxs(SidebarGroupContent, { className: "flex flex-col gap-2", children: [
-      action && /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: action.href ? /* @__PURE__ */ jsx(
-        SidebarMenuButton,
-        {
-          asChild: true,
-          tooltip: action.label,
-          className: "min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground",
-          children: renderLink({
-            href: action.href,
+        className: cn$1("py-3", sidebarContentClassName),
+        children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn$1(
+              "flex items-center gap-2 overflow-hidden rounded-md p-2 text-left",
+              RAIL_SQUARE
+            ),
+            children: [
+              brand.logo ? (
+                // Neutral slot: the consumer's logo owns its own chrome
+                // (background, radius). Sized to fill the collapsed icon rail.
+                /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center [&>svg]:size-5", children: brand.logo })
+              ) : /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-sm font-semibold text-primary-foreground", children: fallbackLogo }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 whitespace-nowrap text-base font-semibold leading-none [text-box-edge:ex_alphabetic] [text-box-trim:trim-both] group-data-[collapsible=icon]:hidden", children: brand.name })
+            ]
+          }
+        ) }) })
+      },
+      `${sidebarContentKey ?? "default"}-header`
+    ),
+    /* @__PURE__ */ jsx(
+      SidebarContent,
+      {
+        className: sidebarContentClassName,
+        children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsxs(SidebarGroupContent, { className: "flex flex-col gap-2", children: [
+          action && /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: action.href ? /* @__PURE__ */ jsx(
+            SidebarMenuButton,
+            {
+              asChild: true,
+              tooltip: action.label,
+              className: "min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground",
+              children: renderLink({
+                href: action.href,
+                children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  action.icon && /* @__PURE__ */ jsx(action.icon, {}),
+                  /* @__PURE__ */ jsx("span", { children: action.label })
+                ] })
+              })
+            }
+          ) : /* @__PURE__ */ jsxs(
+            SidebarMenuButton,
+            {
+              tooltip: action.label,
+              onClick: action.onClick,
+              className: "min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground",
+              children: [
+                action.icon && /* @__PURE__ */ jsx(action.icon, {}),
+                /* @__PURE__ */ jsx("span", { children: action.label })
+              ]
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, isActive: item.isActive, children: renderLink({
+            href: item.href,
             children: /* @__PURE__ */ jsxs(Fragment, { children: [
-              action.icon && /* @__PURE__ */ jsx(action.icon, {}),
-              /* @__PURE__ */ jsx("span", { children: action.label })
+              /* @__PURE__ */ jsx(item.icon, {}),
+              /* @__PURE__ */ jsx("span", { children: item.label })
             ] })
-          })
-        }
-      ) : /* @__PURE__ */ jsxs(
-        SidebarMenuButton,
-        {
-          tooltip: action.label,
-          onClick: action.onClick,
-          className: "min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground",
-          children: [
-            action.icon && /* @__PURE__ */ jsx(action.icon, {}),
-            /* @__PURE__ */ jsx("span", { children: action.label })
-          ]
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, isActive: item.isActive, children: renderLink({
-        href: item.href,
-        children: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(item.icon, {}),
-          /* @__PURE__ */ jsx("span", { children: item.label })
-        ] })
-      }) }) }, item.label)) })
-    ] }) }) }),
-    /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(NavUser, { user }) })
+          }) }) }, item.label)) })
+        ] }) })
+      },
+      `${sidebarContentKey ?? "default"}-content`
+    ),
+    /* @__PURE__ */ jsxs(
+      SidebarFooter,
+      {
+        className: sidebarContentClassName,
+        children: [
+          sidebarFooterStart,
+          /* @__PURE__ */ jsx(NavUser, { user })
+        ]
+      },
+      `${sidebarContentKey ?? "default"}-footer`
+    )
   ] });
 }
 function ShellHeader({
   pageTitle,
+  breadcrumbs,
   headerStart,
-  headerEnd
+  headerEnd,
+  renderLink
 }) {
+  const { isMobile, setOpen, setOpenMobile } = useSidebar();
+  const expandSidebar = useCallback(() => {
+    if (isMobile) setOpenMobile(true);
+    else setOpen(true);
+  }, [isMobile, setOpen, setOpenMobile]);
+  const headerStartContent = typeof headerStart === "function" ? headerStart({ expandSidebar }) : headerStart;
+  const source = breadcrumbs?.length ? breadcrumbs : pageTitle ? [pageTitle] : [];
+  const trail = source.map(
+    (crumb) => typeof crumb === "string" ? { label: crumb, href: void 0 } : crumb
+  );
   return /* @__PURE__ */ jsx("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [
     /* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }),
-    headerStart && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: headerStart }),
-    /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
-    /* @__PURE__ */ jsx("h1", { className: "text-base font-medium", children: pageTitle }),
+    headerStartContent && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: headerStartContent }),
+    trail.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
+      /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "flex min-w-0 items-center gap-1.5 text-sm", children: trail.map((crumb, index) => {
+        const isCurrent = index === trail.length - 1;
+        const isLink = !isCurrent && Boolean(crumb.href);
+        return /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "flex min-w-0 items-center gap-1.5",
+            children: [
+              index > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground/60", children: "/" }),
+              isLink ? renderLink({
+                href: crumb.href,
+                className: "truncate rounded-sm text-muted-foreground transition-colors hover:text-foreground hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: crumb.label
+              }) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-current": isCurrent ? "page" : void 0,
+                  className: cn$1(
+                    "truncate",
+                    isCurrent ? "font-medium text-foreground" : "text-muted-foreground"
+                  ),
+                  children: crumb.label
+                }
+              )
+            ]
+          },
+          `${crumb.label}-${index}`
+        );
+      }) })
+    ] }),
     headerEnd && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-1", children: headerEnd })
   ] }) });
 }
@@ -469,12 +538,17 @@ function AppShell({
   navItems = [],
   action,
   user = defaultUser,
-  pageTitle = "Dashboard",
+  pageTitle,
+  breadcrumbs,
+  footer,
   headerStart,
   headerEnd,
   renderLink = defaultRenderLink,
   collapsible = "icon",
   sidebarPosition = "viewport",
+  sidebarContentKey,
+  sidebarContentClassName,
+  sidebarFooterStart,
   side = "left",
   contentClassName = "p-6",
   children
@@ -496,12 +570,25 @@ function AppShell({
             renderLink,
             collapsible,
             side,
-            sidebarPosition
+            sidebarPosition,
+            sidebarContentKey,
+            sidebarContentClassName,
+            sidebarFooterStart
           }
         ),
         /* @__PURE__ */ jsxs(SidebarInset, { className: "overflow-y-auto", children: [
-          /* @__PURE__ */ jsx(ShellHeader, { pageTitle, headerStart, headerEnd }),
-          /* @__PURE__ */ jsx("div", { className: contentClassName, children })
+          /* @__PURE__ */ jsx(
+            ShellHeader,
+            {
+              pageTitle,
+              breadcrumbs,
+              headerStart,
+              headerEnd,
+              renderLink
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: cn$1("flex min-h-0 grow shrink-0 flex-col", contentClassName), children }),
+          footer && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: footer })
         ] })
       ]
     }
@@ -519,49 +606,116 @@ function AppPageHero({
   action,
   children,
   compact = false,
+  surface = "card",
   className
 }) {
+  const isPlain = surface === "plain";
   return /* @__PURE__ */ jsxs(
     "section",
     {
       className: cn(
-        "relative overflow-hidden rounded-3xl border bg-card/80 p-5 shadow-sm sm:p-6",
-        // The glow blobs are decoration, and `::after` is the section's last
-        // child — so with everything on `z-index: auto` it paints above the
-        // header content and swallows clicks on whatever sits under it. At
-        // narrow widths the action row stacks below the copy, right into the
-        // bottom-left blob, which is how a visible button stops responding.
-        // pointer-events-none keeps them purely visual.
-        "before:pointer-events-none before:absolute before:-right-16 before:-top-16 before:size-44 before:rounded-full before:bg-primary/15 before:blur-3xl",
-        "after:pointer-events-none after:absolute after:-bottom-20 after:left-10 after:size-52 after:rounded-full after:bg-primary/10 after:blur-3xl",
+        "relative",
+        !isPlain && [
+          "overflow-hidden border bg-card/80 shadow-sm",
+          // Compact is the page-pattern header: same surface and glow, less
+          // bulk, so it introduces a route without eating the fold above dense
+          // content.
+          compact ? "rounded-2xl p-4 sm:p-5" : "rounded-3xl p-5 sm:p-6",
+          // The glow blobs are decoration, and `::after` is the section's last
+          // child — so with everything on `z-index: auto` it paints above the
+          // header content and swallows clicks on whatever sits under it. At
+          // narrow widths the action row stacks below the copy, right into the
+          // bottom-left blob, which is how a visible button stops responding.
+          // pointer-events-none keeps them purely visual.
+          "before:pointer-events-none before:absolute before:-right-16 before:-top-16 before:rounded-full before:bg-primary/15 before:blur-3xl",
+          "after:pointer-events-none after:absolute after:left-10 after:rounded-full after:bg-primary/10 after:blur-3xl",
+          compact ? "before:size-32 after:-bottom-16 after:size-40" : "before:size-44 after:-bottom-20 after:size-52"
+        ],
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-4", children: [
-            Icon && /* @__PURE__ */ jsx("div", { className: "flex size-12 shrink-0 items-center justify-center rounded-2xl border bg-background/70 text-primary shadow-sm", children: /* @__PURE__ */ jsx(Icon, { className: "size-5" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
-              eyebrow && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.24em] text-primary/80", children: eyebrow }),
-              /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: cn(
-                    "font-semibold tracking-tight",
-                    compact ? "text-2xl" : "text-3xl sm:text-4xl"
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative flex flex-col sm:flex-row sm:items-start sm:justify-between",
+              compact ? "gap-3" : "gap-5"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-start", compact ? "gap-3" : "gap-4"), children: [
+                Icon && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex shrink-0 items-center justify-center border bg-background/70 text-primary shadow-sm",
+                      compact ? "size-10 rounded-xl" : "size-12 rounded-2xl"
+                    ),
+                    children: /* @__PURE__ */ jsx(Icon, { className: compact ? "size-4" : "size-5" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", compact ? "space-y-1" : "space-y-2"), children: [
+                  eyebrow && /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "font-semibold uppercase text-primary/80",
+                        compact ? "text-[11px] tracking-[0.18em]" : "text-xs tracking-[0.24em]"
+                      ),
+                      children: eyebrow
+                    }
                   ),
-                  children: title
-                }
-              ),
-              description && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-sm leading-6 text-muted-foreground", children: description })
-            ] })
-          ] }),
-          action && /* @__PURE__ */ jsx("div", { className: "relative shrink-0 sm:pt-1", children: action })
-        ] }),
-        children && /* @__PURE__ */ jsx("div", { className: "relative mt-5", children })
+                  /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        // Default leading puts ~4px of half-leading above the cap, so
+                        // the title reads as sitting low against a top-aligned icon.
+                        "font-semibold leading-tight tracking-tight",
+                        compact ? "text-xl sm:text-2xl" : "text-3xl sm:text-4xl"
+                      ),
+                      children: title
+                    }
+                  ),
+                  description && // A div, not a p: `description` is a ReactNode, and callers pass
+                  // multiple paragraphs. Nesting <p> inside <p> is invalid HTML and
+                  // the parser silently unnests it, which breaks hydration.
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "max-w-2xl text-muted-foreground",
+                        compact ? "text-sm leading-5" : "text-sm leading-6"
+                      ),
+                      children: description
+                    }
+                  )
+                ] })
+              ] }),
+              action && /* @__PURE__ */ jsx("div", { className: cn("relative shrink-0", !compact && "sm:pt-1"), children: action })
+            ]
+          }
+        ),
+        children && /* @__PURE__ */ jsx("div", { className: cn("relative", compact ? "mt-4" : "mt-5"), children })
       ]
     }
   );
 }
+function AppFooter({ start, end, children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      ...props,
+      className: cn(
+        "border-t bg-background px-4 py-3 text-xs text-muted-foreground sm:px-6",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 font-medium text-foreground", children: start ?? children }),
+        end && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: end })
+      ] })
+    }
+  );
+}
 var defaultRenderLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function CenteredAuth({ children, brand, framed, className }) {
   if (framed) {
@@ -1199,19 +1353,55 @@ function OnboardingWizard({
     ] })
   ] });
 }
-function EmptyState({ icon: Icon, title, description, action, className, ...props }) {
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  eyebrow,
+  action,
+  secondaryAction,
+  variant = "plain",
+  compact = false,
+  fill = false,
+  className,
+  ...props
+}) {
+  const card = variant === "card";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn$1("flex flex-col items-center justify-center gap-3 py-12 text-center", className),
+      className: cn$1(
+        "relative flex flex-col items-center justify-center overflow-hidden text-center",
+        !card && "gap-3 py-12",
+        card && "min-h-72 rounded-xl border border-dashed bg-card/80 p-8 shadow-sm sm:p-10",
+        card && compact && "min-h-0 p-5 sm:p-6",
+        fill && "min-h-0 w-full flex-1",
+        className
+      ),
       ...props,
       children: [
-        Icon && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-2xl border bg-muted", children: /* @__PURE__ */ jsx(Icon, { className: "size-6 text-muted-foreground" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm text-muted-foreground", children: description })
-        ] }),
-        action
+        card && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-10 top-0 h-24 rounded-full bg-primary/10 blur-3xl" }),
+        /* @__PURE__ */ jsxs("div", { className: cn$1("relative flex flex-col items-center", card ? "gap-4" : "gap-3"), children: [
+          Icon && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn$1(
+                "flex size-12 items-center justify-center rounded-2xl border",
+                card ? "bg-background text-primary shadow-sm" : "bg-muted text-muted-foreground"
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { className: card ? "size-5" : "size-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cn$1(card ? "max-w-md space-y-2" : "max-w-xs space-y-1"), children: [
+            eyebrow && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground", children: eyebrow }),
+            /* @__PURE__ */ jsx("h3", { className: cn$1("font-semibold", card && "text-xl tracking-tight"), children: title }),
+            description && /* @__PURE__ */ jsx("div", { className: cn$1("text-sm text-muted-foreground", card && "leading-6"), children: description })
+          ] }),
+          (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 sm:flex-row", children: [
+            action,
+            secondaryAction
+          ] })
+        ] })
       ]
     }
   );
@@ -4011,6 +4201,51 @@ function CommandMenu({
     ] })
   ] });
 }
+function LoadMore({
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
+  auto = true,
+  label = "more",
+  rootMargin = "400px",
+  className,
+  ...props
+}) {
+  const sentinelRef = React21.useRef(null);
+  const stateRef = React21.useRef({ hasNextPage, isFetchingNextPage, fetchNextPage });
+  stateRef.current = { hasNextPage, isFetchingNextPage, fetchNextPage };
+  React21.useEffect(() => {
+    if (!auto) return;
+    const node = sentinelRef.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return;
+        const state = stateRef.current;
+        if (state.hasNextPage && !state.isFetchingNextPage) void state.fetchNextPage();
+      },
+      { rootMargin }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [auto, rootMargin]);
+  if (!hasNextPage) return null;
+  return /* @__PURE__ */ jsx("div", { ref: sentinelRef, className: cn$1("flex justify-center py-4", className), ...props, children: auto ? /* @__PURE__ */ jsx("span", { className: "flex h-9 items-center text-sm text-muted-foreground", "aria-live": "polite", children: isFetchingNextPage && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }),
+    " Loading more\u2026"
+  ] }) }) : /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      variant: "outline",
+      onClick: () => void fetchNextPage(),
+      disabled: isFetchingNextPage,
+      children: isFetchingNextPage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }),
+        " Loading\u2026"
+      ] }) : `Load more ${label}`
+    }
+  ) });
+}
 function DataView({
   items,
   getRowId,
@@ -5340,18 +5575,21 @@ function PostList({
   posts,
   renderLink,
   emptyMessage = "No posts published yet.",
-  columns = 3,
+  columns,
   className
 }) {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground italic", children: emptyMessage });
   }
+  const resolvedColumns = columns ?? (posts.length < 3 ? 2 : 3);
+  const balancedShortListClassName = columns === void 0 ? posts.length === 1 ? "mx-auto w-full max-w-md sm:grid-cols-1" : posts.length === 2 ? "mx-auto w-full max-w-3xl" : void 0 : void 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn$1(
         "grid grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2",
-        columns === 3 && "lg:grid-cols-3",
+        resolvedColumns === 3 && "lg:grid-cols-3",
+        balancedShortListClassName,
         className
       ),
       children: posts.map((post) => /* @__PURE__ */ jsx(PostCard, { ...post, renderLink }, post.slug))
@@ -5569,6 +5807,6 @@ function usePagination(total, pageSize) {
   return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
 }
 
-export { ActivityFeed, AnimatedPill, AnimatedSwap, AppContent, AppGrid, AppGridCell, AppPageHero, AppScreen, AppShell, AuthSection, Badge, BillingPanel, BrandColorSwitchMinimal, Button, Card, Carousel, ChangelogCard, ChangelogList, Chart, Checkbox, CommandMenu, ComparisonSection, ConfirmDialog, ContactSection, ContextMenu, CountUp, CountdownTimer, CtaSection, DataTable, DataView, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeatureMarqueeSection, FeaturesSection, FileUpload, FlowBracket, FlowConnector, Footer, FullPageSpinner, GlassCard, Grid, GridItem, GroupedFeaturesSection, HeroSection, ImageCard, Input, LogoStrip, MarketingSurfaceProvider, MediaCard, ModeSwitchMinimal, Navbar, NewsletterSection, NotificationToast, NotificationsPopover, OlwibaUIProvider, OnboardingWizard, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, QualificationSection, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, SettingsSection, Sortable, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, StepsSection, Suspensed, Switch, TeamMembersPanel, TeamSection, TechStackSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpdateBanner, UpgradePrompt, VersionBanner, ViewToggle, marketingSectionSpacing, notify, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMarketingSurface, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useSectionSurface, useUIMode, useViewMode };
+export { ActivityFeed, AnimatedPill, AnimatedSwap, AppContent, AppFooter, AppGrid, AppGridCell, AppPageHero, AppScreen, AppShell, AuthSection, Badge, BillingPanel, BrandColorSwitchMinimal, Button, Card, Carousel, ChangelogCard, ChangelogList, Chart, Checkbox, CommandMenu, ComparisonSection, ConfirmDialog, ContactSection, ContextMenu, CountUp, CountdownTimer, CtaSection, DataTable, DataView, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeatureMarqueeSection, FeaturesSection, FileUpload, FlowBracket, FlowConnector, Footer, FullPageSpinner, GlassCard, Grid, GridItem, GroupedFeaturesSection, HeroSection, ImageCard, Input, LoadMore, LogoStrip, MarketingSurfaceProvider, MediaCard, ModeSwitchMinimal, Navbar, NewsletterSection, NotificationToast, NotificationsPopover, OlwibaUIProvider, OnboardingWizard, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, QualificationSection, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, SettingsSection, Sortable, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, StepsSection, Suspensed, Switch, TeamMembersPanel, TeamSection, TechStackSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpdateBanner, UpgradePrompt, VersionBanner, ViewToggle, marketingSectionSpacing, notify, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMarketingSurface, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useSectionSurface, useUIMode, useViewMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map