@buoy-gg/shared-ui 7.0.26 → 7.0.28

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

@@ -2,6 +2,7 @@
 
 import { View, Text, StyleSheet } from "react-native";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 
 // Badge variants
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -11,9 +12,9 @@ const STATUS_COLORS = {
   error: buoyColors.error,
   warning: buoyColors.warning,
   info: buoyColors.primary,
-  pending: buoyColors.textSecondary,
+  pending: night.color.textSecondary,
   active: buoyColors.success,
-  inactive: buoyColors.textMuted,
+  inactive: night.color.textTertiary,
   stale: buoyColors.warning,
   fetching: buoyColors.primary
 };
@@ -23,9 +24,9 @@ const METHOD_COLORS = {
   GET: buoyColors.success,
   POST: buoyColors.primary,
   PUT: buoyColors.warning,
-  PATCH: buoyColors.textSecondary,
+  PATCH: night.color.textSecondary,
   DELETE: buoyColors.error,
-  HEAD: buoyColors.textMuted,
+  HEAD: night.color.textTertiary,
   OPTIONS: buoyColors.primary
 };
 
@@ -183,13 +184,13 @@ function getTypeColor(type) {
     string: buoyColors.primary,
     number: buoyColors.primary,
     boolean: buoyColors.primary,
-    object: buoyColors.textSecondary,
-    array: buoyColors.textSecondary,
-    null: buoyColors.textMuted,
-    undefined: buoyColors.textMuted,
-    function: buoyColors.textSecondary
+    object: night.color.textSecondary,
+    array: night.color.textSecondary,
+    null: night.color.textTertiary,
+    undefined: night.color.textTertiary,
+    function: night.color.textSecondary
   };
-  return typeColors[type.toLowerCase()] || buoyColors.textMuted;
+  return typeColors[type.toLowerCase()] || night.color.textTertiary;
 }
 const styles = StyleSheet.create({
   statusDot: {

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

@@ -2,7 +2,7 @@
 
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { ChevronDown, ChevronRight } 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 CompactRow({
   statusDotColor,
@@ -21,19 +21,27 @@ export function CompactRow({
   isSelected,
   onPress,
   disabled,
-  expandedGlowColor
+  expandedGlowColor,
+  testID,
+  accessibilityLabel
 }) {
   return /*#__PURE__*/_jsx(View, {
-    style: styles.rowWrapper,
+    style: [styles.rowWrapper, isExpanded && styles.rowWrapperExpanded],
     children: /*#__PURE__*/_jsxs(View, {
       style: [styles.row, isSelected && styles.selectedRow, isExpanded && [styles.expandedRowActive, {
-        borderColor: expandedGlowColor || buoyColors.primary,
-        shadowColor: expandedGlowColor || buoyColors.primary
+        borderColor: expandedGlowColor || 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 || night.color.accent,
+        shadowColor: expandedGlowColor || night.color.accent
       }]],
       children: [/*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: onPress,
         activeOpacity: 0.8,
         disabled: disabled || !onPress,
+        testID: testID,
+        accessibilityLabel: accessibilityLabel,
         children: /*#__PURE__*/_jsxs(View, {
           style: styles.rowContent,
           children: [/*#__PURE__*/_jsxs(View, {
@@ -88,10 +96,10 @@ export function CompactRow({
               style: styles.chevronContainer,
               children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
                 size: 14,
-                color: buoyColors.textMuted
+                color: night.color.textTertiary
               }) : /*#__PURE__*/_jsx(ChevronRight, {
                 size: 14,
-                color: buoyColors.textMuted
+                color: night.color.textTertiary
               })
             })]
           })]
@@ -109,15 +117,23 @@ const styles = 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: 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: buoyColors.border + "40",
+    borderColor: 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: buoyColors.border + "40",
+    borderBottomColor: night.color.separator,
     padding: 12,
     paddingHorizontal: 12,
     transform: [{
@@ -127,12 +143,12 @@ const styles = 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: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "50",
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong,
     transform: [{
       scale: 1.01
     }],
-    shadowColor: buoyColors.primary,
+    shadowColor: night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -146,6 +162,7 @@ const styles = StyleSheet.create({
       scale: 1.02
     }],
     borderWidth: 2,
+    paddingBottom: 16,
     shadowOffset: {
       width: 0,
       height: 0
@@ -183,7 +200,7 @@ const styles = StyleSheet.create({
   },
   observerText: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     marginTop: 1
   },
   querySection: {
@@ -193,7 +210,7 @@ const styles = StyleSheet.create({
   queryHash: {
     fontFamily: "monospace",
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     lineHeight: 16
   },
   secondaryRow: {
@@ -204,7 +221,7 @@ const styles = StyleSheet.create({
   },
   secondaryText: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     marginTop: 1
   },
   rightSection: {
@@ -229,12 +246,12 @@ const styles = StyleSheet.create({
     marginTop: 8,
     paddingTop: 8,
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border + "20",
+    borderTopColor: night.color.separator,
     marginLeft: 24 // Align with content after status dot
   },
   bottomRightText: {
     fontSize: 9,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   }
 });

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

@@ -184,10 +184,10 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
       onPress: copyState === "idle" || !isPro ? handlePress : undefined,
       activeOpacity: 0.7,
       hitSlop: {
-        top: 8,
-        bottom: 8,
-        left: 8,
-        right: 8
+        top: 4,
+        bottom: 4,
+        left: 4,
+        right: 4
       },
       accessibilityLabel: copyState === "idle" ? "Copy to clipboard" : copyState === "success" ? "Copied to clipboard" : "Failed to copy",
       accessibilityRole: "button",
@@ -212,6 +212,8 @@ const styles = StyleSheet.create({
     padding: 4,
     justifyContent: "center",
     alignItems: "center",
+    alignSelf: "flex-start",
+    overflow: "hidden",
     // Only relevant when a `label` is present; a bare icon button has one
     // child, so the row direction and gap cost it nothing.
     flexDirection: "row",

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

@@ -15,7 +15,7 @@
  */
 
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 
 /**
  * Standard card dimensions - adjust these to change all DevTools cards globally
@@ -44,7 +44,8 @@ export function DevToolsCard({
   activeOpacity = 0.8,
   style,
   contentStyle,
-  testID
+  testID,
+  accessibilityLabel
 }) {
   const isInteractive = !!onPress || !!onLongPress;
 
@@ -53,6 +54,7 @@ export function DevToolsCard({
     return /*#__PURE__*/_jsx(View, {
       style: [styles.wrapper, style],
       testID: testID,
+      accessibilityLabel: accessibilityLabel,
       children: /*#__PURE__*/_jsx(View, {
         style: [styles.card, isSelected && styles.selectedCard, contentStyle],
         children: children
@@ -70,6 +72,7 @@ export function DevToolsCard({
       activeOpacity: activeOpacity,
       disabled: disabled,
       testID: testID,
+      accessibilityLabel: accessibilityLabel,
       children: children
     })
   });
@@ -85,23 +88,27 @@ const styles = StyleSheet.create({
     marginVertical: DEVTOOLS_CARD_CONSTANTS.marginVertical
   },
   card: {
-    backgroundColor: 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: buoyColors.border + "40",
+    borderColor: 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: buoyColors.border + "40",
+    borderBottomColor: 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: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "50",
-    shadowColor: buoyColors.primary,
+    // The night selection language: soft accent fill + accent border.
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong,
+    shadowColor: night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0

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

@@ -7,6 +7,7 @@ import { SectionHeader } from "./SectionHeader.js";
 import { FilterList, AddFilterInput, AddFilterButton } from "./FilterComponents.js";
 import { useFilterManager } from "../../hooks/useFilterManager.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function DynamicFilterView({
   sections = [],
@@ -60,7 +61,7 @@ export function DynamicFilterView({
         style: [styles.tabButton, currentActiveTab === tab.id ? styles.tabButtonActive : styles.tabButtonInactive],
         children: [tab.icon && /*#__PURE__*/_jsx(tab.icon, {
           size: 14,
-          color: currentActiveTab === tab.id ? buoyColors.primary : buoyColors.textMuted
+          color: currentActiveTab === tab.id ? buoyColors.primary : night.color.textTertiary
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.tabButtonText, currentActiveTab === tab.id ? styles.tabButtonTextActive : styles.tabButtonTextInactive],
           children: tab.label
@@ -300,7 +301,7 @@ export function DynamicFilterView({
         children: [/*#__PURE__*/_jsxs(SectionHeader, {
           children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
             icon: howItWorksSection.icon || Filter,
-            color: buoyColors.textSecondary,
+            color: night.color.textSecondary,
             size: 12
           }), /*#__PURE__*/_jsx(SectionHeader.Title, {
             children: howItWorksSection.title || "HOW FILTERS WORK"
@@ -351,7 +352,8 @@ export function DynamicFilterView({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so the host modal's night star field shows through.
+    backgroundColor: "transparent"
   },
   content: {
     flex: 1
@@ -366,9 +368,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
     gap: 8,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.border
+    borderBottomColor: night.color.border
   },
   tabButton: {
     flex: 1,
@@ -388,14 +390,14 @@ const styles = 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: buoyColors.primary + "20",
     borderColor: buoyColors.primary,
     borderWidth: 2
   },
   tabButtonInactive: {
-    backgroundColor: buoyColors.hover,
-    borderColor: buoyColors.border
+    backgroundColor: night.color.surfaceElevated,
+    borderColor: night.color.border
   },
   tabButtonText: {
     fontSize: 11,
@@ -406,7 +408,7 @@ const styles = StyleSheet.create({
     color: buoyColors.primary
   },
   tabButtonTextInactive: {
-    color: buoyColors.textMuted
+    color: night.color.textTertiary
   },
   tabBadge: {
     backgroundColor: buoyColors.primary + "40",
@@ -434,7 +436,7 @@ const styles = StyleSheet.create({
     marginTop: 8
   },
   filterCard: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 12,
     // rounded-xl
     paddingHorizontal: 8,
@@ -443,7 +445,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     width: 72,
     minHeight: 68
   },
@@ -467,7 +469,7 @@ const styles = StyleSheet.create({
   filterCountActive: {
     fontSize: 14,
     fontWeight: "700",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     marginTop: 3,
     marginBottom: 1,
@@ -481,14 +483,14 @@ const styles = StyleSheet.create({
   filterCountZero: {
     fontSize: 11,
     fontWeight: "500",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace",
     marginTop: 3,
     marginBottom: 1
   },
   filterLabelCompact: {
     fontSize: 10,
-    color: buoyColors.text,
+    color: night.color.text,
     fontWeight: "600",
     textAlign: "center",
     textTransform: "capitalize",
@@ -501,14 +503,14 @@ const styles = StyleSheet.create({
   },
   filterDescriptionBottom: {
     fontSize: 8,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     textAlign: "center",
     marginTop: 2,
     lineHeight: 11
   },
   sectionDescription: {
     fontSize: 10,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     marginTop: 4,
     marginBottom: 4,
     lineHeight: 14
@@ -529,11 +531,11 @@ const styles = StyleSheet.create({
     fontFamily: "monospace"
   },
   activeFiltersSection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -544,17 +546,17 @@ const styles = StyleSheet.create({
     maxHeight: 200
   },
   includeOnlySection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   includeOnlyDescription: {
     fontSize: 10,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     paddingHorizontal: 16,
     paddingTop: 8,
     lineHeight: 14
@@ -570,17 +572,17 @@ const styles = StyleSheet.create({
     maxHeight: 150
   },
   excludeFiltersSection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   excludeFiltersDescription: {
     fontSize: 10,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     paddingHorizontal: 16,
     paddingTop: 8,
     lineHeight: 14
@@ -616,7 +618,7 @@ const styles = StyleSheet.create({
   },
   filterSummaryText: {
     fontSize: 11,
-    color: buoyColors.text,
+    color: night.color.text,
     lineHeight: 16
   },
   filterSummaryInclude: {
@@ -629,17 +631,17 @@ const styles = StyleSheet.create({
   },
   emptyStateText: {
     fontSize: 11,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontStyle: "italic",
     textAlign: "center",
     paddingVertical: 12
   },
   availableKeysSection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -655,31 +657,31 @@ 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,
     marginBottom: 8
   },
   availableKeyText: {
     flex: 1,
     fontSize: 11,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     marginRight: 8
   },
   howItWorksSection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   howItWorksText: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     lineHeight: 16,
     marginBottom: 12,
     marginTop: 8,
@@ -691,29 +693,29 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 16,
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border
+    borderTopColor: night.color.border
   },
   examplesTitle: {
     fontSize: 10,
     fontWeight: "600",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace",
     lineHeight: 16
   },
   previewSection: {
-    backgroundColor: buoyColors.hover,
+    backgroundColor: night.color.surfaceElevated,
     // Slightly lighter to distinguish from other sections
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.borderStrong,
+    borderColor: night.color.fillTertiary,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -721,12 +723,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 12,
     paddingBottom: 16,
-    backgroundColor: buoyColors.base,
+    backgroundColor: night.color.bg,
     // Darker content area for contrast
     marginHorizontal: 12,
     marginBottom: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   }
 });