@buoy-gg/network 7.0.40 → 7.0.42

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

@@ -1,1310 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NetworkFilterViewV3 = NetworkFilterViewV3;
-var _react = require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * NetworkFilterViewV3.web — DOM twin of NetworkFilterViewV3.tsx.
- *
- * Same props, same filter semantics, same screen inventory. Natively the
- * screen is a thin config over shared-ui's `DynamicFilterView`; the web shim
- * doesn't ship that component, so this twin renders the exact subtree
- * DynamicFilterView produces FOR THIS CONFIG (no tabs, no filter-summary, no
- * include-only, no preview — those config branches are disabled natively and
- * are not ported):
- *
- *  1. Facet card sections — Status (All/Success/Error/Pending, icon + count),
- *     Method (colored method badge + count, no label — native's
- *     `showLabel = type !== "method"`), Content Type (icon + count + label).
- *     Same single-select method/content-type replace behavior
- *     (`handleDynamicFilterChange` is native's handler, verbatim).
- *  2. ACTIVE FILTERS — add-pattern button → input (with the Match:
- *     Contains/Exact mode toggle rendered above it, native `renderExtra`),
- *     and the pattern list where each row removes on click and carries the
- *     CONTAINS/EXACT mode badge (native `renderPatternMeta`) that toggles the
- *     pattern's match mode.
- *  3. AVAILABLE DOMAINS & URLS — host + origin+pathname suggestions from the
- *     visible events (30 per group), click-to-add with the currently selected
- *     mode; suggestions already covered by an active pattern are hidden
- *     (native's `item.includes(pattern)` filter).
- *  4. HOW NETWORK FILTERS WORK — description + examples.
- *
- * shared-ui RN chrome replicated as DOM with provenance:
- *  - `buoyColors` — inlined verbatim subset from
- *    shared/src/ui/gameUI/constants/gameUIColors.ts (DynamicFilterView /
- *    SectionHeader / FilterComponents palette).
- *  - `macOSColors` — inlined verbatim subset from
- *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts (the mode
- *    toggle/badge palette the native screen uses directly).
- *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
- *  - Native card glow (`shadowColor` primary, opacity 0.3, radius 8) → an
- *    equivalent CSS box-shadow; native text shadows → CSS text-shadow.
- *
- * Intentional deviations (all logged):
- *  - Pattern rows nest a pressable mode badge inside a pressable row; RN's
- *    inner Touchable swallows the press, DOM needs `stopPropagation()` on the
- *    badge so toggling a mode doesn't also remove the pattern.
- *  - Native's `adjustsFontSizeToFit` on the method badge has no DOM
- *    equivalent — long method names ellipsize at the same max width instead.
- *  - The add-pattern input autofocuses via the `autoFocus` attribute rather
- *    than RN's imperative focus.
- *
- * @platform React DOM Web
- */
-
-// =============================
-// Native palettes (provenance)
-// =============================
-
-/** buoyColors subset — shared/src/ui/gameUI/constants/gameUIColors.ts, verbatim. */
-const buoyColors = {
-  base: "#121212",
-  card: "#1A1A1A",
-  hover: "#242424",
-  input: "#2A2A2A",
-  border: "#333333",
-  text: "#E0E0E0",
-  textSecondary: "#A0A0A0",
-  textMuted: "#888888",
-  primary: "#20C997"
-};
-
-/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
-const macOSColors = {
-  background: {
-    hover: "#1D1D1F"
-  },
-  border: {
-    default: "#2D2D2F"
-  },
-  text: {
-    secondary: "#A1A1A6",
-    muted: "#8E8E93"
-  },
-  semantic: {
-    success: "#34C759",
-    error: "#FF453A",
-    warning: "#FFEB3B",
-    info: "#00B8E6",
-    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 Globe = 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: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M2 12h20"
-  })]
-});
-const FileJson = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M14 2v4a2 2 0 0 0 2 2h4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M4 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M8 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"
-  })]
-});
-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 ImageIcon = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-    width: "18",
-    height: "18",
-    x: "3",
-    y: "3",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "9",
-    cy: "9",
-    r: "2"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
-  })]
-});
-const Film = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-    width: "18",
-    height: "18",
-    x: "3",
-    y: "3",
-    rx: "2"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M7 3v18"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M3 7.5h4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M3 12h18"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M3 16.5h4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M17 3v18"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M17 7.5h4"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M17 16.5h4"
-  })]
-});
-const Music = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M9 18V5l12-2v13"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "6",
-    cy: "18",
-    r: "3"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-    cx: "18",
-    cy: "16",
-    r: "3"
-  })]
-});
-const Filter = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("polygon", {
-    points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"
-  })
-});
-const Plus = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M5 12h14"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 5v14"
-  })]
-});
-const X = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M18 6 6 18"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m6 6 12 12"
-  })]
-});
-
-// =============================
-// Native helpers (verbatim from NetworkFilterViewV3.tsx)
-// =============================
-
-function getContentType(event) {
-  const headers = event.responseHeaders || event.requestHeaders;
-  const contentType = headers?.["content-type"] || headers?.["Content-Type"] || "";
-  if (contentType.includes("json")) return {
-    type: "JSON",
-    color: macOSColors.semantic.info
-  };
-  if (contentType.includes("xml")) return {
-    type: "XML",
-    color: macOSColors.semantic.success
-  };
-  if (contentType.includes("html")) return {
-    type: "HTML",
-    color: macOSColors.semantic.warning
-  };
-  if (contentType.includes("text")) return {
-    type: "TEXT",
-    color: macOSColors.semantic.success
-  };
-  if (contentType.includes("image")) return {
-    type: "IMAGE",
-    color: macOSColors.semantic.error
-  };
-  if (contentType.includes("video")) return {
-    type: "VIDEO",
-    color: macOSColors.semantic.error
-  };
-  if (contentType.includes("audio")) return {
-    type: "AUDIO",
-    color: macOSColors.semantic.debug
-  };
-  if (contentType.includes("form")) return {
-    type: "FORM",
-    color: macOSColors.semantic.info
-  };
-  return {
-    type: "OTHER",
-    color: macOSColors.text.muted
-  };
-}
-function getContentTypeIcon(type) {
-  switch (type) {
-    case "JSON":
-      return FileJson;
-    case "HTML":
-    case "XML":
-    case "TEXT":
-      return FileText;
-    case "IMAGE":
-      return ImageIcon;
-    case "VIDEO":
-      return Film;
-    case "AUDIO":
-      return Music;
-    default:
-      return Globe;
-  }
-}
-function getMethodColor(method) {
-  switch (method) {
-    case "GET":
-      return macOSColors.semantic.success;
-    case "POST":
-      return macOSColors.semantic.info;
-    case "PUT":
-      return macOSColors.semantic.warning;
-    case "DELETE":
-      return macOSColors.semantic.error;
-    case "PATCH":
-      return macOSColors.semantic.success;
-    default:
-      return macOSColors.text.muted;
-  }
-}
-
-// =============================
-// DOM twins of the shared-ui pieces DynamicFilterView composes
-// =============================
-
-/** SectionHeader twin — shared/src/ui/components/SectionHeader.tsx. */
-function SectionHeader({
-  icon: Icon,
-  iconColor,
-  title,
-  badgeCount,
-  badgeColor
-}) {
-  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
-    }), badgeCount !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: {
-        ...styles.sectionHeaderBadge,
-        backgroundColor: `${badgeColor ?? buoyColors.primary}15`,
-        border: `1px solid ${badgeColor ?? buoyColors.primary}33`
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...styles.sectionHeaderBadgeText,
-          color: badgeColor ?? buoyColors.primary
-        },
-        children: badgeCount
-      })
-    }) : null]
-  });
-}
-
-/** AddFilterButton twin — shared/src/ui/components/FilterComponents.tsx. */
-function AddFilterButton({
-  onPress,
-  color,
-  label
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-    type: "button",
-    onClick: onPress,
-    style: {
-      ...styles.addButton,
-      borderColor: `${color}40`
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Plus, {
-      size: 14,
-      color: color
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: {
-        ...styles.addButtonText,
-        color
-      },
-      children: label
-    })]
-  });
-}
-
-/** AddFilterInput twin — shared/src/ui/components/FilterComponents.tsx. */
-function AddFilterInput({
-  value,
-  onChange,
-  onSubmit,
-  onCancel,
-  placeholder,
-  color
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      ...styles.inputContainer,
-      borderColor: `${color}40`
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      value: value,
-      onChange: e => onChange(e.target.value),
-      onKeyDown: e => {
-        if (e.key === "Enter") onSubmit();
-      },
-      placeholder: placeholder,
-      style: {
-        ...styles.input,
-        color
-      },
-      autoFocus: true,
-      autoCorrect: "off",
-      autoCapitalize: "none",
-      autoComplete: "off",
-      spellCheck: false
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.inputButtons,
-      children: [value.trim() ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        type: "button",
-        onClick: onSubmit,
-        style: {
-          ...styles.inlineAddButton,
-          backgroundColor: `${color}15`,
-          borderColor: `${color}40`
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            ...styles.inlineAddButtonText,
-            color
-          },
-          children: "Add"
-        })
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        type: "button",
-        onClick: onCancel,
-        style: styles.cancelButton,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(X, {
-          size: 16,
-          color: `${color}60`
-        })
-      })]
-    })]
-  });
-}
-
-/**
- * Control panel for filtering captured network events by status, method, and
- * content type, plus ignored-pattern management — same surface as native.
- */
-function NetworkFilterViewV3({
-  events,
-  filter,
-  onFilterChange,
-  ignoredPatterns = [],
-  onRemovePattern = () => {},
-  onAddPattern = () => {},
-  onTogglePatternMode = () => {}
-}) {
-  // Mode applied when the user submits the "Add pattern" input. Defaults to
-  // `contains` so behavior matches the previous implementation until the user
-  // opts into `exact`. (Native state, verbatim.)
-  const [nextPatternMode, setNextPatternMode] = (0, _react.useState)("contains");
-
-  // DynamicFilterView's `useFilterManager` input UI state — the subset this
-  // config exercises (show/hide the add input + the draft value).
-  const [showAddInput, setShowAddInput] = (0, _react.useState)(false);
-  const [newFilter, setNewFilter] = (0, _react.useState)("");
-  const patternModes = (0, _react.useMemo)(() => {
-    const map = new Map();
-    for (const p of ignoredPatterns) map.set(p.value, p.mode);
-    return map;
-  }, [ignoredPatterns]);
-  const activePatterns = (0, _react.useMemo)(() => ignoredPatterns.map(p => p.value), [ignoredPatterns]);
-  const handlePatternAdd = (0, _react.useCallback)(pattern => {
-    onAddPattern({
-      value: pattern,
-      mode: nextPatternMode
-    });
-  }, [onAddPattern, nextPatternMode]);
-
-  // DynamicFilterView.handleAddPattern: forward the trimmed draft, then reset
-  // the input UI (its filterManager.addFilter side effect).
-  const submitDraftPattern = (0, _react.useCallback)(() => {
-    const trimmed = newFilter.trim();
-    if (!trimmed) return;
-    handlePatternAdd(trimmed);
-    setNewFilter("");
-    setShowAddInput(false);
-  }, [newFilter, handlePatternAdd]);
-  const statusCounts = (0, _react.useMemo)(() => {
-    const counts = {
-      all: events.length,
-      success: 0,
-      error: 0,
-      pending: 0
-    };
-    events.forEach(event => {
-      if (event.error || event.status && event.status >= 400) {
-        counts.error += 1;
-        return;
-      }
-      if (event.status && event.status >= 200 && event.status < 300) {
-        counts.success += 1;
-        return;
-      }
-      if (!event.status && !event.error) {
-        counts.pending += 1;
-      }
-    });
-    return counts;
-  }, [events]);
-  const methodCounts = (0, _react.useMemo)(() => {
-    return events.reduce((acc, event) => {
-      if (!event.method) return acc;
-      acc[event.method] = (acc[event.method] || 0) + 1;
-      return acc;
-    }, {});
-  }, [events]);
-  const contentTypeCounts = (0, _react.useMemo)(() => {
-    return events.reduce((acc, event) => {
-      const {
-        type
-      } = getContentType(event);
-      acc[type] = (acc[type] || 0) + 1;
-      return acc;
-    }, {});
-  }, [events]);
-  const availableDomains = (0, _react.useMemo)(() => {
-    const domains = new Set();
-    events.forEach(event => {
-      if (event.host) {
-        domains.add(event.host);
-        return;
-      }
-      try {
-        if (event.url) {
-          const parsed = new URL(event.url);
-          const host = String(parsed.host || "");
-          if (host) domains.add(host);
-        }
-      } catch {
-        // Ignore relative URLs
-      }
-    });
-    return Array.from(domains).filter(domain => domain && domain !== "").sort((a, b) => a.localeCompare(b));
-  }, [events]);
-  const availableUrls = (0, _react.useMemo)(() => {
-    const urls = new Set();
-    events.forEach(event => {
-      if (!event.url) return;
-      try {
-        const parsed = new URL(event.url);
-        const origin = String(parsed.origin || "");
-        const pathname = String(parsed.pathname || "");
-        const normalized = `${origin}${pathname}`;
-        urls.add(normalized);
-      } catch {
-        // URL constructor fails for relative paths - fall back to raw value
-        urls.add(event.url);
-      }
-    });
-    return Array.from(urls).filter(url => url && url !== "").sort((a, b) => a.localeCompare(b));
-  }, [events]);
-  const suggestionItems = (0, _react.useMemo)(() => {
-    const maxItemsPerGroup = 30;
-    const domainSuggestions = availableDomains.slice(0, maxItemsPerGroup);
-    const urlSuggestions = availableUrls.slice(0, maxItemsPerGroup);
-    return [...domainSuggestions, ...urlSuggestions];
-  }, [availableDomains, availableUrls]);
-
-  // DynamicFilterView.suggestedItems: hide suggestions any active pattern
-  // already covers (substring test, native verbatim).
-  const suggestedItems = (0, _react.useMemo)(() => suggestionItems.filter(item => !activePatterns.some(pattern => item.includes(pattern))), [suggestionItems, activePatterns]);
-  const handleDynamicFilterChange = (0, _react.useCallback)((optionId, value) => {
-    const [group] = optionId.split("::");
-    if (group === "status") {
-      const nextStatus = value === "all" ? undefined : value;
-      onFilterChange({
-        ...filter,
-        status: nextStatus
-      });
-      return;
-    }
-    if (group === "method") {
-      const methodValue = String(value);
-      const currentMethods = filter.method || [];
-      const hasMethod = currentMethods.includes(methodValue);
-      const updatedMethods = hasMethod ? currentMethods.filter(method => method !== methodValue) : [methodValue];
-      onFilterChange({
-        ...filter,
-        method: updatedMethods.length > 0 ? updatedMethods : undefined
-      });
-      return;
-    }
-    if (group === "contentType") {
-      const typeValue = String(value);
-      const currentTypes = filter.contentType || [];
-      const hasType = currentTypes.includes(typeValue);
-      const updatedTypes = hasType ? currentTypes.filter(type => type !== typeValue) : [typeValue];
-      onFilterChange({
-        ...filter,
-        contentType: updatedTypes.length > 0 ? updatedTypes : undefined
-      });
-    }
-  }, [filter, onFilterChange]);
-
-  // =============================
-  // Renderers (DynamicFilterView subtree for this config)
-  // =============================
-
-  const renderFilterCard = option => {
-    const countIsZero = option.count === 0;
-    // Native: showLabel = section.type !== "method" || option.icon
-    const showLabel = !option.isMethod || option.icon;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      type: "button",
-      onClick: () => handleDynamicFilterChange(option.id, option.value),
-      style: {
-        ...styles.filterCard,
-        ...(option.isActive ? styles.activeFilterCard : null)
-      },
-      children: [option.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(option.icon, {
-        size: 24,
-        color: option.color
-      }) : option.isMethod ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...styles.methodBadgeCompact,
-          backgroundColor: `${option.color}20`
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            ...styles.methodTextCompact,
-            color: option.color
-          },
-          children: option.label
-        })
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: countIsZero ? styles.filterCountZero : styles.filterCountActive,
-        children: option.count
-      }), showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.filterLabelCompact,
-        children: option.label
-      }) : null]
-    }, option.id);
-  };
-  const statusOptions = ["all", "success", "error", "pending"].map(status => ({
-    id: `status::${status}`,
-    label: status.charAt(0).toUpperCase() + status.slice(1),
-    count: statusCounts[status],
-    icon: status === "success" ? CheckCircle : status === "error" ? XCircle : status === "pending" ? Clock : Globe,
-    color: status === "success" ? macOSColors.semantic.success : status === "error" ? macOSColors.semantic.error : status === "pending" ? macOSColors.semantic.warning : macOSColors.semantic.info,
-    isActive: filter.status === status || !filter.status && status === "all",
-    value: status
-  }));
-  const methodEntries = Object.entries(methodCounts);
-  const contentTypeEntries = Object.entries(contentTypeCounts);
-
-  // Native renderAddFilterExtra — the Match: Contains/Exact toggle shown
-  // above the pattern input.
-  const renderAddFilterExtra = () => {
-    const options = [{
-      label: "Contains",
-      value: "contains",
-      hint: "substring"
-    }, {
-      label: "Exact",
-      value: "exact",
-      hint: "whole path/host/url"
-    }];
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.modeToggleRow,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: styles.modeToggleLabel,
-        children: "Match:"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: styles.modeToggleGroup,
-        children: options.map(opt => {
-          const isActive = nextPatternMode === opt.value;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-            type: "button",
-            onClick: () => setNextPatternMode(opt.value),
-            "aria-pressed": isActive,
-            style: {
-              ...styles.modeToggleButton,
-              ...(isActive ? styles.modeToggleButtonActive : null)
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: {
-                ...styles.modeToggleButtonText,
-                ...(isActive ? styles.modeToggleButtonTextActive : null)
-              },
-              children: opt.label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: styles.modeToggleButtonHint,
-              children: opt.hint
-            })]
-          }, opt.value);
-        })
-      })]
-    });
-  };
-
-  // Native renderPatternMeta — the CONTAINS/EXACT badge on each pattern row.
-  const renderPatternMeta = pattern => {
-    const mode = patternModes.get(pattern) ?? "contains";
-    const isExact = mode === "exact";
-    const color = isExact ? macOSColors.semantic.warning : macOSColors.semantic.info;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      "aria-label": `Match mode: ${mode}. Tap to toggle.`,
-      onClick: e => {
-        // DEVIATION (logged): RN's nested Touchable swallows the press; DOM
-        // must stop it reaching the row's remove handler.
-        e.stopPropagation();
-        onTogglePatternMode(pattern);
-      },
-      style: {
-        ...styles.modeBadge,
-        borderColor: `${color}60`,
-        backgroundColor: `${color}15`
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...styles.modeBadgeText,
-          color
-        },
-        children: isExact ? "EXACT" : "CONTAINS"
-      })
-    });
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: styles.container,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.content,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
-          title: "Status"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.filterGrid,
-          children: statusOptions.map(renderFilterCard)
-        })]
-      }), methodEntries.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
-          title: "Method"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.filterGrid,
-          children: methodEntries.map(([method, count]) => renderFilterCard({
-            id: `method::${method}`,
-            label: method,
-            count,
-            color: getMethodColor(method),
-            isActive: filter.method?.includes(method) ?? false,
-            value: method,
-            isMethod: true
-          }))
-        })]
-      }) : null, contentTypeEntries.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.section,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
-          title: "Content Type"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.filterGrid,
-          children: contentTypeEntries.map(([type, count]) => {
-            const representativeEvent = events.find(event => getContentType(event).type === type);
-            const {
-              color
-            } = representativeEvent ? getContentType(representativeEvent) : {
-              color: macOSColors.text.muted
-            };
-            return renderFilterCard({
-              id: `contentType::${type}`,
-              label: type,
-              count,
-              icon: getContentTypeIcon(type),
-              color,
-              isActive: filter.contentType?.includes(type) ?? false,
-              value: type
-            });
-          })
-        })]
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.excludeFiltersSection,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
-          icon: Filter,
-          iconColor: buoyColors.primary,
-          title: "ACTIVE FILTERS",
-          badgeCount: activePatterns.length > 0 ? activePatterns.length : undefined,
-          badgeColor: buoyColors.primary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.excludeFiltersDescription,
-          children: "Hide queries matching these patterns from the list."
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.excludeFiltersInputWrapper,
-          children: !showAddInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AddFilterButton, {
-            onPress: () => setShowAddInput(true),
-            color: buoyColors.primary,
-            label: "Add exclude pattern"
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [renderAddFilterExtra(), /*#__PURE__*/(0, _jsxRuntime.jsx)(AddFilterInput, {
-              value: newFilter,
-              onChange: setNewFilter,
-              onSubmit: submitDraftPattern,
-              onCancel: () => {
-                setShowAddInput(false);
-                setNewFilter("");
-              },
-              placeholder: "Enter domain or URL pattern...",
-              color: buoyColors.primary
-            })]
-          })
-        }), activePatterns.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.excludeFiltersContent,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: styles.filterListColumn,
-            children: activePatterns.map(pattern => /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-              type: "button",
-              onClick: () => onRemovePattern(pattern),
-              style: styles.filterItemRow,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                style: {
-                  ...styles.filterItemText,
-                  color: buoyColors.primary
-                },
-                children: pattern
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                style: styles.filterItemMeta,
-                children: renderPatternMeta(pattern)
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(X, {
-                size: 12,
-                color: `${buoyColors.primary}80`
-              })]
-            }, pattern))
-          })
-        }) : null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.availableKeysSection,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
-          icon: Plus,
-          iconColor: buoyColors.primary,
-          title: "AVAILABLE DOMAINS & URLS",
-          badgeCount: suggestedItems.length,
-          badgeColor: buoyColors.primary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.availableKeysScroll,
-          children: suggestedItems.length > 0 ? suggestedItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-            type: "button",
-            onClick: () => handlePatternAdd(item),
-            style: styles.availableKeyItem,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: styles.availableKeyText,
-              children: item
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Plus, {
-              size: 12,
-              color: buoyColors.primary
-            })]
-          }, item)) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: styles.emptyStateText,
-            children: "No network events captured yet. Domains and URLs will appear here."
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.howItWorksSection,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
-          icon: Filter,
-          iconColor: buoyColors.textSecondary,
-          title: "HOW NETWORK FILTERS WORK"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: styles.howItWorksText,
-          children: "Patterns hide matching requests from the network event list. Each pattern has a match mode you can toggle on its badge: CONTAINS hides any URL containing the text; EXACT hides only an exact path/host/url match."
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          style: styles.examplesContainer,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: styles.examplesTitle,
-            children: "EXAMPLES:"
-          }), ["• example.com (CONTAINS) → any request whose URL contains example.com", "• example.com (EXACT) → only requests served by that exact host", "• /v1 (CONTAINS) → any URL containing /v1 (e.g. /v1, /v1/users)", "• /v1 (EXACT) → only requests whose pathname is exactly /v1"].map(example => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: styles.exampleItem,
-            children: example
-          }, example))]
-        })]
-      })]
-    })
-  });
-}
-
-// Values mirror the native StyleSheet blocks 1:1 (DynamicFilterView.tsx,
-// SectionHeader.tsx, FilterComponents.tsx, NetworkFilterViewV3.tsx).
-const styles = {
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: 0,
-    backgroundColor: buoyColors.base
-  },
-  content: {
-    flex: 1,
-    minHeight: 0,
-    overflowY: "auto",
-    padding: "16px 16px 24px 16px"
-  },
-  section: {
-    marginBottom: 8
-  },
-  // SectionHeader.tsx container/title/badge
-  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,
-    fontSize: 14,
-    fontWeight: 600,
-    color: buoyColors.text,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  sectionHeaderBadge: {
-    display: "inline-flex",
-    alignItems: "center",
-    padding: "3px 8px",
-    borderRadius: 12,
-    marginLeft: 8
-  },
-  sectionHeaderBadgeText: {
-    fontSize: 12,
-    fontWeight: 600
-  },
-  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
-  },
-  activeFilterCard: {
-    backgroundColor: `${buoyColors.primary}33`,
-    border: `2px solid ${buoyColors.primary}`,
-    // Native: shadowColor primary, offset 0/0, opacity 0.3, radius 8.
-    boxShadow: `0 0 8px ${buoyColors.primary}4D`
-  },
-  filterCountActive: {
-    fontSize: 14,
-    fontWeight: 700,
-    color: buoyColors.text,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    marginTop: 3,
-    marginBottom: 1,
-    textShadow: "0 0.5px 1px rgba(0, 0, 0, 0.2)"
-  },
-  filterCountZero: {
-    fontSize: 11,
-    fontWeight: 500,
-    color: buoyColors.textMuted,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    marginTop: 3,
-    marginBottom: 1
-  },
-  filterLabelCompact: {
-    fontSize: 10,
-    color: buoyColors.text,
-    fontWeight: 600,
-    textAlign: "center",
-    textTransform: "capitalize",
-    textShadow: "0 0.5px 1px rgba(0, 0, 0, 0.3)"
-  },
-  methodBadgeCompact: {
-    display: "inline-flex",
-    padding: "4px 8px",
-    borderRadius: 5,
-    minWidth: 48,
-    maxWidth: 60,
-    boxSizing: "border-box",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  methodTextCompact: {
-    fontSize: 13,
-    fontWeight: 700,
-    letterSpacing: 0.3,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  excludeFiltersSection: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 16,
-    border: `1px solid ${buoyColors.border}`,
-    marginTop: 16,
-    overflow: "hidden"
-  },
-  excludeFiltersDescription: {
-    fontSize: 10,
-    color: buoyColors.textSecondary,
-    padding: "8px 16px 0 16px",
-    lineHeight: "14px"
-  },
-  excludeFiltersInputWrapper: {
-    padding: "8px 16px"
-  },
-  excludeFiltersContent: {
-    padding: "0 16px 16px 16px",
-    maxHeight: 150,
-    overflowY: "auto"
-  },
-  filterListColumn: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 8
-  },
-  filterItemRow: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "10px 12px",
-    backgroundColor: buoyColors.hover,
-    borderRadius: 8,
-    border: `1px solid ${buoyColors.border}`,
-    cursor: "pointer",
-    margin: 0,
-    width: "100%",
-    boxSizing: "border-box",
-    textAlign: "left"
-  },
-  filterItemText: {
-    flex: 1,
-    fontSize: 12,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    marginRight: 8,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    minWidth: 0
-  },
-  filterItemMeta: {
-    display: "inline-flex",
-    marginRight: 8
-  },
-  // NetworkFilterViewV3.tsx modeBadge / modeToggle styles
-  modeBadge: {
-    display: "inline-flex",
-    padding: "3px 8px",
-    borderRadius: 6,
-    borderWidth: 1,
-    borderStyle: "solid",
-    background: "none",
-    cursor: "pointer",
-    margin: 0
-  },
-  modeBadgeText: {
-    fontSize: 9,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    fontWeight: 700,
-    letterSpacing: 0.5
-  },
-  modeToggleRow: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 8
-  },
-  modeToggleLabel: {
-    fontSize: 11,
-    fontWeight: 600,
-    color: macOSColors.text.secondary,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    letterSpacing: 0.3
-  },
-  modeToggleGroup: {
-    display: "flex",
-    flexDirection: "row",
-    gap: 6,
-    flex: 1
-  },
-  modeToggleButton: {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    padding: "6px 10px",
-    borderRadius: 8,
-    border: `1px solid ${macOSColors.border.default}`,
-    backgroundColor: macOSColors.background.hover,
-    alignItems: "center",
-    cursor: "pointer",
-    margin: 0
-  },
-  modeToggleButtonActive: {
-    border: `1px solid ${macOSColors.semantic.info}`,
-    backgroundColor: `${macOSColors.semantic.info}22`
-  },
-  modeToggleButtonText: {
-    fontSize: 11,
-    fontWeight: 700,
-    color: macOSColors.text.secondary,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    letterSpacing: 0.3
-  },
-  modeToggleButtonTextActive: {
-    color: macOSColors.semantic.info
-  },
-  modeToggleButtonHint: {
-    fontSize: 9,
-    color: macOSColors.text.muted,
-    marginTop: 1
-  },
-  // FilterComponents.tsx add button/input
-  addButton: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "10px 14px",
-    borderRadius: 10,
-    borderWidth: 1,
-    borderStyle: "dashed",
-    backgroundColor: buoyColors.input,
-    cursor: "pointer",
-    margin: 0,
-    width: "100%",
-    boxSizing: "border-box"
-  },
-  addButtonText: {
-    fontSize: 13,
-    fontWeight: 500,
-    marginLeft: 6
-  },
-  inputContainer: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: buoyColors.input,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderStyle: "solid",
-    padding: "10px 14px",
-    marginBottom: 8,
-    boxSizing: "border-box"
-  },
-  input: {
-    flex: 1,
-    fontSize: 13,
-    padding: 0,
-    border: "none",
-    outline: "none",
-    background: "transparent",
-    fontFamily: "inherit",
-    minWidth: 0
-  },
-  inputButtons: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  cancelButton: {
-    display: "inline-flex",
-    padding: 4,
-    borderRadius: 6,
-    backgroundColor: buoyColors.hover,
-    border: "none",
-    cursor: "pointer",
-    margin: 0
-  },
-  inlineAddButton: {
-    display: "inline-flex",
-    padding: "6px 12px",
-    borderRadius: 6,
-    borderWidth: 1,
-    borderStyle: "solid",
-    cursor: "pointer",
-    margin: 0
-  },
-  inlineAddButtonText: {
-    fontSize: 12,
-    fontWeight: 600
-  },
-  availableKeysSection: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 16,
-    border: `1px solid ${buoyColors.border}`,
-    marginTop: 16,
-    overflow: "hidden"
-  },
-  availableKeysScroll: {
-    maxHeight: 150,
-    overflowY: "auto",
-    padding: "8px 16px 16px 16px"
-  },
-  availableKeyItem: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "10px 12px",
-    backgroundColor: buoyColors.hover,
-    borderRadius: 8,
-    border: `1px solid ${buoyColors.border}`,
-    marginBottom: 8,
-    cursor: "pointer",
-    width: "100%",
-    boxSizing: "border-box",
-    textAlign: "left"
-  },
-  availableKeyText: {
-    flex: 1,
-    fontSize: 11,
-    color: buoyColors.text,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    marginRight: 8,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    minWidth: 0
-  },
-  emptyStateText: {
-    fontSize: 11,
-    color: buoyColors.textMuted,
-    fontStyle: "italic",
-    textAlign: "center",
-    padding: "12px 0"
-  },
-  howItWorksSection: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 16,
-    border: `1px solid ${buoyColors.border}`,
-    marginTop: 16,
-    overflow: "hidden"
-  },
-  howItWorksText: {
-    fontSize: 11,
-    color: buoyColors.textSecondary,
-    lineHeight: "16px",
-    margin: "8px 0 12px 0",
-    padding: "0 16px",
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  examplesContainer: {
-    padding: "8px 16px 16px 16px",
-    borderTop: `1px solid ${buoyColors.border}`
-  },
-  examplesTitle: {
-    fontSize: 10,
-    fontWeight: 600,
-    color: buoyColors.textMuted,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    letterSpacing: 0.5,
-    marginBottom: 6
-  },
-  exampleItem: {
-    fontSize: 10,
-    color: buoyColors.textMuted,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    lineHeight: "16px"
-  }
-};
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.NetworkFilterViewV3=NetworkFilterViewV3;var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");const buoyColors={base:"#121212",card:"#1A1A1A",hover:"#242424",input:"#2A2A2A",border:"#333333",text:"#E0E0E0",textSecondary:"#A0A0A0",textMuted:"#888888",primary:"#20C997"};const macOSColors={background:{hover:"#1D1D1F"},border:{default:"#2D2D2F"},text:{secondary:"#A1A1A6",muted:"#8E8E93"},semantic:{success:"#34C759",error:"#FF453A",warning:"#FFEB3B",info:"#00B8E6",debug:"#BF5AF2"}};function Svg({size:o=14,color:r="currentColor",children:i}){return(0,_jsxRuntime.jsx)("svg",{width:o,height:o,viewBox:"0 0 24 24",fill:"none",stroke:r,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:i})}const CheckCircle=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,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=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,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=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("polyline",{points:"12 6 12 12 16 14"})]});const Globe=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,children:[(0,_jsxRuntime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,_jsxRuntime.jsx)("path",{d:"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}),(0,_jsxRuntime.jsx)("path",{d:"M2 12h20"})]});const FileJson=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,children:[(0,_jsxRuntime.jsx)("path",{d:"M14 2v4a2 2 0 0 0 2 2h4"}),(0,_jsxRuntime.jsx)("path",{d:"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"}),(0,_jsxRuntime.jsx)("path",{d:"M4 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"}),(0,_jsxRuntime.jsx)("path",{d:"M8 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"})]});const FileText=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,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 ImageIcon=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,children:[(0,_jsxRuntime.jsx)("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2"}),(0,_jsxRuntime.jsx)("circle",{cx:"9",cy:"9",r:"2"}),(0,_jsxRuntime.jsx)("path",{d:"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"})]});const Film=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,children:[(0,_jsxRuntime.jsx)("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}),(0,_jsxRuntime.jsx)("path",{d:"M7 3v18"}),(0,_jsxRuntime.jsx)("path",{d:"M3 7.5h4"}),(0,_jsxRuntime.jsx)("path",{d:"M3 12h18"}),(0,_jsxRuntime.jsx)("path",{d:"M3 16.5h4"}),(0,_jsxRuntime.jsx)("path",{d:"M17 3v18"}),(0,_jsxRuntime.jsx)("path",{d:"M17 7.5h4"}),(0,_jsxRuntime.jsx)("path",{d:"M17 16.5h4"})]});const Music=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,children:[(0,_jsxRuntime.jsx)("path",{d:"M9 18V5l12-2v13"}),(0,_jsxRuntime.jsx)("circle",{cx:"6",cy:"18",r:"3"}),(0,_jsxRuntime.jsx)("circle",{cx:"18",cy:"16",r:"3"})]});const Filter=o=>(0,_jsxRuntime.jsx)(Svg,{...o,children:(0,_jsxRuntime.jsx)("polygon",{points:"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"})});const Plus=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,children:[(0,_jsxRuntime.jsx)("path",{d:"M5 12h14"}),(0,_jsxRuntime.jsx)("path",{d:"M12 5v14"})]});const X=o=>(0,_jsxRuntime.jsxs)(Svg,{...o,children:[(0,_jsxRuntime.jsx)("path",{d:"M18 6 6 18"}),(0,_jsxRuntime.jsx)("path",{d:"m6 6 12 12"})]});function getContentType(o){const r=o.responseHeaders||o.requestHeaders;const i=r?.["content-type"]||r?.["Content-Type"]||"";if(i.includes("json"))return{type:"JSON",color:macOSColors.semantic.info};if(i.includes("xml"))return{type:"XML",color:macOSColors.semantic.success};if(i.includes("html"))return{type:"HTML",color:macOSColors.semantic.warning};if(i.includes("text"))return{type:"TEXT",color:macOSColors.semantic.success};if(i.includes("image"))return{type:"IMAGE",color:macOSColors.semantic.error};if(i.includes("video"))return{type:"VIDEO",color:macOSColors.semantic.error};if(i.includes("audio"))return{type:"AUDIO",color:macOSColors.semantic.debug};if(i.includes("form"))return{type:"FORM",color:macOSColors.semantic.info};return{type:"OTHER",color:macOSColors.text.muted}}function getContentTypeIcon(o){switch(o){case"JSON":return FileJson;case"HTML":case"XML":case"TEXT":return FileText;case"IMAGE":return ImageIcon;case"VIDEO":return Film;case"AUDIO":return Music;default:return Globe}}function getMethodColor(o){switch(o){case"GET":return macOSColors.semantic.success;case"POST":return macOSColors.semantic.info;case"PUT":return macOSColors.semantic.warning;case"DELETE":return macOSColors.semantic.error;case"PATCH":return macOSColors.semantic.success;default:return macOSColors.text.muted}}function SectionHeader({icon:o,iconColor:r,title:i,badgeCount:a,badgeColor:d}){return(0,_jsxRuntime.jsxs)("div",{style:styles.sectionHeader,children:[o?(0,_jsxRuntime.jsx)("span",{style:styles.sectionHeaderIcon,children:(0,_jsxRuntime.jsx)(o,{size:12,color:r??buoyColors.primary})}):null,(0,_jsxRuntime.jsx)("span",{style:styles.sectionHeaderTitle,children:i}),a!==void 0?(0,_jsxRuntime.jsx)("span",{style:{...styles.sectionHeaderBadge,backgroundColor:`${d??buoyColors.primary}15`,border:`1px solid ${d??buoyColors.primary}33`},children:(0,_jsxRuntime.jsx)("span",{style:{...styles.sectionHeaderBadgeText,color:d??buoyColors.primary},children:a})}):null]})}function AddFilterButton({onPress:o,color:r,label:i}){return(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:o,style:{...styles.addButton,borderColor:`${r}40`},children:[(0,_jsxRuntime.jsx)(Plus,{size:14,color:r}),(0,_jsxRuntime.jsx)("span",{style:{...styles.addButtonText,color:r},children:i})]})}function AddFilterInput({value:o,onChange:r,onSubmit:i,onCancel:a,placeholder:d,color:c}){return(0,_jsxRuntime.jsxs)("div",{style:{...styles.inputContainer,borderColor:`${c}40`},children:[(0,_jsxRuntime.jsx)("input",{value:o,onChange:u=>r(u.target.value),onKeyDown:u=>{if(u.key==="Enter")i()},placeholder:d,style:{...styles.input,color:c},autoFocus:true,autoCorrect:"off",autoCapitalize:"none",autoComplete:"off",spellCheck:false}),(0,_jsxRuntime.jsxs)("div",{style:styles.inputButtons,children:[o.trim()?(0,_jsxRuntime.jsx)("button",{type:"button",onClick:i,style:{...styles.inlineAddButton,backgroundColor:`${c}15`,borderColor:`${c}40`},children:(0,_jsxRuntime.jsx)("span",{style:{...styles.inlineAddButtonText,color:c},children:"Add"})}):null,(0,_jsxRuntime.jsx)("button",{type:"button",onClick:a,style:styles.cancelButton,children:(0,_jsxRuntime.jsx)(X,{size:16,color:`${c}60`})})]})]})}function NetworkFilterViewV3({events:o,filter:r,onFilterChange:i,ignoredPatterns:a=[],onRemovePattern:d=()=>{},onAddPattern:c=()=>{},onTogglePatternMode:u=()=>{}}){const[h,I]=(0,_react.useState)("contains");const[k,g]=(0,_react.useState)(false);const[f,y]=(0,_react.useState)("");const B=(0,_react.useMemo)(()=>{const e=new Map;for(const t of a)e.set(t.value,t.mode);return e},[a]);const x=(0,_react.useMemo)(()=>a.map(e=>e.value),[a]);const b=(0,_react.useCallback)(e=>{c({value:e,mode:h})},[c,h]);const F=(0,_react.useCallback)(()=>{const e=f.trim();if(!e)return;b(e);y("");g(false)},[f,b]);const E=(0,_react.useMemo)(()=>{const e={all:o.length,success:0,error:0,pending:0};o.forEach(t=>{if(t.error||t.status&&t.status>=400){e.error+=1;return}if(t.status&&t.status>=200&&t.status<300){e.success+=1;return}if(!t.status&&!t.error){e.pending+=1}});return e},[o]);const R=(0,_react.useMemo)(()=>{return o.reduce((e,t)=>{if(!t.method)return e;e[t.method]=(e[t.method]||0)+1;return e},{})},[o]);const z=(0,_react.useMemo)(()=>{return o.reduce((e,t)=>{const{type:n}=getContentType(t);e[n]=(e[n]||0)+1;return e},{})},[o]);const S=(0,_react.useMemo)(()=>{const e=new Set;o.forEach(t=>{if(t.host){e.add(t.host);return}try{if(t.url){const n=new URL(t.url);const s=String(n.host||"");if(s)e.add(s)}}catch{}});return Array.from(e).filter(t=>t&&t!=="").sort((t,n)=>t.localeCompare(n))},[o]);const v=(0,_react.useMemo)(()=>{const e=new Set;o.forEach(t=>{if(!t.url)return;try{const n=new URL(t.url);const s=String(n.origin||"");const l=String(n.pathname||"");const p=`${s}${l}`;e.add(p)}catch{e.add(t.url)}});return Array.from(e).filter(t=>t&&t!=="").sort((t,n)=>t.localeCompare(n))},[o]);const w=(0,_react.useMemo)(()=>{const e=30;const t=S.slice(0,e);const n=v.slice(0,e);return[...t,...n]},[S,v]);const j=(0,_react.useMemo)(()=>w.filter(e=>!x.some(t=>e.includes(t))),[w,x]);const H=(0,_react.useCallback)((e,t)=>{const[n]=e.split("::");if(n==="status"){const s=t==="all"?void 0:t;i({...r,status:s});return}if(n==="method"){const s=String(t);const l=r.method||[];const p=l.includes(s);const m=p?l.filter(T=>T!==s):[s];i({...r,method:m.length>0?m:void 0});return}if(n==="contentType"){const s=String(t);const l=r.contentType||[];const p=l.includes(s);const m=p?l.filter(T=>T!==s):[s];i({...r,contentType:m.length>0?m:void 0})}},[r,i]);const C=e=>{const t=e.count===0;const n=!e.isMethod||e.icon;return(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:()=>H(e.id,e.value),style:{...styles.filterCard,...e.isActive?styles.activeFilterCard:null},children:[e.icon?(0,_jsxRuntime.jsx)(e.icon,{size:24,color:e.color}):e.isMethod?(0,_jsxRuntime.jsx)("span",{style:{...styles.methodBadgeCompact,backgroundColor:`${e.color}20`},children:(0,_jsxRuntime.jsx)("span",{style:{...styles.methodTextCompact,color:e.color},children:e.label})}):null,(0,_jsxRuntime.jsx)("span",{style:t?styles.filterCountZero:styles.filterCountActive,children:e.count}),n?(0,_jsxRuntime.jsx)("span",{style:styles.filterLabelCompact,children:e.label}):null]},e.id)};const W=["all","success","error","pending"].map(e=>({id:`status::${e}`,label:e.charAt(0).toUpperCase()+e.slice(1),count:E[e],icon:e==="success"?CheckCircle:e==="error"?XCircle:e==="pending"?Clock:Globe,color:e==="success"?macOSColors.semantic.success:e==="error"?macOSColors.semantic.error:e==="pending"?macOSColors.semantic.warning:macOSColors.semantic.info,isActive:r.status===e||!r.status&&e==="all",value:e}));const M=Object.entries(R);const A=Object.entries(z);const D=()=>{const e=[{label:"Contains",value:"contains",hint:"substring"},{label:"Exact",value:"exact",hint:"whole path/host/url"}];return(0,_jsxRuntime.jsxs)("div",{style:styles.modeToggleRow,children:[(0,_jsxRuntime.jsx)("span",{style:styles.modeToggleLabel,children:"Match:"}),(0,_jsxRuntime.jsx)("div",{style:styles.modeToggleGroup,children:e.map(t=>{const n=h===t.value;return(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:()=>I(t.value),"aria-pressed":n,style:{...styles.modeToggleButton,...n?styles.modeToggleButtonActive:null},children:[(0,_jsxRuntime.jsx)("span",{style:{...styles.modeToggleButtonText,...n?styles.modeToggleButtonTextActive:null},children:t.label}),(0,_jsxRuntime.jsx)("span",{style:styles.modeToggleButtonHint,children:t.hint})]},t.value)})})]})};const L=e=>{const t=B.get(e)??"contains";const n=t==="exact";const s=n?macOSColors.semantic.warning:macOSColors.semantic.info;return(0,_jsxRuntime.jsx)("button",{type:"button","aria-label":`Match mode: ${t}. Tap to toggle.`,onClick:l=>{l.stopPropagation();u(e)},style:{...styles.modeBadge,borderColor:`${s}60`,backgroundColor:`${s}15`},children:(0,_jsxRuntime.jsx)("span",{style:{...styles.modeBadgeText,color:s},children:n?"EXACT":"CONTAINS"})})};return(0,_jsxRuntime.jsx)("div",{style:styles.container,children:(0,_jsxRuntime.jsxs)("div",{style:styles.content,children:[(0,_jsxRuntime.jsxs)("div",{style:styles.section,children:[(0,_jsxRuntime.jsx)(SectionHeader,{title:"Status"}),(0,_jsxRuntime.jsx)("div",{style:styles.filterGrid,children:W.map(C)})]}),M.length>0?(0,_jsxRuntime.jsxs)("div",{style:styles.section,children:[(0,_jsxRuntime.jsx)(SectionHeader,{title:"Method"}),(0,_jsxRuntime.jsx)("div",{style:styles.filterGrid,children:M.map(([e,t])=>C({id:`method::${e}`,label:e,count:t,color:getMethodColor(e),isActive:r.method?.includes(e)??false,value:e,isMethod:true}))})]}):null,A.length>0?(0,_jsxRuntime.jsxs)("div",{style:styles.section,children:[(0,_jsxRuntime.jsx)(SectionHeader,{title:"Content Type"}),(0,_jsxRuntime.jsx)("div",{style:styles.filterGrid,children:A.map(([e,t])=>{const n=o.find(l=>getContentType(l).type===e);const{color:s}=n?getContentType(n):{color:macOSColors.text.muted};return C({id:`contentType::${e}`,label:e,count:t,icon:getContentTypeIcon(e),color:s,isActive:r.contentType?.includes(e)??false,value:e})})})]}):null,(0,_jsxRuntime.jsxs)("div",{style:styles.excludeFiltersSection,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:Filter,iconColor:buoyColors.primary,title:"ACTIVE FILTERS",badgeCount:x.length>0?x.length:void 0,badgeColor:buoyColors.primary}),(0,_jsxRuntime.jsx)("div",{style:styles.excludeFiltersDescription,children:"Hide queries matching these patterns from the list."}),(0,_jsxRuntime.jsx)("div",{style:styles.excludeFiltersInputWrapper,children:!k?(0,_jsxRuntime.jsx)(AddFilterButton,{onPress:()=>g(true),color:buoyColors.primary,label:"Add exclude pattern"}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[D(),(0,_jsxRuntime.jsx)(AddFilterInput,{value:f,onChange:y,onSubmit:F,onCancel:()=>{g(false);y("")},placeholder:"Enter domain or URL pattern...",color:buoyColors.primary})]})}),x.length>0?(0,_jsxRuntime.jsx)("div",{style:styles.excludeFiltersContent,children:(0,_jsxRuntime.jsx)("div",{style:styles.filterListColumn,children:x.map(e=>(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:()=>d(e),style:styles.filterItemRow,children:[(0,_jsxRuntime.jsx)("span",{style:{...styles.filterItemText,color:buoyColors.primary},children:e}),(0,_jsxRuntime.jsx)("span",{style:styles.filterItemMeta,children:L(e)}),(0,_jsxRuntime.jsx)(X,{size:12,color:`${buoyColors.primary}80`})]},e))})}):null]}),(0,_jsxRuntime.jsxs)("div",{style:styles.availableKeysSection,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:Plus,iconColor:buoyColors.primary,title:"AVAILABLE DOMAINS & URLS",badgeCount:j.length,badgeColor:buoyColors.primary}),(0,_jsxRuntime.jsx)("div",{style:styles.availableKeysScroll,children:j.length>0?j.map(e=>(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:()=>b(e),style:styles.availableKeyItem,children:[(0,_jsxRuntime.jsx)("span",{style:styles.availableKeyText,children:e}),(0,_jsxRuntime.jsx)(Plus,{size:12,color:buoyColors.primary})]},e)):(0,_jsxRuntime.jsx)("div",{style:styles.emptyStateText,children:"No network events captured yet. Domains and URLs will appear here."})})]}),(0,_jsxRuntime.jsxs)("div",{style:styles.howItWorksSection,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:Filter,iconColor:buoyColors.textSecondary,title:"HOW NETWORK FILTERS WORK"}),(0,_jsxRuntime.jsx)("div",{style:styles.howItWorksText,children:"Patterns hide matching requests from the network event list. Each pattern has a match mode you can toggle on its badge: CONTAINS hides any URL containing the text; EXACT hides only an exact path/host/url match."}),(0,_jsxRuntime.jsxs)("div",{style:styles.examplesContainer,children:[(0,_jsxRuntime.jsx)("div",{style:styles.examplesTitle,children:"EXAMPLES:"}),["\u2022 example.com (CONTAINS) \u2192 any request whose URL contains example.com","\u2022 example.com (EXACT) \u2192 only requests served by that exact host","\u2022 /v1 (CONTAINS) \u2192 any URL containing /v1 (e.g. /v1, /v1/users)","\u2022 /v1 (EXACT) \u2192 only requests whose pathname is exactly /v1"].map(e=>(0,_jsxRuntime.jsx)("div",{style:styles.exampleItem,children:e},e))]})]})]})})}const styles={container:{display:"flex",flexDirection:"column",flex:1,minHeight:0,backgroundColor:buoyColors.base},content:{flex:1,minHeight:0,overflowY:"auto",padding:"16px 16px 24px 16px"},section:{marginBottom:8},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,fontSize:14,fontWeight:600,color:buoyColors.text,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},sectionHeaderBadge:{display:"inline-flex",alignItems:"center",padding:"3px 8px",borderRadius:12,marginLeft:8},sectionHeaderBadgeText:{fontSize:12,fontWeight:600},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},activeFilterCard:{backgroundColor:`${buoyColors.primary}33`,border:`2px solid ${buoyColors.primary}`,boxShadow:`0 0 8px ${buoyColors.primary}4D`},filterCountActive:{fontSize:14,fontWeight:700,color:buoyColors.text,fontFamily:"ui-monospace, Menlo, monospace",marginTop:3,marginBottom:1,textShadow:"0 0.5px 1px rgba(0, 0, 0, 0.2)"},filterCountZero:{fontSize:11,fontWeight:500,color:buoyColors.textMuted,fontFamily:"ui-monospace, Menlo, monospace",marginTop:3,marginBottom:1},filterLabelCompact:{fontSize:10,color:buoyColors.text,fontWeight:600,textAlign:"center",textTransform:"capitalize",textShadow:"0 0.5px 1px rgba(0, 0, 0, 0.3)"},methodBadgeCompact:{display:"inline-flex",padding:"4px 8px",borderRadius:5,minWidth:48,maxWidth:60,boxSizing:"border-box",alignItems:"center",justifyContent:"center"},methodTextCompact:{fontSize:13,fontWeight:700,letterSpacing:.3,fontFamily:"ui-monospace, Menlo, monospace",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},excludeFiltersSection:{backgroundColor:buoyColors.card,borderRadius:16,border:`1px solid ${buoyColors.border}`,marginTop:16,overflow:"hidden"},excludeFiltersDescription:{fontSize:10,color:buoyColors.textSecondary,padding:"8px 16px 0 16px",lineHeight:"14px"},excludeFiltersInputWrapper:{padding:"8px 16px"},excludeFiltersContent:{padding:"0 16px 16px 16px",maxHeight:150,overflowY:"auto"},filterListColumn:{display:"flex",flexDirection:"column",gap:8},filterItemRow:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:"10px 12px",backgroundColor:buoyColors.hover,borderRadius:8,border:`1px solid ${buoyColors.border}`,cursor:"pointer",margin:0,width:"100%",boxSizing:"border-box",textAlign:"left"},filterItemText:{flex:1,fontSize:12,fontFamily:"ui-monospace, Menlo, monospace",marginRight:8,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",minWidth:0},filterItemMeta:{display:"inline-flex",marginRight:8},modeBadge:{display:"inline-flex",padding:"3px 8px",borderRadius:6,borderWidth:1,borderStyle:"solid",background:"none",cursor:"pointer",margin:0},modeBadgeText:{fontSize:9,fontFamily:"ui-monospace, Menlo, monospace",fontWeight:700,letterSpacing:.5},modeToggleRow:{display:"flex",flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},modeToggleLabel:{fontSize:11,fontWeight:600,color:macOSColors.text.secondary,fontFamily:"ui-monospace, Menlo, monospace",letterSpacing:.3},modeToggleGroup:{display:"flex",flexDirection:"row",gap:6,flex:1},modeToggleButton:{flex:1,display:"flex",flexDirection:"column",padding:"6px 10px",borderRadius:8,border:`1px solid ${macOSColors.border.default}`,backgroundColor:macOSColors.background.hover,alignItems:"center",cursor:"pointer",margin:0},modeToggleButtonActive:{border:`1px solid ${macOSColors.semantic.info}`,backgroundColor:`${macOSColors.semantic.info}22`},modeToggleButtonText:{fontSize:11,fontWeight:700,color:macOSColors.text.secondary,fontFamily:"ui-monospace, Menlo, monospace",letterSpacing:.3},modeToggleButtonTextActive:{color:macOSColors.semantic.info},modeToggleButtonHint:{fontSize:9,color:macOSColors.text.muted,marginTop:1},addButton:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",padding:"10px 14px",borderRadius:10,borderWidth:1,borderStyle:"dashed",backgroundColor:buoyColors.input,cursor:"pointer",margin:0,width:"100%",boxSizing:"border-box"},addButtonText:{fontSize:13,fontWeight:500,marginLeft:6},inputContainer:{display:"flex",flexDirection:"row",alignItems:"center",backgroundColor:buoyColors.input,borderRadius:10,borderWidth:1,borderStyle:"solid",padding:"10px 14px",marginBottom:8,boxSizing:"border-box"},input:{flex:1,fontSize:13,padding:0,border:"none",outline:"none",background:"transparent",fontFamily:"inherit",minWidth:0},inputButtons:{display:"flex",flexDirection:"row",alignItems:"center",gap:8},cancelButton:{display:"inline-flex",padding:4,borderRadius:6,backgroundColor:buoyColors.hover,border:"none",cursor:"pointer",margin:0},inlineAddButton:{display:"inline-flex",padding:"6px 12px",borderRadius:6,borderWidth:1,borderStyle:"solid",cursor:"pointer",margin:0},inlineAddButtonText:{fontSize:12,fontWeight:600},availableKeysSection:{backgroundColor:buoyColors.card,borderRadius:16,border:`1px solid ${buoyColors.border}`,marginTop:16,overflow:"hidden"},availableKeysScroll:{maxHeight:150,overflowY:"auto",padding:"8px 16px 16px 16px"},availableKeyItem:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:"10px 12px",backgroundColor:buoyColors.hover,borderRadius:8,border:`1px solid ${buoyColors.border}`,marginBottom:8,cursor:"pointer",width:"100%",boxSizing:"border-box",textAlign:"left"},availableKeyText:{flex:1,fontSize:11,color:buoyColors.text,fontFamily:"ui-monospace, Menlo, monospace",marginRight:8,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",minWidth:0},emptyStateText:{fontSize:11,color:buoyColors.textMuted,fontStyle:"italic",textAlign:"center",padding:"12px 0"},howItWorksSection:{backgroundColor:buoyColors.card,borderRadius:16,border:`1px solid ${buoyColors.border}`,marginTop:16,overflow:"hidden"},howItWorksText:{fontSize:11,color:buoyColors.textSecondary,lineHeight:"16px",margin:"8px 0 12px 0",padding:"0 16px",fontFamily:"ui-monospace, Menlo, monospace"},examplesContainer:{padding:"8px 16px 16px 16px",borderTop:`1px solid ${buoyColors.border}`},examplesTitle:{fontSize:10,fontWeight:600,color:buoyColors.textMuted,fontFamily:"ui-monospace, Menlo, monospace",letterSpacing:.5,marginBottom:6},exampleItem:{fontSize:10,color:buoyColors.textMuted,fontFamily:"ui-monospace, Menlo, monospace",lineHeight:"16px"}};