@buoy-gg/react-query 1.7.2

package/lib/commonjs/react-query/components/modals/QueryBrowserModal.js

@@ -0,0 +1,237 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryBrowserModal = QueryBrowserModal;
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _useSelectedQuery = require("../../hooks/useSelectedQuery");
+var _ReactQueryModalHeader = require("./ReactQueryModalHeader");
+var _QueryBrowserMode = require("../QueryBrowserMode");
+var _QueryBrowserFooter = require("./QueryBrowserFooter");
+var _QueryFilterViewV = require("../QueryFilterViewV3");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _useAllQueries = _interopRequireDefault(require("../../hooks/useAllQueries"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Specialized modal for query browsing following "Decompose by Responsibility"
+ * Single purpose: Display query browser when no query is selected
+ */
+function QueryBrowserModal({
+  visible,
+  selectedQueryKey,
+  onQuerySelect,
+  onClose,
+  onMinimize,
+  activeFilter: externalActiveFilter,
+  onFilterChange: externalOnFilterChange,
+  enableSharedModalDimensions = false,
+  onTabChange,
+  searchText = "",
+  onSearchChange
+}) {
+  const selectedQuery = (0, _useSelectedQuery.useGetQueryByQueryKey)(selectedQueryKey);
+  const allQueries = (0, _useAllQueries.default)();
+
+  // Use external filter state if provided (for persistence), otherwise use internal state
+  const [internalActiveFilter, setInternalActiveFilter] = (0, _react.useState)(null);
+  const activeFilter = externalActiveFilter ?? internalActiveFilter;
+  const setActiveFilter = externalOnFilterChange ?? setInternalActiveFilter;
+
+  // Filter modal state
+  const [showFilterView, setShowFilterView] = (0, _react.useState)(false);
+  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
+  const [includedPatterns, setIncludedPatterns] = (0, _react.useState)(new Set());
+
+  // AsyncStorage for persisting ignored patterns
+  const {
+    getItem: safeGetItem,
+    setItem: safeSetItem
+  } = (0, _sharedUi.useSafeAsyncStorage)();
+
+  // Load ignored patterns from storage on mount
+  (0, _react.useEffect)(() => {
+    const loadFilters = async () => {
+      try {
+        const stored = await safeGetItem(_sharedUi.devToolsStorageKeys.reactQuery.ignoredPatterns());
+        if (stored) {
+          const patterns = JSON.parse(stored);
+          if (Array.isArray(patterns)) {
+            setIgnoredPatterns(new Set(patterns));
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load ignored patterns:", error);
+      }
+    };
+    loadFilters();
+  }, [safeGetItem]);
+
+  // Load included patterns from storage on mount
+  (0, _react.useEffect)(() => {
+    const loadFilters = async () => {
+      try {
+        const stored = await safeGetItem(_sharedUi.devToolsStorageKeys.reactQuery.includedPatterns());
+        if (stored) {
+          const patterns = JSON.parse(stored);
+          if (Array.isArray(patterns)) {
+            setIncludedPatterns(new Set(patterns));
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load included patterns:", error);
+      }
+    };
+    loadFilters();
+  }, [safeGetItem]);
+
+  // Save ignored patterns to storage when they change
+  (0, _react.useEffect)(() => {
+    const saveFilters = async () => {
+      try {
+        const patterns = Array.from(ignoredPatterns);
+        await safeSetItem(_sharedUi.devToolsStorageKeys.reactQuery.ignoredPatterns(), JSON.stringify(patterns));
+      } catch (error) {
+        console.error("Failed to save ignored patterns:", error);
+      }
+    };
+    saveFilters();
+  }, [ignoredPatterns, safeSetItem]);
+
+  // Save included patterns to storage when they change
+  (0, _react.useEffect)(() => {
+    const saveFilters = async () => {
+      try {
+        const patterns = Array.from(includedPatterns);
+        await safeSetItem(_sharedUi.devToolsStorageKeys.reactQuery.includedPatterns(), JSON.stringify(patterns));
+      } catch (error) {
+        console.error("Failed to save included patterns:", error);
+      }
+    };
+    saveFilters();
+  }, [includedPatterns, safeSetItem]);
+
+  // Toggle pattern in ignored set
+  const handlePatternToggle = (0, _react.useCallback)(pattern => {
+    setIgnoredPatterns(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(pattern)) {
+        newSet.delete(pattern);
+      } else {
+        newSet.add(pattern);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // Toggle pattern in included set
+  const handleIncludedPatternToggle = (0, _react.useCallback)(pattern => {
+    setIncludedPatterns(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(pattern)) {
+        newSet.delete(pattern);
+      } else {
+        newSet.add(pattern);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // Track modal mode for conditional styling
+  const [modalMode, setModalMode] = (0, _react.useState)("bottomSheet");
+  const storagePrefix = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.reactQuery.modal() : _sharedUi.devToolsStorageKeys.reactQuery.browserModal();
+  const handleModeChange = (0, _react.useCallback)(mode => {
+    setModalMode(mode);
+  }, []);
+  if (!visible) return null;
+  const renderHeaderContent = () => {
+    // Filter view header with back button
+    if (showFilterView) {
+      const tabs = [{
+        key: "filters",
+        label: "Filters"
+      }];
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: () => setShowFilterView(false)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: "",
+          noMargin: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
+            tabs: tabs,
+            activeTab: "filters",
+            onTabChange: () => {}
+          })
+        })]
+      });
+    }
+
+    // Normal query browser header
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactQueryModalHeader.ReactQueryModalHeader, {
+      selectedQuery: selectedQuery,
+      activeTab: "queries",
+      onTabChange: onTabChange,
+      onBack: () => onQuerySelect(undefined),
+      searchText: searchText,
+      onSearchChange: onSearchChange,
+      onFilterPress: () => setShowFilterView(true),
+      hasActiveFilters: activeFilter !== null || ignoredPatterns.size > 0 || includedPatterns.size > 0
+    });
+  };
+  const footerNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryBrowserFooter.QueryBrowserFooter, {
+    activeFilter: activeFilter,
+    onFilterChange: setActiveFilter,
+    isFloatingMode: modalMode === "floating"
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    persistenceKey: storagePrefix,
+    header: {
+      customContent: renderHeaderContent(),
+      showToggleButton: true
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    footer: !showFilterView ? footerNode : undefined,
+    footerHeight: !showFilterView ? 56 : undefined,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.container,
+      children: showFilterView ?
+      /*#__PURE__*/
+      /* Show filter view */
+      (0, _jsxRuntime.jsx)(_QueryFilterViewV.QueryFilterViewV3, {
+        queries: allQueries,
+        activeFilter: activeFilter,
+        onFilterChange: setActiveFilter,
+        ignoredPatterns: ignoredPatterns,
+        onPatternToggle: handlePatternToggle,
+        includedPatterns: includedPatterns,
+        onIncludedPatternToggle: handleIncludedPatternToggle
+      }) :
+      /*#__PURE__*/
+      /* Show query browser */
+      (0, _jsxRuntime.jsx)(_QueryBrowserMode.QueryBrowserMode, {
+        selectedQuery: selectedQuery,
+        onQuerySelect: onQuerySelect,
+        activeFilter: activeFilter,
+        searchText: searchText,
+        ignoredPatterns: ignoredPatterns,
+        includedPatterns: includedPatterns,
+        onFilterPress: () => setShowFilterView(true)
+      })
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  }
+});

package/lib/commonjs/react-query/components/modals/ReactQueryModal.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactQueryModal = ReactQueryModal;
+var _QueryBrowserModal = require("./QueryBrowserModal");
+var _DataEditorModal = require("./DataEditorModal");
+var _MutationBrowserModal = require("./MutationBrowserModal");
+var _MutationEditorModal = require("./MutationEditorModal");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Refactored ReactQueryModal following composition principles
+ *
+ * Applied principles:
+ * - Decompose by Responsibility: Separated query browser and data editor modals
+ * - Prefer Composition over Configuration: Uses specialized modal components
+ * - Extract Reusable Logic: Modal routing logic based on query selection
+ * - Utilize Render Props: Each modal handles its own rendering responsibility
+ */
+function ReactQueryModal({
+  visible,
+  selectedQueryKey,
+  selectedMutationId,
+  onQuerySelect,
+  onMutationSelect,
+  onClose,
+  onMinimize,
+  activeFilter,
+  onFilterChange,
+  activeTab,
+  onTabChange,
+  enableSharedModalDimensions = false,
+  searchText = "",
+  onSearchChange
+}) {
+  // Check if we have a key/id even if the query/mutation hasn't been found yet
+  const inDetail = !!selectedQueryKey || !!selectedMutationId;
+  const isQueryMode = activeTab === "queries";
+  const isMutationMode = activeTab === "mutations";
+  const commonProps = {
+    onClose,
+    onMinimize,
+    activeFilter,
+    onFilterChange,
+    enableSharedModalDimensions
+  };
+  const showQueryBrowserModal = visible && !inDetail && isQueryMode;
+  const showMutationBrowserModal = visible && !inDetail && isMutationMode;
+  const showDataEditorModal = visible && inDetail && isQueryMode && !!selectedQueryKey;
+  const showMutationEditorModal = visible && inDetail && isMutationMode && !!selectedMutationId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryBrowserModal.QueryBrowserModal, {
+      visible: showQueryBrowserModal,
+      selectedQueryKey: selectedQueryKey,
+      onQuerySelect: onQuerySelect,
+      onTabChange: onTabChange,
+      searchText: searchText,
+      onSearchChange: onSearchChange,
+      ...commonProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationBrowserModal.MutationBrowserModal, {
+      visible: showMutationBrowserModal,
+      selectedMutationId: selectedMutationId,
+      onMutationSelect: onMutationSelect,
+      onTabChange: onTabChange,
+      searchText: searchText,
+      onSearchChange: onSearchChange,
+      ...commonProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataEditorModal.DataEditorModal, {
+      visible: showDataEditorModal,
+      selectedQueryKey: selectedQueryKey,
+      onQuerySelect: onQuerySelect,
+      onTabChange: onTabChange,
+      ...commonProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationEditorModal.MutationEditorModal, {
+      visible: showMutationEditorModal,
+      selectedMutationId: selectedMutationId,
+      onMutationSelect: onMutationSelect,
+      onTabChange: onTabChange,
+      ...commonProps
+    })]
+  });
+}

package/lib/commonjs/react-query/components/modals/ReactQueryModalHeader.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactQueryModalHeader = ReactQueryModalHeader;
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Shared header for all React Query modals. Handles tab switching when browsing and presents
+ * breadcrumbs when a specific query or mutation is selected.
+ */
+function ReactQueryModalHeader({
+  selectedQuery,
+  selectedMutation,
+  activeTab,
+  onTabChange,
+  onBack,
+  searchText = "",
+  onSearchChange,
+  onFilterPress,
+  hasActiveFilters = false
+}) {
+  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  const searchInputRef = (0, _react.useRef)(null);
+
+  // Auto-focus search input when search becomes active
+  (0, _react.useEffect)(() => {
+    if (isSearchActive && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isSearchActive]);
+  const handleSearchToggle = () => {
+    setIsSearchActive(!isSearchActive);
+    if (isSearchActive && onSearchChange) {
+      onSearchChange("");
+    }
+  };
+  const handleSearch = text => {
+    if (onSearchChange) {
+      onSearchChange(text);
+    }
+  };
+  // Simple function to get query display text
+  const getQueryText = query => {
+    if (!query?.queryKey) return "Unknown Query";
+    const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+    return keys.filter(k => k != null).map(k => String(k)).join(" › ") || "Unknown Query";
+  };
+  const getItemText = item => {
+    if ("queryKey" in item) {
+      return getQueryText(item);
+    } else {
+      return item.options.mutationKey ? (Array.isArray(item.options.mutationKey) ? item.options.mutationKey : [item.options.mutationKey]).filter(k => k != null).map(k => String(k)).join(" › ") || `Mutation #${item.mutationId}` : `Mutation #${item.mutationId}`;
+    }
+  };
+  const tabs = [{
+    key: "queries",
+    label: "Queries"
+  }, {
+    key: "mutations",
+    label: "Mutations"
+  }];
+
+  // Show details view when an item is selected
+  if (selectedQuery || selectedMutation) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+        title: getItemText(selectedQuery ?? selectedMutation)
+      })]
+    });
+  }
+
+  // Show browser view with tabs when no item is selected
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+      title: "",
+      noMargin: true,
+      children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.headerSearchContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+          size: 14,
+          color: _sharedUi.buoyColors.textSecondary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: searchInputRef,
+          style: styles.headerSearchInput,
+          placeholder: "Search query keys...",
+          placeholderTextColor: _sharedUi.buoyColors.textMuted,
+          value: searchText,
+          onChangeText: handleSearch,
+          onSubmitEditing: () => setIsSearchActive(false),
+          onBlur: () => setIsSearchActive(false),
+          "sentry-label": "ignore react query search header",
+          accessibilityLabel: "Search queries and mutations",
+          autoCapitalize: "none",
+          autoCorrect: false,
+          returnKeyType: "search"
+        }), searchText.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => {
+            handleSearch("");
+            setIsSearchActive(false);
+          },
+          "sentry-label": "ignore clear search header",
+          style: styles.headerSearchClear,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+            size: 14,
+            color: _sharedUi.buoyColors.textSecondary
+          })
+        }) : null]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
+        tabs: tabs,
+        activeTab: activeTab,
+        onTabChange: tab => onTabChange(tab)
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        "sentry-label": "ignore open search",
+        onPress: handleSearchToggle,
+        style: styles.headerActionButton,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+          size: 14,
+          color: _sharedUi.buoyColors.textSecondary
+        })
+      }), onFilterPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        "sentry-label": "ignore open filter",
+        onPress: onFilterPress,
+        style: [styles.headerActionButton, hasActiveFilters && styles.activeFilterButton],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
+          size: 14,
+          color: hasActiveFilters ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
+        })
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  headerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _sharedUi.buoyColors.input,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    gap: 6,
+    marginHorizontal: 12,
+    marginVertical: 8
+  },
+  headerSearchInput: {
+    flex: 1,
+    color: _sharedUi.buoyColors.text,
+    fontSize: 13,
+    fontFamily: "monospace",
+    padding: 0,
+    margin: 0,
+    minHeight: 18
+  },
+  headerSearchClear: {
+    padding: 2
+  },
+  headerActionButton: {
+    padding: 6,
+    borderRadius: 4
+  },
+  activeFilterButton: {
+    backgroundColor: _sharedUi.buoyColors.primary + "33"
+  }
+});

package/lib/commonjs/react-query/components/modals/SwipeIndicator.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SwipeIndicator = SwipeIndicator;
+var _reactNative = require("react-native");
+var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Morphing swipe indicator – thin line ➜ pill ➜ circle with a pop-out cue at
+ * full commit.  Visual-only; gesture logic lives upstream.
+ */
+
+/* -------------------------------------------------------------------------- */
+// VISUAL CONSTANTS – tuned for typical back-gesture UX
+/* -------------------------------------------------------------------------- */
+const INDICATOR_HEIGHT = 32; // ⬆️ bigger circle (line height)
+const MIN_WIDTH = 6; // hairline start
+const MAX_WIDTH = INDICATOR_HEIGHT; // circle when width == height
+const DEFAULT_MAX_TRANSLATION = 120;
+const POP_OUT_START = 0.95; // progress at which pop-out begins
+const POP_OUT_SCALE = 1.15; // final scale factor when fully committed
+
+function SwipeIndicator({
+  translationX,
+  maxTranslation = DEFAULT_MAX_TRANSLATION,
+  canSwipeLeft = true,
+  canSwipeRight = true
+}) {
+  /* ---------------- LEFT EDGE (Back) ---------------- */
+  const leftProgress = (0, _react.useMemo)(() => {
+    return translationX.interpolate({
+      inputRange: [0, maxTranslation],
+      outputRange: [0, 1],
+      extrapolate: "clamp"
+    });
+  }, [translationX, maxTranslation]);
+  const leftIndicatorWidth = (0, _react.useMemo)(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [MIN_WIDTH, MAX_WIDTH]
+    });
+  }, [leftProgress]);
+  const leftIndicatorScale = (0, _react.useMemo)(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, POP_OUT_START, 1],
+      outputRange: [1, 1, POP_OUT_SCALE]
+    });
+  }, [leftProgress]);
+  const leftIndicatorTranslateX = (0, _react.useMemo)(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, 0.99, 1],
+      outputRange: [0, 0, 16]
+    });
+  }, [leftProgress]);
+  const leftIndicatorOpacity = (0, _react.useMemo)(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, 0.01],
+      outputRange: [0, 1],
+      extrapolate: "clamp"
+    });
+  }, [leftProgress]);
+  const leftArrowOpacity = (0, _react.useMemo)(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [0, 0, 1],
+      extrapolate: "clamp"
+    });
+  }, [leftProgress]);
+  const leftArrowScale = (0, _react.useMemo)(() => {
+    return leftProgress.interpolate({
+      inputRange: [0, 0.5, POP_OUT_START, 1],
+      outputRange: [0.8, 0.8, 1, 1.2]
+    });
+  }, [leftProgress]);
+
+  /* ---------------- RIGHT EDGE ---------------- */
+  const rightProgress = (0, _react.useMemo)(() => {
+    return translationX.interpolate({
+      inputRange: [-maxTranslation, 0],
+      outputRange: [1, 0],
+      extrapolate: "clamp"
+    });
+  }, [translationX, maxTranslation]);
+  const rightIndicatorWidth = (0, _react.useMemo)(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [MIN_WIDTH, MAX_WIDTH]
+    });
+  }, [rightProgress]);
+  const rightIndicatorScale = (0, _react.useMemo)(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, POP_OUT_START, 1],
+      outputRange: [1, 1, POP_OUT_SCALE]
+    });
+  }, [rightProgress]);
+  const rightIndicatorTranslateX = (0, _react.useMemo)(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, 0.99, 1],
+      outputRange: [0, 0, -16]
+    });
+  }, [rightProgress]);
+  const rightIndicatorOpacity = (0, _react.useMemo)(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, 0.01],
+      outputRange: [0, 1],
+      extrapolate: "clamp"
+    });
+  }, [rightProgress]);
+  const rightArrowOpacity = (0, _react.useMemo)(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [0, 0, 1],
+      extrapolate: "clamp"
+    });
+  }, [rightProgress]);
+  const rightArrowScale = (0, _react.useMemo)(() => {
+    return rightProgress.interpolate({
+      inputRange: [0, 0.5, POP_OUT_START, 1],
+      outputRange: [0.8, 0.8, 1, 1.2]
+    });
+  }, [rightProgress]);
+
+  /* ---------------- Render ---------------- */
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    pointerEvents: "none",
+    children: [canSwipeRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.leftWrapper, {
+        width: leftIndicatorWidth,
+        height: INDICATOR_HEIGHT,
+        borderRadius: INDICATOR_HEIGHT / 2,
+        backgroundColor: _sharedUi.buoyColors.text + "E6",
+        justifyContent: "center",
+        alignItems: "center",
+        opacity: leftIndicatorOpacity,
+        transform: [{
+          scale: leftIndicatorScale
+        }, {
+          translateX: leftIndicatorTranslateX
+        }]
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: {
+          opacity: leftArrowOpacity,
+          transform: [{
+            scale: leftArrowScale
+          }]
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronLeft, {
+          size: INDICATOR_HEIGHT * 0.6,
+          color: _sharedUi.buoyColors.primary,
+          strokeWidth: 3
+        })
+      })
+    }), canSwipeLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.rightWrapper, {
+        width: rightIndicatorWidth,
+        height: INDICATOR_HEIGHT,
+        borderRadius: INDICATOR_HEIGHT / 2,
+        backgroundColor: _sharedUi.buoyColors.text + "E6",
+        justifyContent: "center",
+        alignItems: "center",
+        opacity: rightIndicatorOpacity,
+        transform: [{
+          scale: rightIndicatorScale
+        }, {
+          translateX: rightIndicatorTranslateX
+        }]
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: {
+          opacity: rightArrowOpacity,
+          transform: [{
+            scale: rightArrowScale
+          }]
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
+          size: INDICATOR_HEIGHT * 0.6,
+          color: _sharedUi.buoyColors.primary,
+          strokeWidth: 3
+        })
+      })
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    zIndex: 1000,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  leftWrapper: {
+    position: "absolute",
+    left: 16
+  },
+  rightWrapper: {
+    position: "absolute",
+    right: 16
+  }
+});