@buoy-gg/core 7.0.35 → 7.0.38

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

@@ -13,7 +13,7 @@ var _DialPagination = require("./DialPagination.js");
 var _dialUsageStore = require("./dialUsageStore.js");
 var _DevToolsSettingsModal = require("../DevToolsSettingsModal");
 var _license = require("@buoy-gg/license");
-var _AppIcon = require("../AppIcon.js");
+var _AppIcon = require("../AppIcon");
 var _AppHost = require("../AppHost");
 var _OnboardingTooltip = require("./OnboardingTooltip");
 var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
@@ -24,6 +24,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 // the component via useWindowDimensions — a module-scope Dimensions.get
 // snapshot goes stale when the window resizes after load (web/desktop).
 const BUTTON_SIZE = _floatingToolsCore.DIAL_BUTTON_SIZE;
+/** The dial face is a circle, so its centre is the middle of the measured square. */
+const DIAL_BACKGROUND_FOCUS = {
+  x: 0.5,
+  y: 0.5
+};
+// Radius kept clear of grid spokes around the glass hub (its outer disc is
+// 0.75 × BUTTON_SIZE, plus a breath).
+const HUB_CLEARANCE = BUTTON_SIZE * 0.75 + 6;
 
 /**
  * The centre button's idle pulse, off by design.
@@ -100,6 +108,11 @@ const DialDevTools = ({
     },
     gridLine: {
       width: circleSize
+    },
+    // Each spoke is two segments that stop short of the glass hub, so the
+    // six lines never meet in the middle where the background shows through.
+    spoke: {
+      width: circleSize / 2 - HUB_CLEARANCE
     }
   }), [circleSize]);
 
@@ -225,7 +238,7 @@ const DialDevTools = ({
         iconComponent: typeof app.icon === "function" ? app.icon : undefined,
         color: app.color ?? _sharedUi.buoyColors.primary,
         onPress: () => {
-          // Record usage so frequently/recently used tools rank toward page 1.
+          // Put this tool first the next time the dial opens.
           void (0, _dialUsageStore.recordToolUsage)(app.id);
 
           // Call the app's onPress callback if provided, passing actions for
@@ -589,16 +602,23 @@ const DialDevTools = ({
             style: styles.gridPattern,
             children: Array.from({
               length: 6
-            }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: [styles.gridLine, sizeStyles.gridLine, {
                 transform: [{
                   rotate: `${i * 60}deg`
                 }]
-              }]
+              }],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.spoke, sizeStyles.spoke, styles.spokeLeft]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.spoke, sizeStyles.spoke, styles.spokeRight]
+              })]
             }, i))
           }), backgroundId === "hyperspace" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialHyperspace.DialHyperspace, {
             size: circleSize
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {})]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {
+            focus: DIAL_BACKGROUND_FOCUS
+          })]
         }), allDialIcons.filter(({
           page
         }) => page === safePage).map(({
@@ -757,9 +777,20 @@ const styles = _reactNative.StyleSheet.create({
   },
   gridLine: {
     position: "absolute",
+    height: 1
+  },
+  spoke: {
+    position: "absolute",
+    top: 0,
     height: 1,
     backgroundColor: _floatingToolsCore.dialColors.dialGridLine
   },
+  spokeLeft: {
+    left: 0
+  },
+  spokeRight: {
+    right: 0
+  },
   buttonContainer: {
     zIndex: 1,
     backgroundColor: "transparent",
@@ -770,6 +801,10 @@ const styles = _reactNative.StyleSheet.create({
     height: BUTTON_SIZE * 1.5,
     borderRadius: BUTTON_SIZE
   },
+  // The hub is glass: no rings, no opaque fill. The outer disc is a barely-
+  // there shade and the inner button a soft puck, so the tool background runs
+  // through the middle of the dial while BUOY / PRO stay legible. The spokes
+  // stop at HUB_CLEARANCE so nothing draws under it.
   buttonGradient: {
     width: "100%",
     height: "100%",
@@ -777,7 +812,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     padding: 4,
-    backgroundColor: _floatingToolsCore.dialColors.dialBackground,
+    backgroundColor: _floatingToolsCore.dialColors.hubHalo,
     position: "relative",
     overflow: "hidden"
   },
@@ -804,14 +839,12 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: BUTTON_SIZE
   },
   buttonBorder: {
-    backgroundColor: _floatingToolsCore.dialColors.dialGridLine,
+    backgroundColor: _floatingToolsCore.dialColors.hubFill,
     alignItems: "center",
     justifyContent: "center",
     width: BUTTON_SIZE * 1.2,
     height: BUTTON_SIZE * 1.2,
-    borderRadius: BUTTON_SIZE * 0.6,
-    borderWidth: 2,
-    borderColor: _floatingToolsCore.dialColors.dialBorder
+    borderRadius: BUTTON_SIZE * 0.6
   },
   button: {
     width: BUTTON_SIZE,

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

@@ -551,6 +551,8 @@ function DialMenu({
   // Computed values
   const buttonContainerSize = layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.containerRatio;
   const buttonBorderSize = layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.borderRatio;
+  // Grid spokes stop this far from the centre: the hub's outer disc plus a breath.
+  const hubClearance = layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.containerRatio / 2 + 6;
   const isAnimating = entranceComplete && !isExiting;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     role: "dialog",
@@ -626,10 +628,19 @@ function DialMenu({
           left: 0,
           right: 0,
           height: _floatingToolsReact.dialStyles.grid.lineHeight,
-          backgroundColor: _floatingToolsReact.dialColors.dialGridLine,
           transform: `rotate(${deg}deg)`,
           transformOrigin: 'center'
-        }
+        },
+        children: ['left', 'right'].map(side => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            position: 'absolute',
+            top: 0,
+            [side]: 0,
+            width: `calc(50% - ${hubClearance}px)`,
+            height: _floatingToolsReact.dialStyles.grid.lineHeight,
+            backgroundColor: _floatingToolsReact.dialColors.dialGridLine
+          }
+        }, side))
       }, deg)), paddedIcons.map((icon, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DialIconItem, {
         icon: icon,
         index: index,
@@ -649,7 +660,10 @@ function DialMenu({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: _floatingToolsReact.dialColors.dialBackground,
+          // Glass hub — see the native twin: a barely-there shade on the outer
+          // disc, a soft puck inside, no rings, so the tool background runs
+          // through the middle of the dial.
+          backgroundColor: _floatingToolsReact.dialColors.hubHalo,
           borderRadius: layout.buttonSize,
           overflow: 'hidden',
           transform: `scale(${centerButtonScale * centerPulseScale})`,
@@ -688,8 +702,7 @@ function DialMenu({
             width: buttonBorderSize,
             height: buttonBorderSize,
             borderRadius: layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.borderRadiusRatio,
-            backgroundColor: _floatingToolsReact.dialColors.dialGridLine,
-            border: `${_floatingToolsReact.dialStyles.centerButton.borderWidth}px solid ${_floatingToolsReact.dialColors.dialBorder}`,
+            backgroundColor: _floatingToolsReact.dialColors.hubFill,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'

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

@@ -11,14 +11,8 @@ 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.
+ * Persists dial usage and orders tools by their last launch.
+ * The cache loads on import so opening the dial can rank tools synchronously.
  */
 
 const STORAGE_KEY = _sharedUi.devToolsStorageKeys.dial.usage();
@@ -58,15 +52,15 @@ 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
- */
+/** Most recently opened first; unused tools keep registration order. */
 function getRankedToolIds(orderedIds) {
-  return (0, _floatingToolsCore.rankToolIds)(orderedIds, cache, Date.now());
+  return orderedIds.map((id, index) => ({
+    id,
+    index,
+    lastUsed: cache[id]?.lastUsed ?? 0
+  })).sort((a, b) => b.lastUsed - a.lastUsed || a.index - b.index).map(({
+    id
+  }) => id);
 }
 
 /**
@@ -77,7 +71,9 @@ function getRankedToolIds(orderedIds) {
 async function recordToolUsage(id) {
   if (!id) return;
   if (!loaded) await loadDialUsage();
-  const now = Date.now();
+
+  // Preserve launch order even when presses share a timestamp or the clock moves back.
+  const now = Math.max(Date.now(), ...Object.values(cache).map(entry => entry.lastUsed + 1));
   cache = (0, _floatingToolsCore.pruneUsage)((0, _floatingToolsCore.recordUsage)(cache, id, now), now);
   try {
     await _sharedUi.persistentStorage.setItem(STORAGE_KEY, JSON.stringify(cache));

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

@@ -3,68 +3,40 @@
 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;
-}
+Object.defineProperty(exports, "ARROW_BOTTOM_OFFSET", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.ARROW_BOTTOM_OFFSET;
+  }
+});
+Object.defineProperty(exports, "ARROW_HEIGHT", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.ARROW_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "SPACING_GAP", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.SPACING_GAP;
+  }
+});
+Object.defineProperty(exports, "calculateTargetPosition", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.calculateTargetPosition;
+  }
+});
+Object.defineProperty(exports, "calculateTooltipPosition", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.calculateTooltipPosition;
+  }
+});
+Object.defineProperty(exports, "getScreenCenterY", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.getScreenCenterY;
+  }
+});
+var _sharedUi = require("@buoy-gg/shared-ui");

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

@@ -3,32 +3,40 @@
 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;
-/**
- * Web twin of onboardingConstants.ts — same math, window.innerHeight instead
- * of RN Dimensions.
- */
-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
-
-function getScreenCenterY() {
-  return window.innerHeight / 2;
-}
-
-/** Distance from screen bottom for tooltip positioning (centered-ish). */
-function calculateTooltipPosition() {
-  const estimatedHalfHeight = 130; // ~half of (tooltip + arrow)
-  return getScreenCenterY() - estimatedHalfHeight;
-}
-
-/** Distance from screen bottom where the bubble should sit (under the arrow). */
-function calculateTargetPosition() {
-  const tooltipBottom = calculateTooltipPosition();
-  const arrowTipFromBottom = tooltipBottom + ARROW_BOTTOM_OFFSET;
-  const actualArrowTip = arrowTipFromBottom - ARROW_HEIGHT;
-  return actualArrowTip - SPACING_GAP;
-}
+Object.defineProperty(exports, "ARROW_BOTTOM_OFFSET", {
+  enumerable: true,
+  get: function () {
+    return _floating.ARROW_BOTTOM_OFFSET;
+  }
+});
+Object.defineProperty(exports, "ARROW_HEIGHT", {
+  enumerable: true,
+  get: function () {
+    return _floating.ARROW_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "SPACING_GAP", {
+  enumerable: true,
+  get: function () {
+    return _floating.SPACING_GAP;
+  }
+});
+Object.defineProperty(exports, "calculateTargetPosition", {
+  enumerable: true,
+  get: function () {
+    return _floating.calculateTargetPosition;
+  }
+});
+Object.defineProperty(exports, "calculateTooltipPosition", {
+  enumerable: true,
+  get: function () {
+    return _floating.calculateTooltipPosition;
+  }
+});
+Object.defineProperty(exports, "getScreenCenterY", {
+  enumerable: true,
+  get: function () {
+    return _floating.getScreenCenterY;
+  }
+});
+var _floating = require("@buoy-gg/shared-ui/floating");