@olwiba/ui 0.2.19 → 0.2.21

package/dist/index.js

@@ -1,11 +1,11 @@
 import { cn } from './chunk-AMWLSHD6.js';
 export { MdxContent, cn } from './chunk-AMWLSHD6.js';
-import * as React20 from 'react';
+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';
 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, MoreVerticalIcon, CreditCardIcon, BellIcon, 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, ShieldCheck, Building2, BirdIcon, MoreVerticalIcon, CreditCardIcon, BellIcon, SettingsIcon, LogOutIcon } 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';
@@ -13,26 +13,27 @@ import { CSS } from '@dnd-kit/utilities';
 import { PieChart, Pie, Cell, BarChart, XAxis, YAxis, Bar, AreaChart, Area, LineChart, Line, ResponsiveContainer, Tooltip as Tooltip$1, CartesianGrid } from 'recharts';
 import { toast } from 'sonner';
 
-var OlwibaUIContext = React20.createContext({
+var OlwibaUIContext = React21.createContext({
   isMobile: false,
   mode: "default",
   setMode: () => {
   }
 });
-function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode = "default" }) {
+function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: modeProp }) {
   const detectedMobile = useIsMobile();
   const isMobile = isMobileProp ?? detectedMobile;
-  const [mode, setMode] = React20.useState(initialMode);
+  const [uncontrolledMode, setMode] = React21.useState("default");
+  const mode = modeProp ?? uncontrolledMode;
   const variant = mode !== "default" ? mode : void 0;
   return /* @__PURE__ */ jsx(OlwibaUIContext.Provider, { value: { isMobile, mode, setMode }, children: /* @__PURE__ */ jsx(UIVariantProvider, { mode: variant, children }) });
 }
 function useOlwibaUI() {
-  return React20.useContext(OlwibaUIContext);
+  return React21.useContext(OlwibaUIContext);
 }
 function useUIMode() {
-  return React20.useContext(OlwibaUIContext).mode;
+  return React21.useContext(OlwibaUIContext).mode;
 }
-var Button = React20.forwardRef(
+var Button = React21.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -40,7 +41,7 @@ var Button = React20.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Card = React20.forwardRef(
+var Card = React21.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -51,7 +52,7 @@ Card.displayName = "Card";
 function Badge(props) {
   return /* @__PURE__ */ jsx(Badge$1, { ...props });
 }
-var Input = React20.forwardRef(
+var Input = React21.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -59,7 +60,7 @@ var Input = React20.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Textarea = React20.forwardRef(
+var Textarea = React21.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -67,13 +68,13 @@ var Textarea = React20.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Checkbox = React20.forwardRef(({ mode, ...props }, ref) => {
+var Checkbox = React21.forwardRef(({ mode, ...props }, ref) => {
   const ctxMode = useUIMode();
   const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
   return /* @__PURE__ */ jsx(Checkbox$1, { mode: resolvedMode, ...props, ref });
 });
 Checkbox.displayName = "Checkbox";
-var Switch = React20.forwardRef(({ mode: _mode, ...props }, ref) => {
+var Switch = React21.forwardRef(({ mode: _mode, ...props }, ref) => {
   return /* @__PURE__ */ jsx(Switch$1, { ...props, ref });
 });
 Switch.displayName = "Switch";
@@ -262,20 +263,23 @@ function PublicPageFrame({
   return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen", surfaceMap[surface], className), ...props, children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", spacingMap2[spacing], maxWidthMap2[maxWidth]), children }) });
 }
 var RAIL_SQUARE = "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!min-w-8 group-data-[collapsible=icon]:!max-w-8 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:transition-[width,height]";
-function initialsOf(source) {
-  const base = source.includes("@") ? source.split("@")[0] ?? source : source;
-  const words = base.split(/[\s._-]+/).filter(Boolean);
-  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
-  return (words[0] ?? base).slice(0, 2).toUpperCase();
-}
 function identityGradient(seed) {
-  let hash = 0;
+  let hash = 2166136261;
   for (let i = 0; i < seed.length; i += 1) {
-    hash = hash * 31 + seed.charCodeAt(i) | 0;
+    hash ^= seed.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
   }
-  const hue = Math.abs(hash) % 360;
+  hash >>>= 0;
+  const firstHue = hash % 360;
+  const secondHue = (firstHue + 55 + (hash >>> 8) % 70) % 360;
+  const thirdHue = (firstHue + 190 + (hash >>> 16) % 110) % 360;
+  const angleHash = Math.imul(hash ^ hash >>> 15, 2246822519) >>> 0;
+  const angle = angleHash % 360;
   return {
-    backgroundImage: `linear-gradient(135deg, oklch(0.62 0.15 ${hue}), oklch(0.52 0.16 ${(hue + 28) % 360}))`,
+    backgroundImage: [
+      `radial-gradient(circle at 28% 18%, oklch(0.94 0.06 ${thirdHue} / 0.78), transparent 34%)`,
+      `linear-gradient(${angle}deg, oklch(0.68 0.18 ${firstHue}), oklch(0.55 0.2 ${secondHue}) 52%, oklch(0.62 0.18 ${thirdHue}))`
+    ].join(", "),
     color: "oklch(0.98 0 0)"
   };
 }
@@ -283,8 +287,8 @@ function NavUser({ user }) {
   const { isMobile } = useSidebar();
   const uiMode = useUIMode();
   const avatarMode = uiMode !== "default" ? uiMode : void 0;
-  const initials = initialsOf(user.name ?? user.email);
-  const identityTint = identityGradient(user.email);
+  const identitySeed = `${user.name?.trim().toLocaleLowerCase() ?? ""}|${user.email.toLocaleLowerCase()}`;
+  const identityTint = identityGradient(identitySeed);
   return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       SidebarMenuButton,
@@ -298,7 +302,13 @@ 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: "font-medium", style: identityTint, children: initials })
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: /* @__PURE__ */ jsx(
+              BirdIcon,
+              {
+                "aria-hidden": true,
+                className: "size-4 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
+              }
+            ) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
             /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: user.name ?? user.email }),
@@ -319,14 +329,20 @@ 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: "font-medium", style: identityTint, children: initials })
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: /* @__PURE__ */ jsx(
+                BirdIcon,
+                {
+                  "aria-hidden": true,
+                  className: "size-4 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
+                }
+              ) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
               /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: user.name ?? user.email }),
               /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email })
             ] })
           ] }) }),
-          (user.onBilling || user.onNotifications) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (user.onBilling || user.onNotifications || user.onSettings) && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
             /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
               user.onBilling && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onBilling, children: [
@@ -336,6 +352,10 @@ function NavUser({ user }) {
               user.onNotifications && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onNotifications, children: [
                 /* @__PURE__ */ jsx(BellIcon, {}),
                 "Notifications"
+              ] }),
+              user.onSettings && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onSettings, children: [
+                /* @__PURE__ */ jsx(SettingsIcon, {}),
+                "Settings"
               ] })
             ] })
           ] }),
@@ -479,7 +499,7 @@ function AppShell({
             sidebarPosition
           }
         ),
-        /* @__PURE__ */ jsxs(SidebarInset, { className: isContained ? void 0 : "overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs(SidebarInset, { className: "overflow-y-auto", children: [
           /* @__PURE__ */ jsx(ShellHeader, { pageTitle, headerStart, headerEnd }),
           /* @__PURE__ */ jsx("div", { className: contentClassName, children })
         ] })
@@ -506,8 +526,14 @@ function AppPageHero({
     {
       className: cn(
         "relative overflow-hidden rounded-3xl border bg-card/80 p-5 shadow-sm sm:p-6",
-        "before:absolute before:-right-16 before:-top-16 before:size-44 before:rounded-full before:bg-primary/15 before:blur-3xl",
-        "after:absolute after:-bottom-20 after:left-10 after:size-52 after:rounded-full after:bg-primary/10 after:blur-3xl",
+        // 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",
         className
       ),
       children: [
@@ -626,7 +652,7 @@ function DefaultForm({
   const isForgotPassword = mode === "forgot-password";
   const isResetPassword = mode === "reset-password";
   const isVerify = mode === "verify";
-  const [code, setCode] = React20.useState("");
+  const [code, setCode] = React21.useState("");
   const hasPrefill = !!(defaultEmail || defaultPassword);
   const prefillStyle = (active) => active ? { animation: "auth-prefill 1.6s ease-out 0.35s 1 both" } : void 0;
   const copy = authCopy[mode];
@@ -787,10 +813,10 @@ function DataTable({
   emptyMessage = "No results.",
   className
 }) {
-  const [sorting, setSorting] = React20.useState([]);
-  const [rowSelection, setRowSelection] = React20.useState({});
-  const [globalFilter, setGlobalFilter] = React20.useState("");
-  const allColumns = React20.useMemo(
+  const [sorting, setSorting] = React21.useState([]);
+  const [rowSelection, setRowSelection] = React21.useState({});
+  const [globalFilter, setGlobalFilter] = React21.useState("");
+  const allColumns = React21.useMemo(
     () => selectable ? [selectColumn, ...columns] : columns,
     [selectable, columns]
   );
@@ -812,7 +838,7 @@ function DataTable({
     initialState: pageSize > 0 ? { pagination: { pageSize } } : void 0,
     enableRowSelection: selectable
   });
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!onSelectionChange) return;
     onSelectionChange(table.getSelectedRowModel().rows.map((r) => r.original));
   }, [rowSelection]);
@@ -892,8 +918,8 @@ function DataTable({
   ] });
 }
 function InviteDialog({ roles, onInvite, onClose }) {
-  const [email, setEmail] = React20.useState("");
-  const [role, setRole] = React20.useState(roles[roles.length - 1] ?? roles[0]);
+  const [email, setEmail] = React21.useState("");
+  const [role, setRole] = React21.useState(roles[roles.length - 1] ?? roles[0]);
   return /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(
     "form",
     {
@@ -937,8 +963,8 @@ function TeamMembersPanel({
   title = "Team members",
   description = "Manage who has access to this workspace."
 }) {
-  const [inviteOpen, setInviteOpen] = React20.useState(false);
-  const columns = React20.useMemo(() => [
+  const [inviteOpen, setInviteOpen] = React21.useState(false);
+  const columns = React21.useMemo(() => [
     {
       accessorKey: "name",
       header: "Name",
@@ -1007,7 +1033,7 @@ function BillingPanel({
   onUpdatePaymentMethod,
   className
 }) {
-  const invoiceColumns = React20.useMemo(() => [
+  const invoiceColumns = React21.useMemo(() => [
     { accessorKey: "date", header: "Date", enableSorting: false },
     { accessorKey: "amount", header: "Amount", enableSorting: false },
     {
@@ -1086,9 +1112,9 @@ function OnboardingWizard({
   completeLabel = "Finish",
   className
 }) {
-  const [internalStep, setInternalStep] = React20.useState(0);
-  const [error, setError] = React20.useState(null);
-  const [pending, setPending] = React20.useState(false);
+  const [internalStep, setInternalStep] = React21.useState(0);
+  const [error, setError] = React21.useState(null);
+  const [pending, setPending] = React21.useState(false);
   const index = stepProp ?? internalStep;
   const current = steps[index];
   const isLast = index === steps.length - 1;
@@ -1418,10 +1444,10 @@ function UpdateBanner({
   buttonLabel = "Refresh now",
   className
 }) {
-  const [show, setShow] = React20.useState(forceShow);
-  const [entered, setEntered] = React20.useState(false);
-  const [refreshing, setRefreshing] = React20.useState(false);
-  React20.useEffect(() => {
+  const [show, setShow] = React21.useState(forceShow);
+  const [entered, setEntered] = React21.useState(false);
+  const [refreshing, setRefreshing] = React21.useState(false);
+  React21.useEffect(() => {
     if (forceShow) {
       setShow(true);
       return;
@@ -1444,7 +1470,7 @@ function UpdateBanner({
       clearInterval(id);
     };
   }, [currentVersion, fetchVersion, forceShow, intervalMs]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!show) {
       setEntered(false);
       return;
@@ -1517,9 +1543,9 @@ function FadeIn({
   style,
   ...props
 }) {
-  const ref = React20.useRef(null);
-  const [visible, setVisible] = React20.useState(false);
-  React20.useEffect(() => {
+  const ref = React21.useRef(null);
+  const [visible, setVisible] = React21.useState(false);
+  React21.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1564,6 +1590,36 @@ 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 MarketingSurfaceContext = React21.createContext(void 0);
+function MarketingSurfaceProvider({
+  surface,
+  children
+}) {
+  return /* @__PURE__ */ jsx(MarketingSurfaceContext.Provider, { value: surface, children });
+}
+function useMarketingSurface() {
+  return React21.useContext(MarketingSurfaceContext);
+}
+function useSectionSurface(override) {
+  const mode = useUIVariant();
+  const contextSurface = useMarketingSurface();
+  const surface = override ?? contextSurface ?? "card";
+  if (surface === "plain") return "overflow-hidden";
+  if (surface === "soft") {
+    return cn$1(
+      "overflow-hidden border backdrop-blur-md",
+      mode === "smooth" && "rounded-[2rem] border-border/40 bg-card/40",
+      mode === "playful" && "rounded-3xl border-primary/20 bg-card/50",
+      !mode && "rounded-3xl border-border/50 bg-card/45"
+    );
+  }
+  return cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
+}
 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]" },
@@ -1724,16 +1780,16 @@ function Carousel({
   className
 }) {
   const mode = useUIVariant();
-  const trackRef = React20.useRef(null);
-  const [canPrev, setCanPrev] = React20.useState(false);
-  const [canNext, setCanNext] = React20.useState(true);
-  const updateScrollState = React20.useCallback(() => {
+  const trackRef = React21.useRef(null);
+  const [canPrev, setCanPrev] = React21.useState(false);
+  const [canNext, setCanNext] = React21.useState(true);
+  const updateScrollState = React21.useCallback(() => {
     const track = trackRef.current;
     if (!track) return;
     setCanPrev(track.scrollLeft > 8);
     setCanNext(track.scrollLeft < track.scrollWidth - track.clientWidth - 8);
   }, []);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const track = trackRef.current;
     if (!track) return;
     updateScrollState();
@@ -1790,7 +1846,7 @@ function Carousel({
         role: "region",
         "aria-label": ariaLabel,
         className: "flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-        children: React20.Children.map(
+        children: React21.Children.map(
           children,
           (child) => child == null ? null : /* @__PURE__ */ jsx("div", { "data-carousel-item": true, className: cn$1("shrink-0 snap-start", itemClassName), children: child })
         )
@@ -1815,9 +1871,9 @@ function StaggerChildren({
   className,
   ...props
 }) {
-  const ref = React20.useRef(null);
-  const [visible, setVisible] = React20.useState(false);
-  React20.useEffect(() => {
+  const ref = React21.useRef(null);
+  const [visible, setVisible] = React21.useState(false);
+  React21.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1835,7 +1891,7 @@ function StaggerChildren({
     return () => observer.disconnect();
   }, [once]);
   const [tx, ty] = translateMap2[direction];
-  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(className), ...props, children: React20.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(className), ...props, children: React21.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
     "div",
     {
       className: "h-full",
@@ -1854,15 +1910,10 @@ function FeaturesSection({
   description = "A complete system of components, blocks, and hooks designed to work together - and get out of your way.",
   badge = "Features",
   features,
-  layout = "grid"
+  layout = "grid",
+  surface
 }) {
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   const cards = features.map((feature) => /* @__PURE__ */ jsx(
     FeatureCard,
     {
@@ -1882,15 +1933,10 @@ function GroupedFeaturesSection({
   badge = "Features",
   title = "Everything you need to ship",
   description,
-  groups
+  groups,
+  surface
 }) {
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
     /* @__PURE__ */ jsx(SectionTitle, { title, description, badge }),
     /* @__PURE__ */ jsx("div", { className: "mt-14 space-y-14", children: groups.map((group, i) => /* @__PURE__ */ jsxs("div", { children: [
@@ -1960,15 +2006,10 @@ function StepsSection({
   description,
   steps,
   variant = "default",
-  groups
+  groups,
+  surface
 }) {
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   if (variant === "timeline") {
     const resolvedGroups = groups ?? (steps ? [{ steps }] : []);
     let nextNumber = 1;
@@ -1977,7 +2018,7 @@ function StepsSection({
       /* @__PURE__ */ jsx("div", { className: "mt-12", children: resolvedGroups.map((group, groupIndex) => {
         const startNumber = nextNumber;
         nextNumber += group.steps.length;
-        return /* @__PURE__ */ jsxs(React20.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React21.Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: cn$1(groupIndex > 0 && "mt-10"), children: /* @__PURE__ */ jsx(TimelineGroup, { steps: group.steps, startNumber, fadeIn: groupIndex > 0 }) }),
           group.after && /* @__PURE__ */ jsx("div", { className: "mt-16", children: group.after })
         ] }, groupIndex);
@@ -2021,15 +2062,11 @@ function TechStackSection({
   badge = "Built on",
   title = "The stack",
   description,
-  items
+  items,
+  surface
 }) {
   const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
     /* @__PURE__ */ jsx(SectionTitle, { badge, title, description }),
     /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: items.map((item) => {
@@ -2077,16 +2114,11 @@ function FeatureMarqueeSection({
   description,
   rows,
   speed = "normal",
-  pauseOnHover = true
+  pauseOnHover = true,
+  surface
 }) {
-  const mode = useUIVariant();
   const duration = speedDuration[speed];
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   return /* @__PURE__ */ jsxs("section", { className: sectionClasses, children: [
     /* @__PURE__ */ jsxs("div", { className: "py-14 sm:py-20", children: [
       (title || badge || description) && /* @__PURE__ */ jsx(FadeIn, { direction: "up", children: /* @__PURE__ */ jsx("div", { className: "mx-auto mb-10 max-w-4xl px-6 sm:px-10", children: /* @__PURE__ */ jsx(SectionTitle, { title: title ?? "", description, badge }) }) }),
@@ -2147,9 +2179,9 @@ function FeatureMarqueeSection({
   ] });
 }
 function useIntersectionObserver(options) {
-  const ref = React20.useRef(null);
-  const [isIntersecting, setIsIntersecting] = React20.useState(false);
-  React20.useEffect(() => {
+  const ref = React21.useRef(null);
+  const [isIntersecting, setIsIntersecting] = React21.useState(false);
+  React21.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -2171,8 +2203,8 @@ function ShowcaseCta({
   sectionClasses
 }) {
   const [ref, intersecting] = useIntersectionObserver({ threshold: 0.15 });
-  const [visible, setVisible] = React20.useState(false);
-  React20.useEffect(() => {
+  const [visible, setVisible] = React21.useState(false);
+  React21.useEffect(() => {
     if (intersecting) setVisible(true);
   }, [intersecting]);
   return /* @__PURE__ */ jsxs(
@@ -2221,15 +2253,11 @@ function CtaSection(props) {
     secondaryCta,
     footnote,
     variant = "default",
-    renderLink = defaultRenderLink5
+    renderLink = defaultRenderLink5,
+    surface
   } = props;
   const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   if (variant === "showcase") {
     return /* @__PURE__ */ jsx(ShowcaseCta, { ...props, sectionClasses });
   }
@@ -2313,25 +2341,25 @@ function AnimatedSwap({
   const ms = duration ?? spec?.duration ?? 0;
   const reduced = usePrefersReducedMotion();
   const animated = spec !== null && !reduced;
-  const previous = React20.useRef(children);
-  const seenKey = React20.useRef(swapKey);
-  const [swap, setSwap] = React20.useState(null);
+  const previous = React21.useRef(children);
+  const seenKey = React21.useRef(swapKey);
+  const [swap, setSwap] = React21.useState(null);
   if (seenKey.current !== swapKey) {
     const out = previous.current;
     seenKey.current = swapKey;
     if (animated) setSwap({ key: swapKey, out, running: false });
   }
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     previous.current = children;
   });
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!swap || swap.running) return;
     const raf = requestAnimationFrame(() => {
       setSwap((s) => s && s.key === swap.key ? { ...s, running: true } : s);
     });
     return () => cancelAnimationFrame(raf);
   }, [swap]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!swap?.running) return;
     const done = setTimeout(() => {
       setSwap((s) => s && s.key === swap.key ? null : s);
@@ -2361,8 +2389,8 @@ function AnimatedSwap({
   );
 }
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React20.useState(false);
-  React20.useEffect(() => {
+  const [reduced, setReduced] = React21.useState(false);
+  React21.useEffect(() => {
     const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
     if (!query) return;
     setReduced(query.matches);
@@ -2474,8 +2502,8 @@ function CountdownTimer({
   className,
   compact = false
 }) {
-  const [timeLeft, setTimeLeft] = React20.useState(() => getTimeLeft(deadline));
-  React20.useEffect(() => {
+  const [timeLeft, setTimeLeft] = React21.useState(() => getTimeLeft(deadline));
+  React21.useEffect(() => {
     setTimeLeft(getTimeLeft(deadline));
     const id = setInterval(() => setTimeLeft(getTimeLeft(deadline)), 1e3);
     return () => clearInterval(id);
@@ -2501,7 +2529,7 @@ function CountdownTimer({
   ];
   return /* @__PURE__ */ jsxs("div", { className: cn$1("flex items-center justify-center gap-2 text-sm", className), children: [
     /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 font-mono font-semibold tabular-nums", children: units.map(({ value, unit }, i) => /* @__PURE__ */ jsxs(React20.Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 font-mono font-semibold tabular-nums", children: units.map(({ value, unit }, i) => /* @__PURE__ */ jsxs(React21.Fragment, { children: [
       /* @__PURE__ */ jsxs("span", { children: [
         String(value).padStart(2, "0"),
         /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: unit })
@@ -2555,26 +2583,21 @@ function PricingSection({
   defaultCadence,
   onSelectPlan,
   pendingPlanName,
-  priceEffect
+  priceEffect,
+  surface
 }) {
-  const [annual, setAnnual] = React20.useState(false);
+  const [annual, setAnnual] = React21.useState(false);
   const isOneTime = mode === "one-time";
   const useCadences = !!cadences?.length;
   const initialCadence = (defaultCadence && cadences?.some((c) => c.key === defaultCadence) ? defaultCadence : null) ?? cadences?.[0]?.key ?? "";
-  const [activeCadence, setActiveCadence] = React20.useState(initialCadence);
+  const [activeCadence, setActiveCadence] = React21.useState(initialCadence);
   const cadence = cadences?.find((c) => c.key === activeCadence);
-  const saveBadges = React20.useMemo(
+  const saveBadges = React21.useMemo(
     () => useCadences ? computeSaveBadges(plans, cadences, initialCadence) : {},
     [useCadences, plans, cadences, initialCadence]
   );
   const showToggle = useCadences ? cadences.length > 1 : !isOneTime;
-  const uiMode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    uiMode === "smooth" && "rounded-3xl border",
-    uiMode === "playful" && "rounded-2xl border-primary/25 border",
-    !uiMode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-4", children: badge }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: badge })),
@@ -2729,15 +2752,10 @@ function TestimonialsSection({
   title = "Trusted by teams shipping real products",
   description = "Here's what engineers and product teams say after using Olwiba in production.",
   badge = "Testimonials",
-  testimonials
+  testimonials,
+  surface
 }) {
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
     /* @__PURE__ */ jsx(SectionTitle, { title, description, badge }),
     /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-12 columns-1 gap-4 sm:columns-2 lg:columns-3", children: testimonials.map((t) => /* @__PURE__ */ jsx(
@@ -2791,15 +2809,10 @@ function TeamSection({
   members = defaultTeam,
   badge = "Team",
   title = "The people behind Olwiba",
-  description = "A small team with deep experience in design systems, open source, and developer tooling."
+  description = "A small team with deep experience in design systems, open source, and developer tooling.",
+  surface
 }) {
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mb-4", children: badge }),
@@ -2830,15 +2843,10 @@ function FaqSection({
   title = "Frequently asked questions",
   description = "Everything you need to know before getting started.",
   badge = "FAQ",
-  items
+  items,
+  surface
 }) {
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
     /* @__PURE__ */ jsx(SectionTitle, { title, description, badge }),
     /* @__PURE__ */ jsx(FadeIn, { direction: "up", children: /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-10 w-full", children: items.map((item, i) => /* @__PURE__ */ jsxs(AccordionItem, { value: `item-${i}`, children: [
@@ -2858,10 +2866,10 @@ function CountUp({
   className,
   ...props
 }) {
-  const ref = React20.useRef(null);
-  const [value, setValue] = React20.useState(from);
-  const hasStarted = React20.useRef(false);
-  React20.useEffect(() => {
+  const ref = React21.useRef(null);
+  const [value, setValue] = React21.useState(from);
+  const hasStarted = React21.useRef(false);
+  React21.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -2907,15 +2915,10 @@ function StatsSection({
   title = "Built for scale, used in production",
   description,
   badge = "By the numbers",
-  stats
+  stats,
+  surface
 }) {
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-14 sm:px-10 sm:py-20", children: [
     /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,hsl(var(--primary)/0.08),transparent_60%)]" }),
     /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-4xl", children: [
@@ -2952,17 +2955,12 @@ function NewsletterSection({
   privacyLabel = defaults.privacyLabel,
   successTitle = defaults.successTitle,
   successDescription = defaults.successDescription,
-  onSubscribe
+  onSubscribe,
+  surface
 } = {}) {
-  const [email, setEmail] = React20.useState("");
-  const [submitted, setSubmitted] = React20.useState(false);
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const [email, setEmail] = React21.useState("");
+  const [submitted, setSubmitted] = React21.useState(false);
+  const sectionClasses = useSectionSurface(surface);
   async function handleSubmit(e) {
     e.preventDefault();
     if (!email) return;
@@ -3044,16 +3042,11 @@ function ContactSection({
   successTitle = defaults2.successTitle,
   successDescription = defaults2.successDescription,
   sendAnotherLabel = defaults2.sendAnotherLabel,
-  onSubmit
+  onSubmit,
+  surface
 } = {}) {
-  const [submitted, setSubmitted] = React20.useState(false);
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const [submitted, setSubmitted] = React21.useState(false);
+  const sectionClasses = useSectionSurface(surface);
   async function handleSubmit(e) {
     e.preventDefault();
     await onSubmit?.(e);
@@ -3237,15 +3230,10 @@ function ComparisonSection({
   badge = "The math",
   title = "The math is simple",
   description,
-  columns
+  columns,
+  surface
 }) {
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
     /* @__PURE__ */ jsx(SectionTitle, { badge, title, description }),
     /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-12 grid gap-4 sm:grid-cols-3", children: columns.map((col) => /* @__PURE__ */ jsxs(
@@ -3293,15 +3281,10 @@ function QualificationSection({
   badge = "Who it is for",
   title = "Is this for you?",
   description,
-  columns
+  columns,
+  surface
 }) {
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
+  const sectionClasses = useSectionSurface(surface);
   return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
     /* @__PURE__ */ jsx(SectionTitle, { badge, title, description }),
     /* @__PURE__ */ jsx(FadeIn, { direction: "up", className: "mt-12 grid gap-6 sm:grid-cols-2", children: columns.map((col) => {
@@ -3344,10 +3327,10 @@ function Navbar({
   controls,
   renderLink = defaultRenderLink7
 }) {
-  const [open, setOpen] = React20.useState(false);
+  const [open, setOpen] = React21.useState(false);
   const brandHref = brand.href ?? "/";
   const hasRightContent = controls?.length || cta?.primary || cta?.secondary;
-  const closeMobileMenu = React20.useCallback(() => setOpen(false), []);
+  const closeMobileMenu = React21.useCallback(() => setOpen(false), []);
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("nav", { className: "grid h-16 grid-cols-[1fr_auto_1fr] items-center px-6", children: [
     renderLink({
       href: brandHref,
@@ -3362,7 +3345,7 @@ function Navbar({
       children: link.label
     }) }, link.label)) }),
     hasRightContent && /* @__PURE__ */ jsxs("div", { className: "hidden items-center justify-end gap-2 md:flex", children: [
-      controls?.map((control, i) => /* @__PURE__ */ jsx(React20.Fragment, { children: control }, i)),
+      controls?.map((control, i) => /* @__PURE__ */ jsx(React21.Fragment, { children: control }, i)),
       (cta?.secondary || cta?.primary) && controls?.length ? /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-border" }) : null,
       cta?.secondary && renderLink({
         href: cta.secondary.href,
@@ -3375,7 +3358,7 @@ function Navbar({
     ] }),
     /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxs("div", { className: "col-start-3 flex items-center justify-end gap-1 md:hidden", children: [
-        controls?.map((control, i) => /* @__PURE__ */ jsx(React20.Fragment, { children: control }, i)),
+        controls?.map((control, i) => /* @__PURE__ */ jsx(React21.Fragment, { children: control }, i)),
         /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", children: [
           /* @__PURE__ */ jsx(Menu, { className: "size-5" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open menu" })
@@ -3537,7 +3520,7 @@ function LogoStrip({
   ] });
 }
 function GridUnderlay({ variant, size = 24, className, ...props }) {
-  const id = React20.useId();
+  const id = React21.useId();
   const pattern = variant === "dots" ? /* @__PURE__ */ jsx("circle", { cx: size / 2, cy: size / 2, r: 1, fill: "currentColor" }) : variant === "lines" ? /* @__PURE__ */ jsx("path", { d: `M ${size} 0 L 0 0 0 ${size}`, fill: "none", stroke: "currentColor", strokeWidth: 0.5 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("line", { x1: size / 2, y1: 0, x2: size / 2, y2: size, stroke: "currentColor", strokeWidth: 0.5 }),
     /* @__PURE__ */ jsx("line", { x1: 0, y1: size / 2, x2: size, y2: size / 2, stroke: "currentColor", strokeWidth: 0.5 })
@@ -3565,9 +3548,9 @@ function GlowUnderlay({
   style,
   ...props
 }) {
-  const [pos, setPos] = React20.useState({ x: "50%", y: "50%" });
-  const containerRef = React20.useRef(null);
-  React20.useEffect(() => {
+  const [pos, setPos] = React21.useState({ x: "50%", y: "50%" });
+  const containerRef = React21.useRef(null);
+  React21.useEffect(() => {
     if (!followCursor) return;
     const handleMouseMove = (e) => {
       const el = containerRef.current;
@@ -3706,8 +3689,8 @@ function PageTransition({
   style,
   ...props
 }) {
-  const [mounted, setMounted] = React20.useState(false);
-  React20.useEffect(() => {
+  const [mounted, setMounted] = React21.useState(false);
+  React21.useEffect(() => {
     const id = requestAnimationFrame(() => setMounted(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -3782,7 +3765,7 @@ function Sortable({
     if (oldIndex === -1 || newIndex === -1) return;
     onReorder(arrayMove(items, oldIndex, newIndex));
   };
-  const childArray = React20.Children.toArray(children);
+  const childArray = React21.Children.toArray(children);
   return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items, strategy: strategies[direction], children: /* @__PURE__ */ jsx("div", { className: cn$1(containerClasses[direction], className), children: childArray.map(
     (child, i) => items[i] === void 0 ? null : /* @__PURE__ */ jsx(SortableItem, { id: items[i], disabled, className: itemClassName, children: child }, items[i])
   ) }) }) });
@@ -3794,8 +3777,8 @@ function Spotlight({
   triggerClassName,
   shortcut = "\u2318K"
 }) {
-  const [open, setOpen] = React20.useState(false);
-  React20.useEffect(() => {
+  const [open, setOpen] = React21.useState(false);
+  React21.useEffect(() => {
     const down = (e) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -3825,7 +3808,7 @@ function Spotlight({
       /* @__PURE__ */ jsx(CommandInput, { placeholder }),
       /* @__PURE__ */ jsxs(CommandList, { children: [
         /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
-        groups.map((group, i) => /* @__PURE__ */ jsxs(React20.Fragment, { children: [
+        groups.map((group, i) => /* @__PURE__ */ jsxs(React21.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
           /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs(
             CommandItem,
@@ -3850,8 +3833,8 @@ function Spotlight({
 var BASE = 40;
 var MAGNIFY_RADIUS = 80;
 function Dock({ items, iconSize = BASE, magnification = 1.7, className, ...props }) {
-  const [mouseX, setMouseX] = React20.useState(null);
-  const containerRef = React20.useRef(null);
+  const [mouseX, setMouseX] = React21.useState(null);
+  const containerRef = React21.useRef(null);
   function getScale(index) {
     if (mouseX === null || !containerRef.current) return 1;
     const container = containerRef.current;
@@ -3950,7 +3933,7 @@ function ConfirmDialog({ isOpen, options, handleConfirm, handleCancel, destructi
   ] }) });
 }
 function RegisterHotkeys({ hotkeys }) {
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const handleKeyDown = (event) => {
       for (const hotkey of hotkeys) {
         const matches = event.key.toLowerCase() === hotkey.key.toLowerCase() && !!event.ctrlKey === !!hotkey.ctrl && !!event.metaKey === !!hotkey.meta && !!event.shiftKey === !!hotkey.shift && !!event.altKey === !!hotkey.alt;
@@ -3967,10 +3950,10 @@ function RegisterHotkeys({ hotkeys }) {
   return null;
 }
 function useControlledOpen(defaultOpen = false) {
-  const [isOpen, setIsOpen] = React20.useState(defaultOpen);
-  const open = React20.useCallback(() => setIsOpen(true), []);
-  const close = React20.useCallback(() => setIsOpen(false), []);
-  const toggle = React20.useCallback(() => setIsOpen((prev) => !prev), []);
+  const [isOpen, setIsOpen] = React21.useState(defaultOpen);
+  const open = React21.useCallback(() => setIsOpen(true), []);
+  const close = React21.useCallback(() => setIsOpen(false), []);
+  const toggle = React21.useCallback(() => setIsOpen((prev) => !prev), []);
   return { isOpen, open, close, toggle, setIsOpen };
 }
 function CommandMenu({
@@ -3983,7 +3966,7 @@ function CommandMenu({
 }) {
   const internal = useControlledOpen(false);
   const isOpen = openProp ?? internal.isOpen;
-  const setOpen = React20.useCallback(
+  const setOpen = React21.useCallback(
     (next) => {
       if (openProp === void 0) internal.setIsOpen(next);
       onOpenChange?.(next);
@@ -4008,7 +3991,7 @@ function CommandMenu({
       /* @__PURE__ */ jsx(CommandInput, { placeholder }),
       /* @__PURE__ */ jsxs(CommandList, { children: [
         /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
-        groups.map((group, i) => /* @__PURE__ */ jsxs(React20.Fragment, { children: [
+        groups.map((group, i) => /* @__PURE__ */ jsxs(React21.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
           /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs(
             CommandItem,
@@ -4063,7 +4046,7 @@ function DataView({
       }
     );
   }
-  return /* @__PURE__ */ jsx(AppGrid, { columns: gridColumns, gap, className: cn$1(className), children: items.map((item) => /* @__PURE__ */ jsx(React20.Fragment, { children: renderCard(item) }, getRowId(item))) });
+  return /* @__PURE__ */ jsx(AppGrid, { columns: gridColumns, gap, className: cn$1(className), children: items.map((item) => /* @__PURE__ */ jsx(React21.Fragment, { children: renderCard(item) }, getRowId(item))) });
 }
 var TOKEN_COLORS = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"];
 var seriesColor = (s, i) => s.color ?? TOKEN_COLORS[i % TOKEN_COLORS.length];
@@ -4237,20 +4220,20 @@ function FileUpload({
   hint,
   className
 }) {
-  const [internalFiles, setInternalFiles] = React20.useState(defaultFiles ?? []);
-  const [isDragging, setIsDragging] = React20.useState(false);
-  const [validationError, setValidationError] = React20.useState(null);
-  const inputRef = React20.useRef(null);
-  const dragDepth = React20.useRef(0);
+  const [internalFiles, setInternalFiles] = React21.useState(defaultFiles ?? []);
+  const [isDragging, setIsDragging] = React21.useState(false);
+  const [validationError, setValidationError] = React21.useState(null);
+  const inputRef = React21.useRef(null);
+  const dragDepth = React21.useRef(0);
   const files = filesProp ?? internalFiles;
-  const setFiles = React20.useCallback(
+  const setFiles = React21.useCallback(
     (next) => {
       if (!filesProp) setInternalFiles(next);
       onFilesChange?.(next);
     },
     [filesProp, onFilesChange]
   );
-  const acceptList = React20.useMemo(
+  const acceptList = React21.useMemo(
     () => accept?.split(",").map((a) => a.trim().toLowerCase()).filter(Boolean) ?? [],
     [accept]
   );
@@ -4974,7 +4957,7 @@ function PageHeader({
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1 pb-6", className), children: [
     breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-2 flex items-center gap-1 text-sm text-muted-foreground", children: breadcrumbs.map((crumb, i) => {
       const isLast = i === breadcrumbs.length - 1;
-      return /* @__PURE__ */ jsxs(React20.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React21.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0" }),
         isLast || !crumb.href ? /* @__PURE__ */ jsx("span", { className: cn(isLast && "text-foreground font-medium"), children: crumb.label }) : renderLink({
           href: crumb.href,
@@ -5010,7 +4993,7 @@ function PageHeader({
   ] });
 }
 function Suspensed({ children, fallback }) {
-  return /* @__PURE__ */ jsx(React20.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
+  return /* @__PURE__ */ jsx(React21.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
 }
 function getInitialTheme() {
   if (typeof document === "undefined") return "dark";
@@ -5018,7 +5001,7 @@ function getInitialTheme() {
   return stored ?? (document.documentElement.classList.contains("dark") ? "dark" : "light");
 }
 function ThemeSwitchMinimal() {
-  const [theme, setThemeState] = React20.useState(getInitialTheme);
+  const [theme, setThemeState] = React21.useState(getInitialTheme);
   const toggle = () => {
     const next = theme === "dark" ? "light" : "dark";
     setThemeState(next);
@@ -5144,9 +5127,9 @@ function getInitialColorName() {
   return localStorage.getItem(STORAGE_KEY) ?? "emerald";
 }
 function BrandColorSwitchMinimal() {
-  const [active, setActive] = React20.useState(getInitialColorName);
-  const [open, setOpen] = React20.useState(false);
-  React20.useEffect(() => {
+  const [active, setActive] = React21.useState(getInitialColorName);
+  const [open, setOpen] = React21.useState(false);
+  React21.useEffect(() => {
     const saved = localStorage.getItem(STORAGE_KEY) ?? "emerald";
     const color = BRAND_COLORS.find((c) => c.name === saved);
     if (color) applyColor(color);
@@ -5207,7 +5190,7 @@ function BrandColorSwitchMinimal() {
   ] });
 }
 function ThemeColorUpdater({ colorTheme }) {
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (colorTheme) {
       document.documentElement.setAttribute("data-theme", colorTheme);
     } else {
@@ -5217,7 +5200,7 @@ function ThemeColorUpdater({ colorTheme }) {
   return null;
 }
 function VersionBanner({ version, message, className, onDismiss }) {
-  const [dismissed, setDismissed] = React20.useState(false);
+  const [dismissed, setDismissed] = React21.useState(false);
   if (dismissed) return null;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-4 bg-primary/10 px-4 py-2 text-sm", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -5474,29 +5457,29 @@ function useMounted() {
   return mounted;
 }
 function useConfirm() {
-  const [isOpen, setIsOpen] = React20.useState(false);
-  const [options, setOptions] = React20.useState({});
-  const resolveRef = React20.useRef(null);
-  const confirm = React20.useCallback((opts = {}) => {
+  const [isOpen, setIsOpen] = React21.useState(false);
+  const [options, setOptions] = React21.useState({});
+  const resolveRef = React21.useRef(null);
+  const confirm = React21.useCallback((opts = {}) => {
     setOptions(opts);
     setIsOpen(true);
     return new Promise((resolve) => {
       resolveRef.current = resolve;
     });
   }, []);
-  const handleConfirm = React20.useCallback(() => {
+  const handleConfirm = React21.useCallback(() => {
     resolveRef.current?.(true);
     setIsOpen(false);
   }, []);
-  const handleCancel = React20.useCallback(() => {
+  const handleCancel = React21.useCallback(() => {
     resolveRef.current?.(false);
     setIsOpen(false);
   }, []);
   return { confirm, isOpen, options, handleConfirm, handleCancel };
 }
 function useScrolledPast(threshold) {
-  const [scrolledPast, setScrolledPast] = React20.useState(false);
-  React20.useEffect(() => {
+  const [scrolledPast, setScrolledPast] = React21.useState(false);
+  React21.useEffect(() => {
     const handleScroll = () => {
       setScrolledPast(window.scrollY > threshold);
     };
@@ -5507,28 +5490,28 @@ function useScrolledPast(threshold) {
   return scrolledPast;
 }
 function useCopyToClipboard() {
-  const [copied, setCopied] = React20.useState(false);
-  const timeoutRef = React20.useRef(void 0);
-  const copy = React20.useCallback((text) => {
+  const [copied, setCopied] = React21.useState(false);
+  const timeoutRef = React21.useRef(void 0);
+  const copy = React21.useCallback((text) => {
     navigator.clipboard.writeText(text).then(() => {
       setCopied(true);
       clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
     });
   }, []);
-  React20.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  React21.useEffect(() => () => clearTimeout(timeoutRef.current), []);
   return [copied, copy];
 }
 function useDebounce(value, delay) {
-  const [debounced, setDebounced] = React20.useState(value);
-  React20.useEffect(() => {
+  const [debounced, setDebounced] = React21.useState(value);
+  React21.useEffect(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
   return debounced;
 }
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = React20.useState(() => {
+  const [storedValue, setStoredValue] = React21.useState(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = window.localStorage.getItem(key);
@@ -5537,7 +5520,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = React20.useCallback(
+  const setValue = React21.useCallback(
     (value) => {
       try {
         setStoredValue(value);
@@ -5559,11 +5542,11 @@ function useViewMode(key = "view-mode", fallback = "cards") {
   return { view: mounted ? stored : fallback, setView: setStored, ready: mounted };
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React20.useState(() => {
+  const [matches, setMatches] = React21.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     setMatches(mql.matches);
@@ -5574,18 +5557,18 @@ function useMediaQuery(query) {
   return matches;
 }
 function usePagination(total, pageSize) {
-  const [page, setPage] = React20.useState(1);
+  const [page, setPage] = React21.useState(1);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const offset = (page - 1) * pageSize;
-  const goTo = React20.useCallback(
+  const goTo = React21.useCallback(
     (p) => setPage(Math.min(Math.max(1, p), totalPages)),
     [totalPages]
   );
-  const next = React20.useCallback(() => goTo(page + 1), [page, goTo]);
-  const prev = React20.useCallback(() => goTo(page - 1), [page, goTo]);
+  const next = React21.useCallback(() => goTo(page + 1), [page, goTo]);
+  const prev = React21.useCallback(() => goTo(page - 1), [page, goTo]);
   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, 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, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode, useViewMode };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map