@buoy-gg/core 7.0.15 → 7.0.17

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

@@ -2,7 +2,7 @@
 
 import { useMemo, useRef } from "react";
 import { StyleSheet, Pressable, View, Text, useWindowDimensions, Animated } from "react-native";
-import { getDialLayout, getIconPosition, getIconStaggerInputRange, DIAL_START_ANGLE, DIAL_ICON_SIZE, dialColors, dialStyles, dialAnimationConfig, floatingToolsColors } from "@buoy-gg/floating-tools-core";
+import { getDialLayout, getIconPosition, getIconStaggerInputRange, DIAL_START_ANGLE, DIAL_ICON_SIZE, DIAL_ICON_GLYPH_SIZE, dialColors, dialStyles, dialAnimationConfig, floatingToolsColors } from "@buoy-gg/floating-tools-core";
 
 // The circle radius depends on the live window width and is computed inside
 // the component (must match DialDevTools' circle, which does the same).
@@ -166,7 +166,10 @@ export const DialIcon = ({
       style: styles.pressable,
       children: [/*#__PURE__*/_jsx(View, {
         style: styles.iconWrapper,
-        children: icon.icon
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.iconClamp,
+          children: icon.icon
+        })
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.label,
         numberOfLines: 1,
@@ -199,9 +202,12 @@ export const DialIcon = ({
           const IconComp = icon.iconComponent;
           return /*#__PURE__*/_jsx(IconComp, {
             slot: "dial",
-            size: 32
+            size: DIAL_ICON_GLYPH_SIZE
           });
-        })() : icon.icon
+        })() : /*#__PURE__*/_jsx(View, {
+          style: styles.iconClamp,
+          children: icon.icon
+        })
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.label,
         numberOfLines: 1,
@@ -249,6 +255,22 @@ const styles = 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: DIAL_ICON_GLYPH_SIZE,
+    height: DIAL_ICON_GLYPH_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
   label: {
     fontSize: dialStyles.icon.label.fontSize,
     fontWeight: dialStyles.icon.label.fontWeight,

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

@@ -4,7 +4,7 @@ import { useEffect, useRef } from "react";
 import { Animated, Pressable, StyleSheet, Text, View, Easing } from "react-native";
 import { absoluteFill } from "@buoy-gg/shared-ui";
 import { dialColors, buoyColors } from "@buoy-gg/shared-ui";
-import { calculateTooltipPosition, ARROW_BOTTOM_OFFSET, ARROW_HEIGHT } from "./onboardingConstants.js";
+import { calculateTooltipPosition, ARROW_BOTTOM_OFFSET, ARROW_HEIGHT } from "./onboardingConstants";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const OnboardingTooltip = ({
   visible,

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

@@ -0,0 +1,149 @@
+"use strict";
+
+/**
+ * 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.
+ */
+import { useEffect, useState } from 'react';
+import { dialColors, withAlpha } from '@buoy-gg/floating-tools-react';
+import { ARROW_BOTTOM_OFFSET, ARROW_HEIGHT, calculateTooltipPosition } from "./onboardingConstants.web.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = dialColors.dialShadow;
+export function OnboardingTooltip({
+  title,
+  message,
+  onDismiss,
+  showArrow = true
+}) {
+  const [entered, setEntered] = useState(false);
+  const [buttonPressed, setButtonPressed] = useState(false);
+  useEffect(() => {
+    injectOnboardingKeyframes();
+    const raf = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  const monoLabel = {
+    fontFamily: 'monospace',
+    textTransform: 'uppercase'
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      position: 'fixed',
+      left: '50%',
+      bottom: 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__*/_jsxs("div", {
+      style: {
+        position: 'relative',
+        animation: entered ? 'buoyOnboardPulse 3s ease-in-out infinite' : 'none'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          position: 'absolute',
+          inset: -4,
+          borderRadius: 18,
+          backgroundColor: '#FFFFFF',
+          opacity: 0.15
+        }
+      }), /*#__PURE__*/_jsxs("div", {
+        style: {
+          position: 'relative',
+          maxWidth: 280,
+          backgroundColor: dialColors.dialBackground,
+          borderRadius: 16,
+          border: `2px solid ${dialColors.dialBorder}`,
+          padding: 20,
+          boxShadow: `0 0 20px ${withAlpha(PRIMARY, 0.6)}`,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 8
+        },
+        children: [/*#__PURE__*/_jsx("span", {
+          style: {
+            ...monoLabel,
+            fontSize: 16,
+            fontWeight: 900,
+            letterSpacing: 1,
+            color: PRIMARY,
+            textShadow: `0 0 4px ${PRIMARY}`,
+            textAlign: 'center'
+          },
+          children: title
+        }), /*#__PURE__*/_jsx("span", {
+          style: {
+            fontFamily: 'monospace',
+            fontSize: 13,
+            lineHeight: '20px',
+            color: '#FFFFFF',
+            textAlign: 'center'
+          },
+          children: message
+        }), /*#__PURE__*/_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__*/_jsx("div", {
+        style: {
+          position: 'absolute',
+          left: '50%',
+          bottom: ARROW_BOTTOM_OFFSET,
+          marginLeft: -12,
+          width: 0,
+          height: 0,
+          borderLeft: '12px solid transparent',
+          borderRight: '12px solid transparent',
+          borderTop: `${ARROW_HEIGHT}px solid ${PRIMARY}`,
+          filter: `drop-shadow(0 0 10px ${withAlpha(PRIMARY, 0.8)})`,
+          animation: entered ? 'buoyOnboardArrowBounce 1.6s ease-in-out infinite' : 'none'
+        }
+      })]
+    })
+  });
+}

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

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

package/lib/module/floatingMenu/floatingTools.js

@@ -3,10 +3,10 @@
 import { useEffect, useMemo, useRef, useState, useContext, createContext, useCallback, Children } from "react";
 import { Animated, Dimensions, View, Text, TouchableOpacity } from "react-native";
 import { DraggableHeader, EnvironmentSelectorInline, GripVerticalIcon, buoyColors, getSafeAreaInsets, persistentStorage, useSafeAreaInsets } from "@buoy-gg/shared-ui";
-import { calculateTargetPosition } from "./dial/onboardingConstants.js";
-import { MinimizedToolsStack } from "./MinimizedToolsStack.js";
+import { calculateTargetPosition } from "./dial/onboardingConstants";
+import { MinimizedToolsStack } from "./MinimizedToolsStack";
 import { useMinimizedTools } from "./MinimizedToolsContext.js";
-import { useAppHost } from "./AppHost.js";
+import { useAppHost } from "./AppHost";
 
 // Shared utilities from floating-tools-core
 import { getUserStatusConfig as getStatusConfig, filterValidChildren, floatingToolsColors } from "@buoy-gg/floating-tools-core";

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

@@ -4,7 +4,7 @@
  * 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
@@ -15,6 +15,7 @@
  */
 
 import { useState, useRef, useCallback, useEffect, useMemo, Children } from 'react';
+import { calculateTargetPosition } from "./dial/onboardingConstants.web.js";
 import {
 // Hook and context
 useFloatingTools, FloatingToolsProvider, useFloatingToolsContext, interleaveWithDividers,
@@ -33,12 +34,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 = withAlpha(floatingToolsColors.secondary, 'CC')
+  // native shared-ui GripVerticalIcon.tsx: buoyColors.textSecondary + "CC"
+  color = withAlpha(NATIVE_TEXT_SECONDARY, 'CC')
 }) {
   const layout = getGripIconLayout(size);
   return /*#__PURE__*/_jsx("div", {
@@ -56,7 +68,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__*/_jsx("div", {
         style: {
@@ -64,7 +78,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 +104,16 @@ export 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: floatingToolsColors.success,
+  optional: floatingToolsColors.optional,
+  muted: floatingToolsColors.muted,
+  // native floatingTools.tsx: gameUIColorsCompat.secondary = buoyColors.textSecondary
+  secondary: NATIVE_TEXT_SECONDARY
+};
 export function UserStatus({
   userRole,
   onPress
@@ -95,7 +121,7 @@ export function UserStatus({
   const {
     isDragging
   } = useFloatingToolsContext();
-  const config = getUserStatusConfig(userRole, floatingToolsColors);
+  const config = getUserStatusConfig(userRole, userStatusColors);
   const handleClick = e => {
     if (!isDragging && onPress) {
       e.stopPropagation();
@@ -117,7 +143,8 @@ export 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__*/_jsx("div", {
       style: {
@@ -132,7 +159,11 @@ export 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 +216,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;
+export function getBubbleAnchorPosition() {
+  return lastBubbleAnchor;
+}
 export function FloatingTools({
   enablePositionPersistence = true,
-  children
+  children,
+  pushToSide = false,
+  suspendPointerEvents = false,
+  centerOnboarding = false,
+  minimizedStack,
+  hasMinimizedStack = false
 }) {
   const bubbleRef = useRef(null);
 
@@ -219,6 +261,15 @@ export 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).
+  useEffect(() => {
+    lastBubbleAnchor = {
+      x: animatedPosition.x,
+      y: animatedPosition.y
+    };
+  }, [animatedPosition]);
+
   // Handle window resize
   useEffect(() => {
     const handleResize = () => {
@@ -243,17 +294,34 @@ export function FloatingTools({
     }
   }, [bubbleMeasured, actions]);
 
-  // Web-specific: mouse event handling
-  const [isMouseDown, setIsMouseDown] = useState(false);
-  const handleMouseDown = useCallback(e => {
+  // Keep the bubble below notches/status bars (WKWebView with viewport-fit=cover).
+  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] = useState(false);
+  const handlePointerDown = useCallback(e => {
     e.preventDefault();
-    setIsMouseDown(true);
+    setIsPointerDown(true);
     actions.handleDragStart({
       clientX: e.clientX,
       clientY: e.clientY
     });
   }, [actions]);
-  const handleMouseMove = useCallback(e => {
+  const handlePointerMove = useCallback(e => {
     const result = actions.handleDragMove({
       clientX: e.clientX,
       clientY: e.clientY
@@ -262,8 +330,8 @@ export function FloatingTools({
       setAnimatedPosition(result.position);
     }
   }, [actions, setAnimatedPosition]);
-  const handleMouseUp = useCallback(e => {
-    setIsMouseDown(false);
+  const handlePointerUp = useCallback(e => {
+    setIsPointerDown(false);
     const result = actions.handleDragEnd({
       clientX: e.clientX,
       clientY: e.clientY
@@ -280,18 +348,88 @@ export function FloatingTools({
     }
   }, [actions, animateTo, state.position]);
   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 = useRef(state.position);
+  statePositionRef.current = state.position;
+  const isHiddenRef = 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 = useRef(false);
+  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).
+  useEffect(() => {
+    if (!centerOnboarding || !isInitialized) return;
+    const bubbleWidth = bubbleRef.current?.getBoundingClientRect().width ?? 100;
+    const bubbleHeight = bubbleRef.current?.getBoundingClientRect().height ?? 32;
+    const fromBottom = 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 = useMemo(() => interleaveWithDividers(Children.toArray(children), key => /*#__PURE__*/_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__*/_jsxs("div", {
     ref: bubbleRef,
     role: "toolbar",
@@ -305,21 +443,43 @@ export function FloatingTools({
       flexDirection: 'row',
       alignItems: 'center',
       backgroundColor: 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 ? floatingToolsColors.dragActive : withAlpha(floatingToolsColors.muted, '66'),
-      boxShadow: state.isDragging ? `0 6px 12px ${withAlpha(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 ${withAlpha(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__*/_jsx("div", {
+    children: [minimizedStack && /*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'absolute',
+        bottom: '100%',
+        left: -1,
+        // align with the bubble border edge
+        width: VISIBLE_HANDLE_WIDTH,
+        overflow: 'visible',
+        zIndex: 1001
+      },
+      children: minimizedStack
+    }), /*#__PURE__*/_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 +489,11 @@ export function FloatingTools({
         alignItems: 'center',
         justifyContent: 'center',
         width: VISIBLE_HANDLE_WIDTH,
+        boxSizing: 'border-box',
+        // RN width includes padding/border
         borderRight: `1px solid ${withAlpha(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__*/_jsx(GripVerticalIcon, {

package/lib/module/index.js

@@ -18,7 +18,13 @@ export { FloatingMenu } from "./floatingMenu/FloatingMenu.js";
 export * from "./floatingMenu/types.js";
 export { DevToolsSettingsModal, useDevToolsSettings } from "./floatingMenu/DevToolsSettingsModal";
 // Export AppHost components for advanced use cases
-export { AppHostProvider, AppOverlay, useAppHost } from "./floatingMenu/AppHost.js";
+export { AppHostProvider, AppOverlay, useAppHost } from "./floatingMenu/AppHost";
+
+// Declarative chrome for custom tools (pairs with InstalledApp.modal)
+export { useToolHost, useToolHeader } from "./floatingMenu/ToolHost.js";
+
+// The custom-tools toolkit: blessed shared-ui components/hooks/tokens
+export * from "./toolkit.js";
 
 // Export DevTools visibility tracking
 export { DevToolsVisibilityProvider, useDevToolsVisibility } from "./floatingMenu/DevToolsVisibilityContext.js";
@@ -28,7 +34,7 @@ export { toggleStateManager } from "./floatingMenu/ToggleStateManager.js";
 
 // Export minimized tools components
 export { MinimizedToolsProvider, useMinimizedTools, getIconPosition, getIconSize } from "./floatingMenu/MinimizedToolsContext.js";
-export { MinimizedToolsStack } from "./floatingMenu/MinimizedToolsStack.js";
+export { MinimizedToolsStack } from "./floatingMenu/MinimizedToolsStack";
 
 // Re-export license functionality from @buoy-gg/license
 // These are re-exported for convenience so users can import from @buoy-gg/core

package/lib/module/index.web.js

@@ -15,6 +15,11 @@ export { FloatingDevTools } from "./floatingMenu/FloatingDevTools.web.js";
 export { FloatingTools, UserStatus, Divider } from "./floatingMenu/floatingTools.web.js";
 export { DialMenu } from "./floatingMenu/dial/DialDevTools.web.js";
 export { SettingsModal } from "./floatingMenu/DevToolsSettingsModal.web.js";
+// Tool host (open tool panels + minimized dock) — web twin of the native
+// AppHostProvider/AppOverlay/useAppHost. FloatingDevTools wires these up
+// automatically; exported for advanced/standalone use.
+export { AppHostProvider, AppOverlay, useAppHost } from "./floatingMenu/AppHost.web.js";
+
 // Export auto-discovery utilities (web version)
 export { autoDiscoverWebPresets, autoDiscoverWithCustom, getToolsBySlot, getEnabledTools, defaultToolPresets } from "./utils/autoDiscoverPresets.web.js";