@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EventPickerModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _macOSDesignSystemColors = require("../../gameUI/constants/macOSDesignSystemColors.js");
+var _lucideIcons = require("../../../icons/lucide-icons.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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.
+ */
+
+/**
+ * EventPickerModal displays a modal for selecting events
+ * with color-coded styling based on position (left/right).
+ */
+const EventPickerModal = exports.EventPickerModal = /*#__PURE__*/(0, _react.memo)(function EventPickerModal({
+  isOpen,
+  onClose,
+  title,
+  position,
+  items,
+  onSelect
+}) {
+  if (!isOpen) return null;
+  const isLeft = position === "left";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.overlay,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: styles.backdrop,
+      activeOpacity: 1,
+      onPress: onClose
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.card, isLeft ? styles.cardLeft : styles.cardRight],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.header,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.title, isLeft ? styles.titleLeft : styles.titleRight],
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: onClose,
+          style: styles.closeBtn,
+          accessibilityLabel: "Close event picker",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.X, {
+            size: 16,
+            color: _macOSDesignSystemColors.macOSColors.text.secondary
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.divider
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: styles.scroll,
+        contentContainerStyle: styles.list,
+        showsVerticalScrollIndicator: true,
+        nestedScrollEnabled: true,
+        children: items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.itemIndex,
+            children: item.label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.itemTime,
+            children: item.timestamp
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.itemRelative,
+            children: ["(", item.relativeTime, ")"]
+          }), item.badge, item.diffPreview]
+        }, item.index))
+      })]
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    zIndex: 20,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  backdrop: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.65)"
+  },
+  card: {
+    width: "86%",
+    maxHeight: 320,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.background.card,
+    borderRadius: 16,
+    borderWidth: 2,
+    padding: 16,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 40,
+    elevation: 15
+  },
+  cardLeft: {
+    borderColor: _macOSDesignSystemColors.macOSColors.semantic.debug,
+    shadowColor: _macOSDesignSystemColors.macOSColors.semantic.debug
+  },
+  cardRight: {
+    borderColor: _macOSDesignSystemColors.macOSColors.semantic.success,
+    shadowColor: _macOSDesignSystemColors.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: _macOSDesignSystemColors.macOSColors.semantic.debug
+  },
+  titleRight: {
+    color: _macOSDesignSystemColors.macOSColors.semantic.success
+  },
+  closeBtn: {
+    padding: 6,
+    borderRadius: 6,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: _macOSDesignSystemColors.macOSColors.border.default
+  },
+  divider: {
+    height: 1,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.background.input,
+    marginVertical: 8
+  },
+  scroll: {
+    maxHeight: 260
+  },
+  list: {
+    gap: 4
+  },
+  item: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 10,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.background.base,
+    borderWidth: 1,
+    borderColor: _macOSDesignSystemColors.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: _macOSDesignSystemColors.macOSColors.semantic.debug + "1A",
+    borderColor: _macOSDesignSystemColors.macOSColors.semantic.debug,
+    shadowColor: _macOSDesignSystemColors.macOSColors.semantic.debug
+  },
+  itemSelectedRight: {
+    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.successBackground + "30",
+    borderColor: _macOSDesignSystemColors.macOSColors.semantic.success,
+    shadowColor: _macOSDesignSystemColors.macOSColors.semantic.success
+  },
+  itemDisabled: {
+    opacity: 0.4
+  },
+  itemIndex: {
+    fontSize: 10,
+    color: _macOSDesignSystemColors.macOSColors.text.secondary,
+    fontFamily: "monospace",
+    width: 40
+  },
+  itemTime: {
+    fontSize: 11,
+    color: _macOSDesignSystemColors.macOSColors.text.primary,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  itemRelative: {
+    fontSize: 10,
+    color: _macOSDesignSystemColors.macOSColors.text.secondary,
+    fontFamily: "monospace"
+  }
+});

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

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewToggleCards = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _macOSDesignSystemColors = require("../../gameUI/constants/macOSDesignSystemColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ViewToggleCards
+ *
+ * Two side-by-side cards for switching between current and diff views.
+ * This is a dumb component - all state is controlled externally.
+ */
+
+/**
+ * ViewToggleCards displays two cards for switching between
+ * "current" view and "diff" view modes.
+ */
+const ViewToggleCards = exports.ViewToggleCards = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: [styles.card, isCurrentActive && styles.cardActive],
+      onPress: () => onViewChange("current"),
+      activeOpacity: 0.8,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.cardContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CurrentIcon, {
+          size: 16,
+          color: isCurrentActive ? _macOSDesignSystemColors.macOSColors.semantic.info : _macOSDesignSystemColors.macOSColors.text.secondary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.cardLabel, isCurrentActive && styles.cardLabelActive],
+          children: currentLabel
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.cardDescription, isCurrentActive && styles.cardDescriptionActive],
+        children: currentDescription
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: [styles.card, isDiffActive && styles.cardActive, diffDisabled && styles.cardDisabled],
+      onPress: () => !diffDisabled && onViewChange("diff"),
+      activeOpacity: diffDisabled ? 1 : 0.8,
+      disabled: diffDisabled,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.cardContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DiffIcon, {
+          size: 16,
+          color: isDiffActive ? _macOSDesignSystemColors.macOSColors.semantic.success : diffDisabled ? _macOSDesignSystemColors.macOSColors.text.muted : _macOSDesignSystemColors.macOSColors.text.secondary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.cardLabel, isDiffActive && styles.cardLabelActive, diffDisabled && styles.cardLabelDisabled],
+          children: diffLabel
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.cardDescription, isDiffActive && styles.cardDescriptionActive, diffDisabled && styles.cardDescriptionDisabled],
+        children: diffDescription
+      })]
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: 12,
+    padding: 14,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.background.base
+  },
+  card: {
+    flex: 1,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.background.card,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: _macOSDesignSystemColors.macOSColors.border.default,
+    padding: 14,
+    gap: 8
+  },
+  cardActive: {
+    borderWidth: 1.5,
+    borderColor: _macOSDesignSystemColors.macOSColors.semantic.info,
+    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.infoBackground + "30",
+    shadowColor: _macOSDesignSystemColors.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: _macOSDesignSystemColors.macOSColors.text.secondary,
+    textTransform: "uppercase"
+  },
+  cardLabelActive: {
+    color: _macOSDesignSystemColors.macOSColors.text.primary
+  },
+  cardLabelDisabled: {
+    color: _macOSDesignSystemColors.macOSColors.text.muted
+  },
+  cardDescription: {
+    fontSize: 11,
+    color: _macOSDesignSystemColors.macOSColors.text.muted,
+    lineHeight: 16
+  },
+  cardDescriptionActive: {
+    color: _macOSDesignSystemColors.macOSColors.text.primary
+  },
+  cardDescriptionDisabled: {
+    color: _macOSDesignSystemColors.macOSColors.text.muted
+  }
+});

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CompareBar", {
+  enumerable: true,
+  get: function () {
+    return _CompareBar.CompareBar;
+  }
+});
+Object.defineProperty(exports, "DiffModeTabs", {
+  enumerable: true,
+  get: function () {
+    return _DiffModeTabs.DiffModeTabs;
+  }
+});
+Object.defineProperty(exports, "EventHistoryViewer", {
+  enumerable: true,
+  get: function () {
+    return _EventHistoryViewer.EventHistoryViewer;
+  }
+});
+Object.defineProperty(exports, "EventPickerModal", {
+  enumerable: true,
+  get: function () {
+    return _EventPickerModal.EventPickerModal;
+  }
+});
+Object.defineProperty(exports, "ViewToggleCards", {
+  enumerable: true,
+  get: function () {
+    return _ViewToggleCards.ViewToggleCards;
+  }
+});
+var _EventHistoryViewer = require("./EventHistoryViewer.js");
+var _ViewToggleCards = require("./ViewToggleCards.js");
+var _DiffModeTabs = require("./DiffModeTabs.js");
+var _CompareBar = require("./CompareBar.js");
+var _EventPickerModal = require("./EventPickerModal.js");

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,247 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EventListItem = EventListItem;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../gameUI/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const EventListItemContext = /*#__PURE__*/(0, _react.createContext)({});
+function EventListItem({
+  children,
+  style,
+  ...props
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    style: [styles.container, style],
+    activeOpacity: 0.7,
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(EventListItemContext.Provider, {
+      value: {},
+      children: children
+    })
+  });
+}
+EventListItem.Status = function Status({
+  status,
+  size = "small"
+}) {
+  const colors = {
+    success: _index.gameUIColors.success,
+    error: _index.gameUIColors.error,
+    warning: _index.gameUIColors.warning,
+    pending: _index.gameUIColors.warning,
+    info: _index.gameUIColors.primary
+  };
+  const sizes = {
+    small: 8,
+    medium: 10,
+    large: 12
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.statusContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.main, style],
+    children: children
+  });
+};
+EventListItem.Title = function Title({
+  children,
+  numberOfLines = 1,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.title, style],
+    numberOfLines: numberOfLines,
+    children: children
+  });
+};
+EventListItem.Description = function Description({
+  children,
+  numberOfLines = 2,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.description, style],
+    numberOfLines: numberOfLines,
+    children: children
+  });
+};
+EventListItem.Metadata = function Metadata({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.size, style],
+    children: formatBytes(bytes)
+  });
+};
+EventListItem.Badge = function Badge({
+  children,
+  color,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.badge, color ? {
+      backgroundColor: color
+    } : {}, style],
+    children: typeof children === "string" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.badgeText,
+      children: children
+    }) : children
+  });
+};
+EventListItem.Header = function Header({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.header, style],
+    children: children
+  });
+};
+EventListItem.Footer = function Footer({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.footer, style],
+    children: children
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    backgroundColor: _index.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: _index.gameUIColors.text,
+    marginBottom: 2
+  },
+  description: {
+    fontSize: 12,
+    color: _index.gameUIColors.secondary,
+    lineHeight: 16
+  },
+  metadata: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  timestamp: {
+    fontSize: 11,
+    color: _index.gameUIColors.tertiary
+  },
+  size: {
+    fontSize: 11,
+    color: _index.gameUIColors.tertiary
+  },
+  badge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: _index.gameUIColors.primary + "20"
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _index.gameUIColors.primary,
+    textTransform: "uppercase"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8
+  },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 8
+  }
+});