@buoy-gg/network 7.0.41 → 7.0.42

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

@@ -1,97 +1 @@
-"use strict";
-
-/**
- * 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
- */
-
-import { useEffect } from "react";
-import { useLiveNetworkEvent } from "../hooks/useLiveNetworkEvent";
-import { useNetworkBodyEventId, useSelectedNetworkEventId } from "../hooks/useNetworkSelection";
-import { networkSelectionStore } from "../utils/networkSelectionStore";
-import { NetworkEventDetailView } from "./NetworkEventDetailView.web";
-import { NetworkDetailStepper } from "./NetworkDetailStepper.web";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function NetworkDetailScreen({
-  visible,
-  paused,
-  ignoredPatternValues,
-  onTogglePattern,
-  isPro,
-  filter,
-  ignoredPatterns,
-  fromSaved,
-  savedSearch,
-  applySafeAreaInset
-}) {
-  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 tap snapshot.
-  const event = useLiveNetworkEvent(eventId, {
-    paused: paused || !visible
-  });
-
-  // Instrumentation for the benchmark harness — reports when the expensive
-  // TREES landed (gated on `heavyReady`, same rationale as native).
-  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.
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      flex: 1,
-      minHeight: 0
-    },
-    children: [event ? /*#__PURE__*/_jsx(NetworkEventDetailView, {
-      event: event,
-      ignoredPatterns: ignoredPatternValues,
-      onTogglePattern: onTogglePattern,
-      showBodies: heavyReady
-    }) :
-    /*#__PURE__*/
-    /* Holds the footer down when the selected ID resolves to no event. */
-    _jsx("div", {
-      style: {
-        flex: 1
-      }
-    }), /*#__PURE__*/_jsx(NetworkDetailStepper, {
-      paused: paused,
-      filter: filter,
-      ignoredPatterns: ignoredPatterns,
-      isPro: isPro,
-      fromSaved: fromSaved,
-      savedSearch: savedSearch,
-      applySafeAreaInset: applySafeAreaInset
-    })]
-  });
-}
+"use strict";import{useEffect as v}from"react";import{useLiveNetworkEvent as w}from"../hooks/useLiveNetworkEvent";import{useNetworkBodyEventId as x,useSelectedNetworkEventId as S}from"../hooks/useNetworkSelection";import{networkSelectionStore as k}from"../utils/networkSelectionStore";import{NetworkEventDetailView as y}from"./NetworkEventDetailView.web";import{NetworkDetailStepper as N}from"./NetworkDetailStepper.web";import{jsx as n,jsxs as g}from"react/jsx-runtime";export function NetworkDetailScreen({visible:t,paused:s,ignoredPatternValues:i,onTogglePattern:d,isPro:f,filter:l,ignoredPatterns:a,fromSaved:m,savedSearch:p,applySafeAreaInset:c}){const r=S();const u=x();const o=r!=null&&r===u;const e=w(r,{paused:s||!t});v(()=>{if(t&&e&&o){k.reportRendered(e.id)}},[t,e,o]);if(!t)return null;return g("div",{style:{display:"flex",flexDirection:"column",flex:1,minHeight:0},children:[e?n(y,{event:e,ignoredPatterns:i,onTogglePattern:d,showBodies:o}):n("div",{style:{flex:1}}),n(N,{paused:s,filter:l,ignoredPatterns:a,isPro:f,fromSaved:m,savedSearch:p,applySafeAreaInset:c})]})}

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

@@ -1,104 +1 @@
-"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): 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.
- */
-
-import { memo, useEffect, useMemo } from "react";
-import { EventStepperFooter, useLimit } from "@buoy-gg/shared-ui";
-import { useNetworkEventList } from "../hooks/useNetworkEventList";
-import { useNetworkSaved } from "../hooks/useNetworkSaved";
-import { useNetworkCursor } from "../hooks/useNetworkSelection";
-import { networkSelectionStore, toSelectionIds } from "../utils/networkSelectionStore";
-import { splitPinned } from "../utils/withPinnedFirst";
-import { selectSavedEvents } from "../utils/selectSavedEvents";
-import { jsx as _jsx } from "react/jsx-runtime";
-/** Stable identities — the store is a singleton, so these never need to change. */
-const stepPrevious = () => networkSelectionStore.step(-1);
-const stepNext = () => networkSelectionStore.step(1);
-export const NetworkDetailStepper = /*#__PURE__*/memo(function NetworkDetailStepper({
-  paused,
-  filter,
-  ignoredPatterns,
-  isPro,
-  fromSaved,
-  savedSearch,
-  applySafeAreaInset
-}) {
-  const {
-    visibleEvents
-  } = useNetworkEventList({
-    filter,
-    ignoredPatterns,
-    paused,
-    isPro
-  });
-  const {
-    pinnedEvents,
-    pinnedLiveIds,
-    savedRecords
-  } = useNetworkSaved();
-  const savedLimit = useLimit("network.saved");
-  const ordered = useMemo(() => {
-    if (fromSaved) {
-      return 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
-    } = 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.
-  useEffect(() => {
-    networkSelectionStore.setIds(toSelectionIds(ordered));
-  }, [ordered]);
-  const {
-    index,
-    total
-  } = 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__*/_jsx(EventStepperFooter, {
-    currentIndex: index,
-    totalItems: total,
-    itemLabel: "Request",
-    applySafeAreaInset: applySafeAreaInset,
-    onPrevious: stepPrevious,
-    onNext: stepNext,
-    variant: "night"
-  });
-});
+"use strict";import{memo as x,useEffect as N,useMemo as S}from"react";import{EventStepperFooter as E,useLimit as I}from"@buoy-gg/shared-ui";import{useNetworkEventList as L}from"../hooks/useNetworkEventList";import{useNetworkSaved as b}from"../hooks/useNetworkSaved";import{useNetworkCursor as g}from"../hooks/useNetworkSelection";import{networkSelectionStore as e,toSelectionIds as j}from"../utils/networkSelectionStore";import{splitPinned as D}from"../utils/withPinnedFirst";import{selectSavedEvents as P}from"../utils/selectSavedEvents";import{jsx as R}from"react/jsx-runtime";const h=()=>e.step(-1);const q=()=>e.step(1);export const NetworkDetailStepper=x(function y({paused:f,filter:l,ignoredPatterns:v,isPro:t,fromSaved:o,savedSearch:r,applySafeAreaInset:a}){const{visibleEvents:s}=L({filter:l,ignoredPatterns:v,paused:f,isPro:t});const{pinnedEvents:n,pinnedLiveIds:i,savedRecords:p}=b();const k=I("network.saved");const m=S(()=>{if(o){return P(p,k,r).events}const{pinned:c,rest:d}=D(s,n,i);return c.length===0?d:[...c,...d]},[o,p,r,t,s,n,i]);N(()=>{e.setIds(j(m))},[m]);const{index:u,total:w}=g();if(u<0)return null;return R(E,{currentIndex:u,totalItems:w,itemLabel:"Request",applySafeAreaInset:a,onPrevious:h,onNext:q,variant:"night"})});

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

@@ -1,296 +1 @@
-"use strict";
-
-/**
- * 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
- */
-
-import { memo, useEffect, useMemo } from "react";
-import { useLimit } from "@buoy-gg/shared-ui";
-import { useNetworkEventList } from "../hooks/useNetworkEventList";
-import { useNetworkSaved } from "../hooks/useNetworkSaved";
-import { useNetworkCursor } from "../hooks/useNetworkSelection";
-import { networkSelectionStore, toSelectionIds } from "../utils/networkSelectionStore";
-import { splitPinned } from "../utils/withPinnedFirst";
-import { selectSavedEvents } from "../utils/selectSavedEvents";
-
-// =============================
-// Native palette (provenance)
-// =============================
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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__*/_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__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m15 18-6-6 6-6"
-  })
-});
-const ChevronRight = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m9 18 6-6-6-6"
-  })
-});
-
-// =============================
-// EventStepperFooter DOM twin (shared/src/ui/components/EventStepperFooter.tsx)
-// =============================
-
-const EventStepperFooter = /*#__PURE__*/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__*/_jsxs("div", {
-    style: {
-      ...footerStyles.footer,
-      paddingBottom: applySafeAreaInset ? "calc(12px + env(safe-area-inset-bottom, 0px))" : 12
-    },
-    children: [/*#__PURE__*/_jsxs("button", {
-      type: "button",
-      onClick: onPrevious,
-      disabled: isFirstItem,
-      style: {
-        ...footerStyles.navButton,
-        ...(isFirstItem ? footerStyles.navButtonDisabled : null)
-      },
-      children: [/*#__PURE__*/_jsx(ChevronLeft, {
-        size: 20,
-        color: isFirstItem ? macOSColors.text.muted : macOSColors.text.primary
-      }), /*#__PURE__*/_jsx("span", {
-        style: {
-          ...footerStyles.navButtonText,
-          ...(isFirstItem ? footerStyles.navButtonTextDisabled : null)
-        },
-        children: "Previous"
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      style: footerStyles.counterContainer,
-      children: [/*#__PURE__*/_jsxs("span", {
-        style: footerStyles.counterText,
-        children: [itemLabel, " ", currentIndex + 1, " of ", totalItems]
-      }), subtitle ? /*#__PURE__*/_jsx("span", {
-        style: footerStyles.subtitleText,
-        children: subtitle
-      }) : null]
-    }), /*#__PURE__*/_jsxs("button", {
-      type: "button",
-      onClick: onNext,
-      disabled: isLastItem,
-      style: {
-        ...footerStyles.navButton,
-        ...(isLastItem ? footerStyles.navButtonDisabled : null)
-      },
-      children: [/*#__PURE__*/_jsx("span", {
-        style: {
-          ...footerStyles.navButtonText,
-          ...(isLastItem ? footerStyles.navButtonTextDisabled : null)
-        },
-        children: "Next"
-      }), /*#__PURE__*/_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.step(-1);
-const stepNext = () => networkSelectionStore.step(1);
-export const NetworkDetailStepper = /*#__PURE__*/memo(function NetworkDetailStepper({
-  paused,
-  filter,
-  ignoredPatterns,
-  isPro,
-  fromSaved,
-  savedSearch,
-  applySafeAreaInset
-}) {
-  const {
-    visibleEvents
-  } = useNetworkEventList({
-    filter,
-    ignoredPatterns,
-    paused,
-    isPro
-  });
-  const {
-    pinnedEvents,
-    pinnedLiveIds,
-    savedRecords
-  } = useNetworkSaved();
-  const savedLimit = useLimit("network.saved");
-  const ordered = useMemo(() => {
-    if (fromSaved) {
-      return 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
-    } = 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.
-  useEffect(() => {
-    networkSelectionStore.setIds(toSelectionIds(ordered));
-  }, [ordered]);
-  const {
-    index,
-    total
-  } = 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__*/_jsx(EventStepperFooter, {
-    currentIndex: index,
-    totalItems: total,
-    itemLabel: "Request",
-    applySafeAreaInset: applySafeAreaInset,
-    onPrevious: stepPrevious,
-    onNext: stepNext
-  });
-});
+"use strict";import{memo as k,useEffect as T,useMemo as w}from"react";import{useLimit as D}from"@buoy-gg/shared-ui";import{useNetworkEventList as E}from"../hooks/useNetworkEventList";import{useNetworkSaved as F}from"../hooks/useNetworkSaved";import{useNetworkCursor as L}from"../hooks/useNetworkSelection";import{networkSelectionStore as x,toSelectionIds as A}from"../utils/networkSelectionStore";import{splitPinned as N}from"../utils/withPinnedFirst";import{selectSavedEvents as j}from"../utils/selectSavedEvents";import{jsx as t,jsxs as c}from"react/jsx-runtime";const o={background:{base:"#0A0A0C",card:"#1A1A1C"},border:{default:"#2D2D2F"},text:{primary:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93"}};function S({size:n=14,color:r="currentColor",children:i}){return t("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",stroke:r,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:i})}const I=n=>t(S,{...n,children:t("path",{d:"m15 18-6-6 6-6"})});const z=n=>t(S,{...n,children:t("path",{d:"m9 18 6-6-6-6"})});const M=k(function n({currentIndex:r,totalItems:i,onPrevious:p,onNext:d,itemLabel:u="Event",subtitle:a,applySafeAreaInset:m=true}){if(i<=1)return null;const s=r===0;const l=r===i-1;return c("div",{style:{...e.footer,paddingBottom:m?"calc(12px + env(safe-area-inset-bottom, 0px))":12},children:[c("button",{type:"button",onClick:p,disabled:s,style:{...e.navButton,...s?e.navButtonDisabled:null},children:[t(I,{size:20,color:s?o.text.muted:o.text.primary}),t("span",{style:{...e.navButtonText,...s?e.navButtonTextDisabled:null},children:"Previous"})]}),c("div",{style:e.counterContainer,children:[c("span",{style:e.counterText,children:[u," ",r+1," of ",i]}),a?t("span",{style:e.subtitleText,children:a}):null]}),c("button",{type:"button",onClick:d,disabled:l,style:{...e.navButton,...l?e.navButtonDisabled:null},children:[t("span",{style:{...e.navButtonText,...l?e.navButtonTextDisabled:null},children:"Next"}),t(z,{size:20,color:l?o.text.muted:o.text.primary})]})]})});const e={footer:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:"12px 16px 12px",backgroundColor:o.background.base,borderTop:`1px solid ${o.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:o.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:o.text.primary,fontFamily:"ui-monospace, Menlo, monospace",textTransform:"uppercase"},navButtonTextDisabled:{color:o.text.muted},counterContainer:{display:"flex",flexDirection:"column",alignItems:"center"},counterText:{fontSize:14,fontWeight:700,color:o.text.primary,fontFamily:"ui-monospace, Menlo, monospace",textTransform:"uppercase"},subtitleText:{fontSize:11,color:o.text.secondary,fontFamily:"ui-monospace, Menlo, monospace",marginTop:2}};const R=()=>x.step(-1);const W=()=>x.step(1);export const NetworkDetailStepper=k(function n({paused:r,filter:i,ignoredPatterns:p,isPro:d,fromSaved:u,savedSearch:a,applySafeAreaInset:m}){const{visibleEvents:s}=E({filter:i,ignoredPatterns:p,paused:r,isPro:d});const{pinnedEvents:l,pinnedLiveIds:f,savedRecords:v}=F();const C=D("network.saved");const b=w(()=>{if(u){return j(v,C,a).events}const{pinned:h,rest:g}=N(s,l,f);return h.length===0?g:[...h,...g]},[u,v,a,d,s,l,f]);T(()=>{x.setIds(A(b))},[b]);const{index:y,total:B}=L();if(y<0)return null;return t(M,{currentIndex:y,totalItems:B,itemLabel:"Request",applySafeAreaInset:m,onPrevious:R,onNext:W})});