@buoy-gg/zustand 7.0.38 → 7.0.39

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

@@ -1 +1,772 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandModal=ZustandModal,exports.ZustandToolView=ZustandToolView;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_useZustandStateChanges=require("../hooks/useZustandStateChanges"),_ZustandStateChangeItem=require("./ZustandStateChangeItem"),_ZustandStateDetailContent=require("./ZustandStateDetailContent"),_ZustandStoreBrowser=require("./ZustandStoreBrowser"),_ZustandStoreDetailContent=require("./ZustandStoreDetailContent"),_ZustandEventFilterView=require("./ZustandEventFilterView"),_testIDs=require("../utils/testIDs"),_jsxRuntime=require("react/jsx-runtime");function EventsEmptyState({isEnabled:e,searchText:t,totalChanges:s}){const a=(0,_sharedUi.resolveListEmptyState)({subject:"changes",search:t,total:s,capturing:e,waiting:{otto:"waiting",title:"No state changes",message:"State changes will appear here as stores update."},paused:{title:"No state changes",message:"Enable capture to start recording state changes"}});return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{...a,testID:`${_testIDs.ZUSTAND_TEST_ID}-empty`})}function ZustandModal({visible:e,onClose:t,onBack:s,onMinimize:a,enableSharedModalDimensions:n=!1,inline:r=!1,storesLoading:i=!1,initialTab:o="stores",initialSelectedChangeId:l,initialDetailView:d,onChangeSelect:c,onStoreExpand:u}){(0,_license.useIsPro)();const _=(0,_sharedUi.useLimit)("zustand.changes"),[h,g]=(0,_react.useState)(!1),[x,S]=(0,_react.useState)(o),[m,j]=(0,_react.useState)(null),[T,D]=(0,_react.useState)(null),[b,y]=(0,_react.useState)(!1),[I,C]=(0,_react.useState)(new Set),{stateChanges:U,filteredChanges:p,filter:R,setFilter:f,stats:N,stores:Z,clearChanges:v,isEnabled:E,toggleCapture:w}=(0,_useZustandStateChanges.useZustandStateChanges)(),k=(0,_react.useMemo)(()=>0===I.size?p:p.filter(e=>!Array.from(I).some(t=>e.storeName.toLowerCase().includes(t.toLowerCase()))),[p,I]),A=(0,_react.useMemo)(()=>0===I.size?Z:Z.filter(e=>!Array.from(I).some(t=>e.name.toLowerCase().includes(t.toLowerCase()))),[Z,I]),B=(0,_react.useMemo)(()=>m?U.filter(e=>e.storeName===m).length:0,[U,m]),M=(0,_react.useMemo)(()=>m?k.filter(e=>e.storeName===m):k,[k,m]),$=(0,_react.useMemo)(()=>M.slice(0,_),[M,_]),H=(0,_react.useMemo)(()=>Math.max(0,M.length-_),[M.length,_]),P=H>0,V=$,[z,L]=(0,_react.useState)(null),F=(0,_react.useMemo)(()=>{if(null===z)return null;const e=V.findIndex(e=>e.id===z);return e>=0?e:null},[z,V]),q=null!==F?V[F]:null,O=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{if(!c)return;const e=q?.id??null;null!==e&&e!==O.current&&(O.current=e,c(q))},[q,c]);const W=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{l&&W.current!==l&&V.some(e=>e.id===l)&&(W.current=l,L(l))},[l,V]);const[K,G]=(0,_react.useState)(""),[J,Q]=(0,_react.useState)(!1),X=((0,_react.useRef)(null),(0,_react.useRef)(null)),Y=(0,_react.useCallback)(e=>{},[]),ee=e=>{G(e),"events"===x&&f(t=>({...t,searchText:e}))},te=(0,_react.useCallback)(()=>{G(""),f(e=>({...e,searchText:""})),Q(!1)},[f]),se=(0,_react.useCallback)(e=>{L(e.id)},[]),ae=(0,_react.useCallback)(()=>{g(!0)},[]),ne=(0,_react.useCallback)(()=>{L(null)},[]),re=(0,_react.useCallback)(e=>{const t=V[e];t&&L(t.id)},[V]),ie=(0,_react.useCallback)(e=>{j(e),L(null)},[]),oe=(0,_react.useCallback)(()=>{j(null),L(null)},[]),le=(0,_react.useCallback)(e=>{D(e),u?.(e)},[u]),de=(0,_react.useCallback)(()=>{D(null)},[]),ce=(0,_react.useCallback)(()=>A.reduce((e,t)=>{try{const s=t.api.getState();if(s&&"object"==typeof s){const a={};for(const[e,t]of Object.entries(s))"function"!=typeof t&&(a[e]=(0,_sharedUi.truncatePayload)(t));e[t.name]=a}else e[t.name]=(0,_sharedUi.truncatePayload)(s)}catch{e[t.name]=null}return e},{}),[A]),ue=(0,_react.useCallback)(()=>k.map(e=>({id:e.id,storeName:e.storeName,timestamp:e.timestamp,prevState:(0,_sharedUi.truncatePayload)(e.prevState),nextState:(0,_sharedUi.truncatePayload)(e.nextState),hasStateChange:e.hasStateChange,changedKeys:e.changedKeys})),[k]),_e=(0,_react.useCallback)(()=>V.map(e=>({id:e.id,storeName:e.storeName,timestamp:e.timestamp,prevState:(0,_sharedUi.truncatePayload)(e.prevState),nextState:(0,_sharedUi.truncatePayload)(e.nextState),hasStateChange:e.hasStateChange,changedKeys:e.changedKeys})),[V]),he=(0,_react.useCallback)(e=>{C(t=>{const s=new Set(t);return s.has(e)?s.delete(e):s.add(e),s})},[]),ge=(0,_react.useCallback)(e=>{C(t=>new Set([...t,e]))},[]),xe=(0,_react.useCallback)(e=>{S(e),j(null),D(null),L(null),y(!1),K&&(G(""),f(e=>({...e,searchText:""}))),Q(!1)},[K,f]),Se=(0,_react.useCallback)(e=>e.id,[]),me=(0,_react.useMemo)(()=>(0,_testIDs.buildChangeRowTestIDs)(V),[V]),je=(0,_react.useCallback)(({item:e})=>(0,_jsxRuntime.jsx)(_ZustandStateChangeItem.ZustandStateChangeItem,{change:e,onPress:se,testID:me.get(e.id)}),[se,me]),Te=I.size>0,De=()=>b?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:()=>y(!1)}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"Filters",centered:!0,testID:`${_testIDs.ZUSTAND_TEST_ID}-filters-title`})]}):q?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:ne}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:`${q.storeName}/setState`,centered:!0,testID:`${_testIDs.ZUSTAND_TEST_ID}-detail-title`})]}):m?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:oe}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:`${m} History`,centered:!0,testID:`${_testIDs.ZUSTAND_TEST_ID}-history-title`}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{children:(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:_e,disabled:0===V.length,buttonStyle:styles.headerActionButton,testID:`${_testIDs.ZUSTAND_TEST_ID}-copy`})})]}):T?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:de}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:T,centered:!0,testID:`${_testIDs.ZUSTAND_TEST_ID}-store-detail-title`})]}):(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[s&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:s}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:J?(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Search,{value:K,onChangeText:ee,onCancel:te,placeholder:"stores"===x?"Search stores...":"Search events...",accessibilityLabel:"Search Zustand stores and events",iconSize:14,testID:`${_testIDs.ZUSTAND_TEST_ID}-search-field`,containerTestID:`${_testIDs.ZUSTAND_TEST_ID}-search`,clearTestID:`${_testIDs.ZUSTAND_TEST_ID}-search-clear`,onBlur:()=>{0===K.length&&Q(!1)}}):(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:[{key:"stores",label:"Stores"+(A.length>0?` (${A.length})`:"")},{key:"events",label:"Events"+(k.length>0?` (${k.length})`:"")}],activeTab:x,onTabChange:xe,testIDPrefix:`${_testIDs.ZUSTAND_TEST_ID}-tab`})}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>Q(!0),style:styles.headerActionButton,testID:`${_testIDs.ZUSTAND_TEST_ID}-search-open`,accessibilityRole:"button",accessibilityLabel:"Search",children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.night.color.textSecondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>y(!0),style:[styles.headerActionButton,Te&&styles.headerActionButtonActive],testID:`${_testIDs.ZUSTAND_TEST_ID}-filters-open`,accessibilityRole:"button",accessibilityLabel:"Filters",children:(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:14,color:Te?_sharedUi.night.color.accent:_sharedUi.night.color.textSecondary})}),"stores"===x&&(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:ce,disabled:0===A.length,buttonStyle:styles.headerActionButton,testID:`${_testIDs.ZUSTAND_TEST_ID}-copy`}),"events"===x&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:ue,disabled:0===k.length,buttonStyle:styles.headerActionButton,testID:`${_testIDs.ZUSTAND_TEST_ID}-copy`}),(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{isEnabled:E,onToggle:w,accessibilityLabel:"Toggle Zustand state capture",testID:`${_testIDs.ZUSTAND_TEST_ID}-power`}),(0,_jsxRuntime.jsx)(_sharedUi.ToolbarClearButton,{onPress:v,disabled:0===k.length,buttonStyle:styles.headerActionButton,testID:`${_testIDs.ZUSTAND_TEST_ID}-clear`})]})]})]}),be=n?_sharedUi.devToolsStorageKeys.modal.root():"buoy-zustand-modal";if(!e)return null;const ye=q&&null!==F?(0,_jsxRuntime.jsx)(_ZustandStateDetailContent.ZustandStateDetailFooter,{change:q,changes:V,selectedIndex:F,onIndexChange:re}):null,Ie=q&&V.length>1?68:0,Ce=!(b||q&&null!==F||null==m&&"events"!==x&&"stores"!==x),Ue=(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:(()=>{if(b)return(0,_jsxRuntime.jsx)(_ZustandEventFilterView.ZustandEventFilterView,{ignoredPatterns:I,onTogglePattern:he,onAddPattern:ge,stores:Z});if(q&&null!==F)return(0,_jsxRuntime.jsx)(_ZustandStateDetailContent.ZustandStateDetailContent,{change:q,changes:V,selectedIndex:F,onIndexChange:re,disableInternalFooter:!0,initialView:d});if(m)return V.length>0?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{testID:`${_testIDs.ZUSTAND_TEST_ID}-history-list`,data:V,renderItem:je,keyExtractor:Se,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,..._sharedUi.EVENT_LIST_PRESET}):(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.ZUSTAND_TEST_ID}-history-empty`,...(0,_sharedUi.resolveListEmptyState)({subject:"changes",search:K,total:K.trim()?B:0,capturing:E,waiting:{otto:"waiting",title:"No history yet",message:`State changes for ${m} will appear here.`},paused:{title:"No history yet",message:`Capture is off, so nothing is being recorded for ${m}.`}})});if(T){const e=Z.find(e=>e.name===T)??null;return e?(0,_jsxRuntime.jsx)(_ZustandStoreDetailContent.ZustandStoreDetailContent,{store:e,onViewHistory:ie}):(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.ZUSTAND_TEST_ID}-store-detail-gone`,otto:"ghost",title:"Store no longer registered",message:`${T} is not in the registry any more.`})}return"stores"===x?(0,_jsxRuntime.jsx)(_ZustandStoreBrowser.ZustandStoreBrowser,{stores:A,searchQuery:K,isLoading:i,onOpenStore:le}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!E&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,testID:`${_testIDs.ZUSTAND_TEST_ID}-banner-disabled`,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"State capture is disabled"})]}),P&&(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.lockedBanner,onPress:ae,activeOpacity:.8,testID:`${_testIDs.ZUSTAND_TEST_ID}-locked`,accessibilityRole:"button",children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedText,testID:`${_testIDs.ZUSTAND_TEST_ID}-locked-text`,children:[H," older"," ",1===H?"change":"changes"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.upgradeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.upgradeBadgeText,children:"UPGRADE"})})]}),$.length>0?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:X,testID:`${_testIDs.ZUSTAND_TEST_ID}-list`,data:$,renderItem:je,keyExtractor:Se,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,..._sharedUi.EVENT_LIST_PRESET}):(0,_jsxRuntime.jsx)(EventsEmptyState,{isEnabled:E,searchText:K,totalChanges:N.totalChanges})]})})()}),pe=(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:h,onClose:()=>g(!1),featureName:"Full State History"});return r?(0,_jsxRuntime.jsxs)(_sharedUi.TickProvider,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inlineRoot,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.inlineHeader,..._sharedUi.windowDragProps,children:De()}),Ue,ye]}),pe]}):(0,_jsxRuntime.jsxs)(_sharedUi.TickProvider,{children:[(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:a,persistenceKey:be,header:{showToggleButton:!0,customContent:De()},onModeChange:Y,enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,disableScrollWrapper:Ce,styles:{},footer:ye,footerHeight:Ie,children:Ue}),pe]})}function ZustandToolView(e={}){return(0,_jsxRuntime.jsx)(ZustandModal,{...e,inline:!0,visible:!0,onClose:()=>{}})}const styles=_reactNative.StyleSheet.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:_sharedUi.macOSColors.border.default,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.night.color.buttonSurface,borderWidth:1,borderColor:_sharedUi.night.color.border,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},headerActionButtonActive:{backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.night.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.warning+"20"},disabledText:{color:_sharedUi.night.color.warning,fontSize:11,flex:1},listContent:{paddingTop:8,paddingBottom:20},lockedBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.night.color.accentSoft,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.accentBorder},lockedText:{color:_sharedUi.night.color.accent,fontSize:11,fontWeight:"500",flex:1},upgradeBadge:{backgroundColor:_sharedUi.night.color.accent,paddingHorizontal:8,paddingVertical:3,borderRadius:4},upgradeBadgeText:{color:_sharedUi.night.color.onAccent,fontSize:9,fontWeight:"700",letterSpacing:.5}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZustandModal = ZustandModal;
+exports.ZustandToolView = ZustandToolView;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _license = require("@buoy-gg/license");
+var _useZustandStateChanges = require("../hooks/useZustandStateChanges");
+var _ZustandStateChangeItem = require("./ZustandStateChangeItem");
+var _ZustandStateDetailContent = require("./ZustandStateDetailContent");
+var _ZustandStoreBrowser = require("./ZustandStoreBrowser");
+var _ZustandStoreDetailContent = require("./ZustandStoreDetailContent");
+var _ZustandEventFilterView = require("./ZustandEventFilterView");
+var _testIDs = require("../utils/testIDs");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Main Zustand DevTools modal
+ *
+ * Two tabs mirroring the Storage DevTools pattern:
+ * - Stores tab: Browse all registered stores and their current state
+ * - Events tab: Live state change monitoring with diffs
+ */
+
+/**
+ * The change log's "nothing here". Everything but the nouns is the shared
+ * precedence — see `ToolEmptyState` in shared-ui for why it lives there.
+ */
+function EventsEmptyState({
+  isEnabled,
+  searchText,
+  totalChanges
+}) {
+  const content = (0, _sharedUi.resolveListEmptyState)({
+    subject: "changes",
+    search: searchText,
+    total: totalChanges,
+    capturing: isEnabled,
+    waiting: {
+      otto: "waiting",
+      title: "No state changes",
+      message: "State changes will appear here as stores update."
+    },
+    paused: {
+      title: "No state changes",
+      message: "Enable capture to start recording state changes"
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+    ...content,
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-empty`
+  });
+}
+function ZustandModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false,
+  inline = false,
+  storesLoading = false,
+  initialTab = "stores",
+  initialSelectedChangeId,
+  initialDetailView,
+  onChangeSelect,
+  onStoreExpand
+}) {
+  const isPro = (0, _license.useIsPro)();
+  const changeLimit = (0, _sharedUi.useLimit)("zustand.changes");
+  const [showProModal, setShowProModal] = (0, _react.useState)(false);
+  const [activeTab, setActiveTab] = (0, _react.useState)(initialTab);
+  const [selectedHistoryStore, setSelectedHistoryStore] = (0, _react.useState)(null);
+  /**
+   * Which store's DETAIL screen is open (live editor + details + tree —
+   * the React Query interaction). Null means the browser list.
+   */
+  const [selectedStoreName, setSelectedStoreName] = (0, _react.useState)(null);
+  const [showFilters, setShowFilters] = (0, _react.useState)(false);
+  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
+  const {
+    stateChanges,
+    filteredChanges,
+    filter,
+    setFilter,
+    stats,
+    stores,
+    clearChanges,
+    isEnabled,
+    toggleCapture
+  } = (0, _useZustandStateChanges.useZustandStateChanges)();
+
+  // Apply ignored patterns on top of hook's filteredChanges
+  const displayedChanges = (0, _react.useMemo)(() => {
+    if (ignoredPatterns.size === 0) return filteredChanges;
+    return filteredChanges.filter(c => !Array.from(ignoredPatterns).some(p => c.storeName.toLowerCase().includes(p.toLowerCase())));
+  }, [filteredChanges, ignoredPatterns]);
+
+  // Apply ignored patterns to stores list too
+  const displayedStores = (0, _react.useMemo)(() => {
+    if (ignoredPatterns.size === 0) return stores;
+    return stores.filter(s => !Array.from(ignoredPatterns).some(p => s.name.toLowerCase().includes(p.toLowerCase())));
+  }, [stores, ignoredPatterns]);
+
+  /**
+   * How many changes this store has captured, before the search — the
+   * denominator the scoped empty state needs so "clear the search" is only
+   * offered when clearing it would actually show something.
+   */
+  const scopedTotalForStore = (0, _react.useMemo)(() => {
+    if (!selectedHistoryStore) return 0;
+    return stateChanges.filter(c => c.storeName === selectedHistoryStore).length;
+  }, [stateChanges, selectedHistoryStore]);
+
+  // Scope to a store BEFORE the tier cap, not after.
+  //
+  // The other way round, the cap was applied to the whole log and a store's
+  // history was whatever survived it — so a store with one change, made a
+  // while ago, opened an EMPTY history from a card that said "Changes: 1" and
+  // offered a "view history" link. The cap is a limit on how much of a list
+  // you can see; which list you are looking at is decided first.
+  const scopedChanges = (0, _react.useMemo)(() => {
+    if (!selectedHistoryStore) return displayedChanges;
+    return displayedChanges.filter(c => c.storeName === selectedHistoryStore);
+  }, [displayedChanges, selectedHistoryStore]);
+
+  // Pro is Infinity here, so slice() returns everything and the locked count
+  // floors at 0 — no tier branching needed at the call site.
+  const visibleChanges = (0, _react.useMemo)(() => scopedChanges.slice(0, changeLimit), [scopedChanges, changeLimit]);
+  const lockedChangeCount = (0, _react.useMemo)(() => Math.max(0, scopedChanges.length - changeLimit), [scopedChanges.length, changeLimit]);
+  const hasLockedChanges = lockedChangeCount > 0;
+
+  /** The list the detail stepper walks: already scoped, already capped. */
+  const activeChanges = visibleChanges;
+
+  // Selection state — track by ID so new events don't shift position
+  const [selectedChangeId, setSelectedChangeId] = (0, _react.useState)(null);
+  const selectedChangeIndex = (0, _react.useMemo)(() => {
+    if (selectedChangeId === null) return null;
+    const idx = activeChanges.findIndex(c => c.id === selectedChangeId);
+    return idx >= 0 ? idx : null;
+  }, [selectedChangeId, activeChanges]);
+  const selectedChange = selectedChangeIndex !== null ? activeChanges[selectedChangeIndex] : null;
+
+  // Notify the host on selection (keyed by change id so re-renders with the
+  // same selection don't re-fire; remote mirrors fetch state trees here).
+  const lastNotifiedSelectionRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!onChangeSelect) return;
+    const id = selectedChange?.id ?? null;
+    if (id === null || id === lastNotifiedSelectionRef.current) return;
+    lastNotifiedSelectionRef.current = id;
+    onChangeSelect(selectedChange);
+  }, [selectedChange, onChangeSelect]);
+
+  // Deep link into a change's detail (see initialSelectedChangeId). Applied
+  // at most once per id, so the list re-rendering — or the user pressing Back
+  // — never re-opens it.
+  const appliedInitialSelectionRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!initialSelectedChangeId) return;
+    if (appliedInitialSelectionRef.current === initialSelectedChangeId) return;
+    const exists = activeChanges.some(c => c.id === initialSelectedChangeId);
+    if (!exists) return;
+    appliedInitialSelectionRef.current = initialSelectedChangeId;
+    setSelectedChangeId(initialSelectedChangeId);
+  }, [initialSelectedChangeId, activeChanges]);
+
+  // Search state — shared across tabs
+  const [searchText, setSearchText] = (0, _react.useState)("");
+  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  const searchInputRef = (0, _react.useRef)(null);
+  const flatListRef = (0, _react.useRef)(null);
+  const handleModeChange = (0, _react.useCallback)(_mode => {}, []);
+  const handleSearch = text => {
+    setSearchText(text);
+    if (activeTab === "events") {
+      setFilter(prev => ({
+        ...prev,
+        searchText: text
+      }));
+    }
+  };
+
+  /** Drop the query AND put the header back. The X, and only the X. */
+  const closeSearch = (0, _react.useCallback)(() => {
+    setSearchText("");
+    setFilter(prev => ({
+      ...prev,
+      searchText: ""
+    }));
+    setIsSearchActive(false);
+  }, [setFilter]);
+  const handleChangePress = (0, _react.useCallback)(change => {
+    setSelectedChangeId(change.id);
+  }, []);
+  const handleUpgradePress = (0, _react.useCallback)(() => {
+    setShowProModal(true);
+  }, []);
+  const handleBack = (0, _react.useCallback)(() => {
+    setSelectedChangeId(null);
+  }, []);
+  const handleIndexChange = (0, _react.useCallback)(newIndex => {
+    const change = activeChanges[newIndex];
+    if (change) {
+      setSelectedChangeId(change.id);
+    }
+  }, [activeChanges]);
+  const handleViewHistory = (0, _react.useCallback)(storeName => {
+    setSelectedHistoryStore(storeName);
+    setSelectedChangeId(null);
+  }, []);
+  const handleBackFromHistory = (0, _react.useCallback)(() => {
+    setSelectedHistoryStore(null);
+    setSelectedChangeId(null);
+  }, []);
+  const handleOpenStore = (0, _react.useCallback)(storeName => {
+    setSelectedStoreName(storeName);
+    // The desktop mirror hydrates a store's full state on demand — this is
+    // the moment it becomes needed (was fired on card-expand before the
+    // detail screen replaced expansion).
+    onStoreExpand?.(storeName);
+  }, [onStoreExpand]);
+  const handleBackFromStore = (0, _react.useCallback)(() => {
+    setSelectedStoreName(null);
+  }, []);
+  const getStoresSnapshot = (0, _react.useCallback)(() => {
+    return displayedStores.reduce((acc, store) => {
+      try {
+        const state = store.api.getState();
+        if (state && typeof state === "object") {
+          const filtered = {};
+          for (const [key, value] of Object.entries(state)) {
+            if (typeof value !== "function") filtered[key] = (0, _sharedUi.truncatePayload)(value);
+          }
+          acc[store.name] = filtered;
+        } else {
+          acc[store.name] = (0, _sharedUi.truncatePayload)(state);
+        }
+      } catch {
+        acc[store.name] = null;
+      }
+      return acc;
+    }, {});
+  }, [displayedStores]);
+  const getEventsSnapshot = (0, _react.useCallback)(() => {
+    return displayedChanges.map(change => ({
+      id: change.id,
+      storeName: change.storeName,
+      timestamp: change.timestamp,
+      prevState: (0, _sharedUi.truncatePayload)(change.prevState),
+      nextState: (0, _sharedUi.truncatePayload)(change.nextState),
+      hasStateChange: change.hasStateChange,
+      changedKeys: change.changedKeys
+    }));
+  }, [displayedChanges]);
+  const getHistorySnapshot = (0, _react.useCallback)(() => {
+    return activeChanges.map(change => ({
+      id: change.id,
+      storeName: change.storeName,
+      timestamp: change.timestamp,
+      prevState: (0, _sharedUi.truncatePayload)(change.prevState),
+      nextState: (0, _sharedUi.truncatePayload)(change.nextState),
+      hasStateChange: change.hasStateChange,
+      changedKeys: change.changedKeys
+    }));
+  }, [activeChanges]);
+  const handleTogglePattern = (0, _react.useCallback)(pattern => {
+    setIgnoredPatterns(prev => {
+      const next = new Set(prev);
+      if (next.has(pattern)) next.delete(pattern);else next.add(pattern);
+      return next;
+    });
+  }, []);
+  const handleAddPattern = (0, _react.useCallback)(pattern => {
+    setIgnoredPatterns(prev => new Set([...prev, pattern]));
+  }, []);
+  const handleTabChange = (0, _react.useCallback)(tab => {
+    setActiveTab(tab);
+    setSelectedHistoryStore(null);
+    setSelectedStoreName(null);
+    setSelectedChangeId(null);
+    setShowFilters(false);
+    if (searchText) {
+      setSearchText("");
+      setFilter(prev => ({
+        ...prev,
+        searchText: ""
+      }));
+    }
+    setIsSearchActive(false);
+  }, [searchText, setFilter]);
+  const keyExtractor = (0, _react.useCallback)(item => item.id, []);
+
+  // Built for the whole list rather than per row: the ordinal a row carries is
+  // a fact about the list around it. See ../utils/testIDs.ts for why a store
+  // name alone cannot address a change row.
+  const rowTestIDs = (0, _react.useMemo)(() => (0, _testIDs.buildChangeRowTestIDs)(activeChanges), [activeChanges]);
+  const renderItem = (0, _react.useCallback)(({
+    item
+  }) => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStateChangeItem.ZustandStateChangeItem, {
+      change: item,
+      onPress: handleChangePress,
+      testID: rowTestIDs.get(item.id)
+    });
+  }, [handleChangePress, rowTestIDs]);
+
+  // ---- Header rendering ----
+
+  const hasActiveFilters = ignoredPatterns.size > 0;
+  const renderHeaderContent = () => {
+    // Filter view header
+    if (showFilters) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: () => setShowFilters(false)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: "Filters",
+          centered: true,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-title`
+        })]
+      });
+    }
+
+    // Change detail header
+    if (selectedChange) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: `${selectedChange.storeName}/setState`,
+          centered: true,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-detail-title`
+        })]
+      });
+    }
+
+    // Store history header
+    if (selectedHistoryStore) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: handleBackFromHistory
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: `${selectedHistoryStore} History`,
+          centered: true,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-history-title`
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+            value: getHistorySnapshot,
+            disabled: activeChanges.length === 0,
+            buttonStyle: styles.headerActionButton,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-copy`
+          })
+        })]
+      });
+    }
+
+    // Store detail header — the live editor screen. AFTER history: history is
+    // reached FROM the detail screen and stacks over it, so when both are set
+    // history owns the header, and its back lands you back on the detail.
+    if (selectedStoreName) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: handleBackFromStore
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: selectedStoreName,
+          centered: true,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-store-detail-title`
+        })]
+      });
+    }
+
+    // Main view with tabs
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+      children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+        title: "",
+        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: closeSearch,
+          placeholder: activeTab === "stores" ? "Search stores..." : "Search events...",
+          accessibilityLabel: "Search Zustand stores and events",
+          iconSize: 14,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-search-field`,
+          containerTestID: `${_testIDs.ZUSTAND_TEST_ID}-search`,
+          clearTestID: `${_testIDs.ZUSTAND_TEST_ID}-search-clear`
+          // Stay open while the query is still narrowing the list: the
+          // header would otherwise go back to its TABS — whose counts are
+          // of the WHOLE capture — above a filtered list, with nothing to
+          // explain the gap.
+          ,
+          onBlur: () => {
+            if (searchText.length === 0) setIsSearchActive(false);
+          }
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
+          tabs: [{
+            key: "stores",
+            label: `Stores${displayedStores.length > 0 ? ` (${displayedStores.length})` : ""}`
+          }, {
+            key: "events",
+            label: `Events${displayedChanges.length > 0 ? ` (${displayedChanges.length})` : ""}`
+          }],
+          activeTab: activeTab,
+          onTabChange: handleTabChange,
+          testIDPrefix: `${_testIDs.ZUSTAND_TEST_ID}-tab`
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => setIsSearchActive(true),
+          style: styles.headerActionButton,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-search-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Search",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+            size: 14,
+            color: _sharedUi.night.color.textSecondary
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => setShowFilters(true),
+          style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-filters-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Filters",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
+            size: 14,
+            color: hasActiveFilters ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
+          })
+        }), activeTab === "stores" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+          value: getStoresSnapshot,
+          disabled: displayedStores.length === 0,
+          buttonStyle: styles.headerActionButton,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-copy`
+        }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+            value: getEventsSnapshot,
+            disabled: displayedChanges.length === 0,
+            buttonStyle: styles.headerActionButton,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-copy`
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+            isEnabled: isEnabled,
+            onToggle: toggleCapture,
+            accessibilityLabel: "Toggle Zustand state capture",
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-power`
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarClearButton, {
+            onPress: clearChanges,
+            disabled: displayedChanges.length === 0,
+            buttonStyle: styles.headerActionButton,
+            testID: `${_testIDs.ZUSTAND_TEST_ID}-clear`
+          })]
+        })]
+      })]
+    });
+  };
+
+  // ---- Content rendering ----
+
+  const renderContent = () => {
+    // Filter view (applies to both tabs)
+    if (showFilters) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandEventFilterView.ZustandEventFilterView, {
+        ignoredPatterns: ignoredPatterns,
+        onTogglePattern: handleTogglePattern,
+        onAddPattern: handleAddPattern,
+        stores: stores
+      });
+    }
+
+    // Change detail view (works for both events tab and store history)
+    if (selectedChange && selectedChangeIndex !== null) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStateDetailContent.ZustandStateDetailContent, {
+        change: selectedChange,
+        changes: activeChanges,
+        selectedIndex: selectedChangeIndex,
+        onIndexChange: handleIndexChange,
+        disableInternalFooter: true,
+        initialView: initialDetailView
+      });
+    }
+
+    // Store history view — filtered to one store
+    if (selectedHistoryStore) {
+      return activeChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-history-list`,
+        data: activeChanges,
+        renderItem: renderItem,
+        keyExtractor: keyExtractor,
+        contentContainerStyle: styles.listContent,
+        showsVerticalScrollIndicator: true,
+        ..._sharedUi.EVENT_LIST_PRESET
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-history-empty`,
+        ...(0, _sharedUi.resolveListEmptyState)({
+          subject: "changes",
+          search: searchText,
+          // Scoped to one store, so the count is this store's, not the log's.
+          total: searchText.trim() ? scopedTotalForStore : 0,
+          capturing: isEnabled,
+          waiting: {
+            otto: "waiting",
+            title: "No history yet",
+            message: `State changes for ${selectedHistoryStore} will appear here.`
+          },
+          paused: {
+            title: "No history yet",
+            message: `Capture is off, so nothing is being recorded for ${selectedHistoryStore}.`
+          }
+        })
+      });
+    }
+
+    // Store detail — live editor + details + read-only tree. After history
+    // in this chain for the same reason as the header: history stacks OVER
+    // the detail screen it was opened from.
+    if (selectedStoreName) {
+      const selectedStore = stores.find(s => s.name === selectedStoreName) ?? null;
+      return selectedStore ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStoreDetailContent.ZustandStoreDetailContent, {
+        store: selectedStore,
+        onViewHistory: handleViewHistory
+      }) :
+      /*#__PURE__*/
+      // The store fell out of the registry mid-look (a remote mirror
+      // rebuilding, a dev reload). Say so rather than rendering nothing.
+      (0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-store-detail-gone`
+        // ghost = "stale or detached: an unmounted component, an old
+        // snapshot" — exactly what the store you are looking at has become.
+        // No other tool has this cause, so it skips the resolver.
+        ,
+        otto: "ghost",
+        title: "Store no longer registered",
+        message: `${selectedStoreName} is not in the registry any more.`
+      });
+    }
+
+    // Stores browse tab
+    if (activeTab === "stores") {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStoreBrowser.ZustandStoreBrowser, {
+        stores: displayedStores,
+        searchQuery: searchText,
+        isLoading: storesLoading,
+        onOpenStore: handleOpenStore
+      });
+    }
+
+    // Events tab
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [!isEnabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.disabledBanner,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-banner-disabled`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
+          size: 14,
+          color: _sharedUi.night.color.warning
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.disabledText,
+          children: "State capture is disabled"
+        })]
+      }), hasLockedChanges && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: styles.lockedBanner,
+        onPress: handleUpgradePress,
+        activeOpacity: 0.8,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-locked`,
+        accessibilityRole: "button",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
+          size: 14,
+          color: _sharedUi.night.color.accent
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.lockedText,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-locked-text`,
+          children: [lockedChangeCount, " older", " ", lockedChangeCount === 1 ? "change" : "changes", " locked"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.upgradeBadge,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.upgradeBadgeText,
+            children: "UPGRADE"
+          })
+        })]
+      }), visibleChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        ref: flatListRef,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-list`,
+        data: visibleChanges,
+        renderItem: renderItem,
+        keyExtractor: keyExtractor,
+        contentContainerStyle: styles.listContent,
+        showsVerticalScrollIndicator: true,
+        ..._sharedUi.EVENT_LIST_PRESET
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EventsEmptyState, {
+        isEnabled: isEnabled,
+        searchText: searchText,
+        totalChanges: stats.totalChanges
+      })]
+    });
+  };
+  const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : "buoy-zustand-modal";
+  if (!visible) return null;
+  const footerNode = selectedChange && selectedChangeIndex !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStateDetailContent.ZustandStateDetailFooter, {
+    change: selectedChange,
+    changes: activeChanges,
+    selectedIndex: selectedChangeIndex,
+    onIndexChange: handleIndexChange
+  }) : null;
+  const footerHeight = selectedChange && activeChanges.length > 1 ? 68 : 0;
+
+  // The change lists own their scrolling so FlatList virtualization works
+  // (inside JsModal's ScrollView wrapper every row mounts — the Network
+  // tool measured 17 JS FPS / 133% CPU at max load from this exact
+  // pattern; see tool-bench batches 2026-07-06).
+  //
+  // The STORES tab owns its scrolling too, for a different reason: the
+  // browser hosts the store editor as an absolute-fill overlay over a
+  // flex:1 root, and inside JsModal's ScrollView wrapper that root
+  // collapses to zero height — the list still paints (iOS overflow), but
+  // the editor opens into a 0pt box and never appears. The nested-flex:1-
+  // in-JsModal trap; storage's browser disables the wrapper for the same
+  // reason.
+  const listOwnsScroll = !showFilters && !(selectedChange && selectedChangeIndex !== null) && (selectedHistoryStore != null || activeTab === "events" || activeTab === "stores");
+  const body = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: renderContent()
+  });
+  const upgradeModal = /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
+    visible: showProModal,
+    onClose: () => setShowProModal(false),
+    featureName: "Full State History"
+  });
+
+  // The ONLY difference between the phone and the desktop dashboard is which
+  // shell the header, body and footer go in. Everything above this is shared.
+  if (inline) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.inlineRoot,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.inlineHeader,
+          ..._sharedUi.windowDragProps,
+          children: renderHeaderContent()
+        }), body, footerNode]
+      }), upgradeModal]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
+      visible: visible,
+      onClose: onClose,
+      onMinimize: onMinimize,
+      persistenceKey: persistenceKey,
+      header: {
+        showToggleButton: true,
+        customContent: renderHeaderContent()
+      },
+      onModeChange: handleModeChange,
+      enablePersistence: true,
+      initialMode: "bottomSheet",
+      enableGlitchEffects: true,
+      disableScrollWrapper: listOwnsScroll,
+      styles: {},
+      footer: footerNode,
+      footerHeight: footerHeight,
+      children: body
+    }), upgradeModal]
+  });
+}
+
+/**
+ * The same Zustand tool as `ZustandModal`, rendered INLINE for hosts that
+ * place tools in a panel rather than a modal. Exists so there is exactly one
+ * implementation — the desktop dashboard used to ship its own copy of this
+ * component's header, list and detail router.
+ */
+function ZustandToolView(props = {}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ZustandModal, {
+    ...props,
+    inline: true,
+    visible: true,
+    onClose: () => {}
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  inlineRoot: {
+    flex: 1,
+    minHeight: 0,
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
+  },
+  inlineHeader: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.border.default,
+    // Clear, like Bench — the host's hoisted sky shows through the header.
+    backgroundColor: "transparent"
+  },
+  container: {
+    flex: 1,
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
+  },
+  headerActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55
+  },
+  headerActionButtonActive: {
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
+  },
+  disabledBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.night.color.warningSoft,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.warning + "20"
+  },
+  disabledText: {
+    color: _sharedUi.night.color.warning,
+    fontSize: 11,
+    flex: 1
+  },
+  listContent: {
+    paddingTop: 8,
+    paddingBottom: 20
+  },
+  lockedBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.accentBorder
+  },
+  lockedText: {
+    color: _sharedUi.night.color.accent,
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1
+  },
+  upgradeBadge: {
+    backgroundColor: _sharedUi.night.color.accent,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  upgradeBadgeText: {
+    // Ink on a filled accent surface — the night accent takes dark ink.
+    color: _sharedUi.night.color.onAccent,
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  }
+});