@multiplatform.one/forms 7.72.0 → 7.74.0

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":["__toCommonJS","mod","__copyProps","__defProp","value","iconEcho_exports","__export","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","Object","fromEntries","map","name","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"],"sources":["../../../src/FloatingPanel/iconEcho.tsx"],"sourcesContent":[null],"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]
         })
       })
     })]

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

@@ -56,6 +56,7 @@ var import_pointAnchor = require("./pointAnchor.native.js");
 var import_RegularPanel = require("./RegularPanel.native.js");
 var import_useFloatingPanel = require("./useFloatingPanel.native.js");
 var import_trailingAction = require("./trailingAction.native.js");
+var import_iconEcho = require("./iconEcho.native.js");
 var import_useFloatingPanel2 = require("./useFloatingPanel.native.js");
 var import_nestedAction = require("./nestedAction.native.js");
 function useViewportGtSm() {
@@ -88,6 +89,7 @@ function FloatingPanel(param) {
     triggerRow,
     triggerEcho = true,
     coverAlign = "start",
+    iconEcho,
     anchorMode,
     panelWidth = "content",
     sheet,
@@ -100,6 +102,7 @@ function FloatingPanel(param) {
   } = (0, import_theme2.useResolvedKnobs)({
     painted: false
   });
+  var triggerSurface = import_theme2.SurfaceContext.useStyledContext();
   var windowZIndex = (0, import_overlayStack.useOverlayZIndex)("sheet");
   var children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme2.Surface, {
     painted: false,
@@ -515,8 +518,10 @@ function FloatingPanel(param) {
             right: windowWidth - ((_ref4 = safeArea === null || safeArea === void 0 ? void 0 : safeArea.right) !== null && _ref4 !== void 0 ? _ref4 : 0) - import_useFloatingPanel.panelViewportPadding,
             bottom: windowHeight - Math.max((_ref5 = safeArea === null || safeArea === void 0 ? void 0 : safeArea.bottom) !== null && _ref5 !== void 0 ? _ref5 : 0, keyboardInset) - import_useFloatingPanel.panelViewportPadding
           },
-          echo: triggerEcho ? triggerRow !== null && triggerRow !== void 0 ? triggerRow : trigger : null,
+          echo: triggerEcho && !iconEcho ? triggerRow !== null && triggerRow !== void 0 ? triggerRow : trigger : null,
           echoLabel: triggerA11y === null || triggerA11y === void 0 ? void 0 : triggerA11y.label,
+          iconEcho: iconEcho && anchorMode !== "attach" ? (0, import_iconEcho.iconEchoElement)(trigger, iconEcho, close, triggerSurface) : null,
+          iconEchoKind: iconEcho,
           coverAlign: anchorMode === "attach" ? "start" : coverAlign,
           panelWidth,
           triggerRadius: anchorMode === "attach" ? null : triggerRadius,
@@ -674,6 +679,8 @@ function TriggerMenuPanel(param) {
     bounds,
     echo,
     echoLabel,
+    iconEcho = null,
+    iconEchoKind = "menu",
     coverAlign,
     panelWidth,
     triggerRadius,
@@ -683,7 +690,7 @@ function TriggerMenuPanel(param) {
     onClose,
     children
   } = param;
-  var _ref, _ref1, _ref2, _ref3, _ref4;
+  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
   var {
     knobProps
   } = (0, import_theme2.useResolvedKnobs)({
@@ -712,11 +719,13 @@ function TriggerMenuPanel(param) {
     height: size.height,
     bounds: room,
     rtl: import_react_native.I18nManager.isRTL,
-    align: coverAlign
+    align: coverAlign,
+    pinned: iconEcho != null
   }) : null;
   var half = anchor ? Math.min(anchor.width, anchor.height) / 2 : void 0;
   var radius = triggerRadius != null && half != null ? Math.min(triggerRadius, half) : coverAlign === "auto" && half ? half : void 0;
   var borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
+  var echoOverlays = (0, import_iconEcho.iconEchoOverlays)(iconEchoKind, (_ref2 = placement === null || placement === void 0 ? void 0 : placement.up) !== null && _ref2 !== void 0 ? _ref2 : false);
   var echoShift = anchor && placement ? (0, import_panelWidth.echoOffset)({
     triggerLeft: anchor.x,
     triggerRight: anchor.x + anchor.width,
@@ -746,10 +755,10 @@ function TriggerMenuPanel(param) {
       },
       style: {
         position: "absolute",
-        left: (_ref2 = placement === null || placement === void 0 ? void 0 : placement.left) !== null && _ref2 !== void 0 ? _ref2 : bounds.left,
-        top: (_ref3 = placement === null || placement === void 0 ? void 0 : placement.top) !== null && _ref3 !== void 0 ? _ref3 : bounds.top,
+        left: (_ref3 = placement === null || placement === void 0 ? void 0 : placement.left) !== null && _ref3 !== void 0 ? _ref3 : bounds.left,
+        top: (_ref4 = placement === null || placement === void 0 ? void 0 : placement.top) !== null && _ref4 !== void 0 ? _ref4 : bounds.top,
         ...widthBox,
-        maxHeight: (_ref4 = placement === null || placement === void 0 ? void 0 : placement.maxHeight) !== null && _ref4 !== void 0 ? _ref4 : bounds.bottom - bounds.top,
+        maxHeight: (_ref5 = placement === null || placement === void 0 ? void 0 : placement.maxHeight) !== null && _ref5 !== void 0 ? _ref5 : bounds.bottom - bounds.top,
         opacity: placement ? 1 : 0
       },
       children: (
@@ -805,6 +814,12 @@ function TriggerMenuPanel(param) {
                 children: echo
               })
             })
+          }) : null, iconEcho != null && anchor && !(placement === null || placement === void 0 ? void 0 : placement.up) && !echoOverlays ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconEchoBand, {
+            anchor,
+            shift: echoShift,
+            borderWidth,
+            edge: "top",
+            children: iconEcho
           }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.ScrollView, {
             style: {
               flexGrow: 0,
@@ -814,14 +829,68 @@ function TriggerMenuPanel(param) {
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
               padding: framePadding,
               gap: frameGap,
-              children
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_echoContext.PanelIconEchoBoxContext.Provider, {
+                value: iconEcho != null && anchor && placement && echoOverlays ? (0, import_echoContext.echoHeaderBox)({
+                  offset: echoShift,
+                  width: anchor.width,
+                  height: anchor.height,
+                  panelWidth: placement.width,
+                  rtl: import_react_native.I18nManager.isRTL
+                }) : null,
+                children
+              })
             })
-          })]
+          }), iconEcho != null && anchor && ((placement === null || placement === void 0 ? void 0 : placement.up) || echoOverlays) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconEchoBand, {
+            anchor,
+            shift: echoShift,
+            borderWidth,
+            edge: echoOverlays ? "overlay" : "bottom",
+            children: iconEcho
+          }) : null]
         })
       }))
     })]
   });
 }
+function IconEchoBand(param) {
+  var {
+    anchor,
+    shift,
+    borderWidth,
+    edge,
+    children
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+    testID: "floating-panel-icon-echo-band",
+    pointerEvents: "box-none",
+    style: edge === "overlay" ? {
+      position: "absolute",
+      top: -borderWidth,
+      start: -borderWidth,
+      end: -borderWidth,
+      height: anchor.height,
+      zIndex: 1
+    } : {
+      height: anchor.height,
+      marginHorizontal: -borderWidth,
+      ...(edge === "top" ? {
+        marginTop: -borderWidth
+      } : {
+        marginBottom: -borderWidth
+      })
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+      style: {
+        width: anchor.width,
+        height: anchor.height,
+        marginStart: shift,
+        alignItems: "flex-start",
+        justifyContent: "flex-start"
+      },
+      children
+    })
+  });
+}
 function PointPanel(param) {
   var {
     point,