@multiplatform.one/forms 7.72.0 → 7.73.0

package/dist/cjs/FloatingPanel/iconEcho.cjs

@@ -0,0 +1,104 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var iconEcho_exports = {};
+__export(iconEcho_exports, {
+  ICON_ECHO_TEST_ID: () => ICON_ECHO_TEST_ID,
+  iconEchoElement: () => iconEchoElement,
+  iconEchoOverlays: () => iconEchoOverlays
+});
+module.exports = __toCommonJS(iconEcho_exports);
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_circleGlyph = require("../Button/circleGlyph.cjs");
+var import_t = require("../shared/t.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ICON_ECHO_TEST_ID = "floating-panel-icon-echo";
+const DROPPED_PROPS = ["id", "onLongPress", "onKeyDown", "onContextMenu", "aria-haspopup", "aria-expanded", "aria-controls", "aria-describedby", "tooltip"];
+function iconEchoOverlays(kind, up) {
+  return kind === "close" && !up;
+}
+function iconEchoElement(trigger, kind, onClose, surface) {
+  const echo = echoOf(trigger, kind, onClose);
+  if (echo == null || !surface) return echo;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.SurfaceContext.Provider, {
+    ...surface,
+    children: echo
+  });
+}
+function echoOf(trigger, _kind, onClose) {
+  if (!(0, import_react2.isValidElement)(trigger)) return null;
+  const props = trigger.props;
+  const label = (0, import_t.t)("Close");
+  const dropped = Object.fromEntries(DROPPED_PROPS.map(name => [name, void 0]));
+  if (props.icon != null) {
+    return (0, import_react2.cloneElement)(trigger, {
+      ...dropped,
+      ref: null,
+      icon: import_react.XIcon,
+      "aria-label": label,
+      onPress: onClose,
+      testID: ICON_ECHO_TEST_ID,
+      "data-testid": ICON_ECHO_TEST_ID
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CircleClose, {
+    label,
+    onClose
+  });
+}
+const avatarPlate = "$selectedBackground";
+const circleGlyphFallbackPx = 18;
+function CircleClose({
+  label,
+  onClose
+}) {
+  const theme = (0, import_tamagui.useTheme)();
+  const [side, setSide] = (0, import_react2.useState)(0);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    role: "button",
+    "aria-label": label,
+    tabIndex: 0,
+    cursor: "pointer",
+    width: "100%",
+    height: "100%",
+    borderRadius: 1e5,
+    backgroundColor: avatarPlate,
+    alignItems: "center",
+    justifyContent: "center",
+    pressStyle: {
+      opacity: 0.6
+    },
+    onPress: onClose,
+    onLayout: event => setSide(Math.min(event.nativeEvent.layout.width, event.nativeEvent.layout.height)),
+    testID: ICON_ECHO_TEST_ID,
+    "data-testid": ICON_ECHO_TEST_ID,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+      size: side > 0 ? Math.round(side * import_circleGlyph.ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx,
+      weight: "bold",
+      color: theme.selectedColor?.val ?? theme.color?.val,
+      "aria-hidden": true
+    })
+  });
+}

package/dist/cjs/FloatingPanel/iconEcho.native.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var iconEcho_exports = {};
+__export(iconEcho_exports, {
+  ICON_ECHO_TEST_ID: () => ICON_ECHO_TEST_ID,
+  iconEchoElement: () => iconEchoElement,
+  iconEchoOverlays: () => iconEchoOverlays
+});
+module.exports = __toCommonJS(iconEcho_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_circleGlyph = require("../Button/circleGlyph.native.js");
+var import_t = require("../shared/t.native.js");
+var ICON_ECHO_TEST_ID = "floating-panel-icon-echo";
+var DROPPED_PROPS = ["id", "onLongPress", "onKeyDown", "onContextMenu", "aria-haspopup", "aria-expanded", "aria-controls", "aria-describedby", "tooltip"];
+function iconEchoOverlays(kind, up) {
+  return kind === "close" && !up;
+}
+function iconEchoElement(trigger, kind, onClose, surface) {
+  var echo = echoOf(trigger, kind, onClose);
+  if (echo == null || !surface) return echo;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.SurfaceContext.Provider, {
+    ...surface,
+    children: echo
+  });
+}
+function echoOf(trigger, _kind, onClose) {
+  if (! /* @__PURE__ */(0, import_react2.isValidElement)(trigger)) return null;
+  var props = trigger.props;
+  var label = (0, import_t.t)("Close");
+  var dropped = Object.fromEntries(DROPPED_PROPS.map(function (name) {
+    return [name, void 0];
+  }));
+  if (props.icon != null) {
+    return /* @__PURE__ */(0, import_react2.cloneElement)(trigger, {
+      ...dropped,
+      ref: null,
+      icon: import_react.XIcon,
+      "aria-label": label,
+      onPress: onClose,
+      testID: ICON_ECHO_TEST_ID,
+      "data-testid": ICON_ECHO_TEST_ID
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CircleClose, {
+    label,
+    onClose
+  });
+}
+var avatarPlate = "$selectedBackground";
+var circleGlyphFallbackPx = 18;
+function CircleClose(param) {
+  var {
+    label,
+    onClose
+  } = param;
+  var _ref;
+  var _theme_selectedColor, _theme_color;
+  var theme = (0, import_tamagui.useTheme)();
+  var [side, setSide] = (0, import_react2.useState)(0);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    role: "button",
+    "aria-label": label,
+    tabIndex: 0,
+    cursor: "pointer",
+    width: "100%",
+    height: "100%",
+    borderRadius: 1e5,
+    backgroundColor: avatarPlate,
+    alignItems: "center",
+    justifyContent: "center",
+    pressStyle: {
+      opacity: 0.6
+    },
+    onPress: onClose,
+    onLayout: function onLayout(event) {
+      return setSide(Math.min(event.nativeEvent.layout.width, event.nativeEvent.layout.height));
+    },
+    testID: ICON_ECHO_TEST_ID,
+    "data-testid": ICON_ECHO_TEST_ID,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+      size: side > 0 ? Math.round(side * import_circleGlyph.ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx,
+      weight: "bold",
+      color: (_ref = (_theme_selectedColor = theme.selectedColor) === null || _theme_selectedColor === void 0 ? void 0 : _theme_selectedColor.val) !== null && _ref !== void 0 ? _ref : (_theme_color = theme.color) === null || _theme_color === void 0 ? void 0 : _theme_color.val,
+      "aria-hidden": true
+    })
+  });
+}
+//# sourceMappingURL=iconEcho.native.js.map

package/dist/cjs/FloatingPanel/iconEcho.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","iconEcho_exports","ICON_ECHO_TEST_ID","iconEchoElement","iconEchoOverlays","module","exports","import_jsx_runtime","require","import_react","import_react2","import_theme","import_tamagui","import_circleGlyph","import_t","DROPPED_PROPS","kind","up","trigger","onClose","surface","echo","echoOf","jsx","SurfaceContext","Provider","children","_kind","isValidElement","props","label","t","dropped","fromEntries","map","icon","cloneElement","ref","XIcon","onPress","testID","CircleClose","avatarPlate","circleGlyphFallbackPx","param","_ref","_theme_selectedColor","_theme_color","theme","useTheme","side","setSide","useState","View","role","tabIndex","cursor","width","height","borderRadius","backgroundColor","alignItems","justifyContent","pressStyle","opacity","onLayout","event","Math","min","nativeEvent","layout","size","round","ICON_BUTTON_CIRCLE_GLYPH_RATIO","weight","color","selectedColor","val"],"sources":["iconEcho.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar iconEcho_exports = {};\n__export(iconEcho_exports, {\n  ICON_ECHO_TEST_ID: () => ICON_ECHO_TEST_ID,\n  iconEchoElement: () => iconEchoElement,\n  iconEchoOverlays: () => iconEchoOverlays\n});\nmodule.exports = __toCommonJS(iconEcho_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_react = require(\"@phosphor-icons/react\");\nvar import_react2 = require(\"react\");\nvar import_theme = require(\"@multiplatform.one/theme\");\nvar import_tamagui = require(\"tamagui\");\nvar import_circleGlyph = require(\"../Button/circleGlyph\");\nvar import_t = require(\"../shared/t\");\nvar ICON_ECHO_TEST_ID = \"floating-panel-icon-echo\";\nvar DROPPED_PROPS = [\n  \"id\",\n  \"onLongPress\",\n  \"onKeyDown\",\n  \"onContextMenu\",\n  \"aria-haspopup\",\n  \"aria-expanded\",\n  \"aria-controls\",\n  \"aria-describedby\",\n  \"tooltip\"\n];\nfunction iconEchoOverlays(kind, up) {\n  return kind === \"close\" && !up;\n}\nfunction iconEchoElement(trigger, kind, onClose, surface) {\n  var echo = echoOf(trigger, kind, onClose);\n  if (echo == null || !surface) return echo;\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_theme.SurfaceContext.Provider, {\n    ...surface,\n    children: echo\n  });\n}\nfunction echoOf(trigger, _kind, onClose) {\n  if (!/* @__PURE__ */ (0, import_react2.isValidElement)(trigger)) return null;\n  var props = trigger.props;\n  var label = (0, import_t.t)(\"Close\");\n  var dropped = Object.fromEntries(DROPPED_PROPS.map(function(name) {\n    return [\n      name,\n      void 0\n    ];\n  }));\n  if (props.icon != null) {\n    return /* @__PURE__ */ (0, import_react2.cloneElement)(trigger, {\n      ...dropped,\n      ref: null,\n      icon: import_react.XIcon,\n      \"aria-label\": label,\n      onPress: onClose,\n      testID: ICON_ECHO_TEST_ID,\n      \"data-testid\": ICON_ECHO_TEST_ID\n    });\n  }\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleClose, {\n    label,\n    onClose\n  });\n}\nvar avatarPlate = \"$selectedBackground\";\nvar circleGlyphFallbackPx = 18;\nfunction CircleClose(param) {\n  var { label, onClose } = param;\n  var _ref;\n  var _theme_selectedColor, _theme_color;\n  var theme = (0, import_tamagui.useTheme)();\n  var [side, setSide] = (0, import_react2.useState)(0);\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.View, {\n    role: \"button\",\n    \"aria-label\": label,\n    tabIndex: 0,\n    cursor: \"pointer\",\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 1e5,\n    backgroundColor: avatarPlate,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    pressStyle: {\n      opacity: 0.6\n    },\n    onPress: onClose,\n    onLayout: function onLayout(event) {\n      return setSide(Math.min(event.nativeEvent.layout.width, event.nativeEvent.layout.height));\n    },\n    testID: ICON_ECHO_TEST_ID,\n    \"data-testid\": ICON_ECHO_TEST_ID,\n    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.XIcon, {\n      size: side > 0 ? Math.round(side * import_circleGlyph.ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx,\n      weight: \"bold\",\n      color: (_ref = (_theme_selectedColor = theme.selectedColor) === null || _theme_selectedColor === void 0 ? void 0 : _theme_selectedColor.val) !== null && _ref !== void 0 ? _ref : (_theme_color = theme.color) === null || _theme_color === void 0 ? void 0 : _theme_color.val,\n      \"aria-hidden\": true\n    })\n  });\n}\n//# sourceMappingURL=iconEcho.js.map\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/FloatingPanel/index.cjs

@@ -53,6 +53,9 @@ var import_overlayStack = require("../shared/overlayStack.cjs");
 var import_compactFace = require("./compactFace.cjs");
 var import_nestedAction = require("./nestedAction.cjs");
 var import_PanelPortal = require("./PanelPortal.cjs");
+var import_echoContext = require("./echoContext.cjs");
+var import_iconEcho = require("./iconEcho.cjs");
+var import_paintedBox = require("./paintedBox.cjs");
 var import_pointAnchor = require("./pointAnchor.cjs");
 var import_nestedAction2 = require("./nestedAction.cjs");
 var import_useFloatingPanel2 = require("./useFloatingPanel.cjs");
@@ -265,6 +268,76 @@ function placeEchoOverTrigger(panelElement, geometry, {
     }
   }
 }
+function IconEchoRow({
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-fp-icon-echo": "",
+    flexShrink: 0,
+    alignSelf: "stretch",
+    pointerEvents: "box-none",
+    style: {
+      order: -1,
+      position: "sticky",
+      zIndex: 1
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      "data-fp-icon-echo-box": "",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+      children
+    })
+  });
+}
+function placeIconEcho(panelElement, {
+  offset,
+  width,
+  height,
+  up,
+  overlay,
+  group = null
+}) {
+  const row = panelElement.querySelector("[data-fp-icon-echo]");
+  const box = row?.querySelector("[data-fp-icon-echo-box]");
+  if (!row || !box) return;
+  const frame = getComputedStyle(panelElement);
+  const border = side => parseFloat(frame[`border${side}Width`] || "0") || 0;
+  const rtl = panelElement.dir === "rtl";
+  row.style.order = up ? "1" : "-1";
+  row.style.height = `${height}px`;
+  row.style.backgroundColor = overlay ? "transparent" : frame.backgroundColor;
+  if (up) {
+    row.style.top = "";
+    row.style.marginTop = "";
+    row.style.marginBottom = `${-border("Bottom")}px`;
+    row.style.bottom = row.style.marginBottom;
+  } else {
+    row.style.bottom = "";
+    row.style.marginTop = `${-border("Top")}px`;
+    row.style.marginBottom = overlay ? `${-(height - border("Top"))}px` : "";
+    row.style.top = row.style.marginTop;
+  }
+  row.setAttribute("data-fp-icon-echo", overlay ? "overlay" : "band");
+  if (group) {
+    row.style.height = `${group.height}px`;
+    if (!up && overlay) row.style.marginBottom = `${-(group.height - border("Top"))}px`;
+  }
+  row.style.marginLeft = `${-border("Left")}px`;
+  row.style.marginRight = `${-border("Right")}px`;
+  box.style.width = `${width}px`;
+  box.style.height = `${height}px`;
+  box.style.marginLeft = rtl ? "" : `${offset}px`;
+  box.style.marginRight = rtl ? `${offset}px` : "";
+  box.style.alignSelf = "flex-start";
+  box.style.marginTop = group ? `${group.top}px` : "";
+  box.style.position = "relative";
+  box.style.zIndex = "1";
+}
+function layoutParentOf(element) {
+  let parent = element?.parentElement ?? null;
+  while (parent && getComputedStyle(parent).display === "contents") parent = parent.parentElement;
+  return parent;
+}
 const overlayFloatBreakpoint = import_theme2.OVERLAY_BREAKPOINT;
 function subscribeViewport(listener) {
   if (!import_tamagui.isWeb || typeof window === "undefined") return () => {};
@@ -457,6 +530,7 @@ function FloatingPanelWeb({
   cover = true,
   triggerEcho = true,
   coverAlign = "start",
+  iconEcho,
   triggerRow,
   anchorRect,
   clampCollisions = false,
@@ -466,6 +540,11 @@ function FloatingPanelWeb({
   const [collisionSheet, setCollisionSheet] = (0, import_react.useState)(false);
   const isFill = sizing === "fill";
   const isContextMenu = openOn === "contextmenu";
+  const pointMenu = isContextMenu && sheetProps.anchorMode !== "cover-trigger";
+  const showIconEcho = cover && !pointMenu && iconEcho != null;
+  const triggerSurface = import_theme2.SurfaceContext.useStyledContext();
+  const iconEchoUpRef = (0, import_react.useRef)(false);
+  const [echoBox, setEchoBox] = (0, import_react.useState)(null);
   const overlayStyleRef = (0, import_react.useRef)(null);
   const pinnedTopRef = (0, import_react.useRef)(0);
   const pinnedHeightRef = (0, import_react.useRef)(0);
@@ -497,10 +576,10 @@ function FloatingPanelWeb({
     wheelGrowRef: isFill ? void 0 : grownRef,
     widthMode: widthMode ?? (isContextMenu && fitContent === void 0 ? "fit-content" : void 0),
     fitContent,
-    freeOverlay: isContextMenu,
+    freeOverlay: pointMenu,
     cover,
     panelWidth,
-    echo: cover && triggerEcho && !isContextMenu,
+    echo: cover && triggerEcho && !pointMenu,
     onBeforeOpen: resetPosition
   });
   (0, import_focusManagement.useReturnFocusOnClose)(open, skipReturnFocusRef, panel.refs.floating);
@@ -524,7 +603,7 @@ function FloatingPanelWeb({
     if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
       dropdownElement.scrollTop = 0;
     }
-    const point = isContextMenu ? anchorPointRef.current ?? (0, import_pointAnchor.referenceCornerPoint)(trig, isRtl()) : null;
+    const point = pointMenu ? anchorPointRef.current ?? (0, import_pointAnchor.referenceCornerPoint)(trig, isRtl()) : null;
     const measured = anchorRect ? {
       ...anchorRect,
       top: anchorRect.y,
@@ -553,6 +632,9 @@ function FloatingPanelWeb({
       const viewportRight = viewportLeft + (viewport?.width ?? (document.documentElement.clientWidth || window.innerWidth));
       const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
       dropdownElement.style.left = `${viewportLeft - containingBlock.left}px`;
+      const groupSurface = showIconEcho ? (0, import_paintedBox.groupSurfaceOf)(trig) : null;
+      const groupBox = groupSurface?.getBoundingClientRect() ?? null;
+      if (showIconEcho) dropdownElement.style.minWidth = groupBox ? `${groupBox.width}px` : "";
       const layoutStyle = getComputedStyle(dropdownElement);
       const scale = layoutStyle.transform && layoutStyle.transform !== "none" && typeof DOMMatrixReadOnly !== "undefined" ? Math.abs(new DOMMatrixReadOnly(layoutStyle.transform).a) : 1;
       const layoutWidth = dropdownElement.getBoundingClientRect().width / (scale || 1);
@@ -591,7 +673,35 @@ function FloatingPanelWeb({
       const neededHeight = sheetProps.scrollable ? Math.min(totalContentHeight, measured.height + firstActionHeight + bodyPadding + totalBorderWidth) : totalContentHeight;
       let placedTop = measured.top;
       let placedLeft = left;
-      if (measured.width > 0 && measured.height > 0 && (!slides && (left < viewportLeft || left + width > Math.max(measured.right, viewportRight - import_useFloatingPanel.panelViewportPadding)) || measured.right > viewportRight || measured.top < viewportTop || measured.top + Math.max(neededHeight, measured.height) > viewportBottom - import_useFloatingPanel.panelViewportPadding)) {
+      let placedMaxHeight = null;
+      iconEchoUpRef.current = false;
+      if (showIconEcho && measured.width > 0 && measured.height > 0) {
+        const painted = groupBox ?? (0, import_paintedBox.paintedTriggerBox)(trig, measured);
+        const placed = (0, import_pointAnchor.placeOverTrigger)({
+          trigger: {
+            x: painted.left,
+            y: groupBox ? groupBox.top : measured.top,
+            width: painted.right - painted.left,
+            height: groupBox ? groupBox.height : measured.height
+          },
+          width,
+          height: totalContentHeight,
+          bounds: {
+            top: viewportTop + import_useFloatingPanel.panelViewportPadding,
+            left: viewportLeft + import_useFloatingPanel.panelViewportPadding,
+            right: viewportRight - import_useFloatingPanel.panelViewportPadding,
+            bottom: viewportBottom - import_useFloatingPanel.panelViewportPadding
+          },
+          rtl,
+          align: coverAlign,
+          pinned: true
+        });
+        placedTop = placed.top;
+        if (!slides) placedLeft = placed.left;
+        alignEnd = placed.end;
+        placedMaxHeight = placed.maxHeight;
+        iconEchoUpRef.current = placed.up;
+      } else if (measured.width > 0 && measured.height > 0 && (!slides && (left < viewportLeft || left + width > Math.max(measured.right, viewportRight - import_useFloatingPanel.panelViewportPadding)) || measured.right > viewportRight || measured.top < viewportTop || measured.top + Math.max(neededHeight, measured.height) > viewportBottom - import_useFloatingPanel.panelViewportPadding)) {
         if (!clampCollisions && !iconCover) {
           dropdownElement.style.visibility = "hidden";
           setCollisionSheet(true);
@@ -620,6 +730,33 @@ function FloatingPanelWeb({
         alignEnd = placed.end;
       }
       coverAlignEndRef.current = alignEnd;
+      const echoStart = (0, import_panelWidth.echoOffset)({
+        triggerLeft: measured.left,
+        triggerRight: measured.right,
+        panelLeft: placedLeft,
+        panelWidth: width,
+        rtl
+      });
+      const echoOverlays = iconEcho != null && (0, import_iconEcho.iconEchoOverlays)(iconEcho, iconEchoUpRef.current);
+      const nextEchoBox = showIconEcho && echoOverlays ? (0, import_echoContext.echoHeaderBox)({
+        offset: echoStart,
+        width: measured.width,
+        height: measured.height,
+        panelWidth: width,
+        rtl
+      }) : null;
+      setEchoBox(previous => (0, import_echoContext.sameEchoBox)(previous, nextEchoBox) ? previous : nextEchoBox);
+      placeIconEcho(dropdownElement, {
+        offset: echoStart,
+        width: measured.width,
+        height: measured.height,
+        up: iconEchoUpRef.current,
+        overlay: echoOverlays,
+        group: groupSurface && groupBox ? {
+          top: measured.top - groupBox.top,
+          height: groupBox.height
+        } : null
+      });
       placeEchoOverTrigger(dropdownElement, {
         triggerLeft: measured.left,
         triggerRight: measured.right,
@@ -631,12 +768,12 @@ function FloatingPanelWeb({
       });
       const top2 = placedTop - containingBlock.top;
       const cssLeft2 = placedLeft - containingBlock.left;
-      const maxHeight = Math.max(0, viewportBottom - import_useFloatingPanel.panelViewportPadding - placedTop);
+      const maxHeight = placedMaxHeight ?? Math.max(0, viewportBottom - import_useFloatingPanel.panelViewportPadding - placedTop);
       dropdownElement.style.top = `${top2}px`;
       dropdownElement.style.left = `${cssLeft2}px`;
       dropdownElement.style.maxHeight = `${maxHeight}px`;
       dropdownElement.dir = rtl ? "rtl" : "ltr";
-      dropdownElement.style.transformOrigin = rtl !== alignEnd ? "top right" : "top left";
+      dropdownElement.style.transformOrigin = `${iconEchoUpRef.current ? "bottom" : "top"} ${rtl !== alignEnd ? "right" : "left"}`;
       dropdownElement.style.visibility = "visible";
       overlayStyleRef.current = {
         top: top2,
@@ -767,7 +904,7 @@ function FloatingPanelWeb({
         });
       }
     });
-  }, [isFill, isContextMenu, cover, anchorRect, clampCollisions, sheetProps.scrollable, triggerEcho, coverAlign, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
+  }, [isFill, isContextMenu, pointMenu, showIconEcho, cover, anchorRect, clampCollisions, sheetProps.scrollable, triggerEcho, coverAlign, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
   repositionFnRef.current = repositionOverlay;
   const click = (0, import_react2.useClick)(panel.context, {
     event: "mousedown",
@@ -813,7 +950,7 @@ function FloatingPanelWeb({
   const handleScroll = (0, import_react.useCallback)(event => {
     const el = event.target;
     panel.updateArrows(el);
-    if (isFill || cover && !isContextMenu) return;
+    if (isFill || cover && !pointMenu) return;
     if (panel.initializingRef.current) {
       lastScrollTopRef.current = el.scrollTop;
       return;
@@ -836,7 +973,7 @@ function FloatingPanelWeb({
       grownRef.current = true;
       repositionFnRef.current?.();
     }
-  }, [isFill, cover, isContextMenu, panel.updateArrows]);
+  }, [isFill, cover, pointMenu, panel.updateArrows]);
   const webTransition = panel.panelTransition;
   const {
     style: elevatedSurfaceStyle,
@@ -878,6 +1015,17 @@ function FloatingPanelWeb({
       onContextMenu: openFromContextMenu
     } : {})
   });
+  const contentSized = sheetProps.triggerSizing === "content";
+  const [hugSelf, setHugSelf] = (0, import_react.useState)(contentSized ? "flex-start" : void 0);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!contentSized) {
+      setHugSelf(void 0);
+      return;
+    }
+    const parent = layoutParentOf(panel.triggerRef.current);
+    const align = parent ? getComputedStyle(parent).alignItems : "stretch";
+    setHugSelf(align === "stretch" || align === "normal" ? "flex-start" : void 0);
+  }, [contentSized, panel.triggerRef]);
   for (const name of ["onMouseDown", "onClick", "onKeyDown", "onKeyUp"]) {
     const handler = referenceProps[name];
     if (typeof handler === "function") {
@@ -891,7 +1039,7 @@ function FloatingPanelWeb({
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       ...referenceProps,
-      alignSelf: sheetProps.triggerSizing === "content" ? "flex-start" : void 0,
+      alignSelf: hugSelf,
       cursor: disabled ? "not-allowed" : "pointer",
       opacity: disabled ? 0.5 : 1,
       "data-fp-reference": "",
@@ -920,7 +1068,7 @@ function FloatingPanelWeb({
               scrollbarWidth: "none",
               zIndex: panelZIndex,
               overflow: "auto",
-              ...(cover && !isContextMenu ? {
+              ...(cover && !pointMenu ? {
                 overflowX: "hidden"
               } : {}),
               ...panel.floatingStyleRef.current,
@@ -933,7 +1081,7 @@ function FloatingPanelWeb({
               // then positions against this box and is clipped by its scroll.
               transform: panel.visible ? "none" : "scale(0.96)",
               transition: webTransition,
-              transformOrigin: cover && !isContextMenu ? isRtl(panel.triggerRef.current) !== coverAlignEndRef.current ? "top right" : "top left" : panelTransformOrigin(pointPlacementRef.current ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}` : panel.placement)
+              transformOrigin: cover && !pointMenu ? `${iconEchoUpRef.current ? "bottom" : "top"} ${isRtl(panel.triggerRef.current) !== coverAlignEndRef.current ? "right" : "left"}` : panelTransformOrigin(pointPlacementRef.current ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}` : panel.placement)
             },
             onScroll: handleScroll,
             onTransitionEnd: event => {
@@ -950,7 +1098,7 @@ function FloatingPanelWeb({
           borderRadius: panel.dropdownRadius,
           paddingVertical: 0,
           paddingBottom: panel.coverCornerInset || 0,
-          children: [isContextMenu || !cover || !triggerEcho ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerEchoRow, {
+          children: [pointMenu || !cover || !triggerEcho || showIconEcho ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerEchoRow, {
             sourceRef: panel.triggerRef,
             source: trigger,
             anchorRect,
@@ -967,14 +1115,19 @@ function FloatingPanelWeb({
             ...(contentPadding !== "none" ? panel.knobProps.gapLg : void 0),
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_overlayStack.OverlayStackProvider, {
               zIndex: panelZIndex,
-              children
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_echoContext.PanelIconEchoBoxContext.Provider, {
+                value: echoBox,
+                children
+              })
             })
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
             direction: "down",
             scrollRef: panel.refs.floating,
             visible: panel.arrowDown,
             arrowScrollDirRef: panel.arrowScrollDirRef
-          })]
+          }), showIconEcho && iconEcho ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconEchoRow, {
+            children: (0, import_iconEcho.iconEchoElement)(trigger, iconEcho, () => onOpenChange(false), triggerSurface)
+          }) : null]
         })
       })
     })]