@buoy-gg/shared-ui 1.7.7 → 2.1.1

package/lib/module/dataViewer/diffThemes.js

@@ -48,51 +48,54 @@ export const gitClassicTheme = {
 
 /**
  * Dev Tools Default Theme
- * Clean dark theme using our gameUIColors
+ * Clean dark theme matching Buoy website brand colors
  */
 export const 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/module/history/HistoryProvider.js

@@ -0,0 +1,237 @@
+"use strict";
+
+/**
+ * HistoryProvider - Context for Universal History DevTools
+ *
+ * Manages registered adapters and provides unified access to history
+ * from Redux, Zustand, MMKV, React Query, etc.
+ */
+
+import { createContext, useContext, useState, useCallback, useMemo, useEffect } from "react";
+
+// =============================================================================
+// CONTEXT VALUE
+// =============================================================================
+import { jsx as _jsx } from "react/jsx-runtime";
+const HistoryContext = /*#__PURE__*/createContext(null);
+
+// =============================================================================
+// PROVIDER
+// =============================================================================
+
+export function HistoryProvider({
+  children,
+  initialAdapters = []
+}) {
+  // Adapter registry
+  const [adapterMap, setAdapterMap] = 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] = useState(null);
+
+  // Refresh trigger
+  const [refreshKey, setRefreshKey] = useState(0);
+  const refresh = useCallback(() => setRefreshKey(k => k + 1), []);
+
+  // Subscribe to all adapters
+  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 = 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 = useCallback(id => adapterMap.get(id)?.adapter, [adapterMap]);
+
+  // Register adapter
+  const registerAdapter = 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 = useCallback(id => {
+    setAdapterMap(prev => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  // Get all entries (combined or filtered)
+  const getAllEntries = 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 = useCallback(() => {
+    const counts = {};
+    adapters.forEach(adapter => {
+      counts[adapter.id] = adapter.getEntryCount();
+    });
+    return counts;
+  }, [adapters, refreshKey]);
+  const value = useMemo(() => ({
+    adapters,
+    getAdapter,
+    registerAdapter,
+    unregisterAdapter,
+    getAllEntries,
+    getEntryCounts,
+    selectedAdapterId,
+    setSelectedAdapterId,
+    refresh
+  }), [adapters, getAdapter, registerAdapter, unregisterAdapter, getAllEntries, getEntryCounts, selectedAdapterId, refresh]);
+  return /*#__PURE__*/_jsx(HistoryContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+
+// =============================================================================
+// HOOKS
+// =============================================================================
+
+/**
+ * Get the full history context
+ */
+export function useHistoryContext() {
+  const context = useContext(HistoryContext);
+  if (!context) {
+    throw new Error("useHistoryContext must be used within a HistoryProvider");
+  }
+  return context;
+}
+
+/**
+ * Get all registered adapters
+ */
+export function useHistoryAdapters() {
+  return useHistoryContext().adapters;
+}
+
+/**
+ * Get a specific adapter by id
+ */
+export function useHistoryAdapter(id) {
+  return useHistoryContext().getAdapter(id);
+}
+
+/**
+ * Get combined entries from all adapters
+ */
+export function useAllHistoryEntries(filter) {
+  const {
+    getAllEntries
+  } = useHistoryContext();
+  return getAllEntries(filter);
+}
+
+/**
+ * Get entry counts per source
+ */
+export 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/module/history/components/HistoryEntryRow.js

@@ -0,0 +1,142 @@
+"use strict";
+
+/**
+ * HistoryEntryRow - Universal row component for history entries
+ *
+ * Wraps CompactRow to display entries from any adapter (Redux, Zustand, MMKV, etc.)
+ */
+
+import { View, Text, StyleSheet } from "react-native";
+import { CompactRow } from "../../ui/components/CompactRow.js";
+import { buoyColors } from "../../ui/gameUI/constants/gameUIColors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 buoyColors.error;
+  if (entry.status === "pending") return buoyColors.warning;
+  if (entry.status === "success") return buoyColors.success;
+
+  // Change-based colors
+  if (entry.hasStateChange) return buoyColors.success;
+
+  // Skipped entries
+  if (entry.isSkipped) return buoyColors.textMuted;
+
+  // Future entries (after current index)
+  if (entry.isInFuture) return 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 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;
+}
+export 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__*/_jsx(View, {
+    style: styles.changeBadge,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.changeBadgeText,
+      children: "\u26A1"
+    })
+  }) : undefined;
+  return /*#__PURE__*/_jsx(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 = StyleSheet.create({
+  changeBadge: {
+    paddingHorizontal: 4
+  },
+  changeBadgeText: {
+    fontSize: 12
+  }
+});

package/lib/module/history/components/HistoryList.js

@@ -0,0 +1,169 @@
+"use strict";
+
+/**
+ * HistoryList - Virtualized list of history entries
+ *
+ * Displays entries from one or all adapters with filtering and search.
+ */
+
+import { useCallback, useMemo } from "react";
+import { FlatList, View, Text, StyleSheet } from "react-native";
+import { buoyColors } from "../../ui/gameUI/constants/gameUIColors.js";
+import { HistoryEntryRow } from "./HistoryEntryRow.js";
+import { useAllHistoryEntries, useHistoryAdapters } from "../HistoryProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function HistoryList({
+  filter,
+  selectedEntryId,
+  onSelectEntry,
+  showSource = true,
+  emptyMessage = "No history entries yet",
+  ListHeaderComponent,
+  ListFooterComponent
+}) {
+  const entries = useAllHistoryEntries(filter);
+  const adapters = useHistoryAdapters();
+
+  // Create adapter lookup map
+  const adapterMap = useMemo(() => {
+    const map = new Map();
+    adapters.forEach(adapter => map.set(adapter.id, adapter));
+    return map;
+  }, [adapters]);
+
+  // Stable key extractor
+  const keyExtractor = useCallback(item => `${item.source}-${item.id}`, []);
+
+  // Render item
+  const renderItem = useCallback(({
+    item
+  }) => {
+    const adapter = adapterMap.get(item.source);
+    return /*#__PURE__*/_jsx(HistoryEntryRow, {
+      entry: item,
+      adapter: adapter,
+      isSelected: selectedEntryId === item.id,
+      onPress: onSelectEntry,
+      showSource: showSource
+    });
+  }, [adapterMap, selectedEntryId, onSelectEntry, showSource]);
+
+  // Empty state
+  const ListEmptyComponent = useMemo(() => /*#__PURE__*/_jsxs(View, {
+    style: styles.emptyContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.emptyText,
+      children: emptyMessage
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptySubtext,
+      children: "Actions will appear here as they happen"
+    })]
+  }), [emptyMessage]);
+  return /*#__PURE__*/_jsx(FlatList, {
+    data: entries,
+    keyExtractor: keyExtractor,
+    renderItem: renderItem,
+    ListEmptyComponent: ListEmptyComponent,
+    ListHeaderComponent: ListHeaderComponent,
+    ListFooterComponent: ListFooterComponent,
+    contentContainerStyle: styles.listContent,
+    showsVerticalScrollIndicator: false
+    // Performance optimizations
+    ,
+    removeClippedSubviews: true,
+    maxToRenderPerBatch: 15,
+    windowSize: 10,
+    initialNumToRender: 15,
+    getItemLayout: undefined // Dynamic height rows
+  });
+}
+
+/**
+ * Standalone HistoryList that doesn't require HistoryProvider
+ * Use this when you want to pass entries directly
+ */
+
+export function StandaloneHistoryList({
+  entries,
+  adapters = [],
+  selectedEntryId,
+  onSelectEntry,
+  showSource = true,
+  emptyMessage = "No history entries yet",
+  ListHeaderComponent,
+  ListFooterComponent
+}) {
+  // Create adapter lookup map
+  const adapterMap = useMemo(() => {
+    const map = new Map();
+    adapters.forEach(adapter => map.set(adapter.id, adapter));
+    return map;
+  }, [adapters]);
+
+  // Stable key extractor
+  const keyExtractor = useCallback(item => `${item.source}-${item.id}`, []);
+
+  // Render item
+  const renderItem = useCallback(({
+    item
+  }) => {
+    const adapter = adapterMap.get(item.source);
+    return /*#__PURE__*/_jsx(HistoryEntryRow, {
+      entry: item,
+      adapter: adapter,
+      isSelected: selectedEntryId === item.id,
+      onPress: onSelectEntry,
+      showSource: showSource
+    });
+  }, [adapterMap, selectedEntryId, onSelectEntry, showSource]);
+
+  // Empty state
+  const ListEmptyComponent = useMemo(() => /*#__PURE__*/_jsxs(View, {
+    style: styles.emptyContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.emptyText,
+      children: emptyMessage
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptySubtext,
+      children: "Actions will appear here as they happen"
+    })]
+  }), [emptyMessage]);
+  return /*#__PURE__*/_jsx(FlatList, {
+    data: entries,
+    keyExtractor: keyExtractor,
+    renderItem: renderItem,
+    ListEmptyComponent: ListEmptyComponent,
+    ListHeaderComponent: ListHeaderComponent,
+    ListFooterComponent: ListFooterComponent,
+    contentContainerStyle: styles.listContent,
+    showsVerticalScrollIndicator: false,
+    removeClippedSubviews: true,
+    maxToRenderPerBatch: 15,
+    windowSize: 10,
+    initialNumToRender: 15
+  });
+}
+const styles = StyleSheet.create({
+  listContent: {
+    flexGrow: 1,
+    paddingVertical: 4
+  },
+  emptyContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 60,
+    paddingHorizontal: 20
+  },
+  emptyText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: buoyColors.text,
+    marginBottom: 8
+  },
+  emptySubtext: {
+    fontSize: 13,
+    color: buoyColors.textMuted,
+    textAlign: "center"
+  }
+});

package/lib/module/history/components/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+/**
+ * Universal History DevTools Components
+ */
+
+export { HistoryEntryRow } from "./HistoryEntryRow.js";
+export { HistoryList, StandaloneHistoryList } from "./HistoryList.js";

package/lib/module/history/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+/**
+ * Universal History DevTools
+ *
+ * A unified devtools experience for Redux, Zustand, MMKV, React Query, and more.
+ */
+
+// Types (IconComponent is already exported from ui)
+
+// Provider & Hooks
+export { HistoryProvider, useHistoryContext, useHistoryAdapters, useHistoryAdapter, useAllHistoryEntries, useHistoryEntryCounts } from "./HistoryProvider.js";
+
+// Components
+export { HistoryEntryRow, HistoryList, StandaloneHistoryList } from "./components/index.js";

package/lib/module/history/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

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

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-01-03T18:51:49.025Z
+ * Generated at: 2026-01-12T04:02:16.222Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *