@buoy-gg/shared-ui 7.0.41 → 7.0.42

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

@@ -1,596 +0,0 @@
-"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
-};