@buoy-gg/network 7.0.12 → 7.0.14

package/lib/module/network/components/NetworkModal.js

@@ -2,18 +2,25 @@
 
 import { useState, useRef, useEffect, useCallback } from "react";
 import { View, StyleSheet, TouchableOpacity, TextInput } from "react-native";
-import { Search, Filter, X, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, persistentStorage, TabSelector, useFeatureGate, UpgradeModal, PowerToggleButton, useIgnoredPatterns } from "@buoy-gg/shared-ui";
+import { Search, Filter, Bookmark, X, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, persistentStorage, TabSelector, useFeatureGate, UpgradeModal, PowerToggleButton, useIgnoredPatterns } from "@buoy-gg/shared-ui";
 import { NetworkFilterViewV3 } from "./NetworkFilterViewV3";
 import { TickProvider } from "../hooks/useTickEveryMinute";
 import { NetworkEventDetailView } from "./NetworkEventDetailView";
 import { NetworkCopySettingsView, DEFAULT_COPY_SETTINGS } from "./NetworkCopySettingsView";
-import { NetworkHeaderBadges, NetworkClearButton, NetworkDetailPinActions, NetworkHeaderCopyButton, NetworkSavedButton } from "./NetworkHeaderLive";
+import { NetworkHeaderBadges, NetworkClearButton, NetworkDetailPinActions, NetworkHeaderCopyButton } from "./NetworkHeaderLive";
 import { NetworkListScreen } from "./NetworkListScreen";
 import { NetworkSavedScreen } from "./NetworkSavedScreen";
+import { NetworkOverridesScreen } from "./NetworkOverridesScreen";
+import { NetworkOverridesButton } from "./NetworkOverridesButton";
+import { NetworkOverrideHeaderButton } from "./NetworkOverrideHeaderButton";
+import { NetworkHeaderMenu, NetworkHeaderMenuButton, NetworkHeaderMenuItem } from "./NetworkHeaderMenu";
 import { NetworkDetailStepper } from "./NetworkDetailStepper";
 import { useNetworkEventList } from "../hooks/useNetworkEventList";
 import { useLiveNetworkEvent } from "../hooks/useLiveNetworkEvent";
+import { useHasNetworkSelection, useNetworkBodyEventId, useSelectedNetworkEventId } from "../hooks/useNetworkSelection";
+import { networkSelectionStore } from "../utils/networkSelectionStore";
 import { FREE_TIER_SAVED_LIMIT, MAX_SAVED } from "../utils/networkSavedStore";
+import { FREE_TIER_RULE_LIMIT as FREE_TIER_OVERRIDE_LIMIT, MAX_RULES as MAX_OVERRIDE_RULES } from "../overrides/types";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // ============================================================================
 // Screens (rule4 stable router: each gates itself with `return null`; the
@@ -24,7 +31,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 
 function NetworkDetailScreen({
   visible,
-  eventId,
   paused,
   ignoredPatternValues,
   onTogglePattern,
@@ -33,34 +39,66 @@ function NetworkDetailScreen({
   ignoredPatterns,
   fromSaved,
   savedSearch,
-  onSelectEvent,
   applySafeAreaInset
 }) {
+  /**
+   * The detail renders at the IMMEDIATE selection — every step, no delay.
+   * Measured, 100 steps at a 150ms tap interval over 64KB payloads:
+   *
+   *   whole detail, bodies included ... 647ms/step
+   *   detail with no bodies at all ....  43ms/step (over the 150ms tap gap)
+   *
+   * So ~93% of a step is the request/response BODY trees, and everything else
+   * — status, URL breakdown, timing, header counts — is affordable at any tap
+   * rate. Deferring the whole detail (which is what this used to do) therefore
+   * bought nothing a user could feel: it made the cheap 43ms wait alongside
+   * the expensive 450ms instead of splitting them.
+   *
+   * So only the expensive part waits. `bodyId` trails `selectedId` by the
+   * settle window, so `heavyReady` is false exactly while the cursor is still
+   * moving — the JSON trees are skipped during a burst and mount once you land.
+   */
+  const eventId = useSelectedNetworkEventId();
+  const settledId = useNetworkBodyEventId();
+  const heavyReady = eventId != null && eventId === settledId;
   // Resolve the ID to the live event so a request opened while pending picks
   // up its response/error in place instead of freezing on the snapshot taken
   // when the row was tapped.
   const event = useLiveNetworkEvent(eventId, {
     paused: paused || !visible
   });
-  if (!visible || !event) return null;
+
+  // Instrumentation for the benchmark harness. Gated on `heavyReady` on
+  // purpose: the cheap chrome now renders on every step, so reporting here
+  // unconditionally would make `bodyMs` a duplicate of `cursorMs`. What the
+  // harness needs to know is when the expensive TREES landed.
+  useEffect(() => {
+    if (visible && event && heavyReady) {
+      networkSelectionStore.reportRendered(event.id);
+    }
+  }, [visible, event, heavyReady]);
+  if (!visible) return null;
   // Column: the detail body scrolls, the stepper stays pinned under it. The
   // body owns its scroll here (see `bodyOwnsScroll`) — inside JsModal's
-  // wrapper the footer would scroll away with the content.
+  // wrapper the footer would scroll away with the content. The spacer keeps
+  // the footer at the bottom on the rare frame where the ID resolves to
+  // nothing (cleared, aged out, and not saved).
   return /*#__PURE__*/_jsxs(View, {
     style: styles.detailRoot,
-    children: [/*#__PURE__*/_jsx(NetworkEventDetailView, {
+    children: [event ? /*#__PURE__*/_jsx(NetworkEventDetailView, {
       event: event,
       ignoredPatterns: ignoredPatternValues,
-      onTogglePattern: onTogglePattern
+      onTogglePattern: onTogglePattern,
+      showBodies: heavyReady
+    }) : /*#__PURE__*/_jsx(View, {
+      style: styles.detailBodyFallback
     }), /*#__PURE__*/_jsx(NetworkDetailStepper, {
-      eventId: event.id,
       paused: paused,
       filter: filter,
       ignoredPatterns: ignoredPatterns,
       isPro: isPro,
       fromSaved: fromSaved,
       savedSearch: savedSearch,
-      onSelect: onSelectEvent,
       applySafeAreaInset: applySafeAreaInset
     })]
   });
@@ -155,11 +193,38 @@ function NetworkModalInner({
     if (controlledPause) onPausedChange(value);else setPausedState(value);
   };
   const [filter, setFilter] = useState({});
-  // The SELECTION is UI state (an ID); the event object it points at is read
-  // live from the store by the detail screen — see useLiveNetworkEvent.
-  const [selectedEventId, setSelectedEventId] = useState(null);
+  /**
+   * The cursor lives in `networkSelectionStore`, and the root subscribes to
+   * the BOOLEAN only. That is the whole point: this component re-renders
+   * `JsModal` (which can never bail — its `header` prop is a fresh object
+   * every render), the entire header, and all five screens. None of them care
+   * WHICH request is selected, only THAT one is, and this flips twice a
+   * session instead of once per tap.
+   */
+  const hasSelection = useHasNetworkSelection();
   const [showFilterView, setShowFilterView] = useState(false);
   const [showSavedView, setShowSavedView] = useState(false);
+  const [showOverridesView, setShowOverridesView] = useState(false);
+  const [showHeaderMenu, setShowHeaderMenu] = useState(false);
+  /**
+   * Overrides are a DEVICE capability — a rule runs inside the app's own
+   * `fetch`/`XMLHttpRequest`, which the dashboard doesn't have.
+   *
+   * That doesn't mean the dashboard can't AUTHOR them: in `inline` mode the
+   * rule store runs as a mirror of the connected device (see
+   * `overrideRulesStore.enableRemoteMode`), so the screens below are the same
+   * ones the phone renders and every edit is forwarded. The one thing the
+   * dashboard never does is apply a rule to its own traffic —
+   * `disableEngine()` guarantees that.
+   */
+  const overridesAvailable = true;
+  /**
+   * A rule prefilled from a request the user was looking at, handed to the
+   * Overrides screen when it mounts. Lives here rather than in that screen
+   * because the request that seeds it is on a DIFFERENT screen — this is the
+   * one place both are in scope.
+   */
+  const [pendingOverrideDraft, setPendingOverrideDraft] = useState(null);
   const [activeTab, setActiveTab] = useState("filters");
   const [searchText, setSearchText] = useState("");
   const [isSearchActive, setIsSearchActive] = useState(false);
@@ -231,13 +296,32 @@ function NetworkModalInner({
 
   // Simple handlers - no useCallback needed per rule2
   const handleBack = () => {
-    setSelectedEventId(null);
+    networkSelectionStore.clear();
   };
 
   // Stable identity: this is passed down to the memoized list rows.
   const handleEventPress = useCallback(event => {
-    setSelectedEventId(event.id);
+    networkSelectionStore.select(event.id);
+  }, []);
+
+  /**
+   * "Custom…" in a request's Override section. Stable identity because the
+   * detail view is memoized on its props and an unstable callback would defeat
+   * the bail-out that keeps prev/next stepping cheap.
+   */
+  const handleOverridePress = useCallback((draft, ruleId) => {
+    setPendingOverrideDraft(ruleId ? {
+      ...draft,
+      id: ruleId
+    } : draft);
+    setShowOverridesView(true);
+    // Leave the detail view, or its header would sit on top of the editor.
+    networkSelectionStore.clear();
   }, []);
+
+  // Stable identity: the Overrides screen adopts the draft in an effect keyed
+  // on both, so an unstable callback would re-run it every render.
+  const handlePendingOverrideConsumed = useCallback(() => setPendingOverrideDraft(null), []);
   const handleSearch = text => {
     setSearchText(text);
     setFilter(prev => ({
@@ -294,19 +378,35 @@ function NetworkModalInner({
     }
 
     // Event detail view header
-    if (selectedEventId) {
+    if (hasSelection) {
       return /*#__PURE__*/_jsxs(ModalHeader, {
         children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
           onBack: handleBack
         }), /*#__PURE__*/_jsx(ModalHeader.Content, {
           title: "Request Details",
           centered: true
-        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
-          children: /*#__PURE__*/_jsx(NetworkDetailPinActions, {
-            eventId: selectedEventId,
+        }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
+          children: [overridesAvailable ? /*#__PURE__*/_jsx(NetworkOverrideHeaderButton, {
+            onOpen: handleOverridePress
+          }) : null, /*#__PURE__*/_jsx(NetworkDetailPinActions, {
             isPro: isPro,
             onUpgradePress: () => showUpgrade("saved")
-          })
+          })]
+        })]
+      });
+    }
+
+    // Overrides manager header.
+    if (showOverridesView && overridesAvailable) {
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: () => {
+            setShowOverridesView(false);
+            setPendingOverrideDraft(null);
+          }
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "Response Overrides",
+          centered: true
         })]
       });
     }
@@ -378,35 +478,26 @@ function NetworkModalInner({
             size: 14,
             color: macOSColors.text.secondary
           })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          "sentry-label": "ignore filter",
-          onPress: () => {
-            setShowFilterView(true);
-          },
-          style: [styles.headerActionButton, (filter.status || filter.method || filter.contentType) && styles.activeFilterButton],
-          children: /*#__PURE__*/_jsx(Filter, {
-            size: 14,
-            color: filter.status || filter.method || filter.contentType ? macOSColors.semantic.info : macOSColors.text.muted
-          })
-        }), /*#__PURE__*/_jsx(NetworkSavedButton, {
-          onPress: () => setShowSavedView(true)
-        }), /*#__PURE__*/_jsx(NetworkHeaderCopyButton, {
-          isPro: isPro,
-          filter: filter,
-          ignoredPatterns: ignoredPatterns,
-          copySettings: copySettings,
-          paused: paused,
-          onUpgradePress: () => showUpgrade("export")
-        }), /*#__PURE__*/_jsx(PowerToggleButton, {
+        }), overridesAvailable ? /*#__PURE__*/_jsx(NetworkOverridesButton, {
+          onPress: () => setShowOverridesView(true)
+        }) : null, /*#__PURE__*/_jsx(PowerToggleButton, {
           isEnabled: !paused,
           onToggle: () => setPaused(prev => !prev),
           accessibilityLabel: "Toggle network interception"
         }), /*#__PURE__*/_jsx(NetworkClearButton, {
           paused: paused
+        }), /*#__PURE__*/_jsx(NetworkHeaderMenuButton, {
+          onPress: () => setShowHeaderMenu(prev => !prev),
+          isOpen: showHeaderMenu,
+          hasIndicator: hasActiveFilter
         })]
       })]
     });
   };
+
+  // Surfaced on the ⋯ so moving Filters into the menu doesn't hide the one
+  // thing that button was communicating.
+  const hasActiveFilter = !!(filter.status || filter.method || filter.contentType);
   const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.network.modal();
   if (!visible) return null;
 
@@ -417,13 +508,12 @@ function NetworkModalInner({
   // same deal. The DETAIL screen owns it as well, so its prev/next footer
   // stays pinned instead of scrolling away with the body. Filter/copy still
   // use the wrapper.
-  const bodyOwnsScroll = selectedEventId != null || !showFilterView;
+  const bodyOwnsScroll = hasSelection || !showFilterView;
   const body = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.container,
       children: [/*#__PURE__*/_jsx(NetworkDetailScreen, {
-        visible: selectedEventId != null,
-        eventId: selectedEventId,
+        visible: hasSelection,
         paused: paused,
         ignoredPatternValues: ignoredPatternValues,
         onTogglePattern: toggleIgnoredPattern,
@@ -434,13 +524,12 @@ function NetworkModalInner({
         // the user came from — and therefore which one to step through.
         ,
         fromSaved: showSavedView,
-        savedSearch: savedSearch,
-        onSelectEvent: setSelectedEventId
+        savedSearch: savedSearch
         // Inline (desktop panel) has no home indicator to clear.
         ,
         applySafeAreaInset: !inline && modalMode === "bottomSheet"
       }), /*#__PURE__*/_jsx(NetworkFilterScreen, {
-        visible: showFilterView && activeTab === "filters" && !selectedEventId,
+        visible: showFilterView && activeTab === "filters" && !hasSelection,
         paused: paused,
         isPro: isPro,
         filter: filter,
@@ -450,15 +539,27 @@ function NetworkModalInner({
         onAddPattern: addIgnoredPattern,
         onTogglePatternMode: toggleIgnoredPatternMode
       }), /*#__PURE__*/_jsx(NetworkCopyScreen, {
-        visible: showFilterView && activeTab === "copy" && !selectedEventId,
+        visible: showFilterView && activeTab === "copy" && !hasSelection,
         paused: paused,
         isPro: isPro,
         filter: filter,
         ignoredPatterns: ignoredPatterns,
         settings: copySettings,
         onSettingsChange: setCopySettings
+      }), /*#__PURE__*/_jsx(NetworkOverridesScreen, {
+        visible: overridesAvailable && showOverridesView && !hasSelection && !showFilterView,
+        isPro: isPro,
+        onUpgradePress: () => showUpgrade("overrides"),
+        pendingDraft: pendingOverrideDraft,
+        onPendingConsumed: handlePendingOverrideConsumed
+        // Inline (desktop panel) has no home indicator to clear.
+        ,
+        applySafeAreaInset: !inline && modalMode === "bottomSheet"
       }), /*#__PURE__*/_jsx(NetworkSavedScreen, {
-        visible: showSavedView && selectedEventId == null && !showFilterView,
+        visible: showSavedView && !hasSelection && !showFilterView &&
+        // Overrides wins in the header branch too — the two must agree, or
+        // one screen renders under the other's header.
+        !(showOverridesView && overridesAvailable),
         isPro: isPro,
         copySettings: copySettings,
         search: savedSearch,
@@ -466,7 +567,7 @@ function NetworkModalInner({
         onEventPress: handleEventPress,
         onUpgradePress: () => showUpgrade("saved")
       }), /*#__PURE__*/_jsx(NetworkListScreen, {
-        visible: selectedEventId == null && !showFilterView && !showSavedView,
+        visible: !hasSelection && !showFilterView && !showSavedView && !(showOverridesView && overridesAvailable),
         paused: paused,
         filter: filter,
         ignoredPatterns: ignoredPatterns,
@@ -475,12 +576,51 @@ function NetworkModalInner({
         onEventPress: handleEventPress,
         onUpgradePress: () => showUpgrade("export")
       })]
-    }), /*#__PURE__*/_jsx(UpgradeModal, {
+    }), showHeaderMenu ? /*#__PURE__*/_jsxs(NetworkHeaderMenu, {
+      onClose: () => setShowHeaderMenu(false),
+      children: [/*#__PURE__*/_jsx(NetworkHeaderMenuItem, {
+        icon: /*#__PURE__*/_jsx(Filter, {
+          size: 14,
+          color: hasActiveFilter ? macOSColors.semantic.info : macOSColors.text.secondary
+        }),
+        label: "Filters",
+        detail: hasActiveFilter ? "Active" : undefined,
+        onPress: () => {
+          setShowHeaderMenu(false);
+          setActiveTab("filters");
+          setShowFilterView(true);
+        }
+      }), /*#__PURE__*/_jsx(NetworkHeaderMenuItem, {
+        icon: /*#__PURE__*/_jsx(Bookmark, {
+          size: 14,
+          color: macOSColors.text.secondary
+        }),
+        label: "Saved requests",
+        onPress: () => {
+          setShowHeaderMenu(false);
+          setShowSavedView(true);
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.menuCopyRow,
+        children: /*#__PURE__*/_jsx(NetworkHeaderCopyButton, {
+          isPro: isPro,
+          filter: filter,
+          ignoredPatterns: ignoredPatterns,
+          copySettings: copySettings,
+          paused: paused,
+          onUpgradePress: () => {
+            setShowHeaderMenu(false);
+            showUpgrade("export");
+          },
+          label: "Copy requests"
+        })
+      })]
+    }) : null, /*#__PURE__*/_jsx(UpgradeModal, {
       visible: showUpgradeModal,
       onClose: () => setShowUpgradeModal(false),
-      featureName: upgradeReason === "saved" ? "Saved Requests" : "Network Export",
-      description: upgradeReason === "saved" ? "Keep the requests that matter. Saved requests survive Clear, app restarts, and the 500-request history cap." : "Export network requests to share with your team, debug APIs, or feed into AI tools.",
-      benefits: upgradeReason === "saved" ? [`Save up to ${MAX_SAVED} requests (free keeps ${FREE_TIER_SAVED_LIMIT})`, "Failed requests stay put through a Clear", "Snapshots survive an app restart", "Export saved requests to teammates or AI assistants"] : ["Export to JSON, Markdown, or plain text", "Customizable copy presets (URLs only, LLM-ready, full data)", "Share request details with teammates", "Feed network data directly to AI assistants"]
+      featureName: upgradeReason === "saved" ? "Saved Requests" : upgradeReason === "overrides" ? "Response Overrides" : "Network Export",
+      description: upgradeReason === "saved" ? "Keep the requests that matter. Saved requests survive Clear, app restarts, and the 500-request history cap." : upgradeReason === "overrides" ? "Force any endpoint to fail, stall or return something else — no backend changes, no code changes. Free keeps one active rule." : "Export network requests to share with your team, debug APIs, or feed into AI tools.",
+      benefits: upgradeReason === "overrides" ? [`Run ${MAX_OVERRIDE_RULES} rules at once (free keeps ${FREE_TIER_OVERRIDE_LIMIT})`, "Force a 500, a 401 or an empty list in one tap", "Simulate offline, timeouts and slow connections", "Rules survive an app reload, so you can test the boot path"] : upgradeReason === "saved" ? [`Save up to ${MAX_SAVED} requests (free keeps ${FREE_TIER_SAVED_LIMIT})`, "Failed requests stay put through a Clear", "Snapshots survive an app restart", "Export saved requests to teammates or AI assistants"] : ["Export to JSON, Markdown, or plain text", "Customizable copy presets (URLs only, LLM-ready, full data)", "Share request details with teammates", "Feed network data directly to AI assistants"]
     })]
   });
 
@@ -524,6 +664,10 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: 0
   },
+  /** Holds the footer down when the selected ID resolves to no event. */
+  detailBodyFallback: {
+    flex: 1
+  },
   /** Inline shell — fills the host panel; `minHeight: 0` so the list's own
    * FlatList can scroll instead of stretching the column. */
   inlineRoot: {
@@ -559,6 +703,9 @@ const styles = StyleSheet.create({
     marginLeft: 6,
     padding: 4
   },
+  menuCopyRow: {
+    paddingHorizontal: 6
+  },
   headerActionButton: {
     width: 32,
     height: 32,

package/lib/module/network/components/NetworkNumberPrompt.js

@@ -0,0 +1,174 @@
+"use strict";
+
+import { useState } from "react";
+import { StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { absoluteFill, macOSColors } from "@buoy-gg/shared-ui";
+
+/**
+ * Entering one number, without the keyboard eating the screen.
+ *
+ * The custom status / delay / times fields used to be inline inputs sitting
+ * mid-form. Focusing one raises the keyboard, which on a phone covers roughly
+ * the bottom half of the tool — including, depending on where you'd scrolled,
+ * the field you were typing into and the Save button you needed next.
+ *
+ * Pinning the panel to the TOP is the fix, and it's the same one
+ * `StorageValueEditModal` reached for: a centred panel gets shoved up or
+ * covered the moment the field focuses, and a bottom sheet is simply
+ * underneath it. At the top it stays put and stays readable.
+ *
+ * Deliberately not a reuse of that component — this asks for a number and
+ * nothing else. It has no type inference, no raw-JSON escape hatch and no
+ * shape-preservation rules, so borrowing 400 lines to avoid writing 100 would
+ * be the wrong trade.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NetworkNumberPrompt({
+  title,
+  hint,
+  value,
+  placeholder = "Number",
+  min,
+  max,
+  onSubmit,
+  onCancel
+}) {
+  const [text, setText] = useState(value != null ? String(value) : "");
+  const submit = () => {
+    const trimmed = text.trim();
+    if (!trimmed) {
+      onSubmit(null);
+      return;
+    }
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed)) {
+      onSubmit(null);
+      return;
+    }
+    // Clamped here rather than accepted-then-silently-changed: a field that
+    // takes 999 and stores 599 is a field that lies.
+    let next = parsed;
+    if (min != null) next = Math.max(min, next);
+    if (max != null) next = Math.min(max, next);
+    onSubmit(next);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.overlay,
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      style: styles.backdrop,
+      activeOpacity: 1,
+      onPress: onCancel,
+      "sentry-label": "ignore dismiss number prompt"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.panel,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        children: title
+      }), /*#__PURE__*/_jsx(TextInput, {
+        style: styles.input,
+        value: text,
+        onChangeText: setText,
+        placeholder: placeholder,
+        placeholderTextColor: macOSColors.text.muted,
+        keyboardType: "number-pad",
+        autoFocus: true,
+        selectTextOnFocus: true,
+        onSubmitEditing: submit,
+        returnKeyType: "done",
+        "sentry-label": "ignore number prompt input",
+        accessibilityLabel: title
+      }), hint ? /*#__PURE__*/_jsx(Text, {
+        style: styles.hint,
+        children: hint
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: styles.actions,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onCancel,
+          "sentry-label": "ignore cancel number prompt",
+          style: [styles.button, styles.cancelButton],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.cancelText,
+            children: "Cancel"
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: submit,
+          "sentry-label": "ignore save number prompt",
+          style: [styles.button, styles.saveButton],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.saveText,
+            children: "Set"
+          })
+        })]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  overlay: {
+    ...absoluteFill,
+    zIndex: 40
+  },
+  backdrop: {
+    ...absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.6)"
+  },
+  panel: {
+    marginHorizontal: 12,
+    marginTop: 12,
+    padding: 14,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: macOSColors.border.hover,
+    backgroundColor: macOSColors.background.card,
+    gap: 10
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: "700",
+    color: macOSColors.text.primary
+  },
+  input: {
+    backgroundColor: macOSColors.background.input,
+    borderWidth: 1,
+    borderColor: macOSColors.border.input,
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16,
+    fontWeight: "700",
+    color: macOSColors.text.primary
+  },
+  hint: {
+    fontSize: 10,
+    color: macOSColors.text.muted
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 8
+  },
+  button: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 6,
+    alignItems: "center",
+    borderWidth: 1
+  },
+  cancelButton: {
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.base
+  },
+  cancelText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.secondary
+  },
+  saveButton: {
+    borderColor: macOSColors.semantic.info,
+    backgroundColor: `${macOSColors.semantic.info}22`
+  },
+  saveText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: macOSColors.semantic.info
+  }
+});