@buoy-gg/shared-ui 1.7.2

package/lib/module/ui/components/EmptyState.js

@@ -0,0 +1,129 @@
+"use strict";
+
+import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Reusable empty state component for consistent empty/no-data displays
+ */
+export function EmptyState({
+  title,
+  description,
+  icon: Icon,
+  iconSize = 48,
+  iconColor = "#4B5563",
+  action,
+  variant = "default",
+  style
+}) {
+  const containerStyle = [styles.container, variant === "card" && styles.cardVariant, variant === "minimal" && styles.minimalVariant, style];
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyle,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [Icon && /*#__PURE__*/_jsx(View, {
+        style: styles.iconContainer,
+        children: /*#__PURE__*/_jsx(Icon, {
+          size: iconSize,
+          color: iconColor
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        children: title
+      }), description && /*#__PURE__*/_jsx(Text, {
+        style: styles.description,
+        children: description
+      }), action && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.actionButton,
+        onPress: action.onPress,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.actionButtonText,
+          children: action.label
+        })
+      })]
+    })
+  });
+}
+
+/**
+ * Pre-configured empty state for no data scenarios
+ */
+export function NoDataEmptyState() {
+  return /*#__PURE__*/_jsx(EmptyState, {
+    title: "No data found",
+    description: "Data will appear here when available"
+  });
+}
+
+/**
+ * Pre-configured empty state for filtered results
+ */
+export function NoResultsEmptyState() {
+  return /*#__PURE__*/_jsx(EmptyState, {
+    title: "No matching results",
+    description: "Try adjusting your filters to see more results"
+  });
+}
+
+/**
+ * Pre-configured empty state for search results
+ */
+export function NoSearchResultsEmptyState({
+  searchTerm
+}) {
+  return /*#__PURE__*/_jsx(EmptyState, {
+    title: "No search results",
+    description: searchTerm ? `No results found for "${searchTerm}"` : "Try a different search term"
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32
+  },
+  content: {
+    alignItems: "center",
+    maxWidth: 300
+  },
+  cardVariant: {
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    padding: 32,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)"
+  },
+  minimalVariant: {
+    padding: 16
+  },
+  iconContainer: {
+    marginBottom: 16
+  },
+  title: {
+    color: "#6B7280",
+    fontSize: 16,
+    fontWeight: "500",
+    textAlign: "center",
+    marginBottom: 8
+  },
+  description: {
+    color: "#4B5563",
+    fontSize: 14,
+    textAlign: "center",
+    lineHeight: 20
+  },
+  actionButton: {
+    marginTop: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: "rgba(59, 130, 246, 0.1)",
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: "rgba(59, 130, 246, 0.2)"
+  },
+  actionButtonText: {
+    color: "#3B82F6",
+    fontSize: 14,
+    fontWeight: "500"
+  }
+});

package/lib/module/ui/components/ErrorBoundary.js

@@ -0,0 +1,107 @@
+"use strict";
+
+import { Component } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { AlertTriangle, RefreshCw } from "../../icons/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("RnBetterDevToolsBubble Error:", error, errorInfo);
+  }
+  handleRetry = () => {
+    this.setState({
+      hasError: false,
+      error: undefined
+    });
+  };
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.errorContainer,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.errorContent,
+          children: [/*#__PURE__*/_jsx(AlertTriangle, {
+            color: "#EF4444",
+            size: 20
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.errorTitle,
+            children: "Dev Tools Error"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.errorMessage,
+            children: this.state.error?.message || "Something went wrong"
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            "sentry-label": "ignore devtools error boundary retry",
+            style: styles.retryButton,
+            onPress: this.handleRetry,
+            children: [/*#__PURE__*/_jsx(RefreshCw, {
+              color: "#60A5FA",
+              size: 16
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.retryText,
+              children: "Retry"
+            })]
+          })]
+        })
+      });
+    }
+    return this.props.children;
+  }
+}
+const styles = StyleSheet.create({
+  errorContainer: {
+    backgroundColor: "#171717",
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: "#EF4444",
+    padding: 12,
+    minWidth: 200,
+    maxWidth: 300
+  },
+  errorContent: {
+    alignItems: "center",
+    gap: 8
+  },
+  errorTitle: {
+    color: "#EF4444",
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  errorMessage: {
+    color: "#9CA3AF",
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 16
+  },
+  retryButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    backgroundColor: "rgba(96, 165, 250, 0.1)",
+    borderWidth: 1,
+    borderColor: "#60A5FA",
+    borderRadius: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    marginTop: 4
+  },
+  retryText: {
+    color: "#60A5FA",
+    fontSize: 12,
+    fontWeight: "500"
+  }
+});

package/lib/module/ui/components/EventHistoryViewer/CompareBar.js

@@ -0,0 +1,205 @@
+"use strict";
+
+/**
+ * CompareBar
+ *
+ * Displays PREV/CUR comparison metadata for diff view.
+ * Shows event labels, timestamps, badges, and optional navigation controls.
+ * This is a dumb component - all state is controlled externally.
+ */
+
+import React, { memo } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
+import { ChevronLeft, ChevronRight } from "../../../icons/lucide-icons.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CompareBar displays a side-by-side comparison of two events
+ * with optional navigation controls for any-to-any compare mode.
+ */
+export const CompareBar = /*#__PURE__*/memo(function CompareBar({
+  leftEvent,
+  rightEvent,
+  showNavigation = false,
+  onLeftPrevious,
+  onLeftNext,
+  onRightPrevious,
+  onRightNext,
+  canLeftPrevious = false,
+  canLeftNext = false,
+  canRightPrevious = false,
+  canRightNext = false,
+  onLeftPress,
+  onRightPress
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.side,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.labelRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, styles.labelPrev],
+          children: "PREV"
+        }), leftEvent.badge]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.controls,
+        children: [showNavigation && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onLeftPrevious,
+          disabled: !canLeftPrevious,
+          style: [styles.navBtn, !canLeftPrevious && styles.navBtnDisabled],
+          children: /*#__PURE__*/_jsx(ChevronLeft, {
+            size: 14,
+            color: canLeftPrevious ? macOSColors.text.secondary : macOSColors.text.muted
+          })
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.meta,
+          onPress: onLeftPress,
+          disabled: !onLeftPress,
+          activeOpacity: onLeftPress ? 0.8 : 1,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.index,
+            children: leftEvent.label
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.time,
+            children: leftEvent.timestamp
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.relative,
+            children: ["(", leftEvent.relativeTime, ")"]
+          })]
+        }), showNavigation && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onLeftNext,
+          disabled: !canLeftNext,
+          style: [styles.navBtn, !canLeftNext && styles.navBtnDisabled],
+          children: /*#__PURE__*/_jsx(ChevronRight, {
+            size: 14,
+            color: canLeftNext ? macOSColors.text.secondary : macOSColors.text.muted
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.divider
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.side,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.labelRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, styles.labelCur],
+          children: "CUR"
+        }), rightEvent.badge]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.controls,
+        children: [showNavigation && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onRightPrevious,
+          disabled: !canRightPrevious,
+          style: [styles.navBtn, !canRightPrevious && styles.navBtnDisabled],
+          children: /*#__PURE__*/_jsx(ChevronLeft, {
+            size: 14,
+            color: canRightPrevious ? macOSColors.text.secondary : macOSColors.text.muted
+          })
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.meta,
+          onPress: onRightPress,
+          disabled: !onRightPress,
+          activeOpacity: onRightPress ? 0.8 : 1,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.index,
+            children: rightEvent.label
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.time,
+            children: rightEvent.timestamp
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.relative,
+            children: ["(", rightEvent.relativeTime, ")"]
+          })]
+        }), showNavigation && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onRightNext,
+          disabled: !canRightNext,
+          style: [styles.navBtn, !canRightNext && styles.navBtnDisabled],
+          children: /*#__PURE__*/_jsx(ChevronRight, {
+            size: 14,
+            color: canRightNext ? macOSColors.text.secondary : macOSColors.text.muted
+          })
+        })]
+      })]
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    marginBottom: 8,
+    gap: 8
+  },
+  side: {
+    flex: 1
+  },
+  labelRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginBottom: 2
+  },
+  label: {
+    fontSize: 10,
+    fontFamily: "monospace",
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  },
+  labelPrev: {
+    color: macOSColors.semantic.debug
+  },
+  labelCur: {
+    color: macOSColors.semantic.success
+  },
+  controls: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  navBtn: {
+    width: 26,
+    height: 26,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  navBtnDisabled: {
+    opacity: 0.4
+  },
+  meta: {
+    flex: 1
+  },
+  index: {
+    fontSize: 10,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace"
+  },
+  time: {
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    fontFamily: "monospace"
+  },
+  relative: {
+    fontSize: 10,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace"
+  },
+  divider: {
+    width: 1,
+    height: 34,
+    backgroundColor: macOSColors.background.input
+  }
+});

package/lib/module/ui/components/EventHistoryViewer/DiffModeTabs.js

@@ -0,0 +1,85 @@
+"use strict";
+
+/**
+ * DiffModeTabs
+ *
+ * Tab bar for switching between diff visualization modes.
+ * Examples: "SPLIT VIEW" / "TREE VIEW" or "CAUSE" / "PROPS" / "STATE"
+ * This is a dumb component - all state is controlled externally.
+ */
+
+import React, { memo } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DiffModeTabs displays a horizontal tab bar for switching
+ * between different diff visualization modes.
+ */
+export const DiffModeTabs = /*#__PURE__*/memo(function DiffModeTabs({
+  tabs,
+  activeTab,
+  onTabChange
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: tabs.map(tab => {
+      const isActive = activeTab === tab.key;
+      const isDisabled = tab.disabled === true;
+      return /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.tab, isActive && styles.tabActive, isDisabled && styles.tabDisabled],
+        onPress: () => !isDisabled && onTabChange(tab.key),
+        activeOpacity: isDisabled ? 1 : 0.7,
+        disabled: isDisabled,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.tabText, isActive && styles.tabTextActive, isDisabled && styles.tabTextDisabled],
+          children: tab.label
+        })
+      }, tab.key);
+    })
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-around",
+    backgroundColor: macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    borderRadius: 6,
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+    marginBottom: 8,
+    gap: 4
+  },
+  tab: {
+    flex: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 4,
+    alignItems: "center",
+    backgroundColor: "transparent"
+  },
+  tabActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderWidth: 1,
+    borderColor: macOSColors.semantic.info + "40"
+  },
+  tabDisabled: {
+    opacity: 0.4
+  },
+  tabText: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    fontWeight: "600",
+    color: macOSColors.text.secondary,
+    letterSpacing: 0.5
+  },
+  tabTextActive: {
+    color: macOSColors.text.primary
+  },
+  tabTextDisabled: {
+    color: macOSColors.text.muted
+  }
+});

package/lib/module/ui/components/EventHistoryViewer/EventHistoryViewer.js

@@ -0,0 +1,125 @@
+"use strict";
+
+/**
+ * EventHistoryViewer
+ *
+ * Main container component for viewing event history with current/diff views.
+ * Composes ViewToggleCards, DiffModeTabs, CompareBar, and EventStepperFooter.
+ * This is a dumb component - all state is controlled externally.
+ */
+
+import React, { memo } from "react";
+import { View, StyleSheet } from "react-native";
+import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
+import { EventStepperFooter } from "../EventStepperFooter.js";
+import { ViewToggleCards } from "./ViewToggleCards.js";
+import { DiffModeTabs } from "./DiffModeTabs.js";
+import { CompareBar } from "./CompareBar.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * EventHistoryViewer is the main container for viewing event history.
+ * It composes sub-components to display current value or diff views.
+ */
+export const EventHistoryViewer = /*#__PURE__*/memo(function EventHistoryViewer({
+  // View Toggle
+  activeView,
+  onViewChange,
+  currentViewLabel,
+  currentViewDescription,
+  currentViewIcon,
+  diffViewLabel,
+  diffViewDescription,
+  diffViewIcon,
+  // Current View Content
+  renderCurrentView,
+  // Diff View
+  diffModeTabs,
+  activeDiffMode,
+  onDiffModeChange,
+  renderDiffContent,
+  // Compare Bar
+  leftEvent,
+  rightEvent,
+  showCompareNavigation,
+  onLeftPrevious,
+  onLeftNext,
+  onRightPrevious,
+  onRightNext,
+  canLeftPrevious,
+  canLeftNext,
+  canRightPrevious,
+  canRightNext,
+  onLeftPickerOpen,
+  onRightPickerOpen,
+  // Footer
+  disableInternalFooter,
+  footerCurrentIndex,
+  footerTotalItems,
+  footerItemLabel,
+  footerSubtitle,
+  onFooterPrevious,
+  onFooterNext
+}) {
+  const diffDisabled = footerTotalItems <= 1;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.container, {
+        paddingBottom: !disableInternalFooter && footerTotalItems > 1 ? 80 : 0
+      }],
+      children: [/*#__PURE__*/_jsx(ViewToggleCards, {
+        activeView: activeView,
+        onViewChange: onViewChange,
+        currentLabel: currentViewLabel,
+        currentDescription: currentViewDescription,
+        currentIcon: currentViewIcon,
+        diffLabel: diffViewLabel,
+        diffDescription: diffViewDescription,
+        diffIcon: diffViewIcon,
+        diffDisabled: diffDisabled
+      }), activeView === "current" && /*#__PURE__*/_jsx(View, {
+        style: styles.contentSection,
+        children: renderCurrentView()
+      }), activeView === "diff" && /*#__PURE__*/_jsxs(View, {
+        style: styles.contentSection,
+        children: [diffModeTabs && diffModeTabs.length > 0 && onDiffModeChange && /*#__PURE__*/_jsx(DiffModeTabs, {
+          tabs: diffModeTabs,
+          activeTab: activeDiffMode ?? diffModeTabs[0]?.key ?? "",
+          onTabChange: onDiffModeChange
+        }), /*#__PURE__*/_jsx(CompareBar, {
+          leftEvent: leftEvent,
+          rightEvent: rightEvent,
+          showNavigation: showCompareNavigation,
+          onLeftPrevious: onLeftPrevious,
+          onLeftNext: onLeftNext,
+          onRightPrevious: onRightPrevious,
+          onRightNext: onRightNext,
+          canLeftPrevious: canLeftPrevious,
+          canLeftNext: canLeftNext,
+          canRightPrevious: canRightPrevious,
+          canRightNext: canRightNext,
+          onLeftPress: onLeftPickerOpen,
+          onRightPress: onRightPickerOpen
+        }), renderDiffContent()]
+      })]
+    }), !disableInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
+      currentIndex: footerCurrentIndex,
+      totalItems: footerTotalItems,
+      onPrevious: onFooterPrevious,
+      onNext: onFooterNext,
+      itemLabel: footerItemLabel,
+      subtitle: footerSubtitle,
+      absolute: true
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: macOSColors.background.base
+  },
+  contentSection: {
+    flex: 1,
+    paddingHorizontal: 14,
+    paddingVertical: 10
+  }
+});