@buoy-gg/shared-ui 1.7.2

package/lib/module/clipboard/autoDetectClipboard.js

@@ -0,0 +1,45 @@
+"use strict";
+
+/**
+ * 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
+export { clipboardFunction, clipboardType, isClipboardAvailable } from "./clipboard-impl.js";
+
+// For backwards compatibility, also export these wrapper functions
+import { clipboardFunction, isClipboardAvailable as _isClipboardAvailable } from "./clipboard-impl.js";
+
+/**
+ * Attempts to auto-detect and return a clipboard implementation.
+ * Returns null if no clipboard library is available.
+ */
+export function createAutoDetectedClipboard() {
+  if (_isClipboardAvailable()) {
+    return 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.
+ */
+export function getAutoDetectedClipboard() {
+  return clipboardFunction;
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+/**
+ * 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)
+ */
+
+export const clipboardType = null;
+export const isClipboardAvailable = () => false;
+export 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;
+};

package/lib/module/clipboard/copyToClipboard.js

@@ -0,0 +1,62 @@
+"use strict";
+
+import { getAutoDetectedClipboard } from "./autoDetectClipboard.js";
+import { safeStringify } from "../utils/safeStringify.js";
+import { displayValue } from "../utils/displayValue.js";
+
+// Get the clipboard function once
+const clipboardFunction = 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
+ */
+export 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 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 safeStringify(value, 2, {
+        depthLimit: 100,
+        edgesLimit: 1000
+      });
+    })() : 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
+ */
+export 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/module/clipboard/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+// Clipboard utilities
+export { copyToClipboard } from "./copyToClipboard.js";
+export { createAutoDetectedClipboard, getAutoDetectedClipboard } from "./autoDetectClipboard.js";

package/lib/module/context/HintsContext.js

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

package/lib/module/context/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { HintsProvider, useHintsDisabled, useHintsContext } from "./HintsContext.js";

package/lib/module/dataViewer/CyberpunkInput.js

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

package/lib/module/dataViewer/DataViewer.js

@@ -0,0 +1,137 @@
+"use strict";
+
+import { useState, useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { VirtualizedDataExplorer } from "./VirtualizedDataExplorer.js";
+import { isPlainObject } from "../types/types.js";
+import { TypeLegend } from "./TypeLegend.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataViewer component that combines VirtualizedDataExplorer with TypeLegend
+ * Provides type filtering functionality like in Sentry event details
+ *
+ * Applied principles [[rule3]]:
+ * - Decompose by Responsibility: Combines data viewing with type filtering
+ * - Prefer Composition over Configuration: Uses existing components
+ * - Extract Reusable Logic: Shared between storage and Sentry views
+ */
+export const DataViewer = ({
+  title,
+  data,
+  maxDepth = 10,
+  rawMode = true,
+  showTypeFilter = true,
+  initialExpanded = false,
+  disableCopy = false
+}) => {
+  const [activeFilter, setActiveFilter] = useState(null);
+
+  // Calculate visible types in the data
+  const visibleTypes = useMemo(() => {
+    if (!data || !showTypeFilter) return [];
+    const types = [];
+    const processValue = (value, depth = 0) => {
+      if (depth > 3) return; // Limit depth for performance
+
+      const type = Array.isArray(value) ? "array" : value === null ? "null" : typeof value;
+      types.push(type);
+      if (type === "object" && isPlainObject(value)) {
+        Object.values(value).forEach(v => processValue(v, depth + 1));
+      } else if (Array.isArray(value)) {
+        value.forEach(v => processValue(v, depth + 1));
+      }
+    };
+    processValue(data);
+    return Array.from(new Set(types)).slice(0, 8); // Unique types, limit to 8
+  }, [data, showTypeFilter]);
+
+  // Get filtered data based on active filter
+  const getFilteredData = useMemo(() => {
+    if (!activeFilter || !data) return null;
+    const filteredObject = {};
+    let itemCount = 0;
+    const flattenByType = (obj, targetType, path = "", depth = 0) => {
+      if (depth > 10 || itemCount > 100) return;
+      if (Array.isArray(obj)) {
+        obj.forEach((item, index) => {
+          const currentPath = path ? `${path}[${index}]` : `[${index}]`;
+          const itemType = item === null ? "null" : typeof item;
+          if (itemType === targetType) {
+            filteredObject[currentPath] = item;
+            itemCount++;
+          }
+
+          // Recurse into nested structures
+          if (itemType === "object" && item !== null || Array.isArray(item)) {
+            flattenByType(item, targetType, currentPath, depth + 1);
+          }
+        });
+      } else if (obj && typeof obj === "object") {
+        Object.entries(obj).forEach(([key, value]) => {
+          const currentPath = path ? `${path}.${key}` : key;
+          const valueType = Array.isArray(value) ? "array" : value === null ? "null" : typeof value;
+          if (valueType === targetType) {
+            filteredObject[currentPath] = value;
+            itemCount++;
+          }
+
+          // Recurse into nested structures
+          if (valueType === "object" && value !== null || valueType === "array") {
+            flattenByType(value, targetType, currentPath, depth + 1);
+          }
+        });
+      }
+    };
+    flattenByType(data, activeFilter);
+    return {
+      filteredObject,
+      itemCount
+    };
+  }, [activeFilter, data]);
+
+  // Render content based on filter state
+  const renderContent = () => {
+    // Show filtered results if filter is active
+    if (activeFilter && getFilteredData) {
+      return /*#__PURE__*/_jsx(VirtualizedDataExplorer, {
+        title: `${activeFilter} values`,
+        data: getFilteredData.filteredObject,
+        maxDepth: maxDepth,
+        rawMode: rawMode,
+        initialExpanded: initialExpanded,
+        disableCopy: disableCopy
+      });
+    }
+
+    // Default: show all data
+    return /*#__PURE__*/_jsx(VirtualizedDataExplorer, {
+      title: title,
+      data: data,
+      maxDepth: maxDepth,
+      rawMode: rawMode,
+      initialExpanded: initialExpanded,
+      disableCopy: disableCopy
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [showTypeFilter && /*#__PURE__*/_jsx(View, {
+      style: styles.header,
+      children: /*#__PURE__*/_jsx(TypeLegend, {
+        types: visibleTypes,
+        activeFilter: activeFilter,
+        onFilterChange: setActiveFilter
+      })
+    }), renderContent()]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  }
+});