@buoy-gg/highlight-updates 7.0.26 → 7.0.28

package/lib/commonjs/highlight-updates/components/RenderHistoryViewer.js

@@ -93,7 +93,7 @@ function RenderHistoryViewer({
       style: styles.emptyContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
         size: 32,
-        color: _sharedUi.buoyColors.textMuted
+        color: _sharedUi.night.color.textTertiary
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyTitle,
         children: "No Render History"
@@ -112,7 +112,7 @@ function RenderHistoryViewer({
         style: styles.lockedBanner,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
           size: 14,
-          color: _sharedUi.buoyColors.warning
+          color: _sharedUi.night.color.warning
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: styles.lockedBannerText,
           children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'render' : 'renders', " locked"]
@@ -130,14 +130,14 @@ function RenderHistoryViewer({
             style: styles.viewToggleContent,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
               size: 16,
-              color: activeView === "current" ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
+              color: activeView === "current" ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.viewToggleLabel, activeView === "current" && styles.viewToggleLabelActive],
               children: "CURRENT STATE"
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
             style: [styles.viewToggleDescription, activeView === "current" && {
-              color: _sharedUi.buoyColors.text
+              color: _sharedUi.night.color.text
             }],
             children: ["View render #", currentEvent?.renderNumber ?? 0, " details"]
           })]
@@ -147,7 +147,7 @@ function RenderHistoryViewer({
             style: styles.viewToggleContent,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.GitBranch, {
               size: 16,
-              color: _sharedUi.buoyColors.textMuted
+              color: _sharedUi.night.color.textTertiary
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.viewToggleLabel, styles.viewToggleLabelDisabled],
               children: "DIFF VIEW"
@@ -160,7 +160,7 @@ function RenderHistoryViewer({
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.viewToggleDescription, {
-              color: _sharedUi.buoyColors.textMuted
+              color: _sharedUi.night.color.textTertiary
             }],
             children: "Compare renders side by side (coming soon)"
           })]
@@ -256,7 +256,7 @@ function CurrentStateView({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
           icon: _sharedUi.Database,
-          color: _sharedUi.buoyColors.primary,
+          color: _sharedUi.night.color.accent,
           size: 12
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
           children: "CAPTURED PROPS"
@@ -497,7 +497,8 @@ function RenderHistoryFooter({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   emptyContainer: {
     flex: 1,
@@ -509,11 +510,11 @@ const styles = _reactNative.StyleSheet.create({
   emptyTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   emptyText: {
     fontSize: 13,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     textAlign: "center",
     lineHeight: 18
   },
@@ -524,22 +525,22 @@ const styles = _reactNative.StyleSheet.create({
   },
   viewToggleCard: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 10,
     gap: 4
   },
   viewToggleCardActive: {
-    borderColor: _sharedUi.buoyColors.primary,
-    backgroundColor: _sharedUi.buoyColors.primary + "10"
+    borderColor: _sharedUi.night.color.accentBorderStrong,
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   viewToggleCardDisabled: {
     opacity: 0.5
   },
   todoBadge: {
-    backgroundColor: _sharedUi.buoyColors.textMuted + "30",
+    backgroundColor: _sharedUi.night.color.fillSecondary,
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 4,
@@ -548,7 +549,7 @@ const styles = _reactNative.StyleSheet.create({
   todoBadgeText: {
     fontSize: 9,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     letterSpacing: 0.3
   },
   viewToggleContent: {
@@ -559,18 +560,18 @@ const styles = _reactNative.StyleSheet.create({
   viewToggleLabel: {
     fontSize: 10,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     letterSpacing: 0.5
   },
   viewToggleLabelActive: {
-    color: _sharedUi.buoyColors.primary
+    color: _sharedUi.night.color.accent
   },
   viewToggleLabelDisabled: {
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   viewToggleDescription: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     marginTop: 2
   },
   contentScroll: {
@@ -586,7 +587,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   noEventText: {
     fontSize: 13,
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   currentStateContainer: {
     gap: 12
@@ -595,10 +596,10 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 12
   },
   eventHeaderLeft: {
@@ -607,11 +608,11 @@ const styles = _reactNative.StyleSheet.create({
   eventTitle: {
     fontSize: 15,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   eventTime: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   eventBadge: {
@@ -633,10 +634,10 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   section: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden"
   },
   sectionContent: {
@@ -653,12 +654,12 @@ const styles = _reactNative.StyleSheet.create({
   changedListTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     marginBottom: 6
   },
   changedItem: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     marginBottom: 3,
     paddingLeft: 8
@@ -669,8 +670,9 @@ const styles = _reactNative.StyleSheet.create({
   propsJson: {
     fontSize: 11,
     fontFamily: "monospace",
-    color: _sharedUi.buoyColors.text,
-    backgroundColor: _sharedUi.buoyColors.input,
+    color: _sharedUi.night.color.text,
+    // Inset code box — the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     padding: 10,
     borderRadius: 6
   },
@@ -679,10 +681,10 @@ const styles = _reactNative.StyleSheet.create({
   },
   compareBar: {
     flexDirection: "row",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 10
   },
   compareSide: {
@@ -716,11 +718,11 @@ const styles = _reactNative.StyleSheet.create({
   compareIndex: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   compareTime: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   compareDivider: {
@@ -730,19 +732,19 @@ const styles = _reactNative.StyleSheet.create({
   },
   compareArrow: {
     fontSize: 16,
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   diffSummary: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 12
   },
   diffSummaryTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     marginBottom: 8
   },
   diffChanges: {
@@ -756,22 +758,22 @@ const styles = _reactNative.StyleSheet.create({
   diffChangeIcon: {
     fontSize: 12,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.warning,
+    color: _sharedUi.night.color.warning,
     fontFamily: "monospace"
   },
   diffChangeKey: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   diffNoChanges: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontStyle: "italic"
   },
   diffPlaceholder: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontStyle: "italic",
     textAlign: "center",
     padding: 16
@@ -779,10 +781,10 @@ const styles = _reactNative.StyleSheet.create({
   // Diff mode tabs
   diffModeTabs: {
     flexDirection: "row",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 4,
     gap: 4
   },
@@ -794,7 +796,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center"
   },
   diffModeTabActive: {
-    backgroundColor: _sharedUi.buoyColors.primary + "20"
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   diffModeTabDisabled: {
     opacity: 0.4
@@ -802,14 +804,14 @@ const styles = _reactNative.StyleSheet.create({
   diffModeTabText: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     letterSpacing: 0.5
   },
   diffModeTabTextActive: {
-    color: _sharedUi.buoyColors.primary
+    color: _sharedUi.night.color.accent
   },
   diffModeTabTextDisabled: {
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   // Cause diff styles
   causeDiffContainer: {
@@ -824,27 +826,27 @@ const styles = _reactNative.StyleSheet.create({
   causeDiffLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     minWidth: 80
   },
   causeDiffValue: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     fontWeight: "500"
   },
   diffChangesTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     marginBottom: 6
   },
   // Tree diff container
   treeDiffContainer: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden",
     minHeight: 150
   },
@@ -856,11 +858,11 @@ const styles = _reactNative.StyleSheet.create({
   noDiffDataTitle: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   noDiffDataText: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     textAlign: "center",
     lineHeight: 18
   },
@@ -872,19 +874,19 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: _sharedUi.buoyColors.warning + "15",
+    backgroundColor: _sharedUi.night.color.warningSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.warning + "30",
+    borderColor: _sharedUi.night.color.warning + "30",
     gap: 8
   },
   lockedBannerText: {
-    color: _sharedUi.buoyColors.warning,
+    color: _sharedUi.night.color.warning,
     fontSize: 13,
     fontWeight: "500"
   },
   lockedBannerSubtext: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12
   }
 });

package/lib/commonjs/highlight-updates/components/RenderListItem.js

@@ -123,7 +123,7 @@ function RenderListItemInner({
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
       size: 16,
-      color: _sharedUi.buoyColors.textMuted
+      color: _sharedUi.night.color.textTertiary
     })]
   });
 }
@@ -145,10 +145,10 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12,
     marginHorizontal: 12,
     marginBottom: 6,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
+    borderColor: _sharedUi.night.color.border
   },
   colorIndicator: {
     width: 4,
@@ -175,17 +175,17 @@ const styles = _reactNative.StyleSheet.create({
   viewType: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   nativeType: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     marginTop: 1
   },
   accessibilityLabel: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontStyle: "italic",
     marginTop: 1
   },
@@ -212,7 +212,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   timing: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "500",
     flexShrink: 0
   }

package/lib/commonjs/highlight-updates/components/RendersCopySettingsView.js

@@ -196,7 +196,7 @@ function RendersCopySettingsView({
       totalRenders
     } = (0, _rendersExportFormatter.getExportSummary)(previewRenders);
     if (!isPreviewExpanded) {
-      const warningColor = sizeWarningLevel === "danger" ? _sharedUi.macOSColors.semantic.error : sizeWarningLevel === "warning" ? _sharedUi.macOSColors.semantic.warning : _sharedUi.macOSColors.text.secondary;
+      const warningColor = sizeWarningLevel === "danger" ? _sharedUi.night.color.danger : sizeWarningLevel === "warning" ? _sharedUi.night.color.warning : _sharedUi.night.color.textSecondary;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.collapsedPreview,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
@@ -206,7 +206,7 @@ function RendersCopySettingsView({
             style: styles.expandButtonContent,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Eye, {
               size: 16,
-              color: _sharedUi.macOSColors.semantic.info
+              color: _sharedUi.night.color.info
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: styles.expandButtonTextContainer,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -218,7 +218,7 @@ function RendersCopySettingsView({
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
               size: 16,
-              color: _sharedUi.macOSColors.text.muted
+              color: _sharedUi.night.color.textTertiary
             })]
           })
         }), sizeWarningLevel !== "none" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -245,7 +245,7 @@ function RendersCopySettingsView({
           children: "Hide Preview"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronUp, {
           size: 14,
-          color: _sharedUi.macOSColors.text.secondary
+          color: _sharedUi.night.color.textSecondary
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
         style: styles.previewScroll,
@@ -313,7 +313,7 @@ function RendersCopySettingsView({
         id: "preset::custom",
         label: "Custom",
         icon: _sharedUi.Settings,
-        color: _sharedUi.macOSColors.text.secondary,
+        color: _sharedUi.night.color.textSecondary,
         value: "custom",
         isActive: activePreset === null,
         description: "User-configured"
@@ -483,10 +483,10 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   expandButton: {
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     padding: 12
   },
   expandButtonContent: {
@@ -500,11 +500,11 @@ const styles = _reactNative.StyleSheet.create({
   expandButtonTitle: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary
+    color: _sharedUi.night.color.text
   },
   expandButtonSubtitle: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     marginTop: 2
   },
   collapseButton: {
@@ -514,15 +514,15 @@ const styles = _reactNative.StyleSheet.create({
     gap: 6,
     paddingVertical: 8,
     marginBottom: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   collapseButtonText: {
     fontSize: 12,
     fontWeight: "500",
-    color: _sharedUi.macOSColors.text.secondary
+    color: _sharedUi.night.color.textSecondary
   },
   sizeWarning: {
     flexDirection: "row",
@@ -530,14 +530,14 @@ const styles = _reactNative.StyleSheet.create({
     gap: 6,
     paddingHorizontal: 10,
     paddingVertical: 6,
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    backgroundColor: _sharedUi.night.color.warningSoft,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.warning + "30"
+    borderColor: _sharedUi.night.color.warning + "30"
   },
   sizeWarningDanger: {
-    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
-    borderColor: _sharedUi.macOSColors.semantic.error + "30"
+    backgroundColor: _sharedUi.night.color.dangerSoft,
+    borderColor: _sharedUi.night.color.danger + "30"
   },
   sizeWarningText: {
     fontSize: 11,
@@ -550,13 +550,13 @@ const styles = _reactNative.StyleSheet.create({
   previewText: {
     fontFamily: "monospace",
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     lineHeight: 18
   },
   statusLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     marginRight: 8
   }
 });

package/lib/commonjs/highlight-updates/components/StatsDisplay.js

@@ -39,10 +39,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
     style: styles.headerChip,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Activity, {
       size: 12,
-      color: _sharedUi.buoyColors.primary
+      color: _sharedUi.night.color.accent
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.headerChipValue, {
-        color: _sharedUi.buoyColors.primary
+        color: _sharedUi.night.color.accent
       }],
       children: stats.totalComponents
     })]
@@ -54,12 +54,12 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 4,
-    backgroundColor: _sharedUi.buoyColors.hover,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     paddingHorizontal: 8,
     paddingVertical: 5,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
+    borderColor: _sharedUi.night.color.border
   },
   headerChipValue: {
     fontSize: 12,

package/lib/commonjs/highlight-updates/utils/HighlightUpdatesController.js

@@ -34,6 +34,8 @@ exports.default = void 0;
 var _ProfilerInterceptor = require("./ProfilerInterceptor");
 var _reactNative = require("react-native");
 var _RenderTracker = require("./RenderTracker");
+var _screenElements = require("./screenElements");
+var _tapMatch = require("./tapMatch");
 var _PerformanceLogger = require("./PerformanceLogger");
 var _RenderCauseDetector = require("./RenderCauseDetector");
 var _sharedUi = require("@buoy-gg/shared-ui");
@@ -1169,10 +1171,60 @@ async function locateComponent(params) {
   const margin = typeof params.margin === "number" ? params.margin : 12;
   const renders = _RenderTracker.RenderTracker.getRenders();
   if (renders.length === 0) {
+    const described = await (0, _screenElements.describeScreen)();
+    const q = (params.query ?? "").trim().toLowerCase();
+    let best;
+    for (const el of described.elements) {
+      if (params.nativeTag != null && el.nativeTag === params.nativeTag) {
+        best = {
+          el,
+          score: 1000
+        };
+        break;
+      }
+      const score = (0, _tapMatch.scoreTapMatch)({
+        nativeTag: el.nativeTag,
+        testID: el.testID,
+        label: el.label,
+        text: el.text,
+        name: el.name,
+        tap: el.tap
+      }, {
+        query: q || undefined,
+        nativeTag: params.nativeTag
+      });
+      if (score <= 0) continue;
+      if (!best || score > best.score) best = {
+        el,
+        score
+      };
+    }
+    if (!best?.el.frame) {
+      return {
+        matched: false,
+        reason: "no-match",
+        candidates: []
+      };
+    }
+    const win = described.screen;
+    const f = best.el.frame;
     return {
-      matched: false,
-      reason: "no-renders",
-      candidates: []
+      matched: true,
+      live: true,
+      rect: {
+        x: f.x * win.width,
+        y: f.y * win.height,
+        width: f.width * win.width,
+        height: f.height * win.height
+      },
+      scale: _reactNative.PixelRatio.get(),
+      screen: {
+        width: win.width,
+        height: win.height
+      },
+      nativeTag: best.el.nativeTag ?? undefined,
+      componentName: best.el.name,
+      testID: best.el.testID
     };
   }