@buoy-gg/jotai 2.1.12 → 2.1.13

package/lib/commonjs/jotai/components/JotaiModal.js

@@ -1,567 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.JotaiModal = JotaiModal;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _license = require("@buoy-gg/license");
-var _useJotaiAtomChanges = require("../hooks/useJotaiAtomChanges");
-var _JotaiAtomChangeItem = require("./JotaiAtomChangeItem");
-var _JotaiAtomDetailContent = require("./JotaiAtomDetailContent");
-var _JotaiAtomBrowser = require("./JotaiAtomBrowser");
-var _JotaiEventFilterView = require("./JotaiEventFilterView");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Main Jotai DevTools modal
- *
- * Two tabs mirroring the Zustand DevTools pattern:
- * - Atoms tab: Browse all registered atoms and their current value
- * - Events tab: Live atom change monitoring with diffs
- */
-
-const FREE_TIER_CHANGE_LIMIT = 25;
-function EventsEmptyState({
-  isEnabled
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.emptyState,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
-      size: 32,
-      color: _sharedUi.macOSColors.text.muted
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.emptyTitle,
-      children: "No atom changes"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.emptyText,
-      children: isEnabled ? "Atom changes will appear here as values update." : "Enable capture to start recording atom changes"
-    })]
-  });
-}
-function JotaiModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false
-}) {
-  const isPro = (0, _license.useIsPro)();
-  const [showProModal, setShowProModal] = (0, _react.useState)(false);
-  const [activeTab, setActiveTab] = (0, _react.useState)("atoms");
-  const [selectedHistoryAtom, setSelectedHistoryAtom] = (0, _react.useState)(null);
-  const [showFilters, setShowFilters] = (0, _react.useState)(false);
-  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
-  const {
-    filteredChanges,
-    filter,
-    setFilter,
-    atoms,
-    clearChanges,
-    isEnabled,
-    toggleCapture
-  } = (0, _useJotaiAtomChanges.useJotaiAtomChanges)();
-
-  // Apply ignored patterns on top of filteredChanges
-  const displayedChanges = (0, _react.useMemo)(() => {
-    if (ignoredPatterns.size === 0) return filteredChanges;
-    return filteredChanges.filter(c => !Array.from(ignoredPatterns).some(p => c.atomLabel.toLowerCase().includes(p.toLowerCase())));
-  }, [filteredChanges, ignoredPatterns]);
-
-  // Apply ignored patterns to atoms list
-  const displayedAtoms = (0, _react.useMemo)(() => {
-    if (ignoredPatterns.size === 0) return atoms;
-    return atoms.filter(a => !Array.from(ignoredPatterns).some(p => a.label.toLowerCase().includes(p.toLowerCase())));
-  }, [atoms, ignoredPatterns]);
-
-  // Free-tier gate
-  const visibleChanges = (0, _react.useMemo)(() => {
-    if (isPro) return displayedChanges;
-    return displayedChanges.slice(0, FREE_TIER_CHANGE_LIMIT);
-  }, [displayedChanges, isPro]);
-  const lockedChangeCount = (0, _react.useMemo)(() => {
-    if (isPro) return 0;
-    return Math.max(0, displayedChanges.length - FREE_TIER_CHANGE_LIMIT);
-  }, [displayedChanges.length, isPro]);
-  const hasLockedChanges = lockedChangeCount > 0;
-
-  // When viewing a single atom's history, scope the list
-  const activeChanges = (0, _react.useMemo)(() => {
-    if (selectedHistoryAtom) {
-      return visibleChanges.filter(c => c.atomLabel === selectedHistoryAtom);
-    }
-    return visibleChanges;
-  }, [visibleChanges, selectedHistoryAtom]);
-  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;
-
-  // Search state
-  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
-      }));
-    }
-  };
-  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)(atomLabel => {
-    setSelectedHistoryAtom(atomLabel);
-    setSelectedChangeId(null);
-  }, []);
-  const handleBackFromHistory = (0, _react.useCallback)(() => {
-    setSelectedHistoryAtom(null);
-    setSelectedChangeId(null);
-  }, []);
-  const getAtomsSnapshot = (0, _react.useCallback)(() => {
-    return displayedAtoms.reduce((acc, atom) => {
-      try {
-        const value = atom.getValue();
-        acc[atom.label] = (0, _sharedUi.truncatePayload)(value);
-      } catch {
-        acc[atom.label] = null;
-      }
-      return acc;
-    }, {});
-  }, [displayedAtoms]);
-  const getEventsSnapshot = (0, _react.useCallback)(() => {
-    return displayedChanges.map(change => ({
-      id: change.id,
-      atomLabel: change.atomLabel,
-      timestamp: change.timestamp,
-      prevValue: (0, _sharedUi.truncatePayload)(change.prevValue),
-      nextValue: (0, _sharedUi.truncatePayload)(change.nextValue),
-      hasValueChange: change.hasValueChange,
-      changedKeys: change.changedKeys
-    }));
-  }, [displayedChanges]);
-  const getHistorySnapshot = (0, _react.useCallback)(() => {
-    return activeChanges.map(change => ({
-      id: change.id,
-      atomLabel: change.atomLabel,
-      timestamp: change.timestamp,
-      prevValue: (0, _sharedUi.truncatePayload)(change.prevValue),
-      nextValue: (0, _sharedUi.truncatePayload)(change.nextValue),
-      hasValueChange: change.hasValueChange,
-      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);
-    setSelectedHistoryAtom(null);
-    setSelectedChangeId(null);
-    setShowFilters(false);
-    if (searchText) {
-      setSearchText("");
-      setFilter(prev => ({
-        ...prev,
-        searchText: ""
-      }));
-    }
-    setIsSearchActive(false);
-  }, [searchText, setFilter]);
-  const keyExtractor = (0, _react.useCallback)(item => item.id, []);
-  const renderItem = (0, _react.useCallback)(({
-    item
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomChangeItem.JotaiAtomChangeItem, {
-    change: item,
-    onPress: handleChangePress
-  }), [handleChangePress]);
-
-  // ---- Header ----
-
-  const hasActiveFilters = ignoredPatterns.size > 0;
-  const renderHeaderContent = () => {
-    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
-        })]
-      });
-    }
-    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.atomLabel}/${selectedChange.category}`,
-          centered: true
-        })]
-      });
-    }
-    if (selectedHistoryAtom) {
-      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: `${selectedHistoryAtom} History`,
-          centered: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-            value: getHistorySnapshot,
-            disabled: activeChanges.length === 0,
-            buttonStyle: styles.headerActionButton
-          })
-        })]
-      });
-    }
-    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.jsxs)(_reactNative.View, {
-          style: styles.headerSearchContainer,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-            size: 14,
-            color: _sharedUi.macOSColors.text.secondary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-            ref: searchInputRef,
-            style: styles.headerSearchInput,
-            placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
-            placeholderTextColor: _sharedUi.macOSColors.text.muted,
-            value: searchText,
-            onChangeText: handleSearch,
-            onSubmitEditing: () => setIsSearchActive(false),
-            onBlur: () => setIsSearchActive(false),
-            autoCapitalize: "none",
-            autoCorrect: false,
-            returnKeyType: "search"
-          }), searchText.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            onPress: () => {
-              handleSearch("");
-              setIsSearchActive(false);
-            },
-            style: styles.headerSearchClear,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
-              size: 14,
-              color: _sharedUi.macOSColors.text.secondary
-            })
-          })]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-          tabs: [{
-            key: "atoms",
-            label: `Atoms${displayedAtoms.length > 0 ? ` (${displayedAtoms.length})` : ""}`
-          }, {
-            key: "events",
-            label: `Events${displayedChanges.length > 0 ? ` (${displayedChanges.length})` : ""}`
-          }],
-          activeTab: activeTab,
-          onTabChange: handleTabChange
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: () => setIsSearchActive(true),
-          style: styles.headerActionButton,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-            size: 14,
-            color: _sharedUi.macOSColors.text.secondary
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: () => setShowFilters(true),
-          style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
-            size: 14,
-            color: hasActiveFilters ? _sharedUi.macOSColors.semantic.debug : _sharedUi.macOSColors.text.secondary
-          })
-        }), activeTab === "atoms" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-          value: getAtomsSnapshot,
-          disabled: displayedAtoms.length === 0,
-          buttonStyle: styles.headerActionButton
-        }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-            value: getEventsSnapshot,
-            disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
-            isEnabled: isEnabled,
-            onToggle: toggleCapture,
-            accessibilityLabel: "Toggle Jotai atom capture"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarClearButton, {
-            onPress: clearChanges,
-            disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton
-          })]
-        })]
-      })]
-    });
-  };
-
-  // ---- Content ----
-
-  const renderContent = () => {
-    if (showFilters) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiEventFilterView.JotaiEventFilterView, {
-        ignoredPatterns: ignoredPatterns,
-        onTogglePattern: handleTogglePattern,
-        onAddPattern: handleAddPattern,
-        atoms: atoms
-      });
-    }
-    if (selectedChange && selectedChangeIndex !== null) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomDetailContent.JotaiAtomDetailContent, {
-        change: selectedChange,
-        changes: activeChanges,
-        selectedIndex: selectedChangeIndex,
-        onIndexChange: handleIndexChange,
-        disableInternalFooter: true
-      });
-    }
-    if (selectedHistoryAtom) {
-      return activeChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-        data: activeChanges,
-        renderItem: renderItem,
-        keyExtractor: keyExtractor,
-        contentContainerStyle: styles.listContent,
-        showsVerticalScrollIndicator: true,
-        removeClippedSubviews: true,
-        initialNumToRender: 15,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.emptyState,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
-          size: 32,
-          color: _sharedUi.macOSColors.text.muted
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.emptyTitle,
-          children: "No history yet"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: styles.emptyText,
-          children: ["Changes for ", selectedHistoryAtom, " will appear here."]
-        })]
-      });
-    }
-    if (activeTab === "atoms") {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomBrowser.JotaiAtomBrowser, {
-        atoms: displayedAtoms,
-        searchQuery: searchText,
-        onViewHistory: handleViewHistory
-      });
-    }
-
-    // Events tab
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [!isEnabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.disabledBanner,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
-          size: 14,
-          color: _sharedUi.macOSColors.semantic.warning
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.disabledText,
-          children: "Atom capture is disabled"
-        })]
-      }), hasLockedChanges && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: styles.lockedBanner,
-        onPress: handleUpgradePress,
-        activeOpacity: 0.8,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: styles.lockedText,
-          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,
-        data: visibleChanges,
-        renderItem: renderItem,
-        keyExtractor: keyExtractor,
-        contentContainerStyle: styles.listContent,
-        showsVerticalScrollIndicator: true,
-        removeClippedSubviews: true,
-        initialNumToRender: 15,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EventsEmptyState, {
-        isEnabled: isEnabled
-      })]
-    });
-  };
-  const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : "buoy-jotai-modal";
-  if (!visible) return null;
-  const footerNode = selectedChange && selectedChangeIndex !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomDetailContent.JotaiAtomDetailFooter, {
-    change: selectedChange,
-    changes: activeChanges,
-    selectedIndex: selectedChangeIndex,
-    onIndexChange: handleIndexChange
-  }) : null;
-  const footerHeight = selectedChange && activeChanges.length > 1 ? 68 : 0;
-  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,
-      styles: {},
-      footer: footerNode,
-      footerHeight: footerHeight,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.container,
-        children: renderContent()
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
-      visible: showProModal,
-      onClose: () => setShowProModal(false),
-      featureName: "Full Atom History"
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.base
-  },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _sharedUi.macOSColors.background.input,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: _sharedUi.macOSColors.text.primary,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
-  headerActionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerActionButtonActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground
-  },
-  disabledBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: 10,
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.warning + "20"
-  },
-  disabledText: {
-    color: _sharedUi.macOSColors.semantic.warning,
-    fontSize: 11,
-    flex: 1
-  },
-  listContent: {
-    paddingTop: 8,
-    paddingBottom: 20
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: _sharedUi.macOSColors.text.primary,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: _sharedUi.macOSColors.text.muted,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 18
-  },
-  lockedBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: 10,
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "33"
-  },
-  lockedText: {
-    color: _sharedUi.buoyColors.primary,
-    fontSize: 11,
-    fontWeight: "500",
-    flex: 1
-  },
-  upgradeBadge: {
-    backgroundColor: _sharedUi.buoyColors.primary,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  upgradeBadgeText: {
-    color: "#fff",
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.JotaiModal=JotaiModal;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_useJotaiAtomChanges=require("../hooks/useJotaiAtomChanges"),_JotaiAtomChangeItem=require("./JotaiAtomChangeItem"),_JotaiAtomDetailContent=require("./JotaiAtomDetailContent"),_JotaiAtomBrowser=require("./JotaiAtomBrowser"),_JotaiEventFilterView=require("./JotaiEventFilterView"),_jsxRuntime=require("react/jsx-runtime");const FREE_TIER_CHANGE_LIMIT=25;function EventsEmptyState({isEnabled:e}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyState,children:[(0,_jsxRuntime.jsx)(_sharedUi.Box,{size:32,color:_sharedUi.macOSColors.text.muted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No atom changes"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyText,children:e?"Atom changes will appear here as values update.":"Enable capture to start recording atom changes"})]})}function JotaiModal({visible:e,onClose:t,onBack:a,onMinimize:r,enableSharedModalDimensions:s=!1}){const o=(0,_license.useIsPro)(),[i,n]=(0,_react.useState)(!1),[l,d]=(0,_react.useState)("atoms"),[c,u]=(0,_react.useState)(null),[m,h]=(0,_react.useState)(!1),[_,x]=(0,_react.useState)(new Set),{filteredChanges:g,filter:j,setFilter:y,atoms:C,clearChanges:b,isEnabled:p,toggleCapture:R}=(0,_useJotaiAtomChanges.useJotaiAtomChanges)(),S=(0,_react.useMemo)(()=>0===_.size?g:g.filter(e=>!Array.from(_).some(t=>e.atomLabel.toLowerCase().includes(t.toLowerCase()))),[g,_]),U=(0,_react.useMemo)(()=>0===_.size?C:C.filter(e=>!Array.from(_).some(t=>e.label.toLowerCase().includes(t.toLowerCase()))),[C,_]),v=(0,_react.useMemo)(()=>o?S:S.slice(0,FREE_TIER_CHANGE_LIMIT),[S,o]),T=(0,_react.useMemo)(()=>o?0:Math.max(0,S.length-FREE_TIER_CHANGE_LIMIT),[S.length,o]),f=T>0,k=(0,_react.useMemo)(()=>c?v.filter(e=>e.atomLabel===c):v,[v,c]),[w,A]=(0,_react.useState)(null),B=(0,_react.useMemo)(()=>{if(null===w)return null;const e=k.findIndex(e=>e.id===w);return e>=0?e:null},[w,k]),M=null!==B?k[B]:null,[N,E]=(0,_react.useState)(""),[I,V]=(0,_react.useState)(!1),J=(0,_react.useRef)(null),O=(0,_react.useRef)(null),H=(0,_react.useCallback)(e=>{},[]),z=e=>{E(e),"events"===l&&y(t=>({...t,searchText:e}))},P=(0,_react.useCallback)(e=>{A(e.id)},[]),L=(0,_react.useCallback)(()=>{n(!0)},[]),F=(0,_react.useCallback)(()=>{A(null)},[]),D=(0,_react.useCallback)(e=>{const t=k[e];t&&A(t.id)},[k]),q=(0,_react.useCallback)(e=>{u(e),A(null)},[]),K=(0,_react.useCallback)(()=>{u(null),A(null)},[]),W=(0,_react.useCallback)(()=>U.reduce((e,t)=>{try{const a=t.getValue();e[t.label]=(0,_sharedUi.truncatePayload)(a)}catch{e[t.label]=null}return e},{}),[U]),G=(0,_react.useCallback)(()=>S.map(e=>({id:e.id,atomLabel:e.atomLabel,timestamp:e.timestamp,prevValue:(0,_sharedUi.truncatePayload)(e.prevValue),nextValue:(0,_sharedUi.truncatePayload)(e.nextValue),hasValueChange:e.hasValueChange,changedKeys:e.changedKeys})),[S]),$=(0,_react.useCallback)(()=>k.map(e=>({id:e.id,atomLabel:e.atomLabel,timestamp:e.timestamp,prevValue:(0,_sharedUi.truncatePayload)(e.prevValue),nextValue:(0,_sharedUi.truncatePayload)(e.nextValue),hasValueChange:e.hasValueChange,changedKeys:e.changedKeys})),[k]),Q=(0,_react.useCallback)(e=>{x(t=>{const a=new Set(t);return a.has(e)?a.delete(e):a.add(e),a})},[]),X=(0,_react.useCallback)(e=>{x(t=>new Set([...t,e]))},[]),Y=(0,_react.useCallback)(e=>{d(e),u(null),A(null),h(!1),N&&(E(""),y(e=>({...e,searchText:""}))),V(!1)},[N,y]),Z=(0,_react.useCallback)(e=>e.id,[]),ee=(0,_react.useCallback)(({item:e})=>(0,_jsxRuntime.jsx)(_JotaiAtomChangeItem.JotaiAtomChangeItem,{change:e,onPress:P}),[P]),te=_.size>0,ae=s?_sharedUi.devToolsStorageKeys.modal.root():"buoy-jotai-modal";if(!e)return null;const re=M&&null!==B?(0,_jsxRuntime.jsx)(_JotaiAtomDetailContent.JotaiAtomDetailFooter,{change:M,changes:k,selectedIndex:B,onIndexChange:D}):null,se=M&&k.length>1?68:0;return(0,_jsxRuntime.jsxs)(_sharedUi.TickProvider,{children:[(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:r,persistenceKey:ae,header:{showToggleButton:!0,customContent:m?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:()=>h(!1)}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"Filters",centered:!0})]}):M?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:F}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:`${M.atomLabel}/${M.category}`,centered:!0})]}):c?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:K}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:`${c} History`,centered:!0}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{children:(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:$,disabled:0===k.length,buttonStyle:styles.headerActionButton})})]}):(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[a&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:a}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:I?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerSearchContainer,children:[(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.macOSColors.text.secondary}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:J,style:styles.headerSearchInput,placeholder:"atoms"===l?"Search atoms...":"Search events...",placeholderTextColor:_sharedUi.macOSColors.text.muted,value:N,onChangeText:z,onSubmitEditing:()=>V(!1),onBlur:()=>V(!1),autoCapitalize:"none",autoCorrect:!1,returnKeyType:"search"}),N.length>0&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>{z(""),V(!1)},style:styles.headerSearchClear,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:14,color:_sharedUi.macOSColors.text.secondary})})]}):(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:[{key:"atoms",label:"Atoms"+(U.length>0?` (${U.length})`:"")},{key:"events",label:"Events"+(S.length>0?` (${S.length})`:"")}],activeTab:l,onTabChange:Y})}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>V(!0),style:styles.headerActionButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.macOSColors.text.secondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>h(!0),style:[styles.headerActionButton,te&&styles.headerActionButtonActive],children:(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:14,color:te?_sharedUi.macOSColors.semantic.debug:_sharedUi.macOSColors.text.secondary})}),"atoms"===l&&(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:W,disabled:0===U.length,buttonStyle:styles.headerActionButton}),"events"===l&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:G,disabled:0===S.length,buttonStyle:styles.headerActionButton}),(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{isEnabled:p,onToggle:R,accessibilityLabel:"Toggle Jotai atom capture"}),(0,_jsxRuntime.jsx)(_sharedUi.ToolbarClearButton,{onPress:b,disabled:0===S.length,buttonStyle:styles.headerActionButton})]})]})]})},onModeChange:H,enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:re,footerHeight:se,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:m?(0,_jsxRuntime.jsx)(_JotaiEventFilterView.JotaiEventFilterView,{ignoredPatterns:_,onTogglePattern:Q,onAddPattern:X,atoms:C}):M&&null!==B?(0,_jsxRuntime.jsx)(_JotaiAtomDetailContent.JotaiAtomDetailContent,{change:M,changes:k,selectedIndex:B,onIndexChange:D,disableInternalFooter:!0}):c?k.length>0?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{data:k,renderItem:ee,keyExtractor:Z,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,removeClippedSubviews:!0,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:!1}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyState,children:[(0,_jsxRuntime.jsx)(_sharedUi.Box,{size:32,color:_sharedUi.macOSColors.text.muted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No history yet"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.emptyText,children:["Changes for ",c," will appear here."]})]}):"atoms"===l?(0,_jsxRuntime.jsx)(_JotaiAtomBrowser.JotaiAtomBrowser,{atoms:U,searchQuery:N,onViewHistory:q}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!p&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.macOSColors.semantic.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"Atom capture is disabled"})]}),f&&(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.lockedBanner,onPress:L,activeOpacity:.8,children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedText,children:[T," older"," ",1===T?"change":"changes"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.upgradeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.upgradeBadgeText,children:"UPGRADE"})})]}),v.length>0?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:O,data:v,renderItem:ee,keyExtractor:Z,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,removeClippedSubviews:!0,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:!1}):(0,_jsxRuntime.jsx)(EventsEmptyState,{isEnabled:p})]})})}),(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:i,onClose:()=>n(!1),featureName:"Full Atom History"})]})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.macOSColors.background.base},headerSearchContainer:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.macOSColors.background.input,borderRadius:10,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default,paddingHorizontal:12,paddingVertical:5},headerSearchInput:{flex:1,color:_sharedUi.macOSColors.text.primary,fontSize:13,marginLeft:6,paddingVertical:2},headerSearchClear:{marginLeft:6,padding:4},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.macOSColors.background.hover,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default,alignItems:"center",justifyContent:"center"},headerActionButtonActive:{backgroundColor:_sharedUi.macOSColors.semantic.infoBackground},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.macOSColors.semantic.warningBackground,borderRadius:8,borderWidth:1,borderColor:_sharedUi.macOSColors.semantic.warning+"20"},disabledText:{color:_sharedUi.macOSColors.semantic.warning,fontSize:11,flex:1},listContent:{paddingTop:8,paddingBottom:20},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:_sharedUi.macOSColors.text.primary,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:_sharedUi.macOSColors.text.muted,fontSize:12,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.buoyColors.primary+"15",borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.primary+"33"},lockedText:{color:_sharedUi.buoyColors.primary,fontSize:11,fontWeight:"500",flex:1},upgradeBadge:{backgroundColor:_sharedUi.buoyColors.primary,paddingHorizontal:8,paddingVertical:3,borderRadius:4},upgradeBadgeText:{color:"#fff",fontSize:9,fontWeight:"700",letterSpacing:.5}});

package/lib/commonjs/jotai/components/index.js

@@ -1,59 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "JOTAI_ICON_COLOR", {
-  enumerable: true,
-  get: function () {
-    return _JotaiIcon.JOTAI_ICON_COLOR;
-  }
-});
-Object.defineProperty(exports, "JotaiAtomBrowser", {
-  enumerable: true,
-  get: function () {
-    return _JotaiAtomBrowser.JotaiAtomBrowser;
-  }
-});
-Object.defineProperty(exports, "JotaiAtomChangeItem", {
-  enumerable: true,
-  get: function () {
-    return _JotaiAtomChangeItem.JotaiAtomChangeItem;
-  }
-});
-Object.defineProperty(exports, "JotaiAtomDetailContent", {
-  enumerable: true,
-  get: function () {
-    return _JotaiAtomDetailContent.JotaiAtomDetailContent;
-  }
-});
-Object.defineProperty(exports, "JotaiAtomDetailFooter", {
-  enumerable: true,
-  get: function () {
-    return _JotaiAtomDetailContent.JotaiAtomDetailFooter;
-  }
-});
-Object.defineProperty(exports, "JotaiEventFilterView", {
-  enumerable: true,
-  get: function () {
-    return _JotaiEventFilterView.JotaiEventFilterView;
-  }
-});
-Object.defineProperty(exports, "JotaiIcon", {
-  enumerable: true,
-  get: function () {
-    return _JotaiIcon.JotaiIcon;
-  }
-});
-Object.defineProperty(exports, "JotaiModal", {
-  enumerable: true,
-  get: function () {
-    return _JotaiModal.JotaiModal;
-  }
-});
-var _JotaiModal = require("./JotaiModal");
-var _JotaiIcon = require("./JotaiIcon");
-var _JotaiAtomChangeItem = require("./JotaiAtomChangeItem");
-var _JotaiAtomDetailContent = require("./JotaiAtomDetailContent");
-var _JotaiAtomBrowser = require("./JotaiAtomBrowser");
-var _JotaiEventFilterView = require("./JotaiEventFilterView");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"JOTAI_ICON_COLOR",{enumerable:!0,get:function(){return _JotaiIcon.JOTAI_ICON_COLOR}}),Object.defineProperty(exports,"JotaiAtomBrowser",{enumerable:!0,get:function(){return _JotaiAtomBrowser.JotaiAtomBrowser}}),Object.defineProperty(exports,"JotaiAtomChangeItem",{enumerable:!0,get:function(){return _JotaiAtomChangeItem.JotaiAtomChangeItem}}),Object.defineProperty(exports,"JotaiAtomDetailContent",{enumerable:!0,get:function(){return _JotaiAtomDetailContent.JotaiAtomDetailContent}}),Object.defineProperty(exports,"JotaiAtomDetailFooter",{enumerable:!0,get:function(){return _JotaiAtomDetailContent.JotaiAtomDetailFooter}}),Object.defineProperty(exports,"JotaiEventFilterView",{enumerable:!0,get:function(){return _JotaiEventFilterView.JotaiEventFilterView}}),Object.defineProperty(exports,"JotaiIcon",{enumerable:!0,get:function(){return _JotaiIcon.JotaiIcon}}),Object.defineProperty(exports,"JotaiModal",{enumerable:!0,get:function(){return _JotaiModal.JotaiModal}});var _JotaiModal=require("./JotaiModal"),_JotaiIcon=require("./JotaiIcon"),_JotaiAtomChangeItem=require("./JotaiAtomChangeItem"),_JotaiAtomDetailContent=require("./JotaiAtomDetailContent"),_JotaiAtomBrowser=require("./JotaiAtomBrowser"),_JotaiEventFilterView=require("./JotaiEventFilterView");