@olwiba/ui 0.1.4 → 0.1.7

package/dist/index.js

@@ -1,13 +1,13 @@
 import { cn } from './chunk-AMWLSHD6.js';
 export { MdxContent, cn } from './chunk-AMWLSHD6.js';
-import * as React26 from 'react';
-import { useState, useEffect } 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, 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, 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';
+import * as React29 from 'react';
+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, 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, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, Phone, MapPin, MessageSquare, Send, Menu, Search, TrendingUp, TrendingDown, Sun, Moon, AlertTriangle, Loader2, Layers, LayoutGrid, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
+import { Compass, ArrowLeft, X, ArrowRight, ChevronLeft, ChevronRight, Sparkles, Rocket, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, MapPin, MessageSquare, Send, Menu, Search, TrendingUp, TrendingDown, Sun, Moon, Palette, AlertTriangle, Loader2, Layers, LayoutGrid, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
 
-var OlwibaUIContext = React26.createContext({
+var OlwibaUIContext = React29.createContext({
   isMobile: false,
   mode: "default",
   setMode: () => {
@@ -16,17 +16,17 @@ var OlwibaUIContext = React26.createContext({
 function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode = "default" }) {
   const detectedMobile = useIsMobile();
   const isMobile = isMobileProp ?? detectedMobile;
-  const [mode, setMode] = React26.useState(initialMode);
+  const [mode, setMode] = React29.useState(initialMode);
   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 React26.useContext(OlwibaUIContext);
+  return React29.useContext(OlwibaUIContext);
 }
 function useUIMode() {
-  return React26.useContext(OlwibaUIContext).mode;
+  return React29.useContext(OlwibaUIContext).mode;
 }
-var Button = React26.forwardRef(
+var Button = React29.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -34,7 +34,7 @@ var Button = React26.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Card = React26.forwardRef(
+var Card = React29.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -45,7 +45,7 @@ Card.displayName = "Card";
 function Badge(props) {
   return /* @__PURE__ */ jsx(Badge$1, { ...props });
 }
-var Input = React26.forwardRef(
+var Input = React29.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -53,7 +53,7 @@ var Input = React26.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Textarea = React26.forwardRef(
+var Textarea = React29.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -61,13 +61,13 @@ var Textarea = React26.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Checkbox = React26.forwardRef(({ mode, ...props }, ref) => {
+var Checkbox = React29.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 = React26.forwardRef(({ mode: _mode, ...props }, ref) => {
+var Switch = React29.forwardRef(({ mode: _mode, ...props }, ref) => {
   return /* @__PURE__ */ jsx(Switch$1, { ...props, ref });
 });
 Switch.displayName = "Switch";
@@ -490,10 +490,15 @@ function DefaultForm({
   error,
   loading,
   renderLink = defaultRenderLink2,
-  footer
+  footer,
+  defaultEmail,
+  defaultPassword
 }) {
   const isSignUp = mode === "signup";
+  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)}}` }),
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       brand && /* @__PURE__ */ jsx("div", { className: "mb-2", children: brand }),
       /* @__PURE__ */ jsx(CardTitle, { children: isSignUp ? "Create an account" : "Sign in" }),
@@ -507,7 +512,18 @@ function DefaultForm({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "auth-email", children: "Email address" }),
-          /* @__PURE__ */ jsx(Input, { id: "auth-email", name: "email", type: "email", placeholder: "name@company.com", autoComplete: "email" })
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "auth-email",
+              name: "email",
+              type: "email",
+              placeholder: "name@company.com",
+              autoComplete: "email",
+              defaultValue: defaultEmail,
+              style: prefillStyle(!!defaultEmail)
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -525,7 +541,9 @@ function DefaultForm({
               name: "password",
               type: "password",
               placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-              autoComplete: isSignUp ? "new-password" : "current-password"
+              autoComplete: isSignUp ? "new-password" : "current-password",
+              defaultValue: defaultPassword,
+              style: prefillStyle(!!defaultPassword)
             }
           )
         ] }),
@@ -757,9 +775,9 @@ function FadeIn({
   style,
   ...props
 }) {
-  const ref = React26.useRef(null);
-  const [visible, setVisible] = React26.useState(false);
-  React26.useEffect(() => {
+  const ref = React29.useRef(null);
+  const [visible, setVisible] = React29.useState(false);
+  React29.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -956,9 +974,9 @@ function StaggerChildren({
   className,
   ...props
 }) {
-  const ref = React26.useRef(null);
-  const [visible, setVisible] = React26.useState(false);
-  React26.useEffect(() => {
+  const ref = React29.useRef(null);
+  const [visible, setVisible] = React29.useState(false);
+  React29.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -976,7 +994,7 @@ function StaggerChildren({
     return () => observer.disconnect();
   }, [once]);
   const [tx, ty] = translateMap2[direction];
-  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(className), ...props, children: React26.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(className), ...props, children: React29.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
     "div",
     {
       className: "h-full",
@@ -1017,6 +1035,133 @@ function FeaturesSection({
     )) })
   ] }) }) });
 }
+function GroupedFeaturesSection({
+  badge = "Features",
+  title = "Everything you need to ship",
+  description,
+  groups
+}) {
+  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"
+  );
+  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: [
+      /* @__PURE__ */ jsx(FadeIn, { direction: "up", delay: i * 60, children: /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tracking-wide text-muted-foreground uppercase", children: group.label }),
+        /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
+      ] }) }),
+      /* @__PURE__ */ jsx(StaggerChildren, { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: group.features.map((feature) => /* @__PURE__ */ jsx(
+        FeatureCard,
+        {
+          icon: feature.icon,
+          title: feature.title,
+          description: feature.description,
+          href: feature.href
+        },
+        feature.title
+      )) })
+    ] }, group.label)) })
+  ] }) }) });
+}
+function StepsSection({
+  badge = "How it works",
+  title = "From zero to shipped",
+  description,
+  steps
+}) {
+  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"
+  );
+  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__ */ jsxs("div", { className: "mt-12", children: [
+      /* @__PURE__ */ jsx("div", { className: "hidden sm:grid", style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` }, children: steps.map((step, i) => /* @__PURE__ */ jsx(FadeIn, { direction: "up", delay: i * 80, children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center text-center px-4", children: [
+        i < steps.length - 1 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute top-6 left-1/2 w-full border-t border-dashed border-border"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-2xl", children: step.emoji ?? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-primary", children: i + 1 }) }),
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: step.title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: step.description })
+      ] }) }, step.title)) }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0 sm:hidden", children: steps.map((step, i) => /* @__PURE__ */ jsx(FadeIn, { direction: "up", delay: i * 80, children: /* @__PURE__ */ jsxs("div", { className: "relative flex gap-4 pb-8 last:pb-0", children: [
+        i < steps.length - 1 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute left-[23px] top-14 bottom-0 w-px border-l border-dashed border-border"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-muted text-2xl", children: step.emoji ?? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-primary", children: i + 1 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "pt-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: step.title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm leading-relaxed text-muted-foreground", children: step.description })
+        ] })
+      ] }) }, step.title)) })
+    ] })
+  ] }) }) });
+}
+function TechStackSection({
+  badge = "Built on",
+  title = "The stack",
+  description,
+  items
+}) {
+  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"
+  );
+  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) => {
+      const Icon = item.icon;
+      const card = /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn$1(
+            "group flex flex-col gap-3 border bg-background p-5 transition-all duration-200",
+            mode === "smooth" ? "rounded-2xl hover:-translate-y-0.5 hover:shadow-md" : "rounded-xl hover:-translate-y-0.5 hover:shadow-md"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn$1(
+                  "flex h-9 w-9 items-center justify-center bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary",
+                  mode === "smooth" ? "rounded-xl" : "rounded-lg"
+                ),
+                children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold leading-tight", children: item.name }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: item.description })
+            ] })
+          ]
+        }
+      );
+      if (item.href) {
+        return /* @__PURE__ */ jsx("a", { href: item.href, className: "block", children: card }, item.name);
+      }
+      return /* @__PURE__ */ jsx("div", { children: card }, item.name);
+    }) })
+  ] }) }) });
+}
 function CarouselSection({
   title = "Explore the platform",
   description,
@@ -1024,16 +1169,16 @@ function CarouselSection({
   features
 }) {
   const mode = useUIVariant();
-  const trackRef = React26.useRef(null);
-  const [canPrev, setCanPrev] = React26.useState(false);
-  const [canNext, setCanNext] = React26.useState(true);
-  const updateScrollState = React26.useCallback(() => {
+  const trackRef = React29.useRef(null);
+  const [canPrev, setCanPrev] = React29.useState(false);
+  const [canNext, setCanNext] = React29.useState(true);
+  const updateScrollState = React29.useCallback(() => {
     const track = trackRef.current;
     if (!track) return;
     setCanPrev(track.scrollLeft > 8);
     setCanNext(track.scrollLeft < track.scrollWidth - track.clientWidth - 8);
   }, []);
-  React26.useEffect(() => {
+  React29.useEffect(() => {
     const track = trackRef.current;
     if (!track) return;
     updateScrollState();
@@ -1117,6 +1262,83 @@ function CarouselSection({
     ] })
   ] }) }) });
 }
+var speedDuration = {
+  slow: "280s",
+  normal: "180s",
+  fast: "100s"
+};
+function FeatureMarqueeSection({
+  badge,
+  title,
+  description,
+  rows,
+  speed = "normal",
+  pauseOnHover = true
+}) {
+  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"
+  );
+  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 }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: rows.map((row, i) => {
+        const direction = row.direction ?? (i % 2 === 0 ? "left" : "right");
+        const reversed = direction === "right";
+        const source = reversed ? [...row.items].reverse() : row.items;
+        const set = Array.from({ length: 4 }, () => source).flat();
+        const items = [...set, ...set];
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "group relative overflow-hidden",
+            style: {
+              maskImage: "linear-gradient(to right, transparent, black 8%, black 92%, transparent)",
+              WebkitMaskImage: "linear-gradient(to right, transparent, black 8%, black 92%, transparent)"
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn$1(
+                  "flex w-max gap-3 py-0.5",
+                  pauseOnHover && "group-hover:[animation-play-state:paused]"
+                ),
+                style: {
+                  animation: `feature-marquee-left ${duration} linear infinite`
+                },
+                children: items.map((item, j) => {
+                  const Icon = item.icon;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "flex shrink-0 items-center gap-2 rounded-full border bg-background px-4 py-2 text-sm shadow-sm",
+                      children: [
+                        /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0 text-primary" }),
+                        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-foreground", children: item.title })
+                      ]
+                    },
+                    `${item.title}-${j}`
+                  );
+                })
+              }
+            )
+          },
+          i
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes feature-marquee-left {
+          from { transform: translateX(0); }
+          to { transform: translateX(-50%); }
+        }
+      ` })
+  ] });
+}
 var defaultRenderLink5 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function CtaSection({
   heading,
@@ -1156,6 +1378,71 @@ function CtaSection({
     ] }) })
   ] }) });
 }
+var defaultRenderLink6 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function CtaCardSection({
+  heading,
+  description,
+  primaryCta,
+  footnote,
+  icon,
+  renderLink = defaultRenderLink6
+}) {
+  const ref = React29.useRef(null);
+  const [visible, setVisible] = React29.useState(false);
+  React29.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.15 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      className: cn$1(
+        "relative overflow-hidden rounded-3xl border border-gray-200 shadow-sm dark:border-border",
+        "bg-[#E0DFDB] dark:bg-card",
+        "transition-[opacity,transform] duration-700 ease-out",
+        visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+            style: {
+              opacity: visible ? 0.12 : 0,
+              transform: visible ? "scale(1) rotate(0deg)" : "scale(0.9) rotate(-5deg)",
+              transition: "opacity 700ms ease 200ms, transform 700ms ease 200ms"
+            },
+            children: icon ?? /* @__PURE__ */ jsx(Rocket, { className: "size-72 text-foreground dark:text-foreground", strokeWidth: 0.75 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 px-6 py-20 text-center sm:px-10 sm:py-28", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: heading }),
+          description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-lg text-pretty text-muted-foreground", children: description }),
+          /* @__PURE__ */ jsx("div", { className: "mt-8", children: renderLink({
+            href: primaryCta.href,
+            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-foreground px-6 py-3 text-sm font-medium text-background transition-opacity hover:opacity-80", children: [
+              primaryCta.label,
+              /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+            ] })
+          }) }),
+          footnote && /* @__PURE__ */ jsx("p", { className: "mt-5 text-sm text-muted-foreground", children: footnote })
+        ] })
+      ]
+    }
+  );
+}
 function PricingCard({
   name,
   price,
@@ -1164,6 +1451,7 @@ function PricingCard({
   features,
   cta,
   highlighted = false,
+  disabled = false,
   badge,
   onSelect,
   className,
@@ -1174,14 +1462,15 @@ function PricingCard({
     "div",
     {
       className: cn$1(
-        "relative flex flex-col border p-6",
+        "relative flex flex-col border p-6 transition-opacity",
         mode === "playful" ? "rounded-2xl rotate-[0.3deg]" : mode === "smooth" ? "rounded-3xl" : "rounded-2xl",
         highlighted ? "border-primary bg-primary/5 shadow-sm" : "bg-card",
+        disabled && "pointer-events-none opacity-40 select-none",
         mode !== "playful" && className
       ),
       ...mode !== "playful" ? props : {},
       children: [
-        badge && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(Badge$1, { children: badge }) }),
+        badge && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge$1, { children: badge }) : badge }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: name }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1", children: [
@@ -1196,6 +1485,7 @@ function PricingCard({
             variant: highlighted ? "default" : "outline",
             className: "mt-6 w-full",
             onClick: onSelect,
+            disabled,
             children: cta
           }
         ),
@@ -1227,7 +1517,59 @@ function PricingCard({
   }
   return cardInner;
 }
-var defaultRenderLink6 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function getTimeLeft(deadline) {
+  const diff = new Date(deadline).getTime() - Date.now();
+  if (diff <= 0) return null;
+  return {
+    days: Math.floor(diff / (1e3 * 60 * 60 * 24)),
+    hours: Math.floor(diff / (1e3 * 60 * 60) % 24),
+    minutes: Math.floor(diff / 1e3 / 60 % 60),
+    seconds: Math.floor(diff / 1e3 % 60)
+  };
+}
+function CountdownTimer({
+  deadline,
+  label = "Founding price closes in",
+  className,
+  compact = false
+}) {
+  const [timeLeft, setTimeLeft] = React29.useState(() => getTimeLeft(deadline));
+  React29.useEffect(() => {
+    setTimeLeft(getTimeLeft(deadline));
+    const id = setInterval(() => setTimeLeft(getTimeLeft(deadline)), 1e3);
+    return () => clearInterval(id);
+  }, [deadline]);
+  if (!timeLeft) return null;
+  if (compact) {
+    return /* @__PURE__ */ jsxs("span", { className: cn$1("font-mono tabular-nums", className), children: [
+      timeLeft.days,
+      "d \xB7 ",
+      String(timeLeft.hours).padStart(2, "0"),
+      "h \xB7 ",
+      String(timeLeft.minutes).padStart(2, "0"),
+      "m \xB7 ",
+      String(timeLeft.seconds).padStart(2, "0"),
+      "s"
+    ] });
+  }
+  const units = [
+    { value: timeLeft.days, unit: "d" },
+    { value: timeLeft.hours, unit: "h" },
+    { value: timeLeft.minutes, unit: "m" },
+    { value: timeLeft.seconds, unit: "s" }
+  ];
+  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(React29.Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        String(value).padStart(2, "0"),
+        /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: unit })
+      ] }),
+      i < units.length - 1 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "\xB7" })
+    ] }, unit)) })
+  ] });
+}
+var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function PricingSection({
   title = "Simple, transparent pricing",
   description = "Start for free. Scale as you grow. No hidden fees.",
@@ -1235,23 +1577,26 @@ function PricingSection({
   plans,
   saveBadge = "Save 34%",
   isAuthenticated,
-  renderLink = defaultRenderLink6,
-  footnote
+  renderLink = defaultRenderLink7,
+  footnote,
+  mode = "subscription",
+  foundingDeadline
 }) {
-  const [annual, setAnnual] = React26.useState(false);
-  const mode = useUIVariant();
+  const [annual, setAnnual] = React29.useState(false);
+  const isOneTime = mode === "one-time";
+  const uiMode = 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"
+    uiMode === "smooth" && "rounded-3xl border",
+    uiMode === "playful" && "rounded-2xl border-primary/25 border",
+    !uiMode && "rounded-2xl border"
   );
   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 && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-4", children: badge }),
+      badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-4", children: badge }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: badge })),
       /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: title }),
       description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-xl text-pretty text-muted-foreground", children: description }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1", children: [
+      !isOneTime && /* @__PURE__ */ jsxs("div", { className: "mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1", children: [
         /* @__PURE__ */ jsx(
           Button$1,
           {
@@ -1284,18 +1629,22 @@ function PricingSection({
       ] })
     ] }),
     /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-10 grid gap-4 lg:grid-cols-3", children: plans.map((plan) => {
-      const price = annual ? plan.annual : plan.monthly;
+      const rawPrice = isOneTime ? plan.monthly : annual ? plan.annual : plan.monthly;
+      const price = plan.priceDisplay ?? `$${rawPrice}`;
+      const period = plan.periodDisplay ?? (isOneTime ? "one-time" : rawPrice > 0 ? "/mo" : "");
+      const badge2 = plan.highlighted && foundingDeadline ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full border bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground", children: /* @__PURE__ */ jsx(CountdownTimer, { deadline: foundingDeadline, compact: true }) }) : plan.highlighted ? "Founding member" : void 0;
       return /* @__PURE__ */ jsx(
         PricingCard,
         {
           name: plan.name,
-          price: `$${price}`,
-          period: price > 0 ? "/mo" : "",
+          price,
+          period,
           description: plan.description,
           features: plan.features,
           cta: plan.cta,
           highlighted: plan.highlighted,
-          badge: plan.highlighted ? "Most popular" : void 0
+          disabled: plan.disabled,
+          badge: badge2
         },
         plan.name
       );
@@ -1403,7 +1752,7 @@ function TestimonialsSection({
     )) })
   ] }) }) });
 }
-var team = [
+var defaultTeam = [
   {
     name: "Olivia Reed",
     role: "Co-Founder & CEO",
@@ -1427,40 +1776,21 @@ var team = [
     avatar: "https://ui.shadcn.com/avatars/03.png",
     initials: "PN",
     social: { twitter: "#", github: null, linkedin: "#" }
-  },
-  {
-    name: "Daniel Frost",
-    role: "Senior Engineer",
-    bio: "Accessibility and performance specialist. If it doesn't work with a keyboard, it's broken.",
-    avatar: "https://ui.shadcn.com/avatars/04.png",
-    initials: "DF",
-    social: { twitter: null, github: "#", linkedin: "#" }
-  },
-  {
-    name: "Aisha Okafor",
-    role: "Developer Relations",
-    bio: "Writes docs, builds examples, and makes sure every engineer can ship their first block in under an hour.",
-    avatar: "https://ui.shadcn.com/avatars/05.png",
-    initials: "AO",
-    social: { twitter: "#", github: "#", linkedin: "#" }
-  },
-  {
-    name: "Tom Halvorsen",
-    role: "Growth",
-    bio: "Turns happy users into loud advocates. Runs the community and keeps the changelog sharp.",
-    avatar: "https://ui.shadcn.com/avatars/06.png",
-    initials: "TH",
-    social: { twitter: "#", github: null, linkedin: "#" }
   }
 ];
-function TeamSection() {
+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."
+}) {
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", 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$1, { variant: "secondary", className: "mb-4", children: "Team" }),
-      /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: "The people behind Olwiba" }),
-      /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-xl text-pretty text-muted-foreground", children: "A small team with deep experience in design systems, open source, and developer tooling." })
+      /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-4", children: badge }),
+      /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-xl text-pretty text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: team.map((member) => /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border bg-muted/40 p-5", children: [
+    /* @__PURE__ */ jsx("div", { className: "mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: members.map((member) => /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border bg-muted/40 p-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
         /* @__PURE__ */ jsxs(Avatar, { className: "size-12 rounded-xl", children: [
           /* @__PURE__ */ jsx(AvatarImage, { src: member.avatar, alt: member.name }),
@@ -1472,7 +1802,7 @@ function TeamSection() {
         ] })
       ] }),
       /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-relaxed text-muted-foreground", children: member.bio }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2", children: [
+      member.social && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2", children: [
         member.social.twitter && /* @__PURE__ */ jsx("a", { href: member.social.twitter, "aria-label": "Twitter", className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground", children: /* @__PURE__ */ jsx(Twitter, { className: "size-3.5" }) }),
         member.social.github && /* @__PURE__ */ jsx("a", { href: member.social.github, "aria-label": "GitHub", className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground", children: /* @__PURE__ */ jsx(Github, { className: "size-3.5" }) }),
         member.social.linkedin && /* @__PURE__ */ jsx("a", { href: member.social.linkedin, "aria-label": "LinkedIn", className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground", children: /* @__PURE__ */ jsx(Linkedin, { className: "size-3.5" }) })
@@ -1512,10 +1842,10 @@ function CountUp({
   className,
   ...props
 }) {
-  const ref = React26.useRef(null);
-  const [value, setValue] = React26.useState(from);
-  const hasStarted = React26.useRef(false);
-  React26.useEffect(() => {
+  const ref = React29.useRef(null);
+  const [value, setValue] = React29.useState(from);
+  const hasStarted = React29.useRef(false);
+  React29.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1608,8 +1938,8 @@ function NewsletterSection({
   successDescription = defaults.successDescription,
   onSubscribe
 } = {}) {
-  const [email, setEmail] = React26.useState("");
-  const [submitted, setSubmitted] = React26.useState(false);
+  const [email, setEmail] = React29.useState("");
+  const [submitted, setSubmitted] = React29.useState(false);
   async function handleSubmit(e) {
     e.preventDefault();
     if (!email) return;
@@ -1619,8 +1949,10 @@ function NewsletterSection({
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", 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_top_right,hsl(var(--primary)/0.1),transparent_60%)]" }),
     /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-xl text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Mail, { className: "size-5" }) }),
-      /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-3", children: badge }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "inline-flex h-8 w-8 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Mail, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: badge })
+      ] }),
       /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: title }),
       /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-sm text-pretty text-muted-foreground", children: description }),
       submitted ? /* @__PURE__ */ jsxs("div", { className: "mt-8 rounded-2xl border bg-muted/50 px-6 py-5 text-sm", children: [
@@ -1666,15 +1998,14 @@ function NewsletterSection({
 }
 var defaultContactInfoResolved = [
   { icon: Mail, label: "Email", value: "hello@olwiba.com" },
-  { icon: Phone, label: "Phone", value: "+1 (555) 000-0000" },
-  { icon: MapPin, label: "Office", value: "San Francisco, CA" }
+  { icon: MapPin, label: "Base", value: "Aotearoa New Zealand" }
 ];
 var defaults2 = {
-  badge: "Contact us",
+  badge: "Contact",
   title: "Let's talk",
-  description: "Have a question or want to work together? Fill in the form and we'll get back to you within one business day.",
+  description: "Have a question or want to work together? Fill in the form and you'll hear back from the person who built it.",
   successTitle: "Message sent",
-  successDescription: "Thanks for reaching out. We'll get back to you within one business day.",
+  successDescription: "Thanks for reaching out. You'll get a reply within one business day.",
   sendAnotherLabel: "Send another"
 };
 function ContactSection({
@@ -1682,12 +2013,13 @@ function ContactSection({
   title = defaults2.title,
   description = defaults2.description,
   contactInfo = defaultContactInfoResolved,
+  privacyHref,
   successTitle = defaults2.successTitle,
   successDescription = defaults2.successDescription,
   sendAnotherLabel = defaults2.sendAnotherLabel,
   onSubmit
 } = {}) {
-  const [submitted, setSubmitted] = React26.useState(false);
+  const [submitted, setSubmitted] = React29.useState(false);
   async function handleSubmit(e) {
     e.preventDefault();
     await onSubmit?.(e);
@@ -1695,49 +2027,41 @@ function ContactSection({
   }
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_1.4fr]", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden bg-primary px-8 py-12 text-primary-foreground", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.1),transparent_60%)]" }),
-      /* @__PURE__ */ jsxs("div", { className: "relative space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.12),transparent_55%)]" }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,hsl(var(--primary-foreground)/0.06),transparent_60%)]" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col gap-8", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(
             Badge$1,
             {
               variant: "secondary",
-              className: "mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20",
+              className: "mb-4 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20",
               children: badge
             }
           ),
-          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-primary-foreground/70", children: description })
+          /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold leading-tight", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-relaxed text-primary-foreground/70", children: description })
         ] }),
         /* @__PURE__ */ jsx(Separator, { className: "bg-primary-foreground/20" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: contactInfo.map(({ icon: Icon = Mail, label, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-5", children: contactInfo.map(({ icon: Icon = Mail, label, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { className: "text-xs text-primary-foreground/60", children: label }),
-            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: value })
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wider text-primary-foreground/50", children: label }),
+            /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-sm font-medium", children: value })
           ] })
-        ] }, label)) })
+        ] }, label)) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-auto", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-primary-foreground/40", children: "Response within one business day." }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-8", children: submitted ? /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[320px] flex-col items-center justify-center gap-4 text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-6" }) }),
+    /* @__PURE__ */ jsx("div", { className: "p-8 sm:p-10", children: submitted ? /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[360px] flex-col items-center justify-center gap-5 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-6" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: successTitle }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: successDescription })
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: successTitle }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground", children: successDescription })
       ] }),
-      /* @__PURE__ */ jsx(Button$1, { variant: "outline", onClick: () => setSubmitted(false), children: sendAnotherLabel })
+      /* @__PURE__ */ jsx(Button$1, { variant: "outline", size: "sm", onClick: () => setSubmitted(false), children: sendAnotherLabel })
     ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-5", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          name: "company",
-          tabIndex: -1,
-          autoComplete: "off",
-          "aria-hidden": "true",
-          className: "hidden"
-        }
-      ),
+      /* @__PURE__ */ jsx("input", { type: "text", name: "_hp", tabIndex: -1, autoComplete: "off", "aria-hidden": "true", className: "hidden" }),
       /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "contact-first", children: "First name" }),
@@ -1748,8 +2072,24 @@ function ContactSection({
           /* @__PURE__ */ jsx(Input$1, { id: "contact-last", name: "lastName", placeholder: "Reed", required: true })
         ] })
       ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxs(Label, { htmlFor: "contact-company", className: "flex gap-1", children: [
+            "Company",
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "(optional)" })
+          ] }),
+          /* @__PURE__ */ jsx(Input$1, { id: "contact-company", name: "company", placeholder: "Acme Inc." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxs(Label, { htmlFor: "contact-phone", className: "flex gap-1", children: [
+            "Phone",
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "(optional)" })
+          ] }),
+          /* @__PURE__ */ jsx(Input$1, { id: "contact-phone", name: "phone", type: "tel", placeholder: "+1 (555) 000-0000" })
+        ] })
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "contact-email", children: "Email" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "contact-email", children: "Work email" }),
         /* @__PURE__ */ jsx(Input$1, { id: "contact-email", name: "email", type: "email", placeholder: "olivia@company.com", required: true })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
@@ -1764,11 +2104,20 @@ function ContactSection({
             id: "contact-message",
             name: "message",
             placeholder: "Tell us what you're working on...",
-            className: "min-h-28 resize-none",
+            className: "min-h-32 resize-none",
             required: true
           }
         )
       ] }),
+      privacyHref && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(Checkbox$1, { id: "contact-privacy", name: "privacy", required: true, className: "mt-0.5" }),
+        /* @__PURE__ */ jsxs(Label, { htmlFor: "contact-privacy", className: "text-sm font-normal leading-snug text-muted-foreground", children: [
+          "By submitting this form you agree to our",
+          " ",
+          /* @__PURE__ */ jsx("a", { href: privacyHref, className: "font-medium text-foreground underline-offset-2 hover:underline", children: "privacy policy" }),
+          "."
+        ] })
+      ] }),
       /* @__PURE__ */ jsxs(Button$1, { type: "submit", className: "w-full", children: [
         "Send message",
         /* @__PURE__ */ jsx(Send, { className: "ml-2 size-4" })
@@ -1776,22 +2125,143 @@ function ContactSection({
     ] }) })
   ] }) });
 }
-var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function ComparisonSection({
+  badge = "The math",
+  title = "The math is simple",
+  description,
+  columns
+}) {
+  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"
+  );
+  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(
+      "div",
+      {
+        className: cn$1(
+          "flex flex-col rounded-2xl border p-6",
+          col.highlighted ? "border-foreground bg-foreground text-background" : "border-border bg-muted/40"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn$1(
+                  "text-xs font-semibold uppercase tracking-widest",
+                  col.highlighted ? "text-background/60" : "text-muted-foreground"
+                ),
+                children: col.label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn$1(
+                  "mt-2 text-2xl font-bold tracking-tight",
+                  col.highlighted ? "text-background" : "text-foreground"
+                ),
+                children: col.cost
+              }
+            ),
+            col.costDetail && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn$1(
+                  "mt-1 text-sm",
+                  col.highlighted ? "text-background/60" : "text-muted-foreground"
+                ),
+                children: col.costDetail
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: col.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5", children: [
+            col.highlighted ? /* @__PURE__ */ jsx(Check, { className: "mt-0.5 size-4 shrink-0 text-background/70" }) : /* @__PURE__ */ jsx(Minus, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground/50" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn$1(
+                  "text-sm leading-snug",
+                  col.highlighted ? "text-background/90" : "text-muted-foreground"
+                ),
+                children: item
+              }
+            )
+          ] }, item)) })
+        ]
+      },
+      col.label
+    )) })
+  ] }) }) });
+}
+function QualificationSection({
+  badge = "Who it is for",
+  title = "Is this for you?",
+  description,
+  columns
+}) {
+  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"
+  );
+  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) => {
+      const isPositive = col.variant === "positive";
+      const Icon = isPositive ? Check : X;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn$1(
+            "flex flex-col gap-4 rounded-2xl border p-6",
+            isPositive ? "border-border bg-muted/30" : "border-border bg-muted/10"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold uppercase tracking-widest text-muted-foreground", children: col.heading }),
+            /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: col.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn$1(
+                    "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full",
+                    isPositive ? "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400" : "bg-rose-500/15 text-rose-600 dark:text-rose-400"
+                  ),
+                  children: /* @__PURE__ */ jsx(Icon, { className: "size-3" })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-sm leading-relaxed text-foreground/80", children: item })
+            ] }, item)) })
+          ]
+        },
+        col.heading
+      );
+    }) })
+  ] }) }) });
+}
+var defaultRenderLink8 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function Navbar({
   brand,
   navLinks,
   cta,
   controls,
-  renderLink = defaultRenderLink7
+  renderLink = defaultRenderLink8
 }) {
-  const [open, setOpen] = React26.useState(false);
+  const [open, setOpen] = React29.useState(false);
   const brandHref = brand.href ?? "/";
   const hasRightContent = controls?.length || cta?.primary || cta?.secondary;
   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,
       children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 font-semibold", children: [
-        brand.logo && /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 items-center justify-center rounded-xl bg-primary text-primary-foreground", children: brand.logo }),
+        brand.logo,
         /* @__PURE__ */ jsx("span", { children: brand.name })
       ] })
     }),
@@ -1801,7 +2271,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(React26.Fragment, { children: control }, i)),
+      controls?.map((control, i) => /* @__PURE__ */ jsx(React29.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,
@@ -1822,12 +2292,12 @@ function Navbar({
           /* @__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", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: brand.logo }),
+              brand.logo,
               /* @__PURE__ */ jsx("span", { children: brand.name })
             ] })
           }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            controls?.map((control, i) => /* @__PURE__ */ jsx(React26.Fragment, { children: control }, i)),
+            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" })
@@ -1854,22 +2324,22 @@ function Navbar({
     ] })
   ] }) });
 }
-var defaultRenderLink8 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink9 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function Footer({
   brand,
   navLinks,
   socialLinks,
   legal,
-  renderLink = defaultRenderLink8
+  renderLink = defaultRenderLink9
 }) {
   const brandHref = brand.href ?? "/";
   const copyrightText = legal ?? `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${brand.name}. All rights reserved.`;
-  return /* @__PURE__ */ jsx("footer", { className: "overflow-hidden rounded-2xl border bg-muted text-foreground", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl px-6 py-20 sm:py-24 lg:px-8", children: [
+  return /* @__PURE__ */ jsx("footer", { className: "overflow-hidden rounded-2xl border bg-card text-foreground", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl px-6 py-20 sm:py-24 lg:px-8", children: [
     /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: renderLink({
       href: brandHref,
       className: "flex items-center gap-2",
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        brand.logo && /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-foreground/10 text-foreground", children: brand.logo }),
+        brand.logo,
         /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-foreground", children: brand.name })
       ] })
     }) }),
@@ -1891,7 +2361,7 @@ function Footer({
     /* @__PURE__ */ jsx("p", { className: "mt-10 text-center text-sm/6 text-muted-foreground/70", children: copyrightText })
   ] }) });
 }
-var speedDuration = {
+var speedDuration2 = {
   slow: "60s",
   normal: "40s",
   fast: "25s"
@@ -1901,7 +2371,7 @@ function LogoStrip({
   label,
   speed = "normal"
 }) {
-  const duration = speedDuration[speed];
+  const duration = speedDuration2[speed];
   return /* @__PURE__ */ jsxs(FadeIn, { direction: "up", children: [
     /* @__PURE__ */ jsxs("section", { className: "overflow-hidden py-8", children: [
       label && /* @__PURE__ */ jsx("p", { className: "mb-6 text-center text-sm text-muted-foreground", children: label }),
@@ -1972,7 +2442,7 @@ function LogoStrip({
   ] });
 }
 function GridUnderlay({ variant, size = 24, className, ...props }) {
-  const id = React26.useId();
+  const id = React29.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 })
@@ -2000,9 +2470,9 @@ function GlowUnderlay({
   style,
   ...props
 }) {
-  const [pos, setPos] = React26.useState({ x: "50%", y: "50%" });
-  const containerRef = React26.useRef(null);
-  React26.useEffect(() => {
+  const [pos, setPos] = React29.useState({ x: "50%", y: "50%" });
+  const containerRef = React29.useRef(null);
+  React29.useEffect(() => {
     if (!followCursor) return;
     const handleMouseMove = (e) => {
       const el = containerRef.current;
@@ -2086,6 +2556,53 @@ function Overlay(props) {
   if (props.variant === "scrim") return /* @__PURE__ */ jsx(ScrimOverlay, { ...props });
   return /* @__PURE__ */ jsx(LoadingOverlay, { ...props });
 }
+function AnimatedPill({ labels, interval = 3800, className }) {
+  const pillRef = useRef(null);
+  const textRef = useRef(null);
+  useEffect(() => {
+    const pill = pillRef.current;
+    const text = textRef.current;
+    if (!pill || !text || labels.length < 2) return;
+    pill.style.width = pill.offsetWidth + "px";
+    pill.dataset.w = String(pill.offsetWidth);
+    let idx = 0;
+    const cycle = () => {
+      idx = (idx + 1) % labels.length;
+      text.style.transition = "opacity 140ms ease";
+      text.style.opacity = "0";
+      setTimeout(() => {
+        text.textContent = labels[idx] ?? "";
+        const oldW = parseFloat(pill.dataset.w ?? "0");
+        pill.style.transition = "none";
+        pill.style.width = "auto";
+        const newW = pill.offsetWidth;
+        pill.style.width = oldW + "px";
+        void pill.offsetWidth;
+        pill.style.transition = "width 280ms cubic-bezier(0.4, 0, 0.2, 1)";
+        pill.style.width = newW + "px";
+        pill.dataset.w = String(newW);
+        setTimeout(() => {
+          text.style.transition = "opacity 140ms ease";
+          text.style.opacity = "1";
+        }, 260);
+      }, 150);
+    };
+    const id = setInterval(cycle, interval);
+    return () => clearInterval(id);
+  }, [labels, interval]);
+  if (!labels.length) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: pillRef,
+      className: cn$1(
+        "inline-flex items-center overflow-hidden whitespace-nowrap rounded-full border bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("span", { ref: textRef, children: labels[0] })
+    }
+  );
+}
 function PageTransition({
   variant = "fade",
   duration = 300,
@@ -2094,8 +2611,8 @@ function PageTransition({
   style,
   ...props
 }) {
-  const [mounted, setMounted] = React26.useState(false);
-  React26.useEffect(() => {
+  const [mounted, setMounted] = React29.useState(false);
+  React29.useEffect(() => {
     const id = requestAnimationFrame(() => setMounted(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -2122,8 +2639,8 @@ function Spotlight({
   triggerClassName,
   shortcut = "\u2318K"
 }) {
-  const [open, setOpen] = React26.useState(false);
-  React26.useEffect(() => {
+  const [open, setOpen] = React29.useState(false);
+  React29.useEffect(() => {
     const down = (e) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -2153,7 +2670,7 @@ function Spotlight({
       /* @__PURE__ */ jsx(CommandInput, { placeholder }),
       /* @__PURE__ */ jsxs(CommandList, { children: [
         /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
-        groups.map((group, i) => /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+        groups.map((group, i) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
           /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs(
             CommandItem,
@@ -2178,8 +2695,8 @@ function Spotlight({
 var BASE = 40;
 var MAGNIFY_RADIUS = 80;
 function Dock({ items, iconSize = BASE, magnification = 1.7, className, ...props }) {
-  const [mouseX, setMouseX] = React26.useState(null);
-  const containerRef = React26.useRef(null);
+  const [mouseX, setMouseX] = React29.useState(null);
+  const containerRef = React29.useRef(null);
   function getScale(index) {
     if (mouseX === null || !containerRef.current) return 1;
     const container = containerRef.current;
@@ -2385,26 +2902,254 @@ function ImageCard({
     }
   );
 }
+var DASH_ON = "5px";
+var DASH_OFF = "4px";
+function FlowConnector({
+  direction = "vertical",
+  color,
+  arrow = false,
+  animate = false,
+  animateDur = "1.4s",
+  animateDelay = "0s",
+  className,
+  style
+}) {
+  const stroke = color ?? "currentColor";
+  const opacity = color ? 0.75 : 0.4;
+  if (direction === "vertical") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn$1("relative flex flex-col items-center", className),
+        style,
+        "aria-hidden": true,
+        children: [
+          animate && /* @__PURE__ */ jsx("style", { children: `@keyframes fc-dot-v{0%{top:-4px;opacity:0}8%{opacity:1}88%{opacity:1}100%{top:calc(100% + 4px);opacity:0}}` }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex-1",
+              style: {
+                width: 2,
+                opacity,
+                background: `repeating-linear-gradient(to bottom, ${stroke} 0, ${stroke} ${DASH_ON}, transparent ${DASH_ON}, transparent calc(${DASH_ON} + ${DASH_OFF}))`
+              }
+            }
+          ),
+          animate && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: "50%",
+                transform: "translateX(-50%)",
+                width: 5,
+                height: 5,
+                borderRadius: "50%",
+                backgroundColor: stroke,
+                animation: `fc-dot-v ${animateDur} ease-in-out ${animateDelay} infinite both`
+              }
+            }
+          ),
+          arrow && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "12",
+              height: "7",
+              viewBox: "0 0 12 7",
+              style: { display: "block", opacity },
+              "aria-hidden": true,
+              children: /* @__PURE__ */ jsx(
+                "polyline",
+                {
+                  points: "1,1 6,6 11,1",
+                  fill: "none",
+                  stroke,
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn$1("flex items-center", className),
+      style,
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex-1",
+            style: {
+              height: 2,
+              opacity,
+              background: `repeating-linear-gradient(to right, ${stroke} 0, ${stroke} ${DASH_ON}, transparent ${DASH_ON}, transparent calc(${DASH_ON} + ${DASH_OFF}))`
+            }
+          }
+        ),
+        arrow && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "7",
+            height: "12",
+            viewBox: "0 0 7 12",
+            style: { display: "block", opacity },
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx(
+              "polyline",
+              {
+                points: "1,1 6,6 1,11",
+                fill: "none",
+                stroke,
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var MARKER_L = "fb-ml";
+var MARKER_R = "fb-mr";
+function FlowBracket({
+  anchorTop = 8,
+  anchorBottom = 92,
+  extent = 22,
+  arrow = true,
+  color = "rgba(148,163,184,0.4)",
+  colorLeft,
+  colorRight,
+  left = true,
+  right = true,
+  animate = false,
+  animateDur = "4s",
+  reverseRight = false,
+  style,
+  className,
+  children
+}) {
+  const L = -extent;
+  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 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}
+}
+@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}
+}` : "";
+  const dotBase = {
+    position: "absolute",
+    width: 5,
+    height: 5,
+    borderRadius: "50%",
+    transform: "translate(-50%, -50%)",
+    pointerEvents: "none",
+    opacity: 0
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: { position: "relative", ...style }, children: [
+    animate && /* @__PURE__ */ jsx("style", { children: dotKeyframes }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: "0 0 1000 100",
+        preserveAspectRatio: "none",
+        "aria-hidden": true,
+        className: "pointer-events-none absolute inset-0",
+        style: { width: "100%", height: "100%", overflow: "visible" },
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsx("marker", { id: MARKER_L, markerWidth: "10", markerHeight: "8", refX: "8", refY: "4", orient: "auto", children: /* @__PURE__ */ jsx("polyline", { points: "1,1 8,4 1,7", fill: "none", stroke: cl, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ jsx("marker", { id: MARKER_R, markerWidth: "10", markerHeight: "8", refX: "8", refY: "4", orient: "auto", children: /* @__PURE__ */ jsx("polyline", { points: "1,1 8,4 1,7", fill: "none", stroke: cr, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          ] }),
+          left && /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: leftD,
+              fill: "none",
+              stroke: cl,
+              strokeWidth: 1.5,
+              strokeDasharray: "5,4",
+              vectorEffect: "non-scaling-stroke",
+              ...arrow ? { markerEnd: `url(#${MARKER_L})` } : {}
+            }
+          ),
+          right && /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: rightD,
+              fill: "none",
+              stroke: cr,
+              strokeWidth: 1.5,
+              strokeDasharray: "5,4",
+              vectorEffect: "non-scaling-stroke",
+              ...arrow ? { markerEnd: `url(#${MARKER_R})` } : {}
+            }
+          )
+        ]
+      }
+    ),
+    children,
+    animate && left && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        style: { ...dotBase, backgroundColor: cl, animation: `fb-dl ${animateDur} ease-in-out 0s infinite` }
+      }
+    ),
+    animate && right && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        style: { ...dotBase, backgroundColor: cr, animation: `fb-dr ${animateDur} ease-in-out 1.8s infinite` }
+      }
+    )
+  ] });
+}
 function FullPageSpinner({ message }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4", children: [
     /* @__PURE__ */ jsx(Spinner, { className: "size-8" }),
     message && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: message })
   ] });
 }
-var defaultRenderLink9 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink10 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function PageHeader({
   title,
   description,
   breadcrumbs,
   backButton,
-  renderLink = defaultRenderLink9,
+  renderLink = defaultRenderLink10,
   className,
   children
 }) {
   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(React26.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React29.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,
@@ -2440,15 +3185,15 @@ function PageHeader({
   ] });
 }
 function Suspensed({ children, fallback }) {
-  return /* @__PURE__ */ jsx(React26.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
+  return /* @__PURE__ */ jsx(React29.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
+}
+function getInitialTheme() {
+  if (typeof document === "undefined") return "dark";
+  const stored = localStorage.getItem("theme");
+  return stored ?? (document.documentElement.classList.contains("dark") ? "dark" : "light");
 }
 function ThemeSwitchMinimal() {
-  const [theme, setThemeState] = React26.useState("dark");
-  React26.useEffect(() => {
-    const stored = localStorage.getItem("theme");
-    const resolved = stored ?? (document.documentElement.classList.contains("dark") ? "dark" : "light");
-    setThemeState(resolved);
-  }, []);
+  const [theme, setThemeState] = React29.useState(getInitialTheme);
   const toggle = () => {
     const next = theme === "dark" ? "light" : "dark";
     setThemeState(next);
@@ -2490,8 +3235,154 @@ function ModeSwitchMinimal() {
     mode
   ) });
 }
+var BRAND_COLORS = [
+  {
+    name: "zinc",
+    label: "Zinc",
+    css: `
+      :root { --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.708 0 0); }
+      .dark  { --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --ring: oklch(0.556 0 0); }
+    `
+  },
+  {
+    name: "blue",
+    label: "Blue",
+    css: `
+      :root { --primary: oklch(0.546 0.245 262.881); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.546 0.245 262.881); }
+      .dark  { --primary: oklch(0.623 0.214 259.815); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.623 0.214 259.815); }
+    `
+  },
+  {
+    name: "emerald",
+    label: "Emerald",
+    css: `
+      :root { --primary: oklch(0.596 0.145 163.225); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.596 0.145 163.225); }
+      .dark  { --primary: oklch(0.765 0.177 163.223); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.765 0.177 163.223); }
+    `
+  },
+  {
+    name: "purple",
+    label: "Purple",
+    css: `
+      :root { --primary: oklch(0.558 0.288 302.321); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.558 0.288 302.321); }
+      .dark  { --primary: oklch(0.714 0.203 305.504); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.714 0.203 305.504); }
+    `
+  },
+  {
+    name: "rose",
+    label: "Rose",
+    css: `
+      :root { --primary: oklch(0.645 0.246 16.439); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.645 0.246 16.439); }
+      .dark  { --primary: oklch(0.717 0.194 17.428); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.717 0.194 17.428); }
+    `
+  },
+  {
+    name: "orange",
+    label: "Orange",
+    css: `
+      :root { --primary: oklch(0.705 0.213 47.604); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.705 0.213 47.604); }
+      .dark  { --primary: oklch(0.792 0.184 70.08); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.792 0.184 70.08); }
+    `
+  },
+  {
+    name: "slate",
+    label: "Slate",
+    css: `
+      :root { --primary: oklch(0.446 0.043 257.281); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.446 0.043 257.281); }
+      .dark  { --primary: oklch(0.704 0.04 256.788); --primary-foreground: oklch(0.129 0.042 264.695); --ring: oklch(0.704 0.04 256.788); }
+    `
+  }
+];
+var PREVIEW_HEX = {
+  zinc: "#27272a",
+  blue: "#3b82f6",
+  emerald: "#10b981",
+  purple: "#a855f7",
+  rose: "#f43f5e",
+  orange: "#f97316",
+  slate: "#64748b"
+};
+var STORAGE_KEY = "brand-color";
+var STYLE_ID = "brand-color-override";
+function applyColor(color) {
+  let el = document.getElementById(STYLE_ID);
+  if (!el) {
+    el = document.createElement("style");
+    el.id = STYLE_ID;
+    document.head.appendChild(el);
+  }
+  el.textContent = color.css;
+  localStorage.setItem(STORAGE_KEY, color.name);
+}
+function getInitialColorName() {
+  if (typeof localStorage === "undefined") return "emerald";
+  return localStorage.getItem(STORAGE_KEY) ?? "emerald";
+}
+function BrandColorSwitchMinimal() {
+  const [active, setActive] = React29.useState(getInitialColorName);
+  const [open, setOpen] = React29.useState(false);
+  React29.useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY) ?? "emerald";
+    const color = BRAND_COLORS.find((c) => c.name === saved);
+    if (color) applyColor(color);
+  }, []);
+  function select(color) {
+    applyColor(color);
+    setActive(color.name);
+    setOpen(false);
+  }
+  const activeHex = PREVIEW_HEX[active] ?? "#27272a";
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "size-8",
+        "aria-label": "Change brand color",
+        children: /* @__PURE__ */ jsxs("span", { className: "relative inline-flex size-4 items-center justify-center", children: [
+          /* @__PURE__ */ jsx(Palette, { className: "size-4" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute -bottom-0.5 -right-0.5 size-1.5 rounded-full ring-1 ring-background",
+              style: { background: activeHex }
+            }
+          )
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-auto p-3", align: "end", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2.5 text-xs font-medium text-muted-foreground", children: "Brand color" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-1.5", children: BRAND_COLORS.map((color) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => select(color),
+          title: color.label,
+          className: "group flex flex-col items-center gap-1",
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex size-7 items-center justify-center rounded-full ring-offset-background transition-all group-hover:scale-110",
+                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
+                },
+                children: active === color.name && /* @__PURE__ */ jsx("svg", { className: "size-3 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: color.label })
+          ]
+        },
+        color.name
+      )) })
+    ] })
+  ] });
+}
 function ThemeColorUpdater({ colorTheme }) {
-  React26.useEffect(() => {
+  React29.useEffect(() => {
     if (colorTheme) {
       document.documentElement.setAttribute("data-theme", colorTheme);
     } else {
@@ -2501,7 +3392,7 @@ function ThemeColorUpdater({ colorTheme }) {
   return null;
 }
 function VersionBanner({ version, message, className, onDismiss }) {
-  const [dismissed, setDismissed] = React26.useState(false);
+  const [dismissed, setDismissed] = React29.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: [
@@ -2541,7 +3432,7 @@ function DevBanner({ environment = "development", className }) {
   );
 }
 function RegisterHotkeys({ hotkeys }) {
-  React26.useEffect(() => {
+  React29.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;
@@ -2600,6 +3491,16 @@ function PostList({ posts, renderLink, emptyMessage = "No posts published yet."
   }
   return /* @__PURE__ */ jsx("div", { className: "grid gap-8 sm:grid-cols-2", children: posts.map((post) => /* @__PURE__ */ jsx(PostCard, { ...post, renderLink }, post.slug)) });
 }
+var releaseTypeLabel = {
+  release: "Major Release",
+  fix: "Fix",
+  enhancement: "Enhancement"
+};
+var releaseTypeVariant = {
+  release: "default",
+  fix: "outline",
+  enhancement: "secondary"
+};
 function formatDate2(dateStr) {
   return new Date(dateStr).toLocaleDateString("en-US", {
     year: "numeric",
@@ -2613,6 +3514,8 @@ function ChangelogCard({
   date,
   slug,
   version,
+  releaseType,
+  highlights,
   hrefPrefix = "/changelog",
   renderLink
 }) {
@@ -2621,18 +3524,44 @@ function ChangelogCard({
     children,
     className
   }) => renderLink ? renderLink({ href, children, className }) : /* @__PURE__ */ jsx("a", { href, className, children });
-  return /* @__PURE__ */ jsxs("article", { className: "group flex flex-col gap-3 border-b border-border/60 pb-8 last:border-0 last:pb-0", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("time", { dateTime: date, children: formatDate2(date) }),
-      version && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { children: "\xB7" }),
-        /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "font-mono text-xs", children: version })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold leading-snug tracking-tight", children: /* @__PURE__ */ jsx(LinkWrapper, { className: "transition-colors hover:text-primary", children: title }) }),
-    /* @__PURE__ */ jsx("p", { className: cn$1("line-clamp-3 text-sm text-muted-foreground"), children: summary }),
-    /* @__PURE__ */ jsx(LinkWrapper, { className: "text-sm font-medium text-primary hover:underline", children: "Read release notes \u2192" })
-  ] });
+  const hasHighlights = highlights && highlights.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn$1(
+        "flex flex-col gap-5 rounded-2xl border border-border bg-card p-6 sm:p-8",
+        !hasHighlights && "border-b border-border/60 rounded-none bg-transparent p-0 pb-8 last:pb-0 last:border-0"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("time", { className: "text-sm text-muted-foreground", dateTime: date, children: formatDate2(date) }),
+            version && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "font-mono text-xs", children: version }),
+            releaseType && /* @__PURE__ */ jsx(Badge$1, { variant: releaseTypeVariant[releaseType], className: "text-xs", children: releaseTypeLabel[releaseType] })
+          ] }),
+          /* @__PURE__ */ jsxs(LinkWrapper, { className: "inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline", children: [
+            "Read update",
+            /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold leading-snug tracking-tight", children: /* @__PURE__ */ jsx(LinkWrapper, { className: "transition-colors hover:text-primary", children: title }) }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: summary })
+        ] }),
+        hasHighlights && /* @__PURE__ */ jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: highlights.map((h) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "rounded-xl border border-border/70 bg-background p-4",
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold leading-snug", children: h.title }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: h.description })
+            ]
+          },
+          h.title
+        )) })
+      ]
+    }
+  );
 }
 function ChangelogList({
   entries,
@@ -2661,36 +3590,36 @@ function useMounted() {
   return mounted;
 }
 function useConfirm() {
-  const [isOpen, setIsOpen] = React26.useState(false);
-  const [options, setOptions] = React26.useState({});
-  const resolveRef = React26.useRef(null);
-  const confirm = React26.useCallback((opts = {}) => {
+  const [isOpen, setIsOpen] = React29.useState(false);
+  const [options, setOptions] = React29.useState({});
+  const resolveRef = React29.useRef(null);
+  const confirm = React29.useCallback((opts = {}) => {
     setOptions(opts);
     setIsOpen(true);
     return new Promise((resolve) => {
       resolveRef.current = resolve;
     });
   }, []);
-  const handleConfirm = React26.useCallback(() => {
+  const handleConfirm = React29.useCallback(() => {
     resolveRef.current?.(true);
     setIsOpen(false);
   }, []);
-  const handleCancel = React26.useCallback(() => {
+  const handleCancel = React29.useCallback(() => {
     resolveRef.current?.(false);
     setIsOpen(false);
   }, []);
   return { confirm, isOpen, options, handleConfirm, handleCancel };
 }
 function useControlledOpen(defaultOpen = false) {
-  const [isOpen, setIsOpen] = React26.useState(defaultOpen);
-  const open = React26.useCallback(() => setIsOpen(true), []);
-  const close = React26.useCallback(() => setIsOpen(false), []);
-  const toggle = React26.useCallback(() => setIsOpen((prev) => !prev), []);
+  const [isOpen, setIsOpen] = React29.useState(defaultOpen);
+  const open = React29.useCallback(() => setIsOpen(true), []);
+  const close = React29.useCallback(() => setIsOpen(false), []);
+  const toggle = React29.useCallback(() => setIsOpen((prev) => !prev), []);
   return { isOpen, open, close, toggle, setIsOpen };
 }
 function useScrolledPast(threshold) {
-  const [scrolledPast, setScrolledPast] = React26.useState(false);
-  React26.useEffect(() => {
+  const [scrolledPast, setScrolledPast] = React29.useState(false);
+  React29.useEffect(() => {
     const handleScroll = () => {
       setScrolledPast(window.scrollY > threshold);
     };
@@ -2701,30 +3630,30 @@ function useScrolledPast(threshold) {
   return scrolledPast;
 }
 function useCopyToClipboard() {
-  const [copied, setCopied] = React26.useState(false);
-  const timeoutRef = React26.useRef(void 0);
-  const copy = React26.useCallback((text) => {
+  const [copied, setCopied] = React29.useState(false);
+  const timeoutRef = React29.useRef(void 0);
+  const copy = React29.useCallback((text) => {
     navigator.clipboard.writeText(text).then(() => {
       setCopied(true);
       clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
     });
   }, []);
-  React26.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  React29.useEffect(() => () => clearTimeout(timeoutRef.current), []);
   return [copied, copy];
 }
 function useDebounce(value, delay) {
-  const [debounced, setDebounced] = React26.useState(value);
-  React26.useEffect(() => {
+  const [debounced, setDebounced] = React29.useState(value);
+  React29.useEffect(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
   return debounced;
 }
 function useIntersectionObserver(options) {
-  const ref = React26.useRef(null);
-  const [isIntersecting, setIsIntersecting] = React26.useState(false);
-  React26.useEffect(() => {
+  const ref = React29.useRef(null);
+  const [isIntersecting, setIsIntersecting] = React29.useState(false);
+  React29.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -2736,7 +3665,7 @@ function useIntersectionObserver(options) {
   return [ref, isIntersecting];
 }
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = React26.useState(() => {
+  const [storedValue, setStoredValue] = React29.useState(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = window.localStorage.getItem(key);
@@ -2745,7 +3674,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = React26.useCallback(
+  const setValue = React29.useCallback(
     (value) => {
       try {
         setStoredValue(value);
@@ -2760,11 +3689,11 @@ function useLocalStorage(key, initialValue) {
   return [storedValue, setValue];
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React26.useState(() => {
+  const [matches, setMatches] = React29.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
-  React26.useEffect(() => {
+  React29.useEffect(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     setMatches(mql.matches);
@@ -2775,18 +3704,18 @@ function useMediaQuery(query) {
   return matches;
 }
 function usePagination(total, pageSize) {
-  const [page, setPage] = React26.useState(1);
+  const [page, setPage] = React29.useState(1);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const offset = (page - 1) * pageSize;
-  const goTo = React26.useCallback(
+  const goTo = React29.useCallback(
     (p) => setPage(Math.min(Math.max(1, p), totalPages)),
     [totalPages]
   );
-  const next = React26.useCallback(() => goTo(page + 1), [page, goTo]);
-  const prev = React26.useCallback(() => goTo(page - 1), [page, goTo]);
+  const next = React29.useCallback(() => goTo(page + 1), [page, goTo]);
+  const prev = React29.useCallback(() => goTo(page - 1), [page, goTo]);
   return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
 }
 
-export { AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, Button, Card, CarouselSection, ChangelogCard, ChangelogList, Checkbox, ConfirmDialog, ContactSection, ContextMenu, CountUp, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeaturesSection, Footer, FullPageSpinner, GlassCard, Grid, GridItem, HeroSection, ImageCard, Input, LogoStrip, ModeSwitchMinimal, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, Suspensed, Switch, TeamSection, 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, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map