@buoy-gg/core 3.0.1 → 4.0.1

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

@@ -6,10 +6,11 @@ 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 _allToolsRegistry = require("../allToolsRegistry.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 +19,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 => ({
@@ -58,7 +52,37 @@ const DialDevTools = ({
   const {
     open
   } = (0, _AppHost.useAppHost)();
-  const isPro = (0, _license.useIsPro)();
+  const {
+    isPro,
+    isWeekendFree
+  } = (0, _license.useProAccess)();
+
+  // 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)(() => {
@@ -191,6 +215,35 @@ const DialDevTools = ({
     return map;
   }, [dialApps, actions, open, onClose]);
 
+  // Tools from the global registry that are NOT installed in this app.
+  // These are appended after all available tools so paging "next" eventually
+  // reveals them. They are display-only (real icon + real name + "Unavailable").
+  const unavailableTools = (0, _react.useMemo)(() => {
+    const installedIds = new Set(dialApps.map(a => a.id));
+    return _allToolsRegistry.ALL_TOOLS_REGISTRY.filter(t => !installedIds.has(t.id));
+  }, [dialApps]);
+
+  // Build stable IconType entries for each unavailable tool.
+  const unavailableIconsById = (0, _react.useMemo)(() => {
+    const map = new Map();
+    for (const tool of unavailableTools) {
+      map.set(tool.id, {
+        id: tool.id,
+        name: tool.name,
+        // Pre-render the icon at the standard dial slot size so it looks correct.
+        icon: tool.renderIcon(_floatingToolsCore.DIAL_ICON_SIZE),
+        iconComponent: undefined,
+        color: tool.color,
+        unavailable: true,
+        // Tapping an unavailable tool is intentionally a no-op: the dial stays
+        // open and no modal launches, signalling the tool is not installed.
+        // Future: add a brief Toast with an install link here.
+        onPress: () => {}
+      });
+    }
+    return map;
+  }, [unavailableTools]);
+
   // Snapshot the usage-ranked order when the dial opens. It stays stable while
   // open so icons don't jump positions mid-interaction.
   const [rankedIds, setRankedIds] = (0, _react.useState)(() => (0, _dialUsageStore.getRankedToolIds)(dialApps.map(a => a.id)));
@@ -209,7 +262,9 @@ const DialDevTools = ({
       cancelled = true;
     };
   }, [dialApps]);
-  const pageCount = Math.max(1, Math.ceil(rankedIds.length / _floatingToolsCore.MAX_DIAL_SLOTS));
+
+  // Page count spans available tools (usage-ranked) + unavailable tools (appended).
+  const pageCount = Math.max(1, Math.ceil((rankedIds.length + unavailableTools.length) / _floatingToolsCore.MAX_DIAL_SLOTS));
   const [currentPage, setCurrentPage] = (0, _react.useState)(0);
   const safePage = Math.min(currentPage, pageCount - 1);
 
@@ -217,13 +272,18 @@ const DialDevTools = ({
   // snapshotted on open, so each icon's page and slot are fixed for the
   // session — which lets us mount all icons once and paginate purely by
   // toggling visibility (no remounts on page change).
+  //
+  // Order: usage-ranked available tools first, unavailable tools appended at
+  // the very end. This guarantees unavailable items always appear on the last
+  // pages and never displace available tools.
   const allDialIcons = (0, _react.useMemo)(() => {
-    return rankedIds.map(id => iconsById.get(id)).filter(icon => Boolean(icon)).map((icon, i) => ({
+    const allIds = [...rankedIds, ...unavailableTools.map(t => t.id)];
+    return allIds.map(id => iconsById.get(id) ?? unavailableIconsById.get(id)).filter(icon => Boolean(icon)).map((icon, i) => ({
       icon,
       page: Math.floor(i / _floatingToolsCore.MAX_DIAL_SLOTS),
       slot: i % _floatingToolsCore.MAX_DIAL_SLOTS
     }));
-  }, [rankedIds, iconsById]);
+  }, [rankedIds, iconsById, unavailableTools, unavailableIconsById]);
 
   // Empty slot indices for the current page (only the last page can be
   // partial). These are cheap placeholder dots.
@@ -425,6 +485,10 @@ const DialDevTools = ({
     });
   };
   const handleIconPress = icon => {
+    // Unavailable tools are display-only. Return early so the dial stays open
+    // and no modal or animation is triggered. The dimmed appearance already
+    // communicates that the tool is not installed.
+    if (icon.unavailable) return;
     setSelectedIcon(1);
     const interaction = _floatingToolsCore.dialAnimationConfig?.interaction ?? {
       iconSelect: {
@@ -485,13 +549,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 +567,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`
                 }]
@@ -592,8 +656,8 @@ const DialDevTools = ({
                     style: styles.centerText,
                     children: "BUOY"
                   }), isPro && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    style: styles.proText,
-                    children: "PRO"
+                    style: [styles.proText, isWeekendFree && styles.weekendText],
+                    children: isWeekendFree ? "WEEKEND" : "PRO"
                   })]
                 })
               })
@@ -608,11 +672,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 +698,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 +728,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 +783,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 +797,7 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: BUTTON_SIZE
   },
   buttonGradientLayer3: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     backgroundColor: _floatingToolsCore.dialColors.dialGradient3,
     opacity: 0.2,
     top: "40%",
@@ -807,5 +863,11 @@ const styles = _reactNative.StyleSheet.create({
       height: 0
     },
     textShadowRadius: 4
+  },
+  // Weekend Pass variant — violet, tighter spacing so "WEEKEND" fits the dial.
+  weekendText: {
+    color: "#BF5AF2",
+    letterSpacing: 1,
+    textShadowColor: "#BF5AF2"
   }
 });

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: [{
@@ -158,6 +157,32 @@ const DialIcon = ({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.emptyDot
       })
+    }) : icon.unavailable ?
+    /*#__PURE__*/
+    // ── Unavailable tool ──────────────────────────────────────────────────
+    // Renders the real icon + real name at NORMAL styling (visually identical
+    // to an installed tool). The ONLY signal that it's unavailable is the small
+    // muted "Unavailable" caption under the name. It's non-interactive: no
+    // Pressable, and the dial stays open when tapped because
+    // DialDevTools.handleIconPress returns early for unavailable icons.
+    (0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.pressable,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconWrapper,
+        children: icon.icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.label,
+        numberOfLines: 1,
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.7,
+        children: icon.name.toUpperCase()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.unavailableCaption,
+        numberOfLines: 1,
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.6,
+        children: "Unavailable"
+      })]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
       onPress: () => onPress(icon),
       onPressIn: handlePressIn,
@@ -249,5 +274,20 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: _floatingToolsCore.dialColors.emptyDotBackground,
     borderWidth: _floatingToolsCore.dialStyles.emptySlot.borderWidth,
     borderColor: _floatingToolsCore.dialColors.emptyDotBorder
+  },
+  // ── Unavailable tool styles ────────────────────────────────────────────────
+  /**
+   * Small muted caption shown under the (normal-styled) tool name — the only
+   * signal that the tool is not installed. Kept compact (smaller than the label)
+   * so the extra line doesn't disturb the arc layout. Uses the shared muted
+   * theme token rather than a hardcoded color.
+   */
+  unavailableCaption: {
+    fontSize: _floatingToolsCore.dialStyles.icon.label.fontSize - 1,
+    fontWeight: _floatingToolsCore.dialStyles.icon.label.fontWeight,
+    letterSpacing: _floatingToolsCore.dialStyles.icon.label.letterSpacing,
+    fontFamily: _floatingToolsCore.dialStyles.icon.label.fontFamily,
+    color: _floatingToolsCore.floatingToolsColors.muted,
+    textTransform: "uppercase"
   }
 });

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

@@ -11,7 +11,8 @@ import { HintsProvider, LicenseEntryModal, normalizeEnvironment } from "@buoy-gg
 import { MinimizedToolsProvider } from "./MinimizedToolsContext.js";
 import { validateDialConfig } from "./defaultConfig.js";
 import { DefaultConfigProvider } from "./DefaultConfigContext.js";
-import { LicenseManager, useIsPro, useLicense } from "@buoy-gg/license";
+import { LicenseManager, useProAccess, useLicense } from "@buoy-gg/license";
+import { AutoExternalSync, isExternalSyncAvailable } from "./autoExternalSync.js";
 
 /**
  * Environment variable configuration
@@ -109,11 +110,18 @@ export const FloatingDevTools = ({
   licenseKey: licenseKeyProp,
   zustandStores,
   environment,
+  externalSync = true,
   ...props
 }) => {
   const resolvedEnvironment = environment ?? normalizeEnvironment(process.env.NODE_ENV ?? "dev");
-  // Check Pro status for production gating
-  const isPro = useIsPro();
+  // Production gating + the device→dashboard license handshake must use a REAL
+  // license only — NOT the free Weekend Pass. Otherwise shipping Buoy would
+  // expose the devtools to end users every weekend, and the dashboard would try
+  // to adopt a non-existent key. (Feature unlocks inside the tools still honor
+  // the Weekend Pass via their own useIsPro().)
+  const {
+    isLicensed
+  } = useProAccess();
 
   // Get full license state for requireLicense gating
   const {
@@ -122,10 +130,17 @@ export const FloatingDevTools = ({
   } = useLicense();
   const [showLicenseModal, setShowLicenseModal] = useState(false);
 
-  // Initialize license manager on mount, and set/clear license key when prop changes
+  // Initialize license manager on mount, and set/clear license key when prop changes.
+  // The `licenseKey` prop is the source of truth WHEN PROVIDED:
+  //   - non-empty  → validate + activate that key
+  //   - "" (blank) → EXPLICITLY clear the cached license (key was removed)
+  //   - undefined  → don't touch it (the app may set a key via Buoy.init())
   useEffect(() => {
     if (licenseKeyProp && licenseKeyProp.trim() !== "") {
       LicenseManager.initialize().then(() => LicenseManager.setLicenseKey(licenseKeyProp)).catch(() => {});
+    } else if (licenseKeyProp === "") {
+      // Explicit removal: wipe the 30-day cache so Pro actually turns off.
+      LicenseManager.initialize().then(() => LicenseManager.clearLicense()).catch(() => {});
     } else {
       LicenseManager.initialize();
     }
@@ -302,7 +317,7 @@ export const FloatingDevTools = ({
   // Gate: Free tier only works in development mode
   // Pro users can use DevTools everywhere (dev + production)
   const isDevelopment = typeof __DEV__ !== "undefined" && __DEV__;
-  if (!isDevelopment && !isPro) {
+  if (!isDevelopment && !isLicensed) {
     // Free user in production - don't render DevTools
     return null;
   }
@@ -338,7 +353,12 @@ 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,
+            isPro: isLicensed,
+            licenseKey: licenseKey
+          })]
         })
       })
     })

package/lib/module/floatingMenu/FloatingMenu.js

@@ -1,7 +1,8 @@
 "use strict";
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { TouchableOpacity, StyleSheet, View, Dimensions } from "react-native";
+import { TouchableOpacity, StyleSheet, View } from "react-native";
+import { absoluteFill } from "@buoy-gg/shared-ui";
 import { FloatingTools, UserStatus } from "./floatingTools";
 import { DialDevTools } from "./dial/DialDevTools";
 import { EnvironmentIndicator, persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
@@ -22,10 +23,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 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
-} = Dimensions.get("window");
 export const FloatingMenu = ({
   apps,
   state,
@@ -322,11 +319,11 @@ const styles = StyleSheet.create({
     fontWeight: "900"
   },
   onboardingContainer: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     zIndex: 10000
   },
   onboardingBackdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.85)"
   }
 });