@buoy-gg/jotai 7.0.25 → 7.0.27

package/lib/commonjs/jotai/components/JotaiModal.js

@@ -30,7 +30,7 @@ function EventsEmptyState({
     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 atom changes"
@@ -277,12 +277,12 @@ function JotaiModal({
           style: styles.headerSearchContainer,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
-            color: _sharedUi.macOSColors.text.secondary
+            color: _sharedUi.night.color.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
             ref: searchInputRef,
             style: styles.headerSearchInput,
             placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
-            placeholderTextColor: _sharedUi.macOSColors.text.muted,
+            placeholderTextColor: _sharedUi.night.color.placeholder,
             value: searchText,
             onChangeText: handleSearch,
             onSubmitEditing: () => setIsSearchActive(false),
@@ -298,7 +298,7 @@ function JotaiModal({
             style: styles.headerSearchClear,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
               size: 14,
-              color: _sharedUi.macOSColors.text.secondary
+              color: _sharedUi.night.color.textSecondary
             })
           })]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
@@ -318,14 +318,14 @@ function JotaiModal({
           style: styles.headerActionButton,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
-            color: _sharedUi.macOSColors.text.secondary
+            color: _sharedUi.night.color.textSecondary
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: () => setShowFilters(true),
           style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
             size: 14,
-            color: hasActiveFilters ? _sharedUi.macOSColors.semantic.debug : _sharedUi.macOSColors.text.secondary
+            color: hasActiveFilters ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
           })
         }), activeTab === "atoms" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
           value: getAtomsSnapshot,
@@ -387,7 +387,7 @@ function JotaiModal({
         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 history yet"
@@ -412,7 +412,7 @@ function JotaiModal({
         style: styles.disabledBanner,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.warning
+          color: _sharedUi.night.color.warning
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.disabledText,
           children: "Atom capture is disabled"
@@ -525,7 +525,9 @@ const styles = _reactNative.StyleSheet.create({
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
   },
   inlineHeader: {
     paddingHorizontal: 12,
@@ -536,21 +538,22 @@ const styles = _reactNative.StyleSheet.create({
   },
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.macOSColors.background.input,
-    borderRadius: 10,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    borderRadius: _sharedUi.night.radius.row,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 5
   },
   headerSearchInput: {
     flex: 1,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 13,
     marginLeft: 6,
     paddingVertical: 2
@@ -563,14 +566,15 @@ const styles = _reactNative.StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
   headerActionButtonActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   disabledBanner: {
     flexDirection: "row",
@@ -579,13 +583,13 @@ const styles = _reactNative.StyleSheet.create({
     padding: 10,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    backgroundColor: _sharedUi.night.color.warningSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.warning + "20"
+    borderColor: _sharedUi.night.color.warning + "20"
   },
   disabledText: {
-    color: _sharedUi.macOSColors.semantic.warning,
+    color: _sharedUi.night.color.warning,
     fontSize: 11,
     flex: 1
   },
@@ -598,14 +602,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
@@ -617,25 +621,26 @@ const styles = _reactNative.StyleSheet.create({
     padding: 10,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    backgroundColor: _sharedUi.night.color.accentSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "33"
+    borderColor: _sharedUi.night.color.accentBorder
   },
   lockedText: {
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontSize: 11,
     fontWeight: "500",
     flex: 1
   },
   upgradeBadge: {
-    backgroundColor: _sharedUi.buoyColors.primary,
+    backgroundColor: _sharedUi.night.color.accent,
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4
   },
   upgradeBadgeText: {
-    color: "#fff",
+    // Ink on a filled accent surface — the night accent takes dark ink.
+    color: _sharedUi.night.color.onAccent,
     fontSize: 9,
     fontWeight: "700",
     letterSpacing: 0.5

package/lib/module/jotai/components/JotaiAtomBrowser.js

@@ -9,7 +9,7 @@
 
 import { useState, useMemo, useCallback } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { CompactRow, macOSColors, buoyColors, Box, ExpandedInfoRow, PillBadge, parseValue } from "@buoy-gg/shared-ui";
+import { CompactRow, buoyColors, night, Box, ExpandedInfoRow, PillBadge, parseValue } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { jotaiStateStore } from "../utils/jotaiStateStore";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -111,7 +111,7 @@ function EmptyBrowserState() {
     style: styles.emptyState,
     children: [/*#__PURE__*/_jsx(Box, {
       size: 32,
-      color: macOSColors.text.muted
+      color: night.color.textTertiary
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.emptyTitle,
       children: "No atoms registered"
@@ -243,10 +243,10 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     letterSpacing: 0.5,
-    color: macOSColors.text.muted
+    color: night.color.textTertiary
   },
   sectionCountBadge: {
-    backgroundColor: buoyColors.primary + "26",
+    backgroundColor: night.color.accentFill,
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 4
@@ -254,7 +254,7 @@ const styles = StyleSheet.create({
   sectionCountText: {
     fontSize: 10,
     fontWeight: "700",
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontFamily: "monospace"
   },
   emptyState: {
@@ -262,14 +262,14 @@ const styles = StyleSheet.create({
     paddingVertical: 40
   },
   emptyTitle: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 14,
     fontWeight: "600",
     marginTop: 12,
     marginBottom: 6
   },
   emptyText: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 12,
     textAlign: "center",
     lineHeight: 18
@@ -288,15 +288,16 @@ const expandedStyles = StyleSheet.create({
     fontFamily: "monospace"
   },
   dataContainer: {
-    backgroundColor: buoyColors.base,
+    // Inset display panel — darker than the card, the night track color.
+    backgroundColor: night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     overflow: "hidden",
     minHeight: 60
   },
   primitiveText: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 12,
     fontFamily: "monospace",
     padding: 14

package/lib/module/jotai/components/JotaiAtomChangeItem.js

@@ -8,7 +8,7 @@
 
 import { memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, buoyColors, Zap, RelativeTime } from "@buoy-gg/shared-ui";
+import { CompactRow, buoyColors, night, Zap, RelativeTime } from "@buoy-gg/shared-ui";
 import { jotaiStateStore } from "../utils/jotaiStateStore";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getStatusLabel(category, atomLabel) {
@@ -16,7 +16,7 @@ function getStatusLabel(category, atomLabel) {
   return atomLabel.charAt(0).toUpperCase() + atomLabel.slice(1);
 }
 function getCategoryColor(category, atomLabel) {
-  if (category === "initial") return buoyColors.textMuted;
+  if (category === "initial") return night.color.textTertiary;
   return jotaiStateStore.getAtomColor(atomLabel);
 }
 function formatCompact(value, maxLen = 20) {

package/lib/module/jotai/components/JotaiAtomDetailContent.js

@@ -13,7 +13,7 @@
 
 import React, { memo, useState, useCallback, useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { macOSColors, buoyColors, EventStepperFooter, formatRelativeTime, parseValue, Info, Zap, FileText, Database, GitBranch, copyToClipboard, ProUpgradeModal, DiffModeTabs, CompareBar } from "@buoy-gg/shared-ui";
+import { buoyColors, night, EventStepperFooter, formatRelativeTime, parseValue, Info, Zap, FileText, Database, GitBranch, copyToClipboard, ProUpgradeModal, DiffModeTabs, CompareBar } from "@buoy-gg/shared-ui";
 import { DataViewer, SplitDiffViewer, TreeDiffViewer, diffThemes } from "@buoy-gg/shared-ui/dataViewer";
 import { useIsPro } from "@buoy-gg/license";
 import { jotaiStateStore } from "../utils/jotaiStateStore";
@@ -24,17 +24,17 @@ const VIEW_CONFIGS = [{
   key: "change",
   label: "CHANGE",
   icon: FileText,
-  activeColor: macOSColors.semantic.warning
+  activeColor: night.color.accent
 }, {
   key: "value",
   label: "VALUE",
   icon: Database,
-  activeColor: macOSColors.semantic.info
+  activeColor: night.color.accent
 }, {
   key: "diff",
   label: "DIFF",
   icon: GitBranch,
-  activeColor: macOSColors.semantic.success
+  activeColor: night.color.accent
 }];
 function DetailViewToggle({
   activeView,
@@ -57,12 +57,12 @@ function DetailViewToggle({
           style: toggleStyles.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: [toggleStyles.cardLabel, isActive && {
               color: config.activeColor
             }, isDisabled && {
-              color: macOSColors.text.muted
+              color: night.color.textTertiary
             }],
             children: config.label
           })]
@@ -79,8 +79,8 @@ function getCategoryInfo(category) {
     case "initial":
       return {
         label: "INITIAL",
-        color: buoyColors.textMuted,
-        bgColor: buoyColors.textMuted + "26"
+        color: night.color.textTertiary,
+        bgColor: night.color.textTertiary + "26"
       };
     default:
       return {
@@ -151,7 +151,7 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
           style: infoStyles.sectionHeaderLeft,
           children: [/*#__PURE__*/_jsx(Info, {
             size: 14,
-            color: buoyColors.primary
+            color: night.color.accent
           }), /*#__PURE__*/_jsx(Text, {
             style: infoStyles.sectionTitle,
             children: "CHANGE INFO"
@@ -219,7 +219,7 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
           style: infoStyles.sectionHeaderLeft,
           children: [/*#__PURE__*/_jsx(Zap, {
             size: 14,
-            color: buoyColors.primary
+            color: night.color.accent
           }), /*#__PURE__*/_jsx(Text, {
             style: infoStyles.sectionTitle,
             children: "CHANGED KEYS"
@@ -251,7 +251,7 @@ const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
         onTouchEnd: handleCopyValue,
         children: /*#__PURE__*/_jsx(Text, {
           style: [infoStyles.actionButtonText, {
-            color: buoyColors.primary
+            color: night.color.accent
           }],
           children: "COPY VALUE"
         })
@@ -455,7 +455,8 @@ export function JotaiAtomDetailFooter({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: macOSColors.background.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   contentArea: {
     flex: 1,
@@ -466,11 +467,11 @@ const styles = StyleSheet.create({
     padding: 14
   },
   contentCard: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 14,
     padding: 14,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   valueHeader: {
     flexDirection: "row",
@@ -480,7 +481,7 @@ const styles = StyleSheet.create({
   },
   valueLabel: {
     fontSize: 10,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     fontWeight: "600"
@@ -505,24 +506,25 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 4,
-    backgroundColor: macOSColors.background.input
+    backgroundColor: night.color.surfaceElevated
   },
   typeText: {
     fontSize: 9,
     fontWeight: "600",
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   },
   valueBox: {
-    backgroundColor: macOSColors.background.base,
+    // Inset code box — darker than the card, the night track color.
+    backgroundColor: night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.border.input,
+    borderColor: night.color.border,
     padding: 8
   },
   valueText: {
     fontSize: 12,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontFamily: "monospace",
     lineHeight: 18
   },
@@ -549,21 +551,22 @@ const toggleStyles = 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,
     paddingVertical: 10,
     paddingHorizontal: 10,
     justifyContent: "center"
   },
   cardActive: {
     borderWidth: 1.5,
-    backgroundColor: "rgba(0, 184, 230, 0.05)"
+    backgroundColor: night.color.accentSoft
   },
   cardDisabled: {
     opacity: 0.5
@@ -577,7 +580,7 @@ const toggleStyles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 0.5,
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   }
 });
 const infoStyles = StyleSheet.create({
@@ -590,12 +593,12 @@ const infoStyles = StyleSheet.create({
     gap: 16
   },
   card: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: buoyColors.primary + "4D",
+    borderColor: night.color.accentBorderStrong,
     overflow: "hidden",
-    shadowColor: buoyColors.primary,
+    shadowColor: night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -610,8 +613,8 @@ const infoStyles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.primary + "33",
-    backgroundColor: buoyColors.primary + "15"
+    borderBottomColor: night.color.accentBorder,
+    backgroundColor: night.color.accentSoft
   },
   sectionHeaderLeft: {
     flexDirection: "row",
@@ -622,7 +625,7 @@ const infoStyles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     letterSpacing: 0.5,
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontFamily: "monospace"
   },
   cardContent: {
@@ -636,12 +639,12 @@ const infoStyles = StyleSheet.create({
   },
   infoLabel: {
     fontSize: 11,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontWeight: "500"
   },
   infoValue: {
     fontSize: 11,
-    color: buoyColors.text,
+    color: night.color.text,
     fontWeight: "500",
     flex: 1,
     textAlign: "right",
@@ -684,12 +687,12 @@ const infoStyles = StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: buoyColors.input
+    backgroundColor: night.color.surfaceElevated
   },
   noChangesText: {
     fontSize: 9,
     fontWeight: "600",
-    color: buoyColors.textMuted
+    color: night.color.textTertiary
   },
   keysContainer: {
     flexDirection: "row",
@@ -700,26 +703,26 @@ const infoStyles = StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4,
-    backgroundColor: buoyColors.primary + "20",
+    backgroundColor: night.color.accentSoft,
     borderWidth: 1,
-    borderColor: buoyColors.primary + "40"
+    borderColor: night.color.accentBorder
   },
   keyText: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontFamily: "monospace"
   },
   countBadge: {
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: buoyColors.primary + "26"
+    backgroundColor: night.color.accentFill
   },
   countText: {
     fontSize: 9,
     fontWeight: "700",
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontFamily: "monospace"
   },
   actionsRow: {
@@ -733,8 +736,8 @@ const infoStyles = StyleSheet.create({
     borderWidth: 1
   },
   actionButtonCopy: {
-    borderColor: buoyColors.primary + "40",
-    backgroundColor: buoyColors.primary + "15"
+    borderColor: night.color.accentBorder,
+    backgroundColor: night.color.accentSoft
   },
   actionButtonText: {
     fontSize: 10,