@buoy-gg/network 7.0.40 → 7.0.42

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

@@ -1,1242 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DEFAULT_COPY_SETTINGS = void 0;
-exports.NetworkCopySettingsView = NetworkCopySettingsView;
-var _react = require("react");
-var _DataViewer = require("./DataViewer.web");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * NetworkCopySettingsView.web — DOM twin of NetworkCopySettingsView.tsx.
- *
- * The COPY tab's configurator: quick presets (URLs / LLM / JSON / Full /
- * Custom), the Include toggles, the output-format pick, and the collapsible
- * live preview with its size warnings and copy action. Same preset configs,
- * preset detection, option-change routing (`group::key` ids), mock-request
- * fallback, size estimation and preview/copy text generation as the native
- * file — all copied verbatim.
- *
- * Natively the chrome is shared-ui's `DynamicFilterView`; the web shim
- * doesn't ship it, so this twin renders the exact subtree DynamicFilterView
- * produces FOR THIS CONFIG (no tabs, no filter-summary, no pattern sections —
- * those config branches are unused here), same precedent as
- * NetworkFilterViewV3.web:
- *  1. Facet-card sections — Presets (icon + label), Include (label-only
- *     toggles), Format (icon + label); single active-card treatment
- *     (primary fill + 2px ring + glow).
- *  2. PREVIEW section — SectionHeader (Eye icon, title, header actions =
- *     status label + toolbar copy button) over the recessed content box;
- *     collapsed by default behind the Show Preview summary (request count +
- *     estimated size + large-payload warnings), exactly like native.
- *
- * shared-ui RN chrome replicated as DOM with provenance:
- *  - `buoyColors` / `macOSColors` — inlined verbatim subsets from
- *    shared/src/ui/gameUI/constants/ (DynamicFilterView + SectionHeader use
- *    buoyColors; the preview widgets use macOSColors directly).
- *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
- *  - `ToolbarCopyButton` — the DataViewer.web `CopyButton` twin at size 14
- *    (the native preset is exactly `CopyButton size={14}` with default
- *    colors); copies via navigator.clipboard with the same 1500ms feedback.
- *  - `DataViewer` (JSON-format preview) — the DataViewer.web twin.
- *  - `formatRelativeTime` — copied verbatim from
- *    shared/src/utils/time/formatRelativeTime.ts.
- *  - Native card glow (`shadowColor` primary, opacity 0.3, radius 8) → an
- *    equivalent CSS box-shadow.
- *
- * Intentional deviations (all logged):
- *  - License gating isn't part of the web port: native reads
- *    `useFeatureGate()` and wraps the view in a `ProFeatureBanner` for free
- *    users; here `isPro` is a constant true, so that branch never renders and
- *    is not ported. Copy is likewise ungated (native's CopyButton shows a
- *    Pro modal via @buoy-gg/license).
- *  - `useTickEveryMinute` (shared TickProvider context, 5s cadence as mounted
- *    by NetworkModal) → the same module-level shared 5s interval hook the
- *    compact row twin uses.
- *  - Native's `previewData` memo is dead code (computed, never read) and is
- *    dropped here — the host tsconfig runs `noUnusedLocals`.
- *  - `selectable={isPro}` on the preview text → `userSelect: "text"` (isPro
- *    is constant-true on web).
- *  - `CopySettings` / `DEFAULT_COPY_SETTINGS` are re-declared against the
- *    platform-free type in `generateNetworkCopyText` (the native module would
- *    drag react-native in); the shape is byte-identical.
- *
- * @platform React DOM Web
- */
-
-/** NetworkCopySettingsView.tsx `DEFAULT_COPY_SETTINGS`, verbatim. */
-const DEFAULT_COPY_SETTINGS = exports.DEFAULT_COPY_SETTINGS = {
-  includeMethod: true,
-  includeStatus: true,
-  includeDuration: true,
-  includeTimestamp: true,
-  includeClient: true,
-  includeSizes: true,
-  includeErrors: true,
-  includeRequestHeaders: true,
-  includeResponseHeaders: true,
-  includeRequestBody: true,
-  includeResponseBody: true,
-  bodySizeThreshold: 10,
-  format: "markdown",
-  filterMode: "all"
-};
-
-// =============================
-// Native palettes (provenance)
-// =============================
-
-/** buoyColors subset — shared/src/ui/gameUI/constants/gameUIColors.ts, verbatim. */
-const buoyColors = {
-  base: "#121212",
-  card: "#1A1A1A",
-  hover: "#242424",
-  border: "#333333",
-  borderStrong: "#444444",
-  text: "#E0E0E0",
-  primary: "#20C997"
-};
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
-const macOSColors = {
-  background: {
-    input: "#26262A",
-    hover: "#1D1D1F"
-  },
-  border: {
-    default: "#2D2D2F"
-  },
-  text: {
-    primary: "#F5F5F7",
-    secondary: "#A1A1A6",
-    muted: "#8E8E93"
-  },
-  semantic: {
-    success: "#34C759",
-    error: "#FF453A",
-    errorBackground: "rgba(255, 69, 58, 0.15)",
-    warning: "#FFEB3B",
-    warningBackground: "rgba(255, 235, 59, 0.15)",
-    info: "#00B8E6"
-  }
-};
-
-// =============================
-// 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 FileText = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M14 2v4a2 2 0 0 0 2 2h4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M10 9H8"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M16 13H8"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M16 17H8"
-  })]
-});
-const FileCode = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M14 2v4a2 2 0 0 0 2 2h4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M10 12.5 8 15l2 2.5"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m14 12.5 2 2.5-2 2.5"
-  })]
-});
-const Link = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-  })]
-});
-const Zap = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("polygon", {
-    points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2"
-  })
-});
-const Settings = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3"
-  })]
-});
-const Hash = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "4",
-    x2: "20",
-    y1: "9",
-    y2: "9"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "4",
-    x2: "20",
-    y1: "15",
-    y2: "15"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "10",
-    x2: "8",
-    y1: "3",
-    y2: "21"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: "16",
-    x2: "14",
-    y1: "3",
-    y2: "21"
-  })]
-});
-const Eye = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3"
-  })]
-});
-const ChevronDown = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m6 9 6 6 6-6"
-  })
-});
-const ChevronUp = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m18 15-6-6-6 6"
-  })
-});
-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"
-  })]
-});
-
-// =============================
-// Shared tick (DEVIATION: replaces shared-ui TickProvider/useTickEveryMinute)
-// =============================
-
-/**
- * One module-level 5s clock — the cadence NetworkModal's `TickProvider` gives
- * the native view (default `intervalMs` 5_000). Runs only while a consumer is
- * mounted. Same pattern as NetworkEventItemCompact.web.
- */
-const tickListeners = new Set();
-let tickInterval = null;
-function subscribeTick(listener) {
-  tickListeners.add(listener);
-  if (tickInterval == null) {
-    tickInterval = setInterval(() => {
-      const now = Date.now();
-      tickListeners.forEach(l => l(now));
-    }, 5_000);
-  }
-  return () => {
-    tickListeners.delete(listener);
-    if (tickListeners.size === 0 && tickInterval != null) {
-      clearInterval(tickInterval);
-      tickInterval = null;
-    }
-  };
-}
-function useSharedTick() {
-  const [tick, setTick] = (0, _react.useState)(() => Date.now());
-  (0, _react.useEffect)(() => subscribeTick(setTick), []);
-  return tick;
-}
-
-/** shared/src/utils/time/formatRelativeTime.ts — verbatim. */
-function formatRelativeTime(timestamp, currentTime = Date.now()) {
-  const timestampMs = timestamp instanceof Date ? timestamp.getTime() : timestamp;
-  const seconds = Math.floor((currentTime - timestampMs) / 1000);
-  if (seconds < 0) {
-    return "just now";
-  }
-  if (seconds < 60) {
-    return seconds === 0 ? "just now" : `${seconds}s ago`;
-  }
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) {
-    return `${minutes}m ago`;
-  }
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) {
-    return `${hours}h ago`;
-  }
-  const days = Math.floor(hours / 24);
-  return `${days}d ago`;
-}
-
-// =============================
-// Config + pure helpers (copied verbatim from the native file)
-// =============================
-
-// Preset configurations for comparison
-const PRESET_CONFIGS = {
-  urls: {
-    includeMethod: true,
-    includeStatus: false,
-    includeDuration: false,
-    includeTimestamp: false,
-    includeClient: false,
-    includeSizes: false,
-    includeErrors: false,
-    includeRequestHeaders: false,
-    includeResponseHeaders: false,
-    includeRequestBody: false,
-    includeResponseBody: false,
-    bodySizeThreshold: 10,
-    format: "plaintext",
-    filterMode: "all"
-  },
-  llm: {
-    includeMethod: true,
-    includeStatus: true,
-    includeDuration: true,
-    includeTimestamp: true,
-    includeClient: true,
-    includeSizes: true,
-    includeErrors: true,
-    includeRequestHeaders: true,
-    includeResponseHeaders: true,
-    includeRequestBody: true,
-    includeResponseBody: true,
-    bodySizeThreshold: 10,
-    format: "markdown",
-    filterMode: "all"
-  },
-  json: {
-    includeMethod: true,
-    includeStatus: true,
-    includeDuration: true,
-    includeTimestamp: true,
-    includeClient: true,
-    includeSizes: true,
-    includeErrors: true,
-    includeRequestHeaders: true,
-    includeResponseHeaders: true,
-    includeRequestBody: true,
-    includeResponseBody: true,
-    bodySizeThreshold: -1,
-    format: "json",
-    filterMode: "all"
-  },
-  full: {
-    includeMethod: true,
-    includeStatus: true,
-    includeDuration: true,
-    includeTimestamp: true,
-    includeClient: true,
-    includeSizes: true,
-    includeErrors: true,
-    includeRequestHeaders: true,
-    includeResponseHeaders: true,
-    includeRequestBody: true,
-    includeResponseBody: true,
-    bodySizeThreshold: -1,
-    format: "markdown",
-    filterMode: "all"
-  }
-};
-// Detect which preset matches current settings
-function detectActivePreset(settings) {
-  for (const [presetName, presetConfig] of Object.entries(PRESET_CONFIGS)) {
-    const matches = Object.keys(presetConfig).every(key => presetConfig[key] === settings[key]);
-    if (matches) return presetName;
-  }
-  return null; // No preset matches = Custom
-}
-
-// Size thresholds for warnings
-const SIZE_WARNING_THRESHOLD = 100 * 1024; // 100KB - show warning
-const SIZE_DANGER_THRESHOLD = 500 * 1024; // 500KB - show danger warning
-
-// Helper to format bytes for display
-function formatBytes(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-// =============================
-// DynamicFilterView chrome twins for this config (provenance:
-// shared/src/ui/components/DynamicFilterView.tsx + SectionHeader.tsx)
-// =============================
-
-/** SectionHeader DOM twin — container row, 16/8 padding, minHeight 40. */
-function SectionHeaderRow({
-  icon: Icon,
-  iconColor,
-  title,
-  actions
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: styles.sectionHeader,
-    children: [Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: styles.sectionHeaderIcon,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        size: 12,
-        color: iconColor ?? buoyColors.primary
-      })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: styles.sectionHeaderTitle,
-      children: title
-    }), actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: styles.sectionHeaderActions,
-      children: actions
-    }) : null]
-  });
-}
-
-/** DynamicFilterView's facet-card grid section for a `custom` section. */
-function FilterCardSection({
-  title,
-  options,
-  onOptionPress
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: styles.section,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeaderRow, {
-      title: title
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: styles.filterGrid,
-      children: options.map(option => {
-        const Icon = option.icon;
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-          type: "button",
-          onClick: () => onOptionPress(option.id, option.value),
-          style: {
-            ...styles.filterCard,
-            ...(option.isActive ? styles.activeFilterCard : null)
-          },
-          children: [Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-            size: 24,
-            color: option.color
-          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            style: styles.filterLabelCompact,
-            children: option.label
-          })]
-        }, option.id);
-      })
-    })]
-  });
-}
-
-// =============================
-// View (structure + logic mirror the native file 1:1)
-// =============================
-
-function NetworkCopySettingsView({
-  settings,
-  onSettingsChange,
-  events = []
-}) {
-  // DEVIATION: native reads `useFeatureGate()`; license gating isn't part of
-  // the web port, so the free-user ProFeatureBanner branch never renders.
-  const isPro = true;
-
-  // Use tick for updating relative time
-  const tick = useSharedTick();
-
-  // State for preview expansion - collapsed by default to prevent crashes
-  const [isPreviewExpanded, setIsPreviewExpanded] = (0, _react.useState)(false);
-
-  // Auto-detect if we have live data
-  const hasLiveData = events.length > 0;
-
-  // Get the most recent event timestamp for "last updated" display
-  const lastEventTimestamp = (0, _react.useMemo)(() => {
-    if (!hasLiveData) return null;
-    const timestamps = events.map(e => typeof e.timestamp === "number" ? e.timestamp : new Date(e.timestamp).getTime());
-    return Math.max(...timestamps);
-  }, [events, hasLiveData]);
-
-  // Detect active preset
-  const activePreset = (0, _react.useMemo)(() => detectActivePreset(settings), [settings]);
-
-  // Quick preset handlers
-  const applyUrlsPreset = (0, _react.useCallback)(() => {
-    onSettingsChange(PRESET_CONFIGS.urls);
-  }, [onSettingsChange]);
-  const applyLLMPreset = (0, _react.useCallback)(() => {
-    onSettingsChange(PRESET_CONFIGS.llm);
-  }, [onSettingsChange]);
-  const applyJSONPreset = (0, _react.useCallback)(() => {
-    onSettingsChange(PRESET_CONFIGS.json);
-  }, [onSettingsChange]);
-  const applyFullPreset = (0, _react.useCallback)(() => {
-    onSettingsChange(PRESET_CONFIGS.full);
-  }, [onSettingsChange]);
-
-  // Handle individual option changes
-  const handleOptionChange = (0, _react.useCallback)((optionId, value) => {
-    const [group, key] = optionId.split("::");
-    if (group === "preset") {
-      switch (key) {
-        case "urls":
-          applyUrlsPreset();
-          break;
-        case "llm":
-          applyLLMPreset();
-          break;
-        case "json":
-          applyJSONPreset();
-          break;
-        case "full":
-          applyFullPreset();
-          break;
-      }
-      return;
-    }
-    if (group === "requestInfo") {
-      // Toggle boolean value
-      onSettingsChange({
-        ...settings,
-        [key]: !settings[key]
-      });
-      return;
-    }
-    if (group === "headers") {
-      // Toggle boolean value
-      onSettingsChange({
-        ...settings,
-        [key]: !settings[key]
-      });
-      return;
-    }
-    if (group === "body") {
-      if (key === "bodySizeThreshold") {
-        onSettingsChange({
-          ...settings,
-          bodySizeThreshold: value
-        });
-      } else {
-        // Toggle boolean value
-        onSettingsChange({
-          ...settings,
-          [key]: !settings[key]
-        });
-      }
-      return;
-    }
-    if (group === "format") {
-      onSettingsChange({
-        ...settings,
-        format: value
-      });
-      return;
-    }
-    if (group === "filter") {
-      onSettingsChange({
-        ...settings,
-        filterMode: value
-      });
-    }
-  }, [settings, onSettingsChange, applyUrlsPreset, applyLLMPreset, applyJSONPreset, applyFullPreset]);
-
-  // Mock data for preview
-  const mockRequestData = (0, _react.useMemo)(() => ({
-    method: "POST",
-    url: "https://api.example.com/v1/users",
-    status: 201,
-    duration: 342,
-    timestamp: new Date().toISOString(),
-    requestHeaders: {
-      "Content-Type": "application/json",
-      Authorization: "Bearer ***"
-    },
-    responseHeaders: {
-      "Content-Type": "application/json",
-      "X-Request-ID": "abc123"
-    },
-    requestBody: {
-      name: "John Doe",
-      email: "john@example.com"
-    },
-    responseBody: {
-      id: "user_123",
-      name: "John Doe",
-      email: "john@example.com",
-      createdAt: "2025-01-10T12:00:00Z"
-    }
-  }), []);
-
-  // Estimate the size of the preview content to warn users about large payloads
-  const estimatedSize = (0, _react.useMemo)(() => {
-    const dataSource = hasLiveData ? events : [mockRequestData];
-    let totalSize = 0;
-    for (const eventData of dataSource) {
-      // Estimate based on what's included
-      if (settings.includeMethod) {
-        totalSize += (eventData.url?.length || 0) + 10;
-      }
-      if (settings.includeStatus) {
-        totalSize += 30;
-      }
-      if (settings.includeTimestamp) {
-        totalSize += 30;
-      }
-      if (settings.includeRequestHeaders) {
-        try {
-          totalSize += JSON.stringify(eventData.requestHeaders || {}).length;
-        } catch {
-          totalSize += 100;
-        }
-      }
-      if (settings.includeRequestBody) {
-        const body = "requestBody" in eventData ? eventData.requestBody : eventData.requestData;
-        try {
-          totalSize += JSON.stringify(body || {}).length;
-        } catch {
-          totalSize += 100;
-        }
-      }
-      if (settings.includeResponseBody) {
-        const body = "responseBody" in eventData ? eventData.responseBody : eventData.responseData;
-        try {
-          totalSize += JSON.stringify(body || {}).length;
-        } catch {
-          totalSize += 100;
-        }
-      }
-    }
-    return totalSize;
-  }, [hasLiveData, events, mockRequestData, settings]);
-
-  // Determine warning level based on estimated size
-  const sizeWarningLevel = (0, _react.useMemo)(() => {
-    if (estimatedSize >= SIZE_DANGER_THRESHOLD) return "danger";
-    if (estimatedSize >= SIZE_WARNING_THRESHOLD) return "warning";
-    return "none";
-  }, [estimatedSize]);
-
-  // Generate copy text - should match preview content exactly
-  const generateCopyText = (0, _react.useCallback)(() => {
-    const dataSource = hasLiveData ? events : [mockRequestData];
-    const {
-      format,
-      includeMethod,
-      includeStatus,
-      includeTimestamp,
-      includeRequestHeaders,
-      includeRequestBody,
-      includeResponseBody
-    } = settings;
-
-    // Build filtered data for a single event
-    const buildFilteredData = eventData => {
-      const data = {};
-      if (includeMethod) {
-        data.method = eventData.method;
-        data.url = eventData.url;
-      }
-      if (includeStatus) {
-        data.status = eventData.status;
-        data.duration = eventData.duration;
-      }
-      if (includeTimestamp) {
-        data.timestamp = eventData.timestamp;
-      }
-      if (includeRequestHeaders) {
-        data.requestHeaders = eventData.requestHeaders;
-      }
-      if (includeRequestBody) {
-        data.requestBody = "requestBody" in eventData ? eventData.requestBody : eventData.requestData;
-      }
-      if (includeResponseBody) {
-        data.responseBody = "responseBody" in eventData ? eventData.responseBody : eventData.responseData;
-      }
-      return data;
-    };
-    if (format === "json") {
-      const allFilteredData = dataSource.map(buildFilteredData);
-      return JSON.stringify(allFilteredData, null, 2);
-    }
-    if (format === "markdown") {
-      const allRequests = dataSource.map((eventData, index) => {
-        const sections = [];
-        sections.push(`# Request ${index + 1}`);
-        if (includeMethod) {
-          sections.push(`\n**${eventData.method}** ${eventData.url}`);
-        }
-        const metaInfo = [];
-        if (includeStatus) {
-          metaInfo.push(`**Status:** ${eventData.status}`);
-          metaInfo.push(`**Duration:** ${eventData.duration}ms`);
-        }
-        if (includeTimestamp) {
-          metaInfo.push(`**Timestamp:** ${eventData.timestamp}`);
-        }
-        if (metaInfo.length > 0) {
-          sections.push("\n" + metaInfo.join("\n"));
-        }
-        if (includeRequestHeaders) {
-          const headers = eventData.requestHeaders || {};
-          sections.push(`\n## Request Headers\n\`\`\`json\n${JSON.stringify(headers, null, 2)}\n\`\`\``);
-        }
-        if (includeRequestBody) {
-          const body = "requestBody" in eventData ? eventData.requestBody : eventData.requestData;
-          sections.push(`\n## Request Body\n\`\`\`json\n${JSON.stringify(body || {}, null, 2)}\n\`\`\``);
-        }
-        if (includeResponseBody) {
-          const body = "responseBody" in eventData ? eventData.responseBody : eventData.responseData;
-          sections.push(`\n## Response Body\n\`\`\`json\n${JSON.stringify(body || {}, null, 2)}\n\`\`\``);
-        }
-        return sections.join("\n");
-      });
-      return allRequests.join("\n\n---\n\n") || "No data included";
-    }
-
-    // Plaintext
-    const allRequests = dataSource.map((eventData, index) => {
-      const lines = [];
-      lines.push(`Request ${index + 1}:`);
-      if (includeMethod) {
-        lines.push(`${eventData.method} ${eventData.url}`);
-      }
-      if (includeStatus) {
-        lines.push(`Status: ${eventData.status}`);
-        lines.push(`Duration: ${eventData.duration}ms`);
-      }
-      if (includeTimestamp) {
-        lines.push(`Timestamp: ${eventData.timestamp}`);
-      }
-      if (includeRequestBody) {
-        const body = "requestBody" in eventData ? eventData.requestBody : eventData.requestData;
-        lines.push("\nRequest:");
-        lines.push(JSON.stringify(body || {}, null, 2));
-      }
-      if (includeResponseBody) {
-        const body = "responseBody" in eventData ? eventData.responseBody : eventData.responseData;
-        lines.push("\nResponse:");
-        lines.push(JSON.stringify(body || {}, null, 2));
-      }
-      return lines.join("\n");
-    });
-    return allRequests.join("\n\n---\n\n") || "No data included";
-  }, [hasLiveData, events, mockRequestData, settings]);
-
-  // Generate the expanded preview content (only called when expanded)
-  const generateExpandedPreviewContent = (0, _react.useCallback)(() => {
-    if (settings.format === "json") {
-      const dataSource = hasLiveData ? events : [mockRequestData];
-      const buildFilteredData = eventData => {
-        const data = {};
-        if (settings.includeMethod) {
-          data.method = eventData.method;
-          data.url = eventData.url;
-        }
-        if (settings.includeStatus) {
-          data.status = eventData.status;
-          data.duration = eventData.duration;
-        }
-        if (settings.includeTimestamp) {
-          data.timestamp = eventData.timestamp;
-        }
-        if (settings.includeRequestHeaders) {
-          data.requestHeaders = eventData.requestHeaders;
-        }
-        if (settings.includeRequestBody) {
-          data.requestBody = "requestBody" in eventData ? eventData.requestBody : eventData.requestData;
-        }
-        if (settings.includeResponseBody) {
-          data.responseBody = "responseBody" in eventData ? eventData.responseBody : eventData.responseData;
-        }
-        return data;
-      };
-      const allFilteredData = dataSource.map(buildFilteredData);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataViewer.DataViewer, {
-        data: allFilteredData,
-        title: "",
-        showTypeFilter: false
-      });
-    }
-
-    // Markdown / plaintext share the same monospace scroll box; the STRING is
-    // exactly what `generateCopyText` produces for these formats (native
-    // duplicates the builders — the outputs are identical, so the twin feeds
-    // the preview from the one builder rather than carrying a second copy).
-    const text = generateCopyText();
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: styles.previewScroll,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          ...(settings.format === "markdown" ? styles.markdownText : styles.plaintextText),
-          // Native `selectable={isPro}` — constant-true on web (deviations).
-          userSelect: isPro ? "text" : "none"
-        },
-        children: text || "No data included"
-      })
-    });
-  }, [settings, hasLiveData, events, mockRequestData, generateCopyText, isPro]);
-
-  // Generate formatted output for copying/preview - with collapsible support
-  const renderPreviewContent = () => {
-    const dataSource = hasLiveData ? events : [mockRequestData];
-    const requestCount = dataSource.length;
-
-    // Collapsed state - show summary with expand button
-    if (!isPreviewExpanded) {
-      const warningColor = sizeWarningLevel === "danger" ? macOSColors.semantic.error : sizeWarningLevel === "warning" ? macOSColors.semantic.warning : macOSColors.text.secondary;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.collapsedPreview,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          type: "button",
-          style: styles.expandButton,
-          onClick: () => setIsPreviewExpanded(true),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            style: styles.expandButtonContent,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Eye, {
-              size: 16,
-              color: macOSColors.semantic.info
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-              style: styles.expandButtonTextContainer,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                style: styles.expandButtonTitle,
-                children: "Show Preview"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                style: styles.expandButtonSubtitle,
-                children: [requestCount, " request", requestCount !== 1 ? "s" : "", " \u2022 ~", formatBytes(estimatedSize)]
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronDown, {
-              size: 16,
-              color: macOSColors.text.muted
-            })]
-          })
-        }), sizeWarningLevel !== "none" && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          style: {
-            ...styles.sizeWarning,
-            ...(sizeWarningLevel === "danger" ? styles.sizeWarningDanger : null)
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AlertTriangle, {
-            size: 12,
-            color: warningColor
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            style: {
-              ...styles.sizeWarningText,
-              color: warningColor
-            },
-            children: sizeWarningLevel === "danger" ? "Very large payload - may cause performance issues" : "Large payload - preview may be slow"
-          })]
-        })]
-      });
-    }
-
-    // Expanded state - show collapse button + actual content
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-        type: "button",
-        style: styles.collapseButton,
-        onClick: () => setIsPreviewExpanded(false),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: styles.collapseButtonText,
-          children: "Hide Preview"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronUp, {
-          size: 14,
-          color: macOSColors.text.secondary
-        })]
-      }), generateExpandedPreviewContent()]
-    });
-  };
-
-  // Preview header actions (status label and Copy button)
-  const statusLabel = hasLiveData && lastEventTimestamp ? `Live data • Updated ${formatRelativeTime(lastEventTimestamp, tick)}` : "Mock data (no events captured)";
-
-  // Section configs — ids/labels/icons/colors verbatim from the native
-  // `dynamicFilterConfig` memo.
-  const presetOptions = [{
-    id: "preset::urls",
-    label: "URLs",
-    icon: Link,
-    color: macOSColors.semantic.info,
-    value: "urls",
-    isActive: activePreset === "urls"
-  }, {
-    id: "preset::llm",
-    label: "LLM",
-    icon: Zap,
-    color: macOSColors.semantic.success,
-    value: "llm",
-    isActive: activePreset === "llm"
-  }, {
-    id: "preset::json",
-    label: "JSON",
-    icon: FileCode,
-    color: macOSColors.semantic.warning,
-    value: "json",
-    isActive: activePreset === "json"
-  }, {
-    id: "preset::full",
-    label: "Full",
-    icon: FileText,
-    color: macOSColors.semantic.info,
-    value: "full",
-    isActive: activePreset === "full"
-  }, {
-    id: "preset::custom",
-    label: "Custom",
-    icon: Settings,
-    color: macOSColors.text.secondary,
-    value: "custom",
-    isActive: activePreset === null
-  }];
-  const includeOptions = [{
-    id: "requestInfo::includeMethod",
-    label: "URL",
-    value: "includeMethod",
-    isActive: settings.includeMethod
-  }, {
-    id: "requestInfo::includeStatus",
-    label: "Status",
-    value: "includeStatus",
-    isActive: settings.includeStatus
-  }, {
-    id: "requestInfo::includeTimestamp",
-    label: "Time",
-    value: "includeTimestamp",
-    isActive: settings.includeTimestamp
-  }, {
-    id: "headers::includeRequestHeaders",
-    label: "Headers",
-    value: "includeRequestHeaders",
-    isActive: settings.includeRequestHeaders
-  }, {
-    id: "body::includeRequestBody",
-    label: "Req Body",
-    value: "includeRequestBody",
-    isActive: settings.includeRequestBody
-  }, {
-    id: "body::includeResponseBody",
-    label: "Res Body",
-    value: "includeResponseBody",
-    isActive: settings.includeResponseBody
-  }, {
-    id: "requestInfo::includeErrors",
-    label: "Errors",
-    value: "includeErrors",
-    isActive: settings.includeErrors
-  }];
-  const formatOptions = [{
-    id: "format::markdown",
-    label: "Markdown",
-    icon: FileText,
-    color: macOSColors.semantic.info,
-    value: "markdown",
-    isActive: settings.format === "markdown"
-  }, {
-    id: "format::json",
-    label: "JSON",
-    icon: FileCode,
-    color: macOSColors.semantic.warning,
-    value: "json",
-    isActive: settings.format === "json"
-  }, {
-    id: "format::plaintext",
-    label: "Text",
-    icon: Hash,
-    color: macOSColors.text.secondary,
-    value: "plaintext",
-    isActive: settings.format === "plaintext"
-  }];
-
-  // The DynamicFilterView subtree for this config: sections, then PREVIEW.
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: styles.container,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.scrollContent,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterCardSection, {
-        title: "Presets",
-        options: presetOptions,
-        onOptionPress: handleOptionChange
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterCardSection, {
-        title: "Include",
-        options: includeOptions,
-        onOptionPress: handleOptionChange
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterCardSection, {
-        title: "Format",
-        options: formatOptions,
-        onOptionPress: handleOptionChange
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.previewSection,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeaderRow, {
-          icon: Eye,
-          title: "PREVIEW",
-          actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: styles.statusLabel,
-              children: statusLabel
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataViewer.CopyButton, {
-              value: generateCopyText(),
-              size: 14,
-              "aria-label": "Copy preview"
-            })]
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.previewContent,
-          children: renderPreviewContent()
-        })]
-      })]
-    })
-  });
-}
-
-// Values mirror the native StyleSheet blocks (NetworkCopySettingsView.tsx +
-// DynamicFilterView.tsx + SectionHeader.tsx) 1:1.
-const styles = {
-  // DynamicFilterView `container` + `scrollContent`.
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: 0,
-    backgroundColor: buoyColors.base,
-    overflowY: "auto"
-  },
-  scrollContent: {
-    padding: "16px 16px 24px"
-  },
-  // DynamicFilterView `section` + `filterGrid` + cards.
-  section: {
-    marginBottom: 8
-  },
-  filterGrid: {
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-    marginTop: 8
-  },
-  filterCard: {
-    display: "flex",
-    backgroundColor: buoyColors.card,
-    borderRadius: 12,
-    padding: "10px 8px",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    border: `1px solid ${buoyColors.border}`,
-    width: 72,
-    minHeight: 68,
-    boxSizing: "border-box",
-    cursor: "pointer",
-    margin: 0,
-    fontFamily: "inherit",
-    gap: 0
-  },
-  activeFilterCard: {
-    backgroundColor: `${buoyColors.primary}33`,
-    border: `2px solid ${buoyColors.primary}`,
-    // Native: shadowColor primary, opacity 0.3, radius 8.
-    boxShadow: `0 0 8px ${buoyColors.primary}4D`
-  },
-  filterLabelCompact: {
-    fontSize: 10,
-    color: buoyColors.text,
-    fontWeight: 600,
-    textAlign: "center",
-    textTransform: "capitalize",
-    // Native textShadow 0/0.5/1 @ 0.3 black.
-    textShadow: "0 0.5px 1px rgba(0, 0, 0, 0.3)",
-    marginTop: 3
-  },
-  // SectionHeader.tsx values.
-  sectionHeader: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    padding: "8px 16px",
-    backgroundColor: buoyColors.base,
-    minHeight: 40,
-    boxSizing: "border-box"
-  },
-  sectionHeaderIcon: {
-    display: "inline-flex",
-    marginRight: 8
-  },
-  sectionHeaderTitle: {
-    flex: 1,
-    minWidth: 0,
-    fontSize: 14,
-    fontWeight: 600,
-    color: buoyColors.text,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    textAlign: "left"
-  },
-  sectionHeaderActions: {
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginLeft: "auto"
-  },
-  // DynamicFilterView `previewSection`/`previewContent`.
-  previewSection: {
-    backgroundColor: buoyColors.hover,
-    borderRadius: 16,
-    border: `1px solid ${buoyColors.borderStrong}`,
-    marginTop: 16,
-    overflow: "hidden"
-  },
-  previewContent: {
-    padding: "12px 16px 16px",
-    backgroundColor: buoyColors.base,
-    margin: "0 12px 12px",
-    borderRadius: 8,
-    border: `1px solid ${buoyColors.border}`
-  },
-  // NetworkCopySettingsView.tsx values.
-  previewScroll: {
-    maxHeight: 300,
-    overflowY: "auto"
-  },
-  markdownText: {
-    fontFamily: "ui-monospace, Menlo, monospace",
-    fontSize: 11,
-    color: macOSColors.text.primary,
-    lineHeight: "18px",
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-word",
-    userSelect: "text"
-  },
-  plaintextText: {
-    fontFamily: "ui-monospace, Menlo, monospace",
-    fontSize: 11,
-    color: macOSColors.text.primary,
-    lineHeight: "18px",
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-word",
-    userSelect: "text"
-  },
-  statusLabel: {
-    fontSize: 11,
-    fontWeight: 600,
-    color: macOSColors.text.muted,
-    marginRight: 8
-  },
-  // Collapsible preview styles
-  collapsedPreview: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 8
-  },
-  expandButton: {
-    display: "block",
-    width: "100%",
-    boxSizing: "border-box",
-    backgroundColor: macOSColors.background.input,
-    borderRadius: 8,
-    border: `1px solid ${macOSColors.border.default}`,
-    padding: 12,
-    cursor: "pointer",
-    margin: 0,
-    fontFamily: "inherit",
-    textAlign: "left"
-  },
-  expandButtonContent: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  expandButtonTextContainer: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minWidth: 0
-  },
-  expandButtonTitle: {
-    fontSize: 13,
-    fontWeight: 600,
-    color: macOSColors.text.primary
-  },
-  expandButtonSubtitle: {
-    fontSize: 11,
-    color: macOSColors.text.secondary,
-    marginTop: 2
-  },
-  collapseButton: {
-    display: "flex",
-    width: "100%",
-    boxSizing: "border-box",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    padding: "8px 0",
-    margin: "0 0 8px",
-    backgroundColor: macOSColors.background.hover,
-    borderRadius: 6,
-    border: `1px solid ${macOSColors.border.default}`,
-    cursor: "pointer",
-    fontFamily: "inherit"
-  },
-  collapseButtonText: {
-    fontSize: 12,
-    fontWeight: 500,
-    color: macOSColors.text.secondary
-  },
-  sizeWarning: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    padding: "6px 10px",
-    backgroundColor: macOSColors.semantic.warningBackground,
-    borderRadius: 6,
-    border: `1px solid ${macOSColors.semantic.warning}30`
-  },
-  sizeWarningDanger: {
-    backgroundColor: macOSColors.semantic.errorBackground,
-    border: `1px solid ${macOSColors.semantic.error}30`
-  },
-  sizeWarningText: {
-    fontSize: 11,
-    fontWeight: 500,
-    flex: 1,
-    textAlign: "left"
-  }
-};
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.DEFAULT_COPY_SETTINGS=void 0;exports.NetworkCopySettingsView=NetworkCopySettingsView;var _react=require("react");var _DataViewer=require("./DataViewer.web");var _jsxRuntime=require("react/jsx-runtime");const DEFAULT_COPY_SETTINGS=exports.DEFAULT_COPY_SETTINGS={includeMethod:true,includeStatus:true,includeDuration:true,includeTimestamp:true,includeClient:true,includeSizes:true,includeErrors:true,includeRequestHeaders:true,includeResponseHeaders:true,includeRequestBody:true,includeResponseBody:true,bodySizeThreshold:10,format:"markdown",filterMode:"all"};const buoyColors={base:"#121212",card:"#1A1A1A",hover:"#242424",border:"#333333",borderStrong:"#444444",text:"#E0E0E0",primary:"#20C997"};const macOSColors={background:{input:"#26262A",hover:"#1D1D1F"},border:{default:"#2D2D2F"},text:{primary:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93"},semantic:{success:"#34C759",error:"#FF453A",errorBackground:"rgba(255, 69, 58, 0.15)",warning:"#FFEB3B",warningBackground:"rgba(255, 235, 59, 0.15)",info:"#00B8E6"}};function Svg({size:e=14,color:r="currentColor",children:s}){return(0,_jsxRuntime.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:r,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:s})}const FileText=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"}),(0,_jsxRuntime.jsx)("path",{d:"M14 2v4a2 2 0 0 0 2 2h4"}),(0,_jsxRuntime.jsx)("path",{d:"M10 9H8"}),(0,_jsxRuntime.jsx)("path",{d:"M16 13H8"}),(0,_jsxRuntime.jsx)("path",{d:"M16 17H8"})]});const FileCode=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"}),(0,_jsxRuntime.jsx)("path",{d:"M14 2v4a2 2 0 0 0 2 2h4"}),(0,_jsxRuntime.jsx)("path",{d:"M10 12.5 8 15l2 2.5"}),(0,_jsxRuntime.jsx)("path",{d:"m14 12.5 2 2.5-2 2.5"})]});const Link=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),(0,_jsxRuntime.jsx)("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]});const Zap=e=>(0,_jsxRuntime.jsx)(Svg,{...e,children:(0,_jsxRuntime.jsx)("polygon",{points:"13 2 3 14 12 14 11 22 21 10 12 10 13 2"})});const Settings=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("path",{d:"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"}),(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"3"})]});const Hash=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("line",{x1:"4",x2:"20",y1:"9",y2:"9"}),(0,_jsxRuntime.jsx)("line",{x1:"4",x2:"20",y1:"15",y2:"15"}),(0,_jsxRuntime.jsx)("line",{x1:"10",x2:"8",y1:"3",y2:"21"}),(0,_jsxRuntime.jsx)("line",{x1:"16",x2:"14",y1:"3",y2:"21"})]});const Eye=e=>(0,_jsxRuntime.jsxs)(Svg,{...e,children:[(0,_jsxRuntime.jsx)("path",{d:"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}),(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"3"})]});const ChevronDown=e=>(0,_jsxRuntime.jsx)(Svg,{...e,children:(0,_jsxRuntime.jsx)("path",{d:"m6 9 6 6 6-6"})});const ChevronUp=e=>(0,_jsxRuntime.jsx)(Svg,{...e,children:(0,_jsxRuntime.jsx)("path",{d:"m18 15-6-6-6 6"})});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"})]});const tickListeners=new Set;let tickInterval=null;function subscribeTick(e){tickListeners.add(e);if(tickInterval==null){tickInterval=setInterval(()=>{const r=Date.now();tickListeners.forEach(s=>s(r))},5e3)}return()=>{tickListeners.delete(e);if(tickListeners.size===0&&tickInterval!=null){clearInterval(tickInterval);tickInterval=null}}}function useSharedTick(){const[e,r]=(0,_react.useState)(()=>Date.now());(0,_react.useEffect)(()=>subscribeTick(r),[]);return e}function formatRelativeTime(e,r=Date.now()){const s=e instanceof Date?e.getTime():e;const l=Math.floor((r-s)/1e3);if(l<0){return"just now"}if(l<60){return l===0?"just now":`${l}s ago`}const x=Math.floor(l/60);if(x<60){return`${x}m ago`}const h=Math.floor(x/60);if(h<24){return`${h}h ago`}const B=Math.floor(h/24);return`${B}d ago`}const PRESET_CONFIGS={urls:{includeMethod:true,includeStatus:false,includeDuration:false,includeTimestamp:false,includeClient:false,includeSizes:false,includeErrors:false,includeRequestHeaders:false,includeResponseHeaders:false,includeRequestBody:false,includeResponseBody:false,bodySizeThreshold:10,format:"plaintext",filterMode:"all"},llm:{includeMethod:true,includeStatus:true,includeDuration:true,includeTimestamp:true,includeClient:true,includeSizes:true,includeErrors:true,includeRequestHeaders:true,includeResponseHeaders:true,includeRequestBody:true,includeResponseBody:true,bodySizeThreshold:10,format:"markdown",filterMode:"all"},json:{includeMethod:true,includeStatus:true,includeDuration:true,includeTimestamp:true,includeClient:true,includeSizes:true,includeErrors:true,includeRequestHeaders:true,includeResponseHeaders:true,includeRequestBody:true,includeResponseBody:true,bodySizeThreshold:-1,format:"json",filterMode:"all"},full:{includeMethod:true,includeStatus:true,includeDuration:true,includeTimestamp:true,includeClient:true,includeSizes:true,includeErrors:true,includeRequestHeaders:true,includeResponseHeaders:true,includeRequestBody:true,includeResponseBody:true,bodySizeThreshold:-1,format:"markdown",filterMode:"all"}};function detectActivePreset(e){for(const[r,s]of Object.entries(PRESET_CONFIGS)){const l=Object.keys(s).every(x=>s[x]===e[x]);if(l)return r}return null}const SIZE_WARNING_THRESHOLD=100*1024;const SIZE_DANGER_THRESHOLD=500*1024;function formatBytes(e){if(e<1024)return`${e} B`;if(e<1024*1024)return`${(e/1024).toFixed(1)} KB`;return`${(e/(1024*1024)).toFixed(1)} MB`}function SectionHeaderRow({icon:e,iconColor:r,title:s,actions:l}){return(0,_jsxRuntime.jsxs)("div",{style:styles.sectionHeader,children:[e?(0,_jsxRuntime.jsx)("span",{style:styles.sectionHeaderIcon,children:(0,_jsxRuntime.jsx)(e,{size:12,color:r??buoyColors.primary})}):null,(0,_jsxRuntime.jsx)("span",{style:styles.sectionHeaderTitle,children:s}),l?(0,_jsxRuntime.jsx)("span",{style:styles.sectionHeaderActions,children:l}):null]})}function FilterCardSection({title:e,options:r,onOptionPress:s}){return(0,_jsxRuntime.jsxs)("div",{style:styles.section,children:[(0,_jsxRuntime.jsx)(SectionHeaderRow,{title:e}),(0,_jsxRuntime.jsx)("div",{style:styles.filterGrid,children:r.map(l=>{const x=l.icon;return(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:()=>s(l.id,l.value),style:{...styles.filterCard,...l.isActive?styles.activeFilterCard:null},children:[x?(0,_jsxRuntime.jsx)(x,{size:24,color:l.color}):null,(0,_jsxRuntime.jsx)("span",{style:styles.filterLabelCompact,children:l.label})]},l.id)})})]})}function NetworkCopySettingsView({settings:e,onSettingsChange:r,events:s=[]}){const l=true;const x=useSharedTick();const[h,B]=(0,_react.useState)(false);const m=s.length>0;const C=(0,_react.useMemo)(()=>{if(!m)return null;const u=s.map(o=>typeof o.timestamp==="number"?o.timestamp:new Date(o.timestamp).getTime());return Math.max(...u)},[s,m]);const b=(0,_react.useMemo)(()=>detectActivePreset(e),[e]);const H=(0,_react.useCallback)(()=>{r(PRESET_CONFIGS.urls)},[r]);const v=(0,_react.useCallback)(()=>{r(PRESET_CONFIGS.llm)},[r]);const M=(0,_react.useCallback)(()=>{r(PRESET_CONFIGS.json)},[r]);const z=(0,_react.useCallback)(()=>{r(PRESET_CONFIGS.full)},[r]);const R=(0,_react.useCallback)((u,o)=>{const[n,a]=u.split("::");if(n==="preset"){switch(a){case"urls":H();break;case"llm":v();break;case"json":M();break;case"full":z();break}return}if(n==="requestInfo"){r({...e,[a]:!e[a]});return}if(n==="headers"){r({...e,[a]:!e[a]});return}if(n==="body"){if(a==="bodySizeThreshold"){r({...e,bodySizeThreshold:o})}else{r({...e,[a]:!e[a]})}return}if(n==="format"){r({...e,format:o});return}if(n==="filter"){r({...e,filterMode:o})}},[e,r,H,v,M,z]);const y=(0,_react.useMemo)(()=>({method:"POST",url:"https://api.example.com/v1/users",status:201,duration:342,timestamp:new Date().toISOString(),requestHeaders:{"Content-Type":"application/json",Authorization:"Bearer ***"},responseHeaders:{"Content-Type":"application/json","X-Request-ID":"abc123"},requestBody:{name:"John Doe",email:"john@example.com"},responseBody:{id:"user_123",name:"John Doe",email:"john@example.com",createdAt:"2025-01-10T12:00:00Z"}}),[]);const g=(0,_react.useMemo)(()=>{const u=m?s:[y];let o=0;for(const n of u){if(e.includeMethod){o+=(n.url?.length||0)+10}if(e.includeStatus){o+=30}if(e.includeTimestamp){o+=30}if(e.includeRequestHeaders){try{o+=JSON.stringify(n.requestHeaders||{}).length}catch{o+=100}}if(e.includeRequestBody){const a="requestBody"in n?n.requestBody:n.requestData;try{o+=JSON.stringify(a||{}).length}catch{o+=100}}if(e.includeResponseBody){const a="responseBody"in n?n.responseBody:n.responseData;try{o+=JSON.stringify(a||{}).length}catch{o+=100}}}return o},[m,s,y,e]);const j=(0,_react.useMemo)(()=>{if(g>=SIZE_DANGER_THRESHOLD)return"danger";if(g>=SIZE_WARNING_THRESHOLD)return"warning";return"none"},[g]);const T=(0,_react.useCallback)(()=>{const u=m?s:[y];const{format:o,includeMethod:n,includeStatus:a,includeTimestamp:d,includeRequestHeaders:c,includeRequestBody:q,includeResponseBody:k}=e;const P=t=>{const i={};if(n){i.method=t.method;i.url=t.url}if(a){i.status=t.status;i.duration=t.duration}if(d){i.timestamp=t.timestamp}if(c){i.requestHeaders=t.requestHeaders}if(q){i.requestBody="requestBody"in t?t.requestBody:t.requestData}if(k){i.responseBody="responseBody"in t?t.responseBody:t.responseData}return i};if(o==="json"){const t=u.map(P);return JSON.stringify(t,null,2)}if(o==="markdown"){const t=u.map((i,p)=>{const f=[];f.push(`# Request ${p+1}`);if(n){f.push(`
+**${i.method}** ${i.url}`)}const w=[];if(a){w.push(`**Status:** ${i.status}`);w.push(`**Duration:** ${i.duration}ms`)}if(d){w.push(`**Timestamp:** ${i.timestamp}`)}if(w.length>0){f.push("\n"+w.join("\n"))}if(c){const S=i.requestHeaders||{};f.push(`
+## Request Headers
+\`\`\`json
+${JSON.stringify(S,null,2)}
+\`\`\``)}if(q){const S="requestBody"in i?i.requestBody:i.requestData;f.push(`
+## Request Body
+\`\`\`json
+${JSON.stringify(S||{},null,2)}
+\`\`\``)}if(k){const S="responseBody"in i?i.responseBody:i.responseData;f.push(`
+## Response Body
+\`\`\`json
+${JSON.stringify(S||{},null,2)}
+\`\`\``)}return f.join("\n")});return t.join("\n\n---\n\n")||"No data included"}const L=u.map((t,i)=>{const p=[];p.push(`Request ${i+1}:`);if(n){p.push(`${t.method} ${t.url}`)}if(a){p.push(`Status: ${t.status}`);p.push(`Duration: ${t.duration}ms`)}if(d){p.push(`Timestamp: ${t.timestamp}`)}if(q){const f="requestBody"in t?t.requestBody:t.requestData;p.push("\nRequest:");p.push(JSON.stringify(f||{},null,2))}if(k){const f="responseBody"in t?t.responseBody:t.responseData;p.push("\nResponse:");p.push(JSON.stringify(f||{},null,2))}return p.join("\n")});return L.join("\n\n---\n\n")||"No data included"},[m,s,y,e]);const A=(0,_react.useCallback)(()=>{if(e.format==="json"){const o=m?s:[y];const n=d=>{const c={};if(e.includeMethod){c.method=d.method;c.url=d.url}if(e.includeStatus){c.status=d.status;c.duration=d.duration}if(e.includeTimestamp){c.timestamp=d.timestamp}if(e.includeRequestHeaders){c.requestHeaders=d.requestHeaders}if(e.includeRequestBody){c.requestBody="requestBody"in d?d.requestBody:d.requestData}if(e.includeResponseBody){c.responseBody="responseBody"in d?d.responseBody:d.responseData}return c};const a=o.map(n);return(0,_jsxRuntime.jsx)(_DataViewer.DataViewer,{data:a,title:"",showTypeFilter:false})}const u=T();return(0,_jsxRuntime.jsx)("div",{style:styles.previewScroll,children:(0,_jsxRuntime.jsx)("div",{style:{...e.format==="markdown"?styles.markdownText:styles.plaintextText,userSelect:l?"text":"none"},children:u||"No data included"})})},[e,m,s,y,T,l]);const E=()=>{const u=m?s:[y];const o=u.length;if(!h){const n=j==="danger"?macOSColors.semantic.error:j==="warning"?macOSColors.semantic.warning:macOSColors.text.secondary;return(0,_jsxRuntime.jsxs)("div",{style:styles.collapsedPreview,children:[(0,_jsxRuntime.jsx)("button",{type:"button",style:styles.expandButton,onClick:()=>B(true),children:(0,_jsxRuntime.jsxs)("span",{style:styles.expandButtonContent,children:[(0,_jsxRuntime.jsx)(Eye,{size:16,color:macOSColors.semantic.info}),(0,_jsxRuntime.jsxs)("span",{style:styles.expandButtonTextContainer,children:[(0,_jsxRuntime.jsx)("span",{style:styles.expandButtonTitle,children:"Show Preview"}),(0,_jsxRuntime.jsxs)("span",{style:styles.expandButtonSubtitle,children:[o," request",o!==1?"s":""," \u2022 ~",formatBytes(g)]})]}),(0,_jsxRuntime.jsx)(ChevronDown,{size:16,color:macOSColors.text.muted})]})}),j!=="none"&&(0,_jsxRuntime.jsxs)("div",{style:{...styles.sizeWarning,...j==="danger"?styles.sizeWarningDanger:null},children:[(0,_jsxRuntime.jsx)(AlertTriangle,{size:12,color:n}),(0,_jsxRuntime.jsx)("span",{style:{...styles.sizeWarningText,color:n},children:j==="danger"?"Very large payload - may cause performance issues":"Large payload - preview may be slow"})]})]})}return(0,_jsxRuntime.jsxs)("div",{children:[(0,_jsxRuntime.jsxs)("button",{type:"button",style:styles.collapseButton,onClick:()=>B(false),children:[(0,_jsxRuntime.jsx)("span",{style:styles.collapseButtonText,children:"Hide Preview"}),(0,_jsxRuntime.jsx)(ChevronUp,{size:14,color:macOSColors.text.secondary})]}),A()]})};const F=m&&C?`Live data \u2022 Updated ${formatRelativeTime(C,x)}`:"Mock data (no events captured)";const $=[{id:"preset::urls",label:"URLs",icon:Link,color:macOSColors.semantic.info,value:"urls",isActive:b==="urls"},{id:"preset::llm",label:"LLM",icon:Zap,color:macOSColors.semantic.success,value:"llm",isActive:b==="llm"},{id:"preset::json",label:"JSON",icon:FileCode,color:macOSColors.semantic.warning,value:"json",isActive:b==="json"},{id:"preset::full",label:"Full",icon:FileText,color:macOSColors.semantic.info,value:"full",isActive:b==="full"},{id:"preset::custom",label:"Custom",icon:Settings,color:macOSColors.text.secondary,value:"custom",isActive:b===null}];const O=[{id:"requestInfo::includeMethod",label:"URL",value:"includeMethod",isActive:e.includeMethod},{id:"requestInfo::includeStatus",label:"Status",value:"includeStatus",isActive:e.includeStatus},{id:"requestInfo::includeTimestamp",label:"Time",value:"includeTimestamp",isActive:e.includeTimestamp},{id:"headers::includeRequestHeaders",label:"Headers",value:"includeRequestHeaders",isActive:e.includeRequestHeaders},{id:"body::includeRequestBody",label:"Req Body",value:"includeRequestBody",isActive:e.includeRequestBody},{id:"body::includeResponseBody",label:"Res Body",value:"includeResponseBody",isActive:e.includeResponseBody},{id:"requestInfo::includeErrors",label:"Errors",value:"includeErrors",isActive:e.includeErrors}];const I=[{id:"format::markdown",label:"Markdown",icon:FileText,color:macOSColors.semantic.info,value:"markdown",isActive:e.format==="markdown"},{id:"format::json",label:"JSON",icon:FileCode,color:macOSColors.semantic.warning,value:"json",isActive:e.format==="json"},{id:"format::plaintext",label:"Text",icon:Hash,color:macOSColors.text.secondary,value:"plaintext",isActive:e.format==="plaintext"}];return(0,_jsxRuntime.jsx)("div",{style:styles.container,children:(0,_jsxRuntime.jsxs)("div",{style:styles.scrollContent,children:[(0,_jsxRuntime.jsx)(FilterCardSection,{title:"Presets",options:$,onOptionPress:R}),(0,_jsxRuntime.jsx)(FilterCardSection,{title:"Include",options:O,onOptionPress:R}),(0,_jsxRuntime.jsx)(FilterCardSection,{title:"Format",options:I,onOptionPress:R}),(0,_jsxRuntime.jsxs)("div",{style:styles.previewSection,children:[(0,_jsxRuntime.jsx)(SectionHeaderRow,{icon:Eye,title:"PREVIEW",actions:(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("span",{style:styles.statusLabel,children:F}),(0,_jsxRuntime.jsx)(_DataViewer.CopyButton,{value:T(),size:14,"aria-label":"Copy preview"})]})}),(0,_jsxRuntime.jsx)("div",{style:styles.previewContent,children:E()})]})]})})}const styles={container:{display:"flex",flexDirection:"column",flex:1,minHeight:0,backgroundColor:buoyColors.base,overflowY:"auto"},scrollContent:{padding:"16px 16px 24px"},section:{marginBottom:8},filterGrid:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:8},filterCard:{display:"flex",backgroundColor:buoyColors.card,borderRadius:12,padding:"10px 8px",flexDirection:"column",alignItems:"center",justifyContent:"center",border:`1px solid ${buoyColors.border}`,width:72,minHeight:68,boxSizing:"border-box",cursor:"pointer",margin:0,fontFamily:"inherit",gap:0},activeFilterCard:{backgroundColor:`${buoyColors.primary}33`,border:`2px solid ${buoyColors.primary}`,boxShadow:`0 0 8px ${buoyColors.primary}4D`},filterLabelCompact:{fontSize:10,color:buoyColors.text,fontWeight:600,textAlign:"center",textTransform:"capitalize",textShadow:"0 0.5px 1px rgba(0, 0, 0, 0.3)",marginTop:3},sectionHeader:{display:"flex",flexDirection:"row",alignItems:"center",padding:"8px 16px",backgroundColor:buoyColors.base,minHeight:40,boxSizing:"border-box"},sectionHeaderIcon:{display:"inline-flex",marginRight:8},sectionHeaderTitle:{flex:1,minWidth:0,fontSize:14,fontWeight:600,color:buoyColors.text,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",textAlign:"left"},sectionHeaderActions:{display:"inline-flex",flexDirection:"row",alignItems:"center",gap:8,marginLeft:"auto"},previewSection:{backgroundColor:buoyColors.hover,borderRadius:16,border:`1px solid ${buoyColors.borderStrong}`,marginTop:16,overflow:"hidden"},previewContent:{padding:"12px 16px 16px",backgroundColor:buoyColors.base,margin:"0 12px 12px",borderRadius:8,border:`1px solid ${buoyColors.border}`},previewScroll:{maxHeight:300,overflowY:"auto"},markdownText:{fontFamily:"ui-monospace, Menlo, monospace",fontSize:11,color:macOSColors.text.primary,lineHeight:"18px",whiteSpace:"pre-wrap",wordBreak:"break-word",userSelect:"text"},plaintextText:{fontFamily:"ui-monospace, Menlo, monospace",fontSize:11,color:macOSColors.text.primary,lineHeight:"18px",whiteSpace:"pre-wrap",wordBreak:"break-word",userSelect:"text"},statusLabel:{fontSize:11,fontWeight:600,color:macOSColors.text.muted,marginRight:8},collapsedPreview:{display:"flex",flexDirection:"column",gap:8},expandButton:{display:"block",width:"100%",boxSizing:"border-box",backgroundColor:macOSColors.background.input,borderRadius:8,border:`1px solid ${macOSColors.border.default}`,padding:12,cursor:"pointer",margin:0,fontFamily:"inherit",textAlign:"left"},expandButtonContent:{display:"flex",flexDirection:"row",alignItems:"center",gap:10},expandButtonTextContainer:{display:"flex",flexDirection:"column",flex:1,minWidth:0},expandButtonTitle:{fontSize:13,fontWeight:600,color:macOSColors.text.primary},expandButtonSubtitle:{fontSize:11,color:macOSColors.text.secondary,marginTop:2},collapseButton:{display:"flex",width:"100%",boxSizing:"border-box",flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,padding:"8px 0",margin:"0 0 8px",backgroundColor:macOSColors.background.hover,borderRadius:6,border:`1px solid ${macOSColors.border.default}`,cursor:"pointer",fontFamily:"inherit"},collapseButtonText:{fontSize:12,fontWeight:500,color:macOSColors.text.secondary},sizeWarning:{display:"flex",flexDirection:"row",alignItems:"center",gap:6,padding:"6px 10px",backgroundColor:macOSColors.semantic.warningBackground,borderRadius:6,border:`1px solid ${macOSColors.semantic.warning}30`},sizeWarningDanger:{backgroundColor:macOSColors.semantic.errorBackground,border:`1px solid ${macOSColors.semantic.error}30`},sizeWarningText:{fontSize:11,fontWeight:500,flex:1,textAlign:"left"}};