@buoy-gg/shared-ui 7.0.26 → 7.0.28

package/lib/commonjs/ui/components/EventStepperFooter.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _lucideIcons = require("../../icons/lucide-icons.js");
 var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _useSafeAreaInsets = require("../../hooks/useSafeAreaInsets.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -31,51 +32,56 @@ const EventStepperFooter = exports.EventStepperFooter = /*#__PURE__*/(0, _react.
   itemLabel = "Event",
   subtitle,
   absolute = false,
-  applySafeAreaInset = true
+  applySafeAreaInset = true,
+  variant = "night"
 }) {
   const insets = (0, _useSafeAreaInsets.useSafeAreaInsets)();
 
   // Don't render if there's only one or no items
   if (totalItems <= 1) return null;
+  const isNight = variant === "night";
   const isFirstItem = currentIndex === 0;
   const isLastItem = currentIndex === totalItems - 1;
   const bottomPadding = applySafeAreaInset ? 12 + insets.bottom : 12;
+  // Night buttons are the plate-with-accent-label style — chevrons match.
+  const enabledInk = isNight ? _nightTheme.night.color.accent : _macOSDesignSystemColors.macOSColors.text.primary;
+  const disabledInk = isNight ? _nightTheme.night.color.textTertiary : _macOSDesignSystemColors.macOSColors.text.muted;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.footer, absolute && styles.footerAbsolute, {
+    style: [styles.footer, isNight && styles.nightFooter, absolute && styles.footerAbsolute, {
       paddingBottom: bottomPadding
     }],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       onPress: onPrevious,
       disabled: isFirstItem,
-      style: [styles.navButton, isFirstItem && styles.navButtonDisabled],
+      style: [styles.navButton, isNight && styles.nightNavButton, isFirstItem && styles.navButtonDisabled],
       activeOpacity: 0.7,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.ChevronLeft, {
         size: 20,
-        color: isFirstItem ? _macOSDesignSystemColors.macOSColors.text.muted : _macOSDesignSystemColors.macOSColors.text.primary
+        color: isFirstItem ? disabledInk : enabledInk
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.navButtonText, isFirstItem && styles.navButtonTextDisabled],
+        style: [styles.navButtonText, isNight && styles.nightNavButtonText, isFirstItem && styles.navButtonTextDisabled, isFirstItem && isNight && styles.nightNavButtonTextDisabled],
         children: "Previous"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.counterContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: styles.counterText,
+        style: [styles.counterText, isNight && styles.nightCounterText],
         children: [itemLabel, " ", currentIndex + 1, " of ", totalItems]
       }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.subtitleText,
+        style: [styles.subtitleText, isNight && styles.nightSubtitleText],
         children: subtitle
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       onPress: onNext,
       disabled: isLastItem,
-      style: [styles.navButton, isLastItem && styles.navButtonDisabled],
+      style: [styles.navButton, isNight && styles.nightNavButton, isLastItem && styles.navButtonDisabled],
       activeOpacity: 0.7,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.navButtonText, isLastItem && styles.navButtonTextDisabled],
+        style: [styles.navButtonText, isNight && styles.nightNavButtonText, isLastItem && styles.navButtonTextDisabled, isLastItem && isNight && styles.nightNavButtonTextDisabled],
         children: "Next"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.ChevronRight, {
         size: 20,
-        color: isLastItem ? _macOSDesignSystemColors.macOSColors.text.muted : _macOSDesignSystemColors.macOSColors.text.primary
+        color: isLastItem ? disabledInk : enabledInk
       })]
     })]
   });
@@ -144,5 +150,27 @@ const styles = _reactNative.StyleSheet.create({
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
     fontFamily: "monospace",
     marginTop: 2
+  },
+  // ── Night variant (see ui/night/nightTheme.ts): near-black glass bar with
+  // hairline top border, plate buttons, night text hierarchy.
+  nightFooter: {
+    backgroundColor: "rgba(5, 5, 5, 0.92)",
+    borderTopColor: _nightTheme.night.color.border
+  },
+  nightNavButton: {
+    backgroundColor: _nightTheme.night.color.button,
+    borderRadius: 15
+  },
+  nightNavButtonText: {
+    color: _nightTheme.night.color.accent
+  },
+  nightNavButtonTextDisabled: {
+    color: _nightTheme.night.color.textTertiary
+  },
+  nightCounterText: {
+    color: _nightTheme.night.color.text
+  },
+  nightSubtitleText: {
+    color: _nightTheme.night.color.textSecondary
   }
 });

package/lib/commonjs/ui/components/FilterComponents.js

@@ -10,7 +10,7 @@ exports.FilterList = FilterList;
 exports.FilterSection = FilterSection;
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 // Container for filter section
 
@@ -173,7 +173,7 @@ function FilterList({
 const styles = _reactNative.StyleSheet.create({
   filterSection: {
     padding: 16,
-    backgroundColor: _gameUIColors.buoyColors.base
+    backgroundColor: "transparent"
   },
   badge: {
     flexDirection: "row",
@@ -196,10 +196,10 @@ const styles = _reactNative.StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _gameUIColors.buoyColors.input,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     paddingHorizontal: 14,
     paddingVertical: 10,
     marginBottom: 8
@@ -208,7 +208,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     fontSize: 13,
     paddingVertical: 0,
-    color: _gameUIColors.buoyColors.text
+    color: _nightTheme.night.color.text
   },
   inputButtons: {
     flexDirection: "row",
@@ -218,7 +218,7 @@ const styles = _reactNative.StyleSheet.create({
   cancelButton: {
     padding: 4,
     borderRadius: 6,
-    backgroundColor: _gameUIColors.buoyColors.hover
+    backgroundColor: _nightTheme.night.color.surfaceElevated
   },
   inlineAddButton: {
     paddingHorizontal: 12,
@@ -239,8 +239,8 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 10,
     borderWidth: 1,
     borderStyle: "dashed",
-    borderColor: _gameUIColors.buoyColors.border,
-    backgroundColor: _gameUIColors.buoyColors.input
+    borderColor: _nightTheme.night.color.border,
+    backgroundColor: _nightTheme.night.color.surfaceElevated
   },
   addButtonText: {
     fontSize: 13,
@@ -256,17 +256,17 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "space-between",
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: _gameUIColors.buoyColors.hover,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border
+    borderColor: _nightTheme.night.color.border
   },
   filterItemText: {
     flex: 1,
     fontSize: 12,
     fontFamily: "monospace",
     marginRight: 8,
-    color: _gameUIColors.buoyColors.text
+    color: _nightTheme.night.color.text
   },
   filterItemMeta: {
     marginRight: 8

package/lib/commonjs/ui/components/ModalHeader.js

@@ -11,7 +11,7 @@ exports.Navigation = Navigation;
 var _reactNative = require("react-native");
 var _react = require("react");
 var _index = require("../../icons/index.js");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 // Base ModalHeader container component
 // Note: onClose and onMinimize are now handled by WindowControls in JsModal
@@ -43,9 +43,12 @@ function Navigation({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: onClose,
         style: styles.navigationButton,
+        testID: "tool-close",
+        accessibilityLabel: "Close",
+        accessibilityRole: "button",
         children: closeIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
           size: 20,
-          color: _gameUIColors.buoyColors.textMuted
+          color: _nightTheme.night.color.textSecondary
         })
       })]
     });
@@ -56,9 +59,12 @@ function Navigation({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: onBack,
       style: styles.navigationButton,
+      testID: "tool-back",
+      accessibilityLabel: "Back",
+      accessibilityRole: "button",
       children: backIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft, {
         size: 20,
-        color: _gameUIColors.buoyColors.textSecondary
+        color: _nightTheme.night.color.textSecondary
       })
     });
   }
@@ -69,9 +75,12 @@ function Navigation({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: onBack,
       style: styles.navigationButton,
+      testID: "tool-back",
+      accessibilityLabel: "Back",
+      accessibilityRole: "button",
       children: backIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft, {
         size: 20,
-        color: _gameUIColors.buoyColors.textSecondary
+        color: _nightTheme.night.color.textSecondary
       })
     });
   }
@@ -139,12 +148,12 @@ function HeaderSearch({
     style: styles.searchContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Search, {
       size: 12,
-      color: _gameUIColors.buoyColors.textSecondary
+      color: _nightTheme.night.color.textSecondary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
       ref: inputRef,
       style: styles.searchInput,
       placeholder: placeholder,
-      placeholderTextColor: _gameUIColors.buoyColors.textMuted,
+      placeholderTextColor: _nightTheme.night.color.placeholder,
       value: value,
       onChangeText: onChangeText,
       autoCorrect: false,
@@ -154,7 +163,7 @@ function HeaderSearch({
       style: styles.searchCancelButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
         size: 12,
-        color: _gameUIColors.buoyColors.textSecondary
+        color: _nightTheme.night.color.textSecondary
       })
     })]
   });
@@ -172,7 +181,10 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     gap: 8,
     minHeight: 32,
-    paddingLeft: 4
+    paddingLeft: 4,
+    // Traffic-light window controls sit absolutely in this corner. Reserve
+    // space so Copy / search / extra actions never paint under them.
+    paddingRight: 56
   },
   navigationButton: {
     padding: 4
@@ -189,7 +201,7 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   headerTitle: {
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     fontSize: 14,
     fontWeight: "500"
   },
@@ -198,7 +210,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   headerSubtitle: {
     fontSize: 12,
-    color: _gameUIColors.buoyColors.textSecondary,
+    color: _nightTheme.night.color.textSecondary,
     marginTop: 2
   },
   headerSubtitleCentered: {
@@ -208,7 +220,8 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     gap: 6,
     marginLeft: "auto",
-    marginRight: 4
+    marginRight: 4,
+    flexShrink: 0
   },
   headerContentNoMargin: {
     marginHorizontal: 0
@@ -217,21 +230,21 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     flex: 1,
-    backgroundColor: _gameUIColors.buoyColors.input,
-    borderRadius: 6,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 10,
     paddingHorizontal: 10,
     paddingVertical: 4,
     marginHorizontal: 12,
     marginVertical: 4,
     height: 32,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border
+    borderColor: _nightTheme.night.color.border
   },
   searchInput: {
     flex: 1,
     marginLeft: 8,
     fontSize: 13,
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     padding: 0,
     height: "100%"
   },

package/lib/commonjs/ui/components/SectionHeader.js

@@ -94,7 +94,9 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: 16,
     paddingVertical: 8,
-    backgroundColor: _gameUIColors.buoyColors.base,
+    // Transparent (was the opaque buoy base): section headers sit on night
+    // surfaces now, and an opaque strip breaks the star field behind them.
+    backgroundColor: "transparent",
     minHeight: 40
   },
   iconWrapper: {

package/lib/commonjs/ui/components/StorageTypeBadge.js

@@ -7,6 +7,7 @@ exports.StorageTypeBadge = StorageTypeBadge;
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function StorageTypeBadge({
   type,
@@ -17,13 +18,13 @@ function StorageTypeBadge({
   const getStorageColor = () => {
     switch (type) {
       case "async":
-        return _gameUIColors.buoyColors.textSecondary;
+        return _nightTheme.night.color.textSecondary;
       case "mmkv":
         return _gameUIColors.buoyColors.success;
       case "secure":
         return _gameUIColors.buoyColors.warning;
       default:
-        return _gameUIColors.buoyColors.textMuted;
+        return _nightTheme.night.color.textTertiary;
     }
   };
   const getStorageText = () => {

package/lib/commonjs/ui/components/TabSelector.js

@@ -5,8 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabSelector = TabSelector;
 var _reactNative = require("react-native");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Header tab strip — the night segmented control (see ui/night): `#050505`
+ * track, `#161618` thumb, accent underline glow under the active label.
+ *
+ * Same props API it has always had, so every tool header that mounts it got
+ * the night look in one shared edit. Visually identical to `NightSegmented`
+ * at its compact size — new night-native code should prefer that primitive;
+ * this component exists so existing consumers convert without a code change.
+ */
 function TabSelector({
   tabs,
   activeTab,
@@ -14,60 +23,69 @@ function TabSelector({
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.container,
-    children: tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      "sentry-label": "ignore user interaction",
-      accessibilityLabel: tab.label,
-      accessibilityHint: `View ${tab.label.toLowerCase()}`,
-      onPress: () => onTabChange(tab.key),
-      style: [styles.tabButton, activeTab === tab.key ? styles.tabButtonActive : styles.tabButtonInactive],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.tabButtonText, activeTab === tab.key ? styles.tabButtonTextActive : styles.tabButtonTextInactive],
-        children: tab.label
-      })
-    }, tab.key))
+    children: tabs.map(tab => {
+      const active = activeTab === tab.key;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        "sentry-label": "ignore user interaction",
+        accessibilityRole: "tab",
+        accessibilityState: {
+          selected: active
+        },
+        accessibilityLabel: tab.label,
+        accessibilityHint: `View ${tab.label.toLowerCase()}`,
+        onPress: () => onTabChange(tab.key),
+        style: [styles.tabButton, active && styles.tabButtonActive],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.tabButtonText, active && styles.tabButtonTextActive],
+          children: tab.label
+        }), active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.underline
+        }) : null]
+      }, tab.key);
+    })
   });
 }
 const styles = _reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
-    backgroundColor: _gameUIColors.buoyColors.hover,
-    borderRadius: 6,
-    padding: 2,
+    backgroundColor: _nightTheme.night.color.bg,
+    borderRadius: _nightTheme.night.radius.row,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
-    justifyContent: "space-evenly",
-    height: 28
+    borderColor: _nightTheme.night.color.border,
+    padding: 3
   },
   tabButton: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
+    flex: 1,
+    paddingVertical: 5,
     alignItems: "center",
     justifyContent: "center",
-    flex: 1,
-    marginHorizontal: 1
+    borderRadius: _nightTheme.night.radius.segment
   },
-  /**
-   * The selected tab is marked with an accent ring.
-   */
   tabButtonActive: {
-    backgroundColor: _gameUIColors.buoyColors.primary + "20",
-    borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.primary
-  },
-  tabButtonInactive: {
-    backgroundColor: "transparent"
+    backgroundColor: _nightTheme.night.color.surfaceElevated
   },
   tabButtonText: {
     fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
+    fontWeight: "500",
+    color: _nightTheme.night.color.textSecondary
   },
   tabButtonTextActive: {
-    color: _gameUIColors.buoyColors.primary
+    fontWeight: "600",
+    color: _nightTheme.night.color.text
   },
-  tabButtonTextInactive: {
-    color: _gameUIColors.buoyColors.textMuted
+  underline: {
+    position: "absolute",
+    bottom: 1.5,
+    width: 20,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: _nightTheme.night.color.accent,
+    shadowColor: _nightTheme.night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 6
   }
 });

package/lib/commonjs/ui/components/ValueTypeBadge.js

@@ -7,6 +7,7 @@ exports.ValueTypeBadge = ValueTypeBadge;
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function ValueTypeBadge({
   type,
@@ -75,12 +76,12 @@ function ValueTypeBadge({
         return _gameUIColors.buoyColors.primary;
       case "null":
       case "undefined":
-        return _gameUIColors.buoyColors.textMuted;
+        return _nightTheme.night.color.textTertiary;
       case "object":
       case "array":
-        return _gameUIColors.buoyColors.textSecondary;
+        return _nightTheme.night.color.textSecondary;
       default:
-        return _gameUIColors.buoyColors.textMuted;
+        return _nightTheme.night.color.textTertiary;
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -135,12 +136,12 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: _gameUIColors.buoyColors.primary + "1A"
   },
   secondaryBadge: {
-    backgroundColor: _gameUIColors.buoyColors.textSecondary + "1A"
+    backgroundColor: _nightTheme.night.color.textSecondary + "1A"
   },
   mutedBadge: {
-    backgroundColor: _gameUIColors.buoyColors.textMuted + "1A"
+    backgroundColor: _nightTheme.night.color.textTertiary + "1A"
   },
   defaultBadge: {
-    backgroundColor: _gameUIColors.buoyColors.textMuted + "1A"
+    backgroundColor: _nightTheme.night.color.textTertiary + "1A"
   }
 });

package/lib/commonjs/ui/components/WindowControls.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 // ============================================================================
 // Global expandable setting — controlled via setExpandableWindowControls()
@@ -72,7 +73,8 @@ function WindowControls({
   onClose,
   onMinimize,
   onToggleMode,
-  mode
+  mode,
+  variant = "night"
 }) {
   // Show action-based icon: what will happen when clicked
   const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
@@ -125,15 +127,18 @@ function WindowControls({
     onClose: onClose,
     onMinimize: onMinimize,
     onToggleMode: onToggleMode,
-    mode: mode
+    mode: mode,
+    variant: variant
   });
 }
 function ExpandableWindowControls({
   onClose,
   onMinimize,
   onToggleMode,
-  mode
+  mode,
+  variant = "night"
 }) {
+  const isNight = variant === "night";
   const [expanded, setExpanded] = (0, _react.useState)(false);
   const [triggerLayout, setTriggerLayout] = (0, _react.useState)(null);
   const expandAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
@@ -267,38 +272,38 @@ function ExpandableWindowControls({
             }],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                style: styles.expandedContainer,
+                style: [styles.expandedContainer, isNight && styles.nightExpandedContainer],
                 children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
                   onPress: () => handleAction(onMinimize),
-                  style: [styles.expandedButton, styles.minimizeButtonExpanded],
+                  style: [styles.expandedButton, isNight ? styles.nightMinimizeButton : styles.minimizeButtonExpanded],
                   activeOpacity: 0.7,
                   accessibilityLabel: "Minimize modal",
                   accessibilityRole: "button",
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Minus, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#7A5A00",
+                    color: isNight ? _nightTheme.night.color.warning : "#7A5A00",
                     strokeWidth: 2
                   })
                 }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
                   onPress: () => handleAction(onToggleMode),
-                  style: [styles.expandedButton, styles.expandButtonExpanded],
+                  style: [styles.expandedButton, isNight ? styles.nightToggleButton : styles.expandButtonExpanded],
                   activeOpacity: 0.7,
                   accessibilityLabel: toggleModeLabel,
                   accessibilityRole: "button",
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#004A1A",
+                    color: isNight ? _nightTheme.night.color.accent : "#004A1A",
                     strokeWidth: 2
                   })
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
                   onPress: () => handleAction(onClose),
-                  style: [styles.expandedButton, styles.closeButtonExpanded],
+                  style: [styles.expandedButton, isNight ? styles.nightCloseButton : styles.closeButtonExpanded],
                   activeOpacity: 0.7,
                   accessibilityLabel: "Close modal",
                   accessibilityRole: "button",
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#4A0000",
+                    color: isNight ? _nightTheme.night.color.danger : "#4A0000",
                     strokeWidth: 2
                   })
                 })]
@@ -381,5 +386,27 @@ const styles = _reactNative.StyleSheet.create({
   },
   expandButtonExpanded: {
     backgroundColor: COLORS.toggleMode
+  },
+  // ── Night variant (Everlights language — see ui/night/nightTheme.ts):
+  // near-black plate, hairline border, soft-tinted circles with toned icons
+  // instead of the solid macOS traffic lights.
+  nightExpandedContainer: {
+    backgroundColor: _nightTheme.night.color.surface,
+    borderColor: _nightTheme.night.color.border
+  },
+  nightMinimizeButton: {
+    backgroundColor: _nightTheme.night.color.warningSoft,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.warning + "59"
+  },
+  nightToggleButton: {
+    backgroundColor: _nightTheme.night.color.accentSoft,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.accentBorderStrong
+  },
+  nightCloseButton: {
+    backgroundColor: _nightTheme.night.color.dangerSoft,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.danger + "59"
   }
 });

package/lib/commonjs/ui/gameUI/constants/gameUIColors.js

@@ -178,6 +178,14 @@ const buoyColors = exports.buoyColors = {
   // Backgrounds (dark to light)
   base: "#121212",
   card: "#1A1A1A",
+  /**
+   * Card fill for surfaces that sit over a ToolBackground: translucent so the
+   * field reads through, but calibrated against the BRIGHTEST scene in the
+   * catalogue (Live Sky's noon clouds/sun bloom, ~215 luminance) so a card's
+   * backing stays ≤ ~45 luminance and text never washes out. Over the "off"
+   * preset it is visually indistinguishable from `card`.
+   */
+  cardScrim: "rgba(10,13,20,0.9)",
   hover: "#242424",
   input: "#2A2A2A",
   // Borders