@thesage/ui 1.1.0 → 1.3.1

package/dist/providers.mjs

@@ -37,225 +37,6 @@ var useThemeStore = create()(
 import { create as create2 } from "zustand";
 import { persist as persist2 } 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: {
@@ -765,156 +546,203 @@ var voltTokens = {
   }
 };
 
-// ../tokens/src/typography.ts
-var fontSizes = {
-  // Body text scale
-  xs: { base: "0.75rem", mobile: "0.75rem" },
-  // 12px
-  sm: { base: "0.875rem", mobile: "0.875rem" },
-  // 14px
-  base: { base: "1rem", mobile: "1rem" },
-  // 16px
-  lg: { base: "1.125rem", mobile: "1rem" },
-  // 18px / 16px mobile
-  xl: { base: "1.25rem", mobile: "1.125rem" },
-  // 20px / 18px mobile
-  "2xl": { base: "1.5rem", mobile: "1.25rem" },
-  // 24px / 20px mobile
-  "3xl": { base: "1.875rem", mobile: "1.5rem" },
-  // 30px / 24px mobile
-  // Heading scale (h6 → h1)
-  "4xl": { base: "2.25rem", mobile: "1.875rem" },
-  // 36px / 30px - h3
-  "5xl": { base: "3rem", mobile: "2.25rem" },
-  // 48px / 36px - h2
-  "6xl": { base: "3.75rem", mobile: "2.5rem" },
-  // 60px / 40px - h1
-  "7xl": { base: "4.5rem", mobile: "3rem" },
-  // 72px / 48px - Display
-  "8xl": { base: "6rem", mobile: "3.75rem" },
-  // 96px / 60px - Hero
-  "9xl": { base: "8rem", mobile: "4.5rem" }
-  // 128px / 72px - Ultra
-};
-var fontWeights = {
-  thin: "100",
-  extralight: "200",
-  light: "300",
-  normal: "400",
-  medium: "500",
-  semibold: "600",
-  bold: "700",
-  extrabold: "800",
-  black: "900"
-};
-var lineHeights = {
-  none: "1",
-  tight: "1.25",
-  snug: "1.375",
-  normal: "1.5",
-  relaxed: "1.625",
-  loose: "1.75",
-  extraloose: "2"
-};
-var letterSpacing = {
-  tighter: "-0.05em",
-  tight: "-0.025em",
-  normal: "0",
-  wide: "0.025em",
-  wider: "0.05em",
-  widest: "0.1em"
-};
-var typePresets = {
-  "display-large": {
-    size: fontSizes["8xl"],
-    weight: fontWeights.bold,
-    lineHeight: lineHeights.none,
-    letterSpacing: letterSpacing.tighter,
-    description: "Large hero text, landing pages"
-  },
-  "display": {
-    size: fontSizes["7xl"],
-    weight: fontWeights.bold,
-    lineHeight: lineHeights.tight,
-    letterSpacing: letterSpacing.tight,
-    description: "Hero sections, major headings"
-  },
-  "heading-1": {
-    size: fontSizes["6xl"],
-    weight: fontWeights.bold,
-    lineHeight: lineHeights.tight,
-    letterSpacing: letterSpacing.tight,
-    description: "Page titles, h1"
-  },
-  "heading-2": {
-    size: fontSizes["5xl"],
-    weight: fontWeights.bold,
-    lineHeight: lineHeights.tight,
-    letterSpacing: letterSpacing.normal,
-    description: "Section titles, h2"
-  },
-  "heading-3": {
-    size: fontSizes["4xl"],
-    weight: fontWeights.semibold,
-    lineHeight: lineHeights.snug,
-    letterSpacing: letterSpacing.normal,
-    description: "Subsection titles, h3"
-  },
-  "heading-4": {
-    size: fontSizes["2xl"],
-    weight: fontWeights.semibold,
-    lineHeight: lineHeights.snug,
-    letterSpacing: letterSpacing.normal,
-    description: "Component titles, h4"
-  },
-  "heading-5": {
-    size: fontSizes.xl,
-    weight: fontWeights.medium,
-    lineHeight: lineHeights.normal,
-    letterSpacing: letterSpacing.normal,
-    description: "Small headings, h5"
-  },
-  "heading-6": {
-    size: fontSizes.lg,
-    weight: fontWeights.medium,
-    lineHeight: lineHeights.normal,
-    letterSpacing: letterSpacing.normal,
-    description: "Tiny headings, h6"
-  },
-  "body-large": {
-    size: fontSizes.lg,
-    weight: fontWeights.normal,
-    lineHeight: lineHeights.relaxed,
-    letterSpacing: letterSpacing.normal,
-    description: "Lead paragraphs, intro text"
-  },
-  "body": {
-    size: fontSizes.base,
-    weight: fontWeights.normal,
-    lineHeight: lineHeights.normal,
-    letterSpacing: letterSpacing.normal,
-    description: "Default body text"
+// ../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)"
+      }
+    }
   },
-  "body-small": {
-    size: fontSizes.sm,
-    weight: fontWeights.normal,
-    lineHeight: lineHeights.normal,
-    letterSpacing: letterSpacing.normal,
-    description: "Small body text, fine print"
+  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)"
+      }
+    }
   },
-  "caption": {
-    size: fontSizes.xs,
-    weight: fontWeights.normal,
-    lineHeight: lineHeights.snug,
-    letterSpacing: letterSpacing.wide,
-    description: "Captions, labels, metadata"
+  /**
+   * 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)"
+    }
   },
-  "overline": {
-    size: fontSizes.xs,
-    weight: fontWeights.semibold,
-    lineHeight: lineHeights.normal,
-    letterSpacing: letterSpacing.widest,
-    description: "Eyebrows, categories, all-caps labels"
+  /**
+   * 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"
+    }
   }
 };
 
@@ -1735,7 +1563,8 @@ import { Fragment, jsx } from "react/jsx-runtime";
 var themeTokens = {
   studio: studioTokens,
   terra: terraTokens,
-  volt: voltTokens
+  volt: voltTokens,
+  speedboat: speedboatTokens
 };
 var fontFamilies = {
   studio: {
@@ -1751,6 +1580,11 @@ var fontFamilies = {
   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) {
@@ -1795,6 +1629,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)",
@@ -1833,9 +1677,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,
@@ -1853,12 +1697,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:
@@ -1912,11 +1756,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] = 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);
   }, []);
@@ -1924,7 +1775,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,
@@ -1932,7 +1783,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);