@multiplatform.one/forms 6.1.0 → 6.3.0

package/dist/cjs/fields/MentionInput/index.cjs

@@ -29,6 +29,7 @@ var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_tamagui2 = require("tamagui");
 var import_react2 = require("@floating-ui/react");
+var import_theme = require("@multiplatform.one/theme");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_floatingList = require("../../shared/floatingList.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
@@ -36,15 +37,22 @@ var import_zIndex = require("../../shared/zIndex.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_utils = require("../../shared/utils.cjs");
+var import_t = require("../../shared/t.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_TextArea = require("../TextArea/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const estimatedItemHeight = 48;
 const blurCloseDelayMs = 150;
 const zeroWidthSpace = "\u200B";
+const helperFontSizeMap = {
+  $3: "$2",
+  $4: "$3",
+  $5: "$4"
+};
 const MentionSuggestionItem = (0, import_tamagui2.styled)(import_tamagui2.XStack, {
-  padding: "$3",
-  alignItems: "center",
+  name: "MentionSuggestionItem",
+  ...import_theme.menuRowFrame,
+  paddingVertical: "$2",
+  gap: "$2",
   cursor: "pointer",
   hoverStyle: {
     backgroundColor: import_colorRamps.formInputColors.background.focus
@@ -52,7 +60,7 @@ const MentionSuggestionItem = (0, import_tamagui2.styled)(import_tamagui2.XStack
   variants: {
     selected: {
       true: {
-        backgroundColor: import_colorRamps.formInputColors.background.base
+        backgroundColor: import_colorRamps.formInputColors.background.focus
       },
       false: {
         backgroundColor: "transparent"
@@ -60,16 +68,18 @@ const MentionSuggestionItem = (0, import_tamagui2.styled)(import_tamagui2.XStack
     }
   }
 });
+const MEDIA_SLOT = 28;
 function MentionInput(props) {
   const {
     defaultValue,
     form,
     mentions = [],
-    placeholder = "Type @ to mention someone",
+    placeholder = (0, import_t.t)("Type @ to mention someone"),
     minHeight: minHeightProp,
     maxHeight: maxHeightProp,
     autoResize = false,
     onMentionSelect,
+    onChange,
     onTextChange,
     textAreaProps,
     mode,
@@ -152,6 +162,7 @@ function MentionInput(props) {
   }, [triggerMap]);
   const suggestions = (0, import_react.useMemo)(() => showSuggestions && currentTrigger ? getFilteredSuggestions(currentTrigger, searchQuery) : [], [showSuggestions, currentTrigger, searchQuery, getFilteredSuggestions]);
   const hasSuggestions = suggestions.length > 0;
+  const suggestionsHaveMedia = (0, import_react.useMemo)(() => suggestions.some(item => Boolean(item.avatar)), [suggestions]);
   const panel = (0, import_FloatingPanel.useFloatingPanel)({
     open: hasSuggestions,
     onOpenChange: nextOpen => {
@@ -197,10 +208,29 @@ function MentionInput(props) {
       prevQueryRef.current = "";
     }
   }, [checkForTrigger]);
+  const getWebTextAreaElement = (0, import_react.useCallback)(() => {
+    if (typeof document === "undefined") return null;
+    const current = textAreaRef.current;
+    if (!current) return null;
+    if (current instanceof HTMLTextAreaElement) return current;
+    if ("textarea" in current && current.textarea instanceof HTMLTextAreaElement) {
+      return current.textarea;
+    }
+    if ("_textarea" in current && current._textarea instanceof HTMLTextAreaElement) {
+      return current._textarea;
+    }
+    if (current instanceof HTMLElement) {
+      const nested = current.querySelector("textarea");
+      return nested instanceof HTMLTextAreaElement ? nested : null;
+    }
+    return null;
+  }, []);
   const handleTextChange = (0, import_react.useCallback)(newText => {
     const oldText = text;
-    const editPosition = prevCursorRef.current;
     const lengthDiff = newText.length - oldText.length;
+    const webElement = getWebTextAreaElement();
+    const domCaret = webElement && typeof webElement.selectionStart === "number" ? webElement.selectionStart : null;
+    const editPosition = domCaret !== null ? Math.max(0, domCaret - Math.max(0, lengthDiff)) : prevCursorRef.current;
     if (lengthDiff !== 0) {
       setMentionList(prev => prev.map(m => ({
         ...m
@@ -217,11 +247,13 @@ function MentionInput(props) {
       }));
     }
     setText(newText);
-    const estimatedCursor = Math.max(0, Math.min(editPosition + Math.max(0, lengthDiff), newText.length));
+    const estimatedCursor = domCaret !== null ? domCaret : Math.max(0, Math.min(editPosition + Math.max(0, lengthDiff), newText.length));
+    prevCursorRef.current = estimatedCursor;
     setCursorPosition(estimatedCursor);
     updateTriggerState(newText, estimatedCursor);
+    onChange?.(newText);
     onTextChange?.(newText);
-  }, [text, updateTriggerState, onTextChange]);
+  }, [text, updateTriggerState, onChange, onTextChange, getWebTextAreaElement]);
   const handleSelectionChange = (0, import_react.useCallback)(event => {
     const selection = event?.nativeEvent?.selection;
     if (selection) {
@@ -230,6 +262,14 @@ function MentionInput(props) {
       updateTriggerState(text, selection.start);
     }
   }, [text, updateTriggerState]);
+  const handleWebSelect = (0, import_react.useCallback)(() => {
+    const el = getWebTextAreaElement();
+    if (!el || typeof el.selectionStart !== "number") return;
+    const position = el.selectionStart;
+    prevCursorRef.current = position;
+    setCursorPosition(position);
+    updateTriggerState(el.value, position);
+  }, [getWebTextAreaElement, updateTriggerState]);
   const insertMention = (0, import_react.useCallback)(item => {
     if (!currentTrigger) return;
     const triggerInfo = checkForTrigger(text, cursorPosition);
@@ -266,8 +306,16 @@ function MentionInput(props) {
     setCurrentTrigger(null);
     prevQueryRef.current = "";
     onMentionSelect?.(item, currentTrigger);
-    setTimeout(() => textAreaRef.current?.focus(), 0);
-  }, [text, cursorPosition, currentTrigger, checkForTrigger, triggerMap, mentionList, onMentionSelect]);
+    setTimeout(() => {
+      const el = getWebTextAreaElement();
+      if (el) {
+        el.focus();
+        el.setSelectionRange(newCursorPos, newCursorPos);
+      } else {
+        textAreaRef.current?.focus();
+      }
+    }, 0);
+  }, [text, cursorPosition, currentTrigger, checkForTrigger, triggerMap, mentionList, onMentionSelect, getWebTextAreaElement]);
   const handleKeyDown = (0, import_react.useCallback)(event => {
     if (!showSuggestions || !currentTrigger || suggestions.length === 0) return;
     const key = event.key || event.nativeEvent?.key;
@@ -292,12 +340,18 @@ function MentionInput(props) {
         break;
     }
   }, [showSuggestions, currentTrigger, suggestions, selectedIndex, insertMention]);
+  const itemRefs = (0, import_react.useRef)([]);
   (0, import_react.useEffect)(() => {
-    if (hasSuggestions && panel.refs.floating.current) {
-      panel.refs.floating.current.scrollTo?.({
-        top: Math.max(0, (selectedIndex - 2) * estimatedItemHeight),
-        behavior: "smooth"
-      });
+    if (!hasSuggestions) return;
+    const floating = panel.refs.floating.current;
+    const item = itemRefs.current[selectedIndex];
+    if (!floating || !item?.getBoundingClientRect) return;
+    const containerRect = floating.getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    if (itemRect.bottom > containerRect.bottom) {
+      floating.scrollTop += itemRect.bottom - containerRect.bottom;
+    } else if (itemRect.top < containerRect.top) {
+      floating.scrollTop -= containerRect.top - itemRect.top;
     }
   }, [selectedIndex, hasSuggestions, panel.refs.floating]);
   const handleBlurInternal = (0, import_react.useCallback)((..._args) => {
@@ -315,23 +369,6 @@ function MentionInput(props) {
   const activeConfig = currentTrigger ? triggerMap.get(currentTrigger) : null;
   const suggestionsMaxHeight = activeConfig?.menuHeight ?? (knobProps.sizeToken === "$3" ? 160 : knobProps.sizeToken === "$5" ? 240 : 200);
   const suggestionsMinWidth = activeConfig?.menuWidth ?? (knobProps.sizeToken === "$3" ? 180 : knobProps.sizeToken === "$5" ? 240 : 200);
-  const getWebTextAreaElement = (0, import_react.useCallback)(() => {
-    if (typeof document === "undefined") return null;
-    const current = textAreaRef.current;
-    if (!current) return null;
-    if (current instanceof HTMLTextAreaElement) return current;
-    if ("textarea" in current && current.textarea instanceof HTMLTextAreaElement) {
-      return current.textarea;
-    }
-    if ("_textarea" in current && current._textarea instanceof HTMLTextAreaElement) {
-      return current._textarea;
-    }
-    if (current instanceof HTMLElement) {
-      const nested = current.querySelector("textarea");
-      return nested instanceof HTMLTextAreaElement ? nested : null;
-    }
-    return null;
-  }, []);
   const getCaretClientRect = (0, import_react.useCallback)(() => {
     const fallback = DOMRect.fromRect({
       x: 0,
@@ -429,54 +466,66 @@ function MentionInput(props) {
     borderRadius: panel.dropdownRadius,
     borderWidth: panel.hasBorder ? panel.knobProps.borderRadius.borderWidth : 0,
     borderColor: panel.hasBorder ? import_colorRamps.formInputColors.border.focus : "transparent",
-    paddingVertical: 0,
+    padding: 0,
     maxHeight: suggestionsMaxHeight,
     minWidth: suggestionsMinWidth,
     role: "listbox",
     id: suggestionListId,
-    "aria-label": "Suggestions",
+    "aria-label": (0, import_t.t)("Suggestions"),
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
       direction: "up",
       scrollRef: panel.refs.floating,
       visible: panel.arrowUp,
       arrowScrollDirRef: panel.arrowScrollDirRef
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.View, {
-      ...panel.knobProps.panelPadding,
-      children: suggestions.map((item, index) => {
-        const optionId = `${id}-option-${item.id}`;
-        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(MentionSuggestionItem, {
-          ...knobProps.gap,
-          selected: index === selectedIndex,
-          onPress: () => handleSuggestionPress(item),
-          role: "option",
-          id: optionId,
-          "aria-selected": index === selectedIndex,
-          children: [item.avatar && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.Avatar, {
+    }), suggestions.map((item, index) => {
+      const optionId = `${id}-option-${item.id}`;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(MentionSuggestionItem, {
+        ref: node => {
+          itemRefs.current[index] = node;
+        },
+        selected: index === selectedIndex,
+        onPress: () => handleSuggestionPress(item),
+        onMouseEnter: () => setSelectedIndex(index),
+        role: "option",
+        id: optionId,
+        "aria-selected": index === selectedIndex,
+        children: [suggestionsHaveMedia && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.YStack, {
+          width: MEDIA_SLOT,
+          height: MEDIA_SLOT,
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.Avatar, {
             size: "$2",
             circular: true,
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Image, {
+            children: [item.avatar ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Image, {
               src: item.avatar
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Fallback, {
+            }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Fallback, {
               backgroundColor: import_colorRamps.formInputColors.background.focus,
+              justifyContent: "center",
+              alignItems: "center",
               children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+                fontSize: helperFontSizeMap[knobProps.sizeToken] ?? "$2",
                 children: item.display[0]
               })
             })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
-            flex: 1,
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
-              fontSize: knobProps.sizeToken,
-              ...knobProps.body,
-              children: item.display
-            }), item.description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
-              fontSize: knobProps.sizeToken,
-              color: "$colorHover",
-              ...knobProps.body,
-              children: item.description
-            })]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+          flex: 1,
+          minWidth: 0,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+            fontSize: knobProps.sizeToken,
+            ...knobProps.body,
+            fontWeight: "600",
+            children: item.display
+          }), item.description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+            fontSize: helperFontSizeMap[knobProps.sizeToken] ?? "$2",
+            color: import_colorRamps.formCommonColors.muted,
+            ...knobProps.body,
+            children: item.description
           })]
-        }, item.id);
-      })
+        })]
+      }, item.id);
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
       direction: "down",
       scrollRef: panel.refs.floating,
@@ -510,6 +559,9 @@ function MentionInput(props) {
     textAreaRef,
     textAreaProps: {
       onSelectionChange: handleSelectionChange,
+      ...(import_tamagui2.isWeb ? {
+        onSelect: handleWebSelect
+      } : {}),
       onKeyDown: handleKeyDown,
       "aria-haspopup": "listbox",
       "aria-expanded": hasSuggestions,

package/dist/cjs/fields/MentionInput/index.native.js

@@ -32,6 +32,7 @@ var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_tamagui2 = require("tamagui");
 var import_react2 = require("@floating-ui/react");
+var import_theme = require("@multiplatform.one/theme");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_floatingList = require("../../shared/floatingList.native.js");
 var import_Skeleton = require("../../Skeleton/index.native.js");
@@ -39,6 +40,7 @@ var import_zIndex = require("../../shared/zIndex.native.js");
 var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_utils = require("../../shared/utils.native.js");
+var import_t = require("../../shared/t.native.js");
 var import_InputParts = require("../../InputParts/index.native.js");
 var import_TextArea = require("../TextArea/index.native.js");
 function _instanceof(left, right) {
@@ -50,12 +52,18 @@ function _instanceof(left, right) {
     return left instanceof right;
   }
 }
-var estimatedItemHeight = 48;
 var blurCloseDelayMs = 150;
 var zeroWidthSpace = "\u200B";
+var helperFontSizeMap = {
+  $3: "$2",
+  $4: "$3",
+  $5: "$4"
+};
 var MentionSuggestionItem = (0, import_tamagui2.styled)(import_tamagui2.XStack, {
-  padding: "$3",
-  alignItems: "center",
+  name: "MentionSuggestionItem",
+  ...import_theme.menuRowFrame,
+  paddingVertical: "$2",
+  gap: "$2",
   cursor: "pointer",
   hoverStyle: {
     backgroundColor: import_colorRamps.formInputColors.background.focus
@@ -63,7 +71,7 @@ var MentionSuggestionItem = (0, import_tamagui2.styled)(import_tamagui2.XStack,
   variants: {
     selected: {
       true: {
-        backgroundColor: import_colorRamps.formInputColors.background.base
+        backgroundColor: import_colorRamps.formInputColors.background.focus
       },
       false: {
         backgroundColor: "transparent"
@@ -71,17 +79,19 @@ var MentionSuggestionItem = (0, import_tamagui2.styled)(import_tamagui2.XStack,
     }
   }
 });
+var MEDIA_SLOT = 28;
 function MentionInput(props) {
   var _ref, _ref1, _panel_y, _panel_x;
   var {
     defaultValue,
     form,
     mentions = [],
-    placeholder = "Type @ to mention someone",
+    placeholder = (0, import_t.t)("Type @ to mention someone"),
     minHeight: minHeightProp,
     maxHeight: maxHeightProp,
     autoResize = false,
     onMentionSelect,
+    onChange,
     onTextChange,
     textAreaProps,
     mode,
@@ -207,6 +217,11 @@ function MentionInput(props) {
     return showSuggestions && currentTrigger ? getFilteredSuggestions(currentTrigger, searchQuery) : [];
   }, [showSuggestions, currentTrigger, searchQuery, getFilteredSuggestions]);
   var hasSuggestions = suggestions.length > 0;
+  var suggestionsHaveMedia = (0, import_react.useMemo)(function () {
+    return suggestions.some(function (item) {
+      return Boolean(item.avatar);
+    });
+  }, [suggestions]);
   var panel = (0, import_FloatingPanel.useFloatingPanel)({
     open: hasSuggestions,
     onOpenChange: function onOpenChange(nextOpen) {
@@ -253,10 +268,29 @@ function MentionInput(props) {
       prevQueryRef.current = "";
     }
   }, [checkForTrigger]);
+  var getWebTextAreaElement = (0, import_react.useCallback)(function () {
+    if (typeof document === "undefined") return null;
+    var current = textAreaRef.current;
+    if (!current) return null;
+    if (_instanceof(current, HTMLTextAreaElement)) return current;
+    if ("textarea" in current && _instanceof(current.textarea, HTMLTextAreaElement)) {
+      return current.textarea;
+    }
+    if ("_textarea" in current && _instanceof(current._textarea, HTMLTextAreaElement)) {
+      return current._textarea;
+    }
+    if (_instanceof(current, HTMLElement)) {
+      var nested = current.querySelector("textarea");
+      return _instanceof(nested, HTMLTextAreaElement) ? nested : null;
+    }
+    return null;
+  }, []);
   var handleTextChange = (0, import_react.useCallback)(function (newText) {
     var oldText = text;
-    var editPosition = prevCursorRef.current;
     var lengthDiff = newText.length - oldText.length;
+    var webElement = getWebTextAreaElement();
+    var domCaret = webElement && typeof webElement.selectionStart === "number" ? webElement.selectionStart : null;
+    var editPosition = domCaret !== null ? Math.max(0, domCaret - Math.max(0, lengthDiff)) : prevCursorRef.current;
     if (lengthDiff !== 0) {
       setMentionList(function (prev) {
         return prev.map(function (m) {
@@ -277,11 +311,13 @@ function MentionInput(props) {
       });
     }
     setText(newText);
-    var estimatedCursor = Math.max(0, Math.min(editPosition + Math.max(0, lengthDiff), newText.length));
+    var estimatedCursor = domCaret !== null ? domCaret : Math.max(0, Math.min(editPosition + Math.max(0, lengthDiff), newText.length));
+    prevCursorRef.current = estimatedCursor;
     setCursorPosition(estimatedCursor);
     updateTriggerState(newText, estimatedCursor);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newText);
     onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newText);
-  }, [text, updateTriggerState, onTextChange]);
+  }, [text, updateTriggerState, onChange, onTextChange, getWebTextAreaElement]);
   var handleSelectionChange = (0, import_react.useCallback)(function (event) {
     var _event_nativeEvent;
     var selection = event === null || event === void 0 ? void 0 : (_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : _event_nativeEvent.selection;
@@ -291,6 +327,14 @@ function MentionInput(props) {
       updateTriggerState(text, selection.start);
     }
   }, [text, updateTriggerState]);
+  var handleWebSelect = (0, import_react.useCallback)(function () {
+    var el = getWebTextAreaElement();
+    if (!el || typeof el.selectionStart !== "number") return;
+    var position = el.selectionStart;
+    prevCursorRef.current = position;
+    setCursorPosition(position);
+    updateTriggerState(el.value, position);
+  }, [getWebTextAreaElement, updateTriggerState]);
   var insertMention = (0, import_react.useCallback)(function (item) {
     if (!currentTrigger) return;
     var triggerInfo = checkForTrigger(text, cursorPosition);
@@ -330,10 +374,16 @@ function MentionInput(props) {
     prevQueryRef.current = "";
     onMentionSelect === null || onMentionSelect === void 0 ? void 0 : onMentionSelect(item, currentTrigger);
     setTimeout(function () {
-      var _textAreaRef_current;
-      return (_textAreaRef_current = textAreaRef.current) === null || _textAreaRef_current === void 0 ? void 0 : _textAreaRef_current.focus();
+      var el = getWebTextAreaElement();
+      if (el) {
+        el.focus();
+        el.setSelectionRange(newCursorPos, newCursorPos);
+      } else {
+        var _textAreaRef_current;
+        (_textAreaRef_current = textAreaRef.current) === null || _textAreaRef_current === void 0 ? void 0 : _textAreaRef_current.focus();
+      }
     }, 0);
-  }, [text, cursorPosition, currentTrigger, checkForTrigger, triggerMap, mentionList, onMentionSelect]);
+  }, [text, cursorPosition, currentTrigger, checkForTrigger, triggerMap, mentionList, onMentionSelect, getWebTextAreaElement]);
   var handleKeyDown = (0, import_react.useCallback)(function (event) {
     var _event_nativeEvent;
     if (!showSuggestions || !currentTrigger || suggestions.length === 0) return;
@@ -367,13 +417,18 @@ function MentionInput(props) {
         break;
     }
   }, [showSuggestions, currentTrigger, suggestions, selectedIndex, insertMention]);
+  var itemRefs = (0, import_react.useRef)([]);
   (0, import_react.useEffect)(function () {
-    if (hasSuggestions && panel.refs.floating.current) {
-      var _panel_refs_floating_current_scrollTo, _panel_refs_floating_current;
-      (_panel_refs_floating_current_scrollTo = (_panel_refs_floating_current = panel.refs.floating.current).scrollTo) === null || _panel_refs_floating_current_scrollTo === void 0 ? void 0 : _panel_refs_floating_current_scrollTo.call(_panel_refs_floating_current, {
-        top: Math.max(0, (selectedIndex - 2) * estimatedItemHeight),
-        behavior: "smooth"
-      });
+    if (!hasSuggestions) return;
+    var floating = panel.refs.floating.current;
+    var item = itemRefs.current[selectedIndex];
+    if (!floating || !(item === null || item === void 0 ? void 0 : item.getBoundingClientRect)) return;
+    var containerRect = floating.getBoundingClientRect();
+    var itemRect = item.getBoundingClientRect();
+    if (itemRect.bottom > containerRect.bottom) {
+      floating.scrollTop += itemRect.bottom - containerRect.bottom;
+    } else if (itemRect.top < containerRect.top) {
+      floating.scrollTop -= containerRect.top - itemRect.top;
     }
   }, [selectedIndex, hasSuggestions, panel.refs.floating]);
   var handleBlurInternal = (0, import_react.useCallback)(function () {
@@ -394,23 +449,6 @@ function MentionInput(props) {
   var activeConfig = currentTrigger ? triggerMap.get(currentTrigger) : null;
   var suggestionsMaxHeight = (_ref = activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.menuHeight) !== null && _ref !== void 0 ? _ref : knobProps.sizeToken === "$3" ? 160 : knobProps.sizeToken === "$5" ? 240 : 200;
   var suggestionsMinWidth = (_ref1 = activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.menuWidth) !== null && _ref1 !== void 0 ? _ref1 : knobProps.sizeToken === "$3" ? 180 : knobProps.sizeToken === "$5" ? 240 : 200;
-  var getWebTextAreaElement = (0, import_react.useCallback)(function () {
-    if (typeof document === "undefined") return null;
-    var current = textAreaRef.current;
-    if (!current) return null;
-    if (_instanceof(current, HTMLTextAreaElement)) return current;
-    if ("textarea" in current && _instanceof(current.textarea, HTMLTextAreaElement)) {
-      return current.textarea;
-    }
-    if ("_textarea" in current && _instanceof(current._textarea, HTMLTextAreaElement)) {
-      return current._textarea;
-    }
-    if (_instanceof(current, HTMLElement)) {
-      var nested = current.querySelector("textarea");
-      return _instanceof(nested, HTMLTextAreaElement) ? nested : null;
-    }
-    return null;
-  }, []);
   var getCaretClientRect = (0, import_react.useCallback)(function () {
     var fallback = DOMRect.fromRect({
       x: 0,
@@ -512,56 +550,79 @@ function MentionInput(props) {
     borderRadius: panel.dropdownRadius,
     borderWidth: panel.hasBorder ? panel.knobProps.borderRadius.borderWidth : 0,
     borderColor: panel.hasBorder ? import_colorRamps.formInputColors.border.focus : "transparent",
-    paddingVertical: 0,
+    // LC-01: container owns only its border — zero padding on all four sides.
+    padding: 0,
     maxHeight: suggestionsMaxHeight,
     minWidth: suggestionsMinWidth,
     role: "listbox",
     id: suggestionListId,
-    "aria-label": "Suggestions",
+    "aria-label": (0, import_t.t)("Suggestions"),
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
       direction: "up",
       scrollRef: panel.refs.floating,
       visible: panel.arrowUp,
       arrowScrollDirRef: panel.arrowScrollDirRef
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.View, {
-      ...panel.knobProps.panelPadding,
-      children: suggestions.map(function (item, index) {
-        var optionId = `${id}-option-${item.id}`;
-        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(MentionSuggestionItem, {
-          ...knobProps.gap,
-          selected: index === selectedIndex,
-          onPress: function onPress() {
-            return handleSuggestionPress(item);
-          },
-          role: "option",
-          id: optionId,
-          "aria-selected": index === selectedIndex,
-          children: [item.avatar && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.Avatar, {
+    }),
+    /* LC-01: rows are direct children of the scroll container — no padded
+    wrapper, the container owns only its border. */
+    suggestions.map(function (item, index) {
+      var _helperFontSizeMap_knobProps_sizeToken, _helperFontSizeMap_knobProps_sizeToken1;
+      var optionId = `${id}-option-${item.id}`;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(MentionSuggestionItem, {
+        ref: function ref(node) {
+          itemRefs.current[index] = node;
+        },
+        selected: index === selectedIndex,
+        onPress: function onPress() {
+          return handleSuggestionPress(item);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return setSelectedIndex(index);
+        },
+        role: "option",
+        id: optionId,
+        "aria-selected": index === selectedIndex,
+        children: [
+        /* LC-08 MEDIA-SLOT-ROW: when any row in the list has media, every
+        row reserves the same fixed slot (initials fallback, centered)
+        so the text columns share one left edge. */
+        suggestionsHaveMedia && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.YStack, {
+          width: MEDIA_SLOT,
+          height: MEDIA_SLOT,
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.Avatar, {
             size: "$2",
             circular: true,
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Image, {
+            children: [item.avatar ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Image, {
               src: item.avatar
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Fallback, {
+            }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Fallback, {
               backgroundColor: import_colorRamps.formInputColors.background.focus,
+              justifyContent: "center",
+              alignItems: "center",
               children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+                fontSize: (_helperFontSizeMap_knobProps_sizeToken = helperFontSizeMap[knobProps.sizeToken]) !== null && _helperFontSizeMap_knobProps_sizeToken !== void 0 ? _helperFontSizeMap_knobProps_sizeToken : "$2",
                 children: item.display[0]
               })
             })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
-            flex: 1,
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
-              fontSize: knobProps.sizeToken,
-              ...knobProps.body,
-              children: item.display
-            }), item.description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
-              fontSize: knobProps.sizeToken,
-              color: "$colorHover",
-              ...knobProps.body,
-              children: item.description
-            })]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+          flex: 1,
+          minWidth: 0,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+            fontSize: knobProps.sizeToken,
+            ...knobProps.body,
+            fontWeight: "600",
+            children: item.display
+          }), item.description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+            fontSize: (_helperFontSizeMap_knobProps_sizeToken1 = helperFontSizeMap[knobProps.sizeToken]) !== null && _helperFontSizeMap_knobProps_sizeToken1 !== void 0 ? _helperFontSizeMap_knobProps_sizeToken1 : "$2",
+            color: import_colorRamps.formCommonColors.muted,
+            ...knobProps.body,
+            children: item.description
           })]
-        }, item.id);
-      })
+        })]
+      }, item.id);
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
       direction: "down",
       scrollRef: panel.refs.floating,
@@ -599,6 +660,9 @@ function MentionInput(props) {
       textAreaRef,
       textAreaProps: {
         onSelectionChange: handleSelectionChange,
+        ...(import_tamagui2.isWeb ? {
+          onSelect: handleWebSelect
+        } : {}),
         onKeyDown: handleKeyDown,
         "aria-haspopup": "listbox",
         "aria-expanded": hasSuggestions,