app-studio 0.7.10 → 0.7.12

package/dist/app-studio.esm.js

@@ -783,91 +783,44 @@ const LIGHT_PREFIX = 'light-';
 const DARK_PREFIX = 'dark-';
 const TRANSPARENT = 'transparent';
 // --- CSS Variable Injection Helper ---
+// Optimized: single-pass processing, minimal string allocations, minified output
 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};`);
+  const rootVars = [];
+  const lightMappings = [];
+  const darkMappings = [];
+  // Single-pass helper: generates base, light, dark vars and theme-switch mappings together
+  const processColors = (lightObj, darkObj, prefix) => {
+    const keys = Object.keys(lightObj);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const lightValue = lightObj[key];
+      const darkValue = darkObj?.[key];
+      const varName = `${prefix}-${key}`;
+      if (typeof lightValue === 'object' && lightValue !== null) {
+        processColors(lightValue, darkValue, varName);
+      } else if (typeof lightValue === 'string' || typeof lightValue === 'number') {
+        // :root gets base + light/dark prefixed vars
+        rootVars.push(`--${varName}:${lightValue};--light-${varName}:${lightValue};--dark-${varName}:${darkValue ?? lightValue}`);
+        // Theme-switching selectors
+        lightMappings.push(`--${varName}:var(--light-${varName})`);
+        darkMappings.push(`--${varName}:var(--dark-${varName})`);
       }
-    });
-  };
-  // 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)
-  // Theme config uses dash notation (color-blue-500, theme-primary)
-  const processTheme = (obj, prefix) => {
-    Object.keys(obj).forEach(key => {
-      const value = obj[key];
-      const variableName = `${prefix}-${key}`;
-      if (typeof value === 'object' && value !== null) {
-        processTheme(value, variableName);
-      } else if (typeof value === 'string') {
-        if (value.startsWith('color-') || value.startsWith('theme-')) {
-          // Convert 'color-blue-500' -> 'var(--color-blue-500)'
-          themeVariables.push(`--${variableName}: var(--${value});`);
-        } 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      ')}
-    }
-  
-    [data-theme='light'] {
-      ${lightMappings}
     }
-    
-    [data-theme='dark'] {
-      ${darkMappings}
+  };
+  processColors(lightColors.main, darkColors.main, 'color');
+  processColors(lightColors.palette, darkColors.palette, 'color');
+  // Process theme variables
+  const themeVars = [];
+  const themeKeys = Object.keys(theme);
+  for (let i = 0; i < themeKeys.length; i++) {
+    const key = themeKeys[i];
+    const value = theme[key];
+    if (typeof value === 'string') {
+      themeVars.push(value.startsWith('color-') || value.startsWith('theme-') ? `--theme-${key}:var(--${value})` : `--theme-${key}:${value}`);
     }
-  `;
-  return css;
+  }
+  // Build minified CSS (no unnecessary whitespace)
+  return `:root{${rootVars.join(';')};${themeVars.join(';')}}[data-theme='light']{${lightMappings.join(';')}}[data-theme='dark']{${darkMappings.join(';')}}`;
 };
 // --- Default Configuration ---
 // Theme values use dash notation (color-X or color-X-shade)
@@ -1774,9 +1727,10 @@ function propertyToKebabCase(property) {
   return vendorPrefixToKebabCase(property);
 }
 // Comprehensive list of CSS properties that should be converted to classes
+// NOTE: Uses a static set instead of document.createElement('div').style
+// to avoid DOM access at module load time (breaks SSR, adds startup overhead).
+// The manual list below is comprehensive and covers all commonly used CSS properties.
 const cssProperties = /*#__PURE__*/new Set([
-// Standard CSS properties
-... /*#__PURE__*/Object.keys(/*#__PURE__*/document.createElement('div').style),
 // Box model
 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginHorizontal', 'marginVertical', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingHorizontal', 'paddingVertical', 'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
 // Positioning
@@ -1805,6 +1759,8 @@ const cssProperties = /*#__PURE__*/new Set([
 'textJustify', 'lineClamp', 'textIndent', 'perspective']);
 // Common React event handlers that should not be treated as style props
 const commonEventHandlers = /*#__PURE__*/new Set(['onClick', 'onChange', 'onSubmit', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'onKeyPress', 'onMouseDown', 'onMouseUp', 'onMouseMove', 'onMouseEnter', 'onMouseLeave', 'onTouchStart', 'onTouchEnd', 'onTouchMove', 'onScroll', 'onWheel', 'onDrag', 'onDragStart', 'onDragEnd', 'onDrop']);
+// Cache for CSS.supports results to avoid repeated DOM queries
+const cssSupportCache = /*#__PURE__*/new Map();
 // Non-hyphenated HTML/SVG attributes that must never be treated as style props.
 // Hyphenated attributes (aria-*, data-*, etc.) are caught by a prefix/hyphen check below.
 const htmlOnlyAttributes = /*#__PURE__*/new Set([
@@ -1857,11 +1813,17 @@ const isStyleProp = prop => {
     return true;
   }
   // Check if it's a valid CSS property using CSS.supports (browser environment)
+  // Results are cached to avoid repeated CSS.supports calls
   if (typeof CSS !== 'undefined' && CSS.supports) {
+    const cached = cssSupportCache.get(prop);
+    if (cached !== undefined) return cached;
     try {
       const kebabProp = vendorPrefixToKebabCase(prop);
-      return CSS.supports(kebabProp, 'inherit');
+      const result = CSS.supports(kebabProp, 'inherit');
+      cssSupportCache.set(prop, result);
+      return result;
     } catch {
+      cssSupportCache.set(prop, false);
       return false;
     }
   }
@@ -1904,6 +1866,10 @@ const processStyleProperty = (property, value, getColor) => {
   const kebabProperty = toKebabCase(property);
   // Convert numbers to pixels for appropriate properties
   if (typeof value === 'number') {
+    // lineHeight only accepts integers: 1-3 are unitless multipliers, 4+ are pixel sizes
+    if (property === 'lineHeight' && Number.isInteger(value) && value <= 3) {
+      return value;
+    }
     // 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) ||
@@ -1995,67 +1961,25 @@ const generateKeyframes = animation => {
 
 /**
  * Mapping of standard CSS properties to their vendor-prefixed equivalents.
- * This helps ensure cross-browser compatibility by automatically applying
- * the appropriate vendor prefixes when needed.
+ *
+ * Optimized for modern browsers (Chrome 100+, Safari 15+, Firefox 91+).
+ * Most properties no longer need vendor prefixes in these browsers.
+ * Only -webkit- prefixes are kept where still needed by Safari/WebKit.
+ *
+ * Removed prefixes:
+ * - -moz- (Firefox 91+ supports all standard properties unprefixed)
+ * - -ms- (IE/Edge Legacy no longer supported)
+ * - -o- (Opera uses Blink engine, same as Chrome)
+ * - -webkit- for animation, transform, transition, flexbox, boxShadow,
+ *   boxSizing, columns, borderImage, backgroundSize, backgroundOrigin,
+ *   perspective, hyphens (all unprefixed in Safari 15+)
  */
-// Properties that commonly need vendor prefixes across browsers
+// Properties that still need vendor prefixes in modern browsers
 const vendorPrefixedProperties = {
-  // Animation properties
-  animation: ['-webkit-animation', '-moz-animation', '-o-animation'],
-  animationDelay: ['-webkit-animation-delay', '-moz-animation-delay', '-o-animation-delay'],
-  animationDirection: ['-webkit-animation-direction', '-moz-animation-direction', '-o-animation-direction'],
-  animationDuration: ['-webkit-animation-duration', '-moz-animation-duration', '-o-animation-duration'],
-  animationFillMode: ['-webkit-animation-fill-mode', '-moz-animation-fill-mode', '-o-animation-fill-mode'],
-  animationIterationCount: ['-webkit-animation-iteration-count', '-moz-animation-iteration-count', '-o-animation-iteration-count'],
-  animationName: ['-webkit-animation-name', '-moz-animation-name', '-o-animation-name'],
-  animationPlayState: ['-webkit-animation-play-state', '-moz-animation-play-state', '-o-animation-play-state'],
-  animationTimingFunction: ['-webkit-animation-timing-function', '-moz-animation-timing-function', '-o-animation-timing-function'],
-  // Transform properties
-  transform: ['-webkit-transform', '-moz-transform', '-ms-transform', '-o-transform'],
-  transformOrigin: ['-webkit-transform-origin', '-moz-transform-origin', '-ms-transform-origin', '-o-transform-origin'],
-  transformStyle: ['-webkit-transform-style', '-moz-transform-style', '-ms-transform-style'],
-  // Transition properties
-  transition: ['-webkit-transition', '-moz-transition', '-ms-transition', '-o-transition'],
-  transitionDelay: ['-webkit-transition-delay', '-moz-transition-delay', '-ms-transition-delay', '-o-transition-delay'],
-  transitionDuration: ['-webkit-transition-duration', '-moz-transition-duration', '-ms-transition-duration', '-o-transition-duration'],
-  transitionProperty: ['-webkit-transition-property', '-moz-transition-property', '-ms-transition-property', '-o-transition-property'],
-  transitionTimingFunction: ['-webkit-transition-timing-function', '-moz-transition-timing-function', '-ms-transition-timing-function', '-o-transition-timing-function'],
-  // Flexbox properties
-  flex: ['-webkit-flex', '-ms-flex'],
-  flexBasis: ['-webkit-flex-basis', '-ms-flex-basis'],
-  flexDirection: ['-webkit-flex-direction', '-ms-flex-direction'],
-  flexFlow: ['-webkit-flex-flow', '-ms-flex-flow'],
-  flexGrow: ['-webkit-flex-grow', '-ms-flex-positive'],
-  flexShrink: ['-webkit-flex-shrink', '-ms-flex-negative'],
-  flexWrap: ['-webkit-flex-wrap', '-ms-flex-wrap'],
-  justifyContent: ['-webkit-justify-content', '-ms-flex-pack'],
-  alignItems: ['-webkit-align-items', '-ms-flex-align'],
-  alignContent: ['-webkit-align-content', '-ms-flex-line-pack'],
-  alignSelf: ['-webkit-align-self', '-ms-flex-item-align'],
-  order: ['-webkit-order', '-ms-flex-order'],
-  // Other commonly prefixed properties
-  appearance: ['-webkit-appearance', '-moz-appearance', '-ms-appearance'],
-  backfaceVisibility: ['-webkit-backface-visibility', '-moz-backface-visibility'],
-  backgroundClip: ['-webkit-background-clip', '-moz-background-clip'],
-  backgroundOrigin: ['-webkit-background-origin', '-moz-background-origin'],
-  backgroundSize: ['-webkit-background-size', '-moz-background-size', '-o-background-size'],
-  borderImage: ['-webkit-border-image', '-moz-border-image', '-o-border-image'],
-  boxShadow: ['-webkit-box-shadow', '-moz-box-shadow'],
-  boxSizing: ['-webkit-box-sizing', '-moz-box-sizing'],
-  columns: ['-webkit-columns', '-moz-columns'],
-  columnCount: ['-webkit-column-count', '-moz-column-count'],
-  columnGap: ['-webkit-column-gap', '-moz-column-gap'],
-  columnRule: ['-webkit-column-rule', '-moz-column-rule'],
-  columnWidth: ['-webkit-column-width', '-moz-column-width'],
-  filter: ['-webkit-filter'],
-  fontSmoothing: ['-webkit-font-smoothing', '-moz-osx-font-smoothing'],
-  hyphens: ['-webkit-hyphens', '-moz-hyphens', '-ms-hyphens'],
+  // Properties that still need -webkit- in Safari
+  backgroundClip: ['-webkit-background-clip'],
   maskImage: ['-webkit-mask-image'],
-  perspective: ['-webkit-perspective', '-moz-perspective'],
-  perspectiveOrigin: ['-webkit-perspective-origin', '-moz-perspective-origin'],
-  textSizeAdjust: ['-webkit-text-size-adjust', '-moz-text-size-adjust', '-ms-text-size-adjust'],
-  userSelect: ['-webkit-user-select', '-moz-user-select', '-ms-user-select'],
-  // Special webkit-only properties
+  // Webkit-only properties (no unprefixed equivalent)
   textFillColor: ['-webkit-text-fill-color'],
   textStroke: ['-webkit-text-stroke'],
   textStrokeColor: ['-webkit-text-stroke-color'],
@@ -2295,20 +2219,18 @@ const ValueUtils = {
     return processStyleProperty(property, value, getColor);
   },
   normalizeCssValue(value) {
+    const str = typeof value === 'string' ? value : String(value);
     // Handle CSS variables in values
-    if (typeof value === 'string' && value.startsWith('--')) {
-      // For CSS variable values, use a special prefix to avoid conflicts
-      return `var-${value.substring(2)}`;
+    if (str.charCodeAt(0) === 45 && str.charCodeAt(1) === 45) {
+      // starts with '--'
+      return `var-${str.substring(2)}`;
     }
     // Handle vendor-prefixed values
-    if (typeof value === 'string' && value.startsWith('-webkit-')) {
-      // For webkit values, preserve the prefix but normalize the rest
-      const prefix = '-webkit-';
-      const rest = value.substring(prefix.length);
-      const normalizedRest = rest.replace(/\./g, 'p').replace(/\s+/g, '-').replace(/[^a-zA-Z0-9\-]/g, '').replace(/%/g, 'pct').replace(/vw/g, 'vw').replace(/vh/g, 'vh').replace(/em/g, 'em').replace(/rem/g, 'rem');
-      return `webkit-${normalizedRest}`;
+    if (str.startsWith('-webkit-')) {
+      return `webkit-${str.substring(8).replace(/\./g, 'p').replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '')}`;
     }
-    return value.toString().replace(/\./g, 'p').replace(/\s+/g, '-').replace(/[^a-zA-Z0-9\-]/g, '').replace(/%/g, 'pct').replace(/vw/g, 'vw').replace(/vh/g, 'vh').replace(/em/g, 'em').replace(/rem/g, 'rem');
+    // Single-pass normalization: replace dots with 'p', spaces with '-', strip non-alphanumeric
+    return str.replace(/\./g, 'p').replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
   },
   generateUniqueClassName(css) {
     if (rawCssCache.has(css)) {
@@ -2483,8 +2405,11 @@ class UtilityClassManager {
     const cssProperty = propertyToKebabCase(property);
     let valueForCss = processedValue;
     // Handle numeric values for CSS
-    if (typeof valueForCss === 'number' && numericCssProperties.has(cssProperty)) {
-      valueForCss = `${valueForCss}px`;
+    if (typeof valueForCss === 'number') {
+      // lineHeight only accepts integers: 1-3 are unitless multipliers, 4+ are pixel sizes
+      if (property === 'lineHeight' && Number.isInteger(valueForCss) && valueForCss <= 3) ; else if (numericCssProperties.has(cssProperty)) {
+        valueForCss = `${valueForCss}px`;
+      }
     }
     // Check if this property needs vendor prefixes
     const needsPrefixes = needsVendorPrefix(property);
@@ -2672,23 +2597,77 @@ function processStyles(styles, context, modifier, getColor, mediaQueries, device
     devices = {};
   }
   const classes = [];
-  Object.keys(styles).forEach(property => {
-    const value = styles[property];
-    let mediaQueriesForClass = [];
-    if (context === 'media') {
-      if (mediaQueries[modifier]) {
-        mediaQueriesForClass = [mediaQueries[modifier]];
-      } else if (devices[modifier]) {
-        mediaQueriesForClass = devices[modifier].map(mq => mediaQueries[mq]).filter(mq => mq);
-      }
+  const activeManager = manager || utilityClassManager;
+  // Pre-compute media queries for this modifier (only done once per call)
+  let mediaQueriesForClass = [];
+  if (context === 'media') {
+    if (mediaQueries[modifier]) {
+      mediaQueriesForClass = [mediaQueries[modifier]];
+    } else if (devices[modifier]) {
+      mediaQueriesForClass = devices[modifier].map(mq => mediaQueries[mq]).filter(mq => mq);
     }
+  }
+  const expandedStyles = expandShorthandStyles(styles);
+  const keys = Object.keys(expandedStyles);
+  for (let i = 0; i < keys.length; i++) {
+    const value = expandedStyles[keys[i]];
     if (value !== undefined && value !== '') {
-      const classNames = (manager || utilityClassManager).getClassNames(property, value, context, modifier, getColor, mediaQueriesForClass);
+      const classNames = activeManager.getClassNames(keys[i], value, context, modifier, getColor, mediaQueriesForClass);
       classes.push(...classNames);
     }
-  });
+  }
   return classes;
 }
+/**
+ * Expand shorthand props (widthHeight, paddingHorizontal, marginVertical, ...)
+ * into their canonical CSS properties. Returns a new object so the caller's
+ * input is not mutated. Keeps unknown shorthands only if their value is set.
+ */
+function expandShorthandStyles(styles) {
+  const wh = styles.widthHeight;
+  const ph = styles.paddingHorizontal;
+  const pv = styles.paddingVertical;
+  const mh = styles.marginHorizontal;
+  const mv = styles.marginVertical;
+  if (wh === undefined && ph === undefined && pv === undefined && mh === undefined && mv === undefined) {
+    return styles;
+  }
+  const out = {};
+  const keys = Object.keys(styles);
+  for (let i = 0; i < keys.length; i++) {
+    const k = keys[i];
+    if (k === 'widthHeight' || k === 'paddingHorizontal' || k === 'paddingVertical' || k === 'marginHorizontal' || k === 'marginVertical') {
+      continue;
+    }
+    out[k] = styles[k];
+  }
+  if (wh !== undefined) {
+    const v = typeof wh === 'number' ? `${wh}px` : wh;
+    if (out.width === undefined) out.width = v;
+    if (out.height === undefined) out.height = v;
+  }
+  if (ph !== undefined) {
+    const v = typeof ph === 'number' ? `${ph}px` : ph;
+    if (out.paddingLeft === undefined) out.paddingLeft = v;
+    if (out.paddingRight === undefined) out.paddingRight = v;
+  }
+  if (pv !== undefined) {
+    const v = typeof pv === 'number' ? `${pv}px` : pv;
+    if (out.paddingTop === undefined) out.paddingTop = v;
+    if (out.paddingBottom === undefined) out.paddingBottom = v;
+  }
+  if (mh !== undefined) {
+    const v = typeof mh === 'number' ? `${mh}px` : mh;
+    if (out.marginLeft === undefined) out.marginLeft = v;
+    if (out.marginRight === undefined) out.marginRight = v;
+  }
+  if (mv !== undefined) {
+    const v = typeof mv === 'number' ? `${mv}px` : mv;
+    if (out.marginTop === undefined) out.marginTop = v;
+    if (out.marginBottom === undefined) out.marginBottom = v;
+  }
+  return out;
+}
 // Add a function to handle nested pseudo-classes
 function processPseudoStyles(styles, parentPseudo, getColor, manager) {
   if (parentPseudo === void 0) {
@@ -2805,6 +2784,7 @@ function processEventStyles(eventName, eventStyles, getColor, manager) {
 const extractUtilityClasses = (props, getColor, mediaQueries, devices, manager) => {
   const classes = [];
   const computedStyles = {};
+  const activeManager = manager || utilityClassManager;
   // Handle widthHeight (shorthand for both width and height)
   if (props.widthHeight || props.height !== undefined && props.width !== undefined && props.height === props.width) {
     const widthHeightValue = props.widthHeight || props.width;
@@ -2812,21 +2792,30 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices, manager)
     computedStyles.width = formattedValue;
     computedStyles.height = formattedValue;
   }
-  // Handle padding and margin shorthands
-  const shorthandProps = {
-    paddingHorizontal: ['paddingLeft', 'paddingRight'],
-    paddingVertical: ['paddingTop', 'paddingBottom'],
-    marginHorizontal: ['marginLeft', 'marginRight'],
-    marginVertical: ['marginTop', 'marginBottom']
-  };
-  for (const [shorthand, properties] of Object.entries(shorthandProps)) {
-    const value = props[shorthand];
-    if (value !== undefined) {
-      const formattedValue = typeof value === 'number' ? `${value}px` : value;
-      properties.forEach(prop => {
-        computedStyles[prop] = formattedValue;
-      });
-    }
+  // Handle padding and margin shorthands (inlined to avoid Object.entries overhead)
+  const ph = props.paddingHorizontal;
+  if (ph !== undefined) {
+    const v = typeof ph === 'number' ? `${ph}px` : ph;
+    computedStyles.paddingLeft = v;
+    computedStyles.paddingRight = v;
+  }
+  const pv = props.paddingVertical;
+  if (pv !== undefined) {
+    const v = typeof pv === 'number' ? `${pv}px` : pv;
+    computedStyles.paddingTop = v;
+    computedStyles.paddingBottom = v;
+  }
+  const mh = props.marginHorizontal;
+  if (mh !== undefined) {
+    const v = typeof mh === 'number' ? `${mh}px` : mh;
+    computedStyles.marginLeft = v;
+    computedStyles.marginRight = v;
+  }
+  const mv = props.marginVertical;
+  if (mv !== undefined) {
+    const v = typeof mv === 'number' ? `${mv}px` : mv;
+    computedStyles.marginTop = v;
+    computedStyles.marginBottom = v;
   }
   // Handle shadows
   if (props.shadow !== undefined) {
@@ -2855,80 +2844,103 @@ const extractUtilityClasses = (props, getColor, mediaQueries, devices, manager)
     const animations = Array.isArray(props.animate) ? props.animate : [props.animate];
     Object.assign(computedStyles, AnimationUtils.processAnimations(animations, manager));
   }
-  const blendConfig = {
-    mode: 'difference',
-    color: 'white',
-    modeWithBg: 'overlay'
-  };
-  const setBlend = (props, style) => {
+  // Handle default blend
+  if (props.blend === true) {
     if (props.bgColor) {
-      style.mixBlendMode = blendConfig.modeWithBg;
-      style.color = 'white';
+      computedStyles.mixBlendMode = 'overlay';
+      computedStyles.color = 'white';
     } else {
-      style.mixBlendMode = blendConfig.mode;
-      style.color = blendConfig.color;
+      computedStyles.mixBlendMode = 'difference';
+      computedStyles.color = 'white';
     }
-  };
-  // Handle default blend
-  if (props.blend === true) {
-    setBlend(props, computedStyles);
-    Object.keys(props).forEach(property => {
-      if (props[property]?.color === undefined && (property.startsWith('_') || property === 'on' || property === 'media')) {
-        setBlend(props[property], props[property]);
-      }
-    });
   }
-  // Process base styles
+  // Process base computed styles
   classes.push(...processStyles(computedStyles, 'base', '', getColor, {}, {}, manager));
-  // Collect underscore-prefixed properties (_hover, _focus, etc.)
-  const underscoreProps = {};
-  Object.keys(props).forEach(property => {
-    if (property.startsWith('_') && property.length > 1) {
+  // SINGLE PASS over props: classify each prop into style, event, or underscore
+  const propKeys = Object.keys(props);
+  for (let i = 0; i < propKeys.length; i++) {
+    const property = propKeys[i];
+    const value = props[property];
+    // Handle underscore-prefixed event properties (_hover, _focus, etc.)
+    if (property.charCodeAt(0) === 95 && property.length > 1) {
+      // 95 = '_'
       const eventName = property.substring(1);
-      underscoreProps[eventName] = props[property];
+      classes.push(...processEventStyles(eventName, value, getColor, manager));
+      // Handle blend for underscore props
+      if (props.blend === true && value?.color === undefined) {
+        if (props.bgColor) {
+          value.mixBlendMode = 'overlay';
+          value.color = 'white';
+        } else {
+          value.mixBlendMode = 'difference';
+          value.color = 'white';
+        }
+      }
+      continue;
     }
-  });
-  // Process standard style props
-  Object.keys(props).forEach(property => {
-    if (property !== 'style' && property !== 'css' && !property.startsWith('_') && (isStyleProp(property) || ['on', 'media'].includes(property))) {
-      const value = props[property];
+    // Skip non-style props
+    if (property === 'style' || property === 'css') continue;
+    if (property === 'on') {
+      // Process event-based styles
       if (typeof value === 'object' && value !== null) {
-        if (property === 'on') {
-          // Process event-based styles
-          Object.keys(value).forEach(event => {
-            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, manager));
-          });
+        const events = Object.keys(value);
+        for (let j = 0; j < events.length; j++) {
+          classes.push(...processEventStyles(events[j], value[events[j]], getColor, manager));
+        }
+        // Handle blend for 'on' prop
+        if (props.blend === true && value?.color === undefined) {
+          if (props.bgColor) {
+            value.mixBlendMode = 'overlay';
+            value.color = 'white';
+          } else {
+            value.mixBlendMode = 'difference';
+            value.color = 'white';
+          }
         }
-      } else if (value !== undefined && value !== '') {
-        // Direct style property
-        classes.push(...(manager || utilityClassManager).getClassNames(property, value, 'base', '', getColor, []));
       }
+      continue;
     }
-  });
+    if (property === 'media') {
+      // Process media query styles
+      if (typeof value === 'object' && value !== null) {
+        const screens = Object.keys(value);
+        for (let j = 0; j < screens.length; j++) {
+          classes.push(...processStyles(value[screens[j]], 'media', screens[j], getColor, mediaQueries, devices, manager));
+        }
+        // Handle blend for 'media' prop
+        if (props.blend === true && value?.color === undefined) {
+          if (props.bgColor) {
+            value.mixBlendMode = 'overlay';
+            value.color = 'white';
+          } else {
+            value.mixBlendMode = 'difference';
+            value.color = 'white';
+          }
+        }
+      }
+      continue;
+    }
+    // Standard style props
+    if (isStyleProp(property)) {
+      if (value !== undefined && value !== '') {
+        if (typeof value === 'object' && value !== null) {
+          // Object-style props are not directly processed as base styles
+          continue;
+        }
+        classes.push(...activeManager.getClassNames(property, value, 'base', '', getColor, []));
+      }
+    }
+  }
   // Handle raw CSS - uses 'override' context for higher specificity
   if (props.css) {
     if (typeof props.css === 'object') {
-      // Object-style CSS gets processed with override context for higher priority
-      Object.assign(computedStyles, props.css);
       classes.push(...processStyles(props.css, 'override', '', getColor, {}, {}, manager));
     } else if (typeof props.css === 'string') {
-      // String-style CSS gets its own class in override context
       const uniqueClassName = ValueUtils.generateUniqueClassName(props.css);
-      (manager || utilityClassManager).injectRule(`.${uniqueClassName} { ${props.css} }`, 'override');
+      activeManager.injectRule(`.${uniqueClassName} { ${props.css} }`, 'override');
       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, manager));
-    });
-  }
   return classes;
 };
 
@@ -2995,27 +3007,47 @@ const AnalyticsProvider = _ref => {
   }, children);
 };
 
+// Set of special prop names that affect CSS generation
+const styleRelevantProps = /*#__PURE__*/new Set(['on', 'media', 'animate', 'css', 'shadow', 'blend', 'widthHeight', 'paddingHorizontal', 'paddingVertical', 'marginHorizontal', 'marginVertical']);
+// Skip these props from hash computation
+const skipHashProps = /*#__PURE__*/new Set(['children', 'ref', 'key', 'style']);
+/**
+ * Fast serialization of a value for hashing purposes.
+ * Avoids JSON.stringify overhead for common cases (strings, numbers, booleans).
+ */
+function fastSerialize(value) {
+  if (value === null) return 'n';
+  const t = typeof value;
+  if (t === 'string') return `s${value}`;
+  if (t === 'number') return `d${value}`;
+  if (t === 'boolean') return value ? 'T' : 'F';
+  // Fall back to JSON.stringify only for complex objects
+  return JSON.stringify(value);
+}
 /**
  * Computes a stable hash of style-relevant props.
- * This is used to determine if style extraction needs to be re-run.
+ * Optimized: avoids sorting, uses fast serialization, feeds directly to hash.
  */
 function hashStyleProps(props) {
   // Build a deterministic string representation of style-relevant props
-  const parts = [];
-  const sortedKeys = Object.keys(props).sort();
-  for (const key of sortedKeys) {
+  // We use a single string accumulator instead of array + join
+  let hashInput = '';
+  const keys = Object.keys(props);
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
     // Skip non-style props that don't affect CSS generation
-    if (key === 'children' || key === 'ref' || key === 'key') continue;
+    if (skipHashProps.has(key)) continue;
     // Include style-relevant props
-    if (isStyleProp(key) || key.startsWith('_') || key === 'on' || key === 'media' || key === 'animate' || key === 'css' || key === 'shadow' || key === 'blend' || key === 'widthHeight' || key === 'paddingHorizontal' || key === 'paddingVertical' || key === 'marginHorizontal' || key === 'marginVertical') {
+    if (isStyleProp(key) || key.charCodeAt(0) === 95 ||
+    // starts with '_'
+    styleRelevantProps.has(key)) {
       const value = props[key];
       if (value !== undefined) {
-        // Use JSON.stringify for consistent serialization
-        parts.push(`${key}:${JSON.stringify(value)}`);
+        hashInput += `|${key}:${fastSerialize(value)}`;
       }
     }
   }
-  return hash(parts.join('|'));
+  return hash(hashInput);
 }
 /**
  * Custom hook that memoizes style extraction based on a stable hash of props.
@@ -3025,8 +3057,9 @@ function useStableStyleMemo(propsToProcess, getColor, mediaQueries, devices, man
   const cacheRef = useRef(null);
   // Compute hash directly — no useMemo since propsToProcess is always a new
   // reference (from destructuring), so the memo deps would always change.
-  const themeHash = theme ? JSON.stringify(theme) : '';
-  const currentHash = hashStyleProps(propsToProcess) + '|' + hash(themeHash);
+  // Theme hash uses Object.values() concatenation instead of JSON.stringify
+  const themeHash = theme ? hash(Object.values(theme).join('|')) : '';
+  const currentHash = hashStyleProps(propsToProcess) + '|' + themeHash;
   // Only recompute classes if hash changed
   if (!cacheRef.current || cacheRef.current.hash !== currentHash) {
     const classes = extractUtilityClasses(propsToProcess, getColor, mediaQueries, devices, manager);
@@ -3203,18 +3236,24 @@ const Element = /*#__PURE__*/React.memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     after,
     ...otherProps
   } = rest;
-  // First, add all event handlers (they start with "on" and have a capital letter after)
-  Object.keys(otherProps).forEach(key => {
-    if (key.startsWith('on') && key.length > 2 && key[2] === key[2].toUpperCase()) {
+  // Single pass: add event handlers and non-style props together
+  const otherKeys = Object.keys(otherProps);
+  for (let i = 0; i < otherKeys.length; i++) {
+    const key = otherKeys[i];
+    // Event handlers: start with "on" + uppercase letter
+    if (key.charCodeAt(0) === 111 &&
+    // 'o'
+    key.charCodeAt(1) === 110 &&
+    // 'n'
+    key.length > 2 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90 // uppercase A-Z
+    ) {
       newProps[key] = otherProps[key];
     }
-  });
-  // Then add all other non-style props
-  Object.keys(otherProps).forEach(key => {
-    if (!excludedKeys.has(key) && !isStyleProp(key) || includeKeys.has(key)) {
+    // Non-style props (pass through to DOM)
+    else if (!excludedKeys.has(key) && !isStyleProp(key) || includeKeys.has(key)) {
       newProps[key] = otherProps[key];
     }
-  });
+  }
   if (style) {
     newProps.style = style;
   }
@@ -3301,11 +3340,17 @@ const Span = /*#__PURE__*/React.forwardRef((props, ref) => (/*#__PURE__*/React.c
   ref: ref
 }))));
 
-const Image = /*#__PURE__*/React.forwardRef((props, ref) => (/*#__PURE__*/React.createElement(Element, Object.assign({
-  as: "img"
-}, props, {
-  ref: ref
-}))));
+const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const imageProps = {
+    ...props,
+    alt: props.alt || ''
+  };
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "img"
+  }, imageProps, {
+    ref: ref
+  }));
+});
 const ImageBackground = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     src,
@@ -3404,11 +3449,18 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => (/*#__PURE__*/React.
 }, props, {
   ref: ref
 }))));
-const Button = /*#__PURE__*/React.forwardRef((props, ref) => (/*#__PURE__*/React.createElement(Element, Object.assign({
-  as: "button"
-}, props, {
-  ref: ref
-}))));
+const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!props.children && !props['aria-label']) {
+      console.warn('Accessibility Warning: Button is missing an accessible name. If it is an icon-only button, please provide an `aria-label`.');
+    }
+  }
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "button"
+  }, props, {
+    ref: ref
+  }));
+});
 
 // animations.ts
 const fadeIn = function (_temp) {