@buoy-gg/shared-ui 7.0.26 → 7.0.27

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

@@ -10,6 +10,7 @@ exports.StatusBadge = StatusBadge;
 exports.TypeBadge = TypeBadge;
 var _reactNative = require("react-native");
 var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 // Badge variants
 
@@ -19,9 +20,9 @@ const STATUS_COLORS = {
   error: _gameUIColors.buoyColors.error,
   warning: _gameUIColors.buoyColors.warning,
   info: _gameUIColors.buoyColors.primary,
-  pending: _gameUIColors.buoyColors.textSecondary,
+  pending: _nightTheme.night.color.textSecondary,
   active: _gameUIColors.buoyColors.success,
-  inactive: _gameUIColors.buoyColors.textMuted,
+  inactive: _nightTheme.night.color.textTertiary,
   stale: _gameUIColors.buoyColors.warning,
   fetching: _gameUIColors.buoyColors.primary
 };
@@ -31,9 +32,9 @@ const METHOD_COLORS = {
   GET: _gameUIColors.buoyColors.success,
   POST: _gameUIColors.buoyColors.primary,
   PUT: _gameUIColors.buoyColors.warning,
-  PATCH: _gameUIColors.buoyColors.textSecondary,
+  PATCH: _nightTheme.night.color.textSecondary,
   DELETE: _gameUIColors.buoyColors.error,
-  HEAD: _gameUIColors.buoyColors.textMuted,
+  HEAD: _nightTheme.night.color.textTertiary,
   OPTIONS: _gameUIColors.buoyColors.primary
 };
 
@@ -191,13 +192,13 @@ function getTypeColor(type) {
     string: _gameUIColors.buoyColors.primary,
     number: _gameUIColors.buoyColors.primary,
     boolean: _gameUIColors.buoyColors.primary,
-    object: _gameUIColors.buoyColors.textSecondary,
-    array: _gameUIColors.buoyColors.textSecondary,
-    null: _gameUIColors.buoyColors.textMuted,
-    undefined: _gameUIColors.buoyColors.textMuted,
-    function: _gameUIColors.buoyColors.textSecondary
+    object: _nightTheme.night.color.textSecondary,
+    array: _nightTheme.night.color.textSecondary,
+    null: _nightTheme.night.color.textTertiary,
+    undefined: _nightTheme.night.color.textTertiary,
+    function: _nightTheme.night.color.textSecondary
   };
-  return typeColors[type.toLowerCase()] || _gameUIColors.buoyColors.textMuted;
+  return typeColors[type.toLowerCase()] || _nightTheme.night.color.textTertiary;
 }
 const styles = _reactNative.StyleSheet.create({
   statusDot: {

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CompactRow = CompactRow;
 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 CompactRow({
   statusDotColor,
@@ -28,11 +28,15 @@ function CompactRow({
   expandedGlowColor
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.rowWrapper,
+    style: [styles.rowWrapper, isExpanded && styles.rowWrapperExpanded],
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.row, isSelected && styles.selectedRow, isExpanded && [styles.expandedRowActive, {
-        borderColor: expandedGlowColor || _gameUIColors.buoyColors.primary,
-        shadowColor: expandedGlowColor || _gameUIColors.buoyColors.primary
+        borderColor: expandedGlowColor || _nightTheme.night.color.accent,
+        // The resting hairline sets borderBottomColor specifically, and a
+        // specific side always beats the generic borderColor — restate it
+        // or the expanded card's bottom edge keeps the faint separator.
+        borderBottomColor: expandedGlowColor || _nightTheme.night.color.accent,
+        shadowColor: expandedGlowColor || _nightTheme.night.color.accent
       }]],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: onPress,
@@ -92,10 +96,10 @@ function CompactRow({
               style: styles.chevronContainer,
               children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
                 size: 14,
-                color: _gameUIColors.buoyColors.textMuted
+                color: _nightTheme.night.color.textTertiary
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
                 size: 14,
-                color: _gameUIColors.buoyColors.textMuted
+                color: _nightTheme.night.color.textTertiary
               })
             })]
           })]
@@ -113,15 +117,23 @@ const styles = _reactNative.StyleSheet.create({
     marginHorizontal: 8,
     marginVertical: 3
   },
+  /** The expanded card scales to 1.02 and grows a 2px glow border, which eats
+   * the 3px resting margin — without extra room its bottom edge sits on the
+   * next card. */
+  rowWrapperExpanded: {
+    marginVertical: 12
+  },
   row: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    // Translucent night scrim so the shared ToolBackground reads through —
+    // kept in step with DevToolsCard (same fill, same luminance contract).
+    backgroundColor: "rgba(12, 12, 12, 0.9)",
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border + "40",
+    borderColor: _nightTheme.night.color.border,
     // …separated by a single hairline instead of four borders per row.
     // Declared after borderWidth so the specific side wins on the chat path.
     borderBottomWidth: 1,
-    borderBottomColor: _gameUIColors.buoyColors.border + "40",
+    borderBottomColor: _nightTheme.night.color.separator,
     padding: 12,
     paddingHorizontal: 12,
     transform: [{
@@ -131,12 +143,12 @@ const styles = _reactNative.StyleSheet.create({
   selectedRow: {
     // Neutral fill, no outline, no lift — the same selection language as the
     // sidebar. The classic path keeps its tinted, scaled, glowing card.
-    backgroundColor: _gameUIColors.buoyColors.primary + "15",
-    borderColor: _gameUIColors.buoyColors.primary + "50",
+    backgroundColor: _nightTheme.night.color.accentSoft,
+    borderColor: _nightTheme.night.color.accentBorderStrong,
     transform: [{
       scale: 1.01
     }],
-    shadowColor: _gameUIColors.buoyColors.primary,
+    shadowColor: _nightTheme.night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -150,6 +162,7 @@ const styles = _reactNative.StyleSheet.create({
       scale: 1.02
     }],
     borderWidth: 2,
+    paddingBottom: 16,
     shadowOffset: {
       width: 0,
       height: 0
@@ -187,7 +200,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   observerText: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     marginTop: 1
   },
   querySection: {
@@ -197,7 +210,7 @@ const styles = _reactNative.StyleSheet.create({
   queryHash: {
     fontFamily: "monospace",
     fontSize: 12,
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     lineHeight: 16
   },
   secondaryRow: {
@@ -208,7 +221,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   secondaryText: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     marginTop: 1
   },
   rightSection: {
@@ -233,12 +246,12 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 8,
     paddingTop: 8,
     borderTopWidth: 1,
-    borderTopColor: _gameUIColors.buoyColors.border + "20",
+    borderTopColor: _nightTheme.night.color.separator,
     marginLeft: 24 // Align with content after status dot
   },
   bottomRightText: {
     fontSize: 9,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     fontFamily: "monospace"
   }
 });

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DEVTOOLS_CARD_CONSTANTS = void 0;
 exports.DevToolsCard = DevToolsCard;
 var _reactNative = require("react-native");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * DevToolsCard
@@ -89,23 +89,27 @@ const styles = _reactNative.StyleSheet.create({
     marginVertical: DEVTOOLS_CARD_CONSTANTS.marginVertical
   },
   card: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    // Translucent night scrim — same luminance contract as the old
+    // buoyColors.cardScrim (backing stays readable under the brightest
+    // scenes), re-based on the night surface so the ToolBackground reads
+    // through every tool's card lists, not only around them.
+    backgroundColor: "rgba(12, 12, 12, 0.9)",
     borderRadius: DEVTOOLS_CARD_CONSTANTS.borderRadius,
     borderWidth: DEVTOOLS_CARD_CONSTANTS.borderWidth,
-    borderColor: _gameUIColors.buoyColors.border + "40",
+    borderColor: _nightTheme.night.color.border,
     // The separator. On classic this just re-states the full outline; on chat
     // it is the ONLY edge the row has.
     borderBottomWidth: 1,
-    borderBottomColor: _gameUIColors.buoyColors.border + "40",
+    borderBottomColor: _nightTheme.night.color.separator,
     padding: DEVTOOLS_CARD_CONSTANTS.padding,
     paddingHorizontal: DEVTOOLS_CARD_CONSTANTS.padding,
     minHeight: DEVTOOLS_CARD_CONSTANTS.minHeight
   },
   selectedCard: {
-    // Neutral grey fill, no tinted outline and no lift — see CompactRow.
-    backgroundColor: _gameUIColors.buoyColors.primary + "15",
-    borderColor: _gameUIColors.buoyColors.primary + "50",
-    shadowColor: _gameUIColors.buoyColors.primary,
+    // The night selection language: soft accent fill + accent border.
+    backgroundColor: _nightTheme.night.color.accentSoft,
+    borderColor: _nightTheme.night.color.accentBorderStrong,
+    shadowColor: _nightTheme.night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0

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

@@ -11,6 +11,7 @@ var _SectionHeader = require("./SectionHeader.js");
 var _FilterComponents = require("./FilterComponents.js");
 var _useFilterManager = require("../../hooks/useFilterManager.js");
 var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function DynamicFilterView({
   sections = [],
@@ -64,7 +65,7 @@ function DynamicFilterView({
         style: [styles.tabButton, currentActiveTab === tab.id ? styles.tabButtonActive : styles.tabButtonInactive],
         children: [tab.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(tab.icon, {
           size: 14,
-          color: currentActiveTab === tab.id ? _gameUIColors.buoyColors.primary : _gameUIColors.buoyColors.textMuted
+          color: currentActiveTab === tab.id ? _gameUIColors.buoyColors.primary : _nightTheme.night.color.textTertiary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.tabButtonText, currentActiveTab === tab.id ? styles.tabButtonTextActive : styles.tabButtonTextInactive],
           children: tab.label
@@ -304,7 +305,7 @@ function DynamicFilterView({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Icon, {
             icon: howItWorksSection.icon || _index.Filter,
-            color: _gameUIColors.buoyColors.textSecondary,
+            color: _nightTheme.night.color.textSecondary,
             size: 12
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Title, {
             children: howItWorksSection.title || "HOW FILTERS WORK"
@@ -355,7 +356,8 @@ function DynamicFilterView({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _gameUIColors.buoyColors.base
+    // Transparent so the host modal's night star field shows through.
+    backgroundColor: "transparent"
   },
   content: {
     flex: 1
@@ -370,9 +372,9 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
     gap: 8,
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderBottomWidth: 1,
-    borderBottomColor: _gameUIColors.buoyColors.border
+    borderBottomColor: _nightTheme.night.color.border
   },
   tabButton: {
     flex: 1,
@@ -392,14 +394,14 @@ const styles = _reactNative.StyleSheet.create({
    */
   tabButtonActive: {
     // White THUMB, not a grey one — the INACTIVE tab is already
-    // `buoyColors.hover` here, so a grey active state would be invisible.
+    // `night.color.surfaceElevated` here, so a grey active state would be invisible.
     backgroundColor: _gameUIColors.buoyColors.primary + "20",
     borderColor: _gameUIColors.buoyColors.primary,
     borderWidth: 2
   },
   tabButtonInactive: {
-    backgroundColor: _gameUIColors.buoyColors.hover,
-    borderColor: _gameUIColors.buoyColors.border
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderColor: _nightTheme.night.color.border
   },
   tabButtonText: {
     fontSize: 11,
@@ -410,7 +412,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _gameUIColors.buoyColors.primary
   },
   tabButtonTextInactive: {
-    color: _gameUIColors.buoyColors.textMuted
+    color: _nightTheme.night.color.textTertiary
   },
   tabBadge: {
     backgroundColor: _gameUIColors.buoyColors.primary + "40",
@@ -438,7 +440,7 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 8
   },
   filterCard: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 12,
     // rounded-xl
     paddingHorizontal: 8,
@@ -447,7 +449,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     width: 72,
     minHeight: 68
   },
@@ -471,7 +473,7 @@ const styles = _reactNative.StyleSheet.create({
   filterCountActive: {
     fontSize: 14,
     fontWeight: "700",
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     fontFamily: "monospace",
     marginTop: 3,
     marginBottom: 1,
@@ -485,14 +487,14 @@ const styles = _reactNative.StyleSheet.create({
   filterCountZero: {
     fontSize: 11,
     fontWeight: "500",
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     fontFamily: "monospace",
     marginTop: 3,
     marginBottom: 1
   },
   filterLabelCompact: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     fontWeight: "600",
     textAlign: "center",
     textTransform: "capitalize",
@@ -505,14 +507,14 @@ const styles = _reactNative.StyleSheet.create({
   },
   filterDescriptionBottom: {
     fontSize: 8,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     textAlign: "center",
     marginTop: 2,
     lineHeight: 11
   },
   sectionDescription: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textSecondary,
+    color: _nightTheme.night.color.textSecondary,
     marginTop: 4,
     marginBottom: 4,
     lineHeight: 14
@@ -533,11 +535,11 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   activeFiltersSection: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -548,17 +550,17 @@ const styles = _reactNative.StyleSheet.create({
     maxHeight: 200
   },
   includeOnlySection: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   includeOnlyDescription: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textSecondary,
+    color: _nightTheme.night.color.textSecondary,
     paddingHorizontal: 16,
     paddingTop: 8,
     lineHeight: 14
@@ -574,17 +576,17 @@ const styles = _reactNative.StyleSheet.create({
     maxHeight: 150
   },
   excludeFiltersSection: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   excludeFiltersDescription: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textSecondary,
+    color: _nightTheme.night.color.textSecondary,
     paddingHorizontal: 16,
     paddingTop: 8,
     lineHeight: 14
@@ -620,7 +622,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   filterSummaryText: {
     fontSize: 11,
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     lineHeight: 16
   },
   filterSummaryInclude: {
@@ -633,17 +635,17 @@ const styles = _reactNative.StyleSheet.create({
   },
   emptyStateText: {
     fontSize: 11,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     fontStyle: "italic",
     textAlign: "center",
     paddingVertical: 12
   },
   availableKeysSection: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -659,31 +661,31 @@ 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,
     marginBottom: 8
   },
   availableKeyText: {
     flex: 1,
     fontSize: 11,
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     fontFamily: "monospace",
     marginRight: 8
   },
   howItWorksSection: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   howItWorksText: {
     fontSize: 11,
-    color: _gameUIColors.buoyColors.textSecondary,
+    color: _nightTheme.night.color.textSecondary,
     lineHeight: 16,
     marginBottom: 12,
     marginTop: 8,
@@ -695,29 +697,29 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 16,
     borderTopWidth: 1,
-    borderTopColor: _gameUIColors.buoyColors.border
+    borderTopColor: _nightTheme.night.color.border
   },
   examplesTitle: {
     fontSize: 10,
     fontWeight: "600",
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     fontFamily: "monospace",
     lineHeight: 16
   },
   previewSection: {
-    backgroundColor: _gameUIColors.buoyColors.hover,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
     // Slightly lighter to distinguish from other sections
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.borderStrong,
+    borderColor: _nightTheme.night.color.fillTertiary,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -725,12 +727,12 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 12,
     paddingBottom: 16,
-    backgroundColor: _gameUIColors.buoyColors.base,
+    backgroundColor: _nightTheme.night.color.bg,
     // Darker content area for contrast
     marginHorizontal: 12,
     marginBottom: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border
+    borderColor: _nightTheme.night.color.border
   }
 });

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
   }
 });