@buoy-gg/shared-ui 1.7.7 → 2.1.1

package/lib/commonjs/JsModal.js

@@ -9,7 +9,7 @@ var _reactNative = require("react-native");
 var _useSafeAreaInsets = require("./hooks/useSafeAreaInsets.js");
 var _index = require("./ui/gameUI/index.js");
 var _index2 = require("./ui/components/index.js");
-var _safeAsyncStorage = require("./utils/safeAsyncStorage.js");
+var _persistentStorage = require("./utils/persistentStorage.js");
 var _devToolsStorageKeys = require("./storage/devToolsStorageKeys.js");
 var _index3 = require("./context/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -58,7 +58,7 @@ class ModalStorage {
   static async save(key, value) {
     try {
       this.memoryCache[key] = value;
-      await (0, _safeAsyncStorage.safeSetItem)(key, JSON.stringify(value));
+      await _persistentStorage.persistentStorage.setItem(key, JSON.stringify(value));
     } catch (error) {
       // Failed to save modal state
     }
@@ -78,7 +78,7 @@ class ModalStorage {
       }
 
       // Load from storage (AsyncStorage or memory fallback)
-      const stored = await (0, _safeAsyncStorage.safeGetItem)(key);
+      const stored = await _persistentStorage.persistentStorage.getItem(key);
       if (stored) {
         const parsed = JSON.parse(stored);
         this.memoryCache[key] = parsed;
@@ -339,7 +339,8 @@ const JsModalComponent = ({
   onMinimize,
   minimizeTargetPosition,
   initialModalState,
-  zIndex
+  zIndex,
+  disableScrollWrapper = false
 }) => {
   const insets = (0, _useSafeAreaInsets.useSafeAreaInsets)();
   const [isStateLoaded, setIsStateLoaded] = (0, _react.useState)(!enablePersistence);
@@ -429,7 +430,7 @@ const JsModalComponent = ({
     const loadHintStatus = async () => {
       try {
         const hintKey = _devToolsStorageKeys.devToolsStorageKeys.modal.hintAcknowledged();
-        const acknowledged = await (0, _safeAsyncStorage.safeGetItem)(hintKey);
+        const acknowledged = await _persistentStorage.persistentStorage.getItem(hintKey);
         if (mounted) {
           // Show hint if not acknowledged yet
           setShowHint(acknowledged !== "true");
@@ -453,7 +454,7 @@ const JsModalComponent = ({
   const handleHintAcknowledge = (0, _react.useCallback)(async () => {
     try {
       const hintKey = _devToolsStorageKeys.devToolsStorageKeys.modal.hintAcknowledged();
-      await (0, _safeAsyncStorage.safeSetItem)(hintKey, "true");
+      await _persistentStorage.persistentStorage.setItem(hintKey, "true");
       setShowHint(false);
     } catch (error) {
       // Failed to save hint acknowledgment, just hide it locally
@@ -1101,7 +1102,19 @@ const JsModalComponent = ({
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: [styles.content, customStyles.content],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        children: [disableScrollWrapper ?
+        /*#__PURE__*/
+        // Render children directly when they manage their own scrolling (FlatList, etc.)
+        (0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flex: 1,
+            paddingBottom: footerHeight
+          },
+          children: children
+        }) :
+        /*#__PURE__*/
+        // Wrap in ScrollView for content that needs scrolling
+        (0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
           style: {
             flex: 1
           },
@@ -1190,7 +1203,19 @@ const JsModalComponent = ({
           onAcknowledge: handleHintAcknowledge
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: [styles.content, customStyles.content],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          children: [disableScrollWrapper ?
+          /*#__PURE__*/
+          // Render children directly when they manage their own scrolling (FlatList, etc.)
+          (0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              flex: 1,
+              paddingBottom: footerHeight
+            },
+            children: children
+          }) :
+          /*#__PURE__*/
+          // Wrap in ScrollView for content that needs scrolling
+          (0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
             style: {
               flex: 1
             },

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

@@ -7,7 +7,7 @@ exports.isClipboardAvailable = exports.clipboardType = exports.clipboardFunction
 /**
  * Auto-generated clipboard implementation
  * Detected: none
- * Generated at: 2026-01-03T18:51:49.000Z
+ * Generated at: 2026-01-12T04:02:16.197Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-clipboard.js
  *

package/lib/commonjs/clipboard/copyToClipboard.js

@@ -26,9 +26,7 @@ async function copyToClipboard(value) {
       // 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,

package/lib/commonjs/dataViewer/diffThemes.js

@@ -52,51 +52,54 @@ const gitClassicTheme = exports.gitClassicTheme = {
 
 /**
  * Dev Tools Default Theme
- * Clean dark theme using our gameUIColors
+ * Clean dark theme matching Buoy website brand colors
  */
 const devToolsDefaultTheme = exports.devToolsDefaultTheme = {
   name: "Dev Tools Default",
-  description: "Clean dark theme with our game UI colors",
-  // Use our gameUIColors-inspired dark theme
-  background: "#0A0E1A",
-  panelBackground: "#0F1420",
-  headerBackground: "#141925",
-  // Diff colors with our cyan/yellow/red scheme
-  addedBackground: "rgba(74, 255, 159, 0.1)",
-  removedBackground: "rgba(255, 82, 82, 0.1)",
-  modifiedBackground: "rgba(0, 184, 230, 0.1)",
+  description: "Clean dark theme with Buoy brand colors",
+  // Surface colors (matching website dark theme)
+  background: "#121212",
+  panelBackground: "#1A1A1A",
+  headerBackground: "#1A1A1A",
+  // Diff colors using website's semantic colors
+  // Added: Primary teal (#20C997)
+  // Removed: Error red (#EF4444)
+  // Modified: Secondary purple (#9B70E0)
+  addedBackground: "rgba(32, 201, 151, 0.12)",
+  removedBackground: "rgba(239, 68, 68, 0.12)",
+  modifiedBackground: "rgba(155, 112, 224, 0.12)",
   unchangedBackground: "transparent",
   contextBackground: "rgba(255, 255, 255, 0.02)",
   // Text colors
-  addedText: "#4AFF9F",
-  removedText: "#FF5252",
-  modifiedText: "#00B8E6",
-  unchangedText: "#B8BFC9",
+  addedText: "#20C997",
+  removedText: "#EF4444",
+  modifiedText: "#9B70E0",
+  unchangedText: "#E0E0E0",
   // Word-level highlights
-  addedWordHighlight: "rgba(74, 255, 159, 0.3)",
-  removedWordHighlight: "rgba(255, 82, 82, 0.3)",
+  addedWordHighlight: "rgba(32, 201, 151, 0.3)",
+  removedWordHighlight: "rgba(239, 68, 68, 0.3)",
   // UI elements
-  lineNumberBackground: "#0A0E1A",
-  lineNumberText: "#7A8599",
-  lineNumberBorder: "#1F2937",
+  lineNumberBackground: "#121212",
+  lineNumberText: "#A0A0A0",
+  lineNumberBorder: "#333333",
   // Markers
-  markerAddedBackground: "rgba(74, 255, 159, 0.2)",
-  markerRemovedBackground: "rgba(255, 82, 82, 0.2)",
-  markerModifiedBackground: "rgba(0, 184, 230, 0.2)",
-  markerText: "#7A8599",
+  markerAddedBackground: "rgba(32, 201, 151, 0.2)",
+  markerRemovedBackground: "rgba(239, 68, 68, 0.2)",
+  markerModifiedBackground: "rgba(155, 112, 224, 0.2)",
+  markerText: "#A0A0A0",
   // Borders and dividers
-  borderColor: "#1F2937",
-  dividerColor: "#1F2937",
+  borderColor: "#333333",
+  dividerColor: "#333333",
   // Summary bar
-  summaryBackground: "#0F1420",
-  summaryAddedText: "#4AFF9F",
-  summaryRemovedText: "#FF5252",
-  summaryModifiedText: "#00B8E6",
+  summaryBackground: "#1A1A1A",
+  summaryAddedText: "#20C997",
+  summaryRemovedText: "#EF4444",
+  summaryModifiedText: "#9B70E0",
   // Empty state
-  emptyStateText: "#7A8599",
+  emptyStateText: "#888888",
   // Separator
-  separatorBackground: "#141925",
-  separatorText: "#7A8599"
+  separatorBackground: "#1A1A1A",
+  separatorText: "#A0A0A0"
 };
 
 /**

package/lib/commonjs/history/HistoryProvider.js

@@ -0,0 +1,246 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HistoryProvider = HistoryProvider;
+exports.useAllHistoryEntries = useAllHistoryEntries;
+exports.useHistoryAdapter = useHistoryAdapter;
+exports.useHistoryAdapters = useHistoryAdapters;
+exports.useHistoryContext = useHistoryContext;
+exports.useHistoryEntryCounts = useHistoryEntryCounts;
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * HistoryProvider - Context for Universal History DevTools
+ *
+ * Manages registered adapters and provides unified access to history
+ * from Redux, Zustand, MMKV, React Query, etc.
+ */
+
+// =============================================================================
+// CONTEXT VALUE
+// =============================================================================
+
+const HistoryContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+// =============================================================================
+// PROVIDER
+// =============================================================================
+
+function HistoryProvider({
+  children,
+  initialAdapters = []
+}) {
+  // Adapter registry
+  const [adapterMap, setAdapterMap] = (0, _react.useState)(() => {
+    const map = new Map();
+    initialAdapters.forEach(reg => {
+      map.set(reg.adapter.id, {
+        ...reg,
+        enabled: reg.enabled ?? true
+      });
+    });
+    return map;
+  });
+
+  // Selected adapter filter
+  const [selectedAdapterId, setSelectedAdapterId] = (0, _react.useState)(null);
+
+  // Refresh trigger
+  const [refreshKey, setRefreshKey] = (0, _react.useState)(0);
+  const refresh = (0, _react.useCallback)(() => setRefreshKey(k => k + 1), []);
+
+  // Subscribe to all adapters
+  (0, _react.useEffect)(() => {
+    const unsubscribes = [];
+    adapterMap.forEach(reg => {
+      if (reg.enabled) {
+        const unsub = reg.adapter.subscribe(refresh);
+        unsubscribes.push(unsub);
+      }
+    });
+    return () => {
+      unsubscribes.forEach(unsub => unsub());
+    };
+  }, [adapterMap, refresh]);
+
+  // Get sorted adapters list
+  const adapters = (0, _react.useMemo)(() => {
+    return Array.from(adapterMap.values()).filter(reg => reg.enabled).sort((a, b) => (a.priority ?? 100) - (b.priority ?? 100)).map(reg => reg.adapter);
+  }, [adapterMap, refreshKey]);
+
+  // Get adapter by id
+  const getAdapter = (0, _react.useCallback)(id => adapterMap.get(id)?.adapter, [adapterMap]);
+
+  // Register adapter
+  const registerAdapter = (0, _react.useCallback)(registration => {
+    setAdapterMap(prev => {
+      const next = new Map(prev);
+      next.set(registration.adapter.id, {
+        ...registration,
+        enabled: registration.enabled ?? true
+      });
+      return next;
+    });
+  }, []);
+
+  // Unregister adapter
+  const unregisterAdapter = (0, _react.useCallback)(id => {
+    setAdapterMap(prev => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  // Get all entries (combined or filtered)
+  const getAllEntries = (0, _react.useCallback)(filter => {
+    let entries = [];
+
+    // Collect from all (or selected) adapters
+    const sourceAdapters = selectedAdapterId && filter?.sources === undefined ? adapters.filter(a => a.id === selectedAdapterId) : adapters;
+    sourceAdapters.forEach(adapter => {
+      // Skip if sources filter excludes this adapter
+      if (filter?.sources && !filter.sources.includes(adapter.id)) {
+        return;
+      }
+      entries = entries.concat(adapter.getEntries());
+    });
+
+    // Apply filters
+    if (filter) {
+      entries = applyFilter(entries, filter);
+    }
+
+    // Sort by timestamp (newest first by default)
+    entries.sort((a, b) => b.timestamp - a.timestamp);
+    return entries;
+  }, [adapters, selectedAdapterId, refreshKey]);
+
+  // Get entry counts per source
+  const getEntryCounts = (0, _react.useCallback)(() => {
+    const counts = {};
+    adapters.forEach(adapter => {
+      counts[adapter.id] = adapter.getEntryCount();
+    });
+    return counts;
+  }, [adapters, refreshKey]);
+  const value = (0, _react.useMemo)(() => ({
+    adapters,
+    getAdapter,
+    registerAdapter,
+    unregisterAdapter,
+    getAllEntries,
+    getEntryCounts,
+    selectedAdapterId,
+    setSelectedAdapterId,
+    refresh
+  }), [adapters, getAdapter, registerAdapter, unregisterAdapter, getAllEntries, getEntryCounts, selectedAdapterId, refresh]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HistoryContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+
+// =============================================================================
+// HOOKS
+// =============================================================================
+
+/**
+ * Get the full history context
+ */
+function useHistoryContext() {
+  const context = (0, _react.useContext)(HistoryContext);
+  if (!context) {
+    throw new Error("useHistoryContext must be used within a HistoryProvider");
+  }
+  return context;
+}
+
+/**
+ * Get all registered adapters
+ */
+function useHistoryAdapters() {
+  return useHistoryContext().adapters;
+}
+
+/**
+ * Get a specific adapter by id
+ */
+function useHistoryAdapter(id) {
+  return useHistoryContext().getAdapter(id);
+}
+
+/**
+ * Get combined entries from all adapters
+ */
+function useAllHistoryEntries(filter) {
+  const {
+    getAllEntries
+  } = useHistoryContext();
+  return getAllEntries(filter);
+}
+
+/**
+ * Get entry counts per source
+ */
+function useHistoryEntryCounts() {
+  return useHistoryContext().getEntryCounts();
+}
+
+// =============================================================================
+// FILTER HELPER
+// =============================================================================
+
+function applyFilter(entries, filter) {
+  return entries.filter(entry => {
+    // Search text
+    if (filter.searchText) {
+      const search = filter.searchText.toLowerCase();
+      if (!entry.label.toLowerCase().includes(search)) {
+        return false;
+      }
+    }
+
+    // Only with changes
+    if (filter.onlyWithChanges && !entry.hasStateChange) {
+      return false;
+    }
+
+    // Only errors
+    if (filter.onlyErrors && entry.status !== "error") {
+      return false;
+    }
+
+    // Time range
+    if (filter.afterTimestamp && entry.timestamp < filter.afterTimestamp) {
+      return false;
+    }
+    if (filter.beforeTimestamp && entry.timestamp > filter.beforeTimestamp) {
+      return false;
+    }
+
+    // Ignored patterns
+    if (filter.ignoredPatterns?.length) {
+      for (const pattern of filter.ignoredPatterns) {
+        if (new RegExp(pattern).test(entry.label)) {
+          return false;
+        }
+      }
+    }
+
+    // Included patterns (must match at least one)
+    if (filter.includedPatterns?.length) {
+      let matched = false;
+      for (const pattern of filter.includedPatterns) {
+        if (new RegExp(pattern).test(entry.label)) {
+          matched = true;
+          break;
+        }
+      }
+      if (!matched) return false;
+    }
+    return true;
+  });
+}

package/lib/commonjs/history/components/HistoryEntryRow.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HistoryEntryRow = HistoryEntryRow;
+var _reactNative = require("react-native");
+var _CompactRow = require("../../ui/components/CompactRow.js");
+var _gameUIColors = require("../../ui/gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * HistoryEntryRow - Universal row component for history entries
+ *
+ * Wraps CompactRow to display entries from any adapter (Redux, Zustand, MMKV, etc.)
+ */
+
+/**
+ * Format timestamp to relative time
+ */
+function formatRelativeTime(timestamp) {
+  const now = Date.now();
+  const diff = now - timestamp;
+  if (diff < 1000) return "just now";
+  if (diff < 60000) return `${Math.floor(diff / 1000)}s ago`;
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+  return `${Math.floor(diff / 3600000)}h ago`;
+}
+
+/**
+ * Get status color based on entry properties
+ */
+function getStatusColor(entry, adapter) {
+  // Use adapter color if available
+  if (adapter?.color) {
+    return adapter.color;
+  }
+
+  // Status-based colors (React Query style)
+  if (entry.status === "error") return _gameUIColors.buoyColors.error;
+  if (entry.status === "pending") return _gameUIColors.buoyColors.warning;
+  if (entry.status === "success") return _gameUIColors.buoyColors.success;
+
+  // Change-based colors
+  if (entry.hasStateChange) return _gameUIColors.buoyColors.success;
+
+  // Skipped entries
+  if (entry.isSkipped) return _gameUIColors.buoyColors.textMuted;
+
+  // Future entries (after current index)
+  if (entry.isInFuture) return _gameUIColors.buoyColors.textMuted + "80";
+
+  // Source-based fallback colors
+  switch (entry.source) {
+    case "redux":
+      return "#764ABC";
+    // Redux purple
+    case "zustand":
+      return "#443E38";
+    // Zustand brown
+    case "mmkv":
+      return "#4CAF50";
+    // Green
+    case "async-storage":
+      return "#2196F3";
+    // Blue
+    case "react-query":
+      return "#FF4154";
+    // React Query red
+    case "jotai":
+      return "#000000";
+    // Black
+    case "legend-state":
+      return "#7C3AED";
+    // Purple
+    default:
+      return _gameUIColors.buoyColors.textSecondary;
+  }
+}
+
+/**
+ * Get status label for display
+ */
+function getStatusLabel(entry) {
+  if (entry.isSkipped) return "Skipped";
+  if (entry.isInFuture) return "Future";
+  if (entry.status) {
+    return entry.status.charAt(0).toUpperCase() + entry.status.slice(1);
+  }
+  if (entry.hasStateChange) return "Changed";
+  return "Action";
+}
+
+/**
+ * Get sublabel (source or category)
+ */
+function getSublabel(entry, adapter) {
+  if (adapter?.name) return adapter.name;
+  if (entry.category) return entry.category;
+  return entry.source;
+}
+function HistoryEntryRow({
+  entry,
+  adapter,
+  isSelected,
+  onPress,
+  showSource = true,
+  showDuration = true
+}) {
+  const statusColor = getStatusColor(entry, adapter);
+  const statusLabel = getStatusLabel(entry);
+  const sublabel = showSource ? getSublabel(entry, adapter) : undefined;
+
+  // Build bottom right text (timestamp + optional duration)
+  let bottomRightText = formatRelativeTime(entry.timestamp);
+  if (showDuration && entry.duration !== undefined) {
+    bottomRightText = `${entry.duration.toFixed(1)}ms · ${bottomRightText}`;
+  }
+
+  // Custom badge showing change indicator
+  const customBadge = entry.hasStateChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.changeBadge,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.changeBadgeText,
+      children: "\u26A1"
+    })
+  }) : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompactRow.CompactRow, {
+    statusDotColor: statusColor,
+    statusLabel: statusLabel,
+    statusSublabel: sublabel,
+    primaryText: entry.label,
+    bottomRightText: bottomRightText,
+    customBadge: customBadge,
+    isSelected: isSelected,
+    onPress: onPress ? () => onPress(entry) : undefined,
+    showChevron: !!onPress
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  changeBadge: {
+    paddingHorizontal: 4
+  },
+  changeBadgeText: {
+    fontSize: 12
+  }
+});