app-studio 0.6.59 → 0.7.0

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

@@ -1072,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;
@@ -1394,9 +1395,34 @@ const ThemeProvider = _ref => {
     themeMode,
     setThemeMode
   }), [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',
@@ -1465,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,
@@ -1501,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);
@@ -1559,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 = {
@@ -1733,7 +1807,9 @@ const cssProperties = /*#__PURE__*/new Set([
 // Borders
 'border', 'borderWidth', 'borderStyle', 'borderColor', 'borderRadius', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius',
 // Effects
-'boxShadow', 'textShadow', 'transform', 'transition', 'animation', 'filter', 'backdropFilter', 'mixBlendMode',
+'boxShadow', 'textShadow', 'transform', 'transition', 'animation', 'animationName', 'animationDuration', 'animationTimingFunction', 'animationDelay', 'animationIterationCount', 'animationDirection', 'animationFillMode', 'animationPlayState',
+// Scroll-driven animation properties (CSS Scroll-Driven Animations spec)
+'animationTimeline', 'animationRange', 'animationRangeStart', 'animationRangeEnd', 'scrollTimeline', 'scrollTimelineName', 'scrollTimelineAxis', 'viewTimeline', 'viewTimelineName', 'viewTimelineAxis', 'viewTimelineInset', 'filter', 'backdropFilter', 'mixBlendMode',
 // Layout
 'display', 'visibility', 'overflow', 'overflowX', 'overflowY', 'float', 'clear', 'objectFit', 'objectPosition',
 // Interactivity
@@ -1850,8 +1926,10 @@ const generateKeyframes = animation => {
     playState,
     timeline,
     range,
-    ...keyframesDef
+    keyframes: explicitKeyframes,
+    ...rest
   } = animation;
+  const keyframesDef = explicitKeyframes || rest;
   // Générer une clé pour le cache basée sur les keyframes
   const animationConfigString = JSON.stringify(keyframesDef);
   if (keyframesCache.has(animationConfigString)) {
@@ -1878,14 +1956,14 @@ const generateKeyframes = animation => {
     const styles = keyframesDef[key];
     keyframesContent.push(`${cssKey} { ${styleObjectToCss(styles)} }`);
   });
-  const keyframes = `
+  const keyframesCss = `
     @keyframes ${keyframesName} {
       ${keyframesContent.join('\n')}
     }
   `;
   return {
     keyframesName,
-    keyframes
+    keyframes: keyframesCss
   };
 };
 
@@ -2138,16 +2216,28 @@ const AnimationUtils = {
         (manager || utilityClassManager).injectRule(keyframes);
       }
       result.names.push(keyframesName);
-      const durationMs = this.parseDuration(animation.duration || '0s');
-      const delayMs = this.parseDuration(animation.delay || '0s');
-      const totalDelayMs = cumulativeTime + delayMs;
-      cumulativeTime = totalDelayMs + durationMs;
-      result.durations.push(this.formatDuration(durationMs));
+      // For scroll-driven animations (with timeline), use 'auto' duration
+      // For time-based animations, parse the duration normally
+      const hasTimeline = !!animation.timeline;
+      if (hasTimeline) {
+        // Scroll-driven animations should use 'auto' duration
+        // unless explicitly specified
+        result.durations.push(animation.duration || 'auto');
+        // Don't accumulate time for scroll-driven animations
+        result.delays.push(animation.delay || '0s');
+      } else {
+        const durationMs = this.parseDuration(animation.duration || '0s');
+        const delayMs = this.parseDuration(animation.delay || '0s');
+        const totalDelayMs = cumulativeTime + delayMs;
+        cumulativeTime = totalDelayMs + durationMs;
+        result.durations.push(this.formatDuration(durationMs));
+        result.delays.push(this.formatDuration(totalDelayMs));
+      }
       result.timingFunctions.push(animation.timingFunction || 'ease');
-      result.delays.push(this.formatDuration(totalDelayMs));
       result.iterationCounts.push(animation.iterationCount !== undefined ? `${animation.iterationCount}` : '1');
       result.directions.push(animation.direction || 'normal');
-      result.fillModes.push(animation.fillMode || 'none');
+      // Default to 'both' fillMode for scroll-driven animations, 'none' for time-based
+      result.fillModes.push(animation.fillMode || (hasTimeline ? 'both' : 'none'));
       result.playStates.push(animation.playState || 'running');
       result.timelines.push(animation.timeline || '');
       result.ranges.push(animation.range || '');
@@ -2876,6 +2966,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',
@@ -2921,15 +3055,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);
@@ -2970,15 +3100,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 {
@@ -2992,9 +3123,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 {
@@ -3006,10 +3137,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
   };
@@ -4921,20 +5052,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);
@@ -4966,10 +5100,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);
@@ -4977,11 +5117,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];
 }
 
@@ -4998,7 +5138,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);
@@ -5009,9 +5150,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;
@@ -5040,7 +5182,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);
@@ -5058,6 +5200,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
@@ -5073,18 +5216,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 () => {
@@ -5093,7 +5236,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]);
@@ -5168,21 +5311,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 {
@@ -5198,7 +5404,6 @@ const useResponsive = () => {
     on,
     is: on
   };
-  // console.log('[useResponsive] Hook called, returning:', { screen, orientation, 'on(mobile)': on('mobile') });
   return result;
 };
 
@@ -5368,27 +5573,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) {
@@ -5432,7 +5638,7 @@ const useInfiniteScroll = function (callback, options) {
     sentinelRef: setSentinel
   };
 };
-const useScrollDirection = function (threshold) {
+const useScrollDirection = function (threshold, targetWindow) {
   if (threshold === void 0) {
     threshold = 5;
   }
@@ -5441,12 +5647,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) {
@@ -5457,8 +5666,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(() => {
@@ -5468,16 +5679,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;
 };
 
@@ -5486,6 +5697,7 @@ const useWindowSize = () => React.useContext(WindowSizeContext);
 function useInView(options) {
   const {
     triggerOnce = false,
+    targetWindow,
     ...observerOptions
   } = options || {};
   const ref = React.useRef(null);
@@ -5493,6 +5705,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) {
@@ -5505,18 +5721,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
  *
@@ -6091,6 +6410,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;
@@ -6117,6 +6437,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;
@@ -6156,10 +6477,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;
@@ -6174,6 +6499,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;