app-studio 0.6.49 → 0.6.50

package/dist/app-studio.cjs.development.js

@@ -7,32 +7,9 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var Color = _interopDefault(require('color-convert'));
+var hyphenate = _interopDefault(require('hyphenate-style-name'));
 
 const defaultLightPalette = {
-  whiteAlpha: {
-    50: 'rgba(255, 255, 255, 0.04)',
-    100: 'rgba(255, 255, 255, 0.06)',
-    200: 'rgba(255, 255, 255, 0.08)',
-    300: 'rgba(255, 255, 255, 0.16)',
-    400: 'rgba(255, 255, 255, 0.24)',
-    500: 'rgba(255, 255, 255, 0.36)',
-    600: 'rgba(255, 255, 255, 0.48)',
-    700: 'rgba(255, 255, 255, 0.64)',
-    800: 'rgba(255, 255, 255, 0.80)',
-    900: 'rgba(255, 255, 255, 0.92)'
-  },
-  blackAlpha: {
-    50: 'rgba(0, 0, 0, 0.04)',
-    100: 'rgba(0, 0, 0, 0.06)',
-    200: 'rgba(0, 0, 0, 0.08)',
-    300: 'rgba(0, 0, 0, 0.16)',
-    400: 'rgba(0, 0, 0, 0.24)',
-    500: 'rgba(0, 0, 0, 0.36)',
-    600: 'rgba(0, 0, 0, 0.48)',
-    700: 'rgba(0, 0, 0, 0.64)',
-    800: 'rgba(0, 0, 0, 0.80)',
-    900: 'rgba(0, 0, 0, 0.92)'
-  },
   white: {
     50: 'rgba(255, 255, 255, 0.04)',
     100: 'rgba(255, 255, 255, 0.08)',
@@ -344,34 +321,70 @@ const defaultLightPalette = {
     700: '#334155',
     800: '#1e293b',
     900: '#0f172a'
+  },
+  slate: {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a'
+  },
+  zinc: {
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b'
+  },
+  neutral: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#e5e5e5',
+    300: '#d4d4d4',
+    400: '#a3a3a3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717'
+  },
+  stone: {
+    50: '#fafaf9',
+    100: '#f5f5f4',
+    200: '#e7e5e4',
+    300: '#d6d3d1',
+    400: '#a8a29e',
+    500: '#78716c',
+    600: '#57534e',
+    700: '#44403c',
+    800: '#292524',
+    900: '#1c1917'
   }
 };
 const defaultDarkPalette = {
-  whiteAlpha: {
-    50: 'rgba(255, 255, 255, 0.04)',
-    100: 'rgba(255, 255, 255, 0.06)',
-    200: 'rgba(255, 255, 255, 0.08)',
-    300: 'rgba(255, 255, 255, 0.16)',
-    400: 'rgba(255, 255, 255, 0.24)',
-    500: 'rgba(255, 255, 255, 0.36)',
-    600: 'rgba(255, 255, 255, 0.48)',
-    700: 'rgba(255, 255, 255, 0.64)',
-    800: 'rgba(255, 255, 255, 0.80)',
-    900: 'rgba(255, 255, 255, 0.92)'
-  },
-  blackAlpha: {
+  white: {
     50: 'rgba(0, 0, 0, 0.04)',
-    100: 'rgba(0, 0, 0, 0.06)',
-    200: 'rgba(0, 0, 0, 0.08)',
-    300: 'rgba(0, 0, 0, 0.16)',
-    400: 'rgba(0, 0, 0, 0.24)',
-    500: 'rgba(0, 0, 0, 0.36)',
-    600: 'rgba(0, 0, 0, 0.48)',
-    700: 'rgba(0, 0, 0, 0.64)',
-    800: 'rgba(0, 0, 0, 0.80)',
-    900: 'rgba(0, 0, 0, 0.92)'
+    100: 'rgba(0, 0, 0, 0.08)',
+    200: 'rgba(0, 0, 0, 0.16)',
+    300: 'rgba(0, 0, 0, 0.24)',
+    400: 'rgba(0, 0, 0, 0.36)',
+    500: 'rgba(0, 0, 0, 0.48)',
+    600: 'rgba(0, 0, 0, 0.64)',
+    700: 'rgba(0, 0, 0, 0.80)',
+    800: 'rgba(0, 0, 0, 0.92)',
+    900: 'rgba(0, 0, 0, 1)'
   },
-  white: {
+  black: {
     50: 'rgba(255, 255, 255, 0.04)',
     100: 'rgba(255, 255, 255, 0.08)',
     200: 'rgba(255, 255, 255, 0.16)',
@@ -383,18 +396,6 @@ const defaultDarkPalette = {
     800: 'rgba(255, 255, 255, 0.92)',
     900: 'rgba(255, 255, 255, 1)'
   },
-  black: {
-    50: 'rgba(0, 0, 0, 0.04)',
-    100: 'rgba(0, 0, 0, 0.08)',
-    200: 'rgba(0, 0, 0, 0.16)',
-    300: 'rgba(0, 0, 0, 0.24)',
-    400: 'rgba(0, 0, 0, 0.36)',
-    500: 'rgba(0, 0, 0, 0.48)',
-    600: 'rgba(0, 0, 0, 0.64)',
-    700: 'rgba(0, 0, 0, 0.80)',
-    800: 'rgba(0, 0, 0, 0.92)',
-    900: 'rgba(0, 0, 0, 1)'
-  },
   rose: {
     50: '#330517',
     100: '#4a031e',
@@ -682,6 +683,54 @@ const defaultDarkPalette = {
     700: '#e2e8f0',
     800: '#f1f5f9',
     900: '#f8fafc'
+  },
+  slate: {
+    50: '#0f172a',
+    100: '#1e293b',
+    200: '#334155',
+    300: '#475569',
+    400: '#64748b',
+    500: '#94a3b8',
+    600: '#cbd5e1',
+    700: '#e2e8f0',
+    800: '#f1f5f9',
+    900: '#f8fafc'
+  },
+  zinc: {
+    50: '#18181b',
+    100: '#27272a',
+    200: '#3f3f46',
+    300: '#52525b',
+    400: '#71717a',
+    500: '#a1a1aa',
+    600: '#d4d4d8',
+    700: '#e4e4e7',
+    800: '#f4f4f5',
+    900: '#fafafa'
+  },
+  neutral: {
+    50: '#171717',
+    100: '#262626',
+    200: '#404040',
+    300: '#525252',
+    400: '#737373',
+    500: '#a3a3a3',
+    600: '#d4d4d4',
+    700: '#e5e5e5',
+    800: '#f5f5f5',
+    900: '#fafafa'
+  },
+  stone: {
+    50: '#1c1917',
+    100: '#292524',
+    200: '#44403c',
+    300: '#57534e',
+    400: '#78716c',
+    500: '#a8a29e',
+    600: '#d6d3d1',
+    700: '#e7e5e4',
+    800: '#f5f5f4',
+    900: '#fafaf9'
   }
 };
 const defaultColors = {
@@ -697,44 +746,141 @@ const defaultColors = {
   orange: '#FFA500',
   brown: '#A52A2A',
   purple: '#800080',
-  pink: '#FFC0CB',
-  lime: '#00FF00',
-  teal: '#008080',
-  navy: '#000080',
-  olive: '#808000',
-  maroon: '#800000',
-  gold: '#FFD700',
-  silver: '#C0C0C0',
-  indigo: '#4B0082',
-  violet: '#EE82EE',
-  beige: '#F5F5DC',
-  turquoise: '#40E0D0',
-  coral: '#FF7F50',
-  chocolate: '#D2691E',
-  skyBlue: '#87CEEB',
-  plum: '#DDA0DD',
-  darkGreen: '#006400',
-  salmon: '#FA8072'
+  pink: '#FFC0CB'
 };
 const defaultLightColors = {
-  ...defaultColors,
-  dark: '#a1a1aa',
-  white: '#FFFFFF',
-  black: '#000000'
+  ...defaultColors
 };
 const defaultDarkColors = {
   ...defaultColors,
-  dark: '#adb5bd',
   white: '#000000',
   black: '#FFFFFF'
 };
+// Centralized regex for color token detection
+// Matches color.x.y.z or theme.x.y
+const COLOR_TOKEN_REGEX = /(color\.[a-zA-Z0-9.]+|theme\.[a-zA-Z0-9.]+)/g;
+/**
+ * Checks if a value contains color tokens.
+ * @param value - The string to check.
+ * @returns True if the value contains color tokens.
+ */
+const hasColorToken = value => {
+  return value.includes('color.') || value.includes('theme.');
+};
+/**
+ * Replaces color tokens in a string with values returned by a resolver function.
+ * @param value - The string containing color tokens.
+ * @param resolver - A function that takes a token and returns its replacement value.
+ * @returns The string with color tokens replaced.
+ */
+const replaceColorTokens = (value, resolver) => {
+  if (!hasColorToken(value)) {
+    return value;
+  }
+  return value.replace(COLOR_TOKEN_REGEX, token => {
+    return resolver(token);
+  });
+};
 
 // --- Constants ---
 const THEME_PREFIX = 'theme.';
 const COLOR_PREFIX = 'color.';
-const LIGHT_PREFIX = 'light.';
-const DARK_PREFIX = 'dark.';
 const TRANSPARENT = 'transparent';
+// --- CSS Variable Injection Helper ---
+const generateCSSVariables = (theme, lightColors, darkColors) => {
+  const variables = [];
+  const lightVariables = [];
+  const darkVariables = [];
+  const themeVariables = [];
+  // Helper to process object and generate variables
+  const processObject = (obj, prefix, targetArray) => {
+    Object.keys(obj).forEach(key => {
+      const value = obj[key];
+      const variableName = `${prefix}-${key}`.replace(/\./g, '-');
+      if (typeof value === 'object' && value !== null) {
+        processObject(value, variableName, targetArray);
+      } else if (typeof value === 'string' || typeof value === 'number') {
+        targetArray.push(`--${variableName}: ${value};`);
+      }
+    });
+  };
+  // 1. Generate ALL primitive variables (light and dark)
+  // We prefix them with --light-color-... and --dark-color-...
+  processObject(lightColors.main, 'color', variables);
+  processObject(lightColors.palette, 'color', variables);
+  processObject(lightColors.main, 'light-color', lightVariables);
+  processObject(lightColors.palette, 'light-color', lightVariables);
+  processObject(darkColors.main, 'dark-color', darkVariables);
+  processObject(darkColors.palette, 'dark-color', darkVariables);
+  // We collect the names that need mapping
+  const genericColorVars = [];
+  const collectGenericNames = (obj, prefix) => {
+    Object.keys(obj).forEach(key => {
+      const value = obj[key];
+      const variableName = `${prefix}-${key}`.replace(/\./g, '-');
+      if (typeof value === 'object' && value !== null) {
+        collectGenericNames(value, variableName);
+      } else {
+        genericColorVars.push(variableName);
+      }
+    });
+  };
+  collectGenericNames(lightColors.main, 'color');
+  collectGenericNames(lightColors.palette, 'color');
+  // 3. Process Theme variables (references)
+  const processTheme = (obj, prefix) => {
+    Object.keys(obj).forEach(key => {
+      const value = obj[key];
+      const variableName = `${prefix}-${key}`.replace(/\./g, '-');
+      if (typeof value === 'object' && value !== null) {
+        processTheme(value, variableName);
+      } else if (typeof value === 'string') {
+        if (value.startsWith(COLOR_PREFIX)) {
+          // Convert 'color.blue.500' -> 'var(--color-blue-500)'
+          // The underlying --color-blue-500 will change based on scope!
+          const refVar = value.replace(/\./g, '-');
+          themeVariables.push(`--${variableName}: var(--${refVar});`);
+        } else if (value.startsWith(THEME_PREFIX)) {
+          const refVar = value.replace(/\./g, '-');
+          themeVariables.push(`--${variableName}: var(--${refVar});`);
+        } else {
+          themeVariables.push(`--${variableName}: ${value};`);
+        }
+      }
+    });
+  };
+  processTheme(theme, 'theme');
+  // 4. Construct CSS
+  // :root has all primitives
+  // [data-theme='light'] maps color vars to light primitives
+  // [data-theme='dark'] maps color vars to dark primitives
+  const lightMappings = genericColorVars.map(name => `--${name}: var(--light-${name});`).join('\n    ');
+  const darkMappings = genericColorVars.map(name => `--${name}: var(--dark-${name});`).join('\n    ');
+  const css = `
+    :root {
+      /* Primitives */
+      ${variables.join('\n      ')}
+      ${lightVariables.join('\n      ')}
+      ${darkVariables.join('\n      ')}
+      
+      /* Theme Variables (Structural) */
+      ${themeVariables.join('\n      ')}
+    }
+    .app-studio-theme-root {
+      width: 100%;
+      height: 100%;
+      transition: background-color 0.2s, color 0.2s;
+    }
+    [data-theme='light'] {
+      ${lightMappings}
+    }
+    
+    [data-theme='dark'] {
+      ${darkMappings}
+    }
+  `;
+  return css;
+};
 // --- Default Configuration ---
 const defaultThemeMain = {
   primary: `${COLOR_PREFIX}black`,
@@ -743,12 +889,7 @@ const defaultThemeMain = {
   error: `${COLOR_PREFIX}red.500`,
   warning: `${COLOR_PREFIX}orange.500`,
   disabled: `${COLOR_PREFIX}gray.500`,
-  loading: `${COLOR_PREFIX}dark.500`,
-  blend: {
-    mode: 'difference',
-    color: 'white',
-    modeWithBg: 'exclusion'
-  }
+  loading: `${COLOR_PREFIX}dark.500`
 };
 const defaultLightColorConfig = {
   main: defaultLightColors,
@@ -777,6 +918,44 @@ const useTheme = () => {
   }
   return context;
 };
+// --- Helper Function to Convert Color to RGBA with Alpha ---
+/**
+ * Converts a color (hex, rgb, or rgba) to rgba format with specified alpha.
+ * @param color - The base color in hex, rgb, or rgba format
+ * @param alpha - Alpha value on a 0-1000 scale (e.g., 200 = 0.2 opacity)
+ * @returns RGBA color string
+ */
+const convertToRgba = (color, alpha) => {
+  // Normalize alpha to 0-1 range
+  const normalizedAlpha = Math.max(0, Math.min(1000, alpha)) / 1000;
+  // Handle hex colors (#RGB or #RRGGBB)
+  if (color.startsWith('#')) {
+    let hex = color.slice(1);
+    // Convert shorthand hex to full form
+    if (hex.length === 3) {
+      hex = hex.split('').map(char => char + char).join('');
+    }
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${normalizedAlpha})`;
+  }
+  // Handle rgb/rgba colors
+  if (color.startsWith('rgb')) {
+    // Extract the values from rgb() or rgba()
+    const match = color.match(/rgba?\(([^)]+)\)/);
+    if (match) {
+      const values = match[1].split(',').map(v => v.trim());
+      const r = values[0];
+      const g = values[1];
+      const b = values[2];
+      return `rgba(${r}, ${g}, ${b}, ${normalizedAlpha})`;
+    }
+  }
+  // If color format is not recognized, return as-is
+  console.warn(`Unable to convert color "${color}" to rgba format`);
+  return color;
+};
 // --- Deep Merge Function (remains the same, assuming it works as intended) ---
 // Consider using a library like `lodash.merge` or `deepmerge` if complexity grows
 // or edge cases (like merging arrays) need different handling.
@@ -811,7 +990,8 @@ const ThemeProvider = _ref => {
     mode: initialMode = 'light',
     dark: darkOverride = {},
     light: lightOverride = {},
-    children
+    children,
+    strict = false
   } = _ref;
   const [themeMode, setThemeMode] = React.useState(initialMode);
   const colorCache = React.useRef(new Map()).current;
@@ -830,110 +1010,125 @@ const ThemeProvider = _ref => {
     dark: deepMerge(defaultDarkColorConfig, darkOverride)
   }), [lightOverride, darkOverride]);
   const currentColors = React.useMemo(() => themeColors[themeMode], [themeColors, themeMode]);
+  // --- Helper function to resolve color tokens to actual values ---
+  const resolveColorToken = React.useCallback(token => {
+    if (!token || typeof token !== 'string') return String(token);
+    if (token === TRANSPARENT) return token;
+    const colors = currentColors;
+    // Resolve color.* tokens
+    if (token.startsWith(COLOR_PREFIX)) {
+      const keys = token.substring(COLOR_PREFIX.length).split('.');
+      if (keys.length === 1) {
+        // e.g., "color.blue" -> main color
+        const colorValue = colors.main[keys[0]];
+        return typeof colorValue === 'string' ? colorValue : token;
+      } else if (keys.length === 2) {
+        // e.g., "color.blue.500" -> palette color
+        const [colorName, shade] = keys;
+        const shadeValue = colors.palette[colorName]?.[Number(shade)];
+        return typeof shadeValue === 'string' ? shadeValue : token;
+      } else if (keys.length === 3) {
+        // e.g., "color.blue.500.200" -> palette color with alpha
+        // Use color-mix() to apply alpha via CSS variables
+        const [colorName, shade, alphaStr] = keys;
+        const alpha = parseInt(alphaStr, 10);
+        if (!isNaN(alpha)) {
+          const percentage = Math.round(alpha / 1000 * 100);
+          return `color-mix(in srgb, var(--color-${colorName}-${shade}) ${percentage}%, transparent)`;
+        }
+      }
+    }
+    // Resolve theme.* tokens (recursive resolution)
+    if (token.startsWith(THEME_PREFIX)) {
+      const themeKey = token.substring(THEME_PREFIX.length);
+      const themeValue = mergedTheme[themeKey];
+      if (typeof themeValue === 'string') {
+        return resolveColorToken(themeValue);
+      }
+    }
+    return token;
+  }, [currentColors, mergedTheme]);
+  // The mode is now handled by the data-attribute on the container
   // --- Memoized getColor function - Revised for Robustness ---
   const getColor = React.useCallback((name, override) => {
     if (!name || typeof name !== 'string') return String(name); // Handle invalid input
     if (name === TRANSPARENT) return name;
-    // 1. Determine the effective mode for this specific lookup
+    // 1. Check for optimization (CSS vars) if no overrides
+    // This allows instant theme switching via CSS variables without re-render
+    if (!override || Object.keys(override).length === 0) {
+      if (name.startsWith(THEME_PREFIX)) {
+        return `var(--${name.replace(/\./g, '-')})`;
+      }
+      if (name.startsWith(COLOR_PREFIX)) {
+        const parts = name.split('.');
+        // Simple lookup (e.g. color.blue or color.blue.500)
+        if (parts.length < 4) {
+          return `var(--${name.replace(/\./g, '-')})`;
+        }
+      }
+    }
+    // 2. Manual Resolution (Fallback for overrides or complex keys)
     const effectiveMode = override?.themeMode ?? themeMode;
     const needCache = override && Object.keys(override).length === 0;
-    // 2. Create a cache key based on the name and the *effective* mode
     const cacheKey = `${name}-${effectiveMode}`;
-    if (colorCache.has(cacheKey) && needCache) {
+    if (needCache && colorCache.has(cacheKey)) {
       return colorCache.get(cacheKey);
     }
+    // Strict Mode Check
+    if (strict && !name.startsWith(COLOR_PREFIX) && !name.startsWith(THEME_PREFIX) && !name.startsWith('light.') && !name.startsWith('dark.')) {
+      console.warn(`[Theme] Strict mode enabled: '${name}' is not a valid color token.`);
+    }
     // 3. Select the correct color set (light/dark) based on the effective mode
     const colorsToUse = themeColors[effectiveMode];
     if (!colorsToUse) {
       console.warn(`Color set for mode "${effectiveMode}" not found.`);
-      return name; // Fallback if colors for the mode don't exist
+      return name;
     }
-    let resolvedColor = name; // Default fallback is the original name
+    let resolvedColor = name;
     try {
-      // --- Resolve "theme.*" paths ---
-      if (name.startsWith(THEME_PREFIX)) {
-        // console.log(
-        //   `Resolving color "${name}" for mode "${effectiveMode}".`,
-        //   override
-        // );
-        const keys = name.substring(THEME_PREFIX.length).split('.');
-        let value = deepMerge(mergedTheme, override?.theme || {});
-        for (const key of keys) {
-          if (value === undefined || value === null) break; // Stop if path breaks
-          value = value[key];
-        }
-        if (typeof value === 'string' && value !== name) {
-          // Recursively resolve if it points to another color string.
-          // CRITICAL: Pass the *same* effectiveMode down.
-          resolvedColor = getColor(value, override);
-        } else if (value === undefined) {
-          console.warn(`Theme path "${name}" not found.`);
-          resolvedColor = name; // Fallback
-        } else if (typeof value !== 'string') {
-          console.warn(`Theme path "${name}" resolved to a non-string value.`);
-          resolvedColor = name; // Fallback
-        }
-        // If value === name, it resolved to itself, keep fallback
-        // --- Resolve "light.*" or "dark.*" paths directly ---
-      } else if (name.startsWith(LIGHT_PREFIX) || name.startsWith(DARK_PREFIX)) {
-        // Determine which mode to use based on the prefix
-        const specificMode = name.startsWith(LIGHT_PREFIX) ? 'light' : 'dark';
-        const prefixLength = name.startsWith(LIGHT_PREFIX) ? LIGHT_PREFIX.length : DARK_PREFIX.length;
-        // Create a modified name with the color prefix instead
+      // Resolve "light.*" or "dark.*" paths directly
+      if (name.startsWith('light.') || name.startsWith('dark.')) {
+        const prefixLength = name.startsWith('light.') ? 6 : 5;
         const modifiedName = `${COLOR_PREFIX}${name.substring(prefixLength)}`;
-        // Call getColor with the modified name and force the specific mode
-        const specificOverride = {
-          ...override,
-          themeMode: specificMode
-        };
-        resolvedColor = getColor(modifiedName, specificOverride);
-        // --- Resolve "color.*" paths ---
-      } else if (name.startsWith(COLOR_PREFIX)) {
-        // console.log(
-        //   `Resolving color "${name}" for mode "${effectiveMode}".`,
-        //   override
-        // );
+        return `var(--${modifiedName.replace(/\./g, '-')})`;
+      }
+      // Resolve "color.*" paths
+      if (name.startsWith(COLOR_PREFIX)) {
         const keys = name.substring(COLOR_PREFIX.length).split('.');
-        if (keys.length === 1) {
-          // e.g., "color.white"
-          const colorName = keys[0];
-          const main = deepMerge(colorsToUse.main, override?.colors?.main || {});
-          const colorValue = main?.[colorName]; // Use optional chaining
-          if (typeof colorValue === 'string') {
-            resolvedColor = colorValue;
-          } else {
-            console.warn(`Singleton color "${name}" not found in ${effectiveMode} mode.`);
-            resolvedColor = name; // Fallback on unexpected error
+        if (keys.length === 3) {
+          // e.g. "color.black.900.200" (alpha)
+          const [colorName, variant, alphaStr] = keys;
+          const palette = deepMerge(colorsToUse.palette, override?.colors?.palette || {});
+          const shadeValue = palette?.[colorName]?.[variant];
+          const alpha = parseInt(alphaStr, 10);
+          if (typeof shadeValue === 'string' && !isNaN(alpha)) {
+            resolvedColor = convertToRgba(shadeValue, alpha);
           }
         } else if (keys.length === 2) {
-          // e.g., "color.blue.500"
+          // e.g. "color.blue.500"
           const [colorName, variant] = keys;
           const palette = deepMerge(colorsToUse.palette, override?.colors?.palette || {});
           const shadeValue = palette?.[colorName]?.[variant];
           if (typeof shadeValue === 'string') {
             resolvedColor = shadeValue;
-          } else {
-            console.warn(`Palette color "${name}" not found in ${effectiveMode} mode.`);
-            resolvedColor = name; // Fallback on unexpected error
           }
-        } else {
-          console.warn(`Invalid color format: "${name}". Expected 'color.name' or 'color.name.shade'.`);
-          resolvedColor = name; // Fallback on unexpected error
+        } else if (keys.length === 1) {
+          // e.g. "color.blue"
+          const [colorName] = keys;
+          const main = deepMerge(colorsToUse.main, override?.colors?.main || {});
+          const colorValue = main?.[colorName];
+          if (typeof colorValue === 'string') {
+            resolvedColor = colorValue;
+          }
         }
       }
-      // --- Direct Color Value ---
-      // If it's not theme.*, light.*, dark.*, or color.*, assume it's a direct value ('red', '#fff').
-      // resolvedColor remains 'name', which is correct.
     } catch (e) {
-      console.error(`Error resolving color "${name}" for mode "${effectiveMode}":`, e);
-      resolvedColor = name; // Fallback on unexpected error
+      console.error(`Error resolving color "${name}"`, e);
+      resolvedColor = name;
     }
-    // Cache the result (the resolved color or the original name if failed)
     if (needCache) colorCache.set(cacheKey, resolvedColor);
     return resolvedColor;
-  },
-  // Dependencies: mergedTheme, themeColors, themeMode (for default), colorCache
-  [mergedTheme, themeColors, themeMode, colorCache]);
+  }, [mergedTheme, themeColors, themeMode, colorCache, strict]);
   // --- Memoize Context Value ---
   const contextValue = React.useMemo(() => ({
     getColor,
@@ -941,15 +1136,12 @@ const ThemeProvider = _ref => {
     colors: currentColors,
     themeMode,
     setThemeMode
-  }), [getColor, mergedTheme, currentColors, themeMode] // Exclude setThemeMode (stable)
-  );
+  }), [getColor, mergedTheme, currentColors, themeMode]);
   return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      backgroundColor: 'white'
-    }
-  }, children));
+  }, /*#__PURE__*/React__default.createElement("style", {
+    "data-theme": themeMode
+  }, generateCSSVariables(mergedTheme, themeColors.light, themeColors.dark)), children);
 };
 
 // ResponsiveContext.tsx
@@ -1061,7 +1253,101 @@ const ResponsiveProvider = _ref => {
   }, children);
 };
 
+const Shadows = {
+  0: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 1,
+      height: 2
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 1.0
+  },
+  1: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 2,
+      height: 2
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41
+  },
+  2: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 3,
+      height: 3
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22
+  },
+  3: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 4,
+      height: 4
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62
+  },
+  4: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 5,
+      height: 5
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84
+  },
+  5: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 6,
+      height: 6
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 4.65
+  },
+  6: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 7,
+      height: 7
+    },
+    shadowOpacity: 0.29,
+    shadowRadius: 4.65
+  },
+  7: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 8,
+      height: 8
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4.65
+  },
+  8: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 9,
+      height: 9
+    },
+    shadowOpacity: 0.32,
+    shadowRadius: 5.46
+  },
+  9: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 10,
+      height: 10
+    },
+    shadowOpacity: 0.34,
+    shadowRadius: 6.27
+  }
+};
+
 // List of numeric properties that don't need 'px' suffix
+const NumberProps = /*#__PURE__*/new Set(['numberOfLines', 'fontWeight', 'timeStamp', 'flex', 'flexGrow', 'flexShrink', 'order', 'zIndex', 'aspectRatio', 'shadowOpacity', 'shadowRadius', 'scale', 'opacity', 'min', 'max', 'now']);
 // Keys to exclude when passing props to the component
 const excludedKeys = /*#__PURE__*/new Set([
 // Standard styling props
@@ -1080,37 +1366,7 @@ const vendorPrefixToKebabCase = property => {
   if (property.startsWith('--')) {
     return property;
   }
-  // Comprehensive regex to match all vendor prefix patterns
-  // This handles:
-  // 1. Uppercase vendor prefixes (WebkitTransform)
-  // 2. Lowercase vendor prefixes (webkitTransform)
-  // 3. Mixed case vendor prefixes (webkitbackgroundClip)
-  // 4. All lowercase vendor prefixes (webkitbackgroundclip)
-  const vendorPrefixRegex = /^(webkit|moz|ms|o|Webkit|Moz|Ms|O)([A-Za-z])/;
-  if (vendorPrefixRegex.test(property)) {
-    // Extract the prefix and normalize it to lowercase
-    const prefixMatch = property.match(/^(webkit|moz|ms|o|Webkit|Moz|Ms|O)/i);
-    if (prefixMatch) {
-      const prefix = prefixMatch[0].toLowerCase();
-      const restOfProperty = property.slice(prefix.length);
-      // Convert the rest of the property to kebab case
-      let kebabRestOfProperty = restOfProperty;
-      // If the rest starts with an uppercase letter or has uppercase letters, convert to kebab case
-      if (/[A-Z]/.test(restOfProperty)) {
-        kebabRestOfProperty = restOfProperty.replace(/([A-Z])/g, '-$1').toLowerCase();
-      } else if (restOfProperty && restOfProperty[0] === restOfProperty[0].toLowerCase()) {
-        // If the rest starts with a lowercase letter, ensure proper kebab case
-        // This handles cases like webkitbackgroundclip
-        kebabRestOfProperty = restOfProperty.replace(/([A-Z])/g, '-$1').toLowerCase();
-      }
-      // Ensure we don't have double hyphens
-      kebabRestOfProperty = kebabRestOfProperty.replace(/^-/, '');
-      // Return the properly formatted vendor-prefixed property
-      return `-${prefix}-${kebabRestOfProperty}`;
-    }
-  }
-  // Regular camelCase to kebab-case
-  return property.replace(/([A-Z])/g, '-$1').toLowerCase();
+  return hyphenate(property);
 };
 const numericCssProperties = /*#__PURE__*/new Set(['border-bottom-left-radius', 'border-bottom-right-radius', 'border-bottom-width', 'border-left-width', 'border-radius', 'border-right-width', 'border-spacing', 'border-top-left-radius', 'border-top-right-radius', 'border-top-width', 'border-width', 'bottom', 'column-gap', 'column-rule-width', 'column-width', 'font-size', 'gap', 'height', 'left', 'letter-spacing', 'line-height', 'margin', 'margin-bottom', 'margin-left', 'margin-right', 'margin-top', 'max-height', 'max-width', 'min-height', 'min-width', 'outline-offset', 'outline-width', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'perspective', 'right', 'row-gap', 'text-indent', 'top', 'width',
 // Vendor-prefixed properties that need pixel values
@@ -1124,22 +1380,7 @@ const numericCssProperties = /*#__PURE__*/new Set(['border-bottom-left-radius',
  * @returns The property name in kebab-case with appropriate vendor prefixes
  */
 function propertyToKebabCase(property) {
-  // Handle special webkit, moz, ms prefixed properties
-  // Check for both lowercase and uppercase vendor prefixes
-  const vendorPrefixRegex = /^(webkit|moz|ms|o)([A-Z])/i;
-  if (vendorPrefixRegex.test(property)) {
-    const match = property.match(/^(webkit|moz|ms|o)/i);
-    if (match) {
-      // First convert the entire property to kebab case
-      let kebabProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase();
-      // Then ensure the vendor prefix is correctly formatted
-      // This replaces patterns like "webkit-" with "-webkit-"
-      kebabProperty = kebabProperty.replace(/^(webkit|moz|ms|o)-/, '-$1-');
-      return kebabProperty;
-    }
-  }
-  // Standard property conversion to kebab-case
-  return property.replace(/([A-Z])/g, '-$1').toLowerCase();
+  return vendorPrefixToKebabCase(property);
 }
 // Comprehensive list of CSS properties that should be converted to classes
 const cssProperties = /*#__PURE__*/new Set([
@@ -1178,13 +1419,19 @@ const isStyleProp = prop => {
     return false;
   }
   // Check if it's a valid CSS property or custom style prop
-  return cssProperties.has(prop) || extraKeys.has(prop) ||
-  // Check for vendor prefixes (both uppercase and lowercase)
-  /^(webkit|moz|ms|o)([A-Z])/i.test(prop) ||
-  // Check for custom properties
-  prop.startsWith('--') ||
-  // Check for data attributes that should be treated as styles
-  prop.startsWith('data-style-') && !includeKeys.has(prop);
+  if (cssProperties.has(prop) || extraKeys.has(prop) || prop.startsWith('--') || prop.startsWith('data-style-') && !includeKeys.has(prop)) {
+    return true;
+  }
+  // Check if it's a valid CSS property using CSS.supports (browser environment)
+  if (typeof CSS !== 'undefined' && CSS.supports) {
+    try {
+      const kebabProp = vendorPrefixToKebabCase(prop);
+      return CSS.supports(kebabProp, 'inherit');
+    } catch {
+      return false;
+    }
+  }
+  return false;
 };
 /**
  * Enhances styleObjectToCss to handle vendor prefixed properties
@@ -1208,101 +1455,53 @@ function styleObjectToCss(styleObject) {
 const toKebabCase = str => {
   return vendorPrefixToKebabCase(str);
 };
-// Export the set of valid style properties
-const StyleProps = /*#__PURE__*/Array.from(cssProperties);
-
-const Shadows = {
-  0: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 1,
-      height: 2
-    },
-    shadowOpacity: 0.18,
-    shadowRadius: 1.0
-  },
-  1: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 2,
-      height: 2
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 1.41
-  },
-  2: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 3,
-      height: 3
-    },
-    shadowOpacity: 0.22,
-    shadowRadius: 2.22
-  },
-  3: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 4,
-      height: 4
-    },
-    shadowOpacity: 0.23,
-    shadowRadius: 2.62
-  },
-  4: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 5,
-      height: 5
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84
-  },
-  5: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 6,
-      height: 6
-    },
-    shadowOpacity: 0.27,
-    shadowRadius: 4.65
-  },
-  6: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 7,
-      height: 7
-    },
-    shadowOpacity: 0.29,
-    shadowRadius: 4.65
-  },
-  7: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 8,
-      height: 8
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4.65
-  },
-  8: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 9,
-      height: 9
-    },
-    shadowOpacity: 0.32,
-    shadowRadius: 5.46
-  },
-  9: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 10,
-      height: 10
-    },
-    shadowOpacity: 0.34,
-    shadowRadius: 6.27
+// Process and normalize style properties
+const processStyleProperty = (property, value, getColor) => {
+  // Handle null or undefined values
+  if (value == null) {
+    return '';
+  }
+  // Handle custom CSS properties (variables)
+  if (property.startsWith('--')) {
+    // For CSS variables, we pass the value as is
+    return value;
   }
+  // Convert kebab-case property to check against numericCssProperties
+  const kebabProperty = toKebabCase(property);
+  // Convert numbers to pixels for appropriate properties
+  if (typeof value === 'number') {
+    // Check if this is a property that should have px units
+    // First check the property as is, then check with vendor prefixes removed
+    const shouldAddPx = !NumberProps.has(property) && (numericCssProperties.has(kebabProperty) ||
+    // Check if it's a vendor-prefixed property that needs px
+    (/^-(webkit|moz|ms|o)-/.test(kebabProperty) || /^-(Webkit|Moz|Ms|O)-/.test(kebabProperty)) && numericCssProperties.has(kebabProperty.replace(/^-(webkit|moz|ms|o|Webkit|Moz|Ms|O)-/, '')));
+    if (shouldAddPx) {
+      return `${value}px`;
+    }
+    return value;
+  }
+  // Handle color properties directly
+  if (property.toLowerCase().indexOf('color') >= 0 || property === 'fill' || property === 'stroke') {
+    return getColor(value);
+  }
+  // Handle properties that might contain color values (borders, gradients, shadows, etc.)
+  if (typeof value === 'string' && value.length > 3) {
+    if (hasColorToken(value)) {
+      return replaceColorTokens(value, token => getColor(token));
+    }
+  }
+  // Handle arrays (e.g., for transforms)
+  if (Array.isArray(value)) {
+    return value.join(' ');
+  }
+  // Handle objects (e.g., for gradients or transforms)
+  if (typeof value === 'object') {
+    return JSON.stringify(value);
+  }
+  return value;
 };
+// Export the set of valid style properties
+const StyleProps = /*#__PURE__*/Array.from(cssProperties);
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 let keyframesCounter = 0;
@@ -1447,6 +1646,19 @@ const needsVendorPrefix = property => {
   return property in vendorPrefixedProperties;
 };
 
+/**
+ * Simple, fast hash function (djb2) for generating deterministic class names.
+ */
+function hash(str) {
+  let hash = 5381;
+  let i = str.length;
+  while (i) {
+    hash = hash * 33 ^ str.charCodeAt(--i);
+  }
+  // Convert to unsigned 32-bit integer and then to base 36 string
+  return (hash >>> 0).toString(36);
+}
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 // Implement a simple LRU cache for classCache
 class LRUCache {
@@ -1540,7 +1752,18 @@ const EVENT_TO_PSEUDO = {
   firstLine: 'first-line',
   selection: 'selection',
   backdrop: 'backdrop',
-  marker: 'marker'
+  marker: 'marker',
+  // Group modifiers
+  groupHover: 'group-hover',
+  groupFocus: 'group-focus',
+  groupActive: 'group-active',
+  groupDisabled: 'group-disabled',
+  // Peer modifiers
+  peerHover: 'peer-hover',
+  peerFocus: 'peer-focus',
+  peerActive: 'peer-active',
+  peerDisabled: 'peer-disabled',
+  peerChecked: 'peer-checked'
 };
 /**
  * Utility functions for animation handling
@@ -1559,7 +1782,7 @@ const AnimationUtils = {
     }
     return `${ms}ms`;
   },
-  processAnimations(animations) {
+  processAnimations(animations, manager) {
     const result = {
       names: [],
       durations: [],
@@ -1578,8 +1801,9 @@ const AnimationUtils = {
         keyframesName,
         keyframes
       } = generateKeyframes(animation);
-      if (keyframes && typeof document !== 'undefined') {
-        utilityClassManager.injectRule(keyframes);
+      if (keyframes) {
+        // Use provided manager or fall back to global
+        (manager || utilityClassManager).injectRule(keyframes);
       }
       result.names.push(keyframesName);
       const durationMs = this.parseDuration(animation.duration || '0s');
@@ -1619,67 +1843,8 @@ const AnimationUtils = {
  */
 const ValueUtils = {
   formatValue(value, property, getColor) {
-    let processedValue = value;
-    // Handle custom CSS properties (variables)
-    if (property.startsWith('--')) {
-      // For CSS variables, we pass the value as is
-      return value;
-    }
-    // If the property is a color, convert it
-    if (property.toLowerCase().includes('color')) {
-      processedValue = getColor(value);
-    }
-    // Handle properties that might contain color values (borders, gradients, etc.)
-    if (typeof value === 'string' && value.length > 3) {
-      // Check if the value contains any color tokens
-      if (value.includes('color.') || value.includes('theme.')) {
-        // For gradients and complex values, we need to process color tokens within the string
-        // This handles cases like: "linear-gradient(135deg, color.blue.500, color.red.500)"
-        let processedString = value;
-        // Find all color tokens in the string
-        const colorTokenRegex = /(color\.[a-zA-Z0-9.]+|theme\.[a-zA-Z0-9.]+)/g;
-        const colorTokens = value.match(colorTokenRegex);
-        if (colorTokens) {
-          // Replace each color token with its processed value
-          colorTokens.forEach(token => {
-            const processedColor = getColor(token);
-            // Use a global replace to catch all instances of this token
-            // Escape all special regex characters in the token
-            const escapedToken = token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-            processedString = processedString.replace(new RegExp(escapedToken, 'g'), processedColor);
-          });
-          processedValue = processedString;
-        } else {
-          // Fallback to the old method for simpler cases (like borders)
-          // Parse property to extract color
-          const parts = value.split(' ');
-          // Check each part to see if it starts with 'color.' or 'theme.'
-          const processedParts = parts.map(part => {
-            if (part.startsWith('color.') || part.startsWith('theme.')) {
-              // Process the color part through getColor
-              return getColor(part);
-            }
-            return part;
-          });
-          // Reconstruct the value with processed parts
-          processedValue = processedParts.join(' ');
-        }
-      }
-    }
-    // Handle numeric values
-    if (typeof processedValue === 'number') {
-      // Convert property to kebab-case to check against numericCssProperties
-      const kebabProperty = toKebabCase(property);
-      // Check if this is a property that should have px units
-      // First check the property as is, then check with vendor prefixes removed
-      const shouldAddPx = numericCssProperties.has(kebabProperty) ||
-      // Check if it's a vendor-prefixed property that needs px
-      /^-(webkit|moz|ms|o)-/.test(kebabProperty) && numericCssProperties.has(kebabProperty.replace(/^-(webkit|moz|ms|o)-/, ''));
-      if (shouldAddPx) {
-        processedValue = `${processedValue}px`;
-      }
-    }
-    return processedValue;
+    // Use the shared processStyleProperty function which now contains the robust regex logic
+    return processStyleProperty(property, value, getColor);
   },
   normalizeCssValue(value) {
     // Handle CSS variables in values
@@ -1701,7 +1866,7 @@ const ValueUtils = {
     if (rawCssCache.has(css)) {
       return rawCssCache.get(css);
     }
-    const shortName = Math.random().toString(36).substring(7);
+    const shortName = hash(css);
     const newClassName = `raw-css-${shortName}`;
     rawCssCache.set(css, newClassName);
     return newClassName;
@@ -1714,6 +1879,7 @@ class UtilityClassManager {
     }
     this.styleSheets = new Map();
     this.mainDocument = null;
+    this.serverRules = new Map();
     this.propertyShorthand = propertyShorthand;
     this.classCache = new LRUCache(maxCacheSize);
     if (typeof document !== 'undefined') {
@@ -1788,9 +1954,14 @@ class UtilityClassManager {
     if (context === void 0) {
       context = 'base';
     }
-    // Inject to main document
+    // Inject to main document or cache for server
     if (this.mainDocument) {
       this.injectRuleToDocument(cssRule, context, this.mainDocument);
+    } else {
+      if (!this.serverRules.has(context)) {
+        this.serverRules.set(context, []);
+      }
+      this.serverRules.get(context)?.push(cssRule);
     }
     // Inject to all other documents
     for (const document of this.getAllRegisteredDocuments()) {
@@ -1799,6 +1970,17 @@ class UtilityClassManager {
       }
     }
   }
+  getServerStyles() {
+    const contexts = ['base', 'pseudo', 'media', 'modifier'];
+    let css = '';
+    contexts.forEach(context => {
+      const rules = this.serverRules.get(context);
+      if (rules) {
+        css += rules.join('\n') + '\n';
+      }
+    });
+    return css;
+  }
   getAllRegisteredDocuments() {
     return Array.from(this.styleSheets.keys());
   }
@@ -1863,13 +2045,32 @@ class UtilityClassManager {
       const pseudoClassName = `${baseClassName}--${modifier}`;
       classNames = [pseudoClassName];
       const escapedClassName = this.escapeClassName(pseudoClassName);
-      // Add rules for all necessary vendor prefixes
-      cssProperties.forEach(prefixedProperty => {
-        rules.push({
-          rule: `.${escapedClassName}:${modifier} { ${prefixedProperty}: ${valueForCss}; }`,
-          context: 'pseudo'
+      // Format CSS rules for group and peer modifiers
+      if (modifier.startsWith('group-')) {
+        const groupState = modifier.replace('group-', '');
+        cssProperties.forEach(prefixedProperty => {
+          rules.push({
+            rule: `.group:${groupState} .${escapedClassName} { ${prefixedProperty}: ${valueForCss}; }`,
+            context: 'pseudo'
+          });
         });
-      });
+      } else if (modifier.startsWith('peer-')) {
+        const peerState = modifier.replace('peer-', '');
+        cssProperties.forEach(prefixedProperty => {
+          rules.push({
+            rule: `.peer:${peerState} ~ .${escapedClassName} { ${prefixedProperty}: ${valueForCss}; }`,
+            context: 'pseudo'
+          });
+        });
+      } else {
+        // Standard pseudo-class
+        cssProperties.forEach(prefixedProperty => {
+          rules.push({
+            rule: `.${escapedClassName}:${modifier} { ${prefixedProperty}: ${valueForCss}; }`,
+            context: 'pseudo'
+          });
+        });
+      }
     } else if (context === 'media' && modifier) {
       const mediaClassName = `${modifier}--${baseClassName}`;
       classNames = [mediaClassName];
@@ -2007,7 +2208,7 @@ const utilityClassManager = /*#__PURE__*/new UtilityClassManager(propertyShortha
 /**
  * Process styles for various contexts (base, pseudo, media)
  */
-function processStyles(styles, context, modifier, getColor, mediaQueries, devices) {
+function processStyles(styles, context, modifier, getColor, mediaQueries, devices, manager) {
   if (context === void 0) {
     context = 'base';
   }
@@ -2032,14 +2233,14 @@ function processStyles(styles, context, modifier, getColor, mediaQueries, device
       }
     }
     if (value !== undefined && value !== '') {
-      const classNames = utilityClassManager.getClassNames(property, value, context, modifier, getColor, mediaQueriesForClass);
+      const classNames = (manager || utilityClassManager).getClassNames(property, value, context, modifier, getColor, mediaQueriesForClass);
       classes.push(...classNames);
     }
   });
   return classes;
 }
 // Add a function to handle nested pseudo-classes
-function processPseudoStyles(styles, parentPseudo, getColor) {
+function processPseudoStyles(styles, parentPseudo, getColor, manager) {
   if (parentPseudo === void 0) {
     parentPseudo = '';
   }
@@ -2055,7 +2256,7 @@ function processPseudoStyles(styles, parentPseudo, getColor) {
         // Construct the combined pseudo selector
         const combinedPseudo = parentPseudo ? `${parentPseudo}::${pseudo}` : `${pseudo}`;
         // Process the nested styles with the combined pseudo
-        classes.push(...processPseudoStyles(value, combinedPseudo, getColor));
+        classes.push(...processPseudoStyles(value, combinedPseudo, getColor, manager));
       }
     } else if (typeof value !== 'object' || value === null) {
       // This is a regular CSS property
@@ -2067,7 +2268,7 @@ function processPseudoStyles(styles, parentPseudo, getColor) {
         const processedValue = ValueUtils.formatValue(value, key, getColor);
         // Create and inject the rule
         const rule = `.${escapedClassName}::${parentPseudo} { ${propertyToKebabCase(key)}: ${processedValue}; }`;
-        utilityClassManager.injectRule(rule, 'pseudo');
+        (manager || utilityClassManager).injectRule(rule, 'pseudo');
         classes.push(escapedClassName);
       }
     }
@@ -2077,7 +2278,7 @@ function processPseudoStyles(styles, parentPseudo, getColor) {
 /**
  * Process event-based styles (hover, focus, etc.)
  */
-function processEventStyles(eventName, eventStyles, getColor) {
+function processEventStyles(eventName, eventStyles, getColor, manager) {
   const classes = [];
   // Handle string shorthand (e.g., _hover: "color.red.500")
   if (typeof eventStyles === 'string') {
@@ -2097,7 +2298,7 @@ function processEventStyles(eventName, eventStyles, getColor) {
   // Process animations if present
   if (animate) {
     const animations = Array.isArray(animate) ? animate : [animate];
-    const animationStyles = AnimationUtils.processAnimations(animations);
+    const animationStyles = AnimationUtils.processAnimations(animations, manager);
     Object.assign(otherEventStyles, animationStyles);
   }
   // Process shadow if present
@@ -2133,7 +2334,7 @@ function processEventStyles(eventName, eventStyles, getColor) {
         const nestedPseudo = EVENT_TO_PSEUDO[nestedPseudoName];
         if (nestedPseudo) {
           const combinedPseudo = `${pseudo}::${nestedPseudo}`;
-          classes.push(...processPseudoStyles(otherEventStyles[nestedKey], combinedPseudo, getColor));
+          classes.push(...processPseudoStyles(otherEventStyles[nestedKey], combinedPseudo, getColor, manager));
         }
       });
       // Remove processed nested pseudos
@@ -2146,12 +2347,12 @@ function processEventStyles(eventName, eventStyles, getColor) {
   if (Object.keys(otherEventStyles).length > 0) {
     const pseudo = EVENT_TO_PSEUDO[eventName];
     if (pseudo) {
-      classes.push(...processStyles(otherEventStyles, 'pseudo', pseudo, getColor));
+      classes.push(...processStyles(otherEventStyles, 'pseudo', pseudo, getColor, {}, {}, manager));
     }
   }
   return classes;
 }
-const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
+const extractUtilityClasses = (props, getColor, mediaQueries, devices, manager) => {
   const classes = [];
   const computedStyles = {};
   // Handle widthHeight (shorthand for both width and height)
@@ -2202,9 +2403,9 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
   // Handle animations
   if (props.animate) {
     const animations = Array.isArray(props.animate) ? props.animate : [props.animate];
-    Object.assign(computedStyles, AnimationUtils.processAnimations(animations));
+    Object.assign(computedStyles, AnimationUtils.processAnimations(animations, manager));
   }
-  const blendConfig = props?.theme?.blend || {
+  const blendConfig = {
     mode: 'difference',
     color: 'white',
     modeWithBg: 'overlay'
@@ -2219,7 +2420,7 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
     }
   };
   // Handle default blend
-  if (props.blend !== false && props.color === undefined && computedStyles.color === undefined && typeof props.children === 'string') {
+  if (props.blend === true) {
     setBlend(props, computedStyles);
     Object.keys(props).forEach(property => {
       if (props[property]?.color === undefined && property.startsWith('_') && property.length > 1) {
@@ -2228,7 +2429,7 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
     });
   }
   // Process base styles
-  classes.push(...processStyles(computedStyles, 'base', '', getColor));
+  classes.push(...processStyles(computedStyles, 'base', '', getColor, {}, {}, manager));
   // Collect underscore-prefixed properties (_hover, _focus, etc.)
   const underscoreProps = {};
   Object.keys(props).forEach(property => {
@@ -2245,17 +2446,17 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
         if (property === 'on') {
           // Process event-based styles
           Object.keys(value).forEach(event => {
-            classes.push(...processEventStyles(event, value[event], getColor));
+            classes.push(...processEventStyles(event, value[event], getColor, manager));
           });
         } else if (property === 'media') {
           // Process media query styles
           Object.keys(value).forEach(screenOrDevice => {
-            classes.push(...processStyles(value[screenOrDevice], 'media', screenOrDevice, getColor, mediaQueries, devices));
+            classes.push(...processStyles(value[screenOrDevice], 'media', screenOrDevice, getColor, mediaQueries, devices, manager));
           });
         }
       } else if (value !== undefined && value !== '') {
         // Direct style property
-        classes.push(...utilityClassManager.getClassNames(property, value, 'base', '', getColor, []));
+        classes.push(...(manager || utilityClassManager).getClassNames(property, value, 'base', '', getColor, []));
       }
     }
   });
@@ -2264,23 +2465,69 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices) => {
     if (typeof props.css === 'object') {
       // Object-style CSS gets processed as regular styles
       Object.assign(computedStyles, props.css);
-      classes.push(...processStyles(props.css, 'base', '', getColor));
+      classes.push(...processStyles(props.css, 'base', '', getColor, {}, {}, manager));
     } else if (typeof props.css === 'string') {
       // String-style CSS gets its own class
       const uniqueClassName = ValueUtils.generateUniqueClassName(props.css);
-      utilityClassManager.injectRule(`.${uniqueClassName} { ${props.css} }`);
+      (manager || utilityClassManager).injectRule(`.${uniqueClassName} { ${props.css} }`);
       classes.push(uniqueClassName);
     }
   }
   // Process underscore-prefixed event properties
   if (Object.keys(underscoreProps).length > 0) {
     Object.keys(underscoreProps).forEach(event => {
-      classes.push(...processEventStyles(event, underscoreProps[event], getColor));
+      classes.push(...processEventStyles(event, underscoreProps[event], getColor, manager));
     });
   }
   return classes;
 };
 
+const StyleRegistryContext = /*#__PURE__*/React.createContext({
+  manager: utilityClassManager
+});
+/**
+ * Hook to access the current style manager.
+ */
+const useStyleRegistry = () => React.useContext(StyleRegistryContext);
+/**
+ * Provider to wrap the app and manage styles.
+ * When doing SSR, pass a new registry created via createStyleRegistry().
+ */
+const StyleRegistry = _ref => {
+  let {
+    registry,
+    children
+  } = _ref;
+  const value = React.useMemo(() => ({
+    // If no registry provided, fallback to globalManager
+    manager: registry || utilityClassManager
+  }), [registry]);
+  return /*#__PURE__*/React__default.createElement(StyleRegistryContext.Provider, {
+    value: value
+  }, children);
+};
+/**
+ * Helper to create a new style registry (UtilityClassManager) instance.
+ * Useful for SSR to create a fresh manager per request.
+ */
+const createStyleRegistry = () => {
+  return new UtilityClassManager(propertyShorthand, 10000);
+};
+/**
+ * React hook to get the CSS string from the registry.
+ * Note: This only works if you're using a fresh registry that collected styles.
+ */
+const useServerInsertedHTML = registry => {
+  return () => {
+    return /*#__PURE__*/React__default.createElement("style", {
+      id: "app-studio-server-css",
+      dangerouslySetInnerHTML: {
+        __html: registry.getServerStyles()
+      }
+    });
+  };
+};
+
 // analytics/AnalyticsContext.tsx
 // Create the context with a default no-op implementation
 const AnalyticsContext = /*#__PURE__*/React.createContext({});
@@ -2309,10 +2556,14 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
   }
   const {
     onPress,
-    blend,
+    blend: initialBlend,
     animateOn = 'Both',
     ...rest
   } = props;
+  let blend = initialBlend;
+  if (blend !== false && props.color === undefined && typeof props.children === 'string' && (as === 'span' || as === 'div' || blend === true)) {
+    blend = true;
+  }
   const elementRef = React.useRef(null);
   const setRef = React.useCallback(node => {
     elementRef.current = node;
@@ -2333,6 +2584,9 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
     mediaQueries,
     devices
   } = useResponsiveContext();
+  const {
+    manager
+  } = useStyleRegistry();
   const [isVisible, setIsVisible] = React.useState(false);
   React.useEffect(() => {
     if (!animateIn) {
@@ -2360,25 +2614,24 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
   React.useEffect(() => {
     if (animateIn && elementRef.current && isVisible) {
       const animations = Array.isArray(animateIn) ? animateIn : [animateIn];
-      const styles = AnimationUtils.processAnimations(animations);
+      const styles = AnimationUtils.processAnimations(animations, manager);
       Object.assign(elementRef.current.style, styles);
     }
-  }, [animateIn, isVisible]);
+  }, [animateIn, isVisible, manager]);
   React.useEffect(() => {
     const node = elementRef.current;
     return () => {
       if (animateOut && node) {
         const animations = Array.isArray(animateOut) ? animateOut : [animateOut];
-        const styles = AnimationUtils.processAnimations(animations);
+        const styles = AnimationUtils.processAnimations(animations, manager);
         Object.assign(node.style, styles);
       }
     };
-  }, [animateOut]);
+  }, [animateOut, manager]);
   const utilityClasses = React.useMemo(() => {
     const propsToProcess = {
       ...rest,
-      blend,
-      theme: props.theme || theme
+      blend
     };
     // Apply view() timeline ONLY if animateOn='View' (not Both or Mount)
     if (animateOn === 'View' && propsToProcess.animate) {
@@ -2396,14 +2649,25 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
         return anim;
       });
     }
-    return extractUtilityClasses(propsToProcess, color => {
-      return getColor(color, {
-        colors: props.colors,
-        theme: props.theme,
-        themeMode: props.themeMode
+    // Apply scroll() timeline if animateOn='Scroll'
+    if (animateOn === 'Scroll' && propsToProcess.animate) {
+      const animations = Array.isArray(propsToProcess.animate) ? propsToProcess.animate : [propsToProcess.animate];
+      propsToProcess.animate = animations.map(anim => {
+        // Only add timeline if not already specified
+        if (!anim.timeline) {
+          return {
+            ...anim,
+            timeline: 'scroll()',
+            fillMode: anim.fillMode || 'both'
+          };
+        }
+        return anim;
       });
-    }, mediaQueries, devices);
-  }, [rest, blend, animateOn, mediaQueries, devices, theme]);
+    }
+    return extractUtilityClasses(propsToProcess, color => {
+      return getColor(color);
+    }, mediaQueries, devices, manager);
+  }, [rest, blend, animateOn, mediaQueries, devices, theme, manager]);
   const newProps = {
     ref: setRef
   };
@@ -2413,6 +2677,9 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
   if (utilityClasses.length > 0) {
     newProps.className = utilityClasses.join(' ');
   }
+  if (props.className) {
+    newProps.className = newProps.className ? `${newProps.className} ${props.className}` : props.className;
+  }
   // Handle event tracking for onClick
   if (trackEvent && props.onClick) {
     let componentName;
@@ -2468,7 +2735,7 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
     };
   }
   const Component = as;
-  return children ? (/*#__PURE__*/React__default.createElement(Component, Object.assign({}, newProps), before, children, after)) : /*#__PURE__*/React__default.createElement(Component, Object.assign({}, newProps));
+  return children ? (/*#__PURE__*/React__default.createElement(Component, Object.assign({}, newProps), before, children, after)) : (/*#__PURE__*/React__default.createElement(Component, Object.assign({}, newProps)));
 }));
 
 const View = /*#__PURE__*/React__default.forwardRef((props, ref) => (/*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
@@ -2502,7 +2769,7 @@ const HorizontalResponsive = /*#__PURE__*/React__default.forwardRef((_ref, ref)
     media: {
       ...media,
       mobile: {
-        ...media.mobile,
+        ...media?.mobile,
         flexDirection: 'column'
       }
     }
@@ -2519,7 +2786,7 @@ const VerticalResponsive = /*#__PURE__*/React__default.forwardRef((_ref2, ref) =
     media: {
       ...media,
       mobile: {
-        ...media.mobile,
+        ...media?.mobile,
         flexDirection: 'row'
       }
     }
@@ -5518,16 +5785,19 @@ exports.Scroll = Scroll;
 exports.Shadows = Shadows;
 exports.Skeleton = Skeleton;
 exports.Span = Span;
+exports.StyleRegistry = StyleRegistry;
 exports.Text = Text;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.Typography = Typography;
+exports.UtilityClassManager = UtilityClassManager;
 exports.Vertical = Vertical;
 exports.VerticalResponsive = VerticalResponsive;
 exports.View = View;
 exports.animateOnView = animateOnView;
 exports.blurInOnView = blurInOnView;
 exports.blurOutOnView = blurOutOnView;
+exports.createStyleRegistry = createStyleRegistry;
 exports.createViewAnimation = createViewAnimation;
 exports.debounce = debounce;
 exports.deepMerge = deepMerge;
@@ -5543,11 +5813,14 @@ exports.fadeOutOnView = fadeOutOnView;
 exports.flipXOnView = flipXOnView;
 exports.flipYOnView = flipYOnView;
 exports.getWindowInitialProps = getWindowInitialProps;
+exports.hasColorToken = hasColorToken;
 exports.isBrowser = isBrowser;
 exports.isDev = isDev;
 exports.isMobile = isMobile;
 exports.isProd = isProd;
 exports.isSSR = isSSR;
+exports.propertyShorthand = propertyShorthand;
+exports.replaceColorTokens = replaceColorTokens;
 exports.revealOnView = revealOnView;
 exports.rotateInOnView = rotateInOnView;
 exports.scaleDownOnView = scaleDownOnView;
@@ -5572,7 +5845,9 @@ exports.useResponsiveContext = useResponsiveContext;
 exports.useScroll = useScroll;
 exports.useScrollAnimation = useScrollAnimation;
 exports.useScrollDirection = useScrollDirection;
+exports.useServerInsertedHTML = useServerInsertedHTML;
 exports.useSmoothScroll = useSmoothScroll;
+exports.useStyleRegistry = useStyleRegistry;
 exports.useTheme = useTheme;
 exports.useWindowSize = useWindowSize;
 exports.utilityClassManager = utilityClassManager;