@buoy-gg/zustand 7.0.35 → 7.0.38

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

@@ -1,767 +1 @@
-"use strict";
-
-/**
- * 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
- */
-
-import { useState, useMemo, useRef, useCallback, useEffect } from "react";
-import { View, Text, StyleSheet, FlatList, TouchableOpacity } from "react-native";
-import { JsModal, ModalHeader, TabSelector, macOSColors, night, ToolEmptyState, resolveListEmptyState, Search, Filter, Power, Lock, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, windowDragProps, EVENT_LIST_PRESET } from "@buoy-gg/shared-ui";
-import { useIsPro } from "@buoy-gg/license";
-import { useZustandStateChanges } from "../hooks/useZustandStateChanges";
-import { ZustandStateChangeItem } from "./ZustandStateChangeItem";
-import { ZustandStateDetailContent, ZustandStateDetailFooter } from "./ZustandStateDetailContent";
-import { ZustandStoreBrowser } from "./ZustandStoreBrowser";
-import { ZustandStoreDetailContent } from "./ZustandStoreDetailContent";
-import { ZustandEventFilterView } from "./ZustandEventFilterView";
-import { ZUSTAND_TEST_ID, buildChangeRowTestIDs } from "../utils/testIDs";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * 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 = 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__*/_jsx(ToolEmptyState, {
-    ...content,
-    testID: `${ZUSTAND_TEST_ID}-empty`
-  });
-}
-export function ZustandModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  inline = false,
-  storesLoading = false,
-  initialTab = "stores",
-  initialSelectedChangeId,
-  initialDetailView,
-  onChangeSelect,
-  onStoreExpand
-}) {
-  const isPro = useIsPro();
-  const changeLimit = useLimit("zustand.changes");
-  const [showProModal, setShowProModal] = useState(false);
-  const [activeTab, setActiveTab] = useState(initialTab);
-  const [selectedHistoryStore, setSelectedHistoryStore] = 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] = useState(null);
-  const [showFilters, setShowFilters] = useState(false);
-  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
-  const {
-    stateChanges,
-    filteredChanges,
-    filter,
-    setFilter,
-    stats,
-    stores,
-    clearChanges,
-    isEnabled,
-    toggleCapture
-  } = useZustandStateChanges();
-
-  // Apply ignored patterns on top of hook's filteredChanges
-  const displayedChanges = 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 = 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 = 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 = 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 = useMemo(() => scopedChanges.slice(0, changeLimit), [scopedChanges, changeLimit]);
-  const lockedChangeCount = 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] = useState(null);
-  const selectedChangeIndex = 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 = useRef(null);
-  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 = useRef(null);
-  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] = useState("");
-  const [isSearchActive, setIsSearchActive] = useState(false);
-  const searchInputRef = useRef(null);
-  const flatListRef = useRef(null);
-  const handleModeChange = 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 = useCallback(() => {
-    setSearchText("");
-    setFilter(prev => ({
-      ...prev,
-      searchText: ""
-    }));
-    setIsSearchActive(false);
-  }, [setFilter]);
-  const handleChangePress = useCallback(change => {
-    setSelectedChangeId(change.id);
-  }, []);
-  const handleUpgradePress = useCallback(() => {
-    setShowProModal(true);
-  }, []);
-  const handleBack = useCallback(() => {
-    setSelectedChangeId(null);
-  }, []);
-  const handleIndexChange = useCallback(newIndex => {
-    const change = activeChanges[newIndex];
-    if (change) {
-      setSelectedChangeId(change.id);
-    }
-  }, [activeChanges]);
-  const handleViewHistory = useCallback(storeName => {
-    setSelectedHistoryStore(storeName);
-    setSelectedChangeId(null);
-  }, []);
-  const handleBackFromHistory = useCallback(() => {
-    setSelectedHistoryStore(null);
-    setSelectedChangeId(null);
-  }, []);
-  const handleOpenStore = 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 = useCallback(() => {
-    setSelectedStoreName(null);
-  }, []);
-  const getStoresSnapshot = 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] = truncatePayload(value);
-          }
-          acc[store.name] = filtered;
-        } else {
-          acc[store.name] = truncatePayload(state);
-        }
-      } catch {
-        acc[store.name] = null;
-      }
-      return acc;
-    }, {});
-  }, [displayedStores]);
-  const getEventsSnapshot = useCallback(() => {
-    return displayedChanges.map(change => ({
-      id: change.id,
-      storeName: change.storeName,
-      timestamp: change.timestamp,
-      prevState: truncatePayload(change.prevState),
-      nextState: truncatePayload(change.nextState),
-      hasStateChange: change.hasStateChange,
-      changedKeys: change.changedKeys
-    }));
-  }, [displayedChanges]);
-  const getHistorySnapshot = useCallback(() => {
-    return activeChanges.map(change => ({
-      id: change.id,
-      storeName: change.storeName,
-      timestamp: change.timestamp,
-      prevState: truncatePayload(change.prevState),
-      nextState: truncatePayload(change.nextState),
-      hasStateChange: change.hasStateChange,
-      changedKeys: change.changedKeys
-    }));
-  }, [activeChanges]);
-  const handleTogglePattern = useCallback(pattern => {
-    setIgnoredPatterns(prev => {
-      const next = new Set(prev);
-      if (next.has(pattern)) next.delete(pattern);else next.add(pattern);
-      return next;
-    });
-  }, []);
-  const handleAddPattern = useCallback(pattern => {
-    setIgnoredPatterns(prev => new Set([...prev, pattern]));
-  }, []);
-  const handleTabChange = 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 = 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 = useMemo(() => buildChangeRowTestIDs(activeChanges), [activeChanges]);
-  const renderItem = useCallback(({
-    item
-  }) => {
-    return /*#__PURE__*/_jsx(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__*/_jsxs(ModalHeader, {
-        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-          onBack: () => setShowFilters(false)
-        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-          title: "Filters",
-          centered: true,
-          testID: `${ZUSTAND_TEST_ID}-filters-title`
-        })]
-      });
-    }
-
-    // Change detail header
-    if (selectedChange) {
-      return /*#__PURE__*/_jsxs(ModalHeader, {
-        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-          onBack: handleBack
-        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-          title: `${selectedChange.storeName}/setState`,
-          centered: true,
-          testID: `${ZUSTAND_TEST_ID}-detail-title`
-        })]
-      });
-    }
-
-    // Store history header
-    if (selectedHistoryStore) {
-      return /*#__PURE__*/_jsxs(ModalHeader, {
-        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-          onBack: handleBackFromHistory
-        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-          title: `${selectedHistoryStore} History`,
-          centered: true,
-          testID: `${ZUSTAND_TEST_ID}-history-title`
-        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
-          children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
-            value: getHistorySnapshot,
-            disabled: activeChanges.length === 0,
-            buttonStyle: styles.headerActionButton,
-            testID: `${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__*/_jsxs(ModalHeader, {
-        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-          onBack: handleBackFromStore
-        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-          title: selectedStoreName,
-          centered: true,
-          testID: `${ZUSTAND_TEST_ID}-store-detail-title`
-        })]
-      });
-    }
-
-    // Main view with tabs
-    return /*#__PURE__*/_jsxs(ModalHeader, {
-      children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-        onBack: onBack
-      }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-        title: "",
-        children: isSearchActive ? /*#__PURE__*/_jsx(ModalHeader.Search, {
-          value: searchText,
-          onChangeText: handleSearch,
-          onCancel: closeSearch,
-          placeholder: activeTab === "stores" ? "Search stores..." : "Search events...",
-          accessibilityLabel: "Search Zustand stores and events",
-          iconSize: 14,
-          testID: `${ZUSTAND_TEST_ID}-search-field`,
-          containerTestID: `${ZUSTAND_TEST_ID}-search`,
-          clearTestID: `${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__*/_jsx(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: `${ZUSTAND_TEST_ID}-tab`
-        })
-      }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => setIsSearchActive(true),
-          style: styles.headerActionButton,
-          testID: `${ZUSTAND_TEST_ID}-search-open`,
-          accessibilityRole: "button",
-          accessibilityLabel: "Search",
-          children: /*#__PURE__*/_jsx(Search, {
-            size: 14,
-            color: night.color.textSecondary
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => setShowFilters(true),
-          style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
-          testID: `${ZUSTAND_TEST_ID}-filters-open`,
-          accessibilityRole: "button",
-          accessibilityLabel: "Filters",
-          children: /*#__PURE__*/_jsx(Filter, {
-            size: 14,
-            color: hasActiveFilters ? night.color.accent : night.color.textSecondary
-          })
-        }), activeTab === "stores" && /*#__PURE__*/_jsx(ToolbarCopyButton, {
-          value: getStoresSnapshot,
-          disabled: displayedStores.length === 0,
-          buttonStyle: styles.headerActionButton,
-          testID: `${ZUSTAND_TEST_ID}-copy`
-        }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
-            value: getEventsSnapshot,
-            disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton,
-            testID: `${ZUSTAND_TEST_ID}-copy`
-          }), /*#__PURE__*/_jsx(PowerToggleButton, {
-            isEnabled: isEnabled,
-            onToggle: toggleCapture,
-            accessibilityLabel: "Toggle Zustand state capture",
-            testID: `${ZUSTAND_TEST_ID}-power`
-          }), /*#__PURE__*/_jsx(ToolbarClearButton, {
-            onPress: clearChanges,
-            disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton,
-            testID: `${ZUSTAND_TEST_ID}-clear`
-          })]
-        })]
-      })]
-    });
-  };
-
-  // ---- Content rendering ----
-
-  const renderContent = () => {
-    // Filter view (applies to both tabs)
-    if (showFilters) {
-      return /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(FlatList, {
-        testID: `${ZUSTAND_TEST_ID}-history-list`,
-        data: activeChanges,
-        renderItem: renderItem,
-        keyExtractor: keyExtractor,
-        contentContainerStyle: styles.listContent,
-        showsVerticalScrollIndicator: true,
-        ...EVENT_LIST_PRESET
-      }) : /*#__PURE__*/_jsx(ToolEmptyState, {
-        testID: `${ZUSTAND_TEST_ID}-history-empty`,
-        ...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__*/_jsx(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.
-      _jsx(ToolEmptyState, {
-        testID: `${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__*/_jsx(ZustandStoreBrowser, {
-        stores: displayedStores,
-        searchQuery: searchText,
-        isLoading: storesLoading,
-        onOpenStore: handleOpenStore
-      });
-    }
-
-    // Events tab
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [!isEnabled && /*#__PURE__*/_jsxs(View, {
-        style: styles.disabledBanner,
-        testID: `${ZUSTAND_TEST_ID}-banner-disabled`,
-        children: [/*#__PURE__*/_jsx(Power, {
-          size: 14,
-          color: night.color.warning
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.disabledText,
-          children: "State capture is disabled"
-        })]
-      }), hasLockedChanges && /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.lockedBanner,
-        onPress: handleUpgradePress,
-        activeOpacity: 0.8,
-        testID: `${ZUSTAND_TEST_ID}-locked`,
-        accessibilityRole: "button",
-        children: [/*#__PURE__*/_jsx(Lock, {
-          size: 14,
-          color: night.color.accent
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.lockedText,
-          testID: `${ZUSTAND_TEST_ID}-locked-text`,
-          children: [lockedChangeCount, " older", " ", lockedChangeCount === 1 ? "change" : "changes", " locked"]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.upgradeBadge,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.upgradeBadgeText,
-            children: "UPGRADE"
-          })
-        })]
-      }), visibleChanges.length > 0 ? /*#__PURE__*/_jsx(FlatList, {
-        ref: flatListRef,
-        testID: `${ZUSTAND_TEST_ID}-list`,
-        data: visibleChanges,
-        renderItem: renderItem,
-        keyExtractor: keyExtractor,
-        contentContainerStyle: styles.listContent,
-        showsVerticalScrollIndicator: true,
-        ...EVENT_LIST_PRESET
-      }) : /*#__PURE__*/_jsx(EventsEmptyState, {
-        isEnabled: isEnabled,
-        searchText: searchText,
-        totalChanges: stats.totalChanges
-      })]
-    });
-  };
-  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : "buoy-zustand-modal";
-  if (!visible) return null;
-  const footerNode = selectedChange && selectedChangeIndex !== null ? /*#__PURE__*/_jsx(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__*/_jsx(View, {
-    style: styles.container,
-    children: renderContent()
-  });
-  const upgradeModal = /*#__PURE__*/_jsx(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__*/_jsxs(TickProvider, {
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.inlineRoot,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.inlineHeader,
-          ...windowDragProps,
-          children: renderHeaderContent()
-        }), body, footerNode]
-      }), upgradeModal]
-    });
-  }
-  return /*#__PURE__*/_jsxs(TickProvider, {
-    children: [/*#__PURE__*/_jsx(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.
- */
-export function ZustandToolView(props = {}) {
-  return /*#__PURE__*/_jsx(ZustandModal, {
-    ...props,
-    inline: true,
-    visible: true,
-    onClose: () => {}
-  });
-}
-const styles = 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: 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: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerActionButtonDisabled: {
-    opacity: 0.55
-  },
-  headerActionButtonActive: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  disabledBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: 10,
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: night.color.warningSoft,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.warning + "20"
-  },
-  disabledText: {
-    color: 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: night.color.accentSoft,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.accentBorder
-  },
-  lockedText: {
-    color: night.color.accent,
-    fontSize: 11,
-    fontWeight: "500",
-    flex: 1
-  },
-  upgradeBadge: {
-    backgroundColor: night.color.accent,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  upgradeBadgeText: {
-    // Ink on a filled accent surface — the night accent takes dark ink.
-    color: night.color.onAccent,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  }
-});
+"use strict";import{useState,useMemo,useRef,useCallback,useEffect}from"react";import{View,Text,StyleSheet,FlatList,TouchableOpacity}from"react-native";import{JsModal,ModalHeader,TabSelector,macOSColors,night,ToolEmptyState,resolveListEmptyState,Search,Filter,Power,Lock,devToolsStorageKeys,ProUpgradeModal,PowerToggleButton,ToolbarCopyButton,ToolbarClearButton,truncatePayload,TickProvider,useLimit,windowDragProps,EVENT_LIST_PRESET}from"@buoy-gg/shared-ui";import{useIsPro}from"@buoy-gg/license";import{useZustandStateChanges}from"../hooks/useZustandStateChanges";import{ZustandStateChangeItem}from"./ZustandStateChangeItem";import{ZustandStateDetailContent,ZustandStateDetailFooter}from"./ZustandStateDetailContent";import{ZustandStoreBrowser}from"./ZustandStoreBrowser";import{ZustandStoreDetailContent}from"./ZustandStoreDetailContent";import{ZustandEventFilterView}from"./ZustandEventFilterView";import{ZUSTAND_TEST_ID,buildChangeRowTestIDs}from"../utils/testIDs";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";function EventsEmptyState({isEnabled:e,searchText:t,totalChanges:a}){const o=resolveListEmptyState({subject:"changes",search:t,total:a,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 _jsx(ToolEmptyState,{...o,testID:`${ZUSTAND_TEST_ID}-empty`})}export function ZustandModal({visible:e,onClose:t,onBack:a,onMinimize:o,enableSharedModalDimensions:s=!1,inline:n=!1,storesLoading:r=!1,initialTab:l="stores",initialSelectedChangeId:i,initialDetailView:c,onChangeSelect:d,onStoreExpand:u}){useIsPro();const g=useLimit("zustand.changes"),[h,S]=useState(!1),[T,b]=useState(l),[m,y]=useState(null),[_,p]=useState(null),[x,C]=useState(!1),[D,f]=useState(new Set),{stateChanges:I,filteredChanges:E,filter:j,setFilter:w,stats:k,stores:Z,clearChanges:N,isEnabled:A,toggleCapture:B}=useZustandStateChanges(),v=useMemo(()=>0===D.size?E:E.filter(e=>!Array.from(D).some(t=>e.storeName.toLowerCase().includes(t.toLowerCase()))),[E,D]),M=useMemo(()=>0===D.size?Z:Z.filter(e=>!Array.from(D).some(t=>e.name.toLowerCase().includes(t.toLowerCase()))),[Z,D]),P=useMemo(()=>m?I.filter(e=>e.storeName===m).length:0,[I,m]),$=useMemo(()=>m?v.filter(e=>e.storeName===m):v,[v,m]),U=useMemo(()=>$.slice(0,g),[$,g]),H=useMemo(()=>Math.max(0,$.length-g),[$.length,g]),L=H>0,R=U,[V,z]=useState(null),F=useMemo(()=>{if(null===V)return null;const e=R.findIndex(e=>e.id===V);return e>=0?e:null},[V,R]),O=null!==F?R[F]:null,K=useRef(null);useEffect(()=>{if(!d)return;const e=O?.id??null;null!==e&&e!==K.current&&(K.current=e,d(O))},[O,d]);const W=useRef(null);useEffect(()=>{i&&W.current!==i&&R.some(e=>e.id===i)&&(W.current=i,z(i))},[i,R]);const[G,J]=useState(""),[Q,q]=useState(!1),X=(useRef(null),useRef(null)),Y=useCallback(e=>{},[]),ee=e=>{J(e),"events"===T&&w(t=>({...t,searchText:e}))},te=useCallback(()=>{J(""),w(e=>({...e,searchText:""})),q(!1)},[w]),ae=useCallback(e=>{z(e.id)},[]),oe=useCallback(()=>{S(!0)},[]),se=useCallback(()=>{z(null)},[]),ne=useCallback(e=>{const t=R[e];t&&z(t.id)},[R]),re=useCallback(e=>{y(e),z(null)},[]),le=useCallback(()=>{y(null),z(null)},[]),ie=useCallback(e=>{p(e),u?.(e)},[u]),ce=useCallback(()=>{p(null)},[]),de=useCallback(()=>M.reduce((e,t)=>{try{const a=t.api.getState();if(a&&"object"==typeof a){const o={};for(const[e,t]of Object.entries(a))"function"!=typeof t&&(o[e]=truncatePayload(t));e[t.name]=o}else e[t.name]=truncatePayload(a)}catch{e[t.name]=null}return e},{}),[M]),ue=useCallback(()=>v.map(e=>({id:e.id,storeName:e.storeName,timestamp:e.timestamp,prevState:truncatePayload(e.prevState),nextState:truncatePayload(e.nextState),hasStateChange:e.hasStateChange,changedKeys:e.changedKeys})),[v]),ge=useCallback(()=>R.map(e=>({id:e.id,storeName:e.storeName,timestamp:e.timestamp,prevState:truncatePayload(e.prevState),nextState:truncatePayload(e.nextState),hasStateChange:e.hasStateChange,changedKeys:e.changedKeys})),[R]),he=useCallback(e=>{f(t=>{const a=new Set(t);return a.has(e)?a.delete(e):a.add(e),a})},[]),Se=useCallback(e=>{f(t=>new Set([...t,e]))},[]),Te=useCallback(e=>{b(e),y(null),p(null),z(null),C(!1),G&&(J(""),w(e=>({...e,searchText:""}))),q(!1)},[G,w]),be=useCallback(e=>e.id,[]),me=useMemo(()=>buildChangeRowTestIDs(R),[R]),ye=useCallback(({item:e})=>_jsx(ZustandStateChangeItem,{change:e,onPress:ae,testID:me.get(e.id)}),[ae,me]),_e=D.size>0,pe=()=>_jsxs(ModalHeader,x?{children:[_jsx(ModalHeader.Navigation,{onBack:()=>C(!1)}),_jsx(ModalHeader.Content,{title:"Filters",centered:!0,testID:`${ZUSTAND_TEST_ID}-filters-title`})]}:O?{children:[_jsx(ModalHeader.Navigation,{onBack:se}),_jsx(ModalHeader.Content,{title:`${O.storeName}/setState`,centered:!0,testID:`${ZUSTAND_TEST_ID}-detail-title`})]}:m?{children:[_jsx(ModalHeader.Navigation,{onBack:le}),_jsx(ModalHeader.Content,{title:`${m} History`,centered:!0,testID:`${ZUSTAND_TEST_ID}-history-title`}),_jsx(ModalHeader.Actions,{children:_jsx(ToolbarCopyButton,{value:ge,disabled:0===R.length,buttonStyle:styles.headerActionButton,testID:`${ZUSTAND_TEST_ID}-copy`})})]}:_?{children:[_jsx(ModalHeader.Navigation,{onBack:ce}),_jsx(ModalHeader.Content,{title:_,centered:!0,testID:`${ZUSTAND_TEST_ID}-store-detail-title`})]}:{children:[a&&_jsx(ModalHeader.Navigation,{onBack:a}),_jsx(ModalHeader.Content,{title:"",children:Q?_jsx(ModalHeader.Search,{value:G,onChangeText:ee,onCancel:te,placeholder:"stores"===T?"Search stores...":"Search events...",accessibilityLabel:"Search Zustand stores and events",iconSize:14,testID:`${ZUSTAND_TEST_ID}-search-field`,containerTestID:`${ZUSTAND_TEST_ID}-search`,clearTestID:`${ZUSTAND_TEST_ID}-search-clear`,onBlur:()=>{0===G.length&&q(!1)}}):_jsx(TabSelector,{tabs:[{key:"stores",label:"Stores"+(M.length>0?` (${M.length})`:"")},{key:"events",label:"Events"+(v.length>0?` (${v.length})`:"")}],activeTab:T,onTabChange:Te,testIDPrefix:`${ZUSTAND_TEST_ID}-tab`})}),_jsxs(ModalHeader.Actions,{children:[_jsx(TouchableOpacity,{onPress:()=>q(!0),style:styles.headerActionButton,testID:`${ZUSTAND_TEST_ID}-search-open`,accessibilityRole:"button",accessibilityLabel:"Search",children:_jsx(Search,{size:14,color:night.color.textSecondary})}),_jsx(TouchableOpacity,{onPress:()=>C(!0),style:[styles.headerActionButton,_e&&styles.headerActionButtonActive],testID:`${ZUSTAND_TEST_ID}-filters-open`,accessibilityRole:"button",accessibilityLabel:"Filters",children:_jsx(Filter,{size:14,color:_e?night.color.accent:night.color.textSecondary})}),"stores"===T&&_jsx(ToolbarCopyButton,{value:de,disabled:0===M.length,buttonStyle:styles.headerActionButton,testID:`${ZUSTAND_TEST_ID}-copy`}),"events"===T&&_jsxs(_Fragment,{children:[_jsx(ToolbarCopyButton,{value:ue,disabled:0===v.length,buttonStyle:styles.headerActionButton,testID:`${ZUSTAND_TEST_ID}-copy`}),_jsx(PowerToggleButton,{isEnabled:A,onToggle:B,accessibilityLabel:"Toggle Zustand state capture",testID:`${ZUSTAND_TEST_ID}-power`}),_jsx(ToolbarClearButton,{onPress:N,disabled:0===v.length,buttonStyle:styles.headerActionButton,testID:`${ZUSTAND_TEST_ID}-clear`})]})]})]}),xe=s?devToolsStorageKeys.modal.root():"buoy-zustand-modal";if(!e)return null;const Ce=O&&null!==F?_jsx(ZustandStateDetailFooter,{change:O,changes:R,selectedIndex:F,onIndexChange:ne}):null,De=O&&R.length>1?68:0,fe=!(x||O&&null!==F||null==m&&"events"!==T&&"stores"!==T),Ie=_jsx(View,{style:styles.container,children:(()=>{if(x)return _jsx(ZustandEventFilterView,{ignoredPatterns:D,onTogglePattern:he,onAddPattern:Se,stores:Z});if(O&&null!==F)return _jsx(ZustandStateDetailContent,{change:O,changes:R,selectedIndex:F,onIndexChange:ne,disableInternalFooter:!0,initialView:c});if(m)return R.length>0?_jsx(FlatList,{testID:`${ZUSTAND_TEST_ID}-history-list`,data:R,renderItem:ye,keyExtractor:be,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,...EVENT_LIST_PRESET}):_jsx(ToolEmptyState,{testID:`${ZUSTAND_TEST_ID}-history-empty`,...resolveListEmptyState({subject:"changes",search:G,total:G.trim()?P:0,capturing:A,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(_){const e=Z.find(e=>e.name===_)??null;return e?_jsx(ZustandStoreDetailContent,{store:e,onViewHistory:re}):_jsx(ToolEmptyState,{testID:`${ZUSTAND_TEST_ID}-store-detail-gone`,otto:"ghost",title:"Store no longer registered",message:`${_} is not in the registry any more.`})}return"stores"===T?_jsx(ZustandStoreBrowser,{stores:M,searchQuery:G,isLoading:r,onOpenStore:ie}):_jsxs(_Fragment,{children:[!A&&_jsxs(View,{style:styles.disabledBanner,testID:`${ZUSTAND_TEST_ID}-banner-disabled`,children:[_jsx(Power,{size:14,color:night.color.warning}),_jsx(Text,{style:styles.disabledText,children:"State capture is disabled"})]}),L&&_jsxs(TouchableOpacity,{style:styles.lockedBanner,onPress:oe,activeOpacity:.8,testID:`${ZUSTAND_TEST_ID}-locked`,accessibilityRole:"button",children:[_jsx(Lock,{size:14,color:night.color.accent}),_jsxs(Text,{style:styles.lockedText,testID:`${ZUSTAND_TEST_ID}-locked-text`,children:[H," older"," ",1===H?"change":"changes"," locked"]}),_jsx(View,{style:styles.upgradeBadge,children:_jsx(Text,{style:styles.upgradeBadgeText,children:"UPGRADE"})})]}),U.length>0?_jsx(FlatList,{ref:X,testID:`${ZUSTAND_TEST_ID}-list`,data:U,renderItem:ye,keyExtractor:be,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,...EVENT_LIST_PRESET}):_jsx(EventsEmptyState,{isEnabled:A,searchText:G,totalChanges:k.totalChanges})]})})()}),Ee=_jsx(ProUpgradeModal,{visible:h,onClose:()=>S(!1),featureName:"Full State History"});return _jsxs(TickProvider,n?{children:[_jsxs(View,{style:styles.inlineRoot,children:[_jsx(View,{style:styles.inlineHeader,...windowDragProps,children:pe()}),Ie,Ce]}),Ee]}:{children:[_jsx(JsModal,{visible:e,onClose:t,onMinimize:o,persistenceKey:xe,header:{showToggleButton:!0,customContent:pe()},onModeChange:Y,enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,disableScrollWrapper:fe,styles:{},footer:Ce,footerHeight:De,children:Ie}),Ee]})}export function ZustandToolView(e={}){return _jsx(ZustandModal,{...e,inline:!0,visible:!0,onClose:()=>{}})}const styles=StyleSheet.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:macOSColors.border.default,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:night.color.buttonSurface,borderWidth:1,borderColor:night.color.border,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},headerActionButtonActive:{backgroundColor:night.color.accentSoft,borderColor:night.color.accentBorderStrong},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:night.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:night.color.warning+"20"},disabledText:{color: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:night.color.accentSoft,borderRadius:8,borderWidth:1,borderColor:night.color.accentBorder},lockedText:{color:night.color.accent,fontSize:11,fontWeight:"500",flex:1},upgradeBadge:{backgroundColor:night.color.accent,paddingHorizontal:8,paddingVertical:3,borderRadius:4},upgradeBadgeText:{color:night.color.onAccent,fontSize:9,fontWeight:"700",letterSpacing:.5}});