@buoy-gg/zustand 7.0.38 → 7.0.39

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

@@ -1 +1,471 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandStoreDetailContent=ZustandStoreDetailContent;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_editableState=require("../utils/editableState"),_testIDs=require("../utils/testIDs"),_jsxRuntime=require("react/jsx-runtime");const TYPING_COMMIT_MS=300,DETAIL_ID=`${_testIDs.ZUSTAND_TEST_ID}-detail`;function detailExplorerTestID(e){return 0===e.length?`${DETAIL_ID}-explorer-root`:`${DETAIL_ID}-explorer-${e.map(e=>e.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")).filter(Boolean).join("-")}`}function ZustandStoreDetailContent({store:e,onViewHistory:t}){const i=(0,_testIDs.storeRowTestID)(e.name),[a,s]=(0,_react.useState)(0);(0,_react.useEffect)(()=>e.api.subscribe(()=>s(e=>e+1)),[e.api]);const r=e.api.getState(),o=(0,_react.useMemo)(()=>(0,_editableState.editableStateOf)(r),[r,a]),[n,l]=(0,_react.useState)(!1),d=(0,_react.useMemo)(()=>{if(null!==o.data)return{update:(t,i)=>{const a=e.api.getState();if(!(0,_editableState.isPlainObjectLike)(a)||0===t.length)return;const s=t[0],r=1===t.length?i:(0,_dataViewer.updateNestedDataByPath)(a[s],t.slice(1),i);e.api.setState({[s]:r},!1)},remove:t=>{const i=e.api.getState();if(!(0,_editableState.isPlainObjectLike)(i)||t.length<=1)return;const a=t[0],s=(0,_dataViewer.deleteNestedDataByPath)(i[a],t.slice(1));e.api.setState({[a]:s},!1)},canRemove:e=>e.length>1}},[e.api,null===o.data]),c=(0,_react.useCallback)(t=>{const i=(0,_editableState.editableStateOf)(e.api.getState());if(null===i.data)return;const a=(0,_editableState.computeMergePartial)(i.data,t);Object.keys(a).length>0&&e.api.setState(a,!1),l(!1)},[e.api]),h=(0,_react.useMemo)(()=>{if(r&&"object"==typeof r){const e={};for(const[t,i]of Object.entries(r))"function"!=typeof i&&(e[t]=i);return(0,_sharedUi.parseValue)(e)}return(0,_sharedUi.parseValue)(r)},[r,a]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.root,children:[(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{testID:`${DETAIL_ID}-scroll`,style:styles.scroll,contentContainerStyle:styles.scrollContent,keyboardShouldPersistTaps:"handled",children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.section,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.editorContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sectionHeaderRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`${DETAIL_ID}-editor-header`,style:styles.sectionHeaderText,children:"State Editor"}),null!==o.data?(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{onPress:()=>l(!0),testID:`${DETAIL_ID}-raw`,accessibilityRole:"button",accessibilityLabel:"Edit raw JSON",style:styles.rawButton,hitSlop:{top:6,bottom:6,left:6,right:6},children:[(0,_jsxRuntime.jsx)(_sharedUi.FileJson,{size:13,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.rawButtonText,children:"Raw"})]}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.sectionBody,children:null!==o.data?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_dataViewer.LiveExplorer,{editable:!0,label:"State",value:o.data,defaultExpanded:["State"],writer:d,dataVersion:a,testIDForPath:detailExplorerTestID,debounceMs:TYPING_COMMIT_MS}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.editorHint,children:"Edits write into the live store as you make them — merged, so the store's actions and untouched keys survive."})]}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.blockedText,testID:`${DETAIL_ID}-edit-blocked`,children:o.blockedReason})})]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.section,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionHeaderTextPlain,children:"Store Details"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoBody,children:[(0,_jsxRuntime.jsx)(_sharedUi.ExpandedInfoRow,{label:"Type",children:(0,_jsxRuntime.jsx)(_sharedUi.PillBadge,{color:e.color,testID:`${i}-type`,children:"ZUSTAND"})}),(0,_jsxRuntime.jsxs)(_sharedUi.ExpandedInfoRow,{label:"Backing",children:[(0,_jsxRuntime.jsx)(_sharedUi.PillBadge,{color:_sharedUi.buoyColors.info,icon:e.isPersisted?(0,_jsxRuntime.jsx)(_sharedUi.Database,{size:9,color:_sharedUi.buoyColors.info}):void 0,testID:`${i}-persist`,children:e.isPersisted?e.persistName||"persisted":"in-memory"}),e.isPersisted?(0,_jsxRuntime.jsx)(RereadSavedValue,{store:e,rowID:i}):null]}),e.stateChangeCount>0&&(0,_jsxRuntime.jsxs)(_sharedUi.ExpandedInfoRow,{label:"Changes",children:[(0,_jsxRuntime.jsx)(_sharedUi.PillBadge,{color:_sharedUi.buoyColors.warning,testID:`${i}-changes`,children:String(e.stateChangeCount)}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>t(e.name),style:styles.inlineLinkButton,hitSlop:{top:6,bottom:6,left:6,right:6},testID:`${i}-history`,accessibilityRole:"button",accessibilityLabel:`View ${e.name} history`,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.inlineLinkText,{color:e.color}],children:"view history →"})})]}),o.fnPaths.length>0&&(0,_jsxRuntime.jsx)(_sharedUi.ExpandedInfoRow,{label:"Actions",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionsText,testID:`${DETAIL_ID}-actions`,numberOfLines:2,children:o.fnPaths.join(" · ")})})]})]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.section,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionHeaderTextPlain,children:"State Explorer"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.viewerBody,testID:`${i}-state`,children:h&&"object"==typeof h?(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:h,showTypeFilter:!0,rawMode:!0,initialExpanded:!1}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.blockedText,children:"Empty state"})})]})})]}),n&&null!==o.data?(0,_jsxRuntime.jsx)(_dataViewer.ValueEditModal,{path:[],value:o.data,onSave:e=>{try{c(e)}catch{}},onCancel:()=>l(!1),saveLabel:"Apply",testIDPrefix:`${_testIDs.ZUSTAND_TEST_ID}-value`}):null]})}function RereadSavedValue({store:e,rowID:t}){const[i,a]=(0,_react.useState)(!1),[s,r]=(0,_react.useState)(null);return e.rehydrate?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>{a(!0),r(null),(async()=>{try{await(e.rehydrate?.())}catch(e){r(e instanceof Error?e.message:String(e))}finally{a(!1)}})()},disabled:i,style:styles.inlineLinkButton,hitSlop:{top:6,bottom:6,left:6,right:6},testID:`${t}-reread`,accessibilityRole:"button",accessibilityLabel:`Re-read ${e.name} from storage`,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.inlineLinkText,{color:e.color}],children:i?"re-reading…":"re-read saved value →"})}),s?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.inlineLinkText,{color:_sharedUi.night.color.danger}],children:s}):null]}):null}const styles=_reactNative.StyleSheet.create({root:{flex:1,minHeight:0},scroll:{flex:1},scrollContent:{paddingHorizontal:8,paddingTop:8,paddingBottom:24},section:{marginBottom:16},editorContainer:{minWidth:200,backgroundColor:_sharedUi.night.color.surface,borderRadius:6,borderWidth:1,borderColor:_sharedUi.night.color.accent+"4D",overflow:"hidden",shadowColor:_sharedUi.night.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},sectionHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:_sharedUi.night.color.accent+"1A",paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.accent+"33"},sectionHeaderText:{fontWeight:"600",fontSize:12,color:_sharedUi.night.color.accent,letterSpacing:.5,textTransform:"uppercase",fontFamily:_sharedUi.monoFont},rawButton:{flexDirection:"row",alignItems:"center",gap:4},rawButtonText:{color:_sharedUi.night.color.accent,fontSize:11,fontWeight:"700"},sectionBody:{padding:8},editorHint:{color:_sharedUi.night.color.textTertiary,fontSize:10,paddingTop:8,paddingHorizontal:4,lineHeight:14},blockedText:{color:_sharedUi.night.color.textSecondary,fontSize:12,padding:12,lineHeight:18},infoContainer:{minWidth:200,backgroundColor:_sharedUi.night.color.surface,borderRadius:6,borderWidth:1,borderColor:_sharedUi.night.color.border,overflow:"hidden"},sectionHeaderTextPlain:{backgroundColor:_sharedUi.night.color.surfaceElevated,paddingHorizontal:12,paddingVertical:8,fontWeight:"600",fontSize:12,color:_sharedUi.night.color.textSecondary,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.border,letterSpacing:.5,textTransform:"uppercase",fontFamily:_sharedUi.monoFont},infoBody:{padding:12,gap:10},viewerBody:{backgroundColor:_sharedUi.night.color.bg,minHeight:60},inlineLinkButton:{marginLeft:4},inlineLinkText:{fontSize:10,fontWeight:"600",fontFamily:_sharedUi.monoFont},actionsText:{flex:1,color:_sharedUi.night.color.textSecondary,fontSize:10,fontFamily:_sharedUi.monoFont,lineHeight:15}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZustandStoreDetailContent = ZustandStoreDetailContent;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _editableState = require("../utils/editableState");
+var _testIDs = require("../utils/testIDs");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * One store, on a screen of its own — the React Query detail-screen shape
+ * pointed at a live zustand store.
+ *
+ * Tapping a store card opens this instead of expanding in place. Top to
+ * bottom, mirroring RQ's `DataEditorMode`:
+ *
+ *   1. STATE EDITOR — the shared LiveExplorer. No draft, no Save: an edit
+ *      writes into the live store as you make it and the app reacts
+ *      immediately. Typing commits on a short debounce (~300ms, flushed on
+ *      blur) so a word is one recorded change, not one per keystroke —
+ *      zustand writes land in the change log and count against the free
+ *      tier's cap, which is the one way this tool differs from RQ's
+ *      unlogged cache writes.
+ *   2. STORE DETAILS — what the expanded card used to say: backing,
+ *      change count (with the road to history), the store's actions.
+ *   3. STATE EXPLORER — the read-only tree of the same state.
+ *
+ * THE WRITE RULE (unchanged from the previous editor — see editableState.ts):
+ * merge-only, always. However deep the edit, it is written as
+ * `setState({ [topKey]: rewritten }, false)`, which cannot delete a top-level
+ * key and cannot touch the action functions stores keep in state. The
+ * explorer's delete affordance is therefore vetoed at depth 1 via
+ * `canRemove`, and the Raw escape hatch (whole-state JSON, for the add-key /
+ * restructure cases live editing can't express) refuses drops through
+ * `computeMergePartial`, naming the key.
+ *
+ * On a desktop mirror the same writes go over the wire: the mirrored store's
+ * `api.setState` forwards to the device's sync adapter (the time-travel
+ * path), fire-and-forget, with the next snapshot as confirmation.
+ */
+
+/** How long typed edits coalesce before the single merge write fires. */const TYPING_COMMIT_MS = 300;
+
+/** `buoy-zustand-detail-…` — this screen's own handle root. */
+const DETAIL_ID = `${_testIDs.ZUSTAND_TEST_ID}-detail`;
+function detailExplorerTestID(dataPath) {
+  const slug = part => part.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return dataPath.length === 0 ? `${DETAIL_ID}-explorer-root` : `${DETAIL_ID}-explorer-${dataPath.map(slug).filter(Boolean).join("-")}`;
+}
+function ZustandStoreDetailContent({
+  store,
+  onViewHistory
+}) {
+  const rowID = (0, _testIDs.storeRowTestID)(store.name);
+
+  // Re-render on every store write — our own edits included — so the tree,
+  // the read-only explorer, and the change count all track the live store.
+  // On a desktop mirror the stub subscribe is a no-op and the re-render
+  // arrives via the stores snapshot refreshing this component's props.
+  const [version, setVersion] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => store.api.subscribe(() => setVersion(v => v + 1)), [store.api]);
+  const state = store.api.getState();
+  // Recomputed per write on purpose — this screen edits LIVE state, so every
+  // view of it derives from the store's current answer, never a seed.
+  const editable = (0, _react.useMemo)(() => (0, _editableState.editableStateOf)(state),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [state, version]);
+  const [rawOpen, setRawOpen] = (0, _react.useState)(false);
+  const writer = (0, _react.useMemo)(() => {
+    if (editable.data === null) return undefined;
+    return {
+      update: (path, value) => {
+        const current = store.api.getState();
+        if (!(0, _editableState.isPlainObjectLike)(current) || path.length === 0) return;
+        const topKey = path[0];
+        const nextTop = path.length === 1 ? value : (0, _dataViewer.updateNestedDataByPath)(
+        // The live value, not the stripped view — although below the
+        // top level they are the same thing (a store with functions
+        // nested in data keys is refused editing entirely).
+        current[topKey], path.slice(1), value);
+        store.api.setState({
+          [topKey]: nextTop
+        }, false);
+      },
+      remove: path => {
+        // Depth 1 is vetoed by canRemove; this guard is the belt to that
+        // suspender — a merge write cannot delete a top-level key.
+        const current = store.api.getState();
+        if (!(0, _editableState.isPlainObjectLike)(current) || path.length <= 1) return;
+        const topKey = path[0];
+        const nextTop = (0, _dataViewer.deleteNestedDataByPath)(current[topKey], path.slice(1));
+        store.api.setState({
+          [topKey]: nextTop
+        }, false);
+      },
+      canRemove: path => path.length > 1
+    };
+  }, [store.api, editable.data === null]);
+
+  /** Raw-hatch save: whole-document edit diffed into one merge write. */
+  const applyRaw = (0, _react.useCallback)(next => {
+    const current = (0, _editableState.editableStateOf)(store.api.getState());
+    if (current.data === null) return;
+    const partial = (0, _editableState.computeMergePartial)(current.data, next);
+    if (Object.keys(partial).length > 0) {
+      store.api.setState(partial, false);
+    }
+    setRawOpen(false);
+  }, [store.api]);
+  const displayState = (0, _react.useMemo)(() => {
+    if (state && typeof state === "object") {
+      const filtered = {};
+      for (const [key, value] of Object.entries(state)) {
+        if (typeof value !== "function") filtered[key] = value;
+      }
+      return (0, _sharedUi.parseValue)(filtered);
+    }
+    return (0, _sharedUi.parseValue)(state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state, version]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      testID: `${DETAIL_ID}-scroll`,
+      style: styles.scroll,
+      contentContainerStyle: styles.scrollContent,
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.editorContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.sectionHeaderRow,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              testID: `${DETAIL_ID}-editor-header`,
+              style: styles.sectionHeaderText,
+              children: "State Editor"
+            }), editable.data !== null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              onPress: () => setRawOpen(true),
+              testID: `${DETAIL_ID}-raw`,
+              accessibilityRole: "button",
+              accessibilityLabel: "Edit raw JSON",
+              style: styles.rawButton,
+              hitSlop: {
+                top: 6,
+                bottom: 6,
+                left: 6,
+                right: 6
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
+                size: 13,
+                color: _sharedUi.night.color.accent
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.rawButtonText,
+                children: "Raw"
+              })]
+            }) : null]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.sectionBody,
+            children: editable.data !== null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.LiveExplorer, {
+                editable: true,
+                label: "State",
+                value: editable.data,
+                defaultExpanded: ["State"],
+                writer: writer,
+                dataVersion: version,
+                testIDForPath: detailExplorerTestID,
+                debounceMs: TYPING_COMMIT_MS
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.editorHint,
+                children: "Edits write into the live store as you make them \u2014 merged, so the store's actions and untouched keys survive."
+              })]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.blockedText,
+              testID: `${DETAIL_ID}-edit-blocked`,
+              children: editable.blockedReason
+            })
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.infoContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.sectionHeaderTextPlain,
+            children: "Store Details"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.infoBody,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ExpandedInfoRow, {
+              label: "Type",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+                color: store.color,
+                testID: `${rowID}-type`,
+                children: "ZUSTAND"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ExpandedInfoRow, {
+              label: "Backing",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+                color: _sharedUi.buoyColors.info,
+                icon: store.isPersisted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
+                  size: 9,
+                  color: _sharedUi.buoyColors.info
+                }) : undefined,
+                testID: `${rowID}-persist`,
+                children: store.isPersisted ? store.persistName || "persisted" : "in-memory"
+              }), store.isPersisted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RereadSavedValue, {
+                store: store,
+                rowID: rowID
+              }) : null]
+            }), store.stateChangeCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ExpandedInfoRow, {
+              label: "Changes",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+                color: _sharedUi.buoyColors.warning,
+                testID: `${rowID}-changes`,
+                children: String(store.stateChangeCount)
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                onPress: () => onViewHistory(store.name),
+                style: styles.inlineLinkButton,
+                hitSlop: {
+                  top: 6,
+                  bottom: 6,
+                  left: 6,
+                  right: 6
+                },
+                testID: `${rowID}-history`,
+                accessibilityRole: "button",
+                accessibilityLabel: `View ${store.name} history`,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.inlineLinkText, {
+                    color: store.color
+                  }],
+                  children: "view history \u2192"
+                })
+              })]
+            }), editable.fnPaths.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ExpandedInfoRow, {
+              label: "Actions",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.actionsText,
+                testID: `${DETAIL_ID}-actions`,
+                numberOfLines: 2,
+                children: editable.fnPaths.join(" · ")
+              })
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.infoContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.sectionHeaderTextPlain,
+            children: "State Explorer"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.viewerBody,
+            testID: `${rowID}-state`,
+            children: displayState && typeof displayState === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+              title: "",
+              data: displayState,
+              showTypeFilter: true,
+              rawMode: true,
+              initialExpanded: false
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.blockedText,
+              children: "Empty state"
+            })
+          })]
+        })
+      })]
+    }), rawOpen && editable.data !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.ValueEditModal, {
+      path: [],
+      value: editable.data,
+      onSave: next => {
+        try {
+          applyRaw(next);
+        } catch {
+          // computeMergePartial refuses dropped top-level keys; the modal
+          // stays open with its own validation, so just don't close it.
+        }
+      },
+      onCancel: () => setRawOpen(false),
+      saveLabel: "Apply",
+      testIDPrefix: `${_testIDs.ZUSTAND_TEST_ID}-value`
+    }) : null]
+  });
+}
+
+/**
+ * Pull this store's saved value back into memory.
+ *
+ * Lives on the store rather than in the Storage tool because here there is
+ * nothing to infer: `store.rehydrate` IS the store's own `persist.rehydrate`.
+ * The merge keeps the store's action functions, and it does not write back
+ * unless a version migration ran. A store registered before its persist
+ * middleware attached has no handle — then there is simply no button.
+ */
+function RereadSavedValue({
+  store,
+  rowID
+}) {
+  const [busy, setBusy] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)(null);
+  if (!store.rehydrate) return null;
+  const reread = () => {
+    setBusy(true);
+    setError(null);
+    void (async () => {
+      try {
+        await store.rehydrate?.();
+      } catch (e) {
+        setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        setBusy(false);
+      }
+    })();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: reread,
+      disabled: busy,
+      style: styles.inlineLinkButton,
+      hitSlop: {
+        top: 6,
+        bottom: 6,
+        left: 6,
+        right: 6
+      },
+      testID: `${rowID}-reread`,
+      accessibilityRole: "button",
+      accessibilityLabel: `Re-read ${store.name} from storage`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.inlineLinkText, {
+          color: store.color
+        }],
+        children: busy ? "re-reading…" : "re-read saved value →"
+      })
+    }), error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.inlineLinkText, {
+        color: _sharedUi.night.color.danger
+      }],
+      children: error
+    }) : null]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 0
+  },
+  scroll: {
+    flex: 1
+  },
+  scrollContent: {
+    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingBottom: 24
+  },
+  section: {
+    marginBottom: 16
+  },
+  // The editable section wears the accent, like RQ's Data Editor — the one
+  // box on this screen that changes things should read differently from the
+  // two that don't.
+  editorContainer: {
+    minWidth: 200,
+    backgroundColor: _sharedUi.night.color.surface,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.accent + "4D",
+    overflow: "hidden",
+    shadowColor: _sharedUi.night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  sectionHeaderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: _sharedUi.night.color.accent + "1A",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.night.color.accent + "33"
+  },
+  sectionHeaderText: {
+    fontWeight: "600",
+    fontSize: 12,
+    color: _sharedUi.night.color.accent,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: _sharedUi.monoFont
+  },
+  rawButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  rawButtonText: {
+    color: _sharedUi.night.color.accent,
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  sectionBody: {
+    padding: 8
+  },
+  editorHint: {
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: 10,
+    paddingTop: 8,
+    paddingHorizontal: 4,
+    lineHeight: 14
+  },
+  blockedText: {
+    color: _sharedUi.night.color.textSecondary,
+    fontSize: 12,
+    padding: 12,
+    lineHeight: 18
+  },
+  infoContainer: {
+    minWidth: 200,
+    backgroundColor: _sharedUi.night.color.surface,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border,
+    overflow: "hidden"
+  },
+  sectionHeaderTextPlain: {
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontWeight: "600",
+    fontSize: 12,
+    color: _sharedUi.night.color.textSecondary,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.night.color.border,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: _sharedUi.monoFont
+  },
+  infoBody: {
+    padding: 12,
+    gap: 10
+  },
+  viewerBody: {
+    backgroundColor: _sharedUi.night.color.bg,
+    minHeight: 60
+  },
+  inlineLinkButton: {
+    marginLeft: 4
+  },
+  inlineLinkText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: _sharedUi.monoFont
+  },
+  actionsText: {
+    flex: 1,
+    color: _sharedUi.night.color.textSecondary,
+    fontSize: 10,
+    fontFamily: _sharedUi.monoFont,
+    lineHeight: 15
+  }
+});