@buoy-gg/network 7.0.41 → 7.0.42

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

@@ -1,51 +1 @@
-"use strict";
-
-/**
- * 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
- */
-
-import { useNetworkEventList } from "../hooks/useNetworkEventList";
-import { NetworkFilterViewV3 } from "./NetworkFilterViewV3.web";
-import { jsx as _jsx } from "react/jsx-runtime";
-export 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
-  } = useNetworkEventList({
-    filter,
-    ignoredPatterns,
-    paused: paused || !visible,
-    isPro
-  });
-  if (!visible) return null;
-  return /*#__PURE__*/_jsx(NetworkFilterViewV3, {
-    events: events,
-    filter: filter,
-    onFilterChange: onFilterChange,
-    ignoredPatterns: ignoredPatterns,
-    onRemovePattern: onRemovePattern,
-    onAddPattern: onAddPattern,
-    onTogglePatternMode: onTogglePatternMode
-  });
-}
+"use strict";import{useNetworkEventList as f}from"../hooks/useNetworkEventList";import{NetworkFilterViewV3 as l}from"./NetworkFilterViewV3.web";import{jsx as p}from"react/jsx-runtime";export function NetworkFilterScreen({visible:e,paused:o,isPro:n,filter:t,onFilterChange:s,ignoredPatterns:r,onRemovePattern:i,onAddPattern:m,onTogglePatternMode:u}){const{events:a}=f({filter:t,ignoredPatterns:r,paused:o||!e,isPro:n});if(!e)return null;return p(l,{events:a,filter:t,onFilterChange:s,ignoredPatterns:r,onRemovePattern:i,onAddPattern:m,onTogglePatternMode:u})}

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

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