@buoy-gg/core 7.0.26 → 7.0.28

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

@@ -240,7 +240,11 @@ function FloatingDevToolsInner({
     id: tool.id,
     name: tool.name || (0, _floatingToolsReact.getToolLabel)(tool.id),
     description: tool.description || (0, _floatingToolsReact.getToolDescription)(tool.id),
-    slot: tool.slot
+    slot: tool.slot,
+    // Settings rows fall back to the tool's own icon when the modal has
+    // no hardcoded glyph for it (mirrors native DialDevTools).
+    icon: tool.icon,
+    color: tool.color
   })), [tools]);
 
   // Welcome tooltip — native FloatingMenu.tsx:134-157: 1000ms after mount,

package/lib/commonjs/floatingMenu/ToolHost.js

@@ -241,7 +241,8 @@ const styles = _reactNative.StyleSheet.create({
   bodyRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   toast: {
     position: "absolute",

package/lib/commonjs/floatingMenu/autoExternalSync.js

@@ -45,7 +45,6 @@ let zustandModule = null;
 let jotaiModule = null;
 let eventsModule = null;
 let consoleModule = null;
-let timeMachineModule = null;
 let envModule = null;
 let highlightUpdatesModule = null;
 let debugBordersModule = null;
@@ -109,11 +108,6 @@ try {
 } catch (e) {
   (0, _optionalRequire.reportOptionalRequireError)("@buoy-gg/console", e);
 }
-try {
-  timeMachineModule = require("@buoy-gg/time-machine");
-} catch (e) {
-  (0, _optionalRequire.reportOptionalRequireError)("@buoy-gg/time-machine", e);
-}
 try {
   envModule = require("@buoy-gg/env");
 } catch (e) {
@@ -273,8 +267,17 @@ function AutoExternalSync({
     if (consoleModule?.consoleSyncAdapter) {
       map.console = consoleModule.consoleSyncAdapter;
     }
-    if (timeMachineModule?.timeMachineSyncAdapter) {
-      map["time-machine"] = timeMachineModule.timeMachineSyncAdapter;
+    // Lazy: time-machine imports `@buoy-gg/core` (useToolHost), and this file
+    // is loaded from core's index. Requiring it at module top-level is a
+    // require cycle (LogBox on every reload). Waiting until first render
+    // lets core finish evaluating first.
+    try {
+      const timeMachineModule = require("@buoy-gg/time-machine");
+      if (timeMachineModule?.timeMachineSyncAdapter) {
+        map["time-machine"] = timeMachineModule.timeMachineSyncAdapter;
+      }
+    } catch (e) {
+      (0, _optionalRequire.reportOptionalRequireError)("@buoy-gg/time-machine", e);
     }
     if (envModule?.createEnvSyncAdapter) {
       map.env = envModule.createEnvSyncAdapter(requiredEnvVars ?? []);

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

@@ -8,6 +8,7 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _DialIcon = require("./DialIcon.js");
+var _DialHyperspace = require("./DialHyperspace.js");
 var _allToolsRegistry = require("../allToolsRegistry.js");
 var _DialPagination = require("./DialPagination.js");
 var _dialUsageStore = require("./dialUsageStore.js");
@@ -24,6 +25,19 @@ 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 centre button's idle pulse, off by design.
+ *
+ * It is built as `Animated.loop(Animated.sequence([...]))`, and that pairing is
+ * NOT handed to the native driver even though every child sets
+ * `useNativeDriver: true` — so it ticked on the JS thread for as long as the
+ * dial stayed open, taxing every interaction launched from the dial.
+ *
+ * Re-enabling it means rewriting the loop so it genuinely runs natively;
+ * flipping this alone just puts the JS-thread cost back.
+ */
+const DIAL_IDLE_PULSE = false;
 const ONBOARDING_STORAGE_KEY = "@react_buoy_settings_tooltip_shown";
 /** A non-interactive placeholder used to fill out the last dial page. */
 const createEmptySlot = slotIndex => ({
@@ -67,6 +81,11 @@ const DialDevTools = ({
   const circleSize = (0, _floatingToolsCore.getDialLayout)({
     screenWidth
   }).circleSize;
+  // The dial face shows the same backdrop the tools use (persisted shared
+  // selection). Hyperspace keeps its hand-tuned dial port below.
+  const {
+    id: backgroundId
+  } = (0, _sharedUi.useToolBackground)();
   const sizeStyles = (0, _react.useMemo)(() => ({
     parent: {
       width: circleSize,
@@ -153,16 +172,35 @@ const DialDevTools = ({
     id,
     name,
     slot,
-    description
+    description,
+    icon,
+    color
   }) => ({
     id,
     name,
     slot,
-    description
+    description,
+    // Settings rows fall back to the app's own icon when the modal has no
+    // hardcoded glyph for the tool.
+    icon,
+    color
   })), [apps]);
 
   // Animation tracking refs
   const pulseAnimationRef = (0, _react.useRef)(null);
+  const toggleSettingsModal = () => {
+    if (isSettingsModalOpen) {
+      setIsSettingsModalOpen(false);
+      return;
+    }
+    setIsSettingsModalOpen(true);
+    // Dismiss onboarding tooltip when user opens settings
+    if (showOnboardingTooltip && !onboardingDismissedRef.current) {
+      handleOnboardingDismiss();
+    }
+    // Also call external handler if provided
+    onSettingsPress?.();
+  };
 
   // Dial-eligible apps: everything except row-only tools. All of them are
   // shown — paginated across pages of MAX_DIAL_SLOTS — so there is no longer
@@ -410,6 +448,7 @@ const DialDevTools = ({
     })]).start();
 
     // Pulse animation - only continuous effect kept for performance
+    if (!DIAL_IDLE_PULSE) return;
     pulseAnimationRef.current = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(pulseScale, {
       toValue: continuous.pulse.maxScale,
       duration: continuous.pulse.duration,
@@ -598,7 +637,9 @@ const DialDevTools = ({
                 }]
               }]
             }, i))
-          })]
+          }), backgroundId === "hyperspace" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialHyperspace.DialHyperspace, {
+            size: circleSize
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {})]
         }), allDialIcons.filter(({
           page
         }) => page === safePage).map(({
@@ -633,26 +674,14 @@ const DialDevTools = ({
             style: styles.buttonBorder,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
               style: [styles.button, pulseAnimatedStyle],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
                 accessibilityRole: "button",
                 accessibilityLabel: isSettingsModalOpen ? "Close Settings" : "Open Dev Tools Settings",
-                onPress: () => {
-                  if (isSettingsModalOpen) {
-                    // Close settings modal
-                    setIsSettingsModalOpen(false);
-                  } else {
-                    // Open internal settings modal
-                    setIsSettingsModalOpen(true);
-                    // Dismiss onboarding tooltip when user opens settings
-                    if (showOnboardingTooltip && !onboardingDismissedRef.current) {
-                      handleOnboardingDismiss();
-                    }
-                    // Also call external handler if provided
-                    if (onSettingsPress) {
-                      onSettingsPress();
-                    }
-                  }
-                },
+                onPress: toggleSettingsModal
+                // Dims on touch-down so the press registers visually straight
+                // away, even though the panel only opens on release.
+                ,
+                activeOpacity: 0.5,
                 style: styles.buttonPressable,
                 children: isSettingsModalOpen ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {

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

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialHyperspace = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * DialHyperspace — the Hyperspace backdrop's lightspeed starfield, scaled
+ * down to live inside the open dial's face. Replaces DialSnow (kept next
+ * door for an easy swap back) so the dial matches the tool background.
+ *
+ * Same construction as the full preset (shared-ui
+ * `backgrounds/variants/hyperspace.tsx`, see its header for the derivation):
+ * the Skia original's per-frame `screen = plane/z` projection becomes scale
+ * keyframes on phase-offset shells — a layer scaled by 1/z moves every star
+ * outward on the true hyperbolic curve — with each shell's wrap snap hidden
+ * inside the fade the original applies to the first/last 6% of a star's
+ * life. Dial tuning: fewer stars, a slightly gentler cycle and lower alpha
+ * so the field reads behind the icons instead of competing with them.
+ * Stars are round crisp points, as in the original — never streaks.
+ *
+ * Cost while the dial is open: 1 animated node, ~48 static views — the same
+ * budget DialSnow ran. The dial is fixed-size (never user-resized), so
+ * sizing geometry from the passed circle size is correct here, and the
+ * circle's `overflow: "hidden"` clips the streaks.
+ */
+
+const Z_SPAN = 0.94;
+const MAX_SCALE = 6;
+const CYCLE_MS = 2400;
+const SHELLS = 3;
+const STARS_PER_SHELL = 16;
+/** Stride 4: angle, radius, size jitter, palette pick — fixed seeds so the
+ * field is identical every open. */
+const SHELL_TABLES = Array.from({
+  length: SHELLS
+}, (_, k) => (0, _sharedUi.scatter)(0x5747 ^ k * 0x9e37, STARS_PER_SHELL * 4));
+const STAR_COLORS = ["#FFFFFF", "#B3D9FF", "#8CB3FF"];
+
+/** The dial face draws 6 grid spokes, one every 60° starting at 0°. Star
+ * motion is radial (uniform scale about the centre), so a star whose angle
+ * sits near a spoke rides that line for its entire life. Remap the uniform
+ * angle pick into the clear wedge between spokes, leaving `SPOKE_GAP` of
+ * clearance centred on each line. */
+const SPOKE_STEP = Math.PI / 3;
+const SPOKE_GAP = 14 * Math.PI / 180;
+function spokeClearAngle(u) {
+  const sector = Math.min(5, Math.floor(u * 6));
+  const t = u * 6 - sector;
+  return sector * SPOKE_STEP + SPOKE_GAP / 2 + t * (SPOKE_STEP - SPOKE_GAP);
+}
+function scaleAt(p) {
+  return Math.min(MAX_SCALE, 1 / (1 - p * Z_SPAN));
+}
+function opacityAt(p) {
+  let bright = 0.15 + 0.85 * p * p;
+  // The original's 6% fade at both ends of a star's life.
+  if (p < 0.06) bright *= p / 0.06;else if (p > 0.94) bright *= (1 - p) / 0.06;
+  // Dial tuning: never brighter than 0.7 — the icons own the foreground.
+  return Math.min(0.7, bright);
+}
+
+/** Interpolate stops for shell k (phase = (v + k/K) mod 1), the wrap point
+ * double-sampled 1e-4 apart inside the zero-opacity sliver. */
+function shellStops(k) {
+  const offset = k / SHELLS;
+  const vs = [];
+  const SEGMENTS = 12;
+  for (let i = 0; i <= SEGMENTS; i++) vs.push(i / SEGMENTS);
+  const vWrap = (1 - offset) % 1;
+  if (vWrap > 1e-3 && vWrap < 1 - 1e-3) vs.push(vWrap - 1e-4, vWrap + 1e-4);
+  vs.sort((a, b) => a - b);
+  const input = [];
+  const scale = [];
+  const opacity = [];
+  for (const v of vs) {
+    // At the loop boundary the offset-0 shell's phase must read as END of
+    // life (p=1, max scale, zero opacity), not wrap to 0 — otherwise the
+    // last segment lerps scale 6→1 at visible opacity and the stars
+    // retract to the centre once per cycle.
+    const p = offset === 0 && v === 1 ? 1 : (v + offset) % 1;
+    input.push(v);
+    scale.push(scaleAt(p));
+    opacity.push(opacityAt(p));
+  }
+  return {
+    input,
+    scale,
+    opacity
+  };
+}
+const SHELL_STOPS = Array.from({
+  length: SHELLS
+}, (_, k) => shellStops(k));
+const DialHyperspace = exports.DialHyperspace = /*#__PURE__*/(0, _react.memo)(function DialHyperspace({
+  size
+}) {
+  const drive = (0, _sharedUi.useLoop)(CYCLE_MS);
+  const c = size / 2;
+  const shells = [];
+  for (let k = 0; k < SHELLS; k++) {
+    const table = SHELL_TABLES[k];
+    const stops = SHELL_STOPS[k];
+    const stars = [];
+    for (let i = 0; i < STARS_PER_SHELL; i++) {
+      const ang = spokeClearAngle(table[i * 4]);
+      // sqrt-biased outward, inner 15% clear of the vanishing point. Offsets
+      // scale with the HALF-extent, as in the original's projection.
+      const rad = (0.15 + 0.85 * Math.sqrt(table[i * 4 + 1])) * 0.5 * c;
+      const color = STAR_COLORS[Math.floor(table[i * 4 + 3] * STAR_COLORS.length) % 3];
+      const x = c + Math.cos(ang) * rad;
+      const y = c + Math.sin(ang) * rad;
+      // Round crisp points, as in the original — the visible star is the
+      // sprite's lit core (~12.5% of the stamp), so it starts sub-pixel and
+      // only reaches ~2-3px before the fade-out kills it. A soft halo disc
+      // at α0.3 stands in for the sprite's blur.
+      const core = 0.6;
+      const halo = core * 2.4;
+      stars.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: x - halo / 2,
+          top: y - halo / 2,
+          width: halo,
+          height: halo,
+          borderRadius: halo / 2,
+          backgroundColor: (0, _sharedUi.withBgAlpha)(color, 0.3)
+        }
+      }, `${i}-h`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: x - core / 2,
+          top: y - core / 2,
+          width: core,
+          height: core,
+          borderRadius: core / 2,
+          backgroundColor: color
+        }
+      }, i));
+    }
+    shells.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: size,
+        height: size,
+        opacity: drive.interpolate({
+          inputRange: stops.input,
+          outputRange: stops.opacity
+        }),
+        transform: [{
+          scale: drive.interpolate({
+            inputRange: stops.input,
+            outputRange: stops.scale
+          })
+        }]
+      },
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RasterLayer, {
+        style: {
+          width: size,
+          height: size
+        },
+        raster: false,
+        children: stars
+      })
+    }, k));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: shells
+  });
+});

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

@@ -8,6 +8,34 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
 var _jsxRuntime = require("react/jsx-runtime");
+/** Full names agents wait for (`waitFor: "Network"`), not the truncated glyph. */const DIAL_A11Y = {
+  network: "Network",
+  images: "Images",
+  "image-overlay": "Image Overlay",
+  assets: "Assets",
+  query: "React Query",
+  storage: "Storage",
+  env: "Env",
+  console: "Console",
+  events: "Events",
+  redux: "Redux",
+  zustand: "Zustand",
+  jotai: "Jotai",
+  "route-events": "Routes",
+  "time-machine": "Time Machine",
+  "highlight-updates": "Highlight Updates",
+  "debug-borders": "Debug Borders",
+  "perf-monitor": "Perf Monitor",
+  "js-top": "JS Top",
+  "js-top-modal": "JS Top",
+  impersonate: "Impersonate",
+  "perf-monitor-modal": "Perf Monitor"
+};
+function dialAccessibilityLabel(id, name) {
+  if (id && DIAL_A11Y[id]) return DIAL_A11Y[id];
+  return name;
+}
+
 // 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;
@@ -191,6 +219,9 @@ const DialIcon = ({
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       style: styles.pressable,
+      testID: icon.id ? `buoy-dial-${icon.id}` : undefined,
+      accessibilityLabel: dialAccessibilityLabel(icon.id, icon.name),
+      accessibilityRole: "button",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.iconGradientBg, {
           backgroundColor: "rgba(0, 0, 0, 0.2)"

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

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialSnow = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * DialSnow — pale particles drifting down inside the open dial's face, built
+ * from the shared background primitives (packages/shared/src/ui/backgrounds).
+ *
+ * Same performance contract as the backgrounds: the loop is native-driven
+ * (useLoop hands the whole animation to the UI thread once — zero JS work per
+ * frame), the flakes are one rasterized texture, and the scatter table is
+ * generated at module load. Cost while the dial is open: 1 animated node and
+ * ~24 static views, mounted only for the dial's lifetime.
+ *
+ * Rendered inside the circle's `overflow: "hidden"` background. The dial is
+ * fixed-size (never user-resized), so sizing geometry from the passed circle
+ * size is correct here.
+ */
+
+/** Pale mint-ice flake tint — sits quietly on the dial's dark face. */const SNOW_COLOR = "#A8E0D2";
+
+/** Stride 3: x, y, size — fixed seed so the flurry is identical every open. */
+const SNOW_COUNT = 12;
+const SNOW_TABLE = (0, _sharedUi.scatter)(0x5ea1, SNOW_COUNT * 3);
+
+/**
+ * The two-copy tiling trick from the backdrops: everything drawn twice one
+ * height apart, translated a full height per loop, so the seam never shows.
+ * Sway is keyframed onto the SAME loop value.
+ */
+const DialSnow = exports.DialSnow = /*#__PURE__*/(0, _react.memo)(function DialSnow({
+  size
+}) {
+  const t = (0, _sharedUi.useLoop)(26000);
+  const translateY = t.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, size]
+  });
+  const translateX = t.interpolate({
+    inputRange: [0, 0.25, 0.5, 0.75, 1],
+    outputRange: [0, 5, 0, -5, 0]
+  });
+  const flakes = [];
+  for (let i = 0; i < SNOW_COUNT; i++) {
+    const x = SNOW_TABLE[i * 3] * size;
+    const y = SNOW_TABLE[i * 3 + 1] * size;
+    // Bigger flakes read nearer, so they get more alpha too.
+    const dia = 1.4 + SNOW_TABLE[i * 3 + 2] * 1.2;
+    const alpha = 0.28 + SNOW_TABLE[i * 3 + 2] * 0.18;
+    for (let copy = 0; copy < 2; copy++) {
+      flakes.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: x - dia / 2,
+          top: y + copy * size - dia / 2,
+          width: dia,
+          height: dia,
+          borderRadius: dia / 2,
+          backgroundColor: (0, _sharedUi.withBgAlpha)(SNOW_COLOR, alpha)
+        }
+      }, `${i}-${copy}`));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: {
+      position: "absolute",
+      left: 0,
+      top: -size,
+      width: size,
+      height: size * 2,
+      transform: [{
+        translateY
+      }, {
+        translateX
+      }]
+    },
+    pointerEvents: "none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RasterLayer, {
+      style: {
+        width: size,
+        height: size * 2
+      },
+      children: flakes
+    })
+  });
+});

package/lib/commonjs/version.js

@@ -15,4 +15,4 @@ exports.SDK_VERSION = void 0;
  * Drift is prevented by a test that fails when this disagrees with
  * package.json, so a version bump that forgets this file cannot ship.
  */
-const SDK_VERSION = exports.SDK_VERSION = "7.0.26";
+const SDK_VERSION = exports.SDK_VERSION = "7.0.28";