@buoy-gg/zustand 7.0.26 → 7.0.27

package/lib/commonjs/zustand/components/ZustandStateInfoView.js

@@ -41,8 +41,8 @@ function getCategoryInfo(category) {
     case "initial":
       return {
         label: "INITIAL",
-        color: _sharedUi.buoyColors.textMuted,
-        bgColor: _sharedUi.buoyColors.textMuted + "26"
+        color: _sharedUi.night.color.textTertiary,
+        bgColor: _sharedUi.night.color.textTertiary + "26"
       };
     default:
       return {
@@ -68,7 +68,7 @@ function SectionHeader({
       style: styles.sectionHeaderLeft,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
         size: 14,
-        color: _sharedUi.buoyColors.primary
+        color: _sharedUi.night.color.accent
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.sectionTitle,
         children: title
@@ -175,7 +175,7 @@ const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _re
             style: [styles.durationBadge, change.isSlowUpdate && styles.durationBadgeSlow],
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
               size: 10,
-              color: change.isSlowUpdate ? _sharedUi.buoyColors.error : _sharedUi.buoyColors.textSecondary
+              color: change.isSlowUpdate ? _sharedUi.buoyColors.error : _sharedUi.night.color.textSecondary
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.durationText, change.isSlowUpdate && styles.durationTextSlow],
               children: formatDuration(change.duration)
@@ -304,12 +304,12 @@ const styles = _reactNative.StyleSheet.create({
     gap: 16
   },
   card: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "4D",
+    borderColor: _sharedUi.night.color.accentBorderStrong,
     overflow: "hidden",
-    shadowColor: _sharedUi.buoyColors.primary,
+    shadowColor: _sharedUi.night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -324,8 +324,8 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.primary + "33",
-    backgroundColor: _sharedUi.buoyColors.primary + "15"
+    borderBottomColor: _sharedUi.night.color.accentBorder,
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   sectionHeaderLeft: {
     flexDirection: "row",
@@ -336,7 +336,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     letterSpacing: 0.5,
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
   },
   cardContent: {
@@ -350,12 +350,12 @@ const styles = _reactNative.StyleSheet.create({
   },
   infoLabel: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "500"
   },
   infoValue: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontWeight: "500",
     flex: 1,
     textAlign: "right",
@@ -387,7 +387,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   durationBadgeSlow: {
     backgroundColor: _sharedUi.buoyColors.error + "26"
@@ -395,7 +395,7 @@ const styles = _reactNative.StyleSheet.create({
   durationText: {
     fontSize: 9,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace"
   },
   durationTextSlow: {
@@ -419,12 +419,12 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   noChangesText: {
     fontSize: 9,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   persistBadge: {
     flexDirection: "row",
@@ -450,52 +450,53 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.primary + "20",
+    backgroundColor: _sharedUi.night.color.accentSoft,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "40"
+    borderColor: _sharedUi.night.color.accentBorder
   },
   keyText: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
   },
   countBadge: {
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.primary + "26"
+    backgroundColor: _sharedUi.night.color.accentFill
   },
   countText: {
     fontSize: 9,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
   },
   typeBadge: {
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 3,
-    backgroundColor: _sharedUi.buoyColors.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   typeText: {
     fontSize: 8,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   dataViewerContainer: {
-    backgroundColor: _sharedUi.buoyColors.base,
+    // Inset display panel — darker than the card, the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     minHeight: 60
   },
   updaterText: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   updaterSubtext: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     lineHeight: 16,
     marginTop: 4
   },

package/lib/commonjs/zustand/components/ZustandStoreBrowser.js

@@ -120,7 +120,7 @@ function LoadingBrowserState() {
     style: styles.emptyState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
       size: "small",
-      color: _sharedUi.macOSColors.text.muted
+      color: _sharedUi.night.color.textTertiary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyTitle,
       children: "Loading stores\u2026"
@@ -135,7 +135,7 @@ function EmptyBrowserState() {
     style: styles.emptyState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
       size: 32,
-      color: _sharedUi.macOSColors.text.muted
+      color: _sharedUi.night.color.textTertiary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyTitle,
       children: "No stores registered"
@@ -270,10 +270,10 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     letterSpacing: 0.5,
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   },
   sectionCountBadge: {
-    backgroundColor: _sharedUi.buoyColors.primary + "26",
+    backgroundColor: _sharedUi.night.color.accentFill,
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 4
@@ -281,7 +281,7 @@ const styles = _reactNative.StyleSheet.create({
   sectionCountText: {
     fontSize: 10,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
   },
   emptyState: {
@@ -289,14 +289,14 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 40
   },
   emptyTitle: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 14,
     fontWeight: "600",
     marginTop: 12,
     marginBottom: 6
   },
   emptyText: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12,
     textAlign: "center",
     lineHeight: 18
@@ -315,15 +315,16 @@ const expandedStyles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   dataContainer: {
-    backgroundColor: _sharedUi.buoyColors.base,
+    // Inset display panel — darker than the card, the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden",
     minHeight: 60
   },
   emptyText: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12,
     padding: 14,
     fontStyle: "italic"

package/lib/module/zustand/components/ZustandActionButton.js

@@ -8,32 +8,32 @@
  */
 
 import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const buttonConfigs = {
   copy: {
-    color: buoyColors.primary,
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40",
-    textColor: buoyColors.primary
+    color: night.color.accent,
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorder,
+    textColor: night.color.accent
   },
   reset: {
-    color: buoyColors.warning,
-    backgroundColor: buoyColors.warning + "15",
-    borderColor: buoyColors.warning + "40",
-    textColor: buoyColors.warning
+    color: night.color.warning,
+    backgroundColor: night.color.warningSoft,
+    borderColor: night.color.warning + "40",
+    textColor: night.color.warning
   },
   clear: {
-    color: buoyColors.error,
-    backgroundColor: buoyColors.error + "15",
-    borderColor: buoyColors.error + "40",
-    textColor: buoyColors.error
+    color: night.color.danger,
+    backgroundColor: night.color.dangerSoft,
+    borderColor: night.color.danger + "40",
+    textColor: night.color.danger
   },
   jump: {
-    color: buoyColors.warning,
-    backgroundColor: buoyColors.warning + "15",
-    borderColor: buoyColors.warning + "40",
-    textColor: buoyColors.warning
+    color: night.color.warning,
+    backgroundColor: night.color.warningSoft,
+    borderColor: night.color.warning + "40",
+    textColor: night.color.warning
   }
 };
 export function ZustandActionButton({
@@ -47,8 +47,8 @@ export function ZustandActionButton({
     disabled: disabled,
     onPress: onPress,
     style: [styles.button, {
-      backgroundColor: disabled ? buoyColors.textMuted + "1A" : config.backgroundColor,
-      borderColor: disabled ? buoyColors.textMuted + "33" : config.borderColor,
+      backgroundColor: disabled ? night.color.textTertiary + "1A" : config.backgroundColor,
+      borderColor: disabled ? night.color.textTertiary + "33" : config.borderColor,
       opacity: disabled ? 0.5 : 1
     }],
     activeOpacity: 0.7,
@@ -59,11 +59,11 @@ export function ZustandActionButton({
     },
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.dot, {
-        backgroundColor: disabled ? buoyColors.textMuted : config.color
+        backgroundColor: disabled ? night.color.textTertiary : config.color
       }]
     }), /*#__PURE__*/_jsx(Text, {
       style: [styles.text, {
-        color: disabled ? buoyColors.textMuted : config.textColor
+        color: disabled ? night.color.textTertiary : config.textColor
       }],
       children: text
     })]
@@ -93,7 +93,7 @@ const styles = StyleSheet.create({
     height: 5,
     borderRadius: 3,
     marginRight: 6,
-    shadowColor: buoyColors.text,
+    shadowColor: night.color.text,
     shadowOffset: {
       width: 0,
       height: 0

package/lib/module/zustand/components/ZustandDetailViewToggle.js

@@ -9,26 +9,26 @@
 
 import React, { memo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { macOSColors, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
+import { night, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const VIEW_CONFIGS = [{
   key: "change",
   label: "CHANGE",
   description: "View change details",
   icon: FileText,
-  activeColor: macOSColors.semantic.warning
+  activeColor: night.color.accent
 }, {
   key: "state",
   label: "STATE",
   description: "View current state",
   icon: Database,
-  activeColor: macOSColors.semantic.info
+  activeColor: night.color.accent
 }, {
   key: "diff",
   label: "DIFF",
   description: "Compare changes",
   icon: GitBranch,
-  activeColor: macOSColors.semantic.success
+  activeColor: night.color.accent
 }];
 export const ZustandDetailViewToggle = /*#__PURE__*/memo(function ZustandDetailViewToggle({
   activeView,
@@ -52,7 +52,7 @@ export const ZustandDetailViewToggle = /*#__PURE__*/memo(function ZustandDetailV
           style: styles.cardContent,
           children: [/*#__PURE__*/_jsx(IconComponent, {
             size: 14,
-            color: isActive ? config.activeColor : isDisabled ? macOSColors.text.muted : macOSColors.text.secondary
+            color: isActive ? config.activeColor : isDisabled ? night.color.textTertiary : night.color.textSecondary
           }), /*#__PURE__*/_jsx(Text, {
             style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
               color: config.activeColor
@@ -72,21 +72,22 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     gap: 8,
     padding: 14,
-    backgroundColor: macOSColors.background.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   card: {
     flex: 1,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     padding: 10,
     gap: 4
   },
   cardActive: {
     borderWidth: 1.5,
-    backgroundColor: "rgba(0, 184, 230, 0.05)",
-    shadowColor: macOSColors.semantic.info,
+    backgroundColor: night.color.accentSoft,
+    shadowColor: night.color.accent,
     shadowOffset: {
       width: 0,
       height: 2
@@ -107,23 +108,23 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 0.5,
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   },
   cardLabelActive: {
-    color: macOSColors.text.primary
+    color: night.color.text
   },
   cardLabelDisabled: {
-    color: macOSColors.text.muted
+    color: night.color.textTertiary
   },
   cardDescription: {
     fontSize: 9,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     lineHeight: 12
   },
   cardDescriptionActive: {
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   },
   cardDescriptionDisabled: {
-    color: macOSColors.text.muted
+    color: night.color.textTertiary
   }
 });

package/lib/module/zustand/components/ZustandEventFilterView.js

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
-import { Filter, X, SectionHeader, AddFilterButton, AddFilterInput, macOSColors, buoyColors } from "@buoy-gg/shared-ui";
+import { Filter, X, SectionHeader, AddFilterButton, AddFilterInput, night } from "@buoy-gg/shared-ui";
 import { zustandStateStore } from "../utils/zustandStateStore";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Returns the store color for a given pattern if it exactly matches a registered store name */
@@ -42,7 +42,7 @@ export function ZustandEventFilterView({
           children: "REGISTERED STORES"
         }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
           count: stores.length,
-          color: buoyColors.primary
+          color: night.color.accent
         })]
       }), /*#__PURE__*/_jsx(ScrollView, {
         style: styles.storeList,
@@ -58,7 +58,7 @@ export function ZustandEventFilterView({
             disabled: filtered,
             children: [/*#__PURE__*/_jsx(View, {
               style: [styles.storeDot, {
-                backgroundColor: filtered ? macOSColors.text.disabled : storeColor
+                backgroundColor: filtered ? night.color.textTertiary : storeColor
               }]
             }), /*#__PURE__*/_jsx(Text, {
               style: [styles.storeRowText, filtered && styles.storeRowTextFiltered, !filtered && {
@@ -83,19 +83,19 @@ export function ZustandEventFilterView({
       children: [/*#__PURE__*/_jsxs(SectionHeader, {
         children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
           icon: Filter,
-          color: buoyColors.primary,
+          color: night.color.accent,
           size: 12
         }), /*#__PURE__*/_jsx(SectionHeader.Title, {
           children: "STORE NAME FILTERS"
         }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
           count: ignoredPatterns.size,
-          color: buoyColors.primary
+          color: night.color.accent
         })]
       }), /*#__PURE__*/_jsx(View, {
         style: styles.addInputWrapper,
         children: !showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
           onPress: () => setShowAddInput(true),
-          color: buoyColors.primary,
+          color: night.color.accent,
           label: "Add store name pattern"
         }) : /*#__PURE__*/_jsx(AddFilterInput, {
           value: inputValue,
@@ -106,7 +106,7 @@ export function ZustandEventFilterView({
             setInputValue("");
           },
           placeholder: "Enter store name pattern to hide...",
-          color: buoyColors.primary
+          color: night.color.accent
         })
       }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsx(View, {
         style: styles.patternList,
@@ -128,7 +128,7 @@ export function ZustandEventFilterView({
               children: pattern
             }), /*#__PURE__*/_jsx(X, {
               size: 12,
-              color: buoyColors.primary + "80"
+              color: night.color.accent + "80"
             })]
           }, pattern);
         })
@@ -138,7 +138,7 @@ export function ZustandEventFilterView({
       children: [/*#__PURE__*/_jsxs(SectionHeader, {
         children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
           icon: Filter,
-          color: buoyColors.textSecondary,
+          color: night.color.textSecondary,
           size: 12
         }), /*#__PURE__*/_jsx(SectionHeader.Title, {
           children: "HOW EVENT FILTERS WORK"
@@ -162,7 +162,8 @@ export function ZustandEventFilterView({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   scrollContent: {
     paddingTop: 16,
@@ -171,10 +172,10 @@ const styles = StyleSheet.create({
     gap: 16
   },
   section: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     overflow: "hidden"
   },
   storeList: {
@@ -192,10 +193,10 @@ const styles = StyleSheet.create({
     gap: 10,
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: buoyColors.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   },
   storeRowFiltered: {
     opacity: 0.45
@@ -212,13 +213,13 @@ const styles = StyleSheet.create({
     fontFamily: "monospace"
   },
   storeRowTextFiltered: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     textDecorationLine: "line-through"
   },
   filteredLabel: {
     fontSize: 10,
     fontWeight: "500",
-    color: macOSColors.text.disabled,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   },
   addLabel: {
@@ -242,21 +243,21 @@ 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,
     gap: 8
   },
   patternText: {
     flex: 1,
     fontSize: 12,
     fontFamily: "monospace",
-    color: buoyColors.text
+    color: night.color.text
   },
   howItWorksText: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     lineHeight: 16,
     marginTop: 8,
     paddingHorizontal: 16,
@@ -267,20 +268,20 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 16,
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border,
+    borderTopColor: night.color.border,
     marginTop: 12
   },
   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
   }