@buoy-gg/zustand 7.0.41 → 7.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +11 -76
  2. package/lib/commonjs/index.js +1 -105
  3. package/lib/commonjs/preset.js +1 -102
  4. package/lib/commonjs/zustand/components/ZustandActionButton.js +1 -118
  5. package/lib/commonjs/zustand/components/ZustandDetailViewToggle.js +1 -48
  6. package/lib/commonjs/zustand/components/ZustandEventFilterView.js +1 -43
  7. package/lib/commonjs/zustand/components/ZustandIcon.js +1 -18
  8. package/lib/commonjs/zustand/components/ZustandModal.js +1 -772
  9. package/lib/commonjs/zustand/components/ZustandStateChangeItem.js +1 -117
  10. package/lib/commonjs/zustand/components/ZustandStateDetailContent.js +1 -372
  11. package/lib/commonjs/zustand/components/ZustandStateInfoView.js +1 -488
  12. package/lib/commonjs/zustand/components/ZustandStoreBrowser.js +1 -204
  13. package/lib/commonjs/zustand/components/ZustandStoreDetailContent.js +1 -471
  14. package/lib/commonjs/zustand/hooks/useZustandStateChanges.js +1 -74
  15. package/lib/commonjs/zustand/sync/zustandSyncAdapter.js +1 -418
  16. package/lib/commonjs/zustand/types/index.js +1 -1
  17. package/lib/commonjs/zustand/utils/buoyZustandMiddleware.js +1 -284
  18. package/lib/commonjs/zustand/utils/editableState.js +1 -146
  19. package/lib/commonjs/zustand/utils/snapshotProvider.js +1 -209
  20. package/lib/commonjs/zustand/utils/testIDs.js +1 -82
  21. package/lib/commonjs/zustand/utils/zustandStateStore.js +1 -379
  22. package/lib/module/index.js +1 -90
  23. package/lib/module/preset.js +1 -98
  24. package/lib/module/zustand/components/ZustandActionButton.js +1 -114
  25. package/lib/module/zustand/components/ZustandDetailViewToggle.js +1 -43
  26. package/lib/module/zustand/components/ZustandEventFilterView.js +1 -39
  27. package/lib/module/zustand/components/ZustandIcon.js +1 -11
  28. package/lib/module/zustand/components/ZustandModal.js +1 -767
  29. package/lib/module/zustand/components/ZustandStateChangeItem.js +1 -113
  30. package/lib/module/zustand/components/ZustandStateDetailContent.js +1 -368
  31. package/lib/module/zustand/components/ZustandStateInfoView.js +1 -483
  32. package/lib/module/zustand/components/ZustandStoreBrowser.js +1 -200
  33. package/lib/module/zustand/components/ZustandStoreDetailContent.js +1 -469
  34. package/lib/module/zustand/hooks/useZustandStateChanges.js +1 -70
  35. package/lib/module/zustand/sync/zustandSyncAdapter.js +1 -415
  36. package/lib/module/zustand/types/index.js +1 -1
  37. package/lib/module/zustand/utils/buoyZustandMiddleware.js +1 -278
  38. package/lib/module/zustand/utils/editableState.js +1 -138
  39. package/lib/module/zustand/utils/snapshotProvider.js +1 -209
  40. package/lib/module/zustand/utils/testIDs.js +1 -74
  41. package/lib/module/zustand/utils/zustandStateStore.js +1 -375
  42. package/lib/web/index.mjs +2 -3
  43. package/package.json +4 -7
  44. package/lib/typescript/index.d.ts.map +0 -1
  45. package/lib/typescript/preset.d.ts.map +0 -1
  46. package/lib/typescript/zustand/components/ZustandActionButton.d.ts.map +0 -1
  47. package/lib/typescript/zustand/components/ZustandDetailViewToggle.d.ts.map +0 -1
  48. package/lib/typescript/zustand/components/ZustandEventFilterView.d.ts.map +0 -1
  49. package/lib/typescript/zustand/components/ZustandIcon.d.ts.map +0 -1
  50. package/lib/typescript/zustand/components/ZustandModal.d.ts.map +0 -1
  51. package/lib/typescript/zustand/components/ZustandStateChangeItem.d.ts.map +0 -1
  52. package/lib/typescript/zustand/components/ZustandStateDetailContent.d.ts.map +0 -1
  53. package/lib/typescript/zustand/components/ZustandStateInfoView.d.ts.map +0 -1
  54. package/lib/typescript/zustand/components/ZustandStoreBrowser.d.ts.map +0 -1
  55. package/lib/typescript/zustand/components/ZustandStoreDetailContent.d.ts.map +0 -1
  56. package/lib/typescript/zustand/hooks/useZustandStateChanges.d.ts.map +0 -1
  57. package/lib/typescript/zustand/sync/zustandSyncAdapter.d.ts.map +0 -1
  58. package/lib/typescript/zustand/types/index.d.ts.map +0 -1
  59. package/lib/typescript/zustand/utils/buoyZustandMiddleware.d.ts.map +0 -1
  60. package/lib/typescript/zustand/utils/editableState.d.ts.map +0 -1
  61. package/lib/typescript/zustand/utils/snapshotProvider.d.ts.map +0 -1
  62. package/lib/typescript/zustand/utils/testIDs.d.ts.map +0 -1
  63. package/lib/typescript/zustand/utils/zustandStateStore.d.ts.map +0 -1
package/README.md CHANGED
@@ -1,92 +1,27 @@
1
- # @buoy-gg/zustand
1
+ <div align="center">
2
2
 
3
- [![npm version](https://img.shields.io/npm/v/@buoy-gg/zustand?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/zustand) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/zustand?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/zustand)
3
+ # @buoy-gg/zustand
4
4
 
5
5
  Inspect the Zustand stores you register with Buoy. Review changes, edit state, and restore retained snapshots.
6
6
 
7
- Part of [Buoy](https://github.com/Buoy-gg/buoy). Install the package, complete account setup, and follow the integration steps below.
7
+ <a href="https://buoy.gg/buoy/latest/docs/tools/zustand"><b>Zustand guide</b></a> &nbsp;·&nbsp; <a href="https://buoy.gg">buoy.gg</a> &nbsp;·&nbsp; <a href="https://github.com/Buoy-gg/buoy">All tools</a>
8
8
 
9
- ## Install
9
+ [![npm version](https://img.shields.io/npm/v/@buoy-gg/zustand?style=flat-square&labelColor=10302a&color=2a9d78)](https://www.npmjs.com/package/@buoy-gg/zustand) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/zustand?style=flat-square&labelColor=10302a&color=2a9d78&label=downloads%2Fmonth)](https://www.npmjs.com/package/@buoy-gg/zustand)
10
10
 
11
- ```bash
12
- npm install @buoy-gg/core @buoy-gg/zustand
13
- ```
11
+ <a href="https://buoy.gg/buoy/latest/docs/tools/zustand"><img src="https://raw.githubusercontent.com/Buoy-gg/buoy/main/.github/readme/tools/zustand.png" alt="Watch the Zustand film on buoy.gg" width="640" /></a>
14
12
 
15
- ## Before you start
13
+ </div>
16
14
 
17
- Use a development build with `@buoy-gg/core` and a Free or Pro Buoy account key. From your app’s directory, sign in:
15
+ ## Install
18
16
 
19
17
  ```bash
20
- npx --package=@buoy-gg/core buoy login
21
- ```
22
-
23
- For Expo, initialize Buoy before rendering the menu:
24
-
25
- ```tsx
26
- import { Buoy } from "@buoy-gg/core";
27
-
28
- Buoy.init({ licenseKey: process.env.EXPO_PUBLIC_BUOY_KEY });
29
- ```
30
-
31
- The login command writes the Expo key to `.env.local`. For React Native CLI, pass the key from your app’s environment configuration; React Native does not load `.env.local` automatically. Mount `FloatingDevTools` inside the same providers as your screens and restart the development server after installation. The [Quick Start](https://buoy.gg/buoy/latest/docs/quick-start) shows the complete root component setup.
32
-
33
- ## Quick start
34
-
35
- Pass your stores to `FloatingDevTools` via the `zustandStores` prop — a named map of your store hooks. No middleware, no store changes; observation is subscribe-only, so your stores stay untouched.
36
-
37
- ```tsx
38
- import { FloatingDevTools } from '@buoy-gg/core';
39
- import { useCounterStore } from './stores/counter';
40
- import { useAuthStore } from './stores/auth';
41
- import { useCartStore } from './stores/cart';
42
-
43
- export default function App() {
44
- return (
45
- <>
46
- <YourApp />
47
- <FloatingDevTools
48
- zustandStores={{
49
- counterStore: useCounterStore,
50
- authStore: useAuthStore,
51
- cartStore: useCartStore,
52
- }}
53
- />
54
- </>
55
- );
56
- }
18
+ npm install @buoy-gg/core @buoy-gg/zustand
57
19
  ```
58
20
 
59
- Prefer to wire it outside React? `watchStores({ counterStore: useCounterStore })` from `@buoy-gg/zustand` does the same thing at module scope.
60
-
61
- ## Check the integration
62
-
63
- Change a value in a registered store through your app and find its diff in Buoy. Edits and resets change the real store; test with disposable data. Register the same store instances that your screens use.
64
-
65
- ## What you get
21
+ Pass your store hooks to `<FloatingDevTools />` through the `zustandStores` prop. Buoy only subscribes, so your stores don't change.
66
22
 
67
- - **Every state change, captured** — store name, update type (`setState`, `replace`, `persist`, `initial`), changed keys, and a diff summary
68
- - **Side-by-side diffs** — additions, removals, and modifications highlighted, in tree or split view
69
- - **Jump to state** — restore any store to a previously captured state instantly
70
- - **One-tap reset** — send any store back to its initial state without restarting the app
71
- - **Persist awareness** — stores using Zustand's `persist` middleware are auto-detected and tagged
72
- - **Store color coding** — each store keeps a consistent color across the UI for easy tracking
73
- - **Search & filter** — find changes by store name or changed keys, or show only updates that modified state
74
- - **Optional `buoyDevTools()` middleware** — wrap individual stores for partial-state capture and per-update timing (flags updates over the 16ms frame budget)
75
-
76
- ## Desktop & AI
77
-
78
- To connect a React Native app to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) or MCP, install `@buoy-gg/external-sync` and follow the [Desktop connection guide](https://buoy.gg/buoy/latest/docs/desktop). Sign in to Desktop separately. [MCP setup](https://buoy.gg/buoy/latest/docs/mcp) also requires a process account and Pro access. Available remote actions depend on the tool and app integration.
79
-
80
- ## Account and plan requirements
81
-
82
- Use a Free or Pro Buoy account. History limits and paid features vary by tool; see [pricing](https://buoy.gg/pricing). Production access requires Pro where supported. Development-only hooks and actions remain unavailable in release builds.
23
+ The [Zustand guide](https://buoy.gg/buoy/latest/docs/tools/zustand) covers setup, what it captures and its limits. New to Buoy? Start with the [Quick start](https://buoy.gg/buoy/latest/docs/quick-start).
83
24
 
84
25
  ---
85
26
 
86
- 📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/zustand) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
87
-
88
- Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)
89
-
90
- ## Web support (unreleased)
91
-
92
- Register live stores with watchStores. The shared browser panel edits the same store objects used by the app. The browser build is available in this checkout and has not been published yet. See the [web setup guide](https://buoy.gg/buoy/latest/docs/web-preview) for registration, dependencies, and browser boundaries.
27
+ <sub>Part of <a href="https://buoy.gg">Buoy</a>, developer tools that live inside your app. Proprietary software. © Buoy LLC. <a href="https://buoy.gg/terms">Terms</a></sub>
@@ -1,105 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "ZUSTAND_ICON_COLOR", {
7
- enumerable: true,
8
- get: function () {
9
- return _ZustandIcon.ZUSTAND_ICON_COLOR;
10
- }
11
- });
12
- Object.defineProperty(exports, "ZustandIcon", {
13
- enumerable: true,
14
- get: function () {
15
- return _ZustandIcon.ZustandIcon;
16
- }
17
- });
18
- Object.defineProperty(exports, "ZustandModal", {
19
- enumerable: true,
20
- get: function () {
21
- return _ZustandModal.ZustandModal;
22
- }
23
- });
24
- Object.defineProperty(exports, "ZustandStateChangeItem", {
25
- enumerable: true,
26
- get: function () {
27
- return _ZustandStateChangeItem.ZustandStateChangeItem;
28
- }
29
- });
30
- Object.defineProperty(exports, "ZustandStateDetailContent", {
31
- enumerable: true,
32
- get: function () {
33
- return _ZustandStateDetailContent.ZustandStateDetailContent;
34
- }
35
- });
36
- Object.defineProperty(exports, "ZustandStateDetailFooter", {
37
- enumerable: true,
38
- get: function () {
39
- return _ZustandStateDetailContent.ZustandStateDetailFooter;
40
- }
41
- });
42
- Object.defineProperty(exports, "ZustandToolView", {
43
- enumerable: true,
44
- get: function () {
45
- return _ZustandModal.ZustandToolView;
46
- }
47
- });
48
- Object.defineProperty(exports, "buoyDevTools", {
49
- enumerable: true,
50
- get: function () {
51
- return _buoyZustandMiddleware.buoyDevTools;
52
- }
53
- });
54
- Object.defineProperty(exports, "createZustandTool", {
55
- enumerable: true,
56
- get: function () {
57
- return _preset.createZustandTool;
58
- }
59
- });
60
- Object.defineProperty(exports, "isStoreInstrumented", {
61
- enumerable: true,
62
- get: function () {
63
- return _buoyZustandMiddleware.isStoreInstrumented;
64
- }
65
- });
66
- Object.defineProperty(exports, "useZustandStateChanges", {
67
- enumerable: true,
68
- get: function () {
69
- return _useZustandStateChanges.useZustandStateChanges;
70
- }
71
- });
72
- Object.defineProperty(exports, "watchStores", {
73
- enumerable: true,
74
- get: function () {
75
- return _buoyZustandMiddleware.watchStores;
76
- }
77
- });
78
- Object.defineProperty(exports, "zustandStateStore", {
79
- enumerable: true,
80
- get: function () {
81
- return _zustandStateStore.zustandStateStore;
82
- }
83
- });
84
- Object.defineProperty(exports, "zustandSyncAdapter", {
85
- enumerable: true,
86
- get: function () {
87
- return _zustandSyncAdapter.zustandSyncAdapter;
88
- }
89
- });
90
- Object.defineProperty(exports, "zustandToolPreset", {
91
- enumerable: true,
92
- get: function () {
93
- return _preset.zustandToolPreset;
94
- }
95
- });
96
- require("./zustand/utils/snapshotProvider");
97
- var _preset = require("./preset");
98
- var _buoyZustandMiddleware = require("./zustand/utils/buoyZustandMiddleware");
99
- var _useZustandStateChanges = require("./zustand/hooks/useZustandStateChanges");
100
- var _ZustandModal = require("./zustand/components/ZustandModal");
101
- var _ZustandStateChangeItem = require("./zustand/components/ZustandStateChangeItem");
102
- var _ZustandStateDetailContent = require("./zustand/components/ZustandStateDetailContent");
103
- var _ZustandIcon = require("./zustand/components/ZustandIcon");
104
- var _zustandSyncAdapter = require("./zustand/sync/zustandSyncAdapter");
105
- var _zustandStateStore = require("./zustand/utils/zustandStateStore");
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"ZUSTAND_ICON_COLOR",{enumerable:true,get:function(){return _ZustandIcon.ZUSTAND_ICON_COLOR}});Object.defineProperty(exports,"ZustandIcon",{enumerable:true,get:function(){return _ZustandIcon.ZustandIcon}});Object.defineProperty(exports,"ZustandModal",{enumerable:true,get:function(){return _ZustandModal.ZustandModal}});Object.defineProperty(exports,"ZustandStateChangeItem",{enumerable:true,get:function(){return _ZustandStateChangeItem.ZustandStateChangeItem}});Object.defineProperty(exports,"ZustandStateDetailContent",{enumerable:true,get:function(){return _ZustandStateDetailContent.ZustandStateDetailContent}});Object.defineProperty(exports,"ZustandStateDetailFooter",{enumerable:true,get:function(){return _ZustandStateDetailContent.ZustandStateDetailFooter}});Object.defineProperty(exports,"ZustandToolView",{enumerable:true,get:function(){return _ZustandModal.ZustandToolView}});Object.defineProperty(exports,"buoyDevTools",{enumerable:true,get:function(){return _buoyZustandMiddleware.buoyDevTools}});Object.defineProperty(exports,"createZustandTool",{enumerable:true,get:function(){return _preset.createZustandTool}});Object.defineProperty(exports,"isStoreInstrumented",{enumerable:true,get:function(){return _buoyZustandMiddleware.isStoreInstrumented}});Object.defineProperty(exports,"useZustandStateChanges",{enumerable:true,get:function(){return _useZustandStateChanges.useZustandStateChanges}});Object.defineProperty(exports,"watchStores",{enumerable:true,get:function(){return _buoyZustandMiddleware.watchStores}});Object.defineProperty(exports,"zustandStateStore",{enumerable:true,get:function(){return _zustandStateStore.zustandStateStore}});Object.defineProperty(exports,"zustandSyncAdapter",{enumerable:true,get:function(){return _zustandSyncAdapter.zustandSyncAdapter}});Object.defineProperty(exports,"zustandToolPreset",{enumerable:true,get:function(){return _preset.zustandToolPreset}});require("./zustand/utils/snapshotProvider");var _preset=require("./preset");var _buoyZustandMiddleware=require("./zustand/utils/buoyZustandMiddleware");var _useZustandStateChanges=require("./zustand/hooks/useZustandStateChanges");var _ZustandModal=require("./zustand/components/ZustandModal");var _ZustandStateChangeItem=require("./zustand/components/ZustandStateChangeItem");var _ZustandStateDetailContent=require("./zustand/components/ZustandStateDetailContent");var _ZustandIcon=require("./zustand/components/ZustandIcon");var _zustandSyncAdapter=require("./zustand/sync/zustandSyncAdapter");var _zustandStateStore=require("./zustand/utils/zustandStateStore");
@@ -1,102 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.createZustandTool = createZustandTool;
7
- exports.zustandToolPreset = void 0;
8
- var _ZustandModal = require("./zustand/components/ZustandModal");
9
- var _ZustandIcon = require("./zustand/components/ZustandIcon");
10
- var _jsxRuntime = require("react/jsx-runtime");
11
- /**
12
- * Pre-configured Zustand DevTools preset for FloatingDevTools
13
- *
14
- * ZERO-CONFIG: This preset is auto-discovered by FloatingDevTools!
15
- * Just install @buoy-gg/zustand and wrap your stores with buoyDevTools().
16
- *
17
- * @example Automatic (recommended)
18
- * ```tsx
19
- * import { create } from 'zustand';
20
- * import { buoyDevTools } from '@buoy-gg/zustand';
21
- *
22
- * const useCounterStore = create(
23
- * buoyDevTools(
24
- * (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
25
- * { name: 'counterStore' }
26
- * )
27
- * );
28
- *
29
- * // The Zustand tool appears automatically in FloatingDevTools!
30
- * <FloatingDevTools />
31
- * ```
32
- *
33
- * @example Manual (only for custom configuration)
34
- * ```tsx
35
- * import { createZustandTool } from '@buoy-gg/zustand';
36
- *
37
- * const customZustandTool = createZustandTool({
38
- * name: "STATE",
39
- * iconColor: "#463B3F",
40
- * });
41
- *
42
- * <FloatingDevTools apps={[customZustandTool]} />
43
- * ```
44
- */
45
-
46
- /**
47
- * Pre-configured Zustand DevTools preset for FloatingDevTools.
48
- * Includes:
49
- * - Live state change monitoring
50
- * - State inspection (JSON viewer)
51
- * - State diff visualization (tree + split)
52
- * - Filter by store name
53
- * - Changed keys tracking
54
- */
55
- const zustandToolPreset = exports.zustandToolPreset = {
56
- id: "zustand",
57
- name: "ZUSTAND",
58
- description: "Zustand store & state inspector",
59
- slot: "both",
60
- icon: ({
61
- size
62
- }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandIcon.ZustandIcon, {
63
- size: size
64
- }),
65
- component: _ZustandModal.ZustandModal,
66
- props: {
67
- enableSharedModalDimensions: false
68
- }
69
- };
70
-
71
- /**
72
- * Create a custom Zustand DevTools configuration.
73
- * Use this if you want to override default settings.
74
- *
75
- * @example
76
- * ```tsx
77
- * import { createZustandTool } from '@buoy-gg/zustand';
78
- *
79
- * const myZustandTool = createZustandTool({
80
- * name: "STATE",
81
- * iconColor: "#463B3F",
82
- * });
83
- * ```
84
- */
85
- function createZustandTool(options) {
86
- return {
87
- id: options?.id || "zustand",
88
- name: options?.name || "ZUSTAND",
89
- description: options?.description || "Zustand store & state inspector",
90
- slot: "both",
91
- icon: ({
92
- size
93
- }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandIcon.ZustandIcon, {
94
- size: size,
95
- color: options?.iconColor
96
- }),
97
- component: _ZustandModal.ZustandModal,
98
- props: {
99
- enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
100
- }
101
- };
102
- }
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.createZustandTool=createZustandTool;exports.zustandToolPreset=void 0;var _ZustandModal=require("./zustand/components/ZustandModal");var _ZustandIcon=require("./zustand/components/ZustandIcon");var _jsxRuntime=require("react/jsx-runtime");const zustandToolPreset=exports.zustandToolPreset={id:"zustand",name:"ZUSTAND",description:"Zustand store & state inspector",slot:"both",icon:({size:e})=>(0,_jsxRuntime.jsx)(_ZustandIcon.ZustandIcon,{size:e}),component:_ZustandModal.ZustandModal,props:{enableSharedModalDimensions:false}};function createZustandTool(e){return{id:e?.id||"zustand",name:e?.name||"ZUSTAND",description:e?.description||"Zustand store & state inspector",slot:"both",icon:({size:n})=>(0,_jsxRuntime.jsx)(_ZustandIcon.ZustandIcon,{size:n,color:e?.iconColor}),component:_ZustandModal.ZustandModal,props:{enableSharedModalDimensions:e?.enableSharedModalDimensions!==void 0?e.enableSharedModalDimensions:false}}}
@@ -1,118 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ZustandActionButton = ZustandActionButton;
7
- var _reactNative = require("react-native");
8
- var _sharedUi = require("@buoy-gg/shared-ui");
9
- var _jsxRuntime = require("react/jsx-runtime");
10
- /**
11
- * ZustandActionButton
12
- *
13
- * Generic action button for Zustand DevTools footer.
14
- * Mirrors ReduxActionButton.tsx
15
- */
16
-
17
- const buttonConfigs = {
18
- copy: {
19
- color: _sharedUi.night.color.accent,
20
- backgroundColor: _sharedUi.night.color.accentSoft,
21
- borderColor: _sharedUi.night.color.accentBorder,
22
- textColor: _sharedUi.night.color.accent
23
- },
24
- reset: {
25
- color: _sharedUi.night.color.warning,
26
- backgroundColor: _sharedUi.night.color.warningSoft,
27
- borderColor: _sharedUi.night.color.warning + "40",
28
- textColor: _sharedUi.night.color.warning
29
- },
30
- clear: {
31
- color: _sharedUi.night.color.danger,
32
- backgroundColor: _sharedUi.night.color.dangerSoft,
33
- borderColor: _sharedUi.night.color.danger + "40",
34
- textColor: _sharedUi.night.color.danger
35
- },
36
- jump: {
37
- color: _sharedUi.night.color.warning,
38
- backgroundColor: _sharedUi.night.color.warningSoft,
39
- borderColor: _sharedUi.night.color.warning + "40",
40
- textColor: _sharedUi.night.color.warning
41
- }
42
- };
43
- function ZustandActionButton({
44
- onPress,
45
- text,
46
- type,
47
- disabled = false,
48
- testID
49
- }) {
50
- const config = buttonConfigs[type];
51
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
52
- disabled: disabled,
53
- onPress: onPress,
54
- style: [styles.button, {
55
- backgroundColor: disabled ? _sharedUi.night.color.textTertiary + "1A" : config.backgroundColor,
56
- borderColor: disabled ? _sharedUi.night.color.textTertiary + "33" : config.borderColor,
57
- opacity: disabled ? 0.5 : 1
58
- }],
59
- activeOpacity: 0.7,
60
- testID: testID,
61
- accessibilityRole: "button",
62
- accessibilityLabel: text,
63
- accessibilityState: {
64
- disabled
65
- },
66
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
67
- style: [styles.dot, {
68
- backgroundColor: disabled ? _sharedUi.night.color.textTertiary : config.color
69
- }]
70
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
71
- style: [styles.text, {
72
- color: disabled ? _sharedUi.night.color.textTertiary : config.textColor
73
- }],
74
- children: text
75
- })]
76
- });
77
- }
78
- const styles = _reactNative.StyleSheet.create({
79
- button: {
80
- flexDirection: "row",
81
- alignItems: "center",
82
- justifyContent: "center",
83
- borderRadius: 6,
84
- borderWidth: 1,
85
- paddingHorizontal: 12,
86
- paddingVertical: 6,
87
- height: 25,
88
- minWidth: 80,
89
- shadowOffset: {
90
- width: 0,
91
- height: 1
92
- },
93
- shadowOpacity: 0.2,
94
- shadowRadius: 2,
95
- elevation: 2
96
- },
97
- dot: {
98
- width: 5,
99
- height: 5,
100
- borderRadius: 3,
101
- marginRight: 6,
102
- shadowColor: _sharedUi.night.color.text,
103
- shadowOffset: {
104
- width: 0,
105
- height: 0
106
- },
107
- shadowOpacity: 0.6,
108
- shadowRadius: 2
109
- },
110
- text: {
111
- fontSize: 10,
112
- fontWeight: "600",
113
- letterSpacing: 0.5,
114
- textTransform: "uppercase",
115
- fontFamily: _sharedUi.monoFont,
116
- height: 12
117
- }
118
- });
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ZustandActionButton=ZustandActionButton;var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");const buttonConfigs={copy:{color:_sharedUi.night.color.accent,backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorder,textColor:_sharedUi.night.color.accent},reset:{color:_sharedUi.night.color.warning,backgroundColor:_sharedUi.night.color.warningSoft,borderColor:_sharedUi.night.color.warning+"40",textColor:_sharedUi.night.color.warning},clear:{color:_sharedUi.night.color.danger,backgroundColor:_sharedUi.night.color.dangerSoft,borderColor:_sharedUi.night.color.danger+"40",textColor:_sharedUi.night.color.danger},jump:{color:_sharedUi.night.color.warning,backgroundColor:_sharedUi.night.color.warningSoft,borderColor:_sharedUi.night.color.warning+"40",textColor:_sharedUi.night.color.warning}};function ZustandActionButton({onPress:e,text:r,type:n,disabled:o=false,testID:i}){const t=buttonConfigs[n];return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{disabled:o,onPress:e,style:[styles.button,{backgroundColor:o?_sharedUi.night.color.textTertiary+"1A":t.backgroundColor,borderColor:o?_sharedUi.night.color.textTertiary+"33":t.borderColor,opacity:o?.5:1}],activeOpacity:.7,testID:i,accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{disabled:o},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dot,{backgroundColor:o?_sharedUi.night.color.textTertiary:t.color}]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.text,{color:o?_sharedUi.night.color.textTertiary:t.textColor}],children:r})]})}const styles=_reactNative.StyleSheet.create({button:{flexDirection:"row",alignItems:"center",justifyContent:"center",borderRadius:6,borderWidth:1,paddingHorizontal:12,paddingVertical:6,height:25,minWidth:80,shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2,elevation:2},dot:{width:5,height:5,borderRadius:3,marginRight:6,shadowColor:_sharedUi.night.color.text,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:2},text:{fontSize:10,fontWeight:"600",letterSpacing:.5,textTransform:"uppercase",fontFamily:_sharedUi.monoFont,height:12}});
@@ -1,48 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ZustandDetailViewToggle = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
8
- var _sharedUi = require("@buoy-gg/shared-ui");
9
- var _jsxRuntime = require("react/jsx-runtime");
10
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
11
- /**
12
- * ZustandDetailViewToggle
13
- *
14
- * Three-card toggle for switching between Change, State, and Diff views.
15
- * The cards themselves are the shared `DetailViewToggle`; this file owns
16
- * the zustand view list and testID prefix.
17
- */
18
-
19
- const VIEWS = [{
20
- key: "change",
21
- label: "CHANGE",
22
- description: "View change details",
23
- icon: _sharedUi.FileText
24
- }, {
25
- key: "state",
26
- label: "STATE",
27
- description: "View current state",
28
- icon: _sharedUi.Database
29
- }, {
30
- key: "diff",
31
- label: "DIFF",
32
- description: "Compare changes",
33
- icon: _sharedUi.GitBranch
34
- }];
35
- const DIFF_DISABLED = ["diff"];
36
- const ZustandDetailViewToggle = exports.ZustandDetailViewToggle = /*#__PURE__*/(0, _react.memo)(function ZustandDetailViewToggle({
37
- activeView,
38
- onViewChange,
39
- diffDisabled = false
40
- }) {
41
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DetailViewToggle, {
42
- views: VIEWS,
43
- activeView: activeView,
44
- onViewChange: onViewChange,
45
- disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
46
- testIDPrefix: "buoy-zustand"
47
- });
48
- });
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ZustandDetailViewToggle=void 0;var _react=_interopRequireWildcard(require("react"));var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(u,a){if("function"==typeof WeakMap)var o=new WeakMap,s=new WeakMap;return(_interopRequireWildcard=function(e,c){if(!c&&e&&e.__esModule)return e;var t,n,r={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return r;if(t=c?s:o){if(t.has(e))return t.get(e);t.set(e,r)}for(const i in e)"default"!==i&&{}.hasOwnProperty.call(e,i)&&((n=(t=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,i))&&(n.get||n.set)?t(r,i,n):r[i]=e[i]);return r})(u,a)}const VIEWS=[{key:"change",label:"CHANGE",description:"View change details",icon:_sharedUi.FileText},{key:"state",label:"STATE",description:"View current state",icon:_sharedUi.Database},{key:"diff",label:"DIFF",description:"Compare changes",icon:_sharedUi.GitBranch}];const DIFF_DISABLED=["diff"];const ZustandDetailViewToggle=exports.ZustandDetailViewToggle=(0,_react.memo)(function u({activeView:a,onViewChange:o,diffDisabled:s=false}){return(0,_jsxRuntime.jsx)(_sharedUi.DetailViewToggle,{views:VIEWS,activeView:a,onViewChange:o,disabledKeys:s?DIFF_DISABLED:void 0,testIDPrefix:"buoy-zustand"})});
@@ -1,43 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ZustandEventFilterView = ZustandEventFilterView;
7
- var _react = require("react");
8
- var _sharedUi = require("@buoy-gg/shared-ui");
9
- var _zustandStateStore = require("../utils/zustandStateStore");
10
- var _testIDs = require("../utils/testIDs");
11
- var _jsxRuntime = require("react/jsx-runtime");
12
- /**
13
- * ZustandEventFilterView
14
- *
15
- * The shared `EntityFilterView` with zustand's nouns: registered stores you
16
- * can tap to hide, active store-name patterns, and how it works.
17
- */
18
-
19
- const EXAMPLES = ["• auth → hides authStore from stores & events", "• temp → hides tempStore, tempUserStore", "• cart → hides cartStore from both tabs"];
20
- function ZustandEventFilterView({
21
- ignoredPatterns,
22
- onTogglePattern,
23
- onAddPattern,
24
- stores
25
- }) {
26
- const entities = (0, _react.useMemo)(() => stores.map(store => ({
27
- name: store.name,
28
- color: _zustandStateStore.zustandStateStore.getStoreColor(store.name)
29
- })), [stores]);
30
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EntityFilterView, {
31
- entities: entities,
32
- ignoredPatterns: ignoredPatterns,
33
- onTogglePattern: onTogglePattern,
34
- onAddPattern: onAddPattern,
35
- entityNoun: "STORES",
36
- entitySingular: "store",
37
- entityKey: "store",
38
- testIDPrefix: _testIDs.ZUSTAND_TEST_ID,
39
- slug: _testIDs.slugForTestID,
40
- howItWorks: "Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter.",
41
- examples: EXAMPLES
42
- });
43
- }
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ZustandEventFilterView=ZustandEventFilterView;var _react=require("react");var _sharedUi=require("@buoy-gg/shared-ui");var _zustandStateStore=require("../utils/zustandStateStore");var _testIDs=require("../utils/testIDs");var _jsxRuntime=require("react/jsx-runtime");const EXAMPLES=["\u2022 auth \u2192 hides authStore from stores & events","\u2022 temp \u2192 hides tempStore, tempUserStore","\u2022 cart \u2192 hides cartStore from both tabs"];function ZustandEventFilterView({ignoredPatterns:r,onTogglePattern:s,onAddPattern:a,stores:t}){const o=(0,_react.useMemo)(()=>t.map(e=>({name:e.name,color:_zustandStateStore.zustandStateStore.getStoreColor(e.name)})),[t]);return(0,_jsxRuntime.jsx)(_sharedUi.EntityFilterView,{entities:o,ignoredPatterns:r,onTogglePattern:s,onAddPattern:a,entityNoun:"STORES",entitySingular:"store",entityKey:"store",testIDPrefix:_testIDs.ZUSTAND_TEST_ID,slug:_testIDs.slugForTestID,howItWorks:"Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter.",examples:EXAMPLES})}
@@ -1,18 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "ZUSTAND_ICON_COLOR", {
7
- enumerable: true,
8
- get: function () {
9
- return _sharedUi.ZUSTAND_ICON_COLOR;
10
- }
11
- });
12
- Object.defineProperty(exports, "ZustandIcon", {
13
- enumerable: true,
14
- get: function () {
15
- return _sharedUi.ZustandIcon;
16
- }
17
- });
18
- var _sharedUi = require("@buoy-gg/shared-ui");
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"ZUSTAND_ICON_COLOR",{enumerable:true,get:function(){return _sharedUi.ZUSTAND_ICON_COLOR}});Object.defineProperty(exports,"ZustandIcon",{enumerable:true,get:function(){return _sharedUi.ZustandIcon}});var _sharedUi=require("@buoy-gg/shared-ui");