@olwiba/ui 0.1.11 → 0.1.13

package/dist/index.d.ts

@@ -210,6 +210,7 @@ interface AppShellUser {
     plan?: string;
     onSignOut?: () => void;
     onBilling?: () => void;
+    onNotifications?: () => void;
 }
 interface AppShellBrand {
     name: ReactNode;
@@ -302,6 +303,12 @@ interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function EmptyState({ icon: Icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
+interface ErrorPageLink {
+    label: string;
+    href: string;
+    description?: string;
+    icon?: ReactNode;
+}
 interface ErrorPageProps {
     statusCode?: string;
     title?: string;
@@ -315,9 +322,11 @@ interface ErrorPageProps {
         href?: string;
         onClick?: () => void;
     };
+    /** Optional "maybe you were looking for" links rendered below the actions. */
+    links?: ErrorPageLink[];
     renderLink?: AppShellRenderLink;
 }
-declare function ErrorPage({ statusCode, title, description, action, backAction, renderLink, }: ErrorPageProps): react_jsx_runtime.JSX.Element;
+declare function ErrorPage({ statusCode, title, description, action, backAction, links, renderLink, }: ErrorPageProps): react_jsx_runtime.JSX.Element;
 
 interface UpgradeComparisonRow {
     key?: React.Key;
@@ -366,6 +375,12 @@ interface SectionTitleProps {
 }
 declare function SectionTitle({ title, description, badge, className }: SectionTitleProps): react_jsx_runtime.JSX.Element;
 
+declare const marketingSectionSpacing: {
+    readonly standard: "px-6 py-14 sm:px-10 sm:py-20";
+    readonly hero: "px-6 pb-14 pt-10 sm:px-10 sm:py-20";
+};
+type MarketingSectionSpacing = keyof typeof marketingSectionSpacing;
+
 interface HeroSectionProps {
     heading: string;
     badge?: string;
@@ -1064,6 +1079,10 @@ interface FlowBracketProps {
      * Defaults to 8 (near the top of the first child).
      */
     anchorTop?: number;
+    /** Per-side override for the top anchor of the left bracket. Falls back to anchorTop. */
+    anchorTopLeft?: number;
+    /** Per-side override for the top anchor of the right bracket. Falls back to anchorTop. */
+    anchorTopRight?: number;
     /**
      * Vertical anchor for the bottom connection as a percentage of the wrapper height (0–100).
      * Defaults to 92 (near the bottom of the last child).
@@ -1110,7 +1129,7 @@ interface FlowBracketProps {
  * they render at a consistent pixel size regardless of the bracket SVG's aspect
  * ratio (which spans the full section height with preserveAspectRatio="none").
  */
-declare function FlowBracket({ anchorTop, anchorBottom, extent, arrow, color, colorLeft, colorRight, left, right, animate, animateDur, reverseRight, style, className, children, }: FlowBracketProps): react_jsx_runtime.JSX.Element;
+declare function FlowBracket({ anchorTop, anchorTopLeft, anchorTopRight, anchorBottom, extent, arrow, color, colorLeft, colorRight, left, right, animate, animateDur, reverseRight, style, className, children, }: FlowBracketProps): react_jsx_runtime.JSX.Element;
 
 interface FullPageSpinnerProps {
     message?: string;
@@ -1192,6 +1211,11 @@ interface RootErrorFallbackProps {
 }
 declare function RootErrorFallback({ error, reset }: RootErrorFallbackProps): react_jsx_runtime.JSX.Element;
 
+interface PostAuthor {
+    name: string;
+    role?: string;
+    avatar?: string;
+}
 interface PostCardProps {
     title: string;
     description?: string;
@@ -1199,16 +1223,22 @@ interface PostCardProps {
     slug: string;
     image?: string;
     tags?: string[];
+    author?: PostAuthor;
+    hrefPrefix?: string;
+    tagHrefPrefix?: string;
     renderLink?: AppShellRenderLink;
 }
-declare function PostCard({ title, description, date, slug, image, tags, renderLink }: PostCardProps): react_jsx_runtime.JSX.Element;
+declare function PostCard({ title, description, date, slug, image, tags, author, hrefPrefix, tagHrefPrefix, renderLink, }: PostCardProps): react_jsx_runtime.JSX.Element;
 
 interface PostListProps {
     posts: PostCardProps[];
     renderLink?: AppShellRenderLink;
     emptyMessage?: string;
+    /** Max columns at the widest breakpoint. */
+    columns?: 2 | 3;
+    className?: string;
 }
-declare function PostList({ posts, renderLink, emptyMessage }: PostListProps): react_jsx_runtime.JSX.Element;
+declare function PostList({ posts, renderLink, emptyMessage, columns, className, }: PostListProps): react_jsx_runtime.JSX.Element;
 
 type ChangelogReleaseType = 'release' | 'fix' | 'enhancement';
 interface ChangelogHighlight {
@@ -1292,4 +1322,4 @@ interface UsePaginationReturn {
 }
 declare function usePagination(total: number, pageSize: number): UsePaginationReturn;
 
-export { AnimatedPill, type AnimatedPillProps, AppContent, type AppContentProps, AppGrid, AppGridCell, type AppGridCellProps, type AppGridProps, type AppNavItem, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, BrandColorSwitchMinimal, Button, type ButtonProps, Card, type CardProps, CarouselSection, type CarouselSectionProps, ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, ChangelogList, type ChangelogListProps, type ChangelogReleaseType, Checkbox, type CheckboxProps, 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, CtaCardSection, type CtaCardSectionProps, CtaSection, type CtaSectionProps, 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, 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, ModeSwitchMinimal, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, OlwibaUIProvider, type OlwibaUIProviderProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PhoneFrame, type PhoneFrameProps, 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, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, Stack, type StackProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, type StepItem, StepsSection, type StepsSectionProps, Suspensed, Switch, type SwitchProps, type TeamMember, 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, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, VersionBanner, cn, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { AnimatedPill, type AnimatedPillProps, AppContent, type AppContentProps, AppGrid, AppGridCell, type AppGridCellProps, type AppGridProps, type AppNavItem, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, BrandColorSwitchMinimal, Button, type ButtonProps, Card, type CardProps, CarouselSection, type CarouselSectionProps, ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, ChangelogList, type ChangelogListProps, type ChangelogReleaseType, Checkbox, type CheckboxProps, 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, CtaCardSection, type CtaCardSectionProps, CtaSection, type CtaSectionProps, 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, 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, ModeSwitchMinimal, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, OlwibaUIProvider, type OlwibaUIProviderProps, 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, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, Stack, type StackProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, type StepItem, StepsSection, type StepsSectionProps, Suspensed, Switch, type SwitchProps, type TeamMember, 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, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, VersionBanner, cn, marketingSectionSpacing, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };

package/dist/index.js

@@ -5,7 +5,7 @@ import { useRef, useEffect, useState } 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, 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, Spinner, Popover, PopoverTrigger, PopoverContent, SidebarProvider, SidebarInset, CardHeader, CardTitle, CardDescription, CardContent, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem, ContextMenuShortcut, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarFooter, SidebarTrigger, useSidebar, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from '@olwiba/cn';
 export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@olwiba/cn';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Compass, ArrowLeft, X, ArrowRight, ChevronLeft, ChevronRight, Sparkles, Rocket, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, MessageSquare, ChevronDown, Send, Menu, Search, TrendingUp, TrendingDown, Sun, Moon, Palette, AlertTriangle, Loader2, Layers, LayoutGrid, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
+import { ArrowLeft, ArrowUpRight, X, ArrowRight, ChevronLeft, ChevronRight, Sparkles, Rocket, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, MessageSquare, ChevronDown, Send, Menu, Search, TrendingUp, TrendingDown, Sun, Moon, Palette, AlertTriangle, Loader2, Layers, LayoutGrid, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
 
 var OlwibaUIContext = React29.createContext({
   isMobile: false,
@@ -294,15 +294,17 @@ function NavUser({ user }) {
               /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email })
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-            user.onBilling && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onBilling, children: [
-              /* @__PURE__ */ jsx(CreditCardIcon, {}),
-              "Billing"
-            ] }),
-            /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
-              /* @__PURE__ */ jsx(BellIcon, {}),
-              "Notifications"
+          (user.onBilling || user.onNotifications) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+              user.onBilling && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onBilling, children: [
+                /* @__PURE__ */ jsx(CreditCardIcon, {}),
+                "Billing"
+              ] }),
+              user.onNotifications && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onNotifications, children: [
+                /* @__PURE__ */ jsx(BellIcon, {}),
+                "Notifications"
+              ] })
             ] })
           ] }),
           user.onSignOut && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -498,7 +500,8 @@ function DefaultForm({
   const hasPrefill = !!(defaultEmail || defaultPassword);
   const prefillStyle = (active) => active ? { animation: "auth-prefill 1.6s ease-out 0.35s 1 both" } : void 0;
   return /* @__PURE__ */ jsxs(Card, { className: "w-full", children: [
-    hasPrefill && /* @__PURE__ */ jsx("style", { children: `@keyframes auth-prefill{0%{box-shadow:0 0 0 0 hsl(var(--primary)/0)}40%{box-shadow:0 0 0 3px hsl(var(--primary)/0.4)}100%{box-shadow:0 0 0 0 hsl(var(--primary)/0)}}` }),
+    hasPrefill && // Theme tokens hold full color values (oklch), so opacity must come from color-mix, not hsl(var()/a)
+    /* @__PURE__ */ jsx("style", { children: `@keyframes auth-prefill{0%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 45%,transparent),0 0 16px 2px color-mix(in oklab,var(--primary) 35%,transparent)}100%{box-shadow:0 0 0 0 transparent}}` }),
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       brand && /* @__PURE__ */ jsx("div", { className: "mb-2", children: brand }),
       /* @__PURE__ */ jsx(CardTitle, { children: isSignUp ? "Create an account" : "Sign in" }),
@@ -605,35 +608,90 @@ function ErrorPage({
   description = "The page you're looking for doesn't exist or has been moved. Check the URL or head back home.",
   action = { label: "Take me home", href: "/" },
   backAction = { label: "Go back" },
+  links,
   renderLink = defaultRenderLink3
 }) {
-  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-[560px] flex-col items-center justify-center px-6 py-16 text-center", children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,hsl(var(--muted)/0.8),transparent_70%)]" }),
-    /* @__PURE__ */ jsxs("div", { className: "relative space-y-6", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl border bg-muted", children: /* @__PURE__ */ jsx(Compass, { className: "size-8 text-muted-foreground" }) }) }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-8xl font-bold tracking-tight text-muted-foreground/20", children: statusCode }),
-        /* @__PURE__ */ jsx("h1", { className: "-mt-4 text-2xl font-semibold tracking-tight", children: title }),
-        /* @__PURE__ */ jsx("p", { className: "mx-auto max-w-sm text-sm text-muted-foreground", children: description })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
-        backAction && (backAction.href ? renderLink({
-          href: backAction.href,
-          children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
-            /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4" }),
-            backAction.label
+  const hasLinks = links && links.length > 0;
+  return /* @__PURE__ */ jsxs("section", { className: "relative overflow-hidden rounded-2xl border bg-card", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "absolute inset-0 bg-[radial-gradient(hsl(var(--border))_1px,transparent_1px)] [background-size:24px_24px] [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "absolute left-1/2 top-24 h-64 w-[36rem] max-w-full -translate-x-1/2 rounded-full bg-primary/10 blur-3xl"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn$1(
+          "relative mx-auto flex max-w-3xl flex-col items-center px-6 pt-20 text-center sm:pt-24",
+          hasLinks ? "pb-16" : "pb-24 sm:pb-28"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border bg-background/80 px-3 py-1 font-mono text-xs text-muted-foreground backdrop-blur", children: [
+            /* @__PURE__ */ jsxs("span", { className: "relative flex size-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" }),
+              /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-1.5 rounded-full bg-primary" })
+            ] }),
+            "HTTP ",
+            statusCode
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none -mb-8 mt-2 select-none bg-gradient-to-b from-foreground/15 via-foreground/[0.06] to-transparent bg-clip-text text-[9rem] font-black leading-none tracking-tighter text-transparent sm:-mb-12 sm:text-[13rem]",
+              children: statusCode
+            }
+          ),
+          /* @__PURE__ */ jsx("h1", { className: "text-balance text-2xl font-semibold tracking-tight sm:text-3xl", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mx-auto mt-3 max-w-md text-pretty text-sm leading-6 text-muted-foreground", children: description }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: [
+            backAction && (backAction.href ? renderLink({
+              href: backAction.href,
+              children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
+                /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4" }),
+                backAction.label
+              ] })
+            }) : /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: backAction.onClick, children: [
+              /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4" }),
+              backAction.label
+            ] })),
+            action && renderLink({
+              href: action.href,
+              children: /* @__PURE__ */ jsx(Button, { children: action.label })
+            })
+          ] }),
+          hasLinks && /* @__PURE__ */ jsxs("div", { className: "mt-14 w-full", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Maybe you were looking for" }),
+            /* @__PURE__ */ jsx("div", { className: "mt-4 grid gap-3 text-left sm:grid-cols-2 lg:grid-cols-3", children: links.map(
+              (link) => renderLink({
+                href: link.href,
+                className: "group flex items-start gap-3 rounded-xl border bg-background/60 p-4 backdrop-blur transition-colors hover:border-primary/40 hover:bg-accent",
+                children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  link.icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border bg-muted text-muted-foreground", children: link.icon }),
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 grow", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-sm font-medium", children: [
+                      link.label,
+                      /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3.5 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-foreground" })
+                    ] }),
+                    link.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs leading-5 text-muted-foreground", children: link.description })
+                  ] })
+                ] })
+              })
+            ) })
           ] })
-        }) : /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: backAction.onClick, children: [
-          /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4" }),
-          backAction.label
-        ] })),
-        action && renderLink({
-          href: action.href,
-          children: /* @__PURE__ */ jsx(Button, { children: action.label })
-        })
-      ] })
-    ] })
-  ] }) });
+        ]
+      }
+    )
+  ] });
 }
 function UpgradePrompt({
   variant,
@@ -816,6 +874,12 @@ function SectionTitle({ title, description, badge, className }) {
     description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-2xl text-pretty text-muted-foreground", children: description })
   ] }) });
 }
+
+// src/marketing/section-spacing.ts
+var marketingSectionSpacing = {
+  standard: "px-6 py-14 sm:px-10 sm:py-20",
+  hero: "px-6 pb-14 pt-10 sm:px-10 sm:py-20"
+};
 var sizes = {
   sm: { outer: "w-44", height: "h-80", notch: "w-16 h-4", border: "rounded-[2rem]", screen: "rounded-[1.75rem]" },
   md: { outer: "w-56", height: "h-[26rem]", notch: "w-20 h-5", border: "rounded-[2.5rem]", screen: "rounded-[2.25rem]" },
@@ -878,7 +942,7 @@ function HeroSection({
   socialProofText,
   renderLink = defaultRenderLink4
 }) {
-  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: [
+  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: marketingSectionSpacing.hero, children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2 lg:gap-16", children: [
       /* @__PURE__ */ jsx(FadeIn, { direction: "left", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
         badge && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: badge }) }),
@@ -2352,27 +2416,19 @@ function Navbar({
       })
     ] }),
     /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", className: "justify-self-end md:hidden", children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", className: "col-start-3 justify-self-end md:hidden", children: [
         /* @__PURE__ */ jsx(Menu, { className: "size-5" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open menu" })
       ] }) }),
-      /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-72", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-4", children: [
-          /* @__PURE__ */ jsx("span", { onClick: () => setOpen(false), className: "cursor-pointer", children: renderLink({
-            href: brandHref,
-            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 font-semibold", children: [
-              brand.logo,
-              /* @__PURE__ */ jsx("span", { children: brand.name })
-            ] })
-          }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            controls?.map((control, i) => /* @__PURE__ */ jsx(React29.Fragment, { children: control }, i)),
-            /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", onClick: () => setOpen(false), children: [
-              /* @__PURE__ */ jsx(X, { className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close menu" })
-            ] })
+      /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-72", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center pb-4", children: /* @__PURE__ */ jsx("span", { onClick: () => setOpen(false), className: "cursor-pointer", children: renderLink({
+          href: brandHref,
+          children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 font-semibold", children: [
+            brand.logo,
+            /* @__PURE__ */ jsx("span", { children: brand.name })
           ] })
-        ] }),
+        }) }) }),
+        controls?.length ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex w-full items-center justify-between gap-1", children: controls.map((control, i) => /* @__PURE__ */ jsx(React29.Fragment, { children: control }, i)) }) : null,
         /* @__PURE__ */ jsx(Separator, {}),
         /* @__PURE__ */ jsx("nav", { className: "mt-4 flex flex-col gap-1", children: navLinks.map((link) => /* @__PURE__ */ jsx("span", { onClick: () => setOpen(false), children: renderLink({
           href: link.href,
@@ -3100,6 +3156,8 @@ function FlowConnector({
 }
 function FlowBracket({
   anchorTop = 8,
+  anchorTopLeft,
+  anchorTopRight,
   anchorBottom = 92,
   extent = 22,
   arrow = true,
@@ -3119,30 +3177,32 @@ function FlowBracket({
   const R = 1e3 + extent;
   const cl = colorLeft ?? color;
   const cr = colorRight ?? color;
-  const leftD = `M 0,${anchorBottom} L ${L},${anchorBottom} L ${L},${anchorTop} L 0,${anchorTop}`;
-  const rightD = reverseRight ? `M 1000,${anchorTop} L ${R},${anchorTop} L ${R},${anchorBottom} L 1000,${anchorBottom}` : `M 1000,${anchorBottom} L ${R},${anchorBottom} L ${R},${anchorTop} L 1000,${anchorTop}`;
+  const aTL = anchorTopLeft ?? anchorTop;
+  const aTR = anchorTopRight ?? anchorTop;
+  const leftD = `M 0,${anchorBottom} L ${L},${anchorBottom} L ${L},${aTL} L 0,${aTL}`;
+  const rightD = reverseRight ? `M 1000,${aTR} L ${R},${aTR} L ${R},${anchorBottom} L 1000,${anchorBottom}` : `M 1000,${anchorBottom} L ${R},${anchorBottom} L ${R},${aTR} L 1000,${aTR}`;
   const ep = `${(extent / 10).toFixed(1)}%`;
   const dotKeyframes = animate ? `
 @keyframes fb-dl{
   0%{top:${anchorBottom}%;left:0;opacity:0}
   6%{opacity:1}
   20%{top:${anchorBottom}%;left:-${ep}}
-  80%{top:${anchorTop}%;left:-${ep};opacity:1}
-  94%{top:${anchorTop}%;left:0;opacity:0}
-  100%{top:${anchorTop}%;left:0;opacity:0}
+  80%{top:${aTL}%;left:-${ep};opacity:1}
+  94%{top:${aTL}%;left:0;opacity:0}
+  100%{top:${aTL}%;left:0;opacity:0}
 }
 @keyframes fb-dr{
   0%{top:${anchorBottom}%;left:100%;opacity:0}
   6%{opacity:1}
   20%{top:${anchorBottom}%;left:calc(100% + ${ep})}
-  80%{top:${anchorTop}%;left:calc(100% + ${ep});opacity:1}
-  94%{top:${anchorTop}%;left:100%;opacity:0}
-  100%{top:${anchorTop}%;left:100%;opacity:0}
+  80%{top:${aTR}%;left:calc(100% + ${ep});opacity:1}
+  94%{top:${aTR}%;left:100%;opacity:0}
+  100%{top:${aTR}%;left:100%;opacity:0}
 }
 @keyframes fb-drr{
-  0%{top:${anchorTop}%;left:100%;opacity:0}
+  0%{top:${aTR}%;left:100%;opacity:0}
   6%{opacity:1}
-  20%{top:${anchorTop}%;left:calc(100% + ${ep})}
+  20%{top:${aTR}%;left:calc(100% + ${ep})}
   80%{top:${anchorBottom}%;left:calc(100% + ${ep});opacity:1}
   94%{top:${anchorBottom}%;left:100%;opacity:0}
   100%{top:${anchorBottom}%;left:100%;opacity:0}
@@ -3211,7 +3271,7 @@ function FlowBracket({
       {
         "aria-hidden": true,
         viewBox: "0 0 10 8",
-        style: { ...arrowBase, top: `${anchorTop}%`, left: 0 },
+        style: { ...arrowBase, top: `${aTL}%`, left: 0 },
         children: /* @__PURE__ */ jsx("polyline", { points: "1,1 8,4 1,7", style: { stroke: cl }, ...chevronProps })
       }
     ),
@@ -3222,7 +3282,7 @@ function FlowBracket({
         viewBox: "0 0 10 8",
         style: {
           ...arrowBase,
-          top: reverseRight ? `${anchorBottom}%` : `${anchorTop}%`,
+          top: reverseRight ? `${anchorBottom}%` : `${aTR}%`,
           left: "100%"
         },
         children: /* @__PURE__ */ jsx("polyline", { points: "9,1 2,4 9,7", style: { stroke: cr }, ...chevronProps })
@@ -3460,7 +3520,7 @@ function BrandColorSwitchMinimal() {
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: "absolute -bottom-0.5 -right-0.5 size-1.5 rounded-full ring-1 ring-background",
+              className: `absolute -bottom-0.5 -right-0.5 size-1.5 rounded-full ring-1 ring-background${active === "zinc" ? " dark:ring-white/25" : ""}`,
               style: { background: activeHex }
             }
           )
@@ -3480,7 +3540,7 @@ function BrandColorSwitchMinimal() {
             /* @__PURE__ */ jsx(
               "span",
               {
-                className: "flex size-7 items-center justify-center rounded-full ring-offset-background transition-all group-hover:scale-110",
+                className: `flex size-7 items-center justify-center rounded-full ring-offset-background transition-all group-hover:scale-110${color.name === "zinc" ? " border border-transparent dark:border-white/25" : ""}`,
                 style: {
                   background: PREVIEW_HEX[color.name],
                   boxShadow: active === color.name ? `0 0 0 2px var(--background), 0 0 0 4px ${PREVIEW_HEX[color.name]}` : void 0
@@ -3576,35 +3636,111 @@ function RootErrorFallback({ error, reset }) {
 function formatDate(dateStr) {
   return new Date(dateStr).toLocaleDateString("en-US", {
     year: "numeric",
-    month: "long",
+    month: "short",
     day: "numeric"
   });
 }
-function PostCard({ title, description, date, slug, image, tags, renderLink }) {
-  const href = `/blog/${slug}`;
-  const LinkWrapper = ({ children, className }) => renderLink ? renderLink({ href, children, className }) : /* @__PURE__ */ jsx("a", { href, className, children });
-  return /* @__PURE__ */ jsxs("article", { className: "group flex flex-col gap-3", children: [
-    image && /* @__PURE__ */ jsx(LinkWrapper, { className: "block overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: image,
-        alt: title,
-        className: "aspect-video w-full object-cover transition-transform duration-300 group-hover:scale-105"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      tags && tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: tags.map((tag) => /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "text-xs", children: tag }, tag)) }),
-      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold leading-snug tracking-tight", children: /* @__PURE__ */ jsx(LinkWrapper, { className: "hover:text-primary transition-colors", children: title }) }),
-      description && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: description }),
-      /* @__PURE__ */ jsx("time", { dateTime: date, className: "text-xs text-muted-foreground", children: formatDate(date) })
+function PostCard({
+  title,
+  description,
+  date,
+  slug,
+  image,
+  tags,
+  author,
+  hrefPrefix = "/blog",
+  tagHrefPrefix = "/blog/tag",
+  renderLink
+}) {
+  const href = `${hrefPrefix}/${slug}`;
+  const LinkWrapper = ({
+    href: linkHref,
+    children,
+    className
+  }) => renderLink ? renderLink({ href: linkHref, children, className }) : /* @__PURE__ */ jsx("a", { href: linkHref, className, children });
+  return /* @__PURE__ */ jsxs("article", { className: "group relative flex flex-col items-start", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden rounded-2xl bg-muted", children: [
+      image ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: image,
+          alt: title,
+          className: "aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "aspect-video w-full bg-gradient-to-br from-primary/15 via-muted to-muted"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-inset ring-foreground/10" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full grow flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-wrap items-center gap-x-3 gap-y-2 text-xs", children: [
+        /* @__PURE__ */ jsx("time", { dateTime: date, className: "text-muted-foreground", children: formatDate(date) }),
+        tags?.map((tag) => /* @__PURE__ */ jsx(
+          LinkWrapper,
+          {
+            href: `${tagHrefPrefix}/${encodeURIComponent(tag)}`,
+            className: "relative z-10 rounded-full bg-muted px-3 py-1.5 font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+            children: tag
+          },
+          tag
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grow", children: [
+        /* @__PURE__ */ jsx("h2", { className: "mt-3 text-lg font-semibold leading-snug tracking-tight transition-colors group-hover:text-primary", children: /* @__PURE__ */ jsxs(LinkWrapper, { href, children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-0", "aria-hidden": true }),
+          title
+        ] }) }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-3 line-clamp-3 text-sm leading-6 text-muted-foreground", children: description })
+      ] }),
+      author && /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center gap-x-3", children: [
+        author.avatar ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: author.avatar,
+            alt: author.name,
+            className: "size-9 rounded-full bg-muted object-cover"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "flex size-9 items-center justify-center rounded-full bg-muted text-sm font-semibold text-muted-foreground",
+            children: author.name.charAt(0).toUpperCase()
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "text-sm leading-tight", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold", children: author.name }),
+          author.role && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: author.role })
+        ] })
+      ] })
     ] })
   ] });
 }
-function PostList({ posts, renderLink, emptyMessage = "No posts published yet." }) {
+function PostList({
+  posts,
+  renderLink,
+  emptyMessage = "No posts published yet.",
+  columns = 3,
+  className
+}) {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground italic", children: emptyMessage });
   }
-  return /* @__PURE__ */ jsx("div", { className: "grid gap-8 sm:grid-cols-2", children: posts.map((post) => /* @__PURE__ */ jsx(PostCard, { ...post, renderLink }, post.slug)) });
+  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",
+        className
+      ),
+      children: posts.map((post) => /* @__PURE__ */ jsx(PostCard, { ...post, renderLink }, post.slug))
+    }
+  );
 }
 var releaseTypeLabel = {
   release: "Major Release",
@@ -3831,6 +3967,6 @@ function usePagination(total, pageSize) {
   return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
 }
 
-export { AnimatedPill, AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, BrandColorSwitchMinimal, Button, Card, CarouselSection, ChangelogCard, ChangelogList, Checkbox, ComparisonSection, ConfirmDialog, ContactSection, ContextMenu, CountUp, CountdownTimer, CtaCardSection, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeatureMarqueeSection, FeaturesSection, FlowBracket, FlowConnector, Footer, FullPageSpinner, GlassCard, Grid, GridItem, GroupedFeaturesSection, HeroSection, ImageCard, Input, LogoStrip, ModeSwitchMinimal, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, QualificationSection, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, StepsSection, Suspensed, Switch, TeamSection, TechStackSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { AnimatedPill, AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, BrandColorSwitchMinimal, Button, Card, CarouselSection, ChangelogCard, ChangelogList, Checkbox, ComparisonSection, ConfirmDialog, ContactSection, ContextMenu, CountUp, CountdownTimer, CtaCardSection, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeatureMarqueeSection, FeaturesSection, FlowBracket, FlowConnector, Footer, FullPageSpinner, GlassCard, Grid, GridItem, GroupedFeaturesSection, HeroSection, ImageCard, Input, LogoStrip, ModeSwitchMinimal, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, QualificationSection, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, StepsSection, Suspensed, Switch, TeamSection, TechStackSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, marketingSectionSpacing, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map