@buoy-gg/shared-ui 7.0.34 → 7.0.36

package/lib/module/sync/valueShape.js

@@ -0,0 +1,153 @@
+"use strict";
+
+/**
+ * A compact type sketch of a runtime value — one implementation, shared by every
+ * adapter that hands data to a model.
+ *
+ * WHY. A model cannot write a well-formed item into a list it has never seen the
+ * shape of, and we were not showing it. Measured on `cart/bag-still-zustand`: the
+ * rendered prompt is 83,000 characters and the words `lineId`, `itemId`,
+ * `sizeId`, `addonIds` and `unitPrice` appear in it ZERO times. Every model
+ * "failing" that case invented a line shape because inventing was the only move
+ * available. The zustand typed-edit guard would have caught the invention — but
+ * only on a list that already holds an item, since it builds its template from
+ * `list[0]`. On an EMPTY list there is no template, the guard has nothing to
+ * compare against, and the invented shape is written silently.
+ *
+ * So the sketch has two jobs, and the second is the one that pays:
+ *
+ *   1. Say what the items in a list look like, so an addition can match.
+ *   2. Say when NOTHING knows — an empty list's item shape is not merely
+ *      unread, it is unknowable from runtime state, and the honest answer is to
+ *      admit that rather than let a guess through unremarked.
+ *
+ * It is deliberately tiny. A sketch of a 120-line bag is the same size as a
+ * sketch of a 2-line one, so unlike the data it survives the engine's 24,000-
+ * character result cap — which is the whole point, because the cases where the
+ * model most needs the shape are exactly the ones where the data got cut off.
+ */
+
+const isPlainObject = v => typeof v === "object" && v !== null && !Array.isArray(v);
+
+/** Beyond this the sketch stops being cheaper to read than the data. */
+const MAX_DEPTH = 3;
+const MAX_KEYS = 24;
+/**
+ * Hard caps on `listShapes`. MAX_DEPTH bounds how DEEP it goes; nothing bounded
+ * how WIDE it went, and it walks every entry of every object at each permitted
+ * level. A store holding a few hundred keyed records therefore produced a
+ * "compact" sketch larger than the data it was standing in for — in a value
+ * that rides in every prompt. Depth is not a size budget.
+ */
+const MAX_LIST_PATHS = 40;
+const MAX_ENTRIES_VISITED = 600;
+
+/**
+ * `{lineId: string, qty: number, addonIds: string[]}` — a one-line type for a
+ * value, built from the value itself.
+ *
+ * An array is described by its FIRST item, because a list whose items disagree
+ * is a list nothing can safely add to and the guard will say so anyway. An empty
+ * array is `unknown[]`, which is the true answer and the one that matters: it
+ * tells a reader that adding to this list is unchecked.
+ */
+export function shapeOf(value, depth = 0) {
+  if (value === null) return "null";
+  if (Array.isArray(value)) {
+    if (!value.length) return "unknown[]";
+    if (depth >= MAX_DEPTH) return "…[]";
+    const inner = shapeOf(value[0], depth + 1);
+    return inner.includes(" ") || inner.endsWith("]") ? `(${inner})[]` : `${inner}[]`;
+  }
+  if (isPlainObject(value)) {
+    if (depth >= MAX_DEPTH) return "{…}";
+    const keys = Object.keys(value);
+    const shown = keys.slice(0, MAX_KEYS);
+    const body = shown.map(k => `${k}: ${shapeOf(value[k], depth + 1)}`).join(", ");
+    const more = keys.length > shown.length ? `, +${keys.length - shown.length} more` : "";
+    return `{${body}${more}}`;
+  }
+  const t = typeof value;
+  return t === "undefined" ? "undefined" : t === "function" ? "function" : t;
+}
+/**
+ * Every list inside a value, with the shape of what goes in it.
+ *
+ * This is what a caller needs before adding to a list, and it is the part that
+ * cannot be recovered from a truncated read of the data itself.
+ *
+ * A list with `item: undefined` is the warning case: it is empty, so its item
+ * shape exists nowhere in the running app — not in the store, not in the
+ * persisted copy, not in this sketch. Anything added to it goes in unchecked.
+ */
+export function listShapes(value, path = "", out = [], depth = 0, budget = {
+  visited: 0
+}) {
+  if (depth > MAX_DEPTH) return out;
+  // Two independent stops: enough lists described, or enough of the value
+  // walked. The second is what a wide-but-shallow store hits.
+  if (out.length >= MAX_LIST_PATHS || budget.visited >= MAX_ENTRIES_VISITED) return out;
+  if (Array.isArray(value)) {
+    const first = value[0];
+    out.push({
+      path: path || "(root)",
+      length: value.length,
+      ...(value.length ? {
+        item: shapeOf(first)
+      } : {})
+    });
+    // One level into the items, so `lines[].addonIds` is reachable too.
+    if (value.length && isPlainObject(first)) {
+      for (const [k, v] of Object.entries(first)) {
+        if (++budget.visited >= MAX_ENTRIES_VISITED) break;
+        listShapes(v, path ? `${path}[].${k}` : `[].${k}`, out, depth + 1, budget);
+      }
+    }
+    return out;
+  }
+  if (isPlainObject(value)) {
+    for (const [k, v] of Object.entries(value)) {
+      if (++budget.visited >= MAX_ENTRIES_VISITED) break;
+      listShapes(v, path ? `${path}.${k}` : k, out, depth + 1, budget);
+    }
+  }
+  return out;
+}
+
+/** True when a sketch stopped early, so a caller can say so rather than imply completeness. */
+export function shapesWereTruncated(value) {
+  const budget = {
+    visited: 0
+  };
+  const out = listShapes(value, "", [], 0, budget);
+  return out.length >= MAX_LIST_PATHS || budget.visited >= MAX_ENTRIES_VISITED;
+}
+
+/**
+ * The lists in a value that a caller could add to WITHOUT any way to know the
+ * item shape. Empty by definition on a healthy value; non-empty means a write
+ * into one of these paths cannot be checked by anything.
+ */
+export function unshapedLists(value) {
+  return listShapes(value).filter(l => l.item === undefined).map(l => l.path);
+}
+
+/**
+ * The sketch an adapter attaches to a read: the value's own type, plus the item
+ * type of every list in it.
+ *
+ * Returns undefined when there is nothing worth saying (a scalar, or an object
+ * holding no lists) so adapters can spread it and add no noise.
+ */
+export function shapeSummary(value) {
+  if (value === undefined) return undefined;
+  const lists = listShapes(value);
+  const shape = shapeOf(value);
+  if (!lists.length && !isPlainObject(value) && !Array.isArray(value)) return undefined;
+  return lists.length ? {
+    shape,
+    lists
+  } : {
+    shape
+  };
+}

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

@@ -23,6 +23,7 @@ import { buoyColors } from "../gameUI/constants/gameUIColors.js";
 import { CompactRow } from "./CompactRow.js";
 import { Clock, Zap } from "../../icons/index.js";
 import { RelativeTime } from "../../utils/time/RelativeTime.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ChangeRow({
   statusColor,
@@ -97,7 +98,7 @@ const styles = StyleSheet.create({
   badgeText: {
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   iconBadge: {
     paddingHorizontal: 4

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

@@ -11,6 +11,7 @@
 import { memo, useCallback } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Modal, Pressable } from "react-native";
 import { gameUIColors } from "../gameUI/index.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A modal hint that teaches users about iOS Simulator clipboard sync
@@ -125,7 +126,7 @@ const styles = StyleSheet.create({
     textAlign: "center"
   },
   menuPath: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 12,
     color: gameUIColors.primary,
     fontWeight: "600"

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

@@ -3,6 +3,7 @@
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { ChevronDown, ChevronRight } from "../../icons/index.js";
 import { night } from "../night/nightTheme.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function CompactRow({
   statusDotColor,
@@ -221,7 +222,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12
   },
   queryHash: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 12,
     color: night.color.text,
     lineHeight: 16
@@ -265,6 +266,6 @@ const styles = StyleSheet.create({
   bottomRightText: {
     fontSize: 9,
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

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

@@ -5,6 +5,7 @@ import { View, Text, StyleSheet, ScrollView, TouchableOpacity, TextInput } from
 import { Search, Edit3, Check, X } from "../../icons/index.js";
 import { gameUIColors } from "../gameUI/index.js";
 import { CopyButton } from "./CopyButton.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function DataInspector({
   data,
@@ -264,14 +265,14 @@ const styles = StyleSheet.create({
     maxHeight: 300
   },
   codeText: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 11,
     color: gameUIColors.text,
     padding: 12,
     lineHeight: 16
   },
   editor: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 11,
     color: gameUIColors.text,
     padding: 12,

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

@@ -5,6 +5,7 @@ import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-nati
 import { gameUIColors } from "../gameUI/index.js";
 import { ModalHeader } from "./ModalHeader.js";
 import { CopyButton } from "./CopyButton.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function DetailView({
   children,
@@ -293,7 +294,7 @@ const styles = StyleSheet.create({
   },
   dataText: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     color: gameUIColors.text
   },
   statusBar: {

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

@@ -8,6 +8,7 @@ import { FilterList, AddFilterInput, AddFilterButton } from "./FilterComponents.
 import { useFilterManager } from "../../hooks/useFilterManager.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
 import { night } from "../night/nightTheme.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function DynamicFilterView({
   sections = [],
@@ -489,7 +490,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 3,
     marginBottom: 1,
     textShadowColor: "rgba(0, 0, 0, 0.2)",
@@ -503,7 +504,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "500",
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 3,
     marginBottom: 1
   },
@@ -547,7 +548,7 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: "700",
     letterSpacing: 0.3,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   activeFiltersSection: {
     backgroundColor: night.color.surface,
@@ -686,7 +687,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginRight: 8
   },
   howItWorksSection: {
@@ -705,7 +706,7 @@ const styles = StyleSheet.create({
     marginBottom: 12,
     marginTop: 8,
     paddingHorizontal: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   examplesContainer: {
     paddingTop: 8,
@@ -718,14 +719,14 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 16
   },
   previewSection: {

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

@@ -23,6 +23,7 @@ import { Filter, X } from "../../icons/index.js";
 import { night } from "../night/nightTheme.js";
 import { SectionHeader } from "./SectionHeader.js";
 import { AddFilterButton, AddFilterInput } from "./FilterComponents.js";
+import { monoFont } from "../fonts.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /** True if any active pattern hides this entity. */
 function isHidden(entity, ignoredPatterns) {
@@ -264,7 +265,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   entityTextHidden: {
     color: night.color.textTertiary,
@@ -274,12 +275,12 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "500",
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   addLabel: {
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   addInputWrapper: {
     paddingHorizontal: 16,
@@ -306,7 +307,7 @@ const styles = StyleSheet.create({
   patternText: {
     flex: 1,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     color: night.color.text
   },
   emptyText: {
@@ -315,7 +316,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 8,
     paddingBottom: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   howItWorksText: {
     fontSize: 11,
@@ -323,7 +324,7 @@ const styles = StyleSheet.create({
     lineHeight: 16,
     marginTop: 8,
     paddingHorizontal: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   examplesContainer: {
     paddingTop: 8,
@@ -337,14 +338,14 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 16
   }
 });

package/lib/module/ui/components/EventHistoryViewer/CompareBar.js

@@ -12,11 +12,12 @@ import React, { memo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
 import { ChevronLeft, ChevronRight } from "../../../icons/lucide-icons.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { monoFont } from "../../fonts.js";
 /**
  * CompareBar displays a side-by-side comparison of two events
  * with optional navigation controls for any-to-any compare mode.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const CompareBar = /*#__PURE__*/memo(function CompareBar({
   leftEvent,
   rightEvent,
@@ -150,7 +151,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "700",
     letterSpacing: 0.5,
     textTransform: "uppercase"
@@ -185,17 +186,17 @@ const styles = StyleSheet.create({
   index: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   time: {
     fontSize: 11,
     color: macOSColors.text.primary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   relative: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   divider: {
     width: 1,

package/lib/module/ui/components/EventHistoryViewer/DiffModeTabs.js

@@ -11,11 +11,12 @@
 import React, { memo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { monoFont } from "../../fonts.js";
 /**
  * DiffModeTabs displays a horizontal tab bar for switching
  * between different diff visualization modes.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const DiffModeTabs = /*#__PURE__*/memo(function DiffModeTabs({
   tabs,
   activeTab,
@@ -79,7 +80,7 @@ const styles = StyleSheet.create({
   },
   tabText: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600",
     color: macOSColors.text.secondary,
     letterSpacing: 0.5

package/lib/module/ui/components/EventHistoryViewer/EventPickerModal.js

@@ -13,11 +13,12 @@ import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-nati
 import { absoluteFill } from "../../../utils/absoluteFill.js";
 import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
 import { X } from "../../../icons/lucide-icons.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { monoFont } from "../../fonts.js";
 /**
  * EventPickerModal displays a modal for selecting events
  * with color-coded styling based on position (left/right).
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const EventPickerModal = /*#__PURE__*/memo(function EventPickerModal({
   isOpen,
   onClose,
@@ -118,7 +119,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 13,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase",
     marginBottom: 8,
     letterSpacing: 0.6
@@ -185,18 +186,18 @@ const styles = StyleSheet.create({
   itemIndex: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     width: 40
   },
   itemTime: {
     fontSize: 11,
     color: macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   itemRelative: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

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,9 @@ function CollapsedPeek({
   width,
   height,
   customContent,
-  label
+  label,
+  testID,
+  attention
 }) {
   // When progress=0 (collapsed): peek is visible (opacity=1, scale=1)
   // When progress=1 (expanded): peek is hidden (opacity=0, scale=0.9)
@@ -48,16 +50,17 @@ function CollapsedPeek({
         scale
       }]
     }],
-    children: /*#__PURE__*/_jsx(TouchableOpacity, {
+    children: /*#__PURE__*/_jsxs(TouchableOpacity, {
       onPress: onPress,
       activeOpacity: 0.8,
       style: [styles.peekButton, {
         width,
         height
       }],
-      accessibilityLabel: label || `Expand options`,
+      accessibilityLabel: attention?.label ? `${label || "Expand options"} — ${attention.label}` : label || `Expand options`,
       accessibilityRole: "button",
-      children: customContent || /*#__PURE__*/_jsxs(_Fragment, {
+      testID: testID,
+      children: [customContent || /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(ChevronUp, {
           size: 12,
           color: buoyColors.textMuted,
@@ -66,7 +69,17 @@ function CollapsedPeek({
           style: styles.peekCount,
           children: count
         })]
-      })
+      }), attention ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        testID: testID ? `${testID}-attention` : undefined,
+        style: [styles.peekAttention, {
+          backgroundColor: attention.color
+        }],
+        children: attention.glyph ? /*#__PURE__*/_jsx(Text, {
+          style: styles.peekAttentionGlyph,
+          children: attention.glyph
+        }) : null
+      }) : null]
     })
   });
 }
@@ -82,7 +95,8 @@ function ExpandedWrapper({
   width,
   expandedHeight,
   isExpanded,
-  style
+  style,
+  collapseTestID
 }) {
   // Animate height from 0 to full height
   const animatedHeight = progress.interpolate({
@@ -105,6 +119,7 @@ function ExpandedWrapper({
         style: styles.collapseButton,
         accessibilityLabel: "Collapse",
         accessibilityRole: "button",
+        testID: collapseTestID,
         children: /*#__PURE__*/_jsx(ChevronUp, {
           size: 12,
           color: buoyColors.textMuted,
@@ -134,10 +149,13 @@ export function ExpandablePopover({
   defaultExpanded = false,
   collapsedContent,
   collapsedLabel,
+  attention = null,
   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 +258,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 +278,9 @@ export function ExpandablePopover({
         width: width,
         height: peekHeight,
         customContent: collapsedContent,
-        label: collapsedLabel
+        label: collapsedLabel,
+        testID: testID,
+        attention: attention
       })
     })]
   });
@@ -270,6 +291,25 @@ export function ExpandablePopover({
 // ============================================================================
 
 const styles = StyleSheet.create({
+  peekAttention: {
+    position: "absolute",
+    top: 2,
+    right: 2,
+    minWidth: 11,
+    height: 11,
+    borderRadius: 6,
+    paddingHorizontal: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1.5,
+    borderColor: "#0C0C0C"
+  },
+  peekAttentionGlyph: {
+    color: "#000",
+    fontSize: 8,
+    fontWeight: "800",
+    lineHeight: 9
+  },
   container: {
     overflow: "visible",
     zIndex: 1000