@buoy-gg/highlight-updates 7.0.26 → 7.0.28

package/lib/module/highlight-updates/components/HighlightFilterView.js

@@ -10,7 +10,7 @@
 
 import React, { useState, useCallback } from "react";
 import { View, Text, TouchableOpacity, TextInput, StyleSheet, ScrollView, Modal, Pressable, Switch } from "react-native";
-import { Eye, Filter, Plus, X, Box, Settings, Hash, SectionHeader, buoyColors } from "@buoy-gg/shared-ui";
+import { Eye, Filter, Plus, X, Box, Settings, Hash, SectionHeader, night } from "@buoy-gg/shared-ui";
 import { IdentifierBadge, IDENTIFIER_CONFIG } from "./IdentifierBadge";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Use shared identifier config (FilterType is a subset of IdentifierType)
@@ -54,7 +54,7 @@ function TypePicker({
       style: styles.typePickerCancel,
       children: /*#__PURE__*/_jsx(X, {
         size: 16,
-        color: buoyColors.textMuted
+        color: night.color.textTertiary
       })
     })]
   });
@@ -86,7 +86,7 @@ function PatternInput({
       onChangeText: setValue,
       onSubmitEditing: handleSubmit,
       placeholder: "Enter pattern...",
-      placeholderTextColor: buoyColors.textMuted,
+      placeholderTextColor: night.color.placeholder,
       style: styles.patternInput,
       autoFocus: true,
       returnKeyType: "done",
@@ -108,7 +108,7 @@ function PatternInput({
       style: styles.cancelButton,
       children: /*#__PURE__*/_jsx(X, {
         size: 16,
-        color: buoyColors.textMuted
+        color: night.color.textTertiary
       })
     })]
   });
@@ -142,7 +142,7 @@ function PatternChip({
       children: pattern.value
     }), /*#__PURE__*/_jsx(X, {
       size: 12,
-      color: buoyColors.textMuted,
+      color: night.color.textTertiary,
       style: styles.patternChipX
     })]
   });
@@ -154,7 +154,7 @@ function PatternChip({
 const ALL_CATEGORY_CONFIG = {
   label: "All",
   shortLabel: "All",
-  color: buoyColors.textSecondary,
+  color: night.color.textSecondary,
   icon: Box
 };
 
@@ -383,13 +383,13 @@ export function HighlightFilterView({
           children: [/*#__PURE__*/_jsxs(SectionHeader, {
             children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
               icon: Eye,
-              color: buoyColors.success,
+              color: night.color.accent,
               size: 12
             }), /*#__PURE__*/_jsx(SectionHeader.Title, {
               children: "INCLUDE ONLY"
             }), filters.includePatterns.length > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
               count: filters.includePatterns.length,
-              color: buoyColors.success
+              color: night.color.accent
             })]
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.sectionDescription,
@@ -414,15 +414,15 @@ export function HighlightFilterView({
               onCancel: () => setIncludeInputType(null)
             }) : /*#__PURE__*/_jsxs(TouchableOpacity, {
               style: [styles.addButton, {
-                borderColor: buoyColors.success + "40"
+                borderColor: night.color.accentBorderStrong
               }],
               onPress: () => setShowIncludeTypePicker(true),
               children: [/*#__PURE__*/_jsx(Plus, {
                 size: 14,
-                color: buoyColors.success
+                color: night.color.accent
               }), /*#__PURE__*/_jsx(Text, {
                 style: [styles.addButtonText, {
-                  color: buoyColors.success
+                  color: night.color.accent
                 }],
                 children: "Add include pattern"
               })]
@@ -433,13 +433,13 @@ export function HighlightFilterView({
           children: [/*#__PURE__*/_jsxs(SectionHeader, {
             children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
               icon: Filter,
-              color: buoyColors.primary,
+              color: night.color.accent,
               size: 12
             }), /*#__PURE__*/_jsx(SectionHeader.Title, {
               children: "EXCLUDE"
             }), filters.excludePatterns.length > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
               count: filters.excludePatterns.length,
-              color: buoyColors.primary
+              color: night.color.accent
             })]
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.sectionDescription,
@@ -464,15 +464,15 @@ export function HighlightFilterView({
               onCancel: () => setExcludeInputType(null)
             }) : /*#__PURE__*/_jsxs(TouchableOpacity, {
               style: [styles.addButton, {
-                borderColor: buoyColors.primary + "40"
+                borderColor: night.color.accentBorderStrong
               }],
               onPress: () => setShowExcludeTypePicker(true),
               children: [/*#__PURE__*/_jsx(Plus, {
                 size: 14,
-                color: buoyColors.primary
+                color: night.color.accent
               }), /*#__PURE__*/_jsx(Text, {
                 style: [styles.addButtonText, {
-                  color: buoyColors.primary
+                  color: night.color.accent
                 }],
                 children: "Add exclude pattern"
               })]
@@ -483,13 +483,13 @@ export function HighlightFilterView({
           children: [/*#__PURE__*/_jsxs(SectionHeader, {
             children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
               icon: Hash,
-              color: buoyColors.warning,
+              color: night.color.warning,
               size: 12
             }), /*#__PURE__*/_jsx(SectionHeader.Title, {
               children: "RENDER COUNT RANGE"
             }), (filters.minRenderCount !== undefined || filters.maxRenderCount !== undefined) && /*#__PURE__*/_jsx(SectionHeader.Badge, {
               count: 1,
-              color: buoyColors.warning
+              color: night.color.warning
             })]
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.sectionDescription,
@@ -519,7 +519,7 @@ export function HighlightFilterView({
                     }
                   },
                   placeholder: "0",
-                  placeholderTextColor: buoyColors.textMuted,
+                  placeholderTextColor: night.color.placeholder,
                   style: styles.renderCountInput,
                   keyboardType: "number-pad",
                   returnKeyType: "done"
@@ -547,7 +547,7 @@ export function HighlightFilterView({
                     }
                   },
                   placeholder: "\u221E",
-                  placeholderTextColor: buoyColors.textMuted,
+                  placeholderTextColor: night.color.placeholder,
                   style: styles.renderCountInput,
                   keyboardType: "number-pad",
                   returnKeyType: "done"
@@ -561,7 +561,7 @@ export function HighlightFilterView({
               }),
               children: [/*#__PURE__*/_jsx(X, {
                 size: 12,
-                color: buoyColors.warning
+                color: night.color.warning
               }), /*#__PURE__*/_jsx(Text, {
                 style: styles.clearRangeButtonText,
                 children: "Clear Range"
@@ -573,7 +573,7 @@ export function HighlightFilterView({
           children: [/*#__PURE__*/_jsxs(SectionHeader, {
             children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
               icon: Box,
-              color: buoyColors.textSecondary,
+              color: night.color.textSecondary,
               size: 12
             }), /*#__PURE__*/_jsx(SectionHeader.Title, {
               children: "DETECTED ITEMS"
@@ -675,10 +675,10 @@ export function HighlightFilterView({
                     onPress: handlePopupInclude,
                     children: [/*#__PURE__*/_jsx(Eye, {
                       size: 16,
-                      color: buoyColors.success
+                      color: night.color.accent
                     }), /*#__PURE__*/_jsx(Text, {
                       style: [styles.actionPopupButtonText, {
-                        color: buoyColors.success
+                        color: night.color.accent
                       }],
                       children: "Include Only"
                     })]
@@ -687,10 +687,10 @@ export function HighlightFilterView({
                     onPress: handlePopupExclude,
                     children: [/*#__PURE__*/_jsx(Filter, {
                       size: 16,
-                      color: buoyColors.primary
+                      color: night.color.accent
                     }), /*#__PURE__*/_jsx(Text, {
                       style: [styles.actionPopupButtonText, {
-                        color: buoyColors.primary
+                        color: night.color.accent
                       }],
                       children: "Exclude"
                     })]
@@ -711,7 +711,7 @@ export function HighlightFilterView({
           children: [/*#__PURE__*/_jsxs(SectionHeader, {
             children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
               icon: Filter,
-              color: buoyColors.textMuted,
+              color: night.color.textTertiary,
               size: 12
             }), /*#__PURE__*/_jsx(SectionHeader.Title, {
               children: "HOW FILTERS WORK"
@@ -742,7 +742,7 @@ export function HighlightFilterView({
           children: [/*#__PURE__*/_jsxs(SectionHeader, {
             children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
               icon: Settings,
-              color: buoyColors.textMuted,
+              color: night.color.textTertiary,
               size: 12
             }), /*#__PURE__*/_jsx(SectionHeader.Title, {
               children: "SETTINGS"
@@ -770,10 +770,10 @@ export function HighlightFilterView({
                     }
                   },
                   trackColor: {
-                    false: buoyColors.input,
-                    true: buoyColors.success + "80"
+                    false: night.color.surfaceElevated,
+                    true: night.color.accent + "80"
                   },
-                  thumbColor: settings.showRenderCount ? buoyColors.success : buoyColors.textMuted
+                  thumbColor: settings.showRenderCount ? night.color.accent : night.color.knob
                 })]
               }), /*#__PURE__*/_jsx(Text, {
                 style: styles.settingDescription,
@@ -792,10 +792,10 @@ export function HighlightFilterView({
                     trackRenderCauses: value
                   }),
                   trackColor: {
-                    false: buoyColors.input,
-                    true: buoyColors.warning + "80"
+                    false: night.color.surfaceElevated,
+                    true: night.color.warning + "80"
                   },
-                  thumbColor: settings.trackRenderCauses ? buoyColors.warning : buoyColors.textMuted,
+                  thumbColor: settings.trackRenderCauses ? night.color.warning : night.color.knob,
                   disabled: !settings.showRenderCount
                 })]
               }), /*#__PURE__*/_jsxs(Text, {
@@ -818,10 +818,10 @@ export function HighlightFilterView({
                     enableRenderHistory: value
                   }),
                   trackColor: {
-                    false: buoyColors.input,
-                    true: buoyColors.primary + "80"
+                    false: night.color.surfaceElevated,
+                    true: night.color.accent + "80"
                   },
-                  thumbColor: settings.enableRenderHistory ? buoyColors.primary : buoyColors.textMuted,
+                  thumbColor: settings.enableRenderHistory ? night.color.accent : night.color.knob,
                   disabled: !settings.trackRenderCauses
                 })]
               }), /*#__PURE__*/_jsxs(Text, {
@@ -842,7 +842,7 @@ export function HighlightFilterView({
                   style: styles.settingValue,
                   children: /*#__PURE__*/_jsx(Text, {
                     style: [styles.settingValueText, settings.debugLogLevel !== "off" && {
-                      color: buoyColors.warning
+                      color: night.color.warning
                     }],
                     children: DEBUG_LOG_LEVEL_PRESETS.find(p => p.value === settings.debugLogLevel)?.label || "Off"
                   })
@@ -854,15 +854,15 @@ export function HighlightFilterView({
                 style: styles.batchSizePresets,
                 children: DEBUG_LOG_LEVEL_PRESETS.map(preset => /*#__PURE__*/_jsx(TouchableOpacity, {
                   style: [styles.batchSizePreset, settings.debugLogLevel === preset.value && styles.batchSizePresetActive, preset.value !== "off" && settings.debugLogLevel === preset.value && {
-                    backgroundColor: buoyColors.warning + "30",
-                    borderColor: buoyColors.warning
+                    backgroundColor: night.color.warningSoft,
+                    borderColor: night.color.warning
                   }],
                   onPress: () => onSettingsChange({
                     debugLogLevel: preset.value
                   }),
                   children: /*#__PURE__*/_jsx(Text, {
                     style: [styles.batchSizePresetText, settings.debugLogLevel === preset.value && styles.batchSizePresetTextActive, preset.value !== "off" && settings.debugLogLevel === preset.value && {
-                      color: buoyColors.warning
+                      color: night.color.warning
                     }],
                     children: preset.label
                   })
@@ -901,6 +901,28 @@ export function HighlightFilterView({
                   })
                 }, preset.value))
               })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: [styles.settingItem, styles.settingItemSpaced],
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.settingHeader,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.settingLabel,
+                  children: "Show host views"
+                }), /*#__PURE__*/_jsx(Switch, {
+                  value: !!settings.showHostViews,
+                  onValueChange: value => onSettingsChange({
+                    showHostViews: value
+                  }),
+                  trackColor: {
+                    false: night.color.surfaceElevated,
+                    true: night.color.accent + "80"
+                  },
+                  thumbColor: settings.showHostViews ? night.color.accent : night.color.knob
+                })]
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Include anonymous View / RCTView / Text hosts. Off by default so the list is named composites (what actually re-rendered)."
+              })]
             }), /*#__PURE__*/_jsxs(View, {
               style: [styles.settingItem, styles.settingItemSpaced],
               children: [/*#__PURE__*/_jsxs(View, {
@@ -914,10 +936,10 @@ export function HighlightFilterView({
                     excludeDevTools: !value
                   }),
                   trackColor: {
-                    false: buoyColors.input,
-                    true: buoyColors.primary + "80"
+                    false: night.color.surfaceElevated,
+                    true: night.color.accent + "80"
                   },
-                  thumbColor: !settings.excludeDevTools ? buoyColors.primary : buoyColors.textMuted
+                  thumbColor: !settings.excludeDevTools ? night.color.accent : night.color.knob
                 })]
               }), /*#__PURE__*/_jsxs(Text, {
                 style: styles.settingDescription,
@@ -936,7 +958,8 @@ export function HighlightFilterView({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   scrollView: {
     flex: 1
@@ -947,16 +970,16 @@ const styles = StyleSheet.create({
     paddingBottom: 32
   },
   section: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border + "50",
+    borderColor: night.color.border,
     marginBottom: 12,
     overflow: "hidden"
   },
   sectionDescription: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     paddingHorizontal: 16,
     paddingTop: 8,
     lineHeight: 16
@@ -971,7 +994,7 @@ const styles = StyleSheet.create({
   patternChip: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 6,
     borderWidth: 1,
     paddingVertical: 4,
@@ -991,7 +1014,7 @@ const styles = StyleSheet.create({
   },
   patternChipValue: {
     fontSize: 11,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     flexShrink: 1
   },
@@ -1036,7 +1059,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     borderRadius: 6,
     borderWidth: 1,
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     gap: 6
   },
   typeOptionText: {
@@ -1049,10 +1072,10 @@ const styles = StyleSheet.create({
   patternInputContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     paddingLeft: 4,
     paddingRight: 8,
     paddingVertical: 4,
@@ -1061,7 +1084,7 @@ const styles = StyleSheet.create({
   patternInput: {
     flex: 1,
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     paddingVertical: 6,
     paddingHorizontal: 4
   },
@@ -1125,7 +1148,7 @@ const styles = StyleSheet.create({
   detectedItem: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 6,
     borderWidth: 1,
     paddingVertical: 6,
@@ -1134,12 +1157,12 @@ const styles = StyleSheet.create({
   },
   detectedItemText: {
     fontSize: 11,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   emptyText: {
     fontSize: 11,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontStyle: "italic",
     textAlign: "center",
     paddingVertical: 16,
@@ -1151,13 +1174,13 @@ const styles = StyleSheet.create({
   },
   howItWorksText: {
     fontSize: 11,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     lineHeight: 18,
     fontFamily: "monospace"
   },
   howItWorksBold: {
     fontWeight: "700",
-    color: buoyColors.textSecondary
+    color: night.color.textSecondary
   },
   // Action popup modal styles
   modalOverlay: {
@@ -1168,10 +1191,10 @@ const styles = StyleSheet.create({
     padding: 32
   },
   actionPopup: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     width: "100%",
     maxWidth: 300,
     overflow: "hidden"
@@ -1179,7 +1202,7 @@ const styles = StyleSheet.create({
   actionPopupHeader: {
     padding: 16,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.border + "50",
+    borderBottomColor: night.color.separator,
     alignItems: "center"
   },
   actionPopupButtons: {
@@ -1198,10 +1221,10 @@ const styles = StyleSheet.create({
     gap: 8
   },
   actionPopupInclude: {
-    backgroundColor: buoyColors.success + "15"
+    backgroundColor: night.color.accentSoft
   },
   actionPopupExclude: {
-    backgroundColor: buoyColors.primary + "15"
+    backgroundColor: night.color.accentSoft
   },
   actionPopupButtonText: {
     fontSize: 13,
@@ -1210,12 +1233,12 @@ const styles = StyleSheet.create({
   actionPopupCancel: {
     padding: 12,
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border + "50",
+    borderTopColor: night.color.separator,
     alignItems: "center"
   },
   actionPopupCancelText: {
     fontSize: 13,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontWeight: "500"
   },
   // Settings styles
@@ -1231,7 +1254,7 @@ const styles = StyleSheet.create({
     marginTop: 16,
     paddingTop: 16,
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border + "30"
+    borderTopColor: night.color.separator
   },
   settingHeader: {
     flexDirection: "row",
@@ -1241,10 +1264,10 @@ const styles = StyleSheet.create({
   settingLabel: {
     fontSize: 13,
     fontWeight: "600",
-    color: buoyColors.text
+    color: night.color.text
   },
   settingValue: {
-    backgroundColor: buoyColors.textMuted + "20",
+    backgroundColor: night.color.fillSecondary,
     paddingHorizontal: 10,
     paddingVertical: 4,
     borderRadius: 6
@@ -1252,26 +1275,26 @@ const styles = StyleSheet.create({
   settingValueText: {
     fontSize: 12,
     fontWeight: "700",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   },
   settingDescription: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     lineHeight: 16
   },
   settingDescriptionMuted: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     lineHeight: 14,
     marginTop: 4,
     fontStyle: "italic"
   },
   settingLabelDisabled: {
-    color: buoyColors.textMuted
+    color: night.color.textTertiary
   },
   settingWarning: {
-    color: buoyColors.warning,
+    color: night.color.warning,
     fontWeight: "500"
   },
   batchSizePresets: {
@@ -1284,22 +1307,22 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 14,
     borderRadius: 6,
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: buoyColors.border + "50"
+    borderColor: night.color.border
   },
   batchSizePresetActive: {
-    backgroundColor: buoyColors.textMuted + "20",
-    borderColor: buoyColors.textMuted
+    backgroundColor: night.color.fillSecondary,
+    borderColor: night.color.fillTertiary
   },
   batchSizePresetText: {
     fontSize: 12,
     fontWeight: "500",
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace"
   },
   batchSizePresetTextActive: {
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontWeight: "700"
   },
   // Render count range styles
@@ -1321,26 +1344,26 @@ const styles = StyleSheet.create({
   renderCountLabel: {
     fontSize: 10,
     fontWeight: "600",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
   renderCountInput: {
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     paddingVertical: 10,
     paddingHorizontal: 12,
     fontSize: 14,
     fontWeight: "600",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     textAlign: "center"
   },
   renderCountSeparator: {
     fontSize: 12,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     marginTop: 18
   },
   clearRangeButton: {
@@ -1350,16 +1373,16 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 6,
-    backgroundColor: buoyColors.warning + "15",
+    backgroundColor: night.color.warningSoft,
     borderWidth: 1,
-    borderColor: buoyColors.warning + "40",
+    borderColor: night.color.warning + "40",
     gap: 6,
     alignSelf: "center"
   },
   clearRangeButtonText: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.warning
+    color: night.color.warning
   }
 });
 export default HighlightFilterView;

package/lib/module/highlight-updates/components/HighlightUpdatesModal.js

@@ -17,7 +17,7 @@
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { Power, JsModal, devToolsStorageKeys, persistentStorage, buoyColors, TickProvider } from "@buoy-gg/shared-ui";
+import { Power, JsModal, devToolsStorageKeys, persistentStorage, night, TickProvider } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import HighlightUpdatesController from "../utils/HighlightUpdatesController";
 import { RenderTracker } from "../utils/RenderTracker";
@@ -35,7 +35,7 @@ const DisabledBanner = /*#__PURE__*/React.memo(function DisabledBanner() {
     style: styles.disabledBanner,
     children: [/*#__PURE__*/_jsx(Power, {
       size: 14,
-      color: buoyColors.warning
+      color: night.color.warning
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.disabledText,
       children: "Render tracking is disabled"
@@ -591,18 +591,22 @@ const styles = StyleSheet.create({
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: buoyColors.base
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
   },
   inlineHeader: {
     paddingHorizontal: 12,
     paddingVertical: 8,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.border,
-    backgroundColor: buoyColors.card
+    borderBottomColor: night.color.border,
+    backgroundColor: night.color.surface
   },
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so the HOST's field shows through — JsModal's hoisted
+    // ToolBackground in the modal, the desktop workbench's hoisted sky inline.
+    backgroundColor: "transparent"
   },
   disabledBanner: {
     flexDirection: "row",
@@ -611,13 +615,13 @@ const styles = StyleSheet.create({
     padding: 10,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: buoyColors.warning + "15",
+    backgroundColor: night.color.warningSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.warning + "20"
+    borderColor: night.color.warning + "20"
   },
   disabledText: {
-    color: buoyColors.warning,
+    color: night.color.warning,
     fontSize: 11,
     flex: 1
   }