@buoy-gg/core 7.0.15 → 7.0.16

package/lib/commonjs/floatingMenu/dial/DialIcon.js

@@ -169,7 +169,10 @@ const DialIcon = ({
       style: styles.pressable,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.iconWrapper,
-        children: icon.icon
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.iconClamp,
+          children: icon.icon
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.label,
         numberOfLines: 1,
@@ -202,9 +205,12 @@ const DialIcon = ({
           const IconComp = icon.iconComponent;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComp, {
             slot: "dial",
-            size: 32
+            size: _floatingToolsCore.DIAL_ICON_GLYPH_SIZE
           });
-        })() : icon.icon
+        })() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.iconClamp,
+          children: icon.icon
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.label,
         numberOfLines: 1,
@@ -253,6 +259,22 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  /**
+   * Hard clamp for PRE-RENDERED icon nodes (icon.icon) — the path where the
+   * glyph's size is baked in by whoever created the node (unavailable-tool
+   * registry entries, consumer custom tools) rather than controlled here. The
+   * fixed overflow-hidden box guarantees an oversized node can never blow past
+   * its slot and dwarf neighboring icons — worst case it center-crops. The
+   * iconComponent path stays unclipped: we render it at DIAL_ICON_GLYPH_SIZE
+   * ourselves, and clipping would shave off the icons' glow shadows.
+   */
+  iconClamp: {
+    width: _floatingToolsCore.DIAL_ICON_GLYPH_SIZE,
+    height: _floatingToolsCore.DIAL_ICON_GLYPH_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
   label: {
     fontSize: _floatingToolsCore.dialStyles.icon.label.fontSize,
     fontWeight: _floatingToolsCore.dialStyles.icon.label.fontWeight,

package/lib/commonjs/floatingMenu/dial/OnboardingTooltip.js

@@ -7,7 +7,7 @@ exports.OnboardingTooltip = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
-var _onboardingConstants = require("./onboardingConstants.js");
+var _onboardingConstants = require("./onboardingConstants");
 var _jsxRuntime = require("react/jsx-runtime");
 const OnboardingTooltip = ({
   visible,

package/lib/commonjs/floatingMenu/dial/OnboardingTooltip.web.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OnboardingTooltip = OnboardingTooltip;
+var _react = require("react");
+var _floatingToolsReact = require("@buoy-gg/floating-tools-react");
+var _onboardingConstantsWeb = require("./onboardingConstants.web.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * OnboardingTooltip — Web twin of OnboardingTooltip.tsx.
+ * Centered glowing card with a down-pointing arrow, pulse loop, bouncing
+ * arrow, and a "Got it!" button. Rendered over a dark backdrop by callers.
+ * All values annotated with the native tokens they mirror.
+ */
+
+let onboardingKeyframesInjected = false;
+function injectOnboardingKeyframes() {
+  if (onboardingKeyframesInjected || typeof document === 'undefined') return;
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes buoyOnboardPulse {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.02); }
+    }
+    @keyframes buoyOnboardArrowBounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-8px); }
+    }
+  `;
+  document.head.appendChild(style);
+  onboardingKeyframesInjected = true;
+}
+
+// native dialColors.dialShadow === buoyColors.primary (#20C997 family)
+const PRIMARY = _floatingToolsReact.dialColors.dialShadow;
+function OnboardingTooltip({
+  title,
+  message,
+  onDismiss,
+  showArrow = true
+}) {
+  const [entered, setEntered] = (0, _react.useState)(false);
+  const [buttonPressed, setButtonPressed] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    injectOnboardingKeyframes();
+    const raf = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  const monoLabel = {
+    fontFamily: 'monospace',
+    textTransform: 'uppercase'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      position: 'fixed',
+      left: '50%',
+      bottom: (0, _onboardingConstantsWeb.calculateTooltipPosition)(),
+      transform: `translateX(-50%) scale(${entered ? 1 : 0.8})`,
+      opacity: entered ? 1 : 0,
+      // native: fade 300ms + spring scale .8→1
+      transition: 'transform 300ms cubic-bezier(0.34, 1.3, 0.64, 1), opacity 300ms ease',
+      zIndex: 10002,
+      pointerEvents: 'auto'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        position: 'relative',
+        animation: entered ? 'buoyOnboardPulse 3s ease-in-out infinite' : 'none'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          position: 'absolute',
+          inset: -4,
+          borderRadius: 18,
+          backgroundColor: '#FFFFFF',
+          opacity: 0.15
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          position: 'relative',
+          maxWidth: 280,
+          backgroundColor: _floatingToolsReact.dialColors.dialBackground,
+          borderRadius: 16,
+          border: `2px solid ${_floatingToolsReact.dialColors.dialBorder}`,
+          padding: 20,
+          boxShadow: `0 0 20px ${(0, _floatingToolsReact.withAlpha)(PRIMARY, 0.6)}`,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 8
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            ...monoLabel,
+            fontSize: 16,
+            fontWeight: 900,
+            letterSpacing: 1,
+            color: PRIMARY,
+            textShadow: `0 0 4px ${PRIMARY}`,
+            textAlign: 'center'
+          },
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            fontFamily: 'monospace',
+            fontSize: 13,
+            lineHeight: '20px',
+            color: '#FFFFFF',
+            textAlign: 'center'
+          },
+          children: message
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          onClick: onDismiss,
+          onMouseDown: () => setButtonPressed(true),
+          onMouseUp: () => setButtonPressed(false),
+          onMouseLeave: () => setButtonPressed(false),
+          style: {
+            ...monoLabel,
+            marginTop: 8,
+            borderRadius: 8,
+            border: '2px solid #FFFFFF',
+            backgroundColor: 'rgba(255,255,255,0.1)',
+            padding: '10px 24px',
+            fontSize: 14,
+            fontWeight: 900,
+            letterSpacing: 1.5,
+            color: '#FFFFFF',
+            cursor: 'pointer',
+            opacity: buttonPressed ? 0.7 : 1,
+            transform: buttonPressed ? 'scale(0.96)' : 'scale(1)',
+            transition: 'transform 100ms ease, opacity 100ms ease'
+          },
+          children: "Got it!"
+        })]
+      }), showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          position: 'absolute',
+          left: '50%',
+          bottom: _onboardingConstantsWeb.ARROW_BOTTOM_OFFSET,
+          marginLeft: -12,
+          width: 0,
+          height: 0,
+          borderLeft: '12px solid transparent',
+          borderRight: '12px solid transparent',
+          borderTop: `${_onboardingConstantsWeb.ARROW_HEIGHT}px solid ${PRIMARY}`,
+          filter: `drop-shadow(0 0 10px ${(0, _floatingToolsReact.withAlpha)(PRIMARY, 0.8)})`,
+          animation: entered ? 'buoyOnboardArrowBounce 1.6s ease-in-out infinite' : 'none'
+        }
+      })]
+    })
+  });
+}

package/lib/commonjs/floatingMenu/dial/onboardingConstants.web.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPACING_GAP = exports.ARROW_HEIGHT = exports.ARROW_BOTTOM_OFFSET = void 0;
+exports.calculateTargetPosition = calculateTargetPosition;
+exports.calculateTooltipPosition = calculateTooltipPosition;
+exports.getScreenCenterY = getScreenCenterY;
+/**
+ * Web twin of onboardingConstants.ts — same math, window.innerHeight instead
+ * of RN Dimensions.
+ */
+const ARROW_BOTTOM_OFFSET = exports.ARROW_BOTTOM_OFFSET = -40; // Arrow extends below tooltip
+const ARROW_HEIGHT = exports.ARROW_HEIGHT = 20; // borderTopWidth of arrow
+const SPACING_GAP = exports.SPACING_GAP = 10; // Gap between arrow tip and target element
+
+function getScreenCenterY() {
+  return window.innerHeight / 2;
+}
+
+/** Distance from screen bottom for tooltip positioning (centered-ish). */
+function calculateTooltipPosition() {
+  const estimatedHalfHeight = 130; // ~half of (tooltip + arrow)
+  return getScreenCenterY() - estimatedHalfHeight;
+}
+
+/** Distance from screen bottom where the bubble should sit (under the arrow). */
+function calculateTargetPosition() {
+  const tooltipBottom = calculateTooltipPosition();
+  const arrowTipFromBottom = tooltipBottom + ARROW_BOTTOM_OFFSET;
+  const actualArrowTip = arrowTipFromBottom - ARROW_HEIGHT;
+  return actualArrowTip - SPACING_GAP;
+}

package/lib/commonjs/floatingMenu/floatingTools.js

@@ -9,10 +9,10 @@ exports.UserStatus = UserStatus;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
-var _onboardingConstants = require("./dial/onboardingConstants.js");
-var _MinimizedToolsStack = require("./MinimizedToolsStack.js");
+var _onboardingConstants = require("./dial/onboardingConstants");
+var _MinimizedToolsStack = require("./MinimizedToolsStack");
 var _MinimizedToolsContext = require("./MinimizedToolsContext.js");
-var _AppHost = require("./AppHost.js");
+var _AppHost = require("./AppHost");
 var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
 var _jsxRuntime = require("react/jsx-runtime");
 // Shared utilities from floating-tools-core

package/lib/commonjs/floatingMenu/floatingTools.web.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.Divider = Divider;
 exports.FloatingTools = FloatingTools;
 exports.UserStatus = UserStatus;
+exports.getBubbleAnchorPosition = getBubbleAnchorPosition;
 var _react = require("react");
+var _onboardingConstantsWeb = require("./dial/onboardingConstants.web.js");
 var _floatingToolsReact = require("@buoy-gg/floating-tools-react");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * FloatingTools - Web renderer using shared React bindings.
  *
  * This file contains ONLY web-specific code (React DOM):
- * - Mouse event handling
+ * - Pointer event handling (mouse + touch — WKWebView/Capacitor included)
  * - requestAnimationFrame animation
  * - Web JSX (div, span)
  * - localStorage adapter
@@ -33,12 +35,23 @@ const webStorageAdapter = {
   setItem: (key, value) => localStorage.setItem(key, value)
 };
 
+// =============================
+// Native color values not present in floatingToolsColors
+// (core's `secondary` is #E0E0E0 = buoyColors.text; the native bubble uses
+// buoyColors.textSecondary #A0A0A0 for grip dots and "User" label text.
+// Inlined here rather than changed in core because dial.ts also consumes
+// floatingToolsColors.secondary for other surfaces.)
+// =============================
+// native shared-ui gameUIColors.ts: buoyColors.textSecondary = "#A0A0A0"
+const NATIVE_TEXT_SECONDARY = '#A0A0A0';
+
 // =============================
 // GripVerticalIcon (web JSX)
 // =============================
 function GripVerticalIcon({
   size = 24,
-  color = (0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.secondary, 'CC')
+  // native shared-ui GripVerticalIcon.tsx: buoyColors.textSecondary + "CC"
+  color = (0, _floatingToolsReact.withAlpha)(NATIVE_TEXT_SECONDARY, 'CC')
 }) {
   const layout = (0, _floatingToolsReact.getGripIconLayout)(size);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -56,7 +69,9 @@ function GripVerticalIcon({
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        marginLeft: col === 0 ? 0 : layout.columnGap
+        // native GripVerticalIcon.tsx: marginHorizontal columnGap / 2
+        marginLeft: layout.columnGap / 2,
+        marginRight: layout.columnGap / 2
       },
       children: [0, 1, 2].map(row => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
@@ -64,7 +79,9 @@ function GripVerticalIcon({
           height: layout.dotSize,
           borderRadius: layout.dotSize / 2,
           backgroundColor: color,
-          marginTop: row === 0 ? 0 : layout.rowGap
+          // native GripVerticalIcon.tsx: marginVertical rowGap / 2
+          marginTop: layout.rowGap / 2,
+          marginBottom: layout.rowGap / 2
         }
       }, row))
     }, col))
@@ -88,6 +105,16 @@ function Divider() {
 // =============================
 // UserStatus (web JSX)
 // =============================
+// Mirrors the native gameUIColorsCompat mapping in floatingTools.tsx:
+// success/optional/muted come from the shared palette, but `secondary`
+// (the "User" label text) is buoyColors.textSecondary, not core's secondary.
+const userStatusColors = {
+  success: _floatingToolsReact.floatingToolsColors.success,
+  optional: _floatingToolsReact.floatingToolsColors.optional,
+  muted: _floatingToolsReact.floatingToolsColors.muted,
+  // native floatingTools.tsx: gameUIColorsCompat.secondary = buoyColors.textSecondary
+  secondary: NATIVE_TEXT_SECONDARY
+};
 function UserStatus({
   userRole,
   onPress
@@ -95,7 +122,7 @@ function UserStatus({
   const {
     isDragging
   } = (0, _floatingToolsReact.useFloatingToolsContext)();
-  const config = (0, _floatingToolsReact.getUserStatusConfig)(userRole, _floatingToolsReact.floatingToolsColors);
+  const config = (0, _floatingToolsReact.getUserStatusConfig)(userRole, userStatusColors);
   const handleClick = e => {
     if (!isDragging && onPress) {
       e.stopPropagation();
@@ -117,7 +144,8 @@ function UserStatus({
       flexShrink: 0,
       cursor: onPress && !isDragging ? 'pointer' : 'default',
       background: 'none',
-      border: 'none'
+      border: 'none',
+      margin: 0 // neutralize UA button margin (native View/Touchable has none)
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
@@ -132,7 +160,11 @@ function UserStatus({
         fontSize: 10,
         fontWeight: 500,
         color: config.textColor,
-        letterSpacing: 0.3
+        letterSpacing: 0.3,
+        // native RN <Text> renders in the platform system font; buttons
+        // otherwise use the UA font on web
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        lineHeight: 'normal'
       },
       children: config.label
     })]
@@ -185,9 +217,20 @@ function useWebAnimation() {
 // Main FloatingTools Component
 // =============================
 
+// Last known bubble position — the AppHost minimize animation targets this so
+// tools shrink toward the stack instead of the old bottom-right dock.
+let lastBubbleAnchor = null;
+function getBubbleAnchorPosition() {
+  return lastBubbleAnchor;
+}
 function FloatingTools({
   enablePositionPersistence = true,
-  children
+  children,
+  pushToSide = false,
+  suspendPointerEvents = false,
+  centerOnboarding = false,
+  minimizedStack,
+  hasMinimizedStack = false
 }) {
   const bubbleRef = (0, _react.useRef)(null);
 
@@ -219,6 +262,15 @@ function FloatingTools({
     }
   }, [isInitialized, state.position, setAnimatedPosition]);
 
+  // Publish the bubble anchor for the AppHost minimize-target (stack lives
+  // fused to the bubble now, not in a fixed dock).
+  (0, _react.useEffect)(() => {
+    lastBubbleAnchor = {
+      x: animatedPosition.x,
+      y: animatedPosition.y
+    };
+  }, [animatedPosition]);
+
   // Handle window resize
   (0, _react.useEffect)(() => {
     const handleResize = () => {
@@ -243,17 +295,34 @@ function FloatingTools({
     }
   }, [bubbleMeasured, actions]);
 
-  // Web-specific: mouse event handling
-  const [isMouseDown, setIsMouseDown] = (0, _react.useState)(false);
-  const handleMouseDown = (0, _react.useCallback)(e => {
+  // Keep the bubble below notches/status bars (WKWebView with viewport-fit=cover).
+  (0, _react.useEffect)(() => {
+    const probe = document.createElement('div');
+    probe.style.cssText = 'position:fixed;top:env(safe-area-inset-top);left:env(safe-area-inset-left);' + 'visibility:hidden;pointer-events:none';
+    document.body.appendChild(probe);
+    const rect = probe.getBoundingClientRect();
+    document.body.removeChild(probe);
+    if (rect.top > 0 || rect.left > 0) {
+      actions.setMinPosition({
+        x: Math.max(rect.left, 10),
+        y: Math.max(rect.top, 10)
+      });
+    }
+  }, [actions]);
+
+  // Web-specific: pointer event handling (mouse + touch).
+  // preventDefault on pointerdown suppresses the compatibility mouse events,
+  // and touchAction: 'none' on the bubble stops touch-drags from scrolling.
+  const [isPointerDown, setIsPointerDown] = (0, _react.useState)(false);
+  const handlePointerDown = (0, _react.useCallback)(e => {
     e.preventDefault();
-    setIsMouseDown(true);
+    setIsPointerDown(true);
     actions.handleDragStart({
       clientX: e.clientX,
       clientY: e.clientY
     });
   }, [actions]);
-  const handleMouseMove = (0, _react.useCallback)(e => {
+  const handlePointerMove = (0, _react.useCallback)(e => {
     const result = actions.handleDragMove({
       clientX: e.clientX,
       clientY: e.clientY
@@ -262,8 +331,8 @@ function FloatingTools({
       setAnimatedPosition(result.position);
     }
   }, [actions, setAnimatedPosition]);
-  const handleMouseUp = (0, _react.useCallback)(e => {
-    setIsMouseDown(false);
+  const handlePointerUp = (0, _react.useCallback)(e => {
+    setIsPointerDown(false);
     const result = actions.handleDragEnd({
       clientX: e.clientX,
       clientY: e.clientY
@@ -280,18 +349,88 @@ function FloatingTools({
     }
   }, [actions, animateTo, state.position]);
   (0, _react.useEffect)(() => {
-    if (isMouseDown) {
-      window.addEventListener('mousemove', handleMouseMove);
-      window.addEventListener('mouseup', handleMouseUp);
+    if (isPointerDown) {
+      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener('pointerup', handlePointerUp);
+      window.addEventListener('pointercancel', handlePointerUp);
       return () => {
-        window.removeEventListener('mousemove', handleMouseMove);
-        window.removeEventListener('mouseup', handleMouseUp);
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+        window.removeEventListener('pointercancel', handlePointerUp);
       };
     }
-  }, [isMouseDown, handleMouseMove, handleMouseUp]);
+  }, [isPointerDown, handlePointerMove, handlePointerUp]);
+
+  // Live refs so the pushToSide effect never animates from a stale closure
+  // (the from-position jump read as a "pop" when restoring).
+  const statePositionRef = (0, _react.useRef)(state.position);
+  statePositionRef.current = state.position;
+  const isHiddenRef = (0, _react.useRef)(state.isHidden);
+  isHiddenRef.current = state.isHidden;
+
+  // pushToSide: forceHide to the edge while a dial/tool is open; forceShow
+  // restores the saved position when it closes (200ms, native parity).
+  // Native semantics ported exactly (floatingTools.tsx:537-603):
+  // - push only when the bubble isn't already hidden (a user-hidden bubble
+  //   is left alone, and we don't claim it as OUR push)
+  // - restore only when the bubble is STILL hidden from OUR push — if the
+  //   user tapped/dragged it back out while a tool was open
+  //   (userWantsVisibleRef), it stays exactly where they put it
+  const pushedRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (!isInitialized) return;
+    if (pushToSide && !pushedRef.current) {
+      if (isHiddenRef.current) return; // user hid it themselves — not our push
+      pushedRef.current = true;
+      const {
+        targetPosition
+      } = actions.forceHide();
+      animateTo(statePositionRef.current, targetPosition, () => {});
+    } else if (!pushToSide && pushedRef.current) {
+      pushedRef.current = false;
+      // User already showed it manually while the tool was open — leave it.
+      if (!isHiddenRef.current) return;
+      const {
+        targetPosition
+      } = actions.forceShow();
+      // The bubble may have grown while hidden (row tools/env badge toggled
+      // on) — clamp the restored position so it stays fully on-screen
+      // (native handles this via its width-change auto-reposition).
+      const width = bubbleRef.current?.getBoundingClientRect().width ?? 100;
+      const clamped = {
+        x: Math.max(10, Math.min(targetPosition.x, window.innerWidth - width - 10)),
+        y: targetPosition.y
+      };
+      animateTo(statePositionRef.current, clamped, () => {
+        actions.commitPosition(clamped);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pushToSide, isInitialized]);
+
+  // centerOnboarding: park the bubble under the tooltip arrow while the
+  // welcome tooltip is up (native calculateTargetPosition math).
+  (0, _react.useEffect)(() => {
+    if (!centerOnboarding || !isInitialized) return;
+    const bubbleWidth = bubbleRef.current?.getBoundingClientRect().width ?? 100;
+    const bubbleHeight = bubbleRef.current?.getBoundingClientRect().height ?? 32;
+    const fromBottom = (0, _onboardingConstantsWeb.calculateTargetPosition)();
+    const target = {
+      x: (window.innerWidth - bubbleWidth) / 2,
+      y: window.innerHeight - fromBottom - bubbleHeight
+    };
+    animateTo(statePositionRef.current, target, () => {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [centerOnboarding, isInitialized]);
 
   // Interleave children with dividers
   const actionsContent = (0, _react.useMemo)(() => (0, _floatingToolsReact.interleaveWithDividers)(_react.Children.toArray(children), key => /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}, key)), [children]);
+
+  // Suppress the first paint until the persisted position has loaded so the
+  // bubble doesn't flash at 0,0 (native floatingTools.tsx:935-937).
+  if (!isInitialized) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: bubbleRef,
     role: "toolbar",
@@ -305,21 +444,43 @@ function FloatingTools({
       flexDirection: 'row',
       alignItems: 'center',
       backgroundColor: _floatingToolsReact.floatingToolsColors.panel,
-      borderRadius: 6,
+      // native: top-left corner + top border flatten when the minimized
+      // stack is fused above (floatingTools.tsx containerStyle)
+      borderTopLeftRadius: hasMinimizedStack ? 0 : 6,
+      borderTopRightRadius: 6,
+      borderBottomLeftRadius: 6,
+      borderBottomRightRadius: 6,
       borderWidth: state.isDragging ? 2 : 1,
+      borderTopWidth: state.isDragging ? 2 : hasMinimizedStack ? 0 : 1,
       borderStyle: 'solid',
       borderColor: state.isDragging ? _floatingToolsReact.floatingToolsColors.dragActive : (0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.muted, '66'),
-      boxShadow: state.isDragging ? `0 6px 12px ${(0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.dragActive, '99')}` : '0 4px 8px rgba(0, 0, 0, 0.3)',
+      // native floatingTools.tsx: shadowOffset {0, 6|4}, shadowRadius 12|8,
+      // shadowOpacity 0.6|0.3, shadowColor dragActive+"99"|"#000".
+      // Dragging color = 0x99 (0.6) alpha x 0.6 shadowOpacity = ~0.36 effective.
+      boxShadow: state.isDragging ? `0 6px 12px ${(0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.dragActive, 0.36)}` : '0 4px 8px rgba(0, 0, 0, 0.3)',
       userSelect: 'none',
-      touchAction: 'none'
+      touchAction: 'none',
+      pointerEvents: suspendPointerEvents ? 'none' : 'auto'
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [minimizedStack && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: 'absolute',
+        bottom: '100%',
+        left: -1,
+        // align with the bubble border edge
+        width: _floatingToolsReact.VISIBLE_HANDLE_WIDTH,
+        overflow: 'visible',
+        zIndex: 1001
+      },
+      children: minimizedStack
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "slider",
       "aria-label": "Drag handle",
       "aria-valuetext": `Position: ${Math.round(animatedPosition.x)}, ${Math.round(animatedPosition.y)}`,
       tabIndex: 0,
-      onMouseDown: handleMouseDown,
+      onPointerDown: handlePointerDown,
       style: {
+        touchAction: 'none',
         paddingLeft: 6,
         paddingRight: 6,
         paddingTop: 6,
@@ -329,9 +490,11 @@ function FloatingTools({
         alignItems: 'center',
         justifyContent: 'center',
         width: _floatingToolsReact.VISIBLE_HANDLE_WIDTH,
+        boxSizing: 'border-box',
+        // RN width includes padding/border
         borderRight: `1px solid ${(0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.muted, '66')}`,
-        borderTopLeftRadius: 5,
-        borderBottomLeftRadius: 5,
+        // native dragHandleStyle sets NO corner radius (container overflow is
+        // visible); the 10%-alpha bg square corner matches native rendering
         cursor: state.isDragging ? 'grabbing' : 'grab'
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GripVerticalIcon, {

package/lib/commonjs/index.js

@@ -255,10 +255,10 @@ Object.keys(_types).forEach(function (key) {
   });
 });
 var _DevToolsSettingsModal = require("./floatingMenu/DevToolsSettingsModal");
-var _AppHost = require("./floatingMenu/AppHost.js");
+var _AppHost = require("./floatingMenu/AppHost");
 var _DevToolsVisibilityContext = require("./floatingMenu/DevToolsVisibilityContext.js");
 var _ToggleStateManager = require("./floatingMenu/ToggleStateManager.js");
 var _MinimizedToolsContext = require("./floatingMenu/MinimizedToolsContext.js");
-var _MinimizedToolsStack = require("./floatingMenu/MinimizedToolsStack.js");
+var _MinimizedToolsStack = require("./floatingMenu/MinimizedToolsStack");
 var _license = require("@buoy-gg/license");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/lib/commonjs/index.web.js

@@ -3,6 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AppHostProvider", {
+  enumerable: true,
+  get: function () {
+    return _AppHostWeb.AppHostProvider;
+  }
+});
+Object.defineProperty(exports, "AppOverlay", {
+  enumerable: true,
+  get: function () {
+    return _AppHostWeb.AppOverlay;
+  }
+});
 Object.defineProperty(exports, "DialMenu", {
   enumerable: true,
   get: function () {
@@ -111,6 +123,12 @@ Object.defineProperty(exports, "settingsStyles", {
     return _floatingToolsReact.settingsStyles;
   }
 });
+Object.defineProperty(exports, "useAppHost", {
+  enumerable: true,
+  get: function () {
+    return _AppHostWeb.useAppHost;
+  }
+});
 Object.defineProperty(exports, "useFloatingTools", {
   enumerable: true,
   get: function () {
@@ -127,5 +145,6 @@ var _FloatingDevToolsWeb = require("./floatingMenu/FloatingDevTools.web.js");
 var _floatingToolsWeb = require("./floatingMenu/floatingTools.web.js");
 var _DialDevToolsWeb = require("./floatingMenu/dial/DialDevTools.web.js");
 var _DevToolsSettingsModalWeb = require("./floatingMenu/DevToolsSettingsModal.web.js");
+var _AppHostWeb = require("./floatingMenu/AppHost.web.js");
 var _autoDiscoverPresetsWeb = require("./utils/autoDiscoverPresets.web.js");
 var _floatingToolsReact = require("@buoy-gg/floating-tools-react");