@buoy-gg/core 1.7.2

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

@@ -0,0 +1,246 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialIcon = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _jsxRuntime = require("react/jsx-runtime");
+const {
+  width: SCREEN_WIDTH
+} = _reactNative.Dimensions.get("window");
+
+// Use shared layout calculation
+const layout = (0, _floatingToolsCore.getDialLayout)({
+  screenWidth: SCREEN_WIDTH
+});
+const VIEW_SIZE = layout.iconSize;
+const CIRCLE_SIZE = layout.circleSize;
+const CIRCLE_RADIUS = layout.circleRadius;
+const DialIcon = ({
+  index,
+  icon,
+  iconsProgress,
+  onPress,
+  selectedIcon,
+  totalIcons
+}) => {
+  // Use shared position calculation from core
+  const iconPosition = (0, _floatingToolsCore.getIconPosition)(index, totalIcons, layout.iconRadius, _floatingToolsCore.DIAL_START_ANGLE);
+  const {
+    x: finalX,
+    y: finalY,
+    angle
+  } = iconPosition;
+  const radius = layout.iconRadius;
+
+  // Animation values - using interpolation for better performance
+  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+
+  // Hover animation on press in/out - using shared config
+  // Fallback values in case dialAnimationConfig hasn't loaded yet
+  const iconAnimConfig = _floatingToolsCore.dialAnimationConfig?.icons ?? {
+    pressIn: {
+      scale: 0.95,
+      damping: 15,
+      stiffness: 400
+    },
+    pressOut: {
+      scale: 1,
+      damping: 15,
+      stiffness: 400
+    }
+  };
+  const {
+    pressIn,
+    pressOut
+  } = iconAnimConfig;
+  const handlePressIn = () => {
+    _reactNative.Animated.spring(scale, {
+      toValue: pressIn.scale,
+      damping: pressIn.damping,
+      stiffness: pressIn.stiffness,
+      useNativeDriver: true
+    }).start();
+  };
+  const handlePressOut = () => {
+    _reactNative.Animated.spring(scale, {
+      toValue: pressOut.scale,
+      damping: pressOut.damping,
+      stiffness: pressOut.stiffness,
+      useNativeDriver: true
+    }).start();
+  };
+
+  // Use shared stagger calculation from core
+  const staggerInputRange = (0, _floatingToolsCore.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 = _reactNative.Animated.add(_reactNative.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 = _reactNative.Animated.add(_reactNative.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: _reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [styles.view, animatedStyle],
+    children: isEmpty ?
+    /*#__PURE__*/
+    // Empty spot - just show a subtle circle
+    (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.emptySpot,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.emptyDot
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      onPress: () => onPress(index),
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      style: styles.pressable,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.iconGradientBg, {
+          backgroundColor: "rgba(0, 0, 0, 0.2)"
+        }]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.iconInnerGlow, {
+          backgroundColor: "rgba(255, 255, 255, 0.02)"
+        }]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconWrapper,
+        children: icon.iconComponent ? (() => {
+          const IconComp = icon.iconComponent;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComp, {
+            slot: "dial",
+            size: 32
+          });
+        })() : icon.icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.label,
+        numberOfLines: 1,
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.7,
+        children: icon.name.toUpperCase()
+      })]
+    })
+  });
+};
+exports.DialIcon = DialIcon;
+const styles = _reactNative.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: _floatingToolsCore.dialStyles.icon.label.fontSize,
+    fontWeight: _floatingToolsCore.dialStyles.icon.label.fontWeight,
+    letterSpacing: _floatingToolsCore.dialStyles.icon.label.letterSpacing,
+    fontFamily: _floatingToolsCore.dialStyles.icon.label.fontFamily,
+    marginTop: _floatingToolsCore.dialStyles.icon.label.marginTop,
+    color: _floatingToolsCore.dialColors.iconLabel
+  },
+  emptySpot: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  emptyDot: {
+    width: _floatingToolsCore.dialStyles.emptySlot.dotSize,
+    height: _floatingToolsCore.dialStyles.emptySlot.dotSize,
+    borderRadius: _floatingToolsCore.dialStyles.emptySlot.dotSize / 2,
+    backgroundColor: _floatingToolsCore.dialColors.emptyDotBackground,
+    borderWidth: _floatingToolsCore.dialStyles.emptySlot.borderWidth,
+    borderColor: _floatingToolsCore.dialColors.emptyDotBorder
+  }
+});

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

@@ -0,0 +1,249 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OnboardingTooltip = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _onboardingConstants = require("./onboardingConstants.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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 = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const scaleAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0.8)).current;
+  const pulseAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const arrowBounceAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    if (visible) {
+      // Entrance animation
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 300,
+        easing: _reactNative.Easing.out(_reactNative.Easing.ease),
+        useNativeDriver: true
+      }), _reactNative.Animated.spring(scaleAnim, {
+        toValue: 1,
+        damping: 12,
+        stiffness: 150,
+        useNativeDriver: true
+      })]).start();
+
+      // Continuous pulse animation for the tooltip
+      _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(pulseAnim, {
+        toValue: 1.02,
+        duration: 1500,
+        easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(pulseAnim, {
+        toValue: 1,
+        duration: 1500,
+        easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
+        useNativeDriver: true
+      })])).start();
+
+      // Bouncing arrow animation
+      _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(arrowBounceAnim, {
+        toValue: -8,
+        duration: 800,
+        easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(arrowBounceAnim, {
+        toValue: 0,
+        duration: 800,
+        easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
+        useNativeDriver: true
+      })])).start();
+    } else {
+      // Exit animation
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 200,
+        easing: _reactNative.Easing.in(_reactNative.Easing.ease),
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(scaleAnim, {
+        toValue: 0.8,
+        duration: 200,
+        easing: _reactNative.Easing.in(_reactNative.Easing.ease),
+        useNativeDriver: true
+      })]).start();
+    }
+  }, [visible]);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [styles.container, {
+      opacity: fadeAnim,
+      transform: [{
+        scale: scaleAnim
+      }]
+    }],
+    pointerEvents: "box-none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.tooltipContainer, {
+        transform: [{
+          scale: pulseAnim
+        }]
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.tooltip,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.glowEffect
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.content,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.title,
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.message,
+            children: message
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+            onPress: onDismiss,
+            style: ({
+              pressed
+            }) => [styles.button, pressed && styles.buttonPressed],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.buttonGradient,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.buttonText,
+                children: "Got it!"
+              })
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          style: [styles.arrowContainer, {
+            transform: [{
+              translateY: arrowBounceAnim
+            }]
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.arrow
+          })
+        })]
+      })
+    })
+  });
+};
+exports.OnboardingTooltip = OnboardingTooltip;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "box-none"
+  },
+  tooltipContainer: {
+    position: "absolute",
+    bottom: (0, _onboardingConstants.calculateTooltipPosition)(),
+    alignItems: "center",
+    maxWidth: 280
+  },
+  tooltip: {
+    backgroundColor: _sharedUi.dialColors.dialBackground,
+    borderRadius: 16,
+    borderWidth: 2,
+    borderColor: _sharedUi.dialColors.dialBorder,
+    padding: 20,
+    shadowColor: _sharedUi.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: _sharedUi.buoyColors.primary,
+    fontSize: 16,
+    fontWeight: "900",
+    fontFamily: "monospace",
+    letterSpacing: 1,
+    textAlign: "center",
+    textTransform: "uppercase",
+    textShadowColor: _sharedUi.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: _onboardingConstants.ARROW_BOTTOM_OFFSET,
+    left: 0,
+    right: 0,
+    alignItems: "center"
+  },
+  arrow: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: 12,
+    borderRightWidth: 12,
+    borderTopWidth: _onboardingConstants.ARROW_HEIGHT,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    borderTopColor: _sharedUi.buoyColors.primary,
+    shadowColor: _sharedUi.buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.8,
+    shadowRadius: 10
+  }
+});

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

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPACING_GAP = exports.ARROW_HEIGHT = exports.ARROW_BOTTOM_OFFSET = void 0;
+exports.calculateTargetPosition = calculateTargetPosition;
+exports.calculateTooltipPosition = calculateTooltipPosition;
+exports.getScreenCenterY = getScreenCenterY;
+var _reactNative = require("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)
+const ARROW_BOTTOM_OFFSET = exports.ARROW_BOTTOM_OFFSET = -40; // Arrow extends below tooltip
+const ARROW_HEIGHT = exports.ARROW_HEIGHT = 20; // borderTopWidth of arrow
+const SPACING_GAP = exports.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
+ */
+function getScreenCenterY() {
+  const {
+    height: screenHeight
+  } = _reactNative.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
+ */
+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
+ */
+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;
+}