@rozenite/network-activity-plugin 1.10.0 → 1.12.0

package/dist/devtools/assets/{App-CUXU0mup.css → App-xppYUJvX.css}

@@ -574,6 +574,9 @@ video {
     max-width: 1536px;
   }
 }
+.pointer-events-none {
+  pointer-events: none;
+}
 .visible {
   visibility: visible;
 }
@@ -589,12 +592,38 @@ video {
 .sticky {
   position: sticky;
 }
+.inset-0 {
+  inset: 0px;
+}
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+.bottom-0 {
+  bottom: 0px;
+}
+.bottom-1 {
+  bottom: 0.25rem;
+}
+.left-1 {
+  left: 0.25rem;
+}
 .left-2 {
   left: 0.5rem;
 }
+.right-1 {
+  right: 0.25rem;
+}
 .top-0 {
   top: 0px;
 }
+.top-1 {
+  top: 0.25rem;
+}
 .z-10 {
   z-index: 10;
 }
@@ -965,6 +994,10 @@ video {
 .border {
   border-width: 1px;
 }
+.border-x {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -977,6 +1010,9 @@ video {
 .border-t {
   border-top-width: 1px;
 }
+.border-blue-300\/70 {
+  border-color: rgb(147 197 253 / 0.7);
+}
 .border-blue-500\/50 {
   border-color: rgb(59 130 246 / 0.5);
 }
@@ -1025,6 +1061,12 @@ video {
 .bg-background {
   background-color: hsl(var(--background));
 }
+.bg-blue-400\/10 {
+  background-color: rgb(96 165 250 / 0.1);
+}
+.bg-blue-400\/15 {
+  background-color: rgb(96 165 250 / 0.15);
+}
 .bg-blue-500\/30 {
   background-color: rgb(59 130 246 / 0.3);
 }
@@ -1044,6 +1086,18 @@ video {
 .bg-destructive {
   background-color: hsl(var(--destructive));
 }
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}
 .bg-gray-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
@@ -1063,6 +1117,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-900\/95 {
+  background-color: rgb(17 24 39 / 0.95);
+}
 .bg-gray-950 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
@@ -1089,6 +1146,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
 }
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
+}
 .bg-red-950\/30 {
   background-color: rgb(69 10 10 / 0.3);
 }
@@ -1117,9 +1178,15 @@ video {
 .p-0 {
   padding: 0px;
 }
+.p-0\.5 {
+  padding: 0.125rem;
+}
 .p-1 {
   padding: 0.25rem;
 }
+.p-1\.5 {
+  padding: 0.375rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -1228,6 +1295,10 @@ video {
 .italic {
   font-style: italic;
 }
+.tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
 .leading-snug {
   line-height: 1.375;
 }
@@ -1377,12 +1448,27 @@ video {
 .outline {
   outline-style: solid;
 }
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.ring-blue-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
+}
+.ring-offset-1 {
+  --tw-ring-offset-width: 1px;
+}
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
 .ring-offset-blue-500 {
   --tw-ring-offset-color: #3b82f6;
 }
+.ring-offset-gray-950 {
+  --tw-ring-offset-color: #030712;
+}
 .\!filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
 }
@@ -1399,6 +1485,11 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 @keyframes enter {
 
   from {
@@ -1516,6 +1607,9 @@ video {
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
+.hover\:opacity-80:hover {
+  opacity: 0.8;
+}
 .focus\:bg-gray-700:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));

package/dist/rozenite.json

@@ -1 +1 @@
-{"name":"@rozenite/network-activity-plugin","version":"1.10.0","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/devtools/App.html"}]}
+{"name":"@rozenite/network-activity-plugin","version":"1.12.0","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/devtools/App.html"}]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native/index.cjs",
@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "nanoevents": "^9.1.0",
-    "@rozenite/agent-shared": "1.10.0",
-    "@rozenite/agent-bridge": "1.10.0",
-    "@rozenite/plugin-bridge": "1.10.0"
+    "@rozenite/agent-shared": "1.12.0",
+    "@rozenite/agent-bridge": "1.12.0",
+    "@rozenite/plugin-bridge": "1.12.0"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.26.0",
@@ -53,8 +53,8 @@
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "zustand": "^5.0.6",
-    "@rozenite/vite-plugin": "1.10.0",
-    "rozenite": "1.10.0"
+    "@rozenite/vite-plugin": "1.12.0",
+    "rozenite": "1.12.0"
   },
   "peerDependencies": {
     "react-native-nitro-fetch": "*",

package/src/ui/components/FilterBar.tsx

@@ -16,35 +16,21 @@ import { Input } from './Input';
 import { Button } from './Button';
 import { X, Filter, ChevronDown, Check } from 'lucide-react';
 import type { HttpMethod, NetworkEventSource } from '../../shared/client';
-
-export type RequestTypeFilter = 'http' | 'websocket' | 'sse';
-export type AdvancedFilterState = {
-  methods: Set<HttpMethod>;
-  sources: Set<NetworkEventSource>;
-  status: string;
-  domain: string;
-  contentType: string;
-  failedOnly: boolean;
-  inFlightOnly: boolean;
-  overriddenOnly: boolean;
-  minSize: string;
-  maxSize: string;
-  minDuration: string;
-  maxDuration: string;
-};
-
-export type FilterState = {
-  text: string;
-  types: Set<RequestTypeFilter>;
-  advanced: AdvancedFilterState;
-};
+import {
+  createDefaultFilter,
+  DEFAULT_REQUEST_TYPES,
+} from '../state/filter';
+import type {
+  AdvancedFilterState,
+  FilterState,
+  RequestTypeFilter,
+} from '../state/filter';
 
 type FilterBarProps = {
   filter: FilterState;
   onFilterChange: (filter: FilterState) => void;
 };
 
-const REQUEST_TYPES: RequestTypeFilter[] = ['http', 'sse', 'websocket'];
 const HTTP_METHODS: HttpMethod[] = [
   'GET',
   'POST',
@@ -55,25 +41,6 @@ const HTTP_METHODS: HttpMethod[] = [
 ];
 const SOURCES: NetworkEventSource[] = ['builtin', 'nitro'];
 
-export const createDefaultFilter = (): FilterState => ({
-  text: '',
-  types: new Set(),
-  advanced: {
-    methods: new Set(),
-    sources: new Set(),
-    status: '',
-    domain: '',
-    contentType: '',
-    failedOnly: false,
-    inFlightOnly: false,
-    overriddenOnly: false,
-    minSize: '',
-    maxSize: '',
-    minDuration: '',
-    maxDuration: '',
-  },
-});
-
 const getTypeLabel = (type: RequestTypeFilter) => {
   switch (type) {
     case 'http':
@@ -112,7 +79,8 @@ const getAdvancedFilterCount = (advanced: AdvancedFilterState) => {
 };
 
 const getActiveFilterCount = (filter: FilterState) => {
-  const typeFilterCount = filter.types.size > 0 ? 1 : 0;
+  const typeFilterCount =
+    filter.types.size < DEFAULT_REQUEST_TYPES.length ? 1 : 0;
 
   return typeFilterCount + getAdvancedFilterCount(filter.advanced);
 };
@@ -250,7 +218,7 @@ export const FilterBar = ({ filter, onFilterChange }: FilterBarProps) => {
   };
 
   const activeFilterCount = getActiveFilterCount(filter);
-  const hasActiveFilters = filter.text !== '' || activeFilterCount > 0;
+  const hasActiveFilters = filter.text.trim() !== '' || activeFilterCount > 0;
 
   return (
     <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
@@ -293,7 +261,7 @@ export const FilterBar = ({ filter, onFilterChange }: FilterBarProps) => {
             {...getFloatingProps()}
           >
             <FilterPanelLabel>Request Type</FilterPanelLabel>
-            {REQUEST_TYPES.map((type) => (
+            {DEFAULT_REQUEST_TYPES.map((type) => (
               <FilterCheckbox
                 key={type}
                 checked={filter.types.has(type)}