@buoy-gg/shared-ui 7.0.39 → 7.0.41

package/lib/web/chunks/chunk-CLLTZQGD.mjs

@@ -0,0 +1,596 @@
+"use client";
+import {
+  night
+} from "./chunk-XRNB2MHO.mjs";
+
+// src/ui/floating/onboardingConstants.web.ts
+var ARROW_BOTTOM_OFFSET = -40;
+var ARROW_HEIGHT = 20;
+var SPACING_GAP = 10;
+function getScreenCenterY() {
+  return window.innerHeight / 2;
+}
+function calculateTooltipPosition() {
+  const estimatedHalfHeight = 130;
+  return getScreenCenterY() - estimatedHalfHeight;
+}
+function calculateTargetPosition() {
+  const tooltipBottom = calculateTooltipPosition();
+  const arrowTipFromBottom = tooltipBottom + ARROW_BOTTOM_OFFSET;
+  const actualArrowTip = arrowTipFromBottom - ARROW_HEIGHT;
+  return actualArrowTip - SPACING_GAP;
+}
+
+// src/ui/floating/FloatingTool.web.tsx
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  Children
+} from "react";
+import {
+  useFloatingTools,
+  FloatingToolsProvider,
+  useFloatingToolsContext,
+  interleaveWithDividers,
+  floatingToolsColors,
+  withAlpha,
+  getUserStatusConfig,
+  getGripIconLayout,
+  interpolatePosition,
+  easing,
+  VISIBLE_HANDLE_WIDTH,
+  ANIMATION_DURATION
+} from "@buoy-gg/floating-tools-react/web/floating";
+import { jsx, jsxs } from "react/jsx-runtime";
+var webStorageAdapter = {
+  getItem: (key) => localStorage.getItem(key),
+  setItem: (key, value) => localStorage.setItem(key, value)
+};
+var NATIVE_TEXT_SECONDARY = "#A0A0A0";
+function GripVerticalIcon({
+  size = 24,
+  // native shared-ui GripVerticalIcon.tsx: buoyColors.textSecondary + "CC"
+  color = withAlpha(NATIVE_TEXT_SECONDARY, "CC")
+}) {
+  const layout = getGripIconLayout(size);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [0, 1].map((col) => /* @__PURE__ */ 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__ */ 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
+      ))
+    }
+  );
+}
+function Divider() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: 1,
+        height: 12,
+        backgroundColor: withAlpha(floatingToolsColors.muted, "66"),
+        flexShrink: 0
+      }
+    }
+  );
+}
+var userStatusColors = {
+  success: floatingToolsColors.success,
+  optional: floatingToolsColors.optional,
+  muted: floatingToolsColors.muted,
+  // native floatingTools.tsx: gameUIColorsCompat.secondary = buoyColors.textSecondary
+  secondary: NATIVE_TEXT_SECONDARY
+};
+function UserStatus({
+  userRole,
+  onPress
+}) {
+  const { isDragging } = useFloatingToolsContext();
+  const config = getUserStatusConfig(userRole, userStatusColors);
+  const handleClick = (e) => {
+    if (!isDragging && onPress) {
+      e.stopPropagation();
+      onPress();
+    }
+  };
+  return /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: 3,
+              backgroundColor: config.dotColor,
+              marginRight: 4
+            }
+          }
+        ),
+        /* @__PURE__ */ 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
+          }
+        )
+      ]
+    }
+  );
+}
+function useWebAnimation() {
+  const animationRef = useRef(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const animateTo = 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 / ANIMATION_DURATION, 1);
+        const newPosition = interpolatePosition(from, to, progress, easing.easeOutCubic);
+        setPosition(newPosition);
+        if (progress < 1) {
+          animationRef.current = requestAnimationFrame(animate);
+        } else {
+          setPosition(to);
+          onComplete?.();
+        }
+      };
+      animationRef.current = requestAnimationFrame(animate);
+    },
+    []
+  );
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+  return { position, setPosition, animateTo };
+}
+var 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 = useRef(null);
+  const storage = useMemo(() => id ? {
+    getItem: (key) => webStorageAdapter.getItem(`@buoy/floating-tool/${id}/${key}`),
+    setItem: (key, value) => webStorageAdapter.setItem(`@buoy/floating-tool/${id}/${key}`, value)
+  } : webStorageAdapter, [id]);
+  const { state, actions, isInitialized } = useFloatingTools({
+    screenSize: { width: window.innerWidth, height: window.innerHeight },
+    enablePositionPersistence,
+    storage
+  });
+  const { position: animatedPosition, setPosition: setAnimatedPosition, animateTo } = useWebAnimation();
+  useEffect(() => {
+    if (isInitialized) {
+      setAnimatedPosition(state.position);
+    }
+  }, [isInitialized, state.position, setAnimatedPosition]);
+  useEffect(() => {
+    if (!id) lastBubbleAnchor = { x: animatedPosition.x, y: animatedPosition.y };
+  }, [animatedPosition, id]);
+  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]);
+  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]);
+  const [isPointerDown, setIsPointerDown] = useState(false);
+  const handlePointerDown = useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsPointerDown(true);
+      actions.handleDragStart({ clientX: e.clientX, clientY: e.clientY });
+    },
+    [actions]
+  );
+  const surfaceGesture = 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 = useCallback(
+    (e) => {
+      const result = actions.handleDragMove({ clientX: e.clientX, clientY: e.clientY });
+      if (result.isDragging) {
+        setAnimatedPosition(result.position);
+      }
+    },
+    [actions, setAnimatedPosition]
+  );
+  const handlePointerUp = 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]
+  );
+  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]);
+  const statePositionRef = useRef(state.position);
+  statePositionRef.current = state.position;
+  const isHiddenRef = useRef(state.isHidden);
+  isHiddenRef.current = state.isHidden;
+  const pushedRef = useRef(false);
+  useEffect(() => {
+    if (!isInitialized) return;
+    if (pushToSide && !pushedRef.current) {
+      if (isHiddenRef.current) return;
+      pushedRef.current = true;
+      const { targetPosition } = actions.forceHide();
+      animateTo(statePositionRef.current, targetPosition, () => {
+      });
+    } else if (!pushToSide && pushedRef.current) {
+      pushedRef.current = false;
+      if (!isHiddenRef.current) return;
+      const { targetPosition } = actions.forceShow();
+      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]);
+  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, () => {
+    });
+  }, [centerOnboarding, isInitialized]);
+  const previousReveal = useRef(void 0);
+  useEffect(() => {
+    if (!isInitialized || previousReveal.current === revealToken) return;
+    previousReveal.current = revealToken;
+    if (revealToken !== void 0 && revealToken > 0 && state.isHidden) {
+      const { targetPosition } = actions.forceShow();
+      animateTo(state.position, targetPosition, () => actions.commitPosition(targetPosition));
+    }
+  }, [revealToken, isInitialized, state.isHidden, state.position, actions, animateTo]);
+  const actionsContent = useMemo(
+    () => variant === "strip" ? Children.toArray(children) : interleaveWithDividers(Children.toArray(children), (key) => /* @__PURE__ */ jsx(Divider, {}, key)),
+    [children, variant]
+  );
+  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__ */ jsxs(
+    "div",
+    {
+      ref: bubbleRef,
+      "data-testid": id ?? "buoy-floating-tool",
+      role: "toolbar",
+      "aria-label": "Floating Tools",
+      onPointerDown: dragFromSurface ? handleSurfacePointerDown : void 0,
+      style: {
+        position: "fixed",
+        left: animatedPosition.x,
+        top: animatedPosition.y,
+        zIndex: 9999,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: 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 ? floatingToolsColors.dragActive : withAlpha(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 ${withAlpha(floatingToolsColors.dragActive, 0.36)}` : "0 4px 8px rgba(0, 0, 0, 0.3)",
+        cursor: dragFromSurface ? state.isDragging ? "grabbing" : "grab" : void 0,
+        userSelect: "none",
+        touchAction: "none",
+        pointerEvents: suspendPointerEvents ? "none" : "auto",
+        ...variant === "strip" ? { borderRadius: night.radius.card, minHeight: 48, backgroundColor: night.color.surface, borderColor: state.isDragging ? night.color.accentBorderStrong : night.color.separator, boxShadow: "0 4px 16px rgba(0, 0, 0, 0.24)" } : {}
+      },
+      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__ */ 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: withAlpha(floatingToolsColors.muted, "1A"),
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: VISIBLE_HANDLE_WIDTH,
+              boxSizing: "border-box",
+              // RN width includes padding/border
+              borderRight: `1px solid ${withAlpha(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__ */ jsx(GripVerticalIcon, { size: variant === "strip" ? 20 : 12 }),
+              handleAdornment
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FloatingToolsProvider, { value: { isDragging: state.isDragging, isHidden: state.isHidden }, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 6,
+              paddingRight: 8
+            },
+            children: actionsContent
+          }
+        ) }),
+        !state.isHidden && accessory && /* @__PURE__ */ 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 })
+      ]
+    }
+  );
+}
+
+// src/stores/floatingToolStore.ts
+var entries = [];
+var revision = 0;
+var listeners = /* @__PURE__ */ new Set();
+var notify = () => listeners.forEach((listener) => listener());
+var getFloatingTools = () => entries;
+var subscribeFloatingTools = (listener) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+function openFloatingTool(tool) {
+  if (!tool.id.trim()) throw new Error("Floating tools need a non-empty id");
+  const entry = { ...tool, revealToken: ++revision };
+  entries = entries.some((value) => value.id === tool.id) ? entries.map((value) => value.id === tool.id ? entry : value) : [...entries, entry];
+  notify();
+}
+function dismissFloatingTool(id) {
+  if (!entries.some((entry) => entry.id === id)) return;
+  entries = entries.filter((entry) => entry.id !== id);
+  notify();
+}
+function registerPersistentFloatingTool(tool, storage) {
+  if (!tool.id.trim()) throw new Error("Floating tools need a non-empty id");
+  const key = `@buoy/floating-tool/${tool.id}/open`;
+  let disposed = false;
+  let changed = false;
+  let wasOpen = entries.some((entry) => entry.id === tool.id);
+  let writes = Promise.resolve();
+  const unsubscribe = subscribeFloatingTools(() => {
+    const isOpen = entries.some((entry) => entry.id === tool.id);
+    if (isOpen === wasOpen) return;
+    wasOpen = isOpen;
+    changed = true;
+    writes = writes.then(() => storage.setItem(key, isOpen ? "1" : "0")).then(() => {
+    }, () => {
+    });
+  });
+  void storage.getItem(key).then((saved) => {
+    if (disposed || changed || wasOpen || saved !== "1") return;
+    entries = [...entries, { ...tool, revealToken: 0 }];
+    notify();
+  }).catch(() => {
+  });
+  return () => {
+    disposed = true;
+    unsubscribe();
+  };
+}
+
+// src/ui/floating/FloatingToolHost.web.tsx
+import { Fragment, useSyncExternalStore } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function FloatingToolHost() {
+  const entries2 = useSyncExternalStore(subscribeFloatingTools, getFloatingTools, getFloatingTools);
+  return /* @__PURE__ */ jsx2("div", { style: { position: "fixed", inset: 0, pointerEvents: "none", zIndex: 1e4 }, children: entries2.map((entry) => /* @__PURE__ */ jsx2(Fragment, { children: entry.render({ id: entry.id, revealToken: entry.revealToken, dismiss: () => dismissFloatingTool(entry.id) }) }, entry.id)) });
+}
+
+export {
+  ARROW_BOTTOM_OFFSET,
+  ARROW_HEIGHT,
+  SPACING_GAP,
+  getScreenCenterY,
+  calculateTooltipPosition,
+  calculateTargetPosition,
+  Divider,
+  UserStatus,
+  getBubbleAnchorPosition,
+  FloatingTool,
+  getFloatingTools,
+  subscribeFloatingTools,
+  openFloatingTool,
+  dismissFloatingTool,
+  registerPersistentFloatingTool,
+  FloatingToolHost
+};