@buoy-gg/shared-ui 7.0.33 → 7.0.35

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

@@ -0,0 +1,125 @@
+"use strict";
+
+/**
+ * DetailViewToggle — the row of view cards at the top of a detail screen
+ * (ACTION · STATE · DIFF, CHANGE · STATE · DIFF, …).
+ *
+ * redux, zustand and jotai each shipped their own copy, differing only in
+ * the view keys, labels and testID prefix. The cards, the accent chrome,
+ * the disabled state (diff with nothing to compare) and the a11y contract
+ * are all one component now; tools pass their `views`.
+ */
+
+import React, { memo } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { night } from "../night/nightTheme.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function DetailViewToggleImpl({
+  views,
+  activeView,
+  onViewChange,
+  disabledKeys,
+  testIDPrefix
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: views.map(view => {
+      const isActive = activeView === view.key;
+      const isDisabled = disabledKeys?.includes(view.key) ?? false;
+      const activeColor = view.activeColor ?? night.color.accent;
+      const IconComponent = view.icon;
+      return /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.card, isActive && [styles.cardActive, {
+          borderColor: activeColor
+        }], isDisabled && styles.cardDisabled],
+        onPress: () => !isDisabled && onViewChange(view.key),
+        activeOpacity: isDisabled ? 1 : 0.8,
+        disabled: isDisabled,
+        testID: testIDPrefix ? `${testIDPrefix}-view-${view.key}` : undefined,
+        accessibilityRole: "button",
+        accessibilityLabel: view.label,
+        accessibilityState: {
+          selected: isActive,
+          disabled: isDisabled
+        },
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.cardContent,
+          children: [/*#__PURE__*/_jsx(IconComponent, {
+            size: 14,
+            color: isActive ? activeColor : isDisabled ? night.color.textTertiary : night.color.textSecondary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
+              color: activeColor
+            }], isDisabled && styles.cardLabelDisabled],
+            children: view.label
+          })]
+        }), view.description ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
+          children: view.description
+        }) : null]
+      }, view.key);
+    })
+  });
+}
+export const DetailViewToggle = /*#__PURE__*/memo(DetailViewToggleImpl);
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: 8,
+    padding: 14,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
+  },
+  card: {
+    flex: 1,
+    backgroundColor: night.color.surface,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    padding: 10,
+    gap: 4
+  },
+  cardActive: {
+    borderWidth: 1.5,
+    backgroundColor: night.color.accentSoft,
+    shadowColor: night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3
+  },
+  cardDisabled: {
+    opacity: 0.5
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  cardLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    color: night.color.textSecondary
+  },
+  cardLabelActive: {
+    color: night.color.text
+  },
+  cardLabelDisabled: {
+    color: night.color.textTertiary
+  },
+  cardDescription: {
+    fontSize: 9,
+    color: night.color.textTertiary,
+    lineHeight: 12
+  },
+  cardDescriptionActive: {
+    color: night.color.textSecondary
+  },
+  cardDescriptionDisabled: {
+    color: night.color.textTertiary
+  }
+});

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

@@ -45,7 +45,8 @@ export function DevToolsCard({
   style,
   contentStyle,
   testID,
-  accessibilityLabel
+  accessibilityLabel,
+  accessible
 }) {
   const isInteractive = !!onPress || !!onLongPress;
 
@@ -54,6 +55,7 @@ export function DevToolsCard({
     return /*#__PURE__*/_jsx(View, {
       style: [styles.wrapper, style],
       testID: testID,
+      accessible: accessible,
       accessibilityLabel: accessibilityLabel,
       children: /*#__PURE__*/_jsx(View, {
         style: [styles.card, isSelected && styles.selectedCard, contentStyle],

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

@@ -8,6 +8,7 @@ import { FilterList, AddFilterInput, AddFilterButton } from "./FilterComponents.
 import { useFilterManager } from "../../hooks/useFilterManager.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
 import { night } from "../night/nightTheme.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function DynamicFilterView({
   sections = [],
@@ -489,7 +490,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 3,
     marginBottom: 1,
     textShadowColor: "rgba(0, 0, 0, 0.2)",
@@ -503,7 +504,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "500",
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 3,
     marginBottom: 1
   },
@@ -547,7 +548,7 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: "700",
     letterSpacing: 0.3,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   activeFiltersSection: {
     backgroundColor: night.color.surface,
@@ -686,7 +687,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginRight: 8
   },
   howItWorksSection: {
@@ -705,7 +706,7 @@ const styles = StyleSheet.create({
     marginBottom: 12,
     marginTop: 8,
     paddingHorizontal: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   examplesContainer: {
     paddingTop: 8,
@@ -718,14 +719,14 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 16
   },
   previewSection: {

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

@@ -0,0 +1,351 @@
+"use strict";
+
+/**
+ * EntityFilterView — the "hide these by name" filter screen the state tools
+ * share: a list of registered entities (stores, atoms) you can tap to hide,
+ * the active name patterns with a remove ✕, an add-pattern affordance, and
+ * a how-it-works card.
+ *
+ * zustand and jotai each shipped their own copy (~370 lines apiece). The
+ * tool supplies the entities, the nouns and the testID prefix; the screen
+ * is drawn once.
+ *
+ * testID convention (unchanged from zustand's):
+ *   `${prefix}-filters-scroll`, `${prefix}-filters-${entityKey}-count`,
+ *   `${prefix}-filters-${entityKey}-${slug(name)}`, `${prefix}-filters-count`,
+ *   `${prefix}-filters-add-open`, `${prefix}-filters-add-input`,
+ *   `${prefix}-filters-chip-${slug(pattern)}`.
+ */
+
+import { useState } from "react";
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Filter, X } from "../../icons/index.js";
+import { night } from "../night/nightTheme.js";
+import { SectionHeader } from "./SectionHeader.js";
+import { AddFilterButton, AddFilterInput } from "./FilterComponents.js";
+import { monoFont } from "../fonts.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/** True if any active pattern hides this entity. */
+function isHidden(entity, ignoredPatterns) {
+  return Array.from(ignoredPatterns).some(p => entity.name.toLowerCase().includes(p.toLowerCase()));
+}
+
+/** The entity color for a pattern that exactly names a registered entity. */
+function colorForPattern(pattern, entities) {
+  const match = entities.find(e => e.name.toLowerCase() === pattern.toLowerCase());
+  return match ? match.color : null;
+}
+export function EntityFilterView({
+  entities,
+  ignoredPatterns,
+  onTogglePattern,
+  onAddPattern,
+  entityNoun,
+  entitySingular,
+  entityKey,
+  testIDPrefix,
+  slug,
+  howItWorks,
+  examples,
+  addPlaceholder,
+  emptyMessage
+}) {
+  const [showAddInput, setShowAddInput] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const handleAddPattern = () => {
+    const trimmed = inputValue.trim();
+    if (trimmed) {
+      onAddPattern(trimmed);
+      setInputValue("");
+      setShowAddInput(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: false,
+    nestedScrollEnabled: true,
+    testID: `${testIDPrefix}-filters-scroll`,
+    children: [entities.length === 0 && emptyMessage ? /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(SectionHeader, {
+        children: /*#__PURE__*/_jsxs(SectionHeader.Title, {
+          children: ["REGISTERED ", entityNoun]
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyText,
+        testID: `${testIDPrefix}-filters-${entityKey}s-empty`,
+        children: emptyMessage
+      })]
+    }) : null, entities.length > 0 && /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsxs(SectionHeader.Title, {
+          children: ["REGISTERED ", entityNoun]
+        }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
+          count: entities.length,
+          color: night.color.accent,
+          testID: `${testIDPrefix}-filters-${entityKey}-count`
+        })]
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.entityList,
+        contentContainerStyle: styles.entityListContent,
+        showsVerticalScrollIndicator: true,
+        nestedScrollEnabled: true,
+        testID: `${testIDPrefix}-filters-${entityKey}-list`,
+        children: entities.map(entity => {
+          const hidden = isHidden(entity, ignoredPatterns);
+          return /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.entityRow, hidden && styles.entityRowHidden],
+            onPress: () => onAddPattern(entity.name),
+            disabled: hidden,
+            testID: `${testIDPrefix}-filters-${entityKey}-${slug(entity.name)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Hide ${entity.name}`,
+            accessibilityState: {
+              disabled: hidden
+            },
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.dot, {
+                backgroundColor: hidden ? night.color.textTertiary : entity.color
+              }]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.entityText, hidden ? styles.entityTextHidden : {
+                color: entity.color
+              }],
+              numberOfLines: 1,
+              children: entity.name
+            }), hidden ? /*#__PURE__*/_jsx(Text, {
+              style: styles.hiddenLabel,
+              children: "hidden"
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: [styles.addLabel, {
+                color: entity.color + "99"
+              }],
+              children: "+ hide"
+            })]
+          }, entity.name);
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+          icon: Filter,
+          color: night.color.accent,
+          size: 12
+        }), /*#__PURE__*/_jsxs(SectionHeader.Title, {
+          children: [entitySingular.toUpperCase(), " NAME FILTERS"]
+        }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
+          count: ignoredPatterns.size,
+          color: night.color.accent,
+          testID: `${testIDPrefix}-filters-count`
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.addInputWrapper,
+        children: !showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
+          onPress: () => setShowAddInput(true),
+          color: night.color.accent,
+          label: `Add ${entitySingular} name pattern`,
+          testID: `${testIDPrefix}-filters-add-open`
+        }) : /*#__PURE__*/_jsx(AddFilterInput, {
+          value: inputValue,
+          onChange: setInputValue,
+          onSubmit: handleAddPattern,
+          onCancel: () => {
+            setShowAddInput(false);
+            setInputValue("");
+          },
+          placeholder: addPlaceholder ?? `Enter ${entitySingular} name pattern to hide...`,
+          color: night.color.accent,
+          testID: `${testIDPrefix}-filters-add-input`
+        })
+      }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsx(View, {
+        style: styles.patternList,
+        children: Array.from(ignoredPatterns).map(pattern => {
+          const color = colorForPattern(pattern, entities);
+          return /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: styles.patternRow,
+            onPress: () => onTogglePattern(pattern),
+            activeOpacity: 0.8,
+            testID: `${testIDPrefix}-filters-chip-${slug(pattern)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Remove filter ${pattern}`,
+            children: [color ? /*#__PURE__*/_jsx(View, {
+              style: [styles.dot, {
+                backgroundColor: color
+              }]
+            }) : null, /*#__PURE__*/_jsx(Text, {
+              style: [styles.patternText, color ? {
+                color
+              } : null],
+              numberOfLines: 1,
+              children: pattern
+            }), /*#__PURE__*/_jsx(X, {
+              size: 12,
+              color: night.color.accent + "80"
+            })]
+          }, pattern);
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+          icon: Filter,
+          color: night.color.textSecondary,
+          size: 12
+        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: "HOW EVENT FILTERS WORK"
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.howItWorksText,
+        children: howItWorks
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.examplesContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.examplesTitle,
+          children: "EXAMPLES:"
+        }), examples.map(ex => /*#__PURE__*/_jsx(Text, {
+          style: styles.exampleItem,
+          children: ex
+        }, ex))]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
+  },
+  scrollContent: {
+    paddingTop: 16,
+    paddingHorizontal: 16,
+    paddingBottom: 24,
+    gap: 16
+  },
+  section: {
+    backgroundColor: night.color.surface,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    overflow: "hidden"
+  },
+  entityList: {
+    maxHeight: 180
+  },
+  entityListContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    gap: 10
+  },
+  entityRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: night.color.border
+  },
+  entityRowHidden: {
+    opacity: 0.45
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5
+  },
+  entityText: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: monoFont
+  },
+  entityTextHidden: {
+    color: night.color.textTertiary,
+    textDecorationLine: "line-through"
+  },
+  hiddenLabel: {
+    fontSize: 10,
+    fontWeight: "500",
+    color: night.color.textTertiary,
+    fontFamily: monoFont
+  },
+  addLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: monoFont
+  },
+  addInputWrapper: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  patternList: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    gap: 8
+  },
+  patternRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    gap: 8
+  },
+  patternText: {
+    flex: 1,
+    fontSize: 12,
+    fontFamily: monoFont,
+    color: night.color.text
+  },
+  emptyText: {
+    fontSize: 11,
+    color: night.color.textTertiary,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    fontFamily: monoFont
+  },
+  howItWorksText: {
+    fontSize: 11,
+    color: night.color.textSecondary,
+    lineHeight: 16,
+    marginTop: 8,
+    paddingHorizontal: 16,
+    fontFamily: monoFont
+  },
+  examplesContainer: {
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    borderTopWidth: 1,
+    borderTopColor: night.color.border,
+    marginTop: 12
+  },
+  examplesTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: night.color.textTertiary,
+    fontFamily: monoFont,
+    letterSpacing: 0.5,
+    marginBottom: 6
+  },
+  exampleItem: {
+    fontSize: 10,
+    color: night.color.textTertiary,
+    fontFamily: monoFont,
+    lineHeight: 16
+  }
+});

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

@@ -12,11 +12,12 @@ 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";
+import { monoFont } from "../../fonts.js";
 /**
  * CompareBar displays a side-by-side comparison of two events
  * with optional navigation controls for any-to-any compare mode.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const CompareBar = /*#__PURE__*/memo(function CompareBar({
   leftEvent,
   rightEvent,
@@ -150,7 +151,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "700",
     letterSpacing: 0.5,
     textTransform: "uppercase"
@@ -185,17 +186,17 @@ const styles = StyleSheet.create({
   index: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   time: {
     fontSize: 11,
     color: macOSColors.text.primary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   relative: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   divider: {
     width: 1,

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

@@ -11,11 +11,12 @@
 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";
+import { monoFont } from "../../fonts.js";
 /**
  * DiffModeTabs displays a horizontal tab bar for switching
  * between different diff visualization modes.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const DiffModeTabs = /*#__PURE__*/memo(function DiffModeTabs({
   tabs,
   activeTab,
@@ -79,7 +80,7 @@ const styles = StyleSheet.create({
   },
   tabText: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600",
     color: macOSColors.text.secondary,
     letterSpacing: 0.5

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

@@ -13,11 +13,12 @@ import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-nati
 import { absoluteFill } from "../../../utils/absoluteFill.js";
 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";
+import { monoFont } from "../../fonts.js";
 /**
  * EventPickerModal displays a modal for selecting events
  * with color-coded styling based on position (left/right).
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const EventPickerModal = /*#__PURE__*/memo(function EventPickerModal({
   isOpen,
   onClose,
@@ -118,7 +119,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 13,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase",
     marginBottom: 8,
     letterSpacing: 0.6
@@ -185,18 +186,18 @@ const styles = StyleSheet.create({
   itemIndex: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     width: 40
   },
   itemTime: {
     fontSize: 11,
     color: macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   itemRelative: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });