@opencosmos/ui 1.3.1

package/dist/providers.mjs

@@ -0,0 +1,1859 @@
+"use client";
+
+// src/providers/ThemeProvider.tsx
+import { useEffect, useState } from "react";
+
+// src/lib/store/theme.ts
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+var useThemeStore = create()(
+  persist(
+    (set, get) => ({
+      // Defaults
+      theme: "volt",
+      mode: "dark",
+      // Actions
+      setTheme: (theme) => set({ theme }),
+      setMode: (mode) => set({ mode }),
+      toggleMode: () => set((state) => ({ mode: state.mode === "light" ? "dark" : "light" })),
+      // Computed
+      get themeConfig() {
+        const state = get();
+        return { name: state.theme, mode: state.mode };
+      }
+    }),
+    {
+      name: "ecosystem-theme",
+      // Only persist theme and mode
+      partialize: (state) => ({
+        theme: state.theme,
+        mode: state.mode
+      })
+    }
+  )
+);
+
+// src/lib/store/customizer.ts
+import { create as create2 } from "zustand";
+import { persist as persist2 } from "zustand/middleware";
+
+// ../tokens/src/studio.ts
+var studioTokens = {
+  light: {
+    colors: {
+      // Backgrounds
+      background: "#ffffff",
+      backgroundSecondary: "#fafafa",
+      backgroundTertiary: "#f5f5f5",
+      // Foregrounds
+      foreground: "#0a0a0a",
+      foregroundSecondary: "#525252",
+      foregroundTertiary: "#a3a3a3",
+      // Brand
+      primary: "#0a0a0a",
+      primaryForeground: "#ffffff",
+      secondary: "#f5f5f5",
+      secondaryForeground: "#0a0a0a",
+      accent: "#0070f3",
+      accentForeground: "#ffffff",
+      // Borders
+      border: "#d4d4d4",
+      borderSubtle: "#f5f5f5",
+      // States
+      hover: "#fafafa",
+      active: "#f0f0f0",
+      // Link hover states
+      linkHover: "#0a0a0a",
+      linkHoverForeground: "#ffffff",
+      // Semantic
+      success: "#00a86b",
+      successForeground: "#ffffff",
+      warning: "#f59e0b",
+      warningForeground: "#ffffff",
+      error: "#ef4444",
+      errorForeground: "#ffffff",
+      info: "#0070f3",
+      infoForeground: "#ffffff",
+      // Component-specific colors
+      card: "#ffffff",
+      cardForeground: "#0a0a0a",
+      popover: "#ffffff",
+      popoverForeground: "#0a0a0a",
+      muted: "#f5f5f5",
+      mutedForeground: "#737373",
+      destructive: "#ef4444",
+      destructiveForeground: "#ffffff",
+      input: "#d4d4d4",
+      ring: "#0a0a0a",
+      // Surface is used by various components
+      surface: "#fafafa",
+      // Glass effects
+      glass: "rgba(255, 255, 255, 0.7)",
+      glassBorder: "rgba(0, 0, 0, 0.1)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(4px)",
+        md: "blur(8px)",
+        lg: "blur(16px)",
+        xl: "blur(24px)"
+      },
+      shadow: {
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1)",
+        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
+      }
+    }
+  },
+  dark: {
+    colors: {
+      // Backgrounds
+      background: "#000000",
+      backgroundSecondary: "#171717",
+      backgroundTertiary: "#262626",
+      // Foregrounds
+      foreground: "#fafafa",
+      foregroundSecondary: "#a3a3a3",
+      foregroundTertiary: "#858585",
+      // Brand
+      primary: "#ffffff",
+      primaryForeground: "#0a0a0a",
+      secondary: "#262626",
+      secondaryForeground: "#fafafa",
+      accent: "#0090ff",
+      accentForeground: "#ffffff",
+      // Borders
+      border: "#404040",
+      borderSubtle: "#1a1a1a",
+      // States
+      hover: "#1a1a1a",
+      active: "#262626",
+      // Link hover states
+      linkHover: "#ffffff",
+      linkHoverForeground: "#0a0a0a",
+      // Semantic
+      success: "#10b981",
+      successForeground: "#ffffff",
+      warning: "#f59e0b",
+      warningForeground: "#ffffff",
+      error: "#ef4444",
+      errorForeground: "#ffffff",
+      info: "#0090ff",
+      infoForeground: "#ffffff",
+      // Component-specific colors
+      card: "#0a0a0a",
+      cardForeground: "#fafafa",
+      popover: "#0a0a0a",
+      popoverForeground: "#fafafa",
+      muted: "#262626",
+      mutedForeground: "#a3a3a3",
+      destructive: "#ef4444",
+      destructiveForeground: "#ffffff",
+      input: "#404040",
+      ring: "#d4d4d4",
+      // Surface is used by various components
+      surface: "#171717",
+      // Glass effects
+      glass: "rgba(0, 0, 0, 0.7)",
+      glassBorder: "rgba(255, 255, 255, 0.1)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(4px)",
+        md: "blur(8px)",
+        lg: "blur(16px)",
+        xl: "blur(24px)"
+      },
+      shadow: {
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.5)",
+        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.6)",
+        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.7)",
+        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.8)"
+      }
+    }
+  },
+  /**
+   * Motion personality for Studio theme
+   */
+  motion: {
+    // Duration scales based on motion slider (0-10)
+    getDuration: (intensity) => {
+      if (intensity === 0) return "0ms";
+      const ms = 150 + (intensity - 1) * 40;
+      return `${ms}ms`;
+    },
+    // Easing curves - smooth and professional
+    ease: {
+      default: "cubic-bezier(0.4, 0, 0.2, 1)",
+      // ease-in-out
+      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)"
+      // Smooth spring
+    }
+  },
+  /**
+   * Interaction tokens for Studio theme
+   * Subtle, professional — minimal overlay, gentle scale
+   */
+  interactions: {
+    hover: { overlayColor: { light: "#000000", dark: "#ffffff" }, opacity: 0.06 },
+    active: { scale: 0.98 },
+    focus: { ringWidth: "2px", ringOffset: "2px" },
+    disabled: { opacity: 0.5 }
+  },
+  typography: {
+    heading: {
+      fontFamily: "var(--font-geist-sans)",
+      fontWeight: "600",
+      letterSpacing: "-0.02em"
+    },
+    body: {
+      fontFamily: "var(--font-geist-sans)",
+      fontWeight: "400",
+      letterSpacing: "0"
+    },
+    mono: {
+      fontFamily: "var(--font-geist-mono)",
+      fontWeight: "400",
+      letterSpacing: "0"
+    }
+  }
+};
+
+// ../tokens/src/terra.ts
+var terraTokens = {
+  light: {
+    colors: {
+      // Warm, earthy backgrounds
+      background: "#faf8f5",
+      backgroundSecondary: "#f5f1eb",
+      backgroundTertiary: "#ede8e0",
+      // Warm neutrals for text
+      foreground: "#2d2823",
+      foregroundSecondary: "#5a524a",
+      foregroundTertiary: "#8a7f72",
+      // Muted sage green as primary
+      primary: "#7a9b7f",
+      primaryForeground: "#faf8f5",
+      primaryHover: "#6a8b6f",
+      // Secondary - warm stone
+      secondary: "#ede8e0",
+      secondaryForeground: "#2d2823",
+      // Warm terracotta accent
+      accent: "#c17a5f",
+      accentForeground: "#faf8f5",
+      accentHover: "#b16a4f",
+      // Semantic colors with muted, organic tones
+      success: "#6b8e6f",
+      successForeground: "#faf8f5",
+      warning: "#d4a574",
+      warningForeground: "#2d2823",
+      error: "#c17a5f",
+      errorForeground: "#faf8f5",
+      info: "#8b9dc3",
+      infoForeground: "#faf8f5",
+      // Borders - warm subtle
+      border: "#e0d8cf",
+      borderSubtle: "#ede8e0",
+      // States
+      hover: "#f5f1eb",
+      active: "#ede8e0",
+      // Link hover states - Muted sage green
+      linkHover: "#7a9b7f",
+      linkHoverForeground: "#faf8f5",
+      // Soft glass effects
+      glass: "rgba(250, 248, 245, 0.85)",
+      glassBorder: "rgba(122, 155, 127, 0.15)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(6px)",
+        md: "blur(12px)",
+        lg: "blur(20px)",
+        xl: "blur(32px)"
+      },
+      shadow: {
+        sm: "0 2px 4px 0 rgba(45, 40, 35, 0.06)",
+        md: "0 4px 8px -2px rgba(45, 40, 35, 0.08)",
+        lg: "0 8px 16px -4px rgba(45, 40, 35, 0.12)",
+        xl: "0 16px 32px -8px rgba(45, 40, 35, 0.16)",
+        "2xl": "0 24px 48px -12px rgba(45, 40, 35, 0.20)"
+      }
+    }
+  },
+  dark: {
+    colors: {
+      // Deep forest backgrounds
+      background: "#1a1614",
+      backgroundSecondary: "#252220",
+      backgroundTertiary: "#2f2b28",
+      // Warm light text
+      foreground: "#f5f1eb",
+      foregroundSecondary: "#c7bfb5",
+      foregroundTertiary: "#8a7f72",
+      // Brighter sage for dark mode
+      primary: "#a8c5ad",
+      primaryForeground: "#1a1614",
+      primaryHover: "#b8d5bd",
+      // Secondary - lighter warm stone
+      secondary: "#2f2b28",
+      secondaryForeground: "#f5f1eb",
+      // Warm peachy accent for dark
+      accent: "#e5a78a",
+      accentForeground: "#1a1614",
+      accentHover: "#f5b79a",
+      // Semantic colors adjusted for dark
+      success: "#95b89a",
+      successForeground: "#1a1614",
+      warning: "#e5c59a",
+      warningForeground: "#1a1614",
+      error: "#e5a78a",
+      errorForeground: "#1a1614",
+      info: "#a8b5d5",
+      infoForeground: "#1a1614",
+      // Borders
+      border: "#3a3530",
+      borderSubtle: "#2f2b28",
+      // States
+      hover: "#252220",
+      active: "#2f2b28",
+      // Link hover states - Brighter sage for dark mode
+      linkHover: "#a8c5ad",
+      linkHoverForeground: "#1a1614",
+      // Dark glass effects
+      glass: "rgba(26, 22, 20, 0.85)",
+      glassBorder: "rgba(168, 197, 173, 0.2)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(6px)",
+        md: "blur(12px)",
+        lg: "blur(20px)",
+        xl: "blur(32px)"
+      },
+      shadow: {
+        sm: "0 2px 4px 0 rgba(0, 0, 0, 0.3)",
+        md: "0 4px 8px -2px rgba(0, 0, 0, 0.4)",
+        lg: "0 8px 16px -4px rgba(0, 0, 0, 0.5)",
+        xl: "0 16px 32px -8px rgba(0, 0, 0, 0.6)",
+        "2xl": "0 24px 48px -12px rgba(0, 0, 0, 0.7)"
+      }
+    }
+  },
+  motion: {
+    getDuration: (intensity) => {
+      if (intensity === 0) return "0ms";
+      const ms = 300 + (intensity - 1) * 60;
+      return `${ms}ms`;
+    },
+    ease: {
+      default: "cubic-bezier(0.33, 1, 0.68, 1)",
+      // Organic, flowing
+      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)"
+    }
+  },
+  /**
+   * Interaction tokens for Terra theme
+   * Warm, organic — earthy overlay tones, softer scale
+   */
+  interactions: {
+    hover: { overlayColor: { light: "#2d2823", dark: "#f5f1eb" }, opacity: 0.07 },
+    active: { scale: 0.97 },
+    focus: { ringWidth: "2px", ringOffset: "2px" },
+    disabled: { opacity: 0.5 }
+  },
+  typography: {
+    heading: {
+      fontFamily: "var(--font-terra-serif)",
+      // Lora serif
+      fontWeight: "600",
+      letterSpacing: "-0.01em"
+    },
+    body: {
+      fontFamily: "var(--font-terra-sans)",
+      // Instrument Sans
+      fontWeight: "400",
+      letterSpacing: "0"
+    },
+    mono: {
+      fontFamily: "var(--font-terra-mono)",
+      fontWeight: "400",
+      letterSpacing: "0"
+    }
+  }
+};
+
+// ../tokens/src/volt.ts
+var voltTokens = {
+  light: {
+    colors: {
+      // Bright, punchy backgrounds
+      background: "#ffffff",
+      backgroundSecondary: "#f8f9fb",
+      backgroundTertiary: "#f0f2f5",
+      // Sharp contrast text
+      foreground: "#0a0a0a",
+      foregroundSecondary: "#4a4a4a",
+      foregroundTertiary: "#8a8a8a",
+      // Electric blue primary (WCAG AA compliant)
+      primary: "#0066ff",
+      primaryForeground: "#ffffff",
+      primaryHover: "#0052cc",
+      // Secondary - cool gray
+      secondary: "#f0f2f5",
+      secondaryForeground: "#0a0a0a",
+      // Vibrant cyan accent
+      accent: "#00d9ff",
+      accentForeground: "#0a0a0a",
+      accentHover: "#00c3e6",
+      // Bold semantic colors
+      success: "#00cc66",
+      successForeground: "#ffffff",
+      warning: "#ffaa00",
+      warningForeground: "#0a0a0a",
+      error: "#ff3366",
+      errorForeground: "#ffffff",
+      info: "#3399ff",
+      infoForeground: "#ffffff",
+      // Borders
+      border: "#e0e4ea",
+      borderSubtle: "#f0f2f5",
+      // States
+      hover: "#f8f9fb",
+      active: "#f0f2f5",
+      // Link hover states - Electric blue with high contrast
+      linkHover: "#0066ff",
+      linkHoverForeground: "#ffffff",
+      // Crisp glass effects
+      glass: "rgba(255, 255, 255, 0.8)",
+      glassBorder: "rgba(0, 102, 255, 0.2)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(8px)",
+        md: "blur(16px)",
+        lg: "blur(32px)",
+        xl: "blur(48px)"
+      },
+      shadow: {
+        sm: "0 0 8px rgba(0, 102, 255, 0.15)",
+        md: "0 0 16px rgba(0, 102, 255, 0.2)",
+        lg: "0 0 24px rgba(0, 102, 255, 0.25)",
+        xl: "0 0 32px rgba(0, 102, 255, 0.3)",
+        "2xl": "0 0 48px rgba(0, 102, 255, 0.4)"
+      }
+    }
+  },
+  dark: {
+    colors: {
+      // Pure black cyberpunk background
+      background: "#000000",
+      backgroundSecondary: "#0a0a0a",
+      backgroundTertiary: "#141414",
+      // Bright white text
+      foreground: "#ffffff",
+      foregroundSecondary: "#b3b3b3",
+      foregroundTertiary: "#666666",
+      // Neon blue primary
+      primary: "#0099ff",
+      primaryForeground: "#000000",
+      primaryHover: "#00aaff",
+      // Secondary - dark gray
+      secondary: "#141414",
+      secondaryForeground: "#ffffff",
+      // Neon cyan accent
+      accent: "#00ffff",
+      accentForeground: "#000000",
+      accentHover: "#33ffff",
+      // Neon semantic colors
+      success: "#00ff99",
+      successForeground: "#000000",
+      warning: "#ffcc00",
+      warningForeground: "#000000",
+      error: "#ff0066",
+      errorForeground: "#ffffff",
+      info: "#66ccff",
+      infoForeground: "#000000",
+      // Borders
+      border: "#1a1a1a",
+      borderSubtle: "#141414",
+      // States
+      hover: "#0a0a0a",
+      active: "#141414",
+      // Link hover states - Neon cyan (high luma)
+      linkHover: "#00ffff",
+      linkHoverForeground: "#000000",
+      // Dark glass with glow
+      glass: "rgba(0, 0, 0, 0.8)",
+      glassBorder: "rgba(0, 153, 255, 0.3)"
+    },
+    effects: {
+      blur: {
+        sm: "blur(8px)",
+        md: "blur(16px)",
+        lg: "blur(32px)",
+        xl: "blur(48px)"
+      },
+      shadow: {
+        sm: "0 0 12px rgba(0, 153, 255, 0.4)",
+        md: "0 0 20px rgba(0, 153, 255, 0.5)",
+        lg: "0 0 32px rgba(0, 153, 255, 0.6)",
+        xl: "0 0 48px rgba(0, 153, 255, 0.7)",
+        "2xl": "0 0 64px rgba(0, 153, 255, 0.8)"
+      }
+    }
+  },
+  motion: {
+    getDuration: (intensity) => {
+      if (intensity === 0) return "0ms";
+      const ms = 100 + (intensity - 1) * 25;
+      return `${ms}ms`;
+    },
+    ease: {
+      default: "cubic-bezier(0.16, 1, 0.3, 1)",
+      // Snappy spring
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      spring: "cubic-bezier(0.68, -0.55, 0.27, 1.55)"
+      // Bouncy
+    }
+  },
+  /**
+   * Interaction tokens for Volt theme
+   * Electric, brand-tinted — blue overlay, punchy scale
+   */
+  interactions: {
+    hover: { overlayColor: { light: "#0066ff", dark: "#0099ff" }, opacity: 0.1 },
+    active: { scale: 0.96 },
+    focus: { ringWidth: "2px", ringOffset: "2px" },
+    disabled: { opacity: 0.5 }
+  },
+  typography: {
+    heading: {
+      fontFamily: "var(--font-volt-sans)",
+      // Space Grotesk
+      fontWeight: "700",
+      // Bold
+      letterSpacing: "-0.03em"
+    },
+    body: {
+      fontFamily: "var(--font-volt-sans)",
+      fontWeight: "400",
+      letterSpacing: "0"
+    },
+    mono: {
+      fontFamily: "var(--font-volt-mono)",
+      // Fira Code
+      fontWeight: "400",
+      letterSpacing: "0"
+    }
+  }
+};
+
+// ../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)"
+    }
+  },
+  /**
+   * Interaction tokens for Speedboat theme
+   * Professional, clean — matches Studio's subtle feel
+   */
+  interactions: {
+    hover: { overlayColor: { light: "#000000", dark: "#ffffff" }, opacity: 0.06 },
+    active: { scale: 0.98 },
+    focus: { ringWidth: "2px", ringOffset: "2px" },
+    disabled: { opacity: 0.5 }
+  },
+  /**
+   * 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/syntax.ts
+var syntaxColors = {
+  light: {
+    comment: "#22863a",
+    // Green for comments
+    keyword: "#8250df",
+    // Purple for keywords (import, export, const, etc.)
+    function: "#6639ba",
+    // Purple for function names
+    string: "#c1592a",
+    // Orange for strings
+    number: "#0a3069",
+    // Blue for numbers
+    boolean: "#0550ae",
+    // Blue for booleans
+    operator: "#1a1a1a",
+    // Almost black for operators
+    property: "#0550ae",
+    // Blue for properties
+    className: "#005cc5",
+    // Blue for class names
+    tag: "#005cc5",
+    // Blue for HTML/JSX tags
+    attribute: "#0550ae",
+    // Blue for attributes
+    variable: "#0550ae",
+    // Blue for variables
+    punctuation: "#57606a",
+    // Gray for punctuation
+    plain: "#1a1a1a"
+    // Default text color
+  },
+  dark: {
+    comment: "#6A9955",
+    // Green for comments
+    keyword: "#C586C0",
+    // Purple for keywords (import, export, const, etc.)
+    function: "#DCDCAA",
+    // Yellow for function names
+    string: "#CE9178",
+    // Orange for strings
+    number: "#B5CEA8",
+    // Light green for numbers
+    boolean: "#569CD6",
+    // Blue for booleans
+    operator: "#D4D4D4",
+    // Light gray for operators
+    property: "#9CDCFE",
+    // Light blue for properties
+    className: "#4EC9B0",
+    // Cyan for class names
+    tag: "#4EC9B0",
+    // Cyan for HTML/JSX tags
+    attribute: "#9CDCFE",
+    // Light blue for attributes
+    variable: "#9CDCFE",
+    // Light blue for variables
+    punctuation: "#808080",
+    // Gray for punctuation
+    plain: "#D4D4D4"
+    // Default text color
+  }
+};
+var codeColors = {
+  light: {
+    // Block code background - cool gray for subtle distinction
+    blockBackground: "#F8F9FA",
+    // Inline code background - pale amber for warmth and visibility
+    inlineBackground: "#FEF3E7",
+    // Border color for definition and separation
+    border: "#E1E4E8"
+  },
+  dark: {
+    // Block code background - VS Code-inspired dark background
+    blockBackground: "#1E1E1E",
+    // Inline code background - slightly lighter for contrast
+    inlineBackground: "#252525",
+    // Border color for definition
+    border: "#3D3D3D"
+  }
+};
+
+// ../tokens/src/color-utils.ts
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+function hexToHSL(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return { h: 0, s: 0, l: 0 };
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0, l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToHex(h, s, l) {
+  h = h / 360;
+  s = s / 100;
+  l = l / 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p2, q2, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+      if (t < 1 / 2) return q2;
+      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+      return p2;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = (x) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function adjustLightness(hex, percent) {
+  const hsl = hexToHSL(hex);
+  const newL = Math.max(0, Math.min(100, hsl.l + percent));
+  return hslToHex(hsl.h, hsl.s, newL);
+}
+function adjustSaturation(hex, percent) {
+  const hsl = hexToHSL(hex);
+  const newS = Math.max(0, Math.min(100, hsl.s + percent));
+  return hslToHex(hsl.h, newS, hsl.l);
+}
+function rotateHue(hex, degrees) {
+  const hsl = hexToHSL(hex);
+  const newH = (hsl.h + degrees) % 360;
+  return hslToHex(newH, hsl.s, hsl.l);
+}
+function adjustOpacity(hex, opacity) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+}
+function getLuminance(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const srgb = c / 255;
+    return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function getContrastRatio(hex1, hex2) {
+  const rgb1 = hexToRgb(hex1);
+  const rgb2 = hexToRgb(hex2);
+  if (!rgb1 || !rgb2) return 0;
+  const lum1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
+  const lum2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);
+  const lighter = Math.max(lum1, lum2);
+  const darker = Math.min(lum1, lum2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function getOptimalForeground(bgHex, whiteHex = "#ffffff", blackHex = "#000000") {
+  const whiteRatio = getContrastRatio(bgHex, whiteHex);
+  const blackRatio = getContrastRatio(bgHex, blackHex);
+  return whiteRatio > blackRatio ? whiteHex : blackHex;
+}
+
+// ../tokens/src/token-graph.ts
+var primaryColorDerivations = {
+  // Links use primary color
+  "--color-link": {
+    source: "--color-primary",
+    transform: (primary) => primary,
+    description: "Links inherit primary brand color"
+  },
+  // Focus ring uses primary color
+  "--color-ring": {
+    source: "--color-primary",
+    transform: (primary) => primary,
+    description: "Focus rings use primary for brand consistency"
+  },
+  // Link hover is slightly darker primary
+  "--color-link-hover": {
+    source: "--color-primary",
+    transform: (primary) => adjustLightness(primary, -10),
+    description: "Link hover is 10% darker for visual feedback"
+  },
+  // Chart primary series
+  "--chart-1": {
+    source: "--color-primary",
+    transform: (primary) => primary,
+    description: "First chart series uses primary"
+  },
+  // Chart secondary series (lighter tint)
+  "--chart-2": {
+    source: "--color-primary",
+    transform: (primary) => adjustLightness(primary, 20),
+    description: "Second chart series is lighter tint of primary"
+  },
+  // Chart tertiary series (darker shade)
+  "--chart-3": {
+    source: "--color-primary",
+    transform: (primary) => adjustLightness(primary, -15),
+    description: "Third chart series is darker shade of primary"
+  },
+  // Chart quaternary (desaturated primary)
+  "--chart-4": {
+    source: "--color-primary",
+    transform: (primary) => adjustSaturation(primary, -30),
+    description: "Fourth chart series is muted primary"
+  },
+  // Chart quinary (complementary color)
+  "--chart-5": {
+    source: "--color-primary",
+    transform: (primary) => rotateHue(primary, 180),
+    description: "Fifth chart series is complementary to primary"
+  }
+};
+var secondaryColorDerivations = {
+  // Hover states
+  "--color-hover": {
+    source: "--color-secondary",
+    transform: (secondary) => secondary,
+    description: "Hover backgrounds use secondary"
+  },
+  // Active states
+  "--color-active": {
+    source: "--color-secondary",
+    transform: (secondary) => adjustLightness(secondary, -5),
+    description: "Active state is slightly darker secondary"
+  },
+  // Muted backgrounds
+  "--color-muted": {
+    source: "--color-secondary",
+    transform: (secondary) => secondary,
+    description: "Muted sections use secondary color"
+  }
+};
+var accentColorDerivations = {
+  // Info semantic color uses accent
+  "--color-info": {
+    source: "--color-accent",
+    transform: (accent) => accent,
+    description: "Info semantic color uses accent"
+  },
+  // Info foreground calculated for contrast
+  "--color-info-foreground": {
+    source: "--color-accent",
+    transform: (accent) => getOptimalForeground(accent),
+    description: "Info foreground calculated for contrast"
+  }
+};
+var modeSpecificDerivations = {
+  "--color-primary-muted": {
+    light: {
+      source: "--color-primary",
+      transform: (primary) => adjustLightness(primary, 40),
+      description: "Muted primary for light backgrounds"
+    },
+    dark: {
+      source: "--color-primary",
+      transform: (primary) => adjustLightness(primary, -20),
+      description: "Muted primary for dark backgrounds"
+    }
+  },
+  "--color-primary-subtle": {
+    light: {
+      source: "--color-primary",
+      transform: (primary) => adjustOpacity(primary, 0.1),
+      description: "Subtle primary background for light mode"
+    },
+    dark: {
+      source: "--color-primary",
+      transform: (primary) => adjustOpacity(primary, 0.2),
+      description: "Subtle primary background for dark mode"
+    }
+  }
+};
+function computeDerivedTokens(sourceToken, sourceValue, mode) {
+  const derived = {};
+  Object.entries(primaryColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  Object.entries(secondaryColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  Object.entries(accentColorDerivations).forEach(([token, config]) => {
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  Object.entries(modeSpecificDerivations).forEach(([token, configs]) => {
+    const config = configs[mode];
+    if (config.source === sourceToken) {
+      derived[token] = config.transform(sourceValue);
+    }
+  });
+  return derived;
+}
+
+// src/lib/colors.ts
+var colorTokens = {
+  // Background colors
+  background: "var(--color-background)",
+  backgroundSecondary: "var(--color-background-secondary)",
+  backgroundTertiary: "var(--color-background-tertiary)",
+  surface: "var(--color-surface)",
+  // Foreground/Text colors
+  foreground: "var(--color-foreground)",
+  foregroundSecondary: "var(--color-foreground-secondary)",
+  foregroundTertiary: "var(--color-foreground-tertiary)",
+  textPrimary: "var(--color-text-primary)",
+  textSecondary: "var(--color-text-secondary)",
+  textMuted: "var(--color-text-muted)",
+  // Brand colors
+  primary: "var(--color-primary)",
+  primaryForeground: "var(--color-primary-foreground)",
+  secondary: "var(--color-secondary)",
+  secondaryForeground: "var(--color-secondary-foreground)",
+  accent: "var(--color-accent)",
+  accentForeground: "var(--color-accent-foreground)",
+  // Semantic colors
+  success: "var(--color-success)",
+  successForeground: "var(--color-success-foreground)",
+  warning: "var(--color-warning)",
+  warningForeground: "var(--color-warning-foreground)",
+  error: "var(--color-error)",
+  errorForeground: "var(--color-error-foreground)",
+  info: "var(--color-info)",
+  infoForeground: "var(--color-info-foreground)",
+  // Borders
+  border: "var(--color-border)",
+  borderSubtle: "var(--color-border-subtle)",
+  // Interactive states
+  hover: "var(--color-hover)",
+  active: "var(--color-active)",
+  focus: "var(--color-focus)",
+  // Links
+  link: "var(--color-link)",
+  linkHover: "var(--color-link-hover)",
+  linkHoverForeground: "var(--color-link-hover-foreground)"
+};
+var semanticColors = {
+  /**
+   * Status colors for indicating states
+   */
+  status: {
+    success: {
+      bg: colorTokens.success,
+      fg: colorTokens.successForeground
+    },
+    warning: {
+      bg: colorTokens.warning,
+      fg: colorTokens.warningForeground
+    },
+    error: {
+      bg: colorTokens.error,
+      fg: colorTokens.errorForeground
+    },
+    info: {
+      bg: colorTokens.info,
+      fg: colorTokens.infoForeground
+    }
+  },
+  /**
+   * Brand colors for primary UI elements
+   */
+  brand: {
+    primary: {
+      bg: colorTokens.primary,
+      fg: colorTokens.primaryForeground
+    },
+    secondary: {
+      bg: colorTokens.secondary,
+      fg: colorTokens.secondaryForeground
+    },
+    accent: {
+      bg: colorTokens.accent,
+      fg: colorTokens.accentForeground
+    }
+  },
+  /**
+   * Interactive state colors
+   */
+  interactive: {
+    default: {
+      bg: colorTokens.background,
+      fg: colorTokens.foreground
+    },
+    hover: {
+      bg: colorTokens.hover,
+      fg: colorTokens.foreground
+    },
+    active: {
+      bg: colorTokens.active,
+      fg: colorTokens.foreground
+    },
+    focus: {
+      border: colorTokens.focus
+    }
+  }
+};
+function hexToRgb2(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+function getLuminance2(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const srgb = c / 255;
+    return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function getContrastRatio2(hex1, hex2) {
+  const rgb1 = hexToRgb2(hex1);
+  const rgb2 = hexToRgb2(hex2);
+  if (!rgb1 || !rgb2) return 0;
+  const lum1 = getLuminance2(rgb1.r, rgb1.g, rgb1.b);
+  const lum2 = getLuminance2(rgb2.r, rgb2.g, rgb2.b);
+  const lighter = Math.max(lum1, lum2);
+  const darker = Math.min(lum1, lum2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function hexToHSL2(hex) {
+  const rgb = hexToRgb2(hex);
+  if (!rgb) return { h: 0, s: 0, l: 0 };
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToHex2(h, s, l) {
+  h = h / 360;
+  s = s / 100;
+  l = l / 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p2, q2, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+      if (t < 1 / 2) return q2;
+      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+      return p2;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = (x) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function getOptimalForeground2(bgHex, whiteHex = "#ffffff", blackHex = "#000000") {
+  const whiteRatio = getContrastRatio2(bgHex, whiteHex);
+  const blackRatio = getContrastRatio2(bgHex, blackHex);
+  return whiteRatio > blackRatio ? whiteHex : blackHex;
+}
+function generateColorScale(baseHex) {
+  const hsl = hexToHSL2(baseHex);
+  return {
+    50: hslToHex2(hsl.h, Math.max(hsl.s - 10, 20), 95),
+    100: hslToHex2(hsl.h, Math.max(hsl.s - 5, 30), 90),
+    200: hslToHex2(hsl.h, hsl.s, 80),
+    300: hslToHex2(hsl.h, hsl.s, 70),
+    400: hslToHex2(hsl.h, hsl.s, 60),
+    500: baseHex,
+    // Base color
+    600: hslToHex2(hsl.h, Math.min(hsl.s + 5, 100), 45),
+    700: hslToHex2(hsl.h, Math.min(hsl.s + 10, 100), 35),
+    800: hslToHex2(hsl.h, Math.min(hsl.s + 15, 100), 25),
+    900: hslToHex2(hsl.h, Math.min(hsl.s + 20, 100), 15)
+  };
+}
+
+// src/lib/store/customizer.ts
+var useCustomizer = create2()(
+  persist2(
+    (set, get) => ({
+      motion: 5,
+      prefersReducedMotion: false,
+      customizationMode: "simple",
+      customColors: {},
+      savedPalettes: [],
+      customFontThemes: {},
+      savedFontThemes: [],
+      setMotion: (level) => set({ motion: level }),
+      setPrefersReducedMotion: (value) => set({ prefersReducedMotion: value }),
+      setCustomizationMode: (mode) => set({ customizationMode: mode }),
+      setCustomPrimaryColor: (theme, mode, hexColor) => {
+        const state = get();
+        const currentPalette = state.customColors[theme]?.[mode];
+        const scale = generateColorScale(hexColor);
+        const primaryForeground = getOptimalForeground2(hexColor);
+        const derivedTokens = computeDerivedTokens("--color-primary", hexColor, mode);
+        const isSimple = state.customizationMode === "simple";
+        const palette = {
+          primary: hexColor,
+          primaryForeground,
+          secondary: isSimple ? void 0 : currentPalette?.secondary,
+          secondaryForeground: isSimple ? void 0 : currentPalette?.secondaryForeground,
+          accent: isSimple ? void 0 : currentPalette?.accent,
+          accentForeground: isSimple ? void 0 : currentPalette?.accentForeground,
+          scale,
+          derivedTokens
+        };
+        set((state2) => ({
+          customColors: {
+            ...state2.customColors,
+            [theme]: {
+              ...state2.customColors[theme],
+              [mode]: palette
+            }
+          }
+        }));
+      },
+      setCustomSecondaryColor: (theme, mode, hexColor) => {
+        const state = get();
+        const currentPalette = state.customColors[theme]?.[mode];
+        if (!currentPalette) return;
+        const secondaryForeground = getOptimalForeground2(hexColor);
+        const derivedTokens = computeDerivedTokens("--color-secondary", hexColor, mode);
+        set((state2) => ({
+          customColors: {
+            ...state2.customColors,
+            [theme]: {
+              ...state2.customColors[theme],
+              [mode]: {
+                ...currentPalette,
+                secondary: hexColor,
+                secondaryForeground,
+                derivedTokens: {
+                  ...currentPalette.derivedTokens,
+                  ...derivedTokens
+                }
+              }
+            }
+          }
+        }));
+      },
+      setCustomAccentColor: (theme, mode, hexColor) => {
+        const state = get();
+        const currentPalette = state.customColors[theme]?.[mode];
+        if (!currentPalette) return;
+        const accentForeground = getOptimalForeground2(hexColor);
+        const derivedTokens = computeDerivedTokens("--color-accent", hexColor, mode);
+        set((state2) => ({
+          customColors: {
+            ...state2.customColors,
+            [theme]: {
+              ...state2.customColors[theme],
+              [mode]: {
+                ...currentPalette,
+                accent: hexColor,
+                accentForeground,
+                derivedTokens: {
+                  ...currentPalette.derivedTokens,
+                  ...derivedTokens
+                }
+              }
+            }
+          }
+        }));
+      },
+      applyColorPalette: (theme, mode, colors) => {
+        const scale = generateColorScale(colors.primary);
+        const primaryForeground = getOptimalForeground2(colors.primary);
+        let derivedTokens = computeDerivedTokens("--color-primary", colors.primary, mode);
+        const secondary = colors.secondary;
+        const secondaryForeground = secondary ? getOptimalForeground2(secondary) : void 0;
+        if (secondary) {
+          const secondaryDerived = computeDerivedTokens("--color-secondary", secondary, mode);
+          derivedTokens = { ...derivedTokens, ...secondaryDerived };
+        }
+        const accent = colors.accent;
+        const accentForeground = accent ? getOptimalForeground2(accent) : void 0;
+        if (accent) {
+          const accentDerived = computeDerivedTokens("--color-accent", accent, mode);
+          derivedTokens = { ...derivedTokens, ...accentDerived };
+        }
+        const palette = {
+          name: colors.name,
+          description: colors.description,
+          primary: colors.primary,
+          primaryForeground,
+          secondary,
+          secondaryForeground,
+          accent,
+          accentForeground,
+          scale,
+          derivedTokens
+        };
+        set((state) => ({
+          customColors: {
+            ...state.customColors,
+            [theme]: {
+              ...state.customColors[theme],
+              [mode]: palette
+            }
+          }
+        }));
+      },
+      resetCustomColors: (theme, mode) => {
+        if (mode) {
+          set((state) => ({
+            customColors: {
+              ...state.customColors,
+              [theme]: {
+                ...state.customColors[theme],
+                [mode]: void 0
+              }
+            }
+          }));
+        } else {
+          set((state) => {
+            const { [theme]: _, ...rest } = state.customColors;
+            return { customColors: rest };
+          });
+        }
+      },
+      getActiveColorPalette: (theme, mode) => {
+        return get().customColors[theme]?.[mode] || null;
+      },
+      // Saved palette management
+      savePalette: (paletteData) => {
+        const id = `custom-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const newPalette = {
+          ...paletteData,
+          id,
+          category: "custom",
+          createdAt: Date.now()
+        };
+        set((state) => ({
+          savedPalettes: [...state.savedPalettes, newPalette]
+        }));
+      },
+      updatePalette: (id, updates) => {
+        set((state) => ({
+          savedPalettes: state.savedPalettes.map(
+            (p) => p.id === id ? { ...p, ...updates } : p
+          )
+        }));
+      },
+      renamePalette: (id, newName) => {
+        set((state) => ({
+          savedPalettes: state.savedPalettes.map(
+            (p) => p.id === id ? { ...p, name: newName } : p
+          )
+        }));
+      },
+      deletePalette: (id) => {
+        set((state) => ({
+          savedPalettes: state.savedPalettes.filter((p) => p.id !== id)
+        }));
+      },
+      reorderPalettes: (palettes) => {
+        set({ savedPalettes: palettes });
+      },
+      getSavedPalettes: () => {
+        return get().savedPalettes;
+      },
+      // Font theme management
+      applyFontTheme: (theme, mode, fontTheme) => {
+        set((state) => ({
+          customFontThemes: {
+            ...state.customFontThemes,
+            [theme]: {
+              ...state.customFontThemes[theme],
+              [mode]: fontTheme
+            }
+          }
+        }));
+      },
+      resetCustomFonts: (theme, mode) => {
+        if (mode) {
+          set((state) => ({
+            customFontThemes: {
+              ...state.customFontThemes,
+              [theme]: {
+                ...state.customFontThemes[theme],
+                [mode]: void 0
+              }
+            }
+          }));
+        } else {
+          set((state) => {
+            const { [theme]: _, ...rest } = state.customFontThemes;
+            return { customFontThemes: rest };
+          });
+        }
+      },
+      getActiveFontTheme: (theme, mode) => {
+        return get().customFontThemes[theme]?.[mode] || null;
+      },
+      // Saved font theme management
+      saveFontTheme: (fontThemeData) => {
+        const id = `font-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const newFontTheme = {
+          ...fontThemeData,
+          id,
+          category: "custom",
+          createdAt: Date.now(),
+          isCustom: true
+        };
+        set((state) => ({
+          savedFontThemes: [...state.savedFontThemes, newFontTheme]
+        }));
+      },
+      updateFontTheme: (id, updates) => {
+        set((state) => ({
+          savedFontThemes: state.savedFontThemes.map(
+            (ft) => ft.id === id ? { ...ft, ...updates } : ft
+          )
+        }));
+      },
+      renameFontTheme: (id, newName) => {
+        set((state) => ({
+          savedFontThemes: state.savedFontThemes.map(
+            (ft) => ft.id === id ? { ...ft, name: newName } : ft
+          )
+        }));
+      },
+      deleteFontTheme: (id) => {
+        set((state) => ({
+          savedFontThemes: state.savedFontThemes.filter((ft) => ft.id !== id)
+        }));
+      },
+      reorderFontThemes: (fontThemes) => {
+        set({ savedFontThemes: fontThemes });
+      },
+      getSavedFontThemes: () => {
+        return get().savedFontThemes;
+      }
+    }),
+    {
+      name: "ecosystem-customizer",
+      version: 4,
+      partialize: (state) => ({
+        motion: state.motion,
+        prefersReducedMotion: state.prefersReducedMotion,
+        customizationMode: state.customizationMode,
+        customColors: state.customColors,
+        savedPalettes: state.savedPalettes,
+        customFontThemes: state.customFontThemes,
+        savedFontThemes: state.savedFontThemes
+      })
+    }
+  )
+);
+
+// src/providers/ThemeProvider.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var themeTokens = {
+  studio: studioTokens,
+  terra: terraTokens,
+  volt: voltTokens,
+  speedboat: speedboatTokens
+};
+var fontFamilies = {
+  studio: {
+    heading: "var(--font-studio-heading)",
+    body: "var(--font-studio-body)",
+    mono: "var(--font-mono)"
+  },
+  terra: {
+    sans: "var(--font-terra-body)",
+    serif: "var(--font-terra-heading)",
+    mono: "var(--font-mono)"
+  },
+  volt: {
+    sans: "var(--font-volt-heading)",
+    mono: "var(--font-mono)"
+  },
+  speedboat: {
+    heading: "var(--font-montserrat)",
+    body: "var(--font-roboto)",
+    mono: "var(--font-mono)"
+  }
+};
+function extractBlurValue(blurFunction) {
+  const match = blurFunction.match(/blur\(([^)]+)\)/);
+  return match ? match[1] : "8px";
+}
+function getThemeVars(theme, mode, motionIntensity) {
+  const tokens = themeTokens[theme];
+  const modeTokens = tokens[mode];
+  const colors = modeTokens?.colors;
+  const effects = modeTokens?.effects;
+  const fonts = fontFamilies[theme];
+  const motion = tokens.motion;
+  const interactions = tokens.interactions;
+  const duration = motion?.getDuration?.(motionIntensity) || "300ms";
+  const durationMs = parseInt(duration) || 300;
+  return {
+    // Colors - Base
+    "--color-background": colors?.background || "#ffffff",
+    "--color-background-secondary": colors?.backgroundSecondary || colors?.background || "#fafafa",
+    "--color-background-tertiary": colors?.backgroundTertiary || colors?.backgroundSecondary || colors?.background || "#f5f5f5",
+    "--color-foreground": colors?.foreground || "#0a0a0a",
+    "--color-primary": colors?.primary || "#0a0a0a",
+    "--color-primary-foreground": colors?.primaryForeground || "#ffffff",
+    "--color-secondary": colors?.secondary || "#f5f5f5",
+    "--color-secondary-foreground": colors?.secondaryForeground || "#0a0a0a",
+    "--color-accent": colors?.accent || colors?.primary || "#0070f3",
+    "--color-accent-foreground": colors?.accentForeground || "#ffffff",
+    "--color-success": colors?.success || "#00a86b",
+    "--color-success-foreground": colors?.successForeground || "#ffffff",
+    "--color-warning": colors?.warning || "#f59e0b",
+    "--color-warning-foreground": colors?.warningForeground || "#ffffff",
+    "--color-error": colors?.error || "#ef4444",
+    "--color-error-foreground": colors?.errorForeground || "#ffffff",
+    "--color-info": colors?.info || colors?.accent || "#0070f3",
+    "--color-info-foreground": colors?.infoForeground || "#ffffff",
+    "--color-glass": colors?.glass || "rgba(255, 255, 255, 0.7)",
+    "--color-glass-border": colors?.glassBorder || "rgba(0, 0, 0, 0.1)",
+    // Semantic color aliases (matching README examples)
+    "--color-text-primary": colors?.foreground || "#0a0a0a",
+    "--color-text-secondary": colors?.foregroundSecondary || "#525252",
+    "--color-text-muted": colors?.foregroundTertiary || "#a3a3a3",
+    "--color-surface": colors?.backgroundSecondary || colors?.background || "#fafafa",
+    "--color-border": colors?.border || colors?.glassBorder || "rgba(0, 0, 0, 0.1)",
+    "--color-focus": colors?.accent || colors?.primary || "#0070f3",
+    // Links and focus rings (can be overridden by derived tokens)
+    "--color-link": colors?.link || colors?.primary || "#0a0a0a",
+    "--color-ring": colors?.ring || colors?.primary || "#0a0a0a",
+    // Interactive states
+    "--color-hover": colors?.hover || colors?.backgroundSecondary || "#fafafa",
+    "--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 (full function for style attributes)
+    "--effect-blur-sm": effects?.blur?.sm || "blur(4px)",
+    "--effect-blur-md": effects?.blur?.md || "blur(8px)",
+    "--effect-blur-lg": effects?.blur?.lg || "blur(16px)",
+    "--effect-blur-xl": effects?.blur?.xl || effects?.blur?.lg || "blur(24px)",
+    // Effects - Blur (raw values for Tailwind blur-*/backdrop-blur-* utilities)
+    "--blur-sm": extractBlurValue(effects?.blur?.sm || "blur(4px)"),
+    "--blur-md": extractBlurValue(effects?.blur?.md || "blur(8px)"),
+    "--blur-lg": extractBlurValue(effects?.blur?.lg || "blur(16px)"),
+    "--blur-xl": extractBlurValue(effects?.blur?.xl || "blur(24px)"),
+    // Effects - Shadow (complete set)
+    "--effect-shadow-sm": effects?.shadow?.sm || "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    "--effect-shadow-md": effects?.shadow?.md || "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+    "--effect-shadow-lg": effects?.shadow?.lg || "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+    "--effect-shadow-xl": effects?.shadow?.xl || "0 20px 25px -5px rgba(0, 0, 0, 0.1)",
+    "--effect-shadow-2xl": effects?.shadow?.["2xl"] || "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    // Interaction tokens (theme-aware)
+    "--color-interaction-overlay": interactions?.hover?.overlayColor?.[mode] || (mode === "dark" ? "#ffffff" : "#000000"),
+    "--opacity-interaction-hover": String(interactions?.hover?.opacity ?? 0.08),
+    "--scale-interaction-active": String(interactions?.active?.scale ?? 0.98),
+    "--color-interaction-focus-ring": colors?.ring || colors?.primary || "#0a0a0a",
+    "--width-interaction-focus-ring": interactions?.focus?.ringWidth || "2px",
+    "--width-interaction-focus-offset": interactions?.focus?.ringOffset || "2px",
+    "--opacity-interaction-disabled": String(interactions?.disabled?.opacity ?? 0.5),
+    // Typography - Font Families
+    "--font-heading": fonts?.heading || (theme === "terra" && fonts?.serif ? fonts.serif : fonts?.sans) || "var(--font-studio-heading)",
+    "--font-body": fonts?.body || fonts?.sans || "var(--font-studio-body)",
+    "--font-mono": fonts?.mono || "var(--font-studio-mono)",
+    // Motion - Easing (complete set)
+    "--ease-default": motion?.ease?.default || "cubic-bezier(0.4, 0, 0.2, 1)",
+    "--ease-in": motion?.ease?.in || "cubic-bezier(0.4, 0, 1, 1)",
+    "--ease-out": motion?.ease?.out || "cubic-bezier(0, 0, 0.2, 1)",
+    "--ease-spring": motion?.ease?.spring || "cubic-bezier(0.16, 1, 0.3, 1)",
+    // Motion - Duration (computed from theme + user motion preference)
+    "--duration-default": duration,
+    "--duration-fast": `${Math.max(0, Math.round(durationMs * 0.5))}ms`,
+    "--duration-slow": `${Math.min(1e3, Math.round(durationMs * 1.5))}ms`,
+    // Syntax Highlighting - Based on VS Code Dark+ theme
+    "--syntax-comment": mode === "light" ? syntaxColors.light.comment : syntaxColors.dark.comment,
+    "--syntax-keyword": mode === "light" ? syntaxColors.light.keyword : syntaxColors.dark.keyword,
+    "--syntax-function": mode === "light" ? syntaxColors.light.function : syntaxColors.dark.function,
+    "--syntax-string": mode === "light" ? syntaxColors.light.string : syntaxColors.dark.string,
+    "--syntax-number": mode === "light" ? syntaxColors.light.number : syntaxColors.dark.number,
+    "--syntax-boolean": mode === "light" ? syntaxColors.light.boolean : syntaxColors.dark.boolean,
+    "--syntax-operator": mode === "light" ? syntaxColors.light.operator : syntaxColors.dark.operator,
+    "--syntax-property": mode === "light" ? syntaxColors.light.property : syntaxColors.dark.property,
+    "--syntax-className": mode === "light" ? syntaxColors.light.className : syntaxColors.dark.className,
+    "--syntax-tag": mode === "light" ? syntaxColors.light.tag : syntaxColors.dark.tag,
+    "--syntax-attribute": mode === "light" ? syntaxColors.light.attribute : syntaxColors.dark.attribute,
+    "--syntax-variable": mode === "light" ? syntaxColors.light.variable : syntaxColors.dark.variable,
+    "--syntax-punctuation": mode === "light" ? syntaxColors.light.punctuation : syntaxColors.dark.punctuation,
+    "--syntax-plain": mode === "light" ? syntaxColors.light.plain : syntaxColors.dark.plain,
+    // Code Block Backgrounds and Borders - Accessible contrast (WCAG AA 4.5:1)
+    "--code-block-bg": mode === "light" ? codeColors.light.blockBackground : codeColors.dark.blockBackground,
+    "--code-inline-bg": mode === "light" ? codeColors.light.inlineBackground : codeColors.dark.inlineBackground,
+    "--code-border": mode === "light" ? codeColors.light.border : codeColors.dark.border
+  };
+}
+function mergeCustomColorTokens(baseTokens, customPalette) {
+  return {
+    ...baseTokens,
+    // Override primary color
+    "--color-primary": customPalette.primary,
+    "--color-primary-foreground": customPalette.primaryForeground,
+    // Apply color scale (for utilities like bg-primary-200)
+    "--color-primary-50": customPalette.scale[50],
+    "--color-primary-100": customPalette.scale[100],
+    "--color-primary-200": customPalette.scale[200],
+    "--color-primary-300": customPalette.scale[300],
+    "--color-primary-400": customPalette.scale[400],
+    "--color-primary-500": customPalette.scale[500],
+    "--color-primary-600": customPalette.scale[600],
+    "--color-primary-700": customPalette.scale[700],
+    "--color-primary-800": customPalette.scale[800],
+    "--color-primary-900": customPalette.scale[900],
+    // Override secondary color if provided (advanced mode)
+    ...customPalette.secondary && {
+      "--color-secondary": customPalette.secondary,
+      "--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 || baseTokens["--color-accent-foreground"]
+    },
+    // Apply ALL derived tokens from dependency graph
+    ...customPalette.derivedTokens
+  };
+}
+function validateThemeTokens(theme, mode) {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
+  const root = document.documentElement;
+  const style = getComputedStyle(root);
+  const requiredTokens = [
+    "--color-background",
+    "--color-foreground",
+    "--color-primary",
+    "--color-primary-foreground",
+    "--color-border",
+    "--color-ring",
+    "--font-heading",
+    "--font-body",
+    "--font-mono"
+  ];
+  const missingTokens = [];
+  const invalidTokens = [];
+  requiredTokens.forEach((token) => {
+    const value = style.getPropertyValue(token).trim();
+    if (!value) {
+      missingTokens.push(token);
+    } else if (token.startsWith("--color-") && !value.match(/^(#|rgb|hsl|var\()/)) {
+      invalidTokens.push(`${token} = "${value}"`);
+    } else if (token.startsWith("--font-") && value === "") {
+      invalidTokens.push(`${token} = empty`);
+    }
+  });
+  if (missingTokens.length > 0) {
+    console.warn(
+      `[ThemeProvider] Missing CSS variables for theme "${theme}" (${mode} mode):`,
+      missingTokens
+    );
+  }
+  if (invalidTokens.length > 0) {
+    console.warn(
+      `[ThemeProvider] Invalid CSS variable values for theme "${theme}" (${mode} mode):`,
+      invalidTokens
+    );
+  }
+  if (missingTokens.length === 0 && invalidTokens.length === 0) {
+    console.log(`[ThemeProvider] \u2713 Theme validation passed for "${theme}" (${mode} mode)`);
+  }
+}
+function ThemeProvider({ children, defaultTheme, defaultMode }) {
+  const { theme, mode, setTheme, setMode } = useThemeStore();
+  const customPalette = useCustomizer((state) => state.customColors?.[theme]?.[mode]);
+  const motionIntensity = useCustomizer((state) => state.motion);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    if (!defaultTheme && !defaultMode) return;
+    const persisted = typeof window !== "undefined" && localStorage.getItem("ecosystem-theme");
+    if (persisted) return;
+    if (defaultTheme) setTheme(defaultTheme);
+    if (defaultMode) setMode(defaultMode);
+  }, []);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!mounted) return;
+    setIsTransitioning(true);
+    const root = document.documentElement;
+    const baseTokens = getThemeVars(theme, mode, motionIntensity);
+    if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+      console.log("[ThemeProvider] Update:", {
+        theme,
+        mode,
+        motionIntensity,
+        hasCustomPalette: !!customPalette,
+        customPrimary: customPalette?.primary,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+    }
+    const finalTokens = customPalette ? mergeCustomColorTokens(baseTokens, customPalette) : baseTokens;
+    root.classList.add("theme-transitioning");
+    Object.entries(finalTokens).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+    root.setAttribute("data-theme", theme);
+    root.setAttribute("data-mode", mode);
+    root.setAttribute("data-custom-colors", customPalette ? "active" : "default");
+    if (mode === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    validateThemeTokens(theme, mode);
+    const timeout = setTimeout(() => {
+      root.classList.remove("theme-transitioning");
+      setIsTransitioning(false);
+    }, 400);
+    return () => clearTimeout(timeout);
+  }, [theme, mode, mounted, customPalette, motionIntensity]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+export {
+  ThemeProvider
+};
+//# sourceMappingURL=providers.mjs.map