@buoy-gg/shared-ui 7.0.25 → 7.0.27

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

@@ -2,7 +2,7 @@
 
 import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native";
 import { X, Plus } from "../../icons/index.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 
 // Container for filter section
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -165,7 +165,7 @@ export function FilterList({
 const styles = StyleSheet.create({
   filterSection: {
     padding: 16,
-    backgroundColor: buoyColors.base
+    backgroundColor: "transparent"
   },
   badge: {
     flexDirection: "row",
@@ -188,10 +188,10 @@ const styles = StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     paddingHorizontal: 14,
     paddingVertical: 10,
     marginBottom: 8
@@ -200,7 +200,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 13,
     paddingVertical: 0,
-    color: buoyColors.text
+    color: night.color.text
   },
   inputButtons: {
     flexDirection: "row",
@@ -210,7 +210,7 @@ const styles = StyleSheet.create({
   cancelButton: {
     padding: 4,
     borderRadius: 6,
-    backgroundColor: buoyColors.hover
+    backgroundColor: night.color.surfaceElevated
   },
   inlineAddButton: {
     paddingHorizontal: 12,
@@ -231,8 +231,8 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     borderWidth: 1,
     borderStyle: "dashed",
-    borderColor: buoyColors.border,
-    backgroundColor: buoyColors.input
+    borderColor: night.color.border,
+    backgroundColor: night.color.surfaceElevated
   },
   addButtonText: {
     fontSize: 13,
@@ -248,17 +248,17 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: buoyColors.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   },
   filterItemText: {
     flex: 1,
     fontSize: 12,
     fontFamily: "monospace",
     marginRight: 8,
-    color: buoyColors.text
+    color: night.color.text
   },
   filterItemMeta: {
     marginRight: 8

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

@@ -3,7 +3,7 @@
 import { View, Text, TextInput, TouchableOpacity, StyleSheet } from "react-native";
 import { useEffect, useRef } from "react";
 import { ChevronLeft, Search as SearchIcon, X } from "../../icons/index.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 
 // Base ModalHeader container component
 // Note: onClose and onMinimize are now handled by WindowControls in JsModal
@@ -37,7 +37,7 @@ export function Navigation({
         style: styles.navigationButton,
         children: closeIcon || /*#__PURE__*/_jsx(X, {
           size: 20,
-          color: buoyColors.textMuted
+          color: night.color.textSecondary
         })
       })]
     });
@@ -50,7 +50,7 @@ export function Navigation({
       style: styles.navigationButton,
       children: backIcon || /*#__PURE__*/_jsx(ChevronLeft, {
         size: 20,
-        color: buoyColors.textSecondary
+        color: night.color.textSecondary
       })
     });
   }
@@ -63,7 +63,7 @@ export function Navigation({
       style: styles.navigationButton,
       children: backIcon || /*#__PURE__*/_jsx(ChevronLeft, {
         size: 20,
-        color: buoyColors.textSecondary
+        color: night.color.textSecondary
       })
     });
   }
@@ -131,12 +131,12 @@ export function HeaderSearch({
     style: styles.searchContainer,
     children: [/*#__PURE__*/_jsx(SearchIcon, {
       size: 12,
-      color: buoyColors.textSecondary
+      color: night.color.textSecondary
     }), /*#__PURE__*/_jsx(TextInput, {
       ref: inputRef,
       style: styles.searchInput,
       placeholder: placeholder,
-      placeholderTextColor: buoyColors.textMuted,
+      placeholderTextColor: night.color.placeholder,
       value: value,
       onChangeText: onChangeText,
       autoCorrect: false,
@@ -146,7 +146,7 @@ export function HeaderSearch({
       style: styles.searchCancelButton,
       children: /*#__PURE__*/_jsx(X, {
         size: 12,
-        color: buoyColors.textSecondary
+        color: night.color.textSecondary
       })
     })]
   });
@@ -181,7 +181,7 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   headerTitle: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 14,
     fontWeight: "500"
   },
@@ -190,7 +190,7 @@ const styles = StyleSheet.create({
   },
   headerSubtitle: {
     fontSize: 12,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     marginTop: 2
   },
   headerSubtitleCentered: {
@@ -209,21 +209,21 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     flex: 1,
-    backgroundColor: buoyColors.input,
-    borderRadius: 6,
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: 10,
     paddingHorizontal: 10,
     paddingVertical: 4,
     marginHorizontal: 12,
     marginVertical: 4,
     height: 32,
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   },
   searchInput: {
     flex: 1,
     marginLeft: 8,
     fontSize: 13,
-    color: buoyColors.text,
+    color: night.color.text,
     padding: 0,
     height: "100%"
   },

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

@@ -90,7 +90,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: 16,
     paddingVertical: 8,
-    backgroundColor: 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/module/ui/components/StorageTypeBadge.js

@@ -3,6 +3,7 @@
 import { View, Text, StyleSheet } from "react-native";
 import { Database, Lock, HardDrive } from "../../icons/index.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StorageTypeBadge({
   type,
@@ -13,13 +14,13 @@ export function StorageTypeBadge({
   const getStorageColor = () => {
     switch (type) {
       case "async":
-        return buoyColors.textSecondary;
+        return night.color.textSecondary;
       case "mmkv":
         return buoyColors.success;
       case "secure":
         return buoyColors.warning;
       default:
-        return buoyColors.textMuted;
+        return night.color.textTertiary;
     }
   };
   const getStorageText = () => {

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

@@ -1,8 +1,17 @@
 "use strict";
 
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { night } from "../night/nightTheme.js";
+import { jsx as _jsx, jsxs as _jsxs } from "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.
+ */
 export function TabSelector({
   tabs,
   activeTab,
@@ -10,60 +19,69 @@ export function TabSelector({
 }) {
   return /*#__PURE__*/_jsx(View, {
     style: styles.container,
-    children: tabs.map(tab => /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsxs(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__*/_jsx(Text, {
+          style: [styles.tabButtonText, active && styles.tabButtonTextActive],
+          children: tab.label
+        }), active ? /*#__PURE__*/_jsx(View, {
+          style: styles.underline
+        }) : null]
+      }, tab.key);
+    })
   });
 }
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
-    backgroundColor: buoyColors.hover,
-    borderRadius: 6,
-    padding: 2,
+    backgroundColor: night.color.bg,
+    borderRadius: night.radius.row,
     borderWidth: 1,
-    borderColor: buoyColors.border,
-    justifyContent: "space-evenly",
-    height: 28
+    borderColor: 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: night.radius.segment
   },
-  /**
-   * The selected tab is marked with an accent ring.
-   */
   tabButtonActive: {
-    backgroundColor: buoyColors.primary + "20",
-    borderWidth: 1,
-    borderColor: buoyColors.primary
-  },
-  tabButtonInactive: {
-    backgroundColor: "transparent"
+    backgroundColor: night.color.surfaceElevated
   },
   tabButtonText: {
     fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
+    fontWeight: "500",
+    color: night.color.textSecondary
   },
   tabButtonTextActive: {
-    color: buoyColors.primary
+    fontWeight: "600",
+    color: night.color.text
   },
-  tabButtonTextInactive: {
-    color: buoyColors.textMuted
+  underline: {
+    position: "absolute",
+    bottom: 1.5,
+    width: 20,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: night.color.accent,
+    shadowColor: night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 6
   }
 });

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

@@ -3,6 +3,7 @@
 import { View, Text, StyleSheet } from "react-native";
 import { CheckCircle, XCircle } from "../../icons/index.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ValueTypeBadge({
   type,
@@ -71,12 +72,12 @@ export function ValueTypeBadge({
         return buoyColors.primary;
       case "null":
       case "undefined":
-        return buoyColors.textMuted;
+        return night.color.textTertiary;
       case "object":
       case "array":
-        return buoyColors.textSecondary;
+        return night.color.textSecondary;
       default:
-        return buoyColors.textMuted;
+        return night.color.textTertiary;
     }
   };
   return /*#__PURE__*/_jsx(View, {
@@ -131,12 +132,12 @@ const styles = StyleSheet.create({
     backgroundColor: buoyColors.primary + "1A"
   },
   secondaryBadge: {
-    backgroundColor: buoyColors.textSecondary + "1A"
+    backgroundColor: night.color.textSecondary + "1A"
   },
   mutedBadge: {
-    backgroundColor: buoyColors.textMuted + "1A"
+    backgroundColor: night.color.textTertiary + "1A"
   },
   defaultBadge: {
-    backgroundColor: buoyColors.textMuted + "1A"
+    backgroundColor: night.color.textTertiary + "1A"
   }
 });

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

@@ -4,6 +4,7 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import { View, TouchableOpacity, TouchableWithoutFeedback, StyleSheet, Animated, Modal, Platform } from "react-native";
 import { X, Minus, DockBottom, FloatWindow } from "../../icons/index.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 
 // ============================================================================
 // Global expandable setting — controlled via setExpandableWindowControls()
@@ -68,7 +69,8 @@ export function WindowControls({
   onClose,
   onMinimize,
   onToggleMode,
-  mode
+  mode,
+  variant = "night"
 }) {
   // Show action-based icon: what will happen when clicked
   const ToggleModeIcon = mode === "floating" ? DockBottom : FloatWindow;
@@ -121,15 +123,18 @@ export 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] = useState(false);
   const [triggerLayout, setTriggerLayout] = useState(null);
   const expandAnim = useRef(new Animated.Value(0)).current;
@@ -263,38 +268,38 @@ function ExpandableWindowControls({
             }],
             children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
               children: /*#__PURE__*/_jsxs(View, {
-                style: styles.expandedContainer,
+                style: [styles.expandedContainer, isNight && styles.nightExpandedContainer],
                 children: [onMinimize && /*#__PURE__*/_jsx(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__*/_jsx(Minus, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#7A5A00",
+                    color: isNight ? night.color.warning : "#7A5A00",
                     strokeWidth: 2
                   })
                 }), onToggleMode && /*#__PURE__*/_jsx(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__*/_jsx(ToggleModeIcon, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#004A1A",
+                    color: isNight ? night.color.accent : "#004A1A",
                     strokeWidth: 2
                   })
                 }), /*#__PURE__*/_jsx(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__*/_jsx(X, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#4A0000",
+                    color: isNight ? night.color.danger : "#4A0000",
                     strokeWidth: 2
                   })
                 })]
@@ -377,5 +382,27 @@ const styles = 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: night.color.surface,
+    borderColor: night.color.border
+  },
+  nightMinimizeButton: {
+    backgroundColor: night.color.warningSoft,
+    borderWidth: 1,
+    borderColor: night.color.warning + "59"
+  },
+  nightToggleButton: {
+    backgroundColor: night.color.accentSoft,
+    borderWidth: 1,
+    borderColor: night.color.accentBorderStrong
+  },
+  nightCloseButton: {
+    backgroundColor: night.color.dangerSoft,
+    borderWidth: 1,
+    borderColor: night.color.danger + "59"
   }
 });

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

@@ -174,6 +174,14 @@ export const 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

package/lib/module/ui/night/nightTheme.js

@@ -0,0 +1,116 @@
+"use strict";
+
+/**
+ * "Night" design tokens — the Everlights surface language, ported.
+ *
+ * A near-black, smooth, borderless-feeling system built to sit ON TOP of the
+ * shared ToolBackground star field: one `#050505` sheet the field shows
+ * through, `#0C0C0C` cards with hairline `#1A1A1C` borders, `#161618` rows
+ * inside them, uppercase section labels OUTSIDE the cards, and a single green
+ * accent that takes dark ink.
+ *
+ * Values are lifted 1:1 from the Everlights app's `constants/theme.ts`
+ * (`Palette` + `DarkColors`) and its modal tokens — that app is the design
+ * reference, so when in doubt match it, don't invent.
+ *
+ * THE ACCENT IS ONE SEAM: everything green reads `night.color.accent*`. The
+ * family is Buoy's brand green (`buoyColors.primary`, #20C997 — kept as
+ * literals so this module stays import-free); swapping it is a seven-line
+ * change here and nowhere else. `onAccent` stays black — this green wants
+ * dark ink.
+ *
+ * SCOPE: piloted on the dial menu's settings modal (JsModal `variant="night"`
+ * + DevToolsSettingsModal). If it sticks, convert the other tools to it.
+ */
+
+export const night = {
+  color: {
+    /** The sheet itself — also the inset track of a segmented control. */
+    bg: "#050505",
+    /** A card. */
+    surface: "#0C0C0C",
+    /** A row or control inside a card. */
+    surfaceElevated: "#161618",
+    /** Hairline card border. */
+    border: "#1A1A1C",
+    /** Hairline between rows inside a card. */
+    separator: "rgba(255, 255, 255, 0.08)",
+    /** Neutral fills, lightest → strongest. */
+    fill: "rgba(255, 255, 255, 0.06)",
+    fillSecondary: "rgba(255, 255, 255, 0.08)",
+    fillTertiary: "rgba(255, 255, 255, 0.12)",
+    /** Chip resting fill — dark glass, readable over the star field. */
+    buttonSurface: "rgba(8, 10, 14, 0.85)",
+    /** Secondary/destructive button plate. */
+    button: "#1C1C1C",
+    buttonPressed: "#2C2C2E",
+    text: "#ECEDEE",
+    textSecondary: "#9BA1A6",
+    textTertiary: "#636366",
+    /** Drag handles, input placeholders. */
+    placeholder: "rgba(255, 255, 255, 0.30)",
+    /** The one accent (Buoy brand green). See the header note — one seam. */
+    accent: "#20C997",
+    accentPressed: "#1BAB80",
+    accentSoft: "rgba(32, 201, 151, 0.12)",
+    accentFill: "rgba(32, 201, 151, 0.18)",
+    accentBorder: "rgba(32, 201, 151, 0.20)",
+    accentBorderStrong: "rgba(32, 201, 151, 0.35)",
+    /** Ink on a filled accent surface — the accent takes DARK ink. */
+    onAccent: "#000000",
+    danger: "#FF3B30",
+    dangerSoft: "rgba(255, 59, 48, 0.10)",
+    warning: "#FF8329",
+    warningSoft: "rgba(255, 131, 41, 0.12)",
+    info: "#1E6DFF",
+    infoSoft: "rgba(30, 109, 255, 0.12)",
+    /** Switch thumb at rest (Everlights moon gray). */
+    knob: "#D4D8DC"
+  },
+  radius: {
+    /** Sheets and dialogs. */
+    sheet: 16,
+    /** Cards. */
+    card: 14,
+    /** Inputs and code blocks. */
+    input: 12,
+    /** Rows and inner controls; also the segmented-control track. */
+    row: 10,
+    /** Segment thumb inside a radius-10 track. */
+    segment: 8,
+    /** Small badges. */
+    badge: 6,
+    /** Zone-style chips. */
+    chip: 20,
+    /** Fully rounded pills (buttons use height/2 instead). */
+    pill: 999
+  },
+  /** Screen/sheet horizontal margin. */
+  gutter: 16,
+  /** Section labels sit 4pt in from the card edge. */
+  labelInset: 4,
+  /** Vertical rhythm between labeled card groups. */
+  groupGap: 24,
+  /** Card interior padding. */
+  cardPad: 14,
+  /** Row padding inside an edge-to-edge card. */
+  rowPadH: 16,
+  rowPadV: 14,
+  font: {
+    /** Sheet/modal titles. */
+    title: 17,
+    /** Row labels and values. */
+    row: 15,
+    /** Body copy, chip labels. */
+    body: 14,
+    /** Segmented-control labels, captions, footnotes. */
+    caption: 13,
+    /** Uppercase section labels. */
+    label: 12,
+    /** Uppercase micro labels (START/END style). */
+    micro: 11
+  }
+};
+
+/** Section labels track wide open, Everlights-style. */
+export const NIGHT_LABEL_TRACKING = 0.8;