@app-studio/web 0.9.7 → 0.9.8

package/dist/web.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.trim-end.js'), require('core-js/modules/es.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), 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'), require('date-fns/format'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.string.replace.js'), 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')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'core-js/modules/es.parse-int.js', 'react-router-dom', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js', 'core-js/modules/es.string.trim.js'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, null, global.reactRouterDom, null, global.contrast, null, null, null, null, global.format, null, null, global.formik, null, null, null, global.zustand));
-}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, es_parseInt_js, reactRouterDom, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_regexp_constructor_js, es_regexp_exec_js, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.trim-end.js'), require('core-js/modules/es.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), 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'), 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'), require('formik'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.string.replace.js'), 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')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'core-js/modules/es.parse-int.js', 'react-router-dom', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, null, global.reactRouterDom, null, global.contrast, null, null, null, null, global.format, null, null, null, global.formik, null, null, null, global.zustand));
+}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, es_parseInt_js, reactRouterDom, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_string_trim_js, es_regexp_constructor_js, es_regexp_exec_js, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
@@ -6386,60 +6386,8 @@
       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"],
@@ -6560,28 +6508,72 @@
       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",
@@ -6634,7 +6626,6 @@
       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
@@ -6659,16 +6650,40 @@
           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",
@@ -6962,7 +6977,7 @@
   };
 
   var _excluded$j = ["children", "helperText", "error", "views"];
-  var FieldContainer = _ref => {
+  var FieldContainer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     var {
         children,
         helperText,
@@ -6970,9 +6985,8 @@
         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",
@@ -6988,7 +7002,8 @@
       color: "color.red.500",
       transition: "all 0.2s ease"
     }, views == null ? void 0 : views.error), error)));
-  };
+  });
+  FieldContainer.displayName = 'FieldContainer';
 
   /**
    * Input Styles
@@ -7579,6 +7594,47 @@
         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);
@@ -7637,11 +7693,10 @@
       }
     };
     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,
@@ -7671,7 +7726,8 @@
       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',
@@ -7704,15 +7760,10 @@
       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, {
@@ -7729,7 +7780,7 @@
       callback: handleCallback,
       highlightedIndex: highlightedIndex,
       setHighlightedIndex: setHighlightedIndex
-    }))));
+    })))));
   };
 
   // Defines a functional component named 'SelectComponent', which is expected to receive 'SelectProps' as properties.
@@ -11154,6 +11205,45 @@
         // 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 => {
@@ -11196,6 +11286,7 @@
     }, 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",
@@ -11216,19 +11307,14 @@
       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,
@@ -11262,7 +11348,7 @@
       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"];
@@ -11297,6 +11383,417 @@
   // Exports the ComboBoxComponent as ComboBox
   var ComboBox = ComboBoxComponent;
 
+  /**
+   * 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);
+    // 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 (controlledTags && Array.isArray(controlledTags)) {
+        setInternalTags(controlledTags.map((tag, index) => ({
+          id: "tag-" + index + "-" + Date.now(),
+          value: tag
+        })));
+      }
+    }, [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;
+        }
+      }
+      // Check maximum tags limit
+      if (maxTags && tags.length >= maxTags) {
+        return false;
+      }
+      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;
+      }
+      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;
+      }
+      // Handle Tab key
+      if (separators.includes('tab') && key === 'Tab' && inputValue.trim()) {
+        event.preventDefault();
+        addTag(inputValue);
+        return;
+      }
+      // Handle Space key
+      if (separators.includes('space') && key === ' ' && inputValue.trim()) {
+        event.preventDefault();
+        addTag(inputValue);
+        return;
+      }
+      // Handle Backspace to remove last tag
+      if (key === 'Backspace' && !inputValue && tags.length > 0) {
+        event.preventDefault();
+        removeTag(tags.length - 1);
+        return;
+      }
+    }, [addTag, removeTag, inputValue, tags, separators, isDisabled, isReadOnly]);
+    /**
+     * Handles input focus
+     */
+    var handleFocus = React.useCallback(() => {
+      setIsFocused(true);
+      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);
@@ -11603,7 +12100,7 @@
     };
   };
 
-  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: [],
@@ -11657,7 +12154,7 @@
         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
@@ -11889,7 +12386,7 @@
   };
   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: () => {},
@@ -11905,7 +12402,7 @@
         initFocus,
         onChange = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
     var formik$1 = formik.useFormikContext();
     React.useEffect(() => {
       onChange(formik$1.values);
@@ -11953,7 +12450,7 @@
     }, /*#__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':
@@ -11992,7 +12489,7 @@
         name,
         type
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
     var focus = useFormFocus();
     var {
       touched,
@@ -12036,13 +12533,13 @@
     } : {});
   };
 
-  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));
@@ -12110,11 +12607,11 @@
    */
   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));
   };
   /**
@@ -12122,7 +12619,7 @@
    */
   var FormikTextField = TextFieldComponent$1;
 
-  var _excluded$F = ["visibleIcon", "hiddenIcon"],
+  var _excluded$H = ["visibleIcon", "hiddenIcon"],
     _excluded2$b = ["isVisible", "setIsVisible"];
   var PasswordComponent$1 = _ref => {
     var {
@@ -12133,7 +12630,7 @@
           widthHeight: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
     var formProps = useFormikInput(props);
     var _usePasswordState = usePasswordState(formProps),
       {
@@ -12158,14 +12655,14 @@
    */
   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
@@ -12446,7 +12943,7 @@
     }
   };
 
-  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 {
@@ -12489,7 +12986,7 @@
           tooltip: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
     var {
       getColor,
       themeMode
@@ -13402,7 +13899,7 @@
     }, 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 = '*/*',
@@ -13417,7 +13914,7 @@
         fileType,
         multiple = false
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
     var {
       previewUrl,
       thumbnailUrl,
@@ -13613,7 +14110,7 @@
     }
   };
 
-  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"],
@@ -13628,7 +14125,7 @@
         position = 'center',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -13924,7 +14421,7 @@
     }
   };
 
-  var _excluded$K = ["href", "children", "views"];
+  var _excluded$M = ["href", "children", "views"];
   // Create context for the NavigationMenu
   var NavigationMenuContext = /*#__PURE__*/React.createContext({
     activeItemId: null,
@@ -14155,7 +14652,7 @@
         children,
         views
       } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded$K);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded$M);
     var {
       itemValue,
       isDisabled
@@ -14222,7 +14719,7 @@
     })))));
   };
 
-  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.
@@ -14239,7 +14736,7 @@
         onItemActivate,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
     var {
       activeItemId,
       setActiveItemId,
@@ -14762,20 +15259,20 @@
    * 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
   };
   /**
@@ -14815,7 +15312,7 @@
     })
   };
 
-  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
    */
@@ -14829,7 +15326,7 @@
         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
@@ -14896,7 +15393,7 @@
     }))))));
   };
 
-  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, '\\$&');
   }
@@ -14915,7 +15412,7 @@
         highlightTypewriter: propHighlightTypewriter = false,
         highlightTypewriterDuration = 3000
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
     var {
       ref,
       inView
@@ -15086,7 +15583,7 @@
     };
   };
 
-  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,
@@ -15100,7 +15597,7 @@
         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 = {
@@ -15143,7 +15640,7 @@
     }, 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 {
@@ -15155,7 +15652,7 @@
         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,
@@ -15489,64 +15986,8 @@
       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"],
@@ -15558,7 +15999,10 @@
     activeSubmenuId: null,
     setActiveSubmenuId: () => {},
     size: 'md',
-    variant: 'default'
+    variant: 'default',
+    triggerRef: {
+      current: null
+    }
   });
   // Provider component for the DropdownMenu context
   var DropdownMenuProvider = _ref => {
@@ -15584,16 +16028,18 @@
         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",
@@ -15612,20 +16058,121 @@
       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,
@@ -15637,7 +16184,13 @@
         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 => {
@@ -15740,7 +16293,7 @@
     }));
   };
 
-  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.
    */
@@ -15755,13 +16308,14 @@
         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,
@@ -15769,7 +16323,8 @@
         activeSubmenuId,
         setActiveSubmenuId,
         size,
-        variant
+        variant,
+        triggerRef
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuView, Object.assign({
       trigger: trigger,
@@ -16167,7 +16722,7 @@
     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
@@ -16202,7 +16757,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
     var {
       getColor
     } = appStudio.useTheme();
@@ -18532,7 +19087,7 @@
     };
   };
 
-  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
@@ -18570,7 +19125,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
     var {
       getColor
     } = appStudio.useTheme();
@@ -18722,109 +19277,7 @@
     };
   };
 
-  // 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({
@@ -18863,7 +19316,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$U);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$W);
     var {
       openCard,
       closeCard,
@@ -18921,15 +19374,111 @@
       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,
@@ -18944,13 +19493,18 @@
       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.
@@ -18962,7 +19516,7 @@
         openDelay,
         closeDelay
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
     var hoverCardState = useHoverCardState({
       openDelay,
       closeDelay
@@ -19079,20 +19633,8 @@
       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,
@@ -19103,7 +19645,10 @@
     toggleMenu: () => {},
     orientation: 'horizontal',
     size: 'md',
-    variant: 'default'
+    variant: 'default',
+    triggerRefs: {
+      current: {}
+    }
   });
   // Hook to use the Menubar context
   var useMenubarContext = () => React.useContext(MenubarContext);
@@ -19126,7 +19671,7 @@
         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",
@@ -19173,16 +19718,30 @@
       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",
@@ -19205,23 +19764,149 @@
     } = _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 => {
@@ -19312,7 +19997,7 @@
     })))))));
   };
 
-  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.
    */
@@ -19326,7 +20011,7 @@
         defaultOpenMenuId = null,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
     var {
       activeMenuId,
       setActiveMenuId,
@@ -19335,6 +20020,7 @@
       isMenuOpen,
       toggleMenu
     } = useMenubarState(defaultActiveMenuId, defaultOpenMenuId);
+    var triggerRefs = React.useRef({});
     return /*#__PURE__*/React__default.createElement(MenubarProvider, {
       value: {
         activeMenuId,
@@ -19345,7 +20031,8 @@
         toggleMenu,
         orientation,
         size,
-        variant
+        variant,
+        triggerRefs
       }
     }, /*#__PURE__*/React__default.createElement(MenubarView, Object.assign({
       items: items,
@@ -19482,7 +20169,7 @@
     }
   };
 
-  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,
@@ -19513,7 +20200,7 @@
         visiblePageNumbers,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
     var handlePageChange = page => {
       if (page < 1 || page > totalPages || page === currentPage) {
         return;
@@ -19632,7 +20319,7 @@
     }, 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.
    */
@@ -19653,7 +20340,7 @@
         shape = 'rounded',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     var {
       visiblePageNumbers
     } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -19723,7 +20410,7 @@
     }
   };
 
-  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',
@@ -19735,7 +20422,7 @@
         decorative = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
     // Access theme if needed for future enhancements
     var {
       themeMode
@@ -19973,7 +20660,7 @@
     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"];
@@ -20006,7 +20693,7 @@
         showToggleButton = true,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
     var {
       isExpanded,
       toggleExpanded,
@@ -20161,7 +20848,7 @@
     }))));
   };
 
-  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.
    */
@@ -20183,7 +20870,7 @@
         breakpointBehavior = 'overlay',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
     var {
       isExpanded,
       toggleExpanded,
@@ -20648,7 +21335,7 @@
     }
   };
 
-  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
@@ -20693,7 +21380,7 @@
         onCollapseChange,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$13);
     var {
       orientation,
       registerPanel,
@@ -20908,7 +21595,7 @@
     }, 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.
    */
@@ -20928,7 +21615,7 @@
         keyboardResizeBy = 10,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
     var {
       isResizing,
       setIsResizing,
@@ -21696,7 +22383,7 @@
     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"],
@@ -21728,7 +22415,7 @@
         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(() => {
@@ -21911,7 +22598,7 @@
     })))), 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.
    */
@@ -21929,7 +22616,7 @@
         footer,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
     var {
       search,
       setSearch,
@@ -22108,65 +22795,6 @@
   };
   // 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',
@@ -22216,7 +22844,7 @@
     }
   };
 
-  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
@@ -22252,7 +22880,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$17);
     var {
       openTooltip,
       closeTooltip,
@@ -22321,17 +22949,113 @@
       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"
@@ -22341,11 +23065,18 @@
       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.
@@ -22365,7 +23096,7 @@
         isDisabled = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
     var tooltipState = useTooltipState({
       defaultOpen,
       openDelay,
@@ -22838,7 +23569,7 @@
     }
   };
 
-  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"];
@@ -22874,7 +23605,7 @@
         baseId
         // themeMode, // If 'app-studio' ViewProps supports themeMode
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$17);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$19);
     var {
       allowDragAndDrop,
       handleDrop,
@@ -23154,7 +23885,7 @@
     }))));
   };
 
-  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)
@@ -23223,7 +23954,7 @@
         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,
@@ -23796,7 +24527,7 @@
     }
   };
 
-  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"];
@@ -23812,7 +24543,7 @@
         variant = 'default',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
     var handleClick = () => {
       if (onSelect) {
         onSelect(node.id);
@@ -24459,7 +25190,7 @@
     }, "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.
    *
@@ -24516,7 +25247,7 @@
         onViewportChange,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1c);
     var flowState = useFlowState({
       initialNodes: controlledNodes,
       initialEdges: controlledEdges,
@@ -24958,9 +25689,6 @@
     },
     rounded: {
       borderRadius: '8px'
-    },
-    pillShaped: {
-      borderRadius: '9999px'
     }
   };
   /**
@@ -25106,71 +25834,373 @@
   };
 
   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';
 
@@ -25211,7 +26241,7 @@
     }, 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 {
@@ -25220,6 +26250,8 @@
         loading = false,
         disabled = false,
         isAgentRunning = false,
+        leftButtons,
+        rightButtons,
         loadingText = 'Agent is working...',
         autoFocus = true,
         sandboxId,
@@ -25232,6 +26264,9 @@
         shape = 'rounded',
         variant = 'default',
         views = {},
+        mentionData = [],
+        mentionTrigger = '@',
+        onMentionSelect,
         // Props from state
         value,
         handleChange,
@@ -25251,7 +26286,7 @@
         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);
@@ -25343,16 +26378,18 @@
       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,
@@ -25371,10 +26408,21 @@
       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
@@ -25400,7 +26448,7 @@
       views: {
         container: Object.assign({
           height: '36px',
-          margin: '0 12px',
+          //margin: '0 12px',
           // borderRadius: '8px',
           // backgroundColor: 'transparent',
           // border: '1px solid',
@@ -25409,13 +26457,15 @@
           _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',
@@ -25427,9 +26477,13 @@
         }
         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",
@@ -25437,7 +26491,7 @@
       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,
@@ -25457,7 +26511,7 @@
       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)));
@@ -25518,7 +26572,7 @@
     }
   };
 
-  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"],
@@ -25536,7 +26590,7 @@
         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)'
@@ -26092,6 +27146,7 @@
   exports.Switch = Switch;
   exports.Table = Table;
   exports.Tabs = Tabs;
+  exports.TagInput = TagInput;
   exports.Text = Text;
   exports.TextArea = TextArea;
   exports.TextField = TextField;