@buoy-gg/network 7.0.11 → 7.0.13

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

@@ -10,8 +10,11 @@ import { NetworkCopySettingsView, DEFAULT_COPY_SETTINGS } from "./NetworkCopySet
 import { NetworkHeaderBadges, NetworkClearButton, NetworkDetailPinActions, NetworkHeaderCopyButton, NetworkSavedButton } from "./NetworkHeaderLive";
 import { NetworkListScreen } from "./NetworkListScreen";
 import { NetworkSavedScreen } from "./NetworkSavedScreen";
+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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // ============================================================================
@@ -23,22 +26,76 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 
 function NetworkDetailScreen({
   visible,
-  eventId,
   paused,
   ignoredPatternValues,
-  onTogglePattern
+  onTogglePattern,
+  isPro,
+  filter,
+  ignoredPatterns,
+  fromSaved,
+  savedSearch,
+  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;
-  return /*#__PURE__*/_jsx(NetworkEventDetailView, {
-    event: event,
-    ignoredPatterns: ignoredPatternValues,
-    onTogglePattern: onTogglePattern
+
+  // 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. 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: [event ? /*#__PURE__*/_jsx(NetworkEventDetailView, {
+      event: event,
+      ignoredPatterns: ignoredPatternValues,
+      onTogglePattern: onTogglePattern,
+      showBodies: heavyReady
+    }) : /*#__PURE__*/_jsx(View, {
+      style: styles.detailBodyFallback
+    }), /*#__PURE__*/_jsx(NetworkDetailStepper, {
+      paused: paused,
+      filter: filter,
+      ignoredPatterns: ignoredPatterns,
+      isPro: isPro,
+      fromSaved: fromSaved,
+      savedSearch: savedSearch,
+      applySafeAreaInset: applySafeAreaInset
+    })]
   });
 }
 function NetworkFilterScreen({
@@ -131,14 +188,24 @@ 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 [activeTab, setActiveTab] = useState("filters");
   const [searchText, setSearchText] = useState("");
   const [isSearchActive, setIsSearchActive] = useState(false);
+  // The Saved screen's search box lives HERE, not in that screen, because the
+  // detail footer steps through the same list the user was just looking at —
+  // and the Saved screen is unmounted while a detail is open.
+  const [savedSearch, setSavedSearch] = useState("");
   const searchInputRef = useRef(null);
   // Ignored domains/URL patterns live in a shared, persisted singleton store
   // (@buoy-gg/shared-ui) so the Network tool and the Events tool stay in sync.
@@ -203,12 +270,12 @@ 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);
   }, []);
   const handleSearch = text => {
     setSearchText(text);
@@ -223,8 +290,13 @@ function NetworkModalInner({
       status: prev.status === status ? undefined : status
     }));
   };
-  const handleModeChange = _mode => {
-    // Mode changes handled by JsModal
+
+  // JsModal owns the mode; the only thing this modal needs it for is the
+  // detail footer's bottom inset — a bottom sheet sits on the home indicator,
+  // a floating window does not (same call StorageModalWithTabs makes).
+  const [modalMode, setModalMode] = useState("bottomSheet");
+  const handleModeChange = mode => {
+    setModalMode(mode);
   };
   useEffect(() => {
     if (isSearchActive) {
@@ -261,7 +333,7 @@ function NetworkModalInner({
     }
 
     // Event detail view header
-    if (selectedEventId) {
+    if (hasSelection) {
       return /*#__PURE__*/_jsxs(ModalHeader, {
         children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
           onBack: handleBack
@@ -270,7 +342,6 @@ function NetworkModalInner({
           centered: true
         }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
           children: /*#__PURE__*/_jsx(NetworkDetailPinActions, {
-            eventId: selectedEventId,
             isPro: isPro,
             onUpgradePress: () => showUpgrade("saved")
           })
@@ -381,19 +452,31 @@ function NetworkModalInner({
   // it — inside JsModal's ScrollView wrapper every row mounts, which at
   // the 500-event cap measured 17 JS FPS / 133% CPU / 1.4GB; see
   // NetworkListScreen). The Saved screen is a FlatList too, so it takes the
-  // same deal. Detail/filter/copy still use the wrapper.
-  const listOwnsScroll = selectedEventId == null && !showFilterView;
+  // 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 = 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
+        onTogglePattern: toggleIgnoredPattern,
+        isPro: isPro,
+        filter: filter,
+        ignoredPatterns: ignoredPatterns
+        // `showSavedView` is what Back returns to, so it is also which list
+        // the user came from — and therefore which one to step through.
+        ,
+        fromSaved: showSavedView,
+        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,
@@ -403,7 +486,7 @@ 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,
@@ -411,13 +494,15 @@ function NetworkModalInner({
         settings: copySettings,
         onSettingsChange: setCopySettings
       }), /*#__PURE__*/_jsx(NetworkSavedScreen, {
-        visible: showSavedView && selectedEventId == null && !showFilterView,
+        visible: showSavedView && !hasSelection && !showFilterView,
         isPro: isPro,
         copySettings: copySettings,
+        search: savedSearch,
+        onSearchChange: setSavedSearch,
         onEventPress: handleEventPress,
         onUpgradePress: () => showUpgrade("saved")
       }), /*#__PURE__*/_jsx(NetworkListScreen, {
-        visible: selectedEventId == null && !showFilterView && !showSavedView,
+        visible: !hasSelection && !showFilterView && !showSavedView,
         paused: paused,
         filter: filter,
         ignoredPatterns: ignoredPatterns,
@@ -459,7 +544,7 @@ function NetworkModalInner({
     enablePersistence: true,
     initialMode: "bottomSheet",
     enableGlitchEffects: true,
-    disableScrollWrapper: listOwnsScroll,
+    disableScrollWrapper: bodyOwnsScroll,
     styles: {},
     children: body
   });
@@ -469,6 +554,16 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: macOSColors.background.base
   },
+  /** Detail = scrolling body + pinned stepper footer. `minHeight: 0` so the
+   * body's ScrollView scrolls instead of stretching the column. */
+  detailRoot: {
+    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: {

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

@@ -23,9 +23,9 @@ import { Bookmark, CopyButton, Search, macOSColors } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
-import { filterNetworkEvents } from "../utils/filterNetworkEvents";
+import { selectSavedEvents } from "../utils/selectSavedEvents";
 import { useNetworkSaved } from "../hooks/useNetworkSaved";
-import { FREE_TIER_SAVED_LIMIT, MAX_SAVED } from "../utils/networkSavedStore";
+import { FREE_TIER_SAVED_LIMIT } from "../utils/networkSavedStore";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const keyExtractor = item => item.id;
 function EmptyState() {
@@ -47,6 +47,8 @@ export function NetworkSavedScreen({
   visible,
   isPro,
   copySettings,
+  search: searchProp,
+  onSearchChange,
   onEventPress,
   onUpgradePress
 }) {
@@ -56,22 +58,17 @@ export function NetworkSavedScreen({
     toggleSave,
     clearSaved
   } = useNetworkSaved();
-  const [search, setSearch] = useState("");
+  const [searchState, setSearchState] = useState("");
+  const controlled = searchProp != null && onSearchChange != null;
+  const search = controlled ? searchProp : searchState;
+  const setSearch = controlled ? onSearchChange : setSearchState;
   if (!visible) return null;
 
-  /**
-   * A downgrade (or a limit change) can leave a free user holding more saves
-   * than the free tier allows. Rather than deleting their data, the overflow
-   * is LOCKED — oldest first, so the newest saves stay reachable — and the
-   * banner offers the upgrade that unlocks it.
-   */
-  const limit = isPro ? MAX_SAVED : FREE_TIER_SAVED_LIMIT;
-  const unlocked = savedRecords.slice(0, limit);
-  const lockedCount = savedRecords.length - unlocked.length;
-  const events = unlocked.map(record => record.event);
-  const filtered = search ? filterNetworkEvents(events, {
-    searchText: search
-  }) : events;
+  // Shared with the detail footer, so "Next" can't disagree with the row below.
+  const {
+    events: filtered,
+    lockedCount
+  } = selectSavedEvents(savedRecords, isPro, search);
   const handleLongPress = event => {
     toggleSave(event);
   };

package/lib/module/network/hooks/useNetworkSelection.js

@@ -0,0 +1,46 @@
+"use strict";
+
+/**
+ * Narrow subscriptions to the prev/next cursor (`networkSelectionStore`).
+ *
+ * One hook per consumer, each returning the SMALLEST value that consumer
+ * renders — that is the whole point of moving the cursor into a store. The
+ * modal root takes `useHasNetworkSelection()` (a boolean that flips twice a
+ * session), so a step no longer re-renders `JsModal`, the header and all five
+ * screens; the footer and the body take the parts that actually change.
+ */
+
+import { useSyncExternalStore } from "react";
+import { networkSelectionStore } from "../utils/networkSelectionStore";
+const subscribe = onChange => networkSelectionStore.subscribe(onChange);
+const getState = () => networkSelectionStore.getState();
+
+/**
+ * Is ANYTHING selected — i.e. is the detail screen up?
+ *
+ * `useSyncExternalStore` compares the selector's result, so the root only
+ * re-renders when this boolean flips, not on every step.
+ */
+export function useHasNetworkSelection() {
+  return useSyncExternalStore(subscribe, () => getState().selectedId != null, () => getState().selectedId != null);
+}
+
+/** Where the USER is. Moves synchronously on tap — footer, header pin actions. */
+export function useSelectedNetworkEventId() {
+  return useSyncExternalStore(subscribe, () => getState().selectedId, () => getState().selectedId);
+}
+
+/** What the BODY may render. Lags `selectedId` — see networkSelectionStore. */
+export function useNetworkBodyEventId() {
+  return useSyncExternalStore(subscribe, () => getState().bodyId, () => getState().bodyId);
+}
+
+/** Cursor position + list length, for the "REQUEST n OF m" counter. */
+export function useNetworkCursor() {
+  const index = useSyncExternalStore(subscribe, () => getState().index, () => getState().index);
+  const total = useSyncExternalStore(subscribe, () => getState().ids.length, () => getState().ids.length);
+  return {
+    index,
+    total
+  };
+}

package/lib/module/network/utils/networkSelectionStore.js

@@ -0,0 +1,188 @@
+"use strict";
+
+/**
+ * Which request the detail view is showing, and where it sits in the list —
+ * the prev/next CURSOR.
+ *
+ * ## Why this is a store and not `useState` in the modal
+ *
+ * It used to be `useState` in `NetworkModalInner`. Every tap on Previous/Next
+ * therefore dirtied the modal ROOT, which re-rendered `JsModal` (1833 lines,
+ * nine useStates, animations/gestures/persistence — and it can never bail out,
+ * because its `header` prop is a fresh object literal every render), the whole
+ * header, and all five screens. None of them care which request is selected;
+ * they only care THAT one is.
+ *
+ * This is the same argument `NetworkModal`'s own header comment already makes
+ * about network events ("with the subscription here, 15 events re-rendered
+ * JsModal + every header button 15×"). Stepping is that same class of
+ * high-frequency churn, and it was sitting in the same wrong place. Now the
+ * root subscribes to `hasSelection` — a boolean that flips twice a session —
+ * while the footer, the body and the header's pin actions subscribe to the
+ * parts they actually render.
+ *
+ * ## The three cursors
+ *
+ * `selectedId` is where the USER is. It moves on the tap, synchronously.
+ *
+ * `bodyId` is what the detail body is allowed to render, and it deliberately
+ * LAGS: drawing a request means handing its payload to the virtualized data
+ * viewer to flatten, and that has no business blocking the next tap. It
+ * catches up only once the selection has held still for `settleMs`, so a
+ * burst of taps renders the request you land on and none of the ones you flew
+ * past. (`useDeferredValue` was tried here first and is the wrong tool — it
+ * lowers the priority of that work without preventing it, so every settled
+ * step still queued a flatten and each one delayed the touch behind it.)
+ *
+ * `renderedId` is what actually made it to the screen, reported by the detail
+ * screen after commit. Nothing in the product reads it; it exists so the
+ * benchmark harness can measure "time until request N was really painted"
+ * separately from "time until the cursor reached N".
+ */
+
+/**
+ * How long the selection must hold still before the body renders it. Short
+ * enough that a single step reads as immediate (the footer and header have
+ * already moved), long enough that a burst collapses to one render.
+ */
+export const DEFAULT_SETTLE_MS = 120;
+class NetworkSelectionStore {
+  ids = [];
+  index = -1;
+  selectedId = null;
+  bodyId = null;
+  renderedId = null;
+  settleMs = DEFAULT_SETTLE_MS;
+  settleTimer = null;
+  subscribers = new Set();
+  snapshot = this.buildSnapshot();
+  buildSnapshot() {
+    return {
+      ids: this.ids,
+      index: this.index,
+      selectedId: this.selectedId,
+      bodyId: this.bodyId,
+      renderedId: this.renderedId
+    };
+  }
+
+  /**
+   * One immutable snapshot per mutation, so subscribers can identity-compare
+   * and `useSyncExternalStore` stays happy.
+   */
+  emit() {
+    this.snapshot = this.buildSnapshot();
+    for (const subscriber of this.subscribers) subscriber(this.snapshot);
+  }
+  getState() {
+    return this.snapshot;
+  }
+  subscribe(subscriber) {
+    this.subscribers.add(subscriber);
+    return () => {
+      this.subscribers.delete(subscriber);
+    };
+  }
+
+  /**
+   * Publish the navigable order. Called by the stepper whenever its derived
+   * list changes (filter, search, pins, new requests arriving).
+   *
+   * The cursor is re-anchored BY ID, not by position: the live list is
+   * newest-first and new requests are prepended, so holding an index would
+   * silently slide the selection onto a different request every time one
+   * landed.
+   */
+  setIds(ids) {
+    const sameIds = ids.length === this.ids.length && ids.every((id, i) => id === this.ids[i]);
+    if (sameIds) return;
+    this.ids = ids;
+    this.index = this.selectedId == null ? -1 : ids.indexOf(this.selectedId);
+    this.emit();
+  }
+  select(id) {
+    if (id === this.selectedId) return;
+    this.selectedId = id;
+    this.index = id == null ? -1 : this.ids.indexOf(id);
+    this.scheduleBody(id);
+    this.emit();
+  }
+  clear() {
+    this.select(null);
+  }
+
+  /**
+   * Move the cursor. O(1) — the whole reason `index` is stored rather than
+   * re-derived with a `findIndex` on every render.
+   *
+   * Returns the id it landed on, or null if the move was out of bounds (the
+   * footer disables its arrows at the ends, but the benchmark driver calls
+   * this directly and needs to know when it has run off the end).
+   */
+  step(delta) {
+    if (this.index < 0) return null;
+    const next = this.index + delta;
+    if (next < 0 || next >= this.ids.length) return null;
+    const id = this.ids[next];
+    this.selectedId = id;
+    this.index = next;
+    this.scheduleBody(id);
+    this.emit();
+    return id;
+  }
+
+  /**
+   * Opening and closing skip the settle delay: there is no in-flight render to
+   * protect on a null↔id transition, and waiting there just reads as a hang.
+   * Only id → id steps debounce.
+   */
+  scheduleBody(id) {
+    if (this.settleTimer != null) {
+      clearTimeout(this.settleTimer);
+      this.settleTimer = null;
+    }
+    if (id == null || this.bodyId == null || this.settleMs <= 0) {
+      this.bodyId = id;
+      return;
+    }
+    this.settleTimer = setTimeout(() => {
+      this.settleTimer = null;
+      if (this.bodyId === this.selectedId) return;
+      this.bodyId = this.selectedId;
+      this.emit();
+    }, this.settleMs);
+  }
+
+  /** Benchmark toggle — `?settle=0` measures the gate's contribution. */
+  setSettleMs(ms) {
+    this.settleMs = Math.max(0, ms);
+  }
+  getSettleMs() {
+    return this.settleMs;
+  }
+
+  /** Reported by the detail screen after commit. Instrumentation only. */
+  reportRendered(id) {
+    if (id === this.renderedId) return;
+    this.renderedId = id;
+    this.emit();
+  }
+
+  /** Test/bench helper — drop all cursor state without touching the events. */
+  reset() {
+    if (this.settleTimer != null) clearTimeout(this.settleTimer);
+    this.settleTimer = null;
+    this.ids = [];
+    this.index = -1;
+    this.selectedId = null;
+    this.bodyId = null;
+    this.renderedId = null;
+    this.emit();
+  }
+}
+export const networkSelectionStore = new NetworkSelectionStore();
+
+/** Convenience for publishing an event list as the navigable order. */
+export function toSelectionIds(events) {
+  return events.map(event => event.id);
+}

package/lib/typescript/index.d.ts

@@ -20,6 +20,7 @@ export { useLiveNetworkEvent } from "./network/hooks/useLiveNetworkEvent";
 export { useNetworkBadgeCounts } from "./network/hooks/useNetworkBadgeCounts";
 export { useNetworkSaved, type UseNetworkSavedResult, } from "./network/hooks/useNetworkSaved";
 export { splitPinned, type PinnedSplit } from "./network/utils/withPinnedFirst";
+export { networkSelectionStore, DEFAULT_SETTLE_MS, type NetworkSelectionState, } from "./network/utils/networkSelectionStore";
 export { TickProvider, useTickEveryMinute } from "./network/hooks/useTickEveryMinute";
 export { formatBytes, formatDuration, formatHttpStatus, } from "./network/utils/formatting";
 export type { NetworkEvent, NetworkStats, NetworkFilter, NetworkEventStatus, NetworkInsight, IgnoredPattern, IgnoredPatternMatchMode, } from "./network/types";

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAOhE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAClF,YAAY,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,wCAAwC,CAAC;AAKhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAI9E,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,GAC3B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAKtF,OAAO,EACL,WAAW,EACX,cAAc,EACd,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAKpC,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,uBAAuB,GACxB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,EACxB,YAAY,GACb,MAAM,oBAAoB,CAAC;AAK5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EACL,2BAA2B,EAC3B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,oCAAoC,CAAC;AAO5C,gBAAgB;AAChB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE;;;GAGG;AACH,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,gBAAgB;AAChB,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAOhE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAClF,YAAY,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,wCAAwC,CAAC;AAKhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAI9E,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,GAC3B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAIhF,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,KAAK,qBAAqB,GAC3B,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAKtF,OAAO,EACL,WAAW,EACX,cAAc,EACd,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAKpC,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,uBAAuB,GACxB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,EACxB,YAAY,GACb,MAAM,oBAAoB,CAAC;AAK5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EACL,2BAA2B,EAC3B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,oCAAoC,CAAC;AAO5C,gBAAgB;AAChB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE;;;GAGG;AACH,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,gBAAgB;AAChB,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC"}

package/lib/typescript/network/components/NetworkDetailStepper.d.ts

@@ -5,8 +5,8 @@
  * It is its OWN leaf (rule3) because it is the only part of the detail screen
  * that needs the event LIST. Subscribing here keeps the request stream out of
  * the detail body's render path, which is the expensive subtree (headers,
- * bodies, JSON viewers, diff views): a request arriving re-renders this
- * ~30-node footer and nothing else.
+ * bodies, JSON viewers): a request arriving re-renders this ~30-node footer
+ * and nothing else.
  *
  * The order it steps through is EXACTLY what the list screen renders —
  * `[...pinned, ...rest]` off the same `useNetworkEventList` + `splitPinned`
@@ -16,12 +16,16 @@
  * "request N of <what the list is showing>", never "N of everything ever
  * captured". Detail opened from the Saved screen steps through the SAVED
  * list instead (with its own search applied), for the same reason.
+ *
+ * This component OWNS the navigable order but not the cursor: it publishes
+ * the ordered ids into `networkSelectionStore` and reads the cursor back.
+ * That split is what makes stepping O(1) (the store keeps the index, so
+ * there is no `findIndex` per render) and what lets the benchmark harness
+ * drive `step(+1)` directly without going through the UI.
  */
 import { type IgnoredPattern } from "@buoy-gg/shared-ui";
 import type { NetworkFilter } from "../types";
 interface NetworkDetailStepperProps {
-    /** The request currently on screen. */
-    eventId: string;
     paused: boolean;
     filter: NetworkFilter;
     ignoredPatterns: readonly IgnoredPattern[];
@@ -30,7 +34,8 @@ interface NetworkDetailStepperProps {
     fromSaved: boolean;
     /** The Saved screen's search box (lifted to the modal root so both agree). */
     savedSearch: string;
-    onSelect: (eventId: string) => void;
+    /** Only a bottom sheet sits on the home indicator — see NetworkModal. */
+    applySafeAreaInset: boolean;
 }
 export declare const NetworkDetailStepper: import("react").NamedExoticComponent<NetworkDetailStepperProps>;
 export {};

package/lib/typescript/network/components/NetworkDetailStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkDetailStepper.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkDetailStepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,UAAU,CAAC;AAM5D,UAAU,yBAAyB;IACjC,uCAAuC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,aAAa,CAAC;IACtB,eAAe,EAAE,SAAS,cAAc,EAAE,CAAC;IAC3C,KAAK,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,SAAS,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,oBAAoB,iEAiE/B,CAAC"}
+{"version":3,"file":"NetworkDetailStepper.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkDetailStepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAGH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,UAAU,CAAC;AAW5D,UAAU,yBAAyB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,aAAa,CAAC;IACtB,eAAe,EAAE,SAAS,cAAc,EAAE,CAAC;IAC3C,KAAK,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,SAAS,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,yEAAyE;IACzE,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAMD,eAAO,MAAM,oBAAoB,iEAiE/B,CAAC"}

package/lib/typescript/network/components/NetworkEventDetailView.d.ts

@@ -3,11 +3,46 @@ interface NetworkEventDetailViewProps {
     event: NetworkEvent;
     ignoredPatterns?: Set<string>;
     onTogglePattern?: (pattern: string) => void;
+    /**
+     * Mount the request/response BODY trees.
+     *
+     * False while the prev/next cursor is still moving. The body trees are ~93%
+     * of a step's cost (measured: 647ms/step with them, 43ms without, at a 150ms
+     * tap interval over 64KB payloads), and they are the only part of this view
+     * that can't keep up with a thumb. Everything else renders on every step.
+     *
+     * Note the mechanism: this doesn't skip the tree so much as ensure it gets
+     * unmounted by the next tap before its chunked flatten completes. Stepping
+     * therefore costs ~14ms/step instead of ~500ms, and exactly one tree
+     * flattens for real — the one you stop on.
+     *
+     * Defaults true so the Events tool — which renders this same view without a
+     * cursor — is unaffected.
+     */
+    showBodies?: boolean;
 }
 /**
  * Detailed inspector rendering request/response metadata for a single network event. Designed to
  * mimic Sentry’s layout with collapsible sections, diff views, and quick copy affordances.
+ *
+ * MEMOIZED with profiling evidence, not by reflex. Two render paths hit this
+ * subtree with unchanged props:
+ *
+ *  1. `useLiveNetworkEvent` re-subscribes when the selected ID changes, and
+ *     `subscribeToEvents` replays immediately — so every step through the
+ *     prev/next footer committed the SAME event object twice, rendering this
+ *     whole tree (expanded DataViewer included) a second time for nothing.
+ *  2. Any modal-root state change (header search, mode toggle) re-renders the
+ *     shell, and the detail body has nothing to do with it.
+ *
+ * Both props besides `event` are stable by construction — `values` is memoized
+ * in `useIgnoredPatterns` and `toggle` is module-scope there — so the bail-out
+ * actually fires.
+ *
+ * Measured baseline (js-top, example-dev-build, 5 steps over 109–324KB
+ * pokeapi responses): 307ms of React work across 5 steps ≈ 61ms of JS per
+ * step. Case 1 alone is half of that, since it re-ran the whole body render.
  */
-export declare function NetworkEventDetailView({ event, ignoredPatterns, onTogglePattern, }: NetworkEventDetailViewProps): import("react").JSX.Element;
+export declare const NetworkEventDetailView: import("react").NamedExoticComponent<NetworkEventDetailViewProps>;
 export {};
 //# sourceMappingURL=NetworkEventDetailView.d.ts.map

package/lib/typescript/network/components/NetworkEventDetailView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkEventDetailView.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkEventDetailView.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,UAAU,CAAC;AAqB7D,UAAU,2BAA2B;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAmQD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,eAA2B,EAC3B,eAA0B,GAC3B,EAAE,2BAA2B,+BAse7B"}
+{"version":3,"file":"NetworkEventDetailView.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkEventDetailView.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,UAAU,CAAC;AA0B7D,UAAU,2BAA2B;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;;;;;;;;;;;;;OAeG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4QD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,sBAAsB,mEA6fjC,CAAC"}