@app-studio/web 0.9.13 → 0.9.15

package/dist/web.cjs.development.js

@@ -5742,6 +5742,24 @@ var PieChart = _ref => {
   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;
@@ -5810,12 +5828,30 @@ var PieChart = _ref => {
     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) {
@@ -13111,6 +13147,16 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   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,
@@ -13120,7 +13166,6 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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;
@@ -13172,7 +13217,13 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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;
@@ -13182,22 +13233,26 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       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);
@@ -13403,7 +13458,7 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       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,
@@ -13449,7 +13504,7 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       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';
 
@@ -17036,8 +17091,78 @@ var useToggleState = defaultToggled => {
   };
 };
 
-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',
@@ -17048,25 +17173,30 @@ var ToggleView = _ref => {
       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) {
@@ -17083,14 +17213,15 @@ var ToggleView = _ref => {
     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"];
@@ -17515,109 +17646,103 @@ var DropdownMenuContent = _ref3 => {
     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",
@@ -17637,7 +17762,13 @@ var DropdownMenuContent = _ref3 => {
       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 => {
@@ -20821,111 +20952,99 @@ var HoverCardContent = _ref3 => {
     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,
@@ -20942,7 +21061,13 @@ var HoverCardContent = _ref3 => {
     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"];
@@ -24389,108 +24514,102 @@ var TooltipView = _ref4 => {
     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"
@@ -24502,7 +24621,13 @@ var TooltipView = _ref4 => {
     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"];