@buoy-gg/network 7.0.41 → 7.0.42

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

@@ -1,55 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NetworkFilterScreen = NetworkFilterScreen;
-var _useNetworkEventList = require("../hooks/useNetworkEventList");
-var _NetworkFilterViewV = require("./NetworkFilterViewV3.web");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * NetworkFilterScreen.web — DOM twin of the `NetworkFilterScreen` screen
- * component inside NetworkModal.tsx (the native screen is private to the
- * modal; web hosts compose their own shell, so the screen is exported here as
- * the reusable piece — same precedent as NetworkDetailScreen.web).
- *
- * Same rule4 contract as native: hooks run unconditionally and the component
- * returns null when not visible; the subscription passes `paused || !visible`
- * so a hidden screen doesn't subscribe. Facet counts read the SAME filtered
- * list the user is looking at (`useNetworkEventList` — the platform-free hook
- * native uses, reused, not forked).
- *
- * @platform React DOM Web
- */
-
-function NetworkFilterScreen({
-  visible,
-  paused,
-  isPro,
-  filter,
-  onFilterChange,
-  ignoredPatterns,
-  onRemovePattern,
-  onAddPattern,
-  onTogglePatternMode
-}) {
-  // Facet counts read the same filtered list the user is looking at.
-  const {
-    events
-  } = (0, _useNetworkEventList.useNetworkEventList)({
-    filter,
-    ignoredPatterns,
-    paused: paused || !visible,
-    isPro
-  });
-  if (!visible) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkFilterViewV.NetworkFilterViewV3, {
-    events: events,
-    filter: filter,
-    onFilterChange: onFilterChange,
-    ignoredPatterns: ignoredPatterns,
-    onRemovePattern: onRemovePattern,
-    onAddPattern: onAddPattern,
-    onTogglePatternMode: onTogglePatternMode
-  });
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.NetworkFilterScreen=NetworkFilterScreen;var _useNetworkEventList=require("../hooks/useNetworkEventList");var _NetworkFilterViewV=require("./NetworkFilterViewV3.web");var _jsxRuntime=require("react/jsx-runtime");function NetworkFilterScreen({visible:e,paused:n,isPro:o,filter:t,onFilterChange:i,ignoredPatterns:r,onRemovePattern:s,onAddPattern:u,onTogglePatternMode:w}){const{events:a}=(0,_useNetworkEventList.useNetworkEventList)({filter:t,ignoredPatterns:r,paused:n||!e,isPro:o});if(!e)return null;return(0,_jsxRuntime.jsx)(_NetworkFilterViewV.NetworkFilterViewV3,{events:a,filter:t,onFilterChange:i,ignoredPatterns:r,onRemovePattern:s,onAddPattern:u,onTogglePatternMode:w})}

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

@@ -1,442 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NetworkFilterViewV3 = NetworkFilterViewV3;
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _react = require("react");
-var _reactNative = require("react-native");
-var _jsxRuntime = require("react/jsx-runtime");
-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: _sharedUi.macOSColors.semantic.info
-  };
-  if (contentType.includes("xml")) return {
-    type: "XML",
-    color: _sharedUi.macOSColors.semantic.success
-  };
-  if (contentType.includes("html")) return {
-    type: "HTML",
-    color: _sharedUi.macOSColors.semantic.warning
-  };
-  if (contentType.includes("text")) return {
-    type: "TEXT",
-    color: _sharedUi.macOSColors.semantic.success
-  };
-  if (contentType.includes("image")) return {
-    type: "IMAGE",
-    color: _sharedUi.macOSColors.semantic.error
-  };
-  if (contentType.includes("video")) return {
-    type: "VIDEO",
-    color: _sharedUi.macOSColors.semantic.error
-  };
-  if (contentType.includes("audio")) return {
-    type: "AUDIO",
-    color: _sharedUi.macOSColors.semantic.debug
-  };
-  if (contentType.includes("form")) return {
-    type: "FORM",
-    color: _sharedUi.macOSColors.semantic.info
-  };
-  return {
-    type: "OTHER",
-    color: _sharedUi.night.color.textTertiary
-  };
-}
-function getContentTypeIcon(type) {
-  switch (type) {
-    case "JSON":
-      return _sharedUi.FileJson;
-    case "HTML":
-    case "XML":
-    case "TEXT":
-      return _sharedUi.FileText;
-    case "IMAGE":
-      return _sharedUi.Image;
-    case "VIDEO":
-      return _sharedUi.Film;
-    case "AUDIO":
-      return _sharedUi.Music;
-    default:
-      return _sharedUi.Globe;
-  }
-}
-function getMethodColor(method) {
-  switch (method) {
-    case "GET":
-      return _sharedUi.macOSColors.semantic.success;
-    case "POST":
-      return _sharedUi.macOSColors.semantic.info;
-    case "PUT":
-      return _sharedUi.macOSColors.semantic.warning;
-    case "DELETE":
-      return _sharedUi.macOSColors.semantic.error;
-    case "PATCH":
-      return _sharedUi.macOSColors.semantic.success;
-    default:
-      return _sharedUi.night.color.textTertiary;
-  }
-}
-
-/**
- * Control panel for filtering captured network events by status, method, host, and content type.
- * Provides quick toggles, stats, and ignored-pattern management reminiscent of desktop tooling.
- */
-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`.
-  const [nextPatternMode, setNextPatternMode] = (0, _react.useState)("contains");
-  const patternModes = (0, _react.useMemo)(() => {
-    const map = new Map();
-    for (const p of ignoredPatterns) map.set(p.value, p.mode);
-    return map;
-  }, [ignoredPatterns]);
-  const activePatternsSet = (0, _react.useMemo)(() => new Set(ignoredPatterns.map(p => p.value)), [ignoredPatterns]);
-  const handlePatternAdd = (0, _react.useCallback)(pattern => {
-    onAddPattern({
-      value: pattern,
-      mode: nextPatternMode
-    });
-  }, [onAddPattern, nextPatternMode]);
-  const renderPatternMeta = (0, _react.useCallback)(pattern => {
-    const mode = patternModes.get(pattern) ?? "contains";
-    const isExact = mode === "exact";
-    const color = isExact ? _sharedUi.night.color.warning : _sharedUi.night.color.info;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      accessibilityRole: "button",
-      accessibilityLabel: `Match mode: ${mode}. Tap to toggle.`,
-      onPress: () => onTogglePatternMode(pattern),
-      style: [styles.modeBadge, {
-        borderColor: `${color}60`,
-        backgroundColor: `${color}15`
-      }],
-      hitSlop: {
-        top: 6,
-        bottom: 6,
-        left: 6,
-        right: 6
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.modeBadgeText, {
-          color
-        }],
-        children: isExact ? "EXACT" : "CONTAINS"
-      })
-    });
-  }, [patternModes, onTogglePatternMode]);
-  const renderAddFilterExtra = (0, _react.useCallback)(() => {
-    const options = [{
-      label: "Contains",
-      value: "contains",
-      hint: "substring"
-    }, {
-      label: "Exact",
-      value: "exact",
-      hint: "whole path/host/url"
-    }];
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.modeToggleRow,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.modeToggleLabel,
-        children: "Match:"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.modeToggleGroup,
-        children: options.map(opt => {
-          const isActive = nextPatternMode === opt.value;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            onPress: () => setNextPatternMode(opt.value),
-            style: [styles.modeToggleButton, isActive && styles.modeToggleButtonActive],
-            accessibilityRole: "button",
-            accessibilityState: {
-              selected: isActive
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.modeToggleButtonText, isActive && styles.modeToggleButtonTextActive],
-              children: opt.label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.modeToggleButtonHint,
-              children: opt.hint
-            })]
-          }, opt.value);
-        })
-      })]
-    });
-  }, [nextPatternMode]);
-  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]);
-  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]);
-  const filterSections = (0, _react.useMemo)(() => {
-    const sections = [];
-    sections.push({
-      id: "status",
-      title: "Status",
-      type: "status",
-      data: ["all", "success", "error", "pending"].map(status => ({
-        id: `status::${status}`,
-        label: status.charAt(0).toUpperCase() + status.slice(1),
-        count: statusCounts[status],
-        icon: status === "success" ? _sharedUi.CheckCircle : status === "error" ? _sharedUi.XCircle : status === "pending" ? _sharedUi.Clock : _sharedUi.Globe,
-        color: status === "success" ? _sharedUi.macOSColors.semantic.success : status === "error" ? _sharedUi.macOSColors.semantic.error : status === "pending" ? _sharedUi.macOSColors.semantic.warning : _sharedUi.macOSColors.semantic.info,
-        isActive: filter.status === status || !filter.status && status === "all",
-        value: status
-      }))
-    });
-    const methodEntries = Object.entries(methodCounts);
-    if (methodEntries.length > 0) {
-      sections.push({
-        id: "method",
-        title: "Method",
-        type: "method",
-        data: methodEntries.map(([method, count]) => ({
-          id: `method::${method}`,
-          label: method,
-          count,
-          color: getMethodColor(method),
-          isActive: filter.method?.includes(method) ?? false,
-          value: method
-        }))
-      });
-    }
-    const contentTypeEntries = Object.entries(contentTypeCounts);
-    if (contentTypeEntries.length > 0) {
-      sections.push({
-        id: "contentType",
-        title: "Content Type",
-        type: "contentType",
-        data: contentTypeEntries.map(([type, count]) => {
-          const representativeEvent = events.find(event => getContentType(event).type === type);
-          const {
-            color
-          } = representativeEvent ? getContentType(representativeEvent) : {
-            color: _sharedUi.night.color.textTertiary
-          };
-          return {
-            id: `contentType::${type}`,
-            label: type,
-            count,
-            icon: getContentTypeIcon(type),
-            color,
-            isActive: filter.contentType?.includes(type) ?? false,
-            value: type
-          };
-        })
-      });
-    }
-    return sections;
-  }, [contentTypeCounts, events, filter.contentType, filter.method, filter.status, methodCounts, statusCounts]);
-  const dynamicFilterConfig = (0, _react.useMemo)(() => ({
-    sections: filterSections,
-    addFilterSection: {
-      enabled: true,
-      placeholder: "Enter domain or URL pattern...",
-      title: "ACTIVE FILTERS",
-      icon: _sharedUi.Filter,
-      renderExtra: renderAddFilterExtra
-    },
-    availableItemsSection: {
-      enabled: true,
-      title: "AVAILABLE DOMAINS & URLS",
-      emptyMessage: "No network events captured yet. Domains and URLs will appear here.",
-      items: suggestionItems
-    },
-    howItWorksSection: {
-      enabled: true,
-      title: "HOW NETWORK FILTERS WORK",
-      description: "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.",
-      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"],
-      icon: _sharedUi.Filter
-    },
-    onFilterChange: handleDynamicFilterChange,
-    onPatternAdd: handlePatternAdd,
-    onPatternToggle: onRemovePattern,
-    activePatterns: activePatternsSet,
-    renderPatternMeta
-  }), [activePatternsSet, filterSections, handleDynamicFilterChange, handlePatternAdd, onRemovePattern, renderAddFilterExtra, renderPatternMeta, suggestionItems]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DynamicFilterView, {
-    ...dynamicFilterConfig
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  modeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 6,
-    borderWidth: 1
-  },
-  modeBadgeText: {
-    fontSize: 9,
-    fontFamily: _sharedUi.monoFont,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  },
-  modeToggleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 8
-  },
-  modeToggleLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textSecondary,
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 0.3
-  },
-  modeToggleGroup: {
-    flexDirection: "row",
-    gap: 6,
-    flex: 1
-  },
-  modeToggleButton: {
-    flex: 1,
-    paddingVertical: 6,
-    paddingHorizontal: 10,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    backgroundColor: _sharedUi.night.color.buttonSurface,
-    alignItems: "center"
-  },
-  modeToggleButtonActive: {
-    borderColor: _sharedUi.night.color.accentBorderStrong,
-    backgroundColor: _sharedUi.night.color.accentSoft
-  },
-  modeToggleButtonText: {
-    fontSize: 11,
-    fontWeight: "700",
-    color: _sharedUi.night.color.textSecondary,
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 0.3
-  },
-  modeToggleButtonTextActive: {
-    color: _sharedUi.night.color.accent
-  },
-  modeToggleButtonHint: {
-    fontSize: 9,
-    color: _sharedUi.night.color.textTertiary,
-    marginTop: 1
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.NetworkFilterViewV3=NetworkFilterViewV3;var _sharedUi=require("@buoy-gg/shared-ui");var _react=require("react");var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");function getContentType(n){const s=n.responseHeaders||n.requestHeaders;const c=s?.["content-type"]||s?.["Content-Type"]||"";if(c.includes("json"))return{type:"JSON",color:_sharedUi.macOSColors.semantic.info};if(c.includes("xml"))return{type:"XML",color:_sharedUi.macOSColors.semantic.success};if(c.includes("html"))return{type:"HTML",color:_sharedUi.macOSColors.semantic.warning};if(c.includes("text"))return{type:"TEXT",color:_sharedUi.macOSColors.semantic.success};if(c.includes("image"))return{type:"IMAGE",color:_sharedUi.macOSColors.semantic.error};if(c.includes("video"))return{type:"VIDEO",color:_sharedUi.macOSColors.semantic.error};if(c.includes("audio"))return{type:"AUDIO",color:_sharedUi.macOSColors.semantic.debug};if(c.includes("form"))return{type:"FORM",color:_sharedUi.macOSColors.semantic.info};return{type:"OTHER",color:_sharedUi.night.color.textTertiary}}function getContentTypeIcon(n){switch(n){case"JSON":return _sharedUi.FileJson;case"HTML":case"XML":case"TEXT":return _sharedUi.FileText;case"IMAGE":return _sharedUi.Image;case"VIDEO":return _sharedUi.Film;case"AUDIO":return _sharedUi.Music;default:return _sharedUi.Globe}}function getMethodColor(n){switch(n){case"GET":return _sharedUi.macOSColors.semantic.success;case"POST":return _sharedUi.macOSColors.semantic.info;case"PUT":return _sharedUi.macOSColors.semantic.warning;case"DELETE":return _sharedUi.macOSColors.semantic.error;case"PATCH":return _sharedUi.macOSColors.semantic.success;default:return _sharedUi.night.color.textTertiary}}function NetworkFilterViewV3({events:n,filter:s,onFilterChange:c,ignoredPatterns:d=[],onRemovePattern:g=()=>{},onAddPattern:h=()=>{},onTogglePatternMode:p=()=>{}}){const[m,L]=(0,_react.useState)("contains");const T=(0,_react.useMemo)(()=>{const o=new Map;for(const e of d)o.set(e.value,e.mode);return o},[d]);const y=(0,_react.useMemo)(()=>new Set(d.map(o=>o.value)),[d]);const S=(0,_react.useCallback)(o=>{h({value:o,mode:m})},[h,m]);const f=(0,_react.useCallback)(o=>{const e=T.get(o)??"contains";const r=e==="exact";const t=r?_sharedUi.night.color.warning:_sharedUi.night.color.info;return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{accessibilityRole:"button",accessibilityLabel:`Match mode: ${e}. Tap to toggle.`,onPress:()=>p(o),style:[styles.modeBadge,{borderColor:`${t}60`,backgroundColor:`${t}15`}],hitSlop:{top:6,bottom:6,left:6,right:6},children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.modeBadgeText,{color:t}],children:r?"EXACT":"CONTAINS"})})},[T,p]);const x=(0,_react.useCallback)(()=>{const o=[{label:"Contains",value:"contains",hint:"substring"},{label:"Exact",value:"exact",hint:"whole path/host/url"}];return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.modeToggleRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.modeToggleLabel,children:"Match:"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.modeToggleGroup,children:o.map(e=>{const r=m===e.value;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{onPress:()=>L(e.value),style:[styles.modeToggleButton,r&&styles.modeToggleButtonActive],accessibilityRole:"button",accessibilityState:{selected:r},children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.modeToggleButtonText,r&&styles.modeToggleButtonTextActive],children:e.label}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.modeToggleButtonHint,children:e.hint})]},e.value)})})]})},[m]);const C=(0,_react.useMemo)(()=>{const o={all:n.length,success:0,error:0,pending:0};n.forEach(e=>{if(e.error||e.status&&e.status>=400){o.error+=1;return}if(e.status&&e.status>=200&&e.status<300){o.success+=1;return}if(!e.status&&!e.error){o.pending+=1}});return o},[n]);const b=(0,_react.useMemo)(()=>{return n.reduce((o,e)=>{if(!e.method)return o;o[e.method]=(o[e.method]||0)+1;return o},{})},[n]);const O=(0,_react.useMemo)(()=>{return n.reduce((o,e)=>{const{type:r}=getContentType(e);o[r]=(o[r]||0)+1;return o},{})},[n]);const E=(0,_react.useMemo)(()=>{const o=new Set;n.forEach(e=>{if(e.host){o.add(e.host);return}try{if(e.url){const r=new URL(e.url);const t=String(r.host||"");if(t)o.add(t)}}catch{}});return Array.from(o).filter(e=>e&&e!=="").sort((e,r)=>e.localeCompare(r))},[n]);const M=(0,_react.useMemo)(()=>{const o=new Set;n.forEach(e=>{if(!e.url)return;try{const r=new URL(e.url);const t=String(r.origin||"");const a=String(r.pathname||"");const i=`${t}${a}`;o.add(i)}catch{o.add(e.url)}});return Array.from(o).filter(e=>e&&e!=="").sort((e,r)=>e.localeCompare(r))},[n]);const A=(0,_react.useMemo)(()=>{const o=30;const e=E.slice(0,o);const r=M.slice(0,o);return[...e,...r]},[E,M]);const w=(0,_react.useCallback)((o,e)=>{const[r]=o.split("::");if(r==="status"){const t=e==="all"?void 0:e;c({...s,status:t});return}if(r==="method"){const t=String(e);const a=s.method||[];const i=a.includes(t);const l=i?a.filter(u=>u!==t):[t];c({...s,method:l.length>0?l:void 0});return}if(r==="contentType"){const t=String(e);const a=s.contentType||[];const i=a.includes(t);const l=i?a.filter(u=>u!==t):[t];c({...s,contentType:l.length>0?l:void 0})}},[s,c]);const I=(0,_react.useMemo)(()=>{const o=[];o.push({id:"status",title:"Status",type:"status",data:["all","success","error","pending"].map(t=>({id:`status::${t}`,label:t.charAt(0).toUpperCase()+t.slice(1),count:C[t],icon:t==="success"?_sharedUi.CheckCircle:t==="error"?_sharedUi.XCircle:t==="pending"?_sharedUi.Clock:_sharedUi.Globe,color:t==="success"?_sharedUi.macOSColors.semantic.success:t==="error"?_sharedUi.macOSColors.semantic.error:t==="pending"?_sharedUi.macOSColors.semantic.warning:_sharedUi.macOSColors.semantic.info,isActive:s.status===t||!s.status&&t==="all",value:t}))});const e=Object.entries(b);if(e.length>0){o.push({id:"method",title:"Method",type:"method",data:e.map(([t,a])=>({id:`method::${t}`,label:t,count:a,color:getMethodColor(t),isActive:s.method?.includes(t)??false,value:t}))})}const r=Object.entries(O);if(r.length>0){o.push({id:"contentType",title:"Content Type",type:"contentType",data:r.map(([t,a])=>{const i=n.find(u=>getContentType(u).type===t);const{color:l}=i?getContentType(i):{color:_sharedUi.night.color.textTertiary};return{id:`contentType::${t}`,label:t,count:a,icon:getContentTypeIcon(t),color:l,isActive:s.contentType?.includes(t)??false,value:t}})})}return o},[O,n,s.contentType,s.method,s.status,b,C]);const R=(0,_react.useMemo)(()=>({sections:I,addFilterSection:{enabled:true,placeholder:"Enter domain or URL pattern...",title:"ACTIVE FILTERS",icon:_sharedUi.Filter,renderExtra:x},availableItemsSection:{enabled:true,title:"AVAILABLE DOMAINS & URLS",emptyMessage:"No network events captured yet. Domains and URLs will appear here.",items:A},howItWorksSection:{enabled:true,title:"HOW NETWORK FILTERS WORK",description:"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.",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"],icon:_sharedUi.Filter},onFilterChange:w,onPatternAdd:S,onPatternToggle:g,activePatterns:y,renderPatternMeta:f}),[y,I,w,S,g,x,f,A]);return(0,_jsxRuntime.jsx)(_sharedUi.DynamicFilterView,{...R})}const styles=_reactNative.StyleSheet.create({modeBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:6,borderWidth:1},modeBadgeText:{fontSize:9,fontFamily:_sharedUi.monoFont,fontWeight:"700",letterSpacing:.5},modeToggleRow:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},modeToggleLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont,letterSpacing:.3},modeToggleGroup:{flexDirection:"row",gap:6,flex:1},modeToggleButton:{flex:1,paddingVertical:6,paddingHorizontal:10,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,backgroundColor:_sharedUi.night.color.buttonSurface,alignItems:"center"},modeToggleButtonActive:{borderColor:_sharedUi.night.color.accentBorderStrong,backgroundColor:_sharedUi.night.color.accentSoft},modeToggleButtonText:{fontSize:11,fontWeight:"700",color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont,letterSpacing:.3},modeToggleButtonTextActive:{color:_sharedUi.night.color.accent},modeToggleButtonHint:{fontSize:9,color:_sharedUi.night.color.textTertiary,marginTop:1}});