@buoy-gg/network 7.0.15 → 7.0.17

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

@@ -0,0 +1,97 @@
+"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
+    })]
+  });
+}

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

@@ -0,0 +1,294 @@
+"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 { 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 ordered = useMemo(() => {
+    if (fromSaved) {
+      return selectSavedEvents(savedRecords, isPro, 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
+  });
+});