@buoy-gg/shared-ui 7.0.33 → 7.0.35

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

@@ -0,0 +1,197 @@
+"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 { monoFont } from "../fonts.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: monoFont
+  },
+  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: monoFont,
+    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/console/CyberpunkSectionButton.js

@@ -5,6 +5,7 @@ import { ChevronRight } from "../../icons/index.js";
 import { CyberpunkButtonOutline } from "./CyberpunkButtonOutline.js";
 import { CyberpunkIconContainer } from "./CyberpunkIconContainer.js";
 import { gameUIColors } from "../gameUI/index.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function CyberpunkSectionButton({
   id: _id,
@@ -91,14 +92,14 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     letterSpacing: 0.5,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   subtitle: {
     fontSize: 12,
     fontWeight: "600",
     marginTop: 1,
     letterSpacing: 0.5,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.85
   },
   arrowContainer: {

package/lib/module/ui/fonts.js

@@ -0,0 +1,8 @@
+"use strict";
+
+/**
+ * The monospace family, per platform. Defined in `@buoy-gg/floating-tools-core`
+ * (the base package — the dial styles need it too, and nothing below shared-ui
+ * may import from it) and re-exported here, which is where every tool reads it.
+ */
+export { monoFont } from "@buoy-gg/floating-tools-core";

package/lib/module/ui/gameUI/components/GameUICollapsibleSection.js

@@ -3,6 +3,7 @@
 import { StyleSheet, Text, View, TouchableOpacity, Animated } from "react-native";
 import { ChevronDown, ChevronUp } from "../../../icons/index.js";
 import { gameUIColors } from "../constants/gameUIColors.js";
+import { monoFont } from "../../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Reusable collapsible section component for Game UI
@@ -90,7 +91,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 11,
     color: gameUIColors.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "700",
     letterSpacing: 2,
     opacity: 0.9
@@ -98,7 +99,7 @@ const styles = StyleSheet.create({
   subtitle: {
     fontSize: 9,
     color: gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     paddingHorizontal: 4,
     marginTop: 2,
     opacity: 0.7
@@ -110,7 +111,7 @@ const styles = StyleSheet.create({
   },
   badgeText: {
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "700"
   }
 });

package/lib/module/ui/gameUI/components/GameUICompactStats.js

@@ -3,6 +3,7 @@
 import { Fragment } from "react";
 import { StyleSheet, Text, View, Animated } from "react-native";
 import { gameUIColors } from "../constants/gameUIColors.js";
+import { monoFont } from "../../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Reusable compact stats display component
@@ -176,13 +177,13 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     color: gameUIColors.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 1.5
   },
   headerSubtitle: {
     fontSize: 8,
     color: gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.7
   },
   statusIndicator: {
@@ -198,7 +199,7 @@ const styles = StyleSheet.create({
   statusText: {
     fontSize: 9,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5
   },
   // Health section
@@ -211,7 +212,7 @@ const styles = StyleSheet.create({
   healthLabel: {
     fontSize: 8,
     color: gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5
   },
   healthBarWrapper: {
@@ -230,7 +231,7 @@ const styles = StyleSheet.create({
   healthPercentage: {
     fontSize: 11,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   // Stats grid
   statsGrid: {
@@ -257,20 +258,20 @@ const styles = StyleSheet.create({
   cardLabel: {
     fontSize: 11,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5,
     color: gameUIColors.primary
   },
   cardSubtitle: {
     fontSize: 8,
     color: gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.7
   },
   statNumber: {
     fontSize: 16,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     minWidth: 28
   },
   valueBlock: {
@@ -279,7 +280,7 @@ const styles = StyleSheet.create({
   percentText: {
     fontSize: 9,
     color: gameUIColors.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   statBar: {
     height: 3,
@@ -305,7 +306,7 @@ const styles = StyleSheet.create({
   bottomStatLabel: {
     fontSize: 7,
     color: gameUIColors.muted,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5,
     marginBottom: 1
   },
@@ -313,7 +314,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     color: gameUIColors.primary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   bottomDivider: {
     width: 1,

package/lib/module/ui/gameUI/components/GameUIIssuesList.js

@@ -4,6 +4,7 @@ import { useState, useCallback } from "react";
 import { StyleSheet, Text, View, TouchableOpacity, Animated } from "react-native";
 import { AlertOctagon, AlertTriangle, ChevronDown, ChevronUp } from "../../../icons/index.js";
 import { gameUIColors } from "../constants/gameUIColors.js";
+import { monoFont } from "../../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Reusable issues list component with expandable details
@@ -186,18 +187,18 @@ const styles = StyleSheet.create({
   issueKey: {
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   issueDesc: {
     fontSize: 10,
     color: gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   hint: {
     fontSize: 9,
     color: gameUIColors.muted,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textAlign: "center",
     marginTop: 8,
     paddingTop: 8,
@@ -226,14 +227,14 @@ const styles = StyleSheet.create({
   detailLabel: {
     fontSize: 10,
     color: gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600",
     width: 70
   },
   detailValue: {
     fontSize: 11,
     color: gameUIColors.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1,
     lineHeight: 16
   },
@@ -248,7 +249,7 @@ const styles = StyleSheet.create({
   fixLabel: {
     fontSize: 10,
     color: gameUIColors.info,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "700",
     marginBottom: 6,
     letterSpacing: 0.5
@@ -256,7 +257,7 @@ const styles = StyleSheet.create({
   fixText: {
     fontSize: 11,
     color: gameUIColors.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 18,
     backgroundColor: gameUIColors.background + "66",
     padding: 8,
@@ -272,7 +273,7 @@ const styles = StyleSheet.create({
   descText: {
     fontSize: 10,
     color: gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 4,
     lineHeight: 14
   }

package/lib/module/ui/gameUI/components/GameUIStatusHeader.js

@@ -3,6 +3,7 @@
 import { StyleSheet, Text, View, Animated } from "react-native";
 import { absoluteFill } from "../../../utils/absoluteFill.js";
 import { gameUIColors } from "../constants/gameUIColors.js";
+import { monoFont } from "../../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Reusable status header component showing system health
@@ -101,7 +102,7 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 13,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 1.5,
     textShadowOffset: {
       width: 0,
@@ -112,7 +113,7 @@ const styles = StyleSheet.create({
   subtitle: {
     fontSize: 10,
     color: gameUIColors.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   badge: {
     paddingHorizontal: 8,
@@ -122,7 +123,7 @@ const styles = StyleSheet.create({
   badgeText: {
     fontSize: 9,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 1
   },
   indicators: {

package/lib/module/ui/index.js

@@ -11,6 +11,9 @@ export * from "./backgrounds/index.js";
 // Semantic design tokens for tool surfaces
 export { toolTheme } from "./toolTheme.js";
 
+// The monospace family, per platform — never write `fontFamily: monoFont`.
+export { monoFont } from "./fonts.js";
+
 // Console UI bits
 export { CyberpunkSectionButton } from "./console/CyberpunkSectionButton.js";
 
@@ -18,4 +21,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/ui/toolTheme.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { buoyColors, gameUIColors } from "./gameUI/constants/gameUIColors.js";
-
+import { monoFont } from "./fonts.js";
 /**
  * Semantic design tokens for dev-tool surfaces — the single documented entry
  * point for custom-tool authors (and, over time, internal tools).
@@ -61,19 +61,19 @@ export const toolTheme = {
       fontWeight: "700",
       color: buoyColors.textMuted,
       letterSpacing: 1.2,
-      fontFamily: "monospace"
+      fontFamily: monoFont
     },
     /** Monospace values (keys, ids, payload snippets). */
     mono: {
       fontSize: 11,
       color: buoyColors.textSecondary,
-      fontFamily: "monospace"
+      fontFamily: monoFont
     },
     /** Timestamps and fine print. */
     small: {
       fontSize: 9,
       color: buoyColors.textMuted,
-      fontFamily: "monospace"
+      fontFamily: monoFont
     }
   },
   /** 4-based spacing scale used across tool surfaces. */