@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/clipboard/autoDetectClipboard.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "clipboardFunction", {
+  enumerable: true,
+  get: function () {
+    return _clipboardImpl.clipboardFunction;
+  }
+});
+Object.defineProperty(exports, "clipboardType", {
+  enumerable: true,
+  get: function () {
+    return _clipboardImpl.clipboardType;
+  }
+});
+exports.createAutoDetectedClipboard = createAutoDetectedClipboard;
+exports.getAutoDetectedClipboard = getAutoDetectedClipboard;
+Object.defineProperty(exports, "isClipboardAvailable", {
+  enumerable: true,
+  get: function () {
+    return _clipboardImpl.isClipboardAvailable;
+  }
+});
+var _clipboardImpl = require("./clipboard-impl.js");
+/**
+ * Auto-detect Clipboard Implementation
+ *
+ * This module re-exports clipboard functionality that was configured
+ * at install time by the postinstall script (scripts/detect-clipboard.js).
+ *
+ * The postinstall script detects which clipboard library is installed:
+ * 1. expo-clipboard (preferred for Expo projects)
+ * 2. @react-native-clipboard/clipboard (for RN CLI projects)
+ * 3. none (graceful degradation)
+ *
+ * This is a TRUE zero-config solution because:
+ * - No metro.config.js changes needed
+ * - Detection happens at install time (not bundle time)
+ * - Metro sees static imports only
+ * - Works with any Metro version
+ */
+
+// Re-export everything from the generated implementation
+
+// For backwards compatibility, also export these wrapper functions
+
+/**
+ * Attempts to auto-detect and return a clipboard implementation.
+ * Returns null if no clipboard library is available.
+ */
+function createAutoDetectedClipboard() {
+  if ((0, _clipboardImpl.isClipboardAvailable)()) {
+    return _clipboardImpl.clipboardFunction;
+  }
+  return null;
+}
+
+/**
+ * Gets the auto-detected clipboard function.
+ * Returns a function that will attempt to copy text and return success/failure.
+ * If no clipboard library is available, it logs an error and returns false.
+ */
+function getAutoDetectedClipboard() {
+  return _clipboardImpl.clipboardFunction;
+}

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isClipboardAvailable = exports.clipboardType = exports.clipboardFunction = void 0;
+/**
+ * Auto-generated clipboard implementation
+ * Detected: none
+ * Generated at: 2026-01-03T16:08:00.605Z
+ *
+ * DO NOT EDIT - This file is generated by scripts/detect-clipboard.js
+ *
+ * No clipboard library found. Install one of:
+ * - expo-clipboard (for Expo projects)
+ * - @react-native-clipboard/clipboard (for RN CLI projects)
+ */
+
+const clipboardType = exports.clipboardType = null;
+const isClipboardAvailable = () => false;
+exports.isClipboardAvailable = isClipboardAvailable;
+const clipboardFunction = async text => {
+  console.error("[RnBetterDevTools] Copy failed: No clipboard library found.\n" + `Attempted to copy: ${text.substring(0, 50)}${text.length > 50 ? "..." : ""}\n` + "Install expo-clipboard or @react-native-clipboard/clipboard, or provide a custom onCopy function.");
+  return false;
+};
+exports.clipboardFunction = clipboardFunction;

package/lib/commonjs/clipboard/copyToClipboard.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.copyToClipboard = copyToClipboard;
+exports.isClipboardAvailable = isClipboardAvailable;
+var _autoDetectClipboard = require("./autoDetectClipboard.js");
+var _safeStringify = require("../utils/safeStringify.js");
+var _displayValue = require("../utils/displayValue.js");
+// Get the clipboard function once
+const clipboardFunction = (0, _autoDetectClipboard.getAutoDetectedClipboard)();
+
+/**
+ * Copy a value to clipboard, handling stringification automatically
+ * @param value - The value to copy (can be any type)
+ * @returns Promise<boolean> - true if successful, false otherwise
+ */
+async function copyToClipboard(value) {
+  try {
+    // If it's already a string, use it directly
+    const textToCopy = typeof value === "string" ? value :
+    // Use displayValue for simple values, safeStringify for complex ones
+    typeof value === "object" && value !== null ? (() => {
+      // Create a defensive copy to prevent any modifications to the original object
+      // This is important when used with virtualized lists or React state
+      try {
+        // For simple objects, use structured clone if available
+        // @ts-expect-error structuredClone is not defined in the browser
+        if (typeof structuredClone === "function") {
+          // @ts-expect-error tructuredClone is not defined in the browser
+          const cloned = structuredClone(value);
+          return (0, _safeStringify.safeStringify)(cloned, 2, {
+            depthLimit: 100,
+            edgesLimit: 1000
+          });
+        }
+      } catch {
+        // structuredClone might fail for certain objects
+      }
+
+      // Fall back to safeStringify with the original value
+      // The safeStringify function should handle this safely
+      return (0, _safeStringify.safeStringify)(value, 2, {
+        depthLimit: 100,
+        edgesLimit: 1000
+      });
+    })() : (0, _displayValue.displayValue)(value);
+    return await clipboardFunction(textToCopy);
+  } catch (error) {
+    console.error("[RnBetterDevTools] Copy failed:", error);
+    console.error("Value type:", typeof value);
+    console.error("Value constructor:", value?.constructor?.name);
+    return false;
+  }
+}
+
+/**
+ * Check if clipboard functionality is available
+ */
+function isClipboardAvailable() {
+  // The auto-detected clipboard always returns a function,
+  // but it might be a fallback that always returns false
+  // We can check by seeing if it has warned about missing libraries
+  return true; // Always return true since we have a fallback
+}

package/lib/commonjs/clipboard/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "copyToClipboard", {
+  enumerable: true,
+  get: function () {
+    return _copyToClipboard.copyToClipboard;
+  }
+});
+Object.defineProperty(exports, "createAutoDetectedClipboard", {
+  enumerable: true,
+  get: function () {
+    return _autoDetectClipboard.createAutoDetectedClipboard;
+  }
+});
+Object.defineProperty(exports, "getAutoDetectedClipboard", {
+  enumerable: true,
+  get: function () {
+    return _autoDetectClipboard.getAutoDetectedClipboard;
+  }
+});
+var _copyToClipboard = require("./copyToClipboard.js");
+var _autoDetectClipboard = require("./autoDetectClipboard.js");

package/lib/commonjs/context/HintsContext.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HintsProvider = HintsProvider;
+exports.useHintsContext = useHintsContext;
+exports.useHintsDisabled = useHintsDisabled;
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * HintsContext - Context for controlling hint/tooltip visibility across all dev tools
+ *
+ * This context allows users to disable all onboarding hints with a single prop.
+ */
+
+const HintsContext = /*#__PURE__*/(0, _react.createContext)({
+  hintsDisabled: false
+});
+/**
+ * Provider component for controlling hint visibility
+ */
+function HintsProvider({
+  disableHints = false,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HintsContext.Provider, {
+    value: {
+      hintsDisabled: disableHints
+    },
+    children: children
+  });
+}
+
+/**
+ * Hook to check if hints are disabled
+ * @returns true if hints should be hidden
+ */
+function useHintsDisabled() {
+  const context = (0, _react.useContext)(HintsContext);
+  return context.hintsDisabled;
+}
+
+/**
+ * Hook to get the full hints context
+ */
+function useHintsContext() {
+  return (0, _react.useContext)(HintsContext);
+}

package/lib/commonjs/context/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HintsProvider", {
+  enumerable: true,
+  get: function () {
+    return _HintsContext.HintsProvider;
+  }
+});
+Object.defineProperty(exports, "useHintsContext", {
+  enumerable: true,
+  get: function () {
+    return _HintsContext.useHintsContext;
+  }
+});
+Object.defineProperty(exports, "useHintsDisabled", {
+  enumerable: true,
+  get: function () {
+    return _HintsContext.useHintsDisabled;
+  }
+});
+var _HintsContext = require("./HintsContext.js");

package/lib/commonjs/dataViewer/CyberpunkInput.js

@@ -0,0 +1,382 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CyberpunkInput = CyberpunkInput;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../icons/index.js");
+var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function CyberpunkInput({
+  label,
+  containerStyle,
+  showNumberControls = false,
+  onIncrement,
+  onDecrement,
+  showDeleteButton = false,
+  onDelete,
+  ...props
+}) {
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+
+  // Animated values for glitch effect
+  const glitchOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const glitchX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const glitchY = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const glitchScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const borderGlow = (0, _react.useRef)(new _reactNative.Animated.Value(0.6)).current;
+  (0, _react.useEffect)(() => {
+    if (isFocused) {
+      // Border glow animation
+      _reactNative.Animated.timing(borderGlow, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true
+      }).start();
+
+      // Glitch opacity animation
+      _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(glitchOpacity, {
+        toValue: 0,
+        duration: 2000,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchOpacity, {
+        toValue: 0.8,
+        duration: 30,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchOpacity, {
+        toValue: 0,
+        duration: 20,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchOpacity, {
+        toValue: 0.6,
+        duration: 40,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchOpacity, {
+        toValue: 0,
+        duration: 30,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchOpacity, {
+        toValue: 0.4,
+        duration: 20,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchOpacity, {
+        toValue: 0,
+        duration: 50,
+        useNativeDriver: true
+      })])).start();
+
+      // Glitch X displacement
+      _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(glitchX, {
+        toValue: 0,
+        duration: 2500,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchX, {
+        toValue: 3,
+        duration: 20,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchX, {
+        toValue: -3,
+        duration: 20,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchX, {
+        toValue: 2,
+        duration: 20,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchX, {
+        toValue: 0,
+        duration: 20,
+        useNativeDriver: true
+      })])).start();
+
+      // Glitch Y displacement
+      _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(glitchY, {
+        toValue: 0,
+        duration: 2200,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchY, {
+        toValue: -2,
+        duration: 30,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchY, {
+        toValue: 1,
+        duration: 20,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchY, {
+        toValue: 0,
+        duration: 30,
+        useNativeDriver: true
+      })])).start();
+
+      // Glitch scale effect
+      _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(glitchScale, {
+        toValue: 1,
+        duration: 3000,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchScale, {
+        toValue: 1.01,
+        duration: 20,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchScale, {
+        toValue: 0.99,
+        duration: 20,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(glitchScale, {
+        toValue: 1,
+        duration: 20,
+        useNativeDriver: true
+      })])).start();
+    } else {
+      // Reset animations when not focused
+      _reactNative.Animated.timing(borderGlow, {
+        toValue: 0.6,
+        duration: 200,
+        useNativeDriver: true
+      }).start();
+      _reactNative.Animated.timing(glitchOpacity, {
+        toValue: 0,
+        duration: 100,
+        useNativeDriver: true
+      }).start();
+      _reactNative.Animated.timing(glitchX, {
+        toValue: 0,
+        duration: 100,
+        useNativeDriver: true
+      }).start();
+      _reactNative.Animated.timing(glitchY, {
+        toValue: 0,
+        duration: 100,
+        useNativeDriver: true
+      }).start();
+      _reactNative.Animated.timing(glitchScale, {
+        toValue: 1,
+        duration: 100,
+        useNativeDriver: true
+      }).start();
+    }
+  }, [isFocused, borderGlow, glitchOpacity, glitchX, glitchY, glitchScale]);
+  const handleFocus = e => {
+    setIsFocused(true);
+    props.onFocus?.(e);
+  };
+  const handleBlur = e => {
+    setIsFocused(false);
+    props.onBlur?.(e);
+  };
+  const containerAnimatedStyle = {
+    opacity: borderGlow,
+    borderColor: isFocused ? _gameUIColors.buoyColors.primary : _gameUIColors.buoyColors.textMuted + "4D"
+  };
+  const glitchAnimatedStyle = {
+    opacity: glitchOpacity,
+    transform: [{
+      translateX: glitchX
+    }, {
+      translateY: glitchY
+    }, {
+      scale: glitchScale
+    }]
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, containerStyle],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.rowContainer,
+      children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, isFocused && styles.labelFocused],
+        children: label.toUpperCase()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+        style: [styles.inputContainer, containerAnimatedStyle],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          // @ts-ignore - glitchAnimatedStyle is not typed
+          style: [styles.glitchOverlay, glitchAnimatedStyle],
+          pointerEvents: "none"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ...props,
+          style: [styles.input, props.style, showNumberControls && styles.inputWithControls, showDeleteButton && styles.inputWithDelete],
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          placeholderTextColor: _gameUIColors.buoyColors.textMuted + "99",
+          autoComplete: "off",
+          autoCorrect: false,
+          autoCapitalize: "none",
+          spellCheck: false
+        }), showNumberControls && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.numberControls,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: [styles.controlButton, isFocused && styles.controlButtonFocused],
+            onPress: onIncrement,
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
+              size: 14,
+              strokeWidth: 2.5,
+              color: isFocused ? _gameUIColors.buoyColors.primary : _gameUIColors.buoyColors.textMuted
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: [styles.controlButton, isFocused && styles.controlButtonFocused],
+            onPress: onDecrement,
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
+              size: 14,
+              strokeWidth: 2.5,
+              color: isFocused ? _gameUIColors.buoyColors.primary : _gameUIColors.buoyColors.textMuted
+            })
+          })]
+        }), showDeleteButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: [styles.deleteButton, isFocused && styles.deleteButtonFocused],
+          onPress: onDelete,
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Trash, {
+            size: 14,
+            strokeWidth: 2,
+            color: isFocused ? _gameUIColors.buoyColors.error : _gameUIColors.buoyColors.error + "CC"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.cornerAccent, styles.cornerTL, isFocused && styles.cornerAccentFocused]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.cornerAccent, styles.cornerTR, isFocused && styles.cornerAccentFocused]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.cornerAccent, styles.cornerBL, isFocused && styles.cornerAccentFocused]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.cornerAccent, styles.cornerBR, isFocused && styles.cornerAccentFocused]
+        })]
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    width: "100%",
+    marginVertical: 3
+  },
+  rowContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  label: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    color: _gameUIColors.buoyColors.textMuted,
+    letterSpacing: 0.5,
+    minWidth: 60
+  },
+  labelFocused: {
+    color: _gameUIColors.buoyColors.primary
+  },
+  inputContainer: {
+    flex: 1,
+    borderWidth: 1,
+    borderRadius: 6,
+    position: "relative",
+    minHeight: 34,
+    justifyContent: "center",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  glitchOverlay: {
+    position: "absolute",
+    top: -1,
+    left: -1,
+    right: -1,
+    bottom: -1,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _gameUIColors.buoyColors.primary,
+    zIndex: 10
+  },
+  input: {
+    flex: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    color: _gameUIColors.buoyColors.text,
+    fontSize: 12,
+    fontFamily: "monospace",
+    backgroundColor: "transparent",
+    zIndex: 1
+  },
+  inputWithControls: {
+    paddingRight: 4
+  },
+  inputWithDelete: {
+    paddingRight: 4
+  },
+  numberControls: {
+    flexDirection: "row",
+    gap: 2,
+    paddingRight: 4,
+    zIndex: 2
+  },
+  controlButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _gameUIColors.buoyColors.textMuted + "33",
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2
+  },
+  controlButtonFocused: {
+    borderColor: _gameUIColors.buoyColors.primary + "CC",
+    shadowColor: _gameUIColors.buoyColors.primary,
+    shadowOpacity: 0.3,
+    shadowRadius: 4
+  },
+  deleteButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _gameUIColors.buoyColors.error + "4D",
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: _gameUIColors.buoyColors.error,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 3,
+    marginRight: 4,
+    zIndex: 2
+  },
+  deleteButtonFocused: {
+    borderColor: _gameUIColors.buoyColors.error + "CC",
+    shadowOpacity: 0.3,
+    shadowRadius: 5
+  },
+  cornerAccent: {
+    position: "absolute",
+    width: 6,
+    height: 1.2,
+    backgroundColor: _gameUIColors.buoyColors.textMuted + "CC",
+    zIndex: 0
+  },
+  cornerAccentFocused: {
+    backgroundColor: _gameUIColors.buoyColors.primary
+  },
+  cornerTL: {
+    top: -1,
+    left: 5
+  },
+  cornerTR: {
+    top: -1,
+    right: 5
+  },
+  cornerBL: {
+    bottom: -1,
+    left: 5
+  },
+  cornerBR: {
+    bottom: -1,
+    right: 5
+  }
+});