@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,591 +1 @@
-"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
-    })]
-  });
-}
+"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");const webStorageAdapter={getItem:t=>localStorage.getItem(t),setItem:(t,s)=>localStorage.setItem(t,s)};const NATIVE_TEXT_SECONDARY="#A0A0A0";function GripVerticalIcon({size:t=24,color:s=(0,_floating.withAlpha)(NATIVE_TEXT_SECONDARY,"CC")}){const r=(0,_floating.getGripIconLayout)(t);return(0,_jsxRuntime.jsx)("div",{style:{width:t,height:t,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center"},children:[0,1].map(a=>(0,_jsxRuntime.jsx)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginLeft:r.columnGap/2,marginRight:r.columnGap/2},children:[0,1,2].map(f=>(0,_jsxRuntime.jsx)("div",{style:{width:r.dotSize,height:r.dotSize,borderRadius:r.dotSize/2,backgroundColor:s,marginTop:r.rowGap/2,marginBottom:r.rowGap/2}},f))},a))})}function Divider(){return(0,_jsxRuntime.jsx)("div",{style:{width:1,height:12,backgroundColor:(0,_floating.withAlpha)(_floating.floatingToolsColors.muted,"66"),flexShrink:0}})}const userStatusColors={success:_floating.floatingToolsColors.success,optional:_floating.floatingToolsColors.optional,muted:_floating.floatingToolsColors.muted,secondary:NATIVE_TEXT_SECONDARY};function UserStatus({userRole:t,onPress:s}){const{isDragging:r}=(0,_floating.useFloatingToolsContext)();const a=(0,_floating.getUserStatusConfig)(t,userStatusColors);const f=g=>{if(!r&&s){g.stopPropagation();g.currentTarget.focus();s()}};return(0,_jsxRuntime.jsxs)("button",{role:"button","aria-label":`User status: ${a.label}`,onClick:f,style:{display:"flex",flexDirection:"row",alignItems:"center",paddingTop:6,paddingBottom:6,paddingLeft:8,paddingRight:8,flexShrink:0,cursor:s&&!r?"pointer":"default",background:"none",border:"none",margin:0},children:[(0,_jsxRuntime.jsx)("div",{style:{width:6,height:6,borderRadius:3,backgroundColor:a.dotColor,marginRight:4}}),(0,_jsxRuntime.jsx)("span",{style:{fontSize:10,fontWeight:500,color:a.textColor,letterSpacing:.3,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',lineHeight:"normal"},children:a.label})]})}function useWebAnimation(){const t=(0,_react.useRef)(null);const[s,r]=(0,_react.useState)({x:0,y:0});const a=(0,_react.useCallback)((f,g,P)=>{if(t.current){cancelAnimationFrame(t.current)}const S=performance.now();const b=m=>{const T=m-S;const w=Math.min(T/_floating.ANIMATION_DURATION,1);const v=(0,_floating.interpolatePosition)(f,g,w,_floating.easing.easeOutCubic);r(v);if(w<1){t.current=requestAnimationFrame(b)}else{r(g);P?.()}};t.current=requestAnimationFrame(b)},[]);(0,_react.useEffect)(()=>{return()=>{if(t.current){cancelAnimationFrame(t.current)}}},[]);return{position:s,setPosition:r,animateTo:a}}let lastBubbleAnchor=null;function getBubbleAnchorPosition(){return lastBubbleAnchor}function FloatingTool({id:t,revealToken:s,variant:r="bubble",dragFromSurface:a=false,accessibilityLabel:f="Drag handle",accessory:g,handleAdornment:P,enablePositionPersistence:S=true,children:b,pushToSide:m=false,suspendPointerEvents:T=false,centerOnboarding:w=false,minimizedStack:v,hasMinimizedStack:B=false}){const h=(0,_react.useRef)(null);const _=(0,_react.useMemo)(()=>t?{getItem:e=>webStorageAdapter.getItem(`@buoy/floating-tool/${t}/${e}`),setItem:(e,n)=>webStorageAdapter.setItem(`@buoy/floating-tool/${t}/${e}`,n)}:webStorageAdapter,[t]);const{state:o,actions:i,isInitialized:l}=(0,_floating.useFloatingTools)({screenSize:{width:window.innerWidth,height:window.innerHeight},enablePositionPersistence:S,storage:_});const{position:p,setPosition:C,animateTo:d}=useWebAnimation();(0,_react.useEffect)(()=>{if(l){C(o.position)}},[l,o.position,C]);(0,_react.useEffect)(()=>{if(!t)lastBubbleAnchor={x:p.x,y:p.y}},[p,t]);(0,_react.useEffect)(()=>{if(!l)return;const e=()=>{const c=h.current?.getBoundingClientRect();if(c&&c.width>0&&c.height>0)i.setBubbleSize({width:c.width,height:c.height})};const n=()=>{i.setScreenSize(window.innerWidth,window.innerHeight);e()};e();const u=typeof ResizeObserver!=="undefined"?new ResizeObserver(e):null;if(h.current)u?.observe(h.current);window.addEventListener("resize",n);return()=>{u?.disconnect();window.removeEventListener("resize",n)}},[i,l]);(0,_react.useEffect)(()=>{const e=document.createElement("div");e.style.cssText="position:fixed;top:env(safe-area-inset-top);left:env(safe-area-inset-left);visibility:hidden;pointer-events:none";document.body.appendChild(e);const n=e.getBoundingClientRect();document.body.removeChild(e);if(n.top>0||n.left>0){i.setMinPosition({x:Math.max(n.left,10),y:Math.max(n.top,10)})}},[i]);const[k,L]=(0,_react.useState)(false);const z=(0,_react.useCallback)(e=>{e.stopPropagation();e.preventDefault();L(true);i.handleDragStart({clientX:e.clientX,clientY:e.clientY})},[i]);const E=(0,_react.useRef)(false);const W=e=>{if(e.button!==0||!(e.target instanceof Element))return;if(e.target.closest('button, a, input, select, textarea, [role="button"], [role="switch"], [role="slider"], [role="checkbox"], [role="radio"], [contenteditable="true"], [data-floating-accessory]'))return;E.current=true;z(e)};const H=(0,_react.useCallback)(e=>{const n=i.handleDragMove({clientX:e.clientX,clientY:e.clientY});if(n.isDragging){C(n.position)}},[i,C]);const x=(0,_react.useCallback)(e=>{L(false);const n=i.handleDragEnd({clientX:e.clientX,clientY:e.clientY});const u=E.current;E.current=false;if(n.wasTap&&!u){const c=i.toggleHideShow();d(o.position,c.targetPosition,()=>{i.commitPosition(c.targetPosition)})}else if(n.shouldHide){d(o.position,n.position,()=>{i.commitPosition(n.position)})}},[i,d,o.position]);(0,_react.useEffect)(()=>{if(k){window.addEventListener("pointermove",H);window.addEventListener("pointerup",x);window.addEventListener("pointercancel",x);return()=>{window.removeEventListener("pointermove",H);window.removeEventListener("pointerup",x);window.removeEventListener("pointercancel",x)}}},[k,H,x]);const R=(0,_react.useRef)(o.position);R.current=o.position;const j=(0,_react.useRef)(o.isHidden);j.current=o.isHidden;const D=(0,_react.useRef)(false);(0,_react.useEffect)(()=>{if(!l)return;if(m&&!D.current){if(j.current)return;D.current=true;const{targetPosition:e}=i.forceHide();d(R.current,e,()=>{})}else if(!m&&D.current){D.current=false;if(!j.current)return;const{targetPosition:e}=i.forceShow();const n=h.current?.getBoundingClientRect().width??100;const u={x:Math.max(10,Math.min(e.x,window.innerWidth-n-10)),y:e.y};d(R.current,u,()=>{i.commitPosition(u)})}},[m,l]);(0,_react.useEffect)(()=>{if(!w||!l)return;const e=h.current?.getBoundingClientRect().width??100;const n=h.current?.getBoundingClientRect().height??32;const u=(0,_onboardingConstantsWeb.calculateTargetPosition)();const c={x:(window.innerWidth-e)/2,y:window.innerHeight-u-n};d(R.current,c,()=>{})},[w,l]);const M=(0,_react.useRef)(void 0);(0,_react.useEffect)(()=>{if(!l||M.current===s)return;M.current=s;if(s!==void 0&&s>0&&o.isHidden){const{targetPosition:e}=i.forceShow();d(o.position,e,()=>i.commitPosition(e))}},[s,l,o.isHidden,o.position,i,d]);const F=(0,_react.useMemo)(()=>r==="strip"?_react.Children.toArray(b):(0,_floating.interleaveWithDividers)(_react.Children.toArray(b),e=>(0,_jsxRuntime.jsx)(Divider,{},e)),[b,r]);if(!l){return null}const y=Math.max(0,p.y-8);const A=Math.max(0,window.innerHeight-p.y-o.bubbleSize.height-8);const $=y>A;const I=y>=48||y>=A;return(0,_jsxRuntime.jsxs)("div",{ref:h,"data-testid":t??"buoy-floating-tool",role:"toolbar","aria-label":"Floating Tools",onPointerDown:a?W:void 0,style:{position:"fixed",left:p.x,top:p.y,zIndex:m?8999:9999,display:"flex",flexDirection:"row",alignItems:"center",backgroundColor:_floating.floatingToolsColors.panel,borderTopLeftRadius:B?0:6,borderTopRightRadius:6,borderBottomLeftRadius:6,borderBottomRightRadius:6,borderWidth:o.isDragging?2:1,borderTopWidth:o.isDragging?2:B?0:1,borderStyle:"solid",borderColor:o.isDragging?_floating.floatingToolsColors.dragActive:(0,_floating.withAlpha)(_floating.floatingToolsColors.muted,"66"),boxShadow:o.isDragging?`0 6px 12px ${(0,_floating.withAlpha)(_floating.floatingToolsColors.dragActive,.36)}`:"0 4px 8px rgba(0, 0, 0, 0.3)",cursor:a?o.isDragging?"grabbing":"grab":void 0,userSelect:"none",touchAction:"none",pointerEvents:T?"none":"auto",...r==="strip"?{borderRadius:_nightTheme.night.radius.card,minHeight:48,backgroundColor:_nightTheme.night.color.surface,borderColor:o.isDragging?_nightTheme.night.color.accentBorderStrong:_nightTheme.night.color.separator,boxShadow:"0 4px 16px rgba(0, 0, 0, 0.24)"}:{}},children:[v&&(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",...I?{bottom:"100%"}:{top:"100%"},"--buoy-stack-bottom":I?"0px":"auto","--buoy-stack-top":I?"auto":"0px","--buoy-stack-space":`${I?y:A}px`,left:-1,width:_floating.VISIBLE_HANDLE_WIDTH,overflow:"visible",zIndex:1001},children:v}),(0,_jsxRuntime.jsxs)("div",{role:"button","aria-label":f,"data-testid":t?`${t}-grip`:"buoy-floating-grip",tabIndex:0,onPointerDown:z,onKeyDown:e=>{if(e.key!=="Enter"&&e.key!==" ")return;e.preventDefault();const n=i.toggleHideShow();d(o.position,n.targetPosition,()=>i.commitPosition(n.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",borderRight:`1px solid ${(0,_floating.withAlpha)(_floating.floatingToolsColors.muted,"66")}`,cursor:o.isDragging?"grabbing":"grab",...r==="strip"?{minHeight:48,backgroundColor:"transparent",borderRight:"none",flexDirection:"column"}:{}},children:[(0,_jsxRuntime.jsx)(GripVerticalIcon,{size:r==="strip"?20:12}),P]}),(0,_jsxRuntime.jsx)(_floating.FloatingToolsProvider,{value:{isDragging:o.isDragging,isHidden:o.isHidden},children:(0,_jsxRuntime.jsx)("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:6,paddingRight:8},children:F})}),!o.isHidden&&g&&(0,_jsxRuntime.jsx)("div",{"data-floating-accessory":true,style:{position:"absolute",...$?{bottom:"100%"}:{top:"100%"},left:0,width:"100%",maxHeight:Math.max(y,A),overflowY:"auto",zIndex:1002},children:g})]})}

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

@@ -1,32 +1 @@
-"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))
-  });
-}
+"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");function FloatingToolHost(){const o=(0,_react.useSyncExternalStore)(_floatingToolStore.subscribeFloatingTools,_floatingToolStore.getFloatingTools,_floatingToolStore.getFloatingTools);return(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"box-none",style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:1e4},children:o.map(e=>(0,_jsxRuntime.jsx)(_react.Fragment,{children:e.render({id:e.id,revealToken:e.revealToken,dismiss:()=>(0,_floatingToolStore.dismissFloatingTool)(e.id)})},e.id))})}

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

@@ -1,28 +1 @@
-"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))
-  });
-}
+"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");function FloatingToolHost(){const o=(0,_react.useSyncExternalStore)(_floatingToolStore.subscribeFloatingTools,_floatingToolStore.getFloatingTools,_floatingToolStore.getFloatingTools);return(0,_jsxRuntime.jsx)("div",{style:{position:"fixed",inset:0,pointerEvents:"none",zIndex:1e4},children:o.map(e=>(0,_jsxRuntime.jsx)(_react.Fragment,{children:e.render({id:e.id,revealToken:e.revealToken,dismiss:()=>(0,_floatingToolStore.dismissFloatingTool)(e.id)})},e.id))})}