@buoy-gg/zustand 7.0.41 → 7.0.43

package/lib/module/zustand/components/ZustandStoreBrowser.js

@@ -1,200 +1 @@
-"use strict";
-
-/**
- * ZustandStoreBrowser
- *
- * Browse tab — lists all registered Zustand stores. Tapping a card opens the
- * store's detail screen (ZustandStoreDetailContent): live state editor on
- * top, store details and the read-only tree below — the React Query
- * interaction, replacing the old expand-in-place card.
- */
-
-import { useMemo } from "react";
-import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { CompactRow, night, ToolEmptyState, resolveListEmptyState, monoFont } from "@buoy-gg/shared-ui";
-import { zustandStateStore } from "../utils/zustandStateStore";
-import { ZUSTAND_TEST_ID, storeRowTestID } from "../utils/testIDs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Get a preview of the store's top-level keys
- */
-function getKeysPreview(store) {
-  try {
-    const state = store.api.getState();
-    if (state && typeof state === "object" && state.__buoyStateOnDevice === true) {
-      return "on device";
-    }
-    if (state && typeof state === "object") {
-      const keys = Object.keys(state);
-      const dataKeys = keys.filter(k => {
-        const val = state[k];
-        return typeof val !== "function";
-      });
-      if (dataKeys.length === 0) return "no data keys";
-      if (dataKeys.length <= 3) return dataKeys.join(", ");
-      return `${dataKeys.slice(0, 2).join(", ")} +${dataKeys.length - 2}`;
-    }
-    return "";
-  } catch {
-    return "";
-  }
-}
-function LoadingBrowserState() {
-  return /*#__PURE__*/_jsx(ToolEmptyState, {
-    testID: `${ZUSTAND_TEST_ID}-stores-loading`
-    // Replaces the spinner rather than joining it: two animated things
-    // stacked is clutter, and `loading` IS the indeterminate spinner in
-    // mascot form.
-    ,
-    otto: "loading",
-    title: "Loading stores\u2026",
-    message: "Waiting for the device to send its registered stores."
-  });
-}
-function EmptyBrowserState() {
-  return /*#__PURE__*/_jsx(ToolEmptyState, {
-    testID: `${ZUSTAND_TEST_ID}-stores-empty`
-    // scanning = "scanning for targets… and finding none". The registry is
-    // discovered, not configured, so an empty one is a scan result.
-    ,
-    otto: "scanning",
-    title: "No stores registered",
-    message: "Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."
-  });
-}
-export function ZustandStoreBrowser({
-  stores,
-  searchQuery,
-  isLoading = false,
-  onOpenStore
-}) {
-  // Filter stores by search query
-  const filteredStores = useMemo(() => {
-    if (!searchQuery) return stores;
-    const search = searchQuery.toLowerCase();
-    return stores.filter(s => s.name.toLowerCase().includes(search) || s.persistName && s.persistName.toLowerCase().includes(search));
-  }, [stores, searchQuery]);
-  if (filteredStores.length === 0 && !searchQuery) {
-    return isLoading ? /*#__PURE__*/_jsx(LoadingBrowserState, {}) : /*#__PURE__*/_jsx(EmptyBrowserState, {});
-  }
-  if (filteredStores.length === 0 && searchQuery) {
-    return /*#__PURE__*/_jsx(ToolEmptyState, {
-      testID: `${ZUSTAND_TEST_ID}-stores-no-match`,
-      ...resolveListEmptyState({
-        subject: "stores",
-        verb: "registered",
-        search: searchQuery,
-        total: stores.length,
-        waiting: {
-          otto: "scanning",
-          title: "No stores registered",
-          message: "Use watchStores() to register your Zustand stores."
-        }
-      })
-    });
-  }
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    style: styles.container,
-    contentContainerStyle: styles.scrollContent,
-    showsVerticalScrollIndicator: true,
-    testID: `${ZUSTAND_TEST_ID}-stores-scroll`,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.sectionHeader,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "STORES"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.sectionCountBadge,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.sectionCountText,
-          testID: `${ZUSTAND_TEST_ID}-stores-count`,
-          children: filteredStores.length
-        })
-      })]
-    }), filteredStores.map(store => {
-      const keysPreview = getKeysPreview(store);
-      const storeColor = zustandStateStore.getStoreColor(store.name);
-      const rowID = storeRowTestID(store.name);
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.storeRowWrapper,
-        children: [/*#__PURE__*/_jsx(CompactRow, {
-          statusDotColor: storeColor,
-          statusLabel: store.isPersisted ? "persisted" : "in-memory",
-          primaryText: store.name,
-          secondaryText: keysPreview || undefined,
-          showChevron: true,
-          onPress: () => onOpenStore(store.name),
-          testID: rowID,
-          statusTestID: `${rowID}-backing`,
-          primaryTestID: `${rowID}-name`,
-          secondaryTestID: `${rowID}-keys`
-        }), store.stateChangeCount > 0 && /*#__PURE__*/_jsx(View, {
-          style: [styles.absCountBadge, {
-            backgroundColor: storeColor + "22",
-            borderColor: storeColor + "55"
-          }],
-          pointerEvents: "none",
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.absCountText, {
-              color: storeColor
-            }],
-            testID: `${rowID}-count`,
-            children: String(store.stateChangeCount)
-          })
-        })]
-      }, store.name);
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  storeRowWrapper: {
-    position: "relative"
-  },
-  absCountBadge: {
-    position: "absolute",
-    top: 4,
-    right: 10,
-    paddingHorizontal: 5,
-    paddingVertical: 1,
-    borderRadius: 4,
-    borderWidth: 1,
-    zIndex: 1
-  },
-  absCountText: {
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: monoFont
-  },
-  scrollContent: {
-    paddingTop: 8,
-    paddingBottom: 20
-  },
-  sectionHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    gap: 8
-  },
-  sectionTitle: {
-    fontSize: 11,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: night.color.textTertiary
-  },
-  sectionCountBadge: {
-    backgroundColor: night.color.accentFill,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  sectionCountText: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: night.color.accent,
-    fontFamily: monoFont
-  }
-});
+"use strict";import{useMemo as S}from"react";import{View as g,Text as p,StyleSheet as C,ScrollView as w}from"react-native";import{CompactRow as T,night as m,ToolEmptyState as f,resolveListEmptyState as b,monoFont as y}from"@buoy-gg/shared-ui";import{zustandStateStore as D}from"../utils/zustandStateStore";import{ZUSTAND_TEST_ID as c,storeRowTestID as x}from"../utils/testIDs";import{jsx as o,jsxs as h}from"react/jsx-runtime";function I(s){try{const t=s.api.getState();if(t&&typeof t==="object"&&t.__buoyStateOnDevice===true){return"on device"}if(t&&typeof t==="object"){const u=Object.keys(t);const r=u.filter(i=>{const e=t[i];return typeof e!=="function"});if(r.length===0)return"no data keys";if(r.length<=3)return r.join(", ");return`${r.slice(0,2).join(", ")} +${r.length-2}`}return""}catch{return""}}function v(){return o(f,{testID:`${c}-stores-loading`,otto:"loading",title:"Loading stores\u2026",message:"Waiting for the device to send its registered stores."})}function $(){return o(f,{testID:`${c}-stores-empty`,otto:"scanning",title:"No stores registered",message:"Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."})}export function ZustandStoreBrowser({stores:s,searchQuery:t,isLoading:u=false,onOpenStore:r}){const i=S(()=>{if(!t)return s;const e=t.toLowerCase();return s.filter(a=>a.name.toLowerCase().includes(e)||a.persistName&&a.persistName.toLowerCase().includes(e))},[s,t]);if(i.length===0&&!t){return u?o(v,{}):o($,{})}if(i.length===0&&t){return o(f,{testID:`${c}-stores-no-match`,...b({subject:"stores",verb:"registered",search:t,total:s.length,waiting:{otto:"scanning",title:"No stores registered",message:"Use watchStores() to register your Zustand stores."}})})}return h(w,{style:n.container,contentContainerStyle:n.scrollContent,showsVerticalScrollIndicator:true,testID:`${c}-stores-scroll`,children:[h(g,{style:n.sectionHeader,children:[o(p,{style:n.sectionTitle,children:"STORES"}),o(g,{style:n.sectionCountBadge,children:o(p,{style:n.sectionCountText,testID:`${c}-stores-count`,children:i.length})})]}),i.map(e=>{const a=I(e);const d=D.getStoreColor(e.name);const l=x(e.name);return h(g,{style:n.storeRowWrapper,children:[o(T,{statusDotColor:d,statusLabel:e.isPersisted?"persisted":"in-memory",primaryText:e.name,secondaryText:a||void 0,showChevron:true,onPress:()=>r(e.name),testID:l,statusTestID:`${l}-backing`,primaryTestID:`${l}-name`,secondaryTestID:`${l}-keys`}),e.stateChangeCount>0&&o(g,{style:[n.absCountBadge,{backgroundColor:d+"22",borderColor:d+"55"}],pointerEvents:"none",children:o(p,{style:[n.absCountText,{color:d}],testID:`${l}-count`,children:String(e.stateChangeCount)})})]},e.name)})]})}const n=C.create({container:{flex:1},storeRowWrapper:{position:"relative"},absCountBadge:{position:"absolute",top:4,right:10,paddingHorizontal:5,paddingVertical:1,borderRadius:4,borderWidth:1,zIndex:1},absCountText:{fontSize:9,fontWeight:"700",fontFamily:y},scrollContent:{paddingTop:8,paddingBottom:20},sectionHeader:{flexDirection:"row",alignItems:"center",paddingHorizontal:16,paddingVertical:8,gap:8},sectionTitle:{fontSize:11,fontWeight:"700",letterSpacing:.5,color:m.color.textTertiary},sectionCountBadge:{backgroundColor:m.color.accentFill,paddingHorizontal:8,paddingVertical:2,borderRadius:4},sectionCountText:{fontSize:10,fontWeight:"700",color:m.color.accent,fontFamily:y}});

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

@@ -1,469 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { buoyColors, Database, ExpandedInfoRow, FileJson, night, PillBadge, parseValue, monoFont } from "@buoy-gg/shared-ui";
-import { DataViewer, LiveExplorer, ValueEditModal, updateNestedDataByPath, deleteNestedDataByPath } from "@buoy-gg/shared-ui/dataViewer";
-import { computeMergePartial, editableStateOf, isPlainObjectLike } from "../utils/editableState";
-import { ZUSTAND_TEST_ID, storeRowTestID } from "../utils/testIDs";
-
-/** How long typed edits coalesce before the single merge write fires. */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const TYPING_COMMIT_MS = 300;
-
-/** `buoy-zustand-detail-…` — this screen's own handle root. */
-const DETAIL_ID = `${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("-")}`;
-}
-export function ZustandStoreDetailContent({
-  store,
-  onViewHistory
-}) {
-  const rowID = 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] = useState(0);
-  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 = useMemo(() => editableStateOf(state),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [state, version]);
-  const [rawOpen, setRawOpen] = useState(false);
-  const writer = useMemo(() => {
-    if (editable.data === null) return undefined;
-    return {
-      update: (path, value) => {
-        const current = store.api.getState();
-        if (!isPlainObjectLike(current) || path.length === 0) return;
-        const topKey = path[0];
-        const nextTop = path.length === 1 ? value : 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 (!isPlainObjectLike(current) || path.length <= 1) return;
-        const topKey = path[0];
-        const nextTop = 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 = useCallback(next => {
-    const current = editableStateOf(store.api.getState());
-    if (current.data === null) return;
-    const partial = computeMergePartial(current.data, next);
-    if (Object.keys(partial).length > 0) {
-      store.api.setState(partial, false);
-    }
-    setRawOpen(false);
-  }, [store.api]);
-  const displayState = useMemo(() => {
-    if (state && typeof state === "object") {
-      const filtered = {};
-      for (const [key, value] of Object.entries(state)) {
-        if (typeof value !== "function") filtered[key] = value;
-      }
-      return parseValue(filtered);
-    }
-    return parseValue(state);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state, version]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.root,
-    children: [/*#__PURE__*/_jsxs(ScrollView, {
-      testID: `${DETAIL_ID}-scroll`,
-      style: styles.scroll,
-      contentContainerStyle: styles.scrollContent,
-      keyboardShouldPersistTaps: "handled",
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.section,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.editorContainer,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.sectionHeaderRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              testID: `${DETAIL_ID}-editor-header`,
-              style: styles.sectionHeaderText,
-              children: "State Editor"
-            }), editable.data !== null ? /*#__PURE__*/_jsxs(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__*/_jsx(FileJson, {
-                size: 13,
-                color: night.color.accent
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.rawButtonText,
-                children: "Raw"
-              })]
-            }) : null]
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.sectionBody,
-            children: editable.data !== null ? /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(LiveExplorer, {
-                editable: true,
-                label: "State",
-                value: editable.data,
-                defaultExpanded: ["State"],
-                writer: writer,
-                dataVersion: version,
-                testIDForPath: detailExplorerTestID,
-                debounceMs: TYPING_COMMIT_MS
-              }), /*#__PURE__*/_jsx(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__*/_jsx(Text, {
-              style: styles.blockedText,
-              testID: `${DETAIL_ID}-edit-blocked`,
-              children: editable.blockedReason
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.section,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.infoContainer,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionHeaderTextPlain,
-            children: "Store Details"
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.infoBody,
-            children: [/*#__PURE__*/_jsx(ExpandedInfoRow, {
-              label: "Type",
-              children: /*#__PURE__*/_jsx(PillBadge, {
-                color: store.color,
-                testID: `${rowID}-type`,
-                children: "ZUSTAND"
-              })
-            }), /*#__PURE__*/_jsxs(ExpandedInfoRow, {
-              label: "Backing",
-              children: [/*#__PURE__*/_jsx(PillBadge, {
-                color: buoyColors.info,
-                icon: store.isPersisted ? /*#__PURE__*/_jsx(Database, {
-                  size: 9,
-                  color: buoyColors.info
-                }) : undefined,
-                testID: `${rowID}-persist`,
-                children: store.isPersisted ? store.persistName || "persisted" : "in-memory"
-              }), store.isPersisted ? /*#__PURE__*/_jsx(RereadSavedValue, {
-                store: store,
-                rowID: rowID
-              }) : null]
-            }), store.stateChangeCount > 0 && /*#__PURE__*/_jsxs(ExpandedInfoRow, {
-              label: "Changes",
-              children: [/*#__PURE__*/_jsx(PillBadge, {
-                color: buoyColors.warning,
-                testID: `${rowID}-changes`,
-                children: String(store.stateChangeCount)
-              }), /*#__PURE__*/_jsx(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__*/_jsx(Text, {
-                  style: [styles.inlineLinkText, {
-                    color: store.color
-                  }],
-                  children: "view history \u2192"
-                })
-              })]
-            }), editable.fnPaths.length > 0 && /*#__PURE__*/_jsx(ExpandedInfoRow, {
-              label: "Actions",
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.actionsText,
-                testID: `${DETAIL_ID}-actions`,
-                numberOfLines: 2,
-                children: editable.fnPaths.join(" · ")
-              })
-            })]
-          })]
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.section,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.infoContainer,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionHeaderTextPlain,
-            children: "State Explorer"
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.viewerBody,
-            testID: `${rowID}-state`,
-            children: displayState && typeof displayState === "object" ? /*#__PURE__*/_jsx(DataViewer, {
-              title: "",
-              data: displayState,
-              showTypeFilter: true,
-              rawMode: true,
-              initialExpanded: false
-            }) : /*#__PURE__*/_jsx(Text, {
-              style: styles.blockedText,
-              children: "Empty state"
-            })
-          })]
-        })
-      })]
-    }), rawOpen && editable.data !== null ? /*#__PURE__*/_jsx(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: `${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] = useState(false);
-  const [error, setError] = 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__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(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__*/_jsx(Text, {
-        style: [styles.inlineLinkText, {
-          color: store.color
-        }],
-        children: busy ? "re-reading…" : "re-read saved value →"
-      })
-    }), error ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.inlineLinkText, {
-        color: night.color.danger
-      }],
-      children: error
-    }) : null]
-  });
-}
-const styles = 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: night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.accent + "4D",
-    overflow: "hidden",
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 6
-  },
-  sectionHeaderRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: night.color.accent + "1A",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.accent + "33"
-  },
-  sectionHeaderText: {
-    fontWeight: "600",
-    fontSize: 12,
-    color: night.color.accent,
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: monoFont
-  },
-  rawButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  rawButtonText: {
-    color: night.color.accent,
-    fontSize: 11,
-    fontWeight: "700"
-  },
-  sectionBody: {
-    padding: 8
-  },
-  editorHint: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-    paddingTop: 8,
-    paddingHorizontal: 4,
-    lineHeight: 14
-  },
-  blockedText: {
-    color: night.color.textSecondary,
-    fontSize: 12,
-    padding: 12,
-    lineHeight: 18
-  },
-  infoContainer: {
-    minWidth: 200,
-    backgroundColor: night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden"
-  },
-  sectionHeaderTextPlain: {
-    backgroundColor: night.color.surfaceElevated,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    fontWeight: "600",
-    fontSize: 12,
-    color: night.color.textSecondary,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.border,
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: monoFont
-  },
-  infoBody: {
-    padding: 12,
-    gap: 10
-  },
-  viewerBody: {
-    backgroundColor: night.color.bg,
-    minHeight: 60
-  },
-  inlineLinkButton: {
-    marginLeft: 4
-  },
-  inlineLinkText: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  actionsText: {
-    flex: 1,
-    color: night.color.textSecondary,
-    fontSize: 10,
-    fontFamily: monoFont,
-    lineHeight: 15
-  }
-});
+"use strict";import{useCallback as j,useEffect as O,useMemo as C,useState as S}from"react";import{ScrollView as V,StyleSheet as F,Text as s,TouchableOpacity as k,View as d}from"react-native";import{buoyColors as B,Database as W,ExpandedInfoRow as x,FileJson as M,night as i,PillBadge as I,parseValue as v,monoFont as w}from"@buoy-gg/shared-ui";import{DataViewer as _,LiveExplorer as N,ValueEditModal as A,updateNestedDataByPath as Z,deleteNestedDataByPath as J}from"@buoy-gg/shared-ui/dataViewer";import{computeMergePartial as K,editableStateOf as P,isPlainObjectLike as $}from"../utils/editableState";import{ZUSTAND_TEST_ID as H,storeRowTestID as U}from"../utils/testIDs";import{jsx as t,jsxs as l,Fragment as E}from"react/jsx-runtime";const G=300;const f=`${H}-detail`;function Y(e){const y=a=>a.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");return e.length===0?`${f}-explorer-root`:`${f}-explorer-${e.map(y).filter(Boolean).join("-")}`}export function ZustandStoreDetailContent({store:e,onViewHistory:y}){const a=U(e.name);const[p,b]=S(0);O(()=>e.api.subscribe(()=>b(n=>n+1)),[e.api]);const u=e.api.getState();const r=C(()=>P(u),[u,p]);const[g,T]=S(false);const L=C(()=>{if(r.data===null)return void 0;return{update:(n,h)=>{const c=e.api.getState();if(!$(c)||n.length===0)return;const m=n[0];const z=n.length===1?h:Z(c[m],n.slice(1),h);e.api.setState({[m]:z},false)},remove:n=>{const h=e.api.getState();if(!$(h)||n.length<=1)return;const c=n[0];const m=J(h[c],n.slice(1));e.api.setState({[c]:m},false)},canRemove:n=>n.length>1}},[e.api,r.data===null]);const R=j(n=>{const h=P(e.api.getState());if(h.data===null)return;const c=K(h.data,n);if(Object.keys(c).length>0){e.api.setState(c,false)}T(false)},[e.api]);const D=C(()=>{if(u&&typeof u==="object"){const n={};for(const[h,c]of Object.entries(u)){if(typeof c!=="function")n[h]=c}return v(n)}return v(u)},[u,p]);return l(d,{style:o.root,children:[l(V,{testID:`${f}-scroll`,style:o.scroll,contentContainerStyle:o.scrollContent,keyboardShouldPersistTaps:"handled",children:[t(d,{style:o.section,children:l(d,{style:o.editorContainer,children:[l(d,{style:o.sectionHeaderRow,children:[t(s,{testID:`${f}-editor-header`,style:o.sectionHeaderText,children:"State Editor"}),r.data!==null?l(k,{onPress:()=>T(true),testID:`${f}-raw`,accessibilityRole:"button",accessibilityLabel:"Edit raw JSON",style:o.rawButton,hitSlop:{top:6,bottom:6,left:6,right:6},children:[t(M,{size:13,color:i.color.accent}),t(s,{style:o.rawButtonText,children:"Raw"})]}):null]}),t(d,{style:o.sectionBody,children:r.data!==null?l(E,{children:[t(N,{editable:true,label:"State",value:r.data,defaultExpanded:["State"],writer:L,dataVersion:p,testIDForPath:Y,debounceMs:G}),t(s,{style:o.editorHint,children:"Edits write into the live store as you make them \u2014 merged, so the store's actions and untouched keys survive."})]}):t(s,{style:o.blockedText,testID:`${f}-edit-blocked`,children:r.blockedReason})})]})}),t(d,{style:o.section,children:l(d,{style:o.infoContainer,children:[t(s,{style:o.sectionHeaderTextPlain,children:"Store Details"}),l(d,{style:o.infoBody,children:[t(x,{label:"Type",children:t(I,{color:e.color,testID:`${a}-type`,children:"ZUSTAND"})}),l(x,{label:"Backing",children:[t(I,{color:B.info,icon:e.isPersisted?t(W,{size:9,color:B.info}):void 0,testID:`${a}-persist`,children:e.isPersisted?e.persistName||"persisted":"in-memory"}),e.isPersisted?t(q,{store:e,rowID:a}):null]}),e.stateChangeCount>0&&l(x,{label:"Changes",children:[t(I,{color:B.warning,testID:`${a}-changes`,children:String(e.stateChangeCount)}),t(k,{onPress:()=>y(e.name),style:o.inlineLinkButton,hitSlop:{top:6,bottom:6,left:6,right:6},testID:`${a}-history`,accessibilityRole:"button",accessibilityLabel:`View ${e.name} history`,children:t(s,{style:[o.inlineLinkText,{color:e.color}],children:"view history \u2192"})})]}),r.fnPaths.length>0&&t(x,{label:"Actions",children:t(s,{style:o.actionsText,testID:`${f}-actions`,numberOfLines:2,children:r.fnPaths.join(" \xB7 ")})})]})]})}),t(d,{style:o.section,children:l(d,{style:o.infoContainer,children:[t(s,{style:o.sectionHeaderTextPlain,children:"State Explorer"}),t(d,{style:o.viewerBody,testID:`${a}-state`,children:D&&typeof D==="object"?t(_,{title:"",data:D,showTypeFilter:true,rawMode:true,initialExpanded:false}):t(s,{style:o.blockedText,children:"Empty state"})})]})})]}),g&&r.data!==null?t(A,{path:[],value:r.data,onSave:n=>{try{R(n)}catch{}},onCancel:()=>T(false),saveLabel:"Apply",testIDPrefix:`${H}-value`}):null]})}function q({store:e,rowID:y}){const[a,p]=S(false);const[b,u]=S(null);if(!e.rehydrate)return null;const r=()=>{p(true);u(null);void(async()=>{try{await e.rehydrate?.()}catch(g){u(g instanceof Error?g.message:String(g))}finally{p(false)}})()};return l(E,{children:[t(k,{onPress:r,disabled:a,style:o.inlineLinkButton,hitSlop:{top:6,bottom:6,left:6,right:6},testID:`${y}-reread`,accessibilityRole:"button",accessibilityLabel:`Re-read ${e.name} from storage`,children:t(s,{style:[o.inlineLinkText,{color:e.color}],children:a?"re-reading\u2026":"re-read saved value \u2192"})}),b?t(s,{style:[o.inlineLinkText,{color:i.color.danger}],children:b}):null]})}const o=F.create({root:{flex:1,minHeight:0},scroll:{flex:1},scrollContent:{paddingHorizontal:8,paddingTop:8,paddingBottom:24},section:{marginBottom:16},editorContainer:{minWidth:200,backgroundColor:i.color.surface,borderRadius:6,borderWidth:1,borderColor:i.color.accent+"4D",overflow:"hidden",shadowColor:i.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},sectionHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:i.color.accent+"1A",paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:i.color.accent+"33"},sectionHeaderText:{fontWeight:"600",fontSize:12,color:i.color.accent,letterSpacing:.5,textTransform:"uppercase",fontFamily:w},rawButton:{flexDirection:"row",alignItems:"center",gap:4},rawButtonText:{color:i.color.accent,fontSize:11,fontWeight:"700"},sectionBody:{padding:8},editorHint:{color:i.color.textTertiary,fontSize:10,paddingTop:8,paddingHorizontal:4,lineHeight:14},blockedText:{color:i.color.textSecondary,fontSize:12,padding:12,lineHeight:18},infoContainer:{minWidth:200,backgroundColor:i.color.surface,borderRadius:6,borderWidth:1,borderColor:i.color.border,overflow:"hidden"},sectionHeaderTextPlain:{backgroundColor:i.color.surfaceElevated,paddingHorizontal:12,paddingVertical:8,fontWeight:"600",fontSize:12,color:i.color.textSecondary,borderBottomWidth:1,borderBottomColor:i.color.border,letterSpacing:.5,textTransform:"uppercase",fontFamily:w},infoBody:{padding:12,gap:10},viewerBody:{backgroundColor:i.color.bg,minHeight:60},inlineLinkButton:{marginLeft:4},inlineLinkText:{fontSize:10,fontWeight:"600",fontFamily:w},actionsText:{flex:1,color:i.color.textSecondary,fontSize:10,fontFamily:w,lineHeight:15}});