@buoy-gg/shared-ui 7.0.33 → 7.0.35

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

@@ -14,6 +14,7 @@ import { ChevronLeft, ChevronRight } from "../../icons/lucide-icons.js";
 import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
 import { night } from "../night/nightTheme.js";
 import { useSafeAreaInsets } from "../../hooks/useSafeAreaInsets.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A footer component for navigating through a list of events/items.
@@ -132,7 +133,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase"
   },
   navButtonTextDisabled: {
@@ -145,13 +146,13 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase"
   },
   subtitleText: {
     fontSize: 11,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 2
   },
   // ── Night variant (see ui/night/nightTheme.ts): near-black glass bar with

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

@@ -28,7 +28,8 @@ function CollapsedPeek({
   width,
   height,
   customContent,
-  label
+  label,
+  testID
 }) {
   // When progress=0 (collapsed): peek is visible (opacity=1, scale=1)
   // When progress=1 (expanded): peek is hidden (opacity=0, scale=0.9)
@@ -57,6 +58,7 @@ function CollapsedPeek({
       }],
       accessibilityLabel: label || `Expand options`,
       accessibilityRole: "button",
+      testID: testID,
       children: customContent || /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(ChevronUp, {
           size: 12,
@@ -82,7 +84,8 @@ function ExpandedWrapper({
   width,
   expandedHeight,
   isExpanded,
-  style
+  style,
+  collapseTestID
 }) {
   // Animate height from 0 to full height
   const animatedHeight = progress.interpolate({
@@ -105,6 +108,7 @@ function ExpandedWrapper({
         style: styles.collapseButton,
         accessibilityLabel: "Collapse",
         accessibilityRole: "button",
+        testID: collapseTestID,
         children: /*#__PURE__*/_jsx(ChevronUp, {
           size: 12,
           color: buoyColors.textMuted,
@@ -137,7 +141,9 @@ export function ExpandablePopover({
   expandedStyle,
   persistState = false,
   storageKey,
-  peekHeight = DEFAULT_PEEK_HEIGHT
+  peekHeight = DEFAULT_PEEK_HEIGHT,
+  testID,
+  collapseTestID
 }) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const [isStateRestored, setIsStateRestored] = useState(!persistState);
@@ -240,6 +246,7 @@ export function ExpandablePopover({
       style: styles.expandedWrapper,
       pointerEvents: isExpanded ? "box-none" : "none",
       children: /*#__PURE__*/_jsx(ExpandedWrapper, {
+        collapseTestID: collapseTestID,
         onCollapse: handleCollapse,
         progress: progress,
         width: width,
@@ -259,7 +266,8 @@ export function ExpandablePopover({
         width: width,
         height: peekHeight,
         customContent: collapsedContent,
-        label: collapsedLabel
+        label: collapsedLabel,
+        testID: testID
       })
     })]
   });

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

@@ -17,6 +17,7 @@
 
 import { View, Text, StyleSheet } from "react-native";
 import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
+import { monoFont } from "../fonts.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 export function ExpandedInfoRow({
   label,
@@ -72,7 +73,7 @@ const styles = StyleSheet.create({
     color: macOSColors.text.muted,
     fontWeight: "600",
     minWidth: 70,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   pill: {
     flexDirection: "row",
@@ -92,7 +93,7 @@ const styles = StyleSheet.create({
   pillText: {
     fontSize: 10,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5
   },
   pillTextSm: {

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

@@ -0,0 +1,169 @@
+"use strict";
+
+/**
+ * ExportPreview — the collapsible "what will be copied" panel at the bottom
+ * of a copy-settings screen.
+ *
+ * Collapsed, it is a card: an eye icon, "Show Preview", a one-line summary
+ * ("14 events · ~12.3 KB (mock data)"), a chevron — and, when the estimated
+ * payload is big, an amber or red size warning under it. Expanded, it is a
+ * "Hide Preview" bar over whatever the tool renders (a DataViewer for JSON,
+ * a mono text block otherwise).
+ *
+ * network, events and highlight-updates each drew this (~120 lines apiece).
+ * Tools keep their own summary string, warning copy and body; the chrome
+ * and the size-threshold ladder live here.
+ */
+
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { AlertTriangle, ChevronDown, ChevronUp, Eye } from "../../icons/index.js";
+import { night } from "../night/nightTheme.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The two-step ladder every copy view used (thresholds differ per tool). */
+export function sizeWarningLevel(bytes, thresholds) {
+  if (bytes >= thresholds.danger) return "danger";
+  if (bytes >= thresholds.warning) return "warning";
+  return "none";
+}
+const DEFAULT_WARNING = {
+  warning: "Large payload — preview may be slow",
+  danger: "Very large payload — may cause performance issues"
+};
+export function ExportPreview({
+  expanded,
+  onExpandedChange,
+  summary,
+  warningLevel = "none",
+  warningText = DEFAULT_WARNING,
+  testIDs,
+  renderBody
+}) {
+  if (!expanded) {
+    const warningColor = warningLevel === "danger" ? night.color.danger : warningLevel === "warning" ? night.color.warning : night.color.textSecondary;
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.collapsed,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.expandButton,
+        onPress: () => onExpandedChange(true),
+        testID: testIDs?.expand,
+        accessibilityRole: "button",
+        accessibilityLabel: "Show export preview",
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.expandButtonContent,
+          children: [/*#__PURE__*/_jsx(Eye, {
+            size: 16,
+            color: night.color.info
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.expandButtonTextContainer,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.expandButtonTitle,
+              children: "Show Preview"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.expandButtonSubtitle,
+              testID: testIDs?.summary,
+              children: summary
+            })]
+          }), /*#__PURE__*/_jsx(ChevronDown, {
+            size: 16,
+            color: night.color.textTertiary
+          })]
+        })
+      }), warningLevel !== "none" ? /*#__PURE__*/_jsxs(View, {
+        style: [styles.sizeWarning, warningLevel === "danger" && styles.sizeWarningDanger],
+        testID: testIDs?.warning,
+        children: [/*#__PURE__*/_jsx(AlertTriangle, {
+          size: 12,
+          color: warningColor
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.sizeWarningText, {
+            color: warningColor
+          }],
+          children: warningLevel === "danger" ? warningText.danger : warningText.warning
+        })]
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: styles.collapseButton,
+      onPress: () => onExpandedChange(false),
+      testID: testIDs?.collapse,
+      accessibilityRole: "button",
+      accessibilityLabel: "Hide export preview",
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.collapseButtonText,
+        children: "Hide Preview"
+      }), /*#__PURE__*/_jsx(ChevronUp, {
+        size: 14,
+        color: night.color.textSecondary
+      })]
+    }), renderBody()]
+  });
+}
+const styles = StyleSheet.create({
+  collapsed: {
+    gap: 8
+  },
+  expandButton: {
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    padding: 12
+  },
+  expandButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  expandButtonTextContainer: {
+    flex: 1
+  },
+  expandButtonTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: night.color.text
+  },
+  expandButtonSubtitle: {
+    fontSize: 11,
+    color: night.color.textSecondary,
+    marginTop: 2
+  },
+  collapseButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    marginBottom: 8,
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: night.color.border
+  },
+  collapseButtonText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: night.color.textSecondary
+  },
+  sizeWarning: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    backgroundColor: night.color.warningSoft,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: night.color.warning + "30"
+  },
+  sizeWarningDanger: {
+    backgroundColor: night.color.dangerSoft,
+    borderColor: night.color.danger + "30"
+  },
+  sizeWarningText: {
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1
+  }
+});

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

@@ -3,7 +3,7 @@
 import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native";
 import { X, Plus } from "../../icons/index.js";
 import { night } from "../night/nightTheme.js";
-
+import { monoFont } from "../fonts.js";
 // Container for filter section
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function FilterSection({
@@ -272,7 +272,7 @@ const styles = StyleSheet.create({
   filterItemText: {
     flex: 1,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginRight: 8,
     color: night.color.text
   },

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

@@ -0,0 +1,87 @@
+"use strict";
+
+/**
+ * InfoRow — the label / value line of every detail screen.
+ *
+ * Thirteen tools hand-rolled this (redux and zustand byte-for-byte). The
+ * night-theme recipe below is theirs: 11 px, tertiary label on the left,
+ * right-aligned value that truncates in the MIDDLE so both ends of an id or
+ * a path stay readable, optional monospace, optional color.
+ *
+ * `ellipsizeMode="middle"` truncates the RENDERED text and iOS reports the
+ * truncated string back, so anything a test reads off one of these rows has
+ * to be short enough to fit on the line.
+ */
+
+import { StyleSheet, Text, View } from "react-native";
+import { night } from "../night/nightTheme.js";
+import { CopyButton } from "./CopyButton.js";
+import { monoFont } from "../fonts.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function InfoRow({
+  label,
+  value,
+  valueColor,
+  mono = false,
+  copyable = false,
+  numberOfLines = 1,
+  testID,
+  style,
+  labelStyle,
+  valueStyle
+}) {
+  const isText = typeof value === "string" || typeof value === "number";
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.row, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.label, labelStyle],
+      numberOfLines: 1,
+      children: label
+    }), isText ? /*#__PURE__*/_jsx(Text, {
+      testID: testID,
+      style: [styles.value, mono && styles.valueMono, valueColor ? {
+        color: valueColor
+      } : undefined, valueStyle],
+      numberOfLines: numberOfLines,
+      ellipsizeMode: "middle",
+      children: String(value)
+    }) : /*#__PURE__*/_jsx(View, {
+      style: styles.valueNode,
+      testID: testID,
+      children: value
+    }), copyable && isText ? /*#__PURE__*/_jsx(CopyButton, {
+      value: String(value),
+      size: 12
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  label: {
+    fontSize: 11,
+    color: night.color.textTertiary,
+    fontWeight: "500"
+  },
+  value: {
+    fontSize: 11,
+    color: night.color.text,
+    fontWeight: "500",
+    flex: 1,
+    textAlign: "right",
+    marginLeft: 12
+  },
+  valueMono: {
+    fontFamily: monoFont
+  },
+  valueNode: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginLeft: 12
+  }
+});

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

@@ -139,16 +139,32 @@ export function HeaderSearch({
   onCancel,
   placeholder = "Search...",
   autoFocus = true,
-  testID
+  testID,
+  containerTestID,
+  clearTestID,
+  accessibilityLabel,
+  onBlur,
+  iconSize = 12,
+  dismissOnBlur = false,
+  onDismiss,
+  clearOnlyWhenText = false,
+  inputProps,
+  containerNativeID
 }) {
   const inputRef = useRef(null);
+  // Set while the ✕ is pressed so the blur it causes doesn't dismiss first.
+  const clearPressRef = useRef(false);
   useEffect(() => {
     if (autoFocus) inputRef.current?.focus();
   }, [autoFocus]);
+  const dismiss = onDismiss ?? onCancel;
+  const showClear = !clearOnlyWhenText || value.length > 0;
   return /*#__PURE__*/_jsxs(View, {
     style: styles.searchContainer,
+    testID: containerTestID,
+    nativeID: containerNativeID,
     children: [/*#__PURE__*/_jsx(SearchIcon, {
-      size: 12,
+      size: iconSize,
       color: night.color.textSecondary
     }), /*#__PURE__*/_jsx(TextInput, {
       ref: inputRef,
@@ -157,21 +173,38 @@ export function HeaderSearch({
       placeholderTextColor: night.color.placeholder,
       value: value,
       onChangeText: onChangeText,
+      onSubmitEditing: () => dismissOnBlur ? dismiss() : inputRef.current?.blur(),
+      onBlur: () => {
+        if (dismissOnBlur && !clearPressRef.current) dismiss();
+        onBlur?.();
+      },
       autoCorrect: false,
       autoCapitalize: "none",
+      returnKeyType: "search",
       testID: testID,
-      accessibilityLabel: placeholder
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onCancel,
+      accessibilityLabel: accessibilityLabel ?? placeholder,
+      ...inputProps
+    }), showClear ? /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onCancel
+      // react-native-web delays press-in ~50ms by default (native fires it
+      // immediately), which would put it AFTER the blur.
+      ,
+      delayPressIn: 0,
+      onPressIn: () => {
+        clearPressRef.current = true;
+      },
+      onPressOut: () => {
+        clearPressRef.current = false;
+      },
       style: styles.searchCancelButton,
       accessibilityRole: "button",
       accessibilityLabel: "Clear search",
-      testID: testID ? `${testID}-clear` : undefined,
+      testID: clearTestID ?? (testID ? `${testID}-clear` : undefined),
       children: /*#__PURE__*/_jsx(X, {
         size: 12,
         color: night.color.textSecondary
       })
-    })]
+    }) : null]
   });
 }
 

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

@@ -0,0 +1,111 @@
+"use strict";
+
+/**
+ * Pill — the small caption chip every tool draws next to a row: a verdict
+ * ("UNUSED", "OVERSIZE"), a kind ("event", "transaction"), a link ("↔ 2"),
+ * a source ("MMKV"). Sixteen packages defined 150+ local pill styles that
+ * fall into five looks; those are the `variant`s here. Text is always in
+ * the pill's color (or the muted ink for `quiet`), never the series color
+ * of anything else.
+ *
+ * - `tinted`  — color fill at 15% + border at 40%   (scenarios, react-query chips)
+ * - `soft`    — color fill at 20%, rounded, no border (events correlation badge)
+ * - `outline` — color border only                   (sentry envelope types)
+ * - `quiet`   — neutral 6% white fill, muted text, optional color dot (assets)
+ * - `text`    — bare colored caption, no chrome       (images row badges)
+ */
+
+import { StyleSheet, Text, View } from "react-native";
+import { night } from "../night/nightTheme.js";
+import { monoFont } from "../fonts.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Pill({
+  label,
+  color = night.color.textSecondary,
+  variant = "tinted",
+  size = "xs",
+  mono = false,
+  uppercase,
+  dot = false,
+  icon,
+  testID,
+  style
+}) {
+  const upper = uppercase ?? (variant === "tinted" || variant === "quiet" || variant === "text");
+  const textColor = variant === "quiet" ? night.color.textSecondary : color;
+  const chrome = variant === "tinted" ? {
+    backgroundColor: `${color}15`,
+    borderColor: `${color}40`,
+    borderWidth: 1
+  } : variant === "soft" ? {
+    backgroundColor: `${color}20`
+  } : variant === "outline" ? {
+    borderColor: color,
+    borderWidth: 1
+  } : variant === "quiet" ? {
+    backgroundColor: "rgba(255,255,255,0.06)"
+  } : {};
+  if (variant === "text") {
+    return /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, size === "sm" && styles.textSm, mono && styles.mono, upper && styles.upper, {
+        color: textColor
+      }],
+      testID: testID,
+      children: label
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.pill, variant === "soft" && styles.pillSoft, size === "sm" && styles.pillSm, chrome, style],
+    children: [icon, dot && variant === "quiet" ? /*#__PURE__*/_jsx(View, {
+      style: [styles.dot, {
+        backgroundColor: color
+      }]
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, size === "sm" && styles.textSm, mono && styles.mono, upper && styles.upper, {
+        color: textColor
+      }],
+      testID: testID,
+      children: label
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  pill: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  pillSoft: {
+    paddingHorizontal: 8,
+    borderRadius: 10
+  },
+  pillSm: {
+    paddingHorizontal: 8,
+    paddingVertical: 3
+  },
+  dot: {
+    width: 5,
+    height: 5,
+    borderRadius: 2.5
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.3
+  },
+  textSm: {
+    fontSize: 11
+  },
+  mono: {
+    fontFamily: monoFont
+  },
+  upper: {
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    fontWeight: "700"
+  }
+});

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

@@ -0,0 +1,112 @@
+"use strict";
+
+/**
+ * ToggleRow — a labeled switch row for a tool's settings surface.
+ *
+ * Every settings screen (impersonate, image-overlay, highlight-updates,
+ * perf-monitor, scenarios, storage, ask-buoy) drew its own `toggleRow` +
+ * `<Switch>` pair with the same night track colors. The native switch stays
+ * (a custom control would be a visible design change); the row chrome,
+ * the label/description stack and the accent/warning tone are shared.
+ *
+ * - `variant="card"`  — an elevated bordered pill row (image-overlay)
+ * - `variant="plain"` — a bare list row for use inside a card (impersonate)
+ */
+
+import { StyleSheet, Switch, Text, View } from "react-native";
+import { night } from "../night/nightTheme.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ToggleRow({
+  label,
+  description,
+  value,
+  onValueChange,
+  disabled = false,
+  tone = "accent",
+  accessory,
+  variant = "card",
+  emphasizeLabel = false,
+  testID,
+  style
+}) {
+  const onColor = tone === "warning" ? night.color.warning : night.color.accent;
+  const isCard = variant === "card";
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.row, isCard ? styles.rowCard : styles.rowPlain, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.info,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.header,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [isCard ? styles.labelCard : styles.labelPlain, emphasizeLabel && {
+            color: onColor
+          }],
+          numberOfLines: 2,
+          children: label
+        }), accessory]
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        style: styles.description,
+        children: description
+      }) : null]
+    }), /*#__PURE__*/_jsx(Switch, {
+      value: value,
+      onValueChange: onValueChange,
+      disabled: disabled,
+      testID: testID,
+      accessibilityLabel: label,
+      trackColor: isCard ? {
+        false: night.color.surfaceElevated,
+        true: onColor
+      } : {
+        false: night.color.border,
+        true: `${onColor}50`
+      },
+      thumbColor: isCard ? undefined : value ? onColor : night.color.knob
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  rowCard: {
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  rowPlain: {
+    paddingVertical: 12,
+    paddingHorizontal: 12
+  },
+  info: {
+    flex: 1,
+    marginRight: 12
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flexWrap: "wrap"
+  },
+  labelCard: {
+    fontSize: 13,
+    fontWeight: "500",
+    color: night.color.textSecondary
+  },
+  labelPlain: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: night.color.text
+  },
+  description: {
+    fontSize: 12,
+    color: night.color.textTertiary,
+    lineHeight: 16,
+    marginTop: 3
+  }
+});