@buoy-gg/shared-ui 7.0.36 → 7.0.38

package/lib/commonjs/ui/floating/FloatingTool.web.js

@@ -0,0 +1,591 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = Divider;
+exports.FloatingTool = FloatingTool;
+exports.UserStatus = UserStatus;
+exports.getBubbleAnchorPosition = getBubbleAnchorPosition;
+var _nightTheme = require("../night/nightTheme.js");
+var _react = require("react");
+var _onboardingConstantsWeb = require("./onboardingConstants.web.js");
+var _floating = require("@buoy-gg/floating-tools-react/floating");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * FloatingTools - Web renderer using shared React bindings.
+ *
+ * This file contains ONLY web-specific code (React DOM):
+ * - Pointer event handling (mouse + touch — WKWebView/Capacitor included)
+ * - requestAnimationFrame animation
+ * - Web JSX (div, span)
+ * - localStorage adapter
+ *
+ * All logic is shared via @buoy-gg/floating-tools-react
+ *
+ * @platform React DOM Web (Vite, CRA, Next.js, Electron)
+ */
+
+// Re-export for consumers
+
+// =============================
+// Web Storage Adapter
+// =============================
+const webStorageAdapter = {
+  getItem: key => localStorage.getItem(key),
+  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,
+  // native shared-ui GripVerticalIcon.tsx: buoyColors.textSecondary + "CC"
+  color = (0, _floating.withAlpha)(NATIVE_TEXT_SECONDARY, 'CC')
+}) {
+  const layout = (0, _floating.getGripIconLayout)(size);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: size,
+      height: size,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: [0, 1].map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        // 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: {
+          width: layout.dotSize,
+          height: layout.dotSize,
+          borderRadius: layout.dotSize / 2,
+          backgroundColor: color,
+          // native GripVerticalIcon.tsx: marginVertical rowGap / 2
+          marginTop: layout.rowGap / 2,
+          marginBottom: layout.rowGap / 2
+        }
+      }, row))
+    }, col))
+  });
+}
+
+// =============================
+// Divider (web JSX)
+// =============================
+function Divider() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 1,
+      height: 12,
+      backgroundColor: (0, _floating.withAlpha)(_floating.floatingToolsColors.muted, '66'),
+      flexShrink: 0
+    }
+  });
+}
+
+// =============================
+// 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: _floating.floatingToolsColors.success,
+  optional: _floating.floatingToolsColors.optional,
+  muted: _floating.floatingToolsColors.muted,
+  // native floatingTools.tsx: gameUIColorsCompat.secondary = buoyColors.textSecondary
+  secondary: NATIVE_TEXT_SECONDARY
+};
+function UserStatus({
+  userRole,
+  onPress
+}) {
+  const {
+    isDragging
+  } = (0, _floating.useFloatingToolsContext)();
+  const config = (0, _floating.getUserStatusConfig)(userRole, userStatusColors);
+  const handleClick = e => {
+    if (!isDragging && onPress) {
+      e.stopPropagation();
+      onPress();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+    role: "button",
+    "aria-label": `User status: ${config.label}`,
+    onClick: handleClick,
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingTop: 6,
+      paddingBottom: 6,
+      paddingLeft: 8,
+      paddingRight: 8,
+      flexShrink: 0,
+      cursor: onPress && !isDragging ? 'pointer' : 'default',
+      background: 'none',
+      border: 'none',
+      margin: 0 // neutralize UA button margin (native View/Touchable has none)
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: config.dotColor,
+        marginRight: 4
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        fontSize: 10,
+        fontWeight: 500,
+        color: config.textColor,
+        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
+    })]
+  });
+}
+
+// =============================
+// Web Animation Hook
+// =============================
+function useWebAnimation() {
+  const animationRef = (0, _react.useRef)(null);
+  const [position, setPosition] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const animateTo = (0, _react.useCallback)((from, to, onComplete) => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+    }
+    const startTime = performance.now();
+    const animate = currentTime => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / _floating.ANIMATION_DURATION, 1);
+      const newPosition = (0, _floating.interpolatePosition)(from, to, progress, _floating.easing.easeOutCubic);
+      setPosition(newPosition);
+      if (progress < 1) {
+        animationRef.current = requestAnimationFrame(animate);
+      } else {
+        setPosition(to);
+        onComplete?.();
+      }
+    };
+    animationRef.current = requestAnimationFrame(animate);
+  }, []);
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+  return {
+    position,
+    setPosition,
+    animateTo
+  };
+}
+
+// =============================
+// 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 FloatingTool({
+  id,
+  revealToken,
+  variant = "bubble",
+  dragFromSurface = false,
+  accessibilityLabel = "Drag handle",
+  accessory,
+  handleAdornment,
+  enablePositionPersistence = true,
+  children,
+  pushToSide = false,
+  suspendPointerEvents = false,
+  centerOnboarding = false,
+  minimizedStack,
+  hasMinimizedStack = false
+}) {
+  const bubbleRef = (0, _react.useRef)(null);
+  const storage = (0, _react.useMemo)(() => id ? {
+    getItem: key => webStorageAdapter.getItem(`@buoy/floating-tool/${id}/${key}`),
+    setItem: (key, value) => webStorageAdapter.setItem(`@buoy/floating-tool/${id}/${key}`, value)
+  } : webStorageAdapter, [id]);
+  // Use shared hook
+  const {
+    state,
+    actions,
+    isInitialized
+  } = (0, _floating.useFloatingTools)({
+    screenSize: {
+      width: window.innerWidth,
+      height: window.innerHeight
+    },
+    enablePositionPersistence,
+    storage
+  });
+
+  // Web-specific animation
+  const {
+    position: animatedPosition,
+    setPosition: setAnimatedPosition,
+    animateTo
+  } = useWebAnimation();
+
+  // Sync position when initialized
+  (0, _react.useEffect)(() => {
+    if (isInitialized) {
+      setAnimatedPosition(state.position);
+    }
+  }, [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)(() => {
+    if (!id) lastBubbleAnchor = {
+      x: animatedPosition.x,
+      y: animatedPosition.y
+    };
+  }, [animatedPosition, id]);
+
+  // Measure the same surface for both the DevTools bubble and custom strips.
+  (0, _react.useEffect)(() => {
+    if (!isInitialized) return;
+    const measure = () => {
+      const rect = bubbleRef.current?.getBoundingClientRect();
+      if (rect && rect.width > 0 && rect.height > 0) actions.setBubbleSize({
+        width: rect.width,
+        height: rect.height
+      });
+    };
+    const handleResize = () => {
+      actions.setScreenSize(window.innerWidth, window.innerHeight);
+      measure();
+    };
+    measure();
+    const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null;
+    if (bubbleRef.current) observer?.observe(bubbleRef.current);
+    window.addEventListener('resize', handleResize);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [actions, isInitialized]);
+
+  // 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.stopPropagation();
+    e.preventDefault();
+    setIsPointerDown(true);
+    actions.handleDragStart({
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+  }, [actions]);
+  const surfaceGesture = (0, _react.useRef)(false);
+  const handleSurfacePointerDown = event => {
+    if (event.button !== 0 || !(event.target instanceof Element)) return;
+    if (event.target.closest('button, a, input, select, textarea, [role="button"], [role="switch"], [role="slider"], [role="checkbox"], [role="radio"], [contenteditable="true"], [data-floating-accessory]')) return;
+    surfaceGesture.current = true;
+    handlePointerDown(event);
+  };
+  const handlePointerMove = (0, _react.useCallback)(e => {
+    const result = actions.handleDragMove({
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+    if (result.isDragging) {
+      setAnimatedPosition(result.position);
+    }
+  }, [actions, setAnimatedPosition]);
+  const handlePointerUp = (0, _react.useCallback)(e => {
+    setIsPointerDown(false);
+    const result = actions.handleDragEnd({
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+    const fromSurface = surfaceGesture.current;
+    surfaceGesture.current = false;
+    if (result.wasTap && !fromSurface) {
+      const toggleResult = actions.toggleHideShow();
+      animateTo(state.position, toggleResult.targetPosition, () => {
+        actions.commitPosition(toggleResult.targetPosition);
+      });
+    } else if (result.shouldHide) {
+      animateTo(state.position, result.position, () => {
+        actions.commitPosition(result.position);
+      });
+    }
+  }, [actions, animateTo, state.position]);
+  (0, _react.useEffect)(() => {
+    if (isPointerDown) {
+      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener('pointerup', handlePointerUp);
+      window.addEventListener('pointercancel', handlePointerUp);
+      return () => {
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+        window.removeEventListener('pointercancel', handlePointerUp);
+      };
+    }
+  }, [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);
+      });
+    }
+  }, [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, () => {});
+  }, [centerOnboarding, isInitialized]);
+  const previousReveal = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => {
+    if (!isInitialized || previousReveal.current === revealToken) return;
+    previousReveal.current = revealToken;
+    if (revealToken !== undefined && revealToken > 0 && state.isHidden) {
+      const {
+        targetPosition
+      } = actions.forceShow();
+      animateTo(state.position, targetPosition, () => actions.commitPosition(targetPosition));
+    }
+  }, [revealToken, isInitialized, state.isHidden, state.position, actions, animateTo]);
+
+  // Interleave children with dividers
+  const actionsContent = (0, _react.useMemo)(() => variant === "strip" ? _react.Children.toArray(children) : (0, _floating.interleaveWithDividers)(_react.Children.toArray(children), key => /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}, key)), [children, variant]);
+
+  // 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;
+  }
+  const spaceAbove = Math.max(0, animatedPosition.y - 8);
+  const spaceBelow = Math.max(0, window.innerHeight - animatedPosition.y - state.bubbleSize.height - 8);
+  const accessoryAbove = spaceAbove > spaceBelow;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: bubbleRef,
+    "data-testid": id ?? "buoy-floating-tool",
+    role: "toolbar",
+    "aria-label": "Floating Tools",
+    onPointerDown: dragFromSurface ? handleSurfacePointerDown : undefined,
+    style: {
+      position: 'fixed',
+      left: animatedPosition.x,
+      top: animatedPosition.y,
+      zIndex: 9999,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: _floating.floatingToolsColors.panel,
+      // 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 ? _floating.floatingToolsColors.dragActive : (0, _floating.withAlpha)(_floating.floatingToolsColors.muted, '66'),
+      // 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, _floating.withAlpha)(_floating.floatingToolsColors.dragActive, 0.36)}` : '0 4px 8px rgba(0, 0, 0, 0.3)',
+      cursor: dragFromSurface ? state.isDragging ? 'grabbing' : 'grab' : undefined,
+      userSelect: 'none',
+      touchAction: 'none',
+      pointerEvents: suspendPointerEvents ? 'none' : 'auto',
+      ...(variant === 'strip' ? {
+        borderRadius: _nightTheme.night.radius.card,
+        minHeight: 48,
+        backgroundColor: _nightTheme.night.color.surface,
+        borderColor: state.isDragging ? _nightTheme.night.color.accentBorderStrong : _nightTheme.night.color.separator,
+        boxShadow: "0 4px 16px rgba(0, 0, 0, 0.24)"
+      } : {})
+    },
+    children: [minimizedStack && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: 'absolute',
+        bottom: '100%',
+        left: -1,
+        // align with the bubble border edge
+        width: _floating.VISIBLE_HANDLE_WIDTH,
+        overflow: 'visible',
+        zIndex: 1001
+      },
+      children: minimizedStack
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      role: "button",
+      "aria-label": accessibilityLabel,
+      "data-testid": id ? `${id}-grip` : "buoy-floating-grip",
+      tabIndex: 0,
+      onPointerDown: handlePointerDown,
+      onKeyDown: event => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        const result = actions.toggleHideShow();
+        animateTo(state.position, result.targetPosition, () => actions.commitPosition(result.targetPosition));
+      },
+      style: {
+        touchAction: 'none',
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingTop: 6,
+        paddingBottom: 6,
+        backgroundColor: (0, _floating.withAlpha)(_floating.floatingToolsColors.muted, '1A'),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: _floating.VISIBLE_HANDLE_WIDTH,
+        boxSizing: 'border-box',
+        // RN width includes padding/border
+        borderRight: `1px solid ${(0, _floating.withAlpha)(_floating.floatingToolsColors.muted, '66')}`,
+        // native dragHandleStyle sets NO corner radius (container overflow is
+        // visible); the 10%-alpha bg square corner matches native rendering
+        cursor: state.isDragging ? 'grabbing' : 'grab',
+        ...(variant === 'strip' ? {
+          minHeight: 48,
+          backgroundColor: 'transparent',
+          borderRight: 'none',
+          flexDirection: 'column'
+        } : {})
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GripVerticalIcon, {
+        size: variant === "strip" ? 20 : 12
+      }), handleAdornment]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_floating.FloatingToolsProvider, {
+      value: {
+        isDragging: state.isDragging,
+        isHidden: state.isHidden
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6,
+          paddingRight: 8
+        },
+        children: actionsContent
+      })
+    }), !state.isHidden && accessory && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-floating-accessory": true,
+      style: {
+        position: "absolute",
+        ...(accessoryAbove ? {
+          bottom: "100%"
+        } : {
+          top: "100%"
+        }),
+        left: 0,
+        width: "100%",
+        maxHeight: Math.max(spaceAbove, spaceBelow),
+        overflowY: "auto",
+        zIndex: 1002
+      },
+      children: accessory
+    })]
+  });
+}

package/lib/commonjs/ui/floating/FloatingToolHost.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingToolHost = FloatingToolHost;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _floatingToolStore = require("../../stores/floatingToolStore.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Mount once above navigation. The empty space around tools passes touches to the app. */
+function FloatingToolHost() {
+  const entries = (0, _react.useSyncExternalStore)(_floatingToolStore.subscribeFloatingTools, _floatingToolStore.getFloatingTools, _floatingToolStore.getFloatingTools);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    pointerEvents: "box-none",
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 10000
+    },
+    children: entries.map(entry => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+      children: entry.render({
+        id: entry.id,
+        revealToken: entry.revealToken,
+        dismiss: () => (0, _floatingToolStore.dismissFloatingTool)(entry.id)
+      })
+    }, entry.id))
+  });
+}

package/lib/commonjs/ui/floating/FloatingToolHost.web.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingToolHost = FloatingToolHost;
+var _react = require("react");
+var _floatingToolStore = require("../../stores/floatingToolStore.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/** The strip itself handles input; the rest of the viewport stays interactive. */
+function FloatingToolHost() {
+  const entries = (0, _react.useSyncExternalStore)(_floatingToolStore.subscribeFloatingTools, _floatingToolStore.getFloatingTools, _floatingToolStore.getFloatingTools);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      position: "fixed",
+      inset: 0,
+      pointerEvents: "none",
+      zIndex: 10000
+    },
+    children: entries.map(entry => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+      children: entry.render({
+        id: entry.id,
+        revealToken: entry.revealToken,
+        dismiss: () => (0, _floatingToolStore.dismissFloatingTool)(entry.id)
+      })
+    }, entry.id))
+  });
+}