app-studio 0.6.58 → 0.6.60

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

@@ -900,7 +900,8 @@ const ThemeContext = /*#__PURE__*/React.createContext({
   getColor: () => '',
   getColorHex: () => '',
   getColorRGBA: () => '',
-  getColorScheme: () => 'light',
+  getColorScheme: () => undefined,
+  getContrastColor: () => 'black',
   theme: {},
   colors: {
     main: defaultLightColors,
@@ -1071,7 +1072,8 @@ const ThemeProvider = _ref => {
     dark: darkOverride = {},
     light: lightOverride = {},
     children,
-    strict = false
+    strict = false,
+    targetWindow
   } = _ref;
   const [themeMode, setThemeMode] = React.useState(initialMode);
   const colorCache = React.useRef(new Map()).current;
@@ -1292,23 +1294,135 @@ const ThemeProvider = _ref => {
     if (!override) colorCache.set(cacheKey, rgba);
     return rgba;
   }, [themeMode, colorCache, resolveColorTokenForMode]);
-  const getColorScheme = React.useCallback(override => {
-    return override?.themeMode ?? themeMode;
-  }, [themeMode]);
+  const getColorScheme = React.useCallback((name, override) => {
+    if (!name || typeof name !== 'string') return undefined;
+    const effectiveMode = override?.themeMode ?? themeMode;
+    const effectiveTheme = override?.theme ? deepMerge(mergedTheme, override.theme) : mergedTheme;
+    // Resolve theme.* tokens to get the underlying color token
+    let colorToken = name;
+    if (name.startsWith(THEME_PREFIX)) {
+      const themeKey = name.substring(THEME_PREFIX.length);
+      const themeValue = effectiveTheme[themeKey];
+      if (typeof themeValue === 'string') {
+        colorToken = themeValue;
+      }
+    }
+    // Handle light.* or dark.* prefixes
+    if (colorToken.startsWith('light.') || colorToken.startsWith('dark.')) {
+      const prefixLength = colorToken.startsWith('light.') ? 6 : 5;
+      colorToken = `${COLOR_PREFIX}${colorToken.substring(prefixLength)}`;
+    }
+    // Extract color scheme from color.* tokens (e.g., color.blue.500 -> 'blue')
+    if (colorToken.startsWith(COLOR_PREFIX)) {
+      const keys = colorToken.substring(COLOR_PREFIX.length).split('.');
+      if (keys.length >= 1) {
+        return keys[0]; // Return the color scheme name (e.g., 'blue', 'pink')
+      }
+    }
+    // Handle hex or rgba colors by finding the closest match in the palette
+    const normalizedInput = normalizeToHex(colorToken).toLowerCase();
+    if (normalizedInput.startsWith('#')) {
+      const colorsToUse = themeColors[effectiveMode];
+      const palette = deepMerge(colorsToUse.palette, override?.colors?.palette || {});
+      const main = deepMerge(colorsToUse.main, override?.colors?.main || {});
+      // First check main colors for exact match
+      for (const [colorName, colorValue] of Object.entries(main)) {
+        if (typeof colorValue === 'string') {
+          const normalizedPalette = normalizeToHex(colorValue).toLowerCase();
+          if (normalizedPalette === normalizedInput) {
+            return colorName;
+          }
+        }
+      }
+      // Then check palette colors for exact match
+      for (const [colorName, shades] of Object.entries(palette)) {
+        if (typeof shades === 'object' && shades !== null) {
+          for (const [, shadeValue] of Object.entries(shades)) {
+            if (typeof shadeValue === 'string') {
+              const normalizedPalette = normalizeToHex(shadeValue).toLowerCase();
+              if (normalizedPalette === normalizedInput) {
+                return colorName;
+              }
+            }
+          }
+        }
+      }
+    }
+    return undefined;
+  }, [mergedTheme, themeMode, themeColors]);
+  const getContrastColor = React.useCallback((name, override) => {
+    if (!name || typeof name !== 'string') return 'black';
+    const effectiveMode = override?.themeMode ?? themeMode;
+    // First resolve the color to a hex value
+    let hexColor;
+    // Check if it's already a hex or rgb color
+    if (name.startsWith('#') || name.startsWith('rgb')) {
+      hexColor = normalizeToHex(name);
+    } else {
+      // Resolve the token to get the actual color value
+      const resolved = resolveColorTokenForMode(name, effectiveMode, override);
+      hexColor = normalizeToHex(resolved);
+    }
+    // If we couldn't get a valid hex, default to black
+    if (!hexColor.startsWith('#') || hexColor.length < 7) {
+      return 'black';
+    }
+    // Extract RGB values
+    const hex = hexColor.slice(1);
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    // Calculate relative luminance using the sRGB formula
+    // https://www.w3.org/TR/WCAG20/#relativeluminancedef
+    const toLinear = c => {
+      const sRGB = c / 255;
+      return sRGB <= 0.03928 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);
+    };
+    const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+    // Use threshold of 0.179 (WCAG recommendation)
+    // Return white for dark colors, black for light colors
+    return luminance > 0.179 ? 'black' : 'white';
+  }, [themeMode, resolveColorTokenForMode]);
   // --- Memoize Context Value ---
   const contextValue = React.useMemo(() => ({
     getColor,
     getColorHex,
     getColorRGBA,
     getColorScheme,
+    getContrastColor,
     theme: mergedTheme,
     colors: currentColors,
     themeMode,
     setThemeMode
-  }), [getColor, getColorHex, getColorRGBA, getColorScheme, mergedTheme, currentColors, themeMode]);
+  }), [getColor, getColorHex, getColorRGBA, getColorScheme, getContrastColor, mergedTheme, currentColors, themeMode]);
+  // Generate CSS variables
+  const cssVariables = React.useMemo(() => generateCSSVariables(mergedTheme, themeColors.light, themeColors.dark), [mergedTheme, themeColors]);
+  // Inject CSS variables into target document (for iframe support)
+  React.useEffect(() => {
+    if (!targetWindow) return;
+    const targetDoc = targetWindow.document;
+    const styleId = 'app-studio-theme-vars';
+    // Remove existing style tag if any
+    const existing = targetDoc.getElementById(styleId);
+    if (existing) {
+      existing.remove();
+    }
+    // Create and inject new style tag
+    const styleTag = targetDoc.createElement('style');
+    styleTag.id = styleId;
+    styleTag.textContent = cssVariables;
+    targetDoc.head.appendChild(styleTag);
+    // Cleanup on unmount
+    return () => {
+      const styleToRemove = targetDoc.getElementById(styleId);
+      if (styleToRemove) {
+        styleToRemove.remove();
+      }
+    };
+  }, [targetWindow, cssVariables]);
   return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React__default.createElement("style", null, generateCSSVariables(mergedTheme, themeColors.light, themeColors.dark)), /*#__PURE__*/React__default.createElement("div", {
+  }, !targetWindow && /*#__PURE__*/React__default.createElement("style", null, cssVariables), /*#__PURE__*/React__default.createElement("div", {
     "data-theme": themeMode,
     style: {
       backgroundColor: 'white',
@@ -1377,32 +1491,57 @@ const debounce = (func, wait) => {
 };
 // Helper to compute breakpoint from width
 const getBreakpointFromWidth = (width, breakpoints) => {
-  // console.log('[ResponsiveProvider] Computing breakpoint for width:', width);
-  // console.log('[ResponsiveProvider] Breakpoints config:', breakpoints);
   const sortedBreakpoints = Object.entries(breakpoints).sort((_ref, _ref2) => {
     let [, a] = _ref;
     let [, b] = _ref2;
     return b - a;
   }); // Sort descending by min value
-  // console.log('[ResponsiveProvider] Sorted breakpoints:', sortedBreakpoints);
   for (const [name, minWidth] of sortedBreakpoints) {
     if (width >= minWidth) {
-      // console.log(
-      //   '[ResponsiveProvider] ✓ Match found:',
-      //   name,
-      //   'for width',
-      //   width,
-      //   '>= minWidth',
-      //   minWidth
-      // );
       return name;
     }
   }
   const fallback = sortedBreakpoints[sortedBreakpoints.length - 1]?.[0] || 'xs';
-  // console.log('[ResponsiveProvider] No match, using fallback:', fallback);
   return fallback;
 };
-// Create the Context with default values
+// ============================================================================
+// SPLIT CONTEXTS FOR OPTIMIZED RE-RENDERS
+// ============================================================================
+// BreakpointContext - changes rarely (only on breakpoint threshold crossing)
+const defaultBreakpointConfig = {
+  breakpoints: defaultBreakpointsConfig,
+  devices: defaultDeviceConfig,
+  mediaQueries: /*#__PURE__*/getMediaQueries(defaultBreakpointsConfig),
+  currentBreakpoint: 'xs',
+  currentDevice: 'mobile',
+  orientation: 'portrait'
+};
+const BreakpointContext = /*#__PURE__*/React.createContext(defaultBreakpointConfig);
+// WindowDimensionsContext - changes often (on every resize)
+const defaultWindowDimensions = {
+  width: 0,
+  height: 0
+};
+const WindowDimensionsContext = /*#__PURE__*/React.createContext(defaultWindowDimensions);
+// ============================================================================
+// HOOKS FOR SPLIT CONTEXTS
+// ============================================================================
+/**
+ * Hook to access breakpoint information only.
+ * Components using this hook will NOT re-render on every resize,
+ * only when the breakpoint actually changes.
+ */
+const useBreakpointContext = () => React.useContext(BreakpointContext);
+/**
+ * Hook to access window dimensions.
+ * Components using this hook WILL re-render on every resize.
+ * Use sparingly - prefer useBreakpointContext when possible.
+ */
+const useWindowDimensionsContext = () => React.useContext(WindowDimensionsContext);
+// ============================================================================
+// LEGACY CONTEXT FOR BACKWARD COMPATIBILITY
+// ============================================================================
+// Create the combined Context with default values (for backward compatibility)
 const ResponsiveContext = /*#__PURE__*/React.createContext({
   breakpoints: defaultBreakpointsConfig,
   devices: defaultDeviceConfig,
@@ -1413,56 +1552,63 @@ const ResponsiveContext = /*#__PURE__*/React.createContext({
   currentDevice: 'mobile',
   orientation: 'portrait'
 });
-// Custom Hook to Access the Responsive Context
+/**
+ * Legacy hook for backward compatibility.
+ * Prefer useBreakpointContext for better performance.
+ * @deprecated Use useBreakpointContext instead for better performance
+ */
 const useResponsiveContext = () => React.useContext(ResponsiveContext);
 const ResponsiveProvider = _ref3 => {
   let {
     breakpoints = defaultBreakpointsConfig,
     devices = defaultDeviceConfig,
-    children
+    children,
+    targetWindow
   } = _ref3;
+  const win = targetWindow || (typeof window !== 'undefined' ? window : null);
+  // Track current breakpoint - only updates when crossing thresholds
   const [screen, setScreen] = React.useState(() => {
-    // Initialize with correct breakpoint instead of hardcoded 'xs'
-    if (typeof window !== 'undefined') {
-      return getBreakpointFromWidth(window.innerWidth, breakpoints);
+    if (win) {
+      return getBreakpointFromWidth(win.innerWidth, breakpoints);
     }
     return 'xs';
   });
+  // Track orientation - rarely changes
   const [orientation, setOrientation] = React.useState('portrait');
-  const [size, setSize] = React.useState({
-    width: typeof window !== 'undefined' ? window.innerWidth : 0,
-    height: typeof window !== 'undefined' ? window.innerHeight : 0
+  // Track window dimensions - changes often
+  const [dimensions, setDimensions] = React.useState({
+    width: win?.innerWidth || 0,
+    height: win?.innerHeight || 0
   });
+  // Use ref to track previous breakpoint to avoid unnecessary state updates
+  const prevBreakpointRef = React.useRef(screen);
   const mediaQueries = React.useMemo(() => getMediaQueries(breakpoints), [breakpoints]);
   React.useEffect(() => {
-    // console.log('[ResponsiveProvider] useEffect running - initial setup');
+    if (!win) return;
     // Set initial screen size immediately based on window width
-    const initialScreen = getBreakpointFromWidth(window.innerWidth, breakpoints);
-    // console.log(
-    //   '[ResponsiveProvider] Setting initial screen to:',
-    //   initialScreen
-    // );
+    const initialScreen = getBreakpointFromWidth(win.innerWidth, breakpoints);
     setScreen(initialScreen);
+    prevBreakpointRef.current = initialScreen;
     const handleResize = () => {
-      const newWidth = window.innerWidth;
-      const newHeight = window.innerHeight;
-      // console.log('[ResponsiveProvider] Resize event - new dimensions:', {
-      //   width: newWidth,
-      //   height: newHeight,
-      // });
-      setSize({
+      const newWidth = win.innerWidth;
+      const newHeight = win.innerHeight;
+      // Always update dimensions (WindowDimensionsContext will re-render)
+      setDimensions({
         width: newWidth,
         height: newHeight
       });
-      // Update screen on resize
+      // Only update breakpoint if it actually changed
+      // This prevents BreakpointContext from causing unnecessary re-renders
       const newScreen = getBreakpointFromWidth(newWidth, breakpoints);
-      // console.log('[ResponsiveProvider] Setting screen to:', newScreen);
-      setScreen(newScreen);
+      if (newScreen !== prevBreakpointRef.current) {
+        prevBreakpointRef.current = newScreen;
+        setScreen(newScreen);
+      }
     };
     const debouncedResize = debounce(handleResize, 100);
-    window.addEventListener('resize', debouncedResize);
+    win.addEventListener('resize', debouncedResize);
     // Set up orientation listener
-    const orientationMql = window.matchMedia('(orientation: landscape)');
+    const orientationMql = win.matchMedia('(orientation: landscape)');
     const onOrientationChange = () => setOrientation(orientationMql.matches ? 'landscape' : 'portrait');
     if (orientationMql.addEventListener) {
       orientationMql.addEventListener('change', onOrientationChange);
@@ -1471,30 +1617,46 @@ const ResponsiveProvider = _ref3 => {
     }
     onOrientationChange();
     return () => {
-      window.removeEventListener('resize', debouncedResize);
+      win.removeEventListener('resize', debouncedResize);
       if (orientationMql.removeEventListener) {
         orientationMql.removeEventListener('change', onOrientationChange);
       } else {
         orientationMql.removeListener(onOrientationChange);
       }
     };
-  }, [breakpoints]); // Removed mediaQueries dep since we now use direct width comparison
-  const value = React.useMemo(() => {
-    const contextValue = {
-      breakpoints,
-      devices,
-      mediaQueries,
-      currentWidth: size.width,
-      currentHeight: size.height,
-      currentBreakpoint: screen,
-      currentDevice: determineCurrentDevice(screen, devices),
-      orientation
-    };
-    return contextValue;
-  }, [breakpoints, devices, mediaQueries, size, screen, orientation]);
-  return /*#__PURE__*/React__default.createElement(ResponsiveContext.Provider, {
-    value: value
-  }, children);
+  }, [breakpoints, win]);
+  // Breakpoint context value - only updates when breakpoint/orientation changes
+  const breakpointValue = React.useMemo(() => ({
+    breakpoints,
+    devices,
+    mediaQueries,
+    currentBreakpoint: screen,
+    currentDevice: determineCurrentDevice(screen, devices),
+    orientation
+  }), [breakpoints, devices, mediaQueries, screen, orientation]);
+  // Window dimensions context value - updates on every resize
+  const dimensionsValue = React.useMemo(() => ({
+    width: dimensions.width,
+    height: dimensions.height
+  }), [dimensions.width, dimensions.height]);
+  // Combined legacy context value for backward compatibility
+  const legacyValue = React.useMemo(() => ({
+    breakpoints,
+    devices,
+    mediaQueries,
+    currentWidth: dimensions.width,
+    currentHeight: dimensions.height,
+    currentBreakpoint: screen,
+    currentDevice: determineCurrentDevice(screen, devices),
+    orientation
+  }), [breakpoints, devices, mediaQueries, dimensions, screen, orientation]);
+  return /*#__PURE__*/React__default.createElement(BreakpointContext.Provider, {
+    value: breakpointValue
+  }, /*#__PURE__*/React__default.createElement(WindowDimensionsContext.Provider, {
+    value: dimensionsValue
+  }, /*#__PURE__*/React__default.createElement(ResponsiveContext.Provider, {
+    value: legacyValue
+  }, children)));
 };
 
 const Shadows = {
@@ -2788,6 +2950,50 @@ const AnalyticsProvider = _ref => {
   }, children);
 };
 
+/**
+ * Computes a stable hash of style-relevant props.
+ * This is used to determine if style extraction needs to be re-run.
+ */
+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) {
+    // Skip non-style props that don't affect CSS generation
+    if (key === 'children' || key === 'ref' || key === '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') {
+      const value = props[key];
+      if (value !== undefined) {
+        // Use JSON.stringify for consistent serialization
+        parts.push(`${key}:${JSON.stringify(value)}`);
+      }
+    }
+  }
+  return hash(parts.join('|'));
+}
+/**
+ * Custom hook that memoizes style extraction based on a stable hash of props.
+ * Only recalculates when the hash of style-relevant props changes.
+ */
+function useStableStyleMemo(propsToProcess, getColor, mediaQueries, devices, manager, theme) {
+  const cacheRef = React.useRef(null);
+  // Compute hash of current props
+  const currentHash = React.useMemo(() => {
+    // Include theme in hash to bust cache on theme changes
+    const themeHash = theme ? JSON.stringify(theme) : '';
+    return hashStyleProps(propsToProcess) + '|' + hash(themeHash);
+  }, [propsToProcess, theme]);
+  // Only recompute classes if hash changed
+  if (!cacheRef.current || cacheRef.current.hash !== currentHash) {
+    const classes = extractUtilityClasses(propsToProcess, getColor, mediaQueries, devices, manager);
+    cacheRef.current = {
+      hash: currentHash,
+      classes
+    };
+  }
+  return cacheRef.current.classes;
+}
 const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     as = 'div',
@@ -2833,15 +3039,11 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
   const {
     mediaQueries,
     devices
-  } = useResponsiveContext();
+  } = useBreakpointContext();
   const {
     manager
   } = useStyleRegistry();
   const [isVisible, setIsVisible] = React.useState(false);
-  console.log({
-    mediaQueries,
-    devices
-  });
   React.useEffect(() => {
     if (!animateIn) {
       setIsVisible(true);
@@ -2882,15 +3084,16 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
       }
     };
   }, [animateOut, manager]);
-  const utilityClasses = React.useMemo(() => {
-    const propsToProcess = {
+  // Prepare props for processing (apply view/scroll timeline if needed)
+  const propsToProcess = React.useMemo(() => {
+    const processed = {
       ...rest,
       blend
     };
     // Apply view() timeline ONLY if animateOn='View' (not Both or Mount)
-    if (animateOn === 'View' && propsToProcess.animate) {
-      const animations = Array.isArray(propsToProcess.animate) ? propsToProcess.animate : [propsToProcess.animate];
-      propsToProcess.animate = animations.map(anim => {
+    if (animateOn === 'View' && processed.animate) {
+      const animations = Array.isArray(processed.animate) ? processed.animate : [processed.animate];
+      processed.animate = animations.map(anim => {
         // Only add timeline if not already specified
         if (!anim.timeline) {
           return {
@@ -2904,9 +3107,9 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
       });
     }
     // 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 => {
+    if (animateOn === 'Scroll' && processed.animate) {
+      const animations = Array.isArray(processed.animate) ? processed.animate : [processed.animate];
+      processed.animate = animations.map(anim => {
         // Only add timeline if not already specified
         if (!anim.timeline) {
           return {
@@ -2918,10 +3121,10 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
         return anim;
       });
     }
-    return extractUtilityClasses(propsToProcess, color => {
-      return getColor(color);
-    }, mediaQueries, devices, manager);
-  }, [rest, blend, animateOn, mediaQueries, devices, theme, manager]);
+    return processed;
+  }, [rest, blend, animateOn]);
+  // Use hash-based memoization for style extraction
+  const utilityClasses = useStableStyleMemo(propsToProcess, getColor, mediaQueries, devices, manager, theme);
   const newProps = {
     ref: setRef
   };
@@ -4833,20 +5036,23 @@ const WindowSizeContext = /*#__PURE__*/React.createContext({
 });
 const WindowSizeProvider = _ref => {
   let {
-    children
+    children,
+    targetWindow
   } = _ref;
+  const win = targetWindow || (typeof window !== 'undefined' ? window : null);
   const [size, setSize] = React.useState({
-    width: window.innerWidth,
-    height: window.innerHeight
+    width: win?.innerWidth || 0,
+    height: win?.innerHeight || 0
   });
   React.useEffect(() => {
+    if (!win) return;
     const handleResize = () => setSize({
-      width: window.innerWidth,
-      height: window.innerHeight
+      width: win.innerWidth,
+      height: win.innerHeight
     });
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
+    win.addEventListener('resize', handleResize);
+    return () => win.removeEventListener('resize', handleResize);
+  }, [win]);
   return /*#__PURE__*/React__default.createElement(WindowSizeContext.Provider, {
     value: size
   }, children);
@@ -4878,10 +5084,16 @@ function useActive() {
   return [ref, active];
 }
 
-function useClickOutside() {
+function useClickOutside(options) {
   const [clickedOutside, setClickedOutside] = React.useState(false);
   const ref = React.useRef(null);
+  const {
+    targetWindow
+  } = options || {};
   React.useEffect(() => {
+    const win = targetWindow || (typeof window !== 'undefined' ? window : null);
+    if (!win) return;
+    const doc = win.document;
     const handleClick = e => {
       if (ref.current && !ref.current.contains(e.target)) {
         setClickedOutside(true);
@@ -4889,11 +5101,11 @@ function useClickOutside() {
         setClickedOutside(false);
       }
     };
-    document.addEventListener('mousedown', handleClick);
+    doc.addEventListener('mousedown', handleClick);
     return () => {
-      document.removeEventListener('mousedown', handleClick);
+      doc.removeEventListener('mousedown', handleClick);
     };
-  }, []);
+  }, [targetWindow]);
   return [ref, clickedOutside];
 }
 
@@ -4910,7 +5122,8 @@ function useElementPosition(options) {
     throttleMs = 500,
     trackOnHover = true,
     trackOnScroll = false,
-    trackOnResize = false
+    trackOnResize = false,
+    targetWindow
   } = options;
   const elementRef = React.useRef(null);
   const [relation, setRelation] = React.useState(null);
@@ -4921,9 +5134,10 @@ function useElementPosition(options) {
       setRelation(currentRelation => currentRelation === null ? null : null);
       return;
     }
+    const win = targetWindow || element.ownerDocument?.defaultView || window;
     const rect = element.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
+    const viewportHeight = win.innerHeight;
+    const viewportWidth = win.innerWidth;
     // 1. Determine element's general position in viewport
     const elementCenterY = rect.top + rect.height / 2;
     const elementCenterX = rect.left + rect.width / 2;
@@ -4952,7 +5166,7 @@ function useElementPosition(options) {
       }
       return newRelation;
     });
-  }, []); // This callback is stable
+  }, [targetWindow]); // This callback is stable
   const throttledUpdate = React.useCallback(() => {
     if (throttleTimerRef.current) {
       clearTimeout(throttleTimerRef.current);
@@ -4970,6 +5184,7 @@ function useElementPosition(options) {
     }
     const element = elementRef.current;
     if (!element) return;
+    const win = targetWindow || element.ownerDocument?.defaultView || window;
     const handler = throttledUpdate;
     const immediateHandler = calculateRelation;
     // Add event listeners based on configuration
@@ -4985,18 +5200,18 @@ function useElementPosition(options) {
     }
     // Scroll events - throttled
     if (trackOnScroll) {
-      window.addEventListener('scroll', handler, {
+      win.addEventListener('scroll', handler, {
         passive: true
       });
       cleanupFunctions.push(() => {
-        window.removeEventListener('scroll', handler);
+        win.removeEventListener('scroll', handler);
       });
     }
     // Resize events - throttled
     if (trackOnResize) {
-      window.addEventListener('resize', handler);
+      win.addEventListener('resize', handler);
       cleanupFunctions.push(() => {
-        window.removeEventListener('resize', handler);
+        win.removeEventListener('resize', handler);
       });
     }
     return () => {
@@ -5005,7 +5220,7 @@ function useElementPosition(options) {
       }
       cleanupFunctions.forEach(cleanup => cleanup());
     };
-  }, [trackChanges, trackOnHover, trackOnScroll, trackOnResize, throttledUpdate, calculateRelation]);
+  }, [trackChanges, trackOnHover, trackOnScroll, trackOnResize, throttledUpdate, calculateRelation, targetWindow]);
   const manualUpdateRelation = React.useCallback(() => {
     calculateRelation();
   }, [calculateRelation]);
@@ -5080,21 +5295,84 @@ const useMount = callback => {
 function useOnScreen(options) {
   const ref = React.useRef(null);
   const [isOnScreen, setOnScreen] = React.useState(false);
+  const {
+    targetWindow,
+    ...observerOptions
+  } = options || {};
   React.useEffect(() => {
     const node = ref.current;
     if (!node) return;
+    // If targetWindow is provided and root is not explicitly set,
+    // use the target window's document as the root
+    const win = targetWindow || node.ownerDocument?.defaultView || window;
+    const effectiveRoot = observerOptions.root !== undefined ? observerOptions.root : targetWindow ? win.document.documentElement : undefined;
     const observer = new IntersectionObserver(_ref => {
       let [entry] = _ref;
       setOnScreen(entry.isIntersecting);
-    }, options);
+    }, {
+      ...observerOptions,
+      root: effectiveRoot
+    });
     observer.observe(node);
     return () => {
       observer.disconnect();
     };
-  }, [options]);
+  }, [targetWindow, options]);
   return [ref, isOnScreen];
 }
 
+/**
+ * Optimized hook for components that only need breakpoint information.
+ * This hook will NOT cause re-renders on every window resize,
+ * only when the breakpoint actually changes.
+ *
+ * Use this hook instead of useResponsive for better performance
+ * when you only need to check breakpoints or device type.
+ *
+ * @example
+ * const { screen, on, is, orientation } = useBreakpoint();
+ * if (on('mobile')) { ... }
+ * if (is('xs')) { ... }
+ */
+const useBreakpoint = () => {
+  const context = useBreakpointContext();
+  const {
+    currentBreakpoint: screen,
+    orientation,
+    devices
+  } = context;
+  // Helper to check if current screen matches a breakpoint or device
+  const on = s => devices[s] ? devices[s].includes(screen) : s === screen;
+  return {
+    ...context,
+    screen,
+    orientation,
+    on,
+    is: on
+  };
+};
+/**
+ * Hook for components that need exact window dimensions.
+ * This hook WILL cause re-renders on every window resize.
+ * Use sparingly - prefer useBreakpoint when possible.
+ *
+ * @example
+ * const { width, height } = useWindowDimensions();
+ */
+const useWindowDimensions = () => {
+  return useWindowDimensionsContext();
+};
+/**
+ * Combined hook that provides both breakpoint info and window dimensions.
+ * This hook WILL cause re-renders on every window resize.
+ *
+ * For better performance, use:
+ * - useBreakpoint() when you only need breakpoint/device info
+ * - useWindowDimensions() when you only need exact dimensions
+ *
+ * @example
+ * const { screen, on, currentWidth, currentHeight } = useResponsive();
+ */
 const useResponsive = () => {
   const context = useResponsiveContext();
   const {
@@ -5110,7 +5388,6 @@ const useResponsive = () => {
     on,
     is: on
   };
-  // console.log('[useResponsive] Hook called, returning:', { screen, orientation, 'on(mobile)': on('mobile') });
   return result;
 };
 
@@ -5280,27 +5557,28 @@ const useScrollAnimation = function (ref, options) {
   };
 };
 // Enhanced useSmoothScroll with error handling
-const useSmoothScroll = () => {
+const useSmoothScroll = targetWindow => {
   return React.useCallback(function (element, offset) {
     if (offset === void 0) {
       offset = 0;
     }
     if (!element) return;
     try {
-      const top = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset) - offset;
-      if ('scrollBehavior' in document.documentElement.style) {
-        window.scrollTo({
+      const win = targetWindow || element.ownerDocument?.defaultView || window;
+      const top = element.getBoundingClientRect().top + (win.scrollY || win.pageYOffset) - offset;
+      if ('scrollBehavior' in win.document.documentElement.style) {
+        win.scrollTo({
           top,
           behavior: 'smooth'
         });
       } else {
         // Fallback for browsers that don't support smooth scrolling
-        window.scrollTo(0, top);
+        win.scrollTo(0, top);
       }
     } catch (error) {
       console.error('Error during smooth scroll:', error);
     }
-  }, []);
+  }, [targetWindow]);
 };
 // Enhanced useInfiniteScroll with debouncing
 const useInfiniteScroll = function (callback, options) {
@@ -5344,7 +5622,7 @@ const useInfiniteScroll = function (callback, options) {
     sentinelRef: setSentinel
   };
 };
-const useScrollDirection = function (threshold) {
+const useScrollDirection = function (threshold, targetWindow) {
   if (threshold === void 0) {
     threshold = 5;
   }
@@ -5353,12 +5631,15 @@ const useScrollDirection = function (threshold) {
   const lastDirection = React.useRef('up');
   const animationFrame = React.useRef();
   const ticking = React.useRef(false);
-  const updateDirection = () => {
-    const scrollY = window.scrollY || document.documentElement.scrollTop;
+  const updateDirection = React.useCallback(() => {
+    const win = targetWindow || (typeof window !== 'undefined' ? window : null);
+    if (!win) return;
+    const doc = win.document.documentElement;
+    const scrollY = win.scrollY || doc.scrollTop;
     const direction = scrollY > lastScrollY.current ? 'down' : 'up';
     const scrollDelta = Math.abs(scrollY - lastScrollY.current);
     // Vérifier si on est au bas de la page
-    const isAtBottom = window.innerHeight + scrollY >= document.documentElement.scrollHeight - 1;
+    const isAtBottom = win.innerHeight + scrollY >= doc.scrollHeight - 1;
     // Logique principale
     if (scrollDelta > threshold || direction === 'down' && isAtBottom) {
       if (direction !== lastDirection.current) {
@@ -5369,8 +5650,10 @@ const useScrollDirection = function (threshold) {
     // Mise à jour de la position avec un minimum de 0
     lastScrollY.current = Math.max(scrollY, 0);
     ticking.current = false;
-  };
+  }, [threshold, targetWindow]);
   React.useEffect(() => {
+    const win = targetWindow || (typeof window !== 'undefined' ? window : null);
+    if (!win) return;
     const handleScroll = () => {
       if (!ticking.current) {
         animationFrame.current = requestAnimationFrame(() => {
@@ -5380,16 +5663,16 @@ const useScrollDirection = function (threshold) {
         ticking.current = true;
       }
     };
-    window.addEventListener('scroll', handleScroll, {
+    win.addEventListener('scroll', handleScroll, {
       passive: true
     });
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      win.removeEventListener('scroll', handleScroll);
       if (animationFrame.current) {
         cancelAnimationFrame(animationFrame.current);
       }
     };
-  }, [threshold]);
+  }, [updateDirection, targetWindow]);
   return scrollDirection;
 };
 
@@ -5398,6 +5681,7 @@ const useWindowSize = () => React.useContext(WindowSizeContext);
 function useInView(options) {
   const {
     triggerOnce = false,
+    targetWindow,
     ...observerOptions
   } = options || {};
   const ref = React.useRef(null);
@@ -5405,6 +5689,10 @@ function useInView(options) {
   React.useEffect(() => {
     const element = ref.current;
     if (!element) return;
+    // If targetWindow is provided and root is not explicitly set,
+    // use the target window's document as the root
+    const win = targetWindow || element.ownerDocument?.defaultView || window;
+    const effectiveRoot = observerOptions.root !== undefined ? observerOptions.root : targetWindow ? win.document.documentElement : undefined;
     const observer = new IntersectionObserver(_ref => {
       let [entry] = _ref;
       if (entry.isIntersecting) {
@@ -5417,18 +5705,121 @@ function useInView(options) {
         // Only update to false if not using triggerOnce
         setInView(false);
       }
-    }, observerOptions);
+    }, {
+      ...observerOptions,
+      root: effectiveRoot
+    });
     observer.observe(element);
     return () => {
       observer.disconnect();
     };
-  }, [triggerOnce, ...Object.values(observerOptions || {})]);
+  }, [triggerOnce, targetWindow, ...Object.values(observerOptions || {})]);
   return {
     ref,
     inView
   };
 }
 
+/**
+ * Hook to register an iframe's document with the style manager.
+ * This ensures that all CSS utility classes are automatically injected into the iframe.
+ *
+ * @param iframeRef - Reference to the iframe element
+ *
+ * @example
+ * ```tsx
+ * const iframeRef = useRef<HTMLIFrameElement>(null);
+ * useIframeStyles(iframeRef);
+ *
+ * return <iframe ref={iframeRef} src="/content" />;
+ * ```
+ */
+function useIframeStyles(iframeRef) {
+  const {
+    manager
+  } = useStyleRegistry();
+  const registeredDocRef = React.useRef(null);
+  React.useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const registerDocument = () => {
+      const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+      if (!iframeDoc) return;
+      // Only register if not already registered
+      if (registeredDocRef.current !== iframeDoc) {
+        manager.addDocument(iframeDoc);
+        registeredDocRef.current = iframeDoc;
+      }
+    };
+    // Try to register immediately if document is ready
+    if (iframe.contentDocument) {
+      registerDocument();
+    }
+    // Also register on load event (for external sources)
+    iframe.addEventListener('load', registerDocument);
+    return () => {
+      iframe.removeEventListener('load', registerDocument);
+      // Clean up when unmounting
+      if (registeredDocRef.current) {
+        manager.removeDocument(registeredDocRef.current);
+        registeredDocRef.current = null;
+      }
+    };
+  }, [manager, iframeRef]);
+}
+/**
+ * Hook to get an iframe's window and document, and automatically register styles.
+ * This is a convenience hook that combines iframe access with style registration.
+ *
+ * @param iframeRef - Reference to the iframe element
+ * @returns Object containing iframeWindow, iframeDocument, and isLoaded flag
+ *
+ * @example
+ * ```tsx
+ * const iframeRef = useRef<HTMLIFrameElement>(null);
+ * const { iframeWindow, iframeDocument, isLoaded } = useIframe(iframeRef);
+ *
+ * return (
+ *   <>
+ *     <iframe ref={iframeRef} src="/content" />
+ *     {isLoaded && <div>Iframe loaded!</div>}
+ *   </>
+ * );
+ * ```
+ */
+function useIframe(iframeRef) {
+  const [iframeWindow, setIframeWindow] = React.useState(null);
+  const [iframeDocument, setIframeDocument] = React.useState(null);
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  // Register styles
+  useIframeStyles(iframeRef);
+  React.useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const updateState = () => {
+      const win = iframe.contentWindow;
+      const doc = iframe.contentDocument || win?.document;
+      if (win && doc) {
+        setIframeWindow(win);
+        setIframeDocument(doc);
+        setIsLoaded(true);
+      }
+    };
+    // Try immediately
+    updateState();
+    // Listen for load event
+    iframe.addEventListener('load', updateState);
+    return () => {
+      iframe.removeEventListener('load', updateState);
+    };
+  }, [iframeRef]);
+  return {
+    iframeWindow,
+    iframeDocument,
+    isLoaded
+  };
+}
+
 /**
  * View Animation Utilities
  *
@@ -6003,6 +6394,7 @@ exports.AnalyticsContext = AnalyticsContext;
 exports.AnalyticsProvider = AnalyticsProvider;
 exports.Animation = Animation;
 exports.AnimationUtils = AnimationUtils;
+exports.BreakpointContext = BreakpointContext;
 exports.Button = Button;
 exports.Center = Center;
 exports.Div = Div;
@@ -6029,6 +6421,7 @@ exports.UtilityClassManager = UtilityClassManager;
 exports.Vertical = Vertical;
 exports.VerticalResponsive = VerticalResponsive;
 exports.View = View;
+exports.WindowDimensionsContext = WindowDimensionsContext;
 exports.WindowSizeContext = WindowSizeContext;
 exports.WindowSizeProvider = WindowSizeProvider;
 exports.animateOnView = animateOnView;
@@ -6068,10 +6461,14 @@ exports.slideRightOnView = slideRightOnView;
 exports.slideUpOnView = slideUpOnView;
 exports.useActive = useActive;
 exports.useAnalytics = useAnalytics;
+exports.useBreakpoint = useBreakpoint;
+exports.useBreakpointContext = useBreakpointContext;
 exports.useClickOutside = useClickOutside;
 exports.useElementPosition = useElementPosition;
 exports.useFocus = useFocus;
 exports.useHover = useHover;
+exports.useIframe = useIframe;
+exports.useIframeStyles = useIframeStyles;
 exports.useInView = useInView;
 exports.useInfiniteScroll = useInfiniteScroll;
 exports.useKeyPress = useKeyPress;
@@ -6086,6 +6483,8 @@ exports.useServerInsertedHTML = useServerInsertedHTML;
 exports.useSmoothScroll = useSmoothScroll;
 exports.useStyleRegistry = useStyleRegistry;
 exports.useTheme = useTheme;
+exports.useWindowDimensions = useWindowDimensions;
+exports.useWindowDimensionsContext = useWindowDimensionsContext;
 exports.useWindowSize = useWindowSize;
 exports.utilityClassManager = utilityClassManager;
 exports.viewAnimationPresets = viewAnimationPresets;