@olwiba/ui 0.2.23 → 0.2.24

package/dist/index.d.ts

@@ -226,6 +226,8 @@ interface AppShellUser {
     email: string;
     name?: string;
     avatar?: string;
+    /** Product-owned artwork shown when no avatar image exists. Defaults to the Olwiba bird. */
+    avatarFallback?: ReactNode;
     /** Displayed as a sub-label (e.g. plan tier). */
     plan?: string;
     onSignOut?: () => void;
@@ -256,6 +258,11 @@ type AppShellBreadcrumb = string | {
     label: string;
     href?: string;
 };
+interface AppShellHeaderControls {
+    /** Expands the desktop sidebar or opens its native mobile presentation. */
+    expandSidebar: () => void;
+}
+type AppShellHeaderStart = ReactNode | ((controls: AppShellHeaderControls) => ReactNode);
 interface AppShellProps {
     brand?: AppShellBrand;
     navItems?: AppNavItem[];
@@ -274,10 +281,16 @@ interface AppShellProps {
      * and preferred over `pageTitle` when supplied.
      */
     breadcrumbs?: AppShellBreadcrumb[];
-    /** Slot rendered at the start of the top header bar, after the sidebar trigger. */
-    headerStart?: ReactNode;
+    /**
+     * Slot rendered at the start of the top header bar, after the sidebar trigger.
+     * Use the render form when a custom control needs to expand the shell's own
+     * sidebar without importing its private provider context.
+     */
+    headerStart?: AppShellHeaderStart;
     /** Slot rendered at the end of the top header bar. */
     headerEnd?: ReactNode;
+    /** Product chrome rendered above the user menu in the sidebar footer. */
+    sidebarFooterStart?: ReactNode;
     /**
      * App chrome rendered after the page outlet — normally an `AppFooter`. This
      * belongs to the shell, not to a page pattern: otherwise every route
@@ -300,6 +313,10 @@ interface AppShellProps {
      * - `"contained"` — fills its parent container; use in docs sandboxes, modals, or embedded previews.
      */
     sidebarPosition?: 'viewport' | 'contained';
+    /** Remount key for an animated sidebar identity or navigation-mode change. */
+    sidebarContentKey?: string;
+    /** Classes applied to the sidebar header, content, and footer. */
+    sidebarContentClassName?: string;
     /** Which side the sidebar sits on. @default "left" */
     side?: 'left' | 'right';
     /**
@@ -312,7 +329,7 @@ interface AppShellProps {
      */
     contentClassName?: string;
 }
-declare function AppShell({ brand, navItems, action, user, pageTitle, breadcrumbs, footer, headerStart, headerEnd, renderLink, collapsible, sidebarPosition, side, contentClassName, children, }?: AppShellProps): react_jsx_runtime.JSX.Element;
+declare function AppShell({ brand, navItems, action, user, pageTitle, breadcrumbs, footer, headerStart, headerEnd, renderLink, collapsible, sidebarPosition, sidebarContentKey, sidebarContentClassName, sidebarFooterStart, side, contentClassName, children, }?: AppShellProps): react_jsx_runtime.JSX.Element;
 
 interface AppPageHeroProps {
     eyebrow?: ReactNode;
@@ -354,8 +371,9 @@ interface AppFooterProps extends HTMLAttributes<HTMLElement> {
  * the page outlet rather than inside a page pattern. Public marketing pages use
  * the full `Footer` instead — this exists so long app pages do not end abruptly.
  *
- * The row owns geometry only. What the slots contain — live status, version,
- * links, product copy — stays with the product.
+ * The row owns its solid chrome surface and geometry so page ambience cannot
+ * bleed through it. What the slots contain — live status, version, links,
+ * product copy — stays with the product.
  */
 declare function AppFooter({ start, end, children, className, ...props }: AppFooterProps): react_jsx_runtime.JSX.Element;
 
@@ -527,10 +545,18 @@ declare function OnboardingWizard({ steps, onComplete, onStepChange, step: stepP
 interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: LucideIcon;
     title: string;
-    description?: string;
+    description?: React.ReactNode;
+    eyebrow?: React.ReactNode;
     action?: React.ReactNode;
+    secondaryAction?: React.ReactNode;
+    /** Adds the application-card surface used for route-level empty states. */
+    variant?: 'plain' | 'card';
+    /** Reduces the card presentation's minimum height and padding. */
+    compact?: boolean;
+    /** Fills a flex-sized parent rather than using a fixed minimum height. */
+    fill?: boolean;
 }
-declare function EmptyState({ icon: Icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+declare function EmptyState({ icon: Icon, title, description, eyebrow, action, secondaryAction, variant, compact, fill, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
 interface ErrorPageLink {
     label: string;
@@ -1500,6 +1526,20 @@ interface DataTableProps<TData> {
  */
 declare function DataTable<TData>({ columns, data, searchKey, searchPlaceholder, selectable, onSelectionChange, pageSize, toolbar, onRowClick, emptyMessage, className, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
+interface LoadMoreProps extends React.HTMLAttributes<HTMLDivElement> {
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    fetchNextPage: () => void | Promise<unknown>;
+    /** Watches the sentinel instead of showing a manual button. */
+    auto?: boolean;
+    /** Plural noun used by the manual button, for example `properties`. */
+    label?: string;
+    /** Starts loading before the sentinel reaches the viewport. */
+    rootMargin?: string;
+}
+/** Cursor-pagination footer with either guarded infinite scroll or a manual fallback. */
+declare function LoadMore({ hasNextPage, isFetchingNextPage, fetchNextPage, auto, label, rootMargin, className, ...props }: LoadMoreProps): react_jsx_runtime.JSX.Element | null;
+
 type ViewMode = 'cards' | 'list';
 interface UseViewModeReturn {
     view: ViewMode;
@@ -2060,7 +2100,11 @@ interface PostListProps {
     posts: PostCardProps[];
     renderLink?: AppShellRenderLink;
     emptyMessage?: string;
-    /** Max columns at the widest breakpoint. */
+    /**
+     * Max columns at the widest breakpoint. When omitted, one- and two-post
+     * collections are balanced automatically instead of leaving an empty third
+     * column.
+     */
     columns?: 2 | 3;
     className?: string;
 }
@@ -2148,4 +2192,4 @@ interface UsePaginationReturn {
 }
 declare function usePagination(total: number, pageSize: number): UsePaginationReturn;
 
-export { ActivityFeed, type ActivityFeedItem, type ActivityFeedProps, AnimatedPill, type AnimatedPillProps, AnimatedSwap, type AnimatedSwapEffect, type AnimatedSwapProps, type AnimatedSwapSpec, AppContent, type AppContentProps, AppFooter, type AppFooterProps, AppGrid, AppGridCell, type AppGridCellProps, type AppGridColumns, type AppGridProps, type AppNavItem, AppPageHero, type AppPageHeroProps, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellBreadcrumb, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, type BillingInvoice, BillingPanel, type BillingPanelProps, type BillingPaymentMethod, type BillingUsageMetric, BrandColorSwitchMinimal, Button, type ButtonProps, Card, type CardProps, Carousel, type CarouselProps, ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, ChangelogList, type ChangelogListProps, type ChangelogReleaseType, Chart, type ChartProps, type ChartSeries, Checkbox, type CheckboxProps, CommandMenu, type CommandMenuGroup, type CommandMenuItem, type CommandMenuProps, type ComparisonColumn, ComparisonSection, type ComparisonSectionProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, type ContactInfoItem, ContactSection, type ContactSectionProps, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, CountdownTimer, type CountdownTimerProps, CtaSection, type CtaSectionProps, DataTable, type DataTableProps, DataView, type DataViewProps, DevBanner, type DevBannerProps, Dock, type DockItem, type DockProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, FadeIn, type FadeInProps, FaqSection, type FaqSectionProps, FeatureCard, type FeatureCardProps, type FeatureMarqueeItem, type FeatureMarqueeRow, FeatureMarqueeSection, type FeatureMarqueeSectionProps, FeaturesSection, type FeaturesSectionProps, FileUpload, type FileUploadEntry, type FileUploadProps, FlowBracket, type FlowBracketProps, FlowConnector, type FlowConnectorProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, Grid, GridItem, type GridItemProps, type GridProps, type GroupedFeatureGroup, GroupedFeaturesSection, type GroupedFeaturesSectionProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LogoStrip, type LogoStripProps, type MarketingSectionSpacing, type MarketingSurface, MarketingSurfaceProvider, MediaCard, type MediaCardProps, ModeSwitchMinimal, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, type NotificationItem, NotificationToast, type NotificationToastProps, NotificationsPopover, type NotificationsPopoverProps, type NotifyAction, type NotifyOptions, OlwibaUIProvider, type OlwibaUIProviderProps, type OnboardingStep, OnboardingWizard, type OnboardingWizardProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PhoneFrame, type PhoneFrameProps, type PostAuthor, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, PublicPageFrame, type PublicPageFrameProps, type QualificationColumn, QualificationSection, type QualificationSectionProps, RegisterHotkeys, RootErrorFallback, Section, type SectionProps, SectionTitle, type SectionTitleProps, SettingsSection, type SettingsSectionProps, Sortable, type SortableProps, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, Stack, type StackProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, type StepGroup, type StepItem, StepsSection, type StepsSectionProps, Suspensed, Switch, type SwitchProps, type TeamMember, type TeamMemberRecord, TeamMembersPanel, type TeamMembersPanelProps, TeamSection, type TeamSectionProps, type TechStackItem, TechStackSection, type TechStackSectionProps, TestimonialCard, type TestimonialCardProps, TestimonialsSection, type TestimonialsSectionProps, Textarea, type TextareaProps, ThemeColorUpdater, ThemeSwitchMinimal, type UIMode, Underlay, type UnderlayProps, type UnderlayVariant, UpdateBanner, type UpdateBannerProps, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, type UseViewModeReturn, VersionBanner, type ViewMode, ViewToggle, type ViewToggleProps, cn, marketingSectionSpacing, notify, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMarketingSurface, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useSectionSurface, useUIMode, useViewMode };
+export { ActivityFeed, type ActivityFeedItem, type ActivityFeedProps, AnimatedPill, type AnimatedPillProps, AnimatedSwap, type AnimatedSwapEffect, type AnimatedSwapProps, type AnimatedSwapSpec, AppContent, type AppContentProps, AppFooter, type AppFooterProps, AppGrid, AppGridCell, type AppGridCellProps, type AppGridColumns, type AppGridProps, type AppNavItem, AppPageHero, type AppPageHeroProps, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellBreadcrumb, type AppShellHeaderControls, type AppShellHeaderStart, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, type BillingInvoice, BillingPanel, type BillingPanelProps, type BillingPaymentMethod, type BillingUsageMetric, BrandColorSwitchMinimal, Button, type ButtonProps, Card, type CardProps, Carousel, type CarouselProps, ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, ChangelogList, type ChangelogListProps, type ChangelogReleaseType, Chart, type ChartProps, type ChartSeries, Checkbox, type CheckboxProps, CommandMenu, type CommandMenuGroup, type CommandMenuItem, type CommandMenuProps, type ComparisonColumn, ComparisonSection, type ComparisonSectionProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, type ContactInfoItem, ContactSection, type ContactSectionProps, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, CountdownTimer, type CountdownTimerProps, CtaSection, type CtaSectionProps, DataTable, type DataTableProps, DataView, type DataViewProps, DevBanner, type DevBannerProps, Dock, type DockItem, type DockProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, FadeIn, type FadeInProps, FaqSection, type FaqSectionProps, FeatureCard, type FeatureCardProps, type FeatureMarqueeItem, type FeatureMarqueeRow, FeatureMarqueeSection, type FeatureMarqueeSectionProps, FeaturesSection, type FeaturesSectionProps, FileUpload, type FileUploadEntry, type FileUploadProps, FlowBracket, type FlowBracketProps, FlowConnector, type FlowConnectorProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, Grid, GridItem, type GridItemProps, type GridProps, type GroupedFeatureGroup, GroupedFeaturesSection, type GroupedFeaturesSectionProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LoadMore, type LoadMoreProps, LogoStrip, type LogoStripProps, type MarketingSectionSpacing, type MarketingSurface, MarketingSurfaceProvider, MediaCard, type MediaCardProps, ModeSwitchMinimal, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, type NotificationItem, NotificationToast, type NotificationToastProps, NotificationsPopover, type NotificationsPopoverProps, type NotifyAction, type NotifyOptions, OlwibaUIProvider, type OlwibaUIProviderProps, type OnboardingStep, OnboardingWizard, type OnboardingWizardProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PhoneFrame, type PhoneFrameProps, type PostAuthor, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, PublicPageFrame, type PublicPageFrameProps, type QualificationColumn, QualificationSection, type QualificationSectionProps, RegisterHotkeys, RootErrorFallback, Section, type SectionProps, SectionTitle, type SectionTitleProps, SettingsSection, type SettingsSectionProps, Sortable, type SortableProps, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, Stack, type StackProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, type StepGroup, type StepItem, StepsSection, type StepsSectionProps, Suspensed, Switch, type SwitchProps, type TeamMember, type TeamMemberRecord, TeamMembersPanel, type TeamMembersPanelProps, TeamSection, type TeamSectionProps, type TechStackItem, TechStackSection, type TechStackSectionProps, TestimonialCard, type TestimonialCardProps, TestimonialsSection, type TestimonialsSectionProps, Textarea, type TextareaProps, ThemeColorUpdater, ThemeSwitchMinimal, type UIMode, Underlay, type UnderlayProps, type UnderlayVariant, UpdateBanner, type UpdateBannerProps, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, type UseViewModeReturn, VersionBanner, type ViewMode, ViewToggle, type ViewToggleProps, cn, marketingSectionSpacing, notify, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMarketingSurface, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useSectionSurface, useUIMode, useViewMode };

package/dist/index.js

@@ -2,7 +2,7 @@ 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, 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, Popover, PopoverTrigger, PopoverContent, Spinner, 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';
+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, BirdIcon, MoreVerticalIcon, CreditCardIcon, BellIcon, SettingsIcon, LogOutIcon, ShieldCheck, Building2 } from 'lucide-react';
@@ -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,59 +390,83 @@ 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({
@@ -449,13 +476,19 @@ function ShellHeader({
   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 }),
+    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) => {
@@ -513,6 +546,9 @@ function AppShell({
   renderLink = defaultRenderLink,
   collapsible = "icon",
   sidebarPosition = "viewport",
+  sidebarContentKey,
+  sidebarContentClassName,
+  sidebarFooterStart,
   side = "left",
   contentClassName = "p-6",
   children
@@ -534,7 +570,10 @@ function AppShell({
             renderLink,
             collapsible,
             side,
-            sidebarPosition
+            sidebarPosition,
+            sidebarContentKey,
+            sidebarContentClassName,
+            sidebarFooterStart
           }
         ),
         /* @__PURE__ */ jsxs(SidebarInset, { className: "overflow-y-auto", children: [
@@ -667,7 +706,7 @@ function AppFooter({ start, end, children, className, ...props }) {
     {
       ...props,
       className: cn(
-        "border-t px-4 py-3 text-xs text-muted-foreground sm:px-6",
+        "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: [
@@ -1314,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
+          ] })
+        ] })
       ]
     }
   );
@@ -4126,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,
@@ -5455,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))
@@ -5684,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, 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, 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