@buoy-gg/shared-ui 7.0.36 → 7.0.38

package/lib/commonjs/utils/minimalSuperJSON.js

@@ -321,9 +321,19 @@ function deserialize(payload) {
     ...json
   };
 
-  // Apply transformations
-  for (const [pathString, type] of Object.entries(meta.values)) {
-    const path = parsePath(pathString);
+  // Apply transformations deepest path first: a Map's own annotation turns
+  // its entries array into a Map, after which the paths INSIDE it (a Map
+  // held by one of its values, say) can no longer be reached by index. The
+  // walker records parents before children, so the order is reversed here.
+  const annotations = Object.entries(meta.values).map(([pathString, type]) => ({
+    pathString,
+    type,
+    path: parsePath(pathString)
+  })).sort((a, b) => b.path.length - a.path.length);
+  for (const {
+    type,
+    path
+  } of annotations) {
     if (path.length === 0) {
       // Root level transformation
       result = untransformValue(result, type);

package/lib/module/JsModal.js

@@ -1,5 +1,7 @@
 "use strict";
 
+import { getUseAccountAccess } from "./license/licenseModule.js";
+import { AccountSetup } from "./license/AccountSetup";
 /**
  * JsModal - Ultra-optimized for true 60FPS performance
  *
@@ -377,6 +379,7 @@ const JsModalComponent = ({
   footerHeight = 0,
   onBack,
   onMinimize,
+  minimizeRequest = 0,
   minimizeTargetPosition,
   initialModalState,
   zIndex,
@@ -684,6 +687,12 @@ const JsModalComponent = ({
       });
     }
   }, [mode, onMinimize, minimizeTargetPosition, visibilityProgress, bottomSheetTranslateY, floatingScale, floatingPosition]);
+  const lastMinimizeRequest = useRef(minimizeRequest);
+  useEffect(() => {
+    if (lastMinimizeRequest.current === minimizeRequest) return;
+    lastMinimizeRequest.current = minimizeRequest;
+    handleMinimize();
+  }, [minimizeRequest, handleMinimize]);
 
   // Apply initial modal state when restoring from minimized
   useEffect(() => {
@@ -1792,4 +1801,10 @@ const footerStyles = StyleSheet.create({
 // ============================================================================
 // EXPORT - Memoized modal component for optimal performance
 // ============================================================================
-export const JsModal = /*#__PURE__*/memo(JsModalComponent);
+export const JsModal = /*#__PURE__*/memo(props => {
+  const access = getUseAccountAccess()();
+  if (access.status !== "admitted") return props.visible ? /*#__PURE__*/_jsx(AccountSetup, {}) : null;
+  return /*#__PURE__*/_jsx(JsModalComponent, {
+    ...props
+  });
+});

package/lib/module/JsModal.web.js

@@ -1,5 +1,7 @@
 "use strict";
 
+import { getUseAccountAccess } from "./license/licenseModule.js";
+import { AccountSetup } from "./license/AccountSetup";
 /**
  * JsModal.web — DOM port of JsModal.tsx (React Native).
  *
@@ -753,6 +755,7 @@ const JsModalComponent = ({
   onBack: _onBack,
   // native never invokes it from JsModal either
   onMinimize,
+  minimizeRequest = 0,
   minimizeTargetPosition,
   initialModalState,
   zIndex,
@@ -958,6 +961,12 @@ const JsModalComponent = ({
       }, () => onMinimize(currentState)));
     }
   }, [mode, onMinimize, minimizeTargetPosition, cancelAnims]);
+  const lastMinimizeRequest = useRef(minimizeRequest);
+  useEffect(() => {
+    if (lastMinimizeRequest.current === minimizeRequest) return;
+    lastMinimizeRequest.current = minimizeRequest;
+    handleMinimize();
+  }, [minimizeRequest, handleMinimize]);
 
   // Apply initial modal state when restoring from minimized (native parity).
   useEffect(() => {
@@ -1630,4 +1639,10 @@ const JsModalComponent = ({
 // ============================================================================
 // EXPORT — memoized like native
 // ============================================================================
-export const JsModal = /*#__PURE__*/memo(JsModalComponent);
+export const JsModal = /*#__PURE__*/memo(props => {
+  const access = getUseAccountAccess()();
+  if (access.status !== "admitted") return props.visible ? /*#__PURE__*/_jsx(AccountSetup, {}) : null;
+  return /*#__PURE__*/_jsx(JsModalComponent, {
+    ...props
+  });
+});

package/lib/module/dataViewer/CyberpunkInput.js

@@ -222,7 +222,12 @@ export function CyberpunkInput({
         }), showDeleteButton && /*#__PURE__*/_jsx(TouchableOpacity, {
           style: [styles.deleteButton, isFocused && styles.deleteButtonFocused],
           onPress: onDelete,
-          activeOpacity: 0.7,
+          activeOpacity: 0.7
+          // The same handle scheme container nodes use (`<node>-delete`):
+          // the input is `<node>-input`, so its delete is `<node>-delete`.
+          ,
+          testID: typeof props.testID === "string" && props.testID.endsWith("-input") ? `${props.testID.slice(0, -"-input".length)}-delete` : undefined,
+          accessibilityLabel: "Delete item",
           children: /*#__PURE__*/_jsx(Trash, {
             size: 14,
             strokeWidth: 2,

package/lib/module/dataViewer/LiveExplorer.js

@@ -188,22 +188,29 @@ function ToggleValueButton({
   // Pre-compute styles based on value state
   const badgeStyle = value ? styles.toggleBadgeTrue : styles.toggleBadgeFalse;
   const textStyle = value ? styles.toggleTextTrue : styles.toggleTextFalse;
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    "sentry-label": "ignore devtools explorer toggle button",
-    testID: `${testID}-toggle`,
-    accessibilityRole: "button",
-    accessibilityLabel: `${dataPath[dataPath.length - 1] ?? "value"}, ${value ? "true" : "false"}`,
-    style: styles.modernToggleButton,
-    onPress: handleClick,
-    hitSlop: HIT_SLOP_OPTIMIZED,
-    activeOpacity: 0.8,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.toggleBadge, badgeStyle],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.toggleBadgeText, textStyle],
-        children: value ? "TRUE" : "FALSE"
+
+  // Two sibling buttons: on web each renders a real <button>, and a delete
+  // button inside the toggle button is invalid HTML (its press would also
+  // flip the toggle).
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.toggleRow,
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      "sentry-label": "ignore devtools explorer toggle button",
+      testID: `${testID}-toggle`,
+      accessibilityRole: "button",
+      accessibilityLabel: `${dataPath[dataPath.length - 1] ?? "value"}, ${value ? "true" : "false"}`,
+      style: styles.modernToggleButton,
+      onPress: handleClick,
+      hitSlop: HIT_SLOP_OPTIMIZED,
+      activeOpacity: 0.8,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.toggleBadge, badgeStyle],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.toggleBadgeText, textStyle],
+          children: value ? "TRUE" : "FALSE"
+        })
       })
-    }), removable && writer.remove && /*#__PURE__*/_jsx(TouchableOpacity, {
+    }), removable && writer.remove ? /*#__PURE__*/_jsx(TouchableOpacity, {
       "sentry-label": "ignore devtools explorer delete button in toggle",
       testID: `${testID}-delete`,
       accessibilityRole: "button",
@@ -217,7 +224,7 @@ function ToggleValueButton({
         strokeWidth: 2,
         color: night.color.danger + "CC"
       })
-    })]
+    }) : null]
   });
 }
 // Optimized Explorer component following rule2 guidelines [[memory:4875251]]
@@ -860,6 +867,11 @@ const styles = StyleSheet.create({
     borderColor: night.color.textTertiary + "66",
     minHeight: 34
   },
+  toggleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
   modernToggleButton: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-09-10T21:40:50.832Z
+ * Generated at: 2026-09-17T23:44:21.398Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/icons/ReactQueryIcon.js

@@ -1,164 +1,12 @@
 "use strict";
 
-import { View } from "react-native";
-import { IconBackground } from "./IconBackground.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const ColorPresets = {
-  red: {
-    color: "#FF3366",
-    glow: "#FF3366"
-  },
-  orange: {
-    color: "#FF8800",
-    glow: "#FF8800"
-  },
-  yellow: {
-    color: "#FFD700",
-    glow: "#FFD700"
-  },
-  purple: {
-    color: "#9945FF",
-    glow: "#9945FF"
-  },
-  cyan: {
-    color: "#00D4FF",
-    glow: "#00D4FF"
-  },
-  pink: {
-    color: "#FF45FF",
-    glow: "#FF45FF"
-  }
-};
-
-// Simplified orbital dots
-const ORBITAL_DOTS = [{
-  x: 0.08,
-  y: 0.5
-}, {
-  x: 0.92,
-  y: 0.5
-}, {
-  x: 0.5,
-  y: 0.2
-}, {
-  x: 0.5,
-  y: 0.8
-}];
-export const ReactQueryIcon = ({
-  size = 24,
-  color,
-  glowColor,
-  colorPreset = "red",
-  variant = "circuit",
-  noBackground = true
-}) => {
-  const scale = noBackground ? size / 24 : size / 60;
-  const preset = ColorPresets[colorPreset] || ColorPresets.red;
-  const activeColor = color || preset.color;
-  const activeGlow = glowColor || preset.glow;
-
-  // Simplified hexagon using loop
-  const renderHexagon = () => {
-    const hexWidth = 8 * scale;
-    const hexHeight = 2.5 * scale;
-    const hexLeft = size / 2 - hexWidth / 2;
-    const hexTop = size / 2 - hexHeight / 2;
-    const rotations = [0, 60, -60];
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [rotations.map((rotation, i) => /*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          width: hexWidth,
-          height: hexHeight,
-          backgroundColor: activeColor,
-          left: hexLeft,
-          top: hexTop,
-          transform: rotation !== 0 ? [{
-            rotate: `${rotation}deg`
-          }] : undefined,
-          opacity: 0.9
-        }
-      }, `hex-${i}`)), /*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          width: 10 * scale,
-          height: 10 * scale,
-          borderRadius: 2 * scale,
-          backgroundColor: activeGlow,
-          left: size / 2 - 5 * scale,
-          top: size / 2 - 5 * scale,
-          opacity: 0.15
-        }
-      })]
-    });
-  };
-
-  // Simplified orbital lines using loop
-  const renderOrbitalLines = () => {
-    const lineLength = 18 * scale;
-    const lineThickness = 2 * scale;
-    const orbitRadius = lineThickness / 2;
-    const rotations = [0, 60, -60];
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [rotations.map((rotation, i) => /*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          width: lineLength,
-          height: lineThickness,
-          backgroundColor: activeColor,
-          borderRadius: orbitRadius,
-          left: size / 2 - lineLength / 2,
-          top: size / 2 - lineThickness / 2,
-          transform: rotation !== 0 ? [{
-            rotate: `${rotation}deg`
-          }] : undefined,
-          opacity: 0.7
-        }
-      }, `orbit-${i}`)), ORBITAL_DOTS.map((dot, i) => /*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          width: 2.5 * scale,
-          height: 2.5 * scale,
-          borderRadius: 1.25 * scale,
-          backgroundColor: activeGlow,
-          left: dot.x * size - 1.25 * scale,
-          top: dot.y * size - 1.25 * scale,
-          opacity: 0.5
-        }
-      }, `dot-${i}`))]
-    });
-  };
-  const iconContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [renderOrbitalLines(), renderHexagon(), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: size * 0.7,
-        height: size * 0.7,
-        borderRadius: size * 0.35,
-        borderWidth: 0.5 * scale,
-        borderColor: activeGlow,
-        left: size * 0.15,
-        top: size * 0.15,
-        opacity: 0.2
-      }
-    })]
-  });
-  if (noBackground) {
-    return /*#__PURE__*/_jsx(View, {
-      style: {
-        width: size,
-        height: size,
-        position: "relative",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: iconContent
-    });
-  }
-  return /*#__PURE__*/_jsx(IconBackground, {
-    size: size,
-    glowColor: activeGlow,
-    variant: variant,
-    children: iconContent
+// Compatibility export: all tool surfaces use the approved raster artwork.
+import { QueryIcon } from "@buoy-gg/floating-tools-core";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ReactQueryIcon({
+  size = 24
+}) {
+  return /*#__PURE__*/_jsx(QueryIcon, {
+    size: size
   });
-};
+}

package/lib/module/icons/SentryBugIcon.js

@@ -1,176 +1,14 @@
 "use strict";
 
-import { Fragment } from "react";
-import { View } from "react-native";
-import { IconBackground } from "./IconBackground.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const ColorPresets = {
-  red: {
-    color: "#FF3366",
-    glow: "#FF3366"
-  },
-  purple: {
-    color: "#9945FF",
-    glow: "#9945FF"
-  },
-  orange: {
-    color: "#FF8800",
-    glow: "#FF8800"
-  },
-  pink: {
-    color: "#FF45FF",
-    glow: "#FF45FF"
-  },
-  cyan: {
-    color: "#00D4FF",
-    glow: "#00D4FF"
-  },
-  green: {
-    color: "#00FF88",
-    glow: "#00FF88"
-  }
-};
-
-// Leg positions simplified
-const LEGS = [{
-  y: 0.3,
-  side: "left",
-  rotation: -20
-}, {
-  y: 0.5,
-  side: "left",
-  rotation: -20
-}, {
-  y: 0.7,
-  side: "left",
-  rotation: -20
-}, {
-  y: 0.3,
-  side: "right",
-  rotation: 20
-}, {
-  y: 0.5,
-  side: "right",
-  rotation: 20
-}, {
-  y: 0.7,
-  side: "right",
-  rotation: 20
-}];
-export const SentryBugIcon = ({
+// Compatibility export: all tool surfaces use the approved raster artwork.
+import { SentryIcon } from "@buoy-gg/floating-tools-core";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SentryBugIcon({
   size = 24,
-  color,
-  glowColor,
-  colorPreset = "red",
-  variant = "circuit",
-  noBackground = true
-}) => {
-  const scale = noBackground ? size / 24 : size / 60;
-  const preset = ColorPresets[colorPreset] || ColorPresets.red;
-  const activeColor = color || preset.color;
-  const activeGlow = glowColor || preset.glow;
-  const iconContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: 12 * scale,
-        height: 14 * scale,
-        borderRadius: 6 * scale,
-        backgroundColor: activeColor,
-        left: size / 2 - 6 * scale,
-        top: size / 2 - 5 * scale,
-        opacity: 0.9
-      }
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: 8 * scale,
-        height: 6 * scale,
-        borderRadius: 4 * scale,
-        backgroundColor: activeColor,
-        left: size / 2 - 4 * scale,
-        top: size / 2 - 9 * scale,
-        opacity: 0.95
-      }
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: 14 * scale,
-        height: 16 * scale,
-        borderRadius: 7 * scale,
-        backgroundColor: activeGlow,
-        left: size / 2 - 7 * scale,
-        top: size / 2 - 6 * scale,
-        opacity: 0.15
-      }
-    }), LEGS.map((leg, i) => /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: 4 * scale,
-        height: 0.8 * scale,
-        backgroundColor: activeColor,
-        [leg.side]: size / 2 - 10 * scale,
-        top: size / 2 - 4 * scale + leg.y * 10 * scale,
-        transform: [{
-          rotate: `${leg.rotation}deg`
-        }],
-        opacity: 0.8
-      }
-    }, `leg-${i}`)), [-15, 15].map((rotation, i) => /*#__PURE__*/_jsxs(Fragment, {
-      children: [/*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          width: 0.5 * scale,
-          height: 4 * scale,
-          backgroundColor: activeColor,
-          [i === 0 ? "left" : "right"]: size / 2 - 2 * scale,
-          top: size / 2 - 11 * scale,
-          transform: [{
-            rotate: `${rotation}deg`
-          }],
-          opacity: 0.7
-        }
-      }), /*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          width: 1.5 * scale,
-          height: 1.5 * scale,
-          borderRadius: 0.75 * scale,
-          backgroundColor: activeGlow,
-          [i === 0 ? "left" : "right"]: size / 2 - 3 * scale,
-          top: size / 2 - 12 * scale,
-          opacity: 0.6
-        }
-      })]
-    }, `antenna-${i}`)), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        width: 1 * scale,
-        height: 1 * scale,
-        borderRadius: 0.5 * scale,
-        backgroundColor: "#fff",
-        left: size / 2 - 0.5 * scale,
-        top: size / 2,
-        opacity: 0.3
-      }
-    })]
-  });
-  if (noBackground) {
-    return /*#__PURE__*/_jsx(View, {
-      style: {
-        width: size,
-        height: size,
-        position: "relative",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: iconContent
-    });
-  }
-  return /*#__PURE__*/_jsx(IconBackground, {
+  color
+}) {
+  return /*#__PURE__*/_jsx(SentryIcon, {
     size: size,
-    glowColor: activeGlow,
-    variant: variant,
-    children: iconContent
+    color: color ?? "#9945FF"
   });
-};
+}

package/lib/module/index.js

@@ -102,4 +102,7 @@ export { HintsProvider, useHintsDisabled, useHintsContext } from "./context/inde
 export * from "./history/index.js";
 
 // License/Feature gating exports
-export { FeatureGate, UpgradePrompt, useFeatureGate, ProFeatureBanner, UpgradeModal, LicenseEntryModal, ProBadge, ProUpgradeModal, FreeAccountPrompt, LOGIN_COMMAND, getUseIsPro, getUseLicense, getUseTier, TIER_LIMITS, useLimit, resolveEffectiveTier, freeKeyRaises } from "./license/index.js";
+export { FeatureGate, UpgradePrompt, useFeatureGate, ProFeatureBanner, UpgradeModal, LicenseEntryModal, ProBadge, ProUpgradeModal, FreeAccountPrompt, LOGIN_COMMAND, getUseIsPro, getUseLicense, getUseTier, TIER_LIMITS, useLimit, resolveEffectiveTier } from "./license/index.js";
+export { getAccountAccess, hasAccountAccess, assertAccountAccess, subscribeAccountAccess, getUseAccountAccess, retryAccountAccess } from "./license/licenseModule.js";
+export { guardToolAdapter } from "./sync/toolActionRegistry.js";
+export { AccountSetup } from "./license/AccountSetup";

package/lib/module/license/AccountSetup.js

@@ -0,0 +1,52 @@
+"use strict";
+
+import React, { useState } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { FreeAccountPrompt } from "./FreeAccountPrompt.js";
+import { getUseAccountAccess } from "./licenseModule.js";
+import { buoyColors } from "../ui/gameUI/constants/gameUIColors.js";
+
+/** The host app remains usable; only the Buoy launcher opens setup. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function AccountSetup() {
+  const access = getUseAccountAccess()();
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/_jsxs(View, {
+    pointerEvents: "box-none",
+    style: styles.root,
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      accessibilityRole: "button",
+      accessibilityLabel: "Set up Buoy account",
+      onPress: () => setOpen(true),
+      style: styles.button,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.text,
+        children: access.status === "initializing" ? "BUOY · Checking…" : "BUOY · Sign in"
+      })
+    }), /*#__PURE__*/_jsx(FreeAccountPrompt, {
+      visible: open,
+      onClose: () => setOpen(false)
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    position: "absolute",
+    bottom: 30,
+    right: 16,
+    zIndex: 99999
+  },
+  button: {
+    backgroundColor: buoyColors.card,
+    borderWidth: 1,
+    borderColor: buoyColors.primary,
+    borderRadius: 24,
+    paddingVertical: 12,
+    paddingHorizontal: 16
+  },
+  text: {
+    color: buoyColors.primary,
+    fontWeight: "700",
+    fontSize: 12
+  }
+});