app-studio 0.7.9 → 0.7.11

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

@@ -789,91 +789,44 @@
   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};`);
-        }
-      });
-    };
-    // 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};`);
-          }
+    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})`);
         }
-      });
+      }
     };
-    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)
@@ -1780,9 +1733,10 @@
     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
@@ -1811,22 +1765,71 @@
   '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([
+  // Accessibility
+  'role', 'tabIndex',
+  // Global HTML attributes
+  'id', 'title', 'lang', 'dir', 'hidden', 'draggable', 'contentEditable', 'spellCheck', 'nonce', 'slot', 'is', 'inputMode', 'enterKeyHint', 'autofocus', 'autoFocus', 'translate',
+  // Form attributes
+  'autoComplete', 'name', 'disabled', 'readOnly', 'required', 'checked', 'selected', 'multiple', 'value', 'defaultValue', 'defaultChecked', 'placeholder', 'htmlFor', 'type', 'accept', 'maxLength', 'minLength', 'pattern', 'noValidate', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
+  // Link/navigation attributes
+  'href', 'target', 'rel', 'download', 'referrerPolicy', 'integrity', 'crossOrigin',
+  // Form container attributes
+  'action', 'method', 'encType',
+  // Media attributes
+  'autoPlay', 'controls', 'loop', 'muted', 'playsInline', 'poster', 'preload', 'mediaGroup',
+  // Image/embed attributes
+  'loading', 'decoding', 'sizes', 'srcDoc', 'srcLang', 'srcSet', 'useMap',
+  // Table attributes
+  'colSpan', 'rowSpan', 'cols', 'rows', 'headers', 'scope', 'span',
+  // Iframe/embed attributes
+  'sandbox', 'allowFullScreen', 'frameBorder', 'scrolling', 'seamless', 'allow',
+  // Interactive attributes
+  'open', 'cite', 'dateTime', 'reversed', 'start', 'high', 'low', 'optimum', 'wrap', 'shape', 'size', 'summary',
+  // Script/resource attributes
+  'async', 'defer', 'noModule', 'charSet', 'httpEquiv', 'manifest',
+  // Microdata/RDFa attributes
+  'about', 'datatype', 'inlist', 'prefix', 'property', 'resource', 'typeof', 'vocab', 'itemProp', 'itemScope', 'itemType', 'itemID', 'itemRef',
+  // Deprecated but still used
+  'classID', 'contextMenu', 'keyParams', 'keyType', 'kind', 'label', 'list', 'profile', 'radioGroup', 'wmode', 'capture', 'challenge', 'scoped', 'step', 'form',
+  // SVG-only attributes (not CSS properties)
+  'viewBox', 'preserveAspectRatio', 'xmlns', 'xlinkHref', 'xmlBase', 'xmlLang', 'xmlSpace', 'd', 'pathLength', 'points', 'markerEnd', 'markerMid', 'markerStart', 'clipPathUnits', 'gradientUnits', 'gradientTransform', 'patternUnits', 'patternTransform', 'patternContentUnits', 'spreadMethod', 'startOffset', 'stdDeviation', 'stitchTiles', 'surfaceScale', 'textLength', 'lengthAdjust', 'maskUnits', 'maskContentUnits', 'filterUnits', 'primitiveUnits', 'numOctaves', 'baseFrequency', 'seed', 'result', 'in2', 'values', 'keyTimes', 'keySplines', 'repeatCount', 'repeatDur', 'calcMode', 'attributeName', 'attributeType', 'begin', 'dur', 'end', 'by']);
   // Improved style prop detection
   const isStyleProp = prop => {
     // First check if it's a common event handler (these should never be treated as style props)
     if (commonEventHandlers.has(prop)) {
       return false;
     }
+    // HTML attributes should never be treated as style props
+    if (htmlOnlyAttributes.has(prop)) {
+      return false;
+    }
+    // Any prop containing a hyphen is an HTML attribute (aria-*, data-*, accept-charset, etc.)
+    // In React, CSS properties are always camelCase — only CSS custom properties use hyphens (--*),
+    // and data-style-* is a special convention handled separately below.
+    if (prop.includes('-') && !prop.startsWith('--') && !prop.startsWith('data-style-')) {
+      return false;
+    }
     // Check if it's a valid CSS property or custom style 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)
+    // 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;
       }
     }
@@ -1960,67 +1963,25 @@
 
   /**
    * 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'],
@@ -2260,20 +2221,18 @@
       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)) {
@@ -2637,21 +2596,24 @@
       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 keys = Object.keys(styles);
+    for (let i = 0; i < keys.length; i++) {
+      const value = styles[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;
   }
   // Add a function to handle nested pseudo-classes
@@ -2770,6 +2732,7 @@
   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;
@@ -2777,21 +2740,30 @@
       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) {
@@ -2820,80 +2792,103 @@
       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;
   };
 
@@ -2960,27 +2955,47 @@
     }, 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.
@@ -2990,8 +3005,9 @@
     const cacheRef = React.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);
@@ -3168,18 +3184,24 @@
       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;
     }
@@ -3266,11 +3288,17 @@
     ref: ref
   }))));
 
-  const Image = /*#__PURE__*/React__default.forwardRef((props, ref) => (/*#__PURE__*/React__default.createElement(Element, Object.assign({
-    as: "img"
-  }, props, {
-    ref: ref
-  }))));
+  const Image = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+    const imageProps = {
+      ...props,
+      alt: props.alt || ''
+    };
+    return /*#__PURE__*/React__default.createElement(Element, Object.assign({
+      as: "img"
+    }, imageProps, {
+      ref: ref
+    }));
+  });
   const ImageBackground = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     let {
       src,
@@ -3369,11 +3397,18 @@
   }, props, {
     ref: ref
   }))));
-  const Button = /*#__PURE__*/React__default.forwardRef((props, ref) => (/*#__PURE__*/React__default.createElement(Element, Object.assign({
-    as: "button"
-  }, props, {
-    ref: ref
-  }))));
+  const Button = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+    {
+      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__default.createElement(Element, Object.assign({
+      as: "button"
+    }, props, {
+      ref: ref
+    }));
+  });
 
   // animations.ts
   const fadeIn = function (_temp) {