@olwiba/ui 0.2.21 → 0.2.23

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { ClassValue } from 'clsx';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, HTMLAttributes } from 'react';
 import { ButtonProps as ButtonProps$1, CardProps as CardProps$1, BadgeProps as BadgeProps$1, InputProps as InputProps$1, TextareaProps as TextareaProps$1, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1 } from '@olwiba/cn';
 export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Enchanted, EnchantedProps } from '@olwiba/cn';
 import { LucideIcon } from 'lucide-react';
@@ -247,18 +247,43 @@ type AppShellRenderLink = (props: {
     children: ReactNode;
     className?: string;
 }) => ReactNode;
+/**
+ * One step in the header location trail. A bare string is a plain label; give
+ * it an `href` to make it walkable. The final crumb is the current route and is
+ * never rendered as a link.
+ */
+type AppShellBreadcrumb = string | {
+    label: string;
+    href?: string;
+};
 interface AppShellProps {
     brand?: AppShellBrand;
     navItems?: AppNavItem[];
     /** Primary CTA rendered above nav (e.g. "New project", "Quick create") */
     action?: AppShellAction;
     user?: AppShellUser;
-    /** Text shown in the top header bar */
+    /**
+     * Location context shown in the top header bar. This is app chrome, not the
+     * page address — the page (or its page pattern) owns the `<h1>`. Repeating
+     * the page title here prints the same words twice on every route.
+     */
     pageTitle?: string;
+    /**
+     * Where the current route sits in the app, e.g.
+     * `[{ label: "Admin", href: "/admin" }, "Users"]`. Rendered as a muted trail
+     * 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 end of the top header bar. */
     headerEnd?: ReactNode;
+    /**
+     * App chrome rendered after the page outlet — normally an `AppFooter`. This
+     * belongs to the shell, not to a page pattern: otherwise every route
+     * re-declares it and height-filling pages fight it for the remaining space.
+     */
+    footer?: ReactNode;
     /** Override link rendering for SPA navigation. Defaults to a native <a>. */
     renderLink?: AppShellRenderLink;
     children?: ReactNode;
@@ -287,7 +312,7 @@ interface AppShellProps {
      */
     contentClassName?: string;
 }
-declare function AppShell({ brand, navItems, action, user, pageTitle, 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, side, contentClassName, children, }?: AppShellProps): react_jsx_runtime.JSX.Element;
 
 interface AppPageHeroProps {
     eyebrow?: ReactNode;
@@ -297,6 +322,15 @@ interface AppPageHeroProps {
     action?: ReactNode;
     children?: ReactNode;
     compact?: boolean;
+    /**
+     * How the address is drawn.
+     * - `"card"` (default) — a bordered surface that introduces the route.
+     * - `"plain"` — type only. Use when the page content is itself made of
+     *   surfaces: a second card at the top competes with them instead of
+     *   introducing them, and pushes the region that actually does something
+     *   further down the page.
+     */
+    surface?: 'card' | 'plain';
     className?: string;
 }
 /**
@@ -305,7 +339,25 @@ interface AppPageHeroProps {
  * Use this when a route needs more visual weight than a simple `PageHeader`,
  * but still keep product-specific stats, actions, and copy in the consumer.
  */
-declare function AppPageHero({ eyebrow, title, description, icon: Icon, action, children, compact, className, }: AppPageHeroProps): react_jsx_runtime.JSX.Element;
+declare function AppPageHero({ eyebrow, title, description, icon: Icon, action, children, compact, surface, className, }: AppPageHeroProps): react_jsx_runtime.JSX.Element;
+
+interface AppFooterProps extends HTMLAttributes<HTMLElement> {
+    /** Leading content — a product line, build info, a rotating message. */
+    start?: ReactNode;
+    /** Trailing content — a status pill, version, or a short link row. */
+    end?: ReactNode;
+}
+/**
+ * Quiet utility row for signed-in chrome.
+ *
+ * Pass it to `AppShell`'s `footer` slot: it is app chrome, so it lives beside
+ * 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.
+ */
+declare function AppFooter({ start, end, children, className, ...props }: AppFooterProps): react_jsx_runtime.JSX.Element;
 
 interface AuthFormProps {
     /**
@@ -2096,4 +2148,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, AppGrid, AppGridCell, type AppGridCellProps, type AppGridColumns, type AppGridProps, type AppNavItem, AppPageHero, type AppPageHeroProps, AppScreen, AppShell, type AppShellAction, type AppShellBrand, 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 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 };

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, 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';
 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';
@@ -306,7 +306,7 @@ function NavUser({ user }) {
               BirdIcon,
               {
                 "aria-hidden": true,
-                className: "size-4 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
+                className: "size-5 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
               }
             ) })
           ] }),
@@ -333,7 +333,7 @@ function NavUser({ user }) {
                 BirdIcon,
                 {
                   "aria-hidden": true,
-                  className: "size-4 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
+                  className: "size-5 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
                 }
               ) })
             ] }),
@@ -444,14 +444,50 @@ function ShellSidebar({
 }
 function ShellHeader({
   pageTitle,
+  breadcrumbs,
   headerStart,
-  headerEnd
+  headerEnd,
+  renderLink
 }) {
+  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 }),
+    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,7 +505,9 @@ function AppShell({
   navItems = [],
   action,
   user = defaultUser,
-  pageTitle = "Dashboard",
+  pageTitle,
+  breadcrumbs,
+  footer,
   headerStart,
   headerEnd,
   renderLink = defaultRenderLink,
@@ -500,8 +538,18 @@ function AppShell({
           }
         ),
         /* @__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 +567,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 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) {
@@ -1502,13 +1617,13 @@ function UpdateBanner({
         Card$1,
         {
           className: cn$1(
-            "max-w-3xl border-amber-300/60 bg-amber-50 dark:border-amber-700/60 dark:bg-amber-950",
+            "max-w-3xl border-border bg-card text-card-foreground shadow-lg",
             className
           ),
           children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-6 p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx(Sparkles, { className: "size-5 shrink-0 text-amber-600 dark:text-amber-400", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-amber-800 dark:text-amber-200", children: message })
+              /* @__PURE__ */ jsx(Sparkles, { className: "size-5 shrink-0 text-primary", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-card-foreground", children: message })
             ] }),
             /* @__PURE__ */ jsx(
               Button$1,
@@ -1516,7 +1631,7 @@ function UpdateBanner({
                 onClick: handleRefresh,
                 disabled: refreshing,
                 size: "sm",
-                className: "shrink-0 bg-amber-600 text-white hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700",
+                className: "shrink-0",
                 children: refreshing ? /* @__PURE__ */ jsx(RefreshCw, { className: "size-4 animate-spin" }) : buttonLabel
               }
             )
@@ -5569,6 +5684,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, 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