@buoy-gg/core 1.7.2

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

@@ -0,0 +1,241 @@
+"use strict";
+
+import { useRef } from "react";
+import { StyleSheet, Pressable, View, Text, Dimensions, Animated } from "react-native";
+import { getDialLayout, getIconPosition, getIconStaggerInputRange, DIAL_START_ANGLE, dialColors, dialStyles, dialAnimationConfig } from "@buoy-gg/floating-tools-core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  width: SCREEN_WIDTH
+} = Dimensions.get("window");
+
+// Use shared layout calculation
+const layout = getDialLayout({
+  screenWidth: SCREEN_WIDTH
+});
+const VIEW_SIZE = layout.iconSize;
+const CIRCLE_SIZE = layout.circleSize;
+const CIRCLE_RADIUS = layout.circleRadius;
+export const DialIcon = ({
+  index,
+  icon,
+  iconsProgress,
+  onPress,
+  selectedIcon,
+  totalIcons
+}) => {
+  // Use shared position calculation from core
+  const iconPosition = getIconPosition(index, totalIcons, layout.iconRadius, DIAL_START_ANGLE);
+  const {
+    x: finalX,
+    y: finalY,
+    angle
+  } = iconPosition;
+  const radius = layout.iconRadius;
+
+  // Animation values - using interpolation for better performance
+  const scale = useRef(new Animated.Value(1)).current;
+
+  // Hover animation on press in/out - using shared config
+  // Fallback values in case dialAnimationConfig hasn't loaded yet
+  const iconAnimConfig = dialAnimationConfig?.icons ?? {
+    pressIn: {
+      scale: 0.95,
+      damping: 15,
+      stiffness: 400
+    },
+    pressOut: {
+      scale: 1,
+      damping: 15,
+      stiffness: 400
+    }
+  };
+  const {
+    pressIn,
+    pressOut
+  } = iconAnimConfig;
+  const handlePressIn = () => {
+    Animated.spring(scale, {
+      toValue: pressIn.scale,
+      damping: pressIn.damping,
+      stiffness: pressIn.stiffness,
+      useNativeDriver: true
+    }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: pressOut.scale,
+      damping: pressOut.damping,
+      stiffness: pressOut.stiffness,
+      useNativeDriver: true
+    }).start();
+  };
+
+  // Use shared stagger calculation from core
+  const staggerInputRange = getIconStaggerInputRange(index, totalIcons);
+
+  // Use interpolation for smooth animation that works both directions
+  const staggeredProgress = iconsProgress.interpolate({
+    inputRange: staggerInputRange,
+    outputRange: [0, 0, 1, 1],
+    extrapolate: "clamp"
+  });
+
+  // Spiral animation with interpolation
+  const spiralRotation = staggeredProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [Math.PI * 2, 0] // Spiral from 2π to 0
+  });
+
+  // Distance from center
+  const distance = staggeredProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, radius]
+  });
+
+  // Calculate X and Y positions using Animated operations
+  const translateX = Animated.add(Animated.multiply(distance, spiralRotation.interpolate({
+    inputRange: [0, Math.PI * 2],
+    outputRange: [Math.cos(angle), Math.cos(angle + Math.PI * 2)]
+  })), staggeredProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, finalX - radius * Math.cos(angle + Math.PI * 2)]
+  }));
+  const translateY = Animated.add(Animated.multiply(distance, spiralRotation.interpolate({
+    inputRange: [0, Math.PI * 2],
+    outputRange: [Math.sin(angle), Math.sin(angle + Math.PI * 2)]
+  })), staggeredProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, finalY - radius * Math.sin(angle + Math.PI * 2)]
+  }));
+
+  // Opacity animation
+  const itemOpacity = staggeredProgress.interpolate({
+    inputRange: [0, 0.3, 1],
+    outputRange: [0, 0.3, 1]
+  });
+
+  // Scale based on progress
+  const progressScale = staggeredProgress;
+
+  // Main animated style for position and appearance
+  const animatedStyle = {
+    position: "absolute",
+    left: CIRCLE_RADIUS - VIEW_SIZE / 2,
+    // Center position
+    top: CIRCLE_RADIUS - VIEW_SIZE / 2,
+    // Center position
+    opacity: itemOpacity,
+    transform: [{
+      translateX
+    },
+    // Apply translation from center
+    {
+      translateY
+    },
+    // Apply translation from center
+    {
+      scale: Animated.multiply(scale, progressScale)
+    }]
+  };
+
+  // Check if this is an empty spot (no icon and no iconComponent)
+  const isEmpty = icon.icon === null && !icon.iconComponent;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.view, animatedStyle],
+    children: isEmpty ?
+    /*#__PURE__*/
+    // Empty spot - just show a subtle circle
+    _jsx(View, {
+      style: styles.emptySpot,
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.emptyDot
+      })
+    }) : /*#__PURE__*/_jsxs(Pressable, {
+      onPress: () => onPress(index),
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      style: styles.pressable,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.iconGradientBg, {
+          backgroundColor: "rgba(0, 0, 0, 0.2)"
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.iconInnerGlow, {
+          backgroundColor: "rgba(255, 255, 255, 0.02)"
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.iconWrapper,
+        children: icon.iconComponent ? (() => {
+          const IconComp = icon.iconComponent;
+          return /*#__PURE__*/_jsx(IconComp, {
+            slot: "dial",
+            size: 32
+          });
+        })() : icon.icon
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.label,
+        numberOfLines: 1,
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.7,
+        children: icon.name.toUpperCase()
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  view: {
+    width: VIEW_SIZE,
+    height: VIEW_SIZE,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  pressable: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 4,
+    backgroundColor: "transparent"
+  },
+  iconGradientBg: {
+    position: "absolute",
+    width: "85%",
+    height: "85%",
+    borderRadius: 12,
+    opacity: 0.3
+  },
+  iconInnerGlow: {
+    position: "absolute",
+    width: "70%",
+    height: "70%",
+    borderRadius: 10,
+    opacity: 0.5
+  },
+  iconWrapper: {
+    marginBottom: 4,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    fontSize: dialStyles.icon.label.fontSize,
+    fontWeight: dialStyles.icon.label.fontWeight,
+    letterSpacing: dialStyles.icon.label.letterSpacing,
+    fontFamily: dialStyles.icon.label.fontFamily,
+    marginTop: dialStyles.icon.label.marginTop,
+    color: dialColors.iconLabel
+  },
+  emptySpot: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  emptyDot: {
+    width: dialStyles.emptySlot.dotSize,
+    height: dialStyles.emptySlot.dotSize,
+    borderRadius: dialStyles.emptySlot.dotSize / 2,
+    backgroundColor: dialColors.emptyDotBackground,
+    borderWidth: dialStyles.emptySlot.borderWidth,
+    borderColor: dialColors.emptyDotBorder
+  }
+});

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

@@ -0,0 +1,244 @@
+"use strict";
+
+import { useEffect, useRef } from "react";
+import { Animated, Pressable, StyleSheet, Text, View, Easing } from "react-native";
+import { dialColors, buoyColors } from "@buoy-gg/shared-ui";
+import { calculateTooltipPosition, ARROW_BOTTOM_OFFSET, ARROW_HEIGHT } from "./onboardingConstants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const OnboardingTooltip = ({
+  visible,
+  onDismiss,
+  title = "Welcome to Buoy Tools!",
+  message = "Tap the center button to configure and add developer tools to your dial menu."
+}) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0.8)).current;
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+  const arrowBounceAnim = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (visible) {
+      // Entrance animation
+      Animated.parallel([Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true
+      }), Animated.spring(scaleAnim, {
+        toValue: 1,
+        damping: 12,
+        stiffness: 150,
+        useNativeDriver: true
+      })]).start();
+
+      // Continuous pulse animation for the tooltip
+      Animated.loop(Animated.sequence([Animated.timing(pulseAnim, {
+        toValue: 1.02,
+        duration: 1500,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      }), Animated.timing(pulseAnim, {
+        toValue: 1,
+        duration: 1500,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      })])).start();
+
+      // Bouncing arrow animation
+      Animated.loop(Animated.sequence([Animated.timing(arrowBounceAnim, {
+        toValue: -8,
+        duration: 800,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      }), Animated.timing(arrowBounceAnim, {
+        toValue: 0,
+        duration: 800,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      })])).start();
+    } else {
+      // Exit animation
+      Animated.parallel([Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 200,
+        easing: Easing.in(Easing.ease),
+        useNativeDriver: true
+      }), Animated.timing(scaleAnim, {
+        toValue: 0.8,
+        duration: 200,
+        easing: Easing.in(Easing.ease),
+        useNativeDriver: true
+      })]).start();
+    }
+  }, [visible]);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.container, {
+      opacity: fadeAnim,
+      transform: [{
+        scale: scaleAnim
+      }]
+    }],
+    pointerEvents: "box-none",
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.tooltipContainer, {
+        transform: [{
+          scale: pulseAnim
+        }]
+      }],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.tooltip,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.glowEffect
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.content,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: title
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.message,
+            children: message
+          }), /*#__PURE__*/_jsx(Pressable, {
+            onPress: onDismiss,
+            style: ({
+              pressed
+            }) => [styles.button, pressed && styles.buttonPressed],
+            children: /*#__PURE__*/_jsx(View, {
+              style: styles.buttonGradient,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.buttonText,
+                children: "Got it!"
+              })
+            })
+          })]
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.arrowContainer, {
+            transform: [{
+              translateY: arrowBounceAnim
+            }]
+          }],
+          children: /*#__PURE__*/_jsx(View, {
+            style: styles.arrow
+          })
+        })]
+      })
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "box-none"
+  },
+  tooltipContainer: {
+    position: "absolute",
+    bottom: calculateTooltipPosition(),
+    alignItems: "center",
+    maxWidth: 280
+  },
+  tooltip: {
+    backgroundColor: dialColors.dialBackground,
+    borderRadius: 16,
+    borderWidth: 2,
+    borderColor: dialColors.dialBorder,
+    padding: 20,
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 20,
+    elevation: 10
+  },
+  glowEffect: {
+    position: "absolute",
+    top: -4,
+    left: -4,
+    right: -4,
+    bottom: -4,
+    borderRadius: 18,
+    backgroundColor: "#FFFFFF",
+    opacity: 0.15
+  },
+  content: {
+    alignItems: "center",
+    gap: 12
+  },
+  title: {
+    color: buoyColors.primary,
+    fontSize: 16,
+    fontWeight: "900",
+    fontFamily: "monospace",
+    letterSpacing: 1,
+    textAlign: "center",
+    textTransform: "uppercase",
+    textShadowColor: buoyColors.primary,
+    textShadowOffset: {
+      width: 0,
+      height: 0
+    },
+    textShadowRadius: 4
+  },
+  message: {
+    color: "#FFFFFF",
+    fontSize: 13,
+    lineHeight: 20,
+    textAlign: "center",
+    fontFamily: "monospace"
+  },
+  button: {
+    marginTop: 8,
+    borderRadius: 8,
+    overflow: "hidden",
+    borderWidth: 2,
+    borderColor: "#FFFFFF"
+  },
+  buttonPressed: {
+    opacity: 0.7,
+    transform: [{
+      scale: 0.96
+    }]
+  },
+  buttonGradient: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    alignItems: "center"
+  },
+  buttonText: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "900",
+    fontFamily: "monospace",
+    letterSpacing: 1.5,
+    textTransform: "uppercase"
+  },
+  arrowContainer: {
+    position: "absolute",
+    bottom: ARROW_BOTTOM_OFFSET,
+    left: 0,
+    right: 0,
+    alignItems: "center"
+  },
+  arrow: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: 12,
+    borderRightWidth: 12,
+    borderTopWidth: ARROW_HEIGHT,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    borderTopColor: buoyColors.primary,
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.8,
+    shadowRadius: 10
+  }
+});

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

@@ -0,0 +1,64 @@
+"use strict";
+
+import { Dimensions } from "react-native";
+
+/**
+ * Shared constants for onboarding tooltip positioning
+ * These ensure the floating menu aligns perfectly under the tooltip arrow
+ * All positions are calculated dynamically based on screen size
+ */
+
+// Arrow dimensions (relative positioning)
+export const ARROW_BOTTOM_OFFSET = -40; // Arrow extends below tooltip
+export const ARROW_HEIGHT = 20; // borderTopWidth of arrow
+export const SPACING_GAP = 10; // Gap between arrow tip and target element
+
+/**
+ * Calculate the center Y position of the screen
+ * This is used to vertically center the onboarding UI
+ *
+ * @returns Y coordinate at the center of the screen
+ */
+export function getScreenCenterY() {
+  const {
+    height: screenHeight
+  } = Dimensions.get("window");
+  return screenHeight / 2;
+}
+
+/**
+ * Calculate the tooltip position to center it vertically on screen
+ * Uses flexbox-style centering - tooltip will center itself with its actual size
+ *
+ * @returns Distance from screen bottom for tooltip positioning
+ */
+export function calculateTooltipPosition() {
+  // Position from center - tooltip will be centered with transform or flex
+  // We return a value that's slightly above center to account for the arrow below
+  const centerY = getScreenCenterY();
+
+  // Approximate offset to center the tooltip+arrow combo
+  // This is a reasonable estimate that works for most tooltip sizes
+  const estimatedHalfHeight = 130; // ~half of (tooltip + arrow)
+
+  return centerY - estimatedHalfHeight;
+}
+
+/**
+ * Calculate the position where a target element should be placed
+ * to align directly under the tooltip arrow
+ *
+ * @returns Distance from screen bottom where element should be positioned
+ */
+export function calculateTargetPosition() {
+  const tooltipBottom = calculateTooltipPosition();
+
+  // Arrow tip position = tooltip bottom + arrow offset (arrow extends below, so negative)
+  const arrowTipFromBottom = tooltipBottom + ARROW_BOTTOM_OFFSET;
+
+  // Subtract arrow height to get to the actual tip
+  const actualArrowTip = arrowTipFromBottom - ARROW_HEIGHT;
+
+  // Subtract spacing gap to position element below arrow
+  return actualArrowTip - SPACING_GAP;
+}