@buoy-gg/shared-ui 7.0.32 → 7.0.34

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

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pill = Pill;
+var _reactNative = require("react-native");
+var _nightTheme = require("../night/nightTheme.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: "monospace"
+  },
+  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
+  }
+});

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

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolEmptyState = ToolEmptyState;
+exports.resolveListEmptyState = resolveListEmptyState;
+var _reactNative = require("react-native");
+var _index = require("../otto/index.js");
+var _nightTheme = require("../night/nightTheme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The one "nothing here" panel, for every tool that shows a list.
+ *
+ * WHY THIS EXISTS
+ *
+ * Every capture tool — network, events, highlight-updates, storage, zustand,
+ * redux, jotai, console — renders the same panel with the same four causes and
+ * different nouns. Written out per tool, that produced four copies of the same
+ * layout (each of which had to be re-inset by hand the first time a sentence
+ * was longer than "No events yet"), and four independent guesses at the
+ * PRECEDENCE between those causes. The guesses disagreed, and the disagreements
+ * were bugs:
+ *
+ *   - A search that matched nothing showed "Enable tracking to start
+ *     capturing" — pointing at a toggle that was already on.
+ *   - Turning every source chip off showed "Events will appear here as they
+ *     occur" — inviting you to go generate events that were already in the
+ *     store, behind your own filter.
+ *   - Typing into a search box while the store was empty produced no
+ *     acknowledgement of the query at all, which reads as a dead search box.
+ *
+ * So the precedence lives here, once, and each tool supplies only what is
+ * genuinely its own: the noun, and what "switched on but waiting" looks like
+ * for it (network fishes, events listens, the highlighter stares).
+ *
+ * SPLIT IN TWO ON PURPOSE
+ *
+ * `resolveListEmptyState` is a pure function returning `{ otto, title,
+ * message }`, and `ToolEmptyState` renders that object. Tools with a cause
+ * nobody else has — storage's "no issues found" (which is a PASS, not a
+ * failure), zustand's unregistered store — resolve the common cases and
+ * substitute their own, or skip the resolver and hand the shell a literal.
+ * Adding a mascot to every tool at once is then one edit in this file, which is
+ * also what makes the Flutter and Swift ports one component to mirror instead
+ * of eight.
+ */
+
+/** What a "nothing here" panel says. */
+
+/**
+ * The panel itself: Otto, a heading, a sentence. Nothing else — this only ever
+ * renders where the alternative is a blank body, so it has no actions and no
+ * decoration to compete with the list it stands in for.
+ */
+function ToolEmptyState({
+  otto,
+  title,
+  message,
+  testID,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Otto, {
+      state: otto,
+      pixelSize: 2
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.title,
+      testID: testID ? `${testID}-title` : undefined,
+      numberOfLines: 2,
+      children: title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.message,
+      testID: testID ? `${testID}-text` : undefined,
+      children: message
+    })]
+  });
+}
+/**
+ * Which "nothing here" this is, in the order the facts answer the question.
+ *
+ * A typed query first (see `search`), then the user's filters, then the
+ * capture switch, then the honest "nothing yet".
+ */
+function resolveListEmptyState(facts) {
+  const {
+    subject,
+    verb = "captured",
+    search,
+    total = 0,
+    capturing,
+    waiting,
+    paused,
+    blocked
+  } = facts;
+  const term = (search ?? "").trim();
+  if (term) {
+    return {
+      otto: "sad",
+      // The query goes in the HEADING because checking what you typed is the
+      // first thing you do; the body names whichever blocker is in the way.
+      title: `No results for “${term}”`,
+      message: blocked ?? (total > 0 ? `None of the ${total} ${verb} ${subject} match. Clear the search to see them.` : capturing === false ? `Nothing is ${verb} to search — capture is off. Turn it on to start.` : `Nothing has been ${verb} yet, so there is nothing to match.`)
+    };
+  }
+  if (blocked) {
+    return {
+      otto: "filtering",
+      title: "Filtered Out",
+      message: blocked
+    };
+  }
+  if (total > 0) {
+    return {
+      otto: "filtering",
+      title: "Filtered Out",
+      message: `${total} ${verb} ${subject} ${total === 1 ? "is" : "are"} hidden by the active filters.`
+    };
+  }
+  if (capturing === false) {
+    return {
+      otto: paused?.otto ?? "paused",
+      title: paused?.title ?? "Not capturing",
+      message: paused?.message ?? "Capture is off. Turn it on to start."
+    };
+  }
+  return waiting;
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    alignItems: "center",
+    paddingVertical: 40,
+    // The generated sentences are full sentences. Every tool that hand-rolled
+    // this panel shipped without an inset and had it run to both edges of the
+    // sheet the first time the copy grew past a few words.
+    paddingHorizontal: 24
+  },
+  title: {
+    color: _nightTheme.night.color.text,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6,
+    textAlign: "center"
+  },
+  message: {
+    color: _nightTheme.night.color.textTertiary,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 17
+  }
+});

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

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FooterButton = FooterButton;
+exports.FooterCaption = FooterCaption;
+exports.FooterMessage = FooterMessage;
+exports.FooterRow = FooterRow;
+exports.ToolFooter = ToolFooter;
+var _reactNative = require("react-native");
+var _nightTheme = require("../night/nightTheme.js");
+var _useSafeAreaInsets = require("../../hooks/useSafeAreaInsets.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * ToolFooter — the night glass bar pinned to the bottom of a tool: dark
+ * backing over the star field, a hairline on top, safe-area padding when
+ * docked as a sheet, rounded corners when floating.
+ *
+ * `EventStepperFooter` draws this bar for the Previous/Next case; the
+ * images and react-query tools each re-drew it for their action bars with
+ * a comment saying "matches EventStepperFooter". This is that bar as a
+ * container, plus `FooterButton` — the mono uppercase plate button those
+ * action bars are made of — and the caption/message lines above the row.
+ */
+
+function ToolFooter({
+  children,
+  safeArea = true,
+  paddingBottom = 12,
+  floating = false,
+  absolute = false,
+  gap = 8,
+  style,
+  testID
+}) {
+  const insets = (0, _useSafeAreaInsets.useSafeAreaInsets)();
+  const bottom = typeof safeArea === "number" ? safeArea + insets.bottom : safeArea ? paddingBottom + insets.bottom : paddingBottom;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.footer, floating && styles.footerFloating, absolute && styles.footerAbsolute, {
+      paddingBottom: bottom,
+      gap
+    }, style],
+    testID: testID,
+    children: children
+  });
+}
+
+/** A row of footer buttons. */
+function FooterRow({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.row, style],
+    children: children
+  });
+}
+
+/** Tracking caption above a row ("MASS ACTIONS — every image on screen"). */
+function FooterCaption({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.caption, style],
+    numberOfLines: 1,
+    children: children
+  });
+}
+
+/** Mono feedback line ("Restored 3 images"). */
+function FooterMessage({
+  children,
+  tone = "info",
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.message, tone === "muted" && styles.messageMuted, style],
+    numberOfLines: 1,
+    children: children
+  });
+}
+function FooterButton({
+  label,
+  onPress,
+  accent = false,
+  active = false,
+  disabled = false,
+  icon,
+  flex = true,
+  size = "sm",
+  testID,
+  accessibilityLabel,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    onPress: onPress,
+    disabled: disabled,
+    activeOpacity: 0.7,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel ?? label,
+    accessibilityState: {
+      disabled,
+      selected: active
+    },
+    testID: testID,
+    style: [styles.button, flex ? styles.buttonFlex : styles.buttonFixed, size === "md" && styles.buttonMd, active && styles.buttonActive, disabled && styles.disabled, style],
+    children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.buttonText, size === "md" && styles.buttonTextMd, accent && !disabled && styles.buttonTextAccent, active && styles.buttonTextActive, disabled && styles.buttonTextDisabled],
+      children: label
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  footer: {
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    // Dark glass over the star field — the same bar EventStepperFooter draws.
+    backgroundColor: "rgba(5, 5, 5, 0.92)",
+    borderTopWidth: 1,
+    borderTopColor: _nightTheme.night.color.border
+  },
+  footerFloating: {
+    borderBottomLeftRadius: 14,
+    borderBottomRightRadius: 14
+  },
+  footerAbsolute: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  caption: {
+    color: _nightTheme.night.color.textTertiary,
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.8
+  },
+  message: {
+    color: _nightTheme.night.color.info,
+    fontSize: 10,
+    fontFamily: "monospace"
+  },
+  messageMuted: {
+    color: _nightTheme.night.color.textTertiary,
+    fontFamily: undefined
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    // No horizontal padding: six of these share one row on a phone, and the
+    // mono uppercase label needs every point it can get before it wraps.
+    paddingHorizontal: 0,
+    borderRadius: 6,
+    backgroundColor: _nightTheme.night.color.button,
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderColor: _nightTheme.night.color.border
+  },
+  buttonFlex: {
+    flex: 1
+  },
+  buttonFixed: {
+    paddingHorizontal: 10
+  },
+  buttonMd: {
+    paddingVertical: 8
+  },
+  buttonActive: {
+    backgroundColor: _nightTheme.night.color.accentSoft,
+    borderColor: _nightTheme.night.color.accentBorderStrong
+  },
+  buttonText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _nightTheme.night.color.textSecondary,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  buttonTextMd: {
+    fontSize: 11,
+    color: _nightTheme.night.color.text
+  },
+  buttonTextAccent: {
+    color: _nightTheme.night.color.warning
+  },
+  buttonTextActive: {
+    color: _nightTheme.night.color.accent
+  },
+  buttonTextDisabled: {
+    color: _nightTheme.night.color.textTertiary
+  },
+  disabled: {
+    opacity: 0.4
+  }
+});

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

@@ -74,7 +74,8 @@ function WindowControls({
   onMinimize,
   onToggleMode,
   mode,
-  variant = "night"
+  variant = "night",
+  defaultExpanded
 }) {
   // Show action-based icon: what will happen when clicked
   const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
@@ -129,7 +130,8 @@ function WindowControls({
     onMinimize: onMinimize,
     onToggleMode: onToggleMode,
     mode: mode,
-    variant: variant
+    variant: variant,
+    defaultExpanded: defaultExpanded
   });
 }
 function ExpandableWindowControls({
@@ -137,11 +139,12 @@ function ExpandableWindowControls({
   onMinimize,
   onToggleMode,
   mode,
-  variant = "night"
+  variant = "night",
+  defaultExpanded = false
 }) {
   const isNight = variant === "night";
-  const [expanded, setExpanded] = (0, _react.useState)(false);
-  const expandAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const [expanded, setExpanded] = (0, _react.useState)(defaultExpanded);
+  const expandAnim = (0, _react.useRef)(new _reactNative.Animated.Value(defaultExpanded ? 1 : 0)).current;
   const dismissTimeout = (0, _react.useRef)(null);
   const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
   const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";