@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,201 @@
+"use strict";
+
+/**
+ * EventPickerModal
+ *
+ * Modal for selecting events in any-to-any compare mode.
+ * Displays a scrollable list of events with timestamps, badges, and diff previews.
+ * This is a dumb component - all state is controlled externally.
+ */
+
+import React, { memo } from "react";
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
+import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
+import { X } from "../../../icons/lucide-icons.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * EventPickerModal displays a modal for selecting events
+ * with color-coded styling based on position (left/right).
+ */
+export const EventPickerModal = /*#__PURE__*/memo(function EventPickerModal({
+  isOpen,
+  onClose,
+  title,
+  position,
+  items,
+  onSelect
+}) {
+  if (!isOpen) return null;
+  const isLeft = position === "left";
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.overlay,
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      style: styles.backdrop,
+      activeOpacity: 1,
+      onPress: onClose
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.card, isLeft ? styles.cardLeft : styles.cardRight],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.header,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.title, isLeft ? styles.titleLeft : styles.titleRight],
+          children: title
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onClose,
+          style: styles.closeBtn,
+          accessibilityLabel: "Close event picker",
+          children: /*#__PURE__*/_jsx(X, {
+            size: 16,
+            color: macOSColors.text.secondary
+          })
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.divider
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.scroll,
+        contentContainerStyle: styles.list,
+        showsVerticalScrollIndicator: true,
+        nestedScrollEnabled: true,
+        children: items.map(item => /*#__PURE__*/_jsxs(TouchableOpacity, {
+          disabled: item.disabled,
+          onPress: () => onSelect(item.index),
+          style: [styles.item, item.selected && styles.itemSelected, item.selected && isLeft && styles.itemSelectedLeft, item.selected && !isLeft && styles.itemSelectedRight, item.disabled && styles.itemDisabled],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.itemIndex,
+            children: item.label
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.itemTime,
+            children: item.timestamp
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.itemRelative,
+            children: ["(", item.relativeTime, ")"]
+          }), item.badge, item.diffPreview]
+        }, item.index))
+      })]
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 20,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.65)"
+  },
+  card: {
+    width: "86%",
+    maxHeight: 320,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 16,
+    borderWidth: 2,
+    padding: 16,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 40,
+    elevation: 15
+  },
+  cardLeft: {
+    borderColor: macOSColors.semantic.debug,
+    shadowColor: macOSColors.semantic.debug
+  },
+  cardRight: {
+    borderColor: macOSColors.semantic.success,
+    shadowColor: macOSColors.semantic.success
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+    marginBottom: 8,
+    letterSpacing: 0.6
+  },
+  titleLeft: {
+    color: macOSColors.semantic.debug
+  },
+  titleRight: {
+    color: macOSColors.semantic.success
+  },
+  closeBtn: {
+    padding: 6,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  divider: {
+    height: 1,
+    backgroundColor: macOSColors.background.input,
+    marginVertical: 8
+  },
+  scroll: {
+    maxHeight: 260
+  },
+  list: {
+    gap: 4
+  },
+  item: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 10,
+    backgroundColor: macOSColors.background.base,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 6
+  },
+  itemSelected: {
+    borderWidth: 1.5,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 4
+  },
+  itemSelectedLeft: {
+    backgroundColor: macOSColors.semantic.debug + "1A",
+    borderColor: macOSColors.semantic.debug,
+    shadowColor: macOSColors.semantic.debug
+  },
+  itemSelectedRight: {
+    backgroundColor: macOSColors.semantic.successBackground + "30",
+    borderColor: macOSColors.semantic.success,
+    shadowColor: macOSColors.semantic.success
+  },
+  itemDisabled: {
+    opacity: 0.4
+  },
+  itemIndex: {
+    fontSize: 10,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace",
+    width: 40
+  },
+  itemTime: {
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  itemRelative: {
+    fontSize: 10,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace"
+  }
+});

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

@@ -0,0 +1,132 @@
+"use strict";
+
+/**
+ * ViewToggleCards
+ *
+ * Two side-by-side cards for switching between current and diff views.
+ * 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, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ViewToggleCards displays two cards for switching between
+ * "current" view and "diff" view modes.
+ */
+export const ViewToggleCards = /*#__PURE__*/memo(function ViewToggleCards({
+  activeView,
+  onViewChange,
+  currentLabel,
+  currentDescription,
+  currentIcon: CurrentIcon,
+  diffLabel,
+  diffDescription,
+  diffIcon: DiffIcon,
+  diffDisabled = false
+}) {
+  const isCurrentActive = activeView === "current";
+  const isDiffActive = activeView === "diff";
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [styles.card, isCurrentActive && styles.cardActive],
+      onPress: () => onViewChange("current"),
+      activeOpacity: 0.8,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.cardContent,
+        children: [/*#__PURE__*/_jsx(CurrentIcon, {
+          size: 16,
+          color: isCurrentActive ? macOSColors.semantic.info : macOSColors.text.secondary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.cardLabel, isCurrentActive && styles.cardLabelActive],
+          children: currentLabel
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.cardDescription, isCurrentActive && styles.cardDescriptionActive],
+        children: currentDescription
+      })]
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [styles.card, isDiffActive && styles.cardActive, diffDisabled && styles.cardDisabled],
+      onPress: () => !diffDisabled && onViewChange("diff"),
+      activeOpacity: diffDisabled ? 1 : 0.8,
+      disabled: diffDisabled,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.cardContent,
+        children: [/*#__PURE__*/_jsx(DiffIcon, {
+          size: 16,
+          color: isDiffActive ? macOSColors.semantic.success : diffDisabled ? macOSColors.text.muted : macOSColors.text.secondary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.cardLabel, isDiffActive && styles.cardLabelActive, diffDisabled && styles.cardLabelDisabled],
+          children: diffLabel
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.cardDescription, isDiffActive && styles.cardDescriptionActive, diffDisabled && styles.cardDescriptionDisabled],
+        children: diffDescription
+      })]
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: 12,
+    padding: 14,
+    backgroundColor: macOSColors.background.base
+  },
+  card: {
+    flex: 1,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 14,
+    gap: 8
+  },
+  cardActive: {
+    borderWidth: 1.5,
+    borderColor: macOSColors.semantic.info,
+    backgroundColor: macOSColors.semantic.infoBackground + "30",
+    shadowColor: macOSColors.semantic.info,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3
+  },
+  cardDisabled: {
+    opacity: 0.5
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  cardLabel: {
+    fontSize: 12,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    color: macOSColors.text.secondary,
+    textTransform: "uppercase"
+  },
+  cardLabelActive: {
+    color: macOSColors.text.primary
+  },
+  cardLabelDisabled: {
+    color: macOSColors.text.muted
+  },
+  cardDescription: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    lineHeight: 16
+  },
+  cardDescriptionActive: {
+    color: macOSColors.text.primary
+  },
+  cardDescriptionDisabled: {
+    color: macOSColors.text.muted
+  }
+});

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

@@ -0,0 +1,19 @@
+"use strict";
+
+/**
+ * EventHistoryViewer
+ *
+ * A reusable component for viewing event history with current/diff views.
+ * Used by Storage events, Render events, and other event-based dev tools.
+ */
+
+// Main component
+export { EventHistoryViewer } from "./EventHistoryViewer.js";
+
+// Sub-components (can be used independently)
+export { ViewToggleCards } from "./ViewToggleCards.js";
+export { DiffModeTabs } from "./DiffModeTabs.js";
+export { CompareBar } from "./CompareBar.js";
+export { EventPickerModal } from "./EventPickerModal.js";
+
+// Types

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

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

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

@@ -0,0 +1,243 @@
+"use strict";
+
+import { createContext } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { gameUIColors } from "../gameUI/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const EventListItemContext = /*#__PURE__*/createContext({});
+export function EventListItem({
+  children,
+  style,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: [styles.container, style],
+    activeOpacity: 0.7,
+    ...props,
+    children: /*#__PURE__*/_jsx(EventListItemContext.Provider, {
+      value: {},
+      children: children
+    })
+  });
+}
+EventListItem.Status = function Status({
+  status,
+  size = "small"
+}) {
+  const colors = {
+    success: gameUIColors.success,
+    error: gameUIColors.error,
+    warning: gameUIColors.warning,
+    pending: gameUIColors.warning,
+    info: gameUIColors.primary
+  };
+  const sizes = {
+    small: 8,
+    medium: 10,
+    large: 12
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.statusContainer,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.statusDot, {
+        backgroundColor: colors[status],
+        width: sizes[size],
+        height: sizes[size],
+        borderRadius: sizes[size] / 2
+      }]
+    })
+  });
+};
+EventListItem.Main = function Main({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.main, style],
+    children: children
+  });
+};
+EventListItem.Title = function Title({
+  children,
+  numberOfLines = 1,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.title, style],
+    numberOfLines: numberOfLines,
+    children: children
+  });
+};
+EventListItem.Description = function Description({
+  children,
+  numberOfLines = 2,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.description, style],
+    numberOfLines: numberOfLines,
+    children: children
+  });
+};
+EventListItem.Metadata = function Metadata({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.metadata, style],
+    children: children
+  });
+};
+EventListItem.Timestamp = function Timestamp({
+  time,
+  format = "relative",
+  style
+}) {
+  const formatTime = () => {
+    if (format === "duration" && typeof time === "number") {
+      return `${time}ms`;
+    }
+    const date = new Date(time);
+    if (format === "absolute") {
+      return date.toLocaleTimeString();
+    }
+
+    // Relative time
+    const now = Date.now();
+    const diff = now - date.getTime();
+    const seconds = Math.floor(diff / 1000);
+    if (seconds < 60) return "just now";
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    return `${days}d ago`;
+  };
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.timestamp, style],
+    children: formatTime()
+  });
+};
+EventListItem.Size = function Size({
+  bytes,
+  style
+}) {
+  if (!bytes) return null;
+  const formatBytes = bytes => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+  };
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.size, style],
+    children: formatBytes(bytes)
+  });
+};
+EventListItem.Badge = function Badge({
+  children,
+  color,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.badge, color ? {
+      backgroundColor: color
+    } : {}, style],
+    children: typeof children === "string" ? /*#__PURE__*/_jsx(Text, {
+      style: styles.badgeText,
+      children: children
+    }) : children
+  });
+};
+EventListItem.Header = function Header({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.header, style],
+    children: children
+  });
+};
+EventListItem.Footer = function Footer({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.footer, style],
+    children: children
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 8,
+    marginHorizontal: 16
+  },
+  statusContainer: {
+    marginRight: 8,
+    justifyContent: "center"
+  },
+  statusDot: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2
+  },
+  main: {
+    flex: 1,
+    marginHorizontal: 8
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: gameUIColors.text,
+    marginBottom: 2
+  },
+  description: {
+    fontSize: 12,
+    color: gameUIColors.secondary,
+    lineHeight: 16
+  },
+  metadata: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  timestamp: {
+    fontSize: 11,
+    color: gameUIColors.tertiary
+  },
+  size: {
+    fontSize: 11,
+    color: gameUIColors.tertiary
+  },
+  badge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: gameUIColors.primary + "20"
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: gameUIColors.primary,
+    textTransform: "uppercase"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8
+  },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 8
+  }
+});