@buoy-gg/shared-ui 7.0.33 → 7.0.35

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

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExportPreview = ExportPreview;
+exports.sizeWarningLevel = sizeWarningLevel;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _nightTheme = require("../night/nightTheme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+/** The two-step ladder every copy view used (thresholds differ per tool). */
+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"
+};
+function ExportPreview({
+  expanded,
+  onExpandedChange,
+  summary,
+  warningLevel = "none",
+  warningText = DEFAULT_WARNING,
+  testIDs,
+  renderBody
+}) {
+  if (!expanded) {
+    const warningColor = warningLevel === "danger" ? _nightTheme.night.color.danger : warningLevel === "warning" ? _nightTheme.night.color.warning : _nightTheme.night.color.textSecondary;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.collapsed,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.expandButton,
+        onPress: () => onExpandedChange(true),
+        testID: testIDs?.expand,
+        accessibilityRole: "button",
+        accessibilityLabel: "Show export preview",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.expandButtonContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Eye, {
+            size: 16,
+            color: _nightTheme.night.color.info
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.expandButtonTextContainer,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandButtonTitle,
+              children: "Show Preview"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.expandButtonSubtitle,
+              testID: testIDs?.summary,
+              children: summary
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
+            size: 16,
+            color: _nightTheme.night.color.textTertiary
+          })]
+        })
+      }), warningLevel !== "none" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.sizeWarning, warningLevel === "danger" && styles.sizeWarningDanger],
+        testID: testIDs?.warning,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AlertTriangle, {
+          size: 12,
+          color: warningColor
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.sizeWarningText, {
+            color: warningColor
+          }],
+          children: warningLevel === "danger" ? warningText.danger : warningText.warning
+        })]
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: styles.collapseButton,
+      onPress: () => onExpandedChange(false),
+      testID: testIDs?.collapse,
+      accessibilityRole: "button",
+      accessibilityLabel: "Hide export preview",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.collapseButtonText,
+        children: "Hide Preview"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
+        size: 14,
+        color: _nightTheme.night.color.textSecondary
+      })]
+    }), renderBody()]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  collapsed: {
+    gap: 8
+  },
+  expandButton: {
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    padding: 12
+  },
+  expandButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  expandButtonTextContainer: {
+    flex: 1
+  },
+  expandButtonTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: _nightTheme.night.color.text
+  },
+  expandButtonSubtitle: {
+    fontSize: 11,
+    color: _nightTheme.night.color.textSecondary,
+    marginTop: 2
+  },
+  collapseButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    marginBottom: 8,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border
+  },
+  collapseButtonText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: _nightTheme.night.color.textSecondary
+  },
+  sizeWarning: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    backgroundColor: _nightTheme.night.color.warningSoft,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.warning + "30"
+  },
+  sizeWarningDanger: {
+    backgroundColor: _nightTheme.night.color.dangerSoft,
+    borderColor: _nightTheme.night.color.danger + "30"
+  },
+  sizeWarningText: {
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1
+  }
+});

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

@@ -11,6 +11,7 @@ exports.FilterSection = FilterSection;
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _nightTheme = require("../night/nightTheme.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 // Container for filter section
 
@@ -280,7 +281,7 @@ const styles = _reactNative.StyleSheet.create({
   filterItemText: {
     flex: 1,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginRight: 8,
     color: _nightTheme.night.color.text
   },

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

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoRow = InfoRow;
+var _reactNative = require("react-native");
+var _nightTheme = require("../night/nightTheme.js");
+var _CopyButton = require("./CopyButton.js");
+var _fonts = require("../fonts.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.row, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label, labelStyle],
+      numberOfLines: 1,
+      children: label
+    }), isText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID,
+      style: [styles.value, mono && styles.valueMono, valueColor ? {
+        color: valueColor
+      } : undefined, valueStyle],
+      numberOfLines: numberOfLines,
+      ellipsizeMode: "middle",
+      children: String(value)
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.valueNode,
+      testID: testID,
+      children: value
+    }), copyable && isText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+      value: String(value),
+      size: 12
+    }) : null]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  label: {
+    fontSize: 11,
+    color: _nightTheme.night.color.textTertiary,
+    fontWeight: "500"
+  },
+  value: {
+    fontSize: 11,
+    color: _nightTheme.night.color.text,
+    fontWeight: "500",
+    flex: 1,
+    textAlign: "right",
+    marginLeft: 12
+  },
+  valueMono: {
+    fontFamily: _fonts.monoFont
+  },
+  valueNode: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginLeft: 12
+  }
+});

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

@@ -147,16 +147,32 @@ function HeaderSearch({
   onCancel,
   placeholder = "Search...",
   autoFocus = true,
-  testID
+  testID,
+  containerTestID,
+  clearTestID,
+  accessibilityLabel,
+  onBlur,
+  iconSize = 12,
+  dismissOnBlur = false,
+  onDismiss,
+  clearOnlyWhenText = false,
+  inputProps,
+  containerNativeID
 }) {
   const inputRef = (0, _react.useRef)(null);
+  // Set while the ✕ is pressed so the blur it causes doesn't dismiss first.
+  const clearPressRef = (0, _react.useRef)(false);
   (0, _react.useEffect)(() => {
     if (autoFocus) inputRef.current?.focus();
   }, [autoFocus]);
+  const dismiss = onDismiss ?? onCancel;
+  const showClear = !clearOnlyWhenText || value.length > 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.searchContainer,
+    testID: containerTestID,
+    nativeID: containerNativeID,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Search, {
-      size: 12,
+      size: iconSize,
       color: _nightTheme.night.color.textSecondary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
       ref: inputRef,
@@ -165,21 +181,38 @@ function HeaderSearch({
       placeholderTextColor: _nightTheme.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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      onPress: onCancel,
+      accessibilityLabel: accessibilityLabel ?? placeholder,
+      ...inputProps
+    }), showClear ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_index.X, {
         size: 12,
         color: _nightTheme.night.color.textSecondary
       })
-    })]
+    }) : null]
   });
 }
 

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

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pill = Pill;
+var _reactNative = require("react-native");
+var _nightTheme = require("../night/nightTheme.js");
+var _fonts = require("../fonts.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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)
+ */
+
+function Pill({
+  label,
+  color = _nightTheme.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" ? _nightTheme.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.text, size === "sm" && styles.textSm, mono && styles.mono, upper && styles.upper, {
+        color: textColor
+      }],
+      testID: testID,
+      children: label
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.pill, variant === "soft" && styles.pillSoft, size === "sm" && styles.pillSm, chrome, style],
+    children: [icon, dot && variant === "quiet" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.dot, {
+        backgroundColor: color
+      }]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.text, size === "sm" && styles.textSm, mono && styles.mono, upper && styles.upper, {
+        color: textColor
+      }],
+      testID: testID,
+      children: label
+    })]
+  });
+}
+const styles = _reactNative.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: _fonts.monoFont
+  },
+  upper: {
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    fontWeight: "700"
+  }
+});

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

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToggleRow = ToggleRow;
+var _reactNative = require("react-native");
+var _nightTheme = require("../night/nightTheme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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)
+ */
+
+function ToggleRow({
+  label,
+  description,
+  value,
+  onValueChange,
+  disabled = false,
+  tone = "accent",
+  accessory,
+  variant = "card",
+  emphasizeLabel = false,
+  testID,
+  style
+}) {
+  const onColor = tone === "warning" ? _nightTheme.night.color.warning : _nightTheme.night.color.accent;
+  const isCard = variant === "card";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.row, isCard ? styles.rowCard : styles.rowPlain, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.info,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.header,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [isCard ? styles.labelCard : styles.labelPlain, emphasizeLabel && {
+            color: onColor
+          }],
+          numberOfLines: 2,
+          children: label
+        }), accessory]
+      }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.description,
+        children: description
+      }) : null]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+      value: value,
+      onValueChange: onValueChange,
+      disabled: disabled,
+      testID: testID,
+      accessibilityLabel: label,
+      trackColor: isCard ? {
+        false: _nightTheme.night.color.surfaceElevated,
+        true: onColor
+      } : {
+        false: _nightTheme.night.color.border,
+        true: `${onColor}50`
+      },
+      thumbColor: isCard ? undefined : value ? onColor : _nightTheme.night.color.knob
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  rowCard: {
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _nightTheme.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: _nightTheme.night.color.textSecondary
+  },
+  labelPlain: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: _nightTheme.night.color.text
+  },
+  description: {
+    fontSize: 12,
+    color: _nightTheme.night.color.textTertiary,
+    lineHeight: 16,
+    marginTop: 3
+  }
+});