@thesage/ui 1.1.0 → 1.3.1

package/dist/index.mjs

@@ -23,12 +23,12 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow",
-        primary: "bg-primary text-primary-foreground shadow",
+        default: "bg-primary text-primary-foreground shadow-sm",
+        primary: "bg-primary text-primary-foreground shadow-sm",
         // Alias for default
-        destructive: "bg-destructive text-destructive-foreground shadow-sm",
-        outline: "border border-input bg-transparent shadow-sm hover:bg-primary hover:text-primary-foreground hover:border-primary",
-        secondary: "bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-sm hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground",
+        destructive: "bg-destructive text-destructive-foreground shadow-xs",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground hover:border-primary",
+        secondary: "bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-xs hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground",
         ghost: "hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },
@@ -114,7 +114,7 @@ var toggleVariants = cva2(
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
       },
       size: {
         default: "h-9 px-3",
@@ -194,7 +194,7 @@ var ToggleGroupItem = ({
 };
 
 // src/components/actions/Magnetic.tsx
-import { motion as motion2, useMotionValue, useSpring } from "framer-motion";
+import { motion, useMotionValue, useSpring } from "framer-motion";
 import { useRef } from "react";
 
 // src/hooks/useMotionPreference.ts
@@ -204,225 +204,6 @@ import { useEffect } from "react";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
-// ../tokens/src/base.ts
-var baseTokens = {
-  /**
-   * Spacing scale (based on 4px grid)
-   */
-  spacing: {
-    "0": "0",
-    "0.5": "0.125rem",
-    // 2px
-    "1": "0.25rem",
-    // 4px
-    "2": "0.5rem",
-    // 8px
-    "3": "0.75rem",
-    // 12px
-    "4": "1rem",
-    // 16px
-    "5": "1.25rem",
-    // 20px
-    "6": "1.5rem",
-    // 24px
-    "8": "2rem",
-    // 32px
-    "10": "2.5rem",
-    // 40px
-    "12": "3rem",
-    // 48px
-    "16": "4rem",
-    // 64px
-    "20": "5rem",
-    // 80px
-    "24": "6rem",
-    // 96px
-    "32": "8rem"
-    // 128px
-  },
-  /**
-   * Typography scales
-   */
-  fontSize: {
-    "xs": "0.75rem",
-    // 12px
-    "sm": "0.875rem",
-    // 14px
-    "base": "1rem",
-    // 16px
-    "lg": "1.125rem",
-    // 18px
-    "xl": "1.25rem",
-    // 20px
-    "2xl": "1.5rem",
-    // 24px
-    "3xl": "1.875rem",
-    // 30px
-    "4xl": "2.25rem",
-    // 36px
-    "5xl": "3rem",
-    // 48px
-    "6xl": "3.75rem",
-    // 60px
-    "7xl": "4.5rem",
-    // 72px
-    "8xl": "6rem"
-    // 96px
-  },
-  fontWeight: {
-    light: "300",
-    normal: "400",
-    medium: "500",
-    semibold: "600",
-    bold: "700",
-    extrabold: "800",
-    black: "900"
-  },
-  lineHeight: {
-    none: "1",
-    tight: "1.25",
-    snug: "1.375",
-    normal: "1.5",
-    relaxed: "1.625",
-    loose: "2"
-  },
-  /**
-   * Border radius
-   */
-  borderRadius: {
-    none: "0",
-    sm: "0.125rem",
-    // 2px
-    DEFAULT: "0.25rem",
-    // 4px
-    md: "0.375rem",
-    // 6px
-    lg: "0.5rem",
-    // 8px
-    xl: "0.75rem",
-    // 12px
-    "2xl": "1rem",
-    // 16px
-    "3xl": "1.5rem",
-    // 24px
-    full: "9999px"
-  },
-  /**
-   * Motion durations (base values - themes can override)
-   */
-  duration: {
-    instant: "0ms",
-    fast: "150ms",
-    normal: "300ms",
-    slow: "500ms",
-    slower: "800ms"
-  },
-  /**
-   * Easing curves (base values - themes can override)
-   */
-  ease: {
-    linear: "linear",
-    in: "cubic-bezier(0.4, 0, 1, 1)",
-    out: "cubic-bezier(0, 0, 0.2, 1)",
-    inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
-  },
-  /**
-   * Z-index scale
-   */
-  zIndex: {
-    "auto": "auto",
-    "0": "0",
-    "10": "10",
-    "20": "20",
-    "30": "30",
-    "40": "40",
-    "50": "50",
-    dropdown: "1000",
-    sticky: "1020",
-    fixed: "1030",
-    modalBackdrop: "1040",
-    modal: "1050",
-    popover: "1060",
-    tooltip: "1070"
-  },
-  /**
-   * Focus ring configuration
-   */
-  focus: {
-    width: "2px",
-    offset: "2px",
-    style: "solid"
-  }
-};
-var spacing = {
-  xs: baseTokens.spacing["1"],
-  // 4px  — Tight internal padding
-  sm: baseTokens.spacing["2"],
-  // 8px  — Default gap
-  md: baseTokens.spacing["4"],
-  // 16px — Section padding
-  lg: baseTokens.spacing["6"],
-  // 24px — Card padding
-  xl: baseTokens.spacing["8"],
-  // 32px — Section margins
-  "2xl": baseTokens.spacing["12"],
-  // 48px — Page sections
-  "3xl": baseTokens.spacing["16"]
-  // 64px — Major divisions
-};
-var typography = {
-  fonts: {
-    sans: "var(--font-body)",
-    serif: "var(--font-heading)",
-    mono: "var(--font-mono)"
-  },
-  sizes: {
-    xs: baseTokens.fontSize.xs,
-    // 12px — Fine print
-    sm: baseTokens.fontSize.sm,
-    // 14px — Secondary text
-    base: baseTokens.fontSize.base,
-    // 16px — Body text
-    lg: baseTokens.fontSize.lg,
-    // 18px — Lead paragraphs
-    xl: baseTokens.fontSize.xl,
-    // 20px — Section headers
-    "2xl": baseTokens.fontSize["2xl"],
-    // 24px — Page headers
-    "3xl": baseTokens.fontSize["3xl"]
-    // 30px — Hero text
-  },
-  weights: {
-    normal: baseTokens.fontWeight.normal,
-    // 400
-    medium: baseTokens.fontWeight.medium,
-    // 500
-    semibold: baseTokens.fontWeight.semibold,
-    // 600
-    bold: baseTokens.fontWeight.bold
-    // 700
-  },
-  leading: {
-    tight: baseTokens.lineHeight.tight,
-    // 1.25 — Headings
-    normal: baseTokens.lineHeight.normal,
-    // 1.5  — Body
-    relaxed: baseTokens.lineHeight.relaxed
-    // 1.625 — Spacious reading
-  }
-};
-var motion = {
-  duration: baseTokens.duration,
-  easing: {
-    default: baseTokens.ease.out,
-    // Most transitions
-    spring: "cubic-bezier(0.16, 1, 0.3, 1)",
-    // Playful interactions
-    linear: baseTokens.ease.linear
-    // Progress indicators
-  }
-};
-
 // ../tokens/src/studio.ts
 var studioTokens = {
   light: {
@@ -932,6 +713,206 @@ var voltTokens = {
   }
 };
 
+// ../tokens/src/speedboat.ts
+var speedboatTokens = {
+  light: {
+    colors: {
+      // Backgrounds
+      background: "#FFFFFF",
+      backgroundSecondary: "#F8F8F8",
+      // grey50
+      backgroundTertiary: "#ECECEC",
+      // grey100
+      // Foregrounds
+      foreground: "#212121",
+      // grey900 — ContentPrimary
+      foregroundSecondary: "#5D5D5D",
+      // grey700 — ContentSecondary
+      foregroundTertiary: "#8891A7",
+      // grey500 — muted icons
+      // Brand
+      primary: "#346BEA",
+      // accent blue
+      primaryForeground: "#FFFFFF",
+      secondary: "#EBF0FD",
+      // blue100 — chip bg
+      secondaryForeground: "#1E49AA",
+      // blue600 — chip text
+      accent: "#346BEA",
+      // same as primary for Speedboat
+      accentForeground: "#FFFFFF",
+      // Borders
+      border: "#ECECEC",
+      // grey100 — BorderPrimary
+      borderSubtle: "#F8F8F8",
+      // grey50
+      // States
+      hover: "#F8F8F8",
+      // grey50
+      active: "#ECECEC",
+      // grey100
+      // Link hover states
+      linkHover: "#1E49AA",
+      // blue600
+      linkHoverForeground: "#FFFFFF",
+      // Semantic
+      success: "#2E7D32",
+      successForeground: "#FFFFFF",
+      warning: "#E65100",
+      warningForeground: "#FFFFFF",
+      error: "#C62828",
+      errorForeground: "#FFFFFF",
+      info: "#346BEA",
+      infoForeground: "#FFFFFF",
+      // Component-specific colors
+      card: "#FFFFFF",
+      cardForeground: "#212121",
+      popover: "#FFFFFF",
+      popoverForeground: "#212121",
+      muted: "#F8F8F8",
+      // grey50
+      mutedForeground: "#8891A7",
+      // grey500
+      destructive: "#C62828",
+      // error red
+      destructiveForeground: "#FFFFFF",
+      input: "#DFDFDF",
+      // grey200 — input borders
+      ring: "#346BEA",
+      // accent blue for focus rings
+      // Surface
+      surface: "#F8F8F8",
+      // grey50
+      // Glass effects
+      glass: "rgba(255, 255, 255, 0.85)",
+      glassBorder: "rgba(0, 0, 0, 0.08)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(4px)",
+        md: "blur(8px)",
+        lg: "blur(16px)",
+        xl: "blur(24px)"
+      },
+      shadow: {
+        sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        md: "0 2px 8px rgba(0, 0, 0, 0.08)",
+        lg: "0 4px 16px rgba(0, 0, 0, 0.10)",
+        xl: "0 8px 24px rgba(0, 0, 0, 0.12)",
+        "2xl": "0 16px 48px rgba(0, 0, 0, 0.16)"
+      }
+    }
+  },
+  dark: {
+    colors: {
+      // Backgrounds — derived dark palette
+      background: "#0F1117",
+      backgroundSecondary: "#1A1C25",
+      backgroundTertiary: "#252833",
+      // Foregrounds
+      foreground: "#F0F0F2",
+      foregroundSecondary: "#A0A3B1",
+      foregroundTertiary: "#6B6F80",
+      // Brand — keep the accent blue, slightly brighten for dark bg
+      primary: "#4A7FF7",
+      primaryForeground: "#FFFFFF",
+      secondary: "#1E2540",
+      secondaryForeground: "#A6C1FF",
+      // blue300
+      accent: "#4A7FF7",
+      accentForeground: "#FFFFFF",
+      // Borders
+      border: "#2E3140",
+      borderSubtle: "#1A1C25",
+      // States
+      hover: "#1A1C25",
+      active: "#252833",
+      // Link hover states
+      linkHover: "#A6C1FF",
+      // blue300 — lighter for dark mode
+      linkHoverForeground: "#0F1117",
+      // Semantic — slightly brighter versions for dark bg
+      success: "#4CAF50",
+      successForeground: "#FFFFFF",
+      warning: "#FF8A50",
+      warningForeground: "#FFFFFF",
+      error: "#EF5350",
+      errorForeground: "#FFFFFF",
+      info: "#4A7FF7",
+      infoForeground: "#FFFFFF",
+      // Component-specific colors
+      card: "#1A1C25",
+      cardForeground: "#F0F0F2",
+      popover: "#1A1C25",
+      popoverForeground: "#F0F0F2",
+      muted: "#252833",
+      mutedForeground: "#6B6F80",
+      destructive: "#EF5350",
+      destructiveForeground: "#FFFFFF",
+      input: "#2E3140",
+      ring: "#4A7FF7",
+      // Surface
+      surface: "#1A1C25",
+      // Glass effects
+      glass: "rgba(15, 17, 23, 0.85)",
+      glassBorder: "rgba(255, 255, 255, 0.08)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(4px)",
+        md: "blur(8px)",
+        lg: "blur(16px)",
+        xl: "blur(24px)"
+      },
+      shadow: {
+        sm: "0 1px 2px rgba(0, 0, 0, 0.20)",
+        md: "0 2px 8px rgba(0, 0, 0, 0.30)",
+        lg: "0 4px 16px rgba(0, 0, 0, 0.35)",
+        xl: "0 8px 24px rgba(0, 0, 0, 0.40)",
+        "2xl": "0 16px 48px rgba(0, 0, 0, 0.50)"
+      }
+    }
+  },
+  /**
+   * Motion personality for Speedboat theme
+   * Professional and snappy — slightly faster than Studio
+   */
+  motion: {
+    getDuration: (intensity) => {
+      if (intensity === 0) return "0ms";
+      const ms = 120 + (intensity - 1) * 35;
+      return `${ms}ms`;
+    },
+    ease: {
+      default: "cubic-bezier(0.4, 0, 0.2, 1)",
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      spring: "cubic-bezier(0.16, 1, 0.3, 1)"
+    }
+  },
+  /**
+   * Typography for Speedboat theme
+   * Montserrat headings + Roboto body — Moloco brand fonts
+   */
+  typography: {
+    heading: {
+      fontFamily: "var(--font-montserrat)",
+      fontWeight: "700",
+      letterSpacing: "-0.01em"
+    },
+    body: {
+      fontFamily: "var(--font-roboto)",
+      fontWeight: "400",
+      letterSpacing: "0"
+    },
+    mono: {
+      fontFamily: "var(--font-geist-mono)",
+      fontWeight: "400",
+      letterSpacing: "0"
+    }
+  }
+};
+
 // ../tokens/src/typography.ts
 var fontFamilies = {
   studio: {
@@ -975,6 +956,19 @@ var fontFamilies = {
       sans: "All sans-serif needs",
       mono: "Code blocks, technical content"
     }
+  },
+  speedboat: {
+    heading: "Montserrat",
+    body: "Roboto",
+    sans: "Roboto",
+    mono: "Fira Code",
+    description: "Moloco brand typography \u2014 Montserrat headings with Roboto body",
+    usage: {
+      heading: "Brand headings, section titles",
+      body: "UI text, data labels, form content",
+      sans: "All sans-serif needs",
+      mono: "Code blocks, technical content"
+    }
   }
 };
 var fontSizes = {
@@ -1532,6 +1526,9 @@ function computeDerivedTokens(sourceToken, sourceValue, mode) {
   return derived;
 }
 
+// ../tokens/src/index.ts
+var PUBLIC_THEME_NAMES = ["studio", "terra", "volt"];
+
 // src/lib/colors.ts
 var colorTokens = {
   // Background colors
@@ -2091,7 +2088,7 @@ var useCustomizer = create()(
 
 // src/hooks/useMotionPreference.ts
 function useMotionPreference() {
-  const { motion: motion7, prefersReducedMotion, setPrefersReducedMotion } = useCustomizer();
+  const { motion: motion6, prefersReducedMotion, setPrefersReducedMotion } = useCustomizer();
   useEffect(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -2103,8 +2100,8 @@ function useMotionPreference() {
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, [setPrefersReducedMotion]);
   return {
-    scale: motion7,
-    shouldAnimate: motion7 > 0 && !prefersReducedMotion,
+    scale: motion6,
+    shouldAnimate: motion6 > 0 && !prefersReducedMotion,
     prefersReducedMotion
   };
 }
@@ -2133,7 +2130,7 @@ function Magnetic({ children, strength = 0.2, range = 100, className }) {
     position.y.set(0);
   };
   return /* @__PURE__ */ jsx5(
-    motion2.div,
+    motion.div,
     {
       ref,
       onMouseMove: handleMouseMove,
@@ -2158,7 +2155,7 @@ var Checkbox = ({
   {
     ref,
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-xs border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     ),
     ...props,
@@ -2180,7 +2177,7 @@ import { cva as cva3 } from "class-variance-authority";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var labelVariants = cva3(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "block mb-1.5 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 var Label = ({
   ref,
@@ -2201,6 +2198,7 @@ var Input = ({
   ref,
   className,
   type,
+  style,
   ...props
 }) => {
   return /* @__PURE__ */ jsx8(
@@ -2208,9 +2206,21 @@ var Input = ({
     {
       type,
       className: cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
+      style: {
+        height: "2.25rem",
+        width: "100%",
+        border: "1px solid var(--color-input, #DFDFDF)",
+        borderRadius: "var(--radius-md, 0.375rem)",
+        padding: "0.25rem 0.75rem",
+        fontSize: "var(--text-sm, 0.875rem)",
+        backgroundColor: "transparent",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        outline: "none",
+        ...style
+      },
       ref,
       ...props
     }
@@ -2251,7 +2261,7 @@ function ColorPicker({
     onChange(newColor);
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    label && /* @__PURE__ */ jsx9("div", { className: "flex items-baseline justify-between", children: /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium", children: [
+    label && /* @__PURE__ */ jsx9("div", { className: "flex items-baseline justify-between", children: /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium mb-0", children: [
       label,
       optional && /* @__PURE__ */ jsx9("span", { className: "text-xs text-muted-foreground ml-1", children: "(optional)" })
     ] }) }),
@@ -2321,6 +2331,7 @@ function DialogClose({
 }
 function DialogOverlay({
   className,
+  style,
   ...props
 }) {
   return /* @__PURE__ */ jsx10(
@@ -2331,6 +2342,11 @@ function DialogOverlay({
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className
       ),
+      style: {
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        zIndex: 50,
+        ...style
+      },
       ...props
     }
   );
@@ -2339,6 +2355,7 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
+  style,
   ...props
 }) {
   return /* @__PURE__ */ jsxs2(DialogPortal, { "data-slot": "dialog-portal", children: [
@@ -2351,6 +2368,14 @@ function DialogContent({
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
           className
         ),
+        style: {
+          backgroundColor: "var(--color-background, #ffffff)",
+          border: "1px solid var(--color-border, #d4d4d4)",
+          borderRadius: "0.75rem",
+          boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+          zIndex: 50,
+          ...style
+        },
         ...props,
         children: [
           children,
@@ -2358,7 +2383,7 @@ function DialogContent({
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
                 /* @__PURE__ */ jsx10(X, {}),
                 /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Close" })
@@ -2517,7 +2542,7 @@ var CommandItem = ({
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[disabled=true]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[disabled=true]:opacity-50",
       className
     ),
     ...props
@@ -2551,6 +2576,7 @@ var PopoverContent = ({
   className,
   align = "center",
   sideOffset = 4,
+  style,
   ...props
 }) => /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
   PopoverPrimitive.Content,
@@ -2562,6 +2588,15 @@ var PopoverContent = ({
       "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
+    style: {
+      backgroundColor: "var(--color-popover, #ffffff)",
+      color: "var(--color-popover-foreground, #0a0a0a)",
+      border: "1px solid var(--color-border, #d4d4d4)",
+      borderRadius: "var(--radius, 0.5rem)",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      zIndex: 50,
+      ...style
+    },
     ...props
   }
 ) });
@@ -3301,12 +3336,12 @@ var SearchBar = ({
         onKeyDown: handleKeyDown,
         placeholder,
         variant: "outlined",
-        className: "pl-10 !bg-[var(--color-surface)] !border !border-[var(--color-border)]",
+        className: "pl-10 bg-[var(--color-surface)]! border! border-[var(--color-border)]!",
         style: { paddingRight: showClear || showShortcut ? "3rem" : void 0 },
         ...props
       }
     ),
-    showShortcut && /* @__PURE__ */ jsx20("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx20("kbd", { className: "px-2 py-0.5 text-xs font-mono text-[var(--color-text-primary)] bg-[var(--color-background)] border border-[var(--color-border)] rounded shadow-sm", children: shortcut }) }),
+    showShortcut && /* @__PURE__ */ jsx20("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx20("kbd", { className: "px-2 py-0.5 text-xs font-mono text-[var(--color-text-primary)] bg-[var(--color-background)] border border-[var(--color-border)] rounded shadow-xs", children: shortcut }) }),
     showClear && /* @__PURE__ */ jsx20(
       "button",
       {
@@ -3365,22 +3400,47 @@ var SelectTrigger = ({
   ref,
   className,
   children,
+  style,
+  label,
+  labelClassName,
   ...props
-}) => /* @__PURE__ */ jsxs10(
-  Trigger3,
-  {
-    ref,
-    className: cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx21(SelectIcon, { asChild: true, children: /* @__PURE__ */ jsx21(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-);
+}) => {
+  const trigger = /* @__PURE__ */ jsxs10(
+    Trigger3,
+    {
+      ref,
+      className: cn(
+        "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className
+      ),
+      style: {
+        height: "2.25rem",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        border: "1px solid var(--color-input, #DFDFDF)",
+        borderRadius: "var(--radius-md, 0.375rem)",
+        padding: "0.5rem 0.75rem",
+        fontSize: "var(--text-sm, 0.875rem)",
+        backgroundColor: "transparent",
+        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        outline: "none",
+        ...style
+      },
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx21(SelectIcon, { asChild: true, children: /* @__PURE__ */ jsx21(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      ]
+    }
+  );
+  if (!label) return trigger;
+  return /* @__PURE__ */ jsxs10("div", { children: [
+    /* @__PURE__ */ jsx21(Label, { className: cn("text-xs font-medium text-muted-foreground", labelClassName), children: label }),
+    trigger
+  ] });
+};
 var SelectScrollUpButton = ({
   ref,
   className,
@@ -3418,8 +3478,9 @@ var SelectContent = ({
   className,
   children,
   position = "popper",
+  style,
   ...props
-}) => /* @__PURE__ */ jsx21(Portal3, { children: /* @__PURE__ */ jsxs10(
+}) => /* @__PURE__ */ jsx21(Portal3, { children: /* @__PURE__ */ jsx21(
   Content3,
   {
     ref,
@@ -3428,22 +3489,41 @@ var SelectContent = ({
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
+    style,
     position,
     ...props,
-    children: [
-      /* @__PURE__ */ jsx21(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx21(
-        Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+    children: /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        style: {
+          backgroundColor: "var(--color-popover, #ffffff)",
+          color: "var(--color-popover-foreground, #0a0a0a)",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: "var(--color-border, #d4d4d4)",
+          borderRadius: "var(--radius, 0.5rem)",
+          boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx21(SelectScrollUpButton, {}),
+          /* @__PURE__ */ jsx21(
+            Viewport,
+            {
+              className: cn(
+                "p-1",
+                position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+              ),
+              style: {
+                padding: "0.25rem"
+              },
+              children
+            }
           ),
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx21(SelectScrollDownButton, {})
-    ]
+          /* @__PURE__ */ jsx21(SelectScrollDownButton, {})
+        ]
+      }
+    )
   }
 ) });
 var SelectLabel = ({
@@ -3468,12 +3548,39 @@ var SelectItem = ({
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
+    style: {
+      position: "relative",
+      display: "flex",
+      width: "100%",
+      cursor: "default",
+      userSelect: "none",
+      alignItems: "center",
+      borderRadius: "var(--radius-sm, 0.125rem)",
+      padding: "0.375rem 2rem 0.375rem 0.5rem",
+      fontSize: "var(--text-sm, 0.875rem)",
+      outline: "none"
+    },
     ...props,
     children: [
-      /* @__PURE__ */ jsx21("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx21(ItemIndicator, { children: /* @__PURE__ */ jsx21(Check3, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx21(
+        "span",
+        {
+          className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center",
+          style: {
+            position: "absolute",
+            right: "0.5rem",
+            display: "flex",
+            height: "0.875rem",
+            width: "0.875rem",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsx21(ItemIndicator, { children: /* @__PURE__ */ jsx21(Check3, { className: "h-4 w-4", style: { height: "1rem", width: "1rem" } }) })
+        }
+      ),
       /* @__PURE__ */ jsx21(ItemText, { children })
     ]
   }
@@ -3509,7 +3616,7 @@ var Slider = ({
     ...props,
     children: [
       /* @__PURE__ */ jsx22(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx22(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ jsx22(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsx22(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
     ]
   }
 );
@@ -3525,7 +3632,7 @@ var Switch = ({
   SwitchPrimitives.Root,
   {
     className: cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     ),
     ...props,
@@ -3763,7 +3870,7 @@ var ThemeSwitcher = ({
                   className: `
                     flex-1 py-2 px-3 rounded-md
                     transition-all duration-200
-                    ${mode === "light" ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-sm" : "bg-[var(--color-background)] border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-hover)]"}
+                    ${mode === "light" ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-xs" : "bg-[var(--color-background)] border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-hover)]"}
                   `,
                   children: "Light"
                 }
@@ -3775,7 +3882,7 @@ var ThemeSwitcher = ({
                   className: `
                     flex-1 py-2 px-3 rounded-md
                     transition-all duration-200
-                    ${mode === "dark" ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-sm" : "bg-[var(--color-background)] border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-hover)]"}
+                    ${mode === "dark" ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-xs" : "bg-[var(--color-background)] border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-hover)]"}
                   `,
                   children: "Dark"
                 }
@@ -4091,7 +4198,7 @@ function FileUpload({
                 e.stopPropagation();
                 removeFile(index);
               },
-              className: "shrink-0 rounded-sm p-1 text-foreground-secondary hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              className: "shrink-0 rounded-xs p-1 text-foreground-secondary hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               "aria-label": `Remove ${file.name}`,
               children: /* @__PURE__ */ jsx27(XIcon, {})
             }
@@ -4337,7 +4444,7 @@ var MenubarTrigger = ({
   MenubarPrimitive.Trigger,
   {
     ref,
-    className: cn("flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent data-[state=open]:bg-accent", className),
+    className: cn("flex cursor-default select-none items-center rounded-xs px-3 py-1 text-sm font-medium outline-none focus:bg-accent data-[state=open]:bg-accent", className),
     ...props
   }
 );
@@ -4347,6 +4454,7 @@ var MenubarContent = ({
   align = "start",
   alignOffset = -4,
   sideOffset = 8,
+  style,
   ...props
 }) => /* @__PURE__ */ jsx30(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx30(
   MenubarPrimitive.Content,
@@ -4356,6 +4464,16 @@ var MenubarContent = ({
     alignOffset,
     sideOffset,
     className: cn("z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", className),
+    style: {
+      backgroundColor: "var(--color-popover, #ffffff)",
+      color: "var(--color-popover-foreground, #0a0a0a)",
+      border: "1px solid var(--color-border, #d4d4d4)",
+      borderRadius: "var(--radius, 0.5rem)",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      zIndex: 50,
+      overflow: "hidden",
+      ...style
+    },
     ...props
   }
 ) });
@@ -4367,7 +4485,7 @@ var MenubarItem = ({
   MenubarPrimitive.Item,
   {
     ref,
-    className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+    className: cn("relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
     ...props
   }
 );
@@ -4395,7 +4513,7 @@ var NavLink = ({
   const variants = {
     pill: `px-3 py-2 rounded-lg
          ${active ? "bg-[var(--color-primary)]/10 text-[var(--color-primary)]" : "text-[var(--color-text-secondary)] hover:bg-[var(--color-hover)] hover:text-[var(--color-text-primary)]"}`,
-    minimal: `relative pb-1 rounded-sm
+    minimal: `relative pb-1 rounded-xs
            ${active ? "text-[var(--color-text-primary)] font-medium after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-[var(--color-primary)] after:rounded-full" : "text-[var(--color-text-secondary)] hover:text-[var(--color-primary)]"}`
   };
   return /* @__PURE__ */ jsxs17(
@@ -4501,7 +4619,7 @@ var NavigationMenuViewport = ({
 }) => /* @__PURE__ */ jsx32("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx32(
   NavigationMenuPrimitive.Viewport,
   {
-    className: cn("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", className),
+    className: cn("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", className),
     ref,
     ...props
   }
@@ -4693,7 +4811,7 @@ var TabsTrigger = ({
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     ),
     ...props
@@ -4763,6 +4881,7 @@ var AlertDialogPortal = AlertDialogPrimitive.Portal;
 var AlertDialogOverlay = ({
   ref,
   className,
+  style,
   ...props
 }) => /* @__PURE__ */ jsx37(
   AlertDialogPrimitive.Overlay,
@@ -4771,6 +4890,11 @@ var AlertDialogOverlay = ({
       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
+    style: {
+      backgroundColor: "rgba(0, 0, 0, 0.8)",
+      zIndex: 50,
+      ...style
+    },
     ...props,
     ref
   }
@@ -4778,6 +4902,7 @@ var AlertDialogOverlay = ({
 var AlertDialogContent = ({
   ref,
   className,
+  style,
   ...props
 }) => /* @__PURE__ */ jsxs21(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx37(AlertDialogOverlay, {}),
@@ -4789,6 +4914,14 @@ var AlertDialogContent = ({
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       ),
+      style: {
+        backgroundColor: "var(--color-background, #ffffff)",
+        border: "1px solid var(--color-border, #d4d4d4)",
+        borderRadius: "0.75rem",
+        boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+        zIndex: 50,
+        ...style
+      },
       ...props
     }
   )
@@ -4895,7 +5028,7 @@ var ContextMenuSubTrigger = ({
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
       className
     ),
@@ -4909,6 +5042,7 @@ var ContextMenuSubTrigger = ({
 var ContextMenuSubContent = ({
   ref,
   className,
+  style,
   ...props
 }) => /* @__PURE__ */ jsx38(
   ContextMenuPrimitive.SubContent,
@@ -4918,12 +5052,23 @@ var ContextMenuSubContent = ({
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
+    style: {
+      backgroundColor: "var(--color-popover, #ffffff)",
+      color: "var(--color-popover-foreground, #0a0a0a)",
+      border: "1px solid var(--color-border, #d4d4d4)",
+      borderRadius: "var(--radius, 0.5rem)",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      zIndex: 50,
+      overflow: "hidden",
+      ...style
+    },
     ...props
   }
 );
 var ContextMenuContent = ({
   ref,
   className,
+  style,
   ...props
 }) => /* @__PURE__ */ jsx38(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx38(
   ContextMenuPrimitive.Content,
@@ -4933,6 +5078,16 @@ var ContextMenuContent = ({
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
+    style: {
+      backgroundColor: "var(--color-popover, #ffffff)",
+      color: "var(--color-popover-foreground, #0a0a0a)",
+      border: "1px solid var(--color-border, #d4d4d4)",
+      borderRadius: "var(--radius, 0.5rem)",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      zIndex: 50,
+      overflow: "hidden",
+      ...style
+    },
     ...props
   }
 ) });
@@ -4946,7 +5101,7 @@ var ContextMenuItem = ({
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     ),
@@ -4964,7 +5119,7 @@ var ContextMenuCheckboxItem = ({
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
@@ -4985,7 +5140,7 @@ var ContextMenuRadioItem = ({
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -5051,12 +5206,18 @@ var DrawerClose = DrawerPrimitive.Close;
 var DrawerOverlay = ({
   ref,
   className,
+  style,
   ...props
 }) => /* @__PURE__ */ jsx39(
   DrawerPrimitive.Overlay,
   {
     ref,
     className: cn("fixed inset-0 z-50 bg-black/80", className),
+    style: {
+      backgroundColor: "rgba(0, 0, 0, 0.8)",
+      zIndex: 50,
+      ...style
+    },
     ...props
   }
 );
@@ -5064,6 +5225,7 @@ var DrawerContent = ({
   ref,
   className,
   children,
+  style,
   ...props
 }) => /* @__PURE__ */ jsxs23(DrawerPortal, { children: [
   /* @__PURE__ */ jsx39(DrawerOverlay, {}),
@@ -5075,6 +5237,13 @@ var DrawerContent = ({
         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
         className
       ),
+      style: {
+        backgroundColor: "var(--color-background, #ffffff)",
+        border: "1px solid var(--color-border, #d4d4d4)",
+        borderRadius: "10px 10px 0 0",
+        zIndex: 50,
+        ...style
+      },
       ...props,
       children: [
         /* @__PURE__ */ jsx39("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
@@ -5520,7 +5689,7 @@ var DropdownMenuSubTrigger = ({
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-primary focus:text-primary-foreground data-[state=open]:bg-primary data-[state=open]:text-primary-foreground",
+      "flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none focus:bg-primary focus:text-primary-foreground data-[state=open]:bg-primary data-[state=open]:text-primary-foreground",
       inset && "pl-8",
       className
     ),
@@ -5534,6 +5703,7 @@ var DropdownMenuSubTrigger = ({
 var DropdownMenuSubContent = ({
   ref,
   className,
+  style,
   ...props
 }) => /* @__PURE__ */ jsx41(
   DropdownMenuPrimitive.SubContent,
@@ -5543,6 +5713,16 @@ var DropdownMenuSubContent = ({
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
+    style: {
+      backgroundColor: "var(--color-popover, #ffffff)",
+      color: "var(--color-popover-foreground, #0a0a0a)",
+      border: "1px solid var(--color-border, #d4d4d4)",
+      borderRadius: "var(--radius, 0.5rem)",
+      boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+      zIndex: 50,
+      overflow: "hidden",
+      ...style
+    },
     ...props
   }
 );
@@ -5550,6 +5730,7 @@ var DropdownMenuContent = ({
   ref,
   className,
   sideOffset = 4,
+  style,
   ...props
 }) => /* @__PURE__ */ jsx41(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx41(
   DropdownMenuPrimitive.Content,
@@ -5560,6 +5741,16 @@ var DropdownMenuContent = ({
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
+    style: {
+      backgroundColor: "var(--color-popover, #ffffff)",
+      color: "var(--color-popover-foreground, #0a0a0a)",
+      border: "1px solid var(--color-border, #d4d4d4)",
+      borderRadius: "var(--radius, 0.5rem)",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      zIndex: 50,
+      overflow: "hidden",
+      ...style
+    },
     ...props
   }
 ) });
@@ -5573,7 +5764,7 @@ var DropdownMenuItem = ({
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     ),
@@ -5591,7 +5782,7 @@ var DropdownMenuCheckboxItem = ({
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
@@ -5612,7 +5803,7 @@ var DropdownMenuRadioItem = ({
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-primary focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -5744,7 +5935,7 @@ var Modal = ({
     {
       className: `
         fixed inset-0 z-[9999] flex items-center justify-center p-4
-        bg-black/50 backdrop-blur-sm
+        bg-black/50 backdrop-blur-xs
         ${shouldAnimate ? "animate-fade-in" : ""}
       `,
       style: { animationDuration },
@@ -5842,6 +6033,7 @@ var SheetPortal = SheetPrimitive.Portal;
 var SheetOverlay = ({
   ref,
   className,
+  style,
   ...props
 }) => /* @__PURE__ */ jsx44(
   SheetPrimitive.Overlay,
@@ -5850,6 +6042,11 @@ var SheetOverlay = ({
       "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
+    style: {
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      zIndex: 50,
+      ...style
+    },
     ...props,
     ref
   }
@@ -5875,6 +6072,7 @@ var SheetContent = ({
   side = "right",
   className,
   children,
+  style,
   ...props
 }) => /* @__PURE__ */ jsxs27(SheetPortal, { children: [
   /* @__PURE__ */ jsx44(SheetOverlay, {}),
@@ -5883,10 +6081,16 @@ var SheetContent = ({
     {
       ref,
       className: cn(sheetVariants({ side }), className),
+      style: {
+        backgroundColor: "var(--color-background, #ffffff)",
+        boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+        zIndex: 50,
+        ...style
+      },
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs27(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+        /* @__PURE__ */ jsxs27(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
           /* @__PURE__ */ jsx44(X2, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx44("span", { className: "sr-only", children: "Close" })
         ] })
@@ -6166,7 +6370,7 @@ function NotificationCenter({
                     /* @__PURE__ */ jsx46(BellIcon, { className: "text-foreground-secondary mb-2 opacity-40" }),
                     /* @__PURE__ */ jsx46("p", { className: "text-sm text-foreground-secondary", children: emptyMessage })
                   ] }) : groupOrder.filter((group) => grouped[group]?.length > 0).map((group) => /* @__PURE__ */ jsxs28("div", { children: [
-                    /* @__PURE__ */ jsx46("div", { className: "sticky top-0 bg-popover/95 backdrop-blur-sm px-4 py-1.5 border-b border-border/50", children: /* @__PURE__ */ jsx46("span", { className: "text-[11px] font-medium uppercase tracking-wider text-foreground-secondary", children: group }) }),
+                    /* @__PURE__ */ jsx46("div", { className: "sticky top-0 bg-popover/95 backdrop-blur-xs px-4 py-1.5 border-b border-border/50", children: /* @__PURE__ */ jsx46("span", { className: "text-[11px] font-medium uppercase tracking-wider text-foreground-secondary", children: group }) }),
                     grouped[group].map((notification) => /* @__PURE__ */ jsxs28(
                       "div",
                       {
@@ -6218,7 +6422,7 @@ function NotificationCenter({
                                   e.stopPropagation();
                                   onMarkRead(notification.id);
                                 },
-                                className: "rounded-sm p-1 text-foreground-secondary hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                                className: "rounded-xs p-1 text-foreground-secondary hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                                 "aria-label": `Mark "${notification.title}" as read`,
                                 children: /* @__PURE__ */ jsx46(CheckIcon, {})
                               }
@@ -6231,7 +6435,7 @@ function NotificationCenter({
                                   e.stopPropagation();
                                   onDismiss(notification.id);
                                 },
-                                className: "rounded-sm p-1 text-foreground-secondary hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                                className: "rounded-xs p-1 text-foreground-secondary hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                                 "aria-label": `Dismiss "${notification.title}"`,
                                 children: /* @__PURE__ */ jsx46(XIcon2, {})
                               }
@@ -6434,7 +6638,7 @@ function Skeleton({ className, variant = "default", width, height, style, ...pro
     default: "rounded-md",
     circular: "rounded-full",
     rectangular: "rounded-none",
-    text: "rounded-sm h-4"
+    text: "rounded-xs h-4"
   };
   return /* @__PURE__ */ jsx50(
     "div",
@@ -7160,14 +7364,45 @@ var badgeVariants = cva10(
     }
   }
 );
-function Badge({ className, variant, size, dot, children, ...props }) {
-  return /* @__PURE__ */ jsxs35("div", { className: cn(badgeVariants({ variant, size }), className), ...props, children: [
-    dot && /* @__PURE__ */ jsx58("span", { className: cn(
-      "mr-1.5 rounded-full bg-current animate-pulse",
-      size === "sm" ? "w-1.5 h-1.5" : size === "lg" ? "w-2.5 h-2.5" : "w-2 h-2"
-    ), "aria-hidden": "true" }),
-    children
-  ] });
+function Badge({ className, variant, size, dot, children, style, ...props }) {
+  const sizeStyles = {
+    sm: { padding: "0.125rem 0.5rem", fontSize: "var(--text-xs, 0.75rem)" },
+    md: { padding: "0.25rem 0.625rem", fontSize: "var(--text-sm, 0.875rem)" },
+    lg: { padding: "0.375rem 0.75rem", fontSize: "1rem" }
+  };
+  const variantStyles = {
+    default: { backgroundColor: "var(--color-primary, #346BEA)", color: "var(--color-primary-foreground, #ffffff)", borderColor: "transparent" },
+    secondary: { backgroundColor: "var(--color-secondary, #EBF0FD)", color: "var(--color-secondary-foreground, #1E49AA)", borderColor: "transparent" },
+    destructive: { backgroundColor: "var(--color-destructive, #C62828)", color: "var(--color-destructive-foreground, #ffffff)", borderColor: "transparent" },
+    outline: { color: "var(--color-foreground, #212121)" },
+    success: { backgroundColor: "var(--color-success, #2E7D32)", color: "var(--color-success-foreground, #ffffff)", borderColor: "transparent" },
+    warning: { backgroundColor: "var(--color-warning, #E65100)", color: "var(--color-warning-foreground, #ffffff)", borderColor: "transparent" },
+    error: { backgroundColor: "var(--color-error, #C62828)", color: "var(--color-error-foreground, #ffffff)", borderColor: "transparent" },
+    info: { backgroundColor: "var(--color-info, #346BEA)", color: "var(--color-info-foreground, #ffffff)", borderColor: "transparent" }
+  };
+  return /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      className: cn(badgeVariants({ variant, size }), className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        borderRadius: "9999px",
+        fontWeight: 600,
+        ...sizeStyles[size || "md"],
+        ...variantStyles[variant || "default"],
+        ...style
+      },
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx58("span", { className: cn(
+          "mr-1.5 rounded-full bg-current animate-pulse",
+          size === "sm" ? "w-1.5 h-1.5" : size === "lg" ? "w-2.5 h-2.5" : "w-2 h-2"
+        ), "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
 }
 
 // src/components/data-display/Brand.tsx
@@ -7283,7 +7518,7 @@ Calendar.displayName = "Calendar";
 import { cva as cva11 } from "class-variance-authority";
 import { jsx as jsx61 } from "react/jsx-runtime";
 var cardVariants = cva11(
-  "rounded-2xl border bg-surface text-foreground shadow-sm",
+  "rounded-2xl border bg-surface text-foreground shadow-xs",
   {
     variants: {
       hoverEffect: {
@@ -8066,6 +8301,11 @@ var Text = ({
     secondary: "text-[var(--color-text-secondary)]",
     muted: "text-[var(--color-text-muted)]"
   };
+  const variantInlineStyles = {
+    primary: { color: "var(--color-text-primary, #212121)" },
+    secondary: { color: "var(--color-text-secondary, #5D5D5D)" },
+    muted: { color: "var(--color-text-muted, #8891A7)" }
+  };
   const sizeStyles = {
     xs: "text-xs",
     // 12px
@@ -8078,24 +8318,42 @@ var Text = ({
     xl: "text-xl"
     // 20px
   };
+  const sizeInlineStyles = {
+    xs: { fontSize: "0.75rem", lineHeight: String(1 / 0.75) },
+    sm: { fontSize: "0.875rem", lineHeight: String(1.25 / 0.875) },
+    base: { fontSize: "1rem", lineHeight: "1.5" },
+    lg: { fontSize: "1.125rem", lineHeight: String(1.75 / 1.125) },
+    xl: { fontSize: "1.25rem", lineHeight: String(1.75 / 1.25) }
+  };
   const weightStyles = {
     normal: "font-normal",
     medium: "font-medium",
     semibold: "font-semibold",
     bold: "font-bold"
   };
+  const weightInlineStyles = {
+    normal: { fontWeight: 400 },
+    medium: { fontWeight: 500 },
+    semibold: { fontWeight: 600 },
+    bold: { fontWeight: 700 }
+  };
   return React17.createElement(
     Component,
     {
       ref,
-      className: `${variantStyles[variant]} ${sizeStyles[size]} ${weightStyles[weight]} ${className}`
+      className: `${variantStyles[variant]} ${sizeStyles[size]} ${weightStyles[weight]} ${className}`,
+      style: {
+        ...variantInlineStyles[variant],
+        ...sizeInlineStyles[size],
+        ...weightInlineStyles[weight]
+      }
     },
     children
   );
 };
 
 // src/components/data-display/VariableWeightText.tsx
-import { motion as motion3 } from "framer-motion";
+import { motion as motion2 } from "framer-motion";
 import { jsx as jsx68 } from "react/jsx-runtime";
 var VariableWeightText = ({
   children,
@@ -8132,7 +8390,7 @@ var VariableWeightText = ({
     );
   }
   return /* @__PURE__ */ jsx68(
-    motion3.div,
+    motion2.div,
     {
       initial: {
         fontVariationSettings: `'wght' ${minWeight}`
@@ -8166,7 +8424,7 @@ var VariableWeightText = ({
 };
 
 // src/components/data-display/Typewriter.tsx
-import { motion as motion4 } from "framer-motion";
+import { motion as motion3 } from "framer-motion";
 import { useEffect as useEffect8, useState as useState13 } from "react";
 import { jsx as jsx69, jsxs as jsxs40 } from "react/jsx-runtime";
 function Typewriter({
@@ -8234,7 +8492,7 @@ function Typewriter({
   return /* @__PURE__ */ jsxs40(Component, { className: cn("inline", className), children: [
     /* @__PURE__ */ jsx69("span", { children: displayedText }),
     showCursor && /* @__PURE__ */ jsx69(
-      motion4.span,
+      motion3.span,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
@@ -8250,7 +8508,7 @@ function Typewriter({
 import { cva as cva12 } from "class-variance-authority";
 import { jsx as jsx70, jsxs as jsxs41 } from "react/jsx-runtime";
 var statCardVariants = cva12(
-  "rounded-2xl border bg-surface text-foreground shadow-sm p-6",
+  "rounded-2xl border bg-surface text-foreground shadow-xs p-6",
   {
     variants: {
       variant: {
@@ -9221,14 +9479,20 @@ var Container = ({
 
 // src/components/layout/CustomizerPanel.tsx
 import React21 from "react";
-import { SlidersHorizontal, Sun, Moon, SunMoon, Building2, Leaf, Zap, X as X3, Palette } from "lucide-react";
+import { SlidersHorizontal, Sun, Moon, SunMoon, Building2, Leaf, Zap, Rocket, X as X3, Palette } from "lucide-react";
 import { jsx as jsx77, jsxs as jsxs47 } from "react/jsx-runtime";
-var CustomizerPanel = ({ mode = "full", showMotionIntensity = false }) => {
+var allThemeOptions = [
+  { id: "studio", label: "Studio", icon: /* @__PURE__ */ jsx77(Building2, { className: "w-4 h-4" }) },
+  { id: "terra", label: "Terra", icon: /* @__PURE__ */ jsx77(Leaf, { className: "w-4 h-4" }) },
+  { id: "volt", label: "Volt", icon: /* @__PURE__ */ jsx77(Zap, { className: "w-4 h-4" }) },
+  { id: "speedboat", label: "Speedboat", icon: /* @__PURE__ */ jsx77(Rocket, { className: "w-4 h-4" }) }
+];
+var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) => {
   const [mounted, setMounted] = React21.useState(false);
   const [isOpen, setIsOpen] = React21.useState(false);
   const panelRef = React21.useRef(null);
   const {
-    motion: motion7,
+    motion: motion6,
     setMotion,
     customizationMode,
     setCustomizationMode,
@@ -9237,7 +9501,10 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false }) => {
     resetCustomColors
   } = useCustomizer();
   const { theme, mode: colorMode, setTheme, setMode } = useThemeStore();
+  const visibleThemes = themes ? allThemeOptions.filter((t) => themes.includes(t.id)) : allThemeOptions.filter((t) => PUBLIC_THEME_NAMES.includes(t.id));
+  const showThemeSelector = visibleThemes.length > 1;
   const getDefaultPrimary = React21.useCallback((t, m) => {
+    if (t === "speedboat") return m === "dark" ? speedboatTokens.dark.colors.primary : speedboatTokens.light.colors.primary;
     if (t === "volt") return m === "dark" ? voltTokens.dark.colors.primary : voltTokens.light.colors.primary;
     if (t === "terra") return m === "dark" ? terraTokens.dark.colors.primary : terraTokens.light.colors.primary;
     return m === "dark" ? studioTokens.dark.colors.primary : studioTokens.light.colors.primary;
@@ -9346,7 +9613,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false }) => {
           mode === "full" && showMotionIntensity && /* @__PURE__ */ jsxs47("div", { children: [
             /* @__PURE__ */ jsxs47("div", { className: "flex justify-between mb-2", children: [
               /* @__PURE__ */ jsx77("label", { className: "text-sm font-medium opacity-80", children: "Motion Intensity" }),
-              /* @__PURE__ */ jsx77("span", { className: "text-sm opacity-60", children: motion7 })
+              /* @__PURE__ */ jsx77("span", { className: "text-sm opacity-60", children: motion6 })
             ] }),
             /* @__PURE__ */ jsx77(
               "input",
@@ -9354,23 +9621,19 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false }) => {
                 type: "range",
                 min: "0",
                 max: "10",
-                value: motion7,
+                value: motion6,
                 onChange: (e) => setMotion(Number(e.target.value)),
                 "aria-label": "Motion intensity",
                 "aria-valuemin": 0,
                 "aria-valuemax": 10,
-                "aria-valuenow": motion7,
+                "aria-valuenow": motion6,
                 className: "w-full h-2 bg-[var(--color-surface)] rounded-lg appearance-none cursor-pointer accent-primary"
               }
             )
           ] }),
-          mode === "full" && /* @__PURE__ */ jsxs47("div", { children: [
+          mode === "full" && showThemeSelector && /* @__PURE__ */ jsxs47("div", { children: [
             /* @__PURE__ */ jsx77("label", { className: "block text-sm font-medium opacity-80 mb-3", children: "Theme" }),
-            /* @__PURE__ */ jsx77("div", { className: "grid grid-cols-3 gap-2 mb-3", children: [
-              { id: "studio", label: "Studio", icon: /* @__PURE__ */ jsx77(Building2, { className: "w-4 h-4" }) },
-              { id: "terra", label: "Terra", icon: /* @__PURE__ */ jsx77(Leaf, { className: "w-4 h-4" }) },
-              { id: "volt", label: "Volt", icon: /* @__PURE__ */ jsx77(Zap, { className: "w-4 h-4" }) }
-            ].map((t) => /* @__PURE__ */ jsxs47(
+            /* @__PURE__ */ jsx77("div", { className: `grid gap-2 mb-3 ${visibleThemes.length <= 3 ? "grid-cols-3" : "grid-cols-4"}`, children: visibleThemes.map((t) => /* @__PURE__ */ jsxs47(
               "button",
               {
                 onClick: () => setTheme(t.id),
@@ -9395,12 +9658,12 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false }) => {
               /* @__PURE__ */ jsxs47("div", { children: [
                 /* @__PURE__ */ jsx77("span", { className: "font-heading", children: "Heading:" }),
                 " ",
-                theme === "studio" ? "Outfit" : theme === "terra" ? "Lora" : "Space Grotesk"
+                theme === "studio" ? "Outfit" : theme === "terra" ? "Lora" : theme === "speedboat" ? "Montserrat" : "Space Grotesk"
               ] }),
               /* @__PURE__ */ jsxs47("div", { children: [
                 /* @__PURE__ */ jsx77("span", { className: "font-body", children: "Body:" }),
                 " ",
-                theme === "studio" ? "Manrope" : theme === "terra" ? "Instrument Sans" : "Space Grotesk"
+                theme === "studio" ? "Manrope" : theme === "terra" ? "Instrument Sans" : theme === "speedboat" ? "Roboto" : "Space Grotesk"
               ] })
             ] })
           ] }),
@@ -9797,7 +10060,7 @@ var Header2 = ({
   const baseStyles = "top-0 left-0 right-0 z-50";
   const positionStyles = sticky ? "fixed" : "relative";
   const transitionStyles = shouldAnimate ? "transition-all" : "";
-  const backgroundStyles = hasScrolled && glassOnScroll ? "backdrop-blur-3xl bg-[var(--color-surface)]/60 border-b border-transparent shadow-sm supports-[backdrop-filter]:bg-[var(--color-surface)]/50" : "bg-transparent border-b border-transparent backdrop-blur-xl";
+  const backgroundStyles = hasScrolled && glassOnScroll ? "backdrop-blur-3xl bg-[var(--color-surface)]/60 border-b border-transparent shadow-xs supports-[backdrop-filter]:bg-[var(--color-surface)]/50" : "bg-transparent border-b border-transparent backdrop-blur-xl";
   const getNavClasses = () => {
     switch (navAlignment) {
       case "left":
@@ -9846,7 +10109,7 @@ var Header2 = ({
                                                         focus-visible:outline-2
                                                         focus-visible:outline-offset-4
                                                         focus-visible:outline-[var(--color-focus)]
-                                                        rounded-sm
+                                                        rounded-xs
                                                         ${shouldAnimate ? "transition-colors" : ""}
                                                         ${link.active ? "text-[var(--color-text-primary)] font-medium after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-[var(--color-primary)] after:rounded-full" : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"}
                                                     `,
@@ -9949,7 +10212,7 @@ var Header2 = ({
                                                 focus-visible:outline-2
                                                 focus-visible:outline-offset-4
                                                 focus-visible:outline-[var(--color-focus)]
-                                                rounded-sm
+                                                rounded-xs
                                                 ${shouldAnimate ? "transition-all" : ""}
                                                 ${link.active ? "text-[var(--color-primary)] font-semibold" : "text-[var(--color-text-primary)] hover:text-[var(--color-text-secondary)]"}
                                             `,
@@ -9974,7 +10237,7 @@ var Header2 = ({
                                                             focus-visible:outline-2
                                                             focus-visible:outline-offset-4
                                                             focus-visible:outline-[var(--color-focus)]
-                                                            rounded-sm
+                                                            rounded-xs
                                                             ${shouldAnimate ? "transition-colors" : ""}
                                                             ${child.active ? "text-[var(--color-primary)] font-medium" : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"}
                                                         `,
@@ -9998,7 +10261,7 @@ var Header2 = ({
                                         focus-visible:outline-2
                                         focus-visible:outline-offset-4
                                         focus-visible:outline-[var(--color-focus)]
-                                        rounded-sm
+                                        rounded-xs
                                         ${shouldAnimate ? "transition-all" : ""}
                                         ${link.active ? "text-[var(--color-primary)] font-semibold" : "text-[var(--color-text-primary)] hover:text-[var(--color-text-secondary)]"}
                                     `,
@@ -10072,7 +10335,7 @@ function PageLayout({
       "div",
       {
         className: `
-            sticky bg-[var(--color-background)]/95 backdrop-blur-sm
+            sticky bg-[var(--color-background)]/95 backdrop-blur-xs
             border-b border-[var(--color-border)]
             transition-all duration-300
             top-16 lg:top-20
@@ -10186,7 +10449,7 @@ var ResizableHandle = ({
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsx84("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx84(GripVertical2, { className: "h-2.5 w-2.5" }) })
+      children: withHandle && /* @__PURE__ */ jsx84("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ jsx84(GripVertical2, { className: "h-2.5 w-2.5" }) })
     }
   );
 };
@@ -11320,7 +11583,7 @@ function FaultyTerminal({
 }
 
 // src/components/motion/AnimatedBeam.tsx
-import { motion as motion5 } from "framer-motion";
+import { motion as motion4 } from "framer-motion";
 import { useId as useId2 } from "react";
 import { jsx as jsx91, jsxs as jsxs55 } from "react/jsx-runtime";
 var AnimatedBeam = ({
@@ -11406,7 +11669,7 @@ var AnimatedBeam = ({
           }
         ),
         shouldAnimate && /* @__PURE__ */ jsx91(
-          motion5.circle,
+          motion4.circle,
           {
             r: pathWidth * 1.5,
             fill: gradientStartColor,
@@ -11423,7 +11686,7 @@ var AnimatedBeam = ({
           }
         ),
         shouldAnimate && /* @__PURE__ */ jsx91(
-          motion5.circle,
+          motion4.circle,
           {
             r: pathWidth,
             fill: gradientStopColor,
@@ -11765,7 +12028,7 @@ function OrbBackground({
 
 // src/components/blocks/Hero.tsx
 import { ArrowRight as ArrowRight2 } from "lucide-react";
-import { motion as motion6 } from "framer-motion";
+import { motion as motion5 } from "framer-motion";
 import { jsx as jsx93, jsxs as jsxs56 } from "react/jsx-runtime";
 function HeroBlock({
   className,
@@ -11810,7 +12073,7 @@ function HeroBlock({
       /* @__PURE__ */ jsx93("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[var(--color-background)] z-10" })
     ] }),
     /* @__PURE__ */ jsxs56(
-      motion6.div,
+      motion5.div,
       {
         className: "relative z-20 container max-w-4xl px-4 text-center space-y-8",
         variants: containerVariants,
@@ -11818,18 +12081,18 @@ function HeroBlock({
         whileInView: "visible",
         viewport: { once: true },
         children: [
-          badge && /* @__PURE__ */ jsx93(motion6.div, { variants: itemVariants, className: "flex justify-center", children: /* @__PURE__ */ jsx93(Badge, { variant: "outline", className: "backdrop-blur-md bg-[var(--color-surface)]/30 border-[var(--color-border)] px-4 py-1.5", children: badge }) }),
+          badge && /* @__PURE__ */ jsx93(motion5.div, { variants: itemVariants, className: "flex justify-center", children: /* @__PURE__ */ jsx93(Badge, { variant: "outline", className: "backdrop-blur-md bg-[var(--color-surface)]/30 border-[var(--color-border)] px-4 py-1.5", children: badge }) }),
           /* @__PURE__ */ jsx93(
-            motion6.h1,
+            motion5.h1,
             {
               variants: itemVariants,
               className: "text-5xl md:text-7xl font-bold tracking-tight text-[var(--color-text-primary)]",
               children: headline
             }
           ),
-          /* @__PURE__ */ jsx93(motion6.div, { variants: itemVariants, children: /* @__PURE__ */ jsx93(Text, { variant: "secondary", className: "text-xl md:text-2xl max-w-2xl mx-auto", children: description }) }),
-          children && /* @__PURE__ */ jsx93(motion6.div, { variants: itemVariants, className: "flex justify-center", children }),
-          /* @__PURE__ */ jsxs56(motion6.div, { variants: itemVariants, className: "flex flex-col sm:flex-row gap-4 justify-center items-center pt-4", children: [
+          /* @__PURE__ */ jsx93(motion5.div, { variants: itemVariants, children: /* @__PURE__ */ jsx93(Text, { variant: "secondary", className: "text-xl md:text-2xl max-w-2xl mx-auto", children: description }) }),
+          children && /* @__PURE__ */ jsx93(motion5.div, { variants: itemVariants, className: "flex justify-center", children }),
+          /* @__PURE__ */ jsxs56(motion5.div, { variants: itemVariants, className: "flex flex-col sm:flex-row gap-4 justify-center items-center pt-4", children: [
             primaryCta && /* @__PURE__ */ jsxs56(Button, { size: "lg", variant: primaryCta.variant || "default", onClick: primaryCta.onClick, children: [
               primaryCta.label,
               /* @__PURE__ */ jsx93(ArrowRight2, { className: "w-4 h-4 ml-2" })
@@ -13106,7 +13369,8 @@ import { Fragment as Fragment6, jsx as jsx96 } from "react/jsx-runtime";
 var themeTokens = {
   studio: studioTokens,
   terra: terraTokens,
-  volt: voltTokens
+  volt: voltTokens,
+  speedboat: speedboatTokens
 };
 var fontFamilies2 = {
   studio: {
@@ -13122,6 +13386,11 @@ var fontFamilies2 = {
   volt: {
     sans: "var(--font-volt-heading)",
     mono: "var(--font-mono)"
+  },
+  speedboat: {
+    heading: "var(--font-montserrat)",
+    body: "var(--font-roboto)",
+    mono: "var(--font-mono)"
   }
 };
 function getThemeVars(theme, mode) {
@@ -13166,6 +13435,16 @@ function getThemeVars(theme, mode) {
     "--color-active": colors?.active || colors?.backgroundTertiary || "#f0f0f0",
     "--color-link-hover": colors?.linkHover || colors?.primary || "#0a0a0a",
     "--color-link-hover-foreground": colors?.linkHoverForeground || colors?.background || "#ffffff",
+    // Component-specific (previously only set in globals.css defaults)
+    "--color-card": colors?.card || colors?.background || "#ffffff",
+    "--color-card-foreground": colors?.cardForeground || colors?.foreground || "#0a0a0a",
+    "--color-popover": colors?.popover || colors?.background || "#ffffff",
+    "--color-popover-foreground": colors?.popoverForeground || colors?.foreground || "#0a0a0a",
+    "--color-muted": colors?.muted || colors?.backgroundSecondary || "#f5f5f5",
+    "--color-muted-foreground": colors?.mutedForeground || colors?.foregroundTertiary || "#737373",
+    "--color-destructive": colors?.destructive || colors?.error || "#ef4444",
+    "--color-destructive-foreground": colors?.destructiveForeground || "#ffffff",
+    "--color-input": colors?.input || colors?.border || "#d4d4d4",
     // Effects - Blur
     "--effect-blur-sm": effects?.blur?.sm || "blur(4px)",
     "--effect-blur-md": effects?.blur?.md || "blur(8px)",
@@ -13204,9 +13483,9 @@ function getThemeVars(theme, mode) {
     "--code-border": mode === "light" ? codeColors.light.border : codeColors.dark.border
   };
 }
-function mergeCustomColorTokens(baseTokens2, customPalette) {
+function mergeCustomColorTokens(baseTokens, customPalette) {
   return {
-    ...baseTokens2,
+    ...baseTokens,
     // Override primary color
     "--color-primary": customPalette.primary,
     "--color-primary-foreground": customPalette.primaryForeground,
@@ -13224,12 +13503,12 @@ function mergeCustomColorTokens(baseTokens2, customPalette) {
     // Override secondary color if provided (advanced mode)
     ...customPalette.secondary && {
       "--color-secondary": customPalette.secondary,
-      "--color-secondary-foreground": customPalette.secondaryForeground || baseTokens2["--color-secondary-foreground"]
+      "--color-secondary-foreground": customPalette.secondaryForeground || baseTokens["--color-secondary-foreground"]
     },
     // Override accent color if provided (advanced mode)
     ...customPalette.accent && {
       "--color-accent": customPalette.accent,
-      "--color-accent-foreground": customPalette.accentForeground || baseTokens2["--color-accent-foreground"]
+      "--color-accent-foreground": customPalette.accentForeground || baseTokens["--color-accent-foreground"]
     },
     // Apply ALL derived tokens from dependency graph
     // This automatically updates:
@@ -13283,11 +13562,18 @@ function validateThemeTokens(theme, mode) {
     console.log(`[ThemeProvider] \u2713 Theme validation passed for "${theme}" (${mode} mode)`);
   }
 }
-function ThemeProvider({ children }) {
-  const { theme, mode } = useThemeStore();
+function ThemeProvider({ children, defaultTheme, defaultMode }) {
+  const { theme, mode, setTheme, setMode } = useThemeStore();
   const customPalette = useCustomizer((state) => state.customColors?.[theme]?.[mode]);
   const [isTransitioning, setIsTransitioning] = useState18(false);
   const [mounted, setMounted] = useState18(false);
+  useEffect16(() => {
+    if (!defaultTheme && !defaultMode) return;
+    const persisted = typeof window !== "undefined" && localStorage.getItem("ecosystem-theme");
+    if (persisted) return;
+    if (defaultTheme) setTheme(defaultTheme);
+    if (defaultMode) setMode(defaultMode);
+  }, []);
   useEffect16(() => {
     setMounted(true);
   }, []);
@@ -13295,7 +13581,7 @@ function ThemeProvider({ children }) {
     if (!mounted) return;
     setIsTransitioning(true);
     const root = document.documentElement;
-    const baseTokens2 = getThemeVars(theme, mode);
+    const baseTokens = getThemeVars(theme, mode);
     console.log("[ThemeProvider] Update:", {
       theme,
       mode,
@@ -13303,7 +13589,7 @@ function ThemeProvider({ children }) {
       customPrimary: customPalette?.primary,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     });
-    const finalTokens = customPalette ? mergeCustomColorTokens(baseTokens2, customPalette) : baseTokens2;
+    const finalTokens = customPalette ? mergeCustomColorTokens(baseTokens, customPalette) : baseTokens;
     root.classList.add("theme-transitioning");
     Object.entries(finalTokens).forEach(([key, value]) => {
       root.style.setProperty(key, value);