@buoy-gg/core 7.0.36 → 7.0.38

package/lib/commonjs/floatingMenu/DevToolsSettingsModal.web.js

@@ -54,6 +54,9 @@ const night = {
   surfaceElevated: '#161618',
   border: '#1A1A1C',
   separator: 'rgba(255, 255, 255, 0.08)',
+  glass: 'rgba(5, 5, 5, 0.50)',
+  glassElevated: 'rgba(255, 255, 255, 0.06)',
+  glassBorder: 'rgba(255, 255, 255, 0.07)',
   fillTertiary: 'rgba(255, 255, 255, 0.12)',
   buttonSurface: 'rgba(8, 10, 14, 0.85)',
   button: '#1C1C1C',
@@ -140,28 +143,6 @@ const Sparkles = ({
   })]
 });
 
-/** Fallback for shared-ui SentryBugIcon (native sentry row icon, red). */
-const AlertTriangle = ({
-  size = 24,
-  color = 'currentColor'
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: color,
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 9v4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 17h.01"
-  })]
-});
-
 /** shared-ui Info icon (native default tool icon). */
 const Info = ({
   size = 24,
@@ -298,10 +279,9 @@ function ToolIcon({
         size: size
       });
     case 'sentry':
-      // native: SentryBugIcon colorPreset="red" noBackground
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertTriangle, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.SentryIcon, {
         size: size,
-        color: night.danger
+        color: "#9945FF"
       });
     case 'storage':
       // native passes bgColor=night surface for the BIF knock-out parts
@@ -437,11 +417,11 @@ function Footnote({
   });
 }
 
-/** native NightCard: #0C0C0C, radius 14, 1px #1A1A1C, clipped */
+/** native NightCard glass: 50% black, radius 14, 1px white-alpha hairline, clipped */
 const cardStyle = {
-  backgroundColor: night.surface,
+  backgroundColor: night.glass,
   borderRadius: 14,
-  border: `1px solid ${night.border}`,
+  border: `1px solid ${night.glassBorder}`,
   overflow: 'hidden'
 };
 
@@ -786,8 +766,8 @@ function SettingsModal({
   const displayTabs = _floatingToolsReact.settingsTabs.filter(tab => tab.key !== 'pro');
 
   // Segmented control rendered inside the JsModal header — native passes a
-  // NightSegmented as header.customContent the same way. Track = night bg at
-  // radius 10 / padding 3; active thumb = surfaceElevated at radius 8 with
+  // NightSegmented glass as header.customContent the same way. Track = glass
+  // at radius 10 / padding 3; active thumb = glassElevated at radius 8 with
   // the accent underline glow (the Everlights All/Day tabs).
   const tabHeader = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
@@ -802,9 +782,9 @@ function SettingsModal({
       style: {
         flex: 1,
         display: 'flex',
-        backgroundColor: night.bg,
+        backgroundColor: night.glass,
         borderRadius: 10,
-        border: `1px solid ${night.border}`,
+        border: `1px solid ${night.glassBorder}`,
         padding: 3,
         boxSizing: 'border-box'
       },
@@ -822,7 +802,7 @@ function SettingsModal({
             padding: '8px 0',
             borderRadius: 8,
             border: 'none',
-            backgroundColor: isActive ? night.surfaceElevated : 'transparent',
+            backgroundColor: isActive ? night.glassElevated : 'transparent',
             color: isActive ? night.text : night.textSecondary,
             fontSize: 13,
             fontWeight: isActive ? 600 : 500,
@@ -1007,7 +987,7 @@ function SettingsModal({
                     },
                     children: savedKeys.map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                       style: {
-                        backgroundColor: night.surfaceElevated,
+                        backgroundColor: night.glassElevated,
                         borderRadius: 8,
                         padding: '7px 10px',
                         marginBottom: 4

package/lib/commonjs/floatingMenu/FloatingDevTools.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FloatingDevTools = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _AppHost = require("./AppHost");
@@ -12,10 +13,9 @@ var _ToolOpenerBridge = require("./ToolOpenerBridge.js");
 var _autoDiscoverPresets = require("./autoDiscoverPresets.js");
 var _installPing = require("../telemetry/installPing.js");
 var _Buoy = require("../Buoy.js");
-var _AppIcon = require("./AppIcon.js");
+var _AppIcon = require("./AppIcon");
 var _DevToolsVisibilityContext = require("./DevToolsVisibilityContext.js");
 var _optionalRequire = require("./optionalRequire.js");
-var _sharedUi = require("@buoy-gg/shared-ui");
 var _MinimizedToolsContext = require("./MinimizedToolsContext.js");
 var _defaultConfig = require("./defaultConfig.js");
 var _DefaultConfigContext = require("./DefaultConfigContext.js");
@@ -124,7 +124,7 @@ const FloatingDevTools = ({
   disableHints = false,
   defaultFloatingTools,
   defaultDialTools,
-  requireLicense = false,
+  requireLicense: _requireLicense,
   licenseKey: licenseKeyProp,
   zustandStores,
   environment,
@@ -142,24 +142,27 @@ const FloatingDevTools = ({
     isLicensed
   } = (0, _license.useProAccess)();
 
-  // Get full license state for requireLicense gating
+  // Account admission is mandatory; paid feature gates remain separate.
   const {
     licenseKey,
     isInitialized,
-    tier
+    tier,
+    access
   } = (0, _license.useLicense)();
+  const configuredMatches = licenseKeyProp === undefined || licenseKeyProp.trim().toUpperCase() === (licenseKey ?? "");
+  const accountAdmitted = configuredMatches && access.status === "admitted";
 
   // Anonymous install ping — dev-only, once a day, no project or tool data.
-  // Deliberately waits for the license to resolve so the tier it reports is
-  // the real one rather than the "anonymous" the manager starts at.
+  // Deliberately waits for admission to resolve so what it reports is the
+  // real outcome (the account's tier, or "locked") rather than the manager's
+  // starting state.
   (0, _react.useEffect)(() => {
-    if (!isInitialized) return;
+    if (!isInitialized || access.status === "initializing") return;
     void (0, _installPing.sendInstallPing)({
-      tier,
+      tier: access.status === "admitted" ? tier : "locked",
       enabled: (0, _Buoy.isTelemetryEnabled)()
     });
-  }, [isInitialized, tier]);
-  const [showLicenseModal, setShowLicenseModal] = (0, _react.useState)(false);
+  }, [isInitialized, access.status, tier]);
 
   // Initialize license manager on mount, and set/clear license key when prop changes.
   // The `licenseKey` prop is the source of truth WHEN PROVIDED:
@@ -167,28 +170,12 @@ const FloatingDevTools = ({
   //   - "" (blank) → EXPLICITLY clear the cached license (key was removed)
   //   - undefined  → don't touch it (the app may set a key via Buoy.init())
   (0, _react.useEffect)(() => {
-    if (licenseKeyProp && licenseKeyProp.trim() !== "") {
-      _license.LicenseManager.initialize().then(() => _license.LicenseManager.setLicenseKey(licenseKeyProp)).catch(() => {});
-    } else if (licenseKeyProp === "") {
-      // Explicit removal: wipe the 30-day cache so Pro actually turns off.
-      _license.LicenseManager.initialize().then(() => _license.LicenseManager.clearLicense()).catch(() => {});
-    } else {
-      _license.LicenseManager.initialize();
-    }
+    void _license.LicenseManager.configure(licenseKeyProp).catch(() => {});
   }, [licenseKeyProp]);
 
-  // Show license modal if requireLicense is enabled and no valid license
-  (0, _react.useEffect)(() => {
-    if (requireLicense && isInitialized && !licenseKey) {
-      setShowLicenseModal(true);
-    } else if (licenseKey) {
-      setShowLicenseModal(false);
-    }
-  }, [requireLicense, isInitialized, licenseKey]);
-
   // Register zustand stores once on mount if provided
   (0, _react.useEffect)(() => {
-    if (!zustandStores) return;
+    if (!zustandStores || access.status === "locked") return;
     try {
       const {
         watchStores
@@ -197,7 +184,7 @@ const FloatingDevTools = ({
     } catch (e) {
       (0, _optionalRequire.reportOptionalRequireError)("@buoy-gg/zustand", e);
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [zustandStores, access.status]);
 
   // Normalize dial tools configuration (truncates to max 6 with warning if needed)
   const normalizedDialTools = (0, _react.useMemo)(() => {
@@ -454,17 +441,16 @@ const FloatingDevTools = ({
 
   // Gate: only a PAID license works outside development.
   //
-  // Both untiered surfaces below it — anonymous (no key) and free (a key on the
-  // Free policy) — stay dev-only. `isLicensed` is safe to gate on because
-  // `isPro` is a strict mirror of `tier === "pro"`, so a free key reports false
-  // here even though it validates perfectly well.
+  // A free key (and, of course, no key at all) stays dev-only. `isLicensed` is
+  // safe to gate on because `isPro` is a strict mirror of `tier === "pro"`, so
+  // a free key reports false here even though it validates perfectly well.
   //
   // When Business on-device login lands, this becomes the boundary that a
   // logged-in QA/support seat crosses WITHOUT a key in the build — i.e.
   // `isLicensed || tierSource === "session"`. Nothing else should.
   const isDevelopment = typeof __DEV__ !== "undefined" && __DEV__;
   if (!isDevelopment && !isLicensed) {
-    // Anonymous or free user in production - don't render DevTools.
+    // Free or unadmitted user in production - don't render DevTools.
     // NOTE for whoever relaxes this for the free tier: desktop sync does NOT
     // ride on this check. It re-tests `isLicensed` itself (externalSyncGate),
     // so opening this door does not open a broker socket. Keep it that way.
@@ -491,10 +477,16 @@ const FloatingDevTools = ({
     requiredEnvVars: requiredEnvVars,
     customApps: syncApps
   });
+  if (!accountAdmitted) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [access.status === "initializing" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [ReduxAutoInstrument && /*#__PURE__*/(0, _jsxRuntime.jsx)(ReduxAutoInstrument, {}), ConsoleRoot && /*#__PURE__*/(0, _jsxRuntime.jsx)(ConsoleRoot, {}), RouteTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteTracker, {}), ReactQueryTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactQueryTracker, {})]
+      }), !headless && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AccountSetup, {})]
+    });
+  }
 
   // Headless (sync-only): tool adapters + route tracking + desktop sync, no
-  // on-device UI. requireLicense is intentionally skipped — there's nothing
-  // to gate. All hooks above already ran, so hook order is preserved, and
+  // on-device UI. Account admission above applies to this path too. All hooks above already ran, so hook order is preserved, and
   // AutoExternalSync still obeys `syncEnabled` (the broker must never be
   // contacted from a shipped build that didn't ask for it).
   if (headless) {
@@ -510,16 +502,6 @@ const FloatingDevTools = ({
     });
   }
 
-  // Gate: If requireLicense is enabled and no license, show only the license modal
-  if (requireLicense && isInitialized && !licenseKey) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.LicenseEntryModal, {
-      visible: showLicenseModal,
-      onClose: () => {} // Can't close without entering a license
-      ,
-      onSuccess: () => setShowLicenseModal(false)
-    });
-  }
-
   // Session blocking is handled inline by JsModal's SessionBlockedOverlay
   // No need to replace the entire UI - tools still render, but content is blocked
 
@@ -542,7 +524,9 @@ const FloatingDevTools = ({
                 ...props,
                 apps: finalApps,
                 environment: resolvedEnvironment
-              }), props.hidden ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHost.AppOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolOpenerBridge.ToolOpenerBridge, {})]
+              }), props.hidden ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHost.AppOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FloatingToolHost, {})]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolOpenerBridge.ToolOpenerBridge, {})]
             })
           }), children, DebugBordersOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightUpdatesOverlay, {}), ImageOverlayOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageOverlayOverlay, {}), PerfMonitorOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(PerfMonitorOverlay, {}), JsTopOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(JsTopOverlay, {}), ImpersonateOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImpersonateOverlay, {}), ScenariosOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ScenariosOverlay, {}), ReduxAutoInstrument && /*#__PURE__*/(0, _jsxRuntime.jsx)(ReduxAutoInstrument, {}), ConsoleRoot && /*#__PURE__*/(0, _jsxRuntime.jsx)(ConsoleRoot, {}), RouteTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteTracker, {}), ReactQueryTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactQueryTracker, {}), toolRegistry, syncEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_autoExternalSync.AutoExternalSync, {
             options: (0, _externalSyncGate.externalSyncOptions)(externalSync),

package/lib/commonjs/floatingMenu/FloatingDevTools.web.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FloatingDevTools = FloatingDevTools;
+var _floating = require("@buoy-gg/shared-ui/floating");
+var _license = require("@buoy-gg/license");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _react = require("react");
 var _floatingToolsReact = require("@buoy-gg/floating-tools-react");
-var _sharedUi = require("@buoy-gg/shared-ui");
 var _autoDiscoverPresetsWeb = require("../utils/autoDiscoverPresets.web.js");
 var _floatingToolsWeb = require("./floatingTools.web.js");
 var _DialDevToolsWeb = require("./dial/DialDevTools.web.js");
@@ -87,7 +89,7 @@ function MenuLauncherIcon({
 // Main Component
 // =============================
 
-function FloatingDevTools(props) {
+function AdmittedFloatingDevTools(props) {
   // The tool host wraps everything so dial presses can open tool components
   // into the AppOverlay (web twin of the native AppHostProvider/AppOverlay).
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHostWeb.AppHostProvider, {
@@ -372,10 +374,28 @@ function FloatingDevToolsInner({
       onSettingsChange: _newSettings => {
         // Settings are already saved by the hook
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHostWeb.AppOverlay, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHostWeb.AppOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_floating.FloatingToolHost, {})]
   });
 }
 
 // =============================
 // Re-exports for convenience
-// =============================
+// =============================
+
+function FloatingDevTools(props) {
+  const {
+    access,
+    isPro,
+    licenseKey
+  } = (0, _license.useLicense)();
+  (0, _react.useEffect)(() => {
+    void _license.LicenseManager.configure(props.licenseKey);
+  }, [props.licenseKey]);
+  const matches = props.licenseKey === undefined || props.licenseKey.trim().toUpperCase() === (licenseKey ?? "");
+  const dev = typeof __DEV__ !== "undefined" ? __DEV__ : process.env.NODE_ENV !== "production";
+  if (!dev && !isPro) return null;
+  if (!matches || access.status !== "admitted") return props.headless ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AccountSetup, {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AdmittedFloatingDevTools, {
+    ...props
+  });
+}

package/lib/commonjs/floatingMenu/FloatingMenu.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _floatingTools = require("./floatingTools");
-var _AppIcon = require("./AppIcon.js");
+var _AppIcon = require("./AppIcon");
 var _DialDevTools = require("./dial/DialDevTools");
 var _DevToolsSettingsModal = require("./DevToolsSettingsModal");
 var _AppHost = require("./AppHost");

package/lib/commonjs/floatingMenu/ToolHost.js

@@ -197,6 +197,7 @@ function ToolModalShell({
       subtitle: subtitle
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
       children: [!isSearchActive && actions, searchable && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HeaderSearchButton, {
+        variant: "chip",
         testID: `tool-search-${app.id}`,
         onPress: () => setIsSearchActive(true)
       })]

package/lib/commonjs/floatingMenu/autoExternalSync.js

@@ -9,6 +9,7 @@ exports.isExternalSyncAvailable = isExternalSyncAvailable;
 exports.useToolAdapterMap = useToolAdapterMap;
 var _react = require("react");
 var _reactNative = require("react-native");
+var _license = require("@buoy-gg/license");
 var _optionalRequire = require("./optionalRequire.js");
 var _appSyncAdapter = require("./sync/appSyncAdapter.js");
 var _deviceIdentity = require("./deviceIdentity.js");
@@ -292,11 +293,11 @@ function AutoExternalSync({
   (0, _react.useEffect)(() => {
     if (!socket) return;
     const emitLicense = () => {
+      if (!_license.LicenseManager.hasAccountAccess() || !socket.connected) return;
       socket.emit("device-license", {
         isPro: licenseRef.current.isPro ? "1" : "0",
         // Brokers older than the tier split ignore this; newer ones prefer it.
-        tier: licenseRef.current.tier ?? (licenseRef.current.isPro ? "pro" : "anonymous"),
-        licenseKey: licenseRef.current.licenseKey ?? ""
+        tier: licenseRef.current.tier ?? (licenseRef.current.isPro ? "pro" : "free")
       });
     };
     if (socket.connected) emitLicense();

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));