@buoy-gg/network 7.0.41 → 7.0.42

package/lib/commonjs/network/components/NetworkDetailScreen.web.js

@@ -1,101 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NetworkDetailScreen = NetworkDetailScreen;
-var _react = require("react");
-var _useLiveNetworkEvent = require("../hooks/useLiveNetworkEvent");
-var _useNetworkSelection = require("../hooks/useNetworkSelection");
-var _networkSelectionStore = require("../utils/networkSelectionStore");
-var _NetworkEventDetailView = require("./NetworkEventDetailView.web");
-var _NetworkDetailStepper = require("./NetworkDetailStepper.web");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * NetworkDetailScreen.web — DOM twin of the `NetworkDetailScreen` screen
- * component inside NetworkModal.tsx (the native detail screen is private to
- * the modal; web hosts compose their own shell, so the screen is exported
- * here as the reusable piece).
- *
- * Same rule4 contract and the same two-cursor render strategy as native:
- *
- *  - Hooks run unconditionally; the component returns null when not visible.
- *  - The detail chrome renders at the IMMEDIATE selection
- *    (`useSelectedNetworkEventId`) — every step, no delay — while the
- *    expensive JSON body trees wait for the settled cursor
- *    (`useNetworkBodyEventId`): `showBodies` is false exactly while the
- *    prev/next cursor is still moving, so a burst of taps renders the request
- *    you land on and none of the ones you flew past.
- *  - The ID resolves through `useLiveNetworkEvent` so a request opened while
- *    pending picks up its response/error in place.
- *  - `reportRendered` still fires after the trees commit — benchmark
- *    instrumentation, same gating as native.
- *
- * All hooks and the selection store are the platform-free modules native
- * uses — REUSED, not forked. Layout: the detail body scrolls, the stepper
- * stays pinned under it (the body owns its scroll — see the native comment);
- * the spacer holds the footer down when the ID resolves to nothing.
- *
- * @platform React DOM Web
- */
-
-function NetworkDetailScreen({
-  visible,
-  paused,
-  ignoredPatternValues,
-  onTogglePattern,
-  isPro,
-  filter,
-  ignoredPatterns,
-  fromSaved,
-  savedSearch,
-  applySafeAreaInset
-}) {
-  const eventId = (0, _useNetworkSelection.useSelectedNetworkEventId)();
-  const settledId = (0, _useNetworkSelection.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 tap snapshot.
-  const event = (0, _useLiveNetworkEvent.useLiveNetworkEvent)(eventId, {
-    paused: paused || !visible
-  });
-
-  // Instrumentation for the benchmark harness — reports when the expensive
-  // TREES landed (gated on `heavyReady`, same rationale as native).
-  (0, _react.useEffect)(() => {
-    if (visible && event && heavyReady) {
-      _networkSelectionStore.networkSelectionStore.reportRendered(event.id);
-    }
-  }, [visible, event, heavyReady]);
-  if (!visible) return null;
-  // Column: the detail body scrolls, the stepper stays pinned under it.
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      flex: 1,
-      minHeight: 0
-    },
-    children: [event ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView, {
-      event: event,
-      ignoredPatterns: ignoredPatternValues,
-      onTogglePattern: onTogglePattern,
-      showBodies: heavyReady
-    }) :
-    /*#__PURE__*/
-    /* Holds the footer down when the selected ID resolves to no event. */
-    (0, _jsxRuntime.jsx)("div", {
-      style: {
-        flex: 1
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkDetailStepper.NetworkDetailStepper, {
-      paused: paused,
-      filter: filter,
-      ignoredPatterns: ignoredPatterns,
-      isPro: isPro,
-      fromSaved: fromSaved,
-      savedSearch: savedSearch,
-      applySafeAreaInset: applySafeAreaInset
-    })]
-  });
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.NetworkDetailScreen=NetworkDetailScreen;var _react=require("react");var _useLiveNetworkEvent=require("../hooks/useLiveNetworkEvent");var _useNetworkSelection=require("../hooks/useNetworkSelection");var _networkSelectionStore=require("../utils/networkSelectionStore");var _NetworkEventDetailView=require("./NetworkEventDetailView.web");var _NetworkDetailStepper=require("./NetworkDetailStepper.web");var _jsxRuntime=require("react/jsx-runtime");function NetworkDetailScreen({visible:t,paused:n,ignoredPatternValues:i,onTogglePattern:s,isPro:a,filter:l,ignoredPatterns:u,fromSaved:v,savedSearch:w,applySafeAreaInset:c}){const r=(0,_useNetworkSelection.useSelectedNetworkEventId)();const d=(0,_useNetworkSelection.useNetworkBodyEventId)();const o=r!=null&&r===d;const e=(0,_useLiveNetworkEvent.useLiveNetworkEvent)(r,{paused:n||!t});(0,_react.useEffect)(()=>{if(t&&e&&o){_networkSelectionStore.networkSelectionStore.reportRendered(e.id)}},[t,e,o]);if(!t)return null;return(0,_jsxRuntime.jsxs)("div",{style:{display:"flex",flexDirection:"column",flex:1,minHeight:0},children:[e?(0,_jsxRuntime.jsx)(_NetworkEventDetailView.NetworkEventDetailView,{event:e,ignoredPatterns:i,onTogglePattern:s,showBodies:o}):(0,_jsxRuntime.jsx)("div",{style:{flex:1}}),(0,_jsxRuntime.jsx)(_NetworkDetailStepper.NetworkDetailStepper,{paused:n,filter:l,ignoredPatterns:u,isPro:a,fromSaved:v,savedSearch:w,applySafeAreaInset:c})]})}

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

@@ -1,108 +1 @@
-"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 _useNetworkSelection = require("../hooks/useNetworkSelection");
-var _networkSelectionStore = require("../utils/networkSelectionStore");
-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): 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.
- *
- * 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.
- */
-
-/** Stable identities — the store is a singleton, so these never need to change. */
-const stepPrevious = () => _networkSelectionStore.networkSelectionStore.step(-1);
-const stepNext = () => _networkSelectionStore.networkSelectionStore.step(1);
-const NetworkDetailStepper = exports.NetworkDetailStepper = /*#__PURE__*/(0, _react.memo)(function NetworkDetailStepper({
-  paused,
-  filter,
-  ignoredPatterns,
-  isPro,
-  fromSaved,
-  savedSearch,
-  applySafeAreaInset
-}) {
-  const {
-    visibleEvents
-  } = (0, _useNetworkEventList.useNetworkEventList)({
-    filter,
-    ignoredPatterns,
-    paused,
-    isPro
-  });
-  const {
-    pinnedEvents,
-    pinnedLiveIds,
-    savedRecords
-  } = (0, _useNetworkSaved.useNetworkSaved)();
-  const savedLimit = (0, _sharedUi.useLimit)("network.saved");
-  const ordered = (0, _react.useMemo)(() => {
-    if (fromSaved) {
-      return (0, _selectSavedEvents.selectSavedEvents)(savedRecords, savedLimit, 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]);
-
-  // Publish the navigable order. `setIds` re-anchors the cursor BY ID and
-  // no-ops when the ids are unchanged, so this is safe to run every render.
-  (0, _react.useEffect)(() => {
-    _networkSelectionStore.networkSelectionStore.setIds((0, _networkSelectionStore.toSelectionIds)(ordered));
-  }, [ordered]);
-  const {
-    index,
-    total
-  } = (0, _useNetworkSelection.useNetworkCursor)();
-
-  // 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: total,
-    itemLabel: "Request",
-    applySafeAreaInset: applySafeAreaInset,
-    onPrevious: stepPrevious,
-    onNext: stepNext,
-    variant: "night"
-  });
-});
+"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 _useNetworkSelection=require("../hooks/useNetworkSelection");var _networkSelectionStore=require("../utils/networkSelectionStore");var _withPinnedFirst=require("../utils/withPinnedFirst");var _selectSavedEvents=require("../utils/selectSavedEvents");var _jsxRuntime=require("react/jsx-runtime");const stepPrevious=()=>_networkSelectionStore.networkSelectionStore.step(-1);const stepNext=()=>_networkSelectionStore.networkSelectionStore.step(1);const NetworkDetailStepper=exports.NetworkDetailStepper=(0,_react.memo)(function N({paused:c,filter:d,ignoredPatterns:p,isPro:e,fromSaved:t,savedSearch:r,applySafeAreaInset:S}){const{visibleEvents:s}=(0,_useNetworkEventList.useNetworkEventList)({filter:d,ignoredPatterns:p,paused:c,isPro:e});const{pinnedEvents:o,pinnedLiveIds:n,savedRecords:i}=(0,_useNetworkSaved.useNetworkSaved)();const k=(0,_sharedUi.useLimit)("network.saved");const u=(0,_react.useMemo)(()=>{if(t){return(0,_selectSavedEvents.selectSavedEvents)(i,k,r).events}const{pinned:v,rest:l}=(0,_withPinnedFirst.splitPinned)(s,o,n);return v.length===0?l:[...v,...l]},[t,i,r,e,s,o,n]);(0,_react.useEffect)(()=>{_networkSelectionStore.networkSelectionStore.setIds((0,_networkSelectionStore.toSelectionIds)(u))},[u]);const{index:a,total:w}=(0,_useNetworkSelection.useNetworkCursor)();if(a<0)return null;return(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:a,totalItems:w,itemLabel:"Request",applySafeAreaInset:S,onPrevious:stepPrevious,onNext:stepNext,variant:"night"})});

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

@@ -1,298 +1 @@
-"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 _useNetworkSelection = require("../hooks/useNetworkSelection");
-var _networkSelectionStore = require("../utils/networkSelectionStore");
-var _withPinnedFirst = require("../utils/withPinnedFirst");
-var _selectSavedEvents = require("../utils/selectSavedEvents");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * NetworkDetailStepper.web — DOM twin of NetworkDetailStepper.tsx.
- *
- * Previous/Next footer for the request DETAIL screen. The data layer is
- * REUSED, not forked — `useNetworkEventList`, `useNetworkSaved`,
- * `useNetworkCursor`, `networkSelectionStore`, `splitPinned` and
- * `selectSavedEvents` are all platform-free — so the navigable order is
- * EXACTLY what the list screen renders (`[...pinned, ...rest]`), re-scoped in
- * place by the live filter, and detail opened from the Saved screen steps
- * through the saved list instead. It is its own leaf for the same reason as
- * native: it is the only part of the detail screen that needs the event LIST,
- * so a request arriving re-renders this footer and nothing else.
- *
- * shared-ui RN chrome is replicated as DOM with provenance:
- *  - `EventStepperFooter` — inlined DOM twin below, values from
- *    shared/src/ui/components/EventStepperFooter.tsx (macOSColors verbatim;
- *    the native -2px shadow → an equivalent CSS box-shadow).
- *  - `applySafeAreaInset` maps `useSafeAreaInsets().bottom` →
- *    `env(safe-area-inset-bottom)` (0 on desktop webviews, the real inset on
- *    phone webviews).
- *
- * @platform React DOM Web
- */
-
-// =============================
-// Native palette (provenance)
-// =============================
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */const macOSColors = {
-  background: {
-    base: "#0A0A0C",
-    card: "#1A1A1C"
-  },
-  border: {
-    default: "#2D2D2F"
-  },
-  text: {
-    primary: "#F5F5F7",
-    secondary: "#A1A1A6",
-    muted: "#8E8E93"
-  }
-};
-
-// =============================
-// Inline lucide icons (shared-ui icons are lucide re-exports)
-// =============================
-
-function Svg({
-  size = 14,
-  color = "currentColor",
-  children
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: color,
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    style: {
-      flexShrink: 0,
-      display: "block"
-    },
-    children: children
-  });
-}
-const ChevronLeft = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m15 18-6-6 6-6"
-  })
-});
-const ChevronRight = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m9 18 6-6-6-6"
-  })
-});
-
-// =============================
-// EventStepperFooter DOM twin (shared/src/ui/components/EventStepperFooter.tsx)
-// =============================
-
-const EventStepperFooter = /*#__PURE__*/(0, _react.memo)(function EventStepperFooter({
-  currentIndex,
-  totalItems,
-  onPrevious,
-  onNext,
-  itemLabel = "Event",
-  subtitle,
-  applySafeAreaInset = true
-}) {
-  // Don't render if there's only one or no items (native).
-  if (totalItems <= 1) return null;
-  const isFirstItem = currentIndex === 0;
-  const isLastItem = currentIndex === totalItems - 1;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      ...footerStyles.footer,
-      paddingBottom: applySafeAreaInset ? "calc(12px + env(safe-area-inset-bottom, 0px))" : 12
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      type: "button",
-      onClick: onPrevious,
-      disabled: isFirstItem,
-      style: {
-        ...footerStyles.navButton,
-        ...(isFirstItem ? footerStyles.navButtonDisabled : null)
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronLeft, {
-        size: 20,
-        color: isFirstItem ? macOSColors.text.muted : macOSColors.text.primary
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...footerStyles.navButtonText,
-          ...(isFirstItem ? footerStyles.navButtonTextDisabled : null)
-        },
-        children: "Previous"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: footerStyles.counterContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        style: footerStyles.counterText,
-        children: [itemLabel, " ", currentIndex + 1, " of ", totalItems]
-      }), subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: footerStyles.subtitleText,
-        children: subtitle
-      }) : null]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      type: "button",
-      onClick: onNext,
-      disabled: isLastItem,
-      style: {
-        ...footerStyles.navButton,
-        ...(isLastItem ? footerStyles.navButtonDisabled : null)
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...footerStyles.navButtonText,
-          ...(isLastItem ? footerStyles.navButtonTextDisabled : null)
-        },
-        children: "Next"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRight, {
-        size: 20,
-        color: isLastItem ? macOSColors.text.muted : macOSColors.text.primary
-      })]
-    })]
-  });
-});
-
-// Values mirror the native StyleSheet block 1:1.
-const footerStyles = {
-  footer: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "12px 16px 12px",
-    backgroundColor: macOSColors.background.base,
-    borderTop: `1px solid ${macOSColors.border.default}`,
-    // Native: shadowOffset 0/-2, opacity 0.1, radius 4.
-    boxShadow: "0 -2px 4px rgba(0, 0, 0, 0.1)",
-    flexShrink: 0
-  },
-  navButton: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    padding: "8px 12px",
-    borderRadius: 6,
-    backgroundColor: macOSColors.background.card,
-    minWidth: 100,
-    boxSizing: "border-box",
-    justifyContent: "center",
-    border: "none",
-    cursor: "pointer",
-    margin: 0
-  },
-  navButtonDisabled: {
-    opacity: 0.3,
-    cursor: "default"
-  },
-  navButtonText: {
-    fontSize: 12,
-    fontWeight: 600,
-    color: macOSColors.text.primary,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    textTransform: "uppercase"
-  },
-  navButtonTextDisabled: {
-    color: macOSColors.text.muted
-  },
-  counterContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center"
-  },
-  counterText: {
-    fontSize: 14,
-    fontWeight: 700,
-    color: macOSColors.text.primary,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    textTransform: "uppercase"
-  },
-  subtitleText: {
-    fontSize: 11,
-    color: macOSColors.text.secondary,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    marginTop: 2
-  }
-};
-
-// =============================
-// Stepper (logic mirrors the native file 1:1)
-// =============================
-
-/** Stable identities — the store is a singleton, so these never need to change. */
-const stepPrevious = () => _networkSelectionStore.networkSelectionStore.step(-1);
-const stepNext = () => _networkSelectionStore.networkSelectionStore.step(1);
-const NetworkDetailStepper = exports.NetworkDetailStepper = /*#__PURE__*/(0, _react.memo)(function NetworkDetailStepper({
-  paused,
-  filter,
-  ignoredPatterns,
-  isPro,
-  fromSaved,
-  savedSearch,
-  applySafeAreaInset
-}) {
-  const {
-    visibleEvents
-  } = (0, _useNetworkEventList.useNetworkEventList)({
-    filter,
-    ignoredPatterns,
-    paused,
-    isPro
-  });
-  const {
-    pinnedEvents,
-    pinnedLiveIds,
-    savedRecords
-  } = (0, _useNetworkSaved.useNetworkSaved)();
-  const savedLimit = (0, _sharedUi.useLimit)("network.saved");
-  const ordered = (0, _react.useMemo)(() => {
-    if (fromSaved) {
-      return (0, _selectSavedEvents.selectSavedEvents)(savedRecords, savedLimit, savedSearch).events;
-    }
-    // Same split the list screen does — pins render above the list, 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]);
-
-  // Publish the navigable order. `setIds` re-anchors the cursor BY ID and
-  // no-ops when the ids are unchanged, so this is safe to run every render.
-  (0, _react.useEffect)(() => {
-    _networkSelectionStore.networkSelectionStore.setIds((0, _networkSelectionStore.toSelectionIds)(ordered));
-  }, [ordered]);
-  const {
-    index,
-    total
-  } = (0, _useNetworkSelection.useNetworkCursor)();
-
-  // Not in the list at all (filter changed under it, aged past the cap, or a
-  // saved snapshot with no live twin) — 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.
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(EventStepperFooter, {
-    currentIndex: index,
-    totalItems: total,
-    itemLabel: "Request",
-    applySafeAreaInset: applySafeAreaInset,
-    onPrevious: stepPrevious,
-    onNext: stepNext
-  });
-});
+"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 _useNetworkSelection=require("../hooks/useNetworkSelection");var _networkSelectionStore=require("../utils/networkSelectionStore");var _withPinnedFirst=require("../utils/withPinnedFirst");var _selectSavedEvents=require("../utils/selectSavedEvents");var _jsxRuntime=require("react/jsx-runtime");const macOSColors={background:{base:"#0A0A0C",card:"#1A1A1C"},border:{default:"#2D2D2F"},text:{primary:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93"}};function Svg({size:e=14,color:t="currentColor",children:o}){return(0,_jsxRuntime.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:t,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:o})}const ChevronLeft=e=>(0,_jsxRuntime.jsx)(Svg,{...e,children:(0,_jsxRuntime.jsx)("path",{d:"m15 18-6-6 6-6"})});const ChevronRight=e=>(0,_jsxRuntime.jsx)(Svg,{...e,children:(0,_jsxRuntime.jsx)("path",{d:"m9 18 6-6-6-6"})});const EventStepperFooter=(0,_react.memo)(function e({currentIndex:t,totalItems:o,onPrevious:l,onNext:i,itemLabel:a="Event",subtitle:s,applySafeAreaInset:u=true}){if(o<=1)return null;const n=t===0;const r=t===o-1;return(0,_jsxRuntime.jsxs)("div",{style:{...footerStyles.footer,paddingBottom:u?"calc(12px + env(safe-area-inset-bottom, 0px))":12},children:[(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:l,disabled:n,style:{...footerStyles.navButton,...n?footerStyles.navButtonDisabled:null},children:[(0,_jsxRuntime.jsx)(ChevronLeft,{size:20,color:n?macOSColors.text.muted:macOSColors.text.primary}),(0,_jsxRuntime.jsx)("span",{style:{...footerStyles.navButtonText,...n?footerStyles.navButtonTextDisabled:null},children:"Previous"})]}),(0,_jsxRuntime.jsxs)("div",{style:footerStyles.counterContainer,children:[(0,_jsxRuntime.jsxs)("span",{style:footerStyles.counterText,children:[a," ",t+1," of ",o]}),s?(0,_jsxRuntime.jsx)("span",{style:footerStyles.subtitleText,children:s}):null]}),(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:i,disabled:r,style:{...footerStyles.navButton,...r?footerStyles.navButtonDisabled:null},children:[(0,_jsxRuntime.jsx)("span",{style:{...footerStyles.navButtonText,...r?footerStyles.navButtonTextDisabled:null},children:"Next"}),(0,_jsxRuntime.jsx)(ChevronRight,{size:20,color:r?macOSColors.text.muted:macOSColors.text.primary})]})]})});const footerStyles={footer:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:"12px 16px 12px",backgroundColor:macOSColors.background.base,borderTop:`1px solid ${macOSColors.border.default}`,boxShadow:"0 -2px 4px rgba(0, 0, 0, 0.1)",flexShrink:0},navButton:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:6,padding:"8px 12px",borderRadius:6,backgroundColor:macOSColors.background.card,minWidth:100,boxSizing:"border-box",justifyContent:"center",border:"none",cursor:"pointer",margin:0},navButtonDisabled:{opacity:.3,cursor:"default"},navButtonText:{fontSize:12,fontWeight:600,color:macOSColors.text.primary,fontFamily:"ui-monospace, Menlo, monospace",textTransform:"uppercase"},navButtonTextDisabled:{color:macOSColors.text.muted},counterContainer:{display:"flex",flexDirection:"column",alignItems:"center"},counterText:{fontSize:14,fontWeight:700,color:macOSColors.text.primary,fontFamily:"ui-monospace, Menlo, monospace",textTransform:"uppercase"},subtitleText:{fontSize:11,color:macOSColors.text.secondary,fontFamily:"ui-monospace, Menlo, monospace",marginTop:2}};const stepPrevious=()=>_networkSelectionStore.networkSelectionStore.step(-1);const stepNext=()=>_networkSelectionStore.networkSelectionStore.step(1);const NetworkDetailStepper=exports.NetworkDetailStepper=(0,_react.memo)(function e({paused:t,filter:o,ignoredPatterns:l,isPro:i,fromSaved:a,savedSearch:s,applySafeAreaInset:u}){const{visibleEvents:n}=(0,_useNetworkEventList.useNetworkEventList)({filter:o,ignoredPatterns:l,paused:t,isPro:i});const{pinnedEvents:r,pinnedLiveIds:c,savedRecords:d}=(0,_useNetworkSaved.useNetworkSaved)();const f=(0,_sharedUi.useLimit)("network.saved");const p=(0,_react.useMemo)(()=>{if(a){return(0,_selectSavedEvents.selectSavedEvents)(d,f,s).events}const{pinned:v,rest:m}=(0,_withPinnedFirst.splitPinned)(n,r,c);return v.length===0?m:[...v,...m]},[a,d,s,i,n,r,c]);(0,_react.useEffect)(()=>{_networkSelectionStore.networkSelectionStore.setIds((0,_networkSelectionStore.toSelectionIds)(p))},[p]);const{index:x,total:b}=(0,_useNetworkSelection.useNetworkCursor)();if(x<0)return null;return(0,_jsxRuntime.jsx)(EventStepperFooter,{currentIndex:x,totalItems:b,itemLabel:"Request",applySafeAreaInset:u,onPrevious:stepPrevious,onNext:stepNext})});