@buoy-gg/zustand 7.0.35 → 7.0.38

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

@@ -1,488 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZustandStateInfoView = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _license = require("@buoy-gg/license");
-var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
-var _ZustandActionButton = require("./ZustandActionButton");
-var _zustandStateStore = require("../utils/zustandStateStore");
-var _testIDs = require("../utils/testIDs");
-var _jsxRuntime = require("react/jsx-runtime");
-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); }
-/**
- * ZustandStateInfoView
- *
- * Displays comprehensive state change information including:
- * - Change metadata (store, category, duration)
- * - Partial data passed to setState
- * - Changed keys list
- *
- * Mirrors ReduxActionInfoView.tsx
- */
-
-function getCategoryInfo(category) {
-  switch (category) {
-    case "replace":
-      return {
-        label: "REPLACE",
-        color: _sharedUi.buoyColors.warning,
-        bgColor: _sharedUi.buoyColors.warning + "26"
-      };
-    case "persist":
-      return {
-        label: "PERSIST",
-        color: _sharedUi.buoyColors.info,
-        bgColor: _sharedUi.buoyColors.info + "26"
-      };
-    case "initial":
-      return {
-        label: "INITIAL",
-        color: _sharedUi.night.color.textTertiary,
-        bgColor: _sharedUi.night.color.textTertiary + "26"
-      };
-    default:
-      return {
-        label: "SET STATE",
-        color: _sharedUi.buoyColors.success,
-        bgColor: _sharedUi.buoyColors.success + "26"
-      };
-  }
-}
-function formatDuration(duration) {
-  if (duration === undefined) return "N/A";
-  if (duration < 1) return "<1ms";
-  return `${duration.toFixed(1)}ms`;
-}
-function SectionHeader({
-  icon: Icon,
-  title,
-  badge,
-  testID
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.sectionHeader,
-    testID: testID,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.sectionHeaderLeft,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        size: 14,
-        color: _sharedUi.night.color.accent
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.sectionTitle,
-        children: title
-      })]
-    }), badge]
-  });
-}
-function formatTime(timestamp) {
-  const date = new Date(timestamp);
-  const hours = date.getHours().toString().padStart(2, "0");
-  const minutes = date.getMinutes().toString().padStart(2, "0");
-  const seconds = date.getSeconds().toString().padStart(2, "0");
-  const ms = date.getMilliseconds().toString().padStart(3, "0");
-  return `${hours}:${minutes}:${seconds}.${ms}`;
-}
-const ZustandStateInfoView = exports.ZustandStateInfoView = /*#__PURE__*/(0, _react.memo)(function ZustandStateInfoView({
-  change
-}) {
-  const isPro = (0, _license.useIsPro)();
-  const [showProModal, setShowProModal] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    if (showProModal && isPro) {
-      setShowProModal(false);
-    }
-  }, [showProModal, isPro]);
-  const categoryInfo = getCategoryInfo(change.category);
-  const hasPartial = change.partial !== undefined && change.partial !== "(updater fn)";
-  const hasChangedKeys = change.changedKeys.length > 0;
-  const storeColor = _zustandStateStore.zustandStateStore.getStoreColor(change.storeName);
-  const handleCopyState = (0, _react.useCallback)(async () => {
-    if (!isPro) {
-      setShowProModal(true);
-      return;
-    }
-    await (0, _sharedUi.copyToClipboard)(change.nextState);
-  }, [change.nextState, isPro]);
-  const handleResetStore = (0, _react.useCallback)(() => {
-    const storeInfo = _zustandStateStore.zustandStateStore.getStore(change.storeName);
-    if (storeInfo?.api.getInitialState) {
-      const initialState = storeInfo.api.getInitialState();
-      storeInfo.api.setState(initialState, true);
-    }
-  }, [change.storeName]);
-  const handleJumpToState = (0, _react.useCallback)(() => {
-    const storeInfo = _zustandStateStore.zustandStateStore.getStore(change.storeName);
-    if (storeInfo) {
-      storeInfo.api.setState(change.nextState, true);
-    }
-  }, [change.storeName, change.nextState]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-    style: styles.container,
-    contentContainerStyle: styles.contentContainer,
-    showsVerticalScrollIndicator: false,
-    testID: `${_testIDs.ZUSTAND_TEST_ID}-detail-scroll`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.card,
-      testID: `${_testIDs.ZUSTAND_TEST_ID}-info-card`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
-        icon: _sharedUi.Info,
-        title: "CHANGE INFO"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.cardContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
-          label: "Store",
-          value: change.storeName,
-          mono: true,
-          valueColor: storeColor,
-          testID: `${_testIDs.ZUSTAND_TEST_ID}-info-store`
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
-          label: "Time",
-          value: formatTime(change.timestamp),
-          mono: true,
-          testID: `${_testIDs.ZUSTAND_TEST_ID}-info-time`
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.badgeRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.categoryBadge, {
-              backgroundColor: categoryInfo.bgColor
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.categoryText, {
-                color: categoryInfo.color
-              }],
-              testID: `${_testIDs.ZUSTAND_TEST_ID}-info-category`,
-              children: categoryInfo.label
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: [styles.durationBadge, change.isSlowUpdate && styles.durationBadgeSlow],
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
-              size: 10,
-              color: change.isSlowUpdate ? _sharedUi.buoyColors.error : _sharedUi.night.color.textSecondary
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.durationText, change.isSlowUpdate && styles.durationTextSlow],
-              testID: `${_testIDs.ZUSTAND_TEST_ID}-info-duration`,
-              children: formatDuration(change.duration)
-            }), change.isSlowUpdate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
-              size: 10,
-              color: _sharedUi.buoyColors.error
-            })]
-          }), change.hasStateChange ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.changesBadge,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-              size: 10,
-              color: _sharedUi.buoyColors.success
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.changesText,
-              testID: `${_testIDs.ZUSTAND_TEST_ID}-info-changes`,
-              children: change.diffSummary || "changed"
-            })]
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.noChangesBadge,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.noChangesText,
-              testID: `${_testIDs.ZUSTAND_TEST_ID}-info-no-changes`,
-              children: "no change"
-            })
-          }), change.isPersisted && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.persistBadge,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
-              size: 10,
-              color: _sharedUi.buoyColors.info
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.persistText,
-              testID: `${_testIDs.ZUSTAND_TEST_ID}-info-persisted`,
-              children: "PERSISTED"
-            })]
-          })]
-        })]
-      })]
-    }), hasChangedKeys && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.card,
-      testID: `${_testIDs.ZUSTAND_TEST_ID}-keys-card`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
-        icon: _sharedUi.Zap,
-        title: "CHANGED KEYS",
-        badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.countBadge,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.countText,
-            testID: `${_testIDs.ZUSTAND_TEST_ID}-keys-count`,
-            children: change.changedKeys.length
-          })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.cardContent,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.keysContainer,
-          children: change.changedKeys.map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.keyBadge,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.keyText,
-              testID: `${_testIDs.ZUSTAND_TEST_ID}-key-${key}`,
-              children: key
-            })
-          }, key))
-        })
-      })]
-    }), hasPartial && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.card,
-      testID: `${_testIDs.ZUSTAND_TEST_ID}-partial-card`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
-        icon: _sharedUi.Box,
-        title: "PARTIAL (setState argument)",
-        badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.typeBadge,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.typeText,
-            testID: `${_testIDs.ZUSTAND_TEST_ID}-partial-type`,
-            children: Array.isArray(change.partial) ? "ARRAY" : typeof change.partial === "object" ? "OBJECT" : String(typeof change.partial).toUpperCase()
-          })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
-          title: "",
-          data: (0, _sharedUi.parseValue)(change.partial),
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      })]
-    }), change.partial === "(updater fn)" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.card,
-      testID: `${_testIDs.ZUSTAND_TEST_ID}-updater-card`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
-        icon: _sharedUi.Box,
-        title: "SET STATE CALL"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.cardContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.updaterText,
-          children: "Called with an updater function: set((state) => ...)"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.updaterSubtext,
-          children: "The partial value is computed at runtime from the previous state. See the DIFF tab to view the resulting changes."
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.actionsGrid,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandActionButton.ZustandActionButton, {
-        type: "jump",
-        text: "JUMP",
-        onPress: handleJumpToState,
-        testID: `${_testIDs.ZUSTAND_TEST_ID}-jump`
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandActionButton.ZustandActionButton, {
-        type: "reset",
-        text: "RESET STORE",
-        onPress: handleResetStore,
-        testID: `${_testIDs.ZUSTAND_TEST_ID}-reset`
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandActionButton.ZustandActionButton, {
-        type: "copy",
-        text: "COPY STATE",
-        onPress: handleCopyState,
-        testID: `${_testIDs.ZUSTAND_TEST_ID}-copy-state`
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
-      visible: showProModal,
-      onClose: () => setShowProModal(false),
-      featureName: "Copy"
-    })]
-  });
-});
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  contentContainer: {
-    padding: 8,
-    paddingBottom: 100,
-    gap: 16
-  },
-  card: {
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.accentBorderStrong,
-    overflow: "hidden",
-    shadowColor: _sharedUi.night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 6
-  },
-  sectionHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.night.color.accentBorder,
-    backgroundColor: _sharedUi.night.color.accentSoft
-  },
-  sectionHeaderLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  sectionTitle: {
-    fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    color: _sharedUi.night.color.accent,
-    fontFamily: _sharedUi.monoFont
-  },
-  cardContent: {
-    padding: 14,
-    gap: 10
-  },
-  badgeRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-    marginTop: 6
-  },
-  categoryBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  categoryText: {
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.3
-  },
-  durationBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.night.color.surfaceElevated
-  },
-  durationBadgeSlow: {
-    backgroundColor: _sharedUi.buoyColors.error + "26"
-  },
-  durationText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textSecondary,
-    fontFamily: _sharedUi.monoFont
-  },
-  durationTextSlow: {
-    color: _sharedUi.buoyColors.error
-  },
-  changesBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.success + "26"
-  },
-  changesText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: _sharedUi.buoyColors.success
-  },
-  noChangesBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.night.color.surfaceElevated
-  },
-  noChangesText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textTertiary
-  },
-  persistBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.info + "26"
-  },
-  persistText: {
-    fontSize: 9,
-    fontWeight: "700",
-    color: _sharedUi.buoyColors.info,
-    letterSpacing: 0.3
-  },
-  keysContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6
-  },
-  keyBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.night.color.accentSoft,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.accentBorder
-  },
-  keyText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: _sharedUi.night.color.accent,
-    fontFamily: _sharedUi.monoFont
-  },
-  countBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.night.color.accentFill
-  },
-  countText: {
-    fontSize: 9,
-    fontWeight: "700",
-    color: _sharedUi.night.color.accent,
-    fontFamily: _sharedUi.monoFont
-  },
-  typeBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 3,
-    backgroundColor: _sharedUi.night.color.surfaceElevated
-  },
-  typeText: {
-    fontSize: 8,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textTertiary,
-    fontFamily: _sharedUi.monoFont
-  },
-  dataViewerContainer: {
-    // Inset display panel — darker than the card, the night track color.
-    backgroundColor: _sharedUi.night.color.bg,
-    minHeight: 60
-  },
-  updaterText: {
-    fontSize: 12,
-    color: _sharedUi.night.color.text,
-    fontFamily: _sharedUi.monoFont
-  },
-  updaterSubtext: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textTertiary,
-    lineHeight: 16,
-    marginTop: 4
-  },
-  actionsGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 12,
-    justifyContent: "flex-start"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandStateInfoView=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_ZustandActionButton=require("./ZustandActionButton"),_zustandStateStore=require("../utils/zustandStateStore"),_testIDs=require("../utils/testIDs"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,i,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(s=t?a:r){if(s.has(e))return s.get(e);s.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?s(o,t,i):o[t]=e[t]);return o})(e,t)}function getCategoryInfo(e){switch(e){case"replace":return{label:"REPLACE",color:_sharedUi.buoyColors.warning,bgColor:_sharedUi.buoyColors.warning+"26"};case"persist":return{label:"PERSIST",color:_sharedUi.buoyColors.info,bgColor:_sharedUi.buoyColors.info+"26"};case"initial":return{label:"INITIAL",color:_sharedUi.night.color.textTertiary,bgColor:_sharedUi.night.color.textTertiary+"26"};default:return{label:"SET STATE",color:_sharedUi.buoyColors.success,bgColor:_sharedUi.buoyColors.success+"26"}}}function formatDuration(e){return void 0===e?"N/A":e<1?"<1ms":`${e.toFixed(1)}ms`}function SectionHeader({icon:e,title:t,badge:r,testID:a}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sectionHeader,testID:a,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sectionHeaderLeft,children:[(0,_jsxRuntime.jsx)(e,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionTitle,children:t})]}),r]})}function formatTime(e){const t=new Date(e);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}:${t.getSeconds().toString().padStart(2,"0")}.${t.getMilliseconds().toString().padStart(3,"0")}`}const ZustandStateInfoView=exports.ZustandStateInfoView=(0,_react.memo)(function({change:e}){const t=(0,_license.useIsPro)(),[r,a]=(0,_react.useState)(!1);(0,_react.useEffect)(()=>{r&&t&&a(!1)},[r,t]);const s=getCategoryInfo(e.category),i=void 0!==e.partial&&"(updater fn)"!==e.partial,o=e.changedKeys.length>0,n=_zustandStateStore.zustandStateStore.getStoreColor(e.storeName),l=(0,_react.useCallback)(async()=>{t?await(0,_sharedUi.copyToClipboard)(e.nextState):a(!0)},[e.nextState,t]),d=(0,_react.useCallback)(()=>{const t=_zustandStateStore.zustandStateStore.getStore(e.storeName);if(t?.api.getInitialState){const e=t.api.getInitialState();t.api.setState(e,!0)}},[e.storeName]),c=(0,_react.useCallback)(()=>{const t=_zustandStateStore.zustandStateStore.getStore(e.storeName);t&&t.api.setState(e.nextState,!0)},[e.storeName,e.nextState]);return(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.container,contentContainerStyle:styles.contentContainer,showsVerticalScrollIndicator:!1,testID:`${_testIDs.ZUSTAND_TEST_ID}-detail-scroll`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,testID:`${_testIDs.ZUSTAND_TEST_ID}-info-card`,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Info,title:"CHANGE INFO"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.cardContent,children:[(0,_jsxRuntime.jsx)(_sharedUi.InfoRow,{label:"Store",value:e.storeName,mono:!0,valueColor:n,testID:`${_testIDs.ZUSTAND_TEST_ID}-info-store`}),(0,_jsxRuntime.jsx)(_sharedUi.InfoRow,{label:"Time",value:formatTime(e.timestamp),mono:!0,testID:`${_testIDs.ZUSTAND_TEST_ID}-info-time`}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.badgeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.categoryBadge,{backgroundColor:s.bgColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryText,{color:s.color}],testID:`${_testIDs.ZUSTAND_TEST_ID}-info-category`,children:s.label})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.durationBadge,e.isSlowUpdate&&styles.durationBadgeSlow],children:[(0,_jsxRuntime.jsx)(_sharedUi.Clock,{size:10,color:e.isSlowUpdate?_sharedUi.buoyColors.error:_sharedUi.night.color.textSecondary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.durationText,e.isSlowUpdate&&styles.durationTextSlow],testID:`${_testIDs.ZUSTAND_TEST_ID}-info-duration`,children:formatDuration(e.duration)}),e.isSlowUpdate&&(0,_jsxRuntime.jsx)(_sharedUi.AlertTriangle,{size:10,color:_sharedUi.buoyColors.error})]}),e.hasStateChange?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.changesBadge,children:[(0,_jsxRuntime.jsx)(_sharedUi.Zap,{size:10,color:_sharedUi.buoyColors.success}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.changesText,testID:`${_testIDs.ZUSTAND_TEST_ID}-info-changes`,children:e.diffSummary||"changed"})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.noChangesBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noChangesText,testID:`${_testIDs.ZUSTAND_TEST_ID}-info-no-changes`,children:"no change"})}),e.isPersisted&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.persistBadge,children:[(0,_jsxRuntime.jsx)(_sharedUi.Database,{size:10,color:_sharedUi.buoyColors.info}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.persistText,testID:`${_testIDs.ZUSTAND_TEST_ID}-info-persisted`,children:"PERSISTED"})]})]})]})]}),o&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,testID:`${_testIDs.ZUSTAND_TEST_ID}-keys-card`,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Zap,title:"CHANGED KEYS",badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.countBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.countText,testID:`${_testIDs.ZUSTAND_TEST_ID}-keys-count`,children:e.changedKeys.length})})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.cardContent,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.keysContainer,children:e.changedKeys.map(e=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.keyBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.keyText,testID:`${_testIDs.ZUSTAND_TEST_ID}-key-${e}`,children:e})},e))})})]}),i&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,testID:`${_testIDs.ZUSTAND_TEST_ID}-partial-card`,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Box,title:"PARTIAL (setState argument)",badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.typeText,testID:`${_testIDs.ZUSTAND_TEST_ID}-partial-type`,children:Array.isArray(e.partial)?"ARRAY":"object"==typeof e.partial?"OBJECT":String(typeof e.partial).toUpperCase()})})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.dataViewerContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:(0,_sharedUi.parseValue)(e.partial),showTypeFilter:!0,rawMode:!0,initialExpanded:!0})})]}),"(updater fn)"===e.partial&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,testID:`${_testIDs.ZUSTAND_TEST_ID}-updater-card`,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Box,title:"SET STATE CALL"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.cardContent,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.updaterText,children:"Called with an updater function: set((state) => ...)"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.updaterSubtext,children:"The partial value is computed at runtime from the previous state. See the DIFF tab to view the resulting changes."})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionsGrid,children:[(0,_jsxRuntime.jsx)(_ZustandActionButton.ZustandActionButton,{type:"jump",text:"JUMP",onPress:c,testID:`${_testIDs.ZUSTAND_TEST_ID}-jump`}),(0,_jsxRuntime.jsx)(_ZustandActionButton.ZustandActionButton,{type:"reset",text:"RESET STORE",onPress:d,testID:`${_testIDs.ZUSTAND_TEST_ID}-reset`}),(0,_jsxRuntime.jsx)(_ZustandActionButton.ZustandActionButton,{type:"copy",text:"COPY STATE",onPress:l,testID:`${_testIDs.ZUSTAND_TEST_ID}-copy-state`})]}),(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:r,onClose:()=>a(!1),featureName:"Copy"})]})}),styles=_reactNative.StyleSheet.create({container:{flex:1},contentContainer:{padding:8,paddingBottom:100,gap:16},card:{backgroundColor:_sharedUi.night.color.surface,borderRadius:6,borderWidth:1,borderColor:_sharedUi.night.color.accentBorderStrong,overflow:"hidden",shadowColor:_sharedUi.night.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},sectionHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.accentBorder,backgroundColor:_sharedUi.night.color.accentSoft},sectionHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6},sectionTitle:{fontSize:12,fontWeight:"600",letterSpacing:.5,color:_sharedUi.night.color.accent,fontFamily:_sharedUi.monoFont},cardContent:{padding:14,gap:10},badgeRow:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:6},categoryBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4},categoryText:{fontSize:9,fontWeight:"700",letterSpacing:.3},durationBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.night.color.surfaceElevated},durationBadgeSlow:{backgroundColor:_sharedUi.buoyColors.error+"26"},durationText:{fontSize:9,fontWeight:"600",color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont},durationTextSlow:{color:_sharedUi.buoyColors.error},changesBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.success+"26"},changesText:{fontSize:9,fontWeight:"600",color:_sharedUi.buoyColors.success},noChangesBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.night.color.surfaceElevated},noChangesText:{fontSize:9,fontWeight:"600",color:_sharedUi.night.color.textTertiary},persistBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.info+"26"},persistText:{fontSize:9,fontWeight:"700",color:_sharedUi.buoyColors.info,letterSpacing:.3},keysContainer:{flexDirection:"row",flexWrap:"wrap",gap:6},keyBadge:{paddingHorizontal:8,paddingVertical:4,borderRadius:4,backgroundColor:_sharedUi.night.color.accentSoft,borderWidth:1,borderColor:_sharedUi.night.color.accentBorder},keyText:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.accent,fontFamily:_sharedUi.monoFont},countBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.night.color.accentFill},countText:{fontSize:9,fontWeight:"700",color:_sharedUi.night.color.accent,fontFamily:_sharedUi.monoFont},typeBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:3,backgroundColor:_sharedUi.night.color.surfaceElevated},typeText:{fontSize:8,fontWeight:"600",color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},dataViewerContainer:{backgroundColor:_sharedUi.night.color.bg,minHeight:60},updaterText:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},updaterSubtext:{fontSize:11,color:_sharedUi.night.color.textTertiary,lineHeight:16,marginTop:4},actionsGrid:{flexDirection:"row",flexWrap:"wrap",gap:12,justifyContent:"flex-start"}});