@app-studio/web 0.9.7 → 0.9.9

package/dist/web.cjs.development.js

@@ -25,6 +25,7 @@ require('core-js/modules/es.array.reduce.js');
 require('core-js/modules/es.number.to-fixed.js');
 require('core-js/modules/es.string.starts-with.js');
 var format = _interopDefault(require('date-fns/format'));
+require('core-js/modules/es.string.trim.js');
 require('core-js/modules/es.regexp.constructor.js');
 require('core-js/modules/es.regexp.exec.js');
 var formik = require('formik');
@@ -37,7 +38,6 @@ require('core-js/modules/es.string.match.js');
 require('core-js/modules/es.string.search.js');
 require('core-js/modules/es.array.flat-map.js');
 require('core-js/modules/es.array.unscopables.flat-map.js');
-require('core-js/modules/es.string.trim.js');
 
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
@@ -6417,60 +6417,8 @@ var ContextMenuItemStates = {
     cursor: 'not-allowed'
   }
 };
-// Helper function to calculate position based on available space
-var calculateMenuPosition = function calculateMenuPosition(x, y, menuWidth, menuHeight, windowWidth, windowHeight, side, align) {
-  if (side === void 0) {
-    side = 'right';
-  }
-  if (align === void 0) {
-    align = 'start';
-  }
-  var posX = x;
-  var posY = y;
-  // Adjust horizontal position based on side
-  if (side === 'left') {
-    posX = x - menuWidth;
-  } else if (side === 'right') {
-    posX = x;
-  } else if (side === 'top' || side === 'bottom') {
-    // Adjust horizontal position based on alignment for top/bottom
-    if (align === 'center') {
-      posX = x - menuWidth / 2;
-    } else if (align === 'end') {
-      posX = x - menuWidth;
-    }
-  }
-  // Adjust vertical position based on side
-  if (side === 'top') {
-    posY = y - menuHeight;
-  } else if (side === 'bottom') {
-    posY = y;
-  } else if (side === 'left' || side === 'right') {
-    // Adjust vertical position based on alignment for left/right
-    if (align === 'center') {
-      posY = y - menuHeight / 2;
-    } else if (align === 'end') {
-      posY = y - menuHeight;
-    }
-  }
-  // Ensure menu stays within window bounds
-  if (posX + menuWidth > windowWidth) {
-    posX = windowWidth - menuWidth;
-  }
-  if (posX < 0) {
-    posX = 0;
-  }
-  if (posY + menuHeight > windowHeight) {
-    posY = windowHeight - menuHeight;
-  }
-  if (posY < 0) {
-    posY = 0;
-  }
-  return {
-    x: posX,
-    y: posY
-  };
-};
+// Note: Manual positioning logic has been replaced with intelligent positioning
+// using viewport-aware algorithms in the ContextMenu component
 
 var _excluded$f = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
   _excluded2$6 = ["items", "children", "position", "side", "align", "views", "style"],
@@ -6591,28 +6539,72 @@ var ContextMenuContent = _ref3 => {
     variant
   } = useContextMenuContext();
   var menuRef = React.useRef(null);
+  // Use contentRef if provided, otherwise use local menuRef
+  var ref = contentRef || menuRef;
+  // Use useElementPosition for intelligent positioning
+  var {
+    ref: positionRef,
+    relation
+  } = appStudio.useElementPosition({
+    // trackChanges: true,
+    // trackOnHover: false,
+    // trackOnScroll: true,
+    // trackOnResize: true,
+    // throttleMs: 50,
+  });
   var [menuPosition, setMenuPosition] = React.useState({
     x: 0,
     y: 0
   });
-  // Use contentRef if provided, otherwise use local menuRef
-  var ref = contentRef || menuRef;
-  // Calculate the position of the menu
+  // Calculate the position of the menu using useElementPosition
   React.useEffect(() => {
     if (isOpen && ref.current) {
+      var pos = position || contextPosition;
       var menuWidth = ref.current.offsetWidth;
       var menuHeight = ref.current.offsetHeight;
-      var windowWidth = window.innerWidth;
-      var windowHeight = window.innerHeight;
-      var pos = position || contextPosition;
-      var calculatedPosition = calculateMenuPosition(pos.x, pos.y, menuWidth, menuHeight, windowWidth, windowHeight, side, align);
-      setMenuPosition(calculatedPosition);
+      // Get viewport dimensions for boundary checking
+      var viewportWidth = window.innerWidth;
+      var viewportHeight = window.innerHeight;
+      // Calculate optimal position based on available space
+      var finalX = pos.x;
+      var finalY = pos.y;
+      // Use relation data if available for smarter positioning
+      if (relation) {
+        // Position based on where there's more space
+        if (relation.space.horizontal === 'left') {
+          finalX = pos.x - menuWidth;
+        } else {
+          finalX = pos.x;
+        }
+        if (relation.space.vertical === 'top') {
+          finalY = pos.y - menuHeight;
+        } else {
+          finalY = pos.y;
+        }
+      }
+      // Ensure the menu stays within viewport bounds
+      if (finalX + menuWidth > viewportWidth) {
+        finalX = viewportWidth - menuWidth - 8; // 8px margin
+      }
+      if (finalX < 8) {
+        finalX = 8; // 8px margin
+      }
+      if (finalY + menuHeight > viewportHeight) {
+        finalY = viewportHeight - menuHeight - 8; // 8px margin
+      }
+      if (finalY < 8) {
+        finalY = 8; // 8px margin
+      }
+      setMenuPosition({
+        x: finalX,
+        y: finalY
+      });
     }
-  }, [isOpen, contextPosition, position, side, align, ref]);
+  }, [isOpen, contextPosition, position, side, align, ref, relation]);
   if (!isOpen) {
     return null;
   }
-  // Basic positioning - place top-left corner at calculated position
+  // Intelligent positioning - place at calculated optimal position
   var positionStyles = {
     position: 'fixed',
     top: menuPosition.y + "px",
@@ -6665,7 +6657,6 @@ var ContextMenuItem = _ref4 => {
     var [isHovered, setIsHovered] = React.useState(false);
     var hasSubmenu = item.items && item.items.length > 0;
     var isSubmenuActive = activeSubmenuId === item.id;
-    var itemRef = React.useRef(null);
     var [submenuPosition, setSubmenuPosition] = React.useState({
       x: 0,
       y: 0
@@ -6690,16 +6681,40 @@ var ContextMenuItem = _ref4 => {
         if (closeMenu) closeMenu();
       }
     };
-    // Calculate the position of the submenu
+    // Use useElementPosition for submenu positioning
+    var {
+      ref: itemRef,
+      relation: submenuRelation
+    } = appStudio.useElementPosition({
+      // trackChanges: true,
+      // trackOnHover: false,
+      // trackOnScroll: true,
+      // trackOnResize: true,
+      // throttleMs: 50,
+    });
+    // Calculate the position of the submenu with intelligent positioning
     React.useEffect(() => {
       if (isSubmenuActive && itemRef.current) {
         var rect = itemRef.current.getBoundingClientRect();
+        var viewportWidth = window.innerWidth;
+        // Estimate submenu dimensions (will be refined when submenu renders)
+        var estimatedSubmenuWidth = 200; // Default submenu width
+        // Use relation data for smarter positioning if available
+        var useLeftSide = false;
+        if (submenuRelation) {
+          useLeftSide = submenuRelation.space.horizontal === 'left';
+        } else {
+          // Fallback to manual calculation
+          var rightSpace = viewportWidth - rect.right;
+          var leftSpace = rect.left;
+          useLeftSide = rightSpace < estimatedSubmenuWidth && leftSpace > rightSpace;
+        }
         setSubmenuPosition({
-          x: rect.right,
+          x: useLeftSide ? rect.left - estimatedSubmenuWidth : rect.right,
           y: rect.top
         });
       }
-    }, [isSubmenuActive]);
+    }, [isSubmenuActive, item.items, submenuRelation]);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: itemRef,
       role: "menuitem",
@@ -6993,7 +7008,7 @@ var HelperText = _ref => {
 };
 
 var _excluded$j = ["children", "helperText", "error", "views"];
-var FieldContainer = _ref => {
+var FieldContainer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   var {
       children,
       helperText,
@@ -7001,9 +7016,8 @@ var FieldContainer = _ref => {
       views
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
-  return /*#__PURE__*/React__default.createElement(appStudio.Vertical
-  // Layout properties
-  , Object.assign({
+  return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+    ref: ref,
     // Layout properties
     gap: 8,
     position: "relative",
@@ -7019,7 +7033,8 @@ var FieldContainer = _ref => {
     color: "color.red.500",
     transition: "all 0.2s ease"
   }, views == null ? void 0 : views.error), error)));
-};
+});
+FieldContainer.displayName = 'FieldContainer';
 
 /**
  * Input Styles
@@ -7610,6 +7625,47 @@ var SelectView = _ref7 => {
       highlightedIndex
     } = _ref7,
     props = _objectWithoutPropertiesLoose(_ref7, _excluded4$6);
+  var {
+    ref: triggerRef,
+    relation,
+    updateRelation
+  } = appStudio.useElementPosition({
+    trackChanges: true,
+    throttleMs: 100
+  });
+  var dropdownRef = React.useRef(null);
+  // Get optimal positioning style based on available space
+  var getDropdownStyle = () => {
+    if (!relation) {
+      // Default positioning when relation is not available
+      return {
+        position: 'absolute',
+        top: '100%',
+        marginTop: '8px',
+        left: 0,
+        right: 0,
+        zIndex: 10000
+      };
+    }
+    var baseStyle = {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      zIndex: 10000
+    };
+    // Place dropdown where there's more space vertically
+    if (relation.space.vertical === 'top') {
+      return Object.assign({}, baseStyle, {
+        bottom: '100%',
+        marginBottom: '8px'
+      });
+    } else {
+      return Object.assign({}, baseStyle, {
+        top: '100%',
+        marginTop: '8px'
+      });
+    }
+  };
   // close when *any* other select opens
   React__default.useEffect(() => {
     var handleCloseAll = () => setHide(true);
@@ -7668,11 +7724,10 @@ var SelectView = _ref7 => {
     }
   };
   return /*#__PURE__*/React__default.createElement(FieldContainer, {
-    style: {
-      position: 'relative',
-      width: '100%',
-      display: 'inline-block'
-    },
+    ref: triggerRef,
+    position: "relative",
+    width: "100%",
+    display: "inline-block",
     id: id,
     role: "SelectBox",
     helperText: helperText,
@@ -7702,7 +7757,8 @@ var SelectView = _ref7 => {
     isFocused: isFocused,
     showLabel: showLabel,
     onMouseEnter: handleHover,
-    onMouseLeave: handleHover
+    onMouseLeave: handleHover,
+    position: "relative"
   }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: 'theme.primary',
@@ -7735,15 +7791,10 @@ var SelectView = _ref7 => {
     orientation: "up",
     widthHeight: IconSizes$2[size],
     style: views.icon
-  })))))), !hide && options.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.Element, {
+  }))))), !hide && options.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.Element, {
+    ref: dropdownRef,
     onClick: e => e.stopPropagation(),
-    style: {
-      position: 'absolute',
-      top: 'calc(100% + 4px)',
-      left: 0,
-      right: 0,
-      zIndex: 1000
-    }
+    style: getDropdownStyle()
   }, /*#__PURE__*/React__default.createElement(DropDown, {
     size: size,
     views: Object.assign({}, views, {
@@ -7760,7 +7811,7 @@ var SelectView = _ref7 => {
     callback: handleCallback,
     highlightedIndex: highlightedIndex,
     setHighlightedIndex: setHighlightedIndex
-  }))));
+  })))));
 };
 
 // Defines a functional component named 'SelectComponent', which is expected to receive 'SelectProps' as properties.
@@ -11185,6 +11236,45 @@ var ComboBoxView = _ref => {
       // Collects all further props not destructured explicitly.
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+  var {
+    ref: triggerRef,
+    relation
+  } = appStudio.useElementPosition();
+  var dropdownRef = React.useRef(null);
+  // Get optimal positioning style based on available space
+  var getDropdownStyle = () => {
+    if (!relation) {
+      // Default positioning when relation is not available
+      return {
+        position: 'absolute',
+        top: '100%',
+        marginTop: '8px',
+        left: 0,
+        right: 0,
+        zIndex: 10000,
+        maxHeight: '240px'
+      };
+    }
+    var baseStyle = {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      zIndex: 10000,
+      maxHeight: '240px'
+    };
+    // Place dropdown where there's more space vertically
+    if (relation.space.vertical === 'top') {
+      return Object.assign({}, baseStyle, {
+        bottom: '100%',
+        marginBottom: '8px'
+      });
+    } else {
+      return Object.assign({}, baseStyle, {
+        top: '100%',
+        marginTop: '8px'
+      });
+    }
+  };
   // Sets up an effect to handle clicking outside the dropdown to close it.
   React.useEffect(() => {
     var handleClickOutside = event => {
@@ -11227,6 +11317,7 @@ var ComboBoxView = _ref => {
   }, label)), /*#__PURE__*/React__default.createElement(appStudio.View, {
     position: "relative"
   }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+    ref: triggerRef,
     cursor: "pointer",
     backgroundColor: "color.white",
     boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
@@ -11247,19 +11338,14 @@ var ComboBoxView = _ref => {
     weight: "medium",
     flexGrow: 1,
     color: "color.gray.800"
-  }, views == null ? void 0 : views.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  }, views == null ? void 0 : views.label), selectedItem.label)), right), isDropdownVisible && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: dropdownRef,
     id: "combobox-dropdown",
-    position: "absolute",
     backgroundColor: "color.white",
-    boxShadow: "rgba(0, 0 ,0 ,0.16) 0px 1px 4px",
-    width: "100%",
+    boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
     overflowY: "auto",
-    zIndex: 10000,
-    bottom: -8,
-    left: 0,
-    transform: "translateY(100%)",
-    marginTop: "4px",
-    borderRadius: "4px"
+    borderRadius: "4px",
+    style: getDropdownStyle()
   }, views == null ? void 0 : views.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
     id: props.id,
     name: props.name,
@@ -11293,7 +11379,7 @@ var ComboBoxView = _ref => {
     onClick: () => handleSelect(item)
   }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(TickIcon, {
     widthHeight: 20
-  }))))))))))));
+  })))))))))));
 };
 
 var _excluded$z = ["id", "name", "items", "placeholder", "searchPlaceholder"];
@@ -11328,136 +11414,547 @@ var ComboBoxComponent = _ref => {
 // Exports the ComboBoxComponent as ComboBox
 var ComboBox = ComboBoxComponent;
 
-function syncTimeouts(cb) {
-  var t1 = setTimeout(cb, 0); // For faster machines
-  var t2 = setTimeout(cb, 10);
-  var t3 = setTimeout(cb, 50);
-  return [t1, t2, t3];
-}
-
-var useOTPInputState = _ref => {
-  var _window;
-  var {
-    value: controlledValue,
-    defaultValue = '',
-    length = 6,
-    onChange,
-    onChangeText,
-    onComplete,
-    onKeyDown,
-    onKeyPress,
-    onBlur,
-    onFocus,
-    isReadOnly,
-    isDisabled,
-    pattern,
-    stepValues,
-    pasteTransformer
-  } = _ref;
-  // Determine if component is controlled
-  var isControlled = controlledValue !== undefined;
-  var initialValue = isControlled ? controlledValue : defaultValue;
-  // State for the OTP value
-  var [value, setInternalValue] = React.useState((initialValue == null ? void 0 : initialValue.slice(0, length)) || '');
+/**
+ * Custom hook for managing TagInput state
+ */
+var useTagInputState = props => {
+  var {
+    tags: controlledTags,
+    defaultTags = [],
+    onTagsChange,
+    onTagAdd,
+    onTagRemove,
+    maxTags,
+    minTagLength = 1,
+    maxTagLength = 50,
+    allowDuplicates = false,
+    separators = ['enter', 'comma'],
+    isDisabled = false,
+    isReadOnly = false
+  } = props;
+  // State for input value
+  var [inputValue, setInputValue] = React.useState('');
+  // State for tags (controlled vs uncontrolled)
+  var [internalTags, setInternalTags] = React.useState(() => {
+    var initialValue = controlledTags || defaultTags || [];
+    return initialValue.map((tag, index) => ({
+      id: "tag-" + index + "-" + Date.now(),
+      value: tag
+    }));
+  });
   // State for focus and hover
   var [isFocused, setIsFocused] = React.useState(false);
   var [isHovered, setIsHovered] = React.useState(false);
-  // State for selection tracking
-  var [mirrorSelectionStart, setMirrorSelectionStart] = React.useState(null);
-  var [mirrorSelectionEnd, setMirrorSelectionEnd] = React.useState(null);
-  // Refs
-  var inputRef = React.useRef(null);
-  var containerRef = React.useRef(null);
-  var initialLoadRef = React.useRef({
-    value,
-    onChange: onChange || (() => {}),
-    isIOS: typeof window !== 'undefined' && ((_window = window) == null || (_window = _window.CSS) == null || _window.supports == null ? void 0 : _window.supports('-webkit-touch-callout', 'none'))
-  });
-  var inputMetadataRef = React.useRef({
-    prev: [null, null, 'none']
-  });
-  // Create regexp for validation
-  var regexp = pattern ? typeof pattern === 'string' ? new RegExp(pattern) : pattern : null;
-  // Sync with controlled value
+  // Use controlled value if provided, otherwise use internal state
+  var tags = controlledTags && Array.isArray(controlledTags) ? controlledTags.map((tag, index) => ({
+    id: "tag-" + index + "-" + Date.now(),
+    value: tag
+  })) : internalTags;
+  // Update internal tags when controlled value changes
   React.useEffect(() => {
-    if (isControlled && controlledValue !== value) {
-      setInternalValue((controlledValue == null ? void 0 : controlledValue.slice(0, length)) || '');
+    if (controlledTags && Array.isArray(controlledTags)) {
+      setInternalTags(controlledTags.map((tag, index) => ({
+        id: "tag-" + index + "-" + Date.now(),
+        value: tag
+      })));
     }
-  }, [isControlled, controlledValue, length, value]);
-  // Handle value changes with completion check
-  var setValue = React.useCallback(newValue => {
-    // If step values are provided, find the closest step
-    var valueToSet = newValue;
-    if (stepValues && stepValues.length > 0 && newValue) {
-      // Convert to number for comparison
-      var numValue = parseInt(newValue, 10);
-      if (!isNaN(numValue)) {
-        // Find the closest step value
-        var closest = stepValues[0];
-        var minDiff = Math.abs(numValue - closest);
-        for (var i = 1; i < stepValues.length; i++) {
-          var diff = Math.abs(numValue - stepValues[i]);
-          if (diff < minDiff) {
-            minDiff = diff;
-            closest = stepValues[i];
-          }
-        }
-        // Convert back to string
-        valueToSet = closest.toString();
+  }, [controlledTags]);
+  /**
+   * Validates a tag before adding
+   */
+  var validateTag = React.useCallback(tag => {
+    var trimmed = tag.trim();
+    // Check length constraints
+    if (trimmed.length < minTagLength || trimmed.length > maxTagLength) {
+      return false;
+    }
+    // Check for duplicates if not allowed
+    if (!allowDuplicates) {
+      var tagValues = tags.map(t => t.value.toLowerCase());
+      if (tagValues.includes(trimmed.toLowerCase())) {
+        return false;
       }
     }
-    // Always update internal state for both controlled and uncontrolled components
-    setInternalValue(valueToSet);
-    // Call onChange if provided
-    if (onChange) {
-      onChange(valueToSet);
+    // Check maximum tags limit
+    if (maxTags && tags.length >= maxTags) {
+      return false;
     }
-    // Call onChangeText if provided
-    if (onChangeText) {
-      onChangeText(valueToSet);
+    return true;
+  }, [tags, minTagLength, maxTagLength, allowDuplicates, maxTags]);
+  /**
+   * Adds a new tag
+   */
+  var addTag = React.useCallback(tag => {
+    if (isDisabled || isReadOnly) return;
+    var trimmed = tag.trim();
+    if (!trimmed || !validateTag(trimmed)) return;
+    var newTag = {
+      id: "tag-" + Date.now() + "-" + Math.random(),
+      value: trimmed
+    };
+    var newTags = [...tags, newTag];
+    var tagValues = newTags.map(t => t.value);
+    if (!controlledTags) {
+      setInternalTags(newTags);
+    }
+    onTagsChange == null || onTagsChange(tagValues);
+    onTagAdd == null || onTagAdd(trimmed);
+    setInputValue('');
+  }, [tags, validateTag, onTagsChange, onTagAdd, isDisabled, isReadOnly, controlledTags]);
+  /**
+   * Removes a tag by index
+   */
+  var removeTag = React.useCallback(index => {
+    if (isDisabled || isReadOnly) return;
+    var tagToRemove = tags[index];
+    if (!tagToRemove) return;
+    var newTags = tags.filter((_, i) => i !== index);
+    var tagValues = newTags.map(t => t.value);
+    if (!controlledTags) {
+      setInternalTags(newTags);
+    }
+    onTagsChange == null || onTagsChange(tagValues);
+    onTagRemove == null || onTagRemove(tagToRemove.value, index);
+  }, [tags, onTagsChange, onTagRemove, isDisabled, isReadOnly, controlledTags]);
+  /**
+   * Handles input change
+   */
+  var handleInputChange = React.useCallback(event => {
+    if (isDisabled || isReadOnly) return;
+    var newValue = event.target.value;
+    // Check for comma separator
+    if (separators.includes('comma') && newValue.includes(',')) {
+      var parts = newValue.split(',');
+      var tagToAdd = parts[0];
+      var remaining = parts.slice(1).join(',');
+      if (tagToAdd.trim()) {
+        addTag(tagToAdd);
+      }
+      setInputValue(remaining);
+      return;
     }
-    // Check if the OTP is complete and call onComplete if provided
-    if (onComplete && valueToSet.length === length) {
-      onComplete(valueToSet);
+    setInputValue(newValue);
+  }, [addTag, separators, isDisabled, isReadOnly]);
+  /**
+   * Handles key down events
+   */
+  var handleKeyDown = React.useCallback(event => {
+    if (isDisabled || isReadOnly) return;
+    var {
+      key
+    } = event;
+    // Handle Enter key
+    if (separators.includes('enter') && key === 'Enter') {
+      event.preventDefault();
+      if (inputValue.trim()) {
+        addTag(inputValue);
+      }
+      return;
     }
-  }, [onChange, onChangeText, onComplete, length, stepValues]);
-  // Set up input ref
-  var setInputRef = React.useCallback(ref => {
-    // We can't directly assign to inputRef.current, so we use this workaround
-    if (ref && inputRef.current !== ref) {
-      // Store the reference without directly assigning
-      Object.defineProperty(inputRef, 'current', {
-        value: ref,
-        writable: true
-      });
+    // Handle Tab key
+    if (separators.includes('tab') && key === 'Tab' && inputValue.trim()) {
+      event.preventDefault();
+      addTag(inputValue);
+      return;
     }
-  }, []);
-  // Event handlers
-  var handleChange = React.useCallback(e => {
-    var newValue = e.currentTarget.value.slice(0, length);
-    if (newValue.length > 0 && regexp && !regexp.test(newValue)) {
-      e.preventDefault();
+    // Handle Space key
+    if (separators.includes('space') && key === ' ' && inputValue.trim()) {
+      event.preventDefault();
+      addTag(inputValue);
       return;
     }
-    // Always update the value
-    setValue(newValue);
-    // Update the input field value directly to ensure it's always in sync
-    if (inputRef.current) {
-      inputRef.current.value = newValue;
+    // Handle Backspace to remove last tag
+    if (key === 'Backspace' && !inputValue && tags.length > 0) {
+      event.preventDefault();
+      removeTag(tags.length - 1);
+      return;
     }
-  }, [length, regexp, setValue, inputRef]);
+  }, [addTag, removeTag, inputValue, tags, separators, isDisabled, isReadOnly]);
+  /**
+   * Handles input focus
+   */
   var handleFocus = React.useCallback(() => {
-    if (inputRef.current) {
-      var _inputRef$current;
-      var start = Math.min(inputRef.current.value.length, length - 1);
-      var end = inputRef.current.value.length;
-      (_inputRef$current = inputRef.current) == null || _inputRef$current.setSelectionRange(start, end);
-      setMirrorSelectionStart(start);
-      setMirrorSelectionEnd(end);
-    }
     setIsFocused(true);
-  }, [length]);
-  var handleBlur = React.useCallback(() => {
+    props.onFocus == null || props.onFocus();
+  }, [props.onFocus]);
+  /**
+   * Handles input blur
+   */
+  var handleBlur = React.useCallback(() => {
+    setIsFocused(false);
+    // Add current input value as tag on blur if it exists
+    if (inputValue.trim()) {
+      addTag(inputValue);
+    }
+    props.onBlur == null || props.onBlur();
+  }, [addTag, inputValue, props.onBlur]);
+  return {
+    inputValue,
+    setInputValue,
+    tags,
+    setTags: setInternalTags,
+    isFocused,
+    setIsFocused,
+    isHovered,
+    setIsHovered,
+    addTag,
+    removeTag,
+    handleInputChange,
+    handleKeyDown,
+    handleFocus,
+    handleBlur,
+    validateTag
+  };
+};
+
+var _excluded$A = ["id", "name", "label", "placeholder", "helperText", "error", "inputValue", "tags", "left", "right", "shadow", "views", "size", "shape", "variant", "isDisabled", "isReadOnly", "isAutoFocus", "isRemovable", "isFocused", "isHovered", "maxTags", "handleInputChange", "handleKeyDown", "handleFocus", "handleBlur", "removeTag", "setIsHovered", "onClick"];
+/**
+ * Individual tag chip component
+ */
+var TagChip = _ref => {
+  var {
+    tag,
+    onRemove,
+    isRemovable,
+    size,
+    views,
+    isDisabled,
+    isReadOnly
+  } = _ref;
+  var {
+    getColor
+  } = appStudio.useTheme();
+  var chipSize = {
+    xs: {
+      padding: '2px 6px',
+      fontSize: '10px',
+      iconSize: 10
+    },
+    sm: {
+      padding: '4px 8px',
+      fontSize: '12px',
+      iconSize: 12
+    },
+    md: {
+      padding: '6px 10px',
+      fontSize: '14px',
+      iconSize: 14
+    },
+    lg: {
+      padding: '8px 12px',
+      fontSize: '16px',
+      iconSize: 16
+    },
+    xl: {
+      padding: '10px 14px',
+      fontSize: '18px',
+      iconSize: 18
+    }
+  }[size] || {
+    padding: '6px 10px',
+    fontSize: '14px',
+    iconSize: 14
+  };
+  return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+    alignItems: "center",
+    gap: 4,
+    padding: chipSize.padding,
+    backgroundColor: "color.gray.100",
+    borderRadius: "16px",
+    border: "1px solid",
+    borderColor: "color.gray.200",
+    transition: "all 0.2s ease",
+    opacity: isDisabled ? 0.6 : 1,
+    _hover: !isDisabled && !isReadOnly ? {
+      backgroundColor: 'color.gray.200',
+      borderColor: 'color.gray.300'
+    } : {}
+  }, views == null ? void 0 : views.tag), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+    fontSize: chipSize.fontSize,
+    color: isDisabled ? 'color.gray.400' : 'color.gray.700',
+    fontWeight: "500",
+    whiteSpace: "nowrap"
+  }, views == null ? void 0 : views.tagText), tag), isRemovable && !isDisabled && !isReadOnly && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    cursor: "pointer",
+    padding: "2px",
+    borderRadius: "50%",
+    transition: "all 0.2s ease",
+    _hover: {
+      backgroundColor: 'color.gray.300'
+    },
+    onClick: onRemove
+  }, views == null ? void 0 : views.tagRemove), /*#__PURE__*/React__default.createElement(CloseIcon, {
+    widthHeight: chipSize.iconSize,
+    color: "color.gray.500"
+  }))));
+};
+/**
+ * Main TagInput view component
+ */
+var TagInputView = _ref2 => {
+  var {
+      id,
+      name,
+      label,
+      placeholder = 'Type and press Enter to add tags...',
+      helperText,
+      error = false,
+      inputValue = '',
+      tags = [],
+      left,
+      right,
+      shadow = {},
+      views = {},
+      size = 'md',
+      shape = 'default',
+      variant = 'default',
+      isDisabled = false,
+      isReadOnly = false,
+      isAutoFocus = false,
+      isRemovable = true,
+      isFocused = false,
+      isHovered = false,
+      maxTags,
+      handleInputChange,
+      handleKeyDown,
+      handleFocus,
+      handleBlur,
+      removeTag,
+      setIsHovered,
+      onClick
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$A);
+  var {
+    getColor,
+    themeMode
+  } = appStudio.useTheme();
+  // Determine if we should show the label
+  var showLabel = Boolean(label && (isFocused || tags.length > 0 || inputValue));
+  // Calculate if max tags reached
+  var isMaxReached = maxTags && tags.length >= maxTags;
+  // Container styles
+  var containerStyles = Object.assign({}, Shapes[shape], InputVariants[variant], views == null ? void 0 : views.inputContainer);
+  // Input styles
+  var inputStyles = Object.assign({
+    border: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    fontSize: appStudio.Typography.fontSizes[size],
+    color: isDisabled ? 'color.gray.400' : 'color.gray.900',
+    flex: 1,
+    minWidth: '120px'
+  }, views == null ? void 0 : views.input);
+  return /*#__PURE__*/React__default.createElement(FieldContainer, Object.assign({
+    error: !!error,
+    helperText: typeof error === 'string' ? error : helperText,
+    views: views
+  }, props), /*#__PURE__*/React__default.createElement(FieldContent, Object.assign({
+    label: label,
+    shadow: shadow,
+    value: tags.length > 0 || inputValue ? 'has-content' : '',
+    size: size,
+    shape: shape,
+    variant: variant,
+    error: !!error,
+    showLabel: showLabel,
+    isFocused: isFocused,
+    isHovered: isHovered,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    views: views,
+    onClick: onClick,
+    onMouseEnter: () => setIsHovered == null ? void 0 : setIsHovered(true),
+    onMouseLeave: () => setIsHovered == null ? void 0 : setIsHovered(false)
+  }, containerStyles), left, /*#__PURE__*/React__default.createElement(FieldWrapper, null, label && (/*#__PURE__*/React__default.createElement(FieldLabel, {
+    size: size,
+    error: !!error,
+    views: views
+  }, label)), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+    alignItems: "center",
+    gap: 4,
+    flexWrap: "wrap",
+    width: "100%",
+    minHeight: appStudio.Typography.fontSizes[size],
+    padding: "8px 0"
+  }, views == null ? void 0 : views.tagsContainer), tags.map((tag, index) => (/*#__PURE__*/React__default.createElement(TagChip, {
+    key: tag.id,
+    tag: tag.value,
+    onRemove: () => removeTag == null ? void 0 : removeTag(index),
+    isRemovable: isRemovable,
+    size: size,
+    views: views,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly
+  }))), !isMaxReached && (/*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
+    id: id,
+    name: name,
+    type: "text",
+    value: inputValue,
+    placeholder: tags.length === 0 ? placeholder : '',
+    disabled: isDisabled,
+    readOnly: isReadOnly,
+    autoFocus: isAutoFocus,
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    autoComplete: "off"
+  }, inputStyles))), isMaxReached && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+    fontSize: appStudio.Typography.fontSizes[size],
+    color: "color.gray.500",
+    fontStyle: "italic"
+  }, views == null ? void 0 : views.placeholder), "Maximum ", maxTags, " tags reached")))), right));
+};
+
+var _excluded$B = ["tags"];
+/**
+ * TagInput Component
+ *
+ * A form input component for managing a list of tags.
+ * Users can add tags by typing and pressing Enter or comma,
+ * and remove them by clicking the X button or using backspace.
+ */
+var TagInputComponent = props => {
+  // Initialize state management with the custom hook
+  var tagInputState = useTagInputState(props);
+  // Separate the tags prop to avoid type conflicts
+  var restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
+  // Render the view component with combined props and state
+  return /*#__PURE__*/React__default.createElement(TagInputView, Object.assign({}, tagInputState, restProps));
+};
+// Export the component
+var TagInput = TagInputComponent;
+
+function syncTimeouts(cb) {
+  var t1 = setTimeout(cb, 0); // For faster machines
+  var t2 = setTimeout(cb, 10);
+  var t3 = setTimeout(cb, 50);
+  return [t1, t2, t3];
+}
+
+var useOTPInputState = _ref => {
+  var _window;
+  var {
+    value: controlledValue,
+    defaultValue = '',
+    length = 6,
+    onChange,
+    onChangeText,
+    onComplete,
+    onKeyDown,
+    onKeyPress,
+    onBlur,
+    onFocus,
+    isReadOnly,
+    isDisabled,
+    pattern,
+    stepValues,
+    pasteTransformer
+  } = _ref;
+  // Determine if component is controlled
+  var isControlled = controlledValue !== undefined;
+  var initialValue = isControlled ? controlledValue : defaultValue;
+  // State for the OTP value
+  var [value, setInternalValue] = React.useState((initialValue == null ? void 0 : initialValue.slice(0, length)) || '');
+  // State for focus and hover
+  var [isFocused, setIsFocused] = React.useState(false);
+  var [isHovered, setIsHovered] = React.useState(false);
+  // State for selection tracking
+  var [mirrorSelectionStart, setMirrorSelectionStart] = React.useState(null);
+  var [mirrorSelectionEnd, setMirrorSelectionEnd] = React.useState(null);
+  // Refs
+  var inputRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+  var initialLoadRef = React.useRef({
+    value,
+    onChange: onChange || (() => {}),
+    isIOS: typeof window !== 'undefined' && ((_window = window) == null || (_window = _window.CSS) == null || _window.supports == null ? void 0 : _window.supports('-webkit-touch-callout', 'none'))
+  });
+  var inputMetadataRef = React.useRef({
+    prev: [null, null, 'none']
+  });
+  // Create regexp for validation
+  var regexp = pattern ? typeof pattern === 'string' ? new RegExp(pattern) : pattern : null;
+  // Sync with controlled value
+  React.useEffect(() => {
+    if (isControlled && controlledValue !== value) {
+      setInternalValue((controlledValue == null ? void 0 : controlledValue.slice(0, length)) || '');
+    }
+  }, [isControlled, controlledValue, length, value]);
+  // Handle value changes with completion check
+  var setValue = React.useCallback(newValue => {
+    // If step values are provided, find the closest step
+    var valueToSet = newValue;
+    if (stepValues && stepValues.length > 0 && newValue) {
+      // Convert to number for comparison
+      var numValue = parseInt(newValue, 10);
+      if (!isNaN(numValue)) {
+        // Find the closest step value
+        var closest = stepValues[0];
+        var minDiff = Math.abs(numValue - closest);
+        for (var i = 1; i < stepValues.length; i++) {
+          var diff = Math.abs(numValue - stepValues[i]);
+          if (diff < minDiff) {
+            minDiff = diff;
+            closest = stepValues[i];
+          }
+        }
+        // Convert back to string
+        valueToSet = closest.toString();
+      }
+    }
+    // Always update internal state for both controlled and uncontrolled components
+    setInternalValue(valueToSet);
+    // Call onChange if provided
+    if (onChange) {
+      onChange(valueToSet);
+    }
+    // Call onChangeText if provided
+    if (onChangeText) {
+      onChangeText(valueToSet);
+    }
+    // Check if the OTP is complete and call onComplete if provided
+    if (onComplete && valueToSet.length === length) {
+      onComplete(valueToSet);
+    }
+  }, [onChange, onChangeText, onComplete, length, stepValues]);
+  // Set up input ref
+  var setInputRef = React.useCallback(ref => {
+    // We can't directly assign to inputRef.current, so we use this workaround
+    if (ref && inputRef.current !== ref) {
+      // Store the reference without directly assigning
+      Object.defineProperty(inputRef, 'current', {
+        value: ref,
+        writable: true
+      });
+    }
+  }, []);
+  // Event handlers
+  var handleChange = React.useCallback(e => {
+    var newValue = e.currentTarget.value.slice(0, length);
+    if (newValue.length > 0 && regexp && !regexp.test(newValue)) {
+      e.preventDefault();
+      return;
+    }
+    // Always update the value
+    setValue(newValue);
+    // Update the input field value directly to ensure it's always in sync
+    if (inputRef.current) {
+      inputRef.current.value = newValue;
+    }
+  }, [length, regexp, setValue, inputRef]);
+  var handleFocus = React.useCallback(() => {
+    if (inputRef.current) {
+      var _inputRef$current;
+      var start = Math.min(inputRef.current.value.length, length - 1);
+      var end = inputRef.current.value.length;
+      (_inputRef$current = inputRef.current) == null || _inputRef$current.setSelectionRange(start, end);
+      setMirrorSelectionStart(start);
+      setMirrorSelectionEnd(end);
+    }
+    setIsFocused(true);
+  }, [length]);
+  var handleBlur = React.useCallback(() => {
     setIsFocused(false);
   }, []);
   var handleKeyDown = React.useCallback(_ => {
@@ -11634,7 +12131,7 @@ var useOTPInputState = _ref => {
   };
 };
 
-var _excluded$A = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
+var _excluded$C = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
 // Create a context for OTP input slots
 var OTPInputContext = /*#__PURE__*/React.createContext({
   slots: [],
@@ -11688,7 +12185,7 @@ var OTPInputView = _ref => {
       onFocus = () => {}
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   appStudio.useTheme(); // Initialize theme context
   var showLabel = !!label;
   // Create context value for slots
@@ -11920,7 +12417,7 @@ var OTPInputComponent = props => {
 };
 var OTPInput = OTPInputComponent;
 
-var _excluded$B = ["children", "autoFocus", "initFocus", "onChange"];
+var _excluded$D = ["children", "autoFocus", "initFocus", "onChange"];
 var FocusContext = /*#__PURE__*/React.createContext({
   active: false,
   focusNextInput: () => {},
@@ -11936,7 +12433,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   var formik$1 = formik.useFormikContext();
   React.useEffect(() => {
     onChange(formik$1.values);
@@ -11984,7 +12481,7 @@ var FormikForm = _ref => {
   }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
 };
 
-var _excluded$C = ["name", "type"];
+var _excluded$E = ["name", "type"];
 var getInputTypeProps = type => {
   switch (type) {
     case 'email':
@@ -12023,7 +12520,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var focus = useFormFocus();
   var {
     touched,
@@ -12067,13 +12564,13 @@ var useFormikInput = _ref => {
   } : {});
 };
 
-var _excluded$D = ["value"];
+var _excluded$F = ["value"];
 var CheckboxComponent$1 = props => {
   var _useFormikInput = useFormikInput(props),
     {
       value
     } = _useFormikInput,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$D);
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$F);
   formProps.isChecked = value;
   var checkboxStates = useCheckboxState(props);
   return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -12141,11 +12638,11 @@ var TextAreaComponent$1 = props => {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$E = ["value"];
+var _excluded$G = ["value"];
 var TextFieldComponent$1 = props => {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$E);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$G);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -12153,7 +12650,7 @@ var TextFieldComponent$1 = props => {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$F = ["visibleIcon", "hiddenIcon"],
+var _excluded$H = ["visibleIcon", "hiddenIcon"],
   _excluded2$b = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
@@ -12164,7 +12661,7 @@ var PasswordComponent$1 = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     {
@@ -12189,14 +12686,14 @@ var PasswordComponent$1 = _ref => {
  */
 var FormikPassword = PasswordComponent$1;
 
-var _excluded$G = ["items", "placeholder", "searchPlaceholder"];
+var _excluded$I = ["items", "placeholder", "searchPlaceholder"];
 var ComboBoxComponent$1 = _ref => {
   var {
       items,
       placeholder,
       searchPlaceholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var formProps = useFormikInput(props);
   var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
   // Ensure the onChange function from formProps is being called when an item is selected
@@ -12477,7 +12974,7 @@ var OrientationStyles = {
   }
 };
 
-var _excluded$H = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "backgroundColor", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
+var _excluded$J = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "backgroundColor", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
 var SliderView = _ref => {
   var _views$tooltip, _views$tooltip2;
   var {
@@ -12520,7 +13017,7 @@ var SliderView = _ref => {
         tooltip: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var {
     getColor,
     themeMode
@@ -13433,7 +13930,7 @@ var UploadView = _ref => {
   }, views == null ? void 0 : views.view)));
 };
 
-var _excluded$I = ["accept", "icon", "text", "maxSize", "onFileSelect", "onMultipleFileSelect", "validateFile", "isLoading", "progress", "fileType", "multiple"];
+var _excluded$K = ["accept", "icon", "text", "maxSize", "onFileSelect", "onMultipleFileSelect", "validateFile", "isLoading", "progress", "fileType", "multiple"];
 var Uploader = _ref => {
   var {
       accept = '*/*',
@@ -13448,7 +13945,7 @@ var Uploader = _ref => {
       fileType,
       multiple = false
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   var {
     previewUrl,
     thumbnailUrl,
@@ -13644,7 +14141,7 @@ var ModalTypography = {
   }
 };
 
-var _excluded$J = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
+var _excluded$L = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
   _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
   _excluded3$8 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
   _excluded4$7 = ["children", "views"],
@@ -13659,7 +14156,7 @@ var ModalOverlay = _ref => {
       position = 'center',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -13955,7 +14452,7 @@ var NavigationMenuItemStates = {
   }
 };
 
-var _excluded$K = ["href", "children", "views"];
+var _excluded$M = ["href", "children", "views"];
 // Create context for the NavigationMenu
 var NavigationMenuContext = /*#__PURE__*/React.createContext({
   activeItemId: null,
@@ -14186,7 +14683,7 @@ var NavigationMenuLink = _ref6 => {
       children,
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$M);
   var {
     itemValue,
     isDisabled
@@ -14253,7 +14750,7 @@ var NavigationMenuView = _ref7 => {
   })))));
 };
 
-var _excluded$L = ["items", "children", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
+var _excluded$N = ["items", "children", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
 /**
  * NavigationMenu component for creating navigation menus with optional nested items.
  * Supports both data-driven approach (with items prop) and compound component pattern.
@@ -14270,7 +14767,7 @@ var NavigationMenuComponent = _ref => {
       onItemActivate,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
   var {
     activeItemId,
     setActiveItemId,
@@ -14793,20 +15290,20 @@ var useTitleState = props => {
  * Font sizes for different title sizes
  */
 var TitleSizes = {
-  xs: 16,
-  sm: 20,
-  md: 32,
-  lg: 48,
+  xs: 24,
+  sm: 36,
+  md: 48,
+  lg: 64,
   xl: 72
 };
 /**
  * Line heights for different title sizes
  */
 var LineHeights$1 = {
-  xs: 24,
-  sm: 28,
-  md: 40,
-  lg: 56,
+  xs: 32,
+  sm: 40,
+  md: 56,
+  lg: 72,
   xl: 80
 };
 /**
@@ -14846,7 +15343,7 @@ var HighlightStyles = {
   })
 };
 
-var _excluded$M = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
+var _excluded$O = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
 /**
  * A component that creates a typewriter effect for text
  */
@@ -14860,7 +15357,7 @@ var TypewriterEffect = _ref => {
       cursorColor = 'currentColor',
       textStyle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
   // Convert text to array if it's a string
   var textArray = Array.isArray(text) ? text : [text];
   // State for the currently displayed text
@@ -14927,7 +15424,7 @@ var TypewriterEffect = _ref => {
   }))))));
 };
 
-var _excluded$N = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "centered", "views", "highlightAnimate", "animate", "highlightTypewriter", "highlightTypewriterDuration"];
+var _excluded$P = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "centered", "views", "highlightAnimate", "animate", "highlightTypewriter", "highlightTypewriterDuration"];
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
 }
@@ -14946,7 +15443,7 @@ var TitleView = _ref => {
       highlightTypewriter: propHighlightTypewriter = false,
       highlightTypewriterDuration = 3000
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
   var {
     ref,
     inView
@@ -15117,7 +15614,7 @@ var useToggleState = defaultToggled => {
   };
 };
 
-var _excluded$O = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
+var _excluded$Q = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
 var ToggleView = _ref => {
   var {
       children,
@@ -15131,7 +15628,7 @@ var ToggleView = _ref => {
       onToggle,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
   var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
   var isActive = !!(isToggle || isHovered);
   var toggleVariants = {
@@ -15174,7 +15671,7 @@ var ToggleView = _ref => {
   }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
 };
 
-var _excluded$P = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$R = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
 // Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = _ref => {
   var {
@@ -15186,7 +15683,7 @@ var ToggleComponent = _ref => {
       isToggled = false,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
   // Initializing toggle state and set state functions using the custom hook useToggleState.
   var {
     isHovered,
@@ -15520,64 +16017,8 @@ var DropdownMenuItemStates = {
     cursor: 'not-allowed'
   }
 };
-// Helper function to calculate position based on side and alignment
-var getDropdownPosition = function getDropdownPosition(side, align) {
-  if (side === void 0) {
-    side = 'bottom';
-  }
-  if (align === void 0) {
-    align = 'start';
-  }
-  var positions = {
-    top: Object.assign({
-      bottom: '100%',
-      marginBottom: '8px'
-    }, align === 'start' && {
-      left: 0
-    }, align === 'center' && {
-      left: '50%',
-      transform: 'translateX(-50%)'
-    }, align === 'end' && {
-      right: 0
-    }),
-    right: Object.assign({
-      left: '100%',
-      marginLeft: '8px'
-    }, align === 'start' && {
-      top: 0
-    }, align === 'center' && {
-      top: '50%',
-      transform: 'translateY(-50%)'
-    }, align === 'end' && {
-      bottom: 0
-    }),
-    bottom: Object.assign({
-      top: '100%',
-      marginTop: '8px'
-    }, align === 'start' && {
-      left: 0
-    }, align === 'center' && {
-      left: '50%',
-      transform: 'translateX(-50%)'
-    }, align === 'end' && {
-      right: 0
-    }),
-    left: Object.assign({
-      right: '100%',
-      marginRight: '8px'
-    }, align === 'start' && {
-      top: 0
-    }, align === 'center' && {
-      top: '50%',
-      transform: 'translateY(-50%)'
-    }, align === 'end' && {
-      bottom: 0
-    })
-  };
-  return positions[side];
-};
 
-var _excluded$Q = ["children", "views"],
+var _excluded$S = ["children", "views"],
   _excluded2$d = ["items", "side", "align", "views"],
   _excluded3$9 = ["item", "views"],
   _excluded4$8 = ["views"],
@@ -15589,7 +16030,10 @@ var DropdownMenuContext = /*#__PURE__*/React.createContext({
   activeSubmenuId: null,
   setActiveSubmenuId: () => {},
   size: 'md',
-  variant: 'default'
+  variant: 'default',
+  triggerRef: {
+    current: null
+  }
 });
 // Provider component for the DropdownMenu context
 var DropdownMenuProvider = _ref => {
@@ -15615,16 +16059,18 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Q);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$S);
   var {
     isOpen,
-    setIsOpen
+    setIsOpen,
+    triggerRef
   } = useDropdownMenuContext();
   var handleClick = e => {
     e.stopPropagation();
     setIsOpen(!isOpen);
   };
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: triggerRef,
     id: "dropdown-trigger",
     onClick: handleClick,
     cursor: "pointer",
@@ -15643,20 +16089,121 @@ var DropdownMenuContent = _ref3 => {
     props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
   var {
     isOpen,
-    //activeSubmenuId, setActiveSubmenuId, size,
-    variant
+    variant,
+    triggerRef
   } = useDropdownMenuContext();
+  var contentRef = React.useRef(null);
+  var [optimalPosition, setOptimalPosition] = React.useState({
+    x: 0,
+    y: 0,
+    placement: side
+  });
+  // Calculate optimal position 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;
+      }
+      if (finalY + contentHeight > viewportHeight) {
+        finalY = viewportHeight - contentHeight - 8;
+      }
+      if (finalY < 8) {
+        finalY = 8;
+      }
+      setOptimalPosition({
+        x: finalX,
+        y: finalY,
+        placement: bestPlacement.placement
+      });
+    }
+  }, [isOpen, side, align, triggerRef]);
   if (!isOpen) {
     return null;
   }
+  // Create intelligent positioning styles
+  var positionStyles = {
+    position: 'fixed',
+    left: optimalPosition.x,
+    top: optimalPosition.y,
+    zIndex: 1000
+  };
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: contentRef,
     id: "dropdown-menu",
-    position: "absolute",
-    zIndex: 1000,
     borderRadius: 4,
     boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
-    overflow: "hidden"
-  }, getDropdownPosition(side, align), DropdownMenuVariants[variant], views == null ? void 0 : views.menu, props), items.map((item, index) => {
+    overflow: "hidden",
+    style: positionStyles
+  }, DropdownMenuVariants[variant], views == null ? void 0 : views.menu, props), items.map((item, index) => {
     if (item.divider) {
       return /*#__PURE__*/React__default.createElement(DropdownMenuDivider, {
         key: "divider-" + index,
@@ -15668,7 +16215,13 @@ var DropdownMenuContent = _ref3 => {
       item: item,
       views: views
     });
-  }));
+  }),  (/*#__PURE__*/React__default.createElement("div", {
+    style: {
+      fontSize: '10px',
+      opacity: 0.7,
+      padding: '4px'
+    }
+  }, "Placement: ", optimalPosition.placement)));
 };
 // DropdownMenu Item component
 var DropdownMenuItem = _ref4 => {
@@ -15771,7 +16324,7 @@ var DropdownMenuView = _ref6 => {
   }));
 };
 
-var _excluded$R = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+var _excluded$T = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
 /**
  * DropdownMenu component for displaying a menu when clicking on a trigger element.
  */
@@ -15786,13 +16339,14 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
   var {
     isOpen,
     setIsOpen,
     activeSubmenuId,
     setActiveSubmenuId
   } = useDropdownMenuState(defaultOpen);
+  var triggerRef = React.useRef(null);
   return /*#__PURE__*/React__default.createElement(DropdownMenuProvider, {
     value: {
       isOpen,
@@ -15800,7 +16354,8 @@ var DropdownMenuComponent = _ref => {
       activeSubmenuId,
       setActiveSubmenuId,
       size,
-      variant
+      variant,
+      triggerRef
     }
   }, /*#__PURE__*/React__default.createElement(DropdownMenuView, Object.assign({
     trigger: trigger,
@@ -16198,7 +16753,7 @@ var DefaultColorPalette$1 = [
   category: 'neutral'
 }];
 
-var _excluded$S = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
+var _excluded$U = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
 var ColorPickerView = _ref => {
   var {
       // Basic props
@@ -16233,7 +16788,7 @@ var ColorPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
   var {
     getColor
   } = appStudio.useTheme();
@@ -18563,7 +19118,7 @@ var useEmojiPickerState = props => {
   };
 };
 
-var _excluded$T = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
+var _excluded$V = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
 var EmojiPickerView = _ref => {
   var {
       // Basic props
@@ -18601,7 +19156,7 @@ var EmojiPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
   var {
     getColor
   } = appStudio.useTheme();
@@ -18753,109 +19308,7 @@ var useHoverCardState = function useHoverCardState(_temp) {
   };
 };
 
-// More advanced positioning using element measurements
-var getContentPositionStyles = function getContentPositionStyles(triggerRect, side, align, sideOffset) {
-  if (side === void 0) {
-    side = 'bottom';
-  }
-  if (align === void 0) {
-    align = 'center';
-  }
-  if (sideOffset === void 0) {
-    sideOffset = 8;
-  }
-  if (!triggerRect) {
-    return {
-      position: 'absolute',
-      opacity: 0,
-      pointerEvents: 'none'
-    }; // Hide if trigger isn't measured
-  }
-  var styles = {
-    position: 'absolute',
-    zIndex: 1000
-  };
-  // Calculate position based on side and alignment
-  switch (side) {
-    case 'top':
-      styles.bottom = '100%';
-      styles.marginBottom = sideOffset;
-      if (align === 'start') {
-        styles.left = 0;
-      } else if (align === 'center') {
-        styles.left = '50%';
-        styles.transform = 'translateX(-50%)';
-      } else if (align === 'end') {
-        styles.right = 0;
-      }
-      break;
-    case 'right':
-      styles.left = '100%';
-      styles.marginLeft = sideOffset;
-      if (align === 'start') {
-        styles.top = 0;
-      } else if (align === 'center') {
-        styles.top = '50%';
-        styles.transform = 'translateY(-50%)';
-      } else if (align === 'end') {
-        styles.bottom = 0;
-      }
-      break;
-    case 'bottom':
-      styles.top = '100%';
-      styles.marginTop = sideOffset;
-      if (align === 'start') {
-        styles.left = 0;
-      } else if (align === 'center') {
-        styles.left = '50%';
-        styles.transform = 'translateX(-50%)';
-      } else if (align === 'end') {
-        styles.right = 0;
-      }
-      break;
-    case 'left':
-      styles.right = '100%';
-      styles.marginRight = sideOffset;
-      if (align === 'start') {
-        styles.top = 0;
-      } else if (align === 'center') {
-        styles.top = '50%';
-        styles.transform = 'translateY(-50%)';
-      } else if (align === 'end') {
-        styles.bottom = 0;
-      }
-      break;
-  }
-  return styles;
-};
-
-/**
- * A hook that returns the DOMRect of an element.
- * @param ref React ref object for the element to measure
- * @returns DOMRect of the element or null if the element is not available
- */
-var useRect = ref => {
-  var [rect, setRect] = React.useState(null);
-  var updateRect = React.useCallback(() => {
-    if (ref.current) {
-      setRect(ref.current.getBoundingClientRect());
-    }
-  }, [ref]);
-  React.useLayoutEffect(() => {
-    if (!ref.current) return;
-    updateRect();
-    // Update on resize and scroll
-    window.addEventListener('resize', updateRect);
-    window.addEventListener('scroll', updateRect);
-    return () => {
-      window.removeEventListener('resize', updateRect);
-      window.removeEventListener('scroll', updateRect);
-    };
-  }, [ref, updateRect]);
-  return rect;
-};
-
-var _excluded$U = ["children", "views", "asChild"],
+var _excluded$W = ["children", "views", "asChild"],
   _excluded2$e = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
 // Create context for the HoverCard
 var HoverCardContext = /*#__PURE__*/React.createContext({
@@ -18894,7 +19347,7 @@ var HoverCardTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$U);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$W);
   var {
     openCard,
     closeCard,
@@ -18952,15 +19405,111 @@ var HoverCardContent = _ref3 => {
     contentId,
     triggerId
   } = useHoverCardContext();
-  // Use hook to measure trigger for positioning
-  var triggerRect = useRect(triggerRef);
-  // Calculate position based on trigger dimensions and side prop
-  var positionStyles = getContentPositionStyles(triggerRect, side, align, sideOffset);
+  var [optimalPosition, setOptimalPosition] = React.useState({
+    x: 0,
+    y: 0,
+    placement: side
+  });
+  // Calculate optimal position when the card opens or content dimensions change
+  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;
+      }
+      // 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]);
   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
+  };
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     ref: contentRef,
     id: contentId,
@@ -18975,13 +19524,18 @@ var HoverCardContent = _ref3 => {
     padding: padding,
     minWidth: minWidth,
     maxWidth: maxWidth,
-    zIndex: 1000,
-    // Combine calculated position styles with user styles
+    // 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,  (/*#__PURE__*/React__default.createElement("div", {
+    style: {
+      fontSize: '10px',
+      opacity: 0.7,
+      marginTop: '4px'
+    }
+  }, "Placement: ", optimalPosition.placement)));
 };
 
-var _excluded$V = ["children", "views", "openDelay", "closeDelay"];
+var _excluded$X = ["children", "views", "openDelay", "closeDelay"];
 /**
  * HoverCard component displays floating content when hovering over a trigger element.
  * Supports configurable open and close delays for a smoother user experience.
@@ -18993,7 +19547,7 @@ var HoverCardComponent = _ref => {
       openDelay,
       closeDelay
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
   var hoverCardState = useHoverCardState({
     openDelay,
     closeDelay
@@ -19110,20 +19664,8 @@ var MenubarItemStates = {
     cursor: 'not-allowed'
   }
 };
-var getMenubarContentPosition = orientation => {
-  if (orientation === 'horizontal') {
-    return {
-      top: '100%',
-      left: 0
-    };
-  }
-  return {
-    top: 0,
-    left: '100%'
-  };
-};
 
-var _excluded$W = ["children", "orientation", "size", "variant", "views"];
+var _excluded$Y = ["children", "orientation", "size", "variant", "views"];
 // Create context for the Menubar
 var MenubarContext = /*#__PURE__*/React.createContext({
   activeMenuId: null,
@@ -19134,7 +19676,10 @@ var MenubarContext = /*#__PURE__*/React.createContext({
   toggleMenu: () => {},
   orientation: 'horizontal',
   size: 'md',
-  variant: 'default'
+  variant: 'default',
+  triggerRefs: {
+    current: {}
+  }
 });
 // Hook to use the Menubar context
 var useMenubarContext = () => React.useContext(MenubarContext);
@@ -19157,7 +19702,7 @@ var MenubarRoot = _ref2 => {
       variant = 'default',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$W);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Y);
   var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
   return /*#__PURE__*/React__default.createElement(Container, Object.assign({
     role: "menubar",
@@ -19204,16 +19749,30 @@ var MenubarTrigger = _ref4 => {
     setActiveMenuId,
     toggleMenu,
     isMenuOpen,
-    size
+    size,
+    triggerRefs
   } = useMenubarContext();
+  var triggerRef = React.useRef(null);
   var isActive = activeMenuId === menuId;
   var isOpen = isMenuOpen(menuId);
+  // Store the trigger ref in the context
+  React.useEffect(() => {
+    if (triggerRef.current && menuId) {
+      triggerRefs.current[menuId] = triggerRef.current;
+    }
+    return () => {
+      if (menuId) {
+        delete triggerRefs.current[menuId];
+      }
+    };
+  }, [menuId, triggerRefs]);
   var handleClick = () => {
     if (disabled) return;
     setActiveMenuId(menuId);
     toggleMenu(menuId);
   };
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: triggerRef,
     id: "menubar-trigger",
     role: "menuitem",
     "aria-haspopup": "true",
@@ -19236,23 +19795,149 @@ var MenubarContent = _ref5 => {
   } = _ref5;
   var {
     isMenuOpen,
-    orientation
+    orientation,
+    triggerRefs
   } = useMenubarContext();
+  var contentRef = React.useRef(null);
+  var [optimalPosition, setOptimalPosition] = React.useState({
+    x: 0,
+    y: 0,
+    placement: orientation === 'horizontal' ? 'bottom' : 'right'
+  });
   var isOpen = isMenuOpen(menuId);
+  // Calculate optimal position when the menu opens
+  React.useEffect(() => {
+    if (isOpen && contentRef.current && menuId && triggerRefs.current[menuId]) {
+      var contentRect = contentRef.current.getBoundingClientRect();
+      var triggerRect = triggerRefs.current[menuId].getBoundingClientRect();
+      // Get content dimensions
+      var contentWidth = Math.max(contentRect.width || 200, 200);
+      var contentHeight = Math.max(contentRect.height || 150, 150);
+      // 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 orientation and available space
+      var placements = orientation === 'horizontal' ? [
+      // For horizontal menubar, prefer bottom placement
+      {
+        placement: 'bottom',
+        space: availableSpace.bottom,
+        fits: availableSpace.bottom >= contentHeight + 8,
+        x: triggerRect.left,
+        y: triggerRect.bottom + 8
+      }, {
+        placement: 'top',
+        space: availableSpace.top,
+        fits: availableSpace.top >= contentHeight + 8,
+        x: triggerRect.left,
+        y: triggerRect.top - contentHeight - 8
+      }, {
+        placement: 'right',
+        space: availableSpace.right,
+        fits: availableSpace.right >= contentWidth + 8,
+        x: triggerRect.right + 8,
+        y: triggerRect.top
+      }, {
+        placement: 'left',
+        space: availableSpace.left,
+        fits: availableSpace.left >= contentWidth + 8,
+        x: triggerRect.left - contentWidth - 8,
+        y: triggerRect.top
+      }] : [
+      // For vertical menubar, prefer right placement
+      {
+        placement: 'right',
+        space: availableSpace.right,
+        fits: availableSpace.right >= contentWidth + 8,
+        x: triggerRect.right + 8,
+        y: triggerRect.top
+      }, {
+        placement: 'left',
+        space: availableSpace.left,
+        fits: availableSpace.left >= contentWidth + 8,
+        x: triggerRect.left - contentWidth - 8,
+        y: triggerRect.top
+      }, {
+        placement: 'bottom',
+        space: availableSpace.bottom,
+        fits: availableSpace.bottom >= contentHeight + 8,
+        x: triggerRect.left,
+        y: triggerRect.bottom + 8
+      }, {
+        placement: 'top',
+        space: availableSpace.top,
+        fits: availableSpace.top >= contentHeight + 8,
+        x: triggerRect.left,
+        y: triggerRect.top - contentHeight - 8
+      }];
+      // 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, orientation, menuId, triggerRefs]);
   if (!isOpen) {
     return null;
   }
+  // Create intelligent positioning styles
+  var positionStyles = {
+    position: 'fixed',
+    left: optimalPosition.x,
+    top: optimalPosition.y,
+    zIndex: 1000
+  };
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: contentRef,
     id: "menubar-content",
     role: "menu",
-    position: "absolute",
-    zIndex: 1000,
     minWidth: "200px",
     backgroundColor: "color.white",
     borderRadius: 4,
     boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
-    overflow: "hidden"
-  }, getMenubarContentPosition(orientation), views == null ? void 0 : views.content), children);
+    overflow: "hidden",
+    style: positionStyles
+  }, views == null ? void 0 : views.content), children,  (/*#__PURE__*/React__default.createElement("div", {
+    style: {
+      fontSize: '8px',
+      opacity: 0.7,
+      padding: '4px'
+    }
+  }, "Placement: ", optimalPosition.placement)));
 };
 // Menubar Item component
 var MenubarItem = _ref6 => {
@@ -19343,7 +20028,7 @@ var MenubarView = _ref8 => {
   })))))));
 };
 
-var _excluded$X = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+var _excluded$Z = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
 /**
  * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
  */
@@ -19357,7 +20042,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -19366,6 +20051,7 @@ var MenubarComponent = _ref => {
     isMenuOpen,
     toggleMenu
   } = useMenubarState(defaultActiveMenuId, defaultOpenMenuId);
+  var triggerRefs = React.useRef({});
   return /*#__PURE__*/React__default.createElement(MenubarProvider, {
     value: {
       activeMenuId,
@@ -19376,7 +20062,8 @@ var MenubarComponent = _ref => {
       toggleMenu,
       orientation,
       size,
-      variant
+      variant,
+      triggerRefs
     }
   }, /*#__PURE__*/React__default.createElement(MenubarView, Object.assign({
     items: items,
@@ -19513,7 +20200,7 @@ var DisabledButtonStyles = {
   }
 };
 
-var _excluded$Y = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+var _excluded$_ = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
 var PaginationView = _ref => {
   var {
       currentPage,
@@ -19544,7 +20231,7 @@ var PaginationView = _ref => {
       visiblePageNumbers,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var handlePageChange = page => {
     if (page < 1 || page > totalPages || page === currentPage) {
       return;
@@ -19663,7 +20350,7 @@ var PaginationView = _ref => {
   }, option.label))))));
 };
 
-var _excluded$Z = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+var _excluded$$ = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
 /**
  * Pagination component for navigating through pages of content.
  */
@@ -19684,7 +20371,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -19754,7 +20441,7 @@ var DefaultSeparatorStyles = {
   }
 };
 
-var _excluded$_ = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+var _excluded$10 = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
 var SeparatorView = _ref => {
   var {
       orientation = 'horizontal',
@@ -19766,7 +20453,7 @@ var SeparatorView = _ref => {
       decorative = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   // Access theme if needed for future enhancements
   var {
     themeMode
@@ -20004,7 +20691,7 @@ var SidebarTransitions = {
   bounce: 'width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)'
 };
 
-var _excluded$$ = ["children", "showToggleButton", "views"],
+var _excluded$11 = ["children", "showToggleButton", "views"],
   _excluded2$f = ["children", "views"],
   _excluded3$a = ["children", "views"],
   _excluded4$9 = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
@@ -20037,7 +20724,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
   var {
     isExpanded,
     toggleExpanded,
@@ -20192,7 +20879,7 @@ var SidebarView = _ref5 => {
   }))));
 };
 
-var _excluded$10 = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
+var _excluded$12 = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
 /**
  * Sidebar component for creating collapsible, themeable and customizable sidebars.
  */
@@ -20214,7 +20901,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
   var {
     isExpanded,
     toggleExpanded,
@@ -20679,7 +21366,7 @@ var HandleIconStyles = {
   }
 };
 
-var _excluded$11 = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
+var _excluded$13 = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
   _excluded2$g = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
   _excluded3$b = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
 // Create context for the Resizable component
@@ -20724,7 +21411,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$13);
   var {
     orientation,
     registerPanel,
@@ -20939,7 +21626,7 @@ var ResizableView = _ref4 => {
   }, ResizableOrientations[orientation], views == null ? void 0 : views.container, props), children);
 };
 
-var _excluded$12 = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
+var _excluded$14 = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
 /**
  * Resizable component for creating resizable panel groups and layouts.
  */
@@ -20959,7 +21646,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
   var {
     isResizing,
     setIsResizing,
@@ -21727,7 +22414,7 @@ var CommandFooterStyles = {
   color: 'color.gray.500'
 };
 
-var _excluded$13 = ["value", "onValueChange", "placeholder", "views"],
+var _excluded$15 = ["value", "onValueChange", "placeholder", "views"],
   _excluded2$h = ["children", "views"],
   _excluded3$c = ["heading", "children", "views"],
   _excluded4$a = ["item", "selected", "onSelect", "views"],
@@ -21759,7 +22446,7 @@ var CommandInput = _ref2 => {
       placeholder = 'Type a command or search...',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$13);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
   var inputRef = React.useRef(null);
   // Focus input when component mounts
   React__default.useEffect(() => {
@@ -21942,7 +22629,7 @@ var CommandView = _ref7 => {
   })))), footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandFooterStyles, views == null ? void 0 : views.footer), footer)))));
 };
 
-var _excluded$14 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
+var _excluded$16 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
 /**
  * Command component for displaying a command palette with search functionality.
  */
@@ -21960,7 +22647,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
   var {
     search,
     setSearch,
@@ -22139,65 +22826,6 @@ var getTooltip = themeMode => {
 };
 // For backward compatibility
 var TooltipVariants = /*#__PURE__*/getTooltip();
-var getTooltipPositionStyles = (position, align) => {
-  var baseStyles = {
-    position: 'absolute',
-    zIndex: 1000
-  };
-  // Position styles
-  switch (position) {
-    case 'top':
-      return Object.assign({}, baseStyles, {
-        bottom: '100%',
-        marginBottom: '8px'
-      }, align === 'start' ? {
-        left: '0'
-      } : align === 'end' ? {
-        right: '0'
-      } : {
-        left: '50%',
-        transform: 'translateX(-50%)'
-      });
-    case 'right':
-      return Object.assign({}, baseStyles, {
-        left: '100%',
-        marginLeft: '8px'
-      }, align === 'start' ? {
-        top: '0'
-      } : align === 'end' ? {
-        bottom: '0'
-      } : {
-        top: '50%',
-        transform: 'translateY(-50%)'
-      });
-    case 'bottom':
-      return Object.assign({}, baseStyles, {
-        top: '100%',
-        marginTop: '8px'
-      }, align === 'start' ? {
-        left: '0'
-      } : align === 'end' ? {
-        right: '0'
-      } : {
-        left: '50%',
-        transform: 'translateX(-50%)'
-      });
-    case 'left':
-      return Object.assign({}, baseStyles, {
-        right: '100%',
-        marginRight: '8px'
-      }, align === 'start' ? {
-        top: '0'
-      } : align === 'end' ? {
-        bottom: '0'
-      } : {
-        top: '50%',
-        transform: 'translateY(-50%)'
-      });
-    default:
-      return baseStyles;
-  }
-};
 var getArrowStyles = position => {
   var baseStyles = {
     position: 'absolute',
@@ -22247,7 +22875,7 @@ var getArrowStyles = position => {
   }
 };
 
-var _excluded$15 = ["children", "views", "asChild"],
+var _excluded$17 = ["children", "views", "asChild"],
   _excluded2$i = ["children", "views"],
   _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
 // Create context for the Tooltip
@@ -22283,7 +22911,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$17);
   var {
     openTooltip,
     closeTooltip,
@@ -22352,17 +22980,113 @@ var TooltipView = _ref4 => {
     props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
   var {
     isOpen,
-    // openTooltip,
-    // closeTooltip,
-    // triggerRef,
+    triggerRef,
     contentRef,
     contentId,
     triggerId
   } = useTooltipContext();
-  // Get position styles
-  var positionStyles = getTooltipPositionStyles(position, align);
-  // Get arrow styles
-  var arrowStyles = showArrow ? getArrowStyles(position) : {};
+  var [optimalPosition, setOptimalPosition] = React.useState({
+    x: 0,
+    y: 0,
+    placement: position
+  });
+  // Calculate optimal position 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;
+      }
+      if (finalY < 8) {
+        finalY = 8;
+      }
+      setOptimalPosition({
+        x: finalX,
+        y: finalY,
+        placement: bestPlacement.placement
+      });
+    }
+  }, [isOpen, position, align, triggerRef, contentRef]);
+  // 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
+  };
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     position: "relative",
     display: "inline-block"
@@ -22372,11 +23096,18 @@ var TooltipView = _ref4 => {
     role: "tooltip",
     "aria-labelledby": triggerId,
     borderRadius: 4,
-    boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)"
-  }, TooltipSizes[size], TooltipVariants[variant], positionStyles, 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)))));
+    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)),  (/*#__PURE__*/React__default.createElement("div", {
+    style: {
+      fontSize: '8px',
+      opacity: 0.7,
+      marginTop: '2px'
+    }
+  }, "Placement: ", optimalPosition.placement)))));
 };
 
-var _excluded$16 = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
+var _excluded$18 = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
 /**
  * Tooltip component for displaying additional information when hovering over an element.
  * Supports configurable positions, delays, and styling.
@@ -22396,7 +23127,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,
@@ -22869,7 +23600,7 @@ var TreeItemStates = {
   }
 };
 
-var _excluded$17 = ["children", "views", "baseId"],
+var _excluded$19 = ["children", "views", "baseId"],
   _excluded2$j = ["value", "disabled", "icon", "children", "views", "style", "draggable"],
   _excluded3$e = ["children", "onClick", "onToggleExpand", "hasChildren", "expanded", "icon", "disabled", "isSelected", "isDragging", "size", "variant", "views"],
   _excluded4$b = ["children", "views"];
@@ -22905,7 +23636,7 @@ var TreeView = _ref2 => {
       baseId
       // themeMode, // If 'app-studio' ViewProps supports themeMode
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$17);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$19);
   var {
     allowDragAndDrop,
     handleDrop,
@@ -23185,7 +23916,7 @@ var DataDrivenTreeView = _ref7 => {
   }))));
 };
 
-var _excluded$18 = ["children", "items", "size", "variant", "defaultExpandedItems", "expandedItems", "onExpandedItemsChange", "defaultSelectedItem", "selectedItem", "onItemSelect", "multiSelect", "allowDragAndDrop", "dragHandleIcon", "onItemsReorder", "onDragStart", "onDragEnd", "views"];
+var _excluded$1a = ["children", "items", "size", "variant", "defaultExpandedItems", "expandedItems", "onExpandedItemsChange", "defaultSelectedItem", "selectedItem", "onItemSelect", "multiSelect", "allowDragAndDrop", "dragHandleIcon", "onItemsReorder", "onDragStart", "onDragEnd", "views"];
 /**
  * Tree component for displaying hierarchical data.
  * Supports both compound component pattern (using Tree.Item, Tree.ItemLabel, Tree.ItemContent)
@@ -23254,7 +23985,7 @@ var TreeComponent = _ref => {
       views // Global views configuration
       // Remaining ViewProps for the root TreeView container
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
   var treeState = useTreeState({
     defaultExpandedItems,
     expandedItems,
@@ -23827,7 +24558,7 @@ var FlowNodeStates = {
   }
 };
 
-var _excluded$19 = ["node", "onSelect", "isSelected", "isDragging", "onDragStart", "onDrag", "onDragEnd", "size", "variant", "views"],
+var _excluded$1b = ["node", "onSelect", "isSelected", "isDragging", "onDragStart", "onDrag", "onDragEnd", "size", "variant", "views"],
   _excluded2$k = ["onZoomIn", "onZoomOut", "onReset", "views"],
   _excluded3$f = ["onClick", "views"],
   _excluded4$c = ["nodes", "edges", "selectedNodeId", "draggedNodeId", "onNodeSelect", "onAddNode", "onNodeDragStart", "onNodeDrag", "onNodeDragEnd", "size", "variant", "direction", "showControls", "allowAddingNodes", "allowDraggingNodes", "views", "baseId", "viewport", "onZoomIn", "onZoomOut", "onReset", "onViewportChange"];
@@ -23843,7 +24574,7 @@ var FlowNodeView = _ref => {
       variant = 'default',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
   var handleClick = () => {
     if (onSelect) {
       onSelect(node.id);
@@ -24490,7 +25221,7 @@ var FlowView = _ref5 => {
   }, "Zoom: ", Math.round(viewport.zoom * 100), "%")));
 };
 
-var _excluded$1a = ["children", "nodes", "edges", "size", "variant", "direction", "showControls", "allowAddingNodes", "allowDraggingNodes", "onNodesChange", "onEdgesChange", "onNodeSelect", "onNodeAdd", "onNodeDragStart", "onNodeDrag", "onNodeDragEnd", "selectedNodeId", "initialViewport", "viewport", "onViewportChange", "views"];
+var _excluded$1c = ["children", "nodes", "edges", "size", "variant", "direction", "showControls", "allowAddingNodes", "allowDraggingNodes", "onNodesChange", "onEdgesChange", "onNodeSelect", "onNodeAdd", "onNodeDragStart", "onNodeDrag", "onNodeDragEnd", "selectedNodeId", "initialViewport", "viewport", "onViewportChange", "views"];
 /**
  * Flow component for creating workflow diagrams.
  *
@@ -24547,7 +25278,7 @@ var FlowComponent = _ref => {
       onViewportChange,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
   var flowState = useFlowState({
     initialNodes: controlledNodes,
     initialEdges: controlledEdges,
@@ -24989,9 +25720,6 @@ var Shapes$4 = {
   },
   rounded: {
     borderRadius: '8px'
-  },
-  pillShaped: {
-    borderRadius: '9999px'
   }
 };
 /**
@@ -25137,71 +25865,373 @@ var AttachmentGroup = _ref => {
 };
 
 var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  var _containerRef$current, _containerRef$current2;
   var {
     value,
     onChange,
-    onSubmit,
     placeholder = 'Type your message...',
     disabled = false,
     autoFocus = true,
+    suggestions = [],
+    onSuggestionSelect,
+    showSuggestions = false,
+    mentionData = [],
+    mentionTrigger = '@',
+    onMentionSelect,
+    maxHeight = '200px',
+    minHeight = '40px',
     views = {}
   } = _ref;
-  var {
-    getColor
-  } = appStudio.useTheme();
   var lastValueRef = React.useRef(value);
+  var [selectedSuggestionIndex, setSelectedSuggestionIndex] = React.useState(-1);
+  var [showPlaceholder, setShowPlaceholder] = React.useState(!value);
+  var containerRef = React.useRef(null);
+  var [isFocused, setIsFocused] = React.useState(false);
+  // Mention-specific state
+  var [showMentions, setShowMentions] = React.useState(false);
+  var [mentionQuery, setMentionQuery] = React.useState('');
+  var [mentionStartPos, setMentionStartPos] = React.useState(-1);
+  var [selectedMentionIndex, setSelectedMentionIndex] = React.useState(-1);
+  var [filteredMentions, setFilteredMentions] = React.useState([]);
+  // Positioning state for dropdowns
+  var [mentionPosition, setMentionPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
+  var [suggestionPosition, setSuggestionPosition] = React.useState({
+    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;
     if (editableDiv.current && value !== lastValueRef.current) {
       editableDiv.current.textContent = value;
       lastValueRef.current = value;
+      setShowPlaceholder(!value);
     }
   }, [value, ref]);
+  // Auto-focus effect
+  React.useEffect(() => {
+    if (autoFocus && ref && typeof ref === 'object' && ref.current) {
+      ref.current.focus();
+    }
+  }, [autoFocus, ref]);
+  // Get cursor position
+  var getCursorPosition = () => {
+    var selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return -1;
+    var range = selection.getRangeAt(0);
+    var preCaretRange = range.cloneRange();
+    preCaretRange.selectNodeContents(ref && typeof ref === 'object' && ref.current ? ref.current : document.body);
+    preCaretRange.setEnd(range.endContainer, range.endOffset);
+    return preCaretRange.toString().length;
+  };
+  // Check for mention trigger and filter mentions
+  var checkForMentions = React.useCallback((text, cursorPos) => {
+    var beforeCursor = text.substring(0, cursorPos);
+    var triggerIndex = beforeCursor.lastIndexOf(mentionTrigger);
+    if (triggerIndex !== -1) {
+      var afterTrigger = beforeCursor.substring(triggerIndex + 1);
+      var hasSpaceAfterTrigger = afterTrigger.includes(' ');
+      if (!hasSpaceAfterTrigger) {
+        var query = afterTrigger.toLowerCase();
+        var filtered = mentionData.filter(mention => mention.name.toLowerCase().includes(query));
+        setMentionQuery(query);
+        setMentionStartPos(triggerIndex);
+        setFilteredMentions(filtered);
+        setShowMentions(filtered.length > 0);
+        setSelectedMentionIndex(0);
+        // Calculate position for mentions dropdown
+        var position = calculateDropdownPosition();
+        setMentionPosition(position);
+        return;
+      }
+    }
+    setShowMentions(false);
+    setMentionQuery('');
+    setMentionStartPos(-1);
+    setSelectedMentionIndex(-1);
+  }, [mentionData, mentionTrigger]);
+  // Calculate optimal position for dropdowns
+  var calculateDropdownPosition = React.useCallback(function (dropdownHeight) {
+    if (dropdownHeight === void 0) {
+      dropdownHeight = 200;
+    }
+    if (!containerRef.current) return {
+      x: 0,
+      y: 0
+    };
+    var containerRect = containerRef.current.getBoundingClientRect();
+    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
+    };
+    // 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
+    };
+  }, []);
+  // Handle focus events
+  var handleFocus = React.useCallback(() => {
+    setIsFocused(true);
+    // Calculate position for suggestions when focused
+    var position = calculateDropdownPosition();
+    setSuggestionPosition(position);
+  }, [calculateDropdownPosition]);
+  var handleBlur = React.useCallback(() => {
+    // Delay hiding to allow for dropdown interactions
+    setTimeout(() => {
+      setIsFocused(false);
+      setSelectedSuggestionIndex(-1);
+    }, 150);
+  }, []);
   // Handle input events
   var handleInput = e => {
     var newValue = e.currentTarget.textContent || '';
     if (newValue !== lastValueRef.current) {
       onChange(newValue);
       lastValueRef.current = newValue;
+      setShowPlaceholder(!newValue);
+      // Check for mentions
+      var cursorPos = getCursorPosition();
+      checkForMentions(newValue, cursorPos);
     }
   };
+  // Handle mention selection
+  var handleMentionSelect = React.useCallback(mention => {
+    if (ref && typeof ref === 'object' && ref.current) {
+      var currentText = ref.current.textContent || '';
+      var beforeMention = currentText.substring(0, mentionStartPos);
+      var afterMention = currentText.substring(mentionStartPos + mentionTrigger.length + mentionQuery.length);
+      var newText = beforeMention + mentionTrigger + mention.name + ' ' + afterMention;
+      onChange(newText);
+      lastValueRef.current = newText;
+      ref.current.textContent = newText;
+      // Set cursor position after the mention
+      var newCursorPos = beforeMention.length + mentionTrigger.length + mention.name.length + 1;
+      setTimeout(() => {
+        if (ref.current) {
+          var range = document.createRange();
+          var selection = window.getSelection();
+          var textNode = ref.current.firstChild;
+          if (textNode && selection) {
+            var _textNode$textContent;
+            range.setStart(textNode, Math.min(newCursorPos, ((_textNode$textContent = textNode.textContent) == null ? void 0 : _textNode$textContent.length) || 0));
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }
+      }, 0);
+    }
+    setShowMentions(false);
+    setMentionQuery('');
+    setMentionStartPos(-1);
+    setSelectedMentionIndex(-1);
+    if (onMentionSelect) {
+      onMentionSelect(mention);
+    }
+  }, [mentionStartPos, mentionTrigger, mentionQuery, onChange, onMentionSelect, ref]);
+  // Handle suggestion selection
+  var handleSuggestionSelect = React.useCallback(suggestion => {
+    if (onSuggestionSelect) {
+      onSuggestionSelect(suggestion);
+    }
+    setSelectedSuggestionIndex(-1);
+  }, [onSuggestionSelect]);
   // Handle key down events
   var handleKeyDown = e => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      onSubmit(e);
+    // Handle mention navigation
+    if (showMentions && filteredMentions.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedMentionIndex(prev => prev < filteredMentions.length - 1 ? prev + 1 : 0);
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedMentionIndex(prev => prev > 0 ? prev - 1 : filteredMentions.length - 1);
+        return;
+      }
+      if ((e.key === 'Tab' || e.key === 'Enter') && selectedMentionIndex >= 0) {
+        e.preventDefault();
+        handleMentionSelect(filteredMentions[selectedMentionIndex]);
+        return;
+      }
+      if (e.key === 'Escape') {
+        setShowMentions(false);
+        setSelectedMentionIndex(-1);
+        return;
+      }
+    }
+    // Handle suggestion navigation
+    if (showSuggestions && suggestions.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedSuggestionIndex(prev => prev < suggestions.length - 1 ? prev + 1 : 0);
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedSuggestionIndex(prev => prev > 0 ? prev - 1 : suggestions.length - 1);
+        return;
+      }
+      if (e.key === 'Tab' && selectedSuggestionIndex >= 0) {
+        e.preventDefault();
+        handleSuggestionSelect(suggestions[selectedSuggestionIndex]);
+        return;
+      }
+      if (e.key === 'Escape') {
+        setSelectedSuggestionIndex(-1);
+        return;
+      }
     }
+    // Allow Enter for line breaks (remove submission on Enter)
+    // Submission should only happen via the send button
   };
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: containerRef,
     width: "100%",
-    minHeight: "40px",
-    maxHeight: "200px",
-    overflowY: "auto"
-  }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    position: "relative"
+  }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    width: "100%",
+    minHeight: minHeight,
+    maxHeight: maxHeight,
+    overflowY: "auto",
+    position: "relative"
+  }, showPlaceholder && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+    position: "absolute",
+    top: "8px",
+    left: "8px",
+    color: "color.gray.400",
+    pointerEvents: "none",
+    fontSize: "14px",
+    lineHeight: "1.5",
+    zIndex: 1
+  }, views == null ? void 0 : views.placeholder), placeholder)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     as: "div",
     ref: ref,
     contentEditable: !disabled,
     suppressContentEditableWarning: true,
     onInput: handleInput,
     onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     role: "textbox",
     "aria-multiline": "true",
     "aria-placeholder": placeholder,
-    "data-placeholder": placeholder,
     width: "100%",
     minHeight: "24px",
+    padding: "8px",
     outline: "none",
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
-    _empty: {
-      _before: {
-        content: 'attr(data-placeholder)',
-        color: 'color.gray.400',
-        pointerEvents: 'none'
-      }
+    fontSize: "14px",
+    lineHeight: "1.5",
+    color: "color.gray.900",
+    backgroundColor: "transparent"
+  }, views == null ? void 0 : views.input))), showMentions && filteredMentions.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    position: "fixed",
+    left: mentionPosition.x,
+    top: mentionPosition.y,
+    width: ((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.offsetWidth) || 300,
+    backgroundColor: "color.white",
+    border: "2px solid",
+    borderColor: "color.blue.300",
+    borderRadius: "8px",
+    boxShadow: "0 8px 24px rgba(0, 0, 0, 0.15)",
+    zIndex: 9999,
+    maxHeight: "200px",
+    overflowY: "auto"
+  }, views == null ? void 0 : views.mentionContainer), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+    gap: 0
+  }, filteredMentions.map((mention, index) => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    key: mention.id,
+    as: "button",
+    type: "button",
+    width: "100%",
+    padding: "12px 16px",
+    backgroundColor: index === selectedMentionIndex ? 'color.blue.50' : 'transparent',
+    border: "none",
+    cursor: "pointer",
+    textAlign: "left",
+    transition: "background-color 0.2s ease",
+    onClick: () => handleMentionSelect(mention),
+    onMouseEnter: () => setSelectedMentionIndex(index),
+    _hover: {
+      backgroundColor: 'color.blue.50'
     }
-  }, views == null ? void 0 : views.input)));
+  }, views == null ? void 0 : views.mentionItem), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+    gap: 4
+  }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+    fontSize: "14px",
+    color: "color.gray.900",
+    fontWeight: "medium"
+  }, mentionTrigger, mention.name), mention.description && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+    fontSize: "12px",
+    color: "color.gray.600"
+  }, mention.description)))))),  (/*#__PURE__*/React__default.createElement("div", {
+    style: {
+      fontSize: '8px',
+      opacity: 0.7,
+      padding: '4px'
+    }
+  }, "Mentions (Trigger: ", mentionTrigger, ")"))))), showSuggestions && suggestions.length > 0 && !showMentions && isFocused && !value && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    position: "fixed",
+    left: suggestionPosition.x,
+    top: suggestionPosition.y,
+    width: ((_containerRef$current2 = containerRef.current) == null ? void 0 : _containerRef$current2.offsetWidth) || 300,
+    backgroundColor: "color.white",
+    border: "2px solid",
+    borderColor: "color.green.300",
+    borderRadius: "8px",
+    boxShadow: "0 8px 24px rgba(0, 0, 0, 0.15)",
+    zIndex: 9998,
+    maxHeight: "200px",
+    overflowY: "auto"
+  }, views == null ? void 0 : views.suggestionsContainer), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+    gap: 0
+  }, suggestions.map((suggestion, index) => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    key: suggestion.id,
+    as: "button",
+    type: "button",
+    width: "100%",
+    padding: "12px 16px",
+    backgroundColor: index === selectedSuggestionIndex ? 'color.blue.50' : 'transparent',
+    border: "none",
+    cursor: "pointer",
+    textAlign: "left",
+    transition: "background-color 0.2s ease",
+    onClick: () => handleSuggestionSelect(suggestion),
+    onMouseEnter: () => setSelectedSuggestionIndex(index),
+    _hover: {
+      backgroundColor: 'color.blue.50'
+    }
+  }, views == null ? void 0 : views.suggestionItem), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+    gap: 4
+  }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
+    fontSize: "14px",
+    color: "color.gray.900",
+    fontWeight: "medium"
+  }, suggestion.text), suggestion.description && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+    fontSize: "12px",
+    color: "color.gray.600"
+  }, suggestion.description)))))),  (/*#__PURE__*/React__default.createElement("div", {
+    style: {
+      fontSize: '8px',
+      opacity: 0.7,
+      padding: '4px'
+    }
+  }, "Suggestions (Focus-triggered)"))))));
 });
 EditableInput.displayName = 'EditableInput';
 
@@ -25242,7 +26272,7 @@ var PromptExamples = _ref => {
   }, views == null ? void 0 : views.text), example.text)))));
 };
 
-var _excluded$1b = ["onSubmit", "placeholder", "loading", "disabled", "isAgentRunning", "onStopAgent", "loadingText", "autoFocus", "sandboxId", "hideAttachments", "attachmentText", "promptExamples", "showReferenceImageButton", "errorMessage", "size", "shape", "variant", "views", "value", "handleChange", "handleSubmit", "editableRef", "fileInputRef", "isUploading", "isDraggingOver", "uploadedFiles", "removeUploadedFile", "setPendingFiles", "setUploadedFiles", "setIsUploading", "selectedModel", "handleModelChange", "modelOptions", "subscriptionStatus", "canAccessModel", "isGuideTipShown", "hideGuideTip", "isReferenceImageModalShown", "toggleReferenceImageModal", "handlePromptExampleSelect", "handleDragOver", "handleDragLeave", "handleReferenceImageUpload", "removeReferenceImage", "setFileAsReference"];
+var _excluded$1d = ["onSubmit", "placeholder", "loading", "disabled", "isAgentRunning", "leftButtons", "rightButtons", "onStopAgent", "loadingText", "autoFocus", "sandboxId", "hideAttachments", "attachmentText", "promptExamples", "showReferenceImageButton", "errorMessage", "size", "shape", "variant", "views", "mentionData", "mentionTrigger", "onMentionSelect", "value", "handleChange", "handleSubmit", "editableRef", "fileInputRef", "isUploading", "isDraggingOver", "uploadedFiles", "removeUploadedFile", "setPendingFiles", "setUploadedFiles", "setIsUploading", "selectedModel", "handleModelChange", "modelOptions", "subscriptionStatus", "canAccessModel", "isGuideTipShown", "hideGuideTip", "isReferenceImageModalShown", "toggleReferenceImageModal", "handlePromptExampleSelect", "handleDragOver", "handleDragLeave", "handleReferenceImageUpload", "removeReferenceImage", "setFileAsReference"];
 var ChatInputView = _ref => {
   var _value$trim$length;
   var {
@@ -25251,6 +26281,8 @@ var ChatInputView = _ref => {
       loading = false,
       disabled = false,
       isAgentRunning = false,
+      leftButtons,
+      rightButtons,
       loadingText = 'Agent is working...',
       autoFocus = true,
       sandboxId,
@@ -25263,6 +26295,9 @@ var ChatInputView = _ref => {
       shape = 'rounded',
       variant = 'default',
       views = {},
+      mentionData = [],
+      mentionTrigger = '@',
+      onMentionSelect,
       // Props from state
       value,
       handleChange,
@@ -25282,7 +26317,7 @@ var ChatInputView = _ref => {
       setFileAsReference
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1d);
   var {} = appStudio.useTheme();
   // Combine styles
   var containerStyles = Object.assign({}, DefaultChatInputStyles.container, Shapes$4[shape], views == null ? void 0 : views.container);
@@ -25374,16 +26409,18 @@ var ChatInputView = _ref => {
     color: "color.gray.500"
   }, loadingText))), /*#__PURE__*/React__default.createElement(appStudio.View, {
     position: "relative",
-    width: "100%"
+    width: "100%",
+    overflow: "visible"
   }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     as: "form",
     onSubmit: handleSubmit,
-    overflowY: "auto",
+    overflow: "visible",
     display: "flex",
     flexDirection: "column",
     position: "relative"
   }, contentStyles, containerStyles, {
-    paddingHorizontal: 20,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
     backgroundColor: isDraggingOver ? 'color.blue.50' : undefined
   }), /*#__PURE__*/React__default.createElement(AttachmentGroup, {
     files: uploadedFiles,
@@ -25402,10 +26439,21 @@ var ChatInputView = _ref => {
     ref: editableRef,
     value: value || '',
     onChange: handleChange,
-    onSubmit: handleSubmit,
     placeholder: placeholder,
     disabled: disabled && !isAgentRunning,
     autoFocus: autoFocus,
+    suggestions: (promptExamples == null ? void 0 : promptExamples.map(example => ({
+      id: example.id,
+      text: example.text,
+      description: undefined
+    }))) || [],
+    showSuggestions: promptExamples && promptExamples.length > 0 && !value,
+    onSuggestionSelect: suggestion => {
+      handleChange(suggestion.text);
+    },
+    mentionData: mentionData,
+    mentionTrigger: mentionTrigger,
+    onMentionSelect: onMentionSelect,
     views: {
       container: {},
       input: views == null ? void 0 : views.editableInput
@@ -25431,7 +26479,7 @@ var ChatInputView = _ref => {
     views: {
       container: Object.assign({
         height: '36px',
-        margin: '0 12px',
+        //margin: '0 12px',
         // borderRadius: '8px',
         // backgroundColor: 'transparent',
         // border: '1px solid',
@@ -25440,13 +26488,15 @@ var ChatInputView = _ref => {
         _hover: {
           backgroundColor: 'color.gray.100'
         }
-      }, views == null ? void 0 : views.fileButton, containerStyles)
+      }, views == null ? void 0 : views.fileButton)
     },
     containerProps: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      gap: 4
+      gap: 4,
+      borderRadius: shape === 'rounded' ? '50%' : 4,
+      padding: 10
     },
     textProps: {
       fontSize: '14px',
@@ -25458,9 +26508,13 @@ var ChatInputView = _ref => {
       }
       return null;
     }
-  }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  })), leftButtons), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+    gap: 8,
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     as: "button",
-    type: "submit",
+    type: "button",
+    onClick: handleSubmit,
     height: "40px",
     width: "40px",
     display: "flex",
@@ -25468,7 +26522,7 @@ var ChatInputView = _ref => {
     justifyContent: "center",
     backgroundColor: isAgentRunning ? 'theme.error' : hasText ? 'theme.primary' : 'color.gray.300',
     color: "color.white",
-    borderRadius: "50%",
+    borderRadius: shape === 'rounded' ? '50%' : 4,
     border: "none",
     cursor: hasText ? 'pointer' : 'not-allowed',
     disabled: !hasText || loading || disabled && !isAgentRunning,
@@ -25488,7 +26542,7 @@ var ChatInputView = _ref => {
     widthHeight: 16,
     color: "currentColor",
     filled: false
-  })))))), errorMessage && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+  }))), rightButtons)))), errorMessage && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
     color: "theme.error",
     marginTop: "4px"
   }, views == null ? void 0 : views.bottomTip), errorMessage)));
@@ -25549,7 +26603,7 @@ var AuroraStyles = {
   }
 };
 
-var _excluded$1c = ["children", "showRadialGradient", "views", "themeMode"],
+var _excluded$1e = ["children", "showRadialGradient", "views", "themeMode"],
   _excluded2$l = ["number"],
   _excluded3$g = ["rows", "cols", "squareSize"],
   _excluded4$d = ["count", "colors", "speed", "shapes"],
@@ -25567,7 +26621,7 @@ var AuroraBackground = _ref => {
       showRadialGradient = true,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1e);
   var gradientColors = {
     white: 'rgba(255,255,255,1)',
     transparent: 'rgba(255,255,255,0)'
@@ -26123,6 +27177,7 @@ exports.SuccessIcon = SuccessIcon;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
+exports.TagInput = TagInput;
 exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextField = TextField;