@buoy-gg/jotai 7.0.25 → 7.0.27

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

@@ -9,7 +9,7 @@
 
 import { useState } from "react";
 import { View, Text, TextInput, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { SectionHeader, macOSColors, buoyColors, Filter, X } from "@buoy-gg/shared-ui";
+import { SectionHeader, night, Filter, X } from "@buoy-gg/shared-ui";
 import { jotaiStateStore } from "../utils/jotaiStateStore";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getAtomColorForPattern(pattern, atoms) {
@@ -40,7 +40,7 @@ export function JotaiEventFilterView({
       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: "REGISTERED ATOMS"
@@ -87,7 +87,7 @@ export function JotaiEventFilterView({
           onChangeText: setNewPattern,
           onSubmitEditing: handleAddPattern,
           placeholder: "Type a pattern and press Enter...",
-          placeholderTextColor: macOSColors.text.muted,
+          placeholderTextColor: night.color.placeholder,
           returnKeyType: "done",
           autoCapitalize: "none",
           autoCorrect: false,
@@ -99,7 +99,7 @@ export function JotaiEventFilterView({
       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: "ACTIVE FILTERS"
@@ -124,7 +124,7 @@ export function JotaiEventFilterView({
               children: pattern
             }), /*#__PURE__*/_jsx(X, {
               size: 12,
-              color: buoyColors.primary + "80"
+              color: night.color.accent + "80"
             })]
           }, pattern);
         })
@@ -134,7 +134,7 @@ export function JotaiEventFilterView({
       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 ATOM FILTERS WORK"
@@ -158,7 +158,8 @@ export function JotaiEventFilterView({
 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,
@@ -167,10 +168,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"
   },
   atomList: {
@@ -188,10 +189,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
   },
   atomRowFiltered: {
     opacity: 0.45
@@ -208,13 +209,13 @@ const styles = StyleSheet.create({
     fontFamily: "monospace"
   },
   atomRowTextFiltered: {
-    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: {
@@ -238,21 +239,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,
@@ -263,39 +264,39 @@ 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
   },
   emptyText: {
     fontSize: 11,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     paddingHorizontal: 16,
     paddingVertical: 12,
     fontFamily: "monospace"
   },
   patternInput: {
     borderWidth: 1,
-    borderColor: buoyColors.primary + "40",
+    borderColor: night.color.accentBorder,
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 8,
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
-    backgroundColor: buoyColors.input
+    backgroundColor: night.color.surfaceElevated
   }
 });

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

@@ -10,7 +10,7 @@
 
 import { useState, useMemo, useRef, useCallback, useEffect } from "react";
 import { View, Text, StyleSheet, FlatList, TextInput, TouchableOpacity } from "react-native";
-import { JsModal, ModalHeader, TabSelector, macOSColors, buoyColors, Search, Filter, Power, X, Box, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, macOSColors, night, Search, Filter, Power, X, Box, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { useJotaiAtomChanges } from "../hooks/useJotaiAtomChanges";
 import { JotaiAtomChangeItem } from "./JotaiAtomChangeItem";
@@ -25,7 +25,7 @@ function EventsEmptyState({
     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 atom changes"
@@ -272,12 +272,12 @@ export function JotaiModal({
           style: styles.headerSearchContainer,
           children: [/*#__PURE__*/_jsx(Search, {
             size: 14,
-            color: macOSColors.text.secondary
+            color: night.color.textSecondary
           }), /*#__PURE__*/_jsx(TextInput, {
             ref: searchInputRef,
             style: styles.headerSearchInput,
             placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
-            placeholderTextColor: macOSColors.text.muted,
+            placeholderTextColor: night.color.placeholder,
             value: searchText,
             onChangeText: handleSearch,
             onSubmitEditing: () => setIsSearchActive(false),
@@ -293,7 +293,7 @@ export function JotaiModal({
             style: styles.headerSearchClear,
             children: /*#__PURE__*/_jsx(X, {
               size: 14,
-              color: macOSColors.text.secondary
+              color: night.color.textSecondary
             })
           })]
         }) : /*#__PURE__*/_jsx(TabSelector, {
@@ -313,14 +313,14 @@ export function JotaiModal({
           style: styles.headerActionButton,
           children: /*#__PURE__*/_jsx(Search, {
             size: 14,
-            color: macOSColors.text.secondary
+            color: night.color.textSecondary
           })
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
           onPress: () => setShowFilters(true),
           style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
           children: /*#__PURE__*/_jsx(Filter, {
             size: 14,
-            color: hasActiveFilters ? macOSColors.semantic.debug : macOSColors.text.secondary
+            color: hasActiveFilters ? night.color.accent : night.color.textSecondary
           })
         }), activeTab === "atoms" && /*#__PURE__*/_jsx(ToolbarCopyButton, {
           value: getAtomsSnapshot,
@@ -382,7 +382,7 @@ export function JotaiModal({
         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 history yet"
@@ -407,7 +407,7 @@ export function JotaiModal({
         style: styles.disabledBanner,
         children: [/*#__PURE__*/_jsx(Power, {
           size: 14,
-          color: macOSColors.semantic.warning
+          color: night.color.warning
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.disabledText,
           children: "Atom capture is disabled"
@@ -520,7 +520,9 @@ const styles = StyleSheet.create({
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: 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,
@@ -531,21 +533,22 @@ const styles = StyleSheet.create({
   },
   container: {
     flex: 1,
-    backgroundColor: 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: macOSColors.background.input,
-    borderRadius: 10,
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: night.radius.row,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 5
   },
   headerSearchInput: {
     flex: 1,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     marginLeft: 6,
     paddingVertical: 2
@@ -558,14 +561,15 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
   headerActionButtonActive: {
-    backgroundColor: macOSColors.semantic.infoBackground
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   },
   disabledBanner: {
     flexDirection: "row",
@@ -574,13 +578,13 @@ const styles = StyleSheet.create({
     padding: 10,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: macOSColors.semantic.warningBackground,
+    backgroundColor: night.color.warningSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.semantic.warning + "20"
+    borderColor: night.color.warning + "20"
   },
   disabledText: {
-    color: macOSColors.semantic.warning,
+    color: night.color.warning,
     fontSize: 11,
     flex: 1
   },
@@ -593,14 +597,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
@@ -612,25 +616,26 @@ const styles = StyleSheet.create({
     padding: 10,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: buoyColors.primary + "15",
+    backgroundColor: night.color.accentSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.primary + "33"
+    borderColor: night.color.accentBorder
   },
   lockedText: {
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontSize: 11,
     fontWeight: "500",
     flex: 1
   },
   upgradeBadge: {
-    backgroundColor: buoyColors.primary,
+    backgroundColor: 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: night.color.onAccent,
     fontSize: 9,
     fontWeight: "700",
     letterSpacing: 0.5

package/lib/typescript/jotai/components/JotaiEventFilterView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JotaiEventFilterView.d.ts","sourceRoot":"","sources":["../../../../src/jotai/components/JotaiEventFilterView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAkBH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,UAAU,yBAAyB;IACjC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAYD,wBAAgB,oBAAoB,CAAC,EACnC,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,GACN,EAAE,yBAAyB,+BAwJ3B"}
+{"version":3,"file":"JotaiEventFilterView.d.ts","sourceRoot":"","sources":["../../../../src/jotai/components/JotaiEventFilterView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAiBH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,UAAU,yBAAyB;IACjC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAYD,wBAAgB,oBAAoB,CAAC,EACnC,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,GACN,EAAE,yBAAyB,+BAwJ3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/jotai",
-  "version": "7.0.25",
+  "version": "7.0.27",
   "description": "Jotai devtools inside your React Native app — every atom write shows prev → next, with per-atom history & live values. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -29,8 +29,8 @@
     "**/snapshotProvider.ts"
   ],
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.25",
-    "@buoy-gg/license": "^7.0.25"
+    "@buoy-gg/shared-ui": "^7.0.27",
+    "@buoy-gg/license": "^7.0.27"
   },
   "peerDependencies": {
     "jotai": ">=2.0.0",