@buoy-gg/shared-ui 3.0.1 → 4.0.1

package/lib/commonjs/JsModal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.JsModal = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
+var _absoluteFill = require("./utils/absoluteFill.js");
 var _useSafeAreaInsets = require("./hooks/useSafeAreaInsets.js");
 var _index = require("./ui/gameUI/index.js");
 var _index2 = require("./ui/components/index.js");
@@ -1241,7 +1242,7 @@ const JsModalComponent = ({
 // ============================================================================
 const styles = _reactNative.StyleSheet.create({
   fullScreenContainer: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     zIndex: 1000
   },
   bottomSheetWrapper: {

package/lib/commonjs/clipboard/clipboard-impl.js

@@ -20,9 +20,17 @@ exports.isClipboardAvailable = exports.clipboardType = exports.clipboardFunction
  * Fallback chain:
  * 1. expo-clipboard
  * 2. @react-native-clipboard/clipboard
- * 3. Graceful failure
+ * 3. Web clipboard API (navigator.clipboard)
+ * 4. Graceful failure
  */
 
+// navigator.clipboard isn't in React Native's TS lib — narrow it manually
+
+function getWebClipboard() {
+  if (typeof navigator === "undefined") return null;
+  const clipboard = navigator.clipboard;
+  return clipboard && typeof clipboard.writeText === "function" ? clipboard : null;
+}
 // Grab module references at load time (top-level try-catch for Metro)
 // Always require both — we decide which actually works at call time
 let _expoClipboard = null;
@@ -67,6 +75,21 @@ async function detect(text) {
       return true;
     } catch {/* rn-clipboard not functional */}
   }
+
+  // 3. Web fallback (react-native-web / desktop dashboard / browsers)
+  const webClipboard = getWebClipboard();
+  if (webClipboard) {
+    try {
+      await webClipboard.writeText(text);
+      _detectedType = "web";
+      _clipboardFn = async t => {
+        await webClipboard.writeText(t);
+        return true;
+      };
+      _detected = true;
+      return true;
+    } catch {/* clipboard permission denied */}
+  }
   _detected = true;
   return false;
 }
@@ -76,7 +99,10 @@ const clipboardType = () => {
 exports.clipboardType = clipboardType;
 const isClipboardAvailable = () => {
   // Before first use, optimistically return true if we have a module ref
-  if (!_detected) return _expoClipboard != null || _rnClipboard != null;
+  // or the web clipboard API is present
+  if (!_detected) {
+    return _expoClipboard != null || _rnClipboard != null || getWebClipboard() != null;
+  }
   return _clipboardFn != null;
 };
 exports.isClipboardAvailable = isClipboardAvailable;

package/lib/commonjs/dataViewer/VirtualizedDataExplorer.js

@@ -726,7 +726,6 @@ const useDataFlattening = (data, maxDepth = 10, autoExpandFirstLevel = false) =>
 const VirtualizedItemComponent = ({
   item,
   onToggleExpanded,
-  data,
   index,
   onSelect,
   isSelected
@@ -790,9 +789,9 @@ const VirtualizedItemComponent = ({
           children: formatValue(item.value, item.valueType)
         })]
       })]
-    }), item.id === "root" && data !== undefined && data !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
-      value: data,
-      size: 16,
+    }), item.value !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+      value: item.value,
+      size: 14,
       buttonStyle: {
         marginLeft: 8,
         marginRight: 8
@@ -877,7 +876,6 @@ const VirtualizedDataExplorer = ({
     item: item,
     index: index,
     onToggleExpanded: toggleExpanded,
-    data: data,
     onSelect: setSelectedIndex,
     isSelected: selectedIndex === index
   });

package/lib/commonjs/hooks/safe-area-impl.js

@@ -7,7 +7,7 @@ exports.useNativeSafeAreaInsets = exports.safeAreaType = exports.hasSafeAreaPack
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-05-28T20:48:12.491Z
+ * Generated at: 2026-06-30T15:42:30.947Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/commonjs/icons/lucide-icons.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PlusIcon = exports.Plus = exports.PlayIcon = exports.Play = exports.PhoneIcon = exports.Phone = exports.PauseIcon = exports.Pause = exports.PaletteIcon = exports.Palette = exports.NavigationIcon = exports.Navigation = exports.MusicIcon = exports.Music = exports.MinusIcon = exports.Minus = exports.Maximize2Icon = exports.Maximize2 = exports.LockIcon = exports.Lock = exports.LinkIcon = exports.Link = exports.LayersIcon = exports.Layers = exports.KeyIcon = exports.Key = exports.InfoIcon = exports.Info = exports.ImageIcon = exports.Image = exports.HelpCircle = exports.HashIcon = exports.Hash = exports.HardDriveIcon = exports.HardDrive = exports.HandIcon = exports.Hand = exports.GlobeIcon = exports.Globe = exports.GitBranchIcon = exports.GitBranch = exports.FloatWindow = exports.FlaskConicalIcon = exports.FlaskConical = exports.FilterIcon = exports.Filter = exports.FilmIcon = exports.Film = exports.FileTextIcon = exports.FileText = exports.FileJsonIcon = exports.FileJson = exports.FileCodeIcon = exports.FileCode = exports.EyeOffIcon = exports.EyeOff = exports.EyeIcon = exports.Eye = exports.Edit3Icon = exports.Edit3 = exports.DownloadIcon = exports.Download = exports.DockBottom = exports.DatabaseIcon = exports.Database = exports.CopyIcon = exports.Copy = exports.CloudIcon = exports.Cloud = exports.ClockIcon = exports.Clock = exports.ChevronUpIcon = exports.ChevronUp = exports.ChevronRightIcon = exports.ChevronRight = exports.ChevronLeftIcon = exports.ChevronLeft = exports.ChevronDownIcon = exports.ChevronDown = exports.CheckSquareIcon = exports.CheckSquare = exports.CheckIcon = exports.CheckCircleIcon = exports.CheckCircle2Icon = exports.CheckCircle2 = exports.CheckCircle = exports.Check = exports.BugIcon = exports.Bug = exports.BoxIcon = exports.Box = exports.BarChart3Icon = exports.BarChart3 = exports.AlertTriangleIcon = exports.AlertTriangle = exports.AlertOctagon = exports.AlertCircleIcon = exports.AlertCircle = exports.ActivityIcon = exports.Activity = void 0;
-exports.ZapIcon = exports.Zap = exports.XIcon = exports.XCircleIcon = exports.XCircle = exports.X = exports.WifiIcon = exports.Wifi = exports.VolumeIcon = exports.Volume = exports.UsersIcon = exports.Users = exports.UserIcon = exports.User = exports.UploadIcon = exports.Upload = exports.UnlockIcon = exports.Unlock = exports.TriangleAlertIcon = exports.TriangleAlert = exports.TrashIcon = exports.Trash2Icon = exports.Trash2 = exports.Trash = exports.TouchpadIcon = exports.Touchpad = exports.TimerIcon = exports.Timer = exports.TestTube2Icon = exports.TestTube2 = exports.SquareIcon = exports.SquareDashedIcon = exports.SquareDashed = exports.Square = exports.SmartphoneIcon = exports.Smartphone = exports.ShieldIcon = exports.Shield = exports.SettingsIcon = exports.Settings = exports.ServerIcon = exports.Server = exports.SearchIcon = exports.Search = exports.RouteIcon = exports.Route = exports.RefreshCwIcon = exports.RefreshCw = exports.PowerIcon = exports.Power = void 0;
+exports.Play = exports.Pin = exports.PhoneIcon = exports.Phone = exports.PauseIcon = exports.Pause = exports.PaletteIcon = exports.Palette = exports.NavigationIcon = exports.Navigation = exports.MusicIcon = exports.Music = exports.MinusIcon = exports.Minus = exports.Maximize2Icon = exports.Maximize2 = exports.LockIcon = exports.Lock = exports.LinkIcon = exports.Link = exports.LayersIcon = exports.Layers = exports.KeyIcon = exports.Key = exports.InfoIcon = exports.Info = exports.ImageIcon = exports.Image = exports.HomeIcon = exports.Home = exports.HelpCircle = exports.HashIcon = exports.Hash = exports.HardDriveIcon = exports.HardDrive = exports.HandIcon = exports.Hand = exports.GlobeIcon = exports.Globe = exports.GitBranchIcon = exports.GitBranch = exports.FloatWindow = exports.FlaskConicalIcon = exports.FlaskConical = exports.FilterIcon = exports.Filter = exports.FilmIcon = exports.Film = exports.FileTextIcon = exports.FileText = exports.FileJsonIcon = exports.FileJson = exports.FileCodeIcon = exports.FileCode = exports.EyeOffIcon = exports.EyeOff = exports.EyeIcon = exports.Eye = exports.Edit3Icon = exports.Edit3 = exports.DownloadIcon = exports.Download = exports.DockBottom = exports.DatabaseIcon = exports.Database = exports.CopyIcon = exports.Copy = exports.CloudIcon = exports.Cloud = exports.ClockIcon = exports.Clock = exports.ChevronUpIcon = exports.ChevronUp = exports.ChevronRightIcon = exports.ChevronRight = exports.ChevronLeftIcon = exports.ChevronLeft = exports.ChevronDownIcon = exports.ChevronDown = exports.CheckSquareIcon = exports.CheckSquare = exports.CheckIcon = exports.CheckCircleIcon = exports.CheckCircle2Icon = exports.CheckCircle2 = exports.CheckCircle = exports.Check = exports.BugIcon = exports.Bug = exports.BoxIcon = exports.Box = exports.BarChart3Icon = exports.BarChart3 = exports.AlertTriangleIcon = exports.AlertTriangle = exports.AlertOctagon = exports.AlertCircleIcon = exports.AlertCircle = exports.ActivityIcon = exports.Activity = void 0;
+exports.ZapIcon = exports.Zap = exports.XIcon = exports.XCircleIcon = exports.XCircle = exports.X = exports.WifiIcon = exports.Wifi = exports.VolumeIcon = exports.Volume = exports.UsersIcon = exports.Users = exports.UserIcon = exports.User = exports.UploadIcon = exports.Upload = exports.UnlockIcon = exports.Unlock = exports.TriangleAlertIcon = exports.TriangleAlert = exports.TrashIcon = exports.Trash2Icon = exports.Trash2 = exports.Trash = exports.TouchpadIcon = exports.Touchpad = exports.TimerIcon = exports.Timer = exports.TestTube2Icon = exports.TestTube2 = exports.SquareIcon = exports.SquareDashedIcon = exports.SquareDashed = exports.Square = exports.SmartphoneIcon = exports.Smartphone = exports.ShieldIcon = exports.Shield = exports.SettingsIcon = exports.Settings = exports.ServerIcon = exports.Server = exports.SearchIcon = exports.Search = exports.RouteIcon = exports.Route = exports.RefreshCwIcon = exports.RefreshCw = exports.PowerIcon = exports.Power = exports.PlusIcon = exports.Plus = exports.PlayIcon = void 0;
 var _reactNative = require("react-native");
 var OriginalIcons = _interopRequireWildcard(require("./lucide-icons-original-full.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -524,6 +524,32 @@ const Eye = ({
   })]
 });
 exports.Eye = Eye;
+const Pin = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Circle, {
+    cx: 12,
+    cy: 9,
+    r: 5,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 12,
+    y1: 14,
+    x2: 12,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+exports.Pin = Pin;
 const EyeOff = ({
   size = 24,
   color = "currentColor",
@@ -1398,8 +1424,67 @@ const Plus = ({
     strokeWidth: strokeWidth
   })]
 });
+
+// Refresh / reload icon: a smooth 270° ring (open on the right) with a
+// clockwise triangle arrowhead. Built from the buoy icon-editor design
+// (smootharc ring + triangle) using the View-based border trick so it stays
+// crisp at any size. `strokeWidth` is accepted for API compatibility but the
+// proportions are fixed to keep the perfected look.
 exports.Plus = Plus;
 const RefreshCw = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth: _strokeWidth = 2,
+  ...props
+}) => {
+  const RING_RADIUS = 7; // outer radius, centered in the 24x24 viewBox
+  const RING_STROKE = 2.4;
+  const ARROW_SIZE = 5.2;
+  const ARROW_HALF = ARROW_SIZE * 0.577; // equilateral-ish half-width
+  // Arrowhead anchor (from the editor design, mapped into the 0..24 viewBox)
+  const arrowLeft = 12 + 3.162277660168379;
+  const arrowTop = 12 - 2.846049894151541 - ARROW_HALF;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: 12 - RING_RADIUS,
+        top: 12 - RING_RADIUS,
+        width: RING_RADIUS * 2,
+        height: RING_RADIUS * 2,
+        borderRadius: RING_RADIUS,
+        borderWidth: RING_STROKE,
+        borderTopColor: color,
+        borderLeftColor: color,
+        borderBottomColor: color,
+        borderRightColor: "transparent"
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: arrowLeft,
+        top: arrowTop,
+        width: 0,
+        height: 0,
+        borderTopWidth: ARROW_HALF,
+        borderBottomWidth: ARROW_HALF,
+        borderLeftWidth: ARROW_SIZE,
+        borderTopColor: "transparent",
+        borderBottomColor: "transparent",
+        borderLeftColor: color,
+        transform: [{
+          rotate: "45deg"
+        }]
+      }
+    })]
+  });
+};
+exports.RefreshCw = RefreshCw;
+const Home = ({
   size = 24,
   color = "currentColor",
   strokeWidth = 2,
@@ -1410,42 +1495,65 @@ const RefreshCw = ({
   viewBox: "0 0 24 24",
   ...props,
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
-    x1: 23,
-    y1: 4,
-    x2: 23,
-    y2: 10,
+    x1: 3,
+    y1: 10,
+    x2: 12,
+    y2: 3,
     stroke: color,
     strokeWidth: strokeWidth
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
-    x1: 23,
-    y1: 10,
-    x2: 17,
+    x1: 12,
+    y1: 3,
+    x2: 21,
     y2: 10,
     stroke: color,
     strokeWidth: strokeWidth
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
-    x1: 1,
-    y1: 20,
-    x2: 1,
-    y2: 14,
+    x1: 5,
+    y1: 9,
+    x2: 5,
+    y2: 21,
     stroke: color,
     strokeWidth: strokeWidth
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
-    x1: 1,
-    y1: 14,
-    x2: 7,
-    y2: 14,
+    x1: 19,
+    y1: 9,
+    x2: 19,
+    y2: 21,
     stroke: color,
     strokeWidth: strokeWidth
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Circle, {
-    cx: 12,
-    cy: 12,
-    r: 9,
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 5,
+    y1: 21,
+    x2: 19,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 10,
+    y1: 21,
+    x2: 10,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 10,
+    y1: 15,
+    x2: 14,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 14,
+    y1: 15,
+    x2: 14,
+    y2: 21,
     stroke: color,
     strokeWidth: strokeWidth
   })]
 });
-exports.RefreshCw = RefreshCw;
+exports.Home = Home;
+const HomeIcon = exports.HomeIcon = Home;
 const Search = ({
   size = 24,
   color = "currentColor",

package/lib/commonjs/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  absoluteFill: true,
   displayValue: true,
   parseDisplayValue: true,
   getSafeAreaInsets: true,
@@ -35,6 +36,7 @@ var _exportNames = {
   useSafeSegments: true,
   useSafeGlobalSearchParams: true,
   getSafeRouter: true,
+  getSafeCurrentPathname: true,
   isExpoRouterAvailable: true,
   isPlainObjectUtil: true,
   useSafeAreaInsets: true,
@@ -143,6 +145,12 @@ Object.defineProperty(exports, "UpgradePrompt", {
     return _index12.UpgradePrompt;
   }
 });
+Object.defineProperty(exports, "absoluteFill", {
+  enumerable: true,
+  get: function () {
+    return _index3.absoluteFill;
+  }
+});
 Object.defineProperty(exports, "buoyColors", {
   enumerable: true,
   get: function () {
@@ -209,6 +217,12 @@ Object.defineProperty(exports, "getSafeAreaInsets", {
     return _index3.getSafeAreaInsets;
   }
 });
+Object.defineProperty(exports, "getSafeCurrentPathname", {
+  enumerable: true,
+  get: function () {
+    return _index3.getSafeCurrentPathname;
+  }
+});
 Object.defineProperty(exports, "getSafeRouter", {
   enumerable: true,
   get: function () {

package/lib/commonjs/license/DeviceLimitModal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeviceLimitModal = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _absoluteFill = require("../utils/absoluteFill.js");
 var _macOSDesignSystemColors = require("../ui/gameUI/constants/macOSDesignSystemColors.js");
 var _lucideIcons = require("../icons/lucide-icons.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -272,7 +273,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center"
   },
   backdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.8)"
   },
   modal: {

package/lib/commonjs/license/FeatureGate.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UpgradePrompt = exports.UpgradeModal = exports.ProUpgradeModal = exports.ProFeatureBanner = exports.ProBadge = exports.FeatureGate = void 0;
+exports.WEEKEND_PASS_LABEL = exports.UpgradePrompt = exports.UpgradeModal = exports.ProUpgradeModal = exports.ProFeatureBanner = exports.ProBadge = exports.FeatureGate = void 0;
 exports.useFeatureGate = useFeatureGate;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
 var _lucideIcons = require("../icons/lucide-icons.js");
 var _LicenseEntryModal = require("./LicenseEntryModal.js");
+var _openPricing = require("./openPricing.js");
 var _license = require("@buoy-gg/license");
 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); }
@@ -19,18 +20,33 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * Wraps premium features and shows an upgrade prompt for free users.
  */
 
+// Weekend Pass branding — a distinct violet so it never reads as the gold PRO.
+const WEEKEND_PASS_LABEL = exports.WEEKEND_PASS_LABEL = "WEEKEND PASS";
+const WEEKEND_VIOLET = "#BF5AF2";
+
 /**
- * Simple Pro badge for marking premium features
+ * Simple Pro badge for marking premium features.
+ *
+ * Reason-aware: when the free Weekend Pass is the active unlock (a free user on
+ * a weekend), it shows a violet "WEEKEND PASS" badge instead of the gold "PRO"
+ * so people know Pro is free this weekend. A real license — or a free user on a
+ * weekday seeing the badge as a Pro-feature marker — shows "PRO".
  */
 const ProBadge = ({
   style
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-  style: [styles.proBadge, style],
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    style: styles.proBadgeText,
-    children: "PRO"
-  })
-});
+}) => {
+  const {
+    reason
+  } = (0, _license.useProAccess)();
+  const weekend = reason === "weekend";
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.proBadge, weekend && styles.weekendBadge, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.proBadgeText, weekend && styles.weekendBadgeText],
+      children: weekend ? WEEKEND_PASS_LABEL : "PRO"
+    })
+  });
+};
 
 /**
  * Simple Pro upgrade modal - minimal modal with just upgrade button
@@ -63,6 +79,10 @@ const UpgradePrompt = ({
   const handlePress = (0, _react.useCallback)(() => {
     if (onUpgradePress) {
       onUpgradePress();
+    } else if (_openPricing.isWeb) {
+      // Desktop dashboard: buy on the website, not via the mobile Buoy.init()
+      // code path. (Already have a key? Enter it from the toolbar Upgrade button.)
+      (0, _openPricing.openPricing)();
     } else {
       setShowLicenseModal(true);
     }
@@ -190,13 +210,21 @@ const FeatureGate = ({
  */
 exports.FeatureGate = FeatureGate;
 function useFeatureGate() {
-  const isPro = (0, _license.useIsPro)();
+  const {
+    isPro,
+    isLicensed,
+    isWeekendFree,
+    reason
+  } = (0, _license.useProAccess)();
   const showUpgrade = () => {
-    _reactNative.Linking.openURL("https://buoy.gg/pro");
+    (0, _openPricing.openPricing)("https://buoy.gg/pro");
   };
   return {
     hasAccess: isPro,
     isPro,
+    isLicensed,
+    isWeekendFree,
+    reason,
     showUpgrade
   };
 }
@@ -214,6 +242,12 @@ const ProFeatureBanner = ({
   const [showLicenseModal, setShowLicenseModal] = (0, _react.useState)(false);
   const license = (0, _license.useLicense)();
   const handleUpgrade = (0, _react.useCallback)(() => {
+    // Desktop dashboard: open pricing in the browser instead of the mobile
+    // license-entry modal.
+    if (_openPricing.isWeb) {
+      (0, _openPricing.openPricing)();
+      return;
+    }
     setShowLicenseModal(true);
   }, []);
   const handleCloseModal = (0, _react.useCallback)(() => {
@@ -289,6 +323,12 @@ const UpgradeModal = ({
   const [showLicenseModal, setShowLicenseModal] = (0, _react.useState)(false);
   const license = (0, _license.useLicense)();
   const handleUpgrade = (0, _react.useCallback)(() => {
+    // Desktop dashboard: send users straight to the pricing page in their
+    // browser instead of the mobile Buoy.init() license-entry modal.
+    if (_openPricing.isWeb) {
+      (0, _openPricing.openPricing)();
+      return;
+    }
     setShowLicenseModal(true);
   }, []);
   const handleCloseLicenseModal = (0, _react.useCallback)(() => {
@@ -424,6 +464,15 @@ const styles = _reactNative.StyleSheet.create({
     color: _gameUIColors.buoyColors.primary,
     letterSpacing: 0.5
   },
+  // Weekend Pass variant — violet instead of the gold/primary PRO.
+  weekendBadge: {
+    backgroundColor: WEEKEND_VIOLET + "1A",
+    borderColor: WEEKEND_VIOLET + "55"
+  },
+  weekendBadgeText: {
+    color: WEEKEND_VIOLET,
+    letterSpacing: 0.4
+  },
   container: {
     padding: 20,
     alignItems: "center",

package/lib/commonjs/license/LicenseEntryModal.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.LicenseEntryModal = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _absoluteFill = require("../utils/absoluteFill.js");
 var _macOSDesignSystemColors = require("../ui/gameUI/constants/macOSDesignSystemColors.js");
+var _openPricing = require("./openPricing.js");
 var _lucideIcons = require("../icons/lucide-icons.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); }
@@ -40,7 +42,7 @@ const LicenseEntryModal = ({
 }) => {
   const [copied, setCopied] = _react.default.useState(false);
   const handleGetLicense = (0, _react.useCallback)(() => {
-    _reactNative.Linking.openURL(purchaseUrl);
+    (0, _openPricing.openPricing)(purchaseUrl);
   }, [purchaseUrl]);
   const handleCopyCode = (0, _react.useCallback)(() => {
     if (Clipboard?.setString) {
@@ -106,7 +108,16 @@ const LicenseEntryModal = ({
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.dividerLine
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        }), _openPricing.isWeb ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.instructionsContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.instructionsNote,
+            children: "Click the Upgrade button in the top toolbar and paste your license key. It also unlocks automatically when a connected device is running Buoy Pro."
+          })
+        }) :
+        /*#__PURE__*/
+        /* Option 2: Instructions */
+        (0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.instructionsContainer,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: styles.instructionsHeader,
@@ -199,7 +210,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center"
   },
   backdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.8)"
   },
   modal: {

package/lib/commonjs/license/ManageDevicesModal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ManageDevicesModal = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _absoluteFill = require("../utils/absoluteFill.js");
 var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
 var _lucideIcons = require("../icons/lucide-icons.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -343,7 +344,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center"
   },
   backdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.7)"
   },
   modal: {

package/lib/commonjs/license/openPricing.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isWeb = exports.PRICING_URL = void 0;
+exports.openPricing = openPricing;
+var _reactNative = require("react-native");
+const PRICING_URL = exports.PRICING_URL = "https://buoy.gg/pricing";
+
+/** True when running on the desktop dashboard / web (react-native-web). */
+const isWeb = exports.isWeb = _reactNative.Platform.OS === "web";
+
+/**
+ * Open an upgrade/pricing URL.
+ *
+ * On the desktop dashboard (web) the upgrade flow is NOT the mobile
+ * `Buoy.init()` code path — the user buys on the website (or enters a key in
+ * the toolbar). Route the link through the Electron shell bridge so it lands in
+ * the user's DEFAULT browser instead of a bare in-app window; fall back to
+ * window.open for a plain browser tab. On native, use React Native Linking.
+ */
+function openPricing(url = PRICING_URL) {
+  // Access the browser globals via globalThis so this file doesn't depend on
+  // the DOM lib (the shared package targets React Native).
+  const win = globalThis.window;
+  if (isWeb && win) {
+    if (win.buoyShell?.openExternal) {
+      win.buoyShell.openExternal(url);
+      return;
+    }
+    win.open?.(url, "_blank", "noopener");
+    return;
+  }
+  _reactNative.Linking.openURL(url);
+}

package/lib/commonjs/storage/devToolsStorageKeys.js

@@ -98,6 +98,7 @@ const devToolsStorageKeys = exports.devToolsStorageKeys = {
     filters: () => `${devToolsStorageKeys.storage.root()}_filters`,
     eventFilters: () => `${devToolsStorageKeys.storage.root()}_event_filters`,
     keyFilters: () => `${devToolsStorageKeys.storage.root()}_key_filters`,
+    pinnedKeys: () => `${devToolsStorageKeys.storage.root()}_pinned_keys`,
     preferences: () => `${devToolsStorageKeys.storage.root()}_preferences`,
     activeTab: () => `${devToolsStorageKeys.storage.root()}_active_tab`,
     isMonitoring: () => `${devToolsStorageKeys.storage.root()}_is_monitoring`,