@app-studio/web 0.9.13 → 0.9.15

package/dist/web.umd.development.js

@@ -5711,6 +5711,24 @@
     var {
       getColor
     } = appStudio.useTheme();
+    // Use useElementPosition for intelligent tooltip positioning
+    var {
+      ref: positionRef,
+      relation
+    } = appStudio.useElementPosition({
+      trackChanges: true,
+      trackOnHover: true,
+      trackOnScroll: true,
+      trackOnResize: true
+    });
+    // Create a separate ref for the SVG element
+    var chartRef = React.useRef(null);
+    // Sync the position ref with the chart ref for positioning calculations
+    React.useEffect(() => {
+      if (chartRef.current && positionRef) {
+        positionRef.current = chartRef.current;
+      }
+    }, [chartRef, positionRef]);
     // Calculate chart dimensions
     var size = Math.min(width, height);
     var radius = size / 2 * 0.8;
@@ -5779,12 +5797,30 @@
       return result;
     }, [dataPoints, total, radius, centerX, centerY, donutRadius, animationProgress, isDonut]);
     return /*#__PURE__*/React__default.createElement("svg", {
+      ref: chartRef,
       width: width,
       height: height
     }, slices.map((slice, index) => {
       var handleMouseEnter = e => {
         var tooltipContent = slice.label + ": " + slice.value + " (" + slice.percentage + ")";
-        showTooltip(e.clientX, e.clientY, tooltipContent);
+        // Use intelligent positioning based on useElementPosition relation data
+        var x = e.clientX;
+        var y = e.clientY;
+        if (relation && chartRef.current) {
+          var chartRect = chartRef.current.getBoundingClientRect();
+          // Adjust tooltip position based on available space
+          if (relation.space.horizontal === 'left') {
+            x = e.clientX - 100; // Offset tooltip to the left
+          } else {
+            x = e.clientX + 10; // Offset tooltip to the right
+          }
+          if (relation.space.vertical === 'top') {
+            y = e.clientY - 30; // Offset tooltip above
+          } else {
+            y = e.clientY + 10; // Offset tooltip below
+          }
+        }
+        showTooltip(x, y, tooltipContent);
       };
       var handleClick = () => {
         if (onSliceClick) {
@@ -13080,6 +13116,16 @@
     var [mentionStartPos, setMentionStartPos] = React.useState(-1);
     var [selectedMentionIndex, setSelectedMentionIndex] = React.useState(-1);
     var [filteredMentions, setFilteredMentions] = React.useState([]);
+    // Use useElementPosition for intelligent dropdown positioning
+    var {
+      ref: positionRef,
+      relation
+    } = appStudio.useElementPosition({
+      trackChanges: true,
+      trackOnHover: true,
+      trackOnScroll: true,
+      trackOnResize: true
+    });
     // Positioning state for dropdowns
     var [mentionPosition, setMentionPosition] = React.useState({
       x: 0,
@@ -13089,7 +13135,6 @@
       x: 0,
       y: 0
     });
-    // Note: Using custom positioning logic for better control over dropdown placement
     // Update the content of the editable div when the value prop changes
     React.useEffect(() => {
       var editableDiv = ref;
@@ -13141,7 +13186,13 @@
       setMentionStartPos(-1);
       setSelectedMentionIndex(-1);
     }, [mentionData, mentionTrigger]);
-    // Calculate optimal position for dropdowns
+    // Sync the position ref with the container ref for positioning calculations
+    React.useEffect(() => {
+      if (containerRef.current && positionRef) {
+        positionRef.current = containerRef.current;
+      }
+    }, [containerRef, positionRef]);
+    // Calculate optimal position for dropdowns using useElementPosition
     var calculateDropdownPosition = React.useCallback(function (dropdownHeight) {
       if (dropdownHeight === void 0) {
         dropdownHeight = 200;
@@ -13151,22 +13202,26 @@
         y: 0
       };
       var containerRect = containerRef.current.getBoundingClientRect();
+      // Use relation data for intelligent positioning if available
+      if (relation) {
+        var _useTopPlacement = relation.space.vertical === 'top';
+        return {
+          x: containerRect.left,
+          y: _useTopPlacement ? containerRect.top - dropdownHeight - 8 : containerRect.bottom + 8
+        };
+      }
+      // Fallback to manual calculation if relation data is not available
       var viewportHeight = window.innerHeight;
-      var viewportWidth = window.innerWidth;
-      // Calculate available space
       var availableSpace = {
         top: containerRect.top,
-        bottom: viewportHeight - containerRect.bottom,
-        left: containerRect.left,
-        right: viewportWidth - containerRect.right
+        bottom: viewportHeight - containerRect.bottom
       };
-      // Prefer bottom placement, but use top if not enough space
       var useTopPlacement = availableSpace.bottom < dropdownHeight + 8 && availableSpace.top > availableSpace.bottom;
       return {
         x: containerRect.left,
         y: useTopPlacement ? containerRect.top - dropdownHeight - 8 : containerRect.bottom + 8
       };
-    }, []);
+    }, [relation]);
     // Handle focus events
     var handleFocus = React.useCallback(() => {
       setIsFocused(true);
@@ -13372,7 +13427,7 @@
         opacity: 0.7,
         padding: '4px'
       }
-    }, "Mentions (Trigger: ", mentionTrigger, ")"))))), showSuggestions && suggestions.length > 0 && !showMentions && isFocused && !value && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    }, "Mentions (Trigger: ", mentionTrigger, ")", relation && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("br", null), "Space: ", relation.space.vertical, "-", relation.space.horizontal))))))), showSuggestions && suggestions.length > 0 && !showMentions && isFocused && !value && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       position: "fixed",
       left: suggestionPosition.x,
       top: suggestionPosition.y,
@@ -13418,7 +13473,7 @@
         opacity: 0.7,
         padding: '4px'
       }
-    }, "Suggestions (Focus-triggered)"))))));
+    }, "Suggestions (Focus-triggered)", relation && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("br", null), "Space: ", relation.space.vertical, "-", relation.space.horizontal))))))));
   });
   EditableInput.displayName = 'EditableInput';
 
@@ -17005,8 +17060,78 @@
     };
   };
 
-  var _excluded$T = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
+  var ToggleShapes = {
+    sharp: 0,
+    rounded: 4,
+    pillShaped: 24
+  };
+  /**
+   * Generate toggle variants with proper color combinations based on main color and contrast
+   * Similar to Button's getButtonVariants function
+   */
+  var getToggleVariants = (color, isLight) => ({
+    outline: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: color,
+      _hover: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(-1px)'
+      },
+      _active: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(0)'
+      },
+      transition: 'all 0.2s ease'
+    },
+    ghost: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 0,
+      borderStyle: 'none',
+      borderColor: 'transparent',
+      _hover: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(-1px)'
+      },
+      _active: {
+        backgroundColor: color,
+        color: isLight ? 'color.black' : 'color.white',
+        transform: 'translateY(0)'
+      },
+      transition: 'all 0.2s ease'
+    },
+    link: {
+      backgroundColor: 'transparent',
+      color: color,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px',
+      _hover: {
+        borderColor: color,
+        textDecorationThickness: '2px',
+        transform: 'translateY(-1px)'
+      },
+      _active: {
+        borderColor: color,
+        textDecorationThickness: '2px',
+        transform: 'translateY(0)'
+      },
+      transition: 'all 0.2s ease'
+    }
+  });
+
+  var _excluded$T = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
   var ToggleView = _ref => {
+    var _ref2;
     var {
         children,
         shape = 'rounded',
@@ -17017,25 +17142,30 @@
         isToggle,
         setIsToggled,
         onToggle,
-        views
+        views,
+        backgroundColor,
+        // primary candidate for main color
+        color,
+        // 2nd candidate for main color
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
-    var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
+    /* theme helpers */
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var mode = elementMode != null ? elementMode : themeMode;
+    /* MAIN COLOR – determines the entire palette */
+    var mainColorKey = (_ref2 = backgroundColor != null ? backgroundColor : color) != null ? _ref2 : 'theme.primary';
+    var mainTone = getColor(isDisabled ? 'theme.disabled' : mainColorKey, {
+      themeMode: mode
+    });
+    var tone = contrast(mainTone);
+    /* variant palette */
+    var palette = React.useMemo(() => getToggleVariants(mainTone, tone === 'light'), [mainTone, tone]);
+    var base = palette[variant];
     var isActive = !!(isToggle || isHovered);
-    var toggleVariants = {
-      outline: {
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'color.trueGray.400'
-      },
-      link: {
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: isActive ? toggleColor : 'transparent',
-        textDecoration: 'underline'
-      },
-      ghost: {}
-    };
     var handleHover = () => setIsHovered(!isHovered);
     var handleToggle = () => {
       if (!isDisabled) {
@@ -17052,14 +17182,15 @@
       role: "Toggle",
       padding: shape === 'pillShaped' ? '10px 12px' : '8px',
       width: "fit-content",
-      color: isActive ? 'color.white' : toggleColor,
-      backgroundColor: isActive ? toggleColor : 'transparent',
-      onMouseEnter: handleHover,
-      onMouseLeave: () => setIsHovered(false),
       cursor: isDisabled ? 'not-allowed' : 'pointer',
-      borderRadius: shape === 'pillShaped' ? '50px' : '8px',
-      onClick: handleToggle
-    }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
+      borderRadius: ToggleShapes[shape],
+      onClick: handleToggle,
+      onMouseEnter: handleHover,
+      onMouseLeave: () => setIsHovered(false)
+    }, base, isActive && {
+      backgroundColor: mainTone,
+      color: tone === 'light' ? 'color.black' : 'color.white'
+    }, props, views == null ? void 0 : views.container), children);
   };
 
   var _excluded$U = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
@@ -17484,109 +17615,103 @@
       triggerRef
     } = useDropdownMenuContext();
     var contentRef = React.useRef(null);
+    // Use useElementPosition for intelligent positioning
+    var {
+      ref: positionRef,
+      relation
+    } = appStudio.useElementPosition({
+      trackChanges: true,
+      trackOnHover: true,
+      trackOnScroll: true,
+      trackOnResize: true
+    });
     var [optimalPosition, setOptimalPosition] = React.useState({
       x: 0,
       y: 0,
       placement: side
     });
-    // Calculate optimal position when the dropdown opens
+    // Sync the position ref with the trigger ref for positioning calculations
+    React.useEffect(() => {
+      if (triggerRef.current && positionRef) {
+        positionRef.current = triggerRef.current;
+      }
+    }, [triggerRef, positionRef, isOpen]);
+    // Calculate optimal position using useElementPosition when the dropdown opens
     React.useEffect(() => {
       if (isOpen && contentRef.current && triggerRef.current) {
-        var contentRect = contentRef.current.getBoundingClientRect();
         var triggerRect = triggerRef.current.getBoundingClientRect();
-        // Get content dimensions
-        var contentWidth = Math.max(contentRect.width || 180, 180);
-        var contentHeight = Math.max(contentRect.height || 100, 100);
-        // Get viewport dimensions
-        var viewportWidth = window.innerWidth;
-        var viewportHeight = window.innerHeight;
-        // Calculate available space on all sides from the trigger
-        var availableSpace = {
-          top: triggerRect.top,
-          right: viewportWidth - triggerRect.right,
-          bottom: viewportHeight - triggerRect.bottom,
-          left: triggerRect.left
-        };
-        // Determine optimal placement based on available space and preferred side
-        var placements = [{
-          placement: 'bottom',
-          space: availableSpace.bottom,
-          fits: availableSpace.bottom >= contentHeight + 8,
-          x: align === 'start' ? triggerRect.left : align === 'end' ? triggerRect.right - contentWidth : triggerRect.left + triggerRect.width / 2 - contentWidth / 2,
-          y: triggerRect.bottom + 8
-        }, {
-          placement: 'top',
-          space: availableSpace.top,
-          fits: availableSpace.top >= contentHeight + 8,
-          x: align === 'start' ? triggerRect.left : align === 'end' ? triggerRect.right - contentWidth : triggerRect.left + triggerRect.width / 2 - contentWidth / 2,
-          y: triggerRect.top - contentHeight - 8
-        }, {
-          placement: 'right',
-          space: availableSpace.right,
-          fits: availableSpace.right >= contentWidth + 8,
-          x: triggerRect.right + 8,
-          y: align === 'start' ? triggerRect.top : align === 'end' ? triggerRect.bottom - contentHeight : triggerRect.top + triggerRect.height / 2 - contentHeight / 2
-        }, {
-          placement: 'left',
-          space: availableSpace.left,
-          fits: availableSpace.left >= contentWidth + 8,
-          x: triggerRect.left - contentWidth - 8,
-          y: align === 'start' ? triggerRect.top : align === 'end' ? triggerRect.bottom - contentHeight : triggerRect.top + triggerRect.height / 2 - contentHeight / 2
-        }];
-        // First try the preferred side if it fits
-        var preferredPlacement = placements.find(p => p.placement === side && p.fits);
-        if (preferredPlacement) {
-          setOptimalPosition({
-            x: preferredPlacement.x,
-            y: preferredPlacement.y,
-            placement: preferredPlacement.placement
-          });
-          return;
-        }
-        // Otherwise, find the best fitting placement
-        var fittingPlacement = placements.find(p => p.fits);
-        if (fittingPlacement) {
-          setOptimalPosition({
-            x: fittingPlacement.x,
-            y: fittingPlacement.y,
-            placement: fittingPlacement.placement
-          });
-          return;
-        }
-        // If nothing fits, choose the placement with the most space
-        var bestPlacement = placements.reduce((best, current) => current.space > best.space ? current : best);
-        // Ensure the content stays within viewport bounds
-        var finalX = bestPlacement.x;
-        var finalY = bestPlacement.y;
-        if (finalX + contentWidth > viewportWidth) {
-          finalX = viewportWidth - contentWidth - 8;
-        }
-        if (finalX < 8) {
-          finalX = 8;
+        var placement = side;
+        // Use relation data to determine optimal placement
+        if (relation) {
+          // If preferred side doesn't have enough space, use the side with more space
+          if (side === 'bottom' && relation.space.vertical === 'top') {
+            placement = 'top';
+          } else if (side === 'top' && relation.space.vertical === 'bottom') {
+            placement = 'bottom';
+          } else if (side === 'right' && relation.space.horizontal === 'left') {
+            placement = 'left';
+          } else if (side === 'left' && relation.space.horizontal === 'right') {
+            placement = 'right';
+          }
         }
-        if (finalY + contentHeight > viewportHeight) {
-          finalY = viewportHeight - contentHeight - 8;
-        }
-        if (finalY < 8) {
-          finalY = 8;
+        // Calculate position based on optimal placement and alignment
+        var x = 0;
+        var y = 0;
+        switch (placement) {
+          case 'bottom':
+            x = align === 'start' ? triggerRect.left : align === 'end' ? triggerRect.right - 180 // Estimated content width
+            : triggerRect.left + triggerRect.width / 2 - 90; // Half of estimated width
+            y = triggerRect.bottom + 8;
+            break;
+          case 'top':
+            x = align === 'start' ? triggerRect.left : align === 'end' ? triggerRect.right - 180 : triggerRect.left + triggerRect.width / 2 - 90;
+            y = triggerRect.top - 8; // Will be adjusted with transform
+            break;
+          case 'right':
+            x = triggerRect.right + 8;
+            y = align === 'start' ? triggerRect.top : align === 'end' ? triggerRect.bottom - 100 // Estimated content height
+            : triggerRect.top + triggerRect.height / 2 - 50; // Half of estimated height
+            break;
+          case 'left':
+            x = triggerRect.left - 8; // Will be adjusted with transform
+            y = align === 'start' ? triggerRect.top : align === 'end' ? triggerRect.bottom - 100 : triggerRect.top + triggerRect.height / 2 - 50;
+            break;
         }
         setOptimalPosition({
-          x: finalX,
-          y: finalY,
-          placement: bestPlacement.placement
+          x,
+          y,
+          placement
         });
       }
-    }, [isOpen, side, align, triggerRef]);
+    }, [isOpen, side, align, triggerRef, relation]);
     if (!isOpen) {
       return null;
     }
-    // Create intelligent positioning styles
-    var positionStyles = {
-      position: 'fixed',
-      left: optimalPosition.x,
-      top: optimalPosition.y,
-      zIndex: 1000
+    // Create intelligent positioning styles with transform for better placement
+    var getPositionStyles = () => {
+      var baseStyles = {
+        position: 'fixed',
+        left: optimalPosition.x,
+        top: optimalPosition.y,
+        zIndex: 1000
+      };
+      // Add transform based on placement for better positioning
+      switch (optimalPosition.placement) {
+        case 'top':
+          return Object.assign({}, baseStyles, {
+            transform: 'translateY(-100%)'
+          });
+        case 'left':
+          return Object.assign({}, baseStyles, {
+            transform: 'translateX(-100%)'
+          });
+        case 'bottom':
+        case 'right':
+        default:
+          return baseStyles;
+      }
     };
+    var positionStyles = getPositionStyles();
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: contentRef,
       id: "dropdown-menu",
@@ -17606,7 +17731,13 @@
         item: item,
         views: views
       });
-    }));
+    }),  (/*#__PURE__*/React__default.createElement("div", {
+      style: {
+        fontSize: '10px',
+        opacity: 0.7,
+        padding: '4px'
+      }
+    }, "Placement: ", optimalPosition.placement, relation && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("br", null), "Space: ", relation.space.vertical, "-", relation.space.horizontal)))));
   };
   // DropdownMenu Item component
   var DropdownMenuItem = _ref4 => {
@@ -20790,111 +20921,99 @@
       contentId,
       triggerId
     } = useHoverCardContext();
-    var [optimalPosition, setOptimalPosition] = React.useState({
-      x: 0,
-      y: 0,
-      placement: side
+    // Use useElementPosition for intelligent positioning
+    var {
+      ref: positionRef,
+      relation
+    } = appStudio.useElementPosition({
+      trackChanges: true,
+      trackOnHover: true,
+      trackOnScroll: true,
+      trackOnResize: true
     });
-    // Calculate optimal position when the card opens or content dimensions change
+    // Sync the position ref with the trigger ref for positioning calculations
     React.useEffect(() => {
-      if (isOpen && contentRef != null && contentRef.current && triggerRef != null && triggerRef.current) {
-        var contentRect = contentRef.current.getBoundingClientRect();
-        var triggerRect = triggerRef.current.getBoundingClientRect();
-        // Get content dimensions
-        var contentWidth = Math.max(contentRect.width || 200, 200);
-        var contentHeight = Math.max(contentRect.height || 100, 100);
-        // Get viewport dimensions
-        var viewportWidth = window.innerWidth;
-        var viewportHeight = window.innerHeight;
-        // Calculate available space on all sides from the trigger
-        var availableSpace = {
-          top: triggerRect.top,
-          right: viewportWidth - triggerRect.right,
-          bottom: viewportHeight - triggerRect.bottom,
-          left: triggerRect.left
-        };
-        // Determine optimal placement based on available space and preferred side
-        var placements = [{
-          placement: 'bottom',
-          space: availableSpace.bottom,
-          fits: availableSpace.bottom >= contentHeight + sideOffset,
-          x: triggerRect.left + triggerRect.width / 2 - contentWidth / 2,
-          y: triggerRect.bottom + sideOffset
-        }, {
-          placement: 'top',
-          space: availableSpace.top,
-          fits: availableSpace.top >= contentHeight + sideOffset,
-          x: triggerRect.left + triggerRect.width / 2 - contentWidth / 2,
-          y: triggerRect.top - contentHeight - sideOffset
-        }, {
-          placement: 'right',
-          space: availableSpace.right,
-          fits: availableSpace.right >= contentWidth + sideOffset,
-          x: triggerRect.right + sideOffset,
-          y: triggerRect.top + triggerRect.height / 2 - contentHeight / 2
-        }, {
-          placement: 'left',
-          space: availableSpace.left,
-          fits: availableSpace.left >= contentWidth + sideOffset,
-          x: triggerRect.left - contentWidth - sideOffset,
-          y: triggerRect.top + triggerRect.height / 2 - contentHeight / 2
-        }];
-        // First try the preferred side if it fits
-        var preferredPlacement = placements.find(p => p.placement === side && p.fits);
-        if (preferredPlacement) {
-          setOptimalPosition({
-            x: preferredPlacement.x,
-            y: preferredPlacement.y,
-            placement: preferredPlacement.placement
-          });
-          return;
+      if (triggerRef != null && triggerRef.current && (positionRef == null ? void 0 : positionRef.current) !== triggerRef.current) {
+        // Update the position tracking to use the trigger element
+        if (positionRef) {
+          positionRef.current = triggerRef.current;
         }
-        // Otherwise, find the best fitting placement
-        var fittingPlacement = placements.find(p => p.fits);
-        if (fittingPlacement) {
-          setOptimalPosition({
-            x: fittingPlacement.x,
-            y: fittingPlacement.y,
-            placement: fittingPlacement.placement
-          });
-          return;
-        }
-        // If nothing fits, choose the placement with the most space
-        var bestPlacement = placements.reduce((best, current) => current.space > best.space ? current : best);
-        // Ensure the content stays within viewport bounds
-        var finalX = bestPlacement.x;
-        var finalY = bestPlacement.y;
-        if (finalX + contentWidth > viewportWidth) {
-          finalX = viewportWidth - contentWidth - 8;
-        }
-        if (finalX < 8) {
-          finalX = 8;
-        }
-        if (finalY + contentHeight > viewportHeight) {
-          finalY = viewportHeight - contentHeight - 8;
-        }
-        if (finalY < 8) {
-          finalY = 8;
-        }
-        setOptimalPosition({
-          x: finalX,
-          y: finalY,
-          placement: bestPlacement.placement
-        });
       }
-    }, [isOpen, side, sideOffset, contentRef, triggerRef]);
+    }, [triggerRef, positionRef, isOpen]);
     var handleMouseEnter = () => cancelCloseTimer(); // Keep card open if mouse enters content
     var handleMouseLeave = () => closeCard();
     if (!isOpen) {
       return null; // Don't render content if not open
     }
-    // Create intelligent positioning styles
-    var positionStyles = {
-      position: 'fixed',
-      left: optimalPosition.x,
-      top: optimalPosition.y,
-      zIndex: 1000
+    // Create intelligent positioning styles based on useElementPosition relation data
+    var getPositionStyles = () => {
+      if (!relation || !(triggerRef != null && triggerRef.current)) {
+        // Fallback positioning if relation data is not available
+        return {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          zIndex: 1000
+        };
+      }
+      var triggerRect = triggerRef.current.getBoundingClientRect();
+      var placement = side;
+      // Use relation data to determine optimal placement
+      // If preferred side doesn't have enough space, use the side with more space
+      if (side === 'bottom' && relation.space.vertical === 'top') {
+        placement = 'top';
+      } else if (side === 'top' && relation.space.vertical === 'bottom') {
+        placement = 'bottom';
+      } else if (side === 'right' && relation.space.horizontal === 'left') {
+        placement = 'left';
+      } else if (side === 'left' && relation.space.horizontal === 'right') {
+        placement = 'right';
+      }
+      // Calculate position based on optimal placement
+      var x = 0;
+      var y = 0;
+      switch (placement) {
+        case 'bottom':
+          x = triggerRect.left + triggerRect.width / 2;
+          y = triggerRect.bottom + sideOffset;
+          break;
+        case 'top':
+          x = triggerRect.left + triggerRect.width / 2;
+          y = triggerRect.top - sideOffset;
+          break;
+        case 'right':
+          x = triggerRect.right + sideOffset;
+          y = triggerRect.top + triggerRect.height / 2;
+          break;
+        case 'left':
+          x = triggerRect.left - sideOffset;
+          y = triggerRect.top + triggerRect.height / 2;
+          break;
+      }
+      return {
+        position: 'fixed',
+        left: x,
+        top: y,
+        zIndex: 1000,
+        transform: getTransformOrigin(placement)
+      };
     };
+    // Helper function to set transform origin for better positioning
+    var getTransformOrigin = placement => {
+      switch (placement) {
+        case 'bottom':
+          return 'translate(-50%, 0)';
+        case 'top':
+          return 'translate(-50%, -100%)';
+        case 'right':
+          return 'translate(0, -50%)';
+        case 'left':
+          return 'translate(-100%, -50%)';
+        default:
+          return 'translate(-50%, 0)';
+      }
+    };
+    var positionStyles = getPositionStyles();
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: contentRef,
       id: contentId,
@@ -20911,7 +21030,13 @@
       maxWidth: maxWidth,
       // Combine intelligent position styles with user styles
       style: Object.assign({}, positionStyles, userStyle)
-    }, views == null ? void 0 : views.container, props), children);
+    }, views == null ? void 0 : views.container, props), children,  relation && (/*#__PURE__*/React__default.createElement("div", {
+      style: {
+        fontSize: '10px',
+        opacity: 0.7,
+        marginTop: '4px'
+      }
+    }, "Position: ", relation.position.vertical, "-", relation.position.horizontal, /*#__PURE__*/React__default.createElement("br", null), "More space: ", relation.space.vertical, "-", relation.space.horizontal)));
   };
 
   var _excluded$_ = ["children", "views", "openDelay", "closeDelay"];
@@ -24358,108 +24483,102 @@
       contentId,
       triggerId
     } = useTooltipContext();
+    // Use useElementPosition for intelligent positioning
+    var {
+      ref: positionRef,
+      relation
+    } = appStudio.useElementPosition({
+      trackChanges: true,
+      trackOnHover: true,
+      trackOnScroll: true,
+      trackOnResize: true
+    });
     var [optimalPosition, setOptimalPosition] = React.useState({
       x: 0,
       y: 0,
       placement: position
     });
-    // Calculate optimal position when the tooltip opens
+    // Sync the position ref with the trigger ref for positioning calculations
+    React.useEffect(() => {
+      if (triggerRef != null && triggerRef.current && positionRef) {
+        positionRef.current = triggerRef.current;
+      }
+    }, [triggerRef, positionRef, isOpen]);
+    // Calculate optimal position using useElementPosition when the tooltip opens
     React.useEffect(() => {
       if (isOpen && contentRef != null && contentRef.current && triggerRef != null && triggerRef.current) {
-        var contentRect = contentRef.current.getBoundingClientRect();
         var triggerRect = triggerRef.current.getBoundingClientRect();
-        // Get content dimensions
-        var contentWidth = Math.max(contentRect.width || 120, 120);
-        var contentHeight = Math.max(contentRect.height || 32, 32);
-        // Get viewport dimensions
-        var viewportWidth = window.innerWidth;
-        var viewportHeight = window.innerHeight;
-        // Calculate available space on all sides from the trigger
-        var availableSpace = {
-          top: triggerRect.top,
-          right: viewportWidth - triggerRect.right,
-          bottom: viewportHeight - triggerRect.bottom,
-          left: triggerRect.left
-        };
-        // Determine optimal placement based on available space and preferred position
-        var placements = [{
-          placement: 'top',
-          space: availableSpace.top,
-          fits: availableSpace.top >= contentHeight + 16,
-          x: align === 'start' ? triggerRect.left : align === 'end' ? triggerRect.right - contentWidth : triggerRect.left + triggerRect.width / 2 - contentWidth / 2,
-          y: triggerRect.top - contentHeight - 8
-        }, {
-          placement: 'bottom',
-          space: availableSpace.bottom,
-          fits: availableSpace.bottom >= contentHeight + 16,
-          x: align === 'start' ? triggerRect.left : align === 'end' ? triggerRect.right - contentWidth : triggerRect.left + triggerRect.width / 2 - contentWidth / 2,
-          y: triggerRect.bottom + 8
-        }, {
-          placement: 'right',
-          space: availableSpace.right,
-          fits: availableSpace.right >= contentWidth + 16,
-          x: triggerRect.right + 8,
-          y: align === 'start' ? triggerRect.top : align === 'end' ? triggerRect.bottom - contentHeight : triggerRect.top + triggerRect.height / 2 - contentHeight / 2
-        }, {
-          placement: 'left',
-          space: availableSpace.left,
-          fits: availableSpace.left >= contentWidth + 16,
-          x: triggerRect.left - contentWidth - 8,
-          y: align === 'start' ? triggerRect.top : align === 'end' ? triggerRect.bottom - contentHeight : triggerRect.top + triggerRect.height / 2 - contentHeight / 2
-        }];
-        // First try the preferred position if it fits
-        var preferredPlacement = placements.find(p => p.placement === position && p.fits);
-        if (preferredPlacement) {
-          setOptimalPosition({
-            x: preferredPlacement.x,
-            y: preferredPlacement.y,
-            placement: preferredPlacement.placement
-          });
-          return;
-        }
-        // Otherwise, find the best fitting placement
-        var fittingPlacement = placements.find(p => p.fits);
-        if (fittingPlacement) {
-          setOptimalPosition({
-            x: fittingPlacement.x,
-            y: fittingPlacement.y,
-            placement: fittingPlacement.placement
-          });
-          return;
-        }
-        // If nothing fits, choose the placement with the most space
-        var bestPlacement = placements.reduce((best, current) => current.space > best.space ? current : best);
-        // Ensure the content stays within viewport bounds
-        var finalX = bestPlacement.x;
-        var finalY = bestPlacement.y;
-        if (finalX + contentWidth > viewportWidth) {
-          finalX = viewportWidth - contentWidth - 8;
-        }
-        if (finalX < 8) {
-          finalX = 8;
-        }
-        if (finalY + contentHeight > viewportHeight) {
-          finalY = viewportHeight - contentHeight - 8;
+        var placement = position;
+        // Use relation data to determine optimal placement
+        if (relation) {
+          // If preferred position doesn't have enough space, use the position with more space
+          if (position === 'top' && relation.space.vertical === 'bottom') {
+            placement = 'bottom';
+          } else if (position === 'bottom' && relation.space.vertical === 'top') {
+            placement = 'top';
+          } else if (position === 'right' && relation.space.horizontal === 'left') {
+            placement = 'left';
+          } else if (position === 'left' && relation.space.horizontal === 'right') {
+            placement = 'right';
+          }
         }
-        if (finalY < 8) {
-          finalY = 8;
+        // Calculate position based on optimal placement and alignment
+        var x = 0;
+        var y = 0;
+        switch (placement) {
+          case 'top':
+            x = align === 'start' ? triggerRect.left : align === 'end' ? triggerRect.right - 120 // Estimated content width
+            : triggerRect.left + triggerRect.width / 2 - 60; // Half of estimated width
+            y = triggerRect.top - 8;
+            break;
+          case 'bottom':
+            x = align === 'start' ? triggerRect.left : align === 'end' ? triggerRect.right - 120 : triggerRect.left + triggerRect.width / 2 - 60;
+            y = triggerRect.bottom + 8;
+            break;
+          case 'right':
+            x = triggerRect.right + 8;
+            y = align === 'start' ? triggerRect.top : align === 'end' ? triggerRect.bottom - 32 // Estimated content height
+            : triggerRect.top + triggerRect.height / 2 - 16; // Half of estimated height
+            break;
+          case 'left':
+            x = triggerRect.left - 8;
+            y = align === 'start' ? triggerRect.top : align === 'end' ? triggerRect.bottom - 32 : triggerRect.top + triggerRect.height / 2 - 16;
+            break;
         }
         setOptimalPosition({
-          x: finalX,
-          y: finalY,
-          placement: bestPlacement.placement
+          x,
+          y,
+          placement
         });
       }
-    }, [isOpen, position, align, triggerRef, contentRef]);
+    }, [isOpen, position, align, triggerRef, contentRef, relation]);
     // Get arrow styles based on optimal placement
     var arrowStyles = showArrow ? getArrowStyles(optimalPosition.placement) : {};
-    // Create intelligent positioning styles
-    var positionStyles = {
-      position: 'fixed',
-      left: optimalPosition.x,
-      top: optimalPosition.y,
-      zIndex: 1000
+    // Create intelligent positioning styles with transform for better placement
+    var getPositionStyles = () => {
+      var baseStyles = {
+        position: 'fixed',
+        left: optimalPosition.x,
+        top: optimalPosition.y,
+        zIndex: 1000
+      };
+      // Add transform based on placement for better positioning
+      switch (optimalPosition.placement) {
+        case 'top':
+          return Object.assign({}, baseStyles, {
+            transform: 'translateY(-100%)'
+          });
+        case 'left':
+          return Object.assign({}, baseStyles, {
+            transform: 'translateX(-100%)'
+          });
+        case 'bottom':
+        case 'right':
+        default:
+          return baseStyles;
+      }
     };
+    var positionStyles = getPositionStyles();
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       position: "relative",
       display: "inline-block"
@@ -24471,7 +24590,13 @@
       borderRadius: 4,
       boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
       style: positionStyles
-    }, TooltipSizes[size], TooltipVariants[variant], views == null ? void 0 : views.content), typeof content === 'string' ? (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, views == null ? void 0 : views.text), content)) : content, showArrow && /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, arrowStyles, views == null ? void 0 : views.arrow)))));
+    }, TooltipSizes[size], TooltipVariants[variant], views == null ? void 0 : views.content), typeof content === 'string' ? (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, views == null ? void 0 : views.text), content)) : content, showArrow && /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, arrowStyles, views == null ? void 0 : views.arrow)),  (/*#__PURE__*/React__default.createElement("div", {
+      style: {
+        fontSize: '8px',
+        opacity: 0.7,
+        marginTop: '2px'
+      }
+    }, "Placement: ", optimalPosition.placement, relation && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("br", null), "Space: ", relation.space.vertical, "-", relation.space.horizontal)))))));
   };
 
   var _excluded$1b = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];