@buoy-gg/core 3.0.1 → 3.0.2

package/lib/commonjs/floatingMenu/DevToolsSettingsModal.js

@@ -808,7 +808,7 @@ const DevToolsSettingsModal = ({
               children: clearSuccess ? "CLEARED" : isClearing ? "CLEARING..." : "CLEAR ALL SETTINGS"
             })]
           })]
-        }), renderGlobalSettingCard("enableSharedModalDimensions", "SHARED MODAL SIZE", "MODAL", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately. Enable only if you prefer uniform modal sizes across all dev tools."), renderGlobalSettingCard("expandableWindowControls", "EXPAND CONTROLS", "MODAL", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed — similar to iPad window controls. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access (e.g. when using a mouse or simulator)."), isDevelopmentMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        }), renderGlobalSettingCard("enableSharedModalDimensions", "SHARED MODAL SIZE", "MODAL", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately. Enable only if you prefer uniform modal sizes across all dev tools."), _reactNative.Platform.OS !== "web" && renderGlobalSettingCard("expandableWindowControls", "EXPAND CONTROLS", "MODAL", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed — similar to iPad window controls. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access (e.g. when using a mouse or simulator)."), isDevelopmentMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.exportConfigCard,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             activeOpacity: 0.85,

package/lib/commonjs/floatingMenu/FloatingDevTools.js

@@ -15,6 +15,7 @@ var _MinimizedToolsContext = require("./MinimizedToolsContext.js");
 var _defaultConfig = require("./defaultConfig.js");
 var _DefaultConfigContext = require("./DefaultConfigContext.js");
 var _license = require("@buoy-gg/license");
+var _autoExternalSync = require("./autoExternalSync.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -113,6 +114,7 @@ const FloatingDevTools = ({
   licenseKey: licenseKeyProp,
   zustandStores,
   environment,
+  externalSync = true,
   ...props
 }) => {
   const resolvedEnvironment = environment ?? (0, _sharedUi.normalizeEnvironment)(process.env.NODE_ENV ?? "dev");
@@ -342,7 +344,10 @@ const FloatingDevTools = ({
                 environment: resolvedEnvironment
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHost.AppOverlay, {})]
             })
-          }), 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, {}), ImpersonateOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImpersonateOverlay, {}), RouteTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteTracker, {})]
+          }), 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, {}), ImpersonateOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImpersonateOverlay, {}), RouteTracker && /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteTracker, {}), isDevelopment && externalSync !== false && (0, _autoExternalSync.isExternalSyncAvailable)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_autoExternalSync.AutoExternalSync, {
+            options: typeof externalSync === "object" ? externalSync : undefined,
+            requiredEnvVars: requiredEnvVars
+          })]
         })
       })
     })

package/lib/commonjs/floatingMenu/FloatingMenu.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.FloatingMenu = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _floatingTools = require("./floatingTools");
 var _DialDevTools = require("./dial/DialDevTools");
-var _sharedUi = require("@buoy-gg/shared-ui");
 var _DevToolsSettingsModal = require("./DevToolsSettingsModal");
 var _AppHost = require("./AppHost.js");
 var _DevToolsVisibilityContext = require("./DevToolsVisibilityContext.js");
@@ -27,10 +27,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 const FLOATING_MENU_ONBOARDING_KEY = "@react_buoy_floating_menu_tooltip_shown";
 const ONBOARDING_STEP_KEY = "@react_buoy_onboarding_step";
-const {
-  width: SCREEN_WIDTH,
-  height: SCREEN_HEIGHT
-} = _reactNative.Dimensions.get("window");
 const FloatingMenu = ({
   apps,
   state,
@@ -328,11 +324,11 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "900"
   },
   onboardingContainer: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     zIndex: 10000
   },
   onboardingBackdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.85)"
   }
 });

package/lib/commonjs/floatingMenu/autoExternalSync.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutoExternalSync = AutoExternalSync;
+exports.isExternalSyncAvailable = isExternalSyncAvailable;
+var _react = require("react");
+var _reactNative = require("react-native");
+/**
+ * Zero-config device→desktop sync for FloatingDevTools.
+ *
+ * When @buoy-gg/external-sync is installed, FloatingDevTools renders
+ * <AutoExternalSync /> in dev builds: it connects to the Buoy Desktop broker
+ * (localhost:42831 — a silent no-op when the desktop app isn't running) and
+ * registers a sync adapter for every installed tool package, discovered with
+ * the same guarded-require pattern as autoDiscoverPresets. No <DevToolsSync>
+ * wiring needed in the app.
+ *
+ * Identity defaults come from expo-constants when available (app name →
+ * "MyApp (ios)" / "myapp-ios"), overridable via the `externalSync` prop.
+ */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+// Module-level guarded requires: presence is constant for the app lifetime,
+// so hooks pulled from these modules keep a stable call order.
+//
+// IMPORTANT: each require() must sit LEXICALLY inside its own try block
+// (same pattern as autoDiscoverPresets) — Metro only marks a dependency as
+// optional when the require is directly inside a try statement. Wrapping it
+// in a helper/arrow makes Metro hard-fail the bundle for apps that don't
+// install that package.
+let externalSyncModule = null;
+let storageModule = null;
+let networkModule = null;
+let reactQueryModule = null;
+let routeEventsModule = null;
+let reduxModule = null;
+let zustandModule = null;
+let jotaiModule = null;
+let eventsModule = null;
+let envModule = null;
+let highlightUpdatesModule = null;
+let debugBordersModule = null;
+let impersonateModule = null;
+let perfMonitorModule = null;
+let expoConstantsModule = null;
+try {
+  externalSyncModule = require("@buoy-gg/external-sync");
+} catch {
+  // not installed
+}
+try {
+  storageModule = require("@buoy-gg/storage");
+} catch {
+  // not installed
+}
+try {
+  networkModule = require("@buoy-gg/network");
+} catch {
+  // not installed
+}
+try {
+  reactQueryModule = require("@buoy-gg/react-query");
+} catch {
+  // not installed
+}
+try {
+  routeEventsModule = require("@buoy-gg/route-events");
+} catch {
+  // not installed
+}
+try {
+  reduxModule = require("@buoy-gg/redux");
+} catch {
+  // not installed
+}
+try {
+  zustandModule = require("@buoy-gg/zustand");
+} catch {
+  // not installed
+}
+try {
+  jotaiModule = require("@buoy-gg/jotai");
+} catch {
+  // not installed
+}
+try {
+  eventsModule = require("@buoy-gg/events");
+} catch {
+  // not installed
+}
+try {
+  envModule = require("@buoy-gg/env");
+} catch {
+  // not installed
+}
+try {
+  highlightUpdatesModule = require("@buoy-gg/highlight-updates");
+} catch {
+  // not installed
+}
+try {
+  debugBordersModule = require("@buoy-gg/debug-borders");
+} catch {
+  // not installed
+}
+try {
+  impersonateModule = require("@buoy-gg/impersonate");
+} catch {
+  // not installed
+}
+try {
+  perfMonitorModule = require("@buoy-gg/perf-monitor");
+} catch {
+  // not installed
+}
+try {
+  expoConstantsModule = require("expo-constants");
+} catch {
+  // not installed (RN CLI apps)
+}
+
+/** Whether zero-config sync can run (the external-sync package is installed). */
+function isExternalSyncAvailable() {
+  return !!externalSyncModule?.useExternalSyncSocket;
+}
+function getAppName() {
+  const constants = expoConstantsModule?.default ?? expoConstantsModule;
+  return constants?.expoConfig?.name ?? constants?.manifest2?.extra?.expoClient?.name ?? null;
+}
+function defaultIdentity() {
+  const appName = getAppName();
+  const slug = (appName ?? "buoy").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+  return {
+    deviceName: `${appName ?? "Buoy Device"} (${_reactNative.Platform.OS})`,
+    deviceId: `${slug || "buoy"}-${_reactNative.Platform.OS}`
+  };
+}
+function AutoExternalSync({
+  options,
+  requiredEnvVars
+}) {
+  const {
+    useExternalSyncSocket,
+    useExternalSync
+  } = externalSyncModule;
+
+  // Context-based query adapter; null when there is no QueryClientProvider
+  // above FloatingDevTools (or the installed @buoy-gg/react-query predates
+  // the hook).
+  const queryAdapter = reactQueryModule?.useReactQuerySyncAdapter ? reactQueryModule.useReactQuerySyncAdapter() : null;
+  const identity = (0, _react.useMemo)(defaultIdentity, []);
+  const deviceId = options?.deviceId ?? identity.deviceId;
+  const {
+    socket
+  } = useExternalSyncSocket({
+    deviceName: options?.deviceName ?? identity.deviceName,
+    socketURL: options?.socketURL ?? "http://localhost:42831",
+    persistentDeviceId: deviceId,
+    platform: _reactNative.Platform.OS,
+    enableLogs: options?.enableLogs
+  });
+  const tools = (0, _react.useMemo)(() => {
+    const map = {};
+    if (storageModule?.storageSyncAdapter) {
+      map.storage = storageModule.storageSyncAdapter;
+    }
+    if (networkModule?.networkSyncAdapter) {
+      map.network = networkModule.networkSyncAdapter;
+    }
+    if (queryAdapter) {
+      map.query = queryAdapter;
+    }
+    if (routeEventsModule?.routeEventsSyncAdapter) {
+      map["route-events"] = routeEventsModule.routeEventsSyncAdapter;
+    }
+    if (reduxModule?.reduxSyncAdapter) {
+      map.redux = reduxModule.reduxSyncAdapter;
+    }
+    if (zustandModule?.zustandSyncAdapter) {
+      map.zustand = zustandModule.zustandSyncAdapter;
+    }
+    if (jotaiModule?.jotaiSyncAdapter) {
+      map.jotai = jotaiModule.jotaiSyncAdapter;
+    }
+    if (eventsModule?.eventsSyncAdapter) {
+      map.events = eventsModule.eventsSyncAdapter;
+    }
+    if (envModule?.createEnvSyncAdapter) {
+      map.env = envModule.createEnvSyncAdapter(requiredEnvVars ?? []);
+    }
+    if (highlightUpdatesModule?.highlightUpdatesSyncAdapter) {
+      map["highlight-updates"] = highlightUpdatesModule.highlightUpdatesSyncAdapter;
+    }
+    if (debugBordersModule?.debugBordersSyncAdapter) {
+      map["debug-borders"] = debugBordersModule.debugBordersSyncAdapter;
+    }
+    if (impersonateModule?.impersonateSyncAdapter) {
+      map.impersonate = impersonateModule.impersonateSyncAdapter;
+    }
+    if (perfMonitorModule?.perfMonitorSyncAdapter) {
+      map["perf-monitor"] = perfMonitorModule.perfMonitorSyncAdapter;
+    }
+    return map;
+  }, [queryAdapter, requiredEnvVars]);
+  useExternalSync({
+    tools,
+    socket,
+    deviceId,
+    enableLogs: options?.enableLogs
+  });
+  return null;
+}

package/lib/commonjs/floatingMenu/defaultConfig.js

@@ -32,7 +32,7 @@ exports.validateDialConfig = validateDialConfig;
  * This is a union type of all auto-discovered tool IDs.
  */
 
-// Render count analysis modal (@buoy-gg/highlight-updates)
+// Benchmark recording modal (@buoy-gg/perf-monitor)
 
 /**
  * Special floating-only tool IDs that only appear in the floating bubble row.

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialDevTools = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _DialIcon = require("./DialIcon.js");
 var _DialPagination = require("./DialPagination.js");
 var _dialUsageStore = require("./dialUsageStore.js");
-var _sharedUi = require("@buoy-gg/shared-ui");
 var _DevToolsSettingsModal = require("../DevToolsSettingsModal");
 var _license = require("@buoy-gg/license");
 var _AppHost = require("../AppHost.js");
@@ -18,17 +18,10 @@ var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
 var _jsxRuntime = require("react/jsx-runtime");
 // Icons are provided by installedApps; no direct icon imports here.
 
-const {
-  width: SCREEN_WIDTH,
-  height: SCREEN_HEIGHT
-} = _reactNative.Dimensions.get("window");
-
-// Use shared layout calculation from core
-const layout = (0, _floatingToolsCore.getDialLayout)({
-  screenWidth: SCREEN_WIDTH
-});
-const CIRCLE_SIZE = layout.circleSize;
-const BUTTON_SIZE = layout.buttonSize;
+// The circle size depends on the live window width, so it's computed inside
+// 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;
 const ONBOARDING_STORAGE_KEY = "@react_buoy_settings_tooltip_shown";
 /** A non-interactive placeholder used to fill out the last dial page. */
 const createEmptySlot = slotIndex => ({
@@ -60,6 +53,33 @@ const DialDevTools = ({
   } = (0, _AppHost.useAppHost)();
   const isPro = (0, _license.useIsPro)();
 
+  // Live window size — keeps the dial centered and sized correctly when the
+  // window resizes (Electron/web) or the device rotates.
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const circleSize = (0, _floatingToolsCore.getDialLayout)({
+    screenWidth
+  }).circleSize;
+  const sizeStyles = (0, _react.useMemo)(() => ({
+    parent: {
+      width: circleSize,
+      height: circleSize
+    },
+    circle: {
+      width: circleSize,
+      height: circleSize,
+      borderRadius: circleSize / 2
+    },
+    rounded: {
+      borderRadius: circleSize / 2
+    },
+    gridLine: {
+      width: circleSize
+    }
+  }), [circleSize]);
+
   // Load persisted settings modal state on mount
   (0, _react.useEffect)(() => {
     const loadSettingsModalState = async () => {
@@ -485,13 +505,13 @@ const DialDevTools = ({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: [styles.backdrop, backdropAnimatedStyle],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        style: _reactNative.StyleSheet.absoluteFillObject,
+        style: _sharedUi.absoluteFill,
         onPress: handleClose
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-      style: [styles.parent, {
+      style: [styles.parent, sizeStyles.parent, {
         position: "absolute",
-        left: (SCREEN_WIDTH - CIRCLE_SIZE) / 2,
+        left: (screenWidth - circleSize) / 2,
         bottom: 80,
         transform: [{
           scale: dialScale
@@ -503,21 +523,21 @@ const DialDevTools = ({
         }]
       }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-        style: styles.circle,
+        style: [styles.circle, sizeStyles.circle],
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.gradientBackground,
+          style: [styles.gradientBackground, sizeStyles.rounded],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.gradientLayer1
+            style: [styles.gradientLayer1, sizeStyles.rounded]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.gradientLayer2
+            style: [styles.gradientLayer2, sizeStyles.rounded]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.gradientLayer3
+            style: [styles.gradientLayer3, sizeStyles.rounded]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.gridPattern,
             children: Array.from({
               length: 6
             }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.gridLine, {
+              style: [styles.gridLine, sizeStyles.gridLine, {
                 transform: [{
                   rotate: `${i * 60}deg`
                 }]
@@ -608,11 +628,11 @@ const DialDevTools = ({
       onNext: () => handlePageChange(safePage + 1),
       animatedStyle: {
         position: "absolute",
-        left: (SCREEN_WIDTH - CIRCLE_SIZE) / 2,
-        // Circle's bottom edge sits at bottom: 80 -> SCREEN_HEIGHT - 80
+        left: (screenWidth - circleSize) / 2,
+        // Circle's bottom edge sits at bottom: 80 -> screenHeight - 80
         // from the top. Place the pager 16px below that edge.
-        top: SCREEN_HEIGHT - 80 + 16,
-        width: CIRCLE_SIZE,
+        top: screenHeight - 80 + 16,
+        width: circleSize,
         opacity: dialScale,
         transform: [{
           scale: dialScale
@@ -634,23 +654,20 @@ const DialDevTools = ({
 exports.DialDevTools = DialDevTools;
 const styles = _reactNative.StyleSheet.create({
   container: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     zIndex: 9999
   },
   backdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     backgroundColor: _floatingToolsCore.dialColors.dialBackdrop
   },
+  // width/height/borderRadius for the circle pieces come from sizeStyles —
+  // they track the live window width.
   parent: {
-    width: CIRCLE_SIZE,
-    height: CIRCLE_SIZE,
     alignItems: "center",
     justifyContent: "center"
   },
   circle: {
-    width: CIRCLE_SIZE,
-    height: CIRCLE_SIZE,
-    borderRadius: CIRCLE_SIZE / 2,
     position: "absolute",
     backgroundColor: "transparent",
     borderWidth: 1,
@@ -667,41 +684,36 @@ const styles = _reactNative.StyleSheet.create({
   gradientBackground: {
     width: "100%",
     height: "100%",
-    borderRadius: CIRCLE_SIZE / 2,
     position: "relative",
     backgroundColor: _floatingToolsCore.dialColors.dialBackground,
     overflow: "hidden"
   },
   gradientLayer1: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     backgroundColor: _floatingToolsCore.dialColors.dialGradient1,
-    opacity: 0.6,
-    borderRadius: CIRCLE_SIZE / 2
+    opacity: 0.6
   },
   gradientLayer2: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     backgroundColor: _floatingToolsCore.dialColors.dialGradient2,
     opacity: 0.4,
     top: "30%",
-    left: "30%",
-    borderRadius: CIRCLE_SIZE / 2
+    left: "30%"
   },
   gradientLayer3: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     backgroundColor: _floatingToolsCore.dialColors.dialGradient3,
     opacity: 0.3,
     top: "50%",
-    left: "50%",
-    borderRadius: CIRCLE_SIZE / 2
+    left: "50%"
   },
   gridPattern: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     alignItems: "center",
     justifyContent: "center"
   },
   gridLine: {
     position: "absolute",
-    width: CIRCLE_SIZE,
     height: 1,
     backgroundColor: _floatingToolsCore.dialColors.dialGridLine
   },
@@ -727,13 +739,13 @@ const styles = _reactNative.StyleSheet.create({
     overflow: "hidden"
   },
   buttonGradientLayer1: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     backgroundColor: _floatingToolsCore.dialColors.dialGradient1,
     opacity: 0.5,
     borderRadius: BUTTON_SIZE
   },
   buttonGradientLayer2: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     backgroundColor: _floatingToolsCore.dialColors.dialGradient2,
     opacity: 0.3,
     top: "20%",
@@ -741,7 +753,7 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: BUTTON_SIZE
   },
   buttonGradientLayer3: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     backgroundColor: _floatingToolsCore.dialColors.dialGradient3,
     opacity: 0.2,
     top: "40%",

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

@@ -8,16 +8,9 @@ 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_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,
@@ -28,6 +21,12 @@ const DialIcon = ({
 }) => {
   // 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
@@ -123,14 +122,14 @@ const DialIcon = ({
       itemOpacity,
       progressScale: staggeredProgress
     };
-  }, [index, totalIcons, iconsProgress]);
+  }, [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: motion.itemOpacity,
     transform: [{

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

@@ -133,7 +133,7 @@ const OnboardingTooltip = ({
 exports.OnboardingTooltip = OnboardingTooltip;
 const styles = _reactNative.StyleSheet.create({
   container: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     alignItems: "center",
     justifyContent: "center",
     pointerEvents: "box-none"

package/lib/module/floatingMenu/DevToolsSettingsModal.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { useState, useEffect, useCallback, useMemo } from "react";
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Dimensions } from "react-native";
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Dimensions, Platform } from "react-native";
 import { settingsBus } from "./settingsBus.js";
 import { SentryBugIcon, WifiCircuitIcon, ImageOverlayIcon, RenderCountIcon, Info, Layers, ChevronRightIcon, ChevronDown, getStorageBackendType, persistentStorage, Database, Trash2, CheckCircle2, AlertTriangle, Zap, FileText, HardDrive, Copy, FileCode, copyToClipboard, LicenseEntryModal, SectionHeader } from "@buoy-gg/shared-ui";
 import { EnvIcon, StorageIcon, RoutesIcon, NetworkIcon, QueryIcon, HighlighterIcon, ReduxIcon, EventsIcon } from "@buoy-gg/floating-tools-core";
@@ -809,7 +809,7 @@ export const DevToolsSettingsModal = ({
               children: clearSuccess ? "CLEARED" : isClearing ? "CLEARING..." : "CLEAR ALL SETTINGS"
             })]
           })]
-        }), renderGlobalSettingCard("enableSharedModalDimensions", "SHARED MODAL SIZE", "MODAL", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately. Enable only if you prefer uniform modal sizes across all dev tools."), renderGlobalSettingCard("expandableWindowControls", "EXPAND CONTROLS", "MODAL", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed — similar to iPad window controls. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access (e.g. when using a mouse or simulator)."), isDevelopmentMode && /*#__PURE__*/_jsxs(View, {
+        }), renderGlobalSettingCard("enableSharedModalDimensions", "SHARED MODAL SIZE", "MODAL", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately. Enable only if you prefer uniform modal sizes across all dev tools."), Platform.OS !== "web" && renderGlobalSettingCard("expandableWindowControls", "EXPAND CONTROLS", "MODAL", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed — similar to iPad window controls. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access (e.g. when using a mouse or simulator)."), isDevelopmentMode && /*#__PURE__*/_jsxs(View, {
           style: styles.exportConfigCard,
           children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
             activeOpacity: 0.85,

package/lib/module/floatingMenu/FloatingDevTools.js

@@ -12,6 +12,7 @@ import { MinimizedToolsProvider } from "./MinimizedToolsContext.js";
 import { validateDialConfig } from "./defaultConfig.js";
 import { DefaultConfigProvider } from "./DefaultConfigContext.js";
 import { LicenseManager, useIsPro, useLicense } from "@buoy-gg/license";
+import { AutoExternalSync, isExternalSyncAvailable } from "./autoExternalSync.js";
 
 /**
  * Environment variable configuration
@@ -109,6 +110,7 @@ export const FloatingDevTools = ({
   licenseKey: licenseKeyProp,
   zustandStores,
   environment,
+  externalSync = true,
   ...props
 }) => {
   const resolvedEnvironment = environment ?? normalizeEnvironment(process.env.NODE_ENV ?? "dev");
@@ -338,7 +340,10 @@ export const FloatingDevTools = ({
                 environment: resolvedEnvironment
               }), /*#__PURE__*/_jsx(AppOverlay, {})]
             })
-          }), children, DebugBordersOverlay && /*#__PURE__*/_jsx(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/_jsx(HighlightUpdatesOverlay, {}), ImageOverlayOverlay && /*#__PURE__*/_jsx(ImageOverlayOverlay, {}), PerfMonitorOverlay && /*#__PURE__*/_jsx(PerfMonitorOverlay, {}), ImpersonateOverlay && /*#__PURE__*/_jsx(ImpersonateOverlay, {}), RouteTracker && /*#__PURE__*/_jsx(RouteTracker, {})]
+          }), children, DebugBordersOverlay && /*#__PURE__*/_jsx(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/_jsx(HighlightUpdatesOverlay, {}), ImageOverlayOverlay && /*#__PURE__*/_jsx(ImageOverlayOverlay, {}), PerfMonitorOverlay && /*#__PURE__*/_jsx(PerfMonitorOverlay, {}), ImpersonateOverlay && /*#__PURE__*/_jsx(ImpersonateOverlay, {}), RouteTracker && /*#__PURE__*/_jsx(RouteTracker, {}), isDevelopment && externalSync !== false && isExternalSyncAvailable() && /*#__PURE__*/_jsx(AutoExternalSync, {
+            options: typeof externalSync === "object" ? externalSync : undefined,
+            requiredEnvVars: requiredEnvVars
+          })]
         })
       })
     })