@buoy-gg/core 2.1.15 → 3.0.0

package/lib/commonjs/floatingMenu/dial/DialDevTools.web.js

@@ -214,8 +214,14 @@ function DialMenu({
   }), []);
   const gridRotations = (0, _react.useMemo)(() => (0, _floatingToolsReact.getGridLineRotations)(), []);
   const positions = (0, _react.useMemo)(() => (0, _floatingToolsReact.getAllIconPositions)(_floatingToolsReact.MAX_DIAL_SLOTS, layout.iconRadius), [layout.iconRadius]);
+
+  // Pagination: tools are split across pages of MAX_DIAL_SLOTS.
+  const [currentPage, setCurrentPage] = (0, _react.useState)(0);
+  const pageCount = Math.max(1, Math.ceil(icons.length / _floatingToolsReact.MAX_DIAL_SLOTS));
+  const safePage = Math.min(currentPage, pageCount - 1);
   const paddedIcons = (0, _react.useMemo)(() => {
-    const result = [...icons.slice(0, _floatingToolsReact.MAX_DIAL_SLOTS)];
+    const start = safePage * _floatingToolsReact.MAX_DIAL_SLOTS;
+    const result = [...icons.slice(start, start + _floatingToolsReact.MAX_DIAL_SLOTS)];
     while (result.length < _floatingToolsReact.MAX_DIAL_SLOTS) {
       result.push({
         id: `empty-${result.length}`,
@@ -225,7 +231,7 @@ function DialMenu({
       });
     }
     return result;
-  }, [icons]);
+  }, [icons, safePage]);
 
   // Inject keyframes
   (0, _react.useEffect)(() => {
@@ -402,10 +408,37 @@ function DialMenu({
     }, interaction.iconSelect.actionDelay);
   }, [interaction.iconSelect, handleClose]);
 
+  // Page navigation - icons are keyed by slot index, so this only swaps
+  // their content in place (no remount, no re-animation) for an instant page
+  // change.
+  const handlePageChange = (0, _react.useCallback)(next => {
+    if (isClosingRef.current) return;
+    const clamped = Math.max(0, Math.min(next, pageCount - 1));
+    if (clamped !== safePage) setCurrentPage(clamped);
+  }, [pageCount, safePage]);
+
   // Computed values
   const buttonContainerSize = layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.containerRatio;
   const buttonBorderSize = layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.borderRatio;
   const isAnimating = entranceComplete && !isExiting;
+  const pagerButtonStyle = disabled => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+    padding: '8px 16px',
+    borderRadius: 10,
+    border: `1px solid ${_floatingToolsReact.dialColors.dialBorder}`,
+    backgroundColor: _floatingToolsReact.dialColors.dialBackground,
+    color: disabled ? _floatingToolsReact.dialColors.emptyDotBorder : _floatingToolsReact.dialColors.dialShadow,
+    fontSize: 12,
+    fontWeight: 900,
+    fontFamily: 'monospace',
+    letterSpacing: 1.5,
+    textTransform: 'uppercase',
+    cursor: disabled ? 'default' : 'pointer',
+    opacity: disabled ? 0.4 : 1,
+    boxShadow: disabled ? 'none' : `0 0 8px ${_floatingToolsReact.dialColors.dialShadow}66`
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     role: "dialog",
     "aria-label": "Dial Menu",
@@ -430,11 +463,15 @@ function DialMenu({
         backgroundColor: _floatingToolsReact.dialColors.dialBackdrop,
         opacity: backdropOpacity
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
-        animation: isAnimating ? cssAnimations.floating : 'none'
+        animation: isAnimating ? cssAnimations.floating : 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 16
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           animation: triggerGlitch > 0 && isAnimating ? cssAnimations.glitch : 'none'
         },
@@ -497,7 +534,7 @@ function DialMenu({
             position: positions[index],
             progress: iconProgress,
             onPress: () => handleIconPress(icon)
-          }, icon.id)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          }, index)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             style: {
               position: 'absolute',
               left: '50%',
@@ -587,7 +624,45 @@ function DialMenu({
             })]
           })]
         })
-      }, triggerGlitch)
+      }, triggerGlitch), pageCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          opacity: Math.min(1, dialScale)
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          "aria-label": "Previous dial page",
+          disabled: safePage <= 0,
+          onClick: () => handlePageChange(safePage - 1),
+          style: pagerButtonStyle(safePage <= 0),
+          children: "\u2039 PREV"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          style: {
+            fontSize: 13,
+            fontWeight: 900,
+            fontFamily: 'monospace',
+            letterSpacing: 2,
+            color: '#FFFFFF',
+            textShadow: `0 0 6px ${_floatingToolsReact.dialColors.dialShadow}`
+          },
+          children: [String(safePage + 1).padStart(2, '0'), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            style: {
+              color: _floatingToolsReact.dialColors.iconLabel,
+              textShadow: 'none'
+            },
+            children: [' / ', String(pageCount).padStart(2, '0')]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          "aria-label": "Next dial page",
+          disabled: safePage >= pageCount - 1,
+          onClick: () => handlePageChange(safePage + 1),
+          style: pagerButtonStyle(safePage >= pageCount - 1),
+          children: "NEXT \u203A"
+        })]
+      })]
     })]
   });
 }

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

@@ -8,36 +8,25 @@ 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;
+// The circle radius depends on the live window width and is computed inside
+// the component (must match DialDevTools' circle, which does the same).
+const VIEW_SIZE = _floatingToolsCore.DIAL_ICON_SIZE;
 const DialIcon = ({
   index,
   icon,
   iconsProgress,
   onPress,
-  selectedIcon,
-  totalIcons
+  totalIcons,
+  active
 }) => {
-  // 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;
+  const {
+    width: screenWidth
+  } = (0, _reactNative.useWindowDimensions)();
+  const layout = (0, _react.useMemo)(() => (0, _floatingToolsCore.getDialLayout)({
+    screenWidth
+  }), [screenWidth]);
 
   // Hover animation on press in/out - using shared config
   // Fallback values in case dialAnimationConfig hasn't loaded yet
@@ -74,78 +63,92 @@ const DialIcon = ({
     }).start();
   };
 
-  // Use shared stagger calculation from core
-  const staggerInputRange = (0, _floatingToolsCore.getIconStaggerInputRange)(index, totalIcons);
+  // Position + spiral-entrance interpolations depend only on the (fixed) slot
+  // index, so compute them once. This keeps re-renders — which happen on every
+  // page change as `active` toggles — cheap.
+  const motion = (0, _react.useMemo)(() => {
+    const iconPosition = (0, _floatingToolsCore.getIconPosition)(index, totalIcons, layout.iconRadius, _floatingToolsCore.DIAL_START_ANGLE);
+    const {
+      x: finalX,
+      y: finalY,
+      angle
+    } = iconPosition;
+    const radius = layout.iconRadius;
+    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"
-  });
+    // 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
-  });
+    // 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]
-  });
+    // 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)]
-  }));
+    // 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;
+    // Opacity animation
+    const itemOpacity = staggeredProgress.interpolate({
+      inputRange: [0, 0.3, 1],
+      outputRange: [0, 0.3, 1]
+    });
+    return {
+      translateX,
+      translateY,
+      itemOpacity,
+      progressScale: staggeredProgress
+    };
+  }, [index, totalIcons, iconsProgress, layout]);
 
   // Main animated style for position and appearance
   const animatedStyle = {
     position: "absolute",
-    left: CIRCLE_RADIUS - VIEW_SIZE / 2,
+    left: layout.circleRadius - VIEW_SIZE / 2,
     // Center position
-    top: CIRCLE_RADIUS - VIEW_SIZE / 2,
+    top: layout.circleRadius - VIEW_SIZE / 2,
     // Center position
-    opacity: itemOpacity,
+    opacity: motion.itemOpacity,
     transform: [{
-      translateX
+      translateX: motion.translateX
     },
     // Apply translation from center
     {
-      translateY
+      translateY: motion.translateY
     },
     // Apply translation from center
     {
-      scale: _reactNative.Animated.multiply(scale, progressScale)
+      scale: _reactNative.Animated.multiply(scale, motion.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],
+    style: [styles.view, animatedStyle, !active && styles.hidden],
     children: isEmpty ?
     /*#__PURE__*/
     // Empty spot - just show a subtle circle
@@ -155,7 +158,7 @@ const DialIcon = ({
         style: styles.emptyDot
       })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-      onPress: () => onPress(index),
+      onPress: () => onPress(icon),
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       style: styles.pressable,
@@ -194,6 +197,9 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center",
     alignItems: "center"
   },
+  hidden: {
+    display: "none"
+  },
   pressable: {
     width: "100%",
     height: "100%",

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

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialPagination = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Pad a 1-based page number to two digits, e.g. 3 -> "03". */
+const pad = n => String(n).padStart(2, "0");
+/**
+ * A single pager button. Press feedback is driven by a native-driver
+ * `Animated` value via `onPressIn`/`onPressOut` — so the scale reacts
+ * instantly on the UI thread, with no JS re-render in the press path.
+ */
+const PagerButton = ({
+  side,
+  label,
+  disabled,
+  onPress
+}) => {
+  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const springTo = toValue => {
+    _reactNative.Animated.spring(scale, {
+      toValue,
+      damping: 15,
+      stiffness: 400,
+      useNativeDriver: true
+    }).start();
+  };
+  const accent = disabled ? _floatingToolsCore.dialColors.emptyDotBorder : _sharedUi.buoyColors.primary;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: {
+      transform: [{
+        scale
+      }]
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: `${side === "prev" ? "Previous" : "Next"} dial page`,
+      accessibilityState: {
+        disabled
+      },
+      disabled: disabled,
+      onPress: onPress,
+      onPressIn: () => !disabled && springTo(0.92),
+      onPressOut: () => springTo(1),
+      style: [styles.button, disabled && styles.buttonDisabled],
+      children: [side === "prev" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronLeft, {
+        size: 18,
+        color: accent
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.buttonText, disabled && styles.buttonTextDisabled],
+        children: label
+      }), side === "next" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
+        size: 18,
+        color: accent
+      })]
+    })
+  });
+};
+
+/**
+ * Prev/Next pager shown below the dial when there are more dial tools than
+ * fit on a single page. Tools are ranked by usage, so paging walks from the
+ * most-used tools toward the least-used.
+ */
+const DialPagination = ({
+  page,
+  pageCount,
+  onPrev,
+  onNext,
+  animatedStyle
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.container, animatedStyle],
+    pointerEvents: "box-none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PagerButton, {
+      side: "prev",
+      label: "PREV",
+      disabled: page <= 0,
+      onPress: onPrev
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.indicator,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.indicatorText,
+        children: [pad(page + 1), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.indicatorTextDim,
+          children: [" / ", pad(pageCount)]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PagerButton, {
+      side: "next",
+      label: "NEXT",
+      disabled: page >= pageCount - 1,
+      onPress: onNext
+    })]
+  });
+};
+exports.DialPagination = DialPagination;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _floatingToolsCore.dialColors.dialBorder,
+    backgroundColor: _floatingToolsCore.dialColors.dialBackground,
+    shadowColor: _floatingToolsCore.dialColors.dialShadow,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 8,
+    elevation: 6
+  },
+  buttonDisabled: {
+    opacity: 0.4
+  },
+  buttonText: {
+    color: _sharedUi.buoyColors.primary,
+    fontSize: 12,
+    fontWeight: "900",
+    fontFamily: "monospace",
+    letterSpacing: 1.5,
+    textShadowColor: _sharedUi.buoyColors.primary,
+    textShadowOffset: {
+      width: 0,
+      height: 0
+    },
+    textShadowRadius: 4
+  },
+  buttonTextDisabled: {
+    color: _floatingToolsCore.dialColors.emptyDotBorder,
+    textShadowRadius: 0
+  },
+  indicator: {
+    paddingHorizontal: 12,
+    paddingVertical: 6
+  },
+  indicatorText: {
+    color: "#FFFFFF",
+    fontSize: 13,
+    fontWeight: "900",
+    fontFamily: "monospace",
+    letterSpacing: 2,
+    textShadowColor: _floatingToolsCore.dialColors.dialShadow,
+    textShadowOffset: {
+      width: 0,
+      height: 0
+    },
+    textShadowRadius: 6
+  },
+  indicatorTextDim: {
+    color: _floatingToolsCore.dialColors.iconLabel,
+    textShadowRadius: 0
+  }
+});

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

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRankedToolIds = getRankedToolIds;
+exports.isDialUsageLoaded = isDialUsageLoaded;
+exports.loadDialUsage = loadDialUsage;
+exports.recordToolUsage = recordToolUsage;
+exports.resetDialUsage = resetDialUsage;
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+/**
+ * Dial Usage Store - persists and ranks dial tool usage.
+ *
+ * Wraps the pure scoring logic from `@buoy-gg/floating-tools-core` with a
+ * persisted, in-memory cache. The dial menu uses this to order tools by how
+ * recently/frequently they are used, so the most-used tools land on page 1.
+ *
+ * The cache is loaded eagerly on import so `getRankedToolIds` can run
+ * synchronously by the time the dial opens.
+ */
+
+const STORAGE_KEY = _sharedUi.devToolsStorageKeys.dial.usage();
+let cache = {};
+let loaded = false;
+let loadPromise = null;
+
+/**
+ * Load persisted usage data into the in-memory cache. Safe to call multiple
+ * times — the underlying read happens only once.
+ */
+function loadDialUsage() {
+  if (loadPromise) return loadPromise;
+  loadPromise = (async () => {
+    try {
+      const raw = await _sharedUi.persistentStorage.getItem(STORAGE_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (parsed && typeof parsed === "object") {
+          cache = parsed;
+        }
+      }
+    } catch {
+      // Ignore — start with an empty usage map.
+    } finally {
+      loaded = true;
+    }
+  })();
+  return loadPromise;
+}
+
+// Kick off the load as soon as this module is imported.
+void loadDialUsage();
+
+/** Whether the usage cache has finished loading from storage. */
+function isDialUsageLoaded() {
+  return loaded;
+}
+
+/**
+ * Rank tool ids by recency-weighted usage, highest first. Synchronous —
+ * operates against the in-memory cache. Never-used tools keep their original
+ * order as a tie-breaker.
+ *
+ * @param orderedIds - Tool ids in their default/registration order
+ */
+function getRankedToolIds(orderedIds) {
+  return (0, _floatingToolsCore.rankToolIds)(orderedIds, cache, Date.now());
+}
+
+/**
+ * Record a single press of a tool and persist the updated usage map.
+ *
+ * @param id - Tool id that was pressed
+ */
+async function recordToolUsage(id) {
+  if (!id) return;
+  if (!loaded) await loadDialUsage();
+  const now = Date.now();
+  cache = (0, _floatingToolsCore.pruneUsage)((0, _floatingToolsCore.recordUsage)(cache, id, now), now);
+  try {
+    await _sharedUi.persistentStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
+  } catch {
+    // Ignore persistence failure — the in-memory cache is still updated.
+  }
+}
+
+/** Clear all usage data (in-memory and persisted). */
+async function resetDialUsage() {
+  cache = {};
+  try {
+    await _sharedUi.persistentStorage.removeItem(STORAGE_KEY);
+  } catch {
+    // Ignore — the in-memory cache is already cleared.
+  }
+}