@buoy-gg/network 7.0.40 → 7.0.42

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

@@ -1,623 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NetworkClearButton = NetworkClearButton;
-exports.NetworkDetailPinActions = NetworkDetailPinActions;
-exports.NetworkHeaderBadges = NetworkHeaderBadges;
-exports.NetworkHeaderCopyButton = NetworkHeaderCopyButton;
-exports.NetworkSavedButton = NetworkSavedButton;
-var _react = require("react");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _networkEventStore = require("../utils/networkEventStore");
-var _networkSavedStore = require("../utils/networkSavedStore");
-var _useNetworkSaved = require("../hooks/useNetworkSaved");
-var _useNetworkSelection = require("../hooks/useNetworkSelection");
-var _useNetworkBadgeCounts = require("../hooks/useNetworkBadgeCounts");
-var _useNetworkHasMatches = require("../hooks/useNetworkHasMatches");
-var _generateNetworkCopyText = require("../utils/generateNetworkCopyText");
-var _filterNetworkEvents = require("../utils/filterNetworkEvents");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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
- */
-
-// =============================
-// Native palette (provenance)
-// =============================
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */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__*/(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 CheckCircle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M21.801 10A10 10 0 1 1 17 3.335"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m9 11 3 3L22 4"
-  })]
-});
-const XCircle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m15 9-6 6"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m9 9 6 6"
-  })]
-});
-const Clock = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
-    points: "12 6 12 12 16 14"
-  })]
-});
-const Trash2 = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M3 6h18"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "10",
-    x2: "10",
-    y1: "11",
-    y2: "17"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "14",
-    x2: "14",
-    y1: "11",
-    y2: "17"
-  })]
-});
-const Bookmark = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M2.97 21.03 8.18 15.82"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M4.4 10.81 13.19 19.6"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M5.17 10.54 11.43 8.83"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M13.46 18.83 15.17 12.57"
-    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-    width: "14",
-    height: "14",
-    x: "8",
-    y: "8",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m9 12 2 2 4-4"
-  })]
-});
-const AlertTriangle = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 9v4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 17h.01"
-  })]
-});
-/** Success / error / pending chips — tap to toggle the status filter. */
-function NetworkHeaderBadges({
-  activeStatus,
-  onToggleStatus,
-  ignoredPatterns,
-  paused
-}) {
-  const counts = (0, _useNetworkBadgeCounts.useNetworkBadgeCounts)({
-    ignoredPatterns,
-    paused
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: styles.headerChipRow,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      type: "button",
-      style: {
-        ...styles.headerChip,
-        ...(activeStatus === "success" ? styles.headerChipActive : null)
-      },
-      onClick: () => onToggleStatus("success"),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CheckCircle, {
-        size: 12,
-        color: macOSColors.semantic.success
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...styles.headerChipValue,
-          color: macOSColors.semantic.success
-        },
-        children: counts.successful
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      type: "button",
-      style: {
-        ...styles.headerChip,
-        ...(activeStatus === "error" ? styles.headerChipActive : null)
-      },
-      onClick: () => onToggleStatus("error"),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(XCircle, {
-        size: 12,
-        color: macOSColors.semantic.error
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...styles.headerChipValue,
-          color: macOSColors.semantic.error
-        },
-        children: counts.failed
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      type: "button",
-      style: {
-        ...styles.headerChip,
-        ...(activeStatus === "pending" ? styles.headerChipActive : null)
-      },
-      onClick: () => onToggleStatus("pending"),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Clock, {
-        size: 12,
-        color: macOSColors.semantic.warning
-      }), /*#__PURE__*/(0, _jsxRuntime.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. */
-function NetworkClearButton({
-  paused
-}) {
-  const hasEvents = (0, _useNetworkHasMatches.useNetworkHasEvents)({
-    paused
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    type: "button",
-    "aria-label": "Clear network requests",
-    onClick: () => _networkEventStore.networkEventStore.clearEvents(),
-    style: {
-      ...styles.headerActionButton,
-      ...(!hasEvents ? styles.headerActionButtonDisabled : null)
-    },
-    disabled: !hasEvents,
-    children: /*#__PURE__*/(0, _jsxRuntime.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.
- */
-function NetworkSavedButton({
-  onPress
-}) {
-  const {
-    savedRecords
-  } = (0, _useNetworkSaved.useNetworkSaved)();
-  const count = savedRecords.length;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-    type: "button",
-    onClick: onPress,
-    "aria-label": "Saved requests",
-    style: styles.headerActionButton,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Bookmark, {
-      size: 14,
-      color: count > 0 ? macOSColors.semantic.debug : macOSColors.text.muted
-    }), count > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: styles.savedBadge,
-      children: /*#__PURE__*/(0, _jsxRuntime.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.
- */
-function NetworkDetailPinActions({
-  isPro,
-  onUpgradePress
-}) {
-  const eventId = (0, _useNetworkSelection.useSelectedNetworkEventId)();
-  const state = (0, _useNetworkSaved.useNetworkSaved)();
-  const {
-    pinned,
-    saved
-  } = (0, _networkSavedStore.flagsForEventId)(state, eventId);
-  const savedLimit = (0, _sharedUi.useLimit)("network.saved");
-  const atPinCap = !pinned && state.pinnedEvents.length >= _networkSavedStore.MAX_PINNED;
-  const atSavedCap = !saved && state.savedRecords.length >= savedLimit;
-  const resolveEvent = () => {
-    if (!eventId) return null;
-    return _networkEventStore.networkEventStore.getEvents().find(event => event.id === eventId) ?? _networkSavedStore.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      onClick: handlePin,
-      disabled: atPinCap,
-      "aria-label": pinned ? "Unpin request" : "Pin request",
-      title: atPinCap ? `Pin limit reached (${_networkSavedStore.MAX_PINNED})` : undefined,
-      style: {
-        ...styles.headerActionButton,
-        ...(pinned ? styles.headerActionButtonActive : null),
-        ...(atPinCap ? styles.headerActionButtonDisabled : null)
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Pin, {
-        size: 14,
-        active: pinned,
-        color: pinned ? macOSColors.semantic.info : atPinCap ? macOSColors.text.disabled : macOSColors.text.secondary
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      onClick: handleSave,
-      disabled: atSavedCap && isPro,
-      "aria-label": saved ? "Remove from saved" : "Save request",
-      title: atSavedCap && isPro ? `Saved limit reached (${_networkSavedStore.MAX_SAVED})` : undefined,
-      style: {
-        ...styles.headerActionButton,
-        ...(saved ? styles.headerActionButtonSaved : null),
-        ...(atSavedCap && isPro ? styles.headerActionButtonDisabled : null)
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.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).
- */
-function NetworkHeaderCopyButton({
-  isPro,
-  filter,
-  ignoredPatterns,
-  copySettings,
-  paused,
-  onUpgradePress,
-  label
-}) {
-  const hasEvents = (0, _useNetworkHasMatches.useNetworkHasMatches)({
-    filter,
-    ignoredPatterns,
-    paused
-  });
-  const [copyState, setCopyState] = (0, _react.useState)("idle");
-  const timeoutRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => () => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-  }, []);
-  if (!isPro) {
-    return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(Copy, {
-        size: 14,
-        color: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled
-      }), label ? /*#__PURE__*/(0, _jsxRuntime.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 = (0, _generateNetworkCopyText.generateNetworkCopyText)((0, _filterNetworkEvents.filterNetworkEvents)((0, _filterNetworkEvents.applyIgnoredPatterns)(_networkEventStore.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(CheckCircle2, {
-      size: 14,
-      color: iconColor
-    }) : copyState === "error" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertTriangle, {
-      size: 14,
-      color: iconColor
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Copy, {
-      size: 14,
-      color: iconColor
-    }), label ? /*#__PURE__*/(0, _jsxRuntime.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";Object.defineProperty(exports,"__esModule",{value:true});exports.NetworkClearButton=NetworkClearButton;exports.NetworkDetailPinActions=NetworkDetailPinActions;exports.NetworkHeaderBadges=NetworkHeaderBadges;exports.NetworkHeaderCopyButton=NetworkHeaderCopyButton;exports.NetworkSavedButton=NetworkSavedButton;var _react=require("react");var _sharedUi=require("@buoy-gg/shared-ui");var _networkEventStore=require("../utils/networkEventStore");var _networkSavedStore=require("../utils/networkSavedStore");var _useNetworkSaved=require("../hooks/useNetworkSaved");var _useNetworkSelection=require("../hooks/useNetworkSelection");var _useNetworkBadgeCounts=require("../hooks/useNetworkBadgeCounts");var _useNetworkHasMatches=require("../hooks/useNetworkHasMatches");var _generateNetworkCopyText=require("../utils/generateNetworkCopyText");var _filterNetworkEvents=require("../utils/filterNetworkEvents");var _jsxRuntime=require("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"}};function Svg({size:e=14,color:t="currentColor",children:r}){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:r})}const CheckCircle=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("path",{d:"M21.801 10A10 10 0 1 1 17 3.335"}),(0,_jsxRuntime.jsx)("path",{d:"m9 11 3 3L22 4"})]});const XCircle=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("path",{d:"m15 9-6 6"}),(0,_jsxRuntime.jsx)("path",{d:"m9 9 6 6"})]});const Clock=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("polyline",{points:"12 6 12 12 16 14"})]});const Trash2=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("path",{d:"M3 6h18"}),(0,_jsxRuntime.jsx)("path",{d:"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}),(0,_jsxRuntime.jsx)("path",{d:"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}),(0,_jsxRuntime.jsx)("line",{x1:"10",x2:"10",y1:"11",y2:"17"}),(0,_jsxRuntime.jsx)("line",{x1:"14",x2:"14",y1:"11",y2:"17"})]});const Bookmark=e=>(0,_jsxRuntime.jsx)(Svg,{...e,children:(0,_jsxRuntime.jsx)("path",{d:"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"})});const Pin=({active:e,...t})=>(0,_jsxRuntime.jsx)(Svg,{...t,children:(0,_jsxRuntime.jsxs)("g",{transform:e?"rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)":void 0,children:[(0,_jsxRuntime.jsx)("path",{d:"M2.97 21.03 8.18 15.82"}),(0,_jsxRuntime.jsx)("path",{d:"M4.4 10.81 13.19 19.6"}),(0,_jsxRuntime.jsx)("path",{d:"M5.17 10.54 11.43 8.83"}),(0,_jsxRuntime.jsx)("path",{d:"M13.46 18.83 15.17 12.57"}),(0,_jsxRuntime.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=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),(0,_jsxRuntime.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=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("path",{d:"m9 12 2 2 4-4"})]});const AlertTriangle=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.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"}),(0,_jsxRuntime.jsx)("path",{d:"M12 9v4"}),(0,_jsxRuntime.jsx)("path",{d:"M12 17h.01"})]});function NetworkHeaderBadges({activeStatus:e,onToggleStatus:t,ignoredPatterns:r,paused:a}){const o=(0,_useNetworkBadgeCounts.useNetworkBadgeCounts)({ignoredPatterns:r,paused:a});return(0,_jsxRuntime.jsxs)("div",{style:styles.headerChipRow,children:[(0,_jsxRuntime.jsxs)("button",{type:"button",style:{...styles.headerChip,...e==="success"?styles.headerChipActive:null},onClick:()=>t("success"),children:[(0,_jsxRuntime.jsx)(CheckCircle,{size:12,color:macOSColors.semantic.success}),(0,_jsxRuntime.jsx)("span",{style:{...styles.headerChipValue,color:macOSColors.semantic.success},children:o.successful})]}),(0,_jsxRuntime.jsxs)("button",{type:"button",style:{...styles.headerChip,...e==="error"?styles.headerChipActive:null},onClick:()=>t("error"),children:[(0,_jsxRuntime.jsx)(XCircle,{size:12,color:macOSColors.semantic.error}),(0,_jsxRuntime.jsx)("span",{style:{...styles.headerChipValue,color:macOSColors.semantic.error},children:o.failed})]}),(0,_jsxRuntime.jsxs)("button",{type:"button",style:{...styles.headerChip,...e==="pending"?styles.headerChipActive:null},onClick:()=>t("pending"),children:[(0,_jsxRuntime.jsx)(Clock,{size:12,color:macOSColors.semantic.warning}),(0,_jsxRuntime.jsx)("span",{style:{...styles.headerChipValue,color:macOSColors.semantic.warning},children:o.pending})]})]})}function NetworkClearButton({paused:e}){const t=(0,_useNetworkHasMatches.useNetworkHasEvents)({paused:e});return(0,_jsxRuntime.jsx)("button",{type:"button","aria-label":"Clear network requests",onClick:()=>_networkEventStore.networkEventStore.clearEvents(),style:{...styles.headerActionButton,...!t?styles.headerActionButtonDisabled:null},disabled:!t,children:(0,_jsxRuntime.jsx)(Trash2,{size:14,color:t?macOSColors.text.muted:macOSColors.text.disabled})})}function NetworkSavedButton({onPress:e}){const{savedRecords:t}=(0,_useNetworkSaved.useNetworkSaved)();const r=t.length;return(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:e,"aria-label":"Saved requests",style:styles.headerActionButton,children:[(0,_jsxRuntime.jsx)(Bookmark,{size:14,color:r>0?macOSColors.semantic.debug:macOSColors.text.muted}),r>0?(0,_jsxRuntime.jsx)("span",{style:styles.savedBadge,children:(0,_jsxRuntime.jsx)("span",{style:styles.savedBadgeText,children:r>99?"99+":r})}):null]})}function NetworkDetailPinActions({isPro:e,onUpgradePress:t}){const r=(0,_useNetworkSelection.useSelectedNetworkEventId)();const a=(0,_useNetworkSaved.useNetworkSaved)();const{pinned:o,saved:l}=(0,_networkSavedStore.flagsForEventId)(a,r);const i=(0,_sharedUi.useLimit)("network.saved");const s=!o&&a.pinnedEvents.length>=_networkSavedStore.MAX_PINNED;const n=!l&&a.savedRecords.length>=i;const u=()=>{if(!r)return null;return _networkEventStore.networkEventStore.getEvents().find(c=>c.id===r)??_networkSavedStore.networkSavedStore.getEventById(r)};const d=()=>{const c=u();if(c)a.togglePin(c)};const h=()=>{if(n&&!e){t();return}const c=u();if(c)a.toggleSave(c)};return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("button",{type:"button",onClick:d,disabled:s,"aria-label":o?"Unpin request":"Pin request",title:s?`Pin limit reached (${_networkSavedStore.MAX_PINNED})`:void 0,style:{...styles.headerActionButton,...o?styles.headerActionButtonActive:null,...s?styles.headerActionButtonDisabled:null},children:(0,_jsxRuntime.jsx)(Pin,{size:14,active:o,color:o?macOSColors.semantic.info:s?macOSColors.text.disabled:macOSColors.text.secondary})}),(0,_jsxRuntime.jsx)("button",{type:"button",onClick:h,disabled:n&&e,"aria-label":l?"Remove from saved":"Save request",title:n&&e?`Saved limit reached (${_networkSavedStore.MAX_SAVED})`:void 0,style:{...styles.headerActionButton,...l?styles.headerActionButtonSaved:null,...n&&e?styles.headerActionButtonDisabled:null},children:(0,_jsxRuntime.jsx)(Bookmark,{size:14,color:l?macOSColors.semantic.debug:n&&e?macOSColors.text.disabled:macOSColors.text.secondary})})]})}function NetworkHeaderCopyButton({isPro:e,filter:t,ignoredPatterns:r,copySettings:a,paused:o,onUpgradePress:l,label:i}){const s=(0,_useNetworkHasMatches.useNetworkHasMatches)({filter:t,ignoredPatterns:r,paused:o});const[n,u]=(0,_react.useState)("idle");const d=(0,_react.useRef)(null);(0,_react.useEffect)(()=>()=>{if(d.current)clearTimeout(d.current)},[]);if(!e){return(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:l,style:{...i?styles.copyMenuRow:styles.headerActionButton,...!s?styles.headerActionButtonDisabled:null},disabled:!s,"aria-label":i??"Copy requests",children:[(0,_jsxRuntime.jsx)(Copy,{size:14,color:s?macOSColors.text.secondary:macOSColors.text.disabled}),i?(0,_jsxRuntime.jsx)("span",{style:styles.copyMenuLabel,children:i}):null]})}const h=p=>{u(p);if(d.current)clearTimeout(d.current);d.current=setTimeout(()=>{u("idle");d.current=null},1500)};const c=async()=>{try{const p=(0,_generateNetworkCopyText.generateNetworkCopyText)((0,_filterNetworkEvents.filterNetworkEvents)((0,_filterNetworkEvents.applyIgnoredPatterns)(_networkEventStore.networkEventStore.getEvents(),r),t),a);await navigator.clipboard.writeText(p);h("success")}catch{h("error")}};const x=n==="success"?macOSColors.semantic.success:n==="error"?macOSColors.semantic.error:s?macOSColors.text.secondary:macOSColors.text.disabled;return(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:n==="idle"?c:void 0,style:{...i?styles.copyMenuRow:styles.headerActionButton,...!s?styles.headerActionButtonDisabled:null},disabled:!s,"aria-label":n==="idle"?i??"Copy to clipboard":n==="success"?"Copied to clipboard":"Failed to copy",children:[n==="success"?(0,_jsxRuntime.jsx)(CheckCircle2,{size:14,color:x}):n==="error"?(0,_jsxRuntime.jsx)(AlertTriangle,{size:14,color:x}):(0,_jsxRuntime.jsx)(Copy,{size:14,color:x}),i?(0,_jsxRuntime.jsx)("span",{style:styles.copyMenuLabel,children:i}):null]})}const styles={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},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`,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:.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"}};