@buoy-gg/network 7.0.10 → 7.0.11

package/lib/commonjs/network/components/NetworkDetailStepper.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkDetailStepper = void 0;
+var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _useNetworkEventList = require("../hooks/useNetworkEventList");
+var _useNetworkSaved = require("../hooks/useNetworkSaved");
+var _withPinnedFirst = require("../utils/withPinnedFirst");
+var _selectSavedEvents = require("../utils/selectSavedEvents");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Previous/Next footer for the request DETAIL screen — step through requests
+ * without bouncing back to the list.
+ *
+ * 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.
+ *
+ * The order it steps through is EXACTLY what the list screen renders —
+ * `[...pinned, ...rest]` off the same `useNetworkEventList` + `splitPinned`
+ * derivation — so "Next" always lands on the row below the one the user
+ * tapped. Because the live filter is an input, typing in the search box or
+ * flipping a status chip re-scopes the stepper in place; the counter is
+ * "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.
+ */
+
+const NetworkDetailStepper = exports.NetworkDetailStepper = /*#__PURE__*/(0, _react.memo)(function NetworkDetailStepper({
+  eventId,
+  paused,
+  filter,
+  ignoredPatterns,
+  isPro,
+  fromSaved,
+  savedSearch,
+  onSelect
+}) {
+  const {
+    visibleEvents
+  } = (0, _useNetworkEventList.useNetworkEventList)({
+    filter,
+    ignoredPatterns,
+    paused,
+    isPro
+  });
+  const {
+    pinnedEvents,
+    pinnedLiveIds,
+    savedRecords
+  } = (0, _useNetworkSaved.useNetworkSaved)();
+  const ordered = (0, _react.useMemo)(() => {
+    if (fromSaved) {
+      return (0, _selectSavedEvents.selectSavedEvents)(savedRecords, isPro, savedSearch).events;
+    }
+    // Same split the list screen does — pins render above the FlatList, so
+    // they come first here too.
+    const {
+      pinned,
+      rest
+    } = (0, _withPinnedFirst.splitPinned)(visibleEvents, pinnedEvents, pinnedLiveIds);
+    return pinned.length === 0 ? rest : [...pinned, ...rest];
+  }, [fromSaved, savedRecords, savedSearch, isPro, visibleEvents, pinnedEvents, pinnedLiveIds]);
+  const index = ordered.findIndex(event => event.id === eventId);
+
+  // Not in the list at all: the filter changed under it while it was open, it
+  // aged past the 500-request cap, or it is a saved snapshot with no live twin.
+  // There is no coherent "next" in that state, so show no footer rather than a
+  // counter that lies.
+  if (index < 0) return null;
+
+  // Both lists are newest-first, so "Previous" walks toward the NEWER request —
+  // the same direction as scrolling up, which is what the arrow means here.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+    currentIndex: index,
+    totalItems: ordered.length,
+    itemLabel: "Request",
+    onPrevious: () => {
+      const target = ordered[index - 1];
+      if (target) onSelect(target.id);
+    },
+    onNext: () => {
+      const target = ordered[index + 1];
+      if (target) onSelect(target.id);
+    }
+  });
+});

package/lib/commonjs/network/utils/selectSavedEvents.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectSavedEvents = selectSavedEvents;
+var _filterNetworkEvents = require("./filterNetworkEvents");
+var _networkSavedStore = require("./networkSavedStore");
+/**
+ * The SAVED screen's visible list, as a pure function.
+ *
+ * Two places need the exact same list: the screen that renders it
+ * (`NetworkSavedScreen`) and the detail footer that steps through it
+ * (`NetworkDetailStepper`). If they derived it independently, "Next" would
+ * eventually disagree with the row below — the same drift `withPinnedFirst`
+ * exists to prevent for the live list.
+ */
+
+function selectSavedEvents(savedRecords, isPro, search) {
+  /**
+   * 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.
+   */
+  const limit = isPro ? _networkSavedStore.MAX_SAVED : _networkSavedStore.FREE_TIER_SAVED_LIMIT;
+  const unlocked = savedRecords.slice(0, limit);
+  const events = unlocked.map(record => record.event);
+  return {
+    events: search ? (0, _filterNetworkEvents.filterNetworkEvents)(events, {
+      searchText: search
+    }) : events,
+    lockedCount: savedRecords.length - unlocked.length
+  };
+}

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

@@ -0,0 +1,88 @@
+"use strict";
+
+/**
+ * Previous/Next footer for the request DETAIL screen — step through requests
+ * without bouncing back to the list.
+ *
+ * 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.
+ *
+ * The order it steps through is EXACTLY what the list screen renders —
+ * `[...pinned, ...rest]` off the same `useNetworkEventList` + `splitPinned`
+ * derivation — so "Next" always lands on the row below the one the user
+ * tapped. Because the live filter is an input, typing in the search box or
+ * flipping a status chip re-scopes the stepper in place; the counter is
+ * "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.
+ */
+
+import { memo, useMemo } from "react";
+import { EventStepperFooter } from "@buoy-gg/shared-ui";
+import { useNetworkEventList } from "../hooks/useNetworkEventList";
+import { useNetworkSaved } from "../hooks/useNetworkSaved";
+import { splitPinned } from "../utils/withPinnedFirst";
+import { selectSavedEvents } from "../utils/selectSavedEvents";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NetworkDetailStepper = /*#__PURE__*/memo(function NetworkDetailStepper({
+  eventId,
+  paused,
+  filter,
+  ignoredPatterns,
+  isPro,
+  fromSaved,
+  savedSearch,
+  onSelect
+}) {
+  const {
+    visibleEvents
+  } = useNetworkEventList({
+    filter,
+    ignoredPatterns,
+    paused,
+    isPro
+  });
+  const {
+    pinnedEvents,
+    pinnedLiveIds,
+    savedRecords
+  } = useNetworkSaved();
+  const ordered = useMemo(() => {
+    if (fromSaved) {
+      return selectSavedEvents(savedRecords, isPro, savedSearch).events;
+    }
+    // Same split the list screen does — pins render above the FlatList, so
+    // they come first here too.
+    const {
+      pinned,
+      rest
+    } = splitPinned(visibleEvents, pinnedEvents, pinnedLiveIds);
+    return pinned.length === 0 ? rest : [...pinned, ...rest];
+  }, [fromSaved, savedRecords, savedSearch, isPro, visibleEvents, pinnedEvents, pinnedLiveIds]);
+  const index = ordered.findIndex(event => event.id === eventId);
+
+  // Not in the list at all: the filter changed under it while it was open, it
+  // aged past the 500-request cap, or it is a saved snapshot with no live twin.
+  // There is no coherent "next" in that state, so show no footer rather than a
+  // counter that lies.
+  if (index < 0) return null;
+
+  // Both lists are newest-first, so "Previous" walks toward the NEWER request —
+  // the same direction as scrolling up, which is what the arrow means here.
+  return /*#__PURE__*/_jsx(EventStepperFooter, {
+    currentIndex: index,
+    totalItems: ordered.length,
+    itemLabel: "Request",
+    onPrevious: () => {
+      const target = ordered[index - 1];
+      if (target) onSelect(target.id);
+    },
+    onNext: () => {
+      const target = ordered[index + 1];
+      if (target) onSelect(target.id);
+    }
+  });
+});

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

@@ -0,0 +1,30 @@
+"use strict";
+
+/**
+ * The SAVED screen's visible list, as a pure function.
+ *
+ * Two places need the exact same list: the screen that renders it
+ * (`NetworkSavedScreen`) and the detail footer that steps through it
+ * (`NetworkDetailStepper`). If they derived it independently, "Next" would
+ * eventually disagree with the row below — the same drift `withPinnedFirst`
+ * exists to prevent for the live list.
+ */
+
+import { filterNetworkEvents } from "./filterNetworkEvents";
+import { FREE_TIER_SAVED_LIMIT, MAX_SAVED } from "./networkSavedStore";
+export function selectSavedEvents(savedRecords, isPro, search) {
+  /**
+   * 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.
+   */
+  const limit = isPro ? MAX_SAVED : FREE_TIER_SAVED_LIMIT;
+  const unlocked = savedRecords.slice(0, limit);
+  const events = unlocked.map(record => record.event);
+  return {
+    events: search ? filterNetworkEvents(events, {
+      searchText: search
+    }) : events,
+    lockedCount: savedRecords.length - unlocked.length
+  };
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Previous/Next footer for the request DETAIL screen — step through requests
+ * without bouncing back to the list.
+ *
+ * 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.
+ *
+ * The order it steps through is EXACTLY what the list screen renders —
+ * `[...pinned, ...rest]` off the same `useNetworkEventList` + `splitPinned`
+ * derivation — so "Next" always lands on the row below the one the user
+ * tapped. Because the live filter is an input, typing in the search box or
+ * flipping a status chip re-scopes the stepper in place; the counter is
+ * "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.
+ */
+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[];
+    isPro: boolean;
+    /** Detail was opened from the Saved screen — step through THAT list. */
+    fromSaved: boolean;
+    /** The Saved screen's search box (lifted to the modal root so both agree). */
+    savedSearch: string;
+    onSelect: (eventId: string) => void;
+}
+export declare const NetworkDetailStepper: import("react").NamedExoticComponent<NetworkDetailStepperProps>;
+export {};
+//# sourceMappingURL=NetworkDetailStepper.d.ts.map

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

@@ -0,0 +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"}

package/lib/typescript/network/utils/selectSavedEvents.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The SAVED screen's visible list, as a pure function.
+ *
+ * Two places need the exact same list: the screen that renders it
+ * (`NetworkSavedScreen`) and the detail footer that steps through it
+ * (`NetworkDetailStepper`). If they derived it independently, "Next" would
+ * eventually disagree with the row below — the same drift `withPinnedFirst`
+ * exists to prevent for the live list.
+ */
+import type { NetworkEvent } from "../types";
+import { type SavedNetworkRecord } from "./networkSavedStore";
+export interface SavedEventSelection {
+    /** Unlocked saves, minus anything the search box excludes. */
+    events: NetworkEvent[];
+    /** Saves past the tier ceiling — rendered as the upgrade banner, not rows. */
+    lockedCount: number;
+}
+export declare function selectSavedEvents(savedRecords: readonly SavedNetworkRecord[], isPro: boolean, search: string): SavedEventSelection;
+//# sourceMappingURL=selectSavedEvents.d.ts.map

package/lib/typescript/network/utils/selectSavedEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectSavedEvents.d.ts","sourceRoot":"","sources":["../../../../src/network/utils/selectSavedEvents.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,mBAAmB;IAClC,8DAA8D;IAC9D,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,SAAS,kBAAkB,EAAE,EAC3C,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,MAAM,GACb,mBAAmB,CAarB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/network",
-  "version": "7.0.10",
+  "version": "7.0.11",
   "description": "In-app network inspector for React Native — requests, responses, timing & errors live, with GraphQL operation parsing. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.10"
+    "@buoy-gg/shared-ui": "^7.0.11"
   },
   "peerDependencies": {
     "react": "*",