@buoy-gg/shared-ui 7.0.33 → 7.0.34

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

@@ -0,0 +1,110 @@
+"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 { 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: "monospace"
+  },
+  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
+  }
+});

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

@@ -0,0 +1,196 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { night } from "../night/nightTheme.js";
+import { useSafeAreaInsets } from "../../hooks/useSafeAreaInsets.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ToolFooter({
+  children,
+  safeArea = true,
+  paddingBottom = 12,
+  floating = false,
+  absolute = false,
+  gap = 8,
+  style,
+  testID
+}) {
+  const insets = useSafeAreaInsets();
+  const bottom = typeof safeArea === "number" ? safeArea + insets.bottom : safeArea ? paddingBottom + insets.bottom : paddingBottom;
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.footer, floating && styles.footerFloating, absolute && styles.footerAbsolute, {
+      paddingBottom: bottom,
+      gap
+    }, style],
+    testID: testID,
+    children: children
+  });
+}
+
+/** A row of footer buttons. */
+export function FooterRow({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.row, style],
+    children: children
+  });
+}
+
+/** Tracking caption above a row ("MASS ACTIONS — every image on screen"). */
+export function FooterCaption({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.caption, style],
+    numberOfLines: 1,
+    children: children
+  });
+}
+
+/** Mono feedback line ("Restored 3 images"). */
+export function FooterMessage({
+  children,
+  tone = "info",
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.message, tone === "muted" && styles.messageMuted, style],
+    numberOfLines: 1,
+    children: children
+  });
+}
+export function FooterButton({
+  label,
+  onPress,
+  accent = false,
+  active = false,
+  disabled = false,
+  icon,
+  flex = true,
+  size = "sm",
+  testID,
+  accessibilityLabel,
+  style
+}) {
+  return /*#__PURE__*/_jsxs(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__*/_jsx(Text, {
+      style: [styles.buttonText, size === "md" && styles.buttonTextMd, accent && !disabled && styles.buttonTextAccent, active && styles.buttonTextActive, disabled && styles.buttonTextDisabled],
+      children: label
+    })]
+  });
+}
+const styles = 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: 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: night.color.textTertiary,
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.8
+  },
+  message: {
+    color: night.color.info,
+    fontSize: 10,
+    fontFamily: "monospace"
+  },
+  messageMuted: {
+    color: 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: night.color.button,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: night.color.border
+  },
+  buttonFlex: {
+    flex: 1
+  },
+  buttonFixed: {
+    paddingHorizontal: 10
+  },
+  buttonMd: {
+    paddingVertical: 8
+  },
+  buttonActive: {
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
+  },
+  buttonText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: night.color.textSecondary,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  buttonTextMd: {
+    fontSize: 11,
+    color: night.color.text
+  },
+  buttonTextAccent: {
+    color: night.color.warning
+  },
+  buttonTextActive: {
+    color: night.color.accent
+  },
+  buttonTextDisabled: {
+    color: night.color.textTertiary
+  },
+  disabled: {
+    opacity: 0.4
+  }
+});

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

@@ -40,4 +40,13 @@ export { PowerToggleButton } from "./PowerToggleButton.js";
 export { ExpandedInfoRow, PillBadge } from "./ExpandedInfoRow.js";
 
 // EventHistoryViewer components
-export { EventHistoryViewer, ViewToggleCards, DiffModeTabs, CompareBar, EventPickerModal } from "./EventHistoryViewer/index.js";
+export { EventHistoryViewer, ViewToggleCards, DiffModeTabs, CompareBar, EventPickerModal } from "./EventHistoryViewer/index.js";
+export { InfoRow } from "./InfoRow.js";
+export { DetailViewToggle } from "./DetailViewToggle.js";
+export { ChangeRow } from "./ChangeRow.js";
+export { Pill } from "./Pill.js";
+export { ToolFooter, FooterRow, FooterCaption, FooterMessage, FooterButton } from "./ToolFooter.js";
+export { EntityFilterView } from "./EntityFilterView.js";
+export { ToggleRow } from "./ToggleRow.js";
+export { ChipStrip, useChipTap } from "./ChipStrip.js";
+export { ExportPreview, sizeWarningLevel } from "./ExportPreview.js";

package/lib/module/ui/index.js

@@ -18,4 +18,7 @@ export { CyberpunkSectionButton } from "./console/CyberpunkSectionButton.js";
 export * from "./gameUI/index.js";
 
 // Otto — the Buoy mascot (see OTTO_PLACEMENT_PLAN.md for where he belongs)
-export * from "./otto/index.js";
+export * from "./otto/index.js";
+
+// FlatList presets (tuned window/batch values + the E2E clipping guard)
+export { EVENT_LIST_PRESET, LOG_LIST_PRESET, CLIP_OFFSCREEN_CELLS } from "./listPresets.js";

package/lib/module/ui/listPresets.js

@@ -0,0 +1,39 @@
+"use strict";
+
+/**
+ * FlatList presets for tool lists — the tuned window/batch values and the
+ * E2E clipping guard that eleven list sites carried as copy-pasted props.
+ *
+ * Spread them onto a FlatList: `<FlatList {...EVENT_LIST_PRESET} … />`.
+ * A tool that later moves to FlashList changes this file, not eleven.
+ */
+
+/**
+ * `removeClippedSubviews` is off in E2E bundles: clipped rows leave the
+ * hierarchy entirely, so a row past the fold reads to the test as "the tool
+ * stopped capturing".
+ */
+export const CLIP_OFFSCREEN_CELLS = !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E);
+/**
+ * Event / change / request lists: rows are tall-ish and arrive in bursts.
+ * Window and batch values are the "tuned" winner of the buoy-optimize
+ * batch run on the network tool (2026-07-06, batch-1783396983529-6l7w).
+ */
+export const EVENT_LIST_PRESET = {
+  initialNumToRender: 12,
+  maxToRenderPerBatch: 8,
+  windowSize: 5,
+  updateCellsBatchingPeriod: 50,
+  removeClippedSubviews: CLIP_OFFSCREEN_CELLS
+};
+
+/**
+ * Log tails (console, sentry): rows are short single lines, the list is
+ * read from the bottom, and a scroll-to-end must not land on blank cells.
+ */
+export const LOG_LIST_PRESET = {
+  initialNumToRender: 30,
+  maxToRenderPerBatch: 30,
+  windowSize: 21,
+  removeClippedSubviews: CLIP_OFFSCREEN_CELLS
+};

package/lib/module/ui/night/primitives.js

@@ -154,12 +154,14 @@ export function NightChip({
   selected,
   onPress,
   disabled,
-  icon
+  icon,
+  testID
 }) {
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
     activeOpacity: 0.7,
     disabled: disabled || !onPress,
     onPress: onPress,
+    testID: testID,
     style: [styles.chip, selected ? styles.chipSelected : null, disabled ? styles.chipDisabled : null],
     children: [icon, /*#__PURE__*/_jsx(Text, {
       style: [styles.chipText, selected ? styles.chipTextSelected : null],

package/lib/module/utils/snapshotProviderKit.js

@@ -0,0 +1,156 @@
+"use strict";
+
+/**
+ * snapshotProviderKit — the parts of a Time Machine `StateSnapshotProvider`
+ * that are the same for every source.
+ *
+ * storage, redux, zustand, jotai and react-query each register a provider
+ * (see stateSnapshotRegistry.ts). What differs is how they read and write
+ * their source. What was copied five times is:
+ *
+ *  - the restore SCOPE gate: `excludeKeys` (touch all but these) and
+ *    `includeKeys` (touch only these), the "N item(s) excluded by you"
+ *    warning, and the empty `StateSnapshotRestoreResult`;
+ *  - the preview VERDICT ladder: removed → added → unchanged → too-large →
+ *    changed, with the 256 KB per-item render cap;
+ *  - the "won't apply" override: a difference restore cannot apply must say
+ *    so instead of rendering as a green change.
+ *
+ * The parts that stay per-tool are the ones that matter: redux verifies the
+ * jump by reference identity, zustand grafts action functions back, jotai
+ * leaves derived atoms to recompute, storage gates MMKV buffers and
+ * biometric keys, react-query diffs a comparable projection.
+ */
+
+import { boundedDeepEqual, jsonLikelyLargerThan } from "../dataViewer/objectDiff.js";
+/** Beyond this a preview item is "too-large": restore still applies it, the diff isn't drawn. */
+export const PREVIEW_ITEM_RENDER_BYTE_LIMIT = 256 * 1024;
+/**
+ * Both option lists use preview item keys, and both mean "leave everything
+ * else untouched in BOTH directions". `includeKeys` wins when present;
+ * `excludeKeys` still applies on top.
+ */
+export function createRestoreScope(options) {
+  const excludedSet = new Set(options?.excludeKeys ?? []);
+  const includedSet = options?.includeKeys ? new Set(options.includeKeys) : null;
+  let excludedHits = 0;
+  const touch = key => !excludedSet.has(key) && (!includedSet || includedSet.has(key));
+  return {
+    touch,
+    allows(key) {
+      if (touch(key)) return true;
+      excludedHits += 1;
+      return false;
+    },
+    countExcluded(n) {
+      excludedHits += n;
+    },
+    get excludedHits() {
+      return excludedHits;
+    },
+    excludedWarning(noun) {
+      return excludedHits > 0 ? `${excludedHits} ${noun} excluded by you` : null;
+    }
+  };
+}
+
+/** A fresh, successful, empty result to accumulate into. */
+export function emptyRestoreResult() {
+  return {
+    ok: true,
+    applied: 0,
+    skipped: [],
+    warnings: []
+  };
+}
+
+/** A failed result with one warning (an empty or unusable snapshot). */
+export function failedRestore(warning) {
+  return {
+    ok: false,
+    applied: 0,
+    skipped: [],
+    warnings: [warning]
+  };
+}
+
+/** A failed result with one skipped item and its reason. */
+export function skippedRestore(id, reason) {
+  return {
+    ok: false,
+    applied: 0,
+    skipped: [{
+      id,
+      reason
+    }],
+    warnings: []
+  };
+}
+/**
+ * The verdict ladder: removed → added → unchanged → too-large → changed.
+ * Callers layer source-specific verdicts (`wont-apply`, `recomputes`) on top
+ * with `wontApply()`.
+ */
+export function classifyPreviewItem(input, options = {}) {
+  const {
+    key,
+    label,
+    oldValue,
+    newValue,
+    inOld,
+    inNew
+  } = input;
+  if (!inNew) return {
+    key,
+    label,
+    verdict: "removed",
+    oldValue
+  };
+  if (!inOld) return {
+    key,
+    label,
+    verdict: "added",
+    newValue
+  };
+  const equal = options.equal ?? boundedDeepEqual;
+  if (equal(oldValue, newValue)) return {
+    key,
+    label,
+    verdict: "unchanged"
+  };
+  const tooLarge = options.tooLarge ?? (value => jsonLikelyLargerThan(value, PREVIEW_ITEM_RENDER_BYTE_LIMIT));
+  if (tooLarge(oldValue) || tooLarge(newValue)) {
+    return {
+      key,
+      label,
+      verdict: "too-large",
+      reason: options.tooLargeReason ?? "value too large to render a diff — restore still applies it"
+    };
+  }
+  return {
+    key,
+    label,
+    verdict: "changed",
+    oldValue,
+    newValue
+  };
+}
+
+/**
+ * Mark an item as something restore cannot apply. An unchanged item is left
+ * alone — there is nothing to apply, so nothing is being refused.
+ */
+export function wontApply(item, reason) {
+  if (item.verdict === "unchanged") return item;
+  return {
+    ...item,
+    verdict: "wont-apply",
+    reason
+  };
+}
+
+/** Every key present in either record, once. */
+export function unionKeys(a, b) {
+  const keysOf = r => r === undefined ? [] : r instanceof Map ? Array.from(r.keys()) : Object.keys(r);
+  return new Set([...keysOf(a), ...keysOf(b)]);
+}