@buoy-gg/network 7.0.41 → 7.0.43

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

@@ -1,617 +1 @@
-"use strict";
-
-/**
- * NetworkHeaderLive.web — DOM twin of NetworkHeaderLive.tsx.
- *
- * The header pieces that consume LIVE event data, each its own narrow store
- * subscriber (same decomposition + hooks as native — `useNetworkBadgeCounts`,
- * `useNetworkHasEvents`, `useNetworkSaved` are platform-free and reused, not
- * forked):
- *
- *  - `NetworkHeaderBadges` — success/error/pending count chips (tap toggles
- *    the status filter)
- *  - `NetworkClearButton`  — trash button, enabled while the store has events
- *  - `NetworkSavedButton`  — Saved-screen entry point with its live count
- *  - `NetworkDetailPinActions` — pin + save toggles for the request-DETAIL
- *    header (ported with the F3 detail-view feature; same flagsForEventId /
- *    cap logic and press-time event resolution as native)
- *  - `NetworkHeaderCopyButton` — copy-all button / labelled ⋯-menu row
- *    (ported with the F5 saved+copy feature; the copy text is the SAME
- *    platform-free `generateNetworkCopyText`, resolved lazily at press time
- *    from a live store read, exactly like native)
- *
- * shared-ui RN chrome is replicated as DOM with provenance (web consumers
- * resolve `@buoy-gg/shared-ui` to a minimal shim):
- *  - `macOSColors` — inlined verbatim subset from
- *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts.
- *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
- *  - The active chip's native shadow (shadowOffset 0/1, opacity 0.08,
- *    radius 2) → an equivalent CSS box-shadow.
- *  - shared-ui `CopyButton` (the Pro branch of the copy button) — inlined
- *    labelled DOM twin below: same idle/success/error icon set, 1500ms
- *    feedback, lazy function value, and label-follows-labelStyle behavior.
- *
- * Intentional deviations (all logged):
- *  - shared-ui CopyButton's ClipboardHintBanner and internal
- *    @buoy-gg/license Pro modal are not ported — license gating isn't part
- *    of the web port; the explicit `isPro` prop branch (native's own outer
- *    gate) still routes free users to `onUpgradePress`.
- *  - `CopySettings` is imported from the platform-free
- *    `generateNetworkCopyText` module (the native file imports it from
- *    NetworkCopySettingsView.tsx, which would drag react-native in).
- *
- * @platform React DOM Web
- */
-
-import { useEffect, useRef, useState } from "react";
-import { useLimit } from "@buoy-gg/shared-ui";
-import { networkEventStore } from "../utils/networkEventStore";
-import { flagsForEventId, networkSavedStore, MAX_PINNED, MAX_SAVED } from "../utils/networkSavedStore";
-import { useNetworkSaved } from "../hooks/useNetworkSaved";
-import { useSelectedNetworkEventId } from "../hooks/useNetworkSelection";
-import { useNetworkBadgeCounts } from "../hooks/useNetworkBadgeCounts";
-import { useNetworkHasEvents, useNetworkHasMatches } from "../hooks/useNetworkHasMatches";
-import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
-import { applyIgnoredPatterns, filterNetworkEvents } from "../utils/filterNetworkEvents";
-
-// =============================
-// Native palette (provenance)
-// =============================
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const macOSColors = {
-  background: {
-    hover: "#1D1D1F"
-  },
-  border: {
-    default: "#2D2D2F"
-  },
-  text: {
-    primary: "#F5F5F7",
-    secondary: "#A1A1A6",
-    muted: "#8E8E93",
-    disabled: "#9E9EA0"
-  },
-  semantic: {
-    success: "#34C759",
-    error: "#FF453A",
-    warning: "#FFEB3B",
-    info: "#00B8E6",
-    infoBackground: "rgba(0, 184, 230, 0.1)",
-    debug: "#BF5AF2"
-  }
-};
-
-// =============================
-// 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 CheckCircle = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M21.801 10A10 10 0 1 1 17 3.335"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m9 11 3 3L22 4"
-  })]
-});
-const XCircle = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m15 9-6 6"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m9 9 6 6"
-  })]
-});
-const Clock = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("polyline", {
-    points: "12 6 12 12 16 14"
-  })]
-});
-const Trash2 = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M3 6h18"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-  }), /*#__PURE__*/_jsx("line", {
-    x1: "10",
-    x2: "10",
-    y1: "11",
-    y2: "17"
-  }), /*#__PURE__*/_jsx("line", {
-    x1: "14",
-    x2: "14",
-    y1: "11",
-    y2: "17"
-  })]
-});
-const Bookmark = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
-  })
-});
-const Pin = ({
-  active,
-  ...p
-}) => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsxs("g", {
-    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M2.97 21.03 8.18 15.82"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M4.4 10.81 13.19 19.6"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M5.17 10.54 11.43 8.83"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M13.46 18.83 15.17 12.57"
-    }), /*#__PURE__*/_jsx("rect", {
-      x: "12.15",
-      y: "5.4",
-      width: "9.38",
-      height: "3.52",
-      rx: "1.07",
-      transform: "rotate(-45 16.84 7.16)"
-    })]
-  })
-});
-const Copy = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("rect", {
-    width: "14",
-    height: "14",
-    x: "8",
-    y: "8",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-  })]
-});
-const CheckCircle2 = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "m9 12 2 2 4-4"
-  })]
-});
-const AlertTriangle = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 9v4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 17h.01"
-  })]
-});
-/** Success / error / pending chips — tap to toggle the status filter. */
-export function NetworkHeaderBadges({
-  activeStatus,
-  onToggleStatus,
-  ignoredPatterns,
-  paused
-}) {
-  const counts = useNetworkBadgeCounts({
-    ignoredPatterns,
-    paused
-  });
-  return /*#__PURE__*/_jsxs("div", {
-    style: styles.headerChipRow,
-    children: [/*#__PURE__*/_jsxs("button", {
-      type: "button",
-      style: {
-        ...styles.headerChip,
-        ...(activeStatus === "success" ? styles.headerChipActive : null)
-      },
-      onClick: () => onToggleStatus("success"),
-      children: [/*#__PURE__*/_jsx(CheckCircle, {
-        size: 12,
-        color: macOSColors.semantic.success
-      }), /*#__PURE__*/_jsx("span", {
-        style: {
-          ...styles.headerChipValue,
-          color: macOSColors.semantic.success
-        },
-        children: counts.successful
-      })]
-    }), /*#__PURE__*/_jsxs("button", {
-      type: "button",
-      style: {
-        ...styles.headerChip,
-        ...(activeStatus === "error" ? styles.headerChipActive : null)
-      },
-      onClick: () => onToggleStatus("error"),
-      children: [/*#__PURE__*/_jsx(XCircle, {
-        size: 12,
-        color: macOSColors.semantic.error
-      }), /*#__PURE__*/_jsx("span", {
-        style: {
-          ...styles.headerChipValue,
-          color: macOSColors.semantic.error
-        },
-        children: counts.failed
-      })]
-    }), /*#__PURE__*/_jsxs("button", {
-      type: "button",
-      style: {
-        ...styles.headerChip,
-        ...(activeStatus === "pending" ? styles.headerChipActive : null)
-      },
-      onClick: () => onToggleStatus("pending"),
-      children: [/*#__PURE__*/_jsx(Clock, {
-        size: 12,
-        color: macOSColors.semantic.warning
-      }), /*#__PURE__*/_jsx("span", {
-        style: {
-          ...styles.headerChipValue,
-          color: macOSColors.semantic.warning
-        },
-        children: counts.pending
-      })]
-    })]
-  });
-}
-/** Trash button — handler co-located; enabled while the store has events.
- * Subscribes to a flip-guarded boolean, so it renders when the store goes
- * empty↔non-empty, not on every count change. */
-export function NetworkClearButton({
-  paused
-}) {
-  const hasEvents = useNetworkHasEvents({
-    paused
-  });
-  return /*#__PURE__*/_jsx("button", {
-    type: "button",
-    "aria-label": "Clear network requests",
-    onClick: () => networkEventStore.clearEvents(),
-    style: {
-      ...styles.headerActionButton,
-      ...(!hasEvents ? styles.headerActionButtonDisabled : null)
-    },
-    disabled: !hasEvents,
-    children: /*#__PURE__*/_jsx(Trash2, {
-      size: 14,
-      color: hasEvents ? macOSColors.text.muted : macOSColors.text.disabled
-    })
-  });
-}
-/**
- * Entry point to the Saved screen, with its count. A self-subscribing leaf so
- * the badge tracks the store without the modal header re-rendering.
- */
-export function NetworkSavedButton({
-  onPress
-}) {
-  const {
-    savedRecords
-  } = useNetworkSaved();
-  const count = savedRecords.length;
-  return /*#__PURE__*/_jsxs("button", {
-    type: "button",
-    onClick: onPress,
-    "aria-label": "Saved requests",
-    style: styles.headerActionButton,
-    children: [/*#__PURE__*/_jsx(Bookmark, {
-      size: 14,
-      color: count > 0 ? macOSColors.semantic.debug : macOSColors.text.muted
-    }), count > 0 ? /*#__PURE__*/_jsx("span", {
-      style: styles.savedBadge,
-      children: /*#__PURE__*/_jsx("span", {
-        style: styles.savedBadgeText,
-        children: count > 99 ? "99+" : count
-      })
-    }) : null]
-  });
-}
-/**
- * Pin + Save toggles for the request-detail header — same self-subscribing
- * leaf as native, for the same two reasons: the host root stays free of
- * subscriptions, and these buttons deliberately do NOT live inside
- * `NetworkEventDetailView` (the Events tool renders that same detail view
- * with no saved store behind it).
- *
- * The event object is resolved at PRESS time (live store first, then the
- * saved snapshot), and the selected id is SUBSCRIBED here rather than passed
- * down, so stepping through requests doesn't rebuild the host header.
- */
-export function NetworkDetailPinActions({
-  isPro,
-  onUpgradePress
-}) {
-  const eventId = useSelectedNetworkEventId();
-  const state = useNetworkSaved();
-  const {
-    pinned,
-    saved
-  } = flagsForEventId(state, eventId);
-  const savedLimit = useLimit("network.saved");
-  const atPinCap = !pinned && state.pinnedEvents.length >= MAX_PINNED;
-  const atSavedCap = !saved && state.savedRecords.length >= savedLimit;
-  const resolveEvent = () => {
-    if (!eventId) return null;
-    return networkEventStore.getEvents().find(event => event.id === eventId) ?? networkSavedStore.getEventById(eventId);
-  };
-  const handlePin = () => {
-    const event = resolveEvent();
-    if (event) state.togglePin(event);
-  };
-  const handleSave = () => {
-    // Hitting the free ceiling is an upgrade moment, not a dead button.
-    if (atSavedCap && !isPro) {
-      onUpgradePress();
-      return;
-    }
-    const event = resolveEvent();
-    if (event) state.toggleSave(event);
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("button", {
-      type: "button",
-      onClick: handlePin,
-      disabled: atPinCap,
-      "aria-label": pinned ? "Unpin request" : "Pin request",
-      title: atPinCap ? `Pin limit reached (${MAX_PINNED})` : undefined,
-      style: {
-        ...styles.headerActionButton,
-        ...(pinned ? styles.headerActionButtonActive : null),
-        ...(atPinCap ? styles.headerActionButtonDisabled : null)
-      },
-      children: /*#__PURE__*/_jsx(Pin, {
-        size: 14,
-        active: pinned,
-        color: pinned ? macOSColors.semantic.info : atPinCap ? macOSColors.text.disabled : macOSColors.text.secondary
-      })
-    }), /*#__PURE__*/_jsx("button", {
-      type: "button",
-      onClick: handleSave,
-      disabled: atSavedCap && isPro,
-      "aria-label": saved ? "Remove from saved" : "Save request",
-      title: atSavedCap && isPro ? `Saved limit reached (${MAX_SAVED})` : undefined,
-      style: {
-        ...styles.headerActionButton,
-        ...(saved ? styles.headerActionButtonSaved : null),
-        ...(atSavedCap && isPro ? styles.headerActionButtonDisabled : null)
-      },
-      children: /*#__PURE__*/_jsx(Bookmark, {
-        size: 14,
-        color: saved ? macOSColors.semantic.debug : atSavedCap && isPro ? macOSColors.text.disabled : macOSColors.text.secondary
-      })
-    })]
-  });
-}
-/**
- * Copy-all-requests button. Subscribes to a flip-guarded boolean (its
- * enabled state); the copy text is generated at PRESS time from a live
- * store read, so there's no per-event work and no stale closure.
- *
- * The Pro branch inlines shared-ui CopyButton's copy/feedback loop (same
- * icon set, 1500ms feedback, label keeps its own color while the icon
- * follows the state — native's `labelStyle` wins over the state color).
- */
-export function NetworkHeaderCopyButton({
-  isPro,
-  filter,
-  ignoredPatterns,
-  copySettings,
-  paused,
-  onUpgradePress,
-  label
-}) {
-  const hasEvents = useNetworkHasMatches({
-    filter,
-    ignoredPatterns,
-    paused
-  });
-  const [copyState, setCopyState] = useState("idle");
-  const timeoutRef = useRef(null);
-  useEffect(() => () => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-  }, []);
-  if (!isPro) {
-    return /*#__PURE__*/_jsxs("button", {
-      type: "button",
-      onClick: onUpgradePress,
-      style: {
-        ...(label ? styles.copyMenuRow : styles.headerActionButton),
-        ...(!hasEvents ? styles.headerActionButtonDisabled : null)
-      },
-      disabled: !hasEvents,
-      "aria-label": label ?? "Copy requests",
-      children: [/*#__PURE__*/_jsx(Copy, {
-        size: 14,
-        color: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled
-      }), label ? /*#__PURE__*/_jsx("span", {
-        style: styles.copyMenuLabel,
-        children: label
-      }) : null]
-    });
-  }
-  const settle = state => {
-    setCopyState(state);
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    // 1500ms — shared-ui CopyButton's `feedbackDuration` default.
-    timeoutRef.current = setTimeout(() => {
-      setCopyState("idle");
-      timeoutRef.current = null;
-    }, 1500);
-  };
-  const handleCopy = async () => {
-    try {
-      // Lazy value: resolved at copy time from the LIVE store — no per-event
-      // work, no staleness (native's CopyButton function-value contract).
-      const text = generateNetworkCopyText(filterNetworkEvents(applyIgnoredPatterns(networkEventStore.getEvents(), ignoredPatterns), filter), copySettings);
-      await navigator.clipboard.writeText(text);
-      settle("success");
-    } catch {
-      settle("error");
-    }
-  };
-  const iconColor = copyState === "success" ? macOSColors.semantic.success : copyState === "error" ? macOSColors.semantic.error : hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled;
-  return /*#__PURE__*/_jsxs("button", {
-    type: "button",
-    onClick: copyState === "idle" ? handleCopy : undefined,
-    style: {
-      ...(label ? styles.copyMenuRow : styles.headerActionButton),
-      ...(!hasEvents ? styles.headerActionButtonDisabled : null)
-    },
-    disabled: !hasEvents,
-    "aria-label": copyState === "idle" ? label ?? "Copy to clipboard" : copyState === "success" ? "Copied to clipboard" : "Failed to copy",
-    children: [copyState === "success" ? /*#__PURE__*/_jsx(CheckCircle2, {
-      size: 14,
-      color: iconColor
-    }) : copyState === "error" ? /*#__PURE__*/_jsx(AlertTriangle, {
-      size: 14,
-      color: iconColor
-    }) : /*#__PURE__*/_jsx(Copy, {
-      size: 14,
-      color: iconColor
-    }), label ? /*#__PURE__*/_jsx("span", {
-      style: styles.copyMenuLabel,
-      children: label
-    }) : null]
-  });
-}
-
-// Values mirror the native StyleSheet block 1:1.
-const styles = {
-  /** The overflow-menu variant: a full-width row, matching the other items. */
-  copyMenuRow: {
-    display: "flex",
-    width: "100%",
-    boxSizing: "border-box",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    padding: "11px 6px",
-    justifyContent: "flex-start",
-    background: "none",
-    border: "none",
-    cursor: "pointer",
-    margin: 0,
-    fontFamily: "inherit",
-    textAlign: "left"
-  },
-  copyMenuLabel: {
-    fontSize: 13,
-    fontWeight: 600,
-    color: macOSColors.text.primary
-  },
-  headerChipRow: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  /**
-   * Counter chips and toolbar buttons carry a permanent outline; the fill
-   * marks the active filter.
-   */
-  headerChip: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    backgroundColor: macOSColors.background.hover,
-    padding: "5px 10px",
-    borderRadius: 12,
-    border: `1px solid ${macOSColors.border.default}`,
-    cursor: "pointer",
-    margin: 0
-  },
-  headerChipActive: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    border: `1px solid ${macOSColors.semantic.info}50`,
-    // Native: shadowColor info, offset 0/1, opacity 0.08, radius 2.
-    boxShadow: "0 1px 2px rgba(0, 184, 230, 0.08)"
-  },
-  headerChipValue: {
-    fontSize: 12,
-    fontWeight: 600,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  headerActionButton: {
-    position: "relative",
-    display: "inline-flex",
-    width: 32,
-    height: 32,
-    boxSizing: "border-box",
-    borderRadius: 8,
-    backgroundColor: macOSColors.background.hover,
-    border: `1px solid ${macOSColors.border.default}`,
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    padding: 0,
-    margin: 0
-  },
-  headerActionButtonDisabled: {
-    opacity: 0.55,
-    cursor: "default"
-  },
-  headerActionButtonActive: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    border: `1px solid ${macOSColors.semantic.info}50`
-  },
-  headerActionButtonSaved: {
-    backgroundColor: `${macOSColors.semantic.debug}1A`,
-    border: `1px solid ${macOSColors.semantic.debug}50`
-  },
-  savedBadge: {
-    position: "absolute",
-    top: -3,
-    right: -3,
-    minWidth: 14,
-    height: 14,
-    boxSizing: "border-box",
-    padding: "0 3px",
-    borderRadius: 7,
-    backgroundColor: macOSColors.semantic.debug,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  savedBadgeText: {
-    color: "#FFFFFF",
-    fontSize: 9,
-    fontWeight: 700,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  }
-};
+"use strict";import{useEffect as B,useRef as F,useState as S}from"react";import{useLimit as E}from"@buoy-gg/shared-ui";import{networkEventStore as v}from"../utils/networkEventStore";import{flagsForEventId as M,networkSavedStore as z,MAX_PINNED as C,MAX_SAVED as D}from"../utils/networkSavedStore";import{useNetworkSaved as k}from"../hooks/useNetworkSaved";import{useSelectedNetworkEventId as N}from"../hooks/useNetworkSelection";import{useNetworkBadgeCounts as R}from"../hooks/useNetworkBadgeCounts";import{useNetworkHasEvents as I,useNetworkHasMatches as V}from"../hooks/useNetworkHasMatches";import{generateNetworkCopyText as j}from"../utils/generateNetworkCopyText";import{applyIgnoredPatterns as L,filterNetworkEvents as $}from"../utils/filterNetworkEvents";import{jsx as e,jsxs as a,Fragment as T}from"react/jsx-runtime";const n={background:{hover:"#1D1D1F"},border:{default:"#2D2D2F"},text:{primary:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93",disabled:"#9E9EA0"},semantic:{success:"#34C759",error:"#FF453A",warning:"#FFEB3B",info:"#00B8E6",infoBackground:"rgba(0, 184, 230, 0.1)",debug:"#BF5AF2"}};function p({size:t=14,color:r="currentColor",children:i}){return e("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:r,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:i})}const q=t=>a(p,{...t,children:[e("path",{d:"M21.801 10A10 10 0 1 1 17 3.335"}),e("path",{d:"m9 11 3 3L22 4"})]});const H=t=>a(p,{...t,children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("path",{d:"m15 9-6 6"}),e("path",{d:"m9 9 6 6"})]});const W=t=>a(p,{...t,children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("polyline",{points:"12 6 12 12 16 14"})]});const _=t=>a(p,{...t,children:[e("path",{d:"M3 6h18"}),e("path",{d:"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}),e("path",{d:"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}),e("line",{x1:"10",x2:"10",y1:"11",y2:"17"}),e("line",{x1:"14",x2:"14",y1:"11",y2:"17"})]});const A=t=>e(p,{...t,children:e("path",{d:"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"})});const P=({active:t,...r})=>e(p,{...r,children:a("g",{transform:t?"rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)":void 0,children:[e("path",{d:"M2.97 21.03 8.18 15.82"}),e("path",{d:"M4.4 10.81 13.19 19.6"}),e("path",{d:"M5.17 10.54 11.43 8.83"}),e("path",{d:"M13.46 18.83 15.17 12.57"}),e("rect",{x:"12.15",y:"5.4",width:"9.38",height:"3.52",rx:"1.07",transform:"rotate(-45 16.84 7.16)"})]})});const w=t=>a(p,{...t,children:[e("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),e("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]});const X=t=>a(p,{...t,children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("path",{d:"m9 12 2 2 4-4"})]});const O=t=>a(p,{...t,children:[e("path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}),e("path",{d:"M12 9v4"}),e("path",{d:"M12 17h.01"})]});export function NetworkHeaderBadges({activeStatus:t,onToggleStatus:r,ignoredPatterns:i,paused:u}){const s=R({ignoredPatterns:i,paused:u});return a("div",{style:o.headerChipRow,children:[a("button",{type:"button",style:{...o.headerChip,...t==="success"?o.headerChipActive:null},onClick:()=>r("success"),children:[e(q,{size:12,color:n.semantic.success}),e("span",{style:{...o.headerChipValue,color:n.semantic.success},children:s.successful})]}),a("button",{type:"button",style:{...o.headerChip,...t==="error"?o.headerChipActive:null},onClick:()=>r("error"),children:[e(H,{size:12,color:n.semantic.error}),e("span",{style:{...o.headerChipValue,color:n.semantic.error},children:s.failed})]}),a("button",{type:"button",style:{...o.headerChip,...t==="pending"?o.headerChipActive:null},onClick:()=>r("pending"),children:[e(W,{size:12,color:n.semantic.warning}),e("span",{style:{...o.headerChipValue,color:n.semantic.warning},children:s.pending})]})]})}export function NetworkClearButton({paused:t}){const r=I({paused:t});return e("button",{type:"button","aria-label":"Clear network requests",onClick:()=>v.clearEvents(),style:{...o.headerActionButton,...!r?o.headerActionButtonDisabled:null},disabled:!r,children:e(_,{size:14,color:r?n.text.muted:n.text.disabled})})}export function NetworkSavedButton({onPress:t}){const{savedRecords:r}=k();const i=r.length;return a("button",{type:"button",onClick:t,"aria-label":"Saved requests",style:o.headerActionButton,children:[e(A,{size:14,color:i>0?n.semantic.debug:n.text.muted}),i>0?e("span",{style:o.savedBadge,children:e("span",{style:o.savedBadgeText,children:i>99?"99+":i})}):null]})}export function NetworkDetailPinActions({isPro:t,onUpgradePress:r}){const i=N();const u=k();const{pinned:s,saved:b}=M(u,i);const l=E("network.saved");const d=!s&&u.pinnedEvents.length>=C;const c=!b&&u.savedRecords.length>=l;const y=()=>{if(!i)return null;return v.getEvents().find(h=>h.id===i)??z.getEventById(i)};const m=()=>{const h=y();if(h)u.togglePin(h)};const g=()=>{if(c&&!t){r();return}const h=y();if(h)u.toggleSave(h)};return a(T,{children:[e("button",{type:"button",onClick:m,disabled:d,"aria-label":s?"Unpin request":"Pin request",title:d?`Pin limit reached (${C})`:void 0,style:{...o.headerActionButton,...s?o.headerActionButtonActive:null,...d?o.headerActionButtonDisabled:null},children:e(P,{size:14,active:s,color:s?n.semantic.info:d?n.text.disabled:n.text.secondary})}),e("button",{type:"button",onClick:g,disabled:c&&t,"aria-label":b?"Remove from saved":"Save request",title:c&&t?`Saved limit reached (${D})`:void 0,style:{...o.headerActionButton,...b?o.headerActionButtonSaved:null,...c&&t?o.headerActionButtonDisabled:null},children:e(A,{size:14,color:b?n.semantic.debug:c&&t?n.text.disabled:n.text.secondary})})]})}export function NetworkHeaderCopyButton({isPro:t,filter:r,ignoredPatterns:i,copySettings:u,paused:s,onUpgradePress:b,label:l}){const d=V({filter:r,ignoredPatterns:i,paused:s});const[c,y]=S("idle");const m=F(null);B(()=>()=>{if(m.current)clearTimeout(m.current)},[]);if(!t){return a("button",{type:"button",onClick:b,style:{...l?o.copyMenuRow:o.headerActionButton,...!d?o.headerActionButtonDisabled:null},disabled:!d,"aria-label":l??"Copy requests",children:[e(w,{size:14,color:d?n.text.secondary:n.text.disabled}),l?e("span",{style:o.copyMenuLabel,children:l}):null]})}const g=x=>{y(x);if(m.current)clearTimeout(m.current);m.current=setTimeout(()=>{y("idle");m.current=null},1500)};const h=async()=>{try{const x=j($(L(v.getEvents(),i),r),u);await navigator.clipboard.writeText(x);g("success")}catch{g("error")}};const f=c==="success"?n.semantic.success:c==="error"?n.semantic.error:d?n.text.secondary:n.text.disabled;return a("button",{type:"button",onClick:c==="idle"?h:void 0,style:{...l?o.copyMenuRow:o.headerActionButton,...!d?o.headerActionButtonDisabled:null},disabled:!d,"aria-label":c==="idle"?l??"Copy to clipboard":c==="success"?"Copied to clipboard":"Failed to copy",children:[c==="success"?e(X,{size:14,color:f}):c==="error"?e(O,{size:14,color:f}):e(w,{size:14,color:f}),l?e("span",{style:o.copyMenuLabel,children:l}):null]})}const o={copyMenuRow:{display:"flex",width:"100%",boxSizing:"border-box",flexDirection:"row",alignItems:"center",gap:10,padding:"11px 6px",justifyContent:"flex-start",background:"none",border:"none",cursor:"pointer",margin:0,fontFamily:"inherit",textAlign:"left"},copyMenuLabel:{fontSize:13,fontWeight:600,color:n.text.primary},headerChipRow:{display:"flex",flexDirection:"row",alignItems:"center",gap:8},headerChip:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:4,backgroundColor:n.background.hover,padding:"5px 10px",borderRadius:12,border:`1px solid ${n.border.default}`,cursor:"pointer",margin:0},headerChipActive:{backgroundColor:n.semantic.infoBackground,border:`1px solid ${n.semantic.info}50`,boxShadow:"0 1px 2px rgba(0, 184, 230, 0.08)"},headerChipValue:{fontSize:12,fontWeight:600,fontFamily:"ui-monospace, Menlo, monospace"},headerActionButton:{position:"relative",display:"inline-flex",width:32,height:32,boxSizing:"border-box",borderRadius:8,backgroundColor:n.background.hover,border:`1px solid ${n.border.default}`,alignItems:"center",justifyContent:"center",cursor:"pointer",padding:0,margin:0},headerActionButtonDisabled:{opacity:.55,cursor:"default"},headerActionButtonActive:{backgroundColor:n.semantic.infoBackground,border:`1px solid ${n.semantic.info}50`},headerActionButtonSaved:{backgroundColor:`${n.semantic.debug}1A`,border:`1px solid ${n.semantic.debug}50`},savedBadge:{position:"absolute",top:-3,right:-3,minWidth:14,height:14,boxSizing:"border-box",padding:"0 3px",borderRadius:7,backgroundColor:n.semantic.debug,display:"inline-flex",alignItems:"center",justifyContent:"center"},savedBadgeText:{color:"#FFFFFF",fontSize:9,fontWeight:700,fontFamily:"ui-monospace, Menlo, monospace"}};